Author: Progman, zuletzt bearbeitet von progman @ 2006/03/13 17:04:41
Bitte beachten Sie, dass die Tutorialkapitel zusammenhängen. Wenn sie direkt auf ein Kapitel verlinkt wurden müssen Sie gegebenenfalls die vorherigen Kapitel auch lesen. Achten Sie beim lesen darauf, dass Sie kein Kapitel überspringen.
3-Spalten-Layout erstellen
- Simulation von Frames
- Div-Layer statt Frames
- Include in den div-Elementen
- Switch-Abfrage für $_GET['section']
- Arrays für $_GET['section']
1. Simulation von Frames
Jeder kennt Frames und inline-Frames. Dabei gibt es eine Datei, die das Frameset einstellt, wo welches Frame ist. Man kann z.B. seine Homepage in 3 Frames unterteilen. Oben fügt man seinen Banner ein, links sein Menu und in der Mitte kommt dann der Inhalt wie aktuelle News oder gespielte Clanwars. Im reinem HTML ohne Scriptsprachen ist dies auch vielleicht sinnvoll. Doch mit PHP haben wir die Möglichkeit sowas wie Frames zu simulieren. Denn Frames aus HTML in Verbindung mit PHP ist scheisse, da gibt es nur Probleme. Da möchte man bei einem Klick beide Frames reloaden, was nicht so ohne weiteres geht. Oder man möchte sich im internen Bereich einloggen doch dann wird das Formulare nur an eine Seite geschickt und die anderen Seiten bleiben uneingeloggt. Und natürlich sind da überall die Scrollbalken, die bei 4 oder mehr Frames dann ganz schön nerven.
2. Div-Layer statt Frames
Mit PHP geht so ein System, wo oben ein Banner ist, links ein Menu und in der Mitte der Inhalt, viel einfacher. Man sieht es auf sehr vielen Clanseiten von bekannten Clans. Nach längerem Studieren der HTML-Quelltexte solcher Clanseiten wird man feststellen, dass dort eine unsichbare HTML-Tabelle erstellt wurde.
Logischer ist aber die Benutzung von div-Elementen, die man mit CSS an die entsprechenden Stellen positionieren kann. Wir erstellen also 3 div-Elemente mit einer ID, damit wir mit CSS direkt darauf bezug nehmen können.
<?php
error_reporting(E_ALL);
echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"\n";
echo " \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n";
echo "<html>\n";
echo " <head>\n";
echo " <title>Meine Seite</title>\n";
echo " <link rel=\"stylesheet\" type=\"text/css\" href=\"page.css\" />\n";
echo " <meta http-equiv=\"Content-Type\"
content=\"text/html; charset=ISO-8859-1\" />\n";
echo " </head>\n";
echo " <body>\n";
echo " <div id=\"root\">\n"; // ganz oberer Div-Holder
echo " <div id=\"banner\">\n"; // banner
echo " Der Banner";
echo " </div>\n";
echo " <div id=\"links\">\n"; // linkes Menu
echo " Hier kommt ein Menu hin\n";
echo " </div>\n";
echo " <div id=\"mitte\">\n"; // In der Mitte der Inhalt
echo " Hier werden dann die Daten geladen, wie News\n";
echo " oder Memberliste.\n";
echo " </div>\n";
echo " <br style=\"clear:both;\" />\n"; // css-float beenden
echo " </div>\n";
echo " </body>\n";
echo "</html>\n";
?>
Mit der CSS-Datei page.css, die wir mit dem link-Element einbinden, formatieren wir diese div-Elemente.
#banner {
height: 80px;
}
#links {
width: 30%;
float: left;
}
#mitte {
width: 69%;
float:left;
}
Dies würde dann so ein oder ähnliches Layout erstellen.
Abb.: Das Layout mit Div-elementen
Die einzelnen Inhalt der div-Elemente werden dann durch include-Anweisungen gefüllt.
3. Include in den div-Elementen
Wir nehmen uns nochmal den Quellcode oben vor.
<?php
error_reporting(E_ALL);
echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"\n";
echo " \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n";
echo "<html>\n";
echo " <head>\n";
echo " <title>Meine Seite</title>\n";
echo " <link rel=\"stylesheet\" type=\"text/css\" href=\"page.css\" />\n";
echo " <meta http-equiv=\"Content-Type\"
content=\"text/html; charset=ISO-8859-1\" />\n";
echo " </head>\n";
echo " <body>\n";
echo " <div id=\"root\">\n"; // ganz oberer Div-Holder
echo " <div id=\"banner\">\n"; // banner
echo " Der Banner";
echo " </div>\n";
echo " <div id=\"links\">\n"; // linkes Menu
echo " Hier kommt ein Menu hin\n";
echo " </div>\n";
echo " <div id=\"mitte\">\n"; // In der Mitte der Inhalt
echo " Hier werden dann die Daten geladen, wie News\n";
echo " oder Memberliste.\n";
echo " </div>\n";
echo " <br style=\"clear:both;\" />\n"; // css-float beenden
echo " </div>\n";
echo " </body>\n";
echo "</html>\n";
?>
In den einzelnen Elementen stehen jetzt konstante Werte. Doch an dieser Stelle kann auch eine Include-Anweisung stehen. Diese erzeugt dann den entsprechenden Inhalt. Dies könnte dann so aussehen.
<?php
error_reporting(E_ALL);
echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"\n";
echo " \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n";
echo "<html>\n";
echo " <head>\n";
echo " <title>Meine Seite</title>\n";
echo " <link rel=\"stylesheet\" type=\"text/css\" href=\"page.css\" />\n";
echo " <meta http-equiv=\"Content-Type\"
content=\"text/html; charset=ISO-8859-1\" />\n";
echo " </head>\n";
echo " <body>\n";
echo " <div id=\"root\">\n"; // ganz oberer Div-Holder
echo " <div id=\"banner\">\n"; // banner
include "banner.php";
echo " </div>\n";
echo " <div id=\"links\">\n"; // linkes Menu
include "menu.php";
echo " </div>\n";
echo " <div id=\"mitte\">\n"; // In der Mitte der Inhalt
include "inhalt.php";
echo " </div>\n";
echo " <br style=\"clear:both;\" />\n"; // css-float beenden
echo " </div>\n";
echo " </body>\n";
echo "</html>\n";
?>
Die Teildateien sehen dann so aus.
<!--
die Datei banner.php als HTML-Modus
da sie nur ein Bild ausgibt und kein
PHP-Code benötigt.
-->
<img src="images/banner.png" alt="Der Banner" />
<!-- die Datei menu.php -->
<ol>
<li><a href="index.php">News</a></li>
<li><a href="index.php?section=members">Members</a></li>
<li><a href="index.php?section=clanwars">Clanwars</a></li>
<!-- usw. -->
</ol>
Die inhalt.php hat es aber in sich. Sie muss, abhängig vom Wert $_GET['section'], der übergeben wird, die richtige Ausgabe erzeugen. Dabei gibt es 2 Möglichkeiten dies zu verwirklichen. Einmal kann man sich den Wert $_GET['section'] mit einer switch-case-Abfrage angucken. Es gibt aber auch die Variante das ganze mit Arrays zu lösen.
4. Switch-Abfrage für $_GET['section']
Mit einer Switch-Anfrage prüfen wir den Wert von $_GET['section']. Dies sieht dann so aus.
<?php
// die Datei inhalt.php
switch($_GET['section']) {
// ...
}
?>
In der Switch-Anweisung kommen dann die case-Teile, die jeweils mit break; abgeschlossen wird.
<?php
// die Datei inhalt.php
switch($_GET['section']) {
case "members":
// Befehle um eine Memberliste zu erstellen
break;
case "clanwars":
// Befehle um die gespielten Clanwars anzuzeigen
break;
default: // Wenn eine ungültige Section angegeben wurde
// sollen die News gezeigt werden
// Befehle um die News anzuzeigen.
break;
}
?>
Da wo jetzt steht "// führe Befehle xy aus" kann man, was üblicher ist, eine Include-Anweisung schreiben.
<?php
// die Datei inhalt.php
switch($_GET['section']) {
case "members":
include "members.php";
break;
case "clanwars":
include "clanwars.php";
break;
default: // Wenn eine ungültige Section angegeben wurde
// sollen die News gezeigt werden
include "news.php";
break;
}
?>
Hier werden dann die einzelnen Module, anhand des Wertes in $_GET['section'], geladen. Wir haben jetzt aber einen Fall nicht beachtet. Es kann natürlich sein, dass der Besucher die Datei index.php ohne Parameter öffnet. Somit gibt es kein Arrayelement mit dem Index section. Da wir aber versuchen den Wert von $_GET['section'] mit einer Switch-Abfrage auszulesen wird PHP dann an dieser Stelle einen Fehler erzeugen. Ist zwar 'nur' eine Notice, aber Fehler ist Fehler und macht sich nicht gut, wenn auf der Homepage ein Fehler steht. Deswegen müssen wir die Switch-Abfrage in eine If-Abfrage schreiben, die untersucht ob die Variable $_GET['section'] gesetzt ist oder nicht.
<?php
// die Datei inhalt.php
if(isset($_GET['section'])) {
switch($_GET['section']) {
case "members":
include "members.php";
break;
case "clanwars":
include "clanwars.php";
break;
default: // Wenn eine ungültige Section angegeben wurde
// sollen die News gezeigt werden
include "news.php";
break;
}
} else {
// wenn section nicht angegeben wurde
// sollen die News angezeigt werden.
include "news.php";
}
?>
Falls bei diesem Script die Section nicht angegeben wurde, wird der else-Teil der If-Abfrage ausgeführt, die dann die news.php includet.
Diese Variante mit der Switch-Abfrage finde ich persönlich unübersichtlich. Es gibt 2 include "news.php"; Answeisungen und diese Switch-Abfrage nimmt viel Platz ein. Und wenn man eine neue Section hinzufügen muss, muss man immer die inhalt.php bearbeiten, die dann bei vielen Sections sehr groß werden kann. Wenn man Arrays benutzt, bleibt die inhalt.php sehr klein.
5. Arrays für $_GET['section']
Wenn man mit $_GET['section'] einen entsprechenden Inhalt laden möchte, kann man dafür Arrays und isset benutzen. Man legt dabei ein Array an, wo alle möglichen Sections gespeichert sind. Bei jedem Arrayelement ist der Schlüssel der Wert aus $_GET['section'] und der Wert des Arrayelements ist die Datei die dann includiert werden soll. Dies sieht dann so aus.
<?php
$dateien = array(); // ein Leeres Array erzeugen
$dateien['news'] = "news.php";
$dateien['clanwars'] = "clanwars.php";
$dateien['admin'] = "admin/admin.php";
$dateien['vote'] = "poll.php";
// ...
?>
Dieses Array kann man in eine config.php schreiben. Wenn eine neue Section hinzukommt, braucht man nur das Array zu erweitern.
Die index.php muss man noch so anpassen, dass die Konfigurationsdatei geladen wird.
<?php
error_reporting(E_ALL);
include "inc/config.php"; // die Konfigurationsdateien lesen.
echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"\n";
echo " \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n";
echo "<html>\n";
echo " <head>\n";
echo " <title>Meine Seite</title>\n";
echo " <link rel=\"stylesheet\" type=\"text/css\" href=\"page.css\" />\n";
echo " <meta http-equiv=\"Content-Type\"
content=\"text/html; charset=ISO-8859-1\" />\n";
echo " </head>\n";
echo " <body>\n";
echo " <div id=\"root\">\n"; // ganz oberer Div-Holder
echo " <div id=\"banner\">\n"; // banner
include "banner.php";
echo " </div>\n";
echo " <div id=\"links\">\n"; // linkes Menu
include "menu.php";
echo " </div>\n";
echo " <div id=\"mitte\">\n"; // In der Mitte der Inhalt
include "inhalt.php";
echo " </div>\n";
echo " <br style=\"clear:both;\" />\n"; // css-float beenden
echo " </div>\n";
echo " </body>\n";
echo "</html>\n";
?>
Die Datei inhalt.php sieht dann wie folgt aus.
<?php
if(isset($_GET['section']) AND isset($dateien[$_GET['section']])) {
include $dateien[$_GET['section']];
} else {
include $dateien['news'];
}
?>
Wann wird die If-Abfrage ausgeführt? Also, einmal wird geguckt ob eine Section übergeben wurde (isset($_GET['section'])). Wenn eine Section übergeben wurde, wird geguckt ob es ein Arrayelement mit dem Index des Wertes von $_GET['section'] gibt (isset($dateien[$_GET['section']])). Wenn dies so ist, wird die entsprechende Datei aus dem Wert von $dateien[$_GET['section']] includet. Wenn einer der beiden Bedingung nicht wahr ist, weil z.B. keine Section übergeben wurde oder weil es für diese Section keine Datei angegeben wurde, wird die Standardseite geladen, hier die Section news ($dateien['news']).
Fragen zum aktuellen Thema
- Wie kann man Frames simulieren?
-
Statt Frames kann man auch div-Elemente benutzen. Dadurch verschwinden dann die lästigen Frame-Scrollbars. Die Elemente kann man dann durch include-Anweisungen dynamisch laden.
- Wie kann man dynamische Inhalte abhängig von einer Variable laden?
-
Um dynamische Inhalte abhängig von einer Variable laden zu lassen kann man mit 2 verschiedenen Lösungen verwirklichen
-
Mit einer Switch-Anweisung kann man sich den Inhalt einer Variable angucken und abhängig von dieser dann die verschiedenen Dateien includen.
-
Wenn man ein Array mit allen möglichen Dateien erzeugt, kann man dann abhängig von der Variable die richtige Datei includen, indem man die Datei auswählt, wo der Index gleich dem Wert der Variable ist.
-
