Guide to PHP and MySQL (University at Buffalo Version)

Chapter 10: Using PHP and MySQL With HTML Forms

You can use PHP to process the user data from a web form.

A Simple Web Page Form

To send the user data to be processed by a back-end PHP prograam you would use the method="POST" and action="name-of-your-php-program.php" attributes on the <form> tag.

<form id="mySampleForm" method="POST" action="process_form.php"
  <fieldset> 
  <legend>Personal Information<legend> 
  <label for="Name">Name:</label> 
  <input id="Name" name="Name" type="text" 
placeholder="Enter your name"/><br class="clear">
  <label for="State">State:</label>
  <Select id="State" name="State">
   <option value="NY">NY</option>
   <option value="OH">Ohio</option>
  </select><br class="clear">
  <label for="GenderM">Gender:</label>
  <input type="radio" id="Gender" name="Gender" value="Male"/> Male<br class="clear">
  <label for="GenderF"></label>
  <input type="radio" name="Gender" value="Female"/> Female<br class="clear">
  </fieldset> 
  <fieldset> 
  <legend>Interests Information<legend>
  <label for="04aCooking">Interests:</label>
  <input type="checkbox" id="04aCooking" name="Cooking"/> Cooking<br class="clear">
  <label for="04bMovies">:</label>
  <input type="checkbox" id="04bMovies" name="Movies"/> Movies<br class="clear">
  <label for="04cSports">:</label>
  <input type="checkbox" id="04cSports" name="Sports"/> Sports<br class="clear">
  </fieldset> 
  <label for="submit"></label>
  <button id="submit" name="submit" type="submit" value="Do it!"/>Do it!</button><br class="clear">
  </form>

Figure 10-1: HTML <form> Tags

The code above would advise the web browser to render a form like this:

Figure 10-2: HTML Form

PHP Form Data

When the form is filled out and the "Do it!" button is clicked the browser sends the data to the web server where the process_form.php program can access the $_POST[] superglobal array and process the data.

<?php
echo("<b>The \$_POST[] superglobal array contains these elements:</b><br/>\n");
foreach ($_POST as $postElement => $postValue) {
echo("\$_POST[$postElement] = $postValue<br/>\n");
}
?>

Figure 10-3: Process PHP Form $_POST[] Data

So, if I had entered my name, selected "New York" as my state, checked Male for my gender and checked movies and sports the $_POST[] superglobal array would look like this:

The $_POST[] superglobal array contains these elements:
$_POST[Name] = Jim Gerland
$_POST[State] = NY
$_POST[Gender] = Male
$_POST[Movies] = on
$_POST[Sports] = on

Figure 10-4: Process PHP Form $_POST[] Data Output

Task - Create a PHP Form Page That Writes to a MySQL Table

For this task you will create a page, php_mysql_form.php on your local web server using your favorite text editor, notepad++ (Windows) or textWrangler (Mac). This file should be based on your index.php file. This web page should:

Create one (1) table named contactsTable on your local server.
This table would have eleven (11) fields: contactID (INT), contactFrirstName (CHAR, 15), contactLastName (CHAR, 30), contactAddress (CHAR, 30), contactCity (CHAR, 30), contactState (CHAR, 2), contactZipcode (CHAR, 9), contactPhone (CHAR, 10), contactEmail (CHAR, 60), contactComments (LONGTEXT), and contactDate (DATE).
Use HTML5/CSS to create well-design form that collects the necessary information.
Use novalidate on your <form> tag so your form is submitted and the process/validating is done on the PHP back-end.
Use PHP to process the form data:
- Validate each field again (name not empty, zip is 5 or 9 characters, phone is 10 characters, and email is valid syntax: a@b.dom). If something doesn't validate redisplay the form with the data entered, a message to the user, and places the user in the offending field and allows the user to correct and re-submit.
- If the data is valid then use PHP to create MySQL code to insert the data into the contactsTable.
Displays a "Thank You" page (that may include the user's name and email, etc.).
Displays the form again.
Use appropriate PHP comments throughout your code.
Appropriate HTML5, CSS-styled tags that identify this as your web page including your name and a brief paragraph describing how you approached solving this problem.
You should use appropriately identified and styled <div> tags for the various areas of your page layout.
Note: This task can be approached in various ways:
- You could create three (3) pages:
  1. A PHP/HTML/CSS/JavaScript page that displays the form and collects the information and where the action= value of the <form> tag calls a separate PHP page, processform.php.
  2. A PHP that process the form data and then displays "Thank You" page (header('Location: thankyou.html');).
  3. A separate HTML page, thankyou.html, that thanks the user for their input.
- You could create two (2) pages:You could create a single PHP/HTML/CSS/JavaScript page that displays the form and collects the information and where the action= value of the <form> tag calls itself and has PHP code at the top that decides whether the form has been submitted, and if it has:
  1. If the thankyou parameter is TRUE then display the a "Thank You" message (that may include the user's name and email, etc.) and then displays the form to allow the user to submit again.
  2. A PHP/HTML/CSS/JavaScript page that displays the form and collects the information and where the action= value of the <form> tag calls a separate PHP page, processform.php.
  3. A PHP that process the form data and then displays a PHP generated HTML page that thanks the user for their input (that may include the user's name and email, etc.).Processes the form data.
  4. Uses the PHP header function to call itself and passes a ?thankyou=TRUE parameter.
- If it hasn't been submitted and thankyou is not TRUE then simply display the form.
Modify your JavaScript that uses an array of the Assignments for this course to display an ordered list of these assignments to convert the entry for this assignment to a web link that allows me to download and grade your work on my web server.
Use appropriate HTML5, CSS-styled tags that identify this as your web page including your name and a brief paragraph describing how you approached solving this problem.

Once you have tested this page on your local web server, you will upload it to your BSC web space.

You will modify the JavaScript for this item in your index.html page to add a link for this assignment that allows me to view your work.

You *MUST* use the W3C Unicorn Validator to validate your HTML5/CSS3 code.

Let's Get Started with a PHP/MySQL Form Page!