Bonjour,

J'ai actuellement des boutons classiques sur mon site et j'aimerais les rendre plus dynamique. Je m'explique : J'ai un bouton qui permet aux membres de liker un commentaire et je souhaiterais que lorsqu'il clique sur ce bouton, que la couleur du bouton change afin de montrer qu'il a déjà aimé ce commentaire.



J'aimerais que le tout se fasse sans recharger la page mais je ne sais pas du tout comment m'y prendre, je bloque sur ça depuis de nombreuses semaines maintenant.

Voici mon code :

<?php if(isset($_SESSION['id'])) { ?>			
					<?php
$posteur = $bdd->quote($_SESSION['id']);
$id_commentaire = $bdd->quote($_GET['id']);
$getComQuery = $bdd->query("SELECT * FROM `like_commentaire ` WHERE posteur=$posteur AND id_commentaire =$id_commentaire ");
if( $getComQuery ->fetch() !== false )
{  
   // Le visiteur a déjà liké car on a trouvé un enregistrement
 }
else
{
   echo '<form method="post" action="">
               <button style="height:22px;margin-left:20px;" name="envoie_like">J'aime</button>
            </form>';
}
?>
<?php } 
else { echo '<form method="post" action="?page=connection">
               <button style="height:22px;margin-left:20px;" name="like">J'aime</button>
            </form>'; }
?>

Merci à ceux qui pourront m'éclairer et m'aider.

Bonne journée,

Bonjour,
Il faut tout d'abord savoir que le PHP est un langage serveur. Cela signifie qu'il va s'exécuter avant même que le client récupère les données.
Te tourner vers PHP ne sera donc pas possible pour faire ce que tu souhaites.
Te reste alors 2 choix :
Soit tu souhaites juste que le texte change quand tu cliques dessus et il faudra faire appel à quelques ligne de Javascript (qui lui est un langage client).
Soit tu souhaites faire une vérification pour savoir si dans la base de données l'utilisateur a bien aimé la page, et dans ce cas là il faudra utiliser les requêtes Ajax.
Ces solution ne s'appliquent bien sûr que si tu souhaites faire ces modifications sans aucun rechargement de page.
Dans le cas contraire, le php pourra être utilisé pour faire ces modifications dés le chargement de la page.
En espérant t'avoir éclairé

Merci pour ta réponse même si je la redoutais. :/
Je déteste l'ajax, je n'y comprend vraiment rien. Est ce compliquer à faire ? Ou est ce quelque chose de vraiment simple ?

En faite, le soucis est que si tu ne passes pas par de l'Ajax, tu devras forcer un rechargement de page au clique de l'utilisateur pour pouvoir enregistrer les informations.
Cependant, sache que les requêtes Ajax ne sont pas si compliqué que ça. Je te conseil vivement d'aller jeter un coup d'œil sur la multitude de tutoriels qui se trouvent sur internet. En voici un par exemple : https://openclassrooms.com/courses/un-s ... nt-de-ajax

D'accord merci pour le lien ! Une question que je me pose, il faut obligatoirement séparé en deux fichiers ? L'ajax d'un coté et l'html du formulaire de l'autre ? Ou bien on peut tout réunir en un fichier ?

Concrètement je crois que ça donnerait quelque chose comme ça :

<?php if(isset($_SESSION['id'])) { ?>			
          <?php
$posteur = $bdd->quote($_SESSION['id']);
$id_commentaire = $bdd->quote($_GET['id']);
$getComQuery = $bdd->query("SELECT * FROM `like_commentaire ` WHERE posteur=$posteur AND id_commentaire =$id_commentaire ");
if( $getComQuery ->fetch() !== false )
{  
   // Le visiteur a déjà liké car on a trouvé un enregistrement
 }
else
{
   echo '<form id="formulaire" method="post" action="">
               <button style="height:22px;margin-left:20px;" name="envoie_like">J'aime</button>
            </form>';
}
?>
<?php } 
else { echo '<form method="post" action="?page=connection">
               <button style="height:22px;margin-left:20px;" name="like">J'aime</button>
            </form>'; }
?>

$("#formulaire").submit(function(event) {
  event.preventDefault();  // Empêcher le rechargement de la page.
 
  var formData = new FormData($("#formulaire"));
 
  $.ajax({
    type: "POST",
    url: "fichier.php",
    data: formData
  });
});

Je ne vais pas te faire un cours sur l'Ajax, mais il faut se l'imaginer comme un programme qui ouvre d'autres liens pendant ta navigation sans que tu ne puisses le voir.
Il faudra donc en cas de clique : On appel une page php toute simple qui lorsqu'on l'appelle modifie la bdd et donc ajoute un like/dislike de la personne qui a appuyé.
Voici un exemple d'appel d'une page en Ajax :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $.ajax({
        url: "http://tonurl.fr/",
        success: function(retour) {
            alert(retour); //La variable retour correspond à la réponse récupérée par la page. Tu n'es pas obligé de l'utiliser si tu ne souhaites pas obtenir de réponse, mais c'est toujours mieux de la garder.
        }
    });
</script>

D'accord merci pour ces informations ! Par contre ça veut dire que le code que j'ai mis au dessus est faux ?

$("#formulaire").submit(function(event) {
  event.preventDefault();  // Empêcher le rechargement de la page.
 
  var formData = new FormData($("#formulaire"));
 
  $.ajax({
    type: "POST",
    url: "fichier.php",
    data: formData
  });
});

Il me paraissait bien pourtant, non ?