web design, cong ty thiet ke web

This tutorial was written by one of the great guys at HTMLForums. I read through this tutorial myself and found it to be very useful and easy to understand. Once I read through his tutorial and did a few examples for myself I sent Entimp an e-mail to ask if he wouldn’t mind me sharing it on this site, he kindly granted me the permission to use his tutorial and here it is, for all of you out there that wish to learn something about ASP.

“Server Side Includes” will be written in short as SSI for the rest of this tutorial.

It doesn’t matter if you are a HTML pro moving on to XHTML or a complete beginner to writing pages for the internet. The uses of SSI are many fold and work wonders for dynamic or static pages. For the purposes of this tutorial I will be dealing with static pages only. If you want to progress onto dealing with SSI in dynamic pages then you will have to follow your own nose. This tutorial will be long enough without dealing with dynamic page content.

So what do you need?

A working knowledge of HTML. How to link files through various levels of a given directory structure (ideally). A server that will provide server side permissions. In this case ASP. I am writing this for ASP users simply as that is where my experience resides. I am sure users of PHP will be able to pick the gist of this up and transfer the inherent contents to their choice of server side platform.

To transfer this knowledge to you with some ease we are going to take a generic static web site and show how it could benefit from SSI.

We shall call this fictional website “Biology for Beginners”. Biology for Beginners is a web site that provides resources for students of … guess what … Biology. Although it can provide an awful lot of information in different content sections we are only going to give it 4 for the purposes of this tutorial.

These areas are: Famous Biologists, Biological Links, Journal Articles and Biological Photo Gallery.

The site has a typical layout. A header area for the site logo with a content area below that with navigation on the left and finally at the bottom a footer for other information.

A link clicked in the navigation area would open in the content area. This could be done in 3 common ways. With an Iframe (inline frame), a HTML frameset, or as a new HTML document with navigation, header and footer as well. The HTML might look something like this (non frame version) :

This is obviously very simplified but it serves our purpose. Just pretend it has all the meta tags in there and all the content.

Frames are fine to an extent so why bother with SSI? Good question! Frames do have their problems such as search engines and disability issues. If you want high listings in search engine results these days you have to have content. Some search engines still have issues with reading the framed content. As for writing the new content for individual HTM documents this is time consuming especially if you have to change the format of the page. If you want to give your site a new paint job it can be soul destroying in editing each individual document in your site. This is where SSI comes to your rescue.

The next step is to understand how to use an SSI and how it works.

So what is a server side include?

A server side include is a way of requesting a given piece of information from your server and including it in the displayed web document. The information can be anything you want it to be. Plain text, markup language, scripts etc…

The page we are writing has lots of repeated areas of code and it wouldn’t make sense to write it out time and time again if we could avoid it. For now, Biology for Beginners only has one area that has unrepeated/unique code and that is the content section.

Logically we should try and break down the repeatable sections of code into sensible categories. Biology for Beginners can be broken down into these:

• Header
• Navigation content
• Code for center of table
• Content
• Footer

All of the above sections are repeatable sections of code other than the content section. Given that I had all these files pre-created I could publish a web page in seconds bar the content. The code you would write would look something like this:

Believe it or not that code would display a full and valid web page providing you have all the includes pre-written.

One of the first things you will notice is the extensions to the includes. You could use any of 3 extensions for SSI, being *.txt, *.inc and *.asp. I suggest you only use the *.asp extension and will good enough to tell you why.

To understand why, you need to know how a SSI is served up. This is going to be extremely basic in description. To do this I will compare an ASP page with a HTML page.

HTML page

A fairly basic web page written in HTML can be described as static file… when it is requested the HTML is sent you as it is and your browser defines how it is displayed on the screen. Once the browser has the code only then does it start to get the images. Images are not sent automatically with HTML file requests. It is also the same of HTML rendered via ASP…

ASP page

The ASP server looks at the includes first, builds the HTML from all the separate include files, sends it to your browser pieced together and the browser then requests the images.

An ASP page (Active Server Page) is very different. Any page that runs ASP must have an extension of *.asp rather than *.htm. The include files will also be called *.asp (or *.inc or *.txt). For this tutorial I am going to suggest you use the *.asp extension and not the*.inc or *.txt ones. You will find it a little safer to use the *.asp extension due to the way a server responds to files with *.asp. This boils down to a file called ASP.DLL… suffice to say I wont explain anymore other than that you for simple includes you don’t need to know anymore.

By giving the document an ASP extension you change the way a server deals with it. When you request an ASP file the server doesn’t send it to you but has a read of it first. It needs to read it first to understand what must be done to , where all the includes can be found and only then put the front end code together before sending it to you.

With our example of SSI’s you are telling the server to act like a warehouse. In essence it reads the code and gets the shopping list together… one of these, two of them and a few of these and then follows instructions to put it together. Only then does it send it to you in the correct order. When you view the source you will not see the includes but the code that it put together like a jigsaw from the individual includes.

Thus if you give your documents an extension of HTM or HTML the server would not know that it needs to read it first and then act on what it discovers. This doesn’t mean that you can’t write a normal HTML file and call it ASP. The server will still read it and discover that it has nothing to act on and just serve all the HTML to the browser. This should point out to you that no matter what ever is in your individual ASP includes your browser still understands HTML and not ASP. ASP is not a language but a way of serving the language. So remember what ever pieces of the jigsaw you use they must end up as valid HTML when they reach the users browser.

Here is the plain html we are going to cut up

As you will see the code above is broken into 7 areas, 4 red and 3 blue. The colours don’t mean anything other than to show where I am going to cut these files up to make the individual include files.

Chopping up the code

We need to chop this code up, save it with the correct extensions and then deploy it. It is wise to use names that make sense when you save these files as you are going to repeat the use of them. If you can come up with better names for yours files then credit to you, but these work for me. When saving them create a new folder called ‘includes‘ and save them all there so they are easy to find.

Save this as: meta_and_header.asp

Save this as: nav.asp

Save this as: before_content.asp

There is no save for the content area, yet anyway. I hope you saw this coming.

Save this as: after_content.asp

For the footer area there is no code either… yet!

Save this as: end_page.asp

Okey dokey… so we now have the includes we need. These are:

• meta_and_header.asp
• nav.asp
• before_content.asp
• after_content.asp
• end_page.asp

You saved these to a folder called ‘includes’ didn’t you? No? Then go do it now!

Back? Good! Then let’s make our fist web page that uses SSI’s. This will be an index page for the very simple website we are creating. Open your design tool of choice… notepad or DreamWeaver for example. Save this file as index.asp, remember the asp extension or the server will not read it before it gets sent.

Now you have a blank document, we need to add some includes. The first one will be ‘meta_and_header.asp‘, and then add the rest. It will look like this:

All things being equal, that I lead you down this strange path correctly and you did as I said… the instructions above saved as index.asp will render you a perfectly valid web page. Without the content or footer areas being empty that is.

That isn’t good is it? Well it is to an extent. I now want you save this file as my_template.asp so that when you add content all you need do is refer to this file.

So back to index.asp, open it and add some content of your choice.

Shock Horror the content goes here! You would have never worked that out would you! You can add what ever you want, plain text, or normal markup (html), even scripts.

You can do the same here for the footer region… alternativly you can create custom content, save it as an ASP file and serve it as another include. This seems to be awful lot of work for a simple page doesn’t it… well hang in there.

Now create the files:

• biologists.asp
• links.asp
• article.asp
• gallery.asp

Add the content to the template you made and save it as one of the above. Remember your content can be saved as another include, and not just written into a template page. Remember when writing your links you are directing the anchor at one of the files above and not the individual include files. I hope that makes sense.

Now send all your files to your ASP enabled server, remember you cannot run these to test from your home computer. Once uploaded you should be able to test them.

So there ya go! Hope this helps and puts a few of you on the path of more confusing and screwed up web design.