Les Cookies

Vous êtes ici : >> PHP / Les Cookies
Temps d'étude : 1h. Niveau : Moyen.
Tags : Les Cookies
Fichier(s) utile(s) pour ce cours :
Objectifs
fléche Conserver et échanger des informations avec un internaute.

Découverte des cookies

Qu'est-ce qu'un cookie ? Un cookie est un fichier sauvegardé sur l'ordinateur de l'internaute avec des informations à l'intérieur.

Les informations à l'intérieur d'un cookie ne sont pas sensibles (pas de mot de passe), il s'agit en général de préférence, exemple : langue dans laquelle l'internaute souhaite visiter le site, derniers produits consultés dans une boutique (cela permettra de relancer l'internaute sur d'autres produits durant ses prochaines navigations, voir le remarketing en référencement), etc.

Depuis quelques années, les sites web Européens ont l'obligation d'informer les internautes lorsque des informations liées à leur navigation et utilisation sont retenues dans un fichier cookie.

Yahoo (exemple) : cliquez ici pour connaitre le genre d'informations retenues sur vous et aussi leur utilisation

Pour créer un cookie, cela se fait avec la fonction prédéfinie de PHP setCookie :

cookie1.php
		<?php
		setCookie("nomCookie","contenuCookie",time()+31536000);

Explications

setCookie est donc une fonction prédéfinie permettant de créer un fichier (un fichier cookie) sur l'ordinateur de l'internaute pour sauvegarder des informations.

Les arguments attendus sont :

fléche 1. Le nom du cookie, dans notre cas nous l'avons nommé "nomCookie".

fléche 2. Le contenu du cookie (les informations), ici nous avons inscrit "contenuCookie".

fléche 3. La date d'expiration du cookie (péremption), dans l'exemple ci-dessus nous avons pris le moment actuel (par l'intermédiaire de la foncion time(), timestamp) et avons ajouté le nombre de secondes écoulées en 1 année, soit : 31536000 (secondes)

A noter, un internaute peut supprimer 1 cookie a tout moment (puisque le fichier se trouve sur son ordinateur)!

Qu'est-ce que la fonction time() en PHP :

La fonction PHP prédéfinie time() permet de donner le timestamp, cela représente le nombre de secondes écoulées entre le 01 janvier 1970 (date clé en informatique) et maintenant (le moment présent).
Plus d'informations ici : Wikipédia TimeStamp

Pour voir le timestamp, essayons ce code :

		echo time();
Rechargez la page plusieurs fois (F5 ou Ctrl+R, vous verrez le résultat changer en conséquence (puisqu'à chaque instant des secondes s'écoulent).

Résultat
1594144013


Avant de nous interesser et d'observer les cookies sur notre ordinateur, je vous invite à faire du ménage en supprimant vous aussi tous vos cookies, voici le raccourci clavier : Ctrl+Shift+Suppr (attention vous serez deconnecté des différents sites web où vous aviez enregistré votre connexion).

Reprenons notre code :
cookie1.php
		<?php
		setCookie("nomCookie","contenuCookie",time()+31536000);

Exécuter la page cookie1.php et ensuite pour voir le cookie apparaitre (sous le navigateur mozilla firefox), vous pouvez vous rendre dans la partie suivante : Outils > Options > Vie privée > Régle de conservation : Utiliser les paramètres personnalisés pour l'historique > Afficher les cookies.

explication PHP

explication PHP

explication PHP

Après avoir exécuté dans le navigateur le fichier cookie1.php. Nous pouvons apercevoir notre cookie et son contenu.

setCookie() est une fonction prédéfinie permettant de créer un cookie, cependant il n'y a pas de fonction prédéfinie permettant de le supprimer. Pour rendre inactif un cookie, on le met généralement à jour avec une date périmée.

Cas pratique : une page multilingue avec des cookies

Pour mieux se représenter à quoi peuvent nous servir les cookies dans le cadre d'un site web, je vous propose de créer une page multilingue. Ce sera plus concret !

Je vous invite à créer le début de l'exemple vous même (sous forme d'exercice), nous ferons la partie cookie ensemble.
Voici les consignes :

Exercice :

  1. Créer 1 fichier nommé langue.php

  2. Créer 4 liens HTML pointant vers la même page (soit un href sur langue.php)
    Les liens seront : French - English - Italy - Spain (vous pouvez aussi ajouter des drapeaux en image)

  3. Lorsque l'on clique sur l'un des liens HTML, nous n'irons nulle part et devrons rester sur la même page (soit langue.php), cependant il faudra transmettre une information dans l'url du type : ?pays=fr (pour french), ?pays=en (pour english), ?pays=it (pour Italy), ?pays=es (pour Spain)

  4. Ensuite, l'idéal serait de récupérer l'argument passé dans l'url (via $_GET) et de l'afficher sur la page web.
    Si l'internaute clique sur French on affichera fr, si l'internaute clique English on affichera en, si l'internaute clique Italy on affichera it, et enfin si l'internaute clique Spain on affichera es. Toujours dans la même page web !

Voici la correction :

langue.php
		<?php
		if(!empty($_GET['pays']))
		{
			echo 'code pays : ' . $_GET['pays'];
		}
		?>
		
			

Tant qu'il s'agit d'un entrainement (et tant que notre page n'est pas en ligne, sur le web), nous ne sommes pas obligé de mettre les balises d'entête doctype etc.

Résultat
Exemple avec un clic sur "Spain" pour la langue espagnol :

explication PHP


Si vous cliquez sur "Spain", vous verrez afficher le code pays es, cela fonctionne très bien mais votre préférence (dans le choix de la langue espangole) ne sera pas gardée si vous partez en fermant la page et que vous revenez sur le site web plus tard.

Si ce code n'est pas clair pour vous, il faudra prendre le temps de relire le chapitre sur le passage d'argument dans une url et la récupération avec la superglobale $_GET.

Plusieurs sites fonctionnent comme ça ! avec un argument dans l'url.

Cliquez ici et regardez bien la fin de l'url le site d'Apple (pour exemple) : Apple FR - Apple IT

explication PHP

Adaptons et modifions un peu le code pour sauvegarder la langue de l'internaute dans un cookie :

langue.php
		<?php
		if(isset($_GET['pays']))
		{
			$pays=$_GET['pays'];
		}
		elseif(isset($_COOKIE['pays']))
		{
			$pays=$_COOKIE['pays'];
		}
		else
		{
			$pays='fr';
		}
		
		$expiration = 365*24*3600;
		setCookie("pays",$pays,time()+$expiration);
		?>
		
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Page Multilingue</title>
				<link rel="stylesheet" href="css/style.css">      
			</head>
			<body>
				
<?php switch($pays) { case 'fr': echo '

Bonjour,
Vous visiter actuellement le site en français
Effectivement, la sauvegarde du cookie permet de retenir la langue avec laquelle vous naviguer sur le site pour vos prochaines visites.
A bientôt.

'; break; case 'es': echo '

¡Hola
En este momento está visitando el sitio en español
De hecho, la cookie permite la copia de seguridad de conservar el idioma que utilice el sitio para futuras visitas.
Pronto.

'; break; case 'en': echo '

Hello
You are currently visiting the site in English
Indeed, the cookie allows the backup to retain the language that you use the site for future visits.
Soon.

'; break; case 'it': echo '

Ciao
Si sta attualmente visitando il sito in Italiano
Infatti, il cookie consente il backup di mantenere la lingua che si usa il sito per visite future.
Presto.

'; break; } ?> </body> </html>

Explications et décomposition du code

1ère condition IF :
		if(isset($_GET['pays']))
		{
			$pays=$_GET['pays'];
		}
Cette condition permet de savoir si un code pays est défini.
En gros : est-ce que l'internaute a cliqué sur l'un des liens pour afficher le site dans une langue particulière ?
Si l'url contient un code pays, c'est donc qu'un lien a été cliqué, nous l'affectons à la variable $pays


2ème condition ELSEIF :
		elseif(isset($_COOKIE['pays']))
		{
			$pays = $_COOKIE['pays'];
		}
Elseif = Sinon si, un cookie nommé "pays" existe sur l'ordinateur de l'internaute.
Nous le récupérons et affectons la variable $pays avec.
Cette condition s'exécutera uniquement si nous ne sommes pas rentrés dans le IF précédent et si l'internaute est déjà venu sur le site (sinon le cookie n'existerait pas).


3ème condition ELSE :
		else
		{
			$pays = 'en';
		}
Else = Sinon, dans le scénario où le if (pas de clic sur 1 lien de la part de l'internaute) et le elseif (pas de cookie) ne se déclenchent pas, le cas par défaut sera appliqué.
Nous mettons le code pays "en" dans la variable $pays
Ce cette manière, le site s'affichera par défaut en Anglais.
Cette condition (par défaut) s'exécutera uniquement si nous ne sommes pas rentrés dans le IF, ni dans le ELSEIF précédent.


Nous ressortirons forcément de cette série de conditions IF / ELSEIF / ELSE avec la variable $pays affectée par un code pays:

Affichage de $pays :
		echo $pays; 
Si vous souhaitez avoir connaissance du code pays dans la variable $pays, rien ne vous empêche d'écrire la ligne ci-dessus (le temps des tests).
Cela affichera le contenu de la variable $pays


Création / Mise à jour du cookie :
		$expiration = 365*24*3600;
		setCookie("pays",$pays,time()+$expiration);
$expiration nous permet de conserver le calcul d'1 année en secondes (365 jours x 24 heures x 3600 vient de 60sec x 60min nombre de seconde dans 1 heure).
setCookie nous permet de déposer le fichier cookie sur l'ordinateur de l'internaute.
Argument 1 - Nom du cookie : pays
Argument 2 - Valeur du cookie : "fr" ou "en" ou "it" ou "es"
Argument 3 - Date d'expiration : dans 1 an à partir d'aujourd'hui
Puisque ce code ne se trouve pas dans une condition, nous créerons (dans tous les cas) un cookie (sur l'ordinateur de l'internaute) avec le code pays contenu dans la variable $pays.
Un cookie sera valable 1 an après la dernière visite de l'internaute (l'internaute qui se connecte tous les mois verra son choix gardé à l'infini sans probleme d'affichage de texte pour la langue, puisqu'à chacun de ses passages son cookie est relancé pour 1 année à partir de sa dernière visite).


Condition Switch :
		switch($pays)
		{
			case 'fr':
				echo '

Bonjour,
Vous visiter actuellement le site en français
Effectivement, la sauvegarde du cookie permet de retenir la langue avec laquelle vous naviguer sur le site pour vos prochaines visites.
A bientôt.

'; break; case 'es': echo '

¡Hola
En este momento está visitando el sitio en español
De hecho, la cookie permite la copia de seguridad de conservar el idioma que utilice el sitio para futuras visitas.
Pronto.

'; break; case 'en': echo '

Hello
You are currently visiting the site in English
Indeed, the cookie allows the backup to retain the language that you use the site for future visits.
Soon.

'; break; case 'it': echo '

Ciao
Si sta attualmente visitando il sito in Italiano
Infatti, il cookie consente il backup di mantenere la lingua che si usa il sito per visite future.
Presto.

'; break; }

La condition switch test la variable $pays et permet de faire sortir le bon texte à afficher en fonction de la langue de l'internaute.

Faites les tests !

Résultat et tests ! Etape 1 : Cliquez sur le lien "Italy", le texte s'affiche en italien.
Etape 2 : Fermer votre navigateur (ou onglet).
Etape 3 : Rouvrez votre navigateur (ou onglet) et allez sur la page web langue.php (sans argument pays dans l'url).
Etape 4 : Le texte reste affiché en italien. Ca fonctionne ! 1 fichier cookie a bien été créé sur l'ordinateur de l'internaute et a été pris en compte.
Etape 5 : Observer le cookie, dans firefox : outils > option > Vie Privée > Conserver les paramètres personnalisés pour l'historique > Afficher les cookies > localhost > pays : voir les détails affichés.

explication PHP explication PHP
Si votre test ne fonctionne pas, pensez à vérifier le code (voir s'il n'y a pas d'erreur) et aussi regardez si l'option "vider l'historique lors de la fermeture de firefox" n'est pas cochée, ce qui empêcherait de garder les cookies.


L'anglais est choisi comme langue par défaut, mais il aurait par exemple été possible de détecter la langue du navigateur de l'internaute par l'utilisation de la superglobale $_SERVER afin d'adapter l'affichage de la page web en conséquence.

Quelques Questions :

Question 1 : Est-ce possible de tomber dans plusieurs conditions (if/else/elseif) en même temps ?
Réponse 1 : Non.

Question 2 : Dans quelle condition rentre l'internaute lors de sa toute 1ère visite ?
Réponse 2 : else et donc l'affichage du site par défaut est en Anglais

Question 3 : Dans quelle condition l'internaute rentre lorsqu'il clique sur un lien ?
Réponse 3 : if

Question 4 : Dans quelle condition l'internaute rentre lorsqu'il revient sur le site 15 jours plus tard ?
Réponse 4 : elseif, car un cookie existe

Question 4 : Dans quelle condition rentre l'internaute lorsqu'il revient sur le site 15 jours plus tard après avoir cliqué sur 1 lien ?
Réponse 4 : if, car même si un cookie existe, nous vérifions d'abord si l'internaute a cliqué sur 1 lien (dans l'ordre du code) et si nous rentrons dans le if, nous ne rentrerons donc pas dans le elseif.

Question 5 : Lors de la toute 1ère visite d'un internaute, est-ce qu'un cookie est créé ?
Réponse 5 : oui, a chaque fois, le setCookie() ne se trouve pas dans une condition et est toujours appliqué.

Question 6 : Lors des visites suivantes, que se passe t'il ? et que se passe t'il si l'internaute change de langue ?
Réponse 6 : Le cookie est mis à jour sur la durée de vie. Si la langue est changée, le cookie est mis à jour sur la durée de vie et le contenu.

Question 7 : Est-ce qu'on pourra mettre les informations (produits, prix, etc) d'un panier dans un cookie ?
Réponse 7 : Surtout pas ! l'internaute pourra modifier le prix, ca sera son fichier texte, étant sur son pc cela lui appartient.

Nous garderons donc l'utilisation des fichiers cookies pour des préférences mineures