AbleDesign - Tutorials
Web Design Tutorials - Advanced Design Considerations
Server Side Includes (SSI)
Have you ever spent countless hours making changes to dozens of pages on your site and wondered how the big sites can maintain things? There are more advanced methods, but the simplest and possibly most robust is Server Side Includes.
If you break it down, SSI is exactly what the name implies. In its most common form, SSI is simply a text file that is included within the page before leaving the server (to be viewed). The idea is to take a section of your page that is used throughout the site (e.g. navigation, headers and footers, etc.) and place them in a text file. This way, when you want to change several hundred pages, you only have to make the changes to that one text file. Make your vacation plans now with the time you have just saved!
Ok, so how do you actually put SSI to use on your site? First of all, you will need to make sure it is available on your server. If it isn't, look for a new host. If you already have pages set up that you want to convert to SSI, things are a little more involved. Most servers require you to name pages with a .php extension in order to make use of SSI. This tells the server to perform operations before sending the requested page(s). There are ways to get around naming/renaming everything with a .php extension, but I will not address those as they are considered poor options from the standpoint of server performance. I use SSI for everything, so I always set up new pages as .php unless I have a reason to do otherwise. If you think you will make use of SSI, this is a very good habit to get into.
Now, the next step is to either create the pages for your site or move your existing items into text files. Depending on where you are starting from, we will assume you now have a full web page that is standard HTML, including your navigation and header/footer elements. It will look something like:
|
<HTML>
<HEAD> <TITLE> New Document </TITLE> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY BGCOLOR="#FFFFFF"> Header Side Navigation Main Body Footer </BODY> </HTML> |
That is a very simplified picture, but each of the body elements (header, navigation, main body, and footer) can become quite complex. Now for the SSI version:
|
<HTML>
<HEAD> <TITLE> New Document </TITLE> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY BGCOLOR="#FFFFFF"> <!--#include virtual="/header.txt"--> <!--#include virtual="/navigation.txt"--> Main Body <!--#include virtual="/footer.txt"--> </BODY> </HTML> |
Before cutting the three SSI sections out of your page, create three blank text files and name them header.txt, navigation.txt, and footer.txt, or whatever naming convention you prefer. Now cut the HTML code out of your page and place it in the corresponding text file. The next step is to place the files on your server, making sure to place the text files at root level (often a /www/ directory, i.e. the folder people view your home page in). The "/" before the file name above tells the server to look at root level. If you wanted to place all your SSI files in a subdirectory, the line would become:
<!--#include virtual="/subdirectory/header.txt"-->
An Example
Care to see a real world example of how using SSI can save you time? I've got just the thing! The first example was the Willamette Cross Country / Track & Field site before using a frames setup. The second example is the current setup, after switching to the frames:
What does this have to do with SSI? Well, because the first example used SSI header and footer files throughout the site, the process of transferring the entire site over to the frames setup literally took a matter of seconds! Of course, getting the frames arranged as desired took longer. All that had to be done was to place the original header navigation info in the appropriate frames and replace the old SSI header file with a new one that no longer contained the navigation info. Just like that, the changes were applied site-wide.