Webdesign Guide - Awakening the biest
In diesem Teil des Webdesign Guide geht es darum die erste lauffähige Version unserer Webanwendung zu programmieren. Dazu kommen wir natürlich nicht umher die Grundstrukur in unserer index.php zu definieren und zum ersten mal auf Smarty zuzugreifen.
Index.php - Strukur und Aufbau unserer Engine
Bevor wir uns nun mit dem Grundgerüst unserer Webanwendung beschäftigen brauchen wir erstmal noch drei weitere Ordner in unserem Root-Verzeichnis, dabei handelt es sich um den Ordner “classes“, den Ordner “filesystem” und um den Ordner “includes“.
Demnach sollte unser Server nun folgende Struktur haben:
- root
– Auth
– classes
– DB
– filesystem
– HTML
– includes
– Mail
– smarty
– .htaccess
– index.php
Im Ordner “includes” legen wir nun die Datei “config.php” an die brauchen wir später um unsere Verbindungsdaten abzulegen. Dann wechseln wir in folgenden Unterordner: “smarty -> templates” und erstellen darin zwei leere Dateien mit Namen:
- header.tpl
- footer.tpl
Jetzt und erst jetzt fügt ihr folgenden Code in eure Index.php ein (die Erklärung zum Code und warum dann trotzdem noch nichts angezeigt wird, erfolgt danach):
/* Start Index.php */
<?php
require_once('smarty/libs/Smarty.class.php');
require_once('includes/config.php');
require_once('Auth/Auth.php');
require_once ('DB/DB.php');
$smarty = new Smarty;
$smarty->template_dir = "smarty/templates/";
$smarty->config_dir = "smarty/configs/";
$smarty->cache_dir = "smarty/cache/";
$smarty->compile_dir = "smarty/templates_c/";
$_action = isset($_REQUEST['action']) ? $_REQUEST['action'] : 'index';
switch($_action) {
case 'register':
require_once('includes/register.php');
break;
case 'profile':
require_once('includes/profile.php');
break;
case 'login':
case 'logout':
require_once('includes/login.php');
break;
case 'contact_mail':
require_once('includes/mail.php');
break;
case 'password_lost':
require_once('includes/password_lost.php');
break;
case 'thanks':
require_once('includes/thanks.php');
break;
case 'index':
default:
break;
}
$smarty->display('header.tpl');
switch($_action) {
case 'register':
$smarty->display('regform.tpl');
break;
case 'profile':
$smarty->display('profile.tpl');
break;
case 'login':
case 'logout':
$smarty->display('loginform.tpl');
break;
case 'contact_mail':
$smarty->display('contact_mail.tpl');
break;
case 'password_lost':
$smarty->display('password_lost.tpl');
break;
case 'thanks':
$smarty->display('thanks.tpl');
break;
case 'index':
default:
// $smarty->display('index.tpl');
break;
}
$smarty->display('footer.tpl');
?>
/* Ende Index.php */
Wer nun seine Domain aufruft wird feststellen, das noch nichts ausgegeben wird und das ist auch gut, denn dann wurde (hoffentlich) alles richtig eingerichtet. Sollte eine Fehlermeldung ausgegeben werden dann bekommt man meist genug Informationen über die Fehlermeldung um den Fehler selbst zu beheben, häufig liegt es daran das eine Datei vergessen oder ein Verzeichnisname falsch geschrieben wurde.
Nun gut, gehen wir mal den Quellcode durch:
require_once('smarty/libs/Smarty.class.php');
require_once('includes/config.php');
require_once('Auth/Auth.php');
require_once ('DB/DB.php');
In diesem Part laden wir alle benötigten Klassen in unser Projekt, neben der Smarty-Klasse und zwei Klassen aus der PEAR-Bibliothek (Auth und DB) fügen wir zudem noch eine Konfigurationsdatei in unser Projekt ein, bislang ist die Datei noch leer, aber später werden wir darin die Verbindungsdaten zu unserer Datenbank definieren und noch andere “Kleinigkeiten” die in unserem Projekt global zum Einsatz kommen.
$smarty = new Smarty;
$smarty->template_dir = "smarty/templates/";
$smarty->config_dir = "smarty/configs/";
$smarty->cache_dir = "smarty/cache/";
$smarty->compile_dir = "smarty/templates_c/";
Um Smarty zum Laufen zu kriegen reicht es nicht aus nur die Smarty-Klasse einzubinden (wie oben geschehen), man muss zusätzlich eine Instanz der Smarty-Klasse erzeugen (mittels: “$smarty = new Smarty“) und dieser Instanz sagen wo sich innerhalb unserer Struktur welcher Ordner befindet. Smarty muss wissen wo sich folgende Ordner befinden:
- Template Ordner - hier werden später die Templates abgelegt, die wir in der index.php dann aufrufen
- Config Ordner - erstmal nicht weiter von Interesse
- Cache Ordner - habe selbst noch nicht herausgefunden wozu dieser dient, denn die gecachten Dateien werden eigentlich im Ordner Templates_c abgelegt
- Templates_c Ordner - hier liegen die gecachten Dateien
$_action = isset($_REQUEST['action']) ? $_REQUEST['action'] : 'index';
Hiermit steuern wir unsere Webanwendung, je nachdem welcher Wert hier übergeben wird, wird dazu die betroffene Seite ausgegeben. Den Wert für die Seite (also den “Action”-Wert) erhalten wir später direkt über htaccess und unserer Mod-Rewrite-Engine.
Den restlichen Quellcode erläutere ich nun im gesamten und dieser ist essentiell um die Zusammenarbeit zwischen Smarty und PHP zu verstehen, also aufgepasst:
Bevor wir mit “$smarty->display()” eine Datei anzeigen können, müssen wir erstmal alle benötigten PHP-Dateien eingebunden haben, darum habe ich die Engine der Webanwendung in zwei Teile gesplittet, diese werden durch die beiden “switch”-Blöcke dargestellt. Der erste “switch”-Block ist dafür da, die richtige PHP-Datei in unsere Webanwendung einzubinden und der Wert dafür steht in der Variablen “$_action”. Beispielsweise: ruft man die eigene Webanwendung unter folgender URL auf “http://domain.de/index.php?action=profil” so erhält die Variable $_action den Wert “profil”. Diese URL-Form wird allerdings später durch eine suchmaschinen-optimierte Variante ausgetauscht, doch das passiert im htaccess Teil des Webdesign Guide.
Bevor ich zum zweiten Teil der Engine komme, der für die eigentliche Ausgabe der Website durch Smarty zuständig ist, noch eine kurze Erklärung für die Splittung: Bevor auch nur eine Ausgabe mittels Smarty erfolgt muss jeglicher PHP-Kram abgearbeitet sein, denn sonst kann es schnell passieren das man einen ärgerlichen “headers already sent” Fehler erhält.
Im zweiten “switch”-Block nutzen wir Smarty um, abhängig vom Wert der Steuerungs-Variablen “$_action”, die benötigten Templates auszugeben. Erhält die Steuerungsvariable “$_action” also den Wert “profile” dann wird im ersten “switch”-Block die Datei “profile.php” eingebunden (diese Datei existiert noch nicht und erzeugt daher auch eine Fehlermeldung bei einem manuellen Aufruf im Browser). Im zweiten “Switch”-Block wird dann das dazugehörige Template an den Ausgabe-Teil der Smarty-Engine geschickt und dieser, wenn alles glatt läuft, im Browser angezeigt (funktioniert hier noch nicht da die Dateien alle noch nicht vorhanden sind). So können wir beliebig viele Module für unsere Webanwendung erstellen und durch ein einfaches hinzufügen in beiden “switch”-Blöcken die Funktionalität unserer Webanwendung erweitern.
Dem aufmerksamen Beobachter dürfte aufgefallen sein, das vor und nach dem zweiten “switch”-Block jeweils eine Smarty-Anweisung steht. In der ersten lassen wir die Datei “header.tpl” anzeigen und in der zweiten die “footer.tpl”. Das hat etwas mit der späteren Struktur unserer Webanwendung zu tun, um dies zu verdeutlichen zeige ich hier das Wireframe:
Wie man sieht sind header, menue und footer (also kopfbereich, Menü und fußbereich) unserer Webanwendung statisch. Das soll jetzt nicht heißen das auf jeder Unterseiter dort die gleichen Informationen stehen, es soll nur heißen das hier immer die Dateien header.tpl, footer.tpl und menue.tpl angezeigt werden. Im Gegensatz dazu ruft Smarty im rechten Bereich unterschiedliceh Templates auf, abhängig vom Wert der Variablen “$_action”.
Das war es jetzt erstmal mit der Index.php, beschäftigen wir uns nun kurz mit den beiden Templates “header.tpl” und footer.tpl”.
Template-Spielereien - Modifizieren von header.tpl und footer.tpl
Um diese beiden Dateien zu modifizieren wechseln wir in das Smarty-Template-Verzeichnis “smarty -> templates” (vom Root aus). Wir schreiben in die header.tpl folgenden Code:
/* Start header.tpl */
<html>
<head>
<title>Meine Webanwendung</title>
</head>
<body>
/* Ende header.tpl */
und in die footer.tpl diesen hier:
/* Start header.tpl */
</body>
</html>
/* Ende header.tpl */
Da der Code recht unspektakulär ist, werde ich nicht weiter darauf eingehen. Später wird aber, vorallem in die header.tpl, noch einiges an Dynamik reinkommen, gerade der Titel sollte nicht auf jeder Unterseite gleich sein, da man sonst einiges an SEO-Credits verschenkt.
Rufen wir nun unsere Webanwendung auf sehen wir bis auf einen Titel keine Änderung, ein kurzer Blick in den Quellcode zeigt uns aber, das wir zumindest schonmal einen Rahmen für unsere Website haben.
Hello World
Wie schon versprochen wird unsere erste Ausgabe die in Programmiererkreisen typische “Hello World”-Ausgabe sein. Dazu wechselt nochmal schnell in die index.php und sucht im zweiten “switch”-Block nach der Zeile:
// $smarty->display('index.tpl');
Löscht die beiden “Slash”-Zeichen am anfang der Zeile die den Rest der Zeile auskommentieren, speichert die Datei und wechselt dann in den Smarty-Template-Ordner. Dort erstellt ihr nun die Datei “index.tpl” und fügt folgenden Inhalt ein:
Hello World
Ruft ihr nun eure Webanwendung auf, sollte euch die Kombination “Hello World” ausgegeben werden.
Das war es für diesen Part, doch was haben wir erreicht? Lediglich die Ausgabe von zwei Wörtern im Browser? Auf den ersten Blick, ja! Doch wenn man nochmal unter die Haube schaut sehen wir dort eine voll-funktionstüchtige Smarty-Engine arbeiten, ein leicht erweiterungs-fähiges Grundgerüst (index.php) mit der Möglichkeit spätere Verweise/Links suchmaschinen-optimiert darzustellen. Wir haben nun alles angelegt um voll durchstarten zu können, unsere Ordnerstruktur steht und alle benötigten Klassen sind schon eingebunden. In diesem Teil haben wir unserer Webanwendung Leben eingehaucht und im über-nächsten wird unser Baby seine ersten Schritte wagen. Doch bevor es soweit ist widmen wir uns htaccess und Mod Rewrite, das zögert den Spaß zwar heraus, wird uns aber im späteren Einsatz enorm nützlich sein.
Verwandte Artikel
- Webdesign Guide - Modul: Kontaktformular und Dankesseite
- Webdesign Guide - Eintragsformular und Webnotizen
- Webdesign Guide - User-Modul: Login
- Webdesign Guide - Hinweise
- Webdesign Guide - Ajax für das Volk - Scriptaculous und Prototype im Einsatz
- Pingback: Webdesign Guide - Programmieren einer eigenen Web-Anwendung mit PHP, MySQL, Smarty, Pear, ModRewrite » Webdesignblog on Dezember 11, 2006
13 Kommentare
Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.
1. verzeichnisstruktur
wir legen unsere daten NICHT ins htdocs. NEIN machen wir nicht:
- htdocs
- - css
- - images
- - js
- templates
- includes
- - smarty
- - *misc class directories
- cache
2. index.php
wir arbeiten mit einem modell und einem controller.
im modell stehen alle funktionen im controller wird entschieden was getan wird.
$cache['time'] ) ) {
ob_start(); readfile( $cache['file'] ); ob_flush(); ob_end_clean(); exit;
}
ob_start();
}
require_once( ‘../inc/globals.php’ );
require_once( ‘../inc/modell.php’ );
require_once( ‘../inc/controller.php’ );
if( $cache['on'] ) {
$cache_output = ob_get_contents();
ob_end_clean();
file_put_contents( $cache['file'], $cache_output );
echo $cache_output;
}
exit;
?>
3. die config
wir legen ein paar daten fest für unser mini-dummy caching system und ein paar andere werte:
$item ) {
if( strpos( $item, ‘.html’ ) !== false ) {
$conf['file'] = $conf['path'][$key];
unset( $conf['path'][$key] );
}
}
if( empty( $conf['path'][count($conf['path'])-1] ) ) {
unset( $conf['path'][count($conf['path'])-1] );
}
$conf['db']['host'] = ‘localhost’;
$conf['db']['user'] = ‘user’;
$conf['db']['pass'] = ‘pass’;
$conf['db']['db'] = ‘database’;
mysql_connect( $conf['db']['host'], $conf['db']['user'], $conf['db']['pass'] );
mysql_select_db( $conf['db']['db'] );
?>
4. der controller
template_dir = array( ‘../templates’, ‘.’ );
$smarty->compile_dir = ‘../templates/smarty_compiled’;
$smarty->cache_dir = ‘../templates/smarty_cache’;
$smarty->config_dir = ‘../templates/smarty_configs’;
$page['content'] = ‘404′;
if( empty( $conf['path'][0] ) && empty( $conf['file'] ) ) {
$page['content'] = ‘content_start’;
}
elseif( $conf['file'] == ‘impressum’ ) {
$page['content'] = ’static_impressum’;
}
elseif( $conf['file'] ) {
if( ( strpos( $conf['file'], ‘..’ ) === false )
&& file_exists( $smarty->template_dir[0].’/’.$conf['file'].’.tpl’ ) ) {
$name = explode( ‘.’, $conf['file'] );
array_pop( $name );
$name = ucwords( implode( ‘ ‘, $name ) );
$smarty->assign( ‘path’, array( array( ‘name’ => $name, ‘url’ => $conf['file'] ) ) );
$content = $conf['file'].’.tpl’;
}
}
$smarty->assign( ‘content’, $smarty->fetch( $smarty->template_dir[0].’/’.$content.’.tpl’ ) );
$smarty->display( ‘index.tpl’ );
?>
5. das modell
beinhaltet functions für den controller. zb. getSomething() and assign it to a smarty var.
6. die index.tpl im template dir
…{$content}
7. rest sollte sich von selbst erklären.
viel spaß ;)
Hi,
erstmal danke für den umfangreichen Kommentar, dafür lass ich auch den Link zum SEO-Content drin ;)
Aber warum machst du dabei mit, wenn du die beiden nicht leiden kannst (oder hab ich die kleine Fußzeile auf der Seite falsch verstanden)?
jetzt hast du aber den falschen kommentar gelöscht… der eine war convertiert - in %lt;> etc. damit man es ordentlich lesen kann… duuude… :P
aaarrr wieso ich mit mache? weil ich gewinnen werde.
um den ganzen semi-prof. german seo stars, deren weblogs immer 5 tage hinter den americanischen liegen, die nur 1:1 genau deren inhalt übersetzt ins deutsche kopieren und ansonsten nur banale scheisse als super content und kindergarten optimierung ala “füge meta tags ein” als non plus ultra verkaufen, zu zeigen wo der hammer hängt.
…und der hängt eben nicht in ihrem whitehat blödsinns seo/sem quatsch. :)
Yupps…..
Aber wie willst du denen zeigen wie gut du bist, wenn du für Exalead optimierst?
suchmaschinen funktionieren heute alle auf der selben grundelage wie google. möglicht viele backlinks.
ob ich für exalead, google oder msn “optimiere” macht keinen unterschied für mich. es geht einfach um die masse. backlinks, backlinks, backlinks… dabei zählt noch nichtmal die “qualität”, will ich damit geld verdienen. das haben deutsche “seo’s” noch nicht verstanden. natürlich sieht das ganze anders aus optimiert man für eine firma deren image seite. da sollte man auf die “qualität” insofern achten dass man keine “komischen” backlinks hat.
aber affiliate seiten? das ist das total egal.
hauptsache gute positionierung, das bringt traffic und am ende massig geld.
mh… ja da magst du recht haben. Ich kenne mich zwar weder mit Whitehat, geschweige denn mit Blackhat SEO aus, aber gerade im Affiliate-Bereich muss man schon die Top-Plätze einnehmen um gut zu verdienen. Liegt vermutlich dann auch an der Qualität des Traffics, wenn man Affiliate auf seinen Seiten schaltet für wiederkehrende Besucher konvertiert das nicht annähernd so gut wie gezielte Besucher über Sumas.
Also schöner Artikel, hab jetzt nur überflogen und mir ist aufgefallen das eine Codestelle absolut sinnfrei ist! Und zwar dieses ewige wiederhohlen…
case ‘register’:
$smarty->display(’regform.tpl’);
break;
case ‘profile’:
$smarty->display(’profile.tpl’);
break;
…
Wieso nicht einfach:
$smarty->display($_action.’.tpl’);
Du machst dir viel zuviel Arbeit! Nehmen wir an dein Webprojekt hat 1000 PHP Seiten (oder .tpl ist ja egal), willst du dann alle mit Case verlinken? Und falls du das so gemacht hast damit du mit default bei User Fehleingabe kein Fehler erzeugt wird, das geht auch anders! Dann kannst du sogar eine eigene Fehlerseite einfügen anstatt nur die index.php …
if(isset($_GET['site']))
{
$site = $_GET['site'];
}
else
{
$site = ‘index’;
}
$test = @fopen(’site_ordner/’.$site.’.php’,'r’);
if($test == true)
{
@fclose($test);
}
else
{
$site = ‘error’;
}
require_once(’site_ordner/’.$site.’.php’);
Schon hast du das Problem viel smarter gelöst…!
(für unendlich viele Seiten)
Ist nur die Kurzfassung hab dafür mal sone Art Klasse entwickelt, macht sich gut in jedem Webprojekt!
MfG Stefan
Ja, vollkommen richtig, daran hab ich bislang noch nicht gedacht, aber die Lösung gefällt mir.
Ähm, naja!
index.php?site=../index
Mal schauen wie lange der Server damit beschäftigt ist ;)
Nein, ernsthaft. Ich würde niemals ungeprüfte Benutzereingaben als Dateien einbinden.
Zumindest würde ich vorher folgendes tun:
if(!inarray($site, array(’register’, ‘login’, ‘index’))
$site=’error’;
Ups, hab das require_once überlesen. Trotzdem sollte man die Benutzereingaben auf jeden Fall überprüfen.
Ggf. können sonst sogar eigene PHP Scripte ausgeführt werden.
Gut das das angesprochen wird:
Das Prüfen und Abfangen von Benutzereingaben ist sehr wichtig, frei nach dem Motto: “Traue keiner Benutzereingabe”. Allerdings werde ich im Webdesign Guide nicht das Thema Sicherheit abhandeln, das wurde den Umfang dieses Tutorials sprengen.
@Christian
Sicher musst du das Thema nicht ausführlich diskutieren, dafür gibt es andere Quellen. Aber da ich stark vermute, dass dein Tutorial als Vorlage für viele Hobbyprojekte dienen wird, wäre es vielleicht ganz nett wenn man typische Fehler vermeidet und einen kurzen Kommentar dahinterschreibt.
Wenn mir was auffällt, gibt’s natürlich einen netten Kommentar ;)
Da stimme ich dir absolut zu!! Ich werde auch am Ende des Guides einen extra Part machen mit den Kommentaren die mir wichtig erscheinen, oder in der PDF-Version auf die Kommentare im jeweiligen Part eingehen.