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

• Add a few more tracks to the XML file, by at least two different artists
• 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 subelement.

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 reachable here.

  Here's a way to specify a document and an associated stylesheet: compare this with this.

  Cocoon's PDF rendering example is also available, in /www/htdocs/examples/pdf/.

  Dynamic Pages & Javascript

  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 submits the form, your Javascript logic should generate a page that tells the user how long it'll take to download the selected files (both individually, as well as cumulatively).

  You might find the following javascript example helpful: a form 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:
  1. A link to your (modified) XML file containing your extra tracks, and the extra attributes you added to the file
  2. A link to the web-browsing-friendly view of the data
  3. A link to the CD-liner-note view of the data
  4. A link to your download-time-computing form
  5. 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.
  6. A pointer to where we can find your files, to assist in grading
  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.

  Getting started

  A crucial set of documentation and suggestions provides instructions, hints, and troubleshooting ideas.

  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:apply-templates, xsl:attribute, 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. The user 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.
  • Dynamic HTML: The Definitive Reference, by Danny Goodman, has a good Javascript section and other useful info.
  • What parts of the FO spec areactually implemented by Cocoon.

  XML/XSL hints

  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:

  <xsl:template match="ParentNode"> <A> <xsl:attribute name="HREF"> <xsl:value-of select="URLNode"/> </xsl:attribute> <xsl:value-of select="NameNode"/> </A> </xsl:template> will generate the HTML code: <A HREF="URLNode's value">NameNode's value</A>

  ---

  Tessa Lau | tlau@cs.washington.edu