lecture 6 – form processing (part 1) sfdv3011 – advanced web development 1

21
Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

Upload: morgan-clarke

Post on 26-Dec-2015

214 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

1

Lecture 6 – Form processing (Part 1)

SFDV3011 – Advanced Web Development

Page 2: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

2

Form Parts

<form action = 'xxx' method = 'yyy'><form stuff goes here></form>

• action is the file you want to go to (could be html or php)

• method should be either POST or GET

Page 3: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

3

Action• An action should be a URI (e.g. a file name in

the current folder) or a full web address, e.g. http://www.somewebserver.com/myfile.php)

• Example:<form action = 'invoice.php'>

…</form>

• This will take the user to the invoice.php page in the current directory when the user presses the submit button.

Note: You should always use quotes around the URI in case it has special characters or spaces.

Page 4: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

4

Method

• The method can be either 'POST' or 'GET'.• $_GET and $_POST are arrays built into PHP

which make form processing a lot easier.• Form variables are stored as keys

(elements) of these arrays, indexed by their name

• To see what is in the array just do a var_dump() e.g. var_dump($_GET);

• TIP: put var_dump()at the top of form processing files so you can see what is sent from the form

Page 5: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

5

Submit Button

Usually you need to have a submit button to invoke a form's action, e.g.:

<input type = 'SUBMIT'name = 'the name you want to appear in the POST/GET

array'value = 'the label in the button '>

Page 6: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

6

Example: Login

<form action ='invoice.php' method = 'POST'>

<input type = 'SUBMIT' name = 'submit_button' value = 'Login'>

</form>

Page 7: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

7

Input types (single value)

A generic input type looks like this:

<input type = '<type>'name = '<the name in the POST/GET

array>'value = '<the value you want to set it to>'>

Page 8: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

8

The Basic Input Types

• Text• Password• Hidden• Radio • Checkbox• Submit

Page 9: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

9

Example: Login form<?phpprint "logged in " . $_POST['username'];?><form action = 'process_login.php' method = 'post'><input type = 'text' name = 'username'><input type = 'password' name = 'password'><input type = 'submit' name = 'submit_button' value =

'login'></form>

Page 10: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

10

Self-Processing Form

• Sometimes you want to stay on the same page when processing your forms

<form action = '<?= $_SERVER["PHP_SELF"]?>' method = 'post'>

</form>is the same as:

<form action = '<?php $_SERVER["PHP_SELF"] ?>'method = 'post'>

</form>

• <?= is short for echo when embedding PHP in HTML

• You can use $PHP_SELF or $_SERVER['PHP_SELF']

Page 11: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

11

Example: Login formif( array_key_exists('submit_button', $_POST) ) { print "logged in " . $_POST['username'];}else {?><form action = '<?php $_SERVER['PHP_SELF'] ?>' method =

'post'><input type = 'text' name = 'username'><input type = 'password' name = 'password'><input type = 'submit' name = 'submit_button' value = 'login'></form>

<?php } ?>

Page 12: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

12

GET method

<form method = 'get'> … </form>

GET will show the information being passed between pages as part of the URL.– Good tool for error checking– However, it is not secure because users

can see the full contents of the request.– Pages can be cached.

Page 13: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

13

POST method

<form method = 'post'> … </form>

POST will hide information being passed between pages in the address bar.– HINT: use GET for error checking; change to

POST when submitting your work– More secure than GET– Pages won't be cached.

Page 14: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

14

Compound Types

• Select• Text area• List box

• Compound types enable multiple inputs and/or outputs

• Unlike input types, compound types always use a begin and end tag

<select name='a_select_box'> … </select>

Page 15: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

15

Example: Login formif( array_key_exists('submit_button', $_POST) ) { print "logged in " . $_POST['username'];}else {?><form action = '<?php $_SERVER['PHP_SELF'] ?>'

method = 'post'><select name='username'><option>Moe</option><option>Larry</option><option>Curly</option></select><input type = 'password' name = 'password'><input type = 'submit' name = 'submit_button'

value = 'login'></form><?php } ?>

Page 16: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

16

Select Boxes

• Select boxes provide a drop down set of options for the user to choose from.– Value is whatever the user chooses when

the submit button is pressed– If no value parameter is set, the value

defaults to the label• <SELECT name="a_select_box">

<OPTION value="value_of_thing1">thing1</OPTION><OPTION value="value_of_thing2">thing2</OPTION><OPTION value="value_of_thing3">thing3</OPTION></SELECT>

Page 17: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

17

Text Area

• Text Area provide a region of size row X cols to display and input text.– Value is whatever is in the area when

the submit button is pressed

<TEXTAREA name="a_test_area" rows="20" cols="40">This is some text in the text area.</TEXTAREA>

Page 18: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

18

Tips and Hints

• Use single ' ' on the inside, " " around the outside or vice versa

• Take advantage of PHP by using for/while/foreach to generate multiple form elements and compound types

• Quotes must be used around anything with spaces

Page 19: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

19

Login program with Functions

$usernames = array ( // Define valid user names and passwords'Moe' =>'stooge1','Larry' => 'stooge2','Curly' => 'stooge3'

);

// Process the loginif (array_key_exists('submit_button', $_POST)) {

if(process_login($usernames) == TRUE) {print "logged in " . $_POST['username'];

}else {print 'Incorrect password for ' .$_POST['username'] .'<br>';display_login($usernames);

}} else {

display_login($usernames);}

Page 20: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

20

Display Login Function// Display a login form with a select box of usernames function display_login($users) {

?><form action = "<?php $_SERVER['PHP_SELF'] ?>"

method = 'post'><select name='username'><?phpforeach ($users as $user => $pass) {

print '<option>’.$user.’</option>’;}

?></select><input type = 'password' name = 'password'><input type = 'submit' name = 'submit_button'

value = 'login'></form><?php

} ?>

Page 21: Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1

21

Process Login Function

/* checks the posted form to see if password * entered matches the password for the username *(info in $users) selected in the form. Returns * TRUE if there is a match, FALSE otherwise */function process_login($users) { if($users[$_POST['username']] == $_POST['password'])

return TRUE;else return FALSE;

}

Do functions simplify or complicate? Why?What are the additional benefits of using functions?