PHP Breadcrumb erstellen « SteviesWebsite Webmaster Blog

PHP Breadcrumb erstellen

Code & Blog Logo

Um eine Breadcrumb-Navigation zu erstellen müssen wir erstmal wissen, welche Seite zu welcher Seite gehört. Dies geschieht in unserem Fall durch die Tabelle cms_pages, in welcher alle Seiten gespeichert werden. Sie bekommt nun eine Weitere Spalte, wo der Besitzer (owner) steht. Das heißt, hier muss nachher die ID der Übergeordneten Seite angegeben werden. Ist die Seite auf dem höchsten Level, also wenn sie keine Überseiten hat, bekommt sie hier eine -1.

Wir benötigen für das Hinzufügen der Spalte den folgenden Query:

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

Wenn wir nun schonmal in der Datenbank sind, können wir auch noch 2 weitere Testseiten hinzufügen, die beide einen Besitzer haben:

INSERT INTO `cms_pages` ( `id` , `alias` , `title` , `owner` )
VALUES (
'', 'testseite2', 'Testseite 2', '1'
), (
'', 'testseite3', 'Testseite 3', '2'
);

Diese Seiten sollten natürlich auch existieren. Also legen wir nochmal 2 Seiten mit Testinhalt an.

testseite2.htm (Verzeichnis content/articles):

<h1>Testseite 2</h1>

und testseite3.htm:

<h1>Testseite 3</h1>

Nun müssen wir in der Klasse page den Besitzer als Property hinzufügen. Dafür machen wir als erstes 2 neue Properties. Einmal $ownerid und einmal $owner. Es sind 2, da der owner vielleicht manchmal gar nicht benötigt wird und somit erstmal nur die id eingetragen wird. Hier erstmal die neuen 2 Properties:

var $ownerid = -1;
var $owner = false;

Um die id nun zu laden, müssen wir diese auch in der Funktion loadProperties auslesen. Die neue Funktion sieht nun so aus:

  function loadProperties($alias){
    global $dbpraefix;
    $res = mysql_query("SELECT id,title,owner 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->alias = $alias;
    }
  }

So, jetzt haben wir schonmal die ID. Nun brauchen wir noch eine Funktion, welche uns den Besitzer als Objekt zurückgibt. Damit das Objekt nicht immer wieder neu ausgelesen werden muss, wird es in die Property $owner geschrieben. Nur wenn diese auf false steht, wird der Owner ausgelesen. Hier ist der Code:

function getOwner(){
    global $dbpraefix;
    if(!$this->owner){
      $res = mysql_query("SELECT alias FROM ".$dbpraefix."pages 
                          WHERE id = '".$this->ownerid."'");
      if($row = mysql_fetch_row($res)){
        $this->owner = new Page();
        $this->owner->loadProperties($row[0]);
      }
    }
    return $this->owner;
  }

Jetzt haben wir schonmal den Owner. Also fehlt nur noch die wirkliche Breadcrump Funktion. Diese wird erstmal in dieser Klasse(page) als 2-Dimensionaales Array zurückgegeben und später in der Klasse sys ausgegeben. Das ganze ist eine rekursive Funktion, dass heißt, das sie sich selbst wiedrr aufruft. Denn wir brauchen auch alle übergeordneten Seiten und nicht bloß eine. Die Funktion getBreadcrump der Klasse page sieht so aus:

  function getBreadcrump(){
    if(!$this->owner) $this->getOwner();
    if($this->owner){
      $breadcrump = $this->owner->getBreadcrump();
    }
    $breadcrump[] = array($this->alias,$this->title);
    return $breadcrump;
  }

Als nächstes gibt es eine Funktion (in der Klasses sys) die die Breadcrump Navigation ausgibt. Sie hatfolgende Parameter:

$separator: Gibt den Code an, der zwischen den Einträge ausgegeben werden soll (z.B. das ” -> “.
$class: Gibt die Klasse für die Breadcrump Navigation an. So kann diese später per CSS gestaltet werden.
$idpraefix: Gibt den ersten Teil der id der Elemente wieder. Der zweite Teil ist eine laufende Nummer. Dadurch kann per CSS oder JavaScript jedes Element der Breadcrump eigens angesprochen werden.

In der Funktion holen wir uns erstmal die Breadcrump als Array aus der aktuellen Seite. Danach gehen wir mit einer While schleife und einen Zähler alle Einträge durch. Hier nehmen wir keine foreach Schleife, da wir den Zähler und die Anzahl der Elemente benötigen, damit der letzte Separator nicht gesetzt wird. Die komplette Funktion ist diese:

function displayBreadcrump($separator,$class,$idpraefix){
    global $currentpage;
    $i = 1;
    $breadcrump = $currentpage->getBreadcrump();
    while($i <= count($breadcrump)){
      echo "<a href=\"".$breadcrump[$i-1][0].".htm\" class=\"".$class."\" 
            id=\"".$idpraefix.$i."\">".$breadcrump[$i-1][1]."</a>";
      if($i < count($breadcrump)){
        echo $separator;
      }
      $i++;
    }
  }

Jetzt muss diese Funktion nur noch aufgerufen werden. Dies geschieht natürlich in der index.php unseres Skins. Ihr neuer Quellcode sieht so aus:

<!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();
    ?>
  </body>
</html>

Zum Testen ruft nun bitte die Seite testseite3.htm auf. Hier sollte nun eine Breadcrump navigation erscheinen. Klickt doch mal ein bisschen rum, um zu sehen, ob auch alles Klappt.

Hier ist die Testseite 3 bei mir (sieht hat sich jedoch ggfl. schon wieder geändert):

http://cms.stevieswebsite.de/testseite3.htm