====== 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**: php artisan make:view home Una vista puede ser un fichero tan simple como:

Hola, {{ $nombre }}

===== Usando vistas en los controladores ===== 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 } } El fichero ''routes/web.php'' lo tenemos así: 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: 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}"; } } 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: php artisan make:view posts.index php artisan make:view posts.create php artisan make:view posts.show Ahora haría modificaciones en el controlador para llamar a las vistas creadas: 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 ]); } } La vista ''show.blade.php'' es un poco especial porque muestra información variable:

Aquí se mostrará el post {{ $post }}

Si no usásemos las etiquetas de Blade, mostraríamos el contenido de esa variable como hacemos en PHP:

Aquí se mostrará el post

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()]]'': // ... código public function show($post) { return view("posts.show", compact('post')); 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: ['post' => $post]; ===== 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: {{ $variable }} Comentar para que no las procese ni las muestre: {{-- $variable --}} Si queremos que aparezca el texto tal cual (llaves incluidas), es decir, que Blade no evalúe nada: @{{ $variable }} 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: public function index() { $products = Product::all(); return view("products.index")->with([ "products" => $products, ]); } En la vista (''resources/views/products.blade.php''): Product

List of Products

@if (empty($products))
This list of products is empty
@else
@foreach ($products as $product) @endforeach
ID Title Description Price Stock Status
{{ $product->id }} {{ $product->title }} {{ $product->description }} {{ $product->price }} {{ $product->stock }} {{ $product->status }}
@endif
Para el caso de comprobar vacíos, existe otra estructura dedicada::

List of Products

@empty ($products)
This list of products is empty
@else ... @endempty
==== 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'': A partir de este momento, cada vez que queramos llamar a ese componente, utilizaríamos la etiqueta '''':
Para tener un contenido variable en un componente, tenemos que crear una variable en el lugar que va a cambiar: Y le pasaríamos el contenido en la etiqueta de la vista donde la usamos:
Contenido de la alerta
Cuando queremos usar más de una variable, tenemos que utilizar la etiqueta '''': Y en la vista:
Título de la alerta Contenido de la alerta
También podríamos añadir atributos:
Título de la alerta Contenido de la alerta
En el componente (''alert.blade.php''): @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 ==== 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. php artisan make:component Alert2 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'': Y en la vista (''resources/views/components/alert2.blade.php'') tendremos:
merge(['class' => 'p-4 text-sm ] {{ $title ?? 'Info Alert' En la vista ''home.blade.php'', podríamos llamar al componente Alert2 de la siguiente manera: // ... Título de la alerta Contenido de la alerta ===== Crear plantillas para las vistas ===== Para cuando tengamos componentes que se repitan. Parece ser que lo habitual no es hacer esto para la creación de plantillas sino usar componentes. Creamos, por ejemplo, ''resources/views/layouts/master.blade.php'': Laravel Shop @yield('content') Con ''yield()'' marcamos una sección a la que podremos hacer luego referencia. Las vistas que quieran utilizar esta plantilla tendrían que... @extends("layouts.master") @section("content")

List of Products

@if (empty($products))
This list of products is empty
@else
@foreach ($products as $product) @endforeach
ID Title Description Price Stock Status
{{ $product->id }} {{ $product->title }} {{ $product->description }} {{ $product->price }} {{ $product->stock }} {{ $product->status }}
@endif @endsection
===== 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á:

{{ $product->title }} ({{ $product->id }})

{{ $product->description }}

{{ $product->price}}

{{ $product->stock}}

{{ $product->status}}

Para utilizar este componente en una plantilla de blade:
@foreach ($products as $product)
@include("components.product-card")
@endforeach
===== 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 public function show($product) { $product = Product::findOrFail($product); return view("products.show"); } Para enviar información a la vista usamos ''with'' y definimos qué nos llevaremos a la vista. // code public function show($product) { $product = Product::findOrFail($product); return view("products.show")->with([ "product" => $product, ]); } A la vista estaremos enviando la variable ''product'' con el valor ''$product''. Si vamos a la vista (''resources/views/products/show.blade.php'': Product

{{ $product->title }} ({{ $product->id }})

{{ $product->description }}

{{ $product->price }}

{{ $product->stock }}

{{ $product->status }}

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