URL dieses Artikels:

zu Ausgabe: 04.2003
Klappe auf
Dynamische Navigation für die PHP-Engine
von Mathias Uebel
Die in Heft 09.02 vorgestellte PHP-Engine von Philipp von der Born für professionelle Websites hat offensichtlich viele Freunde gefunden. Es fallen immer mehr Seiten im Internet auf, die wieder die Tabelle als gestalterisches Mittel in Anspruch nehmen. Zum Beispiel sind viele CM-Systeme in dieser Form aufgebaut. Dieser Artikel beschreibt eine dynamische PHP-Navigationsleiste für die Engine. So kann die PHP-Engine Java- und Frame-los bleiben!

Die Vorteile der PHP-Engine
Zur Erinnerung die Argumente für eine in PHP programmierte Site:
  • Die Site bleibt ohne Frames. Das heißt, die Aufteilung der Site in Kopf-, Fuß- und Seitenteile wird durch eine Tabelle bestimmt und sieht dann wie ein Frame-Set aus. Somit ist die Site auch für Browser darstellbar, die eine Aufteilung der HTML-Seite in Frames nicht unterstützen. Diese Browser sind zwar fast ausgestorben, aber man findet sie vereinzelt noch. Zum Beispiel verwenden einige Devices wie Handies und PDAs die abgespeckten Browserversionen ihrer großen Brüder. Und die Engine will auch die Minimalisten unter den Surfern erreichen!
  • Die Engine ist ihrem Namen nach dynamisch. Also auch sehr gut erweiterbar. Aber Achtung: Auch hier gelten Stilregeln. Jeder Webmaster sollte sich in seiner Themenvielfalt begrenzen. Nicht jede voll gestopfte Homepage ist alleine durch diese Vielfalt schön und interessant.
  • Mit etwas Übung ist diese Engine gut administrierbar. Durch die weitestgehende Trennung von Inhalt und Formatierung wird ein einheitliches Design eingehalten. Auf externe Cascading Style Sheets kann ganz verzichtet werden, da die Engine quasi aus einer Seite (Index.php) besteht und ihre wechselnden Inhalte durch die Programmierung bezieht. Somit reicht die Definition zur Formatierung im Header der Index-Seite aus.

Dynamische Navigationsleiste ohne JavaScript?
Erstrebenswert wäre nun die Site auch JavaScript-frei zu halten. Nicht dass der Verfasser eine Abneigung gegen JavaScript hat oder gar dieser Sprache nicht mächtig ist. Vielmehr die Tatsache, dass es einige Surfer gibt, die ohne JavaScript im Netz unterwegs sind und die Erfahrung, dass die JavaScript-Unterstützung auch Böses anrichten kann, rechtfertigt diesen Wunsch.
Eine ansprechende Navigationsleiste wird herkömmlich mit Hilfe von JavaScript-Schnipseln realisiert. Aber auch PHP eignet sich. Sie wird nicht so ausgefallen sein, wie manche JavaScript-Kreation. Aber sie klappt auf und zeigt die Untermenüs.
Das hier vorgestellte Skript besteht aus zwei Teilen. Im ersten Teil (menue_array.php) wird ein Array definiert, das die Daten für die Navigation aufnimmt. Der zweite Teil (dyn_menue.php) liest die Daten je nach Anforderung aus und weist der Navigationsleiste die Formatierung zu.


Abb. 1: Die Navigationsleiste in Aktion

Etwas zur Sicherheit
Die PHP-Engine bietet bösen Buben (es soll auch böse Mädchen geben!) eine Möglichkeit, eine andere als die gewollte Seite zu öffnen. Folgendes Szenario wäre denkbar: In der URL wird der Wert der übergebenen Parameter so geändert, dass die Funktion Include in der Index-Seite eine fremde Seite einbindet. Diese Seite kann schädigenden Code enthalten.
Um das zu verhindern, wird das zweidimensionale Array genutzt. Denn nur die Seiten, die hier als Parameter festgelegt sind, sollten auch geöffnet werden können. Erscheint ein abweichender Wert, wird eine Fehlerseite angezeigt. Da eine Manipulation vermutet werden darf, erlaubt sich der Webmaster, darauf hinzuweisen: Error durch Manipulation? ;-).
Natürlich müssen auch Seiten die nicht in dem Array erwähnt sind ansprechbar sein. Das betrifft Seiten, die nach einer Auswertung durch Formulare oder Scripte angezeigt werden (z.B. Warenkorb, Suchergebnisse). Sie werden nicht explizit von der Navigation aufgerufen und sind deshalb als Ausnahme für die Fehlerroutine festzulegen.

Zum Skript
Zum ersten Teil (vergl. Listing 1): Der Datenspeicher ist ein zweidimensionales Array. Die einzelnen inneren Arrays bestehen aus drei Elementen. Das erste Element ist die Kategorie (bzw. der Link) als String. Das zweite Element definiert eine Gruppierung: Alle gleichen Zahlen ergeben eine Gruppe gleicher Kategorien. Das dritte Element definiert die Hauptkategorie innerhalb der Gruppe. Die Hauptkategorie mit dem Wert 0 ist immer sichtbar und die Unterkategorie mit dem Wert 1 klappt nach unten auf. Die einzelnen Arrays werden zur besseren Weitergabe in ein äußeres Array verpackt (zweidimensional!).

Listing 1

<?php     # menue_array.php
$menue_array = array(
array("Home", 1, 0), # HauptKategorie
array("Information", 1, 1), # UnterKategorie
array("Kontakt", 1, 1), # UnterKategorie

array("Shop", 2, 0), # HauptKategorie
array("Hardware", 2, 1), # UnterKategorie
array("Software", 2, 1), # UnterKategorie
);
?>

Im zweiten Teil (vergl. Listing 2) wird das Array ausgelesen und das Ergebnis entsprechend formatiert und angezeigt.

Listing 2

<?php    # dyn_menue.php
print <table>;
for ($a=0;$a < count($menue_array);$a++){
$menue_w = $menue_array[$a][0]; # menue als wort
$menue_z = $menue_array[$a][1]; # menue als zahl
$menue_k = $menue_array[$a][2]; # menue als kategorie
if($menue_k==0 AND $nav1==$menue_w){
# hauptmenues, aktiv
print "<tr>
<td colspan='2' bgcolor='#FEF4ED'>".$menue_w."</td>
</tr>";
$hauptmenuezahl = $menue_z;
# erste zahl des menues ermitteln
}
if (($hauptmenuezahl==$menue_z) AND ($menue_k == 1)){
# untermenues, gleiche zahlen = gleiche kategorien
if($nav2 == ""){
$nav2 = $menue_w;
# zum start erstes untermenue anzeigen
}
if($menue_w == $nav2){
# wenn untermenue aktiv, dann ein kleines dreieck davor
print "<tr><td width='10%' bgcolor='#FEF4ED'>
<img src='dreieck.jpg'></td>";
print "<td width='90%' bgcolor='#DDDDDD'>".$menue_w."</td>
</tr>";
}else{
print "<tr><td width='10%' bgcolor='#FEF4ED'></td>";
print "<td width='90%' bgcolor='#FEF4ED'>
<a href='index.php4?nav1=".$nav1."&nav2=".$menue_w."'>
".$menue_w."</a></tr></td>";
}
}
if($menue_k==0 AND $nav1!=$menue_w){
# hauptmenues, nicht aktiv
print "<tr><td colspan='2' bgcolor='#FEF4ED'>
<a href = 'index.php4?nav1=".$menue_w."'>".$menue_w."</a>
</td></tr>";
}
}
print </table>;
?>

Im Einzelnen: Mit der For-Schleife wird das äußere Array abgeschält. Zum Vorschein kommen nacheinander die Arrays mit den seitenspezifischen Daten. Diese werden gleich in ihre drei Elemente aufgespaltet. Nun trennen sich die Wege. Die If-Anweisungen unterscheiden nun wie erwähnt anhand des Zahlenwertes, um welchen Kategorietyp es sich handelt, und anhand des Stringelements, ob die Seite aktiv ist. Es werden einfach die Parameter in der URL und die Werte aus dem Array verglichen. Da durch den Klick des Users das Ziel mit der URL weitergegeben wird, ist der Zielparameter gespeichert und bekannt.
Die so entwickelte Navigationsleiste erscheint als Tabelle. Sie besteht aus zwei Spalten, um die ausgeklappten Unterpunkte gegen die Hauptkategorie einzurücken. Um nun den aktuellen Standort (wo bin ich?) besser darzustellen, kann in die erste Spalte vor der aktuellen Seite ein kleines Bildchen mit einem Dreieck (dreieck.jpg) oder ein Pfeil angezeigt werden. Über den Sinn ist im Einzelnen zu entscheiden und dies unterliegt dem Geschmack des Webmasters. Um die aktiven und die nichtaktiven Schaltflächen besser kenntlich zu machen, können die Zellen farblich unterschiedlich gestaltet werden.

Listing 3

<?    # index.php
include("menue_array.php4");
if(!isset($nav1)){$nav1 = "Home";} # fuer den ersten kontakt
?>
<html>
<body>
<table width="450" border="1">
<tr>
<td colspan="2">Header Inhalt</td>
</tr>
<tr>
<td width="150">
<?php
include ("dyn_menue.php4");
?>
</td>
<td width="584" valign="top">
<?
$okay=0;
for($d=0;$d<count($menue_array);$d++){ # pruefen ob die Parameter auch echt sind
if($nav1==$menue_array[$d][0]){$okay++;}
if($nav2==$menue_array[$d][0]){$okay++;}
}
if($nav2=="warenkorb"){$okay++;} # Ausnahme definieren

if($okay==2)
{include($nav2.".php4");}
else
{include("error.php4");}
?>
</td>
</tr>
<tr>
<td colspan="2">Footer Inhalt</td>
</tr>
</table>
</body>
</html>

Die Index-Seite
Listing 3 zeigt die Datei index.php. Im Unterschied zum Original wird als Navigationsleiste das Skript dyn_menue.php mit der Funktion Include eingefügt. Wird die Seite zum ersten Mal kontaktiert, muss wenigstens die Variablen nav1 mit einem Wert gefüllt sein. Darum: $nav1=Home!
Zuvor benötigt das Menü natürlich die in dem Array ($menue_array.php) gespeicherten Daten. Das erledigt die Include-Funktion gleich am Anfang des Skriptes. Das Array dient auch, wie schon erwähnt, dazu, die Engine sicher zu machen.
Da die Variablen $nav1 und $nav2 Werte aus dem Array erhalten, sind andere als diese Werte nicht zu akzeptieren. Mit der For-Schleife in der Index-Seite wird nach gültigen Werten gesucht und bei Übereinstimmung die Variable mit $okay++ von 0 um 1 höher gezählt. Da im Normalfall zwei Übereinstimmungen zu erwarten sind (eine für jede Variable), muss am Ende der Wert von $okay 2 sein. Wenn nicht, wird eine Fehlerseite angezeigt.

Schlussbetrachtung
Dem Credo von Linux Enterprise entsprechend soll die hier vorgestellte Navigationsleiste nur eine Anregung für Interessenten sein. Selbstverständlich ist die Ausführung in Farbe und Gestaltung jedem Webmaster selbst überlassen. Beispieldateien und weitere Anregungen finden Sie unter www.meeloon.de/.

© 2004 Software & Support Verlag GmbH. Vervielfältigung nur mit Genehmigung des Verlags. Fragen?