PHP Ajax Progress Bar

Posted on: 10 April 2016
By: admin

After my previous article about creating PHP Progress Bar using flush() function and Javascript, I try to create another PHP progress bar using different approach. This time, I will not use flush() function. Instead, I will use Ajax method and jQuery to accomplish the task. Basically, in this new progress bar we will use jQuery Ajax library to trigger the long running process in the web server and then use jQuery Ajax library again to read the progress status and display it in the browser.

Here is the step by step explanation.

The Index File (index.php)

This is the index file where the progress bar will be displayed. This file will also trigger the long running process in web server using Ajax. That long running script will write the progress status into a text file in JSON format. After that there is another Ajax call to check the progress by reading that text file.

<?php
// Start the session.
session_start();
?>
<!DOCTYPE html>
<html>
<head>
  <title>Progress Bar</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <style>
    #progress {
      width: 500px;
      border: 1px solid #aaa;
      height: 20px;
    }
    #progress .bar {
      background-color: #ccc;
      height: 20px;
    }
  </style>
</head>
<body>
  <div id="progress"></div>
  <div id="message"></div>
  <script>
    var timer;
 
    // The function to refresh the progress bar.
    function refreshProgress() {
      // We use Ajax again to check the progress by calling the checker script.
      // Also pass the session id to read the file because the file which storing the progress is placed in a file per session.
      // If the call was success, display the progress bar.
      $.ajax({
        url: "checker.php?file=<?php echo session_id() ?>",
        success:function(data){
          $("#progress").html('<div class="bar" style="width:' + data.percent + '%"></div>');
          $("#message").html(data.message);
          // If the process is completed, we should stop the checking process.
          if (data.percent == 100) {
            window.clearInterval(timer);
            timer = window.setInterval(completed, 1000);
          }
        }
      });
    }
 
    function completed() {
      $("#message").html("Completed");
      window.clearInterval(timer);
    }
 
    // When the document is ready
    $(document).ready(function(){
      // Trigger the process in web server.
      $.ajax({url: "process.php"});
      // Refresh the progress bar every 1 second.
      timer = window.setInterval(refreshProgress, 1000);
    });
  </script>
</body>
</html>

The Process Script (process.php)

We need to create a file which will execute the long running process in web server. Like I said before this file will put the latest progress status into a text file in JSON format. The text file name is the same like the session id so it's possible to serve the different progress status for each client. We also need to make sure that the file is writable by web server. In this case I store the file inside tmp folder which I give permission for web server to write into.

<?php
// Start the session.
session_start();
// The example total processes.
$total = 20;
// The array for storing the progress.
$arr_content = array();
// Loop through process
for($i=1; $i<=$total; $i++){
  // Calculate the percentatage.
  $percent = intval($i/$total * 100);
  // Put the progress percentage and message to array.
  $arr_content['percent'] = $percent;
  $arr_content['message'] = $i . " row(s) processed.";
  // Write the progress into file and serialize the PHP array into JSON format.
  // The file name is the session id.
  file_put_contents("tmp/" . session_id() . ".txt", json_encode($arr_content));
  // Sleep one second so we can see the delay
  sleep(1);
}
?>

The Checker File (checker.php)

The last file we need is the checker file which our Ajax script will call it several times until the process is completed. This file will return the progress status contained in the previous text file in JSON format so it can be read by the Javascript. After the process is finished, the text file will be deleted.

<?php
// The file has JSON type.
header('Content-Type: application/json');
// Prepare the file name from the query string.
// Don't use session_start here. Otherwise this file will be only executed after the process.php execution is done.
$file = str_replace(".", "", $_GET['file']);
$file = "tmp/" . $file . ".txt";
// Make sure the file is exist.
if (file_exists($file)) {
  // Get the content and echo it.
  $text = file_get_contents($file);
  echo $text;
  // Convert to JSON to read the status.
  $obj = json_decode($text);
  // If the process is finished, delete the file.
  if ($obj->percent == 100) {
    unlink($file);
  }
}
else {
  echo json_encode(array("percent" => null, "message" => null));
}
?>

You can see the live demo there.

SOURCE CODE

The complete source code for my PHP progress bar scripts are available at GitHub : https://github.com/w3shaman/php-progress-bar.

Tags:

Comments

Jack (not verified)

Wed, 01/18/2017 - 16:15

Permalink

Trying in Yii2 framework

I think I've successfully create my own process.php. And I got this in my .txt {"percent":100,"message":"58 row(s) processed."}. But my progress bar didn't work. I'm trying this in Yii2 (MVC).
Do you have any suggestion about this? Am I get right txt result?