WebFund 2016W: Tutorial 4 - Revision history

Soma at 16:14, 3 February 2016

2016-02-03T16:14:46Z

← Older revision		Revision as of 16:14, 3 February 2016
Line 1:		Line 1:
	~~'''This tutorial is still a work in progress.'''~~

	In this tutorial you will be working with [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/code/examforms.zip examforms], a streamlined version of form-demo that will be the focus of the midterm.		In this tutorial you will be working with [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/code/examforms.zip examforms], a streamlined version of form-demo that will be the focus of the midterm.

Soma: /* Code */

2016-02-02T19:06:49Z

Code

← Older revision		Revision as of 19:06, 2 February 2016
Line 113:		Line 113:
	button(type="submit") Submit		button(type="submit") Submit
	</source>		</source>


	===list.jade===		===list.jade===
Line 143:		Line 144:
	button(type="submit") Home		button(type="submit") Home
	</source>		</source>


	===style.css===		===style.css===

Soma: /* Code */

2016-02-02T19:06:23Z

Code

← Older revision		Revision as of 19:06, 2 February 2016
Line 69:		Line 69:
	process.on('SIGINT', serverDown);		process.on('SIGINT', serverDown);
	</source>		</source>


	===layout.jade===		===layout.jade===

	<source lang="~~html4strict~~" line>		<source lang="javascript" line>
	doctype html		doctype html
	html		html
Line 86:		Line 87:
	===index.jade===		===index.jade===

	<source lang="~~html5~~" line>		<source lang="javascript" line>
	extends layout		extends layout

Soma: /* index.jade */

2016-02-02T19:05:30Z

index.jade

← Older revision		Revision as of 19:05, 2 February 2016
Line 86:		Line 86:
	===index.jade===		===index.jade===

	<source lang="~~html4strict~~" line>		<source lang="html5" line>
	extends layout		extends layout

Line 112:		Line 112:
	button(type="submit") Submit		button(type="submit") Submit
	</source>		</source>


	===list.jade===		===list.jade===

Soma: /* style.css */

2016-02-02T19:05:03Z

style.css

← Older revision		Revision as of 19:05, 2 February 2016
Line 146:		Line 146:
	===style.css===		===style.css===

	<source lang="~~html5~~" line>		<source lang="css" line>
	body {		body {
	padding: 50px;		padding: 50px;

Soma: /* style.css */

2016-02-02T19:04:50Z

style.css

← Older revision		Revision as of 19:04, 2 February 2016
Line 146:		Line 146:
	===style.css===		===style.css===

	<source lang="~~javascipt~~" line>		<source lang="html5" line>
	body {		body {
	padding: 50px;		padding: 50px;

Soma: /* Code */

2016-02-02T19:03:05Z

Code

← Older revision		Revision as of 19:03, 2 February 2016
Line 19:		Line 19:

	==Code==		==Code==

			===examforms.js===

			<source lang="javascript" line>
			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);
			</source>

			===layout.jade===

			<source lang="html4strict" line>
			doctype html
			html
			head
			title= title
			link(rel='stylesheet', href='/style.css')
			block header
			body
			block content
			</source>


			===index.jade===

			<source lang="html4strict" line>
			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
			</source>


			===list.jade===

			<source lang="javascript" line>
			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
			</source>

			===style.css===

			<source lang="javascipt" line>
			body {
			padding: 50px;
			font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
			}

			a {
			color: #00B7FF;
			}
			</source>

Soma: /* Tasks */

2016-02-02T18:55:58Z

Tasks

← Older revision		Revision as of 18:55, 2 February 2016
Line 16:		Line 16:
	# Change /list to show the list sorted by name.		# Change /list to show the list sorted by name.
	# 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.		# 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.
			# 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==		==Code==

Soma: Created page with "'''This tutorial is still a work in progress.''' In this tutorial you will be working with [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/code/examforms.zip examform..."

2016-02-02T18:54:19Z

Created page with "'''This tutorial is still a work in progress.''' In this tutorial you will be working with [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/code/examforms.zip examform..."

New page

'''This tutorial is still a work in progress.'''

In this tutorial you will be working with [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/code/examforms.zip 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:

# Make it so that typing "PORT=7000 node examforms.js" causes it to listen on port 7000.
# Fix stylesheet loading. (Currently the browser will request the stylesheet but the server responds with 404.)
# Add a Phone number field to the program.
# Make the text bigger.
# Add an image to /. The image should be loaded from the server.
# Change /list to show the list sorted by name.
# 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.

==Code==