WebFund 2014W: Assignment 1

This assignment is not yet finalized - do not work on this yet!

In this assignment you are to examine, modify, and answer questions regarding the form-demo sample node application. The files of this application are also listed below. You can run this code by running the commands

node app.js

in the unzipped directory within the class Lubuntu VM (or your own node.js environment). Note the zip file includes the needed node_modules, so you do not need to run npm install.

Please submit your answers as a single text or PDF file uploaded to CULearn with "COMP 2406 Assignment 1", your name, student number, and the date as the first four lines of the file. No other formats will be accepted. (If you work in MS Word or OpenOffice, be sure to convert the file to text or PDF.) Submitting a file that is not a text or PDF file may result in your assignment not being graded and you receiving no marks for this assignment.

Questions

There are ?? points below in three parts of ?? points each. Answer all questions.

Part A

What happens when you change the following lines in form-demo? Describe the change in behaviour as if each deletion is the only change made to the application. If a runtime error is generated please describe the error and briefly explain why that error was produced. (one point each)

1. package.json: delete 7
2. app.js: delete 6, add semicolon to end of 5
3. app.js: delete 8
4. app.js: delete 17
5. app.js: delete 18
6. app.js: delete 25-27
7. app.js: delete 31
8. app.js: delete 32
9. app.js: delete 34-36
10. index.jade: change action="/add" to "action="/"
11. index.jade: delete 11
12. index.jade: delete 12
13. index.jade: delete ", name=name" from 7
14. index.jade: delete 8
15. index.jade: change "type=checkbox" to "type=text" on 20
16. index.jade: delete 26
17. add.jade: delete 3
18. Add this line to the end of app.js and index.js
    console.log("Finished processing %s", __filename); .

Part B

Describe how to change the code to add the following features/change the following behaviour. If the changes are small, specify the line(s) to changed. If the changes are more substantial, you may just list the entire modified file. These changes are cumulative, so the changes for the third question should take into account those made previously.

1. (2 points) Make the application listen on port 3200.
2. (2 points) Add a "Home" link to the submit results screen (/add) that takes you back to the form screen.
3. (6 points) Add a "Phone" field to the end of the form that behaves similarly to all of the other form entries.
4. (10 points) Change the output page views/add.jade to output a table that is nicely formatted using bootstrap. You'll probably want to embed the table inside of a panel and/or a well. The "Home" link should be at the very bottom of the page.

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.
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()?
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.

Source

app.js

  
/**
 * Module dependencies.
 */

// set NODE_ENV environment variable.  Defaults to development so
// not needed.  Can also set on the command line with
// "NODE_ENV=development node app.js"
//process.env.NODE_ENV = 'development';

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', routes.index);
app.post('/add', routes.add);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port') +
	      ' in ' + app.get('env') + ' mode.');
});

routes/index.js

  
/*
 * GET home page.
 */

var state = [];

exports.index = function(req, res){
    res.render('index', { title: 'COMP 2406 Simple form demo' });
};

exports.add = function(req, res){
    var obj = { name: req.body.name,
		city: req.body.city,
                country: req.body.country,
                birthday: req.body.birthday,
                email: req.body.email };
    state.push(obj);
    res.render('add', { title: 'People Listing', items: state });
};

views/layout.jade

doctype html
html
  head
    title= title
    script(src="/vendor/jquery/jquery.js")
    script(src="/vendor/bootstrap/dist/js/bootstrap.js")
    link(rel='stylesheet', href='/vendor/bootstrap/dist/css/bootstrap.css')
    block header
  body
    block content

views/index.jade

extends layout

block content
  h1= title

  div.well
    p Fill out your info
    form(method="post", action="/add")
      div.control-group.input-append
        input#name(type="text", name="name", data-required)
        label.add-on(for="name")
          | Name
      div.control-group.input-append
        input#country(type="text", name="city", data-required)
        label.add-on(for="city")
          | City
      div.control-group.input-append
        input#country(type="text", name="country")
        label.add-on(for="country")
          | Country
      div.control-group.input-append
        input#birthday(type="text", name="birthday")
        label.add-on(for="birthday")
          | Birthday
      div.control-group.input-append
        input#email(type="text", name="email")
        label.add-on(for="email")
          | Email
      button(type="submit") Submit

views/add.jade

extends layout

block content
  h1= title

  each item in items
    p Name: #{item.name}
    p City: #{item.city}
    p Country: #{item.country}
    p Birthday: #{item.birthday}
    p Email: #{item.email}
    br