Die Überschrift hört sich etwas tricky an, aber ich denke, wenn wir das Problem auf ein praktisches Beispiel übertragen, wird es klar.

Nehmen wir an, wir haben eine Fußballstatistik-Seite, wo alle Statistiken zur 1. bis 3. Fußballbundesliga abrufbar sein sollen. Jeder Spieler hat eine eigene Seite und zu jedem Spieler müssen täglich aufwändige Statistik-Berechnungen durchgeführt werden, die mehrere Minuten dauern.

Eine Lösung wäre, dass man mit Cronjobs 1x täglich diese aufwändigen Berechnungen nachts durchführt und so die Ergebnisse bereit hält, wenn der Besucher eine Spielerseite auswählt. Das Problem an dieser Vorgehensweise ist allerdings, dass es so viele Spieler gibt, dass die Berechnungen zu lange dauern würden. Zudem werden eh nur 10% der Spielerseiten besucht und 2% der Spielerseiten haben 90% der Zugriffe. Man kann also für diese 2% (High Traffic-Seiten) Cronjobs anlegen, die restlichen Berechnungen aber, sollen quasi On-the-Fly erstellt werden. Das führt zwar zu teilweise langen Wartezeiten für die Besucher, aber die Ergebnisse dieser Berechnungen sind so großartig, dass die Besucher darauf auch bis zu mehreren Minuten warten würden.

Anforderungen an die “On the fly”-Berechnungen

1. Die Parameter für die Berechnung ändern sich nur 1x täglich
2. Die Ergebnisse liegen nach der Berechnung in einem Array vor und sollen als JSON zwischengespeichert werden, so dass dann die Anzeige der Ergebnisse schnell erfolgen kann
3. Wenn der Besucher auf die Ergebnisse warten muss, soll eine Warteseite mit einem Ajax-Loader angezeigt werden. Wenn die Berechnungen beendet sind, wird auf die eigentliche Seite weitergeleitet
4. Für einen Spieler darf die Statistik-Berechnung nur 1x ausgeführt werden.
   Ein Beispiel: Besucher 1 besucht die Seite von “Arjen Robben” und stößt die Berechnungen an. Besucher 2 besucht wenige Sekunden danach die Seite von “Arjen Robben”, es liegen keine Daten vor und trotzdem soll das Skript erkennen: “Moment! Die Berechnungen laufen schon, stoße die Berechnungen kein zweites Mal an.”
5. Sollten veraltete Berechnungen vorliegen, werden diese zwar angezeigt (mit einem Hinweis, dass die Daten veraltet sind), um keine Wartezeit zu haben, im Hintergrund wird allerdings die aufwändige Berechnung angestoßen. Hier gilt wieder: Die Berechnung darf nur 1x angestoßen werden.

Warteseite mit JQuery-Ajax

Die Warteseite wird nur dann ausgegeben, wenn noch nie Daten für den Spieler berechnet wurden.

Damit die Warteseite das Ende der Berechnung mitbekommt, muss diese über Ajax die Berechnungen anstoßen.

$(document).ready(function() {
	$.ajax({
	   type: 'GET',
	   url: 'spielerSeite.php',
	   cache: false,
	   data: 'do=ajax',
	   success: function(msg){
	   if (msg == 'true'){
			location.replace('http://localhost/spielerSeite.php');
		}
		else
		{
			$('div#responseAjax').empty();
			$('div#responseAjax').addClass('success');
			$('div#responseAjax').html(msg);
		}
	   }
	 });
});

Es wird also die Seite spielerSeite.php?do=ajax aufgerufen. Diese Seite führt die Berechnungen durch und gibt am Ende ‘true’ aus, so dass auf die eigentliche Seite spielerSeite.php weitergeleitet wird. Wenn nicht ‘true’ zurück gegeben wird, hat bereits ein anderer Benutzer die Berechnungen angestoßen und man gibt eine Meldung zurück.

Zwischenspeicherung der Berechnungen als JSON

Die fertigen Berechnungen, werden als json-Datei im Filesystem gespeichert:

function setJSON()
{
	file_put_contents($this->json_dir.$this->spieler_string.'.json', json_encode($this->berechnung_array));
}

function getJSON()
{
	$this->berechnung_array = json_decode(file_get_contents($this->json_dir.$this->spieler_string.'.json'), true);
}

Vorteil von json ist die absolut problemlose Konvertierung vom PHP-Array zu einem json-String, der in einer Datei gespeichert wird. Anhand des Änderungsdatums der Datei mit filemtime kann man zudem einfach feststellen, ob die Daten wieder aktualisiert werden müssen.

Lock-Mechanismus zur einmaligen Ausführung

Wie kann man mit PHP feststellen, ob bereits eine Berechnung für einen Spieler läuft? Gar nicht. Also muss man es sich merken!

In einem Execution Array ($this->execution_array) werden die $this->spieler_string gespeichert, deren Berechnungen zur Zeit ausgeführt werden. Damit alle Skripte, die gleichzeitig laufen, auf dieses Array zugreifen können, wird das Array als JSON gespeichert:

function setExJSON()
{
	file_put_contents('execution.json', json_encode($this->execution_array));
}

function getExJSON()
{
	if (!file_exists('execution.json'))
	{
		$this->execution_array = array();
	}
	elseif (file_get_contents('execution.json') === 'null')
	{
		$this->execution_array = array();
	}
	else
	{
		$this->execution_array = json_decode(file_get_contents('execution.json'), true);
	}
}

Nun muss bei jedem potentiellen Start der Berechnungen überprüft werden, ob für den Spieler schon Berechnungen laufen. Dabei ist darauf zu achten, dass $this->execution_array frisch aus der JSON-Datei geladen wurde. Sollte niemand die Berechnung gestartet haben, wird das Execution-Array um den entsprechenden Eintrag erweitert und als JSON gespeichert.
Nachdem die Berechnungen durchgeführt wurden, wird das Array wieder geladen, der entsprechende Eintrag gelöscht und das Array wieder gespeichert:

$this->getExJSON();
if (in_array($this->spieler_string,$this->execution_array))
{
	exit();
}
else
{
	$this->execution_array[] = $this->spieler_string;
	$this->setExJSON();
	$this->fuehreLangeBerechnungenDurch();
	$this->getExJSON();
	unset($this->execution_array[array_search($this->spieler_string, $this->execution_array)]);
	$this->setExJSON();
}

Das Problem an dieser Implementation ist natürlich, dass Schreiben und Lesen ins Execution-Array kein kritischer Abschnitt ist und z.B. zeitgleich mehrere Berechnungsvorgänge gestartet werden könnten.. Da aber schlimmstenfalls “nur” mehrere Berechnungen für einen Spieler gleichzeitig durchgeführt würden, ist das Problem vernachlässigbar.

Ablaufkontrolle

Und hier der komplette Ablauf des Skripts:

$this->execution_array = array();
if (isset($_GET['do']) AND $_GET['do'] === 'old')
{
	//Daten veraltet: Alten Daten laden und anzeigen
	$this->getJSON();
	$this->toHTML();
}
elseif (isset($_GET['do']) AND $_GET['do'] === 'wait')
{
	//Warteseite mit Ajax anzeigen
	$this->doWaitHTML();
}
elseif (isset($_GET['do']) AND $_GET['do'] === 'ajax')
{
	//Durch Ajax von Warteseite aus Berechnungen angestoßen
	$this->getExJSON();
	if (in_array($this->spieler_string,$this->execution_array))
	{
		//Anderer User hat Berechnungen schon angestoßen
		$this->ajaxFalseResponse();
	}
	else
	{
		//Berechnungen durchführen
		$this->execution_array[] = $this->spieler_string;
		$this->setExJSON();
		$this->fuehreLangeBerechnungenDurch();
		$this->getExJSON();
		unset($this->execution_array[array_search($this->spieler_string, $this->execution_array)]);
		$this->setExJSON();
	}
}
elseif (!file_exists($this->json_dir.$this->spieler_string.'.json'))
{
	//Es liegen noch keine Berechnungen vor! Weiterleiten auf Warteseite.
	$host  = $_SERVER['HTTP_HOST'];
	$uri   = $_SERVER['PHP_SELF'];
	$extra = '?do=wait';
	header("Location: http://$host$uri$extra");
	exit();
}
else
{
	$this->getJSON();
	if (filemtime($this->json_dir.$this->spieler_string.'.json') < strtotime(' -1 day'))
	{
		//Die Daten sind veraltet. Weiterleiten zum Anzeigen der alten Daten, aber Berechnungen der neuen Daten starten
		$host  = $_SERVER['HTTP_HOST'];
		$uri   = $_SERVER['PHP_SELF'];
		$extra = '?do=old';
		header("Location: http://$host$uri$extra");
		$this->getExJSON();
		if (in_array($this->spieler_string,$this->execution_array))
		{
			//Anderer User hat Berechnungen schon angestoßen
			exit();
		}
		else
		{
			//Berechnungen durchführen
			$this->execution_array[] = $this->spieler_string;
			$this->setExJSON();
			$this->fuehreLangeBerechnungenDurch();
			$this->getExJSON();
			unset($this->execution_array[array_search($this->spieler_string, $this->execution_array)]);
			$this->setExJSON();
		}
	}
	else
	{
		//Wenn Daten aktuell sind: Anzeigen!
		$this->toHTML();
	}
}

Die Colorbox mit Homer

Die Colorbox von Jack Moore ist großartig: Bilder, Videos, HTML: alles mögliche kann in dieser Lightbox dargestellt werden.

Was allerdings so nicht vorhanden ist, ist die Möglichkeit, dass Links, die innerhalb der Lightbox aufgerufen werden, auch innerhalb der Lightbox geöffnet werden.

Dazu muss innerhalb von $(document).ready(function(){}, in der die Colorbox an die Elemente gebunden werden, folgender Code eingefügt werden:

$("a.incolorbox").live('click', function(event) {
	event.preventDefault(); // native javascript function
	$.fn.colorbox({ href: $(this).attr("href"), open: true})
});

Wenn nun innerhalb der Colorbox ein Link zur Klasse “incolorbox” gehört, wird dieser innerhalb der Colorbox geöffnet.

Möchte man nun die Schrift in der gleichen Zeile des Bildes (sagen wir) mittig positionieren, so muss man nicht den Absatz p-Tag per vertical-align:middle; mittig anordnen, sondern das Bild:

<p>
Etwas Text in der gleichen Zeile mit einem
großen Bild <img src="grossesBild.jpg" alt="Großes Bild" style="vertical-align:middle;" />
</p>

Das finde ich doch etwas eigenartig, denn so ordnet man ja nicht das Bild mittig an, sondern die Schrift drumherum…

Ein HTML-Auszug sieht so aus:

<div id="posting_1234">
Dies ist ein <a href="http://link.de">Link</a> im Posting.</div>
<div>
Ein anderer <a href="http://andererlink.de">Link</a> in einem anderen DIV.</div>
<!-- ... -->
<div id="posting_1235">
Dies ist ein <a href="http://link.de">Link</a> im Posting.</div>
<div>
Ein anderer <a href="http://andererlink.de">Link</a> in einem anderen DIV.</div>

Nun will man mit CSS alle Links innerhalb des td-Tags, dessen id mit td_posting_ anfängt, anders darstellen. Das kann man umständlich mit der gestern vorgestellten JQuery-Funktion hinbekommen, aber einfacher und direkter ist es mit den CSS Attribut Selektoren:

td[id^="td_posting_"] a:link{
text-decoration: underline;
color: #032846;
}

Das ^-Zeichen hinter id dient dazu festzulegen, dass id mit der angegebenen Zeichenkette beginnen soll. Es wäre ja auch denkbar, dass id mit einer bestimmten Zeichenkette enden soll, denn müsste anstatt ^ ein $ Zeichen benutzt werden:

td[id$="ende"] a:link{
text-decoration: underline;
color: #032846;
}

Wenn nur überprüft werden soll, ob eine Zeichenkette irgendwo in der ID vorkommt muss ein *-Zeichen benutzt werden:

td[id*="zeichen"] a:link{
text-decoration: underline;
color: #032846;
}

Das deckt zwar viele Anwendungsfälle ab, aber wenn man auf einen komplizierteren regulären Ausdruck angewiesen ist, muss man auf die gestrige JQuery-Funktion zurück greifen.