Fonctionnalité de mise en œuvre des réactions Comme Facebook avec PHP, jQuery et HTML

Introduction

Les réactions sont plus expressives par rapport aux boutons simples et similaires. 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 ne l'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é Reactions. 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.

Facebook Emoji et aime

De travail

Il y aura un bouton J'aime et le reste des boutons de réaction. Lors de la mise au point du 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 demande Ajax est envoyée sur la page like.php. La logique de sauvegarde / mise à jour des données sur la base de données peut être écrite sur la page du gestionnaire. Lorsque vous appuyez à nouveau sur le texte de la réaction, la réaction est annulée et cette fois-ci, nous envoyons Ajax sur la page undo_like.php. Toutes les fonctionnalités permettant d'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. Le code HTML pour la mise en page est le suivant –

<! DOCTYPE html> <html> <head> <title> Réactions Facebook </ title> <meta name = "description" content = "Un système de réaction similaire à Facebook" /> <! - bootstrap css -> <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <lien rel = "stylesheet" type = "text / css" href = " css / style.css "/> <! - Css du système de réaction -> <link rel =" stylesheet "type =" text / css "href =" css / reaction.css "/> <script type =" text / javascript "src =" js / jquery.min.js "> </ script> <! - jQuery pour le système de réaction -> <script type =" text / javascript "src =" js / reaction.js "> < / script> </ head> <body> <div class = "conteneur"> <div class = "header"> <h1> Réactions Facebook </ h1> </ div> <div class = "main"> <! - - Démarrage du système de réaction -> <div class = "reaction-container"> <! - conteneur div pour le système de réaction -> <span class = "reaction-btn"> <! - Bouton similaire à celui défini par défaut -> < span class = "reaction-btn-emo like-btn-default"> </ span> <! - Défaut de type émotion des boutons -> <span class = "reaction-btn-text"> J'aime </ span> <! - Valeur par défaut du texte du bouton, (Like, wow, sad ..) défaut: Like -> <ul class = "emojies-box"> <! - Conteneur de boutons de réaction -> <li class = "emoji emo-like" data-reaction = "J'aime"> </ li> <li class = "emoji emo-amour" data-reaction = "Amour"> </ li> <li class = "emoji emo-haha" data-reaction = "HaHa"> </ li> <li class = "emoji emo-wow" data-reaction = "Wow"> </ li> <li class = "emoji emo-sad" data-reaction = "Triste "> </ li> <li class =" emoji emo-angry "data-reaction =" Angry "> </ li> </ ul> </ span> <div class =" like-stat "> <! - Comme conteneur de statistiques -> <span class = "like-emo"> <! - comme conteneur d'émotions -> <span class = "like-btn-like"> </ span> <! - des émotions telles que, wow, sad (par défaut: Like) -> </ span> <span class = "like-details"> Knowband et 10k autres </ span> </ div> </ div> </ div> <! - Fin du système de réaction - > </ div> </ div> </ body> </ html>

Ajout de style

Nous utilisons deux fichiers CSS (style.css et reaction.css) pour ajouter un style à la page.

Remarque: Vous pouvez trouver les fichiers CSS dans la construction complète du projet.

Ajout de fonctionnalités

Une fois notre maquette prête, nous pouvons travailler sur les fonctionnalités. Nous allons d’abord manipuler les robinets des boutons Like et Reaction. 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 () {// comme click // Nous allons écrire ici le code, qui fonctionnera en appuyant sur le bouton de réaction});});

Sur le focus du bouton de réaction, nous enverrons la requête Ajax sur la page php. La demande Ajax est donnée ci-dessous –

// Envoi de la requête Ajax dans la page du gestionnaire (like.php) pour exécuter les opérations sur la base de données $ .ajax ({type: "POST", url: "php / like.php", données: "", succès: fonction (réponse) {// Ce code est exécuté une fois que Ajax a réussi}})

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 de gestionnaire en fonction des besoins. Tout ce qui est retourné / imprimé dans ce fichier est retourné à la demande 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 () {// Nous obtenons ici 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 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 / like.php ", data:" data_reaction = "+ data_reaction, success: function (response) {// Ce code sera exécuté une fois que Ajax aura réussi $ (". like-details "). html (" You, Knowband et 10k autres ") ; $ (". 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 ('réaction-btn-text-' + data_reaction.toLowerCase ()). addClass (" active "). ; if (data_reaction == "Like") $ (". like-emo"). html ('<span class = "like-btn-like"> </ span>'); else $ (". like-emo ") .html ('<span class =" like-btn-like "> </ span> <span class =" like-btn-' + data _reaction.toLowerCase () + '"> </ span>'); }})}); $ (". reaction-btn-text"). sur ("click", function () {// annuler comme cliquer si ($ (this) .hasClass ("active")) {// Envoi de la requête Ajax dans la page du gestionnaire effectuer les opérations sur la base de données $ .ajax ({type: "POST", url: "php / undo_like.php", data: "", succès: function (réponse) {// Traitement lorsque Ajax réussit $ (". reaction-btn-text "). text (" Like "). removeClass (). addClass ('reaction-btn-text'); $ (". reaction-btn-emo "). removeClass (). addClass ('réaction -btn-emo '). addClass ("like-btn-default"); $ (". like-emo"). html (' <span class = "like-btn-like"> </ span> '); $ (". like-details"). html ("Knowband et 1k autres");}})}})});

Résumé

Vous pouvez télécharger le projet complet à l’emplacement suivant:

Cliquez ici pour télécharger le projet complet

Dans ce didacticiel, nous n’avons pas traité de la connexion et des opérations à 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 fonctionnalité de réaction identique à celle de Facebook dans votre page Web.


Shivika Tomar

Shivika Tomar

Shivika Tomar is a passionate PHP developer. Her area of interest is website development. She loves to bring healing to stressful and sad peoples.

Leave a Reply

Your email address will not be published. Required fields are marked *