[Intermédiaire] Créer des feuilles de style dynamique pour obtenir un en-tête aléatoire

Cas pratique :

Pour un site, j'ai décidé que je voulais avoir des images au niveau de l'en tête ET que cette image n'est pas dans le corps de la page mais en arrière plan. Donc c'est la feuille CSS qui indique le chemin de l'image
Ce que je veux c'est que les images apparaissent aléatoirement à chaque changement de page.
Je désire également pouvoir rajouter des images quand j'en aurai envie et ne pas avoir à chaque fois à rajouter une ligne de code dans ma feuille de style, car je suis pour l'économie de travail !

Mon idée :

1. Je vais mettre mes images dans un dossier spécifique et les nommer avec un numéro. Toutes mes images seront du même type, à savoir.png car elle n'ont pas d'arrière plan (fond transparent)
2. Je vais utiliser la fonction de génération de chiffre aléatoire de PHP
3. Je vais indiquer le nom de mes images dans une table (Base de Donnée)
4. Je vais créer de manière dynamique ma feuille de style pour qu'elle se créé toute seule et se mette à jour à chaque fois que j'ajoute une nouvelle image !

Le but de ce tuto :

Ce tutoriel va vous montrer comment réaliser cette feuille de style dynamique !
La feuille de style fera appel à la BDD et générera le code grâce à une boucle.

On commence

Le nom de ma feuille de style qui ne servira qu'à l'affichage des images aléatoires sera: random_header.php (ce qui en français voudrait dire: en tête aléatoire)
Le nom de ma page qui pilote le site est: index.php
Le nom de ma feuille de style principale est: simsartists.css
Le nom de mon dossier contenant les images est: random
L'identifiant de ma division dans laquelle s'affiche l'image est: cosmo soit #cosmo pour le .css
Le nom de ma table est: table_aleatoire

Cliquez pour visualiser la structure :

Spoiler:

1. Index.php :

A. Appel de la feuille de style

Jusqu'à présent au niveau de mon code j'ai ceci pour appeler ma feuille de style:

Code:

<link href="css/simsart.css" type="text/css" rel="stylesheet"/>

Voici à présent ce que l'on rajoute pour l'appel des feuilles, on va avoir :

Code:

<link href="css/simsart.css" type="text/css" rel="stylesheet"/>
<link href="css/random_header.php" type="text/css" rel="stylesheet"/>

B. Appel des information dans ma base de donnée

Amélioration du code par Intell

Code:

<?php
/* *****************EN TETE ALEATOIRE ****************** */
#1# On détermine le nombre d'image que l'on a dans notre base de donnée
$sql_limite = mysql_query('SELECT image_alea FROM table_aleatoire ORDER BY rand() LIMIT 1');
$row = mysql_fetch_array($sql_limite);
$image_header = $row['image_alea'];
?>

Directement dans ma requête on va demander de selectionner une image. On ordonne selon une valeur aléatoire (Rand()) et on n'affiche seulement un résultat avec limit

C. La division

Actuellement ma division possède un identifiant:

Code:

<div id="cosmo">
</div>

On peut pour une même balise avoir un identifiant et une ou plusieurs classes. J'en profite:

Code:

<div id="cosmo" class="random<?php echo $image_header; ?>">
</div>

Ainsi s'accolera à random le numéro tiré au hasard (class="random4") qui fera référence à la classe renseignée dans notre feuille de style dynamique, qu'il ne nous reste plus qu'à créer


2. Les feuilles de style :

A. simsartists.css

Pendant la création de mon site (parce que là, on le customise) j'ai utilisé une image fixe.
Voici la ligne de code relative à l'apparition de l'image :

Code:

#cosmo {width: 900px; margin: auto; height: auto; background: url(../img/background_cosmo) no-repeat top right;}

On va la changer pour cela car ce n'est plus elle qui indique l'image

Code:

#cosmo {width: 900px; margin: auto; height: auto;}

En pratique on ne peut pas mettre du PHP à l'intérieur une feuille de style (.css).
En revanche on peut indiquer qu'une feuille .php va servir de feuille de style .css

B. random_header.css

Code:

<?php
//----------------- INDICATION DE COMPORTEMENT -------------------
header('content-type: text/css');

//----------------- CONNEXION A LA BASE DE DONNEE -------------------
mysql_connect($hote,$uti,$pas);
mysql_select_db('nomdelabade') or die ('la connexion a échoué');
$req=mysql_query("SET NAMES 'utf8'");

Code:

//----------------- REQUETE DE RECUPERATION DES DONNEES -------------------
$sql_css = mysql_query('SELECT * FROM `table_aleatoire`');
while ($record_css = mysql_fetch_array($sql_css))
 {
echo '.random'.$record_css['id_alea'].' { background: url(../images/random/'.$record_css['image_alea'].'.png) no-repeat top right;}';
 }
?>

Les lignes de codes sont à la suite, je les ai séparé pour éviter que le forum ne me fiche un ascenseur... Si vous trouvez ça moins lisible ou plus perturbant, dites le moi !

La ligne header doit TOUJOURS se mettre en premier et cela avant quoi que ce soit !!!

On enchaine avec une petite boucle pour qu'il écrive tout seul les lignes et ce sera tout !

Spoiler:

Pour conclure:

Ici vous avez un exemple mais surtout vous savez à présent que l'on peut générer des feuilles CSS avec du PHP. A vous de laisser jouer votre imagination !

Remarque des membres:

PlyPikachu m'a fait remarquer que l'on peut également si on ne souhaite pas passer par une feuille de style, pour obtenir cet effet, écrire le style directement dans les balises.
La version OldSchool mais qui fonctionne tout aussi bien.

Code:

<div id="cosmo" style="background-image: url('<?php echo $banniereRandom; ?>');"></div>

Pour ma part, les styles c'est dans les .css. La preuve encore qu'il y a de multiples manière de coder  

Super tuto!!
C'est super bien expliqué vu que j'y connais rien de rien en PHP mais j'ai réussi à suivre (sauf là où ya des codes, je comprends pas très bien...).

OUAHHHHHHHHHHHHHHHHH Fuyaya un SUPER GROS MERCI pour ce tuto....C'est ce genre de choses que personnellement j'attendais

J'espère que tu ne vas pas t'aretter là, parce que là tant pis pour toi, tu m'as mis en appetit

Et d'ailleurs j'ai déjà une question sur ces 2 points là:

Citation :

2. Je vais utiliser la fonction de génération de chiffre aléatoire de PHP
3. Je vais indiquer le nom de mes images dans une table (Base de Donnée)

... Pourquoi accéder forcément par la base de données du forum (ce qui prend quand même un peu de temps) alors que la définition en mémoire d'un tableau rempli avec des nombres aléatoires serait suffisant et plus rapide ? surtout que pour un cas comme celui ci on ne doit pas avoir des milliers d'images à disposition ?


Bonne continuation et A +++

L'avantage d'une Base de Données (que j'abrègerai BdD après) est qu'elle peut s'incrémenter toute seule. Par exemple, quand on ajoute une image, il faut un nombre aléatoire compris entre 1 et le nombre maximale d'images. Si on a 8 images par exemple, il faut pouvoir aller de 1 à 8, sauf, problème si on ajoute une neuvième image... La BdD incrémente un champ, normalement ID, servant à repérer l'image dans la table. On peut se servir de ce numéro pour la boucle et le random. Demander ainsi un PHP un chiffre compris entre 1 et le n°ID de la dernière image pour la retrouver ensuite dans la BdD

Merci pour le tuto ma belle! J'ai presque tout compris!

Merci beaucoup à tous deux pour l'explication que je vais tâcher de mettre rapidement en pratique...

A++++

Super Fu' !

J'adore ce genre de tutos Je l'ai pas lu en entier, car j'ai du mal à lire sur un écran, mais je l'ai imprimé
Grâce à toi, je pourrais faire un beau site ! Merci infiniment !

super tuto Fu' ! Très utile, et surtout pour un résultat original !

Jour,

Question...En relisant le tuto je tombe sur:

Citation :

2. Les feuilles de style :

A. simsartists.css

Pendant la création de mon site (parce que là, on le customise) j'ai utilisé une image fixe.
Voici la ligne de code relative à l'apparition de l'image :
Code:
#cosmo {width: 900px; margin: auto; height: auto; background: url(../img/background_cosmo) no-repeat top right;}

...En css (ou je ne sais pas comment tu appelles cette syntaxe Fuyaya) le # en début de ligne ce n'est pas pour mettre la ligne justement en commentaire ??? (comme c'est le cas dans pas mal de language de développement ?)

Zano >> Non pas du tout !

C'est du CSS qu'a mit Fu' là... le signe dièse ( # ) signifie ID. Donc #cosmo, signifie l'élément d'ID égale à COSMO.
Les commentiare en CSS se font comme cela :
/* commentaire */

J'espère que ça te va !

Tout comme l'a dit Tchou (je note un tuto sur les .css et un tuto sur la rédaction de code et les commentaires)

En fait au niveau de la feuille de type .css, les commentaires s'écrivent ainsi /* */
Que ce soit pour les commentaire une ou multi ligne
Ce qui t'as perturbé c'est qu'en PHP on peut avoir des commentaires une ligne introduit par // ou #

Je te fait bref, je ferai un tuto plus tard:
sur la feuille .html ou .php: < div id="cosmo" >
correspondance pour la feuille .css: # cosmo {width:100px; text-align:center;}

sur la feuille .html ou .php: < div class="gonie">
correspondance pour la feuille .css: .gonie{width:200px; color:#5869ff;}

OK les filles Merci pour vos explications et en passant mes excuses à ValSims3 (Bon courage, félicitations pour le poste et bonne continuation)

A++++

Je sais que ça date un peu ce sujet, mais si quelqu'un venait à l'utiliser, je vais vous donner mon avis.
J'ai déjà fait la même chose pour un projet et je crois avoir fait l'erreur de ne pas adapter la solution à mon cas particulier.
En php, on utilise fréquemment une base de données, et parfois, on finit, à mon humble avis, par en abuser. x)

Si vous prévoyez changer fréquemment vos bannières (plusieurs fois par mois)
J'apporterais quelques améliorations au code donné. Puisqu'on change régulièrement les images, on en supprime donc, on en ajoute, la suite d'ID (id_alea) n'est plus continue, compter le nombre d'images et prendre une valeur aléatoire ne donnera peut-être pas une image existante.
Pour résoudre cet ennui, eh bien, tant qu'à faire une requête, allons chercher directement une image aléatoire dans la table:

Code:

$sql_limite = mysql_query('SELECT image_alea FROM table_aleatoire ORDER BY rand() LIMIT 1');
$row = mysql_fetch_array($sql_limite);
$image_header = $row['image_alea'];

Ensuite pour afficher la page on mettrait:

Code:

<div id="cosmo" style="background-image: url('<?php echo $image_header; ?>.png');"></div>

En gros, dans la requête on a demandé d'aller chercher une image (LIMIT 1), prise aléatoirement (ORDER BY rand()).
Ainsi, on fait une seule requête au lieu de 2 et on s'assure d'avoir une image valide.

Mais avec le temps vous vous rendrez compte que vous n'ajoutez pas tant d'images que ça... D'où l'autre solution.
Si vous ne prévoyez pas changer fréquemment vos bannières (Quelques fois par année)
Comme l'avait souligné zano972, l'usage d'un tableau serait dans ce cas plus approprié. Oui, il faut modifier le code à chaque fois, mais bon, quand on le fait peu souvent...

Code:

$Images = array(0=>'fuyaya1', 1=>'fuyaya2', 2=>'fuyaya3', 3=>'fuyaya4', 4=>'fuyaya5', 5=>'pomme_kiwi1', 6=>'pomme_kiwi2', 7=>'pomme_kiwi2', 8=>'nienna1', 9=>'sucreomiel1', 10=>'sucreomiel2', 11=>'fuyaya6');
$KeyRand = array_rand($Images, 1);
$image_header = $Images[$KeyRand[0]];

En gros, on construit le tableau (array), on tire une clé du tableau au hasard (fonction array_rand, qui retourne une clé au hasard).

Par la suite on fait comme avec l'autre cas pour afficher l'image. Cette solution a l'avantage d'exécuter aucune requête, ce qui accélèrera la vitesse d'exécution de la page.

J'ai modifié le code puisque qu'il peut être condensé par la requête SQL.

Par contre je ne vois pas l'intérêt de dissocier des pratiques qui serait utilisation rare ou utilisation fréquente. Une base de donnée en place n'est pas fonction de la fréquence, pourquoi écrire un tableau en dur dans le code alors que PHP génére des tableaux de données.

Intell a écrit:

En php, on utilise fréquemment une base de données, et parfois, on finit, à mon humble avis, par en abuser. x)

En fait tout l'intérêt de PHP est l'interrogation et la mobilisation des données d'une base. C'est ce qui fait qu'un site est dynamique.
L'exemple est simple mais tout l'intérêt de la base est la mise en place d'un module de gestion des bannières qui permet ajout, modification et suppression. mais également des traitements d'image (redimensionnement, crop ou les deux)

Quand à la vitesse d'execution de la requête sur des requêtes lourdes cela est à prendre en considération mais dans ce cas c'est ce priver de dynamisme et se contraindre à venir modifier du code. Donc je maintiens que l'utilisation de tableau dans ce contexte dans la mesure où l'on a une base de donnée en place n'a pas lieu d'être. La base servant également à la génération du code css, avec un tableau c'est aussi prendre le risque d'oublier de changer les données dans les différents fichiers

EDIT : visiblement le tuto date d'avant nos résolution de nettoyage je m'en occuperai

Je comprends que la base de données a tout l'intérêt d'être dynamique sauf que... Une banque d'images pour une image aléatoire qui change peu ou pas, c'est très peu dynamique.

En fait c'est plus une réflexion que l'utilisateur doit se faire au moment de la mise en place. Je ne dis pas que l'une est préférable à l'autre. Il y a pleins de méthodes et chacune a ses avantages.

Je peux parler du cas de http://lamapaluzza.free.fr/, un projet qui remonte à plusieurs années (5 ans je dirais). C'était mon 2e projet en PHP et j'ai fait exactement ce que j'ai décrit dans le précédent message, je vais chercher à chaque fois dans la base de données. Quand on y pense, combien d'images ont été ajoutées depuis? Une seule, il y a 5 ans. Combien de fois ont été vues les pages? Des milliers de fois.

Le plus flexible, c'est d'avoir la base de données pour conserver l'information et puis écrire un fichier contenant le tableau à chaque fois qu'on modifie les images. Je fais la même chose sur Challenges Sims, sur la page d'un challenge je ne fais pas de requête à chaque fois, une seule, à sa modification, pour créer un fichier « cache ».