Mit zaunberg-talks.de ist eine Webseite entstanden, die in erster Linie locker, modern und schlank in Erscheinung treten sollte. Zugleich sollte die Entwicklungs- und Designzeit so gering wie möglich ausfallen und auf ein umfangreiches CMS wie Contao oder WordPress verzichtet werden.

CSS Design mit Bootstrap

Aus diesem Grund entschieden wir uns im Rahmen dieses kleinen Projektes für das CSS-Framework Bootstrap, welches unter der Apache License v2.0 kostenlos zur Verfügung steht und von twitter stammt. Bootstrap liefert viele vorgefertigte Elemente und Komponenten, wie zum Beispiel unterschiedliche Navigationen, Formularelemente und Listen. Diese sind komplett gestaltet und somit sofort einsatzbereit. Neben komplexeren Komponenten, die aus mehreren HTML-Elemente und CSS-Klassen bestehen, sind aber auch einzelne typographische Elemente, wie zum Beispiel Überschriften und Absätze vorformatiert. Zusätzlich werden die Komponenten und Elemente bei Bedarf auch durch fertige JavaScripte, welche auf jQuery aufbauen, aufgepeppt und erweitert.

Durch den sehr intuitiven Customizer kann Bootstrap sehr gut an die eigenen Bedürfnisse angepasst werden. So kann zum einen das Erscheinungsbild angepasst und zum anderen können nicht benötigte Komponenten entfernt und somit der Umfang reduziert werden.

Um Bootstrap in eigene Projekte verwenden zu können, muss lediglich die CSS-Datei, sowie bei Bedarf die JavaScript-Datei und jQuery eingebunden werden.

Dank der umfangreichen Dokumentation mit Beispielen und einiger vorgefertigter Templates entstanden sofort erste Designideen. Durch die gute Dokumentation konnten die einzelnen Komponenten anschließend schnell zu einem ersten Entwurf zusammen gefügt und mit ein wenig zusätzlichen CSS auf die eigenen Bedürfnisse angepasst werden.

Templating und Routing mit PHP

Wie bei den meisten Internetseiten, lies sich auch dieser Designentwurf in verschiedene Bereiche wie zum Beispiel Header, Navigation, Content und Footer aufteilen. Dies führte schlussendlich dazu eine Websprache einzusetzen, mit dessen Hilfe die Bereiche in Templateteile aufgeteilt werden konnten.

Auf Grund der bestandenen Infrastruktur und Größe des Projektes viel die Wahl auf PHP, mit dessen Hilfe sich ein schlankes micro-CMS umsetzen lies.

Die Basis des selbst entwickelten micro-CMS bildet die App-Klasse in Verbindung mit einer Konfigurations- und einer .htaccess-Datei.
Kernstück der .htaccess-Datei bildt die folgende Regel, die den letzten Begriff der URL auf einen GET-Paramter mit dem Namen page umschreibt und welcher dadurch an die root.php übergeben werden kann:

RewriteRule ^([_\-a-zA-Z0-9]+)/?$ root.php?page=$1 [L]

Die Konfigurationsdatei enthält, wie im folgenden Codeblock zu sehen, die Whitelist, den Titel der Seite, sowie den Seiten-Kontext.

// Welche Seiten gibt es und wie ist die Navigation aufgebaut
$WHITELIST = array(
	'home' => array('label' => 'Home', 'file' => 'home'),
	'index' => array('file' => 'home'),

	'tickets' => array('label' => 'Tickets', 'file' => 'tickets'),
	'programm' => array('label' => 'Programm', 'file' => 'programm'),
	'location' => array('label' => 'Ort', 'file' => 'location'),
	'kontakt' => array('label' => 'Kontakt', 'file' => 'kontakt'),
	'impressum' => array('label' => 'Impressum', 'file' => 'impressum'),
				
	'architektur_boot_camp' => array('file' => 'workshop1'),
	'javascript_angularjs' => array('file' => 'workshop2')

	...
);

// Wie ist der Haupttitel der Seite
$MAIN_TITLE = 'zaunberg-talks.de';

// Kontext, d.h. welcher ist der uebergeordnete Ordner (false fuer Root)
$CTX = 'berlin2013';

In der root.php wird nur die Konfiguration geladen, die App-Klasse instanziiert und die Hauptmethode loadApp() angewendet.
Im Konstruktor der App-Klasse wird zuerst die Whitelist aus der Konfiguration geladen, die für das Mapping und das Laden der entsprechenden Seiten verwendet wird.

In der Methode loadApp() wird, wie im folgenden Codeblock zu sehen, die eigentliche Seite zusammengebaut. Dazu wird die Navigation aus der Whitelist generiert und anschließend die einzelnen Templates sowie die Inhaltsseite geladen.

public function loadApp() {
	$actualPageTitle = $this->actualPageTitle();
	$navigation = $this->loadNavigation();
	$home = PROJECT_HTTP_ROOT . $this->ctx .'/';

	require $this->loadHeadFile();
	require $this->loadNavigationFile();
	require $this->loadPageFile();
	require $this->loadFootFile();
}

Interessant an dieser Stelle ist die Methode loadPageFile() welche, wie im folgenden Codeblock zu sehen, zuerst den entsprechenden Seitennamen der Inhaltsseite über die Whitelist ermittelt. Dadurch werden keine Parameter von Außen direkt für das Laden von Seiten verwendet wodurch ein unerlaubter Zugriff auf andere Dateien über diesen Weg nicht ermöglicht wird. Der GET-Parameter page dient somit nur als Zugriff auf den entsprechenden Whitelisteintrag und ermöglicht so auch das bereitstellen gleicher Inhaltsseiten mit unterschiedlichen URL-Enden.

private function loadPageFile() {
	$page = $this->actualPage();

	if($page) {
		if(is_array($page) AND array_key_exists('file', $page)) {
			$file = \PROJECT_DOCUMENT_ROOT . $this->ctx .'/content/'. $page['file'] .'.php';
			if(file_exists($file)) {
				return $file;
			} else {
				return $this->load404File();
			}
		}
	}

	return $this->loadHomeFile();
}

In der oben dargestellten Methode fällt zudem das Attribut ctx auf, welches dafür verwendet wird, verschiedene Seiten-Kontexte mit dem micro-CMS betreiben zu können, wie es im Fall von zaunberg-talks.de mit dem Kontext berlin2013 gemacht wird.

In der Methode actualPage() wird, wie im folgenden Codeblock zu sehen, auf die Whitelist zugegriffen. Der GET-Parameter page dient dabei nur als Schlüssel um auf den entsprechenden Eintrag der Whitelist zuzugreifen und diesen zurück zu liefern.

private function actualPage() {
	$pageName = $this->actualPageName();

	if($pageName AND array_key_exists($pageName, $this->pageWhitelist)) {
		return $this->pageWhitelist[$pageName];
	}

	return false;
}

Durch das micro-CMS wird der Programmcode auf einfache Art und Weise vom Inhalt getrennt, sodass die Inhaltsseiten nur reines HTML und CSS beinhalten. Dank des CSS-Frameworks Bootstrap wird die Gestaltung dieser Inhaltsseiten noch weiter vereinfacht und dank vieler vorgefertigter Komponenten und typographischer Elemente muss in den seltensten Fällen das eigene CSS angepasst oder erweitert werden.

Fazit

Das CSS-Framework Bootstrap ist sehr praktisch und einfach einzusetzen. Es kann nach eigenen Vorlieben über den Customizer angepasst werden. Da Bootstrap jedoch nur für das Oberflächendesign verwendet werden kann, ist in den meisten Fällen der Einsatz einer Websprache wie zum Beispiel PHP empfehlenswert.