Framesets mit PHP simulieren Zurück zur Übersicht

Über den Autor

Tarik User
http://argentinien-austausch.de

Frames haben einen klaren Vorteil. Man kann einzelne Inhalte klar definieren und seine Page besser bearbeiten, da fast alles in seperate Dateien abgelegt ist. Leider überwiegen die Nachteile von Frames zu stark, da man recht viel basteln muss bis die Seite so aussieht wie sie soll und vieles ist einfach nur nervig für den Anwender.

In den Zeiten wo PHP mitlerweile recht weit verbreitet ist und selbst bei günstigen Webhosting Angeboten verfügbar ist, kann man diese mit einem recht simplen Script simulieren. In dem man die eigentlichen Frames dynamisch in div Tags verstaut und somit sehr viele Vorteile erhällt. Man kann ohne bastellei recht schnell, gute Ergebnisse erzeugen und das Layout (fast) komplett in einer Datei verstauen. Der eigentliche Inhalt wird dann in die definierten Bereiche geladen.

Im Klartext heißt das, dass wir alle Elemente in seperate Dateien lagern können, die dann in der index.php zusammen geführt werden. So kann zum Beispiel die Navigation jeder Zeit verändert werden, ohne das man sich durch Tausende von Zeilen HTML Code wühlen muss. Ein klarer Zeitvorteil.

Zu erst solltet Ihr ein fertiges HTML Layout haben, in dem dann die Inhalte rein geladen werden. Dazu wird die HTML Datei systemmatisch zerlegt und in Inhalt, Navigation, etc aufgeteilt. Hier mal ein Beispiel:

PHP-Code:

<html>
<head>
<title>_TITEL_</title>
</head>
<body>
<div id="box_header">_HEADER_</div>
<div id="box_navigation">_NAVIGATION_</div>
<div id="box_content">_CONTENT_</div>
<div id="box_footer">_FOOTER_</div>
</body>
</html>

Klar das hier ist nur eine Struktur und kein komplettes Layout, darum geht es an dieser Stelle auch nicht. Wir wollen nur Frames simulieren und keinen Preis für das Design gewinnen. Nahe liegend ist auf jedenfall die Trennung vom Content und der Navigation, da diese häufiger geändert wird. Außerdem wollen wir auch den Titel Dynamisch machen, so das der Besucher auch weiß wo er sich befindet. Aber zu erst kümmern wir uns um die Navigation, da diese recht einfach auszugliedern ist.

Wir erstellen erst einmal ein paar neue Dateien und ein paar Ordner, damit wir die Übersicht nicht gleich in einen riesigen Dateijungel verlieren. Das wir eine Index Datei benötigen sollte klar sein, also erstellen wir eine index.php, dazu packen wir auch gleich die navigation.php (im selben Ordner). Hinzu kommen nun noch ein paar Ordner und ein paar kleinere Dateien, die den Inhalt erst einmal simulieren sollen:

[root]
index.php
navigation.php
..
[inc]
config.php
..
[news]
index.php
show.php
..

So sollte die Struktur im besten Fall aussehen. Aber das bleibt Euch überlassen. In der index.php vom, root Verzeichniss, legen wir nun den HTML Code vom Design ab. Wenn Ihr noch Bilder habt, empfiehlt es sich im [inc] Ordner noch ein [img] Ordner zu erstellen, in der dann die Bilder abgelegt werden. Die Pfade sind denke ich mal schnell angepasst.

Nun kommen wir zu dem wichtigsten Teil. Wir müssen der Seite irgendwie mitteilen wo sich die ganzen Daten befinden und richtig navigieren können wir auch noch nicht. Also binden wir als erstes die navigation.php über include() ein:

index.php

PHP-Code:

<html>
<head>
<title>_TITEL_</title>
</head>
<body>
<div id="box_header">_HEADER_</div>
<div id="box_navigation"><?php include ('navigation.php';?></div>
<div id="box_content">_CONTENT_</div>
<div id="box_footer">_FOOTER_</div>
</body>
</html>

Nun legen wir in der inc/config.php die einzelnen Sektionen fest. "index.php?section=news" für den Pfad news/index.php und so weiter. Dazu in der Variabel $section ein Array und fügen folgende Daten ein:

inc/config.php
PHP-Code:

<?php
// inc/config.php
 
    // Hauptsektionen ->
    $section = array(
        'news'=>'news/index.php'
    ;
?>

So richtig viel passiert hier aber noch nicht. Wir müssen noch eine Anweisung schreiben, die dann die news/index.php in unsere Contentbox packt. Dazu gehen wir wieder in die index.php (im root) und fügen folgenden Code hinzu. Außerdem müssen wir auch noch die inc/config.php laden:

index.php
PHP-Code:

<?php
// index.php
 
    // Includes ->
    include ('inc/config.php';
 
?>
<html>
<head>
<title>_TITEL_</title>
</head>
<body>
<div id="box_header">_HEADER_</div>
<div id="box_navigation"><?php include('navigation.php';?></div>
<div id="box_content">
<?php
    // Inhalt laden ->
    include $section[$_GET['section']];    
?>
</div>
<div id="box_footer">_FOOTER_</div>
</body>
</html>

Diese Varriante ist leider nicht ganz so inteligent, da sie beim ersten Zugriff auf die Seite ein Fehler ausgeben würde, da die Varriable $section[$_GET['section']] nicht vorhanden ist. Also müssen wir eine Alternative erstellen, die den Bescher auf eine Default Page verweist. Dazu verwenden wir die news/index.php und eine If Abfrage:

index.php
PHP-Code:

<?php
// index.php
 
    // Includes ->
    include ('inc/config.php';
 
?>
<html>
<head>
<title>_TITEL_</title>
</head>
<body>
<div id="box_header">_HEADER_</div>
<div id="box_navigation"><?php include('navigation.php';?></div>
<div id="box_content">
<?php
    // Inhalt laden ->
    if(isset($_GET['section']) AND isset($section[$_GET['section']])) {
        include $section[$_GET['section']];
    } else {
        include $section['news']; // Default Page
    }    
?>
</div>
<div id="box_footer">_FOOTER_</div>
</body>
</html>

Nun wird erst geprüft ob $_GET['section'] vorhanden ist und ob in der inc/config.php auch der Wert von $_GET['section'] eingetragen ist. Wenn das nicht der Fall ist, landet der Besucher automatisch auf der Newsseite. Nun können wir auch noch einen direkten Verweis zu den News legen. Dazu öffnen wir wieder die navigation.php und fügen folgenden Code hinzu:

navigation.php
PHP-Code:

<a href="index.php?section=news">News</a>

Falls Ihr Euch wundert warum nur diese kleine Zeile, könnt Ihr ganz beruhigt sein. Der Inhalt von der navigation.php wird ja in den HTML Part von der index.php geladen. Der Browser bekommt die Seite nun so zu sehen:

index.php
PHP-Code:

<html>
<head>
<title>_TITEL_</title>
</head>
<body>
<div id="box_header">_HEADER_</div>
<div id="box_navigation"><a href="index.php?section=news">News</a></div>
<div id="box_content">
</div>
<div id="box_footer">_FOOTER_</div>
</body>
</html>

Thoretisch ist nun das Prinzip erklärt, aber wir können das ganze sogar noch ein wenig verfeinern, indem wir noch die news/index.php weiter aufteilen und somit die Funktionen trennen. Dazu haben wir ja schon die news/show.php angelegt und dazu packen wir noch eine news/comments.php. Sprich wir Trennen die Anzeigen von den News und den Kommentaren von einander. Da es einfacher ist einzelne Funktionen seperat zu bearbeiten.

Das verwirklichen wir mit einem neuen array() in der inc/config.php:

inc/config.php
PHP-Code:

<?php
// inc/config.php
 
    // Hauptsektionen ->
    $section = array(
        'news'=>'news/index.php'
    ;
 
    // News Untersektionen ->
    $news_site = array(
        'show'=>'news/show.php',
        'comments'=>'news/comments.php'
    ;
 
?>

Nun müssen wir, wie in der index.php (root), der news/index.php nur beibringen die news/show.php oder news/comments.php zu laden. Also schreiben wir nun folgenden Code in die news/index.php:

news/index.php
PHP-Code:

<?php
// news/index.php
 
    // Inhalt aufrufen ->
    if(isset($_GET['site']) AND isset($news_site[$_GET['site']])) {
        include $news_site[$_GET['site']];
    } else {
        include $news_site['show'];
    }
 
?>

Das Prinzip sollte klar sein. Aber wir haben ein neues Problem. Was passiert wenn der Besucher folgenden Link verwendet: "http://www.deine_url.de/news/"? Er bekommt unformatierten Inhalt und Fehlermeldungen zu sehen! Also umgehen wir das Problem ganz einfach, in dem wir eine zusätzliche Abfrage einfügen:

news/index.php
PHP-Code:

<?php
// news/index.php
 
    // Inhalt aufrufen ->
    if(isset($index) {
        if(isset($_GET['site']) AND isset($news_site[$_GET['site']])) {
            include $news_site[$_GET['site']];
        } else {
            include $news_site['show'];
        }
    } else {
        echo '<p align="center">Seite kann über diesen Link nicht angezeigt werden. Bitte verwenden kehren Sie zur <a href="../index.php">Hauptseite</a> zurück.</p>';
    }
 
?>

Nun wird als erstes geprüft ob die Variable $index vorhanden ist und erst dann der Inhalt gezeigt (weiter Unten findet Ihr die kürzere Variante der $index Abfrage). Diese müssen wir aber noch in der index.php einfügen:

index.php
PHP-Code:

<?php
// index.php
 
    // Includes ->
    include ('inc/config.php';
 
    $index = 'blabla'; // Hier kann stehen was will, Hauptsache die Variable ist definiert
 
?>
<html>
<head>
<title>_TITEL_</title>
</head>
<body>
<div id="box_header">_HEADER_</div>
<div id="box_navigation"><?php include('navigation.php';?></div>
<div id="box_content">
<?php
    // Inhalt laden ->
    if(isset($_GET['section']) AND isset($section[$_GET['section']])) {
        include $section[$_GET['section']];
    } else {
        include $section['news'];
    }    
?>
</div>
<div id="box_footer">_FOOTER_</div>
</body>
</html>

Nun sind wir auf der sicheren Seite und haben ein Frameset simuliert. Dazu kommt noch, dass wir uns eine menge Arbeit ersparen, in dem wir alle Elemente der Page einzeln bearbeiten können. Wir können jeder Zeit die Navigation anpassen und beliebig viele Sektionen und Untersektionen definieren. Einfach ein neues Array in die inc/config.php hinzufügen und die entsprechende Abfrage basteln und schon hat man die Seite um einen weiteren Bereich erweitert.

Zu den Untersektionen noch kurz was erklärt: Diese werden über folgenden Link abgerufen: "index.php?section=news&site=comments". Dieser Link läd die news/comments.php in die Contentbox. Wichtig dabei ist, dass "...?section=news" vorhanden ist, da sonst "...&site=comments" nicht verarbeitet wird, bzw. schlicht und ergreifend nicht vorhanden ist. So würde der Link "index.php?site=comments" nur zur Defaultpage führen.

Außerdem solltet Ihr darauf achten, das Ihr bevor Ihr Euch an den eigentlichen Code der Seite macht, die Variable "$index" abfragt. Da der Besucher sonst nur Fehlermeldungen zu sehen bekommt, wenn die Dateien direkt angesurft werden.

Hier nochmal die Syntax:

PHP-Code:

<?php
    if(!isset($index) {
        echo 'xyz'; // Hier Link und Fehlermeldung
        die();
    }
 
    // Ab hier dann der normale Code
?>

Die Fehlermeldung wird per "echo 'xyz';" ausgegeben. Der Befehl "die()" stoppt den Script komplett, so wird der Rest nicht weiter verarbeitet und so treten dann auch keine Fehler auf. In die Fehlermeldung packt Ihr nur noch den Link zur Hauptseite.

Jetzt haben wir einen schönen Aufbau der Seite und uns eine menge Zeit gespart. Aber der Titel der Seite ist leider noch ein wenig statisch, gibt also wenig Auskunft darüber wo man sich aktuell auf der Seite befindet. Das Problem können wir aber ganz leicht lösen:

index.php
PHP-Code:

<?php
// index.php
 
    // Includes ->
    include ('inc/config.php';
 
    $index = 'blabla'; // Hier kann stehen was will, Hauptsache die Variable ist definiert
 
?>
<html>
<head>
<title>
<?php
    // Titel ausgeben ->
           if(isset($_GET['section']) AND isset($sect_title[$_GET['section']])) {
        $titel = $sect_title[$_GET['section']];
    } else {
        $titel = 'News'; // Default Titel
    }
 
    echo $titel;
?>
</title>
</head>
<body>
<div id="box_header">_HEADER_</div>
<div id="box_navigation"><?php include('navigation.php';?></div>
<div id="box_content">
<?php
    // Inhalt laden ->
    if(isset($_GET['section']) AND isset($section[$_GET['section']])) {
        include $section[$_GET['section']];
    } else {
        include $section['news']; // Default Sektion
    }    
?>
</div>
<div id="box_footer">_FOOTER_</div>
</body>
</html>

Dem entsprechend erweitern wir die inc/config.php um folgende Einträge:

inc/config.php
PHP-Code:

<?php
// inc/config.php
 
    // Titel ->
    $sect_title = array(
        'news'=>'News'
    ;
 
    // Hauptsektionen ->
    $section = array(
        'news'=>'news/index.php'
    ;
 
    // News Untersektionen ->
    $news_site = array(
        'show'=>'news/show.php',
        'comments'=>'news/comments.php'
    ;
?>

Fertig ist das Grundgerüst Eurer Seite mit simulierten Frames und dynamischen Titel. Am Anfang ist diese Art zu arbeiten etwas Gewöhnungsbedürftig, aber man stellt sich schnell auf diese Art zu arbeiten ein und spart sich mit der Zeit eine menge Arbeit. Außerdem hilft es enorm die Übersicht zu behalten, wenn das Projekt wächst. Am besten probiert Ihr erst mal ein wenig mit diesem System herum, bevor Ihr Euer Projekt auf diese Weise aufbaut.

UPDATE: Array() in der config.php geändert. (Danke Thorim für den Hinweis!)

UPDATE 2, 28.10.2011: Auf scriptinstall.de (externe Seite) findet man PHP Programmierer, wenn man über das obige Tutorial hinausgehende Unterstützung rund um das Thema programmieren benötigt. Ausserdem bietet die Seite Informationen und Praxisbeispiele rund um die barrierefreie Entwicklung von Webseiten.

Kommentare Kommentar schreiben

Es wurden noch keine Kommentare geschrieben.