WebFund 2016W: Tutorial 4

In this tutorial you will be working with examforms, a streamlined version of form-demo that will be the focus of the midterm.

After unpacking, you start examforms.js by running "node examforms.js".

Tasks

Make the following changes to examforms:

1. Make it so that typing "PORT=7000 node examforms.js" causes it to listen on port 7000.
2. Fix stylesheet loading. (Currently the browser will request the stylesheet but the server responds with 404.)
3. Add a Phone number field to the program.
4. Make the text bigger.
5. Add an image to /. The image should be loaded from the server.
6. Change /list to show the list sorted by name.
7. Create a /delete page that asks for a name to delete. It then POSTs to /deleted which confirms that the name was deleted. This page has a button to go back Home.
8. Make the server save the entered names to a file when the server is terminated by a Ctrl-C and load those names when the server is restarted.

Code

examforms.js

var http = require('http');
var express = require('express');
var bodyParser = require('body-parser');
var logger = require('morgan');
var port = 3000;
var state = [];

var app = express();

app.set('view engine', 'jade');
app.set('views', __dirname);
app.use(logger('dev'));
app.use(bodyParser.urlencoded({ extended: false }));

app.get('/', function(req, res, next) {
  res.render('index', { title: 'COMP 2406 Exam form demo' });
});

app.post('/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.redirect('/list');
});

app.get('/list', function(req, res) {
    res.render('list', { title: 'People Listing',  items: state});
});

var serverUp = function() {
    console.log("ExamForms listening on port " + port);
}

var serverDown = function() {
    console.log("Server shutting down.");
    process.exit(0);
}

var server = http.createServer(app);
server.listen(port);
server.on('listening', serverUp);
process.on('SIGINT', serverDown);

layout.jade

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/style.css')
    block header
  body
    block content

index.jade

extends layout

block content
  h1= title

  div
    p Fill out your info
    form(method="post", action="/add")
      div
        input#name(type="text", name="name")
        label Name
      div
        input#country(type="text", name="city")
        label City
      div
        input#country(type="text", name="country")
        label Country
      div
        input#birthday(type="text", name="birthday")
        label Birthday
      div
        input#email(type="text", name="email")
        label Email
      button(type="submit") Submit

list.jade

extends layout
  
block content
    h1= title

    div
      div
      table
        thead
          th Name
          th City
          th Country
          th Birthday
          th Email
        tbody
          each item in items
            tr
              td #{item.name}
              td #{item.city}
              td #{item.country}
              td #{item.birthday}
              td #{item.email}

    form(method="get", action="/")
      button(type="submit") Home

style.css

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

a {
  color: #00B7FF;
}