SCI6306 Bases de données documentaires

On retrouve trois grandes étapes lors de la conception d'une interface permettant de sauvegarder des données dans une BD sur le Web :

1. Préparation de la base de données MySQL

2. Préparation du formulaire HTML

3. Définition du code PHP pour enregistrer les réponses dans la base de données

La première étape a déjà été abordée dans les séances de cours précédentes. Pour rappel, cette première étape se divise en deux moments :

1. La modélisation de la réalité à décrire pour définir le schéma relationnel correspondant (ce que vous avez fait dans le volet A du projet de session), soit la précision du diagramme Entités-Relations, la définition de la structure des tables, la définition des contraintes additionnelles, la présentation d'exemples de contenus valides.

2. L'opérationnalisation de la modélisation dans le SGBD relationnel choisi (ce qui est fait dans le volet B du projet de session), soit la création des tables, des index et des relations et potentiellement l'importation de données s'il s'agit, par exemple, d'une migration à partir d'un ancien système.

Nous nous attarderons dans la séance de cours 9 à la deuxième étape, soit la préparation du formulaire HTML. Finalement, la troisième étape sera abordée à la séance de cours suivante (cours 10).

Afin d'illustrer la définition d'un formulaire, nous utiliserons l'exemple fictif du formulaire suivant :

Lorsque l'on clique sur Soumettre mes réponses, le formulaire nous redirige vers une page de remerciements qui rappelle nos réponses (mais sans les enregistrer dans une base de données) ainsi qu'elle corrige la toute dernière question :

L'idée de base est qu'un formulaire HTML contient différents contrôles (boîtes de saisie, menus déroulants, etc.) permettant à l'utilisateur ou l'utilisatrice de saisir des données. Dans l'exemple, on retrouve entre autres des boutons radio pour le choix de la crème glacée et une boîte de saisie en texte libre pour la saison préférée.

Comme illustré ci-dessous, le bouton pour soumettre le formulaire déclenche l'action indiquée pour le formulaire (attribut action de l'élément form), comme, par exemple, l'ouverture d'une nouvelle page. Dans l'exemple, ce bouton, intitulé Soumettre mes réponses, mène à la page des remerciements (merci.php).

Il est possible, dans cette nouvelle page merci.php, d'avoir accès aux valeurs contenues dans les contrôles pour, par exemple, les afficher ou les enregistrer dans une base de données. On retrouve ainsi, dans la page des remerciements de l'exemple :

• des balises HTML pour les chaînes de texte fixes - par exemple, le titre de la page "Merci de votre participation!",

• ainsi que du code PHP pour insérer dynamiquement le contenu des contrôles de formulaire de la page précédente.

Le principe du transfert des données du formulaire à la page suivante est simple, comme illustré et expliqué ci-dessous.

Chaque contrôle d'un formulaire porte un nom qui lui est propre (valeur de l'attribut name du contrôle). On peut visualiser ces contrôles en fait comme des boîtes dans lesquelles on dépose les valeurs saisies. Lorsque l'on clique sur un bouton de soumission, ces boîtes sont transportées jusqu'à la page pointée par le bouton de soumission (le nom de cette page se retrouve comme valeur de l'attribut action de la balise form décrite un peu plus loin). Une fois rendue à cette nouvelle page, il est possible de récupérer les valeurs de ces boîtes pour les afficher. En PHP, les boîtes des contrôles sont représentées par $_POST['nom de la boîte'], pour un formulaire privilégiant la méthode POST (nous reviendrons sur cette méthode plus tard). C'est la commande PHP echo qui permet de faire afficher ce contenu.

La structure générale d'un formulaire HTML est la suivante :

Ainsi :

• L'ensemble des contrôles d'un formulaire sera inclus à l'intérieur de la balise form.

• On retrouve dans la balise form minimalement deux attributs :

  1. l'attribut method pour indiquer quelle méthode est utilisée pour transférer les données (POST dans l'exemple, l'autre valeur possible étant GET),

  2. l'attribut action qui permet d'indiquer ce qu'il faut faire après avoir cliqué le bouton de soumission du formulaire; on peut par exemple y indiquer le nom d'un fichier à ouvrir. Dans l'exemple, la valeur de l'attribut action de la balise form a pour valeur merci.php : <form method="post" action="merci.php">

• Parmi les contrôles du formulaire, on retrouvera un bouton qui permettra de soumettre le formulaire. Il s'agit d'un élément input de type submit. Ce que l'on indique comme valeur de son attribut value apparaîtra sur le bouton. Dans l'exemple, l'attribut value du bouton de soumission a pour valeur Soumettre mes réponses : <input name="bouton_soumission" type="submit" value="Soumettre mes réponses" />

Lorsque l'on conçoit un formulaire on peut utiliser tous les types de questions habituelles dans un formulaire :

L'exemple ci-dessous illustre les quatre types de questions décrites :

Voici quelques éléments à remarquer dans le code HTML ci-dessus :

• Question 1 (un seul choix)

  • La balise input qui définit un bouton radio est suivie par une chaîne de caractère. Sans cette chaîne de caractère, on ne verrait sur la page Web qu'un bouton radio sans étiquette.

  • Tous les boutons radio portent le même nom (name="q1") afin d'en faire un groupe de bouton qui ne permet d'en choisir qu'un seul.

  • La balise label permet de rendre cliquable la chaîne de caractère affichée; sans cette dernière, seul le bouton radio serait cliquable.

  • Ce qui sera mis en mémoire est ce qui se retrouve dans l'attribut value.

• Question 2 (plusieurs choix)

  • La balise input qui définit une case à cocher est suivie par une chaîne de caractère. Sans cette chaîne de caractère, on ne verrait sur la page Web qu'un bouton radio sans étiquette.

  • Les cases à cocher portent des noms différents pour faciliter par la suite l'enregistrement. Si le même nom est utilisé, toutes les valeurs cochées se retrouveraient dans un vecteur qui est un peu plus complexe à traiter lorsque l'on débute.

  • La balise label permet de rendre cliquable la chaîne de caractère affichée; sans cette dernière, seul la case à cocher serait cliquable.

  • Ce qui sera mis en mémoire sera un "X" pour indiquer que le choix a été coché.

• Question 3 (réponse courte)

  • Le type email de la balise input permettra de s'assurer que c'est bien une adresse courriel qui est saisie.

  • L'attribut maxlength permet de s'assurer que l'on ne pourra saisir plus de 100 caractères afin de respecter la longueur du champ dans la base de données.

  • L'attribut size contrôle la longueur de la boîte affichée. Elle peut être plus courte que le nombre de caractères permis.

  • L'attribut required permet d'obliger la saisie lorsqu'un champ est obligatoire. Dans les deux questions précédentes, cet attribut était absent comme les questions étaient facultatives.

  • Dans la balise h2, l'attribut title permet de faire afficher une infobulle lorsque l'on survole l'énoncé de la question afin de rappeler le format attendu.

• Question 4 (réponse longue)

  • La balise textarea possède une balise d'ouverture et une balise de fermeture (contrairement à la balise input qui n'a qu'une balise concaténant l'ouverture et la fermeture). Ce qui est écrit entre les deux balises sera affiché dans la boîte de saisie. On pourrait s'en servir pour mettre une valeur par défaut par exemple.

  • Les attributs rows et cols contrôlent la taille de la boîte de saisie.

La copie d'écran ci-dessous illustre l'affichage de ce code dans un navigateur :

Le choix du type de contrôle à utiliser est bien plus qu'une question de visuel. Il faut choisir les contrôles qui permettent de bien respecter les types de données des champs de la base de données.

Plusieurs moyens peuvent être utilisés pour s'assurer de valider l'information à la saisie afin d'en augmenter la qualité. Ce peut être par programmation, par exemple avec JavaScript, mais aussi plus simplement par une bonne utilisation des différents types de contrôle et de leurs attributs.

On retrouve dans HTML5 de nouveaux types de contrôle qui permettent de valider le contenu. C'est le cas, par exemple, des balises input type="number", pour s'assurer de la saisie d'un chiffre, et input type="email" pour les adresses courriel. On retrouve une liste de ces nouveaux contrôles sur le site du W3Schools à l'URL https://www.w3schools.com/html/html_form_input_types.asp.

Il est aussi possible d'exploiter différents attributs des balises des contrôles de formulaire pour effectuer de la validation :

Il n'est pas toujours possible de valider les données lors de la saisie, soit parce qu'il n'y a pas de « format typé » ou parce que de multiples formes sont acceptées (par exemple, pour des numéros de téléphone internationaux). En ce cas, il peut être utile de rappeler certaines règles d'écriture, par exemple :

• À même l'interface, en les écrivant directement

• Via des infobulles, ce qui permet d'éviter de surcharger l'interface

  • L'attribut title peut être ajouté à toutes les balises. Son contenu apparaîtra comme une infobulle lorsque l'on survolera la balise avec la souris.