Creating Templates for Web Pages
The purpose of this article is to explain web templates and to quickly write some code
demonstrating it in action. The article is for absolute beginners who want to understand
the basic principles of templating.
What is a Web Template?
The basic purpose of templating is to separate presentation from logic. Presentation is usually referred to
markup languages like HTML, XHTML. Logic is the part handled by programming language 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
<html>
<head></head>
<body>
<h1>Our Company</h1>
{{content}}
<small>Copyright Foo Bar</small>
</body>
</html>
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.";
open(FH, 'template.inc') || die "CanÕt open file; $!\n";
while(my $line=) {
$line =~ s/{{content}}/$content/;
print $line;
}
close FH;
Now for some explanation.
#!/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.";
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 without
substitute. Finally out of the loop, it closes the file handle.
A better design of the code shown above would be:
- To 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 users can declare and use template variables at will
Why use Web Templates?
Separating presentation from logic in web templates provide two important functions.
- Efficiency for Designers and Programmers:
Designers and programmers are usually concerned with two separate aspects of website
developement. Designers are more interested in presentation aspects of a web
page, while programmers are concerned more with the coding and establishing business
logic.
- 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 most of the presentation is separated from logic (but not all).
The code base can be much smaller and simpler to maintain if some mixing of presentation and logic is allowed.
There are advantages and disadvantages of both hybrid and full-scale template implementations.
These two questions below can help you decide which approach to follow.
- Are you willing to maintain extra code so that you can have presentation completely separated from logic?
- Do you value simplicity and don't mind presentation code and logic mixed together?
There is no right or wrong approach about this. Depending on your needs just use what works for you.
|
