assignments

getting started

• Send me some email telling me that you'll be in the class. Give a brief description of your background. In particular, have you done web pages before? Have you done programming before? Do you know HTML? XHTML? CSS? JavaScript? TSAIJMU?
• Browse through the acronym soup in the left margin of http://www.w3.org/ .
• Check out the specs and/or tutorials at http://www.w3.org/html , and be ready to talk in class about what you do and don't know about HTML and its variations.
• Peruse the resources page and see what you have and haven't heard of. (We aren't doing everything there this semester, so don't panic yet.)

xhtml, css, and perl 101

• Get your tools set up, as described in class and on the resources page :
  • firefox and its plugins
  • a good text editor
  • ssh, scp, and comfort in moving files to your account on cs.marlboro.edu
  • perl, if it isn't installed on your computer already.
• Read about http, html, and css. In addition to the many sources on the resources page, the wikipedia articles on those three topics are reasonable starting points. Make sure you understand what the three are, and how they fit together. Look at some examples; go for the "big picture".
• Create a collection of three web pages in a single folder within your account on cs.marlboro.edu, which (a) link to each other, (b) contain at least one picture, and (c) use some CSS. Make sure that they follow the standards and pass the w3c validator's tests. (Yes, this is a bit open ended; do something that fits your level of experience.)
• Submit to the wiki assignments page the source files (or an archive of them), a screenshot image of one of the pages, and a text file with the HTTP request/response headers for a typical request for one of these pages.
• Write, test, and run a perl program that
  • picks a random number from 1 to 16,
  • repeatedly asks the user to guess a number,
  • reports whether the guessed number is too high or too low,
  • ends when the user guesses correctly and reports how many tries it took.
• Submit the code for the program with the rest of your assignment.
• OPTIONAL: if you've done much of this before, explore how javascript fits into this picture. Put some links or buttons on a page that change its appearance, as on this page.
• Give me some feedback about how hard or easy all this was for you.

CGI 101

• Read about the CGI protocol. A variety of sources exist, including the various books I've mentioned, the links in the resources section, the wikipedia page, and the various stuff that comes up when you google for example "CGI tutorial".
• Test your understanding by answering the following questions.
  • What are the two ways a browser can pass information to a CGI script?
  • What limitations are there on the programming language used for the CGI script?
  • How does the web server know it should run the script?
  • How does the browser send information to the web server when it accesses a CGI script?
  • How is that information encoded?
  • How does the web server send that information to the web script?
  • How does the web script get that information? Does it need to decode it?
• Re-write the "perl guessing game" assignment from week 1 as a CGI script in two different ways: first using nothing but pure perl (no libraries or prepackaged modules), and second using Lincoln Stein's CGI.pm module.
• As always, document and explain your work appropriately, and submit it (or links to it) here.

CGI security

• Read my notes on CGI security and preruse the scripts in that same directory.
• Read about Perl's "taint" mode, for example at
  • Gunther's CGI/Perl Taint FAQ and
• http://search.cpan.org/dist/perl/pod/perlsec.pod .
• Look out in the internet at large for sites that you think have questionable security practices in regards to form submission. Discuss what the problem is, and how it might be fixed.
• Write a CGI script that maintains a contact list of people and phone numbers, stored in a file in any format you wish. The script should allow anyone to add new people to the list, and an authorized user to see the list and delete people from it.

CGI project

• As the first of your graded term projects, create a CGI script that does something interesting - your choice as to what. It should be comprensible, clear, and well documented. Cite clearly any code and sources that are not your own. Your script should illustrate your understanding of many (not necessarily all) of the ideas we've been talking about, including
  • form data submission
  • state preservation
  • secure practices
  • xhtml, css, and w3 validation
• If you have any questions, ask.

SQL

• Read through the links I've put in on the resources page (left menu, eh?) and in the class notes, and/or the book(s) I've left on the shelf to get a basic understanding of relational databases and SQL.
• Define each of these and give an example, including some SQL code where possible.
  • primary key
  • secondary key
  • inner join
  • outer join
  • ERD
  • transaction
  • select statement
• The AWF (Acme Widget Factory) makes many types of widgets, which are purchased by people online and by phone. Design a database that stores the information about these purchases, including who bought what when. By "design" I mean make it clear what the tables are, what the columns are, and what are the relations between them. A picture (ascii art or whatever) would be good. The details of what exactly to include are up to you, but it should be able to answer questions like these :
  • What is the first name of the person who bought the "red sprongle" on Dec 7 2006?
  • What else did he buy in that order, and how much did he spend?
  • How many "blue fritzes" were sold on that day?
• Create SQL code for the table above, including
  • statements to create the data
  • some statements to put some sample data into the table
  • some statements to query the database for information similar the questions given above.

PHP practice

• Write a PHP application to play a simple interactive game.
  • This is a "coding practice" assignment, both to give some experience with PHP and to encourage you to think about style issues.
  • Keep it simple.
  • It can be a board game (e.g. reversi, peg solitaire), a dice game (e.g. craps), a word game (e.g. hangman or crossword), or whatever.
  • You don't need to program in particularly intelligent computer player behavior.
  • You do need an interactive application. (I suggest PHP's $_SESSION .)
  • Do write something which is clean and follows good conventions :
    • documentation: readme, file headers, function API's
      • including a description of how to use it as well as sample output and/or screenshots
    • separate the PHP from the HTML
    • separate the PHP from the data (i.e. minimize embedded constants)
    • give functions (or object classes) clean API's (input/output interfaces)
    • Don't repeat yourself. Instead, loop or define a function or a variable.
    • Put CSS styles in their own file.
    • Make sure your HTML passes W3C validation.
• Wherever you develop it (XAMPP is fine), it should run on cs. (Please do test it, eh?)
• When you submit this, upload an archive (project.tar.gz) of the whole thing as an attachment.

progress on CRUD project

• Show what you've done for the project due next week. (See below.)
• You should have at least a start, including a design, a database, and the start of the PHP architecture.
• Be prepared to display your current version in class, and also submit at least a link here.

CRUD project

• The second graded work this semester.
• Put together a create-read-update-delete web database application which includes
  • a realistic xhtml+css design. (I recommend you adapt an existing open source design)
  • multiple pages with navigation links between 'em, all with a common look and clear "where am I" indication
  • a SQLite or MySQL database with at least two links tables
  • a PHP object class to encapsulate the interface to the SQL data
  • forms to display and modify the tables
  • PHP code to connect it all together and make it work
  • a reasonably clean separation of model-view-controller
• You're free to pick the subject. Reasonable choices include a library (books, authors) or a store (items, orders, buyers), or a blog (posts, users, tags).
• As always, clear descriptions and docs matter.
• Please submit a link to the working application at cs:8080 and an archive of the whole thing.

CMS exploration

• Pick any one of the CMS systems we've been discussing: drupal, joomla!, wordpress, or something similar to explore.
• Either install it on your machine (e.g. with XAMPP) or use one of the ones on cs.
• Explore some of the guts of the system, at least as an admin trying to customize some of it's behavior.
• Discuss what you did, what was easy, what was hard, and show some evidence of putting some time in learning about these beasts.

JavaScript 101

• programming language syntax of javascript, and the DOM model of HTML pages.
• Write three javascript programs, each on it's own web page, as described below. If you adapt anyone else's code, credit them clearly and show what's theirs and what's yours. The point here is to practice the language, so just cut-n-paste with their code is not enough.
  • Create a web page that displays (a) a "lucky number", (b) a randomly chosen picture, and (c) a randomly chosen quote each time it's loaded. We've done things like this before in other languages, so this is a chance to see different it is to implement in javascript.
  • Create a variation of the last page, in which (a) the "luck number" is updated each time the user clicks on a button, (b) a number of tiny images are shown, and the last one moused-over is shown larger, somewhere else, and (c) allow the user to type a word, and then display a quote (if any) that contains that word.
  • Finally, create a web page that shows a table of 'web colors', as described at http://en.wikipedia.org/wiki/Web_colors . The names are not required, and you don't need to show every color - just something along those lines, perhaps with some user interactivity.
• In all cases, you're free to put the javascript (and/or css) into one file or several ... but please do put all files into one folder for each part. These should validate cleanly.
• If some parts of this are too hard, do as much as you can. If it's all too easy ... then do something harder, eh?
• Is your code "unobtrusive" javascript? What does it do if the browser has javascript turned off; does it fail "nicely"?

JavaScript webpage

• This is your last graded assignment.
• Create a webpage that uses JavaScript and CSS to do something dynamic, illustrating your knowledge of how xhtml+javascript+css fit together. It doesn't have to be too elaborate, but should have something that changes in response to something the user does.
• Your page should validate correctly.
• You may use a framework such as jQuery, Prototype, or Mootools; if so, you need to do more than one of the simple tutorial examples, and show me that you understand how to use it and what's going on. As always, be sure to give credit for any external libraries that you use, making it clear what is your work and what isn't.
• You may if you wish include a connection to a CGI script or PHP backend, for example a form submission with validation or AJAX setup. Neither of these is required.
• As always, include enough documentation to make it clear how to use your page, and enough internal comments (and/or an API) to make it clear how it works.
• Submit all the files (html, css, javascript, images, ...) in an archive as well as a link to a working page.
• Brownie points for clean failure when JavaScript is turned off, unobtrusive JavaScript, and clear, tasteful design.

course grade

• ... will be recorded here.