Webpage exercise

This activity is about making a simple multi-page “online dating” site that processes HTML forms with PHP. Online
dating has become mainstream with popular sites such as eHarmony, Match.com, OkCupid, Chemistry, and Plenty of
Fish. Your task for this activity is to write HTML and PHP code for a fictional online dating site for desperate single
geeks, called NerdLuv. Turn in the following files:
• signup.php, a page with a form that the user can use to sign up for a new account
• confirm.php, the page that receives data submitted by signup.php and signs up the new user
• matches.php, a page with a form for existing users to log in and check their dating matches
• results.php, the page that receives data submitted by matces.php and show’s the user’s matches
• common.php (optional), a php file containing common code !
There are some provided files on the web site. The first is a complete version of the site’s front page, index.php. This
front page simply links to your other pages. The other complete provided files are top.html and bottom.html, which
contain common header/footer HTML code that you should include in your other pages.
Index Page (index.php) and Overall Site Navigation:

The provided index.php page has a header logo, links to signup.php and
matches.php, and footer notes/images. You do not need to modify this file, but
you should put it in the same folder with your other files and upload it to Web
server (wamp) with your files. The “Sign Up” link leads to signup.php (left
below), and “Check matches” to matches.php (right below):

The details about each page’s contents and behavior are described on the following pages.
Sign-Up Page (signup.php):
The signup.php page has a header logo, a form to create a new account, and footer notes/images. You must write the
HTML code for the form. The form should contain the following labeled fields:

• Name: A16-character box for the user to type a name.
• Gender: Radio buttons for the user to select a gender of Male or Female. When the user clicks the text next to a
radio button, that button should become checked. Initially Female is checked.
• Age: A6-letter-wide text input box for the user to type his/her age in years. The box should allow typing up to 2
• Personality type: A 6-character-wide text box allowing the user to type a Keirsey personality type, such as ISTJ or
ENFP. The box should let the user type up to 4 characters.
• Favorite OS: A drop-down select box allowing the user to select a favorite operating system. The choices are
Windows, Mac OS X, and Linux. Initially “Windows” is selected.
• Seeking age: Two 6-character-wide text boxes for the user to specify the range of acceptable ages of partners. The
box should allow the user to type up to 2 characters in each box. Initially both are empty and have placeholder text of
“min” and “max” respectively. When the user starts typing, this placeholder text disappears.
• Sign Up: When pressed, submits the form for processing as described below.
Submitting the Sign-Up Form (confirm.php):
When the user presses “Sign Up,” the form should submit its data as a POST to confirm.php. (The exact names and
values of the query parameter(s) are up to you.) your PHP code should read the data from the query parameters and
store it as described below. The resulting page has the usual header and footer and text, thanking the user. The text
“log in to see your matches” links to matches.php.

Your confirm.php code should create a line representing the new user’s information and add it to the end of the file.
See the PHP file_put_contents function in book the lecture slides of the last term.

In all pages, assume valid data for the file’s contents and form submissions. For example, no fields will be left blank or
contain illegal characters (such as a comma). No user will resubmit data for a name already in the system.

View Matches Page (matches.php):
The matches.php page has a header logo, a form to log in and view the user’s matches, and footer notes/images. You
must write the HTML for the form. The form has one field:

• Name: A label and 16-letter box for the user to type a name. Initially empty. Submit to the server as a query
parameter name.
When the user presses “View My Matches,” the form submits its data as a GET request to results.php. The name of the
query parameter sent should be name, and its value should be the encoded text typed by the user. For example, when
the user views matches for Rosie O Donnell, the URL should be:
• results.php?name=Rosie+O+Donnell

Viewing Matches (results.php):
When viewing matches for a given user, results.php should show a central area displaying each match. Write PHP code
that reads the name from the page’s name query parameter and finds which other singles match the given user. The
existing singles to match against are records found in the file singles.txt as described previously. You may assume that
the name parameter is passed and will be found in the file.
Below the banner should be a heading of “Matches for (name)”. Below this is a list of singles that match the user. A
“match” is a person with all of the following qualities:

• The opposite gender of the given user;
• Of compatible ages; that is, each person is between his/her age +/- 5 years, inclusive;
• Has the same favorite operating system as this user;
• Shares at least one personality type letter in common at the same index in each string. For example, ISTP and ESFP
have 2 in common (S, P).
As you find each match, output the HTML to display the matches, in the order they were originally found in the file.
Each match has the image user.jpg below, the person’s name, and an unordered list with their gender, age, personality
type, and OS.
In results.php, the matches are displayed in a div with class of match. First is a paragraph containing an image of the
match, shown with a width of 150px, and the person’s name to the right. The paragraph has a light blue background
color. The section with the match’s gender, age, etc. must be represented as an unordered list (ul).
print_r($_GET); or $_POST
to see the query parameters submitted. Use Chrome Dev
Tools and also View Source to find HTML output problems.
Recall that form controls must have name
attributes. Sometimes you must also add a value
to affect how data is sent.

Calculate the price
Make an order in advance and get the best price
Pages (550 words)
*Price with a welcome 15% discount applied.
Pro tip: If you want to save more money and pay the lowest price, you need to set a more extended deadline.
We know how difficult it is to be a student these days. That's why our prices are one of the most affordable on the market, and there are no hidden fees.

Instead, we offer bonuses, discounts, and free services to make your experience outstanding.
How it works
Receive a 100% original paper that will pass Turnitin from a top essay writing service
step 1
Upload your instructions
Fill out the order form and provide paper details. You can even attach screenshots or add additional instructions later. If something is not clear or missing, the writer will contact you for clarification.
Pro service tips
How to get the most out of your experience with StudyAcademia.com
One writer throughout the entire course
If you like the writer, you can hire them again. Just copy & paste their ID on the order form ("Preferred Writer's ID" field). This way, your vocabulary will be uniform, and the writer will be aware of your needs.
The same paper from different writers
You can order essay or any other work from two different writers to choose the best one or give another version to a friend. This can be done through the add-on "Same paper from another writer."
Copy of sources used by the writer
Our college essay writers work with ScienceDirect and other databases. They can send you articles or materials used in PDF or through screenshots. Just tick the "Copy of sources" field on the order form.
See why 20k+ students have chosen us as their sole writing assistance provider
Check out the latest reviews and opinions submitted by real customers worldwide and make an informed decision.
Customer reviews in total
Current satisfaction rate
3 pages
Average paper length
Customers referred by a friend
15% OFF your first order
Use a coupon FIRST15 and enjoy expert help with any task at the most affordable price.
Claim my 15% OFF Order in Chat