URLs estáticas y agradables para cualquier aplicación web

La idea de este artículo es mostrar un sencillo ejemplo de cómo hacer que los links de nuestras aplicaciones web sean “bonitos”, algo así como los que podemos utilizar con WordPress. De tal manera no tendríamos links como estos:

http://www.sitio.com/index.php?accion=consultar&objetivo=personas

Sino algo estéticamente más agradable como:

http://www.sitio.com/personas/

¿Qué necesito?

Es necesario tener en cuenta los prerrequisitos para poder hacer esto. Para este ejemplo voy a suponer que la aplicación la estás haciendo sobre el servidor Apache, y que estás programando en PHP+MySQL. Necesitas:

  • Manejar la mayor parte del trabajo con el archivo index.php. Esto más que un requisito es un consejo. Cuando estés desarrollando aplicaciones en PHP es recomendable que la mayor parte del sistema tenga que ser procesado inicialmente por este archivo, el cual se encargará de manejar todas las peticiones y utilizar los módulos que se necesiten. Esto, por supuesto, NO quiere decir que TODO el código vaya dentro del archivo index.php; una buena práctica es separar el código en módulos y llamarlos con funciones como include o require.
  • Es necesario tener instalado el mod_rewrite, el cual se utilizará desde un archivo .htaccess. El ModRewrite es un módulo para Apache que por lo general se configura (definir reglas) en el archivo httpd.conf, pero es posible poner una configuración ModRewrite en cualquier directorio de nuestro servidor web dentro del archivo .htaccess.
  • Puesto que de acuerdo al string que pasemos en la URL se debe determinar qué hacer, es necesario hacer algo de esto:
    • Hacer que dentro de la base de datos la llave primaria de la tabla a consultar sea una cadena de texto, ó
    • Hacer otro campo en la tabla de MySQL aparte de la llave primaria

Ejemplo

Para nuestro ejemplo necesitamos un servidor Apache con ModRewrite, PHP y MySQL. Lo primero es crear la base de datos, así:

Continuar leyendo «URLs estáticas y agradables para cualquier aplicación web»

mod_rewrite: Guía Básica para reescribir URLs

Hoy en día la posición en los buscadores es un factor importante en el éxito de un sitio web. También se sabe que a los buscadores no le atraen mucho los sitios dinámicos, es decir, aquellos que cambian su contenido dependiendo de diversos factores.

Por ejemplo, la mayoria de foros están en PHP por lo que los urls para navegar el foro son parecidos a esto:

http://tusitio.com/foro/viewforum.php?f=3

Y aunque los bots de los buscadores lo pueden leer e indexar en su base de datos, si ponen un penalti por ser un url dinámico. Para solucionar esto, si eres un visitante o un robot, el url que verás será:

http://tusitio.com/foro/forum-3.html

Si pruebas ambos urls verás que muestra el mismo contenido. Podrás pensar que son dos páginas distintas, pero no es así, el segundo url, el que simula una página estática, es convertido detrás de las cortinas para llamar a la página real. Así es, en mi servidor no existe un archivo forum-3.html.

En este artículo les voy a mostrar como lograr esto.

Una solución elegante

Quizá estarán pensando que todo esto es un producto de magia, pero realmente es bastante sencillo lograrlo y los resultados serán muy buenos, pues no solamente podrán dar urls estáticos a los buscadores mejorando su posición, sino que también podrán dar urls amigables a sus usuarios.

Para poder lograr esto es necesario tener lo siguiente:

* Un servidor Apache versión 1.2 o mejor.
* Acceso para editar los archivos de configuración .htaccess, y quizá de ser necesario el http.conf.

Si están acostumbrados a usar servidores Apache, lo más seguro es que en algún momento hayan escuchado acerca del módulo mod_rewrite de Apache. Normalmente este módulo viene por default en las distribuciones de Apache pero en sistemas *nix puede que haya sido compilado sin este módulo.

Para poder usar este módulo primero lo tenemos que activar. En caso de que no tengas el módulo activado tendrás que editar tu archivo http.conf y quitar el comentario de la línea que carga el módulo para que quede de la siguiente manera:

#LoadModule rewrite_module
modules/mod_rewrite.so
#AddModule mod_rewrite.c

Comprendiendo mod_rewrite

Es importante comprender lo que hace exactamente este módulo.

El mod_rewrite se ejecuta después de hacer un request en tu servidor y antes de ejecutar cualquier script. Lo que hace es que aplica un «filtro» configurado por uno sobres los urls y los rescribe detrás de las cortinas.

Por ejemplo, podrías tener un url inexistente como el siguiente:

http://www.tusitio.com/algo

Y entonces el mod_rewrite lo podría convertir a:

http://www.tusitio.com/cgi-bin/dir/aplicacion.cgi?categoria=algo

La conversión del url se hace por detrás por lo que el usuario no podrá ver nada de esto, sin embargo si verá el resultado que viene de la ejecución del url «real».

Es importante comprender que mod_rewrite NO puede ser usado para cambiar el URL que el usuario ve es la barra de Dirección de su navegador a menos que una redirección externa es invocada. Sin embargo una dirección externa expone finalmente el url dinámico, así que mod_rewrite hace una redirección interna.

También es importante comprender que mod_rewrite cambia la dirección del archivo y las variables del url pedido pero NO cambia en ningún momento el despliegue de las mismas.

Poniendo mod_rewrite en práctica

Muy bien, empecemos con lo bueno, para esto vamos a hacer un ejemplo práctico.

Digamos que tienes una tienda de ropa y que tus clientes pueden ver la ropa que tienes navegando por categoría y talla de la misma. Para esto tienes una aplicación que se llama de la siguiente manera:

http://tusitio.com/cgi-bin/aplicacion_ropa.cgi?tipo=playeras&sexo=femenino&talla=chica

No es para nada bonito el url, por lo que queremos que nuestros clientes puedan acceder de la siguiente manera:

http://tusitio.com/playeras/femenino/chica.htm

Como ves es más intuitivo y amigable.

Usando mod_rewrite no es necesario hacer ningún cambio en tu aplicación, ni siquiera es necesario que crees los directorios ‘playeras/’ ni ‘playeras/femenino’, tampoco es necesario que hagas un archivo que se llame chica.htm.

Lo que vamos a hacer es que cuando algún usuario haga un request de ‘http://tusitio.com/playeras/femenino/chica.htm’ usaremos el mod_rewrite para filtrar y convertir el url a ‘http://tusitio.com/cgi-bin/aplicacion_ropa.cgi?tipo=playeras&sexo=femenino&talla=chica’, pero todo esto detrás de las cortinas, usando la redirección interna como habíamos dicho.

Ya que estemos seguros que tenemos el mod_rewrite instalado y activo, vamos a crear un nuevo archivo de configuración .htaccess.

Dentro de nuestro .htaccess vamos a inicializar el módulo mod_rewrite:

RewriteEngine On

Ya que tenemos esto, tenemos que configurar las reglas o filtros que vamos a usar. Cada uno deberá de ir en una nueva línea y podemos tener tantos como nosotros queramos y necesitemos.

Entonces vamos a crear nuestro filtro que ser verá así:

RewriteRule ^playeras/femenino/chica.htm cgi-bin/aplicacion_ropa.cgi?tipo=playeras&sexo=femenino&talla=chica [L,NC]

Comprendamos nuestra línea del filtro. El filtro está conformado por 4 elementos, cada uno separado por un espacio en blanco.

El primer elemento es:

RewriteRule

Aquí indicamos que estamos creando una nueva regla o filtro para la máquina de mod_rewrite. El segundo elemento es:

^playeras/femenino/chica.htm

En este caso es el url que estamos buscando. Es importante que tengamos en cuenta que siempre debemos de usar los directorio relativos, es decir, no debemos de poner el dominio de nuestro sitio, el mod_rewrite lo pondrá por nosotros.

La tercera parte es el nuevo url al cual queremos redirigir, también la dirección debe de estar relativa, mod_rewrite pondrá por nosotros el dominio de nuestro sitio.

cgi-bin/aplicacion_ropa.cgi?tipo=playeras&sexo=femenino&talla=chica

NOTA: No podemos usar el mod_rewrite para hacer una redirección interna a un url que no se encuentre dentro de nuestro dominio.

La última parte es opcional y son flags que regulan el comportamiento del mod_rewrite.

[L,NC]

En las siguientes secciones veremos más detalles acerca de los flags, pero podemos decir que con los flags L y NC le decimos al mod_rewrite que sea la última regla que cheque si coincide y que no haga caso a las minúsculas y mayúsculas.

Más poder a nuestro mod_rewrite

El ejemplo anterior es de gran ayuda, vimos como podemos convertir un url dinámico en estático en cuestión de minutos, pero hay un pequeño problema.

Lo más seguro es que nuestra tienda de ropa no venda puras playeras chicas, ni tampoco puras de mujer, y lo más seguro es que venda más productos que puras playeras, debe de haber pantalones, chamarras, shorts, camisas, vestidos, etc, etc.

Hacer una nueva regla por cada producto y por cada tamaño será un verdadero dolor de cabeza, y aparte cada ves que queramos poner una nueva línea de productos en la tienda tendremos que modificar nuestro .htaccess.

Pues bueno, con mod_rewrite podemos evitar eso, pues aún no hemos visto la parte más poderosa.

En el último ejemplo hicimos un filtro bastante sencillo:

RewriteEngine On
RewriteRule ^playeras/femenino/chica.htm cgi-bin/aplicacion_ropa.cgi?tipo=playeras&sexo=femenino&talla=chica [L,NC]

Pero también quisiéramos que los siguientes urls lo redirija al lugar correcto:

http://tusitio.com/pantalones/masculino/32.htm
http://tusitio.com/vestidos/femenino/mediano.htm
http://tusitio.com/shorts/infantil/12.htm

Si vemos, todos los urls tiene una misma sintaxis, el primer directorio sería la línea de ropa (pantalones,vestidos,shorts,etc), el subdirectorio sería el departamento (masculino,femenino,infantil,etc) y el archivo html sería la talla (32.htm,mediano.html,12.htm).

mod_rewrite nos permite usar expresiones regulares dentro de nuestros filtros, de esta manera podemos realizar filtros más poderosos.

Las expresiones regulares nos brindan un set de reglas que podemos usar para comprobar valores arbitrarios como en este caso. Sabemos que el url vendrá en una misma sintaxis pero tendrá diferentes valores, usando las expresiones regulares podemos capturar y comprobar esos valores.

Veamos la expresión regular que usaríamos en este caso para hacer lo que queremos:

^([a-zA-Z]+)/([a-zA-Z]+)/([a-zA-Z0-9]+).htm$

Expliquemos un poco nuestra expresión.

El ^ incial denota inicio de línea, significa que solamente será válida la regla si se cumple iniciando la línea.

Los paréntesis ( ) los usamos para capturar el valor, en este caso así lo queremos pues después tendremos que usarlos para enviárselos a nuestro CGI de la aplicación.

Los [ ] los usamos para asignar un campo de caracteres. Los campos de caracteres los podemos usar cuando queremos checar que ciertos caracteres estén o no estén. En la primera parte que será de la línea de ropa, sabemos que solamente vendrán letras del alfabeto, por lo que solamente queremos de la a-z y de la A-Z, en minúsculas y mayúsculas. Lo mismo en la segunda parte, pero ya en la tercera parte si puede haber números por ejemplo en 32.htm, por lo que tenemos que poner también el 0-9.

El signo de + después del cierre del campo de carácter, significa que debe de haber por lo menos uno o más de los caracteres que queremos.

Luego tenemos la separación con las diagonales ‘/’ que están fuera de los paréntesis pues queremos capturar solamente ‘pantalones’ y no ‘pantalones/’.

Al final también dejamos el .htm fuera de los paréntesis pues no lo queremos usar, y terminamos con $ que simboliza final de línea.

Así ya tenemos nuestros valores capturados que ahora podremos usar en el url para llamar al CGI de nuestra aplicación:

cgi-bin/aplicacion_ropa.cgi?tipo=$1&sexo=$2&talla=$3

Vemos como los valores los sustituimos por $1, $2, $3 que a su vez serán sustituidos por mod_rewrite con los valores que capturamos en nuestros paréntesis.

Cada paréntesis captura en una nueva variable y lo hacen en orden, así que van tomando $1, $2, $3, $4.. así hasta lo que se necesite.

Así que finalmente nuestra regla se verá de la siguiente manera:

RewriteEngine On
RewriteRule ^([a-zA-Z]+)/([a-zA-Z]+)/([a-zA-Z0-9]+).htm$ cgi-bin/aplicacion_ropa.cgi?tipo=$1&sexo=$2&talla=$3 [L,NC]

Así si llamamos a los siguientes urls:

http://tusitio.com/pantalones/masculino/32.htm
http://tusitio.com/vestidos/femenino/mediano.htm
http://tusitio.com/shorts/infantil/12.htm

Serán redireccionados internamente a:

http://tusitio.com/cgi-bin/aplicacion_ropa.cgi?tipo=pantalones&sexo=masculino&talla=32
http://tusitio.com/cgi-bin/aplicacion_ropa.cgi?tipo=vestidos&sexo=femenino&talla=mediano
http://tusitio.com/cgi-bin/aplicacion_ropa.cgi?tipo=shorts&sexo=infantil&talla=12

Así de la nada, tenemos una lista infinita de páginas estáticas fáciles de navegar por nuestros usuarios.

Tomándole la medida a mod_rewrite

Usar mod_rewrite es sumamente sencillo, quizá lo más difícil podría ser aprender a usar las expresiones regulares y los flags que podemos usar para controlar el comportamiento del módulo.

Sin embargo ambas son muy intuitivas y con un poco de uso y de estar jugando y probando con ellas, les tomarás la práctica inmediatamente.

Dave Child hizo un PDF con un «acordeón» que enlista las expresiones regulares y flags que podemos usar en el mod_rewrite. Les recomiendo que descarguen el PDF con la lista y lo tengan a la mano en el momento de crear sus filtros:
http://www.ilovejackdaniels.com/mod_rewrite_cheat_sheet.pdf

Cuando hagas tus primeras pruebas con el mod_rewrite, ten cuidado y si puedes has las pruebas con un servidor Apache que no esté en vivo, pues si tienes algún error de sintaxis al momento de crear tus filtros, verás un error 500 en todo tu sitio, evitando que tus usuarios puedan acceder a él.