RE-Design – Enrico Reinsdorf

Archiv für Dezember 2008

Da meine Application relativ klein ist, brauche ich nicht viele Hilfsfunktionen bzw. zusätzliche Dateien. Es werden lediglich 2 Dateien und selbst die können später bei den Optimierungsmaßnahmen vielleicht eingespart werden. Beide Dateien werden auf der obersten Ebene des Systems abgespeichert. So dass der Zugriff schnell stattfinden kann.

„include“-Datei

Zu einem ist das die „include“-Datei. Sie lädt über den Befehl „include_once()“ die einzelnen Dateien die für den reibungslosen Ablauf des Systems benötigt werden. Weiterhin enthält sie eine kleine Funktion, die ich nicht mehr missen möchte.

1. function code($msg, $code=HTML_CODE)
2. {
3. $msg = print_r($msg, true);
4. if($code == HTML_CODE)
5. {
6. $msg = htmlentities($msg);
7. }
8. echo '<div><pre>'.$msg.'</pre></div>';
9. }

Sie ist sehr hilfreich, da es immer wieder vorkommt Quellcode, oder ähnliche Angaben im Browser zu veröffentlichen. Die Funktion erwartet mindestens einen Parameter – das was sie anzeigen soll. Der 2. Parameter ist hilfreiche wenn man HTML-Quellcode anzeigen möchte, da ja jeder Browser erstmal jeden Quellcode durch seine Render-Engine jagt und somit umwandelt. Standardmäßig wird jede Anzeige konvertiert, außer man setzt den 2. Parameter auf „HTML_RENDER“. Dabei handelt es sich, wie bei „HTML_CODE“ um eine Konstante, die 2. Datei definiert wird.

Auch habe ich noch eine 2. Hilfsfunktion eingebaut, sie aber später wieder daktiviert, weil sie bei den vielen Änderungen an der Struktur des Systems nur im Wege stand. Trotzdem möchte ich die hier kurz aufzeigen. Vielleicht kommt auch sie später wieder mit in die Application.

1. function __autoload($class_name)
2. {
3. $path = str_replace('_','/',$class_name);
4. $path = strtolower($path);
6. require_once('./core/'.$path.'.php');
7. }

„defines“-Datei

In der „defines“-Datei werden alle wichtigen Konstanten geladen, die das System und der Entwickler braucht. Gott sei dank sind das nur 4 Stück.

1. define('HTML_RENDER', 0);
2. define('HTML_CODE', 1);
3. define('BASEURL', dirname($_SERVER['PHP_SELF']));
4. define('TEMPLATEPATH', 'layouts');

Die ersten beiden Zeilen hatte ich ja gerade schon erklärt. Die Definition der BASEURL legt den absoluten Pfad zur Application fest. In meinen Fall ist das z.B. „http://www.re-design.de/weblabor/REDcms/demo“. So kann man später relativ schnell benötigte Dateien nachladen oder URL-Weiterleitungen programmieren.

Die letzte hat eigentlich das gleiche Ziel – schnell auf den Zielordner der Templates zuzugreifen. Wenn ich mir das aber hier jetzt näher ansehe, stelle ich fest dass es wohl auch sinnvoll wäre diese Definition in die Konfiguration des System auszulagern. So hat später der Verwalter des Systems schnelleren Zugriff um diesen Wert zu ändern. Vielleicht werden ich diese Angabe später noch optimieren.

Downloads

• REDcms_02.zip

Die genaue Interaktion des Programmeres mit dem Benutzer ist sehr vielfältig. Als erstes kann man sich von dem Frontend, also dem Bereich den der normale Benutzer sieht, über eine Anmelde-Maske an das Backend, dem Administrationsbereich, anmelden.

Danach erscheinen im Administrationskasten 3 weitere Links, um eine neue Seite, eine neue Box oder einen neuen Menüpunkt anzulegen. Außerdem kann man über den Button „abmelden” sich vom Administrationsbereich wieder abmelden.

Weiterhin erscheint hinter jedem Seitentitel, jedem Boxtitel und jedem Menüpunkt zwei Icons. Eins um die Seite, die Box bzw den Menüpunkt zu bearbeiten und eins um es zu löschen.

Es gibt also auch bei meinem CMS die klassischen Möglichkeiten zur Verwaltung von Content: hinzufügen, bearbeiten und löschen.

Welche Idee steckt hinter diesen 3 Bereichen?

Als erstes war mir wichtig die einzelnen Seiten sehr flexibel zu halten. Dazu habe ich mir überlegt, dass die tatsächlichen Texte der Seite in einzelne Boxen zu verpacken. Dadurch kann eine Seite sehr individuell aufgebaut werden.

Seite-Angaben

Was beinhaltet nun eine Seite? Eigentlich nur ihren Seitentitel und den Namen des jeweiligen Templates. Alle weiteren Angaben wie Einleitungstext und Autor sind optional.

Box-Angaben

Auch in der Box gibt es nicht viele, zwingende Informationen. Hier sind es der Boxtitel, der Haupttext, der Name des jeweiligen Templates und die Auswahl zu welcher Seite die Box gehört. Optional kann aber auch hier ein Einleitungstext und die Position (die Stelle innerhalb der Boxauflistung in der Seite).

Menü-Angaben

Hier sind nur 3 Angaben zwingend notwendig: der Name des Menüeintrages, die Zuordnung zu eines bestehenden Seite und ob der Menüeintrag ein Untermenü eines bestehenden Eintrages ist. Optional kann der Link mit einem Titel belegt werden.

Weitere Angaben

In allen drei Bereichen besteht die Möglichkeit die Veröffentlichung zu verneinen und damit die Seite, die Box bzw. den Menüpunkt im Frontend nicht anzeigen zu lassen. Außerdem ist schon ein Eingabefeld eingebaut, welches später das Zugriffslevel, also die Berechtigung, definiert.

Downloads

• Interaktion.zip

Das Schwierigste bei der Umsetzung von REDcms war das URL-Design. Ich wollte über eine Seite „index.php“ das alle Anfragen abgearbeitet werden. Früher hat man für jede Anfrage-Art eine eigene PHP-Seite erstellt. Wurde also die Übersichtsseite aufgerufen, dann gab es dafür bspw. eine Seite namens „overview.php“. Wurde hingegen die Detailseite aufgerufen, so gingen alle Befehle an die „detail.php“-Seite.

Bei komplexen bzw. skalierbaren Systemen entsteht dadurch schnell eine Unmenge an bei einzelnen Verarbeitungsdateien. Wenn man nun bedenkt, dass bei diesen Dateien oft ähnliche Verarbeitung zu Gange sind, wird einem schnell klar warum heutige CMS mit einer zentralen Verarbeitungsdatei arbeiten. Auch ich wollte bei REDcms diesen Trend verfolgen. Der Nachteil der dadurch entsteht, ist der das alle verarbeitungsrelevanten Befehle an diese zentrale Datei an gehangen werden müssen. Ein Beispiel für einen solchen Anhang wäre folgende URL:

„http://www.domain.tld/index.php?mode=page&id=1&action=show“

Solche URLs sind aber nicht gerade Suchmaschinen freundlich. Weswegen man mit der Konfigurationsdatei „.htaccess“ und der Modul-Erweiterung „mod-rewrite“ vom Apache-Server die URLs umschreibt. Eine bessere URL für das vorhergehen Beispiel wäre:

„http://www.domain.tld/page/1/show“

oder zumindest:

„http://www.doamin.tld/page/1“

Genau für diesen Zweck gibt es das Modul „mod_rewrite“ mit der man die URLs umschreiben kann.

Wie sieht die „.htaccess“-Datei aus?

Als erstes muss man Rewrite starten und dann braucht man die folgenden 3 Regeln:

1. RewriteRule ^([a-z]+)/*$ index.php?mode=$1&id=1&action=show
2. RewriteRule ^([a-z]+)/([0-9]+)/*$ index.php?mode=$1&id=$2&action=show
3. RewriteRule ^([a-z]+)/([0-9]+)/([a-z]+)$ index.php?mode=$1&id=$2&action=$3

Die Angabe nach RewriteRule ist das Suchmuster gefolgt von der Ersetzungsangabe. Das bedeutet in der ersten Regel, dass alle Angaben nach der Domain umgeleitet werden in die Ersetzungsangabe wobei die Angabe die im Suchmuster in den runden Klammern ([a-z]+) steht in den Platzhalter $1 in der Ersetzungsangabe eingefügt wird. Dazu ein paar Beispiele:

• / – /index.php?mode=&id=1&action=show
• /test – /index.php?mode=test&id=1&action=show
• /helloworld – /index.php?mode=helloworld&id=1&action=show

So gibt in der zweiten Regel 2 Platzhalter und dementsprechend auch 2 Bereiche mit den runden Klammern und in der dritten Regel alles dreifach.

Downloads

• REDcms_01.zip

Wie soll nun also der Ablauf aussehen und was kann eigentlich alles eingestellt werden? Neben dem eigentlichen Frontend, also das was der Besucher der Website zu sehen bekommt, gibt es noch das Backend – den Administrationsbereich. Nach der Eingabe soll an den passenden Stellen Symbole erscheinen an denen REDcms Änderungen erlaubt.

Was soll nun genau alles änderbar sein?

Grob gesagt bestehen alle CM-Systeme aus einem einfachen Prinzip. Man kann etwas hinzufügen, ändern und löschen, so ist es auch bei meinem CMS. Wie schon am 2. Tag geschrieben, gibt es 3 wichtige Bereiche die man administrieren kann. Der erste ist die eigentliche Seite. Hier soll man neue Seiten anlegen, bestehende ändern und löschen können. Das gleiche sollte man natürlich auch für die einzelnen Boxen auf den Seiten machen können. Zum Schluss gibt es auch noch das Menü. Auch hier sollte man einen neuen Menüpunkt hinzufügen können, aber auch bestehende ändern und löschen können.

Als erstes möchte ich euch den allgemeinen Ablauf von REDcms erklären, um dann näher auf die Details einzugehen. Wie schon im ersten Artikel geschrieben, gab es bei mir schon lange den Wunsch ein eigenes CM-System zu erstellen. Ich habe mich auch schon oft hingesetzt und angefangen eins zu schreiben, aber meistens scheiterte es nicht nur an der fehlenden Zeit, sondern auch an dem geplanten Umfang und der detaillierten Planung. Oft habe ich alles auf einmal erstellen wollen und verstrickte mich in zu viele Fragestellungen; was wäre wenn und warum nicht dies oder jenes mit einbauen. Dies sollte sich mit diesem System ändern.

Als erstes habe ich die Funktionalität von REDcms radikal gekürzt, was nicht nur der allgemeinen Machbarkeit dienlich ist, sondern auch der Verständlichkeit. Es gibt also nicht mehr Tausende von Funktionen, sondern mir war es diesmal wichtig die Möglichkeiten sehr einfach und damit überschaubar zu halten.

Was kann also nun REDcms?

Eigentlich wollte ich ein CMS schaffen mit dem man neue Seite anlegen und diese in einer Menüstruktur sortiert kann. Weiterhin wollte ich innerhalb der einzelnen Seite Boxen hinzufügen, um den Inhalt besser zu untergliedern. Das was´s schon.

Das Ganze sollte dann über eine einfache Anmeldung administrierbar gemacht werden. Also anmelden, Dinge ändern und dann wieder abmelden. Ich glaube das dies dadurch sehr intuitiv benutzbar wird. So hoffe ich es zumindest, denn bis jetzt hat keiner mein REDcms getestet.

Wer also Lust hat in diesem System etwas herum zuspielen, der kann sich mit den folgenden Daten anmelden.

• Benutzername: admin
• Kennwort: demo

Bitte beachtet, das sich das CMS Mitternacht wieder in den Urzustand zurücksetzt. Bitte habt dafür Verständnis. Wer Anregungen zur Verbesserung bzw. zur Erweiterung hat, kann an den passenden Stellen einen Kommentar hinterlassen. Auch würde ich mich über jeden gefunden Fehler bzw. Bug freuen, oder auch nicht! Bedenkt aber, dass das System auf Rücksicht der Einfachheit keine Fehlerüberprüfung bei Eingaben macht. Dieses folgt dann bei der Umstellung auf den Produktionsstatus.

Mit dem großen Erfolg letztes Jahr mit meinen Adventskalender 2007 habe ich nicht wirklich gerechnet, deshalb möchte ich das dieses Jahr wiederholen. Im letzten Jahr habe ich aus den verschiedenen Webtechnologien einzelne Themen herausgenommen und darüber berichtet. Dieses Jahr möchte ich mich auf ein Thema konzentrieren. Da ich schon seit sehr langer Zeit ein eigenes CM-System erstellen wollte, fand ich dieses als hervorragenden Aufhänger für meinen diesjährigen Adventskalender. Ich hoffe ihr könnt meine Begeisterung teilen und freut euch mit mir über jeden Tag an dem ich mehr von der Konzeption über die Programmierung bis hin zum Design meines eigenen CM-System veröffentliche.

Warum habe ich ein solches System erstellt, werden sich jetzt einige Leser denken. Es gibt doch genug. Das stimmt! Mir geht es auch nicht direkt um die tatsächliche Verwendbarkeit des Systems. Mir geht es hier um die Wissensvermittlung wie solche Systeme funktionieren können.

Seit mittlerweile 11 Jahren bin ich als freier Dozent im Webbereich tätig und gebe natürlich immer wieder Programmier-Seminare. Dort kommt man leider nicht in die Tiefe ein eigenes System zu entwickeln. Und trotzdem kann man mit relativ wenigen Mitteln bzw. Kenntnissen ein solches System erstellen und genau das soll dieser Kalender verdeutlichen.

Um aber nicht völlig bei Null anzufangen, wäre es gut wenn gute HTML- und CSS-Kenntnisse vorhanden sind. Und da das System eine mySQL-Datenbank voraussetzt und in PHP geschrieben ist, sind Kenntnisse in diesem Bereich erforderlich um alles zu verstehen. Aber ich glaube auch ohne diese Kenntnisse kann man einen Großteil dieses Tutorials gut verstehen und nachvollziehen. Falls nicht, bitte ich euch in Kommentaren offene Fragen zu stellen, die ich dann beantworten kann.

Zum Schluss möchte ich meinem System noch einen Namen geben. Ich hoffe ihr findet ihn passend. Mein Projekt nennt sich „REDcms“. „RED“ kommen von RE-Design und „cms“ naja es ist ja nun mal ein CM-System.

Wer das CMS testen möchte, der findet in meinem Weblabor das entsprechende Demo. Dort werden später auch alle Releases zum Download veröffentlicht.