Laboratory Exercise on Simple Forms and User Data

Summary: This lab is the second of two activities that introduce the possibility that a Web page can respond to changing circumstances.

• The previous lab considered tailoring Web-page content, based on such local conditions and the time and/or the day.

• This lab explores the possibility of responding to user-supplied data within a Web page.

Background

Read Butler and Yank, pages 62-65, before starting this laboratory exercise!

Example

Processing user data in the context of Web pages typically involves two steps, each with a separate Web page:

• A Form is included in one Web page.

  • The Web page contains a section designated with a <form> tag (ending with the corresponding </form> tag).
  • Within the <form> tag, an attribute indicates what page/program should be called when the "submit" button is clicked.
  • An <input> tag that identifies where to place a "submit" button and how that button should be labeled.
  • Several elements that contain <input> tags to identify the type of input (e.g., a text box or a radio button), a variable name for those data for when that data are processed, and possibly an option for what data will be designated.
  • Simple example: form-example-1.php

• A response page containing a program, perhaps containing PHP, that retrieves the data entered in the Web form and processes that data.

  • Simple example: form-example-1-response.php (as run by the Web server), and form-example-1-response.txt (as a page generated by TextEdit).

Steps for this Lab

This lab proceeds in 3 stages:

• The Web form
• Transmisison of data in a URL
• The response page

Working with the Web Form

1. Download the Web page form form-example-1.php, and also the TextEdit version of the response file, form-example-1-response.php.

2. Load the page source of form-example-1.php into TextEdit, and compare the elements to the form described in Rutler and Yank, pages 62-65.

   1. What elements of the form are functionally the same (perhaps with somewhat different content for the user).
   2. What elements of the form are omitted (e.g., from the textbook example).
   3. form-example-1.php includes radio buttons as well as text boxes. What elements are specified for the radio buttons?

3. For "text" input, a value may be designated as the default; if the user does not enter a value in the textbox, the default is used.

   1. What happens if the value attribute is omitted from a "text" input box>?
      Load the page a few times, and submit sometimes entering a number in the box and sometimes not entering anything.

4. In the original Web form, no radio buttons are set at the start.

   1. What happens if the page is submitted without any radio buttons set?
   2. If the user clicks a radio button, what value is communicated to the response page? How is that value determined? Edit the Web form to change the value communicated to test your answer.
   3. In ONE of the radio buttons, you may add a "checked" attribute (don't include the double quotes). What happens when this text is added on the Web form page and when you click "submit"?
   4. What happens if you add "checked" to two or more radio buttons?

5. The Web form places the radio buttons on nine separate lines.

   1. How is the formatting achieved, so that each shape appears on a separate line?
   2. Reformat the list of nine shapes into a 3-by-3 grid, using a table with three rows and three columns.

Data Transmission: the Get Method

When a form submits information with the GET method, the user-supplied data are appended to the URL. This extended URL has the format

   http://www.walker.cs.grinnell.edu/courses/199.sp19-willamette/labs/form-example-1-response.php?yourText=...&yourNumber=...

The first part of this line has the familiar form of a URL, and a question mark separates this location from the user data. Information from the form is organized into pairs:

   key=value

Here, the key is the name given in the form. The user-supplied information follows an equal sign. In this case, the form has two text boxes and a radio button section, so the extended URL has two key-value pairs for the boxes and one for the radio button (if some button is clicked). An ampersand (&) separates data from different boxes.

6. Enter data in the Web form, and click "submit", and examine the full URL in the browser.

   1. Match the names in the Web form form-example-1.php with the keys in the URL.
   2. Suppose you edit the URL to include different values for a key. After editing, click reload and describe what values are reported by the response page.

7. The above description for a URL indicates that a question mark, equal sign, and ampersand may have special significance in a URL.

   1. Type some of these symbols within a text box, and describe what happens in the resulting URL that is generated.
   2. Back in the form-example-1.php, enter text that includes a space, an ampersand (&), and a semicolon (;). Describe the resulting URL that is generated when you click "submit".

8. Browsers normally display URL in a page header.

   1. What are some advantages for displaying this information in a URL? (For example, such information is typically shown during Web searches.)
   2. What implications might the display of this information for personal privacy and security?

Working with the Response Page

For this part of the lab, work with the text version of the page, form-example-1-response.php, loaded into TextEdit.

9. The first php section of the Web page contains the lines:

   $number1 = $_GET["box1"];
   $number2 = $_GET["box2"];
   $shape   = $_GET["shape"];
   

   Since the form indicated data transmission via a "get" method, this section of the response page retrieves data from a $_GET[ ] variable, where the brackets contain the name of a box in the Web form.

   What happens if a variable name is misspelled or apparently confused, such as

   $number2 = $_GET["box1"];
   $number1 = $_GET["box2"];
   $shape   = $_GET["other"];
   

10. Once variables are set, explain how subsequent processing proceeds in this response page.

11. The response page prints a sum, assuming that the user entered numbers in the two text boxes.

    1. What happens if the user enters non-numbers (e.g, "computer" and/or "science") in one box, but a number in the other?
    2. What happens if the user enters non-numbers in both boxes?

12. This response page produces two tables of data.

    1. The first table is largely organized within HTML in the same way as any table. Describe how the values are inserted into the table using PHP.
    2. The second table is largely based on PHP code, where echo statements output the proper HTML. Describe carefully how the various elements of the table are produced. What additional variables are use? Why do you think those variables are needed?

Additional Processing

13. Extend processing in forms-example-1.php, so the difference, product and quotient of the two numbers are computed and printed, as well as the sum.

14. Create two new tables, near the end of forms-example-1-response.php, giving each number and its square, its value cubed, and its value to the fourth poser. The table might have the following general format:

    name	number	squared	cubed	fourth power
    First Value
    Second Value

    1. Organize the first table with basic HTML table tags, inserting PHP and values only as needed (following the approach of Table 1).
    2. Base the second table on PHP statements (following the approach of Table 2).

Work to be Turned In

• Commentary for Steps 2-5a, 6b, 7-8, 9-12
• HTML segment for step 5b
• A full, extended Web page (showing HTML and PHP) for 13-14. (One page may be submitted separately for 13 and 14, or the two steps may be combined on a single Web page.)

created 23 January 2019 revised 23-24 January 2019