Ijs2019medienpartner.jpg

SELFHTML ist in diesem Jahr Medienpartner der IJC.

Für die Konferenz vom 21. – 25. Oktober 2019 in München verlosen wir ein Freiticket.

Weitere Informationen finden sich im SELFHTML-Forum.

PHP/Tutorials/Templates/Dateien mit include nachladen

Aus SELFHTML-Wiki
< PHP‎ | Tutorials‎ | Templates
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
30min
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 Navigation[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:

Beispiel: ausgelagerte Navigation in header.inc.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" media="screen" href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <title><?php echo SITE_NAME ?></title>	
</head>

<body>
  <h1><?php echo SITE_NAME ?></h1>
<main>

Mit dem Footer können wir genauso verfahren:


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

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

Die Templates werden in einen Unterordner /templates abgespeichert und erhalten die Dateiendung .inc.php.

Einbinden in unsere Webseite[Bearbeiten]

Beispiel: Webseite index.php
<?php include ("header.inc.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 ("footer.inc.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.

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.

Verzeichnisstruktur bei der Verwendung von Includes

Von außen sieht niemand, dass die Navigation aus einer ausgelagerten Datei stammt, 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.



Weblinks[Bearbeiten]