1. HTML FORM AND PHP IST 210: Organization of Data IST210 1

2. Review of P3 IST210 2 Lottery Game 2 <?php $lastname = array('Smith', 'Kim', 'Davis', 'Miller', 'Taylor'); $firstname = array('John', 'Anthony', 'Richard', 'Thomas', 'Jessica'); // code to show the table is not shown $v = rand(0,4); echo " Today's Winner is: ".$firstname[$v]." ".$lastname[$v]." "; ?> Part of our previous lab exercise

3. Today’s Objectives http://my.up.ist.psu.edu/duw24/lotteryForm.php Learn interaction with users using HTML Form IST210 3

4. Input Parameter Using Form IST210 4 Pick a student (0-4)! <?php $lastname = array ('Smith', 'Kim', 'Davis', 'Miller', 'Taylor'); $firstname = array('John', 'Anthony', 'Richard', 'Thomas', 'Jessica'); if (!empty($_POST['studentID'])){ $v = $_POST['studentID']; echo "Today's Winner is: ".$firstname[$v]." ".$lastname[$v]; } ?>

5. Input Parameter Using Form IST210 5 Pick a student (0-4)! <?php $lastname = array ('Smith', 'Kim', 'Davis', 'Miller', 'Taylor'); $firstname = array('John', 'Anthony', 'Richard', 'Thomas', 'Jessica'); if (!empty($_POST['studentID'])){ $v = $_POST['studentID']; echo "Today's Winner is: ".$firstname[$v]." ".$lastname[$v]; } ?> Generate the form

6. Input Parameter Using Form IST210 6 Pick a student (0-4)! <?php $lastname = array ('Smith', 'Kim', 'Davis', 'Miller', 'Taylor'); $firstname = array('John', 'Anthony', 'Richard', 'Thomas', 'Jessica'); if (!empty($_POST['studentID'])){ $v = $_POST['studentID']; echo "Today's Winner is: ".$firstname[$v]." ".$lastname[$v]; } ?> The value input into the textbox will be assigned to variable studentID and will be stored in POST container, called $_POST In PHP segment, we can retrieve the value this variable using $_POST[‘studentID’]. Note, the variable name should be exactly the same (case sensitive)!

7. Input Parameter Using Form IST210 7 Pick a student (0-4)! <?php $lastname = array ('Smith', 'Kim', 'Davis', 'Miller', 'Taylor'); $firstname = array('John', 'Anthony', 'Richard', 'Thomas', 'Jessica'); if (!empty($_POST['studentID'])){ $v = $_POST['studentID']; echo "Today's Winner is: ".$firstname[$v]." ".$lastname[$v]; } ?> We retrieve the value and assign to variable $v. Finally, output the student name with index as $v.

8. Overview of the whole process IST210 8 Request: http://my.up.ist.psu.edu/zul17/lotteryForm.php http://my.up.ist.psu.edu/zul17/lotteryForm.php date_form.php Form submitted to: http://my.up.ist.psu.edu/zul17/lotteryForm.php http://my.up.ist.psu.edu/zul17/lotteryForm.php Date_form.php Webspace User

9. A More General Case IST210 9 http://my.up.ist.psu.edu/duw24/lottery4.php Input form in one page; PHP response in another page

10. IST210 10 Pick a student (0-4)! <?php $lastname = array ('Smith', 'Kim', 'Davis', 'Miller', 'Taylor'); $firstname = array('John', 'Anthony', 'Richard', 'Thomas', 'Jessica'); if (!empty($_POST['studentID'])){ $v = $_POST['studentID']; echo "Today's Winner is: ".$firstname[$v]." ".$lastname[$v]; } ?> Pick a student (0-4)! lottery4.php <?php $lastname = array ('Smith', 'Kim', 'Davis', 'Miller', 'Taylor'); $firstname = array('John', 'Anthony', 'Richard', 'Thomas', 'Jessica'); $v = $_POST['studentID']; echo "Today's Winner is: ".$firstname[$v]." ".$lastname[$v]; ?> process_lottery4.php lotteryForm.php Separate into a form page and a process page

11. Overview of the whole process IST210 11 Request: http://my.up.ist.psu.edu/zul17/lottery4.php http://my.up.ist.psu.edu/zul17/lottery4.php date_form.php Form submission to: http://my.up.ist.psu.edu/zul17/process_lottery4.php http://my.up.ist.psu.edu/zul17/process_lottery4.php Together with data Date_form.php Webspace User

12. IST210 12 So what happens if I directly visit http://my.up.ist.psu.edu/duw24/process_lottery4.php The variables do not have values

13. Why Are Forms Important to You? Database query will be sent through forms Keyword A set of possible values Database query conditions will be specified through forms Including or excluding a condition IST210 13

14. Forms Forms enable server-user interaction Allow users to input data User inputs sent to a server program The server program processes the query Examples: User login User registration Search Usually three steps Input page, visual part of the form, coded in HTML Form validation, a program to check the data before it enters the server (often JavaScript) Form processing, a program that accepts and processes the input IST210 14

15. Forms Formal definition A form is an area that can contain data input elements Text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc Defined with the tag and a set of attributes name: the name of the form action: the program that will processes the form method: how this form will be submitted IST210 15

16. Form Definition This line says: The form will be processed by “process_lottery4.php” By clicking “go”, a user sends an HTTP request to “process_lottery4.php” All the form data is attached to the HTTP request via “post” method You can also use “get” method For difference between “post” and “get”, see http://www.w3schools.com/tags/att_form_method.asp IST210 16

17. Form Elements The most used form element tag is the tag The type of input is specified with the type attribute Text, Dropdown List, Radio, Checkbox, Submit The name attribute is usually used by validation or processing code to retrieve the input data. In most cases, it has nothing to do with displaying the element IST210 17 0

18. Form Elements: Text Fields Text fields are used when you want the user to type letters, numbers, etc. in a form Use value attribute to preset some text in the field IST210 18

19. Form Elements: Submit Button Submit button When the user clicks the "Submit" button, the content of the form is sent to another file, which is defined by action attribute of the tag IST210 19

20. Form Elements: Radio Buttons Radio Buttons are used when you want the user to select one of a limited number of choices IST210 20 Pick a student (0-4)! 0 1 2 3 4 http://my.up.ist.psu.edu/duw24/lottery4_button.php Value that will be passed to the process pageValue show on the page

21. Form Elements: Checkboxes Checkboxes are used when you want the user to select one or more options of a limited number of choices. IST210 21 Pick a student (0-4)! 0 1 2 3 4 http://my.up.ist.psu.edu/duw24/lottery4_check.php

22. Form Elements: Dropdown List Let the user choose from a set of given options. IST210 22 http://my.up.ist.psu.edu/duw24/lottery4_dropdown.php Pick a student (0-4)! 0 1 2 3 4

23. In-Class Exercise: Lottery4.php IST210 23 Pick a student (0-4)! lottery4.php <?php $lastname = array ('Smith', 'Kim', 'Davis', 'Miller', 'Taylor'); $firstname = array('John', 'Anthony', 'Richard', 'Thomas', 'Jessica'); $v = $_POST['studentID']; echo "Today's Winner is: ".$firstname[$v]." ".$lastname[$v]; ?> process_lottery4.php http://my.up.ist.psu.edu/YourPSUID/lottery4.php