Chromic Design » Tips and Tricks

Setting Up Perl and CGI For Wamp Server WAMP(P)

admin — Tue, 05 May 2009 21:04:36 +0000

I work on Perl and CGI recently for my college project and so I decided to write a few steps on setting up Perl and CGI with Wamp Server. I hope this might be useful.

Step1:
First you need to download Wamp Server from www.wampserver.com and install Wamp Server on your machine. The default installation directory is ‘C:\wamp” and here I am using the default options for installation. To complete the installation you have to set the host name for your mail server and your email address, here you can leave the default option again. That will do no harm.

The current Wamp Server will install Apache 2.2.11, PHP 5.2.9-2 + PECL, MySQL 5.1.33, SQLitemanager and PhpMyadmin.

Step2:
Now you have to download ActivePerl (currently 5.10.0) from www.activestate.com and install it. The default installation directory is “C:\Perl“, but for simplicity and ease of use I use different directory. I create a new folder name “perl” inside “C:\wamp\bin“. So I install Active Perl in “C:\wamp\bin\perl” directory. The next thing you need to do is configure the Apache web server to execute Perl and CGI script.

Step3:
This is the most important part here. You need to edit the Apache configuration file. Now go to “C:\wamp\bin\apache\Apache2.2.11\conf” directory and open “httpd.conf” file. Edit the httpd.conf file as below.

1. Inside httpd.conf, look for the line that says ““, just a few lines below this you’ll find the line that says “Options Indexes FollowSymLinks“. Add “Includes ExecCGI” in the line just next to FollowSymLinks, thus it look like this

Options Indexes FollowSymLinks Includes ExecCGI

This will enable CGI script inside your www folder.

2. Now look for the line “AddHandler cgi-script .cgi“, this line is commented out. You need to enable this by un-comment this line, to do that remove the # character at the beginning of this line. This will add handler for files with .cgi extension. If you want to use .pl file extension in your server add “AddHandler cgi-script .pl” just below the above line. Now you will be able to execute CGI and Perl script with .cgi and .pl, extension.

Lines to add

AddHandler cgi-script .cgi
AddHandler cgi-script .pl

3. To add directory index file, look for the line “DirectoryIndex index.php index.php3 index.html index.htm“. Add index.cgi and index.pl in this line.

Lines to add

DirectoryIndex index.php index.php3 index.html index.htm index.cgi index.pl

Alternative: If you do not want to waste your time doing the above 3 steps, you can download the edited configuration file httpd.conf here. Replace the one inside your apache directory with this one.

Step4:
Your server is now configured and ready to run perl and cgi script. Next thing you might need to do is to configure perl to use mysql database. You need to download and install mysql driver to enable database connection through your perl script. You have to grab the driver from the ActivePerl package repository. However, mysql driver module is not available in the default ActivePerl Package Repository. So, you need to add additional repository and install from that repository. Follow the steps below:

1. Open command prompt [type cmd in run], then type “ppm repo add uwinnipeg” and press enter.

2. After the “uwinnipeg” repository is added successfully, you can install DBD-mysql by typing this command “ppm install DBD-mysql” and hit enter.

Note: The ActivePerl default package repository contains DBD-mysqlPP module. If you install that one, you will get an error in your SQL SELECT query and especially when you use the WHERE clause. Your localhost will hang if you run this kind of query with the WHERE clause, so to get it work you need to install the package that I mentioned above only.

Equal Height Division Using Javascript And CSS

admin — Fri, 27 Mar 2009 08:47:46 +0000

This technique is really simple. Having equal height division in your design is sometimes necessary to maintain consistent look and feel on your layout. You can use this technique to make your sidebars equal height, or to make your content area and the sidebars equal height.

Get The Source Code: Without Jquery With Jquery

Step 1:
Create an index.html file for your layout. I create an example html layout for this article.




    
    Equal Height Division Using Javascript and CSS
    
    



    
        
            
                The Main Content
                The Main Content
                The Main Content
                The Main Content
                The Main Content
            
            
                The Sidebar Content
                The Sidebar Content
                The Sidebar Content

STEP 2:
Now we will create a stylesheet for the layout we just created. Let’s name it as style.css.

/*The Styles*/
p {
    text-align:center;
    font-family:Georgia;
    font-size:18px;
    font-variant:small-caps;
    color:#555555;
    padding:0;
    margin:20px 10px 20px 10px;
}
a {
    color:#FFFFFF;
    font-size:11px;
}
.outer {
    background:#FFFFFF;
    margin:0 auto;
    width:800px;
}
.inner {
    width:100%;
    float:left;
}
.main {
    background:#00A2FF;
    width:500px;
    float:left;
    border-right:1px solid #000;
    margin-left:-1px;
}
.sidebar {
    background:#EEEEEE;
    width:300px;
    float:right;
}

STEP 3:
Finally, here comes the javascript code that controls the height of the divisions and makes them equal height.

var DivOneClassArr = new Array();
var DivTwoClassArr = new Array();

function getElementsByClassName( ClassName1, ClassName2, obj ) {
    if ( obj.className == ClassName1 ) {
        DivOneClassArr[DivOneClassArr.length] = obj;
    }
    if ( obj.className == ClassName2 ) {
        DivTwoClassArr[DivTwoClassArr.length] = obj;
    }
    for ( var i = 0; i < obj.childNodes.length; i++ )
        getElementsByClassName( ClassName1, ClassName2, obj.childNodes[i] );
}

function grabtheclass() {
    DivOneClassArr.length = 0;
    aryClassElements2.length = 0;
    getElementsByClassName( 'main', 'sidebar', document.body );
    for ( var i = 0; i < DivOneClassArr.length || i < DivTwoClassArr.length; i++ ) {
        if(DivOneClassArr[i].offsetHeight > DivTwoClassArr[i].offsetHeight) {
            DivTwoClassArr[i].style.height = DivOneClassArr[i].offsetHeight +'px';
        }
        else if (DivOneClassArr[i].offsetHeight < DivTwoClassArr[i].offsetHeight) {
            DivOneClassArr[i].style.height = DivTwoClassArr[i].offsetHeight +'px';
        }
    }
}

Analysis: This script calculate the height of the divisions taking their class name in the function grabtheclass(). The division with more height is selected by comparing the height of the two divisions. If division div1 for instance is having more height, then the other division say div2 with shorter height will be assigned a new height equal to the height of div1. This is what the code does to make them equal height.

Check the demo here

STEP 4 (Optional):
This step is optional only. Here instead of using the above javascript code, jquery library is used. Then the code below can be used to get similar result. To use this javascript code, you need to import jquery library. You can get jquery library here Jquery.com.

Add the jquery library file in the head section of your html.

and you can remove the onload attribute in the since this is not necessary anymore if we use jquery.

Now create a file named javascript.js or use the one you created before and use the code below.

$(document).ready(function(){
    if($('div.main').height() > $('div.sidebar').height())
    {
        $('div.sidebar').css({
            'height':$('div.main').height()
        });
    }
    else if($('div.sidebar').height() > $('div.main').height())
    {
        $('div.main').css({
            'height':$('div.sidebar').height()
        });
    }
});

Check the demo here

Floating DIV Above Embedded Flash Object

admin — Sun, 22 Mar 2009 13:36:55 +0000

This simple tips will help you make your division float above flash object or flash player embedded on your website. When you embed a flash object or flash player on your website, the flash object will take the highest number possible z-index by default and all the other division layer will appear below the flash object. Actually this property of embedded flash object is quite useful in most cases. However when you want some text or division to appear on top of your flash object, you need this tips to fix that issue. You have three options to fix this floating issue.

First option is to compile/recompile your flash object with the parameter ‘wmode‘ value set to ‘opaque‘. However, in most cases, we normally get a precompiled flash object rather than the source flash file. In such cases the second option will be more suitable. Second option is to add a parameter in your flash object as shown in example below

Third option is to add an attribute ‘wmode’ with value set to ‘opaque’ in the object file. After performing any one these, your flash player or flash object will float below

having higher z-index.