About About Page Page

The About Page page is a lot of things. It is primarily to explain what is going on behind-the-scenes on any page. I won't go into very fine details. Rather, just expect enough here to get you started on any topic. You can follow the links I mention to get more details. This is also the first page I created in SERNLabs with PHP in it. Plus there is also a XML-XSL framework for storing content and of course there's the jQuery.

Keywords: XMLPHPXSLTXSLXSL TransformDTDexternal linksfixed background<xsl:for-each><xsl:value-of>

The Code

There is supposed to be an About Page page for every page in SERNLabs, even for the About Page (that's what you are reading right now (recursion! drives me crazy too ;-) )). I really didn't want to maintain a whole HTML page for every page I create. So, I decided to use PHP, XML and XSL to separate out the variable content from the static design.

So, what I ended up with was a series of XML pages that stored the HTML and raw text. Something like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE page SYSTEM "about_page.dtd">
<page>
    <title></title>
    <description>
    </description>
    <section>
        <title></title>
        <content> 
        </content>
    </section>
</page>

I guess this is pretty self-explanatory. For any help on XML always remember W3Schools.

Then, I designed some XSL mark up to help render the content of those XMLs:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
            <div id="container">
                <div id="mainContent">
                    <div id="actualContent">
                        <h1>
                            About <xsl:value-of select="page/title"/> Page
                        </h1>
                        <p>
                            <xsl:value-of disable-output-escaping="yes" 
                            select="page/description"/>
                        </p>
                        <xsl:for-each select="page/section">
                            <h3>
                                <xsl:value-of select="title" />
                            </h3>
                            <xsl:value-of disable-output-escaping="yes" select="content" />
                        </xsl:for-each>
                    </div>
                </div>
            </div>
        </xsl:template>
</xsl:stylesheet> 

XSL is pretty comprehensively explained at W3Schools XSLT Tutorial.

The next challenge was to combine the XSL and XML to dynamically render pages. This can be done through XSLT on Client using Javascript or through XSLT on Server. I was averse to dealing with Browser-specific rendering issues later, and so decided to opt for the latter using PHP. W3Schools falls a litte short here since their examples for XSL Transformation use ASP. But I found the required info at Sitepoint.com's Transform your PHP with XSLT.

The final code was pretty simple:

$doc = new DOMDocument();
$xsl = new XSLTProcessor();

$doc->load("../includes/aboutpage/aboutpage.xsl");
$xsl->importStyleSheet($doc);

$page = $_GET["pg"];
$page = explode(".", $page);
$page = $page[0];
$page = "includes/data/" . $page . ".xml";
$doc->load($page);
echo $xsl->transformToXML($doc);

One major catch was that the PHP XSLT Parser parsed the HTML that I wanted to display as is. I got around this by storing the HTML in the XSL withing CDATA blocks. CDATA blocks are not parsed by the parser. This was the best solution I found to maintain the readability the XMLs:

<![CDATA[
    <p>There is supposed to be an About Page page for every page in SERNLabs,
    even for the About Page (that's what you are reading right now 
    (recursion! drives me crazy too ;-) )). I really didn't want to maintain 
    a whole HTML page for every page I create. So, I decided to use PHP, 
    XML and XSL to separate out the variable content from the static design.</p>
    <p>So, what I ended up with was a series of XML pages that stored the 
    HTML and raw text. Something like this:</p>
]]>

The Design

This page just had to be simple. There could be not distractions from the (hopefully) useful content. Simple and Sombre were the keywords.

The fixed background is achieved through:

body {
    background:url(../images/AboutPage_BG.jpg) fixed no-repeat #000;
}

The most interesting feature with respect to the design was the External Links section. I decided to create its content entirely dynamically on the Client. But first I had to identify the external links that I was adding to the page. This was made easy by a jQuery Blog on Blogspot.

$.expr[':'].external = function(obj){
    return !obj.href.match(/^mailto\:/) && (obj.hostname != location.hostname);

All that was left, was to append the links found to the External Links section:

$(document).ready(function() {
    var extlinks = $("a:external");
    $.each(extlinks, function(i, link){
        $("#externalLinks").append($(link).clone().attr("target","_blank")).append("<br />");
    });
});

External Links


About Page