How to Use Server-Side Includes - Andy's Bucket-o-Memes

How to Use Server-Side Includes

This is a quick how-to on server-side includes, or SSIs. SSIs are a really easy way to get repeat content into your web pages without having to type the same stuff out over and over again.

What Are SSIs?

Server-side includes are bits of text that are added into web pages. You create and edit them independently from the web page, so it is possible to edit the SSI without changing the page, and it is possible for many pages to use the same SSI.

When your web page is requested by a user, the server takes the page and the SSI and seamlessly stitches them together. The user sees the base page and SSI all rolled into one.

What Are SSIs Good For?

Consistency, speed of change and add-ins.

SSIs are great for consistency. Say you want to have a standard look to your whole website. Normally you would have to type the same information in the top and bottom of each page - and if you forgot one setting, or mis-typed something, your page would be different to the others. By using two SSIs, one as a header and another as a footer, you can apply the same style to the whole site.

SSIs are great for speed of change. Going back to those headers and footers - say you wanted to change the colour of your entire site. Colour is usually in the <body> tag, so you would have to go into every page and change the details there. With an SSI header, you just change it the once and all your pages change automatically.

SSIs are great for add-ins too. If you want to regularly update a panel on your site, but don't want the hassle of editing the entire page (or don't want to let others edit your page), set the panel up as an SSI.

How Do I Do It, Then?

First of all, you need to be sure your web server supports SSIs. Most do. If you have a fairly standard server, then naming your SSI-using web pages with the extension .shtml ought to do the trick. Some servers support other filename extensions too, and most can be configured (UNIX users are probably using the Apache server, documentation is here).

Let's look at the most common example: headers and footers. The code below is a sample web page (view it here):


<html>

<head></head>

<body bgcolor="Green" text="Yellow">



<h3>This is my first page!</h3>

<p>This is some sample blurb for my first page.  It's not much to look at, I know.</p>



<p align="center">Copyright Andy Gates, 2000</p>

</body>

</html>

We can chop this page up into three sections: The header section, the body, and the footer section. So the header section would look like:


<html>

<head></head>

<body bgcolor="Green" text="Yellow">

... and the footer would look like:


<p align="center">Copyright Andy Gates, 2000</p>

</body>

</html>

It's traditional to name SSIs with the extension .ssi, so others (and you, later!) know what they are.

The body section now needs instructions to stitch the header and footer into it when it is viewed. This instruction is called an include, and it looks like this:


<!--#include virtual="header.ssi"-->



<h3>This is my first page!</h3>

<p>This is some sample blurb for my first page.  It's not much to look at, I know.</p>



<!--#include virtual="footer.ssi"-->

The new version of the page looks the same, so why did we bother? Well, when you want to add a second page to your site and make it look the same, you can just copy the two include instructions and let the server do the hard work. And if you want to change to a more tasteful colur scheme one day, you only need to do it the once.

It may not seem terribly necessary when you just have a little colour information, but if your headers are complicated - like the layout and menu control here - it can be a lifesaver.

Another example of an SSI would be a pane of information - like the Word of the Week on my homepage. In this case we have the following in the main page:


blah blah blah...



<table align="right">

<!--#include virtual="wotw.ssi"-->

Go to the <a href="wotw-archive.htm">archive</a>

</table>



blah blah blah...

... and then have a Word of the Week SSI called wotw.ssi which looks like this:


<strong>Word!</strong>

<p>This is the definition of the word of the week</p>

The two stitch together to make life really easy.

There you go, then: a quick overview of SSIs. I'm sure you can think of a dozen ways to use them to make your website slicker, more useful, and easier to manage. Here's a tip in closing: You can stack SSIs, so one can call another. Means you can get ever so modular and clever, if you're so inclined.