Looping, Security, and Templating Tools - HTML::Template (
Page 4 of 4 )
HTML formatting is slightly different from plaintext formatting--there are essentially two main schools of thought. The first, used by HTML::Template, is similar to the method we saw in Text::Template; the template is stored somewhere, and a Perl program grabs it and fills it in. The other school of thought is represented by HTML::Mason, which we'll look at next; this is inside-out--instead of running a Perl program that prints out a load of HTML, you create an HTML file that contains embedded snippets of Perl and run that.
To compare these two approaches, we're going to build the same application in HTML::Template, HTML::Mason, and Template Toolkit, an aggregator of RSS (Remote Site Summary) feeds to grab headlines from various web sites and push them onto a single page. (Similar to Amphetadesk, http://www.disobey.com/amphetadesk/, and O'Reilly's Meerkat, http://www.oreillynet.com/meerkat/.) RSS is an XML-based format for providing details of individual items on a site; it's generally used for providing a feed of stories from news sites.
Variables and Conditions
First, though, we'll take a brief look at how HTML::Template does its stuff, how to get values into it, and how to get HTML out.
As with Text::Template, templates are specified in separate files. HTML::Template's templates are ordinary HTML files, but with a few special tags. The most important of these is <TMPL_VAR>, which is replaced by the contents of a Perl variable. For instance, here's a very simple page:
<html>
<head><title>Product details for <TMPL_VAR NAME=PRODUCT></title></head>
<body>
<h1> <TMPL_VAR NAME=PRODUCT> </h1>
<div class="desc">
<TMPL_VAR NAME=DESCRIPTION>
</div>
<p class="price">Price: $<TMPL_VAR NAME=PRICE></p>
<hr />
<p>Price correct as at <TMP_VAR NAME=DATE></p>
</body>
</html>
When filled in with the appropriate details, this should output something like:
<html>
<head><title>Product details for World's Biggest Enchilada</title></head>
<body>
<h1> World's Biggest Enchilada </h1>
<div class="desc">
Recently discovered in the Mexican rain forests....
</div>
<p class="price">Price: $1504.39</p>
<hr />
<p>Price correct as at 15:18 PST, 7 Mar 2005</p>
</body>
</html>
In order to fill in those values, we write a little CGI program similar to the following one:
use strict;
use HTML::Template;
my $template = HTML::Template->new(filename => "catalogue.tmpl");
$template->param( PRODUCT => "World's Biggest Enchilada" );
$template->param( DESCRIPTION => $description );
$template->param( PRICE => 1504.39 );
$template->param( DATE => format_date(localtime) );
print "Content-Type: text/html\n\n", $template->output;
Again, as with Text::Template, our driver program is very simple--load up the template, fill in the values, produce it. However, there are a few other things we can do with our templating language, and hence there are a few other tags that allow us a little more flexibility.
For instance, suppose we happen to have a picture of the world's biggest enchilada--that would be something worth putting on our web page. However, we don't have pictures for everything in the database; we want to output a pictures section only if we actually do have an image file kicking about. So, we could add something like this to our template:
<TMPL_IF NAME=PICTURE_URL>
<div class="photo">
<img src="<TMP_VALUE NAME=PICTURE_URL>" />
</div>
</TMPL_IF>
This means that if PICTURE_URL happens to have a true value--that is, if we've given it something like a real URL--then we include the photo <DIV>. As these <TMPL_...> tags are not real HTML tags, only things processed by HTML::Template, it's not a problem to stick one in the middle of another HTML tag, as we have here with <IMG SRC="...">.
Of course, if we don't have a picture, we might want to stick another one in its place, which we can do with the <TMPL_ELSE> pseudotag:
<div class="photo">
<TMPL_IF NAME=PICTURE_URL>
<img src="<TMP_VALUE NAME=PICTURE_URL>" />
<TMPL_ELSE>
<img src="http://www.mysite.com/images/noimage.gif" />
</TMPL_IF>
</div>
Notice that although our <TMPL_IF> must be matched by a </TMPL_IF>, <TMPL_ELSE> is not matched.
But perhaps we're being unduly complex; all we need in this example is a default value for our PICTURE_URL, and we can do this directly with a DEFAULT attribute to <TMPL_VALUE>:
<div class="photo">
<img src="
<TMPL_VALUE NAME=PICTURE_URL
DEFAULT="http://www.mysite.com/
images/noimage.gif">
"/>
</div>
Validation
Some people worry, quite rightly, about the effect that this sort of indiscriminate SGML abuse has on checking templates for validity. (Although, sadly many more people don't worry about HTML validity.) Further, those who use DTD-aware validating editors might wonder how to get these pseudotags into their documents in a nice way.
HTML::Template has a way around this; instead of writing the tags as though they were ordinary HTML tags, you can also write them as though they were comments, like so:
<!-- TMPL_IF NAME=PICTURE_URL -->
<div class="photo">
<img src="<!-- TMP_VALUE NAME=PICTURE_URL -->" />
</div>
<!-- /TMPL_IF -->
Please check back next week for the continuation of this article.
