Saltar la navegación

2.3.1.- Separación de la lógica de negocio (II).

Ilustración de una plantilla.
OpenClipart-Vectors (Dominio público)


Para utilizar Blade, y suponiendo que estamos trabajando con la estructura de directorios que se propuso en el apartado anterior, simplemente tienes que añadir a tus páginas del directorio "public" lo siguiente:

<?php
require 'vendor/autoload.php';
use Philo\Blade\Blade;
$views = '../views';
$cache = '../cache';
$blade = new Blade($views, $cache);
echo $blade->view()->make('vista')->render();

Esto me cargaría la vista "vista.blade.php" de la carpeta "views". Fíjate que solo hace falta poner el nombre de la vista y no la extensión ".blade.php".

Para entender esto mejor desarrollaremos un proyecto con dos páginas, una para ver el listado de productos de la base de datos proyecto y otra para ver el listado de familias.

A las clases Conexion, Productos y Familias que ya la hemos visto a lo largo del tema, vamos a modificarlas para usar namespaces en todo el proyecto. La estructura de nuestro proyecto de ejemplo podría ser la siguiente:

Imagen de una estructura en árbol de un proyecto se puden ver diferentes carpetas y archivos
Captura de pantalla Visual Studio Code (Elaboración propia)
  • En "src" tendremos las clases para conectarnos a la base de dato y recuperar los datos de familias y productos.
  • En "public" Las dos páginas que realmente mostraremos
  • En "views" crearemos una carpeta "plantillas" (pondremos las plantillas que reusaremos las veces que queramos) y las dos vistas, la que me generará el listado de productos y la que me generará el listado de familias.

Vamos a ello:

Las clases ya sabemos como hacerlas simplemente vamos a poner en el encabezado de las mismas, lo siguiente. Ten en cuenta que el nombre del namespace viene dado por lo que pusimos en el "autoload" del composer y la carpeta de las mismas también. Si los has cambiado debes reflejarlo en "composer.json"

<?php
namespace Clases;
use PDO;
use PDOException;

Al usar namespace es necesario poner "use" a los métodos y la clase PDO. Si no lo hacemos para no tener errores tendríamos que andar poniendo "$conexion = new \PDO(. . . ), catch(\PDOException) . . ."

Las páginas que vamos a ver (familias y productos) comporten una estructura como el esqueleto html,  la carga de bootstrap  o las hojas de estilos, todo esto lo podemos meter en la plantilla y así nos evitamos tener que repetir el mismo código una y otra vez. Veamos la plantilla

<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- css para usar Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>@yield('titulo')</title>
</head>
<body style="background:#0277bd">
<div class="container mt-3">
    <h3 class="text-center mt-3 mb-3">@yield('encabezado')</h3>
    @yield('contenido')
</div>
</body>
</html>

cada instrucción de Blade viene precedida de "@". En las líneas 10, 14 y 15 verás "@yield('. . .')"  se usa para mostrar el contenido de una sección determinada. Para cada página cambiaremos: contenido, título y cabecera.

Veamos como hacemos uso de esta plantilla en las vistas:

Vista: "vistaProductos.blade.php"

@extends('plantillas.plantilla1')
@section('titulo')
    {{$titulo}}
@endsection
@section('encabezado')
    {{$encabezado}}
@endsection
@section('contenido')
    <table class="table table-striped">
        <thead>
        <tr class="text-center">
            <th scope="col">Código</th>
            <th scope="col">Nombre</th>
            <th scope="col">Nombre Corto</th>
            <th scope="col">Precio</th>
        </tr>
        </thead>
        <tbody>
@foreach($productos as $item)
            <tr class="text-center">
                <th scope="row">{{$item->id}}</th>
                <td>{{$item->nombre}}</td>
                <td>{{$item->nombre_corto}}</td>
                @if($item->pvp>100)
                    <td class='text-danger'>{{$item->pvp}}</td>
                @else
                    <td class='text-success'>{{$item->pvp}}</td>    
                @endif
            </tr>
        @endforeach
        </tbody>
    </table>
@endsection

Vista "vistaFamilias.blade.php"

@extends('plantillas.plantilla1')
@section('titulo')
    {{$titulo}}
@endsection
@section('encabezado')
    {{$encabezado}}
@endsection

@section('contenido')
    <table class="table table-striped">
        <thead>
        <tr class="text-center">
            <th scope="col">Código</th>
            <th scope="col">Nombre</th>
        </tr>
        </thead>
        <tbody>
        @foreach($familias as $item)
            <tr class="text-center">
                <th scope="row">{{$item->cod}}</th>
                <td>{{$item->nombre}}</td>

            </tr>
        @endforeach
        </tbody>
    </table>
@endsection

Lo primero que hacemos con "@extends('...')" es llamar a la plantilla, para ello indicamos la ruta (fíjate que la extensión ".blade.php" no hace falta ponerla). Acuérdate que creamos tres "yields" uno llamado título, otro encabezado y otro contenido, para rellenarlos ponemos el bloque "@section('...'),  @endsection" con el nombre que pusimos en los "yields".

A las vistas mandamos unas variables (en el apartado siguiente veremos como). A la vista "vistaProductos.blade.php" mandamos las variables "$titulo, $encabezado y $productos", $producto trae los productos de las base de datos (los mandamos con un "fetchAll()" de una consulta a la tabla productos). Cuando usamos Blade no hace falta poner "<?php echo $titulo; ?>"  que es como lo hemos hecho hasta ahora, nos basta con poner "{{...}}"

Puedes observar ademas que también podemos poner un bucle para recorrer, en este caso, los productos "@foreach(...), endforeach".

De igual manera con un bloque "@if, @else, @endif" pintamos los precios de mas de 100€ de rojo y el resto de verde.

El código HTML lo ponemos tal cual, si necesitásemos poner código PHP en una pagina Blade lo pondríamos entre las directivas "@php, @endphp"

En el enlace siguiente tenemos un manual muy completo de Blade en "styde.net"

Manual Blade