CSE 490i - Project Part 1: Website Management using XML
Due: January 19, 2000.
Objective: We assume everyone has created a at least a small website
(home page and links) using HTML. This approach is problematic when
creating a larger site because HTML does not distinguish between content
and presentation. In this assignment, you will use XML to encode site
contents and use XSL to specify presentation. This will allow you to easily
change the presentation of the site, or to create multiple views
of the data - i.e. several different websites that present the same data in
different ways. The assignment also requires you to script your page in a
way that requests input from a user and does simple computation.
Groups & Collaboration: For this assignment, students will work
independently (we'll form into groups of two or three students for parts
2-4 of the project). We encourage collaboration on coursework, provided
that (1) you do the reading and spend some time thinking about each problem
before discussing it with others, and (2) you write up each and every
problem in your own writing, using your own words, and understand the
solution fully. Copying someone else's work is cheating, a serious offense.
The same rules will apply to groups. Each group is encouraged to
discuss its approach with other groups, but copying of architectures,
diagrams, or code is forbidden.
XML and XSL
In this first component of the project, we give you an XML file of data about MP3 files available on the web.
- Add a few more tracks to the XML file, by at least two different
- Add another aspect to each of the artists or tracks (e.g., a picture
of the artist, an album cover, a descriptive paragraph, or something
else). You may encode this new information with an XML attribute or
Next, you need to write two XSL style sheets that display the same
information (.xml document) attractively, presenting the following two
different views of the information:
- A web page for browsing the music collection. You should display a
listing of artists and tracks: for each artist, display a section that
shows where the artist is from, their musical genre, and any other
information you have about the band. Group all the tracks performed by
each artist in the artist's section.
- Liner notes for a jewel case. Assume you're going to burn a CD with
these music tracks on it. You'll want to create a listing of tracks that's
suitable for printing out and stuffing into the jewel case, and also print
a CD title to go on the spine of the CD. Use Cocoon's ability to render
PDF files to print a suitably-sized liner note (about 5.5" by 5") and spine
label (use your imagination as to how you'd print that).
You might find the following examples of working pages helpful. On
kimtah.cs.washington.edu, see /www/htdocs/examples.
Hello world is /www/htdocs/examples/hello/hello.xml and is
Here's a way to specify a document and an associated stylesheet:
Cocoon's PDF rendering example
is also available, in /www/htdocs/examples/pdf/.
In the final part of the project, you'll apply yet another stylesheet to
your XML file such that it creates an HTML form which allows you to select
one or more MP3 files for downloading (e.g., checkbuttons whose values are
the size of the MP3 file, which is usually a string like "3.4 MB"). The
form should also ask for the user's connection speed. When the user
the user how long it'll take to download the selected files (both
individually, as well as cumulatively).
which calls sample.xml.
XML source is available in /www/htdocs/examples/dcp/.
What to Hand In
Hand in the URL of a top-level web page that lists your name and contact
information, as well as:
If you get stuck or can't complete every part of the assignment, do as much
as you can. Partial credit will definitely be awarded. If a bug or software
glitch gets you, let us know as soon as possible (we'll give credit for
finding these) and keep working on other parts of the assignment.
- A link to your (modified) XML file containing your extra tracks, and
the extra attributes you added to the file
- A link to the web-browsing-friendly view of the data
- A link to the CD-liner-note view of the data
- A link to your download-time-computing form
- Descriptions of your solutions: how does each of your XSL files work?
Explain your algorithms, and why they generate the correct output. A
paragraph for each part of the project is probably sufficient.
- A pointer to where we can find your files, to assist in grading
A crucial set of documentation
and suggestions provides instructions, hints, and troubleshooting
If your username is joe and you create a file foo.xml in
your ~/www directory on Kimtah, then the URL
kimtah.cs.washington.edu/~joe/foo.xml should access it. Your file
must be readable by the web server, which is running as user
nobody. Generally, this means that you need to make the file
world-readable using chmod.
First make a drawing of the structure of the XML file we have given you,
using the notation used in Figure 14-1, in Chapter
14 of The XML Bible.
Next read the pages listed below, focussing on basic principles and
on these XSL directives: xsl:template,
xsl:value-of, and xsl:text.
Pointers to readings
- The Cocoon documentation is well worth reading. The
white paper contains a gentle
introduction to XML, how XML differs from HTML, and XSL.
guide tells you how to get started writing XML/XSL, and gives you an
overview of the Cocoon system's architecture.
- The XML Bible, Chapter 14.
This is perhaps the best introduction and referenc to XSL and what you can
do with it.
section and other useful info.
- What parts of the FO spec areactually implemented
Your XSL file has to be a well-formed XML file. Note that several HTML
tags that you know and love, such as <LI>, are not well-formed
XML. So in order to make the XSL file well-formed, you need to close the
tag with </LI>.
This restriction will also cause problems when you try to create an HTML
anchor tag whose attribute value depends on your input data (for example,
<A HREF="...">). In this case, you need to use the
xsl:attribute directive. For example, the XSL template:
will generate the HTML code:
<A HREF="URLNode's value">NameNode's value</A>
Tessa Lau | email@example.com