Changer le design d'un site en un clique avec AJAX

Attention, depuis PHP 5.5.0, certaines extensions SQL sans doute utilisées dans ce tutoriel peuvent être obsolètes et seront supprimées dans le futur, vous devez donc adapter les codes! Exemples ici.
Nous allons voir dans ce tutoriel comment modifier l'apparence d'un site en un clique en utilisant AJAX. En gros, nous allons permettre à l'internaute de choisir le design d'une page ou d'un site parmi une sélection sans aucun rechargement. Vous pouvez visualiser la démonstration ici » Changer de design en un clique.

Pour partir sur la même base, créer un dossier "images" contenant les 4 images suivantes :bleu noir vert violet
Créer ensuite un second dossier nommé "styles" qui va contenir les 4 fichiers suivant :

defaut.css :
body{
background:black;
}
#centre {
background:white;
position : absolute;
left : 50%;
top : 50%;
width : 400px;
height : 300px;
margin-top : -150px;
margin-left: -200px;
padding:5px;
text-align:center;
color:#000;
}
#centre a{
color:#000;
text-decoration:none;
}
.design{
width:11px;
height:11px;
cursor:pointer;
}
bleu.css :
body{
background:#98B6BE;
}
#centre {
background:white;
position : absolute;
left : 50%;
top : 50%;
width : 400px;
height : 300px;
margin-top : -150px;
margin-left: -200px;
padding:5px;
text-align:center;
color:#98B6BE;
}
#centre a{
color:#98B6BE;
text-decoration:none;
}
.design{
width:11px;
height:11px;
cursor:pointer;
}
vert.css :
body{
background:#BCC59B;
}
#centre {
background:white;
position : absolute;
left : 50%;
top : 50%;
width : 400px;
height : 300px;
margin-top : -150px;
margin-left: -200px;
padding:5px;
text-align:center;
color:#BCC59B;
}
#centre a{
color:#BCC59B;
text-decoration:none;
}
.design{
width:11px;
height:11px;
cursor:pointer;
}
violet.css :
body{
background:#B79A9D;
}
#centre {
background:white;
position : absolute;
left : 50%;
top : 50%;
width : 400px;
height : 300px;
margin-top : -150px;
margin-left: -200px;
padding:5px;
text-align:center;
color:#B79A9D;
}
#centre a{
color:#B79A9D;
text-decoration:none;
}
.design{
width:11px;
height:11px;
cursor:pointer;
}
Dans ces 4 feuilles de styles, seule les couleurs changes.

Nous créons ensuite une simple page nommé "index.php" :
<?php
//On déclare une session
session_start();
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<title>Changer de design en un clique</title>
<?php
//La variable $style prend comme valeur le nom de la session
$style =(isset($_SESSION['design'])) ? $_SESSION['design'] : 'defaut';
echo '<link rel="stylesheet" type="text/css" href="styles/'.$style.'.css" />';
?>
<script type="text/javascript" src="fonctions.js"></script>
</head>
 
<body>
 
<div id="centre">
Changer de style :
<span class="design" title="bleu" onclick="ajax('bleu');"><img src="images/bleu.gif" alt="bleu" /></span>
<span class="design" title="vert" onclick="ajax('vert');"><img src="images/vert.gif" alt="vert" /></span>
<span class="design" title="violet" onclick="ajax('violet');"><img src="images/violet.gif" alt="violet" /></span>
<span class="design" title="defaut" onclick="ajax('defaut');"><img src="images/noir.gif" alt="defaut" /></span><br/>
<a title="Page suivante" href="page1.php">Page 1</a><br/>
</div>
 
</body>
</html>
Résumons un peut cette page "index.php".
On déclare une session en début de page.
On utilise le nom de la session en tant que nom de fichier CSS.
On fait appel à un fichier nommé "fonctions.js" contenant le code AJAX.
On fait appel à une fonction nommé "ajax()" dont les noms de fichiers CSS sont passés en paramètres.

Créer ensuite une seconde page nommé "page1.php" dont le code est identique à la page "index.php". Seule le lien doit être modifier pour pointer vers vers la page "index.php".

Passons maintenant à la création des fonctions AJAX en créant un fichier nommé "fonctions.js".

Dans un premier temps, on déclare une fonction d'instance :
//Fonction d'Instance
function objet_XMLHttpRequest()
{
    var xhr = null;
 
    if (window.XMLHttpRequest || window.ActiveXObject){
        if(window.ActiveXObject){
            try{
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e){
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        else{
            xhr = new XMLHttpRequest();
        }
    }
    else{
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
    }
    return xhr;
}
Dans un second temps, on créer la fonction "ajax()" qui prend en paramètre un seul argument :
//Fonction permettant d'envoyer les données
function ajax(couleur)
{
    //On déclare un objet
    var objet1 = objet_XMLHttpRequest();
 
    //On défini ce qu'on va faire quand on aura la réponse
    objet1.onreadystatechange = function(){
        //On ne fait quelque chose que si on a tout reçu et que le serveur est ok
        if(objet1.readyState == 4 && objet1.status == 200){
            //On envoie la réponse à la fonction "creer_style()"
            creer_style(objet1.responseText);
        }
        //côté ajax ça merde
        else{
            //on contrôle le statut. Si 404, le fichier ouvert par "open" n'existe pas
            if(objet1.status == 404){
                alert('Erreur ' +objet1.status + '! Le fichier php semble être absent...');
            }
        }
    }
    //Ouverture : méthode, fichier, mode (true=asynchrone | false=synchrone)
    objet1.open("POST", "ajax.php" , true); 
    objet1.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    //envoie
    objet1.send("couleur=" + couleur);
}
Théoriquement vous devez comprendre le code ... mais nous allons voir rapidement 2 points.
1- Le fichier de traitements se nomme "ajax.php". Nous allons créer ce fichier un peut plus tard.
2- La réponse obtenue par "objet1.responseText" est traité par une seconde fonction nommé "creer_style()".

Dans un troisième et dernier temps, nous créons une fonction nommé "creer_style()" qui va prendre en paramètre la réponse de l'objet "objet1.responseText". Cette dernière fonction va permettre de créer le lien vers la feuille de style sélectionné en créant une balise "link" de toute pièce.
//Fonction permettant de créer une balise "link"
function creer_style(couleur){
    //élément à créer
    var lien = document.createElement("link");
    //attribut de l'élément
    lien.setAttribute("rel", "stylesheet");
    lien.setAttribute("type", "text/css");
    lien.setAttribute("href", "styles/"+couleur);
    //si l'objet est différent de "undefined", on l'ajoute entre <head> et </head>
    if (typeof lien != "undefined");
    document.getElementsByTagName("head")[0].appendChild(lien);
}
Pour finir, on créer un fichier nommé "ajax.php" qui va servir à traiter la donnée envoyé par "$_POST" en créant une simple session et en renvoyant la réponse via un "echo".
<?php
//On déclare une session
session_start();
//La variable $couleur prend comme valeur la variable $_POST['couleur'] si elle existe sinon c'est "defaut"
$couleur =(isset($_POST['couleur'])) ? $_POST['couleur'] : 'defaut';
//On créer la session
$_SESSION['design'] = $couleur;
//On affiche la couleur qui est récupéré dans "objet1.responseText" de la fonction "ajax()"
echo $couleur;
?>
Voir/déposer un commentaire (0) | Signaler un problème