Egyszerű template rendszer

Mire is jó 1 template rendszer?

Teljesen külön tudjuk választani a design-t a programkódtól, ami nagyban javítja az átláthatóságot, illetve a kezelhetőséget. Ebből kifolyólag 1 ilyen rendszerrel elég gyorsan összetudunk rakni egyszerű oldalakat a saját moduljaink segítségével. Ezért aki viszonylag sok oldalt csinál annak ajánlom, hogy készítsen magának 1-et, a saját moduljaival(Te tudod, hogy miket használsz gyakran), illetve olyan oldalaknál lehet hasznos ahol többféle designból lehet választani.

Nézzük hogyan működik:

  • létrehozunk 1 template file-t ami a design-t tartalmazza, ebbe teszünk speciális tag-eket amiknek a helyére betöltjük a moduljainkat

  • index.php-val feldolgozzuk

  • megjelenítjük az oldalt


template.html:
<html>

<head>

<title>{cim}</title>

</head>

<body>

<div id=”header”></div>

<div id=”menu”>{menusor}</div>

<div id=”tartalom”>{tartalom}</div>

</body>

</html>


index.php:
<?php
 $modul = array(
 ‘{cim}’ => ‘content/main/titles.inc.php’,
 ‘{tartalom}’ => ‘content/main/body.inc.php’,
 ‘{menusor}’ => ‘content/main/menu.inc.php’,
 );

$content = file_get_contents(‘template.html’);
 echo csere( $content, $modul );

//file feldolgozás
 function feldolgoz($file) {
 ob_start();
 include($file);
 $buffer = ob_get_contents();
 ob_end_clean();
 return $buffer;
 }

//tag-ek cseréje tényleges tartalomra
 function csere( $data, $modul ) {
 foreach( $modul as $tag => $link ) {
 if( stristr( $data, $tag ) ) {
 $data = str_replace( $tag, feldolgoz( $link ), $data);
 }
 }
 return( $data );
 }
 ?>


Mit is csinál ez a pár sor?

mikor beírjuk a http://teszt-domainem.hu/-t akkor az index.php töltödik be, ami rögtön megnyitja a template.html file-t ami tartalmazza a design-t, majd lecseréli benne a saját tag-eket a hozzá párosított php file-ra.

Ha megnézzük a böngészőben a file forrását akkor ilyesmit kell látnunk:
<html>

<head>

<title>cim amit megadtam a content/main/titles.inc.php fileban</title>

</head>

<body>

<div id=”header”></div>

<div id=”menu”>

<ul>

<li>menu1</li>

<li>menu2</li>

</ul>

</div>