Mike Rundle's Weblog

XML/XSLT Site: A Blast From the Past

BMWxml: A graduate class project. Note: this site is in XML, so use IE6 or Mozilla to view it.

For "Introduction to XML", a graduate class I took early last school year, we had to make a complete, data-intensive website using XML and XSLT (styled with CSS). I decided to make a mini-BMW site with data, prices, and pictures from their 2003 model year cars. When designing The Car Blog, I took some style cues from that BMWxml site just because I kinda liked the look of it. But anyway.

I've used that BMWxml site as a tutorial whenever friends of mine ask me about coding XSLT (Didier, Alex, Mike, etc.) so I thought that I would go one step further and release the site's code — XML, XSLT, and CSS — open for free modification and learning. The copyright is now a "copyleft" courtesy of Creative Commons and the site is under an Attribution + Non-Commercial license. So that means you can take the code, play with it, use it your own projects, and learn from it, but can't profit from it. And if you want to profit from it, shoot me an email first.

Have fun.

BMWxml

http://bmwxml.phark.net/index.xml (If you don't have a Mozilla-based browser or IE6, don't bother clicking the link).

Well I've been working on this project full-force since this past Friday — approximately 11-13 hours a day, then sleeping for about 10, getting up, and repeating if necessary. And it has been very necessary because I've never really dabbled in XSLT (Extensible Stylesheet Language Transformations) before. The project isn't done yet, but me tell you that learning XSLT will probably turn out to be the most beneficial technology I've been exposed to here at RIT.

You can do almost anything with XSLT. It is almost a PHP-like server-side scripting language: completely written in XML to be used with XML. It is designed to take XML data — any kind as long as it validates — and transform it into something else. Whether the "something else" is an RSS document, an XHTML website, a PostScript illustration, a PDF document, an SVG graphic, or any number of things.

By using XPath functions in your XSLT stylesheet, you can turn any data into any other kind of data. Think of it like this: XML documents and data are your "database", while XSLT stylesheets are the templates you want your data to fit into. XSLT can change and manipulate your XML data anyway you like, and then output into any medium you wish. Sound too good to be true? Nope, it's real.

Unfortunately, XSLT processing is only supported (on the client side) by the Mozilla rendering engine — Firefox/bird, Camino, etc. Even Safari doesn't support it, which is very unfortunate. On the upside, you can use server-side languages like Perl, Java (JSP, EJBs, etc.), and PHP to process XML data with an XSLT stylesheet and spit the output to the website. Or to a file. Or across a network. Or send it out as an email announcement. Or save it to a database halfway across the world using XML-RPC (that's another blog post). But you get the idea :)

XSLT Project/Capitalization

I'm sure there is an easier way to accomplish this, but here's the situation. I have an XML node/attribute that I want to capitalize the first letter of in an XSLT stylesheet. There isn't a XPath function that will do it for me, so I had to roll my own.

When working with the attribute @type, this is what I used:


<xsl:value-of select="concat( translate( substring( @type, 1, 1 ),'abcdefghijklmnopqrstuvwxyz', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' ), substring( @type, 2, string-length( @type )))" />


What this does is concatenate an uppercased version of the very first letter of the word, with the rest of the word. It looks complicated, but it's really not. I'm basically searching for any lowercase letter of the alphabet, replacing it with its taller brother, and piecing the parts back together.

Huh?
"Wait a sec here, Mike, you've never written about XSLT here before?" Yup, you're right. I have a project due this coming Thursday which is supposed to be a rather large XML/XSLT website about something you know a lot about. I know alot about BMW cars, so I decided I'd do mine off of data from BMW's USA site.

If you're interested, you can view the project in real time here on my server — of if you're really geeky, you can check out the XML file and XSLT stylesheet that makes it happen.

I haven't tested on IE6 yet, and it is definitely a work-in-progress. Also, if the site is down, that means I've taken my laptop off of the network for a bit, and it'll be back on in awhile.

Please post any browser bugs, comments, suggestions, or anything else you would like to say as a comment to this entry. I'm not responsible if links don't work, pages don't look right, or text isn't styled :) Remember, I will be updating this site in real time up until Wednesday night. Have fun!