assignments

getting started

• Describe your previous programming and internet experience.
• As a programming warmup, write a program that translates text into pig latin. All the details (language, interface, complexity, ...) are up to you. Submit your code and enough documentation, tests, and/or screenshots for us to understand what you did and to see that it works.
• As an internet warmup, create a static web page on a topic of your choice using html5 and css. It should include at least one image and at least link. You can deploy it anywhere you like, including just as attached files in your work submission.
• Finally, give us some feedback. Were those two tasks hard? Easy? Fun?

HTTPD, GET, POST, cookies, and all that

• Read
  • wikipedia: Hypertext Transfer Protocol. Browse the related topics on that page and make sure you understand at least GET, POST, and cookies.
  • wikipedia: Form (web)
  • wikipedia: Percent-encoding
• HTTP is called a "stateless protocol". What does that mean exactly, and what implications does it have for authentication and sessions (i.e. visting several pages on the same site in sequence)?
• Use the Chrome browser's Developer mode, or FireFox with a tool like Tamper Data to see the HTTP headers (and the cookies they contain) for web page request to a site that you can log into (such as our course webpage), both before and after you've logged in. What exactly is the difference? Be specific about what data is stored where, and how authentication takes place and the session is maintained.
• Try to use "telnet host 80" as described in class and provide the authentication yourself.
• Likewise, read the man pages for either 'curl' or 'wget' and see how they let you see or set HTTP headers and/or cookies. Can you fetch a webpage using one of those tools from a site that requires authentication?
• Construct a web page with two forms, one that uses POST and one that uses GET. Again using a tool to look at the HTTP headers and data passed (accessing that page from a telnet terminal, or Chrome's Developer tool, for example), watch exactly how the form data is encapsulated in the request in the two cases. (Next week we'll write a CGI server script to read that data.) Make sure you understand exactly what's going on - which program is sending what information how - and give a brief explanation.
• Optional: install Wireshark, and use it to see and study the individual packets of a browser requesting a webpage. Can you interpret the TCP/IP addresses and MAC address of the machines involved? What other types of packets do you see besides HTTP? (This will take a bit of googling to decipher.)

CGI scripts, cookies, and authentication

• Take a look at http://en.wikipedia.org/wiki/HTTP_cookie to firm up your understanding of cookies.
• Read up on CGI programming in the language you'd like to work on. For python, two good places to start are
  • cgi overview at python.org
  • Guido's python language and cgi slideshow and summary
• Write a cgi based dynamic page in the language of your choice that uses web forms to create a login. Track the session with a cookie, and include content that is only visible when a user is logged in.
• Write a cgi based dynamic page that does something interesting. All the details are left up to you - choose something appropriate for you level of experience. For example, you could implement a game, create a simple conversation forum or rudimentary wiki page, create a dynamically generating images using a graphics library like PyPng - whatever. As always, document and explain your choices and your work clearly.

CGI again ; start javascript

• Study the example of CGI that I put together at http://cs.marlboro.edu/code/python/session_demo/ .
  • The pieces include (outputting HTTP headers (including cookies), outputting HTML, reading the cookie, reading form data, working with strings, working with files, managing lists and data structures). Review the class notes and examples and talk to us to get the point where (cookies, forms, dynamic HTML, HTTP headers) and all that is making some sense.
• Write another CGI script that does some of what my example does, either in python (using your own code to accomplish those goals, not mine), or in javascript with node.js.
  • If node, you'll have to look at its documentation to see how to work with strings, files, and environment variables. (We may get to some of that in class.)
• Start playing around with the JavaScript language and the DOM. I'm going to leave this open ended - read any of the sources we've pointed you towards, use the development tools in the browser, and write something analogous to a program you've written before in another language.
• Make sure that you use at least (functions, objects, strings) in your code.
• Discuss what is making sense to you, and what isn't.

JavaScript

• Read about JavaScript at Mozilla Developer Network
• Look at Jim's 2006 js examples
• Look at Sam's color-picker example and describe in your own words what it does and how. Be as specific as you can. Try making some improvements to it. What would it look like using JQuery?
• Make a dynamic page that does something interesting using the DOM. You may use JQuery or not. For example make something that moves/changes color/font etc. when you click/mouseover it.
• Describe what you would like to do for the midterm project due on the 9th. You project should involve either client-side Javascript or server-side CGI scripting or both.

midterm projects

• Create a midterm web project of your choice, using what we've done so far and demonstrating your mastery of it.
• It should be a dynamic web site using either server side cgi, client side javascript, or both.
• Your submission should include
  • the source code itself, including appropriate docs, comments, and APIs
  • a URL where it can be seen in action
  • a brief writeup explaining what you did, what it's supposed to do, what was easy and what wasn't, and discussing the technologies involved. Screenshots and/or video is a plus. Include a bibliography of your sources.
• Your grade will be based on the following evaluation categories :
  • concept : the idea itself, including its difficulty and planning
  • mastery : how well your understanding of the course material is shown
  • code style : how sophisticated and language appropriate is the source code?
  • completeness : how well it works, how polished and error-free is it
  • support : README overview, api docs, implementation comments, tests, sample output, bibliography of online and offline materials used, version history, ...
• Questions? Ask.

hendricks

• Read about relational databases and SQL
• Catch up on any outstanding work
• No written homework due this week.

relational databases

• Finish reading about SQL syntax and databases. (See the sources on the resources for some starting places.)
• Practice your SQL chops with the databases and exercises at http://en.wikibooks.org/wiki/SQL_Exercises .
  • Look at three databases: "warehouse", "pieces and providers", and "planet express".
  • For the first two, browse the exercises, trying least three from each. (Warning: there will be more than one 'correct' answer.)
  • Using sqlite, load at least one of these databases and test your answers explicitly.
  • Invent at least three similar exercises for the planet express database, and again test explicitly with sqlite.
• Coming: a related SqlAlchemy task.

ORM

• Your first mission is to explore several database technologies : Planet Express database example Sam's sqlalchemy tables example, Jim's sqlsoup example, pure sql, and (maybe) Sam's elixir example.
  • Get that database setup (csmarlboro.edu is likely the easiest) if you haven't already, and make sure you can manipulate it at the sqlite3 command prompt.
  • Answer these questions and modify the database as requested using a variety of the approaches. Describe which one you liked, didn't like, and why.
    • Who receieved a 1.5kg pckage?
    • What is the total weight of all his sent packages?
    • Which pilots handled that stuff?
    • Add to the database a 100.3kg package sent by Ray Bradbury to Leo Wong, the day after Leo's last got something. Of course Ray choose the person with the most experience to handle the delivery.
• Describe the difference between a generic web application and one that follows the REST (Representational state transfer) methodology. Can you give an example of a RESTful website?

PHP

• Read about PHP and start exploring it. The Oct 30 notes have Sam's examples and links to docs.
• Look into MySQL a bit. (It is commonly used with PHP.)
• Write a tiny database-ish web app of your choice.
  • First pass: include a form to show some data and allow the visitor to type in some new values.
  • Second pass: hook this to a database (MySQL or Sqlite, your choice) and have it view and modify that data.
• Install someone else's PHP, get it to work, and poke around to see what it's doing. WordPress, for example. Google "php open source projects" or "php sourceforge" or "php github". Or check out github/PHP/most_watched.
• Discuss your experience.

Flask 101

• Propose at least two different possible final projects, each along the lines an app that shows and edits a data model, i.e. a library (books, authors, publishers, users, lending), or a registrar's system (courses, students, faculty) or a music collection (albums, artists, songs)
• Install, read about, and start exploring git; see the Nov 8 notes for links.
• Get a github account, and tell Jim what it is so he can add you to github.com/MarlboroCollegeComputerScience
• Start reading through the material http://flask.pocoo.org/ .
• Create a small flask web app on csmarlboro similar to the Tutorial or something else in the docs (be clear about what it's based on). Submit a link to it, and be ready to discuss it with the class next week.

progress report

• Submit a description of your final project progress.

rough draft

• Submit a rough draft of as much of your final project as you can, to get feedback from us.

class presentations

• Come to the last class ready to show your work.

final project

• Submit your final project
• a "web-framework" set of pages implementing a web front-end to a database
• same grading rubric as midterm project
• same component requirements as midterm:
  • the source code itself, including appropriate docs, comments, and APIs
  • a URL where it can be seen in action
  • a brief writeup explaining what you did, what it's supposed to do, what was easy and what wasn't, and discussing the technologies involved.
  • Screenshots and/or video is a plus.
  • Include a bibliography of your sources.

course grade

• a place for Jim to give overall feedback