IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Traiter des données reçues d'une base de données


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Inscrit en
    juillet 2005
    Messages
    85
    Détails du profil
    Informations forums :
    Inscription : juillet 2005
    Messages : 85
    Points : 33
    Points
    33
    Par défaut Traiter des données reçues d'une base de données
    Bonjour à tous,

    Je cherche comment je peux lire les données d'une base de données et surtout comment les traiter.

    Toutes les 0.5 secondes j'aimerais lire l'état de capteur qui sont écris sur ma base de données. en fonction de ce qui est lu, j’aimerais effectué des actions.

    Je pensais faire comme cela mais je dois mal m'y prendre car ca ne fonctionne pas.
    Je vais lire ma base de données. celle-ci me renvoie les lignes suivantes par exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    LED1=1
    LED2=0
    LED3=0
    BUZ=0
    MAJ=0
    Si dans le texte lu de la base de données je trouve LED1=0 alors je souhaite affiché une led éteinte mais si je trouve LED1=1 alors je souhaite afficher l'image de la led allumée.

    Voici mon code lecture de la base de données en javascript:
    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
    			//-------------------------------------------------------------------------------
    			/*Lit l'état des LEDs  toutes les 0.5 secondes */
    			function Read_DB()
    			{
    				const requete_MAJ= new XMLHttpRequest();
    				requete_MAJ.open("GET", "/Read_Base.php", true);
    				requete_MAJ.send();
    				requete_MAJ.addEventListener("load", () => {
     
    					if (requete_MAJ.responseText.includes("LED1=1")) {
    						imageLedBon.style.display ='inline';
    						imageLedBoff.style.display ='none';						
    					} else if (requete_MAJ.responseText.includes("LED1=0")) {
    						imageLedBon.style.display ='none';
    						imageLedBoff.style.display ='inline';
    					}
    				    setTimeout( Read_DB, 500 )	
    				})
    			}
    			Read_DB()  // je repete l'opération toute les 0.5 secondes
    Dans mon HTML j'ai cela :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <td><img id="imageLedBon" style="display:none;" src="images/led_b_on.png"><img id="imageLedBoff" style="display:inline;" src="images/led_b_off.png"></td>
    J'ai essayé de faire un background-image dans une classe mais j'ai pas réussis non plus

    Rien ne se passe ! j'ai l’impression que la condition "LED1=1" ou "LED1=0" n'est jamais trouvée ! Pourtant en affichant ma base de données j'ai bien le bon texte qui se modifie.

    Merci à vous

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 381
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 381
    Points : 12 999
    Points
    12 999
    Par défaut
    pour débuguer cela, la 1re chose à faire est d'afficher ce que vous récupérez avec
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    console.log(requete_MAJ.responseText);
    si le contenu est correct, vous affichez les variables suivantes jusqu'à ce que vous trouvez la variable qui ne contient pas la valeur prévue.

  3. #3
    Nouveau membre du Club
    Inscrit en
    juillet 2005
    Messages
    85
    Détails du profil
    Informations forums :
    Inscription : juillet 2005
    Messages : 85
    Points : 33
    Points
    33
    Par défaut
    Bonjour Mathieu,

    Merci de vous penchez sur mon problème.

    Je viens de réaliser votre idée de "débug".

    Voila ce que j'obtiens dans la console toutes les 500ms :
    serveur.fantaspic.fr:169:14
    LED1=1<br>LED2=0<br>LED3=0<br>BUZ=0<br>MAJ=0<br>
    LED1=1<br>LED2=0<br>LED3=0<br>BUZ=0<br>MAJ=0<br>
    J'ai donc bien mes bons textes.

    Donc le probléme ce trouve plus bas.

    dans ma fonction dont je me suis inspiré d'une ancienne qui fonctionnait, je recherche dans la réponse le texte "LED1=1" , s'il existe, ce qui est le cas d’après le débug, je devrais afficher mon image. Hors rien ne se passe .
    Comme vous me l'avez suggéré, j'ai donc rajouté un text dans la console plutot que d'afficher une image, afin de voir si le texte est bien pris en compte.

    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
    			//-------------------------------------------------------------------------------
    			/*Lit l'état des LEDs  toutes les 0.5 secondes */
    			function Read_DB()
    			{
    				const requete_MAJ= new XMLHttpRequest();
    				requete_MAJ.open("GET", "/Read_Base.php", true);
    				requete_MAJ.send();
    				requete_MAJ.addEventListener("load", () => {
    					console.log(requete_MAJ.responseText);
     
    					if (requete_MAJ.responseText.includes("LED1=1")) {
    						imageLedBon.style.display ='inline';
    						imageLedBoff.style.display ='none';
    						console.log("LED1=1");
    					} else if (requete_MAJ.responseText.includes("LED1=0")) {
    						imageLedBon.style.display ='none';
    						imageLedBoff.style.display ='inline';
    						console.log("LED1=0");
    					}
    				    setTimeout( Read_DB, 500 )	
    				})
    			}
    			Read_DB()  // je repete l'opération toute les 0.5 secondes
    Ici j'ai bien le bon texte qui s’affiche dans la console? Donc on s'approche du but . l'erreur vient de l’affichage de mon image ... qui ne se fait pas. alors que dans mon code d'avant ca fonctionnait. Je continue mes investigations

  4. #4
    Nouveau membre du Club
    Inscrit en
    juillet 2005
    Messages
    85
    Détails du profil
    Informations forums :
    Inscription : juillet 2005
    Messages : 85
    Points : 33
    Points
    33
    Par défaut
    Me revoilou !

    Bon bizarrement c’a fonctionne maintenant ! j'avoue ne pas comprendre pourquoi ! peut être un mauvais rafraichissement de la page ?

    J'ai l'impression que ma façon de faire n'est pas top, cependant je n'ai trouvé que çà tout seul et c’a fonctionne.

    Je voudrais soumettre à votre expertise deux solutions qui fonctionne. laquelle vous parait la meilleur ?

    Une première où je charge mes deux images dans une cellule.
    quand je dois afficher une image , je mets la première sur 'none' et la seconde sur 'inline' , et vice versa dans l'autre sens .

    Mon image en html :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <td><img style="height:56px;" id="imageLedBon" src="images/led_b_on.png"><img style="height:56px;" id="imageLedBoff" src="images/led_b_off.png"></td>

    Mon code en JS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    if (requete_MAJ.responseText.includes("LED1=1")) {
    						imageLedBon.style.display ='inline';
    						imageLedBoff.style.display ='none';
     
    					} else if (requete_MAJ.responseText.includes("LED1=0")) {
    						imageLedBon.style.display ='none';
    						imageLedBoff.style.display ='inline';
     
    					}
    La seconde j'ai essayé de bien faire avec le CSS .
    J'ai donc créer mon image en css avec 'back ground image' .

    Mon CSS
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
      .LED1_off{
        height: 65px;
        background-image: url('images/led_b_off.png');
        background-size: 80% auto;
        background-repeat: no-repeat;
      }
      .LED1_on{  
        background-image: url('images/led_b_on.png');
      }

    Mon html :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <td id="imageLedB" class="LED1_off"></td>

    et mon JS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    					if (requete_MAJ.responseText.includes("LED1=1")) {
     
    						document.getElementById("imageLedB").classList.add('LED1_on');
    					} else if (requete_MAJ.responseText.includes("LED1=0")) {
     
    						document.getElementById("imageLedB").classList.remove('LED1_on');
    					}
    Voila les deux fonctionne apriori . L'une est elle mieux que l'autre , ou peut être qu'il y a encore mieux !

  5. #5
    Nouveau membre du Club
    Inscrit en
    juillet 2005
    Messages
    85
    Détails du profil
    Informations forums :
    Inscription : juillet 2005
    Messages : 85
    Points : 33
    Points
    33
    Par défaut
    Bonjour à tous,

    Je suis maintenant bloqué sur la récupération des valeurs de mes potentiomètres !

    En effet j'avance doucement et maintenant que tout fonctionne je cherche a recuprer les valeurs de mes potentiomètre stockés dans la base de données. Contrairement aux Boutons qui n'ont que deux positions et donc assez facile de lire la réponse, la il s'agit d'une valeur à 4 chiffres. Je ne peux donc pas faire une réponse pour chaque.

    Peut être que je dois manipuler le texte de ma réponse pour en extraire seulement le chiffre qui m’intéresse ! oui mais comment faire ? je n'ai pas trouver de solution avec des .search ou des indexof !
    Peut être que vous auriez une solution à me proposer !

    Donc voici à quoi ressemble une réponse de ma requête qui va lire ma Base de données pour en traiter les infos !
    Fichier Read_Base.php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    LED1=0
    LED2=1
    LED3=0
    INTER=0
    POTAR1=1234
    POTAR2=5678
    BUZ=0
    MAJ=56
    MAJ_web=56
    MAJ_ESP=56
    Et voici mon coide JS qui traite les infos recus pour le moment :
    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
    //-------------------------------------------------------------------------------
    			/*Lit l'état des LEDs  toutes les 0.5 secondes */
    			function Read_DB()
    			{
    				const requete_MAJ= new XMLHttpRequest();
    				requete_MAJ.open("GET", "/Read_Base.php", true);
    				requete_MAJ.send();
    				requete_MAJ.addEventListener("load", () => {
     
    					if (requete_MAJ.responseText.includes("LED1=1")) {
    						imageLedBon.style.display ='inline'; imageLedBoff.style.display ='none';
    					} else if (requete_MAJ.responseText.includes("LED1=0")) {
    						imageLedBon.style.display ='none'; imageLedBoff.style.display ='inline';
    					}
    					if (requete_MAJ.responseText.includes("LED2=1")) {
    						imageLedJon.style.display ='inline'; imageLedJoff.style.display ='none';
    					} else if (requete_MAJ.responseText.includes("LED2=0")) {
    						imageLedJon.style.display ='none'; imageLedJoff.style.display ='inline';
    					}
    					if (requete_MAJ.responseText.includes("LED3=1")) {
    						imageLedRon.style.display ='inline'; imageLedRoff.style.display ='none';
    					} else if (requete_MAJ.responseText.includes("LED3=0")) {
    						imageLedRon.style.display ='none'; imageLedRoff.style.display ='inline';
    					}	
    					if (requete_MAJ.responseText.includes("INTER=1")) {
    						imageInteron.style.display ='inline'; imageInteroff.style.display ='none';
    					} else if (requete_MAJ.responseText.includes("INTER=0")) {
    						imageInteron.style.display ='none'; imageInteroff.style.display ='inline';
    					}
     
     
    				    setTimeout( Read_DB, 500 )	
    				})
    			}
    			Read_DB()  // je repete l'opération toute les 0.5 secondes
    PS : J'ai penser a créer une fichier PHP par potentiomètre mais bon c'est con, car tout est dans la meme base.

    Comme vous le constatez, il est évident qu'il y certainement mieux comme façon de faire. Désolé si mon code vous fait saigner des yeux !

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 495
    Points : 38 863
    Points
    38 863
    Par défaut
    Bonjour,
    je constate à la lecture de la discussion que tu as peu tenu compte des remarques que l'on t'a faites !

    Que se passera-t-il quand tu auras 30 capteurs, ou plus, à gérer ?

    Le retour de ton serveur devrait plutôt être un objet type JSON et ressembler à :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    {
      "LED1": "1",
      "LED2": "1",
      "LED3": "1",
      "LED4": "0",
      "INTER": "0",
      "POTAR1": "1234",
      "POTAR2": "5678"
    }
    à partir de là c'est un jeu d'enfant que de mettre à jour le DOM pour peu que les clés soient des IDs d'éléments HTML et que fonction du type d'éléments tu agisse en conséquence.

    Je t'en avais mis un exemple de traitement dans ta première discussion.

    Bien sûr, d'autres méthodes peuvent être mises en place mais il me semble que la réception d'un « JSON » te faciliterait bien la tâche en parcourant celui-ci.

  7. #7
    Nouveau membre du Club
    Inscrit en
    juillet 2005
    Messages
    85
    Détails du profil
    Informations forums :
    Inscription : juillet 2005
    Messages : 85
    Points : 33
    Points
    33
    Par défaut
    Bonjour NoSmoking,

    je constate à la lecture de la discussion que tu as peu tenu compte des remarques que l'on t'a faites !
    Je sais que cela n'as pas l'air, mais crois moi, j'ai vraiment cherché a bien faire.

    Comme pour le HTML par exemple, tu m'as déconseillé de le faire avec des tables alors j'ai planché dessus avec des div etc.... Mais après plusieurs heures je n'y suis pas arrivé, alors qu'avec les tables j'ai réussis.
    J'essaye de m'améliorer et de retenir un maximum d’informations que vous me transmettez, mais c'est pas évident de les appliquer.
    Tu serais a coté de moi ce ne serais pas la même chose. Mais la, en attendant une réponse, je continue de cherche de mon coté et forcement je dévie. " C'est en faisant des erreurs que l'on apprend le mieux "

    Revenons a nos moutons !

    TU m'indique que le retour de mon serveur devrait être un objet JSON ? késako un objet JSON ?
    Même ma base données doit être toute pourrie dans sa construction, c'est la première fois que j'en fais une !

    Donc je vais chercher des infos sur les objets JSON , et je vais essayer de trouver comment faire en sorte que ma réponse de serveur ressemble a ce que tu m'as indiqué !

    Merci de ta patience et crois moi encore que je prends en compte tout ce que vous m'avez dit!

  8. #8
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 381
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 381
    Points : 12 999
    Points
    12 999
    Par défaut
    Citation Envoyé par dje8269 Voir le message
    Même ma base données doit être toute pourrie dans sa construction, c'est la première fois que j'en fais une !
    si j'ai bien suivi, tu as juste une table actuellement avec une ligne par valeur donc s'il y a quelque chose à optimiser je pense que ça ne sera pas grand chose donc tu peux continuer de l'utiliser pour le moment.

    Citation Envoyé par dje8269 Voir le message
    TU m'indique que le retour de mon serveur devrait être un objet JSON ? késako un objet JSON ?
    l'objet json c'est par exemple ce qu'il a mis comme exemple dans son message avec les "{" "}" et ":".
    en php tu peux faire cela :
    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
    <?php
     
     
    $donnees = [];
    $donnees["DIODE1"] = "1";
    $donnees["POTAR2"] = "124";
     
    /*
    ici $donnees contient un tableau php avec cela : 
     
    [
      'DIODE1' => '1',
      'POTAR2' => '124',
    ]
     
    */
     
     
    $resultat_json = json_encode($donnees);
     
     
    /*
    ici $resultat_json contient une chaine de caractères avec ça : 
     
    {
      "DIODE1" : "1",
      "POTAR2" : "124"
    }
    */
    tu vas surement dire que ça ne change pas grand chose en php mais là où ça change tout c'est en javascript.
    ce format est la base des objets javascript donc si le serveur envoie ça, dans le code javascript tu pourras lire directement requete_MAJ.response["POTAR2"] pour avoir la valeur "124".

  9. #9
    Nouveau membre du Club
    Inscrit en
    juillet 2005
    Messages
    85
    Détails du profil
    Informations forums :
    Inscription : juillet 2005
    Messages : 85
    Points : 33
    Points
    33
    Par défaut
    Merci Mathieu de ton intervention explicite.

    Bien que je pense avoir compris le principe c'est toujours et encore la forme et la construction qui me pose problème.

    Mettre en forme la réponse de la requête pour que Javascript puisse plus facilement l'interpréter je comprends tout a fait.

    J'ai donc modifier mon fichier Read_Base.php pour obtenir une réponse comme le préconise NoSmoking :

    Voici mon fichier :

    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
     
    <?php
    include("code_base_de_donnee.php");
     
    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
    }
     
    $sql = "SELECT Capteur, Etat FROM Ma_table";
    $result = $conn->query($sql);
     
    if ($result->num_rows > 0) {
      // output data of each row
      echo "{"."<br>";
      while($row = $result->fetch_assoc()) {
        echo "\"".$row["Capteur"]."\": \"" . $row["Etat"]. "\",<br>";  // ex : "LED1": "1",
      }
    } else {
      echo "0 results";
    }
    echo "}";
    $conn->close();
    ?>
    Voici une image de ma base
    Nom : Sans titre.png
Affichages : 52
Taille : 67,9 Ko

    Avec mon code voici le résultat de ma requête :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    {
    "LED1": "1",
    "LED2": "0",
    "LED3": "1",
    "INTER": "0",
    "POTAR1": "1234",
    "POTAR2": "5678",
    "BUZ": "0",
    "MAJ": "56",
    "MAJ_web": "56",
    "MAJ_ESP": "56",
    }
    J'ai l'impression que c'est bon ? En fait je pensais que cette architecture était faite directement par la Base de données. Mais apparemment il faut la construire !


    et enfin dans mon fichier index.php dans la partie du code en javascript j'ai écrit cela !
    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
     
    			/*Lit l'état des LEDs  toutes les 0.5 secondes */
    			function Read_DB()
    			{
    				const requete_MAJ= new XMLHttpRequest();
    				requete_MAJ.open("GET", "/Read_Base.php", true);
    				requete_MAJ.send();
    				requete_MAJ.addEventListener("load", () => {
     
    					if (requete_MAJ.responseText.includes("LED1=1")) {
    						imageLedBon.style.display ='inline'; imageLedBoff.style.display ='none';
    						//document.getElementById("imageLedB").classList.add('LED1_on');
    					} else if (requete_MAJ.responseText.includes("LED1=0")) {
    						imageLedBon.style.display ='none'; imageLedBoff.style.display ='inline';
    						//document.getElementById("imageLedB").classList.remove('LED1_on');
    					}
    					if (requete_MAJ.responseText.includes("LED2=1")) {
    						imageLedJon.style.display ='inline'; imageLedJoff.style.display ='none';
    					} else if (requete_MAJ.responseText.includes("LED2=0")) {
    						imageLedJon.style.display ='none'; imageLedJoff.style.display ='inline';
    					}
    					if (requete_MAJ.responseText.includes("LED3=1")) {
    						imageLedRon.style.display ='inline'; imageLedRoff.style.display ='none';
    					} else if (requete_MAJ.responseText.includes("LED3=0")) {
    						imageLedRon.style.display ='none'; imageLedRoff.style.display ='inline';
    					}	
    					if (requete_MAJ.responseText.includes("INTER=1")) {
    						imageInteron.style.display ='inline'; imageInteroff.style.display ='none';
    					} else if (requete_MAJ.responseText.includes("INTER=0")) {
    						imageInteron.style.display ='none'; imageInteroff.style.display ='inline';
    					}
     
    					console.log(requete_MAJ.response["POTAR2"]);
    				    setTimeout( Read_DB, 500 )	
    				})
    			}
    			Read_DB()  // je repete l'opération toute les 0.5 secondes
    En rajoutant la ligne de console.log afin de voir la réponse ! cela m’écrit "undefined" dans la console ?
    j'ai pas tout compris je pense !

    PS : j'ai pas compris où doit se mettre ton code php que tu as écrit ?

  10. #10
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 381
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 381
    Points : 12 999
    Points
    12 999
    Par défaut
    Citation Envoyé par dje8269 Voir le message
    PS : j'ai pas compris où doit se mettre ton code php que tu as écrit ?
    en fait la fonction "json_encode" remplace la construction que tu as faites dans la boucle. imagine que dans le futur tu aies une valeur qui contient un guillemet par exemple et ton résultat ne sera plus un objet json valide.

    donc dans la boucle qui lit les données avec fetch_assoc, tu mets ces données dans un tableau php (le tableau $donnees de mon exemple) et ensuite tu utilises "json_encode".
    je crois que j'ai vu le souci dans ton code, tu as mis un "<br>" mais c'est de l'html. là tu veux générer du json donc c'est un saut de ligne simple (qui n'est pas nécessaire en plus, tout peut se trouver sur une seule ligne).

    au niveau du code javscript, je te conseille d'afficher directement le contenu de "requete_MAJ". ça affichera beaucoup de chose qui ne te seront pas utile mais au milieu de tout ça, tu verras où sont tes données.

  11. #11
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 935
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 935
    Points : 65 295
    Points
    65 295
    Billets dans le blog
    1
    Par défaut
    Attention le dernier element ne doit pas être suivi d'une virgule ..
    le meilleur moyen d'y arriver sans erreur n'est pas de concatener un string
    mais de construire un array en php puis de faire un json_encode

    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    if ($result->num_rows > 0) {
    $output=array();
      // output data of each row
      while($row = $result->fetch_assoc()) {
        $output[$row["Capteur"]]= $row["Etat"];
      }
     
    echo json_encode($output);
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  12. #12
    Nouveau membre du Club
    Inscrit en
    juillet 2005
    Messages
    85
    Détails du profil
    Informations forums :
    Inscription : juillet 2005
    Messages : 85
    Points : 33
    Points
    33
    Par défaut
    Voici mes modifications suite à tes explications !

    Modification du fichier Read_base.php :

    pour "encoder" le JSON comme il faut pour pouvoir être interpréter en JS .
    Code php : 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
    <?php
    include("code_base_de_donnee.php");
     
    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
    }
     
    $sql = "SELECT Capteur, Etat FROM Ma_table";
    $result = $conn->query($sql);
     
    $donnees = [];    // création d'un tableau pour stocker les données
     
    if ($result->num_rows > 0) {  
        while($row = $result->fetch_assoc()) {          // output data of each row
     
            $donnees[$row["Capteur"]] = $row["Etat"];
        }
    } 
    else {
      echo "0 results";
    }
     
    $resultat_json = json_encode($donnees);
    echo $resultat_json ;
     
    $conn->close();
    ?>

    Quand j'ouvre la requete cela me donne :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    {"LED1":"1","LED2":"0","LED3":"0","INTER":"0","POTAR1":"1234","POTAR2":"5678","BUZ":"0","MAJ":"56","MAJ_web":"56","MAJ_ESP":"56"}
    Ce qui as l'air d'être correct et attendu ! déjà la je sais pas trop comment j'ai réussis si j'ai bon !

    Ensuite dans le html qui contient mon Javascript :
    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
     
    			/*Lit l'état des LEDs  toutes les 0.5 secondes */
    			function Read_DB()
    			{
    				const requete_MAJ= new XMLHttpRequest();
    				requete_MAJ.open("GET", "/Read_Base.php", true);
    				requete_MAJ.send();
    				requete_MAJ.addEventListener("load", () => {
     
    					if (requete_MAJ.responseText.includes("LED1=1")) {
    						imageLedBon.style.display ='inline'; imageLedBoff.style.display ='none';
    						//document.getElementById("imageLedB").classList.add('LED1_on');
    					} else if (requete_MAJ.responseText.includes("LED1=0")) {
    						imageLedBon.style.display ='none'; imageLedBoff.style.display ='inline';
    						//document.getElementById("imageLedB").classList.remove('LED1_on');
    					}
    					if (requete_MAJ.responseText.includes("LED2=1")) {
    						imageLedJon.style.display ='inline'; imageLedJoff.style.display ='none';
    					} else if (requete_MAJ.responseText.includes("LED2=0")) {
    						imageLedJon.style.display ='none'; imageLedJoff.style.display ='inline';
    					}
    					if (requete_MAJ.responseText.includes("LED3=1")) {
    						imageLedRon.style.display ='inline'; imageLedRoff.style.display ='none';
    					} else if (requete_MAJ.responseText.includes("LED3=0")) {
    						imageLedRon.style.display ='none'; imageLedRoff.style.display ='inline';
    					}	
    					if (requete_MAJ.responseText.includes("INTER=1")) {
    						imageInteron.style.display ='inline'; imageInteroff.style.display ='none';
    					} else if (requete_MAJ.responseText.includes("INTER=0")) {
    						imageInteron.style.display ='none'; imageInteroff.style.display ='inline';
    					}
     
    					 //var reponse = requete_MAJ.response["POTAR2"];
     
    					console.log(requete_MAJ);
     
    				    setTimeout( Read_DB, 500 )	
    				})
    			}
    			Read_DB()  // je repete l'opération toute les 0.5 secondes
    Le résultat semble correct dan la console j'obtiens :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    XMLHttpRequest { onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, responseURL: ".../Read_Base.php", status: 200, statusText: "OK", responseType: "", response: " {\"LED1\":\"1\",\"LED2\":\"0\",\"LED3\":\"0\",\"INTER\":\"0\",\"POTAR1\":\"1234\",\"POTAR2\":\"5678\",\"BUZ\":\"0\",\"MAJ\":\"56\",\"MAJ_web\":\"56\",\"MAJ_ESP\":\"56\"} " }
    Ensuite quand je décommente la ligne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    //var reponse = requete_MAJ.response["POTAR2"];
    j'ai toujours le message "undefined" qui apparait !

  13. #13
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 495
    Points : 38 863
    Points
    38 863
    Par défaut
    Comme pour le HTML par exemple, tu m'as déconseillé de le faire avec des tables alors j'ai planché dessus avec des div etc....
    Cela n'a pas de caractère d'urgence

    Le résultat semble correct dan la console j'obtiens :
    Attention les données retournées par le serveur sont contenues dans une chaîne de caractères, avant exploitation sous forme d'objet il y a lieu de convertir celle-ci en objet et pour ce faire on utilise JSON.parse("chaine représentant l'objet").
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    requete_MAJ.addEventListener("load", () => {
          const datas = JSON.parse(requete_MAJ.responseText);
          if (datas["LED1"]) { // objet LED1 existe
            if (datas["LED1"] == 1) {
              // faire avec
            }
            else {
              // faire sinon
            }
            // la suite du code
    tu verras par la suite à optimiser le code qui fatalement deviendra lourd !

  14. #14
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 381
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 381
    Points : 12 999
    Points
    12 999
    Par défaut
    oups, j'ai l'habitude d'utiliser jquery où il se passe plein de choses automatiques. mais je crois que ce n'est pas le cas avec XMLHttpRequest et vous devez rajouter une ligne pour analyser la réponse.
    donc au final dans le code javascript vous devez faire ça :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    let donnees = JSON.parse(requete_MAJ.response);
    console.log(donnees["INTER"]);
    console.log(donnees["POTAR1"]);

  15. #15
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 935
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 935
    Points : 65 295
    Points
    65 295
    Billets dans le blog
    1
    Par défaut
    Attention toutes fois au else ...
    il vaut mieux prévoir une clef erreur ...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    else {
      $output['erreur']='0 results'
    }

    De sorte que le JSON.parse puisse retourner un résultat cohérent.
    il te suffira ensuite de tester si la clef 'erreur' existe cote client

    ou alors prévoir une clef count avec le nombre de résulats ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  16. #16
    Nouveau membre du Club
    Inscrit en
    juillet 2005
    Messages
    85
    Détails du profil
    Informations forums :
    Inscription : juillet 2005
    Messages : 85
    Points : 33
    Points
    33
    Par défaut
    Merci à tous les 3 ,

    Ça donne envie de continuer avec des réponses aussi claires et explicites. Bien que mon niveau soit faible, j'arrive à obtenir l'effet désiré grâce à vous !

    Pour vous "informaticiens" ça doit moins vous parler que pour moi "électronicien" mais j'aime aussi le concret. Et c'est un véritable plaisir de voir ma carte obéir à une interface web, de plus avec la petite image c'est très pédagogique. Mes enfants s'amusent comme des fous même si ce n'est pas le but !

    Donc désolé d'avoir mis autant de temps pour répondre, mais comme on change le fichier Reab_Base de "format", il ne faut pas oublier que de l'autre coté j'ai aussi un client ( mon ESP) qui lui a aussi besoin de lire cette base. Du coup j'ai fait un fichier spécial pour lui au format qui lui convient.

    Du coup ça donne çà.

    Dans le HTML qui gère mes petites POTAR j'ai :
    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
    		 <!-- #################   1 ere Colonne    #########################  -->
    		 <table style="display:inline; vertical-align: top;" > 
    		 	<tr>				
    				<td style="height: 30px; width: 195px;"></td>		
    			</tr>
    			<tr>				
    				<td style="height: 85px; text-align: right;">
    					<button class="BP_poussoir" id="BUZ" value="Buzzer">Buzzer</button>
    				</td>		
    			</tr>
    			<tr>				
    				<td style="height: 125px;"></td>		
    			</tr>
    			<tr style="height: 85px;">				
    				<td class="Potar" id="Potar1" >1245</td>		
    			</tr>
    			<tr>				
    				<td style="height: 33px;"></td>		
    			</tr>
    			<tr style="height: 85px;">				
    				<td class="Potar" id="Potar2">6789</td>		
    			</tr>
    		</table>


    Coté JavaScript dans le HTML
    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
     
    			//-------------------------------------------------------------------------------
    			/*Lit l'état des LEDs  toutes les 0.5 secondes */
    			function Read_DB()
    			{
    				const idPotar1 = document.getElementById("Potar1");
    				const idPotar2 = document.getElementById("Potar2");
     
    				const requete_MAJ= new XMLHttpRequest();
    				requete_MAJ.open("GET", "/Read_Base.php", true);
    				requete_MAJ.send();
    				requete_MAJ.addEventListener("load", () => {
     
    					const donnees = JSON.parse(requete_MAJ.response);  // Ici je convertis la réponse en objet pour pouvoir l'utiliser en JS
     
    					if ( donnees["LED1"] == 1 ) {
    						imageLedBon.style.display ='inline'; imageLedBoff.style.display ='none';
    					} else {
    						imageLedBon.style.display ='none'; imageLedBoff.style.display ='inline';
    					}
    					if (donnees["LED2"] == 1) {
    						imageLedJon.style.display ='inline'; imageLedJoff.style.display ='none';
    					} else  {
    						imageLedJon.style.display ='none'; imageLedJoff.style.display ='inline';
    					}
    					if (donnees["LED3"] == 1) {
    						imageLedRon.style.display ='inline'; imageLedRoff.style.display ='none';
    					} else {
    						imageLedRon.style.display ='none'; imageLedRoff.style.display ='inline';
    					}	
    					if (donnees["INTER"] == 1) {
    						imageInteron.style.display ='inline'; imageInteroff.style.display ='none';
    					} else {
    						imageInteron.style.display ='none'; imageInteroff.style.display ='inline';
    					}
    					idPotar1.textContent = donnees["POTAR1"];
    					idPotar2.textContent = donnees["POTAR2"];			
     
    				    setTimeout( Read_DB, 500 )	
    				})
    			}
    			Read_DB()  // je repete l'opération toute les 0.5 secondes

    Un véritable bonheur de voir bouger les chiffres en tournant les potar, et de voir changer la position de l’interrupteur sur l'écran quand on le change sur la carte .

    Cependant il me reste un petit soucis à régler. C'est quand j'allume une led depuis ma platine et non depuis les boutons webs. Mettre à jour la base de données aucun problème.
    Donc cela va m'afficher la bonne image de led ( soit allumée ou éteinte) , par contre le bouton " case à cocher" lui ne bouge pas ! est-il possible de le passer à chekced ?

    Voici une petite photo en cadeau pour vous remercier de l'aide précieuse.
    Nom : IMG_20210719_190545.jpg
Affichages : 34
Taille : 280,8 Ko

  17. #17
    Nouveau membre du Club
    Inscrit en
    juillet 2005
    Messages
    85
    Détails du profil
    Informations forums :
    Inscription : juillet 2005
    Messages : 85
    Points : 33
    Points
    33
    Par défaut
    trouvé pour mettre le bouton en "checked" .

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    				if ( donnees["LED1"] == 1 ) {
    						imageLedBon.style.display ='inline'; imageLedBoff.style.display ='none';
    						LED1.checked = true;
    					} else {
    						imageLedBon.style.display ='none'; imageLedBoff.style.display ='inline';
    						LED1.checked = false;
    					}

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [FLASH 8] Afficher des images à partir d'une base de données
    Par developpeur_mehdi dans le forum Flash
    Réponses: 9
    Dernier message: 15/03/2006, 10h43
  2. [Conception] Stocker des fichiers multimédia dans une base de données
    Par haifa84 dans le forum PHP & Base de données
    Réponses: 3
    Dernier message: 11/03/2006, 17h47
  3. Intégration des fichier XML dans une base de données MySQL
    Par bebemoundjou dans le forum XQUERY/SGBD
    Réponses: 8
    Dernier message: 25/11/2005, 22h41
  4. Test des liens vide sur une base de données
    Par FLANQUART Marie dans le forum ASP
    Réponses: 1
    Dernier message: 10/11/2005, 14h35
  5. SQL - Traiter des données d'une table
    Par david71 dans le forum MS SQL Server
    Réponses: 2
    Dernier message: 22/02/2005, 16h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo