|
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:
Friday April 25 2003 |
The
Current Date and Time:
<!--#echo var="DATE_LOCAL"
--> |
The
Previous Web Page:
Variable 'HTTP_REFERER' cannot be found
|
The
Previous Web Page:
<!--#echo
var="HTTP_REFERER" --> |
Your
IP Address:
209.237.238.175 |
Your
IP Address:
<!--#echo
var="REMOTE_ADDR" --> |
Your
Browser Type and OS:
ia_archiver |
This
Web Page File Name:
<!--#echo
var="DOCUMENT_NAME" --> |
This
Web Page File Size:
17
|
This
Web Page File Size:
<!--#fsize
file="supportssi.shtml" --> |
This
Web Page Last Modified Date:
Saturday January 25 2003
|
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:
Fri 25 Apr 03 <!--#config timefmt="%a %d %b %y" -->
<!--#echo var="DATE_LOCAL" -->
If you want your date to look like
this:
Friday April 25 2003 <!--#config timefmt="%A %B %d %Y" -->
<!--#echo var="DATE_LOCAL" --> If you want your date to look like
this:
04/25/03 <!--#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.
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.webcentralx.com">Copyright Webcentralx 2003</a>
Our SSI enabled web page called
"mainpage.html" contains; <html>
<head><title>WEBcentralx.com</title></head>
<body>
Welcome to WEBcentralx.com. <br>
<!--#include file="footer.html" -->
</body>
</html> The SSI
enabled web page (mainpage.html) would then look like this in
a browser:
Welcome to WEBcentralx.com.
Copyright Webcentralx 2003You 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 we do not
provide #exec-cgi functionality - although you can still use
scripts from your CGI-BIN directory.
| 