Skip to main content

Alles für die Homepage... Scripte, Templates, Workshops und Support

Erstellung einer auf PHP und Templates basierenden Webseite

Dieser Artikel beschreibt die Erstellung einer PHP basierten Webseite. Das Design soll hierbei über HTML Templates und CSS Anweisungen gesteuert werden. Das alles soll so aufgebaut sein das die Seite universell erweiterbar ist, und jederzeit mit neuen Funktionen ausgestattet werden kann.

1. Vorüberlegungen und Vorbereitungen

Bevor man ein solches Projekt startet, geht es zunächst einmal darum sich Gedanken über den Aufbau, die Funktionen und die später geplanten Inhalte der Seite zu machen.

Der Aufbau:

  • Das Layout der Webseite festlegen, wo und wie sollen Navigationselemente erscheinen, benötigte Abmessungen für bestimmte Bereiche festlegen usw.
  • Soll es mehrere Themengebiete geben die z.B. ein eigenes Menü benötigen
  • Sind erweiterte Funktionen geplant, z.B. Mitgliederbereich, Kommentarfunktionen etc.

Die Funktionen

  • Sollen nur einfache statische Inhalte präsentiert werden
  • oder sollen Inhalte aus einer Datenbank abgerufen werden können
  • auf welcher Seite und wie strukturiert sollen die Inhalte präsentiert werden
  • braucht es eine Administration um diese Daten anzulegen und zu verwalten
  • wenn ja, wer soll darauf wie zugreifen dürfen

Die Inhalte… z.B.

  • Startseite mit News
  • Downloadbereich
  • Artikel und Workshops
  • Datenbanken mit Adressen, Links, Rezepten, Tipps & Tricks…
  • Bildergalerien
  • Gästebuch
  • Kontaktformular und Impressum
  • uvam.

Benötigte Vorrausetzungen für diesen Workshop

  • HTML und CSS sollte man im reinen Quellcode verstehen
  • Interesse etwas über PHP und MySQL lernen zu wollen
  • Einen Quellcode/Texteditor der nicht eigenmächtig Code verändert. Dieser Punkt ist sehr wichtig, ansonsten kann es sein das Arbeit von Stunden dahin ist und aufwendiger Fehlerbehebung nötig wird. Tipp hierfür: PSPad (Freeware)
  • Speicherplatz im Web der PHP und MySQL Unterstützung bietet.

Die auf den folgenden Seiten dargestellte Umsetzung wird auf einem recht einfachen Layout beruhen, Ziel soll es ja zunächst einmal sein ein funktionierendes Grundgerüst zu erstellen. Dieses wird dann Schritt für Schritt erweitert. Fragen dazu bitte im Forum stellen, per Mail kann ich hierzu leider keinen Support leisten.

2. Ein Layout für die Seite erstellen

Zuerst wird für die Seite ein Layout mit dem HTML und CSS Code erstellt. Das im folgenden bereitgestellte Design soll die Arbeitsgrundlage für diesen Workshop sein. Deseiteren soll diese Datei zum erstellen und testen weiterer Designelemente genutzt werden.

1. Die index.html

CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

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


</head>
<body>
<div id="inhalt">

<table cellspacing="4" cellpadding="2" border="0" id="design">
<tr>
    <td colspan="2" id="head">Kopfbereich der Seite</td>
</tr>
<tr>
    <td id="tnleft" width="160">Navigation</td>
    <td id="tnright"width="740"></td>
</tr>
<tr>
    <td id="menue">
    
    <div class="menuelinks">
    <div class="aktuell">Startseite</div>
    <a href="#">Downloads</a>
    <a href="#">Kontakt</a>
    
    </div>
    
    
    
    <img src="images/pixel.gif" alt="" width="150" height="1" border="0"><br>
    </td>
    <td id="content">
    Seiteninhalt
</td>
</tr>
<tr>
    <td colspan="2" id="footer">Footer</td>
</tr>
</table>

</div>
</body>
</html>

2. Die style.css

CODE:
/* - - - - - - - - - - - - - - - - - - - - */
/* BODY */
/* - - - - - - - - - - - - - - - - - - - - */
body, html {
background: #F5F6F8;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
color: #000000;
margin: 0 0 5px 0;
padding: 0;
}
/* - - - - - - - - - - - - - - - - - - - - */
/* AEUSSERE CONTENTBOX */
/* - - - - - - - - - - - - - - - - - - - - */
#inhalt {
margin:10px auto;
text-align:left;
width: 600px;
padding: 2px;
background: #ffffff;
border: 1px solid #a4aed5;
}

/* - - - - - - - - - - - - - - - - - - - - */
/* DESIGN*/
/* - - - - - - - - - - - - - - - - - - - - */
#design {
width: 100%;
background: #ffffff;
}

#head {
background: #426fb9;
height: 75px;
text-align: center;
color: #ffffff;
}

#tnleft {
background: #c0c7de;
padding: 3px;
color: #000000;
}
#tnright {
background: #c0c7de;
padding: 3px;
color: #000000;
}

#menue {
background: #ffffff;
padding: 0px;
color: #000000;
vertical-align: top;
}

.menuelinks a {
display: block;
width: auto;
background: #eaeaea;
margin-bottom: 2px;
padding: 3px 0px 3px 4px;
color: #000000;
font-size: 11px;
font-weight: bold;
text-decoration: none;
border: 1px solid #d3d3d3;
}
.menuelinks a:hover {
background: #dae3ef;
text-decoration: none;
color: #6c6fae;
}

.menuelinks .aktuell {
display: block;
width: auto;
background: #ffcc00;
margin-bottom: 2px;
padding: 3px 0px 3px 4px;
font-size: 11px;
font-weight: bold;
border: 1px solid #cc6600;
}

#content {
background: #ffffff;
padding: 3px;
color: #000000;
vertical-align: top;
}


#footer {
background: #426fb9;
padding: 3px;
color: #ffffff;
text-align: center;
}

3. So sollte dann das Ergebis aussehen

xx

Download der Workshop Designvorlage workshop_dl01.zip

Im nächsten Teil des Workshops wird das Designtemplate in Einzeltemplates zerlegt und mit den Platzhaltern für die Scriptausgaben ausgestattet.

3. Erstellung der Templates aus der Designvorlage

Bevor begonnen wird die Designvorlage in Einzeltemplates zu zerlegen, sollte eine Verzeichnisstruktur für die Daten angelegt werden. Diese sollte für das Projekt zunächst so aufgebaut sein:

xx

In den Ordner /templates werden dann die CSS Datei, die Bilder und Grafiken für das Layout und die HTML Templates abgelegt.

xx

Die Templates erstellen und die Platzhalter einfügen
Die Platzhalter für die späteren Scriptausgaben sind hier blau hervorgehoben.

a) Die Datei header.html

CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title><%%SEITENTITEL%%></title>
<link rel="stylesheet" type="text/css" href="templates/style.css">
<%%ZUSATZCONTENT%%>

</head>
<body>

In dieser Datei ist außerdem noch der Link zur CSS Datei anzupassen (templates/style.css).

b) Die Datei layoutoben.html

CODE:
<!-- ANFANG LAYOUT OBEN -->
<div id="inhalt">
<table cellspacing="4" cellpadding="2" border="0" id="design">
<tr>
    <td colspan="2" id="head">Kopfbereich der Seite</td>
</tr>
<tr>
    <td id="tnleft" width="160">Navigation</td>
    <td id="tnright"width="740"><%%SEITENUEBERSCHRIFT%%></td>
</tr>
<tr>
    <td id="menue">
<!--  HAUPTMENUE ANFANG -->
    <div class="menuelinks">
    <%%MENUEAUSGABE%%>
    </div>
<!--  HAUPTMENUE ENDE -->    
    <img src="images/pixel.gif" alt="" width="150" height="1" border="0"><br>
    </td>
    <td id="content">
<!-- ENDE LAYOUT OBEN -->

c) Die Datei footer.html

CODE:
<!-- ANFANG FOOTER -->
    </td>
</tr>
<tr>
    <td colspan="2" id="footer"><%%FOOTERCONTENT%%></td>
</tr>
</table>

</div>
</body>
</html>

Diese 3 Dateien und die style.css werden nun, wie im Bild 2 gezeigt, in den Ordner templates gespeichert.

Der nächste Teil des Workshops behanndelt nun den PHP Code der das alles verarbeitet und es erst ermöglicht die Templates mit „Leben“ zu füllen.

4. Die Datei globale_funct.inc.php

Wie der Name schon vermuten lässt, dient die Datei globale_funct.inc.php dazu globale Funktionen für die Webseite bereitzustellen. Hierzu sei angemerkt das es bei größeren Projekten durchaus mehrere solcher Dateien, ausgestattet mit den unterschiedlichsten Funktionen, geben kann. Für unser kleines Webseitenprojekt reicht diese eine aber vorerst aus.

Eine Aufteilung in mehrere Dateien macht erst dann Sinn wenn in unterschiedlichen Bereichen stark voneinander abweichende Funktionalität realisiert werden soll. Das könnte z.B. in einen Forum der Fall sein. Hier sind dann z.B. Funktionen für die Mitgliederverwaltung, das schreiben und bearbeiten von Beiträgen, Suchfunktionen uvam. möglich.

Die komplette Datei globale_funct.inc.php
Erklärungen zu den einzelnen Bereichen folgen unterhalb.

CODE:
<?php
error_reporting(E_ALL & ~E_NOTICE);

if (!defined('SCRIPTNAME')) {
echo 'Unzul&auml;ssiger Scriptaufruf';
exit;
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// Templatedaten holen fuer Templates ohne Ersatzvariablen
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
function get_tdata($tmplname) {
if(file_exists($tmplname)) {
$lines = implode("",file($tmplname));
return $lines;
} else {
print_scripterror("Fehler!", "Die Datei: $tmplname kann nicht ge&ouml;ffnet werden");
exit;
}
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// Templateinhalt holen fuer Einzelausgaben und Ausgaben in
// while, for und foreach Schleifen
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
function get_tpldata($templatename) {

if(file_exists($templatename)) {
$templatecontent = file($templatename);
return $templatecontent;
} else {
print_scripterror("Fehler!", "Die Datei: $templatename kann nicht ge&ouml;ffnet werden");
exit;
}
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// Templateparser
// Aufrufbeispiel:
// echo $tp_content_out = templateparser($templatecontent, $wertearray);
// $templatecontent     = Template HTML Code
// $wertearray             = Zu ersetztende Platzhalterdaten
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
function templateparser($templatedatei, $wertearray) { 

if(is_array($wertearray)) {
foreach($wertearray as $key => $value) { 
$suchmuster = "/<%%(".strtoupper($key).")%%>/si";

// Gefundene Platzhalter mit Werten aus $wertearray ersetzen
$templatedatei = preg_replace($suchmuster, $value, $templatedatei); 
} 
// Nicht ersetzte Platzhalter aus Template entfernen
$templatedatei = preg_replace("/((<%%)(.+?)(%%>))/si", '', $templatedatei);
}

return (implode("", $templatedatei)); 
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// Globaler Header
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
function globaler_header($seitentitel ='', $zusatzcontent ='') {

$contentarray = array(
"SEITENTITEL"         => $seitentitel,
"ZUSATZCONTENT"     => $zusatzcontent
); 
// Templatename
$templatecontent = get_tpldata("templates/header.html");
return $tp_content_out = templateparser($templatecontent, $contentarray);
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// Globales oberes Layout
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
function globallayoutoben($seitentitel = '', $navimenue = '', $navlink = '') {

$contentarray = array(
"SEITENUEBERSCHRIFT"     => $seitentitel,
"MENUEAUSGABE"             => get_navi($navimenue, $navlink)
); 
// Templatename
$templatecontent = get_tpldata("templates/layoutoben.html");
return $tp_content_out = templateparser($templatecontent, $contentarray);
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// Globaler Footer
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
function globaler_footer() {

// Templatename
$contentarray = array(
"FOOTERCONTENT"     => 'Footerinhalt'
);
$templatecontent = get_tpldata("templates/footer.html");
return $tp_content_out = templateparser($templatecontent, $contentarray);

}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// Navigation
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
function get_navi($navimenue = '' , $aktiverlink = '') {

if ($navimenue == 'HAUPTMENUE') {

    $menuedaten = array(
    'index'         => 'Startseite',
    'dlseite1'         => 'Downloads',
    'kontakt'         => 'Kontakt'
    );

} elseif ($navimenue == 'DOWNLOADMENUE') {

    $menuedaten = array(
    'index'         => 'Startseite',
    'dlseite1'         => 'Downloadseite 1',
    'dlseite2'         => 'Downloadseite 2',
    'dlseite3'         => 'Downloadseite 3'
    );

}

while(list($key, $val) = each($menuedaten)) {

    if ($key != $aktiverlink) {
    $menuelinks .= "<a href=\"$key.php\">$val</a>\n";
    } else {
    $menuelinks .= "<div class=\"aktuell\">$val</div>\n";
    }

}
return $menuelinks;
}


// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// Scripterror
// Sofortiger Scriptabbruch bei Fehlern
// gibt einfache HTML Seite aus mit Fehlerhinweisen 
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
function print_scripterror($titel = '', $fehlertext = '') {

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title><?php echo $titel; ?></title>

<style type="text/css">
body {
background-color: #f7f7f7;
font-family: Verdana, Arial;
font-size: 12px;
color: #000000;
}
.err {
background-color: #000000;
}
.errtop {
background-color: #ffcc00;
font-size: 12px;
color: #000000;
padding: 4px;
}

.errcont {
background-color: #ffffff;
font-size: 12px;
color: #000000;
padding: 4px;
}
</style>

</head>
<body>
<div align="center">
<table cellspacing="1" cellpadding="0" border="0" width="600" class="err">
<tr>
    <td class="errtop"><b><?php echo $titel; ?></b></td>
</tr>
<tr>
    <td class="errcont"><?php echo $fehlertext; ?></td>
</tr>
</table>
</div>
</body>
</html>
<?php
exit;
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
?>

Erläuterungen zu den einzelnen Bereichen dieser Datei

a) der Kopf der Datei 

CODE:
<?php
error_reporting(E_ALL & ~E_NOTICE);

if (!defined('SCRIPTNAME')) {
echo 'Unzul&auml;ssiger Scriptaufruf';
exit;
}

Hier wird zunächst das Error Reporting eingeschaltet, danach folgt ein Sicherheitstest der die Datei vor dem alleinigen Aufruf schützt. Ruft ein User die Datei direkt im Browser auf, bricht das Script sofort mit der Meldung „Unzulässiger Scriptaufruf“ ab.

b) die function get_tdata 

CODE:
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// Templatedaten holen fuer Templates ohne Ersatzvariablen
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
function get_tdata($tmplname) {
if(file_exists($tmplname)) {
$lines = implode("",file($tmplname));
return $lines;
} else {
print_scripterror("Fehler!", "Die Datei: $tmplname kann nicht ge&ouml;ffnet werden");
exit;
}
}

Diese function dient dazu einfache Dateiaufrufe oder Templates ohne Ersatzvariablen zu realisieren. Dazu wird die aufgerufene Datei einfach per implode in einen String eingelesen. Wurde die betreffende Datei nicht gefunden springt die Errorroutine an und gibt die entsprechende Fehlermeldung aus.

c) die function get_tpldata 

CODE:
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// Templateinhalt holen fuer Einzelausgaben und Ausgaben in
// while, for und foreach Schleifen
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
function get_tpldata($templatename) {

if(file_exists($templatename)) {
$templatecontent = file($templatename);
return $templatecontent;
} else {
print_scripterror("Fehler!", "Die Datei: $templatename kann nicht ge&ouml;ffnet werden");
exit;
}
}

Diese function ist ähnlich der vorherigen, hier wird aber der Inhalt der Datei von der eigentlichen Templateparser Routine weiterverarbeitet.

d) die function templateparser 

CODE:
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// Templateparser
// Aufrufbeispiel:
// echo $tp_content_out = templateparser($templatecontent, $wertearray);
// $templatecontent     = Template HTML Code
// $wertearray             = Zu ersetztende Platzhalterdaten
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
function templateparser($templatedatei, $wertearray) { 

if(is_array($wertearray)) {
foreach($wertearray as $key => $value) { 
$suchmuster = "/<%%(".strtoupper($key).")%%>/si";

// Gefundene Platzhalter mit Werten aus $wertearray ersetzen
$templatedatei = preg_replace($suchmuster, $value, $templatedatei); 
} 
// Nicht ersetzte Platzhalter aus Template entfernen
$templatedatei = preg_replace("/((<%%)(.+?)(%%>))/si", '', $templatedatei);
}

return (implode("", $templatedatei)); 
}

Diese function ist quasi das Herzstück der Templateverarbeitung. Dieser Codeblock empfängt die Werte der vorher ausgelesenen Templatedatei und ein Array von Werten, die in diesem Template eingefügt werden sollen. Hier kommen dann die Platzhalter ins Spiel die in den Templates definiert wurden. Preg_replace ersetzt dann zunächst alle gefundenen und existierenden Werte mit den Daten des Arrays, sollte ein Platzhalter hier nicht belegt sein, oder er wurde vergessen – wird der Platzhaltercode entfernt. Dies ist nötig um unschöne Fehlausgaben im Browser zu vermeiden.

e) die function globaler_header, globallayoutoben und globaler_footer

CODE:
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// Globaler Header
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
function globaler_header($seitentitel ='', $zusatzcontent ='') {

$contentarray = array(
"SEITENTITEL"         => $seitentitel,
"ZUSATZCONTENT"     => $zusatzcontent
); 
// Templatename
$templatecontent = get_tpldata("templates/header.html");
return $tp_content_out = templateparser($templatecontent, $contentarray);
}

Die Funktionsweise:
Die function empfängt hier 2 Werte $seitentitel und $zusatzcontent. Diese werden den entsprechenden Namen der Platzhalter zugeordnet im $contentarray so das ein Assoziatives Array aufgebaut wird. Dann wird die Templatedatei in $templatecontent gelesen und per $tp_content_out = templateparser wird der templateparser aufgerufen. Die fertige Arbeit wird dann per return in der eigentlichen Seite ausgegeben.

f) die function get_navi

CODE:
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// Navigation
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
function get_navi($navimenue = '' , $aktiverlink = '') {

if ($navimenue == 'HAUPTMENUE') {

    $menuedaten = array(
    'index'         => 'Startseite',
    'dlseite1'         => 'Downloads',
    'kontakt'         => 'Kontakt'
    );

} elseif ($navimenue == 'DOWNLOADMENUE') {

    $menuedaten = array(
    'index'         => 'Startseite',
    'dlseite1'         => 'Downloadseite 1',
    'dlseite2'         => 'Downloadseite 2',
    'dlseite3'         => 'Downloadseite 3'
    );

}

while(list($key, $val) = each($menuedaten)) {

    if ($key != $aktiverlink) {
    $menuelinks .= "<a href=\"$key.php\">$val</a>\n";
    } else {
    $menuelinks .= "<div class=\"aktuell\">$val</div>\n";
    }

}
return $menuelinks;
}

In diesem Bereich wird das Menü aufgerufen und entsprechend den übergebenen Parametern zurückgeliefert. In dem IF – ELSEIF Block, der auch beliebig erweiterbar ist, sind als Assoziatives Array die namen der Dateien und der Text des Linkes notiert (z.B. ‚kontakt‘ => ‚Kontakt‘)

Wird nun als Menüparameter HAUPTMENUE und als Parameter für den aktiv zu setzenden Link kontakt übergeben, durchläuft die while Schleife das Array, erstellt den HTML Code für die Links und setzt den Link der aktiv erscheinen soll mit der entsprechenden Formatierung um. Diese funktion macht es dann leicht möglich unterschiedliche Menüs für verschiedene Hauptbereiche der Seite zu definieren. Natürlich kann man bei einer kleinen Webseite auch alles in ein Navigationsarray packen.

Die Ausgabe sieht dann, je nach Seitenaufruf, so aus:

Besucher auf der Startseite

xx

Besucher im Downloadbereich der Seite mit eigenem Menü

xx

g) die function print_scripterror

Diese Routine dient dazu etwaige Fehler auszugeben. Da Fehler meist einen sofortigen Scriptabbruch bewirken wurde die Fehlerroutine mit etwas eigenem HTML Code ausgestattet.

Im nächsten Workshopteil geht es nun in den Endspurt, das Anlegen der eigentlichen Seiten…

5. Anlegen der Seiten

So, nun zum eher angenehmen Teil, dem anlegen der Seiten für unsere Webseite. Alle Seiten sind nach diesem Schema aufgebaut:

Diesen Code als index.php abspeichern

CODE:
<?php

error_reporting(E_ALL & ~E_NOTICE);
define('SCRIPTNAME', 'index');

include_once "includes/globale_funct.inc.php";

// Seitenheader und Layout oben
echo globaler_header('Homepage', '');
echo globallayoutoben('Willkommen', 'HAUPTMENUE', SCRIPTNAME);
?>
<!-- INHALTE DER SEITE -->

<!-- INHALTE DER SEITE -->
<?php
// Seitenfooter
echo globaler_footer();
?>

Im Browser aufgerufen ergibt sich diese Ausgabe:

xx

Die Abschitte des Codes im Detail

CODE:
error_reporting(E_ALL & ~E_NOTICE);
define('SCRIPTNAME', 'index');

Error Reporting anschalten und Name der Seite definieren

CODE:
include_once "includes/globale_funct.inc.php";

Einbinden der Datei globale_funct.inc.php

CODE:
// Seitenheader und Layout oben
echo globaler_header('Homepage', '');
echo globallayoutoben('Willkommen', 'HAUPTMENUE', SCRIPTNAME);

Seitenheader und oberes Seitenlayout aufrufen.

Hier werden nun die in der globale_funct.inc.php bereitgestellten functionen mit Werten aufgerufen.

1. Homepage Erscheint im Browserfenster als Seitentitel
2. Willkommen Erscheint als Seitenüberschrift/text
3. HAUPTMENUE und SCRIPTNAME sind die Werte für das Seitenmenü, bzw. die Steuerung welcher Link im Menü als aktiv hervorgehoben wird

CODE:
<!-- INHALTE DER SEITE -->

<!-- INHALTE DER SEITE -->

Hier kann jetzt entweder ganz normaler HTML Code notiert werden, oder aber auch dynamisch erstellte Scriptausgaben (z.B. die Daten eines Gästebuches).

CODE:
<?php
// Seitenfooter
echo globaler_footer();
?>

Die Seite wird beendet durch den Aufruf des Footers.

Der gesamte HTML Code der generierten Seite sieht dann so aus:

CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

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


</head>
<body>
<!-- ANFANG LAYOUT OBEN -->
<div id="inhalt">
<table cellspacing="4" cellpadding="2" border="0" id="design">
<tr>
    <td colspan="2" id="head">Kopfbereich der Seite</td>
</tr>
<tr>
    <td id="tnleft" width="160">Navigation</td>
    <td id="tnright"width="740">Willkommen</td>
</tr>
<tr>
    <td id="menue">
<!-- HAUPTMENUE ANFANG -->
    <div class="menuelinks">
<div class="aktuell">Startseite</div>
<a href="dlseite1.php">Downloads</a>
<a href="kontakt.php">Kontakt</a>

    </div>
<!-- HAUPTMENUE ENDE -->    
    <img src="images/pixel.gif" alt="" width="150" height="1" border="0"><br>
    </td>
    <td id="content">
<!-- ENDE LAYOUT OBEN -->

<!-- INHALTE DER SEITE -->

<!-- INHALTE DER SEITE -->

<!-- ANFANG FOOTER -->    
    </td>
</tr>
<tr>
    <td colspan="2" id="footer">Footerinhalt</td>
</tr>
</table>

</div>
</body>
</html>

Die fett markierten Stellen sind die Stellen an denen Platzhalter durch Content ersetzt wurde.

So sollte dann die Verzeichnis und Dateistruktur aussehen wenn das Projekt mit ein paar Seiten ausgestattet wurde.

xx

Hier kann das ganze Webseiten Projekt heruntergeladen werden Download Datei webseite.zip

6. Eine Seite dynamisch mit Inhalt füllen

Hier soll anhand eines kleinen Bespieles gezeigt werden wie man etws Leben in die Seite bringt. Dazu sollen Verzeichnisse mit Bildern ausgelesen werden, die Ausgabe soll dann in einer Tabelle erfolgen.

Die Aufgabenstellung gliedert sich hier in drei Hauptschritte:

1. Anlegen einer Routine für die Datei globale_funct.inc.php
2. Abruf der Daten in den 3 Downloadseiten unseres Homepageprojektes.
3. Die Bilder die ausgelesen werden sollten sich hier im Verzeichnis images/ befinden.

xx

1. Anlegen einer Routine für die Datei globale_funct.inc.php
Dieser Code liest das übergebene Verzeichnis, hier flaggen aus, pusht die Inhalte in ein Array und schreibt danach den Tabellencode. Dieser beinhaltet als erste Zeile den Titel $titel

CODE:
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// Bilder auslesen
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
function bilder($verzeichnisname, $titel) {

$DIR = opendir( "images/$verzeichnisname"); 
$anz = 0;
$bilder = array();
while (($file = readdir( $DIR )) !== false ) { 

// Dateien 
if(eregi('(\.jpg|\.gif|\.png)$', $file, $treffer)){ 
$anz++;

array_push($bilder, $file);

} 
} 
closedir ($DIR);


$spalten = 3;

$htmlcode = "<table border=\"1\" width=\"100%\">\n<tr>\n\t<td colspan=\"$spalten\"><b>$titel</b></td>\n</tr>\n";

$tab_spalten = $spalten;

for($i = 0; $i < count($bilder); $i++) {

$img = "<img src=\"images/$verzeichnisname/$bilder[$i]\" border=\"0\" alt=\"$bilder[$i]\"><br><span style=\"font-size:11px\">$bilder[$i]</span>";

if($tab_spalten == $spalten) {
$htmlcode .= "<tr>\n\t<td>$img</td>\n";
$tab_spalten--;

} elseif ($tab_spalten != 1) {

$htmlcode .= "\t<td>$img</td>\n";
$tab_spalten--;    

} else {
$htmlcode .= "\t<td>$img</td>\n</tr>\n";
$tab_spalten = $spalten;
}
 
}

if($tab_spalten != 0 && $tab_spalten != $spalten) {
$htmlcode .=  str_repeat("\t<td>&nbsp;</td>\n" , $tab_spalten) . "</tr>\n";
}

$htmlcode .= "</table>\n";

return $htmlcode;
}

2. Abruf der Daten in den 3 Downloadseiten unseres Homepageprojektes. Durch die Routine in der Datei globale_funct.inc.php ist hier nur noch der Abruf der Daten einzubauen mit echo bilder(‚flaggen‘, ‚Flaggen‘);. Der Erste Wert ist hier das auszulesende Verzeichnis, der zweite wird als Titel in der Tabelle verwendet.

CODE:
<?php

error_reporting(E_ALL & ~E_NOTICE);
define('SCRIPTNAME', 'dlseite1');

include_once "includes/globale_funct.inc.php";

// Seitenheader und Layout oben
echo globaler_header('Downloads', '');
echo globallayoutoben('Downloadseite 1', 'DOWNLOADMENUE', SCRIPTNAME);

echo bilder('flaggen', 'Flaggen');

// Seitenfooter
echo globaler_footer();
?>

3. Das Ergebnis…

xx
Anzeige


Ähnliche Beiträge



Keine Kommentare vorhanden


Du hast eine Frage oder eine Meinung zum Artikel? Teile sie mit uns!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *