Web Programming Step by Step

Lecture 9
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.

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>

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

The htmlspecialchars function

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

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

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