Templates com Blade e Bootstrap no Laravel

Templates com Blade e Bootstrap no Laravel

Após uma longa pausa, voltamos com a sequencia de artigos sobre o Laravel. No artigo de hoje vamos falar sobre como funciona o sistema de templates do Laravel, o Blade. Após uma introdução mais teórica, vamos modificar as views do aplicativo que estamos construindo para utilizar não apenas o Blade, mas também o Bootstrap.

Blade

Blade é o sistema de templates que faz parte do Laravel. Se você já trabalhou com Smarty, vai perceber que o Blade é muito parecido. Para quem nunca utilizou um sistema de templates deste tipo, ele basicamente é uma maneira diferente de escrever suas views. Em vez de utilizar tags PHP diretamente no seu HTML, você vai utilizar outra sintaxe com chaves e arrobas.

Para indicar que uma view está no formato blade, devemos nomear o arquivo como <nome>.blade.php. Isto é o suficiente para que o Laravel saiba que você utilizará estruturas do Blade nesta view. Outra coisa importante é que você pode continuar utilizando os mesmos códigos PHP, mesmo quando estiver utilizando o Blade. Na realidade o Laravel vai converter todos os códigos Blade em código PHP, então é apenas uma maneira de simplificar o código. Vamos direto ao que interessa, vendo os diferentes códigos que podemos construir utilizando Blade.

Sintaxe

O Blade define uma sintaxe diferente do que estamos acostumados com o PHP. A grande vantagem disso é a clareza da sintaxe, deixando nossos arquivos de views mais limpos. Para equipes que trabalham com designers isso facilita bastante. Vamos ver quais são os comandos disponíveis no Blade.

Echo

Quando precisamos imprimir algo no HTML da view utilizamos o comando echo do PHP.

No Blade basta utilizar chaves duplas {{ }} ao redor do que precisamos imprimir, da seguinte forma:

Nesse código você pode perceber o uso de chaves duplas {{ }} e triplas {{{ }}}. A diferença é que as chaves duplas vão apenas imprimir o conteúdo da variável, enquanto as chaves triplas vão converter caracteres especiais para HTML e depois imprimir o conteúdo.

Laravel Blade 1

Neste print você pode ver a diferença. No título utilizei a tag H1. Como utilizamos chaves triplas, a tag foi exibida com caracteres HTML &lt;h1&gt;. Já no corpo do artigo utilizei a tag STRONG. Como dessa vez foram utilizadas chaves duplas, o conteúdo foi impresso com <strong>, e o browser colocou o texto em negrito.

Mas o que acontece se você quiser exibir chaves duplas no seu HTML? Basta adicionar um arroba antes do código:

Outra coisa que fica facilitada pelo Blade é quando você precisa testar se uma variável foi definida antes de imprimir a mesma, utilizando isset().

Blocos Se Então

O Blade também implementa sua versão dos blocos IF ELSE.

O Blade permite utilizar a lógica inversa do IF, executando um bloco somente se a condição for falsa:

Repetições

Também podemos fazer repetições como FOR, FOREACH e WHILE.

Comentários

Mais uma coisa que podemos fazer no Blade é criar comentários. Os comentários são convertidos para comentários em PHP <?php // Comentário ?>, desta maneira eles não vão aparecer no HTML final.

Múltiplos Templates

Um problema comum quando trabalhamos com várias views é a repetição de conteúdo. Se você olhar o código da nossa aplicação no Github, vai ver que nas views sempre repetimos o cabeçalho HTML. Isso pode facilmente ser evitado no Blade. Ele permite tanto incluir uma view dentro da outra quanto trabalhar com layouts.

Layouts

Os layouts servem para criar a estrutura base para suas views. Você pode colocar toda a estrutura do HTML em um arquivo de layout e implementar apenas o conteúdo principal (apenas o que vai dentro do BODY) nas suas views. Um arquivo de layout pode ter o seguinte conteúdo:

Quando você possui um layout, basta estender o mesmo nas suas views, desta forma:

Perceba que o Laravel aceita que você utilize uma view usando o formato diretorio.arquivo além do formato mais tradicional diretorio/arquivo.

Incluindo Views

Você também pode chamar uma view dentro de outra. Se você criar uma barra lateral (sidebar) por exemplo, pode incluir ela diretamente em outro aquivo Blade.

Aplicação

O próximo passo é implementar o Blade na nossa aplicação. Além de fazer isso também quero adicionar o Bootstrap para darmos uma aparência mais legal para o nosso aplicativo. Vamos começar criando o arquivo de layout e adicionando o Bootstrap. Depois vamos alterar nossas views.

Layout

Crie um novo arquivo em views/layouts/ chamado padrao.blade.php. Neste arquivo vamos colocar o seguinte conteúdo:

Neste arquivo temos as tags de cabeçalho do HTML. No título da página estamos usando uma variável título, se ela não for definida, será exibido o título Desenvolvendo com Laravel. Também está sendo incluído uma outra view pra nosso menu (depois vou mostrar ela).

Além disso, foram adicionados códigos para o CSS do Bootstrap e JS do jQuery e do Bootstrap. Portando visite http://getbootstrap.com/ e baixe o Bootstrap. Copie os diretórios para public/assets. Depois faça o download o jQuery em http://code.jquery.com/jquery-1.11.1.min.js e salve o arquivo no diretório public/assets/js.

Menu

Agora que temos o Bootstrap, podemos fazer um design legal no nosso aplicativo. Vamos começar criando um menu. Por enquanto ele será estático, mas no futuro vou mostrar como deixar ele mais dinâmico. Crie o arquivo views/templates/menu.blade.php. Nosso menu será assim:

Não vou explicar o código referente ao Bootstrap pois nosso foco é o Laravel. Você pode notar aqui a utilização do comando url() para criar os links. Este comando já criar o endereço completo e também permite que seja passado um parâmetro adicional que será incluído na URL, como o ID do item sendo editado por exemplo.

Outras Views

Vamos alterar nossas outras views. Primeiro mova as nossas 3 views (artigos, artigos_inserir e atigos_editar) para dentro do diretório views/artigos. Depois renomeie os arquivos:

  • artigos.php para index.blade.php
  • artigos_inserir.php para inserir.blade.php
  • artigos_editar.php para editar.blade.php

Agora nossas views estão dentro de um subdiretório com o mesmo nome do nosso controller, artigos. Além disso renomeamos nossas views para que fiquem com o mesmo nome do método onde são utilizadas. Isso facilita a organização do nosso projeto.

index.blade.php

Depois dessa alteração a nossa lista e artigos está assim:

Artigos Bootstrap

inserir.blade.php

Neste formulário substituímos as tags HTML pelos helpers do Laravel. Com eles conseguimos criar todas as tags necessárias para criar um formulário. O uso é opcional, mas eu recomendo a utilização do Form::open(), pois ele adiciona um campo HIDDEN chamado _token. Neste campo é inserido um string aleatória, que é verificada pelo Laravel no POST. Assim fica fácil bloquear pedidos de outros sites (CSRF – cross-site request forgery).

editar.blade.php

Outros Arquivos

Como eu comentei do CSRF, vamos alterar nosso aquivo de rotas para filtrar pedidos incorretos. Vamos adicionar uma linha no arquivo app/routes.php:

Com o comando Route::when() nós conseguimos filtrar pedidos usando um wildcard (*). Neste caso estamos “pegando” todos os pedidos, fazendo o filtro CSRF, de acordo com o tipo de pedido, neste caso o POST.

Vamos também alterar nosso controller. Precisamos modificar as views, pois modificamos o diretório das mesmas. Também vamos acrescentar a variável título onde precisamos.

Conclusão

O Blade simplifica a criação das nossas views, fornecendo todas estruturas necessárias para uma boa programação. Não é recomendado utilizar lógica dentro da view, por isso você deve tentar não utilizar <?php dentro das views. Apenas em casos bem específicos você pode precisar das tags PHP diretamente na sua view. Um dos casos é se você precisa de uma variável de controle para uma repetição. Para iniciar uma variável ou atribuir, você vai precisar do <?php.

No artigo de hoje também incluímos o Bootstrap, que facilita na criação do design do nosso aplicativo. Eu recomendo a utilização do Bootstrap em projetos de sistemas, que geralmente não precisam de uma interface única. Mas tome cuidado ao utilizar em sites customizados pois pode ficar muito parecido com outros sites.

Se você encontrar algum erro ou estiver com alguma dificuldade, deixe um comentário. Para baixar o código atual, visite nosso repositório em https://github.com/oscardias/desenvolvendo_com_laravel.

Este post é parte da série Desenvolvendo com Laravel.

11 respostas para “Templates com Blade e Bootstrap no Laravel”

  1. Ola,
    no ficheiro inserir.blade.php está

    {{ Form::open(array('url' => 'artigos/editar', 'class' => 'form-horizontal', 'role' => 'form')) }}

    e deveria estar:

    {{ Form::open(array('url' => 'artigos/inserir', 'class' => 'form-horizontal', 'role' => 'form')) }}

    Cumprimentos

  2. Até pouco tempo atrás, era um reescrevedor de sites HTML para PHP, porém com as atualizações do PHP, resolvi aprender mais, eis que estou lendo muito sobre Frameworks, que facilitam o serviço, agilizam a programação.
    Pergunta: Eu consigo criar um site completo usando um Framework? Em a resposta sendo positiva, como? e se a resposta for negativa, para que então usar o Framework?

    1. Sim, você consegue criar um site completo usando um framework. Este tutorial que estou escrevendo tem como objetivo virar um CMS, e será criado usando o Laravel. Mas qual é teu objetivo quando voncerte as páginas HTML para PHP? Você adiciona alguma funcionalidade de CMS no site? Transforma elas em eCommerce?

      O framework facilita principalmente quando você quer criar um aplicativo do zero, como um sistema de gestão de clientes por exemplo. Se você quer apenas transformar um site HTML em um CMS, pode utilizar o WordPress por exemplo. Vai facilitar sua vida porque você não vai precisar programar tudo do zero.

  3. Boa tarde Oscar,

    De antemão, parabéns pelas dicas.
    Por favor, me ajude a entender essa questão: Quero configurar e validar um formulário com laravel, como tenho outras páginas, tenho que criar rotas e views para todas as páginas? Poderia usar o laravel apenas para a página de formulário?

    Atenciosamente,

    paulo Passic

    1. Pelo que entendi você já tem um site pronto e quer apenas usar o laravel para validar um formulário, é isso?

      Se você colocar todas as páginas dentro do laravel será necessário criar rotas para as páginas sim. Se não é necessário nenhuma lógica pode criar a rota apontando direto para as views, sem controllers. No futuro se você precisar aprimorar o site ficaria bem fácil pois já tem a estrutura do framework.

      Outra possibilidade seria colocar o public do laravel dentro de um subdiretório do teu site e usar ele somente para este formulário. Por exemplo http://www.site.com.br/formulario.

      Mas se você precisa apenas validar um formulário, porque não faz em PHP puro? Não vale a pena utilizar um framework somente para isso.

      Abraço

  4. Parabéns!

    Este conteúdo esclareceu todas as minhas dúvidas de uma forma clara e objetiva.

    Obrigada,
    Cissa.

    Programadora
    Subsecretaria de Informática
    Prefeitura de Rio das Ostras – Rio de Janeiro

  5. Prezado,

    Sem dúvida um dos melhores tutoriais sobre Laravel.

    Mas a minha duvida e a seguinte: Quando a aplicação com Blade cria a tela de login no dominio Entrar, a mesma nao aceita nenhum email e diz qua esta com email ou senha incorretos, daí nao consigo ir mais alem, pode me a judar?

    1. Olá Denise,

      Como assim não aceita nenhum e-mail? Qual erro que você recebe?

      Verifique no código fonte da página (ou com o Inspecionar elemento) qual é o HTML que está sendo gerado. Deveria ser um INPUT com TYPE igual a “email” e NAME igual a “email” também.

      Abraço

Deixe uma resposta

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