SteviesWebsite

SteviesWebsite > CMS Tutorial > Bildserver (CMS)

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",
...

RSS Feed für Kommentare zu diesem Artikel. TrackBack URL

14 Kommentare »

  1. 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

    Kommentar von Daniel — 12. November 2009 @ 08:09

  2. 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']);

    Kommentar von Stefan Wienströer — 12. November 2009 @ 14:50

  3. Geht trotzdem.

    Kommentar von Daniel — 12. November 2009 @ 15:00

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

    Kommentar von Daniel — 12. November 2009 @ 15:29

  5. 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)

    Kommentar von Stefan Wienströer — 12. November 2009 @ 15:34

  6. var tinyMCEImageList = new Array(

    ["", ""]
    <?PHP
    if($i
    );

    Kommentar von Daniel — 12. November 2009 @ 15:42

  7. Mist. Wie kann ich den am besten hier eingeben.

    Kommentar von Daniel — 12. November 2009 @ 15:44

  8. Poste ihn ins Forum^^

    Kommentar von Stefan Wienströer — 12. November 2009 @ 16:09

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

    Kommentar von Daniel — 12. November 2009 @ 16:14

  10. 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! :-) )

    Kommentar von Renner — 12. November 2009 @ 16:23

  11. Das sollten wir mal beachten.

    http://derinternetcoach.wordpress.com/2009/11/08/blode-fehler-mit-folgen/

    Kommentar von Daniel — 13. November 2009 @ 09:22

  12. 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.

    Kommentar von Stefan Wienströer — 14. November 2009 @ 10:18

  13. 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

    Kommentar von Jörg Oberleuck — 30. Dezember 2009 @ 17:37

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

    Kommentar von Stefan Wienströer — 30. Dezember 2009 @ 19:28

Hinterlasse einen Kommentar

Trackbacks/Pingbacks

ContentLion (Eigenes CMS)

Eigenes CMS erstellen

Code & Blog LogoErstelle dein eigenes CMS mit PHP. Dieses Tutorial wird dir zeigen wie das geht. Also lies dir es durch und frische deine PHP Kenntnisse auf. [mehr...]

Webanalyse – So wirds gemacht!

WebanalyseFür die Verbesserung Deiner Seite solltest Du wissen, wie sich die Besucher verhalten. Diese Artikel zeigen Dir wie man das am geschicktesten macht. [mehr...]

MySQL Optimierung in 4 Schritten

Facebook LogoOptimiere deine MySQL-Datenbank ohne Änderungen am Server. Du bekommst schnellere Abfragen und sparst Speicher.[mehr...]

Webservice mit PHP erstellen

Webservice erstellenWebservices sind oft die Schnittstelle zwischen Server und Client. Wie man mit PHP einen WebService erstellt, lernt ihr in diesem Tutoial. [mehr...]

Diskussionen

Diskussion starten

Blog Kategorien

Blog Archiv

Links & Buttons

  • RSS
  • Blogverzeichnis - Blog Verzeichnis bloggerei.de
Bildserver (CMS) © SteviesWebsite.de - Kontakt | Impressum