Elección dinámica de estilo CSS con PHP

En estos tiempos, cada vez más se crear las webs mas dinámicas, incluso webs donde sobre todo el usuario participe (wikipedia, meneame, technorati .. etc..). En este post os voy a explicar como poder usar distintos CSS según lo que elija el usuario que accede a la web. El php utilizado es muy simple, ya que lo único que tendremos que hacer es manejar enlaces (links) con el método GET. Lo que tendreis que crear primero es una página web, 3 hojas de estilo, por ejemplo:

  1. Plana (estilo simple)
  2. Moderno
  3. Accesible

Para la elección de los estilos este código debe ir en los distintos enlaces de Plana, Moderno, Accesible usando el método GET «?style=id» para que la página PHP lo reconocza:

[html]
Modern
Plain
Accessible
[/html]

Ahora vamos a configurar una página php que llamaremos «style.php».

En primer lugar comprobaremos que $ _SERVER [ ‘HTTP_REFERER’] es «set», ya que algunos servidores no lo tiene permitido, en tal caso lo especificamos en el código, devolviendolo a una página especifica, en nuestro caso al home:
[php]
if(isset($_SERVER[‘HTTP_REFERER’])) {
$back = $_SERVER[‘HTTP_REFERER’];
} else {
//por defecto
$back = ‘http://www.colordeu.es/’;
}[/php]

A continuación tendremos que verificar que los enlaces contienen «? id», de lo contrario haremos lo mismo que anteriormente, enviaremos al usuario al home:

[php]//comprobar si el ID de la URL es válido
if(!isset($_GET) || !isset($_GET[‘id’]) || !is_numeric($_GET[‘id’])) {
header(”Location: $back”); //otherwise redirect back.
exit; //then exit the script to stop further processing.
}[/php]

Seguidamente asignaremos la hoja de estilo según lo que haya seleccionado el usuario:

[php]//asignar variables
$id = $_GET[‘id’];

//Comprobar que el id no esta ni por debajo ni por encima del numero de estilos que tengamos
if($id >0 && $id< =3) {
$id = $id;
} else {
//en caso de que no este entre los números especificados, el estilo será el 1 por defecto.
$id = 1;
}[/php]

Una vez realizadas las comprobaciones crearemos un cookie con el ID, para ser utilizado cuando se carga la página:

[php]if(isset($_COOKIE[‘style’])) {
setcookie(’style’, ”, time()-(60*60));
setcookie(’style’, $id, (time()+(60*60*24*7*2)), ‘/’);
} else {
setcookie(’style’, $id, (time()+(60*60*24*7*2)), ‘/’);
}[/php]

Observad que si el estilo «cookie» ya está establecido (Comprobado con el isset ()) primero se pondrá la fecha de hace una hora, esto hace que se borre a los usuarios de la unidad de disco duro. Nosotros entonces pondremos la cookie a 2 semanas manteniendo el número de hoja de estilo.

Por último enviaremos al usuario a la página de donde procede:

[php]header(«Location: $back»); //redirect back
exit; //salir del script
?>[/php]

Despues de estos sencillos pasos ya tenemos nuestra paqueña aplicación para la elección de hoja de estilo.

Via: thewebsqueeze (EN)