3-1-Blade en Laravel

Conceptos clave

  • @extends : La vista hija dice "yo voy a usar un layout padre"

  • @section : Define un bloque de contenido (como un hueco o sección)

  • @yield : En el layout padre, muestra el contenido que la vista hija ponga en esa sección

  • @show : Muestra la sección (similar a @yield pero usada en el layout)

Con @show (tu código original):

blade
@section('sidebar')
    Este es mi master sidebar.
@show

Resultado si la hija NO define 'sidebar': Muestra "Este es mi master sidebar."

Sin @show (usando @yield):

blade
@yield('sidebar')

Tu ejemplo (layout padre)

blade
<!-- resources/views/layouts/master.blade.php -->
<html>
    <head>
        <title>@yield('title', 'Título por defecto')</title>
    </head>
    <body>
        @section('sidebar')
            Este es mi master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

Ejemplo aún más pequeño (3 líneas)

Layout padre (layout.blade.php):

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

Vista hija (home.blade.php):

blade
@extends('layout')

@section('contenido')
    <h1>Hola Mundo!</h1>
@endsection

Resultado final:

html
<html>
    <body>
        <h1>Hola Mundo!</h1>
    </body>
</html>

Ejemplo práctico con tu código

Layout padre - layouts/app.blade.php:

blade
<html>
    <head>
        <title>Mi App - @yield('title')</title>
    </head>
    <body>
        <nav>Menú principal</nav>
        
        @section('sidebar')
            <aside>Sidebar por defecto</aside>
        @show

        <main>
            @yield('content')
        </main>
        
        <footer>© 2026</footer>
    </body>
</html>

Vista hija - productos/index.blade.php:

blade
@extends('layouts.app')

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

@section('sidebar')
    <aside>
        <h3>Filtros</h3>
        <ul>
            <li>Electrónica</li>
            <li>Ropa</li>
        </ul>
    </aside>
@endsection

@section('content')
    <h1>Productos</h1>
    <ul>
        <li>Laptop - $1000</li>
        <li>Mouse - $20</li>
    </ul>
@endsection

Resultado final renderizado:

html
<html>
    <head>
        <title>Mi App - Lista de productos</title>
    </head>
    <body>
        <nav>Menú principal</nav>
        
        <aside>
            <h3>Filtros</h3>
            <ul>
                <li>Electrónica</li>
                <li>Ropa</li>
            </ul>
        </aside>

        <main>
            <h1>Productos</h1>
            <ul>
                <li>Laptop - $1000</li>
                <li>Mouse - $20</li>
            </ul>
        </main>
        
        <footer>© 2026</footer>
    </body>
</html>

Diferencia clave

blade
<!-- En el LAYOUT -->
@section('sidebar')      <!-- Define la sección -->
    Contenido por defecto
@show                     <!-- La muestra inmediatamente -->

<!-- En el LAYOUT también puedes usar -->
@yield('sidebar')         <!-- Solo muestra lo que la vista hija ponga -->

Regla de oro

  • @yield : Usa en layout cuando solo quieras mostrar contenido de la vista hija

  • @section + @show : Usa en layout cuando quieras un contenido por defecto que la hija pueda sobrescribir

Blade en Laravel + Componentes

Blade es el motor de plantillas de Laravel que ofrece una sintaxis elegante y potente para trabajar con vistas. Aquí te presento una guía estructurada con los conceptos esenciales y el uso de componentes.

1. Sintaxis Básica de Blade

A. Mostrar Variables

php
Copy
Download
{{ $variable }}               // Escapa HTML automáticamente
{!! $html !!}                // Sin escape (para HTML seguro)

B. Estructuras de Control

Condicionales

php
Copy
Download
@if($condition)
  // Contenido
@elseif($anotherCondition)
  // Contenido
@else
  // Contenido
@endif

@unless($condition)          // Equivalente a if(!$condition)
  // Contenido
@endunless

Bucles

php
Copy
Download
@for($i = 0; $i < 10; $i++)
  // Contenido
@endfor

@foreach($items as $item)
  {{ $item->name }}
@endforeach

@forelse($items as $item)    // Maneja arrays vacíos
  {{ $item->name }}
@empty
  <p>No hay items</p>
@endforelse

2. Layouts y Herencia

A. Layout Principal (layouts/app.blade.php)

php
Copy
Download
<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
    @stack('styles')  <!-- Para CSS específico -->
</head>
<body>
    @include('partials.header')
    
    <div class="content">
        @yield('content')
    </div>
    
    @include('partials.footer')
    @stack('scripts') <!-- Para JS específico -->
</body>
</html>

B. Vista que Extiende el Layout

php
Copy
Download
@extends('layouts.app')

@section('title', 'Página de Inicio')

@section('content')
    <h1>Contenido Principal</h1>
@endsection

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

3. Componentes en Blade

A. Crear un Componente

bash
Copy
Download
php artisan make:component Alert

📌 Estructura generada:

  • app/View/Components/Alert.php (Clase)

  • resources/views/components/alert.blade.php (Vista)

B. Componente Básico (Alert.php)

php
Copy
Download
namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    public $type;
    
    public function __construct($type = 'info')
    {
        $this->type = $type;
    }
    
    public function render()
    {
        return view('components.alert');
    }
}

C. Vista del Componente (alert.blade.php)

php
Copy
Download
<div class="alert alert-{{ $type }}">
    {{ $slot }} <!-- Contenido pasado al componente -->
</div>

D. Uso del Componente

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

E. Componentes con Slots Nombrados

php
Copy
Download
<!-- resources/views/components/card.blade.php -->
<div class="card">
    <div class="card-header">
        {{ $title }}
    </div>
    <div class="card-body">
        {{ $slot }}
    </div>
</div>

<!-- Uso -->
<x-card>
    @slot('title') Título Personalizado @endslot
    Contenido del card...
</x-card>

4. Directivas Personalizadas

A. Registrar en AppServiceProvider

php
Copy
Download
use Illuminate\Support\Facades\Blade;

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

B. Uso en Vistas

php
Copy
Download
@datetime($post->created_at)

5. Includes y Fragmentos

A. Incluir Sub-vistas

php
Copy
Download
@include('partials.header', ['title' => 'Inicio'])

B. Fragmentos Reutilizables

php
Copy
Download
<!-- partials/buttons.blade.php -->
@props(['type' => 'submit'])

<button type="{{ $type }}" {{ $attributes }}>
    {{ $slot }}
</button>

<!-- Uso -->
<x-buttons class="btn-primary">Enviar</x-buttons>

6. Tabla Comparativa: Blade vs Componentes

CaracterísticaBlade ClásicoComponentes
Reutilización@include o @extendsClases + plantillas encapsuladas
LógicaDirectivas simplesLógica PHP en clases
PropsVariables pasadas manualmenteProps declaradas en clase
SlotsNo nativoSlots y slots nombrados
RendimientoLigeroOptimizado con caché

7. Consejos Avanzados

  1. Atributos Dinámicos:

    php
    Copy
    Download
    <x-button {{ $attributes->merge(['class' => 'btn']) }}>

  2. Componentes Anónimos (Laravel 8+):

    bash
    Copy
    Download
    php artisan make:component forms.input --inline

  3. Acceder a Atributos:

    php
    Copy
    Download
    {{ $attributes->get('class') }}

8. Ejemplo Completo: Sistema de Notificaciones

Componente (Notification.php)

php
Copy
Download
public $type;
public $message;

public function __construct($type = 'info', $message = '')
{
    $this->type = $type;
    $this->message = $message;
}

Vista (notification.blade.php)

php
Copy
Download
<div class="notification notification-{{ $type }}">
    {{ $message ?? $slot }}
</div>

Uso

php
Copy
Download
<x-notification type="error" message="Error crítico"/>
<!-- O -->
<x-notification type="success">
    Registro completado!
</x-notification>

Documentación Oficial:

Con esta guía dominarás Blade y componentes para crear vistas mantenibles y escalables en Laravel. ¡A codear! 🚀

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