Im September 2009 wurde die Grenze von 4.000 frei verfügbarer Erweiterungen (von knapp 1.800 unterschiedlichen Entwicklern) in TYPO3 überschritten. Doch die Flut an Extensions hält an und täglich kommen neue hinzu. Für viele Anwender ist es schwierig, in dieser Fülle an nützlichen Erweiterungen den Überblick zu bewahren. Ein großer Teil der Extensions hat zudem den Status „Alpha“ oder „Experimental“ oder wurde seit langer Zeit nicht mehr gepflegt oder aktualisiert. Betrachtet man nur die Erweiterungen, die den Status „Stable“ oder zumindest „Beta“ haben und zugleich in den letzten zwölf Monaten aktualisiert wurden, so bleiben nur 800 Extensions übrig.

Alte Bekannte: die 40 Extensions mit den meisten Downloads.

Nur ein Prozent der Extensions hat Download-Zahlen jenseits der 10.000er-Grenze. Diese sind praktisch allen Entwicklern bekannt. Unter den übrigen Extensions befinden sich einige Schätze, die weitgehend unbekannt sind und vielleicht zu Unrecht nur wenige Downloads aufweisen.

rgnewsce: tt_news aufgebohrt

Die Extension tt_news ist die bei Weitem am häufigsten eingesetzte Erweiterung (siehe auch Artikel zu tt_news 3.0 ab Seite 108). Einerseits verfügt fast jede Webseite über einen Bereich „Aktuelles“, andererseits ist tt_news durch die vielen Möglichkeiten auch für ganz andere Bereiche einsetzbar.

Eine Einschränkung von tt_news ist die Erweiterbarkeit mit weiteren Elementen. Die relativ starre Struktur des Eingabeformulars läßt hier nur wenig Spielraum. Diese Lücke schließt die Extension rgnewsce. Sie ermöglicht es, einem Nachrichtenbeitrag beliebige weitere Inhaltselemente hinzuzufügen.

Nach der Installation steht ein neuer Reiter „Extra“ zur Verüfgung. Über die Option „Create new“ können weitere Content-Elemente ausgewählt werden. Dadurch kann man die Beiträge mit Formularen, Tabellen, Videos oder weiteren Bild/Text-Elementen versehen.

Die Extension rgnewsce erweitert tt_news um einen Reiter „Extra“, mit dem man Beiträge um Formulare, Tabellen, Videos und mehr erweitern kann.

Krise hin, Krise her – der Internethandel hat der allgemeinen Wirtschaftsschwäche getrotzt. Der Hauptverband des Deutschen Einzelhandels (HDE) geht davon aus, dass der Onlinehandel in Deutschland dieses Jahr mit 21,9 Mrd. Euro eine neue Rekordmarke erreichen wird. Mit 21,8 Mrd. Euro beziffert der Bundesverband für Versandhandel das diesjährige Volumen im Onlinehandel ähnlich hoch. Auch in der Schweiz gedeiht der Handel per Mausklick. Der Universität von St. Gallen zufolge kauften die Konsumenten in der Alpenrepublik 2008 Produkte im Wert von 5,87 Mrd. Franken (rund 3,9 Mrd. Euro).

Auch wenn die Umsätze weiter wachsen – die Zeiten exorbitanter Wachstumsraten sind vorbei, zumal immer mehr Onlineshops auf den Markt drängen. Nach Angaben des HDE klettern die Online-Umsätze in Deutschland künftig nur noch im einstelligen Prozentbereich, während früher zweistellige Zuwachsraten die Regel waren. Wer weiterhin die Umsätze kräftig steigern will, braucht daher Alternativen.

Das Ausland lockt

Zusätzliches Wachstum ermöglicht der Eintritt in ausländische Märkte. Dabei bietet sich für die meisten deutschen Webshops zunächst die Expansion nach Österreich und in die Schweiz an, weil hier die Inhalte nicht erst noch in eine andere Sprache übertragen werden müssen. Schreckt ein Shopbetreiber vor anderen Sprachen nicht zurück, bieten auch weitere Länder interessante Perspektiven. Dazu einige Beispiele:

• Belgien: 2007 kauften die 10,7 Millionen Einwohner online für 1,8 Mrd. Euro ein.
• Frankreich: Der größte Nachbarstaat Deutschlands zählt 65 Millionen Einwohner. Sie setzten online 2007 rund 16 Mrd. Euro um.
• Niederlande: Bei 16,5 Millionen Einwohnern erreichte der Onlinemarkt 2008 ein Volumen von 5 Mrd. Euro.

Für den Erfolg eines Webshops im neuen Zielmarkt reicht es jedoch nicht, dort einfach die Produkte feilzubieten. Dann ist der Misserfolg vorprogrammiert. Der Onlinehändler muss nicht nur genau darauf achten, dass er mit seinen Angeboten möglichst viele Kunden erreicht, die Margen stimmen und der Zahlungsausfall durch Betrug möglichst niedrig ist.

HTML5 ermöglicht die Einbindung von Video ohne Flash-Plugin.

Das Jahr 2010 rückt langsam in Sichtweite und geht es nach dem offiziellen Zeitplan der HTML Working Group des W3C, so wird in genau diesem Jahr HTML5 Recommendation-Status erhalten und damit „XHTML 1“ als den aktuellen HTML-Webstandard ablösen [1]. Zum Vergleich: Die eigentlichen Schöpfer der neuen Spezifikation, vereint in der „Web Hypertext Application Technology Working Group“ (WHATWG), gehen von einem Termin irgendwann um 2022 herum aus [2]. Beide Arbeitsgruppen werkeln weitgehend unbehelligt voneinander an der Spezifikation, die möglichst bald von vielen Browsern vollständig implementiert werden soll. Trotz dieser leicht chaotisch anmutenden Umstände steht fest: HTML5 kommt und wird nach dem im Jahr 2000 zum Standard erhobenen XHTML 1 der nächste neue HTML-Standard sein.

Evolution statt Revolution

XHTML 1, wie es sich heute weiter Verbreitung erfreut, ist eigentlich gar kein XHTML. Es sieht zwar aus wie XHTML, wird aber meist als HTML gesendet und von Browsern als HTML interpretiert. Angesichts der Tatsache, dass XML-Dokumente schon bei kleinsten Syntaxfehlern nicht mehr geparst werden können und angesichts des Umstands, dass der Internet Explorer mit XML überhaupt nichts anzufangen weiß, ist das auch nicht unbedingt schlecht.

Dessen ungeachtet trieb das W3C nach der im Jahr 2000 erfolgten Veröffentlichung von XHTML 1 die „XMLisierung“ des Webs so energisch voran, dass einige Genervte aus dem Umfeld von Apple, der Mozilla Foundation und Opera im Jahr 2004 kurzerhand ihre eigene HTML-Arbeitsgruppe aufmachten und Entwürfe für eine Spezifikation namens „Web Applications 1.0“ veröffentlichten – der Grundstein für HTML5 war gelegt. Das W3C hingegen verschrieb sich XHTML 2.

Der Hauptunterschied zwischen der Philosophie von HTML5 und der von XHTML 2 lässt sich in drei Wörtern zusammenfassen: Evolution gegen Revolution. XHTML 2 sollte mit den Vorgängern HTML 4 und XHTML 1 kaum noch etwas gemein haben und eine reine XML-Angelegenheit sein. Währenddessen setzte sich die WHATWG mit HTML5 Abwärtskompatibilität zum Ziel und versuchte vor allem, HTML sinnvoll zu erweitern und zu verbessern. Leitlinie dabei sollte vor allem sein, wie HTML aktuell im WWW verwendet wird und wie man den Anliegen der HTML-Autoren entgegenkommen kann.

Damit eine Spezifikation zum Webstandard werden kann, muss sie nicht nur geschrieben, sondern auch implementiert werden. Da die WHATWG im Wesentlichen aus den großen Browserherstellern plus Google besteht, hatte HTML5 im Kampf um die Zukunft die etwas günstigere Ausgangslage für sich. Und so kam es, wie es kommen musste – das W3C gründete erst eine neue HTML-Arbeitsgruppe und schloss letztlich seine XHTML-Arbeitsgruppe komplett. Damit ist XHTML 2 bis auf Weiteres als Working Draft eingefroren. Die Zukunft gehört HTML5. Nur wozu brauchen wir diese Zukunft?

Das WWW ist kein Dokument

Als Sir Timothy Berners-Lee einst HTML erfand, dachte er primär an den Austausch von Dokumenten. Von 1989 (erster Entwurf) bis 1999 (HTML 4.01) wurde HTML mit immer neuen Features für Dokumente ausgerüstet. Es gab Tabellen, Bilder, Formatvorlagen (Stylesheets). Nur für die Bedürfnisse von heutigen Webapplikationen gibt es nichts – keine Möglichkeit, Videos einzubinden, keine Möglichkeit, Ladebalken anzuzeigen, keine Möglichkeit, mehr als simple GIF-Animationen abzuspielen. Andererseits gibt es einiges, was außer für echte HTML-Kenner verwirrend ist (die Koexistenz von <abbr> und <acronym> oder das <address>-Element) oder mit den heutigen Anforderungen an Barrierefreiheit nicht mehr konform geht (Frames). HTML5 repariert diese Mankos, indem neue Elemente eingeführt werden, alte in Anpassung an ihren heute im Web beobachteten Einsatz umdeklariert und einige wenige entfernt werden.

Eine Tatsache ist, dass im Web gerne unterschiedliche HTML-Geschmacksrichtungen gemischt werden und dass es vor allem keine Revolutionen gibt – demonstriert durch die loyale Nutzerschaft des acht Jahre alten Internet Explorer 6. Die Konsequenz hieraus ist die Abwärtskompatibilität von HTML5. In den meisten Fällen kann man den neuen Doctype einfach über eine valide XHTML-1- oder HTML-4-Website setzen und man erhält gültiges HTML5. Die Syntax ist so flexibel, dass man sich aussuchen kann, ob man in reinem HTML-Stil schreibt (optionale Tags können weggelassen werden, Groß- und Kleinschreibung ist egal), weiter die XHTML-Syntax benutzt oder beides mischt. Auch ist XHTML noch nicht wirklich tot – XHTML5 als XML-Serialisierung von HTML5 steht allen zur Verfügung, die es mit XHTML ernst meinen. Anders als bei XHTML 1 sind HTML5-Dokumente per Definition echtes XHTML und mit allen entsprechenden Vor- und Nachteilen gesegnet.

Larry Augustin ist Angel Investor und berät Technologieunternehmen in ihrer Anfangsphase. Gegenwärtig ist er Mitglied im Vorstand von Appcelerator, Compiere, DeviceVM, DotNetNuke, Fonality, Hyperic, Medsphere, Pentaho und SugarCRM. Er ist Open-Source-Pionier, gründete die Open-Source-Software-Plattform SourceForge und gehörte zu den Leuten, die den Begriff „Open Source“ maßgeblich geprägt haben.

Larry Augustin: „Android wird sich dank des offenen Charakters der Plattform durchsetzen.“

t3n Magazin: Die Verbreitung und Akzeptanz von Open-Source-Software ist in den vergangenen Jahren enorm gestiegen. Wo steht Open Source im Jahr 2009?

Larry Augustin: Open Source ist inzwischen eine sichere Wahl. In den 1980er-Jahren hieß es, dass man nichts falsch macht und seinen Job behält, wenn man IBM kauft. In den 1990er-Jahren galt das für Microsoft. Heute für Open Source. Da zieht mittlerweile selbst die so genannte proprietäre Software den Kürzeren. Laut Gartner werden bis 2012 etwa 80 Prozent der kommerziellen Software-Produkte auch Elemente von Open-Source-Technologie enthalten. Die Leute werden Open Source also nutzen, ohne es zu wissen.

t3n Magazin: Sehen Sie in der aktuellen Finanzkrise eine Chance für Open Source?

Larry Augustin: Open Source ist in harten Zeiten immer im Aufwind, weil Budgets für Investitionen und Betriebskosten gekürzt werden. In der Rezession von 2001 gab dies Open Source einen großen Schub. So erreichte Open Source zwischen der letzten und der gegenwärtigen Rezession einen Punkt, an dem sich die Entwicklung nicht mehr umkehren ließ und unabhängig von den makroökonomischen Bedingungen eine stabile Entwicklung möglich ist.

t3n Magazin: Was heißt das in der Praxis?

Larry Augustin: Wenn ein CTO oder CIO Software für eine Neuanschaffung sondiert, wird er Open Source immer in Betracht ziehen. Quelloffene Software gilt nicht mehr als riskant oder instabil, sondern primär als Lösung, die zu geringeren Kosten mehr Qualität und Flexibilität bietet.

t3n Magazin: Was sind aus Ihrer Sicht die nächsten großen Trends im Bereich Open Source?

Larry Augustin: In den Technologiebereichen Business Applications und Cloud Computing erwarte ich ein großes Wachstum für Open Source. Auf der Infrastrukturebene ist Open Source ja bereits jetzt allgegenwärtig. Bis 2010 wird Open Source laut Gartner 80 Prozent der infrastrukturellen Softwareinvestitionen globaler IT-Organisationen ausmachen. Aber auch im Bereich Business Applications holt Open Source auf. Hier bedienen Firmen wie SugarCRM eine riesige und wachsende Nachfrage nach Open-Source-Geschäftsanwendungen. Laut Forrester gaben 58 Prozent der Entscheidungsträger im IT-Bereich an, für aufgabenkritische Anwendungen inzwischen Open Source einzusetzen. Open Source schafft zudem die Voraussetzung für das Phänomen Cloud Computing in all seinen Ausprägungen. Führende Cloud-Service-Provider wie Amazon greifen fast vollständig auf Open-Source-Technologien zurück. Weil diese Plattformen auf Open-Source-Infrastruktur aufsetzen, besteht auch eine natürliche Affinität zu Open-Source-Anwendungen. Eines der wichtigsten Features von Open-Source-Anwendungen auf Cloud-Plattformen wird aus meiner Sicht Portabilität sein, die dafür sorgt, dass Anwendungen Cloud-Provider-übergreifend laufen. Das schließt private und öffentliche Clouds gleichermaßen ein.

Alle modernen Webanwendungen bieten Template-Systeme an, durch die sich die Programmlogik und die Darstellung von Inhalten trennen lassen. Dabei kommen die verschiedensten Systeme zum Einsatz. Ein prominenter Vertreter ist Smarty, das von vielen Open-Source-Projekten eingesetzt wird. Bei Magento [1] wird PHP direkt als Template-Engine verwendet. Alle Systeme haben gemeinsam, dass die HTML-Blöcke für die Darstellung in einzelne Template-Dateien ausgelagert sind, in denen die Applikation die Platzhalter durch die Inhalte ersetzt.

Die Programmlogik setzt die Template-Blöcke so zusammen, wie sie für den jeweiligen Fall gebraucht werden. Die meisten Webentwickler haben damit reichlich Erfahrung.

Grundsätzliches zu Magento-Themes

Bei Magento liegen die Template-Dateien in „app/design/frontend/default/THEME/template“. „THEME“ wird dabei durch das in der Konfiguration festgelegte Layout-Theme ersetzt, standardmäßig ist das „default“. Änderungen sollten Sie nie direkt in „default“ durchführen, da die Anpassungen beim nächsten Magento-Update überschrieben werden könnten. Sie sollten also ein neues Theme anlegen, indem Sie „app/design/frontend/default/default“ nach „app/desgn/frontend/default/meintheme“ kopieren und im Admin-Interface unter System > Konfiguration > Gestaltung > Themes > Standard „meintheme“ eintragen.

Soweit gibt es noch keinen Unterschied zu anderen Template-Systemen, bei denen direkt im Code steht, welche Datei zum Formatieren der Ausgabe verwendet wird. Das kann in etwa so aussehen:

$template = 'templates/product/list.tmpl';
$html = $this->process($template);

Jetzt zu der Besonderheit bei Magento: Im Code steht statt des Namens der Datei ein Platzhalter für das Template.

$blockName = 'product.list';
$html = $this->getChildHtml($blockName);

Welche Datei für den Platzhalter verwendet werden soll, wird durch den Inhalt der Layout-XML-Dateien bestimmt.

<block type=“catalog/product_list“ name=“product.list“ template=“catalog/product/list.phtml“ />

Magento unterscheidet also zwischen Templates (PHP-Dateien mit der Endung .phtml) und den Layout-Dateien mit dem XML.

Das „type“-Attribut legt fest, welche Klasse den Block rendert. Vor dem Slash wird das Modul angegeben, dahinter der Pfad innerhalb des Blockverzeichnisses des Moduls. So eröffnen sich zahlreiche Möglichkeiten:

• Ändern der zu verwendenden Template-Dateien
• Ändern der Ausgabeposition von HTML-Blöcken
• Hinzufügen und Entfernen von HTML-Blöcken
• Daten zu der Ausgabe von anderen Modulen hinzufügen oder entfernen (z. B. Links in der Haupt-Navigation)
• Hinzufügen von CSS- und JavaScript-Dateien
• Ändern der Klasse für den Code-Block
• Anpassung einzelner Kategorien und CMS-Seiten im Backend

Die Anpassungen sind möglich, ohne dass Sie Core-Code verändern müssen. Bei konsequenter Nutzung bleibt das System so trotz weitreichender Anpassungen upgradefähig.

Beim Trendthema Cloud Computing führt kein Weg an Amazon vorbei. Der Onlineshop hat aus der eigenen Not eine Tugend gemacht und ganz nebenbei das dominierende Cloud-Infrastruktur-Angebot entwickelt. Als Betreiber einer der größten E-Commerce-Webseiten der Welt hat Amazon mit enormen Anforderungen an die Infrastruktur zu kämpfen und hat, um diese Herausforderung zu meistern, eine interne Infrastruktur samt Schnittstellen entwickelt. Der nächste Schritt war dann, diese Infrastruktur auch anderen zur Verfügung zu stellen.

Unter dem Oberbegriff „Amazon Web Services“ bietet Amazon neben seinen Infrastructure-as-a-Service-Diensten auch noch weitere Services wie „Mechanical Turk“, „Amazon Fulfillment“ oder Alexa-Schnittstellen an. Der Artikel beschränkt sich allerdings auf Amazons Cloud-Infrastruktur-Dienste [1].

Cloud Computing mit Elastic Compute Cloud

Der Amazon-Cloud-Dienst „Elastic Compute Cloud“ (EC2) bietet die Möglichkeit, virtuelle Server verschiedener Größen, so genannte Instanzen, stundenweise zu nutzen. Zahlen müssen Anwender dabei je angefangene Stunde pro Instanz. Es ist möglich, sowohl Unix- als auch Windows-Betriebssysteme einzusetzen. Die Stundenpreise unterscheiden sich auf Grund der Kosten für die Microsoft-Lizenzen leicht.

Die Instanzgröße bestimmt sich anhand des zur Verfügung gestellten Arbeitsspeichers, der zugeteilten virtuellen Festplattenkapazität und den reservierten EC2-Compute-Units. Technisch basiert EC2 auf der Open-Source-Virtualisierungslösung XEN. Eine Compute-Unit entspricht laut Amazon ungefähr der Leistung eines 1,0-1,2 GHz Opteron- oder Xeon-Prozessors aus dem Jahre 2007. Prozessor- und Arbeitsspeicherlimits werden den Instanzen fest zugewiesen.

Die große Stärke von EC2 liegt in der mächtigen API. Mit ihr können Nutzer ein hohes Maß an Kontrolle ausüben. So kann man durch Bestimmung der „Availability Zones“ sicherstellen, dass die physische Nähe zwischen verschiedenen Instanzen gewahrt wird. Dies senkt die Latenzzeit, verringert jedoch die Ausfallsicherheit. Neben den „Availability Zones“ kann der Anwender darüber hinaus den Standort des Rechenzentrums auswählen. Zur Auswahl stehen die Ostküste der USA und Westeuropa.

Entwickler haben direkt aus der eigenen Anwendung heraus die Möglichkeit, weitere Instanzen zu starten oder zu beenden. Eigene Server-Images kann der Anwender mit den von Amazon bereitgestellten EC2-Tools erzeugen. Es gibt auch eine große Auswahl an fertigen Images verschiedener Betriebssysteme, die bereits für unterschiedliche Einsatzzwecke optimiert sind [2].

Einer der größten Unterschiede zwischen EC2-Instanzen und anderen virtuellen Servern ist, dass jegliche während der Laufzeit der Instanz auf die Festplatte geschriebenen Informationen verloren sind, sobald man die Instanz beendet. Bei einer Vielzahl von Einsatzzwecken wird ein Entwickler aber Daten dauerhaft speichern wollen. Hier schafft Amazon mit dem „Elastic Block Store“ (EBS) Abhilfe.

Der Entwickler kann einzelnen Instanzen EBS-Volumes per API zuweisen, diese erscheinen dann wie lokale Festplatten. EBS-Volumes können mit dem Dateisystem der Wahl formatiert oder auch zu Softwareraids zusammengefasst werden. Jedoch kann man EBS-Volumes nicht mehreren Instanzen gleichzeitig zuweisen.

Was früher gern als „Cyberspace“ bezeichnet wurde, ist mittlerweile für einen Großteil der Bevölkerung gelebte Realität. Der Erfolg von Internetriesen wie Facebook oder Twitter ist nicht mehr zu übersehen und sie sind längst im Mainstream angekommen. Social Media zu nutzen, ist fluffig-leicht geworden, Nutzer können sich voll und ganz darauf konzentrieren, ihre Inhalte ins Netz zu stellen, sie mit anderen zu teilen und sich auszutauschen, ohne sich um technische Voraussetzungen kümmern zu müssen. Das Ergebnis: Internet-Nutzer springen mittlerweile zwischen den verschiedensten Social-Media-Anwendungen hin und her und können das ganze Spektrum ihres realen Lebens auch in der digitalen Welt abbilden.

Es gibt professionelle Berufsnetzwerke wie Xing und LinkedIn, Online-Treffpunkte für Schüler und Studenten wie SchülerVZ und StudiVZ, lokale Netzwerke für Treffen und Flirts wie die lokalisten.de, Seiten zum Pflegen von Freundschaften wie wer-kennt-wen.de und StayFriends, Plattformen für Musiker und Künstler wie MySpace und Netzwerke für jedermann wie Facebook oder Twitter. Daneben gibt es noch Bilder- und Videoplattformen wie Flickr und YouTube sowie tausende Nischen-Netzwerke für jeden Geschmack. Die weltweit führende Plattform Facebook hat alleine weltweit 400 Millionen Nutzer, davon tauchen 100 Millionen bereits mobil in das Netzwerk ein (Stand Februar 2010).

Millionen Menschen schaffen sich durch ihre sozialen Netzwerke eine real fiktive Umgebung, die für viele zur zweiten Heimat wird. Die Parallelwelt im Netz ist zur zweiten Wirklichkeit im Alltag geworden. Das Geflecht aus Beziehungen des realen Lebens – Familie, Freunde, Bekannte, Arbeitskollegen, Vorgesetzte, Mitbewohner des Hauses, des Stadtteils etc. – wird mit Hilfe von Social Media ins Web übertragen und findet dort sein Pendant.

Offline-Storages sind Bestandteil von HTML5 und bieten die Möglichkeit, Daten auf dem Client in einer SQLite-Datenbank zu speichern. Diese Daten werden persistent vorgehalten und unterliegen keinem Verfallsdatum. Daher eignen sie sich gut zum Speichern von Benutzereinstellungen, zum Zwischenspeichern von Daten vor dem Senden an einen Server und um Informationen nur einmal vom Server zu übertragen und vorzuhalten, wenn sich der Inhalt serverseitig selten ändert. Da die Datenbank lokal abgelegt ist, wird keine Internetverbindung benötigt, um darauf zuzugreifen.

Als Beispiel dient in diesem Artikel eine fiktive Videodatenbank. Diese verwendet folgenden HTML-Code als Grundgerüst:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
	<title>Videobestand</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta name="viewport" content="width=320; initial-scale=1.0; user-scalable=0;"/>
	<style type="text/css" media="screen">
		@import "lib/iUI/iui.css";
	</style>
	<style type="text/css" media="screen">
		@import "css/videobestand.css";
	</style>
	<script type="application/x-javascript" xsrc="js/videobestand.js"></script>
	<script type="application/x-javascript" xsrc="lib/iUI/iui.js"></script>
</head>
<body style="overflow:hidden;" onLoad="initDB();">
<div class="toolbar">
	<h1 id="pageTitle"></h1>
	<a id="backButton" class="button" href="#"></a>
</div>
<ul id="home" title="Videobestand" selected="true">
</ul>
</body>
</html>

Das Grundgerüst basiert auf dem iPhone-Userinterface-Framework iUI, das im Verlauf der Serie schon mehrfach zum Einsatz kam. Das eigentliche JavaScript ist in eine externe Datei ausgelagert. Im Body-Bereich befinden sich nur der DIV-Container für die Toolbar am Anfang der Seite und eine ungeordnete leere Liste. Diese Liste soll mit JavaScript gefüllt werden.

Initialisieren der Datenbank

Als erstes müssen Sie die Datenbank initialisieren. Dabei testet das Skript in Listing 2, ob der Browser Offline-Datenbanken unterstützt, indem es versucht, eine Datenbank zu öffnen. Tritt dabei ein Fehler auf, weil die entsprechende Funktion nicht existiert, fängt das Skript den Fehler ab, gibt eine Fehlermeldung aus und bricht an dieser Stelle ab. Im Erfolgsfall wird die Datenbank initialisiert.

function initDB() {

try {
	if (!window.openDatabase) {
		alert('JavaScript-Datenbanken werden von Ihrem Client nicht unterstützt!');
	} else {
		var shortName = 'videodb';
		var version = '1.0';
		var displayName = 'Videobestand';
		var maxSize = 65536; // max. Größe der Datenbank in bytes
		// Im Erfolgsfall enthält mydb eine Instanz des Datenbank-Objekts
		var mydb = openDatabase(shortName, version, displayName, maxSize);

			createTables(mydb);
		queryDB(mydb);
	}
} catch(e) {
	// Hierher kommt der Code für die Fehlerbehandlung (Error Handling)
	if (e == INVALID_STATE_ERR) {
		// Falsche Datenbank-Version.
		alert("Ungültige Datenbank-Version!");
	} else {
		alert("Unbekannter Fehler "+e+".");
	}
	// return;
}
}

Die Initialisierung beginnt mit dem Erzeugen der Datenbank. Das Skript versucht, die Datenbank zu öffnen. Scheitert dies, weil sie noch nicht existiert, wird sie neu angelegt und geöffnet. Der weitere Zugriff erfolgt dann über das Datenbankobjekt und seine Methoden.

Der „shortName“ identifiziert die Datenbank im System und dient als eindeutiger Bezeichner. Der „displayName“ wird vom Browser angezeigt, wenn es zu Benutzerinteraktionen kommt. Die Variante „version“ spielt im Moment noch keine Rolle und wird erst interessant, wenn die geplante Update-Funktion implementiert ist.

Bis es soweit ist, belassen Sie den Wert am besten auf „1.0“. Der Wert „maxSize“ gibt die zu erwartende Größe der Datenbank an und ermöglicht dem System so eine Ressourcenplanung. Wird mehr Speicher erwartet, gibt das System eine Alert-Box aus, die der Anwender bestätigen muss.

Tabelle anlegen und befüllen

Um auf die Datenbank zuzugreifen, bedienen Sie sich SQL-Queries, die Sie auch von anderen relationalen Datenbanken wie MySQL kennen. Die Funktion, mit der die Queries an die Datenbank geschickt werden, heißt „executeSql“ und ist Teil der Transaktion des Datenbankobjekts.

function createTables(db) {
	db.transaction(
		function (transaction) {
			transaction.executeSql('SQL-Statement', [], nullDataHandler, errorHandler);
		}
	}
}

Statt SQL-Statement setzen Sie hier das gewünschte SQL-Kommando ein. „NullDataHandler“ ist eine Funktion, die nichts macht. Erwarten Sie einen Rückgabewert, beispielsweise das Ergebnis einer Abfrage, steht hier die Funktion, die das Ergebnis annehmen soll. Die Funktion „errorHandler“ wird nur aufgerufen, wenn ein Fehler bei der Abfrage auftritt.

function createTables(db) {
	db.transaction(
		function (transaction) {
			transaction.executeSql('DROP TABLE IF EXISTS videos;',
															[], nullDataHandler, errorHandler);
				transaction.executeSql('CREATE TABLE IF NOT EXISTS videos (VideoID INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT , Name TEXT NOT NULL, Genre TEXT NOT NULL, gesamt INT NOT NULL, verliehen TEXT NULL );',[], nullDataHandler, errorHandler);
				transaction.executeSql('INSERT INTO videos (VideoID, Name, Genre, gesamt, verliehen) VALUES (NULL, "Alien", "SciFi", "12", "11");', [], nullDataHandler, errorHandler);
         transaction.executeSql('INSERT INTO videos (VideoID, Name, Genre, gesamt, verliehen) VALUES (NULL, "Fight Club", "Action", "24", "14");', [], nullDataHandler, errorHandler);
				transaction.executeSql('INSERT INTO videos (VideoID, Name, Genre, gesamt, verliehen) VALUES (NULL, "Keinohrhasen", "Liebeskomödie", "20", "18");', [], nullDataHandler, errorHandler);
				transaction.executeSql('INSERT INTO videos (VideoID, Name, Genre, gesamt, verliehen) VALUES (NULL, "Monster", "Drama", "3", "3");', [], nullDataHandler, errorHandler);
				transaction.executeSql('INSERT INTO videos (VideoID, Name, Genre, gesamt, verliehen) VALUES (NULL, "Serenity", "SciFi", "8", "8");', [], nullDataHandler, errorHandler);
		}
	);
}

function nullDataHandler(transaction, results) { } 

function errorHandler(transaction, error) {
	// error enthält die Fehlermeldung
	alert('ACHTUNG! Es ist ein Fehler aufgetreten: '+error.message+' (Code '+error.code+')');
	return true;
}

Da die Tabelle nun befüllt ist, können Sie sie auch abfragen. Mittels DOM-Scripting werden die Ergebnisse in die Seite eingebaut. Der zugehörige Code sieht wie folgt aus:

function queryDB(db) {
	function dataHandler(transaction, results) {
		var panel = "";
			for (var i=0; i<results.rows.length; i++) {
				var row = results.rows.item(i);
				listElem = document.createElement("li");
				anchorElem = document.createElement("a");
				anchorElem.setAttribute("href","'#"+row['VideoID']+"'");
				anchorElem.appendChild(document.createTextNode(row['Name']));
				listElem.appendChild(anchorElem);
				document.getElementById("home").appendChild(listElem);
					panel = document.createElement("div");
					panel.setAttribute("id",row['VideoID']);
					panel.setAttribute("class","panel");
					panel.setAttribute("title",row['Name']);
					headline = document.createElement("h2");
					headline.appendChild(document.createTextNode("Lokation: " + row['Name']));
					panel.appendChild(headline);
					fieldset = document.createElement("fieldset");
					ptag = document.createElement("p");
					ptag.setAttribute("class","ptext");
					ptag.appendChild(document.createTextNode("Verliehene Videos: " + row['verliehen'] + " von " + row['gesamt']));
			fieldset.appendChild(ptag);
			panel.appendChild(fieldset);
			document.getElementsByTagName("body")[0].appendChild(panel);
		}

	}
	db.transaction(
		function (transaction) {
			transaction.executeSql("SELECT * FROM videos ORDER BY Name;", [], dataHandler, errorHandler);
		}
	);
}

Die abgefragten Daten werden als <li>-Elemente in die Liste eingefügt. Für jedes Element wird ein neuer Container mit der ID des betreffenden Videos angelegt. iUI kümmert sich um die Verknüpfung.

Bei einem vServer werden auf einer physischen Maschine, dem Hostsystem, mehrere separate Arbeitsumgebungen eingerichtet. Diese verhalten sich fast wie ein „richtiger“ Server. Das Hostsystem ist meist in Bezug auf RAM und CPU großzügig dimensioniert, um die notwendigen Ressourcen für eine Vielzahl virtueller Maschinen bereitstellen zu können. Nicht genutzte Resourcen, insbesondere CPU-Zeit, stehen bei einer virtualisierten Umgebung anderen Systemen auf der gleichen Maschine zur Verfügung.

Die Zielgruppe

Wer lediglich auf der Suche nach Speicherplatz für eine Website ist und mit Standardangeboten zurecht kommt, entscheidet sich am besten für ein vom Hoster bereitgestelltes und gewartetes Webspace-Angebot.

Benötigt man allerdings individuelle Lösungen oder möchte selbst als Admin tätig werden, kann ein vServer durchaus eine Überlegung wert sein. Wie bei einem dedizierten Rootserver gilt: Wer sich für ein derartiges System entscheidet, muss dieses auch warten und im Griff haben. Es ist auch in Verbindung mit einem vServer möglich, Administrationswerkzeuge zu nutzen – ganz ohne Kenntnisse des Basissystems wird man aber auf Dauer nicht auskommen. Während es bei dedizierten Root-Servern auch aktiv und individuell durch einen Provider betreute Systeme gibt (Managed Server), stehen bei einem vServer in der Regel maximal über ein zentrales Administrationssystem verwaltete Server zur Verfügung.

Gegenüber einer dedizierten Maschine sind die verfügbaren beziehungsweise zugesicherten Ressourcen auf einem vServer geringer. Wer aber keine Highend-Anwendungen unter Volllast betreiben muss, bekommt mit einem vServer durchaus eine sinnvolle Lösung. Neben Vorteilen wie dem effizienten Einsatz von Energie, Hardware und Rackspace sprechen vor allem die vergleichsweise überschaubaren Kosten für einen vServer.

Leistungsfähigkeit

Natürlich kommt die Leistungsfähigkeit von vServern nicht zwingend an die einer dedizierten Maschine heran. Für eine „betagte“ Hardware können sie aber durchaus ein ebenbürtiger oder gar leistungsfähigerer Ersatz sein. Heutige Virtualisierungslösungen setzen entweder auf Hardware-Virtualisierungsfeatures oder ausgereifte Paravirtualisierung. So wird eine durchaus beachtliche Leistung erreicht. Hinzu kommt, dass virtuelle Server in der Regel auf relativ aktueller Hardware betrieben werden – gegebenenfalls in Verbindung mit Redundanzmöglichkeiten wie einem Failover auf eine alternative Maschine oder einer aktiven Lastverteilung – was sich positiv auf die Verfügbarkeit des eigenen Systems auswirken kann.

In Verbindung mit aktuellen Linux-Systemen ist der Einsatz einer Virtualisierung im Allgemeinen unproblematisch. Wer andere Systeme wie Windows innerhalb einer virtuellen Umgebung betreiben möchte, sollte nach Möglichkeit darauf achten, dass passende Treiber für die verwendete Virtualisierungslösung zur Verfügung stehen, um eine optimierte Festplatten- und Netzwerkleistung zu erreichen.

Welche Leistung die virtuellen Systeme effektiv zur Verfügung stellen, schwankt je nach gewähltem Virtualisierungsansatz sowie der Auslastung des Hostsystems durch die vServer anderer Nutzer. Häufig wird hier CPU-Leistung nach dem „fair use“-Prinzip bereitgestellt. Nur wenige Hoster garantieren die Verfügbarkeit einer bestimmten CPU-Leistung oder erlauben gar die Zubuchung einer höheren Priorität.

Auch wenn Extbase und Fluid gerade in aller Munde sind, ist es wie bei jeder neuen Technologie schwierig, einen einfachen Einstieg in die Thematik zu finden. Das liegt weniger an den beiden Newcomern selbst, sondern eher daran, dass noch wenig Literatur existiert und es Einsteigern oft nicht leicht fällt, sich durch die bereits bestehenden Beispiele zu hangeln. Grund genug für diesen ausführlichen Workshop.

Was sind Extbase und Fluid genau?

In t3n Nr. 16 hat Extbase-Entwickler Jochen Rau ausführlich erklärt, welche Rolle Extbase spielt und warum man es verwenden sollte [1].

Extbase ist zunächst eine ganz normale Systemextension, die als Alternative zur herkömmlichen Extension-Programmierung mittels Erweiterung der tslib_pibase-Klasse verwendet werden kann. Gerne auch parallel, denn Extbase verträgt sich prima mit klassischen Extensions. Extbase führt dabei unter anderem solch schwergewichtige Konzepte wie Domain Driven Design und das MVC-Pattern ein. Damit ist es möglich, sehr elegant auch komplexe Erweiterungen zu schreiben, die sich leicht erweitern lassen. Darüber hinaus – und genau das wird einer der Hauptgründe für die Verwendung sein – werden sich solche Extensions leicht in die zukünftige TYPO3-Version 5.0 migrieren lassen.

Fluid, entwickelt von Core-Developer Sebastian Kurfürst, übernimmt dabei die Aufgabe einer Template-Engine und ist für alle Ein- und Ausgaben zuständig. Auch Fluid ist dabei eine neue Systemextension und kann bei Bedarf gegen eine andere Templating-Engine ausgetauscht werden. Einen ausführlichen Einblick in Fluid liefert ein Artikel in t3n Nr. 16 [2].

Es geht los

Um nun mit Extbase und Fluid loslegen zu können, brauchen Sie eine Installation von TYPO3 4.3 (stable oder beta2). Im Extension-Manager müssen Sie nun noch die beiden Systemextensions Extbase und Fluid installieren, da diese per Default zwar mitgeliefert, aber noch nicht installiert sind. Nun brauchen Sie noch eine Seite im Seitenbaum, bei der Sie sicherstellen müssen, dass Inhalte darauf ausgegeben werden können. Dazu reicht das Aktivieren von „css_styled_content“ und das folgende TypoScript:

page = PAGE
page.10 < styles.content.get

Als nächstes installieren Sie die Extension „efempty“ aus dem TER und platzieren diese auf der vorher angelegten Seite. Wenn Sie nun den Cache leeren und die Seite im Frontend laden, sollten Sie „Hello World!“ lesen können. Wenn dies bei Ihnen der Fall ist, sind Extbase und Fluid ordnungsgemäß installiert und grundsätzlich einsatzfähig.

Die Extension „efempty“ (als Abkürzung für „Extbase Fluid Empty“) ist dabei ein leerer Container, der die minimale Konfiguration enthält, die für den Betrieb der Extension im Zusammenspiel mit Extbase und Fluid notwendig ist. Sie können damit beispielsweise mit Fluid experimentieren, ohne auf Extbase achten zu müssen oder die Extension einfach Datei für Datei erkunden, um zu sehen, wie das Zusammenspiel der Dateien funktioniert.

In diesem Workshop werden Sie allerdings eine neue Extension manuell aufbauen, um alle wichtigen Bereiche kennenzulernen.

Extension: „guestbook“

Ihre eigene Extbase-Extension soll ein sehr einfaches Gästebuch realisieren. Diese soll eine Liste von Gästebucheinträgen anzeigen und jedem die Möglichkeit bieten, eigene Einträge hinzuzufügen. Ein Gästebucheintrag hat dabei einen Titel, einen Text und natürlich ein Datum.

Wenn man den Paradigmen des Domain Driven Design folgt, dann ist der Eintrag (Englisch: Entry) eine Entity mit den Eigenschaften „Title,“ „Text“ und „Date“. Eine Entity ist dabei ein eigenes Objekt mit einer Identität – das heißt die Einträge unterscheiden sich, auch wenn diese den selben Inhalt haben sollten. Dafür werden wir gleich noch eine eigene Klasse benötigen. Vorher aber zum prinzipiellen Ablauf. Im MVC-Paradigma brauchen Sie einen Controller, der die so genannten Aktionen (Actions) verwaltet. Sie benötigen zwei offensichtliche Actions – eine, um das Gästebuch anzuzeigen (diese nennen wir index), dann eine Action, um das Formular anzuzeigen, mit dem man neue Einträge hinzufügen kann (add) und eine Action, die den Eintrag dann tatsächlich in die Datenbank schreibt (create).

Convention over Configuration

Innerhalb der Programmierung mittels Extbase und Fluid gibt es sehr viele Konventionen (Vereinbarungen) in Bezug auf Benennungen, beispielsweise von Dateiklassen oder Verzeichnisnamen. Das mag anfangs verwirren, weil man nicht genau weiß, warum und wie etwas festgelegt wurde – hat man das System aber einmal verinnerlicht, so hilft es einem enorm, wenn es darum geht, sich im Code zurechtzufinden. Die Konventionen helfen aber nicht nur dem Programmierer, sondern auch Extbase selbst, da Extbase automatisch bestimmte Funktionen ausführen kann, selbst wenn diese vorher nicht definiert wurden.