Implementazione delle funzionalità di reazione Come Facebook utilizzando PHP, jQuery e HTML

Introduzione

Le reazioni sono più espressive rispetto ai pulsanti semplici come 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 usiamo il pulsante 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 facile e veloce per implementare la funzionalità di Reazioni. Dopo aver visitato il blog, sarai in grado di creare un sistema di reazione per il tuo sito web come il pulsante Mi piace di Facebook.

Facebook Emoji e Mi piace

lavoro

Ci sarà un pulsante Mi piace e il resto dei pulsanti Reazione. A fuoco il pulsante Mi piace, i pulsanti Reazione verranno visualizzati. JQuery verrà utilizzato per gestire i tocchi sui pulsanti di reazione. Premendo il pulsante di reazione, una richiesta Ajax viene inviata sulla pagina like.php. La logica per salvare / aggiornare i dati sul database può essere scritta sulla pagina del gestore. Toccando nuovamente il testo di reazione, la reazione è 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 –

<! DOCTYPE html> <html> <head> <title> Facebook Reactions </ title> <meta name = "description" content = "Facebook Like Reaction System" /> <! - bootstrap css -> <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel = "stylesheet" type = "text / css" href = " css / style.css "/> <! - Css per sistema di reazione -> <link rel =" stylesheet "type =" text / css "href =" css / reaction.css "/> <script type =" text / javascript "src =" js / jquery.min.js "> </ script> <! - jQuery per il sistema Reaction -> <script type =" text / javascript "src =" js / reaction.js "> < / script> </ head> <body> <div class = "container"> <div class = "header"> <h1> Facebook Reactions </ h1> </ div> <div class = "main"> <! - - Avvio sistema di reazione -> <div class = "contenitore-reazione"> <! - contenitore div per sistema di reazione -> <span class = "reaction-btn"> <! - Pulsante predefinito come -> < span class = "reazione-btn-emo come-btn-default"> </ span> <! - Predefinito come pulsante emozione -> <span class = "reazione-btn-testo"> Come </ span> <! - Testo predefinito come pulsante, (Like, wow, sad ..) default: Like -> <ul class = "emojies-box"> <! - Contenitore pulsanti di reazione -> <li class = "emoji emo-like" data-reaction = "Mi piace"> </ li> <li class = "emoji emo-love" data-reaction = "Amore"> </ 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 =" Arrabbiato "> </ li> </ ul> </ span> <div class =" come-stat "> <! - Come contenitore statistico -> <span class = "like-emo"> <! - come contenitore delle emozioni -> <span class = "like-btn-like"> </ span> <! - date emozioni come, wow, sad (default: Like) -> </ span> <span class = "like-details"> Knowband e 10k altri </ span> </ div> </ div> <! - Fine del sistema di reazione - > </ div> </ div> </ body> </ html>

Aggiungere stile

Stiamo usando due file CSS (style.css e reaction.css) per aggiungere uno stile alla pagina.

Nota: Puoi trovare i file CSS nella compilazione del progetto completo.

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});});

A fuoco del pulsante di reazione, invieremo la richiesta Ajax sulla pagina php. La richiesta Ajax è riportata di seguito –

// Invio della richiesta Ajax nella pagina del gestore (come.php) per eseguire le operazioni del database $ .ajax ({tipo: "POST", url: "php / like.php", dati: "", successo: funzione (risposta) {// Questo codice viene eseguito dopo che l'Ajax ha avuto successo}})

Quindi dovremo creare una pagina di gestione. Questo può essere un semplice file php.

Nota: L'utente può eseguire modifiche al database nel file del gestore in base ai requisiti. 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 seguente codice completo del file reaction.js è il seguente:

$ (document) .ready (function () {$ (". emoji"). on ("click", function () {// Qui stiamo ottenendo la reazione che viene sfruttata usando l'attributo data-reaction definito in main page var data_reaction = $ (this) .attr ("data-reaction"); // Invio della richiesta Ajax nella pagina del gestore per eseguire le operazioni del database $ .ajax ({tipo: "POST", url: "php / like.php ", data:" data_reaction = "+ data_reaction, success: function (response) {// Questo codice verrà eseguito dopo che l'Ajax ha avuto esito positivo $ (". like-details "). html (" You, Knowband e 10k altri ") ; $ (". 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 (" attivo ") ; if (data_reaction == "Mi piace") $ (". like-emo"). html ('<span class = "like-btn-like"> </ span>'); altrimenti $ (". like-emo ") .html ('<span class =" like-btn-like "> </ span> <span class =" like-btn-' + dati _reaction.toLowerCase () + '"> </ span>'); }})}); $ (". reaction-btn-text"). on ("click", function () {// annulla like click if ($ (this) .hasClass ("active")) {// Invio della richiesta Ajax nella pagina del gestore per eseguire le operazioni del database $ .ajax ({tipo: "POST", url: "php / undo_like.php", dati: "", success: function (response) {// Gestisce quando l'Ajax ha esito positivo $ (". reaction-btn-text "). text (" Like "). removeClass (). addClass ('reaction-btn-text'); $ (". reaction-btn-emo "). removeClass (). addClass ('reazione -btn-emo '). AddClass ("like-btn-default"); $ (". like-emo"). html (' <span class = "like-btn-like"> </ span> '); $ (". like-details"). html ("Knowband e 1k altri");}})}})});

sommario

Puoi scaricare il progetto completo dal seguente percorso –

Clicca qui per scaricare il progetto completo

In questo tutorial non abbiamo coperto la connessione al database e le operazioni in quanto la logica del database può essere diversa a seconda delle esigenze. Con l'aiuto di questo progetto, puoi facilmente implementare la funzionalità di reazioni come Facebook nella tua pagina 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 *