14. XML XSLT Basics

What you will learn

What XSLT is and what it is used for
How a stylesheet is structured
Templates, value-of, for-each, sorting, and conditions
How to run a transformation safely

What is XSLT?

XSLT (eXtensible Stylesheet Language Transformations) is a language for turning one XML document into another document, such as HTML, plain text, or different XML. An XSLT stylesheet is itself an XML file. It uses XPath, from the last lesson, to choose the data.

Think of it as a recipe: the XML is the ingredients, the stylesheet is the instructions, and the HTML page is the finished dish.

The input

XML code: library.xml

<?xml version="1.0" encoding="UTF-8"?>
<library>
  <book>
    <title>Learning XML</title>
    <author>Sam Rivera</author>
    <price>12.00</price>
  </book>
  <book>
    <title>Learning PHP</title>
    <author>Ali Khan</author>
    <price>35.50</price>
  </book>
  <book>
    <title>Apprendre le CSS</title>
    <author>Mia Laurent</author>
    <price>28.00</price>
  </book>
</library>

A first stylesheet

XSLT code: library.xsl

<?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"/>

  <xsl:template match="/">
    <html>
      <head>
        <meta charset="UTF-8"/>
        <title>Our books</title>
      </head>
      <body>
        <h1>Our books</h1>
        <table border="1" cellpadding="6">
          <tr>
            <th>Title</th>
            <th>Author</th>
            <th>Price</th>
          </tr>
          <xsl:for-each select="library/book">
            <tr>
              <td><xsl:value-of select="title"/></td>
              <td><xsl:value-of select="author"/></td>
              <td><xsl:value-of select="price"/></td>
            </tr>
          </xsl:for-each>
        </table>
      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>

The HTML it produces

Title	Author	Price
Learning XML	Sam Rivera	12.00
Learning PHP	Ali Khan	35.50
Apprendre le CSS	Mia Laurent	28.00

The parts

The root is xsl:stylesheet, declaring the XSLT namespace you saw earlier (http://www.w3.org/1999/XSL/Transform) with the prefix xsl.
xsl:output says what kind of result to make.
xsl:template match="/" is a template. It runs when the processor meets the node matched by the XPath. / is the document itself, so this is where the work starts.
Elements without the xsl: prefix, such as <h1> and <table>, are copied to the output as they are.
Elements with the prefix are instructions.

Because a stylesheet is XML, every output tag must be closed and well-formed. Write <meta charset="UTF-8"/> with a slash.

The main instructions

Instruction	Does
`xsl:value-of select="..."`	Writes the text of the selected node. Special characters are escaped for you
`xsl:for-each select="..."`	Repeats for every selected node
`xsl:sort select="..."`	Sorts the nodes of a `for-each`
`xsl:if test="..."`	Runs only when the test is true
`xsl:choose` with `when` and `otherwise`	An if, else-if, else
`xsl:template match="..."`	Defines how to handle certain nodes
`xsl:apply-templates`	Hands matching nodes to their templates
`xsl:attribute`	Adds an attribute to the output element

Sorting and filtering

XSLT code

<xsl:for-each select="library/book[price &lt; 30]">
  <xsl:sort select="title" order="ascending"/>
  <p><xsl:value-of select="title"/></p>
</xsl:for-each>

The HTML it produces

Apprendre le CSS

Learning XML

Only books under 30 are used, and they come out in alphabetical order of title. Notice <: the less-than sign must be escaped inside XML.

Conditions

XSLT code

<xsl:for-each select="library/book">
  <p>
    <xsl:value-of select="title"/>
    <xsl:choose>
      <xsl:when test="price &gt; 30"> (premium)</xsl:when>
      <xsl:otherwise> (standard)</xsl:otherwise>
    </xsl:choose>
  </p>
</xsl:for-each>

The HTML it produces

Learning XML (standard)

Learning PHP (premium)

Apprendre le CSS (standard)

Template matching

A more flexible style uses several small templates and apply-templates, which is how larger stylesheets stay tidy.

XSLT code

<xsl:template match="/">
  <html><body>
    <h1>Books</h1>
    <xsl:apply-templates select="library/book"/>
  </body></html>
</xsl:template>

<xsl:template match="book">
  <div>
    <strong><xsl:value-of select="title"/></strong>
    by <xsl:value-of select="author"/>
  </div>
</xsl:template>

The HTML it produces

Learning XML by Sam Rivera
Learning PHP by Ali Khan
Apprendre le CSS by Mia Laurent

The first template builds the page and passes every book on. The second says how one book looks. Change the book template, and every book changes.

Running a transformation

1. In a browser, by linking the stylesheet

Add a processing instruction to the XML, as you did for CSS:

XML code

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="library.xsl"?>
<library>
  ...
</library>

Open the XML file through a web server, such as your LocalWP site, and the browser shows the transformed page. Many browsers refuse to load the stylesheet from a plain file on disk, for security. Browsers support XSLT version 1.0 only, so keep version="1.0".

2. On the server, with PHP

PHP code

<?php
$xml = new DOMDocument();
$xml->load(__DIR__ . "/library.xml");

$xsl = new DOMDocument();
$xsl->load(__DIR__ . "/library.xsl");

$processor = new XSLTProcessor();
$processor->importStylesheet($xsl);

echo $processor->transformToXml($xml);

Output

The finished HTML page with the table of three books. This needs the PHP xsl extension to be switched on, which is common but not guaranteed.

3. Command line and other languages

Tools such as xsltproc, and libraries in Java, Python, and .NET, run XSLT too.

Security: only run stylesheets that you wrote or trust, and be careful with XML from outside. XSLT can read other files and, in some processors, run code. Do not let visitors upload stylesheets or choose which one runs, and keep external access switched off for untrusted input.

Is XSLT still worth learning?

XSLT is mature and still used for publishing, feeds, and document processing. On modern websites, many developers read XML with JavaScript or PHP and build HTML there instead. Knowing XSLT helps you read older systems, and it is a clean way to turn XML into other formats.

Common mistakes

Forgetting the xsl namespace, so the instructions are copied as plain text.
Output tags that are not closed, such as <br>, which makes the stylesheet itself invalid XML. Use <br/>.
Writing < inside a test instead of <.
Opening the XML straight from disk and seeing no transformation.
Namespace problems: if the XML has a default namespace, your XPath needs a prefix.
Running untrusted stylesheets.

Exercise

Write a template for match="/" that produces an HTML list (<ul>) containing one <li> per book, showing only the title, sorted from A to Z.

Show solution

<xsl:template match="/">
  <html>
    <body>
      <ul>
        <xsl:for-each select="library/book">
          <xsl:sort select="title"/>
          <li><xsl:value-of select="title"/></li>
        </xsl:for-each>
      </ul>
    </body>
  </html>
</xsl:template>

The list shows Apprendre le CSS, Learning PHP, and Learning XML.

Knowledge check

1. What does XSLT do?

It transforms an XML document into another document, such as HTML.

2. Which instruction writes the text of a selected node?

xsl:value-of

3. Why must you write < in a test?

A stylesheet is XML, so a raw less-than sign would break it.

Summary

XSLT is an XML language that transforms XML using templates and XPath.
Use value-of, for-each, sort, if, and choose, and keep the output well-formed.
Run it in a browser through a server, or in PHP and other languages. Only run stylesheets you trust.