A barra progressiva no PHP

[Frank K Hosaka]

Encontrei ontem no Google um tutorial de como fazer a barra progressiva no PHP nesse endereço:

https://shareurcodes.com/blog/real time progress bar in php#:~:text=A progress bar can be,PHP code and some javascript

 

O problema do código dele é que é necessário anexar a biblioteca do Ajax, coisa que ele não fez no código.

Precisei estudar um pouco mais de JS para saber como fazer o mesmo código sem usar o código do Ajax.

O código original era assim:

 

<script >
	$("#button1").click(function(){
		document.getElementById('loadarea').src = 'progressbar.php';
	});
	$("#button2").click(function(){
		document.getElementById('loadarea').src = '';
	});
</script>

e eu arranquei esses dois, bem como os dois botôes que haviam por lá, e simplifiquei tudo num só  botão:

<input type=submit value=Iniciar onclick=loadarea.src='astudy2.php'>

e o código final ficou assim:

 

astudy.php
-------------------------------------------
<input type=submit value=Iniciar onclick=loadarea.src='astudy2.php'>
<div id="progressbar" style="border:1px solid #ccc; border-radius: 5px; "></div>
<br>
<div id="information" ></div>
<iframe id="loadarea" style="display:none;"></iframe><br />

astudy2.php
-----------------------------------------
<?php
// crédito desse algoritmo: https://shareurcodes.com/blog/real%20time%20progress%20bar%20in%20php#:~:text=A%20progress%20bar%20can%20be,PHP%20code%20and%20some%20javascript.
$mysqli=new mysqli("localhost","root","","diario");
$query=$mysqli->query("select * from tbpessoa");
$i=0;
$total=16728 // quantidade atual de registros em tbpessoa
while ($row=$query->fetch_assoc()){
	$i++;
	$percent=intval($i/$total*100)."%";
    echo '<script>
    parent.document.getElementById("progressbar").innerHTML="<div style=\"width:'.$percent.';background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\">&nbsp;</div>";
    parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">'.$percent.' is processed.</div>";</script>';

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

Aqui usei o meu próprio banco de dados, ao invés de simular um atraso artificial que o código original fez.

Editado Julho 26, 2022 por Frank K Hosaka