O que é Blade?
Blade é um simples, porém poderoso motor de templates (templating engine) provido pelo Framework Laravel. Com ele você pode criar muito mais do que simples views, mas templades complexos contando com componentes que podem ser herdados e usados em várias views, sem o uso de PHP plano. O Blade vai compilar suas views e salva-las em cache em PHP plano, o que significa que sua aplicação terá zero de overhead em relação às views.
Quando usar?
Use o Blade sempre que você for fazer uma aplicação Laravel que for mostrar views, assim você estará usando mais do poder desse framework. Ou seja em aplicações MVC, onde o Blade irá lhe ajudar na construção de views com código mais limpo e fácil de entender.
Como usar?
As views construídas com Blade devem ser salvas sempre com a extensão blade.php dentro da pasta resources/views. Para isso precisamos iniciar uma aplicação Laravel com o seguinte comando:
$ composer create-project laravel/laravel exemplo --prefer-dist
Configurando o Virtual Host
Você precisa configurar um virtual host para apontar para a pasta da sua aplicação de exemplo. Farei este exemplo usando WAMP instalado obviamente em um computador com sistema operacional Windows.
Arquivos hosts
Primeiro abra o arquivo hosts do Windows, que está em C:\Windows\System32\drivers\etc e adicione o seguinte no final:
127.0.0.1 laravel.exemplo
laravel.exemplo será o domínio para acessar nossa api.
Virtual host
Se você estiver usando Windows e WAMP o arquivo de virtual hosts estará emC:\wamp\bin\apache\apache2.4.17\conf\extra, tenha atenção à versão do apache.
Adicione o seguinte no arquivo:
<VirtualHost *:80>
DocumentRoot "CAMINHO_PARA_PASTA_DA_APLICAÇÃO"
ServerName laravel.exemplo
</VirtualHost>
Você deve colocar o caminho da sua aplicação apontando para a pasta public, por exemplo: C:/wamp/www/exemplo/public
Acesse o endereço laravel.exemplo no seu navegador. Você verá a tela de demonstração do Laravel.
Lembrando a configuração do Virtual Hosts pode ser diferente em determinados sistemas operacionais.
Herança de Templates
Faremos um exemplo de como herdar um template usando Blade, para isso criaremos dentro da pasta resources\views os arquivos:
- layout.blade.php
- home.blade.php
- sobre.blade.php
Definindo o layout
Este será nosso layout base, que será herdado pelos demais. Usaremos a diretiva @yield para mostrar os dados informados nos arquivos filhos. O arquivo layout.blade.php deve ficar assim:
<!DOCTYPE html>
<html>
<head>
<title>Laravel Blade Template - @yield('title')</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="/">Início</a></li>
<li><a href="/sobre">Sobre</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
@yield('content')
</div>
</body>
</html>
O layout é definido com seções que serão modificados pelos filhos, como o título da página por exemplo ou no conteúdo da página.
Herdando layout
Veja como ficará o arquivo home.blade.php:
@extends('layout')
@section('title', 'Home')
@section('content', 'Conteúdo da página')
Com a diretiva @extends nós herdamos o layout principal. Na diretiva @section passamos as informações que serão mostradas. O arquivo sobre.blade.php terá a mesma estrutura mudando apenas o texto “Conteúdo da página”, que pode ser tanto texto plano como HTML, ou outras diretivas blade.
Rotas
Abra o arquivo app/Http/routes.php e deixe ele com o seguinte conteúdo:
Route::get('/', function () {
return view('home');
});
Route::get('/sobre', function () {
return view('sobre');
});
Continua
Pronto, agora você pode testar sua aplicação! Este é apenas o primeiro texto da série de texto sobre Blade, aguarde os próximos aqui no Clube dos Geeks. E nos acompanhe no Facebook.
Que legal brother, exemplo simples e objetivo. Show !!!