Anurag Bhandari

Updates

Anurag Bhandari — Tue, 10 Nov 2009 07:15:54 +0000

It’s been a week now since my Accenture training got over. Now, my real office work has started.

Missing my friends (back in Bangalore) that I made during my Accenture training there.

Waiting desperately to get my hands on an Internet connection at home. I’ll go with either of Airtel broadband or BSNL EVDO.

My CAT exam is on 29th November. Will be going virtually without preparation. Let’s see what happens.

Will resume my Granular development as soon as I get an Internet connection. Meanwhile, the Unity Project has been going good, as it would seem.

After losing their bilateral Cricket series to Australia, I hope India will perform a lot better in their next series (India vs Sri Lanka), scheduled to start on 16th November.

Life without Twitter

Anurag Bhandari — Tue, 10 Nov 2009 06:56:50 +0000

With Twitter blocked in my office (*sigh*), yes, it’s a tough life without it!

.NET at Accenture

Anurag Bhandari — Thu, 24 Sep 2009 11:22:47 +0000

Since I landed in Bangalore, my schedule has been extremely busy. Yeah, I had heard in the past that the training period in an IT company, especially Accenture, is very tough, I am experiencing it only now. I have yet to take out some time to go out and explore that grand city that is Bangalore. Most of my time everyday is spent preparing for in-training tests. But anyway, the first phase of my training ends today, the last test of first phase being on 28th Sept.

A ray of hope in my frustrating daily schedule has to be me getting .NET stream, that is, I would be doing my second (and final) phase of training on Microsoft .NET technologies, and eventually be getting projects based on it. I am curious to begin my stream training, more because my stream is more web-development oriented (yippie!). By the way, it would be ASP.NET + C#.

That’s all for now. I’ll try to keep my blog as updated as possible.

Going to begin a new life

Anurag Bhandari — Thu, 20 Aug 2009 19:15:21 +0000

I got my Accenture (India) joining letter last week, the thing I had been waiting for so long. I am going to join Accenture on the 31st of August 2009 in Bangalore. And contrary to many predictions that Accenture joining for new recruits would be delayed this year due to the global economic recession, we (me and my college mates) got it on time. But well, I still feel like wishing we had gotten the joining letter a bit later. Maybe that’s because this is the first time I am going to step out of my home for long. So although I am very excited about beginning my first job, I am going to sourly miss the comfort of my home at the same time.

In all probability, during my initial days at office, I would be without an Internet connection (damn!), a TV (where would I watch sports?), my (sweet) PC, a fridge (?), and many more of those comforts at wherever I get to live. On the other hand, some things to cheer about include the pleasant weather of Bangalore and the company of few of my college friends.

I hope it all goes well in Bangalore. With this, I wish myself good luck in my quest to begin a new life.

Tutorial: AJAX with jQuery

Anurag Bhandari — Fri, 31 Jul 2009 08:51:34 +0000

jQuery is a very powerful JavaScript framework, and to put in their own terms, is The Write Less, Do More JavaScript library. jQuery’s slogan indeed holds true to its claim, as you’ll discover as soon as you start coding using jQuery. Although jQuery has an extensive set of API and a collection of many functions in its arsenal, I would be concentrating more on the AJAX capabilities of jQuery in this tutorial.

Most of the modern websites, irrespective of whether they offer a simple or a complex interface, usually use AJAX for some task or the other. While designing in order to cater to today’s needs, it becomes almost indispensable to use AJAX to make the end-user experience faster and more pleasant. So, if you had been deferring the use of AJAX till now owing to it’s complexity in raw JavaScript, here is your chance to start using it with utmost ease.

It is really amazing to see how much simplified AJAX is with jQuery. The developers have seemingly (and painstakingly) done a lot of hard work behind the scenes to make it easy for the web developer to implement even the most complex JavaScript concepts, including AJAX.

For the purpose of demostrating AJAX, I’ll be making use of a simple web application (that I designed using HTML, PHP, jQuery, CSS and MySQL). I call it the Albums Database.

index.html

This is the main page, the page the the end-user is going to see. Below is the complete code for this page, and even below that is a brief explanation of it.

We start with the tag. First, we mention all the external scripts and stylesheets that we are going to use with our page. The scripts include a latest copy of jQuery JS file, jQuery UI (optional), AjaxUpload plugin for jQuery, and our own custom JS file. The stylesheets include our own CSS code and jQuery UI’s CSS file (optional).


<html>
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Albums Database</title>
	  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
	  <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
	  <script type="text/javascript" src="js/ajaxupload.3.5.js"></script>
	  
	   <script type="text/javascript" src="js/javascript.js"></script>
	   <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
	   <link type="text/css" href="css/style.css" rel="Stylesheet" />
  </head>
  <body>
	<h2 id="block" style="color: white; background-color: purple; padding: 20px; margin:0;">
		Welcome to Albums database.
	</h2>
 
	<p><a id="new_album" href="#">New Album</a></p>
	<form id="new_album_form" style="background: #F3F4BA; padding: 10px; margin: 10px; display: none;">
		<table width="100%">
			<tr><td width="100px">Name:</td> <td><input id="album_name" type="text"/></td></tr>
			<tr><td width="100px">Artist:</td> <td><input id="album_artist" type="text"/></td></tr>
			<tr><td width="100px">Year:</td> <td><input id="album_year" type="text"/></td></tr>
			<tr><td width="100px">Cover:</td> <td><input id="album_cover"> <img id="loader-2" style="display:none;" height=16 width=16 src="loader-yellow-bg.gif"/></td></tr>
		</table>
		<br><input type="submit" value="Create"/> 
		<img id="loader-3" style="display:none;" height=19 width=220 align="top" src="loader-long.gif"/>
		<div id="create_album_result" style="color:green; display:none;"></div>
	</form>
 
	<div>
		Search for albums:
		<input id="userinput" type="text"/> 
		<img id="loader" style="display:none;" height=16 width=16 src="loader.gif"/>
	</div>
 
	<div id="results">
	</div>
  </body>
</html>

In the main body, we start by displaying a sweet little header. Below the header is a link New Album which, as the name implies, will display a form to create new albums and post them to our database. Below this link is a form that has 4 fields required to be filled to create a new album. By default, this form is hidden and will be shown to the user only after the above link is clicked. After the form, we have a “search box” which lets the user search for existing albums in the database, and the searching is automatically done as the user types into this box. The search results are then displayed below the search box. Magic, you say? It’s AJAX actually.

javascript.js

Here comes the main file of our whole web app. This file contains all the code in JavaScript that will be used to control the behavior of various elements present in our index.html page. Of course, we make use of jQuery to write our JS code in it.

$(document).ready(function() {

The first step is to make sure that index.html has fully loaded in browser of the user before our JS code can be applied to it. This reduces any chances of error or misbehavior on the part of our coding at the user’s end.

 /* Convert the input with id 'album_cover' into AJAX uploader */
new AjaxUpload('album_cover', { action: 'upload.php', 
					onChange: function(file) {$('#loader-2').show();}, 
					onSubmit: function(file, ext) {
						if (!(ext && /^(jpg|png|jpeg|gif)$/.test(ext))) {
							// extension is not allowed
							alert('Error: invalid file extension');
							// cancel upload
							$('#loader-2').hide();
							return false;
						}
				        }, 
					onComplete: function(file) {$('#album_cover').val(file); $('#loader-2').hide();}
					}
	);

Now, using the AjaxUpload plugin for jQuery, we associate the functionality of uploading images through AJAX with the Cover field of our new album form.

/* Show/hide the create new album form when 'New Album' link is clicked */
$('#new_album').click(function() {
	$('#new_album_form').toggle('fast');
});

Next, we specify that when the New Album link is clicked, the corresponding form should be displayed (with effects) if hidden or hidden if displayed. That is, we toggle the display state of the form.

/* Post the entry of the new album into the database, using AJAX, when the form is submitted */
$('#new_album_form').submit(function() {
	$('#loader-3').show();
	if ($('#album_name').val() != '' && $('#album_artist').val() != '' && /^([0-9]{2}|[0-9]{4})$/.test($('#album_year').val()) && $('#album_cover').val() != '') {
		$.post("create.php", {album_name: $('#album_name').val(), album_artist: $('#album_artist').val(), album_year: $('#album_year').val(), album_cover: $('#album_cover').val()}, function(data){
			$('#create_album_result').html(data).fadeIn('slow');
			$('#loader-3').hide();
		});
	}
	else {
		alert("Please fill in all the details and fill them correctly.\nYear can be only 2 digits or 4 digits long.");
		$('#loader-3').hide();
	}
	return false;
});

After that, we specify the code to be executed when the user submits the form. We start by unhiding an originally hidden animated ‘loader’ image to give the user an illusion of something going on behind the scene (that is, the form submission process starting). Then we put a if condition to check whether all the form fields were filled in and if the Year field was filled in correctly (we use regular expressions for this; the year should be 2 or 4 digits long only). If the form was filled up fine, we use the jQuery AJAX method $.post to submit the filled up form into the database. Our handler script in this case if create.php. After the form submission process has completed, we again hide our animated loader image.

/* Start searching the database, using AJAX, when the user has typed at least 2 characters */
$('#userinput').keyup(function() {
	if ($(this).val().length >= 2) {
		$('#loader').show();
		$.post("search.php", {searchterm: $('#userinput').val()}, function(data){
			$('#results').html(data);
			$('#loader').hide();
		});
 
	}
	else {
		$('#results').html('');
	}
	return false;
});

The next part of our JS code deals with the search box. We specify that as soon as the user types in the third character (whatever it be), the $.post method executes, making use of the handler script search.php this time. The fetched search results are then displayed in the

area with id results

search.php

Takes in just one POST variable called “searchterm” and uses it to query our MySQL database to find what the user might be looking for. It then prints the search results, in HTML form.


	/* Connect to the database */
	include 'config.php';
	$connection = mysql_connect("$DB_HOST","$DB_USER","$DB_PASSWORD");
	mysql_select_db("$DB_NAME",$connection);
 
	/* Query the database for searching */
	$search_query = "SELECT * FROM albums WHERE album_name LIKE '%$_POST[searchterm]%' OR album_artist LIKE '%$_POST[searchterm]%' OR album_year LIKE '%$_POST[searchterm]%'";
	$search_result = mysql_query($search_query) OR die(mysql_error());
 
	/* Display the search results */
	$counter = 1;
	print "\"100%\" cellspacing=\"10px\" cellpadding=0>";while($newArray=mysql_fetch_array($search_result)){// Display alternate gray-white search result entriesif($counter%2==1){$class="gray-box";}else{$class="white-box";}$name=$newArray[album_name];$artist=$newArray[album_artist];$year=$newArray[album_year];$cover=$newArray[album_cover];print"\"$class\">";print"";print"";print"";$counter++;}print"
	   
		
		 
			  
		
		 
			  
		
		  
		  
		  
		  
		 
		 \"top\" width=\"100px\">\"$cover\" style=\"float:left;\"/>
		 \"top\">Name: $name
Artist: $artist
Year: $year
		 
		
	
	 
";
?>

create.php

Takes in the four POST variables – album_name, album_artist, album_year and album_cover – and uses them to create a new entry for the submitted album into our MySQL database.


	/* Connect to the database */
	include 'config.php';
	$connection = mysql_connect("$DB_HOST","$DB_USER","$DB_PASSWORD");
	mysql_select_db("$DB_NAME",$connection);
 
	/* Values received */
	// mysql_real_escape_string() prepends backslashes to the following characters: \x00, \n, \r, \, ', " and \x1a. 
	$album_name = mysql_real_escape_string($_POST[album_name]);
	$album_artist = mysql_real_escape_string($_POST[album_artist]);
	$album_year = $_POST[album_year];
	$album_cover = $_POST[album_cover];
 
	/* Manipulate the database */
	$insert_query = "INSERT INTO albums (album_name, album_artist, album_year, album_cover) VALUES ('$album_name', '$album_artist', $album_year, 'images/$album_cover')";
	$insert_result = mysql_query($insert_query) OR die(mysql_error());
	print "
Album created! ";
	print "\"javascript:ResetForm();\">Create New";
?>

upload.php

Simple PHP scripts that handles where and how the files uploaded, using the Cover field of the new album form, are placed on the server.


        $uploaddir = 'images/';
	$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
 
	if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
  		echo "success";
	}
 
	else {
  		// WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
  		// Otherwise onSubmit event will not be fired
  		echo "error";
	}
?>

config.php

Included in all our PHP files and stores the variables containing MySQL database information, like DB name, host name, username and password.


// ** MySQL settings ** //
$DB_NAME = "albumdb";    // The name of the database. albumdb is only an example. So, replace it with the name of your database.
$DB_USER = "username";     // Your MySQL username. In most cases root works, but it highly not recommended.
$DB_PASSWORD = "password"; // ...and password. The default password for root is none.
$DB_HOST = "localhost";    // 99% chance you won't need to change this value. 
?>

style.css

Our custom CSS file. Short and precise.

.yellow-box {
	background-color: yellow;
	margin: 10px;
	padding: 20px;
	display: none;
}
 
.gray-box {
	background-color: #efefef;
}
 
.white-box {
	background-color: white;
}

albumdb MySQL database

This is the structure of that database used with this web app, with albums as the only table.
album_id - int(11) [ PRIMARY KEY auto_increment ] album_name - varchar(100) album_artist - varchar(100) album_year - int(4) album_cover - varchar(100)

Demo

Have a look at the final thing (our web app) yourself. The demo is here.

Download

Click here to download the entire web app, excluding the SQL database (you’ll have to create it yourself based on the structure mentioned above).

Enabling 3D effects in KDE 4

Anurag Bhandari — Tue, 28 Jul 2009 19:28:09 +0000

KDE 4 comes with it’s own set of cool 3D effects built-in, but disabled by default. In order to enjoy these effects, you need to enable them manually through the Desktop section of System Settings. But in some cases, enabling 3D can get painfully difficult, as was in my case.

3D can be enabled through one of two options – XRender and OpenGL. Effects using XRender are quite slow and inferior to what is offered by OpenGL.

Enabling 3D with XRender normally works well on almost all machines, but problems start when you try to enable 3D using OpenGL. The most common error that pops us when trying to do so is:

Failed to activate desktop effects using the given configuration options. Settings will be reverted to their previous values

Here are some simple steps to make sure you can enable OpenGL 3D effects without errors and problems.

To start with, make sure you have:

Proper video drivers installed (proprietary drivers in case of NVIDIA and ATI) and 3D acceleration enabled.
The xorg.conf file setup properly.

In most situations, these sections are usually missing from the file xorg.conf (found in /etc/X11):

Section "Files"
    ModulePath     "/usr/lib/xorg/modules/extensions/nvidia"
    ModulePath     "/usr/lib/xorg/modules/extensions"
    ModulePath     "/usr/lib/xorg/modules"
EndSection

Section "Screen"
    Option       "AddARGBGLXVisuals" "True"
EndSection

Section "Module"
    Load           "glx"
    Load           "dri"
    Load           "extmod"
    Load           "v4l"
EndSection

Section "Extensions"
    Option         "Composite" "Enable"
EndSection

So, make sure to add the above codes to your xorg.conf file. Then go to System Settings > Desktop > Desktop Effects, and enable them using OpenGL compositing settings.

Extra info about my system:
Operating System – Fedora 11
KDE version – 4.2.4
NVIDIA driver version – 185.xx

Updates

Anurag Bhandari — Tue, 23 Jun 2009 19:10:57 +0000

I had been tweeting more than blogging these days. But anyway, I had been publishing what I want to say quite regularly.

Frustrated of getting tonnes of spam on the Granular Package Archive everyday, I finally fixed the issue today, once and for all. This had been a long time pending task. I did this by integrating reCaptcha.

Saw Toy Story last week. Loved it! My favorite dialog? – “To infinity and beyond”.

India’s Cricket tour of West Indies starts just three days from now.

I am missing Granular development a lot; hopefully I’ll be able to continue development within a week or so. Meanwhile, the artwork team (Granuminati) had been doing some great stuff.

Still reading The Fountainhead (by Ayn Rand) since months now. I am a sloooow reader when it comes to philosophy novels. Anyway, I have started with the part 3 of novel based on Gail Wynand.

Finally did the dreaded Drupal update for granularproject.org.

Power cuts here, in Punjab, are getting worse day-by-day. 7 hour cuts are a norm these days.

Association with Unity

Anurag Bhandari — Sat, 11 Apr 2009 12:47:37 +0000

As was hinted in a post at Team Granular blog, Granular will now be a part of the Unity Project. Unity is in it’s beginning stages, but development is already on full swing. The enthusiasm of developers and members can be seen clearly on Unity’s devel mailing list and its public forum. At this point of time, I’ll refrain myself from giving full details about the association of Granular with Unity, but detailed announcements will come out at a later stage. What all I can tell you right now is I am pretty happy with the progress that’s been going on at Unity and Granular.

One more thing. You see only the Granular logo at the left and no logo of Unity as it’s still being finalized. But I am sure the creative artwork guys there will come up with something interesting pretty soon.

Apologies accepted

Anurag Bhandari — Fri, 10 Apr 2009 18:34:04 +0000

Tom (aka Kurakroma and cbar2 on Granular Community Forum) was a very active member of the forum and one of the global mods there too. He used to be the live wire of the forum, and had a very keen mind which he utilized in discovering new things and putting forward questions, and sometimes trying to help people facing problems using Granular (or Linux in general). But under some circumstances not known to the Team Granular members, he left the forums quietly; not leaving even a single message of this sudden action of his.

Just recently, some one at the Granular forum put forward a question asking whether we owned the .co.uk domain of Granular Linux, perhaps the British community of Granular (no, we don’t own any such domain)? On checking which link he was referring to, we were quite surprised to find out there indeed existed a .co.uk domain of Granular.

Check it out for yourself. Rest is self-explanatory. Boy, what a way of expressing his regret. Let me assure you Tom, all your apologies are accepted. And all our doors are still open for you.

Granular Package Archive

Anurag Bhandari — Wed, 01 Apr 2009 18:05:31 +0000

Continuing my Java learning stint, I started experimenting on RPM packages in the Granular 2008 repository by extracting meta data from them using various Java classes I had written for my on-going college major project. To give a shape (end-user interface) to these leisurely done Java programs, I used my existing project MyBlog to create a website that could display information (extracted by the Java programs) about every RPM package in the repository. In other words, the Java programs store information about each RPM package in a central database which in turn is used by a PHP-based website to display that information, and much more.

In the introduction to Granular Package Archive post I wrote on the Team Granular blog, I explained the various features it has to offer. My personal favorite is the ability to leave comments on individual RPM pages. Other than that, I am quite satisfied with the overall look-and-feel too. In another of my Team Granular blog post, I explained the working of this package archive system, and the way to use it with any other repository of RPM packages.

Some guys at the Unity Project are also contemplating the idea of using this package archive system with their repository too.