PHP/Tutorials/Templates/Dateien mit include nachladen

Aus SELFHTML-Wiki
< PHP‎ | Tutorials‎ | Templates
Wechseln zu: Navigation, Suche
← Einführung
Templates mit PHP
(Übersicht)
Verarbeitung →

Informationen zu diesem Text

Lesedauer
45min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
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 besteht einerseits aus dem Grundgerüst, den (weitgehend) unsichtbaren Angaben des head und dem footer, andererseits aus Navigation und Inhaltsbereich. 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.

Auslagern von Seitenkopf und -fuß[Bearbeiten]

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:

ausgelagerter Seitenkopf in header.php 
<!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:

ausgelagerter Footer in footer.php 
<?php
$today = date('d.m.Y');
$now = date('H:i:s'); ?>

  </main>
  <footer>
    <p><a href="https://selfhtml.org/impressum.html">Impressum</a></p>
    <p>Seite abgerufen am <?=$today?> um <?=$now?> Uhr.</p>
  </footer>
</body>
</html>

Die Bausteine werden in einen Unterordner includes abgespeichert und erhalten die Dateiendung .php.

Einbinden in unsere Webseite[Bearbeiten]

Webseite index.php
<?php $site_name = "HTML5-Seite mit Grundstruktur"; include ("./includes/header.php"); ?> <article> <h2>Überschrift</h2> <p>Dies ist meine erste HTML5-Seite</p> ... mehr Inhalt </article> <aside> <h3>Weiterführende Links</h3> <ul> <li><a href="#link_1.html">Wiki</a></li> <li><a href="#link_2.html">Blog</a></li> <li><a href="#link_3.html">Forum</a></li> </ul> </aside> <?php include (".includes/footer.php"); ?>

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.

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.

Beachten Sie: Während Sie HTML-Dateien einfach von Ihrer Festplatte aus öffnen und darstellen können, benötigen Sie für PHP-Dateien einen PHP-Interpreter auf einem Webserver. Sie können auch auf Ihrem Computer einen solchen Webserver einrichten.
Hauptartikel: PHP/Tutorials/Einstieg/Fehlerbehandlung#Kann mein Webspace PHP?

Auslagern der Navigation[Bearbeiten]

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
ausgelagerte Navigation in nav.php 
  <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.

Navigation in Seitenkopf einbinden 
<!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>
Beachten Sie: Die Pfadangabe erfolgt dabei immer vom ursprünglich aufrufenden Dokument aus gesehen. Richtig ist also include("./includes/nav.php") und nicht etwa include("nav.php") weil wir uns schon im include-Verzeichnis befinden.

Verlinke niemals auf die aktuelle Seite[Bearbeiten]

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.

Beachten Sie: Es gibt keine Garantie, dass der Eintrag $_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.
ausgelagerte Navigation in nav.php 
<?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[Bearbeiten]

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.

ausgelagerte Navigation in nav.php 
<?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.


← Einführung
Templates mit PHP
(Übersicht)
Verarbeitung →

Quellen[Bearbeiten]

  1. ↑ php.net: $_SERVER

Weblinks[Bearbeiten]

Abgerufen von „http://wiki.selfhtml.org/index.php?title=PHP/Tutorials/Templates/Dateien_mit_include_nachladen&oldid=65954“