Web Site from Scratch

In portfolio 1, you created a few linked web pages. In this assignment you will go a step farther with a group project to gain experience with the inner workings of the world-wide web by actually creating a simple fully functional web site from the ground up.

Assignment

Your group will create a "complete" web site using only a text-editor and (possibly) development tools such as an IDE, image manipulation or AV tools. You are expressly forbidden to use any program that generates HTML for you. You will need to create content for your site in the form of HTML documents as well as an HTTP server to deliver your content to client browsers. Your site should be viewable from any browser on the network.

Content Requirements

The content of your site must meet two general requirements:

1. It must have a unifying theme. You are not just developing a set of pages, but a site that serves some purpose. I suggest that your group try to come up with an idea for either an informational or commerce-oriented site. You could make up a consulting or retail business or invent a new rock band
2. It must be in good taste. Use the "What if my mother sees it?" test.

Here are some specific guidelines.

• Your site should be at least two levels deep. That is, it should consist of a home page that links to another level of pages.
• Your site must consist of at least five pages. Each page should provide about one "screenfull" of content. More is better within reason. I would rather have you develop 5 nice pages than 15 sloppy ones. Anything more than a dozen is overkill for this assignment.
• Your site must have at least one javascript "application" that supports the site. For example, a bank site might have a simple loan amortization table generator or, more simply, a investment future value calculator. Of course, you should write the application.
• Your site should also have at least one form that a visitor fills out (for example, to join a mailing list, or order some merchandise); your server does not have to process the form (although it certainly could). We'll worry about this later...
• You site should have a consistent look and feel with some sort of navigation panel.You should use CSS to format the presentation details of the site.
• No iframes.
• You should validate every page. Make sure to include the DOCTYPE declaration at the top of each page.
• Your site must include some images. If you use images off of the web, you need to be careful that you have gained any necessary permissions.

Server Requirements

The only hard and fast requirement for your server is that it must be sufficient to robustly deliver the contents of your site. Do not get hung up in trying to develop a complete HTTP server. Think of your server as a "tiny site-specific HTTP engine." Put in only the functionality your site requires.

Request Types

Your server will only need to respond to GET requests. You should write it to accept and send HTTP/1.1. Thus, the requests will generally have this form:GET <path> HTTP/1.1

Requests will also contain HTTP header elements. Your server should read these, but will not have to do anything in particular with them.

File Types

Your server will have to send proper content-type headers for any file on your site that it delivers. Some subset of the following mime-types should probably suffice.

• text/html
• text/plain
• image/gif
• image/jpeg
• image/png
• application/x-unknown

Server Responses

Your server should be able to get by with some subset of the following responses codes.

• 200 OK
• 400 Bad Request Format
• 403 Forbidden
• 404 File not Found
• 500 Server Error
• 501 Feature not Implemented

Handling Errors

Your server should not crash! You should be able to gracefully deal with any request that is sent, even if you cannot fulfill it. When you send an error code back to the client, you should also send an HTML formatted error message that explains what went wrong.

Put lots of debug code in your server to help diagnose it. Disable the debugging only after you have the site up and running.

Hints and Ideas

I suggest that you develop your web site using Emacs or another HTML/CSS/Javascript aware editor such as Atom. Emacs has an HTML mode that provides a number of useful features including hot-keys for common HTML codes and an "auto-view" mode that automatically opens the file in a browser every time the file is saved. This allows to you immediately view the pages you are developing.

Your server might detect file types according to the location of a file or by its extension. You might want to check out the functions in the Python os.path module. Specifically, look at the documentation for split, splitext, isfile and isdir.

You may also want to check out the programs that are available for images and AV file manipulation in the UCL. GIMP is a full-featured photo editor ala Adobe Photoshop. There is also gwenview for viewing, converting, and cropping images as well as programs from drawing and painting your own images.

You should be careful that your server does not allow unwanted snooping around your files. It should only deliver the content of your web site. Beware of "sneaky" clients that try to climb the file hierarchy using ".." or "/". The server will run with your user permissions, and, without restraints, it will therefore gladly serve up any file that you have access to.

Keep it simple, and have fun!