Share
In diesem Lernprogramm erfahren Sie, wie Sie ein Bewertungssystem mit AJAX, PHP und jQuery erstellen. Abstimmungen werden in Echtzeit mit dem Zauber von AJAX aufgezeichnet und aktualisiert, und wir werden auch die Möglichkeiten von PHP nutzen, so dass Sie nicht einmal eine Datenbank benötigen!
Wir erstellen eine einfache Seite, auf der zwei Filme aufgelistet sind und die Sie bewerten können. Dies bedeutet, dass wir die Sterne benötigen, um die aktuelle Bewertung anzuzeigen und Abstimmungen zuzulassen. Wir möchten auch, dass ein Bereich die Gesamtzahl der abgegebenen Stimmen und die aktuelle Bewertung bis auf eine Dezimalstelle anzeigt.
Lassen Sie uns einen Blick auf HTML / CSS werfen
Rate: Jäger der Verlorenen ArcheAbstimmungsdatenRate: Die Jagd nach dem roten OktoberAbstimmungsdaten
Beachten Sie, dass sich in diesem HTML-Code keine Grafiken befinden. Sie werden mit CSS hinzugefügt. Wir verwenden nur den HTML-Code, um das Framework zu erstellen, aus dem das Widget funktioniert. Nun ist es an der Zeit, CSS hinzuzufügen.
Accentsconagua
.rate_widget border: 1px fest #CCC; Überlauf: sichtbar; Polsterung: 10px; Position: relativ; Breite: 180px; Höhe: 32px; .ratings_stars background: url ('star_empty.png') keine Wiederholung; Schwimmer: links; Höhe: 28px; Polsterung: 2px; Breite: 32px; .ratings_vote background: url ('star_full.png') keine Wiederholung; .ratings_over background: url ('star_highlight.png') keine Wiederholung; Dieser erste Teil des CSS führt einige Dinge aus:
Sie können entweder die im Download bereitgestellten Grafiken verwenden oder eigene Grafiken erstellen. Für jeden der drei Zustände muss eine Grafik vorhanden sein: leer, voll und hervorgehoben.
Als Nächstes fügen wir ein wenig mehr CSS hinzu, um das Feld für die Gesamtstimmen zu positionieren und die Widgets so zu zentrieren, dass die Seite der Grafik am Anfang dieses Abschnitts entspricht.
.total_votes background: #eaeaea; oben: 58px; links: 0; Polsterung: 5px; Position: absolut; .movie_choice font: 10px verdana, serifenlos; Marge: 0 auto 40px auto; Breite: 180px;
Zu diesem Zeitpunkt haben wir ein sehr schlichtes Bündel leerer Sterne, aber das ist nicht der Fall tun eine ganze Menge an diesem Punkt. Hier kommt jQuery zur Rettung.
Unser erster Schritt ist das Hinzufügen von Mouseover- und Mouseout-Handlern für die Sterne. Wir müssen den Stern, über dem sich die Maus befindet, und alle vorhergehenden Sterne hervorheben.
$ ('. ratings_stars'). hover (// Behandelt die Mouseover-Funktion () $ (this) .prevAll (). undSelf (). addClass ('ratings_over'); $ (this) .nextAll (). removeClass ( 'ratings_vote');, // Behandelt die Mouseout-Funktion () $ (this) .prevAll (). andSelf (). removeClass ('ratings_over'); set_votes ($ (this) .parent ());) ; Wir nutzen die leistungsstarken Methoden .prevAll () und .nextAll () von jQuery, um die Sterne vor und nach dem aktuell überfahrenen Stern zu bekommen.
Der obige Code fügt dann die Klassen hinzu und entfernt sie, um die Sterne unter der Maus und vor "hervorgehoben" und die Sterne nach "nicht hervorgehoben" zu erstellen..
Dies ist eine Funktion, die prüft, welche Sterne sich im Zustand "voll" befinden sollten, und eng mit dem nächsten Schritt verknüpft, bei dem Remote-Daten vom Server abgerufen werden.
Unsere Sterne werden hervorgehoben, wenn Sie mit der Maus darüber fahren. Das ist ein toller Start. Aber was ist mit den roten Sternen, die die aktuelle Abstimmung zeigen? Um diesen Schritt zu erreichen, müssen wir sowohl die Informationen vom Server abrufen als auch JavaScript schreiben, um diese Daten verarbeiten zu können.
$ ('. rate_widget'). each (Funktion (i) var widget = this; var out_data = widget_id: $ (widget) .attr ('id'), holen: 1; $ .post ('ratings.) php ', out_data, function (INFO) $ (widget) .data (' fsr ', INFO); set_votes (widget);,' json ');); Dieser Codeblock - eigentlich alles JavaScript - wird in einem document.ready-Block gespeichert. Dieser spezielle Code wird sofort ausgeführt. Es fragt den Server ab und erhält einige Informationen zu jedem Abstimmungs-Widget auf der Seite.
Zuerst richten wir ein Objekt, out_data, ein, das die Informationen enthält, die wir an den Server senden. Unser PHP-Skript erwartet beim Abrufen von Daten "Abrufen". Daher fügen wir es hier ein. Wir geben auch die ID des Widgets an, damit das serverseitige Skript wissen kann, nach welchen Daten gesucht wird. Wenn die Rückruffunktion ausgelöst wird, enthält sie ein JavaScript-Objekt, das folgendermaßen aussieht:
"widget_id": "r1", "number_votes": 129, "total_points": 344, "dec_avg": 2.7, "whole_avg": 3
Die .data () -Methode ist ein bisschen von jQuery Magic, mit dem Sie beliebige Daten mit einem DOM verknüpfen können
Objekt.
Wenn Sie sich den Code genau ansehen, sehen Sie, dass wir dieses Objekt (in der Variablen INFO gespeichert) und nehmen
etwas mit der .data () -Methode machen.
Die .data () -Methode ist ein bisschen von jQuery Magic, mit dem Sie beliebige Daten mit einem DOM verknüpfen können
Objekt. In diesem Fall speichern wir die Daten im Widget div. Es kann später wie folgt zugegriffen werden:
$ ('# one_of_your_widgets) .data (' fsr '). widget_id; Nachdem die Daten vom Server zurückgegeben wurden, wurden sie indirekt an set_votes () übergeben..
function set_votes (widget) var avg = $ (widget) .data ('fsr'). whole_avg; var votes = $ (widget) .data ('fsr'). number_votes; var exact = $ (widget) .data ('fsr'). dec_avg; $ (widget) .find ('. star_' + avg) .prevAll (). undSelf (). addClass ('ratings_vote'); $ (widget) .find ('. star_' + avg) .nextAll (). removeClass ('ratings_vote'); $ (widget) .find ('. total_votes'). text (erfasste Stimmen + 'Stimmen (' + genau + 'Bewertung)'); Die ersten drei Zeilen dienen der Lesbarkeit, da diese Variablennamen ziemlich lang sind. Schauen wir uns also an, was hier passiert.
Zeile 7: 'avg' ist eine ganze Zahl, die den gerundeten Abstimmungsdurchschnitt dieses Widgets darstellt. Weil es
Eine Zahl von 1 bis 5 können wir verwenden, um den richtigen Stern im Widget zu finden und ihn zu drehen
Vorherige zu unserer "gefüllten" Grafik. Beachten Sie die Verwendung von .andSelf (), um den Stern mit aufzunehmen
Wir haben ausgewählt.
Zeile 8: Dies ist der siebten Zeile ziemlich ähnlich, aber wir entfernen die gefüllte Grafik von späteren Sternen. Diese
ist erforderlich, wenn der Durchschnitt für dieses Widget seit der letzten Abstimmung gesunken ist.
Zeile 9: Hier aktualisieren wir die graue Box unter dem Widget, die eine genauere Bewertung anzeigt,
und lässt einen Besucher wissen, wie viele Stimmen abgegeben wurden.
Der letzte Schritt für die Benutzeroberfläche besteht darin, die Abstimmung zu ermöglichen. Wir werden jedem Stern einen Klick-Handler hinzufügen. Dieser Click-Handler ist für das Senden der Abstimmungsdaten an den Server verantwortlich.
Hier ist der Click-Handler:
$ ('. ratings_stars'). bind ('click', function () var star = this; var-Widget = $ (this) .parent (); var; clicked_data = clicked_on: $ (star) .attr ('class) '), widget_id: widget.attr (' id '); $ .post (' ratings.php ', clicked_data, Funktion (INFO) widget.data (' fsr ', INFO); set_votes (widget);, 'json');); In diesem Codeblock erstellen wir zunächst einige Variablen, die nicht nur der Übersichtlichkeit halber, sondern in diesem Fall so sind, dass sie innerhalb des .post-Callbacks verwendet werden können. Denken Sie daran, dass der Click-Handler den Sternen zugewiesen ist. Daher benötigen wir auch die zweite Variable, das Widget, um das Objekt mit den Daten zu erhalten.
Zuerst richten wir unsere ausgehenden Daten ein, die wir in das Objekt clicked_data einfügen. Wir schnappen uns die Klasse, die einen Klassennamen im Format von Stern_ # enthält, der uns sagt, welche Stimme abgegeben wird, und bereiten uns darauf vor, diese zusammen mit der ID des Widgets an den Server zu senden.
Die Widget-ID ist der Eckpfeiler, auf den sich dieses Abstimmungssystem stützt. Es ermöglicht uns, unsere gespeicherten Daten abzurufen und dem Besucher auf einfache Weise anzuzeigen.
Schließlich senden wir diese Informationen online an den Server. Der Server addiert die Stimmen zu den aktuellen Summen und sendet Informationen mit den aktualisierten Daten an den Browser. Die vom Widget angezeigten Werte werden dann mit set_votes () aktualisiert..
Nachdem die Benutzeroberfläche fertig ist, müssen wir ein serverseitiges Skript erstellen, um Abstimmungsdaten zu speichern und abzurufen.
Wir werden in PHP eine sehr einfache Klasse namens "Ratings" erstellen und diese verwenden, um Serveranforderungen für unser Bewertungssystem abzuwickeln. Es gibt nur zwei Methoden plus den Aufruf. Die Verwendung unserer Klasse wird so aussehen:
# Neues Objekt $ rating = neue Bewertungen ($ _ POST ['widget_id']); # entweder Bewertungen abgeben oder ein Abstimmungsverfahren verarbeiten ($ _ POST ['fetch'])? $ rating-> get_ratings (): $ rating-> vote ();
Wenn Sie zu Abschnitt 4 zurückkehren, werden Sie sehen, dass wir die Daten mit der Variablen 'fetch' laden - das ist es, wonach wir hier in Zeile fünf suchen. Wenn es nicht gesetzt ist, bearbeiten wir eine Abstimmung.
Das erste, was wir uns anschauen werden, ist der Beginn der Klasse und insbesondere des Konstruktors.
Klassenbewertungen private $ data_file = './ratings.data.txt'; private $ widget_id; private $ data = array (); Funktion __construct ($ wid) $ this-> widget_id = $ wid; $ all = file_get_contents ($ this-> data_file); if ($ all) $ this-> data = unserialize ($ all);
serialize () und unserialize sind eine großartige Möglichkeit zum einfachen Speichern
PHP-Datenstrukturen auf der Festplatte.
Hier ist sehr viel los in sehr wenigen Zeilen, also werde ich die wichtigen Punkte besprechen.
Zeile 3: Dies muss auf eine Textdatei festgelegt werden, die Sie zum Speichern Ihrer Daten verwenden möchten. Wir verwenden für dieses Projekt keine Datenbank, obwohl Sie dies leicht tun könnten. Eine einfache Datei reicht für unsere Bedürfnisse aus.
Zeile 7: Der Konstruktor Dies wird beim Erstellen unseres Objekts aufgerufen und speichert sofort die ID des Widgets.
Zeile 11: Wir versuchen die Textdatei zu laden. Wenn die Datei nicht existiert, ist es in Ordnung, aber auf einigen Systemen müssen Sie sie vorab erstellen und über die erforderlichen Berechtigungen verfügen, damit PHP sie lesen und schreiben kann.
Zeile 14: Diese Linie ist wichtig. Es entnimmt die Daten aus der Textdatei - sofern vorhanden - und macht sie desializes (). Die Datei enthält ein komplexes PHP-Array, das über serialize () in eine Klartextdarstellung konvertiert wurde, sodass wir es speichern und später als Array zurücklesen können.
Diese Methode wird entweder alleine oder von der vote () -Methode aufgerufen. Er findet die Daten für eine bestimmte Widget-ID und gibt sie im JSON-Format an die anfordernde Seite zurück.
öffentliche Funktion get_ratings () if ($ this-> data [$ this-> widget_id]) echo json_encode ($ this-> data [$ this-> widget_id]); else $ data ['widget_id'] = $ this-> widget_id; $ data ['number_votes'] = 0; $ data ['total_points'] = 0; $ data ['dec_avg'] = 0; $ data ['whole_avg'] = 0; echo json_encode ($ data);
Das sieht nur kompliziert aus - eigentlich ganz einfach. Als Erstes prüfen wir, ob das in $ this-> data gespeicherte Array einen Schlüssel hat, der unserer Widget-ID entspricht. Wenn dies der Fall ist, werden diese Informationen zurückgegeben, da dies die Widget-Daten sind, die von der Seite angefordert wurden.
Wir müssen mit diesen Daten nichts anfangen, da sie bereits in Array-Form vorliegen. $ this-> data ist nur ein Array von Arrays. Wir kodieren das gewünschte Array mit json_encode () und senden es an den Browser zurück.
Wenn für die angeforderte Widget-ID keine Daten vorhanden sind, erstellen wir einen Datensatz mit allen Nullwerten und senden ihn an den Browser zurück.
Als Nächstes müssen wir eine Methode erstellen, um eingehende Stimmen zu bearbeiten. Wenn die Methode abgeschlossen ist, muss sie get_ratings () aufrufen, um die aktualisierten Informationen an den Webbrowser zurückzusenden.
public function vote () # Liefert den Wert der Abstimmung preg_match ('/ star _ ([1-5] 1) /', $ _POST ['clicked_on'], $ match); $ vote = $ match [1]; Als erstes bekommen wir den Wert der Abstimmung. Denken Sie daran, dass irgendwo in 'clicked_on' ein Klassenname im Format von Stern_ # ist. "star_4" zum Beispiel. Um diesen Wert zu erhalten, verwenden wir einen regulären Ausdruck und erfassen den Wert der Zahl in $ match [1]..
$ ID = $ this-> widget_id; # Aktualisieren Sie den Datensatz, falls er existiert, wenn ($ this-> data [$ ID]) $ this-> data [$ ID] ['number_votes'] + = 1; $ this-> data [$ ID] ['total_points'] + = $ vote; # Erstellen Sie eine neue, wenn dies nicht anders ist $ this-> data [$ ID] ['number_votes'] = 1; $ this-> data [$ ID] ['total_points'] = $ vote;
Hier speichern wir $ this-> widget_id aus Gründen der Übersichtlichkeit in $ ID - der folgende Code wird für die Augen ein wenig rau.
Wir prüfen, ob Informationen für diese ID vorhanden sind. Wenn dies der Fall ist, fügen wir der Gesamtzahl der Stimmen eine Stimme hinzu und addieren die Punkte der erhaltenen Stimmen. Dies ist eine laufende Summe aller Stimmen; Wenn also eine Person fünf Sterne und eine andere drei gibt, sind das insgesamt acht Punkte.
Wenn der Datensatz nicht existiert, erstellen wir eine mit einer Stimme und nur die Punkte der eingehenden Abstimmung.
$ this-> data [$ ID] ['dec_avg'] = rund ($ this-> data [$ ID] ['total_points'] / $ this-> data [$ ID] ['number_votes'], 1); $ this-> data [$ ID] ['whole_avg'] = rund ($ this-> data [$ ID] ['dec_avg']); file_put_contents ($ this-> data_file, serialize ($ this-> data)); $ this-> get_ratings ();
Nachdem wir die Gesamtzahl der Stimmen und Punkte aktualisiert haben, müssen wir sowohl den Durchschnitt als Ganzzahl als auch einen Dezimalpunkt berechnen. Um zu vermeiden, dass die Mathematik zweimal ausgeführt werden muss, berechnen wir zunächst den Durchschnitt in Zeile 1 auf eine Dezimalstelle und runden diesen Wert dann in Zeile 2 auf eine ganze Zahl ab.
In Zeile vier speichern wir die geänderten Informationen nach der Verarbeitung mit serialize () wieder auf der Festplatte. Sobald die Daten sicher gespeichert sind, rufen wir $ this-> get_ratings () auf, um die neuen, aktualisierten Informationen an den Browser zu senden.
Der Einfachheit halber ist dies keine 100% ige Komplettlösung. Um dieses Projekt zu erweitern, sollten wir ein Cookie speichern, um sicherzustellen, dass die Leute nur einmal abstimmen oder sogar die IP-Adresse aufzeichnen. Es ist auch möglich, dass zwei Erststimmenpaare gleichzeitig stattfinden und nur eines aufgezeichnet wird. Es ist jedoch ein guter Anfang und ist mehr als geeignet, um die Stimmen einiger weniger Elemente auf Ihrer Website zu verfolgen. Gedanken? Danke fürs Lesen!
Wenn Sie zusätzliche Hilfe benötigen, wenden Sie sich an einen der PHP-Dienstanbieter von Envato Studio. Sie können Fehler beheben, neue Funktionen hinzufügen oder ganze Anwendungen von Grund auf entwickeln!
