Lecture 4: XML - Computer Science E-75, Building Dynamic Websites

October 5, 2009

Harvard University
Division of Continuing Education
Extension School

David Heitmeyer
david_heitmeyer@harvard.edu

XML: Extensible Markup Language

From 2008... Happy 10th Birthday to XML!

W3C XML 10th anniversary

There is essentially no computer in the world, desk-top, hand-held, or back-room, that doesn't process XML sometimes. This is a good thing, because it shows that information can be packaged and transmitted and used in a way that's independent of the kinds of computer and software that are involved. XML won't be the last neutral information-wrapping system; but as the first, it's done very well.
Tim Bray (Sun Microsystems)

Read more from the press release or the W3C XML 10 Celebration

Quick Example: Data and Presentation

Data

Contacts in and Address Book in XML:

<addressbook>
  <contact>
    <name>David Heitmeyer</name>
    <address>8 Story Street</address>
    <city>Cambridge</city>
    <state>Massachusetts</state>
    <zip>02138</zip>
    <phone type="office">617-999-5870</phone>
    <email>david_heitmeyer@harvard.edu</email>
  </contact>
  <contact>
    <name>Drew Gilpin Faust</name>
    <address>Massachusetts Hall</address>
    <city>Cambridge</city>
    <state>Massachusetts</state>
    <zip>02138</zip>
    <email>president@harvard.edu</email>
  </contact>
</addressbook>

Presentation

XHTML for presentation:

<table class="addressbook">
	<tr>
		<th>Name</th>
		<td>David Heitmeyer</td>
	</tr>
	<tr>
		<th>Address</th>
		<td>8 Story Street<br/>Cambridge, Massachusetts 02138
		</td>
	</tr>
	<tr>
		<th>Phone</th>
		<td>617-999-5870</td>
	</tr>
	<tr>
		<th>Email</th>
		<td><a href="mailto:david_heitmeyer@harvard.edu">david_heitmeyer@harvard.edu</a></td>
	</tr>
	<tr>
		<th>Name</th>
		<td>Drew Gilpin Faust</td>
	</tr>
	<tr>
		<th>Address</th>
		<td>Massachusetts Hall<br/>Cambridge, Massachusetts 02138
		</td>
	</tr>
	<tr>
		<th>Email</th>
		<td><a href="mailto:president@harvard.edu">president@harvard.edu</a></td>
	</tr>			
</table>

Displayed in a browser:

NameDavid Heitmeyer
Address8 Story Street
Cambridge, Massachusetts 02138
Phone617-999-5870
Email david_heitmeyer@harvard.edu
NameDrew Gilpin Faust
AddressMassachusetts Hall
Cambridge, Massachusetts 02138
Emailpresident@harvard.edu

XML in 10 Points

  1. XML is for structuring data
  2. XML looks a bit like HTML
  3. XML is text, but isn't meant to be read
  4. XML is verbose by design
  5. XML is a family of technologies
  6. XML is new, but not that new
  7. XML leads HTML to XHTML
  8. XML is modular
  9. XML is the basis for RDF and the Semantic Web
  10. XML is license-free, platform-independent and well-supported

The XML Galaxy

XML Galaxy

Content and Presentation

Content

XML is all about content.

Presentation

XML is all about presenting your content.

XML and XSLT to produce a variety of content-types

XSLT - Extensible Stylesheet Language for Transformation

XHTML
XHTML
XML
XML
Mobile Devices (XHTML, XHTML Mobile Profile, and WML)
XHTML iPhoneXHTML Mobile ProfileWML
PDF
PDF
Text
Text
SVG / PNG / JPEG
Image

Weather

weatherweather

XML data from Weather.com

National Weather Service

NOAA's National Weather Service offers several XML services: National Digital Forecast Database XML Web Service
KBOS Weather in RSS Feed

NWS MA Weather

Presidential Election 2008

Red = McCain
Blue = Obama

Click on a map to view a larger image
Massachusetts Red/Blue Map, Presidential Election 2008
Red/Blue Map
Massachusetts Purple Map, Presidential Election 2008
Purple Map
Massachusetts Cities and Towns Boundaries
Massachusetts Cities and Towns

How they were made

Google Maps & Google Earth

Google Earth KML
Google Earth

Google Maps
Google Maps

KML file:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
  <name>CSCI E-153</name>
  <description>CSCI E-153.  Web Development Using XML.  Harvard University Extension School.  Fall 2009.</description>
  <Style id="style1">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/ms/micons/blue-dot.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style2">
    <IconStyle>
      <Icon>
        <href>http://maps.gstatic.com/intl/en_us/mapfiles/ms/micons/blue-dot.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Placemark>
    <name>Lecture - 1 Story Street, Room 306</name>
    <styleUrl>#style1</styleUrl>
    <Point>
      <coordinates>-71.122108,42.374199,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Section - 53 Church St, Rm 104</name>
    <styleUrl>#style2</styleUrl>
    <Point>
      <coordinates>-71.121101,42.374336,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>John Harvard Statue</name>
    <styleUrl>#style2</styleUrl>
	<Point>
		<coordinates>-71.11732299841476,42.37449718905859,0</coordinates>
	</Point>
  </Placemark></Document>
</kml>

Syndication Feeds: RSS, Atom, Podcasts

RSS and Atom are lightweight XML formats for sharing headlines and other Web content.

RSS Snippet: Item

The heart of an RSS feed is an "item", which can have a title, link, and description.
Item from BBC News:

<item>
    <title>Heat fuelling California wildfire</title>
    <description>Firefighters tackling a wildfire north of Los Angeles say they are making
       slow progress and the blaze remains very dangerous.</description>
    <link>
    http://news.bbc.co.uk/go/rss/-/1/hi/world/americas/8230540.stm
    </link>
    <guid isPermaLink="false">http://news.bbc.co.uk/1/hi/world/americas/8230540.stm
    </guid>
    <pubDate>Mon, 31 Aug 2009 20:19:25 GMT</pubDate>
    <category>Americas</category>
    <media:thumbnail width="66" height="49"
      url="http://newsimg.bbc.co.uk/media/images/46297000/jpg/_46297386_007874482-1.jpg"/>
</item>

BBC RSS

Podcasts: An Adaptation of RSS

Adapting and extending RSS for use with iTunes, iPods, and other mobile media players.

podcast

Podcast snippet ( WBUR/NPR On Point with Tom Ashbrook Podcast):

<item>
    <title>Remembering Teddy on Home Turf</title>
    <description>Our remembrance of Ted Kennedy continues as we open the phone lines to hear your views on the passing of an American icon.</description>
    <pubDate>Thu, 27 Aug 2009 03:14:23 -0400</pubDate>
    <link>http://www.onpointradio.org</link>
    <guid>http://podcastdownload.npr.org/anon.npr-podcasts/podcast/330/510053/112278742/WBUR_112278742.mp3</guid>
    <itunes:summary>Our remembrance of Ted Kennedy continues as we open the phone lines to hear your views on the passing of an American icon.</itunes:summary>
    <itunes:keywords>WBUR,WBUR FM,On Point from WBUR,Boston,Massachusetts</itunes:keywords>
    <itunes:duration>45:39</itunes:duration>
    <itunes:explicit>no</itunes:explicit>
    <enclosure url="http://podcastdownload.npr.org/anon.npr-podcasts/podcast/330/510053/112278742/WBUR_112278742.mp3" length="21947568" type="audio/mpeg"/>
</item>

RSS and Yahoo! Maps

Yahoo! Maps and RSS with GeoInfo
yahoo! maps with RSS

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
  xmlns:ymaps="http://api.maps.yahoo.com/Maps/V1/AnnotatedMaps.xsd">
  <channel>
    <title>David's Favorite Lunch Spots</title>
    <link>http://cscie153.dce.harvard.edu/
    </link> 
    <item>
      <title>Pinnochio's Pizza</title>
      <link>http://www.pinocchiospizza.net/ </link>
      <description>The best pizza in the Square. Get a Sicilian slices of Tomato &amp; Basil
        and Spinache.</description>
      <geo:lat>42.371984</geo:lat>
      <geo:long>-71.120269</geo:long>
    </item>  
    <item>
      <title>Felipe's Taqueria</title>
      <link>http://www.felipestaqueria.com/ </link>
      <geo:lat>42.372436</geo:lat>
      <geo:long>-71.11962</geo:long>
      <description>Great burritos. Get a super carnitas burrito with black
        beans.</description>
    </item>
    <item>
      <title>Crema Cafe</title>
      <link>http://www.cremacambridge.com/ </link>
      <geo:lat>42.373465</geo:lat>
      <geo:long>-71.120722</geo:long>
      <description>Great cafe and bakery.  I prefer the quiche or soup for lunch -- and coffee, of course.</description>
    </item>
  </channel>
</rss>

XHTML and MathML

mathml screenshot

mathml

XML Namespaces

XHTML and MathML

Define prefix and namespace URI binding and default namespace:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:mml="http://www.w3.org/1998/Math/MathML">

Use MathML inline in XHTML document:

<p>In order to mix XHTML and MathML, we need to include the proper DTD and also pay attention to XML namespaces!</p>
<mml:math>
  <mml:mtext>The roots of the quadratic equation</mml:mtext>
  <mml:mspace width="2em"/>
  <mml:mi>a</mml:mi>
  <mml:mo>&InvisibleTimes;</mml:mo>
  <mml:msup>
  <!-- content removed for clarity -->

SGML and XML

sgml and xml relationship

XML: a structure for creating and working with markup languages

XML provides a way to create markup languages. The markup languages are called applications of XML. Some applications of XML are:
Looking for existing applications of XML? Check out Oasis Open or XML.org

XML Documents: Well-formed, Valid

Nodes

Nodes (computer science)
From Wikipedia, the free encyclopedia

A node is an abstract basic unit used to build linked data structures such as trees, linked lists, and computer-based representations of graphs. Each node contains some data and possibly links to other nodes.

A node can be thought of as a logical placeholder for some data. By forming chains of interlinked nodes, very large and complex data structures can be formed.

tree

A Tree

<addressbook>
  <contact>
    <name>David Heitmeyer</name>
    <address>8 Story Street</address>
    <city>Cambridge</city>
    <state>Massachusetts</state>
    <zip>02138</zip>
    <phone type="office">617-999-5870</phone>
    <email>david_heitmeyer@harvard.edu</email>
  </contact>
  <contact>
    <name>Drew Gilpin Faust</name>
    <address>Massachusetts Hall</address>
    <city>Cambridge</city>
    <state>Massachusetts</state>
    <zip>02138</zip>
    <email>president@harvard.edu</email>
  </contact>
</addressbook>

tree

nodes

Visualizing a Tree

tree

Tree view using Stylus Studio
stylus studio screenshot

Tree view using Amaya Browser/Editor
amaya screenshot

Tree View generated with XSLT ( XSLT used to make a Tree View of and XML document.)

Extensible Stylesheet Language Transformations (XSLT) and XML Path Language (XPath)

XSLT

XPath

XML Path Language (XPath)

XPath is a language for addressing parts of an XML document, designed to be used by both XSLT and XPointer.

/child::lectures/child::lecture[@number='0']

Node Types

XPath Axes

xpath axes

Image from Norman Walsh, http://nwalsh.com/docs/tutorials/xsl/xsl/foil22.html

XPath Axes

Axis is indicated by "axis_name::element_name"
attribute::* selects all attribute nodes of the current element.

XPath Predicates

Predicates are filters that restrict the nodes selected by an XPath expression. Predicates appear inside [square brackets].

Courses

  1. /courses/course[@acad_year = 2009][@offered = 'Y']
  2. /courses/course[@acad_year = 2009 and @offered = 'Y']

Congress

  1. /congress/person[role/@type = 'sen']
  2. /congress/person[role/@state = 'CA']

RSS

  1. /rss/channel/item[position() = 1]
  2. /rss/channel/item[position() = last()]
  3. /rss/channel/item[position() mod 2 = 0]
  4. /rss/channel/item[position() mod 2 = 0]/title
  5. /rss/channel/item[1]/title

XHTML

  1. /html/head/title
  2. /html/body//a[@href]

What is the difference between the following?

XPath Functions

We'll be speaking more about these in the future. A list of the 27 functions in XPath 1.0:

Camels, Lamas, Giraffes and Okapis ... and XML!

camel   lama

giraffe  okapi

Biological Taxonomy

Background (if interested):


My Simplified Dataset

     <taxonomy>
      <kingdom name="Animalia" common="animals">
        <phylum name="Acanthocephala"/>
        <phylum name="Chordata" common="cordates">
          <class name="Actinopterygii"/>
          <class name="Amphibia"/>
          <class name="Reptilia"/>
          <class name="Mammalia" common="mammals">
            <order name="Afrosoricida" />
            <order name="Artiodactyla" common="even-toed ungulates">
              <family name="Antilocapridae">
                <genus name="Antilocapra">
                  <species name="Antilocapra americana"/>
                </genus>
              </family>
              <family name="Bovidae">
                <genus name="Addax"/>
                <genus name="Antilope"/>
                <genus name="Bison"/>
                <genus name="Gazella"/>
                <!-- more not shown -->
              </family>
              <family name="Camelidae">
                <genus name="Camelus" common="camels">
                  <species name="Camelus bactrianus"/>
                  <species name="Camelus dromedarius"/>
                </genus>
                <genus name="Lama">
                  <species name="Lama glama"/>
                  <species name="Lama guanicoe"/>
                  <species name="Lama pacos"/>
                </genus>
                <genus name="Vicugna">
                  <species name="Vicugna vicugna"/>
                </genus>
              </family>
              <family name="Cervidae"/>
              <family name="Giraffidae" common="giraffes">
                <genus name="Giraffa">
                  <species name="Giraffa camelopardalis"/>
                </genus>
                <genus name="Okapia">
                  <species name="Okapia johnstoni"/>
                </genus>
              </family>
              <family name="Hippopotamidae"/>
              <family name="Moschidae"/>
              <family name="Suidae"/>
              <family name="Tayassuidae"/>
              <family name="Tragulidae"/>
            </order>
            <order name="Carnivora" />
            <order name="Cetacea" />
            <order name="Chiroptera" />
            <order name="Cingulata" />
            <!-- more not shown -->
          </class>
          <!-- more not shown -->
        </phylum>
        <phylum name="Mollusca"/>
        <!-- more not shown -->
      </kingdom>
      <kingdom name="Archaea"/>
      <kingdom name="Bacteria"/>
      <kingdom name="Chromista"/>
      <kingdom name="Fungi"/>
      <kingdom name="Plantae"/>
      <kingdom name="Protozoa"/>
      <kingdom name="Viruses"/>
    </taxonomy>

XPath and Biology

For given species, find others in same genus

Tree 'pruned' to a specific species

Approach: select only those parts of the tree that have the species as a descendant

Flattening the Hierchary

To retain the hierarchy, we'll need to use XSLT with XPath!

Defining XML Document

Valid XML Documents

  1. Well-formed and
  2. Conforming to rules of schema
Schemas for XML. Rules that define the elements, attributes, and structure of a particular markup language.

Schema Features

Why Bother with Definitions and Validation

Sometimes you won't bother

Designing XML Markup

Avoid:

Jeni Tennison on "Bad XML"

Bad XML by Jeni Tennison, O'Reilly Media's Information about XML (May 2008)

Good XML

Narrative Documents

From The Economist: Too Soon to Kiss and Make-Up (October 16, 2008):

RUSSIA announced this week that, just as it promised, it had pulled all its troops in Georgia back to the two disputed territories of Abkhazia and South Ossetia. Many European Union leaders were swift to praise the Kremlin for meeting the conditions it agreed with France’s Nicolas Sarkozy some six weeks ago—and almost as quick to suggest a return to business as usual. A majority now want to start talks in November on a new “partnership and co-operation agreement”. Their none-so-subtle message is: forget about the pesky Georgian president, Mikheil Saakashvili, who was anyway responsible for starting the war on August 7th, and attend instead to the more urgent task of repairing relations with our biggest energy supplier.

Adding meaning via markup

<article
  cite="http://www.economist.com/opinion/displaystory.cfm?story_id=12429514">
  <p><country code="RU">Russia</country> announced this week that, just as it promised, it had
  pulled all its troops in <country code="GE">Georgia</country> back to the two disputed territories of 
  <territory>Abkhazia</territory> and <territory>South Ossetia</territory>. Many 
  <organization code="EU">European Union</organization> leaders were swift to praise the 
  <organization>Kremlin</organization> for meeting the conditions it agreed with
  <country code="FR">France’s</country> <person>Nicolas Sarkozy</person> some six weeks ago—and 
  almost as quick to suggest a return to business as usual. A majority now want to start talks in 
  <date date="2008-11">November</date> on a new "partnership and co-operation agreement". 
  Their none-so-subtle message is: forget about the pesky Georgian president, 
  <person>Mikheil Saakashvili</person>, who was anyway responsible for
  starting the war on <date date="2008-08-07">August 7th</date>, and attend instead to the 
  more urgent task of repairing relations with our biggest energy supplier.
  </p>
</article>

Data-centric Documents

Data can be contained in elements or attributes.

Elements:

<quote>
  <company>YHOO</company>
  <date>2008-10-20</date>
  <close>12.86</close>
  <volume>49985</volume>
</quote>

Attributes:

<quote company="YHOO" date="2008-10-20" close="12.86" volume="49985"/>

"Mixed":

<quote>
  <company value="YHOO"/>
  <date value="2008-10-20"/>
  <close value="12.86"/>
  <volume value="49985"/>
</quote>

Some Basic Rules

Bad XML - Generic Names

Dump from a database table in XML:

bad xml

Example with Weather

Current Weather Conditions in XML from the National Weather Service
(http://www.weather.gov/xml/current_obs/KBOS.xml:

Observations on XML

<?xml version="1.0" encoding="ISO-8859-1"?> 
<current_observation version="1.0"
	 xmlns:xsd="http://www.w3.org/2001/XMLSchema"
	 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	 xsi:noNamespaceSchemaLocation="http://www.weather.gov/xml/current_obs/current_observation.xsd">
  <credit>NOAA's National Weather Service</credit>
  <credit_URL>http://weather.gov/ </credit_URL>
  <image>
    <url>http://weather.gov/images/xml_logo.gif </url>
    <title>NOAA's National Weather Service</title>
    <link>http://weather.gov </link>
  </image>
  <suggested_pickup>15 minutes after the hour</suggested_pickup>
  <suggested_pickup_period>60</suggested_pickup_period>
  <location>Boston, Logan International Airport, MA</location>
  <station_id>KBOS</station_id>
  <latitude>42.38</latitude>
  <longitude>-71.03</longitude>
  <observation_time>Last Updated on Oct 21, 8:54 am EDT</observation_time>
  <observation_time_rfc822>Tue, 21 Oct 2008 08:54:00 -0400 EDT</observation_time_rfc822>
  <weather>Mostly Cloudy</weather>
  <temperature_string>51 F (11 C)</temperature_string>
  <temp_f>51</temp_f>
  <temp_c>11</temp_c>
  <relative_humidity>54</relative_humidity>
  <wind_string>From the Southeast at 3 MPH</wind_string>
  <wind_dir>Southeast</wind_dir>
  <wind_degrees>150</wind_degrees>
  <wind_mph>3.45</wind_mph>
  <wind_gust_mph>NA</wind_gust_mph>
  <pressure_string>29.93&quot; (1013.4 mb)</pressure_string>
  <pressure_mb>1013.4</pressure_mb>
  <pressure_in>29.93</pressure_in>
  <dewpoint_string>35 F (2 C)</dewpoint_string>
  <dewpoint_f>35</dewpoint_f>
  <dewpoint_c>2</dewpoint_c> 
  <heat_index_string>NA</heat_index_string>         
  <heat_index_f>NA</heat_index_f>
  <heat_index_c>NA</heat_index_c>
  <windchill_string>NA</windchill_string>
  <windchill_f>NA</windchill_f>
  <windchill_c>NA</windchill_c>
  <visibility_mi>10.00</visibility_mi>
  <icon_url_base>http://weather.gov/weather/images/fcicons/ </icon_url_base>	
  <icon_url_name>bkn.jpg</icon_url_name>
  <two_day_history_url>http://www.weather.gov/data/obhistory/KBOS.html </two_day_history_url>
  <ob_url>http://www.nws.noaa.gov/data/METAR/KBOS.1.txt </ob_url>
  <disclaimer_url>http://weather.gov/disclaimer.html </disclaimer_url>
  <copyright_url>http://weather.gov/disclaimer.html </copyright_url>
  <privacy_policy_url>http://weather.gov/notice.html </privacy_policy_url>
</current_observation>

Possible Improvements: Time Standards

Possible Improvements: Namespaces and Geo tagging

Possible Improvements: Nesting

Possible Improvements: Metadata in Attributes

Simple XSLT Example as an Introduction

XSLT

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output method="html"/>
  <xsl:template match="/">
    <html>
      <head>
        <title>
          <xsl:value-of select="/rss/channel/title"/>
        </title>
      </head>
      <body>
        <xsl:apply-templates/>
      </body>
    </html>
  </xsl:template>
  
  <xsl:template match="item">
    <p>
      <a href="{link}">
        <xsl:value-of select="title"/>
      </a>
      <br/>
      <xsl:value-of select="description"/>
    </p>
  </xsl:template>
  
  <xsl:template match="text()"/>
  
</xsl:stylesheet>

XSLT Processors at work

XSLT Processor


A closer look:

XSLT Processor

XSLT Processors

XSLT Examples

<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss">
    <channel>
        <title>BBC News | World | UK Edition</title>
        <link>http://news.bbc.co.uk/go/rss/-/1/hi/world/default.stm </link>
        <description>Get the latest BBC World News: international news, features and analysis from
            Africa, Americas, South Asia, Asia-Pacific, Europe and the Middle East.</description>
        <language>en-gb</language>
        <lastBuildDate>Tue, 01 Sep 2009 01:37:46 GMT</lastBuildDate>
        <copyright>Copyright: (C) British Broadcasting Corporation, see
            http://news.bbc.co.uk/1/hi/help/rss/4498287.stm for terms and conditions of
            reuse</copyright>
        <docs>http://www.bbc.co.uk/syndication/ </docs>
        <ttl>15</ttl>
        <image>
            <title>BBC News</title>
            <url>http://news.bbc.co.uk/nol/shared/img/bbc_news_120x60.gif </url>
            <link>http://news.bbc.co.uk/go/rss/-/1/hi/world/default.stm </link>
        </image>
        <item>
            <title>US general calls for Afghan changes</title>
            <description>A report by the top US general in Afghanistan says military success is
                achievable, but admits the current strategy is not working.</description>
            <link>http://news.bbc.co.uk/go/rss/-/1/hi/world/south_asia/8230017.stm </link>
            <guid isPermaLink="false">http://news.bbc.co.uk/1/hi/world/south_asia/8230017.stm</guid>
            <pubDate>Mon, 31 Aug 2009 17:27:18 GMT</pubDate>
            <category>South Asia</category>
            <media:thumbnail width="66" height="49"
                url="http://newsimg.bbc.co.uk/media/images/46297000/jpg/_46297246_007830989-1.jpg"/>
        </item>
        <item>
            <title>Poland ceremonies mark WWII start</title>
            <description>Russian and German leaders are due in Poland as it marks the 70th
                anniversary of the outbreak of World War II. </description>
            <link>http://news.bbc.co.uk/go/rss/-/1/hi/world/europe/8230678.stm </link>
            <guid isPermaLink="false">http://news.bbc.co.uk/1/hi/world/europe/8230678.stm</guid>
            <pubDate>Mon, 31 Aug 2009 23:46:09 GMT</pubDate>
            <category>Europe</category>
            <media:thumbnail width="66" height="49"
                url="http://newsimg.bbc.co.uk/media/images/46296000/jpg/_46296880_ship_1.jpg"/>
        </item>
        <item>
            <title>Kidnap girl 'bonded with captor'</title>
            <description>Kidnapped US woman Jaycee Lee Dugard bonded with her alleged captor and
                helped to run his printing firm, reports say.</description>
            <link>http://news.bbc.co.uk/go/rss/-/1/hi/world/americas/8230760.stm </link>
            <guid isPermaLink="false">http://news.bbc.co.uk/1/hi/world/americas/8230760.stm</guid>
            <pubDate>Mon, 31 Aug 2009 18:58:58 GMT</pubDate>
            <category>Americas</category>
            <media:thumbnail width="66" height="49"
                url="http://newsimg.bbc.co.uk/media/images/46297000/jpg/_46297301_jaycee_ap66i.jpg"
            />
        </item>
        <item>
            <title>Heat fuelling California wildfire</title>
            <description>Firefighters tackling a wildfire north of Los Angeles say they are making
                slow progress and the blaze remains very dangerous.</description>
            <link>http://news.bbc.co.uk/go/rss/-/1/hi/world/americas/8230540.stm </link>
            <guid isPermaLink="false">http://news.bbc.co.uk/1/hi/world/americas/8230540.stm</guid>
            <pubDate>Mon, 31 Aug 2009 20:19:25 GMT</pubDate>
            <category>Americas</category>
            <media:thumbnail width="66" height="49"
                url="http://newsimg.bbc.co.uk/media/images/46297000/jpg/_46297386_007874482-1.jpg"/>
        </item>
        <!--  removed for clarity -->
    </channel>
</rss>

XSLT Example 1

BBC RSS

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output method="html"/>

  <xsl:template match="/">
    <html>
      <head>
        <title>
          <xsl:value-of select="/rss/channel/title"/>
        </title>
      </head>
      <body>
        <h1><xsl:value-of select="/rss/channel/title"/></h1>
        <p>
          <xsl:value-of select="/rss/channel/description"/>
        </p>
      </body>
    </html>
  </xsl:template>
  
</xsl:stylesheet>

Default Rules for XSLT Processing

XSLT Example 2

BBC RSS

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output method="xml"
    doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    indent="yes"/>

  <xsl:template match="/">
    <html>
      <head>
        <title>
          <xsl:value-of select="/rss/channel/title"/>
        </title>
      </head>
      <body>
        <h1>
          <xsl:value-of select="/rss/channel/title"/></h1>
        <p>
          <xsl:value-of select="/rss/channel/description"/>
        </p>
        <xsl:apply-templates select="/rss/channel/item" />
      </body>
    </html>
  </xsl:template>
  
  <xsl:template match="item">
    <p>
      <a href="{link}">
        <xsl:value-of select="title"/>
      </a>
      <br/>
      <xsl:value-of select="description"/>
    </p>
  </xsl:template>
  
  <xsl:template match="text()"/>
</xsl:stylesheet>

XSLT Example 3

BBC RSS

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:media="http://search.yahoo.com/mrss" version="1.0">
	<xsl:param name="wantdesc">
		<xsl:value-of select="'yes'" />
	</xsl:param>
	<xsl:output method="xml" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
		doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
		indent="yes" />
	<xsl:template match="/">
		<html>
			<head>
				<title>
					<xsl:value-of select="/rss/channel/title" />
				</title>
				<meta name="description" content="{/rss/channel/description}" />
				<link rel="stylesheet" type="text/css" href="rssstyle.css" />
			</head>
			<body>
				<h1>
					<a href="{normalize-space(/rss/channel/link)}">
						<xsl:value-of select="/rss/channel/title" />
					</a>
				</h1>
				<div class="description">
					<xsl:apply-templates select="/rss/channel/image" />
					<xsl:value-of select="/rss/channel/description" />
				</div>
				<xsl:apply-templates />
				<hr />
				<p>
					<xsl:call-template name="validxhtml" />
					<xsl:call-template name="validcss" />
				</p>
			</body>
		</html>
	</xsl:template>
	
	<xsl:template match="channel">
		<xsl:apply-templates select="item" />
	</xsl:template>
	
	<xsl:template match="item">
		<div class="item">
			<div class="rsstitle">
				<a>
					<xsl:attribute name="href">
            <xsl:value-of select="link" />
          </xsl:attribute>
					<xsl:value-of select="title" />
				</a>
			</div>
			<xsl:if test="$wantdesc = 'yes' ">
				<div class="rssdescription">
					<xsl:apply-templates select="media:thumbnail" />
					<xsl:value-of select="description" />
				</div>
			</xsl:if>
		</div>
	</xsl:template>
	
	<xsl:template match="media:thumbnail">
		<img class="itemthumbnail" src="{@url}" alt="thumbnail" />
	</xsl:template>
	
	<xsl:template match="image">
		<xsl:if test="url">
			<a href="{normalize-space(/rss/channel/link)}">
				<img src="{normalize-space(url)}" alt="{title}" width="{width}"
					height="{height}" />
			</a>
		</xsl:if>
	</xsl:template>
	
	<xsl:template match="text()" />
	
	<xsl:template name="validxhtml">
		<a href="http://validator.w3.org/check/referer">
			<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!"
				height="31" width="88" />
		</a>
	</xsl:template>
	
	<xsl:template name="validcss">
		<a href="http://jigsaw.w3.org/css-validator/check/referer">
			<img src="http://jigsaw.w3.org/css-validator/images/vcss" height="31"
				width="88" alt="Valid CSS!" />
		</a>
	</xsl:template>
	</xsl:stylesheet>

XSLT and PHP

Congress

screenshot

screenshot

Components: PHP, XSL, XML Data

Download ZIP file: congress.zip

congress
|-- congress.php
|-- data
|   |-- people.xml
|   `-- usps.xml
|-- index.php
`-- xsl
   |-- grid.xsl
   |-- list.xsl
   `-- toc.xsl 

PHP

<?php
$fXml  = "data/people.xml";

# LOAD XML FILE
$XML = new DOMDocument();
$XML->load( $fXml );

# START XSLT
$xsltproc = new XSLTProcessor();
$XSL = new DOMDocument();
$fXslBase = './xsl/';
$fXsl = $fXslBase.'list.xsl';
if ($_GET['view']) {
  $fXsl = $fXslBase.$_GET['view'].'.xsl';
}

$XSL->load( $fXsl, LIBXML_NOCDATA);
$xsltproc->importStylesheet( $XSL );

if ($_GET['st']) {
   $xsltproc->setParameter('','ST',$_GET['st']);
}
#PRINT
print $xsltproc->transformToXML( $XML );
?>r
    

XSLT

<xsl:apply-templates select="/people/person[@state = $ST]"/>

list.xsl

  <xsl:template match="person">
    <tr>
      <xsl:choose>
        <xsl:when test="position() mod 2">
          <xsl:attribute name="class"><xsl:value-of select="'oddrow'"/></xsl:attribute>
        </xsl:when>
        <xsl:otherwise>
          <xsl:attribute name="class"><xsl:value-of select="'evenrow'"/></xsl:attribute>
        </xsl:otherwise>
      </xsl:choose>
      <td>
        <xsl:value-of select="@name"/>
      </td>
      <td>
        <xsl:value-of select="role/@state"/>
      </td>
      <td>
        <xsl:value-of select="role/@district"/>
      </td>
      <td>
        <xsl:value-of select="role/@party"/>
      </td>
    </tr>
  </xsl:template>
  

grid.xsl

  <xsl:template match="person">
      <div class="grid">
        <xsl:apply-templates select="." mode="photo"/>
        <br/>
        <a href="detail-{@id}.html">
          <xsl:value-of select="@name"/>
        </a>
      </div>
  </xsl:template>

 <xsl:template match="person" mode="photo">
    <xsl:param name="size" select="'medium'"/>
    <xsl:variable name="suffix">
      <xsl:choose>
        <xsl:when test="$size = 'small'">
          <xsl:text>-50px</xsl:text>
        </xsl:when>
        <xsl:when test="$size = 'medium'">
          <xsl:text>-100px</xsl:text>
        </xsl:when>
        <xsl:when test="$size = 'large'">
          <xsl:text>-200px</xsl:text>
        </xsl:when>
        <xsl:when test="$size = 'xlarge'">
          <xsl:text></xsl:text>
        </xsl:when>
        <xsl:otherwise>
          <xsl:text>-100px</xsl:text>
        </xsl:otherwise>
      </xsl:choose>
    </xsl:variable>
    <img src="http://morpheus.dce.harvard.edu/govtrack/photos/{@id}{$suffix}.jpeg" alt="Photo of {@name}"/>
  </xsl:template>
      

Copyright © 2002-2009 David P. Heitmeyer

Bookmark and Share