Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

(X)HTML template systems in PHP

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 Link

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.

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.

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)

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 Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.

  1. 1

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

  2. 2

    Tomislav Bilic

    December 1, 2006 11:57 pm

    >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

  5. 5

    can you give some tips to make a templates please

  6. 6

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

  7. 7

    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

    Hamed Hajizadeh

    September 6, 2008 12:22 am

    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