7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

Uso de archivos htaccess para URL amigables

Scroll to top
Read Time: 13 mins

Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)

Continuando con nuestra revisión de archivos htaccess, hoy examinaremos cómo usar mod_rewrite para crear URL amigables.

Beneficios de las URL formateadas

Si bien algunos afirman que las URL amigables ayudan en el ranking de los motores de búsqueda, el debate aquí es intenso, todos podemos estar de acuerdo en que las URL amigables le facilitan las cosas a nuestros usuarios y le agregan un nivel de profesionalismo y perfección a cualquier aplicación web. Podría repasar todas las razones teóricas de esto, pero me gustan más los ejemplos del mundo real. Nos guste o no, todos debemos admitir que Twitter es una aplicación web tremendamente popular y que parte de la razón es sin duda la forma en que formatea las URL. Puedo decirle a cualquiera que sepa que mi nombre de usuario de Twitter es noahhendrix, y saben que mi perfil se puede encontrar fácilmente en twitter.com/noahhendrix. Este concepto aparentemente simple tiene grandes efectos en la popularidad de tu aplicación.

Sólo para poner las cosas en perspectiva podemos ver otro popular sitio web de redes sociales, Facebook. Desde el lanzamiento del sitio en 2004, el sistema de perfiles ha crecido y evolucionado para adaptarse mejor a los usuarios, pero un defecto importante fue la URL de un perfil. Desde el momento en que me registré en Facebook, mi perfil estaba en la URL http://www.facebook.com/profile.php?id=1304880680. Eso dice mucho, y recientemente parece que Facebook se dio cuenta de eso y lanzaron las URL personalizadas de Facebook. Ahora puedo compartir mi perfil de Facebook diciéndole a la gente que mi nombre de usuario de Facebook es "noahhendrix", por lo cual saben que se puede encontrar yendo a facebook.com/noahhendrix. Si bien es probable que no tengamos una aplicación tan popular como Facebook, aún podemos tomar prestadas algunas páginas de su libro.

Resumen rápido

Un resumen rápido antes de profundizar en el código, en el tutorial de hoy repasaremos dos métodos ligeramente diferentes para crear URL amigables usando HTACCESS. La diferencia entre los métodos es si Apache o PHP están haciendo el trabajo pesado para romper la URL para el análisis. Quiero señalar que los tutoriales mod_rewrite son casi tan antiguos como el Internet y este no es el primero. Al final, usaré uno de los métodos para crear una aplicación simple que muestre cómo se verían estas soluciones en un sitio web real (bueno, no con una calidad de producción del 100%). El servicio que crearemos es un acortador de URL que puede reflejar la funcionalidad de dichos sitios como bit.ly, TinyURL o su.pr. Así que sin más pelusa vamos a ver el código.

Usando Apache

En primer lugar, podemos colocar todo nuestro código en archivos Apache .htaccess. Esto podría verse así:

Comencemos desde arriba y trabajemos para entender mejor lo que está sucediendo aquí. La primera línea configura el entorno para seguir enlaces simbólicos utilizando la directiva Opciones. Esto puede ser necesario o no, pero algunos servidores web usan enlaces simbólicos (similar al alias en MacOSX o los accesos directos en Windows) para errores comunes de solicitud HTTP y estos suelen ser archivos con enlaces simbólicos, o al menos así es como entiendo el razonamiento. Luego le decimos a Apache que vamos a usar el motor de reescritura. Las siguientes dos líneas son muy, muy importantes, restringen la reescritura de URL solo a rutas que en realidad no existen. Esto evita que las siguientes reglas coincidan, por ejemplo, con example.com/images/logo.png. El primero evita los directorios existentes con la marca !-d y el segundo con !-f significa ignorar los archivos existentes.

Las siguientes tres líneas son los comandos de reescritura de URL reales. Cada línea crea una regla que intenta hacer coincidir un patrón de expresiones regulares con la URL entrante. Las expresiones regulares, al menos para mí, son un conjunto de reglas difíciles de recordar, pero siempre me resulta útil utilizar este tutorial del propio Jeffery Way de Nettut y la herramienta que recomienda. Me resultó fácil escribir las URL de muestra que queremos hacer coincidir y luego intentar hackear el patrón juntos.

El primer argumento es el patrón, entre el símbolo de intercalación y el signo de dólar. Le decimos a Apache que queremos URL que soliciten el directorio de usuarios (un directorio artificial, no tiene que existir) seguido de un / y cualquier longitud de números. Los paréntesis crean un grupo de captura, puedes usar tantos de estos como quieras, sirven como variables que luego podemos trasplantar a nuestra reescritura. El asterisco significa que el usuario puede ingresar lo que quiera, y no afectará la reescritura, esto es principalmente para manejar una barra diagonal, por lo que example.com/users/123 es lo mismo que example.com/users/123/ como los usuarios esperarían.

El segundo argumento es la ruta de acceso que queremos llamar realmente, esto a diferencia del primero debe ser un archivo real. Le decimos a Apache que busque en el directorio actual un archivo llamado profile.php y envíe el parámetro id=$1 junto con él. ¿Recuerdas el grupo de captura anterior? Ahí es donde obtenemos la variable $1, los grupos de captura comienzan en uno. Esto crea una dirección URL en el servidor como example.com/profile.php?id=123.

Este método es excelente para aplicaciones web heredadas que tienen estructuras de URL existentes que nos impiden reescribir fácilmente el backend para comprender un nuevo esquema de URL porque para el servidor la URL se ve igual, pero para el usuario se ve mucho mejor.

Usando PHP

Este siguiente método es ideal para aquellos que no quieren distribuir demasiada lógica a Apache y se sienten más cómodos en PHP (o lenguajes de scripting similares). El concepto aquí es capturar cualquier URL que reciba el servidor y enviarla a una página de controlador PHP. Esto viene con el beneficio adicional del control, pero una mayor complejidad al mismo tiempo. Tu archivo HTACCESS podría verse así:

Todo es igual que el anterior, excepto la última línea, así que iremos a ella. En lugar de crear un grupo de captura, simplemente le decimos a Apache que tome todas las URL y las redirija a index.php. Esto significa que podemos hacer todo nuestro manejo de URL en PHP sin depender demasiado de rutas de URL estrictas en HTACCESS. Esto es lo que podríamos hacer en la parte superior de nuestro archivo index.php para analizar la URL:

La primera línea no es necesaria a menos que tu aplicación no viva en el directorio raíz, como mis demostraciones. Estoy eliminando la parte sin sentido de la URL de la que no quiero que PHP se preocupe. $_SERVER['REQUEST_URI'] es una variable de servidor global que PHP proporciona y almacena la URL de la solicitud, generalmente se ve así:

Como puedes ver es básicamente todo después del nombre de dominio. Luego dividimos la parte restante de la ruta virtual y la dividimos por el carácter / esto nos permite tomar variables individuales. En mi ejemplo acabo de imprimir la matriz $params en el cuerpo, por supuesto que querrás hacer algo un poco más útil.

Una cosa que puedes hacer es tomar el primer elemento de la matriz $params e incluir un archivo con ese mismo nombre y dentro del archivo puedes usar el segundo elemento de la matriz para ejecutar algún código. Esto podría verse así:

ADVERTENCIA: ¡La primera parte de este código es increíblemente importante! Debes restringir absolutamente qué páginas puede obtener un usuario para que no tengan la oportunidad de imprimir cualquier página que quieran adivinando los nombres de los archivos, como un archivo de configuración de base de datos.

Ya que tenemos la plataforma improvisada alejada, continuemos. Después comprobamos si el archivo solicitado está en la matriz $safe_pages, y si está incluido, de lo contrario incluiremos una página 404 no encontrada. En la página incluida verás que tienes acceso a la matriz $params y puedes obtener los datos necesarios en tu aplicación.

Esto es ideal para aquellos que quieren un poco más de control y flexibilidad. Obviamente, requiere un poco de código adicional, por lo que probablemente sea mejor para proyectos nuevos que no requerirán que se actualice mucho código para adaptarse a los nuevos formatos de URL.

Un acortador de URL simple

Esta última parte del tutorial nos permitirá utilizar el código que mencionamos anteriormente, y es más o menos un ejemplo de la "vida real". Crearemos un servicio llamado shrtr, inventé este nombre para que cualquier otro producto con este nombre no esté asociado con el código que estoy publicando a continuación. Nota: Sé que este no es un concepto original, y solo está destinado a la demostración de mod_rewrite. Primero veamos la base de datos:

Como puedes ver, esto es muy sencillo, solo tenemos 4 columnas:

  • id: identificador único utilizado para hacer referencia a filas específicas
  • corto: cadena única de caracteres anexados al final de nuestra URL para determinar a dónde redirigir
  • url: la URL a la que redirige la URL corta
  • created_at: una marca de tiempo simple para que sepamos cuándo se creó esta URL

Lo básico

Luego, vamos a repasar los seis archivos que necesitamos crear para esta aplicación:

  • .htaccess: redirige todas las URL cortas a serve.php
  • create.php: valida la URL, crea un código corto, guarda en DB
  • css/style.css: contiene información básica de estilo
  • db_config.php: almacena variables para conexiones de base de datos
  • Index.php: La cara de nuestra aplicación con el formulario para ingresar URL
  • serve.php: busca una URL corta y redirige a la URL real

Eso es todo lo que necesitamos para nuestro ejemplo básico. No hablaré de index.php o css/style.css con gran detalle porque no tienen PHP, y son archivos estáticos.

Lo único realmente interesante a tener en cuenta aquí es que enviamos el formulario con un campo llamado URL a create.php.

Todo eso es muy genérico, pero hace que nuestra aplicación sea un poco más presentable.

El último archivo básico que tenemos que ver es nuestro db_config.php, lo creé para abstraer parte de la información de conexión de la base de datos.

Debes reemplazar los valores con lo que funciona en tu base de datos, y el host probablemente sea localhost, pero debes comprobarlo dos veces con tu proveedor de hospedaje para que estés seguro. Aquí está el volcado SQL de la tabla, url_redirects que contiene toda la información que mostramos arriba:

Creación de la URL corta

Luego, veamos el código necesario para crear nuestra URL corta.

¡Ahora nos estamos volviendo un poco más complejos! Primero tenemos que incluir las variables de conexión de la base de datos que creamos anteriormente, luego almacenamos el parámetro de URL enviado por el formulario de creación en una variable llamada $url. Después hacemos algo de magia con expresiones regulares para comprobar si realmente enviaron una URL, si no, almacenamos un error. Si el usuario ingresó una URL válida, creamos una conexión a la base de datos usando las variables de conexión que incluimos en la parte superior de la página. Luego, generamos una cadena aleatoria de 5 caracteres para guardar en la base de datos, utilizando la función substr. La cadena que dividimos es el hash md5 del tiempo() actual y la variable $url concatenados. Así que, insertamos ese valor en la tabla url_redirects junto con la dirección URL real y almacenamos una cadena para presentársela al usuario. Si no puede insertar los datos, almacenamos un error. Si se mueve hacia abajo en la parte HTML de la página todo lo que hacemos es imprimir el valor de $html, ya sea por error o por éxito. Esto obviamente no es la solución más elegante, pero funciona!

Servir la URL corta

Así que tenemos la URL en la base de datos, trabajemos en serve.php para que podamos traducir el código corto en una redirección.

Este es muy similar a create.php, incluimos la información de la base de datos y almacenamos el código corto que se nos envía en una variable llamada $short. Después, consultamos en la base de datos la dirección URL de ese código corto. Si obtenemos un resultado, redireccionamos a la URL, si no imprimimos un error como antes.

En lo que respecta a PHP, eso es todo lo que necesitamos hacer, pero en este momento para compartir una URL corta, los usuarios deben ingresar esto, http://shrtr.me/server.php?short=SHORT_CODE no es muy amigable, ¿verdad? Veamos si no podemos incorporar algún código mod_rewrite para hacerlo más agradable.

Pretty-ify con HTACCESS

De los dos métodos que escribí al principio del tutorial, usaremos el de Apache porque esta aplicación ya está creada sin tener en cuenta ningún análisis de URL. El código se verá así:

Saltando a RewriteRule, estamos dirigiendo cualquier tráfico que aún no tenga un archivo o directorio real para serve.php y colocando la extensión en la variable corta GET. ¡No está mal, no lo pruebes tú mismo!

Conclusión

Hoy aprendimos algunas formas diferentes de utilizar mod_rewrite en nuestra aplicación para hacer que nuestras URL sean amigables. Como siempre, si alguien tiene problemas estaré pendiente de los comentarios, o puedes contactarme en Twitter. ¡Gracias por leer!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.