Markup Separation with Template IT

One of the more challenging things I’ve run into while doing PHP development is effectively separating presentation from program logic. In many projects, I felt I was doing a great job until I had to do a markup change and jump through a lot hurdles to make it happen. In my recent projects, I’ve starting using the HTML Template IT extension in PEAR, and its made things a lot easier.

The HTML Template IT extension provides a solid template system that allows complete separation of code and presentation. Rather than placing markup in your PHP files, the markup is contained within separate template files. Within the markup of these templates are variables that can be replaced by dynamic data when the template is parsed.

It’s easy to identify the replacement variables and the file is simple for a designer to edit. As long as the references are there, they will be replaced when the template is parsed. The main goal here is to provide a method for changing the HTML markup without affecting the site’s functionality.

Below is an example of a basic template:

<!-- BEGIN Article -->
<div>
	<h2>{ArticleTitle}</h2>
	<small>{ArticleAuthor}</small>
	<p>{ArticleBody}</p>
</div>
<!-- END Article -->

So, now that you have a template file, you will need to use the Template IT extension to parse it. If you have your own server, you will have to install it using PEAR. If you are on a hosted system, it’s likely that this and other common PEAR extensions are already installed.

Once installed, the extension is easy to use. There are 3 steps to the process: load the template, set the replacement variables and parse the template. Here’s an example of how to parse the template from the example above:

<?php
	require_once "HTML/Template/IT.php"; //Require the extension
	//Instantiate a template object and set the template directory
	$tpl = new HTML_Template_IT("templates");
	//Load the template file
	//the boolean values tell the parser to remove empty or unknown items
	$tpl->loadTemplateFile("article.tpl", true, true);
	//Provide data for the replacement variables
	$tpl->setVariable("ArticleTitle",$title);
	$tpl->setVariable("ArticleAuthor",$author);
	$tpl->setVariable("ArticleBody",$body);
	//Parse template and print
	$tpl->show();
?>

The example above is very basic, but the template system provides a lot of flexibility to do more. Using the BEGIN and END commented HTML in the template allows multiple blocks to be defined in one file. You can even have nested templates. For example, if your template contains a select list, you can make the options template blocks nested within the template. This option block could be parsed as many times as necessary, then the containing block can be parsed. This leaves you with a completed page and allows individual portions to be repeated as many times as necessary.

There is also another option for parsing the template. In addition to the show method, there is also a get method that returns the parsed template in a string rather than printing it. You can easily use this to insert one template into the replacement variable of another template. This allows you to use one template to contain navigation, headers and footers, and insert a parsed template into it as content. Designers can then make global changes to a master template file without affect individual page content.

There are several other template systems available for PHP both through PEAR and other sources. Template IT is one of the simplest systems and easy to get into, but doesn’t provide as much functionality as some of the other systems. If you like the idea of templates, but need a few more options, check out Smarty or Flexy. Whether you’re developer working with designers or doing it all your own, using templates will make maintaining your code much easier.