Seiten dynamisch mit PHP erstellen (Tutorial)

Vielleicht kennen Sie dieses Problem: Sie möchten gerne in Ihre Website eine Navigation oder Fußzeile einbauen, wollen aber auch nicht bei jeder Änderung an der Navigation oder Fußzeile alle Seiten anpassen. Nur mit HTML gibt es hier keine Lösung und nicht jeder Benutzer hat JavaScript im Browser aktiviert. Stattdessen sollten Sie auf eine serverseitige Programmiersprache, wie zum Beispiel PHP zurückgreifen.

[Bildschirmfoto] Seiten dynamisch mit PHP erstellen

➤ Fast jeder Webspace-Provider bietet diese Möglichkeit, erkundigen Sie sich daher zuvor bei Ihrem Provider, ob PHP auf dem entsprechenden Webserver installiert ist. Sollte dies der Fall sein, können Sie einfach die PHP include-Funktion nutzen, die es ermöglicht, den HTML-Code einer Seite aus mehreren Dateien zusammenzusetzen.

Um eine Datei einzubinden, nutzen Sie folgenden PHP-Code:

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

Ein Include ist eine PHP-Anweisung mit der Dateien, die bereits serverseitig (also nicht vom Browser) an die gewünschte Stelle eingefügt werden - und zwar nahtlos. Im HTML-Text ist nicht zu erkennen, welche Passagen der Seite includiert sind.

✔ Sie können so den Inhalt einer Seite in mehrere Dateien aufteilen, diese werden dann beim aufrufen der Seite auf dem Webserver zusammengefügt und an den Browser des Besuchers gesendet.
Sie legen so beispielsweise die auf jeder Seite anderen Inhalte in eine Datei ab. Alles, was im HTML-Code über dem eigentlichen Inhalt der Seite steht (Logo, Navigation) sowie alles, was darunter steht (Copyright, Impressum) in eine andere Datei. Wenn Sie diese Dateien ändern, werden die Änderungen für alle Seiten aktiv, in denen diese eingebunden sind.

Ein einfaches Beispiel

• Datei: navigation.php
In dieser Datei befinden sich die Verweise (Links) zu den einzelnen Dateien der Website.

Navigation
<a href="seite1.php">Seite 1</a> - 
<a href="seite2.php">Seite 2</a> - 
<a href="seite3.php">Seite 3</a>

• Datei: fusszeile.php
Hier befindet sich der Urheberrecht-Hinweis (Copyright) sowie ein Verweis zum Kontaktformular und Impressum.

Fußzeile
&copy; 2024 
- meine-homepage.xy
- <a href="kontakt.php">Kontakt</a>
- <a href="impressum.php">Impressum</a>

• Datei: beispielseite.php
In dieser Beispielseite werden mit der include-Funktion die beiden Dateien eingebunden.

<!DOCTYPE html>
<html>
 <head>
  <title> Überschrift </title>
 </head>
<body>

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

 Inhalt der Seite ...

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

</body>
</html>

Das Ergebnis, der Datei: beispielseite.php wie es beim Browser des Besuchers ankommt.

<!DOCTYPE html>
<html>
 <head>
  <title> Überschrift </title>
 </head>
<body>

Navigation
<a href="seite1.php">Seite 1</a> - 
<a href="seite2.php">Seite 2</a> - 
<a href="seite3.php">Seite 3</a>

 Inhalt der Seite ...

Fußzeile
&copy; 2024 
- meine-homepage.xy
- <a href="kontakt.php">Kontakt</a>
- <a href="impressum.php">Impressum</a>
</body> 
</html>

✔ Das ist doch echt einfach!
Sie können mit der include-Funktion zum Beispiel noch die Meta-Tags oder das Logo der Website einbinden. Durch diese Maßnahme lässt sich Ihre Website besser strukturieren und wird dadurch wesentlich wartungsfreundlicher.

Integration mehrerer Dateien

Meine Website habe ich folgendermaßen aufgebaut; diese besteht aus drei externen PHP-Dateien: kopf.php, nav.php und fuss.php. Damit wird die Pflege der einzelnen Seiten auf ein Minimum reduziert.

• Datei: kopf.php
Diese Datei enthält die Meta-Tags, die Links zur externen CSS und JavaScript-Datei sowie zum Favicon und dem RSS-Feed. 

  <meta name="Robots" content="all, index, follow">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <script src="javascript.js"></script>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="alternate" type="application/rss+xml" href="http://www.meine-homepage.xy/rss.xml">

• Datei: nav.php
Diese Datei enthält das Logo und den Namen der Website sowie die Navigation.
Bitte nicht wundern, denn ich verwende hier schon die neuen HTML 5-Elemente (<header>, <nav>, <article> und <footer>) für die semantische Gliederung und Formatierung der Seite. 

<header>
 <img src="logo.png" width="200" height="50" alt="Logo"> meine-homepage.xy
</header>

<nav>
 <a href="seite1.php">Seite 1</a> - 
 <a href="seite2.php">Seite 2</a> - 
 <a href="seite3.php">Seite 3</a>
</nav>

• Datei: fuss.php
Diese Datei enthält den Urheberrecht-Hinweis (Copyright) sowie die aktuelle Jahreszahl und jeweils einen Link zum Impressum und zum Kontaktformular.

<footer>
 &copy; <?=date("Y");?> 
 meine-homepage.xy - 
 <a href="kontakt.php">Kontakt</a> - 
 <a href="impressum.php">Impressum</a>
</footer>

• Datei: vorlage.php
Diese Datei (eine Kopie davon) nehme ich immer als Vorlage wenn ich eine neue Seite erstelle. In den Blau markierten Teil füge ich dann den Inhalt der neuen Seite ein.

<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title> Überschrift - meine-homepage.xy </title>
  <meta name="description" content="Inhalt der Seite (Beschreibung)">
<?php include "kopf.php"; ?>
 </head>
<body>

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

<article>

  <h1> Überschrift </h1>

  <p>Inhalt der Seite ...</p>

</article>

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

</body>
</html>

➤ Die weitere Seitengestaltung mache ich mit einer » externen CSS-Datei, die zwischen den HTML-Elementen (<body>, <header>, <nav>, <article> und <footer>) enthaltenen Daten lassen sich somit sehr einfach formatieren.

Tipp

Der Bereich zwischen den Tags <head> und </head> sollte nicht ganz in einer externen Datei stehen, sondern wie in der Datei: ⬆ vorlage.php, direkt in die Seite eingefügt werden.
Grund: Somit kann man zum Beispiel im <title>-Tag den passenden Seitentitel eintragen und JavaScripte, CSS-Anweisungen oder Meta-Tags etc. speziell für eine einzelne Seite anpassen.