Dynamic Template Methods

Ever since I started working on websites during the summer of 2006 I made sure to keep dynamic and static information separate on my projects. Certain things in the website's content should remain the same, or similar, on separate pages: header, footer, navigation, etc. (I'll refer to these similar pieces as 'static' and the content that is unique to each page as 'dynamic'). However, when you work on a website with multiple pages, it becomes difficult to update the static information the same on all pages. This is where a templating system comes in handy.

A templating system allows the developer to separate the content to ease updating. When I first started with websites, I used Dreamweaver templates for this, which is a classic example of a templating system. You create a document in Dreamweaver with the header, footer, and any other information you want to remain the same across all the pages on your site and save it as a template. You can create new pages based on the template and Dreamweaver will 'lock' the template structure and only allow you to edit the dynamic, or unique, area of the page. If you want to change the static information, you can open the template separately, edit it, and save it. All of the pages created with the template will automatically update with your changes, and you'll have a brand new website with your changes.

This system works great for small websites with few editors, but Dreamweaver templates have downfalls. Updating the entire site with a template change takes a lot of time, especially with sites involving several hundred different pages. In order to utilize the template power, you have to use Dreamweaver with the site 'installed' in the program. If you were to open up one of the files in Notepad or a different IDE and edit it, you might break the entire template system. Also, you have identical bits of information scattered throughout your site - all of the pages have the exact same static content, wasting disk space and bandwidth.

The next technique I used after Dreamweaver templates is the PHP include process. After you create a bit of static information for the site, you then do a simple PHP include() to call it in each of your pages. While it solves many of the problems found in the Dreamweaver template, it may still be difficult to find all of the files needed to make a sitewide change. Also, you still have identical code in each page, the include statement, that can be cleaned up with a better process.

After creating a few sites with the PHP include technique, I started using mod_rewrite to trick the site into using a single file to create the site. You can use mod_rewrite or other similar tricks to turn a URL into a set of variables, then do simple conditionals in your server side code in the index.php to create unique web pages for each request. This saves a huge amount of disk space - a single file can create a website of any magnitude. The static information is just outputted in the script in a single location, and then the server side code finds and outputs the dynamic information. Everything is centrally located, easy to change and view, and you save a huge amount of disk space.

The mod_rewrite and single-file system does have a few downfalls, but I've found its one of my favorite methods for small scale websites. However, when the site or the code starts getting more complicated, the size of the file may get unwieldy (I've worked with 5000+ line files before). You could use a standardized system to handle large sites, usually in a MVC fashion, but all of these boil down to the same thing - combining a simple file for the static information with a more complex system for the dynamic information to give the browser a single file.

A recent project of mine has introduced me to a new unique idea for templating. If the static information stays the same from one page to the next, why not keep it on the server side? There are a few ways to do this with caching and XSL, but this particular project involved using Javascript to initiate an AJAX call for the dynamic information and jQuery to parse and incorporate it on the client side. This does save on bandwidth, and with the proper coding, can give the client the usual browsing perks: bookmarks and history. This does pose problems with search engines and non-Javascript browsers, but could work for small scale sites. Whether this method of templating will work for other projects is hard to say right now, but I know there are plenty of alternative templating methods to use in future projects.