Laravel series V: Vistas Blade
Ya vamos por el capítulo cinco de Laravel y no hay mejor manera de demostrar que Laravel es un Framework de desarrollo integral de tu página web.
Pero hasta ahora nos hemos centrado en el Backend, esa parte que se ejecuta en el servidor y que no muestra una información concreta al usuario.
¿Integra este Framework una solución para el Frontend? Esa parte de nuestra aplicación que se muestra información al usuario que realiza las peticiones.
Pues sí, esta solución viene dada a través de las vistas.
Si acabáis de aterrizar en este artículo y queréis consultar los otros artículos de la serie, os dejo un índice de la misma por aquí:
- Laravel series I: El modelo MVC
- Laravel series II: Instalación + Artisan
- Laravel series III: Bases de datos + modelo
- Laravel series IV: Migraciones + seeders
- Laravel series VI: Instalando un sistema de autenticación
Las vistas implementan otro pilar fundamental del modelo en el que Laravel está basado, el modelo vista controlador (MVC), que veíamos en el primer capítulo de esta serie.
Debido a que no tiene mucho sentido devolver el HTML a mostrar al usuario directamente desde los controladores (en un sistema de encapsulación idóneo, los controladores deberían encargarse solamente de la parte de negocio de la aplicación), las vistas son las encargadas de mostrar este código HTML.
El gestor de vistas por excelencia de Laravel es Blade.
Nuestra primera vista Blade ¶
Como ya hemos visto en artículos anteriores, Laravel es un Framework altamente dogmático.
Esto quiere decir que para que el sistema funcione correctamente debemos localizar los archivos en cierta carpetas y llamarlos de una forma concreta (aunque esto último sólo ocurra en algunos casos).
La ruta donde se incluyen las vistas es resources\views y para que Laravel entienda que se trata de una vista, las mismas deben contener la extensión: .blade.php.
La vista Blade no sólo contiene HTML, sino que nos propone una solución para:
- Mostrar valores de variables traídas desde el controlador que llama a la vista.
- Incluir bloques condicionales.
- Iteración de datos, etc.
En este caso, Laravel (al menos hasta la versión en la que nos encontramos, la número 8), no integra un comando Artisan para la creación de vistas, así que nos vale simplemente con crear un archivo en la ruta antes mencionada.
De hecho, cuando instalamos Laravel en nuestro sistema por primera vez, ya integra una vista por defecto para mostrarnos una pantalla de bienvenida: welcome.blade.php.
Esta es la web que vemos por defecto cuando ejecutamos nuestro servidor y atacamos a la ruta de nuestra aplicación a través de nuestro navegador web:
Así que Laravel hace bastante magia por nosotros, pero os podéis dar cuenta que el código está ahí. No dudéis en ir a la ruta resources\views\welcome.blade.php para ver que el código HTML mostrado está realmente ahí.
¿Qué os parece si empezamos por una vista sencilla? La famosa Hello world.
En este caso crearemos el siguiente archivo (un sencillo HTML) desde nuestro editor de código favorito: resources\views\helloWorld.blade.php:
<!DOCTYPE html>
<html lang='{{ str_replace('_', '-', app()->getLocale()) }}'>
<head>
<meta charset='utf-8'>
<title>{{ config('app.name', 'Laravel') }}</title>
</head>
<body class='font-sans antialiased'>
<h1>
Hello World
</h1>
</body>
</html>
Como habéis podido ver, el código incluido dentro de esta vista no es PHP, es mayormente HTML. Y digo mayormente porque si os habéis fijado bien en el código, tanto las etiquetas <html> como <title>, incluyen código que no es HTML.
Es aquí donde entra en juego Laravel, y es que para inyectar valores propios de la aplicación, espera que incluyáis cierto código entre los símbolos {{ }}. En este caso el idioma de nuestra aplicación (Locale) y el título de la misma (Title).
El valor de estas dos variables son obtenidas directamente de los archivos de configuración de Laravel.
Llamando a las vistas desde una ruta ¶
En este punto os estaréis preguntando cómo es capaz Laravel de interpretar que cuando realizamos la petición de una ruta, el raíz por ejemplo, tiene que mostrar una vista u otra.
Esta acción se lleva a cabo mediante la configuración de las rutas de la aplicación.
Las rutas de nuestra aplicación están contenidas en routes\web.php y es desde allí desde dónde se gestionan todas las rutas de nuestra aplicación.
Imaginad que tenemos una web sencilla que incluye las rutas:
- Index.
- Sobre mí.
- Contacto.
Pues bien, el reflejo de nuestro mapa del sitio se encuentra plasmado en la ruta antes indicada.
Para poder mostrar nuestra pequeña aplicación de prueba, HelloWorld, vamos a incluir una línea en routes\web.php que permita que cuando un usuario escriba en su navegador http:\\midomonio.com\helloworld, muestre la ruta que montamos en la sección anterior.
Las rutas aceptan los métodos de ataque estándar de los navegadores web: GET, POST, PUT, etc. En este caso, como simplemente vamos a gestionar la petición de una URL desde la barra del navegador, lo haremos a través del método GET.
Este es el código que contendría nuestro archivo web.php:
<?php
use Illuminate\Support\Facades\Route;
Route::get('/helloworld', function () {
return view('helloworld');
});
Cómo podéis ver, sólo tenemos que especificar el método: GET, la ruta: helloworld y la vista a retornar (dentro del método view()): helloworld. Este último hace mención al nombre de la vista creada (sin la extensión .blade.php).
Llamando a las vista desde un controlador ¶
En este punto es posible que os estéis preguntando qué es necesario hacer si queremos tratar la información a mostrar antes de ser inyectada a la vista, algo que se hace desde los controladores de nuestra aplicación; no siempre queremos mostrar un simple texto.
Para poder hacer esto, en lugar de llamar a la vista directamente desde la ruta, lo que haremos es incluir una llamada al controlador desde la vista y este último será el encargado de lanzar la vista.
Imaginemos la situación en la que tenemos un controlador simple: OurFirstController.php y desde ahí llamamos a la vista ourFirstView.blade.php que mostrará los valores de variables inyectados desde el controlador.
Recordad que las vistas se incluyen en resources\views y los controladores en app\Http\Controllers (estos últimos se pueden crear a través de comandos Artisan).
Gracias a este comando de Artisan, crearemos nuestro controlador:
php artisan make:controller OurFirstController
Desde nuestro controlador, vamos a declarar una variable que será inyectada a nuestra vista.
En esta ocasión simplemente estamos asignando un valor a una variable, pero pensad que en este punto podemos realizar cualquier acción: desde traer registros desde una base de datos, hasta realizar cálculos, llamar a métodos de otros controladores, llamar a librerías externas, etc.
Pensad que estamos en la capa de negocio y aquí las posibilidades de interacción son todas las que nos permita el Framework.
Nuestro controlador contendría este código:
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
class OurFirstController extends Controller
{
public function ourMethod()
{
$ourString = 'esta cadena viene del controlador';
return view('ourFirstView')->with('variableFromController', $ourString);
}
}
El nombre de variable que obtendrá la vista es: variableFromController y su valor, el contenido de la variable $ourString que en este caso es: esta cadena viene del controlador.
Ahora es el turno de crear el archivo de la vista en el que mostraremos la variable inyectada desde el controlador.
Para mostrar la variable, simplemente tenemos que incluirla dentro de los símbolos: {{ }}.
Vamos a ver cómo quedaría utilizando la vista que creamos anteriormente:
<!DOCTYPE html>
<html lang='{{ str_replace('_', '-', app()->getLocale()) }}'>
<head>
<meta charset='utf-8'>
<title>{{ config('app.name', 'Laravel') }}</title>
</head>
<body class='font-sans antialiased'>
<h1>
Hello World, {{ $variableFromController }}
</h1>
</body>
</html>
De este modo, el <h1> de la web mostrará:
Hello World, esta cadena viene del controlador
Por último, sólo nos queda modificar enrutador (fichero que gestiona las rutas de la aplicación), que en este caso llama al método del controlador (ourMethod()) en lugar de llamar directamente a la vista.
El archivo de rutas (recordad: routes\web.php) sería el siguiente:
<?php
use Illuminate\Support\Facades\Route;
Route::get('/helloworld','App\Http\Controllers\OurFirstController@ourMethod');
Leyendo de izquierda a derecha, podemos ver:
- Para las peticiones GET.
- A la ruta
/helloWorld. - Ejecuta el controlador@método.
Así de sencillo.
Ahora sólo os queda instalar Laravel en local (podéis ver una guía en Laravel series II) y ¡a darle duro a las teclas!
Podéis encontrar el código de esta aplicación en GitHub: Código fuente del artículo Laravel series 5: Vistas Blade.
Nos vemos en el siguiente fragmento de código.
Escrito originalmente por: Juan José Ramos
Daniel Primo
12 recursos para developers cada domingo en tu bandeja de entrada
Además de una skill práctica bien explicada, trucos para mejorar tu futuro profesional y una pizquita de humor útil para el resto de la semana. Gratis.