Cos'è Smarty

Smarty è un template engine fondato sul PHP, ovvero uno strumento che permette una netta distinzione fra il livello applicativo (front-end) e quello della logica (back-end).

La filosofia introdotta da Smarty consiste nei seguenti punti chiave:

  • Agevolare la vita dei web designer
  • Semplificare la lettura e manutenzione
  • Aumentare la sicurezza isolando il codice di back-end

Trattandosi di un template engine, il funzionamento di Smarty prevede una vera e propria compilazione del codice che unisce il front-end (HTML e CSS) e il back-end (OOP PHP) creando un unico file PHP interpretabile dal browser.

Cos'è Smarty

Al di fuori della semplicità e della sicurezza, l'utilizzo di Smarty su grossi applicativi, semplifica di gran lunga l'integrazione dei moduli lato front-end.

I template engine, prevedono infatti una strutturazione ben precisa delle interfacce per permette una vera e propria segmentazione.
In questo modo un componente di una pagina web, può essere utilizzato ripetutamente anche in contesti diversi con condizioni parametriche.

Utilizzo di Smarty

Integrazione del template engine

Utilizzo di Smarty

Per poter utilizzare Smarty all'interno di un applicativo, occorre innanzitutto scaricare il modulo open source dal sito proprietario: http://www.smarty.net/download
Una volta estratto il contenuto scaricato, si va ad inserire la cartella "Smarty" all'interno della document root del progetto web.

Smarty all'interno del codice, altro non è che una classe PHP pronta per essere istanziata e utilizzata.
Ma qual è la logica che permette la distinzione fra la logica e l'applicativo?

Facendo riferimento al pattern MVC, in seguito al processo svolto fra Model e Controller, quest'ultimo dovrà includere una View proprio utilizzando la classe di Smarty.

Ma andiamo con ordine e analizziamo i singoli step che ci condurranno a questa distinzione.

Utilizzo di Smarty

Innanzitutto occorre preparare l'ambiente di sviluppo necessario per lo sviluppo con Smarty.

  • La pagina index.php dovrà sempre essere il riferimento di ciascuna chiamata e dovrà istanziare la classe Smarty
  • Tutti i file di front-end, ovvero le view, dovranno essere create all'interno della cartella templates e dovranno avere l'estenzione .tpl e non più .html o .php
  • Si dovrà creare un'ulteriore cartella chiamata templates_c che non dovrà mai essere manomessa, in quanto si tratta della cartella di output per la compilazione di Smarty
  • Per ottimizzare il lavoro di front-end, si consiglia di creare una pagina di template generica, ad esempio index.tpl nella quale andare ad includere tutte le view differenti a seconda della pagina richiesta, ma evitando la riscrittura di componenti generici come ad esempio l'header o il footer, cambiando esclusivamente il wrap della pagina.

Utilizzo di Smarty

Per iniziare ad utilizzare Smarty, saranno dunque necessarie due sole righe di codice:

<?
# Includere la classe principale di Smarty nel progetto
require_once("Smarty/Smarty.class.php");

# Creare una variabile generica per l'istanza
$VIEW = new Smarty();

Per richiamare la View occorrerà invece utilizzare l'istruzione display:

$VIEW->display("index.tpl");

Per evitare di includere per ogni pagina gli stessi componenti come header o footer, proviamo ad impostare l'ambiente di Smarty e quindi del front-end, facendo riferimento ad una sola View, ovvero la index.tpl, ma variando il contenuto del wrap.

Utilizzo di Smarty

La pagina index.tpl si presenterà dunque in questo modo

<!DOCTYPE html>
<html>
	<head>...</head>
	<body>
		<!-- HEADER -->
		{include file = "components/header.tpl"}
		
		<!-- WRAP -->
		<div id="wrap">
			{include file=$PAGE_VIEW}
		</div>
		
		<!-- FOOTER -->
		{include file = "components/footer.tpl"}
	</body> 
</html>

Utilizzo di Smarty

Analizzando il codice della index.tpl

  • I componenti generici come head e body, sono dichiarati esclusivamente in questa pagina, così come l'inclusione di eventuali fogli CSS o JS.
  • Header e Footer della pagina, uguali per tutto il sito web, sono stati inclusi attraverso due template con Smarty, contenuti nella cartella "templates/components/" e chiamati rispettivamente header.tpl e footer.tpl
  • All'interno del div wrap, andiamo ad includere un file parametrico, determinato cioè da una variabile Smarty che abbiamo rinominato PAGE_VIEW (anche in Smarty le variabili si indicano con il simbolo del dollaro) e che sarà modificato di volta in volta a seconda della View richiamata dal Controller.

In questo modo abbiamo creato una struttura dinamica e facilmente manutenibile.

NOTA BENE: le variabili di Smarty, non entrano in conflitto con le variabili utilizzate nel PHP. Per convenzione comunque, si consiglia di utilizzare il nome delle variabili in Smarty tutte con lettere maiuscole.

Utilizzo di Smarty

Per poter valorizzare la variabile $PAGE_VIEW di Smarty, dovremo intervenire all'interno dei Controller.
Se per esempio si vuole includere nel Controller della home, il file home.tpl, al termine delle varie operazioni dovremo effettuare la seguente operazione:

$VIEW->assign("PAGE_VIEW", "home.tpl");

Come si può osservare, usufruendo dell'istanza di Smarty $VIEW, assegnamo al template engine una variabile chiamata PAGE_VIEW, valorizzata con la stringa "home.tpl".

In questo modo, riscorrendo il processo, la pagina index.php:

  • Creerà un'istanza di Smarty
  • Richiamrerà l'apposito Controller il quale a sua volta dichiarerà una variabile Smarty per indicare la View da includere nel main template (index.tpl)
  • Includerà il template generico index.tpl

La variabile PAGE_VIEW, sarà dunque utilizzabile all'interno dei template index.tpl e home.tpl

Utilizzo di Smarty

Così come per la variabile PAGE_VIEW, è ovviamente possibile passare infinite variabili alle View di Smarty.
Proprio grazie a questo meccanismo, effettuando una buona progettazione delle classi e dei metodi, un front-end developer può riuscire a lavorare in parallelo alla fase di back-end sapendo quali informazioni avrà a disposizione nella View.

<?
# Leggo il nome dell'utente in sessione
$user_name = $_SESSION["user"]["name"];

# Passo il nome al template
$VIEW->assign("USER_NAME", $user_name);

# Includo la view
$VIEW->assign("PAGE_VIEW", "profile.tpl");

Nel file "profile.tpl", potrò dunque mostrare il nome dell'utente in sessione:

<p>Benvenuto {$USER_NAME}</p>

Come si può notare, il codice Smarty dovrà essere sempre racchiuso fra le parentesi graffe.

Utilizzo di Smarty

Se invece si ha a che fare con gli array, per leggere il contenuto è possibile utilizzare il metodo foreach.
Ad esempio se si vuole mostrare a schermo l'elenco degli utenti risultante da una query MySQL, ipotizzando che la variabile Smarty si chiama $USERS e ci siano i campi firstname e lastname:

{if $USERS}
	<ul>
		{foreach key = chiave item = utente from = $USERS}
			<li id="{$chiave}">{$utente.firstname} {$utente.lastname}</li>	
		{/foreach}
	</ul>
{/if}

Il metodo foreach funzionerà dunque così come nel PHP, conservando una chiave ed un valore per ogni riga dell'array. Per accedere all'informazione del campo, si utlizza invece il "." a differenza delle parentesi quadre utilizzate nel PHP.

Nell'esempio è stato utilizzado anche il controllo dell'if, necessario per verificare la validità dell'informazione ricevuta nella View.

Utilizzo di Smarty

Avvalendoci del controllo dell'if, potremmo dunque arricchire il processo di visualizzazione dell'utente, mostrando un messaggio nel caso in cui non vi siano utenti:

{if $USERS}
	<ul>
		{foreach key = chiave item = utente from = $USERS}
			<li id="{$chiave}">{$utente.nome} {$utente.cognome}</li>	
		{/foreach}
	</ul>
{else}
	<p>Nessun utente registrato</p>
{/if}

Utilizzo di Smarty

Come accennato in precedenza, uno dei vantaggi dei template engine, è la possibilità di utlizzare più volte lo stesso template modificandone il comportamento a seconda del contesto.
Se ad esempio avessimo creato l'elenco utenti utilizzato in precedenza, formattato a dovere con un determinato stile, e volessimo riutilizzarlo in più sezioni del codice, modificandone la lista degli utenti da mostrare, potremmo farlo con semplicità.

Innanzitutto dovremmo creare un file tpl chiamato "elenco_utenti.tpl", all'interno del quale andremo ad inserire la lista creata in precedenza.
Questa lista lavora ciclando la variabile $USERS di Smarty. Questo vuol dire che di default, cercherà la variabile fra le informazioni passate dal controller alla main view, ma sarebbe possibile anche forzare questa variabile al momento dell'inclusione del template, con un nuovo elenco da visualizzare.

<!-- Richiamo il template passando un nuovo array per la variabile USERS -->
{include file = "components/elenco_utenti.tpl" USERS=$ALTRO_ELENCO}

Così come potremmo includere un altro elenco sempre nella stessa pagina modificando solo l'informazione (array)

<!-- Richiamo il template passando un altro array per la variabile USERS -->
{include file = "components/elenco_utenti.tpl" USERS=$ALTRO_ELENCO_ANCORA}

Utilizzo di Smarty

Con queste poche nozioni di base su Smarty, è dunque possibile operare al 100% con questo strumento.
Oltre ai controlli di base come gli IF o ai cicli come il FOREACH, ci sono molte altre funzionalità, che però generalmente non sono utilizzate (soprattutto dai designer) in quanto replicano comportamenti e controlli che devono essere svolti a livello logico di back-end.

Per l'elenco delle funzionalità completo, si può comunque far riferimento alla documentazione ufficiale che si trova su http://www.smarty.net/.

Esercitazione finale

Modulo avanzato

Esercitazione finale

Introdurre nel social network implementato nel corso delle lezioni, il pattern MVC e Smarty.
Completare il funzionamento del wall pubblico integrando la logica del like, dei commenti e della condivisione sui post.

<Thank u!>

Sempre pronto a darti una mano