CSSE 290 Web Programming

Lecture 10: Submitting Form Data; POST; Debugging

Reading: 6.3 - 6.5

Attribution: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.

Otherwise noted: Claude Anderson was given permission to modify the slides for CSSE 290 at Rose-Hulman by author Jessica Miller. The authors' original slides, based on Web Programming Step by Step, can be seen at http://webstepbook.com.
Some of the examples in some days' slides are from David Fisher at Rose-Hulman, who was kind enough to allow me to use them. My intention is to mark these examples with [DSF].

Announcements

• HW 3 due Thursday, at beginning 11:59 PM
• Exam scores were very good overall. Details in email I sent during the break.
• First hour of Thursday's class will be work time.
  If both you and your partner have finished all four PHP in-class exerciuses, you vcan just come for the second hour.

Recap: Submitting Data to a Web Server

• Although browsers mostly retrieve data, sometimes you want to submit data to a server
  • Facebook: Post your status
  • Instagram: 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

Recap: 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
• When submitting data to be saved, POST is more appropriate than 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 others

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>

PHP: GET or POST?

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

• Some PHP pages can 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

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

"Superglobal" arrays

• PHP superglobal arrays contain information about the current request, server, etc.:
• Consensus on the web seems to be that use of $GET or $_POST is preferred over $_REQUEST
• All of these are associative arrays.

Associative Arrays

$blackbook = array();
$blackbook["marty"] = "444-444-4444";
$blackbook["stuart"] = "444-444-5555";
...
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 "444-444-4444"
• 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
• It makes sense that the form's request method must be post (an entire file can't be put into a URL!)
• Must also set the enctype attribute of the form
• Form's enctype (data encoding type) must be set to multipart/form-data or else the file will not arrive at the server