Multicolumn Layouts and Web Grids:

Jorge Blanco
Webmaster

Other articles written by this author

Multicolumn Layouts and Web Grids.
By Jorge Blanco

8. The dynamic approach.

Maybe because of the title you might be thinking that this is yet another method for constructing web grids, but it is not. This is only an alternative technique to obtain the modular construction a frame based website has, without relying on frames. This can be achieve by two methods, Server Side Scripting and Server Side Includes. Both ways you obtain the same result and the output is also exactly the same. Only the methods themselves are different.

First we will see Server Side Scripting, this includes all programming languages meant for this pourpose, being either PHP, ASP, VB SCRIPT, Cold Fusion, JSP or even CGI and Perl. Although the syntax will vary from language to language, in all of them there are a set of functions to include a file. Some functions allow the interpreter to parse the file as well, meaning that if the file contains some executable code, it will get executed. I will only put an example in PHP, but then again, the process is almost the same in every other language. For this I will use the previous layer example.

<div id="grid"> <!--Main grid holder -->

<div id="header"> <!--Header Holder-->

<?php
include("header.html"); /*Since the header doesn't change in all pages, always add it.*/
?>

</div>
<div id="body"> <!--Body Content Holder-->

<div id="left_bar"> <!--Left Column Holder-->

<?php
$left = isset($_REQUEST['left'])?$_REQUEST['left']:"left.html"; /*Using a three operator conditional to select the proper file*/
include($left); /*Include the file which path is stored in the $left variable*/
?>

</div>
<div id="content"> <!--Content Holder-->

<?php
$content = isset($_REQUEST['content'])?$_REQUEST['content']:"content.html"; /*Using a three operator conditional to select the proper file*/
include($content); /*Include the file which path is stored in the $content variable*/
?>

</div>
<div id="right_bar"> <!--Right Column Holder-->

<?php
$right = isset($_REQUEST['right'])?$_REQUEST['right']:"right.html"; /*Using a three operator conditional to select the proper file*/
include($right); /*Include the file which path is stored in the $right variable*/
?>

</div>

</div>
<div id="footer"> <!--Footer Holder-->

<center>
Jorge Blanco 2005&copy; All Rights Reserved.<br>
All content is property of its respective authors. Partial or total reproduction
without the author's written permission is strictly forbidden under any circumstances.
</center>

</div>

</div>

First of all, let me say that the above code is a real security threat, it lacks at least one security measure to avoid the users from exploiting the code. It should be noted that you should never take any user input directly into your code, the fatal flaw of this script is that it takes ANY value for the $left, $content and $right variables and includes them. Therefore if the user decided to include /usr/root/mail/pwd as the left variable it would be included, thus revealing some information that was supposed to be private. A more secure method would be to check for certain numbers and then include a file depending on the number, i.e. if($id == 3) include("myFile.html");. That would definitely beat the exploit since the user can no longer specify any custom file, but only a few selected files will ever be output.

The above code includes the file header.html by default, then check if the left variable is set and includes that file, otherwise it includes left.html by default. The same goes for the content and right variable. FInally the footer is already written, since it is only a tiny snippet of code it can be avoided the hassle of having to include it. As you can see, this method gives you the possibility to use independent files and mix them together in a webpage. Much like frames, you build the file separately and then include it with a script in the main page. This cuts down the development time and also makes the edition easier.

The output of the above code would probably be something like:

<div id="grid"> <!--Main grid holder -->

<div id="header"> <!--Header Holder-->

<div id="logo"> <!--Logo Holder-->

<a href="index.html"><img src="path/to/your/logo.gif" width="100px" height="100px"></a>

</div>
<div id="headline"> <!--Headline Holder-->

<img src="path/to/your/banner.gif" width="600px" height="100px">

</div>

</div>
<div id="body"> <!--Body Content Holder-->

<div id="left_bar"> <!--Left Column Holder-->

<ul><li><a href="#">Home</a></li>
<li><a href="#">Sections</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li></ul>

</div>
<div id="content"> <!--Content Holder-->

&nbsp;

</div>
<div id="right_bar"> <!--Right Column Holder-->

&nbsp;

</div>

</div>
<div id="footer"> <!--Footer Holder-->

<center>
Jorge Blanco 2005&copy; All Rights Reserved.<br>
All content is property of its respective authors. Partial or total reproduction
without the author's written permission is strictly forbidden under any circumstances.
</center>

</div>

</div>

Which is the same that was achieved with the manual coding. So then again, why would you go through the whole scripting process just to get the same result as if you didnt use it? The answer is simple, because although the output can be similar, the flexibility of this method is much greater. For example, let's say that the above page is generated when you go to the URL http://www.domain.com/index.php, but if you put http://www.domain.com/index.php?content=links.html the output could be totally different. This is just the tip of the iceberg when regarding to server side scripting, but it is all we need for this topic.

<Previous Index Next>
Rating: 3

Affiliates





Spoono

Join Us