Making Websites Without Serverside Scripting

Here is an interesting task: make a semi decent website, which is pretty, and maintainable without using any server side scripting or server side includes. In other words, we want a website that has a header, footer, a navigation sidebar and layout modeled via css without doing any copying and pasting. The above mentioned layout elements should only appear in a single place for ease of maintenance. Why would someone need something like that?

Well, the Novel Netdrive service my school uses has weird issues with php. At one point it was allowing me to use it, then it stopped, then it was working again. Needless to say, I couldn’t rely on it. What I needed was a set of fairly static pages where I could post some resources and tools for my students.

Naturally I wanted the site to look presentable and I hated the idea of copying and pasting the header, footer and the navigation sidebar all over the place. So I opted for some clever client side scripting. I started with something like this:

   
      
      
      
      
      
   
   
      

         
      
      

         
NAVIGATION
         

            
Home Page
            
Foo
            
Bar
            
Baz
         
      
      

         
      
      

         
      
   

Note that the above page is completely static, and the links are fully functional. This is intended, because I wanted it to degrade gracefully. If someone visited the site using one of the many text based browsers they would be able to navigate it without any problems. Not that my students would ever use one of these, but I don’t like the idea of depending on Javascript for crucial navigation without providing this sort of fall back.

What I could do next was to add a click event to every links with the class of “aj” and use an asynchronous call to load an external HTML page into the “content” div. Unfortunately, that would mean that all the pages would have the same URL. Any attempt to link to pages foo, bar or baz would fail miserably. Furthermore, the back and forward button functionality would be broken.

Naturally, loading pages into “content” div is what I really wanted in the end, but I also needed a unique URL for each of them and a working back button. That meant I needed to approach the problem a bit differently.

I decided to rewrite all the relevant links at runtime so that they would point back at our index.html page:

$("a.aj").each( function() {
    h = $(this).attr("href");
    $(this).attr("href", "/?p=" + h.substr(0, h.indexOf(".")));
});

I used JQuery because it makes stuff like modifying certain selection of links incredibly easy. If the page loaded and Javascript was enabled the links would get quietly changed to this:

Foo
Bar
Baz

Note that I could have used foo.html in the query string but I didn’t want to. The URL’s were ugly as it was, so I decided to keep them short and as simple as possible. So the .html suffix was dropped for the sake of clarity. Next step was evaluating the query string and actually loading the pages:

 $(document).ready(function() {
   page = getQueryVariable("p");
   if(page)
      $("#content").load(page + ".html");
});

I skipped the link rewriting code in the above for clarity but it should theoretically be somewhere in that anonymous function block. The function getQueryVariable can be defined as follows:

function getQueryVariable(variable) 
{
   vars = window.location.search.substring(1).split("&");
   for (i in vars) 
   {
      pair = vars[i].split("=");
      if (pair[0] == variable) 
         return pair[1];
   }
   return false;
}

It should be self explanatory. Grab the query string, split it on the & character, iterate through the list and return the value of matching attribute, or false if none is found.

With that framework in place, I created foo.html, bar.html and baz.html files as plain HTML documents without a defined stylesheet. Loading it into the “content” div in index.html would force the styles defined on that page to be used on the imported content as well. Visiting the pages directly might be a bit jarring because they would be very plain but it shouldn’t be a huge issue.

Anyone visiting the page with Javascript enabled browser would see the “fixed” links that would cause the page to reload and import the desired content from the external file. Browsing without Javascript would yield links leading directly to the pages.

The only time the site wouldn’t work properly was if someone followed a link or a bookmark which in the /?p= format but with Javascript disabled. They would end up on the homepage without any indication of what happened. That sort of behavior could be a bit annoying but I’m not sure how to fix it at this point.

Other than that, the few lines of Javascript should save you tons of copy-pasting, and shave many hours from future maintenance. There is of course possibility that this method could be exploited and. I tested few obvious things and I couldn’t get it to load any remote web pages in any way. It doesn’t mean it is not possible so be aware that someone could potentially cause your page load external content with a GET request formated just the right way. It’s nowhere near as bad as that silly ny.com page.

[tags]javascript, jquery, html, server side scripting, web design[/tags]