Transforming the XML - Page 21
November 18, 2002
Our first task is to display the list of CDs in HTML format. We need to create
an XSLT stylesheet to transform the XML to HTML, and then we'll create a server-side
page to carry out the transformation (that is, to apply the XSLT to the XML,
and output the resulting HTML).
We just want a plain HTML table, listing the CDs ordered first by band and
then by name. We also need links for modifying and deleting, and a link for
adding a new CD. We want the page to look something like the following:
The following very simple XSLT stylesheet (cd_list.xsl) accomplishes
this:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" omit-xml-declaration="yes"
/>
<xsl:template match="/cd-list">
<html>
<head>
<title>CD List</title>
<style>
table {
color: #000000;
font-family: Arial, Helvetica,
sans-serif;
font-size: 11px;
}
th {
font-size: 12px;
font-weight: bold;
}
a {
color: #000000;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<table border="1" cellpadding="3"
width="300">
<tr>
<th>Name</th>
<th>Band</th>
<th>Year</th>
<th>Delete</th>
</tr>
<xsl:apply-templates
select="cd">
<xsl:sort select="band"/>
<xsl:sort select="name"/>
</xsl:apply-templates>
<tr>
<td colspan="4"><a href="cd_edit.(asp/php/jsp)">Add
New</a></td>
</tr>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="cd">
<tr>
<td>
<a>
<xsl:attribute name="href">
cd_edit.(asp/php/jsp)?id=<xsl:value-of select="@id"/>
</xsl:attribute>
<xsl:value-of select="name"/>
</a>
</td>
<td>
<xsl:value-of select="band"/>
</td>
<td>
<xsl:value-of select="year"/>
</td>
<td>
<a>
<xsl:attribute name="href">
cd_delete.(asp/php/jsp)?id=<xsl:value-of select="@id"/>
</xsl:attribute>
delete
</a>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>
There is not much to explain here. We
simply create a <table> that contains a row for each CD. The name of the CD is a link to cd_edit.(asp/php/jsp), and the id
of the CD is sent as a query string variable:
<a>
<xsl:attribute
name="href">
cd_edit.(asp/php/jsp)?id=<xsl:value-of
select="@id"/>
</xsl:attribute>
<xsl:value-of
select="name"/>
</a>
The cd_edit.(asp/php/jsp)
page is a page that contains a form to allow the user to modify the CD information.
This page will be created later. In the same way, the last column of each
row contains a link to cd_delete.(asp/php/jsp)
for deleting the CD from the list. The id
is sent as a query string variable. Finally, at the bottom of the table there
is a link to cd_edit.(asp/php/jsp)
for adding a new CD (note that no id
is sent, since a new CD does not yet have an id).
NOTE: We'll use this stylesheet almost unchanged for ASP, PHP,
and JSP. The only thing that changes is the file extension in the links
(.asp, .php,
or .jsp). In the above section I've therefore included
(asp/php/jsp) as the extension,
to emphasize that the file extension depends on the server-side technology
being used.
The next thing is to create the page that performs the transformation on
the server side.
Basic Techniques - Page 20
Practical XML for the Web
ASP: Transforming the XML - Page 22
|
