Just Another Tech Blog

A mind is like a parachute. It doesn't work if it is not open.


Web Design And Development

Install Apache Ant on Ubuntu

1. Prerequisite

The current version of Apache Ant is 1.9.x which requires Java 1.5 at minimum. Therefore, you should make sure you have suitable Java installed on your environment.

2. Install Apache Ant on Ubuntu manually

Download Ant

You can download Ant distribution from the Apache Ant website. Currently, the latest release of Ant is version 1.9.7.

In the following command, I will download the binary only version of Ant:

replace the http URL with the latest ant version URL.
sudo tar -xf apache-ant-1.9.7-bin.tar.gz  -C /usr/local

The above command will unpack the Ant distribution to /usr/local/apache-ant-1.9.7

You can also extract the zip file manually and copy it to the /usr/local/ location.

Next, we will create a symbolic link to the Ant distribution:

sudo ln -s /usr/local/apache-ant-1.9.7/ /usr/local/ant

Create ANT_HOME Environment Variables

Create a file at /etc/profile.d folder (you can use vi with below command)

sudo vim /etc/profile.d/

Enter the follow content to the file:

export ANT_HOME=/usr/local/ant

export PATH=${ANT_HOME}/bin:${PATH}

Save the file.

We will need to activate the above environment variables. We can do that by log out and log in again or simply run below command:

source /etc/profile


We can verify whether Maven is installed successfully or not by type command:

ant -version

The output is similar to:

Apache Ant(TM) version 1.9.7 compiled on April 9 2016



Create Current Date Time Stamp in Robot Framework


Recently I had to write some automation test scripts where I needed to create a date time stamps and use those to schedule a test content to be published and unpublished. For this purpose I created a keyword which will generate the desired date time stamp and enter the value to the date and time field. Therefore, this example might not be very useful for a generic purpose, however if someone need this type of date time stamp for scheduling something it might be little helpful.

The Test Scenario:

The basic test scenario was like, there was 2 sections called Publish-on and Un-publish-on in a content creation page, and both sections have 2 separate fields called date and time.


So, here what needed to do the following 2 steps:

  1. get the current date and paste it the Publish on date field.
  2. get the current time and add 2 minutes with it and paste it to the time field.

Then there was some additional test cases, like, save the content and check if the content properly published on the scheduled time.

After that I needed to do the same 2 steps for the Un-publish on fields.

The keyword I created for the achieving the above 2 steps are as below:

Enter Time Date To Scheduler [Arguments] ${field-label}


Wait Until Page Contains Element xpath=//div[@field='vm.${field-label}']//input[@placeholder='No date']
 ${date}= Get Current Date result_format=%m/%d/%Y

 ${special_case}= Set Variable 0
 ${hour}= Get Current Date result_format=%H
 ${hour}= Convert To Integer ${hour}
 ${min}= Get Current Date result_format=%M
 ${min}= Convert To Integer ${min}
 ${new_min}= Evaluate ${min}+2

${min_special}= Evaluate ${new_min}-60
 ${special_case}= Set Variable if ${new_min}>=60
 ... 1 0

${new_min}= Set Variable if ${special_case}==1
 ... ${min_special} ${new_min}

${hour_special}= Evaluate ${hour}+1
 ${hour}= Set Variable if ${special_case}==1
 ... ${hour_special} ${hour}

${time}= Set Variable ${hour}:${new_min}

 Clear Element Text xpath=//div[@field='vm.${field-label}']//input[@placeholder='No date']
 Input Text xpath=//div[@field='vm.${field-label}']//input[@placeholder='No date'] ${date}
 Clear Element Text xpath=//div[@field='vm.${field-label}']//input[@placeholder='No time']
 Input Text xpath=//div[@field='vm.${field-label}']//input[@placeholder='No time'] ${time}

Here, I needed to converted the date-time to specific format which will support by the web app.

I hope the code is pretty self-explained. If you have any question or suggestions please fell free to comment.

Device Testing Local Virtual Hosts

We often need to test many features in our site for several devices like, phones, tabs etc. In SDLC process, when we need to maintain the proper deployment process, many times we need to test a new feature or fix in out local environments. Most of us use a local setup (maybe XAMP, WAMP, LAMP etc) with virtual hosts for maintaining several projects. Therefore, it become difficult to test on mobile phones or tabs there is no easy option to set new host entry for those devices. However, we can solve this problem by adding single line of code in our virtual host settings.

Here, I am using WAMP. For WAMP:

First: You need to have a virtual host for the test site/project. (If you don’t have a virtual host then you should be able to access the local site by hitting the ip address of your PC on the browser of the device on which you need to test).

Second: Open the “httpd-vhosts.conf” in the “C:\wamp64\bin\apache\apache2.4.17\conf\extra” location. (location can vary depending on the apache and wamp version).

Third: Here, in the “httpd-vhosts.conf” file add “ServerAlias myproject.local.*” line between the virtual host settings like bellow:

<VirtualHost *>
  ServerName "myproject.local"
  DocumentRoot "/Users/jeremy/Sites/myproject"
  ServerAlias myproject.local.*

Now, Save the file and restart all WAMP services.

Forth: Now, you should have the ability to browse the local site from any devices under the same network, but you need to use the following URL pattern to access:

http://myproject.local.[local ip address]

Its Done!!

The ServerAlias directive allows for alternate names that Apache should map to the virtual host. The domain is a free wildcard DNS service from 37signals, which essentially resolves to your local ip address, and sends it back in the response. Now just fire up your various mobile devices and browse to the server alias above, substituting * with your local ip address.

What makes this so streamlined is that it allows for a consistent naming pattern that is easy to remember, and it removes unnecessary complication. As a bonus, it really comes in handy when a request comes in from a project manager to troubleshoot an issue on a recent project that you still have running on your local machine.


Python Robot Framework Install

To install Robot Framework, you need to pre-installed the following items:

  1. Python 2 or 3
  2. Selenium
  3. PIP
  4. PATH setting in Environment Variables

See How to Install Python, PIP, Selenium, Chrome Driver post if you already have not the above things.

Install Robot:

Open CMD as an administrator user.


pip install robotframework
pip install robotframework-selenium2library

After completion you can start working on the Robot framework.

You can simply create a .txt file and put the following codes to check the Robot framework is working or not:

*** Settings ***
Library     Selenium2Library
Suite Setup     Go to homepage
Suite Teardown  Close All Browsers

*** Variables ***
${HOMEPAGE}     http://mytestsite/wp-admin
${BROWSER}      chrome
${pass}         password

*** Test Cases ***
Open Browser To Login Page
    Input Username
    Input Password    password
    Submit Credentials

*** Keywords ***
Open Browser To Login Page
    Maximize Browser Window
    Open Browser    ${HOMEPAGE}    ${BROWSER}
    Login Page Should Be Open

Go to homepage
    Open Browser    ${HOMEPAGE}     ${BROWSER}

Input Username
    [Arguments]    ${username}
    Input Text    id=user_login    ${username}

Input Password
    [Arguments]    ${password}
    Input Text    id=user_pass    ${password}

Submit Credentials
    Click Button    xpath=//input[contains(@id, 'wp-submit')]

Save this code in a text file like, demo-robot.txt

Now from CMD or terminal type

pybot demo-robot.txt

It will run the script and generate the detail report, log file and other necessary output.

You can also save the file as robot file like, debo-robot.robot

It that case you need to add “C:\Python27\Lib\site-packages\robot” in your Environment Variable.

Now type the following code to run the robot script:

robot demo-robot.robot

Please Note: If you are using any IDE like Pycharm, some notification will appear after installing Robot framework, which will say that there are some plugins for Robot, do you want to install it or not. In that case you should install it in the IDE.

How to Install WAMP and Virtual Host in Windows

Install WAMP:

Download the latest version of WAMP from here:

Now, download all the Visual C++ Redistribuable Packages which are pre-requirement for installing WAMP. To find all the packages together, download the zip form here:

Unzip and install one by one.

Now, install downloaded WAMP.

Once finished open http://localhost in your browser.

Go to PHPmyadmin from this page and set Password.

Create Virtual Hosts:

  • Open your Apache configuration file located in C:\wamp\bin\Apache#.#.#\conf\httpd.conf, where #.#.# corresponds to the version of Apache that you are running in WAMP.
  • Search for “LoadModule vhost_alias_module” (without the quotes) and uncomment the LoadModule vhost_alias_module modules/ directive below.
  • Search for “Virtual Hosts” (without the quotes) and uncomment the Include conf/extra/httpd-vhosts.conf directive below.
  • Save and close the httpd.conf file.
  • Open your Apache Virtual Hosts (vhost) configuration file located one directory down from the Apache configuration file directory in C:\wamp\bin\Apache#.#.#\conf\extra\httpd-vhosts.conf.
  • Add the configuration for your new vhost. While virtual host configuration is outside the scope of this article, I suggest you visit the Apache project’s documentation. It does a decent job of explaining the various configuration directives. I have included mine below with some comments as a starting point.


  • Save and close the httpd-vhosts.conf file.
  • Open your Windows hosts file located in C:\Windows\System32\drivers\etc\hosts.
  • Add a new entry for the vhost you created.
  • Save and close the hosts file.
  • Resart All Services in WAMP, pop open a web browser and access your new virtual host. Celebrate!

How to Install Chrome Driver in Linux Mint (Selenium Webdriver)

Recently I have faced some problems with Firefox driver while I was using Selenium Webdriver(Python). I did not have much time to investigate the issue with Firefox driver, therefore, I switched to Chromedriver. However, I needed to install Chrome driver separately in Linux mint. I hope the procedure will also work for other Linux distro as well.

Here goes the simple instructions for installing Chrome Driver:

1. Install unzip:

sudo apt-get install unzip

2. Download latest version from official website and upzip it (here for instance, to ~/Downloads. Example: For Robert’s system the location might be ‘/home/robert/Downloads’.):

wget -N -P ~/Downloads
 unzip ~/Downloads/ -d ~/Downloads

3. Make it executable and move to /usr/local/share

chmod +x ~/Downloads/chromedriver
 sudo mv -f ~/Downloads/chromedriver /usr/local/share/chromedriver

4. Create symbolic links

sudo ln -s /usr/local/share/chromedriver /usr/local/bin/chromedriver
sudo ln -s /usr/local/share/chromedriver /usr/bin/chromedriver

It’s Done!

Please Note: To use latest Firefox driver you need to download Mozilla GeckoDriver from the page and follow the Step 3 from the above. It should fix the Firefox driver issue.

Another Note: All the drivers often update very frequently. Therefore, if any of the driver (Chrome, Firefox or any other) suddenly stop working then find and download the latest version of that driver and follow step 3 and 4 which most probably fix the issue.

Good Luck!!

PHP and MYSQL Basic

First, we need to be installed WAMP or XAMPP like setup in our PC.

Now access http://localhost/phpmyadmin using dbusername user/pass.

Now Create a new test Database, Example: “mysite” is out test database.

Now we will create a new table name “myguest” inside the “mysite” database using PHP script.

PHP script for creating “myguest” table:

$servername = "localhost";
$username = "dbusername";
$password = "dbpassword";
$dbname = "mysite";

echo "Welcome to My Site...<br><br>";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
echo "Connected successfully!!<br><br>";

// sql to create table
$sql = "CREATE TABLE MyGuests (
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50),
reg_date TIMESTAMP

if ($conn->query($sql) === TRUE) {
echo "Table MyGuests created successfully";
} else {
echo "Error creating table: " . $conn->error;

//Close connections

echo "Connection Close.<br><br>";

Save the Above PHP code in a .php file and hit the page in your browser while wamp server is running.
It will create a new Table named “myguest”.

To see the new table go to http://localhost/phpmyadmin and browse the database named “mysite”.

Now we need to insert data into the table “myguest” using another PHP script.

PHP script for inserting data into the “myguest” table:

$servername = "localhost";
$username = "dbusername";
$password = "dbpassword";
$dbname = "mysite";

echo "Welcome to My Site...<br><br>";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
 die("Connection failed: " . $conn->connect_error);

echo "Connected successfully!!<br><br>";

$sql = "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Denial', 'Cooper', '');";
$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Robert', 'Brown', '');";
$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Alex', 'Brown', '');";
$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Reo', 'Cooper', '')";

if ($conn->multi_query($sql) === TRUE) {
 echo "New records created successfully";
} else {
 echo "Error: " . $sql . "<br>" . $conn->error;

//Close connections

Copy and paste the above PHP code into another .php file and hit the .php file into the browser.
It will insert 6 records into the “myguest” table.

Now we will show the data of the table which we have inserted in the previous step.

PHP code for printing table data:

$servername = "localhost";
$username = "dbusername";
$password = "dbpassword";
$dbname = "mysite";

echo "Welcome to My Site...<br><br>";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
 die("Connection failed: " . $conn->connect_error);
echo "Connected successfully!!<br><br>";

$sql = "SELECT * FROM myguests";
$result = $conn->query($sql);
while($row = $result->fetch_object())
 echo "<pre>";

//Close connections

That’s all for today!!

Next, we will learn how to insert data from a Form submission.

Creating an image gallery in Drupal 7

Create an image gallery in Drupal is not difficult, you can use some modules but they’re often more than you need and sometime difficult to tweak. I will show you how to create a gallery page that you could easily modify or customize.


Through the tutorial I’m going to show you how to create an image gallery page on Bartik (Drupal’s default theme) theme. Yes, you can use any theme you want.

Demo for this tutorial here.


For this tutorial you will need to install Drupal 7 (because this tutorial for Drupal 7. Not sure? you can read installation guide here) and the views module.

Step 1: Create custom content type

Go to Structure -> Content Types (/admin/structure/types) and add a new content type called Gallery (remember this machine name for step 5). This is pretty simple, just follow the prompts and fill in the fields.

Create custom content type
Create custom content type

Step 2: Create image style

From admin toolbar, go to Configuration -> Image Styles (your_site/admin/config/media/image-styles), add new style name “gallery-thumb”. Click “Create new style” and add “Scale and Crop” effect, fill 150 in with, and 150 in height.

Create image style
Create image style

Step 3: Manage fields

After create content type, go to Structure -> Content Types and click to “manager fields” next Gallery content type

Manage fields
Manage fields

Delete body field and add new “Image Gallery” field. On image gallery field settings, scroll to “Number of value” and choose “Unlimited”.

Next, click to “manage display” next Gallery content type

"manage display"
“manage display”

After this step, you’ll need to add some demo content (go to your_site/node/add/gallery).

Add some demo contents
Add some demo contents

Step 4: Create Gallery page with Views module

Go to Structure -> Views and add new views:

Create Gallery page with Views module
Create Gallery page with Views module

Step 5: Coding the Template

Go into the theme directory (themes/bartik/templates/), find node.tpl.php, copy, paste and rename to node–gallery.tpl.php (gallery is your content type machine name, read more here). Open node–gallery.tpl.php and replace with this code:

<div id="node-<?php print $node->nid; ?>" class="node-gallery">
        $imgcount = count($node->field_img['und']);
        for ($i = 0; $i < $imgcount; $i++) {
        $image_uri = $node->field_img['und'][$i]['uri'];
            // url
            $masthead_raw = image_style_url('gallery-thumb', $image_uri);
      <a href="<?php print file_create_url($node->field_img['und'][$i]['uri']); ?>" rel="group-<?php print $node->nid; ?>" class="fancybox">
        <img class="image<?php print ($i + 1);?>" src="<?php print $masthead_raw; ?>" />
    <?php } ?>

Clear your site cache and refresh views gallery page.

Step 6: Adding effects

Adding effects
Adding effects

Now you have a gallery page with thumbnail link to original image file. In this step, I’m going to add some effects (inspire from Google+). Go into the theme css directory (themes/bartik/css/) and open style.css, add this code to bottom:

.node-gallery {
  float: left;
  width: 150px;
  height: 150px;
  position: relative;
    margin: 0 60px 50px 0;

.node-gallery img {
    position: absolute;

.node-gallery .image1 {left: 0px;
  z-index: 3;
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;
  -o-transition:all 0.2s ease

.node-gallery .image2 {left: 7px;
  height: 148px;
  z-index: 2;
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;
  -o-transition:all 0.2s ease

.node-gallery .image3 {left: 14px;
  height: 145px;
  z-index: 1;
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;
  -o-transition:all 0.2s ease

.image1, .image2, .image3{
  border: 5px solid #F3F3F3;
  box-shadow: 1px 1px 2px #666;
  -webkit-shadow:1px 1px 2px #666;
  -webkit-transform:rotate(0deg) translate(0px);

.node-gallery:hover .image1{
   z-index: 6;
  -ms-transform: rotate(-5deg) translate(-40px, -2px);
  -ms-transform-origin:center bottom;
  -webkit-transform: rotate(-5deg) translate(-40px, 2px);
  -webkit-transform-origin:center bottom;
  -moz-transform: rotate(-5deg) translate(-40px, -2px);
  -moz-transform-origin:center bottom;
  -o-transform: rotate(-5deg) translate(-40px, -2px);
  -o-transform-origin:center bottom;

.node-gallery:hover .image2{
   z-index: 5;
  -ms-transform: rotate(-2deg) translate(0px, 2px);
  -ms-transform-origin:center bottom;
  -webkit-transform: rotate(-2deg) translate(0px, -2px);
  -webkit-transform-origin:center bottom;
  -moz-transform: rotate(-2deg) translate(0px, 2px);
  -moz-transform-origin:center bottom;
  -o-transform: rotate(-2deg) translate(0px, 2px);
  -o-transform-origin:center bottom;

.node-gallery:hover .image3{
   z-index: 4;
  -ms-transform: rotate(5deg) translate(40px,-2px);
  -ms-transform-origin:center bottom;
  -webkit-transform: rotate(5deg) translate(40px,2px);
  -webkit-transform-origin:center bottom;
  -moz-transform: rotate(5deg) translate(40px,-2px);
  -moz-transform-origin:center bottom;
  -o-transform: rotate(5deg) translate(40px,-2px);
  -o-transform-origin:center bottom;

Step 7: Addling fancybox

After step 6, you can see effect when hover to gallery. But you clicked to an image and it went straight to original image. Don’t worry, this step will help you create “fancy box” to show your image.

First, you need to download fancybox here. Go to themes/bartik/ and create new folder “js”, extractjquery.mousewheel-3.0.6.pack.js and source folder here. Change source to fancybox

Next, you need to add fancybox to Bartik theme. Open template.php find function bartik_process_page(&$variables) { and insert:

drupal_add_js(drupal_get_path('theme', 'bartik') . '/js/jquery.mousewheel-3.0.6.pack.js');
drupal_add_js(drupal_get_path('theme', 'bartik') . '/js/fancybox/jquery.fancybox.pack.js');
drupal_add_css(drupal_get_path('theme', 'bartik') . '/js/fancybox/jquery.fancybox.css');
$fancybox = "jQuery(document).ready(function() {
drupal_add_js($fancybox, 'inline');

The End

As you can see, it’s pretty easy to pull create an image gallery page in Drupal. You can easily create other pages with this way.

Source: This post including all resources are collected form: only for educational purpose.

Mysql wamp password set, update

Generic Port Issue for wamp:

After installing wamp in windows many of a time we face a common problem like it doesn’t turn on. It just remain orange not turn into green.

  • It generally happen when the desire port is engaged by any other running application (i.e skype often use port 80 or 443). In that case we need to find out the specific program and change the port number then restart wamp.
skype port use image
For skype it is necessary to uncheck the alternative port use.

Hope that would work!

Now let’s set the mysql password:
  • Click on wamp icon from system tray.
  • Click MySQL > MySQL console
  • Now press enter(if it is the first time there should not be any password)
  • After the console is ready just type :
SET PASSWORD FOR root@localhost=PASSWORD('yourpassword');

Here ‘yourpassword’ is the sting you want to set as password.

A successful password change will result in the following message (time consumed may differ per case).

Query OK, 0 rows affected (0.03 sec) mysql>
  • It’s almost done!! Now let’s restart the wamp and try your password it will take to the console.
  • Now you can’t access ‘http://localhost/phpmyadmin/&#8217; cause you just change the password but not set in ‘’ file. So all you need to go ‘C:\wamp\apps\phpmyadmin3.5.1’. Now open ‘’ file with a text editor. Scroll down and type your new password into ”.
wamp file edit image
Right down the new password into ” save the file and restart the wamp server
Update MySQL password:
  • The password should be renewed periodically. If the MySQL database service is running, you can update a new password as follows:
mysql> use mysql Database changed mysql> UPDATE user SET Password = PASSWORD('dba') WHERE User = 'root'; Query OK, 0 rows affected (0.00 sec) Rows matched: 2 Changed: 0 Warnings: 0
  • If you attempting to set new root password while MySQL database service is running and just plain use the “set password” command, you will encounter an error:
mysql> set password for root @localhost=PASSWORD('dba'); ERROR 1290 (HY000): The MySQL server is running with the --skip-grant-tables option so it cannot execute this statement mysql>
  • You would need to first shut down the MySQL database service from WAMP menu (left-click on the desktop icon, select “MySQL”, “Service”, “Stop service”).


Create a free website or blog at

Up ↑