Einführung
Die Reaktionen sind im Vergleich zu den einfachen Like- und Dislike-Buttons ausdrucksstärker. Mithilfe von Reaktionen kann der Benutzer seine Gedanken leicht ausdrücken, da Emoticons im Grunde eine Möglichkeit sind, Emotionen zu zeigen. Auf der anderen Seite, wenn wir Like- und Dislike-Buttons verwenden, kann der Benutzer nicht die genaue Emotion zeigen. Mithilfe von Emoticons können wir unsere Website für den Benutzer ausdrucksstärker gestalten.
Ziele des Blogs
In diesem Blog finden Sie eine einfache und schnelle Möglichkeit, die Reaktionsfunktionalität zu implementieren. Nachdem Sie den Blog durchgegangen sind, können Sie ein Reaktionssystem für Ihre Website erstellen, das dem Like-Button von Facebook entspricht.
Arbeiten
Es wird einen Like-Button und den Rest der Reaktions-Buttons geben. Wenn der Like-Button fokussiert ist, werden die Reaktions-Buttons angezeigt. JQuery wird verwendet, um die Taps auf die Reaktionsschaltflächen zu handhaben. Beim Tippen auf die Reaktionsschaltfläche wird eine Ajax-Anforderung an die Seite like.php 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 und dieses Mal senden wir Ajax auf der Seite undo_like.php. Alle Funktionen zum Ein-/Ausblenden der Reaktionsschaltflächen und Animationen 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 –
Facebook-Reaktionen Facebook-Reaktionen Wie Knowband und 4.3.0 andere
Stil hinzufügen
Wir verwenden zwei CSS-Dateien (style.css und response.css), um Stile auf der Seite 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 Taps auf den Like- und Reaction-Buttons. Dafür verwenden wir jQuery und fügen die Click-Events hinzu. Der Code zum Hinzufügen der Klickereignisse ist unten angegeben –
// Hinzufügen des Klick-Ereignisses, sobald das Dokument fertig ist $(document).ready(function () { // Hinzufügen des Klick-Ereignisses auf Reaktionsschaltfläche unter Verwendung des Klassennamens $(.emoji").on("click ", function () { // like click // Hier schreiben wir den Code, der beim Antippen des Reaktionsbuttons ausgeführt wird }); });
Im Fokus der Reaktionsschaltfläche senden wir die Ajax-Anfrage auf der PHP-Seite. Die Ajax-Anfrage ist unten angegeben –
// Senden einer Ajax-Anfrage in der Handler-Seite (like.php), um die Datenbankoperationen auszuführen $.ajax({ type: "POST", url: "php/like.php", data: "", success: function (response) { // Dieser Code wird ausgeführt, nachdem Ajax erfolgreich war } })
Dann müssen wir eine Handler-Seite erstellen. Dies kann eine einfache PHP-Datei sein.
Hinweis: Der Benutzer kann Datenbankänderungen in der Handler-Datei gemäß den Anforderungen vornehmen. Was auch immer in dieser Datei zurückgegeben/gedruckt wird, wird an die Ajax-Anfrage zurückgegeben und wir können das Layout entsprechend aktualisieren. Hier haben wir den Code zum Aktualisieren des Layouts hinzugefügt, um die aktuell gespeicherte Reaktion anzuzeigen. Der vollständige Code der Datei “reaction.js” folgt –
$(document).ready(function () { $(.emoji).on("click", function () { // Hier erhalten wir die Reaktion, die mit dem in main definierten data-reaction-Attribut angetippt wird page var data_reaction = $(this).attr("data-reaction"); // Ajax-Request in Handler-Seite senden, um die Datenbankoperationen auszuführen $.ajax({ type: "POST", url: "php/like.php ", data: "data_reaction=" + data_reaction, success: function (response) { // Dieser Code wird ausgeführt, nachdem Ajax erfolgreich war $(".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 == "Gefällt mir") $(".like-emo").html(' '); sonst $(".like-emo").html(' '); } }) }); $(".reaction-btn-text").on("click", function () { // wie Klick rückgängig machen if ($(this).hasClass("active")) { // Ajax-Request in Handler-Seite senden um die Datenbankoperationen auszuführen $.ajax({ type: "POST", url: "php/undo_like.php", data: "", success: function (response) { // Handle wenn Ajax erfolgreich ist $(". reaktion-btn-text").text("Gefällt mir").removeClass().addClass('reaktion-btn-text'); $(".reaktion-btn-emo").removeClass().addClass('reaktion -btn-emo').addClass("like-btn-default"); $(".like-emo").html(' '); $(".like-details").html("Knowband und 1k andere"); } }) } }) });
Zusammenfassung
Sie können das vollständige Projekt von der folgenden Stelle herunterladen –
Klicken Sie hier, um das vollständige Projekt herunterzuladen
In diesem Tutorial 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 ganz einfach die Reaktionsfunktionalität wie bei Facebook in Ihre Webseite implementieren.