2 - Dominando BLADE

Introducción

Recuerda: Cuando comentemos algún archivo, siempre es bueno indicar la ruta

Apartados/tiempos:

0:00:00 - Introducción 0:01:19 - Layouts 0:23:27 - Parciales 0:31:15 - Rutas Nombradas 0:39:57 - Componentes Blade 0:54:44 - Recursos Estáticos

1735195355207

Introducción

Crearemos vistas haciendo uso de buenas prácticas de programación

laravel new blade
Opciones:
none (starter kit Jetstream...)
PhpUnit
sqlite

Layouts

En primer lugar, al igual que en el vídeo anterior, podemos copiar y pegar las dos vistas index y about y modificar el archivo routes/web.php

Así, se va a cargar el nuevo index y el fichero web.php queda así

<?php

use Illuminate\Support\Facades\Route;

Route::view( '/', 'index')->name('index');
Route::view( '/about', 'about')->name('about');
Route::view( '/services', 'services')->name('services');
Route::view( '/contact', 'contact')->name('contact');

?>

1735195938438 1735195947898

Esto que hemos hecho hasta ahora, copiando y pegando HTML en cada una de las vistas, pero esta no es la idea de trabajo de Laravel, usaremos las plantillas BLADE para facilitar este trabajo

Compartiendo Código

Como todas las vistas comparten una gran cantidad de codigo, tan sólo cambia una línea. Esto no es suficiente, hay un gran maquetado que se repite.

Si en algun momento hay que modificar los head, habrá que cambiarlos en todos..

Es aquí donde entran las plantillas.

Recordar que no son archivos HTML sino archivos BLADE, en el concepto layout,

Creamos una carpeta layouts dentro de vistas donde vamos a ubicar las partes comunes.

1735221899750

donde creamos nuestra plantilla que se suele llamar base.blade.php , app.blade.php y nosotros vamos a llamarla landing.blade.php donde irá el código común, y donde insertaremos unos huecos /slots para que luego las vistas los complenten.

@Yield

Esto indica que la vista debe completarla, con un nombre para cada sección, dejamos el código de landing así:

En este ejemplo, creamos las secciones con YIELD para que las vistas las completen:

title , para el título
content, para el body

views/layouts/landing.blade.php

<!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>
</head>
<body>
    @yield('content')
</body>
</html>

Cada vez que a Blade le digamos que debe procesar algo, usaremos la @. Como en la anterior @yield.

Esta estructura crecerá.. pero ya no deberé modificar el código en cada vista.

1735222512077

views/index.blade.php

@extends('layouts.landing')

@section('title', 'Home')

@section('body', 'This is the index page')

Vemos como la vista lo único que hace es cargar la plantilla y completar los dos "huecos" con extends/section

secciones

No es obligatorio completar todas lassecciones (yield) aunque si recomendable.

@section ... html ... @endsection

Hay otra posibilidad para completar una sección que es la siguiente:

@extends('layouts.landing')

@section('title', 'Home')

@section('body')
    <h1>Home</h1>
    <p>This is the index page</p>
@endsection

Así podemos observar cómo las vistas ganan simpleza y el código es mucho más reusable.

Hacemos lo mismo para el resto de las cuatro vistas about.., contact, services...

1735223189552

Este ejemplo parece muy simple pero es importante ver sus ventajas, si tenemos muchas vistas y le añado a la plantilla un menú, una imagen, un título, footer... se aplica directamente a todas.

Parciales

Si queremos que el menú esté disponible en muchas partes, no lo vamos a construir en las vistas

Por tanto lo incluimos en el landing, un header / nav con lista de 4 enlaces:

   <header>
        <nav>
            <ul>
                <li><a href="{{ route('index') }}">Index</a></li>
                <li><a href="{{ route('home') }}">Home</a></li>
                <li><a href="{{ route('about') }}">About</a></li>
                <li><a href="{{ route('contact') }}">Contact</a></li>
            </ul>
        </nav>

    </header>

Pero igual, si tenemos muchas vistas hay que repetirlo,

para eso, creamos carpeta _partials dentro de layouts y creamos el archivo menu.blade.php sólo con el header del menú, que incluiremos después en nuestra plantilla landing.php

menu.blade.php

<header>
    <nav>
        <ul>
            <li><a href="{{ route('index') }}">Index</a></li>
            <li><a href="{{ route('home') }}">Home</a></li>
            <li><a href="{{ route('about') }}">About</a></li>
            <li><a href="{{ route('contact') }}">Contact</a></li>
        </ul>
    </nav>

</header>

y cómo lo incluimos en landing.blade?, Con la directiva:

@include

@include('layouts._partials.menu')

Y de esta manera lo incrustará en nuestra plantilla

Rutas Nombradas

Anteriormente, hemos visto que NO Hay que escribir rutas absolutas, mejor usar nombres del enrutador

    <ul>

        <li><a href="/">index</a></li>
        <li><a href="/services">services</a></li>
        <li><a href="/about">about</a></li>
        <li><a href="/contact">contact</a></li>
    </ul>

Componentes Blade

La inclusión del menu.blade no contiene ninguna parte que pueda ser modificada o partes distintas al archivo que lo está llamado, como hicimos con @yield y @section...

Ahora queremos hacer lo mismo pero en vez de como elementos padre, como componentes hijo. Para ello se usan los componentes.

Vemos un ejemplo con la vista Services y un sistema de tarjetas:

services.blade.php

@extends('layouts.landing')

@section('title', 'Services')

@section('body')
    <h1>Services</h1>
    <div>
        <h3>Service 1</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipiscing </p>
    </div>
    <div>
        <h3>Service 2</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipiscing </p>
    </div>
    <div>
        <h3>Service 3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipiscing </p>
    </div>
    <div>
        <h3>Service 4</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipiscing </p>
    </div>
    <div>
        <h3>Service 5</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipiscing </p>
    </div>
    <div>
        <h3>Service 6</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipiscing </p>
    </div>
@endsection

Ya vemos como repetimos mucho código

Carpeta _components

Así, creamos carpeta llamada _components dentro de view

card.blade.php

Dentro de la carpeta components, creamos nuestra tarjeta para modificarla posteriormente:

<div style="border: 1px solid #cd7979; margin: 10px; padding: 10px;">
    <h3>{{$title}}</h3>
    <p>{{$content}}</ </p>
</div>

elemento blade @component

Ahora, las vistas las cumplimentamos con @component

@slot

para lo que necesitaremos rellenar sus slot, recordamos, estamos en el fichero services.blade.php

@component('_components.card')
        @slot('title', 'Service 1')
        @slot('content', 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod')
    @endcomponent

Recursos Estáticos

También podemos cargar recursos que estarán ubicados en la carpeta public

Public

Todo comienza por el index.php de la carpeta public

Vamos a crear un directorio assets, y dentro un directorio llamado img

Y lo incluimos en nuestro card haciendo uso de nuestro método estático asset

<div style="border: 1px solid #cd7979; margin: 10px; padding: 10px;">
    <h3>{{$title}}</h3>
    <img src="{{ asset('assets/img/image.png') }}" alt="mi foto" width="80 px">
    <p>{{$content}}</ </p>

</div>

1736788077318

Esto no solo va a valer para imágenes, sino que también se puede añadir CSS, Javascript...

Ejemplo con CSS

Creamos en public la carpeta css y creamos el archivo style.css con un código de estilos como puede ser:

1736788322950

/* Basic HTML Styles */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 10px 0;
    color: #444;
}

p {
    margin: 0 0 10px;
    line-height: 1.6;
}

a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin: 5px 0;
}

.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

En el sitio que queramos añadirlo, por ejemplo en nuestra plantilla landing.blade.php, lo insertamos de la misma forma

landing.blade.php (con estilos incluidos)

<!DOCTYPE html>
<!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">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    <title> @yield('title')</title>
</head>
<body>

    @include('layouts._partials.menu')

    @yield('body')
</body>
</html>

Más adelante, a través de Vite podremos ubicarlo en otro sitio que no sea público

Conclusiones

Referencias:

Curso Profesional Laravel. Video 2 Blade

Recuerda: Cuando comentemos algún archivo, siempre es bueno indicar la ruta
Laravel 11.* Documentation
Documentación Laravel en español
Bootcamp Laravel
Next Steps
API Documentation