Nischenseiten ohne WordPress & Co. – Teil 2

Das Grundlayout der kleinen Nischenseite steht und ist in sinnvolle Einzelteile aufgeteilt. Als nächstes müssen der Webseite diverse Funktionen spendiert werden. Denn auch wenn auf den ersten Blick alles funktioniert, gilt es später auftauchende Probleme zu vermeiden.

Das Projekt besteht bislang aus einer Seite. Die index.php im Stammverzeichnis inkludiert alle nötigen Dateien und macht diese Einzelteile wieder zu einer gesamten Webseite. Die weiteren Unterseiten sollen der Übersicht (und aus SEO-Gründen) in weiteren Unterverzeichnissen liegen.
Der zweite Menüpunkt soll also zu einer Unterseite in das Verzeichnis /thema1 verlinken. War nicht im ersten Teil die Rede davon, dass die index.php immer geöffnet wird, wenn diese in einem Verzeichnis existiert? Dann müsste es doch genügen, die index.php in dem neuen Verzeichnis /thema1 zu speichern? Probieren wir’s aus.

Im Grunde keine schlechte Idee, doch leider hagelt es ziemlich viele Fehlermeldungen. Das Problem ist der aktuelle Pfad. Die index.php im Ordner /thema1 will ebenfalls die Dateien inkludieren, kann diese aber nicht finden. Der Befehl

versucht die Datei head.php aus dem Ordner /meta zu laden, der aber in diesem Ordner /thema1 gar nicht existiert. Hier muss der richtige Pfad eingegeben werden, denn dieser liegt eine Ordnerebene höher.

Durch das vorangestellte ../ wechselt PHP beim Dateizugriff also erst einen Ordner nach oben in /beispielprojekt um erst dann aus dem Ordner /meta die head.php zu laden.

Das lässt sich manuell schon mit recht wenig Aufwand betreiben. Aber dauerhaft praktischer wäre es natürlich, wenn einmal die aktuelle Dateiposition ermittelt würde, der Pfad automatisch festgelegt wird und man sich dann mehr Gedanken darum machen muss.
Auch an dieser Stelle kommt PHP ins Spiel.

PHP läuft bekanntlich auf dem Server und stellt standardmäßig Informationen über diesen zur Verfügung. Diese Informationen sind in den Servervariablen gespeichert und diese können jederzeit ausgelesen und verwendet werden. Im aktuellen Fall benötigen wir also Informationen darüber, in welchem Ordner wir uns gerade befinden.
Dazu dient die Servervariable PHP_SELF. Diese gibt den aktuellen Pfad relativ zum Hauptverzeichnis aus.

In unserem Beispiel würde also der Quelltext

den aktuellen Pfad in der Variable $path speichern und folgende Ausgabe erzeugen:

/beispielprojekt/index.php

Wir befinden uns also aktuell in der index.php im Hauptverzeichnis. Um auf die Unterordner zugreifen zu können, kann also alles so bleiben.
Würde der Inhalt von $path aber so aussehen:

/beispielprojekt/thema1/index.php

befindet sich die aktuelle index.php in einem Unterordner. Zum Laden eines Bildes aus dem Ordner /beispielprojekt/img muss also aus dem Ordner /thema1 mit ../img/bild.jpg auf das Bild zugegriffen werden. Aber wie gelingt der automatische Verzeichniswechsel?
Im Pfad sind die Ordner jeweils durch einen / (Slash) voneinander getrennt. Kommen also in der Variable $path mehr als zwei Slashes, also Schrägstriche, vor, muss dem Pfad zur Bilddatei ein ../ vorangestellt werden.

Auch das ist mit PHP schnell gelöst. Denn PHP kann in einem String (das ist der Inhalt der Variable $path) die Anzahl jedes beliebigen Zeichens ermitteln:

Die Funktion substr_count() zählt alle in $path vorhandenen Slashes speichert die Anzahl in der Variable $countslash. Danach wird mit der if-Abfrage geprüft, ob $countslash den Wert 3 enthält und wenn ja, erhält die Variable $root den String „../“ zugewiesen. Wenn nicht, bleibt $root einfach leer.
Um nun aus einem Unterordner ein Bild zu laden, wird einfach folgender Code eingesetzt:

Praktischerweise kann PHP-Code auch mitten im HTML stehen und das machen wir uns hier zu nutze. Abhängig davon, ob der aktuelle Pfad der Datei zum Laden des Bildes einen Verzeichniswechsel erfordert oder nicht, setzt die Variable $root das „../“ davor – oder eben nicht.

Aber Obacht: Wer tiefere Ordnerstrukturen plant, muss dann natürlich die if-Abfrage entsprechend anpassen.

Verbindung zur Datenbank

Wird bei einem so kleinem Projekt überhaupt eine Datenbank benötigt? Nicht unbedingt, kann aber auf längere Sicht Arbeit ersparen. Die Datenbank findet im Beispielprojekt dafür Verwendung, die Daten für Title, Description, Keywords (angeblich unwichtig) und die Informationen für das Open-Graph-Protokoll im Seitenkopf bereit zu stellen.
Wie das genau vonstatten geht, klärt der nächste Teil. Jetzt erstellen wir zunächst die Datenbank.

Über das

lässt sich nicht nur der Apache-Server starten, sondern auch der Datenbankserver.
Stehen beide Dienste auf „Running“ kann es losgehen. Genau wie PHP kann auch MySQL mit Befehlen über eine Eingabeaufforderung gesteuert werden. Das ist aber nicht gerade bequem und als grafischen Ersatz gibt es phpMyAdmin. phpMyAdmin ist ein Tool für den Browser um Datenbanken anzulegen, Tabellen zu erstellen, löschen, bearbeiten… Kurz: Alles wichtige lässt sich quasi per Mausklick erledigen, phpMyAdmin setzt es in entsprechende Befehle um.
Um phpMyAdmin aufzurufen, muss einfach im Browser

https://localhost/phpmyadmin

eingetippt werden.

Et voilá, phpMyAdmin öffnet sich in der Startansicht. Im linken Bereich des Browsersfensters sind alle vorhandenen Datenbanken aufgelistet. Das dürften nach der frischen Installation von XAMPP nicht viele sein.
Für das Beispielprojekt wird eine neue Datenbank benötigt, welche ganz einfach in der rechten Hälfte des Bildschirms mit der Funktion „Neue Datenbank anlegen“ erledigt werden kann. Das ist erfreulich unkompliziert: Name der Datenbank eingeben, bei Kollation utf8_unicode_ci einstellen und los geht’s.

Zwischeninfo: Der Zeichensatz der Datenbank
Das Thema Zeichensatz ist eine nicht ganz unkomplizierte Angelegenheit. Nur eine kurze Erklärung: Es gibt neben den normalen, quasi weltweit gültigen Buchstaben wie zum Beispiel c,d,g, auch im deutschen bereits einen ganzen Schwung an Sonderzeichen wie ä,ü,ö – die im englischen Sprachraum keine Verwendung finden. Und so gibt es für jeden Sprachraum einen eigenen Zeichensatz. Das bedeutet, wenn Sonderzeichen in der Datenbank gespeichert werden sollen, die im voreingestellten Zeichensatz nicht vorhanden sind, werden diese nicht korrekt gespeichert.
UTF-8 schafft hier Abhilfe und sorgt für korrekte Zeichen.

Nach dem Klick auf „Anlegen“ ist die Datenbank erstellt und auch gleich betriebsbereit. Aber die Datenbank ist nur die Hülle für eigentlichen Inhalte. Die sind in Tabellen gespeichert, die in der Datenbank angelegt werden können und das geschieht nun im zweiten Schritt.
Davor ist aber etwas Überlegung nötig.

Die Informationen, die aus der Datenbank geholt werden müssen, sollen dynamisch in den Seitenkopf zwischen <head> und </head> eingefügt werden. Dazu werden also folgende Infos benötigt:

• Titel
• Description
• Keywords
• og: title
• og: description
• og: url
• og: image

Wer auf die Angaben für das Open-Graph-Protokoll verzichten möchte, kommt natürlich auch mit den ersten drei Angaben zurecht, beim Beispielprojekt werden aber alle sieben Angaben in der Liste genutzt. Das bedeutet, dass unsere Tabelle in der Datenbank mindestens acht Felder haben muss.
Warum acht Felder? Ganz einfach. Um für die gerade von einem Nutzer aufgerufene Webseite den passenden Datensatz zu finden, benötigen wir und auch die Datenbank einen Anhaltspunkt. Dieser Anhaltspunkt ist eine eindeutige Kennung, die für jede einzelne Seite des Projektes vergeben wird – dafür wird eine zusätzliche Spalte benötigt.
PHP sucht dann nach der vorgegebenen Kennung in der Datenbank und setzt die jeweiligen Werte in den HTML-Quelltext.

Die Datenbanktabelle erstellen

Zum Anlegen der ersten Datenbanktabelle in der soeben erstellten Datenbank „beispielprojekt“ muss zunächst in der linken Seitenleiste die entsprechende Datenbank ausgewählt werden. Da bislang keine Tabellen in der Datenbank existieren, fordert phpMyAdmin nun dazu auf, eine Datenbanktabelle zu erstellen. Gut das wir vorher überlegt haben, wie viele Spalten unsere Datenbanktabelle benötigt. Der Tabelle geben wir den Namen header und bei „Anzahl der Felder“ wird eine 8 eingetragen. Ein Klick auf „Anlegen“ erzeugt die Datenbanktabelle mit 8 Feldern.

Diese 8 Felder benötigen jeweils einen Namen. Dazu wird einfach folgender Aufbau verwendet:

 

Kurze Erläuterung zur Spalte Typ: Damit MySQL besser mit den Daten umgehen und diese wirtschaftlicher verwalten kann, empfiehlt sich das Einstellen der Datentypen. Beinhaltet eine Spalte in der Datenbanktabelle nur Zahlen, empfiehlt es sich dort auch einen entsprechenden Datentypen zu verwenden. Für die kurzen Einträge wie Titel und Description verwenden wir in diesem Fall den Datentyp VARCHAR. Dieser speichert Text, allerdings nur bis zu der Länge, die in der Spalte Länge angegeben wird. Das spart Speicherplatz, auch wenn es in einem kleinen Projekt wie hier darauf natürlich nicht besonders ankommt.

Nach dem Speichern steht die Tabelle in der Datenbank zur Verfügung. Diese ist momentan natürlich leer und wird im nächsten Teil befüllt.

Wer keine Lust hat, dass von Hand zu machen, wählt bei phpMyAdmin oben im Menü einfach „SQL“ aus und kopiert folgenden Code in das Textfeld. Damit wird die eben gezeigte Datenbanktabelle automatisch erzeugt.

PHP und MySQL verbinden

Um nun überhaupt Daten aus der Datenbank lesen zu können, muss PHP erstmal eine Verbindung zur Datenbank herstellen. Dafür ist PHP „ab Werk“ gerüstet und stellt entsprechende Befehle zur Verfügung:

Mit mysqli_connect() stellt PHP eine Verbindung zu MySQL her. Dafür sind allerdings diverse Parameter nötig, die in Anführungszeichen mit Komma getrennt in den Klammern angegeben werden. Der erste Parameter ist der Datenbankserver (in unserem Fall localhost, das ist aber je nach Provider verschieden). Der zweite Parameter ist der Benutzername. Auf unserem XAMPP-Testsystem ist das standarmäßig root. Danach folgt das Kennwort, das aber in unserem Fall leer ist und abschließend der Name der Datenbank. Sollten die Verbindungsdaten nicht funktionieren, wird der Verbindungsaufbau mit der Fehlermeldung „Verbindung fehlgeschlagen“ abgebrochen. Gelingt die Verbindung, wird für die aktuelle Verbindung der UTF-8 Zeichensatz festgelegt.

Im laufenden Betrieb auf dem Webserver müssen die Daten natürlich entsprechend abgeändert werden. Wie diese lauten, kann im Kundenmenü gefunden werden.

Das Puzzle zusammensetzen

In diesem Teil haben wir also unsere Pfadangabe automatisch ermittelt und die Datenbankverbindung hergestellt. Damit wir diese Dateien immer verfügbar haben, speichern wir beide Codeblöcke in einer Datei ab, nennen diese config.php und speichern sie im Unterordner /inc. Diese Datei muss dann im Projekt immer eingebunden werden, was zum Beispiel beim Anpassen der MySQL-Zugangsdaten später auf dem Server den Vorteil hat, die Datei nur einmal ändern zu müssen.