WebFund 2016W Lecture 15

Video

The video from the lecture given on March 8, 2016 is now available.

Code

examforms-jquery/examforms-jquery.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.use(express.static('.'));

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,
    // 			 pretty: true});
    res.render('clientlist', { title: 'People Listing', pretty: true});
});

app.get('/items', function(req, res) {
    res.send(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);

examforms-jquery/clientlist.jade

extends layout
  
block header
    script(src="jquery-1.12.0.js")
    script(src="showlist.js")

block content
    h1= title

    div
      div
      table
        thead
          th Name
          th City
          th Country
          th Birthday
          th Email
        tbody#theListing

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

examforms-jquery/showlist.js

<source lang="javascript" line> $(function() {

   // grab JSON from server
   // insert data into DOM

   function displayItems(items) {

var i;

for (i=0; i<items.length; i++) {

$("#theListing").append("" + "" + items[i].name + "" + "" + items[i].city + "" + "" + items[i].country + "" + "" + items[i].birthday + "" + "" + items[i].email + "" + "" ); } } $.getJSON('/items', displayItems); }); <source>