A Simple Template Using Perl Server Pages (PSP)
- A Simple Template Using Perl Server Pages (PSP)
- The <tag> Tag and page.psp Template
- Enhancing Templates
- About This Article
A Simple Template Using Perl Server Pages (PSP)
Web page templates provide a way to separate the visual definition of a Web site from the code and data that provide site content. Templates are combined with data by a template management system, usually written as a part of the underlying Web application. The system developed in this article is reduced to the simplest case possible: one template and one application using it. The system can be extended easily to use multiple templates and many templated applications, but the principles for that case are identical to this one.
I've chosen PSP as the environment for this template system simply because it's the environment with which I'm most familiar. A similar system could be created using HTML::Mason or a dozen other environments. PSP was chosen also because it's the server environment for VeloMeter.com, a handy site to which I have access and over which I have editorial control. PSP also has the basic requirements for a simple templating system built into its abstracted language—I can create a template tag within PSP with a minimum of extraneous work. This kind of reasoning is important when choosing an environment that enables templates to be designed easily.
In addition to the template system created here—or any custom template system created for a specific site—a number of existing template systems exist that work perfectly well for the purposes of a simple site like this.
Using the <template> Tag
The core of the template system developed here is a PSP tag called <template>. This tag performs the work of joining the output of a Web application to the site template. A few additional parameters are specified to provide a more integrated page style, but the core purpose of the <template> tag simply is to wrap a Web application in a predefined template shell. Listing 1 shows an example of this kind of templated application.
Listing 1-VeloMeter Page with Template (register.psp)
01 <include file="$ENV{DOCUMENT_ROOT}/page.psp" />
02 <template title="Load Testing Forum - Register" section="forum">
03
04 <p>Registration with the VeloMeter forum isn't necessary to post or
view messages, but it does allow others to recognize messages posted by
you as yours alone. As a result, we've tried to make registration as
painless as possible.</p>
05
06 <p>We also respect your privacy. Your e-mail address won't be posted
on the site or used for any marketing purposes. The e-mail is only
required in order to provide a basic check of your identity.</p>
07
08 <form action="do_register.pperl" method="post">
09 <output>
10 <p style="color: red;font-weight: bold">$QUERY{error}</p>
11
12 <p>Your name:<br />
13 <input type="text" name="fullname" size="30" maxlength="50"
value="$QUERY{fullname}" /></p>
14
15 <p>E-mail address:<br />
16 <input type="text" name="email" size="40" maxlength="200"
value="$QUERY{email}" /></p>
17
18 <p>Username/Password:<br />
19 <input type="text" name="username" size="20" value="$QUERY{username}"
/>
20 <input type="password" name="password" size="20"
value="$QUERY{password}" />
21 </p>
22
23 <p><input type="submit" value="Register" /></p>
24
25 <p>Once you register, you will recieve an e-mail with confirmation
instructions. You will be able to post messages immediately after
confirmation.</p>
26
27 </output>
28 </form>
29
30 </template>
One thing that might be noticed about this page right away is its striking similarity to a simple HTML page. In fact, the page itself is close enough to pure HTML that it would be rendered just fine by itself in a browser.
There are a few differences in the page due to the templating environment, though. Line 01 of Listing 1 contains an <include> tag that loads the template from its assigned location. In this case, the template is stored in a file called page.psp, which is located in the document root directory of the Web server (as specified in the DOCUMENT_ROOT environment variable), but it also might be found in an absolute directory, which contains only templates. In addition, different templates can be used in different applications by changing the file referenced in the <include> tag because the syntax of the rest of the file can stay the same.
The next alteration to the templated page is the <template> tag itself. This element encompasses the entire page to be displayed. It starts on line 02 with the first tag after the <include> tag and ends on line 34 at the end of the file. The contents within the tag are considered the body of the page to be inserted into the template, as specified in the next section of this article, "The <tag> Tag and page.psp Template." The <template> tag also has two possible attributes, title and section. The title attribute simply specifies the title of this page to be displayed in the appropriate parts of the template. The section attribute isn't actually used by the template example in the next section, but it might be used in the future to alter a dynamic template based on the section specified. Extra attributes, such as section, are good to add as soon as they are conceived to avoid editing the page again after the template is given additional functionality.
Other PSP tags are used in Listing 2, but they all are part of the Web application itself, not the template system. The end result of the <template> tag is a page that merges the template included by line 01 with the contents of the <template> tag. When combined with the template defined in the next section.
The difference between the two pages is subtle, but the template provided a definite look and feel to the Web application page. The contents of the page are centered within a defined area on a white background, and a logo and navigation for the site have been added before the beginning of the page. In addition, the title provided to the <template> tag now is listed both as the HTML page title (as seen in the title bar of the browser window) and within the page as a more obvious heading.