COAP:COAP-3110/week7

COAP 3110

COAP:COAP-3110

COAP:COAP-3110/term project

COAP:COAP-3110/week1

COAP:COAP-3110/week2

COAP:COAP-3110/week3

COAP:COAP-3110/week4

COAP:COAP-3110/week5

COAP:COAP-3110/week6

COAP:COAP-3110/week7

COAP:COAP-3110/week8

Learning goals

• Using Webservices (REST) with PHP and JavaScript JSON
• Term project report writing

... details, TBA

Monday

A first glance at REST

According to Wikipedia, “A Web service is a service offered by an electronic device to another electronic device, communicating with each other via the World Wide Web. In a Web service, Web technology such as HTTP, originally designed for human-to-machine communication, is utilized for machine-to-machine communication, more specifically for transferring machine readable file formats such as XML and JSON. In practice, the Web service typically provides an object-oriented Web-based interface to a database server, utilized for example by another Web server, or by a mobile application, that provides a user interface to the end user. Another common application offered to the end user may be a mashup, where a Web server consumes several Web services at different machines, and compiles the content into one user interface.”

There exist several types of web services, e.g. the more traditional stack built around SOAP.

Currently, REST is the most popular mechanism used by more light-weight portals and more generally speaking all sorts of services that deal with information, as opposed to commercial transactions for example.

Hands on wordpress

By default, WordPress does not have a REST API, so we will have to install a plugin

(1) Please install the Wordpress plugin:

• WordPress REST API (V2)

(2) Get a list of posts from one of your colleagues web site.

Have a look at:

• http://v2.wp-api.org/reference/posts/

Do it:

• http://yoursite.com/wp-json/wp/v2/posts
• https://wtfismyip.com/ (will give you the IP number of your PC)

Hands on data from a MediaWiki

(1) Retrieve all COAP 3110 pages from edutechwiki

Have a look at:

• http://edutechwiki.unige.ch/mediawiki/api.php
• http://edutechwiki.unige.ch/mediawiki/api.php?action=help&modules=query
• http://edutechwiki.unige.ch/mediawiki/api.php?action=query&list=categorymembers&cmtitle=Category:COAP_2170

(2) Example that returns JSON code for COAP 3110

• http://edutechwiki.unige.ch/mediawiki/api.php?action=query&list=categorymembers&cmtitle=Category:COAP_3110&format=json

Parameters

• action=query - will tell the API to do a query
• list=categorymembers - returns a list of members of a category
• cmtitle= - defines the Category to look for
• format=... - defines the format to return.

Resulting datastructure (example)

{"batchcomplete" : "",
 "query" : {"categorymembers":[
                              {"pageid":9883,"ns":106,"title":"COAP:COAP-3110"},
                              {"pageid":9902,"ns":106,"title":"COAP:COAP-3110/week1"},
                              {"pageid":10230,"ns":106,"title":"COAP:COAP-3110/week2"},
                              {"pageid":10232,"ns":106,"title":"COAP:COAP-3110/week3"},
                              {"pageid":10278,"ns":106,"title":"COAP:COAP-3110/week4"},
                              {"pageid":10279,"ns":106,"title":"COAP:COAP-3110/week5"},
                              {"pageid":10280,"ns":106,"title":"COAP:COAP-3110/week6"},
                              {"pageid":10293,"ns":106,"title":"COAP:COAP-3110/week7"},
                              {"pageid":10292,"ns":106,"title":"COAP:COAP-3110/week8"}
           ]}
}

By changing some parameters, you could simplify the results returned. You only need the title for the page !

(3) Get category pages from from Wikipedia, i.e. complete the URL below

• https://en.wikipedia.org/w/api.php?action=query&........

Idea: WP has a complex category system for games, e.g. look at Video Game genres or Video games by genre. Pick a sub sub category and list the pages, e.g. the Civilization series.

• https://en.wikipedia.org/w/api.php?action=query&list=categorymembers&format=json&cmtitle=Category:Civilization_(series)

You will have to adapt the query if a category includes more than 10 entries.

• Read https://en.wikipedia.org/w/api.php?action=help&modules=query%2Bcategorymembers

Doing it with a PHP script

Live code:

• http://tecfa.unige.ch/guides/php/php7/REST/rest-get-pages-wikipedia.php (executable)
• http://tecfa.unige.ch/guides/php/php7/REST/rest-get-pages-wikipedia.text (source)

Copy/paste the following PHP file into an editor and adapt.

<!DOCTYPE html>
    <html lang="en">
    <head><title>Demo</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /></head>

    <body>
    This seems to work. See <a href="https://en.wikipedia.org/w/api.php">the MW API at wikipedia. </a>
    </p>

<?php

// change the following line
$category = 'Category:Civilization_(series)';

$params = array(
		'action' => 'query',
		'list' => 'categorymembers',
		'format' => 'json',
		'cmprop' => 'title',
		'cmtype' => 'page',
		'cmlimit' => '500',
		'cmtitle' => $category
		);

$url = 'https://en.wikipedia.org/w/api.php?' . http_build_query($params);

// echo ("URL =" . $url);
$jsonData = file_get_contents($url);
$data = json_decode($jsonData);

if ($data) doDisplay ($data,$category); else die ("No data, something's wrong");

function doDisplay ($data,$category) {
  $heading = "<h2>Wikipedia pages on " . $category . "</h2>";
  $pagelist = $data->query->categorymembers;
  // print_r ($pagelist);
  $newHTML = $heading . "<ul>";
  foreach ($pagelist as $page) {
    $titleName = $page->title;
    $newHTML .= "<li>" . '<a href="http://en.wikipedia.org/wiki/' . $titleName . '">' . $titleName . "</a>";
  }
  
  $newHTML .= "</ul>";
  // print
  echo $newHTML;


  // debug section - print data structure (comment for production)
  // Look at it to understand why we are looking at $data->query->categorymembers
  echo "<p>DEBUG - Data structure retrieved =</p>";
  echo "<pre>";
  print_r($data);
  echo "</pre>";
  // end debugging

}

?>
</body>
</html>

Doing it with JavaScript

You can do REST calls in JavaScript. However, the browser will require that the JavaScript page sits on the same server or that you use a more complex procedure like CORS headings.

Works (HTML file sits on the same server as EduTechWiki from which we get the data)

• http://edutechwiki.unige.ch/api-en/rest-example.html

Using the file from a local computer, does not work:

• file:///web/guides/js/ex/rest/rest-example.html

Firefox (49,Windows), for example, shows the following error:

: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://edutechwiki.unige.ch/mediawiki/api.php?action=query&list=categorymembers&format=json&cmprop=title&cmtype=page&cmlimit=500&cmtitle=Category:COAP_3110. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).(unknown)

EduTechWiki has been configured to accept requests from a server called tecfa.unige.ch

• http://tecfa.unige.ch/guides/js/ex/rest/rest-example.html

Wikipedia is more flexible

Make sure to send an "origin: *" parameter as in the following code:

• http://tecfa.unige.ch/guides/js/ex/rest/rest-example-wp-1.html

Copy the file and adapt.

Wednesday

• Hw 5 feedback
• How can you demonstrate that your term project is useful, usable and pleasant ?

Homework 5

Implement data retrieval and display with REST:

• Retrieve information from a wordpress site (e.g. your own term project) or another site (e.g. wikipedia) using a REST API
• Display the data in an informative and nice way (make it useful, usable and pleasant)
• Implement this functionality with either PHP or JavaScript (PHP is probably easier).
• Bonus (if you aim for an A): Allow the user to enter parameters (i.e. apply what you learned in homework 1: HTML forms). Example: Radio buttons or pull-down menu for selecting a category.

Notice: Make sure to retrieve data in JSON format (as opposed to XML or lines of text). JSON is easier to parse.

Write a short implementation report that includes (1) the specification (i.e. purpose) of the application, (2) Screen shots of the page(s), (3) a very short implementation notice. The report should be delivered in a well known format (E.g. Html, PDF, Word)

Evaluation criteria: as usual (purpose, usefulness, display quality, absence of errors, report, on time).

Due date/time: Wednesday, week 8 before class.