Version en ligne

Tutoriel : Créer un avatar qui change

Table des matières

Créer un avatar qui change
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 ?

Créer un avatar qui change

On prépare !

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. ;)

On prépare !

Au hasard !

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

Image utilisateur
Image utilisateur
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 !

<?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 ?

<?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 :

<?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:


Au hasard !

Au hasard !

On prépare ! Par rapport à une date

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 !

<?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 :

<?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 :

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

On prépare ! Par rapport à une date

Par rapport à une date

Au hasard ! Headers

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') !

o_O 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 ;)

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

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


Au hasard ! Headers

Headers

Par rapport à une date Compilation

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 :

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

Allez, à vous !

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

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

Tout simplement. :lol:


Par rapport à une date Compilation

Compilation

Headers Résultat et comment l'améliorer

Au hasard

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

Par jour

<?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. ;)


Headers Résultat et comment l'améliorer

Résultat et comment l'améliorer

Compilation Annexe : comment transformer un .php en .png ?

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

<?php
$liste = array("medias\uploads.siteduzero.com_files_12001_13000_12386.png", "medias\uploads.siteduzero.com_files_12001_13000_12387.png", "medias\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 :)

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

<?php 
header('Content-type: image/png'); 
 
$liste = array("medias\uploads.siteduzero.com_files_12001_13000_12386.png", "medias\uploads.siteduzero.com_files_12001_13000_12387.png", "medias\uploads.siteduzero.com_files_12001_13000_12388.png"); 
$hasard = mt_rand(0, 2); 
 
readfile($liste[$hasard]);

Compilation Annexe : comment transformer un .php en .png ?

Annexe : comment transformer un .php en .png ?

Résultat et comment l'améliorer

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

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

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

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

ou

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 :

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 ^^ .

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


Résultat et comment l'améliorer