Créez facilement un CSS Style Switcher en PHP pour votre site Internet

Le but de cet exercice est de pouvoir proposer à un visiteur plusieurs styles de présentation différents. Il s'agira d'une liste déroulante grâce à laquelle le visiteur pourra choisir le style, l'apparence du site visité. Diverses méthodes existent déjà en JavaScript, mais l'inconvénient majeur est que certains utilisateurs ne l'activent pas. Une solution consiste donc à utiliser un langage côté serveur tel que PHP. Cette solution a donc la particularité d'être plus fonctionnelle que son équivalent en JavaScript. Seule une minorité de visiteurs ne pourront profiter de la persistance du style entre les différentes pages vues, s'ils n'autorisent pas les cookies.

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Création du commutateur ou plus communément appelé switcher

Nous allons créer à la racine du site un fichier switch.php qui va s'occuper de créer le cookie chez le client (le visiteur). Pour cela, nous allons utiliser la fonction setcookie.

 
Sélectionnez
<?php
  $validite = time() + 60 * 60 * 24 * 31 * 2; // deux mois en secondes

  // on considère que register_globals est désactivée, ainsi ce script fonctionnera quelle que soit la configuration
  if (isset($_GET['style'])) {
    /* le style a été passé en méthode GET, dans l'URL */
    $style = $_GET['style'];
  }
  else if (isset($_POST['style'])) {
    /* le style a été passé en méthode POST, dans les en-têtes HTTP */
    $style = $_POST['style'];
  }

  if (isset($_GET['redirection'])) {
    /* l'adresse de la page en cours est passée en méthode GET, dans l'URL */
    $redirection = $_GET['redirection'];
  }
  else if (isset($_POST['redirection'])) {
    /* l'adresse de la page en cours a été passée en méthode POST, dans les en-têtes HTTP */
    $redirection = $_POST['redirection'];
  }

  // protection contre les petits malins qui tenteraient de pirater le site
  // le nom du style ne peut contenir que des caractères alphanumériques et les caractères _ et -
  $style = preg_replace('#[^a-zA-Z0-9_-]#', '', $style);

  // on vérifie qu'il s'agit bien d'un lien interne
  // il doit commencer par http://monsite.com/ 
  if (strpos($redirection, 'http://'.$_SERVER['SERVER_NAME'].'/') === false || strpos($redirection, 'http://'.$_SERVER['SERVER_NAME'].'/') != 0) {
    /* tentative de piratage ? on remplace par la racine du site */
    $redirection = 'http://'.$_SERVER['SERVER_NAME'].'/';
  }

  setcookie('feuilleStyle', $style, $validite, '/', $_SERVER['SERVER_NAME'], 0);

  // on n'utilise pas le HTTP_REFERER car ce n'est pas fiable et les proxy ne l'envoient pas
  header("Location: $redirection");
?>

Détails concernant la fonction setcookie :

  • feuilleStyle est le nom du cookie ;
  • $style est la valeur du cookie, ici, il s'agit d'une variable contenant le nom du style, plus précisément le nom du fichier de la feuille de style sans le .css ;
  • $validite doit être un Timestamp Unix, il représente la date de validité du cookie. Ici, il s'agit d'une date calculée en fonction de la date de création. Une période de plusieurs mois semble être une bonne valeur. En supposant que vous ajoutiez de nouveaux styles, vous pouvez mettre une période courte afin que l'utilisateur ait à rechoisir un style et donc voie ceux ajoutés. Ici, je laisse deux mois ;
  • '/' est le chemin du serveur sur lequel le cookie sera disponible. Ici, le cookie sera disponible sur l'ensemble du domaine www.votredomaine.com, à vous de choisir la portée du cookie ;
  • $_SERVER['SERVER_NAME'] est le domaine où sera disponible (lisible) le cookie. Normalement, cela conviendra à la plupart des configurations, si cela ne fonctionne pas, indiquez clairement le nom de votre domaine ;
  • 0 indique qu'une connexion sécurisée HTTPS n'est pas nécessaire.

Une fois le cookie créé, la fonction header redirige l'utilisateur vers la page d'où il vient grâce à l'utilisation de la variable $redirection qui contient justement l'adresse de cette page.

Lorsque le visiteur sélectionne un style, un cookie est créé est le style affiché. Lors d'une prochaine visite, si le visiteur n'a pas effacé ses cookies et s'il revient avant la date d'expiration, le serveur s'aperçoit de l'existence d'un cookie, le style correspondant est affiché. Bien entendu, un style par défaut sera automatiquement défini si le cookie n'existe pas.

II. Choix du style

Deux méthodes sont applicables, soit vous préférez proposer des liens pour le changement de style, à la manière de www.csszengarden.com en utilisant donc la méthode GET, soit en utilisant un formulaire, quelle que soit la méthode (POST ou GET) à la manière de www.openweb.eu.org. Nous allons détailler les deux.

Utilisation de liens :

 
Sélectionnez
<ul>
 <li><a href="/switch.php?style=simple&redirection=http://<?php echo $_SERVER['SERVER_NAME'].str_replace('&', '&amp;', $_SERVER['REQUEST_URI']); ?>">Style simple</a></li>
 <li><a href="/switch.php?style=ocean&redirection=http://<?php echo $_SERVER['SERVER_NAME'].str_replace('&', '&amp;', $_SERVER['REQUEST_URI']); ?>">Style Océan</a></li>
 <li><a href="/switch.php?style=montagne&redirection=http://<?php echo $_SERVER['SERVER_NAME'].str_replace('&', '&amp;', $_SERVER['REQUEST_URI']); ?>">Style Montagne</a></li>
 <li><a href="/switch.php?style=depouille&redirection=http://<?php echo $_SERVER['SERVER_NAME'].str_replace('&', '&amp;', $_SERVER['REQUEST_URI']); ?>">Style dépouillé</a></li>
 <li><a href="/switch.php?style=fortcontraste&redirection=http://<?php echo $_SERVER['SERVER_NAME'].str_replace('&', '&amp;', $_SERVER['REQUEST_URI']); ?>">Style à fort contraste</a></li>
</ul>

Vous l'aurez compris, il suffit d'appeler la page switch.php située à la racine du site en lui passant deux arguments : le nom du style et l'adresse de la page sur laquelle on se trouvait lorsque l'on a décidé de changer de style. Une fois que le cookie est défini, vous êtes redirigé sur la page que vous étiez en train de visualiser avec la feuille de style sélectionnée. Cette technique a quelques limites : si la page depuis laquelle nous avons choisi de changer de style a reçu des paramètres par la méthode POST, impossible de retourner ces paramètres dans la redirection, l'affichage de la page dépendra donc de la manière avec laquelle elle aura été codée.

Utilisation d'une liste déroulante dans un formulaire :

 
Sélectionnez
<form action="/switch.php" method="post">
 <!-- vous pouvez choisir d'utiliser la méthode GET, le fonctionnement en sera le même -->
 <fieldset>
   <legend>Changez de style...</legend>
   <select name="style">
    <option value="simple"<?php if ($_COOKIE['feuilleStyle'] == 'simple') { echo ' selected="selected"'; } ?>>Style simple</option>
    <option value="ocean"<?php if ($_COOKIE['feuilleStyle'] == 'ocean') { echo ' selected="selected"'; } ?>>Style Océan</option>
    <option value="montagne"<?php if ($_COOKIE['feuilleStyle'] == 'montagne') { echo ' selected="selected"'; } ?>>Style Montagne</option>
    <option value="depouille"<?php if ($_COOKIE['feuilleStyle'] == 'depouille') { echo ' selected="selected"'; } ?>>Style dépouillé</option>
    <option value="fortcontraste"<?php if ($_COOKIE['feuilleStyle'] == 'fortcontraste') { echo ' selected="selected"'; } ?>>Style à fort constrate</option>
   </select>
   <input type="hidden" name="redirection" value="http://<?=htmlspecialchars($_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'])?>" />
   <input type="submit" value="Changer" />
 </fieldset>
</form>

Même fonctionnement avec la liste déroulante, sauf que vous n'avez pas à vous soucier de la manière avec laquelle sont envoyées les données. Vous avez juste à nommer correctement la liste. Les valeurs seront transmises suivant la méthode utilisée.

III. Détection des styles

Maintenant que le style est choisi, il suffit de détecter lequel a été choisi par le visiteur, et d'afficher la mise en page correspondante. Tout se passe entre les balises <head> et </head> de la page.

 
Sélectionnez
<link rel="stylesheet" type="text/css" media="screen" title="Style de l'utilisateur" href="<?php echo (isset($_COOKIE['feuilleStyle'])) ? $_COOKIE['feuilleStyle'] : 'simple' ; ?>.css" />

Voilà, maintenant vous devriez avoir un joli changeur de thèmes fonctionnant sur tous les navigateurs qui sont compatibles avec CSS bien sûr. Inutile de préciser que le menu de choix des styles, et l'appel de la feuille de style doivent être inclus dans chaque page du site et que chacune de ces pages doit porter l'extension .php. Vous pouvez également, grâce à ce système, mettre des conditions dans le code pour afficher ou non certaines parties de la page, ici il ne s'agit plus alors de CSS, mais de la structure de l'arbre grammatical (HTML ou XHTML). Toute critique est la bienvenue par message privé sur le forum.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2002 Matthieu PETIOT. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.