Adventskalender - Seite über Hyperlink nach Datum öffnen
Jockel
- programmiertechnik
Problemstellung:
Einen Adventskalender programmieren. Der Start wird über ein Bild erfolgen, auf dem der User Bereiche anklicken kann (Imagemap), die dann zum jeweiligen "Tagestürchen" führen. Es ist aber unerwünscht, dass der User am 1.12. schon das Türchen vom 12.12. öffnen kann.
Lösung:
Zur Realisierung werden Server Side Includes (SSI) eingesetzt.
Hintergundinfos:
zum Thema SSI fand ich bei
SELFHTML (http://selfhtml.de/cgiperl/intro/ssi.htm) und im
Online Magazin von Dr. Web (http://www.ideenreich.com/programmierung/ssi_1.shtml und weitere ssi_*.shtml)
SSI-Einsatz testen:
Bevor viel Arbeit investiert wird, sollte geklärt werden, ob SSI praktisch angewandt werden kann.
Rufe dazu im Browser diesen Link auf: http://selfhtml.de/cgiperl/intro/ssi.htm
Dort findest Du ein Beispiel für die Datei "test.shtml".
Kopiere den angezeigten Code.
Starte einen Texteditor (z.B. Notepad, dem Editor von Windows; zu finden unter STRAT => PROGRAMME => ZUBEHÖR).
Füge den kopierten Inhalt ein und speichere diese Datei unter dem Namen test.shtml
Die Dateiendung shtml ist wichtig, weil sonst Dein Server die verwendeten Befehle nicht abarbeitet.
Lade die Datei auf Deinen Server und rufe sie im Browser auf.
Jetzt sollten Angaben wie das aktuelle Datum, der Dateiname u.a. angezeigt werden.
Wenn nicht, frage Deinen Serveradministrator ob SSI überhaupt eingesetzt werden kann.
Sollte kein SSI einsetzbar sein, so ist hier Schluss.
Ausgang ist die Datei advent.htm. Eine ganz normale html-Seite, in der ein Bild mit anklickbaren Bereichen und alternativ auch ein Textmenu mit den verwendeten Links gespeichert ist. Eine von 24 Zieldateien heißt z.B. 01-12.shtml
Aus advent.htm wird die Datei 01-12.shtml mit einem ganz normalen Link aufgerufen (z.B. steht dann im Quellcode an der vorgesehenen Stelle <a href="01-12.shtml">1. Dezember</a>)
Die verwendeten SSI-Befehle arbeiten nach folgendem Prinzip:
Lies das aktuelle Serverdatum.
Vergleiche das Datum mit dem selbst festgelegten Termin.
Liegt das aktuelle Tagesdatum vor dem selbst festgelegten Termin, zeige eine Standartmeldung an.
Liegt das aktuelle Tagesdatum auf oder nach dem selbst festgelegten Termin, zeige die Seite unverändert an.
Quelltext 01-12.shtml
<html>
<head>
<title>1. Dezember</title>
</head>
<body>
<!--#config timefmt="%Y%m%d" -->
<!--#if expr="$DATE_LOCAL >= '20011124'" -->
<p>diese Seite wird ab 24. November angezeigt</p>
<!--#else -->
<!--#include virtual="hohoho.shtml" -->
<!--#endif -->
<p> </p>
<p>
<a href="index.htm" title="hier geht es zurück zum Adventskalender">zurück zum Adventskalender</a>
</p>
</body>
</html>
Kommentar zum Quelltext 01-12.shtml
<html> = leitet immer eine Webseite ein
<head> = Beginn Head-Bereich (hier wird u.a. der Seitentitel festgelegt und durch meta-Tags Anweisungen für Suchmaschinen hinterlegt)
<title>1. Dezember</title> = Titel der Seite; wird im Browserfenster ganz oben in weißer Schrift auf blauem Grund links von den "Fenster schliessen"-Knöpfen angezeigt)
</head> = Ende Head-Bereich
<body> = hier beginnt der im Browser angezeigte und eigentlich Bereich der Seite
<!--#config timefmt="%Y%m%d" --> = mit diesem SSI-Befehl wird das aktuelle Serverdatum in der Form %Y = Jahr %m = Monat %d = Tag abgefragt
<!--#if expr="$DATE_LOCAL >= '20011201'" --> = mit diesem SSI-Befehl wird das ermittelte Tagesdatum mit dem selbst festgelegten Datum 01.12.2001 verglichen und festgestellt, ob das aktuelle Datum größer oder gleich dem selbst festgelegtem Datum ist; die bis hierher verwendeten SSI-Befehle müssen im Quellcode vor der Stelle platziert werden, wo der eigentliche Seiteninhalt beginnt, der aber erst ab dem selbst festgelegten Termin angezeigt werden soll
<p>diese Seite wird ab 24. November angezeigt</p> = hier ist der Platz für den eigentlichen Inhalt der Seite (Text, Bilder, Links, ...);
<!--#else --> = dieser SSI-Befehl wird wirksam, wenn das aktuelle Tagesdatum kleiner als das selbst festgelegte Datum ist; sonst wird dieser Befehl ignoriert
<!--#include virtual="standartmeldung.shtml" --> = dieser SSI-Befehl schliesst die Datei "standartmeldung.htm" ein; "standartmeldung.htm" wird an Stelle des eigentlichen Seiteninhaltes im Browser angezeigt
<!--#endif --> = dieser SSI-Befehl beendet die aufgerufenen SSI-Befehlskette
</body> = hier endet der im Browser angezeigte und eigentlich Bereich der Seite
</html> = schliesst immer eine Webseite ab
Quelltext standartmeldung.htm
<p align="center">
<b>Ho, ho, ho! </b>
Heute ist doch erst der
<b>
<!--#config timefmt="%d.%m.%Y" -->
<!--#echo var="DATE_LOCAL" -->
</b>.
</p>
<p align="center">
<img src="images/wichtel.gif"
width="264" height="228"
border="0"
title="Tipp vom Weihnachtswichtel: Habe bitte noch etwas Gedud. Schon bald ist es ja soweit.">
</p>
<p align="center">
<em>Ab 1. Dezember geht es los.</em>
</p>
<p> </p>
<p>
<a href="index.htm" title="hier geht es zurück zum Adventskalender">zurück zum Adventskalender</a>
</p>
Kommentar zum Quelltext standartmeldung.htm
<p align="center"> = leitet einen Absatz ein und richtet ihn zentriert aus
<b>Ho, ho, ho! </b> = Text, der fett dargestellt wird
Heute ist doch erst der = normal dagestellter Text
<b> = ab hier wird alles nachfolgende fett dargestellt
<!--#config timefmt="%d.%m.%Y" --> = mit diesem SSI-Befehl wird das aktuelle Serverdatum in der Form %d. = Tag %m. = Monat %Y = Jahr abgefragt (Darstellung erfolgt dann so: Tag.Monat.Jahr = 01.12.2001)
<!--#echo var="DATE_LOCAL" --> = mit diesem SSI-Befehl wird das im vorhergehenden SSI-Befehl abgefragte Datum auf der Seite angezeigt
</b>. = ab hier ist wieder Schluss mit fett geschrieben
</p> = der Absatz wird beendet
<p align="center"> = leitet einen neuen Absatz ein und richtet ihn zentriert aus
<img src="images/wichtel.gif" = die Bilddatei "wichtel.gif" wird angezeigt (diese Datei ist frei wählbar)
width="264" height="228" = Breite (width) und Höhe (height) des Bildes werden festgelegt, damit der Browser weiss, wie groß das Bild auf dem Bildschirm angezeigt werden soll
border="0" = Rahmen (border) ist auf Null Punkte eingestellt; das Bild wird ohne Rahmen dargestellt
title="Tipp vom Weihnachtswichtel: Habe bitte noch etwas Gedud. Schon bald ist es ja soweit."> = Alternativtext für das Bild, der angezeigt wird, wenn mit der Maus über das Bild gefahren wird oder das Bild nicht geladen wurde
</p> = der Absatz wird beendet
<p align="center"> = leitet einen neuen Absatz ein und richtet ihn zentriert aus
<em>Ab 1. Dezember geht es los.</em> = normaler Text, der kursiv dargestellt wird
</p> = der Absatz wird beendet
<p> </p> = ein leerer Absatz; sorgt für Abstand zwischen vorhergehenden und nachfolgendem Text
<p> = leitet einen neuen Absatz ein
<a href="advent.htm" title="hier geht es zurück zum Adventskalender">zurück zum Adventskalender</a> = Textlink zurück zum Adventskalender
</p> = der Absatz wird beendet
Hinweis: In der Datei "standartmeldung.htm" fehlen der einleitende und abschliessende html- und body-Tag. Daher ist sie keine echte html-Datei.
Für das Projekt Adventskalender ist das auch nicht notwendig. Der Inhalt der Datei "standartmeldung.htm" wird durch die Datumsabfrage vor dem selbst festgelegten Termin automatisch durch den Server direkt in die Seitendarstellung von 01-12.shtml geschrieben. Dadurch gibt es später auch bei der Quelltextanzeige durch den Browser keinen Hinweis auf die eingesetzte Technik.
Nach Ablauf des selbst festgelegten Termins wird die Datei "01-12.shtml" im Browser ganz normal angezeigt. Genau so wie sie wirklich erscheinen soll.
Tipp zum Test der Dateien:
In der Datei "advent.htm" werden mehrere Links angelegt. Sinnvoller weise mit Datum vor - aktuelles Tagesdatum - nach dem selbst festgelegten Termin.
Der selbst festgelegte Termin sollte beim Test das aktuelle Tagesdatum sein.
Es muss genau so viele "*-12.shtml"-Dateien geben, wie Links.
Alle "*-12.shtml"-Dateien sollten genau so programmiert sein wie 01-12.shtml.
Der darzustellende Inhalt sollte unterschiedlich sein und genau beschreiben, welche Datei mit welchem Inhalt auf dem Bildschirm zu sehen sein sollte.
Die selbst festgelegten Termine sollten sinnvoller Weise fortlaufend sein.
Der Test, ob alles richtig funktioniert kann nur online erfolgen. Die verwendeten SSI-Befehle werden eben nur vom Server direkt verarbeitet. Ein offline-Test ist daher nicht möglich.
Alle Dateien liegen im selben Verzeichnis.
Der Test sollte dann über mehrere Tage laufen, um auch ganz sicher zu gehen, das wirklich alles funktioniert.
Ist ja alles ganz gut und schön, aber warum postest du das hier?
Habe den text überflogen, weil er nicht sonderlich interessant war , aber keine Frage gefunden...
Gab es eine versteckte oder implizite Frage?
Hallo Thorsten,
Ist ja alles ganz gut und schön, aber warum postest du das hier?
um damit vielleicht anderen Ratsuchenden helfen zu können. Ich dachte mir, dass könnte gut für das Archiv sein.
Habe den text überflogen, weil er nicht sonderlich interessant war , aber keine Frage gefunden...
Richtig. Es gab auch keine Frage, sondern das war eine Antwort ohne mal eine Frage vorweg. Da Du den Text nur überflogen hast, ist Dir das vielleicht entgangen.
Gab es eine versteckte oder implizite Frage?
Nein, es gab keine Frage. Definitiv nicht. Ich habe versucht eine Lösungsmöglichkeit aufzuzeigen. Einverstanden?
Jockel
Hallo Jockel
Für eine komplette Lösung wie deine wäre eigenentlich ein Featureartikel geeigneter.
Überleg' dir doch, ob du das nicht noch ein bischen ausbauen willst und einen Artikel schreiben
http://aktuell.de.selfhtml.org/artikel/beitrag.htm
Gruß
Daniel