Web Programming Step by Step, 2nd Edition

Chapter 6: Forms

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

6.1: Form Basics

6.1: Form Basics
6.2: Form Controls
6.3: Submitting Data
6.4: Processing Form Data in PHP

Web data

most interesting web pages revolve around data
- examples: Google, IMDB, Digg, Facebook, YouTube, Rotten Tomatoes
- can take many formats: text, HTML, XML, multimedia
many of them allow us to access their data
some even allow us to submit our own new data
most server-side web programs accept parameters that guide their execution

Query strings and parameters

URL?name=value&name=value...

http://www.google.com/search?q=Obama
http://example.com/student_login.php?username=stepp&id=1234567

query string: a set of parameters passed from a browser to a web server
- often passed by placing name/value pairs at the end of a URL
- above, parameter username has value stepp, and sid has value 1234567
PHP code on the server can examine and utilize the value of parameters
a way for PHP code to produce different output based on values passed by the user

HTML forms

form: a group of UI controls that accepts information from the user and sends the information to a web server
the information is sent to the server as a query string
JavaScript can be used to create interactive controls (seen later)

HTML form: `<form>`

<form action="destination URL">
	form controls
</form>

required action attribute gives the URL of the page that will process this form's data
when form has been filled out and submitted, its data will be sent to the action's URL
one page may contain many forms if so desired

Form example

<form action="http://www.google.com/search">
	<div>
		Let's search Google:
		<input name="q" />
		<input type="submit" />
	</div>
</form>

must wrap the form's controls in a block element such as div

6.2: Form Controls

6.1: Form Basics
6.2: Form Controls
6.3: Submitting Data
6.4: Processing Form Data in PHP

Form controls: `<input>`

<!-- 'q' happens to be the name of Google's required parameter -->
<input type="text" name="q" value="Colbert Report" />
<input type="submit" value="Booyah!" />

input element is used to create many UI controls
- an inline element that MUST be self-closed
name attribute specifies name of query parameter to pass to server
type can be button, checkbox, file, hidden, password, radio, reset, submit, text, ...
value attribute specifies control's initial text

Text fields: `<input>`

<input type="text" size="10" maxlength="8" /> NetID <br />
<input type="password" size="16" /> Password
<input type="submit" value="Log In" />

input attributes: disabled, maxlength, readonly, size, value
size attribute controls onscreen width of text field
maxlength limits how many characters user is able to type into field

Text boxes: `<textarea>`

a multi-line text input area (inline)

<textarea rows="4" cols="20">
Type your comments here.
</textarea>

initial text is placed inside textarea tag (optional)
required rows and cols attributes specify height/width in characters
optional readonly attribute means text cannot be modified

Checkboxes: `<input>`

yes/no choices that can be checked and unchecked (inline)

<input type="checkbox" name="lettuce" /> Lettuce
<input type="checkbox" name="tomato" checked="checked" /> Tomato
<input type="checkbox" name="pickles" checked="checked" /> Pickles

none, 1, or many checkboxes can be checked at same time

when sent to server, any checked boxes will be sent with value on:

http://webster.cs.washington.edu/params.php?tomato=on&pickles=on

use checked="checked" attribute in HTML to initially check the box

Radio buttons: `<input>`

sets of mutually exclusive choices (inline)

<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

grouped by name attribute (only one can be checked at a time)
must specify a value for each one or else it will be sent as value on

Text labels: `<label>`

<label><input type="radio" name="cc" value="visa" checked="checked" /> Visa</label>
<label><input type="radio" name="cc" value="mastercard" /> MasterCard</label>
<label><input type="radio" name="cc" value="amex" /> American Express</label>

associates nearby text with control, so you can click text to activate control
can be used with checkboxes or radio buttons
label element can be targeted by CSS style rules

Drop-down list: `<select>`, `<option>`

menus of choices that collapse and expand (inline)

<select name="favoritecharacter">
	<option>Jerry</option>
	<option>George</option>
	<option selected="selected">Kramer</option>
	<option>Elaine</option>
</select>

option element represents each choice
select optional attributes: disabled, multiple, size
optional selected attribute sets which one is initially chosen

Using `<select>` for lists

<select name="favoritecharacter[]" size="3" multiple="multiple">
	<option>Jerry</option>
	<option>George</option>
	<option>Kramer</option>
	<option>Elaine</option>
	<option selected="selected">Newman</option>
</select>

optional multiple attribute allows selecting multiple items with shift- or ctrl-click
- must declare parameter's name with [] if you allow multiple selections
option tags can be set to be initially selected

Option groups: `<optgroup>`

<select name="favoritecharacter">
	<optgroup label="Major Characters">
		<option>Jerry</option>
		<option>George</option>
		<option>Kramer</option>
		<option>Elaine</option>
	</optgroup>
	<optgroup label="Minor Characters">
		<option>Newman</option>
		<option>Susan</option>
	</optgroup>
</select>

What should we do if we don't like the bold italic?

Reset buttons

Name: <input type="text" name="name" /> <br />
Food: <input type="text" name="meal" value="pizza" /> <br />
<label>Meat? <input type="checkbox" name="meat" /></label> <br />
<input type="reset" />

when clicked, returns all form controls to their initial values
specify custom text on the button by setting its value attribute

Common UI control errors

I changed the form's HTML code ... but when I refresh, the page doesn't update!
- By default, when you refresh a page, it leaves the previous values in all form controls
- it does this in case you were filling out a long form and needed to refresh/return to it
- if you want it to clear out all UI controls' state and values, you must do a full refresh
  - Firefox: Shift-Ctrl-R
  - Mac: Shift-Command-R

Hidden input parameters

<input type="text" name="username" /> Name <br />
<input type="text" name="sid" /> SID <br />
<input type="hidden" name="school" value="UW" />
<input type="hidden" name="year" value="2048" />

an invisible parameter that is still passed to the server when form is submitted
useful for passing on additional state that isn't modified by the user

6.4: Processing Form Data in PHP

6.1: Form Basics
6.2: Form Controls
6.3: Submitting Data
6.4: Processing Form Data in PHP

Example: Exponents

$base = $_GET["base"];
$exp = $_GET["exponent"];
$result = pow($base, $exp);
print "$base ^ $exp = $result";

http://example.com/exponent.php?base=3&exponent=4

3 ^ 4 = 81

Example: Print all parameters

<?php
foreach ($_GET as $param => $value) {
	?>

	<p>Parameter <?= $param ?> has value <?= $value ?></p>

	<?php
}
?>

http://example.com/print_params.php?name=Marty+Stepp&sid=1234567

Parameter name has value Marty Stepp

Parameter sid has value 1234567

or call print_r or var_dump on $_GET or $_POST for debugging

6.2: Form Controls

6.1: Form Basics
6.2: Form Controls
6.3: Submitting Data
6.4: Processing Form Data in PHP

Grouping input: `<fieldset>`, `<legend>`

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>

fieldset groups related input fields, adds a border; legend supplies a caption

Styling form controls

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

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

attribute selector: matches only elements that have a particular attribute value
useful for controls because many share the same element (input)

6.3: Submitting Data

6.1: Form Basics
6.2: Form Controls
6.3: Submitting Data
6.4: Processing Form Data in PHP

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 />

this form submits to our handy params.php tester page
the form may look correct, but when you submit it...
[cc] => on, [startrek] => Jean-Luc Picard

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 />

value attribute sets what will be submitted if a control is selected
[cc] => visa, [startrek] => picard

URL-encoding

certain characters are not allowed in URL query parameters:
- examples: " ", "/", "=", "&"
when passing a parameter, it is URL-encoded (reference table)
- "Marty's cool!?" → "Marty%27s+cool%3F%21"
you don't usually need to worry about this:
- the browser automatically encodes parameters before sending them
- the PHP $_GET and $_POST arrays automatically decode them
- ... but occasionally the encoded version does pop up (e.g. in Firebug)

Submitting data to a web server

though browsers mostly retrieve data, sometimes you want to submit data to a server
- Hotmail: Send a message
- Flickr: Upload a photo
- Google Calendar: Create an appointment
the data is sent in HTTP requests to the server
- with HTML forms
- with Ajax (seen later)
the data is placed into the request as parameters

HTTP `GET` vs. `POST` requests

GET : asks a server for a page or data
- if the request has parameters, they are sent in the URL as a query string
POST : submits data to a web server and retrieves the server's response
- if the request has parameters, they are embedded in the request's HTTP packet, not the URL
For submitting data, a POST request is more appropriate than a GET
- GET requests embed their parameters in their URLs
- URLs are limited in length (~ 1024 characters)
- URLs cannot contain special characters without encoding
- private data in a URL can be seen or modified by users

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
	...
}

some PHP pages process both GET and POST requests
to find out which kind of request we are currently processing,
look at the global $_SERVER array's "REQUEST_METHOD" element

The `htmlspecialchars` function

htmlspecialchars returns an HTML-escaped version of a string

text from files / user input / query params might contain <, >, &, etc.
we could manually write code to strip out these characters
better idea: allow them, but escape them

$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

6.1: Form Basics
6.2: Form Controls
6.3: Submitting Data
6.4: Processing Form Data in PHP

"Superglobal" arrays

Array	Description
`$_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)

PHP superglobal arrays contain information about the current request, server, etc.:
These are special kinds of arrays called associative arrays.

Associative arrays

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

associative array (a.k.a. map, dictionary, hash table) : uses non-integer indexes
associates a particular index "key" with a value
- key "marty" maps to value "206-685-2181"
syntax for embedding an associative array element in interpreted string:
```
print "Marty's number is {$blackbook['marty']}.\n";
```

Uploading files

<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>

add a file upload to your form as an input tag with type of file
must also set the enctype attribute of the 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

uploaded files are placed into global array $_FILES, not $_POST
each element of $_FILES is itself an associative array, containing:
- name : the local filename that the user uploaded
- type : the MIME type of data that was uploaded, such as image/jpeg
- size : file's size in bytes
- tmp_name : a filename where PHP has temporarily saved the uploaded file
  - to permanently store the file, move it from this location into some other file

Uploading details

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

example: if you upload borat.jpg as a parameter named avatar,
- $_FILES["avatar"]["name"] will be "borat.jpg"
- $_FILES["avatar"]["type"] will be "image/jpeg"
- $_FILES["avatar"]["tmp_name"] will be something like "/var/tmp/phpZtR4TI"

Processing uploaded file, example

$username = $_POST["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";
}

functions for dealing with uploaded files:
- is_uploaded_file(filename)
  returns TRUE if the given filename was uploaded by the user
- move_uploaded_file(from, to)
  moves from a temporary file location to a more permanent file
proper idiom: check is_uploaded_file, then do move_uploaded_file

Including files: `include`

include("filename");

include("header.php");

inserts the entire contents of the given file into the PHP script's output page
encourages modularity
useful for defining reused functions needed by multiple pages

Functions

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

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

parameter types and return types are not written
a function with no return statements is implicitly "void"
can be declared in any PHP block, at start/end/middle of code

Calling functions

name(expression, ..., expression);

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

if the wrong number of parameters are passed, it's an error

Variable scope: global and local vars

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

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

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

variables declared in a function are local to that function; others are global
if a function wants to use a global variable, it must have a global statement
- but don't abuse this; mostly you should use parameters

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

if no value is passed, the default will be used (defaults must come last)

Extra stuff about associative arrays

6.1: Form Basics
6.2: Form Controls
6.3: Submitting Data
6.4: Processing Form Data in PHP
More 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");

can be declared either initially empty, or with a set of predeclared key/value pairs

Printing an associative array

print_r($blackbook);

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

print_r function displays all keys/values in the array
var_dump function is much like print_r but prints more info
unlike print, these functions require parentheses

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

both the key and the value are given a variable name
the elements will be processed in the order they were added to the array

A form that submits to itself

<form action="" method="post">
	...
</form>

a form can submit its data back to itself by setting the action to the page's own URL (or blank)
benefits
- fewer pages/files (don't need a separate file for the code to process the form data)
- can more easily re-display the form if there are any errors

Processing a self-submitted form

if ($_SERVER["REQUEST_METHOD"] == "GET") {
	# normal GET request; display self-submitting form
	?>
	<form action="" method="post">...</form>
	<?php
} elseif ($_SERVER["REQUEST_METHOD"] == "POST") {
	# POST request; user is submitting form back to here; process it
	$var1 = $_POST["param1"];
	...
}

a page with a self-submitting form can process both GET and POST requests
look at the global $_SERVER array to see which request you're handling
handle a GET by showing the form; handle a POST by processing the submitted form data

What is "Web 2.0"?

Web 2.0: A set of ideas and technologies for creating modern, interactive web applications
- Ajax, multimedia, streaming, stateful pages, cookies, user-generated content, web services, ...

What is a web service?

web service: software functionality that can be invoked through the internet using common protocols

like a remote function(s) you can call by contacting a program on a web server
many web services accept parameters and produce results
can be written in PHP and contacted by the browser in XHTML and/or Ajax code
service's output is often not HTML but rather text, XML, or other content types

Content ("MIME") types

MIME type	related file extension
text/plain	.txt
text/html	.html, .htm, ...
text/css	.css
text/javascript	.js
text/xml	.xml
image/gif	.gif
image/jpeg	.jpg, .jpeg
video/quicktime	.mov
application/octet-stream	.exe

Lists of MIME types: by type, by extension

Setting content type with `header`

header("Content-type: type/subtype");

header("Content-type: text/plain");
print("This output will appear as plain text now!\n");

by default, a PHP script's output is assumed to be HTML
use the header function to specify non-HTML output
- must appear before any other output generated by the script

Example: Exponent web service

Write a web service that accepts a base and exponent and outputs base raised to the exponent power. For example, the following query should output 81 :
```
http://example.com/exponent.php?base=3&exponent=4
```

solution:

header("Content-type: text/plain");
$base = $_GET["base"];
$exp = $_GET["exponent"];
$result = pow($base, $exp);
print $result;

The `$_SERVER` superglobal array

index	description	example
`$_SERVER["SERVER_NAME"]`	name of this web server	`"webster.cs.washington.edu"`
`$_SERVER["SERVER_ADDR"]`	IP address of web server	`"128.208.179.154"`
`$_SERVER["REMOTE_HOST"]`	user's domain name	`"hsd1.wa.comcast.net"`
`$_SERVER["REMOTE_ADDR"]`	user's IP address	`"57.170.55.93"`
`$_SERVER["HTTP_USER_AGENT"]`	user's web browser	`"Mozilla/5.0 (Windows; ..."`
`$_SERVER["HTTP_REFERER"]`	where user was before this page	`"http://www.google.com/"`
`$_SERVER["REQUEST_METHOD"]`	HTTP method used to contact server	`"GET"` or `"POST"`

call phpinfo(); to see a complete list

Emitting partial-page HTML data

# suppose my web service accepts a "type" query parameter ...
<?php if ($_GET["type"] == "html") { ?>
	<ul>
		<?php foreach ($students as $kid) { ?>
			<li> <?= $kid ?> </li>
		<?php } ?>
	</ul>
<?php } ?>

some web services do output HTML, but not a complete page
the partial-page HTML is meant to be fetched by Ajax and injected into an existing page

Emitting XML data

...
header("Content-type: text/xml");
print("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n");
?><books>
<?php foreach ($books as $title) { ?>
	<book title="<?= $title ?>" />
<?php } ?>
</books>

specify a content type of text/xml or application/xml
print an XML prologue (the <?xml line) first
- important: no whitespace output can precede the prologue; must be printed
then print each line of XML data/tags as output
some PHP libraries automatically generate XML for you from other data (e.g. databases)

Reporting errors

how does a web service indicate an error to the client?
- error messages (print) are not ideal, because they could be confused for normal output

web service should return an HTTP "error code" to the browser, possibly followed by output

these are the codes you see in Firebug's console and in your Ajax request's .status property

HTTP code	Meaning
200	OK
301-303	page has moved (permanently or temporarily)
400	illegal request
403	you are forbidden to access this page
404	page not found
500	internal server error
complete list

Using headers for HTTP error codes

header("HTTP/1.1  code  description");

if ($_POST["foo"] != "bar") {
	# I am not happy with the value of foo; this is an error
	header("HTTP/1.1 400 Invalid Request");
	die("An HTTP error 400 (invalid request) occurred.");
}

if (!file_exists($input_file_path)) {
	header("HTTP/1.1 404 File Not Found");
	die("HTTP error 404 occurred: File not found ($input_file_path)");
}

header can also be used to send back HTTP error codes
- header("HTTP/1.1 403 Forbidden");
- header("HTTP/1.1 404 File Not Found");
- header("HTTP/1.1 500 Server Error");

Checking for mandatory query parameters

function require_params($params) {
	# allow calling as a varargs function
	$params = func_get_args();
	foreach ($params as $param) {
		if (!isset($_POST[$param])) {
			header("HTTP/1.1 400 Invalid Request");
			die("HTTP/1.1 400 Invalid Request: missing required parameter $param");
		}
	}
}

func_get_args function allows a function to accept a varying # of params

Web Programming Step by Step, 2nd Edition

Lab 6: Forms

Web Programming Step by Step, 2nd Edition

Chapter 6: Forms

6.1: Form Basics

Web data

Query strings and parameters

HTML forms

HTML form: <form>

Form example

6.2: Form Controls

Form controls: <input>

Text fields: <input>

Text boxes: <textarea>

Checkboxes: <input>

Radio buttons: <input>

Text labels: <label>

Drop-down list: <select>, <option>

Using <select> for lists

Option groups: <optgroup>

Reset buttons

Common UI control errors

Hidden input parameters

6.4: Processing Form Data in PHP

Example: Exponents

Example: Print all parameters

6.2: Form Controls

Grouping input: <fieldset>, <legend>

Styling form controls

6.3: Submitting Data

Problems with submitting data

The value attribute

URL-encoding

Submitting data to a web server

HTTP GET vs. POST requests

Form POST example

GET or POST?

The htmlspecialchars function

6.4: Processing Form Data in PHP

"Superglobal" arrays

Associative arrays

Uploading files

Processing an uploaded file in PHP

Uploading details

Processing uploaded file, example

Including files: include

Functions

Calling functions

Variable scope: global and local vars

Default parameter values

Extra stuff about associative arrays

Creating an associative array

Printing an associative array

Associative array functions

foreach loop and associative arrays

A form that submits to itself

Processing a self-submitted form

What is "Web 2.0"?

What is a web service?

Content ("MIME") types

Setting content type with header

Example: Exponent web service

The $_SERVER superglobal array

Emitting partial-page HTML data

Emitting XML data

Reporting errors

Using headers for HTTP error codes

Checking for mandatory query parameters

HTML form: `<form>`

Form controls: `<input>`

Text fields: `<input>`

Text boxes: `<textarea>`

Checkboxes: `<input>`

Radio buttons: `<input>`

Text labels: `<label>`

Drop-down list: `<select>`, `<option>`

Using `<select>` for lists

Option groups: `<optgroup>`

Grouping input: `<fieldset>`, `<legend>`

The `value` attribute

HTTP `GET` vs. `POST` requests

The `htmlspecialchars` function

Including files: `include`

`foreach` loop and associative arrays

Setting content type with `header`

The `$_SERVER` superglobal array