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

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Juillet 2005
    Messages
    106
    Détails du profil
    Informations forums :
    Inscription : Juillet 2005
    Messages : 106
    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 confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 663
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 663
    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
    Membre confirmé
    Inscrit en
    Juillet 2005
    Messages
    106
    Détails du profil
    Informations forums :
    Inscription : Juillet 2005
    Messages : 106
    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
    Membre confirmé
    Inscrit en
    Juillet 2005
    Messages
    106
    Détails du profil
    Informations forums :
    Inscription : Juillet 2005
    Messages : 106
    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
    Membre confirmé
    Inscrit en
    Juillet 2005
    Messages
    106
    Détails du profil
    Informations forums :
    Inscription : Juillet 2005
    Messages : 106
    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
    17 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 205
    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.

+ 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