PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Nouveauté WEBDEV 24 !
  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Création d'une page en mode Session listant les produits
  • Création d'une page utilisant un modèle
  • Création des champs
  • Test de la page
  • Modification des produits via une page en mode Session "Fiche produit"
  • Création de la page
  • Que doit faire la page ?
  • Création des champs de saisie
  • Affichage des données dans la page
  • Création des boutons
  • Gestion de l'image du produit
  • Affichage de la fiche depuis la liste des produits
  • Ajout d'un nouveau produit via la page "Fiche produit"
  • Test de l'ajout d'un produit
  • Visualiser les enregistrements saisis
Leçon 3.3. Pages d'ajout et de modification
Ce que vous allez apprendre dans cette leçon
  • Création d'une page en mode Session listant les produits.
  • Création d'une page en mode Session de type fiche produit.
  • Gestion de l'ajout et de la modification d'un produit.

Durée estimée : 50 mn
Leçon précédenteSommaireLeçon suivante
Présentation
Nous allons créer les différentes pages du site WEBDEV en mode Session permettant de lister, ajouter et modifier des produits. Ces manipulations vous feront découvrir :
  • comment utiliser WEBDEV pour créer des pages en mode Session,
  • comment accéder à la base de données.
Ces manipulations vous feront également utiliser certaines fonctionnalités bien utiles de WEBDEV­.
  • Ouvrez l'exercice "Site WEBDEV Complet" :
    1. Affichez la page d'accueil de WEBDEV (Ctrl + <).
    2. Dans la page d'accueil, cliquez sur "Cours d'auto-formation" et sélectionnez "Site WEBDEV Complet (Exercice)".

      Corrigé

      Un projet corrigé est disponible. Ce projet contient les différentes fenêtres créées dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil de WEBDEV (Ctrl + <), cliquez sur "Cours d'auto-formation" et sélectionnez "Site WEBDEV Complet (Avec pages)".
Création d'une page en mode Session listant les produits
Pour créer la page listant les produits, nous allons tout d'abord créer une page vierge, puis ajouter tous les champs : nous verrons ainsi toutes les étapes nécessaires à la création d'une telle page.

Création d'une page utilisant un modèle

  • Pour créer une page vierge :
    1. Cliquez sur parmi les boutons d'accès rapide (ou utilisez le raccourci Ctrl + N).
    2. La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Page" puis sur "Page".
    3. L'assistant de création d'une nouvelle page s'affiche.
    4. Sélectionnez le modèle "Menu".

      Note

      Un modèle prédéfini permet de regrouper une partie de l'interface et des traitements à un seul endroit.
      Il est conseillé d'utiliser les modèles pour réutiliser et harmoniser l'interface de vos sites.
    5. Vérifiez que l'option "Créer : une page et son modèle" est bien cochée.
    6. Validez l'assistant (bouton vert).
    7. La nouvelle page apparaît sous l'éditeur.

      Note

      Lors de la validation de l'assistant de création d'une page, WEBDEV crée automatiquement :
      • la page qui va être affichée sous le navigateur. Cette page est directement affichée sous l'éditeur et peut être modifiée.
      • le modèle de pages associé, correspondant au modèle prédéfini que nous avons choisi. Pour modifier le modèle de pages, il est nécessaire de l'éditer. Nous verrons cette manipulation plus loin dans cette leçon.
    8. La fenêtre de sauvegarde de la page apparaît. Saisissez le titre de la page "Liste des produits". Le nom "PAGE_Liste_des_produits" est automatiquement proposé.
    9. Validez.
  • Cette page contient par défaut différents champs permettant de visualiser les possibilités de présentation. Dans notre cas, nous allons supprimer ces champs :
    1. Sélectionnez les champs présents dans la page (utilisez le raccourci Ctrl + A).

      Note

      Sous l'éditeur, par défaut, seuls les champs de la page sont accessibles. Il n'est pas possible d'éditer les champs et les traitements du modèle. En utilisant le raccourci Ctrl + A, seuls les champs de la page sont sélectionnés. Les champs du modèle de pages ne sont pas modifiés.
    2. Supprimez les champs (touche Suppr).
    3. Seuls les champs correspondant au modèle de pages restent dans la page.
    4. Enregistrez les modifications réalisées dans la page : cliquez sur parmi les boutons d'accès rapide (ou utilisez le raccourci Ctrl + S).

Création des champs

Pour créer la liste des produits, nous allons utiliser un champ Zone répétée. Ce champ va être lié au fichier de données "Produit".

Note

Qu'est-ce qu'un champ Zone répétée ?
Le meilleur moyen pour présenter des éléments sous forme de liste dans une page Web est un champ Zone répétée. Un champ Zone répétée est constitué comme son nom l'indique d'une zone (pouvant contenir plusieurs champs) répétée un certain nombre de fois.
Les données contenues dans chaque zone ainsi répétée peuvent bien entendu être différentes.
  • Pour créer le champ Zone répétée :
    1. Sous le volet "Création", dans le groupe "Données", déroulez "Zone répétée" et sélectionnez "Zone répétée".
    2. Cliquez dans la page en haut à gauche, juste en dessous du menu : l'assistant de création du champ Zone répétée se lance.
    3. L'assistant demande comment remplir le champ Zone répétée :
      • soit par programmation (nous verrons cette fonctionnalité dans une prochaine leçon),
      • soit depuis la base de données, à partir d'un fichier de données ou d'une requête,
      • soit à partir d'une variable WLangage.
      Ici, le champ Zone répétée doit afficher tous les produits : sélectionnez l'option "Afficher des données provenant d'un fichier ou d'une requête".
    4. Passez à l'étape suivante en cliquant sur la flèche en bas de l'écran.
    5. L'écran suivant de l'assistant propose les différents fichiers de données et les requêtes présents dans le projet en cours. Dépliez "Analyse" si nécessaire et sélectionnez le fichier "Produit".
    6. Passez à l'étape suivante.
    7. L'assistant propose la liste des rubriques présentes dans le fichier de données. Par défaut, toutes les rubriques sont cochées pour être affichées dans le champ Zone répétée. Dans notre cas, nous allons afficher toutes les rubriques SAUF la description du produit.
      Décochez "Description" et passez à l'étape suivante.
    8. L'assistant propose ensuite de sélectionner la clé de parcours, c'est-à-dire le tri par défaut des données affichées dans le champ Zone répétée. Les rubriques proposées dans l'assistant correspondent à des rubriques définies comme clés dans l'analyse. Nous allons trier les produits selon leur libellé.
      Sélectionnez "Libellé" et passez à l'étape suivante.
    9. Nous allons maintenant sélectionner des paramètres supplémentaires pour la création du champ Zone répétée :
      • Le champ Zone répétée est en mode Classique : toutes les données seront affichées au chargement de la page.
        Sélectionnez le mode de fonctionnement "Classique".
      • Le champ Zone répétée utilise un nombre de répétitions infini. En effet, tous les produits doivent être accessibles directement dans la page. La page va s'agrandir afin d'afficher tous les produits.
        Sélectionnez "Pas de limite" dans la zone "Nombre maximum de répétitions par page".
    10. Passez à l'étape suivante. Le champ Zone répétée va afficher les produits sur 3 colonnes.
      • Conservez l'option par défaut : "Nombre de colonnes fixe, Remplissage en ligne".
      • Dans la zone "Nombre de colonnes", remplacez 2 par 3.
    11. Validez l'assistant. Le champ Zone répétée est automatiquement créé dans la page.
  • Nous allons repositionner le champ dans la page :
    1. Sélectionnez le champ.
    2. Déplacez le champ à l'aide de la souris pour le positionner en haut à gauche de la page. Lorsque le champ atteint la limite de la zone d'affichage du modèle de pages, vous pouvez voir apparaître des traits verts : ces traits permettent de positionner le champ à l'intérieur de la zone d'affichage.
    3. Réduisez ensuite :
      • la taille des répétitions du champ (la taille des colonnes) pour que le champ entre entièrement dans la page.
      • la taille du libellé pour que le champ entre dans la colonne.
Arrêtons-nous un instant sur le champ que nous venons de créer : les données sont déjà affichées dans le champ, même sous l'éditeur.
C'est le concept du "Live data" : le contenu des fichiers de données présents sur le poste de développement est utilisé dans les pages ou les états manipulés sous l'éditeur. Cette fonctionnalité est très intéressante par exemple pour définir la taille des champs présents dans une page.
  • Nous allons masquer le champ contenant l'identifiant du produit. Pourquoi le masquer et ne pas simplement le supprimer ? Simplement parce que cet identifiant va nous servir dans la suite de notre développement.
    1. Sélectionnez le champ "LIB_IDProduit". Ce champ correspond à l'identifiant (champ avec un numéro en haut de la zone répétée).
    2. Affichez la fenêtre de description du champ (option "Description" du menu contextuel).
    3. Dans l'onglet "IHM", décochez l'option "Visible".
    4. Validez la fenêtre de description du champ.
  • Nous allons maintenant modifier le menu de notre page afin d'afficher l'option permettant de lister les produits. Le menu se trouve dans le modèle de pages. Nous allons donc modifier le modèle de pages.
    1. Affichez le menu contextuel du menu (clic droit sur l'option "Accueil" par exemple) et sélectionnez l'option "Ouvrir le modèle".
    2. Sélectionnez le menu.
    3. Cliquez sur l'option "Accueil". Un cadre jaune apparaît autour du menu. Ce cadre jaune indique que le menu est en mode "Edition" : il peut être modifié.
    4. Affichez la fenêtre de description de l'option (dans le menu contextuel, sélectionnez "Description de l'option").
    5. Dans l'onglet "Général" :
      • Saisissez le libellé de l'option : remplacez "Accueil" par "Liste des produits".
      • Dans la zone "Action de l'option" :
        • Sélectionnez le type "Afficher une page du site".
        • Sélectionnez la page "PAGE_Liste_des_produits".
      • Validez la fenêtre de description de l'option.
    6. Utilisez la touche Echap pour sortir du mode d'édition.

      Note

      Nous venons de modifier le menu affiché dans le modèle. Il est également possible de modifier d'autres éléments du modèle, comme le logo affiché ou le libellé "Company Name".
  • Pour mettre à jour les pages utilisant le modèle :
    1. Dans le bandeau orange du modèle, cliquez sur  : ce bouton permet de propager les modifications du modèle à toutes les pages utilisant le modèle.

      Note

      Si vous ne propagez pas les modifications du modèle dans vos pages, une synchronisation des modèles vous sera proposée lors du test de votre page (et également avant un déploiement).
    2. Dans notre cas, une seule page est proposée.
    3. Validez la fenêtre de mise à jour du modèle.
    4. Fermez le modèle de pages.
Notre page est prête à être testée.

Test de la page

  • Nous allons tout de suite tester la page que nous venons de créer.
    1. Cliquez sur parmi les boutons d'accès rapide.
    2. La page apparaît automatiquement dans le navigateur.
    3. Vous pouvez faire défiler les produits grâce à l'ascenseur de la page.
  • Fermez le navigateur. L'éditeur de WEBDEV réapparaît.
Modification des produits via une page en mode Session "Fiche produit"
Avoir la liste des produits, c'est bien, mais pouvoir modifier un produit, c'est mieux. Maintenant, nous allons créer une page affichant le détail du produit afin de pouvoir le modifier.

Création de la page

  • Pour créer une page affichant le détail d'un produit :
    1. Créez une nouvelle page vierge.
      • Cliquez sur parmi les boutons d'accès rapide.
      • 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 se lance.
      • Dans la zone "Basée sur un modèle du projet", choisissez "PAGEMOD_Menu" et validez l'assistant.
    2. La fenêtre de sauvegarde de la page apparaît. Saisissez le titre de la page "Fiche du produit". Le nom "PAGE_Fiche_du_produit" est automatiquement proposé.
    3. Validez.

Que doit faire la page ?

La page que nous sommes en train de créer est destinée à modifier les caractéristiques du produit actuellement sélectionné dans le champ Zone répétée. Ce type de page est appelé une "Fiche" simplement car elle correspond à une fiche descriptive de l'élément voulu.
Dans notre cas, cette page va afficher le contenu des différentes rubriques présentes dans le fichier de données "Produit".
Nous allons tout d'abord indiquer à la page quel produit doit être affiché. Pour cela, il suffit de déclarer un paramètre dans la page.
  • Pour déclarer un paramètre dans la page :
    1. Utilisez la touche F2. L'éditeur de code affiche les différents traitements de la page.
    2. Dans le traitement "Déclarations globales", saisissez le code suivant :
      PROCÉDURE MaPage(gnIDProduit est un entier sur 8 octets)
    3. Examinons ce code :
      • Le mot-clé PROCEDURE dans le traitement "Déclarations globales" permet d'associer une procédure à l'ouverture de la page.
      • La procédure a pour nom "MaPage". A l'exécution, ce mot-clé sera automatiquement remplacé par le nom de la page en cours.
      • La procédure attend pour paramètre la variable gnIDProduit qui est un entier sur 8 octets. Cette variable correspond à l'identifiant du produit à afficher dans la page. Cette variable est du même type que la rubrique IDProduit correspondante décrite dans le fichier Produit.
    4. Fermez l'éditeur de code.

Création des champs de saisie

Nous allons maintenant créer les différents champs de saisie permettant de visualiser dans la page les différentes informations concernant le produit sélectionné.
  • Pour créer les champs dans la page :
    1. Affichez si nécessaire le volet "Analyse" : dans le ruban, sous le volet "Accueil", dans le groupe "Environnement", déroulez "Volets" et sélectionnez "Analyse". Les différents fichiers de données décrits dans l'analyse "Site_WEBDEV_Complet" apparaissent dans le volet.
    2. Cliquez sur la flèche à gauche du fichier "Produit" : les rubriques du fichier de données sont listées.
    3. Sélectionnez à l'aide de la souris l'ensemble des rubriques affichées dans le volet (sauf la rubrique "IDProduit"). Vous pouvez par exemple utiliser le lasso de la souris ou la multisélection en maintenant la touche Ctrl enfoncée.
    4. Effectuez un "Drag and Drop" (glisser/déplacer) de ces rubriques vers la page que vous venez de créer.
    5. Différents champs sont automatiquement créés dans la page. Ces champs sont liés à la rubrique correspondante dans le fichier de données. Pour le vérifier :
      • Sélectionnez par exemple le champ "Référence".
      • Affichez le menu contextuel (clic droit) et sélectionnez l'option "Description".
      • Affichez l'onglet "Liaison" de la fenêtre de description :
        Cet onglet permet de voir que le champ de saisie en cours est lié à la rubrique "Référence" du fichier de données "Produit".
    6. Fermez la fenêtre de description.
    7. Enregistrez la page (Ctrl + S).
  • Repositionnez les champs dans la page afin d'obtenir l'interface suivante :
  • Agrandissez le champ Image permettant de visualiser l'image associée au produit.
  • Nous allons en profiter pour aligner les champs de saisie de la page et leur donner la même taille :
    1. Sélectionnez le champ "Description" 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). Le premier champ sélectionné va servir de référence pour la taille des autres champs.
    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 externes et internes des champs soient alignés. Cliquez sur l'option "Justifier (Int. et Ext.)".
    4. Enregistrez la page.

Affichage des données dans la page

La page "Fiche" doit afficher le produit sélectionné dans le champ Zone répétée. Dans le code de la page, nous allons maintenant saisir le code permettant de :
  • rechercher le produit à afficher.
  • afficher les données dans la page.
  • Pour afficher les données dans la page :
    1. Utilisez la touche F2. L'éditeur de code affiche les différents traitements de la page.
    2. Dans le traitement "Déclarations globales", à la suite du code que nous avons écrit précédemment, saisissez le code suivant :
      HLitRecherchePremier(Produit,IDProduit,gnIDProduit)
      SI HTrouve(Produit) = Faux ALORS
      // On affiche la liste des produits
      PageAffiche(PAGE_Liste_des_produits)
      FIN
      FichierVersPage()
    3. Examinons ce code :
      • La fonction HLitRecherchePremier permet de rechercher le premier enregistrement du fichier Produit pour lequel la rubrique IDProduit est égale à la valeur gnIDProduit. gnIDProduit correspond au paramètre passé à la page.
      • La fonction HTrouve permet de vérifier si un enregistrement a été effectivement trouvé. Cette fonction est notamment nécessaire dans des sites multi-utilisateurs. Elle permet ainsi d'éviter les erreurs dues aux suppressions effectuées par d'autres utilisateurs. Dans notre cas, si l'enregistrement n'a pas été trouvé (la fonction HTrouve renvoie Faux), la liste des produits est réaffichée.
      • La fonction FichierVersPage permet d'afficher dans les champs les données présentes dans le fichier de données, pour l'enregistrement en cours. Dans notre cas, l'enregistrement en cours correspond à l'enregistrement trouvé avec la fonction HLitRecherchePremier.
    4. Fermez l'éditeur de code.

Création des boutons

La page "PAGE_Fiche_du_produit" va permettre tout d'abord de modifier un produit présent dans la liste des produits.
Nous allons tout de suite ajouter un bouton d'annulation et un bouton de validation :
  • le bouton d'annulation va simplement ré-afficher la page précédente.
  • le bouton de validation va vérifier les données saisies et enregistrer les données modifiées.
Bouton Annuler
  • Pour créer le bouton "Annuler" :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Bouton".
    2. Cliquez en dessous des champs de saisie pour créer le bouton.
    3. Modifiez le libellé du bouton (utilisez la touche Espace pour éditer le libellé) : le nouveau libellé est "Annuler".
  • Saisissez le code associé au bouton "Annuler" :
    1. Sélectionnez le bouton et appuyez sur la touche F2. Les différents traitements associés au bouton apparaissent.
    2. Dans le code de clic serveur du bouton, saisissez le code suivant :
      PageAffiche(PagePrécédente())
    3. Examinons ce code :
      • La fonction PageAffiche permet d'afficher une page spécifique.
      • La fonction PagePrécédente permet de connaître le nom de la page précédente.
      • Ce code permet donc d'afficher la page précédente.
    4. Enregistrez les modifications ( ou Ctrl + S).
    5. Fermez l'éditeur de code.

Note

Par défaut, tout bouton créé dans une page envoie la valeur des champs de la page au serveur (bouton "submit"). C'est le cas le plus courant.
Deux autres options sont disponibles :
  • Réinitialiser les champs de la page.
  • Aucune action. Ce mode est à utiliser lorsque le bouton doit uniquement avoir une action "Navigateur".
Ces options peuvent être choisies dans l'onglet "Général" de la fenêtre de description du champ Bouton, option "Lors de l'action".
Bouton Valider
  • Pour créer le bouton "Valider" :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Bouton".
    2. Cliquez ensuite à gauche du bouton "Annuler" pour créer le bouton.
    3. Modifiez le libellé du bouton : le nouveau libellé est "Valider".
      Le bouton de validation va permettre :
      • de vérifier les données saisies : cette vérification consiste à vérifier que l'utilisateur a bien rempli les différents champs de la page. Cette vérification ne nécessite pas d'accès au serveur et peut être réalisée en code navigateur.
      • d'enregistrer les données saisies dans le fichier de données Produit. Cet enregistrement est effectué en code serveur. Les données sont envoyées au serveur puis enregistrées dans le fichier de données.
  • Saisissez le code associé au bouton "Valider" :
    1. Sélectionnez le bouton "Valider" et appuyez sur la touche F2. Les différents traitements associés au bouton apparaissent.
    2. Dans le code de clic navigateur du bouton, saisissez le code de vérification suivant :
      SI SAI_Référence ~= "" ALORS
      Erreur("Vous devez saisir une référence.")
      RepriseSaisie(SAI_Référence)
      FIN
      SI SAI_Libellé ~= "" ALORS
      Erreur("Vous devez saisir un libellé.")
      RepriseSaisie(SAI_Libellé)
      FIN
      SI SAI_Description ~= "" ALORS
      Erreur("Vous devez saisir une description.")
      RepriseSaisie(SAI_Description)
      FIN
      SI SAI_PrixHT = 0 ALORS
      Erreur("Vous devez saisir un prix.")
      RepriseSaisie(SAI_PrixHT)
      FIN
    3. Examinons ce code :
      • Pour chaque champ de saisie présent dans notre page, nous vérifions si une valeur a été saisie.
      • L'opérateur ‘~=' permet de vérifier l'égalité à la casse et à la ponctuation près.
      • Si aucune valeur n'est saisie, un message d'erreur demande à l'internaute de saisir des données (fonction Erreur). L'exécution du code est arrêtée et la saisie est forcée dans le champ de saisie concerné grâce à la fonction RepriseSaisie.
    4. Dans le code de clic serveur du bouton, saisissez le code d'enregistrement des données :
      PageVersFichier()
      HModifie(Produit)
      PageAffiche(PAGE_Liste_des_produits)
    5. Examinons ce code :
      • La fonction PageVersFichier permet d'initialiser les rubriques avec les valeurs des champs liés, pour l'enregistrement courant. Cette fonction est donc équivalente aux lignes suivantes :
        Produit.Référence = SAI_Référence
        Produit.Libellé = SAI_Libellé
        Produit.Description = SAI_Description
        ...

        Notre page utilise moins de 10 champs et déjà l'avantage se fait sentir ; pensez simplement aux pages qui contiennent plusieurs dizaines de champs : 1 seule ligne de code effectue toutes les affectations !
      • La fonction HModifie permet de mettre à jour les données du fichier de données pour l'enregistrement courant.
      • La fonction PageAffiche permet d'afficher une autre page. Dans notre cas, nous réaffichons la page "PAGE_Liste_des_produits".
    6. Enregistrez les modifications ( ou Ctrl + S).
    7. Fermez la fenêtre de code.

Gestion de l'image du produit

Dans le fichier Produit, une rubrique permet de stocker l'image associée au produit.
Nous avons actuellement le champ Image dans notre page, qui permet de voir l'image, mais nous allons donner la possibilité à l'internaute de changer l'image associée au produit.
Pour cela, nous allons permettre à l'utilisateur d'uploader un fichier image présent sur son poste pour ensuite l'associer à la rubrique présente dans le fichier de données. Nous allons utiliser un champ Upload.

Note

L'upload consiste à copier un fichier du poste client vers le serveur.
Le download consiste au contraire à copier un fichier du serveur vers le poste client.

Note

WEBDEV propose de gérer l'upload des fichiers via deux champs spécifiques :
  • un champ Upload permettant l'upload d'un seul fichier,
  • un champ Upload permettant l'upload de plusieurs fichiers.
Dans cet exemple, l'utilisateur uploadera un seul fichier à la fois, nous utiliserons donc le champ Upload mono-fichier.
  • Pour créer le champ Upload :
    1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Bouton". La liste des différents boutons prédéfinis s'affiche.
    2. Sélectionnez "Envoi de fichiers".
    3. Cliquez dans la page à la position où le champ doit être créé (par exemple en dessous du champ Image).

Note

Le champ Upload est composé :
  • d'une cellule comportant :
    • un champ Libellé,
    • un champ Zone répétée permettant d'afficher les caractéristiques des fichiers à uploader.
  • d'un bouton permettant à l'utilisateur de sélectionner le fichier à uploader,
  • d'un bouton permettant à l'utilisateur d'envoyer les fichiers sur le serveur.
Nous allons maintenant adapter le code du champ pour gérer l'upload du fichier dans notre site.
  • Pour configurer le champ Upload :
    1. Affichez le code du bouton "Ajouter" : sélectionnez le champ et utilisez la touche F2.
    2. Différents traitements sont associés au champ Upload. Nous allons modifier le traitement "Réception des fichiers uploadés" pour copier l'image dans le répertoire des données du site.
    3. Dans le traitement "Réception des fichiers uploadés", saisissez le code suivant :
      UploadCopieFichier(MoiMême, fRepDonnées(), ...
      UploadNomFichier(MoiMême, Faux))
      gsCheminImage = fRepDonnées() + [fSep()] + ...
       UploadNomFichier(MoiMême, Faux)
      IMG_Visuel = gsCheminImage

      Note

      Ce code utilise "...". Ces 3 points permettent d'effectuer un retour à la ligne dans une ligne de code. Ils sont ici utilisés pour des raisons de mise en page.
      Sous l'éditeur de code, vous pouvez les supprimer et utiliser une seule ligne de code.
    4. Examinons ce code :
      • La fonction UploadCopieFichier permet d'enregistrer sur le serveur le fichier uploadé par l'utilisateur. Dans notre cas, le fichier est copié dans le répertoire des données (connu avec la fonction fRepDonnées). Le nom du fichier est conservé.
      • Le chemin de l'image uploadée est ensuite mémorisé dans une variable globale gsCheminImage.

        Note

        Pourquoi utiliser une variable globale ?
        Une variable globale est ici manipulée car le chemin de l'image va ensuite être utilisé dans le code du bouton "Valider", pour enregistrer la nouvelle image dans le fichier de données.
        Pour plus de détails sur les conditions d'utilisation des variables locales et globales, consultez les annexes.
      • La fonction fSep permet de récupérer le séparateur à utiliser sur le système d'exploitation du serveur ("\" pour Windows, "/" pour Linux). Ainsi, votre site est complètement indépendant du serveur sur lequel il est installé !
      • L'image uploadée est ensuite affichée dans le champ Image IMG_Visuel.
    5. Lors de la saisie et de l'enregistrement du code, la variable gsCheminImage apparaît en rouge et une erreur de compilation apparaît dans le volet des erreurs : "Identificateur ‘gsCheminImage' inconnu ou inaccessible". En effet, nous n'avons pas déclaré cette variable globale.
    6. Pour déclarer la variable globale :
      • Affichez le code de déclaration des globales de la page (par exemple, sous l'éditeur de code, sous le volet "Code", dans la combo listant tous les traitements, sélectionnez le traitement "Déclarations globales").
      • Saisissez le code suivant après la déclaration de la procédure :
        gsCheminImage est une chaîne
    7. Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide. Les erreurs de compilation disparaissent.
    8. Fermez l'éditeur de code.
Notre image peut désormais être uploadée sur le serveur. Il ne reste plus qu'à gérer l'enregistrement de l'image dans la base de données.
  • Pour enregistrer l'image dans le fichier Produit :
    1. Affichez le code du bouton "Valider" :
      • Sélectionnez le bouton "Validez".
      • Appuyez sur la touche F2.
    2. Dans le code de clic serveur du bouton, saisissez le code suivant APRES l'appel de la fonction PageVersFichier :
      SI gsCheminImage<>"" ALORS
      Produit.Visuel = fChargeBuffer(gsCheminImage)
      FIN
    3. Examinons ce code :
      • Ce code vérifie le contenu de la variable globale gsCheminImage. Si cette variable ne correspond pas à une chaîne vide, cela signifie que l'image a été téléchargée par l'utilisateur. Dans ce cas, la rubrique "Visuel" du fichier Produit est remplie avec le contenu binaire de l'image. Ce contenu est récupéré grâce à la fonction fChargeBuffer.
      • La fonction HModifie (déjà présente dans le code) permet d'enregistrer les changements dans le fichier de données.
    4. Enregistrez les modifications ( ou Ctrl + S).
    5. Fermez la fenêtre de code.

Affichage de la fiche depuis la liste des produits

Nous allons maintenant voir comment afficher la fiche du produit sélectionné dans la liste des produits. Le principe est simple : l'utilisateur sélectionnera le produit dans le champ Zone répétée et affichera le détail grâce à un lien.
  • Nous allons tout d'abord modifier la page "PAGE_Liste_des_produits" afin de créer un lien de modification :
    1. Placez-vous sur la page "Liste des produits" : cliquez sur le bouton "PAGE_Liste_des_produits" dans la barre des boutons :
    2. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Lien".
    3. Cliquez ensuite dans le champ Zone répétée pour créer le lien (par exemple en bas à droite).
    4. Modifiez le libellé du lien (utilisez la touche Espace pour éditer le libellé) : le nouveau libellé est "Modifier".
  • Le lien "Modifier" doit ouvrir la page "PAGE_Fiche_du_produit". Nous allons ouvrir cette page par programmation.
    1. Sélectionnez le lien "Modifier" et affichez les traitements associés (touche F2).
    2. Dans la fenêtre de code qui apparaît, saisissez le code suivant dans le traitement serveur "Clic de" :
      PageAffiche(PAGE_Fiche_du_produit,ATT_IDProduit[ZR_Produit])

      Note

      Laissez-vous guider par l'assistance à la saisie de code : dès que vous allez taper la parenthèse ouvrante "(", une liste déroulante va s'ouvrir proposant le nom de toutes les pages existantes dans le projet. Il suffit de sélectionner la page au clavier ou à la souris.
      Si vous ne trouvez pas le nom de la page que vous cherchez dans la liste, c'est que celle-ci n'a pas été sauvegardée précédemment.
    3. Examinons ce code :
      • La fonction PageAffiche permet d'ouvrir la page "PAGE_Fiche_du_produit".
      • La page ouverte attend en paramètre l'identifiant du produit à afficher. Cet identifiant correspond à l'identifiant du produit sélectionné dans le champ Zone répétée. Pour obtenir l'identifiant, il faut préciser l'attribut qui contient l'identifiant (ATT_IDProduit) pour la ligne en cours. Les crochets permettent d'indiquer la ligne et ZR_Produit permet d'obtenir la ligne en cours de la zone répétée.

        Note

        Par défaut, ATT_IDProduit retourne la valeur de l'attribut pour la ligne cliquée. Le code peut donc s'écrire plus simplement :
        PageAffiche(PAGE_Fiche_du_produit,ATT_IDProduit)
    4. Enregistrez les modifications ( ou Ctrl + S).
    5. Fermez la fenêtre de code.
Nous avons mis en place les différents éléments permettant de gérer la modification d'un produit, nous allons réaliser un test pour vérifier que tout fonctionne.
  • Testez le projet ( parmi les boutons d'accès rapide).
    1. L'éditeur demande la première page du mode Session. Dans notre cas, sélectionnez la page "PAGE_Liste_des_produits" et validez.

      Note

      La première page du mode Session correspond à la première page ouverte au lancement du site en mode Session.
      La première page en mode Session du projet peut être définie :
      • lors d'un test du projet.
      • sous l'explorateur de projet : il suffit de sélectionner la page voulue, d'afficher le menu contextuel et de sélectionner l'option "Première page en mode Session du projet".
      Lorsqu'une première page en mode Session du projet est définie, un petit 1 rouge apparaît devant le nom de la page sous l'explorateur de projet.
    2. Le site se lance.
    3. Dans la liste des produits :
      • Cliquez sur le lien "Modifier".
      • La page de détail du produit s'affiche.
      • Modifiez le prix d'un produit et validez.
      • Le nouveau prix du produit s'affiche dans la liste des produits.
  • Fermez les pages pour arrêter le test.
Ajout d'un nouveau produit via la page "Fiche produit"
Nous venons de voir comment modifier un produit. Maintenant, nous voulons bien entendu pouvoir également ajouter un produit. Pour cela, nous n'allons pas recréer une nouvelle page : nous allons simplement réutiliser la page "PAGE_Fiche_du_produit" que nous avons créée précédemment et l'adapter à la gestion de l'ajout.
  • Nous allons tout d'abord modifier le mode d'ouverture de la page "PAGE_Fiche_du_produit" :
    1. Placez-vous sur la page "Fiche du produit" : cliquez sur le bouton "PAGE_Fiche_du_produit" dans la barre des boutons.
    2. Cliquez sur la touche F2 pour afficher le code de la page.
    3. Dans le code "Déclarations globales", nous allons tout d'abord donner une valeur par défaut au paramètre passé à la page. En effet, dans le cas d'une modification de l'enregistrement, le paramètre passé correspond toujours à l'identifiant du produit à modifier. Mais dans le cas de l'ajout d'un enregistrement, l'identifiant de l'élément n'existe pas. Pour gérer ce cas, nous allons utiliser la valeur par défaut "-1".
    4. Dans le traitement "Déclarations globales", remplacez le code suivant :
      PROCÉDURE MaPage(gnIDProduit est un entier sur 8 octets)

      par le code :
      PROCÉDURE MaPage(gnIDProduit est un entier sur 8 octets = -1)
    5. Il reste maintenant à gérer la valeur "-1" (cas de l'ajout d'un enregistrement). Remplacez le code :
      HLitRecherchePremier(Produit,IDProduit,gnIDProduit)
      SI HTrouve(Produit) = Faux ALORS
      // On affiche la liste des produits
      PageAffiche(PAGE_Liste_des_produits)
      FIN
      FichierVersPage()

      par le code :
      SI gnIDProduit = -1 ALORS
      HRAZ(Produit)
      SINON
      HLitRecherchePremier(Produit,IDProduit,gnIDProduit)
      SI HTrouve(Produit) = Faux ALORS
      // On affiche la liste des produits
      PageAffiche(PAGE_Liste_des_produits)
      FIN
      FIN
      FichierVersPage()

      Examinons ce code :
      • Si l'identifiant du produit vaut -1, nous sommes dans le cas de l'ajout d'un produit. Dans ce cas, la fonction HRAZ est exécutée. La fonction HRAZ initialise les variables des rubriques du fichier "Produit" avec les valeurs par défaut pour gérer un nouvel enregistrement.
      • Si l'identifiant du produit a une valeur différente de -1, nous retrouvons le code permettant d'ouvrir la fiche en modification.
    6. Fermez la fenêtre de code.
  • La gestion de l'ajout de l'enregistrement doit également être réalisée au niveau du bouton de validation.
    1. Dans la page "PAGE_Fiche_du_produit", sélectionnez le bouton "Valider".
    2. Affichez les traitements associés au bouton (touche F2).
    3. Le code présent dans le traitement de clic navigateur ne doit pas changer : les vérifications à effectuer sont toujours les mêmes. Seul le code serveur doit être modifié.
    4. Dans le traitement serveur "Clic de", remplacez le code par le code suivant :
      PageVersFichier()
      SI gsCheminImage <> "" ALORS
      Produit.Visuel = fChargeBuffer(gsCheminImage)
      FIN
      SI Produit..NouvelEnregistrement ALORS
      HAjoute(Produit)
      SINON
      HModifie(Produit)
      FIN
      PageAffiche(PAGE_Liste_des_produits)

      Examinons ce code :
      • La propriété ..NouvelEnregistrement permet de savoir si l'enregistrement en cours doit être créé.
      • Si la fonction HRAZ a été appelée précédemment, la propriété renvoie Vrai (cas du nouveau produit) et l'enregistrement doit être créé par la fonction HAjoute.
      • Dans le cas contraire, l'enregistrement en cours existe déjà et doit être modifié par la fonction HModifie.
      • La fonction HAjoute ajoute l'enregistrement dans le fichier de données. Cette fonction prend les valeurs en mémoire et écrit le contenu des rubriques du fichier dans le fichier de données lui-même. Les index sont immédiatement et automatiquement mis à jour. Ici, le fichier de données mis à jour est bien entendu le fichier "Produit".

        Note

        Le code de test du nouvel enregistrement peut être remplacé par la fonction HEnregistre. Cette fonction permet de tester si l'enregistrement est déjà présent dans le fichier de données, et selon le cas elle permet soit de l'ajouter, soit de le modifier. Le code devient alors :
        PageVersFichier()
        SI gsCheminImage<> "" ALORS
        Produit.Visuel = fChargeBuffer(gsCheminImage)
        FIN
        HEnregistre(Produit)
        PageAffiche(PAGE_Liste_des_produits)
    5. Enregistrez les modifications ( ou Ctrl + S).
    6. Fermez la fenêtre de code.
  • Nous allons maintenant modifier le menu de la page pour permettre à l'utilisateur d'ajouter un nouveau produit.
    1. Placez-vous sur la page "Liste des produits" : cliquez sur le bouton "PAGE_Liste_des_produits" dans la barre des boutons.
    2. Affichez le menu contextuel d'une option du menu (clic droit) et sélectionnez l'option "Ouvrir le modèle".
    3. Dans le modèle de pages, sélectionnez le menu.
    4. Cliquez sur l'option "Articles". Un cadre jaune apparaît autour du menu. Ce cadre jaune indique que le menu est en mode "Edition" : il peut être modifié.
    5. Affichez la fenêtre de description de l'option (option "Description de l'option" dans le menu contextuel).
    6. Dans l'onglet "Général" :
      • Saisissez le libellé de l'option : remplacez "Articles" par "Ajouter un produit".
      • Dans la zone Action :
        • sélectionnez le type "Afficher une page du site".
        • sélectionnez la page "PAGE_Fiche_du_produit".
    7. Validez. L'option de menu apparaît :
    8. Dans le bandeau orange du modèle, cliquez sur pour propager les modifications du modèle à toutes les pages utilisant le modèle.
    9. Dans notre cas, les deux pages du projet sont proposées. Validez la fenêtre de mise à jour du modèle.
    10. Fermez le modèle de pages.
Nous pouvons maintenant tester l'ajout d'un produit.

Test de l'ajout d'un produit

  • Pour tester l'ajout d'un produit :
    1. Lancez le test du projet ( parmi les boutons d'accès rapide).
    2. Cliquez sur "Ajouter un produit".
    3. Saisissez un nouveau produit avec les caractéristiques suivantes :
      • Référence : REF-337
      • Libellé : Surf 23
      • Description : Surf aux couleurs de WEBDEV
      • Prix : 150
    4. Validez. Le nouveau produit apparaît dans la liste des produits.
    5. Cliquez à nouveau sur l'option de menu "Ajouter un produit".
    6. Saisissez un nouveau produit avec les caractéristiques suivantes :
      • Référence : REF-337
      • Libellé : Surf 23
      • Description : Surf aux couleurs de WEBDEV
      • Prix : 150
    7. Validez. Une page spécifique apparaît :
      Cette page signale à l'utilisateur qu'il existe un doublon : en effet, la référence (qui est une clé unique) est identique pour deux produits. Cette page permet de modifier la valeur de la référence (affichée dans une zone rouge) : saisissez par exemple "REF-338".
      Cette page est une des pages de gestion automatique des erreurs HFSQL, disponible en standard.

      Note

      Lors de l'ajout ou de la modification d'un enregistrement, plusieurs types d'erreurs peuvent survenir : erreur de doublons, erreur d'intégrité, erreur de mot de passe, ...
      WEBDEV propose plusieurs modes de gestion de ces erreurs :
      • le mode automatique : pour chaque erreur rencontrée lors de la gestion des enregistrements de la base de données, une page spécifique est affichée à l'utilisateur. Cette page permet à l'utilisateur de modifier directement ses données.
      • le mode programmé avancé : pour chaque erreur rencontrée lors de la gestion des enregistrements de la base de données, une procédure ou une page personnalisée de gestion des erreurs est appelée.
      L'exemple didactique "WW_Gestion_Auto_Erreurs" livré avec WEBDEV permet de tester ces différents modes de gestion des erreurs. Cet exemple peut être ouvert via la page d'accueil de WEBDEV (option "Ouvrir un exemple").

Visualiser les enregistrements saisis

Les nouveaux enregistrements que nous avons saisis peuvent être visualisés immédiatement dans le champ Zone répétée de la page "PAGE_Liste_des_Produits".
Il est également possible de les visualiser avec l'outil WDMAP que nous avons vu dans la leçon Mes premières pages.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 24
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire