Erstellen eines Content-Managment-System
In diesem Tutorial möchte ich einige Anregungen geben und Möglichkeiten aufzeigen, mit denen Sie rechte einfache ein browsergestütztes CMS entwickeln können.
CMS steht für Content-Management-System und beschreibt die Möglichkeiten den Inhalt einer Web-Site zu ändern, ohne über Programmierkenntnisse zu verfügen.
CMS ist nicht vergleichbar mit WYSIWYG-Editoren /-Programmen, wie sie von Microsoft, Adobe und Macromedia angeboten werden.
Im Folgenden werde ich drei Ansätze vorstellen:
- CMS mit Textdateien, CSS und PHP
- CMS mit JavaScript-DOM und PHP
- CMS mit einer Datenbank und PHP
» Sie könne dieses Tutorial als PDF-Datei laden «
» nach oben «
CMS mit Textdateien, CSS und PHP
Die wesentlichen Elemente einer solchen Lösung sind zum einem eine Textdatei in der der Content (einfacher Text) geschrieben wird, und zum anderen eine CSS-Datei, welche für die Formatierung zuständig ist. Der Zugriff auf diese beiden Elemente wird über PHP geregelt.
Bestandteile eines solchen CMS:
- ein Formular als php-Datei .php
- eine txt-Datei mit den Content
- eine css-Datei .css
- eine PHP-Datei mit den erstellen PHP-Funktionen
Vorteile:
- wir brauchen keine Datenbank
- funktioniert mit allen Browsern
- man kann das Ganze objektorientiert gestallten
Nachteile:
- Nur Teile einer Web-Site können verändert werden
- ggf. könnte der Quellcode "komisch" aussehen (aber ist das ein Nachteil?)
Das Funktionsprinzip:
PHP liest die Content-Datei (eine txt-Datei) Zeile für Zeile in ein Array ein und gibt die einzelnen Zeilen (Arrayelemente) an der entsprechenden Stelle auf der Web-Site aus. Soll der Content geändert werde, so werden die Arrayelemente in einem Textfeld ausgegeben. Hier kann der Text dann geändert oder Zeilenumbrüche eingefügt werden. Es empfiehlt sich, dazu kleine PHP-Funktionen zu erstellen.
» Beispiel zeigen «
Einlesen der Content-Datei für die Darstellung auf der Web-Site:
<?php
function read_txt_br($txtFile) {
$cms_text = file($txtFile);
for($x=0; $x<count($cms_text); $x++)
{ echo nl2br($cms_text[$x]); }
}
?>
Darstellung auf der Website:
<div> <?=read_txt_br("./derText.txt");> </div>
Einlesen der Content-Datei für die Darstellung in ein Textfeld:
<?php
function read_txt($txtFile) {
$cms_text = file($txtFile);
for($x=0; $x>count($cms_text); $x++)
{ echo $cms_text[$x]; }
}
?>
Darstellung im Textfeld:
<textarea name="cms_text">
<?=read_txt("./derText.txt");>
</textarea>
Diese Funktion unterscheidet sich von vorherigen lediglich dadurch, dass nun die Zeilenumbrüche (\n) nicht in HTML-Code überführt werden.
» Beispiel ausblenden «
Das Schreiben in der Content-Datei habe ich mit einer einfachen Anweisung erledigt, die auf das Versenden des Formularelementes "Textarea" reagiert.
» Beispiel zeigen «
<?php
if(isset($_POST['cms_text'])){
$fp = fopen('cms_text.txt','w'); // oeffnet Datei zum schreiben
fputs($fp, $_POST['cms_text']); // schreibt neuen Inhat
}
?>
» Beispiel ausblenden «
Somit lässt sich der Inhalt einer Textdatei einfach ändern und anzeigen.
Nun müssen wir uns um die CSS-Datei kümmern. Damit dabei nichts durcheinander geriet, müssen wir die Reihenfolge der zu ändernden Eigenschaften exakt festlegen. Als Resultat hat meine CSS-Datei folgenden Inhalt:
.meinText {
font-family:Arial;
font-size:14px;
font-weight:normal;
font-style:normal;
text-decoration:normal;
text-align:left;
color:#000000;
background:#FFFFCC;
}
WICHTIG:
Immer diese Reihenfolge beibehalten
Um diese CSS-Eigenschaften anzusteuern habe ich ein kleines Formular erstellt.
Die Formularelemente sind im Grunde selbsterklärend. Lediglich zu den Buttons für die Text- und Hintergrundfarbe bleibt zu erwähnen, dass dabei jeweils eine Farbtabelle sichtbar wird, wo die entsprechende Web-Farbe gewählt werden kann. Alle Formularelemente reagieren auf onClick oder auf onBlur.
Wie werden diese unterschiedlichen Aktionen umgesetzt?
Auch dazu ist die Antwort recht primitiv und einfache!! Mit PHP und einer Switch-Anweisung.
» Beispiel zeigen «
<?php
if(isset($_POST['aktion']))
{
switch ($_POST['aktion'])
{
case "bold":
red_cssFile(13, 'bold', 'normal');
// Aufruf Funktion read_cssFile(Zeilennummer, Aktion, Normalwert)
break;
case "italic":
red_cssFile(14, 'italic', 'normal');
break;
case "underline":
red_cssFile(15, 'underline', 'normal');
break;
case "align_left":
red_cssFile(16, 'left', '');
break;
case "align_center":
red_cssFile(16, 'center', '');
break;
case "align_right":
red_cssFile(16, 'right', '');
break;
case "font":
red_cssFile(11, $_POST['wert'], '');
break;
case "size":
red_cssFile(12, $_POST['wert'], '');
break;
case "fcolor":
red_cssFile(17, $_POST['wert'], '');
break;
case "bgcolor":
red_cssFile(18, $_POST['wert'], '');
break;
}
}
?>
» Beispiel ausblenden «
Die jeweiligen case-Anweisungen rufen eine PHP-Funktion auf, welche die CSS-Datei einliest, die entsprechende Zeile verändert und anschließen diese neu schreibt.
» Beispiel zeigen «
<?php
function read_cssFile($css_line,$wert,$wert_2) {
// Variable, zur Aufnahme der neuen CSS-Datei
$cssFileNeu = "";
// Array-Variable mit der urpruenglichen CSS-Datei
$cssFile = file('css_datei.css');
for($x=0; $x
// wenn die angegeben Zeilennummer erreicht ist
if($x == $css_line){
// trennt die entsprechende Zeile
$zeile = explode(":",$cssFile[$x]);
// wenn "Defoult-Wert" gesetzt
if(isset($wert_2)){
// steuert das Umschaleten z.B von 'bold' zu 'normal'
if(chop($zeile[1]) == trim($wert.";"))
{ $wert = $wert_2; }
}
// erstellet den Inahlt der neuen CSS-Datei
$cssFileNeu .= $zeile[0].":".$wert.";\n";
}
else
{
// erstellet den Inhalt der neuen CSS-Datei
$cssFileNeu .= $cssFile[$x];
}
}
// CSS-Datei zum schrieben oeffnen
$fp = fopen('css_datei.css','w');
// neuen Werte in die Datei schreiben
fputs($fp,$cssFileNeu);
// Datei schliessen
fclose($fp);
}
?>
» Beispiel ausblenden «
Und damit haben wir ein kleines einfaches CMS geschaffen.
» nach oben «
CMS mit JavaScript-DOM und PHP
Eine solche Lösung ist mit einer Text-Datei sehr ähnlich. Sie unterscheidet sich lediglich darin, das anstelle einer externen CSS-Datei und einer Text-Datei sämtliche Daten wie Content und die Formatierung in einer Datenbank gespeichert werden.
Bestandteile eines solchen CMS:
- eine PHP-Datei mit einem Formular
Vorteile:
- wir brauchen keine Datenbank
- ganze HTML-Dateien können bearbeitet werden
Nachteile:
- funktioniert derzeit nur im IE
Das Funktionsprinzip:
Bedient wird diese Art eines CMS über ein Formular, welches Auswahllisten und Buttons für die unterschiedlichen Gestaltungsmöglichkeiten zur Verfügung stellt.
Die zu ändernde Datei wird dabei in einem IFrame dargestellt. Sämtliche Eingaben erfolgen direkt in diesem IFrame.
Gesteuert wird dieses über JavaScript-Funktionen. Möchte man das Dokument speichern, so wird es an PHP übergeben. Der Speichervorgang wird nun identisch wie bei der zuvor vorgestellten Lösung vollzogen (auf Einzelheiten werde ich an dieser Stelle verzichten).
» nach oben «
CMS mit einer Datenbank und PHP
Eine solche Lösung ist der mit einer Text-Datei sehr ähnlich. Sie unterscheidet sich lediglich darin, das anstelle einer externen CSS-Datei und einer Text-Datei sämtliche Daten wie Content und die Formatierung in einer Datenbank gespeichert werden.
Bestandteile eines solchen CMS:
- eine PHP-Datei mit einem Formular
- eine Datenbank
Vorteile:
- wenig Dateien
- sämtliche Site-Inhalte werden dynamisch erstellt
- leicht zu erweitern
Nachteile
- es müssen ausgiebige PHP-Funktionalitäten erstellt werden
- es wird ein Datenbanksystem benötigt
Das Funktionsprinzip:
Gesteuert wird ein solches CMS über ein Formular, was als Eingabemaske und Menü dient. Sämtliche Steuerelemente reagieren, wie bei der ersten vorgestellten Lösung, auf "onClick" oder "onBlur".
In Abhängigkeit von der ausgewählten Aktion (Fett, Kursiv, Unterstrichen, Schriftart, Schriftgröße) werden Schlüsselelemente (1 oder 0) oder Schlüsselwerte ("Arial", 12) in eine Datenbank aufgenommen. Damit mehrere Inhalte mit unterschiedlichen Formatierungen von einander unterschieden werden könne, wird jeweils eine eindeutige ID vergeben.
Diese kann man sich ähnlich der Klassenbezeichnungen oder ID-Bezeichnungen bei CSS vorstellen. Es empfiehlt sich hierbei auf numerische Bezeichner zurückzugreifen, die sich ggf. auch automatisch generieren lassen.
Auf eine ausführliche Beschreibung möchte ich an dieser Stelle verzichten. Es gibt dazu eine Menge Lösungen im Internet, teilweise auch kostenlos.
» nach oben «
» Sie könne dieses Tutorial als PDF-Datei laden «
|
