\n"); $doctype = "XHTML5"; } else { header("Content-type: text/html; charset=utf-8"); $doctype = "HTML5"; } ?> CS-90.3 Assignment 2

CS-90.3 Assignment 2
Due March 8

Reading Assignment

Assignment To Submit

The assignment is to put a form on the index page where users can enter an arbitrary amount of text and, separately, a color. A second page is to display the text the user typed in a square matrix, one character per cell, using the color typed by the user for the background color of the page.

Since this is a pedagogical exercise, how you implement the assignment is just as important as getting the assignment to meet the broad statement above. The goal is not to stifle your creativity, but to guide you into learning best practices for writing code.

When you have finished the assignment, send me an email message, and I’ll check it out on babbage.

  1. Adjust your template for web pages for the course.

    In order to take advantage of Dreamweaver’s syntax checking for PHP code and to cope with the fact that Dreamweaver seems incapable of dealing with PHP files with other extensions, all XHTML files for this course are to have the .php extension instead of .xhtml. Start by renaming your index file from index.xthml to index.php. Since we have our Apache servers to recognize both extensions, this will have no effect on your web site.

    But now Dreamweaver will have problems with the XML declaration at the beginning of the file (<?xml version=...). It looks like invalid PHP code because it starts with <? but is followed by xml instead of php. You will have to use a PHP echo statement to generate it instead of simply including it as a plain line before the DOCTYPE. The beginning of each of your .php files is to look like this:

    <?php header("Content-Type: application/xhtml+xml"); echo "<?xml version='1.0' encoding='utf-8'?>\n"; ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  2. Set up the two web pages for the assignment.

    The first web page is your index page for your course site: put a form on it with a textarea where the user can enter a “message” of arbitrary length, and a text input element where users can type in a “color.”

    Use the GET method for the form so you can see the form data being submitted easily.

    The action attribute for the form is to be a second page, which you are to place in your site’s scripts directory. The name of this second page is arbitrary, but must end with the .php extension. For this assignment, I will refer to it as “the action page.”

    For now, the action page does not have to do much: just display a message so you can verify that the page was activated when you submit the form on the index page.

    Set up a stylesheet named assignment_2.css in your site’s css directory, and link to it from both your index and action pages. Use CSS rules to make both pages “attractive.” Be sure both pages have no errors when you click their XHTML and CSS validation links.

  3. Display the message entered by the user in a square matrix, one character per cell.

    Use the sqrt() and strlen() functions to determine the number of rows (and columns) for the matrix. Put each letter in a separate cell of a table.

    Use CSS to make each cell of the table square. (Easier said than done!)

    Be sure the action page still validates. Be sure the code is robust: the action page has to handle the case where the user goes directly to the page without submitting the form, the case where the user does not type anything into the message box of the form, and the cases where the user types any number of characters of text.

  4. Process colors entered by the user.

    The user may enter a color using hexadecimal notation (#123 or #123456) or by typing any of the CSS3 valid color names given in color_names.txt. Copy the color names file to your web site, and read the lines from it to determine what name the user typed (case insensitive), and the corresponding hexadecimal color value.

    If the user did not type a valid color name, use a default value of white; do not display any error message.

    Generate a style element in the head of the document to set the background color of the entire action page to the color the user specified. Set the color of all text on the page and the borders of the table cells to a color that is clearly visible against the user-supplied background color. (Or against the default white color if the user did not type a valid color.)

    Validate and test your code carefully before submitting it.