Gérer son CSS en ligne

Introduction du cours

Dans ce tuto, vous allez réaliser un script PHP pendant que je siroterai un cocktail peinard je vous aiderai. Ce script permettra de changer facilement le CSS en ligne.

Connaissances requises :

• notion du CHMOD et écriture / lecture dans un fichier (ici pour ceux qui ne connaissent pas) ;

• PHP/MySQL, ça risque d'être utile. :p

Fonctionnement

Avant de vous lancer corps et âme dans la réalisation de ce script, regardons le fonctionnement et l'organisation que je vous propose :

• un fichier style.css dans laquelle sera placé... le CSS :p ;

• une page css.php où l'on affichera le fichier CSS et où l'on traitera les modifications ;

• une page modif.php, pour modifier le code ;

• une page rajout.html, quand on rajoutera du code.

Voici la structure de la table SQL à créer :

CREATE TABLE `css` ( `id` tinyint(4) NOT NULL AUTO_INCREMENT, `commentaire` varchar(50) collate latin1_general_ci NOT NULL, `code` varchar(255) collate latin1_general_ci NOT NULL, KEY `id` (`id`) )

Commençons par la page css.php, dans laquelle on affichera le fichier CSS et on traitera les modifications :

<?php // ------------------------------------------- // On affiche le fichier // ------------------------------------------- $fichier=fopen("style.css","r"); $compteur=1; while (!feof($fichier)) // Tant que l'on n'est pas à la fin du fichier { $ligne=fgets($fichier); echo $compteur.'.'.nl2br($ligne); $compteur++; } ?>

La fonction feof()(end of files) vérifie si l'on est à la fin du fichier, elle renvoie true si c'est le cas.

Ce script affiche donc tout le contenu de la feuille de style.

L'utilisation de la BDD

Mais pourquoi utiliser une base de données ? :euh:

Pour faciliter la gestion du code, vous allez voir.

Attaquons-nous au fichier rajout.html, il devra comporter un formulaire :

<form method="POST" action="css.php"> Commentaires : <input type="text" name="commentaire" size=25/><br /> Code : <br /><textarea name="code" cols=30 rows=8></textarea><br /> <input type="submit" value="Rajouter" name="rajout"/>

Revenons dans le fichier css.php pour traiter ce formulaire :

<? mysql_connect(******,******,*******);// Connexion à la BDD mysql_select_db(*******);// N'oubliez pas de remplacer les ***** // ------------------------------------------- // Vérif. 1 : Est-ce qu'on rajoute quelque chose ? // ------------------------------------------- if(isset($_POST['rajout'])) { $commentaire=$_POST['commentaire']; $code=$_POST['code']; mysql_query("INSERT INTO css VALUES('','".$commentaire."','".$code."')");// On rajoute tout ça dans la base de données } // ------------------------------------------- // On affiche le fichier // ------------------------------------------- $fichier=fopen("style.css","r"); $compteur=1; while (!feof($fichier)) { $ligne=fgets($fichier); echo $compteur.'.'.nl2br($ligne); $compteur++; } mysql_close(*****); ?>

Enfin, la page modif.php permettra de modifier ces entrées :

<form method="POST" action="css.php"> <?php mysql_connect(******,******,*******);// Connexion à la BDD mysql_select_db(*******);// N'oubliez pas de remplacer les ***** $retour=mysql_query('SELECT * FROM css');// On récupère les entrées $id=0; while ($donnees=mysql_fetch_array($retour)) { echo "<input size=25 type='text' value='".$donnees['commentaire']."' name='style[$id][commentaire]' />"; // Le champ de texte du commentaire echo "<a href='css.php?supr=".$donnees['id']."'>Supprimer</a><br />"; // Le lien pour supprimer un code echo "<textarea name='style[$id][code]' cols=30 rows=8>".$donnees['code']."</textarea><br/>"; // Un textarea qui contiendra le code echo "<input type='hidden' name='style[$id][id]' value='".$donnees['id']."' />"; // Un champ caché pour récupérer l'id du code echo "<br /><br />"; $id++; } mysql_close(*****); ?> <input type="submit" value="Modifier" name="modifier"/>

On a créé un tableau 'style' dans $_POST pour chaque code, regardons comment l'exploiter dans css.php :

<?php mysql_connect(******,******,*******);// Connexion à la BDD mysql_select_db(*******);// N'oubliez pas de remplacer les ***** // ------------------------------------------- // Vérif. 1 : Est-ce qu'on rajoute quelque chose ? // ------------------------------------------- if(isset($_POST['rajout'])) { $commentaire=$_POST['commentaire']; $code=$_POST['code']; mysql_query("INSERT INTO css VALUES('','".$commentaire."','".$code."')"); } // ------------------------------------------- // Vérif. 2 : Est-ce que l'on modifie le code ? // ------------------------------------------- if (isset($_POST['modifier'])) { $p = $_POST['style'];// On décale les tableaux d'un rang foreach($p as $key =>$s) { $code=$s['code']; $commentaire=$s['commentaire']; $id=$s['id']; mysql_query( 'UPDATE css SET code=\''.$code.'\', commentaire=\''.$commentaire.'\' WHERE id='.$id.' '); } } // ------------------------------------------- // On affiche le fichier // ------------------------------------------- $fichier=fopen("style.css","r"); $compteur=1; while (!feof($fichier)) { $ligne=fgets($fichier); echo $compteur.'.'.nl2br($ligne); $compteur++; } mysql_close(*****); ?>

Et on rajoute un script pour supprimer un code :

<?php mysql_connect(******,******,*******);// Connexion à la BDD mysql_select_db(*******);// N'oubliez pas de remplacer les ***** // ------------------------------------------- // Vérif. 1 : Est-ce qu'on rajoute quelque chose ? // ------------------------------------------- if(isset($_POST['rajout'])) { $commentaire=$_POST['commentaire']; $code=$_POST['code']; mysql_query("INSERT INTO css VALUES('','".$commentaire."','".$code."')"); } // ------------------------------------------- // Vérif. 2 : Est-ce que l'on modifie le code ? // ------------------------------------------- if (isset($_POST['modifier'])) { $p = $_POST['style']; // On décale les tableaux d'un rang foreach($p as $key =>$s) { $code=$s['code']; $commentaire=$s['commentaire']; $id=$s['id']; mysql_query( 'UPDATE css SET code=\''.$code.'\', commentaire=\''.$commentaire.'\' WHERE id='.$id.' '); } } // ------------------------------------------- // Vérif. 3 : On essaye de supprimer quelque chose ? // ------------------------------------------- if (isset($_GET['supr'])) { $id=$_GET['supr']; mysql_query( "DELETE FROM css WHERE id=".$id." "); } // ------------------------------------------- // On affiche le fichier // ------------------------------------------- $fichier=fopen("style.css","r"); $compteur=1; while (!feof($fichier)) { $ligne=fgets($fichier); echo $compteur.'.'.nl2br($ligne); $compteur++; } mysql_close(*****); ?> Écriture

Maintenant, on va s'occuper de l'écriture du fichier.
Nous allons l'ouvrir en mode « w », ce qui permet d'écraser tout le contenu :

<?php mysql_connect(******,******,*******);// Connexion à la BDD mysql_select_db(*******);// N'oubliez pas de remplacer les ***** // ------------------------------------------- // Vérif. 1 : Est-ce qu'on rajoute quelque chose ? // ------------------------------------------- if(isset($_POST['rajout'])) { $commentaire=$_POST['commentaire']; $code=$_POST['code']; mysql_query("INSERT INTO css VALUES('','".$commentaire."','".$code."')"); } // ------------------------------------------- // Vérif. 2 : Est-ce que l'on modifie le code ? // ------------------------------------------- if (isset($_POST['modifier'])) { $p = $_POST['style'];// On décale les tableaux d'un rang foreach($p as $key =>$s) { $code=$s['code']; $commentaire=$s['commentaire']; $id=$s['id']; mysql_query( 'UPDATE css SET code=\''.$code.'\', commentaire=\''.$commentaire.'\' WHERE id='.$id.' '); } } // ------------------------------------------- // Vérif. 3 : On essaye de supprimer quelque chose ? // ------------------------------------------- if (isset($_GET['supr'])) { $id=$_GET['supr']; mysql_query( "DELETE FROM css WHERE id=".$id." "); } // ------------------------------------------- // On écrit dans le fichier // ------------------------------------------- $fichier=fopen("../style.css","w"); // On l'ouvre en mode « w » $retour = mysql_query('SELECT * FROM css'); while ($donnees = mysql_fetch_array($retour)) { $message .= $donnees['code']; $message .="\n";// Retour à la ligne } fputs($fichier, $message); fclose($fichier); // ------------------------------------------- // On affiche le fichier // ------------------------------------------- $fichier=fopen("style.css","r"); $compteur=1; while (!feof($fichier)) { $ligne=fgets($fichier); echo $compteur.'.'.nl2br($ligne); $compteur++; } mysql_close(*****); ?>

N'oubliez pas d'ajouter des liens entre ces pages.

Code final

Voila donc les trois pages au final :

css.php

<a href="modif.php">Modifier le code</a> <a href="rajout.html">Rajouter une balise </a> <?php mysql_connect(******,******,*******);// Connexion à la BDD mysql_select_db(*******);// N'oubliez pas de remplacer les ***** // ------------------------------------------- // Vérif. 1 : Est-ce qu'on rajoute quelque chose ? // ------------------------------------------- if(isset($_POST['rajout'])) { $commentaire=$_POST['commentaire']; $code=$_POST['code']; mysql_query("INSERT INTO css VALUES('','".$commentaire."','".$code."')"); } // ------------------------------------------- // Vérif. 2 : Est-ce que l'on modifie le code ? // ------------------------------------------- if (isset($_POST['modifier'])) { $p = $_POST['style'];// On décale les tableaux d'un rang foreach($p as $key =>$s) { $code=$s['code']; $commentaire=$s['commentaire']; $id=$s['id']; mysql_query( 'UPDATE css SET code=\''.$code.'\', commentaire=\''.$commentaire.'\' WHERE id='.$id.' '); } } // ------------------------------------------- // Vérif. 3 : On essaye de supprimer quelque chose ? // ------------------------------------------- if (isset($_GET['supr'])) { $id=$_GET['supr']; mysql_query( "DELETE FROM css WHERE id=".$id." "); } // ------------------------------------------- // On écrit dans le fichier // ------------------------------------------- $fichier=fopen("style.css","w"); // On l'ouvre en mode « w » $retour = mysql_query('SELECT * FROM css'); while ($donnees = mysql_fetch_array($retour)) { $message .= $donnees['code']; $message .="\n";// Retour à la ligne } fputs($fichier, $message); fclose($fichier); // ------------------------------------------- // On affiche le fichier // ------------------------------------------- $fichier=fopen("style.css","r"); $compteur=1; while (!feof($fichier)) { $ligne=fgets($fichier); echo $compteur.'.'.nl2br($ligne); $compteur++; } mysql_close(*****); ?>

rajout.html

<a href="css.php">Index css</a> <code type="html"><form method="POST" action="css.php"> Commentaires : <input type="text" name="commentaire" size=25/><br /> Code : <br /><textarea name="code" cols=30 rows=8></textarea><br /> <input type="submit" value="Rajouter" name="rajout"/>

modif.php

<a href="css.php">Index css</a> <a href="rajout.html">Rajouter une balise </a> <form method="POST" action="css.php"> <?php mysql_connect(******,******,*******);// Connexion à la BDD mysql_select_db(*******);// N'oubliez pas de remplacer les ***** $retour=mysql_query('SELECT * FROM css');// On récupère les entrées $id=0; while ($donnees=mysql_fetch_array($retour)) { echo "<input size=25 type='text' value='".$donnees['commentaire']."' name='style[$id][commentaire]' />"; // Le champ de texte du commentaire echo "<a href='css.php?supr=".$donnees['id']."'>Supprimer</a><br />"; // Le lien pour supprimer un code echo "<textarea name='style[$id][code]' cols=30 rows=8>".$donnees['code']."</textarea><br/>"; // Un textarea qui contiendra le code echo "<input type='hidden' name='style[$id][id]' value='".$donnees['id']."' />"; // Un champ caché pour récupérer l'id du code echo "<br /><br />"; $id++; } mysql_close(*****); ?> <input type="submit" value="Modifier" name="modifier"/>

Et vous devriez obtenir quelque chose comme ça :
css.php

rajout.html

modif.php

Et voilà, ce tutoriel touche à sa fin.
Amusez-vous bien à changer votre CSS directement depuis votre site. :p

• #

Waouh !

Très heureux de voir que nos cours vous plaisent, déjà 3 pages lues aujourd'hui ! Vous pouvez continuer la lecture de nos cours en devenant un Roomie, un membre de la communauté d'OpenClassrooms. C'est gratuit !

Vous pourrez aussi suivre votre avancement dans le cours, faire les exercices et discuter avec les autres Roomies.

S'inscrire Se connecter

• Thématiques du cours : PHP Web

Chaque cours est créé par un professeur ou un expert dans le domaine. Il est composé d'une ou plusieurs parties et peut comporter du texte, des images (schéma, illustration) et des vidéos. Chaque partie d'un cours certifiant est ponctuée d'exercices de 2 types : Des quiz corrigés automatiquement Des devoirs libres (exemple : créer un site web avec des consignes précises). Ces devoirs sont évalués par les pairs. Chaque devoir est corrigé 3 fois par 3 autres élèves, dans un processus en double aveugle, selon un barème fixé par le professeur. La note finale est...