Leçon 3.3.

Pages d'ajout et de modification Page 1 of 24

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édente Sommaire Leç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" puis cliquez sur "Site WEBDEV Complet (Exercice)".

Un projet corrigé est disponible. Ce projet contient les différentes fenêtres créées dans
Corrigé

cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil de WEBDEV (Ctrl + <),
cliquez sur "Cours d'auto-formation" puis cliquez sur "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".

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 2 of 24

Un modèle prédéfini permet de regrouper une partie de l'interface et des traitements à un

seul endroit.
Note

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 "OK").
7. La nouvelle page apparaît sous l'éditeur.

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

• 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 de la page
"PAGE_Liste_des_produits" est automatiquement proposé.

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 3 of 24

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

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 événements du modèle. En utilisant le raccourci Ctrl + A, seuls les
Note

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

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
Note

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 depuis la base de données, à partir d'un fichier de données ou d'une requête,
• soit à partir d'une variable WLangage,
• soit par programmation (nous verrons cette fonctionnalité dans une prochaine leçon).
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".

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 4 of 24

4. Passez à l'étape suivante (bouton "Suivant" de l'assistant).

5. L'étape suivante 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 de données "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" :

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

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 5 of 24

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

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 6 of 24

3. Si nécessaire, 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 des champs de la répétition pour que les champs entrent dans la répétition (colonne).

Arrêtons-nous un instant sur le champ Zone répétée 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 "UI", 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".

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 7 of 24

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. Si nécessaire agrandissez le champ pour que le libellé de l'option apparaisse sur une seule ligne (utilisez les
poignées du champ).
7. Utilisez la touche Echap pour sortir du mode d'édition.

Nous venons de modifier le menu affiché dans le modèle. Il est également possible de
Note

modifier d'autres éléments du modèle, comme le logo affiché ou le libellé "Company".

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

Si vous ne propagez pas les modifications du modèle dans vos pages, une synchronisation
Note

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.

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 8 of 24

3. Validez la fenêtre de mise à jour du modèle (bouton "OK").

4. Fermez le modèle de pages.

▶ Dans le modèle de pages "Menu" que nous utilisons, l'option de menu sélectionnée est "ARTICLES" : cette option de
menu apparait en bleu. Or la page que nous venons de créer affiche la liste des produits. Nous voulons donc que pour
cette page l'option sélectionnée soit "LISTE DES PRODUITS".
Pour cela, nous allons surcharger l'option de menu présente dans le modèle de page afin de changer l'option de menu
sélectionnée. Pour effectuer cette modification, nous allons surcharger le menu, puis l'option de menu voulue.

▶ Effectuez les manipulations suivantes :

1. Affichez le menu contextuel du menu (clic droit sur l'option "LISTE DES PRODUITS" par exemple) et sélectionnez
l'option "Modifier ce menu". Le menu passe en mode édition : un contour jaune apparaît autour du menu.
2. Affichez le menu contextuel de l'option "LISTE DES PRODUITS" et sélectionnez l'option "Surcharger le champ".
3. Affichez à nouveau le menu contextuel de l'option "LISTE DES PRODUITS" et sélectionnez l'option "Mettre cette
option de menu dans l'état sélectionné".
4. Appuyez sur la touche Escape pour sortir de l'édition.
5. Enregistrez la page (Ctrl + S).

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.

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 9 of 24

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 de la page
"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".

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 10 of 24

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 événements de la page.
2. Dans l'événement "Déclarations globales", saisissez le code WLangage suivant :

PROCÉDURE MaPage(gnIDProduit est un entier sur 8 octets)

3. Examinons ce code WLangage :

• Le mot-clé PROCEDURE dans l'événement "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 de données 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 de données "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.

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 11 of 24

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 (bouton "OK" ou "Annuler").

7. Enregistrez la page (Ctrl + S).

▶ Repositionnez les champs dans la page afin d'obtenir l'interface suivante :

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 12 of 24

▶ 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 "Libellé" 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 les événements WLangage associés à
la page, nous allons maintenant saisir le code permettant de :
• rechercher le produit à afficher.
• afficher les données dans la page.

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 13 of 24

▶ Pour rechercher et afficher les données dans la page :

1. Cliquez dans la page sous l'éditeur.
2. Utilisez la touche F2. L'éditeur de code affiche les différents événements de la page.
3. Dans l'événement "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()

4. Examinons ce code WLangage :

• La fonction HLitRecherchePremier permet de rechercher le premier enregistrement du fichier de données

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.

5. Fermez l'éditeur de code.

Création des champs Bouton

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 deux champs Bouton : un bouton d'annulation et un bouton de validation.
• Le champ Bouton "Annuler" va simplement ré-afficher la page précédente.
• Le champ Bouton "Valider" va vérifier les données saisies et enregistrer les données modifiées.

Bouton Annuler
▶ Pour créer le champ 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 champ Bouton.
3. Modifiez le libellé du champ (utilisez la touche Espace pour éditer le libellé) : le nouveau libellé est "Annuler".

▶ Saisissez le code WLangage associé au champ Bouton "Annuler" :

1. Sélectionnez le champ et appuyez sur la touche F2. Les différents événements associés au champ apparaissent.
2. Dans l'événement "Clic (Serveur)" du champ Bouton, saisissez le code WLangage 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.
• Cette ligne de code permet donc d'afficher la page précédente.

4. Enregistrez les modifications ( ou Ctrl + S).

5. Fermez l'éditeur de code.

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 14 of 24

Par défaut, tout champ 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 :

Note • 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 champ Bouton "Valider" :
1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Bouton".
2. Cliquez ensuite à gauche du champ Bouton "Annuler" pour créer le nouveau champ.
3. Modifiez le libellé du champ : le nouveau libellé est "Valider".

Le champ Bouton "Valider" 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 champ Bouton "Valider" :

1. Sélectionnez le champ Bouton "Valider" et appuyez sur la touche F2. Les différents événements associés au champ
Bouton apparaissent.
2. Dans l'événement "Clic (navigateur)" du champ Bouton, saisissez le code suivant, permettant de vérifier les données
saisies :

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

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 15 of 24

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 WLangage :

• 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 l'événement "Clic (serveur)" du champ Bouton, saisissez le code WLangage permettant d'enregistrer les
données :

PageVersFichier()
HModifie(Produit)
PageAffiche(PAGE_Liste_des_produits)

5. Examinons ce code WLangage :

• 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
[Link]é = SAI_Libellé
[Link] = 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 de données 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.

L'upload consiste à copier un fichier du poste client vers le serveur.

Note

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,

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 16 of 24

• 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 (Upload)".
3. Cliquez dans la page à la position où le champ doit être créé (par exemple en dessous du champ Image).

Le champ Upload est composé :

• d'une cellule comportant :

• un champ Libellé,
Note

• 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 champ Bouton "Ajouter" : sélectionnez le champ et utilisez la touche F2.
2. Différents événements WLangage sont associés au champ Upload. Nous allons modifier l'événement "Réception des
fichiers uploadés" pour copier l'image dans le répertoire des données du site.
3. Dans l'événement "Réception des fichiers uploadés", saisissez le code suivant (sans vous occuper des éventuelles
erreurs de compilation que nous corrigerons plus tard) :

UploadCopieFichier(MoiMême, fRepDonnées(), UploadNomFichier(MoiMême, Faux))

gsCheminImage = fRepDonnées() + [fSep()] + UploadNomFichier(MoiMême, Faux)
IMG_Visuel = gsCheminImage

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

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 17 of 24

• Le chemin de l'image uploadée est ensuite mémorisé dans une variable globale gsCheminImage.

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

Note
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 l'événement "Déclaration globales" de la page (par exemple, sous l'éditeur de code, sous le volet
"Code", dans la combo listant tous les événements, sélectionnez l'événement "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 de données Produit :

1. Affichez le code du champ Bouton "Valider" :

• Sélectionnez le champ Bouton "Valider".

• Appuyez sur la touche F2.

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 18 of 24

2. Dans l'événement "Clic (serveur) du champ Bouton, saisissez le code suivant APRES l'appel de la fonction
PageVersFichier :

SI gsCheminImage<>"" ALORS
[Link] = fChargeBuffer(gsCheminImage)
FIN

3. Examinons ce code WLangage :

• 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 de données 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 champ Lien.

▶ Nous allons tout d'abord modifier la page "PAGE_Liste_des_produits" afin de créer un champ Lien de modification :
1. Placez-vous sur la page "Liste des produits" : cliquez sur le bouton "PAGE_Liste_des_produits" dans la barre des
documents ouverts :

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 champ Lien (par exemple en bas à droite).

4. Modifiez le libellé du champ Lien (utilisez la touche Espace pour éditer le libellé) : le nouveau libellé est "Modifier".

▶ Le champ Lien "Modifier" doit ouvrir la page "PAGE_Fiche_du_produit". Nous allons ouvrir cette page par
programmation.
1. Sélectionnez le champ Lien "Modifier" et affichez les événements WLangage associés (touche F2).
2. Dans la fenêtre de code qui apparaît, saisissez le code suivant dans l'événement "Clic (Serveur)" :

PageAffiche(PAGE_Fiche_du_produit,ATT_IDProduit[ZR_Produit])

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 19 of 24

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.

Note
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 WLangage :

• 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 du champ Zone répétée.

Par défaut, ATT_IDProduit retourne la valeur de l'attribut pour la ligne cliquée. Le code
peut donc s'écrire plus simplement :
Note

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.

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.

Note

• sous le volet "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 dans le volet "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.

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 20 of 24

• 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
documents ouverts.
2. Appuyez sur la touche F2 pour afficher les différents événements WLangage de la page.
3. Dans l'événement "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 l'événement "Déclarations globales", remplacez la ligne de code suivante :

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()

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 21 of 24

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. Cette fonction initialise les variables des rubriques du fichier de données "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.

▶ Il est également nécessaire de prendre en compte l'ajout de l'enregistrement au niveau du champ Bouton "Valider".
1. Dans la page "PAGE_Fiche_du_produit", sélectionnez le champ Bouton "Valider".
2. Affichez les événements WLangage associés au champ (touche F2).
3. Le code présent dans l'événement "Clic (navigateur)" ne doit pas changer : les vérifications à effectuer sont toujours
les mêmes. Seul le code serveur doit être modifié.
4. Dans l'événement "Clic (Serveur)", remplacez le code existant par le code suivant :

PageVersFichier()
SI gsCheminImage <> "" ALORS
[Link] = 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
de données "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 WLangage devient alors :

PageVersFichier()
SI gsCheminImage <> "" ALORS

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 22 of 24

[Link] = 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
documents ouverts.
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 de pages.
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 25
• Description : Surf aux couleurs de WEBDEV

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 23 of 24

• 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 25
• 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 :

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 3.3. Pages d'ajout et de modification Page 24 of 24

• 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édente Sommaire Leçon suivante

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024