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

Admin-Bereich: Neues Menü + Dashboard (CMS)

Code & Blog Logo

Code & Blog Logo

Der Admin-Bereich unseres CMS soll heute ein bisschen optimiert werden. Zum einen werden wir das Admin-Menü in die Datenbank verschieben und zum anderen fangen wir heute mit dem Dashboard an.

Fangen wir mal mit dem Admin-Menü an. Hier legen wir das Menü in der Menü-Tabelle an. Ich habe dies über den Admin-Bereich gemacht, so dasss ich hier kein SQL-Statement poste. Also: Das Menü heißt {admin} und die Einträge der Links könnt ihr aus der /admin/includes/menue.php übernehmen.

Da wir das Admin-Menü über den Namen ansprechen brauchen wir in unserer CMS-Klasse noch eine Funktionen zum herausbekommen der Id über den Namen. Also die Datei /system/classes/menu.php rausgesucht und folgende Funktion hinzugefügt:

  function getIdByName($name){
    global $dbpraefix;
    $res = false;
    $name = mysql_real_escape_string(strtolower(trim($name)));
    $mySqlRes = mysql_query("SELECT id FROM ".$dbpraefix."menu_names WHERE lower(trim(name)) = '".$name."' LIMIT 0,1");
    if($row = mysql_fetch_row($mySqlRes)){
      $res = $row[0];
    }
    return $res;
  }

Das ganze muss natürlich auch im Admin-Bereich angezeigt werden. Dafür müssen wir die Datei /admin/index.php bearbeiten. Hier wird der Include-Bereich so abgeändert:

if(isset($_SESSION['username'])){
   Menu::display(Menu::getIdByName("{admin}"),
                 "<ul id="adminmenue">",
                 "</ul>",
                 " <li>",
                 "</li>",
                 "adminmenue");

Nun brauchen wir die /admin/includes/menue.php nicht mehr – Also wird sie gelöscht.

Kommen wir nun zum Dashboard. Da das schön mit AJAX sein soll, können wir nicht alles selbst entwickeln. Dafür habe ich hier ein schönes Tutorial mit Sourcecode gefunden. Das habe ich noch ein bisschen abgeändert, so dass es auch auf deutsch ist und in unser CMS passt.

Fangen wir mal damit an, dass wir eine Datei namens dashboard.php erstellen. Sie liegt im Ordner /admin/includes/dashboard.php. Darin kommt erstmal nur der Beispieltext von deren Tutorial, aus technischen gründen wieder ohne Syntax-Highlighting:

<div id="columns">

        <ul id="column1" class="column">
            <li class="widget color-green">
                <div class="widget-head">
                    <h3>Introduction Widget</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
            <li class="widget color-red">
                <div class="widget-head">
                    <h3>Widget title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
        </ul>

        <ul id="column2" class="column">
            <li class="widget color-blue">
                <div class="widget-head">
                    <h3>Widget title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
            <li class="widget color-yellow">
                <div class="widget-head">
                    <h3>Widget title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
        </ul>

        <ul id="column3" class="column">
            <li class="widget color-orange">
                <div class="widget-head">
                    <h3>Widget title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
            <li class="widget color-white">
                <div class="widget-head">
                    <h3>Widget title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>

        </ul>

    </div>

    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="jquery-ui-personalized-1.6rc2.min.js"></script>
    <script type="text/javascript" src="inettuts.js"></script>

Nun müssen wir noch einen Stylesheet in die /admin/index.php einbinden und die dashboard-Datei als default importieren. Wir werden später alle Stylesheets im Adminbereich zusammenführen, aber jetzt noch nicht. So sieht die neue komplette /admin/index.php aus:

<?PHP
  session_start();
  function __autoload($class_name){
      require_once "../system/classes/".strtolower($class_name).".php";
  }
  include("../system/dbconnect.php");
  include("../system/settings.php");
  include("../system/filterfilename.php");
  include("../system/sys.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml/" xml:lang="de">
  <head>
    <title>Admin-Bereich</title>
    <link href="/admin/inettuts.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      body{
        margin:0;
        padding:0;
        font-family:Tahoma, sans-serif;;
      }
      label{
        display:block;
      }
      #adminmenue{
        list-style-type : none;
        margin:0;
        margin-bottom:40px;
        padding:0;
        background-color:#333;
        width:100%;
        height:20px;
      }
      #adminmenue a{
        color:#fff;
      }
      #adminmenue li{
        display:inline;
      }
      thead{
        background-color:#ddd;
        color:#333;
      }
      fieldset{
        width:50%;
      }
      fieldset input{
        width:95%;
      }
      .dbtable{
        font-size:14px;
      }
      .dbtable thead{
        background-color:#333;
        color:#fff;
      }
      .dbtable tbody tr:hover{
        background-color:#ddd;
      }
      img{
        border:0;
      }
    </style>
  </head>
  <body>
      <?PHP
        $user = new User();
        if($_POST['user']){
          if($user->login($_POST['user'],$_POST['password'])){
            $_SESSION['username'] = $_POST['user'];
          }
          else{
            echo "<p>Login Fehlgeschlagen!</p>";
          }
        }
    if(isset($_SESSION['username'])){
       Menu::display(Menu::getIdByName("{admin}"),
                     "<ul id="adminmenue">",
                        "</ul>",
                     " <li>",
                     "</li>",
                     "adminmenue");
      if(!$_GET['page']){
        $_GET['page'] = 'dashboard';
      }
      include(filterfilename("includes/".$_GET['page']));
    }
    else{
          include('includes/login.php');
    }
      ?>
  </body>
</html>

Nun brauchen wir noch eine Reihe von Buttons. Diese werden unter /admin/img/buttons.gif zu speichern. Nehmt einfach meine:

http://cms.stevieswebsite.de/admin/img/buttons.gif

Fehlen noch die JS und CSS-Dateien. Sie liegen im Hauptverzeichnis des Admin-Bereichs. Hierbei werd ich nicht so viel erklären, weil es einfach zu lang für einen Artikel ist. Die Dateien gibt es hier:

http://cms.stevieswebsite.de/admin/inettuts.css

http://cms.stevieswebsite.de/admin/inettuts.js

http://cms.stevieswebsite.de/admin/inettuts.js.css

http://cms.stevieswebsite.de/admin/jquery-ui-personalized-1.6rc2.min.js

Demnächst werden wir noch die Widgets automatisch ins Dashboard laden. Aber für heute ist erstmal hier das Ende.

Kommentare

Stefan Wienströer schrieb am 15.11.2009:

Das CSS muss noch bearbeitet werden - Schaut euch nun mal die Dateiauflistung an^^

Daniel schrieb am 15.11.2009:

Wo schreibe ich die Links hin in der Tabelle gabe ich nur die Felder id und name?

Stefan Wienströer schrieb am 15.11.2009:

Kannste direkt im Admin-Bereich unter Menüs ein neues Menü namens {admin} anlegen und eiträge einfügen. Man kann es in der DB auch in cms_menus und cms_menu_entries oder so Ähnlich machen.

Daniel schrieb am 15.11.2009:

Ich stehe auf dem schlauch. Zur Zeit habe ich kein Adminmenü mehr, da jetzt ja das dashboard geöffnet wird. Laut Quelltext liest er ja die cms_menu_names aus. Soll ich in der tabelle cms_menu für jeden Link als menuID die id 2 vergeben da ich ja unter cms_Menu_names dem Menu admin die 2 gegeben habe.

Stefan Wienströer schrieb am 15.11.2009:

Ja

Renner schrieb am 16.11.2009:

Yeah ein neuer Artikel ich freu mich!! :-) Heute abend direkt weiterbasteln *freu

Renner schrieb am 16.11.2009:

irgendwie is an mir was vorbei .. wo sind meine menü punkte hin? ^^

Daniel schrieb am 16.11.2009:

So ging es mir gestern auch. Gehe in den phpmyadmin. Füge in der Tabelle cms_menu_names einen weiteren Eintrag mit der ID 2 und als name {admin}(mit geschweiften Klammern) ein. Dann füge in der Tabelle cms_menu soviele neue Eintrage hinzu wie in der Datei menue.php Menüpunkte vorhanden sind aber als menuID eine 2 damit das System weiß welcher Link im CMS im adminbereich erscheinen soll.

Renner schrieb am 16.11.2009:

ok werds gleich mal testen! danke schonmal !!

Burak schrieb am 01.12.2009:

hmm ... wie trag ich die links ein ??? der zeigt mir ein fehler an wen ich die in der cms_menue eintrage in der phpmyadmin seite bsp: id 5, menueID 5, title Menues, href index.php?page=sites was ist falsch ????

Stefan Wienströer schrieb am 01.12.2009:

Die Tabelle heißt cms_menu^^ Hab mal meine Inserts extraiert (hätte ich eigl. schon viel ehr machen sollen): INSERT INTO `cms_menu` VALUES (1, 4, 'Dashboard', '/admin/'); INSERT INTO `cms_menu` VALUES (2, 4, 'Seiten', '/admin/index.php?page=sites'); INSERT INTO `cms_menu` VALUES (3, 4, 'Menüs', '/admin/index.php?page=menues'); INSERT INTO `cms_menu` VALUES (4, 4, 'Dateien', '/admin/index.php?page=files'); INSERT INTO `cms_menu` VALUES (5, 4, 'Plugins', '/admin/index.php?page=plugins'); INSERT INTO `cms_menu` VALUES (6, 4, 'DB', '/admin/index.php?page=db'); INSERT INTO `cms_menu` VALUES (7, 4, 'Einstellungen', '/admin/index.php?page=settings'); INSERT INTO `cms_menu` VALUES (8, 4, 'Statistik', '/admin/index.php?page=stats'); INSERT INTO `cms_menu` VALUES (9, 4, 'Logout', '/admin/index.php?page=logout');