Lokale und Globale Navigation im CMS

Code & Blog Logo

Die Navigation einer Website sollte in 2 Teile aufgeteilt sein: In eine lokale und eine globale Navigation. Dies hat den Vorteil, dass nicht so viele (uninteressante) Links auf einer Seite zu sehen sind. Die globale Navigation wird überall auf der Website angezeigt. Die lokale Navigation hingegen, gibt Links für Unterkategorien wieder.

Dieses Prinzip wird auch im SteviesWebsite Netzwerk angewendet (mit Ausnahme vom LiveEditor und LinkTauschScript). Schau dir mal diese Seite genau an. Oben siehst du die globale Navigation, welche in diesen Fall sogar über mehrere Domains geht. Rechts davon ist dann die lokale Navigation für diesen Blog.

Das ganze soll natürlich so auch in unser CMS eingebaut werden. Dafür muss erstmal festgelegt werden, welche lokale Navigation auf welcher Seite angezeigt werden soll. Dafür erweitern wir die Tabelle cms_pages. Sie bekomtm nun die Spalte menu:

ALTER TABLE `cms_pages` ADD `menu` INT DEFAULT '-1' NOT NULL;

Als Standardwert wird -1 genommen. Dies bedeutet, dass es keine lokale Navigation zu der Seite gibt.

Die neue Eigenschaft muss, damit wir auf sie zugreifen können, nun auch in der Klasse page (system/classes) hinzugefügt werden. Aus Platzgründen kann hier nicht der komplette Code angezeigt werden. Falls du den alten Code nicht hast, lies dir einfach mal die letzten Artikel durch.

  var $id = -1;
  var $alias = '';
  var $title = '';
  var $ownerid = -1;
  var $owner = false;
  var $menu = -1;
  
  function loadProperties($alias){
    global $dbpraefix;
    $res = mysql_query("SELECT id,title,owner,menu FROM ".$dbpraefix."pages 
                        WHERE alias = '".$alias."'");
    if($row = mysql_fetch_row($res)){
      $this->id = $row[0];
      $this->title = $row[1];
      $this->ownerid = $row[2];
      $this->menu = $row[3];
      $this->alias = $alias;
    }
  }

Um das ganze später Testen zu können müssen wir bei einer der Testseiten noch eine lokale Navigation hinzufügen. Ich hab dort mal die zuletzt erstellte Navigation (id 1) eingebunden:

UPDATE `cms_pages` SET `menu` = '1' WHERE `id` =1

Jetzt zur globalen Navigation: Diese wird in der Tabelle cms_settings unter den Eigenschaftsnamen globalmenuid eingebunden. Sie bekommt zu Testzwecken erstmal auch die id 1 (welches aber eigentlich sinnfrei ist):

INSERT INTO `cms_settings` ( `property` , `value` )
VALUES (
'globalmenuid', '1'
);

Die Klasse sys muss jetzt noch den Aufruf der globalen und lokalen Navigation ermöglichen. Dafür bekommt sie die Methoden displayLocalMenu und displayGlobalMenu. Die Parameter sind fast genauso wie bei der Methode displayMenu, welcher wir gestern erstellt haben. Lediglich die id muss hier nicht mehr übergeben werden.

Und das ist der Code:

  function displayGlobalMenu($globalstart,$globalend, $elementstart,$elementend,
                       $class){
    global $dbpraefix;
    $res = mysql_query("SELECT value FROM ".$dbpraefix."settings 
                        WHERE property = 'globalmenuid'");
    if($row = mysql_fetch_row($res)){
      Menu::display($row[0], $globalstart,$globalend, $elementstart,$elementend,
                    $class);
    }
  }

  function displayLocalMenu($globalstart,$globalend, $elementstart,$elementend,
                            $class){
    global $currentpage;
    if($currentpage->menu > -1){
      Menu::display($currentpage->menu, $globalstart,$globalend, $elementstart,
                    $elementend,$class);
    }
  }

Das wars dann auch schon fast. Jetzt müssen die neuen Funktionen nur noch im Skin (Datei system/skins/default/index.php) eingebaut werden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml/" xml:lang="de">
  <head>
    <?PHP
      sys::includeHeader();
    ?>
  </head>
  <body>
    <?PHP
      sys::displayBreadcrump(" -&gt; ","breadcrump","bc");
      sys::includeContent();
      sys::displayGlobalMenu("<ul>","</ul>","<li>","</li>","globalmenu");
      sys::displayLocalMenu("<ul>","</ul>","<li>","</li>","localmenu");
    ?>
  </body>
</html>

Wenn nun alles richtig gelaufen ist sollte auf der Testseite, wo ihr das lokale Menü eingetragen habt, 2 Mal das gleiche Menü angezeigt werden. Das sieht bei mir so aus(die Seite kann sich in der Zwischenzeit schon wieder verändert haben):
http://cms.stevieswebsite.de/testseite.htm

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Kommentare

andrej schrieb am 02.02.2012:

hallo, ich erkenne nicht so richtig den unterschied zum vorherigen kapitel. dort hatte ich auch ein horizontales und ein vertikales menü. hab ich da nen fehler gemacht? LG

Stefan Wienströer schrieb am 02.02.2012:

Auf der letzten Seite wurden allgemeine(irgendwelche) Menüs angezeigt. Das globale und lokale Menü sind Sonderfälle. Diese kann mamn später im Backend belegen. Das globale Menü wird für alle Seiten gleich sein und das lokale kann pro Seite eingestellt werden.

andrej schrieb am 02.02.2012:

wow! superschnelle antwort. Das heißt aber nochmal, dass man im Frontend in der Ausgabe der Menüs momentan noch keinen Unterschied zum vorherigen Teil sieht? richtig? ich finds auch toll, dass einiges nicht eindeutig aus deinen ausführungen hervorgeht. dann muss man selbst ein bissl nachdenken. :-) allerdings kann man die ergebnisse nicht mit den deinigen vergleichen, da die links ins nirvana führen..aber cooles tut! ich bleib dran..

Stefan Wienströer schrieb am 02.02.2012:

Noch nicht, aber bald ;-) Ahh das Teil ist gar nicht mehr online^^ Muss ich mal wieder machen.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Lokale und Globale Navigation im CMS

Kommentare

andrej schrieb am 02.02.2012:

Stefan Wienströer schrieb am 02.02.2012:

andrej schrieb am 02.02.2012:

Stefan Wienströer schrieb am 02.02.2012:

Über uns

Cookie-Einstellungen