A Rookies' Experience with PBS

It all started one day in May 2008, when one of my friends Manish M. apprised me of IBM's announcement of The Great Mind Challenge. Looking at the opportunity, I called up Amit, one of my would be team partner, if at all we decided to participate. Dont exactly remember if it was a call, or we talked online, but am sure that we didn't take more than a minute to reject the idea right away, after having a look at the long dreaded list of tools and technologies to be learnt to participate in the same.

Fast forward to the first week of August..This was the day, when another friend in college, Manish P. expressed the desire to participate in something other than the normal curriculum. The idea was bolstered by one of my seniors Ankitkumar, when he informed us about TGMC. What gave our otherwise indolent minds some impetus is the very fact that one of our senior's group had made it to the top 20 all over India in the same contest the year before. And we seriously started considering the idea of participating in. We approached one of our professors, Mrs. AA Pandit who agreed upon mentoring us for the project. Finally, we registered our team 'Rookies' (the name may not have come as a surprise to anyone; it suggested what we are!) for making a Patient Billing Software on August 20, which was the last day for registering. stupidcomp4 comprised of manish001_1989, kevalvora, hokage and kartik1507. Pandit Ma'am helped us in all our decisions when we seeked help from her.

We then started with some research, analysis and design for PBS. As soon as the deadline of 15th Septemeber for submitting SRS drew near, we were inundated with plenty of work. A few other teams like 'vbn2008', 'snss' and 'heroes' from our batch joined in after the deadline for registrations were extended. We successfully submitted the SRS on the last day. The first few days on the tools were not good for me, as I hardly had any knowledge of setting them up for building the software. Spent more than 4 days on synchronizing them with no success. The training session conducted by IBM finally helped us. Amongst the technologies to be studied, our aim was to learn enough to achieve the minimal; to filter the huge ocean of data available and constrain ourselves to what was required to make a working application. 1st November was the deadline for the submission in the first round and our final exams would start on the 5th of the same month, which meant we had to keep up the pace with the college studies as well. Our discussions during the lunch time, in the breaks and in between lectures augmented. After 8th October, our aberrant schedules then consisted of college lectures in the morning and afternoon, and rest of the day, even midnight sometimes, implementing PBS. I used to find team members of snss online at those times, as even they were going through a similar phase. There were times we felt languorous and it looked like a fatuous decision for fledgling neophytes (rightly called Rookies!) like us to pick up the arduous task. I particularly remember 23rd October, when we had our usual discussion in the train about the part to be implemented that day, and after coming back home I checked tgmc.in to only find that the deadlines had been extended. I experienced a sense of ambivalence towards the announcement as we had done enough to submit the product.

After our college exams, two of us took a break for a week and we were back with a bang after that. From 3rd to the 16th December, we had 8-10 hour days of work. It wasn't work exactly, after all we enjoyed doing it. We finally submitted the CD, after more than an hour long search for a reliable courier service provider who could deliver an electronic item to the destination, with little hopes of qualifying for the face to face presentation.

Fast forward to the fourth week of January.. when we surprisingly heard that we've been selected for the face to face round on 11th February. What was even better was that, heroes, vbn2008 and snss too qualified. From 1st Feb. to the 10th, we worked hard again trying to improve on the features and the UI. We successfully presented our software to the judges who looked satisfied with our work. Pandit Ma'am was particularly happy with our effort. The day ended on a good note as the three groups enjoyed a never-to-be-forgotten chocolate butterscotch (with nuts) treat from snss.

Congratulations to DRAM, a group of our seniors, for making it to the top 20 all over India. We were enthralled to be in the first 50. To end it up, its not a revolutionary change that we brought to the world, but I can aver that its an experience, a Rookie would not forget. A small decision did play a big role in converting our otherwise mundane and insipid college life to something interesting.

AJAX using jQuery

Hello!

Here's a short description on implementing AJAX using jQuery.

AJAX stands for Asynchronous JavaScript and XML. Generally, whenever some data is requested from the server, an http request is sent to the server, where it is processed and a response is sent back to the browser which is displayed to the user. Thus, if there are many different divisions in the browser containing some information (like some text fields containing data filled by the user, etc.), and if a submit button for one of the forms is clicked, the data in all the other divisions is lost. Also, the entire page needs to be refreshed. With AJAX, an XMLHttpRequest object is sent to the browser instead of a normal request. This sending of request is achieved through the use of JavaScript and it happens asynchronously wrt rest of the page. Hence, the name Asynchronous Javascript and XML.

In order to send an http request, we need to send the following 3 parameters:

1. method:

This can take values GET, POST, DELETE, HEAD and PUT. GET and POST are generally used and can meet all requirements.
The details of GET and POST method can be found here:
http://www.cs.tut.fi/~jkorpela/forms/methods.html
http://www.webdevelopersnotes.com/basics/http_client_methods_get_post.php3

2. action:

This is the url of the server side script which would process the request.

3. asynchronous:

when set to true, indicates that it is an asynchronous request.

In addition to this, we also need to send the parameters in key value pairs.

A useful tutorial for learning ajax is available at http://www.w3schools.com/Ajax/default.asp

A small example on AJAX using jQuery:

To start off, what is jQuery?

jQuery is a JavaScript Library that eases event handling, animating and AJAX interactions. It is a frame work that provides the developer with a set of functions, through which implementation of JavaScript related code would be simplified.

Unzip this file. The folder css contains a css file, which does some trivial styling. The img folder contains a .gif file which acts as a 'loading' symbol. What now remains are two important files, index.html and two.jsp.

index.html

This is a simple html page. In the body tag, there's a form created which is used to accept the details from the user (Will come back to method and action attributes used in form tag, later). Each of the fields use an id as these elements are accessed through their id's. Nothing worth noticing in this part. Lets move on to the head tag. The script tag defines a javascript file whose source is located on the google servers. This file contains everything related to the framework. It can also be downloaded at http://jquery.com/ However, using the prior method has the advantages of the file being kept updated with the improvements in the framework.

This is followed by another script, which contains the ajax call. $(); is a function which stands for $(document).ready() (and is an alternative to jQuery();) i.e. it is called when the page has loaded. It returns a jquery object.

An anonymous function is created here "$(function() {" to perform the appropriate task. All the functions that are to be executed when a particular event occurs are written inside this anonymous function. If there's some function to be performed at the load of the page, its written inside this anonymous function and outside all of the inner functions. In this case, I have defined and initiated a variable i (Its not used anywhere, just there for example sake).

"$('#submit').click(function() {" is called when the HTML element with id submit is clicked and when that happens, another anonymous function is called which is defined right there, to do the appropriate task. $('#container') returns the HTML element with id container, and append function is used to append HTML code to this division. In this case, an image is being loaded. $('#name').val(); returns the value stored in the textbox with id name.

$.ajax({
                url: 'two.jsp',
                type: 'POST',
                data: 'name=' + name + '&email=' + email + '&comments=' + comments,
                  
                success: function(result) {
                    $('#response').remove();
                    $('#comments').hide().fadeIn(1500);
                    $('#container').append('<p id="response">' + result + '</p>');
                    $('#loading').fadeOut(500, function() {
                        $(this).remove();
                      
                    });
                      
                }
            });

This is an ajax block used to send ajax requests. The url, which in general would be a controller, is specified along with the method used which is POST in this case. The data is sent in key value pairs separated by '&'. Whether you use GET or POST, as the entire page is not refreshed, the url does not change.

"success: function(result)" indicates, after the request is handled, this function should be called, with the response text in the result variable. And the appropriate activities to be performed, that is response handling is done here.

"$('#response').remove();" is written so that the response is not displayed multiple times when the Go! button is pressed.

"$('#comments').hide().fadeIn(1500);" is just an effect created.

"$('#container').append('

' + result + '

');"appends the result to the end of the container tag.

$('#loading').fadeOut(500, function() {
$(this).remove();
});

This is used to give a fadeOut effect to the image, and the operation fadeOut takes place for a duration of 500 ms and after this time, the image is removed.

The request is handled by two.jsp (Generally you use a servlet here). It uses" request.getParameter("name")" to retrieve the value name and prints the same appended to hello in the response. Note that ("name") corresponds to the "name" in the url in the ajax request and not the name "name" in the HTML page, although both are same here. This response is handled by the function as described above.

Finally, all this requires javascript to be enabled on your browser. What if that's not the case! We need to build a robust application taking care of all possibilities. In that case

<form method="post" action="two.jsp">

comes into picture wherein a normal http request is sent and the result is displayed on another page. Try the same application with javascript disabled in your browser.

That's about a sample code on AJAX using jQuery. Hope you enjoyed reading this. Any suggestions and questions are welcome. Just use the post new comment below this blog.

P.S.: Can anyone please help me with attaching files here or some other server?