Aprende Laravel: Vistas & Layouts

Jun 3, 2023

Are you looking for a mentor?

Whether you're a beginner or need assistance with a work-related project, I'm available to provide support.

Las vistas ofrecen una presentación visual de los resultados (una pantalla de nuestro sitio web) al usuario, quien podrá interactuar con ella.

Esta división nos permite separar la parte de presentación de los resultados de la lógica (controladores) y la base de datos (modelos). Por ende, no tendremos que realizar ningún tipo de consulta o procesamiento de datos, sino recibir los datos y prepararlos para mostrarlos en formato HTML.

Definir vistas

Las vistas se almacenan en la carpeta resources/views como ficheros PHP, y por lo tanto tendrán la extensión .blade.php. Contendrán el código HTML de nuestro sitio web, mezclado con los assets (CSS, imágenes, Javascripts, etc. que estarán almacenados en la carpeta public) y algo de código PHP o código Blade que ya hablaremos de esto.

Cómo usar una vista

Por el momento, vamos a llamar a las vistas desde una ruta tal cual lo hicimos en el articulo anterior de esta forma:

1Route::get('/', function () {
2    return view('welcome');
3});

Route::get('/', function () {
    return view('welcome');
});

O de esta otra forma:

1Route::view('/', 'welcome');

Route::view('/', 'welcome');

Aunque la forma correcta sería llamar a las vistas desde un controlador de esta manera:

 1<?php
 2 
 3namespace App\Http\Controllers;
 4 
 5use Illuminate\Http\Request;
 6 
 7class HomeController extends Controller
 8{
 9    /**
10     * Display a listing of the resource.
11     */
12    public function index()
13    {
14       return view('welcome');
15    }
16}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index()
    {
       return view('welcome');
    }
}

En este ejemplo, la petición que se está ejecutando va a ser resuelta por el método index del controlador HomeController

Organizar vistas

Es importante organizar todas las vistas que tengan relación con la misma funcionalidad dentro de una misma carpeta y, en muchas ocasiones, esas vistas llevan el nombre de la acción que realizan.

Por ejemplo, actualmente estamos trabajando con la vista welcome.blade.php que se encuentra en resources/views. Si quisiéramos colocar esta vista dentro de otro directorio, por ejemplo, home, lo único que debemos hacer es crear esa carpeta y modificar la ruta de acceso a la vista de la siguiente manera:

Crea una carpeta llamada home dentro del directorio resources/views.
Mueve el archivo welcome.blade.php a la carpeta home.
Modifica la ruta de acceso a la vista en tu código para reflejar la nueva ubicación: return view('home.welcome');

Con estos pasos, la vista welcome.blade.php estará ubicada dentro de la carpeta home y podrás acceder a ella utilizando la ruta modificada.

También si quisiéramos podríamos renombrar la vista welcome.blade.php a index.blade.php

Pasar datos a una vista

Pasar datos a una vista es muy fácil y se puede hacer de varias formas, dependiendo de cómo estemos llamando a esa vista. Por ejemplo, anteriormente habíamos hablado de cómo a una ruta se le puede pasar un parámetro y recibirlo posteriormente de la siguiente forma:

1Route::get('/{user_id}', function ($user_id) {
-    return view('welcome'); 
+    return view('welcome', compact('user_id'));  
4});

Route::get('/{user_id}', function ($user_id) {
    return view('welcome');
    return view('welcome', compact('user_id'));
});

Y en nuestra vista index tendríamos algo como esto:

1<html>
2    <body>
3        <p>El id recibido es {{ $user_id }} </p>
4    </body>
5</html>

<html>
    <body>
        <p>El id recibido es {{ $user_id }} </p>
    </body>
</html>

Cuando lleguemos al artículo sobre los controladores, retomaremos la explicación sobre cómo pasar datos a una vista.

Blade

Laravel utiliza Blade como motor de plantillas en las vistas. Blade es una poderosa herramienta que nos permite definir y estructurar las vistas de una manera más eficiente y legible.

En Blade, el código dentro de una vista se inicia con los símbolos @ o {{ }}. Estos símbolos indican a Blade que se debe procesar y mostrar el contenido correspondiente al renderizar la vista.

El símbolo @ se utiliza para incluir directivas de Blade, que son instrucciones especiales que nos permiten realizar diferentes acciones dentro de la vista, como condicionales, bucles y más.

Por otro lado, el símbolo {{ }} se utiliza para imprimir variables en la vista. Esto nos permite mostrar dinámicamente contenido proveniente de nuestra lógica de aplicación.

Es importante destacar que Blade no añade sobrecarga de procesamiento en cada solicitud, ya que todas las vistas son preprocesadas y cacheadas, lo que mejora el rendimiento de la aplicación. Esto significa que las vistas son compiladas una sola vez y se almacenan en caché para su uso posterior, a menos que haya cambios en los archivos de la vista.

Además de la eficiencia, Blade nos brinda utilidades que nos ayudan en el diseño y modularización de las vistas. Podemos utilizar directivas, layouts, componentes y más para crear vistas más estructuradas y reutilizables.

Para mayor informacion sobre como usar blade te invito a leer la documentacion oficial.

Tallstack

TALL stack es una combinación poderosa y versátil de tecnologologías que facilita el desarrollo de aplicaciones web modernas y de alto rendimiento. Aprovechando las ventajas de:

Tallstack es usado principalmente en aplicaciones de backend o paneles administrativos. Actualmente Laravel viene con plantillas o vistas construidas con Tailwind CSS y hace uso de Alpine.js para ejecutar ciertas acciones que requieren el uso de javascript.

El uso de Livewire sirve para dar cierta reactividad a la aplicación sin tener toda la complejidad de React, VueJs o Angular 👀

Autor

Angel Cruz

Aprende Laravel: Vistas & Layouts

#Definir vistas

#Cómo usar una vista

#Organizar vistas

#Pasar datos a una vista

#Blade

#Tallstack