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:

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:

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:

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:

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:

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.

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.

 

 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 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:

Outros exemplos:

Você também pode passar um array associativo para a função link() para ter um controle melhor sobre todos os atributos e valores.

 

nbs()

Gera o non-braking spaces (&nbsp;) baseado no número que você fornecer. Exemplo:

Produzirá: &nbsp;&nbsp;&nbsp;

 

ol() e ul()

Permite gerar listas ordenadas ou não ordenadas de arrays simples ou multidimensionais. Exemplo:

O código acima irá produzir:

Abaixo um exemplo mais complexo utilizando uma array multidimensional.

O código produzirá:

 

meta()

Te ajuda a gerar meta tags. Você pode passar strings para a função, ou array simples ou multidimensionais. Exemplos:

 

 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.

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

Fábio S. Reszko

Sou Programador PHP desde 2006 e eu acredito sinceramente que programar usando um Framework PHP é a solução para os problemas de códigos desorganizados, difíceis de entender e de dar manutenção no futuro. Se você também acredita nisto, então fique à vontade em explorar meu blog.

  • Cássio J. Cardoso

    Já tentei usar essa Helper, e também a de formulários, mais não consegui me adaptar, é estranho você olha para o código e não ver html!, mais confesso que realmente em certos casos é uma mão na roda.

  • Realmente. Este helper ajuda bastante. Mas já peguei casos em que dava mais trabalho adaptar a tag deste helper do que escrever a tag html normal.

    O bom é sempre analisar o que vai dar menos trabalho. Já que a intenção do framework é aumentar a produtividade.

    Abraços
    Fabio

  • Ruan Victor

    Certamente ajuda muito em alguns momentos, pra evitar ficar abrindo e fechando php, porem como o amigo Cassio fica ruim sem ver o Html.

    Gostei muito do post deveria fazer isso com todos os helpers facilitaria a vida de muitos

  • Olá Ruan

    Valeu a dica. Vou fazer mais alguns posts sobre outros helpers.

    Abraços