How This Site Works, Part II

posted on august 2, 2004, tag: site

One of the great things about CSS is the ability it gives you to separate style from content. By simply changing a single stylesheet you can drastically alter the look and feel of a site without ever having to change any content. To strengthen the separation, one should avoid placing markup in their content as much as possible, only including absolutely necessary tags (like b, blockquote and a href amoung others). By doing this, you make the task of reusing your content much easier and cleaner. The less markup you have in your content, the easier it is to completely change your site by changing only the stylesheet.

But what if you need to reuse your content in a format other than XHTML? What if, on a whim, I wanted to create a mobile version of this site in WML or I wanted to browse my content in an OS X application? In these cases, the separation of style from content does nothing. At least not if your content is in XHTML format. Why should the content of this site—which is not specific to the Internet—be stuck in a format only recognized by the web browsers? It shouldn't. How can we take this separation a step further? How can we separate style from format from content? We use XML.

What in the hell is XML?

To quote the W3C, XML is "a simple, very flexible text format derived from SGML." What does that mean to you? It means that XML is a language for creating structured documents. Your documents can be extremely simple or extremely complex, it doesn't matter. XML is data and markup only, nothing else. No style, no look, just content and markup. There is no specific tag set, so your documents can be customized to truly describe your data and fit your needs.

To say that XML is portable is not quite enough—XML is portable and reusable. Because it's only structure and data, you can have one XML file that you reuse for countless purposes—be it XHTML for browser display, WML for mobile display, or in its pure form for use in a Cocoa application. One XML file, limitless use.

But how can a file composed of only textual data and markup be used for all these different purposes? You transform them using XSL. Using XSL, you can format your XML data how ever you wish and display it in any format desired. It's really quite powerful.

So how does this site work already?

Maniacal Rage is a fairly simple collection of similar data. I have a weblog comprised of "entries" and "comments." The entries can be assigned to "categories," and comments can only be assigned to entries. Other data on the site exists in a much looser fashion; the about section contains data related to site/author details, the photos section contains lists of photo collections and so on. All of my data is stored in MySQL.

When you request a page, a simplified way of describing the process is to say that I pull data out of the DB, build a valid XML file and transform it using XSL into a valid XHTML file which is styled using CSS. MySQL » PHP » XML » XSL » XHTML+CSS. Yes, I know I said simplified. I'm sure a 5 step process doesn't sound simplified, though. And while it's true that it would be faster to go directly from MySQL to PHP to you, there is a reason for the extra steps.

See, if you add the RSS subdomain (e.g., rss.maniacalrage.net), I don't give you XHTML+CSS. Instead, I transform the XML using a different XSL stylesheet into valid RSS. Same XML file, same content, different XSL file, different output format. Same goes for Atom and anything else I can think up. Or you can simply view the raw XML for any page by adding the XML subdomain (e.g., xml.maniacalrage.net).

Perhaps you're a visual person, though, and you'd like to see a simple diagram for how this site functions, from request to output. Well, I've got you covered:

You'll note that .htaccess is the first link in the chain. This is an extremely important part of how this site works. Other than the photos section and other places where using actual directories is necessary (like where I store images and stylesheets), none of the directories you see in my URLs actually exist. When you visit /archives/, you're actually visiting /index.php?section=archives. I use .htaccess to take the URL you request and properly send queries to a PHP file (and there's only one of them). That file handles retrieving content for the section you've requested. I use mod_rewrite for all of my URLs.

In the next installment of this series, I'll get down to the nitty-gritty and give you some code snippets and such so that you might have a better hands-on understanding of just how things work under the hood.

This system allows for completely reusable content. Hell, you could have your own XSL file (if I were to let you) and make Maniacal Rage look however you want. Or I could use an XSL file to dump the contents of the site into the form of a book. The possibilities are endless. As always, I welcome your questions and comments.

This entry is part II in a series focusing on how this site works. Stay tuned for more.

Comments

There are 13 comments, comments are closed