Chromic Design » admin

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.

Renaming Multiple MySQL Tables Within A Few Seconds

admin — Sat, 28 Feb 2009 20:23:46 +0000

This can be used to rename the prefix or suffix of a table, but not the whole table name.

I came up with this simple tips on renaming multiple tables in your MySQL database within a few seconds.Recently, I was googling on how to rename multiple tables at once in MySQL Database. I came across few tips but they didn’t meet my needs. So I came up with this simple way of doing it.

First, you need to have a text editor having ‘Find and Replace‘ feature. Almost every text editor available will be having this feature. I am using Notepad++ for the text editor. The next thing you need to do is to export your database having the tables you need to rename. Export your database to an SQL file and save it on your computer. Now, fire up the text editor of your choice and open the SQL file you downloaded just now. Click the Find and Replace option from your text editor. Find your table name and then type the table name in the ‘Find‘ field, and type the replacement string in the ‘Replace‘ field. Then click ‘Replace All‘ and save the SQL file. For example, If your table name is tbl_mytable, you can find the string tbl_ and replace it with tl1_. The find and replace procedure might be different with different editors but they are likely to be similar.

Now, go to phpMyAdmin and drop or backup all the tables inside your database. Import the SQL file you have just edited from your phpMyAdmin and now you are good to go with your tables having new name.

RSGallery Simple Tweak

admin — Fri, 18 Jul 2008 10:11:02 +0000

RSGallery is one the most popular and most reviewed Photo Gallery extension for Joomla CMS. This is a very simple tweak but a very useful one for people who don’t have knowledge about even simple MySQL query structures. And I hope it might be useful for RSGallery users who might not have extra time to look into the code and tweak around the MySQL query. So, here I provide a simple tweak in the RSGallery module to show the Latest or Recent Image from the RSGallery galleries. Using this module you will be able to show all recent images from all the galleries and you can also exclude a gallery from being displayed in that module.

There can be a case where you want to show latest images from one gallery only instead of having all the latest images from all galleries being listed there. For this purpose I made Candid Photos module. Here you can specify which gallery to be used. You will need to put the Gallery ID of the gallery that you want to use for candid photos. Then in the Candid Photos module, recent images from the gallery you specified only will be displayed.

Now here are the two ready made modules for RSGallery. You can download it and modify it as per your requirements ( If you find it useful, please link back ).

The Modules:

Latest Pictures Module [ mod_latest_pictures.zip ].
Latest Pictures Module Extended [ latest_picture_module_extended.zip ]
Candid Photos Module [ mod_candid_photos.zip ].

Installation:

Download and install it through the Joomla Installer.
Go to Module Manager and enable the module and select the module position of your choice.
Change the CSS styles of the module to your choice.
You can select the number of photos to display.
Select the gallery to display ( for Candid Photos module ).
Select the gallery to be excluded ( for Latest Pictures module extended ).
The rest you can do it.

WordPress 2.6 Released.

admin — Thu, 17 Jul 2008 10:47:49 +0000

New version of wordpress is released few days back. The new wordpress release brings few new useful features. Some of the new features and improvements were listed below

Word count: To get the number of words in th post.
Image captions.
Bulk management of plugins.
A completely revamped image control to allow for easier inserting, floating, and resizing. It’s now fully integrated with the WYSIWYG.
Drag-and-drop reordering of Galleries.
Plugin update notification bubble.
Remote publishing via XML-RPC and APP is now secure (off) by default, but you can turn it on easily through the options screen.
Full SSL support in the core, and the ability to force SSL for security.
You can now have many thousands of pages or categories with no interface issues.
Ability to move your wp-config file and wp-content directories to a custom location, for “clean” SVN checkouts.
A number of proactive security enhancements, including cookies and database interactions.
Stronger better faster versions of TinyMCE, jQuery, and jQuery UI.

You can find more details in wordpress.org.

I’m happy to announce that version 2.6 of WordPress.org is now available, almost a month ahead schedule. Version 2.6 “Tyner,” named for jazz pianist McCoy Tyner, contains a number of new features that make WordPress a more powerful CMS: you can now track changes to every post and page and easily post from wherever you are on the web, plus dozens more…
www.wordpress.org

Firefox 3.0 Released

admin — Thu, 19 Jun 2008 01:03:44 +0000

Firefox 3.0 was recently released to be the fastest, most reliable and powerful browser again. The new version of firefox will include many new features like appearance, security and bug fixes from previous release. Check the official Mozilla website for more details and download, or here is the download link.

Program Size : 7.8MB
Version : 3.0

There is one small reason why I want to make this post. In the previous post I wrote about the Word Wrapping in firefox, but the fixes I have given there is no longer necessary if you upgrade to Firefox 3.0. The word wrapping is now automatically taken care of in Firefox 3.0.

If there is only Firefox browser in the Web, one third of a web developers work will be reduced.

WordPress Blogroll Icon

admin — Thu, 19 Jun 2008 00:40:12 +0000

After a long pause I came back with this tweak for wordpress. Here it comes, since I work a lot with wordpress these days.

I came across this wordpress tweak when one of my client wants a Blogroll Icon to be displayed along with the blogroll link. So here’s the steps on ‘How to show a Blogroll Icon’ in wordpress blog. Originally, what you have with wordpress blogroll is a list of links to websites and blogs. So to show image beside the blogroll link (most probably on the right side of the link text), perform the following steps.

Step1:
First you need to get the plugin ZocPowerblogroll from his website. Download the plugin and this plugin will do most of the work for us.

Step2:
Before activation of the plugin, you have to put this funtion in your ‘sidebar.php’. Placed this function

in your sidebar where you want the blogroll to appear. If your template is widgetized, you need to keep this function outside of the widget ‘if’ condition, place before or above this ‘if’ condition

Step3:
Load the plugin in the plugin directory, activate the plugin and you are ready to go. This plugin is compatible upto wordpress version 2.5.x. So you will not have any problem here. You may want to change how the blogroll is displayed by adding simple CSS code in the ‘style.css’.

Step4:
Now, to show the icon in the blogroll, you need to have the icon files. You have two options, you can upload the icons directly to your server in your wp-content directory or you can get the links of an icon from freeicon websites. Now, you need to include the link of the icons in your blogroll links.

Step5:
Log in to the admin panel and go to Manage»Link (for wordpress 2.5 and later) or Blogroll in wordpress 2.3.x. Click on the edit blogroll link option, now you have the edit-link page, expand the advance tab and you will find an input form for ‘Image Address’. You have to paste the link here. Now save the blogroll link and check your blog or website again, the icon will appear on the right side of the link you have just edited.

The modification:
Now, you have the icon appeared on the blogroll, but there is one simple modification I made on the plugin. In the input form for Image address, the plugin originally accept or allow only the hyperlink like http://www.sitename.com/iconfilename for the icon location. If you upload your icon file in the wp-content directory (/wp-content/icons/), you cannot specify the path of the icon like this (/wp-content/icons/iconfilename.xxx) for the ‘Image Address’ using this plugin. So the following modifications have been made. It’s a simple modification, first find the following lines in the plugin file (zoc_powerblogroll.php).

if (substr($book->link_image,0,4) == 'http' && $showLinkFavicon)
echo "link_url . "\"> link_image . "\" alt=\"" . $book->link_name . " website\" /> \n";

After you find this lines, make the modification as below, or replaced the above lines with the code below or download the modified plugin here.

if (substr($book->link_image,0,4) == 'http' && $showLinkFavicon)
echo " link_image . "\" alt=\"" . $book->link_image." website\" /> ";
elseif ($showLinkFavicon)
echo " link_image . "\" alt=\"" . $book->link_name . " website\" /> ";

Word Wrap In Firefox

admin — Mon, 19 May 2008 00:46:42 +0000

I came across this problem in Firefox when I put a long link in my post. When there is a long link in your post, Firefox cannot display it properly. Firefox cannot wrap it within the content division and the link will flow out of the division or the last part of the link will not be visible in the post area. However this problem is not there in Microsoft Internet Explorer since word wrap is Microsoft proprietary extension to CSS which is introduced in IE 5.5.

Here the reason why I talk about link specifically is that there cannot be any spaces within a link, so we need word wrap here, that is not taken care in Firefox. When we write a normal paragraph, we usually put white spaces or spaces between each word, so we don’t need to consider the wrapping of word in normal paragraph. As i have said, in a link there is no space, so we need to add a simple code in our css. First, we have to put our link inside the CODE tag as shown below

YourLinkHere

I choose the CODE tag because we usually use this tag to include code within our post, so that the browser will not parsed the code inside the CODE tag and it will display as it is. The next thing is writing the css code, you have to add this css code in your css style.

code {
   display:block;
   font-size:14px;
   line-height:1.2em;
   overflow-x:auto;
   overflow-y:hidden;
}

This is how firefox will display it:

Now you have to put your long link inside the CODE tag everywhere you want to attach a link in your post. In Firefox, the link (only if it is too long) will now be within a block element that can be scrolled in x-direction. This code is effective only when the link is long enough to flow out of the boundary.

The next thing you need to do is to add one more css code for Internet Explorer. Without the above code, IE already wrap the text correctly and display it properly. But, since you have change the display style of your CODE tag, you need to give IE the default display style back. To do this add the css code below and this css will work only if our website is viewed in Internet Explorer (you have to add the if condition).

This is how Internet explorer will display it:

Now, this css will override the previous css written for Firefox if Internet Explorer is used, and IE will get its default word wrap property again.