Introduction
Les réactions sont plus expressives par rapport aux simples boutons “J’aime” et “Je n’aime pas”. En utilisant des réactions, l’utilisateur peut facilement exprimer sa pensée car les émoticônes sont essentiellement un moyen de montrer les émotions. D’autre part, si nous utilisons le bouton J’aime et N’aime pas, l’utilisateur ne peut pas montrer l’émotion exacte. En utilisant des émoticônes, nous pouvons rendre notre site plus expressif pour l’utilisateur.
Objectifs du blog
Dans ce blog, vous trouverez un moyen simple et rapide d’implémenter la fonctionnalité Réactions. Après avoir parcouru le blog, vous pourrez créer un système de réaction pour votre site Web identique au bouton J’aime de Facebook.
De travail
Il y aura un bouton J’aime et le reste des boutons de réaction. En mettant l’accent sur le bouton J’aime, les boutons de réaction seront affichés. JQuery sera utilisé pour gérer les taps sur les boutons de réaction. En appuyant sur le bouton de réaction, une requête Ajax est envoyée sur la page like.php. La logique pour enregistrer/mettre à jour les données sur la base de données peut être écrite sur la page du gestionnaire. En appuyant à nouveau sur le texte de réaction, la réaction est annulée et cette fois nous envoyons Ajax sur la page undo_like.php. Toutes les fonctionnalités pour afficher/masquer les boutons de réaction et l’animation sont ajoutées via JavaScript et CSS.
Création de la structure HTML
Avant de travailler sur la logique, nous devrons créer la mise en page. HTML pour la mise en page suit –
Réactions Facebook Réactions Facebook Comme Knowband et 4.3.0k autres
Ajouter du style
Nous utilisons deux fichiers CSS (style.css et reaction.css) pour ajouter du style dans la page.
Remarque: Vous pouvez trouver les fichiers CSS dans la version complète du projet.
Ajouter des fonctionnalités
Une fois notre mise en page prête, nous pouvons travailler sur les fonctionnalités. Nous allons d’abord gérer les robinets sur les boutons J’aime et Réaction. Pour cela, nous utiliserons jQuery et nous ajouterons les événements de clic. Le code pour ajouter les événements de clic est donné ci-dessous –
// Ajout de l'événement click dès que le document est prêt $(document).ready(function () { // Ajout de l'événement click sur le bouton de réaction en utilisant le nom de classe $(".emoji").on("click ", function () { // like click // Ici, nous allons écrire le code, qui s'exécutera en appuyant sur le bouton de réaction }); });
Au focus du bouton de réaction, nous enverrons la requête Ajax sur la page php. La requête Ajax est donnée ci-dessous –
// Envoi de la requête Ajax dans la page du gestionnaire (like.php) pour effectuer les opérations de la base de données $.ajax({ type : "POST", url : "php/like.php", data : "", success : function (response) { // Ce code s'exécute après le succès de l'Ajax } })
Ensuite, nous devrons créer une page de gestionnaire. Cela peut être un simple fichier php.
Remarque: L’utilisateur peut effectuer des modifications de la base de données dans le fichier du gestionnaire en fonction des besoins. Tout ce qui est renvoyé/imprimé dans ce fichier est renvoyé à la requête Ajax et nous pouvons mettre à jour la mise en page en conséquence. Ici, nous avons ajouté le code pour mettre à jour la mise en page afin d’afficher la réaction actuellement enregistrée. Le code complet du fichier reaction.js suit –
$(document).ready(function () { $(".emoji").on("click", function () { // Ici, nous obtenons la réaction qui est exploitée en utilisant l'attribut data-reaction défini dans main page var data_reaction = $(this).attr("data-reaction"); // Envoi d'une requête Ajax dans la page du gestionnaire pour effectuer les opérations de base de données $.ajax({ type : "POST", url : "php/like.php ", data : "data_reaction=" + data_reaction, success : function (response) { // Ce code s'exécutera après le succès de l'Ajax $(".like-details").html("You, Knowband and 10k other") ; $(".reaction-btn-emo").removeClass().addClass('reaction-btn-emo').addClass('like-btn-' + data_reaction.toLowerCase()); $(".reaction- btn-text").text(data_reaction).removeClass().addClass('reaction-btn-text').addClass('reaction-btn-text-' + data_reaction.toLowerCase()).addClass("active") ; if (data_reaction == "J'aime") $(".like-emo").html(' '); sinon $(".like-emo").html(' '); } }) }); $(".reaction-btn-text").on("click", function () { // annuler comme click if ($(this).hasClass("active")) { // Envoi de la requête Ajax dans la page du gestionnaire pour effectuer les opérations de base de données $.ajax({ type : "POST", url : "php/undo_like.php", data : "", success : function (response) { // Gérer lorsque l'Ajax réussit $(". réaction-btn-text").text("Comme").removeClass().addClass('réaction-btn-text'); $(".reaction-btn-emo").removeClass().addClass('réaction -btn-emo').addClass("like-btn-default"); $(".like-emo").html(' '); $(".like-details").html("Knowband et 1k autres"); } }) } }) });
Récapitulatif
Vous pouvez télécharger le projet complet à partir de l’emplacement suivant –
Cliquez ici pour télécharger le projet complet
Dans ce didacticiel, nous n’avons pas couvert la connexion et les opérations de la base de données car la logique de la base de données peut être différente selon vos besoins. Avec l’aide de ce projet, vous pouvez facilement implémenter la même fonctionnalité de réactions que Facebook dans votre page Web.
