Server Side Includes – SSI Tutorial

Server Side Includes – SSI Tutorial

The use of Server Side Includes is vital to any webmaster
who plans to seriously run a website. The reason for that
is that, in a nutshell, SSI enables you to dynamically
change the content of many pages without having to
individually edit any of them. It’s a professional way of
saving time while updating pages or, more specifically,
part of these pages. It’s quite simple to implement them,
as long as the server you are hosting your website in meets
a single requirement: having Perl installed and enabled.
Most free hosts do not have Perl on them, but even the most
basic hosting packages include Perl nowadays, so it
shouldn’t be a very complicated task to find a suitable
host.

If you didn’t quite understand the use of SSI, I will give
you an example:

Let’s say you have a simple table-based layout divided in
three cells: left, center and right. “Left” contains the
main menu, “center” is the area where you have chosen to
place the content and in “right” you have put a secondary
menu, with links to other sites. Now, you obviously need
these menus in every page of your website for the user to
navigate properly, but what happens when you need to change
a simple link in any of them? You either have to go trough
each page manually and edit them or use a batch text
replacement software. But… why bother if with SSI you can
use ONE LINE of code to avoid having that problem ever
again?

Implementing Server Side Includes in four steps:

1) Rename the extension of the pages in which you will use
SSI to “.shtml” (without the quotes). Otherwise, it will
not work. Don’t worry, this won’t affect your
layout/content in any visible way. Example: rename
“index.html” to “index.shtml”.

2) In this step you will create the Include itself. For
that purpose, you will use a “.txt” (without the quotes)
file. This file format stores strictly what you type into
it and no additional information, so it’s perfect to be
used as a SSI. You can create and manipulate this file with
any software, but Notepad is usually best suited for these
simple tasks. What you have to put inside this .txt file is
what you want to appear on the area in which you will place
the Include. So let’s use the example mentioned above. For
the left menu I would normally use this code:

<a href=”index.html”>HOME</a><br>
<a href=”projects.html”>PROJECTS</a><br>
<a href=”about.html”>ABOUT</a><br>
<a href=”links.html”>LINKS</a><br>

So that’s exactly what I am going to put in the file which
will serve as the Include! Nothing else. Not even <head> or
<body> tags. You can name this file whatever you want, as
long as you keep the .txt extension intact.

3) With the Include ready, you will now make it appear on
your page. The code you will need is <!–#include
virtual=”your_file.txt”–> where “your_file.txt” is the
name of the file you have chosen as the Include. Only use
standard letters, numbers and _ (underscore) for the name,
to avoid any conflict with the server. If you want to keep
the Include in a separate directory, just add the name of
the directory plus a slash (this symbol: /) to the
beginning of the “your_file.txt” part. So if you want to
keep the Include in a folder called “SSI”, the code would
become: <!–#include virtual=”SSI/your_file.txt”–>.
Remember to insert this code on the exact position where
you want it to appear on the page! Don’t worry, however,
about breaking the flow of the page, since the SSI will be
insert like in the example below:

The code:
And today I have very exciting news! I have just started to
become a professional web designer and I feel that I am
making real progress… here’s an example for you guys to
see:

<br>
<!–#include virtual=”example.txt”–>
<br>
See you all tomorrow!

How the browser parses it:
And today I have very exciting news! I have just started to
become a professional web designer and I feel that I am
making real progress… here’s an example for you guys to
see:

It may not seem like it, but this line of text was
generated from an external file. :)

See you all tomorrow!

4) Now upload the “.shtml” pages and the Include file to
your server. If you haven’t specified a folder for the
Include, place the pages and the include together, usually
on the “root” (main) directory. If you have specified a
folder, then make sure you have uploaded the files to the
correct place.

And that’s it! You now have a working Server Side Include
in your website. Just remember that SSI isn’t correctly
parsed outside of a server environment, so you won’t see it
in action until the files are properly uploaded. To wrap
this tutorial up, I will give you a simple example of SSI
inserted into a simple page:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0
Transitional//EN”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html;
charset=UTF-8″>
<title>SSI Test</title>
</head>
<body>
<table>
<tr>
<td><!–#include virtual=”menu.txt” –></td>
<td>Welcome to my page, this is a test!</td>
<td><!–#include virtual=”menu2.txt” –></td>
</tr>
</table>
</body>
</html>