Helper HTML
Logo que comecei a estudar e a trabalhar com o CodeIgniter, eu percebi que eu estava muito ansioso para pôr a mão na massa e a codificar de qualquer jeito.
Aprendi o “basicão” do CI e já fui tentando desenvolver meu primeiro sistema.
Após alguns projetos de brincadeira e alguns outros mais sérios, já estava bem familiarizado com as funcionalidades deste Framework e já tinha avançado bastante.
Porém, um belo dia, dando uma olhada no User Guide do CI em seu site, resolvi ver que mais o CI poderia me oferecer.
Navegando ali pela área de Helpers, resolvi olhar um por um para ver no que isto poderia me ajuda.
Qual não foi minha surpresa ao descobrir que o CI tem várias funçõeszinhas que em princípio parecem bobas, mas na verdade são uma mão na roda.
Entre os vários helpers que havia lá resolvi clicar no Helper HTML, que traz algumas funcionalidades bem simples mas que a gente usa todo tempo em um site.
Quando percebi isso então eu notei que não fui muito correto em aprender o básico do CI, começar a desenvolver vários projetos e nunca mais voltar no User Guide para ver o que mais tinha de bom lá.
Por isso eu recomendo: se você está começando agora no CI, antes de iniciar um projeto grande, dê uma passada no User Guide e veja o que existe lá. Não precisa entrar em todas as funções, mas pelo menos passe o olho por cima de algumas, para que pelo menos você tenha uma pequena noção que tal função existe e que pode vir a ser útil no futuro.
Hoje vamos falar sobre o Helper HTML. Dentro deste helper há algumas funcionalidades que criam atalhos para funções que usamos muito em nossos sites. Veja abaixo uma listagem:
- br()
- heading()
- img()
- link_tag()
- nbs()
- ol() e ul()
- meta()
- doctype()
Todas estas funções acima você pode fazer usando HTML padrão, porém, o pessoal da Ellis Lab, juntou o que é mais utilizado para que houvesse um jeito mais fácil de colocarmos em nosso código. Vamos ver um exemplo de cada uma das funções acima.
Antes de começarmos a usar este helper, devemos carregá-lo. Para isto use o seguinte comando:
$this->load->helper("html");
Após isto, as funções abaixo já estarão disponíveis para uso.
br()
Produz a tag <br />, porém, você pode fornecer um número como parâmetro, dizendo quantos br’s você quer. Exemplo:
Ao digitar:
echo br(3)
Irá ser produzido: <br /><br /><br />
heading()
Produz a tag H1. O primeiro parâmetro é o texto a ser exibido, o segundo parâmetro é o tamanho do cabeçalho. Exemplo:
echo heading("Bem-vindo", 3);
Irá produzir: <h3>Bem-vindo</h3>
Se você quiser adicionar mais atributos em sua tag, como classes, ids ou estilos, poderá passar no terceiro parâmetro. Assim:
echo heading('Bem-vindo', 3, 'class="azul"');
O comando acima irá produzir: <h3 class=”azul”>Bem-vindo</h3>
img()
Cria a tag <img />. O primeiro parâmetro contém o endereço de origem da imagem. Veja:
echo ('imagens/foto.jpg');
Irá produzir: <img src=”http://site.com/imagens/foto.jpg”>
Existe um segundo parâmetro opcional que é um valor TRUE/FALSE que especifica se o src vai receber a página especificada em $config[‘index_page’] ao criar o endereço. Presumidamente, seria assim se você estivesse usando um controller de mídias.
echo img('imagens/foto.jpg', TRUE);
Irá produzir: <img src=”http://site.com/index.php/imagens/fotos.jpg” alt=”” />
Se você quiser, um array associativo poderá ser passado à função img() para ter um controle completo sobre todos os atributos e valores. Se um atributo alt não for fornecido, o CodeIgniter irá gerar uma string vazia.
$image_properties = array( 'src' => 'images/picture.jpg', 'alt' => 'Me, demonstrating how to eat 4 slices of pizza at one time', 'class' => 'post_images', 'width' => '200', 'height' => '200', 'title' => 'That was quite a night', 'rel' => 'lightbox', ); img($image_properties); // <img src="http://site.com/index.php/images/picture.jpg" alt="Me, demonstrating how to eat 4 slices of pizza at one time" class="post_images" width="200" height="200" title="That was quite a night" rel="lightbox" />
link_tag()
Esta é uma função que pra mim foi fundamental. Não sei porque, mas eu geralmente não consigo lembrar da sintaxe de como inserir um arquivo css no meu documento HTML. Eu sempre tenho que copiar de outra página.
Esta função cria a tag <link />. Isto é bem útil para arquivos de folhas de estilos, e claro, assim também como outros links. Os parâmetros são: href, com o rel opcional, type, title, media e index_page. index_page é um valor TRUE/FALSE que se a página especificada em $config[‘index_page’] deve ser adicionada ao endereço no momento da criação. Exemplo:
echo link_tag('css/mystyles.css');
// Produzirá: <link href="http://site.com/css/mystyles.css" rel="stylesheet" type="text/css" />
Outros exemplos:
echo link_tag('favicon.ico', 'shortcut icon', 'image/ico');
// <link href="http://site.com/favicon.ico" rel="shortcut icon" type="image/ico" />
echo link_tag('feed', 'alternate', 'application/rss+xml', 'My RSS Feed');
// <link href="http://site.com/feed" rel="alternate" type="application/rss+xml" title="My RSS Feed" />
Você também pode passar um array associativo para a função link() para ter um controle melhor sobre todos os atributos e valores.
$link = array( 'href' => 'css/printer.css', 'rel' => 'stylesheet', 'type' => 'text/css', 'media' => 'print' ); echo link_tag($link); // <link href="http://site.com/css/printer.css" rel="stylesheet" type="text/css" media="print" />
nbs()
Gera o non-braking spaces ( ) baseado no número que você fornecer. Exemplo:
echo nbs(3);
Produzirá:
ol() e ul()
Permite gerar listas ordenadas ou não ordenadas de arrays simples ou multidimensionais. Exemplo:
$list = array( 'red', 'blue', 'green', 'yellow' ); $attributes = array( 'class' => 'boldlist', 'id' => 'mylist' ); echo ul($list, $attributes);
O código acima irá produzir:
<ul class="boldlist" id="mylist"> <li>red</li> <li>blue</li> <li>green</li> <li>yellow</li> </ul>
Abaixo um exemplo mais complexo utilizando uma array multidimensional.
$this->load->helper('html');
$attributes = array(
'class' => 'boldlist',
'id' => 'mylist'
);
$list = array(
'colors' => array(
'red',
'blue',
'green'
),
'shapes' => array(
'round',
'square',
'circles' => array(
'ellipse',
'oval',
'sphere'
)
),
'moods' => array(
'happy',
'upset' => array(
'defeated' => array(
'dejected',
'disheartened',
'depressed'
),
'annoyed',
'cross',
'angry'
)
)
);
echo ul($list, $attributes);
O código produzirá:
<ul class="boldlist" id="mylist"> <li>colors <ul> <li>red</li> <li>blue</li> <li>green</li> </ul> </li> <li>shapes <ul> <li>round</li> <li>suare</li> <li>circles <ul> <li>elipse</li> <li>oval</li> <li>sphere</li> </ul> </li> </ul> </li> <li>moods <ul> <li>happy</li> <li>upset <ul> <li>defeated <ul> <li>dejected</li> <li>disheartened</li> <li>depressed</li> </ul> </li> <li>annoyed</li> <li>cross</li> <li>angry</li> </ul> </li> </ul> </li> </ul>
meta()
Te ajuda a gerar meta tags. Você pode passar strings para a função, ou array simples ou multidimensionais. Exemplos:
echo meta('description', 'My Great site');
// Gera: <meta name="description" content="My Great Site" />
echo meta('Content-type', 'text/html; charset=utf-8', 'equiv'); // Note the third parameter. Can be "equiv" or "name"
// Gera: <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
echo meta(array('name' => 'robots', 'content' => 'no-cache'));
// Gera: <meta name="robots" content="no-cache" />
$meta = array(
array('name' => 'robots', 'content' => 'no-cache'),
array('name' => 'description', 'content' => 'My Great Site'),
array('name' => 'keywords', 'content' => 'love, passion, intrigue, deception'),
array('name' => 'robots', 'content' => 'no-cache'),
array('name' => 'Content-type', 'content' => 'text/html; charset=utf-8', 'type' => 'equiv')
);
echo meta($meta);
// Gera:
// <meta name="robots" content="no-cache" />
// <meta name="description" content="My Great Site" />
// <meta name="keywords" content="love, passion, intrigue, deception" />
// <meta name="robots" content="no-cache" />
// <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
doctype()
Ajuda você irá gerar as declarações document types ou DTD’S. “XHTML 1.0 Strict” é usado por padrão, mas muitos outros doctypes estão disponíveis.
echo doctype();
// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
echo doctype('html4-trans');
// <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Abaixo segue uma lista dos possíveis doctypes que você pode utilizar. Todos são configuráveis e estão salvos aqui: application/config/doctypes.php
| DoctypdOCTe | Opção | Resultado |
|---|---|---|
| XHTML 1.1 | doctype(‘xhtml11’) | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> |
| XHTML 1.0 Strict | doctype(‘xhtml1-strict’) | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> |
| XHTML 1.0 Transitional | doctype(‘xhtml1-trans’) | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> |
| XHTML 1.0 Frameset | doctype(‘xhtml1-frame’) | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> |
| HTML 5 | doctype(‘html5’) | <!DOCTYPE html> |
| HTML 4 Strict | doctype(‘html4-strict’) | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> |
| HTML 4 Transitional | doctype(‘html4-trans’) | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> |
| HTML 4 Frameset | doctype(‘html4-frame’) | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”> |
Por hoje é só pessoal.
Lembre-se, antes de sair deste post, deixe seu comentário abaixo.
Abraços
Fabio
