University of Washington, CSE 190 M, Spring 2007
Homework Assignment 7: Online Dating

due Tuesday, May 22, 2007, 11:59pm electronically

This assignment asks you to use HTML forms and PHP. You will write the following pages:


expected output expected output


Online dating has become mainstream with popular sites such as eHarmony, match.com, OkCupid, and Plenty of Fish. Your task for this assignment is to write the HTML and PHP code for a fictional online dating web site called NerdLuv.com. The site will consist of two pages: a front page called dating.html that contains a form for a user to apply, and a result page called dating_server.php that displays single people who match well with the applicant.

You do not need to submit any .js file, since by default this assignment needs no client-side scripting. Turn in the following files:

Part of your grade will come from posting your program to exactly the following URL:

https://students.washington.edu/your_UWnetID/cse190m/homework/7/dating.html

Signup Page Appearance:

The images referred to in this document exist in the following folder:

http://www.cs.washington.edu/education/courses/cse190m/CurrentQtr/homework/7-online_dating/images/

The dating.html page begins with the NerdLuv logo image, stored in nerdluv.png on the course web site. The text "where meek geeks meet" appears under the image. 2em below this text is an HTML form with the following elements:

1em below this is a Sign Up button that, when pressed, submits the form to your dating_server.php script for processing. This button has a background color of FFAAAA, and its text is bold and 1.5 times as large as normal text on the page. (See the 14-forms slides about styling form elements with CSS attribute selectors.) Use a POST request to submit your form.

The overall set of form fields is 30em wide and has a background color of E0E0FF and a 1px black border. The field set has an overall label of About Me: with a white background and a 1px black border. The default font for all text on the page is 12pt in Century Gothic, Arial, or any sans-serif font available on the system. 1em of vertical spacing separates adjacent controls on the form.

Both pages have a title of NerdLuv.com. Both pages have a "favorites icon" of heart.gif, which is located on the course web site. At the bottom right of both pages is the standard pair of W3C validator buttons.

Results Page Appearance:

The dating_server.php receives input from dating.html and should output an HTML page. The page begins with the same nerdluv.png banner image and slogan.

2em below the banner slogan should be a level 1 heading saying "APPLICANT NAME's Matches" where APPLICANT NAME is the name of the person who just submitted the form. Below this is a list of singles that "match" the applicant. A "match" is a single with the following qualities:

Each matching single should have have his/her name displayed on a line 30em wide with a background color of E0E0FF. 1em below this is an image of the single, shown with a width of 150px. 1em to the right of this image is text about the single, including what he/she is seeking, the personality type, OS, and strength of match (explained below). There is 3em of vertical spacing below the image for each match.

If there are no matches, the behavior is up to you. You can show the same page is shown but without any matches visible, or you can show a "No matches found" message.

Screenshots in this document are from Windows XP in Firefox 2.0, which may differ from your system.

Data:

Your dating_server.php page reads its data about singles from a file named singles.txt, which is placed in the same folder as the script itself. This file contains data records in the following format:

Marty Stepp,M,F,ISTJ,Windows
Ada Lovelace,F,M,ISTJ,Linux
Donald Knuth,M,MF,INTJ,BSD

Each time the script is run, it should read this file's contents to find the singles that match the applicant based on the above criteria. The applicant's submitted data doesn't need to be added to this file; the file is only read and does not need to be modified (unless you do an extra feature described later). See the 15-php slides about reading files and matching/splitting strings using regular expressions.

The image for each single is stored in a file in the images subfolder relative to the PHP script. The image for a single is a file with the .jpg extension whose name is equal to the person's name in lowercase with all non-alphabetic characters converted into underscores. For example, the image for Deanna Troi is stored in deanna_troi.jpg .

Hints and Suggestions:

Write your HTML/CSS code first and your PHP last. Test your HTML by submitting it to http://faculty.washington.edu/stepp/params.php .

Extra Features / Creativity Aspect:

To encourage you to be creative on this assignment, we will award you +1 free late day (up to a maximum of +2) for each of the following possible additions to your page. You are not required to do any of these.

Regardless of how many additions you choose to implement, your main program behavior and appearance should still work as specified. You also may not submit the assignment more than 3 days past its due date.

Submission and Grading:

Submit your assignment online from the turnin area of the course web site. You don't need to ZIP it. For reference, our solution has 92 unique lines of HTML and a 56-line PHP block.

Your HTML and CSS files should be W3C valid and have comment headers. Your CSS code should avoid redundancy as much as possible. Stylistic information should be placed into CSS and not into HTML.

Your PHP code should follow reasonable stylistic guidelines similar to those you would follow on a CSE 14x programming assignment. In particular, you should minimize redundancy, follow proper procedural decomposition, correctly use indentation and spacing, and place a comment header at the top of your file and atop every function explaining that function's behavior. You should only use material that has been discussed through the lecture on which this program was assigned, unless given explicit permission from the instructor.

Please do not place a solution to this assignment online on a publicly accessible (un-passworded) web site.

Except where otherwise noted, the contents of this presentation are © Copyright 2007 Marty Stepp and are licensed under the Creative Commons Attribution 2.5 License.

Valid XHTML 1.0 Strict Valid CSS!