Adventskalender erstellen
Auf meiner Rätselseite gibt es ja seit vorgestern einen Adventskalender mit Preisen im Wert von mehr als 1.500 Euro. Die 24 Rätsel dafür wurden von 10 Usern des Rätselforums erstellt und auch die Kalendergrafik stammt von einem Rätselforum-User. Meine Aufgabe war es, den Adventskalender zu programmieren. Wie ich dabei vorgegangen bin, beschreibe ich in diesem Artikel.
Bei der Programmierung eines Adventskalenders gibt es 2 besondere Anforderungen, die bewältigt werden müssen. Zum einen müssen die jeweiligen Tage verlinkt werden. Am einfachsten wäre es logischerweise gewesen, wenn ich dafür 24 Textlinks verwendet hätte. Aber schöner sieht es natürlich aus, wenn die Tage auf der Adventskalendergrafik angeklickt werden können. Diese Funktion habe ich mittels einer sogenannten Imagemap in HTML umgesetzt.
Die zweite Schwierigkeit ist die, dass die Türchen natürlich nur an dem dafür vorbestimmten Tag geöffnet werden dürfen. Mit HTML lässt sich da nichts mehr machen, deshalb habe ich dafür PHP verwendet.
Vorbereitung des Adventskalenders
Rätsel-Adventskalender mit Raster
Der Rätsel-Adventskalender mit Raster
Bevor ich mit der Programmierung starten konnte, musste ich erst mal die Zahlen auf die vorhandene Kalendergrafik setzen. Ich habe mir dafür in paint.net eine zweite Ebene erstellt und dort ein Raster konstruiert. Mit Hilfe dieses Rasters und einer dritten Ebene war es dann nicht mehr so schwierig, die 24 Zahlen so zu positionieren, dass sie gleichmäßig auf der Grafik verteilt waren. Nachdem das erledigt war, habe ich das Raster wieder entfernt, so dass die Striche auf der endgültigen Kalendergrafik nicht mehr zu sehen sind.
Die Imagemap
Bei einer Imagemap handelt es sich um eine verweis-sensitive Grafik, d. h. es lassen sich beliebige Teile einer Grafik verlinken. Diese Technik wird sehr oft für Landkarten eingesetzt, auf der man durch einen Klick auf einen Ort Informationen darüber abrufen kann. Aber auch für die Programmierung eines Adventskalenders ist eine Imagemap sehr gut geeignet.
Damit der Browser weiß, dass eine Grafik verweis-sensitiv sein soll, muss diese mit dem Attribut “usemap” gekennzeichnet werden:
Bei dem Wert #Kalender handelt es sich einfach um einen Anker, der eine Verknüpfung mit dem map-Tag bildet.
Der HTML-Tag “map” leitet die Definition einer Imagemap ein und schließt die einzelnen Verweise ein. Der Wert “name” muss dabei natürlich der gleiche sein wie der Ankername des img-Tags.
Für eine Imagemap gibt es den area-Tag, der 3 Verweisarten ermöglicht: Vierecke, Kreise und Polygone. Für meinen Adventskalender habe ich die Vierecke verwendet, weshalb ich die beiden anderen Arten hier nicht näher beschreibe.
Das Attribut “shape” legt die Verweisart fest, in diesem Fall ist es “rect” für einen viereckigen Verweis. Die 4 Werte des Attributs “coords” haben folgende Bedeutung:
- Wert: Der Pixel-Wert von links für die linke obere Ecke des Vierecks
- Wert: Der Pixel-Wert von oben für die linke obere Ecke des Vierecks
- Wert: Der Pixel-Wert von links für die rechte untere Ecke des Vierecks
- Wert: Der Pixel-Wert von oben für die rechte untere Ecke des Vierecks
Das hört sich im ersten Moment vielleicht kompliziert an, ist aber im Grunde ganz einfach. Die beiden ersten Werte bestimmen die linke obere Ecke des Vierecks. Die im Beispiel angegebenen Werte “10,30″ besagen also, dass die linke obere Ecke 10 Pixel vom linken Rand und 30 Pixel vom oberen Rand entfernt sind. Die beiden anderen Werte bezeichnen die rechte untere Ecke. Die beiden Werte “125,100″ geben an, dass die rechte untere Ecke 125 Pixel vom linken Rand und 30 Pixel vom oberen Rand entfernt ist.
Diese 4 Koordinatenangaben verbindet der Browser dann zu einem viereckigen Verweis. Für meinen Adventskalender musste ich 24 Verweise erstellen. Der komplette HTML-Code sah am Ende dann so aus:
…
Die Datumsabfrage des Adventskalenders
Näheres über die Datumsabfrage des Adventskalenders mit PHP erfahrt ihr morgen im zweiten Teil.
Im Artikel Adventskalender erstellen – Die Imagemap habe ich gestern erklärt, wie ich bei meinem Adventskalender den HTML-Teil gestaltet habe. In diesem Artikel geht es jetzt um die Datumsabfrage, anhand der entschieden wird, was ein Besucher an welchem Tag zu sehen bekommt.
Zeitzone definieren
Damit das Türchen eines Adventskalenders für alle Besucher gleichzeitig offen ist, habe ich zuerst mal die gültige Zeitzone definiert. Dafür habe ich den PHP-Befehl date_default_timezone_set() verwendet:
date_default_timezone_set(‚Europe/Berlin‘);
Datum ermitteln
Für die Ermittlung des Datums habe ich die Funktion date() benutzt. Den aktuellen Tag finde ich mit
$heute = date(„Ymd“);
heraus und ordne ihn einer Variable zu. Das Kürzel “Ymd” steht dabei für das Jahr, den Monat und den Tag (z. B. 20101206). Wichtig hierbei ist, dass zwischen den Angaben keine Punkte stehen dürfen, sonst können nachher die verschiedenen Daten nicht miteinander verglichen werden.
Die Funktion mktime() gibt den Unix-Timestamp für ein Datum zurück. Dieser enthält alle Sekunden, die seit dem 01.01.1970, dem Geburtsdatum von Unix, vergangen sind. Als Argument muss man nacheinander die Stunde, die Minute, die Sekunde, den Monat, den Tag und das Jahr des gewünschten Datums angeben. Für den 6. Dezember 2010 sieht das so aus:
mktime(0, 0, 0, 12, 6, 2010);
Da ich für den Adventskalender ja nur das Datum und nicht die Uhrzeit benötige, habe ich diese auf 0:00:00 Uhr gesetzt. Den von mktime gelieferten Timestamp wandle ich nun wieder mit der date-Funktion in das gleiche Format um, in dem ich schon den aktuellen Tag gespeichert habe und weise ihn auch wieder einer Variable zu:
$adventstag=date(„Ymd“, mktime(0, 0, 0, 12, 6, 2010));
Die Datumsabfrage
Das war es dann auch schon fast. Jetzt kann ich bequem ein beliebiges Adventskalenderdatum mit dem heutigen Datum vergleichen und dementsprechend den dazu passenden Inhalt ausgeben.
Wenn die Seite vor dem Adventskalenderdatum aufgerufen wird…
if ($adventstag>$heute)
lasse ich einen entsprechenden Hinweistext anzeigen:
echo " Sie sind leider etwas zu früh dran. ";
Wenn die Seite am richtigen Tag oder später aufgerufen wird…
if ($adventstag$heute)
{
echo " Sie sind leider etwas zu früh dran. ";
}
if ($adventstag