Scribd
Upload
12 views

Chapter 17 web

fundamentals of web development

Uploaded by

tukusalifyasichali
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
12 views

Chapter 17 web

fundamentals of web development

Uploaded by

tukusalifyasichali
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 86

XML Processing and

Web Services

Chapter 17

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Textbook to be published by Pearson ©
Ed2015
in early
Pearson
2014
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
http://www.funwebdev.com
Objectives
1 XML Overview
2 XML Processing

3 JSON
4 Overview of
Web Services

5 Consuming
Web Services
in PHP
6 Creating Web
Services

7
Asynchronous
Web Services

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Section 1 of 7

XML OVERVIEW
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
XML Overview

XML is a markup language, but unlike HTML, XML can


be used to mark up any type of data.
One of the key benefits of XML data is that as plain
text, it can be read and transferred between
applications and different operating systems as well as
being human-readable and understandable as well.
XML is not only used on the web server and to
communicate asynchronously with the browser, but is
also used as a data interchange format for moving
information between systems

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


XML Overview
Used in many systems

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Well Formed XML
For a document to be well-formed XML, it must follow the syntax rules
for XML:
• Element names are composed of any of the valid characters (most
punctuation symbols and spaces are not allowed) in XML.
• Element names can’t start with a number.
• There must be a single-root element. A root element is one that
contains all the other elements; for instance, in an HTML document,
the root element is <html>.
• All elements must have a closing element (or be self-closing).
• Elements must be properly nested.
• Elements can contain attributes.
• Attribute values must always be within quotes.
• Element and attribute names are case sensitive.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Well Formed XML
Sample Document

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Valid XML
Requires a DTD

A valid XML document is one that is well formed and


whose element and content conform to the rules of
either its document type definition (DTD) or its
schema.
A DTD tells the XML parser which elements and
attributes to expect in the document as well as the
order and nesting of those elements.
A DTD can be defined within an XML document or
within an external file.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Data Type Definition
Example

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Data Type Definition
Example

The main drawback with DTDs is that they can only


validate the existence and ordering of elements. They
provide no way to validate the values of attributes or
the textual content of elements.
For this type of validation, one must instead use XML
schemas, which have the added advantage of using
XML syntax. Unfortunately, schemas have the
corresponding disadvantage of being long-winded and
harder for humans to read and comprehend; for this
reason, they are typically created with tools.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


XML Schema
Just one example

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


XSLT
XML Stylesheet Transformations

XSLT is an XML-based
programming language
that is used for
transforming XML into
other document
formats

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


XSLT
Another usage

XSLT is also used on the server side and within JavaScript

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


XSLT
Example XSLT document that converts the XML from Listing 17.1 into an HTML list

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


XSLT
An XML parser is still needed to perform the actual transformation

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


XPath
Another XML Technology

XPath is a standardized syntax for searching an XML


document and for navigating to elements within the
XML document
XPath is typically used as part of the programmatic
manipulation of an XML document in PHP and other
languages
XPath uses a syntax that is similar to the one used in
most operating systems to access directories.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


XPath
Learn through example

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Section 2 of 7

XML PROCESSING
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
XML Processing
Two types

XML processing in PHP, JavaScript, and other modern


development environments is divided into two basic
styles:
• The in-memory approach, which involves reading
the entire XML file into memory into some type of
data structure with functions for accessing and
manipulating the data.
• The event or pull approach, which lets you pull in
just a few elements or lines at a time, thereby
avoiding the memory load of large XML files.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


XML Processing
In JavaScript

All modern browsers have a built-in XML parser and


their JavaScript implementations support an in-
memory XML DOM API.
You can use the already familiar DOM functions such
as getElementById(), getElementsByTagName(), and
createElement() to access and manipulate the data.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


XML Processing

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


XML Processing
With JQuery

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


XML Processing
With PHP

PHP provides several extensions or APIs for working


with XML including:
• The SimpleXML extension which loads the data into
an object that allows the developer to access the
data via array properties and modifying the data via
methods.
• The XMLReader is a read-only pull-type extension
that uses a cursor-like approach similar to that used
with database processing

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


XML Processing
With PHP using Simple XML

Variable and attribute names


taken from xml

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


XML Processing
With PHP using Simple XML and XPath

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


XML Processing
With PHP using XMLReader

Less “automatic”

More Verbose

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


XML Processing
Why choose when you can use both

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Section 3 of 7

JSON
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
JSON

JSON stands for JavaScript Object Notation (though its


use is not limited to JavaScript)
Like XML, JSON is a data serialization format. It
provides a more concise format than XML.
Many REST web services encode their returned data in
the JSON data format instead of XML.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


JSON
An example XML object in JSON

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


JSON
An example XML object in JSON

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Using JSON in JavaScript
Creating JSON JavaScript objects

it is easy to make use of the JSON format in JavaScript:


var a = {"artist": {"name":"Manet","nationality":"France"}};
alert(a.artist.name + " " + a.artist.nationality);
When the JSON information will be contained within a string
(say when downloading) the JSON.parse() function can be used
to transform the string containing into a JavaScript object

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Using JSON in JavaScript
Convert string to JSON object and vice versa

var text = '{"artist": {"name":"Manet","nationality":"France"}}';


var a = JSON.parse(text);
alert(a.artist.nationality);
JavaScript also provides a mechanism to translate a JavaScript
object into a JSON string:
var text = JSON.stringify(artist);

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Using JSON in PHP
JSON on the server

Converting a JSON string into a PHP object is quite


straightforward:

Notice that the json_decode() function can return either a PHP


object or anassociative array.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Using JSON in PHP
Go the other way

To go the other direction (i.e., to convert a PHP object into a


JSON string), youan use the json_encode() function.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Using JSON in PHP
JSON on the server

Since JSON data is often coming from an external source, always


check for parse errors before using it, via the json_last_error()
function:

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Section 4 of 7
OVERVIEW OF WEB SERVICES

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Web Services
An overview

Web services are the most common example of a


computing paradigm commonly referred to as service-
oriented computing (SOC).
A service is a piece of software with a platform-
independent interface that can be dynamically located
and invoked.
Web services are a relatively standardized mechanism
by which one software application can connect to and
communicate with another software application using
web protocols.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Web Services
Benefits

• they potentially provide interoperability between


different software applications running on different
platforms
• they can be used to implement something called a
service-oriented architecture (SOA)
• they can be offered by different systems within an
organization as well as by different organizations

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Web Services
Visual Overview

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Web Services
SOAP Services

SOAP is the message protocol used to encode the


service invocations and their return values via XML
within the HTTP header.
• SOAP and WSDL are complex XML schemas
• akin to using a compiler: its output may be
complicated to understand
• the enthusiasm for SOAP-based web services had
cooled.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Web Services
SOAP Services

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Web Services
REST Services

REST stands for Representational State Transfer.


• RESTful web service does away with the service
description layer, and needs no separate protocol for
encoding message requests and responses.
• It simply uses HTTP URLs for requesting a
resource/object (and for encoding input parameters).
• The serialized representation of this object, usually
an XML or JSON stream, is then returned to the
requestor as a normal HTTP response.
• REST appears to have almost completely displaced
SOAP services.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Web Services
REST Services

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


An Example Web Service
We will only use REST from here on in

Consider the Google Geocoding API.


The Google Geocoding API provides a way to perform
geocoding operations via an HTTP GET request, and
thus is an especially useful example of a RESTful web
service.
Geocoding typically refers to the process of turning a
real-world address into geographic coordinates, which
are usually latitude and longitude values
Reverse geocoding is the process of converting
geographic coordinates into a human-readable
address.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


An Example Web Service
Mashups abound with web services

From trendsmap.com
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
An Example Web Service
More details

In this case the request will take the following form:


http://maps.googleapis.com/maps/api/geocode/xml?address
An example geocode request would look like the following:
http://maps.googleapis.com/maps/api/geocode/xml?
address=British%20Museum,+Great+Russell+Street,+London,
+WC1B+3DG&sensor=false

From trendsmap.com
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
An Example Web Service
The Response

The response is a standard HTTP


response with headers

This response is XML

The lat/lng is in there somewhere

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Identifying and
Authenticating Service
Requests
Most web services are not open. Instead they typically
employ one of the following techniques:
• Identity. Each web service request must identify
who is making the request.
• Authentication. Each web service request must
provide additional evidence that they are who they
say they are.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Identity examples
Real World ways of limiting service

Web services that make use of an API key typically require


the user (i.e., the developer) to register online with the
service for an API key. This API key is then added to the GET
request as a query string parameter.
For instance, to request to the Microsoft Bing Maps web
service will look like the following :
http://dev.virtualearth.net/REST/v1/Locations?
o=xml&query=British%20Museum,+Great+Russell+Street,
+London,+WC1B+3DG,+UK&key=[BING API KEY HERE]

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Identity examples
Real World ways of limiting service

Web services that make use of an API key typically require


the user (i.e., the developer) to register online with the
service for an API key. This API key is then added to the GET
request as a query string parameter.
For instance, to request to the Microsoft Bing Maps web
service will look like the following :
http://dev.virtualearth.net/REST/v1/Locations?
o=xml&query=British%20Museum,+Great+Russell+Street,
+London,+WC1B+3DG,+UK&key=[BING API KEY HERE]

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Authentication
Real World ways of limiting service

Some web services are providing private/proprietary


information or are involving financial transactions.
In this case, these services not only may require an API key,
but they also require some type of user name and password
in order to perform an authorization.
Many of the most well-known web services instead make
use of the OAuth standard.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Section 5 of 7
CONSUMING WEB SERVICES IN PHP

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Consuming Web Services in PHP

There are three usual approaches in PHP for making a


REST request:
• Using the file_get_contents() function.
• Using functions contained within the curl library.
• Using a custom library for the specific web service.
Many of the most popular web services have free
and proprietary PHP libraries available.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Consuming Web Services in PHP

The file_get_contents() function is simple but doesn’t


allow POST requests
Services that require authentication will have to use
the curl extension library, which allows significantly
more control over requests. You may need to configure
your server to include curl support.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


A Flickr Example

The Flickr web service provides a photo search service. The


basic format for this service method is:
http://api.flickr.com/services/rest/
method=flickr.photos.search&api_key=[enter your flickr api key
here]&tags=[search values here]&format=rest
The service will return its standard XML photo list

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


A Flickr Example
Some Code using file_get_contents()

$request = constructFlickrSearchRequest('Athens');
$response = file_get_contents($request);
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
A Flickr Example
Use file get contents

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


A Flickr Example
Use curl (and actually do something)

Make the request

Parse the XML

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


A Flickr Example
What that last code actually built

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Consuming JSON Services

Consuming a JSON web service requires almost the


same type of PHP coding as consuming an XML web
service.
But rather than using SimpleXML to extract the
information one needs, one instead uses the
json_decode() function.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Consuming JSON Services
Combine 2 services (using JSON)

To extract the latitude and longitude from the JSON string


returned from the mapping web service, you would need code
similar to the following:

Once our program has retrieved the latitude and longitude, the
program then will use the GeoNames web service’s. This request
will take the following form:
http://api.geonames.org/findNearbyPOIsOSMJSON?
lat=43.6520004&lng=-79.4082336&username=your-username-
here
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Consuming JSON Services
A complicated example with 2 services

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Consuming JSON Services
More examples

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Consuming JSON Services
More examples

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Section 6 of 7

CREATING WEB SERVICES


Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Creating Your Own
Services
Web Services that is

Since REST services simply respond to HTTP requests,


creating a PHP web service is only a matter of creating
a page that responds to query string parameters and
instead of returning HTML, it returns XML or JSON.
Our PHP page must also modify the Content-type
header
Is important to recognize that not all web services are
intended to be used by external clients. Many web
services are intended to be consumed asynchronously
by their own web pages via JavaScript

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Creating an XML Service
Web Service, that is

The first service we will create will be one that returns


data from our Book Customer Relations Management
database.
To begin, we should determine the methods our service
will support and the format of the requests.
crmServiceSearchBooks.php?criteria=yyy&look=zzz
• The criteria parameter will be used to specify what
type of criteria we will use for the book search. This
exercise will only support four values: imprint,
category, look, and subcategory.
• The look parameter will be used to specify the actual
value to search.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Creating an XML Service
Web Service, that is

For instance, if we had the following request:


crmServiceSearchBooks.php?
criteria=subcategory&look=finance
It would be equivalent to the SQL search:
SELECT * FROM Books WHERE SubCategoryID=5

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Creating an XML Service
Sample XML output

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Creating an XML Service
Sample XML output

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Creating an XML Service
Code details left as an exercise

There are different ways to output XML in PHP. One


approach would be to simply echo XML within string
literals to the response stream:
echo '<?xml version="1.0" encoding="UTF-8"?>’;
echo '<books>';
...
While this approach has the merit of familiarity, it will
be up to the programmer to ensure that our page
outputs well-formed and valid XML.
The alternate approach would be to use one of PHP’s
XML extensions such as the XMLWriter object.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Creating an JSON Service
Web Service

Creating a JSON web service rather than an XML


service is simply a matter of
• creating a JSON representation of an object
• setting the Content-type header to indicate the
content will be JSON,
• and then outputting the JSON object
Since the built-in PHP json_encode() function does
most of the work for us, our JSON service is simpler
than the XML web service from the last section

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Creating an JSON Service
Web Service

Output headers

Function to create JSON


From the Database,
based on query

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Creating an JSON Service
Web Service

For this function to work, the class of the custom


object being converted must provide its own
implementation of the JsonSerializable interface. T
his interface contains only the single method
jsonSerialize().
In this web service, we are outputting JSON for objects
of the Book class, so this class will need to implement
this method

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Creating an JSON Service
Web Service

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Creating an JSON Service
Testing our service in the browser

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Section 7 of 7
INTERACTING ASYNCHRONOUSLY
WITH WEB SERVICES
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Tying it all together
Consuming services asynchronously

Although it’s possible to consume web services in PHP,


it’s far more common to consume those services
asynchronously using JavaScript.
When using client-side requests for third-party
services, there’s also the advantage of distributing
requests to each client rather then making all requests
from your own server’s IP address.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Consuming your own
service
Autocomplete example

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Consuming your own
service
Autocomplete example

The code listens for changes to an input box with id


search. With each change the code makes an
asynchronous get request to the source URL, which in
this case is the script in Listing 17.24 that returns JSON
results. Those results are then used by autocomplete
to display nicely underneath the input box.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Using Google Maps
A popular mashup platform

Consider our photo-sharing website. We will show you


how to build a map view that plots user photos onto a
map using the location information associated with the
image.
To begin using Google Maps, you must do three things

1. Include the Google Maps libraries in the <head>


section of your page.
2. Define <div> elements that will contain the maps.
3. Initialize instances of google.maps.Map (we will call it
Map) in JavaScript and associate them with the <div>
elements.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Using Google Maps
A popular mashup platform

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Using Google Maps
Under the hood there are lots of asynchronous requests

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Using Google Maps
A sample mashup

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


What You’ve Learned
1 XML Overview
2 XML Processing

3 JSON
4 Overview of
Web Services

5 Consuming
Web Services
in PHP
6 Creating Web
Services

7
Asynchronous
Web Services

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

You might also like