13. Template rendszerek

A template rendszerek olyan megoldások, amikor a html tartalmat sablon file-okban írják le és hely jelölőket használnak bennük a behelyettesítendő értékek részére. Például az alábbi sablon a Drupal smplphotoalbum modulban található.

	<div id="smpldiv{{ id }}" class="smpl_item_div" style="">
		<a id="smpla{{ id }}" href="{{ href }}" class="smpl_a"
			title="{{ title }}" target="_blank">Ez itt a link
		</a>
	</div>

A sablon rendszerek általában úgy működnek, hogy van egy sablon fájl, például page.html.twig (Symphony sablon rendszere ).

Ez egy olyan majdnem helyes html oldal, amely leírja a weboldal szerkezetét, de vannak benne megjelölt helyek. Ez lesz a sablon. A megjelölt helyek ilyenek például: '{{ id }}', '{{ title }}', stb.
Van egy alkalmazás, mondjuk PHP (de lehet másmilyen programozási nyelv is), amely a fájl-t beolvassa a memóriába egy stringbe. pl:
```
$str = file_get_contents("sablon.html.twig");
```
Van az alkalmazásnak egy olyan része, amely az aktuális tartalmakat az adatbázisból és egyéb aktuális adatokból összeállítja az aktuális értékeket és mondjuk egy tömbbe betölti. mégpedig a sablonban megadott jelölőket használva indexként.
```
$str = [
	'id'=>1, 
	'href'=>"https://www.ezmegaz.hu/path-to-page/index.html", 
	'title'=>'Példaoldal'
];
```
A kódnak van egy olyan része, amely a string jelölőinek helyén lévő jelölőket kicseréli az aktuális értékekre:
```
foreach ($str AS $i => $e ){
	$str = str_replace("{{ " . $i . " }}", $e, $str );
}
```
Az aktuális értékek behelyettesítése után az $str változó már a html oldal aktuális értékekkel feltöltött tartalmát jeleníti meg, amit egy egyszerű print utasítással kiküld a kód a kimenetre.
```
print $str;
```

A böngészőben megjelenik a teljes értékű szabályos HTML kód.

Mi az előnye a sablonoknak?

A fejlesztők függetlenül tudnak dolgozni

A sablon tervezője javascript, css és mindenféle egyéb tartalmat létrehozhat anélkül, hogy aktuálisan érvényes adatokkal rendelkezne. Ez a frontend része az alkalmazásnak.

Az aktuális adatokat a backend állítja elő. A két részt fejlesztő kollégák egymástól szinte függetlenül fejleszthetnek, mivel a két felet csakis kizárólag a jelölők kötik össze.

A legprimitívebb frontend már tesztelésre alkalmas a backend fejlesztő számára és a frontend fejlesztő is a legegyszerűbb péda adatokkal tudja tesztelni a saját területét.