DM 171: Week Five - March 8

Server Side Includes

One of the oldest methods of reusing site wide content is the Server Side Include. The functionality is built into the Apache Web Server software which hosts the majority of web pages online; as open source software, SSI is also free. Even better, most Apache installations are also configured with XSSI (eXtended Server Side Includes) which allow limited but useful programming for your web site. SSI is also functional on Microsoft Internet Information Servers but may have some limitations depending on the installation configuration.

Click on a tab to reveal its content…

  • Basics
  • Setup
  • 8/CS3/4
  • Code

Server Side Includes?

From the Apache Web Server tutorial:

SSI (Server Side Includes) are directives that are placed in HTML pages, and evaluated on the server while the pages are being served. They let you add dynamically generated content to an existing HTML page, without having to serve the entire page via a CGI program, or other dynamic technology.

The decision of when to use SSI, and when to have your page entirely generated by some program, is usually a matter of how much of the page is static, and how much needs to be recalculated every time the page is served. SSI is a great way to add small pieces of information, such as the current time. But if a majority of your page is being generated at the time that it is served, you need to look for some other solution.

Server side includes are a great way to build template-based sites that do not require the use of a database. SSI is a very mature technology and thus reliable. Also, since the SSI instructions are carried out on the server, the user's browser is not required to do any extra work. To the user's browser, the SSI file is functionally the same as a static HTML file.

Practical usages include common navigation bars, footers, common headers, and the like, items that get used on every page site wide. This page has three include files for repeating content; one to set variables, the navigation block on the right side top (currently) of the page, and the footer of the page. The fourth include is the actual content you are reading.

In a way, server side includes are to content as external cascading style sheets are to site appearance: an edit on one file can effect the entire site.

Initial Document Setup

On most servers, your HMTL file must have the .shtml suffix to instruct the server to look inside of your code for further SSI instructions. If all of your pages will have SSI, you may ask your server admistator to configure the server to examine all HTML documents. On webhawks, use .shtml as your file extention for pages with server side includes.

The Included Document

One basic server side include instructs the web server to insert or include the contents of an external text file. The external file must be ASCII text like your HTML files and usually ends with the .html or .shtml suffix. Included files are often composed of HTML tags but are not complete HTML documents.

If you choose the .shtml suffix for your include file, any SSI in that file will be carried out as it is included in the requesting file. This allows you to add some complexity to your SSI programming, a good example is the copyright statement in the footer that updates the last year automatically.


Dreamweaver 8 Include Menu (CS3/4 menus are funtionally the same)

Dreamweaver added the option for server side include in the Insert menu beginning with version 8. Assuming you have created your .shtml file and the file to be included, your screens will look something like the following examples. We will talk about hand coding them in the next tab.

Choose Insert menu > Server-Side Include

Dreamweaver 8 insert menu with Server Side Include highlighted

Your menu will look similar to this using the Mac operating system, windows will be slightly different. When you choose Server-Side Include, you will be given another dialog window to find the file you wish to include.

Choose the File to Include

Your dialog window will look similar to this one. Notice that you also have the choice of “Relative to:” in a dropdown menu, document or site root. Your needs will determine which one to choose.

Dialog window to choose SSI file to be included

Properties Inspector

When you have included your file…

Hello World!

If the include works, you will see “Hello World” in fuschia and this paragraph.

With the include selected, your properties inspector will look similar to this:

SSI properties inspector image

Note the SSI icon on the left, the filename browser, Edit button, and Type radio buttons. The filename browser allows you to pick another file to include. The edit button opens the include in another Dreamweaver tab so you can edit it. The type radio buttons allow you to toggle choose “file” or “virtual” in the include coding, leave it on virtual for webhawks.

Server Side Include Code

Here is the code for that Dreamweaver inserted to produce the “Hello World” in the previous tab.

<!--#include virtual="/dm171spring2010/schedule/week05/helloworld.shtml" -->

Notice that the syntax for the include looks very similar to the standard HTML comment code. It starts the same, but immediately after the second dash after the exclaimation point is a pound sign (#) followed by the instruction for the server. Very important that there are no spaces in that sequense. After the instruction, in this case include, comes virtual= and the path to the file to be enclosed within quotes. The space after the closing quote is very important also. Then the tag ends just like a comment tag.

Dreamweaver CS3 will simulate the include in Design view (or is supposed to do so). The files must be served by the web server in order to check it in your browser, so they need to be uploaded to view properly unless you set up a server on your hard drive.