The Pokedex Project(3) — Agregando el View Helper para el render de las vistas.
Creando la clase View para encapsular el sistema de templates de Twig.
Crearemos una clase para poder renderizar nuestras vistas, que en este caso serán archivos de HTML. Esto nos ayudara a encapsular el código de Twig (el sistema de templates), en la cual le podemos pasar información a la vista y renderizarla. Con esta encapsulación podremos mandar a llamar el render de nuestras vistas en el proyecto.
Empezaremos creando la clase View(src/Utils/View/View):
Copiar código:mkdir src/Utils/View && cd src/Utils/View && touch View.php
Editamos el archivo View.php:
Copiar código:<?php
namespace Utils\View;
use Twig\Loader\FilesystemLoader as Loader;
use Twig\Environment;
class View
{
const TEMPLATES_PATH = 'resources/views';
const CACHE_PATH = 'resources/views/cache';
protected $view;
public function __construct()
{
$this->_init();
}
private function _init()
{
$loader = new Loader(self::TEMPLATES_PATH);
$this->view = new Environment($loader);
}
public function render(string $viewFile, array $opts = [])
{
echo $this->view->render($viewFile, $opts);
}
}
Aquí inicializaremos la librería de Twig y la encapsularemos en la clase View, una vez inicializada las configuraciones de Twig, ya podremos renderizar nuestras vistas de HTML con el método render().
Probando nuestra clase View
Probaremos con una ruta que ya tenemos configurada, editamos el archivo routes/web.php:
Copiar código:$route->add('/', function () {
//echo '<h1>Hello Pokedex!</h1><br>';
$template = new Utils\View\View();
$template->render('pokedex.html');
});
Creamos nuestra estructura de las vistas, tal cual vienen en las constantes de la clase View:
Copiar código:mkdir resources/views && cd resources/views && touch pokedex.html
Editamos nuestro archivo HTML:
Copiar código:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pokedex</title>
</head>
<body>
<h1>Hello Pikachu!</h1>
</body>
</html>
Creando un layout para nuestras vistas.
Un layout es la estructura principal de nuestra app, se puede dividir en estas secciones dependiendo del diseño de la app, en nuestro caso sería: header, content, footer. El header es donde reside nuestra navegación del sistema, el content es el contenido de una sección y el footer es la información relevante de nuestra app que funciona como pie de página.
La lógica del negocio seria que cada vez que le doy click a una sección del menú(que esta en el header) me mande a una pagina; siendo el content dinamico, ya que va cambiar dependiendo de lo que solicitemos.
Twig tiene esta funcionalidad para extender una plantilla de otra, según la documentación seria “plantilla padre y plantilla hijo”. Para definir nuestro layout haremos lo siguiente:
Creamos la carpeta layouts y el archivo app.html en resources/views:
Copiar código:mkdir resources/views/layouts && cd resources/views/layouts && touch app.html
Editamos el archivo app.html con lo siguiente:
Copiar código:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pokedex</title>
</head>
<body>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
En este archivo definimos el “block content” el cual lo relacionara con cualquier plantilla que extienda de app.html, y tenga el nombre del bloque en su código. Esto hace que no repitamos los css, js y fuentes de la aplicación por cada archivo HTML que tengamos.
Para relacionarlo con otra plantilla(plantilla hija en este caso), editamos el archivo pokedex.html:
Copiar código:{% extends "layouts/app.html" %}
{% block content %}
<h1>Hello Pikachu!</h1>
{% endblock %}
Aquí podemos ver que ya no necesitamos la estructura completa del HTML ya que esa estructura esta definida en app.html. Con esto no repetimos código y refactorizamos la vista.
Creando el helper de la clase View para refactorizar código.
Para refactorizar el código de “Utils/View/View” y que no estemos haciendo uso continuo de “use Utils/View/View” o de simplemente “new Utils\View\View()”, crearemos un script donde crearemos una función view() y dentro de ella encapsularemos el objeto View.
Este script igual lo vamos a utilizar después para agregar otras funciones que nos servirán en el proyecto, para esto tendremos que decirle a Composer que así como también hace el autoload de las clases, lo haga con este archivo.
Editamos el archivo composer.json y agregamos en la sección de autoload del archivo:
Copiar código:"files": [
"src/Utils/helpers.php"
]
Creamos el archivo de helpers.php:
Copiar código:touch src/Utils/helpers.php
Editamos el archivo helpers.php:
Copiar código:<?php
use Utils\View\View;
if (! function_exists('view')) {
function view(string $viewFile, array $opts = [])
{
$template = new View();
$template->render($viewFile, $opts);
}
}
Ejecutamos el dump-autoload de composer:
Copiar código:composer dump-autoload
Modificamos y probamos en nuestra ruta(routes/web.php):
Copiar código:$route->add('/', function () {
//echo '<h1>Hello Pokedex!</h1><br>';
//$template = new Utils\View\View();
//$template->render('pokedex.html');
view('pokedex.html');
});
Deberíamos de ver algo así en el explorador:
Ahora probaremos pasarle una variable a la vista; el segundo parámetro de View::render() es un array asociativo el cual funciona como “key=>value”, y se compila con Twig como si fuera “$var=value” en la vista; modificamos el archivo de la ruta(routes/web.php):
Copiar código:view('pokedex.html', ['pokemonName' => 'Balbusaur']);
Después modificamos la vista para que reciba el nombre de la variable configurada en el paso anterior, en el archivo pokedex.html(resources/views) editamos:
Copiar código:<h1>Hello {{ pokemonName }}!</h1>
Y deberíamos de ver algo así:
Con este helper ya podremos usar el método View::render() sin necesidad de instanciar la clase en donde la queremos usar y aparte le agregamos dinamismo a nuestra vista.
Pueden consultar el código de esta publicación en este repositorio: https://github.com/krsrk/pokedex-vanilla-php
La siguiente publicación esta lista y la puedes revisar, en ella codificaremos nuestro Error Handler y validaremos nuestras vistas en el view() helper:
https://link.medium.com/rNvJ5jDjH9
Si les gusto la publicación denle claps, likes y comentarios.
