Hands on: Simple templates with Perl

How to create a professional-looking, user-friendly web-based search function in Perl

We recently looked at the basics of Perl and saw how a very simple script could be used to extract information from a file on a web server URL.

We showed how saving a file in Csv format from Excel and writing a few lines of script would make it accessible from any web browser and support basic queries.

The results were displayed as text, which may not be enough if you want to create a good-looking site.

This month, we’ll look at some more functions in Perl and show you how to use pattern matching and substitution to create a script that does much the same job, but uses an HTML file as a template to create attractive results.

Making a template
The first step is to design the page for your results. Some web design tools, such as Dreamweaver, have methods of creating templates for database-driven websites, but here we just want something simple.

Using whatever method you fancy, mock up a page designed to show someone’s name, mobile and home phone numbers as in my test script (see attached pdf). You can add extra information if you wish.

We’ll use pattern matching to replace information in the template with data from our Excel Csv file. Start by picking as examples some data that should fit – for example, the longest name in the database – and create a page that looks good.

Try to ensure there’s a clearly defined area of the page where the information will appear and that your design would look good if the contact details were copied and repeated immediately below where they appear. This is so that things still look good when you have more than one result.

Ideally, you want a page that has information above and below the results, such as the company logo, links to other parts of the site and so on.

Next, you need to turn the page into a template that our Perl script can work with. Replace the dummy data with something that doesn’t appear anywhere else in the page. For example, the sequence --NAME-- probably won’t be found elsewhere, and similarly --HOME-- and

--MOBILE-- can be used for the home and mobile phone numbers. We’ll put code in the script to replace these tokens with the genuine data.

How does the script know which is the part of the page it can repeat if there are multiple entries that match our search term? We’ll add a bit of code that marks the start and end of the area where the contact details for each person appear. Do this using HTML comments, so there’s nothing visible on the page. If the editor you use doesn’t have an option to insert comments, switch to viewing the source and enter a line that says

<!-- TEMPLATE BEGIN -->

above the start of the contact area, and below it, add one that says

<!-- TEMPLATE END -->

Take care to avoid breaking any tags, or causing problems with nested tags, if the area is repeated.

The logic
We saw last time how you can read through a file in a script and look for lines that match.

We used that to select information from the Csv file.

This month, I’ll use the same technique to create a page using the template.

The script will start reading the HTML file and send each line to the web browser until it spots the TEMPLATE BEGIN comment. Then it will make a copy of everything between there and the TEMPLATE END.

When that section has been read, the database will be searched and for each item that matches, the data grabbed from between the TEMPLATE comments will be used to create HTML code with the information. Finally, the rest of the file will be sent to the browser, completing the page.

To prevent the code from becoming an unsightly mess, I’ll split it up into various sections, using subroutines. These are just sections of the Perl code that are more or less self-contained and can be called from elsewhere. You can pass parameters to them, just as with Perl’s own functions.

The main part of the code will read through the HTML file. When it’s got all the template info, it will call a subroutine that does the search, and that will itself call another one to format and output each result.

The code
Our subroutines begin with the word sub, followed by a curly bracket; another one closes them. You can put them before or after the main section of code. We also then have a line like

local ($n, $h, $m ) = @_ ;

This tells Perl that these are variables that can’t be accessed from outside the subroutine; @_ is a special array, which contains all the parameters passed to the routine. Since it’s an array, you need the brackets round the list of variables. You’ll also notice two ways of calling the subroutine; you can use either the name prefixed with & or the word do followed by the name.

Use the former if you want to use the return to pass a value back from a subroutine, for example

$noFound = &query_contacts($find) ;

The next thing to look at is the main code. You can see we’ve used a similar loop to last month’s code to read through the template file, and the same sort of pattern matching function to look for the start and end of the template section. Obviously, since we’re creating a proper web page, we use the content type of text/html this time.

When the start of the template section is found, we use .= to append the next line of HTML to the existing contents of our template string.

Going back to the subroutines, performing a substitution is simple;

it looks like the pattern matching we’ve done but this time there are

two parts, preceded by the letter s for substitution; the first part shows what we’re looking for, and the second is the substitution. The trailing letter g means ‘global’, without which Perl would replace the first occurrence of the pattern in the template string.

Finally, we’ve used this pattern matching and substitution again, in processing the Query String from the environment; we look for any text that matches ‘person=’ and replace it with nothing. Why? So we can add a nice touch at the bottom of our web page with a little snippet like this

<FORM METHOD=”GET” ACTION=”contacts2.pl”>

<P>Search again: <INPUT TYPE=”text” NAME=”person”><BR>

<INPUT TYPE=”submit”></P>

</FORM>

Now, we have a page where people can type a new name in and press Enter or click the Submit button to look for someone else.