Rafraichir une barre de progression

**legrandse** · 23/02/2017, 14h54

Bonjour à tous,

Je souhaite intégrer une barre de progression à mon site.

J'utilise pour cela la barre bootstrap.
Cependant, la démo ne dit pas tout et c'est bien normal.

Mais comment rafraichir la DIV lorsque qu'il faut utiliser un script php ?

Voici le code javascript que j'ai récupéré d'un exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/javascript">
$(document).ready(function(){
  var progresspump = setInterval(function(){
    /* query the completion percentage from the server */
    $.get("test.php", function(data){
      /* update the progress bar width */
      $("#progress").css('width',data+'%');
      /* and display the numeric value */
      $("#progress").html(data+'%');
 
      /* test to see if the job has completed */
      if(data > 99.999) {
        clearInterval(progresspump);
        $("#progressouter").removeClass("active");
        $("#progress").html("Done");
      }
    })
  }, 1000);});
  </script>
 
 
 
</head>
 
<body>
<div class="progress progress-striped active" id="progressouter">
   <div class="bar" id="progress"></div>
</div>

L'attribut $.get récupère mon fichier test.php que voici:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$listbiker = $connexion->query("SELECT * FROM gghf_table  ");
			$row = $listbiker->rowcount();
			$data = $listbiker->fetch(PDO::FETCH_OBJ);
 
			for($i = 0 ; $i < $row; $i++ ) {
				echo $i;
			}

Mon code php est un simple exemple pour tenter comprendre le principe.

Dans ce cas la barre de progression affiche la suite 12345678....

Comment faire pour qu'elle s'affiche une progression colorée ?

Merci pour votre aide

**badaze** · 23/02/2017, 19h28

Est-ce que tu as copié les classes css des différents éléments car ce sont peut être elles qui font l'animation ?
Pour simuler l'avancement je passe un paramètre p à test9113b.php qui est alimenté par la variable pc.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript">
var pc = 0;
$(document).ready(function(){
  var progresspump = setInterval(function(){
    /* query the completion percentage from the server */
 var a = Math.random();
    $.get("test9113b.php?a="+a+"&p="+pc, function(data){
      /* update the progress bar width */
   pc=pc+10;
      $("#progress").css('width',data+'%');
      /* and display the numeric value */
      $("#progress").html(data+'%');
 
      /* test to see if the job has completed */
      if(data > 99.999) {
        clearInterval(progresspump);
        $("#progressouter").removeClass("active");
        $("#progress").html("Done");
      }
    })
  }, 1000);});
  </script>
</head>
 
<body>
<div class="progress progress-striped active" id="progressouter" style="width:250px;text-align:center">
   <div class="bar" id="progress" style="background-color:red"></div>
</div>
</body>
</html>

test9113b.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?php
$p = $_GET['p'];
echo $p;
?>

**legrandse** · 27/02/2017, 10h04

Salut Badaze,

W-E prolongé, je n'ai pas su te répondre plus tôt.

Oui, tout le CSS est chargé correctement.

D'ailleurs si je prend un exemple de barre bootstrap elle s'affiche correctement.

Voici la page complète

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
  <title>download</title>
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../style.css" type="text/css">
<script type="text/javascript" src="../bootstrap/js/jquery-1.11.3-jquery.min"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var progresspump = setInterval(function(){
    /* query the completion percentage from the server */
    $.get("test.php", function(data){
      /* update the progress bar width */
      $("#progress").css('width',data+'%');
      /* and display the numeric value */
      $("#progress").html(data+'%');
 
      /* test to see if the job has completed */
      if(data > 99.999) {
        clearInterval(progresspump);
        $("#progressouter").removeClass("active");
        $("#progress").html("Done");
      }
    })
  }, 1000);});
  </script>
 
 
 
</head>
 
<body>
<div class="progress progress-striped active" id="progressouter">
   <div class="progress-bar" id="progress"></div>
</div>
 
 
 
</body>
</html>

Que dois-je ajouter à mon exemple pour que cela fonctionne correctement ?

Actuellement j'ai un fond de barre dans lequel est affiché la suite 12345678910....

Merci pour l'aide

**badaze** · 27/02/2017, 11h23

Bonjour,
As tu essayé le code que j'ai posté.

**legrandse** · 27/02/2017, 12h15

Oui, ton script affiche bien un fond de barre rouge de 250px de long.
Le % est également bien affiché et augmente indéfiniment.

Mais comment faire pour afficher la barre de progression qui se remplit progressivement jusqu'à 100%

Dans mon exemple le script php compte et affiche le décompte de tous les bikers présents dans la table.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$listbiker = $connexion->query("SELECT * FROM gghf_table  ");
			$row = $listbiker->rowcount();
			$data = $listbiker->fetch(PDO::FETCH_OBJ);
 
			for($i = 0 ; $i < $row; $i++ ) {
				echo $i;
 
			}

Comment faire dire au script que lorsque la fin du comptage est effectuée la barre est à 100% ?

**badaze** · 27/02/2017, 16h56

Je viens de réessayer le code que j'ai posté est sur IE11, Chrome et Firefox dans tous les cas il affiche Done quand il arrive à 100%.

**badaze** · 27/02/2017, 17h31

En fait tu "affiches" trop de valeurs. Le jQuery prend tout ce que tu affiches donc c'est pour ça je pense que tu as une suite de valeurs.

De plus pour SQL c'est mieux de faire un comptage du nombre de lignes plutôt que de charger les lignes et ensuite ne prendre que le rowcount. Il y a même une manière pour aller chercher le nombre d'enregistrements directement auprès de la table sans faire de count(*).

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
   $listbiker = $connexion->query("SELECT count(*) as compte FROM gghf_table  ");
   $data = $listbiker->fetch(PDO::FETCH_OBJ);
 
   print $data->compte;

Dans le code que tu as posté, je ne comprends pas ce que tu veux faire. Si tu veux arriver à 100% il faut qu'il y ait une division quelque part et si tu veux une barre de progression il faut que tu aies quelque chose qui progresse. Or si tu comptes le nombre d'enregistrement tu es toujours à 100 % (je ne sais pas si je me fais bien comprendre).

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$listbiker = $connexion->query("SELECT * FROM gghf_table  ");
			$row = $listbiker->rowcount();
			$data = $listbiker->fetch(PDO::FETCH_OBJ);
 
			for($i = 0 ; $i < $row; $i++ ) {
				echo $i;
 
			}

**legrandse** · 28/02/2017, 11h26

Envoyé par badaze

Dans le code que tu as posté, je ne comprends pas ce que tu veux faire. Si tu veux arriver à 100% il faut qu'il y ait une division quelque part et si tu veux une barre de progression il faut que tu aies quelque chose qui progresse. Or si tu comptes le nombre d'enregistrement tu es toujours à 100 % (je ne sais pas si je me fais bien comprendre).

Ah ok je comprend mieux.
Dans ma tête voilà comment je raisonne:
Si j'ai 10000 enregistrements à uploader, je considère que ces 10000 = 100%
Donc je pensais que le temps que la requête traite chaque enregistrement un par un faisait progresser la barre selon l'état d'avancement du job.

**legrandse** · 09/03/2017, 11h41

Je pensais avoir eu un sursaut de lucidité mais je me rend compte qu'en fait je n'ai rien compris.

Mais j'ai un peu progressé tout de même car en faisant un nouveau test, j'arrive enfin a faire progresser la barre mais ... manuellement.

Je suis reparti de zéro avec comme exemple mon fichier appelé progdownload.php:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?php
 
 
 
 
$listbiker = $master->query("SELECT * FROM gghf_rando WHERE annee = '2015'  ");
                        $row = $listbiker->rowcount();
                        
$listbiker2 = $slave->query("SELECT * FROM gghf_rando WHERE annee = '2015'  ");
                        $row2 = $listbiker2->rowcount();                        
 
$progress = $row2 / $row * 100;
 
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META HTTP-EQUIV="Refresh" CONTENT="10; URL=progdownload.php"> 
<title>S&eacute;lection Randonn&eacute;e</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../style.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
 
</head>
 
<body>
<div class="container">
  <h2>Basic Progress Bar</h2>
  <div class="progress">
    <div class="progress-bar" id="progress" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:<?php echo $progress; ?>%">
      <span class="sr-only">70% Complete</span>
    </div>
  </div>
</div>
 
<?php 
if($progress == '100'){
?>
<form action="../select.php" method="post">
<div class="form-group">
<button type="submit" name="btn-stat" class="btn btn-block btn-primary">
<i class="glyphicon glyphicon-log-in"></i>&nbsp;Suivant
</button>
</div>
</form>
<?php
}
?>
 
</body>
</html>

Là j'ai compris que je dois comparer 2 valeurs (en l'occurence le nombre de lignes trouvées sur le maître et celles transférées sur l'esclave) pour pourvoir faire progresser la barre.

Et çà marche effectivement en mettant un refresh 10sec sur ma page, je vois ma barre progresser selon le décompte des lignes transférées.

Mais voilà où se situe mes limites de compréhension.

Pour que cela fonctionne, je dois au préalable lancer la procédure d'insertion dans l'esclave manuellement en appelant celui-ci dans un autre onglet du navigateur.

Je ne vois pas comment appeler le script d'insertion, tout en rafraichissant ma barre de progression dans un seule page.

Voilà mon fichier d'insertion nommé test.php:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
// Synchro données vers le site distant
// On prends toutes les lignes du master
 
$req = $master->query("SELECT * FROM gghf_rando WHERE annee = '2015' ");
 // On boucle sur toute la table
while( $ligneMaster = $req->fetch(PDO::FETCH_OBJ) )
    { 
	 		// on insert dans le slave les données de la ligne du master
$req2 = $slave->exec("INSERT IGNORE INTO gghf_rando (no,annee,rando,id, nom, prenom, rue, code, postal,newid,tombola) VALUES ( '$ligneMaster->no', '$ligneMaster->annee',  '$ligneMaster->rando', '".addslashes($ligneMaster->id)."', '".addslashes($ligneMaster->nom)."', '".addslashes($ligneMaster->prenom)."', '".addslashes($ligneMaster->rue)."', '$ligneMaster->code', '".addslashes($ligneMaster->postal)."', '$ligneMaster->newid','$ligneMaster->tombola' )");
	}

J'ai essayé un include_once('test.php'); dans mon fichier progdownload.php mais il charge d'abord toutes les données avec page blanche et quand terminé il affiche ensuite la barre qui est forcément remplie.

Comment faites-vous dans ce cas pour que cela fonctionne ? Avec du Javascript ?

**legrandse** · 09/03/2017, 14h52

Voilà j'ai trouvé une solution qui fonctionne.
Maintenant est-ce bien de cette manière qu'il fallait procéder, vous seul êtes capables de me le dire.

Voici comment j'ai procédé:
J'ai un fichier nommé insert.php qui comprend les données à insérer dans l'esclave:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
// Synchro données vers le site distant
	// On prends toutes les lignes du master
 
 
	$req = $master->query("SELECT * FROM gghf_rando WHERE annee = '2015' ");
	 // On boucle sur toute la table
	while( $ligneMaster = $req->fetch(PDO::FETCH_OBJ) )
		{ 
				// Alors on insert dans le slave les données de la ligne du master
	$req2 = $slave->exec("INSERT IGNORE INTO gghf_rando (no,annee,rando,id, nom, prenom, rue, code, postal,newid,tombola) VALUES ( '$ligneMaster->no', '$ligneMaster->annee',  '$ligneMaster->rando', '".addslashes($ligneMaster->id)."', '".addslashes($ligneMaster->nom)."', '".addslashes($ligneMaster->prenom)."', '".addslashes($ligneMaster->rue)."', '$ligneMaster->code', '".addslashes($ligneMaster->postal)."', '$ligneMaster->newid','$ligneMaster->tombola' )");
		}

Ensuite j'ai un fichier nommé return.php qui vérifie le nombre d'enregistrements déjà traité:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$listbiker = $master->query("SELECT * FROM gghf_rando WHERE annee = '2015'  ");
			$row = $listbiker->rowcount();
 
$listbiker2 = $slave->query("SELECT * FROM gghf_rando WHERE annee = '2015'  ");
			$row2 = $listbiker2->rowcount();			
 
echo $progress = $row2 / $row * 100;

Et j'ai mon script de barre de progression comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script type="text/javascript">
$(document).ready(function(){
	$.get("insert.php", {});
  var progresspump = setInterval(function(){
    /* query the completion percentage from the server */
 
    $.get("return.php", function(data){
      /* update the progress bar width */
      $("#progress").css('width',data+'%');
      /* and display the numeric value */
      $("#progress").html(data+'%');
 
      /* test to see if the job has completed */
      if(data > 99.999) {
        clearInterval(progresspump);
        $("#progressouter").removeClass("active");
        $("#progress").html("Done");
      }
    })
  }, 4000);});
  </script>
 
</head>
 
<body>
<div class="container">
  <h2>Basic Progress Bar</h2>
  <div class="progress progress-striped active" id="progressouter">
     <div class="progress-bar" id="progress"  >
 
    </div>
  </div>

Et voilà çà marche.
Vous auriez fait comment vous ?

**badaze** · 09/03/2017, 19h22

Tu devrais faire un : select count(*) from gghf_rando. Les select que tu fais chargent inutilement la machine puisque tu mets tous les enregistrements en mémoire.
Sinon ta solution me plaît. Je pense que je ferai quelque chose de ce genre si j'en ai la nécessité.

**legrandse** · 10/03/2017, 09h44

Merci pour le conseil

Je clos le sujet.

Rafraichir une barre de progression

JavaScript

Discussions similaires

Partager

Partager