JavaScript to PHP and back again

Setting up a PHP backend and accepting JavaScript variables to PHP and dealing with output

Richard Quinn
Jan 31 · 4 min read
Photo by Lukas Blazek on Unsplash

I have recently undertaken a project at work which required me to display the output from 950+ tests and analyse the results. It also required me to save the data from each run in a MySQL database and then display graphs based on the data from previous runs. I scripted it all up in python. Getting the output of the tests into a tidy form was pretty straight forward. The challenge for me however was both the JavaScript and the PHP having not written much in either language.

The first thing to do is make a connection to your MySQL database:

Pretty standard connection boilerplate (connection.php)

The next php file I wrote was the file that checks which tables are in my database, and if it doesn’t find one called ‘runs’, it creates it.

create_db.php

Now, the very cool thing about php, is having these little modular pieces of code spread across different files and being able to use them in your main code. Note that in , it uses the variable , which was defined in . So, these two files would only work if they are called in order. You call and execute php scripts by using the keyword ‘include’. So from another php file we would do the following:

I wrote the HTML and JavaScript that displayed the data. I continued to use small blocks of code in php files to carry out different MySQL queries and return different graphs.

JavaScript file calling different php files

Here, a Javascript function is called each time a drop-down menu is changed in HTML and a different graph is selected. Depending on the selection, a different php file is executed. These mostly follow the same process; carry out a MySQL query and use the pulled data to draw a graph and insert it into a target . I include one at random here:

false.php

Since this php file is included inside a JavaScript function, there is no need for further flags. The MySQL query is returned inside a JavaScript array, this array is then added to a standard google visualisation API call.

Now the cool bit… for some of the graphs, the user would select the filters, so the MySQL call was not static. For these graphs we need to use JavaScript to send a variable to a php file. The following example is a function that is called when the user changes the value on a slider bar in the HTML.

Here the function accepts two arguments. is the new value of the slider bar, and is the id of the slider bar. is the name of the php file without the ‘.php’ bit. To send the value of the slider bar to php we use a function which use. Here the type is set to the url is + ‘.php’, the data is the value of slider bar and here we call it . There is then a success function which deals with the output of the php call.

My success function might seem strange, as I could have just used the function to convert the php string back to an array, but I read a lot about being careful using this function when dealing with MySQL queries as they can be used to corrupt data. This is probably overly cautious, but I and in order to get to the data. I then insert this data in the google visualisation API call.

In the php file, we scoop up that variable in with the line. I have then used to output the data from the MySQL query. This is what is picked in the success function in the JavaScript function.

I really enjoyed working on this project and have learnt some new skills. I hope this article has helped you with some of the basics of this process.

A Journey Through My Software Development Career

Thoughts, Musings and Lessons Learned

Richard Quinn

Written by

“Old man changes career to become a Software Developer after 20 years in an unrelated sector”

A Journey Through My Software Development Career

Starting with an Apprenticeship in 2019, follow my career in Software Development as I navigate an unknown world (unknown to me, anyway!)

Richard Quinn

Written by

“Old man changes career to become a Software Developer after 20 years in an unrelated sector”

A Journey Through My Software Development Career

Starting with an Apprenticeship in 2019, follow my career in Software Development as I navigate an unknown world (unknown to me, anyway!)

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store