Module 133 Développer des application Web

Transcription

1 Module 133 Développer des application Web Validation des formulaires Lab #5 et #6 Version 0.1 EPAI / Frédéric Free Powerpoint Mauron Templates Page 1

2 Introduction Les formulaires HTML sont omnis présents dans nos applications Web, formulaires de contact, inscription en ligne, login, achats en lignes Mais c est également une source de failles sécuritaires non négligeable. Si la très grande majorité des internautes sont des gens honêtes, une petite partie ne l est pas Page 2

3 Rappel des différents champs Un formulaire est composé : de champs de saisie (balises: input, select et textarea) de cases à cocher et bouton radio de boutons pour valider ou annuler / effacer le formulaire une balise de formulaire forme qui englobe le tout un script Javascript qui va vérifier le contenu avant l envoi vers les erveur Web Page 3

4 Pourquoi valider un formulaire? Car vous ne devez accepter de la part de l utilisateur que ce qui est attendu comme données par votre application. Car vous êtes responsable du bon fonctionnement de votre application. Vous devez prévoir l imprévu Page 4

5 Que valider? Si un champ est obligatoire, vous devez vérifier qu il contient bien une donnée. Si cette donnée doit être dans un format bien définit, il faut le vérifier. Si cette donnée ne peut accepter que certains caractères, il faut le vérifier. Si cette donnée doit être numérique, il faut le vérifier. Page 5

6 Où valider La validation du côté client c est bien, mais elle ne sert à rien (si ce n est pour un confort de l utilisateur) si aucune vérification n est effectuée du côté du serveur. Donc, oui, nous devons tester les formulaires du côté du client (pour l utilisateur) et du côté du serveur (pour assurer un bon fonctionnement de l application => SECURITE). Car vous ne maitrisez pas ce qui est envoyé, mais uniquement ce que vous recevez Page 6

7 Validation JS (rappel des bonnes pratiques) Un formulaire doit toujours être vérifié avant envoyé. Vérifier sur l événement du bouton envoyer n est pas satisfaisant, car si un internaute tape sur Enter au lieu du bouton votre formulaire ne sera jamais vérifié. Il faut utiliser l event onsubmit du formulaire Le test du contenu d un formulaire en JS doit être considéré uniquement comme un plus pour le confort de l internaute, afin d éviter un rechargement de la page si son contenu est invalide. Page 7

8 Validation PHP Vous devez vous assurer que la variable : Contienne des données Quelle ne contient pas de caractères que vous ne désirez pas (balises HTML/XML, caractères invisible) en utilisant les fonctions php: strip_tags, trim, htmlentities, Quelle contient bien le nombre de caractères désiré Que le type de donné soit correcte Comme pour la validation JS, vous devez renseigner correctement l internaute sur les erreurs qu il a commis. On va y revenir, lors de l aspect injection SQL Page 8

9 Exercice Créez le formulaire de création d un User afin de renseigner tous les champs que nous avons déjà. Validez le formulaire en JS avec les contrôles de champ non nul et les valeurs correspondants au type et / ou qu au format désiré. Les champs en erreurs doivent être mis en évidence en modifiant la couleur du bakground par exemple. Validez sur le même principe qu au point précédant, mais cette fois du côté serveur, vous devez afficher les messages d erreurs correctement pour l internaute. Modifiez le script JS afin que le bouton de validation soit actif uniquement lorsque tous les champs obligatoires sont renseignés. Page 9

10 Introduction jquery I Pour utiliser jquery, vous devez inclure un script dans la page html <script type="text/javascript" src="jquery-xxxx.min.js"></script> Comme quai la totalité de ce que nous pouvons faire avec jquery se base sur la manipulation ou la lecture du Document Object Model (DOM), il faut nous assurer qu il soit chargé avant de faire toute manipulation: $(document).ready(function(){ }); //Le DOM est chargé, on peux utiliser jquery Vous le trouverez sur le site jquery.com Page 10

11 Introduction jquery II Affichons un message d alerte chaque fois que l internaute clique sur un lien de la page: $(document).ready(function(){ $( a ).click(function(){ }); }); alert( Hello wolrd! ); On Sur Ici $( a ) $ est le s assure quel code un est événement alias un a que exécuter sélecteur pour Dom la on lorsque classe soit l event bien jquery. agit? chargé survient Donc chaque $() fabrique un nouvel objet jquery Page 11

12 Introduction jquery III Mais comment sélectionner un élément de notre page html? Simplement en ajouter l attribut id au tag et pour sélectionner le bon tag, il suffit avec jquery $( #monid ) Ou en ajoutant l attribut class au tag et pour sélectionner le bon tag, il suffit : $(.maclass ) Page 12

13 Validons nos forms aves jquery I Pour cela, nous allons nous aider d un plugin jquery, vous devez inclure les scripts suivant dans la page html <script src="jquery-xxxx.min.js" ></script> <script src="./js/languages/jquery.validationengine-fr.js" ></script> <script src="./js/jquery.validationengine.js" ></script> jquery.validationengine-xx.js contient Vous les messages les trouverez d erreurs sur le site par défaut. Il suffit de remplacer ce fichier pour changer la langue des messages Page 13

14 Validons nos forms aves jquery II Il suffit de créer l objet validationengine pour le formulaire en question jquery(document).ready(function(){ }); // binds form submission and fields to the validation engine jquery("#formid").validationengine(); En ce qui concerne le formulaire: <label> <span> address : </span> <input value="" class="validate[required,custom[ ]] text-input" type="text" name=" " id=" " /> </label> Appel de la vérification en précisant ce qui doit être vérifié Page 14

15 Regardons ce que contient validationengine-xx.js C est ce fichier qui contient tous les regex. Vous pouvez ajouter vos propre regex, mais attention lors de la mise à jour du plugin Le format est toujours identique: "dateeu": { }, "regex": "/^((19 20)\d\d(.)(0[1-9] 1[012])(.)(0[1-9] [12][0-9] 3[01]))$/", "alerttext": "Date invalide, format dd.mm.yyyy requis" Page 15

16 Exercice Modifiez la vérification JS du formulaire précédant en utilisant jquery et le plugin de validation. Ajoutez un datepiker afin d aider l internaute à la saisie de sa date de naissance. Modifiez le formulaire afin qu il soit dans la langue choisie par l internaute (fr / de / en /..) Modifiez la vérification PHP du formulaire en utilisant le script PHP validation form ( Page 16

17 FIN Page 17