Szablony Smarty, szybkie wprowadzenie, strona 2

2014-11-25

Czym są szablony Smarty, jakie mają możliwości i czemu warto z nich korzystać? Krótki Smarty-poradnik wraz z przykładem prostej witrynki opartej na szablonach.

Spis treści

Kilka podstron w oparciu o szablony

Skoro podstawy Smarty zostały przedstawione, możemy przejść do stworzenia prostej witrynki, która będzie miała kilka podstron. Żeby nie zaciemniać przykładu, logika będzie się opierała na PHP i plikach (bez zewnętrznej bazy danych), natomiast generowanie struktury HTML pozostawimy szablonom Smarty.

Logika witrynki, czyli kod PHP

Zacznijmy od pliku index.php, który będzie miał zdefiniowane menu, zawartości nagłówka/stopki (teksty, nie ich ułożenie w HTML), oraz ustawi w parametrach Smarty informację o podstronie (na podstawie parametru z URLa).

<?php
require_once("Smarty-3.1.21/libs/Smarty.class.php");
$smarty = new Smarty();
$subpage = isset($_GET['p']) ? $_GET['p'] : 'index';
$data = array(
    'header' => array(
        'title' => 'Poradnik do szablonów Smarty',
        'info' => 'Tutaj dowiesz się, jak zacząć przygodę ze Smarty',
    ),
    'nav' => array(
        'home' => 'Strona główna',
        'links' => 'Przydatne linki',
        'about' => 'O mnie',
    ),
    'footer' => array(
        'copyright' => 'Copyright © Moja Strona 2014',
    ),
    'subpage' => $subpage,
);
if (!array_key_exists($subpage, $data['nav']))
    $data['subpage'] = 'notfound';

$smarty->assign('data', $data);
$smarty->display('index.tpl');
?>

Jak widać, mamy 3 podstrony: home, links i about. Jeśli parametr nie był żadnym z nich, podstrona zostanie ustawiona na notfound.

Warstwa prezentacji, czyli szablony generujące kod HTML

Teraz pora na template główny, czyli index.tpl:

<!DOCTYPE html>
<html>
<head>
<title>{$data.header.title}</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
{include file='header.tpl'}
{include file='nav.tpl'}
{$page_tpl="{$data.subpage}.tpl"}
{include file=$page_tpl}
{include file='foot.tpl'}
</body>
</html>

Jak widać, dołączamy style z pliku style.css, nagłówek (header.tpl), nawigację (nav.tpl), plik zależny od wybranej podstrony (czyli jeden z: home.tpl, links.tpl, about.tpl lub notfound.tpl), oraz stopkę (foot.tpl). Sposób dobrania się do poszczególnych parametrów (np. $data.header.title) został wspomniany w pierwszej części artykułu.

Widzimy tu dodatkowo tworzenie nowej zmiennej $page_tpl, przez dopisanie końcówki .tpl do zmiennej $data.subpage. W ten sposób to Smarty decyduje, jaki plik szablonu treści właściwej zostanie dołączony.

Kilka kolejnych plików ma prostą budowę. Mamy zatem plik z nagłówkiem strony header.tpl:

<header>
<h1>{$data.header.title}</h1>
<p>{$data.header.info}</p>
</header>

Plik ze stopką footer.tpl:

<footer>
{$data.footer.copyright}
</footer>

Kolejne pliki z treścią właściwą konkretnych podstron (zawierające jedynie czysty kawałek kodu HTML), czyli strony głównej, home.tpl:

<h2>Jakiś nagłówek strony domowej</h2>
<p>To jest strona domowa z poradnika Smarty, serwisu <a href="http://leniwy.eu">leniwy.eu</a>.</p>

Strony z linkami links.tpl:

<h2>Przydatne linki</h2>
<p>Jednym z przydatnych linków może być <a href="http://leniwy.eu">strona z poradnikami dla leniwych</a>.</p>

Strony o mnie about.tpl:

<h2>O mnie</h2>
<p>Jestem leniem, ale umiarkowanym :)</p>

Oraz strony w przypadku podania błędnego parametru w URLu (np. index.php?p=takiej_strony_nie_ma) czyli notfound.tpl:

<p>Strona nie została znaleziona</p>

Pozostaje jeszcze plik z menu, czyli nav.tpl:

<nav>
<ul>
{foreach $data.nav as $nav}
    <li{if $nav@key==$data.subpage} class="selected"{/if}><a href="?p={$nav@key}">{$nav}</a></li>
{/foreach}
</ul>
</nav>

Tu pojawiły się dwie nowości. Jedna z nich to pętla foreach, która tworzy menu na podstawie tablicy zdefiniowanej w pliku index.php (w $data['nav']). Dla każdego elementu tablicy w zmiennej $nav mamy informacje o kolejnych pozycjach menu. Po szczegóły dotyczące pętli odsyłam do dokumentacji Smarty.

Druga nowość to instrukcja warunkowa if. W tym przypadku, jeśli dana pozycja z menu (pod zmienną $nav@key) jest taka sama jak strona wybrana przez parametr w URLu (dostępa pod zmienną $data.subpage, czyli $data['subpage'] na poziomie pliku index.php), to do elementu li dodajemy klasę selected. Po szczegóły instrukcji warunkowej if również odsyłam do dokumentacji Smarty.

Efekt końcowy, czyli wygenerowany kod HTML

Jeśli zatem otworzymy stronę adres-twojej-strony.pl/index.php?p=about, w kodzie strony powinno widnieć coś takiego:

<!DOCTYPE html>
<html>
<head>
<title>Poradnik do szablonów Smarty</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<h1>Poradnik do szablonów Smarty</h1>
<p>Tutaj dowiesz się, jak zacząć przygodę ze Smarty</p>
</header>
<nav>
<ul>
    <li><a href="?p=home">Strona główna</a></li>
    <li><a href="?p=links">Przydatne linki</a></li>
    <li class="selected"><a href="?p=about">O mnie</a></li>
</ul>
</nav>
<h2>O mnie</h2>
<p>Jestem leniem, ale umiarkowanym :)</p>
<footer>
Copyright © Moja Strona 2014
</footer>
</body>
</html>

Podsumowanie

Co zatem zyskujemy dzięki szablonom Smarty? Bardzo dobry mechanizm rozdzielenia warstwy logiki aplikacyjnej od warstwy prezentacji. Logika aplikacyjna w PHP na podstawie URLa jest w stanie pobrać odpowiednie dane i podać je do silnika Smarty w celu wygenerowania strony. W tej warstwie nie musimy wiedzieć nic na temat tego, z jakich elementów HTML jest zbudowana strona, ani też jakie klasy czy identyfikatory mają konkretne tagi HTML. Tu mamy tylko dane.

Warstwa prezentacji w szablonach Smarty potrafi z kolei ułożyć te dane przy pomocy plików .tpl w ładny kod HTML. To w szablonach jest zdefiniowany kod HTML strony, oraz elementy wypełniane danymi podanymi z PHP.

Zatem jeśli chcesz zmienić sposób pobierania danych, aby nie były trzymane w plikach PHP tylko w bazie (np. MySQL), to zmieniasz logikę w plikach PHP. Jeśli zachowasz format danych podawanych przez $smarty->assign, w samych szablonach Smarty nic się nie zmienia.

Jeśli z kolei chcesz zmienić strukturę strony na poziomie kodu HTML (np. zmienić klasę w jakimś tagu HTML lub np. przenieść nawigację pod treść właściwą), nie musisz zaglądać do plików PHP, a jedynie do szablonów Smarty.

Dzięki takiemu rozwiązaniu zarówno pliki PHP jak i szablony Smarty są przejrzyste i łatwe w modyfikacji. Dzięki wydzieleniu odpowiednich elementów (jak np. nagłówek, nawigacja czy stopka) do osobnych plików, kod szablonu odpowiedzialny za treść właściwą danej podstrony jest bardzo krótki. Dodatkowo, jeśli treść właściwa będzie również pobierana z bazy danych (i przekazywana do odpowiedniej zmiennej przez $smarty->assign), do generowania treści strony wystarczy jeden szablon Smarty, który po prostu wyświetli tą treść!

Dla tych którzy chcieliby sprawdzić jak to działa w praktyce, ale są zbyt leniwi na przepisywanie kolejnych kawałków powyższego kodu, umieściłem wersję spakowaną którą wystarczy :) Należy wcześniej ściągnąć odpowiednią wersję Smarty i utworzyć wymagane katalogi (opisane to zostało na początku tego artykułu).

Poprzednia strona