\n"); } else { header("Content-type: text/html; charset=utf-8"); } ?> CS-081 Assignment 8

Introduction

This is an open-ended assignment with one required part and a number of optional parts that you can do for extra credit if you have time. The required part is to add a form to your web site, and the optional parts are to work with tables, content images, and server-side scripting.

To give people time to work on the assignment, the due date is not until late in the final exam period.

Reference Material

The Assignment

Required

The required part of this assignment is for you to add a form to the index page of your web site (the home page, not the Blog page). The form is to have three input elements: one of type text, with a label that identifies it as the place to enter a user name (email address); one of type password, with a label that identifies it as the palce to enter a password; one of type submit, with no label.

Enclose all three input elements in a fieldset, and use a legend for the fieldset that says something like, “login here.”

Make the text of the submit button say Login.

Style the navigation links for the home page as a horizontal menu, and style the form so that it looks “good:”

Set the two required attributes of the form to http://babbage.cs.qc.cuny.edu/courses/cs081/echo_form_data.php for the action and GET for the method.

Test the form to be sure it works; when you click the Login button, the green “echo form data” page should come up with information about how you filled in the form.

Be sure the page passes both external validations with no warnings or errors; be sure the link to your blog page still works correctly.

Optional

The Options List gives you some ideas of things you can do to exercise and show off your web-design skills. Each item has a range of point values, which will be added to your grade for the course. So, for example, if your course average is 89 and you pick up one point for doing one of these optional features, your average would go to 90; the difference between a B+ and A-. (On the other hand, if your average is 85, going up to an 86 would not affect your course grade at all.)

This is an unordered list: you may pick and choose among the suggestions; you do not have to go through the list in any particular order.

  • In order to receive credit for any of the items in this list, the email message you send to submit the assignment must state exactly which item(s) you did.
  • You will not receive any points for items that you do but which cause your site to fail validation in any way.
  • Complete and debug one item before proceeding to work on another one. If you start to work on an item and decide to give up on it, take out the code you put in for it so that it doesn’t “break” your site.
  • The maximum number of points you can add to your grade by doing these optional parts is five.

The Options List

  • Add a table (1-2 points)
    Add some tabular information to your site. There are two options for this: add a calendar for the month to the site’s home page, or add a table of information, such as information about something you collect. An example of the latter could have a row for each of several cameras, with columns for name of the cameras, the size of the sensor, etc. Another example would be a list of movies, with colums for the title, date released, main actor(s), your comments, etc. Feel free to be creative about the content, but the table must be properly structured, and styled, using both th for header cells and td for data cells. Use CSS to style the table “nicely.”
  • Add a resumé page(1-3 points)
    Create a web page for your resumé. Include sections for contact information, career objective(s), education, work experience, and whatever else might help you in a job search. Nobody just puts out a plain text resumé anymore, so see if you can come up with ideas that will help make yours stand out without looking garish and while still making basic information, such as the items listed above, easy to find. This is a place to show off your layout, typography, and color/image management skills.
  • Add content pictures (1-2 points)
    This item can be incorporated in any of several places. For example, a picture of you could go on your blog or resumé; pictures of flowers or cameras could be used as illustrations for a floral or photography blog. The point is that these pictures should somehow provide content for the page they are on, not just decoration.

    The article on this topic that I mentioned in class is Neuro Web Design Review: VillageBanking.org.

  • Add decorative pictures (1-2 points)
    Compared to the previous item, this one deals with pictures that simply make your site more interesting or look better. These pictures can be background images or img images, or a mix of both.
  • Provide consistent site navigation (1-2 points)
    This item makes the most sense to work on after you add more pages to your site, such as your resumé and/or a comments page, but you can do it without them if you like. The idea is to use the same unordered list of navigation links on all the pages, containing links to all the pages as well as to the validators, and to explicitly use either the horizontal or vertical menu design from Assignment 6 (without alternate stylesheets) to give the site a consistent look. Note that the link targets will need to be adjusted depending on which page the navigation list is on. A nice feature is to add a class, such as “current-page” to the link to the page the list is on and to use CSS to make that link look different and to have the cursor be the default cursor when the mouse hovers over it instead of letting it change to the hand cursor when the mouse hovers over that link. Type cursor: in a CSS rule to see the options you have for setting the shape of the mouse cursor; we didn’t go over this in class, but it is something you can probably figure out on your own once you know it is possible.
  • Add a registration form. (1-2 points)
    Add a second form on the home page to collect information from people who want to register for your site. This form is in addition to the required form: position it so it makes sense, which probably means that the two forms should appear side–by–side. Use a variety of form elements: checkboxes, radio buttons, selections, etc. to gather a variety of information from the visitor. Possibilities include telephone number(s), addresse(s), preferences (checkboxes/radio buttons), statement(s) (textareas). Use the POST method and http://babbage.cs.qc.cuny.edu/courses/cs081/echo_form_data.php for the action of this form. Use CSS to style the form “nicely.”
  • Add a comments page. (1-2 points)
    At the end of each blog entry, put in a link to a comments page. For this assignment, use the same page for all the blog entries. The comments page should be named comments.xhtml, should be located in the site’s Blog directory, and should be styled so that it has its own title, h1, and navigation list. Put a form on the page where the visitor enters his/her name, email address (assure them that the email address will not be displayed publicly), and a textarea for the comment itself. The submit button should say, “Submit Comment”. Use the POST method and http://babbage.cs.qc.cuny.edu/courses/cs081/echo_form_data.php for the action of this form. Use CSS to style the page “nicely.”
  • Use PHP to write your own action page(s). (1-3 points)
    Create a scripts directory to your site and, using template.xhtml as a starting point, create your own action page for the login form. This page is to provide a customized response for the user, and needs to include the navigation menu for getting to the other pages in the site. There is a separate page to help you with this part of the assignment. Use CSS to style the page “nicely.” If you have multiple forms, each one would get its own action page.

Submit The Assignment

You must check your page using to the W3C validators: there must be no warnings or errors that either of them can detect.

Run a link check on your site before submitting the assignment; fix any errors. (Right click in the Files panel on the right, select Check Links, then select Entire Local Site (keyboard shortcut: Control-F8). Fix any broken links.

Submit the assignment by midnight of the due date:

  1. To submit this assignment, simply send me an email message telling me that your web page is ready for me to look at: I will copy it from Oak to Babbage, and check it out there.

  2. Be sure to put your name in the body of your email message!

  3. The Subject line must be CS-081 Assignment 8 to avoid my spam filters.
  4. Send your email to Christopher.VickeryATqc.cuny.edu. (Fix up the 'AT' part.)

  5. This assignment will not be accepted after the due date. Submit whatever you have finished by then.