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.
Aktuelle Mac Air Angebote
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
<!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
/* - - - - - - - - - - - - - - - - - - - - */
/* 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
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:
In den Ordner /templates werden dann die CSS Datei, die Bilder und Grafiken für das Layout und die HTML Templates abgelegt.
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
<!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
<!-- 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
<!-- 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.
<?php
error_reporting(E_ALL & ~E_NOTICE);
if (!defined('SCRIPTNAME')) {
echo 'Unzulä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ö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ö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
<?php
error_reporting(E_ALL & ~E_NOTICE);
if (!defined('SCRIPTNAME')) {
echo 'Unzulä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
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// 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ö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
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// 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ö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
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// 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
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// 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
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// 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
Besucher im Downloadbereich der Seite mit eigenem Menü
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
<?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:
Die Abschitte des Codes im Detail
error_reporting(E_ALL & ~E_NOTICE);
define('SCRIPTNAME', 'index');
Error Reporting anschalten und Name der Seite definieren
include_once "includes/globale_funct.inc.php";
Einbinden der Datei globale_funct.inc.php
// 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
<!-- 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).
<?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:
<!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.
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.
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
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
// 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> </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.
<?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();
?>
Weitere Beiträge
Amazon Oster-Angebote – erste Angebote sind verfügbar
Amazon Oster-Angebote: Ostern steht vor der Tür. Eine gute Gelegenheit, um die Wohnung oder den Arbeitsplatz bunter zu gestalten. Auch der Frühjahrsputz steht vor der Tür. Die Amazon Osterangebote vom 20. bis 25. März bieten attraktive Rabatte auf Elektronik, Haus & Garten, Spielwaren und mehr. Schneller Versand inklusive! Die ersten Angebote sind bereits verfügbar – […]
Das neue MacBook Air 2024 mit M3 Chip bei Amazon
MacBook Air 2024. Apple präsentierte überraschend die neuen MacBook Air Modelle mit dem leistungsstarken M3 Chip. Neben der besseren Hardware, die deutlich schneller ist als die Rechner der Konkurrenz, wurde vor allem die Tatsache begrüßt, dass das Macbook endlich mit zwei externen Monitoren funktioniert. Erfreulich ist, dass die neuen MacBooks bereits bei Amazon bestellt werden […]
Last Minute Angebote von Amazon
Wer noch auf der Suche nach dem passenden Weihnachtsgeschenk ist, ist bei den Last-Minute-Angeboten von Amazon genau richtig. Egal, ob Sie noch nicht wissen, was Sie schenken sollen, oder einfach ein Schnäppchen machen wollen – bei den Last-Minute-Angeboten werden Sie garantiert fündig.
Amazon Black Friday Woche startet
Auch in diesem Jahr präsentiert Amazon während der Black Friday Woche wieder erstklassige Schnäppchen in allen Kategorien. Kundinnen und Kunden können sich auf einzigartige Geschenkideen und interessante Angebote für die bevorstehende Weihnachtszeit freuen. Darüber hinaus gibt es eine Vielzahl weiterer Produkte mit attraktiven Preisnachlässen – und das elf Tage lang. Ab Freitag, den 17. November […]
Keine Kommentare vorhanden