Planet phpMyAdmin

August 26, 2019

Overall, it’s been a great experience and I loved how google promotes students to actively participate in open source projects. Personally, I got to learn a lot of things while working with PhpMyAdmin right from February this year. I am thankful to the mentors Isaac Bennetch, Saksham Gupta, William Desportes, Deven Bansod and other community members for helping me through out the project.

The blogs posted during the project are:

PR’s created are:

Other than just resolving the issues, I also created a few of the issues which I found while working. Links to the issues created are:

by MOHIT KURi at August 26, 2019 02:45 PM

GSoC PMA: Week 11

So finally it’s here, “The final week of GSoC 2019”. At this point, we students need to submit code and evaluations and provide mentors all the details so that they could evaluate us.

On the issue “Designer should show tables from other databases by default”, this week I reached at a state where I can successfully save the coordinates and all the relevant details required to save a table in a page of the designer but the point where I was stuck was that how to print all the tables(both from the main database and the other database whose tables were added to the page). I tried a lot of things and faced many weird issues too like once when I wanted to print some variables on the page, I updated the main.twig file of the designer but no idea why, the designer page stopped loading and after a lot of efforts, I recovered this by deleting all the tables and pages data stored in the pma__pdf_pages and pma__tables_coords table of the phpmyadmin’s databases. During this issue, I tried a lthe time stayot of things and also faced a lot of issues, specially when I tried to display the tables on the page(when opened a page). I talked to my mentor Isaac regarding the same and we decided to hold it for a while and complete the other things before time. So I created a PR(incomplete as of now as the tables are being stored correctly but not retrieved correctly right now).

This issue took most of my time this week. Other than this, I submitted the evaluation, tried to finish documentation completely and look at the localStorage issue which I was facing earlier(if it works out, will make a commit soon). Now, the final results of GSoC 2019 will be announced on 3 September 2019. Let’s wait and work by the time.

by MOHIT KURi at August 26, 2019 02:38 PM

GSoC PMA: Week-10

Here is the second last working week of GSoC 2019. During this week(actually it’s more than a week, almost 10 days I guess), I looked into 2 issue which are “Designer should show tables from other databases by default” and “Designer page save fails if dB name contains period.”

While resolving the issue “Designer should show tables from other databases by default”, I have gone through the related discussion the code written by Raghuram Vadapalli in this PR. Last week I thought I have successfully reproduced the issue but while thinking of the approach I got to know that I was wrong, actually I was not able to form relations between between tables of the other databases. Thus I asked for the steps to reproduce the same with the mentors and also posted the same on the issue. I observed that even when there is no relation between tables of the different databases, we couldn’t save the page successfully. For this, I first looked at the code for displaying tables from other databases(by Raghuram Vadapalli), also I discussed the same with Raghuram sir for a possible solution but since he was not in touch with the organization for a while now so he couldn’t help me here. Isaac sir suggested, “What the solution should do is look in the phpMyAdmin configuration storage database (pmadb) and, if there’s a reference to the current database and another database, it should automatically show the other database”. With these initial suggestions and by looking at the code Raghuram sir, I thought that as per the display code, we can just add tables from 2 databases only but later on while adding the tables from multiples database, it’s successfully adding the tables. The additional layer(to save pages with tables from different database) should also work with any number of databases. I started with this(actually in starting I thought we can add tables just from 2 databases, which is wrong) and started tracking the database variable.

Other issue which was resolved this week is “Designer page save fails if dB name contains period.”. For this, I initially couldn’t reproduce/understand the issue exactly so asked mentor regarding the same. Isaac replied on the thread with the detailed steps to reproduce. Later on after tracing for a day, I figured out that exactly from where this issue arises. I starting planning it’s solution, I had 2 options. First, I could be highly specific regarding the issue and could make things work as long as there is just one dot in the database name OR I had another option which is, database name could have any number of dots but for this I needed to look things in more detail and calculate the number of dots in the database name and pass this value to the point where this break situation exists(this thing took me a lot of time). Once I got to know all the things, I finally started coding and created a PR resolving this.

While resolving the issue, I figured out a few of the issue which were already there in the designer section. I created the issues regarding the same too. If I am bit free in the upcoming days and by the time no resolves theses issues, I will look up for them. Here is the list of issues created:

I observed a thing while resolving the issues that, the tracing part took most amount of time whenever we try to resolve a issue. After tracing, if we are not stuck at any point, planning the solution(general solution or a particular/specific issue) took a lot of time.

Overall, it’s been a great experience working with PhpMyAdmin and the mentors. Thank you everyone who has been there to help me throughout the project.

by MOHIT KURi at August 26, 2019 02:32 PM

August 25, 2019

Nupur Agarwal

GSoC 2019: Final work summary

The main task of my project was to implement a more consistent UI for phpMyAdmin. This was achieved by applying bootstrap4 classes to the code an making corresponding changes in css files.

Weekly posts regarding my work are listed below:
-> https://pmagsocproject.wordpress.com/2019/06/26/gsoc-pmaweek1/
-> https://pmagsocproject.wordpress.com/2019/06/26/gsoc-pmaweek-2/
-> https://pmagsocproject.wordpress.com/2019/06/26/gsoc-pmaweek3/
-> https://pmagsocproject.wordpress.com/2019/06/26/gsoc-pma-week4/
-> https://pmagsocproject.wordpress.com/2019/07/11/gsoc-pma-week-5/
-> https://pmagsocproject.wordpress.com/2019/07/24/gsoc-pma-week6/
-> https://pmagsocproject.wordpress.com/2019/07/24/gsoc-pmaweek7/
-> https://pmagsocproject.wordpress.com/2019/08/04/gsoc-pmaweek8/
-> https://pmagsocproject.wordpress.com/2019/08/13/gsoc-pma-week-9/

The following PR’s were opened by me that addresses all the work done by me (some of these are still in work).
[open/ merged]
-> https://github.com/phpmyadmin/phpmyadmin/pull/15320 ,
https://github.com/phpmyadmin/phpmyadmin/pull/15302 : Applies grid structure over all the pages.
-> https://github.com/phpmyadmin/phpmyadmin/pull/15369 : Applies card classes and sub classes like card-body to convert boxes into card form.
->https://github.com/phpmyadmin/phpmyadmin/pull/15392 : Applies table classes to the tables.
-> https://github.com/phpmyadmin/phpmyadmin/pull/15400 ,
https://github.com/phpmyadmin/phpmyadmin/pull/15364 : Form classes applied.
-> https://github.com/phpmyadmin/phpmyadmin/pull/15419 : local UL lists converted to navs.
[closed]
-> https://github.com/phpmyadmin/phpmyadmin/pull/15298
-> https://github.com/phpmyadmin/phpmyadmin/pull/15299
-> https://github.com/phpmyadmin/phpmyadmin/pull/15361

I had a great working experience with phpMyAdmin community. and got to learn a lot over the period of these three months. At times, i faced problems but the people here make the work easier and guided me through various things.
I will try to keep contributing to phpMyAdmin in future.

by murex971 at August 25, 2019 08:37 PM

August 13, 2019

Mohit Kuri

GSoC PMA: Week-9

One of the problem I was facing last week has finally been resolved. In one of the issue, “Designer Save as enhancement”, earlier the changes were happening as expected but the problem was that it works only when we have a alert message. It doesn’t work without alert message(in last week, I wasn’t able to figure out why). Later on looking into the things, I figured out that there was a problem of synchronization here. To resolve this, I searched for a while and later on found .ajaxStop(). AjaxStop(): Register a handler to be called when all Ajax requests have completed. “Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the ajaxStop event. Any and all handlers that have been registered with the .ajaxStop() method are executed at this time. The ajaxStop event is also triggered if the last outstanding Ajax request is cancelled by returning false within the beforeSend callback function”(Source: https://api.jquery.com/ajaxStop/). Finally I created a PR to resolve the issue correctly.

Another problem which I was facing was with the issue “Designer should remember expanded/collapsed state”, here I don’t know exactly why I am not able to restore the states. Here the GET and SET values are correct and also I loaded the data into the appropriate variables correctly too, not sure where is the problem exactly. Still trying to figure it out.

Beside these 2 issues, I started working towards other 2 issues:
- “Designer should show tables from other databases by default”
- “Designer page save fails if dB name contains period .”

Regarding the issue, “Designer page save fails if dB name contains period .”, I remember that I was able to reproduce this while preparing the GSoC proposal but now I am not able to reproduce this. I have commented the same on the issue too. Let’s hope we figure this out as soon as possible.

Regarding the other issue “Designer should show tables from other databases by default”, I have looked at the discussions and code related to this(actually the discussion which lead to this issue) also, I am able to reproduce this one but not able to track this down(the point where we need to make the appropriate changes to resolve this).

In the upcoming week, I have to resolve these issues and discuss things with mentors if I face any problems. Also, I need to look at the refactoring work if I need to make any changes over there or not. I need to speed up the things as the deadline for the final evaluation is approaching and the work should be finished with complete documentation before that. Let’s hope I finish things on time.

by MOHIT KURi at August 13, 2019 01:53 PM

Nupur Agarwal

GSoC PMA: week 9

Converted the ul’s on the top of some pages to navs.
Also worked on the top bar of the pages.
Added more commits to the earlier opened PR’s of tables, forms.
With these, I have dealt with most of the elements. Now, will look at the final improvements and required changes.
The PR related to the navs class is:
-> https://github.com/phpmyadmin/phpmyadmin/pull/15419

by murex971 at August 13, 2019 09:26 AM

August 07, 2019

Mohit Kuri

GSoC PMA: Week-8

Last to last week we had our phase-2 evaluations and with the help of mentors, I successfully passed in the evaluation. For this evaluation, I thank to my mentors Isaac Bennetch, Deven Bansod, Saksham Gupta and William Desportes.

My mentors review was:
“ You’re continuing adequately with the project. You continue to produce code that is consistent with my expectations. In the past week, your communication has improved as we approached the deadline. Remember that regular blog posts are how the community and the group of mentors follows your progress, so stay on top of them, and even if a portion of code is undergoing review, further decision, or hasn’t yet been merged there should be other areas to work on. Keep pushing through and remember that the community has insight to help if you get stuck or need guidance. William and Saksham are both great resources aside from your mentor who are quite interested in the work you’re doing.”

From phase-2, I realized that I was late in posting blogs during the phase-2 coding period and I want to improve over this during the phase-3 coding period. By this way, mentors would have a idea about my progress, challenges I am facing, and how am I approaching the issues.

For the upcoming phase, firstly I have to resolve all the queries(if any) mentors had during the phase-2 evaluation and later on I have to resolve 4 existing issues which I have mentioned in my GSoC proposal(has the possible approach too) too. I will try to keep my last few day free so that I could give the things a final touch wherever needed. Here is the list of the issues to be resolved:
- Designer should remember expanded/collapsed state
- Designer should show tables from other databases by default
- Designer save as enhancement
- Designer page save fails if DB name contains period

In the 1st week of the 3rd phase, I first started with debugging the code written for the issue “Designer should remember expanded/collapsed state” and submitted with this PR. Issue firstly here in this PR was that it wasn’t populating the tables correctly after making changes(mentor Saksham Gupta mentioned this in the comments of the PR, later on I observed the same in the incognito tab where it doesn’t store any cache). For this issue, rather than considering all the tables at firstly, I made changes for one of the table and printed the GET and SET values in the localStorage. The values stored are the same but still it isn’t restoring the, not sure why. I have shared the screenshots and the code(with changes) for the same too at the comment section in the PR created. Also, I would like to suggest to refer to the PR for better insights.

Other than this issue, I started working on one more issue which is “Designer Save as enhancement”. To resolve this, I first inspected the elements which should trigger the changes and get to know their ID’s. After this, I tried to figure out the location where the changes are required to be made(Saksham Gupta’s PR on the same issue from the last year helped me here). After getting an idea about the code that will make it work, I added that code in the move.js file of the designer. I don’t know exactly why it’s not working if I remove one of the alert message(alert(‘yoo1’); in the screenshots available). Screenshots related to the same(look at the description of all the images for details about each step):

After clicking “ok” on the alert message

Changes(in move.js) due to which above results are reflected

As requested “A Designer enhancement would be in the Save As page: we can automatically toggle the radio button to “Create a page and save it” when the use clicks the bottom text box.” the changes were happening but if we remove the alert(‘yoo1’); line, it’s not working the same way. Not sure exactly why right now.

For the upcoming week, I have to:
- write a blog post
- try to figure out exactly whats the problem here with both of the issues which we are trying to resolve
- Update mentors on a regular basis about the work

by MOHIT KURi at August 07, 2019 10:10 AM

August 04, 2019

Nupur Agarwal

GSoC PMA:week8

Table classes have been added to the remaining pages of pma.
Done with applying form related classes to elements of forms like ‘form-control’ to ‘legends’ and ‘select’ , ‘form-check, form-check-input, form-check-label’ to the ‘divs, checkboxes, associated labels’ respectively , etc.
The work can be seen in the following PR.
-> https://github.com/phpmyadmin/phpmyadmin/pull/15400

by murex971 at August 04, 2019 10:31 AM

July 24, 2019

Nupur Agarwal

GSoC PMA:week7

I completed with applying the table classes across all the server pages and making the required/relative css changes too.
The following PR was made.
-> bootstrap table classes added to all classes
Next, I begin with adding form classes and adding table classes to other pages than server.
A PR related to form classes will be soon opened by me.

by murex971 at July 24, 2019 10:20 PM

GSoC PMA: week6

I completed adding card classes to all the remaining pages.
Next main elements that I found on the pages were forms and tables.
I started working on tables and applied required classes to the tables across the pages.
This required changes in css also like need of the class “data” was completely eliminated.
So I also applied the required css changes altogether.

by murex971 at July 24, 2019 10:14 PM

July 22, 2019

Mohit Kuri

GSoC PMA: Week-7

At the end of week-6, I have refactored move.js of the designer section partially and also completed the refactoring work for 2 other files(init.js and page.js). Since there were no reviews by then, I started refactoring rest of the code of move.js.

I have completed the refactoring of move.js by Tuesday(i.e. 16th July). Here I just need to replicate the changes which were similar to the work already done and mentioned in the blog post for week-6. Later this week, I have written and posted the blog posts for week-5 and week-6 which were due from a long time.

Once I was done with the refactoring work and documentation work, I have informed about these things to my mentor Isaac Bennetch and shared the relevant links with him. I have also asked for the reviews from Deven Bansod and Saksham Gupta.

By the time, I have also refactored other file, history.js. Devend Bansod pointed out the similar mistake which I have made in the phase-1 work, thus I need to make the similar changes over here too.

At this point, we have completed the refactoring work at least once(waiting for the reviews from the mentors). Also during this waiting, I double checked the syntax's which were mentioned in the blog post for week-6 and checked if all the changes made are good to go or not.

Rather than waiting for the reviews, we started working on one of the issues mentioned for the phase-3 work. The issue was “Designer should remember expanded/collapsed state”. For this, the proposed solution(in my GSoC proposal) was to use the localStorage(Stores data with no expiration date, and up to 5MB per origin). I started reading about the localStorage in a bit detail, during this I came across a doubt: Difference between window.localStorage VS localStorage. An article on Stack OverFlow has this solution which resolved my doubt.

Once I was aware of the working of the localStorage, I started searching that how and where do I need to make changes such that this issue can be resolved. For this I started a local server and opened the designer section for one the local database available. On the designer section of that database, there are different expanded and collapsed states like:

Here the arrows on the top left of each of the table represents the expanded/collapsed state.
“>” denotes Collapsed state
“v” denotes Expanded state

I inspected these icons on the browser and get to know the id associated with these. With help of this id, I tracked(using the id: “id_hide_tbody_”) the relevant code from where the job for expanding and collapsing is handled(read and observed the code around this id. Also, I confirmed this by printing a few things using console.log()). Currently, my next job to resolve this issue is to figure out how and where I can use the localStorage over here.

This is the code snippet related to the section from where the expanding and collapsing is done:

Summary of work related to the phase-2 is:
Commits in the following PR’s:
- https://github.com/phpmyadmin/phpmyadmin/pull/15378
- https://github.com/phpmyadmin/phpmyadmin/pull/15382
- https://github.com/phpmyadmin/phpmyadmin/pull/15345
- https://github.com/phpmyadmin/phpmyadmin/pull/15339
- https://github.com/phpmyadmin/phpmyadmin/pull/15318
Blog post other than this are:
- https://medium.com/@ikurimohit/gsoc-pma-week-5-fafb4c865e2a
- https://medium.com/@ikurimohit/gsoc-pma-week-6-31cba43a775a

Other than this as informed, I am working on the issue #12286 which is “Designer should remember expanded/collapsed state”. Also since there are still 2 more days remaining for the phase-2 coding period, I will update the work for that in this blog only.

UPDATE FOR LAST 2 WORKING DAYS OF PHASE-2:
As informed, I was trying to resolve issue #12286. For this I have opened a PR as of now. For this, I need to go through a few of the articles related to the localStorage so that I could know about its syntax and its other properties. At first I got stuck at a lot of points but later on, things started making sense and I was able to track what happens first(I need to print a lot of things and track them so that I could know which function is called upon a particular action). There is a function “smallTab” from where all the expanding and collapsing is done. This function was called using AJAX calls and that is where I stored data in the localStorage. To retain the state, I restored the data stored in the localStorage in the main function of the move.js file. To make sure this works,I printed a lot of things on the console and checked them multiple times but I am still unable to figure out what’s the exact issue here. For once, I have opened this PR so that if I am unable to figure out what’s the issue, someone from the community can point it out.

by MOHIT KURi at July 22, 2019 04:02 PM

July 21, 2019

Apoorv Khare

GSoC PMA week 8: Work report before 2nd evaluation

This was my 8th week of coding in GSoC and next would be second evaluation. My main task for the 8th week was to complete the composer package and host it as a stand alone repository along with completing my all previous work .

For the composer package, I wrote the package properties as composer.json and all functionalities in a well structured manner. The composer works completely stand alone of phpMyAdmin, stills gives status of configuration variables in a similar manner. Also I added tests so that the package can be directly tested in the terminal rather than only in the browser.

After discussing with my mentor, I am hosting it on phpMyAdmin’s github as a separate repository.

I will add the repository link and setup steps to this blog soon.

by Apoorv Khare at July 21, 2019 04:37 PM

July 20, 2019

Apoorv Khare

GSoC PMA week 7: Creating a composer package

GSoC PMA week 7: Implementing Go-To Navigation

As per my project proposal my this weeks’ task was to start planning and working on my next task, which is to create a separate composer package having the phpMyAdmin’s mysql recommendation configurations. But since some of my last week’s task was remaining I also had to cover that.

I started with writing the backend functionalities for the navigation tab. Which included fetching and rendering of the tables and databases in the view. Integrating KBsearch using AJAX requests for realtime filtering and lastly linking various tables and databases to their views.

Finally the functional Navigation panel was achieved.

Also the search worked correctly and seamlessly.

Then I started with working on the composer package. I decided what all configuration variables to include in it.

Then I created a basic structure of the package using composer init and started with writing the logic by this and was expected to complete this by the next week before the 2nd evaluation.

by Apoorv Khare at July 20, 2019 11:48 AM

GSoC PMA week 6: Implementing Go-To Navigation

My this weeks task was to implement the navigation panel as planned last week. I started with placing it in the top nav menu and creating a separate controller and view for the navigation tab. My next task was to write the functionalities for the controller.

Unfortunately, I felt ill this week and was suffering from conjunctivitis so was not able to work further.

So I decided to shift this next week along with the other task planned to be done in the 7th week.

by Apoorv Khare at July 20, 2019 11:21 AM

GSoC PMA week 5: Go-To Navigation

It’s been a week since, the first evaluation. I’ve successfully passed the first evaluation. My task for this week was to work on adding a completely new feature in the phpMyAdmin portal. It is to provide them with a navigation panel so that different views can be easily accessed when ever required because sometimes the server has many tables, databases and other configuration and setting pages, it sometimes becomes difficult to navigate through for the user. So the feature is intended to provide them a better experience while working.

I started with planning out how the navigation panel is to be implemented, which included placement of navigation tab, list of views to be added for navigation, icon for navigation tab, working of search filter etc.

I came up with the following solutions for these:

Placement: I decided to keep it in the top menu bar as it would be most easily accessible there.

List of views: Initially I added all the databases and tables in the list. Other views can also be added easily as and when required.

Search Filter: I decided to use the KBFilter already used at many places in PMA.

by Apoorv Khare at July 20, 2019 11:08 AM

July 18, 2019

Mohit Kuri

GSoC PMA: Week-5

Finally, the results for the phase-1 evaluations were out and I successfully passed. Thanks to my mentor Isaac Bennetch for reviewing my work and providing feedback at regular intervals.

Now for the upcoming weeks and Phase-2 work, we will firstly resolve and make the possible changes if any for the work submitted for the phase-1. Once done, we will move ahead with the refactoring and improving the file move.js of the designer section. Also, before phase-2 evaluations, I need to complete all the refactoring and improving work related to the designer section. Also, as planned, we need to resolve some issues which are already there in the designer section for the phase-3 work so it's good if we finish the refactoring work till phase-2.

That’s all the planning, now let's talk about the work done in the 5th working week of GSoC with PMA. During this week, as per reviews, one of the mentors Deven Bansod pointed out a great point which is:
while refactoring, I was changing document.getElementById(‘query_Aggregate’).style.display = ‘none’; to $(‘#query_Aggregate’).style.display = ‘none’;
There are a few things which were wrong with this like,

I was missing the difference between jQuery Object and DOM element. The difference is that, $(‘#selector’) returns an array of the objects whereas document.getElementById(‘selector’) returns the first DOM object that is matched with the selector.

There were a few links which I found which help me to understand this is:

During this week, I have just started refactoring move.js, so I made changes in the following format:
changed from document.getElementById(‘selector’) to $(‘#selector’)[0]
I kept rest of the things as same, i.e.
changed from document.getElementById(‘selector’).style.display = ‘none’; to $(‘#selector’)[0].style.display = ‘none’;

This is all the work done in the week-5, planning to create a PR soon related to refactoring of move.js with some partial changes so that mentors can review and provide feedback on the same so that once we are all on the same page after all the refactoring and reviews being resolved, I can easily replicate the same for the rest of the lines in the move.js.

by MOHIT KURi at July 18, 2019 06:47 AM

GSoC PMA: Week-6

As started the work in last week, I finally created a PR which has partially refactored move.js file(around +60, -60 changes were there). I made changes in the following format(for example):
Changed from document.getElementById(‘selector’).style.display = ‘none’; to $(‘#selector’)[0].style.display = ‘none’;
i.e. changed document.getElementById(‘selector’) to $(‘#selector’)[0] everywhere.

For testing purposes, I added an example to show that these kind of changes won’t fail and will work. Here is the example as mentioned in the PR:
Using document.getElementById(‘selector’)

Using **document.getElementById(‘selector’)**

After creating this PR, Deven Bansod commented:
“this would work for the elements selected with IDs only. I’d ideally use .css() method to set the styles instead of manually selecting the first element and setting the native properties. IMO (even though it works) this current approach sort of doesn't use JQuery's power at all.
Using .css() would auto-loop over all the selected elements, so would be easier to read when we're selecting based on input types, classes etc”
Further, one of the other mentor, Saksham Gupta supported this comment and added “Don’t try to hard-code things. As you’re trying to refactor the code, try to do it in such a way that would let other developers work on the code without much changes to your code. It gets extremely difficult to manage such things on such a large scale.”

With those comments, I finally got the good picture and started working towards this. Thus I started changing the things again, here are the type of changes I have done:

From “document.getElementById(‘selector’).style.display = ‘none’;”
to “$(‘#selector’).css(“display”, ‘none’);”
From “document.getElementById(‘selector’).style.position = ‘absolute’;”
to “$(‘#selector’).css(“position”, ‘absolute’);”
From “document.getElementById(‘selector’).style.zIndex = ‘103’;”
to “$(‘#selector’).css(“z-index”, ‘103’);”
From “document.getElementById(‘selector’).style.visibility = ‘visible’;”
to “$(‘#selector’).css(“visibility”, ‘visible’);”
From “document.getElementById(‘selector’).style.left;”
to “$(‘#selector’).offset().left;”
From “document.getElementById(‘selector’).style.top;”
to “$(‘#selector’).offset().top;”
From “document.getElementById(‘selector’).style.left = value + ‘px’;”
to “$(‘#selector’).offset({left: value});”
From “document.getElementById(‘selector’).style.top = value + ‘px’;”
to “$(‘#selector’).offset({top: value});”
From “document.getElementById(‘selector’).width = value;”
to “$(‘#selector’).width(value);”
From “document.getElementById(‘selector’).height = value;”
to “$(‘#selector’).height(value);”
From “document.getElementById(‘selector’).style.width;”
to “$(‘#selector’).width();”
From “document.getElementById(‘selector’).style.height;”
to “$(‘#selector’).height();”
From “document.getElementById(‘selector’).offsetWidth;”
to “Math.round(parseFloat($(‘selector’).outerWidth()));”
From “document.getElementById(‘selector’).offsetHeight;”
to “Math.round(parseFloat($(‘selector’).outerHeight()));”
From “document.getElementById(‘selector’).checked”
to “$(‘selector).is(“:checked”)”
From “document.getElementById(‘selector’).checked = false;”
to “$(‘selector).prop(‘checked’, false);”
From “document.getElementById(‘selector’).offsetLeft”
to “$(‘selector’).position().left + parseInt($(‘selector’).css(“marginLeft”))”
From “document.getElementById(‘selector’).offsetTop”
to “$(‘selector’).position().top + parseInt($(‘selector’).css(“marginTop”))”
From “document.getElementById(‘selector’).innerHTML === ‘v’”
to “$(‘selector).html() === ‘v’;”
From “document.getElementById(‘selector’).innerHTML = value”
to “$(‘selector).html(value);”
From “document.getElementById(‘selector’).className = value;”
to “$(‘selector).addClass(value);”
From “document.getElementById(‘selector’).value”
to “$(‘selector).val()”
From “document.getElementById(‘selector’).className === value”
to “$(‘selector).hasClass(value)”

I have tested all these on w3school. For testing, I have opened something in standard vanilla JavaScript with DOM objects on their Tryit browser and made changes as per jQuery and run the same thing. Thus there was no change in results before and after the changes were made, thus validating the syntax. Here is an example for one of the above situation:

Functionality (Check checkbox button checks the box and uncheck checkbox button unchecks the box) same from both the above codes

Here looking for the appropriate syntax and validating them took me a lot of time. And finally after these things, I committed the changes with no more hard-coded things.

Also side by side, Deven Bansod commented and pointed out the same issues with the previous PR which were part of phase-1 work. Once when I was done with the partial refactoring of move.js, I have done and resolved the same for these files as pointed out by Deven:
- https://github.com/phpmyadmin/phpmyadmin/pull/15339
- https://github.com/phpmyadmin/phpmyadmin/pull/15338

So now, I will be waiting for the reviews from mentors. Once made all the requested changes, we need to replicate the same for the rest of the move.js file and history.js file. Also, need to complete the documentation work in the week-7 of GSoC.

by MOHIT KURi at July 18, 2019 06:47 AM

July 11, 2019

Nupur Agarwal

GSoC PMA: Week 5

As I’d decided with mauricio that I will apply bootstrap classes on the individual elements across different pages once I finish with the basic layout(grid structure), I’ve started working on that line.

I have applied form classes to the login page. The following PR addresses the same.
https://github.com/phpmyadmin/phpmyadmin/pull/15364

Bootstrap card classes have also been added to home page.
https://github.com/phpmyadmin/phpmyadmin/pull/15369

by murex971 at July 11, 2019 06:18 AM

June 26, 2019

Nupur Agarwal

GSoC PMA:week 2

Nupur Agrawal

Mauricio and i discussed and he suggested me to work on a separate and a new branch gsoc-bootstrap .

I’ll do all my project work on this branch and will get it merge to the master at the end of project.

I continued implementing the bootstrap grid structure to further pages. That part was easy for pages like ‘variables’ but really tricky for some pages like ‘users’ as html is still not completely extracted from php files to twig. Also, there are pages for which parts of html are extracted to twig of templates and parts are still there in php files.

by murex971 at June 26, 2019 03:02 AM

GSoC PMA : week4

Nupur Agrawal

As this was the last week before first evaluation, I summed up with the work I proposed to do before my first evaluation, that is, forming a basic layout for all the pages.
I did the finally editions to the basic layout of the required pages and added some commits to my previously opened PR’s.
Next, I will move to implement bootstrap to various elements of these pages.

by murex971 at June 26, 2019 03:02 AM

GSoC PMA:week3

Nupur Agrawal

-> https://github.com/phpmyadmin/phpmyadmin/pull/15320

This PR contains bootstrap grid structure for ‘settings’, ‘exports’, ‘imports’, ‘charset’, ‘engine’, ‘replication’, ‘status’ pages.

by murex971 at June 26, 2019 03:02 AM

GSoC PMA:week1

Nupur Agrawal

I discussed with mauricio about how to start and implement the things and we decided to implement grid structure for all the pages first.
So I started with the login page and home page and got it worked out there.
-> https://github.com/phpmyadmin/phpmyadmin/pull/15298

->https://github.com/phpmyadmin/phpmyadmin/pull/15299

The main idea was to apply container class to the page_contents and then apply row and the col classes to the different element that it contains.
This will make the pages more responsive according to the different sizes and also, there will be no need to provide the elements css properties like padding, margins as the structure handles that part efficiently.

by murex971 at June 26, 2019 01:04 AM

June 25, 2019

Apoorv Khare

GSoC PMA week 4: Work report before 1st evaluation

I have now completed 4 weeks of coding in GSoC and the first evaluation is under way. My main task for the 4th week was to make up for anything left or include any additional changes suggested. I spent most of the time refactoring my code, making changes as suggested by my mentor and other PMA members and documenting my experience till now for the 1st evaluation.

In these four weeks, the first task I did was to fix the theme generator tool which took 2 weeks. The next work was to create Favorite Database feature. The details about these two are present in my previous blogs. I also worked on adding comments to my code so as to make it easy to understand for other developers.

In the coming days I will be working on writing some documentations.

by Apoorv Khare at June 25, 2019 01:08 PM

June 24, 2019

Mohit Kuri

GSoC PMA: Week-4

This is the last week of coding before start of first evaluations. This week is more of a make-up week with a lot of discussions with mentors so that we can complete the work for first evaluations with complete documentations.

After all these 4 weeks, all JavaScript files of designer other than move.js(the file with more than 2.1k lines of code, which will be refactored in phase-2) and all the documentations have been completed.

Documentations:

[COMMUNITY BONDING] https://medium.com/@ikurimohit/google-summer-of-code19-with-phpmyadmin-refactoring-and-impoving-designer-9dfe9663cf4
[WEEK-1] https://medium.com/@ikurimohit/gsoc-pma-week-1-e8ac589a4103
[WEEK-2] https://medium.com/@ikurimohit/gsoc-pma-week-2-7311632612b4
[WEEK-3] https://medium.com/@ikurimohit/gsoc-pma-week-3-d04d226bc338

Pull requests created in the due time:

In this week, I also discussed and asked about some suggestions about my work from my mentor, Isaac Bennetch. Review from my mentor were good and we are now ready to go ahead for our work of phase-2. Also, I have started working on the refactoring of the file move.js of designer(phase-2 work) and created a PR for the same this week.

This is all for this week, next week will be our phase-1 evaluations and if successfully passed, lets continue from here in the phase-2.

by MOHIT KURi at June 24, 2019 08:10 PM

June 23, 2019

Apoorv Khare

GSoC PMA week 3: Adding new Favourite Database feature.

I have completed my 3rd week of GSoC. My task for this week was to begin with a new feature which is to provide an option to users to mark databases as favorites. So that they can be easily accessed when ever required because sometimes the server has many databases and it becomes difficult to manage for the user. So the feature was intended to provide them a better experience while working.

The feature is very similar to the existing favorite table feature. My job was to replicate similar functionalities for databases.

The main problem was to update the database’s favorite status without reloading the page. For which I used ajax requests to send data to the backend and in return the json response was rendered in the frontend.

I had to add a controller which included functions to handle addition, removal and viewing of favorite databases. Finally the feature was complete the functionality worked fine.

by Apoorv Khare at June 23, 2019 12:26 PM

June 21, 2019

Apoorv Khare

GSoC PMA week 1: The coding begins !!

It’s been a week since I’ve been working on my Google Summer of Code project with phpMyAdmin and my work for the first two week was to fix a very important tool in PMA, which is Theme Generator. The tool was build by my mentor himself as his last year’s GSoC project. The tool allows user to create their own custom themes seamlessly.

Recently PMA shifted all their theme’s styles from css to scss. Which stopped the working of the theme generator. The first two weeks of my GSoC project were dedicated to fixing the theme generator.

I divided my work into two parts. For the first week I decided to fix the theme generator page which has the colour-picker tool for the user to choose from, four type of colour palettes: Monochromatic, Complementary, Analogous and Triadic and other details of the theme to be filled by the user. It also consisted of a preview option. For the second week I decided to change the files generated by the theme generator for new themes to be compatible with new rendering system. Initially they were in .css.php format but now had to be converted to pure scss files.

When I started with my work, the broken theme generator looked somewhat like this.

It took a little time to understand the rendering system in PMA as the code is quite vast. My major work was to pass the php variables to sass file and use them as scss variables in pure scss files. I went through the styling of theme generator, which was css in (theme_generator.css.php file) and JS for colour picker and previewing. I changed the styling to theme_generator.scss file and made the theme generator pick up css from there and was finally able to get it rendered as required.

by Apoorv Khare at June 21, 2019 03:34 PM

GSoC PMA week 2: Generating custom themes

I’ve completed my second week of GSoC and the main task for this week was to change the files generated by the theme generator for new themes to scss files which were css files earlier. The files were generated dynamically through PHP code.

Initially when the theme generator generated css files after successfully creating a new theme, when the new theme was selected. The pages rendered like this

The main challenge was that the user selected variables were as PHP variables and were required to be passed to scss files. For this we used PHP files to dynamically generate the scss files by passing the variables as strings.

A lot of code needed to be changed in format though the logic was mostly same. I had to add couple of new controllers which governed file generation as well.

And finally the theme generator worked all well. And new custom theme can be generated now.

by Apoorv Khare at June 21, 2019 03:34 PM

June 18, 2019

Mohit Kuri

GSoC PMA: Week-3

To resolve the issues(merging all those commits in a single one) which were there in the PR created last week, I learned how to squash and rebase(as suggested by my mentor). But still, while squashing I faced some other issue i.e. after I enter the command to squash 7 commit messages but I got 784 commits in the next window which we get after entering the command on the terminal. Since I couldn’t figure it out why was I getting this, I copied the code and made a separate PR. This PR doesn’t have any of those issues but the other few issues in this PR were the following ones:

Travis builds error
An issue with merging many lines into a single line. Finally, we divided it into a single line only but with the logical division which was existing earlier.

All these issues have been resolved as of now. In this PR, I have removed js with jQuery and merged multiple lines into a single one. Also, I have completed the documentation work until last week. Here are the links to the previous 3 blogs:

For the upcoming week, I will be refactoring and improving other JavaScript files(not move.js as the lines of code in this file is way too much) and also I will be documenting weekly report. Since we have our first evaluations from 24–28th June thus we will be finishing up with the things as soon as possible.

by MOHIT KURi at June 18, 2019 11:28 AM

June 14, 2019

Mohit Kuri

Google Summer of Code’19 with PhpMyAdmin — “Refactoring and Impoving Designer”

Google Summer of Code’19 with PhpMyAdmin — “Refactoring and Improving Designer”

I would like to thank Google for enabling students to participate in open source development through GSoC. Also, I am very happy to announce that I’ll be working with phpMyAdmin this summer on the project ‘Refactoring and Improving Designer’.

“ Code refactoring should not be done just because we can.”

When the designer section of phpMyAdmin was initially written, there was no jQuery. But now since it exists and due to the advantages of jQuery over JavaScript and it’s a necessity over here, we could make this section better by making use of jQuery[Refactoring] and also resolve the existing issues[Improving]. Also, this project will be beneficial for both the important stakeholders, i.e. developers and user community.

This project will be beneficial for both the important stakeholders, i.e. developers and user community.

Developers:

It will simplify HTML document traversing, event handling, animating, Ajax interactions, etc. Also, it is very powerful and easy to use
Since jQuery has been optimized thus, developers can do the same things in fewer lines of code.

Users:

Reduced load time
It will be more secure once we reduce the number of global variables and functions
Existing issues faced and reported by the users will be resolved

Also, while refactoring we have to follow good coding practices so that a new developer won’t face a problem in understanding the code.

Currently, the designer contains the following 6 JavaScript files:

In this time period, I will be refactoring different JS files for the first 2 phases and will be resolving some issues in the last phases of the GSoC timeline.

Project Schedule

May 6 — May 26, 2019

Bonding with the community
Get more familiar with the designer section
Discuss the approach proposed of both the refactoring and issues, improvise based on the discussion

May 27 — June 2, 2019

Refactor “history.js”
Testing

June 3 — June 9, 2019

Document and verify it with the mentor
Refactor other small sized files

June 10 — June 16, 2019

Change things as per review
Refactor all files other than “move.js”(2.1K+ lines of code)
Test work on a regular basis

June 17 — June 23, 2019

Documentation and testing
Verify work from the mentor
Complete and submit work for phase-1 evaluation

First Mid evaluation: June 24–28, 2019

June 29 — July 5, 2019

Update the files based on reviews of mentor
Start refactoring with “move.js” file

June 6 — June 12, 2019

Finish refactoring of “move.js”
Test it properly

July 13 — July 21, 2019

Verify work
Refactor and make it more readable
Finalize whole refactoring work
Document and test the complete work
Submit work for phase-1 evaluation

Second Mid evaluation: July 22–26, 2019

July 27 — August 2, 2019

Discuss and finalize the possible solution of all the issues with mentors

August 3 — August 9, 2019

Submit PR for : #14945, #13371

August 10 — August 16, 2019

Submit PR for: #13587, #12286

August 17 — August 26, 2019

Makeup duration
Complete all the remaining work
Document and testing
Submit final work product

August 26 — Sept 3, 2019

Mentors Submit Final Evaluations
Final results of Google Summer of Code 2019 (3rd Sept 2019)

I’ll be updating my weekly progress of the project on this blog.

by MOHIT KURi at June 14, 2019 07:48 PM

June 13, 2019

Mohit Kuri

GSoC PMA: Week-2

During week-2, I have created my first PR history.js — improving performance targeted at “gsoc-db-designer” branch. It’s merged after a lot of issues and discussions. Some of the issues were:

Merge Conflict: It was because I started my work with the master branch and not from the already created “gsoc-db-designer” branch. Variable names were also different in this branch as compared to the master branch.
ESLint error: While making changes, I made a few changes at places due to which I got this error.

Finally, this PR is merged. In this PR, I have done some improvements like earlier, we were calculating the length of an array each time in a for loop but now we have stored the length of the array outside the loop and use this variable inside the loop. Thus improving the performance of the designer’s history section.

Also, in the same week, I have started and submitted work for the second PR(link to the PR which was closed due to some issues). Here in this PR, I have made some issues at the start and due to which this PR includes the commit messages of the first PR too.

For next week, I have to resolve these things and complete the rest of the work.

by MOHIT KURi at June 13, 2019 09:38 PM

GSoC PMA: Week-1

Earlier before the GSoC results, I had a conversation with my mentor and I got to know that project (Refactoring and Improving designer) is unlikely to come as a GSoC project this year as there was less number of mentors available during the coding period. Thus I created a PR related to this project so that at least I can push the work which I have planned. Here is a link to that PR( https://github.com/phpmyadmin/phpmyadmin/pull/15165).

Later when GSoC results were out and I got selected to work on this project, I have closed the previous PR and discussed how are we gonna work on this project.

Initially, I suggested — “I am planning to create a single PR for the whole refactoring work in the designer section. Good to go?” But later on discussion with a mentor Maurício Meneghini Fauth, we decided that we can create a separate branch “gsoc-db-designer” at upstream where I can create all my PRs related to the project. Its because we don’t think it(everything in a single PR) is a good idea, as it is very difficult to review such a big pull request. And thus, it is better to open small pull requests that can be merged into the master branch or into a new branch just for this.

So finally after this discussion, I have started my work towards my first PR for my GSoC work.

by MOHIT KURi at June 13, 2019 12:31 AM

June 10, 2019

Apoorv Khare

Google Summer of Code ’19 With phpMyAdmin

May 6, 11:30 pm, I went to the GSoC website, hit the refresh button and searched my name under the list of selected projects. My name popped up and I was over the moon and it took me a while to let it all soak in.

Hello everyone!

I’ve been selected as a Google Summer of Code developer for the year 2019. Over the Summer I’ll be working with phpMyAdmin on the project ‘General Improvements’ under my mentor Saksham Gupta.

phpMyAdmin is currently well equipped and widely used web interface for MySQL and MariaDB. It has an Intuitive web interface and support for most MySQL features like managing databases, tables, columns, relations, indexes, users, permissions, etc along with a number of other features.

Still, there are a number of improvements and new features that can be added in the current version of code. Though they do not hinder the user’s working, adding them would make the user experience more seamless and smooth. The aim is to make the code free of, and less prone to, bugs, and add features to further enhance the accessibility, adaptability, and user-friendliness.

Further, I would like to throw some light on how I went about contributing to the organisation and my application process.

After the list of organisations was introduced, I looked through the list to find organisations with a familiar technology stack and project aligned with my interests. phpMyAdmin was one such organisation. I had some prior experience with Open Source as I applied for GSoC last year too.

Firstly I went through their project ideas and one of the ideas caught my eye. It was ‘General Improvements’ project which included adding new features and fixing some critical issues in the current platform. It included:

Fixing Theme Generator: A tool to create custom theme.
Adding Favourites Feature: Ability to mark important database and tables.
Creating composer packages: phpMyAdmin configuration files as a composer package
and some other Bugs and improvements in the code.

I immediately decided to apply for this project. I started with scouring some bugs and fixing them, this not only supplemented my PHP knowledge but also helped me in understanding the huge code base, contributing guidelines, healthy development practices, quality of code expected, etc. and not to mention the hands-on experience of working on a real-time project for an international organisation under brilliant mentors.

I frequently interacted with the community on their Gitter channel or on github issues with questions about their products and they were helpful in guiding me throughout. At the same time, I tried to help other developers in the community with setting up the projects, reviewing their pull requests, failed builds, etc. Even though I wasn’t always aware of the solution, I always tried to look up the errors and go through the relevant documentation to solve them and this was a win-win situation because even I ended up learning a lot in the process.

I started with my proposal couple of weeks before the deadline and got them reviewed by the mentor a week before, made relevant changes and submitted the final proposal. I had to follow a fixed template provided by the organisation for the proposal.

After submitting my proposal, the next month majorly went into preparing and appearing for my end semester examinations, I kept contributing to the organisation and interacting with the community members and of course GSoC results were always on my mind.

And finally the result came in my favour and on 6th may I received the mail:

In the following blogs, I will document my experience working on the project and all that I learn in the process. :)

August 26, 2019

August 25, 2019

August 13, 2019

August 07, 2019

August 04, 2019

July 24, 2019

July 22, 2019

July 21, 2019

July 20, 2019

GSoC PMA week 7: Implementing Go-To Navigation

July 18, 2019

July 11, 2019

June 26, 2019

June 25, 2019

June 24, 2019

June 23, 2019

June 21, 2019

GSoC PMA week 1: The coding begins !!

June 18, 2019

June 14, 2019

Google Summer of Code’19 with PhpMyAdmin — “Refactoring and Improving Designer”

Project Schedule

June 13, 2019

June 10, 2019

May 29, 2019

May 09, 2019

April 26, 2019

April 20, 2019

March 20, 2019

March 10, 2019

March 03, 2019

January 31, 2019

January 22, 2019

November 30, 2018

November 14, 2018

October 20, 2018

October 19, 2018

October 17, 2018

October 15, 2018

October 10, 2018

October 06, 2018

July 27, 2018

June 10, 2018

June 09, 2018

June 08, 2018

June 01, 2018