E-Commerce Solutions: Template-Driven Pages Page 2
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> </td> <td bgcolor="#ff0000" align=center><font face="Arial,Helvetica" color="#ffffff"><b>Recent Site Updates</b></font></td> </tr> <tr> <td width=5> </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.
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.