Tuto - Réaliser un site Internet avec Back Office

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.

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

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

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

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 ( ou Ctrl + S).
6. Fermez la fenêtre de code.

Gestion de l'ajout dans le menu de la page

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

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

Gestion de l'image du produit

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

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

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.

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").
     
   • 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 parmi les boutons d'accès rapide. Les erreurs de compilation disparaissent.
8. Fermez l'éditeur de code.

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 ( ou Ctrl + S).
5. Fermez la fenêtre de code.

Test de l'ajout d'un produit

1. Lancez le test du 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.

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.