Tutorial: Simples Template mit PHP und Include

Eine Website besteht nicht nur aus einem Design und Inhalt, sondern auch aus Wartung und Pflege. Doch nach ein paar dutzend Unterseiten können Änderungen an z.B. sich wiederholenden Meta-Daten sehr zeitaufwändig werden, da jede HTML-Datei von Hand geöffnet und bearbeitet werden muss.

Das muss nicht sein. PHP bietet eine einfache, effektive und schnelle Möglichkeit, das Einfügen von Dokumentteilen zu automatisieren.

Vorteile

  • Es macht eine Website pflegeleicht.
  • Es dient der Übersichtlichkeit.
  • PHP ist sehr verbreitet.
  • Serverseitig: Der Besucher bekommt von der PHP-Prozedur nichts mit (anders als bei z.B. AJAX).
  • Benutzerfreundlich: Methode funktioniert browserübergreifend und es kann auf Frames verzichtet werden.

PHP Includes als Template

„Include“ ist das Stichwort zum Erfolg. Es ist ein Sprachkonstrukt der serverseitigen Scriptsprache „PHP“, welches eine Datei in die aktuelle Laufzeit einbindet.
Beispiel:

Irgendein Text.
<?php include "include-datei.php"; ?>
Hier geht der Text weiter...
Huhu, ich bin aus einer anderen Datei!

Der PHP-Code von seite.php wird durch den Inhalt von include-datei.php ersetzt. Der Inhalt des Sprachkonstrukts entspricht dem Pfad zur inkludierenden Datei.

Irgendein Text.
Huhu, ich bin aus einer anderen Datei!
Hier geht der Text weiter...

Dieses Prinzip eröffnet eine Vielzahl an Templatemöglichkeiten. Eine Variante möchte ich als Tutorial vorstellen.

Einsteiger-Tutorial: Einfaches Header- und Footer-Include

Zwei Teile einer Webseite wiederholen sich sehr oft: Der head-Teil des HTML-Dokuments, in welchem unter anderem Meta-Daten stehen, und welcher die Kopfzeile enthält, und die Fußzeile. Ein solches Dokument könnte folgendermaßen aussehen:

<!DOCTYPE html>
<html>
	<head>
		<title>Lorem Ipsum</title>
		<meta name="description" content="Lorem ipsum dolor sit amet, consectetur adipisici elit." />
	</head>
	<body>
		<header>
			<h1>Website: lorem-ipsum.de</h1>
		</header>

		<h2>Titel: Lorem Ipsum</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisici elit,
		sed eiusmod tempor incidunt ut labore et dolore
		magna aliqua. Ut enim ad minim veniam, quis
		nostrud exercitation ullamco laboris nisi ut
		aliquid ex ea commodi consequat.</p>

		<footer>
			<p>Copyright 2011 by lorem-ipsum.de</p>
		</footer>
	</body>
</html>

Nach diesem Schema sind meist auch alle Unterseiten aufgebaut. Das Dokument ist unterteilbar in Header, Content und Footer. Da sich der Content auf jeder Unterseite verändert, die restlichen Fragmente jedoch statisch bleiben, sollen Header und Footer auf zwei Dateien ausgelagert werden: header.php und footer.php. Hinweis: PHP-Dateien können nur auf einem Webserver ausgeführt werden.

<!DOCTYPE html>
<html>
	<head>
		<title>Lorem Ipsum</title>
		<meta name="description" content="Lorem ipsum dolor sit amet, consectetur adipisici elit." />
	</head>
	<body>
		<header>
			<h1>Website: lorem-ipsum.de</h1>
		</header>
		<footer>
			<p>Copyright 2011 by lorem-ipsum.de</p>
		</footer>
	</body>
</html>

Nachdem das Dokument zerschnitten wurde, bleibt in seite.html nur noch der Content übrig. Vor und nach diesem Teil müssen jetzt die anderen Fragmente wieder angesetzt werden – durch PHP-Includes. seite.html wird in seite.php umbenannt, um sie als ausführbar zu kennzeichnen, danach wird sie ergänzt:

<?php include "header.php"; ?>

 <h2>Titel: Lorem Ipsum</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipisici elit,
 sed eiusmod tempor incidunt ut labore et dolore
 magna aliqua. Ut enim ad minim veniam, quis
 nostrud exercitation ullamco laboris nisi ut
 aliquid ex ea commodi consequat.</p>

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

Beim Aufruf von seite.php auf einem Webserver, sollte die Seite zusammengesetzt beim Benutzer ankommen (prüfbar durch einen Blick in den Seitenquelltext: in IE -> F12; in FF -> Strg + U).

Das Template ist fertig, nun können weitere Unterseiten nach dem Schema von seite.php erstellt werden.

Dieser Artikel wurde vertaggt mit , , , , , .
Kategorien: Grundwissen, HTML, PHP

Hat Ihnen dieser Artikel gefallen? - Dann abonnieren Sie vlblog um über neue Themen rund ums Web informiert zu werden.

Hinterlasse eine Antwort