CRER UN LIEN "CHANGER DE DESIGN"
Inclu un exemple hébergé !
- Tutoriel proposé par la RGPC
- Ecrit par Maxence103
- Code entièrement crée par Moi
- Images de
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Bonjour à tous, c'est max
Aujourd'hui je vous retrouve pour un tutoriel très simple à réaliser mais qui a l'air compliqué. Celui de créer un bouton "changer de design".
SUPPORT HEBERGE !!!
) , vous pourrez tester autant de fois que vous voulez.
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
LE CREER
).N'ayez pas peur du nombre de ligne, qui est pas énorme à la fin (70 lignes pour toute la page ).
Tout d'abord, comment ça marche ? Je vais vous donner d'abord les 4 pages à créer.
style-bleu.css
HTML:
h1 {
color: blue;
}style-rouge.css
HTML:
h1 {
color: red;
}style-vert.css
HTML:
h1 {
color: green;
}__________________________________
Une fois ça fait, créez un fichier index.php et ouvrez le.
Alors, qu'est-ce qu'on aimerait finalement : quand on clique sur un bouton , ça nous switch entre les différents fichiers CSS. Nous allons utiliser les sessions.
Enfin bref, voici le fichier type:
HTML:
<html>
<head>
<title>Tutoriel RealityGaming</title>
<br /><br />
<a href="?change=vert">Design Vert</a> - <a href="?change=rouge">Design Rouge</a> - <a href="?change=bleu">Design bleu</a>
</head>
<body>
<h1>Test</h1>
</body>
</html>Nous allons stocké le choix de l'utilisateur dans la variable de session $_SESSION['skin']. Alors, nous lancons la session.
PHP:
<?php
session_start();
?>
<html>
...Mais maintenant, si la variable de session n'existe pas il va nous falloir lui attribuer une valeur par défaut : je vais prendre la valeur de défaut que ça va être le style bleu...
PHP:
<?php
session_start();
if(!isset($_SESSION['skin'])) // Si $_SESSION['skin'] n'existe pas...
{
$_SESSION['skin'] = "bleu"; // On lui affecte la valeur "bleue"
}
?>
<html>
...Nickel, on a fait ça. Maintenant, il reste plus qu'à faire les conditions qui diront que si $_SESSION['skin'] == "rouge" (exemple) alors inclure style-rouge.css (c'est un exemple).
Donc c'est pas plus compliqué que ça:
PHP:
<?php
session_start();
if(!isset($_SESSION['skin'])) // Si $_SESSION['skin'] n'existe pas...
{
$_SESSION['skin'] = "bleu"; // On lui affecte la valeur "bleue"
}
?>
<html>
<head>
<?php
if($_SESSION['skin'] == "bleu")
{
?>
<LINK rel="stylesheet" type="text/css" href="style-bleu.css" />
<?php
}
?>
<?php
if($_SESSION['skin'] == "rouge")
{
?>
<LINK rel="stylesheet" type="text/css" href="style-rouge.css" />
<?php
}
?>
<?php
if($_SESSION['skin'] == "vert")
{
?>
<LINK rel="stylesheet" type="text/css" href="style-vert.css" />
<?php
}
?>
<title>Tutoriel RealityGaming</title>
</head>
<body>
...__________________________________
Maintenant, nous avons presques finis : nous allons faire le petit script qui va nous permettre de changer de design. Vous l'avez peut être vu, les liens "Design XXXX" mène à ce lien:
index.php?change=XXXX
Alors, il va falloir mettre un petit bout de code d'office :
PHP:
<?php
session_start();
if(!isset($_SESSION['skin'])) // Si $_SESSION['skin'] n'existe pas...
{
$_SESSION['skin'] = "bleu"; // On lui affecte la valeur "bleue"
}
if(isset($_GET['change'])) // Si index.php?change= existe
{
}
[/COLOR]Ce code servira à , si jamais l'utilisateur clique sur le lien (arrive donc sur index.php?change=XXXX) alors il aura un code en plus.
Pour recommencer, on va vérifier si l'utilisateur n'a pas modifié ce qu'il y après le change=
PHP:
<?php
session_start();
if(!isset($_SESSION['skin'])) // Si $_SESSION['skin'] n'existe pas...
{
$_SESSION['skin'] = "bleu"; // On lui affecte la valeur "bleue"
}
if(isset($_GET['change'])) // Si index.php?change= existe
{
if($_GET['change'] != "bleu" && $_GET['change'] != "vert" && $_GET['change'] != "rouge")
{
echo("Merci de selectionner un bon style !");
$_SESSION['skin'] = "bleu"; // On rétabli le skin par défaut
}
[/COLOR]
} // Fin $_GET['change']Si jamais ils donnent une fausse valeur, alors on lui restaure le design par défaut (bleu).
Maintenant, qu'est-ce qu'on attend pour changer la variable de $_SESSION['skin'], sachant que tout est vérifié ?
On ajoute ce petit bout de code important:
PHP:
<?php
<?php
session_start();
if(!isset($_SESSION['skin']))
{
$_SESSION['skin'] = "bleu";
}
if(isset($_GET['change']))
{
if($_GET['change'] != "bleu" && $_GET['change'] != "vert" && $_GET['change'] != "rouge")
{
echo("Merci de selectionner un bon style !");
$_SESSION['skin'] = "bleu"; // On rétabli le skin par défaut
}
// ON LUI CHANGE LE DESIGN
if($_GET['change'] == "vert")
{
$_SESSION['skin'] = "vert";
}
if($_GET['change'] == "rouge")
{
$_SESSION['skin'] = "rouge";
}
if($_GET['change'] == "bleu")
{
$_SESSION['skin'] = "bleu";
}
}
?>
CODE EN ENTIER
index.php
PHP:
<?php
session_start();
if(!isset($_SESSION['skin']))
{
$_SESSION['skin'] = "bleu";
}
if(isset($_GET['change']))
{
if($_GET['change'] != "bleu" && $_GET['change'] != "vert" && $_GET['change'] != "rouge")
{
echo("Merci de selectionner un bon style !");
$_SESSION['skin'] = "bleu"; // On rétabli le skin par défaut
}
if($_GET['change'] == "vert")
{
$_SESSION['skin'] = "vert";
}
if($_GET['change'] == "rouge")
{
$_SESSION['skin'] = "rouge";
}
if($_GET['change'] == "bleu")
{
$_SESSION['skin'] = "bleu";
}
}
?>
<html>
<head>
<?php
if($_SESSION['skin'] == "bleu")
{
?>
<LINK rel="stylesheet" type="text/css" href="style-bleu.css" />
<?php
}
?>
<?php
if($_SESSION['skin'] == "rouge")
{
?>
<LINK rel="stylesheet" type="text/css" href="style-rouge.css" />
<?php
}
?>
<?php
if($_SESSION['skin'] == "vert")
{
?>
<LINK rel="stylesheet" type="text/css" href="style-vert.css" />
<?php
}
?>
<title>Tutoriel RealityGaming</title>
<br /><br /></head>
<a href="?change=vert">Design Vert</a> - <a href="?change=rouge">Design Rouge</a> - <a href="?change=bleu">Design bleu</a>
<body>
<h1>Test</h1>
</body>
</html>[/COLOR]style-bleu.css
HTML:
h1 {
color: blue;
}style-rouge.css
HTML:
h1 {
color: red;
}style-vert.css
HTML:
h1 {
color: green;
}
FIN
En espérant que ce tutoriel vous plaira
C'est pas souvent qu'on voit des exemples hébergés
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
