A Case Study in Dynamic Web Design

PHP, XSLT, XML, and CSS. To anyone preparing to design a web site, these terms probably sound quite intimidating. HTML is simple, so why would anyone ever want to dispense with a simple solution in favor of learning four semi-complex technologies? This question has far more answers than you can imagine, but the bottom line is that HTML is designed to tell a browser how to render text from a server. It's a medium for hypertext. Despite it's usefulness for marking up hypertext, it is not well suited for providing the web designer with a tool that allows data reuse, modularity, and server-side scripting. I will take you through a case study that will look at a simple HTML web site and show both how and why one should consider switching to the other technologies listed earlier.

The Issue: Developing a Site

Let us consider a very simple personal home page as the subject of our case study. We'll assume that the page has the usual ingredients of a home page: a title, a side menu, a main body containing the primary content of the page, and finally some sort of footer. Let us first construct this page in HTML. I am going to assume that anyone reading this is already familiar with HTML. If you're not, a good place to start is with the HTML standard that is provided by the World Wide Web Consortium.1 As with all web programming, if it's not in a universal standard, stay away from it!

This page will contain only the absolute bare minimum code necessary to construct a working site. (Note: All screen shots on this page are from the web browser Safari.2)

So here's the first HTML code we'll look at:

<HTML>
  <HEAD>
    <TITLE>This is the title that will display at the top of the browser.</TITLE>
  </HEAD>
  <BODY>
    <!--I'LL USE A TABLE TO ENCAPSULATE THE ENTIRE PAGE -->
    <TABLE>

      <!--THIS ROW CONTAINS THE TITLE -->
      <TR>
        <TD COLSPAN="2">
          <H1>This is the title of my web page.</H1>
        </TD>
      </TR>

      <!--THIS ROW CONTAINS THE SIDE MENU AND THE PRIMARY PAGE CONTENT -->
      <TR>
        <TD>
          <A HREF="simplehomepage.html">Link 1</A><BR/>
          <A HREF="simplehomepage.html">Link 2</A><BR/>
          <A HREF="simplehomepage.html">Link 3</A><BR/>
        </TD>
        <TD>
          <H2>This is the title of the section that will hold the content of the page.</H2>
          <P>This is a paragraph in the main section of my page.  
                 This is where I would post the "beef" of the page.</P>
        </TD>
      </TR>

      <!--THIS ROW CONTAINS THE FOOTER -->
      <TR>
        <TD COLSPAN="2">This is the page footer.</TD>
      </TR>
    </TABLE>
  </BODY>
</HTML>

The HTML code listed above is simple enough, but so is the output (see Figure 1). The page has structure, but no style. Style is absolutely essential to good web design. Proper use of style allows the user to easily peruse the site in an intuitive manner. As you can see in figure 1, this HTML code is definitely lacking in style. To make it look a bit nicer using nothing but HTML, we're going to have to add a lot more to the code. HTML is great for giving quick structure to text, but it severely lacks in the ability to make content stylish and dynamic.

Figure 1. Rendered HTML from our simple web site design.

Adding Style with HTML

Now, it's not impossible to add style with HTML, it's just cumbersome, unorganized, and does not lend itself to the standardization of like-elements at all. But with all of that said, let's add some style using methods that predate CSS and style attributes. To do this, we add what are called "attributes" to the HTML tags. These attributes tell the browser how the elements should be treated when rendered on the client-side.

Take a look at the same code with the added style attributes:

<HTML>
  <HEAD>
    <TITLE>This is the title that will display at the top of the browser.</TITLE>
  </HEAD>
  <BODY TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT=0 MARGINWIDTH=0
              LINK="#FFFFFF" VLINK="#FFFFFF" ALINK="#FFFFFF">
    <!--I'LL USE A TABLE TO ENCAPSULATE THE ENTIRE PAGE -->
    <TABLE BORDER="1" CELLPADDING="5" CELLSPACING="0" WIDTH="100%" HEIGHT="100%">

      <!--THIS ROW CONTAINS THE TITLE -->
      <TR>
        <TD COLSPAN="2" BGCOLOR="#aaaaff" HEIGHT="50">
          <H1><FONT FACE="ARIAL">This is the title of my web page.</FONT></H1>
        </TD>
      </TR>

      <!--THIS ROW CONTAINS THE SIDE MENU AND THE PRIMARY PAGE CONTENT -->
      <TR>
        <TD BGCOLOR="#aaaaaa" VALIGN="TOP" WIDTH="100">
          <FONT FACE="VERDANA" SIZE="-1">
            <A HREF="simplehomepage.html">Link 1</A><BR/>
            <A HREF="simplehomepage.html">Link 2</A><BR/>
            <A HREF="simplehomepage.html">Link 3</A><BR/>
          </FONT>
        </TD>
        <TD VALIGN="TOP">
          <H2>This is the title of the section that will hold the content of the page.</H2>
          <P>This is a paragraph in the main section of my page.  
                 This is where I would post the "beef" of the page.</P>
        </TD>
      </TR>

      <!--THIS ROW CONTAINS THE FOOTER -->
      <TR>
        <TD COLSPAN="2" BGCOLOR="#aaaaff" HEIGHT="50">This is the page footer.</TD>
      </TR>
    </TABLE>
  </BODY>
</HTML>

Now, the rendered HTML looks much better (see Figure 2), but look at the code. Where there was once an easy to follow structure, you now have a cluttered mess. Nearly every tag has a series of attributes listing colors, sizes, and positions that the element should inherit as properties. This way of creating web pages works just fine. In fact, if you create a page with a commercial page maker, it will probably generate code that looks very similar to this. But is it the best way to do it?

Figure 2. Rendered HTML from our simple web site design with added attributes for style.

Imagine that we have an entire site that is formatted like this. We'll say the site consists of 20 different HTML files and they all conform to the same color and spacing scheme. What happens if we decide we want to have a red background in the title and footer? What if we want the body's text to be italicized? With an HTML website like this, you're going to have to open every single HTML file, search for the desired attributes, and then change each of them one at a time. Then you have to save them all, upload them to your server, and verify that you didn't fat-finger anything. Quite the pain, right? But what happens if your site gets even larger? What if it has 100 pages? If this is the case, opening every file is an inefficient solution. This is where the technologies of PHP, XSLT, XML, and CSS come in handy.

We will now take the site we have created thus far and change it one step at a time from HTML, to a site using PHP, XSLT, XML, and CSS. Each step will focus on the advantages of using one specific technology. After all the steps are complete, we'll have a site that produce the same output, but is easier to maintain, modular in design, and built on reusable data.

Transition to a Dynamic Site: Step 1, Use CSS instead of Tag Attributes

The first step to making the transition to a dynamic site is to remove all the style from the actual HTML file. This is quite easy to do since we already had a style-less HTML page when we began this case study. We'll go back to that file, but this time we'll add one more line:

This tells the browser to look for a what is known as a "cascading style sheet" (CSS) when the page is loaded. We'll use the stylesheet to define how we want various elements in our HTML file to look. In order to refer to the styles defined by the style sheet, we are going to add "class" attributes to certain tags. As you look through the HTML code, note the values of the class attributes. If you look in the CSS file, you'll find them listed behind the names of the tags they are embedded in and separated by a period.

Here is the HTML with the link tag and "class" attributes referring to the the styles in the style sheet:

 <HTML>
  <HEAD>
    <link rel="stylesheet" href="simplehomepage.css"/>
    <TITLE>This is the title that will display at the top of the browser.</TITLE>
  </HEAD>
  <BODY>
    <!--I'LL USE A TABLE TO ENCAPSULATE THE ENTIRE PAGE -->
    <TABLE class="page_encapsulator">

      <!--THIS ROW CONTAINS THE TITLE -->
      <TR>
        <TD COLSPAN="2" class="title">
          <H1>This is the title of my web page.</H1>
        </TD>
      </TR>

      <!--THIS ROW CONTAINS THE SIDE MENU AND THE PRIMARY PAGE CONTENT -->
      <TR>
        <TD class="sidemenu">
          <A HREF="simplehomepage.html">Link 1</A><BR/>
          <A HREF="simplehomepage.html">Link 2</A><BR/>
          <A HREF="simplehomepage.html">Link 3</A><BR/>
        </TD>
        <TD>
          <H2>This is the title of the section that will hold the content of the page.</H2>
          <P>This is a paragraph in the main section of my page.  
                 This is where I would post the "beef" of the page.</P>
        </TD>
      </TR>

      <!--THIS ROW CONTAINS THE FOOTER -->
      <TR>
        <TD COLSPAN="2" class="footer">This is the page footer.</TD>
      </TR>
    </TABLE>
  </BODY>
</HTML>

And here is the new CSS file with our styles defined:

 body {
  margin: 0px;  
  padding: 0px; 
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  }       

p {  
  color: black;  
  font-size: 8pt;  
  }

table {   
  border: 1px solid black;  
  border-collapse: collapse;
  }

table.page_encapsulator {   
  height: 100%;
  }

td {
   border: 1px solid black; 
   padding: 3px; 
   color: black;
   background-color: transparent;
   font-size: 8pt;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   vertical-align: top;
   margin: 0px;
   }  

td.sidemenu {
  background-color: #aaaaaa;
  width: 100px;
  }

td.title {
  background-color: #aaaaff;
  height: 75px;
  }

td.footer {
  background-color: #aaaaff;
  height: 75px;
  }

A:link    { color: white; 
            text-decoration: underline;}
A:active  { color: red; 
            text-decoration: underline;}
A:visited { color: white; 
            text-decoration: underline;}                          
A:hover   { text-decoration: underline;
            color: red;}

If you look in the CSS file, you'll see that tags like BODY and TABLE have defined styles now. These styles will apply to all elements in the HTML file now that we've added the LINK tag in the header. Additionally in the CSS file, you will see things like TD.TITLE. This is a sub-class of the style defined for TD. What that means that if a TD tag in the HTML file has the attribute CLASS="title", then that TD tag will inherit everything defined in the TD style as well as everything in the TD.TITLE style. Any styles that are duplicated in TD.TITLE will override the styles defined in TD. This allows you to make a general style for all TD elements and then customize it for specific instances.

A careful look at the code will show that we only had to add 4 total tag attributes and they were all the "class" attribute. Now let's go back to our problem that we had with HTML and 100 subpages. What if we want to change the color of the title for all pages? Well now it's a trivial task. All we have to do is open the CSS file, find the TD.TITLE listing, and change the background color to whatever we like. Since the 100 HTML files all refer to this single style sheet for their styles, all pages will be instantly updated.

The ease of updating is just one of many advantages to CSS. CSS also provides you with a much better set of tools for designing the look of your site. You'll find that you can do many things with style sheets that you couldn't do with HTML. You'll even find that many HTML tag attributes have been deprecated in favor of style sheets. The bottom line is that CSS is a technology that not only makes it easy to update the style of your HTML documents, but it's becoming the preferred way of doing so. If you haven't jumped on the CSS bandwagon, now is definitely the time.

Figure 3. Rendered HTML from our simple web site design with a linked CSS file for style.

Transition to a Dynamic Site: Step 2, Convert HTML to PHP

So now that we've solved the style issue, let's move on to the next problem with HTML. Similar to the problem of updating the color of all titles and footers, what happens when you want to add an item to the menu on the side of your page. Once again you're stuck with opening and editing every single HTML file and making the necessary changes. With PHP, this problem, and many others, can easily be avoided.

The first step to making the transition to PHP is to install PHP on your computer, or use a PHP enabled server. If you decide to install it, check out the PHP website for details.3 It's really easy and the documentation will walk you through every step. Once you've got it installed, you've completed the hardest part of making the transition from HTML to PHP. This is because PHP is nothing more than a hypertext preprocessor. It simply takes HTML and gives it more functionality. This means that our HTML is still valid syntax for a PHP file. So, all we need to do at this point is take the HTML file that's linked to the CSS file and save it as whatever.php instead of whatever.html. That's it. You now have a fully functional PHP file. Granted, it doesn't do anything special at the point, but we're getting to that.

The first thing that PHP can help you out with is modularity. Think of the title, menu, body, and footer of our HTML file as each being it's own module. It would be nice if we could just save the menu somewhere and refer to it much like we do the CSS file. This would allow us to edit only one file to update all of the menus. PHP allows you to do just that. Let's look at how it works.

Whenever you want to use PHP functions, you have to encapsulate them in the PHP tags: "<?php" and "?>". An example of a PHP function call would be:

<?php

include("title.php");

This function would take the contents of the file title.php and include them in the current file to be processed. This is the exact functionality we've been looking for. All we have to do now is move each of our modules into a separate file and then include them all in one PHP file. The result will be a page that looks as though all the modules were in one file. If we design every page with these modules, then we allow ourself to update a module for all pages by editing only one file.

This is the PHP module for the title (the other modules are done in the same fashion, but not listed):

      <!--THIS ROW CONTAINS THE TITLE -->
      <TR>
        <TD COLSPAN="2" class="title">
          <H1>This is the title of my web page.</H1>
        </TD>
      </TR>

This is the PHP file that calls all of the modules and replaces our HTML file:

 <HTML>
  <HEAD>
    <link rel="stylesheet" href="simplehomepage.css"/>
    <TITLE>This is the title that will display at the top of the browser.</TITLE>
  </HEAD>
  <BODY>
    <!--I'LL USE A TABLE TO ENCAPSULATE THE ENTIRE PAGE -->
    <TABLE class="page_encapsulatore">
    <?php
     include("title.php");
     ?>
      <!--THIS ROW CONTAINS THE SIDE MENU AND THE PRIMARY PAGE CONTENT -->
      <TR>
        <?php
         include("sidemenu.php");
         ?>
        <?php
         include("body.php");
         ?>
      </TR>
    <?php
     include("footer.php");
     ?>
    </TABLE>
  </BODY>
</HTML>

The output will be exactly as it was before. In fact, if you look at the source when you load the page, you'll see the HTML code that we had before. This is because PHP executes all of the functions on the server. Once it finishes with all of the functions, it sends the client an HTML file that has been dynamically created and doesn't actually exist on the server. This means that if you update one of the modules, the person requesting your page will get an updated HTML file. It's as if you went through and updated all of your files when in reality you only updated one module and let PHP piece the HTML together for you.

At this point your site is much more dynamic than it was and definitely easier to maintain. Keep in mind that we've only looked at one of the hundreds of functions that are native to PHP. This is the point at which many web designers of sites that have static content will want to stop, but for those who plan to have a site where content is constantly changing, then there are still more steps to consider.

Transition to a Dynamic Site: Step 3, Storing Data in XML

We now know how to easily maintain our style and structure, but what about the actual content? What if you have a site that allows users to post comments and reply to previously posted comments? How do you design a page that must change it's layout with every post? What if you want to show the information posted in a variety of ways such as a web-view and a print-friendly view? How do you design a site that allows you to dynamically generate pages based on data?

The first step is storing your data in an organized format. An easy and powerful solution is XML.4 XML is nothing more than a series of tags with names that you create. By ordering the tags in a hierarchical fashion, you can quickly create a pseudo-database for your data. For example, let's assume the body of our page is going to contain comments that users submit through a form of some fashion. When the user submits the comments, we should store their data in an XML document and decide later what to do with it.

Before we write any XML, we need to decide what exactly we want to store. In this case we'll store a collection of comments made on the site. Each comment will have a body of text, the name of the person who made the comment, and the date that the comment was made. With this information, we can quickly build our XML format.

Here's our XML with two comments. Note the first line is required for a valid XML document:

 <?xml version="1.0" encoding="UTF-8"?>
<MAINPAGECOMMENTS>
  <COMMENT>
    <BODY>XML makes it very easy to store data in an organized fashion.  
        We can create any number of structured tags and use them to organize our data.</BODY>
    <NAME>Mark</NAME>
    <DATE>30 August 2004</DATE>
  </COMMENT>
  <COMMENT>
    <BODY>This is the another comment.</BODY>
    <NAME>Mark</NAME>
    <DATE>29 August 2004</DATE>
  </COMMENT>
</MAINPAGECOMMENTS>

You've probably already noticed the simplicity of XML. You can make up whatever tags you like as long as your tags are well-formed. Keep in mind that there is a lot more you can do with XML, but that is beyond the scope of this case study.

Now that we've got a way to store our data, we need a way to get it displayed on our web site. There's actually a very easy way to do this and that will be the last topic we look at.

Transition to a Dynamic Site: Step 4, Translating XML into HTML using XSLT

So how do we get this XML document that we've created to render properly in a browser? And on the same token, how can we ensure that the way it's rendered is easily modifiable? XSLT5 has just the answer we're looking for.

Think of XSLT as a translator (mostly because that's what it is). It speaks both XML and HTML. So, with a bit of instruction, we'll tell it exactly how to translate our XML into something we can use. Let's a assume that we want our XML comments to be listed so that one line says "Posted by So-and-so on Day Month Year." The next line below it will contain the comment and a vertical line will separate different comments. This is simple to do in XSLT.

XSLT is a series of templates that you can set up to match the tags you created in your XML document. You simply tell XSLT what to do when it gets to the root tag, your COMMENT tags, and so on, with your templates. A template might take a DATE tag and put it in a table cell, make it bold and italicized, and color it red. What the template does depends on how you code it. Look at the code below and it should be fairly obvious how it works. There are two templates, one that matches the root tag "MAINPAGECOMMENTS," and then one that matches every "COMMENT" tag.

Our XSLT file:

 <!-- Mandatory Header -->
<xsl:stylesheet
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 version="1.0">

<!-- This matches the root tag in you XML, which is MAINPAGECOMMENTS for us -->
<xsl:template match="/">
   <xsl:apply-templates/>
</xsl:template> 

<!-- This has instructions for what to do with each COMMENT -->
<xsl:template match="COMMENT">
   Posted by <xsl:apply-templates select="NAME"/> on <xsl:apply-templates select="DATE"/><br/>
   <xsl:apply-templates select="BODY"/>
   <hr/>
</xsl:template> 
</xsl:stylesheet>

You can easily see how each comment will be listed with the text "Posted by," then the NAME value, then "on," then the date value, and finally the BODY followed by a horizontal line.

So now only one step remains. We have to tell our PHP file to translate our XML file using our XSLT file, then get the output of the translation and display it on the page. This require only 3 lines of php. The first two lines do the translation:

<?php

$xh = xslt_create();

$Comments = xslt_process($xh, 'simplehomepage.xml', 'simplehomepage.xslt');

The third line does nothing more than print the output of the translation into the HTML output that gets sent to the browswer:

<?php

print $Comments;

So, adding these three lines to our PHP file would give us...

 <HTML>
  <HEAD>
    <link rel="stylesheet" href="simplehomepage.css"/>
    <TITLE>This is the title that will display at the top of the browser.</TITLE>
  </HEAD>
  <BODY>

    <?php
      $xh = xslt_create();
      $Comments = xslt_process($xh, 'simplehomepage.xml', 'simplehomepage.xslt');
    ?>

    <!--I'LL USE A TABLE TO ENCAPSULATE THE ENTIRE PAGE -->
    <TABLE class="page_encapsulatore">
    <?php
     include("title.php");
     ?>
      <!--THIS ROW CONTAINS THE SIDE MENU AND THE PRIMARY PAGE CONTENT -->
      <TR>
        <?php
         include("sidemenu.php");
         ?>
        <TD>
          <?php
           print $Comments;
           ?>
        </TD>
      </TR>
    <?php
     include("title.php");
     ?>
    </TABLE>
  </BODY>
</HTML>

The result is what you see in Figure 4. Now every time someone adds a comment, all we have to do is insert the data into our XML file (note that PHP allows you to easily write such a script to take user input and write it to a file on the server). The XSLT file will always ensure that the contents of the XML file is formated in the way you specified, no matter how many comments get posted.

Figure 4. Rendered HTML from our simple web site design using PHP that calls an XSLT stylesheet to translate an XML document.

Conclusion

So that's it. We now have a simple, yet dynamic site that builds itself on-the-fly each time it's requested by a client. You could take what we just did and apply it to every aspect of your page to include the title, menu, and footer. This would make it so that once you found a structure and style that you like for you page, you would never have to edit anything but your data that is stored in XML files. And the nice thing about XML, is that it's totally reusable. If you wanted to list only the comments by "Mark," you could easily do so by making a PHP script or another XSLT file that filters out anything not by "Mark." There would never be a need to rewrite the data over and over like you would have to do if you were coding in HTML.

This has been a quick overview of how all of this works. If you're interested in the specifics of each technology, and web sites aren't doing it for you, I encourage you to check out the wide variety of books that cover the topics of CSS, PHP,6,7,8 XSLT9, and XML10,11. I find printed text to be much more useful than on-line versions. It's just a matter of preference though.

Hopefully this has helped you to see why HTML is useful for sending data to a brower, but not the best tool with which a web designer should build his or her site. Keep your site modular and your data reusable. The overhead that is required up front to get all of the PHP, CSS, XSLT, and XML together is far less than the time that will be spent updating HTML should you choose to ignore the available technologies.

Good luck creating your dynamic site!

Notes

World Wide Web Consortium, on-line at http://www.w3c.org/. ↑
Apple Computers, Safari Web Browser, on-line at http://www.apple.com/safari/. ↑
The PHP Group, PHP: Getting Started - Manual, on-line at http://www.php.net/manual/en/getting-started.php ↑
World Wide Web Consortium, Extensible Markup Language (XML), on-line at http://www.w3c.org/XML/. ↑
ZVON, XSLT Reference, on-line at http://www.zvon.org/xxl/XSLTreference/Output/index.html ↑
Luis Argerich and others, Professional PHP4 (Wrox Press Ltd.), 2002. ↑
Larry Ulman, PHP For the World Wide Web (Peachpit Press), 2004. ↑
Larry Ulman, PHP Advanced For the World Wide Web (Peachpit Press), 2004. ↑
Michael Kay, XSLT Programmer's Reference, 2d ed. (Wrox Press Ltd.), 2001. ↑
Eric T. Ray, Learning XML (O'Reilly and Associates, Inc.), 2001. ↑
Michael J. Young, XML Step by Step, 2d ed. (Microsoft Press), 2002. ↑