Wie erstelle ich eigene URLs um zum Beispiel eine Variable übergeben zu können?

Um eigene Router zu implementieren, öffnen wir als erstes die index.php aus dem “public”-Ordner.
Hier schreiben wir nun, nach dem wir die Application erstellt, die Bootstrap geladen und ausgeführt haben, folgende Zeile um einen neuen Rewrite-Router zu erstellen:

$router = new Zend_Controller_Router_Rewrite();

Als nächstes möchten wir einen eigenen Router anlegen. Wir nehmen nun mal an, dass wir einen NachrichtenController haben, sowie eine lesenAction. An diese Action möchten wir nun über die URL die ID mitgeben. Als Name für den Router verwenden wir “nachrichtlesen”:

$router->addRoute('nachrichtlesen');

Hier würde Zend noch meckern, da er eine Klasse des Typs Zend_Controller_Router_Route erwartet. In diesen Klassen-Aufruf schreiben wir, wie die URL aussehen soll, dass eine ID übergeben werden soll und welcher Controller / welche Action verwendet werden soll:

$router->addRoute(
	'nachrichtlesen',
	new Zend_Controller_Router_Route('nachrichten/lesen/:id',
									array('controller' => 'nachrichten',
										  'action' => 'lesen'))
);

Zur Erklärung:
“nachrichten/lesen/” ist die URL, wie sie später aussehen wird (http://beispiel.de/nachrichten/lesen/).
:id ist ein Parameter, der Übergeben wird.
Das Array enthält die Bestimmung, welcher Controller (nachrichten) / welche Action (lesen) verwendet werden soll.

Jetzt noch die Routen an die Application übergeben:

$ctrl = Zend_Controller_Front::getInstance();
$ctrl->setRouter($router);

In einer unsere Views erstellen wir nun ganz einfach eine URL mithilfe des URL-Helpers, welcher auf diese Route zugreift:

$this->url(array('id' => '3'), 'nachrichtlesen', true);

Dies ergibt folgende Ausgabe:

http://beispiel.de/nachrichten/lesen/3

Im NachrichtenController & der lesenAction können wir dies nun wie gewohnt über die Request-Methode verarbeiten:

$id = $this->getRequest()->getParam('id');

Weiter gehts mit einer weiteren Einführung in das machtvolle jQuery-Framework!

Wir möchten heute die Funktionen vom letzten mal ein bisschen vereinfachen. Es gibt in jQuery einen Interaction-Helper, der sich “toggle” nennt. In diesen Helperkann man beliebig viele Funktionen packen, welche nacheinander ausgeführt werden.

Wir hängen die toggle-Funktion an den Selector der vorherigen Einführung an.

$(function(){
	$("#klapp").toggle();
});

toggle ist, dem Event nach, click gleich zu stellen – d.h., Funktionen in toggle, werden bei einem Click ausgeführt. Um das zu veranschaulichen, mal folgende Funktionserweiterung.

$(function(){
	$("#klapp").toggle(function(){
		alert("Funktion 1 ausgeführt!");
	}, function(){
		alert("Funktion 2 ausgeführt!");
	});
});

Hier wird beim ersten Klick auf “Auf- / Zuklappen” die Funktion 1 ausgeführt. Bei einem weiterem, dem zweiten Klick wird Funktion 2 ausgeführt. Beim dritten Klick ist es nun nicht so, dass garnichts passiert. Im Gegenteil. Es wird wieder die erste Funktion ausgeführt.

In unserem Fall wissen wir, dass das Div, welches wir Auf- und Zuklappen möchten, geöffnet ist. Somit können wir die erste Funktion dementsprechend anpassen und das Div schließen. In der zweiten Funktion öffnen wir es wieder.

$(function(){
	$("#klapp").toggle(function(){
		$(".klappen").hide(300);
	}, function(){
		$(".klappen").show(300);
	});
});

Auch lässt sich der Inhalt eines Elements ganz einfach ändern. Der Einfachheit halber verwenden wir die obige toggle-Funktion sowie das passende HTML. Das einzige was wir ändern, ist die Effekt-Funktion hide & show. Wir ändern beide zur Manipulations-Funktion html.

$(function(){
	$("#klapp").toggle(function(){
		$(".klappen").html();
	}, function(){
		$(".klappen").html();
	});
});

Da dies zu keinem Ergebnis führen würde, muss der Funktion noch ein Inhalt mitgegeben werden.

$(function(){
	$("#klapp").toggle(function(){
		$(".klappen").html("Hallo!");
	}, function(){
		$(".klappen").html("<b>Boa</b>, ich tick aus!");
	});
});

Wie Ihr seht, kann man in der html-Funktion auch HTML mitgeben. Dies wird natürlich sofort angewendet.

jQuery ist ein mächtiges und auch sehr beliebtes JavaScript-Framework! Ich möchte Euch heute eine Einführung in jQuery geben und ein paar Dinge zeigen.

Zu beginn müsst Ihr euch die jQuery-Bibliothek zu downloaden. Dazu geht auf die jQuery-Page und klickt auf den großen Button rechts. Nun können wir beginnen!

[ 1 ] Wir bereiten erst einmal unser HTML-Document vor:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Einführung</title>
</head>
 
<body>
</body>
</html>

Nachdem wir die Datei abgespeichert haben, binden wir die jQuery-Bibliothek in den -Bereich der HTML-Datei ein. (Bitte denkt daran, die JS-Datei in den gleichen Ordner zu packen, wie eure HTML-Datei. Ansonsten Dateipfade anpassen. )

<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js "></script>

Als nächstes schreiben wir unseren ersten jQuery-Code. Dieser Teil kommt wieder in den -Bereich, unter den oberen Teil.

<script type="text/javascript" language="javascript">
$(function(){
     //Hier stehen weitere Anweisungen
});
</script>

Alle Anweisungen, welche in dieser Funktion stehen, werden erst Ausgeführt, wenn die ganze Seite geladen ist. Somit gehen wir Sicher, dass unser Code immer funktioniert.

[ 2 ] Als erstes Zeige ich Euch, wie ihr HTML-Elemente ganz einfach Anzeigen (Aufklappen) und Verstecken (Zuklappen) könnt. Wir schreiben also folgenden HTML-Code in den -Bereich der HTML-Datei:

<b id="klapp">Auf- / Zuklappen</b>
 <div class="klappen">Mich kann man Auf- und Zuklappen!</div> 
<div class="nichtklappen">Mich kann man <b>nicht</b> Auf- und Zuklappen!</div>

Anderst, wie normal in JavaScript, benötigen wir keinen Funktionsaufruf im HTML-Bereich. Das übernehmen für uns so genannte “Selectoren” & “Event-Helper”. Selectoren geben an, auf welchem Element ein Event-Helper ausgeführt werden soll. Event-Helper bestimmen, wann eine Funktion ausgeführt werden soll. Dazu gehören z.B. “click”, “hover”, “mouseup”, “focus” und noch viele mehr.

Selectoren: Selectoren zeigen auf einen bestimmten Tag im HTML-Breich. Genauso, wie in CSS, können ID’s, Klassen und normale Tags angesprochen werden (#MeineId, .meineKlasse, span). In unserem Fall möchten wir, bei einem Klick auf das b-Tag mit der ID “klapp” das Div mit der Klasse “klappen” Auf- / Zuklappen. Also sprechen wir die ID an: $(“#klapp”).

Event-Helper: Wie oben schon gesagt, bestimmen Event-Helper, bei welcher User-Aktion (Mausklick, Tastendruck, …) eine Funktion ausgeführt werden soll. In unserem Beispiel verwenden wir den Event-Helper “click”. Hängen wir unserem Selector also den Event-Helper mit einer Funktion an: .click(function(){});. Euer JS-Code müsste nun so aussehen:

$(function(){
	$("#klapp").click(function(){
 
	});
});

Nun müssen wir das Div mit der Klasse “klappen” verstecken. Dazu benötigen wir nur einen weiteren Selector (welcher auf “.klappen” zeigt) und eine Effekt-Funktion (hide, show).

$(function(){
	$("#klapp").click(function(){
		$(".klappen").hide(); //Hier verstecken wir das Div mit der Klasse klappen
	});
});

Bei jedem Klick würde jQuery nun versuchen, das Div zu verstecken. Also prüfen wir, ob das Div schon versteckt ist, wenn nicht, verstecken wir es. Beim verstecken wird der CSS-Style “display” auf “none” gestellt. Wir können mit der jQuery-Funktion .css Prüfen, ob das Div versteckt ist.

$(function(){
	$("#klapp").click(function(){
		if($(".klappen").css("display") != "none")
		{
			$(".klappen").hide();
		}
	});
});

Jetzt einfach noch eine else-Anweisung an die If-Abfrage packen und das Div wieder anzeigen.

$(function(){
	$("#klapp").click(function(){
		if($(".klappen").css("display") != "none")
		{
			$(".klappen").hide();
		}
		else
		{
			$(".klappen").show();	
		}
	});
});

Nun öffnet euer HTML-Dokument im Browser und testet eure soeben geschrieben jQuery-Funktion!

[ 2 ] Sicherlich ist das nichts besonders, aber mit dem fast gleichem Code, kann man einen ganz anderen Effekt erzielen. Wir setzten nun in die Effekt-Funktion hide() & show() jeweils eine Zahl.

$(function(){
	$("#klapp").click(function(){
		if($(".klappen").css("display") != "none")
		{
			$(".klappen").hide(1000);
		}
		else
		{
			$(".klappen").show(1000);	
		}
	});
});

[ 3 ] Es gibt aber noch eine weitere Möglichkeit, ein Element Auf- bzw Zuklappen zu lassen. Ändern wir doch mal show(1000) zu slideDown(1000) und hide(1000) zu slideUp(1000).

$(function(){
	$("#klapp").click(function(){
		if($(".klappen").css("display") != "none")
		{
			$(".klappen").slideUp(1000);
		}
		else
		{
			$(".klappen").slideDown(1000);	
		}
	});
});

[ 4 ] Lassen wir das Div doch mal Aus- / Einfaden. Also ändern wir wieder die Effekt-Funktionen.

$(function(){
	$("#klapp").click(function(){
		if($(".klappen").css("display") != "none")
		{
			$(".klappen").fadeOut(1000);
		}
		else
		{
			$(".klappen").fadeIn(1000);	
		}
	});
});

Wie Ihr seht, kann mit ganz wenig Code große Effekte erzielen. Experimentiert doch ein bisschen herum!

Lg,
euer Flo