Szablony Smarty, szybkie wprowadzenie

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.

Szablony Smarty

Spis treści

Co to są te Smarty?
Jak zacząć?
Jak to działa?
Kilka podstron w oparciu o szablony (strona 2)
Podsumowanie (strona 2)

Co to są te Smarty?

Smarty to silnik szablonów dla PHP, który ułatwia oddzielenie warstwy prezentacji (HTML/CSS) od logiki (czyli tego co jest w PHP, łącznie z wyciąganiem danych z bazy). Dzięki temu jeśli chcesz zmienić coś w logice (np. zmieniasz bazę danych na inną, robisz refaktoring kodu PHP dla swojej strony), nie musisz się martwić że zepsujesz coś w samym HTML.

Ponadto, bardzo szybko będziesz w stanie zmienić strukturę HTML swojej strony, bez zaglądania w kod PHP. Jeśli chcesz zmienić style CSS – również nie będziesz musiał zaglądać w kod PHP, aby zobaczyć jakie klasy/identyfikatory nadane były w konkretnych blokach kodu HTML.

Powtarzalne części stron

Zwykle strona internetowa ma na wszystkich podstronach jakąś część wspólną: stopkę, nagłówek z logotypem, czy menu (menu może być lekko inne ze względu na zaznaczenie aktualnej strony, ale to też nie problem). Dzięki szablonom Smarty, możesz wspólne części wynieść do osobnych plików. Zmieniając w jednym miejscu kod HTML np. dla stopki strony, zmieni się ona na każdej podstronie.

Jak zacząć?

Przede wszystkim musisz ściągnąć silnik szablonów Smarty ze strony www.smarty.net. Po ściągnięciu pliku, rozpakuj go do katalogu głównego swojej strony (np. rozpakowując plik Smarty-3.1.21.tar.gz, utworzysz podkatalog Smarty-3.1.21). Teraz stwórz następujące podkatalogi w katalogu głównym swojej strony:

cache – na pliki cache (domyślnie nie są wykorzystywane)
configs – na pliki konfiguracyjne Smarty
templates – na szablony, które niebawem stworzysz
templates_c – na wersje skompilowane szablonów

Test poprawnej instalacji Smarty

Stwórz plik smarty_test.php z zawartością:

<?php
require_once("Smarty-3.1.21/libs/Smarty.class.php");
$smarty = new Smarty();
$smarty->testInstall();
?>

Jeśli wszystko zostało zrobione, to na stronie adres-twojej-strony.pl/smarty_test.php zobaczysz coś w tym stylu:

Smarty Installation test...
Testing template directory...
/home/leniwy/public_html/templates is OK.
Testing compile directory...
/home/leniwy/public_html/templates_c is OK.
Testing plugins directory...
/home/leniwy/public_html/Smarty-3.1.21/libs/plugins is OK.
Testing cache directory...
/home/leniwy/public_html/cache is OK.
Testing configs directory...
/home/leniwy/public_html/configs is OK.
Testing sysplugin files...
... OK
Testing plugin files...
... OK
Tests complete.

Oznacza to, że możesz zacząć korzystać z szablonów Smarty!

Jak to działa?

Krótki przykład przekazania danych do szablonu

Zasada działania jest prosta – po pierwsze, musisz stworzyć szablon (jeden lub więcej), który będzie służył do tworzenia kodu HTML Twojej strony. Po drugie, w PHP musisz uzupełnić dane dla tego szablonu. Po trzecie (i ostatnie) – renderujesz stronę.

Zatem stwórzmy prosty szablon pierwszy.tpl, oczywiście w katalogu templates

<!DOCTYPE html>
<html>
<head>
<title>{$title}</title>
</head>
<body>
<div>
{$content}
</div>
</body>
</html>

Aby z niego skorzystać, stwórzmy plik pierwszy.php

<?php
require_once("Smarty-3.1.21/libs/Smarty.class.php");
$smarty = new Smarty();
$smarty->assign('title', 'Tytuł mojej strony');
$smarty->assign('content', '<h1>Nagłówek</h1><p>Pierwszy paragraf</p><p>Drugi paragraf</p>');
$smarty->display('pierwszy.tpl');
?>

Teraz pod adresem adres-twojej-strony.pl/pierwszy.php powinna być widoczna strona o następującej treści:

<!DOCTYPE html>
<html>
<head>
<title>Tytuł mojej strony</title>
</head>
<body>
<div>
<h1>Nagłówek</h1><p>Pierwszy paragraf</p><p>Drugi paragraf</p>
</div>
</body>
</html>

W powyższym przykładzie pojawiły się dwie nowe metody na obiekcie Smarty:

assign – służy do stworzenia zmiennej dostępnej później z poziomu szablonu Smarty, jednocześnie przypisując jej konkretną wartość
display – generuje kod HTML, korzystając ze wskazanego szablonu.

Wartości zmiennych nie muszą być oczywiście tekstem, mogą to być struktury złożone lub obiekty. Więcej informacji jak się dobrać do konkretnego elementu takiej złożonej struktury, można znaleźć w dokumentacji Smarty.

Podział szablonu na kilka plików

Tak jak zostało wspomniane na wstępie, na wielu podstronach powtarzane są pewne bloki wspólne jak nagłówek, stopka czy menu. Służy do tego funkcja (funkcja Smarty) include. Możemy zatem zrobić nowy szablon drugi.tpl:

<!DOCTYPE html>
<html>
<head>
<title>{$title}</title>
</head>
<body>
{include file='drugi_naglowek.tpl'}
<div>
{$content}
</div>
{include file='drugi_stopka.tpl'}
</body>
</html>

Jak widać, nagłówek i stopka strony, zostały wyniesione do osobnych plików, czyli drugi_naglowek.tpl:

<div id="header">
<h1>{$header_title}</h1>
</div>

oraz drugi_stopka.tpl:

<div id="footer">
{$copyright}     
</div>

Do tego lekko rozszerzymy plik PHP, czyli drugi.php:

<?php
require_once("Smarty-3.1.21/libs/Smarty.class.php");
$smarty = new Smarty();
$smarty->assign('title', 'Tytuł mojej strony');
$smarty->assign('header_title', 'Strona z przykładem wykorzystania szablonów Smarty');
$smarty->assign('content', '<h2>Nagłówek</h2><p>Pierwszy paragraf</p><p>Drugi paragraf</p>');
$smarty->assign('copyright', 'Copyright © Moja Strona 2014');
$smarty->display('drugi.tpl');
?>

W efekcie, na swojej stronie adres-twojej-strony.pl/drugi.php powinno się pojawić coś takiego:

<!DOCTYPE html>
<html>
<head>
<title>Tytuł mojej strony</title>
</head>
<body>
<div id="header">
<h1>Strona z przykładem wykorzystania szablonów Smarty</h1>
</div>
<div>
<h2>Nagłówek</h2><p>Pierwszy paragraf</p><p>Drugi paragraf</p>
</div>
<div id="footer">
Copyright © Moja Strona 2014
</div>
</body>
</html>

Oczywiście dzięki takiemu podziałowi, możemy na wielu szablonach dodawać ten sam nagłówek i stopkę.

Następna strona