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 2009 Marty Stepp and Jessica Miller.

Reset buttons (6.2.7)

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

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>

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

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

Styling form controls (6.2.9)

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)

Hidden input parameters (6.3.2)

<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

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 (6.3.1)

• 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 $_REQUEST array automatically decodes 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 (6.3.3)

• 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

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>

• add a file upload to your form as an input tag with type of file
• must also set the enctype attribute of the form

"Superglobal" arrays (6.4.1)

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

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

• 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";
  

Processing an uploaded file in PHP (6.4.3)

• uploaded files are placed into global array $_FILES, not $_REQUEST
• 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 = $_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";
}

• 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 (5.4.2)

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