Sistema de Plantillas Blade en Laravel: Creación y Uso Eficiente

Clase 11 de 37 • Curso de Introducción a Laravel 6

Resumen

¿Cómo funciona el sistema de plantillas en Laravel con Blade?

En el desarrollo web, optimizar el manejo de vistas es crucial para lograr un código limpio y manejable. Laravel, conocido por su eficiencia y flexibilidad, ofrece Blade, su sistema de plantillas que transforma la forma en que trabajamos con vistas. Usar Blade no solo ayuda a mantener el código ordenado, sino que también optimiza el uso de recursos, gracias a su capacidad para generar código PHP puro. Vamos a explorar cómo implementar y utilizar este poderoso sistema en Laravel.

¿Cómo crear un nuevo proyecto en Laravel?

Antes de profundizar en Blade, necesitamos configurar un entorno de Laravel adecuado. Sigamos estos pasos para crear un nuevo proyecto:

Abrir la terminal: Es el punto de partida para ejecutar comandos en el sistema.
Crear un nuevo proyecto: Utiliza el comando composer create-project --prefer-dist laravel/laravel nombre-proyecto para empezar tu proyecto.
Navegar al proyecto: Usa cd nombre-proyecto para entrar en el directorio del proyecto recién creado.
Abrir en un IDE: Recomendamos usar un IDE como Visual Studio Code, donde podrás abrir el proyecto y gestionar los archivos cómodamente.

¿Cómo funciona Blade en Laravel?

Blade es el motor de plantillas incluido en Laravel, ideal para trabajar con vistas PHP utilizando una sintaxis elegante y ligera. A continuación, un vistazo a su funcionamiento básico:

Sintaxis sencilla: Blade utiliza estructura tipo @ y llaves {} para identificar directivas y variables.
Extensión de archivos: Los archivos Blade utilizan la extensión .blade.php, lo que distingue su sintaxis de los archivos PHP tradicionales.
Herencia de plantillas: Blade permite heredar plantillas base mediante la directiva @extends, facilitando la reutilización de código.
Secciones y contenido: Define secciones con @section, y llena esas secciones con contenido en archivos que extienden la plantilla base.

¿Cómo configurar una ruta en Laravel?

Las rutas son esenciales para dirigir solicitudes y mostrar vistas correctas. Configurar rutas en Laravel es bastante directo:

Definición de rutas: Abre el archivo routes/web.php.
Registrar una ruta básica: Usa la función Route::get('/ruta', function() { return view('nombre-vista'); }); para asociar una URL con una vista Blade.
Controladores y vistas: Alternativamente, puedes usar controladores para manejar la lógica y luego devolver vistas con $this->view('nombre-vista').

¿Cómo optimizar el rendimiento de vistas con Blade?

Blade permite la generación de código PHP compilado, lo que mejora notablemente el rendimiento de las aplicaciones web:

Archivos compilados: Laravel compila plantillas Blade en archivos PHP situados en storage/framework/views, lo que ayuda a que las vistas carguen más rápidamente.
Almacenamiento eficiente: Al trabajar directamente con PHP, las vistas no agotan recursos innecesarios. Esto las hace más eficientes y rápidas de procesar.

¿Cómo aplicar herencia en Blade con "includes"?

Blade no solo hereda plantillas completas, sino que también permite incluir componentes específicos, como encabezados y pies de página, simplificando la gestión de contenido:

// En tu plantilla base
@include('header')
@section('content')
    <!-- Contenido principal aquí -->
@endsection
@include('footer')

Retos y futuras aplicaciones de Blade

Dominar Blade no solo simplifica el desarrollo, sino que sienta una base sólida para proyectos grandes. Un ejercicio recomendado es identificar los encabezados y pies de página comunes en tus proyectos, creando plantillas reutilizables para estos elementos.

Aprovecha Blade para mantener tu código organizado y comprensible en el tiempo. Así, tu sistema será mantenible, capaz de evolucionar sin complicaciones a medida que tus proyectos crezcan. ¡Sigue explorando y construyendo con Blade en Laravel para potenciar tus habilidades de desarrollo!

Gustavo Jara

student•

Tips blade:
- Para imprimir variables en blade usamos {{ $var}}
- Para imprimir vaiables escapando html {!! $var !!}

- Ciclos en blade:
- - @foreach ($vars as $var)
    	&lt;li&gt;{{ $var-&gt;value }}&lt;/li&gt;
	@endforeach

- - @if (! empty($var))
    	$var-&gt;value
	@endif

- - @if (!empty($var))
    	$var-&gt;value
	@else
    	&lt;p&gt;Empty&lt;/p&gt;
	@endif

- - @if (!empty($var))
    	$var-&gt;value
	@elseif ($var &gt;18)
    	&lt;span&gt;I'm over 18&lt;/span&gt;
	@else
    	&lt;span&gt;I'm under 18&lt;/span&gt;
	@endif

- Codigo php sin usar &lt;?php ... ?&gt;:
- - @php
    	// php code
	@endphp

Victor Noguera

student•

Muchas Gracias.

Álvaro Moscoso Muñoz

student•

María Sierra

student•

Blade: sistema de plantillas avanzado

Blade es el sistema de plantillas de Laravel. Todo lo que tiene que ver con vistas estará en resources → views.

@yield('contenido') → Esto le indica a Laravel que aquí se va registrar el contenido, y le pondremos dentro un nombre identificador.
@extends('archivo') → Para indicar de quién vamos a utilizar el @yield
@section('contenido') → Con este le indicamos a Laravel el @yeild donde va llevar el contenido que escribamos dentro de este.
@include('contenido') → Incluye el código de otros archivos al archivo que lo está incluyendo.

👀 Cuando utilizamos @yield y @section, estamos haciendo que Laravel extraiga lo que tenemos dentro del @section y inyecta en el archivo que le indicamos con @extends para al final poner el contenido donde se encuentra el @yield.

⚠ En cambio con @include, Laravel trae el contenido que está en el archivo que incluimos y lo pone en el archivo actual.

Laravel realmente muestra en el navegador el resultado que el creo con las plantillas blade que hemos creado, este resultado lo guarda en storage → views.

Ricardo Andres Zambrano Cuaicuan

student•

Buen aporte

Jose Mauricio Rubio Villatoro

student•

En VSC les recomiendo la siguiente extensión, que te permitirá ser más productivo al trabajar con plantillas en blade.

Johnner Alexander Gambacica Ortiz

student•

Ayuda mucho =)

Andrés Felipe Lopez gomez

student•

Muchas gracias por el aporte

Tomas Goldenberg

student•

Mas cursos con este profe! un capo italo!

Martín S. Campos

student•

Siguelo en su canal de Youtube. Sus cursos me ayudaron sobretodo a juntar laravel con Vue.

Alan Quispe

student•

Amo sus cursos realmente

KEVIN BRAYAN LUNA FIGUEROA

student•

Las plantillas blade son lo mejor ya que nos apoyan a que el html se lea muy legible, ya que con php puro siempre tenemos que agregar la etiqueta de abertura y la de cierre, ejemplo:

&lt;?php if(true) { ?&gt;
	&lt;h1&gt;Hola mundo!&lt;/h1&gt;
&lt;?php } ?&gt;

Italo Morales Fantone

teacher•

Correcto :)

Eddy Herrera Vargas

student•

Si se requiere renderizar scripts o estilos de vistas secundarias en la plantilla principal.

En una vista secundaria crear el script o estilo que funcionarán solo en esa vista; ponerlo dentro de la etiqueta push, de la siguiente manera:

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

@push('styles')
 	<link rel="stylesheet" href="example.css">   
@endpush

En la vista o plantilla principal, se invoca a los scripts o estilos de una vista secundaria utilizando la etiqueta stack(), de la siguiente manera:

<head>
    <!-- meta datos y otros estilos CSS -->
		@stack('styles')		
</head>
<body>
	    <!-- Contenido -->
	    <!-- Otros scripts -->
			@stack('scripts')		
</body>

Arturo Soga

student•

Este curso es una joya !!

Juan Daniel Martínez Navarro

student•

Según mi lógica: @yield es para mantener un tipo de relación padre / hijo de la vista master por decirlo de alguna forma, con la sección que extienda de dicha vista. O sea que pueden compartir métodos, variables, datos entre si... (?) @include funciona de la misma manera que en php puro, pero no entiendo la diferencia entre ambas. Toda la información en foros dicen lo mismo que la documentación en Laravel y no comprendo que se usa para cada caso y como debería de trabajar mis proyectos. Si por mi fuera viviría de puros @include ya que se me hace más engorroso tener que usar el @extends, @section, @endsection y de lo contrario con un simple @include de primeras agrega el código de la vista y ya. Si alguien me pudiera sacar de la duda que no sea citando textualmente la documentación o si me acerque un poco con mi conclusión de al principio les agradecería mucho.

Francisco Torregrosa Ros

student•

Es muy sencillo, pero para ello hay que pensar al revés

Cuando hacemos un @include el orden es:

El sistema lee el archivo php detecta el @include y lo que hace es traer todo el fichero del @include y lo mete dentro como si fuese suyo y luego lo procesa todo.

Con @yield y @section funciona el reves.

Cuando le decimos a laravel que tenemos una vista al decirle en la vista que extendemos de "app" lo que hace es coger lo que tengamos en @section, lo prepara y luego lo inyecta en "app" en su seccion @yield

Que ganamos con esto?, que distintas vistas puedan aprovechar el mismo @yield, cosa que si lo hacemos con @include tendríamos que tener un fichero para cada vista

Ademas podemos tener varias @section con nombres distintos y luego laravel lo inyectara en los @yields que corresponda

De esta manera el código es mas legible y mas organizado.

Ademas en en cuenta que si lo haces a puros include el formato seria en la vista

@include('header')
@include('nav')

...

@include('footer')

Si mañana tuvieses que reestructurar el código tendrías que cambiarlo en todas las vistas

@include('header')
@include('nav')

...
@include('extra')
...

@include('footer')

De la otra manera solo tendrías que cambiar en el template de donde extiendes en este caso "app"

Carlos Eduardo Gomez García

teacher•

Interesante, siempre me gustan usar los sections para imprimir contenido variable en diferentes partes de mi plantilla

Los yield-section van relacionados, en donde pongas un yield se va a imprimir el section que hayas definido, y la forma de "parearlos" es a través de su nombre

José Antonio Quintanilla Umaña

student•

excelente curso, bien explicado tocando cosas importantes!!

Ricardo Rito Anguiano

student•

Esto me recuerda al preprocesador PUG :0

Jhon Anderson Alonso Hernandez

student•

@DD($variable) para parar el código y solo ver una variable @push ojala explique la utilización de estos

Luis Cordero

student•

/views/layouts/app.blade.php
/views/components/header.blade.php
/views/components/nav.blade.php
/views/components/footer.blade.php
/views/pages/index.blade.php

Jimmy Buriticá Londoño

student•

Blade es un sistema de plantillas de Laravel muy sencillo y a la vez muy poderoso.

Sebastian Dario Reinoso Carpio

student•

Cristhian Edwin Ortiz Mercado

student•

woao realmente se ve muy util para aislar codigo y hacer trabajo en equipo tambien

Italo Morales Fantone

teacher•

Es así :)

Miguel Angel Muñoz Pozos

student•

Más documentación sobre Blade Templates https://laravel.com/docs/7.x/blade#introduction

Italo Morales Fantone

teacher•

Excelente aporte.

Andres Roberto Coello Goyes

student•

en PHP puro tenemos que abrir y cerrar a cada rato.

&lt;select&gt;
	&lt;?php foreach($array as $item) : ?&gt;
		&lt;option&gt; &lt;?php echo $item['name'] ?&gt; &lt;/option&gt;
	&lt;?php endforeach; ?&gt;
&lt;/select&gt;

blade es mas comodo...

Italo Morales Fantone

teacher•

Si, la idea es tener archivos mas cortos para poderlos mantener en el tiempo sin tanto esfuerzo.

Christian Alvarenga

student•

¿Cuál sería la diferencia entre utilizar @yield y @include?

Luis Cano

student•

Con @include agregas directamente un template parcial a tu archivo blade, el tempalte puede o no recibir valores:

<div>
    @include('shared.errors')
 
    <form>
        <!-- Form Contents -->
    </form>
</div>

@yield trabaja con @section cuando tienes un archivo blade que extiende un template principal, @yield es como un slot o placeholder y @section los datos que llenan ese slot o placeholder:

<!-- resources/views/layouts/app.blade.php -->
 
<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body> 
        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

<!-- resources/views/child.blade.php -->
 
@extends('layouts.app')
 
@section('title', 'Page Title')
  
@section('content')
    <p>This is my body content.</p>
@endsection

Juan Barahona

student•

profesor no puedo avanzar la clase 9, me sale este error 403 This action is unauthorized.

Francisco Javier Cervantes Candelario

student•

Cuando agregaste el form request, cambiaste a true ?

/**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true; //Temporalmente, mientras no tenemos permisos y roles.
    }