Es geht natürlich um den heißen Scheiß: Ajax. Mit aktiviertem JavaScript soll bei einem Klick auf einen Eintrag der Eintrag dynamisch nachgeladen werden anstatt auf die Einzelansicht zu verlinken. Mit TYPO3 und Typoscript baut man sich dafür ein weiteres Page Objekt und passt die Ausgabe an, darüber hatte ich schon berichtet. Bei WordPress gibt es aber kein Typoscript.

Mein erster Gedanke war ein alternatives Template per URL Parameter zu laden in dem nur die Inhalte angezeigt werden. Die Anleitungen waren allerdings allesamt nicht besonders ergiebig. Der nächste Ansatz war den gesamten Inhalt abzufragen und per jQuery nur den entsprechenden Container mit den Inhalten auszugeben. Das finde ich aber irgendwie unelegant.

Und nach einmal drüber schlafen kam dann der rettende und sehr simple Einfall.

functions.php

Mit meinem CakePHP verwöhntem Blick würde ich die functions.php mal mit einer Art Controller vergleichen. Der Aufruf geht also durch diese Datei, in der Variablen gesetzt und Funktionen definiert werden können, die anschließend in den Views zur Verfügung stehen.

Und hier steckt schon das ganze Geheimnis, ist die Servervariable HTTP_X_REQUESTED_WITH gesetztz, handelt es sich um eine asynchrone Anfrage:

if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {

  $ajax = true;

}

else {

  $ajax = false;

}

Die Views

In den üblichen Verdächtigen des Themes, damit meine ich die single.php, page.php, index.php usw. steht jetzt die Variable $ajax zur Verfügung. Bisher fand ich die Arbeitsweise von WordPress nicht sehr elegant in jeder Datei Header, Sidebar und Footer einbinden zu müssen, aber jetzt finde ich sie gut. Denn wenn bei einem Ajaxaufruf nur der Inhalt zurück gegeben werden soll, dann lässt man das überflüssige HTML Gerüst einfach draußen:

if(!$ajax) {

  get_header();

}

Fazit

Das war einfach. WordPress ist ein tolles System und ich kann es kaum erwarten endlich die neue Version 3.0 stable zu sehen. Wie das ganze drum herum mit jQuery funktioniert, steht im bereits oben erwähnten Eintrag zu TYPO3. Frohes bloggen!

Anders als bei TYPO3 wird der Inhalt nicht über Marker in den HTML Code transportiert, sondern direkt über dynamischen PHP Code. Diese Art der Templates finde ich sehr gut, weil man auf verschiedene Bedingungen einfacher reagieren kann als, z.B. mit Typoscript.

Allerdings erfordern solche Templates auch mehr Konsequenz vom Entwickler, denn Präsentation und Logik gehören nicht vermischt.

Jetzt kommt eine Übersicht der praktischen Kurzschreibweisen zum Verwenden in eigenen Projekten, WordPress oder TYPOlight.

Ausgaben

Um Variablen auszugeben wird das = Zeichen benutzt.

<?=$welcome_msg?>

<? echo $welcome_msg; ?>

Bedingungen

Die gute alte If-Abfrage kann auf zwei Weisen dargestellt werden. Die erste ist für Fälle in denen mehr Inhalt ausgegeben werden soll.

<? if($user == "admin"): ?>

  Hallo <b>Admin</b>, hier sind deine <a href="#" class="admin">Optionen</a><br>

  <div id="status"><h1>Projektstatus</h1></div> <!-- usw. usf. -->

<? endif; ?>

Alternativen lassen sich darin natürlich auch einbauen

<? if($user == "admin"): ?>

  ... viele Ausgaben ...

<? elseif($user == "redakteur"): ?>

  --- andere Ausgaben ----

<? else: ?>

  ___ alternative Ausgaben ___

<? endif; ?>

Die zweite ist noch kürzer. Wenn man keine komplexen Ausgaben hat sondern nur, z.B. einzelne Worte ausgeben möchte

<?=$owner == $user ? "meins" : "fremd"?>

Die Syntax ist etwas gewöhnungsbedürftig, aber schnell gelernt: Der erste Block ist die Abfrage, sie wird beendet vom Fragezeichen welches auch gleichzeitig den Block einleitet der bei erfüllter Bedingung ausgeführt wird. Abgeschlossen und gleichbedeutend mit else folgt dann der Doppelpunkt und die Else-Anweisung. Alle Teile müssen vorhanden sein, sonst funktioniert es nicht.

Ausgeschrieben ist die Abfrage gleichbedeutend mit:

<? if($owner == $user) {

  echo "meins";

}

else {

  echo "fremd";

}

Ein praktisches Beispiel wäre z.B. innerhalb einer Schleife:

<li class="<?=$i%2 == 0 ? "even" : "odd"?>"><=$content?></li>

Gut, dann weiter mit

Schleifen

Die Syntax der Schleifen ist im Prinzip genau die selbe. Die For-Schleife:

<? for($i = 0; $i < 10; $i++): ?>

  Zeile <?=$i?> von 10

<? endfor; ?>

hat die gleiche Syntax wie die Foreach-Schleife:

<? foreach($array as $key => $value): ?>

  Array: <?=$key?> = <?=$value?><br>

<? endforeach; ?>

Und die While-Schleife darf natürlich auch nicht fehlen:

<? while($row = mysql_fetch_object($hdl)): ?>

  Zeile <?=$row->uid?> gehört <?=$row->name?><br>

<? endwhile; ?>

Fazit

Das waren Kurzschreibweisen in PHP. Sind schon sehr schmal und können für ein übersichtliches Template sorgen, wenn der fleißige Entwickler sich an die Einrückung hält und Logik mit Präsentation nicht vermischt wird. Frohes Nachdenken!

Zugegeben, ich bin nicht der größte Mathefan und bin heilfroh, dass soviel im Internet ohne funktioniert. Aber man darf sich bekanntlich nicht vor Wissen verschließen und wenn man dahinter gekommen ist, macht es ja auch Spaß!

So kürzlich geschehen mit der Funktion Modulo! Ich erinnere mich an all die dunklen Stunden, in denen ich halbherzig versucht habe das zu verstehen, aber es wollte einfach nicht so wie ich. Aber jetzt habe ich es raus und kann nur empfehlen: lest den Beitrag wenn ihr diese Operation noch nicht kennt oder versteht.

Einfach gesagt ist Modulo teilen durch ganze Zahlen und den Rest zurück kriegen. Der Operator ist in PHP und JavaScript das Prozentzeichen (%). So kann das Ergebnis aussehen:

0 modulo 5 = 0
1 modulo 5= 1
2 modulo 5= 2
3 modulo 5 = 3
4 modulo 5 = 4
5 modulo 5 = 0
6 modulo 5 = 1
7 modulo 5 = 2
8 modulo 5 = 3
9 modulo 5 = 4

Der PHP Code der das erzeugt hat ist der hier:

<?

  for($i = 0; $i < 10; $i++) {

  [tab]echo "$i modulo 5 = ". ($i%5). "<br>";

  }

?>

Wenn einem jetzt nicht auf Anhieb ein Anwendungsfall einfällt, dann sollte man sich überlegen was dieser Code tut:

<?

  $a = 0;

  $class = "";

  for($i = 0; $i < 10; $i++) {

  [tab]$a++;

  [tab]if($a > 1)

  [tab]  $a = 0;

  [tab]$class = $a == 1 ? "even" : "odd";

  [tab]echo "$i modulo 5 = ". ($i%5). " ($class)<br>";

  }

?>

<?

  $class = "";

  for($i = 0; $i < 10; $i++) {

  [tab]$class = $i%2 ? "even" : "odd";

  [tab]echo "$i modulo 2 = ". ($i%2). " ($class)<br>";

  }

?>

dd

$("ul li:even").addClass("even");

Und wenn dieses Funktion bei mehreren Listen die verändert werden sollen anfängt rumzuspinnen, dann muss man sich klar machen, dass der Selektor $("ul li:even") alle zweiten Listenelemente auf der Seite trifft. Unabhängig davon in welcher Liste sie sich befinden.

Die Lösung ist mal wieder einfach: $("ul") selektiert alle Listen und dann behandeln wir jedes Listenelement einzelnd:

$("ul").find("li:even").addClass("zebra");

Viel Spaß und mit Mathe jQuery!

Diesmal gehts um den Location Hash. Das ist der Teil der URL der mit einer Raute (#) von der restlichen Adresse getrennt ist. Bekannt von Sprungmakern (interne Seitenverweise) gewinnt er im Zusammenspiel mit neusten JavaScripttechnologien immer mehr an Bedeutung.

HTML Grundlagen

Erstmal eine kurze Betrachtung ohne JavaScript. Der einfache Hash einer URL wird vom Browser interpretiert und der sichtbare Bereich der Seite springt zu dem Element dessen ID angegeben ist. Zum Beispiel für Überschriften praktisch.

<h1 id="wichtig">Es ist wichtig</h1>

<p>bla bla bla ...</p>

<h1 id="unten">Weiter unten</h1>

<p>noch mehr bla bla ...</p>

<a href="#wichtig">Zur wichtigen Überschrift</a>

<a href="#unten">Zur unteren Überschrift</a>

<a href="zweite-seite.html#irgendwo">Gehe nach irgendwo</a>

Zusammenspiel mit jQuery

Jetzt kommt das Lieblingsframework ins Spiel! Hier steht der Wert aus dem Hash als Attribut zur Verfügung! Ich benutze die gleiche HTML Grundlage wie im ersten Tutorial (man beachte den Sprungmarker ).

jQuery(function($) {

  $(".menu a").click(function() {

  [tab]alert($(this).attr("hash"));

  [tab]return false;

  });

});

Und was soll man damit machen? Ajaxanwendungen bauen!! Wenn für jeden Link ein aussagekräftiger Hashwert zur Verfügung steht, dann wird der einfach an ein serverseitiges Script weitergeleitet und das kann damit tun was immer notwendig ist. Ich bevorzuge das Folgende: Es gibt einfach alle übergebenen Variablen aus.

<?

  echo "<pre>", print_r($_REQUEST), "</pre>";

?>

Jetzt ohne viel Gerede die komplette Klickfunktion.

$(".menu a").click(function() {

  $(".menu a.active").removeClass("active");

  $(this).addClass("active").blur();

  

  $.ajax({

  [tab]url: "remote.php",

  [tab]data: {gib_mir: $(this).attr("hash").substr(1)},

  [tab]type: "POST",

  [tab]dataType: "HTML",

  [tab]

  [tab]success: function(remote_html) {

  [tab]  $("#response").hide().html(remote_html).fadeIn();

  [tab]},

  [tab]error: function() {

  [tab]  alert("Mist verdammter, etwas hat nicht geklappt  ");

  [tab]}

  });

});

Die ersten zwei Zeilen stammen aus dem ersten Tutorial und dienen nur der besseren Darstellung.
Dann kommt die Ajaxanfrage. Das ist ein Objekt mit einer ganzen Reihe Eigenschaften, die da wären:

• url gibt die aufzurufende Datei an.
• data ist ein neues Objekt mit allen Daten die übergeben werden sollen. jQuery kümmert sich, je nach Typ der Anfrage, um das korrekte verpacken und verschicken.
  Das Objekt hat eine Eigenschaft: gib_mir steht dann als Name im PHP Script zur Verfügung ($_POST["gib_mir"]). Der Wert ist das Attribut hash aus dem angeklickten Link. Substr(1) schneidet das erste Zeichen ab - das ist immer die Raute und die brauchen wir nicht mehr.
• type gibt den Datenübertragungsform an. Man könnte sagen GET bei kurzen Inhalten, POST bei langen. Mehr Informationen darüber bringt Google.
• dataType sagt jQuery welche Daten erwartet werden. Das sollte man nie vergessen, denn nach dieser Angabe wird die Variable für die Funktion hinter success formatiert.
• success ist die Funktion die ausgeführt wird wenn alles geklappt hat. In den Parametern ist die Antwort vom Script, hier also in remote_html.
  In dieser Funktion steht nur eine Zeile, die mal wieder die ganze Schönheit und Macht von jQuery demonstriert. Stück für Stück:
  $("#response") wählt das Element mit der ID response aus (z.B. ein DIV Container)
  hide() blendet ihn aus
  html() schreibt neuen HTML Code hinein
  und mit fadeIn() wird er sanft dem Benutzer wieder eingeblendet.
• error ist schließlich noch eine Funktion die ausgelöst wird wenn etwas nicht geklappt hat.

Das war Ajax! Ganz einfach. Die Ausgabe sieht z.B. so aus:

Array

(

  [gib_mir] => punkt4

)

1

$(location).attr("hash", $(this).attr("hash"));

return false;

Das Tolle an der Sache

Indem der Hash verändert wird, ist es möglich die URL zu verschicken, zu speichern und im Blog zu verlinken. Blöd allerdings, dass dabei nichts passiert.

Doch keine Panik, zwei Zeilen helfen weiter!

if($(location).attr("hash"))

  $("a[hash="+$(location).attr("hash")+"]").click();

Die (ich nenne sie mal) Event-Funktionen, z.B. click, mouseover, mouseup, dblclick usw., funktionieren auf zwei Arten: wird eine Funktion als Parameter übergeben, wird diese ausgeführt wenn das Event vom Benutzer ausgelöst wird (siehe oben $("a").click(function() { alert("Hallo A!"); });). Wird kein Parameter übergeben, löst jQuery die Funktion aus - wie als hätte der Benutzer darauf geklickt.

Und das hat zur Folge: Alle Links funktionieren! Die Seite reagiert auf den Hash und einem Verschicken steht nichts mehr im Wege!

Fazit

Mit Hilfe des Location Hash kann man Ajaxanwendungen bauen, die wissen an welcher Position der Benutzer einsteigen will. War das Tutorial verständlich?

Das Erste dreht sich um Menüs, bzw. Navigationen. Das JavaScript ist unaufdringlich und ermöglicht dem Nutzer durch ein paar einfache Tricks ein besseres Erlebnis. Benutzer ohne aktiviertes JavaScript werden nicht ausgeschlossen. Es geht um die Funktionen hover und click und ein bisschen CSS3. Fragen sind gern gesehen in den Kommentaren und jQuery auf jeder Seite!

Ziele festlegen

Bevor man mit einem IT-Projekt beginnt, ist es immer sinnvoll sich darüber klar zu werden, was erreicht werden soll. Und wenn mit Kunden gearbeitet wird, dann sollte man das schriftlich festhalten und solange darüber reden bis allen Parteien klar ist, was an welcher Stelle gemeint ist. Schwierig, aber man muss es versuchen!

In diesem Tutorial soll die Navigation verbessert werden, unaufdringlich und für jedes Projekt einsetzbar. Nebenbei lernt man die Grundfunktionen von jQuery kennen.

HTML Grundgerüst

Den Anfang bildet natürlich ein Menü. Für diverse Image Replacement Techniken, sonstigem CSS Schnickschnack bis hin zur IE Kompatibilität, nehme ich mal folgendes, universelles Grundgerüst, welches aus jedem CMS herauszukriegen sein sollte, sei es TYPO3, Typolight oder Drupal.

<ul class="menu">

  <li>

  [tab]<a href="#punkt1" class="active"><span>Punkt 1</span></a>

  </li>

  <li>

  [tab]<a href="#punkt2"><span>Punkt 2</span></a>

  </li>

  <li>

  [tab]<a href="#punkt3">Punkt 3</a>

  </li>

  <li>

  [tab]<a href="#punkt4">Punkt 4</a>

  [tab]<span>Ein Hinweistext!</span>

  </li>

</ul>

Diese Menü soll funktionieren, ohne dass JavaScript benötigt wird, bevor man anfängt. Das gleiche HTML als TYPO3 Template könnte so aussehen:

<ul class="menu">

  ###MAINMENU###

</ul>

<div id="content">

  ###CONTENT###

</div>

Das jQuery Grundgerüst

Nach dem Einbinden des Frameworks (zu Testzwecken oder wenn keine aktuelle Version zur Hand ist, auch gerne vom allmächtigen Googleserver: http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js) braucht man ein Plätzchen für das eigene Script. Entweder im Kopf des HTML Dokuments oder in einer externen Datei.

Gestartet wird immer mit einem simplen Hallo Welt.

jQuery(function($) {

  alert("Hallo Welt!");

});

Wird man beim Neuladen der Seite nicht von einer fröhlichen Alertbox begrüßt, muss man prüfen, ob alle JavaScripte geladen sind. Das geht am schnellsten mit Firebug und aktiviertem Scriptmodul. Hier testet man nach und nach ob alle Scripte vorhanden sind.

Mehr Klassen

Mit :hover, :active, :focus und :link gibt es schon ein paar Möglichkeiten für Links, aber wenn es um die ganzen Listenelemente geht, hört es (z.B. im IE6) schon wieder auf. Aber nicht mit jQuery! Die Funktion hover gibt uns genau das was wir brauchen.

$(".menu li").hover(function() {

  $(this).addClass("hover");

}, function() {

  $(this).removeClass("hover");

});

Im Schlüsselwort this ist das Element gespeichert, welches die Funktion gerade ausgelöst hat. Mit der Übergabe an jQuery $(this) stehen dann wieder alle gewohnten Funktionen zur Verfügung.

CSS3 Selektoren für jeden Browser

Der Hinweistext im span soll nur bei Mouseover gezeigt werden. Das lässt sich schnell und einfach per CSS lösen.

li>span {

  display:none;

}

li:hover>span {

  display:inline;

}

Das erste Problem ist das > Zeichen. Die Anweisung trifft auf alle Spanelemente zu, die sich direkt in einem Listenelement befinden. Würde man es weglassen, würde es auf alle Spanelemente zutreffen, die sich in einem Listenelement befinden. Dies hätte zur Folge, dass Punkt 1 und 2 ebenfalls verschwinden würden.

Die Lösung ist super einfach! jQuery unterstützt die meisten Eigenschaften von CSS3 und kümmert sich alleine darum, dass sie in jedem Browser funktionieren.

$("li>span").hide();

Um den Hinweistext wieder sichtbar zu machen, wird die hover Funktion erweitert. Die meisten Funktionen haben als Rückgabewert wieder ein jQuery-Objekt. Das bedeutet man kann sie einfach verknüpfen. Bei Mouseover sieht das z.B. so aus:

$(this).addClass("hover").find(">span").show();

Die Funktion bei Mouseout sieht, bis auf die letzte Funktion, genau so aus.

Der aktive Menüpunkt

Wenn das verwendete CMS dem Link die Klase active zuweist wenn sie angezeigt wird, dann ist es ein schöner Effekt, diese Klasse schon vor dem Neuladen  der Seite zuzuweisen:

$(".menu a").click(function() {

  $(this).addClass("active");

});

$(".menu a").click(function() {

  $(".menu a.active").removeClass("active");

  $(this).addClass("active").blur();

});

Fazit

Das war ein kleiner Ausblick in das jQuery Universum. Eigentlich wollte ich noch viel mehr schreiben, aber das ging schon länger als geplant. Deshalb mache ich lieber Schluss, freue mich auf Fragen und empfehle jedem Webentwickler sich mit jQuery auseinander zu setzen. Es macht Spaß und hier kommt bald die nächste Anleitung!

Nach dem ich mal wieder über den Appell an Webentwickler gestolpert bin, beginne ich meinen ersten zweiten Eintrag dieses Jahres mit einem tollen Thema welches ich zwischen den Jahren entdeckt habe: Die effektive Kommunikation zwischen TYPO3 und jQuery dank Ajax.

Möglich macht das die Funktionalität der eID seit TYPO3 Version 4 und die geniale Handhabung vom Lieblingsframework mit JSON. Eingesetzt hab ich es in einer tollen, neuen Extension die wir entwickelt haben und die hoffentlich bald das Licht der Welt erblicken wird. Das wird dann gesondert gefeiert.

Um was geht es?

Die Eingaben eines Benutzers werden asynchron, d.h. ohne die Seite neuzuladen, an den Server übergeben. Der verarbeitet sie und liefert ein Ergebnis zurück, welches von jQuery verarbeitet und dargestellt wird.

Gebraucht wird diese Technik um zum Beispiel registrierte Benutzer anzuzeigen. Ähnliches habe ich schon beschrieben im Beitrag über das nachladen kompletter Seiteninhalte. Dort wurde ein neuer Seitentyp angelegt. Das hat allerdings den Nachteil das die ganze Seite gerendert werden muss. Wir können schon wesentlich früher den Renderingprozess abbrechen und zügig ein Ergebnis bekommen.

Vorbereitungen mit TYPO3

Als erstes bereiten wir TYPO3 darauf vor und erstellen eine neue Extension mit dem Kickstarter. Ich habe ein Frontend Plugin erstellt und die üblichen Spracheinstellungen gewählt. Was man will ist also schnell zusammen geklickt.

Und jetzt wirds spannend: In der ext_localconf.php registrieren wir die eID (das e steht für Extension):

$TYPO3_CONF_VARS['FE']['eID_include']['MEINE_eID'] = 'EXT:kiwi_database/pi1/MEINE_eId.php';

Es geht um das Frontend, eine neue eID wird eingebunden, für die eben erstellte Erweiterung. MEINE_eID ist durch einen guten Namen zu ersetzen (Extensionkey vielleicht).
Im Wert der Variable ist der Pfad zum Script angegeben welches benutzt wird. EXT: zeigt auf den Ordner in dem die Extensions gespeichert sind, dann weiter zu unserer Erweiterung und zur speziellen Datei.

Ist diese Datei angelegt, einfach mal ein <? echo "Hallo Welt"; ?> darin speichern und zum Testen aufrufen, über den neuen Parameter eID: www.mein-typo3-projekt.de/index.php?eID=MEINE_eID. Wenn das auf eine weiße (super schnelle) Seite weiterleitet auf dem die Welt begrüßt wird, hat alles geklappt.

Wenn nicht, dann lohnt sich ein Blick ins Error Log von PHP und einfach weiter probieren (viel Glück).

Drei Dinge sind für die Datei MEINE_eId.php wichtig:

1. Sicherheit

if (!defined ('PATH_typo3conf')) die ('Could not access this script directly!');

2. Datenbankzugriff

$feUserObj = tslib_eidtools::initFeUser(); // Initialize FE user object

tslib_eidtools::connectDB(); //Connect to database

echo "<pre>", print_r($GLOBALS["TYPO3_DB"]), "</pre>";

3. Die eigene Extension

Und damit kommen wir zu einer Einschränkungen. Es gibt kein cObj, da keine Seite aufgebaut wurde. Man kann zwar, ähnlich der Datenbank eins erstellen, aber das ist nicht nur kompliziert sondern hebt den Grund der Extension auf, da dann wieder eine komplette Seite gerendert wird. Das zur Folge das es nicht möglich ist die Benutzereinstellungen im Typoscript abzufragen. Ich empfehle die Auslagerung in die localconf.php.

require_once('typo3conf/ext/meine_ext/pi1/class.tx_meineext_pi1.php');

$obj = t3lib_div::makeInstance("tx_meineext_pi1");

Langsam Richtung JSON

In der Extension wird jetzt abgefragt, was abgefragt werden muss. Zugriff auf in der URL übergebenen Parameter erhählt man z.B. über $GLOBALS["_GET"]["PARAMETER_NAME"].

Am Ende sollte ein Array zur Verfügung stehen, welches alle Daten beinhaltet. Das wird in JSON umgewandelt:

$response = $obj->getAnswer($GLOBALS["_GET"]);

echo json_encode($response);

Fertig, auf zum Frontend

page.includeJS.file1 = fileadmin/template/js/jQuery.js

page.includeJS.file2 = fileadmin/template/js/jquery.meineext.js

$(document).ready(function() {
	// Das Abschicken des Formulars verhindern
	$("#assi").submit(function() {

		//Ajaxabfrage stellen
		$.ajax({
			url: "index.php",		// Achtung mit RealURL!
			type: "GET",			// Daten per GET verschicken
			data: {
				eID: "MEINE_eID",	// die erstellte eID
				input: $("#assi input[type=text]")	// Benutzereingabe
			},
			dataType: "json",		// das gibts zurück

			// Es hat funktioniert?
			success: function(response) {
				// Code der ausgeführt wenns geklappt hat
				// !! Wesentliches Ding !!
			},

			// Schade, es war ein Fehler
			error: function(error) {
				alert("Sorry, hat nicht funktioniert");
			}
		});

		//Damit das Formular nicht doch noch abgeschickt wird
		return false;
	});
});

Ich mag jQuery Code! Nach einiger Zeit hat man sich an die wilden Klammern gewöhnt und kann nicht mehr damit aufhören. Die Kommentare erläutern die einzelnen Dinge, oder die offizielle Doku, wir wenden uns lieber dem wesentlichen Ding zu!

Verarbeitung von JSON Objekten zu HTML mit jQuery

Damit die Funktionen besser nachvollzogen werden können, ein Beispiel: So sieht die Funktion getAnswer() vereinfacht aus:

function getAnswer() {
	$a = Array(
		0 => Array("name" => "paul", "like" => "Webstandards"),
		1 => Array("name" => "ramon", "like" => "Bier"),
		2 => Array("name" => "max", "like" => "Sport")
	);
	return $a;
}

Das wird als JSON Objekt sowas:

[{"name":"paul","like":"Webstandards"},{"name":"ramon","like":"Bier"},{"name":"max","like":"Sport"}]

Im wesentlichen Teil der jQuery Ajaxabfrage steht dieser String jetzt als Objekt zur Verfügung. Testen lässt sich das über die Firebug Konsole mit console.log(response). Das und alles folgende spielt sich in der Funktion success(response) ab!

Jedes Array verfügt über die Eigenschaft length, es lässt sich also herausfinden wieviele Elemente vorhanden sind.

if(response.length > 0) {

}

Angenommen es gibt auf der Seite eine Liste (<ul>) mit der ID answer, dann wird diese mit neuen Listenelementen versorgt:

var new_content = "";
$.each(response, function(i, row) {
	new_content+= "<li><strong>"+row.name+"</strong> mag "+row.like+"!</li>";
});
$("#answer").html(new_content);

Die Funktion, welche auf jede Zeile angewendet wird, erwartet zwei Parameter: i ist der Indikator welcher die aktuelle Position beinhaltet, row ist das aktuelle Objekt. Die Schlüssel aus dem PHP Array sind hier die Namen der Eigenschaften, herrlich oder?

Fertig!

Um die Besucher ohne JavaScript nicht außen vor zu lassen muss noch sichergestellt werden, dass die Extension bei "normal" erhalten der Daten die gleiche Ausgabe erzeugt. Das dürfte bekannt sein?!

Um sich den Stress mit einem Template zu sparen gibt es dann in ein paar Tagen irgendwann meine neue Extension! Bis dahin wünsche ich erfolgreiches Programmieren in 09!

Herrlich, oder? Das ist alles kein Problem mit TYPO3 und jQuery. Undzwar mit Hausmitteln, ohne ein einziges Plugin. Eine Demo gibt es auf meiner privaten Seite unter Paul-Lunow.de, die ausführliche Anleitung hier im Blog.

TYPO3 vorbereiten

In dem Beitrag zum automatischen Infofenster für TYPO3 bin ich schon auf die Technik eingegangen: Wir erstellen einen neuen Seitentyp mit Typoscript um nur die Inhalte bei einem Aufruf zu bekommen.

nurinhalt = PAGE
nurinhalt {
  typeNum = 101
}

Die neue Seite heißt nurinhalt und bekommt die Nummer 101 zugewiesen. Man achte allerdings darauf keine doppelten Nummern zu vergeben!

nurinhalt.10 < page.10

Mit dieser Anweisung wird der Inhalt von der normalen Seite in das neue Objekt kopiert.

nurinhalt.10.template.file = fileadmin/template/index-nurinhalt.html

Jetzt weisen wir der Seite ein neues Template zu. Hier kann man noch ein bisschen rumspielen und einige Extrasachen machen wenn man möchte, ist ein ganz normales Template.
In meiner Version besteht es nur aus einer Zeile:

###INHALT###

Mehr als den Inhalt will ich nicht haben.

Nach dem das Typoscript gespeichert, das neue Template erstellt und der Cache gelöscht ist, sollte man die Ausgabe einmal testen: www.meine-typo3.de/praesenz/index.php?type=101. Funktioniert? Gut.

Allerdings gibts noch eine Kleinigkeit: Die Seite kommt im kompletten HTML Gerüst daher. Zum Glück können wir das unterbinden:

nurinhalt.config {
   #entfernt diverse header angaben
   disableAllHeaderCode = 1 

   #standard doctype deaktivieren
   disableCharsetHeader = 1

   #entfern die HTML Kommentare
   disablePrefixComment = 1
}

JavaScript vorbereiten

Zurück zum "richtigen" Frontend. jQuery muss eingebunden werden und ich empfehle eine Datei Namens actions.js, für unser zu erstellendes Script. Das geschieht wieder im Standardseitentyp (bei mir stets page).

$(document).ready(function() {
	alert("Hallo!");
});

Seite neuladen und wenn wir mit einem (fröhlichen) Hallo! begrüßt werden, hats funktioniert und wir ersetzen das Alert durch unser Script.

Im ersten Schritt muss der Klick auf ein Menüpunkt abgefangen werden und verhindert das die neue Seite geladen wird:

$("#menu a").click(function() {
  url = $(this).attr("href");
  alert("Geklickt auf "+url);
  return false;
});

Drei Dinge passieren bei einem Klick auf einen Link im Objekt, welches die ID menu hat:

Der Variable url wird das Attribut href aus dem Link zugewiesen, zur späteren Verwendung (z.B. index.php?id=123).

Mit alert wird überprüft ob es funktioniert hat.

return false; verhindert das der Browser die Seite lädt. Funktionierts?

Gut! Dann laden wir den Inhalt vom Server. Dafür wird eine neue Funktion erstellt, welche eine URL erwartet und diese lädt.

$(document).ready(function() {
	//Zeug von oben...
});

function getContent(url) {
	//Hier kommt der Ajaxaufruf
}

Die neue Funktion getContent() ersetzt die Alertanweisung aus dem vorherigen Schritt. Der vollständige Aufruf sieht dann so aus:

$(document).ready(function() {
  $("#menu a").click(function() {
    url = $(this).attr("href");
    getContent(url);
    return false;
  });
});

Dann mal Ajax. Ist genauso einfach:

$.ajax({
	//erweitere aufzurufenden Link
	url: url+"&type=101",
	dataType: "html",
	//wenn es geklappt hat
	success: function(html) {
		//Inhalt reinschreiben und anzeigen
		$("#content")
			.css("display", "none")
			.html(html)
			.fadeIn();
	}
});

Das sieht doch schon wieder etwas professioneller aus. Der übergebenen url wird ein &type=101 angehängt um aus TYPO3 nur den Inhalt herauszuholen. Mit der Eigenschaft dataType zeigen wir an, dass eine HTML Seite als Rückgabewert erwartet wird.

Wenn das geklappt hat wird das Element mit der ID content ausgewählt. Dann folgt die geniale Verkettung von Funktionen:
- Das Element wird versteckt (würde auch mit hide() funktionieren)
- Das Element kriegt einen neuen Inhalt (den gerade geladenen)
- Und wird eingeblendet!

Fertig! Was für ein Erlebnis für den Benutzer. Und ohne JavaScript bleibt die Seite wie gewohnt nutzbar.

Ähmmm... nicht so ganz? Dann auf zur Fehlersuche: Der wichtigste Ansatzpunkt ist natürlich Firebug. Man aktiviert die Konsole und kann sich alle asynchronen Datenbewegungen ansehen. Vielleicht wird eine nicht vorhandene URL aufgerufen, oder der Server versteht die Anfrage nicht. Dann muss man seine Ajaxabfrage verbessern. Mehr Informationen dazu liefert die offizielle jQuery Seite (und noch dutzend andere).

Verbesserung 1: Sanftes Ausblenden

Damit der alte Inhalt nicht einfach verschwindet, benutzen wir eine Callback Funktion von jQuery: ajaxStart.

$("#content").ajaxStart(function() {
	$(this).fadeOut(function() {
		$(this).addClass("loading");
	});
});

Diese Funktion wird aufgerufen wenn eine Ajaxabfrage gestartet wird, blendet den Inhalt aus und fügt die Klasse loading hinzu was aber eigentlich nichts bringt, denn das Element ist ja ausgeblendet (aber für Vollständigkeit).

Verbesserung 2: Bookmarks und Vor- und Zurückknöpfe

Beim dynamischen nachladen hat man das Problem das sich die Adresszeile nicht ändert, der Browser also nicht mitkriegt das eine neue Seite geladen wurde. Außerdem kann man keinen Link auf eine bestimmte Seite setzen.

Das müssen wir ändern! Dafür benutzen wir Anker, die sind von der URL durch eine Raute getrennt. Mit dem JavaScript Objekt location.hash können wir die schreiben und lesen.

Als erstes schreiben: In der Success Funktion vom Ajaxaufruf fügen wir eine Zeile hinzu.

location.hash = url;

Damit kriegen wir dann folgende Adresse, nach dem ein neuer Inhalt geladen wurde:

www.meine-typo3.de/praesenz/index.php?id=123#index.php?id=321

Und diese Angabe müssen wir beim laden der Seite auch wieder abfragen:

if(location.hash) {
	x = location.hash;
	getContent(x.slice(1));
}

Ist ein Anker vorhanden, wird er der Variable x zugewiesen. Danach rufen wir unsere schon vorbereitete Funktion getContent auf und der Inhalt wird geladen!

Mit der Funktion slice(1) wird das erste Zeichen herausgeschnitten (bzw. alles andere), denn die Raute würde unser Script verwirren.

Verbesserung 3: Verwendung von RealURL

Ja, auch das ist möglich und macht die Seite noch viel schöner. Der erste Schritt dafür ist den neuen PageType über RealURL ansprechbar zu machen. Ich denke da an

www.meine-typo3.de/praesenz/start/ajax.html

Mit der Version 2.5 ist es (endlich) ein Kinderspiel: Die Datei localconf.php wird um ein paar Zeilen erweitert.

$TYPO3_CONF_VARS['EXTCONF']['realurl']['_DEFAULT'] = array(
	'pagePath' => array (
		'type' => 'user',
		'userFunc' => 'EXT:realurl/class.tx_realurl_advanced.php:&tx_realurl_advanced->main',
		'spaceCharacter' => '-',
		'expireDays' => 3,
		'rootpage_id' => '1',
	),
	'fileName' => array (
		'defaultToHTMLsuffixOnPrev' => 1,
		'index' => array(
			'ajax.html' => array(
				'keyValues' => array ('type' => 101)
			),
		),
	),
);

Anschließend sind noch ein paar Dinge im JavaScript zu verändern. Weil ich langsam genug vom Schreiben habe, kommt jetzt das komplette Script mit einigen erklärenden Kommentaren.

$(document).ready(function() {
	//Auf den ggf. übermittelten Anker reagieren
	if(location.hash) {
		x = location.hash;
		getContent(x.slice(1)+".html");
	}

	//Links per Ajax nachladen
	//$("a:not([href^='http://'])").click(function() {
	$("#menu a").click(function() {
		url = $(this).attr("href");
		getContent(url);
		$(this).blur();
		return false;
	});

	//Informieren das etwas passiert
	$("#content").ajaxStart(function() {
		$(this).fadeOut(function() {
			$(this)
				.text("")
				.addClass("loading")
				.fadeIn();
		});
	});

});

/*
 *	Holt den Inhalt vom Server
 */
function getContent(url) {
	$.ajax({
	//erweitere aufzurufenden Link
	url: url.replace(/\.html/, "/ajax.html"),
	//wenn es geklappt hat
	success: function(html) {
		//Inhalt reinschreiben und anzeigen
		$("#content")
			.removeClass("loading")
			.css("display", "none")
			.html(html)
			.fadeIn();
		//Adresszeile aktualisieren
		location.hash = url.replace(/\.html/, "");
	}
	});
}

Fazit

jQuery und TYPO3 bieten mal wieder alles an was man sich wünschen kann. Eine funktionierende Demo befindet sich auf meiner Seite.
Über Kommentare und Verbesserungsvorschläge würde ich mich sehr freuen.

Bis dahin frohes Programmieren!

Dabei konnte ich die ganze Zeit lächeln weil es mit jQuery so viel Spaß macht zu arbeiten. Und das will ich natürlich niemandem vorenthalten. Eine einzige Zeile reicht aus um eine ganze Reihe Aktionen für alle Browser (auch den IE6) auszuführen. Man kann sehr einfach abfragen ob Checkboxen angeklickt sind oder nicht.

Außerdem habe ich eine tolle Funktion entdeckt um zu verhindern das auffahrende Elemente außerhalb des sichtbaren Bereichs liegen. Viel Spaß damit!

Verkette Funktionen nutzen

Um unaufdringliches JavaScript zu schreiben ist es wichtig die Eventhandler erst mit der Laufzeit des Scripts den Elemente zuzuweisen damit nicht JavaScript-fähige Betrachter dadurch nicht verwirrt werden.

Es gibt also ein Formular welches ohne JavaScript funktioniert und mit JavaScript noch besser wird. Hier ein vereinfachter HTML Aufbau:

<form>
	<fieldset>
		<label for="auswahl">Auswahl</label>
		<select name="auswahl" id="auswahl">
			<option>Bitte auswählen...</option>
			<option value=1>Nr 1</option>
			<option value=2>Nr 2</option>
		</select>
	</fieldset>

	<fieldset class="step2">
		<label for="name">Name</label>
		<input type="text" name="name" id="name">

		<label for="stadt">Stadt</label>
		<input type="text" name="stadt" id="stadt">

		<label for="cool">
			<input type="checkbox" name="cool" id="cool" value="true"> Ich kann jQuery
		</label>
	</fieldset>
	<input type="submit" value="Eintragen" class="submit">
</form>

Die Anforderung ist, nur wenn der Benutzer Nr 2 auswählt soll er seinen Namen und die Stadt angeben. Nutzer ohne JavaScript können alles ausfüllen.
Und jetzt kommt das magische jQuery ins Spiel:

$(document).ready(function() {
	$("form").
		.find(".step2").hide().end()
		.find("#auswahl").change(function() { step2($(this).val(); ) }).end()
		.find(":input:first").focus().end()
		.submit(function() { step3(); return false; });
});

Ist das nicht schön? Was ist hier passiert? Grundlegend selektieren wir mit $("form") das komplette Formular und alle enthaltenen Elemente. Die Funktion find() sucht aus diesem Stapel die gewünschten Elemente heraus auf welche die folgenden Funktionen angewendet werden.
Mit end() am Ende jeder Zeile wird diese Auswahl wieder aufgehoben, im Stapel befinden sich jetzt wieder alle Elemente.

In der ersten Zeile wird das zweite Fieldset ausgeblendet, bzw. alles was sich im Formular befindet und die Klasse .step2 hat.
Zeile Zwei legt einen Eventhandler auf die Selectbox mit der ID auswahl. Was passiert habe ich der besseren Übersicht in eine andere Funktion ausgelagert.
Zeile drei ist richtig cool. Mit dem Doppelpunkt werden Psydoklassen eingeleitet. :input steht für sämtliche Eingabefelder und :first für das erste Element. Wir selektieren also das erste Eingabefeld im Formular und geben diesem den Fokus. Aber vorsicht, auch Eingabefelder von Typ hidden fallen hier runter. Daran muss man denken.
Anschließend wird dem Formular noch ein Eventhandler zugewiesen der das Abschicken auffängt. Hier ist das return false; wichtig damit das Formular nicht wirklich abgeschickt wird.

Herrlich, oder?

Der richtige Umgang mit Checkboxen

Wenn man auf die Checkbox klickt soll was passieren. Mein erster Gedanke war einen Eventhandler auf die Checkbox zu legen: change(). Verändert sie sich, soll eine Aktion ausgeführt werden. Funktioniert so aber nur halb im Internet Explorer, weil der Event erst ausgelöst wird wenn sich der Fokus nicht mehr im Element befindet.
Lösung: nicht change() benutzen sondern click(). Das war einfach.

Eine Funktion wird aufgerufen, allerdings weiß man nicht ob die Box nun angehakt ist oder nicht. Also frage ich einfach mit $(this).val() den Inhalt ab, aber denkste: der ist immer gleich!
Lösung: Wir bedienen uns der Psydoklassen. Das geniale jQuery bringt zum einen die Psydoklasse :checked mit, zum anderen die Funktion is(). Das könnte man doch super kombinieren, oder?

$("#cool").click(function() {
	if($(this).is(":checked"))
		//Ist angehakt - mach was
	else
		//Ist nicht angehakt - machs wieder rückgängig (bitte)
});

Firefox machts, aber der Internet Explorer hält den abgefragen Ausdruck immer für wahr (leichtgläubig). Glücklicherweise ist der Workaround einfach:

if($(this).is(":checked") == "true")

Und schon macht der IE auch mit. Danke sehr!

Abfragen in den Selektoren

Eine Kleinigkeit war noch: Der Kunde wollte je nach Auswahl eine andere Beschreibung für eins der Felder. Kein Problem, da mit jQuery jedes Attribut in den Selektoren abgefragt werden kann:

if($("#einfeld").val() == "bla")) {
	$("label[for=anderesfeld]").text("Andere Bezeichnung");
}
else {
	$("label[for=anderesfeld]").text("Diese Bezeichnung");
}

Automatisch scrollen

Okay, fieldset.step2 soll sich ausrollen, wenn die richtige Option gewählt ist. Das Problem: auf kleinen Monitoren ist, dass es sich zwar schön ausrollt, aber der Benutzer kriegt davon nichts mit, weil es außerhalb des sichtbaren Bereichs liegt.

Aber es gibt nichts was mit jQuery nicht funktionieren würde. Die Lösung: Jedes Objekt besitzt eine Funktion scrollIntoView(). Die rufen wir einfach auf wenns fertig ist.

function step2() {
	$(".step2").slideDown(function() {
		$(this)[0].scrollIntoView();
	});
}

Zu beachten ist das [0], denn die Funktion steht nur einem einzelnen Objekt zur Verfügung, nicht einem ganzen Stapel von Objekten. Wenn man sich unsicher ist, einfach console.log($(this)); und solange rumklicken bis man die Funktion gefunden hat (im Firebug).

Da im Fieldset lauter Eingabefelder vorhanden sind, können wir die Zeile sogar noch ein bisschen schöner machen:

$(this).find(":input:first").focus()[0].scrollIntoView();

Geht es noch effektiver?!?!?! Ich glaube kaum. Und jetzt lächelnd wieder an die Arbeit.

Aber purer Inhalt ist noch nicht alles. Die Seite soll besser werden und die Besucher sollen etwas geboten kriegen. Deshalb dreht sich dieser Artikel darum wie man eine Seite besser machen kann. Es gibt ein paar Tipps und Tricks und Anleitungen die sich im täglichen "Netzleben" bewährt haben.

Mein neuer Freund Firebug

Firebug ist eine Extension für unseren Lieblingsbrowser: den Firefox. Sie erlaubt es eine Seite zu untersuchen, den Quelltext zu entdecken und verknüpfte CSS Regeln anzuzeigen. Es ist auch möglich Regeln zu deaktivieren, zu verändern oder neue hinzuzufügen (und noch viel mehr, das kann ich hier aber nicht alles beschreiben).

Also: Firebug installieren! Danach gibt es ein kleines Symbol rechts unten in der Statuszeile des Browsers. Ein Klick darauf öffnet das Fenster.

Hier ist das nützlichste Tool das sog. Untersuchen. Ein Klick darauf und anschließend auf ein Element in der Webseite zeigt es an, den Pfad und auf der rechten Seite die verknüpften CSS Regeln. Ein sehr praktisches Tool um zu sehen wie andere Leute etwas hinbekommen haben.

Es lohnt sich aufjedenfall mit diesem Ding rumzuspielen, ein optimales Tool um jede Menge zu lernen und auszuprobieren.

Statische Seiten imitieren

Ein tolles Programm bei der Webseitenerstellung ist mod_rewrite. Das ist ein Modul für den Apache Webserver. Mit dessen Hilfe ist es möglich die Adressen einer Seite zu verändern. Zur Zeit ist z.B. die Kontaktseite über folgende Adresse aufrufbar:

http://www.domain.de/index.php?page=kontakt

Aber es wäre viel schöner wenn es so aussieht:

http://www.domain.de/kontakt/

oder? Und genau dafür ist mod_rewrite gedacht. Wir machen aus dynamischen URLs statische. Dazu müssen wir eine neue Datei im Rootverzeichnis anlegen (dort wo die index.php liegt). Die neue Datei heißt .htaccess. Man beachte den führenden Punkt, das bedeutet die Datei ist versteckt. Im verwendeten FTP Programm muss man vielleicht noch angeben das versteckte Dateien angezeigt werden sollen.

Ist das geschafft, die neue Datei öffnen und folgende Zeilen hinein kopieren.

RewriteEngine on
RewriteRule ^([a-z0-9_-]*)/?$ index.php?page=$1

Folgendes passiert: in der ersten Zeile wird das Modul angeschaltet. Anschließend können soviele Regeln wie benötigt hinzugeschrieben werden.
Regeln beginnen immer mit RewriteRule, einem regulären Ausdruck der auf die aufgerufene Adresse angewendet wird und einem Ergebnis welches angezeigt wird. Möchte man also hallo zu hello umwandeln genügt RewriteRule hallo hello.
Aber so einfach machen wir es uns natürlich nicht! Mit der oben aufgeschriebenen Regel werden alle Aufrufe an die index.php weitergeleitet. Man kann auch Unterseiten unterstützen:

RewriteRule ^([a-z0-9_-]*)/([a-z0-9_-]*)/?$ index.php?page=$1&subpage=$2

Damit wird der erste Teil in die Variable page geschrieben, der zweite in subpage. Wer bei Google nach Anleitungen und Informationen sucht wird jede Menge finden.

Um zu überprüfen was an PHP übergeben wird, kann man sich das globale Array GET ausgeben lassen:

<?
  echo "<pre>", print_r($_GET), "</pre>";
?>

Dabei sollte dann etwas in diese Richtung bei rauskommen:

Array
(
    [page] => fotos2
    [subpage] => bla
)
1

Je nach dem was man aufgerufen hat.

Einen absoluten Pfad definieren

Wenn man eine externe CSS Datei eingebunden hat oder Bilder, wird man feststellen das diese mit aktiviertem URL Rewriting nicht mehr funktionieren. Das liegt daran, dass die HTML Seite jetzt "denkt" wir befänden uns in einem Ordner auf dem Webserver (http://www.domain.de/fotos/ sieht aus als wäre "fotos" ein Ordner).
Um das zu verhindern müssen wir bei sämtlichen Resourcen die von externen Quellen eingebunden werden einen absoluten Pfad vergeben. Der beginnt immer mit http:// und sollte nur einmal definiert werden, und das ganz am Anfang der index.php:

<?
  define("PFAD", "http://www.domain.de/");
?>

Mit diesem PHP Befehl definieren wir eine Konstante PFAD die jetzt überall zur Verfügung steht. Es ist wichtig sich zu merken ob man einen Slash am Ende schreibt oder nicht

Jetzt muss die Seite durchsucht werden und Links und externe Resourcen herausgefunden werden. Hier zwei Beispiele:

<link rel="stylesheet" href="style.css">
<a href="index.php?page=kontakt">Kontakt</a>

Beide Elemente sind relativ eingebunden (sie fangen nicht mit http:// an). Um die Konstante PFAD auszugeben bedienen wir uns der PHP Kurzschreibweise. Diese beginnt mit dem gewohnten PHP Tag <?, gefogt vom einem Ist-Gleich-Zeichen =, dem Konstantennamen und einem schließenden Tag.

<link rel="stylesheet" href="<?=PFAD?>style.css">
<a href="<?=PFAD?>kontakt">Kontakt</a>

Damit wird die oben eingegebene Adresse einfach an der entsprechenden Stelle ausgegeben und schon sind alle Verknüpfungen absolut. Um zu testen ob es funktioniert, ändern und den Quelltext der Seite anschauen. Man beachte auch die geänderte Adresse vom Link (nur noch kontakt - cool, oder?).

Warum wird nicht überall einfach die Domain eingetragen? In den ersten Teilen haben wir gelernt nichts doppelt zu schreiben. Und wenn jetzt überall http://www.domain.de steht, man dann aber feststellt, dass man domain.de ja mit der eigenen Adresse austauschen sollte, dann ärgert man sich über hunderte Stellen an der Änderungen vorgenommen werden müssen. Genauso wenn man eine neue Domain hat.
Sehr viel besser also wenn man in der ersten Zeile seiner index.php einmal die Änderung vornimmt und schon ist es für den gesamten Webauftritt erledigt.

Also nicht vergessen: Bei allen Verknüpfungen diese Kurzschreibweise voranstellen!

Hervorheben der aktuellen Seite

Wir haben ja unser Mini CMS, d.h. es wird eigentlich immer die gleiche Seite aufgerufen und nur dynamisch neuer Inhalt eingebunden. Trotzdem müssen wir den geneigten Besucher darüber informieren auf welcher Seite er sich gerade befindet.
Dafür bedienen wir uns wieder der Kurzschreibweise von PHP und fragen für jeden Link ab, ob er augerufen wurde. Ist dies der Fall fügen wir eine Klasse "aktiv" zum Link hinzu, über welche per CSS der Link entsprechend formatiert werden kann.

<a href="<?=PFAD?>kontakt" class="<?=$_GET["page"]=="kontakt" ? "aktiv" : ""?>">Kontakt</a>

So, das sieht jetzt schon relativ kompliziert aus, aber man gewöhnt sich daran. Von Anfang an:
<?= ist die einleitende Kurzschreibweise für einen PHP Befehl.
$_GET["page"] ist die Variable die wir im URL Rewriting angegeben haben und welche den Namen der aktuellen Seite beinhaltet.
== ist ein Vergleichsoperator. Der verknüpft zwei Werte miteinander und gibt true (=wahr) zurück, wenn beide Werte gleich sind (das ist eine Wissenschaft für sich).
"kontakt" ist der aktuelle Link und der Wert mit dem die Variable verglichen wird.
? "fragt" ob der vorangegangene Ausdruck wahr ist. Ist dies der Fall wird der nächste Ausdruck zurück gegeben:
"aktiv" ist der zurückgegebene Wert wenn die Variable den Inhalt kontakt hat.
: kennzeichnet den alternativen Teil, d.h. wenn der Ausdruck nicht wahr ist.
"" ist einfach nur ein leerer Ausdruck, weil wenn die Seite nicht gerade aufgerufen wird, dann kriegt der Link auch keine Klasse zugewiesen.
?> beendet den PHP Befehl wieder.

In der CSS Datei wird dann in einer weiteren Regel das Aussehen des aktiven Links definiert.

a.aktiv {
  font-weight:bold;
  font-size:20px;
}

In diesem Beispiel also fett und riesen groß.

Besucher zählen

Als Webmaster möchte man ja wissen wie viele Menschen sich auf der eigenen Seite herumtreiben. Dafür empfehle ich Google Analytics. Es wird gemunkelt das das Ranking einer Seite verbessert wird wenn man Google Analytics einsetzt, aber wie dem auch sei, es ist ein wirklich gutes Programm mit vielen interessanten Möglichkeiten.

Der erste Schritt ist ein Google Account anzulegen und diesen für Google Analytics zu aktivieren (bei der Datenkracke ist das alles leichter als es sich anhört).
Wenn das geschafft ist, muss man ein neues Webseitenprofil anlegen mit der eigenen Domain (einfach den Anleitungen folgen).
Abschließend gibt es einen JavaScript Code den man auf die eigene Seite, unmittelbar vor dem schließenden Body-Tag einfügt.
Geschafft! Google braucht ein paar Stunden um die Seiten zu indizieren, aber dann wird gezählt.

Die Hilfe von GA ist gut gemacht und bietet viele, viele Informationen. Wer ein paar Minuten Zeit hat sollte da unbedingt einmal reingucken.

Das wars für heute. Viel Spaß beim probieren und Webseite optimieren! Wenn noch etwas fehlt, dann hinterlass einen Kommentar, und vielleicht wird es in der nächsten Folge besprochen

Dann kann es ja losgehen mit der Aufteilung der Elemente und einen tieferen Einblick in CSS.

Vorweg ein paar Links: Der wichtigste von allen ist nach wie vor Selfhtml. Auch in Fragen CSS findet man hier umfangreiche Anleitungen, Templates und eine Referenz. Außerdem empfehlenswert ist die Seite CSS4you auf der man jede Menge Hilfe findet.

HTML

Wir begnügen uns aber erstmal mit einem ganz einfachen Seitenaufbau. Dem Klassiker:

Das ist der klassische Aufbau einer Seite. Wir fangen an mit einer festen Breite und einem umschließenden Container um die Elemente aufzuteilen.

Bevor es richtig losgeht noch ein Hinweis: Wir wollen nichts doppelt schreiben und so wenig wie möglich! Daran muss man immer denken damit man sich nicht zu viel Arbeit macht und die eigene Seite so effektiv wie möglich bleibt. Warum? Je effektiver wir anfangen um so weniger Stress haben wir wenn später Änderungen vorgenommen werden sollen.

So sehen die Div-Container aus (blaue Linien und deren Ids):

Die erste Aufgabe besteht darin diese Container auf die eigene Webseite anzuwenden. Denke also darüber nach, welche Bereiche wohin gehören und los gehts!

Fertig? Sehr gut. Dann solltest du etwas in dieser Richtung haben:

<div id="wrap">

<!-- Kopfbereich -->
<div id="head">
  <h1>Paul Lunow</h1>
</div>

<!-- Inhaltsbereich -->
<div id="content">
  <p>Hallo, das ist meine <b>erste</b> Webseite!</p>
  <?
  $page = "content/start.php";
  if(is_file($page)) {
    include($page);
  }
  else {
    echo "Die Seite konnte leider nicht gefunden werden.";
  }
  ?>
</div>

<!-- Mein Hauptmenü -->
<div id="menu">
  <ul>
    <li><a href="index.php">Startseite</a></li>
    <li><a href="index.php">Fotos</a></li>
    <li><a href="index.php">Texte</a></li>
  </ul>
</div>

<!-- Fusszeile -->
<div id="footer">
  <a href="#">Kontakt</a> |
  <a href="#">Impressum</a>
</div>

</div>

Was sofort auffällt ist die Reihenfolge: sie spielt in unserem Beispiel keine Rolle. Im Idealfall jedenfalls. Und in der "echten Welt" vorallem für die Suchmaschinen. Je weiter oben ein Keyword im HTML Dokument steht, umso besser wird es von den Spidern gewertet. Aber dazu später mehr, wir kümmern uns jetzt um das CSS, Container für Container.

CSS

Am besten ist es jede Anweisung einzeln hinzuzufügen und zu untersuchen was passiert. Es bietet sich an den Editor und den Browser nebeneinander zu positionieren. Mit [CMD] + [TAB] (auf dem Mac) kann man schnell zwischen den Fenstern hin und her schalten ohne die Maus zu benutzen. [F5] lädt das Browserfenster neu. Los gehts!

Als erstes der umschließende Container (Wrap). Er hält alle Elemente zusammen und gibt dem ganzen eine Breite. Sagen wir mal 960 Pixel. Wir positionieren den Container relativ zur Seite. Das hat den Sinn das sich absolut positionierte Elemente an diesem orientieren.
Um zu prüfen ob es funktioniert geben wir dem Wrap einen Rahmen von einem Pixel um sofort zu sehen ob es geklappt hat:

#wrap {
  position:relative;
  width:960px;
  border:1px solid black;
}

Als nächstes der Kopf der Seite (Head). Er wird absolut positioniert und soll über die gesamte Breite gehen und 120 Pixel hoch sein. Mit left und right werden die Abstände zum umfassenden Container angegeben. Graue Hintergrundfarbe um etwas zu sehen. Daraus resultiert folgendes CSS:

#head {
  position:absolute;
  left:0;
  right:0;
  width:100%;
  height:120px;
  background:silver;
}

Jetzt der Inhalt. Im Moment wird er noch verdeckt vom Kopf der darüber legt. Also braucht er Abstand nach oben und Abstand nach links, um Platz für das Hauptmenü zu schaffen. Damit der Footer auch noch Platz hat kriegt der Inhalt einen Abstand nach unten.

#content {
  margin-top:130px;
  margin-left:200px;
  margin-bottom:25px;
}

Jetzt hängt das Hauptmenü noch ganz traurig unter dem Inhalt. Das müssen wir unbedingt ändern. Das Menü wird absolut positioniert, an die linke Kante geheftet und von oben weg gerückt damit es nicht unter dem Kopfbereich verschwindet. Außerdem braucht es noch eine bestimmte Breite um nicht in den Inhalt hinein zu ragen.

#menu {
  position:absolute;
  top:130px;
  left:0;
  width:180px;
}

Und zu guter Letzt noch der Fußbereich der Seite. Er soll immer am unteren Rand kleben und bündig zum Inhalt sein. Also los:

#footer {
  position:absolute;
  bottom:0;
  left:200px;
  height:20px;
}

Fertig! Das wars schon mit der Verteilung der Elemente. Einfach oder?

Ein paar Tipps

Sollte es auf anhieb nicht so gut klappen:

• Mach dir das Element sichtbar! Hintergrundfarben und Rahmen geben dir einen Eindruck wie sich das Element verhält:

  border: 1px solid red;
  background:silver;

• Guck dir im Firefox den Quelltext an ([CMD] + [U]). Wenn du fette, rote Schrift findest, dann ist das ein Zeichen dafür das hier etwas nicht stimmt. Überprüfe die hervorgehobenen Passagen auf korrekte Anführungszeichen, Attribute und öffnende und schließende Klammern.
• Jage deine Seite durch den Validator vom W3C. Der sagt bescheid wenn etwas nicht stimmt und versucht auch zu erklären was schief gelaufen ist.

Effektive Ansprache der Elemente

Wir versuchen alles so knapp und effektiv wie möglich zu halten. Vorallem im CSS müssen wir daran denken. Es empfielt sich die Datei in zwei Bereiche zu gliedern.

1. Struktur
Das war der ganze obere Teil welcher die einzelnen Elemente auf der Seite positioniert.

2. Gestalltung
In diesem Bereich wird das aussehen der Elemente gesteuert. Zum Beispiel Schriftart, Größe, Abstand, Farben usw.

Um die unterschiedlichen Bereiche deutlich zu machen und später noch zu wissen was mit welcher Anweisung gemeint war, müssen wir alles fleißig und ausführlich kommentieren. In CSS schließen wir die Kommentare mit /* und */ ein:

/* Struktur */
#head { ... }
#content { ... }

CSS ermöglicht es mehrere Selektoren hintereinander zu schreiben. Wenn wir z.B. alle Links im Hauptmenü eine schwarze Farbe zuweisen wollen, dann könnte man auf die Idee kommen jedem Link im Menü eine Klasse zuzuweisen (z.B. <a href="#" class="schwarz">) und diese per CSS zu stylen.
Aber halt! Wir wollte nichts doppelt schreiben, und dieses class="schwarz" müssten wir allerdings öfters schreiben. Einfacher, und ohne irgendeine Änderung am HTML Quelltext, haben wir es, in dem wir einfach alle Links im Container Menü ansprechen.

/* Links im Container Menü schöner machen */
#menu a {
  color:black;
  text-decoration:none;
}

Und so soll es weiter gehen! Wenn jetzt ein neuer Menüpunkt hinzukommt müssen wir nicht darüber nachdenken welche Klasse er braucht um genau so auszusehen wie alle anderen. Einfach nur dadurch das er im Menü ist, bekommt er schon die richtige Formatierung.

Darüber lohnt es sich nachzudenken.

Fazit

Das wars mit dem dritten Teil! Du kannst deiner Homepage jetzt schon ein schönes Äußeres verpassen, Bilder einbauen, Farben vergeben usw. Wenn du bestimmte Ideen zur Formatierung hast, dann durchsuche Google und Selfhtml nach den passenden Anweisungen. Es gibt sie bestimmt.

Im nächsten Kapitel kommen dann diverse Kniffe und Tricks um die Seite (noch) besser zu machen. Viel Spaß mit dem nächsten Kapitel.