Tuto - Mon premier site WEBDEV

Quel est le but de cette leçon ?

• définir rapidement la base de données liée aux champs que nous avons créés, grâce à une fonctionnalité très simple : la rétro-analyse.
• modifier la page pour enregistrer les données dans la base de données.
• ajouter des contrôles de saisie.
• effectuer une recherche simple dans la base 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.
   
   

   Sous WEBDEV, la description de la base de données se fait sous un éditeur spécifique, 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. Nous verrons cet éditeur en détail dans le tuto Créer un projet et son analyse.
3. L'assistant de génération d'un fichier de données se lance.
   
   Le nom du fichier de données est automatiquement renseigné avec le nom de la page.
4. 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).
   
   

   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).
   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.
   
9. Passez à l'étape suivante.
10. Validez le récapitulatif. La description du fichier de données apparaît sous l'éditeur d'analyses.
11. Enregistrez l'analyse : cliquez sur parmi les boutons d'accès rapide (ou utilisez le raccourci Ctrl + S).
12. Fermez l'éditeur d'analyses.
13. 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.
14. Cliquez sur "Oui".

Revenons au formulaire d'inscription pour mettre en place l'ajout des données saisies par l'internaute dans le fichier de données. Pour cela, il suffit d'utiliser la barre des documents, située en haut de l'éditeur :

Dans cette barre :

• "P" représente le projet.
• "PAGE_Formulaire" représente la page "Formulaire".

Création du 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.

Enregistrez la page (Ctrl + S). Un pictogramme s'affiche à droite du champ.

Ce pictogramme permet d'indiquer qu'une erreur ou un conseil concernant l'UI a été détecté. Le survol du pictogramme permet d'obtenir plus de détails.

• Cliquez sur le picto .
• Dans la fenêtre qui s'affiche, cliquez sur "Corriger".
  
• Le raccourci Entrée est automatiquement associé au champ Bouton. L'icône indiquant un problème disparaît.

Code WLangage du champ Bouton

1. Affichez le menu contextuel du champ puis sélectionnez l'option "Code".
2. Sélectionnez le champ et appuyez sur la touche F2.

PAGE_Formulaire.VersFichier()
Inscription.Ajoute()
Info("Enregistrement ajouté.")

• La fonction <Page>.VersFichier permet de récupérer le contenu des champs de saisie de la page PAGE_Formulaire pour le transférer vers le fichier de données Inscription.
• La fonction <Fichier de données>.Ajoute permet d'écrire dans le fichier de données Inscription les données transférées.
• La fonction Info permet d'afficher un message.

Test de la 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

WDMap permet de visualiser le contenu des fichiers de données pendant le développement du site (lorsque par exemple, les pages de visualisation n'ont pas encore été créées). Cet outil n'est pas redistribuable et peut être utilisé uniquement sur le poste de développement.

Pour visualiser les données sur le poste client, il est possible d'utiliser le Centre de Contrôle HSQL. Cet outil est présenté dans le tuto Administrer une base HFSQL Client/Serveur.

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.
   
   Nous retrouvons bien les données saisies.
3. 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

1. Revenez si nécessaire sur la page "PAGE_Formulaire" en cliquant sur son nom dans la barre des documents ouverts.
2. Double-cliquez sur le champ "Nom" : la fenêtre de description du champ apparaît.
3. Affichez le volet "Détail".
4. Cochez l'option "Saisie obligatoire". Si cette option est cochée, WEBDEV va automatiquement vérifier si ce champ de saisie a été renseigné.
5. Validez la fenêtre de description.

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

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éer le champ de saisie permettant à l'utilisateur de saisir à nouveau son mot de passe.
• Saisir le code WLangage nécessaire à la vérification.

1. Cliquez sur le champ Bouton "ENREGISTRER" pour le sélectionner et appuyez sur la touche F2.
   
   

   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.
2. Saisissez le code suivant dans l'événement navigateur "Clic" :
   
   Clic sur BTN_Enregistrer (onclick navigateur)

   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

3. 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é.

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

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

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

   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.

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é.
5. Enregistrez la page.

Comme pour la page précédente, un pictogramme s'affiche en haut à droite du champ Bouton "SE CONNECTER". Là encore, il s'agit d'un problème de raccourci clavier manquant.

• Cliquez sur le picto .
• Dans la fenêtre qui s'affiche, cliquez sur "Corriger".

Vous obtenez la page suivante :

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.
   
   

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

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)" :
   
   Clic sur BTN_Se_connecter (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é.
     
     

     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

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.

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

Projet corrigé
Vous voulez vérifier le résultat de vos manipulations ? Un projet corrigé est disponible. Ce projet contient les différentes pages créées dans les leçons de cette partie. Ce projet correspond donc au résultat final attendu.
Pour ouvrir le projet corrigé, dans la page d'accueil de WEBDEV, cliquez sur "Tutoriel" puis dans la zone "Tuto - Premier site", double-cliquez sur "Mes premières pages - Corrigé".

Pensez mobilité