openEngine: Flexible Plattform für individuellen, benutzerfreundlichen Content

aperta machina.
Kommentare

In diesem Artikel erfahren Sie, wie Sie das Open Source Web-CMS openEngine auf Ihren Webserver installieren und konfigurieren. Außerdem lernen Sie, wie Sie ein einfaches Layout umsetzen und Inhaltsbereiche durch verschiedene openEngine-Editoren bearbeitbar machen können.

Redakteure in mittleren bis großen Unternehmen haben in der Regel keine technischen Kenntnisse, um komplexe HTML-Seiten erstellen zu können. Ihre Kompetenz besteht darin, das vorhandene Fachwissen verständlich zu formulieren. Um bei diesen Voraussetzungen Inhalte im Internet publizieren zu können, ist ein Content-Management-System (CMS) notwendig, das einfach zu bedienende Eingabemöglichkeiten bietet. Das Open Source Web-CMS openEngine erfüllt diese Anforderungen. Dem Redakteur stehen inhaltsbezogene und intuitiv bedienbare Editoren zur Verfügung, z.B. Editoren mit einzeiligen Eingabefeldern für Überschriften und einfach strukturierte Daten, WYSIWYG-Editoren für formatierte Texte und ein Editor zum einfachen Platzieren von Bildern, der unmittelbar an der Stelle aufrufbar ist, wo das Bild erscheinen soll. Durch ein granulares Berechtigungskonzept kann der Site-Administrator dabei jedem Autor individuell Bereiche der Web-Site zum Bearbeiten zuordnen. So kann jeder Autor in dem Bereich arbeiten, für den er auch verantwortlich ist. Zusätzlich wird es für Unternehmen immer wichtiger, sich individuell im Internet zu präsentieren um sich damit von Mitbewerbern hervorheben zu können. Dazu kommen die immer größer werdenden Seitenzahlen bei Corporate-Web-Sites. Das zugrunde liegende CMS muss demnach eine flexible Template-Engine enthalten, mit der individuelle Konzepte umsetzbar sind. Außerdem muss der Autor jederzeit seine Inhalte strukturell im Überblick behalten können. openEngine nutzt keine eigene Programmiersprache zur Template-Definition, sondern setzt voll auf PHP. Dem Template-Programmierer steht so der komplette Funktionsumfang der Skriptsprache zur Verfügung. Zusätzlich werden zahlreiche vordefinierte Variablen und Funktionen von openEngine zur Inhaltsgenerierung und Manipulation angeboten. Dieses offene Template-Konzept ermöglicht die Umsetzung von individuellen Designs mit aktueller XHTML-Programmierung und die Einbindung vorhandener PHP-Funktionalitäten. Das openEngine-CMS wird seit über vier Jahren kontinuierlich weiterentwickelt und ist sowohl bei zahlreichen mittelständigen Unternehmen, als auch bei großen Firmen aus der Industrie, die auf hohe Verfügbarkeit, kostengünstige Anpassungen und geringe Schulungsaufwände für Redakteure wert legen im Einsatz.

Installation und Konfiguration von openEngine

Sie erhalten die aktuelle Version von openEngine im Downloadbereich der Projekt-Homepage. Dort steht das System in zwei verschiedenen Versionen zum Download bereit: Das Paket „Demo-Site“ enthält das CMS und einen vorkonfigurierten Demo-Auftritt. Dieser Beispielauftritt soll die Konzepte von openEngine erklären und durch die enthaltenen Templates den Einstieg in die Programmierung erleichtern. Das Paket „Empty-Project“ enthält lediglich das CMS und ein leeres Template. Dieses Paket ist der ideale Ausgangspunkt für ein eigenes, neues Projekt. Dazu benötigt openEngine PHP ab der Version 4.3 und MySQL ab der Version 4. Als Redakteur nutzen Sie Mozilla Firefox ab der Version 1.5 oder den Internet Explorer ab Version 6. Für das hier beschriebene Beispielprojekt starten Sie bitte den Download des Pakets „Empty-Projekt“. Entpacken Sie die ZIP-Datei auf Ihrem Webserver. Im Folgenden wird davon ausgegangen, dass die Datei index.php des openEngine-Pakets unter der URL http://localhost/project/index.php erreichbar ist und dass eine leere Datenbank, z.B. per phpMyAdmin angelegt, zur Verfügung steht. Starten Sie nun die openEngine-Installationsroutine unter http://localhost/project/cms/system/setup und folgen Sie den Anweisungen. Diese Routine fragt wenige Parameter ab und richtet die Struktur der Datenbank ein. Nach erfolgreicher Installation sehen Sie unter http://localhost/project eine einfache Textseite.

Erstellung des ersten Templates

Bevor Sie sich als Redakteur am CMS anmelden und Inhalte erfassen, erstellen Sie Ihr erstes openEngine-Template. openEngine-Templates werden im Ordner „/cms/templates“ abgelegt und bestehen aus einem Unterordner mit einer enthaltenen Datei index.php. Nach der Installation von openEngine sehen Sie im Template-Ordner das Template „default“. Um dieses Layout anzupassen, öffnen Sie die Datei „/cms/templates/default/index.php“ mit Ihrem favorisierten PHP- oder Text-Editor. Löschen Sie den bestehenden Inhalt der Datei und tragen Sie den PHP-Quelltext aus Listing 1 ein.

= $site_name; ?>
include("templates/includes/nav_primary.php"); ?>
editUpload("page_file1","Bild uploaden"); ?> if (isContent("page_file1")) { ?> <img src="../html/img/pool/" alt="" /> } ?>

editItem("page_headline","Überschrift bearbeiten"); ?>

editText("page_text1","Text bearbeiten"); ?>

Damit haben Sie Ihr erstes openEngine-Template fertig gestellt. Es handelt sich um eine XHTML-Seite mit integrierten openEngine-Funktionen und Platzhaltern. Das Layout besteht aus einem Banner (Visual), in dem der Name Ihrer Website eingetragen wird (

psenv::pushli(); eval($_oclass[„site_name“]); psenv::popli(); ?>

). Darunter befindet sich eine im openEngine-Paket vordefinierte Hauptnavigation, die per include() eingebunden wird. Die rechte Spalte kann ein Bild aufnehmen (editUpload). Die linke Spalte beinhaltet eine Artikel-Überschrift, bearbeitbar über einen einzeiligen Editor (editItem), und einen Fließtext, den Sie mit einem WYSIWYG-Editor (What You See is What You Get) durch die Funktion „editText“ pflegen können. Die Seite wird durch eine Fußzeile abgeschlossen. Wie sie erkennen können, erstellen Sie in einem Template nur den Bereich innerhalb des HTML-Bodys. Der Seiten-Kopf ist ausgelagert in der Datei /cms/templates/_system/head.php. Auch diese Datei können Sie Ihren Bedürfnissen anpassen. Das dazugehörige Cascading Stylesheet ist ausgelagert und befindet sich unter /html/style/screen/style.css. Öffnen Sie die Datei und tragen Sie die Formatierungsanweisungen aus Listing 2 ein.

body {
	background-color: #fff; margin: 0px; padding: 0px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px; color: #000; line-height: 18px;
}
h1 { font-size: 16px; margin-top: 10px; margin-bottom: 20px; }

#visual { background-color: #ccc; padding: 10px; }
#nav_primary { border-bottom: 1px solid #ccc; }
#nav_primary ul { margin: 0px; padding: 0px; }
#nav_primary ul li { display: inline; list-style-type: none; padding-left: 10px;}
#nav_primary ul li a { color: #000; text-decoration: none; }
#nav_primary ul li a.high { font-weight: bold; }
#content { position: relative; margin-bottom: 50px; width: 750px; }
#content .right { position: absolute; left:10px; top: 10px; width: 150px; font-size:11px; }
#content .left { margin-left: 200px; }
#footer { border-top: 1px solid #ccc; font-size: 11px; color: #aaa; }
Inhalte über die Editoren eingeben

Um nun Inhalte in Ihre Website eintragen zu können, müssen Sie sich am Content-Management-System authentifizieren. Dazu rufen Sie die Login-Maske von openEngine über die URL http://localhost/project/cms/openengine auf und melden sich als Administrator mit folgendem Standard-Account an:

Sie sehen nun Ihre Web-Seite mit zusätzlichen Icons und dem Admin-Menü. Ziehen Sie das Menü durch Klick auf den oberen Rahmen und per Drag & Drop an eine beliebige Stelle des Bildschirms. Die Position wird automatisch gespeichert, so dass das Menü auch bei einem Seitenwechsel immer an derselben Position erscheint. Hier editieren Sie die Überschrift durch Klick auf das Edit-Icon links neben der Überschrift (Abbildung 1). Es öffnet sich der einzeilige Editor. Tragen Sie einen beliebigen Text ein und bestätigen die Eingabe mit Klick auf „OK“. Damit haben Sie Ihre Überschrift geändert.

Abb. 1: Bearbeiten der Überschrift über den einzeiligen Editor

Darunter finden Sie das Edit-Icon zum Bearbeiten des Fließtextes. Wenn Sie auf dieses Symbol klicken, öffnet sich der WYSIWYG-Editor zum Eintragen von formatierten Texten. Geben Sie hier einen Text ein und bestätigen Ihre Eingabe mit OK. Ihre Seite sollte nun ähnlich wie in Abbildung 2 dargestellt aussehen. Nachdem Sie Ihre Inhalte eingeben haben, müssen Sie diese durch Klick auf das Release-Icon, welches neben dem Edit-Icon erschienen ist, veröffentlichen. Ihre neuen Inhalte sind nun für Besucher Ihrer Web-Site sichtbar. Eine ausführliche Beschreibung der Editoren und der Funktionen des openEngine Admin-Menüs erhalten Sie in der „Dokumentation für Autoren“.

Abb. 2: Mit den openEngine-Editoren bearbeitete Web-Seite
Assets verwalten mit dem openEngine-FilePool

Durch den Upload-Editor in der linken Spalte haben Sie die Möglichkeit, an exakt dieser Stelle ein Bild in Ihre Web-Site zu integrieren. Dazu klicken Sie auf das entsprechende Icon und wählen im erscheinenden Dialog das Symbol „FilePool öffnen“ aus. Der openEngine-FilePool verwaltet sämtliche Assets, also Bilder und Dateien, die für Ihren Auftritt relevant sind, in einer frei definierbaren Ordner-Struktur. Der FilePool setzt in der Darstellung der notwendigen Funktionen voll auf aktuelle AJAX-Technologien, um eine möglichst ähnliche Bedienung eines Dateimanagers zu erreichen. Um z.B. einen neuen Ordner anzulegen, klicken Sie mit der rechten Maustaste auf den Ordner FilePool und wählen „Neuen Unterordner anlegen“ aus. Durch Klick auf den neu erstellten Unterordner haben Sie die Möglichkeit, den Ordner umzubenennen und Dateien von Ihrer Festplatte zum Server zu übertragen.

Abb. 3: Der openEngine FilePool

Wählen Sie die Funktion „Datei-Upload in diesen Ordner“ aus und übertragen Sie ein Bild von maximal 150 Pixeln Breite in den FilePool. War der Upload erfolgreich erscheint im rechten Bereich eine verkleinerte Ansicht (Thumbnail) des Bildes. Klicken Sie auf das Thumbnail und bestätigen Sie Ihre Auswahl mit Klick auf „OK“. Ihr ausgewähltes Bild wird im Upload-Editor angezeigt. Bestätigen Sie auch hier mit „OK“ und das Bild wird in Ihrer Web-Seite eingetragen.

Die Navigation erweitern

openEngine speichert Web-Seiten in einer hierarchischen Baumstruktur. Das bedeutet, dass der Root-Knoten der Baumstruktur die Homepage darstellt. Demnach repräsentieren die zur Homepage strukturell gespeicherten Unterseiten die Hauptnavigation Ihrer Web-Site. Um einen neuen Hauptnavigationspunkt anlegen zu können, rufen Sie von Ihrer Homepage aus dem openEngine-Admin-Menü die Funktion „Neue Unterseite“ auf. Im erscheinenden Dialog tragen Sie den Seitentitel, den Navigationstitel und die Überschrift in die vorgesehenen Felder ein. Zusätzlich müssen Sie einen eindeutigen Dateinamen definieren, unter dem Ihre neue Webseite erreichbar sein soll. Ersetzen Sie dazu im entsprechenden Feld „newfilename.htm“ z.B. durch „produkte.htm“. Bestätigen Sie Ihre Eingaben mit OK. Nachdem sich der Dialog geschlossen hat, sehen Sie, dass sich die Navigation automatisch um Ihre neu erstellte Seite erweitert hat. Wenn Sie zur neuen Seite navigieren, haben Sie dort die Möglichkeit, wiederum Inhalte durch die openEngine-Editoren zu definieren. Neu angelegte Seiten befinden sich grundsätzlich im Status gesperrt und sind somit nicht für Besucher Ihrer Web-Site erreichbar. Dies erkennen Sie am roten Fahnensymbol am linken oberen Bildschirmrand. Um die Seite freizugeben, klicken Sie auf das rote Fahnensymbol und wählen im erscheinenden Dialog unter Status „Freigegeben“ aus. Nach Bestätigung Ihrer Eingabe sehen Sie ein grünes Fahnensymbol, das die Erreichbarkeit Ihrer neuen Seite signalisiert.

Weitere Einsatzmöglichkeiten

Wie Sie in diesem Artikel erfahren haben, ist openEngine durch die offene Template-Architektur für beliebige Webdesigns einsetzbar. Sie haben die Möglichkeit mit XHTML/CSS- und wenigen PHP-Kenntnissen beliebige Seitenlayouts über openEngine pflegbar zu machen. Durch die inhaltsspezifischen Editoren können Sie zusätzlich Ihre Autoren vor Fehleingaben und unerlaubten Formatierungen schützen. In der „Dokumentation für Administratoren“ erfahren Admins, wie sie weitere Autoren registrieren und mit granularen Berechtigungen auf Ihrer Seitenstruktur versehen können. So eignet sich openEngine auch für umfangreiche Seiten und eine große Menge an Redakteuren. Außerdem lesen Sie, wie Sie weitere Templates erstellen und im CMS registrieren können. In der „technischen Dokumentation“ lernen Sie weiterhin alle vordefinierten openEngine-Funktionen und verfügbare Editoren kennen und lesen, wie diese in Templates eingebunden werden können. Ein weiteres Feature sollte nicht unerwähnt bleiben: openEngine bietet Ihnen die Möglichkeit, Ihre mit PHP dynamisch generierten Web-Sites als einzelne und unabhängige HTML-Seiten zu exportieren. Diese Funktion, die in der Regel nur in kommerziellen Systemen voll integriert ist, ermöglicht den Einsatz von openEngine auch für hochfrequentierte Web-Sites, da Besucher nur noch auf die statischen Web-Seiten zugreifen, die in der Regel mit hoher Performance vom Web-Server ausgeliefert werden. Nur Ihre Redakteure arbeiten noch mit dem dynamischen Content-Management-System.

Fazit

openEngine ist ein ausgereiftes und flexibles Open-Source-CMS, mit dem Sie nach kurzer Einarbeitungszeit Ihre individuellen Ideen kostengünstig und schnell umsetzen können.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -