Lab 5

Forms & PHP Continued

---

Goals

Learn about...

1. Integrated scripts that combine HTML and PHP.
2. Implementing practical PHP functions
3. Using the foreach loop to process submitted form values
4. Creating a form with good user feedback that is fault tolerent.

---

Setup

Connecting to web server via FTP

Connection details have been emailed to you.

In lab, I will demonstrate how to use WinSCP to connect to our remote server.

Here are the server details:

• Hostname: ftp.sienasellbacks.com or ftp.breimer.net
• Username: yourID@sienasellbacks.com or yourID@breimer.net
• Password: Sent via email
• Port: 21
• Setting: If the option exists, use Passive FTP and IPv6
• Do not use SFTP

---

A not so simple math form

Goal: To understand the roles of HTML, CSS and PHP in form processing and how to combine everything into one integrated script.

A. math.html

1. In your editor of choice, create a new file called math.html and save it in your lab5 folder
2. In math.html, add a form that looks like this:
   
   • Create a minimal HTML5 document that has a form element with action="math.php" and method="get"
   • Inside the form, add two input text elements named x and y, i.e., <input type="text" name="x">
   • Put the each input text element inside a label tag with the corresponding text label, i.e., "x:" and "y:"
   • Add a submit button, i.e., <input type="submit">

B. math.php

1. In your editor of choice, create a new file called math.php and save it in your lab5 folder
2. In math.php, get the two submitted values (x and y), add them together and echo the sum.
   • Since we use the get method, we must use the PHP global variable $_GET to fetch the submitted values
   • Remember that the index matches the name of the form element, i.e., $_GET['x']
   • zyBook 12.3 explains how to do basic math operations. The operators are very similar to Java
3. Note that you can use this PHP script without the form and pass values in the URL as follows math.php?x=3&y=6
4. Later in the course, we will call PHP scripts this way using JavaScript to send and get data without having to submit a form
5. Using WinSCP, upload your lab5 folder to your remote server
6. Open Chrome and go to your URL, i.e., username.siencs.com/lab5 or username.breimer.net/lab5 to test your math form and script.

C. Combined Script

1. Modify the math.php script so that it generates the form in addition to processing the form.
2. Think of the script as a big if statement. If the data is not submitted, i.e., $_GET == null, then echo the form, otherwise process the submitted data.
3. Hint: You want your output to always be an HTML document, so you should always output the !doctype, html, meta, title and body tags. But, what goes inside the body depends on the if statement. Either echo the form or the output output of the script.
4. Using WinSCP, upload your lab5 folder to your remote server
5. Open Chrome and go to your URL, i.e., username.siencs.com/lab5 or username.breimer.net/lab5 to test your math form and script.

D. Using Functions

Now that your script and form are unified, we will enhance it with the following features.

1. Instead of hardcoding two almost identical label and text input fields, we will generate them programmatically using a PHP function, so that you can add many text input fields easily. zyBook 12.6 explains how to define function in PHP. It is somewhat similar to Java.
2. Define a function called make_text_input at the top of your math.php file in a PHP block <? ?>
3. This function should take one parameter $name. Instead of hard-coding the name/label of the text input field, use the parameter variable. The function will return the string <label> $name: <input type="text" name="$name"> </label>
   But note that you have to properly "slice in" the variable $name.
4. To generate your form, you can just slice in the function call twice as follows:
   
5. Now use your function and modify your script, so that your form will have 4 text input fields that behave as follows:
   math_solution.php

E. Input Validation & User Feedback

If the user fails to type a numeric value for all 4 text input fields, PHP crashes and the user must click back with no meaningful error message. Enhance the script so that it behaves as follows:
math_solution_final.php

Hints & Help:

1. Add a CSS class that can be used to highlight the error:
   
2. Change your function so that it can display previously submitted values and so it can include a CSS class if there is an error:
   
3. When initially generating the form, pass a blank value and blank CSS class:
   
4. Generate the form even if data is submitted. Keep track of the answer and if there is an error.
   
5. Loop through the $_GET array instead of checking all the text input fields separately
   
6. If the value is blank or not numeric, make a text input and pass the value and the error class, otherwise make a text input and just pass the value.
   
   Note that we keep track of the answer and whether or not there was an error.
7. Echo the submit button and the end of the form
   
8. Only display the answer if there were no errors, i.e., error is false