Web Programming Step by Step

Lecture 10
More HTML Forms; Posting Data

Reading: 6.3 - 6.5

Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.

Valid XHTML 1.1 Valid CSS!

6.2: Form Controls

Grouping input: <fieldset>, <legend> (6.2.8)

groups of input fields with optional caption (block) 

<fieldset>
	<legend>Credit cards:</legend>
	<input type="radio" name="cc" value="visa" checked="checked" /> Visa
	<input type="radio" name="cc" value="mastercard" /> MasterCard
	<input type="radio" name="cc" value="amex" /> American Express
</fieldset>

Styling form controls (6.2.9) 

element[attribute="value"] {
	property : value;
	property : value;
	...
	property : value;
}

input[type="text"] {
	background-color: yellow;
	font-weight: bold;
}

6.3: Submitting Data

Problems with submitting data

<label><input type="radio" name="cc" /> Visa</label>
<label><input type="radio" name="cc" /> MasterCard</label> <br />
Favorite Star Trek captain:
<select name="startrek">
	<option>James T. Kirk</option>
	<option>Jean-Luc Picard</option>
</select> <br />

The value attribute

<label><input type="radio" name="cc" value="visa" /> Visa</label>
<label><input type="radio" name="cc" value="mastercard" /> MasterCard</label> <br />
Favorite Star Trek captain:
<select name="startrek">
	<option value="kirk">James T. Kirk</option>
	<option value="picard">Jean-Luc Picard</option>
</select> <br />

URL-encoding (6.3.1)

Submitting data to a web server

HTTP GET vs. POST requests (6.3.3)

Form POST example

<form action="http://foo.com/app.php" method="post">
	<div>
		Name: <input type="text" name="name" /> <br />
		Food: <input type="text" name="meal" /> <br />
		<label>Meat? <input type="checkbox" name="meat" /></label> <br />
		<input type="submit" />
	<div>
</form>

GET or POST?

if ($_SERVER["REQUEST_METHOD"] == "GET") {
	# process a GET request
	...
} elseif ($_SERVER["REQUEST_METHOD"] == "POST") {
	# process a POST request
	...
}

The htmlspecialchars function

htmlspecialchars returns an HTML-escaped version of a string 
$text = "<p>hi 2 u & me</p>";
$text = htmlspecialchars($text);   # "&lt;p&gt;hi 2 u &amp; me&lt;/p&gt;"

6.4: Processing Form Data in PHP

"Superglobal" arrays (6.4.1)

Array Description
$_REQUEST parameters passed to any type of request
$_GET, $_POST parameters passed to GET and POST requests
$_SERVER, $_ENV information about the web server
$_FILES files uploaded with the web request
$_SESSION, $_COOKIE "cookies" used to identify the user (seen later)

Associative arrays (6.4.1) 

$blackbook = array();
$blackbook["marty"] = "206-685-2181";
$blackbook["stuart"] = "206-685-9138";
...
print "Marty's number is " . $blackbook["marty"] . ".\n";

Uploading files (6.3.4) 

<form action="http://webster.cs.washington.edu/params.php"
      method="post" enctype="multipart/form-data">
	Upload an image as your avatar:
	<input type="file" name="avatar" />
	<input type="submit" />
</form>
  • it makes sense that the form's request method must be post (an entire file can't be put into a URL!)
  • form's enctype (data encoding type) must be set to multipart/form-data or else the file will not arrive at the server

Processing an uploaded file in PHP (6.4.3)

Uploading details 

<input type="file" name="avatar" />

Processing uploaded file, example

$username = $_REQUEST["username"];
if (is_uploaded_file($_FILES["avatar"]["tmp_name"])) {
	move_uploaded_file($_FILES["avatar"]["tmp_name"], "$username/avatar.jpg");
	print "Saved uploaded file as $username/avatar.jpg\n";
} else {
	print "Error: required file not uploaded";
}

Including files: include (5.4.2) 

include("filename");

include("header.php");

Functions (5.4.1) 

function name(parameterName, ..., parameterName) {
	statements;
}

function bmi($weight, $height) {
	$result = 703 * $weight / $height / $height;
	return $result;
}

Calling functions

name(expression, ..., expression);

$w = 163;  # pounds
$h = 70;   # inches
$my_bmi = bmi($w, $h);

Variable scope: global and local vars

$school = "UW";                   # global
...

function downgrade() {
	global $school;
	$suffix = "(Wisconsin)";        # local

	$school = "$school $suffix";
	print "$school\n";
}

Default parameter values

function name(parameterName = value, ..., parameterName = value) {
	statements;
}

function print_separated($str, $separator = ", ") {
	if (strlen($str) > 0) {
		print $str[0];
		for ($i = 1; $i < strlen($str); $i++) {
			print $separator . $str[$i];
		}
	}
}

print_separated("hello");        # h, e, l, l, o
print_separated("hello", "-");   # h-e-l-l-o

Extra stuff about associative arrays

Creating an associative array

$name = array();
$name["key"] = value;
...
$name["key"] = value;

$name = array(key => value, ..., key => value);

$blackbook = array("marty"  => "206-685-2181",
                   "stuart" => "206-685-9138",
                   "jenny"  => "206-867-5309");

Printing an associative array

print_r($blackbook);

Array
(
    [jenny] => 206-867-5309
    [stuart] => 206-685-9138
    [marty] => 206-685-2181
)

Associative array functions

if (isset($blackbook["marty"])) {
	print "Marty's phone number is {$blackbook['marty']}\n";
} else {
	print "No phone number found for Marty Stepp.\n";
}
name(s) category
isset, array_key_exists whether the array contains value for given key
array_keys, array_values an array containing all keys or all values in the assoc.array
asort, arsort sorts by value, in normal or reverse order
ksort, krsort sorts by key, in normal or reverse order

foreach loop and associative arrays

foreach ($blackbook as $key => $value) {
	print "$key's phone number is $value\n";
}

jenny's phone number is 206-867-5309
stuart's phone number is 206-685-9138
marty's phone number is 206-685-2181