Tutorial

Intelligentes Menüsystem mit PHP

Hier versuche ich den Aufbau eines intelligenten Menüsystem zu erklären, als Grundlage dient mir das Homepage-Grundgerüst von kmec - Mechanik.

Grundkenntnisse über PHP kannst du dir auf http://www.muhmenthal.ch/php/ aneignen. Im Kapitel "Ein intelligentes Menüsystem" dieser Seite beschreibe ich, wie ein solches Menü als einzeilige Tabelle im Kopf der Seite erstellt wird. Auf der kmec-Mechanik - Homepage sind die Menüs auf der linken Seite angeordnet und ich habe das Script für eine "Unsortierte Liste" umgeschrieben, ausserdem sollen die Stilzuweisungen über die externe CSS-Datei style.css erfolgen.

Hier zuerst das Script der externen Menü-Datei menue.inc:
<?
$menue = array (
    "Home"               => "index.php",
    "Motorr&auml;der"    => "motorraeder.php",
    "Z&uuml;ndsysteme"   => "zuendsysteme.php",
    "Elektrik"           => "elektrik.php",
    "Ersatzteile"        => "ersatzteile.php",
    "Elektronik"         => "elektronik.php",
    "Mechanik"           => "mechanik.php",
    "Spezial"            => "spezial.php",
    "Neu"                => "neu.php",
    "Kontakt"            => "kontakt.php"
);
?>

<?
foreach($menue as $eintrag => $datei)
{
    if ($datei == basename($_SERVER['PHP_SELF']))
    {
        echo "<li class = \"aktiv\">";
        echo $eintrag;
        echo "</li>";
    } else
    {
        echo "<li>";
        echo "<a href=\"$datei\">$eintrag</a>";
        echo "</li>";
    }
}
?>


Hier nun die Erklärung dazu:
PHP Code in der Datei "menue.inc"
Bedeutung
Bemerkung
<?
der Anfang jedes PHP-Codes

$menue = array
ein Array mit dem Namen $menue
Bei einem Array handelt es sich um eine Ansammlung unterschiedlicher Werte, die unter einem Namen zusammengefasst werden.
( der Anfang der Werteingaben

"Home"             => "index.php",
"Motorr&auml;der"  => "motorraeder.php",
"Z&uuml;ndsysteme" => "zuendsysteme.php",
"Elektrik"         => "elektrik.php",
"Ersatzteile"      => "ersatzteile.php",
"Elektronik"       => "elektronik.php",
"Mechanik"         => "mechanik.php",
"Spezial"          => "spezial.php",
"Neu"              => "neu.php",
"Kontakt"          => "kontakt.php"
Index mit dem zugeordnetem Wert
Der Syntax "Index => Werte", durch Kommas getrennt, definiert Index und Werte. Index kann vom Typ String oder numerisch sein. Wird der Index weggelassen, erstellt die Funktion automatisch einen numerischen Index, der bei 0 beginnt. Ist der Index als Integer-Wert angegeben, wird der nächste generierte Index der größte Integer Index + 1. Beachte, dass wenn zwei identische Indexe definiert sind, der letzte den ersten überschreibt.
Hier kannst du die Menüeinträge, -reihenfolge und die dazugehörenden Datein festlegen.
); das Ende der Werteingaben

?>
das Ende jedes PHP-Codes




<?
der Anfang jedes PHP-Codes
foreach foreach-Schleife dient dem Ausführen von Anweisungen Es gibt zwei Arten der foreach-Schleife, wobei eine nur bei assoziativen Arrays genutzt werden kann. Um Fehler zu vermeiden sollte überprüft werden, ob das Array auch ein Array ist, sofern das nicht zuvor sichergestellt wurde. Zur Überprüfung kann die Funktion is_array verwendet werden.
($menue as $eintrag => $datei) "Definition": das Arrays mit dem Namen $menue hat ein Schlüssel (Index) $eintrag mit der zugeordneten Variablen $datei.

{
Anfang der foreach-Anweisungen

if ($datei == basename($_SERVER['PHP_SELF'])) "Definition": ist die $datei gleich wie der basename ausgelesen von der Systemvariablen $_SERVER, dann mache dies
Über $_SERVER['PHP_SELF'] erhalten wir etwa den aktuellen Dateinamen inklusive des Pfades vom Wurzelverzeichnis aus. Wir benötigen allerdings nur den reinen Dateinamen, den uns die Funktion basename() liefert.
{
Anfang der if-Anweisungen
echo "<li class = \"aktiv\">"; gibt den HTML-Tag <li> mit der Klasse "aktiv" aus
Die Backslash vor den inneren " sind notwendig damit die echo-Anweisung nicht frühzeitig unterbrochen wird.
echo $eintrag; gibt den Schlüssel $eintrag vom Array menue aus

echo "</li>"; gibt den HTML-Tag </li> aus

}
Ende der if-Anweisung

else
trifft die if-Anweisung nicht zu, so mache dies

{
Anfang der else-Anweisung

echo "<li>"; gibt den HTML-Tag <li> aus

echo "<a href=\"$datei\">$eintrag</a>"; gibt den Verweis (Link) aus, mit dem Verweisziel der $datei und der Benennung $eintrag

echo "</li>"; gibt den HTML-Tag </li> aus
}
Ende der else-Anweisung

}
Ende der foreach-Anweisung

?> Ende des PHP-Codes


Wichtig:
Eine PHP-Datei kannst du nicht direkt mit einem Browser öffnen, in Erste Schritte in PHP auf http://www.muhmenthal.ch/php/ wird alles erklärt.

Und so sieht die eigentliche PHP-Datei index.php aus:
<?
$datei_name = "counter.txt";
// Existiert bereits ein Counter?
if (!file_exists($datei_name))
{
$dz = fopen($datei_name, "w");
fwrite($dz, "0");
fclose($dz);
}
//Counter auslesen
$dz = fopen($datei_name, "r");
$counter = fread($dz, 10);
fclose($dz);
//Der Cookie wird abgefragt
$besucher = $_COOKIE['besucher'];
if (!isset($besucher))
{
setcookie("besucher","ja");
$counter++;
$dz = fopen($datei_name, "w");
fwrite($dz, $counter);
fclose($dz);
}
//Counter in Grafik umwandeln
$anzahl = strlen($counter);
$counter_grafik = "";
for ($pos = 0; $pos < $anzahl; $pos++)
{
$ziffer = substr($counter, $pos, 1);
$counter_grafik .= "<img src=\"$ziffer.png\">";
}
?>

<html>
<head>
<title>kmec - Home</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="kopf">kmec - Mechanik</div>
<div style="position: absolute; left: 5px; top: 60px; height: 30px; width: 980px; text-align: right;">
<?=$counter_grafik;?>
</div>

<div class="menu">
<ul>
<? include("menue.inc") ?>
</ul>
</div>

<div
 style="position: absolute; left: 157px; top: 102px; height: 600px; width: 850px; background-color: rgb(204, 204, 204); text-align: center;"><span style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">Home</span><br>
</div>

</body>
</html>



Hier nun die Erklärungen dazu:
HTML und PHP-Script
Bedeutung
Bemerkung
<?
$datei_name = "counter.txt";
// Existiert bereits ein Counter?
if (!file_exists($datei_name))
{
$dz = fopen($datei_name, "w");
fwrite($dz, "0");
fclose($dz);
}
//Counter auslesen
$dz = fopen($datei_name, "r");
$counter = fread($dz, 10);
fclose($dz);
//Der Cookie wird abgefragt
$besucher = $_COOKIE['besucher'];
if (!isset($besucher))
{
setcookie("besucher","ja");
$counter++;
$dz = fopen($datei_name, "w");
fwrite($dz, $counter);
fclose($dz);
}
//Counter in Grafik umwandeln
$anzahl = strlen($counter);
$counter_grafik = "";
for ($pos = 0; $pos < $anzahl; $pos++)
{
$ziffer = substr($counter, $pos, 1);
$counter_grafik .= "<img src=\"$ziffer.png\">";
}
?>
Der Besucherzähler aus http://www.muhmenthal.ch/php/,
Kapitel "Ein Besucherzähler und anderes"

<html>
<head>
<title>kmec - Home</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>
Der HTML- "Kopf" mit dem Verweis auf die CSS-Datei style.css

<body> Der Anfang des eigentlichen Inhaltsteils der Homepage
<div class="kopf">kmec - Mechanik</div>
<div style="position: absolute; left: 5px; top: 60px; height: 30px; width: 980px; text-align: right;">
<?=$counter_grafik;?>
</div>
Layer Kopfzeile mit dem Besucherzähler

<div class="menu">
<ul>
<? include("menue.inc") ?>
</ul>
</div>
Layer Menü, nach <ul> (HTML-Tag unsortierte Liste) wird das Menüsystem (die eigentlichen Listeneinträge <li>) aus der Datei menue.inc geladen.
Die HTML-Attribute sind in der CSS-Datei style.css zentral gespeichert, hier gilt die Klasse menu.

<div
 style="position: absolute; left: 157px; top: 102px; height: 600px; width: 850px; background-color: rgb(204, 204, 204); text-align: center;"><span style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">Home</span><br>
</div>
Layer Inhalt

</body> Das Ende des eigentlichen Inhaltsteils der Homepage
</html> Das Ende des HTML-Script


Über die CSS-Datei style.css habe ich in http://www.muhmenthal.ch/kmec_03_tutorial/ geschrieben.

Wichtig:
Eine PHP-Datei kannst du nicht direkt mit einem Browser öffnen, in Erste Schritte in PHP auf http://www.muhmenthal.ch/php/ wird alles erklärt.

Nun wünsche ich dir viel Erfolg beim Erstellen einer Webseite mit dynamischen und intelligenten Menüsystem … :-))