[PHP] TemplateSystem - Klassen

[PHP] TemplateSystem - Klassen

Übersicht Discussion
In diesem Tutorial werde ich euch Anhand eines Beispieles ein Templatesystem näher bringen.

Warum dieses Tutorial?

  • die Seite lässt sich leicht warten
  • das Design muss nur in einer Datei (excl css-datei) geändert werden und ist für alle übergreifend
  • neue Inhalte lassen sich leichter Implementieren

Vorraussetzung:

  • Grundkenntnisse PHP
  • Klassen in PHP
  • HTML-Kenntnisse
  • Webserver
[PRBREAK][/PRBREAK]

Benötigte Ordner:

  • module
  • template

In den Ordner module werden alle PHP-Scripte abgelegt.
in den Ordner template werden alle Designdateien, und nicht Dynamische Seiten, wie z.b. HTM Dateien hinterlegt.


Benötigte Dateien:

  • im Ordner "template" - design.tpl
  • im Ordner "template" - navi.tpl
  • im Rootordner - config.php
  • im Rootordner - index.php.php

1) design.tpl - HTML - Grundgerüst


Javascript: 
<!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">
<meta name="description" content="Beschreibung der Seite einfügen">
<meta name="keywords" content="Suchwörter der Seite einfügen">
<meta name="author" content="Autor  der Seite einfügen">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="1 month">
<title>Titel der Seite</title>

<script type="text/javascript">
//<![CDATA[

window.google_analytics_uacct = "UA-1691844-1";


//]]>
</script>

<script type="text/javascript">
//<![CDATA[

window.google_analytics_uacct = "UA-1691844-1";


//]]>
</script>
</head>

<body>
<script type="text/javascript"><!--
var _gaq = _gaq || [];
_gaq.push(
['_setAccount', 'UA-1691844-1'],
['_trackPageview']
);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//-->
</script>

<script type="text/javascript"><!--
var _gaq = _gaq || [];
_gaq.push(
['_setAccount', 'UA-1691844-1'],
['_trackPageview']
);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//-->
</script>

    <div id="navigation">
<!--- NAVIGATION -->
            [%navi%]
<!--- /NAVIGATION -->
    </div>

    <div id="content">
<!--- CONTENT -->
            [%content%]
<!--- /CONTENT -->
   </div>
<div class="footer_morecopyright" style="margin-top: 0px;color:#FFFFFF;">Page Time: <b>0,11073</b> seconds *****Memory: <b>11,152</b> KB *****Queries: <b>83</b> *****Templates: <b>42</b> (<b>22</b> uncached)<br />Server Uptime: <b>23 days 7 hours 53 mins</b> *****Server Load: <b>0.67</b> : 0.71 : 0.71<br /><table cellspacing="0" cellpadding="0" border="0" style="margin-left: auto; margin-right: auto;"><tr><td style="color: #cccccc; text-align: left;"><b>editor_clientscript</b></td><td style="padding-left: 10px;">(2)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_jsoptions_font</b></td><td style="padding-left: 10px;">(2)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_jsoptions_size</b></td><td style="padding-left: 10px;">(2)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_smilie</b></td><td style="padding-left: 10px;">(20)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_smilie_category</b></td><td style="padding-left: 10px;">(2)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_smilie_row</b></td><td style="padding-left: 10px;">(30)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_smiliebox</b></td><td style="padding-left: 10px;">(2)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_toolbar_colors</b></td><td style="padding-left: 10px;">(2)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_toolbar_fontname</b></td><td style="padding-left: 10px;">(42)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_toolbar_fontsize</b></td><td style="padding-left: 10px;">(14)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_toolbar_on</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>newpost_attachment</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>newpost_disablesmiliesoption</b></td><td style="padding-left: 10px;">(2)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>tagbit_wrapper</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_article_editor</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_content_article_inline</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_content_edit_editbar</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_edit_block</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_edit_metadataeditor</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_edit_page</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_edit_publisher</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_editor_toolbar_on</b></td><td style="padding-left: 10px;">(1)</td></tr></table></div></body>
</html>

Ich werde hier nicht weiter auf die HTML Tags eingehen. Diese sollten soweit bekannt sein.
Was jedoch hier zu erwähnen ist, sind die Platzhalter.

Code: 
[%content%]
[%navi%]

In diesem Bereich werden wir später unsere Dateien hineinladen.

Natürlich könnt Ihr euch euer Design so gestaltet wie Ihr möchtet.
Dazu könnt Ihr per CSS die Div boxen verschieben oder anordnen, wie Ihr dies gerne haben möchtet.
Es ist auch möglich, anstatt des Platzhalters [%navi%] auch [%navigation_oben%] o.ä zu nehmen.


Die Platzhalter müssen nur [%PLATZHALTERNAME%] aufgebaut sein.


2) navi.tpl - HTML - Navigation

Wir erstellen uns eine Liste, in der wir unsere Menüpunkte auflisten.


HTML: 
<ul>
            <li> <a rel="nofollow" href="http://www.tutorials.de/index.php?cat=0"> Start</a> </li>
            <li> <a rel="nofollow" href="http://www.tutorials.de/index.php?cat=1"> Referenzen</a></li>
</ul>


Wichtig:

PHP: 
index.php?cat=0

Da wir nur eine Seite haben, welche sich die Templates zusammensucht Verlinken wir immer die index.php.
Als Parameter geben wir die Kategorie an "?cat=0".
Ihr werdet später sehen warum.


3) config.php - Liste der Links

Um nicht jeden Link im Browserfenster als Klartext stehen zu haben, benötigen wir nun die config.php

In die Config.php kommen nun alle eigentlichen links:


PHP: 
<?php
     $cat = array();
     $cat[0] = "unterordner/dateiname.htm";
     $cat[1] = "unterordner/dateiname.php";
?>


Unterordner ist der Ordner, welcher sich unterhalb von modules oder template befindet.
Sollte es einen Ordner in diesem Unterordner geben, müsst Ihr den Pfad verlängern
(bsp. unterordner/ordnerimunterordner/dateiname.htm).

Für diese Datei war die Parameter angabe in der navi.tpl nötig.


4) index.php - Das Herzstück in classen

Hier ist nun unser Herzstück.

Diese Datei verbindet alle Dateien miteinander und gibt uns unsere Seite aus.

Ich werde nun ersteinmal den ganzen Quelltext posten und beschreibe diesen anhand der dahinter stehenden Kommentare:


PHP: 
          <?php

include("config.php"); // Einladen der Config.php welche die Links verknüpft

class setLayout // Erstellen der classe setLayout
{
 private $page;  // Private variable erstellen
 private $tpl;   // Private variable erstellen

 public function setDyn($pfad)   // Funktion für das einladen der Dynamischen Dateien (php) aus dem Ordner module
 {
  ob_start();                     // Zwischenspeicher öffnen
  require_once("module/".$pfad);  // Datei anfordern
  $ausgabe = ob_get_contents();   // Inhalt der Datei auf temp. Variable übergeben
  ob_end_clean();                 // Zwischenspeicher schließen

  return $ausgabe;                // Rückgabe der temp. Variable mit Inhalt der eingelesenen Datei
 }
 public function setHTML($pfad)   // Funktion für das einladen der Statischen Dateien (html / tpl) aus dem Ordner template
 {
  $ausgabe = file_get_contents("template/".$pfad); // Anfordern des Inhaltes der Datei

  return $ausgabe;                // Rückgabe der temp. Variable mit Inhalt der eingelesenen Datei
 }

 public function getTpl($pfad, $placeholder) // Funktion für das ersetzen der Platzhalter
 {
  if(file_exists("module/".$pfad))   // Es wird überprüft, ob eine Datei im Modulesordner liegt, wenn ja
  {                                  // rufen wir die setDyn function auf, welche uns den Inhalt der Datei
   $this->tpl = $this->setDyn($pfad);  // Einliest und auf die private zwischen Variable tpl legt
  }else{
        if(file_exists("template/".$pfad))  // Wenn keine Datei mit dem Namen im Modules Ordner gefunden wird, wird im
        {                                   // template Ordner danach gesucht
         $this->tpl = $this->setHTML($pfad); // ist dies der Fall, rufen wir die function zum Einlesen der HTML datei auf
        }else{                              // wenn garkeine Datei gefunden wird, (z.B. der User cat=12345 eingegeben hat)
         $this->tpl = $this->setHTML("Hauptseite"); // lesen wir eine Hauptseite ein (diese muss von euch belegt werden,
        }                                          // kann auch natürlich setDyn() sein (also eine php))
  }
  IF(!empty($placeholder))                     // hier wird nochmal geschaut, ob der Platzhalter belegt ist oder Leer / Null
   $this->setPageTPL($this->tpl, $placeholder);     // Das hat den Sinn, das Ihr in jeder x-beliebigen Datei eine Seite einbauen
  ELSE                                         // könnt, so z.B. bei nicht angemeldeten Usern den Login
   echo $this->tpl;
 }

 private function setPageTPL($tpl, $placeholder)          // Funktion für das ersetzen der Platzhalter
 {                                               // mit preg_replace ersetzen wir unseren Platzhalter und legen nun
  $this->page = preg_replace("/\[\%".$placeholder."\%\]/",$tpl,$this->page); // den Inhalt auf $this->Page
 }

 public function setPage($tpl)                            // Funktion um private Variable $page zu befüllen,
 {                             // bzw um das Design einzuladen / anzufügen
  $this->page .= file_get_contents($tpl);
 }

 public function showPage()                               //Funktion um die Seite auszugeben.
 {
  return $this->page;
 }
}


$display = new setLayout();              // Neue Instanz von setLayout erstellen
$display->setPage("template/design.tpl");// wir lesen das Template auf $page ein
$display->getTpl("navi.tpl","navi");     // wir ersetzen den Platzhalter "navi" mit dem inhalt der Datei "navi.tpl"

IF(isset($_GET["cat"])) // Hier wird nun der Content ausgelesen, also welche Seite über ?cat= mitgeliefert wurde
 $content = $_GET["cat"];// da wir dies z.b. auch über ein Formular machen können, schauen wir ob Post oder GET
ELSE                    // gesetzt ist
 $content = $_POST["cat"];

IF(!isset($content))                          // Wenn Beide leer sind, kann hier die Seite angegeben werden, welche erscheinen soll,
 $content = 0;        // in diesem falle $cat[0];

$display->getTpl($cat[$content],"content"); // Nun ersetzen wir den Platzhalter [%content%] mit dem Inhalt der Datei $cat[$content]
                                            // z.b. $cat[0] = "ordner/startseite.htm"
echo $display->showPage();                  // als letztes noch die Ausgabe der Datei via showPage();
?>



Zum Prinzip:

Wir laden das Design auf $page,
dann ersetzen wir die Platzhalter mit den jeweiligen Dateien, wobei unteschieben wird zwischen Dynamischen PHP, und Statischen TPL / HTML

Somit ist es möglich in jeder Datei zb. (modules/test.php) eine x-Beliebige datei zu erstellen.
Hierbei ist nur zu beachten, eine neue Instanz der Klasse zu öffnen, und als Functionsaufruf getTpl("pfad",0); den Pfad ab root zu wählen, und als 2ten Parameter 0.


z.B.
PHP: 
$newInhalt = new setLayout();
$newInhalt->getTpl("test.php",0)

Nun würde euch der Inhalt der test.php datei angezeigt.
Bei Fragen nutzt bitte das Kontaktformular.


Ich hoffe euch hat das Tutorial gefallen und es bringt euch was.
Autor
crsakawolf
Aufrufe
1.648
First release
Last update
Bewertung
0,00 Stern(e) 0 Bewertungen
Join the discussion
Zurück