![Apache Today [Your Apache News Source]](/pics/at_logo.png){kind=logo}
|
|
|
| Your Daily Source for Apache News and Information |
 
|
| Breaking News | Preferences | Contribute | Triggers | Link Us | Search | About |
|
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:
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 ApacheFor this to work correctly, you need to have Apache configured first to handle SSI, and then to use the
<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 index.shtml index.html Element DesignOur 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 DesignThe 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 OrganizationJust 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 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 ContentUp 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 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 StepThe 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. |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Talkback(s) | Name | Date | ||
|
Jun 28, 2000, 21:08:33 | |||
|
Jun 29, 2000, 08:48:00 | |||
|
Jun 30, 2000, 14:43:27 | |||
|
Jul 1, 2000, 06:32:10 | |||
|
Jul 2, 2000, 08:16:07 | |||
|
Jul 3, 2000, 20:02:39 | |||
|
Jul 5, 2000, 22:31:31 | |||
|
Jul 6, 2000, 15:20:44 | |||
|
Jul 7, 2000, 10:23:43 | |||
|
Jul 9, 2000, 06:28:39 | |||
|
Jul 9, 2000, 06:35:32 | |||
|
Jul 9, 2000, 06:36:37 | |||
|
Jul 9, 2000, 06:39:23 | |||
|
Sep 25, 2000, 14:16:50 |
