Hoy vengo a presentar un sistema que recién he terminado de programar. Se trata de un software open source escrito en PHP con MySQL y Bootstrap, mismo que es un acortador de enlaces similar a los acortadores como bit.ly.

En este caso este programa se encarga de acortar enlaces, redireccionar a los usuarios y registrar cuando se hace clic. Aunque su funcionamiento está inspirado en los acortadores de enlaces, no tiene todas las funciones idénticas.

Este software gratuito que he creado con PHP tiene las siguientes características:

1. Login y gestión de usuarios
2. Creación de enlaces
   1. Enlaces sin redireccionamiento instantáneo: en este caso, antes de redireccionar al usuario, se presenta una plantilla en donde se puede poner publicidad, avisos, redes sociales etcétera.
   2. Links con redireccionamiento instantáneo: simplemente redireccionan al usuario de manera transparente, registrando el clic o visita.
3. Reporte general de clics en rango de fecha, con gráfica y descripción de los enlaces más populares

Como siempre te digo, este software se puede personalizar, tomar como base, etcétera. Por cierto, hace un tiempo hice un software parecido pero ese acorta enlaces para ganar dinero, usando a su vez acortadores como ouo, adfly, etcétera.

Base de datos

Comencemos viendo la estructura de la base de datos y la conexión a la misma. Utilicé la función para conectar usando PDO. Todo está en una clase, así se separan los conceptos:

Las credenciales de acceso son tomadas de un archivo de entorno, en donde se debe configurar la contraseña, usuario y nombre de la base de datos. También es un buen momento para presentar la clase de Útiles:

Y finalmente las tablas del sistema. Básicamente son 3 tablas:

1. Enlaces: aquí se gestionan todos los links que se acortan en el sistema, se guarda el enlace al que redirecciona, el título, si es o no redireccionado instantáneamente y un hash único y aleatorio
2. Usuarios: los usuarios, solo se guarda el correo y la contraseña. Obviamente la contraseña está hasheada con bcrypt pero antes se hace que sea de longitud fija con sha256.
3. Estadísticas de enlaces: fecha en la que se hizo clic en un enlace, y el id del mismo. Aquí también se podría guardar la IP del usuario, el navegador, el enlace del que vienen, etcétera; pero lo dejé así por simplicidad.

El esquema queda así:

El script en este caso ya lleva un usuario por defecto para que pueda iniciar sesión, más adelante puedes entrar y cambiarle la contraseña (de este modo tendrás un usuario por defecto).

Login y gestión de usuarios

Para acceder a todas las funciones del sistema se usa la sesión y un login simple. El login se ve así:

Toda la gestión de usuarios se lleva a cabo dentro de la siguiente clase, tanto para crear un usuario, obtenerlos y autenticarlos:

Esta clase es usada desde otros archivos, simplemente se invocan a los métodos necesarios.

También veamos cómo se hashean las contraseñas:

Fíjate en que estamos usando SHA-256 pero no como método de encriptación, sino como método para acortar las contraseñas.

Es decir, así el usuario podría tener una contraseña sin límite de longitud, ya que al final se va a encriptar el hash de sha 256, sin representar ningún riesgo de seguridad pues al final se guarda lo que genera bcrypt.

Gestión de enlaces

En los enlaces podemos buscar ya sea por título o por el enlace al que se redirecciona. También podemos ver las estadísticas por enlace, abrirlo en una nueva pestaña, copiar el enlace acortado, editarlo o eliminarlo.

Por cierto, para eliminar se muestra una alerta con Sweet Alert 2.

Código para administración de enlaces

Como lo dije, este sistema escrito en PHP tiene como principal objetivo generar un hash de un enlace y usarlo más tarde. Básicamente genera un enlace ya acortado que puedes compartir, y cuando el usuario hace clic en él, se redirecciona y se va registra el clic.

Veamos primero la clase que se encarga de todo ello:

Se cuentan con varios métodos para agregar un enlace, actualizarlo, obtenerlos, etcétera. Algo interesante es la manera en la que se genera el hash, veamos la función getRandomString que regresa una cadena aleatoria conformada de números y letras minúsculas o mayúsculas.

También es importante la función getUniqueHash que obtiene un hash único haciendo un ciclo do while que verifica que el hash no exista en la base de datos, usando también a su vez la función hashExists que devuelve un booleano indicando si determinado hash ya existe.

La longitud del hash es de 6, si lo cambias, asegúrate de cambiar la expresión regular del RewriteRule en el archivo .htaccess.

Por cierto, para que los enlaces sean lo más cortos posibles he usando el archivo de configuración de Apache para redireccionar a link.php pasando el hash en caso de que se cumpla con la expresión regular:

Si no entiendes mucho de lo que hablo, no te preocupes, ya hice un post explicando RewriteRule justamente para este ejemplo.

Lado del cliente

Por cierto, en el lado del cliente he usado Vue.js para gestionar todos los enlaces. El código queda así:

Redireccionar

La parte más importante del sistema es la de redireccionar. Primero lo hice simple del lado del servidor, pero varios bots que generan una previsualización (como el de Telegram, Twitter, Facebook) marcaban un clic, cosa que es errónea.

Así que mejor lo hice del lado del cliente. Yo sé que el scrapper de Google incorpora JavaScript y espera a que la página esté renderizada, pero en este caso una simple previsualización no desencadena el registro del clic.

En caso de que el redireccionamiento sea instantáneo, simplemente se registra la visita en el archivo track_link.php usando fetch, y una vez que se ha hecho, se redirecciona cambiando window.location.href.

En caso de que no, entonces se incluye la plantilla de redireccionamiento en donde es responsabilidad del programador implementar el trackeo del clic y el redireccionamiento. En mi caso se ve así:

Puedes usar la plantilla que te presento o usar tus propios métodos. También puedes marcar siempre el link como instantáneo, de este modo no tienes que modificar la plantilla.

Estadísticas generales

En las estadísticas generales vemos los clics generados por fecha, en una gráfica de línea. Además, podemos cambiar el rango de las fechas para ver la gráfica a lo largo de ese período.

Por defecto se muestra la fecha de inicio y fin del mes actual, pero puede cambiarse manualmente. También vemos los enlaces con más clics en el período actual, y enlaces con más clics en todo el tiempo.

Ahora veamos el código que hace posible esto. Primero desde el lado del servidor, mismo que se encarga de registrar la visita o clic, así como de regresar las estadísticas:

Básicamente toda la magia la hacen las consultas SQL, los WHERE, GROUP BY, etcétera. Y ya del lado del cliente usamos Vue.js así como chart.js para la gráfica, combinando ambas tecnologías para refrescar tan pronto se seleccione otra fecha, usando AJAX:

Presta atención a la función getStatisticsBySelectedRange que consulta las estadísticas y luego usa map para generar tanto los labels como la data que más tarde pasa a refreshChart para refrescar la gráfica.

También existen las estadísticas por enlace, pero eso ya no lo explicaré aquí porque el post se haría muy largo y el funcionamiento es similar al de las estadísticas generales.

Instalación del sistema

Primero se debe clonar o descargar el código, mismo que está en un repositorio desde este enlace. Aunque el sistema no tiene dependencias externas, es necesario generar el autoload y vendor usando composer:

composer install

Más tarde se debe proceder a crear el usuario y base de datos; darle permisos, etcétera. Luego importar schema.sql, ya sea desde phpmyadmin o con:

mysql -u usuario -p nombre_base_de_datos < schema.sql

Finalmente hay que crear el archivo env.php basado en el archivo env.example.php y configurar las credenciales de acceso a la base de datos.

Poniendo todo junto

No he explicado todo el código, pero sí lo más básico. Recuerda que eres libre de descargarlo y explorarlo en GitHub. También puedes ver cómo se ve una redirección en el siguiente enlace: https://parzibyte.me/l/fTF8Ng

Básicamente estoy usando el redireccionador para redireccionar al código fuente de sí mismo. Aquí dejo un vídeo de YT por si algo no te quedó claro:

Te invito a leer más sobre PHP o a ver más software open source creado por mí.