Planet phpMyAdmin

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. :)

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

May 29, 2018

May 28, 2018

April 28, 2018

April 14, 2018

April 09, 2018

April 05, 2018

April 02, 2018

March 26, 2018

March 23, 2018

March 21, 2018

March 13, 2018

March 06, 2018