mahi-mahi 1.0 up and running

Hallo!
Während hier noch detaillierte Anleitungen zum Pimpen von pragmaCMS 1.0 zu lesen sind, hat die Zeit diese Einträge längst überholt: mahi-mahi 1.0 ist bereits im Einsatz und die Website von Pragmapool enthält nur noch ein leeres HTML-Dokument.

Ab sofort wird hier daher nicht länger über ein Museumsstück debattiert sondern eine Bedienungsanleitung geliefert.

Have fun!

Installation des Texteditors TinyMCE

Nachdem Sie in der Datei edit.php, wie im vorherigen posting beschrieben, den Code ausgetauscht haben, der den Texteditor in die Webseite einfügt, können Sie mit wenigen Zeilen Code verschieden umfangreiche Icon-Leisten in TinyMCE generieren. Mit

tinyMCE.init({ mode : "textareas", theme : "advanced"});

bekommen Sie bereits eine ansehnliche Auswahl an Funktionen, mit denen Sie beispielsweise Listen erstellen, Bilder einfügen oder mit Sonderzeichen arbeiten können. Das von mir favorisierte Script zur Installation von TinyMCE sieht folgendermaßen aus:

tinyMCE.init({ mode : "textareas", theme : "advanced", plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu", theme_advanced_buttons1_add_before : "save,separator", theme_advanced_buttons1_add : "fontselect,fontsizeselect", theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor", theme_advanced_buttons2_add_before: "cut,copy,paste,separator,search,replace,separator", theme_advanced_buttons3_add_before : "tablecontrols,separator", theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_path_location : "bottom", plugin_insertdate_dateFormat : "%Y-%m-%d", plugin_insertdate_timeFormat : "%H:%M:%S", extended_valid_elements : "a[namehreftargettitleonclick],img[classsrcborder=0alttitlehspacevspacewidthheightalignonmouseoveronmouseoutname],hr[classwidthsizenoshade],font[facesizecolorstyle],span[classalignstyle]", external_link_list_url : "example_data/example_link_list.js", external_image_list_url : "example_data/example_image_list.js", flash_external_list_url : "example_data/example_flash_list.js"});

Damit bekommen Sie einen sehr umfangreichen und vielseitigen "Werkzeugkasten", mit dem Sie Ihre Website gestalten können:

PimpMyCMS I: Austausch des Texteditors

Zum Austausch des Texteditors HTMLArea gegen TinyMCE sind zumindest Grundkenntnisse in HTML, PHP und JavaScript notwendig. Sie benötigen nicht unbedingt einen Webseiten-Editor dazu, es erleichtert die Arbeit allerdings erheblich. Wenn Sie pragmaCMS nur anwenden wollen und dieses Blog eher als Benutzerhandbuch ansehen, können Sie diesen Eintrag ruhigen Gewissens übergehen.

Gehen Sie zunächst auf die Website von TinyMCE: http://tinymce.moxiecode.com/ . Auf der Download-Seite bekommen Sie die aktuelle Version als .zip oder .gzip - Datei sowie einige Plugins, mit denen wir uns später beschäftigen werden. Laden Sie die Datei herunter und entpacken Sie sie in das Verzeichnis /pragmacms. Es wird ein neues Unterverzeichnis /tinymce erstellt.

Als nächstes öffnen Sie die Datei edit.php des content management Systems in Ihrem Webseiten-Editor. Wählen Sie die Quellcode-Ansicht. Das Listing beginnt mit einem kurzen PHP-Script, welches das Login überprüft und eventuell bereits vorhandenen Content auswählt. Nach einem kurzen internen CSS (welches wir auch noch ändern werden...) folgt ein JavaScript, dass die Einbindung des Texteditors HTMLArea regelt:

load htmlarea_editor_url = "htmlarea/";// URL to htmlarea
files_editor_field = "textarea";
var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);
if (navigator.userAgent.indexOf('Mac')>= 0)
{ win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Windows CE')>= 0)
{ win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Opera')>= 0)
{ win_ie_ver = 0; }
if (win_ie_ver >= 5.5)
{document.write('document.write(' language="Javascript1.2">');}
else
{document.write('function editor_generate()
{return false;}');}
var MyBgColor ='#FFFFFF';var MyBgImg ='';//

Dieses Script sowie die darauffolgenden Anweisungen

function updateAttributes(){document.myform.bgcolor.value=MyBgColor;
document.myform.background.value=MyBgImg;

können Sie komplett löschen. Auch die Anweisungen für die verschiedenen Betriebssysteme bzw. Browser können gestrichen werden, solange vom Administrator und etwaigen Redakteuren ein moderner Browser und ein aktuelles Betriebssystem verwendet wird. Eine aktuelle Liste der Kompatibilitäten ist erhältlich unter http://wiki.moxiecode.com/index.php/TinyMCE:Compatiblity . Unabhängig vom Betriebssystem empfiehlt sich laut dieser Liste die Verwendung des Mozilla Firefox!

Anstelle des herausgelöschten Scripts wird nun ein JavaScript eingesetzt, dass TinyMCE in die Webseite einfügt. Dieses ist im Falle von TinyMCE variabel. Im einfachsten Fall sieht es folgendermaßen aus:

tinyMCE.init({ mode : "textareas", theme : "simple"});

Das ist im Prinzip schon alles! Speichern Sie die edit.php und sehen Sie sie sich in der Browseransicht an. Die Webseite enthält einen Editor mit einer sehr einfachen Iconleiste, die zwar nur die notwendigsten Funktionen bietet, aber bereits benutzt werden kann:

Quelle: http://wiki.moxiecode.com/examples/tinymce/installation_example_00.php

Für Anwendungen, die eine sehr einfache, fool-proof -e Bedienbarkeit bieten müssen wie beispielsweise öffentliche Foren sind derart schlicht gehaltete Texteditoren sicherlich von Vorteil. Damit wir in unserem content management System eine leistungsfähige Textgestaltung und eine Verwaltung von Mediadaten wie Bilder, Grafiken, FLASH-Animationen zur Verfügung haben, müssen wir allerdings noch ein paar Zeilen Code mehr einfügen.

Eine vollständige Icon-Leiste, mit der sich Texte formatieren, Bilder und verschiedene Filmformate einfügen sowie Tabellen erstellen lassen, sieht so aus:

Quelle: http://tinymce.moxiecode.com/example_full.php?example=true

Wenn Sie dem Link in der Quellenangabe folgen, gelangen Sie zu einem teilweise funktionsfähigen Beispiel, mit dessen Funktionen wir uns in einem der nächsten Postings intensiver beschäftigen werden.

Wie Sie TinyMCE mit allen Funktionen installieren, erfahren Sie im nächsten posting oder im Wiki von Moxiecode.

Editieren von content I

Auswahl des contents*
Es gibt in pragmaCMS zwei Wege, den content zur Bearbeitung auszuwählen: Einmal über die Auswahl aus der Tabelle (1) oder über die Option "View Main Page" (2).

Wählen wir zunächst ein Inhaltselement über die Tabelle aus. Ein Klick auf den Tiel des Elementes, und wir gelangen zum Texteditor, in dessen Textfeld der ausgewählte content angezeigt wird.

Ein überraschend komfortables Detail ist die Funktion "View Main Page", die ein so genanntes in-site editing erlaubt. Mit einem Klick auf den entsprechenden Link gelangt man auf die Startseite des Frontends, wobei jeder Inhaltsbereich nun mit einem kleinen Icon versehehn ist. Ein Klick auf dieses Icon, und man kann den jeweiligen Inhalt mit dem Texteditor bearbeiten. Der in-site editing - Modus bleibt beim Durchklicken durch die gesamte Website erhalten, so dass man seine Website ganz bequem und intuitiv bearbeiten kann.

Der Texteditor

Der Texteditor "HTMLArea"

Online-Texteditoren stammen meist von anderen Anbietern (third-party components). Sie erlauben eine ähnlich komfortable Bearbeitung von webbasierten Texten wie in vertrauten Textbearbeitungsprogrammen, z.B. Word oder OpenOffice, wobei der zu bearbeitende Text in einem Textfeld erscheint, über dem eine Leiste mit Icons angebracht ist, die verschiedene Funktionen bieten.

Die Icon-Leiste von HTMLArea

Unterhalb des Textfeldes befinden sich in pragmaCMS drei Schaltflächen, mit denen der Inhalt gespeichert (Save Content) oder verworfen (Cancel Changes) werden kann. Die dritte Schaltfläche (Images) diesnt zur Verwaltung eines einfachen Bildarchivs und wird uns später beschäftigen.

Mit dem ursprünglich in pragmaCMS verwendeten Texteditor HTMLArea werden wir uns allerdings nicht näher beschäftigen, denn er ist inzwischen ein totes Projekt. Selbst im Forum der Website zu HTMLArea wird inzwischen empfohlen, einen anderen Texteditor zu verwenden. Zwar funktioniert pragmaCMS tadellos mit dem mitgelieferten Editor, allerdings wird HTMLArea nicht vom Mozilla Firefox unterstützt, und auch in einer MAC-Umgebung streikt er. Im Textfeld wird in diesen Fällen lediglich der Quellcode der zu bearbeitenden Webseite angezeigt.

Ein sehr komfortabler, intuitiv zu bedienender und kostenlos verfügbarer Texteditor ist beispielsweise TinyMCE . Er bietet eine Reihe sehr nützlicher Funktionen und ist auf der Website des Anbieters Moxiecode Systems AB hinreichend gut dokumentiert. Außerdem werden dort einige interessante, wenn auch nicht kostenlose Plugins (Zusatzfunktionen) zum download angeboten, wie auch die kostenpflichtige Vollversion MCE.

Wie HTMLArea gegen TinyMCE ausgetauscht werden kann, wollen wir uns im folgenden Eintrag ansehen.

---

* content: engl.: Inhalt. Text, Grafiken, Fotos, FLASH-Animationen etc.

pragmaCMS - Annäherung an einen Außenseiter

pragmaCMS in a nutshell

PragmaCMS ist ein ursprünglich sehr einfach gehaltenes content management System, das für kleine und mittlere Webauftritte gedacht ist. Entwickelt wurde es 2003 von J Wynia, der aus seinem Vornamen stets ein Geheimis macht und das J ohne Punkt schreibt. J ist Softwareentwickler und lebt mit seiner Frau und zwei Bassets in Minneapolis, MN.

pragmaCMS ist in PHP geschrieben und Open Source, d.h. der Quellcode liegt offen. Das System kann also jederzeit und von jeder/m, der/die sich dazu berufen fühlt, verändert, erweitert oder umgeschrieben werden. Es benötigt eine mySQL-Datenbank, in welcher in der Grundversion die Inhalte der verwalteten Website in "nur" einer einzigen Tabelle gespeichert sind.

Eine mit pragmaCMS verwaltete Website gliedert sich, wie allgemein üblich, in Frontend und Backend. Das Frontend ist das, was der Besucher eines Website sieht - die einzelnen Webseiten mit Texten, Grafiken, Fotos, Flash-Animationen usw. Das Backend ist, wie der Begriff schon nahelegt, die Rückseite einer Website: Die Verwaltungsoberfläche, über die die Inhalte der Website administriert, verändert, aktualisiert oder gelöscht werden können. Größere und komplexere content management Systeme erlauben darüberhinaus auch beispielsweise die Verwaltung einzelner Benutzer und deren Benutzerrechte. dazu allerdings später mehr.

Schauen wir und erst einmal das Front- und Backend einer mit pragmaCMS verwalteten Website an. Was das Frontend betrifft, ist das einfach. Sehen Sie sich einfach meine eigene Website an, und Sie wissen, was ein Frontend ist: http://www.marcus-buchwald.de/. Das Backend von pragmaCMS sehen wir uns im Folgenden einmal genauer an.

Das Backend

Das Backend wird über den URL http://www.meine-domain.tld/admin.php aufgerufen. Als erstes erscheint ein einfaches Login:



Bevor man zu den Inhalten gelangt, wird das erfolgreiche Logins bestätigt. Der content der jeweiligen Website wird daraufhin in einer Tabelle angezeigt. Jedes Element wird fortlaufend nummeriert. Der content kann zur Bearbeitung ausgewählt, gelöscht oder in einer einfachen Vorschau angezeigt werden. Mit der Option "Add new content" können neue Elemente hinzugefügt werden, und mit einem Klick auf "View Main Page" wird die Website im so genannten in-site - Editiermodus angezeigt. Mit "Logout" verlässt man das Backend und beendet die Sitzung.



Klicken wir also auf ein Inhaltselement und schauen, wie wir bestehenden content bearbeiten können.

Anfang...

Hallo und herzlich willkommen auf meinem brandneuen Blog. Wie schon in der rechts stehenden Beschreibung angekündigt werde ich hier alles Mögliche und Unmögliche über "mein" content management System pragmaCMS 1.0 bloggen, denn ich halte es für ein sehr vielseitiges, aber leider so gut wie unbekanntes und vom Autor schrecklich stiefmütterlich behandeltes CMS.

Meine Mittagspause ist leider komplett für die Einrichtung dieses Blogs draufgegangen, daher gibt es die weiteren Details auch erst später ;-)