WebFund 2013F: Assignment 1

This assignment is not yet finalized

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.

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.

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. Make the application listen on port 3200.
2. Add a "Phone" field to the end of the form that behaves similarly to all of the other form entries.
3. Add a "Home" button to the submit results screen (/add) that takes you back to the form screen.
4. 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.

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}