SSI for CMS (Part 1 of 3): Enhancing Web Development Efficiency

Posted on Mon 28 March 2022 in Programming

Content Management Systems (CMS) are a fantastic tool for individuals who are not well-versed in HTML, but what about those of us who are familiar with HTML, CSS, and other web development technologies? In this three-part series, I'll introduce you to an alternative approach that combines the best of both worlds, allowing developers like us to leverage our skills while benefiting from the convenience of a CMS.

CMSs are an excellent solution for setting up websites for clients, offering convenience and often cost savings by eliminating the need for frequent professional updates. If you invest the time to learn even some of their basic features, you can effectively serve your web design clients while keeping their expenses in check.

However, many years ago, while working with Apache on a web project, I found myself in a situation where I needed a rapid method for generating content for each page while maintaining consistent headers, footers, menus, and other shared elements. At the time, I may have been unaware of CMS options, or perhaps they were not as readily available as they are today. Regardless, I developed a unique approach to page creation that allowed me to update shared site components without having to modify multiple files.

Later on, I delved into ASP programming and Microsoft IIS, but more recently, I've returned to Apache for two web projects. While PHP was an option for including headers and footers in each page, I found it led to an excessive amount of redundant code in each file.

To streamline the process, I turned to Server Side Includes (SSI), a technology built into Apache that enables developers (or anyone else) to assemble a web page from one or more files. This method allows for the creation of dynamic pages with reusable components. Let's take a look at a simple example using SSI and CSS.

In this example, we have four main files:

1. load_page.shtml: The primary file.

2. general.css: The CSS file.

3. left-menu.html: Contains the left menu.

4. contact.html: Contains footer information, in this case, contact details.

Here's the content of the primary file, `load_page.shtml`:

```html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Foopie</title>

</head>

<body>

<div id="content"><h1>Foopie for Everyone</h1</div>

</body>

</html>

```

Here's a snippet from the `left-menu.html` file:

```html

<ul>

<li><a href="/about.shtml">About</a></li>

<li><a href="/events.shtml">Events Calendar</a></li>

</ul>

```

And from the `contact.html` file:

```html

<ul>

<li><a href="/">Clarkson Energy Homes, Inc.</a></li>

<li><a href="mailto:[email protected]">[email protected]</a></li>

<li>Phone: +1 (254) 968-8328</li>

</ul>

```

When a client requests `load_page.shtml`, Apache dynamically assembles the page by combining this primary file with `left-menu.html` and `contact.html`. The browser sees the fully formed page. In practice, I typically exclude the file name comments in the actual files.

This approach allows for a modular structure, making it easy to update shared elements without needing to modify multiple files. If you choose to do so, you can also create a user interface to manage these files, providing clients with an efficient way to update their site's content.

In the next parts of this series, I'll delve deeper into the capabilities of Apache SSI and demonstrate how you can create web pages from multiple files, simplifying the process of managing complex websites. Stay tuned!

Note: While Apache and SSI are used here, similar server-side technologies are available for other web server platforms.