CSE 190M Web Programming

Lecture 9: More Forms; POST

Reading: 6.3 - 6.5

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, Victoria Kirst and Roy McElmurry IV. 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.

Valid HTML5 Valid CSS

6.3: Submitting Data

Problems with submitting data

<label>Name: <input type="text" /></label>
<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>Name: <input type="text" name="personname" /></label>
<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

Submitting data to a web server

Exercise: Turnin Page

We want to transform our grades.html page into a page for submitting our assignments rather than looking up grades.

  • Add a password form element so that we can verify who is turning in homework
  • Group the student data, section data and turnin data into their own portions of the form
  • Add a form element for submitting homework code
    • Notice that the url is huge when you submit it
    • Notice that the password is shown in plaintext in the url

HTTP GET vs. POST requests

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

6.4: Processing Form Data in PHP

"Superglobal" arrays

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

Associative arrays 

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

Exercise: Turnin Backend

Let's write a PHP file that will receive the action of our turnin form that does the following:

  • responds with an error message if the request did not use the POST method
  • saves the submitted code in a file at the location section/sid/homework
    • we might use value parameters to make this task easier
  • gives a success message if the save was successful and prints back the code received

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

Uploading details 

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

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

Exercise: Turnin File

  • Change our form to allow the user to turn in a file

Including files: include 

include("filename");

include("header.html");
include("shared-code.php");

Exercise: Common HTML

  • Use include to reduce the redundancy between our turnin, grades, and save-hw pages

What is form validation?

A real form that uses validation

wamu

Client vs. server-side validation

Validation can be performed:

An example form to be validated

<form action="http://foo.com/foo.php" method="get">
	<div>
		City:  <input name="city" /> <br />
		State: <input name="state" size="2" maxlength="2" /> <br />
		ZIP:   <input name="zip" size="5" maxlength="5" /> <br />
		<input type="submit" />
	</div>
</form>

One problem: Users submitting HTML content

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

Exercise: Turnin HTML

  • Update our turnin page so that it can display HTML code back to the user

Why use classes and objects?

Constructing and using objects

# construct an object
$name = new ClassName(parameters);

# access an object's field (if the field is public)
$name->fieldName

# call an object's method
$name->methodName(parameters);

$zip = new ZipArchive();
$zip->open("moviefiles.zip");
$zip->extractTo("images/");
$zip->close();

Object example: Fetch file from web

# create an HTTP request to fetch student.php
$req = new HttpRequest("student.php", HttpRequest::METH_GET);
$params = array("first_name" => $fname, "last_name" => $lname);
$req->addPostFields($params);

# send request and examine result
$req->send();
$http_result_code = $req->getResponseCode();   # 200 means OK
print "$http_result_code\n";
print $req->getResponseBody();

Class declaration syntax

class ClassName {
	# fields - data inside each object
	public $name;    # public field
	private $name;   # private field

	# constructor - initializes each object's state
	public function __construct(parameters) {
		statement(s);
	}

	# method - behavior of each object
	public function name(parameters) {
		statements;
	}
}

Class example

<?php
class Point {
	public $x;
	public $y;

	# equivalent of a Java constructor
	public function __construct($x, $y) {
		$this->x = $x;
		$this->y = $y;
	}

	public function distance($p) {
		$dx = $this->x - $p->x;
		$dy = $this->y - $p->y;
		return sqrt($dx * $dx + $dy * $dy);
	}

	# equivalent of Java's toString method
	public function __toString() {
		return "(" . $this->x . ", " . $this->y . ")";
	}
}
?>

Class usage example

<?php
# this code could go into a file named use_point.php
include("Point.php");

$p1 = new Point(0, 0);
$p2 = new Point(4, 3);
print "Distance between $p1 and $p2 is " . $p1->distance($p2) . "\n\n";

var_dump($p2);   # var_dump prints detailed state of an object
?>

Distance between (0, 0) and (4, 3) is 5

object(Point)[2]
  public 'x' => int 4
  public 'y' => int 3

Basic inheritance

class ClassName extends ClassName {
	...
}

class Point3D extends Point {
	public $z;

	public function __construct($x, $y, $z) {
		parent::__construct($x, $y);
		$this->z = $z;
	}

	...
}

Static methods, fields, and constants

static $name = value;    # declaring a static field
const $name = value;     # declaring a static constant

# declaring a static method
public static function name(parameters) {
	statements;
}

ClassName::methodName(parameters);  # calling a static method (outside class)
self::methodName(parameters);       # calling a static method (within class)

Abstract classes and interfaces 

interface InterfaceName {
	public function name(parameters);
	public function name(parameters);
	...
}

class ClassName implements InterfaceName { ...

abstract class ClassName {
	abstract public function name(parameters);
	...
}