<!--#include virtual="inc/menu.htm"-->

[bahattab]

ASP : SSI Another Way


Author: Joseph Skidmore More by this author


Added: Aug 17, 2006 Rating: Level: Beginner Software: ASP Editors


This is another SSI tutorial written by a friend, it shows another way of looking at SSI and also shows you some new tricks and tips.
Server Side Include (SSI) files are a great way to simplify management of a web site. If you have a 100-page site and all 100 pages have a left-side navigation menu, why have the menu written 100 times? What if one of the links on the menu changes? You would have to change the link 100 times. A much more efficient way to manage this is to create a menu file and include it on all of the pages. All you have to do then is change the link in your menu file, and all of the other pages will fall in line.
All you need to use SSI is a web server that supports SSI. Virtually all the current popular web servers - Apache and IIS included - support SSI.
Here's what an old index.html page might look like:

<table>
<tr>
<td>
<table>
<tr><td><a href="link1.shtml">Link 1</a></td></tr>
<tr><td><a href="link2.shtml">Link 2</a></td></tr>
<tr><td><a href="link3.shtml">Link 3</a></td></tr>
</table>
</td>
<td>
Content goes here.
</td>
</tr>
</table>
Step 1 would be to take the center table out and save it as menu.htm.

<table>
<tr><td><a href="link1.shtml">Link 1</a></td></tr>
<tr><td><a href="link2.shtml">Link 2</a></td></tr>
<tr><td><a href="link3.shtml">Link 3</a></td></tr>
</table>

And change your main page to:

<table>
<tr>
<td>
<!--#include file="menu.htm"-->
</td>
<td>
Content goes here.
</td>
</tr>
</table>

Save it as index.shtml
Simple enough, right? Well, where it gets more complex is when you throw subdirectories into the mix. Suppose link1.shtml was now in a directory called subdir1.

link2.shtml was inside of subdir1/subdir2, and link3.shtml was in subdir1/subdir2/subdir3 but we still want to use the navigation menu. We would change the menu.htm file to:

<table>
<tr><td><a href="subdir1/link1.shtml">Link 1</a></td></tr>
<tr><td><a href="subdir1/subdir2/link2.shtml">Link 2</a></td>
</tr>
<tr><td><a href="subdir1/subdir2/subdir3/link3.shtml">Link 3</a>
</td></tr>
</table>

Plus, we'd have to change the include statement to:

<!--#include file="../menu.htm"-->

That will work, but now suppose we want to go to Link 2. It is in subdir2 underneath subdir1, so when we click on Link 2, we'd get a 404 - Page Not Found - error. So the question is, how can we avoid all these "dotdot" issues?

First, create a new subdirectory called inc and place your menu.htm file inside of it. Then instead of the previous include statement, use:

<!--#include virtual="inc/menu.htm"-->

What virtual does is tell the server to go back to the root directory first, then pull the specified file, including any subdirectories. It makes the include statement independent of the subdirectory it being called in. So we could be inside of subdir1/subdir2/subdir3/subir4/subdir5, and by using #include virtual, it will still pull menu.htm out of the inc directory off of the root.

So that solves our first problem of having to keep track of all of the "dotdot"s in our include statement. Now we have to make sure we're not dependent on the current place of the directory structure to load the correct page. The simple solution is to stop using relative links, and use the "/" character. It's similar to using include virtual as it tells the server you want to back to the root directory first. So menu.htm would now look like:

<table>
<tr><td><a href="/subdir1/link1.shtml">Link 1</a></td></tr>
<tr><td><a href="/subdir1/subdir2/link2.shtml">Link 2</a></td>
</tr>
<tr><td><a href="/subdir1/subdir2/subdir3/link3.shtml">Link 3</a>
</td></tr>
</table>

And your done!