(X)HTML template systems in PHP

Advertisement

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

Footnotes

  1. 1 http://smarty.php.net/
  2. 2 http://pear.php.net/
  3. 3 http://pear.php.net/package/HTML_Template_Flexy
  4. 4 http://pear.php.net/package/HTML_Template_IT
  5. 5 http://pear.php.net/package/HTML_Template_Sigma
  6. 6 http://xtemplate.sourceforge.net/
  7. 7 http://drweb.reneschmidt.de/drweb.templateengines.zip

↑ Back to topShare on Twitter

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Smarty is not a good template engine in my opinion. Template Power is easy as well as fast.

  2. 2

    >you just have do understand php

    Yes, but what in the case where you work in the team? You can hardly expect that 1 person will be the expert in PHP, XHTML, CSS, Javascript, XML, AJAX & everything else.

    Using template systems gives you the possibility for specialization and team development.

  3. 3

    I didn’t know that thank you, i will try this!

  4. 4

    Ajay kumar singh

    May 4, 2007 7:03 pm

    You can use “read a file content” in a php file and use str_replace for value substitution in a template
    Jaxy

  5. 5

    can you give some tips to make a templates please

  6. 6

    Hi,
    I didn’t know that thank you, i will try this!

  7. 7

    Hi,
    Is that wordpress using smarty engine or what?
    Thanks a lot.

  8. 8

    Does anybody know a similar way to implement templating system into Perl based web applications? I searched over the internet for Smarty for Perl but I guess that Smarty is PHP-only extension.

  9. 9

    i’ll definately have to agree with David in this case, as i believe Smarty is a good system and i think smashingmagazines should write a review about smarty also and explaining how to use it as some people still does not know.

    It does gives another field for users to specialize in and that just helps. Even though wordpress is easy to design, but i believe smarty just breaks it down if the product is open source or such. But if for one man use i would prefer php if that person is good with php because with smarty you have to change the php files and than add more to smarty so its double the work, but does help in the end.

  10. 10

    Nice site very nice
    Thanks for all post

  11. 11

    Looks nice :) I’ll try smarty for myself.

  12. 12

    oh,I have met the same problem,thanks for your point,It gave me a good suggestion.

↑ Back to top