Hallöchen!
Die richtig coolen Webseiten haben etwas magisches an sich: Oftmals werden Dinge, die normal per Reload/Formular-Submit erfolgen, völlig instant gemacht, ohne Neuladen der Seite! Also dynamisches und effizientes Laden/Ändern von Daten. Das ist mittels AJAX möglich. Schöne Weboberflächen entstehen meist eben mit JavaScript, AJAX und natürlich jQuery!
Ich habe diese Thematik mal ein wenig runtergebrochen auf ein sehr einfaches Niveau: ein simples Login, ohne Datenbankkommunikation, einfach nur ein Dummy. Wer das Ganze später produktiv nutzen möchte, muss da noch eine Datenbankabfrage für Benutzerdaten einbauen und ganz wichtig: Inputvalidation! Auch muss natürlich am Ende dafür gesorgt werden, dass auf allen Seiten sich das Login ‘gemerkt’ wurde und so weiter!
Fangen wir mit dem Beispiel an, es kann mit allen Quellen hier heruntergeladen werden! Ihr dürft damit anstellen, was ihr wollt! Der Quellcode ist dokumentiert!
Übersicht über die benötigten Dateien:
- index.php <- Das Login UI kommt hier rein
- login.php <- Benutzerdatenüberprüfung wird hier gemacht
- login.js <- Kommunikation zwischen UI und Benutzerdatenüberprüfung
- style.css <- Einfach nur hübsche UI gestalten
- images/ <- In den Ordner kommen hübsche Bilder für UI
Also fangen wir mit der index.php an:
Unser Doctype Kram:
<!DOCTYPE html> <html lang="en">
Unser Head, mit allem, was wir brauchen:
<head> <meta charset="utf-8"> <title>Login</title> <link rel="stylesheet" href="style.css"> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- jQuery einbinden, weil awesome --> <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script> <!-- Ein Script einbinden, mit dem wir per 'enter' das Login starten --> <script src="http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js" type="text/javascript"></script> <!-- Ein Plugin für jQuery einbinden, um die Login Falsch Funktion zu animieren --> <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript"></script> <!-- Unser eigenes Login-Script einbinden --><script src="login.js" type="text/javascript"></script> </head>
Fangen wir mit dem Body an:
Hier muss die login.php eingebunden werden! Der Rest zählt nur zu hübsch.
<body> <div id="centered"> <div id="loginArea"> <h2 style="margin-top: 12px;">Login</h2> <hr> <!-- Die login.php einbinden --> <?php require_once('login.php'); ?>
Hier folgt der Table mit den Login Feldern und dem Login Button, ein Formular ist NICHT nötig! Das funktioniert über die login() JavaScript Funktion im Login-Button.
<!-- Es folgt der LoginTable --> <table id="login"> <tr> <td height="45"> <span style="font-size: 20px;">Username: </span> </td> <td> <input type="text" name="username" id="username" value="" /> </td> </tr> <tr> <td height="45"> <span style="font-size: 20px;">Password: </span> </td> <td> <input type="password" name="password" id="password" value="" /> </td> </tr> <tr> <td> </td> <td> <input type="button" name="loginSubmit" value="Login" style="margin-left: 134px;" onclick="login()"/ </td> </tr> </table>
Und hier schließen wir den Login-Bereich ab und legen schon mal ein LEERES Div für den Members Only Content an:
</div> <div id="secretDiv"> <!-- Hier wird der Inhalt NICHT direkt hineingeschrieben, sondern der Inhalt für die Members wird von der login.php zurückgegeben und per JavaScript hier eingefügt! --> </div> </div> </body> </html>
Weiter folgt die login.php, die wir ja schon in der index.php eingebunden haben:
Wichtig ist, es sollte nur eine Rückgabe erfolgen, wenn wirklich ein Login angestoßen wurde, da sonst die Ausgabe in der index.php erscheint, da sie ja schon eingebunden wird, ohne, dass erst ein Login erfolgte! Weiterhin wird hier die Dummy-Loginfunktion gestartet. Also, es werden die Benutzerdaten geprüft und es wird ein Output erzeugt, der entweder sagt, dass das Login fehlgeschlagen ist oder erfolgreich war.
<?php /* Durch das require_once in der index.php, wird die Datei schon ohne Login aufgerufen. Ein Loginversuch soll aber erst versucht werden, wenn Benutzerdaten per POST übergeben wurden. */ if (isset($_POST['username']) && isset($_POST['password'])){ // Hier müsste noch Input-Valdidation durchgeführt werden $user = $_POST['username']; $password = $_POST['password']; // Das hier ist nur Dummy, eigentlich kommte hier wahrscheinlich eine Datenbankabfrage if ($user == "tutorial" && $password == "123456"){ echo getLoginOKReturnString(); }else{ echo getLoginFailReturnString(); } }
Hier kommen die Funktionen, die die Rückgabe für den jeweiligen Status erzeugen:
/* Beim Zurückgeben hier muss folgendes beachtet werden: Die JavaScript Funktion und der HTML Inhalt, der Members only ist, darf NICHT schon in der index.php oder der login.js stehen, da man sonst auch ohne Zugangsdaten mit der Seite arbeiten kann. Darum müssen alle Daten, die ein Login benötigen, nur aus einer Datei zurückgegeben werden, die ein Login durchführt bzw. überprüft, ob eine Session für den Benutzer existiert. Bitte auch nicht den Inhalt für die Member Area in eine andere JS/HTML Datei schreiben, da diese auch ohne Login angezeigt werden können! */ // Das Javascript und HTML zurückgeben, das dem User sagt, dass das Login erfolgreich war und zeigt ihm das Hidden-Feature function getLoginOKReturnString(){ return "<center><h1 class=\"shadow\">Here's your secret: <br><br><p style=\"font-size: 84px\" class=\"shadow\">42</p></h1></center>"; } // Das Javascript und HTML zurückgeben, das dem User sagt, dass seine Daten nicht korrekt waren function getLoginFailReturnString(){ return "0"; } ?>
Die login.js, die Datei, die für die Kommunikanten zwischen index.php und login.php zuständig ist.
Hier wird direkt nach dem Laden ein wenig Code ausgeführt:
Das Hauptdiv wird vertikal zentriert, weil’s hübsch sein soll. Auch für den Loginbutton brauchen wir einen Enter-Button-Trigger, den binden wir mit einem 3rd Party JavaScript ein. Das meiste JavaScript hier ist jQuery, weil’s einfach awesome ist.
// Wird beim Abschließen des Ladens der Seite aufgerufen $(document).ready(function() { // Vertikal das Haupt-Center-DIV zentrieren var x = $(document).height(); x = (x-240)/2; $("#centered").css('margin-top',x); // Fügt der Enter-Taste der Tastatur einen Observer hinzu, der beim Drücken der Taste unsere Login Funktion aufruft shortcut.add("enter", function() { login(); }); });
Hier ist die eigentliche, wichtige, Funktion für die Kommunikanten: Die Loginfunktion macht einen POST Request an unsere login.php und verarbeitet dessen Rückgabe:
// Die Login Funktion, um die Benutzerdaten zu prüfenfunction login(){ // Die Benutzerdaten aus der HTML auslesen und in einer Variable zwischenspeichern var username = $("#username").val(); var password = $("#password").val(); /* Einen Ajax-POST Request an unsere login.php senden mit unseren Benutzerdaten. Wenn der Request erfolgreich war, wird dessen Rückgabe (alles, was 'ausgegeben' wurde (also per echo z.B.)), an eine anonyme Funktion als Wert 'requestData' übergeben. Innerhalb der anonymen Funktion können diese Daten jetzt verarbeitet werden, um zu prüfen, ob der Login erfolgreich war. */ $.post("./login.php", { username: username, password: password }, function(requestData){ // Wir geben von der login.php '0' zurück, wenn die Benutzer/Passwort-Kombination falsch war if (requestData == "0") { /* Also die Funktion aufrufen, die dem Benutzer zurückgibt, dass seine Daten nicht korrekt waren. Wenn die Daten richtig waren, geben wir ja das anzuzeigende HTML/JavaScript zurück. */ wrongPassword(); }else{ /* Statt 'else' sollte man hier natürlich noch eine eindeutige Validation machen! Es könnte auch 'else' aufgerufen werden, wenn ein PHP Fehler aufgetreten ist! */ // Anzeigen des secretDiv $('#loginArea').fadeOut('slow', function() { // Setzen wir also jetzt die Rückgabe der login.php als Inhalt des secretDivs $('#secretDiv').html(requestData); $('#secretDiv').fadeIn(); }); } }); }
Hier kommt eine Funktion, die ausgeführt wird, sobald die Benutzerdaten nicht richtig sind:
Es wird dabei das Login-Div 'geschüttelt', wie unter OS X. Für die Bewegung benutzen wir ein jQuery 'Easing' Plugin.
// Eine Funktion, die aufgerufen wird, wenn das Passwort/Benutzer nicht richtig waren. Sie lässt das Login-Div sich 'schütteln'. function wrongPassword(){ $("#centered").animate( { marginLeft: "+=25px" }, { duration: '20', easing: 'easeOutBounce' }) .animate( { marginLeft: "-=50px" }, { duration: '20', easing: 'easeOutBounce' }) .animate( { marginLeft: "+=25px" }, { duration: '20', easing: 'swing' }); }
Der Style Kram ist unwichtig, den könnt ihr euch beim Runterladen anschauen!
So jetzt viel Spaß damit und bei Fragen dürft ihr die gern stellen!
Q