Guide to Server Side Includes (SSI)

This document is intended to teach you the ins and outs of Server Side Includes and how to use them on our servers. A general understanding of HTML is required.

What In The World Are Server Side Includes?

Server Side Includes are a special set of commands that you can use inside HTML code when creating your website. They let you easily add dynamic elements to your pages such as the current date and time, last modified date, and a users IP address and browser type. Perhaps the most valuable use for SSI is the ability to include external HTML documents within
your page. 

SSI Basics (Using Server Side Includes)
In order to use SSI you must give your html files a .shtml extension instead of the regular .html or .htm extension. This tells our servers that you have SSI commands within your pages so we can handle them properly.

Once you have given your file a .shtml extension you can begin to use SSI commands. These commands are placed between special comment tags within your HTML code. A typical SSI command looks like this:
<!--#command=""--> Remember that what your code looks like will be different from what is displayed on screen.

Does this seem confusing? Here is a list of SSI commands and what they look like on screen. You can simply copy and paste the command from here if you wish.

<><>

<><>
<><>
<><>
<><>

<><>
<><>
<><>
<><>

<><>
<><>
<><>
<><>

<><>
<><>
<><>
<><>

<><>
<><>
<><>
<><>

<><>
<><>
<><>
<><>

<><>
<><>
<><>
<><>

<><>
<><>
<><>
<><>

Browser Output (on screen)	SSI Command Code
The Current Date and Time:	The Current Date and Time: <!--#echo var="DATE_LOCAL" -->
The Previous Web Page: http://www.netfirms.com/support	The Previous Web Page: <!--#echo var="HTTP_REFERER" -->
Your IP Address:	Your IP Address: <!--#echo var="REMOTE_ADDR" -->
Your Browser Type and OS:	Your Browser Type and OS: <!--#echo var="HTTP_USER_AGENT" -->
This Web Page File Name: ssifaq.shtml	This Web Page File Name: <!--#echo var="DOCUMENT_NAME" -->
This Web Page File Size: 11K	This Web Page File Size: <!--#fsize file="ssifaq.shtml" -->
This Web Page Last Modified Date: Wednesday, 03-Jan-2001 15:03:11 EST	This Web Page Last Modified Date: <!--#flastmod file="ssifaq.shtml" -->

Lets Make A Date!

You can customize your date any way you please. This is accomplished by placing a special time format command directly in front of the Current Date and Time command that we looked at above. Lets take a look at a few examples:




If you want your date to look like this: 

<!--#config timefmt="%a %d %b %y" -->
<!--#echo var="DATE_LOCAL" -->

If you want your date to look like this: 

<!--#config timefmt="%A %B %d %Y" -->
<!--#echo var="DATE_LOCAL" -->

If you want your date to look like this: 

<!--#config timefmt="%m/%d/%y" -->
<!--#echo var="DATE_LOCAL" -->

Here is the entire list of Time Format codes:

<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>
<><>

Full Name	Abbreviated Name
%A Full weekday name	%a Abbreviated weekday name
%B Full month name	%b Abbreviated month name
%Y Full year	%y Abbreviated year
%D Date as mm/dd/yy	%d Day of the month
%H Hour as 1 - 23	%I Hour as 1 - 12
%M Minutes 0 -60	%m Month of the year 01 - 12
%R Time as %H: %M	%r Time as %I: %M: %S: %p
%p a.m. or p.m.	%T Time as %H: %M: %S
%S Seconds as 0 - 60	%Z Time zone name

Getting Tricky With SSI (Creating a Back Button)

Now that you have mastered placing SSI commands within your HTML code lets take it a step further. Using the 'Previous Web Page' command from above you can create a back button. The idea is to place an SSI command within a regular HTML tag.
Here is the code for creating a back button: 

<a href="<!--#echo var="HTTP_REFERER" -->">BACK BUTTON</a> 

Getting Fancy With SSI - Part 1 (Methodolgy)

When browsing our website you may have noticed elements on every page that never change. Things like the Navigation Bar, Header, Footer, or even the Banner ads. These elements are not coded into every page - rather they are included from an external HTML file. This way if something needs to be changed we only have to modify a single file instead of every page.



Lets take a look at a couple of diagrams to better illustrate this situation:




Here we have 4 separate pages each with a red rectangle and a different colored square. If we need to add something to the red rectangle we would have to do so on each page.

Now if we put the red rectangle in a different HTML page and 'Include' it into our 4 pages then any changes become much easier. We only have to change 1 file instead of 4!.




Getting Fancy With SSI - Part 2 (Implementation)

OK you have sold me, this Include stuff could make my life a whole lot easier - now show me how to do it.
It is actually very simple to Include an external file. The SSI command to do so is: 

<!--#include file="myfile.html" -->

Lets take a look at an example:

We have a Footer file called "footer.html" and in this file is the following code,

<a href="http://www.netfirms.com">Copyright Netfirms 2001</a>

Our SSI enabled web page called "mainpage.shtml" contains;

<html>
<head><title>Netfirms</title></head>
<body>

Welcome to Netfirms. <br>

<!--#include file="footer.html" -->

</body>
</html>

The SSI enabled web page (mainpage.shtml) would then look like this in a browser:



Welcome to Netfirms. 

Copyright Netfirms 2001

You may have noticed that in our Included file (footer.html) we do not have the opening and closing <HTML>, <HEAD>, and <BODY> tags. This is because they are already used in the SSI enabled web page (mainpage.shtml). You can include as many files as you want within your page.
It should also be mentioned that both files should be located in the same directory for this to work. Otherwise you will get an error message on your screen.



SSI Troubleshooting



Q - I have placed an SSI command within my HTML file but nothing happens.

A - Make sure the extension of your HTML file .shtml and not .html or .htm



Q - I keep getting the following error: [an error occurred while processing this directive]

A - If you are trying to include a file make sure it is in the same
directory as the main file. Also make sure you have spelled the filename
correctly in your SSI command.



Q - Why can't I execute CGI (perl) scripts within my webpage using the
#exec cgi command?

A - At this point Netfirms does not provide #exec-cgi functionality -
although you can still use scripts from your CGI-BIN directory.