Introduction | XML Data Setup | XSL and XSLT | XPath | Conclusion

XSL - XSLT: Web Page Makeovers

The "T" in XSLT stands for "Transformation," and like those Transformer toys you may have had as a kid, where a Volkswagen got changed into a Robot, XSLT can transform a collection of records into a web page, or instructions to the onboard piloting device of your personal hover-jet to get it into the school parking lot, or a comma-delimited file, your choice.

Let's use XSL to transform our XML document into a simple web page:

Start with
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html" />

The first line tells the browser it's in XML-land. The second tells it that the XSL stylesheet will follow certain conventions. The third warns the browser to be expecting HTML.

Next, add:
<xsl:template match="/">

(This tells the browser to start at the root of the database of the xml file which links to this xsl file.)

Then a bit of HTML:
<table border="1" align="center" bgcolor="#ffeeee">
   <tr bgcolor="#00FF99">
       <th>Class</th>
       <th>Credit Hours</th>
       <th>Teacher</th>
   </tr>

(This sets up the header row in the Curriculum table we're making. Your page could have a lot more HTML on it.)

Next, set up the loop:
<xsl:for-each select="/Curriculum/class">

(This means "For each record called "class" in the database called "Curriculum" do what comes next." The <xsl:for-each> tag will be closed later. Look for it.)

Write the row that repeats and writes out each record:
<tr bgcolor="#CCFFFF">
<td>
<xsl:value-of select="className" />
</td>
<td align="center">
<xsl:value-of select="credithours" />
</td>
<td>
<xsl:value-of select="Teacher" />
</td>
</tr>

(The xsl:value-of tag means "Select the field called ("className", for example) and write the contents of the field here. In the first record, the field called className has the contents, or value, of "Intro to Computers"; the field called credithours has the contents "3"; and the field called "Teacher" has the contents "Rhonda Lay". After writing the first row, the browser goes back and gets the contents of the second record and writes another row. It keeps doing that until there are no more records.)

Close all your tags:
Like a good cook, a good xsl document keeps a clean kitchen, everything washed up and put away for the next time.

</xsl:for-each> (This opened just before the looping row.)
</table> (This opened before the header row.)
</xsl:template> (This opened before the table.)
</xsl:stylesheet> (This opened before the template.)

The End. Save this file as firstxsl.xsl.

Attach the xsl file to the xml file:
Add this as the second line on your xml document:
<?xml-stylesheet type="text/xsl" href="firstxsl.xsl"?>

See what this looks like here.

End Note:
The observant among you will notice that we didn't close two of the tags we put in at the beginning of the document:

<?xml version="1.0" ?>
This one is a Processing Instruction (PI) and doesn't need to be closed.

<xsl:output method="html" />
This one is empty (self-closing). See the / right before the >? Don't confuse this /> with the "/"> in the template tag: <xsl:template match="/">

==>Next - XPath