Displaying Dynamic Progress Bars

In some situations you might need to display a progress bar—for example, when you are performing many tasks on the back end and they take a while to complete. In these cases it is a good idea to give some indication to the user that you are in fact still performing tasks and that their browser hasn??t simply locked up.

There are various methods of doing this, using pure PHP, or including JavaScript, CSS, Ajax,and more. We will explore a couple of simple examples and allow you to develop your own custom solution based on these. First, Listing 9.3.1 illustrates a simple example: You are waiting for a task to end and display a waiting screen during that time using just text.

Listing 9.3.1 Progress Bar: Simple Text Version

<?php
// Output a 'waiting message'
echo 'Please wait while this task completes';

// Now while waiting for a certain task to
// complete, keep outputting .'s

while (true) {
  // Echo an extra dot, and flush the buffers
  // to ensure it gets displayed.
  echo ' .';
  flush();

  // Now sleep for 1 second and check again:
  sleep(1);
}
?>

Of course in this example you would need to replace the while (true) statement with the actual check you are using to see when the task is done. This could be checking for the creation of a file in the file system, or checking the output of a program or web page. It could even be polling on input from another process—whatever method you have for checking this.

Alternatively, you may just have a lot of PHP code that you are running and want to give periodic updates as to how complete you feel the process is at that time. The benefit in these cases is that you know what percentage of the work is done (or can make a good guess). This allows for a better display,giving a true status until completion for the process.

Let’s implement this type of bar in a more visually friendly setup but using PHP, XHTML, and CSS alone, as shown in Listing 9.3.2. It keeps creating new div elements that sit on top of the previous ones.This creates a bit of a mess if you view the source afterward but makes for a pretty display.

Listing 9.3.2 Progress Bar: PHP-Based

<?php
// A function that will create the initial setup
// for the progress bar: You can modify this to
// your liking for visual purposes:
function create_progress() {
  // First create our basic CSS that will control
  // the look of this bar:
  echo "
<style>
#text {
  position: absolute;
  top: 100px;
  left: 50%;
  margin: 0px 0px 0px -150px;
  font-size: 18px;
  text-align: center;
  width: 300px;
}
  #barbox_a {
  position: absolute;
  top: 130px;
  left: 50%;
  margin: 0px 0px 0px -160px;
  width: 304px;
  height: 24px;
  background-color: black;
}
.per {
  position: absolute;
  top: 130px;
  font-size: 18px;
  left: 50%;
  margin: 1px 0px 0px 150px;
  background-color: #FFFFFF;
}

.bar {
  position: absolute;
  top: 132px;
  left: 50%;
  margin: 0px 0px 0px -158px;
  width: 0px;
  height: 20px;
  background-color: #0099FF;
}

.blank {
  background-color: white;
  width: 300px;
}
</style>
";

  // Now output the basic, initial, XHTML that
  // will be overwritten later:
  echo "
<div id='text'>Script Progress</div>
<div id='barbox_a'></div>
<div class='bar blank'></div>
<div class='per'>0%</div>
";

  // Ensure that this gets to the screen
  // immediately:
  flush();
}

// A function that you can pass a percentage as
// a whole number and it will generate the
// appropriate new div's to overlay the
// current ones:

function update_progress($percent) {
  // First let's recreate the percent with
  // the new one:
  echo "<div class='per'>{$percent}
    %</div>n";

  // Now, output a new 'bar', forcing its width
  // to 3 times the percent, since we have
  // defined the percent bar to be at
  // 300 pixels wide.
  echo "<div class='bar' style='width: ",
    $percent * 3, "px'></div>n";

  // Now, again, force this to be
  // immediately displayed:
  flush();
}

// Ok, now to use this, first create the
// initial bar info:
create_progress();

// Now, let's simulate doing some various
// amounts of work, and updating the progress
// bar as we go. The usleep commands will
// simulate multiple lines of code
// being executed.
usleep(350000);
update_progress(7);
usleep(1550000);
update_progress(28);
usleep(1000000);
update_progress(48);
usleep(1000000);
update_progress(68);
usleep(150000);
update_progress(71);
usleep(150000);
update_progress(74);
usleep(150000);
update_progress(77);
usleep(1150000);
update_progress(100);

// Now that you are done, you could also
// choose to output whatever final text that
// you might wish to, and/or to redirect
// the user to another page.
?>

---

This article is taken from the chapter titled, “Web Page Creation/XHTML/CSS”, which is excerpted from the new book, PHP 5 in Practice, authored by Eli White III and Jonathan Eisenhamer. Copyright 2007 by Sams Publishing. ISBN 0672328887. Reprinted with permission by Pearson Education; All rights reserved. A complete Table of Contents is available online.