PHP/Tutorials/Templates/Dateien mit include nachladen
- 45min
- einfach
- Grundkenntnisse in
- HTML
- PHP
Durch CSS können Sie Inhalt und Layout sinnvoll voneinander trennen und das Layout in Stylesheet zentral verwalten. Aber auch das HTML-Markup ist nicht auf jeder Seite vollständig anders. Außer den individuellen Teilen wir Navigation und Inhalt gibt es auch Standardelemente wie Grundgerüst, head-Bereich und footer.
In diesem Tutorial lernen Sie, wie Sie immer wiederkehrende Elemente Ihrer Webseite in eigene Dateien auslagern können, die Sie dann problemlos einbinden und nachladen können. Änderungen, wie das Einfügen eines Links zu einer neuen Seite, müssen dann nur einmal zentral erledigt werden.
Gerade bei mittelgroßen Webprojekten kann die ständige Aktualisierung zahlreicher Seiten hohen Arbeitsaufwand bedeuten. Alternativ käme der Einsatz eines CMS in Frage.
Inhaltsverzeichnis
Auslagern von Seitenkopf und -fuß
Als Beispieldatei verwenden wir unsere Webseite aus dem HTML5-Tutorial.
Da der head für jede Seite bis auf den Seitentitel identisch ist, können wir ihn aus unserem HTML-Dokument ausschneiden und als header.inc.php abspeichern:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./source/main.css" />
<title><?=$site_name?></title>
</head>
<body>
<h1><?=$site_name?></h1>
<main>
Mit dem Footer können wir genauso verfahren. Für die Aufbereitung der Abrufzeit wird der vom Server gelieferte Zeitstempel verwendet.
<?php
$abrufZeit = $_SERVER['REQUEST_TIME'];
?>
</main>
<footer>
<p><a href="https://selfhtml.org/impressum.html">Impressum</a></p>
<p>Seite abgerufen am <?= date('d.m.Y', $abrufZeit) ?> um <?= date('H:i:s', $abrufZeit) ?> Uhr.</p>
</footer>
</body>
</html>
Die Bausteine werden in einen Unterordner includes abgespeichert und erhalten die Dateiendung .php.
Anmerkung: Es ist wichtig, dass Sie für die Aufbereitung der Abrufzeit im <footer> nicht einfach zweimal die date()-Funktion ohne zweiten Parameter aufrufen. Das funktioniert nur fast immer. Denn date() verwendet dann die aktuelle Systemzeit beim Funktionsaufruf und mit etwas Pech könnten Sie so das Datum vor Mitternacht und die Zeit nach Mitternacht ausgeben.
Einbinden in unsere Webseite
Anstelle der ausgeschnittenen Code-Abschnitte fügen wir jeweils ein include() ein, das die jeweilige Datei aufruft. Damit der PHP-Befehl erkannt und ausgeführt wird, müssen wir unsere HTML-Datei in index.php umbenennen. (Man kann seinen Server auch so konfigurieren, dass die Dateien nicht die Endung php haben müssen, aber das soll uns an dieser Stelle nicht interessieren.)
Die includierten Daten müssen nicht die Endung .php haben, diese ist völlig beliebig. Die Dateien sollten die Endung .php aber durchaus haben, wenn es Dateien sind, die php-Code enthalten – allein schon weil Code-Editoren dann das Syntax-Highlighting entsprechend einschalten. Dann bietet sich ggf. zur Klarheit auch die Kombination mehrerer Endungen an, z. B. datei.inc.php. Teilweise wird auch die Endung .tpl für Templates verwendet.
Wenn in den includierten Dateien PHP-Code vorkommt, dann muss dieser auch als PHP-Code markiert sein. Also das öffnende <?php und ggf. schließende ?> enthalten.
Wenn in einer includierten Datei kein PHP-Code vorkommt, dann sollte anstelle von include() besser readfile() verwendet werden, das ist ressourcenschonender, weil dieser Inhalt nicht vom PHP-Interpreter geparst werden muss.
Von außen sieht niemand, dass Seitenkopf und -fuß aus ausgelagerten Dateien stammen, da der Browser nur den ihm gelieferten HTML-Code zu Gesicht bekommt und darstellt.
Hauptartikel: PHP/Tutorials/Einstieg/Fehlerbehandlung#Kann mein Webspace PHP?
Wir gehen davon aus, dass unser Projekt über drei Seiten verfügen soll, die sich alle im Hauptverzeichnis befinden werden.
| Dateiname | Seitenname (Linktext) |
|---|---|
| products.php | Unsere Produkte |
| team.php | Wer wir sind |
| contact.php | Kontakt/Impressum |
<nav>
<ul>
<li><a href="products.php">Unsere Produkte</a></li>
<li><a href="team.php">Wer wir sind</a></li>
<li><a href="contact.php">Kontakt/Impressum</a></li>
</ul>
</nav>
Soweit, so einfach. Dieses Template muss nun innerhalb des Seitenkopfes eingebunden werden.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=".source/main.css" />
<title><?=$site_name?></title>
</head>
<body>
<h1><?=$site_name?></h1>
<?php include("./includes/nav.php") ?>
<main>
include("./includes/nav.php") und nicht etwa include("nav.php") weil wir uns schon im include-Verzeichnis befinden.Verlinke niemals auf die aktuelle Seite
Um den Seitenbesuchern eine Orientierung zu geben, auf welcher Seite sie sich gerade befinden, sollte die aktuelle Seite deutlich gekennzeichnet und nicht anklickbar sein. Die aktuelle Seite wird zusätzlich mit dem ARIA-Attribut aria-current="page" ausgezeichnet. So können auch Screenreader erkennen, dass dies die aktuelle Seite ist.
PHP weiß, welches die aktuelle Seite ist. Das Array $_SERVER enthält Informationen über Header, Pfade und die verschiedenen Wege, das Skript anzusprechen. Die Einträge in diesem Array werden vom Webserver erstellt, $_SERVER["SCRIPT_NAME"] enthält den Pfad zur aktuellen Seite, dem aktuellen Script.
$_SERVER["SCRIPT_NAME"] tatsächlich existiert.[1] Schauen Sie sich in diesem Fall etwa mit print_r($_SERVER) den Inhalt des Arrays an, zur besseren Lesbarkeit sollten Sie diesen Aufruf in ein pre-Element stecken.<?php if ($_SERVER["SCRIPT_NAME"] == "products.php") : ?>
<li aria-current="page"><a>Unsere Produkte</a></li>
<?php else : ?>
<li><a href="products.php">Unsere Produkte</a></li>
<?php endif; ?>
Dieser Code muss für jede zu verlinkende Datei erstellt werden. Schon im oberen Ausschnitt sehen wir, dass wir uns wiederholen, ein Umstand, den Programmierer gern zu vermeiden versuchen, was häufig mit einer erhöhten Komplexität einhergeht.
vorhandene Seiten in einem Array
Wir bilden unsere Tabelle
| Dateiname | Seitenname (Linktext) |
|---|---|
| products.php | Unsere Produkte |
| team.php | Wer wir sind |
| contact.php | Kontakt/Impressum |
in einem Array ab und iterieren über das Array um alle Links zu erstellen.
<?php
$pages = [
[
'name' => 'products',
'linktext' => 'Unsere Produkte',
],
[
'name' => 'team',
'linktext' => 'Wer wir sind',
],
[
'name' => 'contact',
'linktext' => 'Kontakt/Impressum',
],
];
foreach ($pages as $index => $page) :
$listitem = "<li";
if ($_SERVER["SCRIPT_NAME"] == $page["name"] . ".php") :
$listitem .= " aria-current='page'><a>";
else :
$listitem .= "><a href='" . $page["name"] . ".php'>";
endif;
$listitem .= $page["linktext"] . "</a></li>";
$pages[$index]["listitem"] = $listitem;
endforeach; ?>
<nav>
<ul>
<?php foreach ($pages as $page) : echo $page["listitem"]; endforeach; ?>
</ul>
</nav>
Wir fügen dem Array $pages für jede Seite das der Situation entsprechende Listenelement hinzu und trennen dabei auch die Geschäftslogik von der Ausgabe.
Quellen
Weblinks
- Marc Ermshaus: PHP-Includes: Niemals ohne __DIR__
- PHP Manual: include
