Fundamentals of Web Applications (Winter 2015): Difference between revisions

From Soma-notes
No edit summary
 
(31 intermediate revisions by the same user not shown)
Line 3: Line 3:
[[Fundamentals of Web Applications: Winter 2015 Course Outline|Here]] is the course outline.
[[Fundamentals of Web Applications: Winter 2015 Course Outline|Here]] is the course outline.


==Lectures and Exams==
<table style="width: 100%;" border="1" cellpadding="4" cellspacing="0">
  <tr valign="top">
    <th>
    <p align="left">Date</p>
    </th>
    <th>
    <p align="left">Topic</p>
    </th>
  </tr>
    <tr>
      <td>
      <p>Jan. 5
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 1|Lecture 1]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Jan. 7
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 2|Lecture 2]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Jan. 12
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 3|Lecture 3]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Jan. 14
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 4|Lecture 4]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Jan. 19
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 5|Lecture 5]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Jan. 21
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 6|Lecture 6]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Jan. 26
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 7|Lecture 7]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Jan. 28
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 8|Lecture 8]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Feb. 2
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 9|Lecture 9]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Feb. 4
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 10|Lecture 10]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Feb. 9
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Midterm Review|Midterm Review]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Feb. 11
      </p>
      </td>
      <td>
      <p>Midterm (in class) [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/comp2406-midterm-2015w-sol.pdf Solutions]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Feb. 23
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 12|Lecture 12]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Feb. 25
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 13|Lecture 13]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Mar. 2
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 14|Lecture 14]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Mar. 4
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 15|Lecture 15]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Mar. 9
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 16|Lecture 16]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Mar. 11
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 17|Lecture 17]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Mar. 16
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 18|Lecture 18]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Mar. 18
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 19|Lecture 19]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Mar. 23
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 20|Lecture 20]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Mar. 25
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 21|Lecture 21]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Mar. 30
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 22|Lecture 22]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Apr. 1
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 23|Lecture 23]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Apr. 6
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Lecture 24|Lecture 24]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>April 10, 2-3:30 PM (SC 103)
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W Final Exam Review|Exam Review]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>April 14, 2 PM
      </p>
      </td>
      <td>
      <p>Final Exam
      </p>
      </td>
    </tr>
</table>
==Tutorials==
Each week you will get a progress grade from 0-4, given to you by a TA.  If you are being diligent, you should be able to get 4's every week.  The easiest way to get your grade is to come to tutorial and meet with your TA; alternately, you can meet a TA in their office hours or, at their discretion, discuss things with them online.
<table style="width: 100%;" border="1" cellpadding="4" cellspacing="0">
  <tr valign="top">
    <th>
    <p align="left">Date</p>
    </th>
    <th>
    <p align="left">Tutorials</p>
    </th>
  </tr>
    <tr>
      <td>
      <p>Jan. 12, 13, 15
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Tutorial 1|Setup VMs, Run node.js, JavaScript basics]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Jan. 19, 20, 22
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Tutorial 2|Web Form demo]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Jan. 26, 27, 29
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Tutorial 3|Tiny web server]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Feb. 2, 3, 5
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Tutorial 4|Notes demo]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Feb. 23, 24, 26
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Tutorial 5|MongoDB Introduction]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Mar. 2, 3, 5
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Tutorial 6|Persistent Notes]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Mar. 9, 10, 12
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Tutorial 7|Single-page Notes App]]
      </p>
      </td>
    </tr>
    <tr>
    <tr>
      <td>
      <p>Mar. 16, 17, 19
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Tutorial 8|Debugging Notes Applications]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Mar. 23, 24, 26
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Tutorial 9|The HTTP view]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Mar. 30, 31, Apr. 2
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Tutorial 10|TLS notes]]
      </p>
      </td>
    </tr>
</table>
==Assignments==
<table style="width: 100%;" border="1" cellpadding="4" cellspacing="0">
  <tr valign="top">
    <th>
    <p align="left">Due Date</p>
    </th>
    <th>
    <p align="left">Assignments</p>
    </th>
  </tr>
    <tr>
      <td>
      <p>Jan. 19
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Assignment 1|Assignment 1]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Jan. 27 (extended)
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Assignment 2|Assignment 2]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Feb. 2
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Assignment 3|Assignment 3]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Feb. 9
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Assignment 4|Assignment 4]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Mar. 2
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Assignment 5|Assignment 5]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Mar. 11 (extended)
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Assignment 6|Assignment 6]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Mar. 18 (extended)
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Assignment 7|Assignment 7]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Mar. 25 (extended)
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Assignment 8|Assignment 8]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Mar. 30
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Assignment 9|Assignment 9]]
      </p>
      </td>
    </tr>
    <tr>
      <td>
      <p>Apr. 6
      </p>
      </td>
      <td>
      <p>[[WebFund 2015W: Assignment 10|Assignment 10]]
      </p>
      </td>
    </tr>
</table>


==Course Software==
==Course Software==
Line 30: Line 541:
===Running the VM on your own machines===
===Running the VM on your own machines===


If you want to run the VM appliance on your own system (running essentially any desktop operating system you want), just download the [https://onedrive.live.com/redir?resid=E6AC3A7CA1F6A174!1729&authkey=!AELr0qhKpw6qOsI&ithint=file%2cova COMP 2406.ova] virtual appliance file and import.  The SHA1 hash of this file is:
If you want to run the VM appliance on your own system (running essentially any desktop operating system you want), just download [http://homeostasis.scs.carleton.ca/~soma/VMs/COMP%202406%20Winter%202015.ova COMP 2406 Winter 2015.ova] and import.  The SHA1 hash of this file is:


   3c0ad1c89d58b5b9b1225a3a7c876a500e0621a8 COMP 2406.ova
   47849f3c5a4b11e1c701bd95ba4bb8f88062d8ba COMP 2406 Winter 2015.ova


On Windows you can compute this hash for your downloaded file using the command <a href="http://support.microsoft.com/kb/889768"><tt>FCIV -sha1 COMP 2406.ova</tt></a>.  If the hash is different from above, your download has been corrupted.
On Windows you can compute this hash for your downloaded file using the command <a href="http://support.microsoft.com/kb/889768"><tt>FCIV -sha1 COMP 2406 Winter 2015.ova</tt></a>.  If the hash is different from above, your download has been corrupted.


If the application is not VirtualBox, you'll need to:
If the application is not VirtualBox, you'll need to:
* Have the VM platform ignore any errors in the structure of the appliance found during the import process;
* Have the VM platform ignore any errors in the structure of the appliance found during the import process;
* Uninstall the VirtualBox guest additions by typing starting a terminal application and running
* Uninstall the VirtualBox guest additions by typing starting a terminal application and running
   sudo /opt/VBoxGuestAdditions-4.2.16/uninstall.sh
   sudo /opt/VBoxGuestAdditions-*/uninstall.sh
* Install your platform's own Linux guest additions, if available.
* Install your platform's own Linux guest additions, if available.


Line 48: Line 559:
* Install the latest node.js version using [https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager a package manager].  (You generally don't use the version that comes with your distribution, it is probably too old.)
* Install the latest node.js version using [https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager a package manager].  (You generally don't use the version that comes with your distribution, it is probably too old.)
* Install [http://www.mongodb.org/ mongoDB] - it probably goes by mongodb in your package manager.  The version doesn't matter too much.
* Install [http://www.mongodb.org/ mongoDB] - it probably goes by mongodb in your package manager.  The version doesn't matter too much.
* For the same editing experience, install [http://www.geany.org/ Geany] (or just use your favorite editor).


Note that the binary of the node.js executable may be <tt>node</tt>, <tt>nodejs</tt>, or something similar.
Note that the binary of the node.js executable may be <tt>node</tt>, <tt>nodejs</tt>, or something similar.
Line 61: Line 571:
* [[Run MongoDB on Windows]].
* [[Run MongoDB on Windows]].
* If you want to run Emacs on Windows, look at the [[Running Emacs on Windows|following tips]].
* If you want to run Emacs on Windows, look at the [[Running Emacs on Windows|following tips]].
==Other Resources==
===JavaScript===
The easiest way to get started with JavaScript and get basic understanding of web technologies is to go through the interactive lessons on [http://codeacademy.com Code Academy].  I suggest you go through their JavaScript, Web Fundamentals, and jQuery tracks.  They shouldn't take you very long to do given that you already know how to program.
Crockford also has a lot of online resources on JavaScript, including videos of talks he's given that cover much of the content in his book.  Look at his [http://javascript.crockford.com/ JavaScript page] and this [http://yuiblog.com/crockford/ page of his videos].
Another good book is [http://eloquentjavascript.net/ Eloquent JavaScript: A Modern Introduction to Programming] by Marijn Haverbeke.  A version of this book is available online for free.  The for-sale version is apparently updated and edited.
The standard reference for JavaScript is [http://shop.oreilly.com/product/9780596805531.do JavaScript: The Definitive Guide] by David Flanagan.  It is a big book, but it is comprehensive.
===Node===
Another introduction to node.js is [http://www.nodebeginner.org/ The Node Beginner Book] by Manuel Kiessling.
[http://evanhahn.com/understanding-express-js/ This page by Evan Hahn] has a good overview of the express/connect/node software stack.
===Lecture Notes Guidelines===
As specified in the course outline you can get up to 6% extra credit on your final grade (2% per time) for writing up notes from lecture.  Here are the guidelines for those notes.
Lee Croft (LeeCroft at cmail.carleton.ca) will be handling course notes.  Please contact him if you would like to volunteer.  Note that you should email him in advance and he will give you the next available slot.  There are over 200 students in class and only 20 lectures so opportunities may go fast!
Lee or Anil will set you up with an account on this wiki.  You'll enter your initial draft notes here and then work with Lee to make sure they are of sufficient quality.  This may require a few rounds of revisions; however, if you follow the guidelines below it shouldn't be too bad.
You should plan on organizing your notes as follows:
* Organize them in at least the following sections: Topics & Readings, Audio & Video, and Notes.
* The Topics & Readings section lists the main topics covered in the course, e.g. "Scoping rules in JavaScript".  Please use an unordered bulleted list (using *'s in wiki markup).  In this section also list readings relevant to the lecture that were mentioned in class.
* Leave the Audio and Video section blank.  Anil will fill this out.
* Put your notes in the Notes section.
Use (nested) lists if appropriate for the notes; however, please have some text that isn't bulleted.  Please try to make the notes even if you did not attend lecture; however, you don't need to cover every small bit of information that was covered.  In particular the notes do not need to include digressions into topics only tangentially related to the course.  Complete sentences are welcome but not required.

Latest revision as of 21:42, 8 January 2016

Course Outline

Here is the course outline.


Lectures and Exams

Date

Topic

Jan. 5

Lecture 1

Jan. 7

Lecture 2

Jan. 12

Lecture 3

Jan. 14

Lecture 4

Jan. 19

Lecture 5

Jan. 21

Lecture 6

Jan. 26

Lecture 7

Jan. 28

Lecture 8

Feb. 2

Lecture 9

Feb. 4

Lecture 10

Feb. 9

Midterm Review

Feb. 11

Midterm (in class) Solutions

Feb. 23

Lecture 12

Feb. 25

Lecture 13

Mar. 2

Lecture 14

Mar. 4

Lecture 15

Mar. 9

Lecture 16

Mar. 11

Lecture 17

Mar. 16

Lecture 18

Mar. 18

Lecture 19

Mar. 23

Lecture 20

Mar. 25

Lecture 21

Mar. 30

Lecture 22

Apr. 1

Lecture 23

Apr. 6

Lecture 24

April 10, 2-3:30 PM (SC 103)

Exam Review

April 14, 2 PM

Final Exam

Tutorials

Each week you will get a progress grade from 0-4, given to you by a TA. If you are being diligent, you should be able to get 4's every week. The easiest way to get your grade is to come to tutorial and meet with your TA; alternately, you can meet a TA in their office hours or, at their discretion, discuss things with them online.

Date

Tutorials

Jan. 12, 13, 15

Setup VMs, Run node.js, JavaScript basics

Jan. 19, 20, 22

Web Form demo

Jan. 26, 27, 29

Tiny web server

Feb. 2, 3, 5

Notes demo

Feb. 23, 24, 26

MongoDB Introduction

Mar. 2, 3, 5

Persistent Notes

Mar. 9, 10, 12

Single-page Notes App

Mar. 16, 17, 19

Debugging Notes Applications

Mar. 23, 24, 26

The HTTP view

Mar. 30, 31, Apr. 2

TLS notes

Assignments

Due Date

Assignments

Jan. 19

Assignment 1

Jan. 27 (extended)

Assignment 2

Feb. 2

Assignment 3

Feb. 9

Assignment 4

Mar. 2

Assignment 5

Mar. 11 (extended)

Assignment 6

Mar. 18 (extended)

Assignment 7

Mar. 25 (extended)

Assignment 8

Mar. 30

Assignment 9

Apr. 6

Assignment 10

Course Software

In this course we will be developing web applications using node.js and mongoDB. You are welcome to use whatever operating system and development tools you like; however, we will supporting the use of a course virtual machine appliance running Lubuntu, a low-resource variant of Ubuntu Linux distribution.

In the labs

In the SCS labs you should be able to run the course VM by starting Virtualbox (listed in the Applications menu) and selecting the COMP 2406 virtual machine image. After the VM has fully booted up you can login to the student account using the password "tneduts!". This account has administrative privileges; in addition, there is the admin account in case your student account gets corrupted for any reason. The password for it is "nimda!".

We highly recommend running your VM in full-screen mode (select from the menu, not by maximizing the window). Do all of your work inside of the VM; it should be fast enough and you won't have any issues with sharing files or with firewalls/network connectivity.

You can save the work you do from the course VM (in the student account) to your SCS account and restore it to any other copy of the class VM (on your machines or in the labs) by running using the following commands:

 save2406 <SCS username>
 restore2406 <SCS username>
 compare2406 <SCS username>

If you use these commands, use them consistently. That means run restore2406 when you first log in, and run save2406 just before logging out. If you don't do this, you will erase the work that you had done previously when you save.

If you forgot to restore and you want to save, try running this:

  rsync -a -v --progress ~/ <SCS username>@access.scs.carleton.ca:COMP2406/

This is the same as the save2406 command minus the options (--delete and --force) that deletes files in the destination that don't exist in the source. As a check, you may want to add the -n option to do a dry run.

Running the VM on your own machines

If you want to run the VM appliance on your own system (running essentially any desktop operating system you want), just download COMP 2406 Winter 2015.ova and import. The SHA1 hash of this file is:

 47849f3c5a4b11e1c701bd95ba4bb8f88062d8ba  COMP 2406 Winter 2015.ova

On Windows you can compute this hash for your downloaded file using the command <a href="http://support.microsoft.com/kb/889768">FCIV -sha1 COMP 2406 Winter 2015.ova</a>. If the hash is different from above, your download has been corrupted.

If the application is not VirtualBox, you'll need to:

  • Have the VM platform ignore any errors in the structure of the appliance found during the import process;
  • Uninstall the VirtualBox guest additions by typing starting a terminal application and running
  sudo /opt/VBoxGuestAdditions-*/uninstall.sh
  • Install your platform's own Linux guest additions, if available.

Configuring Linux

If you already run Linux and you want to use the same packages we do in class, you should do the following:

  • Install the latest node.js version using a package manager. (You generally don't use the version that comes with your distribution, it is probably too old.)
  • Install mongoDB - it probably goes by mongodb in your package manager. The version doesn't matter too much.

Note that the binary of the node.js executable may be node, nodejs, or something similar.

That's it!

Configuring Windows

It is also possible to do everything in this class in Windows. Here are some tips on getting things running.


Other Resources

JavaScript

The easiest way to get started with JavaScript and get basic understanding of web technologies is to go through the interactive lessons on Code Academy. I suggest you go through their JavaScript, Web Fundamentals, and jQuery tracks. They shouldn't take you very long to do given that you already know how to program.

Crockford also has a lot of online resources on JavaScript, including videos of talks he's given that cover much of the content in his book. Look at his JavaScript page and this page of his videos.

Another good book is Eloquent JavaScript: A Modern Introduction to Programming by Marijn Haverbeke. A version of this book is available online for free. The for-sale version is apparently updated and edited.

The standard reference for JavaScript is JavaScript: The Definitive Guide by David Flanagan. It is a big book, but it is comprehensive.


Node

Another introduction to node.js is The Node Beginner Book by Manuel Kiessling.

This page by Evan Hahn has a good overview of the express/connect/node software stack.


Lecture Notes Guidelines

As specified in the course outline you can get up to 6% extra credit on your final grade (2% per time) for writing up notes from lecture. Here are the guidelines for those notes.

Lee Croft (LeeCroft at cmail.carleton.ca) will be handling course notes. Please contact him if you would like to volunteer. Note that you should email him in advance and he will give you the next available slot. There are over 200 students in class and only 20 lectures so opportunities may go fast!

Lee or Anil will set you up with an account on this wiki. You'll enter your initial draft notes here and then work with Lee to make sure they are of sufficient quality. This may require a few rounds of revisions; however, if you follow the guidelines below it shouldn't be too bad.

You should plan on organizing your notes as follows:

  • Organize them in at least the following sections: Topics & Readings, Audio & Video, and Notes.
  • The Topics & Readings section lists the main topics covered in the course, e.g. "Scoping rules in JavaScript". Please use an unordered bulleted list (using *'s in wiki markup). In this section also list readings relevant to the lecture that were mentioned in class.
  • Leave the Audio and Video section blank. Anil will fill this out.
  • Put your notes in the Notes section.

Use (nested) lists if appropriate for the notes; however, please have some text that isn't bulleted. Please try to make the notes even if you did not attend lecture; however, you don't need to cover every small bit of information that was covered. In particular the notes do not need to include digressions into topics only tangentially related to the course. Complete sentences are welcome but not required.