In this tutorial we are going to use XSLT to transform a simple XML document into an XHTML web page. XSLT stands for eXtensible Style Sheet Transformations. With our XSL document we will pretty much grab the values we need from the source XML and display them nicely in XHTML. In order to complete this tutorial you should have a basic understanding of XML documents, HTML/XHTML, and CSS.
First off you need some sample XML. I made a quick list of cars I have owned.
<?xml version="1.0" encoding="utf-8"?> <autos> <car> <year>1995</year> <make>Eagle</make> <model>Talon</model> <trim>ESi</trim> </car> <car> <year>1998</year> <make>Mitsubishi</make> <model>Eclipse</model> <trim>GS-T Spyder</trim> </car> <car> <year>2004</year> <make>Cadillac</make> <model>CTS</model> <trim>Sport</trim> </car> </autos>
We are going to add an XML stylesheet to the document, similar to a CSS file with HTML. In order to add the file we need to add the xml-stylesheet tag to our root document.
<?xml-stylesheet type="text/xsl" href="output.xsl"?>
Which should give you this.
<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/xsl" href="output.xsl"?> <autos> <car> <year>1995</year> <make>Eagle</make> <model>Talon</model> <trim>ESi</trim> </car> <car> <year>1998</year> <make>Mitsubishi</make> <model>Eclipse</model> <trim>GS-T Spyder</trim> </car> <car> <year>2004</year> <make>Cadillac</make> <model>CTS</model> <trim>Sport</trim> </car> </autos>
Next you will need to create a new document that I called output.xsl. This file will be used to tell the browser how to display our XML. Here is a pretty standard starting template.
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Cars</title>
</head>
<body>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Now we need to create a typical HTML table to display our results in.
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Cars</title>
</head>
<body>
<table>
<tr>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Trim</th>
</tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Now we are going to determine which fields we want to display in the rest of the table rows. We will do this by using the xsl:for-each tag. This will pretty much create a for each loop and loop through which ever values you specify. We want whatever data is container withing the car tag within the autos tag. So you would do something like this:
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Cars</title>
</head>
<body>
<table>
<tr>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Trim</th>
</tr>
<xsl:for-each select="autos/car">
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Then we simple tell XSLT how to display the values (in tables and cells in this case) and what values we want.
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Cars</title>
</head>
<body>
<table>
<tr>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Trim</th>
</tr>
<xsl:for-each select="autos/car">
<tr>
<td><xsl:value-of select="year"/></td>
<td><xsl:value-of select="make"/></td>
<td><xsl:value-of select="model"/></td>
<td><xsl:value-of select="trim"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Then to finish it off you can style your table with some CSS.
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Cars</title>
<style>
td{
border-bottom:1px dashed #ccc;
padding-left:4px;
}
th{
background: #bacfec;
text-align:center;
padding: 0 15px 0 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Trim</th>
</tr>
<xsl:for-each select="autos/car">
<tr>
<td><xsl:value-of select="year"/></td>
<td><xsl:value-of select="make"/></td>
<td><xsl:value-of select="model"/></td>
<td><xsl:value-of select="trim"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Its that simple. We started a simple XSL file and output an XHTML page using XSL.
Download the Source Code
[tweet2download file=”source.zip” tweet=”Simple XML to XHTML Transformation http://su.pr/1ci3ZU @teamtutorials” follow=”@teamtutorials” /]