• Création d'une page formulaire.
• Enregistrement des données.
• Contrôles de saisie.
• Recherche simple dans une base de données.

	Durée estimée : 30 mn

Ouverture du projet

• Lancez WEBDEV 28 (si ce n'est déjà fait).

• Ouvrez le projet "Mes_Premieres_Pages".
  1. Affichez la page d'accueil de WEBDEV (Ctrl + <).
  2. Cliquez sur "Tutoriel" puis dans la zone "Partie 1 - Leçon 1.3 - Mes premières pages", double-cliquez sur "Mes premières pages (Exercice)".

	Important !	Dans cette partie, nous nous concentrons sur la création de pages simples. Le projet "Mes_Premieres_Pages" est un projet vide, déjà créé. La création d'un projet sera abordée dans une prochaine leçon.

	Corrigé	Un projet corrigé est disponible. Ce projet contient les différentes pages créées dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil de WEBDEV, cliquez sur "Tutoriel" puis dans la zone "Partie 1 - Leçon 1.3 - Mes premières pages", double-cliquez sur "Mes premières pages (Corrigé)".

Création de la page

• Pour créer la page :
  1. Cliquez sur parmi les boutons d'accès rapide.
     
  2. La fenêtre de création d'un nouvel élément s'affiche. Cette fenêtre permet de créer tous les éléments pouvant être associés à un projet.
  3. Cliquez sur "Page" puis sur "Page". L'assistant de création d'une page s'affiche.
  4. Sélectionnez "Vierge".
     
  5. Validez (bouton "OK"). La page est automatiquement créée sous l'éditeur. La fenêtre de sauvegarde de la page apparaît. Cette fenêtre affiche :
     • Le titre de la page. Ce titre sera affiché dans la barre de titre du navigateur.
     • Le nom de la page. Ce nom correspond au nom logique de la page. Ce nom sera utilisé pour manipuler la page par programmation.
     • L'emplacement. Cet emplacement correspond au répertoire de sauvegarde du fichier correspondant à la page.
  6. Saisissez le titre de la page : "Formulaire".
     
  7. Le nom de la page (qui sera utilisé par exemple en programmation) est automatiquement déduit du titre de la page. Si ce nom ne vous convient pas, il est possible de le modifier et de spécifier un nom différent du titre de la page.
  8. Validez (bouton "OK").

	Note	Pour chaque page créée sous l'éditeur, WEBDEV génère plusieurs types de fichiers : Un fichier "WWH" qui contient la description de la page pour l'éditeur de pages. Ce fichier est enregistré dans le répertoire du projet. Un fichier "AWL" qui correspond à la description de la page pour le moteur WEBDEV dans le sous-répertoire EXE du projet. Un fichier "HTM" qui contient le code HTML et le code Javascript de la page destiné à être envoyé au navigateur. Ce fichier est enregistré dans le sous-répertoire "\<Nom du projet>_WEB\XX" (un sous-répertoire par langue, par exemple "FR" pour la langue française, "UK" pour la langue anglaise, ...).

Création des champs

• Nom.
• Prénom.
• Adresse.
• Email.
• Login.
• Mot de passe.

• Pour créer un champ de saisie :
  1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
     
  2. Le champ en création suit le mouvement de la souris.
  3. Cliquez dans la page vierge pour créer le champ. Le champ est créé et des poignées sont affichées pour indiquer que le champ est sélectionné.
     

     	Note	Vous devez créer un champ ? Affichez le volet "Création" de WEBDEV : tous les champs disponibles sont accessibles dans ce volet.

• Pour modifier le libellé du champ :
  1. Cliquez sur le champ (simple clic) : le libellé passe en édition. Si vous préférez utiliser le clavier, il suffit d'appuyer sur la touche Espace ou sur la touche Entrée pour faire passer le libellé en édition.
     
  2. Saisissez "Nom" et validez avec la touche Entrée. Le libellé est immédiatement modifié. Le nom du champ est également modifié : il apparaît dans la bulle d'aide en survol du champ : SAI_Nom.
     

	Note	Observez bien le nom du champ que WEBDEV propose par défaut : ce nom commence par les lettres "SAI_". Ce préfixe est automatiquement ajouté car le projet utilise une charte de programmation. La charte de programmation permet de définir un préfixe pour chaque type d'objet et ainsi d'identifier rapidement l'élément manipulé : une page commence par "PAGE_" (nous l'avons vu lors de l'enregistrement de la page). un champ de saisie commence par "SAI_". un bouton commence par "BTN_", etc. Si vous ne voulez pas utiliser cette charte, il suffit de la débrancher : dans le ruban, sous le volet "Projet", dans le groupe "Autres actions", déroulez "Charte" et décochez l'option "Utiliser la charte".

• Pour modifier plus en détail les caractéristiques du champ, il suffit de double-cliquer sur le champ. Une fenêtre de description du champ apparaît :
  

• Nous allons par exemple modifier la taille maximale de saisie : il suffit de saisir la nouvelle taille (30 dans notre cas) dans le champ "Taille de saisie (caractères)". De nombreuses autres caractéristiques sont modifiables. Pour enregistrer les modifications, cliquez sur le bouton "OK" de validation.

• Maintenant, à vous de jouer. Créez de la même manière les champs de saisie suivants, en dessous du champ "Nom" :
  

  Libellé	Type	Taille
  Prénom	Texte	30
  Adresse	Texte multiligne
  Email	Texte	255
  Login	Texte	10
  Mot de passe	Mot de passe	10

Voici la page que nous voulons obtenir :

• Le champ de saisie "Adresse" permet de saisir plusieurs lignes.
• Les différents champs de saisie sont alignés.
• Les champs "Login" et "Mot de passe" ont un libellé rouge.

Améliorations de la page

• Pour agrandir le champ "Adresse" :
  1. Cliquez sur le champ "Adresse".
  2. Des poignées apparaissent.
  3. Saisissez avec la souris la poignée en bas de la zone de saisie et agrandissez la zone.

• Vous pouvez ainsi agrandir en largeur les différents champs de la page.

• Pour aligner les champs de la page :
  1. Sélectionnez le champ "Nom" puis tous les autres champs de saisie de la page (en maintenant la touche Ctrl appuyée et en cliquant sur les différents champs).
     

     	Note	Attention : le premier champ sélectionné est important. En effet, les options d'alignement se basent sur : La taille du premier champ sélectionné : elle va servir de référence pour la taille des autres champs. La position du premier champ sélectionné : tous les champs sélectionnés seront alignés par rapport au premier champ sélectionné.
  2. Affichez le volet "Alignement" du menu de WEBDEV. Ce volet contient toutes les options d'alignement disponibles pour les champs.
     
  3. Nous voulons que les bords gauches et droits des champs soient alignés. Cliquez sur l'option "Justifier (Int et Ext)".
     

     	Note	Si vous ne savez pas quel alignement choisir, survolez les différentes options proposées par le volet "Alignement" de WEBDEV. Lors du survol avec la souris d'une option, les champs sélectionnés dans la page sont automatiquement positionnés en fonction de l'option survolée. Si le positionnement vous convient, il suffit de cliquer sur l'option. Si le positionnement ne vous convient pas, il suffit de cliquer dans la page : les champs sont replacés à leur position d'origine.
  4. Enregistrez la page : cliquez sur parmi les boutons d'accès rapide (ou utilisez le raccourci Ctrl + S).

Modification du style des champs "Login" et "Mot de passe"

• Pour modifier le style par défaut :
  1. Sélectionnez le champ "Login".
  2. Affichez la fenêtre de description du champ (double-cliquez sur le champ par exemple).
  3. Dans l'onglet "Style", sélectionnez l'élément "Libellé (CSS)".
  4. Déroulez la combo "Couleur" et sélectionnez la couleur rouge.
     
     
     

     	Note	Afin de réutiliser ce style, il est possible de l'ajouter à la feuille de styles du projet. Il suffit de : Cliquer sur le bouton "Ajouter ce style au projet" dans le volet "Style WEBDEV" affiché à droite de la fenêtre de description. Donner un nom au style. Cliquer sur le bouton "Ajouter". Pour réutiliser le style créé et l'associer à un autre champ : Sélectionnez le champ dont le style doit être modifié. Affichez le menu contextuel du champ (clic droit) et sélectionnez l'option "Choisir un style WEBDEV". Dans la fenêtre qui s'affiche, sélectionnez le style voulu et validez. Note : Le choix d'un style existant sera effectué dans la leçon 5.
  5. Validez la fenêtre de description du champ "Login".

• Pour appliquer ce même style au champ "Mot de passe" :
  1. Sélectionnez le champ "Mot de passe".
  2. Appuyez sur la touche F4.
     

     	Note	La touche de raccourci F4 permet de rejouer sur le ou les champs sélectionnés, la dernière modification effectuée. Dans notre cas, le changement de couleur est automatiquement rejoué sur le champ "Mot de passe".
  3. Vous obtenez l'UI suivante :
     

Pensez mobilité

Test de la page

• Lancez le test de cette page (cliquez sur l'icône parmi les boutons d'accès rapide). Vous pouvez saisir des données, mais ces données ne sont ni traitées, ni enregistrées.

• Fermez le navigateur.

Création du fichier de données

• Pour créer automatiquement le fichier de données :
  1. Dans le ruban, sous le volet "Page", dans le groupe "Edition", déroulez "Autres actions" et sélectionnez "Générer une description de fichier".
  2. Un nouvel éditeur apparaît : l'éditeur d'analyses. L'éditeur d'analyses contient la description de tous les fichiers de données qui seront manipulés par le projet.
  3. L'assistant de génération d'un fichier de données se lance.
     
  4. Le nom du fichier de données est automatiquement renseigné avec le nom de la page. Nous allons modifier quelques éléments :
     • Saisissez "Inscription" dans le nom.
     • Saisissez "Inscription" dans le libellé.
     • Saisissez "une inscription" dans le dernier champ.
  5. Passez à l'étape suivante (bouton "Suivant" en bas de l'assistant).
  6. Choisissez les champs à récupérer. Dans notre cas, tous les champs de la page correspondent à une rubrique.
     
  7. Passez à l'étape suivante.
  8. Cette étape permet de définir les clés (également appelées index).
     

     	Note	Une clé permet un accès plus rapide lors des recherches (clé avec doublons) et/ou de s'assurer que la valeur d'une rubrique ne peut être enregistrée qu'une seule fois (clé unique).
  9. Dans cet exemple, la rubrique "Nom" sera une clé avec doublons et la rubrique "Login" sera une clé unique. Le fichier de données pourra donc contenir deux personnes inscrites avec le même nom mais pas avec le même login.
     
  10. Passez à l'étape suivante.
  11. Validez le récapitulatif. La description du fichier de données apparaît sous l'éditeur d'analyses.
  12. Enregistrez l'analyse : cliquez sur parmi les boutons d'accès rapide (ou utilisez le raccourci Ctrl + S).
  13. Fermez l'éditeur d'analyses.
  14. Une fenêtre apparaît, proposant de synchroniser le projet. Il s'agit d'une vérification des différences entre les pages créées et les données définies dans l'analyse. Cette étape est effectuée à chaque modification de l'analyse, lors du retour vers les pages du projet.
  15. Cliquez sur "Oui".

Enregistrement des données

• Revenons au formulaire d'inscription pour mettre en place l'ajout des données saisies par l'internaute dans le fichier de données. En haut de l'éditeur, se trouve la barre des documents. Dans cette barre, un bouton est affiché par document ouvert sous l'éditeur.
  
  • "P" représente le projet.
  • "PAGE_Formulaire" représente la page "Formulaire".

• Pour enregistrer les données depuis notre formulaire, il nous faut un champ Bouton. Ce champ permettra de valider les informations saisies dans la page et d'enregistrer les données dans le fichier de données Inscription.

• Pour créer un champ Bouton :
  1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
  2. Le champ en création suit le mouvement de la souris.
  3. Cliquez dans la page pour créer le champ (par exemple en dessous des champs de saisie). Le champ est créé.
  4. Appuyez sur la barre d'espace : le libellé passe en édition.
  5. Saisissez "Enregistrer".
  6. Appuyez sur la touche Entrée pour valider.

• Pour saisir le code WLangage associé au champ Bouton :
  1. Affichez le menu contextuel du champ et sélectionnez l'option "Code" (ou appuyez sur la touche F2).
  2. Les événements associés au champ sont affichés. Nous retrouvons les entêtes des événements effectués sur le serveur et les entêtes des événements effectués sur le navigateur.
  3. Nous voulons enregistrer les données dans la base de données. L'accès à la base de données peut être effectué uniquement en code Serveur : nous devons saisir le code WLangage dans l'événement "Clic Serveur" (jaune).
  4. Saisissez le code WLangage suivant :
     
     PAGE_Formulaire.VersFichier()
     Inscription.Ajoute()
     Info("Enregistrement ajouté.")
     
  5. Examinons ce code :
     • La fonction <Page>.VersFichier permet de récupérer le contenu des champs de saisie de la page pour le transférer vers le fichier de données.
     • La fonction <Fichier de données>.Ajoute permet d'écrire dans le fichier de données les données transférées.
     • La fonction Info permet d'afficher un message.
  6. Sauvez (Ctrl + S) et fermez l'éditeur de code (croix en haut à droite).

Test de la page

• Lancez le test de cette page :
  1. Cliquez sur l'icône parmi les boutons d'accès rapide.
  2. La page s'affiche dans un navigateur.
  3. Saisissez les données suivantes :
     • Nom : Dupont
     • Prénom : Paul
     • Adresse : Rue des fleurs, 75000 Paris
     • Email : paul.dupont@hautrange.fr
     • Login : polo
     • Mot de passe : polo
  4. Cliquez sur le bouton "ENREGISTRER". Le navigateur affiche un message pour indiquer que l'enregistrement est ajouté !
  5. Fermez le navigateur.

Visualisation des données saisies

• Pour lancer WDMap :
  1. Dans le ruban, sous le volet "Outils", dans le groupe "Base de données", cliquez sur "WDMap".
  2. Sélectionnez le fichier de données "Inscription". Le contenu du fichier de données s'affiche.
     
  3. Nous retrouvons bien les données saisies.
  4. Fermez WDMap (bouton "Fermer").

• rendre obligatoire la saisie du nom, de l'email et du login.
• faire saisir le mot de passe en double pour le vérifier.

Saisie obligatoire

• Revenez si nécessaire sur la page "PAGE_Formulaire" en cliquant sur son nom dans la barre des documents ouverts.

• Pour rendre obligatoire la saisie dans le champ "Nom" :
  1. Double-cliquez sur le champ "Nom" : la fenêtre de description du champ apparaît.
  2. Affichez le volet "Détail".
  3. Cochez l'option "Saisie obligatoire". Si cette option est cochée, WEBDEV va automatiquement vérifier si ce champ de saisie a été renseigné.
  4. Validez la fenêtre de description.

• Pour appliquer cette modification au champ "Email" :
  1. Sélectionnez le champ "Email" (clic de souris).
  2. Appuyez sur la touche F4 : la dernière action effectuée sur un champ est ré-exécutée sur le champ sélectionné.

• Appliquez de la même manière cette modification au champ "Login".

• Lancez le test de cette page :
  1. Cliquez sur l'icône parmi les boutons d'accès rapide.
  2. Dans la page qui s'affiche, cliquez sur le bouton "ENREGISTRER".
  3. Une boîte d'information est automatiquement affichée pour indiquer que des champs obligatoires n'ont pas été remplis.
     
  4. Validez la boîte d'information.
  5. Fermez le navigateur.

Vérification du mot de passe

• Créez un nouveau champ de saisie. Ce champ a pour libellé "Vérification" et est de type "Mot de passe".

• Le code WLangage de vérification du mot de passe doit être saisi dans les événements associés au champ Bouton "ENREGISTRER".
  1. Cliquez sur le champ Bouton "ENREGISTRER" et appuyez sur la touche F2.
  2. Cette vérification consiste à comparer la valeur saisie dans le champ "Mot de passe" et celle saisie dans le champ "Vérification". Pour effectuer cette vérification, le serveur est inutile : cette vérification peut être effectuée en local dans le navigateur.
  3. Nous allons donc saisir le code suivant dans l'événement navigateur "Clic" :
     
     SI SAI_Mot_De_Passe <> SAI_Vérification ALORS
     Info("Erreur, les mots de passe sont différents.")
     SAI_Mot_De_Passe = ""
     SAI_Vérification = ""
     DonneFocusEtRetourUtilisateur(SAI_Mot_De_Passe)
     FIN
     
  4. Examinons ce code :
     • L'instruction SI permet de faire une action sur une condition. Dans notre cas, l'action est faite si les champs "Mot de passe" et "Vérification" sont différents (opérateur ‘<>').
     • En cas de différence, les champs de saisie sont "vidés" : on leur affecte une chaîne vide.
     • La fonction DonneFocusEtRetourUtilisateur permet de remettre le curseur dans le champ indiqué (ici, le champ "Mot de passe") sans effectuer le code qui suit. Dans notre cas, si les mots de passe saisis sont différents, le champ "Mot de passe" reprend le focus et le code en cours d'exécution est arrêté : le code serveur qui permet d'enregistrer les informations dans la base de données ne sera pas effectué.

• Lancez le test de cette page :
  1. Cliquez sur l'icône parmi les boutons d'accès rapide.
  2. Dans la page qui s'affiche dans un navigateur, saisissez les informations suivantes :
     • Nom : "Dupont"
     • Prénom : "Pierre"
     • Email : "Pierre.Dupont@gmail.com"
     • Login : "Pierre"
     • Mot de passe : "Pierre"
     • Vérification : "Louis"
  3. Cliquez sur le bouton "ENREGISTRER".
  4. Un message d'erreur est automatiquement affiché pour indiquer que les mots de passe sont différents.
  5. Validez ce message.
  6. Fermez le navigateur.

Création de la page

• Pour créer la page :
  1. Cliquez sur parmi les boutons d'accès rapide.
  2. La fenêtre de création d'un nouvel élément s'affiche.
  3. Cliquez sur "Page" puis sur "Page". L'assistant de création d'une page s'affiche.
  4. Sélectionnez "Vierge".
     
  5. Validez.
  6. La page est créée et la fenêtre de sauvegarde est automatiquement affichée.
  7. Saisissez le titre de la page : "Login".
  8. Validez.

Création des champs

• Deux champs de saisie :
  • "Login" pour saisir le login.
  • "Mot de passe" pour saisir le mot de passe.
• Deux champs Bouton :
  • "Se connecter" pour vérifier le login et le mot de passe.
  • "S'inscrire" pour ouvrir la page d'inscription (que nous avons déjà créée).

• Pour créer le champ de saisie :
  1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
  2. Cliquez dans la page vierge pour créer le champ.
  3. Cliquez sur le champ (simple clic) : le libellé passe en édition.
  4. Saisissez le libellé ("Login" et "Mot de passe") et validez avec la touche Entrée. Le libellé est immédiatement modifié.
     

     	Note	Le champ "Mot de passe" doit être de type "Mot de passe". Pour modifier le type du champ de saisie, affichez simplement la fenêtre de description du champ.

• Pour créer chaque champ Bouton :
  1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
  2. Cliquez dans la page pour créer le champ Bouton (par exemple en dessous des champs de saisie). Le champ est créé.
  3. Appuyez sur la barre d'espace : le libellé passe en édition.
  4. Saisissez le libellé ("Se connecter" et "S'inscrire") et validez avec la touche Entrée. Le libellé est immédiatement modifié.

• Vous obtenez la page suivante :
  

• Nous allons maintenant voir en détail le fonctionnement des champs Bouton. Tout d'abord, occupons-nous du champ Bouton "S'INSCRIRE".
  1. Sélectionnez le champ Bouton "S'INSCRIRE".
  2. Affichez la fenêtre de description du champ (double-clic sur le champ).
  3. Dans l'onglet "Général", dans la zone "Action du bouton", nous allons indiquer l'action à effectuer. Dans notre cas, nous allons ouvrir la page d'inscription :
     • Dans la zone "Type", sélectionnez "Afficher une page du site".
     • Dans la zone "Page", sélectionnez "PAGE_Formulaire".
       
  4. Validez la fenêtre de description.
     

     	Note	Ici, aucun code n'est nécessaire : nous associons directement sous l'éditeur le champ Bouton et l'action à effectuer, ici, ouvrir une page.

• Pour le champ Bouton "SE CONNECTER", il est nécessaire de saisir le code WLangage permettant de réaliser la recherche :
  1. Sélectionnez le champ Bouton "SE CONNECTER" et affichez les événements associés (touche F2).
  2. Saisissez le code WLangage suivant dans l'événement "Clic xxx (serveur)" :
     
     Inscription.LitRecherchePremier(Login, SAI_Login)
     SI PAS Inscription.Trouve() ALORS
     Erreur("Login inconnu.")
     RETOUR
     FIN
      
     SI SAI_Mot_De_Passe = Inscription.Mot_De_Passe ALORS
     Info("OK, vous êtes connecté.")
     SINON
     Erreur("Mot de passe incorrect.")
     FIN
     
  3. Examinons ce code WLangage :
     • Ce code est exécuté en code serveur car nous réalisons une recherche dans la base de données qui est sur le serveur.
     • La fonction <Fichier de données>.LitRecherchePremier permet de rechercher une valeur dans un fichier de données (ici, le fichier de données "Inscription"). Par défaut, la recherche est faite sur le nom entier. Pour effectuer une recherche de type "Commence par", il suffit d'ajouter un paramètre, la constante hGénérique.
     • La fonction <Fichier de données>.Trouve permet de savoir si la recherche a réussi ou non dans le fichier de données Inscription. Le code "SI PAS Inscription.Trouve" permet de définir l'action si le login n'est pas trouvé (affichage de "Login inconnu"). Le mot-clé RETOUR permet dans ce cas de sortir du traitement en cours. En effet, si le Login n'est pas trouvé, il n'est pas nécessaire d'exécuter le code suivant.
     • Si le login est trouvé, le mot de passe saisi dans le champ SAI_Mot_De_Passe est comparé à celui trouvé dans le fichier de données (pour le login spécifié). Si les deux mots de passe sont égaux, alors l'internaute est connecté, sinon un message d'erreur est affiché.
       

       	Note	Le code présenté ici est purement didactique. Dans un projet réel : Le mot de passe ne doit pas être stocké en clair. Il est conseillé de crypter le mot de passe. Il est conseillé d'afficher le même message d'erreur en cas de login ou de mot de passe incorrect (pour éviter une tentative de piratage des logins).
  4. Sauvez (Ctrl + S) et fermez l'éditeur de code (croix en haut à droite).

Test de la page

• Lancez le test de cette page :
  1. Cliquez sur l'icône parmi les boutons d'accès rapide.
  2. Dans la page qui s'affiche dans un navigateur, saisissez les données suivantes :
     • Login : polo
     • Mot de passe : polo1
  3. Cliquez sur le bouton "SE CONNECTER". Un message d'erreur est affiché.
  4. Validez le message et modifiez le mot de passe : "polo".
  5. Cliquez sur le bouton "SE CONNECTER". Vous êtes connecté.
  6. Fermez le navigateur.

• la création des champs : champs de saisie et champs Bouton,
• les possibilités d'alignement et d'organisation des champs dans la page,
• l'ajout d'enregistrements dans des fichiers de données,
• l'enchaînement des pages,
• la recherche d'enregistrements dans les fichiers de données,
• l'utilisation des événements WLangage serveur et navigateur,
• ...