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
<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...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 "Cant 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 dont 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.

Close    To Top
  • Prev Article-Personal Tech:
  • Next Article-Personal Tech:
  • Now: Tutorial for Web and Software Design > Personal Tech > Software > Personal Tech Content
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Geek Tutorial
     

    Blogging Tutorial

      RSS Tutorial
      Podcasting Tutorial
    Graphic Design Tutorial
      Coreldraw Tutorial
      Illustrator Tutorial
      3D Tutorials
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial/ Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial/ Articles
     

    XML Style

      AJAX Tutorial
      XML Mobile
    Flash Tutorial/ Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial/ Articles
      Linux Tutorial
      Symbian Tutorial
      MacOS Tutorial
    Personal Tech
      Hardware Tutorial
      Software Tutorial
      Online Auction