Template Smarty - Instalando e testando.


Não sabe o que é Smarty?  veja no aqui.

Primeiro vamos até o site oficial e vamos baixar. http://www.smarty.net/
Agora vamos descompactar na raiz do nosso servidor e vamos criar uma pagina chamada index.php:

<?php
/*  Inclui classe principal do Smarty */
require("libs/Smarty.class.php");
/**
* Instancia Smarty e seta propriedades
* compile_check = avisa ao Smarty para mostrar erros de compilação
* debugging = em fase de desenvolvimento é bom deixar como true,
* uma vez que abre um popup com todas as informações da página gerada
*/
$smarty = new Smarty;
$smarty->compile_check = true;
$smarty->debugging = false;
/**
* Assign é um método do Smarty para criar uma nova variável que será usada no Template
*
* sintaxe: assign->('nome_variavel', 'valor');
*/
$smarty->assign('nome', 'Eder');
$smarty->assign('sobrenome', 'Webeder');
/* Mostra o Template na tela
* observe que até aqui nada foi exibido, só processado
*/
$smarty->display('index.tpl');

?>


Agora vamos criar a nossa index.tpl que ficará dentro da pasta templates:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TESTE DE SMARTY</title>
<link rel="stylesheet" type="text/css" href="http://localhost/smarty/templates/estilo.css">


</head>

<body>

<table width="937" height="353" border="0" align="center" cellpadding="15" cellspacing="0">
  <tr>
    <td height="105" bgcolor="#006699"><h2 align="center" class="style1">TEMPLATE SMARTY EXEMPLO</h2></td>
  </tr>
  <tr>
    <td height="172" valign="top" bgcolor="#FFFFFF">
      <p>&nbsp;</p>
      <p class="content">Conteúdo</p>
      <!--Smarty conteúdo dinamico -->
      <p><strong>Nome:</strong> {$nome} <br />
        <strong>Sobrenome:</strong> {$sobrenome} </p></td>
  </tr>
</table>
<div id="footer">Rodapé</div>
</body>
</html>


Só para dar uma enfeitada no nosso template vamos criar um estilo.css  

@charset "utf-8";
/* CSS Document */

.style1 {
    font-weight: bold;
    color: #FFFFFF;
}
#footer {
    text-align: center;
    clear: both;
    height: 100px;
    width: 100%;
    background-color: #006699;
    padding-top: 70px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #FFFFFF;
    }body {
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-color: #CCCCCC;
}
.content {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-align: center;
    clear: both;
    height: auto;
    width: auto;
}

Exemplo do resultado:



Comentários

Postar um comentário