+1

Template Engine TinyButStrong

criado por Fábio Naves em 29/07/2004 8:21am
O nome TinyButStrong vem do fato que esta classe possuir apenas 7 métodos porém ser muito poderosa. Ela permite você unir seus templates HTML com os seus dados MySQL, ODBC, SQL-Server ou ADODB.

Resumo das Caracteriscas Suportadas

Unir “querys” Mysql, ODBC, SQL-Server, ADODB ou dados de um vetor com tabelas HTML (ou qualquer bloco definido por uma tag HTML)
Alternar cores entre linhas de tabelas e mostrar cabeçalho.
Fazer paginação de resultados
Mostrar qualquer variável php
Mostrar valores numéricos e data de forma customizada
Selecionar um valor em uma Option List
Incluir ou executar o conteúdo de outros arquivos
Mostrar condicionado
Sistema de Cachê
E muito mais

Alguns Exemplos

Considere a seguinte tabela no banco de dados:
  <table border=1 cellspacing=0 cellpadding=0>
    <tr> 
      <td width=599 colspan=2 valign=top class="Normal"> <p align=center style='text-align:center'>Exemplo</p></td>
    </tr>
    <tr> 
      <td width=299 valign=top class="Normal"> <p align=center style='text-align:center'>codigo_exem</p></td>
      <td width=299 valign=top class="Normal"> <p align=center style='text-align:center'>Int</p></td>
    </tr>
    <tr> 
      <td width=299 valign=top class="Normal"> <p align=center style='text-align:center'>nome_exem</p></td>
      <td width=299 valign=top class="Normal"> <p align=center style='text-align:center'>Varchar</p></td>
    </tr>
    <tr> 
      <td width=299 valign=top class="Normal"> <p align=center style='text-align:center'>data_exem</p></td>
      <td width=299 valign=top class="Normal"> <p align=center style='text-align:center'>datetime</p></td>
    </tr>
  </table>
  <p>Com os seguintes dados:</p>
  <table border=1 cellspacing=0 cellpadding=0>
    <tr> 
      <td width=199 valign=top class="Normal"> <p align=center style='text-align:center'>codigo_exem</p></td>
      <td width=200 valign=top class="Normal"> <p align=center style='text-align:center'>nome_exem</p></td>
      <td width=200 valign=top class="Normal"> <p align=center style='text-align:center'>data_exem</p></td>
    </tr>
    <tr> 
      <td width=199 valign=top class="Normal"> <p align=center style='text-align:center'>1</p></td>
      <td width=200 valign=top class="Normal"> <p align=center style='text-align:center'>Exemplo 
          de Teste</p></td>
      <td width=200 valign=top class="Normal"> <p align=center style='text-align:center'>2003-02-21</p></td>
    </tr>
    <tr> 
      <td width=199 valign=top class="Normal"> <p align=center style='text-align:center'>2</p></td>
      <td width=200 valign=top class="Normal"> <p align=center style='text-align:center'>Mais 
          um exemplo</p></td>
      <td width=200 valign=top class="Normal"> <p align=center style='text-align:center'>2003-11-02</p></td>
    </tr>
    <tr> 
      <td width=199 valign=top class="Normal"> <p align=center style='text-align:center'>3</p></td>
      <td width=200 valign=top class="Normal"> <p align=center style='text-align:center'>Outro 
          exemplo</p></td>
      <td width=200 valign=top class="Normal"> <p align=center style='text-align:center'>2004-01-12</p></td>
    </tr>
    <tr> 
      <td width=199 valign=top class="Normal"> <p align=center style='text-align:center'>4</p></td>
      <td width=200 valign=top class="Normal"> <p align=center style='text-align:center'>Exemplo 
          de PHP</p></td>
      <td width=200 valign=top class="Normal"> <p align=center style='text-align:center'>2004-01-15</p></td>
    </tr>
  </table>

Exibir estes dados com TinyButStrong é muito simples:

Arquivo: exemplo.php
<?php
include_once(“conexaobd.php”); //arquivo de conexao com banco de dados
include_once(“tbs_class.php”);
$TBS = new clsTinyButStrong;
$TBS->LoadTemplate("exemplo.htm") ; //carregando o template
$TBS->MergeBlock(“exemp”,$con,”select * from exemplos”) // $con é uma conexao com o banco mysql
$TBS->Show();
?>

Arquivo: exemplo.htm (este arquivo é o Template)
  <table border=1 cellspacing=0 cellpadding=0 width=694>
    <tr> 
      <td width=227 height="21" valign=top bgcolor="#339966" class="Normal"> 
        <p align=center style='text-align:center'><span
  style='color:white'>Código</span></p></td>
      <td width=219 valign=top bgcolor="#339966" class="Normal"> <div align="center"><span style='color:white'>Nome</span></div></td>
      <td width=249 valign=top bgcolor="#339966" class="Normal"> <p align=center style='text-align:center'><span
  style='color:white'>Data</span></p></td>
    </tr>
    <tr> 
      <td width=227 valign=top bgcolor="#CCCCCC" class="Normal"> <p align=center style='text-align:center'>[exemp.codigo_exem;block=row]</p></td>
      <td width=219 valign=top bgcolor="#CCCCCC" class="Normal"> <p align=center style='text-align:center'>[exemp.nome_exem;block=row]</p></td>
      <td width=249 valign=top bgcolor="#CCCCCC" class="Normal"> <p align=center style='text-align:center'>[exemp.data_exem;frm=dd/mm/yyyy]</p></td>
    </tr>
    <tr> 
      <td width=227 valign=top class="Normal"> <p align=center style='text-align:center'>[exemp.codigo_exem;block=row]</p></td>
      <td width=219 valign=top class="Normal"> <p align=center style='text-align:center'>[exemp.nome_exem;block=row]</p></td>
      <td width=249 valign=top class="Normal"> <p align=center style='text-align:center'>[exemp.data_exem;frm=dd/mm/yyyy]</p></td>
    </tr>
    <tr> 
      <td width=694 colspan=3 valign=top class="Normal"> <p align=center style='text-align:center'>Sem 
          exemplos Cadastrados. <span lang=EN-US>[exemp;block=row;nodata]</span></p></td>
    </tr>
  </table>

O resultado seria o seguinte:

  <table border=1 cellspacing=0 cellpadding=0 width=694>
    <tr> 
      <td width=227 height="22" valign=top bgcolor="#339966"> 
        <p align=center style='text-align:center'><span
  style='color:white'>Código</span></p></td>
      <td width=219 valign=top bgcolor="#339966" class="Normal"> <div align="center"><span style='color:white'>Nome</span></div></td>
      <td width=249 valign=top bgcolor="#339966" class="Normal"> <p align=center style='text-align:center'><span
  style='color:white'>Data</span></p></td>
    </tr>
    <tr> 
      <td width=227 valign=top bgcolor="#CCCCCC" class="Normal"> <p align=center style='text-align:center'>1</p></td>
      <td width=219 valign=top bgcolor="#CCCCCC" class="Normal"> <p align=center style='text-align:center'>Exemplo 
          de Teste</p></td>
      <td width=249 valign=top bgcolor="#CCCCCC" class="Normal"> <p align=center style='text-align:center'>21/02/2003</p></td>
    </tr>
    <tr> 
      <td width=227 valign=top class="Normal"> <p align=center style='text-align:center'>2</p></td>
      <td width=219 valign=top class="Normal"> <p align=center style='text-align:center'>Mais 
          um exemplo</p></td>
      <td width=249 valign=top class="Normal"> <p align=center style='text-align:center'>02/11/2003</p></td>
    </tr>
    <tr> 
      <td width=227 valign=top bgcolor="#CCCCCC" class="Normal"> <p align=center style='text-align:center'>3</p></td>
      <td width=219 valign=top bgcolor="#CCCCCC" class="Normal"> <p align=center style='text-align:center'>Outro 
          exemplo</p></td>
      <td width=249 valign=top bgcolor="#CCCCCC" class="Normal"> <p align=center style='text-align:center'>12/01/2004</p></td>
    </tr>
    <tr> 
      <td width=227 valign=top class="Normal"> <p align=center style='text-align:center'>4</p></td>
      <td width=219 valign=top class="Normal"> <p align=center style='text-align:center'>Exemplo 
          de PHP</p></td>
      <td width=249 valign=top class="Normal"> <p align=center style='text-align:center'>15/01/2004</p></td>
    </tr>
  </table>

Note que a formatação da data é definida no template. Pode-se definir no também a formatação de campos numéricos para , ou . e o número de casas decimais.
Se quisermos exibir estes valores em uma Option List basta modificarmos o template. Confira o exemplo abaixo:

Arquivo: exemplo2.php

<?php
include_once(“conexaobd.php”); // arquivo de conexao com banco de dados
include_once(“tbs_class.php”);
$TBS = new clsTinyButStrong;
$TBS->LoadTemplate("exemplo2.htm"); // modificamos apenas o template
$TBS->MergeBlock(“exemp”,$con,”select * from exemplos”); //$con é uma conexao com o banco mysql
?>

Arquivo: exemplo2.htm

<html>
    <head><title>Documento sem título</title></head>
<body>
    <form method="post" action="[sys.script_name]">
    <select name="select>
       <option alue="[exemplos.codigo_exem;block=opt]">[exemplos.nome_exem;block=opt]</option>
    </select>
    </form>
</body>
</html>

Teríamos como resultado:

<html>
    <head><title>Documento sem título</title></head>
<body>
<form method="post" action="exemplo2.php">
<select name="select">
<option value="1">Exemplo de Teste</option>
<option value="2">Mais um exemplo</option>
<option value="3">Outro exemplo</option>
<option value="4">Exemplo de PHP</option>
</select>
</form>
</body>
</html>
</body>
</html>

A Classe TinyButStrong pode ser obtida em <a href="http://www.tinybutstrong.com/">www.tinybutstrong.com</a>, site que contém o manual desta ferramenta e uma serie de excelentes exemplos que ajudarão você a entender como ela funciona.

Comentários:

Mostrando 1 - 9 de 9 comentários
Dam disse:
Bom artigo.
20/11/2008 4:25am (~8 anos atrás)

E se eu fosse usar a paginacao da classe como ficaria?poderia me dar um exemplo?Obrigado
30/09/2005 4:36pm (~11 anos atrás)

Bozo disse:
Ainda não tinha trabalhado com TinyButStrong, mas agora já estou fazendo alguns testes. Achei a implementação simples. muito bom mesmo.

abraço.
11/09/2004 12:39am (~12 anos atrás)

Eu sou daqueles que quando utilizam uma boa classe, não fica se preocupando com as similares que surgem, afinal de contas acredito que não devemos ficar "reinventando a roda". No meu caso utilizava o Smarty desde quando o conheci no Uebimiau, quando vi o artigo pensei "mais uma template class", mas resolvi ler o artigo ... achei simples e gostei da possibilidade de formatação na própria tag e resolvi testar. Ainda não desenvolvi nenhum projeto com TinyButStrong, mas já tenho certeza de ganho em produtividade. Valeu pela dica navix !!!
05/09/2004 6:19pm (~12 anos atrás)

Gostei muito. Estou acostumado com a Smarty, mas esta tem alguns metodos fáceis de entender, e o help através de exemplos que mostram as páginas de template, a do código php e o resultado fantástico.
Obrigado por me fazer conhecer essa classe.
20/08/2004 4:46pm (~12 anos atrás)

Fábio Naves disse:
Este exemplo retirado direto do site da classe, http://www.tinybutstrong.com/ , mostra o funcionamento com ADODB:
<?

include_once('tbs_class.php') ;

//Connection to the database
//The following file should connect to the database and set the variable $cnx_id.
if (!isset($_SERVER)) $_SERVER=&$HTTP_SERVER_VARS ; //PHP<4.1.0
require($_SERVER['DOCUMENT_ROOT'].'/cnx_mysql.php');

//Example of a ADODB connection for SQL-Server
//$cnx_prm = 'PROVIDER=SQLOLEDB.1;PERSIST SECURITY INFO=FALSE;DATA SOURCE=$cnx_srv;INITIAL CATALOG=$cnx_db;' ;
//$cnx = new com('ADODB.Connection');
//$cnx->Open($cnx_prm,'user','password') ;

$TBS = new clsTinyButStrong ;
$TBS->LoadTemplate('tbs_us_examples_dataadodb.htm') ;
$TBS->MergeBlock('blk1',$cnx,'SELECT * FROM t_tbs_exemples') ;
$cnx->Close() ;
$TBS->Show() ;

?>

====Abaixo o template====
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TinyButStrong</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="tbs_us_examples_0styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<p align="center" class="title-page">Example of ADODB Merge</p>
<table border="1" align="center" cellpadding="2" cellspacing="0">
<tr bgcolor="#CACACA">
<td width="50">Position</td>
<td width="150">Nickname</td>
<td width="50">Score</td>
<td width="100"><div align="center">Date</div>
</td>
</tr>
<tr bgcolor="#F0F0F0">
<td>[blk1.#]</td>
<td>[blk1.res_name;block=tr]</td>
<td>
<div align="right">[blk1.res_score]</div>
</td>
<td>
<div align="center">[blk1.res_date;frm='mm-dd-yyyy']</div>
</td>
</tr>
<tr bgcolor="#E6E6E6">
<td>[blk1.#]</td>
<td>[blk1.res_name;block=tr]</td>
<td>
<div align="right">[blk1.res_score]</div>
</td>
<td><div align="center">[blk1.res_date;frm='mm-dd-yyyy']</div>
</td>
</tr>
<tr bgcolor="#E6E6E6">
<td colspan="4" bgcolor="#FFCFB9">[blk1;block=tr;nodata]There is no data. </td>
</tr>
</table>
<p align="center">There are [blk1.#] displayed lines.</p>
</body>
</html>
05/08/2004 1:17pm (~12 anos atrás)

Parabéns pelo artigo. Parece-me muito simples e de excelente aptação esta classe. Minha dúvida ao seu uso seria em relação a trabalhar com classes de interação com o banco de dados, como a classe ADODB, que em minha opinião é uma classe imbatível neste quesito.

05/08/2004 9:27am (~12 anos atrás)

Usa fasttemplate ou smarty template e era um
saco criar o template.
Essa classe simplificou bastante .

04/08/2004 4:23pm (~12 anos atrás)

IrON WoRLD disse:
Cara, sempre fiquei com um pé atraz quando escutava falar de template... Sou artigo mudou meu conceito! Muito bom! Ja comecei a utilizar a classe!

Parabéns!
28/07/2004 11:46pm (~12 anos atrás)

Novo Comentário:

(Você pode usar tags como <b>, <i> ou <code>. URLs serão convertidas para links automaticamente.)