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) ;
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++;
}
?>
Ce script affiche donc tout le contenu de la feuille de style.
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(*****);
?>
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.
<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(*****);
?>
<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
