3. Blade, el motor de plantillas de Laravel 11

 Características principales de Blade

  1. Sintaxis Limpia
    Blade usa directivas (@directiva) que se compilan a código PHP puro, pero son más fáciles de leer y escribir.
    Ejemplo:

    php
    @if($user->isAdmin())
    <p>Eres administrador</p>
@else
    <p>Eres usuario normal</p>
@endif

  2. Herencia de Layouts
    Permite definir plantillas base (layouts) que pueden ser extendidas por otras vistas, evitando repetir código (como headers/footers).

    • Ejemplo de layout (resources/views/layouts/app.blade.php):

      php-Herencia de Layouts-Laravel
      <html>
    <head><title>@yield('title')</title></head>
    <body>
        @section('sidebar') Contenido del sidebar @show
        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

    • Extender el layout:

      php
      @extends('layouts.app')
@section('title', 'Página de inicio')
@section('content')
    <h1>Contenido principal</h1>
@endsection

  3. Inclusión de Subvistas
    Usa @include para reutilizar componentes:

    php
    @include('shared.header')

  4. Mostrar Datos
    Escapa automáticamente variables para prevenir XSS:

    php
    <p>{{ $user->name }}</p>  <!-- Escapado -->
<p>{!! $rawHtml !!}</p>  <!-- Sin escapar (usar con cuidado) -->

  5. Bucles y Condicionales
    Similar a PHP pero más legible:

    php-Laravel
    @foreach($users as $user)
    <p>{{ $user->email }}</p>
@endforeach

@for($i = 0; $i < 10; $i++)
    {{ $i }}
@endfor

  6. Componentes y Slots
    Ideal para elementos reutilizables (ej. alertas, cards):

    php
    <!-- resources/views/components/alert.blade.php -->
<div class="alert alert-{{ $type }}">
    {{ $slot }}  <!-- Contenido dinámico -->
</div>

<!-- Uso -->
<x-alert type="success">
    ¡Operación exitosa!
</x-alert>

  7. Stacks y Push
    Para agregar CSS/JS específicos en layouts:

    php
    @push('scripts')
    <script src="/js/custom.js"></script>
@endpush

<!-- En el layout -->
@stack('scripts')

  8. Directivas Personalizadas
    Puedes crear tus propias directivas con Blade::directive():

    php
    // En AppServiceProvider::boot()
Blade::directive('datetime', function ($expression) {
    return "<?php echo ($expression)->format('d/m/Y H:i'); ?>";
});

<!-- Uso -->
@datetime($post->created_at)

Ventajas de Blade

  • Seguridad: Escapa variables automáticamente.

  • Rendimiento: Las vistas son compiladas a código PHP y cacheadas.

  • Legibilidad: Sintaxis más clara que PHP puro en HTML.

Ejemplo Completo

php-Laravel
<!-- resources/views/welcome.blade.php -->
@extends('layouts.app')

@section('title', 'Inicio')

@section('content')
    <h1>Bienvenido, {{ Auth::user()->name }}</h1>
    @include('partials.notification')
    <ul>
        @foreach($items as $item)
            <li>{{ $item->name }}</li>
        @endforeach
    </ul>
@endsection


1. @yield

  • ¿Qué hace?
    Define un "hueco" en una plantilla maestra (layout) que será rellenado por otras vistas.

  • Ejemplo:

    html-Laravel
    <!-- layout.blade.php (plantilla maestra) -->
<head>
    <title>@yield('title')</title> <!-- Aquí irá el título -->
</head>
    html
    <!-- vista_hija.blade.php -->
@extends('layout')
@section('title', 'Página de inicio') <!-- Rellena el hueco -->

2. @section + @endsection

  • ¿Qué hace?
    Define un bloque de contenido que puede ser inyectado en @yield o usado con @parent (para añadir contenido a una sección existente).

  • Ejemplo:

    html-Laravel
    <!-- layout.blade.php -->
<body>
    @yield('content') <!-- Aquí irá el contenido -->
</body>
    html-Laravel
    <!-- vista_hija.blade.php -->
@section('content')
    <p>Este es el contenido principal.</p>
@endsection

3. @stack + @push

  • ¿Qué hace?
    @stack define un lugar donde se apilarán múltiples bloques de contenido (como scripts o estilos), y @push añade contenido a esa pila.

  • Ejemplo:

    html
    <!-- layout.blade.php -->
<head>
    @stack('scripts') <!-- Aquí se acumularán los scripts -->
</head>
    html
    <!-- vista_hija.blade.php -->
@push('scripts')
    <script>alert('Hola!');</script>
@endpush

4. <x-slot> (en componentes)

  • ¿Qué hace?
    Permite pasar bloques de HTML a componentes de Blade. Es como un @section pero para componentes.

  • Ejemplo:

    html-Laravel
    <!-- Componente 'alert.blade.php' -->
<div class="alert">
    {{ $slot }} <!-- Aquí va el contenido por defecto -->
    <x-slot name="extra">Contenido extra</x-slot>
</div>
    html-Laravel
    <!-- Uso del componente -->
<x-alert>
    Este es el contenido principal.
    <x-slot name="extra">Más info...</x-slot>
</x-alert>

Resumen rápido:

  • @yield: "Hueco" en el layout.

  • @section: Bloque de contenido para rellenar el hueco.

  • @stack/@push: Para acumular cosas (como scripts).

  • <x-slot>: Bloques de HTML en componentes.

1. Del Controlador a la Vista

El controlador envía datos a la vista usando el método view() junto con un array asociativo.

Ejemplo:

Controlador (TaskController.php)

php-Laravel
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TaskController extends Controller
{
    public function index()
    {
        // Datos que queremos pasar a la vista (ej: lista de tareas)
        $tasks = [
            'Lavar los platos',
            'Hacer la compra',
            'Estudiar Laravel'
        ];

        // Pasamos las tareas a la vista 'tasks.index'
        return view('tasks.index', ['tasks' => $tasks]);
    }
}

Vista (resources/views/tasks/index.blade.php)

html-Laravel
<!DOCTYPE html>
<html>
<head>
    <title>Lista de Tareas</title>
</head>
<body>
    <h1>Mis Tareas</h1>
    <ul>
        @foreach($tasks as $task)
            <li>{{ $task }}</li>
        @endforeach
    </ul>
</body>
</html>

Resultado en el navegador:

text-Laravel
Mis Tareas
- Lavar los platos
- Hacer la compra
- Estudiar Laravel

2. De la Vista al Controlador (Formulario)

Para enviar datos desde la vista al controlador (ej: añadir una nueva tarea), usamos un formulario y recibimos los datos con $request.

Ejemplo:

Vista (resources/views/tasks/index.blade.php)

html-Laravel
<!-- Añadimos un formulario para nuevas tareas -->
<form action="{{ route('tasks.store') }}" method="POST">
    @csrf <!-- Token de seguridad -->
    <input type="text" name="task" placeholder="Nueva tarea">
    <button type="submit">Guardar</button>
</form>

Ruta (routes/web.php)

php-Laravel
use App\Http\Controllers\TaskController;

Route::get('/tasks', [TaskController::class, 'index'])->name('tasks.index');
Route::post('/tasks', [TaskController::class, 'store'])->name('tasks.store');

Controlador (TaskController.php)

php-Laravel
public function store(Request $request)
{
    // Obtenemos la tarea enviada desde el formulario
    $newTask = $request->input('task');

    // Aquí podríamos guardarla en una base de datos, etc.
    return redirect()->route('tasks.index')->with('success', 'Tarea añadida!');
}

Resumen

✅ Controlador → Vista:

  • El controlador pasa datos con return view('vista', ['clave' => $valor]).

  • La vista los recibe como variables (ej: $tasks).

✅ Vista → Controlador:

  • La vista envía datos mediante un formulario (POST/GET).

  • El controlador los recibe con $request->input('nombre_campo').

¡Así de fácil! 😊 Con esto ya puedes enviar y recibir datos básicos en Laravel.

Componentes en Blade con Slots (Laravel)

Los componentes en Blade permiten crear elementos reutilizables. Los slots son espacios dentro del componente que pueden ser llenados con contenido personalizado cuando se usa el componente. Vamos a adaptar nuestro ejemplo de tareas.

1. Crear un componente simple (card)

Componente (resources/views/components/card.blade.php)

html-Laravel
<div style="border: 1px solid #ccc; padding: 10px; margin: 10px;">
    <h2>{{ $title }}</h2>
    
    <div class="content">
        {{ $slot }}
    </div>
    
    @isset($footer)
        <div class="footer">
            {{ $footer }}
        </div>
    @endisset
</div>

2. Modificar la vista para usar componentes

Vista actualizada (resources/views/tareas/index.blade.php)

html-Laravel
@extends('layouts.app')

@section('title', 'Lista de Tareas')

@section('content')
    <x-card title="Gestión de Tareas">
        <form method="POST" action="{{ route('tareas.store') }}">
            @csrf
            <input type="text" name="nombre" placeholder="Nueva tarea" required>
            <button type="submit">Agregar</button>
        </form>

        <ul>
            @foreach($tareas as $tarea)
                <li>{{ $tarea->nombre }}</li>
            @endforeach
        </ul>

        <x-slot name="footer">
            Total: {{ count($tareas) }} tareas
        </x-slot>
    </x-card>
@endsection

Explicación de los elementos

  1. Componente principal (<x-card>)

    • Se llama con title como atributo

    • El contenido entre las etiquetas va al $slot principal

  2. Slot principal ($slot)

    • Recibe todo el contenido interno automáticamente

    • En nuestro caso: el formulario y la lista

  3. Slot con nombre (footer)

    • Definido con <x-slot name="footer">

    • Opcional (se verifica con @isset en el componente)

Tipos de slots

TipoDescripciónEjemplo
Slot principalContenido por defecto{{ $slot }}
Slot con nombreContenido específico{{ $footer }}
Slot con atributosDatos adicionales{{ $user->name }}

Beneficios de usar componentes

  1. Reutilización: Puedes usar el componente card en cualquier vista

  2. Consistencia: Mantiene el mismo estilo en toda la aplicación

  3. Organización: Separa la lógica de presentación

  4. Flexibilidad: Permite contenido dinámico con slots

Los componentes pueden ser aún más potentes cuando se combinan con:

  • Props (atributos)

  • Clases condicionales

  • Slots con datos

  • Componentes anónimos

El resto de la aplicación (rutas, controlador, modelo) sigue exactamente igual que en los ejemplos anteriores.

Comentarios

Publicar un comentario

Entradas más populares de este blog

8-Creación de una API RESTful con Laravel

  Creación de una API RESTful con Laravel En este tutorial, te guiaré paso a paso para crear una API RESTful básica con Laravel, incluyendo autenticación, rutas, controladores y migraciones. Requisitos previos PHP ≥ 8.1 Composer instalado Laravel instalado globalmente Conocimientos básicos de PHP y Laravel Base de datos configurada (MySQL, PostgreSQL, SQLite, etc.) Paso 1: Crear un nuevo proyecto Laravel bash laravel nuevo mi-api-laravel # O usando composer composer create-project laravel/laravel mi-api-laravel Accede al directorio del proyecto: bash cd mi-api-laravel Paso 2: Configurar la base de datos Abre el archivo  .env  y configura las credenciales de tu base de datos: env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=mi_api_laravel DB_USERNAME=root DB_PASSWORD= Paso 3: Crear un modelo con migración, controlador y factory Vamos a crear un modelo  Producto  como ejemplo: bash php artisan make:model Producto -mcr Esto creará: Un modelo ( ...
Leer más

02 -Rutas en Laravel

  Rutas en Laravel: Explicación y Ejemplos Las rutas en Laravel son el mecanismo que permite definir cómo responde tu aplicación a las solicitudes HTTP entrantes. Todas las rutas de Laravel se definen en los archivos dentro del directorio  routes/ . Tipos básicos de rutas 1. Rutas básicas php Copy Download Route :: get ( '/saludo' , function ( ) { return '¡Hola Mundo!' ; } ) ; Cuando se visita  /saludo  en el navegador, se mostrará "¡Hola Mundo!". 2. Rutas con parámetros php Copy Download Route :: get ( '/usuario/{id}' , function ( $id ) { return 'Usuario ' . $id ; } ) ; Esta ruta capturará el ID de la URL y lo pasará a la función. 3. Rutas con parámetros opcionales php Copy Download Route :: get ( '/post/{titulo?}' , function ( $titulo = 'Título por defecto' ) { return $titulo ; } ) ; El parámetro  titulo  es opcional y tiene un valor por defecto. 4. Rutas con restricciones php Copy Download Rout...
Leer más

3-Rutas

  Rutas en Laravel: Explicación y Ejemplos Las rutas en Laravel son el mecanismo que permite definir cómo responde tu aplicación a las solicitudes HTTP entrantes. Todas las rutas de Laravel se definen en los archivos dentro del directorio  routes/ . 2. Rutas con parámetros php Copy Download Route :: get ( '/usuario/{id}' , function ( $id ) { return 'Usuario ' . $id ; } ) ; Esta ruta capturará el ID de la URL y lo pasará a la función. 3. Rutas con parámetros opcionales php Copy Download Route :: get ( '/post/{titulo?}' , function ( $titulo = 'Título por defecto' ) { return $titulo ; } ) ; El parámetro  titulo  es opcional y tiene un valor por defecto. 5. Rutas con nombre php Copy Download Route :: get ( '/perfil' , function ( ) { // ... } ) -> name ( 'perfil' ) ; Puedes generar URLs a esta ruta usando  route('perfil') . Rutas hacia controladores php Copy Download Route :: get ( '/productos'...
Leer más