Introduzione
Le reazioni sono più espressive rispetto ai semplici pulsanti Mi piace e Non mi piace. Usando le reazioni l’utente può facilmente esprimere il proprio pensiero perché le emoticon sono fondamentalmente un modo per mostrare le emozioni. D’altra parte, se utilizziamo i pulsanti Mi piace e Non mi piace, l’utente non può mostrare l’emozione esatta. Utilizzando le emoticon possiamo rendere il nostro sito più espressivo per l’utente.
Obiettivi del blog
In questo blog troverai un modo semplice e veloce per implementare la funzionalità Reazioni. Dopo aver esaminato il blog, sarai in grado di creare un sistema di reazione per il tuo sito Web come il pulsante Mi piace di Facebook.
lavoro
Ci sarà un pulsante Mi piace e il resto dei pulsanti Reazione. A fuoco il pulsante Mi piace, verranno visualizzati i pulsanti Reazione. JQuery verrà utilizzato per gestire i tocchi sui pulsanti di reazione. Toccando il pulsante di reazione, viene inviata una richiesta Ajax sulla pagina like.php. La logica di salvataggio/aggiornamento dei dati su database può essere scritta nella pagina del gestore. Toccando di nuovo il testo della reazione, la reazione viene annullata e questa volta inviamo Ajax sulla pagina undo_like.php. Tutte le funzionalità per mostrare/nascondere i pulsanti di reazione e l’animazione vengono aggiunte tramite JavaScript e CSS.
Creazione della struttura HTML
Prima di lavorare sulla logica, dovremo creare il layout. HTML per il layout sta seguendo –
Reazioni di Facebook Reazioni di Facebook Piace Knowband e altri 4.3.0
Aggiunta di stile
Stiamo usando due file CSS (style.css e response.css) per aggiungere uno stile alla pagina.
Nota:� Puoi trovare i file CSS nella build completa del progetto.
Aggiunta di funzionalità
Una volta che il nostro layout è pronto, possiamo lavorare sulle funzionalità. Per prima cosa gestiremo i tocchi sui pulsanti Mi piace e Reazione. Per questo, useremo jQuery e aggiungeremo gli eventi click. Il codice per aggiungere gli eventi click è riportato di seguito –
// Aggiunta dell'evento click non appena il documento è pronto $(document).ready(function() { // Aggiunta dell'evento click sul pulsante di reazione usando il nome della classe $(".emoji").on("click ", function() { // like click // Qui scriveremo il codice, che verrà eseguito toccando il pulsante di reazione }); });
Al centro del pulsante di reazione, invieremo la richiesta Ajax sulla pagina php. La richiesta dell’Ajax è riportata di seguito –
// Invio di una richiesta Ajax nella pagina del gestore (like.php) per eseguire le operazioni del database $.ajax({ type: "POST", url: "php/like.php", data: "", success: function (response) { // Questo codice viene eseguito dopo che Ajax ha avuto successo } })
Quindi dovremo creare una pagina del gestore. Questo può essere un semplice file php.
Nota: L’utente può eseguire modifiche al database nel file del gestore in base alle esigenze. Tutto ciò che viene restituito/stampato in quel file viene restituito alla richiesta Ajax e possiamo aggiornare il layout di conseguenza. Qui abbiamo aggiunto il codice per aggiornare il layout per mostrare la reazione attualmente salvata. Il codice completo del file response.js è il seguente:
$(document).ready(function() { $(".emoji").on("click", function() { // Qui otteniamo la reazione che viene sfruttata usando l'attributo data-reaction definito in main page var data_reaction = $(this).attr("data-reaction"); // Invio di una richiesta Ajax nella pagina del gestore per eseguire le operazioni del database $.ajax({ type: "POST", url: "php/like.php ", data: "data_reaction=" + data_reaction, success: function (response) { // Questo codice verrà eseguito dopo che Ajax avrà esito positivo $(".like-details").html("Tu, Knowband e altri 10k") ; $(".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 == "Mi piace") $(".like-emo").html(' '); altrimenti $(".like-emo").html(' '); } }) }); $(".reaction-btn-text").on("click", function() { // annulla come fare clic se ($(this).hasClass("active")) { // Invio di una richiesta Ajax nella pagina del gestore per eseguire le operazioni del database $.ajax({ type: "POST", url: "php/undo_like.php", data: "", success: function (response) { // Gestisce quando l'Ajax ha successo $(". reazione-btn-text").text("Mi piace").removeClass().addClass('reaction-btn-text'); $(".reaction-btn-emo").removeClass().addClass('reaction -btn-emo').addClass("like-btn-default"); $(".like-emo").html(' '); $(".like-details").html("Knowband e altri 1k"); } }) } }) });
sommario
Puoi scaricare il progetto completo dalla seguente posizione:
Clicca qui per scaricare il progetto completo
In questo tutorial non abbiamo trattato la connessione al database e le operazioni in quanto la logica del database può essere diversa in base alle tue esigenze. Con l’aiuto di questo progetto, puoi facilmente implementare la funzionalità di reazione come Facebook nella tua pagina web.