1. HTML Form and PHP IST2101

2. 2 Review of Previous Class HTML table and PHP array Winner is chosen automatically using rand() function.

3. Today’s Objectives http://my.up.ist.psu.edu/zuz22/lottery2.php Learn interaction with users using HTML Form IST2103

4. Input Parameter Using Form 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]; } ?> IST2104

5. Input Parameter Using Form 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]; } ?> IST2105 Generate the form

6. Input Parameter Using Form IST2106 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. 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 IST2107 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 $v.

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

9. Try it yourself IST2109 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]; } ?> lottery2.php http://my.up.ist.psu.edu/YourPSUID/lottery2.php

10. A More General Case IST21010 http://my.up.ist.psu.edu/zuz22/lottery3.php Input form in one page; PHP response in another page

11. IST21011 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)! lottery3.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_lottery3.php lottery2.php Separate into a form page and a process page

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

13. Overview of the whole process Request: http://my.up.ist.psu.edu/zuz22/lottery3.php http://my.up.ist.psu.edu/zuz22/lottery3.php date_form.php Form submission to: http://my.up.ist.psu.edu/zuz22/process_lottery3.php http://my.up.ist.psu.edu/zuz22/process_lottery3.php Date_form.php IST21013 Webspace User

14. Try it yourself IST21014 Pick a student (0-4)! lottery3.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_lottery3.php http://my.up.ist.psu.edu/YourPSUID/lottery3.php

15. 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 IST21015

16. 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 IST21016

17. 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 IST21017

18. Form Definition This line says: –The form will be processed by “process_lottery3.php” –By clicking “go”, a user sends an HTTP request to “process_lottery3.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 IST21018

19. 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 button, 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 IST21019 0

20. 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 IST21020

21. 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 IST21021

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

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

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

25. Lab Exercise Add forms in your web page so that visitors can add a comment about your web page Forms should include the following elements: – A text field – A textarea field – A set of radio button – A dropdown menu – A submit button Write a PHP file to display all data a visitor inputs in a new page after the submit button is clicked – Test the input of radio button and print out different messages IST21025

26. IST21026 http://my.up.ist.psu.edu/zuz22/comment.php

27. Get Started IST21027 Name: comment.php <?php $userName=$_POST["username"]; echo "Hello $userName ! "; ?> process_comment.php

28. Hints Modify comment.php for form input – A text field for name – A button for Yes/No – A textarea for comment Learn this format by yourself http://www.w3schools.com/tags/tag_textarea.asp – A dropdown list for rating Modify process_comment.php to process form – Echo name – Use “IF/ELSE” to echo “like” or “do not like” – Echo comment – Echo rating IST21028

29. Advanced Requirement (Optional) Think about how to better get input aligned as shown in the screenshots? – Hint: use table IST21029