Templeet pas à pas

X. La création de formulaires

Introduction

Le but de ce document est de mettre en oeuvre l'enregistrement de valeurs dans une base de données à partir d'un formulaire.

Le formulaire contient trois champs : "field1", "field2", "field3" qui sont respectivement deux lignes de texte et une zone de texte.

L'utilisation de l'interface web se fait en trois étapes :

• renseignement du formulaire - "Capture 1"
• visualisation, puis validation ou correction (retour à l'étape 1) - "Capture 2"
• validation, enregistrement des données dans la table - "Capture 3"

Définition de la table

Dans l'exemple que nous traitons, nous enregistrons nos données dans une table nommée 'foo_table'. Celle-ci fait partie d'une base de données que nous appelons 'foo'.

CREATE TABLE `foo_table` (
  `id` int(11) NOT NULL auto_increment,
  `field1` varchar(50) default NULL,
  `field2` varchar(50) default NULL,
  `field3` text NOT NULL,
  KEY `id` (`id`)
)
	

Paramétrage de l'accès à la base de données

Le paramétrage de l'accès à la base de données se fait par l'interface d'administration de Templeet.

La boîte de dialogue se situe dans le sous menu "Édition de votre configuration" du menu "Configuration".

Dans notre exemple, nous utilisons l'alias "foo".

Vous devez donc configurer cet alias avec les paramètres d'accès à votre base de données (database, login, password, host, type de base).

Principe général

Notre formulaire est découpé en quatre fichiers :

• foo.html : est le script principal de notre formulaire. Il effectue les appels aux différents scripts.
• foo.form.tmpl : ce script contient le formulaire.
• foo.preview.tmpl : ce script effectue la visualisation des données renseignées par le formulaire.
• foo.send.tmpl : ce script enregistre les données.

foo.html

Voici le code source de ce script :

 
1  ~dont_cache()
2  ~include("header.tmpl")
3  ~if(!~empty(~getpost("preview")) || 
       !~empty(~getpost("correct")) ||
       !~empty(~getpost("valid")), 
4	~rem('
5		~set("field1", ~getpost("field1"))
6		~set("field2", ~getpost("field2"))
7		~set("field3", ~getpost("field3"))
8	'),'
9	~rem('
10		~set("field1", "")
11		~set("field2", "")
12		~set("field3", "")
13	')
14	~include("foo.form.tmpl")' 
15 )
16 
17 ~if(!~empty(~getpost("preview")),
18	~include("foo.preview.tmpl")
19 )
20 
21 ~if(!~empty(~getpost("correct")),
22	~include("foo.form.tmpl")
23 )
24 
25 ~if(!~empty(~getpost("valid")),'
26	~include("foo.preview.tmpl")
27	~include("foo.send.tmpl")'
28 )
29
30 ~include("footer.tmpl")
	

La commande ~dont_cache() de la ligne 1 désactive le cache de cette page. En effet si cette page est mise en cache, elle le sera avec les valeurs entrées par le premier utilisateur, ce qui n'est absolument pas l'effet voulu.

Les lignes 2 et 30 sont classiques, elles appellent l'entête et le pied de page.

La ligne 3 teste si les variables POST "preview" ou "correct" ou "valid" sont définies. Si aucune ne l'est cela signifie que le formulaire vient juste d'être chargé. Dans ce cas les champs sont définis avec leurs valeurs par défaut (lignes 10 à12) et le script qui contient le formulaire est chargé. Dans le cas contraire on définit chaque champ avec les valeurs contenues dans les variables POST (lignes 5 à 7).

Les lignes 17 à 28 incluent les scripts en fonction de la valeur des variables POST "preview", "correct", et "valid". Si la variable "preview" est définie alors le script "foo.preview.tmpl" est inclus.

Si la variable "correct" est définie alors le script "foo.form.tmpl" est inclus. Les valeurs du formulaire seront alors définies avec les précédentes valeurs à corriger.

Et pour finir si la variable "valid" est définie alors les fichiers "foo.preview.tmpl" et "foo.send.tmpl" sont inclus afin de visualiser et d'enregistrer les valeurs du formulaire.

NOTE: les variables POST contiennent les valeurs envoyées par un formulaire.

foo.form.tmpl

Voici le code source de ce script :

1  <form name="form" method="post" action="~relative_templeet_script()~get_dirname()foo.html">
2	<fieldset>
3		<legend>Groupe 1</legend>
4		<p>
5			<label for="field1">Field1 : <input type="text" id="field1" name="field1" value="~htmlspecialchars(~get('field1'))"/></label>
6		</p>
7		<p>
8			<label for="field2">Field2 : <input type="text" id="field2" name="field2" value="~htmlspecialchars(~get('field2'))"/></label>
9		</p>
10		<p>
11			<label for="field3">Field3 : <textarea cols="80" rows="4" id="field3" name="field3">~htmlspecialchars(~get('field3'))</textarea></label> 
12		</p>
13	</fieldset>
14	<input type="submit" name="preview" value="Visualiser" />
15  </form>
	

Ce script définit le formulaire HTML.

Tout d'abord je vous invite à lire l'article du site Openweb.eu.org traitant de l'utilisation des formulaires standards et accessibles, il se trouve à l'adresse suivante : http://www.openweb.eu.org/articles/formulaire_accessible/.

Les valeurs des champs sont définies par les variables "field1" , "field2", "field3". Celles-ci ont été préalablement initialisées par le script "foo.html".

Afin de permettre à Templeet de traiter les variables envoyées par le formulaire en méthode "POST", il est nécessaire de faire appel directement au fichier "templeet.php". C'est pour cela que la commande ~relative_templeet_script() est utilisée pour définir le chemin de la page destination du formulaire. L'adresse ainsi créée sera du style : "http://domaine/templeet.php/bar/foo.html".

La fonction ~get_dirname() renvoie le répertoire du script courant. Son utilisation permet au script d'être écrit d'une manière indépendante du répertoire.

La fonction ~htmlspecialchars() convertit les caractères spéciaux de la chaîne de caractères passée en paramètre en entités HTML. Ceci permet d'éviter les problèmes de guillemets dans les formulaires.

foo.preview.tmpl

Voici le code source de ce script :

1  <dt id="">Field 1 :</dt>
2  <dd>~get("field1")</dd>
3  <dt id="">Field 2 :</dt>
4  <dd>~get("field2")</dd>
5  <dt id="">Field 3 :</dt>
6  <dd>~nl2br(~get("field3"))</dd>
7  ~if(~empty(~getpost("valid")),'
8  <form name="form" method="post" action="~relative_templeet_script()~get_dirname()foo.html">
9	<input type="hidden" name="field1" value="~htmlspecialchars(~get('field1'))" />
10	<input type="hidden" name="field2" value="~htmlspecialchars(~get('field2'))" />
11	<input type="hidden" name="field3" value="~htmlspecialchars(~get('field3'))" />
12	<input type="submit" name="correct" value="Corriger" />
13	<input type="submit" name="valid" value="Valider" />
14 </form>')
	

Ce script permet de visualiser les valeurs du formulaire. Puis cette page vous permet de valider ou de corriger le résultat.

On trouve ici une nouvelle fonction : ~nl2br(). Elle renvoie la chaîne de caractères passée en paramètre après avoir inséré "<br />" devant chaque nouvelle ligne. Sans l'utilisation de cette fonction, les retours à la ligne de "field3" ne seraient pas visibles.

Ce script utilise un formulaire HTML pour transmettre les valeurs des champs à la page suivante. Celui-ci met en oeuvre uniquement des champs cachés (type="hidden"). La page suivante est sélectionnée en fonction du bouton "Corriger" ou "Valider". La page destination du formulaire est composée de la même façon que dans le script "foo.form.tmpl".

La ligne 7 contient un test conditionel. Celui-ci permet de ne pas afficher les boutons lors de la prévisualisation finale, c'est à dire lorsque le script "foo.send.tmpl" effectue l'enregistrement dans la base de données.

foo.send.tmpl

Voici le code source de ce script :

1  ~list('foo', 'INSERT INTO foo_table 
2  (field1, field2, field3) 
3  VALUES(
4  "~addslashes(~get("field1"))",
5  "~addslashes(~get("field2"))",
6  "~addslashes(~get("field3"))"
7  )',
8  "LD", '<p>Enregistrement effectué</p>',
9  "LE", '<p>Erreur dans la requête</p>'
10 )
	

Ce script effectue l'enregistrement des données dans la base.

La requête SQL est exécutée par la fonction ~list().

Dans notre exemple, le premier paramètre est le nom de l'alias de connexion à la base de données, qui est "foo".

Le second paramètre est la requête SQL. Celle-ci insert les trois champs : "field1", "field2", "field3" dans la table "foo". La fonction ~addslashes() est utilisée ici afin d'ajouter des anti-slashs dans chacune des chaînes contenant les valeurs des champs. Ceci évite d'avoir des problèmes avec les guillemets.

Le troisième et le quatrième paramètre forment un couple. Le premier élément du couple définit une condition, dans notre cas "LD" signifie que le second couple doit être évalué en cas de non traitement d'information. C'est le cas si la requête s'effectue sans erreur.

Tout comme les deux paramètres précédents, le cinquième et le sixième paramètre forment aussi un couple. Là le paramètre de condition est "LE", celui-ci signifie que le second paramètre du couple doit être évalué en cas d'erreur. C'est le cas si la requête génère une erreur.

Conclusion

Après la lecture de ce tutoriel, vous devez savoir utiliser Templeet afin de mettre en oeuvre un formulaire et d'insérer ses données dans une table.

De plus, cet exemple vous donne un "style" de conception. J'espère que vous utiliserez ce même "coding style" lors de vos développements.