Cookies

cookiesLas cookies

Y porqué pongo este muñeco aquí?. Bueno, cookie es una palabra inglesa que en español es galleta, y si somos fan de barrio sésamo , pues lo dicho.

Vamos a entender que son y para qué valen las cookies.

Lo primero que tenemos que tener en mente es que las web actuales establecen vínculos entre el usuario y el servidor que las aloja, de forma que son necesarias en aspectos técnicos o bien para guardar información sobre gustos del usuario, que al navegar hace click en determinadas palabras o imágenes.

Si buscamos en la web «jamones de extremadura» podemos observar que al seguir navegando por otras páginas , nos sale información relativa a jamones con tiendas online. Google ha puesto cookies en nuestro navegador sobre el gusto que tenemos en ese momento. Después sale en páginas que usan los anuncios de google.

Desde un punto de vista técnico, son necesarias para que al navegar como usuario registrado en una web, ésta nos reconozcan incluso sin identificarnos con el usuario y contraseña. hay otras de tipo analítico, de seguridad, etc

Estructura de la cookie

La forma a modo simplificado es setcookie (  $name , $value , $expire ,$path ,  $domain , $secure , $httponly  )  ( ver página de php.net para más información )

Con ello lo que hacemos es crear una cookie con un nombre determinado. No tenemos por´que usar todos los atributos de la cookie y será suficiente por ahora con el nombre, valor y tiempo de vigencia.

Tenemos que tener cuidado a la hora de crearla porque por restricción de protocolo, se tiene que crear antes de que se genere cualquier salida, o sea, no podemos poner nada que interprete el navegador, nada de etiquetas html , ni siquiera espacios en blanco

En este caso, tenemos que poner algo como ( 1º parte de código ):

<?php
  if(isset($_COOKIE['galleta']))
  { 
    // La pondremos un tiempo  de caducidad de  un año 
    setcookie('galleta', $_COOKIE['galleta'] + 1, time() + 365 * 24 * 60 * 60); 
    $texto = 'Ha visitado esta página : ' . $_COOKIE['galleta']; 
  } 
  else 
  { 
    // Es la primera vez que se visita la web
    setcookie('galleta', 1, time() + 365 * 24 * 60 * 60); 
    $mensaje = 'Hola. Eres Bienvenido a nuestra  web'; 
  } 
?>

La primera vez que se visita no hay creada la cookie, por tanto el isset genera un valor nulo y no se ejecuta la primera parte  ( lo contenido entre {} ). Se ejecutan entonces la 2º parte, donde nos  fijamos que al crear la cookie (setcookie ) la nombramos como «galleta», la asignamos el valor 1  y hacemos que expire al año ( 365 * 24 * 60 * 60 segundos ).

La 2º vez que se visita la web, ya si se ha creado la cookie «galleta» y por tanto se ejecuta la 1º parte . En este caso, se crea de nuevo la cookie pero cambiando su valor de:

$_COOKIE['galleta']   a  -->   $_COOKIE['galleta'] + 1

Ahora se guarda el valor $texto con una frase, la que queramos, junto al valor de la cookie.

2º Parte. Mostramos en pantalla el valor de la cookie

El resto del código necesario es el siguiente ( 2º parte del código ):

<?xml version="1.0" encoding="iso-8859-1"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Página con cookies</title> 
</head> 
<body> 
<p> 
<?php echo $texto; ?> 
</p> 
</body> 
</html>

Tan solo hemos añadido la parte html para que se ejecute en el navegador junto con el fragmento de php para mostrar la cookie en pantalla.

Actividad: Hacer una página que contenga el código anterior( hay que poner el , personalizado con la frase que queráis, para que cuente cuantas veces un usuario visita una página

 Borrar una Cookie

Para borrar la Cookie vamos a emplear la misma función setcookie, pero  en este caso, ponemos el valor nulo y un tiempo de una hora atrás, cualquier tiempo negativo vale.

 Guardamos las preferencias del usuario por Cookies

Para terminar con esta sección, vamos a hacer una página donde el fondo cambie a tres colores. Para ello usamos una cookie y un pequeño formulario.

<? 
if(isset($_POST['datos']) && $_POST['datos'] == 'Enviar' )
{ setcookie("color", $_POST['color'], time()+365*24*60*60);
 $Valor=$_POST['color'];  }
 else  { $Valor= $_COOKIE['color']; }
?> 
<html> <head>
<meta http-equiv="Content-Language" content="es">
<title>Cambio de color de fondo</title> </head> 
<? // ponemos el color de fondo
switch ($Valor) {
 case "azul":
 echo "<body bgcolor=\"#0099FF\">" ;
 break;
 case "verde":
 echo "<body bgcolor=\"#008000\">" ;
 break;
 case "rojo":
 echo "<body bgcolor=\"#FF6666\">" ;
 break;
}
?>
<h1 align="center"> Cambiamos el color de fondo</h1>
<p align="center"> <b><font size="4">Sencillo código para usar Cookies</font></b></p>
<form method="POST" action="index.php">
  <p align="center"><select size="1" name="color">
 <option><? echo $_POST['color'];?></option>
 <option>azul</option>
 <option>verde</option>
 <option>rojo</option>
 </select><input type="submit" value="Enviar" name="datos"></p>
</form>
</body> 
</html>

Explicamos un poco:

  • if(isset($_POST['datos']) && $_POST['datos'] == 'Enviar' )
  • En este caso, vemos si existe la variable enviada por POST «datos» y si ese valor es Enviar. En tal caso, se ejecuta las líneas de abajo
  •  else  { $Valor= $_COOKIE['color']; }
  • Si no viene de haber cambiado el color ( no se ha pulsado el botón datos ) entonces tomamos la variable $Valor como la cookie antes creada
  • La tercera parte es un case de php que genera una salida en función del valor de $Valor
  • El resto es el código html donde está la página y el formulario para cambiar el color

Ver DemoGreat Idea

Actividad:  Copiar el código de arriba y pasarlo a vuestra web. Después, completarlo da tal forma que al cambiar el color a verde, el texto que viene con h1 cambie de negro a blanco