Sistema de plantillas blade en Laravel

Laravel

Laravel

En un artículo anterior, haciendo una breve introducción a Laravel mencionamos que las vistas en este framework se escribían haciendo uso de un motor de plantillas llamado Blade, el cual es muy potente y que entre sus muchas ventajas tenemos:

Posibilidad de extender una plantilla a otra con el fin de ahorrar código y hacer mucho más mantenible nuestras aplicaciones.

En blade se inserta código Php haciendo uso de las llaves. {{}} que además de solucionar el problema del código espaguetti, aporta en la seguridad de las aplicaciones previniendo ataques XSS.

Posibilidad de recibir parámetros en las vistas.

Posibilidad de ejecutar código Php nativo en cualquier momento.

Ejemplo básico de plantilla en blade:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
    <head>
        <title>Apicación - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

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

Como podemos apreciar estamos haciendo el llamado de partes de la pagina desde otros ficheros de vista como lo son el title, sidebar, content o como también se le llama secciones.

Extendiendo de una vista:
Extender una vista nos ayuda a tener un código más limpio y manejable, veamos como podemos extender:

Digamos que tenemos esta vista principal la llamare app.blade.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
< !DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Aplicacion</title>
    <link href="{{ asset('/css/app.css') }}" rel="stylesheet"/>
    <!-- Fonts -->
    <link href="{{ asset('/css/css.css?family=Roboto:400,300') }}" rel='stylesheet' type='text/css'/>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    < ![endif]-->
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Appuntes</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="{{ url('/') }}">Inicio</a></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    @if (Auth::guest())
                        <li><a href="{{ url('/auth/login') }}">Login</a></li>
                        <li><a href="{{ url('/auth/register') }}">Register</a></li>
                    @else
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ Auth::user()->name }} <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="{{ url('/auth/logout') }}">Cerrar Sesión</a></li>
                            </ul>
                        </li>
                    @endif
                </ul>
            </div>
        </div>
    </nav>
    @yield('content')
    <!-- Scripts -->
    <script src="{{ asset('/js/jquery.min.js') }}"></script>
    <script src="{{ asset('/js/bootstrap.min.js') }}"></script>
    @yield('scripts')
</body>
</html>

Ahora podemos construir una vista que extienda de esta para aprovechar el diseño y la programación realizada en ella, así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@extends('app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-info">
                <div class="panel-heading">Inicio</div>

                <div class="panel-body">
                                       
                    <div class="row">
                        Más código html...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

El contenido de la vista anterior no es estrictamente necesario, podemos hacer uso del html que deseemos.

Condicionales:
Al igual que en Php nativo podemos hacer uso indudablemente de condiciones para validar información, veamos la estructura de un condicional en Laravel:

1
2
3
4
5
6
7
@if (count($records) === 1)
    Un Registro
@elseif (count($records) > 1)
    Más de un registro
@else
    No se encontraron registros
@endif

Bucles:
Así es también tenemos disponibles para nosotros en Laravel ciclos repetitivos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@for ($i = 0; $i < 10; $i++)
    Valor actual {{ $i }}
@endfor

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

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

@while (true)
    <p>Soy un bucle infinito.</p>
@endwhile
Si este post fue de ayuda para ti, no olvides dejar un comentario, también puedes contar tu experiencia o lo que estés haciendo. Nos ayuda a seguir creciendo. ¡Vamos!, solo te llevará 1 minuto.

Deja un comentario

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