Diese Lektion erläutert Schritt-für-Schritt wie die Basis-Struktur einer Webseite in PHP entwickelt werden kann. Es ist das was auch dein WordPress-Theme tut. Behalte hierbei stets im Hinterkopf, dass die Grundfunktion eines Content Management Systems tests die Trennung von Layout (Theme-Entwicklung) und Daten (Content-Erstellung und -Auslieferung) ist. Doch ein Nutzer sieht stets die Webseite als Ganzes. Diese Re-Integration von Layout und Content stellen wir in den nächsten Lektionen vor.
Beginnen wir mit einem einfachen PHP-Rahmen, der die Theme-Dateien (beispielsweise Header und Footer) und deine Content-Strukturdateien definiert.
Wenn Du diese Lektion bearbeitest, solltest Du zumindest die folgenden Lektionen durchgearbeitet haben:
Es ist jedoch besser, wenn Du alle bisherigen Lektionen gewissenhaft behandelt hast.
Es gibt verschiedene Teile einer Webseite, die stets identisch bleiben. Header und Footer sind gute Beispiele hierfür. Zur Erhaltung von Integrität und Wartbarkeit wollen wir diese Dateien (samt ihrer Inhalte) nur ein Mal erstellen und dann bedarfsweise einfügen.
Sonst müsstest Du Header und Footer in jede Unterseite kopieren, die Du erstellst. Das kann in Fehler münden und ist schwer zu warten, da Du dann jede Seite einzeln anpassen müsstest, nur weil sich ein kleiner Teil des Headers verändert hat.
Zunächst machen wir uns Gedanken darüber, aus welchen Unterseiten unsere Seite bestehen soll, beispielsweise:
Wenn Du das weißt, denken wir über das Basis-Layout unserer Webseite nach, beispielsweise:
Du kannst auch über ein Sidebar nachdenken, etc., doch wir wollen uns vorliegend nicht auf das Positionieren von Elementen fokussieren, sondern auf den technischen Hintergrund des dynamischen Zusammenbauens einer Grundstruktur.
Wir entwickeln nun einen “Rest-/Response-Switch”, der die folgenden PHP-Möglichkeiten nutzt:
Diese Lektion wird dir zeigen, wie Du diese Techniken zu deinem Vorteil nutzen kannst.
Lass uns über die grundlegende Struktur deiner Grundstruktur sprechen 🙂
Der folgende Quellcode zeigt Header, Content und Footer, die jeweils andere PHP-Dateien inkludieren.
1 2 3 4 5 6 7 8 | <html><?php include "inc-pages.php"; ?> <head><title>...</title></head> <body> <div id="header"><?php include "inc-header.php" ?></div> <div id="content"><?php include "inc-content.php" ?></div> <div id="footer"><?php include "inc-footer.php" ?></div> </body> </html> |
Du kannst diese Datei als deine index.php speichern. Sie trägt sowohl unseren Request-/Response-Switch als auch die eigentlichen Content-Dateien. Auch gibt es eine weitere Datei in-pages.php, auf die wir gleich zu sprechen kommen.
Ferner kannst Du erkennen, dass sogenannte DIV-Tags mit IDs existieren. Die kannst Du vorerst ignorieren, sie dienen lediglich als Marker dafür, wie Du deine Webseite später mit Cascading Style Sheets (CSS) verschönern kannst. Es gibt jedoch keinen Anlass jetzt über Farben und Rahmenstärken zu sprechen, da wir uns auf den technisch-funktionellen Teil fokussieren wollen.
Die Dateien inc-header.php und inc-footer.php sind direkt verantwortlich für die Ausliferung des gewünschten Contents. Die Datei inc-header.php könnte ein Logo anzeigen, inc-footer.php könnte Copyright-Informationen ausgeben. Es ist ganz dir überlassen, was diese Dateien letztlich anzeigen, beispielsweise könnte hier auch ein Login-Formular stecken, wie wir es später noch behandeln.
Es ist jedoch sicher eine gute Idee ein Menü in deine inc-header.php zu integrieren. Menü soll vorliegend nur HTML-Links meinen, die zu einer anderen Sektion (Unterseite) deiner Webseite führen, beispielsweise index.php?section=home, was wir gleich näher erläutern.
Um in der Lage zu sein, verschiedene Arten Content-Dateien zu laden, müssen wir zunächst definieren welche Dateien und auf welchen Namen diese Dateien bei einem Aufruf geladen werden sollen. Der eigentliche Ladeproezss wird dann erledigt über die Datei inc-content.php, die wir gleich behandeln. Die Datei inc-pages.php definiert zunächst lediglich ein Array, welches wir $files[] nennen wollen, und das wie folgt aussieht:
1 2 3 4 5 6 7 | <?php $files = array(); $files['home'] = "content-home.php"; $files['about'] = "content-about.php"; $files['privacy'] = "content-privacy.php"; $files['contact'] = "content-contact.php"; ?> |
Du erkennst, dass wir vier Positionen im Array definieren: home, about, privacy und contact. Diese Seiten haben wir zuvor als Webseite-Unterseiten in eigenen Dateien definiert. In WordPress können Template-Dateien verwendet werden, die mit verschiedenen Inhalten geladen werden können. Doch es ist wichtig zu sehen, dass es auch verschiedene Template-Dateien geben kann.
Jede der angegebenen Positionen zeigt auf einen einfachen String. Dieser String trägt den Datei-Namen, den wir gleich verwenden werden.
Nun setzen wir alles zusammen. Der folgenden Quellcode ist dein Weg, um auf verschiedene Link-Anfragen zu antworten, während das $files[]-Array als Referenz genutzt wird:
1 2 3 4 5 6 7 8 9 | <?php if ( isset( $_GET["section"] ) AND isset( $files[ $_GET["section"] ] ) ) { include $files[$_GET["section"]]; } else { include $files[$_GET["home"]]; } ?> |
Lass uns darüber sprechen, was hier genau geschieht. Zunächst fragt inc-content.php, ob beim Aufruf des Skriptes ein GET-Parameter angegeben wurde UND ob der Wert des GET-Parameters im Array $files[] enthalten ist. Wenn beides zutrifft, wird die zu diesem Wert gehörende Datei inkludiert.
Beispiel: Dein Menü (innerhalb inc-header.php) trägt einen Link mit Ankertext “Home” und Link-Ziel “index.php?section=home”. Klickt der Nutzer auf “Home”, erkennt inc-content.php, dass ein Parameter namens “section” mit dem Wert “home” übergeben wurde. Es prüft dann, ob ein Eintrag im Array $files[“home”] existiert. Da dies der Fall ist, wird “content-home.php” inkludiert (wie es in inc-pages.php definiert ist).
Wenn es entweder keinen Section-Parameter oder keinen Wert für den Parameter gibt, der im $files[]-Array definiert ist, wird die Startseite (content-home.php) geladen.
Es gibt unzählige andere Wege, um diese Funktionalität abzubilden. Auch das was in WordPress passiert ist noch etwas komplexer, um es Themes und Plugins so einfach wie möglich zu machen die Funktionen von WordPress voll auszuschöpfen. Doch die grundliegende Mechanik ist sehr einfach, und arbeitet ähnlich wie hier erläutert. Der Vorteil einer solchen Mechanik ist, dass die eigentliche Switch-Funktionalität nie wieder verändert werden muss. Du definierst einfach mehrere Postionen in deinem $files[]-Array und fügst deinem Menü weitere Links hinzu. In den einzelnen Content-Dateien kannst Du dann weiteren Content einfügen (ob mit oder ohne Datenbank).
Du kannst die hier erläuterte Grundstruktur zum Bau einer jeden Webseite nutzen, um Content auszuliefern. Kommt der Content aus einer Datenbank (wie es bei WordPress der Fall ist), wird es noch etwas komplexer. In den nächsten Lektionen konzentrieren wir uns daher auf Datenbank-Funktionalität, die verwendet werden kann, um die eigentlichen Content-Dateien (Templates) zu mit Daten aus einer Datenbank füllen.