PHP et les formulaires

En HTML, pour dire qu'on va insérer un formulaire on se sert de la balise <form>. On l'utilise de la manière suivante :

Code : HTML

Ce qu'il faut retenir, c'est qu'on met le contenu de notre formulaire entre les balises <form> et </form>
Il y a 2 attributs intéressants à connaître pour la balise <form> :

• method="post" : il faut savoir qu'il y a plusieurs moyens d'envoyer le formulaire (plusieurs "méthodes"). Ne retenez que la méthode "post", c'est la seule qui nous intéressera en PHP. Vous devrez donc toujours mettre method="post" pour vos formulaires !
• action="cible.php" : très important. C'est le nom de la page qui sera appelée lorsque l'utilisateur aura envoyé son formulaire (lorsqu'il aura cliqué sur "Envoyer" quoi ^^).
  Par exemple, le code précédent est situé sur la page formulaire.php ; une fois le formulaire envoyé, ça charge la page cible.php dans laquelle on traitera les informations.
  

Retenez donc bien que vous travaillez normalement sur 2 pages différentes : la page qui contient le formulaire (formulaire.php dans notre exemple), et celle qui reçoit les données du formulaire pour les traiter (cible.php).

Mais du coup vous devez vous demander quelque chose : pour les TP "mot de passe" et "mini-chat", n'a-t-on pas utilisé une seule et même page ? Eh oui en effet, la page cible était la même page que celle où il y avait le formulaire. Par exemple, on avait mis le formulaire dans minichat.php, mais aussi le traitement des données dans la même page (car on avait un action="minichat.php" qui renvoyait sur la même page).

Du coup les choses devraient devenir plus claires dans votre tête :

• La première fois que le mini-chat est chargé, on vérifie si des variables renvoyées par le formulaire commme $_POST['pseudo'] existent (c'est à ça que sert isset). Comme la première fois qu'on a chargé la page on n'a rien rentré dans le formulaire, on sait qu'on ne doit pas écrire d'informations dans la base de données (on saute le if).
• Quand on a rentré un message, la page se recharge mais cette fois avec des informations du formulaire entrées par l'utilisateur (comme le pseudo). Du coup, $_POST['pseudo'] existe, DONC on sait qu'on doit enregistrer quelque chose.

Et tout ça se fait sur une seule et même page


Si vous vous souvenez bien, on avait très rapidement parlé des formulaires avec zone de texte dans le chapitre sur les variables. Je vous avais promis qu'on reviendrait dessus plus tard et qu'on verrait tous les éléments de formulaires que l'on peut traiter avec PHP.
Ce moment est enfin venu

Dans un formulaire, vous le savez peut-être déjà, on peut mettre beaucoup d'éléments différents : zones de textes, boutons, cases à cocher etc etc...
Je vais ici tous les lister et vous montrer comment vous servir de chacun d'eux. Avec ça, vous devriez être parés pour partir à l'assaut des formulaires tous seuls

Les petites zones de texte

Une zone de texte ressemble à ceci :

En HTML, on l'insère tout simplement avec la balise :
<input type="text" />


Mais il y a 2 attributs que vous allez devoir rajouter qui vous seront très importants :

• name : c'est le nom de la zone de texte. Choisissez-le bien, car c'est lui qui va produire une variable. Par exemple :
  <input type="text" name="pseudo" />
  Cela va créer dans cible.php une variable $_POST['pseudo']
  
• value : c'est ce que contient la zone de texte au départ. Par défaut, la zone de texte est vide. Mais il peut être très pratique de pré-remplir le champ : sur le TP mini-chat par exemple, on pourrait facilement écrire automatiquement le pseudo de l'utilisteur comme ça ! Exemple :
  <input type="text" name="pseudo" value="M@teo21" />
  

Oui, je sais que vous commencez à vous inquiéter car vous n'avez pas encore vu de PHP pour le moment et vous craignez ce qui risque de vous tomber sur la tronche.
Rassurez-vous, vous ne risquez rien

En fait, c'est tout bête : le texte que le visiteur aura rentré sera disponible dans cible.php sous la forme d'une variable appelée $_POST['pseudo'].

Et je ne vous apprends rien d'extraordinaire, on avait déjà vu ça dans le chapitre sur les variables. D'ailleurs, pour l'exemple, je ne vais pas m'amuser à en faire un nouveau, je vous ressors celui que je vous avais fait (comment ça "feignasse" ? :p)

Code : HTML

Code : PHP

Ce bouton va ouvrir la page appel.php :



Dans cible.php on a affiché une variable $_POST['prenom'] qui contient ce que l'utilisateur a rentré dans le formulaire.


De même, pour en revenir au mini-chat, on peut sans problème réécrire le pseudo dans le champ "pseudo" si la variable $_POST['pseudo'] existe. Ce qui nous donnerait quelque chose du genre :

Code : PHP

En gros, on a mis du PHP en plein milieu de la balise <input /> (oui oui on a tout à fait le droit).
SI on a le pseudo du visiteur, ALORS on rajoute l'attribut value="Le pseudo", ce qui fera que la zone de texte sera pré-remplie


Vous reconnaîtrez entre autres l'intérêt des apostrophes et de la concaténation pour séparer le texte des variables. Grâce à ça on n'a pas eu à mettre d'antislash devant les guillemets.

Les grosses zones de texte

La grosse zone de texte (qu'on appelle aussi "Zone de saisie multiligne" ^^), ça ressemble à ceci :



On peut y écrire autant de lignes que l'on veut. C'est plus adapté si le visiteur doit écrire un long message par exemple.

On va utiliser le code HTML suivant pour insérer cette grosse zone de texte :

Code : HTML

Là encore, on a un attribut name qui va définir le nom de la variable qui sera créée dans cible.php. Dans notre cas, ce sera la variable $_POST['message'].

Chose plus particulière : il n'y a pas d'attribut value. En fait, le texte par défaut est ici écrit entre le <textarea> et le </textarea>. C'est plus pratique du coup pour faire un echo au milieu
Si vous ne voulez rien mettre par défaut, alors n'écrivez rien entre <textarea> et </textarea>

La liste déroulante

La liste déroulante, c'est ça :



On utilise le code HTML suivant :

Code : HTML

Tout bêtement, on utilise la balise <select> à laquelle on donne un nom (ici : "choix").
On écrit les différentes options disponibles...
Puis on referme la balise avec </select>.

Ici, une variable $_POST['choix'] sera créée, et elle contiendra le choix qu'a fait l'utilisateur. S'il a choisi "Choix 3", la variable $_POST['choix'] sera égale au value correspondant, c'est-à-dire "choix3".

Un truc important qu'il peut être utile de savoir faire, c'est de définir le choix par défaut. Normalement c'est le premier, mais si vous rajoutez l'attribut selected="selected" à une balise <option>, alors ce sera le choix par défaut. On pourrait par exemple écrire :
<option value="choix3" selected="selected">Choix 3</option>

Les cases à cocher

Une case à cocher ressemble à ceci :



On utilisera le code suivant pour afficher des cases à cocher :

Code : HTML

Là encore, on donne un nom à la case à cocher (ici : "case"). Ce nom va générer une variable dans la page cible, par exemple $_POST['case'].

• Si la case est cochée, alors $_POST['case'] aura pour valeur "on".
• Si elle n'est pas cochée, alors $_POST['case'] ne contiendra rien (NULL).

Si vous voulez que la case soit cochée par défaut, il faudra lui rajouter l'attribut checked="checked". Par exemple :
<input type="checkbox" name="case" checked="checked" />
On aura du coup une case déjà cochée.

Les boutons d'option

Les boutons d'option fonctionnent par groupes de 2 minimum. Par exemple :



Le code correspondant à cet exemple est le suivant :

Code : HTML

Comme vous pouvez le voir, les deux boutons d'option ont le même nom ("frites"). C'est très important, car les boutons d'options fonctionnent par "groupes" : tous les boutons d'option d'un même groupe ont le même nom.
Cela permet au navigateur de savoir quels boutons d'option désactiver quand on active un autre bouton d'option du groupe. Il serait bête en effet de pouvoir sélectionner "Oui" et "Non" à la fois

Pour pré-cocher l'un de ces boutons d'option, vous faites pareil que pour les cases à cocher : vous rajoutez un checked. Ici, commme vous pouvez le voir, "Oui" est sélectionné par défaut.

Dans la page cible, une variable $_POST['frites'] sera créée. Elle aura la valeur du bouton d'option choisi par le visiteur. Si on aime les frites, alors on aura $_POST['frites'] = 'oui'.
Il faut bien penser à remplir l'attribut "value" du bouton d'option car c'est lui qui va déterminer la valeur de la variable

Les champs cachés

Si y'a un truc bien pratique avec les formulaires et php, ce sont les champs cachés

En quoi ça consiste ? C'est un code dans votre formulaire qui n'apparaîtra pas aux yeux du visiteur, mais qui va quand même créer une variable avec une valeur.
Je m'explique : supposons que vous ayez besoin de "retenir" que le pseudo du visiteur est "Mateo21". Vous allez taper ce code :

Code : HTML

A l'écran, vous ne verrez rien.
Mais dans la page cible, une variable $_POST['pseudo'] sera créée (correspondant à name), et elle aura la valeur "Mateo21" (correspondant à value) !

C'est apparemment inutile, mais vous verrez que lorsque vous commencerez à créer des formulaires vous en aurez vite besoin

Pour s'entraîner, on va travailler sur une liste déroulante. On va demander au visiteur quelle est sa couleur préférée. Lorsqu'il aura choisi, on doit arriver à faire 2 choses :

1. On va écrire sa couleur préférée (à l'aide d'un echo tout bête)
2. On va faire de cette couleur le choix par défaut de la liste déroulante

On va faire appel à un vieux truc qu'on n'a pas utilisé depuis la partie I : les fonctions que vous pouvez définir vous-même. On va définir une fonction appelée choixParDefaut qui va renvoyer 'selected' si la couleur qu'on lui donne est bien le choix de l'utilisateur, ou qui ne renvoie rien si ce n'est pas sa couleur préférée.

Allez, on arrête de bavarder et on code

Code : PHP


J'imagine votre tête lorsque vous avez regardé ce code :
D'un côté, ça ne m'étonne pas que ce code vous ait fait un peu peur. D'un autre, évitez de me le dire parce que je risquerais de ma fâcher tout rouge

Pourquoi ? Parce que j'ai "juste" utilisé une fonction, et c'est quelque chose que je vous ai appris dans un des premiers chapitres de ce cours de PHP !!!
Donc, en toute logique, vous devriez être capables de comprendre tout cela.

Je vais quand même vous expliquer rapidement comment ça marche, j'ai pas envie que vous me jetiez des tomates pour ça
En gros, oubliez le haut de ce code. Regardez après le commentaire "Fin de la fonction". Si l'utilisateur a fait un choix, alors on affiche quelle est sa couleur préférée.


Ensuite, on affiche notre formulaire tout bête. Comme on veut recharger la même page, je n'ai pas mis d'attribut action.
Pour chaque option, j'affiche ce que me renvoie ma fonction choixParDefaut quand je lui donne la couleur 'Vert' par exemple. Soit la fonction renvoie 'selected="selected"', dans ce cas on affiche selected et ce sera le choix par défaut, soit la fonction ne renvoie rien, donc ce ne sera pas le choix par défaut.

Si vous ne comprenez pas bien comment marche ma fonction, je vous conseille vivement de relire le chapitre sur les fonctions.
N'hésitez pas à passer un peu de temps sur ce code pour comprendre comment il marche, car je le trouve très intéressant. Si vous avez compris ça, vous avez tout compris

Vous saviez qu'on pouvait aussi envoyer des fichiers grâce aux formulaires ?

Vous aurez besoin de lire cette section si vous voulez que vos visiteurs puissent envoyer (on dit aussi uploader) des images, des programmes ou tout autre type de fichier sur votre site.

Là encore, ça se passe en 2 temps :

1. Le visiteur arrive sur votre formulaire et le remplit (en indiquant le fichier à envoyer). Une simple page HTML suffit pour créer le formulaire.
2. PHP réceptionne les données du formulaire et, s'il y a des fichiers dedans, il les "enregistre" dans un des dossiers du serveur.

On va commencer par créer le formulaire permettant d'envoyer un fichier (une simple page HTML).
Nous verrons ensuite comment traiter l'envoi du fichier côté serveur avec PHP.

Le formulaire d'envoi de fichier

Dès l'instant où votre formulaire propose aux visiteurs d'envoyer un fichier, il faut ajouter l'attribut enctype="multipart/form-data" à la balise <form>.

Code : HTML

Grâce à enctype, le navigateur du visiteur sait qu'il s'apprête à envoyer des fichiers.

Maintenant que c'est fait, nous pouvons ajouter à l'intérieur du formulaire une balise permettant d'envoyer un fichier. C'est une balise très simple de type <input type="file" />. Il faut penser comme toujours à donner un nom à ce champ de formulaire (grâce à l'attribut name) pour que PHP puisse reconnaître le champ après.

Code : HTML

Voilà, c'est suffisant

Vous pouvez ajouter d'autres champs plus classiques au formulaire (champ de texte, cases à cocher). Vous pouvez aussi proposer d'envoyer plusieurs fichiers en même temps.
Là on va se contenter d'un seul champ (envoi de fichier) pour rester simple.

Le traitement de l'envoi en PHP

Comme vous avez dû le remarquer, le formulaire pointe vers une page PHP qui s'appelle cible_envoi.php. Le visiteur sera donc redirigé sur cette page après l'envoi du formulaire.

C'est maintenant que ça devient important. Il faut que l'on écrive le code de la page cible_envoi.php pour traiter l'envoi du fichier.



En fait, au moment où la page PHP s'exécute, le fichier a été envoyé sur le serveur mais il est stocké dans un dossier temporaire.
C'est à vous de décider si vous acceptez définitivement le fichier ou non. Vous pouvez par exemple vérifier si le fichier a la bonne extension (si vous demandiez une image et qu'on vous envoie un ".txt", vous devrez refuser le fichier).

Si le fichier est bon, vous l'accepterez définitivement grâce à la fonction move_uploaded_file.




Pour chaque fichier envoyé, une variable $_FILES['nom_du_champ'] est créée. Dans notre cas, la variable s'appellera $_FILES['monfichier'].
Cette variable est un tableau qui contient plusieurs informations sur le fichier :

Variable	Signification
$_FILES['monfichier']['name']	Contient le nom du fichier envoyé par le visiteur.
$_FILES['monfichier']['type']	Indique le type du fichier envoyé. Si c'est une image gif par exemple, le type sera image/gif.
$_FILES['monfichier']['size']	Indique la taille du fichier envoyé. Attention : cette taille est en octets. Il faut environ 1 000 octets pour faire 1 Ko, et 1 000 000 octets pour faire 1 Mo. Attention, la taille de l'envoi est limitée par PHP. Par défaut, il est impossible d'uploader des fichiers de plus de 8 Mo.
$_FILES['monfichier']['tmp_name']	Juste après l'envoi, le fichier est placé dans un répertoire temporaire sur le serveur en attendant que votre script PHP décide si oui ou non il accepte de le stocker définitivement. Cette variable contient l'emplacement temporaire du fichier (c'est PHP qui gère ça).
$_FILES['monfichier']['error']	Contient un code d'erreur permettant de savoir si l'envoi s'est bien effectué ou s'il y a eu un problème, et si oui lequel. La variable vaut 0 s'il n'y a pas eu d'erreur.

Je vous propose de faire les vérifications suivantes pour décider si on accepte le fichier ou non :

1. Vérifier tout d'abord si le visiteur a bien envoyé un fichier (en testant la variable $_FILES['monfichier'] avec isset) et s'il n'y a pas eu d'erreur d'envoi (grâce à $_FILES['monfichier']['error'])
2. Vérifier si la taille du fichier ne dépasse pas 1 Mo par exemple (environ 1 000 000 d'octets) grâce à $_FILES['monfichier']['size']
3. Vérifier si l'extension du fichier est autorisée (il faut interdire à tout prix que les gens puissent envoyer des fichiers PHP, sinon ils pourraient exécuter des scripts sur votre serveur !). Dans notre cas, nous autoriserons seulement les images (fichiers .png, .jpg, .jpeg et .gif).
   Nous analyserons pour cela la variable $_FILES['monfichier']['name'].

Nous allons donc faire une série de tests dans notre page cible_envoi.php.

1/ Tester si le fichier a bien été envoyé

On commence par vérifier qu'un fichier a été envoyé en testant si la variable $_FILES['monfichier'] existe avec isset().
On vérifie dans le même temps s'il n'y a pas d'erreur d'envoi.

Code : PHP

2/ Vérifier la taille du fichier

On veut interdire que le fichier dépasse 1 Mo, soit environ 1 000 000 d'octets (j'arrondis pour simplifier). On doit donc tester $_FILES['monfichier']['size'] :

Code : PHP

3/ Vérifier l'extension du fichier

On peut récupérer l'extension du fichier dans une variable grâce à ce code :

Code : PHP

La fonction pathinfo renvoie un array contenant entre autres l'extension du fichier dans $infosfichier['extension']. On stocke ça dans une variable $extension_upload.

Une fois l'extension récupérée, on peut la comparer à un tableau d'extensions autorisées (un array) et vérifier si l'extension récupérée fait bien partie des extensions autorisées à l'aide de la fonction in_array().

Ouf ! Ca donne ça au final :

Code : PHP

4/ Valider l'upload du fichier

Si tout est bon, on accepte le fichier en appelant move_uploaded_file().
Cette fonction prend 2 paramètres :

• Le nom temporaire du fichier (on l'a avec $_FILES['monfichier']['tmp_name']).
• Le chemin et le nom sous lequel sera stocké le fichier de façon définitive. On peut utiliser le nom d'origine du fichier $_FILES['monfichier']['name'] ou générer un nom au hasard.

Je propose de placer le fichier dans un sous-dossier "uploads".
On gardera le même nom de fichier que celui d'origine. Comme $_FILES['monfichier']['name'] contient le chemin entier vers le fichier d'origine (C:\dossier\fichier.png par exemple), il nous faudra extraire le nom du fichier. On peut utiliser pour cela la fonction basename qui renverra juste "fichier.png"

Code : PHP



Ce script est un début, mais en pratique il vous faudra sûrement encore l'améliorer. Par exemple, si le nom du fichier contient des espaces ou des accents ça posera un problème une fois envoyé sur le web. D'autre part, si quelqu'un envoie un fichier qui a le même nom que celui d'une autre personne, l'ancien sera écrasé !

La solution consiste en général à "choisir" nous-mêmes le nom du fichier stocké sur le serveur plutôt que de se servir du nom d'origine. Vous pouvez faire un compteur qui s'incrémente : 1.png, 2.png, 3.jpg, etc.



Pour aller plus loin, je vous recommande de lire le tutoriel de DHKold sur l'upload de fichiers par formulaire. Il est plus complet que le mien et vous expliquera mieux certains détails.

Bonne lecture

1

<input type="text" name="ville" />

1
2
3

<textarea name="news" rows="8" cols="45">
Tapez la news ici.
</textarea>

1

<input type="hidden" name="age" value="18" />