Lorsque vous faites vos scripts avec des requêtes en AJAX, vous avez sans doute dû être confronté au problème "Mais où en est mon script ?". Et bien voici un petit tutorial simple pour vous apprendre à créer une barre de progression incrémentable très facilement.

Lors de ce tutorial nous allons créer 2 scripts PHP, l'un qui servira à savoir où en est l'avancement du script et l'autre qui sera le script à écouter.

Création de la page HTML

Cette page HTML sera la page que verra notre utilisateur. Vous pourrez la styliser comme vous le souhaitez. Perso je vais partir sur quelque chose de simple mais moche. Ceci étant juste pour un tuto, je n'ai pas voulu faire un super design.

<h1>ProgressBar</h1>

<div class="progress">
 Chargement <span>0</span>% ...
</div>
<div class="progressBar">
 <div class="bar"></div>
</div>

<button id="launch">Lancer le chargement</button>

Création du CSS

Le CSS de la page va être très simple. Nous allons faire progresser notre barre dans la div classe "bar", et elle sera contenue dans la div classe "progressBar".

.progressBar {
    width: 300px;
    background: #CCC;
    border: solid 1px #000;
    height: 30px;
}

.bar {
    background: #F00;
    height: 30px;
    width: 0%;
}

Création du script AJAX

Et comme nous allons utiliser des scripts PHP, nous allons les lancer via des requêtes AJAX.

Pour ceux qui ne connaissent pas l'AJAX (non ce n'est pas le produit nettoyant) mais Asynchronous JavaScript and XML qui permet de lancer des scripts en arrière plan, sans que l'utilisateur ne s'en aperçoive.

L'exemple le plus parlant est celui de Facebook. Quand vous cliquer sur un "J'aime", votre page ne se recharge pas, juste une petite partie. Et bien ceci est possible grâce à l'AJAX. Si vous voulez voir ces appels, vous pouvez télécharger l’extension Firebug pour Firefox, et faire F12, puis cliquer sur l'onglet "Network". Sous Google Chrome, l’extension est pré-installé.

Afin de rendre tout cela plus facile, j'utilise jQuery pour faire ces appels. C'est la même chose qu'avec l'XHR en JavaScript pur.

Dès que la personne va cliquer sur le bouton, toutes les secondes, la première requête AJAX va récupérer le pourcentage d'avancement du deuxième script. A chaque fois qu'elle est terminé, on incrémente la barre de progression ainsi que son pourcentage.

Et dans le même temps, une deuxième requête AJAX va se lancer, elle va être le vrai script qui va faire les opérations. Une fois cette requête AJAX terminé, on passe le pourcentage à 100% et on arrête la première requête AJAX.

 $("#launch").click(function() {
    var finish = false;

    setInterval(function(){
        if(!finish) {
            $.ajax({
                url: "getProgression.php",
                success: function(response) {
                    $(".progress span").html(response);
                    $(".progressBar .bar").css('width', response+'%');
                }
            });
        }
    },1000);

    $.ajax({
        url: "setProgression.php",
        success: function(response) {
            finish = true;
            $(".progress span").html('100');
            $(".progressBar .bar").css('width', '100%');
        }
    });
});

Création des scripts PHP

Pour ce tutorial j'ai créé un petit script qui va créer un fichier *.txt qui contiendra le pourcentage d'avancement. Et afin de voir la progression, j'ai mis un sleep(); fait une pause lors du script. Ici elle est d'une seconde.

/* Calcul de pourcent
 * (Chargé / Total) * 100
 */

$total = 42;
for($charge = 0; $charge < $total; $charge++) {
    sleep(1);
    $pourcent = round(($charge / $total) * 100, 2);
    file_put_contents('progress.txt', $pourcent);
}

unlink('progress.txt');

Et voici le script qui va se charger de récupérer le pourcentage. Je regarde d'abord si le fichier existe afin d'éviter les erreurs.

if(is_file('progress.txt')) {
    echo file_get_contents('progress.txt');
} else {
    echo '0';
}

Démonstration

Je vous laisse cliquer sur le bouton :

Modification

Si jamais vous ne voulez pas passer par la création d'un fichier mais par les sessions PHP, n'oubliez pas à chaque fin d'incrémentation de mettre cette fonction : session_write_close();

Demo

2016-08-30 19:50:00

Source

http://lemon-cake.fr/?p=475