Tuto - Réaliser un site Internet avec Back Office

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

Avertissement
Cet exemple sera utilisé dans les différentes leçons de ce tuto.

Création de la page

1. Cliquez sur parmi les boutons d'accès rapide.
2. Dans la fenêtre de création d'un nouvel élément, cliquez sur "Page" puis sur "Page".
3. Dans l'assistant de création d'une page, dans la zone "Basée sur un modèle du projet", choisissez "PAGEMOD_Menu".
4. Terminez l'assistant.
5. Dans la fenêtre de sauvegarde, saisissez le titre de la page "Fiche du produit". Le nom de la page "PAGE_Fiche_du_produit" est automatiquement proposé.
6. Validez.

Que doit faire 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", remplacez le code existant par le code WLangage suivant :
   
   Déclarations globales de PAGE_Fiche_du_produit (serveur)

   PROCÉDURE MaPage(NumProduitAAfficher 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 NumProduitAAfficher 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

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 "Volets" puis "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 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 (bouton "OK" ou "Annuler").
7. Enregistrez la page (Ctrl + S).

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

• Positionnez l'image à droite des champs de saisie.
• Sélectionnez et remontez le champ "Nouveautés" sous les différents champs de saisie

Affichage des données dans la page

• rechercher le produit à afficher.
• 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 :
   
   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()

4. Examinons ce code WLangage :
   • La fonction <Fichier de données>.LitRecherchePremier permet de rechercher le premier enregistrement du fichier de données Produit pour lequel la rubrique IDProduit est égale à la valeur NumProduitAAfficher. NumProduitAAfficher correspond au paramètre passé à la page.
   • La fonction <Fichier de données>.Trouve 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 <Fichier de données>.Trouve renvoie Faux), la liste des produits est réaffichée.
   • La fonction <Source>.VersPage permet d'afficher dans les champs de la page, 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 <Fichier de données>.LitRecherchePremier.
5. Fermez l'éditeur de code.

Validation de la page

1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Bouton".
2. Cliquez ensuite au centre de la page, sous le champ "Nouveauté" 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 : ce contrôle consiste à s'assurer 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.

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 xxx (navigateur)" du champ Bouton, saisissez le code suivant, permettant de vérifier les données saisies :
   
   Clic sur BTN_Valider (onclick navigateur)
   SI SAI_Référence ~= "" ALORS
   Erreur("Vous devez saisir une référence.") 
   DonneFocusEtRetourUtilisateur(SAI_Référence)
   FIN
   SI SAI_Libellé ~= "" ALORS
   Erreur("Vous devez saisir un libellé.")
   DonneFocusEtRetourUtilisateur(SAI_Libellé)
   FIN
   SI SAI_Description ~= "" ALORS
   Erreur("Vous devez saisir une description.")
   DonneFocusEtRetourUtilisateur(SAI_Description)
   FIN
   SI SAI_PrixHT = 0 ALORS
   Erreur("Vous devez saisir un prix.")
   DonneFocusEtRetourUtilisateur(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 DonneFocusEtRetourUtilisateur.
4. Dans l'événement "Clic xxx (serveur)" du champ Bouton, saisissez le code WLangage permettant d'enregistrer les données :
   
   Clic du bouton BTN_Valider (serveur)
   Produit.DepuisPage()
   Produit.Modifie()
   PAGE_Liste_des_produits.Affiche()
   
5. Examinons ce code WLangage :
   • La fonction <Fichier de données>.DepuisPage 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 <Fichier de données>.Modifie permet de mettre à jour les données du fichier de données pour l'enregistrement courant.
   • La fonction <Page>.Affiche 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.

Un pictogramme s'affiche en haut à droite du champ Bouton "Valider". Ce pictogramme permet d'indiquer qu'une erreur ou un conseil concernant l'UI a été détecté. Le survol du pictogramme permet d'obtenir plus de détails. Dans notre cas, WEBDEV propose d'associer le bouton au raccourci clavier Entrée. Nous allons accepter cette proposition :

• Cliquez sur le picto .
• Dans la fenêtre qui s'affiche, cliquez sur "Corriger".

Affichage de la fiche depuis la liste des produits

1. Placez-vous sur la page "Liste des produits" : cliquez sur le bouton "PAGE_Liste_des_produits" dans la barre des documents ouverts :
   
2. Réduisez la taille du champ Référence en largeur : Nous allons créer le champ Lien à côté.
3. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Lien".
4. Cliquez ensuite dans le champ Zone répétée pour créer le champ Lien à côté du champ Référence.
   
5. Modifiez le libellé du champ Lien (utilisez la touche Espace pour éditer le libellé) : le nouveau libellé est "Modifier".

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 xxx (Serveur)" :
   
   Clic du lien LIEN_Modifier (serveur)
   PAGE_Fiche_du_produit.Affiche(ATT_IDProduit[ZR_Produit])
   
3. Examinons ce code WLangage :
   • La fonction <Page>.Affiche 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 :
     

     PAGE_Fiche_du_produit.Affiche(ATT_IDProduit)
     
4. Enregistrez les modifications ( ou Ctrl + S).
5. Fermez la fenêtre de code.

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.
   • 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 du projet en mode Session".

   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.
     
   • Modifiez le prix d'un produit et validez.
   • Le nouveau prix du produit s'affiche dans la liste des produits.