Displaying a progress bar in php file

Question

I have a php file which selects a large amount of data from mutiple sql table. Naturally it takes a long time to complete the whole process. I want to display a progress bar which will express the progress of the script running. How to display a progress bar? The script below shows a portion of the php file.

<?php

//RIGHT(AdmitCode,1), PartCode, MID(AdmitCode,2,2),  MID(AdmitCode,1,1) DESC, RollCode
$query = "SELECT * FROM students1 ORDER BY PartCode, AdmitCode, yearcode  desc, RollCode";

$result = mysql_query($query);

// start a table tag in the HTML
echo "<table border='1'  align='center' style='border-collapse:collapse'  width='110%'>"; 
echo "<caption>
            <h2>List of candidates for Three year Degree  
                (Honours/General) Programme Examination-".$bx1." (".$bx2.")
            </h2>
    </caption>";

//$row['index'] the index here is a field name
echo "<tr bgcolor=''>
        <th> Sl. No </th>
        <th>ID </th>
        <th> Semester </th>
        <th>    Roll No </th>
        <th> Registration No</th>
        <th> Name </th>
        <th> Honours </th>
        <th>  Elective-1 </th>
        <th> Elective-2 </th>
        <th> Elective-3 </th>
        <th> MIL </th>
        <th>  Foundation </th>
        <th> Soft studies </th>
        <th> Syllabus </th>
    </tr>";

$ty=0;

while($row = mysql_fetch_array($result)){   //Creates a loop to loop through   results
    $ty++;
    if ($ty%2==0)
        echo "<tr bgcolor='pink'>";
    else
        echo "<tr>";
    echo "<td align='center'>$ty</td>
            <td align='center'>" . $row['StudentID']." </td>
            <td align='center'>" . $row['PartCode']."</td>
            <td align='center'>" . $row['AdmitRollNo'] . "</td>
            <td align='center'>" . $row['RegistrationNo']. "</td>
            <td align='left'>" . $row['Name'] . "</td>
            <td align='center'>" . $row['HonoursSubject'] . "</td>
            <td align='center'>". $row['ElectiveSubject1'] . "</td>
            <td align='center'>". $row['ElectiveSubject2'] . "</td>
            <td align='center'>". $row['ElectiveSubject3'] . "</td>
            <td align='center'>". $row['MIL'] . "</td>
            <td align='center'>". $row['Foundation'] . "</td>
            <td align='center'>". $row['SoftStudies'] . "</td>
            <td align='center'>". $row['Syllabus'] . "</td>
        </tr>";  
}

echo "</table>"; //Close the table in HTML

Answer 1

Generally, to implement a good progress bar, you need a progress indicator from the layer which does the work, i.e. the mysql database. I am not aware, that mysql provides such a feature.

So you are stuck with estimating how long the operation will probably last (i.e. from past queries or derive it from the query parameters) and just implement a javascript progress bar (JQueryUI provides a good one), which is just time based.

Alternatively, you could just use a spinner to indicate, that you do not know how long this process really runs.

Answer 2

you can add div coantainer for the table and has id page and add css this show the loading image until page full load.

eg.

  <div id="page">
    <table>
    </table>
  </div>

css
     <style>
#page {
             display: none;
             }
             #loading {
             display: block;
             position: absolute;
             top: 0;
             left: 0;
             z-index: 100;
             width: 100vw;
             height: 100vh;

            // background-image: url(loading_spinner.gif);
             background-image:url("loading_spinner.gif");
             background-repeat: no-repeat;
             background-position: center;
             }
</style>

<script>
$(window).load(function() {
            $('#page').show();
            $('#loading').hide('slow');

        });

</script>

add this js code in your page this will help you.

Answer 3

You can use the following simple code

    <?php
    //header('Content-Type: text/event-stream');
    // recommended to prevent caching of event data.
    header('Cache-Control: no-cache'); 

    //long_process.php
    for($i=1;$i<=3;$i++){
        //do something
        echo '<br>processing...';

        ob_flush();
        flush();
        sleep(1);
    }

    echo 'CLOSE', 'Process complete';
    ?>

Or use as following

index.php

    <!DOCTYPE html>
    <html>
       <head>
          <meta charset="utf-8" />
       </head>
       <body>
          <br />
          <input type="button" onClick="startTask()"  value="Start Long Task" />
          <input type="button" onClick="stopTask();"  value="Stop Task" />
          <br />
          <br />
          <p>Results</p>
          <br />
          <div id="results" style="border:1px solid #000; padding:10px; width:300px; height:250px; overflow:auto; background:#eee;"></div>
          <br />
          <progress id='progressor' value="0" max='100' style=""></progress>  
          <span id="percentage" style="text-align:right; display:block; margin-top:5px;">0</span>
       </body>
    </html>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
    var es; 
    function startTask() {
        es = new EventSource('bar2.php');
        //a message is received
        es.addEventListener('message', function(e) {
            var result = JSON.parse( e.data );
            addLog(result.message);       
            if(e.lastEventId == 'CLOSE') {
                addLog('Received CLOSE closing');
                es.close();
                var pBar = document.getElementById('progressor');
                pBar.value = pBar.max; //max out the progress bar
            }
            else {
                var pBar = document.getElementById('progressor');
                pBar.value = result.progress;
                var perc = document.getElementById('percentage');
                perc.innerHTML   = result.progress  + "%";
                perc.style.width = (Math.floor(pBar.clientWidth * (result.progress/100)) + 15) + 'px';
            }
        });
        es.addEventListener('error', function(e) {
            addLog('Error occurred');
            es.close();
        });
    }

    function stopTask() {
        es.close();
        addLog('Interrupted');
    }

    function addLog(message) {
        var r = document.getElementById('results');
        r.innerHTML += message + '<br>';
        r.scrollTop = r.scrollHeight;
    };
    </script>

Then create the following page. It has called in the index.php

bar.php

    <?php
    header('Content-Type: text/event-stream');
    // recommended to prevent caching of event data.
    header('Cache-Control: no-cache'); 

    function send_message($id, $message, $progress) {
        $d = array('message' => $message , 'progress' => $progress);

        echo "id: $id" . PHP_EOL;
        echo "data: " . json_encode($d) . PHP_EOL;
        echo PHP_EOL;

        ob_flush();
        flush();
    }


    //LONG RUNNING TASK
    for($i = 1; $i <= 10; $i++) {
        send_message($i, 'on iteration ' . $i . ' of 10' , $i*10); 

        sleep(1);
    }

    send_message('CLOSE', 'Process complete');