Web Services

One important use of AJAX and PHP is to allow you to write web services.
A web service is a programming interface which can be invoked over HTTP.
The first attempts to standardize such services made use of things like WSDL, SOAP, UDDI, etc. XML languages which tended to violate the KISS (keep it simple stupid) principle.
Some simpler web service interfaces have been written by major companies using XML-RPC, JSON-RPC and REST.
A XML-RPC document is a XML document which specifies a remote procedure call, i.e., which function of which object to invoke on some server; or it specifies the response of such a call. It later evolved into the more complicated and still evolving SOAP (Simple Object Access protocol)
JSON-RPC is like XML-RPC but uses JavaScript Object Notation -- basically, a snippet of Javascript code for an object.

REST

REST stands for Representational State Transfer. It is a technique for writing web services developed by Roy Fielding in 2000.
The idea is that an application state/method is viewed a resource. Each resource has a URL. There is a well defined way to tack on to this URL a query to invoke the function and return results. For example, the Yioop News Service might be invoked with a line like:
```
http://www.yioop.com/s/news?f=rss&limit=20&num=30
```
The resource in this case is "http://www.yioop.com/s/news" and the arguments are (f, limit, num) which control the returned value from the resource.

In general, a web service for an object might be given by

url/my_obj/method1?arg_1_for_method1=value_1&
    arg_2_for_method1=value_2...
url/my_obj/method2?arg_1_for_method2=value_1&
    arg_2_for_method2=value_2...
...

Let's Build Something

A sports report consists of a date, a sport name (hockey, for example), and a sequence of games. Each game consists of a winning team, a losing team, and a score. Create a DTD for sports. Then make one XML document that conforms to your DTD. Finally, come up with useful arguments for a REST api for a (made-up) sports news service at the resource location http://my-sport.com/. Give at least three urls with a sentence of explanation say how to use your services.
Post your solutions to the Nov 16 Thread on the discussion board.

JSON

Stands for Javascript Object Notation.
It is commonly used for sending data when REST is used by Javascript can immediately use the data.

Primitive types in JSON are written as you expect:

12.3  -- an example Number
"hi there" -- an example String
true -- an example Boolean, other possibility false

Arrays are written in square brackets and comma separated:
```
[1, 4, 9]
```
Objects are written in braces and the name value pair are separated by a colon:
```
{"bob": 29,  "sally" : 35}
```
JSON data can be assigned to an object with the syntax:
```
myObj = eval( "(" + data + ")" );
```

Proxies

Javascript function is only allowed to make requests back to the server from which it came.
Suppose if you have a page http://somewhere.com/index.html and you would like the Javascript on it to make use of the Yioop Rest API (Yioop being the code used for the class discussion board), how do you do it?
You need to use a proxy on your server which passes the request onto Yioop

Consider the following example proxy script for the Yioop News service:

<?php
define ('YIOOP_NEWS_URL', 'https://www.yioop.com/s/news/');

// look at incoming request fields
$query = (!empty($_REQUEST['f']) && in_array($_REQUEST['f'], ["rss", "json"])) ?
    "?f=" . $_REQUEST['f'] : "";

$url = YIOOP_NEWS_URL . $query;

// Open the Curl session
$request_handle = curl_init($url);

// If we wanted to use post we could uncomment the lines below
//curl_setopt ($request_handle, CURLOPT_POST, true);
//curl_setopt ($request_handle, CURLOPT_POSTFIELDS, $postvars);

// Don't bother with the HTTP headers. Do bother with the content back
curl_setopt($request_handle, CURLOPT_HEADER, false);
curl_setopt($request_handle, CURLOPT_RETURNTRANSFER, true);

// Make proxy request
$response_content = curl_exec($request_handle);

//determine the content-type of the respeonse
$pre_content_type = curl_getinfo($request_handle, CURLINFO_CONTENT_TYPE);
$content_type = (empty($pre_content_type)) ? "text/html" : $pre_content_type;

// Set the outgoing proxy content type
header("Content-Type: $content_type");

echo $response_content;
curl_close($request_handle);

To use such a proxy, you need to have PHP running on your machine and it needs to have curl enabled.
By tacking on different query strings such as ?f=rss or ?f=json to the url above you can control the format of the response.

JSONP

You might wonder if there is a more client-side way to do proxying in the case where we can't add code to our server to make the proxy request. For example, suppose our hosting doesn't allow curl requests.
One way to fake this is to use a web service that can respond with JSONP (JSON with Padding).
Such a service returns the JSON data within a Javascript function call of the requester's choice.
For example, the request:
https://www.yioop.com/s/news?f=json&callback=myHandleDataCode
return data that looks like:
```
// API callback
myHandleDataCode({"language":"en-US","link":"http...etc...etc ...});
```

So in my HTML page I could have the script tags:

<script>
function myHandleDataCode(obj)
{
    // do something pretty with json data
}
<script>
<script src="https://www.yioop.com/s/news?f=json&callback=myHandleDataCode" />

Promises

Using XHR requests involve setting up a callback which is executed later after some event occurs.
Since about 2014 most major browsers support in Javascript a generic mechanism for doing this called Promises.
Suppose one was reading a PDF through the Javascript PDF viewer PDFJS. Then one left the site and came back. Suppose the script stored your previous location and now needs to restore it, but it first must wait until the pdf you were viewing has downloaded.

You could do this with code like:

<script src="http://url_for_pdf.js/pdf.js" ></script>
<script>
</script>
function renderPdfPage(media_obj, num)
{
    if (media_obj.reflect_rendering) {
        return;
    }
    var media_name = media_obj.reflect_name;
    media_obj.reflect_page_num = num;
    media_obj.reflect_rendering = true;
    media_obj.getPage(num).then(function(page) {
        var viewport = page.getViewport(1.5,
            parseInt(media_obj.reflect_orientation));
        var canvas = document.getElementById('area-' + media_name);
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        var renderTask = page.render(renderContext);
        renderTask.promise.then(function () {
            media_obj.reflect_rendering = false;
        });
    });
}
PDFJS.getDocument(url_of_document_viewing).then(
    function (pdf) {
        if (localStorage) {
             old_page = localStorage.getItem(url_of_document_viewing_old_page);
             renderPdfPage(pdf, old_page);
        } else {
             renderPdfPage(pdf, 1);
        }
    }
);

The general format of a Javascript promise is

my_promise = new Promise( function (resolve, reject) {} );
my_promise.then(function(arg_list) {
   // when anonymous function above calls resolve this code runs.
}).catch(function(arg_list) {
   // when anonymous function above calls reject this code runs.
} )

File Uploads

We are now going to look at a couple of useful things PHP can do with regard to form processing.
We have already seen that usually information sent from forms is provided to our PHP scripts in the global variables: $_REQUEST, $_POST, $_GET
These variables though are not used to handle file uploads. Instead, the variable $_FILES is used.

Example

Consider the form:

<form enctype="multipart/form-data" method="post" action="test_upload1.php" >
   <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
   <!-- The size is also controlled by php.ini -->
   <input type="file" name="docname" />
   <input type="submit" value="Upload" />
</form>

When test_upload1.php is run, the global variable $_FILES["docname"] will be set to something like:

Array(    
      [name] => mystyles.css    
      [type] => text/css    
      [tmp_name] => /private/var/folders/k-/k-GHnyslGhyOhMqq80ZXgk+++TI/-Tmp-/phpcSLlhk    
      [error] => 0    [size] => 157)

Hence, we can then do a command like:

move_uploaded_file($_FILES["docname"]["tmp_name"], "$where_we_want");

to get the file where we would like.

Security

We are now going to spend the rest of the lecture looking at various things vaguely connected with security.
Often data from clients comes to your server via some form. For example, the file upload processing we just did.
One annoyance you will have to deal with is robots that find your web forms and upload garbage to your site, spamming you.
One solution to this problem is to use Captcha's.

Captcha

CAPTCHA stands for Completely Automated Public Turing Test to tell Computers and Humans Apart.
These were developed at Carnegie Mellon around 2000 by Luis von Ahn, Manuel Blum, Nicholas Hopper, and John Langford.
The basic idea is that you put on your form an image of a distorted string.
You hope the robot cannot decipher the string from the image so won't be able to fill out that portion of the form correctly:
Please type the following text:

Making a Simple Captcha in PHP

The previous CAPTCHA might be created with the code:

<p><b>Please type in the following text:</b>

<?php
$md5 = md5(microtime() * mktime());

$captcha_string = substr($md5,0,5);

$captcha_img = imagecreatetruecolor(70, 40);

$color = imagecolorallocate($captcha_img, 255, 0, 255);

$line = imagecolorallocate($captcha_img,233,239,239);

imagestring($captcha_img, 5, 10, 10, $captcha_string, $color);
imageline($captcha_img,0,0,39,29,$line);
imageline($captcha_img,40,0,64,29,$line);
imageline($captcha_img,0,40,64,0,$line);

// get a output as jpeg into a string, 100=not-lossy
ob_start();
imagejpeg($captcha_img, 100);
$image_data = ob_get_contents();
ob_end_clean();
$data_url = "data:image/jpeg;base64," . base64_encode($image_data);
imagedestroy($captcha_img);

$_SESSION['key'] = $captcha_string;

?>

<img src="<?=$data_url ?>" alt="captcha" style="position:relative; top:15px;"/>

<input type="text" name="key" size="5" /></p>

Thumbnails

The code for creating a captcha uses the image libraries which can also be useful for creating such things as thumbnails:

 function createThumb($base, $filename)
 {  
     $image = imagecreatefromjpeg($base.$filename);
     //or could have imagecreatefromgif, etc
	$size = getimagesize($base.$filename);	  	  
	  $thumb = imagecreatetruecolor(50, 50);
	  imagecopyresampled($thumb, $image, 0,0, 0,0, 50, 50, $size[0],$size[1]);
	  
     imagejpeg( $thumb, $base."thumb.jpg", 100 );
     imagedestroy($image);
     imagedestroy($thumb); 
 }

Sending a Mail Message

It is often useful to collect a person's e-mail address with a form.
By mailing, a person a special code that allows them to complete a registration process, one can verify that one has a real e-mail address of a real person.

The simplest way to do this is to use the mail() command:

$message = "Here is a mail message";
mail("Someone@somewhere.com",
     "Here is the title", 
     $message, 
     "From: cpollett@somewhereelse.com");

This could be combined with a captcha to try to reduce the risk of your site spamming other sites.

Webservices, Proxies, Rest, File Uploads, Security

Outline