La wiki de TempWin

Herramientas de usuario

Herramientas del sitio

Traza: • adventurelog • gotop • etherpad • uso_de_vistas • ncspot • castero • 2fauth • webtop • alacritty • neko
informatica:programacion:php:frameworks:laravel:uso_de_vistas

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Ambos lados, revisión anteriorRevisión previa
Próxima revisión		Revisión previa
informatica:programacion:php:frameworks:laravel:uso_de_vistas [2025/02/12 16:00] – tempwininformatica:programacion:php:frameworks:laravel:uso_de_vistas [2025/03/03 14:24] (actual) – [Crear plantillas para las vistas] tempwin
Línea 135: Línea 135:
 <code php> <code php>
 ['post' => $post]; ['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> </code>
 ===== Enviando y mostrando información en vistas ===== ===== Enviando y mostrando información en vistas =====
informatica/programacion/php/frameworks/laravel/uso_de_vistas.1739372411.txt.gz · Última modificación: por tempwin