WebFund 2013F: Assignment 1

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

npm install
node app.js

in the unzipped directory within the class Lubuntu environment.

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. Submitting in another format may result in your assignment not being graded and you receiving no marks for this assignment.

Solutions for Assignment 1 are available here.

Questions

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

Part A

What happens when you change the following lines in form-demo? Describe the change in behavior 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. style.css: delete 2
11. style.css: delete 3
12. index.jade: change action="/add" to "action="/"
13. index.jade: delete 11
14. index.jade: delete 12
15. index.jade: delete ", name=name" from 7
16. index.jade: delete 8
17. index.jade: change "type=checkbox" to "type=text" on 20
18. index.jade: delete 26
19. add.jade: delete 3
20. 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 behavior. 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" button 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) 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.

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

package.json

{
    "name": "application-name"
  , "version": "0.0.1"
  , "private": true
  , "dependencies": {
      "express": "2.5.8"
    , "jade": ">= 0.0.1"
  }
}

app.js

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes');

var app = module.exports = express.createServer();

// Configuration

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
  app.use(express.errorHandler());
});

// Routes

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

app.listen(3010, function(){
  console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);
});

public/stylesheets/style.css

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

routes/index.js

/*
 * GET home page.
 */

exports.index = function(req, res){
    res.render('index', { title: 'form demo with node and express' })
};

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

views/layout.jade

!!!
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body!= body

views/index.jade

h1= title

div
  p Fill out your info
  form(method="post", action="/add")
    div
      input#name(type="text", name="name")
      label.add-on(for="name")
        | Name
    div
      input#country(type="text", name="country")
      label.add-on(for="country")
        | Country
    div
      input#birthday(type="text", name="birthday")
      label.add-on(for="birthday")
        | Birthday
    div
      label.checkbox
        input#send-email(type="checkbox", name="send-email")
        | Email Me
    div
      input#email(type="text", name="email")
      label.add-on(for="email")
        | Email
    button(type="submit") Submit

views/add.jade

h1 Info Added
p Name: #{name}
p Country: #{country}
p Date: #{date}
p Email: #{email}