Advance Your Programming – Part 2 – Templates

Every programmer is faced with code repetition at some point. Since the earliest programming in assembly language we have seen code repetition happens often and can be a problem. We realized that there should be a way to reduce the repetition to help the programmer.

The most basic solution was creating a procedure (also known as functions and methods), which would run the repetitive code. Every point where where one would encounter a situation where he/she would need the code they would call the procedure (with parameters if necessary) and the procedure would run the code. This had a number of advantages for the programmers.

  1. The amount of code could be greatly reduced.
  2. The procedures/functions could be modular by using parameters
  3. Changes would only need to be made in one place, greatly enhancing maintainability

In terms of web development you will encounter programming situations in PHP and javascript where you will need to use the aforementioned method of creating procedures and functions but what about HTML/XHTML?

Repetition across HTML documents is obvious. For starters, each document will have a head and a body. Quite possibly there will be a footer within the body. More then likely the header and footer for each document will be almost exactly the same. First time programmers will see this as an excellent copy-and-paste opportunity but from an experienced perspective you can see that this is just code repetition. The copy-and-paste technique will work but will almost surely cost you more work in the future.

Imagine this common situation, you have a website with 20 separate HTML documents each with the same CSS include files and the same footer <div> which displays contact information and links. Something along the lines of a header:

<head>
  <title>My Site - Homepage</title>
  <link rel="stylesheet" type="text/css" src="general.css" />
  <script type="text/javascript" src="scripts.js" />
</head>

And a footer:

<div id="footer">
  <p>&copy; 2006-2007 My Site</p>
  <p>
     <a href="index.html">Home</a> |
     <a href="contact.html">Contact</a>
  </p>
</div>

Now imagine that you have to make a change. You might want to change the name of the css or javascript file, add a javascript file to include, change the years in the footer or change one of the link locations or names. To make any of these single changes you would have to go and manually edit all 20 pages. This is the worst possible situation and it can be easily avoided. The concept is using a template, and including repetitive code, which has the same three advantages above.

Templates are not possible solely with HTML. That is unless you are using frames in which you have little to no control and horrible cross browser computability. Don’t even try frames. Template driven websites can be created very easily with server-side programming languages (PHP/ASP) or even just using a sophisticated web server like Apache using a concept called Service Side Includes (SSI). The idea is that such a fundamental concept in both programming and design should be easy to implement, and templates are considered a major concept.

There are really only two steps needed to make this happen. First put the section of html that you want included from all of your main documents into a single file. Common extensions are .inc for include, but the extension does not matter. The above case is a nice example, you could put the footer into its own file, footer.inc. Many frameworks have an entire folder devoted to included files, often named includes/ in the root directory. This is a good idea and makes it easy to use an absolute path inside any html document on the web server to the include files.

Finally you now need to include the file from you main html documents. Here is the php way to include that file:

<?php include ‘/includes/footer.inc’; ?>

And the SSI method which looks a lot like an html comment (You may need to look into turning on SSI functionality on your webserver first, here is a resource):

<!–#include virtual=”‘/includes/footer.inc'” –>

With the correct include statement above the contents of your include file will be placed at that position in the HTML document. This is all done on the server, so the final product delivered to the client’s browser (the person visiting your website) will not be any different from the original.

There are differences between the PHP and SSI includes. Without question the PHP includes are more powerful but I’ll give a brief description of each. The SSI’s only go one level deep. This means that if you include a file, you will not be able to include another file from within the included file. SSI is meant to allow for very basic templating without a full blown server side programming language like PHP.

With PHP there are endless possibilities. The included files can contain php code. In actuality, when you include a file in PHP the contents of the file are run as if they are php code. So any php tags will be properly executed. Even the variables outside of the include are directly accessible because they are considered on the same scope as the included code.

There are a few ways you could put the above header a php include. Here is a very straightforward approach. First the PHP file to be include. I will call it ‘header.php’ because that is a clear indicator to me later that the file contains php code. Notice the php tag and variable:

<head>
  <title>My Site - <?php echo $pageTitle; ?></title>
  <link rel="stylesheet" type="text/css" src="general.css" />
  <script type="text/javascript" src="scripts.js" />
</head>

The original php file that would set the variable before the include like so:

<?php
$pageTitle = 'Homepage';
include '/includes/header.php';
?>

This would work just fine. It is a very loose form of templates. The programmer is forced to keep track of the variables that are all floating around in the global scope. Another approach would be to make a collection of functions, like an API. Take this example:

<?php
/*
  Function to print out the <head> for each of my webpages.
  @param   $title   To go inside the <title>
*/
function printHead($title = 'My Site') {
?>

<head>
  <title><?php echo $title; ?></title>
  <link rel="stylesheet" type="text/css" src="general.css" />
  <script type="text/javascript" src="scripts.js" />
</head>

<?php
}
?>

Clearly a little more structured approach. You would have to include this file to make the function available, but everything from there is straightforward. Just call the function and pass the appropriate title as a parameter to the function:

<?php
include '/includes/commonFunctions.php';
printHead('My Site - Homepage');
?>

Templates are a fundamental part of good programming. Common uses are the header, footer, and menu’s for websites. Very little variation is needed across a website for these portions, so consolidating all of the code into a single file is immensely helpful. I just want to make sure that you learn about it soon and not like I did. The hard way.

Introduction to Server Side Includes – Apache’s very own HowTo. A good start.

Setup More SSI Setup Information – Some Troubleshooting and Methods to get SSI working on Apache

PHP Include Function – Documentation and Comments on the include function. Will be helpful to PHP developers.

search