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

COURS INF2005 : PROGRAMMATION WEB … · COURS INF2005 : PROGRAMMATION WEB . ... manuel nous allons tracer les bonnes pratiques dans la programmation côté client en utilisant

  • Upload
    vankiet

  • View
    214

  • Download
    0

Embed Size (px)

Citation preview

Page 1: COURS INF2005 : PROGRAMMATION WEB … · COURS INF2005 : PROGRAMMATION WEB . ... manuel nous allons tracer les bonnes pratiques dans la programmation côté client en utilisant

COURS INF2005 : PROGRAMMATION WEB

Exercices de INF2005 Programmation Web, Laboratoires

Ruben Chambilla

Novembre 2017

Validation de formulaires

Page 2: COURS INF2005 : PROGRAMMATION WEB … · COURS INF2005 : PROGRAMMATION WEB . ... manuel nous allons tracer les bonnes pratiques dans la programmation côté client en utilisant

INF2005 - 30 Programmation web

Ruben Chambilla i

TABLEAU DES MATIÈRES

1. Introduction ......................................................................................................................................................1

2. Outils de développement .................................................................................................................................1

3. Java Script .........................................................................................................................................................2

3.1. Validation des formulaires. ......................................................................................................................2

3.1.1. Principe et structure du formulaire ..................................................................................................2

3.1.2. Les éléments d’un formulaire ...........................................................................................................2

3.1.3. Les Atributs .......................................................................................................................................3

3.1.4. Les éléments JavaScripts ..................................................................................................................3

3.1.5. Exercice .............................................................................................................................................4

4. Exercices aditionnel ..........................................................................................................................................7

4.1. Création d’un formulaire ..........................................................................................................................7

4.2. Formulaire de contact ..............................................................................................................................7

Page 3: COURS INF2005 : PROGRAMMATION WEB … · COURS INF2005 : PROGRAMMATION WEB . ... manuel nous allons tracer les bonnes pratiques dans la programmation côté client en utilisant

INF2005 - 30 Programmation web

Ruben Chambilla 1

1 . I N T R O D U C T I O N

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 . O U T I L S D E D É V E L O P P E M E N T

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 : http://www.blindtextgenerator.com/fr

http://fr.lipsum.com

http://responsivetest.net/ Responsive test https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg

Responsive Web Design Tester

Site web : Description des balises https://developer.mozilla.org/fr/

Dictionnaire d’attributs des balises http://webmasterhelp.fr/dico.php?lang=1 Liste des attributs HTML5 http://41mag.fr/liste-des-balises-

html5/liste-des-attributs-html5 The complete Font Awesome 4.6.3 icon reference http://fontawesome.io/cheatsheet

Liste des balises HTML5 https://jaetheme.com/balises-html5/

Page 4: COURS INF2005 : PROGRAMMATION WEB … · COURS INF2005 : PROGRAMMATION WEB . ... manuel nous allons tracer les bonnes pratiques dans la programmation côté client en utilisant

INF2005 - 30 Programmation web

Ruben Chambilla 2

3 . J A V A S C R I P T

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, ...

3.1.1. 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).

3.1.2. Les éléments d’un formulaire

Propriétés

Action Accès à l’attribut ACTION <FORM name=”f1” action=”/bin/prog1”>...</FORM>

<SCRIPT>document.f1.action=”/bin/prog2” </SCRIPT>

Method Accès à l’attribut METHOD

target Accès à l’attribut TARGET

enctype Type d’encodage des données transmises vers le serveur avec la méthode POST

Elements 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

Page 5: COURS INF2005 : PROGRAMMATION WEB … · COURS INF2005 : PROGRAMMATION WEB . ... manuel nous allons tracer les bonnes pratiques dans la programmation côté client en utilisant

INF2005 - 30 Programmation web

Ruben Chambilla 3

3.1.3. Les Atributs

BALISES ATTRIBUTS FONCTIONS

<FORM>… </FORM>

Balise qui permet de regrouper plusieurs éléments d'un formulaire (boutons, champs de saisie,) et qui possède certains attributs obligatoires.

<FORM ATTRIBUTS>…</FORM>

NAME = "nom" Un nom qui permet de différencier plusieurs formulaires sur une même page.

ACTION = "http://url" ACTION = "mailto:url"

Envoyer les données du formulaire vers un adresse de site Web Envoyer les données du formulaire vers une adresse E-Mail.

METHOD = "POST" METHOD = "GET"

Pour un envoi caché des informations vers une destination (CGI ou Email). 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.

ENCTYPE = "?" "text/plain": Formulaire classique. Pour envoyer les informations par E-Mail. "multipart/form-data": Si le formulaire doit contenir un fichier attaché. "application/x-www-form-urlencoded": Si on a recours à un programme CGI.

TARGET = "?" 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

3.1.4. 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 »

Page 6: COURS INF2005 : PROGRAMMATION WEB … · COURS INF2005 : PROGRAMMATION WEB . ... manuel nous allons tracer les bonnes pratiques dans la programmation côté client en utilisant

INF2005 - 30 Programmation web

Ruben Chambilla 4

3.1.5. Exercice Éléments à utiliser Form (ACTION, METHOD) JavaScript, Fonction

3.1.5.1. 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

3.1.5.2. Page web login.html La distribution de l’information de la page doit être selon l’image suivante :

Section<section></section

En-tête <header> </header>

Menu <nav></nav> <li></li>

Contenu du formulaire<Table> <tr> <td></td></tr></table>

Bas de page<footer> </footer>

Tel qu’est montré sur la page web index.html

Dans cet partie doit afficher des éléments de formulaire (text,

password, button) en utilisant un tableau

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

Page 7: COURS INF2005 : PROGRAMMATION WEB … · COURS INF2005 : PROGRAMMATION WEB . ... manuel nous allons tracer les bonnes pratiques dans la programmation côté client en utilisant

INF2005 - 30 Programmation web

Ruben Chambilla 5

<section> <form id="form_id" method="post" name="myform"> <table width="80%" border="1" align="center"> <tr><td colspan="2">&nbsp;</td></tr> <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> <tr> <td style="text-align: left">Numéro de client </td> <td rowspan="4" style="text-align: center">Comment s'abonner?</td> </tr> <tr style="text-align: left"> <td><input type="text" name="username" id="username" size="60"/></td> </tr> <tr style="text-align: left"> <td><label>Mot de passe</label></td> </tr> <tr style="text-align: left"> <td ><input type="password" name="password"id="password"size="60"/></td> </tr> <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> </tr> </table> </form> </section>

Page 8: COURS INF2005 : PROGRAMMATION WEB … · COURS INF2005 : PROGRAMMATION WEB . ... manuel nous allons tracer les bonnes pratiques dans la programmation côté client en utilisant

INF2005 - 30 Programmation web

Ruben Chambilla 6

3.1.5.3. Fichier login.html

Remplir le formulaire

L’information donnée est correcte Charger login.html

Oui

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; } } }

Page 9: COURS INF2005 : PROGRAMMATION WEB … · COURS INF2005 : PROGRAMMATION WEB . ... manuel nous allons tracer les bonnes pratiques dans la programmation côté client en utilisant

INF2005 - 30 Programmation web

Ruben Chambilla 7

4 . E X E R C I C E S A D I T I O N N E L

4.1. Création d’un formulaire

Créez le formulaire suivant :

4.2. Formulaire de contact

Page 10: COURS INF2005 : PROGRAMMATION WEB … · COURS INF2005 : PROGRAMMATION WEB . ... manuel nous allons tracer les bonnes pratiques dans la programmation côté client en utilisant

INF2005 - 30 Programmation web

Ruben Chambilla 8

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-3.1.1.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"> <div class="clear"> </div> <label for="nom">Nom *</label> <input type="text" id="nom" name="nom"> <div class="clear"> </div> <label for="phone">Téléphone *</label><input type="tel" id="phone" name="phone"> <div class="clear"> </div> <label for="email">Courrier Électronique *</label> <input type="email" id="email" name="email"> <div class="clear"> </div> <label for="email2">Confirmer vos courrier électronique *</label> <input type="email" id="email2" name="email2"> <div class="clear"> </div> <label for="cuqam">Código permanent de l'UQAM *</label> <input type="text" id="cuqam" name="cuqam"> <div class="clear"> </div> </fieldset> <input class="enregistrer" type="submit" value="Enregistrer"> </form> <div class="clear"> </div> </body> </html>

Code JavaScript Jquery

<script> $("#formulaire").validate({ rules: { prenom: { required: true, lettersonly: true }, nom: { required: true, lettersonly: true }, phone: { required: true, digits: true, minlength: 9, maxlength: 9 }, email: { required: true, email: true,

Page 11: COURS INF2005 : PROGRAMMATION WEB … · COURS INF2005 : PROGRAMMATION WEB . ... manuel nous allons tracer les bonnes pratiques dans la programmation côté client en utilisant

INF2005 - 30 Programmation web

Ruben Chambilla 9

//remote: "php/valider.php" }, email2: { required: true, equalTo: email }, cuqam: { required: true, cuqam: true, maxlength: 12 // } }, messages: { prenom: { lettersonly: "Écrivez just des lettres" }, nom: { lettersonly: "Écrivez just des lettres" }, email: { 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>