Tabellen und PHP statt Frames

Tutorial:
Tabellen und PHP statt Frames
c 2004 Jochen Grundmann
http://www.online-platform.net
Dieser Text unterliegt der GNU General Public License.
Er darf als ganzes oder in Auszügen kopiert
werden, vorausgesetzt, dass sich dieser Copyright
Vermerk auf jeder Kopie befindet.
Tabellen und PHP statt Frames
Seite 2
Tabellen und PHP statt Frames
In diesem Tutorial möchte in anhand von verschiedenen Beispielen mehrere Möglichkeiten
aufzeigen, wie Tabellen und PHP Frames in HTML ersetzen können. Auf die Vor- und Nachteile des Einsatzes von Frames möchte ich hier nicht näher eingehen.
Das bekannteste Beispiel für den Einsatz von Frames ist wohl die Navigationsleiste. Man
findet sie auf so gut wie jeder Webpräsenz und dort muss sie auf jeder Seite wiederholt
werden. Wenn man hier auf Frames verzichten möchte, bedeutet dies jedoch, dass man
diesen Code für die Navigationsleiste auf jeder Seite erneut unterbringen muss.
Hier kommt die Scriptsprache PHP zum Einsatz.
Fangen wir mit einem ganz einfachen Beispiel an.
Jede Seite dieser Site hat eine Tabelle als Grundgerüst. Sie besteht aus eine Zeile und zwei
Spalten, die erste Spalte nimmt 20% des Bildschirms ein, die zweite 80%.
Beispiel
<table width="100%" border ="0">
<tr><td width = "20%"></td>
<td width = "80%"></td></tr>
</table>
Die erste Spalte ist zur Aufnahme der Navigationselemente bestimmt, die zweite für die
eigentlichen Inhalte der jeweiligen Seite.
Die Navigationselemente werden in einer eigenen Datei gespeichert, die dann über eine include
Anweisung in die Seite eingebunden wird.
Beispiel
<table>
<tr><td height = "50">
<img src="buttons/home.gif"></td></tr>
<tr><td height = "50">
<img src="buttons/aboutus.gif"></td></tr>
<tr><td height = "50">
<img src="buttons/coollinks.gif"></td></tr>
<tr><td height = "50">
<img src="buttons/moreinfo.gif"></td></tr>
<tr><td height = "50">
<img src="buttons/contactus.gif"></td></tr>
<tr><td height = "50">
<img src="buttons/services.gif"></td></tr>
c 2004 Jochen Grundmann
Tabellen und PHP statt Frames
Seite 3
</table>
Einbinden der Navigationsdatei
<table width="100%" border ="0">
<tr><td width = "20%">
<?php
include ("navigation.html");
?>
</td>
<td width = "80%"></td></tr>
</table>
Auf jeder Seite, auf der die Navigationsleiste benötigt wird, muss also nur die entsprechende
Datei aufgerufen werden.
Alternativ zu der Navigationsleiste am linken Bildschirmrand, kann man sie natürlich auch
oben positionieren. Das könnte ungefähr so aussehen:
Beispiel
<table width="100%" border ="0">
<tr><td width ="100%">
<?php
include ("nav_oben.html");
?>
</td></tr>
<tr><td width ="100%">Seite</td></tr>
</table>
Bei der Navigationsleiste hätten wir dann folgenden Code:
Beispiel
<table width="100%" border = "0">
<tr>
<td width = "15%"><img src="buttons/home.gif"></td>
<td width = "15%"><img src="buttons/aboutus.gif"></td>
<td width = "15%"><img src="buttons/coollinks.gif"></td>
<td width = "15%"><img src="buttons/moreinfo.gif"></td>
<td width = "15%"><img src="buttons/contactus.gif"></td>
<td width = "15%"><img src="buttons/services.gif"></td>
</tr>
c 2004 Jochen Grundmann
Tabellen und PHP statt Frames
Seite 4
</table>
Eine wesentlich elegantere Methode stellt die Auslagerung der Navigation in eine CSV Datei
dar. CSV ist die Abkürzung für Comma Separated Values und ist ein universelles Format für
Tabellen. Dabei werden die einzelnen Zellen einer Zeile durch ein Komma getrennt, es kann
aber auch ein anderes Trennzeichen verwendet werden. Solche Tabellen können z. B. mit
Microsoft Excel erzeugt werden. Bei Excel ist zu beachten, dass als Trennzeichen beim CSV
Format das Semikolon verwendet wird. Eine CSV Datei kann aber auch mit jedem Texteditor
erstellt werden.
Bei unserem Navigationsbeispiel könnte die Tabelle dann so aussehen:
Die Datei menu.csv
buttons/home.gif;Startseite;start_csv.php
buttons/aboutus.gif;Ueber uns;about.php
buttons/coollinks.gif;Coole Links;links.php
buttons/moreinfo.gif;Mehr Infos;info.php
buttons/contactus.gif;Kontakt;contact.php
buttons/services.gif;Service;service.php
Der erste Eintrag ist der Name der verwendeten Grafik, der zweite der alternative Text und
der dritte enthält den Link auf die aufzurufende Datei.
Der Vorteil bei der Auslagerung in eine externe Datei liegt darin, dass bei einer Änderung
nur ein Eintrag in dieser Datei bearbeitet werden muss, man also keinen HTML Code mehr
benötigt. Am Grundaufbau der Seite hat sich nichts geändert, nur für das Einlesen der CSV
Datei muss ein neues Skript angelegt werden.
Zum Einlesen von CSV Dateien stellt PHP den Befehl fgetcsv() zur Verfügung. Diese Datei
muss vorher mit fopen() geöffnet werden. fgetcsv() liest immer eine Zeile der Datei ein und
zerlegt den Inhalt anhand des angegebenen Trennzeichens. Anschließend werden die Bestandteile in einem Array zurückgeliefert. Die Funktion fgetcsv() benötigt drei Parameter:
1. Eintrag: Name der Datei
2. Eintrag: gibt die Anzahl der Zeichen pro Zeile, die gelesen werden sollen an
3. Eintrag: das verwendete Trennzeichen. Wird die Angabe des Trennzeichens weggelassen, wird als Standardwert "," angenommen.
c 2004 Jochen Grundmann
Tabellen und PHP statt Frames
Seite 5
Die Datei csv.php
<table>
<?php
$datei = fopen ("menu.csv", "r");
while ($menu = fgetcsv ($datei, 1000, ";"))
{
echo "<tr><td <td height = ’50’>
<a href = ’$menu[2]’><img src = ’$menu[0]’ alt=’$menu[1]’>
</td></tr>";
}
?>
</table>
Zuerst wird die CSV Datei mit fopen() geöffnet und an die Variable $datei gebunden. Anschließend wird jede Zeile der Datei über eine while-Schleife eingelesen und in der Tabelle
ausgegeben. Auf die einzelnen Elemente des Arrays $menu wird dann über $menu[0] bis $menu[2] direkt zugegriffen. In der Grundtabelle muss dann noch diese Datei über eine include
Anweisung eingebunden werden.
Wenn man so wie ich viel mit MySQL arbeitet, kann man die Navigation auch in eine
Datenbanktabelle auslagern.
Zuerst wird die Tabelle angelegt.
Beispiel
create table navigation (
id int not null auto_increment,
button varchar (150),
alt_text varchar (100),
link varchar (250),
primary key (id)
);
Da die Einträge für die Navigation ja schon in einer CSV Datei stehen, kann man diese auch
öffnen und in die Tabelle eintragen lassen. Dazu muss das obige Skript ein wenig angepasst
werden.
Datei insert_csv.php
$server="127.0.0.1";
$user="root";
$password="";
$connection = mysql_connect ($server, $user, $password);
c 2004 Jochen Grundmann
Tabellen und PHP statt Frames
Seite 6
mysql_select_db("test");
datei = fopen ("menu.csv", "r");
while ($menu = fgetcsv ($datei, 1000, ";"))
{
$entry = "insert into navigation (button, alt_text, link)
values (’$menu[0]’, ’$menu[1]’, ’$menu[2]’)";
$result = mysql_query ($entry);
}
Zuerst wird die Verbindung zum Datenbankserver aufgebaut. Anschließend wird die CSV
Datei geöffnet und über eine while-Schleife werden die Zeilen in die Tabelle eingefügt.
Die Ausgabe der Navigationselemente erfolgt auf ähnliche Weise wie bei der CSV Datei.
Datei nav_db.php
$server="127.0.0.1";
$user="root";
$password="";
$connection = mysql_connect ($server, $user, $password);
mysql_select_db("test");
$sql = "select * from navigation";
$result = mysql_query($sql);
while ($row = mysql_fetch_object($result))
{
echo "<tr><td height = ’50’>
<a href = ’$row->link’>
<img src = ’$row->button’ alt=’$row->alt_text’></a></td></tr>";
}
Auch hier wird wieder zuerst die Verbindung zum Datenbankserver aufgebaut. Da diese bei
PHP und MySQL immer wieder gebraucht wird, empfiehlt es sich, auch diese in eine Datei
auszulagern und per include Anweisung einzubinden. Über die Funktion mysql_fetch_object
wird dann das Abfrageergebnis Zeile für Zeile abgearbeitet.
Das waren verschiedene Möglichkeiten die Navigation auszulagern. Nichtsdestoweniger wird
für jede einzelne Seite das Grundgerüst benötigt und der Programmcode für die jeweiligen
Dateien muss angelegt werden. Außerdem muss auf jeder Seite die include Anweisung für die
Navigation neu angelegt werden. Das abschließende Beispiel soll zeigen, wie eine Webpräsenz
mit einer Grunddatei aufgebaut werden kann. In diese werden dann die jeweiligen Unterseiten
über include Anweisungen eingebunden.
Zuerst wird das Grundgerüst, mit den Elementen, die auf jeder Seite zu sehen sein sollen,
erstellt. Dazu wird das erste Beispiel verwendet (in leicht abgewandelter Form).
c 2004 Jochen Grundmann
Tabellen und PHP statt Frames
Seite 7
Beispiel
<table width="100%" border ="0">
<tr><td colspan ="2" align = "center">
<h2>Navigation aus CSV Datei</h2></td></tr>
tr><td width = "20%">
<?php
include ("csv.php");
?>
</td>
<td width = "80%"></td></tr>
</table>
Anschließend werden die Seiten erstellt, deren Inhalt in der rechten Spalte erscheinen soll.
Ich mache es hier als Beispiel ganz einfach.
Beispiel
<table>
<tr><td><h2>Service</h2></td></tr>
</table>
Dann muss noch die Navigation sei es nun eine HTML-Datei, eine CSV-Datei oder eine
Datenbanktabelle, sprich die Verlinkung auf die jeweilig aufzurufende Seite, angepasst werden.
Ich erläutere dies hier am Beispiel der CSV-Datei.
Beispiel
buttons/home.gif;Startseite;start_csv.php?site=1
buttons/aboutus.gif;Ueber uns;start_csv.php?site=2
buttons/coollinks.gif;Coole Links;start_csv.php?site=3
buttons/moreinfo.gif;Mehr Infos;start_csv.php?site=4
buttons/contactus.gif;Kontakt;start_csv.php?site=5
buttons/services.gif;Service;start_csv.php?site=6
Wie man sieht, wird immer dieselbe Startseite aufgerufen, nur wird jetzt jedes mal die Variable
site mit einem anderen Wert über die URL übermittelt. Dazu wird ein Fragezeichen ? an die
URL angehängt, danach folgen die Variable, ein Gleichheitszeichen = und dann der Wert,
den die Variable annehmen soll. ( Sollen mehrere Variablen gleichzeitig übermittelt werden,
werden sie durch ein Kaufmannsund & verbunden, z. B. startseite.php?site=1& name=Tim.)
Diese Methode ist ganz praktisch, wenn man bestimmte Werte von einer Seite auf die nächste
übermitteln muss. Üblicherweise hat der Browser sie auf der nächsten Seite nämlich schon
vergessen. Auf diese Art übermittelte Variablen speichert PHP in dem Array $_GET. Auf
den Wert der Variablen site kann dann über $_GET["site"] zugegriffen werden.
c 2004 Jochen Grundmann
Tabellen und PHP statt Frames
Seite 8
Die Variable site kann bei diesem Beispiel sechs verschiedene Werte annehmen. Der tatsächliche Wert wird über eine Reihe von if -Bedingungen abgefragt.
Beispiel
<?php
if ($_GET["site"]==1) include ("home.php");
?>
Da die Variable immer nur einen Wert annehmen kann, werden die weiteren möglichen Werte
über elseif Bedingungen abgefragt.
Beispiel
elseif
elseif
elseif
elseif
elseif
($_GET["site"]==2)
($_GET["site"]==3)
($_GET["site"]==4)
($_GET["site"]==5)
($_GET["site"]==6)
include
include
include
include
include
("about.php");
("links.php");
("info.php");
("contact.php");
("service.php");
Für den Fall, dass ein Besucher auf die Idee kommt manuell andere Werte für die Variable
site einzugeben, folgt zu Schluss noch eine else Anweisung mit einer Fehlermeldung.
Beispiel
else echo "<h2>Diese Seite existiert nicht</h2>";
Diese if-Bedingungen werden in die zweite Spalte der zu Grunde liegenden Tabelle eingegeben.
Beispiel
<table width="100%" height="" border ="0">
<tr><td colspan ="2" align = "center">
<h2>Navigation aus CSV Datei</h2></td></tr>
<tr><td width = "20%">
<?php
include ("csv.php");
?>
</td>
<td width = "80%">
<?php
if ($_GET["site"]==1) include ("home.php");
elseif ($_GET["site"]==2) include ("about.php");
c 2004 Jochen Grundmann
Tabellen und PHP statt Frames
Seite 9
elseif ($_GET["site"]==3) include ("links.php");
elseif ($_GET["site"]==4) include ("info.php");
elseif ($_GET["site"]==5) include ("contact.php");
elseif ($_GET["site"]==6) include ("service.php");
else echo "<h2>Diese Seite existiert nicht</h2>";
?>
</td> </tr>
</table>
Ich hoffe, ich habe mit diesen Beispielen zeigen können, dass es für diejenigen, die Frames
nicht verwenden möchten, aber müssen, auch andere akzeptable Alternativen gibt.
Für Rückmeldungen bin ich dankbar.
c 2004 Jochen Grundmann