Hackthenet-Blog

Privates Weblog von Christian Vogt zu allen Themen rund um Webdesign, Textpattern & CakePHP

• Weblog
• Galerie
• Downloads
• Archiv
• Kontakt
• Persona

Nun habe ich mich ja in letzter Zeit neben CakePHP auch mit dem jQuery-Framework beschäftigt, und in diesem Zusammenhang eine kleine “Probeanwendung” gebaut, nämlich eine Login-Seite mit Ajax-Funktionalität. Für den ein oder anderen stellt sich nun sicherlich die Frage, ob solch eine Funktion wirklich sinnvoll ist…doch für mich zählt hier eher die Erklärung als der Sinn des Ganzen :-).

Wie das Ganze später aussehen könnte seht ihr in dieser kurzen Demo (richtiger Login: gast:gast). Das ganze wurde grafisch natürlich ein wenig aufgepeppt. Um die jQuery-Animationen auf dem variablen Hintergrund hinzubekommen musste auf das PNG-Format zurückgegriffen werden, zudem wurde für die IE6-User ein PNG-Behaviour eingesetzt.

Nun aber Butter bei die Fische.

Was das XHTML angeht bleibt eigentlich alles beim alten, denn gerade das ist ja das Positive an jQuery: Man braucht den (X)HTML-Quelltext nicht wirklich anzufassen.

Daher hier erstmal das komplette Javascript:

jquery-script.js

$(document).ready(function(){
	$("#login").Bounce(70);
	$("#footbar").slideDown("slow");
	$("input").focus(function(){ 
		$(this).parent().addClass("active");
	});
	$("input").blur(function(){ 
		$(this).parent().removeClass();
	});
	$('#login form').submit(function(e){
		e.preventDefault();
		var username = $("#username input").attr('value');
		var password = $("#password input").attr('value');
		$.ajax({
			type: "POST",
			timeout: 7000,
			data: {username: username, password: password},
			url: "login",
			success: function(result) {
				if(result != "true") {
					$("#ajax_load").animate({opacity: 1.0}, 500).fadeOut(500);
					$("#messages").append('<div id="ajax_error">Anmeldung war nicht erfolgreich!</div>');
					$("#login").Shake(4);
				}
				else {
					$("#ajax_load").fadeOut(200);
					$("#messages").append('<div id="ajax_accept">Erfolgreich, sende an System...</div>');
					$("#ajax_accept").hide().show("slow",function(){ 
						setTimeout(function(){$("#login").slideUp(500);},500);
						setTimeout(function(){$('#login form')[0].submit();},1200);
					});
				}
			}
		})
	});
	$(".button")
			.ajaxStart(function(){
				$("#messages div").remove();
				$("#messages").append('<div id="ajax_load">Überprüfe Daten...</div>');
			});
});

Ok, also was wird hier gemacht?

$(document).ready(function(){...});

Wartet erst einmal bis der DOM fertig/bereit ist.

$("#login").Bounce(70);

Ist eine Funktion des Interface-Plugins für jQuery und sorgt dafür, das das Element mit der CSS-ID “login” beim Start der Seite um 70 Pixel springt.

$("#footbar").slideDown("slow");

Ebenfalls eine Animation, nur das diese bewirkt das die Fußzeile #footbar beim Start der Seite langsam hereingleitet.

	$("input").focus(function(){ 
		$(this).parent().addClass("active");
	});
	$("input").blur(function(){ 
		$(this).parent().removeClass();
	});

Sobald ein Input-Feld auf der Seite aktiviert wird (focus), bekommt dessen Eltern-Element (in diesem Fall das übergeordnete <label> die Klasse active zugewiesen. Wird das Feld wieder verlassen (blur), so wird auch die Klasse wieder entfernt. Diese Funktion dient also einfach nur zur optischen Hervorhebung des aktiven Input-Feldes.

$('#login form').submit(function(e){
		e.preventDefault();
		var username = $("#username input").attr('value');
		var password = $("#password input").attr('value');

Jetzt wirds spannend. Diese Codezeilen werden nur dann ausgefüllt, wenn das Formular(form) innerhalb der CSS-ID “#login” abgesendet (submit) wurde. In unserem Fall wird eine Funktion e gestartet. e.preventDefault(); verhindert dabei zunächst, das das Formular einfach über den Browser abgesendet wird, denn wir wollen ja eine Ajax-Anfrage starten. var username = $("#username input").attr('value'); und var password = $("#password input").attr('value'); legen uns zwei Variablen mit den derzeitigen Inhalten (value-Attribut) der Input-Felder in der CSS-ID “username” und “password” an. Ich denke bis hierhin alles relativ logisch.

		$.ajax({
			type: "POST",
			timeout: 7000,
			data: {username: username, password: password},
			url: "login",
			success: function(result) {...}

Dieser Teil beginnt eine Ajax-Abfrage. Über type: "Post" definieren wir, das es sich hierbei um eine Post-Anfrage handelt. Warum gerade Post? Nun, würden wir eine GET-Anfrage machen, so müssten wir den Benutzernamen und das Passwort in der URL übertragen, also seeeehr unsicher, daher an dieser Stelle eine POST-Anfrage.

timeout: 7000, besagt das die Anfrage nach 7 Sekunden ohne Ergebnis als fehlerhaft abbrechen würde.

data: {username: username, password: password} steckt unsere vorher angelegten Variablen für die beiden Formular-Felder in die POST-Daten für die Ajax-Anfrage, die wir dann später mit PHP bzw. CakePHP auslesen und überprüfen können.

url: "login" gibt einfach an, an welche URL die Daten überhaupt gesendet werden, hier könnte z.B. auch “check.php” stehen.

success: function(result) {...} ist der Code-Abschnitt, der bei einer erfolgreichen Ajax-Abfrage ausgeführt wird (was noch nicht heißt das die eingegebenen Formularwerte richtig waren).

if(result != "true") {...}

Dieser Textabschnitt wird ausgeführt, sobald die Ajax-Anfrage erfolgreich abgeschlossen wurde, und der Inhalt der ausgelieferten Datei nicht gleich true ist, sprich, sobald wir vom PHP-Script die Antwort bekommen haben, das die Logindaten nicht korrekt waren.

					$("#ajax_load").animate({opacity: 1.0}, 500).fadeOut(500);
					$("#messages").append('<div id="ajax_error">Anmeldung war nicht erfolgreich!</div>');
					$("#login").Shake(4);

In diesem Fall wollen wir das dem User natürlich auch ausgeben. Dafür wird nach einer Wartezeit von 500 Millisekunden div mit der CSS-ID “messages” mit dem HTML-Code <div id="ajax_error">Anmeldung war nicht erfolgreich!</div> gefüllt. Zu guter letzt wird das #login-Fenster über Shake(4) viermal hin und her gewackelt, um ein Kopfschütteln zu simulieren.

				else {
					$("#ajax_load").fadeOut(200);
					$("#messages").append('<div id="ajax_accept">Erfolgreich, sende an System...</div>');
					$("#ajax_accept").hide().show("slow",function(){ 
						setTimeout(function(){$("#login").slideUp(500);},500);
						setTimeout(function(){$('#login form')[0].submit();},1200);
					});
				}

Dieser Codeabschnitt wird ausgeführt, wenn vom Server eine andere Antwort als “false” kommt, also wenn die Logindaten korrekt waren. Dafür wird erstmal die Ladeanzeige #ajax_load (dazu später mehr) ausgeblendet und dem uns bereits bekannten #messages-div eine positive Meldung eingeworfen und über show() langsam eingefadet. setTimeout dient uns in diesem Beispiel übrigens dazu, ein Script zeitlich ein wenig zu steuern, da ansonsten die Animationen zu schnell ablaufen würden, und der Benutzer von den Ausgaben evtl. nichts mitbekommen würde.

Zum Ende hin wird das komplette Loginfeld durch slideUP("500"); vertikal zusammengerollt, und das Formular durch $('#login form')[0].submit(); auf dem ganz normalem Weg an den Server abgeschickt, denn durch die [0] vor der submit-Anweisung hebeln wir das vorher gesetzt e.PreventDefault() aus.

	$(".button")
			.ajaxStart(function(){
				$("#messages div").remove();
				$("#messages").append('<div id="ajax_load">Überprüfe Daten...</div>');
			});

Bewirkt zudem noch, das sobald unser Formular über Ajax abgefeuert wurde, alle Nachrichten im #messages-Container gelöscht werden, und im Anschluss dort eine Ladeanimation eingepackt wird.

So, das war es soweit mit dem jQuery-Code, vielleicht für den Anfänger etwas verwirrend, aber das liegt vielleicht auch an meinem evtl. nicht ganz optimalem Quellcode.

Prüfen der Daten mit CakePHP

Nun müssen wir ja auf der Serverseite die Ajaxanfrage auch prüfen und natürlich ein Ergebnis ausliefern. Mit CakePHP geht das relativ einfach, da man hiermit leicht zwischen einer normalen Browseranfrage und einer Ajax-Anfrage unterscheiden kann, man kann also beide Anfragen über ein und die selbe URL laufen lassen.

	function login() {
		$this->layout = 'login';
            if($this->RequestHandler->isAjax() == true) {
			$result = $this->User->find(array('username' => $_POST['username'],'password' => md5($_POST['password'])));
			if(!empty($result)) { echo "true"; } else { echo "false"; }
			$this->render(null,'ajax');exit;
		}
		if(!empty($this->data)) {
			$result = $this->User->find(array('username' => $this->data['User']['username'],'password' => md5($this->data['User']['password'])));
			if(!empty($result)) {
				$this->Session->write('User', $result['User']['id']);
				$this->redirect('/'.CAKE_ADMIN.'/pages/');
			} else {
				$this->flash('Falsche Logindaten','/'.CAKE_ADMIN.'/users/login');
			}
		}

Hierfür habe ich meinem User-Controller eine neue Action mit dem Namen login verpasst.

Der obere Quelltext ließt sich mit Cake gewohnt einfach. In Kurform wähle ich am Anfang des Scripts das Login-Layout aus und frage ab, ob der derzeitige Request denn eine Ajax-Anfrage ist. Danach Suche ich in der Datenbank nach dem passenden Einträgen und gebe das Ergebnis über $this->render(null,'ajax');exit; als simplen Quelltext aus, also ohne Template drumherum.

Ist es keine Ajax-Abfrage, so passiert im Prinzip genau das selbe (denn nur auf die Ajax-Abfrage können wir uns ja nicht verlassen). Allerdings wird in diesem Fall natürlich auch eine Session erzeugt, damit der User fortan auch eingeloggt bleibt.

Übrigens hat mir beim erstellen der Mini-Anwendung das Visitenkarten-Tutorial von Silvan Hagen sehr geholfen, sehr gut geschrieben und leicht zu verstehen. Die Inspiration für den Loginscreen kam von Frank Weinerth.

---

Kommentare zum Thema Ajax-Login mit jQuery und CakePHP:

Kommentar-Feed für diesen Artikel

---

Site of the Month bei textpattern resources [ge] Ganz vergessen: Grafzahl bei Twitter

Blogsuche

RSS-Feeds

• Derzeit 0 Feedleser
• RSS2-Feed der Beiträge
• RSS2-Feed der Kommentare

Plaste & Plastik

Die Kategorien

• Apple (1)
• Business (38)
• CakePHP (16)
• CSS (10)
• Frameworks (14)
• Fundstücke (40)
• Hardware (27)
• JavaScript (23)
• Kurioses (15)
• Logbuch (55)
• Lustiges (12)
• OSX (1)
• PHP & MySQL (19)
• Privates (25)
• Software (42)
• Suchmaschinen (22)
• Textpattern (23)
• Ubuntu/Linux (3)
• Veranstaltungen (11)
• Videos (3)
• Webdesign (56)
• Windows (9)
• XHTML (13)

Netz-Fundstücke

• Martin Holzhauer
  Auf seinem Blog veröffentlicht Martin Holzhauer Artikel rund um die Themen der Server und Clientseitigen Webprogrammierung mit PHP und Javascript.
• Lightbox Clones Matrix
  Hier werden in einer Übersicht alle Lightbox-Clones vorgestellt. Es werden dabei sowohl das eventuelle Basis-Framework, die Dateigröße und Features verglichen.
• Modelcase by Hendrik Will
  Hendrik Will zeigt auf Modelcase Fotografien von Menschen. Zusätzlich bietet er kostenlose TFP-Shootings an.
• Ajax Rain
  Eine weitere Sammelseite für Ajaxscripte und Tools die einem meist viel Arbeit ersparen. Derzeit sind bereits über 502 Einträge vorhanden.

Meta / Propaganda

• Textpattern-Backend
• Single

• Autogenau.de
• Frankiermaschinen Glossar
• DSL-Anbieter.com