Entendendo o Laravel Blade e Como Usá-lo

Os mecanismos de criação de templates do Laravel são compatíveis com React, Vue e outras bibliotecas. Contudo, o que realmente encanta os desenvolvedores é a eficiência do Laravel Blade na criação rápida de views modulares e reutilizáveis. Com o Blade, é fácil estender layouts, definir seções e utilizar estruturas de controle para gerar conteúdo baseado em dados.

Este artigo prático explora o que é o Blade, como funciona e como aprimora seus aplicativos Laravel.

Tudo o que você precisa para usar o Laravel Blade

O Blade é o template engine padrão do framework Laravel. Ele permite que você use variáveis, loops, instruções condicionais e outros recursos PHP diretamente em seu código HTML. Para criar arquivos Blade, basta definir as views do blade criando arquivos com a extensão .blade.php no diretório resources/views do seu projeto Laravel e, em seguida, estruturar suas páginas dinâmicas preferidas nesses arquivos.

Por que você deve usar o Blade?

Um dos principais benefícios do Blade é a organização modular do código. O Blade ajuda a organizar seu código em módulos reutilizáveis que você pode adicionar, remover ou atualizar facilmente sem afetar o restante do aplicativo.

O encapsulamento do código é outra vantagem. O Blade ajuda a encapsular as funções, tornando os testes, a depuração e a manutenção do código mais gerenciáveis. Essa abordagem beneficia aplicativos maiores, pois aplicativos desorganizados podem se tornar rapidamente difíceis de gerenciar.

O mecanismo de criação de templates do Blade é eficiente e o framework PHP mais rápido que testamos. O engine compila todas as views do blade em código PHP simples, e em seguida as armazena em cache até que você as modifique. Essa abordagem promove uma renderização mais rápida e um melhor desempenho geral.

Como usar o Laravel Blade

Neste tutorial, criamos um aplicativo Laravel para você experimentar os templates do Blade em ação. Você aprenderá a definir e estender layouts do blade, passar dados entre views do blade, usar as várias estruturas de controle disponíveis e criar seus próprios blades.

Pré-requisitos

Para seguir este tutorial, verifique se você possui:

• Familiaridade prévia com PHP
• O Composer instalado. Confira se o Composer está em seu sistema executando composer -V

Consulte o código completo do tutorial para obter orientação durante o trabalho.

Como criar o aplicativo Laravel

Para criar um aplicativo Laravel de amostra, execute:

composer create-project laravel/laravel my-app

Siga o conjunto de instruções em seu terminal para concluir a criação do aplicativo.

cd my-app
php artisan serve

Clique no link no terminal para abrir a página de boas-vindas do Laravel em seu navegador.

Como definir o layout

Os layouts permitem que você configure seções do seu aplicativo web para compartilhar em várias páginas. Por exemplo, se o aplicativo tiver uma barra de navegação e um rodapé consistentes em todas as páginas, é mais eficiente criá-los uma vez do que construí-los novamente para cada página.

Antes de seguir as instruções passo a passo, veja a demonstração a seguir.

O código para criar sites sem layouts é mostrado abaixo. Isso faz com que você reescreva o código da barra de navegação e do rodapé para cada página.

<!-- Page 1 -->
<nav>. . . </nav>
  Content for page 1
<footer> . . . </footer>

<!-- Page 2 -->
<nav>. . . </nav>
  Content for page 2
<footer> . . . </footer>

Em vez disso, você pode criar facilmente seu aplicativo usando layouts para compartilhar os mesmos componentes em um único bloco de código:

<!-- Main layout code -->
<nav>. . . </nav>
{slot}
<footer> . . . </footer>

Uma vez definido o layout, você pode usá-lo em qualquer página que desejar:

<!-- Page 1 or Page n -->
<main-layout>
  Content for page n
</main-layout>

Em versões anteriores do Laravel, era necessário criar layouts usando herança de templates. No entanto, quando a empresa adicionou o recurso de componentes, tornou-se muito mais fácil criar layouts robustos.

Para criar um novo layout com o Laravel Blade, primeiro você deve executar este comando para criar o componente do layout:

php artisan make:component Layout

Esse comando gera um novo arquivo layout.blade.php localizado em uma nova pasta chamada components no diretório resources/views/. Abra esse arquivo e cole este código:

<html>
  <head>
    <title>{{ $title ?? 'Example Website' }}</title>
    <link rel="stylesheet" href="{{ asset('/css/app.css') }}">
  </head>
  <body>
    <nav>
      <h3>Welcome to my website</h3>
      <hr>
    </nav>
    {{ $slot }}
    <footer>
      <hr />
      © 2023 example.com
    </footer>
  </body>
</html>

Esse código cria um componente de layout com uma barra de navegação e um rodapé simples. A função slot define para onde passar o conteúdo principal sempre que você estender o componente de layout.

Como estender o layout

Você pode importar facilmente um componente em uma view do blade usando a tag <x-component-name>. Esse método também se aplica ao componente de layout que você criou anteriormente.

Para ver como você pode estender o layout, abra o arquivo padrão resources/views/welcome.blade.php e substitua o conteúdo do arquivo por este código:

<x-layout>
  <div>
	<h1>Hello World!</h1>
	<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
    <button class="btn">Get Started</button>
  </div>
</x-layout>

Essa abordagem atualiza a página de boas-vindas para usar o componente de layout e ao mesmo tempo passa um elemento de título e um parágrafo com algum texto simulado como conteúdo. Recarregue o link que você abriu anteriormente para ver as alterações.

Em sua definição de layout, observe que o código renderizou como dado de título “Example Website”, padrão se o código não passa os dados de título. Você pode passar esses dados como slots nomeados em suas views por meio do código <x-slot name="slotName" /> — neste caso, <x-slot name="title" />. Atualize o arquivo welcome.blade.php com o código abaixo e recarregue a página:

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <div>
  <h1>Hello World!</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
    <button class="btn">Get Started</button>
  </div>
</x-layout>

Em seguida, adicione alguns estilos para melhorar a aparência do aplicativo. Crie um novo arquivo app.css dentro do diretório /public/css e, em seguida, cole o código deste arquivo.

Com todas essas atualizações, você deverá ver o seguinte resultado quando visualizar o aplicativo em http://127.0.0.1:8000/:

Como incluir dados de backend

No exemplo anterior, você compartilhou prontamente dados entre componentes e views por meio de slots. Entretanto, há abordagens melhores para carregar dados de um banco de dados ou de outra fonte remota.

Nesse caso, carregue e passe os dados diretamente da definição do roteador e acesse-os como você acessou um slot nomeado no exemplo anterior. Para fazer isso, abra o arquivo routes/web.php e substitua seu conteúdo por este código:

<?php
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
  $name = "John Doe";
  return view('welcome', ['name' => $name]);
});

No código acima, você atualizou sua rota da web para passar o nome "John Doe" para a view de boas-vindas. Agora, acesse esse valor em suas views do blade desta forma:

<div>
  Hello, {{ $name }}
  <!-- Outputs: Hello, John Doe -->
</div>

Você pode usar esse método para carregar dados de um banco de dados. Por exemplo, suponha que você tenha uma tabela de tarefas que contenha uma lista de tarefas. Use o DB facade para carregar essas tarefas e passá-las para sua view:

<?php
use Illuminate\Support\Facades\DB; // Import DB Facade
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
  $todos = DB::table('todos')->get();
  return view('welcome', ['todos' => $todos]);
});

No entanto, se você não tiver um banco de dados, atualize a rota de entrada na web para passar um array de tarefas estáticas. Abra o arquivo routes/web.php e atualize a rota padrão (/) com o código abaixo:

Route::get('/', function () {
  $todos = ['Learn Laravel', 'Learn Blade', 'Build Cool Stuff'];
  return view('welcome', ['todos' => $todos]);
});

Substitua o conteúdo do arquivo welcome.blade.php pelo código abaixo para acessar as tarefas como um array JSON codificado.

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <p>{{ json_encode($todos) }}</p>
  
</x-layout>

Como usar os atalhos de controle

O template engine do Blade também oferece suporte a várias diretivas para renderizar vários tipos de dados condicionalmente. Por exemplo, para percorrer o array de tarefas retornado que você passou para a view de boas-vindas, aplique um loop foreach colando o seguinte código no arquivo welcome.blade.php:

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <ul>
    @foreach ($todos as $todo)
      <li>{{ $todo }}</li>
    @endforeach
  </ul>     
</x-layout>

Essa alteração deve renderizar suas tarefas em uma lista não ordenada, como na captura de tela abaixo.

Para criar um bloco de instruções condicionais, use as diretivas @if, @elseif, @else e @endif. Por exemplo:

@if (count($todos) === 1)
  <p>I have one task!</p>
@elseif (count($todos) > 1)
  <p>I have multiple tasks!</p>
@else
  <p>I don't have any tasks!</p>
@endif

Substitua o conteúdo do arquivo welcome.blade.php pelo código acima. As diretivas if—else contam os itens de tarefas e exibem uma mensagem personalizada para diferentes cenários. Como você tem mais de uma tarefa em seu array de tarefas, deverá ver o resultado “I have multiple tasks!” no navegador.

Você pode encontrar mais diretivas suportadas na documentação do Laravel.

Como criar uma extensão personalizada

Você também pode escrever uma diretiva personalizada, semelhante ao exemplo anterior. Para explorar essa técnica, crie uma diretiva de truncamento de texto personalizada.

Primeiro, crie um novo provedor de serviços executando:

php artisan make:provider TruncateTextServiceProvider

Esse comando gera um novo arquivo de provedor de serviços em app/Providers/TruncateTextServiceProvider.php. Abra esse arquivo e substitua seu conteúdo por:

<?php
namespace App\Providers;

use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;

class TruncateTextServiceProvider extends ServiceProvider
{
  public function register()
  {
    //
  }
  public function boot()
  {
    Blade::directive('truncate', function ($expression) {
      list($text, $length) = explode(',', $expression);
      return "<?php echo Str::limit($text, $length); ?>";
    });
  }
}

O código importa o Blade facade e define uma nova diretiva personalizada chamada @truncate. A diretiva aceita dois argumentos: $text e $length. Ela usa o método Str::limit() para truncar o texto até o tamanho especificado.

Por fim, registre o provedor de serviços adicionando ao array de provedores no arquivo de configuração config/app.php:

'providers' => [
  // Other service providers
  App\Providers\TruncateTextServiceProvider::class,
],

Use a diretiva personalizada em seus templates do Blade (welcome.blade.php) invocando por meio da sintaxe @truncate.

<div>
  @truncate('Lorem ipsum dolor sit amet', 10)
  <!-- Outputs: Lorem ipsu... -->
</div>

Resumo

Este artigo explorou como o Laravel Blade permite que você simplifique o processo de desenvolvimento ao criar views modulares e reutilizáveis para aplicativos web. No entanto, sua jornada de desenvolvimento do Laravel não deve terminar aqui.

A infraestrutura que hospeda seu aplicativo é tão importante para o seu sucesso quanto o processo de desenvolvimento local. Para levar seu aplicativo Laravel para o próximo nível, você precisa de uma plataforma de hospedagem confiável que possa atender as suas demandas.

A Kinsta otimiza as soluções de hospedagem focando em desempenho, segurança e escalabilidade, proporcionando um ambiente ideal para o desenvolvimento do seu aplicativo. Ao implantar seu aplicativo Laravel na Kinsta, você poderá vivenciar essas vantagens pessoalmente.

Marcia Ramos Kinsta

Sou o líder da equipe editorial na Kinsta. Sou um entusiasta de código aberto e adoro programar. Com mais de 7 anos de experiência em redação e edição técnica para a indústria de tecnologia, adoro colaborar com pessoas para criar conteúdos claros e concisos e melhorar fluxos de trabalho.

• LinkedIn