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.