Latest web development tutorials

XSLT transformation

Case study: how to use XSLT to transform XML into XHTML.

We will detail in the next chapter of this example will be explained.


Correct style sheet declaration

The document declared as XSL stylesheet root element is <xsl: stylesheet> or <xsl: transform>.

Note: <xsl: stylesheet> and <xsl: transform> are completely synonymous and can be used!

According to the W3C XSLT standards, the correct way to declare an XSL stylesheet is:

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

or:

<xsl:transform version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

To access XSLT elements, attributes and characteristics, we must at the top of the document namespace declaration XSLT.

xmlns: xsl = "http://www.w3.org/1999/XSL/Transform" points to official W3C XSLT namespace. If you use this namespace, it must include the attribute version = "1.0".


From an original XML document start

We now want the following XML document ( "cdcatalog.xml")is converted to XHTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
.
.
</catalog>

See XML file in Firefox and Internet Explorer: Open the XML file (usually by clicking on a link) - XML document will color code of ways to display the root element and child elements.Click on the left side of the element plus sign (+) or minus (-) to expand or shrink structural elements. To view the original XML source file (without the plus and minus signs), select "View Page Source" or "View Source" in your browser menu.

Check the XML file in Netscape 6: Open theXML file, then right-click in XML file and select "View Page Source." XML document will color code of ways to display the root element and child elements.

Check the XML file in Opera 7: Open theXML file, then right-click in the XML file, select "Frame" / "View Source." XML document will be displayed as plain text.

See "cdcatalog.xml"


Create XSL stylesheets

Then create a template conversion XSL stylesheet with ( "cdcatalog.xsl"):

<?xml version="1.0" encoding="ISO-8859-1"?>

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

<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

See "cdcatalog.xsl"


The XSL style sheet link to an XML document

The XML document ( "cdcatalog.xml") to add a reference to an XSL style sheet:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
.
.
</catalog>

If you're using a browser compatible with XSLT, it would be well to put your XMLinto XHTML.

View Results

We will in the next chapter of the above example to explain the details.