COS 318: Web Programming

Notes

• Exam 1 will be take-home. I will give it on Monday, Oct. 12 and it will be due Friday, Oct. 16 in class.
• Free software that I use or recommend.
  • IDEs:
    • Eclipse Development Environment.
    • NetBeans.
    • NTEmacs for Windows. (This is the one I use most of the time.)
      Emacs help.
    • GNUEmacs for Un*x (comes with Mac OS X, Linux and most other Un*x).
  • DB Server: MySQL.
  • Server-side programming language: PHP.
  • WAMP: I'm now using WampServer. I used to use XAMPP and liked it. I will probably be experimenting with PAMPA-J this semester and might require you to use it for turning in some projects.
  • Altova XML. You'll probably need this to do some of the homework.
  • Find Caps2Ctrl at System Internals.
  • Selector Gadget Bookmarklet
  • Firefox plugins:
    • For some ideas, look here: Web Developer's Toolbox
    • Web Developer
    • Firebug
    • Live HTTP Headers
    • HTML Validator
    • Stylish
    • I use several others, too. Explore and tell me what you like.
• References and Tutorials:
  • HTML
    • The W3C's HTML 5
      • and just the markup.
      • Web workers
      • Web storage
      • Web sockets
      • Server-sent events
    • The WHATWG's HTML 5.
  • CSS
    • The official definition is actually quite readable. (Look ahead at CSS 3. Some browsers support parts of this already.)
    • CSS Tutorial
    • SitePoint's CSS Reference
    • Another CSS Tutorial
    • And Another CSS Tutorial
  • JavaScript
    • Reference and its updates.
    • Guide.
    • Coding standards are basically the same as for Java.
  • DOM
    • Mozilla's DOM Reference.
  • XML
    • XQuery
    • XPath
• Tools:
  • Inserting characters into web pages.
  • HTML validator.
  • A CSS validator or two.
  • RSS validator
  • Altova XML command line tool for validating XML and processing XSLT and XQuery. To validate:

    > AltovaXML /validate filename [-dtd filename | -schema filename]

    To apply transform:

    > AltovaXML /xslt2 transform.xsl /in source.xml /out target.html

    or for XQuery:

    > AltovaXML -xquery xqueryfile -in inputXMLfile -out outputfile

  • On Mac or Unix, there is a command line validator called xmllint.
    It's installed on shell.mathcs.bethel.edu and also on Mac OS X by default.
  • xsv: XML Schema validator.
    • command-line version.
    • web version (for published documents).
• Contacting me: When you contact me by email, please include the following information in the email:
  • Your full name.
  • The class you are in.
  • Lots of details about the problem you are having. For example, if you are having trouble with assignment 9, don't say "the assignment" or "the last assignment", instead, say "assignment 9".
  Also remember that you should use your Bethel email account to do your Bethel business. Your work email is for work, your school email is for school, and your personal email is for personal stuff. This is especially important when you communicate with your professors because it is illegal for professors to share your academic information with any email address but your Bethel email address.
  I want to help you. The object of your email should be to make it easy for me to do that.
• Allowed references: Here is a description of the sources that you are allowed to use in your homework and projects.
  • Other students: You are allowed to talk to other students about the ideas. When you get an idea from another student, be sure to acknowledge it. You are not allowed to look at another's code or let another look at your code.
  • Text book: You are allowed to get ideas from the textbooks for this course without acknowledgement.
  • Instructor: You are allowed to use code that I write in class or post to the web site for this course. Use of this should be acknowledged. However, ideas you get from my lectures don't have to be acknowledged.
  • Other sources: You may use other sources to get ideas only with specific approval from me on a case-by-case basis. This means don't download code from IBM or any other site unless we have discussed it.

Homework

All reading is required unless marked "Optional" or "Recommended".

• Due Dec. 11:
  • Bonus Assignment 15: CakePHP Edit
• Due Nov. 20:
  • Web (DOM) Storage
    • Be aware of the spec.
    • Safari's reference
    • Mozilla's reference and a brief intro
  • HTML 5's SQL and other storage on the client side
    • Be aware of the Offline Web Applications working group note. Mozilla has a guide to its implementation.
  • Persevere is a related technology that focuses on JSON Here is its home.
• Due Nov. 18:
  • SSL and HTTPS.
    • Be aware of OpenSSL. There is a fair bit of documentation here and, of course, downloads.
    • Apache's mod_SSL (this site is for Apache 1.3) and its latest documentation (for Apache 2).
    • Self-signed certificates using OpenSSL and mod_SSL (for Apache 2). (Here and here are more detailed instructions for the OpenSSL part. Some of the information on these sites is for Apache 1.3.)
  • Assignment 28: Amazon Web Services
• Due Nov. 16:
  • Web Workers:
    • Web Workers: threads in JavaScript.
• Due Nov. 13:
  • HTML 5 Drag and Drop:
    • Mozilla's explanation
• Due Nov. 11:
  • JavaScript Libraries or Frameworks [Optional topic]:
    • Google's API loader
    • jQuery and jQuery Reference. jQuery intros by Simon Willison and Jesse Skinner
    • Ext JS and an introduction at IBM
    • Scriptaculous
    • Dojo
    • MooTools
    • Prototype
    • Base2
    • Underscore
• Due Nov. 9:
  • More Security in REST:
    • [Optionally] watch Security and REST Web Services
    • Read how Amazon does it.
  • Assignment 27: Yahoo Weather
• Due Nov. 6:
  • REST and Password Security
    • CHAP-based Secure logon without HTTPS, Part II, and Part III. Also, be sure to read the comments. This is kind of an old-fashioned way of doing things but I think there is value in looking at his code. We'll study HMAC and SSL later.
    • HMAC
      • in PHP. Read this additional help.
      • in JavaScript and another. Read a discussion and a tutorial of sorts.
  • Apache's mod_rewrite for REST request APIs and other goodness [Optional topic]:
    • Intros by Neil Crosby
    • Ross Shannon
    • Cor
  • Assignment 26: More E4X
• Due Nov. 4:
  • Template Engines: [Optional topic]
    • What is a template engine? We won't use one in this class.
    • Smarty is possibly the best template engine for PHP.
    • While more than a template engine, the Zend Framework is worth being aware of.
  • JavaScript Minification: [Recommended topic]
    • YUI Compressor.
    • Dean Edwards' Packer
    • Doug Crockford's Minifier
  • Assignment 24: E4X
  • Assignment 25: Parsing and generating XML with PHP
• Due Nov. 2:
  • PHP dates:
    • Read Chapter 26 Working with Dates and Times from Core
  • JavaScript Modules: [Recommended topic]
    • JavaScript Modules are motivated by the fact that global variables are evil. Yahoo's description and a good, more recent article, and the two articles to which it refers.
  • Assignment 23: XQuery
• Due Oct. 30:
  • Dealing with XML in PHP:
    • Read about Event-based (SAX) and Tree-based (DOM) XML handling
    • Read pp. 497 - 510 from Core and [recommended] the rest of Chapter 23 XML and XHTML
    • The XML Parser built into PHP.
    • Another option is SimpleXML which has an xpath method
    • [Optionally] check out applying XSLT in PHP
• Due Oct. 28:
  • Styling, transforming, and querying XML with XSLT:
    • Read parts of the XSLT Tutorial. The English explanations here are terrible but the examples are so fantastic that you can learn everything by studying them. Read the English to get a sense of what to watch for but study the examples closely. The basic stuff is covered on Pages 1 through 14, 17 through 23, 26, 27, 58, and 59. The rest is optional.
    • [Optionally] read the W3Schools' XSLT Tutorial which has better English but not as good examples.
    • [Optionally] read articles comparing XSLT and XQuery: XQuery—Reinventing the Wheel? and Comparing XSLT and XQuery.
  • Dealing with XML in JavaScript:
    • The easy way: using [Optional reading] E4X
      • Read Mozilla's E4X Tutorial (don't miss the link to the next section at the bottom of each page) and Guide
      • [Optionally] read JavaScript on steroids
      • Read about how to get an XML object out of an XmlHttpRequest
    • [Optional reading:] The hard way is compatible with older browsers.
    • Parts of the old way are still applicable. The basic methods for handling DOM nodes that you read about in JavaScript Bible (e.g. appendChild) are used on XML nodes as well.
    • [Optionally] review those methods at W3Schools:
      • Methods
      • Accessing Nodes
      • Node Information
      • Node List
      • Traversing
      • Navigating
    • [Optionally] read about changes necessary for using JavaScript within a pure XHTML document (aka "why we the world is not ready to have XHTML documents served as XML")
    • [Optionally] read about Using Mozilla JavaScript interface to XSLT
    • [Optionally] read how to process XSLT in JavaScript
    • [Optionally] read Flanagan's article covering XSLT and XPath in JavaScript
  • Assignment 22: XML Schema
• Due Oct. 26:
  • XPath:
    • Read this XPath tutorial (updated) and [optionally] its JavaScript implementation
    • Read the XPath part of this XSLT tutorial.
  • Styling, transforming, and querying XML with XQuery:
    • Read the XQuery Tutorial (both basic and advanced sections)
  • Assignment 20: JSON
  • Assignment 21: XML DTD
• Due Oct. 23:
  • Web Services with SOAP and REST:
    • Read Chapter 27 XML Web Services and SOAP from Core and [optionally] web services
    • Read Learn REST (skip the parts about languages that we don't cover in this course). [Optionally] these two articles are mostly overlap but they are shorter and worth being aware of.
    • [Optionally] read about WSDL: (Primer and Core), another good intro, WADL, and UDDI
  • Examples of Web Services for later reference:
    • Amazon (Simple Storage Service (S3), Associates (E-Commerce))
    • Google (Blogger, Search, Maps, Picasa, Calendar)
    • Yahoo (Basic and Advanced Guides for PHP, Flickr, Music, Pipes, Weather, Traffic, Travel, Upcoming, Shopping, RSS, Shopping Research, Jobs)
    • National Weather Service
    • Geonames
    • Geocoder
  • Assignment 18: Ajax online quiz
  • Assignment 19: PHP File Upload
• Due Oct. 21:
  • RSS: an example XML format:
    • RSS Tutorial
    • Some RSS feed providers
      • BBC
      • CBC
      • Reuters
      • Slashdot
      • ZDNet
      • Google Blog
      • New York Times
• Due Oct. 19:
  • Introductory material on XML:
    • Read the XML Basic tutorial at W3Schools. Follow the links until you get to the "XML Parser" subsection within the "XML JavaScript" section. You don't need to read that one or any more after that.
      Note: this includes information about how to style XML files using CSS.
      Note: Read the XML Basic sections only. Don't read on into XML JavaScript, etc. since that is referring to an old way of doing things.
    • Read about XML Namespaces
    • Read about CDATA
    • Read about DTDs
    • [Optionally] read more about XML Namespaces
    • Read about Encoding
  • XML Schema:
    • Read the Schema tutorial (and all the links within that tutorial)
    • [Optionally] read advice useful when you are defining your own XML format
    • [Optionally] read this opposing point of view.
    • The W3School's [Optional reading] Schema Elements Reference is especially helpful.
    • W3 has a good [Optional reading] tutorial on schema as well.
    • [Optional reading] Understanding Complex Types may be helpful.
    • [Optional reading] Decision tree is also quite useful.
• Due Oct. 16
  • Exam 1 takehome due
  • PHP files:
    • Scan Chapter 24 Files and Directories from Core
  • PHP uploading:
    • Read Chapter 25 File Uploading from Core
  • Assignment 17: Regular Expressions
• Due Oct. 14:
  • JSON: JavaScript Object Notation:
    • Read the official definition
    • Read a biased but good comparison of JSON and XML and another.
    • Read about using it in JavaScript
    • Read Yahoo's guide to JSON
    • Read about the built-in PHP functions for handling JSON
    • [Optionally] read more criticism of XML
    • [Optionally] read about JSON and Browser Security
    • [Optionally] read about the proposed JSONRequest
  • PHP errors and exceptions:
    • Read Chapter 18 Error Handling and Debugging from Core.
  • PHP output buffering:
    • Read Chapter 21 Advanced Output and Output Buffering from Core
  • Assignment 16: PHP Form Security
• Due Oct. 12:
  • Ajax: bringing it all together:
    • Read Ajax: Getting Started
    • Read about what changes when you want to use POST. By the way, you can combine both POST and GET in one request: open a POST connection and send some parameters in the URL and some in the POST body.
    • Read about PHP's input stream for getting at the raw POST data. If you use then, then you don't have to use the "key1=value1&key2=value2" format.
    • [Optionally] read Chapter 27, Ajax and XML, from JavaScript Bible
    • [Optionally] read a cool serverside (PHP) technique for sending data to the client then continuing to work
    • [Optionally] check out these Ajax busy icons
  • Assignment 14: Quiz with Sessions
• Due Oct. 7:
  • Regular Expressions in JavaScript:
    • Read pp. BC239 - BC253 in Bonus Chapter 42 The Regular Expression and RegExp Objects from the CD of JavaScript Bible. Familiarize yourself with the organization of pp. BC254 - BC260.
    • [Optionally] read Bonus Chapter 43 Data-Entry Validation from the CD of JavaScript Bible
  • PHP validation using regular expressions:
    • Read Chapter 22 Data Validation with Regular Expressions from Core
  • Assignment 13: Online poll with DB and a solution to steal ideas from.
• Due Oct. 5:
  • PHP user authentication:
    • Read Chapter 20 User Authentication from Core
  • Assignment 12: CakePHP View
• Due Oct. 2:
  • PHP cookies and sessions:
    • Read Chapter 19 Cookies and Sessions from Core
  • PHP security:
    • Read Chapter 16 Securing Your Web Applications: Planning and Code Security from Core.
    • Read PHP Security Briefing
    • Read PHP Security
    • Be aware of the Data Filtering package and the built-in character type checking
    • [Recommended] read: another good article on PHP security.
  • Assignment 11: CakePHP Scaffolding
• Due Sept. 30:
  • HTTP and related technologies:
    • Read pp. 273 - 283 from Chapter 13 Web Applications and the Internet from Core
    • Read the interesting parts of these articles about HTTP, its methods, and its response codes, and MIME encoding. Many of the parts of these articles that are not interesting now will be interesting to you later so hang on to these links.
  • Database access from PHP:
    • Chapters 9 Designing and Creating Your Database and 10 Using Databases: Storing and Retrieving Data from Core contain more than you need to know about SQL. Use those chapters as needed for reference.
    • Read Chapter 12 PHP and Data Access in Core
  • Assignment 9: PHP Form
  • Assignment 10: Hidden Fields
• Due Sept. 25:
  • CakePHP basics:
    • Read my installation guide for CakePHP
    • Read Chapters 1 and 2 of the CakePHP Manual
  • CakePHP development:
    • Read Sections 3.5, 3.6, 3.7.1, 3.7.3.1, 3.7.3.3, 3.7.3.4, 3.7.3.9, 3.7.4, 3.7.3.9, 3.7.4 (but not its subsections), 3.7.5, 3.7.6 (but only the first subsection), 3.7.9, 3.8 (but only the first subsection), 3.10 (but only the first subsection), and 10.1 of the CakePHP Manual
  • Assignment 8: PHP arrays
• Due Sept. 23:
  • PHP arrays:
    • Read Chapter 5 Working with Arrays from Core
  • PHP strings:
    • Read Chapter 6 Strings and Characters of the World from Core
  • Forms in PHP:
    • Read Chapter 7 Interacting with the Server: Forms from Core
  • phpMyAdmin demo... can't find a good link. I'll do it myself in class.
  • Assignment 7: PHP with the CLI
• Due Sept. 21:
  • PHP functions and include:
    • Read Chapter 3 Code Organization and Reuse from Core
  • PHP classes:
    • Read Chapter 4 Object-Oriented Programming from Core
  • Assignment 6: DHTML
• Due Sept. 18:
  • PHP basics:
    • Read the Introduction and Chapters 1 Getting Started with PHP and 2 The PHP Language from Core
    • Read about the command-line interface to PHP. In order to run PHP scripts from the command line, as we will be doing in some assignments, you need to add to your PATH the directory containing the PHP executable.
  • Assignment 5: JavaScript DOM and Events
• Due Sept. 16:
  • Unobtrusive JavaScript
    • Read about unobtrusive JavaScript
    • Read the JavaScript Manifesto
  • Assignment 4: JavaScript
• Due Sept. 14:
  • More DOM and Events:
    • Familiarize yourself with the organization of Chapters 15, 18 - 24, and the Section "window Object" from Chapter 16 from the DOM reference chapters of JavaScript Bible
    • Read pp. 739 - 741, 748 - 755, 757 - 762, 788, 789 and familiarize yourself with the organization of pp. 789 - 809 from Chapter 25, Event Objects from JavaScript Bible
    • [Optionally] look at this drag and drop example from WebReference.
  • DHTML:
    • Read pp. 811, 812, 828 - 832 and the Section "Reading Style Properties" on p. 813 from Chapter 26, Style Sheet and Style Objects. Familiarize yourself with the organization of pp. 833 - 854 from JavaScript Bible
    • Read Bonus Chapter 40, Positioned Objects from JavaScript Bible
    • Read about clearInterval, clearTimeout, setInterval, and setTimeout from Chapter 16, Window and Frame Objects from JavaScript Bible. Be sure to look at the example code in the book. [Optionally] John Resig has an interesting post on this topic
  • Assignment 3: Pizza Form
• Due Sept. 11:
  • More JavaScript language:
    • Read Chapters 8 Window and Document Objects and 9 Forms and Form Elements from JavaScript Bible
    • Read all of Chapter 34, Functions and Custom Objects in JavaScript Bible
    • Read about the Global Functions and Statements on pp. 1062 - 1072 excluding watch and unwatch in JavaScript Bible
    • [Optionally] read about closures in JavaScript
  • DOM and Events:
    • Read pp. 163 - 168 and pp. 175 - 191 in Chapter 14, Document Object Model Essentials from JavaScript Bible
  • Assignment 2: Movie List
• Due Sept. 9:
  • HTML-related topics you probably didn't learn about in COS 100:
    • Semantic HTML vs. presentational HTML. Semantic CSS class names and again. [Optionally] read more on this topic.
    • Read about block vs. inline elements.
    • Read about character encodings (including why we need PHP 6). Here is the W3 info. [Optionally] read more only if you are really interested in this stuff. Unicode Charts
    • [Optionally] read about form layout.
  • JavaScript language:
    • Read pp. 883 - 888 and familiarize yourself with the organization of pp. 886 - 912 of Chapter 28, The String Object from JavaScript Bible
    • Familiarize yourself with the organization of Chapters 29 and 30, The Math, Number, and Boolean Objects and The Date Object from JavaScript Bible
    • Read Section "Simulating a Hash Table" from Chapter 31 and Familiarize yourself with the organization of the Array methods on pp. 955 - 968 from JavaScript Bible
    • Read Sections "Looping through Properties (for-in)" and "The switch statement" from Chapter 32 Control Structures and Exception Handling from JavaScript Bible
    • Read Sections "Comparison Operators", "Equality of Disparate Data Types", "Object Operators", and "Miscellaneous Operators" from Chapter 33, JavaScript Operators from JavaScript Bible
    • [Optionally] read about for-each-in and forEach (which is a Mozilla extention of the standard)
    • [Optionally] read about Mozilla's new array functions and how to use them in other browsers
  • Assignment 1: Publishing on mathcs.
• Due Sept. 4:
  • CSS: Unless otherwise stated, there is no need to follow links from any of these pages unless you are interested in going deeper.
    • Intro
    • Linking. We will try to use only the first method: the link tag.
    • Syntax
    • Rule Sets
    • Selectors
    • Declarations, Properties, and Values and all of its subsections!
    • Selector Reference including all of its subsections excluding those that are CSS3-specific.
  • More about CSS:
    • Box Model
    • Containing Block
    • Formatting Concepts and all of its subsections.
    • Positioning and all of its subsections except "Stacking Contexts" and "Floating and Clearing".
    • [Optionally] read this article which kind of summarizes the previous two.
    • Read WebReference article on simulating frames in CSS.
    • [Optionally] read about how to do things with CSS that you thought were only possible with JavaScript.
    • [Optionally] read more of that tutorial on an as-needed bases throughout the semester. You might particularly become interested in fonts and alignment, colors and backgrounds, the cursor, and fun with layouts. The W3 Schools CSS tutorial is also very nice.

Projects

• Due at midnight the morning of Sept. 24: Project 1.
• Due at midnight the morning of Oct. 22: Project 2.
• Due at midnight the morning of Nov. 9: Project 3.
• Due at midnight the morning of Nov. 24: Project 4.
• Due at Noon Dec. 15: Final Project. Rules: you may all work together. You may form teams of size up to four and have your team turn in a single project. But you are welcome to communicate with people on other teams. In other words, you may all work in the same room together and chat about things but I want to have a submission from each team. Ask me if you are unclear about this.

Example Code

• Demo of HTML 5 drag-and-drop (requires Firefox 3.5 or higher). Also look at the JavaScript and CSS files.
• Simple demo of Web Workers.
• Demo of Web Workers (with HTML 5 Drag and Drop).