Systeme de like dislike jquery ,ajax et php

Résolu/Fermé
ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021 - 20 avril 2021 à 21:47
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 - 21 avril 2021 à 21:27
salut enfaite le problème avec mon systeme de like est que sa s'applique sur un seul article

vous pouvez remarquer sur l'image les autres articles n'affiche pas le nombre de like et dislike


article.php


<?php
$requete = $bdd->query(" SELECT * FROM articles join   images 
where  images.idarticle = articles.id   group by idarticle order by date_time_publication desc" );


  while($resultat =$requete->fetch())

{?>
     
    <img src="<?php echo $resultat['image'] ?>" width='50' >
    
   
    <?php  $json1= json_encode($resultat['id']); ?> 
   
     <?php include 'likedislike.php'; } ?>
 


likedislike.php

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>

    $(document).ready(function(){
  $("#like").click(function(){ 
    
        $.post("reputation.php",{ t:"1" ,idarticle :<?=$json1 ?>}, function(data){
          
           $("#result").html(data);
         
        });
    });
 });


    $(document).ready(function(){
  $("#dislikes").click(function(){
        $.post("reputation.php",{t:"2",idarticle:<?=$json1 ?>}, function(data){
            
           $("#result").html(data);
         
        });
    });
 });
</script>
 <script>

    setInterval(function(){
        $.post("likes.php", {likes:<?=$json1 ?>}, function(data){
            // Display the returned data in browser
            $("#likes").html(data);
            console.log(data);
        });
    },100); 


    setInterval(function(){
        $.post("dislikes.php", {dislikes:<?=$json1 ?>}, function(data){
            // Display the returned data in browser
            $("#dislike").html(data);
            console.log(data);
        });
    },100);
</script>  
<code html>

<p>  <span class="gauche" >
   <button id="like" class="btn btn-outline-danger" ><div id="likes"></div>J'aime </button></span></p>
     
   
   

   <span class="droite" >
    <button id="dislikes" class="btn btn-outline-success" ><div id="dislike"></div>Je n'aime pas </button></span>
   </p> 


</code>

like.php

<?php 
$bdd = new PDO('mysql:host=127.0.0.1;dbname=espace_membre', 'root', '');
      if(isset($_POST ['likes']) AND !empty($_POST ['likes'])) {
         $get_id = htmlspecialchars($_POST ['likes']);
         $likes = $bdd->prepare('SELECT idarticle FROM likes WHERE idarticle = ?');
         $likes->execute(array($get_id));
         $likes = $likes->rowCount();
  

  echo "$likes";
  ; 
   } else {
   die();
}


dislike.php

     <?php 
$bdd = new PDO('mysql:host=127.0.0.1;dbname=espace_membre', 'root', '');
      if(isset($_POST ['dislikes']) AND !empty($_POST ['dislikes'])) {
         $get_id = htmlspecialchars($_POST ['dislikes']);
         $dislikes = $bdd->prepare('SELECT idarticle FROM dislikes WHERE idarticle = ?');
         $dislikes->execute(array($get_id));
         $dislikes = $dislikes->rowCount();
  

  echo "$dislikes";
  ; 
   } else {
   die();
}
A voir également:

5 réponses

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
20 avril 2021 à 21:54
Bonjour
Ton premier problème est que tu cibles (dans ton JavaScript) tes boutons via leur id.
Visiblement tu as utilisé le même identifiant pour toud tes boutons ... Alors qu'un identifiant se doit d'être unique.
À la place, je t'invite à utiliser des class pour cibler des éléments.

Une fois cette modification effectuée, tu pourras retirer le JavaScript de ton include et le placer en dehors de ta boucle.
0
ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021
20 avril 2021 à 21:59
enfaite je les ai les differencier avec un"s"
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
20 avril 2021 à 22:04
Qu'est-ce que tu racontes....
Tu te bouton likes et le même id
Idem pour tes boutons dislikes

Il te suffit de regarder le code source généré dans ton navigateur internet pour pouvoir te rendre compte...
0
ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021
20 avril 2021 à 22:08
et je viens d'enlever la mon include dans la boucle
les like du premier article marche normalement
le seul souci et que lees like saffiche pas les autres articles
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
20 avril 2021 à 22:12
Tu n'as pas compris ce que je t'ai dit.
C'est uniquement le code javascript qu'il faut sortir de ta boucle.
Il faut modifier ton code JavaScript... Pour qu'il cible les différents boutons via, par exemple, une class et non les id...
L'as-tu modifié ?
As-tu mis des class sur tes boutons ?
As-tu utilisé c'est class dans le code JavaScript ?
0
ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021 > jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024
20 avril 2021 à 22:16
excuse moi la suis un peu perdu
surtout avec class
comment les utiliser dans le code
javascript ?
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717 > ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021
20 avril 2021 à 22:20
0
ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021
Modifié le 20 avril 2021 à 23:05
c'est fait mais jusqua la pour les autre article saffiche pas
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
20 avril 2021 à 23:09
Si tu ne nous montres pas ton code modifié, comment éspères tu qu'on puisse voir ce qui a été mal fait ?
0
ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021 > jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024
20 avril 2021 à 23:19
on me dit access denied
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717 > ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021
20 avril 2021 à 23:26
"on" ..qui ça "on" ?
0
ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021 > jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024
20 avril 2021 à 23:28
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717 > ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021
20 avril 2021 à 23:36
Vide ton cache
Et, dans ton message, ne mets pas seulement le code... ajoute un minimum de texte.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
20 avril 2021 à 23:49
Bon,

Il y aurait encore mieux à faire.... mais bon, vu l'heure tardive je ne vais pas te faire réflechir trop longtemps...
Donc, En gros, ton code devrait ressembler à un truc du genre
(attention, je l'ai écrit de tête sans le tester.. il y aura peut-être des erreurs à corriger.... )
Fichier : likedislike.php
<p>  
  <span class="gauche" >
   <button id="like_<?php echo $resultat['id'];?>" class="btn btn-outline-danger btn-like" data-id="<?php echo $resultat['id'];?>" ><div  class="div_like" data-id="<?php echo $resultat['id'];?>" id="likes_<?php echo $resultat['id'];?>"></div>J'aime </button>
   </span>
  <span class="droite" >
    <button id="dislikes_<?php echo $resultat['id'];?>" class="btn btn-outline-success btn-dislike" data-id="<?php echo $resultat['id'];?>"><div class="div_dislike" data-id="<?php echo $resultat['id'];?>" id="dislike_<?php echo $resultat['id'];?>"></div>Je n'aime pas </button>
  </span>
</p> 


En dessous de ta boucle
<script type="text/javascript">
$(document).ready(function(){
  $(".btn-like").click(function(){ 
      var id = $(this).data('id');
      $.post("reputation.php",{ t:"1" ,idarticle :id}, function(data){
         $("#result").html(data);     
      });
  });

    $(".btn-dislike").click(function(){
      var id = $(this).data('id');
      $.post("reputation.php",{t:"2",idarticle:id}, function(data){
         $("#result").html(data);
      });
  });
  
   setInterval(function(){
     $('.div_like').each(function(i,el){
       var id = $(el).data('id');
       $.post("likes.php", {likes:id}, function(data){
            // Display the returned data in browser
            $("#likes_"+id).html(data);
            console.log(data);
        });
      
     });
       $('.div_dislike').each(function(i,el){
       var id = $(el).data('id');
       $.post("dislikes.php", {likes:id}, function(data){
            // Display the returned data in browser
            $("#dislike_"+id).html(data);
            console.log(data);
        });
      
     });  
    },100); 
    
});

      
</script>


Dans les idées d'amélioration .. au lieu d'utiliser deux fichiers php pour récupérer séparément les votes like et dislike, tu pourrais le faire avec un seul fichier .. une seule requête SQL et donc, un seul appel ajax.

D'ailleurs, pourquoi avoir fait deux tables différentes ??
Une seule table avec deux colonnes pour gérer les like ou dislike aurait été préférables ...
Table "vote" avec les champs : idarticle, like, dislike
  • Au niveau requête, ça aurait simplement donné

SELECT idarticle, like, dislike  FROM votes WHERE idarticle = ?'



PS: Il me semblait t'avoir déjà indiqué que la fonction htmlspecialchars ne s'utilise pas pour "sécuriser" les variables que tu utilises ensuite dans les requêtes... cette fonction n'est utile que pour de l'affichage dans du html

PS2 : Il me semblait également 'avoir déjà donné des consignes concernant l'écritures du code PDO
Pour rappel : https://forums.commentcamarche.net/forum/affich-37584941-php-pdo-gerer-les-erreurs

PS3 : J'avais également déjà dû te donner d'autres conseils ici : https://forums.commentcamarche.net/forum/affich-37584947-php-gestion-des-erreurs-debogage-et-ecriture-du-code

Il serait peut-être temps que tu appliques les conseils ( consignes ! ) qu'on te donne .. sinon je ne vois pas l'intéret de continuer à te venir en aide.


0
ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021
21 avril 2021 à 00:17
Pour les like j’avais suivi un tuto c’est la j’ai pris l’idée des deux tables parce j’ai mis aussi une colonne pour l’ID de l’utilisateur
Ps2 pour le pdo j’avais pas oublié enfaite sa y est dans le code j’ai sauté sa pour publier en bref
PS3 c’est noté vais essayer de tout mettre et désolé d’être aussi chiant par fois ????
0
ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021
Modifié le 21 avril 2021 à 21:17
Pour les class des buttons pourquoi je peux pas utiliser les id
Parce j’utilise déjà bootstrap et sa identifie les button via les class ...




Et aussi
j’ai vraiment pas compris cette partie du code



setInterval(function(){
     $('.div_like').each(function(i,el){
       var id = $(el).data('id');
       $.post("likes.php", {likes:id}, function(data){
            // Display the returned data in browser
            $("#likes_"+id).html(data);
            console.log(data);
        });
      
     });
       $('.div_dislike').each(function(i,el){
       var id = $(el).data('id');
       $.post("dislikes.php", {likes:id}, function(data){
            // Display the returned data in browser
            $("#dislike_"+id).html(data);
            console.log(data);
        });
      
     });  
    },100); 

0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717 > ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021
21 avril 2021 à 21:27
Un id ( id: qui veut dire identifiant) se doit d'être unique.
C'est comme toi avec ton nom et ton prénom.
Imagine que tout le monde s'appelle de la même manière quand tu veux parler à une personne précise comment fais-tu ?
Et c'est bien le car actuellement dans ton site web.
Tu as plusieurs fois un bouton like et un bouton dislike... Chacun de ses boutons toi avoir un identifiant unique.

Pour ce qui est d'attacher l'événement clic sur chaque bouton, on utilise comme sélecteur, une class.

Je ne vais pas passer ma soirée à te donner un cours... Je t'invite très fortement à suivre des cours sérieux concernant la programmation en javascript.
Suivre des tutoriels on ne faisons que copier coller les bouts de code trouver çà et là sans être en capacité de les comprendre ne te sert à rien !

Pour ma part je m'arrête là dans la discussion je te laisse poursuivre (ou plutôt devrais-je dire commencer....) Ta formation.

Bonne soirée.
0