ssi
First you’ve never heard of it, then you keep hearing about it but don’t know what it is and wonder if it would be of any importance to you. Then you check it out and find that there is a whole world of people that have known about it for years. And you wonder how you could have lived your life so far without it. That’s how I felt when I discovered css last year. It was a real eye opener and now I’m a convert and love css. Now I’ve discovered ssi.
If you’re new to the whole game then you’ll also be a bit in the dark as well. But I had heard about it last year but had never really bothered to check it out. But this year when I was researching various web ideas I kept coming across the term, especially when authors stated in forums and blogs that css and ssi go hand in hand and are two of the web designers most powerful tools. So I was curious.
SSI is an abbreviation of the term server side include. Ok, so far I understand that it has something to do with the server. Or rather something that happens on the server. And include? What’s included? Batteries? Well, actually anything you like. It’s as simple as that. You can include any type of file on the server side of things. Code fragments in a file of any extension you like. So that’s what it means, but how is it useful?
Well, if you know about css then you know that it can be in the page itself or referenced as an external file. The beauty of having an external stylesheet is that one sheet can govern the look of many pages and only that one file needs to be updated in order to update the look of many pages. But what about updating the content itself? For example the footer navigation. With a site that contains even ten pages you would have to edit each page and then add one line of code to each page.
But what if you had fifty pages? What a pain. Wouldn’t it be great if you could simply reference the footer part of the page and then just update that one file and then the footer would be updated on all your pages. Well that’s how ssi works. You cut out the part of the code that is the footer navigation, say an unordered list contained in a div called footer. In it’s place you can place one line of code that will then reference that file which you could call footer.html or any other extension like footer.php.
So how is it done? What does that one line of code look like? Well there are a couple of ways to do it and I went for the php version as I want to learn php at some point anyway. And I have been editing php files in order to update the look of my blog. So it looks like this:
<?php include("file.php");?>
Remember, you don’t have to call it file.php it could be file.html as well or anything else. Includes can be nested as well, so your file.php could have a reference to another file. Make sure you have the correct path as well. Such as, inc_files/footer.php.
But you have to do few things before it will work. First of all php needs to be installed on the server. Because the blog uses php files I figured that php was already installed on the server so I didn’t need to worry about that. But you also need to change the extension of your existing file. If it was called page.html, then you need to add that line of code where you want your file to be included but now you have to call your file page.php. Because you have one line of php in there it’s now a php file. If you don’t change the extension, the server will probably ignore that line of code. There are ways to configure the server to read and execute it, but I’m not going to go into it here.
What else? Now you need to update all the links. So, page1.html becomes page1.php and so on. It’s just as much of a pain if you already have an existing static site to put these include lines in there. But then if it’s a site that will need updating again at some point then you’d have to go through that same process again. The best is to do it when you start work on a site. So you would cut out your header, footer and navbars and save them as include files. Cool or what. Now you can see how css and ssi go hand in hand, each page of your site just references them for it’s look and repeating content.
SSI vs dreamweaver templates. With dreamweaver templates you have two or three templates that govern your site and you assign only the non–repeating elements as editable regions. It’s fairly easy to update your site by updating the templates. So how is ssi better than that? Well, here are a few reasons against using dreamweaver templates.
- You get that template code in every page, so everyone looks at your source can see you’ve used them
- Those lines increase your page weight
- You still have to upload all the new pages, but with ssi only one file
- Dreamweaver doesn’t always do it’s job and can screw up the template
One line of code and your job gets so much easier. It’s worth it, it really is worth it.