Syllabus review. How web software compares to traditional software.

• The Other Road Ahead
• It's Not Software

Explanation of the Hypertext Transfer Protocol. Difference between GET and POST. Interactive examples.

• Hypertext Transfer Protocol (Wikipedia)
• Methods GET and POST - what's the difference?

• List of HTTP status codes
• List of HTTP header fields
• HTTP Cats

More details about HTTP. Basic web request handling. Setting up and using your class server account.

• Basic access authentication (Wikipedia)
• In-class diagram: TCP
• In-class diagram: Request (Internet)
• In-class diagram: Request (Server)
• Account Creation

Introduction to HTML pages. What tags look like, what a simple document looks like, what HTML is and is not for.

• Sitepoint HTML Reference
• In-class example pages
• HTML5 Validator

Intro to Cascading Style Sheets. What CSS is used for (as opposed to HTML), basic CSS syntax, selectors, a few properties.

• Sitepoint CSS Reference
• In-class example pages
• W3C CSS Validation Service

Float layouts, absolute/relative/fixed positioning, other various CSS features.

First steps towards interacting with your users. Basic form elements, validation via HTML5, general principles when using forms.

• In-class example pages
• Form element reference (sitepoint)
• New form features: HTML5
• CSS for forms (scroll to "FORM(s) and Function")

A quick overview of JavaScript as a language. Strings, objects, arrays, functions, dynamic typing, etc.

• A re-introduction to JavaScript
• MDN JavaScript Reference

• JavaScript: The World's Most Misunderstood Programming Language
• JavaScript: The Good Parts
• JSLint (code quality tool)

The document object and some of the interfaces it provides.

• Gecko DOM Reference
• DOM element (properties and methods)
• Event Attribute List

The window object and more DOM things. innerHTML, textContent, etc. Debugging JS.

• window (MDN Reference)
• createElement (MDN)
• innerHTML (MDN)
• Firebug

• Become a JavaScript Console Power-User

How a server-side language like PHP fits into the web application stack. Code examples.

• In-class examples

Crash course in PHP. Types, variables, arrays, control structures.

• PHP Language Reference (See "Basic Syntax", "Types", "Variables [Basics], Operators, Control Structures [especially foreach]")
• In-class examples

• Problem, Boole? (Loose comparison with ==)

URL's. GET and POST data in PHP.

• URL Syntax (Wikipedia)
• PHP Superglobals (See $_GET and $_POST)
• In-class URL diagram
• In-class POST diagram
• In-class examples

Sessions. How they work conceptually, how to start and use them in PHP.

• session_start (PHP Documentation)
• $_SESSION (PHP Documentation)

What relational databases are, basics on how to design them.

• Example database from class

Syntax for CREATE TABLE, INSERT, SELECT

• CREATE TABLE syntax (MySQL Reference)
• DROP TABLE syntax (MySQL Reference)
• SHOW TABLES syntax (MySQL Reference)
• DESCRIBE syntax (MySQL Reference)
• SELECT syntax (MySQL Reference)
• INSERT syntax (MySQL Reference)
• Terminal transcript from class (From a terminal, run wget -q -O - http://qxlp.net/cs337/lectures/uploads/sql.log)

PDO for interfacing with MySQL from PHP. How to put together a web application. Example app: blog.

• PDO: Constructor (PHP Reference)
• PDO: prepare (PHP Reference)
• PDO: execute (PHP Reference)
• PDO: fetch (PHP Reference)
• In-class examples (blog*)

UPDATE, DELETE FROM, COUNT(), and GROUP BY in MySQL. Example app: bookmarking site.

• UPDATE syntax (MySQL Reference)
• DELETE syntax (MySQL Reference)
• Counting rows (COUNT and GROUP BY) (MySQL Reference)
• In-class examples (bk*)

How to allow users to upload files to your site (think enctype="multipart/form-data") and how to handle uploaded files with PHP (remember the $_FILES array). Basic precautions to take when working with arbitrary files from users.

• Handling file uploads (PHP Reference)
• In-class examples (editor*)

How to communicate to the server using JavaScript and the XMLHttpRequest object.

• In-class request diagram
• Using XMLHTTPRequest (MDN Reference)
• In-class examples (intro*, updated to show code that was demonstrated in Firebug's console)

Using XMLHttpRequest to get information from PHP. Encoding with JSON.

• In-class examples (editor*)
• json_encode (PHP Reference)
• Evaluating JSON

Thoughts on splitting up server/client functionality. Using window.history to create more seamless user experience.

• In-class examples (blog*)
• Manipulating the browser history (MDN Reference)

What common JS libraries are used for. Introductory jQuery and History.js.

• jQuery
• jQuery Documentation (See Selectors, Attributes, CSS, Ajax)
• History.js
• In-class examples (blog*, dom.html)

Review of AJAX. How to build an AJAX application piece-by-piece. An assortment of JavaScript libraries and plugins.

• AJAX sequence diagram
• In-class examples (ac*)
• Date.js
• MathJax
• jQuery UI
• Fancybox (Requires jQuery)
• d3

Web security and why it is important. General concerns and approaches. How to store passwords using salting and hashing.

• Security diagram (lecture)
• In-class examples (hash.php)
• hash function (PHP Documentation, use sha256)

• Cryptographic hash function (Wikipedia)

Demonstration of SQL injections. How to prevent them and how to mitigate attack danger through smart user permissions.

• In-class "workbook" (Notes added)
• GRANT syntax (MySQL Reference)
• UNION syntax (MySQL Reference)

• SQL Injection Attacks and Defense (Justin Clarke, Amazon)

Review of how to handle file uploads. Upload concerns, whitelisting over blacklisting as a concept (and using regular expressions to handle it), MIME types and MIME type inference by some browsers.

• Secure Coding Guidelines (File Uploads)
• preg_match (PHP Reference)
• In-class examples (upload_*, functionality disabled)

How to make AJAX requests across domains using the Access-Control-Allow-Origin and Access-Control-Allow-Credentials headers with the XMLHttpRequest.withCredentials flag. How cross-domain requests can be forged and how those forgeries can be detected using canaries.

• In-class diagram showing CORS
• In-class code for CORS (cors_*, not fully functional, just code snippets)
• In-class code for how to prevent CSRF (csrf_*: chat not fully functional, just code snippets)
• HTTP access control (MDN Reference -- how to do legitimate cross-domain requests in your application)
• Cross-Site Request Forgeries (Mitre CWE)
• Cross-site request forgery (Wikipedia)
• Secure Coding Guidelines (Preventing CSRF)

• Advanced Web Attack Techniques using GMail (How Gmail leaked contacts (a sort of CSRF))
• How to upload arbitrary file contents cross-domain

What cross-site scripting is, how to protect against it. Examples of both non-persistent and persistent vulnerabilities.

• Cross-Site Scripting (OWASP)
• XSS Prevention Cheat Sheet (OWASP)
• In-class CSRF diagram
• In-class XSS diagram
• In-class examples (xss*)

• XSS Cheat Sheet
• /r/xss (reddit)

Other ways to prevent or mitigate XSS attacks (hosting on other domains, browser XSS auditing). Case studies of high-profile web security failures and subsequent attacks. Brief demonstration of clicjacking.

• Clickjacking (OWASP)
• In-class examples (clickjacking*)
• MySpace Worm Explanation
• Osama Facebook Worm
• Hacking Google for Fun and Profit

How SSL/TLS is used to secure communication channels between your computer and a website. Basic principles of public key cryptography.

• SSL/TLS (Wikipedia)
• Public key certificate (Wikipedia)
• HTTP Secure (Wikipedia)
• OSI Model (Wikipedia)
• Public-key cryptography (Wikipedia)
• How to generate a self-signed certificate

• Everything you need to know about cryptography in 1 hour

How hostnames are resolved to IP addresses. How to set up a web site (registrar, hosting). Comparison of hosting types.

• Domain Name System (Wikipedia)
• Comparison of Hosting Types

Apache: a few features and some of its limitations. Thinking about handling HTTP requests more abstractly and discussion of other web servers that encourage that approach.

• In-class example server code

• Node.js (Server framework for JavaScript)
• Tornado Web Server (Server framework for Python)
• nginx (Other useful HTTP server, fast/light)

Avoiding redundant polling, first with long-polling and then with AJAX.

• WebSockets (MDN)
• Long-polling examples (Comet)
• WebSockets examples

Drag and drop in web applications. Dropping files and reading them in the browser.

• Drag and Drop (MDN)
• In-class examples (drag*)

Storing data long-term in the browser. Why it's useful, how to do it.

• DOM Storage (MDN)
• In-class examples (todo*, client_storage)

How to separate display logic from application logic using templating systems. Brief overview of Smarty, briefer overview of Underscore.js templates.

• In-class examples (see chat.php, alone.js, and the templates folder)
• Smarty Crash Course
• Underscore.js (template method)

What goes on under the hood in JavaScript. Function-level scoping, call and apply, closures, objects, and prototypical inheritance.

• JavaScript Scoping and Hoisting
• Understanding JavaScript OOP

• JavaScript: The Good Parts
• Understanding delete

HTTP caching, CDNs, memcached.

• Caching tutorial
• Memcached (PHP)

• Nginx: Caching Proxy
• REDbot (HTTP debugging)

Degradable AJAX. How to detect mobile browsers, how to style pages differently based on browser size and/or device size.

• The Hows and Whys of Degradable AJAX
• CSS Media Queries
• Responsive Web Design
• In-class examples (query.html)

• History of the browser user-agent string
• 1140 CSS Grid

Brief mention of other database solutions for specific purposes such as Cassandra, Solr/Lucene. Detail on how to write more efficient queries and how to use indexes in MySQL to speed queries up.

• Apache Cassandra
• Apache Solr
• MyISAM vs InnoDB (StackOverflow)
• MySQL Server Logs (MySQL Reference)
• How MySQL Uses Indexes (MySQL Reference)
• EXPLAIN Syntax (MySQL Reference)

• MySQL Performance Blog

contentEditable, geolocation, video/audio, semantic markup, microdata

• HTML5 demo: geolocation
• Microdata: getting started
• Semantic markup
• CSS Transitions (MDN)