Real time progress bar using PHP – dynamic progress bar using PHP

Real time progress bar using PHP – dynamic progress bar using PHP

In this post we will show you how to create Real time progress bar using PHP. A progress bar is wont to indicate the standing of any PHP perform running within the background. we will be able to show you the best thanks to produce a time period progress bar to watch the standing of your PHP script running on the server simply by exploitation simple pure PHP code and a few javascript.

Real time progress bar using PHP
Real time progress bar using PHP

for create Real time progress bar using PHP If we’re a PHP developer then in all probability we notice that we just won’t get the output in your read page unless the PHP script is totally dead. we can not even use Ajax as Ajax success perform solely triggered once PHP script completed its execution. that the trick is to forcefully flush the output to look at the page exploitation flush and ob_flush perform in PHP and javascript to update your progress bar in real time rather than exploitation Ajax calls.

Here is the code for view page for progress bar using PHP

<div class="container cst-con">
  <div class="row cst-row">
    <div class="col-md-12 cst-md">
		<!-- add space -->
	    <p>&nbsp;</p>
		<!-- add space -->
		<p>&nbsp;</p>
		<button type="button" id="buttonno1"  class="btn btn-success cst-btn btn-block">Click Here To Start Progress Bar</button>
		<!-- add space -->
		<p>&nbsp;<p>
		<button type="button" id="buttonno2"  class="btn btn-danger cst-btn btn-block">Click Here To Stop Progress Bar</button>
    </div>
    <div class="col-md-12 cst-md">
		<!-- add space -->
		<p>&nbsp;</p>
		<!-- add space -->
	    <p>&nbsp;</p>
		<div id="progressbar" style="border:2px solid #cbc; border-radius: 6px; "></div>
  
		<!-- add Progress informations -->
		<br>
		<div id="informations" class="cst-md"></div>
	</div>
  </div>
</div>

<p id="loadarea_show" style="display:none;" class="cst-md"></p><br />
<!-- <iframe id="loadarea_show" class="cst-md" style="display:none;"></iframe><br />  -->

we use bootstrap for a little styling and here is the javascript/jquery code we must include at the bottom of your view page.

<script >
        // script progress bar using PHP
	$("#buttonno1").click(function(){
		document.getElementById('loadarea_show').src = 'progressbar_val.php';
	});
	$("#buttonno2").click(function(){
		document.getElementById('loadarea_show').src = '';
	});
</script>

When we button1 is clicked jquery click function will be triggered which will result in loading the progressbar_val.php file in an iframe or <p>. The button2 is used to stop the progress bar.

Here are the codes in progressbar_val.php file

<?php
// set session
session_start();
// code for progress bar using PHP
// max execution time
ini_set('max_execution_time', 0); 
// we to get unlimited php script for execution time

// check session
if(empty($_SESSION['ind'])){
    $_SESSION['ind'] = 0;
}

// check session
$set_total = 100;
for($ind = $_SESSION['ind'];$ind<$set_total;$ind++)
{
    $_SESSION['ind'] = $ind;
    $percent = intval($i/$set_total * 100)."%";   
	
	
    sleep(2); 
	// Here call over time taking function like sending bulk sms etc.

    echo '<script>
    parent.document.getElementById("progressbar").innerHTML="<div style=\"width:'.$percent_val.';background:linear-gradient(to bottom, rgba(126,126,126,1) 0%,rgba(15,15,15,1) 100%); ;height:36px;\">&nbsp;</div>";
    parent.document.getElementById("informations").innerHTML="<div style=\"text-align:center; font-weight:bold\">'.$percent_val.' is processed.</div>";</script>';

	// ob_flush and flush process
    ob_flush(); 
    flush(); 
}
echo '<script>parent.document.getElementById("informations").innerHTML="<div style=\"text-align:center; font-weight:bold\">Process completed.</div>"</script>';

// session destroy
session_destroy();

I use the sleep operate to demonstrate a time taking task. we’ll decision your own time taking operate there like causing bulk SMS or mail to users etc. flush() may be a low-level flush that instructing PHP to flush its internal, low-level knowledge buffers and ob_flush() may be a high-level flush. It flushes high-level buffers and puts all content within the low-level.

Here is that the output of higher than program

Note for Real time progress bar using PHP

You must use each flush and ob_flush operate to form progress bar real time. If you do not use one in all them then your progress bar update solely in bound intervals of your time and not in real time. Also, remember to line most execution time to unlimited otherwise progress bar stop when thirty seconds (Default most PHP script execution time). Comment below if you have got any doubts or occur any issues.

You also like google recaptcha using javascript and google recaptcha using php

Leave a Comment

Your email address will not be published. Required fields are marked *

53  +    =  60

We accept paid advance and paid guest Posting on our Site : Contact US