Usuario

Olvidaste tu usuario o clave?

soroF

golB
selai rotuT

Entrar

Contrasea

sosrs
u
C
elai rotutoediV

o registrate

Buscar..

cm
io
C

l a i ro t u t nu ac i l buP ?ba l a t s i rC se uQ

sgaTso l pme jE sona t c t noC

emi nA

Buscar

Qu quieres buscar?

Tutoriales / Blade, el sistema de plantillas de Laravel

Blade, el sistema de plantillas de Laravel

Por Duilio el 01 de Octubre de 2013 con 4,349 visitas
PHP, MySQL y Servidor Otros tutoriales por Duilio.

Like

Test de
Mathmatiques
www.test-Math.com
Dcouvrez votre niveau en Maths. Faites
notre test de Mathmatiques.

25
Twittear

Para cerrar esta primera parte de los tutoriales quiero mostrarles cmo funcionan las vistas en Laravel. Este es
quizs el tutorial ms fcil de todos. Veremos cmo usar el sistema de plantillas de Laravel llamado Blade.
No te pierdas los anteriores tutoriales de Laravel:
introduccin a Laravel,
su instalacin,
Cmo configurar la base de datos y crear migraciones,
las rutas
y los controladores.

Banoicnuf m
o
c y se Q
u
Blade es bsicamente un sub-lenguaje muy sencillo, que antes de ser usado por nuestra aplicacin, es compilado a PHP plano. Para usar Blade, simplemente
creen sus plantillas en el directorio views/ con la extensin .blade.php en vez de .php.
Por ejemplo:
Cdigo :

views/template.blade.php

Ahora creen una ruta o controlador que llame a la plantilla (ya saben cmo, Cierto?)
En caso de que no En app/routes.php pongan esto:
Cdigo :

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

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

Cdigo :

<h1>Hello Cristalab</h1>

Bastante bsico, es decir, en este punto da igual si usamos Blade o no Pero, vamos a ver:

satsiv r ibi rcsem

o

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

Cdigo :

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 ms interesante, lo pasamos por la ruta, y luego lo asignamos a la vista, con el mtodo ->with() que va concatenado a
View::make, fjense:
Cdigo :

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

Ok, ahora en nuestra vista, si estuviramos usando slo PHP, tendramos que escribir algo as:
Cdigo :

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

Pero gracias a Blade, podemos escribirlo as:

Cdigo :

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

Bsicamente: {{ }} es un sustituto de <?php ?> que por un lado es ms corto y fcil de escribir, por otro usar etiquetas PHP (<? ?>) se mezcla con las etiquetas
del HTML, as que usar motores como Blade es ms limpio por as decirlo.
Blade slo reemplaza {{ * }} por <?php echo * ?>, es decir, todo el cdigo PHP que quieras escribir es vlido dentro de {{ }}, por ejemplo:

Cdigo :

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

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

tcur tse r ibi rcsem

o

C
Por ltimo veremos cmo se escriben estructuras de control sencillas pero muy comunes como IF y FOREACH.
Blade tiene una sintaxis bien simple, por ejemplo:
Cdigo :

@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 parntesis del IF es PHP comn y corriente, lo que cambia es que en vez de escribir:

Cdigo :

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

O:

Cdigo :

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

Escribimos:

Cdigo :

@if (...)

Es una sintaxis mucho ms limpia y adecuada para nuestras vistas

Por supuesto, si estn escribiendo los ejemplos pueden ejecutarlos en el navegador, escribiendo algo como:
Cdigo :

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

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

varaL ne stuoyaL ed oU
s
Casi todos los proyectos, por no decir todos, tienen un layout que consiste, por lo general en un header + un footer. Por ejemplo fjense Cristalab.com Han
visitado esa pgina? Todas las pginas dentro del site cristalab.com llevan en la cabecera el logo de Cristalab + el men etc. y en el pie de pgina tiene el men
repetido y la foto de Freddier en un pony (bueno no, pero sera ms divertido).
Ese HTML que se repite en cada pgina se llama layout y en Blade podemos escribirlo as:
Creen una vista llamada:

Cdigo :

views/layout.blade.php

Con el siguiente HTML de ejemplo:

Cdigo :

<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:

Cdigo :

@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:
Cdigo :

View::make(template)

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

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

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

Cdigo :

@yield('content')

Esa etiqueta de Blade permite definir una seccin dinmica que puede ser reemplazada en la plantilla hijo, en este caso template.blade.php usando las
etiquetas:
Cdigo :

@section ('content')
<!-- HTML AQUI -->
@stop

Fjense que content es el nombre de la seccin en ambas plantillas. Por supuesto podemos crear tantas secciones como queramos:
Cdigo :

<!-- 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 ttulo HTML cambi a:

Cdigo :

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

En este caso el segundo parmetro de @yield sera el valor por defecto, es decir, si abrimos en el navegador nuestra direccin:
Cdigo :

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

Seguiremos viendo en el ttulo del mismo la frase: Aprendiendo Laravel, que es nuestro ttulo por defecto.
Pero si cambiamos views/template.blade.php a:
Cdigo :

@extends ('layout')
@section ('title') Saludos a {{ $name }} @stop
@section ('content')
<h1>Hello {{ $name }}</h1>
@stop

Entonces el ttulo ahora ser, por ejemplo: Saludos a Cristalab. Tengan en cuenta que pueden crear tantas secciones como gusten, y que cada seccin puede
tener un valor por defecto y un valor distinto en cada sub-plantilla. Adems pueden usar variables, etc. en cada seccin.
Para finalizar, 2 tips:
1. En HTML, como ya deben saber, los comentarios se escriben as:

Cdigo :

<!-- comentario -->

Y suelen ser tiles cuando el HTML que escribimos es muy complicado, sin embargo dichos comentarios se envan al navegador junto con el resto de las
etiquetas, y esto no es siempre lo que queremos, dado que cualquiera podra leerlos y hacen el HTML un poco ms pesado, etc
Con Blade podemos escribir comentarios as:

Cdigo :

{{-- 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:

Cdigo :

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

Es posible usar PHP plano dentro de Blade, slo traten de mantener sus plantillas lo ms limpias posibles, limiten el uso de PHP, y si en tal caso lo necesitan,
escriban slo sentencias sencillas y preferiblemente al inicio de la plantilla.
Visiten la documentacin oficial para obtener ms ejemplos sobre Blade
Espero les haya gustado este tutorial, recuerden que todo esto se ir profundizando ms adelante, por ahora es slo un bosquejo para que se familiaricen con
todos estos conceptos
Stay tuned.
Envia un comentario (6)

Introduccin a Laravel

Crear un mdulo de usuarios con Laravel

Enviar emails con Laravel

Por Luis el 04 de Octubre de 2013

Perfecto me gusta como explicas las cosas, solo tengo una duda al principio dices que es el "cierre de estos tutoriales" que quieres decir con eso :C?
Y, en caso de que vuelvas a hacer ms, cuando crees que podamos ver uno nuevo? gracias

Por Duilio el 04 de Octubre de 2013

Cierre de la "primera parte" en la segunda parte exlicar cmo hacer un mdulo con Laravel desde 0. Eso sera a partir de la semana que viene.

Por Nico el 06 de Octubre de 2013

Muy bueno! Es bsico pero lo explicas muy bien. Laravel es divertido y potente, espero con ansias el tuto de mdulos. Gracias!

Por rezme el 06 de Octubre de 2013

Esperando el siguiente tuto

genial

Por xadrijo el 25 de Octubre de 2013

excelente, dulio.

Por Miguel Angel Torres el 06 de Noviembre de 2013

Muchas gracias Dulio.
Explicas muy muy bien. Y t haces que esto sea ms divertido.
Por favor sigue as con estos tutos tan buenos.

oi ratm
no
ecut aci lbP
u

. . .sedeupo
Tu nombre:
Escribe tu nombre o nick

No escribas con mayusculas ni como

si fuera un SMS.

Tu comentario:
Cuentanos en detalle lo quieras opinar

Inicia sesin

Insultos, trolls y spammers son siempre

eliminados.
[b]negrita[/b]
[img]http://url/imagen.jpg[/img]
[url=direccion]tu enlace[/url]

Publicar

Blog

Ests registrado en
Cristalab y quieres
publicar tu URL y avatar?

S respetuoso. S detallado.

Foros

Tutoriales

Tutoriales de Flash

Ejemplos .fla

Anime

Videotutoriales

Cursos

No ests registrado an
pero quieres hacerlo antes
de publicar tu comentario?
Registrate

Curso de Flash

Curso de HTML

Tags