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

CS-081 Assignment 7

Reading Assignments

This assignment is based on the Forms section of Chapter 3 of the textbook (pages 51-59), plus material covered in class on PHP.

Coding Assignment

The assignment is quite simple to state: create two web pages, one of which uses a form to collect some data from the user, and another which displays that data when the user submits the form.

  1. Set up your site for the assignment.

    Create a new directory in your site named scripts, and add two web pages, both based on the HTML5 template we are using for all web pages in this course, to your site. Name the first web page login.xhtml, and put it in your site’s document root (the My Website directory). Name the second web page process_login.xhtml, and put it in your new scripts directory.

    Add a link from your index page to login.xhtml. The link should say, “Login Here,” and it should go right below the link to Assignment 6 ... assuming you set up Assignment 6 correctly.

    Make the title and h1 elements of login.xhtml say something clever, like “Login Here,” and add a form element that has scripts/process_login.xhtml as the value of the action attribute, and get as the value of the method attribute. Add either a button or an input with a type attribute of “submit.”

    Make the title and h1 elements of process_login.xhtml say something clever, like "Login Data."

    At this point, your new web pages are ugly (no CSS yet) and will not validate (you aren’t supposed to put input elements inside a form without some sort of containing element). But you should be able to navigate from your site’s index page to your login page, and you should be able to get your Login Data page by submitting the form. Don’t proceed until you get this part set up and working properly

  2. Create an “interesting” form.

    Use at least the following elements to create a valid input form:

    • Use a fieldset to hold all the input elements in the form: needed so that the web page will validate.
    • Use a legend for your fieldset.
    • Use a label for each of the input elements below.
    • text for the user’s name.
    • password
    • Three or more checkboxes
    • Two or more radio buttons
    • Any addtional elements your think would make the form “interesting,” possibly including addtional elements of any of the above types, or others, such as select not explicitly listed above

    Make sure the login page now passes HTML5 validation and that the submit button still takes you to the Form Data page.

  3. Style your form.

    Make your form look good: use color, borders, margins, padding, and positioning to make the form clear and easy to read. Make sure the input elements line up well with their corresponding label elements and with each other. Note: labels for checkboxes and radio buttons should be to the right of the boxes and buttons; labels for input and password elements should be to the left of or above the text boxes that the user types into.

    Validate the CSS for the form page.

  4. Write PHP code to display the form data the user enters.

    To do this part of the assignment, you need to know only the minimal amount of PHP covered in class. In case your notes are not accurate, here is a piece of PHP code that will display the user’s name in a paragraph, assuming the name attribute of the input element is “username:”

    <h1>Hello, <?php echo $_GET['username']; ?>, thank you for logging in. </h1>

    Use whatever HTML elements you want for the Form Data page. A table with two columns and a row for each form datum would be appropriate, but is not required.

    If you have time, style your Form Data page nicely. But whether you have time for that or not, be sure both the HTML5 and the CSS for the Form Data page validate.

    Oh, and don’t forget to make sure the data entered on the form page are all displayed correctly by the Form Data page!

Submit the Assignment

When your page is ready for me to review, send an email message to Christopher.Vickery@qc.cuny.edu with CS‑081 Assignment 7 as the Subject line. All you have to do is to put your name in the body of the message so that I know who sent the message. I will then copy your website from your profile on the server (oak) in the lab to the web server on babbage, where I will verify that it works correctly.