Nesta terceira parte do tutorial trabalharemos passando parâmetros (variável simples e array) para os layouts do Blade e veremos o recurso de loop

Blade passando parâmetros – Laravel tutorial – parte3

Continuando nossa série de posts veremos um pouco mais do Blade, hoje trabalharemos passando parâmetros para o engine de templates do Laravel.

Nota: esta série de tutorias “iniciando” está sendo escrita com objetivo de apresentar de forma rápida alguns recursos do framework. Eles são para INICIANTES, pretendo escrever outros tutorias para mostrar a arquitetura e os conceitos teóricos do Laravel em um nível mais aprofundado.

Se você perdeu os outros tutorias, não deixe de conferir: a parte 1 e parte 2.

O código fonte usado nesta série de tutoriais está disponível no repositório do Git Hub: https://github.com/ewertonvaz/meu-site




Blade passando parâmetros variável simples

Nos templates do Blade é possível usar tanto código PHP quanto as diretivas do template. Normalmente estes arquivo, que utilizam a extensão blade.php, ficam armazenados na pasta resources\views.

Neste tutorial continuaremos a armazenar na mesma pasta que foi criada nos tutoriais anteriores: resources\views\layouts.

Vamos começar criando o arquivo master.blade.php na pasta resources\views\layouts, e nele digitar o código abaixo:

figura01 master blade php
Figura 1: Código do arquivo master.blade.php

Este layout vai ser aplicado nas próximas páginas que iremos criar.

Explicando o novo layout

Os pontos que valem destacar são o helper app do Laravel, com este helper o framework fornece acesso às variáveis de configuração do aplicativo Laravel. Em nosso caso usando a linha de código :

{{ app()->getLocale() }}  

estamos acessando a variável que define o idioma do aplicativo. Ou melhor, a variável locale definida no arquivo config\app.php, falaremos mais sobre o arquivo de configuração em outros tutorias.

Outra novidade é a seção <title> cujo conteúdo é definido por uma section ‘titulo’ que será criada no layout correspondente à pagina 01.

Por último temos a seção <footer> cujo conteúdo virá de um novo arquivo de layout que será criado mais a frente com o nome de resources\views\layouts\footer.blade.php, neste momento o que você deve notar é a diretiva:

@include('layouts.footer')

esta fará com que o layout footer seja incluído no layout master.

Criando o footer

Para o footer, crie o arquivo resources\views\layouts\footer.blade.php com o código abaixo:

footer blade php
Figura 2: Código do arquivo de layout footer.blade.php

Por enquanto serão apenas estas três linhas de código, pois no momento a intenção é demonstrar que podemos usar código PHP dentro dos arquivos de layout Blade.

A função deste trecho é simplesmente exibir no rodapé da página a data de hoje. Fique a vontade para mais tarde, se desejar, incluir mais conteúdo neste rodapé. Por enquanto deixaremos como está pois já atende a finalidade deste tutorial.

Rota com parâmetro

Prosseguindo crie agora a rota para a página01, incluindo no final do arquivo routes\web.php o código abaixo:

routes web php
Figura 3: Modificação no arquivo web.php

Aqui temos uma novidade em relação às outras rotas que criamos: a passagem de parâmetros para o layout Blade feita no arquivo de rotas. O helper view, está sendo chamado com dois parâmetros, o primeiro é o nome do layout Blade, no caso page01, e o segundo um array contendo a variável que será passada para o layout definido no primeiro parâmetro.

Este array é composto de um ou vários elementos na forma nome => valor, onde “nome” identifica a variável e “valor” seu conteúdo.

Finalizando esta primeira parte, crie o arquivo resources\views\page01.blade.php e insira nele o código abaixo:

figura 4 page01 blade php
Figura 4: Código do arquivo page01.blade.php

Neste código introduzimos mais alguns elementos que o Laravel Blade nos fornece, primeiro note a linha de código:

@section('titulo', 'Página número UM')

ela demonstra que, conforme eu já havia mencionado no primeiro tutorial, é possível definir uma section em uma única linha.

Outra novidade é o uso da variável que foi passada como parâmetro, para isso basta, em qualquer lugar do código citar o nome da variável circundado por chaves duplas ( {{ }} ).

Nota: o Blade reconhece o nome da variável com o sinal de cifrão inserido na frente, mesmo que na passagem de parâmetro este símbolo não conste no nome da variável.




Testando o resultado

Para testar o que fizemos até agora vamos visualizar a página no browser, para isto:

  • ativar o server usando o comando: php artisan serve (em caso de dúvida consulte a primeira parte do tutorial);
  • acessar no browser a página http://localhost:8000/page01

Abaixo a ilustração da página no browser:

página1 no browser

Figura 5: browser com a página 01 carregada

Abaixo vemos o código fonte da mesma página usando o browser (pressionar CTRL+U no Chrome e no Firefox):

código fonte da página 1

Figura 6: Código fonte da página 01

Examinado a figura 6 e comparando com a figura 4 podemos verificar o que foi produzido pela tradução do layout Blade para o PHP e pela interpretação deste último.

Explicando melhor, os layouts Blade são interpretados para arquivos PHP que ficam armazenados na pasta storage\framework\views e são estes que por sua vez irão para o servidor web o qual interpretará o PHP e entregará a página HTML final.

Blade passando parâmetro array

Podemos também passar um array como parâmetro, agora iremos demonstrar como fazer isto e aproveitar para apresentar alguns recursos de seleção e loop que o Blade nos oferece.

Inicialmente faça as modificações indicadas na figura abaixo em seu arquivo de rotas (routes\web.php):

Passando array na rota arquivo routes\web.php
Figura 7 – Passando parâmetro array na rota com o arquivo routes\web.php

Criando a view page02

Para realizar o teste precisamos ainda criar o arquivo page02.blade.php, assim crie o arquivo na pasta resources\views\page02.blade.php, e nele digite o código abaixo:

Código fonte da view page02.blade.php
Figura 8 – Código fonte da view page02.blade.php

Antes de falar sobre este novo código vamos testar o que foi feito, para isso basta apontar o navegador para a página http://localhost:8000/page02

 e, caso tudo tenha corrido em será exibida a página abaixo:

página02 carregada no navegador
Figura 9 – página02 carregada no navegador




Explicando o código da view page02

Examinado a figura 8 acima, podemos perceber que a maior parte deste código já é conhecida. Primeiramente vemos que esta página é “filha” do layout master, cujo código está no arquivo resources\views\layouts\master.blade.php

Em seguida temos uma seção (section) definida em linha única, com nome e conteúdo, respectivamente, ‘titulo’ e ‘Página número DOIS’.

Conforme já vimos, estas diretivas do Blade serão compiladas para o código PHP correspondente, o qual por sua vez ficará armazenado em cache.

É na seção ‘conteudo’ que apresentamos um elemento novo, as diretivas @foreach e @endforeach, que, como você já deve ter percebido, implementam o loop for, que neste caso irá iterar entre os elementos do vetor $nomes que foi passado como parâmetro. Assim para cada elemento do vetor $nomes, ou seja cada $nome, será produzida pela compilação uma tag HTML <p></p> contendo em seu interior o valor do elemento em questão.

Assim, o resultado é o que vemos na figura 9, onde são exibidos todos os nomes que foram passados no vetor.

Para aprender mais

Leia outros posts para iniciantes em Laravel:
Iniciando com front-end
Configurando banco de dados SQLite

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