Saltar la navegación

2.4.- Generación del interface de usuario.

Ilustraciión de una pantalla de ordenador con un ratón y un teclado, detras de la pantalla se puede ver como un navegador web abierto.
kreatikar (Pixabay License)

En el apartado anterior configuramos las vistas y una plantilla para ahorrarnos repetir código, a las vistas las pasamos unas variables como titulo encabezado, las listas de datos que queramos mostrar . . . Veamos como podemos llamar a estas vistas y pasar variables a las mismas.

En la carpeta "public" (la única carpeta que realmente necesita ser accesible para el navegador) vamos a tener dos archivos: "familias.php" que se encargará de llamar a la vista "vistaFamilias.blade.php" y pasar las variables necesarias, y "productos.php" que hará lo mismo con la vista "vistaProductos.blade.php". Fíjate en el código.

Página: "productos.php"

<?php

require '../vendor/autoload.php';

use Philo\Blade\Blade;
use Clases\Producto;

$views = '../views';
$cache = '../cache';

$blade = new Blade($views, $cache);
$titulo='Productos';
$encabezado='Listado de Productos';
$productos=(new Producto())->recuperarProductos();
echo $blade->view()->make('vistaProductos', compact('titulo', 'encabezado', 'productos'))->render();

El funcionamiento es muy sencillo:

  1. Con el "require" llamamos al archivo "autoload.php" de la carpeta "vendor" (esta carpeta la crea automáticamente "composer" con las librerías y clases necesarias. En este proyecto lo necesario para que funcione Blade y el autoload)

  2. Las líneas del "use" son para poder usar nuestras Clases y las de "Philo\Blade" (acuérdate del namespace de las mismas que era Clase).

  3. Las siguientes son para indicar la ruta relativa de las carpetas "views" y "cache" y guardarla en sendas variables.

  4. En la siguiente nos creamos un objeto de la clase "Blade", le pasamos las rutas de las carpetas "views" y "cache" e inicializamos las variables que pasaremos a la vista: $titulo, $encabezado y $productos. Esta última línea la hemos simplificado, en realidad podíamos haber puesto:

    $productos = new Productos();
    $productos->recuperarProductos();
  5. En la última línea lamamos a la vista: 'vistaProductos'de la carpeta "views" y le pasamos usando "compact()" las tres variables: $titulo, $encabezado y $productos. En realidad a la vista hay que pasarle un array asociativo "nombre de la variable=>valor" que es lo que hace precisamente el método "compact()".

Página: "familias.php"

<?php

require '../vendor/autoload.php';

use Philo\Blade\Blade;
use Clases\Familia;

$views = '../views';
$cache = '../cache';

$blade = new Blade($views, $cache);
$titulo='Familias';
$encabezado='Listado de Familias';
$familias=(new Familia())->recuperarFamilias();
echo $blade->view()->make('vistaFamilias', compact('titulo', 'encabezado', 'familias'))->render();

Si te fijas es igual a lo que hicimos en "productos.php".

A continuación se deja un enlace con los archivos del proyecto. Para poder ver el mismo funcionando tendréis que tener Composer instalado hacer "composer init" instalar la librería de Bladeautoload y hacer  "composer install". Descargar archivos. (zip - 5,71 KB)

Ejercicio resuelto

A partir de la página de "login" que ya vimos en el ejemplo 1.7.1 modifica el ejemplo que acabamos de ver para poder acceder a listar "productos" y "familias" solo si estamos validados.

Usa Blade para crear la vista que cargue la página de "login" y modifica listar usuarios y productos para que muestren el usuario con el que estamos logeados y el botón cerrar sesión.

Cuando nos validemos accederemos a una página con dos "botones/enlaces" uno para ir a "familias.php" y otro a "productos.php".

Se recomienda abordar este ejercicio desde cero para repasar todos los conceptos.

Autoevaluación

Pregunta

Las plantillas que crees en Blade es preferible alojarlas:

Respuestas

En un lugar no accesible por el servidor web.

En un lugar accesible por el servidor web.

Retroalimentación