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

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.

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

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}