XSLT Syntax - Rookie Nerd

XML Introduction

What is xml

Features and Advantages of XML

XML Example

XML Related Technologies

XML Attributes

XML Comments

XML Tree

XSLT Syntax

Let's take an example to take a sample XML file and transform it into a well formatted HTML document.

See this example:

Create an XML file named employee.xml, having the following code:

Employee.xml

snippet

<?xml version = "1.0"?>
<class> 
   <employee id = "001">
      <firstname>Aryan</firstname> 
      <lastname>Gupta</lastname> 
      <nickname>Raju</nickname> 
      <salary>30000</salary>
   </employee> 
   <employee id = "024"> 
      <firstname>Sara</firstname> 
      <lastname>Khan</lastname> 
      <nickname>Zoya</nickname> 
      <salary>25000</salary>
   </employee> 
   <employee id = "056"> 
      <firstname>Peter</firstname> 
      <lastname>Symon</lastname> 
      <nickname>John</nickname> 
      <salary>10000</salary> 
   </employee> 
</class>

Define an XSLT stylesheet document for the above XML document. You should follow the criteria give below:

Page should have a title employee.
Page should have a table of employee's details.
Columns should have following headers: id, First Name, Last Name, Nick Name, Salary
Table must contain details of the employees accordingly.

Step1: Create XSLT document

Create the XSLT document which satisfies the above requirements. Name it as employee.xsl and save it in the same location of employee.xml.

Employee.xsl

snippet

<?xml version = "1.0" encoding = "UTF-8"?>
<!-- xsl stylesheet declaration with xsl namespace: 
Namespace tells the xlst processor about which 
element is to be processed and which is used for output purpose only 
--> 
<xsl:stylesheet version = "1.0" 
xmlns:xsl = "http://www.w3.org/1999/XSL/Transform">   
<!-- xsl template declaration:  
template tells the xlst processor about the section of xml 
document which is to be formatted. It takes an XPath expression. 
In our case, it is matching document root element and will 
tell processor to process the entire document with this template. 
--> 
   <xsl:template match = "/"> 
      <!-- HTML tags 
         Used for formatting purpose. Processor will skip them and browser 
            will simply render them. 
      --> 
      <html> 
         <body>
            <h2>Employee</h2> 
            <table border = "1"> 
               <tr bgcolor = "#9acd32"> 
                  <th>ID</th> 
                  <th>First Name</th> 
                  <th>Last Name</th> 
                  <th>Nick Name</th> 
                  <th>Salary</th> 
               </tr> 
               <!-- for-each processing instruction 
               Looks for each element matching the XPath expression 
               --> 
              <xsl:for-each select="class/employee"> 
                  <tr> 
                     <td> 
                        <!-- value-of processing instruction 
                        process the value of the element matching the XPath expression 
                        --> 
                        <xsl:value-of select = "@id"/> 
                     </td> 
                     <td><xsl:value-of select = "firstname"/></td> 
                     <td><xsl:value-of select = "lastname"/></td> 
                     <td><xsl:value-of select = "nickname"/></td> 
                     <td><xsl:value-of select = "salary"/></td>   
                  </tr> 
               </xsl:for-each> 
            </table> 
         </body> 
      </html> 
   </xsl:template>  
</xsl:stylesheet>

Step2: List the XSLT document to the XML document

Update employee.xml document with the following xml-stylesheet tag. Set href value to employee.xsl

snippet

<?xml version = "1.0"?> 
<?xml-stylesheet type = "text/xsl" href = "employee.xsl"?> 
<class> 
... 
</class>

Updated "employee.xml"

snippet

<?xml version = "1.0"?>
<?xml-stylesheet type = "text/xsl" href = "employee.xsl"?> 
<class> 
   <employee id = "001">
      <firstname>Aryan</firstname> 
      <lastname>Gupta</lastname> 
      <nickname>Raju</nickname> 
      <salary>30000</salary>
   </employee> 
   <employee id = "024"> 
      <firstname>Sara</firstname> 
      <lastname>Khan</lastname> 
      <nickname>Zoya</nickname> 
      <salary>25000</salary>
   </employee> 
   <employee id = "056"> 
      <firstname>Peter</firstname> 
      <lastname>Symon</lastname> 
      <nickname>John</nickname> 
      <salary>10000</salary> 
   </employee> 
</class>

Step3: View the XML document in Internet Explorer

The output will look like this:

Output: