5.5 Grundgerüst - Inhaltsbereich

Nachdem Sie erfahren haben, wie Sie den Kopf- und den Fußbereich der Webseite umsetzen können werden Sie sich sicherlich fragen, wie Sie diese Inhalte nun miteinander vereinen können. Der simple Trick ist es, auf jeder neuen Unterseite den Kopf- und den Fußbereich an den entsprechenden Stellen einzubinden. Somit ist der Inhalt variabel, aber das Außenrum bleibt konstant gleich, so wie es in der Regel der Fall sein sollte. Am Beispiel dieser Webseite ist es etwa der graue Inhaltsbereich, der sich je nach gewählter Unterseite ändert. Das heißt natürlich nicht, dass der Kopfbereich nicht dynamisch sein kann, denn wie bereits in Kapitel 5.4 angedeutet, können Sie dank der Template Engine sogar erst im Inhaltsbereich den Titel der Webseite festlegen. Dies ist auf die Funktionsweise von TinyButStrong zurückzuführen, denn die gesetzten Variablen werden erst ganz am Schluss ins Template übernommen, so dass Sie bis zu diesem Zeitpunkt Veränderungen daran vornehmen können.

Bevor ich Ihnen zeige, wie Sie eine finale Unterseite mit den bisherigen Komponenten zusammenstellen können, möchte ich Ihnen noch das Zusammenspiel der einzelnen Dateien verdeutlichen. Abbildung 1 zeigt ausgehend vom Aufruf der index.php durch den Webseitenbesucher was anschließend passiert. Zunächst wird die overall_header.php eingebunden, in der Variablen und TinyButStrong initialisiert werden. Anschließend können Sie PHP-Quellcode für die index-Seite unterbringen. Danach binden Sie die overall_footer.php ein um abschließende Funktionen auszuführen. Zu guter Letzt wird das Template geladen und ausgegeben, wobei dieses erneut aus mehreren Dateien besteht, indem es die overall_header.tpl und die overall_footer.tpl einbindet. Dazwischen ist erneut Platz für den HTML-Code der index-Unterseite.

Abbildung 1Dieses Ablaufdiagramm stellt das Zusammenspiel der einzelnen Dateien dar.
Abbildung 1

Inhaltsbereich

Im Folgenden zeige ich Ihnen die Umsetzung einer minimalen statischen Seite am Beispiel der Startseite, die in der Regel beim Aufruf der index.php dargestellt wird.

PHP

Die index.php, also die Datei, die standardgemäß aufgerufen wird wenn Sie beispielsweise eine Domain aufrufen, kann im Minimalfall wie Quellcode 1 aussehen.

Quellcode 1 - PHP Wenn die Seite keine dynamischen Inhalte enthält, reicht diese minimale index.php.
  1. <?php
  2.   $title = '';
  3.   $metadescription = 'Dies ist die Startseite des Webdesign Tutorials.';
  4.   include('overall_header.php');
  5.  
  6.   include('overall_footer.php');
  7.   $TBS->LoadTemplate('index.tpl', FALSE);
  8.   $TBS->Show();
  9. ?>

Denken Sie in dieser Datei daran, die Variablen $title und $metadescription zu setzen, wobei erstere im Notfall auch noch in der overall_footer.php gesetzt wird. In Zeile 4 und 6 binde ich die beiden PHP-Dateien für den Kopf- bzw. Fußbereich ein. Zwischen diesen beiden Dateien können Sie nun den Quellcode unterbringen, den Sie für diese Unterseite benötigen. Ist dies eine statische Seite, auf der Sie lediglich HTML-Code darstellen wollen, so bleibt dieser Bereich leer.
In Zeile 7 wird die Methode LoadTemplate der TinyButStrong-Klasse ausgeführt um ein durch Sie frei definierbares Template zu laden. Um die Zuordnung zu erleichtern, empfehle ich Ihnen das Template wie die PHP-Datei zu benennen.
Nachdem das Template geladen wurde, wird dieses abschließend durch die Show-Methode dargestellt.

Template

Die letzte Datei, die Sie abschließend benötigen ist die index.tpl, wie sie etwa in Quellcode 2 dargestellt wird.

Quellcode 2 - HTML Die index.tpl wird durch die index.php geladen und enthält den HTML-Code des Inhaltsbereichs.
  1. [onload;file=overall_header.tpl]
  2.  
  3. <h1>Webdesign Tutorial</h1>
  4. Dies ist die Startseite des Webdesign-Tutorials.
  5.  
  6. [onload;file=overall_footer.tpl]

Wie bereits erläutert laden Sie in der index.tpl den HTML-Code für den Kopf- und den Fußbereich in Zeile 1 bzw. 6. Dazwischen können Sie den Code für den Inhaltsbereich platzieren.

Testen

Sollten Sie jetzt alles richtig gemacht haben, so könnte Ihre Seite lokal bereits wie in Abbildung 2 aussehen. Dazu müssen Sie selbstverständlich zunächst den Apache im XAMPP Control Panel starten. Rufen Sie abschließend die URL in Ihrem Browser auf. In meinem Beispiel habe ich den Ordner webdesign-tutorial im htdocs-Ordner genannt, so dass die Seite über http://localhost/webdesign-tutorial/ erreichbar ist.
Sollte die Seite ohne Fehler geladen werden aber merkwürdig aussehen, so sollten Sie kontrollieren ob Sie die style.css mit den zuvor definierten CSS-Angaben gefüllt haben.

Abbildung 2Die fertige Webseite, wie sie lokal via XAMPP ausgeführt wird.
Abbildung 2
< 5.4 Grundgerüst - Kopf- und Fußbereich 5.6 MySQL-Grundlagen >