WebFund 2016W Lecture 15

Video

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

Code

Full code:

• examforms-jquery.zip
• graph-demo-sol.zip

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>

graph-demo/routes/index.js

<source lang="javascript" line> var express = require('express'); var router = express.Router();

var answers = []; var questions = {

   color: "Favorite color?",
   day: "Favorite day of the week?",
   dog: "Favorite dog breed?",
   city: "Favorite city?"

}

function calcResultsStats(results) {

   // var resultsStats = [
   // 	{questionName: "color",
   // 	 questionText: "Favorite color?",
   // 	 labels: ["red", "blue", "yellow", "brown"],
   // 	 values: [5, 7, 2, 0]
   // 	},
   // 	{questionName: "day",
   // 	 questionText: "Favorite day of the week?",
   // 	 labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday",
   // 		  "Saturday", "Sunday"],
   // 	 values: [0, 2, 1, 5, 70, 100, 20]
   // 	}
   // ];

   var resultsStats = [];

   Object.keys(questions).forEach(function(q) {

var r = {}; var i, choice; r.questionName = q; r.questionText = questions[q]; r.labels = []; r.values = []; var counts = {}; // mapping of question answers to counts

for (i = 0; i<answers.length; i++) { choice = answers[i][q]; if (counts[choice]) { counts[choice] = counts[choice] + 1; } else { counts[choice] = 1; } }

Object.keys(counts).forEach(function(c) { r.labels.push(c); r.values.push(counts[c]); }); resultsStats.push(r);

   });

   return resultsStats;

}

router.get('/', function(req, res) {

   res.render('index', {title: 'COMP 2406 Graphing Demo',

questions: questions}); });

router.post('/add', function(req, res) {

   var answer = { firstname: req.body.firstname};
   
   var qlist = Object.keys(questions);

   qlist.forEach(function(q) {

answer[q] = req.body[q];

   });

   answers.push(answer);

   console.log(answer);

   res.redirect('/results');

});

router.get('/results', function(req, res) {

   var stats = calcResultsStats(answers);
   
   res.render('results', { title: 'Survey Results',

stats: stats, barwidth: 60 }); });

// app.get('/render', function (req, res, next) { // res.render('chart', {xlabel: "Months", // ylabel: "Failure rate (%)", // unit: '%', // barwidth: 40, // pretty: true, // items: [{value: 10, bin: "Jan"}, // {value: 20, bin: "Feb"}, // {value: 40, bin: "Mar"}, // {value: 40, bin: "Apr"}, // {value: 40, bin: "May"}, // {value: 40, bin: "Jun"}, // {value: 40, bin: "Jul"}, // {value: 40, bin: "Aug"}, // {value: 40, bin: "Sep"}, // {value: 40, bin: "Oct"}, // {value: 80, bin: "Nov"}, // {value: 100, bin: "Dec"}, // ]}); // });

module.exports = router; <source>