E-Commerce Solutions: Template-Driven Pages

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!

When building an E-Commerce Apache site, there are a host of considerations, as most of time you'll be building sections of the page dynamically based on searches, user selections and preferences. In this article, Martin C. Brown explains how to create template-driven pages that will simplify your administrative tasks.

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:

<!--#include virtual="/ssi/topbar.html" -->
<table border=0 cellspacing=0 cellpadding=0 width=100%>

<td width="66%" valign=top>
<table border=0 cellspacing=0 cellpadding=2 width=100%>
<!--#include virtual="/ssi/mainnewspanel.shtml" -->
<!--#include virtual="/archive/summary.html" -->
<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" -->
<!--#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

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

This article was originally published on Jun 28, 2000
Page 1 of 3

Thanks for your registration, follow us on our social networks to keep up-to-date