dr james denholm-price j.denholm-price@kingston.ac.uk xml lecture 3 client server: php + xml

Dr James Denholm-Price

j.denholm-price@kingston.ac.uk

XML Lecture 3

Client Server: PHP + XML

Delimiters

http://ars.userfriendly.org/cartoons/?id=20041025

Lecture 3 contents

• Motivation: Context & why XML.• Examples: “Use cases”• Client-server: Server-side processing.

– Using what we know (the DOM!)– Looking forward to what we don’t yet know...

– Client-side processing will be later.

Context“Things should be made as simple as possible,but no simpler. ” – Albert Einstein.– “Things” CD player?

• To play a CD you put your CD into a CD player and the playerplays it for you.

• The CD player provides a CD-playing service.

• Object oriented programming approach:– You bind data and its processing together.

• In O-O, every CD would come with its own player.

• Service-orientation approach:– Services provide functions that “do things”.– For software, services exchange data which must be comprehensible ...

XML is a lingua franca commonly (but not exclusively) used.

Image: Albert Einstein

Archives,The Hebrew University of Jerusalem,

Israel.

Services• Huge subject – “Service-Oriented Architecture” (SOA).• The essence is something like:

– Break down “business process” workflows.– Provide “services” using common protocols & well-defined models

to securely expose “business data”– Aggregate service data into “business objects” to answer questions.– E.g. “Who’s on module CO3070 in 2010/11?”

• Module code module name.• Module code + year list of student IDs.• Student ID students details.• Student ID student photo?• Aggregate it all together to give a class list (e.g. PDF).

Why bother with “services” at all?

Server

HTTPHTTP

Data Service

XMLXML Data

“data” direct to the client! ... More later...

Server

HTTPHTTP

Data Service

HTTPHTTP Data

Why XML?

• Why not text? After all...– Easily read, easily written!

• Why not arbitrary binary files? After all...– Easily written, efficient/small size!

• But are they really:– Easily understood?

• Internationalisation! (Test: Ff vs IE)• Meaning!• Sharing!

– Easy to write?!

XML• Written in plain text easy to write, exchange.• Defaults to UTF-8 internationalised.• Can be defined messages can be:

– Specified.• DTDs (also XML Schema, RelaxNG, Schematron...)

– Validated.• Can be exchanged HTTP is easy & ubiquitous.• Easy for machines to parse into data...• It’s not particularly efficient (size-wise) issue?• It’s also not the only data specification with (most of) these

properties ... more of which in a later lecture!

What data’s out there?

• TV– http://bleb.org/tv/data/rss.php?ch=bbc1&day=0

• Youtube– http://gdata.youtube.com/feeds/base/videos?q=h

tc%20desire%20hd&client=ytapi-youtube-search&alt=rss&v=2

• weather data– http://weather.yahooapis.com/forecastrss?p=UKX

X0770&u=c (Valid?)

• Notice anything? – RSS = early example of “paving the cowpaths” ;-)

• “Rich Site Summary” or “Really Simple Syndication” ... its history is complex– Wikipedia has a good summary!

• RSS v2.0 seems well-specified (DTD or XSD) if “unofficial” ;-)

RSS specification• Human-readable versions online (e.g. RSS2)• DTD:

– <!ELEMENT rss (channel)>

– <!ATTLIST rss version CDATA #FIXED "2.0">

Etc...

RSS example: WebTech podcast<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" version="2.0"><channel>

<title>Web Technologies Podcast</title><link>http://lms.../webapps/lobj-podcast-bb_bb60/feed/CO2013-A_SEM1/podcast.xml</

link> <description>A podcast to accompany lectures in Web Technologies ...</description> <image>

<title>CO2013A banner.GIF</title> <url>http://lms.../webapps/lobj-podcast-bb_bb60/files/itunes/...</url>

</image> <item>

<title>Lecture 1 Introduction and revision</title><link>http://staffnet.../~ku13043/WebTech/media/lecture01.mp3</link> <description>Easy introduction to the module,

...</a><br></description> <enclosure url="http://staffnet.../~ku13043/WebTech/media/lecture01.mp3"

type="audio/mpeg" /> <pubDate>Mon, 05 Oct 2009 13:37:05 GMT</pubDate> <guid>http://staffnet..../~ku13043/WebTech/media/lecture01.mp3</guid> <dc:date>2009-10-05T13:37:05Z</dc:date>

</item> </channel> </rss> Valid?

Mashups

• Mash data from disparate sources into an application.

• Google maps is commonly used because its client-side APIs support reading & displaying data, e.g. XML data.– http://googlemapsmania.blogspot.com/– http://ccgi.arutherford.plus.com/website/flexTraffic/

• UK Highways Agency Java applet– Where’s the path? OS data + Google maps– WalkJogRun + iPhone app

How can we process XML?

• Depends what we want to do with it & when:– Java application – many ways, JAXB/P is common.– Windows app’s – .Net has tools...– Web (client/server):

• Server-side languages (server) usually have platform-specific packages.

– E.g. JSP JAXB/P, PHP DOM ;-) SimpleXML etc.• Browsers (client) have varying support for XML, usually

XMLDOM (lecture 8) & XSLT (lecture 6)– Security issues (“same origin”).

Request for remote data

DNS server

1 DNS query

2 TCP connection

3 HTTP request

4 HTTP response

5 Optional parallel connections

(embedded resources)

Browser

Origin server

6 Asynchronous requests

Security (1/2)• Is it a good idea to let an arbitrary web page load data

from any source?– No!

• On the client– E.g. What if you inadvertently make it possible for someone

nefarious to inject arbitrary JavaScript into a page ... That JavaScript could load “data” from anywhere and do anything to the page, including monitoring keystrokes, passwords, credit cards, reading cookies, phishing...

– Current solution = “same origin” policy:• Scripted requests must come from the same domain (web server) as

the HTML.

Security (2/2) – “Same origin” is a severe restriction so

workarounds exist ;-)• E.g. a <script> tag can do pretty-much anything;

Google for “comet”.• A W3C working party (on “webapps”) is looking at APIs

and “trust” issues...

• On the server– Strict restrictions don’t apply (but the remote

server might filter requests).– Do whatever you like & get away with it badge...

Approaches to XML processing• XPath & XSLT: after lecture ~5.

– “Better” ways to navigate the node tree & manipulate data.• DOM (“Document Object Model”)

– leverages what we know (from CO2013): Server-side and client-side.– Simple but relatively heavyweight API.– Well-defined by W3C.– Works ~OK with namespaces.

• Objects let us use language-native notation– Usually needs bolt-on search mechanisms, XPath...– Different in each language.– Namespaces are a mess.

• Other processors like SAX try to be more lightweight, particularly for large XML doc’s.

PHP• PHP is a server-side scripting language

– Like ASP, JSP, ASP.Net, Cold Fusion it is executed • by the server!• on the server!• you must preview/test your PHP from the server!

• Unlike CGI (Perl etc) the code is embedded within the web page – usually identified by a special extension ‘file.php’ not

‘file.html’

• PHP documentation is your friend...– The online manual is fantastic so bookmark it!

• http://www.php.net/docs.php

CO3041Databases and the Web

PHP in web pages (from the PHP manual)• The recommended way to embed PHP in (X)HTML is:

– <?php echo "if you want to serve XHTML or XML documents, do like this\n"; ?>

– You should all use this!• PHP short tags are:

– <? echo "this is the simplest, an SGML processing instruction\n"; ?>

– These can interfere with XML instructions, like DOCTYPE or XML prolog <?xml version="1.0" encoding="utf-8"?>

• PHP echo shortcut (like <%= %> in ASP):– <?= expression ?> This is a shortcut for "<? echo

expression ?>"• Alternative embedding to please old M$ FrontPage

– <script language="php">echo "some editors";</script>• Finally ASP-style could be enabled (for some mad reason!)

– <% echo "You may optionally use ASP-style tags"; %>

CO3041Databases and the Web

A syntax quickie

• C-like syntax (similar to C, Java, JavaScript etc.)• $ denotes a PHP variable (scalar, array, object)• '....' delimits unparsed strings;

"..." is parsed for variables, wrap arrays in {}• <?php

$date = date('r');echo "Today's date is <b>$date</b>. ";echo 'Can\'t wait until the

summer ;-)';?>

Client vs Server

• PHP is server-side code!– The client only sees stuff that is deliberately

written to the output stream.– E.g.

• echo, print, printf, print_r• Error messages (if error_reporting is enabled.)• header(...) used to set HTTP headers (also see

output buffering)

Introducing the document object model

• DOM:– Stands for Document Object Model– Developed by the W3C– Designed for XML and HTML– Interface between programming language and

document content– Allows the browser to run programs to manipulate

documents

W3C DOM levels• Level 1:

– HTML and XML• Level 2:

– Supports namespaces, Cascading Style Sheets, and user-initiated actions, such as mouse clicks and key strokes

• Level 3:– Standardise support for document loading and saving– Still under development

• DOM spec’s exist for many XML languages & platforms– SMIL– MathML– SVG– {JavaScript, ActionScript, JScript} ECMAScript– PHP

29CO3070XML for the Web

DOM nodes & tree structure

• W3C Level 1 Document Object Model (DOM1)– Gives access to the elements in a document– Tree structure

• elements correspond with nodes (objects)• attributes are properties• element text is a node itself

– Provides methods to• Query elements contents, attributes, children• Add, delete, move elements within the tree• Add, delete, change attributes

A simple example document

<html>

<head>

</head>

<body>

<h1>Simple</h1>

example</p>

</body>

</html>

Behind the scenes: Tree of nodes

<html>

CO3070XML for the Web

documentElement

<html>

<title>

'Simple'

'A ' <b> ' example'

'bold'

<head>

</head>

<body>

</html>

example</p>

</body>

<h1>Simple</h1>

Locating objects by id

• DOM1$document->getElementById('theP');

– This example returns a reference to the object that represents the <p> element in the DOM

– However this only works in XML if there is an attached & valid DTD which defines an attribute of type ID.

<html>

<head>

</head>

<body>

</html>

<p id="theP">A <b>bold</b> example</p>

</body>

<h1>Simple</h1>

Example (src)

NB: Examples require PHP5 XML DOM.

Locating objects by tag

• DOM1: $pEls = $document->getElementsByTagName('p');

– Can also be called from any DOM node.– This returns a collection (~array) of objects,

no prizes for guessing what's in it(not much in this simple doc!)

• pEls->item(…)

<html>

<head>

</head>

<body>

</html>

<p id="thePara">A <b>bold</b> example</p>

</body>

<h1>Simple</h1>

Example (src)

Locating objects by tag #2• DOM1: $pEls = document.getElementsByTagName('p');

– pEls.item(…)

– pEls.item(0)

– pEls.item(1)

• What about “namespaces”?– getElementsByTagNameNS(

namespace,

tagName

<html>

<head>

</head>

<body>

</html>

<p>A <b>bold</b> example</p>

</body>

<h1>Simple</h1>

example (src)

Looping over objects by tag• DOM1: $pEls = $document->getElementsByTagName('p');

• for ($i=0;

$i<$pEls->length;

echo $pEls

->item($i)

->firstChild

->nodeValue;

<html>

<head>

</head>

<body>

</html>

</body>

<h1>Simple</h1>

example (src)

Parent node relationships

If $objP == $doc->getElementById('thp'); then$objP->childNodes[] an array containing 3 nodes…$objP->firstChild the 'A ' text node$objP->lastChild the ' example' text

<p id="thp">A <b>bold</b> example</p>

'bold'

'A' <b> ' example' children

parent

example (src)

Questions:

$objP->childNodes holds the children of <p>…Q: What is $objP->childNodes->length?Q: What does $objP->childNodes->item(1) refer to?Q: How do I access the 'bold' text node?

children

parent

'bold'

'A' ' example'

A: objP.childNodes[1].firstChild example (src)

Child node relationships

Each of $objP->childNodes is a set of nodes whose parentNode properties points back up the tree to the <p> element

– E.g. $objP->childNodes->item(0) is the 'A' text node

$objP->childNodes->item(0)->parentNode refers back to <p>

'A' <b> ' example'

'bold'children

parent

Question:

Q: If $objP->childNodes->item(1)->firstChild is the 'bold' text node, what is: $objP->childNodes->item(1)->firstChild

->parentNode->parentNode ?

'A' <b> ' example'

'bold'

children

parent

A: It refers to the parent of the parent of the 'bold' textnode, i.e. back to the <p>. example (src)

Sibling node relationships

Each of the children of the <p> element are siblings (of each

other):

•If $objB represents the <b> node then– $objB == objP->childNodes->item(1) from before

– $objB->nextSibling is the ' example' text

– $objB->previousSibling is the 'A' text node

'A' <b> ' example' siblings

example (src)

Question:

Q: If $objB represents the <b> node then what does

$objB->nextSibling->parentNode refer to?

'A' <b> ' example' siblings

A: It refers back to the parent of the ' example'text node, i.e. back to the <p> as before.(As any of the 'sibling' nodes do)

<p> parent

Node attribute methods

• For any DOM object $obj, use– $obj->getAttribute(attName);

to query (return) an attribute value– $obj->getAttributeNS(ns,attName);

to query (return) an attribute value with a namespace (ex)– $obj->setAttribute(attName,attValue);

to set an attribute value– $obj->hasAttributes();

returns true/false

Node attributes• E.g. attributes of tags can be accessed from

those DOM1 object methods:– <img src="image.gif" id="img1">– So to change the image source :

$imageObj = $document.getElementById('img1');$imageObj->setAttribute('src','image2.gif');

Node type and value properties

CO2013/CO3013XML for the Web

Node nodeName nodeType nodeValue

Element HTML tag name 1 null

Attribute Attribute name 2 The att. Value

Text node #text 3 The text

CDATA #cdata-section 4 The CDATA text

Comment node #comment 8 The comment text

Document node #document 9 null

More: W3C

Node type and value properties

CO2013/CO3013XML for the Web

Node nodeName nodeType nodeValue

#text 3 'A'

'b' 1 null

#text 3 ' example'

id="thp" ‘id' 2 'thp'

example</p>

' example'

PHP XML DOM

• Client or server the procedure is the same:1. Load the XML document.2. Successfully-loaded doc is parsed into a DOM.3. Methods & properties of the DOM objects give

access to the information and relationships represented by tags.

• E.g. See w3schools.com, php.net

Example: Parsing RSS

• The example RSS document:– <?xml version="1.0" encoding="UTF-8"?><rss ...>

<channel> ... <item> ...

– etc... Repeated for each <item>– NB: What about white space?

XML DOM

• So...– $doc = new DOMDocument();– $doc->preserveWhiteSpace=FALSE;– $doc->load('http://.../podcast.xml');– $doc->getElementsByTagName('item');– for ($i=0; $i < $doc->length; $i++) ...– $doc->item($i)->firstChild is <title>– $doc->item($i)->childNodes->item(2) is <description>

– $doc->item($i)->childNodes->item(3) is <enclosure>

Example

dr james denholm-price j.denholm-price@kingston.ac.uk xml lecture 3 client server: php + xml

weather data http

youtube http

data specification

services exchange data

php xml slide

delimiters http

tv http

cowpaths slide

Documents

xml index structure -...

1. xml & xml schema

ashima kalra introduction of xml introduction of xml xml...

xml schema xml-xsd xml schema - bienvenue à...

xml documents & databases. summary of introduction to xml...

can we develop a model for learning in the organisation?...

union calendar no. th d congress session h. r. ll · mr....

xml and xml schema

biological knowledge harry purser h.purser@kingston.ac.uk

um sumário de xml explicação de xml relacionando xml à...

dr james denholm-price j.denholm-price@kingston.ac.uk xp...

sdpl 20112: xml basics1 2 basics of xml and xml documents...

xml & xml schema

xml extensible markup language. topics what is xml an xml...

xml databases xml-db xml databases

1 les technologies xml cours 1.2 : introduction au langage...

xml fundementals xml vs.. html xml vs.. html xml document...

does technology enhance learning? lucy renton...

xml extensible markup language. agenda introduction to xml...

commercial cross-domain xml guard · cross-domain, guard,...