WebFund 2016W Lecture 8: Difference between revisions

From Soma-notes
No edit summary
LeeCroft (talk | contribs)
 
(2 intermediate revisions by the same user not shown)
Line 3: Line 3:
The video from the lecture given on February 2, 2016 [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/lectures/comp2406-2016w-lec08-02Feb2016.mp4 is now available].
The video from the lecture given on February 2, 2016 [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/lectures/comp2406-2016w-lec08-02Feb2016.mp4 is now available].


==Student Notes==
==Notes==


===Agenda===
===Agenda===
Line 15: Line 15:
* What does path.normalize do? (Answer: Tries to fix a malformed path. e.g. <tt>/home//dave/</tt> becomes <tt>/home/dave/</tt>)
* What does path.normalize do? (Answer: Tries to fix a malformed path. e.g. <tt>/home//dave/</tt> becomes <tt>/home/dave/</tt>)
* What is Jade? (Answer: Templating language.)
* 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: [http://jade-lang.com 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 <code>extends</code> keyword work in Jade?
**We write: <code>extends JADE_FILE</code>
**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 <code>block</code> and <code>extends</code> 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: <code>app.set('view engine', 'jade');</code>
**Specify where to find the Jade templates: <code>app.set('views', __dirname);</code>
*To render a Jade code, you can use <code>jade.render('Jade code...', {/*Options go here*/})</code>
**These options can be found on the documentation site: [http://jade-lang.com/api/ http://jade-lang.com/api/]
*To render a template, you can use <code>jade.renderFile('Template', {/*Options go here*/})</code>
*To respond to a request with a rendered page, you can use <code>res.render('Template', {/*Data to pass to the template goes here*/});</code>
**Note, you don't specify a .jade extension
*The <code>render()</code> 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 <code>module.exports = SOME_OBJECT;</code>
*<code>module.exports</code> is the data "returned" by the file so that it can be used in other .js files
*This is loaded using <code>require(FILE)</code>
**Note that this can only be used to load the same file once
===Code Modifications===
*Removing the line: <code>app.use(bodyParser.urlencoded({extended:false}));</code>
**The list page has no user people listed
**The form data wasn't parsed, so the page didn't have values to display
*removing <code>module.exports=router;</code> from index.js:
**The following line in app.js will no longer have the expected return value to store in the routes variable: <code>var routes = require('./routes/index');</code>
**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)

Latest revision as of 15:11, 5 February 2016

Video

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

Notes

Agenda

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*/})
  • 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)