Arbeiten mit PHP-include()

Das Ziel einer Programmierung sollte es sein, den Programmcode übersichtlich und klein zu halten. Oft hat man immer wiederkehrende Methoden und Funktionen, die in anderen Scripten eingebunden werden können. Anstatt aber den Code einfach dort hinzukopieren, wäre es sinnvoll, wenn man den Code aus einer externen Datei aufrufen könnte, wie wir es z.B. von den Stylesheets kennen.

Genau so eine Funktion stellt uns PHP bereit: include(). So ist es ein Kinderspiel, Codeblöcke auszulagen und immer, wenn wir sie brauchen, in unser Script einzubinden.

Nehmen wir als Beispiel eine Website. Aus Gründen der Wiederauffindbarkeit sollten die Seiten einer Homepage ein gleiches Aussehen haben. Logischerweise ist daher ein Großteil des Codes identisch.

Zum Testen verwenden wir eine von meinen Beispielsites, den Zauberwald bei Ramsau. Hier könnt ihr euch den Zauberwald bei Ramsau einmal anschauen. Da diese Seite nur wenig html-Code enthält, ist sie für unser Beispiel gut geeignet. Es geht ja schließlich nur darum, das Prinzip zu verstehen.

Wir wollen nun Teile des html-Codes mit Hilfe der include()-Anweisung auslagern. Hier der entsprechende html-Code vor der Auslagerung:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<title>Beispielwebsite</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<meta name="keywords" content=""/>
<link href="styles.css" type="text/css" rel="stylesheet"/>

</head>

<body>
<div id="wrapper">

<div id="kopf"><h1>Zauberwald bei Ramsau</h1></div>

<div id="navi">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Bilder</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Gästebuch</a></li>
</ul>

</div>
<div id="content">
<br/>
<h2>Willkommen auf unserer Beispielwebsite</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<img src="bilder/bild1.png" width="300" height="423" style="float:left;"/> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<img src="bilder/bild2.png" width="300" height="423" style="float:right;"/> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<img src="bilder/bild3.png" width="300" height="423" style="float:left;"/> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p> </p>
<p> </p>

</div>
<div id="fuss">
<p style="text-align:center">
<a href="#">Home</a>&nbsp;&nbsp;&bull;&nbsp;&nbsp;
<a href="#">Kontakt</a>&nbsp;&nbsp;&bull;&nbsp;&nbsp;
<a href="#">Impressum</a></p>
</div>
</div>
</body>
</html>

Wir haben in dieser Site vier Bereiche:

  • den Head
  • die obere Navigation
  • den Content
  • und den Fuß

Beginnen wir bei der Auslagerung des Heads. Sinnvollerweise sollte man diesen Bereich nicht anderen Seiten wiederverwenden, da dort u.U. andere Titles, Keywords und Descriptions verwendet werden. Daher lagern wir in die Datei head_startseite.html aus.

Das alles kommt in diese Datei:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<title>Beispielwebsite</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<meta name="keywords" content=""/>
<link href="styles.css" type="text/css" rel="stylesheet"/>

</head>

<body>
<div id="wrapper">

<div id="kopf"><h1>Zauberwald bei Ramsau</h1></div>

Als nächstes folgt nun die Navigation. Wenn wir diese Navigation auch in anderen Seiten einbinden, so hat dies noch einen Vorteil: müssen wir einmal einen Link ändern, so haben wir mit nur einer Änerdung dies auch für die anderen Seiten erledigt. Nennen wir die externe Datei navigation.html.

<div id="navi">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Bilder</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Gästebuch</a></li>
</ul>

</div>

Den Content lagern wir in diesem Fall nicht aus.

Nun noch den Fuß. Auch diesen können wir in weiteren Seiten wieder verwenden. Nennen wir die externe Datei fuss.html.

</div>
<div id="fuss">
<p style="text-align:center">
<a href="#">Home</a>&nbsp;&nbsp;&bull;&nbsp;&nbsp;
<a href="#">Kontakt</a>&nbsp;&nbsp;&bull;&nbsp;&nbsp;
<a href="#">Impressum</a></p>
</div>
</div>
</body>
</html>

Wir haben nun auf unserer Seite nur noch den Content stehen. Wir speichern diese unter dem Namen index.php.

Hier fügen wir nun per include wieder die anderen Teile ein, so dass das Endergebnis folgendermaßen aussehen sollte:

<?php
include('head_startseite.html');
include('navigation.html');
?>

<h2>Willkommen auf unserer Beispielwebsite</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<img src="bilder/bild1.png" width="300" height="423" style="float:left;"/> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<img src="bilder/bild2.png" width="300" height="423" style="float:right;"/> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<img src="bilder/bild3.png" width="300" height="423" style="float:left;"/> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p> </p>
<p> </p>

<?php
include('fuss.html');
?>

Nun sollten wir unsere Seite wieder so aussehen wie vor dem Umbau:

Beispielwebsite;

Wenn wir nun im Content einer Seite etwas ändern müssen, so brauchen wir nicht den gesamten Programmcode zu durchforsten, was bei größeren Projekten schon aufwendig sein kann, sondern nur den fast reinen Content in unserer index.php.


« zurück


;