Schmalspur Template-Klasse

Kategorie: Blog::Web-Entwicklung::PHP-Klassen

erstellt am 19.07.2008 um 11:43h

Klasse: class.schmalspur_template.php
Autor: Cord-Heinrich Pahlmann
Version: 1.0
Lizenz: LGPL^[2]

Fast bei jeder OpenSource Software kann man eigene Templates einbinden. Dennoch finden sich viele HTML-Teile hart-codiert in php-Dateien wieder.
Das kann dann so aussehen:

echo "<div style=\"background-color: #000000;\">\n";
echo "<table border=\"0\" cellspacing=\"1\" width=\"100%\">\n"
."<tr>\n"
."\t<th class=\"header\" colspan=\"2\">Forum</th>\n"
."\t<th class=\"header\" width=\"30\">Themen</th>\n"
."\t<th class=\"header\" width=\"30\">Beitr&auml;ge</th>\n"
."\t<th class=\"header\" style=\"width: 60px; white-space: nowrap;\">Letzter Beitrag</th>\n"
."</tr>\n";

Abhilfe schaffen Template-Engines wie Smarty^[1^] oder andere. Allerdings sind diese Engines für den Standard-Gebrauch meistens total überdimensioniert.
Das merkt man auch schnell an der Grösse. Allein die Haupt-Klasse von Smarty^[1^] hat ca. 2000 Zeile Code ist und ca. 60Kb gross.
Im Vergleich dazu die hier vorgestellte Template-Klasse: ca. 100 Zeilen und ca. 3Kb.

Aus diesem Grunde habe ich mir ein paar Gedanken zu einem schmalspur Template-System gemacht.

Anfoderung an ein Template-System:

Man muss Variablen in die HTML-Template Dateien einfügen können.
Schleifen müssen durchlaufen werden können

Die Anforderung sind also eigentlich ziemlich minimal.

Folgende Platzhalter-Arten kann man im Template angeben:

{Platzhalter-Name in kapitalen Buchstaben}, z.B. {BENUTZERNAME}
{Schleifenname} ... {/Schleifenname}, z.B. {SCHLEIFE} ... {/SCHLEIFE}

Ein Template kann also z.B. folgende Form haben:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
    <title>{TITLE}</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
  {MENU}
    <a href="{LINK}">{LINK_NAME}</a><br />
  {/MENU}
  {BODY}
</body>
</html>

Die Template Klasse hat folgende Funktionen

__contruct(string $template_path)
- Startet die Template Engine
replace(string $search, string $replace)
- Der Platzhalter {$SEARCH} wird durch $replace ersetzt
init_loop(string $loop_name)
- Instanziert eine Schleife
loop_data(string $loop_name, array $search, array $replace)
- ersetzt alle Elemente des $search Arrays mit den Werten aus dem $replace Array in der Schleife $loop_name
get()
- Beendet den Output-Buffer und gibt den kompletten Inhalt (inkl. der ersetzten Daten) des Templates zurück

Nun folgt ein kleines Beispiel um das obige Template auszugeben:

//Instanzierung des Template-Systems inkl. Pfad- und Dateiangabe
$t = new template($dir . "template_file.html);

//Statisches ersetzen
$t->replace("title", "Mein kleiner Blog");
t->replace("body", "Hier kommt der Main-Body rein...");

//Dynamisches ersetzen mittels einer Schleife
$t->init_loop("menu");
$t->loop_data("menu", array("link", "link_name"), array("home.html", "Home"));
$t->loop_data("menu", array("link", "link_name"), array("kontakt.html", "Kontakt"));
$t->loop_data("menu", array("link", "link_name"), array("impressum.html", "Impressum");

//Ausgabe des Templates
echo $t->get();

Unser Template würde in diesem Falle so aussehen:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
    <title>Mein kleiner Blog</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
      <a href="home.html">Home</a><br />
      <a href="kontakt.html">Kontakt</a><br />
      <a href="impressum.html">Impressum</a><br />
    Hier kommt der Main-Body rein...
</body>
</html>

Die Template Klasse kommt natürlich auf www.pahlmann.biz zum Einsatz.
Das Main-Template sieht wie folgt aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>{VAR--TITLE}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="{VAR--KEYWORDS}" />
    <meta name="description" content="{VAR--DESCRIPTION}" />
    <meta name="language" content="de" />
    <meta name="robots" content="index,follow" />
    <meta name="author" content="Cord-Heinrich Pahlmann" />
    <meta name="abstract" content="Freiberufliche Web-Entwicklung, PHP/MySQL" />
    <meta name="copyright" content="Cord-Heinrich Pahlmann" />
    <meta name="designer" content="Cord-Heinrich Pahlmann" />
    <meta name="publisher" content="Cord-Heinrich Pahlmann" />
    <meta name="revisit-After" content="{VAR--REVISIT}" />
    <meta name="distribution" content="global" />
    <link href="{VAR--TEMPLATE_PATH}style.css" rel="stylesheet" type="text/css" />
    <link href="{VAR--TEMPLATES_DIR}overall.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="app/js/parse.js"></script>
    {VAR--HEAD}
    <script type="text/javascript">
    <!--
        function empty_search()
        {
            document.getElementById('search_txt').value="";
        }
    -->
    </script>
</head>
<body>
    <div id="header">
        <div id="headercontent">
            <div id="title">
                <h1>{VAR--HEADER}</h1>
                <h2 id="topheader">{VAR--SUB_HEADER}</h2>
            </div>
            <div id="topmenu">
                <ul>
                {VAR--SHORT_MENU_LOOP}<li><a href="{VAR--M_LINK}"><span {VAR--M_ACTIVE}>{VAR--M_TEXT}</span></a></li>
                {/VAR--SHORT_MENU_LOOP}
                </ul>
            </div>
        </div>
    </div>
    <div id="container">
        <div id="content">
            {VAR--BODY}
        </div>
        <div id="sidebar">
            <div class="sidebarbox">
                <div class="sidebarboxtop">
                    <h2>Suche</h2>
                    <form id="search" method="post" action="{VAR--SEARCH_ACTION}">
                    <p><input type="text" name="search_txt" id="search_txt" value="Search..." onclick="empty_search();" />
                    <input class="button" type="submit" name="Submit" value="GO" /></p>
                    </form>
                </div>
            </div>

            {VAR--ADMIN_MENU}

            <div class="sidebarbox">
                <div class="sidebarboxtop">
                    <h2>Neue Beiträge</h2>
                    <ul>
                    {VAR--NEW_BLOG_LOOP}
                    <li><a href="{VAR--BLOG_LINK}" style="border-bottom: none;">{VAR--BLOG_HEADER}</a></li>
                    {/VAR--NEW_BLOG_LOOP}
                    </ul>
                </div>
            </div>
        </div>
    <br />
    </div>

    <div id="tagcloudwrapper">{VAR--TAG_CLOUD}</div>

    <div id="footer">
        <div id="footercontent">
            <p>
                Copyright &copy; {VAR--YEAR} Cord-Heinrich Pahlmann<br />
                Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> &amp; <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
                | {VAR--IMPRESSUM}
            </p>
        </div>
    </div>
<script type="text/javascript" src="app/js/highlight.js"></script>
</body>
</html>

Download der Klassendatei: class.schmalspur_template.zip

Quellen:
[1]: Smarty Template Engine
[2]: GNU Lesser General Public License

Kommentare

Noch keine Kommentare vorhanden.

Neuer Kommentar

E-Mail Benachrichtigung

Sie können hier Ihre E-Mail Adresse hinterlegen, bei jeder Änderung oder bei einem neuen Kommentar erhalten Sie eine kurze E-Mail.
Ihre E-Mail Adresse wird nur in Verbindung mit diesem Beitrag in unserer Datenbank gespeichert. Sie wird nicht zu Werbezwecken benutzt, an Dritte weitergegeben oder an irgendeiner Stelle veröffentlicht.

Blog::Web-Entwicklung::PHP-Klassen