Motor de plantillas Blade(laravel 4)

Un motor de plantillas puede hacernos la vida mas fácil al momento de crear y estructurar nuestro frontend. Si bien php nos permite embeber código dentro del html, con un motor de plantillas podemos tener una sintaxis extandar, algo que ayuda mucho para el trabajo en equipo, ademas provee muchas funcionalidades que veremos a continuación.

Empezando con blade

El código de este tutorial esta alojado en github, al final del documento se encuentra el link.

Si no tenemos un proyecto laravel creado vamos a nuestro webroot(carpeta en la que ponemos nuestros sitios webs, en xampp es htdocs y en wampp es www) y creamos una carpeta(yo la nombré laravel-blade), ahora abrimos la consola de nuestro SO(en windows presionamos la tecla windows+R y en el cuadro de dialogo escribimos cmd) y colocamos lo siguiente: composer create-project laravel/laravel tuproyecto —prefer-dist, al finalizar se habrá creado dentro de nuestra carpeta un directoria llamado laravel que contendrá el código base del framework.

Para empezar vamos al archivo routes.php y creamos una ruta:

Route::get(‘/ejemplo’, function()
{
$data['saludo'] = “hola”;
return View::make(‘ejemplo’, $data);
});

Ahora crearemos dentro de la carpeta views un archivo llamado ejemplo.blade.php:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
{{$saludo}}
</body>
</html>

Si vamos a http://ruta/hacia/nuestra_web/public/ejemplo se debe mostrar en el navegador el saludo.

Todo esto muy bien, pero ¿que pasa si queremos verificar si una variable existe antes de mostrarla en nuestro navegador?, no hay que preocuparse, blade también admite estructuras de control:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
@if(isset($saludo))
{{$saludo}}
@else
No hay saludo
@endif
</body>
</html>
Verificar si una variable es enviada a la vista es muy útil para mostrar mensajes de error o para llenar una tabla con una colección de datos, antes de manipular una variable asegúrese de que ésta ha sido enviada a la vista.

Enviemos un arreglo a la vista, para esto primero debemos declararlo en la ruta:

Route::get(‘/ejemplo’, function()
{
$data[‘saludo’] = “hello”;
$data[‘frutas’] = array(‘pera’, ‘manzana’, ‘tomate’);
return View::make(‘ejemplo’, $data);
});

Para recorrerlo usaremos la estructura for de esta manera:

@if(isset($frutas))
@for($i=0; $i < count($frutas); $i++)
<br>{{$frutas[$i]}}
@endfor
@endif

También podemos pasar a la vista una colección de objetos y manipularla por medio de la estructura foreach:

//routes.php
Route::get(‘/ejemplo’, function()
{
$data[‘saludo’] = “hello”;
$data[‘frutas’] = array(‘pera’, ‘manzana’, ‘tomate’);
$data[‘estudiantes’] = array(
array(‘nombre’ => ‘juan’, ‘edad’ => ‘28'),
array(‘nombre’ => ‘pedro’, ‘edad’ => ‘26'),
array(‘nombre’ => ‘ana’, ‘edad’ => ‘25')
);
return View::make(‘ejemplo’, $data);
});
//y en la vista...
@if(isset($estudiantes))
@foreach($estudiantes as $estudiante)
<br>{{$estudiante[‘nombre’].’ ‘.$estudiante[‘edad’]}}
@endforeach
@endif

La estructura foreach es muy útil para llenar tablas de datos, pero puedes darle todos los usos que quieras.

Plantillas en Blade

Blade esta hecho para facilitar el proceso de crear las vistas, podemos crear nuestras plantillas e incluirlas en otras y jugar con ellas como mas nos convenga.

crearemos dos plantillas y la importaremos en nuestra vista de ejemplo:

//cabecera.blade.php
<div>Esta es la cabecera de la vista!</div>
//pie.blade.php
<div>Este es el pie de la vista!</div>
//ejemplo.blade.php
@include(‘cabecera’)
//logica de la aplicacion
@include(‘pie’)

Es muy útil seccionar algunas partes de las plantillas ya que el tener todo junto en un solo archivo puede ser un problema a la hora de cambiar algo en la vista, seccionar las vistas nos puede facilitar el mantenimiento de la aplicación.

Herencia de plantillas

Esta es a mi parecer la utilidad mas poderosa del motor de plantillas blade, si bien el seccionar e incluir una plantilla dentro de otra nos ayuda a ordenar la lógica de las vistas, la herencia de plantillas lleva a otro nivel el proceso de ordenar y construir nuestro frontend de una forma optima y fácil.

Obviamente la mejor forma de ver esta funcionalidad es con un ejemplo, construiremos una plantilla que servirá de marco para las otras, a esta plantilla la llamaremos layout.blade.php

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Hay partes de una plantilla que no cambian mucho como la cabecera(head), el titulo(title) y el body, con blade podemos tener una plantilla base y en esta definir estilos css, archivos javascript, imagenes y estructura básica que tendrán un conjunto de vistas. Para poder ordenar una plantilla hacemos uso de una serie de etiquetas:

<!DOCTYPE html>
<html>
<head>
<title></title>
@section(‘cabecera’)
<link rel=”stylesheet” href=”estilo.css” />
@show
</head>
<body>
@yield(‘cuerpo’)
</body>
</html>

la etiqueta @yield sirve para indicarle a blade que cree una sección que va a ser llenada por una plantilla que extienda de esta, la etiqueta @seccion sirve para indicarle que cree una sección con un contenido por defecto, esto es muy útil para definir estilos globales y archivos javascript que van a ser utilizados por las vistas hijas.

Para utilizar la plantilla anterior como base crearemos otra plantilla extiende.blade.php y colocaremos lo siguiente:

@extends(‘layout’)
@section(‘cuerpo’)
<h2>Esta plantilla extiende de otra!</h2>
@stop

Podemos ver que le pasamos a la etiqueta @section el sobrenombre que colocamos en la etiqueta @yield de el layout, entonces lo que coloquemos entre @section(‘cuerpo’) y @stop se mostrará en el body del nuestra pagina.

para ver el resultamos creamos una ruta:

Route::get(‘/plantillas’, function()
{
return View::make(‘extiende’);
});

si vamos al navegador y colocamos http://ruta/hacia/nuestra_web/public/plantillas e inspeccionamos elemento veremos lo siguiente:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href=”estilo.css” rel=”stylesheet”>
</head>
<body>
<h2>Esta plantilla extiende de otra!</h2>
</body>
</html>

Ejemplo funcional

Intentare hacer un ejemplo en el que se pueda apreciar todo lo anteriormente visto, haremos un layout con un menú y un footer y el resto de plantillas extenderán de esta.

Para este ejemplo usaremos bootstrap

En la carpeta views crearemos un nuevo directorio y lo llamaremos layouts y dentro de éste crearemos un archivo al que llamaremos layout.blade.php, dentro colocaremos lo siguiente:

<!DOCTYPE html>
<html>
<head>
<title>@yield(‘titulo’)</title>
@section(‘cabecera’)
<link rel=”stylesheet” href=”bootstrap/css/bootstrap.css” />
<style type=”text/css”>
.content{
margin-top: 100px;
}
</style>
@show
</head>
<body>
@include(‘importar.navbar’)
@yield(‘cuerpo’)
@include(‘importar.footer’)
</body>
</html>

Como podemos ver tenemos una plantilla base que consta de tres partes: la sección titulo donde colocaremos el contenido de la etiqueta title de cada vista. La sección cabecera donde irán los estilos css, archivos javascript, etc. Por ultimo tenemos la sección cuerpo donde colocaremos el contenido que llenará el body de la aplicación.

También incluimos la barra de navegación y el footer, estos dos están dentro de una carpeta llamada importar que se encuentra a la vez dentro de la carpeta views, la forma de llama es: nombre_carpeta.nombre_archivo. Este es el esqueleto básico de la aplicacion de ejemplo.

Ahora en la carpeta views crearemos un directorio llamado myapp, dentro de el crearemos un archivo llamado app.blade.php y en el colocaremos lo siguiente:

@extends(‘layouts.layout’)
@section(‘titulo’)
Inicio
@stop
@section(‘cabecera’)
@parent
<link rel=”stylesheet” href=”bootstrap/css/bootstrap-theme.css” />
@stop
@section(‘cuerpo’)
<div class=”container content”>
 <div class=”row row-offcanvas row-offcanvas-right”>
 <div class=”col-xs-12 col-sm-9">
<p class=”pull-right visible-xs”>
<button type=”button” class=”btn btn-primary btn-xs” data-toggle=”offcanvas”>Toggle nav</button>
</p>
<div class=”jumbotron”>
<h1>Hola!</h1>
<p>Ejemplo del motor de plantillas blade!</p>
</div>
</div><!—/row→
</div><!—/span→
</div>
@stop

En esta vista llenamos las secciones del layout, aquí definimos el titulo, y también agregamos un nuevo estilo css. Para poder agregar estilos en una plantilla que extiende de otra debemos colocar la etiqueta @parent, también llenamos la sección del cuerpo.

Para poder acceder a esta vista creamos la siguiente ruta:

Route::get(‘/myapp’, function()
{
return View::make(‘myapp.app’);
});

si vamos al navegador y colocamos http://ruta/hacia/nuestra_web/public/myapp podremos visualizar el contenido de nuestra vista.

Ahora veremos como llenar una tabla de datos en una vista con blade. Primero crearemos una ruta de esta manera:

Route::get(‘/users’, function()
{
$data[‘users’] = array(array(‘nombre’ => ‘Yamid Viloria’, ‘edad’ => ‘23', ‘activo’ => ‘si’),
array(‘nombre’ => ‘Juan Perez’, ‘edad’ => ‘19', ‘activo’ => ‘si’),
array(‘nombre’ => ‘Maria Gonzales’, ‘edad’ => ‘20', ‘activo’ => ‘no’),
array(‘nombre’ => ‘Pedro artinez’, ‘edad’ => ‘26', ‘activo’ => ‘si’),
array(‘nombre’ => ‘Ana Suarez’, ‘edad’ => ‘17', ‘activo’ => ‘no’));
return View::make(‘myapp.users’, $data);
});

Ahora crearemos dentro de la carpeta myapp un archivo llamado users.blade.php y dentro de el colocaremos lo siguiente:

@extends(‘layouts.layout’)
@section(‘titulo’)
Users
@stop
@section(‘cuerpo’)
<div class=”container content”>
<table class=”table table-hover”>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Activo</th>
</tr>
</thead>
<tbody>
@if(isset($users))
@foreach($users as $user)
<tr><td>{{$user[‘nombre’]}}</td><td>{{$user[‘edad’]}}</td><td>{{$user[‘activo’]}}</td></tr>
@endforeach
@endif
</tbody>
</table>
</div>
@stop

si vamos al navegador y colocamos http://ruta/hacia/nuestra_web/public/users podremos visualizar la tabla creada dinámicamente con blade.

Este fue un tutorial básico, pero si se logra entender bien y aplicar correctamente lo anterior, podremos utilizar correctamente este motor de plantillas.

Podremos encontrar el código en https://github.com/yamidvo/laravel-blade

Show your support

Clapping shows how much you appreciated Yamid Viloria Ortega’s story.