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

(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):

Drweb Engl Programmlogik in (X)HTML template systems in PHP

The music plays within the script.

Drweb Engl Css in (X)HTML template systems in PHP

This simple example is an illustration

Drweb Engl Template in (X)HTML template systems in PHP

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

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (No votes yet)
Loading ... Loading ...

Tags: , ,

Advertising
  1. 1
    David
    October 20th, 2006 3:58 pm

    Smarty is a good template-engine and easy to use as well. But do we really need a template engine in PHP, when PHP is kind of a template engine itself? I think, the only real advantage auf engines like Smarty is caching. But that’s something you can have without performance killing rewrites of native php functions…
    more: http://www.nyphp.org/content/presentations/3templates/whynot/

    there are even better solutions to separate logic and presentation. you don’t need more software, you just have do understand php. ;-)

  2. 2
    Abdullah
    November 1st, 2006 9:37 pm

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

  3. 3
    Tomislav Bilic
    December 1st, 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.

  4. 4
    pascal
    March 5th, 2007 6:39 pm

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

  5. 5
    Ajay kumar singh
    May 4th, 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

  6. 6
    Ton
    May 22nd, 2007 7:41 am

    You might want to add TBS – TinyButStrong (http://www.tinybutstrong.com/). The philosophy is different and the results is what you would expect from a template system.

  7. 7
    nanda
    June 18th, 2007 12:46 pm

    can you give some tips to make a templates please

  8. 8
    Martin
    July 20th, 2007 9:16 pm

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

  9. 9
    juragan
    August 2nd, 2007 5:52 pm

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

  10. 10
    igre
    August 13th, 2007 9:43 pm

    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.

  11. 11
    Syed Balkhi
    August 29th, 2007 2:17 pm

    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.

  12. 12
    kL
    May 22nd, 2008 3:56 pm

    PHPTAL is missing from the list. It’s an implementation of Zope’s TAL (template attribute language) for PHP5.

  13. 13
    yahooheaduni
    August 15th, 2008 3:03 am

    site look frog pets ugly stay green australia vacant

  14. 14
    Hamed Hajizadeh
    September 6th, 2008 12:22 am

    Nice site very nice
    Thanks for all post

  15. 15
    Marko
    October 1st, 2008 3:16 am

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

  16. 16
    Adams
    March 3rd, 2009 6:07 pm

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

  1. 00

    There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!



Advertisement Advertise with us!
Join in Smashing Forum
  • Re: I wanna make comics!

    I am good at PS but never really used IL so I will do that in PS with my Wacom tablet ( I wanted to do it in vectors so I could print it but for start raster will do…

  • Re: Correct way to learn PHP

    Tnx guys, @Andy I will follow you suggestion!

  • Design a magazine for youth

    hi, nice to join in this great forum. Hope can give a lot of information. But first I need some info myself.

  • Re: I wanna make comics!

    Two ways:-- use a brush (Photoshop) or a stroke (Illustrator) that has a variable thickness-- (probably this is the way most pro/semi-pro comic illustrators…

  • Re: Correct way to learn PHP

    There are a couple CI video tutorials on NetTuts as well which I've found pretty useful in the past.Here's one example: http://net.tutsplus.com/videos/screenca…

Post your job