The best example of auttosuggest filed I can instantly think of is Google. While designing dynamic forms I felt the requirement of such field. As I mostly use PEAR class and HTML Quickform to design dynamic forms in php. However in HTML Quickform there is autocomplete type but still there is no support for autosuggest. I googled a lot to get such support, but found it out in RFC of HTML Quickform. So I started working upon it. My first job was to found out a autosuggest Javascript code suitable for integration. I searched out an autocomplete javascript code by Beau D. Scott

The reasons why I selected Beau’s code is :
The code is simple to use but robust and has good documentation.
It uses standard JS library like prototype and scriptaculous.

Now having previous knowledge of integration of QuickForm and Jscalender I created the code for autosuggest class. This autosuggest class file contains constructor function, toHtml function which generates the HTML code for the field, getFrozenHtml function to return the autosuggest content in HTML and finally the registering process of the autosuggest type with HTML QuickForm. I put this autosuggest class name as autosuggestwce. View this wceautosuggest.php file.

To use this autosuggest field in HTML Quickform you need to have 3 javascript files as prototype.js, scriptaculous.js and autocomplete.js. Prototype Javascript is used for javascript framework, Scriptaculous for show and hide effect and AutoComplete is the main javascript functionality file. Among them scriptaculous.js can be removed if you don’t like to show effects, but you need to modify certain section in the wceautosuggest.php file. You also need to declare $GLOBALS['_HTML_QUICKFORM_AUTOSUGGEST_BASEPATH'] the global path defining variable for the javascript files path in the page where you will generate the form.

This autosuggest uses php script to populate values. The name of the php script has to be mentioned in the $attribute array for the key ‘fileref’.

If you are using DB_Table here is snippet of code

'user_name' => array(
'type' => 'varchar',
'size' => 255,
'qf_type' => 'autosuggestwce',
'qf_label'=> 'UserName:',
'require' => false,
'qf_attrs' => array(
'id' => 'user_name_autosuggest',
'autocomplete' => 'off',
'fileref' => 'getusersname.php',
),
),

If you are using QuickForm directly then here is the code snippet

$form = new HTML_QuickForm('someTest', 'get');
$form->addElement('autosuggestwce', 'username', 'UserName:', "array('id' => 'user_name_autosuggest', 'autocomplete' => 'off', 'fileref' => 'getusersname.php')");
$form->display();

Here is the code segment of php script

<?php
$UsrObj = new CLUsrChk($DBObj, 'hllqz_tblusers');
$SqlStatement = "SLECT user_name FROM ".$UsrObj->table." WHERE user_name LIKE ('".$_GET['s']."%')";
$UsrNameArray = $UsrObj->bd->query($SqlStatement);
echo json_encode($UsrNameArray);
?>

Here is the screenshot

However if you require the files for your reference please let me about that.

I was planning to do this post almost a month ago but I was busy with learning another Javascript framework jQuery. I am started loving it. Hope I will be able to post something about jQuery in near future.

Here is another example how your site got hacked. I found this instance very recently in Godaddy server. This type of site hacking is not very common. You may not be able to detect any specific web page infected if you search your site using Google Diagonestic tool for safe browsing mentioned in my earlier post – Iframe code injection. In this kind of attack none of your web pages get infected but your .htaccess file gets modified and becomes the main source of redirection to malware containing site. Let me show you an infected .htaccess file for example. 

Modified HTACCESS file used for hacking

Experienced developer can understand why this is so dangerous. Let me explain a little for the newbies. In case of apache web server configuration directives are described in httpd.conf file. Many cases this file can’t be accessed or modified due to security reasons. So to change some configuration directives for a specific website or its sub directory best solution is to use .htaccess file. To know further about .htaccess file and its functionality you can read .htaccess files. However URL rewriting, URL redirection, authentication are the important functionality .htaccess file are used for.

In the example htaccess file there are 3 sections. First line is for instructing the apache web server to put the rewrite engine on. This is first section. Second section goes from line no. 2 to line no. 8. This section is basically for condition checking on URL. Its checking if the visitors are coming from a website or page with URL containing the following words like google, aol, msn, yahoo, yandex, rambler or ya. NC means pattern checking will be case insensitive. OR means combines with other rule. Third section is in line no. 9. It says if any of the above pattern checking become true then it will redirect to the specified URL. Here R means redirection. Normally this generates HTTP response code 302 means moved temporarily. L means this is the last rule.

So the result is that if some visitor coming to the site from above specified search engine, they will be simply redirected to the malware site without understanding whats happening. So be careful if you come to know your site gotta hacked and youre unable to find out why then take a look at your .htaccess file.

Hey, if you are thinking that I am going to talk about a application or software, then stop thinking. Its not a sofware/code/appliaction or somthing like that. Its all about a successful event happened last Saturday on 8th August 2009. Its Kolkata Bloggers Meet 2009 organised by Webreps in Cafe Coffee Day, RDB Adlabs Sector V, Saltlake City.

A cozy moment

It was a wonderful evening with great atmosphere, good mass of perticipents, also good food and drink. I really enjoyed the evening and actually learnt a lot about blogging. Speeches from Aji Issac Mathew, Arun Agarwal, Vikas Kedia, Abhishek Rungta and Saptarshi Roy Chaudhury were really valuable inputs. Most interesting part was the interaction between bloggers. So many people exchanging ideas, thoughts upon such a topic called blogging. It is really unbelievable. I am damm sure that who ever wasn’t present over there missed a lot. More over I got chances to meet my old friends and colleagues specially Anand and Debasish. One thing I must say, I was almost spellbound when I saw Soham’s presentation.

Our anchor

Friends from Webreps

I don’t have any dought upon the anchoring capabilities of Kamanashish aka Mr. Doubt. Also I am very much sure that Anirudh, Saikat, Simul will be able to take the next meet in more bigger level. You guyes simply rocked. I like to thanks all the guyes and gals who were there and made the event successfull. Also thanks to Cafe Coffee Day for creating such a cozy atmosphere.

The pictures taken by my Nokia E51 are not so good, you should visit Yogesh’s post for wonderfull pictures of Kolkata Bloggers Meet.

The meet gave a tremendous effect on me as a blogger (back banchers is approtiate for me). Surprisingly I am able to make this within few hours . I will surely going to spend more time for my blog and … wait and watch.

After a long days I am back for blog post. Last one month I was very much irritated with the problem occurred in some of my client website. In a Sunday morning while I was sleeping one of my client ranged me and asked me to check her website as she got a mail from google that her website is spreading malware. I got confused as I had never faced this kind of problem. I started checking the website. But the antivirus in my Laptop didn’t allowed me to open the site at all. Then I decided to go to my office to check the situation.

In my office I checked the site thoroughly(OMG, I was able to open the site in my office). I found iframe code with hidden visibility was inserted in some pages. To be more specific index pages. I checked all the index pages in office PC, deleted the infected pages in the server and uploaded the pages from PC. Checked, cleaned all the html, php, temporary files. Almost near about afternoon I was back to my home while thinking how this happened.

Iframe Injected

Next Morning after arriving in the office I started checking the website and I found it was again infected by the hidden iframe. Site url was different as earler it was .cn and next day it was .ru I was upset about how to fix the things. Believe me or not in the last one month this site got infected 27 times. Our team had experienced the same attack for 5 more site. It was a horrible experience for us.

We had done lot of googleing to find out the preventive measurement. We found out lots of information regarding this. Some of them are good and some of them are misleading too. So here I like to point out some effective ones only.

1. You should have good antivirus installed in your system from where you access web. I am using avast free edition and it works fine for me.
2. Please check your websites on a regular basis. If you see if any web page with a blank section in the top them be almost sure that it is infected. Your antivirus should give you warning.
3. If you find any of your website get infected then start following the next steps.
4. First of all scan your machine with the antivirus. A boot time scan is more preferable.
5. Replace all the pages in the website using a local copy from your system. If the web site is too big to repalce then try to repalce all the pages with name index. Then check the site again.
6. Once the site is cleaned change the ftp details for the site and if possible do the same for the other sites whose details are kept in your ftp application.
7. Keep checking the site in a short span of interval.

You should also check your site in google too. If google find out some problem with your site they may have shown a warning message like “This site may harm your computer”. Another way to check your site is

http://www.google.com/safebrowsing/diagnostic?site=http://www.yourdomain.tld

If you find that google is showing the warning message for your site you can request Google for a recheck via Google Webmaster Tool. But you should check the site twice after cleaning and then request for review.

However I have designed a code in php for checking mainly the index pages in the website. Here is the code.

<?php
// page-checker.php
$path = ".";
$baseDir = basename(dirname($_SERVER['PHP_SELF']));
$WebPath = 'http://'.$_SERVER['HTTP_HOST'].'/'.$baseDir;
$content_pattern = "iframe";
echo "Checking files for IFRAME Infection<br/>";
$dir_handle = @opendir($path) or die("Unable to open $path");
echo "Directory Structure of $WebPath<br/>";
navigate($dir_handle, $path, '');
function navigate($dir_handle,$path, $WebPth)
{
global $WebPath, $content_pattern;
echo "<ul>";
while (false !== ($file = readdir($dir_handle)))
{
$dir = $path.'/'.$file;
if(is_dir($dir) && $file != '.' && $file !='..' )
{
$handle = @opendir($dir) or die("undable to open file $file");
$WebRef = $file.'/';
navigate($handle, $dir, $WebRef);
}
elseif($file != '.' && $file !='..')
{
if(preg_match('/^index+/',$file))
{
$ChcekFlag = FALSE;
echo "<li>";
echo "<a href='".$WebPath.$WebPth.$file."'>".$WebPth.$file."</a><br />";
$handle = @fopen($dir, "r");
if ($handle)
{
while (!feof($handle))
{
$content = fgets($handle);
if(stristr($content, $content_pattern))
{
$test = stristr($content, $content_pattern);
echo $test."<br />";
$ChcekFlag = TRUE;
}
}
}
fclose($handle);
if($ChcekFlag)
{
echo "<font color='red'>Infected</font><br />";
}
else
{
echo "<font color='green'>Clean</font><br />";
}
echo "</li>";
}
}
}
echo "</ul>";
}
?>

you can put this code in the root level of your website (in www or public_html or httpdocs). Browsing this page will show all the index pages with status of it.

Current I am working upon extending the code so that it can clean the infected pages automatically. Hopefully I will post it within few days.

Here are some tricky Sql statements that can be used in some specific cases. I figured them out in certain cases where I needed to do data manipulation directly on the database instead of writing script to accomplish them. I will describe them in case study style.

Case 1:

In one of my project there is a user table containing fields like userId, UserName, UserLoginID, Password etc. The UserLoginID field is basically the email address. Almost 95% of the email addresses belongs to a specific domain that is the domain of the project. Let’s say testproject.com. The table contains approx 12,000 records. In that project client decided to shift their main tld from .com to .org like testproject.com to testproject.org. Now they asked me to change the all the users’ email from .com to .org. That means user1@testproject.com to user1@testproject.org I needed to do this job within a shortest span of time. So I decided to run a sql command directly in the database to do the modification. A simple UPDATE sql won’t work in that situation as I needed to change some part of a field and also update statement shouldn’t affect those rows which do not contain testproject.com. So I tried with different types of update sql to do the job but finally derived the following one :-

UPDATE tblUser SET UserLoginID = REPLACE(UserLoginID, ' testproject.org', ' testproject.com');

The beauty of this statement lies in the usage of replace function. This replace function will synchronously select records having ‘testproject.com’ implementing functionality of the Where clause and generate the value to be set for the field UserLoginID as @testproject.org

Case 2:

This case was relatively easy. I need to find out unique entries from a table. It was not a hard job for me but still I googled a bit for this purpose. Now after some study I come to a position where I could do that using two different sql statements. They are :-

SELECT product_code FROM tblproductdetails GROUP BY product_code;

and

SELECT DISTINCT product_code FROM tblproductdetails;

While looking at the results I found both of them produces same result but the only differnce is Select DISTINCT does not sort the result set like GROUP BY does. So I wasn’t sure which one should used. SELECT DISTINCT vs GROUP BY – udbug | Google Groups helped me to chose the correct statement as Select DISTINCT. So I used the following :-

SELECT DISTINCT product_code FROM tblproductdetails ORDER BY product_code

Case 3:

This is also related with the earlier case of unique entries. This time I need to find out the ids which have duplicate entries. Almost the opposite job than the previous one. Well this statement also uses distinct but along with Group by clause gives the entries which have duplicates in the table. Here is the statement.

SELECT DISTINCT regn_id from tblstudentdetails group by regn_id HAVING count(regn_id) > 1;

This statement is very useful to find out entries which have duplicates in the tables.

Somebody asked me earlier how do I learn php and database? My answer was – learn the basic, find some real-life project to work for, take the challenge to complete it. You would face lots and lots problem while doing that. Don’t try to get rid of them but try to solve them. When you would finish the job you will understand the difference in you in terms of practical knowledge. I hope you all agree with me.

I was looking for a application to embed slideshow using pictures from picase web album. I found some plugins which can be used in blog or myspace. Some of them uses the picasa slide show url opened in a iframe or div. Then you will have less control on the slideshow as it is controlled by the slideshow application of picasa. But I required more control on the images from picasa.

I was looking for some application which will fetch/store all the images for an album in picasa and create a slideshow with more control on the images. I found nothing thats suites my requirement. So I started to design an application of such kind. On the basis of functionality I sub devided it into two major part. First is fetch the image related information for an album and store it if required. Second is display the slideshow using those image information.

In picasa you can view the pictures as set or individual but you won’t get actual picture name or its location. So I found now simple way to get the pictures name and their location. While searching more for such option I found there is a RSS feed for each album. The RSS feed provides image names and its location details. It makes my job easier. Now objective became to process the RSS feed to get the image related information. For this purpose I used XML-RSS package from PEAR. Here is snapshot of the code I wrote to process the feed:


<?php
require_once "XML/RSS.php";
//$FeedURL is the URL of the rss feed of an album in picasa
$FeedURL = "http://picasaweb.google.com/data/feed/base/user/wce/albumid/5331321673727336541?alt=rss&kind=photo&hl=en_GB";
$rss =& new XML_RSS($FeedURL);
$rss->parse();
$rssArray = $rss->getStructure();
$PicasaDataArray = array();
$InfoArray = array();
for($C=0; $C<count($rssArray); $C++)
{
if($rssArray[$C]['type'] == 'item')
{
$PicasaDataArray[] = array(
'title' => $rssArray[$C]['title'],
'image' => $rssArray[$C]['enclosures'][0]['url'],
'link' => $rssArray[$C]['link'],
'description' => $rssArray[$C]['description'],
);
}
elseif($rssArray[$C]['type'] == 'image')
{
$AlbumTitle = $rssArray[$C]['title'];
$AlbumPicture = $rssArray[$C]['url'];
$CreateDate = $MetaInfo['lastbuilddate'];
}
}
// this $PicasaDataArray contains all the picture related information of an album from picasa web.
?>


Now this $PicasaDataArray can be stored in files/database or can be directly used for the slideshow. While processing the feed by this I found the feed contain other information like title, description, link of the album, its last build date etc. So I modified the code a little more to store these information too. So the first part of my application is complete.

Now the second part – slideshow using $PicasaDataArray. For this section I didn’t tried to put my head to develop slide show application as I had already seen some very nice attractive slideshow application. They are also easy to use and configure. One of my favourite is Lightbox JS. Another good slideshow script is Highslide. Both of them are very nice and easy to configure. So I used one of them for my purpose. Here is another snapshot of code


<?php
require_once "XML/RSS.php";
//$FeedURL is the URL of the rss feed of an album in picasa
$FeedURL = "http://picasaweb.google.com/data/feed/base/user/wce/albumid/5331321673727336541?alt=rss&kind=photo&hl=en_GB";
$rss =& new XML_RSS($FeedURL);
$rss->parse();
$rssArray = $rss->getStructure();
$PicasaDataArray = array();
$InfoArray = array();
for($C=0; $C<count($rssArray); $C++)
{
if($rssArray[$C]['type'] == 'item')
{
$PicasaDataArray[] = array(
'title' => $rssArray[$C]['title'],
'image' => $rssArray[$C]['enclosures'][0]['url'],
'link' => $rssArray[$C]['link'],
'description' => $rssArray[$C]['description'],
);
}
elseif($rssArray[$C]['type'] == 'image')
{
$AlbumTitle = $rssArray[$C]['title'];
$AlbumPicture = $rssArray[$C]['url'];
$CreateDate = $MetaInfo['lastbuilddate'];
}
}
?>
<html>
<head>
<title>Slide Show :: <?php echo $AlbumTitle;?></title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<a href="<?php echo $AlbumPicture;?>" rel="lightbox[picasa]"><img src="<?php echo $AlbumPicture;?>" /></a>
<div style="display:box;">
<?php
foreach($PicasaDataArray as $ImageInfo)
{
echo '<a href="'.$ImageInfo['image'].'"' rel="lightbox[picasa]">'.$ImageInfo['title'].'</a><br> ';
}
?>
</div>
</body>
</html>

I made this code simple and easy to use. Though I have used xml-rss class from pear but it can be repalced by and standard xml-rss parser class. Experienced developer can modify this code or enhance its feature much more as per their requirement. If like to use this code or if you have any suggestion let me know about it via your comment.

In my earlier post I had discussed about the designing the liquid 3 column display layout. While developing the structure I had some problem with the column heights. Depending upon the contents length of those columns varies. I have declared the height property as auto in the css. I could have declared them with some specific pixel value to make the columns of equal length. But if you consider your pages to contain dynamic content generated by server side scripting then this technique may fail. Particularly in Internet Explorer the data part may be extended beyond the columns, which could make the structure awful. So I was in need to find some other solutions for that purpose.

I thought of using some JavaScript to make all the columns height equal. The algorithm to do this is very simple. Calculate the max height among three columns and assign it for all the columns. So first I introduced three different IDs for these three columns to access the properties of those columns using Javascript document.getElementById() method. So I changed the HTML code as follows:


<div class="container">
<div class="contentDiv" id="contentDiv">
<div class="contentDiv_left" id="contentDiv_left"><img class="LcolImgDiv" src="../images/c2.jpg" border="0" alt="" /></div>
<div class="contentDiv_mid" id="contentDiv_mid">
<div class="hD1">Header Text</div>
<div class="hD2">Header text 2</div>
<p class="hD3">The text….</p>
</div>
<div class="contentDiv_right" id="contentDiv_right">
<ul>
<li><a class="item1" href="director/index.html">DIRECTOR SPEAKS </a> <img src="../images/bullet1.gif" alt="" vspace="0" /></li>
<li><a class="item1" href="students/index.html">STUDENTS </a> <img src="../images/bullet1.gif" alt="" vspace="2" /></li>
<li><a class="item1" href="alumni/index.html">ALUMNI </a> <img src="../images/bullet1.gif" alt="" vspace="2" /></li>
</ul>
</div>
</div>
<div class="footerDiv">
<div class="footerDivText">Copyright text</div>
</div>
</div>


contentDiv_left for the left column, contentDiv_mid for the middle column and contentDiv_right for the right one. contentDiv ID for the container div for these 3 columns.

Then my job was to find out the maximum height of these 3 columns. First I used offsetHeight property for this purpose. Calculate the max height and assign it to all the 3 columns style.height property. While testing the code I found it was working fine with Internet Explorer. In case of FireFox or Opera or Netscape browsers the code was malfunctioning, more specifically it was unable to find out the height of those columns using offsetHeight property. So I started looking for bug. While doing that I found out offsetHeight is a readonly property of the DHTML Object model introduced by MSIE. But is not part of any W3C specification or technical recommendation. So incase of browsers like FF or Opera it won’t work. So I started looking for some alternate property to find out the heights of those columns. There are some properties which didn’t worked for me are element.style.height, element.style.max-height etc. I tried with
window.getComputedStyle(element,null).getPropertyValue(“height”).
As window.getComputedStyle method can be used to get the styles of an element that are not set using the style attribute or with JavaScript. But it didn’t work too. Finally I worked out with this method :
document.defaultView.getComputedStyle(element, null).getPropertyValue(“height”).
The document.defaultView returns a reference to the default AbstractView for the document. This document.defaultView is part of the DOM Level 2 DocumentView interface. This interface is not a mandatory part of Document Object Model Level 2 Core specification. DOM of IE doesn’t implement this but DOM in mozilla supports this. So I put a browser check and utilized the above method for browser like FF, Opera and offsetHeight propery for IE. Hence my code looks like this :


function checkBrowserComponent() {
var ua = navigator.userAgent.toLowerCase();
if(ua.indexOf('msie')!=-1) {
return "ie";
}
else if(ua.indexOf('firefox')!=-1) {
return "ff";
}
return "oth";
}
function maintainMaxColHeight() {
var defMaxHeight = 400;
var elmMain = document.getElementById("contentDiv");
var elmLS = document.getElementById("contentDiv_leftSingle");
var elmL = document.getElementById("contentDiv_left");
var elmM = document.getElementById("contentDiv_mid");
var elmR = document.getElementById("contentDiv_right");
var ua = checkBrowserComponent();
if(ua == 'ff') {
if(elmLS != null) {
var lh = document.defaultView.getComputedStyle(elmLS, null).getPropertyValue("height");
lh = parseInt(lh);
if(lh > defMaxHeight) {
defMaxHeight = lh;
}
}
else {
var lh = document.defaultView.getComputedStyle(elmL, null).getPropertyValue("height");
lh = parseInt(lh);
if(lh > defMaxHeight) {
defMaxHeight = lh;
}
var mh = document.defaultView.getComputedStyle(elmM, null).getPropertyValue("height");
mh = parseInt(mh);
if(mh > defMaxHeight) {
defMaxHeight = mh;
}
}
var rh = document.defaultView.getComputedStyle(elmR, null).getPropertyValue("height");
rh = parseInt(rh);
if(rh > defMaxHeight) {
defMaxHeight = rh;
}
}
else if(ua == 'ie') {
if(elmLS != null) {
var lh = elmLS.offsetHeight;
if(lh > defMaxHeight) {
defMaxHeight = lh;
}
}
else {
var lh = elmL.offsetHeight;
if(lh > defMaxHeight) {
defMaxHeight = lh;
}
var mh = elmM.offsetHeight;
if(mh > defMaxHeight) {
defMaxHeight = mh;
}
}
var rh = elmR.offsetHeight;
if(rh > defMaxHeight) {
defMaxHeight = rh;
}
}
if(elmLS != null) {
elmLS.style.height = defMaxHeight+"px";
}
else {
elmL.style.height = defMaxHeight+"px";
elmM.style.height = defMaxHeight+"px";
}
elmR.style.height = defMaxHeight+"px";
elmMain.style.height = defMaxHeight+"px";
}


I called this function maintainMaxColHeight() in onLoad within body tag.

After adding this script the page now looks like :

Now what’s the conclusion? I think in case of maintaining the equal height for the columns there are 2 options. First one is to put a fixed pixel value as height property in css for all the columns. Next one is implementing this JavaScript code. For this second option browser should support JavaScript (I believe most of the current browsers do so). In my opinion if a website is designed using liquid column display layout where all pages contain static information, first option will the best for that case. I always prefer to avoid unnecessary script execution for web pages as it reduces the page download and display time. The second option is best for websites containing dynamic information (like my project).

The project where I have implemented this layout is near to completion. Still it is not fully online I won’t be able to show you. I need to wait a little more to show you the live example.

I used to think myself as a coffee lover. I like tea and coffee either with or without milk. But my favorite is black coffee. Many people don’t like black coffee due to its bitter taste and I liked it for the same reason. Due to the reason easy to prepare, I take most of the branded instant coffee. Last week I had gone to a well known branded coffee shop in shopping mall with my friend. We were coming back to office after a client meeting and my friend suggested me to have a good coffee treat after the meeting. There we had a tempting experience which put me in a dilemma of continuing my love for coffee.

After we entered into the coffee shop waiter showed us a table to seat and presented the menu (like a weekly magazine). Without wasting our time by going through it we ordered two Espresso for us. I had Americano earlier and so I thought Espresso is something like that. After few minutes waiter served us our order. I  was little curious while looking at the items, 2 small cups containing 4-5 sips of dark black concentrated coffee along with small paper packs of sugar and few cookies. The quantity of coffee was quite low but I was impressed with the aroma coming from them. So I put little sugar which was colored brown from the pack, mixed it with a spoon and made myself prepared to have a great experience of coffee. I just sipped a little and spontaneously OMG came out from my mouth. It was so concentrated and so bitter I ever had. It seemed to me like I some horrible medicine. I was trying to have it as quickly as possible but it seemed to like one of the toughest jobs I ever had. Both of us were almost speechless while completing our cups. We paid the bill, came out of the shop. Form a nearby grocery shop we bought bottle of drinking water and almost emptied them. Then we took a car and rush back to our office. Rest of the day we were cherishing about the coffee we had.

Coffee - Espresso

Today I find out some good resource about coffee. I learned a lot about coffee and it’s ordering options. Now I am sure I won’t order Espresso, may be I will go for Espresso Macchiato or Flat White or Cappuccino or may be Caffé Mocha. I request to all the reader who likes coffee but have less knowledge about it please read Coffee Drinks Illustrated or similar kind of stuffs before you go for a coffee break.

I was busy with some of my projects. Few months back I was interested in liquid column layout structure. I had used this kind of layout in one of my project. This time I am going to discuss about the features of liquid column layout.

Earlier web page designing was highly dependent on HTML table structure. Common practice was to design a web page using HTML tags like table, tr, th, td, tbody etc. Web page designer used to design a layout in a graphic editor like Adobe Photoshop and slice the layout in small images in gif or jpeg format. Then create a table structure and insert those small images in different cells. This technique is very useful because putting those small rectangular images into different table cells, a web page can be designed having the same look and feel as layout image drawn in graphic editor. If not wrong till today this is the mostly used methodology to design web pages.

Let us review this designing procedure. I have described it in a very simplest way. Sometime designing a web page using the table structure based on graphical layout becomes a difficult job. If the graphical layout contains curves, color gradient then the complexity increases. I consider the most crucial part in this process is to design the table structure. Many times designer uses nested tables while designing the pages. Merging cells and rows are also widely used. Another important factor is how to put images in the table cells. Most of the cases img HTML tag is used, but sometimes inserting image as background works wonderfully.

So unless you don’t have a good knowledge of HTML table structure you won’t be able to work as professional web designer. In my early days in this profession I had to suffer with the complexity of nested table structure while designing pages.

In recent years I found there is a trend to avoid this procedure of designing web pages. There are certain reasons behind this change. First and foremost reason I think the size of the web page. Using nested table structure increases the file size of the web page, but many times it becomes unavoidable. I have also noticed a peculiar case of Internet Explorer while opening a page containing nested table. If the web page contains heavy images and huge text in nested tables, browser’s status will show “Done” while display of the page is not complete. IE shows “Done” status when display of the outermost table is complete. Another reason, editing the table structure in those web pages is quite difficult, that’s why people like to avoid this procedure. I found many times editing that kind of pages make the complex table structure incorrect. Support for other HTML tags having boxed or blocked like display such as div, layer, iframe etc by most of the browser is another important reason. Increasing use of CSS for applying style to provide a good look is also important. I found designer uses div tag supported with CSS instead of table to design web pages. They have produces pages which looks same as page designed using table structure and most importantly they have able to reduce the file size a bit.
Layouts like liquid column display, clean structure are the outcome of this increasing usage of div like tag instead of table tags in HTML. Though this new methodology is not very easy but I found there is a rapid increase in number who follows this.

Now here are the reasons why I was interested to implement liquid column display layout in one of my project.

• If I need to design those web pages using table structure, I need to use one outermost table containing 3 columns. Now to display contents like (text, photographs), I need to use nested tables in those columns. I knew that I was going to suffer with that particular problem in IE. Also my file size will be higher.
• There was another designing constrain that I can’t avoid using table structure. There was a background image that I had to display in the bottom portion of the page. Table structure wasn’t allowing me to do that.
• The other reasons are basically the advantages of using liquid column display. I don’t like to discuss it here. You can always search to know about it. Let me discuss how do I designed the page layout.

Here is a sketch diagram about the structure that I was going to implement. It contains three columns which aligned in center and below footer. The page should display centered align three columns along with white spaces in the left and right side of the page. To design this structure I have used mainly div tags along with proper styles defined in CSS.

Here is a structural overview of the HTML code in the web page.


<div class="container">
<div class="contentDiv">
<div class="contentDiv_left"><img class="LcolImgDiv" src="../images/c2.jpg" border="0" alt="" /></div>
<div class="contentDiv_mid">
<div class="hD1">Header Text</div>
<div class="hD2">Header text 2</div>
<p class="hD3">The text….</p>
</div>
<div class="contentDiv_right">
<ul>
<li><a class="item1" href="director/index.html">DIRECTOR SPEAKS </a> <img src="../images/bullet1.gif" alt="" vspace="0" /></li>
<li><a class="item1" href="students/index.html">STUDENTS </a> <img src="../images/bullet1.gif" alt="" vspace="2" /></li>
<li><a class="item1" href="alumni/index.html">ALUMNI </a> <img src="../images/bullet1.gif" alt="" vspace="2" /></li>
</ul>
</div>
</div>
<div class="footerDiv">
<div class="footerDivText">Copyright text</div>
</div>
</div>


Here is styles defined in css


.container {
margin: 0px auto; width: 927px; padding:0px; border:0px;
}
.contentDiv {
height: auto; width:925px; padding:2px 2px 2px 2px; margin-top:5px; background:#F9E6EC; border:0px;
}
.contentDiv_left {
padding: 0px 0px 0px 0px; float: left; height: auto; width: 35%; background-image:url(../../images/column_bg.gif); background-repeat:repeat-y; border:0px;
}
.contentDiv_right {
padding: 0px 0px 0px 0px; float: right; height: auto; width: 28%; background-image:url(../../images/right_column_bg.gif); background-repeat:repeat-y; border:0px;
}
.contentDiv_mid {
padding: 0px 0px 0px 0px; float: left; height: auto; width: 35%; background:#FFC6E2; margin-left:10px; background-image:url(../../images/column_bg.gif); background-repeat:repeat-y; border:0px;
}
.footerDiv {
height: 20px; width:925px; padding:0px 2px 2px 2px; margin-top:5px; margin-bottom:10px; background:#AD5B66; border:0px;
}


Now here is outcome of the effort.

A brief explanation about the structure.
To design the 3 column structure I have used nested div tags with proper styles. There is a outermost div tag having class name contentDiv. Within that I have put 3 more divs with class names as contentDiv_left, contentDiv_mid and contentDiv_right. For these 3 divs I have defined float property in CSS and width in percentage value to achieve liquidity. For all those divs I have used height property as auto in CSS. This helps div to grow in lenght depending upon the content put in it.

Though I have implemented the 3 column liquid layout, there is a problem in it. If you look at the above picture you can spot out the problem. Yehh, the three columns are not of equal height. Depending upon the content added in those columns, their lengths will get adjusted. This is due to height:auto; in CSS for the 3 inner divs. One solution is to specify a big value as height in CSS. Pages will be unnecessarily long containing small content in those divs. Will create another problem.

I have used a technique to overcome this problem. I will be discussing it in my next post and this time next post I will do very soon. Till then comments, suggestions and queries are always welcome.

Warm session greeting to all my friends, family members, co-workers, well wishers, supporters and last but wish to be least – spammers. Wish you all a very Happy New Year 2009