DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Concepts WEBDEV / Partie 9 - Annexes
  • Exemples complets
  • Exemples didactiques
  • Composants
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
2. Exemples et composants livrés avec WEBDEV
Page précédenteSommaire
Les exemples et composants livrés avec WEBDEV présentent de manière didactique les différentes fonctionnalités de WEBDEV.
Leur code source est commenté et détaillé.
Différents types d'exemples sont livrés avec WEBDEV :
  • exemples complets : ces exemples correspondent à des sites complets, qui peuvent être utilisés sans adaptation.
  • exemples didactiques : ces exemples illustrent une fonctionnalité spécifique.
  • exemples unitaires : ces exemples sont constitués d'une page qui peut facilement être testée dans le projet en cours. Cette page permet illustre l'utilisation d'une fonction, d'une famille de fonctions, d'un champ, ...
  • composants : ces exemples sont constitués d'un composant interne, d'un composant externe et d'un exemple d'utilisation.
Ces exemples et composants peuvent être ouverts directement depuis la fenêtre d'accueil de WEBDEV.
  • Si l'exemple n'est pas installé sur le poste, l'exemple est automatiquement téléchargé (depuis un serveur PC SOFT) et ouvert.
  • Si l'exemple est installé sur le poste, une copie est automatiquement réalisée dans le répertoire "Mes Projets\Mes exemples".
L'exemple ouvert correspond à la copie de l'exemple original. Il est ainsi possible de travailler ou de faire des modifications sur cette copie. L'exemple original est ainsi conservé. A chaque nouvelle ouverture de l'exemple (via le bouton "Ouvrir un exemple"), il est possible de travailler sur l'exemple modifié ou de reprendre l'exemple original.
Des exemples supplémentaires sont livrés avec la Lettre du Support Technique (LST) ou sont disponibles sur notre site (www.pcsoft.fr).
Exemples complets
eCommerceLe projet eCommerce est un site complet de commerce en ligne personnalisable via une interface d'administration Web.
- La partie vitrine / paiement du site est réalisée en AWP afin de permettre un référencement optimal des produits.
- La partie administration du site est réalisée en session classique WB pour garantir une sécurité optimale.
Galerie_PhotosCet exemple est un site de galerie photos et se compose de 2 parties principales :
- la partie "visiteur", réalisée en mode AWP et référençable.
- la partie administration réalisée en mode WEBDEV classique et sécurisée.  
 
Parmi les fonctionnalités proposées, vous y trouverez :
- une organisation par albums de vos photos
- un lien vers les réseaux sociaux
- la possibilité pour les visiteurs de commenter vos publications
- la connexion des utilisateurs est gérée via le GPU de WEBDEV
- un formulaire de contact
- au niveau de l’administration du site, vous pourrez bien évidemment uploader vos photos, les classer par album et aussi les décrire
HonoluluHonolulu : L'information circule mieux dans votre entreprise
Honolulu est totalement gratuit. Vous pouvez l'utiliser dans votre entreprise, sur autant de postes que vous le désirez, sans aucune limitation.
Il est livré avec un ensemble de modules permettant d'améliorer la circulation de l'information dans votre entreprise : messagerie, forum, blogs, …
WAnnoncesCet exemple est un site de gestion de petites annonces.
Recherches multicritères, ajout, modification et suppression d'annonces, ainsi qu'une gestion d'utilisateurs.
webmillionDans cet exemple, nous abordons les principaux thèmes suivants :
1/ Utilisation des requêtes
2/ Utilisation des zones répétées "fichier" en parcours automatique
3/ Utilisation des zones répétées "fichier" en parcours manuel

Résumé de l'exemple livré avec WEBDEV :  
Cette application Web réalisée avec WEBDEV permet de visualiser, de rechercher et de commander des TShirt.
Une fois la commande établie, il est possible d'utiliser le module PayBox de paiement sécurisé.

Cet exemple contient une page permettant de générer un fichier de données contenant un grand nombre d'enregistrements.
WW_Association_AWPCet exemple présente un site associatif, et se compose de 2 parties principales :
- la partie "visiteur", réalisée en mode AWP donc référençable.
- la partie "espace membre" réalisée en mode WEBDEV classique donc sécurisée.  
 
Ce site permet de présenter les actualités, les galeries photos, la présentation de l'association...
Les membres de l'association peuvent gérer leurs actualités, leurs photos, des échanges de messages ainsi qu'accéder aux petites annonces...
L'administrateur gère l'ensemble du site ainsi que les membres de l'association.



WW_Association_PHPCet exemple présente un site associatif en WEBDEV PHP.
Ce site se compose de 2 parties principales :
- la partie visiteur, accessible par tous.
- et la partie administration, réservée aux membres de l'association.  
 
Ce site permet de présenter les actualités, les galeries photos, la présentation de l'association...
Les membres de l'association peuvent gérer leurs actualités, leurs photos, des échanges de messages ainsi qu'accéder aux petites annonces...
L'administrateur gère l'ensemble du site ainsi que les membres de l'association.
WW_Blog_AWPCet exemple est un site de gestion de blog.
Un blog est un journal ou un recueil d'actualités sur un site Internet.
Il est consultable par tous, et chacun peut y apporter des commentaires.
L'auteur du blog écrit ses messages lorsqu'il le souhaite.
Il est possible de mettre en forme le texte, d'inclure des images, des citations, etc...
Cet exemple est basé sur une génération AWP, ce qui permet entre autres de pouvoir référencer le site dans tous les moteurs de recherche.
De plus, le blog peut être exporté en RSS. (Utilisation des types RSS du WLangage)
WW_Blogs_phpCet exemple est un site Php de gestion de blogs réalisé avec WEBDEV.
Un blog est un journal ou un recueil d'actualités sur un site Internet.
Il est consultable par tous, et chacun peut y apporter des commentaires.
L'auteur du blog écrit ses messages lorsqu'il le souhaite.
Il est possible de mettre en forme le texte, d'inclure des images, des citations, etc...
De plus, chaque blog peut être exporté en RSS.
WW_CMSCet exemple est un exemple de CMS (Content Management System).
C'est un site de gestion de contenu, typiquement un site d'affichage d'articles.

Cet exemple est découpé en 2 parties :
- Une partie AWP pour la partie qui doit être référencée
- Une partie WEBDEV Classique pour la partie administration

Note :
Pour que certaines fonctionnalités de l'exemple fonctionnent (l'envoi d'emails par exemple) il est nécessaire de modifier les paramètres afin de les adapter à votre configuration.
Ces paramètres sont stockés sous forme de constantes définies dans le code du projet.
WW_EmpruntGrâce à la puissance de WEBDEV et à la simplicité du WLangage, ce site a été développé en 1 journée seulement !

Cet exemple permet de simuler des emprunts et notamment :
- de calculer le montant des mensualités à partir du montant emprunté donné
- de calculer le montant empruntable à partir d'une mensualité donnée
- de calculer le rapport d'un placement à partir d'un apport mensuel

Le tableau d'amortissement est affiché pour chacun des cas.
Ce tableau peut être édité dans un fichier au format PDF (fonctionnalité standard de WEBDEV).
WW_FAQCet exemple Responsive Web Design propose les principales fonctionnalités d'un site de FAQ (foire aux questions).

Il fournit les services suivants :
- Gestion des produits
- Rédaction des FAQ
- Edition des FAQ
- Affichage adapté aux mobiles
WW_Forum_AWPCet exemple propose les fonctionnalités principales d'un forum utilisateur (création de forums, de sujets (ou topics) et de messages, modération par un administrateur, recherche, etc...)

WW_FORUM_AWP utilise entre autres les fonctionnalités suivantes :
- Recherche fulltext
- Champs riches
- Zones répétées
- Pages POPUP
- AJAX
- ...
WW_Forum_PHPCet exemple propose les fonctionnalités principales d'un forum utilisateur (création de forums, de sujets (ou topics) et de messages, modération par un administrateur, recherche, etc...)

WW_FORUM_PHP utilise entre autres les fonctionnalités suivantes :
- Champ riche
- AJAX
- ...
WW_MotorEquipmentCet exemple est un exemple de boutique en ligne.
Il contient la partie "front-office" (présentation de produits), la partie panier, paiement sécurisé.
WW_NewsletterWW_Newsletter permet de créer un site de gestion de newsletters. Il permet de créer, rédiger et gérer l'envoi en masse de newsletters à des abonnés. Les fonctionnalités du site sont les suivantes :
- inscription (double opt-in) et désinscription en ligne des abonnés
- consultation des newsletters publiques
- gestion des catégories de newsletters
- tableau de bord d'administration
- rédaction et mise en forme des newsletters en ligne
- création de modèles de newsletters
- etc.
WW_PlanningCet exemple permet d'afficher de façon dynamique les tâches des différents collaborateurs.
Il est possible d'ajouter, de modifier ou de supprimer des tâches dans le planning, simplement en cliquant sur les éléments du planning.
Toutes les manipulations sont effectuées grâce à AJAX.
Cet exemple utilise également le déplacement de champ par programmation.
 
WW_PlanningActivites_ClubCet exemple présente un site pour une structure proposant des activités selon un planning précis ; par exemple pour un club de sport.

Le site présente la structure, les activités qu'elle propose, et affiche le planning.

Les principales pages sont :
- une page d'accueil présentant les activités,
- une page de présentation des activités,
- un planning des activités,
- une page "contact",
- un formulaire de pré-inscription.
WW_Precilia_SportLe projet WW_Precilia_Sport est un exemple de site Web avec une partie boutique.

Le site prend la largeur complète du navigateur avec une image de fond.
WW_Precilia_WinterWW_Precilia_Winter est un site de vente en ligne de matériel de ski
WW_PreciliaTShirtsWW_PreciliaTShirts est un site de vente en ligne de TShirts.
Ce site propose une page d'accueil (avec l'ensemble des produits), une page de description de produit (avec ajout au panier) ainsi que plusieurs pages annexes (faq, formulaire de contact, cgv, etc.).
WW_Presentation_Application_MobileCet exemple est un site web responsive qui présente une application Mobile.
Il se compose d'une page statique totalement responsive.
WW_RewaliCet exemple est un site de réservation de voyages.

Il propose des offres de voyages à des prix très attractifs.
Il est ensuite possible de choisir la durée du voyage, les dates de départ .. puis de valider l'achat jusqu'au paiment via Paypal.

Il utilise notamment le champ "bandeau défilant" et les plans.



WW_Statique_ArtisanatCet exemple est un site statique de présentation d'un atelier de production ou d'une entreprise dans le domaine de l'artisanat.

Le site est composé  :
- d'une page d'accueil pour présenter de manière générale l'atelier et ses produits
- de pages de présentation des créations
- d'une page de présentation de l'atelier
- d'une page pour suivre les événements
- d'une page de présentation des stages
- d'une page de contact
WW_Statique_RestaurantCet exemple est un site statique de présentation de restaurant, un site "vitrine".
Les fonctionnalités sont les suivantes :
- page de présentation du restaurant
- pages de présentation des menus, et de la carte
- pages de présentation du chef du restaurant
- page d'accès et contact
WW_Statique_SocieteCet exemple est un site statique de présentation de société, un site "vitrine".
Les fonctionnalités sont les suivantes :
- page de présentation de la société
- pages de présentation des produits et des services
- page "Contact"
- page "Mentions Légales"


WW_TamesShopL'exemple WW_TamesShop fournit une boutique en ligne complète et immédiatement opérationnelle. Le site prend en charge les catégories de produits, les caractéristiques détaillées, les photos et propose plusieurs composants internes modulaires pour gérer l'espace client, le panier, le paiement...
WW_TicketTrackerWW_TicketTracker est un exemple complet de gestion de tickets d'incidents. Cet exemple peut être utilisé dans tous les domaines où il est nécessaire de suivre des interventions entre plusieurs personnes.
L'inscription au site est libre par défaut. Chaque inscrit peut créer des projet et y inviter des participants.
Chaque participant peut créer des tickets d'incidents et les affecter à l'un des participants du projet.
WW_WebDocWebDoc est une Gestion Electronique de Documents (GED).
WebDoc utilise la recherche fulltext pour effectuer des recherches dans le contenu des documents.
Les documents sont classés par catégorie. Un tree-view dynamique affiche l'arborescence des catégories.
Cet exemple montre également comment récupérer le contenu d'un document PDF.
WW_WebImmoSite de présentation de bien immobilier. Ce site est développé en Responsive Web Design, sa mise en page s'adapte automatiquement à toutes les tailles de navigateurs.
Exemples didactiques
WebAppCet exemple présente une utilisation didactique des plans en WEBDEV.
WW_Acces_Chorus_ProCet exemple montre comment accéder à l'API Chorus Pro.
WW_Administration_ResponsiveWebDesignPage simple, responsive.
WW_AgencementsCet exemple est un site pouvant être visualisé sur un terminal mobile.
Le site utilise les agencements de WEBDEV afin d'adapter l'UI du site aux terminaux mobiles.
WW_AgendaL'exemple WW_Agenda est un exemple d'utilisation du champ Agenda pour WEBDEV.
WW_AssistantAvec WEBDEV, il est possible de réaliser ses propres assistants Web, et ceci notamment grâce à la fonction WLangage 'PageAfficheDialogue' qui permet d'afficher une page de manière modale.

Ceci permet donc de créer un dialogue avec l'utilisateur.
Et pour passer d'un plan à un autre de l'assistant, il suffit d'utiliser le concept de plan présent également dans WEBDEV.
WW_Blog_ResponsiveWebDesignBlog simple, responsive.
WW_Business_ResponsiveWebDesignPage simple, responsive.
WW_Dessin_HTML5WEBDEV met à disposition des fonctions de dessin en code navigateur, pour les navigateurs supportant HTML5.
Cet exemple didactique présente :
- un tableau de dessin,
- et une mise en situation : le choix visuel par l'internaute des catégories de place lors d'une réservation de spectacle.


WW_Double_AuthentificationCet exemple montre comment utiliser la double authenfication afin de sécuriser l'accès à des comptes utilisateurs.
Il utilise une double authentification TOTP qui génère un code à 6 chiffres toutes les 30 secondes.
Le code est généré par n'importe quel Authenticator qui gère le protocole TOTP (Google, Microsoft, ...)
WW_EtatCet exemple montre les différentes méthodes pour réaliser un état :

- impressions basées sur différentes sources de données (requêtes, variables, ...)
- impressions basées sur des champs (Table, ...)
- impression d'états composés
- impressions spécifiques (portrait / paysage, état avec filigrane, état avec code-barres, ...)
WW_FlexboxCet exemple présente le champ Flexbox qui détermine le positionnement des champs placés dedans.
WW_Flux_RSSCet exemple montre comment lire et afficher un flux RSS dans une page WEBDEV grâce au type RSS et aux fonctions de manipulation du RSS du WLangage.
Un modèle de champ facilement réutilisable est utilisé pour afficher les données RSS.
WW_Gestion_Auto_ErreursCet exemple montre l'utilisation de la gestion automatique des erreurs de WEBDEV.
Il explique comment gérer des erreurs fatales, des erreurs non fatales et quels sont les différents moyens disponibles dans WEBDEV.
WW_GrapheCet exemple didactique présente diverses utilisations du champ graphe.
WW_KanbanCet exemple montre un usage didactique du champ Kanban avec la mémorisation et le chargement d'un kanban sauvegardé
WW_Mobile_ResponsiveWebDesignPage simple, responsive.
WW_PayPal_PHPCet exemple PHP réalisé avec WEBDEV présente comment proposer dans vos sites WEBDEV PHP un paiement sécurisé avec la solution PayPal.
Il montre comment :
- inclure un bouton de paiement PayPal dans une page,
- indiquer les informations de paiement à Paypal,
- définir une page de validation de paiement,
...
WW_Presentation_ResponsiveWebDesignPage simple, responsive, portfolio de réalisations.
WW_SignatureWW_Signature est un exemple montrant comment dessiner en HTML5 et sauvegarder l'image dessinée en code navigateur.  
WW_SiteClientSAASL'exemple "WW_SiteClientSAAS" est un exemple d'utilisation des fonctions d'administration SaaS de WEBDEV.

Cet exemple se présente sous forme d'un site de vente de solutions SaaS.
Pour utiliser cet exemple, un site SaaS doit être configuré tel que défini dans le code d'initialisation du projet.
L'internaute peut ainsi s'abonner à une ou plusieurs tarifications données d'un site SaaS sans faire appel à l'administrateur du serveur SaaS.
WW_Statut_ListeCet exemple est une implémentation très simple de la webhook mise à disposition par le robot de surveillance.
Il suffit d'indiquer l'URL de la page webhook de l'exemple comme webhook à appeler dans les paramètres du robot de surveillance puis de définir les catégories et les contrôles.
La page affichera toutes les 2 minutes l'état des contrôles.
WW_TableauDeBordL'exemple "WW_TableauDeBord" est un exemple didactique sur l'utilisation du champ Tableau de bord.
Cet exemple présente comment :
- manipuler le champ en mode "édition",
- sauver/charger une configuration,
- configurer le champ (configuration initiale, ajout / suppression de widgets, ...),
- rafraîchir un widget.

WW_Websocket_PageCet exemple montre comment utiliser un serveur de websocket pour gérer une communication entre plusieurs clients grâce à une simple page statique WebDev
Nécessite le lancement préalable de WW_WebsocketServeur
WW_WebsocketServeurCet exemple est un serveur de websocket pour l'exemple WW_WebSocket_Page
WW_ZoneRepetee_PageInterneCet exemple présente l'utilisation des pages internes dans un champ Zone répétée, par exemple pour inclure une zone répétée dans une zone répétée, mais également un champ Table ou un champ Graphe.
WW_Zoom_AutoCet exemple propose un modèle de champ basé sur une image, permettant d'afficher une miniature d'une image et grâce à un clic sur celle-ci, d'agrandir l'image sans perturber la mise en page.
Limitations :
- Les images ne peuvent pas être chargées depuis une base de données
- Le modèle de champ ne peut pas être inclus dans une zone répétée  
WWDialogueNavigateurCet exemple montre un dialogue entre deux navigateurs distincts. Il permet d'ouvrir une nouvelle page dans un nouveau navigateur et de récupérer des valeurs modifiées.  
Composants
WEBDEV est livré en standard avec projets correspondants à des composants. Ces projets contiennent :
  • une configuration de projet correspondant au composant.
  • une configuration de projet correspondant à l'utilisation du composant.
  • un composant interne.
Voici les principaux composants livrés avec WEBDEV :
WW_ExtractionWW_Extraction

L'extraction du contenu d'un fichier dépend de sa structure.
Pour certains types de fichiers, WEBDEV propose des fonctions WLangage permettant d'extraire leur contenu : HTMLVersTexte, XMLVersTexte , PDFVersTexte (à partir de WEBDEV 14), ... etc.

Cependant pour d'autres fichiers, il sera nécessaire d'étudier leurs structures et de programmer l'extraction du contenu en fonction de ces structures.

Il est également intéressant de stocker le contenu d'un fichier pour effectuer ultérieurement des recherches fulltext.

Grâce à cet exemple, il devient très facile d'extraire et de stocker le contenu de divers documents (Open Office, Word 2007, ...) afin de retrouver ceux dont on a besoin grâce à la recherche fulltext.  
WW_NuageTagsCet exemple montre comment afficher un nuage de tags dans une application WEBDEV dynamique.
En effet, sur Internet, une page d'un site répond plus ou moins à un ensemble de mots-clés.
L'objectif de cet exemple est donc de présenter comment afficher les mots-clés d'un site dans une zone de la page en indiquant de manière graphique les mots-clés importants.
Les mots-clés se retrouvent alors sous forme de liens de différentes tailles : plus le mot-clé est important dans le site, plus sa police est élevée.
WW_PaiementSecurisePaiement sécurisé multi-plateformes

Le composant PaiementSécurisé vous permet de gérer un paiement sécurisé en ligne.

Le composant gère actuellement plusieurs solutions de paiement sécurisé :
- Paybox (» http://www1.paybox.com)
- Ogone E-Commerce (Ogone, » http://www.ogone.com/)
- PayPal (» http://www.paypal.fr/)
- Monetico Paiement, ancienment CM-CIC paiement (» https://www.monetico-paiement.fr/)
  * CIC
  * Crédit Mutuel
  * OBC
- ATOS
  * SogenActif (Société Générale, » http://www.sogenactif.com/)
  * E-Transaction (Crédit Agricole, » http://www.e-transactions.credit-agricole.fr/)
  * Scellius (La Banque Postale, » https://www.labanquepostale.fr/)
  * Mercanet (BNP, » http://entreprises.bnpparibas.fr/)
  * Sherlocks (Crédit Lyonnais, » http://professionnels.lcl.fr/sherlocks/)
- Plateforme Lyra
  * Cyberplus Paiment (Banque Populaire, » http://www.bplc.fr/)
  * SPPlus (Caisse d'Epargne)
  * Systempay
  * innopay
- Saferpay+ Six card solutions
- DataCash - Mastercard Internet Gateway Service (MiGS)
  * Pay Zen
  * DGFIP (Direction Générales des Finances Publiques)
  * Groupe Crédit du Nord
  * SogeEcommerce

La gestion du retour au commerce est gérée automatiquement par le composant.
Vous pouvez bien entendu ajouter vos propres traitements pour chacun des retours attendus (Paiement validé, paiement refusé ou abandon de la procédure de paiement).

Si des données erronnées sont détectées (falsification d'URL, tentative de piratage, ...), le composant marque alors le paiement comme "Falsifié".  
WW_PayBoxLe composant PayBox permet de mettre en oeuvre une solution de paiement sécurisé dans un site WEBDEV.
Cet exemple permet de tester cette solution grâce à un compte de test.  
WW_PayPalCet exemple contient un composant interne qui permet d'inclure dans les pages WEBDEV des boutons de paiement PayPal.

 
Des composants supplémentaires seront livrés avec la Lettre du Support Technique (LST) ou disponibles sur notre site (www.pcsoft.fr).
Page précédenteSommaire
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 25/05/2022

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