<!--#include virtual="commontop.html" -->
<title>Web Programming Step by Step, Lecture 19: Web 2.0 and Web Services</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 19</h1>
<h2>Web 2.0 and Web Services</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 19 <br /> Web 2.0 and Web Services</h3>
<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>
<div class="slide">
<h1>What is "Web 2.0"?</h1>
<div class="figure">
<img src="images/web-2-0.gif" alt="web 2.0" />
</div>
<ul>
<li>
<strong>Web 2.0</strong>: A set of ideas and technologies for creating modern, interactive web applications
<ul>
<li>
Ajax, multimedia, streaming, stateful pages, cookies, user-generated content, web services, ...
</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>What is a web service?</h1>
<p>
<span class="term">web service</span>: software functionality that can be invoked through the internet using common protocols
</p>
<ul>
<li>like a remote function(s) you can call by contacting a program on a web server</li>
<li>many web services accept parameters and produce results</li>
<li>can be written in PHP and contacted by the browser in XHTML and/or Ajax code</li>
<li>service's output is often not HTML but rather text, XML, or other content types</li>
</ul>
</div>
<div class="slide">
<h1>
Content ("<a href="http://en.wikipedia.org/wiki/Mime_type">MIME</a>") types
<span class="readingsection">(1.2.3)</span>
</h1>
<table class="standard">
<tr>
<th>MIME type</th>
<th class="slidetable">related file extension</th>
</tr>
<tr class="code">
<td>text/plain</td><td>.txt</td>
</tr>
<tr class="code">
<td>text/html</td><td>.html, .htm, ...</td>
</tr>
<tr class="code">
<td>text/css</td><td>.css</td>
</tr>
<tr class="code">
<td>text/javascript</td><td>.js</td>
</tr>
<tr class="code">
<td>text/xml</td><td>.xml</td>
</tr>
<tr class="code">
<td>image/gif</td><td>.gif</td>
</tr>
<tr class="code">
<td>image/jpeg</td><td>.jpg, .jpeg</td>
</tr>
<tr class="code">
<td>video/quicktime</td><td>.mov</td>
</tr>
<tr class="code">
<td>application/octet-stream</td><td>.exe</td>
</tr>
</table>
<ul>
<li>Lists of MIME types: <a href="http://www.w3schools.com/media/media_mimeref.asp">by type</a>, <a href="http://www.webmaster-toolkit.com/mime-types.shtml">by extension</a></li>
</ul>
</div>
<div class="slide">
<h1>Setting content type with <code>header</code></h1>
<pre class="syntaxtemplate php">
header("Content-type: <var>type</var>/<var>subtype</var>");
</pre>
<pre class="examplecode php">
<em>header("Content-type: text/plain");</em>
print("This output will appear as plain text now!\n");
</pre>
<ul>
<li>by default, a PHP script's output is assumed to be HTML</li>
<li>use the <a href="http://www.php.net/header"><code>header</code></a> function to specify non-HTML output
<ul>
<li>must appear before any other output generated by the script</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Example: Exponent web service</h1>
<ul>
<li>
Write a web service that accepts a <code>base</code> and <code>exponent</code> and outputs <code>base</code> raised to the <code>exponent</code> power. For example, the following query should output <code>81</code> :
<pre class="examplecode url">
http://example.com/exponent.php?<em>base=3</em>&<em>exponent=4</em>
</pre>
</li>
<li class="incremental">
solution:
<pre class="examplecode php">
header("Content-type: text/plain");
$base = <em>$_REQUEST["base"]</em>;
$exp = <em>$_REQUEST["exponent"]</em>;
$result = pow($base, $exp);
print $result;
</pre>
</div>
<div class="slide">
<h1>Reporting errors</h1>
<ul>
<li>
how does a web service indicate an error to the client?
<ul>
<li>
error messages (<code>print</code>) are not ideal, because they could be confused for normal output
</li>
</ul>
</li>
<li>web service should return an HTTP "error code" to the browser, possibly followed by output
<ul>
<li>
these are the codes you see in Firebug's console and in your Ajax request's <code>.status</code> property
</li>
</ul>
<table class="standard">
<tr>
<th class="spaced">HTTP code</th><th>Meaning</th>
</tr>
<tr>
<td>200</td>
<td>OK</td>
</tr>
<tr>
<td><a href="http://clsc.net/research/google-302-page-hijack.htm">301-303</a></td>
<td>page has moved (permanently or temporarily)</td>
</tr>
<tr>
<td>400</td>
<td>illegal request</td>
</tr>
<tr>
<td><a href="http://www.cs.washington.edu/education/courses/cse190d/07sp/lectures/">403</a></td>
<td>you are forbidden to access this page</td>
</tr>
<tr>
<td><a href="http://www.homestarrunner.com/404.html">404</a></td>
<td>page not found</td>
</tr>
<tr>
<td>500</td>
<td>internal server error</td>
</tr>
<tr>
<td colspan="2" class="completelist"><a href="http://en.wikipedia.org/wiki/Http_error_codes">complete list</a></td>
</tr>
</table>
</li>
</ul>
</div>
<div class="slide">
<h1>Using headers for HTTP error codes</h1>
<pre class="syntaxtemplate php">
header("HTTP/1.1 <var>code</var> <var>description</var>");
</pre>
<pre class="examplecode php">
if ($_REQUEST["foo"] != "bar") {
<span class="comment"># I am not happy with the value of foo; this is an error</span>
<em>header("HTTP/1.1 400 Invalid Request");</em>
die("An HTTP error 400 (invalid request) occurred.");
}
</pre>
<pre class="examplecode php">
if (!file_exists($input_file_path)) {
<em>header("HTTP/1.1 404 Not Found");</em>
die("HTTP error 404 occurred: File not found ($input_file_path)");
}
</pre>
<ul>
<li>
<code>header</code> can also be used to send back HTTP error codes
<ul>
<li><code>header("HTTP/1.1 403 Forbidden");</code></li>
<li><code>header("HTTP/1.1 404 Not Found");</code></li>
<li><code>header("HTTP/1.1 500 Internal Server Error");</code></li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Checking for mandatory query parameters</h1>
<pre class="examplecode php">
function require_params($params) {
<span class="comment"># allow calling as a varargs function</span>
$params = func_get_args();
foreach ($params as $param) {
if (!isset($_REQUEST[$param])) {
header("HTTP/1.1 400 Invalid Request");
die("HTTP/1.1 400 Invalid Request: missing required parameter $param");
}
}
}
</pre>
<ul>
<li>
<a href="http://php.net/func_get_args"><code>func_get_args</code></a> function allows a function to accept a varying # of params
</li>
</ul>
</div>
<div class="slide">
<h1>The <a href="http://www.php.net/manual/en/reserved.variables.server.php"><code>$_SERVER</code></a> superglobal array</h1>
<table class="standard">
<tr>
<th>index</th>
<th>description</th>
<th>example</th>
</tr>
<tr>
<td><code>$_SERVER["SERVER_NAME"]</code></td>
<td>name of this web server</td>
<td><code>"webster.cs.washington.edu"</code></td>
</tr>
<tr>
<td><code>$_SERVER["SERVER_ADDR"]</code></td>
<td>IP address of web server</td>
<td><code>"128.208.179.154"</code></td>
</tr>
<tr>
<td><code>$_SERVER["REMOTE_HOST"]</code></td>
<td>user's domain name</td>
<td><code>"hsd1.wa.comcast.net"</code></td>
</tr>
<tr>
<td><code>$_SERVER["REMOTE_ADDR"]</code></td>
<td>user's IP address</td>
<td><code>"57.170.55.93"</code></td>
</tr>
<tr>
<td><code>$_SERVER["HTTP_USER_AGENT"]</code></td>
<td>user's web browser</td>
<td><code>"Mozilla/5.0 (Windows; ..."</code></td>
</tr>
<tr>
<td><code>$_SERVER["HTTP_REFERER"]</code></td>
<td>where user was before this page</td>
<td><code>"http://www.google.com/"</code></td>
</tr>
<tr>
<td><code>$_SERVER["REQUEST_METHOD"]</code></td>
<td>HTTP method used to contact server</td>
<td><code>"GET"</code> or <code>"POST"</code></td>
</tr>
</table>
<ul>
<li>
call <a href="http://www.php.net/phpinfo"><code>phpinfo();</code></a> to see a complete list
</li>
</ul>
</div>
<div class="slide">
<h1>Emitting partial-page HTML data</h1>
<pre class="examplecode php">
<span class="comment"># suppose my web service accepts a "type" query parameter ...</span>
<?php if ($_REQUEST["type"] == "html") { ?>
<em><ul></em>
<?php foreach ($students as $kid) { ?>
<em><li> <?= $kid ?> </li></em>
<?php } ?>
<em></ul></em>
<?php } ?>
</pre>
<ul>
<li>
some web services do output HTML, but not a complete page
</li>
<li>
the partial-page HTML is meant to be fetched by Ajax and injected into an existing page
</li>
</ul>
</div>
<div class="slide">
<h1>Emitting XML data</h1>
<pre class="examplecode php">
...
header("Content-type: text/xml");
print("<em><?xml version=\"1.0\" encoding=\"UTF-8\"?></em>\n");
?><em><books></em>
<?php foreach ($books as $title) { ?>
<em><book title="<?= $title ?>" /></em>
<?php } ?>
<em></books></em>
</pre>
<ul>
<li>
specify a content type of <code>text/xml</code> or <code>application/xml</code>
</li>
<li>
print an XML prologue (the <code><?xml</code> line) first
<ul>
<li>
<strong>important:</strong> no whitespace output can precede the prologue; must be <code>print</code>ed
</li>
</ul>
</li>
<li>
then print each line of XML data/tags as output
</li>
<li>
some PHP libraries automatically generate XML for you from other data (e.g. databases)
</li>
</ul>
</div>
<!--
web security basics
http referer
-->
<!--#include virtual="commonbottom.html" -->