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

Bienvenue à tous dans ce tutoriel fait amoureusement par votre ami de toujours : Anahkiasen ! :D
Ce tuto va vous permettre de laisser les visiteurs changer le design de votre site. Il ne demande pas d'autres connaissances que celles du cours de M@teo, et il est donc pour tous les niveaux. ;)

Qu'allons-nous faire concrètement dans ce script ? Eh bien, c'est assez simple : nous allons écrire un script qui laisse le visiteur créer son propre CSS de ses petits doigts, le modifier, et même le laisser utiliser les CSS faits par les autres utilisateurs !
Nous verrons aussi comment mettre en place une toute petite administration pour que vous gardiez le contrôle sur tout cela, et nous terminerons par deux-trois conseils. ;)

Cela vous tente ? Alors allons-y !

I. Préparons le terrain ! 1/2

Tout d'abord, il y a quelques modifications à effectuer dans votre code pour que le script fonctionne parfaitement.

Commençons par là où est attachée la feuille de style. En temps normal (c'est-à-dire avant que je vous dise de faire des modifications bizarres :-° ), vous devriez avoir quelque chose dans ce genre-ci :

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>La petite page de The M.A.N6</title>
        <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>

La ligne qui nous intéresse est la quatrième : pour que le visiteur utilise son propre CSS, il faut que cette ligne soit transformée en PHP, mais comment faire en sorte que le CSS du visiteur se mette en place uniquement si celle-ci existe ? :o
Eh bien, c'est tout simple, nous allons utiliser nos amis les cookies !

Bien, pour que tout ceci fonctionne, nous allons faire une condition en if, demandant si le cookie design_site existe ou pas. Si le cookie existe, on met donc en place le CSS du visiteur ; sinon, on met en place le CSS de base. :)
Eh bien, c'est parti !

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>La petite page de The M.A.N6</title>
<?php
        if(isset($_COOKIE['design_site']) && !empty($_COOKIE['design_site'])) // Si le cookie existe bel et bien, et s'il contient quelque chose.
        {
                /*
                Nous mettrons ici notre code plus tard, une fois que vous saurez comment tout ceci fonctionne.
                Nous reviendrons donc sur ce code dans quelque temps. ;)
                */
        }
        elseif(!isset($_COOKIE['design_site'])) // Si le cookie n'existe pas donc, on n'est pas obligé de vérifier s'il est vide, puisqu'il n'existe pas.
        {
                echo '<link rel="stylesheet" media="screen" type="text/css" title="Design de la page" href="index.css" />'; // On met le design par défaut.
        }
        else // Si pour une raison obscure, il y a un problème, ou que les conditions s'emmêlent, on met quand même le design par défaut. Question de sécurité : toujours prévoir les imprévus. :) 
        {
                echo '<link rel="stylesheet" media="screen" type="text/css" title="Design de la page" href="index.css" />'; // On met le design par défaut.
        }
?>
</head>

Voilà, voilà, votre script est prêt à accueillir notre système de CSS !
Mais en fait ce n'est pas fini (sinon ce serait trop simple), car il faut maintenant préparer votre FTP. ;)

I. Préparons le terrain ! 2/2

Je disais donc qu'il faut aussi préparer le FTP à accueillir des fichiers CSS.
Comment va marcher ce script ? Grâce aux technologies de systèmes de fichiers ! Mais pour que tout ce beau bazar fonctionne, il faut que le CHMOD de votre FTP accepte la création de fichiers. ;)

Whowho, attends, comment je règle le Sheumaud, moi ? :o

Haha, mais je suis là pour vous aider, voyons. :D
Ouvrez votre logiciel FTP favori pour effectuer cette opération : dans le cas présent, j'ai pris les screenshoots sur FTP Expert 3, mais c'est sensiblement la même chose sur à peu près tous les logiciels FTP. Au besoin, référez-vous à l'aide de votre logiciel. :)
Lorsque votre FTP est ouvert, créez un dossier où seront situés le script et les fichiers CSS, et ouvrez-en les propriétés.

Image utilisateur

On fait un clic droit sur le dossier, et on en sélectionne les propriétés.
Un panneau va s'ouvrir avec le CHMOD actuel de votre dossier. Il contient logiquement des cases à cocher (je n'ai pas vérifié) et il doit contenir le numéro CHMOD de votre dossier.
Le numéro CHMOD, c'est une valeur de trois chiffes qui détermine les droits attribués à votre dossier. Pour que le dossier soit libre en écriture, il faut régler ce numéro sur 777.

Image utilisateur

On règle le CHMOD à 777 et / ou on coche toutes les cases d'écriture.

Voilà, notre dossier est prêt à accueillir les fichiers .css de nos visiteurs. ;)

La raison est simple jeune padawan : un hébergement classique contient plus de place dans son FTP que dans sa BDD (en temps normal, hein). De plus, un fichier CSS, relativement bien garni, occupe environ 2 Ko.
Bref, ne vous faites pas de souci, ce n'est pas le CSS qui va vous manger vos 50 / 100 / +Mo de FTP. ^^
Ne serait-ce que pour remplir 1 Mo, il vous en faudrait des visiteurs qui prennent le temps de faire leur CSS ! :D

Bien, maintenant que le code et le script sont en place, on peut commencer à coder véritablement. :]

II. La création de .css

Passons maintenant aux choses sérieuses !
Pour que notre petit visiteur bien-aimé puisse créer son propre CSS, il lui faut une page où il tapera son code CSS, et une autre où il pourra venir la retoucher plus tard (bah oui, personne ne fait un beau CSS en une fois). Commençons par la première.

Commençons par faire une page PHP que nous appellerons creation_css.php.
Maintenant que le CHMOD est tout bien réglé, on peut sans problème mettre un petit formulaire pour que le visiteur tape son CSS.
Ce formulaire contiendra deux champs : dans le premier, il tapera le nom de son fichier .css (sans l'extension) ; dans le deuxième, il tapera le CSS en lui-même.
Nous vérifierons bien sûr si un fichier .css portant ce nom n'existe pas déjà, et nous limiterons le nombre de caractères pour le nom de fichier. ;)
(Sauf si bien sûr, les fichiers nommés « zretghgteuktgjfdghgfhjfdghgf.css » vous intéressent.)

Ce qui nous donne donc ceci :

<form method="post" action="creation_css.php">
Tapez le nom de votre fichier CSS sans l'extension (limite de 10 caractères) : <input type="text" name="nom_css" /><br />
Tapez ici votre code CSS :<br />
<textarea name="code_css">/* Code CSS */</textarea>
<br /><input type="submit" value="Enregistrer" />
</form>

Je vous laisse le soin d'agrandir la zone texte avec du CSS pour qu'elle soit relativement grande (c'est du CSS qu'ils vont taper dedans, hein, faut de la place !). Vous pouvez aussi revoir la mise en page. Bref, ce n'est qu'un patron de base, à vous de l'accommoder à votre sauce. ;)

Bien ! Ça c'était la partie facile, maintenant on entame les choses tordues et difficiles. :D (Haha, je suis machiavélique.)
Notre script se déroulera ainsi : d'abord, on vérifie si le fichier existe déjà ; si oui, on renvoie une erreur. Puis on tronque le nom de la page à X caractères (si besoin), et enfin, si tout s'est bien passé, on enregistre le fichier avec un petit message disant que tout s'est bien déroulé. ;)

Mais avant tout cela, il ne faut pas oublier le cookie fichier_css que nous avions prévu à la base et…

Non non, ça c'est le nom du .css qui sera affiché, pas celui du visiteur : comprenez que notre script va permettre au visiteur d'avoir son propre CSS, sans pour autant l'obliger à l'utiliser. ;)
Je vous expliquerai ça à nouveau un peu plus tard, ne vous faites pas de souci.

Bon, je disais : le problème, c'est qu'un cookie se crée au début d'une page, et qu'on va faire nos vérifications au milieu. Alors comment éviter de vérifier deux fois ? (Car avant de créer le cookie, il faut aussi vérifier que le fichier est bon.)
Eh bien, on va mettre en place un système tout bête : on crée une petite variable $verification ; si les vérifications lors de la création du cookie sont bonnes, on met la variable à 1, sinon on la laisse à 0.
Ainsi, lors des vérifications au milieu de la page, on aura juste à vérifier si la variable est à 0 ou 1. :)
Tout bête, n'est-ce pas ? Allez, on code tout ce bazar !
Au final, vous devriez obtenir quelque chose comme cela :

<?php
        if(isset($_POST['nom_css'], $_POST['code_css']) && !empty($_POST['nom_css'], $_POST['code_css'])) // Si le formulaire est rempli.
        {       
                $nom_css = substr($_POST['nom_css'], 0, 10); // On utilise substr pour ne garder que les dix premiers caractères du fichier.
                $code_css = $_POST['code_css'];
 
                if(!file_exists($nom_css. '.css')) // Si le fichier n'existe pas déjà…
                {
                        $verification = 1; // On valide la création.
                        
                        // On crée les cookies.
                        
                        $design = $nom_css. '.css';
                        $expire = mktime(00 , 00 , 00 , 01 , 01 , 2020);
                        setcookie('fichier_css' , $design , $expire);
                        
                        $design = $nom_css. '.css';
                        $expire = mktime(00 , 00 , 00 , 01 , 01 , 2020);
                        setcookie('design_site' , $design , $expire);
                }
                elseif(file_exists($nom_css. '.css')) // Si au contraire le fichier existe déjà…
                {
                        $verification = 0; // On ne valide pas la création.
                }
        }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Creation de fichiers CSS</title>
</head>
 
<body>
        <?php
                if(isset($verification) && $verification == 1)
                {
                        // On met le code dans le fichier CSS
                        $fichier = $nom_css. '.css';
                        $fichier_css = fopen($fichier, 'a+');
                        fputs($fichier_css, $code_css);
                        fclose($fichier_css);
                        echo '<p>Youki ! Le fichier .css a bien été enregistré !';
                       
                        // On recharge la page
                        print '<meta http-equiv="refresh" content="0; url=creation_css.php">';
                }
                elseif(isset($verification) && $verification == 0)
                {
                        echo '<p>Erreur ! Un fichier ayant pour nom les mêmes dix premiers caractères existe déjà, choisissez un autre nom !';
                }
        ?>

Bien évidemment, libre à vous de modifier mes ridicules messages d'erreur et de les rendre plus clairs, et de modifier le nombre de caractères autorisés, c'est votre code après tout. ;)

Euh... j'ai abusé sur la bouteille ou je vois bien DEUX cookies ? Image utilisateur

Non non, vous ne rêvez pas. :D

J'explique : comme dit précédemment, le visiteur aura le choix du design tout en pouvant créer le sien. Histoire d'aller plus loin, deux cookies vont nous permettre de laisser le visiteur créer son design sans pour autant être obligé de l'utiliser. ;) (Vous voyez, je radote.)
Comment ? Tout simplement, à la création de son design, on crée le cookie fichier_css qui indique le nom du design du visiteur, et un cookie design_site qui indique celui qu'il utilise. Par défaut, à la création de son design, le cookie design_site prend comme valeur son propre design, chose qu'il pourra changer par la suite, nous verrons ça au chapitre IV. ;)

Image utilisateur

Ah… et euh… pourquoi tu actualises après la création !?
On ne va pas charger deux fois la même page à chaque fois, quand même ? Tu veux la mort de mon serveur ou quoi ?

:-°
Disons qu'actualiser la page va nous permettre d'éviter de garder les variables POST en mémoire, ce qui nous sera bien utile dans ce cas. ;)
Je m'explique. N'avez-vous jamais actualisé une page après l'envoi d'un formulaire ? Un message apparaît et vous demande si vous voulez renvoyer les données. Eh bien grâce à ça, les variables disparaîtront à la ré-actualisation, et appuyer sur F5 comme un bourrin ne fera plus rien !
Elle est pas belle, la vie ? :D

Bien : maintenant, vos visiteurs peuvent créer leurs propres CSS. Passons à la modification de fichiers CSS !

III. La modification de .css

Comme dit précédemment, et au tout début, il faut que vos visiteurs puissent modifier leur fichier CSS : après tout, ce sont leur création. ^^

Allez-y, créez une page que vous appellerez modification_css.php.
Au début de cette page, nous allons faire quelque chose de tout bête : nous allons vérifier si le visiteur a déjà un fichier CSS (bah oui, il ne va pas modifier du vent, quand même) ; si c'est le cas, on le laisse le modifier, sinon, on le redirige vers la page de création de CSS. ;)
Pour vérifier si le visiteur a déjà un fichier, on utilise notre petit cookie.
Si le visiteur a bel et bien un .css, alors on met un petit formulaire pour qu'il puisse en modifier le contenu à sa guise.
Vous avez le plan bien en tête ? Alors on y va ! :D

Commençons par la condition de vérification, toute bête :

<?php
        if(isset($_COOKIE['fichier_css']) && !empty($_COOKIE['fichier_css']))
        {
                // On va mettre notre code ici, youki !
        }
        elseif(!isset($_COOKIE['fichier_css']))
        {
                print '<meta http-equiv="refresh" content="0; url=creation_css.php">';
        }
        else
        {
                print '<meta http-equiv="refresh" content="0; url=creation_css.php">';
        }
?>

C'était à la portée de n'importe qui, alors je vous ai un peu mâché le travail. ;)

Bien. Notre petit cookie indiquant gentiment le nom du fichier CSS, on n'a plus qu'a récupérer le contenu et à l'afficher dans un textarea. Pour cela, on va faire une boucle qui récupère ligne par ligne le contenu du fichier .css, et cette boucle se situera dans le textarea. Je ne peux pas faire plus simple. :D

On y va donc :

<?php
        // Modifications du CSS.
        if(isset($_COOKIE['fichier_css']) && !empty($_COOKIE['fichier_css']))
        {
                ?>
                <form method="post" action="modification_css.php">
                <textarea name="code_css"><?php 
                        $css = fopen($_COOKIE['fichier_css'], 'r'); // On met le fichier en r puisqu'on n'a plus besoin d'écrire dedans pour l'instant.
                        while (!feof($css)) // On utilise feof pour attendre tranquillou la fin du fichier.
                        {
                                // On récupère le code ligne par ligne.
                                $code = fgets($css);
                                echo $code;
                        }
                        
                        fclose($css);
                ?></textarea>
                <input type="submit" value="Enregistrer les modifications" />
                </form>
                <?
        }
        elseif(!isset($_COOKIE['fichier_css']))
        {
                print '<meta http-equiv="refresh" content="0; url=creation_css.php">';
        }
        else
        {
                print '<meta http-equiv="refresh" content="0; url=creation_css.php">';
        }
?>

On note l'utilisation de la fonction feof, très utile lors des interactions avec de longs fichiers. ;)

Bien : maintenant, on va ajouter un petit bout de code qui va ouvrir le fichier CSS, tout vider, et mettre le nouveau contenu à la place. J'admets, c'est une interprétation étrange du mot « modifier ». :lol:
On y va, c'est tout bête :

<?php
        // Enregistrement des modifications.
        if(isset($_POST['code_css']) && !empty($_POST['code_css']))
        {
                $fichier_css = fopen($_COOKIE['fichier_css'], 'r+'); // Cette fois on doit écrire dedans, donc r+.
                fseek($fichier_css, 0);
                fputs($fichier_css, $_POST['code_css']);
                fclose($fichier_css);
                echo '<p>Youki ! La fichier .css a bien été modifié !';
        }
?>

Bien bien, nos visiteurs peuvent désormais modifier leur petit fichier CSS à leur guise ! :)
Maintenant, la prochaine étape, c'est de leur laisser le choix de l'utiliser ou non ; pour cela, on va créer une toute petite liste qui leur permettra de sélectionner le design à utiliser.

IV. Choisir son .css

Autant vous le dire tout de suite, la partie qui va suivre est une des plus simples. ;)
On va simplement, grâce à une fonction, lister les designs à la disposition, et laisser le visiteur choisir !
Allez, c'est parti : créez donc un fichier choix_css.php. :D

Commençons par le commencement : comment ça va se présenter ? Eh bien, tout bêtement par un formulaire et un bon vieux <select> des familles.
Pour lister les fichiers .css, on va utiliser une fonction très utile, et dont personnellement je ne me lasse pas quand je fais des scripts de fichiers : glob.

On y va :

<form method="post" action="choix_css.php">
Choisissez un design : <select name="choix_css">
<!-- Ici, on va utiliser glob. -->
</select>
<input type="submit" value="Choisir ce design." />
</form>

Et on introduit notre glob réglé pour ne récupérer que les fichiers .css :

<?php
        foreach(glob("*.css") as $nom_du_fichier)
        {
                echo '<option>' .$nom_du_fichier. '</option>';
        }
?>

Bien, maintenant il faut à nouveau régler notre cookie design_site avec sa nouvelle valeur, celle contenue dans le formulaire envoyé.
Comme c'est vraiment tout simple, voici ce que vous obtenez :

<?php
        if(isset($_POST['choix_css']))
        {       
                // On modifie le cookie.
                $design = $_POST['choix_css'];
                $expire = mktime(00 , 00 , 00 , 01 , 01 , 2020);
                setcookie('design_site' , $design , $expire);
        }
?>

Eh beh, avouez que c'était vraiment tout simple. :D
(Si on connaît glob. :-° )

La prochaine étape est sensiblement identique à celle-là, excepté quelques points : c'est l'administration.
Vous allez apprendre à faire une petite page pour supprimer les .css obsolètes et autres.

V. Administrer tout ce bazar

Vous êtes d'accord avec moi : les visiteurs ne sont pas tous sérieux, à créer leurs petits CSS tranquillement ; non, il y aura toujours un plaisantin pour vider ses cookies et créer 20 fichiers .css contenant /* caca §§§ */.
C'est pour cela qu'on va créer la page suivante qui va vous permettre de supprimer tous ces fichiers stupides en un clic. ;)
Pour cela, on va faire un tableau qui liste les .css, avec deux beaux boutons Afficher et Supprimer. ^^
On y va !

Tout d'abord, créons une page admin_css.php ; je vous laisse le soin de la cacher dans un endroit sécurisé.
Commençons par la structure du tableau : ça, vous devriez pouvoir le faire seuls, mais étant d'une infinie bonté, la voilà. :-°

<table border="2" cellpadding="2" cellspacing="2">
        <tr>
                <td>
                        Nom du fichier
                </td>
                <td>
                        Afficher ce design
                </td>
                <td>
                        Supprimer ce design
                </td>
        </tr>
        <!-- Ici on va mettre notre code PHP. -->
</table>

Et pour lister ces fichiers, on va simplement faire exactement la même chose que précédemment, mais en modifiant la ligne d'echo. D'ailleurs, je vais honteusement copier-coller le script précédent. :-°
Mais à la place de cet echo, on va mettre quoi ? Eh bien tout simplement les trois colonnes ; la première avec le nom du fichier ne devrait pas vous poser de problème.
La deuxième pour l'afficher, un simple lien vers le fichier .css suffira.

Et la troisième colonne pour supprimer le fichier.

Comment supprime-t-on un fichier depuis une page ? :o

Eh bien, on utilise une autre de mes fonctions miracle : unlink(); : cette fonction supprime purement et simplement un fichier ! :p

Allez, on y va ! Ça nous donne ceci :

<?php
                foreach(glob("*.css") as $nom_du_fichier)
                {
                        ?>
                        <td><? echo $nom_du_fichier; ?></td>
                        <td><a href="<? echo $nom_du_fichier; ?>">Afficher</a></td>
                        <td><a href="admin_css.php?supprimer=<? echo $nom_du_fichier; ?>">Supprimer</a></td>
                        <?
                }
        ?>

Maintenant, il nous faut préparer un petit code qui va exploiter (avec un fouet §) la variable $_GET['supprimer']. :)
Et c'est là qu'on va utiliser notre unlink(); !
Hop hop, on obtient ce qui suit :

<?php
 
if(isset($_GET['supprimer']))
{
        unlink($_GET['supprimer']);
        echo '<p>Youki ! Le fichier a bien été supprimé !</p>';
}
 
?>

Et voilà ! je ne vous avais pas dit que ça allait être facile ? ;)
Bien, nos allons maintenant voir comment mettre en place ce code, c'est-à-dire revenir au fameux code de départ pour lequel tout le monde se demande quelle fonction tordue je vais placer dans l'espace laissé vide.
Le suspense est insoutenable… :-°

VI. La mise en place du .css

Bien, maintenant que nous avons toutes les étapes en tête, nous pouvons (enfin) revenir à notre code de départ !
Vous vous souvenez du vide que j'avais laissé pour mettre en place plus tard le système, eh bien c'est le moment de le remplir. ;)

<?php
        if(isset($_COOKIE['design_site']) && !empty($_COOKIE['design_site'])) // Si le cookie existe bel et bien, et qu'il contient quelque chose.
        {
                echo '<link rel="stylesheet" media="screen" type="text/css" title="Design de la page" href="' .$_COOKIE['design_site']. '" />'; // On met le design par défaut.
        }
        elseif(!isset($_COOKIE['design_site'])) // Si le cookie n'existe pas (par suite, on n'est pas obligé de vérifier s’il est vide, puisqu'il n'existe pas).
        {
                echo '<link rel="stylesheet" media="screen" type="text/css" title="Design de la page" href="index.css" />'; // On met le design par défaut.
        }
        else // Si pour une raison obscure, il y a un problème, ou que les conditions s'emmêlent, on met quand même le design par défaut. Question de sécurité : toujours prévoir les imprévus et toujours vérifier qu'on obtient bien ce que l'on souhaite. :]
        {
                echo '<link rel="stylesheet" media="screen" type="text/css" title="Design de la page" href="index.css" />'; // On met le design par défaut.
        }
?>

... Attends, c'est pour marquer une ligne que tu as fait du suspens jusqu'à la fin du tutoriel !? Sadique ! Vandale !

Euh… :-°
(Vite, trouver quelque chose !)
Attendez, ce n'est pas tout. :D
Vous vous souvenez que nous avons une page pour choisir le design ? Le problème c'est que ça peut vite devenir long et ennuyeux pour le visiteur de passer par cette page, alors nous allons ajouter un petit bout de code qui liste les designs en tant que feuilles de style alternatives. Comme ça nos visiteurs pourront avoir un aperçu de chaque design avant d'en choisir un. ;)
On y va ?

Je ne vais pas passer par quatre chemins, je vais utiliser glob, de la même manière que les deux fois précédentes.

<?php
// Listing des designs.
        $numero = 0;
        foreach(glob("*.css") as $nom_du_fichier)
        {
                $numero++;
                echo '<link rel="alternate stylesheet" media="screen" type="text/css" title="Design ' .$numero. ' (' .$nom_du_fichier. ')" href="' .$nom_du_fichier. '" />';
        }
?>

J'ai ajouté un petit compteur pour que ça ne fasse pas une liste trop moche. :)

Bon, notre script est enfin terminé, mais je vous accorde une chose, il est perfectible. Je vais donc, dans le chapitre suivant, vous donner deux-trois trucs pour l'améliorer un peu. ;)
C'est vraiment pas grand-chose, mais ce sera toujours ça.

VII. Trucs et astuces

On va commencer par des trucs de bas étage. :D
Tout d'abord, des messages d'erreur personnalisés lors de la création d'un design. ;)

Souvenez-vous : on a utilisé une variable $verification qu'on mettait à 0 ou 1 pour donner l'état de la situation. Eh bien ne nous arrêtons pas là, nous ne codons pas en binaire, voyons ! :lol:
Alors profitez-en et attribuez des valeurs comme 2, 3, 4, etc. (vais pas toutes les faire non plus, oh). Chaque chiffre correspondant à un message d'erreur différent. ;)
Comme ceci :

<?php
// Je zappe un peu le début, vous devez déjà l'avoir.
 
        elseif(isset($_POST['nom_css'], $_POST['code_css']) && empty($_POST['nom_css']))
        {
                $verification = 2;
        }
 
// […]
 
                elseif(isset($verification) && $verification == 0)
                {
                        echo '<p>Erreur ! Un fichier ayant pour nom les mêmes dix premiers caractères existe déjà, choisissez un autre nom !';
                }
                elseif(isset($verification) && $verification == 2)
                {
                        echo '<p>Erreur ! Veuillez donner un nom à votre design !';
                }
 
// […]
 
?>

Et voilà ! Ce n'est pas mieux quand le visiteur est bien informé du problème ? À noter que vous pouvez en mettre d'autres, en rajouter, etc., je n'ai fait que donner un exemple.

Une autre chose que vous pouvez améliorer et pas des moindres : la coloration du code CSS. ;)
Pour cela, vous pouvez utiliser différents moyens, mais c'est une piste à approfondir.

J'ai dit que vous pouviez le faire, j'ai pas dit que je savais le faire ! :-°
Mais un logiciel comme celui du SdZ (Geshi) ou un petit code personnel, même pas très abouti, qui colore les attributs et leurs valeurs est déjà quelque chose de très bien. ;)

Bon, après cette VIIe partie très courte, il est temps de passer à la conclusion, et comme c'est mon jour de bonté, je vais vous donner le code complet des pages, c'est parti, youhou ! \o/

VIII. Le code complet

Voilà donc le code complet, étant donné que tout au long de ce tutoriel je n'ai donné que des bribes de codes. ;)
Ce code est bien sûr réservé à ceux qui l'auraient mal compris dans son ensemble, ou aux grandes feignasses qui ne veulent pas lire le tutoriel en entier. :D
Évitez quand même de trop vous en servir : le meilleur moyen d'apprendre, c'est de comprendre, pas de copier-coller. ;)

À noter que ce code n'a pas été totalement vérifié, et qu'il peut subsister des erreurs ; dans ce cas, référez-vous à la conclusion tout en bas de cette page. :)

Page de création de design :

<?php
        if(isset($_POST['nom_css'], $_POST['code_css']) && !empty($_POST['nom_css']) && !empty($_POST['code_css'])) // Si le formulaire est rempli.
        {       
                $nom_css = substr($_POST['nom_css'], 0, 10); // On utilise substr pour ne garder que les dix premiers caractères du fichier.
                $code_css = $_POST['code_css'];
 
                if(!file_exists($nom_css. '.css')) // Si le fichier n'existe pas déjà.
                {
                        $verification = 1; // On valide la création.
                        
                        // On crée les cookies.
                        
                        $design = $nom_css. '.css';
                        $expire = mktime(00 , 00 , 00 , 01 , 01 , 2020);
                        setcookie('fichier_css' , $design , $expire);
                        
                        $design = $nom_css. '.css';
                        $expire = mktime(00 , 00 , 00 , 01 , 01 , 2020);
                        setcookie('design_site' , $design , $expire);
                }
                elseif(file_exists($nom_css. '.css')) // Si au contraire le fichier existe déjà.
                {
                        $verification = 0; // On ne valide pas la création.
                }
        }
        elseif(isset($_POST['nom_css'], $_POST['code_css']) && empty($_POST['nom_css']))
        {
                $verification = 2;
        }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Création de fichiers CSS</title>
<style type="text/css">
        body
        {
                font-family:    Arial, Helvetica, sans-serif;
                font-size:           small;       
        }
        input, textarea
        {
                border:                 2px ridge black;
                padding:               2px;
        }
        textarea
        {
                width:    95%;
                height:                 200px;
                font-family:    "Courier New", Courier, monospace;
                font-size:           small;
                margin:                 auto;
        }
</style>
</head>
 
<body>
<h1 align="center">Créer son CSS</h1>
        <?php
                if(isset($verification) && $verification == 1)
                {
                        // On met le code dans le fichier CSS.
                        $fichier = $nom_css. '.css';
                        $fichier_css = fopen($fichier, 'a+');
                        fputs($fichier_css, $code_css);
                        fclose($fichier_css);
                        echo '<p>Youki ! Le fichier .css a bien été enregistré !';
                        
                        // On recharge la page.
                        print '<meta http-equiv="refresh" content="0; url=creation_css.php">';
                }
                elseif(isset($verification) && $verification == 0)
                {
                        echo '<p>Erreur ! Un fichier ayant pour nom les mêmes dix premiers caractères existe déjà, choisissez un autre nom !';
                }
                elseif(isset($verification) && $verification == 2)
                {
                        echo '<p>Erreur ! Veuillez donner un nom à votre design !';
                }
        ?>
        
        <form method="post" action="creation_css.php">
        Tapez le nom de votre fichier css sans l'extension (limite de 10 caractères) : <input type="text" name="nom_css" /><br />
        <div align="center"><br /><textarea name="code_css">/* Code CSS */</textarea></div>
        <div align="center"><br /><input type="submit" value="Enregistrer" /></div>
        </form>
</body>
 
</html>

Page de modification de design :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Modification de fichiers CSS</title>
<style type="text/css">
        body
        {
                font-family:    Arial, Helvetica, sans-serif;
                font-size:           small;       
        }
        input, textarea
        {
                border:                 2px ridge black;
                padding:               2px;
        }
        textarea
        {
                width:    95%;
                height:                 200px;
                font-family:    "Courier New", Courier, monospace;
                font-size:           small;
                margin:                 auto;
        }
</style>
</head>
 
<body>
 
<?php
 
        // Enregistrement des modifications.
        if(isset($_POST['code_css']) && !empty($_POST['code_css']))
        {
                $fichier_css = fopen($_COOKIE['fichier_css'], 'r+');
                fseek($fichier_css, 0);
                fputs($fichier_css, $_POST['code_css']);
                fclose($fichier_css);
                echo '<p>Youki ! La fichier .css a bien été modifié !';
        }
 
        // Modifications du CSS.
        if(isset($_COOKIE['fichier_css']) && !empty($_COOKIE['fichier_css']))
        {
                ?>
                <form method="post" action="modification_css.php">
                <textarea name="code_css"><?php 
                        $css = fopen($_COOKIE['fichier_css'], 'r'); // On met le fichier en r puisqu'on n'a plus besoin d'écrire dedans pour l'instant.
                        while (!feof($css)) // On utilise feof pour attendre tranquillou la fin du fichier.
                        {
                                // On récupère le code ligne par ligne.
                                $code = fgets($css);
                                echo $code;
                        }
                        
                        fclose($css);
                ?></textarea>
                <input type="submit" value="Enregistrer les modifications" />
                </form>
                <?
        }
        elseif(!isset($_COOKIE['fichier_css']))
        {
                print '<meta http-equiv="refresh" content="0; url=creation_css.php">';
        }
        else
        {
                print '<meta http-equiv="refresh" content="0; url=creation_css.php">';
        }
?>
</body>
</html>

Page de choix de design :

<?php
        if(isset($_POST['choix_css']))
        {       
                // On modifie le cookie.
                $design = $_POST['choix_css'];
                $expire = mktime(00 , 00 , 00 , 01 , 01 , 2020);
                setcookie('design_site' , $design , $expire);
        }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Choix design</title>
</head>
 
<body>
        <form method="post" action="choix_css.php">
        Choisissez un design : <select name="choix_css">
        <?php
                foreach(glob("*.css") as $nom_du_fichier)
                {
                        echo '<option>' .$nom_du_fichier. '</option>';
        
                }
        ?>
        </select>
        <input type="submit" value="Choisir ce design" />
        </form>
</body>
</html>

Page d'administration de design :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Administration de Design</title>
<style type="text/css">
        /* Pour le design des tableaux, débrouillez-vous. :-° */
</style>
</head>
 
<body>
<?php
 
if(isset($_GET['supprimer']))
{
        unlink($_GET['supprimer']);
        echo '<p>Youki ! Le fichier a bien été supprimé !</p>';
}
 
?>
 
<table border="2" cellpadding="2" cellspacing="2">
        <tr>
                <td>
                        Nom du fichier
                </td>
                <td>
                        Afficher ce design
                </td>
                <td>
                        Supprimer ce design
                </td>
        </tr>
        <?php
                foreach(glob("*.css") as $nom_du_fichier)
                {
                        ?>
                        <td><? echo $nom_du_fichier; ?></td>
                        <td><a href="<? echo $nom_du_fichier; ?>">Afficher</a></td>
                        <td><a href="admin_css.php?supprimer=<? echo $nom_du_fichier; ?>">Supprimer</a></td>
                        <?
                }
        ?>
</table>
</body>
</html>

Voilà, voilà : ce tutoriel s'achève (comportant un peu trop de :) et de ;) , nous en conviendrons :-° ) ; j'espère vous avoir été utile.

Image utilisateur

Je disais donc, j'espère avoir été utile : si jamais vous décelez une erreur dans ce script, ou si vous trouvez un moyen de l'optimiser un peu, je suis à votre entière disposition dans les commentaires. ;)
Hey, n'hésitez pas à lui attribuer une note, surtout ! :D

À la prochaine ! :magicien:

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