Gallery
Ultima Laravel
Share
Explore
Gallery
Ultima Laravel
Vistas

icon picker
Vistas en Laravel: blade

Vistas
Vistas y Rutas en Laravel
Sitio oficial :
Blade Templates - Laravel - The PHP Framework For Web Artisans
⁠
⁠
Las vistas en php se pueden construir mezclando php y html.
Ese código híbrido puede resultar muy espeso y difícil de entender.
Por ese motivo se ha extendido el uso de motores de plantillas que facilitan la inclusión de contenido variable en nuestro html.
Motores de plantillas son:
Blade, usado por Laravel
Smarty, muy habitual, no ceñido a ningún framework
Twig, usado por Simphony.
Los motores de plantillas usan un código más limpio. Dicho código se compila de forma transparente al usuario y se genera php como estamos acostumbrados.
plantilla + compilación transparente = html + php

Mostrar una vista.

Las vistas en Laravel pueden usar php o el motor blade. El nombre del fichero nos indica cómo hemos construido una vista. Hemos de respetar esta convención para que blade funcione.
nombrevista.php
nombrevista.blade.php
Desde nuestro fichero de rutas podemos llamar a una vista. Veremos que también lo podemos hacer desde los controladores.
Las vistas se guardan en /resources/views
Route::get('user', function()
{
//mostraremos user.php o user.blade.php
return view('user');
});
Es conveniente usar subdirectorios. No obstante al llamarlas podemos usar barras o puntos para referirnos a ellas.
La vista guardada en user/index.blade.php se puede llamar indistintamente así:
Route::get('user', function()
{
return view('user/index');
return view('user.index');
});

Pasar variables a la vista

Para llevar variables a la vista debemos hacer lo siguiente:
return view('grupo.vista', $arrayAsociativo);
Ejemplos:
return view('user.index', ['name' => 'James']);

return view('blog.history', [
'mes' => $mes,
'ano' => $ano,
'posts' => $posts
]);
Existen otras variantes:
Con with:
return view('greeting')->with('name', 'Victoria');
Y por último usando compact.
return view('users', compact('mes', 'ano', 'posts'));

//equivale a:

return view('blog.history', [
'mes' => $mes,
'ano' => $ano,
'posts' => $posts
]);

Mostrar datos

El método más básico que tenemos en Blade es el de mostrar datos, para esto utilizaremos las llaves dobles ({{ }}) y dentro de ellas escribiremos la variable o función con el contenido a mostrar:
Hola {{ $name }}.
La hora actual es {{ time() }}.

Como hemos visto podemos mostrar el contenido de una variable o incluso llamar a una función para mostrar su resultado. Blade se encarga de escapar el resultado llamando a htmlentities para prevenir errores y ataques de tipo XSS. Si en algún caso no queremos escapar los datos tendremos que usar {!! !!} en vez de {{ }}:
Hola {!! $name !!}.

Nota: En general siempre tendremos que usar las llaves dobles, en especial si vamos a mostrar datos que son proporcionados por los usuarios de la aplicación. Esto evitará que inyecten símbolos que produzcan errores o inyecten código javascript que se ejecute sin que nosotros queramos. Por lo tanto, este último método solo tenemos que utilizarlo si estamos seguros de que no queremos que se escape el contenido.

Mostrar un dato sólo si existe

Para comprobar que una variable existe o tiene un determinado valor podemos utilizar el operador ternario de la forma:
{{ isset($name) ? $name : 'Valor por defecto' }}
O simplemente usar la notación que incluye Blade para este fin:
{{ $name or 'Valor por defecto' }}

Comentarios

Para escribir comentarios en Blade se utilizan los símbolos {{-- y --}}, por ejemplo:
{{-- Este comentario no se mostrará en HTML --}}

Pasar información

Lo habitual es pasar información a la plantilla para que se genere una vista realmente dinámica. Para hacerlo usando un array asociativo (clave-valor).
Ejemplo con un dato
Route::get('user', function()
{
return view('user.index', ['name' => 'James']);
});
O así si hay más de uno.
view('blog.history', [
'mes' => $mes,
'ano' => $ano,
'posts' => $posts
]);
O también con with:
return view('greeting')->with('name', 'Victoria');
Y por último usando compact:
return view('users', compact('users', 'title'));

Haciendo echo:
//modo php
<?php echo $variable ?>
//modo blade
{{ $variable }}
Los textos son "escapados siempre". Es una medida de seguridad importante cuando tomamos datos de formularios de usuario.
Para no hacerlo debemos usar '{!! $var !!}'
Route::get('escape', function () {
return view('user.escape', [
'text' => '<h1>hola mundo</h1>'
]);
});
Crea la siguiente vista con nombre escape.blade.php:
<!DOCTYPE html>
<html>
<head>
<title>User</title>
</head>
<body>
Texto "escapado"{{ $text }}
<br>
Texto sin escapar: {!! $text !!}
</body>
</html>
Podemos usar el operador ternario:
//al estilo php
{{ isset($name) ? $name : 'Default' }}

//o al modo blade
{{ $name or 'Default'}}

Estructuras de control.-

Blade nos permite utilizar la estructura if de las siguientes formas:
@if( count($users) === 1 )
Solo hay un usuario!
@elseif (count($users) > 1)
Hay muchos usuarios!
@else
No hay ningún usuario :(
@endif
//además contamos con un si negativo (if(!condicion){})
@unless (Auth::check())
You are not signed in.
@endunless
En los siguientes ejemplos se puede ver como realizar bucles tipo for, while o foreach:
Bucles
@for ($i = 0; $i < 10; $i++)
El valor actual es {{ $i }}
@endfor

@foreach ($users as $user)
<p>Usuario {{ $user->name }} con identificador: {{ $user->id }}</p>
@endforeach

@forelse ($users as $user)
<li>{{ $user->name }}</li>
@empty
<p>No Usuarios</p>
@endforelse

@while (true)
<p>Soy un bucle while infinito!</p>
@endwhile
Más posibilidades en:
https://laravel.com/docs/9.x/blade
⁠
⁠

Incluir una plantilla dentro de otra plantilla

En Blade podemos indicar que se incluya una plantilla dentro de otra plantilla, para esto disponemos de la instrucción @include:
@include('view_name')
Además podemos pasarle un array de datos a la vista a cargar usando el segundo parámetro del método include:
@include('view_name', array('some'=>'data'))
Esta opción es muy útil para crear vistas que sean reutilizables o para separar el contenido de una vista en varios ficheros.

Layouts

Resulta interesante poder unificar la construcción de nuestras vistas.
Podemos usar la directiva include para incluir elementos construidos en un fichero a parte.
@include('footer')
//así incluiremos un elemento guardado en views directamente y con extensión php o blade.php
Pero lo realmente práctico es usar layouts. Un layout es una plantilla con la distribución base para otras plantillas. La ubicación está en /resources/views/layouts
Un fichero de layout es un fichero blade normal con la salvedad de usar algunas directivas que etiquetan la ubicación de los elementos a construir en cada una de las vistas que usen ese layout.
Los elementos variables de nuestras vistas se definen con las directivas @section y sus posibles cierres (@endsection|stop|show|append ) y @yield
Section define una sección.
Si se cierra con @endsection o @stop (equivalentes) se define la sección pero hay que usar @yield después para definir su ubicación en el layout.
Si usamos @yield ubicamos una sección si ya estaba definida. Si la sección no existe se crea y se ubica.
La diferencia principal entre @section y @yield es que la primera permite añadir contenido a una sección y la segunda no.
Si @section se cierra con @show se define además el punto de inserción
Ejemplo de una plantilla tipo layout almacenada en el fichero resources/views/layouts/master.blade.php:
<html>
<head>
<title>Mi Web</title>
</head>
<body>
@section('menu')
Contenido del menu
@show

<div class="container">
@yield('content')
</div>
</body>
</html>
Posteriormente, en otra plantilla o vista, podemos indicar que extienda el layout que hemos creado (con @extends('layouts.master')) y que complete las dos secciones de contenido que habíamos definido en el mismo:
@extends('layouts.master')

@section('menu')
@parent
<p>Este condenido es añadido al menú principal.</p>
@endsection

@section('content')
<p>Este apartado aparecerá en la sección "content".</p>
@endsection

Como se puede ver, las vistas que extienden un layout simplemente tienen que sobrescribir las secciones del layout.
La directiva @section permite ir añadiendo contenido en las plantillas hijas, mientras que @yield será sustituido por el contenido que se indique.
El método @parent carga en la posición indicada el contenido definido por el padre para dicha sección.
El método @yield también permite establecer un contenido por defecto mediante su segundo parámetro:
@yield('section', 'Contenido por defecto')
Otro ejemplo
<!-- Stored in resources/views/layouts/app.blade.php -->
<html>
<head>
<title>App Name - @yield('title')</title>
</head>
<body>
@section('sidebar')
This is the master sidebar.
@endsection <!-- equivale a @stop -->
@yield('sidebar')
<div class="container">
@yield('content')
</div>
</body>
</html>
Sería equivalente lo siguiente (cambio de show por endsection+yield:
<!-- Stored in resources/views/layouts/app.blade.php -->
<html>
<head>
<title>App Name - @yield('title')</title>
</head>
<body>
@section('sidebar')
This is the master sidebar.
@endsection <!-- equivale a @stop -->
@yield('sidebar')
<div class="container">
@yield('content')
</div>
</body>
</html>

Ahora una vista puede extender un layout de la siguiente manera
<!-- Stored in resources/views/child.blade.php -->
@extends('layouts.app')

@section('title', 'Page Title')

@section('sidebar')
@parent
<p>This is appended to the master sidebar.</p>
@endsection
@section('content')

<p>This is my body content.</p>
@endsection

NOTA: el uso de @parent permite mantener el contenido de una sección en el layout padre y ampliarlo. Si no se usa el contenido de la sección en el padre desaparece.
Mejoras en Blade.
Ahora se pueden usar simplificaciones a la hora de generar @slots en los Componentes de *Blade. Veamos un ejemplo de cómo se hacía hasta ahora:
<x-slot name="title">
Server Error
</x-slot>

Ahora veamos la forma simplificada:
<x-slot:title>
Server Error
</x-slot>
Gallery
Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.