En contra de lo que piensa el común de los mortales, es posible disponer de un sitio web con acceso a datos sin necesidad de utilizar ni una sola base de datos y ni una sola línea de código PHP o ASP. Es muy común descubrir foros de noticias donde los novatos preguntan cómo pueden acceder a una serie de datos almacenados sin necesidad de crear una web con código del lado del servidor, generando un acceso desde el propio navegador del lado del cliente. Y también es muy común encontrar las respuestas de «los entendidos» comentando que eso es imposible y que, si lo fuera, sería muy peligroso.  

Bueno, pues peligroso no sé, pero posible sí que es, y también muy sencillo. Sólo necesitamos un archivo de texto plano y unas cuantas sentencias en Javascript. ¿Empezamos?  

Si precisamos tener una web que almacene una gran cantidad de datos, como usuarios y contraseñas, artículos de una tienda, documentos o información de clientes y proveedores, se intuye necesario el camino más largo, esto es, un sitio con código de acceso a datos del lado del servidor (ASP, PHP…) y un gestor de bases de datos al uso (SQL Server, MySQL…). Sin embargo, en muchas ocasiones solamente es necesario mantener unos pocos datos que se actualizan a mano cada cierto tiempo, por ejemplo un listado de licitaciones abiertas de un ayuntamiento o una serie de ofertas de trabajo de una empresa.  

Cualquiera puede pensar que, en alguno de esos casos, la opción menos costosa sería la de modificar manualmente los archivos HTML cuando proceda y listo. Sin embargo, si la persona que tiene que realizar dichas modificaciones no es experta en diseño web (la secretaria del ayuntamiento, con respecto al ejemplo de las licitaciones, o la de la empresa, en el supuesto de las ofertas de trabajo) es más que probable que no sepa editar los documentos o que, si lo hace, los estropee para los restos.  

Para estas situaciones, o similares, existe un pequeño truco del que podemos hacer uso. El sistema consiste en pasar datos a un HTML como si de variables Javascript se tratara, enlazándolas desde un TXT externo. Veamos primero el archivo de texto y el HTML con Javascript para, después, pasar a comentarlos.  

  
  
Como podemos observar, el archivo de texto es muy sencillo, ya que sólo guarda una serie de constantes (Registro1, Registro2, Registro3, Registro4 y Enlace) con un valor alfanumérico asignado. Estas constantes las importamos desde el HTML como si de un archivo fuente de Javascript se tratase, concretamente en la línea <script src="datos.txt"></script>. De esta manera, el navegador adquiere el código externo para ser utilizado en la página actual, sólo que en este caso el código se compone exclusivamente de constantes y datos.  

Posteriormente se genera una función cargarDatos() (se inicia en el body onload) que lo que hace es asignar la información importada a cada etiqueta HTML identificada por su id, mediante la función document.getElementById. Hay que tener en cuenta el tipo de etiqueta que se quiere rellenar y sus peculiaridades particulares. Así pues, en el caso de los <td> (celdas regulares) se utiliza la propiedad innerText, y en el <a> (hipervínculo) se usa href para referirse al atributo que permite especificar el destino del enlace.  

Como vemos, es una técnica muy sencilla y altamente rentable, pues para pequeños conjuntos de información no sería necesario contratar alojamientos web de altas prestaciones en cuanto a acceso a datos se refiere. Además, lo único que debería aprender a manejar la persona al cargo es un software de FTP para poder subir el archivo TXT modificado cuando fuera necesario.  

Por supuesto que es un ejemplo muy sencillo, pero se puede complicar hasta el infinito. Imaginemos que deseamos ir añadiendo filas a la tabla dependiendo del número de registros, algo muy lógico; no siempre tienen por qué ser cuatro. El siguiente archivo de texto muestra un ejemplo de este caso.  

  
Veamos ahora cómo quedaría el código Javascript donde se define la función cargarDatos() en nuestro HTML.  

  
Podemos observar que ha cambiado sustancialmente. Ahora necesitamos un bucle (for) que recorra todos registros (variable Registros en el TXT) de uno en uno y vaya asignando valores a las etiquetas. En este caso hacemos uso de dos variables (Elemento1 y Elemento2) que nos sirven para generar los nombres de las etiquetas HTML para después pasárselas a la función getElementById. Además, por simplificar, hemos utilizado el mismo nombre de las etiquetas HTML para las constantes y deberemos evaluarlas con la función eval antes de asignarlas, porque si no Javascript no se entera al ser una cadena creada a mano mediante la concatenación de un texto y el valor del contador i.  

A continuación vemos el código Javascript para dibujar la tabla dependiendo del número de registros.  

  
Lo que hacemos simplemente es recorrer todos los registros e ir añadiendo filas y celdas con sus correspondientes etiquetas id. Al final de cada bucle se agrega una celda vacía (con un espacio) para separar un poco cada grupo.  

Evidentemente, el usuario deberá actualizar manualmente, además de los registros propiamente dichos, la constante que define el total de registros para que funcione todo bien. También habrá de preocuparse por escribir correlativamente los nombres de las constantes y no cometer ningún otro error en la generación del archivo.  

Lo que habíamos dicho al principio, si es un número reducido de registros de datos, y estos no se actualizan frecuentemente, nos puede ser de mucha utilidad el uso de esta técnica (hay que tener en cuenta que cada variable o constante es un espacio en memoria que ocupa sitio); para soluciones más complejas se nos queda corta. ¡Hala, a programar se ha dicho!

9 comentarios a “Web con acceso a datos sólo con Javascript y un TXT”