Comunidad de diseño web y desarrollo en internet online

Blade, el sistema de plantillas de Laravel

Por Duilio el 01 de Octubre de 2013 con 76,659 visitas

PHP, MySQL y Servidor Otros tutoriales por Duilio.

Para cerrar esta primera parte de los tutoriales quiero mostrarles cómo funcionan las vistas en Laravel. Este es quizás el tutorial más fácil de todos. Veremos cómo usar el sistema de plantillas de Laravel llamado Blade.

No te pierdas los anteriores tutoriales de Laravel:



Qué es y cómo funciona Blade


Blade es básicamente un sub-lenguaje muy sencillo, que antes de ser usado por nuestra aplicación, es compilado a PHP plano. Para usar Blade, simplemente creen sus plantillas en el directorio views/ con la extensión .blade.php en vez de .php.

Por ejemplo:

Código :

views/template.blade.php


Ahora creen una ruta o controlador que llame a la plantilla (ya saben cómo, ¿Cierto?)

En caso de que no… En app/routes.php pongan esto:

Código :

Route::get('template', function () {
   return View::make('template'); 
});


Ahora en views/template.blade.php escriban algo de HTML:

Código :

<h1>Hello Cristalab</h1>


Bastante básico, es decir, en este punto da igual si usamos Blade o no… Pero, vamos a ver:

Cómo escribir vistas dinámicas con Blade


Ok, supongamos que, como en ejemplos anteriores, queremos usar un nombre variable:

Código :

Route::get('template/{name}', function ($name) {
   $name = ucwords(str_replace('-', ' ', $name));
   return View::make('template')->with('name', $name); 
});


En este caso, para hacer el ejemplo más interesante, lo pasamos por la ruta, y luego lo asignamos a la vista, con el método ->with() que va concatenado a View::make, fíjense:

Código :

View::make('template')->with('name', $name)


Ok, ahora en nuestra vista, si estuviéramos usando sólo PHP, tendríamos que escribir algo así:

Código :

<h1>Hello <?php echo $name ?></h1>


Pero gracias a Blade, podemos escribirlo así:

Código :

<h1>Hello {{ $name }}</h1>


Básicamente: {{ }} es un sustituto de <?php ?> que por un lado es más corto y fácil de escribir, por otro usar etiquetas PHP (<? ?>) se “mezcla” con las etiquetas del HTML, así que usar motores como Blade es más “limpio” por así decirlo.

Blade sólo reemplaza {{ * }} por <?php echo * ?>, es decir, todo el código PHP que quieras escribir es válido dentro de {{ }}, por ejemplo:

Código :

<h1>Hello {{ strtoupper($name) }}</h1>


Otros motores de plantillas para PHP más avanzados como Smarty o Twig compiladores más poderosos, que permiten usar, por ejemplo, sintaxis de punto para los arrays, la cual no es soportada por PHP, etc.


Cómo escribir estructuras de control con Blade


Por último veremos cómo se escriben estructuras de control sencillas pero muy comunes como IF y FOREACH.

Blade tiene una sintaxis bien simple, por ejemplo:

Código :

@if ($name == 'Walter White' OR $name == 'Jesse Pinkman')
  <h1>Goodbye Breaking Bad</h1>
@else
  <h1>Hello {{ $name }}</h1>
@endif


Nuevamente, todo lo que está dentro del paréntesis del IF es PHP común y corriente, lo que cambia es que en vez de escribir:

Código :

<?php if (...): ?>


O:

Código :

<?php if (...) { ?>


Escribimos:

Código :

@if (...)


Es una sintaxis mucho más limpia y adecuada para nuestras vistas…

Por supuesto, si están escribiendo los ejemplos pueden ejecutarlos en el navegador, escribiendo algo como:

Código :

http://localhost/pruebalaravel/public/template/walter+white


Esto es con respecto a la sintaxis, pero Blade también nos brinda una herramienta potente para escribir vistas:

Uso de Layouts en Laravel con Blade


Casi todos los proyectos, por no decir todos, tienen un “layout” que consiste, por lo general en un header + un footer. Por ejemplo fíjense Cristalab.com ¿Han visitado esa página? Todas las páginas dentro del site cristalab.com llevan en la cabecera el logo de Cristalab + el menú etc. y en el pie de página tiene el menú repetido y la foto de Freddier en un pony (bueno no, pero sería más divertido).

Ese HTML que se repite en cada página se llama layout y en Blade podemos escribirlo así:

Creen una vista llamada:

Código :

views/layout.blade.php


Con el siguiente HTML de ejemplo:

Código :

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Aprendiendo Laravel</title>
  </head>
  <body>
      @yield('content')
      <hr />
      Copyright 2013 - Todos los ponies reservados.
  </body>
</html>


Y luego en views/template.blade.php coloquen lo siguiente:

Código :

@extends ('layout')

@section ('content')

  <h1>Hello {{ $name }}</h1>

@stop


El PHP en nuestra ruta sigue igual, es decir, seguiremos invocando a template, no a layout:

Código :

View::make(‘template’)


Pero template a su vez “extiende” la plantilla layout, como si fuera un objeto hijo que extiende de un objeto padre:

Código :

<!-- views/template.blade.php →
@extends ('layout')


Ahora, si se fijan, en views/layout.blade.php pueden ver lo siguiente, dentro del body:

Código :

@yield('content')


Esa etiqueta de Blade permite definir una “sección” dinámica que puede ser reemplazada en la plantilla “hijo”, en este caso template.blade.php usando las etiquetas:

Código :

@section ('content')

 <!-- HTML AQUI -->

@stop


Fíjense que “content” es el nombre de la sección en ambas plantillas. Por supuesto podemos crear tantas secciones como queramos:

Código :

<!-- views/layout.blade.php -->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>@yield('title', 'Aprendiendo Laravel')</title>
  </head>
  <body>
      @yield('content')
      <hr />
      Copyright 2013 - Todos los ponies reservados.
  </body>
</html>


Noten que el título HTML cambió a:

Código :

 <title>@yield(‘title’, ‘Aprendiendo Laravel’)</title>


En este caso el segundo parámetro de @yield sería el valor por defecto, es decir, si abrimos en el navegador nuestra dirección:

Código :

http://localhost/pruebalaravel/public/template/cristalab


Seguiremos viendo en el título del mismo la frase: Aprendiendo Laravel, que es nuestro título por defecto.

Pero si cambiamos views/template.blade.php a:

Código :

@extends ('layout')

@section ('title') Saludos a {{ $name }} @stop

@section ('content')

  <h1>Hello {{ $name }}</h1>

@stop


Entonces el título ahora será, por ejemplo: “Saludos a Cristalab”. Tengan en cuenta que pueden crear tantas secciones como gusten, y que cada sección puede tener un valor por defecto y un valor distinto en cada sub-plantilla. Además pueden usar variables, etc. en cada sección.

Para finalizar, 2 tips:

1. En HTML, como ya deben saber, los comentarios se escriben así:

Código :

<!-- comentario -->


Y suelen ser útiles cuando el HTML que escribimos es muy complicado, sin embargo dichos comentarios se envían al navegador junto con el resto de las etiquetas, y esto no es siempre lo que queremos, dado que cualquiera podría leerlos y hacen el HTML un poco más pesado, etc…

Con Blade podemos escribir comentarios así:

Código :

{{-- Esto es un comentario --}}


Dichos comentarios no son compilados como HTML ni enviados al navegador.

2. A veces Blade no es suficiente y necesitamos PHP en nuestras plantillas, por ejemplo, para asignar una variable:

Código :

<?php $user = Auth::user() ?>


Es posible usar PHP plano dentro de Blade, sólo traten de mantener sus plantillas lo más limpias posibles, limiten el uso de PHP, y si en tal caso lo necesitan, escriban sólo sentencias sencillas y preferiblemente al inicio de la plantilla.

Visiten la documentación oficial para obtener más ejemplos sobre Blade

Espero les haya gustado este tutorial, recuerden que todo esto se irá profundizando más adelante, por ahora es sólo un bosquejo para que se familiaricen con todos estos conceptos…

Stay tuned.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Envia un comentario (16)

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate