Reutilizar HTML con PHP

A lo largo de este libro, una cosa molesta a la que hemos tenido que enfrentarnos es actualizar el menú de navegación en cada página cada vez que cambiamos algo en el menú. Imagínese si no tuviéramos que hacer eso y, en cambio, pudiéramos mantener nuestro menú de navegación en un solo lugar, en un archivo, y hacer que aparezca mágicamente en cada página.

Eso es lo que haremos en este capítulo extra con la ayuda de PHP. PHP son las siglas de PHP: Hypertext Preprocessor. Sí, es un acrónimo recursivo, porque el acrónimo es parte del nombre, lo que es bastante friki. Pero en la época en la que se creó, eran las iniciales de Personal Home Page o Página de Inicio Personal, ya que inicialmente ese fue su uso.

PHP es un lenguaje de programación presente en la mayoría de la web, principalmente porque el gestor de contenido, WordPress, fue creado con ello. PHP es un lenguaje de programación completo, lo que significa que puede hacer casi cualquier cosa. Hypertext preprocessor o preprocesador de hipertexto, es una buena descripción de lo que hace.

Cuando visita un sitio web estático, como los que hemos hecho en este libro, el servidor le ofrece el archivo HTML que pidió mediante la URL. Cuando visita un sitio web impulsado con PHP, un script de PHP se está ejecutando en el servidor, que devolverá (normalmente) algún código HTML al navegador. Así que en ambos casos, usted obtiene su HTML de vuelta. entonces ¿cual es la diferencia?

El sitio con PHP puede generar de manera dinámica HTML basándose en la URL y otros datos del navegador que ha hecho la petición. Por ejemplo, podría tener un sitio donde el usuario tuviera un perfil en example.com/user/victorhck. Con HTML en texto plano, necesitaría crear ese archivo para cada usuario. Sin embargo, con PHP, podría generar la página sobre la marcha leyendo el nombre de usuario en la URL y construyendo al HTML apropiado para enviarlo de vuelta.

PHP también le permite implementar funciones web más complicadas, como aceptar datos de usuario y guardarlos en una base de datos. Estos pueden ser tan simples como mostrar un contador de visitas dinámico o tan sofisticados como una red social.

Si eso le parece complicado, no se preocupe. No profundizaremos en la construcción de un montón de HTML con PHP. Veremos una función particular de PHP que es útil para nuestros propósitos: la declaración include.

Cómo ejecutar PHP

Neocities, el servicio que hemos estado utilizando para alojar nuestro sitio web personal, no permite ejecutar PHP. Esto es lo mejor, ya que no encaja con el espíritu de Neocities y complicaría un servicio agradable y sencillo. Afortunadamente, hay un montón de servicios asequibles que ofrecen PHP.

Recomiendo lo que se llama alojamiento compartido. En pocas palabras, esto generalmente significa que el servicio administrará sus servidores y le dará a usted, el cliente, una carpeta en el servidor donde puede cargar sus archivos (y generalmente incluir acceso a varios servicios).

La mayoría de los hosts compartidos ofrecen los mismos servicios, pero estos son algunos de los que la gente recomendó cuando pregunté en Mastodon.

Y luego está NearlyFreeSpeech.NET, el servicio de hospedaje web que he estado utilizando durante años. No se puede decir que sea muy amigable para alguien recién llegado, pero la interfaz es de lo más simple, y no hay anuncios molestos o ventas adicionales.

Una vez que tenga una cuenta en uno de estos (o algún otro) proveedor de alojamiento web, debería poder cargar archivos directamente a través de su sitio web o conectándose a su servidor mediante FTP.

Los detalles de eso se escapan del alcance de este libro, pero hay toneladas de recursos sobre cómo ponerse en marcha con un servidor web compartido. Unas cuantas búsquedas en la web deberían ponerle en el camino correcto.

Lo bueno de PHP es que es fácil de iniciar. Simplemente tome una de las páginas de su sitio web y cambie la extensión del archivo de .html a .php. Acaba de crear un archivo PHP perfectamente válido, sin necesidad de realizar cambios.

Haciendo una página web dinámica

Si todo lo que hace es cambiar la extensión del archivo, todo permanecerá igual para el visitante. Recibirán el HTML igual que antes. Pero ahora que tiene un archivo PHP, puede poner código dinámico en su página web insertándolo en etiquetas PHP.

Por ejemplo, aquí hay una página web que mostrará el año actual.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Mi sitio web</title>
        <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">
    </head>
    <body>
        <h1>Mi sitio web</h1>

        <p>El año actual es: <?php echo date('Y') ?></p>
    </body>
</html>

Incluso si nunca vuelve a editar este archivo, siempre estará actualizado (siempre que el servidor lo esté) porque PHP inserta el año en el código HTML cuando se lo solicita la página.

Analicemos la parte dinámica de esto. En primer lugar, el código PHP se escribe entre las etiquetas PHP (<?php y ?>).

El código PHP dentro de estas etiquetas se ejecuta en el servidor antes de que el HTML se envíe al navegador. La instrucción echo es la forma en que le hace saber a PHP que quiere que genere algo en la página. La función date devuelve la fecha actual, en este caso, le estamos diciendo que únicamente queremos el año.

Así, la función date se ejecuta, devolviendo el dato del año actual. Esa parte del texto es entonces procesada por la instrucción echo, y esta será insertada dentro del documento HTML.

El código PHP real no se devuelve al navegador y sus visitantes nunca lo verán. En su lugar, aparecerá como HTML normal, con el año actual como si lo hubiera escrito usted.

Reutilizar parte de su sitio web

Una cosa que hace que PHP sea increíblemente útil es su capacidad para reutilizar partes de HTML en múltiples lugares.

Considere el sitio web que hemos estado construyendo a lo largo de este libro. Tiene la barra de navegación en todas las páginas (excepto el atributo aria-current, que cambiará dependiendo de la página en la que se encuentre).

<nav>
  <a href="/index.html" aria-current="page">Inicio</a>

  <a href="/blog/">Blog</a>

  <a href="/about.html">Acerca de</a>

  <a href="/resume.html">Currículum</a>

  <a href="/fun.html">¡Diversión!</a>
</nav>

Debemos de mantener el menú de navegación (“nav”) en cada página. No es algo muy difícil en sitios web pequeños con unas pocas páginas. Pero imagine si tiene docenas de páginas en su sitio web. Si decide modificar algo en su menú de navegación, necesitaría ir a cada una de las páginas y hacer el mismo cambio en cada sección que quiera modificar. Con PHP, podemos reutilizar el código de nuestro menú de navegación.

Primero, crearemos un archivo llamado nav.php. Puede ubicarlo en cualquier parte de su proyecto, pero yo lo pondré en una carpeta llamada includes simplemente para tenerlo todo organizado.

Copie el menú de navegación de su página de inicio (index.html) y pegue su contenido en el archivo nav.php. Elimine el atributo aria-current="page" por ahora, también necesitaremos hacer esa parte dinámica más adelante.

Debería tener un archivo nav.php que tenga un aspecto como este:

<nav>
  <a href="/">Inicio</a>
  <a href="/blog">Blog</a>
  <a href="/about.php">Acerca de</a>
  <a href="/resume.php">Currículum</a>
  <a href="/fun.php">¡Diversión!</a>
</nav>

Lo anterior no es solo un extracto. Esto es el contenido entero de nav.php. A diferencia de otros archivos HTML, que necesitan secciones como <head>, <body>, etc. Los archivos PHP pueden contener un fragmento de HTML.

Ahora, vamos a utilizar ese archivo recién creado. Renombre el archivo index.html a index.php. Elimine el código completo del bloque <nav> y reemplácelo con la siguiente línea de PHP.

<header>
    <?php include "includes/nav.php" ?>

    <h1>La web de Victorhck</h1>
</header>

Cuando cargue la página, las cosas deberían seguir teniendo el mismo aspecto que tenían antes. Debería seguir viendo su menú de navegación. Pero la magia es que ahora está utilizando su versión en PHP. Ahora, ya puede comenzar a convertir el resto de las páginas reemplazando el menú existente por el código en PHP que llama a al achivo que hemos creado.

Convertir páginas HTML a PHP

Generalmente los pasos a seguir son los mismos para cada página:

  1. Cambiar la extensión del archivo de .html a .php.
  2. Reemplazar el código de la etiqueta <nav> con el de PHP incluida la llamada.

Para las páginas del nivel más alto, la llamada de PHP sería así:

<?php include "includes/nav.php" ?>

Si está editando una subpágina (como la del blog), debería ajustar la ruta de la llamada utilizando .. para subir un nivel y situarse en la ruta donde está archivo.

<?php include "../includes/nav.php" ?>

Una vez que lo realice en cada página, habrá reutilizado el menú de navegación. Si desea actualizar el menú en el futuro modificando una sección, simplemente lo hará editando el archivo nav.php. y verá que los cambios se realizan en todos los sitios que se reutilice esa llamada al código modificado.

Podría realizar lo mismo para otras partes que tengan elementos que se repitan en su sitio web. Por ejemplo, la mayoría de l sección <head> de la página web es la misma en cada página. El pie de página también debería ser el mismo en cada página. Y muchas otras partes.

Cuando hemos mudado nuestro menú de navegación de PHP, hemos perdido algo. Anteriormente, establecíamos el atributo aria-current en el enlace apropiado del menú de navegación para indicar qué página es la actual en el menú de navegación. Esto es bueno para la accesibilidad y añade algunas pistas visuales para aquellas personas que la visitan. Pero ¿cómo establecemos cual es la página actual si la navegación se hace únicamente desde un archivo? ¿Cómo sabemos qué página de la lista es la actual?

Considere esta sección un extra de este capítulo extra (sí, un extra, dentro de otro extra). Aquí echaré mano de algunos conceptos de programación. Solo trataré de ellos por encima, ya que programar en PHP es una materia extensa por lo que está fuera del objetivo de este libro que va orientado a principiantes. Dicho esto, con un poco de código (que puedes reutilizar en tu página), puede implementar el aria-current automágicamente.

Primero, vamos a recapitular lo que significa este atributo. Si un visitante va a la página de Acerca de, queremos que el enlace en el menú de navegación indique que estamos en la página actual (o que un lector de pantalla lo lea si el visitante utiliza uno). Utilizaremos el atributo aria-current="page" en ese caso.

También puede darse otro escenario. Si alguien visita un artículo del blog, nos gustaría resaltar el enlace del Blog en el menú de navegación. No es exactamente la página actual, no están en la página de listado del blog, donde apunta el enlace, sino más bien una publicación de blog individual. Aún así, sería bueno resaltar el enlace del blog porque representa la sección actual del sitio: la publicación es una subpágina del blog. En ese caso, podríamos usar aria-current="true". Esto es menos específico y más correcto semánticamente.

Genial, pero ¿cómo podemos añadir esto en PHP?

Hay muchas maneras de hacer esto, y ninguna de ellas es necesariamente más correcta que otra, pero esta es la que creo que es la forma menos complicada de hacerlo.

Esta técnica requerirá que llamemos a una función en cada elemento del menú de navegación. Sería algo como esto:

<nav>
    <a href="/" <?php aria_current('/') ?>>Inicio</a>
    
    <a href="/blog" <?php aria_current('/blog') ?>>Blog</a>
    <a href="/about.php" <?php aria_current('/about.php') ?>>Acerca de</a>
    <a href="/resume.php" <?php aria_current('/resume.php') ?>>Currículum</a>
    <a href="/fun.php" <?php aria_current('/fun.php') ?>>¡Diversión!</a>
</nav>

Necesitaremos una función personalizada llamada aria_current (En breve verá el código de dicha función). La función debería recibir un argumento, que debería ser el texto de href. Será entonces trabajo de la función comparar ese texto con la URL visitada y determinr si debería mostrar, utilizando echo, el atributo aria-current.

Puede poner la función en el mismo archivo PHP encima del código HTML que teníamos.

<?php
function aria_current($url) {
    // Si $url conincide exactamente con la URL actual, devolverá 'aria-current="page"'.
    if ($_SERVER['REQUEST_URI'] === $url) {
        echo 'aria-current="page"';
        return;
    }

    // En otro caso podría ser una subpágina, así que comprueba si la URL contiene
    // $url. Si lo tiene, devuelve 'aria-current="true"' para indicar que el enlace
    // es pariente de la página actual. Ignorar una única barra inclinada.
    if ($url !== '/' && strpos($_SERVER['REQUEST_URI'], $url) !== false) {
        echo 'aria-current="true"';
        return;
    }
}
?>

<nav>
    <a href="/" <?php aria_current('/') ?>>Home</a>
    <a href="/blog" <?php aria_current('/blog') ?>>Blog</a>
    <a href="/about.php" <?php aria_current('/about.php') ?>>About</a>
    <a href="/resume.php" <?php aria_current('/resume.php') ?>>Resume</a>
    <a href="/fun.php" <?php aria_current('/fun.php') ?>>Fun!</a>
</nav>

Genial, vamos a diseccionar el código. Primero, necesitamos abrir un par de etiquetas PHP. Dentro, definiremos una función llamada aria_current con un argumento: una variable llamada $url.

Puede ver dónde añadí notas llamadas comentarios. Cada línea que comienza con dos barras inclinadas (//) es considerada un comentario e ignorada, sólo es útil para las personas que ven el código.

La primera parte del código es un estamento if. PHP tiene variables globales llamadas $_SERVER con toda clase de información, incluyendo qué página está siendo visitada actualmente (lo que llama REQUEST_URI). Así que almacenamos y comprobamos si coincide con la URL del elemento del menú de navegación dado (recuerda, estamos ejecutando esta función para cada elemento del menú de navegación). Si lo es, enviaremos aria-current="page" utilizando la instrucción echo. En ese caso, la salida aparecerá en el punto donde llamamos a la función (que está dentro de la etiqueta <a>, donde van los atributos). Después de la instrucción echo, utilizamos return para parar la función y ya está.

Si la primera comprobación no es cierta, hay una segunda comprobación que queremmos intentar. ¿Es la página actual que estamos visitando una subpágina de un elemento de la barra de navegación?

Esta comprobación tiene dos partes:

  1. Primero, queremos ignorar la página de inicio (/) porque, esa obviamente no es una subpágina de nada.
  2. Segundo, comprobaremos la URL que hemos pasado a la función con la URL visitada para ver si tienen una coincidencia.

La segunda parte del test utiliza una función llamada strpos. Esta recibe dos argumentos. El primero es una porción de texto en el que quieres buscar (le llamaremos pajar). La segunda es un fragmento de texto que está usted buscando (le llamaremos aguja). La función devolverá la posición de la aguja en el pajar si la encuentra. Devolverá false si no encentra nada en absoluto.

Así que, de nuevo, vamos a ver la variable global propia $_SERVER['REQUEST_URI']. Puede imaginar que siendo algo así como /blog/my-first-post. Sabemos que el visitante está en una subpágina del blog si encontramos /blog dentro de la ruta.

El test se pasará en este caso, y devolveremos aria-current="true" utilizando la instrucción echo.

Si los dos test fallan, entonces no devolveremos nada.

En resumen, cuando un visitante carga una página en nuestro sitio web, ejecutamos una función en cada elemento de navegación. Si el href del elemento del menú de navegación coincide con la URL actual o se encuentra en algún lugar de la URL actual, generamos el atributo aria-current apropiado. De lo contrario, no generamos nada.

¡Ufff! Si nunca antes no ha hecho ninguna programación, puede darse una palmadita en la espalda porque ahora lo ha hecho. Si encuentra este tipo de cosas divertidas, puede explorar más de PHP o echar un vistazo a JavaScript.

Conclusión

Las plantillas de PHP con include son una excelente manera de crear HTML sin repetir código. PHP tiene una curva de aprendizaje más baja que otros lenguajes de programación, que es una de las razones por las que lo menciono en este libro para principiantes. Sin embargo, los sitios web se pueden crear con todo tipo de lenguajes de programación (JavaScript, Python y Ruby son otras opciones populares). Este es el mundo de los sitios web dinámicos. Se vuelve bastante salvaje si comienza a pensar en todo lo que puede hacer con él.

Y con esta última lección, ahora ya sí, doy por terminado este último capítulo extra de HTML para personas. Espero que le haya resultado interesante todo lo que hemos repasado y haya aprendido los conceptos básicos para empezar a crear páginas web y le de pie a explorar más este campo. ¡Muchas gracias por leer!

Saltar al menú