Plantillas blade en Laravel

El motor de plantillas oficial de Laravel es blade y como vamos a ver nos permite hacer muchísimas acciones interesantes dentro las vistas de nuestra aplicación.

Lo primero que hay que tener en cuenta es que la extensión de los archivos blade debe de ser la siguiente:

nombre.blade.php

De este modo Laravel entiende que se trata de un archivo que utiliza blade y lo interpretará correctamente.

Los archivos de vistas se guardan en el directorio de vistas: resources/views

La principal ventaja de las plantillas blade es que podemos utilizar php plano dentro del código de la plantilla.

Para introducir el código php en estas plantillas se hace por medio de un arroba, @ y como vamos a ver en esta entrada, blade soporta todos los loops, condicionales… de php tal y como vemos en el siguiente ejemplo:

@if($usuario!='Balrog')
    adelante
@else 
    No puedes pasar
@endif

Creando layouts con blade

Hasta ahora hemos visto cómo se crean páginas estáticas en Laravel, pero en cada página debíamos de introducir el head, el navegador, el aside, el footer… en caso de que los tuvieran, y es normal que estos elementos se repitan en cada una de las páginas de nuestro sitio, lo cual es poco eficiente cuando queremos realizar cambios

Esto se soluciona en php por medio de funciones pero blade tiene su propia forma de hacerlo, como vamos a ver a continuación.

Lo primero que tenemos que hacer es crear un layout para nuestra aplicación.

Aunque no es imprescindible, a mi me gusta crear un directorio llamado layouts dentro de views y una vez ahí dentro crear mi layout principal, al cual vamos a llamar app.blade.php.

resources/views/app.blade.php

y crearemos un layout base como el que vemos a continuación:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>@yield('title')</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    @include('layouts.elementos.navbar')
    @yield('content')  
</body>
</html>

Vemos como podemos ir introduciendo nuestros assests desde el head tal y como vimos a la hora de crear una página en laravel y ya comienzan a aparecer cosas que nos llaman la atención como @yield o @content

  • @yield(‘title) obtendrá el titulo desde otra sección
  • @include(‘layouts.elementos.navbar’) esta diciéndole que incluya en la aplicación otra vista, en este caso le estamos diciendo que navbar.blade.php se encuentra dentro del directorio elementos que crearemos dentro de layouts.
  • @yield(‘content’) le dice que debe de embeber una sección llamada content de otra vista.

Una vez que tenemos esto en nuestro archivo navbar.blade.php introducimos el código de un navegador, en este caso uno típico de boostrap, tal y cómo vemos en el siguiente código:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse"
            data-target=".navbar-ex1-collapse">
      <span class="sr-only">Desplegar navegación</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Logotipo</a>
  </div>
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Enlace #1</a></li>
      <li><a href="#">Enlace #2</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Menú #1 <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Acción #1</a></li>
          <li><a href="#">Acción #2</a></li>
          <li><a href="#">Acción #3</a></li>
          <li class="divider"></li>
          <li><a href="#">Acción #4</a></li>
          <li class="divider"></li>
          <li><a href="#">Acción #5</a></li>
        </ul>
      </li>
    </ul>
 
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Buscar">
      </div>
      <button type="submit" class="btn btn-default">Enviar</button>
    </form>
 
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Enlace #3</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Menú #2 <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Acción #1</a></li>
          <li><a href="#">Acción #2</a></li>
          <li><a href="#">Acción #3</a></li>
          <li class="divider"></li>
          <li><a href="#">Acción #4</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Ahora tenemos que crear el contenido de nuestra vista, por ejemplo el home que tenemos como vista principal cuando se accede a la web y lo vamos a modificar con este código:

@extends('layouts.app')
@section('title', 'Home')
@section('content')
<div class="container">
    <div class="row">
        <h1>Bienvenido a MiLaravel</h1>
    </div>
</div>
@endsection

Aquí podemos ver como se utilizan las directrices:

  • @extends(‘layouts.app’) que le dice a la vista que herede de layouts/app.blade.php
  • @section(‘title’, ‘Home’) que configura el titulo de la pagina
  • @section(‘content’) y @endsection que introduce todo lo que contiene dentro de yield(‘content’)

De este modo si ejecutamos nuestro Laravel obtendremos el siguiente resultado:

Ya con este uso de las plantillas blade, podemos crear nuestras páginas siguiendo una estructura coherente y desde donde poder hacer modificaciones rápidas que afecten a todas nuestras páginas o solo a una vista en su contenido ahorrando mucho tiempo.

Si quieres saber todo lo que las plantillas blade pueden ayudarte a la hora de controlar el flujo de la aplicación y el tratamiento de datos puedes acceder a la documentación de laravel en español

documentación de plantillas blade