SSI -- Server Side Include

1.Introduction -- What is SSI

Server Side Includes or SSI is an easy server-side scripting language used almost exclusively for the web. As its name implies, its primary use is including the contents of a file into another, via a Web Server.
SSI is primarily used to "paste" the contents of one or more files into another. For example, a file (of any type, .htm, .txt, etc.) containing a daily quote, could be included into multiple SSI Enabled pages throughout a website, by placing the following code

<!--#include virtual="../quote.txt" -->

into the desired pages. With one change of the quote.txt file, pages including the snippet will display the latest daily quote. Server Side Includes are useful for including a common piece of code throughout a site, such as a navigation menu.
In order for a web server in a default configuration to recognise a SSI-enabled HTML file and therefore carry out these instructions, the file must end with the .shtml extension. SSI files can also end with .shtm but this depends on the servers ability to recognise the extension. It is possible to configure a web server to recognise any file with the .html file extension for server side include processing.

2. Basic Syntax and Directives

These are the most common SSI directives:

include
file or virtual
This is probably the most used SSI directive, allowing the content of one document to be included in another. The file or virtual parameters specify the file (HTML page, text file, script, etc) to be included. The file parameter defines the included file as relative to the document path; the virtual parameter defines the included file as relative to the document root.

<!--#include virtual="header.html"-->

exec
cgi or cmd
This directive executes a program, script, or shell command on the server. the cmd parameter specifies a server-side command; the cgi parameter specifies the path to a CGI script. The PATH_INFO and QUERY_STRING of the current SSI script will be passed to the CGI script. "include virtual" should be used instead of "exec cgi".

<!--#exec cgi="/cgi-bin/foo.cgi"-->

or

<!--#exec cmd="ls -l"-->

echo
var
This directive displays the contents of a specified HTTP environment variable. Variables include HTTP_USER_AGENT, LAST_MODIFIED, and HTTP_ACCEPT.

<!--#echo var="REMOTE_ADDR" -->

config
timefmt, sizefmt, or errmsg
This directive configures the display formats for the date, time, filesize, and error message (returned when an SSI command fails).

<!--#config timefmt="%y %m %d" -->

or

<!--#config sizefmt="bytes" -->

or

<!--#config errmsg="SSI command failed!" -->

flastmod or fsize
file or virtual
These directives display the date when the specified document was last modified, or the specified document's size. The file or virtual parameters specify the document to use. The file parameter defines the document as relative to the document path; the virtual parameter defines the document as relative to the document root.

<!--#flastmod virtual="index.html"-->

or

<!--#fsize file="script.pl"-->

printenv
This directive outputs a list of all variables and their values, including environmental and user-defined variables. It has no attributes.

<!--#printenv -->

3. Practical Usage

Today's date

<!--#echo var="DATE_LOCAL" -->

The echo element just spits out the value of a variable. There are a number of standard variables, which include the whole set of environment variables that are available to CGI programs. Also, you can define your own variables with the set element.
If you don't like the format in which the date gets printed, you can use the config element, with a timefmt attribute, to modify that formatting.

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

Modification date of the file

This document last modified <!--#flastmod file="index.html" -->

This element is also subject to timefmt format configurations.

Including the results of a CGI program
This is one of the more common uses of SSI - to output the results of a CGI program, such as everybody's favorite, a ``hit counter.''

<!--#include virtual="/cgi-bin/counter.pl" -->

Notice: You need to turn on the SSI support on the server side in advance, otherwise you'll get a bunch of blank pages!

Referrence:

• Wikipedia: SSI -- Server Side Include
• Apache -- SSI Tutorial

Learn from the worst.

I guess there is few things as educational and entertaining as critisizing the worst. Yes, we can always learn from the worst, at least avoid being one of them.

Just type in "worst site" in google to search and you'll get a bunch of sites which are dedicated to listing the worst sites of the world. I bet you'll like them. It's fun, too.

Some sites are listed below.

World's worst site -- This is actually a demostration of some worst graphic design effects. Though not very comprehensive, it's worthwhile to pay a visit.

The worst of the web -- This site is dedicated to listing sites with worst effects yet in a funny, sarcastic tone. Read the comment of the editors. You'll know clearly where is the worst part of the site.

Mystery meat -- This is not a site -- just a part of the site. But it describes an important yet often neglected issue in website usibility, which is called "mystery meat". The terminology is funny, is it? Read the page, then you'll know it's not, at least for site users.

1. Invincible Header Picture

Do you want your header picture span up filling the entire top space when the webpage was viewed in a 1680*1050 resolution monitor, and generate no scroll bar as we resize it into a mobile phone monitor size? If yes, note the following 2 methods.

1) Long long header picture

We can simply generate a long, long picture, as long as you wish. Then put it in the header space of your webpage. You can see, it easily fills up the whole length. But wait, down the windows there is something you'll never want to see: horizontal scrollbar. How to eliminate it?

After hours searching, I discovered the trick: please the header picture in a division, then put script style="width=100%; overflow:hidden". Then you'll find the horizontal scrollbar has disappeared!

See here for example.

2)Background picture
Add an division on the header, then set the background-image the image you want to place. Remember, background image always repeats if you don't set the attribute. If it's a big image which should be shown only once, set the background-repeat:no-repeat. If your only want your picture to repeat vertically or horizontally, set the background-repeat repeat-y or repeat-x.

See here for example.

2. A footer is a footer, is a footer, is a footer......

I guess many designers are complaining about the footers -- the division that should always stay at the bottom. However, thousands of people are trying to achieve this by adding the attribute "bottom:0px" to the footer, which turns out to be never working. But we can never assign the footer with a "top" attribute, since we never know how long our content will be. Then what to do?

The solution is to layout the major divisions in the way of "flow" as we've discussed in the last tutorial. Take a 3-column layout with a header and a footer for example, we place the header at top, style="width:100%; clear:both". Then we assign the medium level "float" attribue. Remember, do not assign any length for the middle column if you want it to be scalable. The last thing, assign "clear:both" to the footer.

See here for the solution.

Supplement to the Fifth tutorial

Here is the missing image which illustrates the uage of float and clear:

Images in the fifth tutorial is created all by myself. Letters are literally typed. Please value my hard working. Thanx.

Fifth Tutorial -- Layout with CSS

Here we meet again. But I guess no body seems to be paying attention to my newsletter, even if I devote 2 hours to typing each letter. And I know that many people seems so unwilling to read through my tutorial that they even complain in their assessments. Well, I do want to make this newsletter a serial tutorial. It's for your good. If you feel boring, you may tell me and we may discuss some changes in presentation. But if you are not satisfied with the content or you just want me to present those materials already shown in the class, I guess this site is not your site to visit.

Talking about layout, we generally will think of 2 modals. I would like to call the first mdal: Pin modal, because in this modal we assign a certain number for the positioning of an object. Say we want image 1 goes up to the top-left side of the webpage, or we want the navigation bar stay always 20px to the right border of the webpage, etc. In CSS, we have a set of attributes to finish positioning, that is top, right, bottom, right and position. The attributes named "top", "right", etc, is easy to understand. They give the direct position information to the browser, helping it to place objects on the screen. The position attribute includes many options, the most commonly used two are illustrated below.

The second model is mostly used in print materials like news paper and books. I would like to call it: flow. Text in the content is like a stream. It flows from up to down, from left to right (though you may change its direction in CSS). When it comes to some blocks, say a piece of image or an input box, it would choose to flow by its left or right side. Or it can even choose to skip the block and appear after the block afterwards. Actually we have been using this modal for long in Microsoft Word and some other word processor. In CSS, the two attributes we use is float, and clear.

I am sorry that I can not up load the other illustration in this entry. So you will see it in another entry. Generally speaking, the two ways interfere with the other. In design, we can only choose one to go--place it somewhere definitely, or let it float as the window resized. And in the flow method, we may only adopt one attribute: float or clear. We can't use both at the same time.

The advantages of using the Pin method are that firstly, it is easy to be done. Calculate carefully then your creationg will be pixel-exact. Secondly, objects can overlap each other to create a feeling of layer. You may use the z-index attribute to decide which stay at top or bottom. But it also shows weakness when we resize the window. Some items we originally don't want to make overlapped now is because resize. Worse still, it's impossible to place a constant footer at the bottom by using this method.

Though not transparently easy to use, the flow method shows great advantage in placing objects among text. If you want your picture surranded beautifully by text flow, this is your choice. It also gives uncomparable flexibility when the web page is resized. The 3-columns page can still look 3-columns after resize. In addition, it enables you to place an constant footer below your page.