La première partie présente les champs dans un tableau à deux colonnes, la première correspondant aux libellés, et la seconde aux champs quel que soit leur type : texte, mot de passe, li
Trang 1Par ailleurs la classe Formulaire doit également fournir des fonctionnalités de placement des champs et des libellés les uns par rapport aux autres, ce qui peut se gérer à l’aide de tableaux HTML
La figure 3.4 montre les possibilités attendues, avec des traits en pointillés qui indiquent le tableau HTML permettant d’obtenir un alignement régulier des dif-férents composants du formulaire La première partie présente les champs dans un tableau à deux colonnes, la première correspondant aux libellés, et la seconde aux champs quel que soit leur type : texte, mot de passe, liste déroulante, etc Dans le cas ó le champ consiste en un ensemble de choix matérialisés par des boutons (le champ 4 dans la figure), on souhaite créer une table imbriquée associant à chaque bouton un sous-libellé, sur deux lignes Ce premier type de présentation sera désigné
par le terme Mode Table, orientation verticale.
Choix a Choix b Choix c
Libellé 1 Libellé 2 Libellé 3
Libellé 4
Libellé Valider
Libellé X Libellé Y Libellé Z
champ 1 champ 2 champ 3
Figure 3.4 — Conception de la classe Formulaire
La deuxième partie du formulaire de la figure 3.4 organise la présentation en autant de colonnes qu’il y a de champs, ces colonnes étant préfixées par le libellé
du champ Ce mode de présentation, désigné par le terme Mode Table, orientation horizontale, permet d’affecter plusieurs zones de saisie pour un même champ, une par
ligne
Enfin, le formulaire doit permettre une présentation libre – c’est-à-dire sans alignement à l’aide de tableau – comme le bouton de validation à la fin du formulaire
La classe doit proposer un ensemble de méthodes pour créer tous les types de champs possibles dans un formulaire HTML, et disposer chaque champ en fonction
du mode de présentation qui a été choisi Cela suppose que l’objet chargé de produire
Trang 2le formulaire connaisse, lors de la création du champ, le mode de présentation courant
En résumé il s’agit d’implanter une fois pour toutes, sous forme de classe orientée-objet, les tâches courantes de production et de mise en forme de formulaire que l’on trouve dans toutes les applications web en général, et tout particulièrement dans les applications s’appuyant sur une base de données
3.3.2 Utilisation
Commençons par présenter l’utilisation de la classe avant d’étudier ses mécanismes internes La liste des méthodes publiques est donnée dans la table 3.8 Elles appar-tiennent à deux catégories :
Tableau 3.8 — Les méthodes publiques de la classe Formulaire
champTexte ( libell´ e, nom, val, long, longMax) Champ de saisie de texte.
champMotDePasse ( libell´ e, nom, val, long, longMax) Champ de saisie d’un mot de passe.
champRadio ( libell´ e, nom, val, liste) Boutons radio
champListe ( libell´ e, nom, val, taille, liste) Boutons select
champFenetre ( libell´ e, nom, val, ligs, cols) Boutons textarea
champFichier ( libell´ e, nom, taille) Champ fichier (upload).
champValider ( libell´ e, nom) Bouton submit
debutTable ( orientation, attributs, nbLignes) Entrée en mode table.
ajoutTexte ( texte) Ajout d’un texte libre.
getChamp ( idChamp) Récupération d’un champ du
formu-laire.
formulaireHTML () Retourne la chaîne de caractères
conte-nant le formulaire HTML.
• Production d’un champ de formulaire.
À chaque type de champ correspond une méthode qui ne prend en argument que les paramètres strictement nécessaires au type de champ souhaité Par exemple la méthode champTexte() utilise un libellé, le nom du champ, sa valeur par défaut, sa taille d’affichage et la taille maximale (ce dernier para-mètre étant optionnel) Parmi les autres méthodes, on trouve champRadio(), champListe(), champFenetre(), etc
Chaque méthode renvoie l’identifiant du champ créé Cet identifiant permet d’accéder au champ, soit pour le récupérer et le traiter isolément (méthode getChamp()), soit pour lui associer des contrôles Javascript ou autres
• Passage d’un mode de présentation à un autre.
Ces méthodes permettent d’indiquer que l’on entre ou sort d’un mode Table,
en horizontal ou en vertical
Trang 3Voici un premier exemple illustrant la simplicité de création d’un formulaire Il s’agit d’une démonstration des possibilités de la classe, sans déclenchement d’aucune action quand le formulaire est soumis Nous verrons dans le chapitre 5 comment utiliser cette classe en association avec la base de données pour créer très rapidement des interfaces de saisie et de mise à jour
Exemple 3.9 exemples/ApplClasseFormulaire.php: Exemple démontrant les possibilités de la classe Formulaire.
<? xml v e r s i o n = " 1 0 " e n c o d i n g = " i s o−8959−1 " ? >
<!DOCTYPE html PUBLIC "−//W3C/ / DTD XHTML 1 0 S t r i c t / / EN"
" h t t p : / / www w3 o r g / TR / xhtml1 /DTD/ xhtml1−s t r i c t dtd ">
<html xmlns= " h t t p : / / www w3 o r g / 1 9 9 9 / xhtml " xml : l a n g = " f r " >
<head >
< t i t l e > C r é a t i o n d ’ un f o r m u l a i r e < / t i t l e >
< l i n k r e l = ’ s t y l e s h e e t ’ h r e f =" f i l m s c s s " t y p e =" t e x t / c s s " / >
</ head >
<body >
<? php
r e q u i r e _ o n c e ( " F o r m u l a i r e php " ) ;
/ / I n s t a n c i a t i o n du f o r m u l a i r e
$ f o r m = new F o r m u l a i r e ( " p o s t " , " A p p l C l a s s e F o r m u l a i r e php " ) ; / / Un champ c a c h é
$form−>champCache ( " mode " , " Démonstration " ) ;
/ / T a b l e a u en mode v e r t i c a l , a v e c q u e l q u e s champs
$form−>debutTable ( F o r m u l a i r e : : VERTICAL) ;
$form−>champTexte ( "Nom" , "nom " , " E n t r e z v o t r e nom " , 40) ;
$form−>champTexte ( " Prénom " , " prenom " , " E n t r e z v o t r e prénom " , 40) ;
/ / Un champ r a d i o , a v e c l a l i s t e d e s c h o i x d a n s un t a b l e a u PHP
$form−>champRadio ( " Sexe " , " s e x e " , "M" , a r r a y ( "M" => " Masculin " ,
" F "= >" F é m i n i n " ) ) ; / / Un champ s e l e c t , a v e c l a l i s t e d e s c h o i x d a n s un t a b l e a u PHP
$form−>champListe ( " J u s t i f i c a t i f " , " n a t i o n " , " c ni " , 1 ,
a r r a y ( " c n i "= >" C a r t e d ’ i d e n t i t é " ,
" p a s s " => " P a s s e p o r t " ,
" pc " => " P e r m i s de c o n d u i r e " ) ) ; / / Un champ t e x t a r e a
$form−>champFenetre ( " B r e f CV" , " cv " , " Votre CV en q u e l q u e s
l i g n e s " , 4 , 5 0 ) ;
/ / Un champ f i c h i e r
$form−>champFichier ( " Votre photo " , " photo " , 30) ;
/ / F i n du mode v e r t i c a l
$form−>f i n T a b l e ( ) ;
Trang 4$form−>a j o u t T e x t e ( "<b>Vos e n f a n t s </ b>" ) ;
/ / T a b l e a u en mode h o r i z o n t a l , a v e c 5 l i g n e s
$form−>debutTable ( F o r m u l a i r e : : HORIZONTAL, a r r a y ( ) , 5) ;
$form−>champTexte ( " Prénom " , " prenom [ ] " , " " , 20 , 30) ;
$form−>champTexte ( "Nom" , "nom [ ] " , " " , 20 , 30) ;
$form−>champTexte ( "Né en " , " a n n e e _ n a i s s a n c e [ ] " , " " , 4) ;
$form−>f i n T a b l e ( ) ;
/ / Bouton de v a l i d a t i o n , a v e c p l a c e m e n t l i b r e
$form−>champValider ( " V a l i d e r l a s a i s i e " , " v a l i d e r " ) ;
/ / A f f i c h a g e du f o r m u l a i r e
echo $form−>formulaireHTML ( ) ;
? >
Figure 3.5 — Affichage du formulaire de démonstration.
L’affichage du formulaire est donné dans la figure 3.5 Quelques lignes de spé-cification, accompagnées du nombre strictement minimal de paramètres, suffisent pour créer ce formulaire, sans qu’il soit nécessaire d’avoir à produire explicitement
la moindre balise HTML Cet avantage est d’autant plus appréciable que le résultat comprend une imbrication assez complexe de balises de formulaires, de tableaux, et
de données provenant du script PHP, qui seraient très fastidieuses à intégrer si l’on
ne disposait pas de ce type d’outil automatisé
Trang 53.3.3 Implantation
L’implantation de la classe nécessite des structures internes un peu plus sophistiquées que celles vues jusqu’à présent Il s’agit en effet de décrire le contenu d’un formu-laire, sous une forme offrant le plus de souplesse possible On doit être capable par exemple de récupérer individuellement la description HTML de l’un des champs,
ou de désigner un champ auquel on souhaite associer un contrôle Javascript Enfin les propriétés doivent contenir toutes les informations nécessaires pour produire la chaîne HTML du formulaire
On va représenter ce contenu sous la forme d’une liste de composants, à choisir
parmi
• un champ de saisie, accompagné de son libellé ;
• un texte libre à insérer dans le formulaire ;
• l’indication d’un début de tableau, accompagné des caractéristiques du tableau ;
• l’indication d’une fin de tableau
La figure 3.6 montre l’organisation globale de la classe, en distinguant la partie publique (en haut) proposant une interface à l’utilisateur, et une partie privée (en bas) constituée de méthodes internes et de propriétés (essentiellement, ici, les composants) Le principe général est que toutes les méthodes insèrent de nouveaux
composants, sauf formulaireHTML() qui va consulter les composants existants pour
produire le formulaire
Utilisateur Interface
composants (1)
(2)
champINPUT()
champSELECT()
champTEXTAREA()
debutTable() champTexte() champSelect() ajoutTexte() finTable() formulaireHTML()
champLibelle()
Partie privée
Partie publique
Figure 3.6 — Organisation de la classe Formulaire
REMARQUE –On pourrait (devrait ) créer une classeFormComposantpour représenter
et manipuler ces composants En programmation objet, tout concept doit donner lieu à la création d’une classe, avec des avantages à moyen et long terme en matière d’évolutivité L’inconvénient est de rendre la conception et l’organisation des classes plus ardu à maîtriser C’est la raison pour laquelle nous n’allons pas plus loin, au moins dans ce chapitre.
L’insertion d’un nouveau composant se fait directement pour le début ou la fin d’une table, et pour l’ajout d’un texte Pour l’ajout d’un champ accompagné de son