Diferencias

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

--- informatica:programacion:php:frameworks:laravel:uso_de_vistas [2025/02/12 15:44] – [Usando vistas en los controladores] tempwin
+++ informatica:programacion:php:frameworks:laravel:uso_de_vistas [2025/03/03 14:24] (actual) – [Crear plantillas para las vistas] tempwin
@@ Línea 100: / Línea 100: @@
     public function show($post) {
-        return view("posts.show");
+    // Para pasarle variables a un vista, la añadimos a un array
+    // como segundo argumento del "helper" 'view'
+        return view("posts.show", [
+            'post' => $post
+        ]);
     }
 }
@@ Línea 119: / Línea 123: @@
 </WRAP>
-===== Enviando y mostrando información en vistas =====
+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()]]'':
-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
+// ... código
-    public function show($product)
+    public function show($post) {
-    {
+        return view("posts.show", compact('post'));
-        $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.
+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>
-    // code
+['post' => $post];
-    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 (''%%{{%% %%}}%%'').
 ===== Blade: motor de plantillas =====
-[[https://laravel.com/docs/10.x/blade|Blade]] es el motor de plantillas que incluye Laravel
+[[https://laravel.com/docs/11.x/blade|Blade]] es el motor de plantillas que incluye Laravel
 ==== Variables ====
@@ Línea 279: / Línea 241: @@
 </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.
-Creamos, por ejemplo, ''reseources/views/layouts/master.blade.php'':
+<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>
@@ Línea 371: / Línea 519: @@
 </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 (''%%{{%% %%}}%%'').