Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > PHP > Points particuliers > Gérer son CSS en ligne > Lecture du tutoriel

Gérer son CSS en ligne

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)
Avatar
 Auteur : Timot
Note : 17 / 20 (8 votes)
Visualisations : 15 080

Plus d'informations Plus d'informations
Dans ce tuto, vous allez réaliser un script php pendant que je siroterai un cocktail peinard je vous aiderai. Ce script permettra de facilement changer 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
Sommaire du tutoriel :
Icône du chapitre

Fonctionnement

Avant de vous lancer corps et âme dans la réalisation de ce script, regardons le fonctionnement et l'organisation de ce script :
- un fichier style.css dans laquelle s'écrira ... 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 table SQL à créer :
Code : SQL
1
2
3
4
5
6
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 :
Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?php
//-------------------------------------------
//On affiche le fichier
//-------------------------------------------
$fichier=fopen("style.css","r");
$compteur=1;
while (!feof($fichier)) //tant que l'on n'est pas a 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 :
Code : HTML
1
2
3
4
<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 :
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
<?
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 :
Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<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 :
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
<?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 :
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
<?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 :
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
<?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 de rajouter des liens entres ces pages.

Code final

Voila donc les trois pages au final :
css.php
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
<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
Code : HTML
1
2
3
4
5
<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
Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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
Image utilisateur

rajout.html
Image utilisateur


modif.php
Image utilisateur

Q.C.M.

Quelle est la fonction qui vérifie si l'on est à la fin d'un fichier ?

Statistiques de réponses au QCM

Et voilà, ce tuto touche à sa fin.
Amusez-vous bien à changer votre CSS directement en ligne.
Retour en haut Retour en haut


Créé : le 25/11/2006 à 12:22:59
Modifié : le 22/08/2008 à 16:08:13
Avancement : 90%
Licence : Copie non autorisée

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news
Édité par Simple IT SARL : Nous contacter | Notre blog | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 166 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.0286s (0.0179s)