Introduction to XSLT in XML

Overview

Have you ever know that you can write your own HTML tags with XML? Thats possible by using XSLT in XML. The main use of XSLT is that you can present XML data with HTML format by using this technique. You can say XSLT is a language which is known as “Styling Language” for XML. You can easily transform your xml document into HTML format by the help of XSLT.

XSLT : stands for XSL Transformations (EXTENSIBLE STYLESHEET LANGUAGE TRANSFORMATIONS)

In this chapter, we will learn how we can use XSLT in your XML document to transform it into HTML format and display result. Before you start using XSLT in your program, you should have basic idea or XML and HTML.

Let’s start with a simple example.

Example:

XML document with product data:

<?xml version="1.0" encoding="UTF-8"?>
<products>
  <product>
    <name>Sony Xperia R1 Dual</name>
    <color>Silver</color>
    <price>$650.00</price>
    <discount>$20.00</discount>
  </product>
  <product>
    <name>Sony Large P1</name>
    <color>White</color>
    <price>$750.00</price>
    <discount>$30.00</discount>
  </product>
  <product>
    <name>Sony Xperia XP1</name>
    <color>Gold</color>
    <price>$850.00</price>
    <discount>$40.00</discount>
  </product>
  <product>
    <name>Sony Xperia XP1 Latest 2018</name>
    <color>Black</color>
    <price>$950.00</price>
    <discount>$50.00</discount>
  </product>
</products>

Your XSLT transformation

<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
  <span style="font-size:25px; font-weight:bold;">Products</span>
  <table cellpadding="5" cellspacing="5"border="1" style="border:solid 1px silver;">
      <tr bgcolor="silver">
      <th>Name</th>
      <th>Color</th>
      <th>Price</th>
      <th>Discount</th>
    </tr>
    <xsl:for-each select="products/product">
    <tr>
      <td><xsl:value-of select="name"/></td>
      <td><xsl:value-of select="color"/></td>
      <td><xsl:value-of select="price"/></td>
      <td><xsl:value-of select="discount"/></td>
      </tr>
      </xsl:for-each>
  </table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Final Output:

Root element:

Since it’s ultimately XML document so we need to define root element similar like we do in XML document.

For example it start with XML declaration like this: <?xml version="1.0" ?>

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

<xsl:stylesheet> it define that the document is an XSLT style sheet document with version and namespace. Here, you can use above element as root element while transforming your XML document. You may also use “<xsl:transform>”. You must have to follow the above syntax.

Namespace (“xmlns:xsl="http://www.w3.org/1999/XSL/Transform"”) is also necessary to transform your xml document which is point to W3C XSLT namespace. Along with that, you also need to add version as in above syntax.

Reference:

<?xsl:stylesheet type="text/xsl" href="products.xsl"?>

You can also add XSL stylesheet into your XML document with above syntax below the root element. Then you can directly load your XML document in any browser, it automatically transform your XML document and display design which you have defined in your XSLT template.

Html Contents/Tags:

Now it’s time to add HTML contents in template. Here, you can write your own HTML element or tags to get desired result in browser within XSLT document.

Template:

The “<xsl:template>”, it defines a template in XSLT document. The “<xsl:template match="/">” attribute identify the template of XML document with its root element.

Value of element:

Here, <xsl:value-of select="name"/> element is used to extract name from selected product. Once it extract, it add into output stream of the XSLT transformation.

For each element:

Here, <xsl:for-each select="products/product"> is used to do looping and extract all products under product element.Once it extract, it display all products with specified html output as per need.

In this tutorial, we will cover following chapters which give more inside XSLT and its different sections.

⦁ XSLT Language