Tutorial PHP Smarty Template Engine 4

Nesse post vou abordar a utilização do Smarty Template Engine (versão 4.0.0) (https://www.smarty.net/) de forma introdutória.

O Smarty é um mecanismo para gerenciar templates em projetos desenvolvidos na linguagem PHP. O objetivo dele é viabilizar a separação da parte lógica da aplicação (linguagem php) e da parte de apresentação (html/css). Dessa forma, teremos uma camada lógica (com a implementação das regras de negócio, acesso aos dados, manipulação de sessões/cookies) e uma outra camada de apresentação (para apresentar o layout da aplicação).

Antes de iniciar, vamos imaginar o seguinte array php:

$atletas = ['Michael Jordan', 'Serena Williams', 'Tiger Woods'];

Usando apenas a linguagem php, para exibir os atletas em uma lista teríamos um código semelhante ao seguinte:

<ul>
<?php foreach ($atletas as $atleta) : ?>
   <li><?php echo $atleta ?></li>
<?php endforeach; ?>
</ul>

Esse mesmo array sendo exibido em uma lista através do Smarty ficaria assim:

<ul>
{foreach $atletas as $atleta}
   <li>{$atleta}</li>
{/foreach}
</ul>

Veja que temos um código mais limpo, legível e elegante =)

Como instalar o Smarty 4.0.0?

Para instalar o Smarty 4, podemos baixar os arquivos compactados pelo github (https://github.com/smarty-php/smarty/releases/tag/v4.0.0) ou então instalar via Composer através do seguinte comando:

composer require smarty/smarty

OBS 1: Nesse tutorial, usamos como base uma instalação via Composer.

OBS 2: O Smarty 4.0.0 requer o php na versão 7.1 ou superior.

Estrutura de diretórios do projeto

Quando fazemos a instalação utilizando o Composer, é criada a pasta “vendor” (é dentro dela que ficam os arquivos da biblioteca Smarty).

Além do “vendor”, vamos criar também os seguintes diretórios:

  • templates
  • templates_c
  • cache
  • config

Primeiro exemplo

A ideia desse tutorial é explicar de forma bem simples e para iniciantes como funciona o Smarty. Sendo assim, vamos colocar códigos básicos do php. Como dito anteriormente, o Smarty possibilita que a gente separe a camada de lógica da nossa aplicação da camada de apresentação. Sendo assim, teremos a lógica no arquivo “index.php” e a apresentação no arquivo “templates/index.tpl”

Então vamos criar na raiz do nosso projeto, o arquivo “index.php”. Primeiramente, vamos criar nesse arquivo uma instância da classe “Smarty()”. Vamos definir os diretórios de template, templates compilados, cache e config. Por fim, vamos executar o método “testInstall” para verificar se está tudo ok.

1
2
3
4
5
6
7
8
9
10
11
12
<?php
 
require 'vendor/autoload.php';
 
$smarty = new Smarty();
 
$smarty->setTemplateDir('templates/');
$smarty->setCompileDir('templates_c/');
$smarty->setCacheDir('cache/');
$smarty->setConfigDir('config/');
 
$smarty->testInstall();

Quando executarmos, esperamos ter o seguinte resultado:

Smarty install test
Imagem 1: Smarty install test

Certo. Como está tudo funcionando, podemos excluir a linha 12.

Agora vamos ver como podemos passar variáveis e valores da nossa camada de lógica para nossa camada de apresentação. Iremos passar 2 variáveis (“titulo” e “mensagem“) para o método “assign” do Smarty. Por fim, vamos chamar o template “index.tpl” (que será criado dentro da pasta “templates“).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
 
require 'vendor/autoload.php';
 
$smarty = new Smarty();
 
$smarty->setTemplateDir('templates/');
$smarty->setCompileDir('templates_c/');
$smarty->setCacheDir('cache/');
$smarty->setConfigDir('config/');
 
$smarty->assign('titulo', 'PHP + Smarty');
$smarty->assign('mensagem', 'Aprendendo um pouco sobre Smarty');
 
$smarty->display('index.tpl');

É importante entender que dentro do arquivo “index.tpl” nós teremos acesso às variáveis “titulo” e “mensagem“.

Criando o arquivo “index.tpl” dentro da pasta “templates“, vamos colocar o seguinte código.

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$titulo}</title>
</head>
<body>
    <h1>{$titulo}</h1>
    <h2>{$mensagem}</h2>
</body>
</html>

Para acessar as variáveis basta circundarmos com chaves: {$nomeDaVariavel}

Execute novamente ou atualize o navegador e veja o resultado.

Segundo exemplo: trabalhando com arrays

O método assign permite que a gente atribua qualquer tipo de variável (variável comum, arrays, objetos, etc.) para posteriormente ser utilizada dentro do arquivo de template.

No nosso arquivo “index.php”, agora vamos passar um array com uma lista de atletas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
 
require 'vendor/autoload.php';
 
$smarty = new Smarty();
 
$smarty->setTemplateDir('templates/');
$smarty->setCompileDir('templates_c/');
$smarty->setCacheDir('cache/');
$smarty->setConfigDir('config/');
 
$smarty->assign('titulo', 'PHP + Smarty');
$smarty->assign('mensagem', 'Aprendendo um pouco sobre Smarty');
 
$atletas = [    'Michael Jordan',     'Serena Williams',     'Tiger Woods']; $smarty->assign('atletas', $atletas); 
$smarty->display('index.tpl');

Para percorrer esse array dentro do “index.tpl” utilizamos o {foreach} {/foreach}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$titulo}</title>
</head>
<body>
    <h1>{$titulo}</h1>
    <h2>{$mensagem}</h2>
    <h3>Lista de Atletas</h3>
    <ul>
        {foreach $atletas as $atleta}            <li>{$atleta}</li>        {/foreach}    </ul>
</body>
</html>

Agora vamos supor um array multidimensional, onde tenhamos em cada posição as chaves “nome” e “esporte”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php
 
require 'vendor/autoload.php';
 
$smarty = new Smarty();
 
$smarty->setTemplateDir('templates/');
$smarty->setCompileDir('templates_c/');
$smarty->setCacheDir('cache/');
$smarty->setConfigDir('config/');
 
$smarty->assign('titulo', 'PHP + Smarty');
$smarty->assign('mensagem', 'Aprendendo um pouco sobre Smarty');
 
$atletas = [    '0' => [        'nome' => 'Michael Jordan',        'esporte' => 'Basquete'    ],    '1' => [        'nome' => 'Serena Williams',        'esporte' => 'Tênis'    ],    '2' => [        'nome' => 'Tiger Woods',        'esporte' => 'Golfe'    ],]; $smarty->assign('atletas', $atletas); 
$smarty->display('index.tpl');

Para acessar uma posição do array pela sua chave, utilizamos o ponto “.”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$titulo}</title>
</head>
<body>
    <h1>{$titulo}</h1>
    <h2>{$mensagem}</h2>
    <h3>Lista de Atletas</h3>
    <ul>
        {foreach $atletas as $atleta}
            <li>{$atleta.nome} - {$atleta.esporte}</li>        {/foreach}
    </ul>
</body>
</html>

Terceiro exemplo: trabalhando com objetos

Para passar um objeto do php para o arquivo de templates basta passar esse objeto para o método “assign“, assim como já fizemos para variáveis comuns e arrays.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?php
 
require 'vendor/autoload.php';
 
$smarty = new Smarty();
 
$smarty->setTemplateDir('templates/');
$smarty->setCompileDir('templates_c/');
$smarty->setCacheDir('cache/');
$smarty->setConfigDir('config/');
 
//$smarty->testInstall();
 
$smarty->assign('titulo', 'PHP + Smarty');
$smarty->assign('mensagem', 'Aprendendo um pouco sobre Smarty');
 
$atletas = [
    '0' => [
        'nome' => 'Michael Jordan',
        'esporte' => 'Basquete'
    ],
    '1' => [
        'nome' => 'Serena Williams',
        'esporte' => 'Tênis'
    ],
    '2' => [
        'nome' => 'Tiger Woods',
        'esporte' => 'Golfe'
    ],
];
 
$smarty->assign('atletas', $atletas);
 
//Atribuindo objeto$user = new stdClass;$user->nome = 'Administrador';$user->perfil = 'admin'; $smarty->assign('user', $user); 
$smarty->display('index.tpl');

Para acessar os atributos do objeto no arquivo “index.tpl” é semelhante ao php (->)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$titulo}</title>
</head>
<body>
    <h1>{$titulo}</h1>
    <h2>{$mensagem}</h2>
    <h3>Lista de Atletas</h3>
    <ul>
        {foreach $atletas as $atleta}
            <li>{$atleta.nome} - {$atleta.esporte}</li>
        {/foreach}
    </ul>
    <p>Usuário: {$user->nome}</p></body>
</html>

Quarto exemplo: acessando $_GET, $_POST, $_SESSION

A variável reservada {$smarty} possibilita o acesso a informações que foram submetidas através de uma requisição. Abaixo alguns exemplos de sua utilização

<!-- URL: http://localhost:8080/?page=contato -->
{$smarty.get.page}
 
<!-- campos "nome" e "email" de um formulário submetido via POST -->
{$smarty.post.nome}
{$smarty.post.email}
 
<!-- Acessar a session "isLogged" -->
{$smarty.session.isLogged}

O Smarty também nos possibilita a atribuição de um valor padrão (“default”) para qualquer variável. Dessa forma, se a variável não estiver “setada”, será exibido o valor “default”.

<p>{$usuarioLogado|default:"Visitante"}</p>

Quinto exemplo: estrutura condicional (if/else)

Apesar de ser recomendável que regras de negócio estejam na camada lógica, algumas vez fatalmente surgirá a necessidade de se utilizar estruturas condicionais dentro de um arquivo de template.

A utilização é simples, através de {if} e {/if}

{if $user->perfil == "admin"}
   <p><a href="#">Gerenciar usuários</a></p>
{/if}

Caso seja necessário, também podemos utilizar o {else}

{if $user->perfil == "admin"}
   <p><a href="#">Gerenciar usuários</a></p>
{else}
   <p><a href="#">Meu perfil</a></p>
{/if}

Enfim. Vejam que a utilização da sintaxe do Smarty é bem simples e intuitiva e a utilização dessa biblioteca pode ajudar bastante no desenvolvimento dos nossos projetos em quesitos de separação de lógica e apresentação e também na produção de um código mais limpo.

Espero que tenham gostado desse conteúdo.

Abs!

É formado em Sistemas de Informação, pós-graduado em Sistemas de Banco de Dados e mestre em Educação com foco em Tecnologias Sociocomunitárias. Trabalha como professor de ensino técnico e tecnológico no Instituto Federal de Educação, Ciência e Tecnologia de São Paulo ministrando disciplinas nas áreas de programação, banco de dados, desenvolvimento de projetos e engenharia de software.

Posts relacionados

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *