SSI - Server Side Includes ... some tricky things

Download source files - 13.3 Kb

Sample Image - euro2004.jpg

Introduction

Server Side Includes - What does it mean????

I think many people still don’t use the SSI- Server Side Includes, because they don’t know the importance or how to take advantage of this kind of facility, or because they’re in the earlier stage of learning ASP, like myself.

I’ll try to explain by giving a simple example – when you’re writing a long document (about 50 pages) in Microsoft Word, and you need your company’s logo in each page, what will you do? At least, everyone knows that we can use 'Header & Footer', so we need to put in first page, and it will be part of the rest of the document, without too much work, and also makes easier to update.

We can apply the same logic, while creating a site, where normally the headers, footers, and some other objects are always the same. Normally, I use a JavaScript for header and another for footer; when a site is made of pure HTML, it is a good method.

But, if you start making a site using ASP, then you must create separate ASP pages for header and footer (include pages- you can save them with .asp or .inc extensions), and include them on each page you wish. I’ll try to explain in a simple manner:

You create a file in any HTML editor- or simply on Notepad, and save it as header.asp - and you can put the following code, to create an ASP page to use as header:

<html>
<title>Homepage Euro 2004 </title>
<head>
 
<base target="contents">
</head>
 
<body topmargin="3" leftmargin="3">
 
<table border="0" width="100%" bgcolor="#E2E8F5" cellspacing="0" 
         cellpadding="0" height="105" style="border: 1 solid #949494">
  <tr>
    <td width="30%" height="104" valign="middle" align="center">
        <img border="0" src="images/yourlogo.gif" 
                   align="absmiddle" WIDTH="162" HEIGHT="27">
    </td>
    <td width="70%" height="104">
       <img border="0" src="images/yourBannerimage.jpg" 
                      align="right" WIDTH="393" HEIGHT="105">
    </td>
  </tr>
</table>

This is how the header file will look, before we put it as include:

Header image

Next, we’ll have to prepare a footer, which will be common in every page, and normally it brings the copyright, name of company, and other information.

Now you create another file, and save it as bottom.asp (or footer.asp), and write the following code in it:

<table cellSpacing="0" cellPadding="0" width="100%" border="0">
 <tr>
  <td width="780" bgColor="#e1e1e1" height="6" colspan="5">
    <p align="center"><font size="1" face="Verdana">© 2003/2004 @
       Euro 2004.org</font>
  </td>
 </tr>
 <tr>
  <td width="132" bgColor="#e1e1e1" height="6"> </td>
  <td width="10" bgColor="#e1e1e1" height="6"> </td>
  <td width="496" bgColor="#e1e1e1" height="6">
   <p align="center"><font size="1" face="Verdana">For any
    further information contact our 
    <a href="mailto:kutuji@sapo.pt">Webmaster</a></font>
   </p>
  </td>
  <td width="10" bgColor="#e1e1e1" height="6"> </td>
  <td width="132" bgColor="#e1e1e1" height="6"> </td>
 </tr>
 <tr>
  <td vAlign="center" width="780" background="images/Fundo03.gif" 
                                    colSpan="5" height="22"> </td>
 </tr>
</table>
</body>
</html>

You can see that we’re writing HTML code, and until now we’ve not written a single line of VBScript - for this ASP page. Still, if you need to fetch some data from database for your header, or footer, then you can have HTML, or script language on the same page.

This is how the footer file will look, before we put it as include:

You can also prepare some includes for left side, where normally we’ve site’s navigation menu - to allow our visitors to go to other pages, through the links, and maybe next time, I’ll show how to get links for the navigation menu – from a database. I’ve tried it, and it’s pretty cool, because we can insert and delete, or even update links throughout the whole site, without the need to change, in all pages - just change links in database, and our links will be updated without any trouble.

The third step is to prepare a small sample of links for the webpage, name it: menu.asp, and write the following code:

<div align="center">
<table border="0" width="100%" height="40" cellspacing="0" cellpadding="0"> 
<tr>
 <td width="100%" height="40" >
  <table border="0" width="100%" cellspacing="0" 
            cellpadding="0" style="border: 1px solid #949494; "> 
   <tr>
    <td align="center" valign="bottom"  bgcolor="#E2E8F5" nowrap height="21">
      
    </td>
   </tr>
   <tr>
    <td width="357%" align="center" bgcolor="#E2E8F5" nowrap height="16"  >
     <a href="teams.asp"><font size="2">The teams</font></a>
    </td>
   </tr>
   <tr>
    <td width="357%" align="center" bgcolor="#E2E8F5" nowrap height="16" >
     <a href="players.asp"><font size="2">The Players</font></a>
    </td>
   </tr>
   <tr>
    <td width="357%" align="center" bgcolor="#E2E8F5" nowrap height="16" >
     <a href="stadiums.asp"><font size="2">Our Stadiums</font></a>
    </td>
   </tr>                       
   <tr>
    <td valign="bottom" valign="bottom" bgcolor="#E2E8F5" nowrap align="right">
      
    </td>                                      
   </tr>
  </table>
 </td>
</tr>
</table>
</div>

It will look like the following image:

Sample screenshot

The last step is to set your first page, with these includes, and get a three part webpage, and you can repeat it in so many pages, and when you need to update anything in header or footer, just change one file, and your site will be updated instantly…. Create another page, name it default.asp, and write the following code in it:

<div align="center">
 <center>
  <table border="0" cellpadding="0" cellspacing="0" width="761">
   <tr>
    <td colspan="2" width="761"><!--#include file="header.asp"--></td>
   </tr>
   <tr>
    <td width="63" valign="top">
      <p><!--#include file="menu.asp"--> </p>
     <p> 
    </td>
    <td width="698">
     <blockquote>
      <font face="Verdana" size="2">Welcome to our site, about the next year's 
        biggest Soccer Event in Europe, this time organized by Portugal.<br>
        Here you'll find many kind of information, such as the team's which are
        going to participate, in this event, about their players, main stars,
        such as Figo, Zidane, Raul, and many others....</font>
     </blockquote>
    </td>
   </tr>
   <tr>
    <td colspan="2" width="761"><!--#include file="bottom.asp"--></td>
   </tr>
  </table>
 </center>
</div>

So, I used different files to make a webpage, by including them with the code:

<!--#include file="nameoffileToinclude.asp"-->

I think this is what you’ve to do, to create a real dynamic site because it will be really easy for you to update it.

I wrote this article because I’ve been creating websites for last 2 ½ years, and I know how difficult it is to update a website, on daily basis. You can create as many Includes as you wish, and put it on any ASP page, I can guarantee you that your website will load very fast also, because the include files are loaded very quickly… try it…and hope to hear soon from you.

This is a little bit tricky, because after all you’re creating a webpage, and so far no ASP code has been found. But you’ll realize the importance of it when you try it, and publish your site, and as I said, you can put any script in the middle of the HTML.

One little recommendation: nowadays it is very difficult to publish ASP page websites, but I’ve been using Brinkster, with excellent results…. Just visit it, and get a free account, and put ASP pages (read the rules first… there are no tricks, just some guidance and things to avoid), database (preference in DB folder) and all kind of images, .swf files (Flash), but no components in the free account….

I wish best of luck to all the visitors of this site, and especially to the readers of this article. I hope I’ve helped somehow the visitors of this excellent site, which I consider a great helping community for every kind of programmer.

Sorry for my poor English. Keep the good work up.

Note: The sample image and script files are in a .zip file, please download it.... or use your own images.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Kundan Narendra

Web Developer

Portugal

Member

I'm from Lisbon-Portugal. I started my career as Computer Instructor in 1998- presentely I'm teaching Operating Systems (all except Linux, Microsoft Office Applications (all), Networking and Internet technology - as user and as programmer- to create websites - using Frontpage. In the beggining I also teached VB 5.0, so I've good knowledge of programming, but still, I feel that I need to learn more & more.
I gave my first ASP basic course (duration of 60 hours), in March/April 2003. And then I found CODEPROJECT.com, because I was looking for basics ASP, to teach them, and nowadays it is very hard to find material about ASP for begginers, so I started writing this little articles, hoping somebody will use it to teach ASP.
Still I'm a ASP begginer and quick learner trying to improve by the experience gained by others, people who started more time ago.... and I learn from their applications, try to improve them, and try to use them for teaching ASP, step by step because they are very well commented...( that is good habit, after all)
Maybe if anybody wants to share their experience, and provide me with their work, I would appreciate, it will be used for Educational purpose only.
Thanks for reading about Me.

Article Top