M1202 - Algorithmique et PHP

M1202 - Algorithmique et PHP
David Annebicque
2016
1
Quelques rappels sur les formulaires
1.1
Structure de base
La structure d’un formulaire de saisie est simple, elle se compose d’un
élément FORM contenant essentiellement une suite de contrôles (éléments
input, textarea, select, button, etc.) mais aussi des éléments de structuration
de document afin d’aligner correctement les champs d’entrée.
Listing 1 – Exemple de formulaire
1 < form method = " (1) " action = " (2) " >
2
du texte , des boutons , des zones de saisie ...
3
< input type = " submit " value = " (3) " / >
4 </ form >
1. désigne la méthode à utiliser pour envoyer les informations ; c’est «
GET » (par défaut ; les données du formulaire sont envoyées dans
l’URL) ou « POST » (les données sont envoyées dans le corps du
message, elles ne sont donc pas visibles dans l’URL).
2. désigne l’URL du programme (PHP dans notre cas) qui va traiter les
données.
3. désigne le texte qui va apparaı̂tre dans le bouton d’envoi.
1.2
1.2.1
Les principaux contrôles
Input
Les zones de saisie, les boutons radios et les cases à cocher sont définis
par ce contrôle; la syntaxe (simplifiée) en est :
1
Listing 2 – Exemple ”input”
1 < input type = " type " name = " nom " value = " valeur " / >
où :
— type peut être :
— text : pour une zone de saisie au sens habituel du terme (une zone
rectangulaire où l’utilisateur écrit des données, sur une seule ligne);
c’est ce qui sera dans cette zone qui sera envoyé au programme de
traitement;
— password : pour une zone de saisie de mot de passe (identique
à text, mais le texte saisi n’apparaı̂t à l’écran que sous la forme
d’astérisques, pour éviter d’être lisible par une tierce personne);
— checkbox : pour une case à cocher (a priori pour un choix multiple);
— radio : pour un bouton radio (des boutons radios de même nom
sont mutuellement exclusifs);
— submit : pour un bouton d’envoi; c’est le clic sur ce bouton qui
envoie le contenu du formulaire au programme de traitement;
— hidden : pour une variable cachée; permet de cacher des valeurs
nécessaires au traitement mais qu’on ne veut pas voir affichées à
l’écran; attention, caché ne veut pas dire secret : ces valeurs sont
visibles dans le code source de la page;
— reset : pour remettre les zones de saisie à leurs valeurs par défaut
(les valeurs qu’elles ont lors du chargement de la page);
— file : pour permettre à l’utilisateur de choisir un fichier sur son
ordinateur. Il faudra gérer l’upload dans la partie traitement
— nom est le nom de la variable qui sera envoyé au programme; cela
n’a a priori pas de sens pour un bouton submit ou reset, mais c’est
absolument nécessaire pour les autres; les zones doivent en principe
avoir des noms différents, sauf pour le boutons radios : les boutons
radios de même nom sont mutuellement exclusifs ;
— value est la valeur du contrôle
1.2.2
select
Pour créer des listes déroulantes ; exemple d’utilisation :
Listing 3 – Exemple ”select”
1 < select
2
3
4
name = " menu " >
< option > premier choix </ option >
< option > deuxieme choix </ option >
< option > troisieme choix </ option >
2
5
</ select >
Cette zone permettra d’envoyer une variable de nom menu qui aura pour
valeur le choix sélectionné. Pour pré-sélectionner un choix dans la liste il suffit d’ajouter l’attribut selected=”selected” dans la balise <option> correspondante.
On peut avoir besoin d’envoyer une valeur différente de ce qui est affichée
(par exemple demander à l’utilisateur de choisir une personne par ses nom
et prénom, et envoyer l’identifiant de cette personne dans une table d’une
base de données). On utilisera alors l’attribut value dans la balise <option>
comme par exemple :
Listing 4 – Exemple ”select” avec valeur définie
1 < select name = " responsable " >
2
< option value = " 1 " > marcel durand </ option >
3
< option value = " 2 " > georges dupont </ option >
4
< option value = " 3 " > pierre martin </ option >
5 </ select >
Dans cet exemple si on choisit georges dupont la variable responsable aura la
valeur 2.
1.2.3
textarea
Pour des zones de saisies plus grandes qu’avec input ; exemple d’utilisation :
Listing 5 – Exemple ”textarea”
1 < textarea name = " nom " rows = " 4 " cols = " 40 " >
2
Texte par defaut ...
3 </ textarea >
2
2.1
Exercices
Exercice 1 : Calculatrice
Écrire un formulaire « calculatrice » qui comprendra 2 cases (zone de
saisie libre) pour la saisie des nombres (opérande), un groupe de 4 cases à
cocher pour le choix de l’opération, un bouton pour effectuer l’opération.
3
2.2
Exercice 2 : Table de multiplication
Écrire un formulaire qui demande deux nombres a et b. Il affiche ensuite
la table de multiplication par a sur b lignes.
2.3
Exercice 3 : Petit jeu
Vous devez deviner le nombre que le programme a choisi. Vous proposez
une solution, et le programme vous répond « trop petit » ou « trop grand »
suivant le cas, jusqu’à trouver le bon nombre.
4