¿Qué son las cookies?
Son contenedores de información (mucha o poca) que una página web establece en el navegador del usuario, para que después, el mismo sitio web o terceros, lean esa información y la utilicen con un fin determinado.
Funciones y variables importantes que usaremos
En este escrito pretendo mostrar y enseñar como crear cookies y consultarlas usando PHP.
Las funciones y variables importantes que usaremos son:
- setcookie()
- key_exists()
- empty()
- $_COOKIE
- $_POST
- $_SERVER['HTTP_HOST']
- header('Location: ')
- exit
Crear ruta de carpetas
No importa donde vas a crear la carpeta del proyecto. Porque usaremos el comando
php - S localhost:8000
para correr el proyecto.
Llamaremos a nuestro proyecto "cookiesPHP". Entonces creamos una carpeta con el mismo nombre. Luego dentro de esa carpeta crearemos dos más. Una con el nombre de "cookies" y la otra con el nombre de "styles".
No te preocupes por el contenido de la carpeta "styles". Enseñarte CSS no es mi objetivo. Por lo tanto sólo copia y pega el código que está en la parte final de este escrito, que es lo correspondiente al contenido del archivo style.css que va dentro de la carpeta "styles".
Lo verdaderamente importante está en la carpeta raíz "cookiesPHP/" y en la subcarpeta "cookies/".
Creando archivos en carpetas
Dentro de la carpeta raíz del proyecto crearemos un archivo llamando "index.php". En la subcarpeta "cookies/" crearemos un archivo con el nombre "setCookie.php".
Dentro de la subcarpeta "styles/" vas a crear un archivo llamado "style.css" y pondrás lo que está al final de este escrito.
cookies/:
-cookies/
setCookie.php
-styles/
style.css
-index.php
Contenido de archivo index.php
Creamos etiquetas comunes de html y le colocamos la etiqueta link que apuntara a nuestro archivo style.css dentro de la subcarpeta styles.
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ventana</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<h1>Web Page</h1>
</header>
<section>
<h2>Other title</h2>
</section>
</body>
</html
Hasta ahora nada nuevo. Bueno, pues procederemos a colocar código php.
Dentro de la etiqueta body, no importa donde, siempre y cuando sea dentro de body y fuera de cualquier otra etiqueta, colocaremos lo siguiente.
<?php
if(!key_exists('mycookie', $_COOKIE)) {
?>
<div class="formCookie" >
<h2>We use cookies to improve our websitie</h2>
<form action="cookies/setCookie.php" method="post" >
<input class="buttonCookieYes" name="yes" value="Yes" />
<input class="buttomCookieNo" name="no" value="No" />
</form>
<p><small>We'll put a cookie to save your answer.</small></p>
</div>
<?php
}
?>
El código anterior se leería de la siguiente manera.
Si la llave(key) "mycookie" existe en la variable $_COOKIE entonces retornará FALSE, porque hacemos la negación con "!" y por lo tanto no aparecerá nuestro div con el formulario.
Pero en caso de que la llave(key) "mycookie" no exista en la variable $_COOKIE entonces retornará TRUE, por la misma razón del operador de negación lógico "!".
Recuerda, que con ese operador devolvemos lo contrario de un tipo booleano. TRUE se vuelve FALSE, y FALSE se vuelve TRUE. La función key_exists() retorna un booleano en caso de encontrar o no la llave dentro de un array. La variable $_COOKIE es un tipo array.
Si no existe la llave "mycookie" en $_COOKIE entonces mostraremos un div que contendrá un formulario. En ese formulario solo habrá dos botones(inputs tipo submit) uno con el atributo name="no" y el otro con el atributo name="yes". Una vez que se muestre, haremos que desaparezca ese formulario sólo cuando se oprima uno de los botones.
Esos atributos "name" serán tratados en el archivo "setCookie.php" que esta en la carpeta "cookie/".
Las clases que están colocadas son para darle estilos desde el archivo "style.css".
Contenido del archivo setCookie.php
Aquí usaremos las funciones y variables siguientes:
- setcookie()
- $_POST
- $_SERVER['HTTP_HOST']
- header()
- exit.
Colocamos lo siguiente.
<?php
//primero obtenemos la url del sitio, en este caso será "localhost:8000" para usar esta variable en la función header()
$uri = $_SERVER['HTTP_HOST'];
//Ahora comprobamos lo que recibimos desde el formulario.
//Como usamos el método POST en el formulario,
//debemos usar la variable $_POST. Y veremos si hay una llave/clave con el name="yes".
//Por hacerlo simple, sólo comprobamos el botón "yes". En caso de que no exista esta llave en $_POST lo tomaremos como si se hubiera oprimido el botón "no".
if(!empty($_POST['yes'])){
$cookie = rand(1, 10000);
$cookie .= str_shuffle('1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ');
$cookie .= date('d-m-Y');
setcookie('mycookie', $cookie, time()+86400, '/', false, true);
//regresamos al index.php o a la ruta http://localhost:8000/
header("Location: http://$uri/" );
exit;
}
else{
$cookie = 0;
setcookie('mycookie', $cookie, time()+86400, '/', false, true);
header("Location: http://$uri/" );
exit;
}
El código anterior se lee de la siguiente manera.
Si la variable $_POST['yes'] está vacía entonces sólo coloca una cookie con el valor 0 con tiempo de vida de un día.
$cookie = 0;
setcookie('mycookie', $cookie, time()+86400, '/', false, true);
Pero si esa variable no está vacía, entonces crea una variable llamada $cookie que tendrá un numero entero aleatorio puesto con la función rand() de entre 1 a 10000. Luego a esa misma variable le agregamos un String ordenado de manera aleatoria usando la función str_shuffle(). Después le agregamos la fecha actual usando la función date('d-m-Y'). Esto realmente no es necesario para aprender como crear cookies. Pero me pareció interesante el uso de las funciones anteriores para crear una variable más compleja🤔.
Simplemente podríamos omitir las tres funciones anteriores; rand();str_shuffle();date(). La variable $cookie puede contener un String con tu nombre y listo👍.
La función más importante es setcookie(), esta función recibe varios argumentos. Los dos primeros argumentos son el nombre que tendrá la cookie a crear, y el segundo argumento es el valor que tendrá esa determinada cookie.
setcookie('mycookie', $cookie, time()+84600, '/','',false, true) ;
El tercer valor es el tiempo de vida que tendrá esa cookie. La función time() retornará el timestampb tipo Unix, que estará en segundos. Entonces nosotros con el operador "+" le sumamos 84600 segundos a ese valor dado por time(). 84600 segundos es un día. Por lo tanto nuestra cookie dudará un día.
setcookie('mycookie', $cookie, time()+84600, '/', false, true) ;
El cuarto argumento es la ruta donde se guardará la cookie. En este caso usamos la raíz "/". El quinto valor es el dominio del sitio web, en esta ocasión lo dejamos vacío.
Los dos últimos argumentos son para determinar seguridad https, y httponly. En se orden.
Siguiendo con el código. Una vez puesta la cookie en la ruta "/", con nombre "mycookie", con valor de un String compuesto dentro de la variable $cookie, y con un tiempo de vida de un día, regresaremos a la ruta http: //localhost:8000/ con la función header() y terminamos el script del archivo setCookie.php con la función exit.
La variable $uri la declaramos al inicio del archivo.
header("Location: http://$uri/" );
exit;
El formulario para aceptar cookies desaparece.
Esto ya está resuelto. Porque desde que creamos la estructura condicional "if" en el archivo index.php ya preguntamos que hacer en caso de tener o no una llave determinada dentro de la variable tipo Array $_COOKIE.
Por lo tanto no importa si elegimos aceptar o no la cookie. Una vez dada nuestra repuesta ya no debería aparecer ese formulario. Solo hasta que la cookie expire.
Trata de que tus cookies duren más tiempo, de esta manera evitas que al usuario le aparezca ese formulario a veces molesto para algunos.
El usuario debe decidir entre aceptar las cookies o no.
Si tú no le das la oportunidad de negarse a aceptar una o muchas cookies, entonces estarías obligando al usuario a aceptar algo que el tal vez no quiere o no está de acuerdo.
Si tú creas cookies sin preguntarle al usuario, esas cookies se actualizarán automáticamente una vez el tiempo de vida de cada cookie termine, siempre y cuando el usuario vuelve al sitio web.
En ese sentido, haces que el usuario acepte algo de lo cual el desconoce su contenido y su fin.
Puedes guardar una cookie para salvar su respuesta en caso de negativa. Debes decirle que harás esta acción.
Contenido de style.css
Hice lo que pude en el tema del diseño. Puedes cambiar todo el archivo y las clases en el index.php.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
header, section{
padding: 10px 8px;
margin-bottom: 1em;
}
.formCookies{
border-top: solid rgb(15, 15, 15);
width: 100%;
text-align: center;
position: fixed;
bottom: 0px;
background-color: rgb(255, 248, 153);
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.formCookies form{
margin: 1em 0;
}
.buttonCookieYES{
font-size: 1.2em;
color: white;
border: none;
border-radius: 10px;
background-color: rgb(43, 64, 250);
padding: .4em .8em;
}
.buttonCookieYES:hover{
color: white;
background-color: rgb(78, 95, 252);
}
.buttonCookieYES:active{
color: rgb(43, 64, 250);
background-color: rgb(255, 255, 255);
}
.buttonCookieNO{
font-size: 1.2em;
border: none;
border-radius: 10%;
text-decoration: underline;
background-color: rgb(255, 248, 153);
padding: .4em .8em;
}
.buttonCookieNO:hover{
color: red;
}
.buttonCookieNO:active{
color: white;
background-color:red;
}
h1,h2,h3,h4{
margin-bottom: .5em;
}
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.