<!--#include virtual="commontop.html" -->
<title>Web Programming Step by Step, Lecture 9: More HTML Forms</title>
</head>
<body>
<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1><em>Web Programming Step by Step</em>, Lecture 9</h1>
<h2>More HTML Forms</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1><a href="http://www.webstepbook.com/">Web Programming Step by Step</a></h1>
<h3>Lecture 9 <br /> More HTML Forms; Posting Data</h3>
<h4>Reading: 6.3 - 6.5</h4>
<p class="license">
Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<!-- *** there should be a slide here about float left to align form columns -->
<!--
*** this is more useful for ASCIImation...
<div class="slide">
<h1>Styling Text Boxes</h1>
<pre class="examplecode html">
<textarea <em>rows="3" cols="40"</em>></textarea>
</pre>
<pre class="examplecode js">
body { <em>height: 100%;</em> }
textarea {
<em>position: absolute;</em>
<em>width: 50%;</em>
<em>height: 15%;</em>
}
</pre>
<ul>
<li>XHTML validator requires <code>rows</code> and <code>cols</code> on a <code>textarea</code></li>
<li>if you want a <code>textarea</code> at a specific width/height in pixels or %, you must specify <code>rows</code>/<code>cols</code> in the XHTML <em>and</em> <code>width</code>/<code>height</code> in the CSS
<ul>
<li>the <code>rows</code>/<code>cols</code> will be ignored but must be there anyway...</li>
<li>sometimes specifying a <code>height</code> on the page's <code>body</code> helps</li>
<li>sometimes using absolute/fixed positioning on the <code>textarea</code> helps</li>
</ul>
</li>
</ul>
</div>
-->
<div class="slide titleslide">
<h1>6.3: Submitting Data</h1>
<ul>
<li>
6.1: Form Basics
</li>
<li>
6.2: Form Controls
</li>
<li>
<strong>6.3: Submitting Data</strong>
</li>
<li>
6.4: Processing Form Data in PHP
</li>
</ul>
</div>
<div class="slide">
<h1>Problems with submitting data</h1>
<div class="example">
<pre class="examplecode html" style="font-size: smaller">
<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 />
</pre>
<form action="http://webster.cs.washington.edu/params.php" class="exampleoutput insertoutput">
<input type="submit" />
</form>
</div>
<ul>
<li>this form submits to our handy <a href="http://webster.cs.washington.edu/params.php">params.php</a> tester page</li>
<li>the form may look correct, but when you submit it...</li>
<li><code><em class="bad">[cc] => on</em>, [startrek] => Jean-Luc Picard</code></li>
</ul>
</div>
<div class="slide">
<h1>The <code>value</code> attribute</h1>
<div class="example">
<pre class="examplecode html" style="font-size: smaller">
<label><input type="radio" name="cc" <em>value="visa"</em> /> Visa</label>
<label><input type="radio" name="cc" <em>value="mastercard"</em> /> MasterCard</label> <br />
Favorite Star Trek captain:
<select name="startrek">
<option <em>value="kirk"</em>>James T. Kirk</option>
<option <em>value="picard"</em>>Jean-Luc Picard</option>
</select> <br />
</pre>
<form action="http://webster.cs.washington.edu/params.php" class="exampleoutput insertoutput">
<input type="submit" />
</form>
</div>
<ul>
<li><code>value</code> attribute sets what will be submitted if a control is selected</li>
<li><code>[cc] => visa, [startrek] => picard</code></li>
</ul>
</div>
<div class="slide">
<h1>
URL-encoding
<span class="readingsection">(6.3.1)</span>
</h1>
<ul>
<li>certain characters are not allowed in URL query parameters:
<ul>
<li>examples: <code>" "</code>, <code>"/"</code>, <code>"="</code>, <code>"&"</code></li>
</ul>
</li>
<li>when passing a parameter, it is <span class="term">URL-encoded</span>
(<a class="popup" href="http://www.w3schools.com/TAGS/ref_urlencode.asp">reference table</a>)
<ul>
<li><code>"Marty's cool!?"</code> → <code>"Marty<em>%27s+</em>cool<em>%3F%21</em>"</code></li>
</ul>
</li>
<li>you don't usually need to worry about this:
<ul>
<li>the browser automatically encodes parameters before sending them</li>
<li>the PHP <code>$_REQUEST</code> array automatically decodes them</li>
<li>
... but occasionally the encoded version does pop up (e.g. in Firebug)
</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Submitting data to a web server</h1>
<ul>
<li>though browsers mostly retrieve data, sometimes you want to submit data to a server
<ul>
<li>Hotmail: Send a message</li>
<li>Flickr: Upload a photo</li>
<li>Google Calendar: Create an appointment</li>
</ul>
</li>
<li>the data is sent in HTTP requests to the server
<ul>
<li>with HTML forms</li>
<li>with <span class="term">Ajax</span> (seen later)</li>
</ul>
</li>
<li>the data is placed into the request as parameters</li>
</ul>
</div>
<div class="slide">
<h1>
HTTP <code>GET</code> vs. <code>POST</code> requests
<span class="readingsection">(6.3.3)</span>
</h1>
<ul>
<li>
<strong><code>GET</code></strong> : asks a server for a page or data
<ul>
<li>if the request has parameters, they are sent in the URL as a query string</li>
</ul>
</li>
<li>
<strong><code>POST</code></strong> : submits data to a web server and retrieves the server's response
<ul>
<li>if the request has parameters, they are embedded in the request's HTTP packet, not the URL</li>
</ul>
</li>
<!--
<li>
<strong><code>put</code></strong> : uploads an entire file to a web server
<ul>
<li>useful for large uploads such as image files and email attachments</li>
</ul>
</li>
-->
<li class="incremental">
For submitting data, a <code>POST</code> request is more appropriate than a <code>GET</code>
<ul>
<li><code>GET</code> requests embed their parameters in their URLs</li>
<li>URLs are limited in length (~ 1024 characters)</li>
<li>URLs cannot contain special characters without encoding</li>
<li><a href="http://www.allvirtualware.com/languages/french_translation_software.htm">private data in a URL</a> can be seen or modified by users</li>
</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Form POST example</h1>
<div class="example">
<pre class="examplecode html">
<form action="http://foo.com/app.php" <em>method="post"</em>>
<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>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
</div>
<div class="slide titleslide">
<h1>6.4: Processing Form Data in PHP</h1>
<ul>
<li>
6.1: Form Basics
</li>
<li>
6.2: Form Controls
</li>
<li>
6.3: Submitting Data
</li>
<li>
<strong>6.4: Processing Form Data in PHP</strong>
</li>
</ul>
</div>
<div class="slide">
<h1>
"Superglobal" arrays
<span class="readingsection">(6.4.1)</span>
</h1>
<table class="standard underscorelink">
<tr>
<th>Array</th>
<th>Description</th>
</tr>
<tr>
<td>
<a href="http://www.php.net/manual/en/reserved.variables.request.php"><code>$_REQUEST</code></a>
</td>
<td>parameters passed to any type of request</td>
</tr>
<tr>
<td>
<a href="http://www.php.net/manual/en/reserved.variables.get.php"><code>$_GET</code></a>,
<a href="http://www.php.net/manual/en/reserved.variables.post.php"><code>$_POST</code></a>
</td>
<td>parameters passed to GET and POST requests</td>
</tr>
<tr>
<td>
<a href="http://www.php.net/manual/en/reserved.variables.server.php"><code>$_SERVER</code></a>,
<a href="http://www.php.net/manual/en/reserved.variables.environment.php"><code>$_ENV</code></a>
</td>
<td>information about the web server</td>
</tr>
<tr>
<td>
<a href="http://www.php.net/manual/en/reserved.variables.files.php"><code>$_FILES</code></a>
</td>
<td>files uploaded with the web request</td>
</tr>
<tr>
<td>
<a href="http://www.php.net/manual/en/reserved.variables.session.php"><code>$_SESSION</code></a>,
<a href="http://www.php.net/manual/en/reserved.variables.cookies.php"><code>$_COOKIE</code></a>
</td>
<td>"cookies" used to identify the user (seen later)</td>
</tr>
</table>
<ul>
<li>
PHP <span class="term">superglobal</span> arrays contain information about the current request, server, etc.:
</li>
<li>
These are special kinds of arrays called <span class="term">associative arrays</span>.
</li>
</ul>
</div>
<div class="slide">
<h1>The <code>htmlspecialchars</code> function</h1>
<table class="standard">
<tr>
<td>
<a href="http://www.php.net/htmlspecialchars"><code>htmlspecialchars</code></a>
</td>
<td>
returns an HTML-escaped version of a string
</td>
</tr>
</table>
<ul>
<li>text from files / user input / query params might contain <, >, &, etc.</li>
<li>we could manually write code to strip out these characters</li>
<li>better idea: allow them, but <span class="term">escape</span> them</li>
</ul>
<pre class="php">
$text = "<p>hi 2 u & me</p>";
$text = htmlspecialchars($text); <span class="comment"># "&lt;p&gt;hi 2 u &amp; me&lt;/p&gt;"</span>
</pre>
</div>
<div class="slide">
<h1>Processing uploaded file, example</h1>
<pre class="examplecode php">
$username = $_REQUEST["username"];
if (<em>is_uploaded_file($_FILES["avatar"]["tmp_name"])</em>) {
<em>move_uploaded_file($_FILES["avatar"]["tmp_name"], "$username/avatar.jpg")</em>;
print "Saved uploaded file as $username/avatar.jpg\n";
} else {
print "Error: required file not uploaded";
}
</pre>
<ul>
<li>functions for dealing with uploaded files:
<ul>
<li>
<code>is_uploaded_file(<var>filename</var>)</code> <br />
returns <code>TRUE</code> if the given filename was uploaded by the user
</li>
<li>
<code>move_uploaded_file(<var>from</var>, <var>to</var>)</code> <br />
moves from a temporary file location to a more permanent file
</li>
</ul>
</li>
<li>proper idiom: check <code>is_uploaded_file</code>, then do <code>move_uploaded_file</code></li>
</ul>
</div>
<div class="slide">
<h1>
Including files: <a href="http://www.php.net/include"><code>include</code></a>
<span class="readingsection">(5.4.2)</span>
</h1>
<pre class="syntaxtemplate php">
include("<var>filename</var>");
</pre>
<pre class="examplecode php">
include("header.php");
</pre>
<ul>
<li>inserts the entire contents of the given file into the PHP script's output page</li>
<li>encourages modularity</li>
<li>useful for defining reused functions needed by multiple pages</li>
</ul>
</div>
<!--#include virtual="commonbottom.html" -->