¡Esta es una revisión vieja del documento!

Tabla de Contenidos

Trabajando con vistas en Laravel

Trabajando con vistas en 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:

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

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í:

<?php
 
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;
use App\Http\Controllers\PostController;
 
Route::get('/', [HomeController::class, 'index']);

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:

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

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

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

Para pasarle argumentos a una vista desde un controlador, también podemos usar la función 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

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):

<!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>

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

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

Crear plantillas para las vistas

Para cuando tengamos componentes que se repitan.

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Laravel Shop</title>
  </head>
 
  <body>
    @yield('content')
  </body>
</html>

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")
 
    <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

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á:

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

Para utilizar este componente en una plantilla de blade:

<div class="row">
    @foreach ($products as $product)
        <div class="col-3">
            @include("components.product-card")
        </div>
    @endforeach
</div>

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:

<!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>

Usando Blade, el motor de plantillas que incluye Laravel, interpretará las variables. Las encerramos entre llaves dobles ({{ }}).