Reaktionen implementieren Wie Facebook mit PHP, jQuery und HTML

Einführung

Reaktionen sind ausdrucksstärker als die einfachen Schaltflächen "Gefällt mir" und "Abneigung". Mit Hilfe von Reaktionen kann der Benutzer seine Gedanken leicht ausdrücken, da Emoticons im Wesentlichen eine Möglichkeit darstellen, die Emotionen zu zeigen. Auf der anderen Seite, wenn wir die Like- und die Disable-Taste verwenden, kann der Benutzer die exakte Emotion nicht zeigen. Mithilfe von Emoticons können wir unsere Website für den Benutzer ausdrucksvoller machen.

Ziele des Blogs

In diesem Blog finden Sie eine einfache und schnelle Möglichkeit, die Reactions-Funktionalität zu implementieren. Nachdem Sie den Blog durchgesehen haben, können Sie ein Reaktionssystem für Ihre Website erstellen, das dem Like-Button von Facebook entspricht.

Facebook Emoji und mag

Arbeiten

Es gibt einen Like-Button und den Rest der Reaktions-Buttons. Nach dem Fokussieren der Schaltfläche "Gefällt mir" werden die Reaktionstasten angezeigt. JQuery wird für das Tippen auf die Reaktionstasten verwendet. Wenn Sie auf die Reaktionsschaltfläche tippen, wird eine Ajax-Anfrage auf der like.php-Seite gesendet. Die Logik zum Speichern / Aktualisieren von Daten in der Datenbank kann auf der Handler-Seite geschrieben werden. Wenn Sie erneut auf den Reaktionstext tippen, wird die Reaktion rückgängig gemacht. Diesmal senden wir Ajax auf der Seite undo_like.php. Alle Funktionen zum Anzeigen / Ausblenden der Reaktionsschaltflächen und der Animation werden über JavaScript und CSS hinzugefügt.

Erstellen der HTML-Struktur

Bevor wir an der Logik arbeiten, müssen wir das Layout erstellen. HTML für das Layout folgt –

<! DOCTYPE html> <html> <head> <title> Facebook-Reaktionen </ title> <meta name = "description" content = "Facebook gefällt das Reaktionssystem" /> <! - 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 für Reaktionssystem -> <link rel =" stylesheet "type =" text / css "href =" css / reaktion.css "/> <script type =" text / javascript "src =" js / jquery.min.js "> </ script> <! - jQuery for Reaction system -> <script type =" text / javascript "src =" js / response.js "> < / script> </ head> <body> <div class = "container"> <div class = "header"> <h1> Facebook-Reaktionen </ h1> </ div> <div class = "main"> <! - - Start des Reaktionssystems -> <div class = "reaktionscontainer"> <! - container div für reaktionssystem -> <span class = "reaktions-btn"> <! - Standard wie Schaltfläche -> < span class = "reaktion-btn-emo wie-btn-default"> </ span> <! - Standard wie Schaltfläche Emotion -> <span class = "Reaktion-btn-text"> Wie </ span> <! - Standard wie Schaltflächentext (wie wow, sad ..) Standard: Wie -> <ul class = "emojies-box"> <! - Reaktionsknöpfe container -> <li class = "emoji emo-like" data-response = "Gefällt mir"> </ li> <li class = "emoji emo-love" data-response = "Liebe"> </ li> <li class = "emoji emo-haha" data-response = "HaHa"> </ li> <li class = "emoji emo-wow" data-response = "wow"> </ li> <li class = "emoji emo-sad" data-response = "Traurig "> </ li> <li class =" emoji emo-wütend "data-response =" wütend "> </ li> </ ul> </ span> <div class =" like-stat "> <! - Wie statistische Container -> <span class = "like-emo"> <! - like emotions container -> <span class = "like-btn-like"> </ span> <! - gegebene Emotionen wie, wow, traurig (Standardeinstellung: Wie) -> </ span> <span class = "like-details"> Knowband und 10k andere </ span> </ div> </ div> <! - Ende des Reaktionssystems - > </ div> </ div> </ body> </ html>

Stil hinzufügen

Wir verwenden zwei CSS-Dateien (style.css und response.css), um der Seite ein Styling hinzuzufügen.

Hinweis: Sie finden die CSS-Dateien im vollständigen Projektaufbau.

Funktionalität hinzufügen

Sobald unser Layout fertig ist, können wir an den Funktionalitäten arbeiten. Zuerst behandeln wir die Abgriffe der Schaltflächen "Gefällt mir" und "Reaktion". Dafür verwenden wir jQuery und fügen die Klickereignisse hinzu. Der Code zum Hinzufügen der Klickereignisse ist unten angegeben.

// Hinzufügen des Klickereignisses, sobald das Dokument fertig ist $ (document) .ready (function () {// Hinzufügen des Klickereignisses zur Reaktionsschaltfläche mithilfe des Klassennamens $ (". Emoji"). Ein ("Klicken Sie auf.) ", function () {// like click // Hier schreiben wir den Code, der beim Antippen der Reaktionsschaltfläche ausgeführt wird});});

Im Fokus der Reaktionstaste senden wir die Ajax-Anfrage auf der PHP-Seite. Die Ajax-Anfrage ist unten angegeben –

// Senden einer Ajax-Anforderung auf der Handler-Seite (like.php) zum Ausführen der Datenbankoperationen $ .ajax ({Typ: "POST", URL: "php / like.php"), data: "", success: function (response) {// Dieser Code wird ausgeführt, nachdem der Ajax erfolgreich war}})

Dann müssen wir eine Handler-Seite erstellen. Dies kann eine einfache PHP-Datei sein.

Hinweis: Der Benutzer kann je nach Anforderung Datenbankänderungen in der Handlerdatei vornehmen. Was auch immer in dieser Datei zurückgegeben / gedruckt wird, wird an die Ajax-Anforderung zurückgegeben, und wir können das Layout entsprechend aktualisieren. Hier haben wir den Code hinzugefügt, um das Layout zu aktualisieren und die aktuell gespeicherte Reaktion anzuzeigen. Der vollständige Code der response.js-Datei folgt:

$ (document) .ready (function () {$ (". emoji"). on ("click", function () {// Hier erhalten wir die Reaktion, die mithilfe des in main definierten Datenreaktionsattributs abgegriffen wird page var data_reaction = $ (this) .attr ("data-response"); // Ajax-Anforderung auf der Handler-Seite senden, um die Datenbankoperationen $ .ajax ({type: "POST", url: "php / like.php) auszuführen ", data:" data_reaction = "+ data_reaction, success: Funktion (Antwort) {// Dieser Code wird ausgeführt, nachdem der Ajax $ (". like-details ") erfolgreich war. html (" You, Knowband und 10k andere ") ; $ (". response-btn-emo"). removeClass (). addClass ('response-btn-emo'). addClass ('like-btn-' + + data_reaction.toLowerCase ()); $ (". btn-text "). text (data_reaction) .removeClass (). addClass ('response-btn-text'). addClass ('response-btn-text-' + data_reaction.toLowerCase ()). addClass (" active ") ; if (data_reaction == "Like") $ (". like-emo"). html ('<span class = "like-btn-like"> </ span>'); ansonsten $ (". like-emo.) ") .html ('<span class =" like-btn-like "> </ span> <span class =" like-btn-' + Daten _reaction.toLowerCase () + '"> </ span>'); }})}); $ (". response-btn-text"). on ("click", function () {// rückgängig machen wie click if ($ (this) .hasClass ("active")) {// Ajax-Anfrage auf der Handler-Seite senden Ausführen der Datenbankoperationen $ .ajax ({Typ: "POST", URL: "php / undo_like.php", Daten: "", Erfolg: Funktion (Antwort) {// Handle, wenn Ajax erfolgreich ist $ ("). reaktion-btn-text "). text (" Like "). removeClass (). addClass ('reaktion-btn-text'); $ (". reaktion-btn-emo "). removeClass (). addClass ('response) -btn-emo '). addClass ("like-btn-default"); $ (". like-emo"). html (' <span class = "like-btn-like"> </ span> '); $ (". like-details"). html ("Knowband und 1k andere");}})}})});

Zusammenfassung

Sie können das vollständige Projekt von folgendem Ort herunterladen:

Klicken Sie hier, um das gesamte Projekt herunterzuladen

In diesem Lernprogramm haben wir die Datenbankverbindung und -operationen nicht behandelt, da die Datenbanklogik je nach Ihren Anforderungen unterschiedlich sein kann. Mit Hilfe dieses Projekts können Sie die Reaktionsfunktionalität genauso wie Facebook auf Ihrer Webseite implementieren.


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 *