Erstellen einer Webseite
1. Einleitung
Das Adventure PHP Framework versteht sich als Hilfe zur Erstellung von Web-Seiten und -Applikationen. Dieses Tutorial zeigt Ihnen basierend auf den Inhalten der Kapitel Grundlagen, Hallo Welt! und Download, Installation und erste Schritte Möglichkeiten auf, dynamische Web-Seiten einfach und schnell zu erstellen.
2. Anforderungen
Um Ihnen die Erstellung einer Web-Seite und die Implementierung der zugehörigen Komponenten an konkreten Code-Beispielen erläutern zu können, definieren wir zunächst Anforderungen an die zu erstellende Web-Seite.
Diese soll über folgende drei Bereiche verfügen:
- Header: Im Header-Bereich der Seite ist das Logo und die Navigation zu finden. Die Navigation kann aus einer beliebigen Anzahl an Navigations-Punkten bestehen - jedoch nur soviele das Design zulässt.
- Inhalts-Bereich: Der Inhalts-Bereich erstreckt sich über die gesammte Breite der Seite und kann eine beliebige Höhe - je nach Menge der Inhalte - einnehmen.
- Footer: Im unteren Bereich der Seite befinden sich allgemeine Inhalte und Verweise (z.B. Impressum). Der dort präsentierte Inhalt ist für alle Seiten gleich.
Die Anordnung der genannten Bereiche soll der folgenden Darstellung genügen:
Logo und Navigation sind auf gleicher Höhe im Header-Bereich verortet. Inhalts- und Footer-Bereich erstrecken sich über die gesamte Breite und nehmen jeweils den Platz ein, den die Inhalte hinsichtlich ihrer Höhe benötigen.
3. Die Basis
Um eine Web-Seite mit dem APF zu erstellen müssen zunächst einige Basis-Arbeiten vorgenommen werden. Diese umfassen die Installation und Konfiguration des Frameworks sowie das Erstellen einer Ordner- bzw. Namespace-Struktur. Die folgenden Kapitel zeigen Ihnen, wie Sie das Basis-Setup schnell und einfach erledigen können.
3.1. Installation und Konfiguration
Erstellen Sie zunächst mit der IDE Ihrer Wahl (das Team empfiehlt PHPStorm) ein neues Projekt. Basierend auf dem Empfehlungen in Kapitel Download, Installation und erste Schritte erstellen wir darin zunächst die grundlegende Ordner-Struktur:
/APF
/htdocs
/images
/css
/jsAPF nutzen wir im Anschluss für die Installation des Frameworks. Der Ordner ist aus Sicherheitsgründen nicht über HTTP erreichbar. In htdocs legen wir alle von aussen erreichbare Inhalte wie die Boostrap-Datei, Bilder, CSS- und Java-Script-Dateien.
Zur Installation des Adventure PHP Framework laden Sie sich die Dateien apf-codepack-* und apf-configpack-* unter Downloads herunter und endpacken diese in das Verzeichnis APF. Die Ordner-Struktur ergänzt sich damit wie folgt:
/APF
/config
/core
/extensions
/modules
/tools
/htdocs
/images
/css
/jsIm Ordner config finden Sie Beispiel-Konfigurationen, die wir später als Basis nutzen werden, die übrigen Ordner beinhalten die Code-Basis des Frameworks.
3.2. Erstellen der Applikations-Struktur
Analog zur Ordner-Struktur des APF erstellen wir nun einen eigenen Bereich in dem die Code-Dateien der Webseite abgelegt werden. Die Ordner-Struktur erweitert sich damit wie folgt:
/APF
/config
/core
/extensions
/modules
/tools
/PAGE
/htdocs
/images
/css
/jsIm Ordner PAGE werden in den folgenden Kapitel alle Bestandteile der Web-Seite abgelegt. Das Kapitel Laden von Klassen beschreibt die Möglichkeit, Komponenten des Frameworks von dem Elementen Ihrer Applikation zu trennen. Dazu definieren wir einen eigenen Hersteller (Vendor) mit dem Namen PAGE, für den ein separater StandardClassLoader konfiguriert wird. Dieser verweist auf das Verzeichnis /PAGE statt auf /APF.
Innerhalb der Applikation werden wir in den nachfolgenden Kapiteln eigene Templates und Controller erstellen. Hierzu legen wir schon jetzt eine entsprechende Struktur an:
/APF
/config
/core
/extensions
/modules
/tools
/PAGE
/controller
/templates
/htdocs
/images
/css
/js3.3. Erstellen der Bootstrap-Datei
Das APF wurde für die Verwendung einer zentralen Bootstrap-Datei konzipiert über die alle Anfragen entgegen genommen und bearbeitet werden. Dies vereinfacht nicht nur die Implementierung, sondern sorgt auch dafür, dass es nur einen zentralen Einstiegspunkt in Ihre Applikation gibt, der mit entsprechenden Maßnahmen abgesichert werden kann.
Den Aufbau einer einfachen index.php ist unter Grundlagen beschrieben. Wir nutzen den dort aufgeführten Code-Block und füllen die im Ordner htdocs erstellte Datei index.php mit einem leicht angepassten Inhalt:
include('../APF/core/bootstrap.php');
use APF\core\singleton\Singleton;
use APF\core\frontcontroller\FrontController;
$fC = Singleton::getInstance(FrontController::class);
echo $fC->start('...', '...');Standardmäßig wird nur ein ClassLoader für den Hersteller APF registriert. Da wir beabsichtigen, Framework-Code von Applikations-Code zu trennen, ist es notwendig für den Hersteller PAGE einen eigenen StandardClassLoader zu konfigurieren und zu registrieren:
include('../APF/core/bootstrap.php');
use APF\core\loader\RootClassLoader;
use APF\core\loader\StandardClassLoader;
$classLoader = new StandardClassLoader('PAGE', '../PAGE');
RootClassLoader::addLoader($classLoader);
use APF\core\singleton\Singleton;
use APF\core\frontcontroller\FrontController;
$fC = Singleton::getInstance(FrontController::class);
echo $fC->start('...', '...');Wie im Kapitel Laden von Klassen beschrieben lässt sich durch die Registrierung eines eigenen ClassLoader nicht nur eine Trennung des Codes, sondern auch eine Trennung der Konfiguration erreichen. Hinweise hierzu entnehmen Sie bitte den folgenden Kapiteln.
3.4. Erstellen des Master-Templates
Als letzten Schritt der Basis-Konfiguration erstellen wir noch ein Master-Template, das den Einstieg in die Applikation darstellt. Dieses legen wir im Ordner /PAGE/templates ab und vergeben den Namen main.html. Als initialen Inhalt können Sie gerne einen einfachen Text wählen, dies ist jedoch nicht zwingend notwendig.
Unsere index.php komplettiert sich damit wie folgt:
include('../APF/core/bootstrap.php');
use APF\core\loader\RootClassLoader;
use APF\core\loader\StandardClassLoader;
$classLoader = new StandardClassLoader('PAGE', '../PAGE');
RootClassLoader::addLoader($classLoader);
use APF\core\singleton\Singleton;
use APF\core\frontcontroller\FrontController;
$fC = Singleton::getInstance(FrontController::class);
echo $fC->start('PAGE\templates', 'main');Rufen Sie die Bootstrap-Seite nun in Ihrem Browser auf, so sehen Sie entweder eine weiße Seite oder den entsprechenden Inhalt. Basis-Installation und -Konfiguration sind nun abgeschlossen.
4. Erstellen der Web-Seiten-Struktur
Gemäß den in Kapitel 2 beschriebenen Anforderungen besteht die Webseite aus drei Bereichen: Header, Inhalts-Bereich und Footer. In den folgenden Kapitel legen wir nun Schritt für Schritt die notwendigen Templates und deren Inhalte an.
4.1. Basis-Template
Das Basis-Template main.html gibt neben dem zentralen Einstiegspunkt in die Applikation auch die Basis-Struktur der Web-Seite oder Anwendung vor. Aus diesem Grund sehen wir darin die oben genannten Bereiche in der HTML-Struktur vor:
<!DOCTYPE html>
<html>
<head>
<title>Meine Web-Seite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
<script type="text/javascript" src="/js/scripts.js"></script>
</head>
<body>
<header>
<img src="/images/header-logo.png" alt="Meine Web-Seite" />
<nav>
...
</nav>
</header>
<section id="content">
...
</section>
<footer>
...
</footer>
</body>
</html>Im Bereich des <nav />-Tags soll später die Navigation angezeigt werden, <section id="content"/> zeigt den Inhalt an und im <footer /> wird der Footer präsentiert.
In den folgenden Kapitel werden diese Bereiche mit Inhalten gefüllt, die Erstellung des Basis-Templates ist damit abgeschlossen.
4.2. URL-Struktur
Nach der Anlage des Basis-Templates bietet sich an, die für das Projekt gewünschte URL-Struktur anzulegen. Diese bedingt beispielsweise, wie dynamische Seiten im Inhaltsbereich adressiert oder Navigations-Elemente aufgebaut sein sollen.
Um das Tutorial einfach und übersichtlich zu gestalten, gehen die folgenden Kapitel lediglich auf die Anzeige von dynamischen Inhalten aus. Dies lässt sich sehr einfach über einen eigenen URL-Parameter tun, der den eindeutigen Bezeichner einer Seite beinhaltet. Im folgenden soll hierzu der Parameter page dienen. Ist der URL-Parameter vorhanden soll die damit referenzierte Seite geladen werden, falls nicht, soll die Startseite angezeigt werden.
Diese Struktur bzw. diese Vereinbarung werden wir nun im Content-Bereich nutzen um den jeweils gewünschten Inhalt anzuzeigen. Um das Tutorial nicht zu sehr kompliziert zu machen, nutzen wir das Standard-URL-Layout, das vom APF komplett unterstützt wird. Details können im Kapitel URL-Rewriting) nachgelesen werden.
4.3. Header
Der obere Bereich der Seite - der Header - beinhaltet das Logo der Seite und die Navigation. Letztere dient den Besuchern dazu, die unterschiedlichen Inhalte der Seite zu erreichen.
Um die spätere Erweiterung der Seite zu vereinfachen, soll die Navigation in ein eigenes Template ausgelagert werden. Hierzu ergänzen wir den <nav />-Block im Basis-Template um den folgenden Tag:
<core:importdesign
namespace="PAGE\templates"
template="navi"
/>Der <core:importdesign />-Tag erwartet nun eine Datei navi.html im Order /PAGE/templates, die den Inhalt der Navigation darstellt. Diese füllen wir nun mit einer statischen Navigation:
<ul>
<li><a href="/">Home</a></li>
<li><a href="/?page=seite1">Seite 1</a></li>
<li><a href="/?page=seite2">Seite 2</a></li>
<li><a href="/?page=seite3">Seite 3</a></li>
</ul>Bei Klick auf das erste Element wird der Benutzer auf die Startseite geleitet, die übrigen führen zu dedizierten Unterseiten. Als eindeutige Merkmale wurden alphanummerische Werte gewählt, Sie sind jedoch frei andere Werte zu definieren.
4.4. Footer
Im Fuß-Bereich der Seite bietet sich die Darstellung von generischen Inhalten und beispielsweise ein Verweis auf das Impressum an. Wie auch für den Header soll der Inhalt des Footer in ein eigenes Template ausgelagert werden.
Hierzu erweitern wir zunächst das Basis-Template in der <<footer />-Sektion um folgende Zeilen:
<core:importdesign
namespace="PAGE\templates"
template="footer"
/>Der <core:importdesign />-Tag erwartet eine Datei footer.html im Order /PAGE/templates, die den Inhalt des Footer-Bereichs darstellt. Diese füllen wir nun wie folgt:
<p>
...
</p>
<nav>
<ul>
<li><a href="/?page=impressum">Impressum</a></li>
<li><a href="/?page=kontakt">Kontakt</a></li>
</ul>
</nav>Der innerhalb des <p />-Tags angedeutete Text beinhaltet allgemeine Informationen zur Seite, die darunter liegende Navigation verweist auf das rechtlich verpflichtende Impressum der Seite und bietet eine Kontakt-Möglichkeit an.
4.5. Inhaltsbereich
Widmen wir uns nun dem Inhaltsbereich der Seite. Die Anzeige des Inhalts soll wie in den vorausgegangenen Kapiteln ebenfalls in einen eigenen Bereich - ein eigenes Template - ausgelagert werden um bei einer Änderung des Basis-Template die bestehende Funktionalität einfach wiederverwenden zu können.
Zur Anzeige von Inhalten legen wie zunächst eine Template-Datei content.html im Ordner /PAGE/templates an und füllen dieses mit einem beliebigen Inhalt.
Das Basis-Template erweitern wir in diesem Zug um die folgenden Zeilen innerhalb des <section />-Tags:
<core:importdesign
namespace="PAGE\templates"
template="content"
/>Das Erstellen der Webseiten-Struktur ist nun abgeschlossen. Kapitel 5 zeigt Ihnen nun, wie sich die Anzeige von Inhalten realisieren lässt.
5. Anzeige von dynamischen Inhalten
In Kapitel 4 wurde die Grundstruktur der Seite angelegt und das URL-Layout definiert. Diese Grundlage lässt sich nun nutzen, um die Inhalte der Seite dynamisch anzuzeigen.
Die folgenden Kapitel zeigen Ihnen zwei Implementierung: Inhalte aus einfachen Text-Dateien bzw. Inhalte aus einer Datenquelle.
5.1. Inhalte aus Text-Dateien
Eine sehr einfache Möglichkeit, dynamische Inhalte aus Text-Dateien im Inhaltsbereich einer Seite anzuzeigen bietet der <core:importdesign />-Tag. Dieser unterstützt die Möglichkeit, den Namen des Templates über einen zu definierenden URL-Parameter zu bestimmen.
Um die beschriebene Funktionalität nutzen zu können, füllen wir nun die Datei /PAGE/templates/content.html mit dem folgenden Inhalt:
<core:importdesign
namespace="PAGE\content"
template="[page=start]"
incparam="page"
/>Die Definition des Tags verrät bereits mehrere Punkte: die dynamischen Inhalte sollen im Ordner /PAGE/content abgelegt werden und der URL-Parameter zur Bestimmung des Template-Namens lautet wie in Kapitel 4.2 beschrieben page.
Zur Anlage der ersten Inhalte erstellen wir nun den Ordner /PAGE/content drei Dateien mit den Namen start.html (siehe Navigation aus Kapitel 4.3) und impressum.html sowie kontakt.html (siehe Navigation aus Kapitel 4.4) an. Diese können Sie nun mit den gewünschten Inhalten füllen.
Da die Einbindung einer Datei mit Hilfe des <core:importdesign />-Tags sowohl Text als auch HTML/XML erlaubt, können Sie statische sowie dynamische Inhalte definieren. Ebenfalls möglich ist die Verwendung von APF-Tags und (Document-)Controller-Deklarationen.
5.2. Inhalte aus einer Datenquelle
Eine weitere Möglichkeit zur Anzeige von Inhalten besteht in der Anbindung einer Datenquelle. Hierzu verwenden wir eine einfache Datenbank-Tabelle, die den eindeutigen Bezeichner und den Inhalt der Seite speichert.
Die Tabelle kann mit folgendem SQL-Statement erzeugt werden:
CREATE TABLE pages (
page_id varchar(10) NOT NULL,
page_content text NOT NULL,
PRIMARY KEY (page_id)
);Zur Ausgabe der Inhalte der angelegten Tabelle passen wir zunächst die Datei content.html im Ordner /PAGE/templates wie folgt an:
<@controller
class="PAGE\controller\ContentController"
@>Mit dem <@controller />-Tag wird ein (Document-)Controller zur Verarbeitung des Templates bzw. DOM-Elements beauftragt. Dieser kann im einfachsten Fall wie folgt implemeniert werden:
namespace PAGE\controller;
use APF\core\pagecontroller\BaseDocumentController;
use APF\core\database\ConnectionManager;
use APF\core\database\DatabaseConnection;
class ContentController extends BaseDocumentController {
public function transformContent() {
$conn = $this->getConnection();
$pageId = $conn->escapeValue(
$this->getRequest()->getGetParameter('page', 'home')
);
$select = 'SELECT page_content
FROM pages
WHERE page_id = \'' . $pageId . '\'
LIMIT 1';
$result = $conn->executeTextStatement($select);
$data = $conn->fetchData($result);
if($data !== false){
$this->getDocument()->setContent($data['page_content']);
}
}
/**
* @return DatabaseConnection
*/
private function getConnection() {
/* @var $cM ConnectionManager */
$cM = $this->getServiceObject('APF\core\database\ConnectionManager');
return $cM->getConnection('content-database');
}
}6. Weiterführende Ressourcen
Im Anschluss an dieses Tutorial wird die Lektüre folgender Seiten empfohlen:
Kommentare
QUICKNAVI
Die Entwicklung des APF wird von JetBrains mit PHPStorm-Lizenzen unterstützt und wir sind überzeugt davon, dass PHPStorm die Qualität nachhaltig steigert. Benutzen auch Sie PHPStorm!
