Cohesive Web

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’.

Continue reading ‘QuickForm and AutoSuggest’ »

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.

Continue reading ‘The KBM-09’ »

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

Continue reading ‘Iframe code injection’ »

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 :-

[code lang=”sql”]
UPDATE tblUser SET UserLoginID = REPLACE(UserLoginID, ‘ testproject.org’, ‘ testproject.com’);
[/code]

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

Continue reading ‘Tricky Sql Statements’ »

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:

[code lang=”php”]
parse();
$rssArray = $rss->getStructure();
$PicasaDataArray = array();
$InfoArray = array();
for($C=0; $C $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.
?>
[/code]

Continue reading ‘Picasa web album slideshow – Development guide’ »

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:

[code lang=”html4strict”]

Header Text

Header text 2

The text….

• DIRECTOR SPEAKS
• STUDENTS
• ALUMNI

Copyright text

[/code]

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.

Continue reading ‘Liquid Column Display Layout – Part II’ »

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.

Continue reading ‘Liquid Column Display Layout’ »

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 🙂