Aller au menu - Aller au contenu

Icône Sélecteur CSS simple - Proposer différents styles

Par Avatar Glius
Mise à jour : 22/08/2008
Difficulté : Facile Facile
53 visites depuis 7 jours, classé 667/786
Dans ce tutoriel, je vais vous montrer comment utiliser plusieurs feuilles de style CSS et proposer à vos visiteurs d'en choisir une... Ainsi, chaque visiteur pourra adopter votre site en bleu / blanc / rouge, en noir / blanc, etc.
Attention : ce tutoriel vous explique comment faire quand vous avez une feuille de style CSS pour votre site... À vous de l'adapter si vous en avez plusieurs.

Pré-requis :
  • cours de HTML (formulaire, notamment) ;
  • cours de PHP (formulaire et structures simples) ;
  • utilisation des cookies (cf. cours de M@teo : ici).


Dans les deux premières parties, nous verrons comment faire simplement ce choix d'une feuille de style CSS.
Dans la troisième partie, je ferai une petite analyse de mon programme : je m'efforcerai de vous expliquer à nouveau comment fonctionne cette procédure.
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

Programme des réjouissances

Premier moment de réflexion



Il nous faut donc... :euh:
  • deux feuilles de style CSS. Je supposerai que vous les avez déjà créées. Pour ce tutoriel, je les appellerai design_orange.css et design_bleu.css.
  • un formulaire pour que l'utilisateur puisse choisir son design.
  • un petit script pour gérer la réponse du formulaire.
  • un système pour garder en mémoire le choix de l'utilisateur : le cookie semble être ce qu'il y a de mieux.

N'ayez pas peur, chaque script fait moins de 20 lignes. o_O
Retour en haut

Les différentes parties du programme

Les feuilles de style CSS



Le principe est donc simple : vous gardez la même page HTML et vous possédez deux feuilles de style CSS différentes. C'est-à-dire que vous avez votre partie HTML (je donne un exemple très basique pour ceux qui ne sauraient plus ce qu'est du HTML :p ) :

Code : HTML
1
2
3
4
5
6
7
<div id="debut">
 
     <h1>Mon super site</h1>
     <p>Grâce à <span class="nom">M@teo</span> et son site <a href="http://www.siteduzero.com">Le Site du Zér0</a>, j'ai enfin pu créer mon premier site !
     </p>
 
</div>


Nous avons aussi nos deux feuilles de style CSS (je vous en donne deux extraits issus de fichiers différents) :
Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/*design_bleu.css*/
 
#debut
{
     position: absolute;
     left: 5px;
}
h1
{
     color: black;
}


Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/*design_orange.css*/
 
#debut
{
     position: absolute;
     right: 25px;
}
h1
{
     color: red;
}


Simple, non ? :p
On a bien une même page avec différents codes de style... :)

Le formulaire



Occupons-nous maintenant du formulaire pour que l'utilisateur puisse choisir son style. Nous allons d'abord voir comment le formulaire fonctionne en renvoyant toujours sur la même page, puis ensuite en renvoyant sur la page courante.

Que nous faut-il, déjà ?

Allez... réfléchissez un peu (oui, je suis sadique !). :diable:

Première solution



Secret (cliquez pour afficher)
Le formulaire doit proposer le choix des designs et envoyer le résultat. Après, on récupèrera ce résultat et on en fera quelque chose.
J'espère que vous n'avez pas imaginé des choses trop compliquées ! :p Allez, regardons comment on doit faire et commentons.


Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<form method="post" action="site.php?choix=home">
<p>
     <label>Choix du design :<br/>
          <select name="choixdesign" onchange="this.form.submit();"><!--On envoie dès que la personne sélectionne... pas de bouton-->
               <option value="design_orange.css" <?PHP ChoixDuSelected($design,"design_orange.css"); ?> >Orange et gris</option>
               <option value="design_bleu.css" <?PHP ChoixDuSelected($design,"design_officiel.css"); ?> >Bleu et noir</option>
          </select>
     </label>
</p>
</form>



Code : PHP
1
2
3
4
5
6
7
8
9
<?PHP
function ChoixDuSelected($element1,$element2)
        {
        if($element1==$element2)
                {
                echo 'selected="selected"' ;
                }
        }
?>


Comme vous avez pu le remarquer, je n'ai pas mis de bouton mais un onchange="this.form.submit();", qui permet d'envoyer le résultat dès qu'une option a été sélectionnée. C'est très pratique pour ce petit formulaire car, ainsi, il est plus discret. :-°
Tout simplement, l'utilisateur choisit son design et on envoie par le formulaire le choix qui a été fait... Remarquez que j'ai mis dans value les noms des feuilles de style. Ça fonctionne très bien, je n'ai jamais eu de problème avec. :)

On a créé une petite fonction en PHP, nommée ChoixDuSelected, qui permet d'ajouter un attribut à notre liste d'options. Ainsi, le design courant sera le choix par défaut de la liste d'options. Le fonctionnement est simple : on compare la valeur de la variable contenant notre choix (remarquez que CETTE variable sera utilisée plus tard) à la valeur de l'attribut value du formulaire. Si ces deux éléments sont égaux, alors il s'agit du design choisi.
En effet, avec notre élément en JavaScript, le formulaire n'est validé que lorsqu'on choisit une option différente de celle affichée lorsque la liste n'est pas déroulée (le choix par défaut). Imaginez qu'il n'y ait que deux choix dans la liste, et que vous aviez choisi la deuxième. Sans l'attribut placé, vous êtes sur le premier choix par défaut. Pour changer de design, il vous faut donc en sélectionner un autre. Or, il faut changer : le premier est sélectionné par défaut et vous êtes sur le deuxième... Résultat : vous êtes coincé et ne pouvez pas changer de design.
En conclusion : vous devez utiliser cette fonction.

Deuxième solution



Comme me l'a demandé un zéro, il faudrait que le formulaire renvoie sur la page courante (c'est-à-dire celle que l'on visionne quand on veut changer de style). En fait, la réponse n'est pas si simple, car cela dépend de la façon dont vous récupérez vos pages. Je vais vous indiquer comment je fais, et je vous donnerai ma solution.

Pour commencer, il faut se souvenir comment envoyer des variables dans les adresses, c'est-à-dire avec $_GET['page']. Vous pouvez revoir ça sur les cours PHP de M@teo21.
Mon code est simple. Je n'ai qu'une page (site.php) et avec l'envoi de variables et des include, j'y inclus mes morceaux de pages. Cela signifie que le formulaire ne doit pas renvoyer sur site.php, mais sur http://www.monsite.com/site.php?page1=27&page2=07.
Voici alors la solution que j'ai adoptée pour écrire la première ligne du formulaire, c'est-à-dire à la place de <form method="post" action="site.php?choix=home"> :

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?PHP
if( isset($_GET['page1']) )
     {
     $page1=$_GET['page1'];
     }
 
if( isset($_GET['page2']) )
     {
     $page2=$_GET['page2'];
     }
 
echo '<form method="post" action="site.php?';
        if( $page1 != "" )
                {
                echo '&page1='.$choix;
                }
        if( $page2 != "" )
                {
                echo '&page2='.$choix2;
                }
echo '">';
?>


Le code est très simple, je vous laisse donc essayer de le comprendre. Au début, on récupère les variables de la barre d'adresse dans des variables simples, SI elles existent. On ne fait ensuite que récupérer l'adresse courante et la mettre dans le formulaire du design pour que ce formulaire renvoie sur la page où on se trouve actuellement. Mais n'oubliez pas alors que le traitement du formulaire doit toujours être présent.

Ce système fonctionne lorsque vous changez de page en utilisant les variables dans l'adresse. Personnellement, cela marche parfaitement sur le site dont je vous donnerai l'adresse plus tard. Bien sûr, pour que cela fonctionne, mettez bien toutes les possibilités. Si vous en oubliez une, il y aura des pages où cela ne marchera pas.

Récupérer les données du formulaire



Vous devez mettre ce petit script au début de votre page, avant la partie HTML qui indique quelle feuille de style utiliser !


Que doit faire notre script en PHP ?

Il doit récupérer le résultat de notre formulaire et enregistrer dans une variable le choix effectué par l'utilisateur. Mais n'oubliez pas qu'un visiteur qui n'a rien choisi (première visite, par exemple) doit tout de même avoir un style... :p Il faut donc un design par défaut.

Problème : lorsque l'utilisateur aura choisi son design, il va falloir garder en mémoire son choix, sans quoi au premier changement de page, on reviendra au design par défaut. :euh:
Je vous propose donc l'utilisation d'un cookie. C'est à cause de ce cookie qu'il faut placer le code en début de page !

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?PHP
$differents_designs=array("design_orange.css","design_bleu.css");

if( isset( $_COOKIE['design'] ) )
        {
        $design=$_COOKIE['design'];
	
	if( !(in_array($design,$differents_designs)) )//si le cookie indique un design inexistant
		{    
                $design="design_orange.css";
                }
        }
else
        {
        $design="design_orange.css";
        }
        
if( isset ( $_POST['choixdesign'] ) )
        {
        //On enregistre dans une variable pour le choix du design
        $design=$_POST['choixdesign'];
        
                if( !(in_array($design,$differents_designs)) )
		     {    
                     $design="design_orange.css";
                     }

        //On met dans un cookie d'une durée de vie d'un an
        $timestamp_expire=time()+365*24*60;
        setcookie('design',$design,$timestamp_expire);
 
        }
?>


Et voilà. :)

Que se passe-t-il dans ce code ?


Premièrement



On regarde s'il existe un cookie de notre site contenant les données liées au design. On rappelle que la fonction isset(X) correspond à « X existe »... Mais ça, vous devez le savoir si vous avez suivi les cours de PHP. ;)

Si ce cookie existe : on enregistre la donnée dans la variable $design. On vérifie que ce design existe (on aura créé un tableau contenant les différents designs comme vous le voyez) ; s'il n'existe pas, c'est soit une erreur de votre part, soit une tentative de piratage... :euh: On utilise alors le design par défaut. Si le design est dans le tableau, alors tout va bien et on continue. :D

Si ce cookie n'existe pas : on enregistre dans la variable $design le choix par défaut... Attention : le choix par défaut se fait ici.

Ainsi, lorsque l'utilisateur navigue de page en page, le cookie contiendra l'information liée au design.

Deuxièmement



L'utilisateur peut décider de changer de design. On regarde si des informations provenant du formulaire sont présentes.
if( isset ( $_POST['choixdesign'] ) )

Si des informations arrivent : on enregistre dans la variable $design le choix qui a été fait... On rappelle qu'il s'agira ici de design_orange.css ou de design_bleu.css. De plus, pour garder ce choix en mémoire, on l'enregistre dans un cookie. L'idée est simple (surtout si vous avez suivi les cours de PHP sur les cookies :p ) : on indique un temps d'expiration et on enregistre dans le cookie le choix du design. C'est ce cookie qui sera lu dans la première partie du code PHP.

Je vous rappelle que ce code PHP doit être placé en début de page, tout comme la fonction setcookie() qui doit être placée avant tout code HTML !


Et avec tout ça ?



Avec tout ça, il nous faut donc terminer en expliquant au navigateur quel est le style choisi...
Voyons comment nous allons nous en occuper. Regardons d'abord un code normal pour l'appel de la feuille de style CSS :

Code : HTML
1
2
3
4
5
<head>
     <title>Bienvenue sur le site de la danse des canards</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design_orange.css" />
</head>


Il nous faut donc modifier le code href="design_orange.css" et mettre celui qui nous intéresse... Rien de plus simple, puisque nous avons enregistré dans la variable $design le nom du fichier CSS qui nous intéresse et que ce code a été placé en amont de ce code HTML (regardez, j'ai laissé l'ouverture de la balise HTML) !
Il nous faut donc changer la partie concernée en :

Code : PHP
1
<link rel="stylesheet" media="screen" type="text/css" title="Design" href=<?PHP echo "\"$design\""; ?> />


Et voilà ! L'appel de votre feuille de style CSS se fera donc par ce simple echo dans la balise <link>. :p

Simple, isn't it ? :lol:
Retour en haut

Une petite analyse des résultats

Ici, rien d'important ; juste une étude du petit algorithme que je vous ai proposé, au cas où vous n'en auriez pas trop compris la logique.


Si un nouvel utilisateur arrive...



Il n'a pas de cookie contenant des informations sur le choix du design, il tombe donc sur le design par défaut (ici, design_orange.css).
Puisqu'il n'a pas non plus soumis le formulaire, la deuxième partie du script PHP ne fera rien.

Cet utilisateur change de design...



Dans le petit formulaire créé, l'utilisateur va changer de design en sélectionnant le noir et bleu. Une fois que ce choix est fait (on rappelle qu'il n'y a pas de bouton et que seule la sélection valide le formulaire), le formulaire renvoie donc au code PHP.

Mais... que va-t-il se passer ? :euh:

N'ayant auparavant jamais demandé de changement de design, il n'a pas de cookie enregistré : la première partie du code PHP ne fera donc rien. La deuxième partie va par contre prendre en compte son choix et l'enregistrer dans un cookie. Et donc faire appel à l'autre design dans la balise <link>.

L'utilisateur navigue sur le site...



À chaque changement de page, on peut lire le cookie créé lors du changement de design et appliquer le design qui a été choisi à la dernière visite. En fait, à chaque changement de page (sans utiliser le formulaire), on lit l'information du cookie et on la réutilise.

L'utilisateur rechange de design...



La différence avec tout à l'heure ? Il n'y avait pas de cookie... o_O
Ici, comme pour une navigation simple, on enregistre dans la variable $design l'information contenue dans le cookie...
Mais vu qu'on fait appel au formulaire, la demande de changement de design va écraser la donnée déjà présente dans le cookie.

Bourrin, vous dites ?
Non, pas du tout. ^^

Et si l'utilisateur n'accepte pas les cookies ?


Deux solutions.
  • Il n'aura alors pas le choix, et devra utiliser le design par défaut. Mais vous pouvez toujours glisser dans le formulaire une petite commande pour vérifier l'utilisation de cookies : si l'utilisateur demande à changer de design, vous enregistrez son choix dans la variable, vous vérifiez qu'il accepte les cookies. Si oui, vous faites ce que je vous ai proposé plus haut. Si non, vous placez un message (une simple ligne quelque part sur le site, un pop-up, etc.) pour lui indiquer qu'il doit accepter les cookies pour qu'à son prochain changement de page, il ne revienne pas sur le design par défaut... :-°
  • Utiliser un système de sessions (cf. le cours de M@teo ici). Un défaut : lorsque l'utilisateur reviendra plus tard sur le site, il tombera sur le choix par défaut.

Mais bon, une bonne partie des utilisateurs emploie les cookies.
Retour en haut

Q.C.M.

Ce code peut toujours être amélioré... Mais combien peut-on avoir de designs au maximum ?
Où peut-on mettre le code PHP ?

Statistiques de réponses au QCM

Retour en haut
Eh voilà... Maintenant, vos visiteurs pourront se ravir du choix qui leur est laissé. :p

Si vous avez plusieurs feuilles de style CSS, n'hésitez pas à créer plusieurs cookies. Lors du choix d'un design, à vous de régler l'enregistrement des différentes feuilles de style dans différents cookies.


Bien sûr, vous pouvez créer un troisième style, un quatrième, etc. :p C'est exactement le même principe.

Si vous avez des questions, vous pouvez me joindre par MP ou demander de l'aide sur le forum. J'espère ne pas avoir fait d'erreurs, mais j'utilise moi-même ce système sur le site que j'ai programmé (grâce aux cours du SdZ :magicien: ).

En espérant que ça vous plaise,
Bien à vous,
Glius. :)

Je tiens à remercier ptipilou, zCorrecteur, pour tout son travail sur ce tutoriel : sa correction claire, ses conseils très utiles et sa bonne humeur ! :D
Retour en haut

Partager

Retour en haut
25 commentaires pour "Sélecteur CSS simple - Proposer différents styles"
Note moyenne : 3.30 / 4 (10 votes)
Pseudo Commentaire
Hors ligne oliverpool # Posté le 17/02/2011 à 23:11:07
Vive les citations !
Avatar

Études : Polytechnique

 A propos de la "Deuxième solution", n'est-il pas possible de récupérer directement l'array $_GET et à l'aide d'un "foreach" recopier toutes les variables envoyés par $_GET ?
(à la reflexion, un system similaire pourrait être fait pour les $_POST en insérant autant de champs "hidden" que nécessaire)
[PHP] Zebra Form : une classe simple et efficace de validation de formulaire (serveur + JS), à essayer d'urgence !

- Si le destin est contre moi : tant pis pour lui !
 
Hors ligne dryusdan # Posté le 05/06/2011 à 23:42:28
Avatar
Flux RSS
close

Super tuto, bien expliquer, mais cela ne fonctionne pas (je l'es marqué ici



Autrement 20/20 pour toi et un replongeage dans le php pour moi :( ^^ (serieusement, je suis en plein dedans)
Pas de nouvelle Bonne nouvelle
Pas de news informatique Mauvaise nouvelle
Un robot spammeur? Viens ici alors :)
Image utilisateur
 
Hors ligne loulou85 # Posté le 22/08/2011 à 12:28:01
Avatar

 Bonjour, déjà bravo et merci pour ce tuto qui ma permis d'apprendre de nouvelles choses bien pratique encore une fois =)
Sinon j'ai testé ton code avec la 1ère solution et il y a une petite erreur qui fait que cela ne fonctionne pas totalement il me semble. Je propose de modifier une ligne de ton code :
Code : PHP
1
<option value="design_bleu.css" <?PHP ChoixDuSelected($design,"design_officiel.css"); ?> >Bleu et noir</option>

par :
Code : PHP
1
<option value="design_bleu.css" <?PHP ChoixDuSelected($design,"design_bleu.css"); ?> >Bleu et noir</option>


Le 2ème fichier css s'appelant design_bleu.css et non design_officiel.css
J'ai procédé à la modification et depuis tout semble fonctionner..

Edit: 2ème petite erreur toute bête :
Code : PHP
1
2
//On met dans un cookie d'une durée de vie d'un an
        $timestamp_expire=time()+365*24*60;

Ca ne fait pas un an, pour avoir un an il faut : + 365*24*3600

ps : désolé si j'ai déterré le sujet (2mois sans commentaires)


loulou
Ma vidéo de Space-painting ! ;)

Mon TP sur le php pour mettre en pratique les cours de matéo : c'est ici !
 
Hors ligne Guenhwyvar # Posté le 12/02/2012 à 20:45:55
Avatar

 Citation : Le tuto
Comme vous avez pu le remarquer, je n'ai pas mis de bouton mais un onchange="this.form.submit();", qui permet d'envoyer le résultat dès qu'une option a été sélectionnée. C'est très pratique pour ce petit formulaire car, ainsi, il est plus discret. :-°

Et si le javascript est désactivé, le formulaire est inutilisable. Vraiment très pratique, en effet.
Hors ligne Ratchet1 # Posté le 11/04/2012 à 03:51:54
Galaxy Save
Avatar

Avis : Très bon

Très bon tutoriel, merci :)

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.