Designing Your Own Web Template Toolkit in 2 Minutes

The purpose of this article is to demonstrate web templates and to quickly write one to experience how template toolkits work at the most basic level. The goal is to help beginners understand the basic principles.

What is a Web Template?

The most common purpose of standard template toolkits is to separate presentation from logic. Presentation is usually referred to by markup languages like HTML, XHTML. Logic is the part handled by programming languages like PHP, Perl, Python, Ruby, etc.

Standard Web Template Toolkits

There are many open source web template toolkits available. For example,


Perl: Template.pm module

PHP: Smarty

Python: Cheetah

Ruby: Web::Template module

The feature sets of these standard template toolkits can be fairly large. There are many built-in functions that can completely separate presentation from logic.

Let's Write Our Own Web Template Toolkit

We will create two files:


index.pl: will contain Perl codes

template.inc: will contain HTML codes

Let's start easy and write the template.inc file:

--------------------

# file: template.inc

< h1 >Our Company< /h1 >

{{content}}

Copyright Foo Bar

--------------------

Note that we have defined a template variable above enclosed in {{}} as {{content}}. We will parse this template variable in our Perl code in index.pl.

--------------------

#!/usr/bin/perl

# file: index.pl

use CGI qw/:standard/;

print header;

my $content = "Welcome to our website. This is the main content

area...blah blah, yada yada yada";

open(FH, 'template.inc') || die "Can't open file; $!n";

while(my $line=) {

$line =~ s/{{content}}/$content/;

print $line;

}

close FH;

--------------------

Let's analyze the code further:

#!/usr/bin/perl

use CGI qw/:standard/;

print header;

The above block initializes the perl script, uses the CGI module and sends some basic headers to the browser.

my $content = "Welcome to our website. This is the main content

area...blah blah, yada yada yada";

This declares what the content of the site will be.

open(FH, 'template.inc') || die "Can't open file; $!n";

while(my $line=) {

$line =~ s/{{content}}/$content/;

print $line;

}

close FH;

This is our template engine - 6 lines of code! It opens the template file, reads each line one by one. As soon as it finds the predefined template variable {{content}} it substitutes it with the $content variable and prints the output to the browser. If no match is found the line is simply printed to the browser as is. Finally out of the loop, it closes the file handle.

A more objective use of the code above would be:


make it a function and place in separate file so other *.pl files can call it

instead of hard linking {{content}}, pass it as a functional argument so that the user can declare and use template variables at will


Why use Web Templates?

Separating presentation from logic in web templates provide 2 important functions.

1. Efficiency for Designers and Programmers

Designers are usually interested with presentation aspects of a website while programmers are concerned with logic. As template toolkits can help separate this process designers don't usually need to touch programming code and vice versa for programmers.

2. Reusing Common Page Elements

A common use of templates is simply to reuse the most common elements of a web page like the header (your company logo and slogan), menus (main navigation bar) and footer (copyright message).

Conclusion

Sometimes developers will use a very lightweight toolkit or a home-brewed system where the bulk of the presentation is separated from logic but not all. The code base can be much smaller if some mixing of presentation and logic is allowed.

There are advantages and disadvantages of both hybrid and full-scale template implementations. The two questions below can help you decide which approach to follow.

- Are you willing to maintain extra code to completely separate presentation from logic?

- Do you value simplicity more than complete purity and willing to live with a bit of ugly code?

Copyright [http://www.cider9.com] - All rights reserved. You are free to redistribute this article as long as you retain the above copyright notice.