DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WEBDEV 2024 !
Aide / Tuto WEBDEV / Tuto - Réaliser un site Internet avec Back Office
  • Leçon 2 - Lister les produits
  • Présentation
  • Une première page pour lister les produits
  • Création d'une page basée sur un modèle
  • Création des champs dans la page
  • Création du champ Zone répétée
  • Modification du champ Zone répétée
  • Modification des champs affichés dans la zone répétée
  • Test de la page
  • Ajouter une information dans la zone répétée
  • Création du champ "NOUVEAUTE"
  • Configuration du champ Zone répétée
  • Test de la page
  • Gestion du menu
  • Test de la page
  • En résumé

Tuto - Réaliser un site Internet avec Back Office

Leçon 2 - Lister les produits
Ce que vous allez apprendre :
  • Création d'une page en mode Session basée sur un modèle.
  • Création des champs de la page : Zone répétée, etc.
  • Amélioration de la page.
  • Test de la page.
Durée de la leçon 50 mn
Présentation
Nous allons créer les différentes pages du site WEBDEV en mode Session permettant de lister, modifier et ajouter 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­.

Dans cette leçon, nous allons apprendre à lister les produits présents dans un fichier de données. Dans les prochaines leçons, nous verrons comment créer et modifier un produit.
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".
Avertissement
Cet exemple sera utilisé dans les différentes leçons de ce tuto.
Une première page pour lister les produits
Nous allons tout d'abord créer une page listant les produits disponibles. Ces produits seront affichés sous forme de tableau, présentant pour chaque produit, son image, sa description et son prix. Nous utiliserons pour cela un champ "Zone répétée". Nous réaliserons également un menu pour afficher cette page.

Création d'une page basée sur un modèle

En premier lieu, nous allons créer une page vierge pour afficher les produits. Cette page va être basée sur un modèle de pages.
Un modèle de pages permet de regrouper une partie de l'UI et des traitements dans un seul élément.
Il est conseillé d'utiliser les modèles de pages pour réutiliser et harmoniser l'interface de vos sites.
WEBDEV propose de nombreux modèles de pages pré-définis.

Pour créer une page basée sur un modèle de pages, les manipulations à effectuer sont les suivantes :
  1. Cliquez sur Créer un élément parmi les boutons d'accès rapide (ou utilisez le raccourci Ctrl + N). La fenêtre de création d'un nouvel élément s'affiche.
  2. Cliquez sur "Page" puis sur "Page". L'assistant de création d'une nouvelle page s'affiche.
    Assistant de création de page
  3. Sélectionnez le modèle "PAGEMOD_Menu".
  4. Terminez l'assistant (bouton "OK"). La page est créée et la fenêtre de sauvegarde de la page apparaît.
  5. Saisissez le titre de la page "Liste des produits". Le nom de la page "PAGE_Liste_des_produits" est automatiquement proposé.
    Enregistrement de la page
  6. Validez.
Regardons d'un peu plus près les éléments qui ont été créés. Nous voyons :
  • une page affichée dans la zone principale de l'éditeur de pages.
  • des champs avec des carrés jaunes en haut à gauche.
Page sous l'éditeur
Les champs existant dans la page et le carré jaune affiché en haut à gauche des champs indiquent que la page est basée sur un modèle de pages.
Création des champs dans la page

Création du champ Zone répétée

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

La création du champ Zone répétée se fait grâce à un assistant :
  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. L'assistant demande comment remplir le champ Zone répétée. Plusieurs possibilités :
    • 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 un prochain tuto).
    Dans cet exemple, 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".
    Création d'un champ Zone répétée - Remplissage
    Passez à l'étape suivante.
  3. L'étape suivante de l'assistant propose donc les différents fichiers de données et requêtes présents dans le projet en cours. Dans "Analyse", sélectionnez le fichier de données "Produit".
    Création d'un champ Zone répétée - Fichier de données associé
    Passez à l'étape suivante.
  4. Dans l'étape suivante, 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 les rubriques Description et Nouveauté. Décochez ces deux rubriques.
    • nous allons modifier l'ordre de création des rubriques dans le champ Zone répétée. Ainsi, les champs seront positionnés correctement dans le champ Zone répétée. A l'aide des boutons fléchés, réorganisez l'ordre des rubriques de la manière suivante : Visuel, Référence, Libellé, PrixHT, IDProduit.
      Création d'un champ Zone répétée - Rubriques à afficher
      Passez à l'étape suivante.
  5. 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 avons vu la notion de clé dans l'analyse dans le tuto Créer un projet et son analyse.

    Nous allons trier les produits selon leur libellé.
    Création d'un champ Zone répétée - Clé de parcours
    Sélectionnez "Libellé" et passez à l'étape suivante.
  6. 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 Serveur : toutes les données seront affichées au chargement de la page.
      Sélectionnez le mode de fonctionnement "Serveur".
    • 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".
      Création d'un champ Zone répétée - Mode de fonctionnement
  7. Passez à l'étape suivante. Le champ Zone répétée va afficher les produits sur 4 colonnes.
    • Conservez l'option par défaut : "Nombre de colonnes fixe, Remplissage en ligne".
    • Dans la zone "Nombre de colonnes", remplacez 1 par 4.
      Création d'un champ Zone répétée - Mode de fonctionnement
  8. Terminez l'assistant. Le champ Zone répétée est automatiquement créé dans la page.
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.
Création d'un champ Zone répétée - Mode de fonctionnement
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.

Modification du champ Zone répétée

Nous allons repositionner le champ Zone répétée dans la page :
  1. Sélectionnez le champ Zone répétée.
    Pour sélectionner un champ, rien de plus simple, il suffit de cliquer sur le champ, et les poignées de sélection apparaissent.
    Pour un champ Zone répétée, c'est un peu plus compliqué car le champ contient d'autres champ. Un moyen simple de sélectionner un champ Zone répétée est de cliquer dans la zone de répétition du champ (la zone grise).
  2. Déplacez si nécessaire 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.
Les 4 répétitions du champ Zone répétée ne rentrent pas dans la page. Nous allons donc diminuer la taille des répétitions.
  1. Sélectionnez le champ Zone répétée (si ce n'est déjà fait).
  2. Sélectionnez la poignée centrale.
  3. Maintenez le bouton de la souris enfoncé et diminuez la taille de la répétition. Les différents champs étant "ancrés" par défaut, la diminution de la répétition de la zone répétée entraine la diminution de la largeur des champs (sauf pour le champ Image).
    L'ancrage est une technique permettant de gérer le redimensionnement des champs en fonction de la taille du navigateur. Pour plus de détails, suivez le tuto Ancrages, zoning et agencements.
Des pointillées rouges encadrent le champ Image pour indiquer que le champ ne rentre pas complètement dans la répétition.
Redimensionnez le champ Image pour que celui-ci ne dépasse pas de la répétition. Les pointillés rouge ne sont plus affichés.

Modification des champs affichés dans la zone répétée

Suite au redimensionnement du champ Zone répétée, la zone d'affichage des différents champs est devenue très petite. Pour optimiser la lisibilité, nous allons supprimer le libellé des champs, redimensionner la zone d'affichage et diminuer la hauteur des champs.
Nous allons effectuer ces opérations les unes après les autres sur le champ "Référence" puis nous les appliquerons automatiquement sur tous les champs.
Pour supprimer le libellé du champ :
  1. Sélectionnez le champ Référence.
  2. Affichez la fenêtre de description (Alt + Entrée).
  3. Supprimez le libellé et validez.
  4. Sélectionnez les autres champs 1 à 1 et à chaque fois utilisez la touche F4 : les modifications sont effectuées pour chaque champ.
Nous allons redimensionner le champ pour que la zone vide devant la zone d'affichage n'apparaisse plus :
  1. Sélectionnez à nouveau le champ Référence.
  2. Sélectionnez la poignée intérieure et déplacez-la afin de faire disparaître la zone du libellé du champ.
  3. Sélectionnez les autres champs 1 à 1 et à chaque fois utilisez la touche F4 : les modifications sont effectuées pour chaque champ.
Il nous reste à modifier la hauteur du champ :
  1. Sélectionnez le champ Référence.
  2. Dans la barre de message, modifiez la hauteur du champ en la modifiant de 71 à 23.
  3. Sélectionnez les autres champs 1 à 1 et à chaque fois utilisez la touche F4 : les modifications sont effectuées pour chaque champ.
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 bas 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 réorganiser les champs dans le champ Zone répétée. Pour bien visualiser la zone occupée par chaque champ, affichez les zones des champs (touche F7).
  1. Sélectionnez chaque champ et remontez-le dans la répétition.
  2. Placez les champs de manière à réduire l'espace entre les champs.
  3. Positionnez le libellé contenant l'identifiant à droite du champ "Prix HT".
  4. Sélectionnez la répétition et réduisez sa hauteur à l'aide des poignées de sélection.
  5. Sélectionnez la zone de bas de page et remontez cette zone pour diminuer l'espace entre la fin de la répétition et la zone de bas de page.
Vous obtenez l'interface suivante :

Test de la page

Après toutes ces modifications, nous allons lancer le test de cette page pour vérifier le résultat obtenu sous le navigateur :
  1. Cliquez sur l'icône Tester une page parmi les boutons d'accès rapide.
  2. La page apparaît sous votre navigateur.
  3. Fermez le navigateur.
Dans la page de test, une "marge" apparaît entre les différents produits. Or cette "marge" n'est pas visible sous l'éditeur. Ce phénomène est du aux ancrages, et plus particulièrement aux ancrages définis pour le champ Image. En effet, au début de cette leçon, nous avons vu que le champ Image n'était pas ancré. Il avait fallu définir sa taille pour qu'il ne dépasse pas de la répétition. Maintenant, pour supprimer les "marges" et permettre à l'image de suivre la taille du navigateur, nous allons définir des ancrages spécifiques pour le champ Image :
  1. Sélectionnez le champ Image.
  2. Dans le menu contextuel, sélectionnez l'option "Ancrage".
  3. Dans la fenêtre qui s'affiche, indiquez les nouvelles options d'ancrage du champ :
    • Ancrage en largeur : Agrandir ou réduire comme le navigateur (ou son conteneur)
    • Ancrage en hauteur : Réduire au contenu et tirer.
  4. Validez.
Relancez le test de la page.
Ajouter une information dans la zone répétée
Dans notre site, cette page liste les différents produits disponibles. Lorsque nous avons créé le champ Zone répétée, nous n'avons pas géré la rubrique "Nouveauté". Nous allons maintenant ajouter cette information en créant un champ de type "Zone de texte riche", visible uniquement si le produit affiché correspond à une nouveauté.

Création du champ "NOUVEAUTE"

Nous allons tout d'abord créer un champ Zone de texte riche.
  1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Texte" et sélectionnez "Zone de Texte Riche".
  2. Cliquez dans le champ Zone répétée, sous le champ Prix. Le champ est créé et sélectionné.
  3. Utilisez la touche Espace : le libellé passe en édition.
  4. Saisissez "NOUVEAUTE" et validez.
N'hésitez pas à aligner le champ "Nouveauté" avec les différents champs présents dans la répétition. Vous obtenez :

Configuration du champ Zone répétée

Maintenant, nous voulons que le champ NOUVEAUTE soit affiché uniquement si le produit est une nouveauté. Pour cela, nous allons configurer les paramètres du champ Zone répétée, via la fenêtre de description du champ.
Affichons tout d'abord la fenêtre de description du champ :
  1. Sélectionnez le champ Zone répétée.
    Astuce : Pour être sûr de sélectionner le champ Zone répétée, lors du clic sur le champ, utilisez la touche Maj : une fenêtre s'affiche permettant de sélectionner le champ voulu.
  2. Utilisez le raccourci Alt + Entrée pour afficher la fenêtre de description.
Dans la fenêtre de description du champ, plusieurs zones sont affichées :
  • en haut, les différents attributs sont affichés. Ces attributs permettent d'indiquer quels seront les paramètres modifiés à chaque répétition.
  • en bas, les caractéristiques de chaque attribut sont affichées dans différents onglets.
Nous allons ajouter un attribut pour le champ Nouveauté que nous venons de créer :
  1. Cliquez sur le bouton "Nouveau". Un nouvel attribut est automatiquement créé.
  2. Modifiez les caractéristiques de l'attribut de la manière suivante :
    • Le nom de l'attribut doit être "ATT_Nouveauté".
    • Le champ lié à l'attribut doit être le champ Nouveauté que nous avons créé. Sélectionnez "ZTR_NOUVEAUTE".
    • La propriété prise en compte correspond à la propriété qui sera modifiée à chaque répétition. Dans notre cas, nous allons modifier la visibilité du champ. En effet, si l'article correspond à une nouveauté, le champ "NOUVEAUTE" doit être affiché. Sélectionnez "Visible".
  3. Dans l'onglet "Liaison", nous allons sélectionner la rubrique liée à l'attribut. Dans notre cas, c'est la rubrique Nouveauté du fichier Produit qui doit être utilisée.
    • Déroulez "Analyse", puis "Produit".
    • Sélectionnez la rubrique "Nouveauté".

      La rubrique Nouveauté est une rubrique de type Booléen. Si la rubrique correspond à 1, le produit est une nouveauté.
  4. Validez.

Test de la page

Nous allons lancer le test de cette page pour vérifier le résultat obtenu sous le navigateur :
  1. Cliquez sur l'icône Tester une page parmi les boutons d'accès rapide.
  2. La page apparaît sous votre navigateur.
  3. Fermez le navigateur.
Gestion du menu
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.
Pour afficher le modèle de pages :
  1. Affichez le menu contextuel du menu de la page "PAGE_Liste_des_produits" (clic droit sur l'option "Liste des produits" par exemple) et sélectionnez l'option "Ouvrir le modèle".
    Affichage du modèle de pages
  2. Le modèle de pages s'affiche sous l'éditeur. Sélectionnez le menu du modèle de pages.
  3. Affichez le menu contextuel du menu (clic droit) 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é.
    Menu du modèle en mode Edition
  4. Affichez la fenêtre de description de l'option "Liste des produits" (dans le menu contextuel, sélectionnez "Description de l'option").
  5. 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_Liste_des_produits".
  6. Validez la fenêtre de description de l'option.
  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 modifier d'autres éléments du modèle, comme le logo affiché ou le libellé "Company".
Il ne reste plus qu'à mettre à jour toutes les pages basées sur le modèle modifiée.
Pour mettre à jour les pages utilisant le modèle :
  1. Dans le bandeau du modèle, cliquez sur Propager les modifications du modèle de pages : 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 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.
    Sélection des pages dont le modèle doit être mis à jour
  3. Validez la fenêtre de mise à jour du modèle (bouton "OK").
  4. Fermez le modèle de pages.
Maintenant, nous souhaitons que l'option "Liste des produits" 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_Liste_des_produits", puis l'option "Liste des produits".
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 "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 "Liste des produits" et sélectionnez l'option "Surcharger le champ".
  4. 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é".
  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.

Test de la page

Nous allons tout de suite tester la page que nous venons de créer.
  1. Cliquez sur Tester une page parmi les boutons d'accès rapide.
  2. La page apparaît automatiquement dans le navigateur.
    Page Web permettant de lister les produits
  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.
En résumé
Cette leçon nous a permis de manipuler des champs spécifiques au Web (zone répétée) pour afficher les données provenant d'une base de données. Nous avons également manipulé le modèle de page et nous avons surchargé le fonctionnement du menu.
Dans la prochaine leçon nous allons voir comment modifier un enregistrement et améliorer le look du site.
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é". La page PAGE_Liste_des_produits est disponible dans le dossier "Pages Administration".
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 2024
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 13/12/2023

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