Share
In diesem Lernprogramm erfahren Sie, wie Sie die Verfügbarkeit von Benutzernamen mit Request.JSON und PHP / MySQL von Mootools überprüfen
In diesem Lernprogramm erfahren Sie, wie Sie die Request.JSON-Funktion von Mootools verwenden, um einen Benutzernamen anhand eines Arrays oder einer Datenbank zu überprüfen. In diesem Beispiel verwenden wir eine einfache MySQL-Datenbank. Ich werde versuchen, so viel Hand zu halten, wie ich kann, aber ein wenig Erfahrung mit PHP und MySQL wird ein Plus sein.
Wir erstellen eine einfache Datenbank und fügen eine Tabelle hinzu. Danach fügen wir einen Benutzernamen in die Datenbank ein.
Accentsconagua
CREATE TABLE WENN NICHT EXISTEN ajax_users (id INT (2) NOT NULL PRIMARY KEY AUTO_INCREMENT, Benutzername VARCHAR (128) NOT NULL); INSERT in ajax_users VALUES ('NULL', 'matt'); Woohoo, wir haben eine Datenbank, eine Tabelle und einen einzigen Benutzernamen. Beginnen wir mit diesem Tutorial!
Für den ersten Schritt erstellen wir eine einfache Seite mit einem Eingabefeld für den Benutzernamen und einer Schaltfläche zum Senden. Öffnen Sie Ihre bevorzugte Codierungsanwendung - meine ist zufällig Coda - und erstellen Sie ein neues leeres Dokument mit dem Namen index.php. Zuerst zeige ich Ihnen den Endergebniscode für diesen Schritt und erkläre ihn dann ausführlich. Ich finde, dass das erneute Schreiben des Codes selbst dazu beiträgt, dass er haften bleibt, aber Sie können kopieren und einfügen, wenn Sie möchten.
Jetzt haben wir ein ziemlich einfaches Layout der Site. Es wird anfangen, sich in Schritt 2 zusammenzusetzen. Machen Sie sich also keine Sorgen, wenn es im Moment nicht wirklich viel aussieht.
Fühlen Sie sich frei, um das zu gestalten, wie Sie möchten, oder verwenden Sie die CSS-Datei aus dem Quellcode.
Wir müssen das Mootools-Framework in unsere PHP-Datei integrieren. Ohne dies können wir keine Klassen oder Funktionen von Mootools für unser Skript verwenden. Dafür gibt es zwei Möglichkeiten. Der erste Weg ist die Verwendung der AJAX Libraries API von Google, um eine Verknüpfung zu der Datei herzustellen. Sie können den Pfad hier anzeigen. In den Google-Bibliotheken haben Sie Zugriff auf viele Frameworks. Schauen Sie sich nach dem Tutorial um. Um die Sache zu beschleunigen, können wir einfach den unten stehenden Code verwenden. Legen Sie dies in Ihre
Abschnitt Ihrer PHP-Datei.Die zweite Möglichkeit besteht darin, zur Mootools-Site zu gehen
Nachdem wir nun das Mootools-Framework in unserer Datei enthalten haben, können Sie eine neue Datei mit dem Namen main.js erstellen, oder wie auch immer Sie sie benennen möchten. Sobald diese Datei erstellt wurde, können Sie sie in unsere PHP-Datei einfügen.
Gehen Sie voran und platzieren Sie das am Ende unserer PHP-Datei. Wenn Sie es noch nicht getan haben, öffnen wir unsere Datei main.js.
Dieser Teil kann etwas knifflig werden. Stellen Sie sicher, dass die beiden geöffneten Dateien index.php und main.js sind, da wir zwischen den Dateien hin und her wechseln, um eine bessere Vorstellung davon zu erhalten, wie Mootools mit den Elementen in index.php interagiert.
Der erste Code, den wir main.js hinzufügen werden, teilt unserem Mootools-Skript mit, dass Code ausgeführt werden soll, wenn das DOM geladen wurde.
window.addEvent ('domready', function () // Wir werden dies mit Mootools-Güte füllen); Jetzt, da das Hauptgeschäft erledigt ist, können wir uns die Hände schmutzig machen.
Wir müssen herausfinden, wie ein Benutzer mit unserem Eingabefeld für Benutzernamen interagiert hat. Wir machen dies mit Events. Ereignisse sind die Art und Weise, wie Mootools Aktionen ausführt, wenn ein Benutzer etwas tut. Dies kann das Klicken auf einen Link, das Drücken einer Taste, das Loslassen einer Taste, das Bewegen der Maus usw. umfassen. Für dieses Beispiel werden wir ein Ereignis auslösen, wenn der Benutzer eine Taste im Feld "Benutzername" freigibt.
Bevor wir das Ereignis hinzufügen, müssen wir dem Benutzernamen eine ID zuweisen. Ohne eine ID wissen die Mootools nicht, über welche Eingabe wir sprechen, wenn wir sie dazu auffordern, ein Ereignis hinzuzufügen.
Fügen Sie Ihrer Benutzernamen-Eingabe in index.php eine ID hinzu
Ok, ich schwöre, wir werden jetzt ein paar Mootools programmieren. Wechseln Sie wieder zu main.js. Fügen Sie in Ihrem Fensterereignis diesen Code hinzu.
$ ('user_name'). addEvent ('keyup', function () // Dies wird ausgelöst, wenn der Benutzer einen Schlüssel in der Eingabe des Benutzernamens freigibt.) $ ('user_name') teilt Mootools mit, welches Element wir betrachten. Sie bezieht sich auf die Elemente ID.
Danach verwenden wir .addEvent (), um Mootools mitzuteilen, dass wir irgendwann etwas tun wollen. Die erste Option ist das Ereignis, auf das wir achten. Wir verwenden keyup. Es gibt viele andere Ereignisse, nach denen wir suchen können. Sie können in den W3C-Schulen nachlesen. Das letzte kleine Bit enthält eine Funktion, die wir verwenden, um bei jedem Auslösen des Ereignisses JavaScript-Code auszuführen.
Nun, da das Ereignis verknüpft ist, können wir die Anforderung erstellen, die gesendet wird, wenn das Ereignis ausgelöst wird. Wir werden diesen Code von innen nach außen setzen.
… Der Beginn unseres Events… new Request.JSON (url: "inc / php / json.php", onSuccess: function (Antwort) ). Get ($ ('signup'));… Das Ende von unsere Veranstaltung… Ziemlich einfach aussehend, oder ?! Wir beginnen mit der Erklärung unserer Anfrage. Die erste Variable ist URL. Dies ist der Weg zu unserem PHP, das unsere JSON-Magie beherbergt. Geben Sie einfach einen Pfad zu einer zukünftigen Datei ein. Die zweite Variable ist onSuccess. Diese Funktion wird ausgelöst, wenn unsere Anfrage erfolgreich ist. Hier werden wir den größten Teil unseres restlichen Codes einfügen. Unser letztes kleines Stück, das leicht zu überblicken ist, ist die Variable .get ($ ('signup')), die unserer Anfrage folgt. Dies nimmt alle unsere Informationen aus unserem Formular in index.php und sendet es mit der JSON-Anfrage. Andernfalls sendet die Anfrage keine Daten und ist praktisch unbrauchbar. Wir haben es jetzt nützlich gemacht!
Wir sollten unsere JSON-Datei wahrscheinlich sofort erstellen, damit keine Fehler auftreten.
Das Konzept unserer JSON-Datei ist theoretisch ziemlich einfach. Es nimmt unsere Variablen, macht alles, was wir wollen, und schickt es dann zurück in unsere main.js-Datei, alles hinter den Kulissen. Das ist fantastisch. Nehmen Sie sich eine Sekunde, um sich zu sammeln.
Ok, jetzt sind wir alle ruhig und lassen uns eine neue Datei namens json.php erstellen. Wenn Sie den Pfad zu Ihrer main.js-Datei hinzugefügt haben, benennen Sie ihn gleich und platzieren Sie ihn in den richtigen Ordner. Öffne diesen Trottel!
// eine leere Variable einrichten // wir werden dies als Array verwenden, um zurückzusenden $ result = null;
Einfach richtig? Der erste Schritt besteht darin, eine Nullvariable zu erstellen, die wir später als Array verwenden werden. Als Nächstes müssen wir uns mit unserer Datenbank verbinden.
// Verbindung zur mysql-Datenbank herstellen mysql_connect ('localhost', 'root', 'root') oder die ('Fehler beim Verbinden mit mysql'); mysql_select_db ('tutorials') oder die ('Fehler beim Verbinden mit der Tabelle'); Wir sollten alle miteinander verbunden sein. Geben Sie oben Ihre Datenbankinformationen ein. Um sicherzustellen, dass alles reibungslos läuft, zeigen Sie auf Ihre json.php-Datei. Wenn die Seite leer ist, sind wir golden. Wenn Sie Datenbankverbindungsfehler sehen, liegt ein Problem vor. Dies ist normalerweise nur ein falsch geschriebener Host / Benutzername / Passwort. Überprüfen!
// formatiere die Variablen $ user_name = mysql_real_escape_string ($ _ GET ['user_name']); // Überprüfen Sie die Datenbank auf Benutzer mit dem Namen $ user_name $ grab_user = mysql_query ("SELECT 'user_name' FROM 'ajax_users' WHERE 'user_name' = '$ user_name'"); // Überprüfen Sie, ob die Abfrage etwas zurückgegeben hat, wenn (mysql_num_rows ($ grab_user) == 0) // kein Benutzer mit diesem Namen $ result ['action'] = 'success'; else // oops, bereits vergeben $ result ['action'] = 'error'; Alle Variablen, die an unseren Json gesendet wurden, wurden als $ _GET gesendet. Wenn Sie zuvor mit Formularen gearbeitet haben, sollte dies nicht anders sein. Wenn Sie noch nicht mit PHP-Formularen gearbeitet haben, werfen Sie einen Blick auf diese Seite.
Wir setzen die Variable $ _GET in eine neue Variable um alles zu bereinigen. Indem wir die $ _GET-Variable in die Funktion mysql_real_escape_string () einschließen, stellen wir sicher, dass die Injektion von mysql bekämpft wird. Einspritzung ist schlecht!
Als nächstes ist die Abfrage. Wir holen beliebige Zeilen aus unserer MySQL-Datenbank, in denen die Zeile user_name der Eingabe des Benutzers in die Eingabe user_name entspricht. Wenn die Abfrage 0 zurückgibt, ist keine Übereinstimmung mit dem Benutzernamen vorhanden.
Wenn es keine Übereinstimmung gibt, fügen wir unserem Ergebnis-Array eine Aktionsvariable hinzu und geben ihm den Wert des Erfolgs. Wenn es eine Übereinstimmung gibt, geben wir einfach den Fehlerwert an.
$ result ['user_name'] = $ _GET ['user_name']; // Antwort zurückschicken echo json_encode ($ result);
Schließlich fügen wir dem result-Array eine user_name-Variable hinzu, vergeben einen Wert unserer $ _GET-Variable und sendet sie mit der Funktion json_encode () an main.js zurück.
Wenn der JSON-Code codiert und an die Datei "main.js" zurückgesendet wird, sieht der Code wie unten angegeben aus
"action": "success", "user_name": "matt"
Damit ist die Json-Datei beendet. Sie können sie speichern und schließen. Sie werden es für dieses Beispiel nicht mehr benötigen! Wechseln Sie wieder zu main.js
Wir haben die Anfrage gesendet, wir haben überprüft, ob der Benutzername existiert, und wir haben die Antwort gesendet. So was jetzt? Jetzt werden wir Mootools verwenden, um die Antwort zu sortieren und den Benutzer zu warnen. Wie sieht main.js die Antwort? Wenn wir einen kurzen Blick auf unsere onSuccess-Funktion werfen, werden Sie feststellen, dass die einzige in der Funktion übergebene Variable die Antwort ist. Dies ist die Variable, in der sich jetzt Ihre JSON-Antwort befindet. Bitte fügen Sie diesen Code in unsere onSuccess-Funktion ein.
if (response.action == 'success') // Wir sind gut! else // Benutzername wird genommen, autsch ?! alert ("Nutzername"); Wir konnten nicht testen, ob unsere kleine Anwendung gerade funktioniert, also nehmen wir uns einen Moment Zeit für einen schnellen Test. Richten Sie Ihren Browser auf index.php und geben Sie ein matt in Ihre Benutzername eingeben. Sobald Sie mit der Eingabe fertig sind, matt Eine Warnung sollte Popup-Sprichwort Benutzername vergeben. Sie können diese Warnung jetzt löschen. es wird nicht mehr benötigt.
Alarme sind langweilig. Sie sind hässlich, sie sind nicht sehr benutzerfreundlich. Alarme sind schlecht! Wir brauchen eine Möglichkeit, den Benutzer auf eine nette, konstruktive und benutzerfreundliche Weise darauf aufmerksam zu machen. Öffnen Sie Ihre style.css und fügen Sie Ihrer Eingabe einige Stile hinzu.
input.success border: 3px fest # 9ad81f; input.error border: 3px fest # b92929;
Wir haben unsere Stile, und wir erhalten eine Antwort, die den Eingabestil je nach Antwort ändern kann.
$ ('user_name'). removeClass ('error'); $ ('user_name'). addClass ('success'); 
Wir nehmen unseren Input und stellen sicher, dass Mootools ihn mit $ () finden kann. Danach fügen wir unsere Klassen hinzu bzw. entfernen sie. Wir stellen sicher, dass die Fehlerklasse entfernt wird, sofern das Skript sie bereits unserer Eingabe hinzugefügt hat. Dann fügen wir die Erfolgsklasse hinzu. Dadurch wird verhindert, dass die Skripts der Eingabe mehrere Klassen hinzufügen und wie input.error.success.error.success aussehen. Um die Antwort zu erhalten, die einen Fehler auslöst, kehren Sie einfach die Reihenfolge zum Hinzufügen / Entfernen um.
Gib das einen Test. Das Eingabefeld sollte eine grüne Umrandung haben, bis Sie eingeben matt als Benutzername. Das Eingabefeld sollte dann rot werden.
Das ist es. Das ist die reine Version dieses Skripts. Wenn Sie möchten, können Sie jetzt mit dem Lesen aufhören und Ihren Freunden Ihre neuen Tricks zeigen, oder Sie können weiterlesen. Ich werde das Skript erweitern, um es ein bisschen benutzerfreundlicher zu machen.
Momentan wird das Skript jedes Mal ausgelöst, wenn ein Benutzer eine Taste loslässt. Was ist, wenn Sie Benutzer zwingen, Benutzernamen länger als 3 Zeichen zu verwenden? Wir verschwenden im Grunde 3 Anfragen, wenn das Skript wirklich nicht ausgelöst wird, wenn der Eingabewert nicht länger als 3 Zeichen ist. Dies reduziert die Anzahl der Anfragen, die wir an das JSON-Skript senden!
… Der Beginn unseres Benutzernamensereignisses… var input_value = this.value; if (input_value.length> 3) … Request Event…… Das Ende unseres Benutzernamens Events…
Wenn wir unsere Anfrage mit dem obigen Code umschließen, wird die Anfrage nur ausgelöst, wenn der Eingabewert größer als 3 ist. Zuerst setzen wir den Wert mit this.value in unsere Variable. diese steht für die Eingabe unseres Benutzernamens. Als Nächstes überprüfen wir, ob die Länge unseres Werts größer als 3 ist. Wir machen dies, indem wir input_value.length verwenden. Machen Sie einen kurzen Test.
Denken Sie daran, dass wir in unserer JSON-Datei unseren Benutzernamen mit unserer Antwort zurückgeschickt haben. Deshalb. Öffnen Sie index.php und fügen Sie ein p direkt unter unserer Eingabe ein.
Nun, da wir unser p mit einer Antwort-ID haben, können wir Mootools dazu bringen, Text in das Objekt einzufügen. Öffnen Sie main.js und fügen Sie diesen Code in die Funktion onSuccess ein.
$ ('response'). set ('html', ')'+ antwort.benutzername +' ist verfügbar'); 
Mootools nimmt $ ('response') und verwendet die Funktion set (), um Text einzufügen. Die erste Option ist, welche Art von Daten wir einstellen. Dies kann entweder HTML oder Text sein. Weil wir eine senden Tag sind ein Ergebnis, wir verwenden HTML. Wir verwenden response.user_name, um die Variable user_name aus unserer JSON-Antwort zu holen, um den Benutzer auf dem neuesten Stand zu halten. Kopieren Sie für den Fehlerabschnitt den Code und ändern Sie den Text ein wenig, um den Benutzer darauf hinzuweisen, dass der Benutzername verwendet wird.
Im Moment kann der Benutzer das Formular absenden, auch wenn der Benutzername bereits vergeben ist. Dies bedeutet, dass Sie PHP verwenden müssen, um eine weitere Fehlerprüfung durchzuführen. Sie möchten immer sicherstellen, dass Sie PHP verwenden, um eine andere Stufe der Fehlerüberprüfung vorzunehmen, da die Deaktivierung der Schaltfläche durch Personen vermieden werden kann. Je mehr Sicherheitsschichten, desto besser! Öffnen Sie index.php und finden Sie den Absenden-Button. Lass es deaktivieren!
Wir gaben den Submit-Button aus submit_button damit Mootools damit reden kann. In der Nähe des nahen Tags haben wir auch hinzugefügt deaktiviert. Wenn Sie Ihren Browser auf index.php zeigen und versuchen, auf die Schaltfläche zu klicken, werden Sie feststellen, dass nichts passiert. Das Formular wurde deaktiviert. Öffne main.js
$ ('submit_button'). disabled = false; Wenn wir diesen Code in unseren response.success-Bereich einfügen, wird die Schaltfläche aktiviert. Fügen Sie es einfach dem Abschnitt reponse.error hinzu, ändern Sie false in true und testen Sie es. Wenn der Benutzername verfügbar ist, können Sie auf die Schaltfläche klicken. Wenn genommen, sollte die Schaltfläche deaktiviert werden.
Der Benutzer hat etwas Text eingefügt und dann den gesamten Text aus der Eingabe gelöscht. Wenn Sie feststellen, dass alle Warnmeldungen auf dem Bildschirm angezeigt werden. Das ist ein bisschen chaotisch. Wir sollten das wahrscheinlich beheben. Öffnen Sie main.js.
… Das Ende unseres Benutzernamens event… $ ('user_name'). AddEvent ('blur', function (e) if (this.value == ") $ ('user_name'). RemoveClass ('success') $ ('user_name'). removeClass ('error'); $ ('response'). set ('html', "); $ ('submit_button'). disabled = true;); Wenn der Benutzer von der Eingabe abklickt, wird das Ereignis ausgelöst verwischen. Wenn der Eingabefeldwert leer ist, entfernen wir alle Klassen, setzen die Antwort p auf leer und deaktivieren die Schaltfläche. Nett und Ordentlich!
Ich hoffe, dieses Tutorial hat Ihnen dabei geholfen, einige Grundlagen zu vermitteln, wenn Sie einfache JSON-Anforderungen verwenden und mit Elementen auf der Seite mit Mootools interagieren. Fühlen Sie sich frei, um den Quellcode herunterzuladen! Wenn Sie Fragen haben, folgen Sie mir auf Twitter!
Eine letzte Anmerkung: Die in diesem Lernprogramm verwendeten Tastenstile sind Eigentum von Zurb. Schau sie dir an, sie leisten großartige Arbeit!
