Friday, May 27, 2011

AJAXify phpMyAdmin Interface - GSOC 2011 - First week

This is the fist week of coding time period in my gsoc 2011 project with phpMyAdmin(PMA). On 23rd of May the official coding time started. Since there were some free time with my in the community building period I started my works on before hand. It made me easy to be familiar with the code base and style which is used in PMA.

My first task is give the ajax behavior to the "Create Table" option in the navigation panel of the database. Initially when we click on the "Create Table" option it directs the content frame to a new page. So I wanted to give a dialog box which loads the create table form and then submit it using ajax.

First I went through a similar feature in the "database->structure" and "database->operation" by using the "create_table_form_minimal" form. At that case I got some knowledge on how we can use dialog boxes for this kind of scenario. Then I tried to find out of them what are the code segments which I can reuse for my task. There were three actions which used for "Create Table" option in "function.js". Those are


("#create_table_form_minimal").live('submit') - triggers when the initial form has submit.
("#create_table_form input[name=do_save_data]").live('click') - triggers when the save button clicks in the form.
("#create_table_form.ajax input[name=submit_num_fields]").live('click') - triggers when the add new column option clicks.


Out of those I realized that the second and third actions are common to both cases. I had to add a new action instead of the first one.

Then I planed how to structure my new option. After discussing with Marc I decided to add my code the "navigation.js" so it is logical and easy to use in the future. Then I developed the (#newtable).live('click') action in "naviation.js" file and after discuss with Marc I put the common logic to the "PMA_createTableDialog()" function in the "fucntion.js" file.
Finally Marc requested a modification on changing the "Add 'x' column(s) Go" option to the top of the create table form and I did that. Now the "Create Table" option in the navigation panel works fine and I think the modification added some more usability on that.
I have successfully finished my first task of my project. Next I 'm willing to work with adding the ajax behavior to the "database->privileges" option.