CSIS-390: Web Application Development

Lab 4: PHP I: Processing Forms

Goals

Learn about...

  1. HTML From Elements
  2. Form Submission Concept
  3. Connecting Forms to PHP scripts
  4. GET and POST methods

Key Concept

HTML has special elements for building input forms to create user interfaces for web applications. When a form is submitted, the browser can initiate an http request based on the form's action attribute, which can specify the URL of a script. The values of form elements are passed to the server as part of the http requests. PHP scripts can access these values using special global variables called $_GET and $_POST.

Pre-lab

Pre-lab Reading

  • Textbook pp 41-67 (Textbook = Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition)

If you do not have the textbook, http://php.net is a helpful reference.

Pre-lab Activity

Refer to the Pre-lab Reading to answer the Lab 4 Quiz in Blackboard.

In-lab

Remember, if your instructor is busy helping others, raise your hand to make sure the instructor sees that you need help, but then put your hand down and go back to work. As you wait for help, try your best to solve the problem on your own by reading the textbook.

Preparation

  1. For file and folder names only use lowercase letters and never use spaces.
  2. Store all your files in your lab4 folder on the network drive

Connecting to web server via FTP

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

Here are the server details:

  • Hostname: ftp.sienasellbacks.com
  • Username: Your lastname @sienasellbacks.com
  • Password: Told to you in lab4
  • Setting: If the option exists, use Passive FTP and IPv6

Part 1: Login Form

  1. Open Notepad++
  2. Create a new filed called login.html.
  3. Save the file in your lab4 folder.
  4. Add the required HTML5 page structure: 
    <!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Login Form</title>
</head>
<body>

</body>
</html>
  5. In the body, add a form element where the action="login.php" and method="get". See form element reference.
  6. Add a username text field with the following label, id and name. See input element reference. 
    <label for="username">Username</label>
<input type="text" id="username" name="user"><br>
  7. Add a password text field with the following label, id and name. 
    <label for="passwd">Password</label>
<input type="password" id="passwd" name="pw"><br>
  8. Key Concept: In the example above, type="password" specifies the type of input element, id ="passwd" is used as the unique identifier so that the input element can be associated with the correct label, name="pw" defines a name that is used by the HTTP protocol to identify the value submitted by the user.
  9. Add a submit button below the username and password. 
    <input type="submit">
  10. Create a new filed called login.php and add the required HTML5 page structure: 
    <!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Login Form</title>
</head>
<body>

</body>
</html>
  11. In the body, add the following PHP tag. 
    <?php

?>
  12. Save the file in your lab4 folder.
  13. In the PHP tag, add code to print the username and password that were submitted by the login.html form.
    <?php

$user = $_GET['user'];
print 'User '.$user;
...
?>
  14. Make sure login.html and login.php are saved and then upload them to your lab4 folder on the server.
  15. Using a browser, navigate to the URL of the login.html file you just uploaded.
  16. Test the form to be sure it works. It should print the submitted username.

How Form Submission Works:

  • When you submit a form using the GET method, the values you enter into input elements are passed to the server via the HTTP protocol.
  • The server receives the request and can access the submitted values.
  • The PHP preprocessor works with the web server to parse submitted values from each http request.
  • The PHP preprocessor puts all the submitted form variables in an array called $_GET
  • PHP variables always start with $
  • Variables that start with an underscore (_) and capital letters are global variables that are defined and initialized by the PHP preprocessor.
  • Important Global Variables
    • $_GET - Form elements submitted via the "get" method.
    • $_POST - Form elements submitted via the "post" method.
    • $_FILES - Uploaded files submitted via the "multipart/form-data" encryption type.
    • $_SESSION - Session variable stored on the server.
    • $_COOKIE - Cookie variables sent by the web browser.
  • $_GET is an associative array. "associative" means the array index is a string, not a number.
  • The array index corresponds to the name of the submitted form value.
  • For example, print $_GET['pw'] would print the value of a submitted form variable with name="pw".
  • $_GET['pw'] will be null if the submitted form does NOT have a form element with name="pw" or if the user submitted nothing.
  • All form element (input, option, select, textarea, and even buttons) can store and pass values to a server.

Part 2: Adding Form Elements

  1. Modify login.php so that it also prints the password.
  2. Note that the username and password are actually shown in the URL after you submit the form.
  3. Add a pair of radio buttons to login.html. One should have value="happy" and the other should have value="sad".
  4. The radio buttons should both have name="mood".
  5. Modify login.php so that is also prints the submitted "mood"
  6. Instead of just outputting boring text, you can actually print HTML tags to format your output.
  7. Use the p and strong elements to format your output, i.e., <p><strong>Username:</strong> value</p>
  8. Show your instructor that the form prints the username, password and mood.

Part 3: Improving Your Login

The GET method passes submitted form information via the URL. This is a problem because the password is then shown in the URL after you submit the form. Here is how to fix this problem.

  1. Modify the form in login.html to use method="post"
  2. Modify login.php to receive the variable using the $_POST variable instead of the $_GET variable.

Key Concept: Receiving data via the GET method is very useful because you can submit a form just by typing a correctly formatted URL. In a URL, a question mark ? is used to define a query string. The query string consists of name=value pairs. Each pair is delimited with a &. Passing data via the POST is very useful because it hides the submitted value and it allows large amounts of data to be passed. The size of the URL is limited to as few as 1024 character depending on the browser and server, so you cannot pass large amounts of data using GET. By the way, this is all part of the HTTP protocol.

This form does not actually do anything interesting. Here is how to fix this problem.

  1. Modify login.php so that if the user name is "ebreimer" and the password is "poop" then it will print "grow up Dr. Breimer"
  2. Also, modify login.php so that it prints an appropriate but funny error message if any of the form elements are null.
  3. Show your instructor that you form prints interesting error messages and feedback.

Part 4: Self-contained or recursive forms

The same file (.php) can be used to generate a form and process a form. This is useful because it demonstrates how a PHP program can be used to implement more complex applications. Here is how to combine login.html and login.php.

  1. Modify login.php so that if any of the three submitted values (user, pw and mood) are null then it will print the actual form, otherwise it will print the interesting error messages and feedback from the previous part.
  2. Your if statement will look something like this: 
    $user = $_GET['user'];
if ($user == null) {
  print 'Here you can print all the HTML code to generate your form';
}
else {
  if ($user == "ebreimer") 
    print '
    Dr. Breimer grow up!
    ';
}
  3. Show your instructor that you've integrated the form into a single PHP script called login.php

Part 5: Working With Common Form Elements

Using a single PHP script to generate and process a form implement each of the following basic script.

  1. Create a script called add.php where the form includes two input text elements and a submit button. The script should add the two submitted numbers and return the sum.
  2. Create a script called loop.php where the form includes a submit button and a dropdown menu (select and option elements) with the values 2, 4, 8, 16, 32 and 64. The script should the sentence "Dr. Breimer grow up." x times, where x is the value submitted in the dropdown menu.
  3. Create a script called choice.php where the form includes a submit button and five radio buttons. The value of each radio button should be your five favorite foods. The script should simply print your single selection.
  4. Create a script called menu.php where the form includes a submit button and five check boxes. The value of each check box should be your five favorite foods. The script should print all your selections as a properly formatted list (ul).

Deliverables

  1. Zip up your entire lab three folder and submit lab4.zip to Blackboard.
  2. Your zip should include: login.php, add.php, loop.php, choice.php, and menu.php