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)
Bien, nous allons voir que ce script ne requit pas beaucoup de choses en soit, étant donné qu'il ne nécessite que GD.
Donc, il est accepté par la majeure partie des hébergeurs existants actuellement
Euh, c'est quoi GD ?
GD, si vous ne savez pas ce que c'est, c'est un module PHP qui permet de "programmer" ses images dynamiques !
Cela veut dire que par exemple, une image de cette sorte peut afficher la date et l'heure actuelle, avec même les secondes et le timestamp !
En fait, ce genre d'image peut afficher tout ce que peut afficher PHP sur une page normal, mais dans une image !
Pour plus d'informations sur GD, allez voir
le tuto PHP GD de M@teo21 qui explique parfaitement bien toutes les bases.
Ce script va nous créer une et une seule variable que nous nous servirons : une session, nommée "aleat_nbr".
Nous comparerons ceci ensuite avec une autre variable, comme
$_POST['code_verif'] par exemple...
Nous allons créer, ici, le script principal de notre image !
En effet, nous allons, avec quelques lignes, créer une image dynamique et aléatoire.
Pour commencer, créez un fichier nommé
verif_code_gen.php dans un répertoire vierge.
Ensuite, enregistrez, dans le même répertoire,
cette image que vous appellerez
fond_verif_img.png (Clic droit >
Enregistrer la cible sous...)
Nous allons tout d'abord ouvrir le fichier verif_code_gen.php que vous avez normalement créé tout à l'heure.
Il nous faut donc maintenant démarrer la session
avant tout, nous devrons ensuite créer une image depuis
fond_verif_img.png.
Je vous ajoute en prime dans ce code le header() pour afficher une image, et la variable $nbr_chiffres qui contient le nombre de chiffres aléatoires à afficher.
Voici ce début de code :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | <?php
// On crée la session avant tout
session_start();
// On défini la configuration :
if(!IsSet($_GET['nbr_chiffres'])) {
$nbr_chiffres = 6; // Nombre de chiffres qui formerons le nombre par défaut
}
else {
$nbr_chiffres = $_GET['nbr_chiffres']; // Si l'on met dans l'adresse un ?nbr_chiffres=X
}
// Là, on défini le header de la page pour la transformer en image
header ("Content-type: image/png");
// Là, on crée notre image
$_img = imagecreatefrompng('fond_verif_img.png');
|
Notez l'utilisation de la variable $_GET qui vous permettra de changer le nombre de chiffres temporairement.
Il nous faut aussi définir les couleurs de l'image :
Code : PHP1
2
3
4
5 | // On défini maintenant les couleurs
// Couleur de fond :
$arriere_plan = imagecolorallocate($_img, 0, 0, 0); // Au cas où on utiliserai pas d'image de fond, on utilise cette couleur là.
// Autres couleurs :
$avant_plan = imagecolorallocate($_img, 255, 255, 255); // Couleur des chiffres
|
Maintenant, nous allons ajouter le module de montage du nombre aléatoire qui fonctionne grâce à un array et à un
foreach().
Le nombre généré sera ensuite enregistré dans
$_SESSION['aleat_nbr'].
A la fin de la génération du code, on détruit toutes les variables inutiles avec la fonction
unset().
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 | ##### Ici on crée la variable qui contiendra le nombre aléatoire #####
$i = 0;
while($i < $nbr_chiffres) {
$chiffre = mt_rand(0, 9); // On génère le nombre aléatoire
$chiffres[$i] = $chiffre;
$i++;
}
$nombre = null;
// On explore le tableau $chiffres afin d'y afficher toutes les entrées qu'y s'y trouvent
foreach ($chiffres as $caractere) {
$nombre .= $caractere;
}
##### On as fini de créer le nombre aléatoire, on le rentre maintenant dans une variable de session #####
$_SESSION['aleat_nbr'] = $nombre;
// On détruit les variables inutiles :
unset($chiffre);
unset($i);
unset($caractere);
unset($chiffres);
|
Mais, mais ? Pourquoi s'embêter à faire tout un monstre pareil pour afficher un nombre aléatoire de 6 chiffres ?
Pourquoi ne pas utiliser tout simplement un mt_rand(0, 999999); ???
Ah oui
Cette question est souvent posée mais cette technique à pourtant un but.
En fait, avec cette méthode, c'est pas très fiable, étant donné que si le nombre sélectionné est 007865, le code s'affichera comme suit : 7865
Cela fait donc 2 caractères en moins !
Donc, pour garder le nombre de caractères, nous devons entrer 6 entrées dans un array, qui contiendrons chacune d'entre elles un nombre aléatoire entre 0 et 9. Or, le chiffre 0 est affiché s'il est seul.
En fait, dans ce code, php va générer ça différemment :
- Je crée l'entrée 0 dans l'array, et je sélectionne aléatoirement un chiffre entre 0 et 9.
- Je crée l'entrée 1 dans l'array, et je sélectionne aléatoirement un chiffre entre 0 et 9.
- Je crée l'entrée 2 dans l'array, et je sélectionne aléatoirement un chiffre entre 0 et 9.
- Je crée l'entrée 3 dans l'array, et je sélectionne aléatoirement un chiffre entre 0 et 9.
- etc...
Tout simplement
Ce qui donne finalement, à l'affichage, ce code là : 007865 au lieu de 7865
Pour finir notre code, nous allons afficher la variable $nombre (celle qui contient tout le code de confirmation) dans notre image, et après ça, nous afficherons notre image :
Code : PHP1
2
3
4 | imagestring($_img, 5, 18, 8, $nombre, $avant_plan);
imagepng($_img);
?>
|
Et voilà ! Votre script est terminé !
Si vous n'avez sauté aucune étape, vous devriez avoir un fichier comme celui-ci :
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 | <?php
// On crée la session avant tout
session_start();
// On défini la configuration :
if(!IsSet($_GET['nbr_chiffres'])) {
$nbr_chiffres = 6; // Nombre de chiffres qui formerons le nombre par défaut
}
else {
$nbr_chiffres = $_GET['nbr_chiffres']; // Si l'on met dans l'adresse un ?nbr_chiffres=X
}
// Là, on défini le header de la page pour la transformer en image
header ("Content-type: image/png");
// Là, on crée notre image
$_img = imagecreatefrompng('fond_verif_img.png');
// On défini maintenant les couleurs
// Couleur de fond :
$arriere_plan = imagecolorallocate($_img, 0, 0, 0); // Au cas où on utiliserai pas d'image de fond, on utilise cette couleur là.
// Autres couleurs :
$avant_plan = imagecolorallocate($_img, 255, 255, 255); // Couleur des chiffres
##### Ici on crée la variable qui contiendra le nombre aléatoire #####
$i = 0;
while($i < $nbr_chiffres) {
$chiffre = mt_rand(0, 9); // On génère le nombre aléatoire
$chiffres[$i] = $chiffre;
$i++;
}
$nombre = null;
// On explore le tableau $chiffres afin d'y afficher toutes les entrées qu'y s'y trouvent
foreach ($chiffres as $caractere) {
$nombre .= $caractere;
}
##### On as fini de créer le nombre aléatoire, on le rentre maintenant dans une variable de session #####
$_SESSION['aleat_nbr'] = $nombre;
// On détruit les variables inutiles :
unset($chiffre);
unset($i);
unset($caractere);
unset($chiffres);
imagestring($_img, 5, 18, 8, $nombre, $avant_plan);
imagepng($_img);
?>
|
J'utilise mon script sur mon site, et il n'as jamais buggué ! Il est aussi assez rapide dans la mesure où, aucunes includes, aucunes connexions à mysql ne sont faites et que j'utilise des quotes simples à la place de quotes doubles.
Petit rappel sur les quotes en PHP
- La quote double : " - L'exécution du script sera plus lent avec ces quotes car il recherche sans cesse la présence d'une variable dans la chaîne.
Exemple :
Code : PHP1
2
3
4
5
6
7 | $pseudo = "php5";
$str = "Bonjour, $pseudo ! Comment ca va ?";
echo $str;
#### AFFICHERA : ####
// Bonjour, php5 ! Comment ca va ?
|
- La simple quote : ' - L'exécution est plus rapide car il faut impérativement mettre les noms de variable en dehors de la chaîne avec ce type de quotes.
Exemple :
Code : PHP1
2
3
4
5
6
7
8
9 | $pseudo = 'php5';
$str = 'Bonjour, $pseudo ! Comment ca va ?';
echo $str;
#### AFFICHERA : ####
// Bonjour, $pseudo ! Comment ca va ?
// Les variables ne sont donc pas scannées en même temps que la lecture de la chaîne.
|
Les doubles quotes cherchent donc à parser les variables inclusent dans la chaîne directement. Cela signifie qu'il "scanne" la chaîne en même temps de la lire.
Je vais pas le faire en 50 exemplaires, mais là on doit juste coder du HTML
Créez tout d'abord le fichier
inscription.html que vous mettrez dans le même répertoire que tout les autres fichiers créés.
Ensuite, mettez-y ce code HTML :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 | <html>
<head>
<title>Inscription</title>
</head>
<body>
<form action="verif_insc.php" method="post">
<p><label>Pseudo</label> : <input type="text" name="pseudo" /></p>
<p><label>Mot de passe</label> : <input type="password" name="mdp" /></p>
<p><label>Retapez votre MdP</label> : <input type="password" name="mdpv" /></p>
<p><label>E-Mail</label> : <input type="text" name="email" /></p>
<p><label>Retapez votre E-Mail</label> : <input type="text" name="emailv" /></p>
<!-- On affiche l'image générée par notre script -->
<p><img src="verif_code_gen.php" alt="Code de vérification" /></p>
<p><label>Merci de retaper le code de l'image ci-dessus</label> : <input type="text" name="verif_code" /></p>
<p><input type="submit" value="Inscription" /></p>
</form>
</body>
</html>
|
Tout simplement.
Là aussi, je vais pas vous faire un roman.
On est là pour l'image de vérification, pas pour une page d'inscription, donc je ne traiterait pas les autres champs présents dans notre formulaire. Je vérifierait juste le code de confirmation.
Vous devez créer le fichier
verif_insc.php dans le même répertoire que inscription.html
Maintenant, entrez-y ce 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 | <?php
session_start(); // L'image utilise les sessions, donc on les active ici car on as besoin de ces informations
$debut_html = '<html>
<head>
<title>Inscription</title>
</head>
<body>
<p>';
$milieu_html = NULL;
$fin_html = '</p>
</body>
</html>';
if(IsSet($_POST['verif_code']) AND !Empty($_POST['verif_code'])) { // Le champ du code de confirmation a été remplis
if($_POST['verif_code']==$_SESSION['aleat_nbr']) { // Si le champ est égal au code généré par l'image
$milieu_html = 'Vous avez entré le bon code de confirmation !';
}
else {
$milieu_html = 'Votre code de confirmation n\'est pas bon ! Merci de réessayer.<br /><a href="#" onclick="history.go(-1);">Retour</a>';
}
}
else {
$milieu_html = 'Vous devez remplir le champ du code de confirmation !';
}
// Là, on affiche toute la source générée :
echo $debut_html . $milieu_html . $fin_html;
?>
|
Et là, magique, si vous entrez le code correspondant, normalement, le script devrait retourner que votre code est bon
Voilà ! Vous avez maintenant une image de vérification !!!
Je vous ai parlé, tout à l'heure, dans la seconde partie, d'une variable $_GET permettant de changer temporairement le nombre de chiffres constituant le code.
Si vous souhaitez, pour une seule page en particulier, diminuer le nombre de chiffres sans avoir à créer un deuxième script contenant plus de chiffres, vous pouvez appeller votre image comme suit :
Code : HTML1 | <img src="verif_img.php?nbr_chiffres=4" alt="Image de vérification" />
|
Ainsi, votre image contiendra 4 chiffres seulement à l'endroit où vous l'avez appellée ainsi.
Pour afficher le nombre de chiffres par défaut, vous n'avez juste qu'à enlever cette option :
Code : HTML1 | <img src="verif_img.php" alt="Image de vérification" />
|
Tout simplement.