Iniciando com Blade – Laravel tutorial parte2

Melhorando as páginas

Dando continuidade ao post anterior, nesta segunda parte do tutorial vamos dar continuidade ao aprendizado iniciando com Blade, para isso aprimoraremos o layout das páginas de nosso site usando os recursos de template do Laravel Blade e também incluiremos um menu de navegação no topo das páginas.




Iniciando com Blade templates

O framework Laravel fornece um poderoso mecanismo de templates chamado Blade. Este mecanismo é baseado em arquivos de layout contendo diretivas e permite que sejam mesclados no mesmo arquivo comandos PHP e diretivas do Laravel Blade.

Os arquivos do Blade possuem a extensão .blade.php e por padrão estão localizados na pasta resources\views.

Criando layout padrão

Prosseguindo com nosso tutorial vamos agora iniciar o estudo do Blade, primeiramente criar um layout padrão para uso nas páginas do site que estamos desenvolvendo.

Para organizar melhor os arquivos de nosso projeto vamos armazenar nossos layouts em uma subpasta da pasta padrão, assim faça o seguinte:

  • crie a pasta layouts dentro de resources\views
  • dentro da pasta recém criada (resources\views\layouts) crie o arquivo: principal.blade.php

Agora vamos utilizar o arquivo resources\views\welcome.blade.php, para servir de base de nosso layout. Abra este arquivo e recorte o conteúdo que fica antes do trecho <div class=”content”> e cole no arquivo principal.blade.php.

Recorte agora o restante do arquivo que fica após o terceiro </div> e cole no final do arquivo principal.blade.php.

Assim, ao final das duas operações recorta / cola, o conteúdo do arquivo welcome.blade.php ficará igual a tela abaixo:

welcome-blade-php
Figura 1: Conteúdo do arquivo welcome.blade.php

Nota: o código fonte deste tutorial está disponível no meu repositório do GiT Hub.

O restante do arquivo original deverá estar no arquivo resources\views\layouts\principal.blade.php, e para finalizar a criação do arquivo de template que conterá o layout principal de nosso site faremos uma última atenção neste arquivo.

Abra o arquivo resources\views\layouts\principal.blade.php e insira o código @yield(‘content’) conforme a figura abaixo:

principal-blade-php
Figura 2: Alteração no arquivo principal.blade.php

Esta linha, @yield(‘content’), fará com que o conteúdo das páginas definido na seção “content” das mesmas seja mesclado com o layout principal gerando o arquivo HTML que será apresentado ao navegador.




Aplicando o layout

Agora que o layout principal está pronto vamos aplicá-lo nas páginas de nosso site. Iniciando com a página principal, mas primeiro vamos acessar o endereço http://localhost:8000 para ver como ela está antes das modificações.

página inicial
Figura 3: Página principal antes da aplicação do layout padrão


Prosseguindo, abra o arquivo resources\views\index.blade.php e faça as alterações que estão ilustradas na figura abaixo:

index-blade-php
Figura 4: Alterações para aplicar o layout principal no arquivo index.blade.php

É só isso mesmo, somente estar três linhas adicionais, e após gravar o arquivo e recarregar a página no navegador teremos:

pagina inicial blade
Figura 5: Página principal depois da aplicação do layout padrão

Explicando as diretivas do Blade

Na figura 5 acima podemos verificar que já foram aplicados os estilos definidos no layout principal. Examinando o código fonte desta página no navegador veremos que ele conterá somente tags HTML e que todas as diretivas do Blade sumiram. Isto ocorre porque estas diretivas e qualquer outro código PHP existente foram compilados e geraram o código HTML da página em questão.

Vamos examinar as diretivas Blade que foram incluídas no código, conforme a Figura 4 :

  • @extends(‘layouts.principal’) : esta diretiva informa ao compilador Blade que a página atual herda suas características de um layout localizado no arquivo: resources\views\layouts\principal.blade.php; observe que a localização do arquivo é considerada em relação a localização padrão usando a notação de ponto para marcar uma subpasta .
  • @section(‘content’): marca o início de uma seção identificada pelo nome ‘content’, poderia ser usado um nome qualquer, como ‘conteudo’ por exemplo, desde que exatamente o mesmo nome fosse referenciado no arquivo de layout padrão usando a diretiva @yield;
  • @endsection: marca o final da seção, algumas seções poderão ser declaradas em uma linha sem a necessidade de uma @endsection, porém isto será visto em outros tutorias, neste aqui precisaremos usar esta diretiva parta marcar o fim da seção ‘content’.

O restante do código, que fica entre as diretivas de section, corresponde à nossa página original. Neste momento não será o foco deste tutorial, mas caso deseje incrementar sua página inicial pode incluir mais conteúdo neste local, entre as diretivas de section.




Alterando as outras páginas

Para finalizar esta parte de aplicação do layout faça as modificações no restante das páginas conforme indicado nas figuras seguintes:

about-blade-php
Figura 6: Editar o arquivo about.blade.php
contact blade
Figura 7: Editar o arquivo contact.blade.php
welcome blade php
Figura 8: E finalmente editar o arquivo welcome.blade.php

Feitas as alterações, temos agora em nosso site as quatro páginas com o layout padrão aplicado e acessíveis pelos endereços abaixo:

http://localhost:8000/
http://localhost:8000/about
http://localhost:8000/contact
http://localhost:8000/welcome

Falta agora um menu de navegação para que não precisemos ficar digitando as urls de cada página. Na próxima seção iremos mostrar como incluir este menu.

Incluindo o menu de navegação

Finalizando o tutorial de hoje vamos agora incluir um menu de navegação em todas as páginas de nosso site.

Para isso basta editar o arquivo resources\views\layouts\principal.blade.php e incluir as linhas destacadas na figura abaixo:

principal blade php
Figura 9: Para criar o menu inserir estas linhas no arquivo principal.blade.php

Após esta alteração recarregue a página inicial e veja que o menu de navegação já está disponível. Navegue em outras páginas e veja que elas também já possuem o mesmo menu.

página inicial com layout aplicado
Figura 10: Página inicial do site com o menu de navegação

Na figura 10 acima vemos que no menu de navegação da página inicial consta a opção INÍCIO, contudo não queremos que ela esteja ali, pois se já nos encontramos na página inicial, não faz sentido uma opção para voltar ao início.

Para corrigir isso faremos mais um ajuste no arquivo resources\views\layouts\principal.blade.php e digitaremos os códigos adicionais conforme a figura abaixo:

alteração principal blade php
Figura 11: Alterações para que a opção INÍCIO não apareça na página inicial

O código inserido faz uso das diretiva @if e @endif para incluir condicionalmente uma opção no menu. A condição avaliada é a rota atual, o código avalia se a rota NÃO é a página inicial, que foi nomeada como root, caso não seja inclui o código HTML que exibe a opção Início.

Após esta alteração o Laravel Blade irá reconhecer quando estivermos navegando na página inicial e não incluirá mais a opção INÍCIO. Faça o teste!

Por hoje é só. Te aguardo nos próximos tutoriais para continuarmos a desenvolver este site e apresentar outros recursos do Laravel.

Conheça também:
eBook chatbot usando Laravel Botman e Dialogflow
Vue.js no Laravel