A CMS is great for people who don't know HTML, but what about those of us who do know HTML and CSS and all those other things?

A CMS is a great way to set up a web site for a customer. Weighing in at 15 to 20 Megabytes, they are often cheaper than forcing your customer to pay for every little update. If you have the tie to learn even a small part of their features you can serve your web site design customers well and keep their costs down.

Quite a few years ago I was working with Apache on a web site and we needed quick and dirty method of creating content for each page which used common headers, footer, menus, etc. Perhaps I was too inexperienced to know about Content Management Systems or perhaps there were just none around.

Whatever the reason, I developed my own style of page creation which allowed me to update the common elements of the web site without having to update multiple files. Later I was sucked into the world of ASP programming and Microsoft IIS.

Recently, I had the pleasure of returning Apache with two web site projects. I really did try the PHP to suck in the header and footer of each page, but I found it forced me into writing a lot of duplicate code in each page.

Just to throw yet another acronym at you, I used the technology already built in to Apache, SSI allows a programmer (or anyone else) to use a group of files to assemble a page form one or more files.

For example, here is a web page which creates a web page using four main files using Apache SSI and CSS. The four files are:

1. load_page.shtml The file below,
2. general.css The CSS file,
3. left-menu.html The file containing the left menu,
4. contact.html The file containing the footer, or in this case the contact info.
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <!-- load_page.shtml -->
  3.     <title>Foopie</title>
  4.  
  5.     <link rel="shortcut icon" href="/favicon.ico">
  6.     <meta http-equiv="Content-Type" content="text-html; charset=utf-8">
  7.     <meta http-equiv="Content-language" content="en-US">
  8.     <meta http-equiv="pragma" content="no-cache">
  9.     <meta http-equiv="cache-control" content="no-cache">
  10.  
  11.     <meta name="keywords" content="A list of keywords for the entire web site">
  12.     <meta name="description" content="A description for the entire web site.">
  13.     <meta name="robots" content="index,follow">
  14.     <meta name="revisit-after" content="7 days">
  15.     <meta name="email" content="[email protected]">
  16.  
  17.     <link rel="stylesheet" type="text/css" href="site/css/general.css">
  18. </head>
  19.     <div id="left-menu"><!--#include virtual="/site/include/left-menu.html" --></div>
  20.     <div id="content"><h1>Foopie for Everyone</h1</div>
  21.     <div id="contact-info"><!--#include virtual="/site/include/contact.html" --></div>
  22. </body>
  23. </html>

HTML:
  1. <!-- left-menu.html -->
  2.     <li><a href="/">Home</a></li>
  3.     <li><a href="/about.shtml">About</a></li>
  4.     <li><a href="/events.shtml">Events Calendar</a></li>
  5. </ul>

HTML:
  1. <!-- contact.html -->
  2.     <li><a href="/">Clarkson Energy Homes, Inc.</a></li>
  3.     <li><a href="mailto:[email protected]">[email protected]</a></li>
  4.     <li>Phone: +1 (254) 968-8328</li>
  5.     <li>Fax:   +1 (254) 968-8328</li>
  6. </ul>

When this load_page.shtml is requested by the client, Apache gets to work and assembles three files load_page.shtml, left-menu.html and contact.html to produce one composite file. The browser sees the file below. In practice, I do not add the file name comments into the files.

HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <!-- load_page.shtml -->
  3.     <title>Foopie</title>
  4.  
  5.     <link rel="shortcut icon" href="/favicon.ico">
  6.     <meta http-equiv="Content-Type" content="text-html; charset=utf-8">
  7.     <meta http-equiv="Content-language" content="en-US">
  8.     <meta http-equiv="pragma" content="no-cache">
  9.     <meta http-equiv="cache-control" content="no-cache">
  10.  
  11.     <meta name="keywords" content="A list of keywords for the entire web site">
  12.     <meta name="description" content="A description for the entire web site.">
  13.     <meta name="robots" content="index,follow">
  14.     <meta name="revisit-after" content="7 days">
  15.     <meta name="email" content="[email protected]">
  16.  
  17.     <link rel="stylesheet" type="text/css" href="site/css/general.css">
  18. </head>
  19.     <div id="left-menu">
  20. <!-- left-menu.html -->
  21.     <li><a href="/">Home</a></li>
  22.     <li><a href="/about.shtml">About</a></li>
  23.     <li><a href="/events.shtml">Events Calendar</a></li>
  24. </ul></div>
  25.     <div id="content"><h1>Foopie for Everyone</h1</div>
  26.     <div id="contact-info">
  27. <!-- contact.html -->
  28.     <li><a href="/">Clarkson Energy Homes, Inc.</a></li>
  29.     <li><a href="mailto:[email protected]">[email protected]</a></li>
  30.     <li>Phone: +1 (254) 968-8328</li>
  31.     <li>Fax:   +1 (254) 968-8328</li>
  32. </ul>
  33. </div>
  34. </body>
  35. </html>

My naming convention is pretty simple. I keep the .html extension for fragments and use a directory structure to indicate which type of file I am including. This allows my text editor to syntax highlighting without me adding custom extensions to the editor. While I don't do it, it should be possible to store the included files in directories outside the public html directory. That may be advantageous to some folks.

If I choose to do so, I can add a user interface to update the left hand menu for my customers. I can do that without having to manipulate a lot of files or to manipulate one large file. Only the left-menu.html file needs to be updated.

I'm going to spilt this post over several days to make it easier on me and on you. There are a lot more powerful uses of Apache SSI. In the next few days I will explore these use and show you how to create web pages from several files, while allowing you to deal with one or two files at a time.

Before I finish, I would like to handle a one objection to using multiple files to assemble a web page. Even if you only have one static file for your web page, the server software is using a lot of files to assemble the request for the client. Apache checks many different configuration files before it gets to your html file. Server software seems to be optimized for reading and processing files fast. The hit to performance should be neglible.

Happy Coding

Digg!