Partage
  • Partager sur Facebook
  • Partager sur Twitter

Actualiser des données sans "Refresh"

    30 janvier 2023 à 10:26:51

    Bonjour à tous , 

    Je voulais me renseigner concernant ce sujet-la : 

    Je voudrais pouvoir actualiser des données qui proviennent d'une base de donnée sans utilisé la balise meta refresh.

    Je travaille sur un système d'affichage de commandes , et souhaiterais que les commandes apparaissent sans forcement utilisé un refresh comme je le faisais jusqu’à présent.

    Ceci est mon code php avec un refresh : 

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/espace.css">
        <meta http-equiv="refresh" content="5" />
        <script src="sweetalert.min.js"></script>
    
    
        <title>ECRAN-CLIENT</title>
    </head>
    <body>
        <div class="TABLELEFT">
         <?php
                    $sql = "SELECT enc_id, enc_cmd_num, enc_paye, enc_prepared, enc_ext_ref, enc_heure_fab_deb, enc_type, enc_heure_fab_fin, Client.cli_civilite,Client.cli_nom, Client.cli_prenom FROM Client RIGHT JOIN encaissement ON Client.cli_id = encaissement.enc_client WHERE enc_etat<>4 AND enc_date= convert(date,getdate()) AND ((DATEDIFF(n,enc_heure_fab_fin, getDate()) < 3 AND enc_prepared <> 0) OR enc_prepared = 0) AND enc_emporte <> 1 ORDER BY encaissement.enc_heure_fab_deb ASC";
    
    
    
                    $results = odbc_exec( $conn, $sql );
            ?>
    
            <table>
                <?php
                    while( $row = odbc_fetch_array( $results ) )
                    {
                        printf('<tr>');
    
                        if ( $row["enc_ext_ref"] != '')
                            {
                                $num_cmd = $row["enc_ext_ref"];
                            }
                        else
                            {
                                $num_cmd =$row["enc_cmd_num"];
                            }
    
    
                        if ($row['enc_paye'] = 0)
                        {
                            $etat_cmd='&nbsp&nbsp&nbsp&nbsp<span class="PRETE">ATTENTE REGLEMENT</span>';
                        }
                        else
                        {
                            switch( $row['enc_prepared'] )
                            {
                                case 0: $etat_cmd='&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span class="ENPREPA">EN PREPARATION</span>'; break;
    
                                case 1:
                                    $etat_cmd='&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span class="PRETE">COMMANDE PRETE</span>'; break;break;
                            }
                        }
    
    
                        switch( $row['enc_type'] )
                        {
                            case 0: $commande='&nbsp&nbsp<span class="EMPORTER"><img src="img/emp.png" id="EMP">&nbsp&nbsp</img></span>'; break;
    
                            case 1: $commande='&nbsp&nbsp<span class="LIVRAISON"><img src="img/livreur.png" id="LIV">&nbsp&nbsp</img></span>'; break;
    
                            case 2: $commande='&nbsp&nbsp<span class="SURPLACE">&nbsp&nbsp<img src="img/resto.png" id="TABLE">&nbsp&nbsp</img></span>'; break;
                        }
    
    
    
                        printf('<td>%s%s%s</td>',$row["enc_cmd_num"],$etat_cmd, $commande);
                    
                    }
    
                ?>
    
    
    
                </table>
            </div>
    
        
       </body>
    </html>



    • Partager sur Facebook
    • Partager sur Twitter
      30 janvier 2023 à 10:39:34

      Bonjour,

      Il y a différentes solutions techniques pour ton besoin : la plus simple à mon avis pour pousser du contenu du serveur vers les clients est d'utiliser : Server Sent Event

      https://developer.mozilla.org/fr/docs/Web/API/Server-sent_events/Using_server-sent_events

      Il y a plein de tuto sur le sujet et c'est assez simple à mettre en oeuvre.

      A+

      • Partager sur Facebook
      • Partager sur Twitter
        30 janvier 2023 à 11:09:05

         Merci de ta réponse rapide. :)

        Mais c'est très explicite. Lorsque je suis sur le site que tu m'as donnée , je ne sais pas par ou commencer :')

        Sheyy_94 a écrit:

        Merci de ta réponse rapide. :)

        Mais c'est très explicite lorsque je suis sur le site que tu m'as donnée , je ne sais pas par ou commencer :')



        -
        Edité par Sheyy_94 30 janvier 2023 à 11:09:36

        • Partager sur Facebook
        • Partager sur Twitter
          1 février 2023 à 9:02:37

          Hello , 

          Je sais pas en PHP , mais tu peux faire des requêtes $;AJAX coté JS / Jquery pour récupérer des données via un fichier PHP qui fait une requête à ta base de données et ensuite les insérer dans ton html.  

          let mesInfos = "ce que tu veux envoyer en params si besoin" 
          $.ajax({
               type: "POST",
               url: "action.php",
               data: { param : mesInfos },
               success: function( response ) {
                    $('#maDiv').html( response ); //Affichage de l'url cible, ici action.php, dans une DIV 
          // Tu peux aussi récupérer dans un tableau au format JSON si tu as plusieurs lignes ... }, error: function( response ) { console.log('Erreur pour poster le formulaire : '+ response.status + " " + response.statusText); } });



          • Partager sur Facebook
          • Partager sur Twitter

          la connaissance s'acquiert par l'expérience, le reste n'est qu'information.

            1 février 2023 à 12:26:44

            Le problème de la solution de mon VDD c'est que la requête ajax il faut la lancer régulièrement pour avoir l'information.

            Donc si c'est pour faire une relance automatique toutes les 5 secondes (ce qui figure dans le post initial) je ne trouve pas que ce soit une bonne solution.

            La solution server sent event est faite pour pousser régulièrement du contenu du serveur vers les clients.

            Sur la solution proposée ci-dessus je m'étonne toujours de l'utilisation de jquery ($.ajax) qui est une surcouche de javascript - donc surcharge du système - alors qu'il existe désormais une API en javascript qui est simple à utiliser : https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch

            Je ne veux pas créer de polémique, je donne juste des ouvertures.

            A+

            -
            Edité par monkey3d 1 février 2023 à 13:19:40

            • Partager sur Facebook
            • Partager sur Twitter
              1 février 2023 à 14:54:39

              bonjour .

              Je me suis donc renseigner sur du json et j'ai rond réalisé ceci.

              J'ai donc 3 fichiers : index.php , commandes.php et BaseCommandes.php

              Index.php : 

              <!DOCTYPE html>
              <html>
              <head>
              	<meta charset="utf-8">
              	<meta name="viewport" content="width=device-width, initial-scale=1">
              	<title>AFFICHAGE - COMMANDES</title>
              </head>
              <body>
              
              	<?php
              	include("commandes.php")
              	?>
              
              
              
              

              commandes.php

              <!DOCTYPE html>
              <html>
              <head>
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1">
                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
                      <script type="text/javascript">
                      $(document).ready(function () {
                  setInterval(function () {
                      $.ajax({
                          type: "POST",
                          url: "BaseCommandes.php",
                          dataType: "json",
                          sucess: function (response) {
                              var data = JSON.parse(response);
                              let html = "";
                              data.forEach(element => {
                                  html += "<tr>";
                                  let etat_cmd;
                                  let commande;
                                  let num_cmd;
              
                                  if (data['enc_ext_ref'] != '') {
                                      num_cmd = data["enc_ext_ref"];
                                  }
                                  else {
                                      num_cmd = data["enc_cmd_num"];
                                  }
              
                                  if (element['enc_paye'] == 0) {
                                      etat_cmd = '<span class="PRETE">ATTENTE REGLEMENT</span>';
                                  } else {
                                      switch (element['enc_prepared']) {
                                          case 0:
                                              etat_cmd = '<span class="ENPREPA">EN PREPARATION</span>';
                                              break;
                                          case 1:
                                              etat_cmd = '<span class="PRETE">COMMANDE PRETE</span>';
                                              break;
                                      }
                                  }
              
                                  switch (element['enc_prepared']) {
                                      case 0:
                                          commande = '<span class="EMPORTER"></span>';
                                          break;
                                      case 1:
                                          commande = '<span class="LIVRAISON"></span>';
                                          break;
                                      case 2:
                                          commande = '<span class="SURPLACE"></span>';
                                          break;
                                  }
              
                                  html += "<td>" + num_cmd + etat_cmd + commande + "</td>"
                              })
                                  document.getElementById('AffichageCommandes').innerHTML = html;
              
                          }
                      });
                  }, 10000);
              });
                  </script>
              
              </head>
              <body>
                  <div id="AffichageCommandes">
                   <?php
                          $sql = "SELECT enc_id, enc_cmd_num, enc_paye, enc_prepared, enc_ext_ref, enc_heure_fab_deb, enc_type, enc_heure_fab_fin, Client.cli_civilite,Client.cli_nom, Client.cli_prenom FROM Client RIGHT JOIN encaissement ON Client.cli_id = encaissement.enc_client WHERE enc_etat<>4 AND enc_date= convert(date,getdate()) AND ((DATEDIFF(n,enc_heure_fab_fin, getDate()) < 3 AND enc_prepared <> 0) OR enc_prepared = 0) AND enc_emporte <> 1 ORDER BY encaissement.enc_heure_fab_deb ASC";
              
                          $results = odbc_exec( $conn, $sql );
                  ?>
              
              
              <table>
                          <?php
                              while( $row = odbc_fetch_array( $results ) )
                              {
                                  printf('<tr>');
              
                                  if ( $row["enc_ext_ref"] != '')
                                      {
                                          $num_cmd = $row["enc_ext_ref"];
                                      }
                                  else
                                      {
                                          $num_cmd =$row["enc_cmd_num"];
                                      }
              
              
                                  if ($row['enc_paye'] = 0)
                                  {
                                      $etat_cmd='<span class="PRETE">ATTENTE REGLEMENT</span>';
                                  }
                                  else
                                  {
                                      switch( $row['enc_prepared'] )
                                      {
                                          case 0: $etat_cmd='<span class="ENPREPA">EN PREPARATION</span>'; break;
              
                                          case 1:
                                              $etat_cmd='<span class="PRETE">COMMANDE PRETE</span>'; break;break;
                                      }
                                  }
              
              
                                  switch( $row['enc_type'] )
                                  {
                                      case 0: $commande='<span class="EMPORTER"></span>'; break;
              
                                      case 1: $commande='<span class="LIVRAISON"></span>'; break;
              
                                      case 2: $commande='<span class="SURPLACE"></span>'; break;
                                  }
              
              
              
                                  printf('<td>%s%s%s</td>',$row["enc_cmd_num"],$etat_cmd, $commande);
                              
                              }
              
                          ?>
              
              
              
                          </table>
                      </div>
              
              
              
              
              
              
              
                

               BaseCommandes.php

               <?php
                          $sql = "SELECT  enc_cmd_num, enc_paye, enc_prepared, enc_ext_ref,enc_type, enc_heure_fab_fin, Client.cli_civilite,Client.cli_nom, Client.cli_prenom FROM Client RIGHT JOIN encaissement ON Client.cli_id = encaissement.enc_client WHERE enc_etat<>4 AND enc_date= convert(date,getdate()) AND ((DATEDIFF(n,enc_heure_fab_fin, getDate()) < 3 AND enc_prepared <> 0) OR enc_prepared = 0) AND enc_emporte <> 1 ORDER BY encaissement.enc_heure_fab_deb ASC";
              
                          $results = odbc_exec( $conn, $sql );
              
                          $final = [];
              
                          while( $row = odbc_fetch_array( $results ) )
                          {
                             array_push($final,$row);
              
                          }
              
                          echo json_encode($final);
              
                  ?>
              
              
              

              Le problème est que les données d'affichent donc mais ne s'actualise donc pas...



              -
              Edité par Sheyy_94 1 février 2023 à 14:54:58

              • Partager sur Facebook
              • Partager sur Twitter
                1 février 2023 à 15:03:29

                ok tu as choisi la solution ajax avec un refresh périodique et l'utilisation de jquery  ... je ne reviens pas sur ce que je pense.

                Déjà dans commandes.php tu as une erreur ligne 14 : c'est success et non sucess

                Benjyben ayant proposé cette solution, je ne doute pas qu'il saura te conseiller pour arriver au bout

                Bye

                -
                Edité par monkey3d 1 février 2023 à 15:05:43

                • Partager sur Facebook
                • Partager sur Twitter

                Actualiser des données sans "Refresh"

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                • Editeur
                • Markdown