Apache Today [Your Apache News Source]
Your Daily Source for Apache News and Information  
Breaking News Preferences Contribute Triggers Link Us Search About
To internet.com

Voice Recognition Response Systems

Apache HTTPD Links
Apache Module Registry
Apache Project
The Jakarta Project
Apache XML Project
The Apache FAQ
The Java Apache Project
The Apache Software Foundation
Apache-Perl Integration Project
PHP Server Side Scripting
ApacheCon
Apache-Related Projects

  internet.com

Internet News
Internet Investing
Internet Technology
Windows Internet Tech.
Linux/Open Source
Web Developer
ECommerce/Marketing
ISP Resources
ASP Resources
Wireless Internet
Downloads
Internet Resources
Internet Lists
International
EarthWeb
Career Resources

Search internet.com
Advertising Info
Corporate Info
E-Commerce Solutions: Template-Driven Pages
Jun 28, 2000, 13 :40 UTC (14 Talkback[s]) (4124 reads) (Other stories by Martin C. Brown)

By

The basis of all web sites is HTML, and that HTML is used to implement your design. There are other elements of course, graphics, and presumably the dynamic content of your site, but the backbone of your site will be it's design and layout. Now, I'm no expert on design--I can do a technical drawing, but ask me to come up with a logo and then draw it, and I'm suddenly lost. We'll therefore ignore the design issue, and instead concentrate on the implementation!

Producing any kind of Web site, and e-commerce ones in particular, you are likely to be following a very simple layout using consistent elements like toolbars or navigation bars to help guide your users around your site. There are different ways of getting round the problems of these constant elements, frequently frames are used for this purpose, and the new CSS (Cascading Style Sheets) can be used to similar effect. I've even seen some complex sites that use JavaScript to build sections of the page dynamically.

However, for an E-Commerce site there are extra complications, most of time you'll be building sections of the page dynamically based on searches, user selections and preferences.

Before we get on to the complexities of dynamically driven sites, lets go back a step and look at a template-driven site that uses Server Side Includes (SSI) to build up the pages. Understanding the basics of SSI will help us to understand how to use and employ templates in just but about solution. We'll use my writing website, www.mcwords.com, which was actually designed with SSI specifically in mind as our example.

The home page looks like this:

The home page

Whilst the actual to build that page is short and sweet:

<HTML>
<HEAD>
<TITLE>MCwords</TITLE>
<!--#include virtual="/ssi/topbar.html" -->
<table border=0 cellspacing=0 cellpadding=0 width=100%>
<tr>
<td width="66%" valign=top>
<table border=0 cellspacing=0 cellpadding=2 width=100%>
<!--#include virtual="/ssi/mainnewspanel.shtml" -->
<!--#include virtual="/archive/summary.html" -->
</table>
</td>
<td width="34%" valign=top>
<table width="100%" border=0 cellspacing=0 cellpadding=2>
<!--#include virtual="/ssi/updatepanel.html" -->
<!--#include virtual="/ssi/downloadpanel.html" -->
<!--#include virtual="/ssi/dreamhostad.html" -->
</table>
</td>
</tr>
</table>
<!--#include virtual="/ssi/tagline.html" -->

Aside from some minor formatting, the bulk of the code is actually taken up by SSI include directives which import the main logo and top navigation panel, the body section, a side section and the trailing information. In essence what we've got here is a page made up of five distinct sections, the surrounding template gives us our base-the page title and main table, whilst the imported sections handle everything else.

Configuring Apache

For this to work correctly, you need to have Apache configured first to handle SSI, and then to use the index.shtml file as a default. This is fairly straightforward. To enable SSI, enable the Includes directive on a directory:

<Directory /usr/local/http/webs/mcwords>
        Options +Includes
</Directory>

Then tell Apache which files to parse for SSI commands. The general consensus is to use files with an extension of .shtml, which you configure like this:

AddType text/html .shtml
AddHandler server-parsed .shtml

Finally, you need to update the DirectoryIndex option:

DirectoryIndex index.shtml index.html

Element Design

Our sample page is actually duplicated across the entire site, I use the sample basic template and just change the include directive to include the information I want. Aside from the obvious benefits of the things like a consistent top bar, I can also use the same body elements and sidebar elements in other pages. For example the main heading page news items can be used as introductory panels for the individual sections and so on.

For E-Commerce sites you can employ the same basic tactics for search fields, control panels and even product information, although it's more likely that will be driven from a scripting language than static HTML. We'll actually look at techniques for introducing dynamic elements through our templates in moment.

The trick to handling all of this effectively is to create each included element and as a standalone component. That way the element is both standalone--in that it could be displayed essentially on its own without any further window dressing--and able to be integrated without needing any other files or window dressing to make it work.

For example, take the panel on the right; this is a single table cell, which itself has an embedded table. The "Recent Site Updates" will be a new row of that table, so the code looks like this:

<tr>
<td width=5>&nbsp;</td>
<td bgcolor="#ff0000" align=center><font face="Arial,Helvetica" color="#ffffff"><b>Recent Site Updates</b></font></td>
</tr>
<tr>
<td width=5>&nbsp;</td>
<td>
Learn more about your iMac with <a href="/projects/books/imac/index.shtml">iMac FYI</a><br>
Perl AA <a href="/downloads/paa/index.shtml">Scripts Updated</a><Br>
Get the info on <a href="/projects/books/pyaa/index.shtml">Python Annotated Archives</a><Br>
Check out <a href="/projects/books/ptcr/index.shtml">Perl: The Complete Reference</a><Br>
Download <a href="/downloads/paa/PAA04Sample.pdf">Perl AA Ch 4</a> Free! (PDF, 540k)<Br>
</td>
</tr>

That's everything--the new table row, the header for the section, and the body, as well as the trailing HTML code to close those elements off. This keeps the clutter and management of the elements out of the main files and instead inside the individual components.

Producing Your Design

The easiest way to design your site when producing a system like this is to actually create a static page--or series of pages if you are using frames--and then try to logically split that up.

Once you have the individual elements, then optimize them to keep the sizes down to a minimum (this helps your server and your prospective clients). Finally, use the final version to produce templates that can then be duplicated and used for all the different includes that you need to make your site.

How you design and layout your site is entirely up to you, and really an HTML, not Apache, issue, so I'll leave that as an exercise for the reader.

Directory Organization

Just before we look at some of the funkier things you can do with SSI and template driven pages, it's worth just covering the basics of your directory layout. On my site, I have a single directory at the top level called ssi, this contains all of the core components like the top bar, bottom tag line and the main panels on the right hand side. The main body of the content is then taken from the corresponding directories.

Although this kind of layout is not particularly unique or clever, it does make the whole process a lot easier. It also ensures that I can easily identify the elements that I want to include. This will become particularly important as we start to embed different elements through our script engines.

Quasi-Dynamic Content

Up to now, we've strictly been dealing with static pages. Although it's possible that some of your content will be static based, it's highly unlikely that your entire site will be able to make direct use of SHTML pages. We'll be looking at how to build entirely script-driven sites that employ templates in the next article. Until then, we can actually introduce some further dynamic content without resorting to a full script.

Using the exec SSI directive we can execute a CGI script instead of embedding a static HTML file. Most sites actually use this feature to include a site counter, but it can be used in any situation where you want some dynamic content. On my site I've used this as a way of introducing some random elements into the various side panels that would otherwise have to be manually selected on each page.

The script is pretty simple; it only has to select a file from a predefined list and then open and send it back. Because the script is still parsed by the server though it does need to output an appropriate header. You can see the script below:

#!/usr/local/bin/perl
print "Content-type: text/html\n\n";

@opts = qw/paa imac beos/;

$chosen = $opts[rand(@opts)];

open(FILE,'/usr/local/http/webs/mcwords/ssi/'
          . $chosen . 'buypanel.html');
while(<FILE>)
{
    print;
}
close(FILE);

This is not a suitable solution however for anything more complex than embedding a flat script, we can't supply arguments, and the request isn't made in the same way as calling a CGI from the client. Still, we're beginning to get the basis of a dynamic template-driven environment.

The Next Step

The basics applied in this article will work with any template-driven system. In every system, from SSI to a Perl, Python or other script driven solution the aim of templates is to centralize the HTML. That makes developing and updating the site easier--you only have to change one file--and it also provides consistency across the entire site.

In the next article we'll move on and see how we can use different scripting engines and the same basic template principles. We'll also look at parsed templates, as opposed to the static templates we've seen in this article.

Martin C. Brown is a full-time writer and consultant specializing in multiplatform integration and internet technologies. He is author of both the Perl and Python Annotated Archives and Perl The Complete Reference.

  Current Newswire:
Apache Module Registration: mod_xmlrpc

ApacheCon 2001 Europe cancelled

Apache Week issue 254 (13th July 2001) released

Great Bridge PostgreSQL 7.1 package announced

ApacheCon Dublin sessions listed

Apache Week issue 253 is out

ServerWatch: June 2001 Security Space Survey Results

zez.org: Security flaws in PHP

SECURITY: Bugtraq: Java servlet cross-site scripting vulnerability

mnoGoSearch 3.1.17 released

 Talkback(s) Name  Date
Nice article Martin... It is certainly a neccesity in larger, content driven, we ...   Another time saving use of inclusion....   
  Jun 28, 2000, 21:08:33
Good tip! - we&#39;ll be looking at script based templating in the next article, ...   Re: Another time saving use of inclusion....   
  Jun 29, 2000, 08:48:00
My computer at home is only 800x600, due to a monitor that can&#39;t handle any ...   Bad page layout   
  Sep 25, 2000, 14:16:50
One use I had in a previous job was to develop flat templates which were then pa ...   dynamic SSI   
  Jun 30, 2000, 14:43:27
Dynamic SSO and using Perl to interpret SSI directives is one of the things we&# ...   Re: dynamic SSI   
  Jul 1, 2000, 06:32:10
Unfortunatly, the SSI code you mentioned was left out in the post. Without using ...   Re: dynamic SSI   
  Jul 2, 2000, 08:16:07
Works here - I did use &gt;/&lt; for all the embedded HTML code. What browser ar ...   Re: Re: dynamic SSI   
  Jul 9, 2000, 06:28:39
This article is very hard to read because it&#39;s too wide to fit on my compute ...   Too wide on the screen!   
  Jul 3, 2000, 20:02:39
We&#39;ve been using SSI includes on our static pages for a couple of years now, ...   the exec directive   
  Jul 5, 2000, 22:31:31
There is an implied overhead for running an exec, since it requires the server t ...   Re: the exec directive   
  Jul 9, 2000, 06:35:32
Hi,A very good and informative page. I would like to see a bit more on how to wr ...   Informative Page   
  Jul 6, 2000, 15:20:44
 I would like to see a bit more on how to write CGI Scripts that can help on do ...   Re: Informative Page   
  Jul 7, 2000, 10:23:43
That&#39;s really the point of the whole series, albeit with an E-Commerce focus ...   Re: Informative Page   
  Jul 9, 2000, 06:36:37
I don&#39;t really have a preference - I just use the language that seems approp ...   Re: Re: Informative Page   
  Jul 9, 2000, 06:39:23
Enter your comments below.
Your Name: Your Email Address:


Subject: CC: [will also send this talkback to an E-Mail address]
Comments:

See our talkback-policy for or guidelines on talkback content.

About Triggers Newsletters Media Kit Security Triggers Login


All times are recorded in UTC.
Linux is a trademark of Linus Torvalds.
Powered by Linux 2.2.12, Apache 1.3.9. and PHP 3.14
Copyright INT Media Group, Incorporated All Rights Reserved.
Legal Notices,  Licensing, Reprints, & Permissions,  Privacy Policy.
http://www.internet.com/