LABORATORIO VI

Guía 14 - Laravel - Vistas más flexibles

Prof. José Luis Soncco Álvarez

1. Blade, el motor de plantillas de Laravel

Uno de los problemas con los archivos listado.php y detalles.php es que

tienen bastantes partes de código en común. En caso de que quisiésemos
modificar el diseño del sistema web, tendríamos que modificar uno a uno los
archivos que contienen código en común.

Para solucionar este problema Laravel trae consigo a Blade, que es un

motor de plantillas. Crearemos un nuevo archivo que será el layout (diseño)
principal. Un detalle importante es que los archivos de Blade tienen que tener la
extensión .blade.php, entonces llamaremos al archivo de diseño como
principal.blade.php y por ser una vista tiene que estar dentro la carpeta
/resources/views. El contenido de este archivo quedará como sigue:

Como se puede ver, este archivo contiene todo el código HTML en común,
además tiene la marcación @yield con el nombre de la sección que deberá ser
sobre-escrita por las otras vistas. Eso quiere decir que las otras vistas
heredaran el código de este diseño principal y también sobre-escribirán las
secciones definidas en el.

Comencemos modificando el archivo detalles.php, cuyo nombre será

cambiado para detalles.blade.php. El archivo tendrá que ser modificado de
tal manera que el código en común tiene que ser eliminado, el código quedará
de la siguiente manera:
 Vemos que tiene la marcación @extends con el nombre del diseño del cual
hereda su código. Ademas tiene la marcación @section con el nombre de la
sección que va a sobre-escribir, este el mismo nombre que fue definido con la
marcación @yield.

Además, el marcador @stop es usado para marcar el fin de una sección.

Eso es necesario por que se pueden sobre-escribir más secciones del diseño
principal.

Variables con Blade

Actualmente estamos utilizando código PHP puro para imprimir los valores
del producto, como:

<li> <b>Valor:</b> R$ <?= $p->valor ?> </li>

Sin embargo, podemos usar la forma de Blade, colocando llaves dobles

como:

<li> <b>Valor:</b> R$ {{$p->valor}} </li>

El código del archivo detalles.blade.php debe quedar de la siguiente

manera:
2. Migrando el listado para Blade

Ahora nos toca realizar las modificaciones necesarias al archivo

listado.php. Los pasos serán primero modificar su nombre a
listado.blade.php, y luego agregar los marcadores @extends y @section, el
código debe quedar de la siguiente manera:

Blade también nos permite mejorar la sintaxis de los bucles. En este caso
en vez de usar
<?php foreach ($productos as $p): ?>
<!-- código omitido -->
<?php endforeach ?>

Podemos usar:

@foreach ($productos as $p)

<!-- código omitido -->
@endforeach

El código del archivo listado.blade.php quedará como sigue:

Otros tipos de bucles

Además de foreach, también podemos mejorar la sintaxis del bucle for:

@for ($i = 0; $i < 10; $i++)

El indice actual es {{ $i }}
@endfor

También del bucle while:

@while (true)
Es es un bucle infinito
@endwhile

Agregando condiciones a la vista

Ahora agregaremos una condición usando Blade de tal manera que se

muestre un mensaje en caso de que no exista ningún producto registrado. El
código del archivo listado.blade.php quedará de la siguiente manera:

Para probar el anterior código, modifiquemos el método lista de la clase

ProductoController de tal manera que retorne un arreglo vacío:

return view('listado')->with('productos', array());

Probemos las modificaciones en el navegador:

3. Marcando productos en falta del stock

Ahora pintaremos de color rojo las filas de los productos cuya cantidad sea
menor o igual a 2. Basta agregar la clase table-danger en los tr de los
productos en falta:

<tr class="table-danger">

Además, debemos incluir un condicional ternario de la siguiente forma:

<tr class="{{$p->cantidad <= 2 ? 'table-danger' : ''}}">

El código correspondiente a la tabla del archivo listado.blade.php es

como sigue:

Después, podemos agregar una leyenda que nos permita entender mejor lo
que significa el color rojo:

<h4>
<span class="badge badge-danger float-right">
Dos o menos productos en el stock
</span>
</h4>

El código del archivo listado.blade.php quedará de la siguiente manera:

 Probemos las modificaciones anteriores en el navegador:

4. Organizando las vistas

A medida que el sistema crece, van a aparecer más vistas las cuales tienen
que ser organizadas. Es común separar estas vistas por controlador, por
ejemplo tenemos el controlador ProductoController, entonces podemos
crear la carpeta producto y colocar ahí todas las vistas relacionadas.
 Crearemos una nueva carpeta llamada producto, la cual colocaremos
dentro de resources/views, luego moveremos los archivos
listado.blade.php y detalles.blade.php para dentro de la carpeta producto.

Ademas crearemos una nueva carpeta llamada layout dentro de

resources/views, luego moveremos el archivo principal.blade.php para
dentro de layout.

Intentemos ver el resultado en el navegador

Aparece un error, necesitamos alterar el retorno de los métodos del

controlador ProductoController. Actualmente tenemos lo siguiente en el
método lista:

return view('listado')->with('productos', $productos);

Modificaremos la anterior linea de modo que se indique la carpeta en la que

se encuentra la vista listado:

return view('producto/listado')->with('productos', $productos);

O también puede ser de la siguiente forma:

return view('producto.listado')->with('productos', $productos);

Se tiene que hacer lo mismo con el método detalles, el código quedará de la

siguiente manera:
 Intentemos ver el resultado en el navegador:

El error nos indica que la vista principal no fue encontrada. Entonces,

tenemos que modificar los archivos listado.blade.php y detalles.blade.php,
de tal manera que en vez de

@extends('principal')

Tengamos lo siguiente:

@extends('layout.principal')

Con las anteriores modificaciones nuestro sistema volverá a funcionar

normalmente.
5. Mejorando la plantilla principal

Vamos aplicar algunas alteraciones a el archivo principal.blade.php de

manera que se mejore el diseño de la aplicación web. La cabecera (head) del
archivo quedará de la siguiente manera:

El cuerpo (body) quedará de la siguiente manera:

Además, se esta importando el archivo custom.css el cual aun no fue

creado. Crearemos el archivo custom.css dentro de la carpeta /public/css/
con el siguiente contenido:
Ahora probemos los nuevos estilos en el navegador:
6. Evaluación

Max. Puntos (16) Puntos Obtenidos

Actividad 1 3
Actividad 2 3
Actividad 3 3
Actividad 4 3
Actividad 5 4
Total

NOTA: Si el alumno resuelve la guía el mismo día de la entrega de la misma,

tendrá un bono de 4 puntos.

7. Bibliografía

Stauffer, M. (2016). Laravel: up and running: a framework for building modern

PHP apps. " O'Reilly Media, Inc.".

Turini, R. (2015). PHP e Laravel: crie aplicações web como um verdadeiro

artesão. São Paulo: Casa do Código.

Documentación oficial de Laravel. https://laravel.com/docs/5.8