Smashing Magazine - we smash you with the information that will make your life easier. really.

Web developers find themselves sooner or later in a dire situation: their scripts become an entangled mess of code. Program logic, presentation logic and in a worst case scenario even layout and design are so interconnected with each other that the further development becomes difficult. Would one have thought ahead and had created a clear structure for the code – the so-called HTML-template-engines, the integrity of the layers would have been preserved.

A HTML-template-engine serves to separate program logic (PHP), from layout, (HTML) and design (CSS). Most existing template-Systems are not limited to HTML-models. They are generally usable for E-Mail and even XML.

Program code can be changed independently of the web site design. All this is theory though. In practice and complex projects this division can not be realized most of the time. To prevent inflating the program code unnecessarily with representation logic, another fourth level is often added. In this layer logical connections are processed, which directly affect the representation. Example: Table line paging or dynamic lists.

A further substantial advantage of HTML templates is the reusability of program code, design and layout. A template can be used in numerous places on a web site. Changes in a template affect all pages where this template is being used. This can save a considerable amount of time and money, because instead of several pages, just the template has to be changed and proofed. Links checked: May/26 2008.

Levels

Program logic
On this level typical script tasks are settled, for example retrieval and conversion of data from the data-base. If the HTML template system is initiated, variable html templates are assigned to the appropriate substitute symbols.

Layout-level
It consists of models, for example of HTML. The model of a specific site can be composed of several templates, which are joined in program logic more directly by the template system. The layout too will partly be determined on this level; for example a table. The design level is also a factor here, since style sheets can affect the layout.

Representation logic
Both levels for layout and representation-logic are often merged, so that representation logic is not completely separate from the layout. The representation logic is often found in HTML templates. It makes sense (representation logic for example also contains HTML), because it is in most cases easy and cost effective. It is not recommendable in principle and especially in complex projects though, because it diffuses the clear separation of levels. The representation logic should have therefore been paged out in separate template files.

Web developers have to make absolutely certain that they don’t write program logic into the level for representation logic. To do this is tempting, because it appears at first to be simpler then to conceptualize the clean separation of both levels. In the long run it pays off with low maintenance to put in the effort.

Design
The design is not directly interconnected with the logic or the template system. It – and partly the layout are essentially detached from all other logic layers and directed through a cascading style sheet.

Beyond that some Template systems offer extensions for form processing, because this area overlaps largely with the representation of Web contents. WYSIWYG programs such as Dreamweaver can be made compatible with template systems by simple extensions. (Author: Rene Schmidt)

Example
The following three files produce a HTML site, in which 20 words with randomly selected letters are shown. Even though this doesn’t make much sense, it demonstrates the function mode of a Template system quite good.

Program-logic (file: index.php):

The music plays within the script.

This simple example is an illustration

For the sake of simplicity, representation logic and layout are united here

• Smarty Template Engine (PHP)
• Smarty Template Engine (PHP)
• Flexy Template Engine (PHP)
• IT Template Engine (PHP)
• Sigma Template Engine (PHP)
• XTemplate Template Engine (Ruby)
• Zipped example files (5 KiB)