DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Tuto WEBDEV / Tuto - Mon premier site WEBDEV
  • Leçon 2 - Manipuler une base de données
  • Reprenons notre exemple
  • Quel est le but de cette leçon ?
  • Création du fichier de données
  • Modifications de la page pour enregistrer les données
  • Création du champ Bouton
  • Code WLangage du champ Bouton
  • Test de la page
  • Visualisation des données saisies
  • Ajout de contrôles de saisie
  • Saisie obligatoire
  • Vérification du mot de passe
  • Recherche simple dans une base de données
  • Création de la page
  • Création des champs
  • Test de la page
  • En résumé
  • Pensez mobilité

Tuto - Mon premier site WEBDEV

Leçon 2 - Manipuler une base de données
Ce que vous allez apprendre :
  • Enregistrement de données dans une base de données.
  • Contrôles de saisie.
  • Recherche simple dans une base de données.
Durée de la leçon 30 mn
Reprenons notre exemple
Dans la leçon précédente, nous avons manipulé le projet "Mes_Premieres_Pages". Nous allons reprendre ce projet pour poursuivre notre découverte de WEBDEV.

Quel est le but de cette leçon ?

Nous avons créé un formulaire dans la leçon précédente. Lors de la création d'un formulaire, la première chose que l'on souhaite, c'est bien entendu, sauvegarder les données saisies. Ces données peuvent être enregistrées par exemple dans un fichier texte, un fichier XML ou encore une base de données.
C'est cette dernière option que nous avons choisie.
Dans cette leçon, nous allons :
  • 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.
Création du fichier de données
Pour créer un fichier de données à partir des champs présents dans une page, WEBDEV propose un assistant :
  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.
    Assistant de création d'un fichier de données
    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.
    Assistant de création d'un fichier de données
  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.
    Assistant de création d'un fichier de données
  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 Enregistrer un élément 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 :
Barre des documents
Dans cette barre :
  • "P" représente le projet.
  • "PAGE_Formulaire" représente la page "Formulaire".
Cliquez sur "Page_Formulaire" pour afficher la page correspondante sous l'éditeur.
Modifications de la page pour enregistrer les données
Pour enregistrer les données depuis notre formulaire, l'utilisateur va cliquer sur un champ Bouton. Le code WLangage associé à ce bouton permettra de valider les informations saisies dans la page et d'enregistrer les données dans le fichier de données Inscription.

Création du champ Bouton

  1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur Création d'un champ Bouton.
  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.
Dans notre cas, aucun raccourci clavier n'est associé au champ Bouton. Ce problème peut être corrigé automatiquement :
  • 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

Nous allons maintenant définir les actions à effectuer lors du clic sur le champ Bouton en utilisant du code WLangage.
Affichons les différents événements WLangage associés au champ. Pour cela, deux possibilités :
  1. Affichez le menu contextuel du champ puis sélectionnez l'option "Code".
  2. Sélectionnez le champ et appuyez sur la touche F2.
Les événements associés au champ sont affichés sous l'éditeur de code. 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.
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).
Saisissez le code WLangage suivant :
Clic serveur du bouton BTN_Enregistrer
PAGE_Formulaire.VersFichier()
Inscription.Ajoute()
Info("Enregistrement ajouté.")
Examinons ce code :
  • 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.
Sauvez (Ctrl + S) et fermez l'éditeur de code (croix en haut à droite).

Test de la page

Nous allons tester immédiatement la page et l'enregistrement des données saisies :
  1. Cliquez sur l'icône Tester une page 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

WEBDEV propose un outil simple permettant de voir le contenu des fichiers de données : WDMap. Nous allons l'utiliser pour vérifier si les informations saisies sont bien enregistrées.
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.
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.
    Visualisation des enregistrements avec WDMap
    Nous retrouvons bien les données saisies.
  3. Fermez WDMap (bouton "Fermer").
Ajout de contrôles de saisie
Nous allons maintenant améliorer notre formulaire en ajoutant des contrôles de saisie. Nous allons :
  • 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

Pour rendre obligatoire la saisie dans le champ "Nom" :
  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.
Pour appliquer cette modification au champ "Email", ce n'est pas la peine de refaire ces manipulations : WEBDEV les refait pour vous. Pour cela :
  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é.
A vous de jouer : De la même manière, appliquez cette modification au champ "Login".

Un test rapide nous permet de vérifier que la saisie obligatoire est bien en place :
  1. Cliquez sur l'icône Tester une page 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.
    Affichage d'une boîte d'information
  4. Validez la boîte d'information.
  5. Fermez le navigateur.

Vérification du mot de passe

Pour vérifier le mot de passe, nous allons :
  • 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.
A vous de jouer : 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" 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é.
Rien ne vaut un petit test pour vérifier le bon fonctionnement :
  1. Cliquez sur l'icône Tester une page 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.
Recherche simple dans une base de données
Nous avons vu comment créer un formulaire de saisie et enregistrer des valeurs dans une base de données. Continuons notre première découverte de WEBDEV en réalisant une recherche dans la base de données.
Nous allons créer une page de login dans laquelle nous saisirons le login et le mot de passe. Nous contrôlerons ensuite si ces informations sont correctes.

Création de la page

Pour créer la page :
  1. Cliquez sur Créer un élément 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".
    Assistant de création d'une page
  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

La page de login va contenir les champs suivants :
  • 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).
Nous avons déjà créé ces types de champ, voici un rappel des manipulations à faire :
Pour créer le champ de saisie :
  1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur Créer un champ de saisie.
  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.
Pour créer chaque champ Bouton :
  1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur Créer un champ Bouton.
  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 :
Page sous l'éditeur
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".
      Description du champ Bouton
  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.
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)" :
    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

Lancez le test de cette page :
  1. Cliquez sur l'icône Tester une page 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.
En résumé
Dans cette leçon, nous avons découvert de nouvelles possibilités de WEBDEV :
  • 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é

Un site doit fonctionner aussi bien sur PC que sur Mobile : c'est une réalité actuelle. Le site doit être pensé dès sa conception pour une utilisation mobile.
Pour simplifier l'utilisation de sites à la fois sur PC et sur Mobile, WEBDEV met à votre disposition les agencements. Grâce aux agencements, seule l'interface de votre page est modifiée en Mobile. Le code ne change pas. Pas besoin d'utiliser deux jeux de pages. Votre site reste le même.
Ce premier site étant un site de découverte, nous n'utiliserons pas immédiatement les agencements. Nous aborderons ce sujet dans le tuto "Site Mobile-Friendly".
Leçon précédenteSommaire
Version minimum requise
  • Version 2024
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 26/03/2024

Signaler une erreur ou faire une suggestion | Aide en ligne locale