Plantillas Blade en Laravel

Plantillas Blade en Laravel

Hola, ¿Cómo están?. Continuando con el curso intermedio de Laravel. Hoy veremos las plantillas BLADE en Laravel. Ya en la anterior clase vimos lo que son las plantillas Blade, en esta clase iremos descubriendo un poco más de las capacidades y funcionalidades que ofrece esta herramienta.

¡Empecemos!

¿Qué son las plantillas Blade?

Las plantillas Blade en Laravel son un sistema de plantillas liviano y poderoso que permite crear vistas y formularios de manera más sencilla y expresiva en comparación con el código PHP puro. Blade incorpora datos dinámicos, control de estructuras y la creación de componentes reutilizables en plantillas HTML.

Las vistas blade son llamadas desde las rutas o controladores, y se puede pasar variable como parámetros para posteriormente imprimirlo en las vistas.

return view('saludos', ['framework' => 'Laravel']);

En el ejemplo, el primer parámetro “saludos” es la ruta de las vista que se encuentra en el directorio “/resources/views/saludos”, y el segundo parámetro es un array donde podemos pasar varios parametros a la vista, que generalmente son resultados de consultas a la base de datos.

Desplegar tu proyecto Laravel a producción

Adquiere la guía en formato PDF

Directivas Blade

Blade proporciona una serie de instrucciones o formatos tanto para imprimir variables en formularios HTML o directivas PHP como “if”, “foreach”, “while” entre otros.

Impresión de variables

Blade utiliza la doble llave “{{ }}” para imprimir variables en las vistas.

{{ $framework }}

Con Blade podemos escribir comentarios a nuestras vistas utilizando lo siguiente:

{{-- comentario --}}

Estructuras de control

Blade simplifica la implementación de estructuras de control en las vistas, proporcionando directivas que facilitan la inclusión de bucles y condicionales. Por ejemplo para utilizar la estructura “if”.

@if($framework == "Laravel")
   <h2>Curso de Laravel 10</h2>
@endif

También podemos utilizar la estructura “foreach” para recorrer un objeto de la siguiente manera:

@foreach ($alumnos as $alumno)
    <p>{{ $alumno->nombre_apellido }}</p>
    <p>{{ $alumno->edad }}</p>
@endforeach

Otra estructura de control que se utiliza bastante es “for”

@for($i = 0; $i < 5; $i++)
    <p>{{ $i }}</p>
@endfor

Otras estructuras que nos ayudan bastante en las vistas, por ejemplo son “isset” y “empty” que determinan si una variable es definida y no es nula.

@isset($framework)
    <p>curso de {{ $framework }}</p>
@endisset

Si la variable es nula.

@empty($framework)
    <p>No existe un curso disponible</p>
@endempty

Declarar variables

Con Blade podemos declarar variables en la vista para una operación de comparación o asignación según sea el caso. Por ejemplo, Sumar el total de precio.

@php
    $total = 0;
@endphp
@foreach ($productos as $producto)
    @php
        $total = $total + $producto->precio;
    @endphp
@endforeach
<p>Total: {{ $total}} </p>

Herencia de plantillas Blade

La herencia de plantillas Blade te permite crear una estructura padre de tu aplicación y luego extender o heredar esa plantilla en otras vistas específicas. En lugar de repetir el código HTML y la estructura de diseño en cada vista.

En nuestra aplicación “cursos-online” vamos a crear la plantilla padre que generalmente se llama “layout.blade.php” en el directorio “/resources/views”, Utilizaremos la directiva “@yield”  se utiliza en la plantilla padre para indicar el lugar donde el contenido de la sección “content” de las vistas hijas será insertado.

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

En este mismo archivo también copiamos el código CSS de la aplicación.

<style>
    body {
        margin: auto;
        padding: 50px;
    }
    table {
        border-collapse:collapse;
        width: 100%;
    }
    table, td, th {
        border: 1px solid black;
    }
</style>
 

Ahora en nuestras vista “Profesores” simplificamos el código y realizaremos la vista de nuestra plantilla padre creada, se utiliza la directiva “@extends” para heredar de la vista padre. Además, se utiliza la directiva “@section” para definir el título específico de esta página y el contenido que reemplazará la sección “@yield” en la vista padre. 

Modificamos la vista Profesores.

@extends('layout')
@section('content')
        <h2>Listado de Profesores</h2>
        <table>
            <tr>
                <th>Nombre y Apellido</th>
                <th>Profesión</th>
                <th>Grado Academico</th>
                <th>Teléfono</th>
            </tr>
            @foreach ($profesores as $profesor)
            <tr>
                <td>{{ $profesor->nombre_apellido }}</td>
                <td>{{ $profesor->profesion }}</td>
                <td>{{ $profesor->grado_academico }}</td>
                <td>{{ $profesor->telefono }}</td>
            </tr>
            @endforeach
        </table>
@endsection

Componentes Blade

Los componentes Blade también sirven para estructurar y separar fragmentos de código HTML y lógica relacionada en una unidad reutilizable en múltiples vistas.

De igual manera en nuestra aplicación vamos a utilizar los componentes Blade en nuestras vistas “Alumnos” y “Cursos”. Primeramente creamos una carpeta “components” en el directorio “/resources/views”, dentro de esta carpeta creamos una vista padre “layout.blade.php” y añadimos el siguiente código.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Curso de Laravel</title>
    </head>
    <body>
        {{ $slot}}
    </body>
</html>

En la vista “Alumnos” para utilizar la vista padre en la posición del “slot”. Creamos el componente “x-layout”, donde “x” es la variable que identifica a un componente blade, “layout” en la ruta del archivo (los componentes de Blade siempre buscan en en el directorio “views/components”).

<x-layout>
        <h2>Listado de Alumnos</h2>
        <table>
            <tr>
                <th>Nombre y Apellido</th>
                <th>Edad</th>
                <th>Teléfono</th>
                <th>Dirección</th>
            </tr>
            @foreach ($alumnos as $alumno)
            <tr>
                <td>{{ $alumno->nombre_apellido }}</td>
                <td>{{ $alumno->edad }}</td>
                <td>{{ $profesor->telefono }}</td>
                <td>{{ $profesor->direccion }}</td>
            </tr>
            @endforeach
        </table>
</x-layout>

Realizamos las mismas operaciones con la vista  “Cursos”.

<x-layout>
        <h2>Listado de Cursos</h2>
        <table>
            <tr>
                <th>Materia</th>
                <th>Nivel</th>
                <th>Horas Academicas</th>
                <th>Profesor</th>
                <th>Alumnos</th>
            </tr>
            @foreach ($cursos as $curso)
            <tr>
                <td>{{ $curso->materia }}</td>
                <td>{{ $curso->nivel }}</td>
                <td>{{ $curso->horas_academicas }}</td>
                <td>{{ $curso->profesor->nombre_apellido }}</td>
                <td>
                @foreach($curso->alumnos as $alumno)
                    {{ $alumno->nombre_apellido }} <br>
                @endforeach
                </td>
            </tr>
            @endforeach
        </table>
</x-layout>

Finalmente, incorporaremos un menú de navegación que estará ubicado en la vista principal “layout.blade.php”, de modo que pueda ser empleado por todas las vistas. Es importante señalar que existe la posibilidad de optimizar aún más el código de las vistas; por ejemplo, podemos encapsular el menú de navegación en un componente, mejorando así la modularidad y reutilización del código.

<ul>
    <li><a href="{{ route('profesores.index') }}">Profesores</a></li>
    <li><a href="{{ route('alumnos.index') }}">Alumnos</a></li>
    <li><a href="{{ route('cursos.index') }}">Cursos</a></li>
</ul>

Al finalizar las vistas de nuestra aplicación quedarían de esta manera.

Vistas Blade Laravel

Blade proporciona una sintaxis sencilla y expresiva para escribir vistas en HTML, facilitando la creación de interfaces de usuario dinámicas y mantenibles.  La próxima clase continuaremos con el CRUD de nuestra aplicación esta vez para registrar información en nuestra base de datos.

Recuerda que puedes descargar el código fuente de esta clase y todas las demás  clases en el repositorio de GitHub totalmente gratis.

¡Te espero en la siguiente clase!

Saludos y éxitos.

Victor Peña

Victor Peña

Desarrollador de software Backend Developer, experto en Laravel Framework, PHP, JavaScript y MySQL. Creador de contenidos de emprendimiento y desarrollo de software.

1 comentario en “Plantillas Blade en Laravel”

  1. Pingback: CRUD en Laravel crear registros - Norvic Software

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *