École de bibliothéconomie et des sciences de l information SCI6306 Bases de données documentaires Cours 9 Formulaires Web pour saisie de données dans une base de données relationnelle avec PHP (partie 1 de 2) Faculté des arts et des sciences 6 novembre 2015 Christine Dufour, 2015 1/ 15
SCI6306 2/ 15 Au programme aujourd hui Intégration Web d une base de données MySQL : scénario général Intégration Web d une base de données MySQL pour l enregistrement de données Partie 1 : Préparation du formulaire Web Présentation du Volet C du projet de session Travail en laboratoire : Exercice et Volet C
SCI6306 3/ 15 Bases de données sur le Web Scénario général Accès à une base de données via un navigateur Web pour saisir des données et/ou afficher des données Serveur Web Système permettant l interaction dynamique (i.e. en temps réel) avec le contenu de la base de données Côté Serveur Côté Client
SCI6306 4/ 15 Bases de données sur le Web Enregistrement de données Titre de la page Web Champ 1 Champ 2 Champ 3 Choix 1 Choix 2 Choix 3 soumettre Formulaire HTML saisie des données validation action Instructions en PHP pour enregistrer les données dans un nouvel enregistrement (requête INSERT INTO) ou dans un enregistrement existant (UPDATE) Instructions PHP enregistrement dans la bd Données structurées en champs dans une(des) table(s) Base de données stockage des données (doit être accessible en écriture)
SCI6306 5/ 15 Bases de données sur le Web Étapes pour l enregistrement (Partie 1) 1. Préparation de la base de données MySQL 2. Préparation du formulaire HTML (Partie 2) 3. Définition du code PHP pour enregistrer les réponses dans la base de données
SCI6306 6/ 15 Étape 1 : Bases de données MySQL Préparation de la base de données Modélisation pour définir le schéma relationnel correspondant à la réalité à décrire Diagramme Entités-Relations Définition de la structure des tables Définition des conditions additionnelles Exemples de contenu valides Volet A du projet de session Implantation via phpmyadmin de la structure de tables définie Principale étape : création des tables, index et relations Volet B du projet de session Peut y avoir une étape d importation de données s il s agit, par exemple, d une migration à partir d un ancien système
Volet C du projet 6 novembre 2015 de session Principe général SCI6306 7/ 15 Exemple http://www.gin- ebsi.umontreal.ca/sci6306a15- eq01/formulaire.htm formulaire formulaire.htm <form method="post" action="merci.php"> <input type="radio" name="q1" value="vanille" />Vanille [ ] <input type="submit" /> </form> bouton pour soumettre le formulaire action déclenchée lorsque que le formulaire est soumis contrôles pour la saisie des données; chaque contrôle a un nom que l on peut réutiliser par la suite pour utiliser les données qu il contient merci.php <ul> </ul> Clic! <li><strong>crème glacée</strong> : <?php echo $_POST['q1'];?></li> Instruction pour afficher les données des contrôles du formulaire qui a appelé cette page. À noter : Les instructions en PHP intercalées dans le HTML sont encadrées par <?php et?> «echo» est la commande en PHP pour afficher quelque chose à l écran $_POST['q1'] permet d aller chercher la valeur d un des contrôles (méthode POST) PRINCIPE GÉNÉRAL 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 usager de saisir des données. Le bouton pour soumettre le formulaire déclenche l action indiquée pour le formulaire, comme, par exemple, l ouverture d une nouvelle page. Il est possible, dans cette nouvelle page, 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.
SCI6306 8/ 15 Structure générale <form id="nom du formulaire" method="post" action="action"> Action : par exemple, en inscrivant le nom d un fichier, il y aura une redirection vers ce dernier <!-- Éléments du formulaire (questions) --> <p><textarea rows="10" cols="60" name="comment">s.v.p. faites nous part de tout commentaire en lien avec un aspect ou l autre de notre bibliothèque.</textarea></p> [ ] <!-- Bouton pour la soumission du formulaire; exécute l'action définie pour le formulaire --> <p><input name="soumission_form" type="submit" value="titre du bouton" /></p> </form> Titre du bouton : texte qui sera inscrit sur le bouton
SCI6306 9/ 15 Types d éléments (contrôles) Question à choix multiples i.e. plusieurs choix offerts, une seule sélection possible (radio ou select) Question à réponses multiples i.e. plusieurs choix offerts, possibilité d en sélectionner plus d un (checkbox ou select) Question ouverte Réponse courte (text) Réponse longue (textarea) Voir le glossaire des balises HTML pour le cours (http://cours.ebsi.umontreal.ca/glossaireweb/index.php?cours=sci6306).
SCI6306 10 / 15 Types de contrôles vs Types de données Contrôles de type «question à choix multiples» & «question à réponses multiples» E.g., si choix = «1980» : Champ numérique E.g., si choix = «français» : Champ texte Contrôle de type «boîte de texte court» (max. 255 caractères) E.g., si réponse saisie est «Bibliothécaire» : Champ texte E.g., si réponse saisie est «20» : Champ numérique Contrôle de type «boîte de texte longue» : Champ texte Exemple http://www.gin-ebsi.umontreal.ca/sci6306a15-eq01/formulaire.htm
SCI6306 11 / 15 Validation de la saisie [1/3] Nouveaux types de contrôle dans HTML5 permettant de valider le contenu (par exemple, email, number, url) Ne sont toutefois pas supportés par tous les navigateurs (http://www.w3schools.com/html/html_form_input_types.asp) Autre solution : validation avec javascript (fonctionnelle en autant que le javascript est activé)
SCI6306 12 / 15 Validation de la saisie [2/3] Javascript Form Validation (http://www.javascript-coder.com/htmlform/javascript-form-validation.phtml) Bibliothèque javascript prédéfinie pour la validation Processus Installation au même niveau que les pages contenant les formulaires du fichier gen_validatorv4.js Déclaration de cette classe javascript dans l entête de la page Web : <script src="gen_validatorv4.js" type="text/javascript"></script> Ajout, après la fermeture du formulaire, des instructions de validation à l intérieur d une balise <script> <script type="text/javascript"> var frmvalidator = new Validator("nom_du_formulaire"); frmvalidator.enablemsgstogether(); [instructions de validation (voir acétate suivante)] </script>
SCI6306 13 / 15 Validation de la saisie [3/3] Javascript Form Validation : Exemples de validation Champ requis : frmvalidator.addvalidation("champ","req","message d erreur"); Champ courriel : frmvalidator.addvalidation("champ","email","message d erreur"); Menu déroulant requis : frmvalidator.addvalidation("champ","dontselect=valeurpardéfaut","mes sage d erreur"); Champ numérique : frmvalidator.addvalidation("champ","numeric","message d erreur"); Champ avec masque (utilise les expressions régulières) : frmvalidator.addvalidation("code postal","regexp=[a-z][0-9][a-z] [0-9][A-Z][0-9]","message d erreur"); L ensemble des validations possibles est disponible à l URL http://www.javascript-coder.com/html-form/javascript-form-validation.phtml#descriptors
SCI6306 14 / 15 Autres considérations 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.
SCI6306 15 / 15 Projet de session Volet C Objectifs Développer des pages Web pour faire de la saisie de données et de la visualisation de données Contexte Système Web existant à compléter Livrables Ensemble des fichiers constituant le système Web développé Base de données MySQL Travail en équipe, donc dans le compte partagé sur phpmyadmin ainsi que dans l espace commun sur GIN-EBSI