Esto es un Blog

TwigUn motor de plantillas Html para PHP: Ligero, rápido y furioso.

Si estáis acostumbrados a Laravel, pero estáis probando hostings gratuitos para alojar vuestras webs de prueba, quizás, y sólo quizás, si Laravel recién instalado de Composer ocupa unos 70Mb, y el Hosting gratuito te da justamente 100Mb, a pocos archivos multimedia que tengas, pues no te va a caber. AlwaysData ofrece, por ejemplo, 100Mb, y 00Webhost, de Hostinger, 300Mb.

Hay otra forma de iniciar proyectos en PHP de forma muy ligera, por ejemplo con menos de 5Mb, y sin renunciar a muchas de las ventajas que ofrece Laravel, como por ejemplo, cambiando de Framework.

Wolff es uno de esos frameworks, Slim es otro...

Pero si realmente quieres algo más básico aún, que sea rudimentario, pero no mucho, sencillo, aunque refactorizable, probablemente lo mejor sea empezar instalando un enrutador como Phroute y un motor de plantillas como Twig.

Como este artículo es sobre Twig, dejaremos Phroute para el siguiente artículo.

En realidad es que no me gusta el motor de plantillas de Wolff, porque el motor de plantillas de Laravel, Blade, tiene una característica muy útil, que Twig tampoco tiene por defecto, por lo que hay que instalar una librería extra.

Usamos Composer para instalar Twig:

composer require twig/twig
composer require filhocodes/twig-stack-extension

Una vez instalado, crear el archivo index.php e incluir en él el autocargado de la librería (Twig) que hemos instalado por ahora, y decirle que vamos a usar dos componentes de la librería de Twig:

require './vendor/autoload.php';

use Twig\Loader\FilesystemLoader;
use Twig\Environment;

Y la forma de utilizar el motor de plantillas es crear esta función y usarla cada vez que la necesitemos, para componer una Vista:

function get_view($template_path, $array_data){
try {
    $loader = new FilesystemLoader('./templates');
    $twig = new Environment($loader, [
        #'cache' => './templates/cache',
        'cache' => false,
        'debug' => true,
    ]);
    Return $twig->render($template_path, $array_data);
} catch (Exception $e) {
    die ('ERROR: ' . $e->getMessage().'<br/>');
}
}

Un ejemplo de cómo se compone la Vista, en index.php, es rellenando los huecos de la plantilla con los datos que queramos:

$view = get_view('01_Pages/landing.html', [
     'autor'=>"Gordan N. Cajic"
    ,'titulo'=>"Muestrario"
    ,'descripcion'=>"No hay descripción por ahora."
]);

return $view;

Hacer que funcione lo de "apilar bloques" Stack con Twig Stack Extension

use FilhoCodes\TwigStackExtension\TwigStackExtension;

$twig->addExtension(new TwigStackExtension());

El parseador de Markdown:

composer require twig/markdown-extra
composer require twig/extra-bundle
composer require league/commonmark

$twig->addRuntimeLoader(new class implements RuntimeLoaderInterface {
public function load($class) {
    if (MarkdownRuntime::class === $class) {
        return new MarkdownRuntime(new DefaultMarkdown());
    }
}
});

$twig->addExtension(new MarkdownExtension());

Phroute Navegar por las rutas de tu sitio web nunca fue más sencillo.

Usamos Composer para instalar Phroute:

composer require phroute/phroute

Creamos una función para enrutar todo lo que se escribe en la barra de direcciones del navegador.

/*------------------------------------------------------------------------------
    Función para tener un ENRUTADOR de Peticiones y Respuestas HTTP:
------------------------------------------------------------------------------*/
function get_router(){
  try {
    $router = new RouteCollector();
    Return $router;
  } catch (Exception $e) {
    die ('ERROR: ' . $e->getMessage());
  }
}

Es decir, si usamos el servicio de Hosting de AlwaysData, nos registramos y accedemos a espacio gratis, tendremos un dominio que sea nuestro nombre de usuario + .alwaysdata.net, como por ejemplo https://ingordan.alwaysdata.net

Al escribir esa dirección en la barra de direcciones, el Hosting irá en busca del archivo index.php y el enrutador de Phroute leerá esa dirección para decidir qué hacer, como si fuese una pregunta.

Creamos una función para que el enrutador te lleve a una respuesta. Esa respuesta es elegir qué plantilla se va a usar, con qué datos se rellenará, y lo que mostrará es HTML en el navegador.

/*------------------------------------------------------------------------------
    Función para obtener una Respuesta a una Petición HTTP:
------------------------------------------------------------------------------*/
function get_response($router){
    # 1) La dirección que se ha escrito en la barra de direcciones del navegador:
    $php_self = $_SERVER['PHP_SELF'];
    # 2) ¿HTTP o HTTPS?
    $method = $_SERVER['REQUEST_METHOD'];
    # 3) La parte de la direción que no es la raíz del dominio:
    $request_uri = $_SERVER['REQUEST_URI'];

    $proyect_root = str_replace("index.php", "", $php_self);
    $where_am_i = str_replace($proyect_root, "/", $request_uri);

    $dispatcher = new Dispatcher($router->getData());
    try {
        $response = $dispatcher->dispatch($method, parse_url($where_am_i, PHP_URL_PATH));
        Return $response;
    } catch (Exception $e) {
        $response = $dispatcher->dispatch($method, parse_url('/404', PHP_URL_PATH));
        Return $response;
    }
}

La manera de estar estas dos funciones juntas, es llamarlas en index.php de la siguiente forma:

$router = get_router();
$response = get_response($router);

print $response;

Esto lo que hace es imprimir en pantalla HTML que tengamos preparado para ello.

Aunque nada de esto funcionará si no se crea un archivo .htaccess con estas líneas de código:

<IfModule mod_negotiation.c>
    Options -MultiViews -Indexes
</IfModule>

# Redirect to front controller
RewriteEngine On
# RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [QSA,L]

ErrorDocument 404 /404

Alpine.js Descubre cómo añadir reactividad a tu web y lo bien que se complementa con Twig.

Para usar Alpine.js con Bootstrap 5:

<section class="row justify-content-center" x-data="{ names: ['Strenght', 'Perception', 'Endurance', 'Charisma', 'Intelligence', 'Agility' , 'Luck'] }">
    <template x-for="(name, index) in names" :key="index">
        <div class="py-3 col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1" x-data="{ n: 0, min:0, max: 10 }">                    
            <label :for="name" x-text="name"></label>
            <div class="input-group input-group-vertical">          
                <button class="btn btn-outline-primary input-group-text" x-on:click="n++;if(n > max){n = max;}"><i class="bi bi-plus"></i></button>           
                <input x-bind:id="name" x-bind:name="name" type="number" :value="n" class="form-control text-end" x-bind:min="min" x-bind:max="max" x-bind:aria-label="name">
                <button class="btn btn-outline-danger input-group-text" x-on:click="n--;if(n < min){n = min;}"><i class="bi bi-dash"></i></button>
            </div>
        </div>
    </template>
</section>