CP3101B

Note: I am posting summaries of the lectures and labs as well as the examples and notes presented in class. They are necessarily incomplete. The real source of the material is the lectures and labs themselves and the discussion we have together when working through the material. Make sure to take notes. It has been proven that note taking helps you remember better than simply reviewing a video of the material. Even better, do something about the material, for example, run through the examples, ask and answer questions about it yourself (or send them to us). As I said early on, my lectures are not supposed to be text books, they are supposed to take advantage of the fact that we are in a room together, exploring, playing with the real thing, solving problems.

Week 1 Lecture

We covered the role of the browser and server. Covered basic HTML5, including the structure of an empty, valid HTML5 document and what the pieces mean. We also covered many basic elements, including block vs inline rendering of elements, DIV and SPAN. We discussed some aspects of the http protocol and the pieces of a URL, that http is a protocol, usually listened to by servers running on port 80. We briefly demoed the http protocol by telnetting into a server and so explained the pieces of a standard URL. We also explored the difference between relative and absolute links. We even thought about image tags and what this means with respect to a single webpage with images and the number of requests a browser might have to make to servers to render the page.

Week 2 Lab

We covered forms, basic form inputs (text boxes, buttons, submit, reset (in the exercises), combo/list boxes, ...), labels, element id, url encoding and how the server receiving the form understands the form variables (QUERY_STRING and STDIN in CGI). The difference between POST and GET as far as CGI is concerned. We set you up on our server, discussed unix permissions briefly, how the apache server is run under account www-data, and the implications for your files. We discussed how the URL gets translated to a request for a particular file. Finally, you created two webpages, validated them and submitted your work.

Week 2 Lecture

Today we covered php, more than just the basics, as well as a good bit about the http protocol, saw headers and the body, that http is stateless and connectionless, we discussed how to add state with cookies and what cookies are, that they can have lifespans, and that they are returned to the site that created them, within certain URLs (if specified). I demoed telnetting to a web server and issuing http requests. We showed, in a telnet session cookies being set and being sent. Highlights for php, include $_REQUEST and the interaction with URL encoded attribute/value pairs and forms, $_SESSION, $_COOKIE dictionaries, looping, variables, the general role of PHP etc. I demoed all of the details behind how PHP sessions are implemented, including security implications and demoed session hijacking at a low level. I even touched on file locking and serialization of data, both through var_export and via json. We finished with a demo of a script which shares json data between many clients via shared access to a file. We also spoke about the security implications of php scripts running as root, www-data, or the owner of the script that is executing. We are running suphp (the last option) in our server, so this has implications as to where the php sessions are stored.

php, as well as installed examples on our cp3101b-1 server at http://cp3101b-1.comp.nus.edu.sg/~arnold/php. You must be at NUS or connected through the vpn to view this last link.
Cookie and session examples, as well as installed examples on our cp311b-1 server at http://cp3101b-1.comp.nus.edu.sg/~arnold/chttp. You must be at NUS or connected through the vpn to view this last link. In order to try the telnet examples, please launch a terminal on cp3101b-1.
Some additional notes on http and cgi can be found here.

Week 3 Lab

Week 3 Lecture

Week 4 Lab

Do all of the work for this lab in your public_html/LabWeek4 directory and submit it here at the end.

Week 4 Lecture

We coded a small web framework in class. Concepts included Model, View, Controller. The Controller implemented as a Front Controller (so all requests go through that), There were two states to consider, the model state and the application state. The model state was kept in model variables, the application state was kept in a state variable (also in the session). Also, the Controller used a finite state machine to manage the transitions in application state. We covered how to determine if a submitted page was old via the use of a page state token. We also covered pre-filling/refilling form variables.

Assignment 1

You can find it here.

Week 5 Lab

Please complete the code review exercise
Ask questions about assignment 1 (see above).

Week 5 Lecture

Week 6 Lab

Help on the current assignment.

Week 6 Lecture

Introduction to Javascript

Week 7 Lab

Javascript

Week 7 Lecture

AJAX with a little bit of JQuery and JSON

Week 8 Lab

AJAX and JQuery

Week 8 Lecture

Cross Site Scripting (XSS), and all of the examples.
The HTML5 Canvas

Assignment 2

You can find it here.
It has been switched from the sharedThings application. If, by March 17 at the start of your lab, you have already done significant work (up to and including exercise 6) on the sharedThings assignment, please submit what you have as evidence to here and continue working on sharedThings if you wish. Of course, you can switch to the new Assignment 2, instead.

Week 9 Lab

Help on the current assignment.
Preliminary feedback on assignment 1 can be found here. Under the submitters token. I have reviewed the ones that have a mark out of 5 on the top (Opinion: [4/5] for example). Those that do not have a mark out of 5 (Opinion: [/5]) have not been reviewed. The opinion is not the final mark. At present, it looks like the mark for the assignment will be (m-23)/(61-23)*50+50 where m is the number of [YES] in your feedback.txt. You can easily count the number of yes via (under unix, that is cp3101b-1).

Week 9 Lecture

Mobile sensors
todo login, including some advice.

Week 10 Lab

Review of current progress on Assignment 2. Marks for review with either me or Ivan.

Week 10 Lecture

Node.js and WebSockets

Week 11 Lab

A2 Code Review

Week 11 Lecture

Responsive Web Design (Bootstrap)

Assignment 3

You can find it here.

Week 12 Lecture

Scalability

Week 13 Lab

Review (part 1)

Week 13 Lecture

Review (part 2)

Exam Preparation

Please let me know when a good time for exam office hours would be.
Remember, you can bring two double sided A4 cheat sheets to the final exam. You can write or print on these.
here is a collection of my old final exams for a similar course run at the University of Toronto. These are only provided because students in CP3101B asked.
Important note: The final exam will more closely match the review provided above.
The content of the UofT course is not exactly the same as your, much updated, version of the course. It is interesting to note how much the course has changed over the years!