COURS INF2005 : PROGRAMMATION WEB. Exercices de INF2005 Programmation Web, Laboratoires

Transcription

1 COURS INF2005 : PROGRAMMATION WEB Exercices de INF2005 Programmation Web, Laboratoires Validation de formulaires Ruben Chambilla Novembre 2017

2 TABLEAU DES MATIÈRES 1. Introduction Outils de développement Java Script Validation des formulaires Principe et structure du formulaire Les éléments d un formulaire Les Atributs Les éléments JavaScripts Exercice Exercices aditionnel Création d un formulaire Formulaire de contact...7 Ruben Chambilla i

3 1. INTRODUCTION Description de cours : Introduire les étudiants à la problématique de la programmation d'applications web. Les fondements du web : navigateurs, serveurs, protocoles. Les principales normes et les principaux outils fonctionnant dans le navigateur sont couverts : HTML, XHTML, JavaScript, CSS, DOM et XML. Conception de formulaires. Introduction à la problématique des traitements sur serveur dans n environnement web : script serveur, notion de persistance. Présentation des nouvelles approches et techniques en émergence. Séance d'exercices de deux heures hebdomadaire. Description de manuel : Les applications web même s ils sont simples pages statiques en termes du code html ou une page dynamique avec connexion à une base de donné en termes du langage de programmation, certaine partis d une application web s exécutera sur l ordinateur de l utilisateur et certaine sur le serveur web. Dans c est manuel nous allons tracer les bonnes pratiques dans la programmation côté client en utilisant différentes technologies. Contienne des exercices des laboratoires et travaux pratiques. 2. OUTILS DE DÉVELOPPEMENT Sur internet il y a nombreux outils qu aide créer un application web, sur tour au niveau de texte, cependant, la plupart des développeurs utilisent les suivants : Générateur de faux texte : Site web : Description des balises Dictionnaire d attributs des balises Liste des attributs HTML5 The complete Font Awesome icon reference Liste des balises HTML5 Responsive test Responsive Web Design Tester Ruben Chambilla 1

4 3. JAVA SCRIPT 3.1. Validation des formulaires. Interactivité avec l utilisateur en proposant des zones de dialogue Selon le choix de l utilisateur, un traitement est associé aux zones de dialogue : - Niveau client avec JavaScript,... - Niveau du serveur avec PHP, Principe et structure du formulaire Est constitué avec certains conteneurs que permettront regrouper des éléments, qui vont permettre à l'utilisateur de choisir ou de saisir différentes données. Ceux données seront envoyées vers un direction URL qu est indiqué dans l'attribut ACTION de la balise FORM et par la méthode indiquée par l'attribut METHOD. La balise <FORM>... </FORM>, a des éléments comme les boutons, texte, select, radio buttom, etc. <FORM METHOD="POST" ACTION="index.html">... </FORM> Les formulaires ont les principes suivants : Si le formulaire est soumis, les couples (nom/valeur) de la zone définie par le formulaire sont transmis dans un requête HTTP (dans le cas par exemple PHP vers serveur). Les champs de saisie sont écrits à l aide des balises HTML ou HTML5. Une zone saisie peut être associé un traitement à l aide d un événement JavaScript (au niveau clients) Les éléments d un formulaire Propriétés Action Method target enctype Elements Accès à l attribut ACTION <FORM name= f1 action= /bin/prog1 >...</FORM> <SCRIPT>document.f1.action= /bin/prog2 </SCRIPT> Accès à l attribut METHOD Accès à l attribut TARGET Type d encodage des données transmises vers le serveur avec la méthode POST Accès aux objets du formulaires elements.length : nombre d objets du formulaire elements[n].name : nom du n ième + 1 objet du formulaire elements[n].name : valeur du n ième + 1 objet du formulaire Ruben Chambilla 2

5 Les Atributs BALISES ATTRIBUTS FONCTIONS <FORM> </FORM> <FORM ATTRIBUTS> </FORM> NAME = "nom" Balise qui permet de regrouper plusieurs éléments d'un formulaire (boutons, champs de saisie,) et qui possède certains attributs obligatoires. Un nom qui permet de différencier plusieurs formulaires sur une même page. ACTION = " ACTION = "mailto:url" METHOD = "POST" METHOD = "GET" ENCTYPE = "?" TARGET = "?" Envoyer les données du formulaire vers un adresse de site Web Envoyer les données du formulaire vers une adresse . Pour un envoi caché des informations vers une destination (CGI ou ). La méthode "POST" envoie le contenu du formulaire séparément de l'url. La méthode GET envoi le contenu du formulaire et l enregistre dans la variable d environnement standard QUERY_STRING sur le serveur doté d un protocole HTTP. "text/plain": Formulaire classique. Pour envoyer les informations par . "multipart/form-data": Si le formulaire doit contenir un fichier attaché. "application/x-www-form-urlencoded": Si on a recours à un programme CGI. Définit dans quelle fenêtre ou frame le résultat du formulaire sera affiché. Valeur Action nom_cadre Affiche la cible dans le cadre indiqué par le nom._ Self Affiche la cible dans le même cadre que le lien_ Parent Affiche la cible dans le cadre lié de niveau supérieur _blank Affiche la cible dans une nouvelle fenêtre sans cadre _top Affiche la cible dans la fenêtre entière du navigateur sans cadre Les éléments JavaScripts JavaScript est un langage de programmation du web du côté du client, il est exécuté dans un navigateur «C'est un langage basé Objets qui permet de gérer l'interaction entre l usager et le document HTML» Ruben Chambilla 3

6 Exercice Éléments à utiliser Form (ACTION, METHOD) JavaScript, Fonction Structurer la page web login.html - Créez un fichier login.html (entête, pied de page et contenu). - Ajoutez les éléments nécessaires dans un formulaire d accès vers la page profile.html. o Éléments Text Mot de Passe Bouton - Créez code Javascript pour valider l information du formulaire o Créez un fichier login.js dans le dossier js du projet Page web login.html La distribution de l information de la page doit être selon l image suivante : En-tête <header> </header> Tel qu est montré sur la page web index.html Menu <nav></nav> <li></li> Dans cet partie doit afficher des éléments de formulaire (text, password, button) en utilisant un tableau Section <section></section Contenu du formulaire <Table> <tr> <td></td></table> Bas de page <footer> </footer> Utilisez la méthode POST pour envoyer l information vers profile.html et ACTION si l information donnée est correcte doit exécuter la page profile.html Ruben Chambilla 4

7 <section> <form id="form_id" method="post" name="myform"> <table width="80%" border="1" align="center"> <tr><td colspan="2"> </td> <tr> <td width="55%">entrez vos code permanente à l'uqam et le mot de passe liés à votre dossier.<span style="text-align: left"></span></td> <td width="45%" style="text-align: center">vous n'êtes pas abonné?</td> <tr> <td style="text-align: left">numéro de client </td> <td rowspan="4" style="text-align: center">comment s'abonner?</td> <tr style="text-align: left"> <td><input type="text" name="username" id="username" size="60"/></td> <tr style="text-align: left"> <td><label>mot de passe</label></td> <tr style="text-align: left"> <td ><input type="password" name="password"id="password"size="60"/></td> <tr style="text-align: left"> <td ><input type="button" value="connexion" id="submit" onclick="validate()"/></td> <td style="text-align: center"> Mot de passe perdu?</td> </table> </form> </section> Ruben Chambilla 5

8 Fichier login.html Remplir le formulaire L information donnée est correcte Oui Charger login.html Non Action de comparaison Basse de donnée var attempt = 3; function validate() { var username = document.getelementbyid("username").value; var password = document.getelementbyid("password").value; if ( username == "test1234" && password == "123456"){ window.location = "profile.html"; return false; else{ attempt --; alert("you have left "+attempt+" attempt;"); if( attempt == 0) { document.getelementbyid("username").disabled = true; document.getelementbyid("password").disabled = true; document.getelementbyid("submit").disabled = true; return false; Ruben Chambilla 6

9 4. EXERCICES ADITIONNEL 4.1. Création d un formulaire Créez le formulaire suivant : 4.2. Formulaire de contact Ruben Chambilla 7

10 Code html <html> <head> <title>formulaire de contact</title> <meta charset="utf-8"> <meta name="description" content="formulario de contacto"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery min.js"></script> <script src="js/jquery.validate.min.js"></script> <script src="js/additional-methods.js"></script> <script src="js/messages_fr.js"></script> </head> <body> <div class="contenu"> <h1>formulaire de contact</h1> <p>remplisez les champs</p> <form id="formulaire" action="" method="post" novalidate> <fieldset> <legend>information generale</legend> <label for="prenom">prenom *</label> <input type="text" id="prenom" name="prenom"> <label for="nom">nom *</label> <input type="text" id="nom" name="nom"> <label for="phone">téléphone *</label><input type="tel" id="phone" name="phone"> <label for=" ">courrier Électronique *</label> <input type=" " id=" " name=" "> <label for=" 2">confirmer vos courrier électronique *</label> <input type=" " id=" 2" name=" 2"> <label for="cuqam">código permanent de l'uqam *</label> <input type="text" id="cuqam" name="cuqam"> </fieldset> <input class="enregistrer" type="submit" value="enregistrer"> </form> </body> </html> Code JavaScript Jquery <script> $("#formulaire").validate({ rules: { prenom: { lettersonly: true nom: { lettersonly: true phone: { digits: true, minlength: 9, maxlength: 9 { true, Ruben Chambilla 8

11 //remote: "php/valider.php" 2: { equalto: cuqam: { cuqam: true, maxlength: 12 // messages: { prenom: { lettersonly: "Écrivez just des lettres" nom: { lettersonly: "Écrivez just des lettres" { remote: "Ce courrier est déjà utilisé." cuqam: { cuqam: "Écrivez vos code permanent de l'uqam)." submithandler: function() { //pour traiter quelque chose, puis en utilisant le soumettre par défaut alert("formulaire envoyé"); ); </script> Ruben Chambilla 9