Vorwort Inhaltsverzeichnis Andere Seiten Impressum Shop Webdesign

Unser Projekt Ausgeführt mit SSI

Vorarbeit

Wir kopieren den letzten Stand unseres Projektes bei dem wir ohne Frames gearbeitet haben in ein neues Verzeichnis.
Dann ändern wir bei den html-Dateien die Dateiendung in shtml. Die Dateiendung shtml ist nötig damit der Server erkennt das er ServerSideIncludes ausführen muss.

Die index.shtml

Als nächstes öffnen wir die index.shtml und bearbeiten diese Datei.
Der html-Code zwischen <div class="navi"> und </div> kopieren wir in eine extra Datei die wir dann navi.shtml nennen.
Den html-Code zwischen <div class="inhalt"> und </div> kopieren wir in eine neue Datei namens start.shtml.
Als Ersatz für diesen html-code kommen die SSI-Anweisungen in die Datei.

<?xml version="1.0"?> <!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> <title>Die Wollmaus</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="Alles über das Leben der Wollmaus."/> <meta name="author" content="Dein Name" /> <meta name="keywords" content="Wollmaus, Staub, Hausstaub, Staubsauger"/> <meta name="robots" content="index, follow"/> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> <script src="javascript/bildoeffnen.js" type="text/javascript"></script> </head> <body> <div class="logo"> <img src="wollmaus.jpg" width="621" height="92" alt="Logo Die Wollmaus" /> </div> <div class="navi">  </div> <div class="inhalt">      </div> <div class="fuss"> <p class="klein" align="right"> VORNAME NACHNAME * STRASSE * PLZ ORT<br /> Email: <a href=mailto:MAILADRESSE@freenet.de/>MAILADRESSE@freenet.de</a><br /> Letzte Änderung: </p> </div> </body> </html>

Erst einmal fällt auf das in dieser index.shtml fast kein Inhalt vorhanden ist. Dieser wird über die include-Befehle in diese Datei geladen.
Zu Anfang wird die Navigation mit dem Befehl  in die Datei geladen. Die Datei navi.shtml haben wir bereits zum Teil erstellt. Einige kleine Änderungen sind noch nötig, aber die kommen später.

Mit dem Befehl     
wird der Inhalt in die Datei geladen.
Im ersten Teil der if-Anweisung wird geprüft ob die Umgebungsvariable $QUERY_STRING nicht existiert. Dieser Fall tritt dann auf, wenn die Seite über die Adresse der Domain aufgerufen wird. Existiert also der QUERY_STRING noch nicht, so wird die Datei start.shtml in unsere Datei geladen.
Im Teil hinter der else-Anweisung wird der QUERY_STRING (dieser enthält den Dateinamen) in die Datei index.shtml geladen.

Die navi.shtml

Die navi.shtml hatten wir ja schon zu Anfang erstellt. Einige kleine Ergänzungen sind noch nötig.

<a href="index.shtml">Home</a> <a href="index.shtml?entstehung.shtml">Entstehung</a> <a href="index.shtml?lebensraum.shtml">Lebensraum</a> <a href="index.shtml?feinde.shtml">Feinde</a> <a href="index.shtml?bilder.shtml">Bilder</a> <a href="index.shtml?impressum.shtml">Impressum</a> <a href="mailto:name@provider.de">name@provider.de</a>

Hinter den ? (Fragezeichen) wird der QUERY_STRING eingefügt. Er hat hier den Dateinamen der zu includierenden (include engl. Einfügen) Dateien.
Die Startseite bekommt keinen QUERY_STRING da diese Seite auch ohne den QUERY_STRING aufgerufen wird wenn wir unseren Domain-Namen im Browser aufrufen.

Die Inhalte

Unsere Inhaltsseiten müssen wir noch nach dem folgenden Schema ändern.

Entstehung

<h1>Entstehung der Wollmäuse</h1> <p>Obschon uns die Wollmäuse treue Begleiter in unserem Leben sind, so ist doch nur sehr wenig über ihre Entstehung bekannt.<br /> Die Wollmäuse können natürlich nicht so viele Forscher anlocken, wie dieses zum Beispiel Elefanten und Löwen tun. Immerhin kann sich hier ja auch der Forscher Hoffnung auf eine bezahlte Reise nach Afrika machen, während er die Wollmäuse in der heimischen Wohnung studieren könnte.</p> <p>Vermutlich ist die Wollmaus am Anfang ihres Daseins mikroskopisch klein.<br /> Aber das Wachstum ist rasant, und man kann sie schon nach wenigen Tagen sehen, wie sie, wenn man in den Raum kommt, entlang an den Wänden huschen um in ihr unbekanntes Versteck zu gelangen. </p>

Lebensraum

<h1>Der Lebensraum der Wollmäuse</h1> <p>Für ihr überleben benötigt die Wollmaus einen ungestörten Raum. Gerne windgeschützt, da sie wegen ihrem geringen Gewicht schon vom kleinsten Luftzug weggeweht werden kann. Wovon sie sich ernähren ist noch nicht geklärt, doch auf grund ihres rasanten Wachstums ist anzunehmen, dass die Nahrungssuche für eine Wollmaus kein Problem ist. </p>

Feinde

<h1>Die Feinde der Wollmäuse</h1> <p> Der größte Feind der Wollmaus ist doch derjenige, den sie so treu begleitet.<br /> Der Mensch mit seinen lärmenden Haushaltsgeräten.<br /> Noch ist nicht klar, ob die Wollmaus vor dem Lärm eines Staubsaugers, oder aber vor dem Staubsaugerrohr, welches in ihre Nähe kommt verscheucht wird. Auf jeden Fall sind die meisten Wollmäuse verschwunden, wenn der Staubsauger an den Aufenthaltsorten der Wollmäuse aktiv war.<br /> Aber keine Angst. Wollmäuse sind Überlebenskünstler und schon nach kurzer Zeit kann man sie wieder beobachten. </p>

Bilder

<h1>Bilder der Wollmaus>/h1> <p>Hier finden sich einige der wenigen Bilder der Wollmaus</p> <table width="100%" border="0"> <tr> <td> <a href="bilder/wollmaus1.jpg"> <img src="bilder/mini_wollmaus1.jpg" width="100" height="100" alt="Wollmaus auf Boden" /> </a> <br /> Bild öffnet sich im Aktuellen Browserfenster, mit der Zurück-Taste des Browsers wieder auf diese Seite zurück. </td> <td> <a href="bilder/wollmaus2.jpg" target="_blank"> <img src="bilder/mini_wollmaus2.jpg" width="100" height="39" alt="Wollmaus in Ecke" /> </a> <br /> Bild öffnet ein neues Browserfenster. Diese Seite bleibt erhalten. </td> </tr> </table> <h1>Bilder der Wollmaus>/h1> <p>Hier finden sich einige der wenigen Bilder der Wollmaus, diesmal öffnen sie sich über ein JavaScript</p> <table width="100%" border="0"> <tr> <td class="untenrechts"> <a href ="javascript:Zeigen('bilder/wollmaus1.jpg',256,256)"> <img src="bilder/mini_wollmaus1.jpg" width="100" height="100" alt="Wollmaus auf Boden" /></a> <noscript><a href="bilder/wollmaus1.jpg" target="_blank">Wollmaus</a></noscript> <br /> Bild wird durch ein JavaScript in einem kleineren Fenster geöffnet. </td> <td class="untenrechts"> <a href ="javascript:Zeigen('bilder/wollmaus2.jpg',357,139)"> <img src="bilder/mini_wollmaus2.jpg" width="100" height="39" alt="Wollmaus in Ecke" /></a> <noscript><a href="bilder/wollmaus2.jpg" target="_blank">Wollmaus 2</a></noscript> <br />Bild wird durch ein JavaScript in einem kleineren Fenster geöffnet. </td> </tr> </table>

Impressum

<h1>Impressum</h1> <p>VORNAME NAME</p> <p>STRASSE NR</p> <p>PLZ ORT</p> <p><a href="mailto:MAILADRESSE@freenet.de">MAILADRESSE@freenet.de</a></p>

So sieht unser Projekt mit Hilfe von SSI aus.

Alternativ zu der hier vorgestellten Methode mit den QUERY_STRING's kann man natürlich auch einfach nur die Navigation in jeder Datei über den include-Befehl nachladen.

Damit sollten wir in der Lage sein ein eigenes kleines Projekt mit ServerSideIncludes zu erstellen. Mit etwas experimentieren wird man noch viel mehr Möglichkeiten finden können.
Man könnte z.B. abhängig von der Zeit wann die Seite aufgerufen wird verschiedene Inhalte laden.

   Inhalt 1  Inhalt 2 ....  Inhalt 10 

Hier werden 10 Inhalte eingeladen.
Dazu wird als erstes das Zeitformat auf Sekunden eingestellt. Dann wird die Variabel Sekunde mit dem Wert der Rechnerzeit belegt.
In der If-Anweisung wird in der Variabel Sekunde der Wert mit dem von uns festgelegten Wert verglichen. Für den Wert2 haben wir Reguläre Ausdrücke gebraucht, erkennbar an den /Wert2/. Der . (Punkt) sagt aus das an der Stelle jedes Zeichen vorkommen darf. Hinter dem Punkt stehen die Ziffern 0 bis 9. Somit können wir auch Zeiten von z.B. 29Sekunden oder 45Sekunden erfassen.

Es gibt vieles auszuprobieren. Viel Spaß dabei.

Die Anweisungen Nach oben Was ist php