WebFund 2016W Lecture 8

Video

The video from the lecture given on February 2, 2016 is now available.

Notes

Agenda

• Spoke/explained the solutions for assignment 2.
• Answered questions about the upcoming assignment 3.

Topics (from assignment 2 & 3)

• What does the regular expression on line 92 of tinywebserver.js do? (Answer: Prevents breaking out of the current directory by using .. and ~)
• What does path.normalize do? (Answer: Tries to fix a malformed path. e.g. /home//dave/ becomes /home/dave/)
• What is Jade? (Answer: Templating language.)

Student Notes

General

• Code from Tutorial 4 will be used on the midterm
• Know and understand what the code does and master it

Debugging

• One way to deal with potential errors is to surround code with a try/catch block
• To further track down the problem, use the Node debugger
• In class, there was a problem when reading/parsing the JSON option file
  • Using the debugger, we saw that everything was fine parsing it
  • The issue was that the errorpage did not exist from the working directory
  • Make sure to have all the required files in the correct directory
  • also, make sure you are working on the correct version of your code (in class, we were modifying the wrong code while debugging)

Jade

General

• Jade is a templating language for HTML
• HTML and Jade have a one-to-one correspondence (for the most part)
• See: jade-lang.com for documentation
• Jade is parsed on the server side, NOT the client side
• In our example (form-demo), form data comes from the body (object) of the post request (object)
  • The bodyparser is used to parse form data from the body of the request that has been received. The parsed data is then passed into a Jade template to be rendered along with the other Jade code into HTML

The extends keyword

• How does the extends keyword work in Jade?
  • We write: extends JADE_FILE
  • This allows a template to extend a parent template. It can then override fill in pre-defined blocks of content
  • Jade supports template inheritance via the block and extends keywords. A block acts as a placeholder in the parent template which can be replaced in the child templates
  • Allows for reuse of Jade templates

Using Jade

• To render template with the Jade engine, we must tell the app to use the engine
  • Specify that the app should use Jade: app.set('view engine', 'jade');
  • Specify where to find the Jade templates: app.set('views', __dirname);
• To render a Jade code, you can use jade.render('Jade code...', {/*Options go here*/})
  • These options can be found on the documentation site: http://jade-lang.com/api/
• To render a template, you can use jade.renderFile('Template', {/*Options go here*/})
• To respond to a request with a rendered page, you can use res.render('Template', {/*Data to pass to the template goes here*/});
  • Note, you don't specify a .jade extension
• The render() method will convert the jade code or template to HTML

module.exports and require()

• You can set what will be exported form a file using module.exports = SOME_OBJECT;
• module.exports is the data "returned" by the file so that it can be used in other .js files
• This is loaded using require(FILE)
  • Note that this can only be used to load the same file once

Code Modifications

• Removing the line: app.use(bodyParser.urlencoded({extended:false}));
  • The list page has no user people listed
  • The form data wasn't parsed, so the page didn't have values to display
• removing module.exports=router; from index.js:
  • The following line in app.js will no longer have the expected return value to store in the routes variable: var routes = require('./routes/index');
  • This means that none of the routing will work

HTML Button Types

• submit -> submits form data to server(default option)
• reset -> resets all controls to initial values
• button -> no default behaviour (usually used for client-side JavaScript)