> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Site Web

> PHP

> Systèmes complets (PHP)

> Créer un avatar qui change

> Lecture du tutoriel

Créer un avatar qui change

Par

Almaju

Mise à jour : 20/08/2010

Difficulté : Facile Facile

56 visites depuis 7 jours, classé 661/786

Bonjour !
Vous avez vu sur les forums ?
Certains membres ont un avatar qui change tout le temps. o_O

C'est quoi ?
Je vais essayer de vous l'expliquer dans ce tuto.

Retour en haut

Sommaire du tutoriel :

On prépare !
Au hasard !
Par rapport à une date
Headers
Compilation
Résultat et comment l'améliorer
Annexe : comment transformer un .php en .png ?

Retour en haut

On prépare !

Avant de commencer la partie PHP, nous allons choisir nos images !
En voici trois de mon choix :
Image utilisateur

Maintenant, passons au PHP ! Pour préparer le code, on va faire un tableau $liste[] qui contient le nom de chacune des images.
À vous !
Code : PHP

1 2	<?php $liste = array("firefox_normal.png", "firefox_lumière.png", "firefox_simple.png");

Vous remarquerez que les valeurs sont constituées du nom de mes images.

La puissance de glob

Il existe une alternative moins contraignante, glob() !

Comment cela fonctionne-t-il ?

Code : PHP

1 2	<?php $listeDesFichiers = glob('*.png');

Cette variable va contenir tous les fichiers ayant l'extension .png de notre répertoire courant.

Si je veux être plus malin, je peux faire ainsi :
Code : PHP

1 2	<?php $listeDesFichiers = glob('firefox/*');

C'est tout de même plus propre de regrouper toutes nos images dans un seul répertoire

!
Comme vous l'avez sûrement remarqué, je n'ai pas mis l'extension cette fois-ci : je suppose que tous mes fichiers stockés ici sont des images

, je peux ainsi mettre autant d'images que je veux et avec l'extension que je veux.

Passons aux choses sérieuses. :pirate:

Retour en haut

Au hasard !

Nous voulons qu'au hasard, notre script choisisse l'une de ces 3 images et nous l'affiche.
Il existe une fonction pour ça : mt_rand.
Elle agit comme ceci : mt_rand(nombreMinimal, nombreMaximal).

Ex : mt_rand(5, 10) me donne un nombre qui est soit 5, 6, 7, 8, 9 ou 10. :magicien:

Nous allons donc sélectionner notre image au hasard.

À vous !
Secret (cliquez pour afficher)

Code : PHP

1 2	<?php mt_rand(0, 2)

Je suis sûr que beaucoup ont fait l'erreur de mettre 1, 3 (mt_rand(1, 3) aurait donné 1, 2, 3), alors qu'un tableau commence à 0 !

Il y a une façon plus jolie et plus pro de faire, la fonction array_rand !
En effet, cette fonction va récupérer une des valeurs d'un tableau. Ca tombe vraiment bien dans notre cas !

Voici comme elle fonctionne :
Code : PHP

<?php
$tableau = Array("Am", "stram", "gram");
$hasard = array_rand($tableau, 1);
echo $tableau[$hasard[0]];

Comme vous pouvez le constater, array_rand renvoie un tableau contenant une seule valeur.
Tout simplement car cette fonction est généralissime et que vous pouvez par exemple récupérer 2, 3 ou 1000 nombre au hasard.
Voici comment faire : array_rand(tableau, nombres tirés au hasard [par défaut 1])

Dans notre cas d'avatar changeant, il nous suffit de faire :
Code : PHP

1
2
3

<?php
$rand = array_rand($liste);
echo $liste[$rand]; // <--- C'est notre avatar tiré au hasard par la fonction array_rand :D !

Retour en haut

Par rapport à une date

Nous allons maintenant utiliser une méthode différente : on affichera une image différente par jour.

Pour ça, nous aurons besoin de connaître la date : on peut utiliser ainsi la fonction getdate() !
Ici, on aura getdate('mday') !

Pourquoi est-ce mday et pas mjour ?

Parce que c'est anglais et qu'en anglais, jour se dit day.

Bon, ok, ce n'est peut être pas la découverte du siècle, mais c'est bon à savoir !
Ex. : année se dit year, mois, month et heures, hours... ça vous donne une idée de ce que vous pouvez passer en argument à getdate().
Le mieux, c'est ce tableau :

Clé	Description	Valeur renvoyée
seconds	Représentation numérique des secondes	0 à 59
minutes	Représentation numérique des minutes	0 à 59
hours	Représentation numérique des heures	0 à 23
mday	Représentation numérique du jour du mois courant	1 à 31
wday	Représentation numérique du jour de la semaine courante	0 (pour Dimanche) à 6 (pour Samedi)
mon	Représentation numérique du mois	1 à 12
year	Année sur 4 chiffres	Exemples: 1999, 2006
yday	Représentation numérique du jour de l'année	0 à 365
weekday	Version texte du jour de la semaine	Sunday à Saturday
month	Version texte du mois, comme January ou March	January à December

Nous savons que getdate('mday') donne un nombre compris entre 1 et 31.
Vous vous rappelez du modulo ?
Cet opérateur qui renvoie le reste d'une division !

Ah oui, celui qui sert à rien... :lol:

Bah justement...
Je vais prendre le reste de la division de nombres de jours par 3.

3 ?! Pourquoi ?

Parce qu'on a 3 images. :lol:

Si on en avait 25, il faudrait faire le modulo avec 25.

Voici des exemples :

24%3 = 0
25%3 = 1
26%3 = 2
27%3 = 0
28%3 = 1
29%3 = 2
etc...

Le modulo nous permet d'avoir un nombre compris entre 0 et 2, c'est parfait pour notre tableau, ça !!
Nous allons incorporer le code PHP ! Maintenant, à vous de jouer pour que ça marche

Secret (cliquez pour afficher)

Code : PHP

1
2
3

<?php
$jour = getdate('mday');
$notreImage = $liste[$jour%3];

$notreImage contiendra le nom de l'image, image qui changera chaque jour.

Retour en haut

Headers

Comment ça marche ? Lors du chargement du fichier PHP, le navigateur va être redirigé vers l'image.
Pour rediriger quelqu'un, on utilise la fonction header (oh ça alors !), elle opère ainsi : Code : PHP

1 2	<?php header("location: url");

Allez, à vous !
Secret (cliquez pour afficher)

Code : PHP

1 2	<?php header("location: ".$liste[$id]);

$id contiendra soit mt_rand(0, 2), soit $jour%3.

Tout simplement. :lol:

Retour en haut

Compilation

Au hasard

Code : PHP

<?php
$liste = array("firefox_normal.png", "firefox_simple.png", "firefox_lumiere.png");
$hasard = mt_rand(0, 2);
 
header("location: ".$liste[$hasard]);

Par jour

Code : PHP

<?php
$liste = array("firefox_normal.png", "firefox_simple.png", "firefox_lumiere.png");
$jour = getdate('mday');
 
header("location: ".$liste[$jour%3]);

Voila ! Remarquez que mes images sont dans un dossier firefox au même endroit que mon image PHP.

Retour en haut

Résultat et comment l'améliorer

Revenons à nos trois images que je voulais voir au hasard.
Vous avez tout ce qu'il faut pour finir mon travail, non ?
Secret (cliquez pour afficher)

Code : PHP

<?php
$liste = array("http://uploads.siteduzero.com/files/12001_13000/12386.png", "http://uploads.siteduzero.com/files/12001_13000/12387.png", "http://uploads.siteduzero.com/files/12001_13000/12388.png");
$hasard = mt_rand(0, 2);
 
header("location: ".$liste[$hasard]);

Malheureusement, les uploads m'empêchent d'envoyer des images de type PHP, mais essayez chez vous ces scripts.

Comment améliorer le script avec quelques idées

Permettre au visiteur de choisir votre avatar, avec un cookie contenant la clé du tableau correspondante.
Afficher des images selon la date. Ex. : un oeuf au chocolat pour Pâques.
Dans la même idée, vous pouvez afficher une image personnalisée pour l'anniversaire de quelqu'un. Pour ça, vous pourriez même écrire son prénom en utilisant la librairie GD.
Faire une compilation des deux techniques : vous prenez une image au hasard dont l'affichage durera 1 jour.
Redimensionner les images en 100 x 100 px, et mettre le fichier PHP en avatar.

Il y a une autre possibilité, la fonction readfile(); qui permet d'afficher une image et non pas de rediriger vers l'image.

Code : PHP

<?php 
header('Content-type: image/png'); 
 
$liste = array("http://uploads.siteduzero.com/files/12001_13000/12386.png", "http://uploads.siteduzero.com/files/12001_13000/12387.png", "http://uploads.siteduzero.com/files/12001_13000/12388.png"); 
$hasard = mt_rand(0, 2); 
 
readfile($liste[$hasard]);

Retour en haut

Annexe : comment transformer un .php en .png ?

Vous êtes nombreux à vous poser la question, je vais donc vous y répondre : l'url-rewriting.

Si l'URL-Rewriting est désactivé sur votre hébergement, lisez la note en bas de la page.

C'est tout bête à faire ! Il vous suffit d'ouvrir Notepad++ et de taper ce texte :
Code : Apache

1 2	RewriteEngine on RewriteRule ^fichier\.png$ fichier.php [L]

Ensuite, vous enregistrez ce fichier dans le même dossier que votre image sous le nom de .htaccess.
Vous pouvez l'enregistrer dans un dossier parent en mettant par exemple après
Code : Apache

1	RewriteRule ^dossier/fichier\.png$ dossier/fichier.php [L]

ou
Code : Apache

1	RewriteRule ^fichier\.png$ dossier/fichier.php [L]

À vous de voir

.
Concrètement, si vous avez un dossier avec un fichier avatar.php, signature.php et banniere.php, et que vous voulez les afficher sur un forum, voici ce que vous devriez taper :
Code : Apache

RewriteEngine on
RewriteRule ^signature\.gif$ signature.php [L]
RewriteRule ^avatar\.jpg$ avatar.php [L]
RewriteRule ^banniere\.png$ banniere.php [L]

C'est bon, vous comprenez un peu mieux ? L'url-rewriting, on le trouve partout et même ici !
Citation : La page que vous lisez

http://www.siteduzero.com/tuto-3-9689- [...] i-change.html

En réalité, ce n'est pas "tuto-3-9689-1-creer-un-avatar-qui-change.html" le nom de la page, c'est sans doute quelque chose comme... tuto.php?id=9689&ref=3&typ=1&titre=creer-un-avatar-qui-change.
Le problème de cette technique est qu'elle utilise beaucoup de ressources... Il va falloir vous munir donc d'un hébergement pas trop mal

Note : Vous pouvez aussi essayer de tout simplement renommer votre fichier avatar.php en avatar.php.png, cela suffira parfois à berner les forums sans utiliser l'URL-Rewriting ! (merci à Genoseed pour l'astuce)

Retour en haut

Super !
Maintenant, vous pourrez crâner sur les forums avec votre avatar !
Ça, c'est mieux qu'un GIF animé.

Retour en haut

Retour en haut

70 commentaires pour "Créer un avatar qui change"

Note moyenne : 3.27 / 4 (33 votes)

Pseudo	Commentaire
Almaju	# Posté le 22/08/2010 à 17:28:31
Distributeur de sourires Avis : Très bon	Oui, j'imagine que ça fonctionne aussi. J'ai mis à jour les balises php dans le code.
jonaswx9	# Posté le 10/10/2011 à 07:17:02
	Merci, pour ce bon tuto qui m'a aidé dans mes recherches. Même si sa date un peu. jonaswx9 Si un jour vous abandonnez vous finirez par recommencer
jmpp	# Posté le 23/01/2012 à 17:20:26
Anciennement jeff52 Avis : Bon Études : ISART DIGITAL	Comme autre astuce de redirection à proposer dans le tuto, y a également mettre le "moteur" en index.php et nommer le dossier conteneur /avatar.png/ (voir mon propre avatar ) En indiquant par exemple http://monsite.com/avatar.png pour un forum ou autre, ce-dernier va tenter d'aller chercher l'avatar à l'adresse indiquée, qui sera en fait détectée comme un dossier, et qui donc pointera par défaut vers l'index.php dans ce dossier. La véritable adresse qui sera utilisée au final sera http://monsite.com/avatar.png/index.php Ça à l'avantage de fonctionner partout (je l'utilise depuis toujours sur le SDZ et ailleurs, sans encombres) et c'est très simple. Hope that helps
letijan	# Posté le 24/01/2012 à 14:41:51
transmutation Avis : Très bon Blog Twitter close	Lu, ce tuto est quand même bien fais!! Même si il vieillit Musique
ZeNairolf	# Posté le 26/01/2012 à 09:59:32
Avis : Très bon	J'ai trouvé une autre soluce pour ceux qui ne peuvent pas faire de l'URL-Rewriting, au lieu de faire avatar.php.png (pour moi ça ne marche pas) j'ai fait /script.php/image.png Sachant que dans script.php j'ai: <?php header('Content-type: image/png'); $liste = array("0.png", "1.png", "2.png"); $minutes = date("i")%3; readfile($liste[$minutes]); ?> Et image.png je peux renommé en plop.jpg ça marchera quand même. Sinon très bon tuto!!