How to create a real-time JavaScript,php and mysql progress bar?

kg · January 10, 2014

I have been struggling with this progress bar for a while now I need to know whether it is possible to have a real time progress bar for MySQL insertions since database operations are relatively very fast. I have already browsed a few demonstrations but they all relate to data being sent to a form instead and they all seem to work perfectly.

I actually have 4 files and this is implemented based on the tutorial with this link

http://www.sitepoint.com/tracking-upload-progress-with-php-and-javascript/

**Form.php**

<html>
<head>
<title>File Upload Progress Bar of MySQL Data</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="bar_blank">
<div id="bar_color"></div>
</div>
<div id="status"></div>

<?php

$time_start = microtime(true);

$mysqlserver = "localhost";
$user = "root";
$pass = "";
$db = "Profusion";

$link = mysql_connect( "$mysqlserver", $user, $pass );
if ( ! $link )
die( "Couldn't connect to MySQL" );
//print "Successfully connected to server<P>";

mysql_select_db( $db )
or die ( "Couldn't open $db: ".mysql_error() );
//print "Successfully selected database \"$db\"<P>";

$result3=mysql_query("INSERT INTO dest_table.create_info SELECT * from Profusion.source_cdr") or die(mysql_error());
$progress=mysql_affected_rows();

$time_end = microtime(true);
$time = $time_end - $time_start;

echo "Total time taken :"." ".round($time,6) . " s";

?>

2nd file style.css

#bar_blank {
border: solid 1px #000;
height: 20px;
width: 300px;
}

#bar_color {
background-color: #006666;
height: 20px;
width: 0px;
}

#bar_blank, #hidden_iframe {
display: none;
}

3rd file

**script.js**

function toggleBarVisibility() {
var e = document.getElementById("bar_blank");
e.style.display = (e.style.display == "block") ? "none" : "block";
}

function createRequestObject() {
var http;
if (navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
http = new XMLHttpRequest();
}
return http;
}

function sendRequest() {
var http = createRequestObject();
http.open("GET", "progress.php");
http.onreadystatechange = function () { handleResponse(http); };
http.send(null);
}

function handleResponse(http) {
var response;
if (http.readyState == 4) {
response = http.responseText;
document.getElementById("bar_color").style.width = response + "%";
document.getElementById("status").innerHTML = response + "%";

if (response < 100) {
setTimeout("sendRequest()", 1000);
}
else {
toggleBarVisibility();
document.getElementById("status").innerHTML = "Done.";
}
}
}

function startUpload() {
toggleBarVisibility();
setTimeout("sendRequest()", 1000);
}

/* (function () {
document.getElementById("myForm").onsubmit = startUpload;
})();// i commented this out since this collects information from the form

and the last file

**progress.php**

<?php
session_start();

$key = ini_get("session.upload_progress.prefix") . $result3;
if (!empty($_SESSION[$key])) {
$current = $_SESSION[$key]["bytes_processed"];
$total = $_SESSION[$key]["content_length"];
echo $current < $total ? ceil($current / $total * 100) : 100;
}
else {
echo 100;
}

I need to show a progress bar as data is inserted into mysql and the total time taken for the query to execute. there are currently 28 rows to be inserted so it's not that big. Everything else seems to work except that the progress bar won't get displayed.

kicken · January 10, 2014

A few things to note:

a) In order to track the progress you have to be able to track how many rows have been inserted out of the total amount of rows. With a simple INSERT INTO...SELECT that is not possible. You would have to select the data out into PHP and then generate single inserts to process. While this would allow tracking, it would also slow down the process considerably.

b) You need somewhere to store your progress information, such as the session of a memory cache. If you use the session you need to take care to avoid keeping the session locked. Your script doing the inserts would write it's progress to this location, and you'd have another script read that location to determine the values.

c) Since the only effective way to do a progress bar is to have a periodic ajax request check on the progress, it's not really practical to implement a real progress bar for something that would likely take no more than a few seconds. If all you're doing is inserting 28 rows then you most likely fit into this description. It'd be easier and just as informative to use a fake progress bar or just skip it all together.

Now, in the event that you did actually have something worth a progress bar, you can take two approaches to it. One would be to estimate the rate of progress and just sort of fake it based on that, the other way would be to constantly check on the progress. For exceptionally long tasks you could combine these two methods.

kg · January 11, 2014

I had a feeling that a real time progress bar would be highly difficult to implement and I would thus need to implement my bar in such a way that the query executes first and then a dummy progress bar simply appears which is relatively much simpler to implement.

Sign In

How to create a real-time JavaScript,php and mysql progress bar?

Recommended Posts

kg

Link to comment

Share on other sites

kicken

Link to comment

Share on other sites

kg

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information