Laravel: vistas y plantillas (parte 5)

Carpetas de esta lección

resources/views
Http/Controllers
resources/views/layout

Primera parte: uso de vistas

Para mostrar código HTML, debemos crear unos documentos llamados vistas. Hasta ahora estamos devolviendo sólo frases.

Vamos a resources/views y creamos un archivo llamado home.php. También crearemos una carpeta dentro llamada «cursos» donde estarán las vistas de cada una de las URL de los cursos, que son 3. Por convención, al archivo de cada vista lo nombraremos igual que a cada método invocado en las rutas.

Atajo de teclado: dentro de cada uno de estos archivos php escribimos en Visual Studio Code un signo de exclamación y pulsamos enter, para que se autocomplete con todo el código HTML básico para un archivo con Doctype HTML y los tags mínimos imprescindibles para un archivo de este tipo (html, head title y body).

Vamos al archivo HomeController, y tomamos la frase que devolvemos dentro del método para pegarla dentro de un tag h1 dentro del body de home.php. Luego, escribimos el método view dentro del invoke de HomeController. No es necesario especificar que el archivo que estamos lamando es un archivo php. Queda la clase así:

class HomeController extends Controller
{
    public function __invoke(){
        return view("home");
    }
}

Y el archivo home.php así:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Bienvenido a la página principal</h1>
</body>
</html>

Hacemos esto mismo para CursoController, modificando también cada una de las vistas (añadiendo las frases dentro de h1 como en el caso de home.php), y dejamos su código así:

class CursoController extends Controller
{
    public function index(){
        return view("curso.index");
    }

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

    public function show($curso){
        return view("curso.show");
    }
}

Lo primero, notamos que ahora estamos especificando la ruta de cada vista, mediante un punto: curso.index, curso.create y curso.show.

Las dos primeras vistas están perfectas, pero debemos hacer algo con la variable $curso del método show(). No basta con escribir la variable dentro de la vista show como sigue:

(...)
<body>
    <h1>Url con la variable <?php echo $curso?></h1>
</body>
(...)

Porque Laravel nos arrojaría un error diciendo que la variable no está definida dentro del método. Definimos la variable dentro de un array (entre corchetes:

 public function show($curso){
        return view("cursos.show", ['curso' => $curso]);
    }

Si le pusiéramos otro nombre a la variable, como por ejemplo «alfa», la rescataríamos dentro de la vista con ese nombre:

 public function show($curso){
        return view("cursos.show", ['alfa' => $curso]);
    }

Cuando tenemos intención de pasarle una variable a la vista que coincide con el nombre que estoy recibiendo podemos usar compact() así:

    public function show($curso){
        // return view("cursos.show", ['curso' => $curso]);
        return view("cursos.show", compact("curso"));
    }

Plantillas

Vamos a reciclar todo el código HTML que se repite dentro de cada vista usando plantillas con el motor blade. Primero, vamos a una de las vistas y añadimos algunos comentarios que se reemplazarían por código HTML que también se usaría en otras vistas:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <!-- favicon -->
    <!-- estilos -->
</head>
<body>
    <!-- header -->
    <!-- nav -->
    <h1>Bienvenido a la página principal</h1>
    <!-- footer -->
    <!-- script -->
</body>
</html>

Atajo de teclado de Visual Studio Code: si escribimos una línea, la seleccionamos y pulsamo [CTRL] + K, después pulsamos [CTRL] + C para comentar y [CTRL] + U para descomentar.

Creamos la carpeta layout dentro de views, y dentro el archivo plantilla.blade.php. La extensión blade.php es necesaria. Para el contenido que queremos que varíe dentro de cada platilla, usaremos @yield(«nombre identificativo del contenido»). La plantilla queda así:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
    <!-- favicon -->
    <!-- estilos -->
</head>
<body>
    <!-- header -->
    <!-- nav -->
    @yield('content')
    <!-- footer -->
    <!-- script -->
</body>
</html>

Vamos con la vista home.php. En primer lugar, renombramos el archivo como home.blade.php. Luego añadimos un @extends al comienzo de la vista para hacer referencia a la plantilla. Además, usaremos @section para especificar el contenido que cambia dentro de cada vista. Usaremos @section de dos formas, una con una sola línea de código y otra que permite varias líneas de código. La vista home.blade.php queda de la siguiente manera:

@extends('layouts.plantilla')

@section('title', 'Home')

@section('content')
    <h1>Bienvenido a la página principal</h1>
@endsection

Inspeccionando el HTML de esta página vemos que el title es «Home» yq ue el contenido está dentro del body, a su vez dentro de un h1, como especificamos en el @section.

Antes de continuar con todas las vistas, podemos instalar la extensión Laravel Blade Snippets para colorear el có´digo de blade y además autocompletarlo.

Hacemos lo propio con cada una de las vistas, pasando el título y el contenido de cada una con @section, luego de extender la plantilla. También renombramos cada archivo con la extensión blade.php. Ojo con la vista que contiene una variable, show.blade.php, cuya sección content quedaría mejor así, con la doble llave para pasar la variable (nótese también la doble llave para comentar código):

@extends('layouts.plantilla')
@extends('layouts.plantilla')

@section('title', 'Página con variable')

@section('content')
    {{-- <h1>Url con la variable <?php echo $curso?></h1> --}}
    <h1>Url con la variable {{$curso}}</h1>
@endsection

Recursos

Enlace de Youtube: https://www.youtube.com/watch?v=KZGHCSIb9Q0&list=PLZ2ovOgdI-kWWS9aq8mfUDkJRfYib-SvF&index=6