PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Ouverture du projet
  • Création d'une page "formulaire"
  • Création de la page
  • Création des champs
  • Améliorations de la page
  • Modification du style des champs "Login" et "Mot de passe"
  • Test de la page
  • Enregistrement des données dans un fichier de données
  • Création du fichier de données
  • Enregistrement des données
  • 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
  • Conclusion
Leçon 1.3. Mes premières pages
Ce que vous allez apprendre dans cette leçon
  • 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
Leçon précédenteSommaireLeçon suivante
Présentation
Pour commencer à développer avec WEBDEV, nous allons simplement créer quelques pages.

Note

Les pages permettent d'afficher ou de saisir à l'écran des informations. L'internaute peut agir directement sur les pages par l'intermédiaire de champs, de boutons, ...
Ces quelques exemples vous permettront de comprendre le fonctionnement des sites Internet/Intranet et vous permettront de manipuler votre première base de données.

Ouverture du projet

  • Lancez WEBDEV 24 (si ce n'est déjà fait). Si nécessaire, fermez le projet en cours pour faire apparaître la fenêtre de bienvenue.
  • Ouvrez le projet "Mes_Premieres_Pages".
    Pour cela, dans la fenêtre de bienvenue, cliquez sur "Cours d'auto-formation" et sélectionnez le projet "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 de projet sera abordée dans une prochaine leçon.

    Note

    Un projet corrigé est disponible. Ce projet contient les différentes pages créées dans cette leçon. Pour ouvrir le projet corrigé, sous le volet "Accueil", dans le groupe "Aide en ligne", déroulez "Guide d'Auto-formation" puis sélectionnez "Mes premières pages (Corrigé)".
Création d'une page "formulaire"
Nous allons créer un formulaire d'inscription. Ce formulaire va contenir plusieurs champs permettant d'identifier la personne.

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 "Page vierge" puis "Vierge - Mise en page simple" et validez (bouton vert en bas de la fenêtre). 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.
    5. Saisissez le titre de la page : "Formulaire".
    6. 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 titre différent du nom de la page.
    7. Validez (bouton vert).

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" du répertoire du projet (un sous-réper­toire par langue, par exemple "FR" pour la langue française, "UK" pour la lan­gue anglaise, ...).

Création des champs

Nous allons créer les différents champs du formulaire. Ces champs permettront à l'utilisateur de renseigner les données nécessaires à l'inscription.
Le formulaire est constitué des champs suivants :
  • Nom
  • Prénom
  • Adresse
  • Email
  • Login
  • Mot de passe
Tous ces champs sont des champs de saisie, dans lesquels l'utilisateur va saisir des données.
  • 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 com­mence par les lettres "SAI_". Ce préfixe est automatiquement ajouté car le pro­jet 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 max saisie". De nombreuses autres caractéristiques sont modifiables. Pour enregistrer les modifications, cliquez sur le bouton vert 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éTypeTaille
    PrénomTexte30
    AdresseTexte multi-ligne
    EmailTexte255
    LoginTexte10
    Mot de passeMot de passe10
Comme vous l'avez remarqué, ces champs ne sont pas tous du même type. Pour modifier le type du champ de saisie, affichez simplement la fenêtre de description du champ.
La base du formulaire est créée. Nous allons maintenant l'améliorer.
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

Nous allons réaliser quelques modifications dans l'interface de cette page.
Tout d'abord, regardons le champ "Adresse". Ce champ doit afficher plusieurs lignes à l'écran. Nous allons donc l'agrandir.
Ensuite, nous alignerons les champs dans la page.
Enfin, nous modifierons le style des champs "Login" et "Mot de passe".
  • 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 afficher en rouge le libellé des champs "Login" et "Mot de passe", nous allons modifier le style par défaut associé à ces champs.
  • 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 :
      1. Cliquer sur le bouton "Ajouter ce style au projet" dans le volet "Style WEBDEV" affiché à droite de la fenêtre de description.
      2. Donner un nom au style.
      3. Cliquer sur le bouton "Ajouter".
        Pour réutiliser le style créé et l'associer à un autre champ :
      4. Sélectionnez le champ dont le style doit être modifié.
      5. Affichez le menu contextuel du champ (clic droit) et sélectionnez l'option "Choisir le style WEBDEV".
      6. 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'interface suivante :

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.
Enregistrement des données dans un fichier de données
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.
Sous WEBDEV, la description de la base de données se fait sous un éditeur spécifique, l'éditeur d'analyses. Nous verrons cet éditeur en détail dans la prochaine partie.
Dans cet exemple, 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.

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 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 (flèche jaune 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 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".
Nous ne nous attarderons pas plus sur l'éditeur d'analyses. Nous le verrons en détail dans une prochaine leçon.

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 bas 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 bouton. Ce bouton permettra de valider les informations saisies dans la page et d'enregistrer les données dans le fichier 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 bouton (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 associé au bouton :
    1. Affichez le menu contextuel du champ et sélectionnez l'option "Code" (ou appuyez sur la touche F2).
    2. Les traitements associés au bouton sont affichés. On retrouve les codes jaunes pour les traitements effectués sur le serveur et les codes verts pour les traitements 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 dans le code de clic Serveur (jaune).
    4. Saisissez le code suivant :
      PageVersFichier()
      HAjoute(Inscription)
      Info("Enregistrement ajouté.")
    5. Examinons ce code :
      • La fonction PageVersFichier 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 HAjoute 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. 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
    3. Cliquez sur le bouton "Enregistrer". Le navigateur affiche un message pour indiquer que l'enregistrement est ajouté !
    4. Fermez le navigateur.

Visualisation des données saisies

WEBDEV propose un outil simple permettant de voir 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 s'appelle WDMAP. Nous allons l'utiliser pour vérifier si les informations saisies sont bien enregistrées.
  • 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 "Inscription". Le contenu du fichier de données s'affiche.
    3. Nous retrouvons bien les données saisies.
    4. 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

  • 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

Pour vérifier le mot de passe, nous allons tout d'abord créer le champ de saisie permettant à l'utilisateur de saisir à nouveau son mot de passe. Ensuite, nous saisirons le code nécessaire à la vérification.
  • Créez un nouveau champ de saisie. Ce champ a pour libellé "Vérification" et est de type "Mot de passe".
  • Le code de vérification du mot de passe doit être saisi dans les traitements associés au bouton "Enregistrer".
    1. Cliquez sur le 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 le traitement 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 = ""
      RepriseSaisie(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 RepriseSaisie 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 traitement 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. 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 parmi les boutons d'accès rapide.
    2. La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Page" puis sur "Page". L'assistant de création d'une page s'affiche.
    3. Sélectionnez "Page vierge" puis "Vierge - Mise en page simple" et validez.
    4. La page est créée et la fenêtre de sauvegarde est automatiquement affichée.
    5. Saisissez le titre de la page : "Login".
    6. 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 boutons :
    • "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 un 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 un champ Bouton :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
    2. Cliquez dans la page pour créer le 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 boutons. Tout d'abord, occupons-nous du bouton "S'inscrire".
    1. Sélectionnez le bouton "S'inscrire".
    2. Affichez la fenêtre de description du bouton (double-clic sur le champ).
    3. Dans l'onglet "Général", dans la liste "Action", nous allons indiquer l'action à effectuer. Dans notre cas, nous allons ouvrir la page d'inscription : sélectionnez "Afficher la page ‘PAGE_Formulaire'".
    4. Validez la fenêtre de description.

      Note

      Ici, aucun code n'est nécessaire : nous associons directement sous l'éditeur le bouton et l'action à effectuer, ici, ouvrir une page.
  • Pour le bouton "Se connecter", il est nécessaire de saisir le code WLangage permettant de réaliser la recherche :
    1. Sélectionnez le bouton "Se connecter" et affichez les traitements associés (touche F2).
    2. Saisissez le code suivant dans le traitement "Clic (serveur)" :
      HLitRecherchePremier(Inscription,Login,SAI_Login)
      SI PAS HTrouve(Inscription) ALORS
      Erreur("Login inconnu.")
      SINON
      SI SAI_Mot_De_Passe = Inscription.Mot_De_Passe ALORS
      Info("OK, vous êtes connecté.")
      SINON
      Erreur("Mot de passe incorrect.")
      FIN
      FIN
    3. Examinons ce code :
      • 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 HLitRecherchePremier permet de rechercher une valeur dans un fichier de données. 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 hCommencePar.
      • La fonction HTrouve permet de savoir si la recherche a réussi ou non dans le fichier Inscription. Le code "SI PAS HTrouve" permet de définir l'action si le login n'est pas trouvé (affichage de "Login inconnu") ainsi que l'action si le login est trouvé.
      • 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és (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. 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.
Conclusion
En faisant uniquement deux pages, nous avons vu de nombreuses possibilités de WEBDEV :
  • la création des champs : champs de saisie et boutons,
  • 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 codes serveur et navigateur,
  • ...
Après ce survol, nous allons dans la prochaine partie nous pencher plus précisément sur l'analyse et la définition des caractéristiques de la base de données avant d'aborder le développement d'un site complet.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 23
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire