CSC309

Final Exam Preparation

Consider the voting application we used earlier in the term. Re-write this as follows:
1. As a PHP-Postgresql page at a time application. Create a Postgresql schema, add all users to the schema at the very start, so only those previously added can vote. Also, add an authentication page. Users authenticate by putting in their userid and password, checked against your database. Once authenticated, a user has a session with some variables in it indicating the fact that they are logged in. When the user votes, their vote is stored in the database. Additionally, the current vote tally is listed on the page. A user can only contribute one vote, but can change their preference at any time. Use sessions.
2. Connect (to cslinux) using Firefox and developer tools, or a terminal and either nc or telnet and issue appropriate requests to your application. This requires that you really understand the HTTP protocol, cookies, sessions etc.
3. Split the above application into a 3 page application, login, about, and vote. Style the above webpage with some interesting CSS, including adding a tabbed menu, turning the navigation on the left in this to a top tabbed navigation like this, or this. You don't need Javascript for this in a page at a time applications though.
4. Re-write the above application, but this time as a Javascript+JQuery AJAX application with a PHP+Postgresql backend. Write this with a simple restful api. Return a few html status codes.
5. Update this so that it continuously updates with the latest vote results on the vote page. Hint: use a timer. If you added this feature to the PHP-Postgresql page at a time version you could have used a meta tag.
6. Connect using Firefox by supplying the appropriate GET/POST/PUT request. Use the developer tools to change from GET to POST to PUT.
7. Connect using a terminal and either nc or telnet and issue appropriate requests to your restful api. This requires that you really understand the HTTP protocol.
8. Re-write this application as an AJAX application with a node+express backend. As a bonus, add in a mongodb backend, but first try to build this with the vote data just stored in node.
9. Re-write this as a node web sockets application. Now when anyone votes, all users that are tuned into the application will see the current state of the vote. No refresh necessary.
NOTE: To connect to your application via telnet or nc, try connecting on cslinux instead of cs. cs defaults to https, cslinux leaves the conenction as http, unencrypted.

Some notes

The Syllabus
Office hours TBD (Proposal: M 2-3, T 5-6)
Prerequisite waiver forms can be found here, please print and submit to me next week. We drop people from the course in the second week.
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 1 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 telnet/nc 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,
http (including authentication, and cookies) and cgi
Note: on cs, you have access to /var/log/httpd/ssl_error_log

Week 2 Lab

Work on your first php scripts.

Week 3 Lecture

We reviewed 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.

Week 3 Lab

Assignment 1

Week 4 Lecture

Introduction to Javascript

Week 4 Lab

Work on the assignment.

Week 5 Lecture

AJAX, JSON and JQuery

Week 5 Lab

Javascript

Week 6 Lecture

Review of week 5/6 code, including created a better UI for GuessGame in JQuery.
RESTful API
RESTful API with Ajax update

Week 6 Lab

Ajax

Assignment 2

Week 7 Lecture

Week 7 Lab

Week 9 Lecture

Node.js (Web sockets to be covered next week)
We covered...
canvas, HTML5 Mobile API.

Week 9 Lab

canvas

Week 10 Lab

nodeTutorial.zip which covers... node node+express node+express+pug node+express serving static content[B web sockets web sockets with canvas Also take a look at