Anzeige
Tutorialbeschreibung

Templatesystem für deine Webseite

Templatesystem für deine Webseite

In diesem Tutorial von mir erkläre ich euch, wie ihr ein eigenes kleines Templatesystem erstellen könnt. Dazu braucht ihr nur leichte PHP kenntnisse, sowie ein logisches Denken zum Nachvollziehen der Schritte.


Schritt 0:
Hier möchte ich erstmal erklären, dass ich hier nicht jeden Schritt einzeln erklären werde, solche Sachen wie Programm öffnen/speichern werde ich nicht immer in einem einzelnen Schritt darstellen.

 

Ein Templatesystem:
Ein Templatesystem dient zum Trennen von Design und Code. Bei meinem System wird Design und Programmiercode getrennt sowie eine schöne Verzeichnisverlinkung erstellt. Du brauchst nicht für jede Seite wieder den gleichen Code, sondern kannst einfach alles in einer Datei bearbeiten und ändern. Wenn du also dein neues Projekt mit dem System erstellen willst, brauchst du dein Design nur umzusetezn in HTML, CSS und dies in css/ und template/ einzubauen.

 

Schritt 1:
Als erstes müsst ihr euch ein Ordnersystem anlegen. Ihr müsst mein Ordnersystem nicht beibehalten, jedoch müsst ihr euch im klaren sein, dass ihr beim Ändern des Systems immer die Verzeichnislinks mit ändern müsst. Für folgenden Aufbau habe ich mich entschieden:

Bilder

 

Schritt 2:
Nun haben wir schonmal das Grundgerüst. Die Css-Datei ist klar! Nun müsst ihr unter template/ die Datei index.php öfnen.  Da kommt der Aufbau eurer ganzen Seite hinein. Nun müsst ihr dort nur noch folgende Codes reinschreiben:

<title>Dein Websitename :: <?php echo $section; ?></title>

Hiermit erscheint auf jeder Seite der Name der aktuellen Datei/Name.

Nun müsst ihr nurnoch ein marker in den Content packen, wo später euer Inhalt hineinsoll.

<?php include('section/'.$section.'.'.$tld.'') ?>

Hier wird die Section, also der Bereich und die Endung, in dem Fall .php, eingefügt und includiert.

Bilder

So müsste es dann ungefähr aussehen.

 

Schritt 3:
Jetzt machen wir uns an die Datei index.php im Hauptverzeichnis. Bei dieser wird es jetzt ein klein wenig komplizierter, aber immer noch nachvollziehbar. Da das System auf Get-Parameter basiert müssen wir diese auslesen und prüfen. Dazu geben wir den Parameter erstmal einen Namen:

$section = $_GET['section'];

$tld = "php";

Gut, die Variable $tld ist wohl eigentlich sehr unnütz, jedoch verwende ich es gerne, wenn man oft mit mod_rewrite arbeitet, weil dann die Endungen vllt. nicht mehr .php sondern.htm oder .html heißen können.

 

Schritt 4:
Nun müssen wir den Get-Parameter überprüfen. Dies machen wir mit einer kleinen Abfrage:

if (empty($section) || !file_exists('section/'.$section.'.'.$tld.'')) {
    $section = 'startseite';
}

Das heißt dann soviel wie: Wenn der Parameter leer ist oder die datei gar nicht existiert, dann wird der Parameter auf startseite gesetzt. Und wenn $section gleich startseite, kommt man auf die Seite: startseite.php *

Jetzt müssen wir die index.php aus dem Hauptverzeichnis (zur Überprüfung zuständig) und die aus dem Unterverzeichnis Template/ (zuständig für das Design) ineinander einfügen.

include('template/index.php');

Nun wird das Design includiert und die Werte von $section und $tld können verwendet werden bzw. in die Designdatei eingefügt werden.

*

Natürlich könntet ihr auch abfragen, wenn es nicht existiert oder leer ist dass dann der Text kommt. "Diese Datei ist leider nicht vorhanden...". Dann erstellt ihr einfach eine Datei error.php, setzt diese auch in den Ordner section und setzt den $section Wert nicht auf startseite sondern auf error. Mir persöhnlich gefällt die Variante aber besser, dass man dann auf die Startseite kommt, als immer zu lesen, "Die Seite gibt es nicht...".

Schritt 5:
Wir sind so gut wie fertig! Jetzt könnt ihr im Ordner section so viele Dateien wie ihr wollt anlegen und dort euren Inhalt eintragen, der im Content angezeigt werden soll. Wichitg ist es, bei der Navigation die Links immer so aufzustellen:

<a href="index.php?section=deineseite">Link</a>

Das index.php führt uns also zu der Datei mit der Abfrage. Section hat bei dem Link den Wert deineseite. Also $section = "deine Seite";  ...

In dem Fall muss die Datei deineseite.php im Ordner Section vorhanden sein, weil sonst der Link wieder zurück auf die Startseite führt.

 

Schritt Ende:
Ich hoffe ihr seit mitgekommen und habt viel aus dem Tutorial mitnehmen können. Mit ein bisschen PHP- Kenntnissen und ein bisschen logisches Denken bekommt man hier eine ganz gute Lösung hin.

Liebe Grüße,

Markus


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Stone1221
  • 13.01.2013 - 01:05

SCHADE. Die dateien verwaltung gefällt mir werde es für mein Templatesystem verwenden aber dieses Tutorial Überschrift gleich Templatesystem nennen ist hier wohl falsch. Ist für Anfänger nicht wirklich geeignet .scahde Aber trotzdem danke für deine mühe

Portrait von Kloppy
  • 22.01.2011 - 05:52

Super Tutorial, danke!

Portrait von Cokxxie
  • 25.02.2010 - 11:42

Es wurde schon vielfach erwähnt. Es ist kein "richtiges" Templatesystem sondern nur eine gute Ordnerstruktur. Deshalb gibt es von mir nur 2 Sterne

Portrait von mori
  • 10.12.2009 - 12:58

Zwei sterne da es nur für absolute php Anfänger geeignet ist die gerade anfangen zu experimentieren.
Das ist kein Templatesystem sondern nur eine ausgelagerte style datei die per include geladen wird....

Portrait von crx_ed9
  • 17.10.2009 - 16:54

Muss ich leider Rechtgeben, dies ist kein Template System im eigentlichen Sinne.

ein Template wird von einer CSS- Datei gesteuert und einem Teil welches den Quelltext beinhaltet.

Dein ausführungen beschreiben im Groben nichts anderes als einen erweiterten Include Befehl.

Ein Template kommt meist auch mit eigenem kompilierer daher, welcher zur Laufzeit die Inhalte und die Ausgabe generiert.

All dies ist bei dir nicht gegeben.

Dennoch für den Anfang und zum Grundverständnis vlt. nicht verkehrt, daher ein Stern.

Die Überschrift und die Umsetzung sind leider am Thema vorbei gegangen.

Grüße

Portrait von bassist
  • 14.10.2009 - 14:34

Kein Template-System => Thema verfehlt.

Portrait von Destruction929
Portrait von Snaq
  • 13.07.2009 - 21:51

da es kein richtiges Templatesystem ist, nur einen Stern von mir

Portrait von Schlafmonster
  • 10.07.2009 - 15:31

bei manchen punkten einfach ein wenig ausführlicher - ansonsten ganz ok.

Portrait von Flash123
  • 07.02.2009 - 05:08

Da stimme ich dem nobody09 zu, es ist kein Templatesystem,
eher eine Strukturelle Ordner-Idee ^^ ...includieren ist zu allgemein
und wird sicherlich jeder schonmal angewandt haben der sich auch nur
ansatzweise mit php beschäftigt hat.

Du solltest evt. mal selbs etwas surfen und wirst aufjedenfall
erfahren das ein Templatesystem etwas komplexer ist ...

Naja, trotzdem 2 sternchen von mir , da es sicherlich für anfänger
garnicht mal so schlecht is zu wissen, das eine Ordner-Struktur ganz schön
wichtig sein kann :D

Portrait von Top_Gun
  • 25.08.2008 - 15:05

Das ist leider kein richtiges Templatesystem und ich bedauere gerade die Punkte für etwas ausgegeben zu haben, dass ich selbst schon kannte :(

Das Tutorial an sich ist ein bisschen zu Lückenhaft, hätte mir das ganze ausführlicher gewünscht und auch anschaulichere Beispiele...

Portrait von whitetip
  • 19.06.2008 - 07:53

find ich gut. danke

Portrait von burke
  • 09.05.2008 - 13:58

sehr schönes tut. 5 sterne für dich ;)

Portrait von nobody09
  • 25.03.2008 - 20:37

mhhh ja nettes Tut ist auch gut erklärt und dadurch gut nachvoll ziehbar (dafür drei sterne)

ABER:

Es geht hier um ein TemplateSystem was du programmiert hast ist eine einfaches Includefile by GetParameter (wenn man das mal so nennen kann^^) nichtsgrassartiges und schon gar kein Templatesystem!

Du schreibst selbst das dein system den sinn haben soll Code und Desing zu kapslen aber das tut es nicht in dem du PHP-Files includierst... das einzige grundgrüst ist deine index.php die immer nur das gleiche macht und ausgibt. Dann kommt der include in dem das ausehen und die funktionalität drin stehen MÜSSEN dadruch wirddoch nichts gekapslet und der Designer muss sich trozdem durch den PHP code quälen.... verstehst du was ich meine?

Sieh dir im vergleich mal Template Systeme wie smarty an. Da gibt es Template Dateien mit Platzhaltern für Variblen werte die per PHP bestimmt werdeen und sogar tags mi denen sogar grundlegende Programmstrukturen umgesetzt werden können (Schleifen etc.).

Falls interesse besteht kann ich mal ein tut oder einen workshop zu Smarty schreiben und so mal ein "richtiges" Template-System vorstellen.

Portrait von xero7
  • 25.03.2008 - 22:28

Hier kannst du auch Marker setzen! Und diese Mit Inhalt füllen lassen. Das ist ein grundscript, man kann dabei alles anpassen. Und es ist wie du schon sagst im Grundegenommen kein richites Templatesystem, wobei es dem aber schons ehr nahe kommt. Naja wer dieses Script bedient, möchte auch kein riesen Templatesystem sondern ein einfaches durchschaubares und das bekommt er.

Portrait von Herr_D
  • 12.03.2008 - 16:04

Das nächste Mal erstellst eine Beispielseite verstanden ;)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 04.03.2008 - 16:23

Sehr schönes Tutorial, danke!

Portrait von Indesbeginner
  • 04.03.2008 - 08:25

Schönes Tutorial, ich habe es gerade nachgebaut. Es funktioniert prima ; - )

Portrait von wattnwurm
  • 03.03.2008 - 20:01

Für einen Anfänger weniger geeignet. Wer die Zusammenhänge durchschaut, kommt damit eher zurecht.

Portrait von Herr_D
  • 03.03.2008 - 14:59

Hast gut gemacht Kleener ;)

x
×
×