Mis à jour le mercredi 30 octobre 2013
  • Facile
Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Introduction du cours

Bonjour à toutes et à tous.

Je propose ici un tutoriel dans lequel vous apprendrez à mettre en place un style-switcher sur votre site.
Je ne l'ai pas conçu moi-même, il s'agit du sélecteur de style proposé par Chris Clark dans l'article anglophone Build a PHP Switcher (13 octobre 2002).
L'avantage de ce tutoriel, c'est qu'il explique ce style-switcher en français. ^^ Il ne s'agit pas d'une traduction de l'article.

J'explique tous les codes. Les personnes qui ne connaissent rien au PHP pourront donc tout de même comprendre un peu.

La lecture des explications n'est pas forcément nécessaire pour comprendre la manière de mettre en place le sélecteur sur votre site, mais je ne supporte pas de voir des lignes de code sans savoir « comment elles marchent ».

Je prends ici l'exemple d'un site (www.mon-site.net) ayant toutes ses feuilles de style hébergées à la racine, avec la syntaxe de nom suivante : nomdustyle.css.

Je m'appelle Mathias Poujol-Rost et publie ce tutoriel sous la licence Creative Commons BY-NC.

La création ou modification du cookie

Ce sélecteur se base sur un cookie qui stocke le choix de style. Cela signifie que ce sélecteur ne peut pas fonctionner chez les internautes qui refusent les cookies. C'est l'un des rares inconvénients de ce sélecteur (un autre étant qu'il requiert un hébergement sur lequel le PHP est activé).

Dans cette sous-partie, nous allons voir le code du fichier qui crée ce cookie ou qui le modifie pour « écraser » un choix précédent. Ce code est l'unique contenu du fichier selecteur-style.php hébergé à la racine du site.

Notes d'information

Le code du fichier selecteur-style.php

<?php
if (isset($_POST['nouveau']) AND $_POST['nouveau'] != NULL)
        {$nouveau = $_POST['nouveau'];} 
elseif (isset($_GET['nouveau']) AND $_GET['nouveau'] != NULL)
        {$nouveau = $_GET['nouveau'];}
 
setcookie ('sousdomainenomdomaine_stylecss', //nom du cookie
$nouveau, //valeur du cookie
time() + 31536000, //durée de vie (31 536 000 secondes = une année)
'/', //répertoire de validité par rapport à la racine
'sousdomaine.nom.domaine', //nom de domaine COMPLET dont sous-domaine
'0'); // 0 = pas sécurisé 
 
header ("Location: ".$_SERVER['HTTP_REFERER']);  // retour à la page précédente
?>

Ce code comporte deux instructions PHP : setcookie et header. Chacune se termine par un point-virgule.

Elles sont précédées de deux conditions. Si vous ne savez pas ce qu'est une structure conditionnelle en PHP, cela ne servirait pas à grand-chose que je vous explique ces quatre lignes, en l'état actuel de vos connaissances en PHP et de la lecture de ce tuto. En effet, ces deux conditions sont directement en lien avec la troisième sous-partie de ce tutoriel.

Ne modifiez pas ces 4 lignes de conditions, sous peine de ne pas voir votre style-switcher fonctionner du tout. Pour ne pas vous laisser sur votre faim d'explications, je vous indique juste que ces 4 lignes permettent de récupérer le choix du style.

Explications du code du fichier selecteur-style.php

L'instruction setcookie contient 6 arguments qui déterminent les conditions de validité du cookie.

  • sousdomainenomdomaine_stylecss est le nom du cookie ; vous pouvez lui donner le nom que vous voulez, mais celui-ci ne doit pas contenir de caractères spéciaux tels des accents, trémas ou cédilles. En revanche, l'usage des underscores (_) est fréquent.

  • $nouveau est notre variable, sa valeur (l'information) est le nom du style choisi.

  • Le troisième argument, c'est la date d'expiration ; il y a plusieurs façons de la configurer :

    • time()+XXXX où XXXX est une durée en secondes ;

    • time()+(A*B*C*D) où A*B*C*D est un produit (*) dont le résultat est une durée exprimée en secondes.
      Exemple : 60*60*24*30 = 60 secondes multipliées par 60 minutes multipliées par 24 heures multipliées par 30 jours = environ un mois de durée de vie. Si vous utilisez time() +, cela veut dire que la date d'expiration est définie comme étant l'instant présent auquel on ajoute une durée de temps (XXXX ou (A*B*C*D)). La date d'expiration est donc définie par rapport à l'instant présent, on ne fait que donner une durée de vie au cookie.

  • '/' est le chemin pour lequel le cookie est valide, à partir de la racine. La mention '/' indique que le cookie est valable (on dit aussi valide) pour tous les répertoires du sous-domaine. Sinon, on peut renseigner par exemple '/admin/'.

  • 'sousdomaine.nom.domaine' est le sous-domaine de validité du cookie. Un cookie n'est valide que pour un et un seul sous-domaine donné. Dans le cas contraire, n'importe quel site (identifié par son sous-domaine) pourrait modifier des cookies créés par d'autres sites. Il ne faut pas indiquer de répertoire du site pour cet argument, il faut indiquer la racine sans le slash (/) final.

  • '0' ou '1' indique si le cookie est transmis uniquement si la ligne est sécurisée ('1') ou non ('0'). Cet argument n'est pas obligatoire ; il vaut '0' par défaut.

Il ne faut en aucun cas changer l'ordre des arguments dans ces lignes de code. La structure est la même pour tous les cookies.

L'instruction header ("Location: ".$_SERVER['HTTP_REFERER']); indique qu'une fois le formulaire envoyé vers le fichier selecteur-style.php, celui-ci traite les informations qu'il a reçues (le nom du style via la variable $nouveau), puis effectue une redirection vers la page depuis laquelle a été envoyé le choix du style. En fait, l'internaute ne verra pas cette page selecteur-style.php, elle sert uniquement à écrire le cookie.

Pour pallier ce problème, une solution simple existe : créer sur votre site une page dédiée au changement de style, à l'instar du Site du Zéro.
Il suffit d'inclure le code de selecteur-style.php dans une page page-de-changement-de-style.php avant le moindre code XHTML, en ayant remplacé
header ("Location: ".$_SERVER['HTTP_REFERER']);
par
header ("Location: http://www.mon-site.net/page-de-changement-de-style.php");.

Conclusion de cette première sous-partie

Voici le code pour la création d'un cookie qui durera un an, sans les commentaires (c'est plus lisible).

<?php 
if (isset($_POST['nouveau']) AND $_POST['nouveau'] != NULL)
        {$nouveau = $_POST['nouveau'];} 
elseif (isset($_GET['nouveau']) AND $_GET['nouveau'] != NULL)
        {$nouveau = $_GET['nouveau'];}
 
setcookie ('sousdomainenomdomaine_stylecss', $nouveau, time() + 31536000, '/', 'sousdomaine.nom.domaine', '0'); 
 
header("Location: ".$_SERVER['HTTP_REFERER']); 
?>

ou :

<?php 
if (isset($_POST['nouveau']) AND $_POST['nouveau'] != NULL)
        {$nouveau = $_POST['nouveau'];}
elseif (isset($_GET['nouveau']) AND $_GET['nouveau'] != NULL)
        {$nouveau = $_GET['nouveau'];}
 
setcookie ('sousdomainenomdomaine_stylecss', $nouveau, time() + 31536000, '/', 'sousdomaine.nom.domaine', '0'); 
 
header("Location: http://www.mon-site.net/page-de-changement-de-style.php"); 
?>

(Entre ces deux codes, seule la dernière ligne varie.)

Vous venez de créer un cookie. Soit. Mais dans l'absolu, cela ne sert à rien. :euh: Voyons comment exploiter ce cookie.

L'appel de la feuille de style choisie

Poursuivons avec la ligne de code XHTML qui fait le lien vers la feuille de style.

L'ancienne ligne de code XHTML

<link href="http://www.mon-site.net/nomdustyle.css" rel="stylesheet" type="text/css" media="screen" title="le style que j'ai choisi" />

Comment lire le choix stocké dans le cookie ? Code PHP

Nous remplaçons juste nomdustyle du nom de fichier CSS « entier » nomdustyle.css par un code PHP.

Ainsi, la portion de code XHTML nomdustyle.css devient :

<?php echo (!$sousdomainenomdomaine_stylecss)?'valeur-par-defaut':$sousdomainenomdomaine_stylecss ?>

Explication du code PHP

  • sousdomainenomdomaine_stylecss est le nom du cookie que vous venez tout juste de créer et de configurer, grâce au fichier selecteur-style.php. Il apparaît dans ce code comme une variable appelée $sousdomainenomdomaine_stylecss car c'est ici (dans ce code PHP) une variable ; mais il ne faut pas la confondre avec notre variable qui s'appelle $nouveau.

    Attention à ne pas vous emmêler les pinceaux avec les variables :

    • $sousdomainenomdomaine_stylecss est le nom d'une « nouvelle » variable, oui, mais je viens de dire que nous n'allons pas nous en occuper.

    • sousdomainenomdomaine_stylecss est le nom du cookie qui stocke le choix du style CSS de l'internaute. Vis-à-vis du cookie, ce choix représente sa valeur.

    • $nouveau est le nom de notre variable. Sa valeur est l'information portée par le cookie. Voici quelques exemples de valeurs pour le nom de fichier CSS nomdustyle.css : impressions, mobile, defaut, gros-caracteres, fond-noir. Ainsi notre variable $nouveau peut prendre l'une de ces valeurs, ou une autre (selon la nomination de vos fichiers CSS). En effet, le style n'est pas toujours le même, puisqu'on peut le changer avec le sélecteur. La valeur stockée dans le cookie peut donc changer, elle est variable et représentée par la variable $nouveau.

  • valeur-par-defaut est une valeur par défaut pour notre variable $nouveau. En effet, si le cookie n'est pas encore défini (ce qui est le cas lorsqu'un internaute visite pour la première fois le site), il n'a pas encore de valeur. Il en faut pourtant une. Cette valeur est donc un des styles, par exemple celui par défaut. Vous devez donc indiquer par exemple base ou pardefaut ou default. Ce style doit être parfaitement lisible et pratique, pour ne pas obliger l'internaute à en changer.

Conclusion de cette deuxième sous-partie : la nouvelle ligne de code

Voici le code XHTML en entier, pour la partie <head> de vos pages :

<link href="http://www.mon-site.net/<?php echo (!$sousdomainenomdomaine_stylecss)?'valeur-par-defaut':$sousdomainenomdomaine_stylecss ?>.css" rel="stylesheet" type="text/css" media="screen" title="mon choix" />

Nous voici arrivés presque à la fin de ce tuto.

Si vous avez tout compris jusqu'à maintenant, c'est très bien :D et vous allez pouvoir laisser en partie reposer vos cerveaux, la partie suivante (la troisième) est la dernière et la plus facile ! Vous y découvrirez comment permettre aux visiteurs de choisir leur style.

Dans le cas contraire :( , la première chose serait de vous plonger sérieusement dans un cours de PHP. En ayant des bases, vous comprendrez plus facilement, plus vite et mieux.

La sélection du style

Nous allons tout de suite nous placer du côté de l'internaute et voir comment changer le style CSS depuis une page Web.
Il y a deux méthodes : le formulaire et les liens.

Méthode A : le menu déroulant

Le code pour la liste déroulante

<form method="post" action="http://www.mon-site.net/selecteur-style.php">
<p>
<label for="selectiondustyle">Choisissez le style qui vous plaît et appuyez sur le bouton : </label> 
     <select name="nouveau" id="selectiondustyle">
          <option value="defaut">style normal (par défaut)</option>
          <option value="gros-caracteres">gros caractères</option>
          <option value="fond-noir">fond noir (fort contraste)</option>
          <option value="impressions">aperçu avant impression</option>
          <option value="mobile">version petits écrans</option>
     </select>
<input type="submit" value="Choisir ce style" title="valider le choix de style" />
</p>
</form>

Explications du code du formulaire

  • action="http://www.mon-site.net/selecteur-style.php" indique vers quelle page va être envoyée l'information du formulaire. Cette information n'est autre que le choix du style, qui est une valeur d'une variable.

  • for="selectiondustyle" et id="selectiondustyle" indiquent l'étiquette appliquée à la balise <select>. En cliquant sur la phrase « Choisissez le style qui vous plaît et appuyez sur le bouton : » ou la liste « non déroulée », la liste va être « activée », on pourra la parcourir avec le clavier ! :D

  • On retrouve notre variable avec la mention name="nouveau" dans la balise <select>

Ces personnes doivent remplacer dans le code précédent

action="http://www.mon-site.net/selecteur-style.php"

par

action="http://www.mon-site.net/votre-page-de-changement-de-style.php"

.

Méthode B : les liens

La ligne du code-type

<ahref="http://www.mon-site.net/selecteur-style.php?nouveau=valeur">Choisir le style "valeur"</a>

Explications du code des liens

  • ? indique que la page selecteur-style.php va traiter une requête avec une ou des variables (une seule dans votre cas, "$nouveau") ;

  • nouveau fait référence à votre variable « $nouveau » ;

  • = indique quelle variable et quelle valeur pour celle-ci le code PHP du fichier selecteur-style.php va devoir traiter ;

  • valeur est une de nos valeurs pour « $nouveau » (impressions, mobile, defaut, gros-caracteres, fond-noir, opera). Ici, j'ai écrit « valeur » pour indiquer que c'est une valeur de notre variable, mais j'aurais très bien pu écrire à la place nouveau=defaut, comme exemple.

Exemple : [ Choix du style visuel : normal (par défaut) | gros caractères | fond noir (fort contraste) ].

Vous pouvez bien sûr mettre une image à la place du texte du lien. Cette méthode est particulièrement adaptée à un faible nombre de styles CSS différents. Si vous en avez plus que cela, il peut être intéressant de proposer le choix du style via une liste déroulante, car une suite de liens comme celle qui précède peut être « encombrante » ou « lourde » dans la page.

Conclusion de cette troisième sous-partie

Voici les codes en entier, pour la partie <body> de vos pages :

Méthode du formulaire

<form method="post" action="http://www.mon-site.net/selecteur-style.php">
<p>
<label for="selectiondustyle">Choisissez le style qui vous plaît et appuyez sur le bouton : </label> 
     <select name="nouveau" id="selectiondustyle">
          <option value="defaut">style normal (par défaut)</option>
          <option value="gros-caracteres">gros caractères</option>
          <option value="fond-noir">fond noir (fort contraste)</option>
          <option value="impressions">aperçu avant impression</option>
          <option value="mobile">version petits écrans</option>
     </select>
<input type="submit" value="Choisir ce style" title="valider le choix de style" />
</p>
</form>

Méthode des liens

<a href="http://www.mon-site.net/selecteur-style.php?nouveau=valeur">Choisir le style « valeur »</a>

Annexe : quelques liens utiles

Liens du Site du Zéro

Quelques autres sélecteurs de style

En Javascript

En PHP

Autre lien

Vous voilà enfin arrivé à la fin de ce tutoriel, j'espère ne pas avoir été trop long et surtout suffisamment clair.

Bon codage CSS !

À bientôt les Zéros.

Exemple de certificat de réussite
Exemple de certificat de réussite