Server Side Includes
It can make your page dynamic. It can help keep your page
updated with the latest information. A CGI program can
insert custom HTML code into your page.
This magic thing is called Server Side Includes, also known
as "SSI".
"Includes" because SSI includes stuff on your page, at the
spot you tell it to.
"Server Side" because SSI is taken care of at the server
(rather than at the browser). As the server is sending your
page to your visitor's browser, it scans your page for
special tags that tell it what you want included in those
spots. Whenever it finds such a spot, the server includes
what you want.
Wherever you have the same code on many pages (such as
navigation bars, subscription forms, bottom-of-page links),
use SSI and you'll only need to change one file to change
every page that it's used on.
Wherever you need freshly updated information every time a
page loads, use SSI.
It's simple.
So why isn't everybody using it? Because it takes a few
nanoseconds of time for the server to scan the page and
include the material. And because not everybody knows how
to use the tags.
Most hosting companies allow their accounts to use SSI. A
common requirement is the .shtml file extension for SSI
pages. This is because it does take a tiny bit of time and
server resources to scan the page and include material. It
is assumed that you'll only use the .shtml extension for SSI
pages and use .html and .htm for the others.
If you don't know whether or not you can use SSI on your
server, do a test.
Make two files. Name the first file mytest.shtml and the
second file myssi.txt
The content of the mytest.shtml is:
<html><body>It goes here.
<!--#include file="myssi.txt"-->
</body></html>
The content of the myssi.txt is:
<font size="+2">
<b>Here I am!</b>
</font>
Upload those two files to your server and put the URL of
mytest.html into your browser. If you see the words "It goes
here. Here I am!", then you can use SSI on your server.
Notice how the SSI tag is within HTML comment tags. Some
servers will work with a space after
the "<!--" comment begin
characters or a space before
the "-->" comment end characters.
But some servers will produce an error message when you do
that. Example:
<!-- #include _________ -->
might work on some servers, but not on all. To be certain,
do it like this:
<!--#include _________-->
Here is some of what you can do with SSI:
- The tag: <!--#include file="__________"-->
Replace the underscore with the file name you want
included. The file name can just about anything you
want (.txt and .html file extensions are common), but
it must be text. It can be plain text, HTML code,
JavaScript, and anything else composed of text.
However, do not use binary files such as images or
sound files.
The file you include can have HTML code for images
and sound files, but you just can't put the image/sound
file name directly into the SSI tag itself.
The file must reside in the same directory as your
.shtml page.
- The tag: <!--#include virtual="__________"-->
Same as file="__________" except your include file may
be in different directory. The file name, in this case,
is a virtual file name.
Examples:
"../filename.txt" specifies a file one directory lower.
"nextdir/filename.txt" specifies a file in the nextdir
directory from where your .shtml file is at.
- The tag: <!--#exec cgi="__________"-->
Replace the underscore with the CGI program's file
name. The file name may be a virtual file name, but
it cannot be a http://... URL.
The CGI program must return text, but that text can be
JavaScript or HTML tags for images and/or sounds or
anything else that browsers understand.
With those three simple SSI tags, you can have one central
file for any code you may want to repeat from page to page.
And you can display the output of CGI programs; including
counters, banners, live news/weather information retrieved
from remote sites, your current "latest news", a count of
members, the visitor's IP address, the last page the
visitor visited if s/he arrived via a link -- pretty
much anything a CGI program can do.
Here is an extreme example:
<html>
<body bgcolor="FFFFFF">
<!--#include file="topnavbar.html"-->
<table><tr><td>
<!--#include file="sidenavbar.html"-->
</td><td>
The weather in Italy is:
<!--#exec cgi="italyweather.cgi"-->
<p>Current stock prices are
<table border="1" cellpadding="9"><tr><td>
<!--#exec cgi="stockprices.cgi"-->
</td></tr></table>
<p>Your IP address is:
<!--#exec cgi="your_ip_address.cgi"-->
<p>Subscribe to our awesome newsletter!
<!--#include file="subform.html"-->
Click here for a random link:
<!--#exec cgi="randomurl.cgi"-->
<p>You are the <!--#exec cgi="counter.cgi"--> visitor!
</td></tr></table>
<!--#include file="bottomstuff.html"-->
</body>
</html>
With all those file and CGI program accesses, the above
example page would take some seconds to load. But as a
demonstration, you can see for yourself that there is
much room for creative implementation.
Will Bontrager
©2000 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
