JavaScript to PHP and back again

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

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 create_db.php, it uses the variable $link, which was defined in connection.php. 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:

<?php include ‘connection.php'; include ‘create_db.php'; ?>

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 <div>. I include one at random here:

false.php

Since this php file is included inside a JavaScript function, there is no need for further <script> 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 updategraph accepts two arguments. slider is the new value of the slider bar, and id is the id of the slider bar. id is the name of the php file without the ‘.php’ bit. To send the value of the slider bar to php we use a $.ajax function which use. Here the type is set to POST the url is id + ‘.php’, the data is the value of slider bar and here we call it runs. 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 eval() 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 split and replace 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 $_POST['runs'] line. I have then used echo 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.