DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Tuto WEBDEV / Tuto - Réaliser un site Internet avec Back Office
  • Leçon 4 - Ajouter un produit
  • Présentation
  • Ajout d'un nouveau produit via la page "Fiche produit"
  • Gestion de l'ajout lors de l'initialisation de la page
  • Gestion de l'ajout lors de la validation de la page
  • Gestion de l'ajout dans le menu de la page
  • Gestion de l'image du produit
  • Test de l'ajout d'un produit
  • En résumé

Tuto - Réaliser un site Internet avec Back Office

Leçon 4 - Ajouter un produit
Ce que vous allez apprendre :
  • Gestion de la création d'un produit.
  • Gestion de l'upload.
  • Amélioration de l'UI des pages.
Durée de la leçon 50 mn
Présentation
Dans la leçon précédente, 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 en profiterons pour améliorer l'interface de la page, et utiliser de nouveaux concepts Internet comme l'upload.
Avertissement
Cette leçon manipule le projet exemple créé dans la leçon précédente. Les manipulations de la leçon 2 doivent avoir été effectuées.
Ouverture du projet exemple :
Dans WEBDEV, ouvrez le projet "Site_WEBDEV_Complet" :
  1. Affichez la page d'accueil de WEBDEV (Ctrl + <).
  2. Cliquez sur "Tutoriel" puis dans la zone "Tuto - Créer un site WEBDEV (Back Office et Front Office)", double-cliquez sur "Site WEBDEV Complet - Exercice".
Ajout d'un nouveau produit via la page "Fiche produit"

Gestion de l'ajout lors de l'initialisation de la page

Reprenons notre exemple.
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 :
    Déclarations globales de PAGE_Fiche_du_produit (serveur)
    PROCÉDURE MaPage(NumProduitAAfficher est un entier sur 8 octets)

    par le code :
    Déclarations globales de PAGE_Fiche_du_produit (serveur)
    PROCÉDURE MaPage(NumProduitAAfficher 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 :
    Déclarations globales de PAGE_Fiche_du_produit (serveur)
    Produit.LitRecherchePremier(IDProduit, NumProduitAAfficher)
    SI Produit.Trouve() = Faux ALORS
    	// On affiche la liste des produits
    	PAGE_Liste_des_produits.Affiche()
    FIN
    Produit.VersPage()

    par le code :
    Déclarations globales de PAGE_Fiche_du_produit (serveur)
    SI NumProduitAAfficher = -1 ALORS
    	Produit.RAZ()
    SINON
    	Produit.LitRecherchePremier(IDProduit, NumProduitAAfficher)
    	SI Produit.Trouve() = Faux ALORS
    		// On affiche la liste des produits
    		PAGE_Liste_des_produits.Affiche()
    	FIN
    FIN
    Produit.VersPage()

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

Gestion de l'ajout lors de la validation de la page

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 xxx (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 xxx (Serveur)", remplacez le code existant par le code suivant :
    Clic (serveur)
    Produit.DepuisPage()
    Produit.Enregistre()
    PAGE_Liste_des_produits.Affiche()

    Examinons ce code : la fonction <Fichier de données>.Enregistre permet de tester si l'enregistrement est déjà présent dans le fichier de données "Produit", et selon le cas elle permet soit de l'ajouter, soit de le modifier.
  5. Enregistrez les modifications (Enregistrer l'élément ou Ctrl + S).
  6. Fermez la fenêtre de code.

Gestion de l'ajout dans le menu de la page

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. Affichez le menu contextuel du menu et sélectionnez l'option "Modifier ce menu". Un cadre jaune apparaît autour du menu. Ce cadre jaune indique que le menu est en mode "Edition" : il peut être modifié.
  5. Sélectionnez l'option "Fiche produit" et 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", dans la zone "Action de l'option" :
    • sélectionnez le type "Afficher une page du site".
    • sélectionnez la page "PAGE_Fiche_du_produit".
  7. Validez.
  8. Dans le bandeau du modèle, cliquez sur Propager les modifications du modèle de pages 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.
Maintenant, nous souhaitons que l'option "Fiche produit" soit sélectionnée lorsque la page correspondante est affichée. Pour cela, nous allons surcharger le menu du modèle affiché dans la page "PAGE_Fiche_du_produit", puis l'option "Fiche produit".
Effectuez les manipulations suivantes :
  1. Affichez le menu contextuel du menu (clic droit sur l'option "Fiche produit" par exemple) et sélectionnez l'option "Surcharger le champ".
  2. Affichez à nouveau le menu contextuel du menu et sélectionnez l'option "Modifier ce menu". Le menu passe en mode édition : un contour jaune apparaît autour du menu.
  3. Affichez le menu contextuel de l'option "Fiche produit" et sélectionnez l'option "Surcharger le champ".
  4. Affichez à nouveau le menu contextuel de l'option "Fiche produit" et sélectionnez l'option "Mettre cette option de menu dans l'état sélectionné".
  5. Appuyez sur la touche Escape pour sortir de l'édition.
  6. Enregistrez la page (Ctrl + S).
Notre page est prête à être testée.

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.
Le download consiste au contraire à copier un fichier du serveur vers le poste client.
WEBDEV propose de gérer l'upload des fichiers via le Champ Métier "Upload de fichiers".
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 types de boutons disponibles 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).
    Création du champ Upload
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 Ajouter permettant à l'utilisateur de sélectionner les fichiers à uploader,
  • d'un bouton Envoyer 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) :
    Réception des fichiers uploadés de UPL_Upload
    UploadCopieFichier(MoiMême, fRepDonnées(), UploadNomFichier(MoiMême, Faux))
    CheminImage = fRepDonnées() + [fSep()] + UploadNomFichier(MoiMême, Faux)
    IMG_Visuel = CheminImage
  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 CheminImage.
      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 le Tuto sur le WLangage.
    • 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 CheminImage apparaît en rouge et une erreur de compilation apparaît sur les lignes de code : "L'élément 'CheminImage' est inconnu ou inaccessible". En effet, nous n'avons pas déclaré cette variable globale. Ces erreurs apparaissent également dans le volet des erreurs de compilation.
  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").
      Evénements d'un élément
    • Saisissez le code suivant après la déclaration de la procédure :
      Déclarations globales de PAGE_Fiche_du_produit (serveur)
      CheminImage est une chaîne
  7. Enregistrez les modifications en cliquant sur Enregistrer un élément 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.
  2. Dans l'événement "Clic xxx (serveur)" du champ Bouton, saisissez le code suivant APRES l'appel de la fonction <Fichier de données>.DepuisPage :
    Clic sur BTN_Valider (serveur)
    SI CheminImage<>"" ALORS
    	Produit.Visuel = fChargeBuffer(CheminImage) 
    FIN
  3. Examinons ce code WLangage :
    • Ce code vérifie le contenu de la variable globale CheminImage. 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 <Fichier de données>.Modifie (déjà présente dans le code) permet d'enregistrer les changements dans le fichier de données.
  4. Enregistrez les modifications (Enregistrer un élément ou Ctrl + S).
  5. Fermez la fenêtre de code.

Test de l'ajout d'un produit

Toutes les modifications nécessaires à l'ajout d'un produit on été effectuées. Maintenant, il ne reste plus qu'à tester.
Pour tester l'ajout d'un produit :
  1. Lancez le test du projet (Tester le projet parmi les boutons d'accès rapide). La page listant les produits s'affiche.
  2. Cliquez sur "Fiche produit".
  3. Saisissez un nouveau produit avec les caractéristiques suivantes :
    • Référence : M49629
    • Libellé : Cabas xxx
    • Description : Cabas en cuir
    • Prix : 150
  4. Validez. Le nouveau produit apparaît dans la liste des produits.
Pour ajouter une image au produit :
  1. Dans la liste des produits, cliquez sur le lien "Modifier" de votre nouveau produit. La fiche du produit s'affiche.
  2. Cliquez sur le bouton "Ajouter" (sous la zone "Déposer des fichiers ici") et sélectionnez un fichier image sur votre poste.
  3. Cliquez sur le bouton "Envoyer".
  4. Validez les modifications de la fiche avec le bouton "Valider".
  5. La photo ajoutée apparaît désormais pour le produit que nous venons de modifier.
En résumé
Cette leçon nous a permis de modifier un libellé en fonction d'une variable mais également d'utiliser plusieurs fonctionnalités de WEBDEV pour améliorer le look d'une page en utilisant les cellules et les styles.
Projet corrigé
Vous voulez vérifier le résultat de vos manipulations ? Un projet corrigé est disponible. Ce projet contient les différentes pages créées dans les leçons de cette partie. Ce projet correspond donc au résultat final attendu. Pour ouvrir le projet corrigé, dans la page d'accueil de WEBDEV, cliquez sur "Tutoriel" puis dans la zone "Tuto - Créer un site WEBDEV (Back Office et Front Office)", double-cliquez sur "Site WEBDEV Complet - Corrigé".
Leçon précédenteSommaire
Version minimum requise
  • Version 2024
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 02/07/2024

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