La wiki de TempWin

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== Trabajando con vistas en Laravel ======

[[informatica:programacion:php:frameworks:laravel|Laravel]]

Las vistas se sitúan en la carpeta ''resources/views''. Los ficheros que hacen de vistas terminan en ''.blade.php''. Esto es porque utilizan el motor plantillas **Blade** que viene incluido con Laravel.

===== Creación de vistas =====

Podemos crearla manualmente guardando el fichero terminado en ''.blade.php'' en la carpeta ''resources/views'' o utilizando **artisan**:

<code>
php artisan make:view home
</code>

Una vista puede ser un fichero tan simple como:

<code html>
<!-- Vista almacenada en resources/views/home.blade.php -->
 
<html>
    <body>
        <h1>Hola, {{ $nombre }}</h1>
    </body>
</html>
</code>

===== Usando vistas en los controladores =====

<code php>
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller {
    public function __invoke() {
        return view('home'); // 'view' es un "helper" de Laravel para llamar a una vista
    }
}
</code>

El fichero ''routes/web.php'' lo tenemos así:

<code php>
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;
use App\Http\Controllers\PostController;

Route::get('/', [HomeController::class, 'index']);
</code>

Una práctica recomendable, por convención, es nombrar a las vistas como el método del controlador que la llama. Por ejemplo, supongamos que tenemos el siguiente controlador:

<code php>
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PostController extends Controller
{
    public function index() {
        return "Aquí irán los posts";
    }

    public function create() {
        return "Aquí se mostrará un formulario para crear un post";
    }

    public function show($post) {
        return "Aquí se mostrará el post {$post}";
    }
}
</code>

Entonces crearíamos las vistas ''index.blade.php'', ''create.blade.php'', ''show.blade.php'' y ''show.blade.php''. Por organización, queremos que las cree en una carpeta llamada ''posts'' ya que todas tienen que ver con lo mismo:

<code>
php artisan make:view posts.index
php artisan make:view posts.create
php artisan make:view posts.show
</code>

Ahora haría modificaciones en el controlador para llamar a las vistas creadas:

<code php>
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PostController extends Controller
{
    public function index() {
        return view("posts.index");
    }

    public function create() {
        return view("posts.create");
    }

    public function show($post) {
    // Para pasarle variables a un vista, la añadimos a un array
    // como segundo argumento del "helper" 'view'
        return view("posts.show", [
            'post' => $post
        ]);
    }
}
</code>

La vista ''show.blade.php'' es un poco especial porque muestra información variable:

<code html>
<p>Aquí se mostrará el post {{ $post }}</p>
</code>

<WRAP center round info 60%>
Si no usásemos las etiquetas de Blade, mostraríamos el contenido de esa variable como hacemos en PHP:

<code php>
<p>Aquí se mostrará el post <?php echo $post; ?></p>
</code>
</WRAP>

Para pasarle argumentos a una vista desde un controlador, también podemos usar la función ''[[https://www.php.net/manual/es/function.compact.php|compact()]]'':

<code php>
// ... código
    public function show($post) {
        return view("posts.show", compact('post'));
</code>

La función ''compact()'' genera un array con la clave llamada como el argumento y el dato también, pero con el símbolo de dólar, que indica que se trata de una variable. Es decir, ''compact('post')'' creará el siguiente array:

<code php>
['post' => $post];
</code>

===== Blade: motor de plantillas =====

[[https://laravel.com/docs/11.x/blade|Blade]] es el motor de plantillas que incluye Laravel

==== Variables ====

Para mostrar el contenido de una variable en Blade:

<code hml5>
{{ $variable }}
</code>

Comentar para que no las procese ni las muestre:

<code hml5>
{{-- $variable --}}
</code>

Si queremos que aparezca el texto tal cual (llaves incluidas), es decir, que Blade no evalúe nada:

<code hml5>
@{{ $variable }}
</code>

Esto es útil si estamos trabajando con un framework para el frontend como Vuejs, React o Angular ya que también utilizan la sintaxis de las dobles llaves para las variables.

==== Estructuras de control ====

Por ejemplo, si tenemos en nuestro controlador:

<code php>
    public function index()
    {
        $products = Product::all();
        
        return view("products.index")->with([
            "products" => $products,
        ]);
    }
</code>

En la vista (''resources/views/products.blade.php''):

<code html5>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Product</title>
  </head>

  <body>
    <h1>List of Products</h1>
    
    @if (empty($products))
        <div class="alert alert-warning">
            This list of products is empty
        </div>
    @else
        <div class="table-responsive">
            <table class="table table-striped">
                <thead class="thead-light">
                    <tr>
                        <th>ID</th>
                        <th>Title</th>
                        <th>Description</th>
                        <th>Price</th>
                        <th>Stock</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($products as $product)
                    <tr>
                        <td>{{ $product->id }}</td>
                        <td>{{ $product->title }}</td>
                        <td>{{ $product->description }}</td>
                        <td>{{ $product->price }}</td>
                        <td>{{ $product->stock }}</td>
                        <td>{{ $product->status }}</td>                        
                    </tr>      
                    @endforeach                  
                </tbody>
            </table>
        </div>
    @endif
  </body>
</html>
</code>

Para el caso de comprobar vacíos, existe otra estructura dedicada::

<code html5>
    <h1>List of Products</h1>
    
    @empty ($products)
        <div class="alert alert-warning">
            This list of products is empty
        </div>
    @else
    ...
    @endempty
</code>

==== Componentes ====

Cuando queramos definir código que se repite en varios puntos de nuestro proyecto, Blade nos permite la creación de componentes.

Para organizarlo, creamos una carpeta ''resources/views/components'' y creamos un fichero con un nombre significativo. Por ejemplo, si queremos crear un componente para las alertas, creamos un fichero ''alert.blade.php'':

<code html>
<div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400" role="alert">
    <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</div>
</html>
</code>

A partir de este momento, cada vez que queramos llamar a ese componente, utilizaríamos la etiqueta ''<x-nombre-del-archivo>'':

<code html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://unpkg.com/@tailwindcss/browser@4"></script>  
    </head>
    <body>
        <!-- Breathing in, I calm body and mind. Breathing out, I smile. - Thich Nhat Hanh -->
         <div class="max-w-4xl mx-auto px-4">
            <x-alert></x-alert>
        </div>
    </body>
</html>
</code>

Para tener un contenido variable en un componente, tenemos que crear una variable en el lugar que va a cambiar:

<code html>
<div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400" role="alert">
    <span class="font-medium">Info alert!</span> {{ $slot }}
</div>
</html>
</code>

Y le pasaríamos el contenido en la etiqueta de la vista donde la usamos:

<code html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://unpkg.com/@tailwindcss/browser@4"></script>  
    </head>
    <body>
        <!-- Breathing in, I calm body and mind. Breathing out, I smile. - Thich Nhat Hanh -->
         <div class="max-w-4xl mx-auto px-4">
            <x-alert>
                Contenido de la alerta
            </x-alert>
        </div>
    </body>
</html>
</code>

Cuando queremos usar más de una variable, tenemos que utilizar la etiqueta ''<x-slot>'':

<code html>
<div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400" role="alert">
    <span class="font-medium">{{ $title }}</span> {{ $slot }}
</div>
</html>
</code>

Y en la vista:

<code html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://unpkg.com/@tailwindcss/browser@4"></script>  
    </head>
    <body>
        <!-- Breathing in, I calm body and mind. Breathing out, I smile. - Thich Nhat Hanh -->
         <div class="max-w-4xl mx-auto px-4">
            <x-alert>
                <x-slot name="title">
                Título de la alerta
                </x-slot>
                Contenido de la alerta
            </x-alert>
        </div>
    </body>
</html>
</code>

También podríamos añadir atributos:

<code html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://unpkg.com/@tailwindcss/browser@4"></script>  
    </head>
    <body>
        <!-- Breathing in, I calm body and mind. Breathing out, I smile. - Thich Nhat Hanh -->
         <div class="max-w-4xl mx-auto px-4">
            <x-alert type="info">
                <x-slot name="title">
                Título de la alerta
                </x-slot>
                Contenido de la alerta
            </x-alert>
        </div>
    </body>
</html>
</code>

En el componente (''alert.blade.php''):

<code html>
@props (['type'])

@php
    switch ($type) {
        case 'info':
            $class = "text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400";
            break;
        case 'danger':
            $class = "text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400";        
            break;
        case 'success':
            $class = "text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400";                
            break;                        
        case 'warning':
            $class = "text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-400";                        
            break;            
        case 'dark':
            $class = "text-gray-800 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-400";                                
            break;
        default:
            break;
    }
@endphp
<div class="p-4 mb-4 text-sm {{ $class }}" role="alert">
    <span class="font-medium">{{ $title }}</span> {{ $slot }}
</div>
</html>
</code>

==== Componentes de clase ====

Con los componentes de clase podremos separar la lógica de la vista. En el apartado anterior, en ''resources/views/components/alert.blade.php'' hemos colocado lógica para establecer un estilo CSS según ciertas variables.

<code>
php artisan make:component Alert2
</code>

Se creará ''app/View/Component/Alert2.php''. Esta clase está renderizando una vista que está en ''resources/views/components/alert2.blade.php''.

Ahora moveremos la lógica de ''resources/views/components/alert.blade.php'' a ''app/View/Component/Alert2.php'':

<code php>

</code>

Y en la vista (''resources/views/components/alert2.blade.php'') tendremos:

<code php>
<div {{ $attributes->merge(['class' => 'p-4 text-sm ]
    <span class="font-medium">{{ $title ?? 'Info Alert'
</code>

En la vista ''home.blade.php'', podríamos llamar al componente Alert2 de la siguiente manera:

<code php>
// ...
<x-alert2 type="danger" class="mb-4">
    <x-slot name="title">
        Título de la alerta
    </x-slot>
    
    Contenido de la alerta
</x-alert2>   
</code>
===== Crear plantillas para las vistas =====

Para cuando tengamos componentes que se repitan.

<WRAP center round info 60%>
Parece ser que lo habitual no es hacer esto para la creación de plantillas sino usar componentes.
</WRAP>

Creamos, por ejemplo, ''resources/views/layouts/master.blade.php'':

<code html5>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Laravel Shop</title>
  </head>

  <body>
    @yield('content')
  </body>
</html>
</code>

Con ''yield()'' marcamos una sección a la que podremos hacer luego referencia.

Las vistas que quieran utilizar esta plantilla tendrían que...

<code html5>
@extends("layouts.master")

@section("content")

    <h1>List of Products</h1>
    
    @if (empty($products))
        <div class="alert alert-warning">
            This list of products is empty
        </div>
    @else
        <div class="table-responsive">
            <table class="table table-striped">
                <thead class="thead-light">
                    <tr>
                        <th>ID</th>
                        <th>Title</th>
                        <th>Description</th>
                        <th>Price</th>
                        <th>Stock</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($products as $product)
                    <tr>
                        <td>{{ $product->id }}</td>
                        <td>{{ $product->title }}</td>
                        <td>{{ $product->description }}</td>
                        <td>{{ $product->price }}</td>
                        <td>{{ $product->stock }}</td>
                        <td>{{ $product->status }}</td>                        
                    </tr>      
                    @endforeach                  
                </tbody>
            </table>
        </div>
    @endif

@endsection
</code>

===== Crear componentes para las vistas =====

Con el propósito de centralizar información, podemos crear trozos de código / texto que luego recuperaremos desde las vistas de Blade.

Creamos un fichero en ''resources/views/components/product-card.blade.php''. Este fichero contendrá:

<code html5>
<h1>{{ $product->title }} ({{ $product->id }})</h1>
<p>{{ $product->description }}</p>
<p>{{ $product->price}}</p>
<p>{{ $product->stock}}</p>
<p>{{ $product->status}}</p>
</code>

Para utilizar este componente en una plantilla de blade:

<code html5>
<div class="row">
    @foreach ($products as $product)
        <div class="col-3">
            @include("components.product-card")
        </div>
    @endforeach
</div>
</code>
===== Enviando y mostrando información en vistas =====

Sabemos cómo crear una vista, cómo mostrar información en esa vista, pero ahora queremos añadir en la vista información que recuperamos de la base de datos a través de un controlador.

Partimos de un método de nuestro ''ProductController'':

<code php>
    // code
    public function show($product) 
    {
        $product = Product::findOrFail($product);
        
        return view("products.show");
        
    }
</code>

Para enviar información a la vista usamos ''with'' y definimos qué nos llevaremos a la vista.

<code php>
    // code
    public function show($product) 
    {
        $product = Product::findOrFail($product);
        
        return view("products.show")->with([
            "product" =>  $product,
        ]);
        
    }
</code>

A la vista estaremos enviando la variable ''product'' con el valor ''$product''.

Si vamos a la vista (''resources/views/products/show.blade.php'':

<code html5>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Product</title>
  </head>

  <body>
    <h1>{{ $product->title }} ({{ $product->id }})</h1>
    <p>{{ $product->description }}</p>
    <p>{{ $product->price }}</p>
    <p>{{ $product->stock }}</p>
    <p>{{ $product->status }}</p>            
  </body>
</html>
</code>

Usando [[https://laravel.com/docs/10.x/blade|Blade]], el motor de plantillas que incluye Laravel, interpretará las variables. Las encerramos entre llaves dobles (''%%{{%% %%}}%%'').