HTML::Template for Web Designers

This article introduces people to one method available to programmers and web designers to aid them in their ongoing quest to produce dynamic web content without the need for a programmer to learn The Art of Web Design and also avoid web designers mastering The Zen of Programming.

Beauty and the Beast

Web Designers aren't always programmers. To be honest a really good web designer probably can't program for toffee. This is fair, most programmers couldn't be creative if their code-library depended on it.

There does come a time when programmers and web designers should meet somewhere in the middle. It's not sensible to have the world's most attractive web page that does nothing, and conversely it's not sensible to have the world's most functional web page, but looks like it was dragged through a hedge backwards. There is a time when functionality and beauty must meet.

Sometimes that meeting is HTML::Template. (Sometimes it isn't, but that's not the purpose of this article.)

HTML::Template

What is HTML::Template? HTML::Template is a perl module that lets programmers integrate dynamic content into pages designed by web designers. It does this by extending standard HTML with a few extra tags that resemble HTML.

Anyone familiar with HTML would probably look at a file with HTML::Template tags and wonder what on earth is going on. They may even ask who is polluting their lovely design with non-standard markup that means nothing to them. A fair question. What are all these strange tags that look like HTML but aren't?

OK, we admit it, HTML::Template tags aren't real HTML. They have been created to use a format that shouldn't scare off HTML designers. HTML::Template has intentionally been kept to a fairly basic syntax so that it doesn't scare away all the creative web designers that the hairy, scared of the light, programmers need to make web pages dynamic.

Dynamic Content?

Imagine for a moment that the web-based internet had never progressed past the static, "I tell, you listen" phase. Every web page would be a like a printed story. You wouldn't be able to look up the latest stock price, you wouldn't be able to publish the contents of your dinner plate in your web-log. People would type things into their web-pages, and you would read them.

While this approach might work for a number of sites there comes a time when you want something more dynamic. You want a web-page to say "Welcome Agent Smith" at the top of it when you visit. Do you think there's a Web Pixie waiting somewhere, waiting for you to visit a web-site, and type up a page that's suitably personalised for you, and type it up in less time than it takes for you to load the page? [Just think about the poor Web Pixies trying to type up your personalised page next time you visit a web site and complain about how long it takes to load.]

No, of course not. Web Pixies don't exist. All the technical people have had to come up with different methods to solve the lack of Web Pixies and the demand for dynamic, personalised web pages.

It's not the only solution available, but there are a group of people that use HTML::Template to solve this problem.

How does HTML::Template help me?

HTML::Template uses tags that look like standard HTML. It doesn't do this to make things confusing for web designers. HTML::Template uses this approach to make itself less daunting to web designers.

It partially works on the principle: if I don't understand it, I can just ignore it.

It also works on the principle: there isn't really that much to learn, and it's nothing to be scared of.

Both of these are sound principles, proved at least once since the Egyptians built the pyramids. Or maybe they are just two principles invented by the author of this article to try to illustrate two of the selling points of HTML::Template.

If I don't understand it, I can just ignore it

This is a good principle for designers to follow when they are new to HTML::Template. Often anything that looks like <TMPL_... ...> can be safely ignored. It was put there by someone for a reason, but it's not important to know why, as long as it's left alone. Things work, and the programmers aren't yelling at you.

There isn't really that much to learn

In it's most common usage, HTML::Template makes itself known to you by a HTML-esque tag, or a comment that contains TMPL_something. This either look like a HTML tag, or a HTML comment tag; <TMPL_VAR ...> or <!-- TMPL_VAR ... -->

The extra tags that web designers should expect to see are:

• <TMPL_VAR>
• <TMPL_IF>
• <TMPL_ELSE>
• <TMPL_UNLESS>
• <TMPL_LOOP>
• <TMPL_INCLUDE>

That's all, six extra tags. Sometimes you might see them written as comments, and sometimes as HTML tags, this depends on the programmer who inserted them into the template.

It's nothing to be scared of

Well it isn't. Exceptions are made for people who have an irrational fear of learning something new.

TMPL_VAR

Think of TMPL_VAR as a place-holder for a piece of text. The programmer wants to insert some text into your webpage, but wants you to have control where it's put and how it's styled. [assuming you've agreed that the programmer won't put any HTML formatting in the block of text].

Starting with a very simple example, imagine you have a web page that contains:

When someone points out that even though there are a large number of John Smiths out there, there are also a lot of people who aren't called John Smith. Your local friendly programmer says that he can find the visitor's name, and pass it to you in a HTML::Template parameter. You agree. The programmer decides to pass this information in a parameter named FullName. He tell you that all you need to do is place <TMPL_VAR NAME="FullName"> wherever you would like the visitor's name placed.

This means your piece of HTML will now look like this:

Easy!

The developer could pass anything he or she wanted in the parameter. It's up to you and the developer to agree what information will be passed in parameters, and up to the developer to honour that agreement. The last thing you want is a monstrous HTML-table, or 500 lines from the King James bible passed in a parameter where you were expecting to receive the name of a visitor!

TMPL_IF

TMPL_IF allows you to use different blocks of HTML in different situations. Following on from the greeting before, someone points out that you don't always know the visitor's name. Currently, when the name isn't known FullName parameter is left blank, so your HTML source is equivalent to:

and you can't even be sure you're welcoming anyone back.

For the moment you'd like to just omit the greeting if you don't know the name of the visitor. What you want is if we know the name of the visitor show .... The way this is done is with TMPL_IF:

Notice the </TMPL_IF> tag. This tells HTML::Template where the end of your "..." content is. Anything between the <TMPL_IF> and the </TMPL_IF> will only be shown if the parameter referred to is true. The only time something isn't true is when it's value is blank or 0 [zero]. All other values are true.

So, the TMPL_IF above reads "if FullName isn't blank (or zero) display ...". If we put our greeting inside there it will only be seen if the FullName isn't blank:

TMPL_ELSE

Sometimes you want to say if we know the name of the visitor show ... otherwise show ..... This is achieved with TMPL_ELSE.

Expanding our example further, if we don't know the name of a user, we'd still like to greet them. We obviously can't greet them with their name, so we'll just have to use a generic greeting of some kind.

To save wasting any imagination the greeting we would like for visitors we don't recognise is "Hi there, welcome to my site.". It won't win any awards, but should illustrate the point. So extending the TMPL_IF example to include our default greeting:

Now we welcome everyone to our site, some with a persoanlised greeting, and a default greeting for the no-namers.

TMPL_UNLESS

TMPL_UNLESS works the opposite way round to TMPL_IF. Anything between a <TMPL_UNLESS> and </TMPL_UNLESS> will only be shown if the parameter referred to is false [blank or zero]. So basically: if FullName is blank (or zero) display .... Written out it looks a lot like our earlier TMPL_IF example:

If you wanted to give a message to visitors that you didn't know the FullName of - maybe a message telling them to register now, it would look like this:

TMPL_LOOP

TMPL_LOOP is used to output a set of data. It's useful for things like lists, and tables. It's usage looks like this:

The programmer that you are working with should tell you what parameters are available to use inside the TMPL_LOOP, displayed as TMPL_VARS. All that's required is to place the appropriate TMPL_VAR tags inside the loop. For example, the page you are working on displays some information about employees, passed in parameters called Name and Role. Using TMPL_LOOP would give us something like this:

When run through the appropriate script, the above would produce something like this:

TMPL_LOOP is very useful for making tables. If you imagine that everything between <TMPL_UNLESS> and </TMPL_UNLESS> is a row in the table:

Usually, if you are inside a TMPL_LOOP block, you aren't able to use TMPL_VAR parameters that are available elsewhere in the template. So if you had a parameter Color that you used throughout the document to show items with a colour of the user's choice (strange, but plausible), you might want to try something like this:

This will cause an error, because Colour is a parameter that isn't usually available inside TMPL_LOOPs. The use of Color before the TMPL_LOOP is fine, but inside the TMPL_LOOP Colour isn't available. This will cause an error when the programmer's code tries to display the webpage from this template.

It is possible for these parameters to be made available inside the TMPL_LOOP, you just need to have a word with the programmer.

TMPL_INCLUDE

TMPL_INCLUDE is used to read in the contents of an external file. This is useful for blocks of HTML that are repeated over a number of pages in a site. It's often quite useful to include header and footer files for the start and end of the HTML page.

Imagine that all of your web pages had this format:

Although it's fairly simple, imagine the amount of work involved if you decided to change the title, or the "Site designed by me" text. You'd have to make the same change in every file.

If we create two files, header.inc:

and footer.inc:

Then all of our templates for pages in the site would now look like this:

When this template is displayed with the programmer's script, it will replace the TMPL_INCLUDE tags with the files they refer to. Now, when someone asks you to change the bgcolor of the page body, or alter the copyright at the bottom of the page, you only have to make the change in one place.

You can use this method to save you retyping many common blocks of HTML. Another use might be a navigation menu that's the same across the whole site.

Conclusion

Hopefully you now have a better understanding of the strange tags that the programmers keep putting into your web pages. It's possible you might feel more comfortable about using, or adding them yourself.

Even if you don't feel comfortable adding and manipulating these new tags yet, you should feel less daunted next time you see them in one of your HTML files.

© Chisel Wright, July 2003