Šablonovací systém

Historie šablonování

Statický web

První weby, které vznikaly po roce 1990, vůbec žádné šablony nepoužívaly. Šlo o tzv. statické weby, kdy vývojář ručně vytvořil HTML kód stránky a tu pak nahrál na server, který ji pak posílá do prohlížeče návštěvníkům.

Serverové jazyky

Představte si, že byste chtěli na několika místech webu zobrazit, kolik je na webu článků. Vývojář tedy musel vytvořit samotný článek a pak ještě ručně přepsat číslo například na úvodní stránce, na výpisu článků apod. Spousta zbytečné práce.

Proto kolem roku 1995 vznikly serverové jazyky, které umožnily generovat HTML kód stránky přímo na serveru. Takovým webům se říká dynamické. Počet článků jste si tedy uložili do nějakého souboru a na příslušných místech pak jen dané číslo zobrazili. Nejznámějším serverovým jazykem je PHP, dále pak ASP, JSP ASP.NET a další.

Redakční systémy

Další vývojovou úroveň představuje redakční systém. S jeho pomocí si článek uložíte do databáze a redakční systém už se sám postará o zbytek. Při zobrazování například úvodní stránky weblogu se podívá do databáze na počet článků a číslo vypíše. Stejně tak článek vypíše v mapě stránek a na dalších místech webu.

MVC architektura

Prvotní redakční systémy často tvořil jediný rozsáhlý zdrojový soubor, ve kterém se míchalo HTML všech stránek s aplikační logikou, tj. se zápisem všech funkcí, které redakční systém zajišťoval. Takovému kódu se dnes říká špagetový, protože je obtížné se v něm vyznat.

Proto se moderní webové aplikace staví s využitím MVC architektury, která přísně odděluje různé funkční části aplikace od sebe. Například data získává část zvaná model a pak je předává prezentační vrstvě, která je zobrazuje. Tu tvoří právě šablonovací systém – načte si šablonu a do ní pak data vypíše.

Jak vypadá šablona

Na příkladu níže vidíte úryvek jednoduché šablony, která vypisuje hlavní nadpis článku, jeho perex a obsah.

<div class="article">
   <h1>{$article['heading']}</h1>
   <div class="perex">{$article['perex']}</div>
   <div class="content">{$article['content']}</div>
</div>

Šablonu tvoří klasické HTML tagy, mezi něž šablonovací systém vypisuje data (na příkladu červeně). Moderní šablonovací systémy samozřejmě do šablon nevypisují pouze jednoduché proměnné. Umí spoustu dalších věcí:

• podmínky (jestliže je počet článků roven nule, vypiš hlášku, že tu zatím nic není)
• cykly (pro každý článek v seznamu článků vypiš jeho nadpis a perex)
• filtry (slouží k formátování proměnných, např. zkrať perex na 200 znaků)
• komentáře (skryté poznámky vývojářů, zobrazují se jen v kódu šablony)

Další výhody šablonovacích systémů

1. Oddělení úkolů vývojářů

   Kromě jednoduššího vývoje nových funkcí aplikace má oddělení prezentační vrstvy výhodu také v tom, že kodéři a frontendisti mohou na aplikaci pracovat bez obav, že něco v programu pokazí. Pouze dostanou seznam proměnných, které bude daná šablona bude zobrazovat a o programování se nestarají. 

2. Bezpečnost

   Naprosto zásadní výhoda šablonovacích systémů. Pokud nejsou dobře ošetřeny vstupy uživatele, webová aplikace je náchylná ke zranitelnosti zvané Cross-site scripting. Stačí malé opomenutí programátora. Šablonovací systémy obvykle automaticky všechna vypisovaná data ošetřují (tzv. je escapují).

3. Kešování

   Po každé úpravě šablony moderní šablonovací systém vygeneruje novou verzi, kterou si uloží do keše. To významně zrychluje zobrazování stránek návštěvníkům.

4. Skládání šablon do sebe

   Šablonovací systém umožňuje rozložit šablonu stránky na menší části a ty pak do sebe při generování stránky vkládat. To velice usnadňuje práci vývojářům, protože tak lze oddělit obecnou šablonu layoutu, kterou mají všechny stránky společnou a šablony konkrétních typů stránek (výpis článku, přehled článků apod.) či dokonce jednotlivých komponent.

5. Debuggování

   Moderní šablonovací systémy obvykle obsahuj funkce, které usnadňují hledání chyb v šablonách. To opět zásadně usnadňuje práci vývojářům.

Nejznámější šablonovací systémy

• Latte – šablonovací systém v jazyce PHP hodně rozšířený v ČR. Součást oblíbeného vývojářského frameworku Nette.
• Smarty – oficiální šablonovací systém jazyka PHP.
• Twig – šablonovací systém v jazyce PHP, který používá redakční systém Drupal či framwork Symfony.
• Dwoo – moderní open source šablonovací systém, opět v jazyce PHP.
• Teng – šablonovací systém v jazyce PHP, který kdysi jako open source uvolnil vyhledávač Seznam.cz. Dnes už se moc nepoužívá.
• FastTemplates – další ze starších šablonovacích systémů v jazyce PHP, který vznikl převodem z Pearlu.