0251 / 590 837 15
info@a-coding-project.de
;

Bildserver (CMS)

Code & Blog Logo

Code & Blog Logo

In unserem CMS kann man nach diesem Beitrag Bilder einbinden! Und so geht’s: Beim Datei-Upload werden Bilder erkannt, der Name wird eingegeben und das Bild wird in die Datenbank eingetragen. Beim editieren der Seiten werden über die Imagelist des TinyMCE die Bilder geladen.

Fangen wir an mit der Datenbank. Hier benötigen wird erstmal 3 Spalten. Den Path, den Namen und die Beschreibung:

CREATE TABLE `cms_images` (
`path` VARCHAR( 255 ) NOT NULL ,
`name` VARCHAR( 75 ) NOT NULL ,
`description` VARCHAR( 255 ) NOT NULL ,
PRIMARY KEY ( `path` )
) TYPE = MYISAM ;

Die Bilder werden natürlich schön in einer eigenen Klasse verwaltet. Diese heißt ImageServer und liegt auf /system/classes/imageserver.php.

Die Klasse soll bei der Funktion insert ein Bild einfügen und bei getImages erstmal alle Bilder als Array zurückgeben.

<?PHP
  class ImageServer{
    function insert($path,$name,$description){
      global $dbpraefix;
      $path        = mysql_real_escape_string($path);
      $name        = mysql_real_escape_string($name);
      $description = mysql_real_escape_string($description);
      return mysql_query("INSERT INTO ".$dbpraefix."images (path,name,description) 
                          VALUES ('".$path."','".$name."','".$description."')");
    }
    
    function getImages(){
      global $dbpraefix;
      $select = mysql_query("SELECT * FROM ".$dbpraefix."images");
      while($row = mysql_fetch_assoc($select)){
        $res[] = $row;
      }
      return $res;
    }
  }
?>

Kommen wir zu der Datei /admin/includes/addimage.php. In dieser wird bereits beim Datei-Upload verwiesen. Sie ruft die insert-Methode auf:

<h1>Bild hinzuf&uuml;gen</h1>
<?PHP
  if(ImageServer::insert($_POST['path'],$_POST['name'],$_POST['description'])){
    echo "<p>Das Bild wurde zur Mediathek hinzugef&uuml;gt</p>";
  }
  else{
    echo "<p>Fehler: Das Bild konnte nicht hinzugef&uuml;gt werden!</p>";
  }
?>

Nun ist das Bild schon mal in der Datenbank vorhanden. Müssen wir es nur noch in die Artikel einfügen. Der TinyMCE Editor bietet die Möglichkeit eine Liste der Bilder einzubinden. So müssen wir keine Galerie selbst bauen. Die Liste wird bei uns in dieser Datei erstellt: /content/ imagelist.php:

var tinyMCEImageList = new Array(
    <?PHP
      include('../system/classes/imageserver.php');
      include('../system/dbconnect.php');
      $images = ImageServer::getImages();
      if($images){
        $i = 1;
          foreach($images as $image){
          ?>
          ["<?PHP echo $image['name']; ?>", "<?PHP echo $image['path']; ?>"]
          <?PHP
          if($i < count($images)){
            echo ",";
          }
        }
      }
    ?>
);

Das ganze wird nun noch im TinyMCE geladen. Dabei ist mir an der Seite noch ein Bug aufgefallen: Der TinyMCE stellt vor Anführungszeichen ein Backslash. So sieht die neue /admin/includes/site-edit.php:

<?PHP
  $page = new Page();
  $page->loadProperties(mysql_real_escape_string($_GET['site']));
  $_POST['content'] = stripslashes($_POST['content']);
  if($_POST['save']){
    $page->deleteContent("../");
    $page->save();
    $page->writeContent("../",$_POST['content']);
    $content = $_POST['content'];
  }
  else if(isset($_POST['menu'])){
    $page->title = $_POST['title'];
    $page->alias = $_POST['alias'];
    $page->menu = $_POST['menu'];
    $content = $_POST['content'];
  }
  else{
    $content = $page->readContent("../");
  }
?>
...
    external_image_list_url : "/content/imagelist.php",
...

Kommentare

Daniel schrieb am 12.11.2009:

Warum arbeitet der tiny mce nach dem implementieren der Bilderliste jetzt ohne Murren. Komisch, komisch. Aber ich muss Dir mal Lob und Anerkennung aussprechen für die Leistung und für die Arbeit die Du bis jetzt in dieses Projekt gesteckt hast. Du hast meinen vollsten Respekt. Bis jetzt ist es noch keinem Tutorial gelungen mich länger zu fesseln. Doch Du schreibst nicht so, sagen wir mal, von oben herab wie manche Verfasser von Tutorials wenn man eine Syntaxfehler oder ähnliches moniert. Werde weiter "dabei" bleiben. MfG Daniel

Stefan Wienströer schrieb am 12.11.2009:

gib mir Mühe^^ Zum Fehler: Ich denke der andere Fehler wird auch mit Backslashes zu tun gehabt haben. Kannst ja mal einfach diese Zeile weglassen und testen, ob es noch funktioniert: $_POST['content'] = stripslashes($_POST['content']);

Daniel schrieb am 12.11.2009:

Geht trotzdem.

Daniel schrieb am 12.11.2009:

Die Bilderliste funktioniert nur mit einer Datei. Sobald ich noch ein Bild uploade sehe ich die Liste nicht mehr im tiny mce.

Stefan Wienströer schrieb am 12.11.2009:

Ich denke es liegt daran, dass das Komma nicht richtig gesetzt wird. Kannste mal den Quellcode der Imagelist posten (also nicht den PHP-Quellcode, sondern das was am Browser ankommt)

Daniel schrieb am 12.11.2009:

var tinyMCEImageList = new Array( ["", ""] &lt;?PHP if($i );

Daniel schrieb am 12.11.2009:

Mist. Wie kann ich den am besten hier eingeben.

Stefan Wienströer schrieb am 12.11.2009:

Poste ihn ins Forum^^

Daniel schrieb am 12.11.2009:

Also es kommt genau das an was in der imagelist.php steht auch im geparsten Quelltext raus.

Renner schrieb am 12.11.2009:

jo ich war auch ganz begeistert als ich das tutorial gefunden habe. und wie du sagst daniel .. andere ersteller prahlen direkt mit ihrem fachwissen und fragen dich auf gut deutsch wie man so dumm sein kann wenn man nen fehler gemacht hat. das bei stevie anders! ;) Respekt - weiter so! :-))

Daniel schrieb am 13.11.2009:

Das sollten wir mal beachten. http://derinternetcoach.wordpress.com/2009/11/08/blode-fehler-mit-folgen/

Stefan Wienströer schrieb am 14.11.2009:

Wenn man das bei uns macht, was die in den Video macht, bekommt man ne 403-Seite ;-) Das hab ich schon irgendwann mal eingbaut^^ Werd aber alle Seiten nochmal durchchecken.

Jörg Oberleuck schrieb am 30.12.2009:

Hallo, erst mal herzlichen Glückwunsch zu der guten Idee und der sauberen Arbeit. Ich bin vor ein paar Tagen durch Zufall auf deinen Blog gestoßen und baue das CMS mit auf. Einige Fehler die bei mir dann aufgetreten sind habe ich bis jetzt alleine bewältigen können. Nun aber ein Problem bei dem ich wohl oder überl Hilfe brauche. Der Bildserver funktioniert bei mir nicht. Ich glaube es liegt daran, dass bei tiny mce was fehlt. Die Icons für den fileserver und den imageserver erscheinen bei mir nicht. kannst Du mir vielleicht einen Tip geben?? Wenn ich dann auf dem Stand bin würde ich auch gerne mitarbeiten. Gruß Jörg

Stefan Wienströer schrieb am 30.12.2009:

Dabei handelt es sich um einen Bug, der wurde hier behoben: http://blog.stevieswebsite.de/2009/12/bugfix-upload/

m1staX schrieb am 06.10.2011:

Hi@all, ich habe ein Problem mit tinyMCE und dem Anzeigen von Bildern. Die Bilder sind mit ihrem absolutern Pfad in der Datenbank gespeichert - bei mir z.B. /cms/content/uploads/test.jpg Dieser Pfad wird in der tinyMCE Bilderliste auch korrekt angezeigt. Wenn ich jedoch ein Bilder in die Seite einfüge, wandelt tinyMCE den absoluten Pfad in eine relative Pfadangabe um: src=../content/uploads/test.jpg (ausgehend vom Verzeichnis in dem tinyMCE arbeitet) Wenn ich die Seite dann über ihre URL aufrufe, wird das Bild (logischerweise) nicht gefunden. Kann mir da jemand weiterhelfen? Ich verwende das tinyMCE-Paket von hier: http://blog.stevieswebsite.de/download/WYSIWYG.zip m1staX

m1staX schrieb am 07.10.2011:

Strike! Ich hab's gefunden: http://www.tinymce.com/wiki.php/TinyMCE_FAQ#Paths.2FURLs_are_incorrect.2C_I_want_absolute.2Frelative_URLs.3F Beim .init({ von tinyMCE folgende Optionen setzen: ... relativ_urls : false, remove_script_host : true, document_base_url : "http://deine-domain.de/", ... m1staX

Lucas schrieb am 07.10.2011:

Hallo und Guten Tag, Ich bin auch gut weiter gekommen. Da ich als PHP-Anfänger mithalten möchte, kann ich doch den armen Steffan nicht mit Mails zuschütten ;-) Abgesehen davon, mein Problem ist folgendes: Ich habe alles so gemacht wie beschrieben, aber wenn ich auf Bild-einfügen im TinyMCE klicke, kommt nur in diesem Kasten der kommt meine Startseite. Kann mir da jemand helfen? Viele Grüße Lucas

Stefan Wienströer schrieb am 07.10.2011:

was bekommst du denn ausgegeben, wenn du /content/ imagelist.php aufrufst?

Lucas schrieb am 07.10.2011:

Also da wäre in Zeile 18 ein Error mit einer geschweiften Klammer. Ich kann leider jetzt nicht gucken was da steht.