Partage

Faire une fenêtre POP-UP

26 janvier 2023 à 11:47:03

Bonjour à tous.

Je souhaiterais avoir des renseignement sur un projet que je souhaite réalisé.

J'ai réalise un affichage de commandes qui proviennent d'une base de données et qui affiche donc le numéro de la commande ainsi que son statut si elle est prête ou si elle est en cours de préparation.

Mon objectif serait donc.

De pouvoir afficher une fenêtre POP-UP qui affiche donc le numéro ainsi que la commande qui est prête et qui donc ensuite supprime la pop up après X temps. De même pour toutes les commandes.

Voici mon code en php qui affiche les commandes en général :

<!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/EspaceCommandess.css">
     <meta http-equiv="refresh" content="45" />
    <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= '20230126' 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;
                        }
                    }

                    



                    switch( $row['enc_type'] )
                    {
                        case 0: $commande='&nbsp&nbsp<span class="EMPORTER"><img src="img/emporter.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/table1.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>

monkey3d

26 janvier 2023 à 12:58:56

Bonjour,

L'affichage d'une pop-up et sa disparition sur temporisation ne relève pas vraiment du php mais du html/css et du javascript.

A titre d'exemple à adapter tu peux t'inspirer de bootstrap :

https://getbootstrap.com/docs/5.2/components/modal/

A+

Sheyy_94

30 janvier 2023 à 10:20:45

Bonjour ,

Ok ça marche , merci de l'info !

monkey3d a écrit:

Bonjour,

L'affichage d'une pop-up et sa disparition sur temporisation ne relève pas vraiment du php mais du html/css et du javascript.

A titre d'exemple à adapter tu peux t'inspirer de bootstrap :

https://getbootstrap.com/docs/5.2/components/modal/

A+

Sheyy_94

10 février 2023 à 15:47:40

Bonjour à tous

Je reviens sur ce post concernant le fait d’établir un 'pop up' qui surgit sur mon écran lorsqu'une commande passe en prête.

J'ai donc été sur le site qui m'a été proposée , le problème étant que je ne sais pas comment cela fonctionne et ce script fonctionne avec un bouton , ce qui n'est pas ce que je recherche

Merci d'avance !

Ymox

10 février 2023 à 22:52:42

Salut

Sur le site, un peu plus bas dans la documentation, il y a une partie titrée « Usage – Via JavaScript », qui te permet de contrôler l'affichage comme tu le souhaites et non pas juste sur un clic.

Par contre, attention : si tu cherches à avoir des états qui changent sans recharger la page, on est dans une approche un peu différente, parce que cela demande d'avoir une "connexion permanente" avec le serveur.

-
Edité par Ymox 10 février 2023 à 22:54:39

OC à changer • FAQ PHP • Et avant cela • Tutoriel WAMP • @Zeste de Savoir

monkey3d

11 février 2023 à 6:35:27

Si tu parles du lien sur bootstrap, le pop-up peut s'activer sans bouton en utilisant les fonctions indiquées dans le paragraphe "via javascript". cf Ymox aussi.

Mais dans ce cas, quel est l'événement qui va déclencher la fonction javascript ?

Pour ma part j'utilise ce type de mise à jour sans recharger la page avec par exemple le SSE : https://developer.mozilla.org/fr/docs/Web/API/Server-sent_events/Using_server-sent_events

C'est à mon sens le plus simple quand on veut pousser des informations régulièrement du serveur vers les postes clients. Ce qui me semble être ton besoin (?).

Il y a bien d'autres protocoles possibles comme mercure (un peu plus de possibilités que SSE), websocket (si besoin bi-directionnel) et aussi mqtt que j'utilise.

A+

-
Edité par monkey3d 11 février 2023 à 9:51:27

Sheyy_94

13 février 2023 à 11:22:25

Bonjour ,

Premièrement , merci à vous deux de vos précieuses aide concernant ma demande.

Mais concernant le script a utilisé , j'ai donc utilisé celui fournit directement sur le site internet , et c'est en-dessous que je dois établir la condition pour que le pop-up puisse s'afficher ?

Par exemple moi j'utilise une requête ajax qui elle refresh toutes les données de la base de données sans recharger la page

Voici tout mon code en entier pour mon projet :

<!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/Commandess.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

    <div class="TABLELEFT">

        <script type="text/javascript">
        $(document).ready(function () {
            setInterval(function () {
        $.ajax({
            type: "POST",
            url: "BaseCommandes.php",
            dataType: "json",
            error: function(error){
            console.log(error)
            },
            success: function (response) {
                  console.log(response);
                var data = response;
                let html = "";
                data.forEach(element => {
                    html += "<tr>";
                    let etat_cmd;
                    let commande;
                    let num_cmd;

                     if (element['enc_ext_ref'] != null) {
                        num_cmd = '#'+element["enc_ext_ref"];
                    }
                    else {
                        num_cmd = element["enc_cmd_num"];
                    }

                    if (element['enc_paye'] == 0) {
                        etat_cmd = '<span class="ATTENTE">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_type']) {
                        case '0':
                            commande = '<span class="EMPORTER">&nbsp&nbsp&nbsp<img src="img/nourriture.png" id="EMP"></span>';
                            break;
                        case '1':
                            commande = '<span class="LIVRAISON">&nbsp&nbsp&nbsp<img src="img/livreurscoot.png" id="LIV"></span>';
                            break;
                        case '2':
                            commande = '<span class="SURPLACE">&nbsp&nbsp&nbsp<img src="img/resto.png" id="TABLE"></span>';
                            break;
                    }

                    html += "<td>" + num_cmd + etat_cmd + commande + "</td><br>"
                })

                document.getElementById('AffichageCommandes').innerHTML = html;
            }
        });
    }, 1000);
});


    </script>

    <script type="text/javascript">
        const myModalEl = document.getElementById('myModal')
        myModalEl.addEventListener('hidden.bs.modal', event => {
  
})

        
    </script>
</table>

</head>
<body>
    <div id="AffichageCommandes"></div>

monkey3d

13 février 2023 à 11:28:41

Alors moi la solution rafraîchissement ajax périodique me semble une mauvaise solution ... pourquoi ? dans la plus part des cas tu n'as tien à rafraîchir je suppose. Et si j'ai bien vu tu demandes à chaque seconde ... donc surcharge serveur inutile.

Solution jquery : c'est désormais inutile pour faire ce genre de méthode puisqu'il existe l'API pure javascript : https://developer.mozilla.org/fr/docs/Web/API/Fetch_API

Donc je te conseille de regarder le lien que je t'ai indiqué ci-dessus qui est fait pour répondre à ton besoin et que je te redonne :

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

C'est une solution bien plus simple que celle que tu veux mettre en oeuvre.

Bien-sûr tu peux faire comme tu l'entends.

A+

-
Edité par monkey3d 13 février 2023 à 11:29:22

Sheyy_94

13 février 2023 à 11:43:33

Je t'avoue que mon projet est un testing pour voir déjà si tout va bien dans un premier temps .

Après plus tard si il y a des soucis je modifierais le code afin de le rendre beaucoup plus optimisé.

Mon objectif , est de pouvoir faire un appel d'une pop-up qui affiche la commande qui est prête avec le numéro de commande.

Dans le site que tu m'as fourni , il notifie cette ligne de code :

    <script type="text/javascript">
        const myModalEl = document.getElementById('myModal')
        myModalEl.addEventListener('hidden.bs.modal', event => {
        //CODE
})

A la place du commentaire , c'est donc ici qu'il faut établir la condition d'afficher la commande si elle est donc prête ?

monkey3d

13 février 2023 à 13:24:56

Tu confonds 2 choses :

1) afficher une modale déclenchée par javascript. le dernier code ci-dessus est un squelette.

2) le contenu dynamique qui va remplir la modale et là tu es obligé de faire un lien avec le serveur donc :

- soit tu fais ta solution ajax - jquery avec rafraîchissement à chaque seconde : mauvaise solution selon moi

- soit tu utilises les servers sent event qui poussent du contenu régulièrement du serveur vers les navigateurs c'est à dire pour ton besoin d'envoyer du serveur vers les clients les commandes prêtes.

Les 2 solutions sont totalement différentes donc l'une n'est pas l'optimisation de l'autre.

A+

-
Edité par monkey3d 13 février 2023 à 13:25:53