COMP 2406 Fall 2013 (October 7, 2013)
Assignment 1 solutions


PART B

1. (2 points) Make the application listen on port 3200.

   A: In app.js, change the listen call to say 3200 instead of 3010 (line 34)
   ***
      app.listen(3200, function(){
         console.log("Express server listening on port %d in %s mode",        
                     app.address().port, app.settings.env);
      });
   ***

2. (2 points) Add a "Home" button to the submit results screen (/add)
   that takes you back to the form screen.

   A: You have to modify add.jade, but there are a few ways you can do it.

   First, you can make an empty form:
   ***
      form(method="get", action="/")
      button(type="submit") Home
   *** 

   you can add an onclick attribute in add.jade 
   ***
      button(type="button" onclick="window.location='/'") Home
   ***

   Or you could use CSS to style a link to look like a button. 

3 (6 points) Add a "Phone" field to the end of the form that behaves
  similarly to all of the other form entries.

   A: You need to change three files.

   In views/index.jade add a div for phone just like the other properties
   ***
   div
      input#phone(type="text", name="phone")
      label.add-on(for="phone")
        | Phone
   ***

   In routes/index.js add phone to the options of add res.render
   (just after date for example)

   ***
      phone: req.body.phone,
   ***

   in views/add.jade add an element for phone just like the other properties
   ***
      p Phone: #{phone}
   ***

4. (10 points) Make the submit results screen show all of the records
that have been added since the web application was started.  List them
one after another on the page in the same format as the original form
submission form with a blank line in between them.  The "Home" button
should be at the very bottom of the page.

    A: You should do the following:
       * modify routes/index.js to keep an array of js objects.
       * In the exports.add function, push new elements to this array
         and pass this list of js objects into the render call.
       * In views/add.jade use a for each loop to loop over the passed
         in objects and add ui items for them.

    routes/index.js:
    ***
    var state = []

    exports.add = function(req, res){
 
       var obj = { title: 'Person added',
                   name: req.body.name,
                   country: req.body.country,
                   date: req.body.birthday,
                   email: req.body.email,
                   phone: req.body.phone }

       state.push(obj)

       res.render('add', { title: 'Person added', items: state });
    };


    ***

    views/add.jade.
    ***
    each item in items
       p Name: #{item.name}
       p Country: #{item.country}
       p Date: #{item.date}
       p Email: #{item.email}
       p Phone: #{item.phone}
    ***

PART C

1. (5 points) What are the names given to the functions
   exports.index() and exports.add() in app.js?  How are these names
   defined?  How does this naming involve JavaScript's support for
   modules?  Explain.

   A: The names are routes.index and routes.add.  The names are
      defined by the line "var routes = require("./routes");".  The
      require function loads the index.js file in the specified
      directory and returns the exports object defined in that file.
      The requires() function *is* how modules are implemented in
      node.


2. (5 points) When is the anonymous function on line 34 of app.js
   called?  Also, why is a function defined here rather than, say,
   just calling the console.log() function after the call to
   app.listen()?

   A: This callback function is called near or at the end of
      app.listen() after it has finished doing the setup for listening
      on an open TCP socket for incoming web requests.  Listening on a
      socket may require some time to complete.  By defining a
      callback rather than blocking until the socket has been opened,
      it is possible for the single-threaded node process do perform
      other independent tasks while it waits.

3. (10 points) When a user types in a value for the "Name" form field,
   hits submit, and then sees the response page containing the
   characters entered for "Name", how does this value move around in
   the form-demo code?  Specifically where does it come in from the
   user, and how does it get from there to the page that is sent back
   in response?  Explain step by step.

   A: 1. The data first appears in the the form defined in
         views/index.jade, input into the browser on an HTML page
         generated by node using index.jade and layout.jade.

      2. It is next visible in routes/index.js, in exports.add() as
         part of the body of the incoming request (req.body) for the
         POST request generated by the form submission.  (Note that
         there is a significant amount of code that is run before
         exports.add() is called; however, that code is all part of
         the http server functionality that we incorporated as part of
         the express framework.)

      3. The data is then passed to the template views/add.jade which
         uses it to generate the page that is sent back in response to
         the POST.