Tutorial #181

Beginners Guide To Server Side Includes

Level: Beginner
Requirements: Dreamweaver MX or 8 or any text editing programme
Language: ASP, VBScript, PHP

Like it? Share it >

Introduction

In this tutorial, we will learn how to use Server-Side Include (SSI) files to make our lives much easier. You can do most of this tutorial using an ordinary text editing programme such as notepad. I've used Dreamweaver only as a way of demonstrating a tool within it. The technique is available in whatever programming language you want to use, be it asp, php. SSI files allow you to include identical content or code on any number of pages.

The beauty of include files is that whenever you make a change to the included file the content of the included file will update across all pages where it has been included. This makes it a handy functionality for things such as navigation systems, repeated header images or files that have functions for use in numerous pages, in fact any content or code which you reuse or change often and which appears on more than one page. Imagine you have a site with 20 pages each with the same navigation bar, you spot a spelling mistake! No problem, change one file and all 20 pages using that file reflect that change, no need to go to each page one at a time and fix the spelling mistake.

Another helpful thing about include files is that you can keep functions seperate from page code, much less content on a single page, much easier to keep organised.

Step 1: Creating the pages

You will need at least two pages,
1. the page to be included
2. the page where the include will be included.

So, open Dreamweaver (or your text editor) and create two pages. For now we will make the pages as asp pages but I will give the code for use in php at the end.

Call the first page include.asp, the second mypage.asp.

In fact the file to be included can have pretty much any extension, quite often an include file will have the extension .inc so that the file is easily identifiable as an include file. You may have seen this method used to include a connections file when making a page that uses a connection to a database.

Step 2: make the include file

First lets work on the include.asp page.

Go into code view in dreamweaver and delete everything you see, yes, that right everything, get rid of all the tags, no head tag, no body tag, no html tag. Your page will go from this:

to this:

Yes it's suppose to be blank.

For this tutorial we are going to use a single image in our include. Still in code view add the tag for an image. Your include.asp will now look something like this:

The content can be pretty much anything you want, a full navigation bar for example complete with table tags or div tags and image tags.

step 3: include the file

Let's now move on to including the file on a page.

Set up your basic page layout using whichever method you prefer, div's or tables on your mypage.asp page making space for the include file content i.e. a div or table cell, I've used a simple table format here. Go into code view, your code view should look something like this

Locate the place where you want your include content to display, here it would be the first table cell. Insert this code into the cell.

Your code should now look like this:

When you view your page in design view you will see the content of the include file displayed, when you try and selected an element within the file all of the content will be selected and in code view the include tag will be selected, you have to edit the include file to make any changes.

step 4: using dreamweaver's tool

I mentioned earlier that the only reason we are using Dreamweaver in this tutorial is to demonstrate a handy button that makes including files easy.
So, have a look at the Common tool bar, you will see an icon for the SSI Server-Side Include.

Don't worry if you can't find the icon, there's another route you can take.

From the Insert menu drop down click on Server-Side Include.

After clicking either the link or the icon a window will open from which you can browse to and select the file you wish to include and Dreamweaver will write the code for you.

That is basically all there is to including an external file in a page. The code is slightly different for php pages

<?php require_once('include.php'); ?>

but the method for using the include is exactly the same.

In theory it's possible to have a page that is made up purely of include files, the code on a page called, for example, whole.asp could look like this:

In which case your header.asp file would have all the header code, something like this

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Page</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="home.asp">Home Page</a> </td>
<td align="center"><a href="about.asp">About Us </a></td>
<td align="center"><a href="portfolio.asp">Portfolio</a></td>
<td align="center"><a href="tutorials.asp">Tutorials</a></td>
<td align="center"><a href="contact.asp">Contact Us</a> </td>
</tr>
</table></td>
</tr>
<tr>
<td>

Your content.asp file would look something like this:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">Some writing here about the website </td>
<td>Maybe an image or two here.<br />
<br />
<img src="image.jpg" width="539" height="315" /></td>
</tr>
</table>

Your footer.asp page would look something like this, closing the body and html tags and any other tags left over.

</td>
</tr>
<tr>
<td>Footer Content </td>
</tr>
</table>
</body>
</html>

And the whole.asp page with the includes puts it all together. Personally I don't like this method of having a header file with standard head tags in only one place, it restricts the use of meta tags for one thing, and can cause issues if you want to use different javascript for example on different pages and I've had problems when trying to utilise recordsets or other dynamic elements in asp pages, which is why I eventually abandoned including html header information in an include. My personal preference is to have a 'template' page with some basic layout and include the files within that. My setup would look more like this:

whole.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Page</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>

header.asp

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="home.asp">Home Page</a> </td>
<td align="center"><a href="about.asp">About Us </a></td>
<td align="center"><a href="portfolio.asp">Portfolio</a></td>
<td align="center"><a href="tutorials.asp">Tutorials</a></td>
<td align="center"><a href="contact.asp">Contact Us</a> </td>
</tr>
</table>

content.asp

footer.asp

Footer Content

This tutorial is a simple introduction to the use of SSI (Server-Side Includes) the method has many applications that make life much easier. Try it out, make several pages and include a file, change the include file content and watch as many are effected by one!

Tutorial By	Submitted On	Views	Rating
Sue Hamilton	08/06/2008	5254	Rate Tutorial