[Plan du site]
Vous êtes ici ---
> Le Site du Zér0
> Les tutoriels
> Non-Officiels
> Site Web
> PHP
> Points particuliers
> Lecture du tutoriel
Laisser les visiteurs utiliser leur propre CSS
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Bienvenue à tous dans ce tutoriel fait amoureusement par votre ami de toujours : Anahkiasen !
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 niveaux.
Qu'allons-nous faire concrètement dans ce script ? Eh bien c'est assez simple : nous allons ici faire un script qui laisse le visiteur créer son propre CSS de ses petits doigts, de le modifier, et même de 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 !
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 :
Code : HTML1
2
3
4
5 | <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 ne se mette en place
uniquement si celle-ci existe ?
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 la CSS du visiteur ; sinon, on met en place le CSS de base.
Eh bien c'est parti !
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 | <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 quelques temps. ;)
*/
}
elseif(!isset($_COOKIE['design_site'])) // Si le cookie n'existe pas donc, on n'est pas obligés 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 ça serait trop simple), car il faut maintenant préparer votre FTP.
Je disais donc : il faut aussi préparer le FTP à accueillir des fichiers CSS.
Car comment va marcher ce script ? Eh bien 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 ?
Haha, mais je suis là pour vous aider, voyons.
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.
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 (pas vérifié) mais 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.
À noter que pour les personnes hébergées chez Free, il est impossible de modifier le CHMOD. Cette manoeuvre vous est donc interdite.
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.
Damned ! Mais ça va pas, la tête ? Je vais quand même pas stocker les fichiers
.css de TOUS mes visiteurs !?
Pourquoi on ne les stocke pas dans une BDD, d'abord ?
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, prend dans les ~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 !
Bien, maintenant que le code et le script sont en place, on peut commencer à coder véritablement. :]
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 petit 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 :
Code : HTML1
2
3
4
5
6 | <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 (hey, 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
(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évus à la base et...
Keuâ ? Je croyais qu'on l'appelait design_site, le cookie ! >_>
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, ça 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, et sinon on la laisse à 0.
Et lors des vérifications au milieu de la page, on aura juste à vérifier si la variable est sur 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 :
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53 | <?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'erreurs 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 ?
Non non, vous ne rêvez pas.
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.
Ah... et euh... pourquoi t'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 ?
Bien : maintenant, vos visiteurs peuvent créer leur propre CSS. Passons à la modification de fichiers CSS !
Comme dit précédemment, et au tout début, il faut que vos visiteurs puissent modifier leur fichiers CSS : après tout, ce sont leurs créations.
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 !
Commençons par la condition de vérification, toute bête :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14 | <?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.
On y va donc :
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 | <?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 puisque on n'a plus besoin d'écrire dedans pour l'instant
while (!feof($css)) // On utilise feof pour attendre tranquilloum 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".
On y va, c'est tout bête :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11 | <?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 petits fichiers 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.
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 design à la disposition, et laisser le visiteur choisir !
Allez, c'est parti : créez donc un fichier
choix_css.php.
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 :
Code : HTML1
2
3
4
5
6 | <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 :
Code : PHP1
2
3
4
5
6 | <?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ée.
Comme c'est vraiment tout simple, voici ce que vous obtenez :
Code : PHP1
2
3
4
5
6
7
8
9 | <?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.
(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.
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 virer tout 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à
:
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14 | <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 les 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èmes.
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 ?
Eh bien on utilise une autre de mes fonctions miracle :
unlink(); : cette fonction supprime purement et simplement un fichier !
Allez, on y va ; ça nous donne cela :
Code : PHP 1
2
3
4
5
6
7
8
9
10 | <?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 cela :
Code : PHP1
2
3
4
5
6
7
8
9 | <?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, nous 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...
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, et bien c'est le moment de le remplir
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14 | <?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 si 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 tutorial !? Sadique ! Vandale !
Euh...
(Vite, trouver quelque chose)
Attendez, ce n'est pas tout
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.
Code : PHP1
2
3
4
5
6
7
8
9 | <?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.
On va commencer par des trucs de bas étage.
Tout d'abord, des messages d'erreurs 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 !
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 :
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
// 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 ? A noter que vous pouvez en mettre d'autres, en rajouter, etc., je n'ai fait que donner un exemple.
Autre chose que vous pouvez améliorer et pas des moindres, colorer le code CSS.
Pour cela, vous pouvez utiliser différents moyens, mais c'est une piste à approfondir.
Bheuw attends ! Tu pourrais nous filer le code ! Salaud !
J'ai dit que vous pouviez le faire, j'ai pas dit que je savais le faire !
Mais des logiciels 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/
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.
Évitez quand même de trop vous en servir : le meilleur moyen d'apprendre, c'est de comprendre, pas de copier-coller.
A 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.
Secret (cliquez pour afficher)Page de création de design :
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91 | <?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 :
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72 | <!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 tranquilloum 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 :
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 | <?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 :
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
34
35
36
37
38
39
40
41
42
43
44
45
46 | <!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.
Non, j'ai tout copié-collé !
Muqhqhqhqh...
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 !
A la prochaine !
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
497 Zéros connectés |
8 requêtes |
0.2331s (0.1344s)
