Tutorial 04
Displaying Data with XSLT
1
Contents
• The CyberShoppe Problem
• Solution
2
The CyberShoppe Problem
• A list of products sold at CyberShoppe needs to be displayed. These products need to be
categorized based on their prices.
• The details about products priced higher than $50 are to be displayed in red and the rest are
to be displayed in green.
• The details to be displayed include the product name, description, price, and quantity on
hand. The output should be displayed as shown in the following figure:
3
Solution
1. Creating a new XSL file
2. Using for loop to retrieve data
3. Classifying products according to their price
4. Creating the XML file
5. Testing
4
1. Creating a new XSL file
Create a new XSL file and insert it template
5
2. Using for loop to retrieve data
6
3. Classifying products according to their price
3.1 Inserting the conditional statement
3.2 The price greater than $50 Case
3.2 The rest case
7
3.1 Inserting the conditional statement
Use tag <xsl:choose> when you have many cases, tag <xsl:when> to
test the condition, tag <xsl:otherwise> for the rest case.
8
3.2 The price greater than $50 Case
All contents in this case have to be displayed in red, you the tag
<font> to format text color.
9
3.2 The rest case
In the rest cases, the contents is in green. Save the file as
product.xsl
10
4. Creating the XML file
Reuse the XML file in the previous session
11
5. Testing
Open the XML file with a web browser to check again.
12
References
• New Perspectives on Creating Web Pages with HTML and
XML (Patrick Carey & Mary Kemper) - Course Technology
Publisher
• Creating Cool Web Sites with HTML, XHTML and CSS Taylor, Dave, Wiley
13
14