Vistas en Laravel 9, ¿Qué son? ¿Para qué sirven? y ejemplos
¡Hola!
Laravel es un Framework PHP basado en la arquitectura MVC (Modelo - Vista - Controlador). Las vistas en Laravel contienen el código HTML que necesita tu aplicación. Las vistas en Laravel permiten separar la lógica de la presentación (es decir cómo mostraremos el contenido al usuario).
Estas vistas se almacenan en resources/views y tienen una extensión .blade.php, por ejemplo, una página de contacto tendría el nombre de archivo siguiente contacto.blade.php.
Índice
Crear una vista en Laravel
Las vistas de Laravel son la parte más importante de cualquier proyecto de Laravel, ya que proporcionan una forma de representar el resultado de una aplicación. Las vistas están diseñadas para mostrar datos en un formato estructurado, como HTML, y se pueden usar para crear páginas web dinámicas.
Como hemos dicho anteriormente todas las vistas de nuestra aplicación se encuentran en app/resources/views
Podemos ver a través del siguiente ejemplo que una vista, es decir, un archivo con extensión .blade.php no es más que un HTML con algunas particularidades que veremos en siguientes puntos
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
</head>
<body>
<h1>Vistas en Laravel 9</h1>
</body>
</html>
Retornar una vista en Laravel desde routes
Con Laravel no hace falta que devolvamos la vista desde un controlador, también podemos mostrar una vista desde routes/web.ph, es decir desde nuestro archivo de rutas como podemos ver en el siguiente ejemplo:
/**
* Devolvemos la vista welcome.blade.php
* Como vemos solo ponemos el nombre y no su extensión
*/
Route::get('/', function () {
return view('welcome');
});
Retornar una vista en Laravel desde un controlador
Para aplicaciones más complejas es una buena práctica devolver la vista desde un controlador. A través del siguiente ejemplo aprenderás a retornar una vista desde un controlador en Laravel:
1º Creación del controlador
Comenzamos el ejemplo creando un controlador en Laravel mediante PHP artisan. Lo hemos llamado EjemploController pero puedes llamarlo como queramos.
php artisan make:controller EjemploControllerPuedes obtener más información cobre los controladores en nuestro artículo sobre Controladores en Laravel 9
2º Creación de la función en el Controlador que devolverá la vista
Vamos al controlador EjemploController(en mi caso) Laravel que acabamos de crear que se encuentra en app/Http/Controllers y creamos una función que llamamos index (podemos llamarla como queramos):
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class EjemploController extends Controller
{
public function index()
{
// Devolvemos la vista
return view('welcome');
}
}
Como vemos en el ejemplo retornamos la función helper view y le pasamos como argumento el nombre de la vista sin su extensión.
3º Creación de la ruta en Laravel:
Vamos a crear la ruta que llamará a la función que devolverá la vista. Una vez hemos creado nuestro controlador debemos crear la ruta que llamará a la función que hemos creado en el paso anterior(index()), para ello nos dirigimos al archivo de rutas (routes/web.php) y creamos la ruta /ejemplo (al igual que los puntos anteriores, podemos poner la ruta que deseemos)
<?php
use App\Http\Controllers\EjemploController;
use Illuminate\Support\Facades\Route;
// Ruta ejemplo llama a la función index del EjemploController
Route::get('/ejemplo', [EjemploController::class, 'index']);
4º Probar la aplicación que nos devuelve una vista en Laravel:
Ejecutamos la aplicación mediante el siguiente comando:
php artisan serveAbrimos nuestro navegador favorito, ponemos la ruta que nos devuelve el php artisan serve y vamos a la ruta que hemos creado en mi caso /ejemplo
Enviar datos a la vista desde el controlador en Laravel
Laravel nos permite mostrar en las vistas los datos recibidos del controlador de una forma muy sencilla. Vamos a seguir utilizando el EjemploController que hemos creado en el punto anterior pero crearemos una vista desde 0.
1º Crear la vista en Laravel
Nos dirigimos a resources/views (como vimos es donde se crean las vistas en Laravel) y creamos una vista que llamaremos welcome-2.blade.php (podemos poner el nombre que queramos)
2º Editar la vista creada
Con la vista creada el siguiente paso es editarla para mostrar los datos que recibiremos desde nuestro controlador EjemploController
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
}
</style>
</head>
<body>
<h1>El título es: {{ $titulo_nuevo }}</h1>
{!! $html_controlador !!}
</body>
</html>
Como vemos para mostrar un dato en formato texto utilizamos {{ $nombre_variable }}. Si este dato a mostrar es una etiqueta html tenemos que utilizar los signos de exclamación, es decir, {!!$nombre_variable !!}
3º Función para retornar una vista con datos
Creamos una nueva función llamada indexMostrarDatos() en nuestro controlador EjemploController que retornará la vista con una variable que tendrá un título que y tambien una variable que tendrá una etiqueta html
public function indexMostrarDatos()
{
/**
* Las variables de la vista se declaran aquí:
* 'titulo_nuevo' es la variable $titulo_nuevo de la vista
* 'html_controlador'es la variable $html_controlador de la vista
*/
return view('welcome-2', [
'titulo_nuevo' => 'Título desde controlador',
'html_controlador' => '<p>Este es el HTML</p>'
]);
}
Como vemos titulo_nuevo devuelve un texto plano y ‘html_controlador’ devuelve un párrafo HTML a nuestra vista en Laravel
4º Crear la ruta que ejecutará el controlador que devuelva la vista en Laravel
Como vimos en el punto anterior nos dirigimos a routes/web.php para crear la ruta que llamará a la función indexMostrarDatos() (o con el nombre que hemos escogido)
// Ruta ejemplo llama a la función indexMostrarDatos del EjemploController
Route::get('/ejemplo-datos', [EjemploController::class, 'indexMostrarDatos']);
5º Probar la aplicación que nos devuelve una vista en Laravel con datos:
Ejecutamos la aplicación de nuevo (si hemos cancelado el anterior php artisan serve)
php artisan serveAbrimos nuestro navegador favorito, ponemos la ruta que nos devuelve el php artisan(http://127.0.0.1:8000/)y vamos a la ruta que hemos creado es decir /ejemplo-datos y podemos ver como nuestra variable que devolvía una etiqueta html se ha convertido a HTML correctamente.
