Tutorials / Auslagern von Header und Footer
In diesem Tutorial wird erklärt, wie man PHP zur Trennung des Seitentemplates, also des Layouts, vom Inhalt verwenden kann. Im Folgenden wird für den Seitenkopf der Begriff Header verwendet und für das Seitenende der Begriff Footer.
Wenn man eine kleine bis mittelgroße Seite verwaltet und bisher auf dynamische Inhalte verzichtet hat, trat ziemlich sicher das Problem auf, dass man in jeder HTML-Seite das komplette Seitendesign schreiben musste. Wollte man nun Änderungen an diesem durchführen, musste man dies in jeder einzelnen HTML-Datei tun. Je größer die Seite wird, desto größer wird dadurch der Aufwand. Zwar gibt es die Möglichkeit dieses Manko mittels Frames und CSS zu verringern, jedoch bringt die Benutzung von Frames auch viele Nachteile mit sich und ist nicht immer besonders komfortabel.
Mittels PHP lässt sich dafür sehr einfach eine Lösung finden: Man schreibt das Seitendesign in eine, oder mehrere Dateien und bindet es in jede Homepage-Seite ein. Dafür wird die PHP Funktion include() verwendet. Diese wird genutzt, um externe Dateien in eine PHP-Datei einzubinden.
Hier nun ein Beispiel dazu:
<html>
<head>
<title>Meine Homepage</title>
<head>
<body>
index.php
<?php
include "header.php";
?>
Hier kommt der Seiteninhalt rein!
<?php
include "footer.php";
?>
footer.php
</body>
</html>
Beispiel anschauen
Dieser Code erzeugt eine HTML Seite welche den Text "Hier kommt der Seiteninhalt rein!" ausgibt. Der erzeugte Quellcode sieht folgendermaßen aus:
<html>
<head>
<title>Meine Homepage</title>
<head>
<body>
Hier kommt der Seiteninhalt rein!
</body>
</html>
Was bringt das alles?
In diesem stark vereinfachten Beispiel würde es einen kaum größeren Aufwand machen, auf die klassische, statische HTML-Weise weiter zu machen. Im folgenden gibt es nun ein etwas komplexeres Beispiel, in welchem 2 Text-Seiten in einem einfachen Design mit Navigation vereint werden.
<html>
<head>
<title>Meine Homepage - <?php
// Ausgabe der Variable $title (Definiert in der jeweiligen, aufgerufenen Seite) um den Seitentitel in dem Browserfenster anzuzeigen
echo $title;
?></title>
<head>
<body>
<!-- Tabelle für das Seitenlayout erstellen -->
<table border="1" align="center" cellpadding="5">
<!-- Erste Tabellenzeile - Gibt den allgemeinen Seitentitel aus. -->
<tr>
<td colspan="2">
<h3>Meine Homepage</h3>
</td>
</tr>
<!-- Zweite Tabellenzeile - Gibt die Navigation und den Seiteninhalt aus -->
<tr>
<!-- Erste Spalte - Die Navigation -->
<td valign="top">
<?php
include "links.php";
?>
</td>
<!-- Zweite Spalte - Der eigentliche Seiteninhalt -->
<td valign="top">
<h4>
<?php
// Ausgabe des Inhaltes der Variable $title für die Seitenüberschrift
echo $title;
?>
</h4>
<!-- Hinweis: Die Tabelle wird in der footer.php fortgeführt. An dieser Stelle erscheint der Inhalt der derzeit aufgerufenen Seite also z.B. index.php oder seite2.php -->
links.php
<a href="index.php">Startseite</a><br />
<a href="seite2.php">Seite 2</a>
index.php
<?php
// Die Variable $title wird vor der Einbindung von header.php definiert damit sie in dieser Datei verfügbar ist
$title = "Startseite";
include "header.php";
?>
Hier kommt der Seiteninhalt rein!
<?php
include "footer.php";
?>
seite2.php
<?php
// Die Variable $title wird vor der Einbindung von header.php definiert damit sie in dieser Datei verfügbar ist
$title = "Seite 2";
include "header.php";
?>
Hier kommt der Seiteninhalt rein!
<?php
include "footer.php";
?>
footer.php
</td>
</tr>
<!-- Dritte Tabellenzeile - Gibt unter der gesamten Seite noch einmal eine Zeile aus für weitere Dinge wie Copyright oder Link zum Impressum welche auf jeder Seite zu sehen sein sollen -->
<tr>
<td colspan="2">
(C) by Name
</td>
</tr>
</table>
</body>
</html>
Beispiel anschauen