Soma-notes - User contributions [en]

WebFund 2014W Lecture 17

2014-04-04T02:55:19Z

Leah:

The video from the lecture given on March 14, 2014 is available:

* [http://www.screencast.com/t/cSo3EOTe Small from screencast.com]
* [http://www.screencast.com/t/cFqe9HmJc8t6 Large from screencast.com]
* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Lecture_17_-_20140314_142511_27.mp4 Original from CUOL]

[http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/adventure-editor-class.zip adventure-editor-class] is also available (without modules, you'll have to run "npm install" or copy node_modules from adventure-editor or similar application).

=== Assignment 3 Tips ===
"Load" button tips:
* We need to create editor.js and update getContents.

The following client-side code is created in editor.js. When the user click on the load button, the $.getJSON call specifies getContents as the url to send the request to:

<code>
$(function(){
var updateRoom = function(room) {
$('#roomTitle').html(room.title);
$('#description').html(room.description);
if (room.activity) {
$('#activity').html(room.activity);
} else {
$('#activity').html("");
}
$('#exits').html(room.roomExits + "");
}
$("#loadRoom").on("click",function(){
$.getJSON("/getContents",
{ theRoom: $("#roomName").val()},
updateRoom);
});
});
</code>

*In index.js, the function getContents handles the request find the room in the roomsCollection and loads the queried room

var getContents = function(req, res) {
var theRoom;
if (req.session.player) {
theRoom = req.session.player.room;
} else if (req.session.editorName) {
theRoom = req.query.theRoom;
} else {
console.log("Invalid getContents request.");
res.send("Error: NotLoggedIn");
return;
}
roomsCollection.findOne(
{name: theRoom},
function(err, room) {
if (err || !room) {
room = defaultRoom;
}
res.send(room);
}
);
}

"Save" button tips:
* The current save button does a POST to /updateRooms.
* It already works and sends everything. All we need to do is implement updateRoom on the server side.
* "Cannot POST /updateRoom" means we don't have a route to updateRoom, so we would need to create one and write a function for updateRoom.
* After the room is saved we should decide what happens after, such as having a page that says "Room saved" and takes you back to the editor.

Drop down button tips:
* We could use a table, or just a simple button drop down using Bootstrap.

=== HTML Canvas Element ===

* Part of HTML5
* scriptable rendering of 2D shapes and bitmap images
* We first set up a HTML canvas widget
* Give it a name (ID), and dimensions

<canvas id="example" width="200" height="200">
We put some text here to display if browser does not support HTML5 canvas.
</canvas>

* We can use Javascript to draw on the canvas.
*The following code draws a red box and circle on the screen.

<code>
<script>
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50)
//The following code draws a circle.
context.beginPath();
context.arc(100, 75, 50, 0, 2 *Math.PI);
context.stroke();
</script>
</code>

* Drawing a arc is similar in languages such as Processing.
* Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise).

* To use JQuery, we need to add it in the <head>
<script src="http://code.jquery.com/jquery-1.11.0.min,js"></script>

* We can now use JQuery and write
var example = $('example');
var context = example[0].getContext('2d');

* To use javascript we need to get the canvas object.
* We have to get the standard object out of the JQuery object (what the [0] is).
* Must use getContext(). In this case the parameter is "2d", we could also use 3d (WebGL) and others.
* Then we can use context.arc, context.fillStyle etc. for example to drawing things.

WebFund 2014W Lecture 17

2014-04-04T02:54:33Z

Leah:

The video from the lecture given on March 14, 2014 is available:

* [http://www.screencast.com/t/cSo3EOTe Small from screencast.com]
* [http://www.screencast.com/t/cFqe9HmJc8t6 Large from screencast.com]
* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Lecture_17_-_20140314_142511_27.mp4 Original from CUOL]

[http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/adventure-editor-class.zip adventure-editor-class] is also available (without modules, you'll have to run "npm install" or copy node_modules from adventure-editor or similar application).

=== Assignment 3 Tips ===
"Load" button tips:
* We need to create editor.js and update getContents.

The following client-side code is created in editor.js. When the user click on the load button, the $.getJSON call specifies getContents as the url to send the request to:

<code>
$(function(){
var updateRoom = function(room) {
$('#roomTitle').html(room.title);
$('#description').html(room.description);
if (room.activity) {
$('#activity').html(room.activity);
} else {
$('#activity').html("");
}
$('#exits').html(room.roomExits + "");
}
$("#loadRoom").on("click",function(){
$.getJSON("/getContents",
{ theRoom: $("#roomName").val()},
updateRoom);
});
});
</code>

*In index.js, the function getContents handles the request find the room in the roomsCollection and loads the queried room

var getContents = function(req, res) {
var theRoom;
if (req.session.player) {
theRoom = req.session.player.room;
} else if (req.session.editorName) {
theRoom = req.query.theRoom;
} else {
console.log("Invalid getContents request.");
res.send("Error: NotLoggedIn");
return;
}
roomsCollection.findOne(
{name: theRoom},
function(err, room) {
if (err || !room) {
room = defaultRoom;
}
res.send(room);
}
);
}

"Save" button tips:
* The current save button does a POST to /updateRooms.
* It already works and sends everything. All we need to do is implement updateRoom on the server side.
* "Cannot POST /updateRoom" means we don't have a route to updateRoom, so we would need to create one and write a function for updateRoom.
* After the room is saved we should decide what happens after, such as having a page that says "Room saved" and takes you back to the editor.

Drop down button tips:
* We could use a table, or just a simple button drop down using Bootstrap.

=== HTML Canvas Element ===

* Part of HTML5
* scriptable rendering of 2D shapes and bitmap images
* We first set up a HTML canvas widget
* Give it a name (ID), and dimensions

<canvas id="example" width="200" height="200">
We put some text here to display if browser does not support HTML5 canvas.
</canvas>

* We can use Javascript to draw on the canvas.
*The following code draws a red box on the screen.

<code>
<script>
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50)
//The following code draws a circle.
context.beginPath();
context.arc(100, 75, 50, 0, 2 *Math.PI);
context.stroke();
</script>
</code>

* Drawing a arc is similar in languages such as Processing.
* Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise).

* To use JQuery, we need to add it in the <head>
<script src="http://code.jquery.com/jquery-1.11.0.min,js"></script>

* We can now use JQuery and write
var example = $('example');
var context = example[0].getContext('2d');

* To use javascript we need to get the canvas object.
* We have to get the standard object out of the JQuery object (what the [0] is).
* Must use getContext(). In this case the parameter is "2d", we could also use 3d (WebGL) and others.
* Then we can use context.arc, context.fillStyle etc. for example to drawing things.

WebFund 2014W Lecture 17

2014-04-04T02:53:52Z

Leah:

The video from the lecture given on March 14, 2014 is available:

* [http://www.screencast.com/t/cSo3EOTe Small from screencast.com]
* [http://www.screencast.com/t/cFqe9HmJc8t6 Large from screencast.com]
* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Lecture_17_-_20140314_142511_27.mp4 Original from CUOL]

[http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/adventure-editor-class.zip adventure-editor-class] is also available (without modules, you'll have to run "npm install" or copy node_modules from adventure-editor or similar application).

=== Assignment 3 Tips ===
"Load" button tips:
* We need to create editor.js and update getContents.

The following client-side code is created in editor.js. When the user click on the load button, the $.getJSON call specifies getContents as the url to send the request to:

<code>
$(function(){
var updateRoom = function(room) {
$('#roomTitle').html(room.title);
$('#description').html(room.description);
if (room.activity) {
$('#activity').html(room.activity);
} else {
$('#activity').html("");
}
$('#exits').html(room.roomExits + "");
}
$("#loadRoom").on("click",function(){
$.getJSON("/getContents",
{ theRoom: $("#roomName").val()},
updateRoom);
});
});
</code>

*In index.js, the function getContents handles the request find the room in the roomsCollection and loads the queried room

var getContents = function(req, res) {
var theRoom;
if (req.session.player) {
theRoom = req.session.player.room;
} else if (req.session.editorName) {
theRoom = req.query.theRoom;
} else {
console.log("Invalid getContents request.");
res.send("Error: NotLoggedIn");
return;
}
roomsCollection.findOne(
{name: theRoom},
function(err, room) {
if (err || !room) {
room = defaultRoom;
}
res.send(room);
}
);
}

"Save" button tips:
* The current save button does a POST to /updateRooms.
* It already works and sends everything. All we need to do is implement updateRoom on the server side.
* "Cannot POST /updateRoom" means we don't have a route to updateRoom, so we would need to create one and write a function for updateRoom.
* After the room is saved we should decide what happens after, such as having a page that says "Room saved" and takes you back to the editor.

Drop down button tips:
* We could use a table, or just a simple button drop down using Bootstrap.

=== HTML Canvas Element ===

* Part of HTML5
* scriptable rendering of 2D shapes and bitmap images
* We first set up a HTML canvas widget
* Give it a name (ID), and dimensions

<canvas id="example" width="200" height="200">
We put some text here to display if browser does not support HTML5 canvas.
</canvas>

* We can use Javascript to draw on the canvas.
*The following code draws a red box on the screen.

<code>
<script>
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50)
//The following code draws a circle.
context.beginPath();
context.arc(100, 75, 50, 0, 2 *Math.PI);
context.stroke();
</script>
</code>

* Drawing a arc is similar in languages such as Processing.
* Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise).

* To use JQuery, we need to add it in the <head>
<script src="http://code.jquery.com/jquery-1.11.0.min,js"></script>

* We can now use JQuery and write
var example = $('example');
var context = example[0].getContext('2d');

* To use javascript we need to get the canvas object.
* We have to get the standard object out of the JQuery object (what the [0] is).
* Must use getContext(). In this case the parameter is "2d", we could also use 3d (WebGL) and others.
* Then we can use context.arc, context.fillStyle etc. for example to drawing things.

WebFund 2014W Lecture 17

2014-04-04T02:52:21Z

Leah:

The video from the lecture given on March 14, 2014 is available:

* [http://www.screencast.com/t/cSo3EOTe Small from screencast.com]
* [http://www.screencast.com/t/cFqe9HmJc8t6 Large from screencast.com]
* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Lecture_17_-_20140314_142511_27.mp4 Original from CUOL]

[http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/adventure-editor-class.zip adventure-editor-class] is also available (without modules, you'll have to run "npm install" or copy node_modules from adventure-editor or similar application).

=== Assignment 3 Tips ===
"Load" button tips:
* We need to create editor.js and update getContents.

The following client-side code is created in editor.js. When the user click on the load button, the $.getJSON call specifies getContents as the url to send the request to:

<code>
$(function(){
var updateRoom = function(room) {
$('#roomTitle').html(room.title);
$('#description').html(room.description);
if (room.activity) {
$('#activity').html(room.activity);
} else {
$('#activity').html("");
}
$('#exits').html(room.roomExits + "");
}
$("#loadRoom").on("click",function(){
$.getJSON("/getContents",
{ theRoom: $("#roomName").val()},
updateRoom);
});
});
</code>

*In index.js, the function getContents handles the request find the room in the roomsCollection and loads the queried room

var getContents = function(req, res) {
var theRoom;
if (req.session.player) {
theRoom = req.session.player.room;
} else if (req.session.editorName) {
theRoom = req.query.theRoom;
} else {
console.log("Invalid getContents request.");
res.send("Error: NotLoggedIn");
return;
}
roomsCollection.findOne(
{name: theRoom},
function(err, room) {
if (err || !room) {
room = defaultRoom;
}
res.send(room);
}
);
}

"Save" button tips:
* The current save button does a POST to /updateRooms.
* It already works and sends everything. All we need to do is implement updateRoom on the server side.
* "Cannot POST /updateRoom" mean we don't have a route to updateRoom, so we would need to create one and write a function for updateRoom.
* After the room is saved we should decide what happens after, such as having a page that says "Room saved" and takes you back to the editor.

Drop down button tips:
* We could use a table, or just a simple button drop down using Bootstrap.

=== HTML Canvas Element ===

* Part of HTML5
* scriptable rendering of 2D shapes and bitmap images
* We first set up a HTML canvas widget
* Give it a name (ID), and dimensions

<canvas id="example" width="200" height="200">
We put some text here to display if browser does not support HTML5 canvas.
</canvas>

* We can use Javascript to draw on the canvas.
*The following code draws a red box on the screen.

<code>
<script>
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50)
//The following code draws a circle.
context.beginPath();
context.arc(100, 75, 50, 0, 2 *Math.PI);
context.stroke();
</script>
</code>

* Drawing a arc is similar in languages such as Processing.
* Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise).

* To use JQuery, we need to add it in the <head>
<script src="http://code.jquery.com/jquery-1.11.0.min,js"></script>

* We can now use JQuery and write
var example = $('example');
var context = example[0].getContext('2d');

* To use javascript we need to get the canvas object.
* We have to get the standard object out of the JQuery object (what the [0] is).
* Must use getContext(). In this case the parameter is "2d", we could also use 3d (WebGL) and others.
* Then we can use context.arc, context.fillStyle etc. for example to drawing things.

WebFund 2014W Lecture 17

2014-04-04T01:40:04Z

Leah:

WebFund 2014W Lecture 17

2014-04-04T01:26:45Z

Leah:

WebFund 2014W Lecture 17

2014-04-04T01:20:49Z

Leah:

WebFund 2014W Midterm Review

2014-03-13T18:21:53Z

Leah:

The video from the lecture given on Feb. 12, 2014 is available:
* [http://www.screencast.com/t/9bmB5dTEoC small at Screencast.com]
* [http://www.screencast.com/t/nC3DlJrkoqt large at Screencast.com]
* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Midterm_Review_-_20140212_150208_27.mp4 Original at CUOL]

The midterm will be based on [http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/midterm/small-adventure.zip small-adventure], a version of <tt>adventure-demo</tt> that has been simplified by removing the use of cryptography (https and bcrypt) along with a few other minor tweaks to reduce the size of the source code.

No new tutorial this week; however, two TAs/instructors will be in the lab on Thursday 4-5:30 and Friday 8:30-10 to answer last minute questions.

==Midterm Review Notes==
* Most of the notes are written inline in the source code to make the line it refers to more clear:

What is the state of the system after app,js runs?
* We don't know what it is because you only know when the call back is run.
* app.get/app.post are only run ONCE, before the web server starts listening for incoming connections. It tells the web server what to do when http GET and POST requests are received at specific urls.

Asynchronous vs Synchronous:
* The analogy that Anil gave was that synchronous is like a 5 year old child waiting for cookies to be baked. He asks "is it ready yet?" every 5 minutes. He's not doing anything else. Asynchronous is like a 8 year old child, who does something else (e.g. read a book) while he waits for the cookies to be baked

==Source for small-adventure==

===app.js===
<source line lang="javascript">
var express = require('express'); //requires the express module
var routes = require('./routes'); //same as ('/routes/index.js'). The require() method returns the exports object
var path = require('path'); //imports the path module, or path.join will not be defined
var http = require('http'); //requires the http module
var MongoStore = require('connect-mongo')(express);

var app = express(); //creates an express object instance and assigns the app variable to it.

app.set('port', process.env.PORT || 3000); //listens on PORT environment variable OR port 3000 if not defined
app.set('views', path.join(__dirname, 'views')); //sets the location for application views
app.set('view engine', 'jade'); //sets the view engine, Jade
app.use(express.favicon()); //can specify where you want favicon to be found in the parameters. e.g (_dirname + 'public/favicon.ico')
app.use(express.logger('dev')); //logging requests using predefined log format 'dev'. This will generate a detail log.
app.use(express.urlencoded()); //The body of HTTP post requests. Parses the incoming request body, converting it into request object properties

app.use(express.cookieParser());
app.use(express.session({
cookie: {maxAge: 60000 * 20} // 20 minutes
, secret: "Shh... I'm a secret" //This is the secret that prevents attackers from creating their own fake session identifiers
, store: new MongoStore({db: "adventure-demo"})
}));

app.use(app.router);
app.use(express.static(path.join(__dirname, 'public'))); //serves static files from the root path. The CSS files and fonts are all stored in the public directory, which is made publicly accessible by this line.

if ('development' == app.get('env')) {
app.use(express.errorHandler());
}

//The purpose of these lines is to setup routes. It tells the web server what to do when http GET and POST requests are received at specific urls. Note that these are only run ONCE, before the web server starts listening for incoming connections.
app.get('/', routes.redirectLoggedIn, routes.index); //requests the home page (https://localhost:3000)
app.post("/register", routes.register);
app.post("/start", routes.start);
app.post("/quit", routes.quit);

var createRooms = function() {
var i, theRoom;

routes.getRooms().toArray( //a call to getRooms and a call toArray, which is a method of the collections object. This runs the query and puts the results into an array
function(err, docs) {
if (err) {
throw "Couldn't find active room list";
}

var activeRooms = docs[0].activeRooms;

activeRooms.forEach(function(roomName) { //roomName is our index variable, we get the room element. ActiveRooms is an array of roomName.
console.log('Creating room: ' + roomName);
app.get('/' + roomName,
routes.makeRoomHandler(roomName));
});
}
);
}
routes.connectToDBs(createRooms);

http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port') +
' in ' + app.get('env') + ' mode.');
});
//1) createServer(): a method of http that creates and returns a server object
//2) listen(): a method at the returned server object that starts the web server listening on a given port
//3) app.get(): returns the port to listen on
</source>

===routes/index.js===
<source line lang="javascript">
var mc = require('mongodb').MongoClient;
var playersCollection, roomsCollection;
exports.connectToDBs = function(callback) {
mc.connect('mongodb://localhost/adventure-demo', function(err, db) {
if (err) {
throw err;
}

playersCollection = db.collection('players');
roomsCollection = db.collection('rooms');

callback(); //is createRooms. We do the callback after the database is established because we need to setup the database first.
});
}

//assigned to the properties of the exports object
exports.index = function(req, res){
res.render('index', { title: 'COMP 2406 Small Adventure Demo',
error: req.query.error });
}
exports.redirectLoggedIn = function(req, res, next) {
if (req.session.player) {
res.redirect("/" + req.session.player.room);
} else {
next();
}
}
exports.redirectNotLoggedIn = function(req, res, next) {
if (req.session.player) {
next();
} else {
res.redirect("/");
}
}
exports.register = function(req, res) {
var playername = req.body.playername; //req.body retrieves the value for the playername attribute
var password = req.body.password;

var addPlayer = function(err, players) {
if(players.length!=0){
res.redirect("/?error=player already exists");
return;
}

var newPlayer = {
playername: playername,
password: password,
room: "bridge"
};

playersCollection.insert(newPlayer, function(err, newPlayers){
if (err) {
throw err;
} else {
res.send('Successfully registered ' + newPlayers[0].playername);
}
});
}

playersCollection.find({playername: playername}).toArray(addPlayer);
}
exports.start = function(req, res){
var playername = req.body.playername;
var password = req.body.password;

playersCollection.findOne({playername: playername}, function(err, player) {
if (err || !player){
req.session.destroy(function(err) {
res.redirect("/?error=invalid playername or password");
});
return;
}

if (password === player.password) {
req.session.player = player;
delete req.session.player._id;
res.redirect("/" + player.room);
} else {
req.session.destroy(function(err) {
res.redirect("/?error=invalid playername or password");
});
}
});
}
exports.quit = function(req, res){
req.session.destroy(function(err){
if(err){
console.log("Error: %s", err);
}
res.redirect("/");
});
}
exports.makeRoomHandler = function(roomName) {
var handler = function(req, res) { //without 'var' handler becomes a global variable
if (req.session.player) {
var player = req.session.player;
player.room = roomName;
playersCollection.update({"playername": player.playername},
player, function(err, count) {
if (err) {
console.log(
"Couldn't save player state");
}
});
roomsCollection.findOne(
{name: roomName},
function(err, room) {
if (err || !room) {
throw "Couldn't find room " + roomName;
}
res.render("room.jade", room); //renders an html page with room.jade template
}
);
} else {
res.redirect("/");
}
}
return handler;
}
exports.getRooms = function() {
return roomsCollection.find({name: "roomList"}); //finds all the rooms with the name in the roomlist
}
</source>

===public/javascripts/home.js===
<source line lang="javascript">
$(function(){
$("#register").on("click",function(){
var $form = $("form");
$form.attr("action","/register");
$form.submit();
});
});
</source>

===views/layout.jade===
<source line lang="html4strict">
doctype html
html
head
title= title
script(src='/vendor/jquery/jquery.js')
script('vendor/bootstrap/dist/js/bootstrap.js')
link(rel='stylesheet', href='/vendor/bootstrap/dist/css/bootstrap.css')
link(rel='stylesheet', href='/stylesheets/style.css')
block header
body
block content
</source>

===views/index.jade===
<source line lang="html4strict">
extends layout //inherits formatting from layout.jade

block header
script(src='/javascripts/home.js') //applies javascript. Affects the register button

block content
h1= title
- if(error)
div.alert-error #{error}
p Please log in
div
form(action="/start", method="post")
div.control-group.input-append
input(type="text", name="playername")
label.add-on(for="playername") Player Name
div.control-group.input-append
input(type="password", name="password")
label.add-on(for="password") Password

button(type="submit") Start
button#register(type="button") Register
</source>

===views/room.jade===
<source line lang="html4strict">
extends layout

block content
h1= title
p #{description}
p Go to:
ul
each theExit in roomExits //exits are listed for every room
li
a(href= theExit) #{theExit}
form(action="/quit", method="post")
button(type="submit") Quit //creates a quit button on every room
</source>

WebFund 2014W Midterm Review

2014-03-13T18:21:06Z

Leah:

The video from the lecture given on Feb. 12, 2014 is available:
* [http://www.screencast.com/t/9bmB5dTEoC small at Screencast.com]
* [http://www.screencast.com/t/nC3DlJrkoqt large at Screencast.com]
* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Midterm_Review_-_20140212_150208_27.mp4 Original at CUOL]

The midterm will be based on [http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/midterm/small-adventure.zip small-adventure], a version of <tt>adventure-demo</tt> that has been simplified by removing the use of cryptography (https and bcrypt) along with a few other minor tweaks to reduce the size of the source code.

No new tutorial this week; however, two TAs/instructors will be in the lab on Thursday 4-5:30 and Friday 8:30-10 to answer last minute questions.

==Midterm Review Notes==
* Most of the notes are written inline in the source code to make the line it refers to more clear:

What is the state of the system after app,js runs?
* We don't know what it is because you only know when the call back is run.
* app.get/app.post are only run ONCE, before the web server starts listening for incoming connections. It tells the web server what to do when http GET and POST requests are received at specific urls.

Asynchronous vs Synchronous:
* The analogy that Anil give was that synchronous is like a 5 year old child waiting for cookies to be baked. He asks "is it ready yet?" every 5 minutes. He's not doing anything else. Asynchronous is like a 8 year old child, who does something else (e.g. read a book) while he waits for the cookies to be baked

==Source for small-adventure==

===app.js===
<source line lang="javascript">
var express = require('express'); //requires the express module
var routes = require('./routes'); //same as ('/routes/index.js'). The require() method returns the exports object
var path = require('path'); //imports the path module, or path.join will not be defined
var http = require('http'); //requires the http module
var MongoStore = require('connect-mongo')(express);

var app = express(); //creates an express object instance and assigns the app variable to it.

app.set('port', process.env.PORT || 3000); //listens on PORT environment variable OR port 3000 if not defined
app.set('views', path.join(__dirname, 'views')); //sets the location for application views
app.set('view engine', 'jade'); //sets the view engine, Jade
app.use(express.favicon()); //can specify where you want favicon to be found in the parameters. e.g (_dirname + 'public/favicon.ico')
app.use(express.logger('dev')); //logging requests using predefined log format 'dev'. This will generate a detail log.
app.use(express.urlencoded()); //The body of HTTP post requests. Parses the incoming request body, converting it into request object properties

app.use(express.cookieParser());
app.use(express.session({
cookie: {maxAge: 60000 * 20} // 20 minutes
, secret: "Shh... I'm a secret" //This is the secret that prevents attackers from creating their own fake session identifiers
, store: new MongoStore({db: "adventure-demo"})
}));

app.use(app.router);
app.use(express.static(path.join(__dirname, 'public'))); //serves static files from the root path. The CSS files and fonts are all stored in the public directory, which is made publicly accessible by this line.

if ('development' == app.get('env')) {
app.use(express.errorHandler());
}

//The purpose of these lines is to setup routes. It tells the web server what to do when http GET and POST requests are received at specific urls. Note that these are only run ONCE, before the web server starts listening for incoming connections.
app.get('/', routes.redirectLoggedIn, routes.index); //requests the home page (https://localhost:3000)
app.post("/register", routes.register);
app.post("/start", routes.start);
app.post("/quit", routes.quit);

var createRooms = function() {
var i, theRoom;

routes.getRooms().toArray( //a call to getRooms and a call toArray, which is a method of the collections object. This runs the query and puts the results into an array
function(err, docs) {
if (err) {
throw "Couldn't find active room list";
}

var activeRooms = docs[0].activeRooms;

activeRooms.forEach(function(roomName) { //roomName is our index variable, we get the room element. ActiveRooms is an array of roomName.
console.log('Creating room: ' + roomName);
app.get('/' + roomName,
routes.makeRoomHandler(roomName));
});
}
);
}
routes.connectToDBs(createRooms);

http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port') +
' in ' + app.get('env') + ' mode.');
});
//1) createServer(): a method of http that creates and returns a server object
//2) listen(): a method at the returned server object that starts the web server listening on a given port
//3) app.get(): returns the port to listen on
</source>

===routes/index.js===
<source line lang="javascript">
var mc = require('mongodb').MongoClient;
var playersCollection, roomsCollection;
exports.connectToDBs = function(callback) {
mc.connect('mongodb://localhost/adventure-demo', function(err, db) {
if (err) {
throw err;
}

playersCollection = db.collection('players');
roomsCollection = db.collection('rooms');

callback(); //is createRooms. We do the callback after the database is established because we need to setup the database first.
});
}

//assigned to the properties of the exports object
exports.index = function(req, res){
res.render('index', { title: 'COMP 2406 Small Adventure Demo',
error: req.query.error });
}
exports.redirectLoggedIn = function(req, res, next) {
if (req.session.player) {
res.redirect("/" + req.session.player.room);
} else {
next();
}
}
exports.redirectNotLoggedIn = function(req, res, next) {
if (req.session.player) {
next();
} else {
res.redirect("/");
}
}
exports.register = function(req, res) {
var playername = req.body.playername; //req.body retrieves the value for the playername attribute
var password = req.body.password;

var addPlayer = function(err, players) {
if(players.length!=0){
res.redirect("/?error=player already exists");
return;
}

var newPlayer = {
playername: playername,
password: password,
room: "bridge"
};

playersCollection.insert(newPlayer, function(err, newPlayers){
if (err) {
throw err;
} else {
res.send('Successfully registered ' + newPlayers[0].playername);
}
});
}

playersCollection.find({playername: playername}).toArray(addPlayer);
}
exports.start = function(req, res){
var playername = req.body.playername;
var password = req.body.password;

playersCollection.findOne({playername: playername}, function(err, player) {
if (err || !player){
req.session.destroy(function(err) {
res.redirect("/?error=invalid playername or password");
});
return;
}

if (password === player.password) {
req.session.player = player;
delete req.session.player._id;
res.redirect("/" + player.room);
} else {
req.session.destroy(function(err) {
res.redirect("/?error=invalid playername or password");
});
}
});
}
exports.quit = function(req, res){
req.session.destroy(function(err){
if(err){
console.log("Error: %s", err);
}
res.redirect("/");
});
}
exports.makeRoomHandler = function(roomName) {
var handler = function(req, res) { //without 'var' handler becomes a global variable
if (req.session.player) {
var player = req.session.player;
player.room = roomName;
playersCollection.update({"playername": player.playername},
player, function(err, count) {
if (err) {
console.log(
"Couldn't save player state");
}
});
roomsCollection.findOne(
{name: roomName},
function(err, room) {
if (err || !room) {
throw "Couldn't find room " + roomName;
}
res.render("room.jade", room); //renders an html page with room.jade template
}
);
} else {
res.redirect("/");
}
}
return handler;
}
exports.getRooms = function() {
return roomsCollection.find({name: "roomList"}); //finds all the rooms with the name in the roomlist
}
</source>

===public/javascripts/home.js===
<source line lang="javascript">
$(function(){
$("#register").on("click",function(){
var $form = $("form");
$form.attr("action","/register");
$form.submit();
});
});
</source>

===views/layout.jade===
<source line lang="html4strict">
doctype html
html
head
title= title
script(src='/vendor/jquery/jquery.js')
script('vendor/bootstrap/dist/js/bootstrap.js')
link(rel='stylesheet', href='/vendor/bootstrap/dist/css/bootstrap.css')
link(rel='stylesheet', href='/stylesheets/style.css')
block header
body
block content
</source>

===views/index.jade===
<source line lang="html4strict">
extends layout //inherits formatting from layout.jade

block header
script(src='/javascripts/home.js') //applies javascript. Affects the register button

block content
h1= title
- if(error)
div.alert-error #{error}
p Please log in
div
form(action="/start", method="post")
div.control-group.input-append
input(type="text", name="playername")
label.add-on(for="playername") Player Name
div.control-group.input-append
input(type="password", name="password")
label.add-on(for="password") Password

button(type="submit") Start
button#register(type="button") Register
</source>

===views/room.jade===
<source line lang="html4strict">
extends layout

block content
h1= title
p #{description}
p Go to:
ul
each theExit in roomExits //exits are listed for every room
li
a(href= theExit) #{theExit}
form(action="/quit", method="post")
button(type="submit") Quit //creates a quit button on every room
</source>

WebFund 2014W Midterm Review

2014-03-13T18:20:18Z

Leah:

The video from the lecture given on Feb. 12, 2014 is available:
* [http://www.screencast.com/t/9bmB5dTEoC small at Screencast.com]
* [http://www.screencast.com/t/nC3DlJrkoqt large at Screencast.com]
* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Midterm_Review_-_20140212_150208_27.mp4 Original at CUOL]

The midterm will be based on [http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/midterm/small-adventure.zip small-adventure], a version of <tt>adventure-demo</tt> that has been simplified by removing the use of cryptography (https and bcrypt) along with a few other minor tweaks to reduce the size of the source code.

No new tutorial this week; however, two TAs/instructors will be in the lab on Thursday 4-5:30 and Friday 8:30-10 to answer last minute questions.

==Midterm Review Notes==
* Most of the notes are written inline in the source code to make the line it refers to more clear:

What is the state of the system after app,js runs?
* We don't know what it is because you only know when the call back is run.
* app.get/app.post are only run ONCE! It tells the web server what to do when http GET and POST requests are received at specific urls. Note that these are only run ONCE, before the web server starts listening for incoming connections.

Asynchronous vs Synchronous:
* The analogy that Anil give was that synchronous is like a 5 year old child waiting for cookies to be baked. He asks "is it ready yet?" every 5 minutes. He's not doing anything else. Asynchronous is like a 8 year old child, who does something else (e.g. read a book) while he waits for the cookies to be baked

==Source for small-adventure==

===app.js===
<source line lang="javascript">
var express = require('express'); //requires the express module
var routes = require('./routes'); //same as ('/routes/index.js'). The require() method returns the exports object
var path = require('path'); //imports the path module, or path.join will not be defined
var http = require('http'); //requires the http module
var MongoStore = require('connect-mongo')(express);

var app = express(); //creates an express object instance and assigns the app variable to it.

app.set('port', process.env.PORT || 3000); //listens on PORT environment variable OR port 3000 if not defined
app.set('views', path.join(__dirname, 'views')); //sets the location for application views
app.set('view engine', 'jade'); //sets the view engine, Jade
app.use(express.favicon()); //can specify where you want favicon to be found in the parameters. e.g (_dirname + 'public/favicon.ico')
app.use(express.logger('dev')); //logging requests using predefined log format 'dev'. This will generate a detail log.
app.use(express.urlencoded()); //The body of HTTP post requests. Parses the incoming request body, converting it into request object properties

app.use(express.cookieParser());
app.use(express.session({
cookie: {maxAge: 60000 * 20} // 20 minutes
, secret: "Shh... I'm a secret" //This is the secret that prevents attackers from creating their own fake session identifiers
, store: new MongoStore({db: "adventure-demo"})
}));

app.use(app.router);
app.use(express.static(path.join(__dirname, 'public'))); //serves static files from the root path. The CSS files and fonts are all stored in the public directory, which is made publicly accessible by this line.

if ('development' == app.get('env')) {
app.use(express.errorHandler());
}

//The purpose of these lines is to setup routes. It tells the web server what to do when http GET and POST requests are received at specific urls. Note that these are only run ONCE, before the web server starts listening for incoming connections.
app.get('/', routes.redirectLoggedIn, routes.index); //requests the home page (https://localhost:3000)
app.post("/register", routes.register);
app.post("/start", routes.start);
app.post("/quit", routes.quit);

var createRooms = function() {
var i, theRoom;

routes.getRooms().toArray( //a call to getRooms and a call toArray, which is a method of the collections object. This runs the query and puts the results into an array
function(err, docs) {
if (err) {
throw "Couldn't find active room list";
}

var activeRooms = docs[0].activeRooms;

activeRooms.forEach(function(roomName) { //roomName is our index variable, we get the room element. ActiveRooms is an array of roomName.
console.log('Creating room: ' + roomName);
app.get('/' + roomName,
routes.makeRoomHandler(roomName));
});
}
);
}
routes.connectToDBs(createRooms);

http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port') +
' in ' + app.get('env') + ' mode.');
});
//1) createServer(): a method of http that creates and returns a server object
//2) listen(): a method at the returned server object that starts the web server listening on a given port
//3) app.get(): returns the port to listen on
</source>

===routes/index.js===
<source line lang="javascript">
var mc = require('mongodb').MongoClient;
var playersCollection, roomsCollection;
exports.connectToDBs = function(callback) {
mc.connect('mongodb://localhost/adventure-demo', function(err, db) {
if (err) {
throw err;
}

playersCollection = db.collection('players');
roomsCollection = db.collection('rooms');

callback(); //is createRooms. We do the callback after the database is established because we need to setup the database first.
});
}

//assigned to the properties of the exports object
exports.index = function(req, res){
res.render('index', { title: 'COMP 2406 Small Adventure Demo',
error: req.query.error });
}
exports.redirectLoggedIn = function(req, res, next) {
if (req.session.player) {
res.redirect("/" + req.session.player.room);
} else {
next();
}
}
exports.redirectNotLoggedIn = function(req, res, next) {
if (req.session.player) {
next();
} else {
res.redirect("/");
}
}
exports.register = function(req, res) {
var playername = req.body.playername; //req.body retrieves the value for the playername attribute
var password = req.body.password;

var addPlayer = function(err, players) {
if(players.length!=0){
res.redirect("/?error=player already exists");
return;
}

var newPlayer = {
playername: playername,
password: password,
room: "bridge"
};

playersCollection.insert(newPlayer, function(err, newPlayers){
if (err) {
throw err;
} else {
res.send('Successfully registered ' + newPlayers[0].playername);
}
});
}

playersCollection.find({playername: playername}).toArray(addPlayer);
}
exports.start = function(req, res){
var playername = req.body.playername;
var password = req.body.password;

playersCollection.findOne({playername: playername}, function(err, player) {
if (err || !player){
req.session.destroy(function(err) {
res.redirect("/?error=invalid playername or password");
});
return;
}

if (password === player.password) {
req.session.player = player;
delete req.session.player._id;
res.redirect("/" + player.room);
} else {
req.session.destroy(function(err) {
res.redirect("/?error=invalid playername or password");
});
}
});
}
exports.quit = function(req, res){
req.session.destroy(function(err){
if(err){
console.log("Error: %s", err);
}
res.redirect("/");
});
}
exports.makeRoomHandler = function(roomName) {
var handler = function(req, res) { //without 'var' handler becomes a global variable
if (req.session.player) {
var player = req.session.player;
player.room = roomName;
playersCollection.update({"playername": player.playername},
player, function(err, count) {
if (err) {
console.log(
"Couldn't save player state");
}
});
roomsCollection.findOne(
{name: roomName},
function(err, room) {
if (err || !room) {
throw "Couldn't find room " + roomName;
}
res.render("room.jade", room); //renders an html page with room.jade template
}
);
} else {
res.redirect("/");
}
}
return handler;
}
exports.getRooms = function() {
return roomsCollection.find({name: "roomList"}); //finds all the rooms with the name in the roomlist
}
</source>

===public/javascripts/home.js===
<source line lang="javascript">
$(function(){
$("#register").on("click",function(){
var $form = $("form");
$form.attr("action","/register");
$form.submit();
});
});
</source>

===views/layout.jade===
<source line lang="html4strict">
doctype html
html
head
title= title
script(src='/vendor/jquery/jquery.js')
script('vendor/bootstrap/dist/js/bootstrap.js')
link(rel='stylesheet', href='/vendor/bootstrap/dist/css/bootstrap.css')
link(rel='stylesheet', href='/stylesheets/style.css')
block header
body
block content
</source>

===views/index.jade===
<source line lang="html4strict">
extends layout //inherits formatting from layout.jade

block header
script(src='/javascripts/home.js') //applies javascript. Affects the register button

block content
h1= title
- if(error)
div.alert-error #{error}
p Please log in
div
form(action="/start", method="post")
div.control-group.input-append
input(type="text", name="playername")
label.add-on(for="playername") Player Name
div.control-group.input-append
input(type="password", name="password")
label.add-on(for="password") Password

button(type="submit") Start
button#register(type="button") Register
</source>

===views/room.jade===
<source line lang="html4strict">
extends layout

block content
h1= title
p #{description}
p Go to:
ul
each theExit in roomExits //exits are listed for every room
li
a(href= theExit) #{theExit}
form(action="/quit", method="post")
button(type="submit") Quit //creates a quit button on every room
</source>

WebFund 2014W Midterm Review

2014-03-13T18:19:48Z

Leah:

The video from the lecture given on Feb. 12, 2014 is available:
* [http://www.screencast.com/t/9bmB5dTEoC small at Screencast.com]
* [http://www.screencast.com/t/nC3DlJrkoqt large at Screencast.com]
* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Midterm_Review_-_20140212_150208_27.mp4 Original at CUOL]

The midterm will be based on [http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/midterm/small-adventure.zip small-adventure], a version of <tt>adventure-demo</tt> that has been simplified by removing the use of cryptography (https and bcrypt) along with a few other minor tweaks to reduce the size of the source code.

No new tutorial this week; however, two TAs/instructors will be in the lab on Thursday 4-5:30 and Friday 8:30-10 to answer last minute questions.

==Midterm Review Notes==
Note that most of the notes are written inline in the source code to make the line it refers to more clear:

What is the state of the system after app,js runs?
* We don't know what it is because you only know when the call back is run.
* app.get/app.post are only run ONCE! It tells the web server what to do when http GET and POST requests are received at specific urls. Note that these are only run ONCE, before the web server starts listening for incoming connections.

Asynchronous vs Synchronous:
* The analogy that Anil give was that synchronous is like a 5 year old child waiting for cookies to be baked. He asks "is it ready yet?" every 5 minutes. He's not doing anything else. Asynchronous is like a 8 year old child, who does something else (e.g. read a book) while he waits for the cookies to be baked

==Source for small-adventure==

===app.js===
<source line lang="javascript">
var express = require('express'); //requires the express module
var routes = require('./routes'); //same as ('/routes/index.js'). The require() method returns the exports object
var path = require('path'); //imports the path module, or path.join will not be defined
var http = require('http'); //requires the http module
var MongoStore = require('connect-mongo')(express);

var app = express(); //creates an express object instance and assigns the app variable to it.

app.set('port', process.env.PORT || 3000); //listens on PORT environment variable OR port 3000 if not defined
app.set('views', path.join(__dirname, 'views')); //sets the location for application views
app.set('view engine', 'jade'); //sets the view engine, Jade
app.use(express.favicon()); //can specify where you want favicon to be found in the parameters. e.g (_dirname + 'public/favicon.ico')
app.use(express.logger('dev')); //logging requests using predefined log format 'dev'. This will generate a detail log.
app.use(express.urlencoded()); //The body of HTTP post requests. Parses the incoming request body, converting it into request object properties

app.use(express.cookieParser());
app.use(express.session({
cookie: {maxAge: 60000 * 20} // 20 minutes
, secret: "Shh... I'm a secret" //This is the secret that prevents attackers from creating their own fake session identifiers
, store: new MongoStore({db: "adventure-demo"})
}));

app.use(app.router);
app.use(express.static(path.join(__dirname, 'public'))); //serves static files from the root path. The CSS files and fonts are all stored in the public directory, which is made publicly accessible by this line.

if ('development' == app.get('env')) {
app.use(express.errorHandler());
}

//The purpose of these lines is to setup routes. It tells the web server what to do when http GET and POST requests are received at specific urls. Note that these are only run ONCE, before the web server starts listening for incoming connections.
app.get('/', routes.redirectLoggedIn, routes.index); //requests the home page (https://localhost:3000)
app.post("/register", routes.register);
app.post("/start", routes.start);
app.post("/quit", routes.quit);

var createRooms = function() {
var i, theRoom;

routes.getRooms().toArray( //a call to getRooms and a call toArray, which is a method of the collections object. This runs the query and puts the results into an array
function(err, docs) {
if (err) {
throw "Couldn't find active room list";
}

var activeRooms = docs[0].activeRooms;

activeRooms.forEach(function(roomName) { //roomName is our index variable, we get the room element. ActiveRooms is an array of roomName.
console.log('Creating room: ' + roomName);
app.get('/' + roomName,
routes.makeRoomHandler(roomName));
});
}
);
}
routes.connectToDBs(createRooms);

http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port') +
' in ' + app.get('env') + ' mode.');
});
//1) createServer(): a method of http that creates and returns a server object
//2) listen(): a method at the returned server object that starts the web server listening on a given port
//3) app.get(): returns the port to listen on
</source>

===routes/index.js===
<source line lang="javascript">
var mc = require('mongodb').MongoClient;
var playersCollection, roomsCollection;
exports.connectToDBs = function(callback) {
mc.connect('mongodb://localhost/adventure-demo', function(err, db) {
if (err) {
throw err;
}

playersCollection = db.collection('players');
roomsCollection = db.collection('rooms');

callback(); //is createRooms. We do the callback after the database is established because we need to setup the database first.
});
}

//assigned to the properties of the exports object
exports.index = function(req, res){
res.render('index', { title: 'COMP 2406 Small Adventure Demo',
error: req.query.error });
}
exports.redirectLoggedIn = function(req, res, next) {
if (req.session.player) {
res.redirect("/" + req.session.player.room);
} else {
next();
}
}
exports.redirectNotLoggedIn = function(req, res, next) {
if (req.session.player) {
next();
} else {
res.redirect("/");
}
}
exports.register = function(req, res) {
var playername = req.body.playername; //req.body retrieves the value for the playername attribute
var password = req.body.password;

var addPlayer = function(err, players) {
if(players.length!=0){
res.redirect("/?error=player already exists");
return;
}

var newPlayer = {
playername: playername,
password: password,
room: "bridge"
};

playersCollection.insert(newPlayer, function(err, newPlayers){
if (err) {
throw err;
} else {
res.send('Successfully registered ' + newPlayers[0].playername);
}
});
}

playersCollection.find({playername: playername}).toArray(addPlayer);
}
exports.start = function(req, res){
var playername = req.body.playername;
var password = req.body.password;

playersCollection.findOne({playername: playername}, function(err, player) {
if (err || !player){
req.session.destroy(function(err) {
res.redirect("/?error=invalid playername or password");
});
return;
}

if (password === player.password) {
req.session.player = player;
delete req.session.player._id;
res.redirect("/" + player.room);
} else {
req.session.destroy(function(err) {
res.redirect("/?error=invalid playername or password");
});
}
});
}
exports.quit = function(req, res){
req.session.destroy(function(err){
if(err){
console.log("Error: %s", err);
}
res.redirect("/");
});
}
exports.makeRoomHandler = function(roomName) {
var handler = function(req, res) { //without 'var' handler becomes a global variable
if (req.session.player) {
var player = req.session.player;
player.room = roomName;
playersCollection.update({"playername": player.playername},
player, function(err, count) {
if (err) {
console.log(
"Couldn't save player state");
}
});
roomsCollection.findOne(
{name: roomName},
function(err, room) {
if (err || !room) {
throw "Couldn't find room " + roomName;
}
res.render("room.jade", room); //renders an html page with room.jade template
}
);
} else {
res.redirect("/");
}
}
return handler;
}
exports.getRooms = function() {
return roomsCollection.find({name: "roomList"}); //finds all the rooms with the name in the roomlist
}
</source>

===public/javascripts/home.js===
<source line lang="javascript">
$(function(){
$("#register").on("click",function(){
var $form = $("form");
$form.attr("action","/register");
$form.submit();
});
});
</source>

===views/layout.jade===
<source line lang="html4strict">
doctype html
html
head
title= title
script(src='/vendor/jquery/jquery.js')
script('vendor/bootstrap/dist/js/bootstrap.js')
link(rel='stylesheet', href='/vendor/bootstrap/dist/css/bootstrap.css')
link(rel='stylesheet', href='/stylesheets/style.css')
block header
body
block content
</source>

===views/index.jade===
<source line lang="html4strict">
extends layout //inherits formatting from layout.jade

block header
script(src='/javascripts/home.js') //applies javascript. Affects the register button

block content
h1= title
- if(error)
div.alert-error #{error}
p Please log in
div
form(action="/start", method="post")
div.control-group.input-append
input(type="text", name="playername")
label.add-on(for="playername") Player Name
div.control-group.input-append
input(type="password", name="password")
label.add-on(for="password") Password

button(type="submit") Start
button#register(type="button") Register
</source>

===views/room.jade===
<source line lang="html4strict">
extends layout

block content
h1= title
p #{description}
p Go to:
ul
each theExit in roomExits //exits are listed for every room
li
a(href= theExit) #{theExit}
form(action="/quit", method="post")
button(type="submit") Quit //creates a quit button on every room
</source>

WebFund 2014W Midterm Review

2014-03-13T18:14:35Z

Leah:

The video from the lecture given on Feb. 12, 2014 is available:
* [http://www.screencast.com/t/9bmB5dTEoC small at Screencast.com]
* [http://www.screencast.com/t/nC3DlJrkoqt large at Screencast.com]
* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Midterm_Review_-_20140212_150208_27.mp4 Original at CUOL]

The midterm will be based on [http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/midterm/small-adventure.zip small-adventure], a version of <tt>adventure-demo</tt> that has been simplified by removing the use of cryptography (https and bcrypt) along with a few other minor tweaks to reduce the size of the source code.

No new tutorial this week; however, two TAs/instructors will be in the lab on Thursday 4-5:30 and Friday 8:30-10 to answer last minute questions.

==Midterm Review Notes==
Note that most of the notes are written inline in the source code to make the line it refers to more clear:

What is the state of the system after app,js runs?
* We don't know what it is because you only know when the call back is run.
* app.get/app.post are only run ONCE! It tells the web server what to do when http GET and POST requests are received at specific urls. Note that these are only run ONCE, before the web server starts listening for incoming connections.

Asynchronous vs Synchronous:
* The analogy that Anil give was that synchronous is like a 5 year old child waiting for cookies to be baked. He asks "is it ready yet?" every 5 minutes. He's not doing anything else. Asynchronous is like a 8 year old child, who does something else (e.g. read a book) while he waits for the cookies to be baked

==Source for small-adventure==

===app.js===
<source line lang="javascript">
var express = require('express'); //requires the express module
var routes = require('./routes'); //same as ('/routes/index.js'). The require() method returns the exports object
var path = require('path'); //imports the path module, or path.join will not be defined
var http = require('http'); //requires the http module
var MongoStore = require('connect-mongo')(express);

var app = express(); //creates an express object instance and assigns the app variable to it.

app.set('port', process.env.PORT || 3000); //listens on PORT environment variable OR port 3000 if not defined
app.set('views', path.join(__dirname, 'views')); //sets the location for application views
app.set('view engine', 'jade'); //sets the view engine, Jade
app.use(express.favicon()); //can specify where you want favicon to be found in the parameters. e.g (_dirname + 'public/favicon.ico')
app.use(express.logger('dev')); //logging requests using predefined log format 'dev'. This will generate a detail log.
app.use(express.urlencoded()); //The body of HTTP post requests. Parses the incoming request body, converting it into request object properties

app.use(express.cookieParser());
app.use(express.session({
cookie: {maxAge: 60000 * 20} // 20 minutes
, secret: "Shh... I'm a secret" //This is the secret that prevents attackers from creating their own fake session identifiers
, store: new MongoStore({db: "adventure-demo"})
}));

app.use(app.router);
app.use(express.static(path.join(__dirname, 'public'))); //serves static files from the root path. The CSS files and fonts are all stored in the public directory, which is made publicly accessible by this line.

if ('development' == app.get('env')) {
app.use(express.errorHandler());
}

//The purpose of these lines is to setup routes. It tells the web server what to do when http GET and POST requests are received at specific urls. Note that these are only run ONCE, before the web server starts listening for incoming connections.
app.get('/', routes.redirectLoggedIn, routes.index); //requests the home page (https://localhost:3000)
app.post("/register", routes.register);
app.post("/start", routes.start);
app.post("/quit", routes.quit);

var createRooms = function() {
var i, theRoom;

routes.getRooms().toArray( //a call to getRooms and a call toArray, which is a method of the collections object. This runs the query and puts the results into an array
function(err, docs) {
if (err) {
throw "Couldn't find active room list";
}

var activeRooms = docs[0].activeRooms;

activeRooms.forEach(function(roomName) { //roomName is our index variable, we get the room element. ActiveRooms is an array of roomName.
console.log('Creating room: ' + roomName);
app.get('/' + roomName,
routes.makeRoomHandler(roomName));
});
}
);
}
routes.connectToDBs(createRooms);

http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port') +
' in ' + app.get('env') + ' mode.');
});
//1) createServer(): a method of http that creates and returns a server object
//2) listen(): a method at the returned server object that starts the web server listening on a given port
//3) app.get(): returns the port to listen on
</source>

===routes/index.js===
<source line lang="javascript">
var mc = require('mongodb').MongoClient;
var playersCollection, roomsCollection;
exports.connectToDBs = function(callback) {
mc.connect('mongodb://localhost/adventure-demo', function(err, db) {
if (err) {
throw err;
}

playersCollection = db.collection('players');
roomsCollection = db.collection('rooms');

callback(); //is createRooms. We do the callback after the database is established because we need to setup the database first.
});
}

//assigned to the properties of the exports object
exports.index = function(req, res){
res.render('index', { title: 'COMP 2406 Small Adventure Demo',
error: req.query.error });
}
exports.redirectLoggedIn = function(req, res, next) {
if (req.session.player) {
res.redirect("/" + req.session.player.room);
} else {
next();
}
}
exports.redirectNotLoggedIn = function(req, res, next) {
if (req.session.player) {
next();
} else {
res.redirect("/");
}
}
exports.register = function(req, res) {
var playername = req.body.playername; //req.body retrieves the value for the playername attribute
var password = req.body.password;

var addPlayer = function(err, players) {
if(players.length!=0){
res.redirect("/?error=player already exists");
return;
}

var newPlayer = {
playername: playername,
password: password,
room: "bridge"
};

playersCollection.insert(newPlayer, function(err, newPlayers){
if (err) {
throw err;
} else {
res.send('Successfully registered ' + newPlayers[0].playername);
}
});
}

playersCollection.find({playername: playername}).toArray(addPlayer);
}
exports.start = function(req, res){
var playername = req.body.playername;
var password = req.body.password;

playersCollection.findOne({playername: playername}, function(err, player) {
if (err || !player){
req.session.destroy(function(err) {
res.redirect("/?error=invalid playername or password");
});
return;
}

if (password === player.password) {
req.session.player = player;
delete req.session.player._id;
res.redirect("/" + player.room);
} else {
req.session.destroy(function(err) {
res.redirect("/?error=invalid playername or password");
});
}
});
}
exports.quit = function(req, res){
req.session.destroy(function(err){
if(err){
console.log("Error: %s", err);
}
res.redirect("/");
});
}
exports.makeRoomHandler = function(roomName) {
var handler = function(req, res) { //without 'var' handler becomes a global variable
if (req.session.player) {
var player = req.session.player;
player.room = roomName;
playersCollection.update({"playername": player.playername},
player, function(err, count) {
if (err) {
console.log(
"Couldn't save player state");
}
});
roomsCollection.findOne(
{name: roomName},
function(err, room) {
if (err || !room) {
throw "Couldn't find room " + roomName;
}
res.render("room.jade", room); //renders an html page with room.jade template
}
);
} else {
res.redirect("/");
}
}
return handler;
}
exports.getRooms = function() {
return roomsCollection.find({name: "roomList"}); //finds all the rooms with the name in the roomlist
}
</source>

===public/javascripts/home.js===
<source line lang="javascript">
$(function(){
$("#register").on("click",function(){
var $form = $("form");
$form.attr("action","/register");
$form.submit();
});
});
</source>

===views/layout.jade===
<source line lang="html4strict">
doctype html
html
head
title= title
script(src='/vendor/jquery/jquery.js')
script('vendor/bootstrap/dist/js/bootstrap.js')
link(rel='stylesheet', href='/vendor/bootstrap/dist/css/bootstrap.css')
link(rel='stylesheet', href='/stylesheets/style.css')
block header
body
block content
</source>

===views/index.jade===
<source line lang="html4strict">
extends layout

block header
script(src='/javascripts/home.js')

block content
h1= title
- if(error)
div.alert-error #{error}
p Please log in
div
form(action="/start", method="post")
div.control-group.input-append
input(type="text", name="playername")
label.add-on(for="playername") Player Name
div.control-group.input-append
input(type="password", name="password")
label.add-on(for="password") Password

button(type="submit") Start
button#register(type="button") Register
</source>

===views/room.jade===
<source line lang="html4strict">
extends layout

block content
h1= title
p #{description}
p Go to:
ul
each theExit in roomExits
li
a(href= theExit) #{theExit}
form(action="/quit", method="post")
button(type="submit") Quit
</source>

WebFund 2014W Midterm Review

2014-03-13T17:45:23Z

Leah:

The video from the lecture given on Feb. 12, 2014 is available:
* [http://www.screencast.com/t/9bmB5dTEoC small at Screencast.com]
* [http://www.screencast.com/t/nC3DlJrkoqt large at Screencast.com]
* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Midterm_Review_-_20140212_150208_27.mp4 Original at CUOL]

The midterm will be based on [http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/midterm/small-adventure.zip small-adventure], a version of <tt>adventure-demo</tt> that has been simplified by removing the use of cryptography (https and bcrypt) along with a few other minor tweaks to reduce the size of the source code.

No new tutorial this week; however, two TAs/instructors will be in the lab on Thursday 4-5:30 and Friday 8:30-10 to answer last minute questions.

==Source for small-adventure==

===app.js===
<source line lang="javascript">
var express = require('express'); //requires the express module
var routes = require('./routes'); //same as ('/routes/index.js'). The require() method returns the exports object
var path = require('path'); //imports the path module, or path.join will not be defined
var http = require('http'); //requires the http module
var MongoStore = require('connect-mongo')(express);

var app = express(); //creates an express object instance and assigns the app variable to it.

app.set('port', process.env.PORT || 3000); //listens on PORT environment variable OR port 3000 if not defined
app.set('views', path.join(__dirname, 'views')); //sets the location for application views
app.set('view engine', 'jade'); //sets the view engine, Jade
app.use(express.favicon()); //can specify where you want favicon to be found in the parameters. e.g (_dirname + 'public/favicon.ico')
app.use(express.logger('dev')); //logging requests using predefined log format 'dev'. This will generate a detail log.
app.use(express.urlencoded()); //The body of HTTP post requests. Parses the incoming request body, converting it into request object properties

app.use(express.cookieParser());
app.use(express.session({
cookie: {maxAge: 60000 * 20} // 20 minutes
, secret: "Shh... I'm a secret" //This is the secret that prevents attackers from creating their own fake session identifiers
, store: new MongoStore({db: "adventure-demo"})
}));

app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

if ('development' == app.get('env')) {
app.use(express.errorHandler());
}

app.get('/', routes.redirectLoggedIn, routes.index);
app.post("/register", routes.register);
app.post("/start", routes.start);
app.post("/quit", routes.quit);

var createRooms = function() {
var i, theRoom;

routes.getRooms().toArray(
function(err, docs) {
if (err) {
throw "Couldn't find active room list";
}

var activeRooms = docs[0].activeRooms;

activeRooms.forEach(function(roomName) {
console.log('Creating room: ' + roomName);
app.get('/' + roomName,
routes.makeRoomHandler(roomName));
});
}
);
}
routes.connectToDBs(createRooms);

http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port') +
' in ' + app.get('env') + ' mode.');
});
//1) createServer(): a method of http that creates and returns a server object
//2) listen(): a method at the returned server object that starts the web server listening on a given port
//3) app.get(): returns the port to listen on
</source>

===routes/index.js===
<source line lang="javascript">
var mc = require('mongodb').MongoClient;
var playersCollection, roomsCollection;
exports.connectToDBs = function(callback) {
mc.connect('mongodb://localhost/adventure-demo', function(err, db) {
if (err) {
throw err;
}

playersCollection = db.collection('players');
roomsCollection = db.collection('rooms');

callback();
});
}
exports.index = function(req, res){
res.render('index', { title: 'COMP 2406 Small Adventure Demo',
error: req.query.error });
}
exports.redirectLoggedIn = function(req, res, next) {
if (req.session.player) {
res.redirect("/" + req.session.player.room);
} else {
next();
}
}
exports.redirectNotLoggedIn = function(req, res, next) {
if (req.session.player) {
next();
} else {
res.redirect("/");
}
}
exports.register = function(req, res) {
var playername = req.body.playername;
var password = req.body.password;

var addPlayer = function(err, players) {
if(players.length!=0){
res.redirect("/?error=player already exists");
return;
}

var newPlayer = {
playername: playername,
password: password,
room: "bridge"
};

playersCollection.insert(newPlayer, function(err, newPlayers){
if (err) {
throw err;
} else {
res.send('Successfully registered ' + newPlayers[0].playername);
}
});
}

playersCollection.find({playername: playername}).toArray(addPlayer);
}
exports.start = function(req, res){
var playername = req.body.playername;
var password = req.body.password;

playersCollection.findOne({playername: playername}, function(err, player) {
if (err || !player){
req.session.destroy(function(err) {
res.redirect("/?error=invalid playername or password");
});
return;
}

if (password === player.password) {
req.session.player = player;
delete req.session.player._id;
res.redirect("/" + player.room);
} else {
req.session.destroy(function(err) {
res.redirect("/?error=invalid playername or password");
});
}
});
}
exports.quit = function(req, res){
req.session.destroy(function(err){
if(err){
console.log("Error: %s", err);
}
res.redirect("/");
});
}
exports.makeRoomHandler = function(roomName) {
var handler = function(req, res) {
if (req.session.player) {
var player = req.session.player;
player.room = roomName;
playersCollection.update({"playername": player.playername},
player, function(err, count) {
if (err) {
console.log(
"Couldn't save player state");
}
});
roomsCollection.findOne(
{name: roomName},
function(err, room) {
if (err || !room) {
throw "Couldn't find room " + roomName;
}
res.render("room.jade", room);
}
);
} else {
res.redirect("/");
}
}
return handler;
}
exports.getRooms = function() {
return roomsCollection.find({name: "roomList"});
}
</source>

===public/javascripts/home.js===
<source line lang="javascript">
$(function(){
$("#register").on("click",function(){
var $form = $("form");
$form.attr("action","/register");
$form.submit();
});
});
</source>

===views/layout.jade===
<source line lang="html4strict">
doctype html
html
head
title= title
script(src='/vendor/jquery/jquery.js')
script('vendor/bootstrap/dist/js/bootstrap.js')
link(rel='stylesheet', href='/vendor/bootstrap/dist/css/bootstrap.css')
link(rel='stylesheet', href='/stylesheets/style.css')
block header
body
block content
</source>

===views/index.jade===
<source line lang="html4strict">
extends layout

block header
script(src='/javascripts/home.js')

block content
h1= title
- if(error)
div.alert-error #{error}
p Please log in
div
form(action="/start", method="post")
div.control-group.input-append
input(type="text", name="playername")
label.add-on(for="playername") Player Name
div.control-group.input-append
input(type="password", name="password")
label.add-on(for="password") Password

button(type="submit") Start
button#register(type="button") Register
</source>

===views/room.jade===
<source line lang="html4strict">
extends layout

block content
h1= title
p #{description}
p Go to:
ul
each theExit in roomExits
li
a(href= theExit) #{theExit}
form(action="/quit", method="post")
button(type="submit") Quit
</source>

WebFund 2014W Midterm Review

2014-03-13T17:32:17Z

Leah:

The video from the lecture given on Feb. 12, 2014 is available:
* [http://www.screencast.com/t/9bmB5dTEoC small at Screencast.com]
* [http://www.screencast.com/t/nC3DlJrkoqt large at Screencast.com]
* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Midterm_Review_-_20140212_150208_27.mp4 Original at CUOL]

The midterm will be based on [http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/midterm/small-adventure.zip small-adventure], a version of <tt>adventure-demo</tt> that has been simplified by removing the use of cryptography (https and bcrypt) along with a few other minor tweaks to reduce the size of the source code.

No new tutorial this week; however, two TAs/instructors will be in the lab on Thursday 4-5:30 and Friday 8:30-10 to answer last minute questions.

==Source for small-adventure==

===app.js===
<source line lang="javascript">
var express = require('express');
var routes = require('./routes'); //same as ('/routes/index.js'). The require() method returns the exports object
var path = require('path'); //imports the path module, or path.join will not be defined
var http = require('http');
var MongoStore = require('connect-mongo')(express);

var app = express(); //creates an express object instance and assigns the app variable to it.

app.set('port', process.env.PORT || 3000); //listens on PORT environment variable OR port 3000 if not defined
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.urlencoded());

app.use(express.cookieParser());
app.use(express.session({
cookie: {maxAge: 60000 * 20} // 20 minutes
, secret: "Shh... I'm a secret"
, store: new MongoStore({db: "adventure-demo"})
}));

app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

if ('development' == app.get('env')) {
app.use(express.errorHandler());
}

app.get('/', routes.redirectLoggedIn, routes.index);
app.post("/register", routes.register);
app.post("/start", routes.start);
app.post("/quit", routes.quit);

var createRooms = function() {
var i, theRoom;

routes.getRooms().toArray(
function(err, docs) {
if (err) {
throw "Couldn't find active room list";
}

var activeRooms = docs[0].activeRooms;

activeRooms.forEach(function(roomName) {
console.log('Creating room: ' + roomName);
app.get('/' + roomName,
routes.makeRoomHandler(roomName));
});
}
);
}
routes.connectToDBs(createRooms);

http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port') +
' in ' + app.get('env') + ' mode.');
});
</source>

===routes/index.js===
<source line lang="javascript">
var mc = require('mongodb').MongoClient;
var playersCollection, roomsCollection;
exports.connectToDBs = function(callback) {
mc.connect('mongodb://localhost/adventure-demo', function(err, db) {
if (err) {
throw err;
}

playersCollection = db.collection('players');
roomsCollection = db.collection('rooms');

callback();
});
}
exports.index = function(req, res){
res.render('index', { title: 'COMP 2406 Small Adventure Demo',
error: req.query.error });
}
exports.redirectLoggedIn = function(req, res, next) {
if (req.session.player) {
res.redirect("/" + req.session.player.room);
} else {
next();
}
}
exports.redirectNotLoggedIn = function(req, res, next) {
if (req.session.player) {
next();
} else {
res.redirect("/");
}
}
exports.register = function(req, res) {
var playername = req.body.playername;
var password = req.body.password;

var addPlayer = function(err, players) {
if(players.length!=0){
res.redirect("/?error=player already exists");
return;
}

var newPlayer = {
playername: playername,
password: password,
room: "bridge"
};

playersCollection.insert(newPlayer, function(err, newPlayers){
if (err) {
throw err;
} else {
res.send('Successfully registered ' + newPlayers[0].playername);
}
});
}

playersCollection.find({playername: playername}).toArray(addPlayer);
}
exports.start = function(req, res){
var playername = req.body.playername;
var password = req.body.password;

playersCollection.findOne({playername: playername}, function(err, player) {
if (err || !player){
req.session.destroy(function(err) {
res.redirect("/?error=invalid playername or password");
});
return;
}

if (password === player.password) {
req.session.player = player;
delete req.session.player._id;
res.redirect("/" + player.room);
} else {
req.session.destroy(function(err) {
res.redirect("/?error=invalid playername or password");
});
}
});
}
exports.quit = function(req, res){
req.session.destroy(function(err){
if(err){
console.log("Error: %s", err);
}
res.redirect("/");
});
}
exports.makeRoomHandler = function(roomName) {
var handler = function(req, res) {
if (req.session.player) {
var player = req.session.player;
player.room = roomName;
playersCollection.update({"playername": player.playername},
player, function(err, count) {
if (err) {
console.log(
"Couldn't save player state");
}
});
roomsCollection.findOne(
{name: roomName},
function(err, room) {
if (err || !room) {
throw "Couldn't find room " + roomName;
}
res.render("room.jade", room);
}
);
} else {
res.redirect("/");
}
}
return handler;
}
exports.getRooms = function() {
return roomsCollection.find({name: "roomList"});
}
</source>

===public/javascripts/home.js===
<source line lang="javascript">
$(function(){
$("#register").on("click",function(){
var $form = $("form");
$form.attr("action","/register");
$form.submit();
});
});
</source>

===views/layout.jade===
<source line lang="html4strict">
doctype html
html
head
title= title
script(src='/vendor/jquery/jquery.js')
script('vendor/bootstrap/dist/js/bootstrap.js')
link(rel='stylesheet', href='/vendor/bootstrap/dist/css/bootstrap.css')
link(rel='stylesheet', href='/stylesheets/style.css')
block header
body
block content
</source>

===views/index.jade===
<source line lang="html4strict">
extends layout

block header
script(src='/javascripts/home.js')

block content
h1= title
- if(error)
div.alert-error #{error}
p Please log in
div
form(action="/start", method="post")
div.control-group.input-append
input(type="text", name="playername")
label.add-on(for="playername") Player Name
div.control-group.input-append
input(type="password", name="password")
label.add-on(for="password") Password

button(type="submit") Start
button#register(type="button") Register
</source>

===views/room.jade===
<source line lang="html4strict">
extends layout

block content
h1= title
p #{description}
p Go to:
ul
each theExit in roomExits
li
a(href= theExit) #{theExit}
form(action="/quit", method="post")
button(type="submit") Quit
</source>

WebFund 2014W Midterm Review

2014-03-13T17:26:08Z

Leah:

WebFund 2014W Lecture 7

2014-03-13T17:14:05Z

Leah:

The video from the lecture given on January 29, 2014 is available:
* [http://www.screencast.com/t/5lpc5qWqGBU2 Small from screencast.com]
* [http://www.screencast.com/t/x2iAx5KDyj Large from screencast.com]
* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Lecture_7_-_20140129_143752_27.mp4 Original from CUOL]

== Databases ==
why?
* Persistence - You want to stick around (vs. RAM)
* Concurrency in writes - (vs. files)
* Search - (vs. files)
** Dynamic data should NOT be stored in files.

SQL(Structured Query Language) vs. NoSQL
* SQL makes queries to databases, assuming queries are highly structured.
* for relational databases.

What is a structure of a relational database?
e.g. Tables - relations connect fields between tables
* rows (records)
* columns (fields)

With a relational database, you can quickly compare information because of the arrangement of data in columns. The relational database can build completely new tables out of required information from existing tables. In other words, it uses the relationship of similar data to increase the speed and versatility of the database.

By storing this information in another table, the database can create a single small table with the locations that can then be used for a variety of purposes by other tables in the database. A typical large database will contain hundreds or thousands of tables like this all used together to quickly find the exact information needed.

== Example ==

Table: People
{| class="wikitable"
|-
! ID
! First Name
! Last Name
! Phone
! Email
|-
| 1
| Anil
| Somayaji
| 555-1212
| soma@scs.carleton.ca
|-
| 2
| Dana
| Somayaji
| 555-1212
| dana@example.ca (should check whether it is a valid address)
|}

Validation Problem:
* Where to check for bad data?
* Can do on:
** Web client (helpful)
** Web server (must)
** Database (useful)

Example continued:

Table: Invoices

{| class="wikitable"
|-
! Inv. ID
! Description
! Amount
! Customer
|-
| 1
| iPad
| $700
| 1 <- Which is Anil in the People table)
|-
| 2
| MacBookPro
| $1500
| 2 <- Which is Dana in the People table)
|}

* One relation: Invoice = Customer ID -> People ID

Could ask for simple queries:
* All records in People with first name == Anil
* Which customer has spent the most in our store?
** Sum of all invoices for each customer
** find max

Indexing:
* Simplest: sorts specific fields in a table (create secondary keys)

{| class="wikitable"
|-
! Secondary key
! Primary key
|-
| First Name
| ID
|-
| Anil
| 1
|-
| Dana
| 2
|-
| Annie
| 3
|}

* We want to sort the names Alphabetically using the secondary key.

Transactions:
* What if I want to change records in multiple tables in a coordinated fashion?
* Airline example
** Reserve seat
** Pay
** Commit: check that payment and reservation both worked first

NoSQL Databases: No transactions, no real relations

WebFund 2014W Lecture 7

2014-03-13T17:09:59Z

Leah:

The video from the lecture given on January 29, 2014 is available:
* [http://www.screencast.com/t/5lpc5qWqGBU2 Small from screencast.com]
* [http://www.screencast.com/t/x2iAx5KDyj Large from screencast.com]
* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Lecture_7_-_20140129_143752_27.mp4 Original from CUOL]

== Databases ==
why?
* Persistence - You want to stick around (vs. RAM)
* Concurrency in writes - (vs. files)
* Search - (vs. files)
** Dynamic data should NOT be stored in files.

SQL(Structured Query Language) vs. NoSQL
* SQL makes queries to databases, assuming queries are highly structured.
* for relational databases.

What is a structure of a relational database?
e.g. Tables - relations connect fields between tables
* rows (records)
* columns (fields)

== Example ==

Table: People
{| class="wikitable"
|-
! ID
! First Name
! Last Name
! Phone
! Email
|-
| 1
| Anil
| Somayaji
| 555-1212
| soma@scs.carleton.ca
|-
| 2
| Dana
| Somayaji
| 555-1212
| dana@example.ca (should check whether it is a valid address)
|}

Validation Problem:
* Where to check for bad data?
* Can do on:
** Web client (helpful)
** Web server (must)
** Database (useful)

Example continued:

Table: Invoices

{| class="wikitable"
|-
! Inv. ID
! Description
! Amount
! Customer
|-
| 1
| iPad
| $700
| 1 <- Which is Anil in the People table)
|-
| 2
| MacBookPro
| $1500
| 2 <- Which is Dana in the People table)
|}

* One relation: Invoice = Customer ID -> People ID

Could ask for simple queries:
* All records in People with first name == Anil
* Which customer has spent the most in our store?
** Sum of all invoices for each customer
** find max

Indexing:
* Simplest: sorts specific fields in a table (create secondary keys)

{| class="wikitable"
|-
! Secondary key
! Primary key
|-
| First Name
| ID
|-
| Anil
| 1
|-
| Dana
| 2
|-
| Annie
| 3
|}

* We want to sort the names Alphabetically using the secondary key.

Transactions:
* What if I want to change records in multiple tables in a coordinated fashion?
* Airline example
** Reserve seat
** Pay
** Commit: check that payment and reservation both worked first

NoSQL Databases: No transactions, no real relations

WebFund 2014W Lecture 7

2014-03-13T17:07:32Z

Leah:

The video from the lecture given on January 29, 2014 is available:
* [http://www.screencast.com/t/5lpc5qWqGBU2 Small from screencast.com]
* [http://www.screencast.com/t/x2iAx5KDyj Large from screencast.com]
* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Lecture_7_-_20140129_143752_27.mp4 Original from CUOL]

== Databases ==
why?
* Persistence - You want to stick around (vs. RAM)
* Concurrency in writes - (vs. files)
* Search - (vs. files)
** Dynamic data should NOT be stored in files.

SQL(Structured Query Language) vs. NoSQL
* SQL makes queries to databases, assuming queries are highly structured.
* for relational databases.

What is a structure of a relational database?
e.g. Tables - relations connect fields between tables
* rows (records)
* columns (fields)

== Example ==

Table: People
{| class="wikitable"
|-
! ID
! First Name
! Last Name
! Phone
! Email
|-
| 1
| Anil
| Somayaji
| 555-1212
| soma@scs.carleton.ca
|-
| 2
| Dana
| Somayaji
| 555-1212
| dana@example.ca (should check whether it is a valid address)
|}

Validation Problem:
* Where to check for bad data?
* Can do on:
** Web client (helpful)
** Web server (must)
** Database (useful)

Example continued:

Table: Invoices

{| class="wikitable"
|-
! Inv. ID
! Description
! Amount
! Customer
|-
| 1
| iPad
| $700
| 1 <- Which is Anil in the People table)
|-
| 2
| MacBookPro
| $1500
| 2 <- Which is Dana in the People table)
|}

* One relation: Invoice = Customer ID -> People ID

Could ask for simple queries:
* All records in People with first name == Anil
* Which customer has spent the most in our store?
** Sum of all invoices for each customer
** find max

Indexing:
* Simplest: sorts specific fields in a table (create secondary keys)

Secondary key Primary key
======== =======
First Name ID
--------- --
Anil 1
Dana 2
Annie 3

* sort the names Alphabetically.

Transactions:
* What if I want to change records in multiple tables in a coordinated fashion?
* Airline example
** Reserve seat
** Pay
** Commit: check that payment and reservation both worked first

NoSQL Databases: No transactions, no real relations

WebFund 2014W Lecture 7

2014-03-13T17:04:53Z

Leah:

The video from the lecture given on January 29, 2014 is available:
* [http://www.screencast.com/t/5lpc5qWqGBU2 Small from screencast.com]
* [http://www.screencast.com/t/x2iAx5KDyj Large from screencast.com]
* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Lecture_7_-_20140129_143752_27.mp4 Original from CUOL]

== Databases ==
why?
* Persistence - You want to stick around (vs. RAM)
* Concurrency in writes - (vs. files)
* Search - (vs. files)
** Dynamic data should NOT be stored in files.

SQL(Structured Query Language) vs. NoSQL
* SQL makes queries to databases, assuming queries are highly structured.
* for relational databases.

What is a structure of a relational database?
e.g. Tables - relations connect fields between tables
* rows (records)
* columns (fields)

== Example ==

Table: People
{| class="wikitable"
|-
! ID
! First Name
! Last Name
! Phone
! Email
|-
| 1
| Anil
| Somayaji
| 555-1212
| soma@scs.carleton.ca
|-
| 2
| Dana
| Somayaji
| 555-1212
| dana@example.ca (should check whether it is a valid address)
|}

Validation Problem:
* Where to check for bad data?
* Can do on:
** Web client (helpful)
** Web server (must)
** Database (useful)

Example continued:

Table: Invoices

Inv. ID Description Amount Customer
1 iPad $700 1 <- Which is Anil in the People table)
2

* One relation: Invoice = Customer ID -> People ID

Could ask for simple queries:
* All records in People with first name == Anil
* Which customer has spent the most in our store?
** Sum of all invoices for each customer
** find max

Indexing:
* Simplest: sorts specific fields in a table (create secondary keys)

Secondary key Primary key
======== =======
First Name ID
--------- --
Anil 1
Dana 2
Annie 3

* sort the names Alphabetically.

Transactions:
* What if I want to change records in multiple tables in a coordinated fashion?
* Airline example
** Reserve seat
** Pay
** Commit: check that payment and reservation both worked first

NoSQL Databases: No transactions, no real relations

WebFund 2014W Lecture 7

2014-03-13T17:02:00Z

Leah:

The video from the lecture given on January 29, 2014 is available:
* [http://www.screencast.com/t/5lpc5qWqGBU2 Small from screencast.com]
* [http://www.screencast.com/t/x2iAx5KDyj Large from screencast.com]
* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Lecture_7_-_20140129_143752_27.mp4 Original from CUOL]

== Databases ==
why?
* Persistence - You want to stick around (vs. RAM)
* Concurrency in writes - (vs. files)
* Search - (vs. files)
** Dynamic data should NOT be stored in files.

SQL(Structured Query Language) vs. NoSQL
* SQL makes queries to databases, assuming queries are highly structured.
* for relational databases.

What is a structure of a relational database?
e.g. Tables - relations connect fields between tables
* rows (records)
* columns (fields)

== Example ==

{| class="wikitable"
|-
! Header 1
! Header 2
! Header 3
|-
| row 1, cell 1
| row 1, cell 2
| row 1, cell 3
|-
| row 2, cell 1
| row 2, cell 2
| row 2, cell 3
|}

Table: People

ID First Name Last Name Phone Email
1 Anil Somayaji 555-1212 soma@scs.carleton.ca
2 Dana Somayaji 555-1212 dana@example.ca (should check whether it is a valid address)

Validation Problem:
* Where to check for bad data?
* Can do on:
** Web client (helpful)
** Web server (must)
** Database (useful)

Example continued:

Table: Invoices

Inv. ID Description Amount Customer
1 iPad $700 1 <- Which is Anil in the People table)
2

* One relation: Invoice = Customer ID -> People ID

Could ask for simple queries:
* All records in People with first name == Anil
* Which customer has spent the most in our store?
** Sum of all invoices for each customer
** find max

Indexing:
* Simplest: sorts specific fields in a table (create secondary keys)

Secondary key Primary key
======== =======
First Name ID
--------- --
Anil 1
Dana 2
Annie 3

* sort the names Alphabetically.

Transactions:
* What if I want to change records in multiple tables in a coordinated fashion?
* Airline example
** Reserve seat
** Pay
** Commit: check that payment and reservation both worked first

NoSQL Databases: No transactions, no real relations

WebFund 2014W Lecture 7

2014-03-13T16:59:41Z

Leah:

WebFund 2014W Lecture 7

2014-03-13T16:55:55Z

Leah: