You will create your first server-side scripting pages in this lab. The purpose of this exercise is to (a) get you familiar with $_POST, and (b) require you to implement an if-else control structure. Utilize the exercise 6 form in order to create the following. You will create a PHP, named index.php, that contains the form below. You will also create a PHP, named formPost.php, that grabs the information from index.php and echoes/prints it to the browser. It is recommended that you use Macromedia Dreamweaver to create these pages. For "index.php", you will create a feedback form that conforms to the following (same as Exercise 06):

What you are creating:

• Image of empty form, just loaded in the browser: example 1
• Image of formPost.php after clicking submit on an empty form: example 2
• Image of formPost.php when the form is partially filled out: example 3
• Image showing invalid zip code: example 4
• Image showing invalid email: example 5
• Image of formPost.php when the form is correctly filled out: example 6

Create the form page (index.php):

1. This assignment is case sensitive. Be mindful of what you type.
2. Copy your Exercise 06 and rename it "index.php" for this lab.
3. Copy your Exercise 16 that has JavaScript validation in it and rename it "index_JS.php" for this lab. Make sure to also copy your CSS and JS files from Exercise 16 as well.
4. As said above, this page will be named index.php (and index_JS.php), but it will only contain XHTML. There will not actually be any PHP code in index.php or in index_JS.php
5. Make sure your Exercises 06 and 16 are complete and functioning correctly before beginning this exercise.
6. Process for creating these PHPs:
   • Write a little bit.
   • Save your work.
   • Upload it to your Purdue web space.
   • Test it.
   • Repeat this process
7. You CANNOT run these pages from anywhere other than a web server. You MUST save them to your www folder, then navigate to them in the browser similar to this: http://web.ics.purdue.edu/~yourCareerAcct/cgt141/ec19/index.php
   • You CANNOT have any spaces in your file names or folder names.
   • You CANNOT have any special characters in your file names or folder names.
8. Make sure every form tag has an id and a name attribute - You will be using the the id and/or name of each tag for PHP validation and form data retrieval. Again, this assignment is case sensitive, be mindful of how you typed the id and name attributes or it will not work.
9. Make sure the textarea has _nothing_ between the opening and closing tags: <textarea .... ></textarea>
10. You should set the action attribute of the form tag equal to "formPost.php"
11. You should use post as the method attribute of the form tag.
12. In index.php as well as index_JS.php, for the OS:
    • OS: name="OS[]"    
    • NOTE: One key difference in this Exercise -- for this to work in PHP, you must add the [] to the name for the checkboxes
13. We won't be using input type=file for this lab, but you can leave it - it won't hurt anything.

Edit validate.js:

1. Near the bottom, make sure that return false; is commented out, like this:
   //prevent the page from submitting so that you can see the green text
   //if you want the page to submit, comment out the one line of code below.
   //return false;

Edit mystyles.css:

1. Add:
   • class .errorDiv
     • color:#ff0000;
     • font-family:Arial, Helvetica, sans-serif;
     • font-size:11px;
     • font-weight:bold;
       
   • class .dataDiv
     • color:#333333;
     • font:"Times New Roman", Times, serif;
     • font-size:12px;
     • font-weight:normal;
       
   • class .label
     • font-family:Arial, Helvetica, sans-serif;
     • font-size:14px;
     • font-weight:bold;
     • text-align:right;
       
   • class .td
     • width:160px;
       
   • table
     • border:1px solid #000066;
       
   • td, th
     • border:1px solid #000066;
     • padding:3px;
       

Create the form reader page (formPost.php):

1. Create a table to list the information you submitted. (ok to use table here, just dumping posted data)
2. Set the width attribute to 600 and the summary attribute to "Dump of posted form data"
3. Create a header row (use <th> instead of <td>)
4. In the left column, list the names of the form elements that were used on index.php
   • Add a <div> around the text in each <td> in the left column - set the class attribute of the div to label
   • Example: <td><div class="label">First Name: </div></td>
5. Inside of each <td> in the right column, use $_POST to retrieve the posted data.
   • Use an if-else statement to determine if any data was typed into the form
     <?php
     if(empty($_POST["FirstName"]))
     {
     }
     else
     {
     }
     ?>
      
   • NOTE: the method empty() is a built in function that tells you whether a given value is 'empty' - which could mean that the value is null or the empty string ""
   • NOTE: the data is retrieved using $_POST[""] where the name of the input tag goes between the double quotes.
   • NOTE: the use of <?php and ?> - these are the code delimiters for PHP. Use these to switch between PHP code and XHTML code.
      
   • Use echo to write the appropriate value out to the screen so that the code becomes:
     if(empty($_POST["FirstName"]))
     {
          echo "<div class='errorDiv'>No value entered</div>";
     }
     else
     {
          echo "<div class='dataDiv'>".$_POST["FirstName"]."</div>";
     }
      
   • NOTE: the use of the method echo() - echo() writes things to the browser window.
   • NOTE: there are two <div> tags - one with the class 'errorDiv' and the other with class 'dataDiv'
      
6. For the checkboxes, you will need to store the posted data into an array. Then check to see if the array is empty. If it is not empty, use a foreach loop to write out the posted data.
   • Start with a similar if-else statement:
     if(empty($_POST["FirstName"]))
     {
          echo "<div class='errorDiv'>No value entered</div>";
     }
     else
     {
          
     }
      
   • However, within the else branch, add this code (which differs from the code above):
     echo "<div class='dataDiv'>";
     $array = $_POST["OS"];
     if($array != ""){
          foreach($array as $value)
          {
               echo $value . "<br />";
          }
     }
     echo "</div>";
      
7. For the Zip Code:
   • Add validation via an else if statement to ensure that only numbers are entered.
   • Use is_numeric() to determine if the text that was entered contains only numbers such that the code becomes:
     if(empty($_POST["Zip"]))
     {
          echo "<div class='errorDiv'>No value entered</div>";
     }
     else if(!is_numeric($_POST["Zip"]))
     {
          echo "<div class='errorDiv'>Please enter a valid zip code</div>";
     }
     else
     {
          echo "<div class='dataDiv'>".$_POST["Zip"]."</div>";
     }
      
   • NOTE: the use of the not operator ! in the else if conditional
      
8. For the Email address:
   • First, check to see if the text box is empty.
   • Second, check to see if there is an @ sign.
   • Third, check to make sure the @ sign is not the first character.
   • Fourth, check to make sure the @ sign is not the last character.
   • Fifth, check for a period at the end followed by 2, 3, or 4 characters.
   • The code is then altered to look like (the bold comments are places where you will have to add code):
     if(empty($_POST["Email"]))
     {
          //nothing was typed, error
          echo "<div class='errorDiv'>No value entered</div>";
     }
     else if(!strpos($_POST["Email"], "@"))
     {
          //there is no @ sign, error
          echo "<div class='errorDiv'>Please enter a valid email address</div>";
     }
     else if(strpos($_POST["Email"], "@") == 0)
     {
          //@ sign is the FIRST character, error
     }
     else if(strpos($_POST["Email"], "@") == (strlen($_POST["Email"])-1))
     {
          //@ sign is the LAST character, error
     }
     else if(strrpos($_POST["Email"], ".") > (strlen($_POST["Email"])-3) ||
     strrpos($_POST["Email"], ".") < (strlen($_POST["Email"])-5) ||
     !strrpos($_POST["Email"], "."))
     {
          //there is no period . at end of email address, either 2, 3, or 4 characters must be after the period, error
     }
     else
     {
          //email is valid
          echo "<div class='dataDiv'>".$_POST["Email"]."</div>";
     }
      
   • NOTE: the use of strpos() - it finds the position of a character starting from the beginning of the string.
   • NOTE: the use of strrpos() in the last else if branch - it finds the position of a character starting from the end of the string.
   • NOTE: the use of the not operator ! in the last else if branch.
   • NOTE: the use of strlen() - it returns the length of a given string.
     

Test your code:

• Enter nothing, click submit - Should have red text with an error message for every field
• Enter things one by one, clicking submit each time - each error message should disappear one by one
• Enter an invalid zip code, then enter a valid zip code
• Enter an invalid email, then enter a valid email
• Enter everything correctly - Should have black text