Home

Hier geht es um dynamische Bereiche der Seiten, welche in gesonderten PHP-Dateien ausgelagert sind und mittels des PHP-Befehls "inculude" an den entsprechenden Stellen eingebunden werden.

Dazu schreibt man den HTML-Code und/oder den PHP-Code in eine PHP-Datei. Diese wird dann an der Stelle der Seite, wo der Code erscheinen soll, per include-Befehl eingefügt:

<?php include 'footer.php'; ?>

Es gibt in diesem Beispiel 3 Bereiche (oben, links und unten), die sich auf allen Seiten wiederholen. Die dazugehörigen PHP-Seiten sind: header.php, nav.php, footer.php

Das Navigationsmenü hat noch eine weitere Besonderheit und zwar wird die aktuelle Seite im Menü farblich hervorgehoben. Das wird mit dem "DOM Objekt Modell" gemacht. Welche Seite gerade geladen ist, wird in einer PHP-Variable gespeichert, die auf jeder Seite einen anderen Wert bekommt.

Das DOM habe ich in folgendem Javascript Tipp erklärt. Die Javascriptfunktion, welche die farbliche Hervorhebung des aktuellen Menüpunktes regelt, habe ich in einer separten PHP Datei ausgelagert: Die Datei heißt scripte.php. Sie wird im Head Bereich jeder Seite per include eingebunden. <?php include 'scripte.php'; ?>

Da ich Javascript mit PHP kombiniert habe, konnte ich die Javascript Funktion nicht in einer Javascript Datei auslagern.

Die Funktion hat den Namen "aktivieren()" und wird im body-Tag auf jeder Seite aufgerufen.

<body onLoad="aktivieren()">

In der Funktion greife ich auf die Listenelemente des Menüs zu. Das Menü besteht aus einer unordered List.

<ul class="nav">
<li><a href="index.php">HOME</a></li>
<li><a href="dateien.php">DATEIEN</a></li>
<li><a href="info.php">QUICK INFO</a></li>
<li><a href="hirtenbrief.php">HIRTENBRIEF</a>
</ul>

Die Listenelemente kann man der Reihe nach über das DOM folgendermaßen aufrufen. Das erste Listenelement der Seite:

document.getElementsByTagName("li")[0]

das zweite Listenelement der Seite

document.getElementsByTagName("li")[1]

und so weiter. Das bedeutet in diesem Falle, dass das Script nicht mehr funktioniert, wenn vor der Navigation weitere Listenelemente auf der Seite hinzugefügt werden. In dem Falle müsste man auf andere Weise auf die Elemente zugreifen.

Man sieht auf der Seite scripte.php wie ich die CSS Eigenschaften verändere. Beispielsweise die Hintergrundfarbe:

document.getElementsByTagName("li")[0].style.backgroundColor = "#D6D6D6";

Anstatt einer id wird in der eckigen Klammer per PHP der Wert einer Variablen aufgeführt. Es ist die Variable $listID

<?php echo $listID ?>

Die Variable bekommt auf jeder Seite im Head Bereich einen Wert zugewiesen und zwar den des entsprechenden Listen Elementes.

<?php $listID= 4; ?>

Danach erfolgt die Einbindung der Seite scripte.php, welche die Javascript Funktion enthält.

<?php include 'scripte.php'; ?>

Wie schon erwähnt, wird diese Funktion dann im body Tag aufgerufen.

<body onLoad="aktivieren()">

Das ist auch der Grund, warum die Javascript Funktion nicht in der Seite nav.php integriert ist, die ja sowieso per include eingebunden wird. Aber diese Einbindung erfolgt erst im Body-Bereich der Html Seite und von daher stünde die Funktion beim Aufruf im body-Tag noch nicht zur Verfügung.