Progress Bar to display server’s script execution: using JQuery/JQueryUI
Until now, you have been opening a shell or terminal to execute your script, but now your boss wants to be able to execute the script, but he doesn’t know anything about CLI(command line interface) commands. So, what can you do? how about having a web interface that allows him to easily activate the script. Yes, that would work and its easy too. But if the script takes 5 min to complete, we don’t want to show a blank page during those 5 mins. It would be better if there was a progress bar that showed how much percentage of the script is completed. Today, we will learn to do just that, Create a progress bar to display server’s php script execution using JQuery and JQueryUI.
In this tutorial, we will create a
1. For server side, php script that needs to be run. For the sake of simplicity we will create a script that need to count 1 to user input number.
2. For the client side or for your boss in this case, create a webpage with a form. The form will take a number till which we want the server to count. When submitted it will trigger the script in the server.
3. While the server is counter, we will update the total and the current count in the json file. We will use php function json_encode.
4. The client end javascript with jquery/jqueryui will collect the values from the json file and update the progress bar every few seconds.
Read the comments for more details.
serverscript/server.php
Server script contains the main script that does some work on the server. In this case the server script counts from 1 to user input.
'0', 'current'=>'0');
fwrite($fp, json_encode($arr));
fclose($fp);
//update the total
$arr['total'] = $num;
//start our simple main logic, ie...start counting. we will start counting from 1 till the num+1. since I am using $i<$num, thats why i add +1 here.
for($i = 1; $i < $num+1; $i++){
//here you can do some other work as well.
$arr['current'] = "$i";
$fp = fopen($filename, "w");
fwrite($fp, utf8_encode(json_encode($arr)));
fclose($fp);
//for safety we will make a copy and let client access the copy.
copy('status1.json', 'status.json');
}
?>
index.html
index.html is the client side html form that gets the input and on submit triggers the server php. We include the jquery and jqueryui library script here. It is simple. link to jquery.min.js and jquery-ui.min.js in the head section. Our main script that uses the jquery will be in a different file. ie..external javascript.
<html> <head> </head> <body></body> </html>count please
js/myscript.js
this file contain our function to handle the client side. It uses the jquery library. We put all our code in $(‘#submit-button’).click’s callback function. That is because we want things like updating the progress bar, requesting data from server etc to happen only after user submit the form.
/*
when the submit button is clicked we will hide the message div. get the input provided by user and start processing.
*/
$(document).ready(function(){
$("#submit-button").click(function(){
/*hide the message div box. since we don't have anything to show at this time.*/
$('#message').hide();
/*grab the input by user and save in variable userinput*/
userinput = $("#num").val();
/*prepare a query string. We need to pass the userinput to the script. we grabbed the input from user, now we need to pass it to the */
var dataString = "num=" + $("input#num").val();
/*
using ajax we will call the server.php script. dataString is the parameter we got from user.datatype is the data type we expect as return. when complete, set the progress bar to 100% and display the message 'complete'.
*/
$.ajax(
{
url : "serverscript/server.php",
type: "GET",
data: dataString,
datatype:"json",
complete:function(){
$("#progressbar").progressbar({
value:100});
$('#message').html('Complete');
$('#message').show();
}
} );
/*
call the updateStatus() function every 3 second to update progress bar value.
*/
t = setTimeout("updateStatus()", 3000);
});
});
/*
.getJSON will get the json string being updated by the server.php in server. every 3 second, the 'total' and 'current' count will be parsed and updated to the progress bar.
*/
function updateStatus(){
$.getJSON('serverscript/status.json', function(data){
var items = [];
pbvalue = 0;
if(data){
var total = data['total'];
var current = data['current'];
var pbvalue = Math.floor((current / total) * 100);
if(pbvalue>0){
$("#progressbar").progressbar({
value:pbvalue
});
}
}
if(pbvalue < 100){
t = setTimeout("updateStatus()", 3000);
}
});
}
Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.
This is a sweet post! I have been wanting to setup a secure admin console to be able to control the services running on our web servers from a web page.. vs having to connect to the server and restart services, etc. So with this it looks like I can setup a complete set of server management scripts and execute them from a webpage and get some progress so I am not just blindly hoping that services are stopping and restarting… very cool.