Estilos CSS distintos a una página con PHP y cookies

  • Por
Hacemos una página PHP donde el usuario puede elegir el estilo y lo guardamos en una cookie para memorizarlo en los siguientes accesos.
Presentamos un taller de PHP y cookies en el que vamos a ilustrar con un ejemplo el uso de Cookies en PHP. Es un ejemplo sencillo, porque PHP proporciona unas herramientas para el control de cookies muy simples de usar.

En este taller vamos a crear una página que puede configurarse con distintos estilos CSS. El usuario es quien decide qué aspecto desea que tenga la página, por medio de un formulario. Luego la página es capaz de recordar, entre los distintos accesos que realice el usuario, el aspecto que había elegido para mostrar la web.

Antes de empezar, vamos a recordar algunas cosas de las cookies en PHP. Las cookies son pequeñas informaciones de texto que se pueden almacenar en el navegador del visitante, siempre que este tenga configurado el borwser para aceptarlas. Las cookies por tanto sólo pueden almacenar caracteres, pero aun así resultan de vital importancia para recordar estados o variables de una visita a otra del usuario.

Si queremos saber conceptualmente más sobre las cookies tenemos un artículo específico para aprender: Qué son las cookies

Tenemos otras informaciones sobre cookies en el manual de PHP.

Si habemos leído los anteriores artículos o ya sabemos algo sobre cookies y PHP no tendremos problema en entender este taller. Podemos entonces pasar directamente a ver el ejemplo que vamos a crear en este ejercicio de PHP. Pero antes, dejamos el enlace para que se pueda ver en funcionamiento y así tener más claro cuál es el objetivo buscado.

El formulario HTML para seleccionar el estilo

<form action="taller-cookies-php.php" method="post">
Aquí puedes seleccionar el estilo que prefieres en la página:
<br>
<select name="estilo">
<option value="verde">Verde
<option value="rosa">Rosa
<option value="negro">Negro
</select>
<input type="submit" value="Actualizar el estilo">
</form>


Es un formulario simple, con un select para elegir entre los distintos estilos css disponibles para la página.

Recibir el formulario y crear la cookie

Si recibimos un valor del formulario tendríamos que crear una cookie para recordar qué estilo desea el usuario para visualizar la página.

//Veo si recibo datos del formulario
if(isset($_POST["estilo"])){
//es que estoy recibiendo un estilo nuevo, lo tengo que meter en las cookies
   $estilo = $_POST["estilo"];
   //meto el estilo en una cookie
   setcookie("estilo", $estilo, time() + (60 * 60 * 24 * 90));
}


En este ejemplo, la cookie la guardamos con el nombre "estilo" y con el valor captado del formulario. Asimismo hay que destacar que hemos configurado la cookie para que permanezca en el ordenador del usuario 90 días.

Ahora, si la página no ha recibido por post el estilo con el que se debe mostrar, tendremos que acceder al array $_COOKIE para ver si está creada la correspondiente galletita y saber el estilo que el visitante había configurado en anteriores accesos.

}else{
   //si no he recibido el estilo que desea el usuario en la página, miro si hay una cookie creada
   if (isset($_COOKIE["estilo"])){
      //es que tengo la cookie
      $estilo = $_COOKIE["estilo"];
   }
}


Para acceder a la cookie lo hacemos con $_COOKIE["estilo"].

En cualquier caso, el estilo lo hemos guardado en una variable global al script PHP $estilo, que la vamos a utilizar para crear el enlace con la hoja de estilos CSS deseada.

if (isset($estilo)){
   echo '<link rel="STYLESHEET" type="text/css" href="' . $estilo . '.css">';
}


Si hay un estilo definido en $estilo, pues hacemos la inclusión del mismo con la correspondiente etiqueta HTML.

Es muy sencillo el ejemplo, como se ha podido ver. Sólo queda mostrar el código PHP completo:

<?
//Veo si recibo datos del formulario
if(isset($_POST["estilo"])){
   //es que estoy recibiendo un estilo nuevo, lo tengo que meter en las cookies
   $estilo = $_POST["estilo"];
   //meto el estilo en una cookie
   setcookie("estilo", $estilo, time() + (60 * 60 * 24 * 90));
}else{
   //si no he recibido el estilo que desea el usuario en la página, miro si hay una cookie creada
   if (isset($_COOKIE["estilo"])){
      //es que tengo la cookie
      $estilo = $_COOKIE["estilo"];
   }
}
?>
<html>
<head>
   <title>Cookies en PHP</title>
<?
//miro si he tengo un estilo definido, porque entonces tengo que cargar la correspondiente hoja de estilos
if (isset($estilo)){
   echo '<link rel="STYLESHEET" type="text/css" href="' . $estilo . '.css">';
}
?>
</head>

<body>
Ejemplo de uso de cookies en PHP para almacenar la hoja de estilos css que queremos utilizar para definir el aspecto de la página.
<p>
<form action="taller-cookies-php.php" method="post">
Aquí puedes seleccionar el estilo que prefieres en la página:
<br>
<select name="estilo">
<option value="verde">Verde
<option value="rosa">Rosa
<option value="negro">Negro
</select>
<input type="submit" value="Actualizar el estilo">
</form>

</body>
</html>


De nuevo, dejamos el link para ver el ejemplo en marcha.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Mary

06/8/2009
Duda
y este codigo sirve si por ejemplo tengo varias paginas y al actualizar el color a una me actualiza todas las demas o como le puedo hacer para que cuando yo elija un color me actualice las demas paginas tambien.

daniel

05/4/2010
para mary
tendrias que hacer tantas hojas de estilo como opciones establezcas. las hojas de estilo las debes hacer aparte y que afecten a todas las paginas de tu sitio web. Hay explicaciones muy bien detalladas sobre hojas de estilo en esta pagina.