Navigation mit Server Side Includes (SSI)

Besteht eine Web-Site aus mehreren einzelnen Seiten so ist es nötig, eine logische Navigationsstruktur herzustellen, mit der es möglich ist, zwischen den einzelnen Seiten der Web-Site zu navigieren. Diese logische Struktur wird in Form eines oder mehrerer Navigationsbereiche notiert, welche die Seiten mit Hilfe von Links miteinander verknüpfen. Bei statischen Seiten führt dies allerdings zu einem Problem: Wird eine Seite eingefügt oder entfernt, so müssen meist gleich mehrere Seiten angepasst werden, da die Navigationsstruktur nicht mehr stimmt oder unvollständig ist. Darüber hinaus führt eine dezentrale Navigation – jede Seite enthält zustandsabhängige Navigationselemente – oft zu Fehlern. So kann es beispielsweise vorkommen, dass nicht alle geänderten Seiten nach der Änderung auf den Web-Server kopiert werden, oder dass Seiten bei der Anpassung der Navigationsbereiche vergessen werden. Auch der ausschließliche Einsatz von JavaScript ist keine akzeptable Lösung: Verlinkungen mit Hilfe von JavaScript werden von Suchmaschinen nicht erkannt – die Seite bleibt also „ungecrawlt”. Umgangen wird dieses Problem meist mit sogenannten Brückenseiten, die zu den einzelnen Seiten führen, was wiederum zusätzlichen Aufwand bei der Pflege bedeutet.

Um diesen Problemen aus dem Weg zu gehen kann die Navigation aus den einzelnen Seiten ausgelagert und zentral gespeichert werden. Änderungen in der Navigationsstruktur müssen dann nur noch an einer Stelle berücksichtigt werden. Die Nutzung von Server Side Includes (SSI) hilft uns Wartungsaufwände zu sparen. Das folgende Beispiel soll dazu dienen, die grundsätzliche Struktur einer solchen Lösung zu vermitteln:

<html>
<body>
    <div style="display:inline;float:left;">
        <!--#include virtual="/menu.shtml" -->
    </div>
    <div style="display:inline;float:left;">
        Hier steht der Seiteninhalt
    </div>
</body>
</html>

Sieht man sich den oberen Code-Abschitt an so fällt auf, dass die Seite an der Stelle wo normalerweise die Navigation steht lediglich einen Verweis auf die Datei enthält, in der die Navigation untergebracht ist. Mit Hilfe des SSI-Befehls include wird der Inhalt der angegebenen Datei – in diesem Falle der Datei /menu.html – in die Seite eingefügt. Eben in dieser Datei befindet sich das komplette Menu der Web-Site. Um das Menu auf jeder einzelen Seite anzuzeigen genügt es diesen SSI-Befehl in jede Seite einzubauen, in der das Navigationsmenu dargestellt werden soll. Der Web-Server übernimmt nun die Integration des Navigationsmenus in die jeweilige Seite.

Der folgende Code-Abschnitt zeigt den Inhalt der Datei /menu.shtml. Hier werden die einzelnen Navigationslinks zusammengestellt, die von der jeweiligen Position im Web-Auftritt abhängen. Dabei ist darauf zu achten, dass die Navigationsstruktur in diesem Beispiel auch eine gewisse Verzeichnisstruktur voraussetzt, in der die einzelnen Seiten gespeichert sein müssen.

<ul>
    <li>
        <!--#if expr="${REQUEST_URI} != /^\/tut\/tut\.shtml/" -->
            <a href="/tut/tut.shtml">Tutorials</a>
        <!--#else -->
            Tutorials
        <!--#endif -->
        <!--#if expr="${REQUEST_URI} = /^\/tut\//" -->
            <ul>
                <li>
                    <!--#if expr="${REQUEST_URI} != /^\/tut\/tut1\.shtml/" -->
                        <a href="/tut/tut1.shtml">Tutorial 1</a>
                    <!--#else -->
                        Tutorial 1
                    <!--#endif -->
                </li>
                <li>
                    <!--#if expr="${REQUEST_URI} != /^\/tut\/tut2\.shtml/" -->
                        <a href="/tut/tut2.shtml">Tutorial 2</a>
                    <!--#else -->
                        Tutorial 2
                    <!--#endif -->
                </li>
            </ul>
        <!--#endif -->
    </li>
</ul>

Im Code-Block oben werden zwei verschachtelte Listen erzeugt, die ein zweistufiges Navigationsmenu darstellen. Abhängig von der angeforderten URL (gespeichert in der Variable REQUEST_URI) wird der entsprechende Menupunkt entweder als reiner Text oder als Link dargestellt. Wird er als Text dargestellt, so befindet sich der Benutzer auf genau dieser Seite, die damit nicht anklickbar sein muss. Befindet sich ein Benutzer beispielsweise auf /tut/tut.shtml, so wird dieser Menupunkt nicht anklickbar sein. Hat der Benutzer allerdings die URL /tut/tut1.shtml angefordert, so wird dieser Menupunkt als Text dargestellt und alle anderen als Links. Die logische Position auf der Site wird mit Hilfe von regulären Ausdrücken über die URL abgefragt. Das Untermenu der Tutorials wird nur dann angezeigt, wenn die angeforderte Seite in einem Verzeichnis unterhalb von /tut/ liegt. Auf diese Weise lässt sich eine verzeichnisgesteuerte Menustruktur aufbauen.

Dieses einfache Beispiel soll lediglich als Hilfe dienen und sieht wahrlich nicht besonders gut aus. Das Aussehen der Navigation sollte – wie üblich – grundsätzlich durch die Verwendung von Cascading Stylesheets (CSS) geregelt werden. Ob die Navigation jetzt horizontal, vertikal oder wie auch immer dargestellt werden soll lässt sich mit deren Hilfe leicht festlegen.

¬ Menu