Validating data / Handling Cookies (Ch. 14.2 - 14.

3)
HTML Form
♦ ♦ ♦

Collect information from visitors Begin with the <form> tag and end with the </form> tag The <form> tag contains several attributes, such as name, method and action. Usage
i. ii. iii.

Note: HTML Form Input Types (Please refer to notes on HTML) Text box Text area Selection box Drop down box Radio Button Check box Button (submit, reset)

Registration Questionnaire Login

Example
<form name='frm_input' action='http://www.ktgss.edu.hk/userinput.php' method='POST'>
i. ii. iii.

The name of the form is "frm_input" The form value will be sent to http://www.ktgss.edu.hk/userinput.php The FORM Method attribute is either
Method = “POST” or Method = “GET”

iv.

Sending with Method GET
a.

The form value is sent via a browser URL, like
http://www.ktgss.edu.hk/userinput.php?name=Bill&gender=male

b. c. d.

The part after the question mark is the value sent to userinput.php. Multiple values are separated with an ampersand (&). In the above example, two values, name=Bill and gender=male are sent to

http://www.ktgss.edu.hk/userinput.php.
v.

Sending with Method POST
3

a. b.

The form value is sent without displaying on browser URL. POST is the preferred method for sending “protected” data, such as password.
4 2

Flow of Form Processing
1. 2. 3. 4. Visitor inputs the HTML form and clicks submit button Form value is submitted to server Server program, such as PHP script, will get and process the form data Server program gives appropriate response to the visitor after the data are processed.

Internet
1

Validating data and handling cookies

page 1

♦ ♦

Example1 : Checking the Password The inputted password is sent and processed by a PHP script, checkpassword.php. checkpassword.htm checkpassword.php
<?PHP if ($_POST['password_in'] == "123456") echo "WELCOME!"; else echo "WRONG PASSWORD"; ?>

<html> <title>Checking Password</title> <body> <form action='checkpassword.php' method='POST'> Please enter your password: <input type='password' name='password_in' size='20'> <br><br> <input type='submit' value='check the password'> <input type='reset' value='reset'> </form> </body> </html>

General Flow of Data Validation
♦ ♦

After a form has been filled in, there can be single item validation, and logical data validation. Single item validation
i. ii.

Verifying if the input is in the correct domain Verifying if the input is in the correct range or length

Logical data validation
i.

It can be related to a single data item or multiple data items. For examples:
a. b.

Validation of student ID Suppose Item A is Age and Item B is Class. If the value of A is 14 while B is of class Form 6, there is a high possibility of data entry error.

Form validation
i. ii.

Checking if the form has been filled correctly before it is processed. Server-side validation
a. b. c.

Using PHP script, ASP, Servlet, etc More secure Program coding is more complicated

iii.

Client-side validation
a. b. c.

Commonly using JavaScript Easier to implement Faster response

Validating data and handling cookies

page 2

Example: Validate an input HKID (PHP)

Validation Rules:
i. ii. iii. iv. v. vi.

All fields should be filled The first field of HKID (hkid_letter_in) should be a letter The middle field of HKID (hkid_number_in) should be digits with the length of 6. The last field of HKID (hkid_letter_bracket) should be a letter or digit. Gender (gender_in) should be selected. HTML codes:

Here is the codes of the HTML form:
<html> <body> <form name='frm_register' action='register.php' method='POST'> Name: <input type='text' name='name_in' size=25> <br> HKID: <input type='text' name='hkid_letter_in' size=1 maxlength=1> -<input type='text' name='hkid_number_in' size=6 maxlength=6> (<input type='text' name='hkid_letter_bracket' size=1 maxlength=1>) <br> Gender: <input type='radio' name='gender_in' value='Male'> Male <input type='radio' name='gender_in' value='Female'> Female <br><br> <input type='submit' value='submit'> <input type='reset' value='reset'> </form> </body> </html>

Here are the PHP codes:
<?PHP if ($_POST[name_in] == "") echo "Please fill in the 'Name' box<br>"; if (($_POST[hkid_letter_in] == "")|| ($_POST[hkid_number_in] == "")|| ($_POST[hkid_bracket_in] == "")) echo "Please fill the all the 'HKID' boxes<br>"; if ($_POST[gender_in] == "") echo "Please choose the Gender<br>"; if (!eregi("^[_a-z]", $_POST[hkid_letter_in])) echo "The first box of the HKID should be a letter<br>"; if(!ereg("^[0-9]+$", $_POST[hkid_number_in])) echo "The second box of the HKID should be digits<br>"; if (strlen($_POST[hkid_number_in]) != 6) echo "The second box of the HKID should be in length of 6<br>"; if ((!eregi("^[_a-z]", $_POST[hkid_bracket_in]))&&(!ereg("^[0-9]+$", $_POST[hkid_bracket_in]))) echo "The third box of the HKID should be digit or letter<br>"; ?>

Validating data and handling cookies

page 3

Client-side Validation (JavaScript)

The <form> tag is changed as follows:
<form name='frm_register' action='register.php' method='POST' onSubmit="return validate_form()">

The form is given a name of “frm_register” and “onSubmit” attribute is added to the <form> tag. A JavaScript function “validate_form()” is added and the JavaScript function will be called when the “Submit” button is clicked. The “return” allows the JavaScript function returns either true or false.
i. ii.

return the value true means “submit the form to server” return the value false means “DO NOT submit the form”

JavaScript codes to validate:

<script type="text/javascript"> <!-function validate_form ( ) { valid = true; nums = /^[0-9]*$/; letters = /^[a-zA-Z]*$/; if (frm_register.name_in.value == "" ) { alert ( "Please fill in the 'Name' box" ); valid = false; } if ((frm_register.hkid_letter_in.value == "") ||(frm_register.hkid_number_in.value == "") ||(frm_register.hkid_bracket_in.value == "")) { alert ( "Please fill the all the 'HKID' boxes" ); valid = false; } if ((frm_register.gender_in[0].checked == false)&& (frm_register.gender_in[1].checked == false)) { alert ( "Please choose the Gender"); valid = false; } if (!letters.test(frm_register.hkid_letter_in.value)) { alert("The first box of the HKID should be a letter"); valid = false; } if (!nums.test(frm_register.hkid_number_in.value)) { alert("The second box of the HKID should be digits"); valid = false; } if ((!letters.test(frm_register.hkid_bracket_in.value))&& (!nums.test(frm_register.hkid_bracket_in.value))) { alert("The third box of the HKID should be digit or letter"); valid = false; } if (frm_register.hkid_number_in.value.lenght != 6) { alert ( "The second box of the HKID should be in length of 6" ); valid = false; } return valid; } //--> </script>

Validating data and handling cookies

page 4

Creating Quizzes with Multiple Input Formats

Procedure to conduct a quiz:
i. ii. iii. iv. v.

Display a question Create a fill-in form to get answers Submit the users’ answers to server Process the answers by server script, such as PHP, and check whether the answers are correct Display the result

Question Types:
i. ii. iii. iv.

Multiple Choice Fill in the blanks Multiple Answers Matching

4. Multiple Choice Example
PHP page <?php

HTML page <html> <head> <title>Quiz</title> </head> <body> <form action='quiz.php' method='POST'> Question 1<br> Please (submit) your application before five o'clock. <br> <input type='radio' name='q1_ans' value='hand off'> hand off <br> <input type='radio' name='q1_ans' value='hand in'> hand in <br> <input type='radio' name='q1_ans' value='hand down'> hand down <br> <input type='radio' name='q1_ans' value='hand out'> hand out <br> <br> Question 2<br> Please fill in your answer<br> 10 + 5 x 2 = <input type='text' name='q2_ans' size=5> <br> <br>

echo "<br>Question 1<br>"; if ($_POST['q1_ans']=="hand in") echo "Correct!<br>"; else { echo "Wrong Answer!<br>"; echo "The correct answer is 'hand in'"; }

echo "<br>Question 2<br>"; if ($_POST['q2_ans']==20) echo "Correct!<br>"; else { echo "Wrong Answer!<br>"; echo "The correct answer is 20"; } echo "<br>Question 3<br>"; If (isset($_POST['q3_ans_a'])&& !isset($_POST['q3_ans_b'])&& isset($_POST['q3_ans_c'])&& !isset($_POST['q3_ans_d'])&& isset($_POST['q3_ans_e'])) echo "Correct!<br>"; else { echo "Wrong Answer!<br>"; echo "The correct statements are:<br> 1 + 10 x 0 = 1<br> 3 x 3 x 3 = 27<br> 5 + 6 + 7 = 18 <br>"; }

Question 3<br> Select all the correct statements below<br> <input type='checkbox' name='q3_ans_a' value='yes'> 1 + 10 x 0 = 1<br> <input type='checkbox' name='q3_ans_b' value='yes'> 2 x 20 + 5 = 40<br> <input type='checkbox' name='q3_ans_c' value='yes'> 3 x 3 x 3 = 27<br> <input type='checkbox' name='q3_ans_d' value='yes'> 4 + 6 x 2 = 20 <br> <input type='checkbox' name='q3_ans_e' value='yes'> 5 + 6 + 7 = 18 <br> <br>

Validating data and handling cookies

page 5

Question 4<br> Rose ------<select name='q4_ans_rose'> <option value=''></option> <option value='animal'>Animal</option> <option value='flower'>Flower</option> <option value='fruit'>Fruit</option> </select> <br> Dog ------<select name='q4_ans_dog'><option value=''></option> <option value='animal'>Animal</option> <option value='flower'>Flower</option> <option value='fruit'>Fruit</option> </select> <br> Apple ------<select name='q4_ans_apple'> <option value=''></option> <option value='animal'>Animal</option> <option value='flower'>Flower</option> <option value='fruit'>Fruit</option> </select> <br> <input type='submit' value='submit'> </form> </body> </html>

echo "<br>Question 4<br>"; if (($_POST['q4_ans_rose']=="flower")&& ($_POST['q4_ans_dog']=="animal")&& ($_POST['q4_ans_apple']=="fruit")) echo "Correct!<br>"; else { echo "Wrong Answer!<br>"; echo "<br> The Answer is<br> Rose ------- flower<br> Dog ------- animal<br> Apple ------- fruit<br>"; }

?>

Screen layout:

Validating data and handling cookies

page 6

What is Cookie
♦ ♦

Cookies are small amounts of information that a foreign computer can leave on your computer. The cookie also contains
i. ii.

An expiry date

Why We Need Cookie
i.

If you have cookies enabled in your machine, it will store your station name and station number there to be used to fill in those items in our data entry forms. This means that you only have to remember your station name and number once and we will fill it in for you after that They are also often used to remember password and login information for private sites or your setup preferences of your home page.

ii.

iii.

Personalization
♦ ♦ ♦

Customize the delivery of a Web page to make it more useful for individual users Tailor your output to different types of browsers Drawbacks of Cookies
i. ii. iii. iv. v.

Inaccurate identification Cookie theft Cookie poisoning Cross-site cooking Inconsistent state on client and server

Inaccurate Identification
i. ii.

Anyone who uses more than one account, computer, or browser has more than one set of cookies. Cookies do not differentiate among multiple users who share a computer and browser.

♦ ♦

Cookie Theft. Cookies can be stolen and read by unauthorized computers on the network. Cookie Poisoning. The values of Cookies are supposed to be stored and sent back to the server without any modification. Attackers may modify the cookies and send back the inappropriate cookies to the server. Cross-site Cooking. Similar to cookie poisoning, attackers exploit a browser bug to send a modified cookie to the server Inconsistent State on Client and Server. The use of cookies may generate an inconsistency between the state of the client and the state as stored in the cookie. If a user acquires a cookie and then clicks the "Back" button of the browser, the state on the browser is generally not the same as before that acquisition.

Validating data and handling cookies

page 7

Sample program to set and read a cookie when a user browse a web page.

<html> <head> <script language="JavaScript"> function setcookie() { document.cookie = "name=peter; expires=Sun, 1 Jan 2012 12:00:00 GMT"; } function readcookie() { if (document.cookie) { var mycookie = document.cookie; window.alert(mycookie); } } </script> </head> <body onLoad="readcookie()"> <form name="myform"> <input type = "button" value="Set cookie" onClick="setcookie();"> </body> </html>

click and then reload the page

Validating data and handling cookies

page 8