WebFund 2015W: Assignment 4

This assignment is not yet finalized.

Answer the following questions about notes-demo that you looked at in Tutorial 4. The code is also listed below. There are 20 points in 7 questions. There is also 1 point for a bonus question. This assignment is due by 10 AM on Monday, February 9, 2015. We will go through the solutions in class at that time.

Please submit your answers as a single text or PDF file called "<username>-comp2406-assign4.txt" or "<username>-comp2406-assign4.pdf", where username is your MyCarletonOne username. The first four lines of this file should be "COMP 2406 Assignment 4", your name, student number, and the date. You may wish to format your answers in Markdown to improve their appearance. If you do so, you may convert your text file to PDF using pandoc.

No other formats will be accepted. Submitting in another format will likely result in your assignment not being graded and you receiving no marks for this assignment. In particular do not submit an MS Word or OpenOffice file as your answers document!

Questions

1. [4] In the listings below the following files were not included. What is the high-level purpose of each file, and when is each accessed? (Note that you do not need to refer to these files to answer the following questions.)
   • app.js
   • bin/www
   • views/error.jade
   • package.json
2. [2] Can a user embed a hyperlink in the title of a note? What about in the content portion of the note? Why?
3. [2] The /edit/[note number] page redirects to /notes when it cannot find the requested note. When it does so, it passes an error message of "Unknown Note to Edit" to the page; however, this error is not displayed anywhere except for the URL bar. How could you make /notes display errors in the body of the page?
4. [2] You want to change the font used to render page headers (h1 tags) to in notes-demo to be the same font as the main text, but in 50 point bold italic letters. How would you change it?
5. [2] You want to start playing with jQuery in your web application. Before you do this, however, you need to add code to include jQuery in your app. How would you add client-side jQuery support to notes-demo?
6. [2] How would you add a Cancel button to the Note editor page? It should be a button (like the other buttons in the application) that takes the user back to the notes listing page.
7. [6] How would you add a Date field to each note? The Date field should be shown beside the title in the main notes listing page. The Date should also be modifiable from the edit page.

Code

routes/index.js

var express = require('express');
var router = express.Router();

var userNotes = {"alice": 
		 [
		     {"title": "Grocery",
		      "content": "Eggs<br>Milk"},
		     {"title": "To Do",
		      "content": "Lots.<br>of.<br>things"}
		 ]
		};

router.get('/', function(req, res) {
    if (req.session.username) {
        res.redirect("/notes");
    } else {
	res.render('index', { title: 'COMP 2406 Notes Demo', 
			      error: req.query.error });
    }
});

router.get('/notes', function(req, res) {
    var username = req.session.username;
    if (username) {
	res.render("notes.jade", {username: username,
				    title: username +"'s Notes",
				    userNotes: userNotes[username]});
    } else {
	res.redirect("/?error=Not Logged In");
    }
});

router.post('/login', function(req, res) {
    var username = req.body.username;
    req.session.username = username;

    if (!userNotes[username]) {
	userNotes[username] = [];
    }

    res.redirect("/notes")
});

router.post('/logout', function(req, res) {
    req.session.destroy(function(err){
        if (err) {
            console.log("Error: %s", err);
        }
    });
    res.redirect("/");
});

router.get('/edit/:id', function(req, res) {
    var username = req.session.username;
    var id = req.params.id;
    var note;

    if (username) {
	note = userNotes[username][id];

	if (note) {
	    res.render("edit.jade", {title: "Edit Note",
				     note: note,
				     id: id});
	} else {
	    res.redirect("/notes?error=Unknown Note to Edit");
	}
    } else {
	res.redirect("/?error=Not Logged In");
    }
});

router.post('/update', function(req, res) {
    var username = req.session.username;
    var id = req.body.id;
    var title;
    
    if (username) {
	note = userNotes[username][id];

	if (note) {
	    note.title = req.body.title;
	    note.content = req.body.content;
	    title = "Update Succeded";
	} else {
	    title = "Update Failed";
	}
	
	res.render("updated.jade", {title: title,
				    updatedNote: note});
    } else {
	res.redirect("/?error=Not Logged In");
    }
});

router.get('/new', function(req, res) {
    var username = req.session.username;
    var nextNote, note;

    if (username) {
	nextNote = userNotes[username].length;
	note = {title: "Untitled",
		content: "No content"}
	userNotes[username][nextNote] = note;
	res.redirect("/edit/" + nextNote);
    } else {
	res.redirect("/?error=Not Logged In");
    }
});

module.exports = router;

views/layout.jade

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

views/index.jade

extends layout

block content
  h1= title
  p Welcome to #{title}
  - if(error)
    div #{error}
  p Please log in
  div
    form(action="/login", method="post")
        div
            input(type="text", name="username")
            label(for="username") Username
        button(type="submit") Login

views/notes.jade

extends layout

block content
  h1 #{username} Account
  p Welcome #{username}
  form(action="/logout", method="post")
        button(type="submit") Logout
  
  h2 Notes
  ul
    - for (i=0; i < userNotes.length; i++)
      li
        div
          b= userNotes[i].title + ": "
          -var note_url = "/edit/" + i
          a(href=note_url) [edit]
          p!= userNotes[i].content
  a(href="/new") New Note

views/edit.jade

extends layout

block content
  h1= title
  div
    form(action="/update", method="post")
        input(type="hidden", name="id", value=id)
        div
            input#title(type="text", name="title", value=note.title)
        div
            textarea(cols="40", rows="5",
                     name="content", wrap="virtual")=note.content
        button(type="submit") Update

views/updated.jade

extends layout

block content
  h1 Note updated

  p The following note was updated:
    ul
     li
      b= updatedNote.title
  a(href="/notes") Return

public/stylesheets/styles.css

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

a {
  color: #00B7FF;
}