Concepts WB 26

WEBDEV 26
Documentation version 26 - 1 - 1020

Comment découvrir WEBDEV ?
WEBDEV est un puissant outil de développement de sites Web, qui fournit en standard
tous les outils nécessaires à la conception et à la réalisation de sites.
Pour une formation rapide et efficace à WEBDEV, nous vous conseillons l’ordre d’ap-
prentissage suivant :
1
Lecture des "Concepts".
Ce manuel présente les principaux concepts nécessaires à la création d’un site
WEBDEV performant. Certains concepts sont suivis d’une partie "Pratique" détail-
lant certaines fonctionnalités de l’éditeur.
2
"Tuto" (cours en ligne + exercices).
Le tutoriel WEBDEV permet une première approche "pratique" de WEBDEV. Vous
pouvez ainsi vous familiariser avec les principaux éditeurs de WEBDEV.
3
Test des exemples.
Testez les différents exemples livrés avec WEBDEV dans les domaines qui vous
intéressent (e-commerce, annuaire, planning, ...).
Visitez régulièrement le site www.pcsoft.fr, espace actualités pour vérifier si des mises
à jour sont proposées.
L’aide en ligne, accessible par Internet à l’adresse http://doc.pcsoft.fr ou installée avec
WEBDEV permet de trouver rapidement la syntaxe d’une fonction du WLangage, d’obte-
nir une aide sur l’interface, ... Pour chaque thème de programmation, vous trouverez
Adresse e-mail Support Technique Gratuit : supportgratuit@pcsoft.fr une description de la fonctionnalité associée et la liste des fonctions du WLangage cor-
respondantes.
Conseil : Pour recevoir directement des mises à jour intermédiaires et des conseils Remarque : En cas de divergence entre les manuels et l’aide en ligne, suivez les instruc-
d’utilisation, abonnez-vous à la LST (revue trimestrielle + clé USB), en français. tions de l’aide en ligne.
Nous vous souhaitons une agréable prise en main de WEBDEV.

Cette documentation n’est pas contractuelle. PC SOFT se réserve le droit de modifier
ou de supprimer tout sujet traité dans ce document.
Tous les noms de produits ou autres marques cités dans cet ouvrage sont des marques déposées par leurs propriétaires
respectifs.
© PC SOFT 2020 : Aucune reproduction intégrale ou partielle du présent ouvrage sur quelque support que ce soit ne
peut être effectuée sans l’autorisation expresse de PC SOFT.
Introduction 3
Organisation du manuel Sommaire
Ce manuel présente les principaux concepts nécessaires à la création d’un site Partie 1 : Internet : Concepts de base
WEBDEV performant. Certains concepts sont suivis d’une partie "Pratique" détaillant Qu’est-ce qu’un site Web ?..................................................................................................11
certaines fonctionnalités de l’éditeur. Site statique ou dynamique ?.............................................................................................12
Les différents types de sites dynamiques..........................................................................13
Deux types de pages sont donc présents dans ce manuel : Les différents types de pages.............................................................................................14
Principe d’affichage d’un site WEBDEV dynamique..........................................................18
Principe d’affichage d’un site AWP.....................................................................................20
Technologie AJAX.................................................................................................................. 24
Si vous connaissez déjà WINDEV....................................................................................... 27
Machines et logiciels nécessaires......................................................................................28
Partie 2 : Développement d’un site

Projet et analyse.................................................................................................................. 31
Page concept Cycle de développement d’un site......................................................................................36
Je crée une page sous l’éditeur..........................................................................................38
Les fichiers suivants sont automatiquement créés..........................................................39
Edition d’une page : mode zoning......................................................................................40
Site "mobile friendly" : Dynamic serving............................................................................. 41
Site "mobile friendly" : Responsive Web Design................................................................42
Page interne.........................................................................................................................43
Modèles de pages................................................................................................................44
Page Popup..........................................................................................................................45
Les différents types de champs standard..........................................................................52
Répéter un groupe de champs : les zones répétées.........................................................62
Les deux types de code.......................................................................................................63
Le WLangage : un langage simple et très puissant...........................................................66
Ordre d’exécution des codes des boutons / liens.............................................................67
Upload : Envoi de fichiers vers le serveur..........................................................................69
Modèles de champs............................................................................................................70
Page de mise en pratique Les états............................................................................................................................... 71
Modèles d’états...................................................................................................................72
Différents modes d’impression...........................................................................................73
Afficher et enchaîner les pages.......................................................................................... 74
Réaliser un traitement sur plusieurs pages successives..................................................78
Feuilles de styles : pour simplifier la mise en page...........................................................79
Site centré ou ancré en largeur ?.......................................................................................80
Référencement d’un site..................................................................................................... 81
4 Introduction Sommaire 5
Partie 3 : Environnement de développement Les requêtes.......................................................................................................................180
Les éditeurs de WEBDEV..................................................................................................... 87 Les requêtes intégrées......................................................................................................181
Tableau de bord du projet................................................................................................... 91 Le champ Table/Zone répétée..........................................................................................182
WEBDEV, WINDEV, WINDEV Mobile : 100% compatibles.................................................92 Récupérer des données sur un site................................................................................. 184
Configuration de projet........................................................................................................93 Réplication universelle......................................................................................................189
Génération multiple.............................................................................................................94 Architecture 3-tiers............................................................................................................190
Gestionnaire de sources (GDS)...........................................................................................95
Composant interne............................................................................................................102 Partie 6 : Tester un site Web
Composant externe............................................................................................................105 Tester un site : Les éléments à tester..............................................................................193
Modes de génération.........................................................................................................113 Comment tester un site ?..................................................................................................194
Centre de suivi de projets..................................................................................................116 Le débogueur.....................................................................................................................196
Gestion des exigences.......................................................................................................117 Quand peut-on utiliser le débogueur ?.............................................................................197
Gestion des tâches............................................................................................................118
Gestion des règles métier.................................................................................................119
Partie 7 : Déployer un site Web
Déploiement d’un site statique.........................................................................................207
Partie 4 : Concepts avancés Déploiement d’un site dynamique WEBDEV................................................................... 209
RAD RID............................................................................................................................. 123 Mise en service d’un site dynamique WEBDEV...............................................................213
Le modèle UML..................................................................................................................124
Groupware utilisateur........................................................................................................130
Sites multilingues...............................................................................................................136
Partie 8 : Hébergement de sites WEBDEV
A quoi sert l’administrateur WEBDEV.............................................................................. 223
10 conseils d’ergonomie ..................................................................................................140
Configuration du serveur.................................................................................................. 229
Superposer les champs.....................................................................................................144
Serveur dédié ou mutualisé ?.......................................................................................... 230
Personnaliser l’aspect d’un site : éléments d’ambiance................................................145
Quel type de serveur choisir ?......................................................................................... 232
Choisir un type de bouton/lien.........................................................................................147
Centre de contrôle d’hébergement.................................................................................. 233
Empêcher le retour sur une page.....................................................................................148
Site dynamique sur des configurations spécifiques....................................................... 234
Avantage sécuritaire : la gestion du "Back".....................................................................149
Statistiques de fréquentation des sites dynamiques......................................................237
Cookies : des informations conservées chez l’internaute..............................................155
Surveillez vos sites, serveurs, ......................................................................................... 238
Protéger l’accès au site : mots de passe.........................................................................156
TLS/SSL : Crypter les informations sur le Web................................................................157
Paiement sécurisé avec prestataire.................................................................................158 Partie 9 : Annexes
Envoyer des emails............................................................................................................159 Fonctions du WLangage spécifiques à WEBDEV 26.......................................................241
Exemples et composants livrés avec WEBDEV................................................................251
Partie 5 : Bases de données
Analyse : Structure de la base de données.....................................................................163
Les différents types de fichiers accessibles....................................................................172
HFSQL Classic.................................................................................................................... 174
HFSQL Client/Serveur.......................................................................................................175
Clusters HFSQL Client/Serveur......................................................................................... 176
HFSQL : les fichiers créés physiquement.........................................................................177
Associer les champs et les données................................................................................178
6 Sommaire Sommaire 7
PARTIE 1
Internet :
Concepts de base
8 Sommaire
Qu’est-ce qu’un
Contenu
site Web ?
Un site Web est un ensemble de pages HTML (HyperText Markup Language) stockées
sur un serveur Web. Ces pages HTML sont organisées dans un but précis (par exemple,
présenter une entreprise, vendre des produits, ...).
Un site est destiné à être utilisé par des internautes. Les internautes utilisent un simple
navigateur pour accéder au site.
WEBDEV permet de créer facilement des sites Web qui gèrent ou non des données.
Serveur
Page HTML
Poste serveur chez

un hébergeur.
L’internaute accède Les pages HTML
au site et affiche les sont stockées sur
pages HTML grâce à ce serveur.
un navigateur.
10 Partie 1 : Internet : Concepts de base Partie 1 : Internet : Concepts de base 11

Site statique ou
Contenu
Les différents types de
Contenu
dynamique ? sites dynamiques
Plusieurs types de sites peuvent être réalisés : Un site dynamique permet d’afficher des pages dont le contenu varie. Le plus souvent,
• des sites statiques, le contenu de ces pages est lié à une base de données.
• des sites dynamiques. Il est ainsi possible par exemple dans un site dynamique de gérer en temps réel les
Le tableau ci-dessous présente les principales différences entre ces types de sites : réservations de voyages. Ces réservations sont directement enregistrées dans un fichier
de données et peuvent être affichées à tout moment.
Site statique Site dynamique WEBDEV propose deux types de sites dynamiques :
• site dynamique WEBDEV (en mode Session ou AWP). Ce type de site nécessite un
Le contenu des pages du site est fixe, Les données affichées dans les pages Serveur d’Application WEBDEV sur le serveur. Il permet de manipuler de nombreuses
déterminé une fois pour toutes. varient. En général, les pages permettent bases de données.
Un site statique ne peut pas interagir de : • site dynamique PHP. Ce type de site nécessite un moteur PHP sur le serveur. Ce type
avec des données. - réaliser des traitements et/ou des de site est conseillé pour héberger des sites dynamiques chez un hébergeur grand
calculs par programmation. public.
- afficher des données stockées dans
une base de données.
- afficher des images et du texte inte-
ractif.
Site dynamique
WEBDEV propose plusieurs types de
sites dynamiques :
• Site WEBDEV en mode Session.
• Site WEBDEV en mode AWP.
• Site PHP.
Site WEBDEV de type Session ou AWP Site PHP
Site statique WEBDEV : le Serveur d’Ap- Site dynamique WEBDEV : le Serveur
plication WEBDEV n’est pas nécessaire. d’Application WEBDEV ou le langage
PHP est nécessaire.
Remarque : Un site dynamique peut contenir une partie statique (présentation de l’en-
treprise, ...).
HFSQL ODBC OLE DB Connecteurs MySQL

WEBDEV permet de créer :
Natifs
• des pages statiques,
• des pages dynamiques.
Oracle Informix
SQL Server Progress
MySQL Sybase
DB2 Oracle Lite
XML AS/400...

Les différents types
Contenu Principe d’une page statique
de pages
Poste de
développement
Différents types de pages peuvent être utilisés dans les sites créés avec WEBDEV :
DÉPLOIEMENT DÉVELOPPEMENT
• Les pages statiques. Ce type de page permet d’afficher des données fixes.
• Les pages dynamiques WEBDEV en mode Session. Ces pages permettent d’afficher
dynamiquement les informations contenues dans une base de données. Le contenu
de la page varie en fonction de l’enregistrement affiché. Lors de l’affichage d’une
page dynamique en mode session, le contexte de page associé est automatiquement
créé sur le serveur. Ce contexte de page contient principalement les variables glo-
bales et les variables de positionnement dans les fichiers de données.
Création d’une page statique sous WEBDEV (fichier “.WWH”)
• Les pages dynamiques WEBDEV AWP (Active WEBDEV Page). Ces pages permettent
d’afficher dynamiquement des données contenues dans une base de données. Le
contenu de la page varie en fonction de l’enregistrement affiché.
Poste
Serveur
Une page AWP est une page dynamique WEBDEV sans contexte persistant sur le
serveur. Le contexte de page AWP est temporaire. Il est créé dans une session tempo-
raire.
• Les pages dynamiques PHP. Ces pages permettent d’afficher dynamiquement des
données contenues dans une base de données. Ces pages peuvent uniquement être
utilisées dans un site PHP.
Page HTML
Les pages suivantes présentent ces différents types de pages.
Poste de
l’internaute
CONSULTATION
Page statique visualisée sous le navigateur

Principe d’une page de type dynamique (Session ou AWP) Principe d’une page de type PHP
Poste de Poste de
développement développement
Création d’une page dynamique
Création d’une page PHP
sous WEBDEV (fichier “.WWH”)
sous WEBDEV (fichier “.WWH”)
Poste Poste
Serveur Serveur
Page HTML Moteur WEBDEV Base de données Page PHP Base de données MySQL
Poste de Poste de
l’internaute l’internaute
CONSULTATION
CONSULTATION
Page dynamique en exécution sous le navigateur. Page PHP en exécution sous le navigateur.
Les données affichées dans les pages varient en fonction Les données affichées dans les pages varient en fonction
des manipulations de l’internaute. des manipulations de l’internaute.

Principe d’affichage d’un
Contenu
site WEBDEV dynamique Navigateur Temps Serveur d’application
WEBDEV
Session WEBDEV
La session WEBDEV
Connexion de l’internaute à un site
- Création automatique de la session WEBDEV
dynamique WEBDEV
Lors de l’affichage d’une page WEBDEV en mode Session, les opérations suivantes sont - Création automatique du contexte de la Page 1
effectuées :
1
CONTEXTE
1. Demande d’affichage de la page.
2. Lancement du moteur WEBDEV. Le moteur sera présent sur le serveur jusqu’à la fin Affichage de la Page 1 - Renvoi de la Page 1
de l’application.
3. Création du contexte de l’application. Ce contexte sera présent sur le serveur
jusqu’à la fin de l’application.
4. Le moteur WEBDEV exécute le code serveur et construit la page HTML (à partir des
L’internaute clique dans la Page 1
données de la base de données par exemple). pour afficher la Page 2 - Création automatique du contexte de la Page 2
1 2
CONTEXTE
CONTEXTE
5. Lorsque le moteur a fini de construire la page HTML, le serveur transmet le résultat
au client (le navigateur).
Affichage de la Page 2 - Renvoi de la Page 2
Les contextes de page
Pour chaque page affichée dans le navigateur, un contexte de page est créé automa-
tiquement sur le serveur. Ce contexte de page contient tous les éléments qui ont été
nécessaires à la construction de la page visualisée par l’internaute :
L’internaute clique dans la Page N-1
- Création automatique du contexte de la Page N
• les variables globales, pour afficher la Page N
1 2 N
CONTEXTE
CONTEXTE
CONTEXTE
• les variables locales,
• les traitements serveur,
• les connexions aux bases de données, Affichage de la Page N - Renvoi de la Page N
• les contextes des fichiers de données, ...
Les contextes de page restent en mémoire sur le serveur jusqu’à la fin de la session
WEBDEV.
Déconnexion de l’internaute
Si la même page est appelée plusieurs fois : (fermeture du Navigateur)
• Si la fonction PageAffiche est utilisée pour afficher la page, le contexte de page est
détruit et recréé. Au bout du Time Out (défini dans
l’Administrateur WEBDEV), la session
WEBDEV et les contextes de page
• Si la fonction PageActualise est utilisée pour afficher la page, le même contexte de sont détruits.
page est réutilisé.
Programmation
Par défaut, la gestion de la session WEBDEV et des contextes de page est entièrement
automatique. Vous n’avez rien à programmer.

Principe d’affichage d’un
Contenu
site AWP Navigateur Serveur d’application
WEBDEV
Temps
Qu’est-ce qu’une page AWP ? Connexion de l’internaute à

un site AWP
- Création de la session WEBDEV temporaire
- Création du contexte de la Page 1

Une page AWP (Active WEBDEV Page) est une page dynamique WEBDEV sans contexte
1
CONTEXTE
persistant sur le serveur. Le contexte de page AWP est temporaire. Il est créé dans une
session temporaire. - Création de la page web
Affichage de la Page 1 - Renvoi de la page web à l’internaute
Rappel : Dans un site WEBDEV en mode Session, chaque page affichée possède un - Libération du contexte de la Page 1
contexte de page persistant sur toute la durée de vie de la session sur le serveur. - Suppression de la session temporaire
Fonctionnement des sites AWP

Pour chaque page AWP affichée dans le navigateur, sont créés automatiquement sur le pour afficher la Page 2
serveur : - Création du contexte de la Page 2
• une session temporaire,

2
CONTEXTE
• un contexte de page AWP temporaire.
- Création de la page web
- Libération du contexte de la Page 2
La session temporaire contient le contexte de page AWP temporaire. Lorsque la page - Suppression de la session temporaire
AWP a été envoyée à l’internaute, le contexte de page temporaire et la session tempo-
raire sont détruits. Il ne reste rien en mémoire sur le serveur.
Le contexte de page AWP temporaire contient tous les éléments qui ont été nécessaires L’internaute clique dans la Page N-1
pour afficher la Page N
à la construction de la page visualisée par l’internaute : - Création du contexte de la Page N
N
• les variables locales,
CONTEXTE
• les traitements serveur,
• les connexions aux bases de données, Affichage de la Page N - Renvoi de la page web à l’internaute
- Libération du contexte de la Page N
• les contextes des fichiers de données, ... - Suppression de la session temporaire
Lorsque la page AWP a été envoyée à l’internaute, ces éléments sont détruits.
(fermeture du Navigateur)

Comment partager des informations (valeurs) entre des pages AWP ?
Navigateur Serveur d’application
Deux méthodes permettent de partager des informations (valeurs) entre des pages AWP: WEBDEV
• Passage des informations dans l’URL. Cette méthode permet un meilleur référence- Temps
ment.
• Sauvegarde des informations dans des contextes AWP (par programmation). Connexion de l’internaute à
un site AWP
- Création de la session WEBDEV temporaire Stockage du
contexte AWP
- Création du contexte de la Page 1 par programmation
(variables globales)
CONTEXTE
Passage des informations (valeurs) entre deux pages dans l’URL
Il est possible de passer des informations d’une page à une autre via l’URL. L’URL - Création de la page web
est de la forme "http:\\Serveur Web\...\mapage.awp?NomParam1=Valeur1& - Libération du contexte de la Page 1
NomParam2=Valeur2". - Suppression de la session temporaire
Cette méthode permet un meilleur référencement de la page car les informations pas-
sées dans l’URL sont visibles et analysées par les robots de référencement.
pour afficher la Page 2
Sauvegarde des informations (valeurs) dans des contextes AWP (par programmation). - Création du contexte de la Page 2
il est possible de stocker sur le serveur des valeurs communes à plusieurs pages AWP,
2
CONTEXTE
grâce aux contextes AWP. Un contexte AWP est créé sur le disque sur le serveur. Ce
contexte est disponible tant que des pages AWP sont affichées et que le time out des Affichage de la Page 2 - Renvoi de la page web à l’internaute
- Libération du contexte de la Page 2
contextes AWP n’est pas écoulé. Le time out des contextes AWP est défini dans l’admi-
- Suppression de la session temporaire
nistrateur WEBDEV (onglet "Configuration", option "Durée des contextes AWP").
Pour gérer les contextes AWP, il est nécessaire d’utiliser les fonctions WLangage Décla-
reContexteAWP, LibèreContexteAWP, ...
L’internaute clique dans la Page N-1
Pour plus de détails, consultez l’aide en ligne. pour afficher la Page N
- Création du contexte de la Page N
CONTEXTE
Affichage de la Page N - Renvoi de la page web à l’internaute
- Libération du contexte de la Page N
- Suppression de la session temporaire
(fermeture du Navigateur)
Au bout du
Time Out des
contextes AWP
(défini dans
l’Administrateur
WEBDEV), le contexte
AWP est détruit.

Technologie
Contenu AJAX automatique et immédiat
AJAX Le schéma suivant présente l’utilisation automatique et immédiate de AJAX dans un site
WEBDEV :
La technologie AJAX est disponible nativement dans WEBDEV.
Que signifie AJAX et quel est son intérêt ?

AJAX (pour Asynchronous Javascript and XML) permet de rafraîchir uniquement les don-
Serveur
nées modifiées dans une page HTML sans réafficher la totalité de la page. Par exemple,
si certains éléments présents dans une page affichée (le contenu du panier, les ca-
ractéristiques d’un produit, une liste de villes, une carte géographique, ...) doivent être
Navigateur 2 Web
Envoi de la requête
1
modifiés, seuls ces éléments seront rafraîchis. Le serveur n’aura pas à envoyer la page
entière sur le poste de l’internaute. Action
Cette technologie a de multiples avantages : 3 Exécution de

la requête
5
Mise à jour
• le serveur est moins sollicité. Il peut alors supporter un plus grand nombre de
AUTOMATIQUE
connexions simultanées. des éléments modifiés
• les informations qui circulent sont de taille réduite.
• la durée de transmission est plus courte. 4
• l’affichage pour l’internaute est immédiat et sans effet visuel. Envoi des éléments
modifiés uniquement
AJAX peut être utilisé à deux niveaux différents dans un site WEBDEV :
• AJAX automatique et immédiat : un simple clic suffit pour accéder aux avantages
AJAX. Le code reste le même. Par exemple, une page d’un site permet de connaître différentes caractéristiques d’un
pays (capitale, devise, drapeau, situation, ...). En fonction du pays sélectionné par l’inter-
• AJAX programmé : utilisation des fonctions de gestion AJAX pour les traitements com-
naute, les informations correspondantes sont affichées.
plexes.
Action de l’internaute. Dans notre exemple, sélection du pays dans la combo
Remarque : Seuls les navigateurs suffisamment récents supportent la technologie AJAX. "Sélectionner le pays souhaité".
La fonction AJAXDisponible permet de savoir si le navigateur en cours supporte la tech- Envoi de la requête au serveur.
nologie AJAX. Si un traitement utilisant la technologie AJAX est exécuté sur un navigateur
ne supportant pas cette technologie, le traitement s’exécute "comme si" il n’utilisait pas
la technologie AJAX (rafraîchissement de la page entière par exemple). Exécution de la requête : recherche des caractéristiques du pays choisi.
Envoi du résultat de la requête :

• sans AJAX : toute la page est envoyée.
• avec AJAX : seules les caractéristiques du pays sont envoyées.
Affichage des caractéristiques du pays :
• sans AJAX : toute la page est réaffichée.
• avec AJAX : seuls les champs contenant les caractéristiques du pays
sont rafraîchis.

AJAX programmé
Si vous connaissez déjà
Contenu
Le schéma suivant présente l’utilisation de "AJAX programmé" dans un site WEBDEV :

WINDEV
Voici les principales différences entre WEBDEV et WINDEV :
• WEBDEV permet de créer des pages alors que WINDEV permet de créer des fenêtres.
• Dans WEBDEV, différents types de code peuvent être saisis : un code WLangage
s’exécutant sur le serveur, un code WLangage s’exécutant sur le navigateur et un
Navigateur Serveur code Javascript s’exécutant sur le navigateur.

Demande d’exécution
de la procédure
Web Si vous créez une page PHP, un code supplémentaire apparaît : un code PHP s’exécu-
tant sur le serveur.
1 2 3 Exécution de la • De nouvelles fonctions du WLangage spécifiques au Web sont disponibles.

Action procédure serveur • Certaines fonctions du WLangage inadaptées au Web n’existent plus.
• Certaines fonctions du WLangage sont uniquement utilisables dans un traitement
exécutable en code serveur.
Envoi du résultat • Certaines fonctions du WLangage sont uniquement utilisables dans un traitement
uniquement exécutable en code navigateur.
7 5 4
Mise à jour Génération du résultat : • De nouveaux types de champs plus spécifiques à une application Web sont dispo-
AUTOMATIQUE Document XML, chaîne nibles :
des éléments modifiés
6
de caractères • Champ d’affichage formaté,
• Champ Applet Java,
• Champ Bandeau défilant,
Analyse du résultat
• Champ Barre de navigation,
• Champ Captcha,
Exécution d’un traitement navigateur (fonction AJAXExécute ou AJAXExécu- • Champ Cellule,
teAsynchrone). • Champ Chemin de navigation,
• Champ Composant Web,
Demande d’exécution d’une procédure serveur. • Champ Flash, Champ Flex,
• Champ Image clicable (Map Area),
• Champ IFrame,
Exécution de la procédure serveur.
• Champ Lien,
• Champ Ligne,
Génération du résultat. Le résultat de la procédure sera exprimé sous forme • Champ Page Interne,
d’une chaîne de caractères ou d’un document XML. • Champ Page cornée,
• Champ Plan du site,
Envoi du résultat de la procédure (Mot-clé RENVOYER). • Champ Popup,
• Champ Réglette,
• Champ Réseau social,
Analyse du résultat de la procédure.
• Champ SilverLight,
• Champ Tableau HTML,
Affichage des informations modifiées. Seuls les champs nécessaires sont • Champ Upload,
rafraîchis. • Champ Vignette,
• Champ Zone de texte,
• Certains types de champs inutiles sur Internet ont disparu : Ascenseur, ActiveX, Objet
OLE, Spin, ...
Machines et logiciels
Contenu PARTIE 2
nécessaires
• une machine : PC, Mac, Unix, Smartphone, ...
• un navigateur : Internet Explorer, FireFox, Chrome, ...
• un accès Internet (ou Intranet).
Aucun module ne sera à télécharger. Le fonctionnement est immédiat et rapide.
Le serveur La machine de développement

• 1 machine serveur : PC
• 1 système
• 1 machine : PC
• 1 système d’exploitation : Développement
d’exploitation serveur
(Windows ou Linux) : Windows
Windows Vista ou supérieur.
d’un site
2008 ou supérieur.
• 1 logiciel serveur Web : • 1 logiciel serveur Web :
IIS, Apache, ... IIS, Apache, ...
• 1 Serveur d’Application
WEBDEV
ou
• 1 Moteur PHP
(version 4.3.2 minimum)
• 1 logiciel WEBDEV "Développement"
• le site lui-même • le site en cours de développement
• les données *
• les données (optionnel) *
(site dynamique uniquement)
• au moins un navigateur :
Internet Explorer, FireFox, Chrome, ...
* Les données peuvent se trouver sur une autre machine reliée en réseau.
28 Partie 1 : Internet : Concepts de base

Projet et
Contenu
analyse
Le développement d’un site Web en utilisant WEBDEV repose sur deux éléments princi-
paux : le Projet et l’Analyse.
Un Projet WEBDEV est un ensemble d’éléments : pages, états, champs, classes, compo-
sants, ... dont l’assemblage permet de réaliser un site Web.
Une Analyse WEBDEV regroupe la description des fichiers de données du site.
Un site est construit à partir d’un projet.

Un projet est généralement associé à une analyse.
Une analyse peut être associée à un ou plusieurs projets.
Projet 1
Classes Feuille Pages et

de styles champs
Analyse
Projet 2 Projet n
Classes Feuille Pages et Classes Feuille Pages et

de styles champs de styles champs
30 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 31

Le projet en pratique 3 Tableau de bord et éléments du projet
3.1 Tableau de bord
1 Présentation Tout responsable de projet cherche à avoir une vi-
sion globale et synthétique de l’état d’avancement
La première étape de la description d’un site à toutes vos attentes. Toutes les caractéristiques des projets qu’il dirige.
consiste à créer un projet. du projet spécifiées lors de la création du projet Tout responsable qualité veut connaître le nombre
Lors de la création d’un projet, plusieurs questions pourront être modifiées par la suite. et l’importance des bogues des projets et en suivre
vous sont posées afin que votre projet corresponde l’évolution.
Le responsable fonctionnel cherche à savoir
quelles sont les évolutions demandées par les uti-
2 Création du projet lisateurs.
Le développeur cherche à lancer directement et Pour plus de détails, consultez le paragraphe
rapidement les éléments du projet, les codes les "Tableau de bord du projet", page 91.
Pour créer un projet : • la charte de programmation. Cette charte de
programmation permet de préfixer automati- plus utilisés, ...
1. Cliquez sur parmi les boutons d’accès rapide 3.2 Les éléments du projet
du ruban de WEBDEV. La fenêtre de création d’un quement les variables, les noms de champs, Le tableau de bord permet de répondre à tous ces
de pages, ... souhaits. Le tableau de bord propose différents Le projet est composé de pages, d’états, de re-
nouvel élément s’affiche : cliquez sur "Projet".
indicateurs sous forme de "Widgets". Ces Widgets quêtes, de collections de procédures, ...
L’assistant de création d’un projet se lance. • la charte graphique.
sont paramétrables par utilisateur : il est possible Pour connaître la liste des éléments d’un projet,
2. Spécifiez les différentes options du projet. Les • les langues gérées . Ces langues seront pro- d’en ajouter, supprimer ou encore de les redimen- sous le volet "Projet", dans le groupe "Projet", cli-
principales options sont les suivantes : posées par défaut dès qu’une option pourra sionner. quez sur "Liste des éléments".
• le mode de création du projet. Il est possible être traduite dans un champ, une fenêtre, un
Il est possible par exemple d’afficher les sta- Cette option permet de :
de créer un projet vierge ou un projet basé sur état, ...
tistiques sur le projet (nombre de pages, ...), le • ajouter à votre projet des éléments appartenant
un exemple existant (RAD Applicatif). 3. Indiquez si le projet est associé ou non à une résultat des différents audits (audit statique, dyna- à des projets accessibles depuis votre poste.
• le type de génération du projet. Cette option base de données. Si oui, la base de données peut mique, ...), ... Les fichiers correspondants ne seront pas dépla-
permet de définir le type de site généré par le exister ou être créée.
cés dans le répertoire de votre projet.
projet : site statique, site dynamique WEBDEV 4. Validez l’assistant. Le projet créé devient le
Pour afficher le tableau de bord de votre projet : • supprimer des éléments de votre projet. Les
(mode session ou AWP), site dynamique PHP, projet en cours.
1. Affichez le menu contextuel du projet dans la fichiers correspondants ne sont pas supprimés
...
Remarques : barre des documents ouverts. physiquement.
• le nom et l’emplacement. Ces options ne se-
• Si vous avez demandé la création d’une base de 2. Sélectionnez l’option "Afficher le tableau de Pour rechercher rapidement un élément de votre
ront pas modifiables. Le projet correspond à
données, l’assistant de création de l’analyse se bord". projet, utilisez la combinaison de touches "Ctrl + E"
un fichier ".WWP". Tous les objets associés au
lance automatiquement. depuis n’importe quel éditeur.
projet seront créés dans le répertoire spécifié.
• si le projet va être manipulé par plusieurs • L’ensemble des informations fournies peut être
développeurs. Il est possible d’utiliser le modifié dans la description du projet. Pour affi-
gestionnaire de sources (GDS) pour partager cher la fenêtre de description du projet, sous le
le projet. volet "Projet", dans le groupe "Projet", cliquez sur
"Description".

4 Manipulations du projet 5.2 Zones d’impression 2. Réduisez l’affichage de la représentation gra-
phique (option "Zoom" du volet "Affichage" ou Ctrl
Si des représentations graphiques (MLD, dia- + Roulette de la souris) pour visualiser l’ensemble
Voici les principales manipulations pouvant être • Copier ou supprimer un projet, grammes UML, ...) doivent être imprimées, il est du graphe.
réalisées sur un projet : • Renommer un projet. nécessaire de configurer les zones d’impression 3. A l’aide de la souris :
• Archiver un projet, Pour plus de détails sur ces fonctionnalités, consul- avant d’imprimer le dossier. • déplacez ces bordures à l’endroit désiré en
• Restaurer un projet, tez l’aide en ligne. Pour spécifier les zones d’impression de la repré- maintenant le bouton de la souris enfoncé (la
• Dupliquer un projet, sentation graphique en cours : couleur du curseur de la souris est noire).
1. Sous le volet "Affichage", dans le groupe • choisissez le nombre de pages sur lesquelles
"Edition", cochez l’option "Zones d’impression". la représentation graphique doit être impri-
5 Dossier du projet Des bordures représentant les zones imprimables mée (le curseur de la souris se transforme en
dans le dossier apparaissent sous l’éditeur en double-flèche Nord-Ouest / Sud-Est).
cours.
WEBDEV permet d’imprimer différents dossiers 5.1 Type de dossier
détaillant l’ensemble des éléments (pages, état,
fichier de données, rubrique, ...) du projet. Pour Plusieurs types de dossier sont proposés :
imprimer ces dossiers : • Synthétique : Contient les informations de base
• sous le volet "Accueil", dans le groupe "Général", sur les éléments du projet.
déroulez l’icône et sélectionnez l’option • Code : Contient l’ensemble des traitements de
"Imprimer le dossier du projet". Le dossier peut tous les objets du projet ainsi que les procé-
contenir l’ensemble des caractéristiques du dures.
projet. • Dossier Complet : Contient toutes les informa-
• sous le volet "Accueil", dans le groupe "Général", tions du projet. Ce type de dossier peut être très
cliquez sur l’icône . Le dossier est alors volumineux.
constitué uniquement des caractéristiques de • Personnalisé : Correspond à une sélection des
l’élément (page, état, requête, ...) en cours. informations à imprimer.
Type d’édition du dossier
Le dossier peut être imprimé sur l’imprimante sé-
lectionnée. Lors de l’impression, le dossier généré
est affiché dans le visualisateur de rapports. Il est
alors possible de :
• lancer l’impression,
• exporter le dossier au format PDF (via le volet
"Exporter" du visualisateur de rapports).
Pour plus de détails, consultez l’aide en ligne.

Cycle de développement
Contenu
d’un site
WEBDEV couvre la totalité du cycle de développement d’un site :
Test et
Conception Développement génération Déploiement
Déploiement du site
Test et débogage
sur un Serveur
Cahier des charges Création du projet du site d’Application WEBDEV
Génération du site :
Test final
- Site de type Session
Modélisation UML Création de l’analyse - Site AWP
- Site PHP
Ouverture du site
- Webservice
aux utilisateurs
Importation de Développement
fichiers existants - RAD Projet
- RAD Page
- Requêtes
- Etats
- Saisie du code source
Détail des différentes phases :

Phase de tests et génération : WEBDEV offre toute une panoplie d’outils de tests auto-
matiques pour garantir la fiabilité des applications et assurer la non-régression entre les
Phase de conception : Il est possible de concevoir un site à partir d’un simple cahier phases de développement.
des charges, d’une modélisation UML des traitements ou même à partir de fichiers de
données préexistants.
Phase de déploiement : Le déploiement d’un site dynamique WEBDEV (en mode Ses-
sion ou AWP) est réalisé sur un Serveur d’Application WEBDEV. Lorsque le site est dé-
Phase de développement : La création du projet et de l’analyse est réalisée à l’aide ployé, il est possible de réaliser les derniers tests avant d’ouvrir le site aux utilisateurs.
d’assistants très complets. Le développement peut être effectué en mode RAD (Rapid
Development Application) avec génération automatique du code et des UI ou être le
résultat d’une création manuelle des différents éléments du projet.

Je crée une page sous
Contenu
Les fichiers suivants sont
Contenu
l’éditeur... automatiquement créés
Types de pages disponibles
Création de la page sous l’éditeur de pages de WEBDEV.
Page Page Page Page

Session statique AWP PHP
WEBDEV WEBDEV
Fichier source des pages au format WEBDEV (.WWH)
Saisie du code (étape optionnelle).

HTML
générique .HTM .AWP .PHP
WDL
Fichiers générés
Légende :
Code navigateur .WWH : Format source des pages .WDL : Bibliothèque du projet
Ce fichier contient la description complète de la page Générée lors du déploiement du site WEBDEV (en
(champ, code navigateur, code serveur). Ce fichier est mode Session ou AWP), la bibliothèque contient le
utilisé par l’éditeur et reste sur la machine du déve- code serveur des pages du projet. Ce fichier sera
loppeur. présent sur le serveur.
.HTM générique .AWP : Page AWP

Ce fichier contient la description complète de la page Généré à partir du fichier WWH, ce fichier contient
(champ, code navigateur, code serveur). Certains para- la description des champs, le code serveur, le code
mètres de cette page sont génériques et seront remplis navigateur. Ce fichier sera présent sur le serveur.
dynamiquement lors de l’affichage de la page.
Code serveur
.HTM : Page HTML du site .PHP : Page PHP
Généré à partir du fichier WWH, ce fichier contient la des- Généré à partir du fichier WWH, ce fichier contient
cription des champs en HTML et le code navigateur (si le la description des champs, le code serveur, le code
code a été saisi en WLangage, il est automatiquement navigateur au format PHP. Ce fichier sera présent
traduit en Javascript). Ce fichier sera présent sur le ser- sur le serveur.
Enregistrement de la page. veur.

Edition d’une page :
Contenu
Site "mobile friendly" :
Contenu
mode zoning Dynamic serving
L’édition d’une page en mode zoning est simple et puissante : il suffit de découper la Le "Dynamic serving" est une technique dans laquelle la même adresse (URL) mène à 2
page en "zones" grâce à l’outil "Crayon". Ces zones sont automatiquement paramétrées pages différentes : une page pour PC et une page pour mobile.
et permettent de définir l’architecture de la page : entête, pied de page, ...
Selon le matériel (PC ou mobile) qui accède à la page, la page adéquate sera affichée.
Ces zones sont facilement manipulables sous l’éditeur : l’agrandissement de la hauteur
de la zone d’entête déplace automatiquement la zone du corps de la page. C’est une solution alternative (voire complémentaire) au "Responsive Web Design" pour
rendre un site traditionnel "mobile friendly". Avec le "Dynamic serving", il n’est pas né-
cessaire de modifier les pages existantes : il suffit d’en rajouter pour les mobiles.
Cette technique bénéficie d’un excellent référencement par Google.
http://monsite.com/mapage
Même URL,
mais pages
différentes
L’édition respecte la position relative des champs contenus dans chaque zone ainsi que
leur ancrage.
Ordinateur Mobile
Principe
Le site dispose de 2 jeux de pages : les pages pour ordinateur et les pages pour mobile.
Ces pages sont associées 2 à 2.
Lorsque l’adresse d’une page est saisie dans le navigateur, l’environnement utilisé est
automatiquement détecté et la page correspondante (ordinateur ou mobile) est affi-
chée dans le navigateur. L’adresse affichée dans le navigateur ne change pas : seul le
contenu affiché est adapté au système.
Tous les liens et les pages ouvertes dans le code sont automatiquement redirigés vers
la page correspondante dans la plateforme en cours.
Remarques :
Il est possible d’associer une information sémantique HTML 5 à chaque zone : cela
• La détection de l’environnement est réalisée selon les recommandations Google : les
améliore la pertinence du référencement par certains moteurs de recherche.
tablettes ne sont pas considérées comme des mobiles.
• Les pages sont vues par Google comme étant en mode "Dynamic serving". Ainsi, les
différentes versions des pages sont référencées. Si les pages mobiles sont correcte-
ment réalisées, le site est considéré comme "Mobile friendly".
Site "mobile friendly" :
Contenu
Page
Contenu
Responsive Web Design interne
Les sites Web peuvent être visualisés sur de nombreuses plateformes : mobiles, ta- Le champ Page interne permet d’inclure une page (et son code) dans une autre page. A
blettes, PC, ... Sur chaque matériel, la taille du navigateur change et donc l’espace dis- l’exécution, la page interne sera dynamiquement fusionnée à la page hôte.
ponible pour afficher les données change également.
La méthode du "Responsive Web Design" consiste à créer une seule et même page qui 1. Création d’une page interne
s’adapte automatiquement à la plateforme sur laquelle cette page est affichée. Une page interne est une page spécifique qui ne comporte ni barre de titre, ni menu.
Dans cette page, tous les types de champs peuvent être utilisés.
Méthode utilisée
WEBDEV utilise par défaut la méthode du "Desktop first" : le développeur doit tout
d’abord penser à l’interface de son site Web en mode "Bureau". Ensuite, il réalisera la
version en mode "Tablette", puis il terminera par la version en mode "Mobile".
Mobile
Tablette
Bureau Dans l’exemple, une page interne permet de gérer le panier.

(Desktop)
En termes de conception, un site Web est tout d’abord réalisé pour une utilisation "bu- 2. Utilisation d’une page interne
reau". En réduisant les résolutions d’affichage (taille de la page), le contenu et les fonc- Pour utiliser une page interne, il suffit de :
tionnalités sont soit déplacés, soit retaillés, soit masqués.
créer un champ de type page interne.
Sous l’éditeur WEBDEV, la représentation des différentes résolutions possibles se fait sélectionner dans la description du champ la page interne à utiliser et valider.
à l’aide de tranches. Une tranche représente une taille de navigateur pour un appareil
spécifique. Dans le cas de WEBDEV, 3 tranches sont présentes par défaut :
• La tranche Mobile correspondant à des appareils de type smartphone.
• La tranche Tablette correspondant à des appareils de type tablette.
• La tranche Bureau correspondant à des appareils de type PC, MAC, etc.
Exemple
Remarques :
• Il n’est pas possible de modifier par programmation la page interne utilisée dans le
champ "Page interne".
• La zone d’accueil est rectangulaire et aucune surcharge n’est possible. Pour réaliser
Bureau
des surcharges, il est conseillé d’utiliser des modèles de champs.
Mobile Tablette

Modèles de
Contenu
Page
Contenu
pages Popup
WEBDEV permet de créer des modèles de pages. Un modèle est destiné à contenir des WEBDEV permet de créer des pages Popup. Les pages Popup permettent de dialoguer
éléments communs à un ensemble de pages du site. avec l’utilisateur d’une manière simplifiée.
Les modifications effectuées dans un modèle de pages sont automatiquement repor- Une page Popup est associée à une page. Une page peut avoir plusieurs pages Popup.
tées sur toutes les pages utilisant ce modèle. L’utilisation des Popups permet de manipuler sous l’éditeur la fenêtre de dialogue
Un modèle de pages permet, par exemple, de respecter la charte graphique définie pour comme un élément différent de la page, tout en étant intégré à la page.
un site. Sous l’éditeur :
Définition d’un modèle de pages.

Le modèle est affiché sous un
bandeau orange sous l’éditeur.
En exécution :
Utilisation du modèle dans plusieurs pages.

Les éléments appartenant au modèle sont identifiés par un carré jaune.
Pour créer une page utilisant un modèle, sélectionnez le modèle à utiliser lors de la
création de la page.
Remarque : La programmation associée aux éléments du modèle peut être directement
réalisée dans le modèle.
Les caractéristiques des éléments peuvent être désolidarisées du modèle. Par exemple,
désolidariser la position d’un champ du modèle pour positionner le champ ailleurs tout
en conservant les autres évolutions sur le champ (code, style, ...). On parle alors d’héri-
tage. Dans ce cas, les éléments sont identifiés par un carré bleu.

Les pages en pratique 2. Choisissez le type de la page à créer dans les
onglets :
1.3 Création des pages du projet par
construction automatique du site (R.A.D.)
• l’onglet "Standard" permet de créer : Pour les sites dynamiques (Session, AWP ou PHP),
Une page a pour but d’afficher, de consulter et de Pour plus de détails sur la manipulation des
• une page vierge ne contenant aucun les pages du projet peuvent être créées directe-
saisir des informations. Ces informations peuvent champs d’une page, consultez le chapitre "Les
champ. ment en une seule opération à partir de la descrip-
provenir des fichiers de données d’une analyse, de champs en pratique", page 61.
fichiers externes, de requêtes, ... • une page vierge basée sur un modèle de tion de l’analyse, par la construction automatique
Ce chapitre traite les sujets suivants :
pages, si le projet contient un modèle de du site (RAD).
WEBDEV propose plusieurs solutions pour créer les • "Création d’une page", page 46. pages. Pour plus de détails sur les pages créées par le
pages d’un projet : • "Manipulations simples sur une page", page • une page basée sur un modèle prédéfini. RAD, consultez l’aide en ligne.
• Créer une page vierge avec l’assistant. 47.
• l’onglet "Page interne" permet de créer des Pour créer le site dynamique par le R.A.D. :
• Construire l’ensemble des pages du site à partir • "Principales caractéristiques d’une page", page pages internes. 1. Sous le volet "Projet", dans le groupe
de la description de l’analyse. 47.
• l’onglet "Pages d’erreurs" permet de créer "Génération", cliquez sur "RAD Application com-
• Créer une page à partir de la description de • "Page interne", page 48. des pages permettant de personnaliser les plète".
l’analyse (avec son code ou non). • "Modèles de pages", page 48. erreurs affichées dans le site. Attention : Pour utiliser cette option, le projet doit
• Créer des pages basées sur un modèle, ... • "Page popup", page 48. être associé à une analyse générée au moins une
• l’onglet "RAD" propose de créer des pages
Quelle que soit la méthode utilisée, la page pour- • "Actualiser une page de type Session", page RAD permettant d’afficher et de saisir des fois.
ra être modifiée après création : il sera possible 49. données. Ce type de page peut être basé sur 2. Sélectionnez le pattern RAD à utiliser.
d’ajouter, modifier ou supprimer des champs, de un fichier de données, une requête, ...
• "Ouvrir une page dans un site WEBDEV", page 3. Sélectionnez les fichiers de données utilisés
modifier les caractéristiques de la page.
50. • l’onglet "RID" propose de créer des pages de pour la génération.
• "Evénements associés aux pages", page 50. type RID permettant de saisir des données. 4. Sélectionnez les fichiers de données principaux
Seule l’interface de la page sera générée. qui seront les points d’entrée dans l’application
• "Les menus", page 51.
La programmation sera à la charge du déve- (principalement, ces fichiers de données seront
1 Création d’une page loppeur. utilisés pour mettre en place les options de
3. Selon le type de page choisi, saisissez les infor- menu).
WEBDEV propose plusieurs méthodes pour créer 6. Spécifiez le titre de la page et son nom. La mations demandées dans les différentes étapes 5. Validez la création de votre site par le RAD.
une page : page correspond à un fichier ".WWH". Par défaut, de l’assistant.
• Création de pages vierges. ce fichier sera créé dans le répertoire principal 4. Validez la création de la page.
• Création de pages prédéfinies. du projet. Ce nom sera utilisé pour manipuler la 5. La fenêtre de sauvegarde apparaît automati-
page. quement. Spécifiez le titre de la page et son nom
• Création de pages par le RAD projet.
7. Validez la fenêtre de sauvegarde. et validez.
Remarque : Les principales caractéristiques des
pages sont détaillées dans l’aide en ligne. 8. Créez les champs dans la page.
Remarques :
1.1 Création de pages vierges 2 Manipulations simples sur une page
• Par défaut la page créée correspond au type du
Pour créer une page vierge : site en cours (statique, Session, AWP ou PHP). L’éditeur de pages permet de réaliser les manipula- • Sauvegarder et copier une page.
Le type de la page peut être modifié dans la tions suivantes sur les pages :
1. Cliquez sur parmi les boutons d’accès • Importer et exporter une page.
fenêtre de description de la page. Pour plus de
rapide de WEBDEV. La fenêtre de création d’un • Ouvrir une page sous l’éditeur : Il suffit de • Modifier l’ordre de navigation.
détails, consultez "Principales caractéristiques
nouvel élément s’affiche : cliquez sur "Page" puis double-cliquer sur le nom de la page affiché
d’une page", page 47. Pour plus de détails, consultez l’aide en ligne.
sur "Page". L’assistant de création d’une page se dans le volet "Explorateur de projet".
lance. • Les différents types de champs sont présentés
dans le chapitre "Les différents types de champs
2. Choisissez le type "vierge".
standard", page 56. 3 Principales caractéristiques d’une page
3. Indiquez si la page vierge doit être créée en
mode Responsive Web Design. 1.2 Création de pages prédéfinies
4. Validez la création de la page. Une page vierge Pour créer une page prédéfinie : Une page peut accueillir tous les types de champs • avoir un menu : ce menu permettra aux inter-
est créée. disponibles. Une page peut : nautes d’accéder plus rapidement aux prin-
1. Cliquez sur parmi les boutons d’accès rapide
5. La fenêtre de sauvegarde apparaît automati- • avoir une image de fond : cette image est affi- cipales fonctionnalités du site. Pour créer un
de WEBDEV. La fenêtre de création d’un nouvel
quement. chée en fond de la page et les champs viennent menu déroulant dans une page, il suffit d’utiliser
élément s’affiche : cliquez sur "Page" puis sur
se superposer à cette image. un champ "Menu". Les deux premières options
"Page". L’assistant de création d’une page se
apparaissent dans la page. Les options peuvent
lance.
être manipulées grâce au menu contextuel des
options. Les options de menu peuvent ensuite
être manipulées par programmation.

• avoir une barre de message : cette barre de Remarque : Les pages Web destinées à être vues 7 Actualiser une page de type Session
message affichera les messages d’aide associés sur le téléphone Apple iPhone peuvent bénéficier
aux différents champs de la page. Pour plus de d’enrichissements particuliers : splash screen au
détails, consultez l’aide en ligne. lancement, mode plein écran, ... Ces fonctionnali-
7.1 Présentation 7.2 Mise en place
• être multilingue : toutes les langues définies tés les font ressembler à de véritables applications.
pour la page seront disponibles pour tous les WEBDEV permet de paramétrer aisément toutes L’actualisation d’une page consiste à ré-afficher Pour actualiser une page, il suffit d’utiliser la fonc-
champs de la page. Une page peut être associée ces spécificités tout en préservant la compatibilité une page déjà ouverte sous le navigateur. Cette tion du WLangage PageActualise.
à plus de langues que le projet (cas par exemple avec les autres navigateurs (mobiles ou non) du action est identique à l’utilisation de la touche
des pages partagées entre plusieurs projets). marché. "Rafraîchir" du navigateur. Lors de l’actualisation d’une page, les opérations
Pour plus de détails, consultez le chapitre "Sites Lors de l’actualisation de la page, les données effectuées automatiquement sont les suivantes :
multilingues", page 205. dynamiques présentes dans la page sont mises à 1. Vérification de l’existence du contexte de la
jour en fonction du contexte de page présent sur page sur le serveur.
le serveur. Seules les données modifiées sont ré-
4 Page interne affichées. 2. Ré-affichage de la page en fonction de son
contexte présent sur le serveur.
Par exemple, lors de la saisie d’une commande L’utilisation de la fonction PageAffiche est décon-
Les pages internes permettent de partager dynami- Cette interface est utilisée dans les différentes dans une application commerciale, à chaque nou- seillée pour actualiser une page, car le temps de
quement une même partie d’interface au sein d’un pages de votre site grâce au champ de type "Page velle commande d’un article, la page affichant le chargement de la page est beaucoup plus long.
ou de plusieurs sites. interne". récapitulatif de la commande (le panier) est réac-
tualisée.
L’interface à utiliser plusieurs fois est créée dans Remarque : La page à fusionner peut être issue
une page de type "Page Interne". d’un composant.
Pour plus de détails, consultez l’aide en ligne. 8 Les contextes de pages
5 Modèles de pages 8.1 Présentation 8.2 Fonctionnement automatique

Dans une application Windows, toutes les informa- Par défaut, WEBDEV gère automatiquement les
WEBDEV permet de créer des modèles de pages. • simplifier la mise à jour de la charte graphique tions relatives à la fenêtre sont conservées avec la contextes de pages en mode Session :
Ces modèles contiennent tous les éléments gra- du site. fenêtre. • Un contexte de page est ouvert lors de l’affi-
phiques et le code communs à l’ensemble des Un modèle de pages se crée aussi simplement Dans un site WEBDEV en mode Session, pour chage de la page en mode Session sur le navi-
pages de votre site. qu’une page. Pour créer une page en utilisant un chaque page affichée sur le navigateur de l’inter- gateur.
Les modifications effectuées dans un modèle de modèle, il suffit de choisir l’option "basée sur un naute, un contexte de page existe sur le serveur. • Le contexte d’une page est mis à jour en fonc-
pages sont automatiquement reportées sur toutes modèle".
Le contexte de page regroupe toutes les information des informations saisies par l’internaute
les pages utilisant ce modèle. Par défaut, toute modification effectuée dans le tions relatives à la page : sous le navigateur. Cette mise à jour se fait lors
Un modèle de pages permet de respecter la charte modèle est reportée dans les pages l’utilisant. Il est de la validation de la page (à l’aide d’un bouton
• contenu des champs,
graphique définie pour un site. cependant possible dans une page spécifique de de type "Envoi au serveur" ou de la fonction
gérer des cas particuliers en surchargent les élé- • variables locales,
L’utilisation de modèles de pages dans vos sites PageValide).
permet de : ments du modèle. • variables globales,
• Les contextes de page existants sont fermés
• simplifier la création des pages du site. Pour plus de détails, consultez l’aide en ligne. • code WLangage "serveur", ... lors de l’utilisation de la fonction PageUtilise. Le
• simplifier la mise en page des pages du site. contexte de page correspondant à la page à affi-
cher avec cette fonction est alors ouvert.
Remarque : WEBDEV offre la possibilité de réaliser
6 Page popup une gestion avancée des contextes grâce aux fonc-
tions ContexteXXX. Pour plus de détails, consultez
WEBDEV permet de créer des pages popup. Ces • demander une confirmation de suppression, l’aide en ligne.
pages popup permettent de dialoguer simplement • ...
avec l’internaute. Il est par exemple possible d’utili- Pour ouvrir une page popup depuis une autre
ser une page Popup pour : page, il est possible d’utiliser la fonction navigateur
• faire saisir des renseignements (paramètres PopupAffiche.
SMTP pour l’envoi d’emails, nouvelle adresse, Pour plus de détails, consultez l’aide en ligne.
...),

9 Ouvrir une page dans un site WEBDEV • Récupération de la propriété Valeur (page 3. Sélectionner l’événement optionnel à ajouter
interne uniquement) et valider.
Exécuté lors de l’utilisation de la propriété 4. L’événement sélectionné est automatiquement
Valeur en lecture sur le champ Page Interne. ajouté à la suite des événements proposés par
9.1 Présentation 9.3 Ouverture d’une page par programma-
tion défaut.
L’ouverture d’une nouvelle page dans un site 10.2 Evénements optionnels
WEBDEV peut être réalisée selon plusieurs mé- Le WLangage propose plusieurs fonctions permet- Plusieurs événements optionnels peuvent être
thodes : tant d’ouvrir une page. Il est ainsi possible de gérer par exemple :
gérés.
• directement depuis la description du champ qui • PageActualise : • le survol du champ par la souris,
Pour gérer un événement optionnel, il suffit de :
doit ouvrir la page (bouton, lien, menu, ...), Actualise la page affichée par rapport à son • le bouton gauche enfoncé, relâché, avec double-
1. Afficher la fenêtre de code de la page. clic,
• par programmation en WLangage. contexte.
2. Cliquer sur "Ajouter d’autres événements à la • le bouton droit enfoncé, relâché, avec double-
• PageAffiche :
9.2 Ouverture d’une page depuis la descrip- page" présent à la fin de la liste des événements. clic,
Ouvre et affiche une nouvelle page dans le navi-
tion d’un champ La fenêtre des événements optionnels s’affiche.
gateur de l’internaute. • la roulette de la souris, etc.
Lors de la description d’un bouton, d’un lien, d’une • PageAfficheDialogue :
image clicable, il est possible de définir directe- Ouvre et affiche une nouvelle page de manière
ment l’action effectuée et la destination de cette modale dans le navigateur de l’internaute. 11 Les menus
action. • PageUtilise :
Pour ouvrir directement une page "xxx" à partir d’un Ferme toutes les pages en cours (et leurs WEBDEV permet de créer un menu dans vos pages WEBDEV permet de :
bouton, lien, image, ... : contextes) et ouvre une nouvelle page. HTML. Ce menu peut être vertical ou horizontal. • Créer un menu principal,
1. Affichez la description de l’élément (option • PopupAffiche : A partir des différentes options de ce menu, il est • Editer un menu principal,
"Description" du menu contextuel de l’élément). Affiche une popup dans la page. possible :
• Supprimer un menu principal.
2. Dans la zone "Action", sélectionnez le type Lors de l’ouverture de la page, il est possible de • d’afficher des pages,
Pour plus de détails, consultez l’aide en ligne.
d’action à effectuer : "Afficher la page xxx". passer des paramètres à la page. Pour plus de dé- • d’exécuter le code de boutons présents dans la
3. Sélectionnez la destination de l’action : page tails, consultez l’aide en ligne. page,
en cours, navigateur en cours, ... (frame spéci- • ...
fique dans le cas d’un frameset). L’action précé- Remarque : Par défaut, lors de l’ouverture d’une
demment sélectionnée sera effectuée dans cette page en programmation, la destination choisie est :
destination. • soit la destination définie dans la description de 12 Les options de menu
4. Validez. l’objet lançant l’ouverture de la page (bouton,
lien, ...).
• soit la destination définie pour la page en cours. 12.1 Présentation • Ajouter un sous-menu,
Un menu est composé d’une ou de plusieurs op- • Supprimer une option de menu.
10 Evénements associés aux pages tions et sous-options. Chaque option permet d’exé- Les options de menu peuvent également être direc-
cuter un code WLangage. tement manipulées sous l’éditeur de fenêtres et
Pour manipuler les options de menu, il suffit d’édi- leurs caractéristiques sont modifiables grâce à une
ter le menu concerné. fenêtre de description.
10.1 Evénements gérés par défaut • Déchargement (onunload) de la page (code
navigateur) : La fenêtre de description des options de menu per-
WEBDEV gère par défaut les événements suivants Pour éditer (ou afficher sous l’éditeur) le menu prin- met par exemple de :
Code navigateur exécuté lors de l’affichage cipal d’une page :
(ordre d’apparition sous l’éditeur de code) : • modifier le libellé de l’option,
d’une nouvelle page dans le navigateur.
• Déclarations globales (code serveur) : 1. Ouvrez la page concernée sous WEBDEV.
• Synchronisation de la page (code serveur) : • cocher ou décocher une option de menu,
Déclaration des variables globales à la page. 2. Cliquez deux fois sur le menu : un cadre jaune
Code serveur permettant de gérer la synchroni- • associer une image à une option de menu,
C’est le premier code exécuté à l’ouverture de apparaît.
sation de la page lors de l’utilisation du bouton • associer un raccourci clavier à une option de
la page.
"Précédent" du navigateur. 12.2 Manipuler les options de menu sous menu.
• Initialisation (code serveur) :
Exécuté lors de l’ouverture de la page.
• Fermeture de la page (code serveur) : l’éditeur Il est également possible d’associer du code
Exécuté lors de la fermeture de la page. WLangage à une option de menu. Seules les op-
L’événement correspondant à l’initialisation des L’éditeur de pages permet de réaliser très simple-
champs de la page est exécuté avant ce code. • Affectation de la propriété Valeur (page interne ment les manipulations suivantes : tions de menu ne possédant pas de sous-menu
uniquement) peuvent lancer un traitement WLangage.
• Chargement (onload) de la page (code naviga- • Ajouter une option de menu,
Exécuté lors de l’utilisation de la propriété Pour plus de détails, consultez l’aide en ligne.
teur) : • Ajouter un séparateur,
Valeur en affectation sur le champ Page Interne.
Code navigateur exécuté lors de l’affichage de la
page dans le navigateur.

Contenu
champs standard
Afficher une image rafraîchie régulièrement. Champ Web Caméra
Répéter des champs dans une page (Catalogue
Produits avec la photo, ...).
Vous voulez... Utilisez...

Afficher du texte, un titre, ... Champ Zone répétée
Champ Libellé
Proposer un libellé avec une mise en page spéci-

Champ Zone de texte riche
fique (images, liens, ...).
Définir une zone de couleur. Champ Cellule,
Saisir des informations.
Tableau HTML
Afficher un prix, une quantité, une adresse, une
Champ d’affichage formaté
date, une heure, ...
Sélectionner une valeur parmi une liste (Pays, Champ de saisie
Ville, couleur, ...).
Champ Sélecteur,
Champ Combo,
Champ Liste
Afficher des informations hiérarchisées (contenu
Champ Arbre
d’un répertoire, ...).
Aligner des champs (tableau HTML). Champ Cellule, Tableau HTML
Sélectionner plusieurs valeurs parmi une liste (les Champ Interrupteur, Programmer une action dans une page (afficher Champ Bouton,
destinataires d’un message, des fichiers à télé-
Champ Liste une page, valider une saisie, ...).
charger, ...). Champ Lien
Afficher une image graphique (Photo, ...). Afficher une vidéo. Champ Vidéo
Champ Image, Afficher une animation (Gif animé). Champ Image
Champ Image clicable Afficher une page selon la zone cliquée sur une
Champ Image clicable
image.
Afficher une animation Flash. Champ Flash
Utiliser une applet Java (horloge, ...). Champ Java
Utiliser un code HTML existant. Champ HTML
Afficher le contenu d’un fichier de données en Champ Table fichier ou Champ
table (Liste des clients, détail d’une commande, Table mémoire, Afficher une page d’un autre site dans une de vos
Champ IFrame
...). pages.
Champ Zone répétée fichier ou
champ Zone répétée mémoire

Sélectionner et afficher une date sur un calen- Afficher une page de votre site à l’intérieur d’une
Page Interne
drier. de vos pages.
Afficher un menu automatique (qui se construit
Champ Chemin de navigation
au fur et à mesure du parcours du site).
Champ Calendrier
Afficher des vignettes d’images. Champ Vignette
Afficher un ensemble d’images sous forme de Champ Zone répétée de type
galerie. galerie
Afficher des fichiers Flex. Champ Flex
Afficher les rendez-vous sous forme de planning
ou d’agenda. Intégrer des champs de type SilverLight. Champ SilverLight
Enrouler / Dérouler une zone d’affichage Champ Tiroir
Uploader un ou plusieurs fichiers.
Champ Planning,
Champ Agenda Champ Upload
Afficher successivement plusieurs contenus. Champ Bandeau défilant

Afficher un tableau de bord affichant des infor-
Afficher un histogramme, une courbe, un graphe mations différentes sous forme de vignettes.
de type Camembert.
Champ Tableau de bord

Champ Graphe
Afficher une liste d’objets sous forme de liste

Champ Zone répétée linéaire
horizontale défilante.
Permettre à l’internaute de donner ou de visuali-
ser une note. Utiliser des ressources externes disponibles sur
Internet (composants Angular JS, snippets Boots- Champ Composant Web
trap, ...).
Champ Notation Créer un effet visuel dans une page en présen-
tant une image partiellement recouverte par une Champ Page cornée
autre.

Les champs en pratique 2 Caractéristiques d’un champ
Pour tous les champs d’une page, il est possible • Drag and Drop, ...
WEBDEV propose de nombreux types de champs, Tous les champs peuvent bien sûr être manipulés d’afficher la fenêtre de description des champs.
facilement intégrables dans vos pages. Ces par programmation. Le contenu de cet onglet varie beaucoup en fonc-
Cette fenêtre est une fenêtre à onglets, regroupant tion du type de champ en cours.
champs peuvent être créés directement par le volet toutes les caractéristiques paramétrables d’un ou
"Création" du ruban WEBDEV. de plusieurs champs. Onglet Liaison
Remarque : Il est également possible de visualiser L’onglet "Liaison" permet de sélectionner la ru-
brique (d’un fichier de données ou d’une rubrique)
1 Créer un champ et/ou de modifier les caractéristiques d’un ou de
à laquelle le champ est relié. Selon l’enregistre-
plusieurs champs dans le modifieur. Pour plus de
détails, consultez l’aide en ligne. ment en cours, le contenu de la rubrique reliée
Les champs disponibles sous l’éditeur de pages de 1.1 Créer un nouveau champ sera affiché dans le champ.
WEBDEV sont les suivants : 2.1 Affichage des caractéristiques La liaison peut être monofichier ou multifichier.
Pour créer un champ :
• Libellé, • Planning, Pour afficher la fenêtre de description d’un champ : Onglet Contenu
1. Sélectionnez le type de champ à créer grâce à
• Zone de texte, • Calendrier, l’icône correspondante dans le volet "Création" du • soit double-cliquez sur le champ. L’onglet "Contenu" est disponible uniquement pour
• Champ d’affichage • Graphe, menu de WEBDEV. • soit sélectionnez l’option "Description" du menu les champs des pages.
formaté, 2. La forme du nouveau champ apparaît sous le contextuel du champ (clic droit de la souris). L’onglet "Contenu" permet de définir :
• Code-Barres,
• Bouton, curseur de la souris. • soit sélectionnez le champ et utilisez le raccour- • soit le contenu initial du champ (pour les
• Jauge,
3. Cliquez dans la page à la future position de ci clavier Alt + Entrée. champs de saisie uniquement).
• Lien, • Cellule,
• Image, création du champ. Le champ est automatique- Remarques : • soit la source de données utilisée pour remplir le
• Popup, ment créé.
• Image clicable, • Il est possible d’afficher la fenêtre de description champ (pour les champs Liste, Combo et Table
• Tiroir, uniquement).
• Vignette, Remarque : D’autres modes de création sont dis- pour un ensemble de champs sélectionnés.
• Bandeau défilant,
ponibles. Pour plus de détails, consultez l’aide en Seules les caractéristiques communes aux diffé- Onglet Note/Aide
• Page cornée, • Onglet, rents champs sélectionnés seront affichées.
ligne. L’onglet "Note/Aide" permet de :
• Vidéo, • Champ Page interne, • Plusieurs fenêtres de description peuvent être
• Web Caméra, • Champ Modèle de 1.2 Créer un champ associé à une rubrique • décrire le fonctionnement détaillé du champ.
affichées simultanément. Chaque fenêtre de
• Champ de saisie, champs, Ces informations seront imprimées dans les
Mis à part les types de champs suivants, tous les description affiche alors les caractéristiques
dossiers de programmation (dossier du projet,
• Combo, • Superchamp, champs d’une page peuvent être associés à une d’un ou de plusieurs champs.
dossier de la page, ...).
• Liste, • Tableau HTML, rubrique d’un fichier de données : 2.2 Caractéristiques par onglet • configurer tous les types d’aides associés au
• Notation, • Menu, • Bouton, • Champ Flash, champ. Un champ peut avoir :
Ce paragraphe présente rapidement les différentes
• Captcha, • Réglette, • Onglet, • Réglette, catégories de caractéristiques affichées par onglet. • Une bulle d’aide, affichée lors du survol du
• Sélecteur, • Plan du site, • Ligne, • Cellule et tableau Pour plus de détails, consultez l’aide en ligne. champ.
• Interrupteur, • Chemin de navigation, • Champ HTML, HTML, • Un message d’aide, affiché dans la barre de
Onglet Général message lors de l’entrée dans le champ.
• Potentiomètre, • HTML, • Champ Applet Java, • Plan du site.
L’onglet "Général" permet de spécifier le nom du
• Zone répétée, • IFrame, • Champ "Composant champ et toutes les caractéristiques d’affichage du Onglet Avancé
• Zone répétée linéaire, • Flash, Web", champ (libellé, masque de saisie, ...). L’onglet "Avancé" permet de saisir le code HTML
• Zone répétée Galerie • Flex, généré avant et après le champ.
Pour créer un champ associé à une rubrique (ou Onglet UI
d’images, • Silverlight, Onglet Style
récupérer une rubrique), plusieurs méthodes sont L’onglet "UI" permet de définir les différents para-
• Table, • Applet Java, disponibles : L’onglet "Style" permet de définir le style des diffé-
mètres de l’interface du champ :
• Table hiérarchique, • Ligne, • Drag and Drop depuis le volet "Analyse". rents éléments du champ. Cet écran permet de :
• Etat initial du champ à l’ouverture de la page,
• Arbre, • "Composant Web". • Utilisation de l’onglet "Fichier" de la fenêtre de • Modifier l’aspect d’un champ : il suffit alors de
• Visibilité du champ,
• Tableau de bord, • Disposition. description du champ. sélectionner l’élément du champ à modifier, puis
• Taille du champ,
• Agenda, ses caractéristiques de style. Seul l’aspect du
• Ancrage, ... champ en cours est modifié.
Onglet Détail • Créer ou modifier un style.
L’onglet "Détail" permet de définir les différents • Choisir un style.
paramètres du champ :
• paramètres de saisie,

3 Manipuler les champs sous l’éditeur 4.2 Grille magnétique Lors de l’alignement personnalisé, il est possible
de définir :
La grille magnétique permet de placer des re-
pères (verticaux et horizontaux) dans la page. Les • l’alignement horizontal ou vertical : les champs
3.1 Les poignées des champs • Les poignées grises indiquent le premier champ champs créés viennent se placer contre ces re- peuvent être alignés à gauche en fonction du
sélectionné lors d’une sélection multiple. Ce pères, comme si les champs et les repères étaient début du champ ou du début de la zone de
Lorsqu’un champ vient d’être créé ou lorsqu’il est saisie. Ils peuvent aussi être alignés à droite, en
champ sera le champ de référence. magnétisés. La grille magnétique permet ainsi
sélectionné, il s’affiche avec des poignées. Les poi- fonction de la fin du champ, ou de la fin de la
gnées permettent de : d’aligner les champs selon les repères.
3.2 Manipulations disponibles zone de saisie.
• visualiser la taille d’un champ, 4.3 Correcteur d’interface en temps réel • l’espacement uniforme : l’espacement entre
L’éditeur de pages permet de :
• modifier la taille d’un champ. les champs est adapté pour être le même entre
• Sélectionner un ou plusieurs champs (par Lors du déplacement d’un champ dans une page,
Les couleurs des poignées permettent de connaître chaque champ (horizontalement ou verticale-
exemple à l’aide du lasso). le correcteur d’interface en temps réel affiche auto-
les actions réalisables : ment).
• Regrouper des champs sélectionnés. matiquement des guides. Ces guides sont magnéti-
• Les poignées noires permettent de visualiser et sés et permettent d’aligner le champ déplacé avec • la taille : la taille des champs sélectionnés est
de redimensionner un champ. • Déplacer un champ. automatiquement adaptée pour obtenir des
les champs présents dans la page.
• Les poignées blanches permettent uniquement • Modifier le libellé d’un champ. champs de même hauteur et/ou de même
de visualiser un champ. Par exemple, lors de • Afficher une bulle d’aide avancée lors du survol 4.4 Correcteur d’interface avancé largeur.
la sélection de plusieurs champs, les poignées d’un champ. Cette bulle d’aide contient : le nom Le correcteur d’interface avancé est un outil per- • le champ de référence : pour l’alignement et la
blanches indiquent qu’il est impossible de modi- du champ, sa position, sa taille, son état initial mettant d’harmoniser la disposition des champs taille des champs, le champ de référence est au
fier la taille des champs sélectionnés. (si le champ est invisible). dans les différentes pages d’un site. choix :
Ce type de poignées est aussi affiché lorsqu’une Le correcteur d’interface avancé propose pour la • le premier champ sélectionné,
page est en lecture seulement pour le déve- page en cours ou uniquement pour les champs • le dernier champ sélectionné,
loppeur : les champs ne peuvent pas être modi- sélectionnés, d’appliquer des règles de présen- • le plus grand champ sélectionné,
fiés. tation d’interface issues du standard Windows : • le champ situé le plus en haut à gauche des
alignement des champs, normalisation de la taille champs sélectionnés.
des boutons, ...
4 Alignement des champs 4.6 Le zoom paramétrable
4.5 Les options d’alignement
Il est possible de spécifier un facteur de zoom pour
L’alignement des champs permet d’obtenir des in- Afficher les règles Pour aligner plusieurs champs, WEBDEV met à réduire ou agrandir l’affichage de la page en cours.
terfaces "professionnelles" et harmonieuses. Pour Pour afficher les règles, sous le volet "Affichage", votre disposition :
vous aider à concevoir des interfaces standard, Pour spécifier un facteur de zoom, plusieurs possi-
dans le groupe "Aide à l’édition", cochez "Règles". • soit un alignement prédéfini (disponible bilités :
WEBDEV vous proposent les outils suivants : Deux types de guides peuvent alors être utilisés : sous le volet "Alignement", ou sous le volet
• les règles. • sous le volet "Affichage", dans le groupe "Aide à
• les guides, permettant d’aligner et de disposer "Modification", dans le groupe "Alignement"). l’édition", spécifiez le facteur de zoom voulu.
• la grille. les champs à l’intérieur des pages. • soit un alignement personnalisé (disponible • saisissez directement le facteur de zoom dans la
• le correcteur d’interface en temps réel (proposé • les guides de bordure, permettant de détermi- sous le volet "Alignement", dans le groupe barre de message de l’éditeur (en bas à droite).
automatiquement lors d’un positionnement d’un ner une bordure de taille identique de chaque "Autres alignements"). L’alignement personna-
champ). côté de la page. lisé permet d’utiliser des propriétés spécifiques • appuyez sur la touche Ctrl et modifiez le facteur
d’alignement. de zoom avec la roulette de la souris tout en
• le correcteur d’interface avancé. Remarque : L’option "Guide visible" du menu maintenant la touche Ctrl enfoncée.
• les options d’alignement. contextuel des règles permet de visualiser la page
• le zoom paramétrable. avec ou sans ses guides. Visibles ou non, les
guides sont toujours actifs : un champ déplacé vers
4.1 Les règles un repère est automatiquement accolé à celui-ci.
Sous l’éditeur de pages, il est possible de faire ap- Manipuler les repères
paraître des règles d’alignement.
Les repères sont facilement manipulables à l’aide
Dans ces règles, des guides magnétiques sont de la souris dans l’éditeur. Lorsque la souris sur-
affichés : tout champ approché d’un guide est auto- vole un repère, le curseur se transforme en une
matiquement "attiré" par celui-ci. Ce magnétisme double flèche.
permet d’utiliser les guides pour faciliter le posi-
tionnement, l’alignement ou le redimensionnement
des champs de la page.

5 Options d’édition des champs dans une page Trois types d’ancrages sont à définir : • ancrage en hauteur : permet de définir le
• ancrage en position : permet de définir la po- comportement du champ en hauteur lors du
sition du champ lors du redimensionnement. redimensionnement. Le champ peut :
Ces options d’affichage permettent de personnali- • les options de sélection des champs. • conserver sa hauteur,
ser la manipulation des champs sous l’éditeur de Ces options d’affichage permettent de personnali- • s’adapter au contenu,
pages. ser la manipulation des champs sous l’éditeur de
• suivre le comportement du navigateur.
Les options d’édition permettent de paramétrer : fenêtres.
• les options d’affichage. Pour afficher ces options, sous le volet "Affichage",
• le magnétisme des champs. cliquez sur l’icône de regroupement du groupe
• les opérations de clic et de double-clic sur les "Options".
champs.
6 Ancrage des champs
Les pages d’un site WEBDEV peuvent être redimen- • la gestion de la largeur et/ou de la hauteur : ce
sionnables à l’exécution : le navigateur peut être paramètre permet de gérer le comportement du
redimensionné, le site peut être affiché sur des champ lors de son étirement. La largeur ou la • ancrage en largeur : permet de définir le
plateformes différentes (iPhone, PC, ...). Grâce au hauteur peut être adaptée au contenu du champ comportement du champ en largeur lors du
redimensionnement. Le champ peut : 4. Il est également possible de définir le compor-
mécanisme d’ancrage, la taille et la position des ou au navigateur. Il est également possible de tement du champ lorsque le contenu est plus
champs s’adaptent automatiquement lors d’un définir la taille minimale du champ. • conserver sa largeur,
grand que le champ. Il est possible :
redimensionnement de la page. Ces paramètres peuvent être configurés sous l’édi- • s’adapter au contenu,
• d’agrandir le champ et pousser les autres
teur de pages. • suivre le comportement du navigateur. champs de la page,
6.1 Ancrer un champ sous l’éditeur • tronquer le contenu,
• toujours activer un ascenseur,
Pour ancrer un champ :
• afficher un ascenseur uniquement en cas de
1. Sélectionnez un ou plusieurs champs à ancrer. dépassement.
2. Définissez l’ancrage du / des champs : 5. Validez. Si l’option "Ancrage" est activée (sous
• soit dans l’onglet "UI" de la fenêtre de descrip- le volet "Affichage", dans le groupe "Voir (tous les
tion du champ (option "Description" du menu champs)"), les signes d’ancrage apparaissent
contextuel). automatiquement dans le champ (flèches rouges).
• soit grâce à l’option "Ancrage" du menu Remarque : Pour gérer l’ancrage des champs, il est
contextuel (clic droit) du champ. également possible d’utiliser les tables de position-
3. Dans la fenêtre qui s’affiche, choisissez le type nement. Pour plus de détails, consultez l’aide en
La gestion de l’ancrage d’un champ est constituée
d’ancrage à utiliser. ligne.
de plusieurs paramètres :
• l’ancrage du champ : ce paramètre permet de
définir la modification à appliquer au champ en
fonction du changement de la taille de la page.
Le champ peut se déplacer vers la gauche ou
vers le bas, s’agrandir en largeur et/ou en hau-
teur.

Répéter un groupe de
Contenu
Les deux types
Contenu
champs : les zones répétées de code
Les champs Zone répétée permettent de répéter un ensemble de champs dans une
page Web. Lors de cette répétition, les champs de la zone répétée peuvent afficher Code serveur ou code navigateur ?
des informations différentes dans chaque occurrence. Il est ainsi possible d’afficher à
chaque répétition des enregistrements d’une base de données. Deux sortes d’actions peuvent être programmées dans un site WEBDEV :
Poste de Poste
l’internaute Serveur
1 2
Actions pouvant être
effectuées en local Actions nécessitant un
Création de la zone répétée sous
(sur le poste de retour au poste serveur
l’éditeur de WEBDEV.
l’internaute) (pages Session ou AWP)
vérification simple d’une saisie, ... lecture d’informations dans la base de

données, calculs / traitements par
programmation, ...
Pour gérer ces deux sortes d’actions, l’éditeur de code de WEBDEV différencie deux
types de code :
• Code Serveur (code Jaune ou Rose sous l’éditeur de code) : Ce code est écrit en
WLangage (code jaune) ou en PHP (code rose, disponible uniquement dans les pages
PHP). Ce code est exécuté sur le serveur.
Ce code est disponible uniquement dans les pages dynamiques.
• Code Navigateur (code Vert ou Bleu) : Ce code est écrit en WLangage (code vert) ou
Affichage de la zone répétée en Javascript (code bleu).
sous le navigateur. A l’enregistrement de la page, ce code est automatiquement traduit en Javascript
Pour chaque champ de la zone répétée, plusieurs caractéristiques peuvent être modi- et intégré aux pages HTML WEBDEV. Ce code est exécuté en local (sur le poste de
fiées lors de la répétition : libellé, couleur du texte, ... l’internaute) et ne nécessite pas d’action du serveur.
Les répétitions peuvent être réalisées :
• sur une colonne,
• sur plusieurs colonnes. Dans ce cas, on parle de "Zone répétée horizontale".
Lors de la création d’un champ Zone répétée, il est possible de lier le champ directe-
ment à un fichier de données ou à une requête. Les attributs du champ Zone répétée
sont automatiquement définis. Aucune programmation n’est nécessaire.

Code navigateur : code WLangage ou code Javascript ? Site dynamique en PHP : Code serveur : code WLangage ou code PHP ?
Les codes exécutés sur le poste de l’internaute (sur le navigateur) sont représentés sous Les codes exécutés sur le poste serveur sont représentés sous l’éditeur de code par un
l’éditeur de code par un bandeau vert ou bleu. bandeau Jaune ou Rose.
• bandeau vert = WLangage : le sigle WL précède l’intitulé du code.

• bandeau bleu = Javascript : le sigle JS précède l’intitulé du code.
Pour passer d’un code vert (WLangage) à un code bleu (Javascript), il suffit de cliquer • bandeau Jaune = WLangage : le sigle WL précède l’intitulé du code.
sur le sigle WL précédant l’intitulé du code (ou inversement en cliquant sur JS). A l’enre- • bandeau Rose = PHP : le sigle PHP précède l’intitulé du code.
gistrement de la page, le code WLangage est automatiquement converti en Javascript.
Pour passer d’un code jaune (WLangage) à un code rose (PHP), il suffit de cliquer sur
Nous vous conseillons de développer en WLangage. le sigle WL précédant l’intitulé du code (ou inversement en cliquant sur PHP). Lors de
l’enregistrement de la page PHP, le code WLangage est automatiquement converti en
code PHP.
Evénements supplémentaires
Le lien "Ajouter d’autres événements" présent dans la fenêtre de code permet de gérer Nous vous conseillons de développer en WLangage.
des événements supplémentaires à ceux proposés par défaut. Il suffit de cliquer sur le
lien "Ajouter d’autres événements à xxx" situé à la fin de la fenêtre de code : la liste des
événements supplémentaires disponibles s’affiche.
Il suffit de sélectionner les événements voulus pour les ajouter aux codes affichés par
l’éditeur de code.
Exemples d’événements supplémentaires : double-clic, touche enfoncée, touche pres-
sée, touche relâchée, bouton enfoncé, souris déplacée, ...
Rappel : Le code navigateur est disponible dans les pages dynamiques et statiques.

Le WLangage : un langage
Contenu
Ordre d’exécution des
Contenu
simple et très puissant codes des boutons / liens
Le langage intégré de WEBDEV est le WLangage. Ce langage permet de programmer Deux codes de clic sont associés aux boutons / liens :
simplement tous les traitements web voulus sans avoir à connaître le HTML, le Javas- • un code de clic navigateur, saisi en WLangage (ou en Javascript) sous l’éditeur de
cript ou le PHP. code. Ce code est intégré à la page HTML et sera exécuté sur le poste de l’internaute.
Disponible en français et en anglais, le WLangage est composé d’ordres simples, • un code de clic serveur, saisi en WLangage (uniquement dans les pages dyna-
proches du langage courant. Le français permet une programmation intuitive. miques). Ce code sera exécuté sur le serveur.
Voici un tout petit exemple illustrant la puissance du WLangage : la vérification de la
saisie d’une adresse :
En WLangage, quelques lignes suffisent :
SI SansEspace(ADRESSE) = "" ALORS
Erreur("Veuillez indiquer votre adresse")
RepriseSaisie(ADRESSE)
FIN
En Javascript, voici le traitement équivalent :

<SCRIPT LANGUAGE=Javascript>
function EXE_SansEspace( szChaine , nPartie )
{
var nPremier = 0; Le tableau ci-après présente les différents codes exécutés (selon le type de bouton /
var nDernier = szChaine.length-1; lien choisi) et l’action associée.
if (nPartie & 1) while (szChaine.charAt(nPremier)==" ") nPremier++;
if (nPartie & 2) while (szChaine.charAt(nDernier)==" ") nDernier--; L’aspect du bouton / lien et sa destination n’influent pas sur l’ordre des codes exécutés.
return szChaine.substring(nPremier,nDernier+1);
}
// Clic (onclick) de BOUTON_OK Astuce : Pour comprendre et mémoriser dans quel ordre s’exécutent les codes serveur
function _VALIDCDE_BOUTON_OK_CLI() et navigateur, mettez-vous à la place de l’internaute : l’internaute clique sur le bouton
{ dans le navigateur donc c’est le clic navigateur qui est effectué en premier.
if((EXE_SansEspace(ADRESSE,3)==""))
{
alert("Veuillez indiquer votre adresse ");
return;
}
}
</SCRIPT>
Le code WLangage est plus facile à écrire, à comprendre, à maintenir. La fiabilité est
améliorée. Les évolutions sont plus simples.
Dans tous vos traitements, utilisez le WLangage.

Upload : Envoi de fichiers
Contenu
Action Ordre des codes exécutés Remarques vers le serveur
Envoyer Action associée : Mise à jour automatique
les valeurs Exécuter les codes navigateur uniquement. du contexte de page sur
le serveur (pages dyna- L’upload est l’opération qui consiste à envoyer sur le poste serveur un ou plusieurs fi-
au serveur Exécuter les codes serveur et navigateur.
miques Session ou AWP chiers provenant du poste de l’internaute.
(submit) Codes exécutés : uniquement).
1. Code de clic navigateur du champ.
2. Code navigateur du submit de la page (s’il existe). Un exemple simple : La création d’un contact dans un annuaire.
3. Envoi des valeurs présentes dans les champs de la L’internaute veut associer une photographie à la fiche du contact. Cette photo est pré-
page pour mettre à jour le contexte de la page sur le ser- sente sur le disque dur de son poste.
veur.
4. Code serveur du champ. Le champ de type UPLOAD permet à l’internaute de sélectionner l’image grâce à un
bouton "Parcourir".
Action associée : Afficher une page du site. Mise à jour automatique Lors de la validation de la fiche, le fichier image sélectionné est envoyé au serveur et
du contexte de page sur
Codes exécutés : le serveur (pages dyna- copié sur le disque dur du serveur (fonction UploadCopieFichier).
1. Code de clic navigateur du champ. miques Session ou AWP Lors de la consultation du contact, l’image apparaîtra dans la fiche.
2. Code navigateur du submit de la page (s’il existe). uniquement).
3. Envoi des valeurs présentes dans les champs de la
page pour mettre à jour le contexte de la page sur le ser- Affichage automatique
veur. de la page.
Lors de la validation de la page,
4. Code serveur du champ. le fichier “uploadé” est copié sur
5. Affichage de la page. le disque dur du serveur.
Réinitialisa- Action associée : Exécuter les codes navigateur unique-
tion de page ment.
(reset) Codes exécutés :
2. Affichage de la page initiale (page avec tous les champs
initialisés à vide ou à 0 et exécution du code d’initialisa- Serveur Web
tion de chacun des champs puis de la page).
Ne rien Action associée : Exécuter les codes navigateur unique- Poste serveur chez l’hébergeur
envoyer au ment. Sur le navigateur de l’internaute
serveur Codes exécutés :
Code navigateur du champ uniquement.
Note : L’aspect du bouton "Parcourir" est défini par le navigateur et ne peut générale-
Action associée : Exécuter les codes serveur et navigateur. ment pas être personnalisé.
Codes exécutés :
1. Code de clic navigateur du champ. Remarque : WEBDEV propose également un champ Upload évolué nécessitant un lec-
2. Code serveur du champ. teur Flash sur le poste de l’internaute. Ce champ permet de gérer une jauge de progres-
Action associée : Afficher une page du site. Affichage automatique
sion, la multisélection des fichiers, ...
de la page
Codes exécutés :
2. Code serveur du champ.
3. Affichage de la page.

Modèles de
Contenu
Les
Contenu
champs états
WEBDEV permet de créer des modèles de champs. Un modèle de champs est un en- Un état permet d’obtenir une vue personnalisée d’informations : données saisies dans
semble de champs, réutilisables dans plusieurs pages. la base de données, données présentes dans un fichier texte, données provenant d’un
Les modifications effectuées dans un modèle de champs sont automatiquement repor- champ Table, ...
tées sur toutes les pages utilisant ce modèle.
Un état est créé selon le principe suivant :
Un modèle de champs permet de :
• les données à imprimer sont issues d’une source de données (fichier de données
• regrouper un ensemble de champs dans un but précis. décrit dans une analyse, vue HFSQL, requête, zone mémoire ou fichier texte).
• rendre les champs indépendants de la page les accueillant. • l’état regroupe, trie et met en forme les données.
L’état créé peut ensuite être :
• imprimé sur l’imprimante du serveur (cas d’un site Intranet).
• affiché dans le navigateur de l’internaute (format HTML, PDF, ...).
• envoyé par mail à l’internaute (format PDF).
Poste de Poste Serveur

Définition d’un modèle de champs : le modèle est encadré d’un trait jaune sous l’éditeur. développement Modes d’impression
Sources de l’état
Imprimante
Champ Table
du serveur
Zone mémoire Fichiers XSL, PDF, ...
Etat
(Editeur
Requête d’états)
Fichiers Texte
Fichier texte Fichiers PCL

Utilisation du modèle dans une page : les éléments appartenant au modèle sont
entourés en bleu et identifiés par un carré jaune.
Pour utiliser un modèle de champs dans une page, créez un champ de type "Modèle de Données Fichiers HTML, XML, ...
champs".
réalisée dans le modèle. Variable WLangage
Les caractéristiques des éléments peuvent être désolidarisées du modèle. Par exemple, Navigateur
tage de champ. Dans ce cas, les éléments sont identifiés par un carré bleu.

Modèles
Contenu
Différents modes
Contenu
d’états d’impression
Pour imprimer des documents générés par votre site (factures, devis, ...), créez des états
Dans une société, bien souvent, les impressions utilisent un look et une mise en page grâce à l’éditeur d’états.
unifiés : date en haut à droite dans un format spécifique, bas de page avec heure d’im-
pression et nom du fichier, logo en haut à gauche, ... Pour imprimer ces états quelle que soit la configuration du poste de l’internaute, il est
Les modèles d’états permettent d’uniformiser simplement la mise en page de vos états. conseillé de proposer au moins deux modes d’impression :
• Impression au format HTML : L’état s’affiche dans une nouvelle page du site. L’inter-
naute n’a qu’à utiliser le bouton "Imprimer" du navigateur pour imprimer l’état. Aucun
logiciel spécifique n’est nécessaire.
• Impression au format PDF : Ce mode d’impression nécessite la présence d’Adobe
Reader (ou d’un logiciel équivalent) sur le poste de l’internaute. L’impression se fait
directement à partir de ce logiciel.
Définition d’un modèle d’états

sous l’éditeur d’états.
Etat sous l’éditeur d’états de WEBDEV
Utilisation du modèle dans différents états.

Les éléments appartenant au modèle sont identifiés par un carré jaune.
Les éléments du modèle surchargés sont identifiés par un carré bleu.
Pour créer un état utilisant un modèle, sélectionnez le modèle à utiliser lors de la créa-
tion de l’état.

réalisée dans le modèle.
Les caractéristiques des éléments peuvent être désolidarisées du modèle. Par exemple,
tage. Dans ce cas, les éléments sont identifiés par un carré bleu.
Impression en HTML Impression en PDF

Afficher et enchaîner les
Contenu Où afficher la page ?
pages L’affichage d’une page se fait dans une "destination" spécifique : page en cours, nou-
veau navigateur, ...
La destination peut être définie :
Un site est généralement constitué d’un ensemble de pages. Ces pages sont reliées
entre elles grâce à des boutons (ou des liens). Un clic sur un bouton entraîne l’affichage • soit sous l’éditeur de pages : aucune programmation n’est nécessaire.
d’une nouvelle page. • soit sous l’éditeur de code, dans un événement du champ Bouton (ou du champ
Pour afficher une nouvelle page, il faut se poser deux questions : Lien).
1. quelle page afficher ?
2. où afficher la page (nouveau navigateur, frame, ...) ? Plusieurs fonctions du WLangage permettent d’ouvrir une nouvelle page (ou frameset).
Les principales fonctions sont :
Quelle page afficher ? • PageAffiche (pour les pages),
• FramesetAffiche (pour les framesets),
La page à afficher peut être définie : • PopupAffiche (pour les pages popup),
• soit sous l’éditeur de pages (aucune programmation n’est nécessaire). • PageAfficheDialogue (pour un affichage modal des pages).
• soit sous l’éditeur de code dans un traitement du bouton (du lien, de l’image cliquable,
Sélection de la destination sous l’éditeur de pages (cas le plus courant)
...).
Dans un champ Bouton, pour définir la
Sélection de la page à afficher sous l’éditeur de pages (cas le plus courant) destination de la page à afficher :
Pour définir la page à afficher : • Affichez la description du champ Bou-
• Affichez la fenêtre de description du ton ou Lien (clic droit sur le champ,
champ (clic droit sur le champ, option option "Description").
"Description"). • Dans la liste des destinations, sélec-
• Dans le type de l’action, sélectionnez tionnez une destination prédéfinie ou
"Afficher une page du site". une frame (dans le cas d’un frameset).
• Sélectionnez ensuite la page à afficher.
Sélection de la page à afficher par programmation

Il est nécessaire de sélectionner la page à afficher par programmation lorsque : Remarque : Les destinations prédéfinies sont présentées dans les pages suivantes de
ce manuel.
• plusieurs pages peuvent être affichées (par exemple soit une page d’erreur si le mot
de passe n’est pas saisi, soit la page suivante du site). Sélection de la destination sous l’éditeur de code
• une action particulière doit être effectuée sur le serveur (calcul, lecture d’enregistre- Lorsque la destination dépend d’un choix de l’internaute, cette destination doit être
ment, ...). sélectionnée par programmation. Par exemple, si l’internaute n’indique pas son mot de
passe, une page d’erreur apparaît dans un nouveau navigateur; sinon, la page suivante
s’affiche dans le navigateur en cours.
La fonction ChangeDestination permet de modifier par programmation la destination
d’une action. Cette fonction doit être utilisée dans un code navigateur.

Choisir une destination Frame parent (_parent)
Lors du choix de la destination pour un champ Bouton, un champ Lien, un champ Image
cliquable, une option de menu, ... il est possible de choisir :
• une destination prédéfinie : quatre destinations prédéfinies sont proposées :
• Navigateur en cours (_top pour les habitués),
Clic sur
• Frame en cours (_self), le bouton
• Frame parent (_parent),
• Nouveau navigateur (_blank). Dans ce cas, le nouveau navigateur peut corres-
pondre à un nouvel onglet ou bien un nouveau navigateur avec des caractéristiques
Page initiale Nouvelle page affichée
spécifiques (présence de la barre de menu, de la barre message, ...). (imbrication de 2 framesets) dans la page contenant le
• une frame du frameset en cours. second frameset
Remarque : dans les schémas ci-dessous, la zone grisée représente la zone dans la-
quelle la page est affichée lors du clic sur le champ Bouton.
Nouveau navigateur (_blank)
Navigateur en cours (_top)
Clic sur Clic sur

le bouton le bouton

dans la totalité du Page initiale Nouvelle page affichée dans
navigateur une nouvelle fenêtre du
navigateur
Frame en cours (_self)
Clic sur
le bouton

dans la même frame

Réaliser un traitement sur
Contenu
Feuilles de styles : pour
Contenu
plusieurs pages successives simplifier la mise en page
Dans un site commercial, une prise de commande peut par exemple être réalisée sur Les feuilles de styles sont des modèles qui permettent d’uniformiser la présentation des
différentes pages : champs dans les pages.
• page 1 : Sélection des produits à commander.
Les feuilles de styles permettent de définir :
• page 2 : Visualisation du panier.
• la taille et la forme de vos textes, la police,
• page 3 : Validation de la commande et saisie des coordonnées du client.
• l’alignement de vos paragraphes, les retraits de paragraphe, ...
• le style de texte (gras ou italique), sa couleur, ...
Et bien plus encore.
Quand vous modifiez une caractéristique du style, tous les champs associés à ce style
sont mis à jour. Il est ainsi possible de modifier la charte graphique d’un site en effec-
tuant uniquement quelques modifications dans les styles utilisés.
Un exemple d’utilisation des feuilles de styles : augmenter la taille de 8 à 16 :
Page 1 : Sélection des produits
Page 2 : Visualisation du panier
Remarque : L’onglet "CSS personnalisé" permet de saisir directement du code CSS. Ce

code sera ensuite ajouté dans la feuille de styles.
Page 3 : Saisie des coordonnées du client
Dans ce cas, l’écriture des données dans les fichiers de données doit s’effectuer UNI-
QUEMENT dans le code du bouton de validation de la commande : tous les éléments de
la commande doivent être mémorisés jusqu’à la validation finale. N’écrivez pas dans les
fichiers de données en cours de traitement.
Remarque : Il est également possible d’utiliser une transaction, mais nous vous recom-
mandons de mémoriser les informations de la commande.

Site centré ou ancré
Contenu
Référencement
Contenu
en largeur ? d’un site
La mise en page est un élément fondamental dans la réalisation d’un site. Pour que votre site soit visité, les internautes doivent le trouver. Pour cela, votre site doit
être proposé lorsque l’internaute saisira les mots-clés caractérisant votre site dans un
Deux types de mise en page d’un site peuvent être utilisés : moteur de recherche.
• site centré :
Les pages sont centrées dans le navigateur. Si la résolution de l’internaute est supé-
Pour aider au référencement de votre site, WEBDEV propose :
rieure à la résolution optimale du site, des marges apparaissent de part et d’autre de
la page. Le contenu du site est centré. • un assistant de référencement. Cet assistant liste toutes les optimisations pouvant
être réalisées pour améliorer le référencement de votre site. Pour lancer l’assistant,
sous le volet "Projet", dans le groupe "Web", déroulez "Référencement" et sélection-
nez l’option "Optimiser le référencement".
• site ancré en largeur :

Le contenu de la page prend tout l’espace disponible dans le navigateur.
• la possibilité de saisir une description et des mots-clés sur chaque page de votre site.
Il est possible d’intégrer une page d’accueil à votre site lors du développement du pro-
jet, en créant une nouvelle page.
Remarque : le référencement est une technique dont les règles sont dictées par les
moteurs de recherche (Google, Bing, etc.). Ces règles ne sont pas toujours explicites et
Remarques : évoluent très vite. N’hésitez pas à consulter des ouvrages ou des sites spécialisés sur
• Le type de mise en page est défini grâce aux options d’ancrage de la page (option ce sujet.
"Ancrage" du menu contextuel de la page).
• Le type de mise en page (centré ou ancré en largeur) configuré dans un modèle de
pages sera automatiquement utilisé par les pages associées à ce modèle.

Référencement d’un site en pratique 3 Référencer et saisir les mots-clés d’une page
Pour référencer une page statique ou AWP de votre 4. Dans l’onglet "Mots-clés" de la fenêtre de
site : référencement, saisissez les mots-clés associés
1 Principes du référencement 1. Affichez la fenêtre de description de la page. à la page. Ces mots-clés (ou expressions) seront
2. Dans l’onglet "Détail", une zone spécifique les mots-clés pour lesquels la page sera référen-
Pour que votre site WEBDEV soit visité, il faut que 1.2 Les différents outils à votre disposition permet de gérer le référencement de la page. cée : si l’internaute saisit un de ces mots-clés, le
les internautes puissent le trouver. Pour cela, votre Dans cette zone, cliquez sur le bouton "Editer les moteur de recherche proposera la page corres-
Pour vous aider, WEBDEV propose : pondante. La saisie des mots-clés se fait de la
site doit être proposé lorsque l’internaute saisira expressions et les mots-clés".
les mots-clés caractérisant votre site dans un mo- • Un référencement de chaque page statique et manière suivante : saisissez le premier mot-clé
AWP : pour chaque page, il est possible de défi- 3. Dans l’onglet "Description" de la fenêtre de ré- puis appuyez sur la touche Entrée pour saisir le
teur de recherche. férencement, saisissez la description de la page.
nir une description et un ensemble de mots-clés. suivant.
Cette description apparaît le plus souvent dans
1.1 Optimiser le référencement d’un site Ces mots-clés permettront aux internautes d’ac-
l’affichage du résultat d’une recherche effectuée
Quelques conseils :
WEBDEV céder directement à la page. Il est également
avec un moteur de recherche. Quelques conseils : • Les trois premiers mots-clés sont les plus
possible de ne pas référencer une page. importants. Utilisez des mots-clés usuels et
Pour optimiser le référencement de vos pages dans • Utilisez des phrases courtes, limitez le
les moteurs de recherche, il est conseillé d’utiliser • Un assistant d’aide au référencement, indiquant discriminants.
pour chaque page les améliorations pouvant nombre de mots (200 caractères maximum)
des pages AWP. • Les mots-clés ne doivent pas être répétés.
être effectuées pour optimiser le référencement. • Cette description doit donner aux internautes
Si vous devez référencer un site en mode Session, envie d’afficher la page. • Utilisez des variantes (singulier/pluriel, mas-
utilisez : • La possibilité d’intégrer ou d’utiliser une page culin/féminin, nom/verbe ...).
spécifique en tant que page d’accueil. Cette Remarque : Cette description peut être
• une page d’accueil. modifiée dynamiquement grâce à la propriété Remarque : Ces mots-clés peuvent être
solution permet par exemple de référencer les modifiés dynamiquement grâce à la propriété
• une partie du site en statique. Le site statique pages en mode Session, en associant des mots- Description.
MotsClés.
permettra d’effectuer le référencement et de clés à la page d’accueil. Cette page d’accueil
lancer le site en mode Session. 5. Validez la fenêtre de référencement, puis la
contient tous les mots-clés qui permettront aux fenêtre de description de la page.
• une partie du site en mode AWP. Le site AWP internautes de trouver votre site.
permettra d’effectuer le référencement et de
lancer le site en mode Session. 4 Utiliser l’assistant d’aide au référencement
Remarque : En AWP, pour passer des paramètres
entre vos pages, préférez le passage de para-
mètres par l’URL à l’utilisation des contextes AWP. Pour vous aider à optimiser le référencement de Pour lancer l’assistant d’aide au référencement
En effet, le contenu de l’URL est référençable, alors vos sites et de vos pages, WEBDEV propose un as- sur une page :
que les contextes AWP ne le sont pas. sistant d’aide au référencement. Cet assistant peut 1. Affichez la page voulue dans l’éditeur.
être utilisé sur une page spécifique, ou sur toutes 2. Sous le volet "Page", dans le groupe
les pages de votre projet. Cet assistant analyse la "Référencement", cliquez sur "Optimiser".
2 Référencer ou non une page statique ou AWP d’un site composition des pages du site et indique les amé-
3. L’assistant de référencement se lance. Vous
liorations à apporter pour maximiser le positionne-
ment des pages dans les moteurs de recherche. pouvez double-cliquer directement sur une pro-
Pour référencer une page statique ou AWP de votre 3. Il est possible de : position pour effectuer l’optimisation correspon-
Quelques exemples d’optimisations détectées par dante. Le bouton "Rafraîchir" permet de mettre la
site : • Ne pas référencer la page en cours. l’assistant :
1. Affichez la fenêtre de description de la page. liste des propositions à jour.
• Référencer la page en cours, en lui associant • Le titre de la page doit être renseigné.
2. Dans l’onglet "Détail", une zone spécifique per- des expressions et des mots-clés (bouton • Trois mots-clés doivent être spécifiés au mini- Pour lancer l’assistant d’aide au référencement
met de gérer le référencement de la page. "Editer les expressions et les mots-clés"). mum dans la page. sur l’ensemble des pages du site :
• La description de la page doit être renseignée. 1. Sous le volet "Projet", dans le groupe "Web", dé-
roulez "Référencement" et sélectionnez "Optimiser
• Le texte alternatif doit être saisi pour tous les le référencement".
champs le proposant (si possible en utilisant les
mots-clés définis pour la page) ... 2. L’assistant de référencement se lance. Vous
pouvez double-cliquer directement sur une pro-
position pour effectuer l’optimisation correspon-
dante. Le bouton "Rafraîchir" permet de mettre la
liste des propositions à jour. Les résultats peuvent
être triés par page ou par type de conseils.

5 Faire connaître son site auprès des moteurs de recherche PARTIE 3
Le référencement d’un site se fait directement sur • les moteurs de recherche de type "Annuaire" :
les moteurs de recherche. Ces moteurs de recherche référencent des
Remarque : Le référencement d’un site est parfois sites au préalable testés par des personnes
payant. physiques.
Comment se faire référencer ?
Il existe deux types de moteurs de recherche : Un lien de type "Référencer votre site" est très
• les moteurs de recherche de type souvent disponible sur ce type de moteur de
"Automatique" : recherche.
Ces moteurs de recherche reposent sur des pro- La procédure de référencement est générale-
grammes automatiques d’analyse de contenu. ment la suivante :
Comment se faire référencer ? 1. Choix d’une catégorie d’appartenance du site
Un lien de type "Référencer votre site" est très (loisirs, culture, ...).
souvent disponible sur ce type de moteur de 2. Répondre à un questionnaire sur le site à
recherche. Il suffit alors de spécifier l’adresse référencer : adresse Internet du site, email du
Environnement de
du site et l’email du Webmaster. Le site sera WebMaster, description du site, ...
alors automatiquement analysé (analyse basée
sur les mots-clés et le contenu de votre site) et 3. Après l’envoi du questionnaire, votre site sera
référencé. évalué par une personne de la société de gestion
de l’annuaire. Cette personne référencera votre
site si son contenu lui semble intéressant.
développement
84 Partie 2 : Développement d’un site

Les éditeurs de
Contenu
WEBDEV
Pour manipuler un projet, WEBDEV propose de nombreux éditeurs intégrés :
• éditeur de projet.
• éditeur d’analyses.
• éditeur de modèles UML.
• éditeur de requêtes.
• éditeur de pages.
• éditeur d’états.
• ...
Ces éditeurs permettent de manipuler facilement les différents éléments du projet.
Editeur d’états
Editeur d’analyses Editeur de pages
Editeur de projet Editeur de requêtes
86 Partie 3 : Environnement de développement Partie 3 : Environnement de développement 87

Des éditeurs conviviaux en pratique L’éditeur d’UML permet principalement :
• de décrire directement un ou plusieurs dia-
l’ergonomie de vos pages et de rendre vos sites
conviviaux.
grammes UML. Voici quelques caractéristiques de l’éditeur de
• de construire un modèle UML par rétro-analyse pages :
1 Introduction de votre projet. • Editeur WYSIWYG ("What You See Is What You
Pour plus de détails sur la création d’un modèle Get"). Vous visualisez directement votre page
UML, consultez le chapitre "Le modèle UML", page telle qu’elle apparaîtra à l’utilisateur.
WEBDEV est architecturé autour d’éditeurs, adap- • éditeur d’états. 124. • Création et description des pages et de leurs
tés à chacun des besoins du développeur, unifiés • éditeur de code source, débogueur et compila- champs.
dans un environnement unique : teur. Voici quelques caractéristiques de l’éditeur d’UML :
• "Drag and Drop" permettant de copier, de coller
• éditeur de projets. • éditeur d’image. • Création et description de diagrammes UML. ou de déplacer des champs d’une page à une
• éditeur d’analyses. Ces différents éditeurs vont permettre de créer les • Mise en forme automatique des liaisons. autre.
• éditeur de modèles UML. différents éléments (pages, états, base de don- • Génération automatique d’une classe ou d’un • Modèles de pages et styles de champ prédéfinis.
• éditeur de requêtes. nées, programmes, …) manipulés par le site. ensemble de classes à partir d’un diagramme • Présence de plusieurs catalogues d’icônes per-
• éditeur de pages. de classes. mettant d’associer des images aux champs.
• Zoom sur l’éditeur d’UML. • Correcteur d’interface en temps réel permettant
• Insertion de commentaires dans un modèle de simplifier le positionnement des champs.
2 Les différents éditeurs UML. • Saisie des libellés des champs directement
• Interaction des différents volets avec les diffé- dans la zone de travail de l’éditeur.
rents éléments du modèle UML. • Gestion de l’aide contextuelle dans les pages.
2.1 L’éditeur de projets • Utilisation d’une analyse au format WINDEV 5.5.
2.4 Editeur de requêtes • Zoom sur l’éditeur de pages.
• Mise en forme automatique des liaisons de
L’éditeur de projet permet de gérer le projet à l’analyse. • Interaction des différents volets avec les diffé-
L’éditeur de requêtes permet de créer automati-
l’aide d’un tableau de bord complet. rents éléments de l’éditeur.
• Informations sur les liaisons par des bulles quement des requêtes sur les fichiers de données.
Différents "Widgets" permettent de connaître :
d’aide. La programmation est ainsi simplifiée : pages, 2.6 Editeur d’états
• le nombre d’éléments du projet, tables, combos, états, ... pourront s’appuyer sur
• Récupération simplifiée de la description d’une
• les incidents enregistrés, les requêtes. L’éditeur d’états permet de créer très simplement
base de données externe (SQL Server, Oracle,
• les tâches à réaliser, Un assistant permet de créer une requête : il suffit des états à imprimer.
AS/400, ...).
• les éléments extraits, de choisir les rubriques à intégrer et de saisir les Vous trouverez toutes les informations concernant
• Description indépendante des fichiers de don-
conditions de sélection à l’aide de l’assistant. La la création d’états imprimés dans le "Guide de l’édi-
• ... nées.
requête est automatiquement générée (en code teur d’états et de requêtes".
• Cryptage des fichiers de données.
2.2 Editeur d’analyses SQL optimisé) et peut être testée immédiatement. Voici quelques caractéristiques de l’éditeur d’états :
• Modification automatique des fichiers de don-
L’éditeur d’analyses permet de décrire les caracté- • Editeur WYSIWYG ("What You See Is What You
nées en cas de modification de la structure des Voici quelques caractéristiques de l’éditeur de
ristiques et la structure des fichiers de données. Get"). Vous visualisez directement les états tels
fichiers. requêtes : qu’ils seront à l’impression.
L’éditeur d’analyses supporte la méthode Merise • Vérification de l’intégrité référentielle. • Editeur WYSIWYG ("What You See Is What You
(MCD et MLD). • Création simplifiée d’un état sans une seule
• Génération automatique de l’analyse. Get"). Vous visualisez directement la requête et ligne de code.
L’éditeur d’analyses permet principalement deux • Zoom sur l’éditeur d’analyses. son résultat.
types de descriptions d’une base de données : • "Drag and Drop" permettant de copier, de coller
• Interaction des différents volets avec les diffé- • Création simplifiée d’une requête à l’aide d’un ou de déplacer des champs d’un état à un autre.
• description directe de l’analyse liée au projet rents éléments de l’analyse. assistant.
(appelée aussi Modèle Logique des Données • Gabarits d’états et styles de champs prédéfinis.
• Génération automatique du code SQL de
(MLD)) 2.3 Editeur UML chaque requête. • Correcteur d’interface en temps réel permettant
• description du Modèle Conceptuel des Données de simplifier le positionnement des champs.
Le langage UML est un langage graphique permet- • Possibilité de tester immédiatement les
(MCD) puis génération automatiquement de requêtes. • Utilisation d’un formulaire en fond d’un état.
tant de :
l’analyse. • Zoom sur l’éditeur de requêtes. • Création d’étiquettes multi-colonnes.
• représenter le système d’information étudié
Voici quelques caractéristiques de l’éditeur d’ana- sous forme d’objets. • Edition d’un état au format HTML (pour le
lyses : 2.5 Editeurs de pages publier sur Internet par exemple), ou au format
• générer la structure objet du site (squelette de
• Editeur WYSIWYG ("What You See Is What You RTF (pour l’éditer avec un traitement de texte
l’application sous forme de classes objet) corres- L’éditeur de pages permet de décrire les caractéris-
Get"). Vous visualisez directement tous les fi- par exemple).
pondant au système d’information étudié. tiques de l’interface utilisateur de votre projet.
chiers de données et les liaisons de votre projet. • Zoom sur l’éditeur d’états.
De nombreux modèles, ambiances et types de
• Création et description des fichiers de données pages sont proposés. Ils permettent d’améliorer
et de leurs rubriques.

2.7 Editeur de code • Gestion de l’historique des modifications du
Tableau de bord du
Contenu
L’éditeur de code permet de saisir tous les traite-
ments en WLangage (le langage de programmation
intégré à WEBDEV). Il permet par exemple de saisir
code avec possibilité de revenir en arrière.
• Ouverture de plusieurs fenêtres de code (pour
effectuer des comparaisons de code par
projet
le code source : exemple).
• des champs, • Zoom sur l’éditeur de code. Le tableau de bord du projet est un élément indispensable à la gestion de projets
• des pages, • Interaction des différents volets avec les diffé- WEBDEV. Le tableau de bord permet d’avoir une vision globale et synthétique de l’état
rents éléments de l’éditeur. d’un projet.
• des états,
• des procédures locales et globales, 2.8 Editeur d’images
Le tableau de bord du projet est composé de différents indicateurs sur le contenu du
• des classes et des méthodes, ... L’éditeur d’images permet d’éditer les images et projet :
Voici quelques caractéristiques de l’éditeur de icônes du projet et de ses éléments.
code : Voici quelques caractéristiques de l’éditeur
• statistiques sur le projet,
• Mise en forme automatique des informations d’images : • incidents,
saisies. • Recadrage. • tâches,
• Complétion automatique. • Redimensionnement. • état des tests automatiques,
• Glossaire sur les fonctions. • Symétrie, rotation.
• Détection immédiate des erreurs de frappe et • résultat des différents audits,
• Gestion des textes.
aide à la correction.
• Gestion des calques.
• liste des éléments extraits du GDS (Gestionnaire de Sources),
• Compilation incrémentale. • résultat des plans d’actions (intégration continue), ...
• Accès aux images du catalogue d’images.
• Visualisation des différents traitements d’une
• Conservation de la transparence.
fenêtre, d’un champ ou d’un état du projet.
• Insertion de traitements spécifiques à l’utilisa-
tion de la souris ou du clavier.
Les différents éléments de ce tableau de bord sont présentés sous forme de Widgets.
Ces Widgets peuvent être paramétrés, déplacés, activés, désactivés, ... Il est possible
d’ajouter de nouveaux indicateurs.
La configuration du tableau de bord est sauvegardée par utilisateur. La configuration du
tableau de bord est la même pour tous les projets d’un même utilisateur.
WEBDEV, WINDEV, WINDEV
Contenu
Configuration de
Contenu
Mobile : 100% compatibles projet
Les projets créés actuellement sont souvent multi-cibles. Les configurations de projet permettent de créer à partir d’un même projet plusieurs
Par exemple, pour un ERP destiné à fonctionner sous Windows, il est fort probable qu’en "cibles" différentes.
plus de l’application qui sera le socle de la solution applicative, des commerciaux seront
équipés de PDA ou de Smartphones, les magasiniers utiliseront des terminaux mobiles Vous pouvez ainsi créer à partir d’un même projet par exemple :
pour la gestion des stocks et qu’un site Intranet et un site Internet seront mis en place. • des sites qui ne contiennent pas les mêmes éléments, qui ont des noms différents, …
• différents composants,
Tous les éléments, hormis l’UI (pages et fenêtres) sont 100% compatibles et parta- • un Webservice.
geables entre des projets WINDEV, WEBDEV et WINDEV Mobile.
A tout moment, vous pouvez travailler sur une configuration spécifique : les éléments
Il est ainsi possible de partager des collections de procédures ou des classes par n’appartenant pas à cette configuration apparaissent grisés sous l’éditeur de projet.
exemple entre plusieurs projets.
Quel que soit le produit avec lequel un projet a été créé, il est possible de l’ouvrir avec
les autres produits.
Projet WEBDEV
Lorsque vous ouvrez un projet dans un produit dif-
férent de celui qui a permis de le créer, un assis-
tant s’affiche, permettant de créer une configura-
tion de projet spécifique au produit utilisé.
Par exemple, si un projet WINDEV est ouvert avec

WEBDEV, vous pouvez créer une configuration de
projet nommée "Site", permettant de regrouper
tous les éléments nécessaires au site WEBDEV.
Dans les phases d’utilisation de l’environnement, Configurations du Projet

il est possible de visualiser depuis chaque environ-
nement les éléments de chaque cible. Un projet
sous WEBDEV affiche les vignettes des fenêtres
WINDEV et WINDEV Mobile par exemple. Cliquez
sur une fenêtre WINDEV depuis l’éditeur de projet
WEBDEV ouvre la fenêtre WINDEV (WINDEV doit Config 1. Config 2. Config 3. Config 4.
Site Bibliothèque Composant Site PHP
être installé sur le poste).
...
Il est possible de générer en une seule opération toutes les configurations d’un projet
(ou uniquement certaines) grâce à la génération multiple.

Génération
Contenu
Gestionnaire de sources
Contenu
multiple (GDS)
Les configurations de projets permettent de définir simplement les différentes "Cibles"
de votre projet. Vous pouvez ainsi définir pour un même projet plusieurs sites, plusieurs Présentation
bibliothèques ou plusieurs composants.
Pour simplifier vos développements en équipe, WEBDEV propose un gestionnaire de
Pour générer le résultat de chaque configuration, vous pouvez bien entendu sélection- sources. Ce gestionnaire de sources permet à plusieurs développeurs de travailler si-
ner une à une chaque configuration et générer l’élément correspondant. multanément sur le même projet et de partager aisément des éléments entre différents
projets.
Un autre moyen plus rapide existe : la génération multiple. Vous sélectionnez en une
seule opération les configurations à générer et le résultat est immédiat.
Réseau
(intranet)
ADSL
(internet)
Cloud
GDS Déconnecté
Il est possible de partager les éléments présents dans le GDS :

• via un réseau.
Pour lancer une génération multiple, sous le volet "Projet", dans le groupe "Génération", • via Internet.
déroulez "Générer la configuration" et sélectionnez "Génération multiple". • via le Cloud.
• en mode déconnecté. Dans ce cas, les éléments sur lesquels un travail spécifique
devra être effectué seront extraits du GDS par exemple lors de la connexion du por-
table au système général.

Fonctionnement du Gestionnaire de Sources
Partager un projet en pratique
Voici un exemple d’utilisation du Gestionnaire de Sources : Un développement informatique important néces- Pour partager un projet, vous pouvez utiliser le ges-
site la participation de plusieurs développeurs. tionnaire de sources.
Ces développeurs doivent travailler sur un projet
WEBDEV unique, en partageant les différentes res-
sources (requêtes, classes, ...) manipulées.
Poste Local 1
2 1 Le Gestionnaire de Sources
Projet A
Extraction 9h57 Projet A
Version 1 Version 1
1.1 Présentation 1.2 Principe d’utilisation
3 Modification
WEBDEV innove dans la gestion du travail en Installation
Projet A Réintégration 10h41 groupe avec le gestionnaire de sources (appelé
Projet A
Version 2 Version 2 également GDS).
4 Totalement intégré à l’environnement, le gestion-

naire de sources (GDS) permet :
Projet A
• un développement performant en équipe,
Poste Local 2
Version 3 • l’historique des modifications et des versions,
5 • l’automatisation de la sauvegarde des sources
des membres de l’équipe développement.
Projet A Extraction 14h28
Version 2 Base de sources Dimensionné pour des équipes de 1 à 100 déve- Tous les éléments du projet sont enregistrés dans
Poste Nomade
loppeurs, le GDS favorise et normalise sans la base de sources (sur le serveur). Cette opération
Extraction de la fenêtre Beta du est effectuée à la création du projet ou lors de l’im-
Projet A Version 1 à 9h13 contrainte les échanges entre développeurs (même
en développant seul, le GDS est utile car il contient portation d’un projet existant dans le Gestionnaire
Poste Nomade Poste Local 1 de Sources.
l’historique de vos applications).
1
Extraction de la fenêtre Alpha du Chaque développeur utilisant le Gestionnaire de
Projet A Version 1 à 9h57 Le GDS utilise une base de sources : procédures,
Réintégration de la fenêtre Alpha modifiée Sources récupère une copie du projet en local.
Projet A Extraction 9h57 dans le Projet A Version 2 à 10h41 classes, pages, états, composants, analyses, ...
Utilisation
Version 1 Cette base de sources peut être à votre choix :
Pour travailler sur un élément du projet (page,
6
Poste Local 2
Modification Extraction de la fenêtre Alpha du • en mode HFSQL Client/Serveur (installée sur
état, ...), le développeur doit extraire l’élément de
en clientèle Projet A Version 2 à 14h28 un serveur personnalisé, sur une plateforme
la base de sources, le modifier, puis le réintégrer.
Réintégration 18h32 PCSCloud ou via GDS Drive).
Projet A
Poste Nomade Si l’élément est déjà extrait, le développeur peut
Version 3
Réintégration de la fenêtre Beta modifiée • en mode HFSQL Classic (installée en local ou demander à la personne ayant extrait de réintégrer
7 dans le Projet A Version 3 à 18h32 dans un répertoire partagé).
Le GDS permet un fonctionnement connecté en
l’élément (par l’intermédiaire de la messagerie inté-
grée).
local et à distance, via Internet ou une liaison HTTP
ou HTTPS. Il est ainsi possible de travailler sur un
projet depuis une agence ou depuis un site client
Si un élément (fenêtre, état, ...) du projet est extrait, ce même élément ne pourra pas sans crainte de perte des modifications effectuées.
être extrait une seconde fois. Le GDS permet également un fonctionnement dé-
Après modification des éléments extraits, il est nécessaire de réintégrer ces éléments connecté (train, avion, ...).
pour que le projet de base prenne en compte ces modifications. En effet, la base de
sources conserve un historique de tous les éléments du projet depuis leur création.
A chaque réintégration d’un élément, le numéro de version du projet de base est incré-
menté de 1.

Pour profiter des modifications effectuées, les Conseils 3 Configurer le projet pour travailler avec le GDS
autres développeurs doivent synchroniser leur pro- Les sources de vos applications sont primordiales.
jet local avec le projet de référence (présent dans la Ces sources doivent être traitées avec l’attention
base de sources). Pour utiliser un projet existant avec le gestionnaire • une base de sources existante. Il suffit de sélec-
qu’elles méritent !
de sources, quelques manipulations sont néces- tionner la base de sources voulue.
Voici donc une série de conseils qui s’appliquent au saires. 4. Validez l’assistant. Le projet est ajouté au GDS.
serveur qui hébergera vos sources :
• Utilisez un serveur dédié avec un disque de 3.1 Ajouter un projet dans le GDS 3.2 Partage de ressources
taille confortable (au moins 200 Go) Pour ajouter un projet local dans le GDS : Vous avez importé dans le gestionnaire de sources
• Utilisez plutôt le Gestionnaire de Sources (GDS) 1. Ouvrez votre projet sous WEBDEV. un premier projet. Ce projet contient des éléments
en mode Client/Serveur. partagés avec d’autres projets (classes, pages, pro-
2. Sous le volet "GDS", dans le groupe "Ajouter le
• Les disques durs peuvent avoir des problèmes projet", cliquez sur "Ajouter le projet dans le GDS". cédures, feuilles de styles, ...).
physiques : utilisez si possible un système RAID I Le partage est une notion importante du GDS.
3. Dans l’assistant qui s’affiche, sélectionnez la
sur votre serveur (plusieurs disques stockant les Différentes méthodes sont disponibles pour effec-
base de sources à utiliser :
mêmes informations en double). tuer le partage. Pour plus de détails, consultez
• Une nouvelle base de sources. Dans ce cas,
• Protégez l’alimentation de votre serveur par un l’aide en ligne.
sélectionnez le type de bases de sources à créer
onduleur.
(solution "Clé en main" GDS Drive ou PCS Cloud,
• Faites des sauvegardes régulières de la base base de sources Client/Serveur ou locale). Selon
de sources (1 sauvegarde par semaine au mini- l’option choisie, indiquez les renseignements
mum) demandés.
• Placez le serveur dans une zone "sécurisée", en
utilisant un firewall.
4 Travailler avec le GDS
2 Créer une base de sources pour le GDS
2.1 Présentation •le nom et le mot de passe d’un administrateur 4.1 Options d’un projet concernant le GDS • Extraire/Réintégrer automatiquement le projet :
de la base de données HFSQL. Cette option permet une gestion automatique
Pour partager un projet grâce au gestionnaire de Plusieurs options permettent de configurer un pro-
du "fichier projet". Si cette option est cochée, le
sources, il est nécessaire de créer une base de • localement, dans un répertoire partagé sur le jet manipulé avec le Gestionnaire de Sources. Ces
fichier projet est extrait uniquement si l’action
sources. Cette base de sources doit être créée une réseau : tous les utilisateurs du GDS doivent options sont regroupées dans l’onglet "GDS" de la
réalisée le nécessite. Lorsque l’action sur le
seule fois sur un poste serveur. avoir tous les droits sur ce répertoire. La base description du projet (sous le volet "Projet", dans le
projet a été effectuée, le fichier projet est auto-
de sources sera au format HFSQL Classic. Il suf- groupe "Projet", cliquez sur "Description").
Le système d’exploitation et le système de fichiers matiquement réintégré.
fit de préciser le répertoire réseau où la base de • Proposer la récupération de la dernière version
sur lequel est installée la base de sources du GDS Cette option permet de ne plus avoir la gestion
sources doit être créée. des éléments à l’ouverture du projet :
doivent savoir gérer les fichiers de plus de 4 Go. "Maître / Invité" sur le projet. Il est également
Cette option permet lors de l’ouverture d’un possible d’activer cette option sous le volet
Il est possible de créer la base de sources : 2.2 Quand créer une base de sources ? projet présent dans le GDS, de proposer la récu-
• via la solution "clé en main" GDSDrive (solution "GDS", dans le groupe "Projet", en déroulant
La base de sources doit être créée une seule fois. pération de la dernière version des différents "Maître / Invité" et en sélectionnant l’option
conseillée). Dans ce cas, un serveur mutualisé WEBDEV permet de créer cette base de sources à éléments du projet.
est utilisé. Cette solution payante permet de sim- "Gérer automatiquement l’extraction du projet".
différents moments : Par défaut, la dernière version des éléments est
plifier toutes les manipulations d’installation du automatiquement récupérée. 4.2 Extraire un élément
serveur GDS. • lors de l’installation de WEBDEV.
• lors de la création d’un projet utilisant le GDS. • Proposer la réintégration des éléments à la fer-
• via la solution "clé en main" PCSCloud. Dans ce meture du projet : Les différents modes d’extraction
cas, un serveur dédié est utilisé. Cette solution • lors de l’importation d’un projet dans le Le GDS propose deux modes d’extraction des élé-
Cette option permet d’afficher lors de la fer-
payante permet de simplifier toutes les mani- Gestionnaire De Sources. ments du projet :
meture du projet la liste de tous les éléments
pulations d’installation du serveur GDS. Vous • directement dans l’administrateur du GDS. actuellement extraits, afin de réintégrer certains • le mode classique : si vous affichez un élément
utilisez une plateforme dimensionnée selon vos Lorsque la base de sources est créée, il est pos- ou tous ces éléments. du GDS non extrait, un panneau indique que cet
besoins. sible d’importer dans cette base de sources tous Par défaut, à la fermeture du projet, les élé- élément doit être extrait pour être modifié. Vous
• sur un serveur HFSQL Client/Serveur : la base de les projets WEBDEV à partager. ments extraits ne sont pas réintégrés. pouvez extraire immédiatement l’élément (bou-
sources sera au format HFSQL Client/Serveur. ton d’extraction présent dans le panneau).
Dans ce cas, il est nécessaire de préciser : 2.3 Sauvegardes
•le serveur, Il est conseillé de faire régulièrement des sauve-
•la base de données, gardes de la base de sources du GDS. Ces sauve-
•le port utilisé, gardes peuvent être effectuées grâce à l’adminis-
trateur du GDS.

• le mode automatique : si vous tentez de modi- • accéder à l’historique de l’élément dans la base Mode automatique Le mode automatique permet de ne plus avoir la
fier un élément du GDS non extrait, le GDS pro- de sources. Avec le mode automatique, le fichier projet est gestion "Maître/Invité" sur le projet.
pose automatiquement d’extraire cet élément. Il est possible de réintégrer les modifications effec- extrait uniquement si l’action réalisée le nécessite
Après la validation de l’extraction, l’élément tuées dans l’élément, tout en conservant l’élément (quel que soit l’utilisateur). Lorsque l’action sur le
peut être modifié. extrait (option "Garder le fichier extrait"). projet a été effectuée, le fichier projet est automati-
Remarque : ce mode est déconseillé lors d’une quement réintégré.
utilisation du GDS avec une connexion Internet 4.4 Modes de gestion du projet
lente.
Deux modes de gestion du projet sont disponibles
Pour changer le mode d’extraction : avec le GDS : 5 Travailler en mode déconnecté avec le GDS
1. Sous le volet "Accueil", dans le groupe • Gestion du projet en mode Maître / Invité.
"Environnement", déroulez "Options" et sélection- Le Gestionnaire de Sources permet très simple- d’extraire avant la déconnexion les différents
• Gestion du projet en mode automatique (par
nez "Options générales de WEBDEV". ment de travailler en mode déconnecté ou nomade. éléments qui vont être modifiés (ainsi, ces
défaut).
2. Dans l’onglet "Général", l’option "Extraction Ce mode permet par exemple à un développeur éléments seront "déjà extraits" pour les autres
des éléments à la première modification" permet Maître et invité utilisateurs). Vous pourrez travailler en local sur
utilisant un portable de continuer à travailler sur
de passer tous les prochains projets ouverts en Le Gestionnaire de sources considère 2 types d’uti- un projet présent dans la base de sources tout en votre projet. Les différents éléments du projet
mode automatique. lisateurs : étant déconnecté de la base de sources. sont manipulables directement.
Ouvrir un élément du projet pour • le maître : le maître est l’utilisateur qui a placé Le principe est simple : • à la reconnexion, sous le volet "GDS", dans
modifier ses caractéristiques le projet dans le gestionnaire de sources. le groupe "Autres actions", déroulez "Travail à
• avant la déconnexion, sous le volet "GDS", dans
Pour modifier les caractéristiques d’un élément • les invités : les invités sont les développeurs qui le groupe "Autres actions", déroulez "Travail distance" et sélectionnez "Se reconnecter et
d’un projet géré par le GDS : manipulent le projet depuis le gestionnaire de à distance" et sélectionnez "Se déconnecter synchroniser". Il suffit alors de réintégrer les élé-
sources. pour une utilisation nomade". Il est conseillé ments modifiés.
1. Extrayez l’élément du Gestionnaire de sources.
Il n’est pas obligatoire d’être connecté en mode Pour plus de détails, consultez l’aide en ligne.
2. Sélectionnez le mode d’extraction de l’élément.
maître sur un projet. Le mode "Maître" est néces-
Le mode d’extraction peut être :
saire uniquement pour :
• exclusif : personne ne pourra extraire cet
• modifier les caractéristiques du projet et réinté- 6 Administrateur du GDS
élément jusqu’à sa réintégration. L’élément
grer ces modifications dans la base de sources.
pourra uniquement être extrait pour test.
• réintégrer tous les éléments pour faire le pro- L’administrateur de GDS permet de manipuler di- • lancer certains outils (options, maintenances,
• pour test : l’élément pourra être modifié mais
gramme d’installation du site. rectement les différents projets inclus dans le ges- ...).
les modifications ne pourront pas être réinté-
grées. tionnaire de sources. • restaurer une version d’un projet.
• multiple : l’élément pourra également être Pour passer du mode maître au mode invité, sous Il permet par exemple de : • voir les historiques et les différences de versions
extrait par d’autres utilisateurs. Dans ce cas, le volet "GDS", dans le groupe "Projet", déroulez • gérer les bases de sources (création, connexion de sources.
lors de la réintégration, il sera possible de "Maître / Invité" et sélectionnez "Devenir invité sur à une base de sources). • annuler les extractions (en mode administra-
visualiser les différences entre les différentes le projet (et tout réintégrer)". • gérer les branches. teur).
versions de l’élément. Dans ce cas, le gestionnaire de sources propose la • gérer les fichiers et les répertoires présents • purger une base de sources, la sauvegarder, la
3. Validez. L’élément est ouvert. La barre de titre réintégration de tous les éléments du projet (y com- dans un projet de la base de sources (ajouter, restaurer.
indique que l’élément est extrait. pris le fichier .WWP). supprimer, renommer des fichiers et des réper- • ajouter des fichiers de tout type dans la base de
Pour passer du mode invité au mode maître, sous toires). sources (.doc, .xls, .pdf, ...).
4.3 Réintégrer un élément le volet "GDS", dans le groupe "Projet", déroulez • gérer les différents fichiers de la base de
Les éléments extraits du Gestionnaire de sources "Maître / Invité" et sélectionnez "Devenir maître sur sources (extraction, réintégration, partage, ...).
apparaissent entourés d’un trait rouge sous l’édi- le projet".
teur de projet. Attention : Modification des options du projet :
Pour réintégrer un élément, il suffit de sélectionner Tous les utilisateurs du projet (qu’ils soient maîtres
l’option "Réintégrer" dans le menu contextuel de ou invités) peuvent modifier les caractéristiques
l’élément (dans le graphe du projet ou dans le volet du projet (première page du projet, animation,
"Explorateur de projet"). charte de programmation, ...). Ces modifications
pourront être réintégrées dans le gestionnaire
Lors de la réintégration d’un élément, un écran de sources uniquement par le maître du projet.
s’affiche permettant d’effectuer les actions sui-
Les modifications faites par un invité seront per-
vantes avant de réintégrer l’élément : dues lors de la mise à jour du projet depuis la base
• connaître les modifications effectuées. de sources.
• comparer l’élément de la base de sources avec
l’élément local (extrait).

Composant
Contenu
Composant interne en pratique
interne
1 Présentation
Un composant interne est un regroupement d’éléments d’un projet. Ce regroupement
permet de : Un composant interne est un regroupement d’élé- Un des avantages du composant interne par rap-
• Organiser un projet : vous pouvez créer des composants internes pour regrouper les ments d’un projet. Ce regroupement permet de : port au composant classique est de pouvoir débo-
éléments d’un projet, par exemple par fonctionnalité. • Organiser un projet : vous pouvez créer des guer directement le composant interne depuis le
composants internes pour regrouper les élé- projet qui l’utilise.
• Partager des éléments entre différents projets par l’intermédiaire du GDS (Gestion-
ments d’un projet par exemple par fonctionna- Différence avec un composant classique : Un com-
naire de Sources). lité. posant interne permet d’intégrer la totalité des
• Partager des éléments entre différents projets : éléments du composant dans l’interface du projet
Les éléments présents dans un composant contenant le composant interne. Il est possible de
GDS interne peuvent être partagés entre plusieurs
projets par l’intermédiaire du GDS. Pour plus
manipuler tous les éléments "publics" du compo-
sant interne directement sous l’éditeur.
de détails, consultez "Partager des composants Lors de l’utilisation d’un composant classique, les
internes (via le GDS)", page 104. éléments "publics" du composant ne peuvent pas
être manipulés directement. Il est nécessaire pour
modifier le composant classique d’ouvrir le projet
Projet 1 correspondant.
1
Projet 2 2 Créer un composant interne
Création du
composant interne
Pages 2.1 Les différentes étapes Remarque : Les éléments du composant interne
2
accessibles (ou "public") seront automatique-
Partage du Pour créer un composant interne :
ment proposés par la complétion. Ils pourront
composant interne 1. Sous le volet "Projet", dans le groupe
Classes
être utilisés par les éléments présents dans le
via le GDS "Configuration de projet", déroulez "Nouvelle confi- projet ou depuis un autre composant interne. Les
guration" et sélectionnez "Composant Interne". éléments non accessibles (ou "privés") pourront
L’assistant création d’un composant interne se être manipulés uniquement par un autre élément
Requêtes lance. du composant interne (la complétion proposera
2. Indiquez les caractéristiques du composant ces éléments "privés" uniquement depuis les élé-
interne : ments d’un composant interne).
• son nom. Le nom du composant interne sera 5. Indiquez le mode de gestion des données et
utilisé pour le fichier WCI correspondant à la des contextes d’exécution. Trois modes de gestion
description du composant interne. Ce nom des données et des contextes d’exécution sont
Fichier WCI sera également utilisé pour créer un sous-ré- disponibles :
Sous-répertoire pertoire dans votre projet contenant tous les
(Liste des éléments) • Utiliser l’analyse du projet ou aucune analyse
du projet éléments du composant interne.
<MonComposant> (partage complet) : Le composant interne
• son libellé. accède aux fichiers de données du projet.
• sa description. Le composant interne utilise également les
3. Indiquez les éléments à intégrer dans le compo- mêmes contextes d’exécution que le projet.
Les éléments d’un composant interne peuvent être privés ou publics : sant interne. Un composant interne peut contenir Ce mode correspond au mode par défaut si le
tous les types d’éléments présents dans un pro- composant interne n’utilise pas d’analyse.
• Les éléments privés pourront être manipulés uniquement par les autres éléments du
jet : pages, états, modèles, ... • Utiliser l’analyse du projet avec contexte
composant. d’exécution différent (mode avancé) : Le
4. Indiquez les éléments du composant interne
• Les éléments publics pourront être manipulés par les éléments du projet utilisant le qui seront directement accessibles dans le code composant interne accède aux fichiers de
composant interne. et dans les actions prédéfinies du projet accueil- données du projet.
lant le composant interne.

Le composant interne utilise des contextes Astuce : Un composant interne n’a pas de code
Composant
Contenu
d’exécution distincts de ceux du projet.
Ce mode est à utiliser dans des cas très spé-
cifiques.
de déclaration des globales. Il suffit d’utiliser
une collection de procédures pour effectuer l’ini-
tialisation du composant interne.
externe
• Utiliser une analyse spécifique : Le compo-
sant interne accède à ses propres fichiers de 2.2 Composant interne et analyse : cas de
l’autonomie totale Un composant externe est un ensemble d’éléments WEBDEV : pages, états, analyse, ...
données. Le composant interne utilise des
contextes d’exécution distincts de ceux du Un composant interne peut être lié à sa propre ana-
Cet ensemble d’éléments effectue une fonctionnalité précise. Par exemple, un compo-
projet. lyse. Dans ce cas, le projet accueillant le composant externe peut correspondre à une des fonctionnalités suivantes :
Ce mode correspond au mode par défaut si le sant interne peut avoir plusieurs analyses : • Envoi de fax,
composant utilise une analyse. • l’analyse du projet.
Dans ce cas, il est nécessaire d’indiquer • Envoi d’emails,
• l’analyse du ou des composants internes.
l’analyse utilisée par le composant interne. Il
Cette analyse est définie lors de la création du
• ...
est également possible de créer directement Un composant externe WEBDEV peut être redistribué à d’autres développeurs WEBDEV
composant interne. Elle peut être également
une nouvelle analyse. Cette analyse sera
sélectionnée depuis la fenêtre de description du (gratuitement ou non). Ces développeurs pourront ainsi intégrer simplement la fonction-
associée au composant interne.
composant interne. nalité proposée par le composant externe dans leur site sans pour autant avoir accès
6. Validez la création du composant interne. A tout
Les éléments générés par le RAD pour le compo- au code source correspondant (s’il n’a pas été lui aussi distribué). Le composant externe
moment, il sera possible de :
sant interne seront générés dans le répertoire du
• Modifier les caractéristiques du composant composant interne. Bien entendu, si l’analyse du
sera ensuite intégré au site et distribué avec lui.
interne grâce à la fenêtre de description du composant interne est modifiée, une nouvelle gé-
composant interne. nération par le RAD proposera automatiquement
• Manipuler le composant interne et ses élé- de générer uniquement les éléments correspon-
ments. dants aux modifications. Projet WEBDEV
3 Partager des composants internes (via le GDS) 1 Développement

du composant
Les composants internes peuvent être partagés

entre projets grâce au GDS.
interne sera automatiquement présent dans le
GDS. 2 Génération du
composant
Pour partager un composant interne via le GDS, il • soit d’importer dans le GDS un projet contenant
est nécessaire que le projet contenant le compo- un ou plusieurs composants internes. Les com- Fichier .WDK
sant interne soit dans le GDS. Il est possible : posants internes seront alors automatiquement
• soit de créer le composant interne à partir d’un intégrés dans le GDS.
Créé dans le répertoire EXE
projet présent dans le GDS. Le composant
3 Importation du
composant
Projet WEBDEV Projet WEBDEV Projet WEBDEV
4 Utilisation du
composant 4 Utilisation du
composant 4 Utilisation du
composant

Composant externe en pratique 1.3 Que contient un composant externe ?
Un composant externe contient :
Remarque : Par défaut, si un composant utilise
une analyse, des fichiers de données, ... les fonc-
tions HFSQL manipuleront ces éléments dans un
• les différents éléments à redistribuer (pages, contexte indépendant. Ces paramètres peuvent
états, ...). Ces éléments peuvent être acces- être modifiés dans les options avancées du compo-
1 Présentation sibles ou non lors de l’importation du composant. Pour plus de détails, consultez l’aide en ligne.
sant dans un projet WEBDEV.
• une brève description du composant.
1.1 Définition 1.2 De quoi est constitué un composant • une aide permettant de ré-utiliser ce compo-
Un composant externe est un ensemble d’éléments
externe ? sant. Cette aide est générée à partir des com-
WEBDEV : pages, états, analyse, ... Cet ensemble Un composant externe est défini et généré à partir mentaires de code.
d’éléments effectue une fonctionnalité précise. d’un projet WEBDEV existant. Il peut être ensuite
Par exemple, un composant peut correspondre à intégré dans d’autres projets WEBDEV.
une des fonctionnalités suivantes : Tous les éléments du composant sont totalement 2 Créer et générer un composant externe
• Envoi de fax, indépendants du projet dans lequel le composant
• Envoi d’emails, ... est intégré. Le composant peut avoir sa propre La création d’un composant externe doit être La création d’un composant se fait en plusieurs
analyse, ses pages, ses états, ses fichiers de don- effectuée à partir d’un projet contenant tous les étapes :
Remarques : nées, ... Lors de la création de la génération du éléments nécessaires au fonctionnement du com- 1. Développement des éléments du composant.
• Pour optimiser l’organisation de vos projets, il composant, il suffit d’indiquer si ces éléments pour- posant. Il est donc conseillé d’utiliser un projet
est possible d’utiliser des composants internes. ront être manipulés ou non dans le projet WEBDEV 2. Création du composant.
spécifique pour créer chaque composant.
Pour plus de détails, consultez "Composant intégrant ce composant. 3. Définition des options avancées du composant.
interne", page 102. Le composant est constitué de trois fichiers : 4. Génération du composant.
• Dans la suite de ce chapitre, le terme "compo- Le composant peut alors être distribué et réutilisé.
sant" signifie "composant externe". <NomComposant>. Fichier composant.
WDK Contient tous les élé-
Un composant externe peut être redistribué à
ments du composant. 3 Distribuer un composant externe
Ce fichier est nécessaire
d’autres développeurs WEBDEV (gratuitement ou
à l’intégration du compo-
non). Ces développeurs pourront ainsi intégrer
sant dans un projet. 3.1 Présentation 3.2 Utilisation directe du composant externe
simplement la fonctionnalité proposée par le com-
Ce fichier doit également
posant dans leur site. Le composant sera donc Lorsque le composant a été créé, testé et généré, Le composant est créé et utilisé sur le même poste.
être livré dans la procé-
intégré au site et distribué avec le site. il peut être mis à disposition des développeurs.
dure d’installation du site Lors de l’importation du composant dans un projet
Lors de la création du composant, l’auteur spéci- utilisant le composant. Plusieurs méthodes sont possibles : WEBDEV, il suffit de sélectionner le fichier WDI cor-
fie : • utilisation directe du composant respondant au composant. Ce fichier est disponible
<NomComposant>. Description du compo-
• la provenance des éléments du composant. WDI Exemple : le composant est directement utilisé dans le répertoire EXE du projet composant.
Le développeur peut construire un composant sant (uniquement pour le
développement de sites). sur le poste du développeur qui a créé le com- Attention : Si le composant utilise des fichiers spé-
à partir d’un projet WINDEV lié à un projet posant. cifiques (fichiers de données, fichiers texte, ...), il est
WEBDEV et / ou un projet WINDEV Mobile. Ce fichier est nécessaire
à l’intégration du compo- • distribution simple, en fournissant directement nécessaire de créer un fichier <NomComposant>.
• les éléments du composant visibles ou non par sant dans un projet. les fichiers nécessaires. WDO après la génération du composant. Ce fichier
l’utilisateur du composant. Les éléments visibles Ce fichier ne doit pas être Exemple : le composant est destiné à être utilisé contient la liste des fichiers externes (fichiers de
seront accessibles dans le volet "Explorateur de livré dans la procédure à l’intérieur d’une même société, par plusieurs données, fichiers texte, ...) utilisés par le compo-
projet" ou par programmation. d’installation du site utili- développeurs. Dans ce cas, les fichiers néces- sant.
• le mode d’utilisation du composant (com- sant le composant. saires peuvent être copiés sur un disque réseau. Ces fichiers référencés dans le fichier
ment utiliser le composant, les paramètres • procédure d’installation du composant (avec <NomComposant>.WDO seront automatiquement
<Nom du compo- Fichier optionnel
permettant d’accéder aux fonctionnalités du une procédure d’installation du composant iden- recopiés dans le répertoire EXE du projet utilisant
sant>.WDO (fichier Fichier au format texte
composant, ...). Une documentation succincte tique à celle utilisée pour les applications). le composant WEBDEV.
optionnel) contenant la liste des
(à compléter) est automatiquement générée et Exemple : ce mode de distribution est conseillé
associée au composant. différents éléments livrés
en plus avec le compo- si le composant est destiné à être vendu ou à
Remarque : Des exemples de composants sont sant (fichiers de données, être distribué à grande échelle, avec des mises
livrés en standard avec WEBDEV. Ces composants fichiers .INI, ...). Consultez à jour régulières.
sont accessibles depuis la fenêtre de bienvenue. "Le fichier WDO", page
111.

3.3 Distribution simple d’un composant Ce mode d’installation permet de gérer automati- 5 Déploiement d’un site utilisant un composant externe
externe quement :
La distribution simple d’un composant consiste • le fichier WDO et l’installation des fichiers spé-
à fournir uniquement les fichiers nécessaires au cifiques (fichiers de données, ...) utilisés par le 5.1 Présentation Pour mettre à jour un composant en clientèle, deux
fonctionnement du composant par simple copie. composant. possibilités existent :
• l’installation d’outils spécifiques (MDAC, driver Le déploiement d’un site utilisant un ou plu-
Les fichiers sont copiés dans un répertoire spéci- sieurs composants se fait de la même façon que 1. La recompilation du projet hôte
fique. Ce répertoire peut par exemple être présent ODBC pour HFSQL, ...).
le déploiement d’un site classique : sous le volet Recompilez le projet qui utilise le composant et
sur un serveur réseau. • la mise à jour automatique des fichiers de don- "Projet", dans le groupe "Génération", déroulez redistribuez le site avec le composant. Dans ce cas,
Lors de l’importation du composant dans un projet nées utilisés par le composant (si nécessaire). "Déployer le site". aucun problème de version ou de compatibilité ne
WEBDEV, il suffit de sélectionner le fichier WDI • la désinstallation du composant. Lors du déploiement d’un site utilisant un compo- sera rencontré. La recompilation est nécessaire
correspondant au composant dans le répertoire de Pour proposer une procédure d’installation pour un sant, les fichiers suivants sont automatiquement dans les cas suivants :
distribution. composant : installés sur le poste serveur : • De nouvelles fonctions ont été ajoutées dans le
Pour distribuer un composant, il est nécessaire de 1. Créez la procédure d’installation du compo- • <NomComposant>.WDK, composant et doivent être prises en compte.
fournir : sant : sous le volet "Projet", déroulez "Déployer le • Les paramètres de certaines procédures ont été
• les fichiers nécessaires au fonctionnement du
• Les fichiers automatiquement générés par site" et sélectionnez "Générer et déployer le site". composant et de l’application. modifiés.
WEBDEV (fichier <NomComposant>.WDK et 2. Dans les différents plans de l’assistant, spéci- • Incompatibilité de la nouvelle version avec les
fichier <NomComposant>.WDI). fiez : 5.2 Mise à jour des composants et des sites anciennes versions du composant.
• Si nécessaire, les fichiers spécifiques mani- • le support d’installation du composant. déployés • ...
pulés par le composant (fichiers de données, • les langues proposées dans la procédure Lors de la mise à jour d’un composant et/ou d’un 2. Distribution directe du fichier .WDK
fichiers d’initialisation, ...) ainsi que le fichier d’installation. site déployé, il est possible d’installer sur le poste Fournissez directement une mise à jour du compo-
<NomComposant>.WDO.
• le répertoire d’installation par défaut du com- de déploiement du site : sant (fichier .WDK) en clientèle sans recompilation
Le fichier texte <NomComposant>.WDO contient
la liste des fichiers qui doivent être fournis avec posant. • soit le site, le composant et les fichiers néces- du projet.
le composant. Pour plus de détails sur ce fichier, • les modules optionnels à installer. Il est pos- saires à leur fonctionnement. Cette possibilité s’applique en général lorsque :
consultez le paragraphe "Qu’est-ce que le fichier sible de modifier la liste des fichiers à distri- • soit uniquement le site et les fichiers néces- • La nouvelle version sert à corriger un ou des
WDO ?", page 111. buer avec le composant. Le fichier WDO sera saires au fonctionnement du site. dysfonctionnements d’une version antérieure.
automatiquement créé à partir de cette liste. • soit uniquement le composant et les éventuels • De nouvelles fonctions ont été ajoutées dans
3.4 Distribution grâce à une procédure • ... fichiers nécessaires à son fonctionnement. le composant mais ne sont pas nécessaires au
d’installation Par défaut, les fichiers nécessaires à l’installation Pour plus de détails sur la gestion de la compatibi- bon fonctionnement du site.
La diffusion des composants à l’aide d’une procé- d’un composant sont créés dans le sous-répertoire lité entre le site et son composant, consultez l’aide
dure d’installation consiste à fournir un programme INSTALL COMPO du projet. en ligne.
d’installation aux utilisateurs du composant Rappel : Lors de la création de l’installation d’une
WEBDEV. Ce programme installe tous les fichiers application, les fichiers nécessaires sont créés
nécessaires à l’utilisation du composant dans le dans le répertoire INSTALL du projet. 6 Modifier un composant externe
répertoire spécifié par l’utilisateur.
6.1 Présentation 6.2 Les différents types de compatibilité

4 Utiliser un composant externe dans un site
A tout moment, un composant créé et généré peut La gestion de la compatibilité est liée aux versions
être modifié. Cette modification peut correspondre : d’un composant. En effet, si des modifications ont
Un composant externe peut être réutilisé à tout mo- Si le composant a été publié et importé via le GDS, • soit à l’ajout d’éléments dans le composant. été apportées au composant, les sites qui utilisent
ment dans n’importe quel site WEBDEV : il suffit de les mises à jour sont proposées à l’ouverture du le composant en déploiement peuvent rencontrer
• soit à la suppression d’éléments du composant.
connaître le répertoire des fichiers du composant. projet utilisant le composant. des problèmes d’exécution si elles ne sont pas en
• soit à la modification des droits sur les éléments phase avec ce composant.
Lorsqu’une nouvelle version d’un composant est Si le composant a été distribué avec un site
du composant.
disponible, il suffit d’installer les nouveaux fichiers WEBDEV, il est nécessaire de mettre le compo-
de cette mise à jour dans le répertoire d’installation sant à jour. Pour plus de détails, consultez le para- • soit à la modification d’un des éléments du
du composant (selon le mode d’installation utilisé). graphe "Déploiement d’un site utilisant un compo- composant.
Pour plus de détails sur les différents modes d’ins- sant externe", page 109. Dans tous les cas, après cette modification, le com-
tallation d’un composant, consultez "Distribuer un posant doit être re-généré pour prendre en compte
composant externe", page 107. les modifications effectuées.

La gestion de la compatibilité est une étape impor- Si le composant installé avec le site est d’une 7.2 Visibilité d’un élément d’un composant 7.4 Qu’est-ce que le fichier WDO ?
tante dans la modification d’un composant. Il existe version inférieure à celle utilisée par le site, le
2 types de compatibilité : site refusera de fonctionner. Lors de la création d’un composant, il est possible Le fichier <NomComposant>.WDO est un fichier
de définir les éléments du composant qui seront au format TXT, pouvant être créé et modifié à tout
• la compatibilité descendante : la version du • la compatibilité ascendante : l’utilisation d’une accessibles ou non par l’utilisateur du composant. moment. Ce fichier peut par exemple être créé
composant utilisée (fichier .WDK) pour compiler nouvelle version d’un composant avec les pro- et modifié avec l’éditeur de texte standard de
les sites utilisant ce composant doit être tou- jets compilés avec une ancienne version peut • Si l’élément est accessible, l’utilisateur du
composant verra cet élément dans la liste des Windows, NotePad.
jours supérieure ou égale à la version actuelle- être interdite. Il est donc nécessaire de recom-
ment utilisée en déploiement. piler les projets pour utiliser correctement la éléments du projet. Il pourra manipuler ces élé- Ce fichier contient la liste des fichiers externes
Cette compatibilité est automatiquement gérée. nouvelle version du composant. ments par programmation (comme s’il s’agissait (fichiers de données, fichiers texte, ...) utilisés par
d’un élément créé dans le projet). le composant et devant être livrés et installés avec
Remarque : Le code de cet élément n’est cepen- le composant. Ces fichiers doivent être recopiés
7 Caractéristiques avancées d’un composant externe dant pas visible. dans le répertoire EXE des projets utilisant le com-
• Si l’élément n’est pas accessible, l’utilisateur ne posant.
7.1 Documentation automatique A quel moment la documentation
est-elle générée ? saura même pas que cet élément existe. Ce fichier ".WDO" peut contenir :
Un composant doit absolument être accompagné Attention : Selon le mode de déclaration des • soit le nom complet du fichier.
d’une documentation pour permettre sa réutilisa- La documentation du composant est générée lors
de la première génération du composant (option éléments du projet (classe, collection de procé- Par exemple : C:\Composants\
tion. dures, ...), les éléments accessibles ou non peuvent ComposantSélecteur\EtatInitial.INI
"Générer la configuration" sous le volet "Projet",
WEBDEV simplifie la réalisation de cette documen- dans le groupe "Génération"). varier. • soit le nom du fichier. Ce fichier sera recherché
tation en proposant : dans le répertoire en cours du composant.
Lors de cette génération de la documentation : 7.3 Le fichier WDO
• une présentation générale du composant. Cette Par exemple : EtatInitial.INI
présentation générale est saisie lors de la géné- • les commentaires existants dans le code sont
utilisés pour créer la documentation. Lors de la génération du composant externe, deux • soit un nom de fichier utilisant un chemin rela-
ration du composant. fichiers sont automatiquement créés dans le réper- tif.
• une génération automatique de la documenta- • si aucun commentaire n’existe, WEBDEV toire EXE du projet en cours :
documentera automatiquement les éléments Les syntaxes possibles sont :
tion technique à partir des commentaires insé- • Répertoire\NomFichier.xxx pour indiquer un
accessibles du composant en précisant les <NomComposant>. Contient tous les éléments
rés dans le code des éléments du composant. sous-répertoire du répertoire en cours
paramètres attendus en entrée et en sortie de WDK à redistribuer (pages, états,
Quels sont les commentaires de code chaque élément. Les commentaires correspon- ...) avec le composant • .\NomFichier.xx pour indiquer le répertoire en
pris en compte ? dants sont automatiquement créés dans les cours
<NomComposant>. Interface du composant.
Les commentaires pris en compte automatique- différents éléments. WDI Ce fichier contient : • ..\NomFichier.xx pour indiquer le répertoire
ment pour la documentation du composant sont : Remarque : A chaque re-génération du composant, parent
• une aide pour l’utilisa-
• Les commentaires placés en tête des procé- il est possible de regénérer la documentation asso- tion du composant lors Par exemple : \ComposantSélecteur\
dures WLangage ciée au composant (bouton "Regénérer" dans la de sa réintégration EtatInitial.INI
fenêtre "Historique du composant"). Ce fichier sera utilisé lors de l’intégration du com-
• les éléments à l’utilisa-
tion du composant dans posant dans le projet. Les chemins précisés dans
Comment disposer de la documenta- le WDO doivent correspondre aux chemins où les
le projet (information de
tion d’un composant ? fichiers sont installés sur le poste de développe-
compilation, ...)
La présentation générale du composant et la document du composant.
mentation technique du composant sont dispo- Lors de la diffusion du composant, ces deux Lors de l’intégration du composant, l’arborescence
nibles : fichiers doivent être redistribués. spécifiée dans le WDO sera conservée et repro-
• lors de l’intégration d’un composant dans un duite dans le répertoire EXE du projet. Pour plus de
Si le composant utilise des éléments supplémen-
projet (sous le volet "Projet", dans le groupe détails, consultez le paragraphe "Utiliser un compo-
taires (fichiers de données, ...), il est nécessaire
• Les commentaires placés en tête des traite- "Projet", déroulez "Importer" et sélectionnez sant externe dans un site", page 108.
d’ajouter dans le répertoire EXE du projet :
ments / événements suivants : "Importer un composant externe"). Exemple : Le composant "Code Postal" utilise un
• un fichier <NomComposant>.WDO : ce fichier
• Code d’initialisation des pages, • à tout moment, lors d’un double-clic sur l’icône fichier de données "Cedex" (fichiers Cedex.fic et
contient la liste des fichiers externes (fichiers de
• Code d’initialisation des états, du composant présent dans le volet "Explorateur Cedex.ndx). Dans le projet de création du compo-
données, fichiers texte, ...) utilisés par le compo-
de projet" ou par l’option "Description" du menu sant, ce fichier de données est présent dans le
• Code d’initialisation des classes, sant. Ces fichiers doivent être livrés et installés
contextuel du composant. répertoire EXE du projet.
• Code d’initialisation des collections de procé- avec le composant.
La documentation spécifique à un élément du com- Pour que le composant soit livré et installé avec le
dures. • les fichiers devant être redistribués avec le com-
posant peut être obtenue en double-cliquant sur fichier de données, il faut créer le fichier WDO dans
posant. Ces fichiers peuvent être placés selon
cet élément (volet "Explorateur de projet") ou en le répertoire EXE du projet de création du compo-
une sous-arborescence spécifique. Dans ce cas,
appuyant sur la touche F2 depuis le code de cet sant. Ce fichier doit contenir les lignes suivantes :
le code du composant doit gérer l’accès à ces
élément. fichiers selon cette même arborescence. .\CEDEX.Fic
.\CEDEX.NDX

Diffusion d’un composant avec WDO • Si vous utilisez une procédure d’installation pour
Modes de
Contenu
Pour diffuser un composant utilisant un fichier
WDO :
• Si vous n’utilisez pas de procédures d’instal-
le composant, le fichier WDO sera automatique-
ment créé lors de la création de la procédure
d’installation du composant.
génération
lation pour le composant, il est nécessaire de Il suffit pour cela dans l’assistant de :
fournir : 1. Demander la modification des fichiers à instal- Au-delà des sites Web, WEBDEV vous permet également de générer de nombreux
• le fichier WDK, ler (option "Modifier la liste des fichiers à installer" autres types de projets.
• le fichier WDI, dans les "modules additionnels").
2. Sélectionner les fichiers supplémentaires à
• le fichier WDO,
installer. Sites
• tous les fichiers nécessaires référencés dans
le fichier WDO. Le fichier WDO sera automatiquement créé et ins- Les sites sont le mode de génération le plus fréquemment utilisé.
tallé avec le composant. WEBDEV permet de générer :
• des sites statiques ou dynamiques (Session ou AWP).
• des sites PHP.
Bibliothèques
Une bibliothèque est un fichier unique rassemblant plusieurs élé-
ments d’un projet WEBDEV : des pages, des états, etc. Il est possible
de générer des bibliothèques autonomes pouvant être utilisées par
d’autres sites.
Composants externes
Les composants externes sont des briques applicatives permettant
de partager une ou plusieurs fonctionnalités spécifiques entre diffé-
rentes applications. Un composant généré avec WINDEV peut égale-
ment être utilisé dans un projet WEBDEV ou WINDEV Mobile.
Webservices SOAP ou REST

A partir d’un projet WEBDEV, il est possible de générer un Webser-
vice (également appelé service Web XML). Un Webservice expose un
ensemble de fonctions (généralement une ou plusieurs collections
de procédures). Il les rend accessibles à travers le web (ou un ré-
seau privé) en utilisant les protocoles standards de communication
HTTP, SOAP ou REST.
Remarque : Un Webservice doit être déployé sur un Serveur d’Appli-
cation WEBDEV pour être utilisable.

Génération PHP en pratique 2.2 RAD PHP
Comme sur tout projet associé à une analyse, vous
• visualiser les champs, événements, fonctions
WLangage non disponibles en génération PHP.
Ces erreurs apparaissent en violet dans le volet
pouvez utiliser le RAD pour générer les pages de "Erreurs de compilation".
votre site.
1 Présentation Pour plus de détails sur les éléments WEBDEV non
Le RAD prend en compte toutes les spécificités disponibles dans un site PHP, consultez l’aide en
de la génération PHP (champs, événements, fonc- ligne.
WEBDEV permet de générer des sites PHP sans Pour compiler (en PHP) un projet PHP avec tions utilisables dans un site PHP généré depuis
pour autant connaître le langage PHP. Le déve- WEBDEV, il est nécessaire d’installer sur le poste WEBDEV). 2.4 Déployer un site PHP
loppement du site peut se faire complètement de développement un moteur PHP. De nombreux 2.3 Test d’un site PHP sous l’éditeur Le déploiement d’un site PHP se fait de la même
en WLangage, comme pour un site WEBDEV clas- moteurs PHP sont disponibles sur Internet. Il est manière que pour un site statique. Lors de la créa-
sique. Il est toutefois possible de saisir votre propre nécessaire d’en télécharger un et de l’installer. Lors du test d’un site PHP, le site est compilé en tion de la procédure d’installation, WDDéploie se
code PHP (code serveur). Vous avez par exemple EasyPHP (http://www.easy- PHP et lancé dans votre navigateur. Vous visualisez lance et vous assiste dans la mise en place de
php.org/). Ce moteur est donné à titre indicatif et directement les pages PHP générées par WEBDEV. votre site PHP.
1.1 Qu’est-ce qu’un site PHP ? vous pouvez utiliser tout autre moteur PHP. Rappel : Un moteur PHP est nécessaire sur le poste
de développement. Pour plus de détails, consultez l’aide en ligne.
Un site PHP est compilé en PHP. Si ce site mani- Remarque : PHP 4.3.2 version minimale est né-
pule une base de données, l’accès à cette base cessaire. Une base de données MySQL est néces- La compilation d’un site PHP permet de :
se fera par un driver ODBC (MyODBC, ODBC pour saire. Les sites PHP générés avec WEBDEV peuvent • connaître les erreurs de programmation
Oracle, ...) ou via le Connecteur Natif pour MySQL également être utilisés avec des serveurs PHP ver- WLangage.
(également appelé Accès Natif). sion 5 ou 7.
Concernant le driver ODBC, il est spécifique à
chaque base de données (et peut être trouvé sur le
1.2 Pourquoi développer un site PHP avec
site de l’éditeur de la base de données).
WEBDEV ?
Un site PHP est composé de pages ".php" et néces- Pour certains sites, surtout de petits sites, il peut
site un moteur PHP pour être lancé. être pratique de désirer réaliser ces sites en PHP
afin de faciliter leur hébergement gratuit. Vous en
avez désormais la possibilité avec WEBDEV.
Remarque : Le nombre de fonctions WLangage uti-
lisables dans un projet PHP est limité dans cette
version. Ce nombre de fonctions est amené à
croître régulièrement.
2 Fonctionnalités pour un projet PHP
2.1 Création d’un projet PHP Dès que le projet est configuré comme un projet
PHP, tous les outils WEBDEV disponibles sont auto-
La création d’un projet PHP est effectuée de la
matiquement paramétrés pour le projet PHP :
même façon que tout autre projet WEBDEV :
• Le RAD PHP qui génère du code PHP depuis
1. Cliquez sur parmi les boutons d’accès
un projet pour de nombreuses fonctionnalités
rapide de WEBDEV. La fenêtre de création d’un
de WEBDEV.
nouvel élément s’affiche : cliquez sur "Projet".
• Le compilateur indique les fonctions ou
2. L’assistant de création de projet se lance.
champs non utilisables en PHP. Un message
3. Dans un des premiers écrans de l’assistant, apparaît en violet dans le volet "Erreurs de
vous pouvez choisir le type de génération de votre compilation".
projet. Il suffit de sélectionner "PHP" et de suivre
• Le déploiement du site PHP est proposé via
l’assistant.
l’outil WDDéploie.
Remarque : Il est conseillé de créer un nouveau
projet WEBDEV pour développer un site PHP plutôt
que de transformer un site WEBDEV en PHP.

Centre de suivi
Contenu
Gestion des
Contenu
de projets exigences
Pour gérer le cycle de vie de vos projets de développement, WEBDEV vous propose d’uti- Une exigence est un besoin sur ce qu’un produit (ou un service) devrait faire.
liser le Centre de Suivi de Projets. Le Centre de Suivi de Projets permet de :
• Gérer les exigences d’un projet, Le Centre de Suivi de Projets permet à un chef de projet de gérer les exigences d’un
• Gérer le suivi d’un projet (planning des tâches à réaliser), projet de développement.
• Gérer les bugs et les évolutions signalés par vos utilisateurs sur un projet.
Le Centre de Suivi de Projets utilise une base de données (HFSQL Classic ou Client/ Il suffit pour cela de :
Serveur) : la base de données des Centres de Contrôle. Cette base de données est par- • définir les différents intervenants du projet.
tagée par de nombreux outils disponibles dans WEBDEV : • définir les exigences (avec les différents éléments qui leur sont associés).
- Tâches
Chaque développeur effectue les différentes tâches qui lui sont affectées.
- Exigences Le chef de projet peut à tout moment suivre l’état d’avancement du projet.
- Qualité
Centre de
Suivi de Projets
Chef de Projet Développeur
1 Création des exigences

composées de : 2 Réalisations des
exigences :
Centre de
Tâches Suivi de Projets
Fenêtre de login
de WEBDEV
Base de données des
Centres de Contrôle Incidents
Règles Métier Volet des

Messagerie Catalogue d’images Règles Métier
Règles Métier Tests automatiques
autonome (WDBAL) (images personnelles)
3 Suivi des exigences (Centre de Suivi de Projets) :
Remarque : Lors de l’installation de WEBDEV, le programme d’installation propose de

choisir une des options suivantes :
• créer la base des Centres de Contrôle. Cette base sera automatiquement créée au
Gestion des
format HFSQL Classic dans le répertoire spécifié. exigences
• partager une base de données des Centres de Contrôle existante.

Gestion des
Contenu
Gestion des
Contenu
tâches règles métier
Le Centre de Suivi de Projets permet aux différents intervenants d’un projet de gérer leur WEBDEV permet de gérer des règles métier. Une règle métier permet de définir un mode
planning des tâches. Ces tâches peuvent être liées à des exigences et correspondre à opératoire précis ou de préciser un traitement particulier. Par exemple : le calcul d’un
plusieurs projets. taux de TVA avec ses particularités, les règles de changement de statut d’un client ; la
formule de calcul d’un montant de frais de port, une commission commerciale, un taux
de remise, un coefficient de vétusté, ...
Définition des exigences
Définition des
Règles Métier
Application des Règles

Métier dans le projet
Après avoir listé l’ensemble des tâches d’un projet, le Centre de Suivi de Projets s’occupe
de tout. La saisie du temps passé est quasi automatique, ne demande aucune action
spécifique et ne génère aucune contrainte particulière.
Utilisation du site
Lors de l’ouverture du projet concerné, le Centre de Suivi de Projets demande ou indique
la tâche en cours. Dès qu’une tâche est réalisée, il suffit d’indiquer que cette tâche est
terminée et de spécifier la nouvelle tâche. Une règle métier peut être simple ou élaborée.
Une tâche peut être reliée à un élément du projet (page, état, ...). Chaque fois que l’élé- Les règles métier peuvent provenir :
ment concerné est ouvert, le temps passé sur cet élément est décompté et mémorisé
• du cahier des charges (correspondant aux exigences).
dans le Centre de Suivi de Projets. Inversement, depuis la liste des tâches, il est possible
d’ouvrir automatiquement l’élément correspondant à la tâche que vous voulez réaliser. • de suggestions faites par les utilisateurs de l’application.
Chaque développeur peut également visualiser directement sa liste de tâches dans le
volet "Centre de Suivi de Projets" présent sous l’éditeur. Pendant le développement, les règles métier définies pour le projet sont affichées direc-
tement dans le volet "Règles métier" de l’environnement de développement. Ce volet
présente le nombre d’éléments du projet auxquels les règles métier s’appliquent et le
pourcentage de règle actuellement réalisé.

PARTIE 4
Concepts
avancés
120 Partie 3 : Environnement de développement

RAD
Contenu
RID
Le RAD (Rapid Application Development) et le RID (Rapid graphical Interface Design)
permettent de créer des pages à partir :
• de l’analyse liée au projet,
• des patterns RAD standard ou personnalisés,
• des gabarits.
En génération RAD, les pages générées contiennent tout le code nécessaire à leur
fonctionnement. Ces pages peuvent être testées immédiatement, avec les données pré-
sentes sur le poste de développement.
En génération RID, les pages générées contiennent uniquement les champs liés aux
rubriques de l’analyse. Tout le code nécessaire au fonctionnement de ces pages reste à
la charge du développeur. Vous pouvez directement saisir votre code personnalisé.
Analyse du Pattern Gabarit

projet RAD
RAD Application Complète

RAD ou RID Page
Exemple de page générée

par le RAD ou le RID
122 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 123

Le modèle
Contenu
Le modèle UML en pratique
UML
WEBDEV permet de créer ces neuf types de modèle UML : 1 Présentation
• Diagramme de classes : décrit de manière générale la structure d’un système.
L’objectif principal d’une équipe de développement WEBDEV permet de créer ces neuf types de modèle
• Diagramme de cas d’utilisation : représente les fonctionnalités du système du point est de créer des applications optimisées, capables UML :
de vue de l’utilisateur. de satisfaire les besoins en constante évolution de • Diagramme de classes.
• Diagramme d’objet : représente un ensemble d’objets et leurs relations à un moment leurs utilisateurs. • Diagramme de cas d’utilisation.
donné. La modélisation d’une application permet de spé- • Diagramme d’objet.
cifier la structure et le comportement attendus
• Diagramme de composants : décrit l’architecture physique et statique d’une applica- d’un système, de comprendre son organisation, de • Diagramme de composants.
tion informatique. déceler les possibilités de simplification et de réuti- • Diagramme d’activité.
• Diagramme d’activité : représente le comportement d’une méthode ou le déroule- lisation et de gérer les risques encourus. • Diagramme de séquences.
ment d’un cas d’utilisation. Un modèle est la simplification de la réalité. Il per- • Diagramme de collaboration.
met de mieux comprendre le système à développer. • Diagramme d’états-transitions.
• Diagramme de séquences : représente l’ordre chronologique des messages envoyés
Un diagramme est la représentation graphique • Diagramme de déploiement.
et reçus par un ensemble d’objets. d’un ensemble d’éléments qui constituent un sys- Ce chapitre ne fait que présenter de manière glo-
• Diagramme de collaboration : présente l’organisation structurelle des objets qui tème. Pour visualiser un système sous différentes bale la modélisation UML. Pour plus de détails sur
envoient et reçoivent des messages. perspectives, le langage UML (Unified Modeling le langage UML, nous vous conseillons de consulter
Language) propose neuf diagrammes, représen- des ouvrages spécifiques.
• Diagramme d’états-transitions : présente un automate à états finis. tant chacun un état du système.
• Diagramme de déploiement : montre la répartition des matériels (les nœuds) utilisés
dans un système et l’association des programmes exécutables à ces matériels.
2 Les différents diagrammes UML
2.1 Diagramme de classes Un diagramme de classes est composé des élé-

ments suivants :
Un diagramme de classes permet de modéliser la
structure d’un système grâce à des classes et à • Classe : représente les structures de l’applica-
des relations entre ces classes. tion. Chaque classe est divisée en trois compar-
timents :
Les diagrammes de classes sont les diagrammes
les plus courants dans la modélisation des sys- • le nom de la classe indique ce que la classe
tèmes orientés objet. est et non ce qu’elle fait.
Par exemple, le diagramme suivant présente la ges- • les attributs de la classe donnent les caracté-
tion des stocks : ristiques de la classe.
• les opérations de la classe représentent les
actions possibles sur la classe.
Par exemple, la classe Stock contient l’attribut
ListeProduits. Cette classe regroupe aussi les
opérations AjouteProduit et RetireProduit. Ces
opérations sont applicables aux instances de
la classe.
Remarque : Le langage UML définit trois niveaux
de visibilité pour les attributs et les opérations :
• Public : l’élément est visible par toutes les
autres classes.
• Protégé : l’élément est visible par la classe
elle-même et par les sous-classes.

• Privé : l’élément est visible uniquement par • le développeur puisse implémenter ces élé- Par exemple : • objet composite : représente de manière
la classe. ments. • l’acteur Client peut être de deux types : visuelle un objet formé d’autres objets. Par
• Relation : décrit le comportement des classes Par exemple, il est possible de décrire le compor- Client individuel ou Client d’entreprise. exemple : une fenêtre qui contient des ascen-
entre elles. Trois types de relations existent : tement d’un téléphone portable à l’aide d’un dia- • la vérification de l’identité d’un utilisateur seurs, des boutons, ...
• Association : Relation structurelle entre gramme de cas d’utilisation. peut être effectuée de deux façons : saisie • lien : représente les relations entre les différents
classes. Par exemple, la classe Commande du mot de passe ou vérification de l’em- objets.
est liée aux classes Produit et Client. Un preinte digitale.
Client peut passer plusieurs Commandes. 2.4 Diagramme de composants
Une commande est constituée de plusieurs Un diagramme de composants décrit l’architecture
produits. Une commande doit obligatoirement physique et statique d’une application informa-
contenir au moins un produit. tique. Par exemple : fichiers sources, librairies, exé-
• Dépendance : Relation d’utilisation qui cutables, ...
établit que les instances d’une classe sont Par exemple, le diagramme suivant présente le
reliées aux instances d’un autre élément. fonctionnement d’un programme permettant de se
Par exemple, la classe Commande utilise la loguer en mode texte sous Unix.
classe Stock : avant d’ajouter un produit dans
une commande, il est nécessaire de vérifier
Un diagramme de cas d’utilisation est composé
que ce produit est en stock.
des éléments suivants :
• Généralisation : Relation entre une classe
• Acteur : représente le rôle des utilisateurs de • Paquetage : divise et organise la représentation
générale (parent) et une classe spécifique (en-
l’application. Par exemple, une personne qui tra- du diagramme (de la même manière que les
fant) qui en dérive. Par exemple, les classes
vaille dans une banque sera le Gestionnaire de répertoires organisent les fichiers). Chaque
Bateau à voile et Bateau à moteur sont déri-
prêts. Si cette personne à un compte dans cette paquetage peut contenir des acteurs et des cas
vées de la classe Bateau.
banque, elle jouera aussi le rôle de Client. d’utilisation.
• Cas d’utilisation : décrit une séquence d’actions
exécutées par l’application. Par exemple, Passer 2.3 Diagramme d’objets
une commande, Saisir une facture, Créer une Un diagramme d’objets représente un ensemble
nouvelle fiche client, ... d’objets et leurs relations à un moment donné. Un diagramme de composants est composé des
Un cas d’utilisation décrit ce que fait une appli- éléments suivants :
Un diagramme d’objets est utilisé pour montrer
cation mais ne précise pas comment l’applica- un contexte (avant ou après une interaction entre • module : représente les différents éléments phy-
tion le fait. objets par exemple). siques constituant une application informatique.
• Relation : décrit le comportement des acteurs Par exemple : un fichier, une librairie, ...
Par exemple, le diagramme suivant présente une Un module peut être représenté :
par rapport aux cas d’utilisation. Trois types de partie de la structure générale des motos :
relations existent : • soit par une spécification qui montre l’inter-
• Association : Relation structurelle entre deux face du module. Cette spécification peut être
éléments reliés. générique dans le cas de classes paramé-
trables.
• Dépendance : Relation qui établit qu’un
élément en utilise un autre. Par exemple, le • soit par son corps qui présente l’implémenta-
• Paquetages : permettant de diviser et d’orga- Client d’une banque peut retirer de l’argent tion du module.
niser la représentation du diagramme (de la dans un distributeur automatique. Dans • tâche : représente un composant ayant son
même manière que les répertoires organisent ce cas, l’action Retrait d’argent dépend du propre flot (thread) de contrôle.
les fichiers). Chaque paquetage peut contenir Client. • programmes principaux de l’application infor-
des classes et des relations. Pour pouvoir retirer de l’argent, le Client doit matique.
Grâce à la génération d’un diagramme de classes, préalablement saisir son code confidentiel. • sous-programmes : regroupent les procédures
il est possible de créer la structure des classes Dans ce cas, l’action Retrait d’argent dépend et les fonctions qui n’appartiennent pas à des
de la Saisie du mot de passe. Un diagramme d’objets est composé des éléments
WEBDEV utilisées dans votre application. classes.
suivants :
2.2 Diagramme de cas d’utilisation • objet : représente une instance d’une classe.
Remarque : Si un diagramme de classes est
Un diagramme de cas d’utilisation permet de visua- ouvert, il est possible de créer un objet à partir
liser le comportement d’un système de telle sorte d’une classe présente dans ce diagramme (drag
que : and drop à partir du volet "Analyse UML").
• l’utilisateur puisse comprendre comment utiliser
• Généralisation : relation permettant d’organi-
chaque élément.
ser les éléments selon une hiérarchie.
2.5 Diagramme d’activité sente la durée de vie de l’objet. Par exemple : 2.8 Diagramme d’états-transitions • historique : représente le dernier état actif d’un
"Appelant", "Appelé", ... super-état.
Un diagramme d’activité représente le comporte- Un diagramme d’états-transitions présente un
ment d’une méthode ou le déroulement d’un cas • période d’activation d’un objet : Sur la ligne automate à états finis. Il permet ainsi de décrire • souche : permet de symboliser les états conte-
d’utilisation. de vie d’un objet, il est possible d’insérer des les changements d’états d’un objet ou d’un com- nus dans un super-état. Il est ainsi possible de
périodes d’activation de l’objet. Ces périodes posant. relier ces états à d’autres états n’appartenant
Par exemple, le diagramme suivant présente le représentent les moments où l’objet est actif. pas au super-état.
déroulement d’un barrage : Un état se caractérise par sa durée et sa stabilité.
• message : représente, grâce à des flèches • transition : représente le passage d’un état à
horizontales, les messages échangés entre les Une transition représente le passage instantané un autre.
différents objets. Ces flèches sont orientées d’un état vers un autre.
de l’émetteur du message vers le destinataire. Une transition est déclenchée : 2.9 Diagramme de déploiement
L’ordre d’envoi des messages est donné par la • soit par un événement. Un diagramme de déploiement montre la répar-
position des flèches sur l’axe vertical. • soit automatiquement lorsqu’aucun événement tition physique des matériels (les nœuds) utilisés
Par exemple : "Décroche", "Sonnerie", ... déclencheur n’est spécifié. dans un système et l’association des programmes
Par exemple, le diagramme suivant représente le Par exemple, le diagramme suivant présente les exécutables à ces matériels.
début d’une communication téléphonique : différentes étapes d’une machine à laver les voi- Par exemple, le diagramme suivant présente les
Un diagramme d’activité est composé des élé- tures : différents matériels utilisés dans une entreprise :
ments suivants :
• activité : représente une étape particulière
dans l’exécution d’un mécanisme. Par exemple :
"Etablir un devis", "Ouvrir la fenêtre", "Vérifier les
connaissances", ...
• barre de synchronisation : permet de synchroni-
ser les différentes activités :
• soit en indiquant les activités à effectuer
avant une certaine activité. Par exemple :
"Appuyer sur l’embrayage" et "Enclencher une
vitesse" avant de "Relâcher l’embrayage".
2.7 Diagramme de collaboration
• soit en indiquant les activités à effectuer en
parallèle. Un diagramme de collaboration présente l’orga-
Un diagramme de déploiement est composé des
• objet : permet de rattacher des activités à nisation structurelle des objets qui envoient et re-
éléments suivants :
l’objet qui réalise ces activités. Par exemple, çoivent des messages.
• classe de nœuds : représente une classe de res-
les activités "Commander" et "Payer" sont ratta- Par exemple, le diagramme suivant montre l’utilisa- Un diagramme d’états-transitions est composé des source matérielle. Par exemple : un serveur, un
chées à l’objet "Client"; les activités "Enseigner", tion d’un ascenseur par une personne : éléments suivants : PC, une imprimante, ...
"Contrôler les connaissances" sont rattachées à • état : représente la valeur des attributs d’un
l’objet "Enseignant". • instance d’un nœud : représente une ressource
objet à un instant donné. matérielle. Par exemple : le serveur numéro 3,
• émission de signal : représente l’envoi d’un • état initial : représente l’état au démarrage du l’imprimante numéro 7, ...
signal vers un objet. système. • connexion : décrit le support de communication
• attente de signal : représente l’attente d’un • état final : représente l’état dans lequel se entre deux nœuds. Par exemple : liaison RNIS
signal en provenance d’un objet. trouve le système à la fin du fonctionnement. ou TCP/IP.
• transition : représente le passage d’une acti- • super-état : permet de structurer le diagramme
vité terminée à une autre. Par exemple : "Trop en indiquant plusieurs niveaux de distinction
d’eau", "Assez d’argent", ... entre les états.
2.6 Diagramme de séquence
Un diagramme de séquence représente l’ordre
Un diagramme de collaboration est composé des
chronologique des messages envoyés et reçus par
éléments suivants :
un ensemble d’objets.
• objet : représente les différents objets utilisés.
Un diagramme de séquence est composé des élé-
ments suivants : • acteur : représente un élément externe du sys-
tème. Par exemple une personne.
• objet : représente les différents objets utilisés.
Chaque objet est représenté par un carré sur- • message : représente les messages échangés
montant une ligne en pointillé. Cette ligne repré- entre les différents objets.

Groupware
Contenu
Le groupware utilisateur en pratique
utilisateur
1 Présentation
Le Groupware Utilisateur permet d’inclure simplement une gestion des utilisateurs et de
leurs droits dans un site WEBDEV. Un site Intranet ou Internet nécessite la définition • les commerciaux peuvent consulter le tarif et
Deux types d’utilisateurs sont pris en compte : du rôle des différents intervenants. Il est souvent établir les commandes, gérer de nouveaux
• utilisateur simple, utilisant directement le site. nécessaire de prévoir différents niveaux d’accès clients.
selon les fonctions de l’utilisateur. • les directeurs commerciaux ont accès à toutes
• superviseur, pouvant configurer les utilisateurs et leurs droits. En effet, tous les utilisateurs n’ont pas les mêmes les options.
fonctions, ni les mêmes besoins. Leur domaine Pour gérer ces niveaux d’accès dans vos sites
Utilisateur d’action doit donc être plus ou moins limité. WEBDEV, il suffit d’intégrer le groupware utilisateur
1 Lancement du site Prenons un exemple simple : lors de la mise en
place d’une gestion commerciale, l’application pro-
à votre site. Quelques clics de souris suffisent à
transformer une application classique en une ap-
pose les fonctionnalités suivantes : plication gérant de nombreux niveaux d’accès. La
mise en place est instantanée.
3
• Consultation du tarif,
2 Identification
Utilisation
du site • Modification du tarif, Lors de l’exécution du site, le responsable pourra
créer des utilisateurs (identifiés par leur login et
• Saisie des commandes,
leur mot de passe) et leur donner accès à l’une ou
• Saisie des clients. l’autre des fonctionnalités du site.
Utilisation Vérification Selon l’utilisateur les accès possibles sont diffé-
des droits des droits Remarque : Le groupware utilisateur est disponible
rents. Quelques exemples : dans les sites dynamiques WEBDEV exécutés sous
• les secrétaires peuvent consulter le tarif et créer Windows ou Linux. Le groupware utilisateur n’est
Superviseur des commandes. pas disponible dans les sites statiques, PHP, AWP
HFSQL Classic,
Client/Serveur, ou Ajax.
Accès Natif,
LDAP
Base de données
du Groupware Utilisateur 2 Comment fonctionne le groupware utilisateur ?
Configuration des Un site utilisant le groupware utilisateur a deux Le menu avancé permet au superviseur de :
droits et des utilisateurs niveaux d’utilisation :
4 Menu du • lancer le site.
superviseur • le niveau utilisateur. • configurer le groupware.
• le niveau superviseur. La configuration du groupware consiste à créer des
utilisateurs, des groupes et d’associer des utilisa-
2.1 Le niveau utilisateur teurs aux groupes, à gérer les droits de chaque uti-
L’utilisateur se connecte à l’application grâce à une lisateur (ou groupe) sur chacune des pages du site.
page de login et accède aux fonctionnalités qui lui Les droits sont définissables au niveau des options
sont autorisées. de menu, des groupes de champs et des champs.
Historique Remarque : Le groupware utilisateur peut per- Le superviseur peut rendre ces éléments grisés,
des connexions inactifs ou invisibles. Ces configurations sont prio-
mettre de se connecter en utilisant un annuaire
LDAP. ritaires sur toute configuration effectuée dans le
programme.
2.2 Le niveau superviseur Pour plus de détails sur la configuration du
Le superviseur se connecte à l’application par groupware par le superviseur consultez le chapitre
une page de login et accède à un menu avancé lui "Paramétrer le site utilisant le groupware utilisa-
permettant de configurer les utilisateurs et leurs teur", page 134.
droits, ou bien de lancer l’application. Remarque : Toutes les informations concernant les
utilisateurs et leurs droits sont stockées dans des
fichiers de données au format HFSQL.

3 Mise en place du groupware utilisateur Le mot de passe des fichiers de données Deux modes sont disponibles :
Par défaut, les fichiers de données du groupware • Sans gestion des droits : Aucun fichier de
utilisateur ont un mot de passe spécifique. Ce mot données du groupware ne sera créé. Si le lance-
3.1 Ajouter le groupware utilisateur dans un Lancement du groupware utilisateur de passe est : "PCSGPW2001". ment est automatique, la page de login deman-
site Deux modes de lancement du groupware utilisa- Pour changer ce mot de passe, saisissez le nou- dera à l’utilisateur de s’identifier. Si l’utilisateur
teur sont disponibles : veau mot de passe dans l’onglet "Fichiers" de la est enregistré dans l’annuaire LDAP, le site se
Pour mettre en place le groupware utilisateur dans fenêtre de description du groupware utilisateur. lancera, sinon il se fermera. Il n’est pas possible
un site WEBDEV, une seule option suffit : sous le Les caractères saisis apparaissent sous forme à un superviseur de paramétrer les droits sur
volet "Projet", dans le groupe "Projet", cliquez sur d’étoiles. les pages.
"Groupware Utilisateur". La fenêtre de paramétrage • Avec gestion des droits : Seuls les utilisateurs
du groupware utilisateur permet de définir : présents dans l’annuaire LDAP pourront se
• Le mode de gestion du groupware utilisateur. connecter. Le paramétrage des droits sur les
• Le type de lancement du groupware utilisateur. fenêtres est disponible.
• L’emplacement des fichiers de données du Pour plus de détails, consultez l’aide en ligne.
groupware utilisateur. • Lancement automatique : La page de login du Remarque : Le groupware utilisateur fonctionne
Mode d’intégration du groupware groupware utilisateur est lancée avant toute avec Active Directory. Il ne fonctionne pas avec
utilisateur autre page de l’application. Le code d’initialisa- openLDAP.
Plusieurs modes d’intégration du groupware utilisation du projet est exécuté après l’ouverture et la
teur sont disponibles : validation de la page de login.
• Lancement manuel : La page de login ne sera
ouverte que si la fonction gpwOuvre est utilisée.
Cette option permet d’exécuter le code d’initia-
lisation du projet par exemple, avant d’ouvrir la Remarque : Ce mot de passe est utilisé par
page de login. Il est ainsi possible par exemple exemple lors de la ré-indexation ou de l’ouverture
d’afficher une page demandant la langue d’exé- des fichiers de données avec l’outil WDMAP.
cution du site.
Pour plus de détails sur ces fichiers de données
Login automatique en mode test et leur configuration (répertoire d’installation, ...),
3.2 Tester le site
Vous pouvez indiquer le login et le mot de passe consultez l’aide en ligne.
• Groupware utilisateur automatique : toute la à utiliser en mode "Test automatique". Ces infor- Lors du test d’un site gérant le groupware utilisa-
Identification
programmation du groupware utilisateur est mations seront utilisées si un test automatique est teur, la première page apparaissant est automati-
Le groupware utilisateur propose plusieurs types quement la page de login (quelle que soit la pre-
automatiquement intégrée à votre site. réalisé sur l’application. d’identification des utilisateurs : mière page définie dans votre site).
Aucune personnalisation n’est possible. Le
gabarit du projet est automatiquement appliqué Fichiers de données du groupware • Identification gérée par le groupware utilisateur Par défaut, un seul utilisateur existe : le supervi-
à toutes les pages utilisées par le groupware utilisateur de WEBDEV. seur. Pour se connecter en tant que superviseur, il
utilisateur. Le groupware utilisateur utilise plusieurs fichiers • Identification à partir d’un annuaire LDAP. suffit de saisir les informations suivantes dans la
Ce mode d’intégration permet de suivre auto- de données spécifiques. Ces fichiers de données Identification gérée par le groupware utilisateur page de login :
matiquement les éventuelles évolutions du permettent notamment de gérer les utilisateurs, les • Nom : SUPERVISEUR
groupes, les droits et les éléments du site. Les login et mot de passe sont enregistrés dans les
groupware utilisateur. fichiers de données du groupware utilisateur. • Mot de passe : SUPERVISEUR
• Groupware utilisateur personnalisé : toute la Le groupware utilisateur peut être utilisé :
Identification à partir d’un annuaire LDAP Vous pouvez alors soit tester votre site, soit configu-
programmation du groupware utilisateur est • soit avec des fichiers de données HFSQL rer le fonctionnement du groupware.
Classic. Dans ce cas, l’onglet "Fichiers" permet Si votre client utilise un annuaire LDAP au sein
automatiquement intégrée à votre application
de spécifier si nécessaire l’emplacement des de son entreprise, il est possible de brancher le Remarques :
via un composant interne. Toutes les pages né-
fichiers de données. groupware utilisateur sur cet annuaire. Il suffit de • Pour que la première page de votre site ne soit
cessaires à la gestion du groupware utilisateur
préciser dans l’onglet "Identification" les caractéris- pas la page de login, cochez l’option "Lancement
(login et gestion des utilisateurs) sont automa- • soit avec des fichiers de données HFSQL Client/ tiques de l’annuaire LDAP (serveur, port, base, ...). manuel" dans l’onglet "Exécution" des options
tiquement ajoutées à votre projet. Vous pouvez Serveur. Dans ce cas, l’onglet "Fichiers" permet Ainsi le compte et le mot de passe présent dans du groupware Utilisateur. Il suffira d’utiliser la
ainsi personnaliser totalement toutes les pages de définir les paramètres d’accès à la base de l’annuaire LDAP seront automatiquement deman- fonction du WLangage gpwOuvre pour afficher la
utilisées par le groupware utilisateur. données HFSQL Client/Serveur, ainsi que le dés à l’utilisateur. page de login.
Le détail des différentes pages du groupware utili- répertoire des fichiers.
sateur est présenté dans l’aide en ligne.

• Les pages de gestion du groupware utilisateur de cliquer sur "Déployer le site". Remarques : l’application.
sont exécutées avant le code d’initialisation du Un écran spécifique au groupware utilisateur per- • Il est conseillé de changer le mot de passe du • Inactif : l’élément est affiché mais toute saisie
projet. met de configurer l’emplacement des fichiers de superviseur dès la première utilisation. est impossible.
• La première page de votre site définie dans données propres au groupware utilisateur. • Si vous utilisez un annuaire LDAP, vous avez la • Grisé : l’élément est affiché mais grisé. Toute
le projet sera lancée après la page de login Remarques : possibilité d’importer les utilisateurs présents saisie est impossible.
(lorsque l’utilisateur n’est pas le superviseur). • Si vous avez paramétré les fichiers de données dans l’annuaire pour gérer les droits de ces • Invisible : l’élément n’est pas affiché.
• Pour ne pas lancer le groupware utilisateur lors du groupware utilisateur pour votre client, il est utilisateurs.
des tests de l’application, il suffit de sélection- nécessaire de les sélectionner lors de la prépa- 4.3 Afficher les statistiques
ner l’option "Pas de groupware utilisateur" dans ration de l’installation. Il est donc nécessaire 4.2 Gérer les droits
Pour chaque site, il est possible d’obtenir des sta-
l’onglet "Intégration" des options du groupware de personnaliser la liste des fichiers de l’instal- Pour chaque utilisateur (ou groupe d’utilisateurs), tistiques d’utilisation selon l’utilisateur, pour une
utilisateur. lation. le superviseur peut gérer leurs droits sur les diffé- période spécifique.
Si vous rebranchez le groupware utilisateur • Si vous n’avez pas paramétré les fichiers du rents éléments des pages du projet.
par la suite, les fichiers de données utilisés groupware, lors du premier lancement de l’appli- 4.4 Migrer des données
Pour chaque association utilisateur / page, il est
précédemment pour le groupware utilisateur ne cation, seul l’utilisateur Superviseur existera possible de définir un état spécifique pour tous les A partir de la version 19, le groupware utilisateur
seront pas effacés. dans l’application. éléments de la page. a évolué. Les fichiers de données utilisés par le
3.3 Installer un site utilisant le groupware Conseil : si vous ne configurez pas les différents Les éléments gérés dans les pages, les pages in- groupware utilisateur ne sont plus les mêmes.
utilisateur niveaux d’utilisation du groupware utilisateur pour ternes et les modèles de pages sont les suivants : L’administrateur du groupware utilisateur peut mi-
vos clients, il est conseillé de leur fournir un docu- • les champs, les groupes de champs, grer les données existantes au nouveau format et
L’installation d’un site utilisant le groupware utili- ment reprenant tous les champs de vos pages pour
sateur se fait comme pour tout autre site : sous le • les options de menu. ainsi récupérer automatiquement les données uti-
obtenir une configuration optimisée. lisées dans des versions précédentes. Cette migra-
volet "Projet", dans le groupe "Génération", il suffit Les états disponibles pour chaque élément sont
les suivants : tion peut être effectuée quel que soit le format des
données : HFSQL Classic, HFSQL Client/Serveur,
• Défaut : le comportement de l’élément corres-
4 Paramétrer le site utilisant le groupware utilisateur pond au comportement par défaut, défini dans
Connecteur Natif.
Lorsque le site est déployé, le paramétrage du 4.1 Gérer les utilisateurs

groupware utilisateur est réalisé par le superviseur 5 Conseils pour un site gérant le groupware utilisateur
La gestion des utilisateurs consiste à :
de l’application.
• créer des utilisateurs,
Ce paramétrage consiste à créer des utilisateurs,
des groupes d’utilisateurs et à leur attribuer cer- • créer des groupes, 5.1 Utilisation de groupes de champs Lors de la configuration du groupware utilisateur, le
tains droits pour chaque champ de chaque page • associer des utilisateurs à des groupes. superviseur peut définir d’autres caractéristiques
Pour simplifier le paramétrage de la gestion du
du site. de visibilité. Les caractéristiques définies par le
La création d’un nouvel utilisateur consiste à don- groupware utilisateur en fonction des utilisateurs, il
superviseur sont prioritaires.
Ces droits consistent à rendre visible, invisible ou ner les informations suivantes : est conseillé d’utiliser des groupes de champs.
grisé des champs, des groupes de champs, des Par exemple, un bouton permet de rendre un
• le nom de l’utilisateur (obligatoire) Il est par exemple possible de créer dans vos
options de menus. champ actif. Or ce champ a été grisé par le super-
• le prénom de l’utilisateur pages des groupes de champs correspondant aux
viseur. Votre code ne sera pas pris en compte et le
Pour paramétrer le groupware utilisateur, il suffit • le login de l’utilisateur. Ce login correspond à champs à afficher pour un type d’utilisateur.
champ ne sera pas actif.
de : l’identifiant de l’utilisateur lors de sa connexion La possibilité d’associer un champ à plusieurs
1. Lancer le site et de se connecter en tant que à l’application. groupes de champs augmente les combinaisons 5.3 Définition des droits
superviseur : • le mot de passe de l’utilisateur. Ce mot de passe disponibles.
Pour obtenir une définition des droits correspon-
• Nom : SUPERVISEUR n’est pas obligatoire et peut être saisi par l’utili- Ces groupes de champs peuvent être créés dans dant aux fonctionnalités de votre site, il est conseil-
• Mot de passe : SUPERVISEUR sateur lui-même lors de sa première connexion votre site uniquement en vue d’une gestion du lé :
(cochez l’option correspondante). groupware, sans programmation spécifique de
2. Choisir l’option "Configurer le groupware". • soit d’effectuer la configuration des droits vou-
Il est possible de définir l’utilisateur comme étant votre part.
3. La page de gestion du groupware utilisateur lue par l’utilisateur de votre application avant de
s’affiche. Cette page permet de : un superviseur du site. 5.2 Visibilité des champs créer la procédure d’installation. Il suffit alors
• gérer les utilisateurs et les groupes. Il est bien entendu possible de modifier ou de sup- d’ajouter les fichiers de données du groupware
primer un utilisateur. La suppression d’un utilisa- Lors du développement de votre application, vous lors de la création de l’installation du site.
• gérer les droits. pouvez définir les caractéristiques de visibilité des
teur permet soit de supprimer entièrement l’utilisa- • soit de livrer un dossier de programmation per-
• afficher les statistiques. teur, soit de supprimer uniquement ses droits. différents éléments de vos pages :
mettant de donner les noms des champs, des
• migrer les données provenant d’un groupware Les utilisateurs peuvent être rassemblés en • soit lors de la description de l’élément (fenêtre groupes de champs et des options à gérer selon
utilisateur version 18 et antérieure. groupes. à 7 onglets), le niveau d’utilisation du site.
Un utilisateur peut être associé à plusieurs • soit par programmation (propriété Etat ou pro-
groupes. priété Visible).

Sites
Contenu
Sites multilingues en pratique
multilingues
1 Présentation
WEBDEV permet de créer très rapidement des sites multilingues à partir d’un même
projet. Un site multilingue pourra être diffusé dans plu- Remarques :
sieurs langues. Les différentes langues du site • Si le système d’exploitation du poste en cours
1
seront prises en compte lors des différentes étapes gère plusieurs langues (Hébreux, Arabe,
Choix des langues du développement. Grec, ...), lors de la saisie des traductions dans
- Projet Pour développer un site mutlilingue, les étapes ces langues, l’alphabet correspondant sera
- Analyse sont les suivantes : automatiquement utilisé.
1. Choix des langues gérées par le projet et l’ana- • Si votre site est multilingue, il est nécessaire
lyse. de gérer cette fonctionnalité dans les pages du
2. Saisie des différents éléments du projet (pages, groupware utilisateur et dans les pages de ges-
2 code, ...) dans les différentes langues du projet. tion automatiques des erreurs HFSQL. Pour plus
Traduction des éléments de détails, consultez l’aide en ligne.
du projet 3. Détermination de la langue du projet par pro-
grammation. • La gestion de l’Unicode est disponible dans les
- Traduction directe fichiers de données HFSQL et dans les champs
- Traduction via WDMSG, WDINT, 4. Gestion des alphabets spécifiques dans les
fichiers de données. des pages.
WDTRAD, ...
5. Création de la bibliothèque et du programme
d’installation.
3 Programmation Fichiers de données 2 Choix des langues gérées par le projet et l’analyse
- Choix de la langue du site - Choix de l’alphabet
(fonction Nation) (fonction ChangeAlphabet)
- Choix de l’alphabet - Prise en compte de l’alphabet à la 2.1 Langues gérées par le projet Options linguistiques
(fonction ChangeAlphabet) création des fichiers (fonction HCréation*) Les différentes langues gérées par le projet sont L’onglet "Langues" de la description du projet per-
- Prise en compte de l’alphabet lors de définies dans la description du projet : met également de définir toutes les options spéci-
la réindexation (fonction HRéindexe) fiques à une langue : nombre, monétaire, date, ...
1. Sous le volet "Projet", dans le groupe "Projet",
cliquez sur "Description". La fenêtre de description Par défaut, les paramètres utilisés sont ceux
du projet s’affiche. définis dans les options linguistiques de Windows
(accessibles depuis le panneau de configuration de
4
2. Dans l’onglet "Langues", il est possible d’ajou-
Bibliothèque Windows).
ter ou de supprimer les langues gérées par le
projet. Lors de la création d’un champ de saisie ou
Choix des langues de la d’une colonne de table affichant des données de
bibliothèque Les différentes langues sélectionnées seront pro-
type numérique (nombre, monétaire, date, heure,
posées pour toutes les informations des différents
durée, ...), le masque de saisie utilisé sera auto-
éléments ou objets pouvant être traduites (libellés
matiquement le masque défini dans les options de
des champs, options de menus, messages d’aide
langue du projet. Cette option est disponible dans
5
associés à un champ, ...).
Programme d’installation les pages.
Lors de la modification des différentes langues du
En exécution, lorsqu’un champ de saisie ou une
- Langues proposées projet, les modifications seront automatiquement
colonne de table a pour masque "Défini par le pro-
- Traduction du programme prises en compte :
d’installation jet", le masque de saisie / d’affichage s’adaptera
• pour tout nouvel élément ou objet créé sous automatiquement selon les options choisies dans
l’éditeur de WEBDEV, le projet pour la langue affichée en exécution.
• pour tout élément ou objet ouvert sous l’éditeur Remarque : Les options linguistiques permettent
de WEBDEV. également de définir le sens d’écriture et l’alphabet
La langue principale correspond à la langue utilisée utilisé (option "divers").
par défaut en exécution.

2.2 Langues gérées par l’analyse cription des champs liés aux rubriques (options, 3.2 Langues utilisant un alphabet spécifique utilisateur dans votre site. Rappel : Pour paramé-
libellés, ...) dans les différentes langues gérées trer le groupware utilisateur, sous le volet "Projet",
Si votre projet utilise une analyse, le choix des diffé- par l’analyse. Lors de la génération d’un "RAD Si votre site gère des langues utilisant des alpha- dans le groupe "Projet", cliquez sur "Groupware
rentes langues gérées par l’analyse se fait directe- application complète" ou d’un RAD page, ces bets spécifiques (Grec, Russe, ...), il est nécessaire Utilisateur".
ment sous l’éditeur d’analyses. En effet, une même informations seront automatiquement prises en de saisir la traduction des différents messages
analyse peut être partagée entre différents projets multilingues en utilisant ces alphabets spécifiques. Les différentes pages du groupware utilisateur se-
compte pour toutes les langues communes à ront intégrées dans votre projet.
ne proposant pas tous les mêmes langues. Ainsi, le l’analyse et au projet. WEBDEV permet de gérer automatiquement l’utili-
nombre de langues défini pour l’analyse peut être sation des alphabets spécifiques sous l’éditeur. Il ne restera plus qu’à traduire ces pages.
supérieur à celui défini pour le projet. • pour les informations imprimées dans le dossier Remarque : Si nécessaire, décochez l’option
de l’analyse (notes du fichier de données ou de En effet, dès que le caret (curseur de saisie de
Pour configurer les différentes langues gérées par la souris) est positionné dans une zone de saisie "Lancement automatique" : vous pourrez ainsi affi-
la rubrique). cher une page de sélection de langue avant de lan-
l’analyse : d’une langue utilisant un alphabet spécifique, la
1. Affichez l’analyse de votre projet sous l’éditeur. 2.3 Langues gérées par les différents élé- langue d’entrée (alphabet utilisé par le clavier) cor- cer la page de login.
2. Affichez la fenêtre de description de l’analyse : ments du projet respondante est automatiquement activée. 3.4 Traduction des messages présents dans
sous le volet "Analyse", dans le groupe "Elément Par défaut, les différents éléments du projet Ainsi, si vous saisissez un libellé dans la zone le code WLangage
courant", cliquez sur "Description". (pages, états, code, classes, ...) gèrent les mêmes Russe de la description du libellé, l’alphabet utilisé
par le clavier sera automatiquement le russe. Dans votre code, diverses fonctions du WLangage
3. Sélectionnez l’onglet "International". langues que le projet dans lequel ils ont été créés. vous permettent de communiquer avec l’internaute
Les différentes langues configurées dans l’analyse Il est possible qu’un élément gère plus de langues Rappel : Pour utiliser des alphabets spécifiques,
au moyen de chaînes de caractères. Ces messages
seront proposées : que le projet (cas par exemple où l’élément est il est nécessaire d’installer les fichiers correspon-
doivent être eux aussi traduits dans les différentes
• lors de la configuration des informations parta- partagé entre plusieurs projets gérant des langues dants aux alphabets voulus dans les options régio-
langues de votre site.
gées des rubriques. Vous pouvez saisir la des- différentes). nales de Windows (panneau de configuration).
Pour traduire une chaîne de caractères saisie dans
3.3 Traductions des pages spécifiques l’éditeur de code :
3 Saisie de l’interface dans les différentes langues 1. Sélectionnez la chaîne de caractères à traduire.
Gestion des erreurs HFSQL
2. Dans le menu contextuel de la sélection, choi-
Par défaut, les pages de gestion des erreurs HFSQL sissez l’option "Traduire". La fenêtre de traduction
Lorsque les différentes langues gérées par le pro- Pour traduire ces informations depuis WEBDEV : sont fournies en anglais et en français. Pour les tra- des messages s’affiche.
jet ont été sélectionnées, il est nécessaire de saisir 1. Affichez les options de WEBDEV pour configurer duire dans une autre langue, il est nécessaire de :
toutes les informations affichées par le site dans 3. Saisissez la traduction et validez. La ligne de
les options de traduction du logiciel utilisé : sous 1. Intégrer les pages d’erreur par défaut dans
ces différentes langues. code apparaît sous l’éditeur de code :
le volet "Accueil", dans le groupe "Environnement", votre projet. Les pages sont fournies à titre
Pour saisir l’interface dans différentes langues, plu- déroulez "Options" et sélectionnez "Options géné- d’exemple dans le répertoire \Programmes\
sieurs éléments doivent être pris en compte : rales de WEBDEV". Données\Pages prédéfinies\HFSQL - Pages assis-
• Le mode de traduction choisi. 2. Dans l’onglet "Traduction", choisissez : tance automatique.
• Le drapeau indique que des traductions
• Les langues gérées. • l’outil de traduction par défaut (et les modali- 2. Personnaliser la gestion des erreurs pour existent pour cette chaîne de caractères. Pour
• L’utilisation de pages spécifiques (groupware tés de transmission du texte à traduire et du utiliser les pages HFSQL de gestion des erreurs afficher la fenêtre de traduction, il suffit de cli-
utilisateur, Gestion automatique des erreurs texte traduit). (fonction HSurErreur). quer sur ce drapeau.
HFSQL). • les langues source et destination de la tra- 3. Traduire les différents messages (voir para- • Le chiffre (2 dans notre exemple) indique le
• Les messages affichés par programmation. duction. graphe précédent). nombre de traductions saisies pour cette
3. Si un outil de traduction est précisé, dans Groupware utilisateur chaîne de caractères.
3.1 Mode de traduction choisi chaque élément contenant des informations à
Par défaut, le groupware utilisateur est livré en Remarque : Pour transformer tous les messages
WEBDEV propose plusieurs modes de traduction : traduire, un bouton "Traduire" sera affiché. Ce de votre code en messages multilingues, sous le
anglais et en français.
bouton permettra de traduire le texte sélectionné volet "Code", dans le groupe "Langues", déroulez
• Traduction automatique des interfaces à l’aide Pour traduire un site utilisant le groupware uti-
en utilisant l’outil de traduction spécifié. "Traduire les chaînes" et sélectionnez "Convertir les
d’un outil de traduction spécifique, présent sur lisateur, il est nécessaire de choisir le mode
le poste de développement. Cette traduction est 4. Pour effectuer la traduction, il suffit de sélec- chaînes simples en messages multilingues".
"Personnalisé" lors de l’intégration du groupware
réalisée directement sous l’éditeur de WEBDEV. tionner le texte à traduire et cliquer sur le bouton
"Traduire".
• Export de tous les messages à traduire à l’aide
de WDMSG et réintégration après traduction. Export et réintégration des informa- 4 Choix de la langue par programmation
tions à traduire
Traduction des interfaces
L’outil WDMSG, disponible séparément, permet Un site multilingue est une application qui pourra lancement de l’application.
Pour chaque objet, différentes zones multilingues
d’extraire tous les messages d’un projet (libellé des être diffusée dans plusieurs langues. L’utilisateur
sont affichées dans la fenêtre de description. Ces • de prévoir une option (option de menu par
champs, ...), puis de les réintégrer après traduction. pourra choisir la langue d’exécution de l’applica-
zones multilingues permettent de saisir les infor- exemple, ou bouton) permettant à l’utilisateur
mations dans les différentes langues gérées par le Contactez le service commercial de PC SOFT pour tion. Il est possible par exemple : de changer de langue en cours d’exécution de
projet. plus de détails sur les conditions d’utilisation de ce • de demander la langue d’exécution au premier l’application.
produit.

10 conseils
Contenu
d’ergonomie ... 3 Vos pages sont très longues ? Permettez à l’internaute de retourner directement
en haut de page.
Lorsque vos pages sont très longues (plus de 2 écrans), utilisez des boutons ou des
liens pour retourner rapidement en haut de la page (et éviter l’utilisation de l’ascenseur).
1 Soignez l’accueil dans votre site.

La page d’accueil est un élément capital d’un site. Dans certains sites, elle se résume à
un formulaire de connexion mais dans la majorité des sites Internet, c’est véritablement
la page d’accroche avec le visiteur (et futur client du site). Son contenu et sa présenta-
tion doivent être spécialement étudiés. N’hésitez pas à lire des ouvrages spécialisés sur
l’ergonomie des sites web pour vous y aider.
2 Contactez-moi
Lorsque l’internaute arrive sur un site, il doit facilement identifier la personne ou la
société responsable du site par un choix de la page d’accueil : il suffit d’indiquer un Début de la page Fin de la page avec un bouton
nom, une adresse postale et une adresse Internet, ... permettant à l’internaute de vous permettant de revenir en haut de page
4
contacter.
Harmonisez le style et l’alignement de vos boutons.
Vérifiez que vos boutons utilisent tous le même "look" et vérifiez l’alignement de vos
boutons. L’éditeur de pages dispose d’un système de magnétisme et d’alignement auto-
matique pour faciliter cette tâche.
Boutons non alignés, Boutons alignés

utilisant différents styles et harmonisés
Cette page peut afficher une carte permettant de localiser l’entreprise ou le magasin,
les horaires d’ouverture, ...
5 Evitez l’utilisation de framesets.
Les framesets, même s’ils semblent être une approche efficace au premier abord
souffrent de problèmes particuliers : ils sont composés en fait de plusieurs pages. Leur
référencement auprès des moteurs de recherche est plus difficile. La navigation (notam-
ment l’emploi de la touche "Back" du navigateur) est difficile à comprendre pour les
utilisateurs. Il est aujourd’hui recommandé d’éviter de développer des sites en utilisant
des framesets.

6 Vous affichez des listes de plus de 20 éléments ? Utilisez plusieurs pages pour 8 Vous utilisez des images ? Testez leur bon affichage dans vos pages.
lister les éléments.
Le champ réglette vous permettra de passer d’une page à l’autre sans avoir de code à
écrire et l’interface globale de votre site sera moins chargée. Le site sera de ce fait plus
agréable et plus rapide à consulter.
Image sous l’éditeur Image sous le navigateur.

Problème d’affichage des
images
En cas de problème d’affichage, vérifiez principalement que :
• l’image existe,
• l’image est enregistrée dans un format reconnu par le navigateur (GIF ou JPG par
exemple),
• l’image est présente dans le sous-répertoire du projet <NomProjet>_WEB.
7 Utilisez des images à 100% ou Homothétiques centrées.

9 L’internaute doit saisir une quantité ? Utilisez une combo pour simplifier la
saisie des quantités.
Pour conserver les proportions de vos images, il est conseillé de choisir :
• soit des images à 100% (pour les images statiques ou dynamiques ou si l’image est
de taille identique à celle du champ).
• soit des images homothétiques centrées (pour les images générées ou les images de
taille variée provenant d’une base de données) : la taille de l’image s’adaptera homo-
thétiquement à la zone définie pour l’image. Les proportions seront respectées.
10 Vous proposez un catalogue de produits avec possibilité de commander ?

Indiquez toutes les informations sur le produit (nom, référence, prix, ...) à chaque fois,
y compris le bouton ou le lien permettant de commander le produit, l’ajouter à la sélec-
tion, l’ajouter au panier, ...
Image à 100 % si la Image étirée
dimension du champ (déconseillé) Sélection du mode
correspond à celle de d’affichage sous l’éditeur
l’image, sinon image (description de l’image,
Homothétique onglet "Général")

Superposer
Contenu
Personnaliser l’aspect d’un
Contenu
les champs site : éléments d’ambiance
Pour obtenir des effets de transparence ou de profondeur, superposez vos champs. L’aspect graphique d’un site Web est un élément primordial. Avec WEBDEV, il est très
facile d’obtenir du premier coup un site graphiquement abouti avec un aspect profes-
Chaque champ possède une option "Superposition et déplacement" (onglet "UI" de la sionnel. Pour cela, différents outils sont à votre disposition : les ambiances, les palettes
fenêtre de description du champ). et les modèles de pages prédéfinis.
En sélectionnant l’option "Superposable", le champ n’est plus lié aux tables de posi-
tionnement de la page. Vous pouvez déplacer et positionner un champ "au-dessus" de Ambiance
chacun des champs de votre page.
L’ambiance d’un site peut être sélectionnée dans la fenêtre de description du projet
(sous le volet "Projet", dans le groupe "Projet", cliquez sur "Description"). Les ambiances
Attention : Le champ avec l’option "Superposable" passera au-dessus des autres
sont configurées dans l’onglet "Ambiance, Styles". De nombreuses ambiances sont li-
champs. Si plusieurs champs ont cette option activée, leur ordre d’empilement peut
vrées en standard avec WEBDEV.
être défini grâce aux options "Monter", "Descendre", "Premier plan" et "Arrière plan" du
volet "Modifications".
Par exemple, pour superposer un libellé sur une image, il faut rendre le libellé superpo-
sable et positionner le libellé sur l’image.
Sous l’éditeur
Une ambiance est composée de :

• une feuille de styles contenant des styles WEBDEV.
• un répertoire d’images.
• une palette de couleurs par défaut.
• un ensemble d’états utilisé comme base pour construire les nouveaux états du pro-
jet.
Les ambiances peuvent être interchangées à volonté pour modifier l’aspect graphique
d’un site. Lorsque vous changez l’ambiance, WEBDEV adapte automatiquement l’aspect
Sous le navigateur visuel de tous les champs du site.

L’ambiance d’une page peut être définie à trois niveaux différents (par ordre décrois-
Choisir un type de
Contenu
sant de priorité) :
• Dans le projet. bouton/lien
• Dans le modèle de pages dont la page hérite des propriétés.
• Dans la page elle-même.
Selon l’opération à effectuer sur les champs de la
Il faut définir l’ambiance générale au niveau du projet. Si un ensemble de pages doit
page, plusieurs actions de bouton / lien sont dis-
utiliser une ambiance particulière (par exemple les pages de "Promotion" d’un site de
ponibles.
vente), il est possible de remplacer l’ambiance du projet en la redéfinissant au niveau
d’un modèle de pages. Si une page particulière doit avoir une ambiance différente, Le choix de l’action se fait dans la description du
celle-ci peut être choisie au niveau de la page elle-même. champ (onglet "Général").
Voici quelques exemples d’utilisation "classique"
de boutons / liens dans une page :
Les palettes de couleur
Les palettes de couleurs définissent un jeu de couleurs qui sont proposées dans tous
• Envoyer les données de la page en cours au serveur pour traitement
les sélecteurs de couleurs du projet. Les palettes de couleurs sont un moyen simple de
Exemple : Formulaire d’enregistrement : le lien permet de vérifier la validité des infor-
personnaliser l’aspect visuel d’un site.
mations saisies et d’afficher une page de confirmation.
Ces couleurs sont également appliquées sur les styles définis dans l’ambiance du projet Pour effectuer ce type de traitement, utilisez un lien ayant pour action "Envoyer les
afin de permettre de changer rapidement et facilement l’aspect visuel d’un projet. valeurs au serveur". Les données de la page sont envoyées au serveur pour être trai-
La palette de couleurs d’une page peut être définie à trois niveaux différents (par ordre tées.
décroissant de priorité) : • Effectuer un traitement sur le serveur, sans récupérer les données de la page en
• Dans le projet. cours
• Dans le modèle de pages dont la page hérite des propriétés. Exemple : Page de menu constituée de boutons : chaque bouton permet de lancer
• Dans la page elle-même. une page du site.
Pour effectuer ce type de traitement, utilisez un bouton ayant pour action "Ne rien
Il faut définir la palette générale au niveau du projet. Si un ensemble de pages doit uti- envoyer au serveur".
liser une palette particulière (par exemple les pages de la partie "Administration" d’un
site), il est possible de remplacer la palette du projet en la redéfinissant au niveau d’un • Effectuer un traitement en code navigateur
modèle de pages. Enfin, si une page particulière doit avoir une palette différente, la Exemple : Exécuter un calcul simple en local, un contrôle de saisie, ...
palette peut être choisie au niveau de la page elle-même. Pour effectuer ce type de traitement, utilisez un bouton ayant pour action "Ne rien
envoyer au serveur".
Les modèles de pages prédéfinis • Afficher une page extérieure au site WEBDEV
Les modèles de pages prédéfinis fournissent des structures de pages correspondant à Exemple : Lancer un site de moteur de recherche à l’aide d’un bouton.
une grande variété de sites et favorisent la ré-utilisabilité et l’harmonie graphique entre Pour effectuer ce type de traitement, utilisez un bouton ayant pour action "Ne rien
les projets. envoyer au serveur".
De nombreux modèles sont livrés avec WEBDEV et de nouveaux modèles sont livrés • Réinitialiser les champs de la page
régulièrement avec la LST. Exemple : Lien permettant de vider les champs de la page en cours.
Il est possible d’ajouter plusieurs fois le même modèle prédéfini dans un projet pour Pour effectuer ce type de traitement, utilisez un lien ayant pour action "Effacer le
l’utiliser avec plusieurs ambiances ou plusieurs palettes de couleurs par exemple. contenu des champs côté navigateur".
Après avoir été ajouté au projet, le modèle prédéfini peut être ouvert dans l’éditeur et
modifié comme n’importe quel autre modèle de pages.
Un modèle de pages prédéfini peut également être utilisé comme base de création d’un
autre modèle de pages.

Empêcher le retour sur
Contenu
Avantage sécuritaire : la
Contenu
une page gestion du "Back"
Un navigateur permet de parcourir les différentes pages d’un site à l’aide des boutons
Le bouton "Précédent" du navigateur permet à l’internaute de revenir sur une page déjà
"Suivant" et "Précédent".
consultée. Cependant, le retour sur une page n’est pas toujours souhaitable.
Par exemple, dans un site commercial, si l’internaute revient sur la page de validation A chaque nouvelle page de type Session affichée sur le navigateur, un contexte de page
de commande, il pourrait valider sa commande 2 fois et donc passer 2 commandes. spécifique à son traitement est créé sur le serveur.
Lorsqu’une même page de type Session est utilisée pour afficher des données diffé-
rentes (page avec table fichier, zones répétées ou page de type "Fiche avec parcours",
...), le contexte de page présent sur le serveur varie en fonction des données affichées.
Lorsque l’internaute appuie sur le bouton "Précédent" (ou "Back"), le navigateur ne
prévient ni le site ni le serveur. Le navigateur revient à la page précédente sans le
contexte correspondant.
Aucune gestion particulière n’est nécessaire lorsque l’on fait un "Back" entre des pages
différentes.
Une gestion spécifique est nécessaire pour une même page de type Session affichant
des données différentes.
Pourquoi gérer le "Back" ? Un exemple simple ...

Pour comprendre la nécessité de la gestion du "Back", étudions un exemple simple : une
page de type Session qui permet d’afficher la liste des fournisseurs.
Etape 1 : Affichage de la liste des fournisseurs
Pour empêcher le retour sur une page par le bouton "Précédent" du navigateur :
1. Affichez la page sous l’éditeur de pages de WEBDEV.
2. Sous le volet "Page", cliquez sur l’icône de regroupement du groupe "Edition" ( ).
La fenêtre de description de la page s’affiche.
3. Affichez l’onglet "UI".
4. Pour l’option "Utilisation du bouton "Précédent" du navigateur", sélectionnez "Inter-
dit".
5. Validez.
Le contexte contient la liste des founisseurs affichés dans le champ Table.

Etape 2 : Clic sur le lien "Clients". Comment gérer le "Back" ?
Pour gérer le "Back", vous pouvez utiliser :
• le code de synchronisation de la page en mode Session. Ce code est appelé en cas
de désynchronisation.
• un champ de saisie caché (champ de saisie invisible) pour identifier l’enregistrement
affiché sur le navigateur.
• l’option "Appeler le traitement de synchronisation de la page si l’internaute a utilisé
le bouton précédent du navigateur" sur vos boutons et/ou vos liens (onglet "Avancé"
de la description du bouton).
Selon le type d’action pouvant être effectué dans la page en mode Session, il est pos-
sible de choisir et de combiner l’une ou l’autre de ces options.
Exemple détaillé de gestion du Back

Une page dynamique permet de parcourir les différents produits d’un site. Les boutons
présents dans la page sont les suivants :
Les clients sont affichés. Le contexte de la page sur le serveur est mis à jour : le contexte
• Retour au menu principal
contient la liste des éléments affichés dans le champ Table (liste des clients).
Cette action ne nécessite pas de gestion particulière du "Back". Ce bouton ne mani-
Etape 3 : Clic sur le bouton "Back" du navigateur. pule pas les fichiers de données : une désynchronisation entre le contexte et la page
affichée n’a pas d’influence.
• Supprimer le produit en cours
L’action "Supprimer le produit en cours" manipule un fichier de données. Il est impor-
tant que l’enregistrement supprimé corresponde à l’enregistrement visualisé par
l’internaute.
Pour gérer le "Back" dans ce cas, il est conseillé d’utiliser :
• un champ caché (invisible) dans la page dynamique : ce champ contiendra l’identi-
fiant de l’enregistrement réellement en cours sur le navigateur.
• le code de synchronisation : ce code permet de mettre à jour le contexte (recherche
de l’enregistrement visualisé par l’internaute).
Les actions effectuées dans le code de synchronisation seront :

1. Relecture de l’enregistrement correspondant à l’identifiant stocké dans le champ
caché.
La page de type Session affichée sur le navigateur correspond à la page affichée à 2. Si l’enregistrement n’est pas trouvé : une page d’erreur est affichée et le code du
l’étape 1. Cependant le serveur n’est pas informé par le navigateur que l’internaute a bouton "Supprimer" n’est pas exécuté.
utilisé la touche Back. Le contexte de page sur le serveur est toujours celui correspon- 3. Si l’enregistrement est trouvé, le contexte de page est alors automatiquement modi-
dant aux clients. fié sur le serveur : le code du bouton "Supprimer" est exécuté.
Si l’internaute sélectionne dans le champ Table un élément (un fournisseur), l’élément
sélectionné sera l’élément correspondant dans le contexte : un client. Il y a désynchro-
La sécurité totale !
nisation entre la page dynamique visualisée et le contexte de page présent sur le ser-
veur. Le moteur WEBDEV détecte cette désynchronisation.
Une gestion du bouton Back est nécessaire.

Gérer le bouton précédent en pratique 2 Empêcher l’utilisation du bouton "Précédent"
Si le bouton "Précédent" du navigateur est utilisé 2.2 Mise en place

pour afficher la page, cette action n’aura aucun
1 Présentation effet.
Pour désactiver le bouton "Précédent" du naviga-
teur pour une page précise :
2.1 Fonctionnement 1. Affichez la fenêtre de description de la page :
Le bouton "Précédent" du navigateur permet à 1.2 Exemple de désynchronisation sous le volet "Page", dans le groupe "Description",
l’internaute d’afficher les pages précédentes déjà La désactivation de la fonction "Page précé- cliquez sur "Description".
Voici un exemple de site :
consultées. dente" du navigateur entraîne l’insertion du code
• Une page du navigateur contient un champ Javascript suivant dans la page HTML générée : 2. Dans l’onglet "UI", pour l’option "Utilisation du
Dans un site WEBDEV en mode Session, chaque bouton "Précédent" du navigateur", sélectionnez
Table fichier relié au fichier ITEM et un lien
page HTML affichée sur le navigateur est associée "Interdit".
"Suivant". <SCRIPT LANGUAGE="JavaScript">
à un contexte de page, présent sur le serveur. history.forward()
• Le fichier ITEM ne contient qu’une rubrique, 3. Validez.
Chaque action effectuée dans une page affichée </SCRIPT>
par le navigateur doit entraîner une action iden- chaque enregistrement est constitué d’une
Pour désactiver le bouton "Précédent" du naviga-
tique sur le contexte de page correspondant pré- lettre de l’alphabet. Lors de l’exécution de la page sous un navigateur, teur pour toutes les pages du projet :
sent sur le serveur. • La page permet d’afficher 6 lignes du champ il sera impossible de revenir sur cette page par le 1. Affichez la description du projet : sous le volet
Or l’utilisation du bouton "Précédent" du navigateur Table, le lien "Suivant" permet d’afficher les 6 bouton "Précédent" du navigateur. "Projet", dans le groupe "Projet", cliquez sur
permet de réaliser une action uniquement sur le suivantes.
Remarques : "Description".
navigateur : la page affichée sur le navigateur et A l’ouverture de la page, le champ Table affiche les 2. Cliquez sur l’onglet "Avancé".
son contexte présent sur le serveur peuvent donc • L’utilisation du bouton "Précédent" du naviga-
6 premiers enregistrements du fichier (de ’A’ à ’F’). teur peut entraîner un clignotement de la page. 3. Pour l’option "Option par défaut pour l’utilisa-
être désynchronisés en cas d’utilisation du bouton Voici un enchaînement d’actions faites par l’utilisa-
• Ce mécanisme peut être mis en échec si un clic tion du bouton "Précédent" du navigateur", cochez
"Précédent" du navigateur. teur :
sur le bouton "STOP" du navigateur intervient "Interdit".
1.1 Deux méthodes de gestion du bouton 1. Clic sur le lien "Suivant" avant l’exécution de l’instruction forward() par le 4. Validez. Cette option sera automatiquement
"Précédent" du navigateur Résultat : le serveur se positionne sur les 6 navigateur. prise en compte pour toutes les nouvelles pages
enregistrements suivants de ITEM et renvoie au du site.
Pour éviter tout problème lié à la désynchronisation navigateur leurs contenus. Le navigateur affiche
entre les pages affichées sur le navigateur et les la page suivante du champ Table avec les 6 nou-
contextes correspondants présents sur le serveur, veaux contenus (’G’ à ’L’). 3 Gestion de la synchronisation
WEBDEV met à votre disposition deux modes de 2. Clic sur le bouton "Précédent" du navigateur
gestion du bouton "Précédent" du navigateur : Résultat : le navigateur affiche la page précé-
• Solution 1 : Empêcher le retour sur cette page dant la première action. Le champ Table affiché 3.1 Présentation 3.2 Synchronisation par défaut
depuis le bouton "Précédent" du navigateur. contient les lettres ’A’ à ’F’. Le serveur n’a pas été
Si le bouton "Précédent" du navigateur est uti- sollicité, il est donc toujours positionné sur les Grâce au mécanisme de synchronisation des Le mécanisme de synchronisation par défaut est
lisé pour afficher la page, cette action n’aura enregistrements ’G’ à ’L’. pages, lors de chaque action effectuée dans une déclenché uniquement si l’option "Utiliser le méca-
aucun effet. page une vérification de synchronisation est auto- nisme de synchronisation des pages" est sélection-
3. Clic sur le lien "Suivant"
• Solution 2 : Gestion de la synchronisation (solu- matiquement réalisée. Cette vérification consiste née pour la page.
Résultat : le serveur se positionne sur les 6
tion par défaut) à vérifier si la page affichée sur le navigateur En cas de désynchronisation, un message d’aver-
enregistrements suivants de ITEM (donc de ’M’ à
Pour chaque action effectuée dans une page correspond bien au contexte de page présent sur tissement informe l’internaute que l’action deman-
’R’). Le navigateur se synchronise avec le serveur
depuis le navigateur, un test de synchronisation le serveur. dée n’a pu être effectuée. La page correspondant
et affiche les mêmes éléments : l’internaute a
entre la page HTML et son contexte est automa- l’impression que certaines informations ne sont Deux modes de gestion de la synchronisation sont au contexte présent sur le serveur est ré-affichée.
tiquement réalisé. pas affichées. disponibles : Le site peut continuer à fonctionner.
Deux modes de gestion de la synchronisation 1. Gestion de la synchronisation par défaut.
sont possibles : Ce dysfonctionnement peut avoir des consé-
2. Gestion de la synchronisation par programma-
• synchronisation par défaut (mode utilisé par quences inattendues lors d’une modification d’un
tion, dans le code de synchronisation de la page.
défaut lors de la création d’une nouvelle enregistrement de fichier (modification de l’enre-
page). gistrement qui n’est pas celui visualisé par l’inter-
naute par exemple).
• synchronisation programmée.
Rappel : chaque action sur le navigateur doit
entraîner une action du serveur : le serveur envoie
alors une réponse au navigateur. Or le clic sur le
bouton "Précédent" du navigateur étant une action
navigateur indépendante de votre site WEBDEV, la
deuxième condition peut ne pas être réalisée.
Cookies : des informations
Contenu
Pour mettre en place la gestion de la synchronisa- 3. Validez. Les pages du projet seront automa-
tion dans une page : tiquement incluses dans l’historique des pages
1. Affichez la fenêtre de description de la page : du navigateur : il sera possible de revenir sur ces
conservées chez l’internaute

sous le volet "Page", dans le groupe "Description", pages par le bouton "Précédent" du navigateur.
cliquez sur "Description". Remarques :
2. Dans l’onglet "UI", pour l’option "Utilisation du • Ce mode de gestion ne nécessite aucun code
bouton "Précédent" du navigateur", sélectionnez WLangage particulier.
"Autorisé (exécute le code de synchronisation)".
• Pour les champs de la page ne nécessitant Un cookie est un fichier enregistré par le site WEBDEV sur le poste de l’internaute. Ce
3. Validez. Cette page sera automatiquement in- pas une gestion de la synchronisation (bouton
cluse dans l’historique des pages du navigateur : fichier peut être relu à tout moment depuis le serveur ou par le navigateur. Les cookies
"Fermer" par exemple), il est possible de débran-
il sera possible de revenir sur cette page par le permettent de stocker des informations persistantes sur le poste de l’internaute.
cher le mécanisme de synchronisation : il suffit
bouton "Précédent" du navigateur. de décocher l’option "Appeler le traitement de Par exemple, lors de la première connexion de l’internaute, des informations lui sont
Pour mettre en place la gestion de la synchronisa- synchronisation de la page si l’internaute a demandées : son nom d’utilisateur, son login, ... et sont stockées sur sa machine. Lors
tion dans toutes les pages du projet : utilisé le bouton précédent du navigateur" dans des connexions suivantes, le site WEBDEV ira directement lire ces informations dans le
1. Affichez la description du projet : sous le volet l’onglet "Avancé" de la description du champ.
cookie créé lors de la première connexion et pourra saluer l’internaute par son prénom
"Projet", dans le groupe "Projet", cliquez sur • Le message d’avertissement peut être person-
"Description". dès la première page.
nalisé (voir le paragraphe suivant).
2. Dans l’onglet "Avancé", pour l’option "Option 1ère connexion
par défaut pour l’utilisation du bouton "Précédent"
du navigateur", cochez "Autorisé (exécute le code
de synchronisation)". Le site WEBDEV enregistre des
informations données par
l’internaute sur son poste.
4 Synchronisation par programmation
Pour gérer la synchronisation par programmation : Remarques :

1. Affichez la fenêtre de description de la page : • La fonction ChangeAction est initialisée avec
sous le volet "Page", dans le groupe "Description", l’action "Ne rien faire" si une fonction du
cliquez sur "Description". WLangage permettant d’afficher ou de ré-affi-
Le nouvel internaute doit ici
2. Dans l’onglet "UI", pour l’option "Utilisation du cher une page est utilisée dans le code de syn- saisir son nom et son mot de passe
bouton "Précédent" du navigateur", sélectionnez chronisation de la page.
"Autorisé". • Pour personnaliser le message de désynchroni-
3. Configurez si nécessaire les champs de la page sation, il suffit de saisir dans le code de synchro- Connexions suivantes
pour lesquels la synchronisation ne doit pas être nisation de la page :
Le site WEBDEV lit des
gérée. 1. le message personnalisé. données précédemment
Pour chaque champ déclenchant une action sur le 2. le ré-affichage de la page en cours sur le enregistrées sur le poste
serveur, il est possible de paramétrer si la gestion serveur (avec la fonction PageActualise par de l’internaute.
de la synchronisation de la page doit être effec- exemple).
tuée (option par défaut) ou ignorée lors de cette • Pour réaliser une synchronisation à partir des
action. Pour ignorer la gestion de la synchronisa- informations présentes sur le poste de l’inter-
tion, il suffit de décocher l’option "Appeler le traite- naute, il est conseillé de :
ment de synchronisation de la page si l’internaute
a utilisé le bouton précédent du navigateur" dans 1. Utiliser un champ caché contenant l’identifiant
l’onglet "Avancé" de la description du champ. de l’enregistrement affiché et sélectionné.
4. Saisissez le code nécessaire à la gestion per- 2. Rechercher dans le code de synchronisation
sonnalisée de la synchronisation dans le code de l’enregistrement en cours sur le navigateur. Cette
Le site WEBDEV affiche par
synchronisation de la page. Utilisez la fonction recherche est réalisée à partir de son identifiant défaut les informations lues dans le cookie
ChangeAction dans le code de synchronisation contenu dans le champ caché.
de la page. Cette fonction permet de déterminer 3. Réactualiser la page. Pour créer des cookies dans un site WEBDEV, utilisez la fonction du WLangage
l’action qui sera faite en cas de désynchronisation CookieEcrit.
de la page.
Pour lire les cookies dans un site WEBDEV, utilisez la fonction du WLangage CookieLit.

Protéger l’accès au site :
Contenu
TLS/SSL : Crypter les
Contenu
mots de passe informations sur le Web
Une gestion d’accès à un site par mot de passe est nécessaire dans deux cas : Par défaut, les données circulant entre le poste de l’internaute et le serveur Web ne
1. Protéger des informations personnelles. sont pas cryptées. L’authenticité de l’identité du serveur, la confidentialité et l’intégrité
2. Limiter l’accès à un site. des données échangées ne sont pas certifiées.
Pour assurer la confidentialité, le mécanisme le plus employé est l’utilisation du pro-
Protéger des informations personnelles tocole TLS/SSL (Transport Layer Security, anciennement Secure Socket Layer). Ce pro-
tocole permet de garantir l’identité du serveur auquel l’Internet accède et crypte les
Pour accéder de nouveau à des données personnelles, l’internaute peut spécifier un données échangées entre le serveur et le navigateur.
mot de passe. Ainsi, dans un site commercial, un mot de passe défini par l’internaute lui
permet d’accéder au détail de ses précédentes commandes. Mise en place des transactions sécurisées par protocole TLS/SSL
Dans ce cas, la gestion de l’accès à un site nécessite : Pour mettre en place des transactions sécurisées par TLS/SSL, il est nécessaire d’effec-
• une identification : tuer les formalités liées à ce protocole (certification payante d’une clé SSL par un orga-
A la première connexion, l’internaute s’identifie et saisit son mot de passe. nisme spécialisé ou génération d’une clé auto-signée pour une utilisation privée ou à
Aux connexions suivantes, l’internaute s’identifie et accède aux fonctionnalités qui lui des fins de test). Pour plus de détails, consultez l’aide en ligne de WEBDEV.
sont réservées (son historique, ...).
• la possibilité pour l’internaute de retrouver un mot de passe oublié. Transactions sécurisées par TLS/SSL dans un site WEBDEV
WEBDEV est livré avec toutes les ressources nécessaires à la gestion de mots de passe Généralement, seul le transfert de données sensibles doit être sécurisé : transfert du
personnels. numéro de carte bancaire par exemple. En effet, le mode sécurisé est plus lent. Tou-
tefois, un nombre croissant de sites fonctionne entièrement en TLS/SSL grâce à l’aug-
Limiter l’accès au site mentation de la puissance des machines ce qui assure une plus grande confidentialité
des opérations des utilisateurs.
Par défaut, un site Internet est accessible à n’importe quel internaute. Mais un site n’est
pas toujours destiné au grand public : certaines fonctionnalités peuvent être réservées La mise en place d’une transaction
à certains types d’internautes (administrateur de site, ...). sécurisée est effectuée lors de l’ou-
verture d’une nouvelle page par un
Dans ce cas, le gestionnaire du site attribue un mot de passe à chaque internaute. Ce
Poste de Poste bouton (ou un lien). Il suffit d’utiliser
mot de passe ne pourra pas être modifié. Ce mot de passe permet un accès à des fonc- l’internaute Serveur la fonction SSLActive dans le code
tionnalités plus ou moins limitées. Clic sur un bouton
navigateur du bouton (ou du lien).
SSLActive(Vrai)
Par exemple, dans un site commercial : Ouverture de la page Dès l’ouverture de la page sécuri-
• un mot de passe spécifique sera attribué aux commerciaux : ils accéderont aux sta- sée, toutes les actions effectuées
tistiques de ventes, ...
Page sécurisée seront en mode sécurisé (c’est-à-
dire crypté).
• un mot de passe spécifique sera attribué à l’équipe marketing : ils pourront mettre en Opérations en
mode sécurisé
ligne de nouveaux produits. Clic sur un bouton

Pour revenir en mode non sécu-
SSLActive(Faux)
Ouverture de la page risé, il suffit d’utiliser la fonction
WEBDEV permet de gérer simplement ces différents types d’accès à un site. SSLActive(Faux) dans le code navi-
Page non sécurisée gateur d’un bouton (ou d’un lien)
permettant d’ouvrir une nouvelle
page.

Paiement sécurisé avec
Contenu
Envoyer des
Contenu
prestataire emails
Différents prestataires permettent de proposer un paiement sécurisé pour tous les sites Dans un site Web, les emails permettent :
commerciaux. Tout paiement réalisé avec une carte bancaire est validé par le presta- • de simplifier la communication entre les internautes : envoi d’emails au responsable
taire auprès du centre de carte bancaire. du site, site de mailing-list, ...
• de valider une prise de commande : dans un site commercial, un email est envoyé
Les différentes étapes du paiement sont les suivantes : aux internautes pour valider leur commande.
• de transférer des données d’un poste à un autre : les nouvelles commandes saisies
3 sur un site commercial sont transférées par email au siège de la société pour traite-
1 2 ment, ...
WEBDEV permet d’envoyer des emails depuis un site par 2 méthodes.
4
Poste 9c
Serveur 1 Envoi de l’email depuis le poste de l’internaute
client 9d Marchand Utilisez cette méthode lorsque l’internaute doit envoyer un email à une adresse défini :
auteur du site, support technique, service commercial, ...
La fonction navigateur EmailOuvreMessagerie permet d’ouvrir le logiciel de messagerie
5 9b de l’internaute. Certains paramètres peuvent être remplis par défaut : adresse email du
SSL 9a SSL destinataire, ...
4 6 Internaute 3 Internaute n
Opérateur Serveur
8 Banque Web
de paiement
1 Consultation du site
Remplissage du panier 5 Affichage de la page
de paiement 9a
Réponse pour le site
marchand
2 Identification
(saisie des coordonnées) 6 Saisie du numéro
de la carte bancaire 9b
Réponse pour le
client Internaute 2
Envoi d’emails
Internaute 1
entre internautes
3 Vérification de la
commande 7 Autorisation bancaire 9c Redirection de la page
de confirmation de la Cette méthode permet d’utiliser directement la messagerie de l’internaute : aucun trai-
9d commande
tement spécifique n’est à effectuer dans le site WEBDEV.
4 Redirection vers le
paiement sécurisé 8 Réponse de la banque

PARTIE 5
2 Envoi de l’email depuis le serveur (pages de type Session
uniquement)
Dans ce cas, c’est le serveur qui gère l’envoi des emails.
L’envoi des emails peut être réalisé :
• directement dans le site WEBDEV (par exemple pour un transfert de données par
email, ou pour un email de validation de commande) ;
• par le spooler d’email (livré avec WEBDEV).
Internaute N
Internaute 3 Serveur Bases de

Web
Serveur d’emails
données
(administrateur WEBDEV)
Internaute 2 ou
Envoi direct des emails
Internaute 1
Utilisez cette méthode pour une gestion personnalisée des emails :

• un contrôle sur le contenu des emails envoyés par les internautes (cas d’un site de
type "liste de diffusion"),
• la vérification de la validité de l’adresse du destinataire,
• le cryptage des informations envoyées par emails,
• la validation d’un traitement, ...
160 Partie 4 : Concepts avancés

Analyse : Structure de la
Contenu
base de données
Lorsqu’un projet WEBDEV, WINDEV ou WINDEV Mobile utilise des fichiers de données, ce
projet doit être associé à une analyse. Une analyse permet de décrire les structures de
données (fichiers de données, rubriques, ...) utilisées dans votre projet.
L’éditeur d’analyses permet de créer très simplement une analyse.
Fournisseur Produit Commande Client

Nom, Prénom, ... Description, Prix, ... Date, ... Nom, Prénom, ...
Système étudié
Analyse correspondante
L’analyse d’un projet WINDEV correspond au MLD (Modèle Logique des Données). Toute
la structure et l’organisation des données sont décrites : les données sont regroupées
par fichier. Chaque fichier contient plusieurs données appelées rubrique.
Dans l’analyse, il est possible de lier la description d’un fichier de données à un type de
fichier (HFSQL, Oracle, ...).
162 Partie 5 : Bases de données Partie 5 : Bases de données 163

L’analyse en pratique indéfini (UN ou UNE).
• si le fichier de données possède une rubrique
2. Sélectionnez l’option "Utiliser des fichiers de
données d’une base existante", puis sélectionnez
de type "Identifiant automatique". La valeur le type de la base de données.
de cette rubrique est unique pour chaque 3. Spécifiez la base de données source contenant
1 Présentation enregistrement et est automatiquement cal- les descriptions à importer et le type de cette
culée par WEBDEV. base de données. Selon le type choisi, renseignez
Lorsqu’un projet utilise des fichiers de données, • 2ème méthode : Création du Modèle • le type de la base de données associée au les informations demandées.
ce projet doit être associé à une analyse. Une ana- Conceptuel des Données (MCD), puis création fichier de données. Selon le type choisi, 4. Sélectionnez les tables ou les fichiers de don-
lyse permet de décrire les structures de données automatique de l’analyse à partir du MCD. Pour ce fichier de données sera manipulé par nées dont la description doit être importée et
(fichiers de données, rubriques, ...) utilisées dans plus de détail, consultez l’aide en ligne. le moteur HFSQL, par un pilote OLE DB ou validez.
votre projet. Ce chapitre présente la première méthode. par un des accès natifs (également appelé 5. Le fichier de données importé est automatique-
Pour décrire une analyse, deux méthodes sont pos- connecteurs natifs) de WEBDEV (SQL Server, ment inséré dans l’analyse en cours.
sibles : Oracle, ...).
• 1ère méthode : Création directe de l’analyse 4. Le fichier de données créé devient le fichier de Solution 2 : Depuis l’explorateur de Windows
(c’est-à-dire un Modèle Logique des Données données en cours. La fenêtre de description des "Droppez" directement la description du fichier de
(MLD)). rubriques du fichier de données s’ouvre automa- données de l’explorateur Windows vers l’éditeur
tiquement. Vous pouvez décrire les rubriques du d’analyses. Par exemple :
fichier de données.
2 Création d’un MLD (Modèle Logique des Données)
Pour importer une description prédéfinie d’un
Dans WEBDEV, les termes "MLD" et "Analyse" sont 2.2 Ajouter un fichier de données dans une fichier de données :
utilisés indifféremment pour définir la structure de analyse 1. Sous le volet "Analyse", dans le groupe
la base de données associée à un projet. "Création", cliquez sur "Nouveau fichier".
L’analyse permet de décrire la structure des fi- L’assistant de création d’un fichier de données
2.1 Créer une analyse (ou MLD) chiers de données utilisés par le projet. Un fichier se lance.
de données présent dans l’analyse peut être :
2. Sélectionnez l’option "Sélectionner une descrip-
Pour créer un MLD : • Un nouveau fichier de données. tion parmi des fichiers de données prédéfinis".
1. Cliquez sur parmi les boutons d’accès • Un fichier de données prédéfini, livré avec 3. Choisissez le fichier de données prédéfini à
rapide. La fenêtre de création d’un nouvel élé- WEBDEV. créer (il est possible d’en sélectionner plusieurs).
ment s’affiche : cliquez sur "Données" puis sur • Un fichier de données importé depuis une base Ce fichier de données sera importé dans l’analyse
"Analyse". L’assistant de création de l’analyse est Ici : une base de données Oracle, sur le serveur.
existante (utilisant par exemple un format spé- en cours. Ce fichier de données pourra être modi- Il suffit de faire glisser le nom de la base ...
lancé. cifique). fié par la suite.
2. Spécifiez : 4. Sélectionnez les rubriques à conserver. Ces
Les paragraphes suivants détaillent comment
• le nom et le répertoire de l’analyse. L’analyse créer un fichier de données. rubriques pourront être modifiées par la suite.
correspond à un fichier ".WDA". Par défaut, ce 5. Spécifiez si les liaisons doivent être automati-
fichier sera créé dans le répertoire de l’ana- Pour créer un nouveau fichier de données : quement recherchées. Si cette option est cochée,
lyse du projet (répertoire <Nom du projet>. 1. Sous le volet "Analyse", dans le groupe les rubriques de même nom seront reliées.
ANA). Ce répertoire doit être accessible en "Création", cliquez sur "Nouveau fichier".
lecture et en écriture. 6. Le fichier de données importé est automatique-
L’assistant de création d’un fichier de données ment inséré dans l’analyse en cours.
• le libellé de l’analyse décrivant succincte- se lance.
ment le sujet de l’analyse. Remarque : Pour modifier un fichier de données ou
2. Sélectionnez l’option "Créer une nouvelle des- les rubriques d’un fichier de données :
• si l’analyse doit être associée au projet en cription d’un fichier de données".
cours. 1. Sélectionnez le fichier de données.
3. Spécifiez :
• le type de la base de données manipulée par 2. Dans le menu contextuel, sélectionnez l’option
• le nom du fichier de données. Ce nom est le "Description du fichier de données" ou l’option
le projet. nom logique du fichier de données. Il sera uti- "Description des rubriques".
3. La création du premier fichier de données est lisé pour manipuler le fichier de données.
automatiquement proposée. Pour importer la description existante d’un fichier ... pour en transférer la description sous l’éditeur
• le libellé du fichier de données résumant suc-
de données, deux solutions sont possibles : d’analyses.
4. Créez l’ensemble des éléments (fichiers de don- cinctement le sujet du fichier de données.
nées, rubriques et liaisons) de votre analyse. • la représentation d’un enregistrement dans Solution 1 : Depuis l’éditeur d’analyses
le fichier de données. Cette représentation 1. Sous le volet "Analyse", dans le groupe
permet d’améliorer la lisibilité des questions "Création", cliquez sur "Nouveau fichier".
posées lors de la description des liaisons. L’assistant de création d’un fichier de données
Cette option doit être précédée d’un article se lance.

2.3 Créer une rubrique Pour créer une liaison : 3.2 Les cardinalités • chaque "client" a au moins une "commande" :
1. Sous le volet "Analyse", dans le groupe Oui/Non ?
Pour créer une rubrique : Les cardinalités permettent de dénombrer les liens
"Création", cliquez sur "Nouvelle liaison". Le cur- entre les fichiers de données. • chaque "client" peut avoir plusieurs "com-
1. Double-cliquez sur le fichier de données dans seur de la souris se transforme en crayon. mandes" : Oui/Non ?
lequel la rubrique doit être créée. La fenêtre de La cardinalité est définie en fonction des réponses
description des rubriques du fichier de données 2. Sélectionnez les deux fichiers de données à aux deux questions suivantes : • chaque "commande" a au moins un "client" :
s’ouvre. relier. La fenêtre de description de liaison s’ouvre Oui/Non ?
automatiquement. 1. Pour chaque enregistrement du fichier de
2. Cliquez sur la première ligne vide du tableau données, à combien d’enregistrements de l’autre • chaque "commande" peut avoir plusieurs
des rubriques. 3. Pour définir les cardinalités : fichier de données au minimum cet enregistre- "clients" : Oui/Non ?
3. Spécifiez le nom, le libellé et le type de la • soit sélectionnez directement les cardinalités ment est-il relié ?
rubrique directement dans le tableau. parmi celles proposées (0,1 ; 1,1 ; 0,N ; 1,N). La réponse fournit la première partie de la cardi- Exemple de cardinalités :
4. Indiquez dans la partie droite de l’écran les dé- • soit répondez aux questions posées. Les nalité (cardinalité minimale) : Cet exemple présente deux cardinalités diffé-
tails concernant la nouvelle rubrique (type, taille, cardinalités seront mises à jour automatique- • si la réponse est "aucun", la cardinalité est du rentes :
valeur par défaut, sens de parcours, ...). ment. type 0,X.
5. Indiquez dans la partie basse de l’écran les 4. Pour décrire des cardinalités avancées, cochez • si la réponse est "un seul", la cardinalité est
détails concernant les informations partagées. l’option "Afficher les cardinalités avancées" et du type 1,X.
répondez aux questions posées. 2. Pour chaque enregistrement du fichier de
6. Validez la description de la rubrique.
5. Saisissez le libellé de la liaison en décrivant données, à combien d’enregistrements de l’autre
Remarque : il est également possible de créer succinctement le sujet de la liaison.
une rubrique à partir des méta-types proposés par fichier de données au maximum cet enregistre- • Cardinalité 0,1 : Une personne peut être inscrite
WEBDEV. Pour cela, il suffit de cliquer sur le bouton 6. Spécifiez les clés à relier. ment est-il relié ? à un seul club de sport. Cette personne n’est
"+M" à droite du tableau. La liste des méta-types 7. Précisez les règles d’intégrité. Ces règles per- La réponse fournit la deuxième partie de la cardina- pas obligée d’être inscrite à un club de sport.
disponibles apparaît. mettent d’assurer la cohérence des données lors lité (cardinalité maximale) : • Cardinalité 0,N : Un club peut avoir aucune ou
de la modification ou lors de la suppression d’une • si la réponse est "un seul", la cardinalité est du plusieurs personnes inscrites.
2.4 Créer une liaison des clés de la relation. type X,1.
8. Validez. La liaison est automatiquement créée. 3.3 Les cardinalités avancées
Il est possible de créer différents types de liai- • si la réponse est "plusieurs", la cardinalité est
son entre les fichiers de données. Pour plus de du type X,N. Il est possible de définir avec plus de précision les
détails sur les liaisons, consultez le paragraphe La réponse à ces deux questions définit la cardina- cardinalités. On parle alors de cardinalités avan-
"Caractéristiques des liaisons définies dans une lité qui peut être de type : 0,1 ; 0,N ; 1,1 ; 1,N cées.
analyse", page 166. La description des cardinalités est fondamentale : Ces cardinalités permettent de préciser exacte-
elle est la base du respect de l’intégrité référen- ment la cardinalité minimale et la cardinalité maxi-
tielle de la base de données. male.
3 Caractéristiques des liaisons définies dans une analyse Pour définir les cardinalités avancées, cochez
Pour plus de clarté, ces deux questions peuvent
être décomposées en quatre questions. Par l’option "Affichez les cardinalités avancées" dans la
exemple, pour décrire une liaison entre le fi- description de la liaison.
3.1 Fichier propriétaire et fichier membre Par exemple, la clé du fichier de données chier de données Client et le fichier de données
Fournisseur est copiée dans chaque enregistre- Commande :
Dans le cas de liaison entre deux fichiers de don- Exemple de cardinalités avancées :
ment du fichier de données Produit. Plusieurs
nées, il existe un fichier de données propriétaire et Cet exemple présente deux cardinalités diffé-
enregistrements du fichier de données Produit
un fichier de données membre : rentes :
peuvent avoir la même clé du fichier de données
• le fichier de données propriétaire est proprié- Fournisseur :
taire de la clé.
• le fichier de données propriétaire est
• le fichier de données membre est un membre Fournisseur,
des fichiers de données de l’analyse contenant
• le fichier de données membre est Produit.
une copie de la clé.
La représentation d’une telle liaison est la sui-
Pour gérer la liaison entre deux fichiers de don- • Cardinalité 0,1 : Une personne peut être inscrite
vante :
nées, la clé du fichier de données propriétaire est à un seul club de sport. Cette personne n’est
copiée dans le fichier de données membre. pas obligée d’être inscrite à un club de sport.
• Cardinalité 0,10 : Un club peut avoir de 0 à 10
personnes inscrites.

3.4 L’intégrité référentielle Le parallélisme des enregistrements dans le fichier Liaison partagée Liaison partagée de cardinalité 1,N - 0,1
de données est respecté si les opérations sui- Dans le cas d’une liaison partagée, un même Avec ce type de liaison :
L’intégrité référentielle d’une base de données cor- vantes sont exécutées simultanément sur les deux
respond au respect des contraintes impliquées par enregistrement dans un fichier de données • chaque propriétaire a au moins un membre (un
fichiers de données : (Fournisseur) peut être partagé par plusieurs fournisseur a au moins un produit).
les liaisons entre les fichiers de données.
• création d’un enregistrement enregistrements dans un autre fichier de données • un membre peut ne pas avoir de propriétaire (un
L’intégrité référentielle consiste à vérifier par (Produit).
exemple que : • suppression d’un enregistrement produit peut n’avoir aucun fournisseur).
• réindexation avec compactage Pour gérer une liaison partagée, la clé du fichier
• si un enregistrement est supprimé dans le pro- de données Fournisseur est copiée dans le fichier
priétaire, les enregistrements correspondants Liaison facultative de données Produit. Elle devient clé multiple pour
dans les membres sont également supprimés, Dans le cas d’une liaison facultative : accélérer la vérification de l’intégrité.
• si un enregistrement est ajouté dans un • Chaque enregistrement d’un fichier de données Le fichier de données propriétaire est Fournisseur,
membre, il existe un enregistrement correspon- (Catégorie) n’a aucun enregistrement ou un seul le fichier de données membre est Produit.
dant dans le propriétaire, enregistrement associé dans un autre fichier de Liaison partagée de cardinalité 1,N - 1,1
Selon la cardinalité, il est possible de distinguer
• si un enregistrement est modifié dans un pro- données (Groupe). quatre types de liaisons partagées : Avec ce type de liaison :
priétaire, la clé unique n’est pas modifiée, ... • Chaque enregistrement de l’autre fichier de • chaque propriétaire a au moins un membre
• Liaison partagée de cardinalité 0,n - 0,1
La vérification de l’intégrité référentielle dépend de données (Groupe) n’a aucun enregistrement ou (chaque fournisseur a au moins un produit).
la nature de la liaison entre les fichiers de données. • Liaison partagée de cardinalité 0,n - 1,1
un seul enregistrement associé dans le premier • chaque membre a un seul propriétaire (chaque
Pour plus de détails sur le contrôle de l’intégrité fichier de données (Catégorie). • Liaison partagée de cardinalité 1,n - 0,1 produit a un seul fournisseur).
référentielle, consultez l’aide en ligne. • Liaison partagée de cardinalité 1, n - 1,1
3.5 Les différents types de liaisons Liaison partagée de cardinalité 0,N - 0,1
Les liaisons entre les fichiers de données peuvent

être de plusieurs types : Une liaison facultative est réalisée en copiant Liaison complexe
• parallèle l’identifiant de chacun des fichiers de données
dans l’autre fichier de données. Dans le cas d’une liaison "complexe", il est néces-
• facultative Avec ce type de liaison : saire de gérer un fichier de liaison, appelé fichier
• de complément Liaison de complément de relation.
• un propriétaire peut ne pas avoir de membre (un
• partagée Dans le cas d’une liaison de complément : fournisseur n’a pas obligatoirement de produit). Le fichier de relation sera automatiquement créé. Il
• complexe • Chaque enregistrement d’un fichier de données • un membre peut ne pas avoir de propriétaire (un contiendra une clé unique composée des deux clés
(Produit) n’a aucun enregistrement ou un seul produit n’a pas obligatoirement de fournisseur). des fichiers de données reliés.
Liaison parallèle enregistrement associé dans un autre fichier de Le fichier de relation peut également contenir des
Dans le cas d’une liaison parallèle, chaque enregis- données (Détail). Liaison partagée de cardinalité 0,N - 1,1 informations spécifiques à la liaison.
trement d’un fichier de données (Produit) est relié • Chaque enregistrement de l’autre fichier de Une liaison complexe se décompose alors en deux
à un enregistrement dans un autre fichier de don- données (Détail) a nécessairement un enre- liaisons de type partagé.
nées (Information), et réciproquement. gistrement associé dans le premier fichier de Exemple de liaison complexe
données (Produit).
Une commande (fichier de données Commande)
peut contenir un ou plusieurs produits. Un produit
Avec ce type de liaison : (fichier de données Produit) peut être utilisé dans
plusieurs commandes.
• un propriétaire peut ne pas avoir de membre (un
Pour gérer une liaison parallèle, l’identifiant du fournisseur peut n’avoir aucun produit). Dans ce cas, il faut avoir un fichier de liaison (fichier
fichier de données Produit est copié dans le fi- Les liaisons de complément sont assez fréquentes. de données LigneCommande).
Elles sont notamment utilisées lorsqu’un enregis- • chaque membre a un seul propriétaire (chaque
chier de données Information. Cet identifiant est Le fichier de données LigneCommande contient :
trement peut avoir des compléments d’informa- produit a un seul fournisseur).
également clé unique dans le fichier de données • une clé unique composée des clés du fichier
Information. tions optionnels. Remarque : Ce type de liaison est fréquent.
WEBDEV permet de créer automatiquement les de données Produit et du fichier de données
Le fichier de données propriétaire est alors Produit Pour gérer une liaison de complément, la clé du fi- Commande.
chier de données Produit est copiée dans le fichier pages permettant de gérer les fichiers de données
et le fichier de données membre est Information. • le nombre de produits commandés.
de données Détail. Pour assurer la cardinalité maxi- liés par une liaison de type 0,N - 1,1.
Remarque : Ce type de liaison est rare car les deux Les liaisons entre les fichiers de données sont les
fichiers de données peuvent être regroupés en un male de 1, elle reste clé unique. L’unicité de cette
clé interdit l’insertion de plus d’un enregistrement suivantes :
seul.
dans le fichier de données Détail pour un enregis-
trement du fichier de données Produit.
Le fichier de données propriétaire est Produit, le
fichier de données membre est Détail.
4 Manipulations possibles sur une analyse Entre deux versions figurent des "petits rectangles" 6.2 Annulation de la dernière génération
qui signifient :
L’annulation de la dernière génération de l’analyse
• un rectangle : il y a eu peu de modifications permet de restaurer l’analyse dans son état avant
WEBDEV permet de réaliser les manipulations sui- WEBDEV permet de réaliser les manipulations sui- effectuées entre les deux versions.
vantes sur une analyse : vantes sur une rubrique d’un fichier de données la dernière génération. Les modifications effec-
• plusieurs rectangles : il y a eu plusieurs modifi- tuées depuis ne sont pas appliquées.
• Dupliquer / Copier un MLD : La duplication d’un présent dans l’éditeur d’analyses :
cations effectuées entre les deux versions.
MLD permet de disposer de deux MLD iden- • Dupliquer / Copier une rubrique. 6.3 Remettre à 1 le numéro de la version
tiques de nom différent. • Supprimer une rubrique. Pour visualiser le détail des modifications effec-
• Supprimer un MLD. tuées entre deux versions : Double-cliquez sur la Il est possible de remettre le numéro de génération
• Renommer une rubrique. de l’analyse à "1" : sous le volet "Analyse", dans le
ligne contenant les "petits rectangles" ou cliquez
• Renommer un MLD. Pour plus de détails, consultez l’aide en ligne. groupe "Analyse", cliquez sur "Génération" et sélec-
sur le bouton [Modifications].
• Associer un MLD à un projet. tionnez "Remettre à 1 la version de l’analyse".
Les options disponibles dans le gestionnaire de
• Agrandir ou réduire l’affichage d’un MLD sous versions sont : Dans ce cas le numéro de version de l’analyse est
l’éditeur. remis à un. Aucune action spécifique n’est réalisée
• Restauration d’une analyse.
• Déplacer l’affichage du MLD sous l’éditeur. sur les fichiers de données.
• Annulation de la dernière génération.
WEBDEV permet de réaliser les manipulations
• Remettre à 1 le numéro de version.
suivantes sur un fichier de données présent dans
l’éditeur d’analyses : 6.1 Restauration d’une analyse
• Dupliquer / Copier un fichier de données.
Pour restaurer une analyse à partir du gestionnaire
• Supprimer un fichier de données. de versions :
• Renommer un fichier de données. 1. Sélectionnez la version à restaurer.
2. Il est possible :
5 Génération de l’analyse (MLD) • soit de restaurer la version dans le répertoire
spécifié. Une analyse indépendante est créée
correspondant à la version choisie. Cette
La génération de l’analyse intervient avant la phase Pour lancer la génération de l’analyse, sous le volet option est sélectionnée par défaut.
de programmation et après la phase de description "Analyse", dans le groupe "Analyse", cliquez sur
• soit d’écraser l’analyse en cours.
des fichiers de données. Cette génération permet "Génération".
de : 3. Validez. La restauration est effectuée.
La génération comporte trois étapes :
• valider les modifications effectuées sur l’analyse • vérification des modifications effectuées et Attention : Les fichiers de données correspondant
(MLD). génération des fichiers de données de la des- à une analyse de numéro de version supérieur à
• créer les modules nécessaires à la programma- cription de l’analyse. la version restaurée ne pourront plus être ouverts.
tion. • modification automatique des fichiers de don- Il faut alors également restaurer des fichiers phy-
• mettre à jour automatiquement les fichiers de nées accessibles (fichiers présents dans le siques correspondant à la version de l’analyse
données si nécessaire. répertoire "EXE" du projet). restaurée ou supprimer les fichiers existants pour
qu’ils soient recréés.
Tant que l’analyse (le MLD) n’a pas été générée, la • Synchronisation du projet.
description de l’analyse (les fichiers de données)
ne pourra pas être utilisée dans le projet.
6 Gestion des versions de l’analyse
WEBDEV permet de gérer les différentes versions Remarque : lorsqu’une analyse est endommagée,
de l’analyse : il est possible de sélectionner directement l’ana-
1. Sous le volet "Analyse", dans le groupe lyse endommagée pour restaurer par exemple une
"Analyse", cliquez sur "Génération" et sélectionnez des versions précédentes.
"Gestion des versions". Toutes les versions de l’analyse sont visualisées
2. Dans l’assistant, indiquez si vous voulez tra- sous forme d’un graphique. Le carré jaune indique
vailler sur l’analyse en cours ou sur une analyse le numéro de version de l’analyse ; le libellé à
spécifique. droite rappelle la date de la génération.

Contenu
fichiers accessibles
WEBDEV, WINDEV et WINDEV Mobile proposent un accès simple à la majorité des bases
de données du marché.

HFSQL
Contenu
HFSQL Client/
Contenu
Classic Serveur
Une application WEBDEV HFSQL peut fonctionner en mode Classic (appelé HFSQL Clas- HFSQL Client/Serveur est un puissant système de gestion de bases de données rela-
sic) ou en mode Client/Serveur. tionnelles (SGBD/R) en mode Client/Serveur.
Les caractéristiques du mode Classic sont les suivantes : Les caractéristiques du mode Client/Serveur sont les suivantes :
• Un site utilisant HFSQL Classic est exécuté sur différents navigateurs. Pour chaque • Un site HFSQL Client/Serveur est exécuté sur différents postes utilisateur. Pour
site exécuté, une session est lancée sur le serveur. chaque site lancé, une session est présente sur le serveur Web.
• Les fichiers de données sont présents dans un répertoire accessible par les ses- • Les fichiers de données sont présents sur un poste serveur (Serveur HFSQL). Seul le
sions des sites WEBDEV (sur le serveur Web ou sur un autre poste). Chaque session poste serveur accède physiquement aux fichiers de données.
accède physiquement aux fichiers de données. • L’ensemble des traitements (requête, lecture/ajout dans un fichier de données, ...)
• Les traitements (requête, lecture/ajout dans un fichier de données, ...) sont réalisés est réalisé sur le serveur.
par chaque session.
Serveur
Web Serveur
WEB
Site WEBDEV
Site WEBDEV
Session 1 Session 1
Serveur HFSQL
Windows ou Linux
Client 1 Client 1
Serveur Manta
Session 2 Session 2
Bases de
données
HFSQL Classic Client 2
Client 2
Bases de données
Session n HFSQL
Session n Client/Serveur
Client n
Client n

Clusters HFSQL
Contenu
HFSQL : les fichiers créés
Contenu
Client/Serveur physiquement
HFSQL Cluster est une extension du modèle de base de données de HFSQL Client/Ser- L’éditeur d’analyses permet de décrire la structure des fichiers de données.
veur. Dans un cluster de bases de données, les différents serveurs HFSQL contiennent Selon les informations saisies sous l’éditeur d’analyses, différents fichiers sont créés
tous une copie des bases de données et sont synchronisés en temps réel. physiquement.
• La charge en lecture peut être équilibrée entre différents serveurs.
• La configuration physique peut évoluer sans interruption pour les postes clients.
Caractéristiques Fichiers créés
• En cas de crash d’un des serveurs, le client est automatiquement redirigé vers un du fichier (Analyse) physiquement
serveur opérationnel.
Fichier HFSQL Classic ou Fichier “.fic”
Client/Serveur Fichier de données
Une ou plusieurs clés de

Fichier ”.ndx”
parcours (unique ou avec
Fichier d’index
doublons)
Serveur Web
Fichier “.ftx”
Un ou plusieurs index full-text
Fichier d’index full-text
Session du client 1
Une ou plusieurs rubriques Fichier “.mmo”
Session du client n “Mémo” Fichier mémo
Accès aux données Remarque : Ce schéma présente uniquement les principaux fichiers créés. D’autres
fichiers spécifiques peuvent être créés si le fichier de données utilise la journalisation,
les transactions ou encore la réplication.
Cluster
Poste serveur HFSQL Poste serveur HFSQL

Client/Serveur Client/Serveur
Report des modifications
Poste serveur HFSQL Poste serveur HFSQL

Client/Serveur Client/Serveur

Associer les champs et les
Contenu Liaison champ / variable
données
Une page peut afficher des informations provenant :
• d’une base de données : les champs sont directement liés aux rubriques des fichiers
ou des requêtes disponibles dans la base de données.
• de variables présentes dans le code de l’application (variables globales à la page ou
au projet ou paramètres passés à la page).
Pour afficher ces informations dans une page, il est nécessaire de lier les champs de
cette page avec :
• les différentes rubriques de la base de données.
• les différentes variables WLangage disponibles.
PageVersFichier FichierVersPage
La méthode d’affichage et de récupération des informations est très simple :
• La liaison d’un champ avec une rubrique ou une variable est définie sous l’éditeur de Variable liée
pages, lors de la description du champ (onglet "Liaison").
Champ simple
• La fonction PageVersFichier permet de mettre à jour soit l’enregistrement, soit la Liaison avec :
variable avec les données présentes dans la page. - Variable simple
- Instance d’un membre de
• La fonction FichierVersPage permet de mettre à jour les données affichées dans la classe ou de structure
- Propriété d’un objet dynamique
page avec soit les informations enregistrées dans le fichier de données, soit les infor-
Liste, Table, Combo, ...
mations enregistrées dans la variable. Liaison avec :
- Tableau de classes ou de struc-
tures
Liaison champ / rubrique - Types avancés (par exemple
xlsLigne, xlsColonne)
PageVersFichier FichierVersPage
Base de données

Les
Contenu
Les requêtes
Contenu
requêtes intégrées
Une requête sert à interroger une base de données pour visualiser, insérer, modifier ou Les champs d’une page peuvent être liés à un fichier de données ou à une requête
supprimer des données. La structure de la requête définit les données manipulées. existante, ... Il est également possible de lier ces champs à une requête créée lors de la
conception du champ.
Une requête peut interroger un ou plusieurs fichiers de données.
L’éditeur de requêtes permet de créer très simplement des requêtes, sans avoir à pro-
grammer.
Sources Utilisations possibles

Pages et champs
d’une page
Données en provenance
d’un ou de plusieurs fichiers
(HFSQL, Oracle, ...) Etats Zone répétée liée à une requête intégrée
Le résultat d’une
requête se manipule
Programmation
comme un fichier
(utilisation dans les
fonctions WLangage)
Requêtes
Remarque : En programmation, une requête peut être manipulée de la même façon

qu’un fichier de données. En particulier, elle peut être associée à un champ d’affichage
(une table par exemple) qui présentera les données retournées par la requête. Requête intégrée : MaPage_1$Requête
Dans ce cas, la requête est intégrée à la page. Elle est présente dans le fichier
WWH correspondant à la page. Si le fichier WWH est copié (dans un autre projet par
exemple), les requêtes intégrées utilisées par cette page seront également copiées.

Le champ Table/
Contenu Champ Table Mémoire
Zone répétée Un champ Table mémoire permet d’afficher directement des données chargées en mé-
moire. Les données sont ajoutées dans le champ Table par programmation (par exemple
avec la fonction TableAjouteLigne).
Les champs Table/Zone répétée peuvent être utilisés pour afficher un ensemble d’infor-
mations (par exemple, le contenu d’un fichier de données). Le contenu de ces champs
peut être issu de trois sources différentes :
• Champs Table/Zone répétée Fichier accès direct.
• Champs Table/Zone répétée Mémoire.
Données en
• Champs Table/Zone répétée Fichier chargée en mémoire. mémoire
Remarque : Ces trois modes de remplissage vont être détaillés ici pour le champ Table. Les données étant présentes en mémoire, le champ Table permet toutes les manipula-
Les mêmes concepts s’appliquent au champ Zone répétée. tions sur les données (tri sur n’importe quelle colonne, recherche dans les colonnes, ...)
Champ Table "Fichier accès direct" Champ Table Fichier chargé en mémoire
Un champ Table fichier de type accès direct permet d’afficher directement les données Les champs Table fichier chargé en mémoire combinent les avantages des champs
provenant d’un fichier de données ou d’une requête. La structure du fichier de données Table fichier à accès direct et ceux des champs Table mémoire.
a été décrite sous l’éditeur d’analyses et les données ont été saisies par exemple dans Le champ Table est lié au fichier de données, mais le contenu du fichier de données
le site. est totalement chargé en mémoire. Le tri et la recherche sont disponibles sur toutes les
Un parcours du fichier de données permet d’afficher les données dans le champ Table. colonnes.
Pour chaque ligne affichée, le fichier de données est lu : l’enregistrement lu est affiché Les données non liées au fichier de données sont conservées lors de la manipulation de
dans une ligne du champ Table. l’ascenseur (colonne de type Interrupteur par exemple).
Les enregistrements du fichier de données étant chargés en mémoire, ce type de champ
est conseillé pour les fichiers de données de moins de 100 000 enregistrements (pour
éviter une saturation mémoire).
Fichier
Client
Fichier
Il est possible de limiter les enregistrements affichés dans le champ en utilisant un filtre Client
(fonction HFiltre utilisée dans le code d’initialisation du champ).
Plusieurs fonctions du WLangage permettent de manipuler les champs Table fichier. Fichier chargé
en mémoire
Ces fonctions commencent toutes par "Table".
Pour ajouter un enregistrement dans le champ Table, ajoutez l’enregistrement dans le
fichier de données HFSQL correspondant (fonction HAjoute), puis ré-affichez le champ
Table avec la fonction TableAffiche.
Pour supprimer un enregistrement dans le champ Table, supprimez l’enregistrement
dans le fichier de données HFSQL correspondant (fonction HSupprime), puis ré-affichez
le champ Table avec la fonction TableAffiche.
Remarque : Les différents modes de remplissage (mémoire, fichier, fichier chargé en
mémoire) sont disponibles pour les champs Liste, Combo, Table, Zone répétée, ...
Récupérer des données
Contenu
sur un site 2 Récupérer les données d’un site
2.1 Grâce à une page AWP d’interrogation

Un site commercial permet aux internautes d’effectuer des commandes, des réserva-
tions, ... WEBDEV permet de créer des pages AWP. Les pages AWP sont des pages indépen-
Pour récupérer ces informations, vous pouvez utiliser plusieurs méthodes. dantes, pouvant exécuter des traitements à partir de paramètres passés en ligne de
commande à la page. Les pages AWP peuvent être utilisées simplement pour récupérer
les données saisies sur le site.
Conseil : Traitez les données récupérées dans une application de "Back Office" réalisée
Exécution des pages AWP
avec WINDEV. par requêtes HTTP
1 Partager les données Serveur Siège de

Web la société
Les données d’un site WEBDEV peuvent être directement partagées avec les données Transmission des données
de l’application Back Office permettant de traiter les opérations effectuées sur le site, - Site WEBDEV sous forme de chaînes - Application WINDEV
- Base de données (Back Office)
en toute sécurité. Il suffit d’utiliser une base de données HFSQL Client/Serveur. - Pages AWP
Le principe est le suivant :
Les pages AWP présentes sur le serveur Web sont interrogées régulièrement par des re-
quêtes HTTP exécutées par l’application Back Office. Les données sont renvoyées sous
Accès aux données Accès aux données
forme de chaînes et traitées par l’application WINDEV.
Serveur Siège de
Web la société
Avantages :
Site WEBDEV Application de
Back Office • Solution simple à mettre en place.
• Equivalent à un service Web personnalisé.
• Ne nécessite aucun exécutable supplémentaire sur le serveur. Aucune session sup-
plémentaire n’est exécutée sur le serveur.
Serveur de données
- Base de données HFSQL Client/Serveur
Inconvénient : Récupération monodirectionnelle des données : pas de mise à jour des
- 3 comptes d’accès : données vers le serveur.
o Internet Invité
o Administrateur
o Back Office
Cette solution peut être utilisée avec un serveur mutualisé.
Avantage : Les données du site sont accessibles en temps réel.
Inconvénient : Nécessité de gérer la sécurité de manière optimisée : utilisation d’une

connexion sécurisée pour accéder aux données, ouverture d’un port spécifique pour
accéder aux données (port 4900 par défaut), configuration du firewall, ...
Cette solution est conseillée pour un site installé sur un serveur dédié.

2.2 Grâce à un Webservice 2.4 Par emails :
WEBDEV permet de créer des Webservices. Le Webservice est installé sur le serveur Le principe :
Web et le serveur d’application WEBDEV permet de l’utiliser. Le Webservice peut être
4
utilisé simplement pour récupérer les données saisies sur le site.
Email de
confirmation
Exécution du Webservice
par requêtes HTTP
Internaute
Serveur Siège de
Web
Transmission des données
la société 2 1
Email de Commande
- Site WEBDEV (chaînes, XML, ...) - Application WINDEV effectuée
validation
- Base de données (Back Office) sur le site
- Webservice WEBDEV
Le Webservice présent sur le serveur Web est interrogé régulièrement par des requêtes Siège de
HTTP exécutées par l’application Back Office. Les données sont renvoyées sous forme la société
XML, sous forme de chaînes (ou autres) et traitées par l’application WINDEV.
Avantages :
Serveur
• Solution simple à mettre en place. Web
• Ne nécessite aucun exécutable supplémentaire sur le serveur. Aucune session sup-
- Site WEBDEV
plémentaire n’est exécutée sur le serveur. - Serveur d’application
3
WEBDEV
Inconvénient : Récupération monodirectionnelle des données : pas de mise à jour des Email contenant
la commande
données vers le serveur.
Cette solution peut être utilisée avec un serveur mutualisé. 1. L’internaute effectue une commande sur le site.
2.3 Par FTP : 2. Le site WEBDEV indique à l’internaute que la commande a bien été enregistrée.
L’internaute est informé qu’il recevra un email de confirmation.
WEBDEV permet d’effectuer régulièrement une sauvegarde des fichiers de données du 3. Le site WEBDEV envoie un email au siège de la société. Cet email contient la com-
site WEBDEV. Cette sauvegarde peut être ensuite transférée par FTP au siège de la so- mande effectuée par l’internaute.
ciété. Il suffit alors de :
4. Un email est envoyé à l’internaute par la société pour lui indiquer que sa commande
• récupérer la sauvegarde compressée des fichiers de données. a bien été prise en compte.
• décompresser les fichiers (à l’aide d’une application WINDEV).
• traiter les données présentes dans les fichiers. Avantages :
Avantages : • Solution simple à mettre en place.
• Solution simple à mettre en place. • Ne nécessite aucun exécutable supplémentaire sur le serveur.
• Ne nécessite aucun exécutable supplémentaire chez l’hébergeur.
Inconvénient : Récupération monodirectionnelle des données : pas de mise à jour des
Inconvénient : Tous les fichiers de données de l’application sont récupérés. données vers le serveur.
Cette solution peut être utilisée avec un serveur mutualisé. Cette solution peut être utilisée avec un serveur mutualisé.

Réplication
Contenu
3 Effectuer une réplication universelle
La réplication permet de maintenir à jour des bases de données distantes de même
structure. Il est ainsi possible de faire une réplication entre la base de données d’un site La réplication universelle permet de maintenir à jour des bases de données de format
WEBDEV et la base de données de l’application WINDEV au siège de la société. identique ou différent (HFSQL Classic, Oracle, SQL Server, ...). Il est par exemple pos-
sible de réaliser une synchronisation entre une base de données HFSQL Classic et une
Par exemple, une base de données de saisie de commandes et de gestion de stocks est base de données Oracle.
utilisée à la fois sur un site WEBDEV (prise de commandes en ligne) et au siège de la
société (prise de commandes téléphonique ou par courrier). La réplication universelle utilise un modèle centralisé : toutes les bases de données se
La réplication permet de : synchronisent avec une base de données maître. La base de données maître répercute
• transmettre les commandes saisies en ligne au siège de la société (réplication mono- ensuite les modifications vers les autres bases de données.
directionnelle)
• transmettre les commandes saisies en ligne au siège de la société et transmettre la
mise à jour des stocks au site Internet (réplication bi-directionnelle).
Attention : Il est nécessaire de prendre en compte les contraintes de la réplication dès

la création du projet. En effet, plusieurs règles doivent être respectées lors de la descrip-
tion de l’analyse et des rubriques des fichiers de données.
La réplication peut être réalisée par email ou à l’aide de la réplication universelle assis-
tée. Pour plus de détails sur la réplication, consultez l’aide en ligne.
Réplication
Universelle
Il est possible d’adapter la synchronisation à des cas particuliers. Par exemple, il est
possible de récupérer uniquement les enregistrements concernant un produit spécifié
ou les enregistrements réalisés à une certaine date, de gérer les conflits, ...
Ces adaptations doivent être effectuées par programmation grâce à la fonction HRpl-
ProcédureFiltre.

Architecture
Contenu PARTIE 6
3-tiers
L’architecture 3-tiers (le terme "tier" vient de l’anglais et signifie "niveau") est un modèle
d’architecture d’application.
Son principe de base consiste à séparer trois couches logicielles contenues dans une
application :
• la couche présentation : correspondant à l’affichage.
• la couche traitements ou application : correspondant aux processus métiers de
l’application.
• la couche d’accès aux données persistantes.
Cette séparation a pour but de rendre indépendante chacune des couches afin de faci-
liter la maintenance et les évolutions futures de l’application. Elle assure une sécurité
plus importante car l’accès à la base de données n’est autorisé que par la couche de Tester un
traitements. Elle a également l’avantage d’optimiser le travail en équipe et le développe-
ment multi-cibles. site Web
190 Partie 5 : Bases de données

Tester un site : Les
Contenu
éléments à tester
Le test d’un site est une étape fondamentale dans le développement d’un site. Le test
permet de vérifier le bon fonctionnement du site et son utilisabilité.
Voici quelques exemples des principaux points à tester dans un site WEBDEV :
• le fonctionnement du site :
enchaînement des pages, exécution du code saisi, ...
• le "look" du site :
utilisez différents navigateurs (principalement Internet Explorer, Chrome, FireFox,
Edge, ...), utilisez différentes résolutions écran, redimensionnez le navigateur, ...
• les fonctionnalités spécifiques au Web :
impression, cookies, bouton "Précédent" du navigateur, ...
• l’accès au site par différents internautes :
gestion des logins et des mots de passe, gestion des accès concurrentiels aux
fichiers de données, ...
• la non-régression d’un site lors d’une mise à jour :
validation des modifications effectuées dans un site et vérification que les fonction-
nalités non modifiées sont toujours accessibles.
• la montée en charge (pour un site installé sur le serveur) :
validation du nombre maximum d’internautes pouvant accéder au site.
Remarque : Pour connaître la couverture des tests réalisés, WEBDEV propose d’utiliser
le "Code Coverage". Le code coverage est la mesure de la couverture des tests réalisés
sur un site. Chaque ligne de code qui a été exécutée est considérée comme "testée".
Attention : Le code coverage ne permet pas de savoir si les tests ont réussi : il permet
juste de savoir si la ligne de code a été exécutée.
Le code coverage permet donc de détecter les lignes de code d’un site qui n’ont jamais
été exécutées.
192 Partie 6 : Tester un site Web Partie 6 : Tester un site Web 193
Comment tester
Contenu
un site ?
Administrateur Le lancement du test depuis Lancez l’administrateur
WEBDEV l’administrateur permet par WEBDEV (menu "Démarrer")
(site dynamique exemple de tester : puis cliquez sur le bou-
WEBDEV unique- • les fonctionnalités du site, ton "Page de test" (onglet
ment) • les fonctions spécifiques au "Avancé").
Plusieurs outils sont disponibles pour tester un site WEBDEV :
Web (cookies, ...), Ce test permet d’utiliser le
• l’éditeur principal de WEBDEV. site WEBDEV dans des condi-
• l’administrateur WEBDEV. • l’utilisation du site dans des
tions identiques à celles d’un
Ce module est indispensable à l’exécution d’un site dynamique WEBDEV (en mode conditions réelles.
internaute.
Session ou en mode AWP). Sur le poste de développement, il est possible de tester Les droits de l’internaute
les sites dynamiques depuis une page de test créée par l’administrateur. (accès, écriture et lecture)
• WDTestSite, l’outil de test de montée en charge. correspondent aux droits de
l’utilisateur par défaut défini
Le tableau ci-dessous présente quand et comment utiliser ces différents modes de test. dans le serveur Web utilisé.
Mode de test Type de test Lancement du test WDTestSite WDTestSite permet de réaliser 1. Créez un scénario de test
(site dynamique des tests de montée en charge. (avec WDTestSite).
Editeur Le lancement du test depuis • Sous le volet "Projet", dans
WEBDEV unique- WDTestSite permet de lancer 2. Installez WDTestSite et
l’éditeur permet par exemple le groupe "Mode test", dé-
ment) plusieurs connexions simulta- le scénario sur différents
de tester : roulez "Mode test" et sélec-
nées à un site WEBDEV. postes pour simuler un
• les fonctionnalités du site, tionnez "Tracer le projet".
Chaque connexion effectue grand nombre d’accès.
• le code utilisé dans les dif- • Sous le volet "Projet", dans une succession d’actions dans 3. Spécifiez le nombre de
férents traitements. Un puis- le groupe "Mode test", dé- le site WEBDEV (scénario pré- connexions à effectuer.
sant débogueur permet de roulez "Mode test" et sélec- défini). 4. Lancez le scénario de test
suivre pas à pas l’exécution tionnez "Déboguer le projet Ce test doit être effectué sur sur chaque poste.
des différents traitements. depuis la page d’accueil". un site WEBDEV installé sur un
• l’utilisation du site avec dif- Les droits de l’internaute poste de déploiement, prêt à
férents navigateurs (installés (droits d’accès, d’écriture et être mis en service.
sur le poste de développe- de lecture) correspondent aux
ment). droits du développeur. Tests automa- Les tests automatiques per- 1. Affichez la procédure ou la
tiques mettent de tester les procé- classe dans l’explorateur
Ce type de test :
dures et les classes d’un site à de projet.
• permet l’utilisation du débo- différents niveaux de dévelop- 2. Affichez le menu contex-
gueur. pement. tuel de l’élément (clic
• est pris en compte par le Les scénarios de test sont gé- droit) et sélectionnez
"Code Coverage". nérés en WLangage à partir du l’option "Créer un test uni-
test de la procédure ou de la taire".
classe. Les scénarios peuvent
être modifiés sous l’éditeur de
code.
Ce type de test est pris en
compte par le "Code Coverage".
Le
Contenu
Quand peut-on utiliser le
Contenu
débogueur débogueur ?
Pour mettre au point votre code, un débogueur est livré en standard avec WEBDEV. Lorsqu’un test est réalisé depuis l’éditeur, le débogueur peut toujours être utilisé. Il suf-
Le débogueur permet une exécution pas à pas de vos sites dynamiques, en visualisant fit de placer les points d’arrêt aux endroits voulus, pour pouvoir déboguer pas à pas le
le code WLangage exécuté, le contenu des variables, ... site.
Les différents types de tests disponibles depuis l’éditeur sont les suivants :
• Le "Go" de page :
Le test de la page en cours sous l’éditeur peut être lancé par présent parmi les
boutons d’accès rapide de WEBDEV.
• Le "Go" de projet :
Le test du projet sur le poste de développement peut être lancé par :
• présent parmi les boutons d’accès rapide de WEBDEV,
• sous le volet "Projet", dans le groupe "Mode test", déroulez "Mode test" et sélection-
nez l’option "Déboguer le projet".
• Le projet déployé :
Il est possible de déboguer le projet déployé. Cette fonctionnalité est très utile pour
reproduire un problème survenant uniquement dans des conditions spécifiques.
Pour lancer le projet déployé, sous le volet "Projet", dans le groupe "Mode test",
déroulez "Mode test" et sélectionnez l’option "Se connecter à un site et déboguer la
Pour lancer le débogueur, utilisez : connexion".
• un point d’arrêt directement placé dans l’éditeur de code : lorsque la ligne précédée Remarque : Cette option est utilisable avec un serveur de développement ou de
d’un point d’arrêt sera exécutée, le débogueur sera automatiquement lancé. déploiement. Le serveur doit être configuré pour autoriser le débogage à distance.
Pour poser un point d’arrêt, il suffit de cliquer devant la ligne de code : une puce
rouge apparaît. • Le projet déployé en cours d’utilisation :
Il est possible de déboguer le projet déployé, en cours d’utilisation. Cette fonction-
nalité est très utile pour reproduire un problème survenant uniquement dans des
conditions spécifiques. Le cas le plus courant : vous utilisez le site et vous rencontrez
le problème : vous pouvez lancer le débogueur immédiatement en mettant un point
d’arrêt dans le code de votre projet.
Pour utiliser une session du projet déployé, sous le volet "Projet", dans le groupe
"Mode test", déroulez "Mode test" et sélectionnez l’option "Déboguer une connexion
existante".
Remarque : Cette option est utilisable avec un serveur de développement ou de
• le mot-clé serveur STOP du WLangage directement dans votre code WLangage : le déploiement. Le serveur doit être configuré pour autoriser le débogage à distance.
débogueur sera automatiquement lancé dès que cette ligne de code sera exécutée.
• l’option "Déboguer le projet" : le débogueur est lancé en même temps que le test du
site dynamique. Sous le volet "Projet", dans le groupe "Mode test", déroulez Mode test
et sélectionnez "Déboguer le projet".
Test d’un site en pratique 3. Le navigateur précisé dans les options de
WEBDEV s’ouvre et la page d’accueil du site
2.2 Tester le projet depuis l’administrateur
WEBDEV
s’affiche.
Le lancement du test depuis l’administrateur
Pour tester un site dynamique (Session ou AWP) WEBDEV (WD260Admin) permet par exemple de
1 Présentation depuis l’éditeur, plusieurs méthodes sont dispo- tester :
nibles :
• les fonctionnalités du site.
WEBDEV propose plusieurs méthodes pour tester Le test d’une requête seule permet d’exécuter uni- • Sous le volet "Projet", dans le groupe "Mode
test", déroulez "Mode test" et sélectionnez • les fonctions spécifiques au Web (utilisation des
vos sites : quement la requête en cours. Vous pouvez ainsi cookies, ...).
choisir de tester le fonctionnement d’une requête "Déboguer le projet" (ou Ctrl + F9).
• test de l’ensemble du projet, Remarque : L’administrateur WEBDEV permet uni-
dès que son développement est terminé. • Cliquez sur parmi les boutons d’accès
• test d’une page seule, quement de tester les sites dynamiques (Session
Le test d’un état seul permet d’exécuter unique- rapide.
• test d’une requête seule (consultez l’aide en ou AWP) ou la partie dynamique des sites statique
ment l’état en cours. Vous pouvez ainsi choisir de L’éditeur est automatiquement réduit en icône, le + dynamique.
ligne pour plus de détails),
tester le fonctionnement d’un état dès que son navigateur précisé dans les options de WEBDEV
• test d’un état seul (consultez l’aide en ligne pour s’ouvre et la première page du site s’affiche. Le lancement du test depuis l’administrateur
développement est terminé. Comme pour le test du
plus de détails), WEBDEV est équivalent au lancement du site de-
projet, il est possible de lancer le débogueur dès Pour tester un site statique + dynamique (Session
• exécution du projet pas à pas, puis un poste distant.
qu’un problème est rencontré. ou AWP) depuis l’éditeur :
• test des performances de votre site, Avant de déployer un site WEBDEV, il est conseillé
L’exécution du projet pas à pas permet de lancer • pour tester la partie statique du site : effectuez de tester au moins une fois ce site depuis l’admi-
• test de non-régression/test automatique, le débogueur au lancement du site. Cette solution les manipulations correspondant au test d’un nistrateur WEBDEV.
• test de montée en charge. permet de suivre méticuleusement le déroulement site statique.
du site. • pour tester la partie dynamique (Session ou Pour lancer le test depuis l’administrateur
Le test de l’ensemble du projet permet de simuler Le test des performances de votre site permet de WEBDEV :
AWP) du site : effectuez les manipulations cor-
le lancement du site. Il est ainsi possible de tester vérifier et d’optimiser le temps d’exécution de votre respondant au test d’un site dynamique. 1. Lancez l’administrateur WEBDEV : sous le volet
le site dans son ensemble, même si son dévelop- site. "Outils", dans le groupe "Utilitaires Web", cliquez
pement n’est pas terminé. Dès qu’un problème Site dynamique (mode Session ou
Le test de non-régression (ou test automatique) sur "WDAdmin".
apparaît, vous pouvez lancer le débogueur pour AWP) : Lancement
connaître et solutionner le problème rencontré. est basé sur l’exécution de scripts. Il permet de 2. Dans l’onglet "Avancé" de l’administrateur
vérifier que lors de l’exécution de votre site, ... les Les modules suivants sont automatiquement
WEBDEV, cliquez sur le bouton "Page de Test".
Le test d’une page seule permet d’exécuter unique- fonctionnalités existantes sont toujours suppor- lancés lors d’un test d’un site dynamique (mode
ment la page en cours. Vous pouvez ainsi choisir de Session ou AWP) WEBDEV : Pour arrêter le test, affichez l’administrateur
tées. WEBDEV (en cliquant sur l’icône 26 présente
tester votre projet à partir d’une page donnée ou de • Le serveur Web installé sur le poste et configuré
tester le fonctionnement d’une page dès que son Le test de montée en charge permet de lancer dans la barre des tâches) et cliquez sur le bouton
plusieurs connexions simultanées à un même site pour WEBDEV lors de l’installation de WEBDEV.
développement est terminé. Comme pour le test du "Déconnecter" (onglet "Connexions").
dynamique WEBDEV. Si le serveur Web n’est pas lancé, le test ne
projet, il est possible de lancer le débogueur dès peut pas se faire. Remarque : L’administrateur WEBDEV permet éga-
qu’un problème est rencontré. Pour compléter ces différentes méthodes, WEBDEV lement d’effectuer un test du projet équivalent au
• L’administrateur WEBDEV (WD260ADMIN.EXE).
propose également de connaître le "Code cove- test du projet depuis l’éditeur :
L’administrateur permet de gérer les connexions
rage" du site, c’est-à-dire la mesure de la couver- au serveur Web et de paramétrer les sites 1. Lancez l’administrateur WEBDEV : sous le volet
ture des tests réalisés sur un site. Pour plus de WEBDEV. "Outils", dans le groupe "Utilitaires Web", cliquez
détails, consultez l’aide en ligne. Remarque : un test de projet peut être lancé de- sur "WDAdmin".
puis la page de test de l’administrateur (Onglet 2. Dans l’onglet "Connexions", sélectionnez le site
2 Tester un projet WEBDEV "Avancé" de WD260ADMIN, bouton "Page de et cliquez sur le bouton "Tester".
test").
2.3 Test de montée en charge / Test de non-
2.1 Tester le projet depuis l’éditeur déroulez "Options" et sélectionnez "Options • Le moteur WEBDEV (WD260AWP.EXE).
régression
générales de WEBDEV". Le navigateur peut être Le moteur WEBDEV permet de gérer les
Le lancement du test depuis l’éditeur permet par
sélectionné dans l’onglet "Web". requêtes effectuées par les internautes depuis L’outil WDTestSite permet de réaliser des tests de
exemple de tester :
• dans les options du mode test : sous le volet leur navigateur et de leur renvoyer la page HTML montée en charge : WDTestSite permet de lancer
• les fonctionnalités du site, dynamique correspondante. plusieurs connexions simultanées à un site dyna-
"Projet", dans le groupe "Mode test", déroulez
• l’utilisation du site avec différents navigateurs. "Mode test" et sélectionnez "Navigateur de test". Remarque : Le moteur WEBDEV est lancé uni- mique WEBDEV (Session ou AWP).
Le test d’un projet peut être lancé quel que soit quement si le projet contient des pages dyna- Chaque connexion effectue une succession d’ac-
l’élément en cours sous l’éditeur. Différents types de test miques. tions dans le site WEBDEV (scénario prédéfini).
Remarque : Le navigateur de test utilisé pour le test Pour tester un site statique depuis l’éditeur : • Le navigateur Internet. Pour plus de détails sur WDTestSite, consultez
du projet peut être choisi : 1. Sous le volet "Projet", dans le groupe "Mode Le navigateur Internet permet d’afficher les l’aide en ligne.
• dans les options de WEBDEV : sous le volet test", déroulez "Mode test" et sélectionnez pages HTML du site WEBDEV.
"Accueil", dans le groupe "Environnement", "Déboguer le projet depuis la page d’accueil".
2. L’éditeur est automatiquement réduit en icône.
3 Tester un site WEBDEV distant • exécuter pas à pas avec possibilité de sauter Par exemple :
des blocs. PROCEDURE MaTrace(ChaîneATracer)
• utiliser des points d’arrêt conditionnels SI EnModeTest() ALORS
WEBDEV offre plusieurs possibilités pour tester et Deux fonctionnalités sont disponibles : Trace(ChaîneATracer)
• modifier le code tout en continuant l’exécution,
déboguer un site directement sur le poste de déve- • Lancement et débogage du site sur un serveur FIN
loppement. Mais dans certains cas, il est néces- • ...
d’application distant.
saire de déboguer directement le site en exploita- Dans ce code, selon le résultat de la fonction
tion.
• Débogage d’un site en cours d’exécution sur un 5.4 Déboguer sans le débogueur EnModeTest, la fenêtre de trace apparaît unique-
serveur d’application distant.
Il est ainsi possible de déboguer depuis votre Dans certains cas, l’exécution d’un programme ment lors d’un test de l’application.
Pour ces deux fonctionnalités, une configuration avec ou sans le débogueur peut être différente.
bureau de Paris, un site lancé sur un serveur Web Une telle procédure permet de laisser l’appel aux
spécifique de la machine distante est nécessaire.
présent à Taïwan. Le débogage est effectué sans En effet, le débogueur introduit des pauses dans fenêtres de trace dans le code de l’application,
se déplacer, directement sur la configuration finale. l’exécution du traitement, durant lesquelles sans risque d’apparition en clientèle.
Windows effectue certaines tâches. L’appel à cette procédure de trace est identique à
Ainsi, le débogueur ne peut pas être utilisé dans l’utilisation de la fonction Trace :
4 Tester une page une procédure appelée par timer ou dans le code MaTrace("Client : "+...
de l’ascenseur. Client.NumClient)
Remarque : Pour connaître l’ensemble des limites
4.1 Tester la page depuis l’éditeur 4.2 Arrêter le test d’une page du débogueur, consultez l’aide en ligne. Créer un fichier de trace
Pour arrêter le test, plusieurs méthodes sont pos- Pour déboguer ces applications, il peut être né- Lors de traitements longs (traitements Batchs, ...),
Pour tester une page depuis l’éditeur : pour contrôler le bon déroulement du programme,
sibles : cessaire par exemple de suivre l’évolution d’une
1. Ouvrez la page à tester. valeur, le passage dans différentes procédures, ... il est nécessaire de conserver une trace physique
• 1ère méthode : des traitements effectués (un fichier texte par
2. Cliquez sur parmi les boutons d’accès Fermez la page en cours de test. WEBDEV Ces informations peuvent être :
rapide du menu de WEBDEV. Vous pouvez égale- exemple).
affiche l’éditeur en cours au moment du lance- • affichées à l’écran
ment utiliser le raccourci clavier F9. ment du test. La procédure suivante permet de gérer par exemple
3. L’éditeur est automatiquement réduit en icône • stockées dans un fichier de trace. l’affichage de la trace :
• 2ème méthode : Attention : Si les informations sont affichées à
et la page s’exécute. • soit à l’écran (paramètre /DEBUG en ligne de
• Revenez dans l’éditeur avec la barre des l’écran, elles doivent être affichées uniquement commande).
Lors du test, l’ensemble des fonctionnalités de tâches ou avec Alt + Tab.
la page pourra être exécuté. Il sera possible par lors des tests de l’application. • soit dans un fichier texte (mode par défaut).
exemple de lancer d’autres pages. • Confirmez l’arrêt du test. WEBDEV affiche
Afficher des informations PROCEDURE MaTrace(ChaîneATracer)
l’éditeur en cours au moment du lancement
du test. Deux outils permettent d’afficher des informations : CheminFichier est un entier
• les boîtes d’informations : fonction Info du CheminFichier =
WLangage. fRepDonnéesUtilisateur() +
5 Tracer un projet Attention : L’affichage d’une boîte d’information ProjetInfo(piNomProjet)+ ".txt"
NumFichier est un entier
est bloquant.
ModeDebug est un booléen = Faux
5.1 Principes du débogage 5.2 Présentation du débogueur • la fenêtre de trace : fonction Trace du SI Position(LigneCommande(),
WLangage. "/DEBUG") > 0 ALORS
Le débogage d’une application consiste à : Le débogueur permet de tracer les programmes en La fenêtre de trace s’affiche en haut à gauche ModeDebug = Vrai
• vérifier le bon fonctionnement d’un traitement, WLangage afin de faciliter la mise au point de pro- de l’écran, sans interrompre le déroulement du FIN
• comprendre le fonctionnement d’un programme grammes. programme. SI ModeDebug ALORS
existant, Le code source exécuté est visualisé à l’écran. Les Trace(ChaîneATracer)
Gérer l’affichage des informations de
• vérifier la valeur des variables, différents traitements exécutés sont hiérarchisés SINON
débogage
dans le volet "Débogueur". NumFichier = fOuvre(CheminFichier,
• vérifier le bon fonctionnement de cas particu- L’affichage à l’écran des informations de débogage foCréationSiInexistant + ...
liers dans une application ou un site. La valeur des variables peut être visualisée :
est utile uniquement en mode test. foEcriture + foAjout)
• individuellement dans la bulle d’aide de survol SI NumFichier <> -1 ALORS
Le débogueur permet de réaliser ces opérations. Avant de diffuser une application, il est donc néces-
de chaque variable. DateHeureTrace est un DateHeure
saire de supprimer tout affichage superflu.
Remarque : WEBDEV met également à votre dispo- • dans le volet "Débogueur". DateHeureTrace = DateHeureSys()
Pour éviter tout oubli, il est conseillé de gérer l’affi-
sition divers outils de trace (fenêtre de trace, boîte DateTrace est une Date
5.3 Fonctionnalités du débogueur chage des informations de débogage à l’aide d’une
d’information, ...). Pour plus de détails, consultez le DateTrace = Madate.PartieDate
procédure globale.
paragraphe "Déboguer sans le débogueur", page Le débogueur permet de : HeureTrace est une Heure
201. HeureTrace = Madate.PartieHeure
• connaître la pile des appels fEcritLigne(NumFichier,
• visualiser le contenu des variables ou des DateVersChaîne(DateTrace) + ...
expressions " - " +
HeureVersChaîne(HeureTrace)) Ce fichier a pour nom le nom du projet. Ce fichier 6.4 Choisir un traitement à optimiser • le pourcentage de temps passé dans le traite-
fEcritLigne(NumFichier, contient les informations à tracer durant l’exécu- ment de la fonction ou de la procédure. Plus ce
ChaîneATracer) tion du programme. Les informations sont complé- Le choix du traitement à optimiser se fait en fonc- pourcentage est important, plus le code peut
fEcritLigne(NumFichier, " ") tées par la date et l’heure de chaque "Trace". Il est tion de plusieurs critères : contenir des traitements pouvant être optimisés.
fFerme(NumFichier) • le temps d’exécution du traitement. Les traite-
ainsi possible de déterminer un éventuel dysfonc- Remarque : Si le traitement correspond à une
FIN ments les plus longs doivent bien entendu être
tionnement durant le traitement. fonction WLangage, il est relativement difficile de
FIN optimisés.
• Exemple de contenu du fichier de trace : l’optimiser.
Remarques :
01/12/2015 - 10:53:25:20
• Le fichier de trace est créé par défaut dans le Nom de client : Martin
répertoire des données de l’utilisateur. 7 Tests de non-régression
6 Test de performances
7.1 Présentation 7.3 L’utilitaire WDTestSite
6.1 Présentation 6.3 Lire le résultat de l’analyseur de perfor- Soucieux de la qualité des applications, plusieurs WDTestSite est un utilitaire permettant de réaliser
mances outils de tests sont à votre disposition : différents tests sur un site WEBDEV.
L’analyseur de performances est un outil permet-
L’analyseur de performances présente le résultat • Le mode test (Go de projet ou Go de page) qui Les différents tests possibles avec WDTestSite sont
tant de vérifier et d’optimiser le temps d’exécution
de l’analyse dans plusieurs onglets : permet de tester immédiatement une modifica- les suivants :
de votre site.
• l’onglet "Synthèse" présente les dix traitements tion dans votre site. • Test de montée en charge :
Son principe est simple :
qui ont pris le plus de temps. • L’utilitaire WDTestSite qui permet de réaliser Le test de montée en charge consiste à simuler
• Vous testez votre site. différents tests sur un site WEBDEV. la connexion de plusieurs internautes à un site
• l’onglet "Cartographie" présente une vision gra-
• Pendant ce test, l’analyseur de performances Pour automatiser ces tests et augmenter la qualité WEBDEV. Chaque internaute exécute une suite
phique des traitements les plus importants.
répertorie toutes les actions effectuées et les de vos applications, vous pouvez également faire d’opérations (scénario) simultanément.
traitements correspondants exécutés. • l’onglet "Détail" présente tous les traitements
lancés lors du test de l’application (classés du des tests unitaires automatiques. Grâce à ces • Test de non-régression :
A la fin du test, l’analyseur de performances vous tests, il est encore plus simple de contrôler toutes Le test de non-régression consiste à vérifier le
plus long au plus rapide).
présente : les fonctionnalités proposées par vos applications. fonctionnement d’un site WEBDEV entre deux
• l’onglet "Appels" permet de visualiser le détail mises à jour. Le test de non-régression consiste
• les 10 manipulations qui ont pris le plus de
des opérations réalisées dans un traitement. 7.2 Tests automatiques à vérifier qu’un scénario réalisé avec une précé-
temps.
Pour chaque traitement, les informations suivantes dente version du site fonctionne correctement
• toutes les actions effectuées dans le site testé, Chaque test est composé d’un scénario directe-
sont affichées : avec la mise à jour du site.
triées par durée (de l’action la plus longue à ment éditable dans l’interface du produit. Ce scé-
l’action la moins longue). Fonction Fonction, traitement ou procédure nario est écrit en WLangage et peut être modifié à • Test d’un site en mode multi-utilisateurs :
Il est alors possible de sélectionner un traitement exécutée. n’importe quel moment. Le test d’un site en mode multi-utilisateurs per-
afin d’analyser les causes de son temps de traite- Ces tests peuvent être lancés par exemple avant met de vérifier que les accès concurrentiels aux
Temps Temps d’exécution de la fonction. fichiers de données sont correctement gérés. Ce
ment pour l’optimiser. Total chaque déploiement pour vérifier le bon fonction-
nement d’un site après diverses modifications. test consiste à simuler la connexion simultanée
6.2 Lancer l’analyseur de performances Nb appels Nombre d’appels effectués à la Les éléments suivants peuvent être testés :
de plusieurs internautes à un site WEBDEV.
fonction (procédure ou traitement). Chaque internaute exécute une suite d’opéra-
Pour lancer l’analyseur de performances, sous • les collections de procédures tions (scénario) simultanément.
le volet "Projet", dans le groupe "Audit et perfor- Temps 1 Temps d’exécution d’un appel à la • les classes
mances", déroulez "Analyser les performances" et appel fonction (procédure ou traitement). • Comparaison de différents serveurs :
Chaque test est associé à un code WLangage : le WDTestSite permet de comparer la vitesse de
sélectionnez "Analyser les performances". % code Pourcentage de code exécuté hors scénario du test. Ce scénario est visible sous l’édi- différents serveurs. Il suffit de lancer un scé-
Le projet est alors automatiquement exécuté en appel à une fonction WLangage ou teur de code. Le code des tests peut être modifié. nario sur différents serveurs et de comparer le
mode test. Vous pouvez exécuter le traitement à à un appel d’une fonction ou une temps d’exécution de ce scénario.
Les tests et le code associé ne sont pas livrés en
optimiser dans votre site. procédure personnelle. clientèle. Le nombre de tests d’un site n’a donc au- • Optimisation de traitements réalisés en
Pour revenir sous l’éditeur, il suffit de fermer votre cune incidence sur la taille du site livré en clientèle. WLangage :
Parent Traitement qui a appelé la fonction.
application ou votre site. WDTestSite permet de comparer le temps d’exé-
Pour plus de détails, consultez l’aide en ligne (mot-
L’analyseur de performances affiche alors le résul- Remarque : clé : "Test automatique"). cution d’un scénario avant et après une optimi-
tat de l’analyse. • Le libellé "Exécution complète" représente le sation du code WLangage.
Remarque : Il est conseillé d’utiliser l’analyseur de temps complet de l’exécution du test du site réa- Pour plus de détails, consultez l’aide en ligne (mot-
performances pour optimiser votre site (avant sa lisé avec l’analyseur de performances. clé : "WDTestSite").
diffusion par exemple). • Le libellé "Total Page XXX" représente le temps
complet de l’exécution de la page XXX (de son
ouverture à sa fermeture).
PARTIE 7
Déployer un
site Web
204 Partie 6 : Tester un site Web

Déploiement d’un
Contenu
site statique
Principe
Le déploiement d’un site statique est réalisé par FTP :
Poste de
développement Hébergeur
2 Installation par FTP

(WDDéploie) 1 Configuration du
serveur FTP
3 Mise en service du site

(lien de lancement)
Informations nécessaires pour le déploiement

Si vous n’avez pas ces informations, inutile de tenter d’installer. Contactez votre héber-
geur pour obtenir ces informations.
Avant d’effectuer un déploiement par FTP, l’hébergeur doit communiquer au déve-

loppeur les informations suivantes :
• Nom du serveur Web où l’installation doit être réalisée (ou son adresse IP).
• Nom d’utilisateur et mot de passe définis dans le serveur FTP.
Lors du déploiement par FTP, le développeur doit préciser dans WDDéploie :

• les informations fournies par l’hébergeur.
• les fichiers à installer.
206 Partie 7 : Déployer un site Web Partie 7 : Déployer un site Web 207
Déploiement d’un site
Déploiement d’un site statique ou PHP en Contenu
pratique dynamique WEBDEV

1 Présentation Les différents types de déploiement
Lors du développement d’un site statique ou PHP, • déploiement par réseau : conseillé lorsque le WEBDEV propose trois méthodes de déploiement d’un site dynamique (site Session ou
une des phases importantes consiste à déployer ce serveur est facilement accessible. AWP) :
site sur un serveur Web (chez un hébergeur ou en L’outil WDDéploie permet de simplifier le déploie- • déploiement par média physique (CD-ROM, ...) du site WEBDEV, avec création d’une
Intranet). ment de vos sites statiques.
version d’installation livrable sur CD-ROM à l’hébergeur.
Deux méthodes de déploiement sont possibles :
Remarque : Pour déployer un site dynamique,
• déploiement distant (par FTP) : conseillé consultez "Déploiement d’un site dynamique en
lorsque le serveur n’est pas directement dispo- pratique", page 214. Poste de
nible.
2 Création de l’installation
1 Création d’un programme
d’installation sur un média
physique (CD ROM, ...)
2 Installation du site
WEBDEV et para-
métrage de
Pour déployer votre site statique : • Caractéristiques du serveur FTP utilisé pour la l’administrateur
mise à jour du site. Ces caractéristiques vous
3
1. Sous le volet "Projet", dans le groupe
"Génération", cliquez sur "Déployer le site". L’outil sont fournies par l’hébergeur du site, ... Mise en service du site
WDDéploie se lance. 3. Cliquez sur le bouton "Préparer". WDDéploie (lien de lancement)
2. Créez le profil correspondant à votre site. Ce prépare la liste des fichiers à installer. En cas
profil contient les informations suivantes : de mise à jour, WDDéploie compare les fichiers Remarque : un serveur d’application WEBDEV peut être intégré à l’installation fournie
• Emplacement des fichiers locaux (sous-réper- présents sur le poste de développement et les par média physique.
toire "<NomProjet>_WEB" de votre site). fichiers déjà installés.
• déploiement à distance directement depuis le poste de développement (par trans-
• Adresse du site WEBDEV. 4. Cliquez sur le bouton "Synchroniser". Les
fichiers de votre site sont copiés à l’emplacement fert de fichiers par Internet en mode HTTP).
• Emplacement des fichiers du site déployé spécifié dans le profil.
(réseau ou serveur FTP).
Pour plus de détails sur l’utilisation de WDDéploie, Poste de
consultez l’aide en ligne.
2 Installation du site par HTTP

1 Configuration du
gestionnaire de
comptes
3 Mise en service du site

(lien de lancement)
Remarque : Il est également possible de réaliser un déploiement par transmission de

fichiers en mode FTP. Dans ce cas, un serveur FTP doit être configuré chez l’héber-
geur.
• déploiement à distance depuis un poste d’administration (par transfert de fichiers L’installation à distance (par HTTP) directement depuis un poste de d’administration
par Internet, FTP) est conseillée si les caractéristiques du serveur ne sont pas connues par le développeur
lors de la création du programme d’installation. Le programme d’installation est appelé
Transmission Installation dans ce cas un "Package".
du package du site
Si un site est destiné à plusieurs clients, il est ainsi possible de créer un seul package et
de le fournir à tous les clients voulus.
Poste de Serveur Web Les paramètres du serveur (Adresse, ...) ne seront renseignés que lors de l’exécution du
développement
package sur le poste d’administration.
2
1
Création du Déploiement sur média physique : informations nécessaires
package
d’installation Configuration du
gestionnaire de
Lors d’un déploiement par média physique, les informations concernant l’installation et
4
Mise en comptes le paramétrage du site sont données à la fois dans l’assistant de préparation de l’instal-
service du
site (lien de lation et dans l’assistant d’installation.
lancement)
Lors de la préparation de l’installation, il est nécessaire de fournir :
• le répertoire d’installation,
• les fichiers à installer,
• le répertoire de génération de l’installation.
Poste d’administration Lors de l’installation, il est nécessaire de fournir :
3
• le répertoire des fichiers de données,
• le répertoire des fichiers du site.
Après l’installation, il est nécessaire de paramétrer les caractéristiques du site (temps
Exécution du package :
Installation du site sur le serveur de connexion, nombre de connexions, ...) dans l’administrateur WEBDEV (version de
par HTTP déploiement).
Remarque : Il est également possible de réaliser ce déploiement par transmission de

Déploiement par HTTP directement depuis le poste de développe-
fichiers en mode FTP. Dans ce cas, un serveur FTP doit être configuré sur le Serveur
ment : informations nécessaires
Web.
Si vous n’avez pas ces informations, inutile de tenter d’installer. Appelez le prestataire
Choisir une méthode de déploiement pour obtenir ces informations.
Le choix de la méthode de déploiement dépend surtout des contraintes imposées par

Avant d’effectuer un déploiement par HTTP directement depuis le poste de développe-
l’hébergeur et de la localisation du serveur de déploiement (distant ou présent dans les
ment, l’hébergeur doit communiquer au développeur les informations suivantes :
locaux).
• Nom du serveur Web où l’installation doit être réalisée (ou son adresse IP),
L’installation par média physique est conseillée si le serveur Web est facilement acces- • Nom d’utilisateur et mot de passe associé définis dans le gestionnaire de compte
sible (par exemple, le serveur Web se situe dans les mêmes locaux que l’équipe de WEBDEV.
développement). • Le compte de l’OS utilisé pour exécuter les sites WEBDEV (ce compte a été associé
L’installation à distance (par HTTP) directement depuis le poste de développement est au compte WEBDEV dans le gestionnaire de compte).
conseillée si le poste de déploiement n’est pas facilement accessible.
Avant d’effectuer une installation à distance, l’hébergeur doit configurer le gestionnaire
de comptes WEBDEV.
Lors du déploiement par HTTP, le développeur doit préciser dans l’assistant :
Mise en service d’un site
Contenu
• les informations fournies par l’hébergeur,
• les fichiers à installer,
dynamique WEBDEV
• le nom du sous-répertoire des fichiers de données,
• les différents paramètres de connexion au site. Votre site dynamique WEBDEV (en mode Session ou AWP) sera accessible par les inter-
nautes dès qu’il aura été mis en service. La mise en service d’un site WEBDEV consiste
à activer le site.
Remarques :
• Il est possible de réaliser une installation différée, à la date et à l’heure choisies. L’activation d’un site WEBDEV peut se faire par plusieurs méthodes :
• L’installation et la mise à jour par HTTP sont sécurisées par mot de passe et cryptage • soit lors de l’installation par HTTP : une case à cocher permet d’activer automatique-
des données transmises. ment le site après son installation.
Déploiement par HTTP directement depuis un poste d’administra-

tion : informations nécessaires
Lors de la création du programme d’installation, aucune information spécifique n’est
nécessaire.
Lors de l’exécution du programme d’installation du site (depuis un poste d’administra-

tion), l’hébergeur devra indiquer :
• Nom du serveur Web où l’installation doit être réalisée (ou son adresse IP).
• Nom d’utilisateur et mot de passe associé définis dans le gestionnaire de compte
WEBDEV.
• Le compte de l’OS utilisé pour exécuter les sites WEBDEV (ce compte a été associé
au compte WEBDEV dans le gestionnaire de compte). • soit avec l’administrateur à distance.
• soit avec l’administrateur WEBDEV présent sur le poste de déploiement (option "Blo-
Remarques : qué", dans l’onglet "Sites").
• Il est possible de réaliser une installation différée, à la date et à l’heure choisies.
• L’installation et la mise à jour par HTTP sont sécurisées par mot de passe et cryptage
des données transmises.
Déploiement d’un site dynamique en Pour installer votre site WEBDEV, l’hébergeur
doit :
Remarque : Il est également possible de créer
une installation par média physique autonome,
pratique 1. Installer le serveur d’application WEBDEV sur

le serveur Web (si cela n’a pas déjà été fait).
contenant l’installation d’un serveur d’applica-
tion WEBDEV limité à 10 connexions. Cette solu-
2. Installer votre site WEBDEV en lançant le tion est idéale pour les maquettes présentées
Lors du développement d’un site dynamique (en • déploiement par package : méthode conseillée sur un portable.
programme exécutable Installe fourni avec votre
mode Session ou AWP), une des phases impor- lorsque le serveur n’est pas directement dispo- • soit une installation via une image Docker.
installation.
tantes consiste à déployer ce site sur un serveur nible et si vous ne connaissez pas les caractéris-
Web (chez un hébergeur ou en Intranet). tiques du serveur.
Plusieurs méthodes de déploiement sont pos- Remarques : 2 Déploiement distant (par HTTP ou FTP)
sibles : • Pour chaque serveur Web accueillant des sites
• déploiement distant (par HTTP) : méthode WEBDEV, l’hébergeur doit posséder une licence
conseillée lorsque le serveur n’est pas directe- du serveur d’application WEBDEV. 2.1 Les étapes • Caractéristiques du compte FTP si nécessaire
ment disponible. (le nom d’utilisateur et le mot de passe).
• Pour créer l’installation d’un site, sous le volet Les étapes du déploiement sont les suivantes :
Remarque : par compatibilité avec les versions "Projet", dans le groupe "Génération", déroulez Pour identifier simplement les caractéristiques
1. Installation du serveur d’application WEBDEV
précédentes, il est également possible de réali- "Déployer le site" et sélectionnez "Générer et du serveur pour une prochaine mise à jour, don-
chez l’hébergeur (étape optionnelle). Pour plus de
ser un déploiement distant par FTP. déployer le site". nez un nom à ce serveur. Ce nom apparaîtra
détails, consultez la documentation du serveur
• déploiement par média physique : DVD, ... : (suivi de l’adresse du serveur) dans la fenêtre de
Pour déployer un site statique, consultez d’application WEBDEV.
méthode conseillée lorsque le serveur est facile- choix du type d’installation.
"Déploiement d’un site statique ou PHP en pra- 2. Création par l’hébergeur des éléments sui-
ment accessible. tique", page 208. 2. Les fichiers à installer. Par défaut, l’assistant
vants :
sélectionne la bibliothèque, les fichiers de don-
• un compte WEBDEV (dans l’administrateur). nées, les images et les pages HTML.
1 Mise en bibliothèque • un compte FTP (dans le serveur FTP) unique- 3. Paramétrage de l’installation : Choisissez le
ment si le déploiement est réalisé par FTP. type d’installation à distance à effectuer :
3. L’hébergeur transmet les noms et mots de • Mise à jour immédiate :
Avant de procéder à une installation, il faut mettre • soit un package de déploiement : passe associés ainsi que le nom (adresse IP) du Les fichiers du site sont compactés et trans-
en bibliothèque tous les objets de votre site dyna- Un package de déploiement est un exécutable serveur. férés immédiatement sur le serveur Web
mique (en mode Session ou AWP). Une bibliothèque contenant tous les éléments nécessaires au 4. Création de l’installation à distance depuis (l’accès au serveur Web doit être possible de-
est un fichier qui regroupe tous les objets créés déploiement d’un site WEBDEV. Ce package l’éditeur : sous le volet "Projet", dans le groupe puis le poste d’installation). Le site WEBDEV
lors du développement (description de la base de pourra ensuite être exécuté depuis un poste "Génération", déroulez "Déployer le site" et sélec- est ensuite installé automatiquement sur le
données, description des pages, codes sources quelconque pour installer le site Web sur le tionnez "Générer et déployer le site". Dans l’assis- serveur Web.
compilés, ...). Les pages HTML et les images ne poste serveur par HTTP ou FTP. tant qui se lance, sélectionnez l’option "Déployer
sont pas incluses dans la bibliothèque. La mise en Pour créer ce type d’installation, il n’est pas • Mise à jour différée :
sur un serveur d’application WEBDEV distant". Les Les fichiers du site sont compactés et transfé-
bibliothèque est automatique lors de la création de nécessaire de connaître les caractéristiques du fichiers nécessaires sont copiés dans le répertoire
la procédure d’installation. compte FTP et du compte WEBDEV présent sur rés immédiatement sur le serveur Web (l’ac-
de transfert. cès au serveur Web doit être possible depuis
Une fois la bibliothèque créée, l’assistant de créa- le serveur Web.
5. Mise en service du site WEBDEV. le poste d’installation). Le site WEBDEV sera
tion de l’installation se lance. Vous pouvez choisir • soit une installation via le service d’héberge-
Attention : Par défaut, le déploiement distant d’un installé sur le serveur à la date et à l’heure
de réaliser : ment de test de PC SOFT :
site WEBDEV est réalisé par HTTP. indiquée. Il est ainsi possible de faire la mise
• soit une installation distante (via HTTP ou FTP) PC SOFT propose d’héberger vos sites de test.
à jour du site dans la nuit (entre minuit et 3h
Avant de réaliser une installation à distance, L’installation s’effectue simplement, directe- 2.2 Création de l’installation du matin par exemple), lorsque le nombre
l’hébergeur doit avoir configuré le serveur Web ment depuis l’environnement. Ainsi, une fois
Il faut définir dans l’assistant : d’internautes est moins important.
et il doit également vous avoir transmis les para- votre site terminé, il est possible de le tester "en
Attention : la date et l’heure spécifiées sont
mètres nécessaires à l’installation du site. réel" directement. 1. Les informations concernant le poste distant. celles du serveur. Assurez-vous de leur vali-
• soit un déploiement dans le Cloud PC SOFT : Pour réaliser ce type d’installation, il est néces- Ces informations doivent être fournies par l’héber- dité.
PC SOFT propose une plateforme d’héberge- saire de posséder un compte développeur PC geur :
SOFT. Si nécessaire, l’assistant propose de créer • Activer le site immédiatement après instal-
ment sur le modèle du Cloud Computing : vous • Adresse du serveur (un nom de machine lation :
déployez sans vous soucier des contraintes ce compte. accessible par le réseau, une adresse IP, ou Le site sera disponible directement après son
matérielles et vous êtes facturés selon l’usage • soit une installation par média physique : une adresse Internet). installation : il sera possible de s’y connecter
réel de vos applications. L’assistant vous permet de créer un programme • Caractéristiques du compte WEBDEV (le nom soit en utilisant l’adresse adéquate, soit par
Pour réaliser ce type d’installation, il est néces- d’installation de votre site. Ce programme sera d’utilisateur, le mot de passe et le compte de une page statique contenant un lien sur le
saire de posséder un compte Cloud PC SOFT. ensuite fourni à l’hébergeur et permettra d’ins- l’OS exécutant les sites WEBDEV associés au site. Si cette option n’est pas cochée, il sera
Si nécessaire, l’assistant propose de créer ce taller votre site WEBDEV sur le serveur Web. compte). possible d’activer le site grâce à l’administra-
compte. teur à distance.
4. Paramétrage du site. Ces options permettent Cas particulier : Si les fichiers de données présents 4. Création par l’hébergeur d’un compte WEBDEV 5. Le profil par défaut du serveur Web à utiliser.
de configurer les options de connexion au site dès sur le serveur sont au format Hyper File 5.5, il est (dans l’administrateur) et d’un compte FTP si Ces paramètres pourront être saisis ou modifiés
son installation. nécessaire de les migrer au format HFSQL Classic. nécessaire (dans le serveur FTP). par la personne qui installera le package de
Ces paramètres pourront être modifiés si néces- Cette migration doit être effectuée uniquement lors 5. Exécution du package de déploiement sur un déploiement.
saire : de la première mise à jour du site. poste et installation du site WEBDEV. 6. Paramétrage de l’installation : Choisissez le
• soit par l’administrateur de déploiement pré- 6. Spécifiez si votre site utilise l’Accès Natif 6. Mise en service du site WEBDEV. type d’installation à distance à effectuer :
sent sur le serveur. AS/400. • Mise à jour différée :
• soit par l’administrateur à distance, utilisable Rappel : si votre site utilise l’Accès Natif AS/400, 3.2 Création de l’installation Les fichiers du site sont compactés et transfé-
par le gestionnaire du site. il est nécessaire d’installer les DLL AS/400 sur le rés immédiatement sur le serveur Web (l’ac-
Il faut définir dans l’assistant :
5. Si une mise à jour de l’analyse a été réalisée, serveur Web. cès au serveur Web doit être possible depuis
Si vous utilisez une licence pour un nombre de 1. Les fichiers à installer. Par défaut, l’assistant
sélectionnez la modification automatique des le poste d’installation du package). Le site
postes limité, il est nécessaire de gérer dans le sélectionne la bibliothèque, les fichiers de don-
fichiers de données lors de l’installation. WEBDEV sera installé sur le serveur à la date
site WEBDEV le nombre de connexions en cours nées, les images et les pages HTML.
Remarque : si cette option est choisie, la mise à et à l’heure indiquée. Il est ainsi possible de
(fichier INI ou base de registres, ...). 2. Si une mise à jour de l’analyse a été réalisée, faire la mise à jour du site dans la nuit (entre
jour sera proposée lors de l’installation.
sélectionnez la modification automatique des minuit et 3h du matin par exemple), lorsque le
fichiers de données lors de l’installation. nombre d’internautes est moins important.
Remarque : si cette option est choisie, la mise à Attention : la date et l’heure spécifiées sont
Récapitulatif des éléments installés et de leur localisation : jour sera proposée lors de l’installation. celles du serveur. Assurez-vous de leur vali-
Cas particulier : Si les fichiers de données pré- dité.
sents sur le serveur sont au format Hyper File 5.5,
Serveur de sites Serveur de données • Activer le site immédiatement après instal-
il est nécessaire de les migrer au format HFSQL
lation :
Répertoire des sites WEBDEV Répertoire des données Classic. Cette migration doit être effectuée uni-
Le site sera disponible directement après son
de l’utilisateur N de l’utilisateur N quement lors de la première mise à jour du site.
installation : il sera possible de s’y connecter
3. Paramétrage du site. Ces options permettent soit en utilisant l’adresse adéquate, soit par
Répertoire défini par l’hébergeur. Répertoire défini par l’hébergeur. de configurer les options de connexion au site dès une page statique contenant un lien sur le
Dans ce répertoire, un sous-répertoire sera créé Dans ce répertoire, un sous-répertoire sera créé son installation. site. Si cette option n’est pas cochée, il sera
pour chaque site de l’utilisateur N. pour les fichiers de données de chaque site de Ces paramètres pourront être modifiés si néces- possible d’activer le site grâce à l’administra-
l’utilisateur N. saire : teur à distance.
• soit par l’administrateur de déploiement pré-
Dans ce sous-répertoire de sites sont installés les Dans ce sous-répertoire de données sont installés sent sur le serveur. 3.3 Installation du site dynamique
pages HTML, la bibliothèque (".WDL"), le répertoire les fichiers ".FIC", les fichiers ".NDX", les fichiers
des images. ".MMO". • soit par l’administrateur à distance, utilisable Pour installer le site, il suffit de :
par le gestionnaire du site. 1. Exécuter le package de déploiement.
Exemple : Le répertoire des sites de l’utilisateur N Exemple : Le répertoire des données de l’utilisa- 4. Spécifiez si votre site utilise l’Accès Natif 2. Indiquer les caractéristiques du serveur Web
est "C:\UtilN\Sites WEBDEV". teur N est "D:\UtilN\Données WEBDEV". AS/400. sur lequel le site WEBDEV doit être installé (carac-
L’utilisateur N installe son site "Bateau". Ce site L’utilisateur N installe son site "Bateau". Par Rappel : si votre site utilise l’Accès Natif AS/400, téristiques du compte FTP du serveur si néces-
sera installé dans le répertoire "C:\UtilN\Sites défaut, les fichiers de données seront installés il est nécessaire d’installer les DLL AS/400 sur le saire et caractéristiques du compte WEBDEV du
WEBDEV\Bateau". dans le répertoire "D:\UtilN\Données WEBDEV\ serveur Web. serveur).
Bateau". Si vous utilisez une licence pour un nombre de
postes limité, il est nécessaire de gérer dans le 3. Valider l’installation du site.
site WEBDEV le nombre de connexions en cours
(fichier INI ou base de registres, ...).
3 Déploiement par package de déploiement
4 Déploiement par média physique
3.1 Les étapes 2. Transmission du package de déploiement (par
Internet, DVD, ...) à l’administrateur du serveur
Les étapes du déploiement sont les suivantes : Ce déploiement est réalisé en trois étapes : 2. Installation si nécessaire du serveur d’appli-
Web (hébergeur par exemple).
1. Création du package de déploiement depuis 1. Création de la version d’installation depuis cation WEBDEV sur le serveur Web. Pour plus de
3. Installation du serveur d’application WEBDEV détails, consultez la documentation du serveur
l’éditeur : sous le volet "Projet", dans le groupe l’éditeur : sous le volet "Projet", dans le groupe
chez l’hébergeur (étape optionnelle). Pour plus de d’application WEBDEV.
"Génération", déroulez "Déployer le site" et sélec- "Génération", déroulez "Déployer le site" et sélec-
détails, consultez la documentation du serveur
tionnez "Générer et déployer le site". Dans l’assis- tionnez "Générer et déployer le site". Dans l’assis- 3. Installation du site chez l’hébergeur.
d’application WEBDEV.
tant qui se lance, sélectionnez "Créer un package tant qui se lance, sélectionnez l’option "Créer une
de déploiement distant". Un fichier d’installation installation par média physique".
est créé.
4.1 Création de l’installation site WEBDEV le nombre de connexions en cours • Installez votre site sur un serveur "dédié" (solu- • Cas 3 : votre serveur Web peut être sélection-
(fichier INI ou base de registres, ...). tion conseillée). Vous êtes propriétaire de ce né directement : sélectionnez votre serveur.
Il faut définir dans l’assistant : serveur. Vous pouvez demander la génération d’un
9. Imprimez le dossier de déploiement :
1. Un titre et un intitulé de version pour votre Le dossier de déploiement précise la licence Dans ce cas vous devez : fichier de configuration afin de pouvoir exécu-
installation. Un titre peut être donné dans cha- WEBDEV ainsi que tous les modules installés • configurer le serveur Web, ter la configuration ultérieurement.
cune des langues susceptibles d’être choisies au lors du déploiement. Il précise également les Vous pourrez modifier le fichier de configura-
moment de l’installation. • gérer les ressources mémoires nécessaires
clés de la base de registres générées pour le pour votre site. tion avant de l’exécuter.
2. Un répertoire par défaut. site WEBDEV. Lors de l’installation du site sur le Selon le serveur choisi, le fichier de configura-
Pour installer le site WEBDEV sur un serveur Web tion a une extension ".reg", ".conf" ou autre.
3. Un décor pour la fenêtre d’installation. Vous serveur, ces clés pourront être mises à jour direc- (chez un hébergeur ou en Intranet) :
pouvez personnaliser le décor à l’aide du bouton tement dans la base de registres ou enregistrées 5. Sélectionnez le répertoire d’installation :
"Personnaliser". dans un fichier pour un examen ultérieur. 1. Installez si nécessaire le serveur d’application <webroot> désigne le répertoire racine du serveur
Le dossier de déploiement doit être fourni à la WEBDEV sur le serveur Web. Web de la machine. En fonction du serveur Web
4. Les fichiers de votre site. Attention : si le serveur d’application WEBDEV
Remarque : les fichiers bibliothèques, HTML, personne chargée d’installer votre site WEBDEV choisi, le répertoire racine est détecté et affiché.
(hébergeur ou responsable réseau Intranet). n’est pas installé sur le serveur Web, le site Si le répertoire racine du serveur Web n’est pas
Java, JavaScript et les fichiers images sont sélec- dynamique WEBDEV ne pourra pas fonctionner
tionnés par défaut. 10. Modifiez éventuellement le répertoire de affiché, vous pouvez le saisir dans la zone grise ou
correctement. le rechercher à l’aide du bouton "…".
5. Les fichiers annexes : génération de l’installation. Remarque : Pour chaque serveur Web hébergeant
Par défaut l’installation est générée dans le sous- Attention : si la zone est renseignée, évitez de la
• La licence (fichier au format txt) s’affichera au des sites WEBDEV, l’hébergeur doit posséder une modifier.
lancement de l’installation. répertoire "INST" de votre projet. licence du serveur d’application WEBDEV.
Remarque : si la licence n’est pas validée par 11. Générez l’installation. 6. Mise à jour des fichiers de données (étape
2. Pour installer le site WEBDEV, exécutez sur le optionnelle, uniquement dans le cas d’une mise à
la personne chargée de l’installation, l’instal- Une fenêtre d’information signale la présence serveur Web, le programme INSTALLE.EXE fourni
lation sera abandonnée. éventuelle de noms longs de fichiers. En effet, en jour du site).
avec l’installation du site WEBDEV. Pour mettre à jour les fichiers de données asso-
• Le "Lisez-moi" : ce fichier peut correspondre à cas d’installation sur un lecteur réseau, vérifiez Important : S’il s’agit d’une mise à jour d’un site
que : ciés au site WEBDEV, choisissez l’exécution de la
différents formats (txt, htm, doc, hlp, pdf, …). existant, vous devez au préalable bloquer le site modification automatique des fichiers de donnés.
Quel que soit le format choisi, l’utilisateur doit • le lecteur réseau supporte correctement les à l’aide de l’administrateur WEBDEV (cochez "Site
noms longs, En cas de doute sur la nécessité d’opérer cette
posséder un logiciel permettant de visualiser WEBDEV bloqué" dans l’onglet "Sites"). mise à jour, contactez le fournisseur du site.
ce fichier. • le lecteur réseau ne modifie pas les majus- 3. Choisissez la langue d’installation : un assis- Attention : Les fichiers de données du site ne
• Un exécutable à lancer à la fin de l’installa- cules/minuscules dans les noms de fichiers. tant d’installation se lance. Passez au plan sui- doivent pas être en cours d’utilisation. Utilisez
tion. 12. Lorsque la création de l’installation est termi- vant. l’administrateur WEBDEV pour vérifier qu’aucune
Attention : Pensez à joindre les fichiers liés à née, WEBDEV propose de : 4. L’installation détecte automatiquement si un connexion n’est en cours et arrêtez les sites
cet exécutable (DLL, fichiers de paramètres, • tester directement l’installation créée. ou plusieurs des serveurs Internet suivants sont (cochez "Site bloqué" dans l’onglet "Sites").
autres fichiers exécutables, …). • ouvrir l’explorateur Windows sur le répertoire installés sur le poste : 7. Choisissez l’installation d’un pilote ODBC pour
Remarque : il est possible de sélectionner un de génération de l’installation. • IIS Version 7 et plus (Microsoft Internet HFSQL si des programmes non réalisés avec
fichier de licence et un fichier "Lisez-moi" pour Information Server) : serveur Microsoft. WEBDEV doivent accéder aux fichiers HFSQL du
chaque langue de l’installation. 13. Réalisez une sauvegarde de votre site.
Il est recommandé de conserver une sauvegarde • Apache Version 2.2 et 2.4 : serveur Web gra- site qui va être installé (étape optionnelle).
6. Si une mise à jour de l’analyse a été réalisée, des sources de votre site correspondant à une tuit fourni par l’Apache Group. 8. Le résumé de l’installation est affiché.
sélectionnez la modification automatique des version installée. Confirmez vos choix.
fichiers de données lors de l’installation. Trois cas peuvent se présenter :
Remarque : si cette option est choisie, la mise à • Cas 1 : votre serveur Web n’apparaît pas 9. L’installation est terminée :
4.2 Installation du site dynamique sur un
jour sera proposée lors de l’installation. serveur Web (média physique) dans cette liste : sélectionnez "Autre serveur". • Cliquez sur l’adresse proposée pour tester
7. Si des programmes non réalisés avec WEBDEV Pour plus de détails sur la configuration de votre site en local. Cette option n’est utilisable
Si vous installez votre site chez un hébergeur, celui- votre serveur, consultez l’aide en ligne. que si le serveur Web a été configuré automa-
doivent accéder aux fichiers HFSQL de votre site,
ci peut vous proposer deux possibilités : • Cas 2 : votre serveur Web apparaît dans la tiquement.
choisissez l’installation d’un pilote ODBC.
Remarque : si cette option est choisie, l’installa- • Installez votre site sur un serveur "mutualisé". liste mais en grisé : votre serveur Web n’a • Cliquez sur "Copier" pour récupérer l’adresse
tion du pilote sera proposée lors de l’installation. Ce serveur gère les sites de plusieurs clients. pas été détecté. Vous pouvez toutefois le proposée. Pour plus de détails, consultez le
Ce serveur est configuré lors de l’installation du sélectionner en cochant "Afficher tous les paragraphe "Mise en service du site dyna-
8. Spécifiez si votre site utilise l’Accès Natif
serveur d’application WEBDEV. L’administrateur serveurs". mique", page 220.
AS/400.
WEBDEV (WD260ADMIN.EXE) permet de confi- Vous devez alors demander la génération • Cliquez sur "Terminer" pour terminer l’instal-
Rappel : si votre site utilise l’Accès Natif AS/400,
gurer individuellement chaque site WEBDEV d’un fichier de configuration afin de pouvoir lation.
il est nécessaire d’installer les DLL AS/400 sur le
installé sur ce serveur. exécuter la configuration ultérieurement (si
serveur Web.
Attention : Les ressources mémoires du serveur vous avez prévu d’installer votre serveur plus
Si vous utilisez une licence pour un nombre de
sont partagées par tous les sites. tard par exemple).
postes limité, il est nécessaire de gérer dans le
10. Configuration du serveur Web :
Si la configuration du serveur Web n’a pas été
• au nombre de connexions autorisées pour un
internaute, PARTIE 8
faite automatiquement, deux cas peuvent se pré- • à la durée d’inactivité autorisée.
senter :
• Cas 1 : votre serveur a été détecté et un Testez le site WEBDEV depuis l’administrateur à
fichier de configuration a été généré : vous partir de l’option [page de test] (onglet "Avancé").
pouvez visualiser, éventuellement modifier Remarques :
puis exécuter ce fichier. • L’administrateur WEBDEV (WD260ADMIN.EXE)
• Cas 2 : votre serveur n’a pas été détecté : doit être lancé et tourner en permanence en
pour plus de détails, consultez l’aide en ligne. tâche de fond. Il est possible de l’installer en
11. A l’aide de l’administrateur WEBDEV, déblo- tant que service sous Windows NT.
quez les sites éventuellement bloqués et configu- • Pour plus de détails sur l’administrateur
rez les paramètres de votre site dynamique. WEBDEV, consultez "L’administrateur WEBDEV
Ces paramètres correspondent : en pratique", page 224.
• au nombre total de connexions autorisées sur
le site,
5 Mise en service du site dynamique Hébergement de

Pour permettre aux internautes l’accès à votre 2. Dans l’entête de cette page, utiliser les com-
sites WEBDEV
site installé chez un hébergeur, créez un lien dans mandes html (META REFRESH) pour réaliser une
votre page d’accueil permettant de lancer votre site redirection vers le site WEBDEV c’est-à-dire, par
WEBDEV. exemple, vers l’adresse :
Si vous avez réalisé une installation par média phy- "http://205.51.231.57/WD260AWP/
sique, l’adresse à utiliser a été fournie à la fin de WD260AWP.EXE/CONNECT/jaidebeauxyeux"
l’installation. Remplacez <localhost> par l’adresse
de votre site. Exemple de balise META à placer dans la partie
<HEAD> d’une page HTML :
Exemple permettant de lancer un site <meta http-equiv="refresh"
"NOTRAPPLI" à partir du site de PC SOFT : content="0;URL=http://205.51.231.57/
http://www.pcsoft.fr/WD260AWP/ WD260AWP/WD260AWP.EXE.EXE/CONNECT/
WD260AWP.EXE/ CONNECT/NOTRAPPLI jaidebeauxyeux">
Pour lancer le site en utilisant directement son Cas particulier : Si une page d’accueil a été définie
adresse (jaidebeauxyeux.com par exemple), il suffit dans votre site dynamique, l’adresse de lancement
de : de cette page d’accueil est la suivante :
1. Créer une page d’accueil de type "index.html". http://<AdresseServeur>/<NomSite
>_WEB/
220 Partie 7 : Déployer un site Web

A quoi sert l’administrateur
Contenu
WEBDEV ?
En développement (pour le test) comme en déploiement, l’administrateur WEBDEV est
nécessaire à l’exécution des sites dynamiques WEBDEV.
Lors du développement d’un site dynamique WEBDEV, l’administrateur permet principa-

lement de :
• tester les sites dynamiques grâce à la page de test (onglet "Avancé", bouton "Page de
test").
• gérer les webservices (onglet "Webservices").
• régler les paramètres de connexion aux sites dynamiques pour vos tests : temps de
déconnexion, ... (onglet "Configuration").
• supprimer directement les connexions de test en cours (onglet "Connexions").
• changer le serveur Web utilisé pour vos tests (onglet "Avancé", option "Serveur").
• effectuer un diagnostic en cas de problème lors du lancement d’un site dynamique
WEBDEV (onglet "Avancé", bouton "Diagnostic").
• autoriser le débogage à distance (onglet "Configuration").
• ...
En déploiement, l’administrateur WEBDEV permet de :

• gérer la configuration des différents sites dynamiques installés sur le serveur :
nombre de connexions autorisées, ... (onglet "Sites").
• personnaliser les messages d’erreur des différents sites dynamiques installés sur le
serveur (onglet "Avancé").
• ...
222 Partie 8 : Hébergement de sites WEBDEV Partie 8 : Hébergement de sites WEBDEV 223
L’administrateur WEBDEV en pratique 2.2 Sites installés
L’onglet "Sites" fournit des informations concer-
2.3 Webservices installés
L’onglet "Webservices" fournit des informations
nant les sites WEBDEV dynamiques installés sur le
1 Présentation poste.
concernant les Webservices WEBDEV dynamiques
installés sur le poste.
L’onglet "Sites" liste les différents sites WEBDEV
L’administrateur WEBDEV est un module permet- Ce chapitre présente uniquement l’administrateur dynamiques installés sur le poste et gérés par l’ad- L’onglet "Webservices" liste les différents
tant de gérer les sites WEBDEV dynamiques (de WEBDEV Développement. ministrateur WEBDEV. Pour chaque site, les infor- Webservices WEBDEV dynamiques installés sur le
type Session ou AWP). Pour plus de détails sur les outils de déploiement, mations suivantes sont affichées dans un tableau : poste et gérés par l’administrateur WEBDEV. Pour
Lors du développement d’un site WEBDEV dyna- consultez leur aide. chaque Webservice, les informations suivantes
• le nom du site.
mique, l’administrateur permet principalement de : sont affichées dans un tableau :
Lancement de l’administrateur • le répertoire complet d’installation du site sur
• tester le site grâce à la page de test. • le nom du Webservice.
WEBDEV le poste.
• régler les paramètres de connexion au site pour • le répertoire complet d’installation du
Pour lancer l’administrateur WEBDEV Dévelop- • le nom du fichier "projet" correspondant.
vos tests : temps de déconnexion, ... Webservice sur le poste.
pement : • l’état du site (bloqué ou non). Il est possible de
• supprimer directement les connexions de test • le nom du fichier "projet" correspondant.
• depuis WEBDEV version Développement : sous cocher la case pour bloquer directement l’accès
en cours . le volet "Outils", dans le groupe "Utilitaires Web", au site pendant la mise à jour du site. • l’état du Webservice (bloqué ou non). Il est
• changer le serveur Web utilisé pour vos tests. cliquez sur "WDAdmin". possible de cocher la case pour bloquer direc-
• le nombre de tâches planifiées utilisées par le
• effectuer un diagnostic en cas de problème lors tement l’accès au Webservice pendant sa mise
• sélectionnez l’option "Programmes .. site.
du lancement d’un site WEBDEV. à jour.
WEBDEV 26 .. Administrateur WEBDEV" depuis L’onglet "Sites" permet aussi de :
• ... le menu "Démarrer". • le nombre de tâches planifiées utilisées par le
• Supprimer le site sélectionné dans le tableau. Webservice.
En déploiement, deux types d’administrateur L’administrateur WEBDEV est lancé automatique- Il s’agit uniquement de supprimer le site de
WEBDEV existent : ment au premier test du site. l’administrateur : le site WEBDEV sera toujours L’onglet "Webservices" permet aussi de :
• l’administrateur WEBDEV Déploiement qui L’administrateur peut ensuite être laissé en tâche présent sur le disque. • Supprimer le Webservice sélectionné dans le
permet à l’hébergeur de gérer les sites WEBDEV de fond. • Rafraîchir l’affichage des sites présents dans le tableau.
dynamiques installés sur un serveur Web. Par défaut, l’administrateur WEBDEV autorise dix tableau. Il s’agit uniquement de supprimer le Webservice
• l’administrateur WEBDEV Distant qui permet au connexions simultanées à un même site WEBDEV Ce rafraîchissement permet de vérifier la pré- de l’administrateur : le Webservice WEBDEV
gestionnaire de site de gérer ses sites WEBDEV dynamique (icône GO). sence d’un site dans l’administrateur après son sera toujours présent sur le disque.
dynamiques à distance depuis n’importe quel installation. • Rafraîchir l’affichage des Webservices présents
poste. • Ajouter un site dans le tableau. dans le tableau.
• Paramétrer individuellement les sites présents Ce rafraîchissement permet de vérifier la pré-
2 Interface de l’administrateur WEBDEV sur le poste. sence d’un Webservice dans l’administrateur
Par défaut, la configuration prise en compte est après son installation.
L’administrateur WEBDEV se présente sous la • Le Tableau des connexions en cours indique celle de l’onglet "Configuration". • Ajouter un Webservice dans le tableau.
forme d’une fenêtre comportant plusieurs onglets : pour chaque connexion : Il est également possible de créer une configura- • Paramétrer individuellement les Webservices
• Onglet "Connexions". • l’identifiant de la connexion, tion spécifique pour le site sélectionné (bouton présents sur le poste.
"Paramètres"). Par défaut, la configuration prise en compte est
• Onglet "Sites" et onglet "Webservices". • le site concerné par la connexion, Cette configuration concerne le nombre de celle de l’onglet "Configuration".
• Onglet "Configuration". • l’identité du client connecté. En utilisation connexions autorisées, la durée d’inactivité Il est également possible de créer une configu-
• Onglet "Avancé". réelle, le client est identifié par son adresse IP autorisée et le blocage éventuel du site pour ration spécifique pour le Webservice sélectionné
• Onglet "Installations/Comptes". ou son adresse Internet, une mise à jour. Pour plus de détails sur ces (bouton "Paramètres").
• Onglet "Journaux". • le temps actuel de connexion, paramètres, consultez l’onglet "Configuration". Cette configuration concerne le nombre de
• le temps d’inactivité de la connexion. Pour valider immédiatement le nouveau para- connexions autorisées, la durée d’inactivité auto-
2.1 Caractéristiques des connexions en • Rafraîchissement automatique : cette option métrage, appuyez sur le bouton "Appliquer". risée et le blocage éventuel du Webservice pour
cours permet de rafraîchir automatiquement les don- Il est également possible de gérer les tâches une mise à jour. Pour plus de détails sur ces
nées affichées. planifiées associées au site sélectionné (bouton paramètres, consultez l’onglet "Configuration".
L’onglet "Connexions" fournit diverses informations "Tâches planifiées"). Ce paramétrage est dispo- Pour valider immédiatement le nouveau para-
à propos des connexions en cours. Ces informa- L’onglet "Connexions" permet également de : nible uniquement lorsque le site est déployé. métrage, appuyez sur le bouton "Appliquer".
tions peuvent être consultées à tout moment sur le
• Arrêter une connexion en cours : • Tester directement les sites installés sur le poste Il est également possible de gérer les tâches
serveur :
Sélectionnez une des connexions et cliquez sur (uniquement en version de développement) : planifiées associées au Webservice sélectionné
• Le Nombre de connexions en cours indique "Déconnecter". Sélectionnez le site puis cliquez sur "Tester". (bouton "Tâches planifiées"). Ce paramétrage est
le nombre de connexions totales aux sites disponible uniquement lorsque le Webservice
• Stopper toutes les connexions en cours et fer-
WEBDEV dynamiques gérés par l’administrateur. est déployé.
mer l’administrateur : cliquez sur "Déconnecter
Tous".
2.4 Configuration générale Ce nombre peut être modifié pour chaque site Gérer le débogage à distance • si un serveur Web (serveur HTTP) est lancé
La configuration générale correspond aux diffé- dans l’onglet "Sites". L’administrateur WEBDEV permet d’autoriser ou • si le gestionnaire de protocole AWP est correcte-
rentes options de connexion par défaut pour les • Durée des contextes AWP : non le débogage à distance des sites WEBDEV ment configuré
sites WEBDEV présents sur le serveur et gérés par Durée de validité des contextes AWP. Dès que dynamiques. • si les exécutables WEBDEV nécessaires sont
l’administrateur. la durée indiquée est écoulée et si aucune présents.
nouvelle requête n’a été effectuée, le fichier Si le débogage à distance est autorisé, les para-
L’onglet "Configuration" permet de : mètres suivants doivent être spécifiés : Si une de ces conditions n’est pas remplie, les sites
des contextes est supprimé. WEBDEV dynamiques ne pourront pas fonctionner.
• Paramétrer les connexions. • Port principal (27 271 par défaut).
• Durée des contextes Webservices : Pour plus de détails, consultez l’aide en ligne.
• Paramétrer les sessions et les requêtes. • Plage des ports des sessions (entre 27 282 et
Durée de validité des contextes correspon-
• Gérer le fichier journal pour obtenir les statis- dants aux Webservices. 27 289 par défaut). Nom ou adresse IP du poste en cours
tiques de fréquentation. Le bouton "Par défaut" permet de rétablir les va- L’administrateur WEBDEV permet de spécifier un
• Durée maximum d’une requête :
• Gérer le débogage à distance. Temps maximum d’attente autorisé entre le leurs par défaut. nom ou une adresse IP pour désigner un poste
Le paramétrage des connexions est réalisé par déclenchement d’une action par l’internaute spécifique. Il est également possible de spécifier le
les options suivantes : (par un bouton ou un lien) et l’affichage de la 2.5 Options avancées numéro de port. Par exemple : localhost:8080.
• Nombre maximum de connexions sur le réponse. Si ce temps est dépassé, une page L’onglet "Avancé" permet de : Ce poste sera utilisé :
serveur : d’erreur est affichée, mais l’internaute n’est • Choisir un des serveurs Web installés sur le • lors de l’utilisation du bouton "Diagnostic".
Nombre maximum de connexions simulta- pas déconnecté. poste en cours pour exécuter les sites WEBDEV. • lors de l’utilisation du bouton "Page de test".
nées autorisées pour l’ensemble des sites • Durée maximum d’une tâche : • Effectuer un diagnostic de configuration du • lors du test d’un site, d’une page, d’un état, ...
gérés par l’administrateur (une connexion = Permet de limiter la durée d’exécution d’une poste en cours. depuis l’éditeur WEBDEV (icône "GO").
un internaute). tâche planifiée ou d’une tâche différée
• Spécifier le nom ou l’adresse IP du poste en Test
• Nombre maximum de connexions sur un WEBDEV. Si la tâche dépasse cette durée, elle
cours. Le bouton "Page de test" permet d’afficher sous le
site : sera automatiquement arrêtée.
Nombre maximum de connexions simulta- • Afficher sous le navigateur une page permettant navigateur une page permettant de lancer chacun
• Autoriser les sessions prélancées : des sites WEBDEV dynamiques et des Webservices
nées autorisées pour chaque site géré par de lancer tous les sites WEBDEV installés sur le
Permet de gérer les sessions prélancées sur poste en cours. WEBDEV dynamiques installés sur ce poste.
l’administrateur. Ce nombre peut être modifié le serveur d’application WEBDEV. Cette option
pour chaque site dans l’onglet "Sites". permet d’optimiser le temps de connexion • Gérer la recherche des pages périmées. Pour plus de détails sur les tests d’un site WEBDEV,
• Nombre maximum de connexions d’un utili- aux sites et Webservices WEBDEV présents • Gérer les impressions. consultez le chapitre "Test d’un site en pratique",
sateur sur un site : sur le serveur. Pour plus de détails, consultez page 198.
• Gérer les messages d’erreur.
Nombre maximum de connexions simulta- l’aide en ligne. Recherche des pages périmées
• Gérer les emails en mode asynchrone.
nées autorisées pour un même internaute sur L’administrateur WEBDEV permet de générer un Cette option permet d’activer et de paramétrer la re-
• Gérer les sockets serveur.
chaque site géré par l’administrateur. fichier journal spécifique permettant de suivre les cherche des pages périmées sur les sites WEBDEV
Si ce paramètre est égal à zéro, l’internaute • Autoriser ou non certaines fonctions spécifiques. gérés par le serveur d’application WEBDEV.
statistiques de fréquentation.
essayant de se connecter simultanément à • Interdire le changement d’IP en cours de navi- Imprimante utilisée par défaut (site intranet uni-
• Générer un fichier journal pour les statistiques
un même site, sera automatiquement décon- gation. quement)
de fréquentation (.log) :
necté puis reconnecté. • Interdire l’accès aux identifiants de contexte
Permet de générer un fichier journal (exten- Le bouton "Impressions" permet de sélectionner
Si ce paramètre est supérieur à zéro, un mes- AWP depuis Javascript.
sion ".LOG") pour visualiser les statistiques l’imprimante utilisée par défaut lors d’une impres-
sage d’erreur apparaîtra automatiquement au Serveur utilisé
de fréquentation des sites WEBDEV à l’aide sion directe sur une imprimante locale ou réseau
bout des x connexions simultanées.
de WDStatistiques. Pour plus de détails Le bouton "Serveur" permet de choisir un des ser- du serveur Web.
Ce nombre peut être modifié pour chaque site
sur WDStatistiques, consultez l’aide de veurs WEB installés sur le poste en cours pour exé- Messages d’erreur
(onglet "Sites").
WDStatistiques. cuter les sites WEBDEV. Attention : Ce serveur sera Le bouton "Erreurs" affiche les différentes erreurs
L’option "Une seule connexion recyclée auto-
• Enregistrer dans le fichier global et dans le utilisé pour tous les sites dynamiques WEBDEV ins- pouvant être affichées dans le navigateur de l’inter-
matiquement" permet de limiter la connexion
fichier de chaque application : tallés sur ce poste. naute. Il est possible de personnaliser le message
d’un utilisateur à une connexion. La même
connexion sera réutilisée. Cette option permet d’enregistrer les statis- Si le serveur utilisé n’est pas présent dans cette d’erreur ou encore la page HTML où l’erreur est
tiques à la fois dans le fichier journal de l’appli- liste, choisissez "Autre". Il faudra alors configurer affichée.
Le paramétrage des sessions et des requêtes
cation et dans le fichier journal du serveur. En manuellement le serveur Web utilisé. Pour plus de Spooler de mails
est réalisé par les options suivantes :
effet, si le fichier journal est défini à la fois au détails sur la configuration de serveurs spécifiques,
• Déconnecter les utilisateurs inactifs depuis : niveau du serveur et au niveau des applications Si l’option "Désactiver le spooler de mail" est déco-
consultez l’aide en ligne.
Il s’agit du temps maximum de connexions (onglet "Sites"), des informations peuvent être chée, vos sites pourront envoyer des emails sans
Diagnostic bloquer l’exécution des différents traitements
autorisées sans action de la part de l’inter- "perdues".
naute. Si ce temps est dépassé, l’internaute Le bouton "Diagnostic" permet d’effectuer une véri- (mode asynchrone).
Remarque : Si le fichier journal est activé, il est fication de la configuration du poste en cours. Ce
est automatiquement déconnecté et un mes- Il est également nécessaire d’activer le mode
possible de visualiser le journal des erreurs dans diagnostic permet de vérifier :
sage d’erreur est affiché. asynchrone à l’ouverture de la session d’emails (à
l’onglet "Journaux" de l’administrateur.
• si le protocole TCP/IP est installé l’aide de la fonction EmailOuvreSessionSMTP ou
EmailOuvreSession). Gérer les fonctions fCopieFichierRépertoireWeb et
Configuration du serveur
Contenu
Si le mode asynchrone est activé, tous les emails à fSupprimeFichierRépertoireWeb
envoyer seront transmis à un "Spooler". Les emails L’option "Autoriser les fonctions fCopieFichierRé-
sont ainsi mis en file d’attente avant d’être envoyés. pertoireWeb et fSupprimeFichierRépertoireWeb."
L’exécution des fonctions Email n’est alors plus blo- doit être cochée si ces fonctions sont utilisées dans Pour un site dynamique WEBDEV
quante pour le reste du programme. La fonction le site Web.
EmailEtat permet de connaître l’état d’un email. Ces fonctions permettent notamment de mettre
Remarque : Si l’administrateur WEBDEV est fermé, dans le répertoire des images du site des images
le spooler d’emails est vidé : les emails en attente présentes dans le répertoire des données (cas par
ne sont pas envoyés et sont enlevés du spooler. exemple d’images uploadées puis mises à disposi-
Si vous cochez l’option "Désactiver le spooler de
mail" alors que des emails sont en attente, ces
tion pour les internautes utilisant le site).
Attention : La copie est prise en charge par
Poste de Poste
emails ne seront pas perdus : l’administrateur l’administrateur de WEBDEV sur le serveur l’internaute Connexion au site WEBDEV
Serveur
continue de les envoyer, mais aucun nouveau mail (WD260ADMIN.EXE). Le compte Windows qui l’exé-
Seul un navigateur est Serveur Web
ne sera accepté par le spooler. cute doit disposer de droits suffisants sur l’empla- nécessaire (IIS, Apache, ...)
Attention : Le mode asynchrone est utili- cement cible de la copie.
sable uniquement lors de l’ouverture d’une
session sur un serveur SMTP (fonction 2.6 Installations/Comptes
Moteur WEBDEV
EmailOuvreSessionSMTP pour l’envoi d’emails ou L’onglet "Installations/Comptes" permet de :
fonction EmailOuvreSession). Ce mode est ignoré • Configurer le serveur pour les installations et les
dans tous les autres cas. mises à jour de site.
Site WEBDEV
Sockets • Gérer le journal des installations.
Si l’option "Autoriser les sockets serveur" est • Gérer les comptes WEBDEV.
cochée, vos sites pourront manipuler les sockets Installation / Mise à jour Base de données
du serveur (à l’aide des fonctions Socketxxx du Ces options sont accessibles en version déploie-
WLangage). ment. Elles permettent à l’hébergeur de permettre
Interdire le changement d’IP en cours de naviga- et de paramétrer les installations et mises à jour de
tion sites à distance.
Si cette option est cochée, l’adresse IP associée à L’option "Bloquer le serveur (pour une mise à Pour un site statique :
la session ne peut pas changer en cours de naviga- jour)" permet de simplifier la mise à jour d’un site,
tion. Il est ainsi possible d’empêcher les attaques en interdisant toute connexion d’un nouvel utilisa-
du type "vol de session" (attaque consistant à se teur. A chaque essai d’une nouvelle connexion à un
faire passer pour un utilisateur légitime connecté des sites présents sur le serveur, l’internaute reçoit
au serveur). un message l’informant de l’indisponibilité momen-
tanée du site et lui demandant de réessayer plus
Interdire l’accès aux identifiants de contexte AWP
depuis JavaScript
tard. Les utilisateurs déjà connectés peuvent conti-
nuer d’utiliser le site WEBDEV en cours. Poste de Poste
Dans un site AWP, le contexte du site est stocké sur
2.7 Journaux
l’internaute Serveur
le serveur. L’identifiant de ce contexte est transmis
et mémorisé dans le navigateur par l’intermédiaire L’onglet “Journaux” permet de visualiser le détail
Connexion au site WEBDEV
d’un cookie. des journaux sur une période donnée.
Seul un navigateur est Serveur Web
Si l’option "Interdire l’accès aux identifiants de Attention : Pour utiliser cette fonctionnalité, les (IIS, Apache, ...)
nécessaire
contexte AWP depuis JavaScript" est cochée, les journaux doivent avoir été activés pour le site. Les
cookies utilisés seront de type "HTTPOnly", type journaux peuvent être activés :
ne pouvant pas être lu depuis du code Javascript. • dans l’onglet “Configuration” pour gérer un jour- Site WEBDEV
Ce mode protège contre les attaques de type XSS nal général,
(Cross-Site scripting).
• dans l’onglet “Sites” (bouton “Paramètres”)
Par défaut, l’accès aux identifiants de contexte et dans l’onglet “Webservices” (bouton
AWP depuis Javascript est interdit. “Paramètres”) pour gérer un journal spécifique.
L’activation du journal des statistiques entraîne au-
tomatiquement la création du journal des erreurs.
Serveur dédié ou
Contenu • serveur dédié : le serveur est réservé au client. L’hébergeur fournit uniquement l’ac-
mutualisé ? cès à Internet (adresse IP, câble, ...).

La machine est soit louée par l’hébergeur, soit fournie par le client.
Les hébergeurs proposent deux types de serveurs pour installer vos sites WEBDEV :
Serveur Web
• serveur mutualisé :
serveur dont les ressources sont partagées par différents clients (client = société fai-
sant héberger son site chez un hébergeur).
Poste dédié au client
- Serveur Web et si nécessaire serveur FTP
- Serveur d’application WEBDEV
Serveur Web - Système d’exploitation

- Sites WEBDEV
Partie commune
- Serveur d’application WEBDEV Caractéristiques :
- Système d’exploitation L’hébergeur fournit uniquement l’accès à Internet (adresse IP, câble, ...).
- Base de registres Le client doit :
- Serveur Web • fournir éventuellement le poste serveur (location possible),
- Serveur FTP (si nécessaire)
• configurer le poste (système, ...),
Espace disque Espace disque • installer le serveur Web,
Client 1 Client 3 • installer et configurer les sites WEBDEV (par HTTP, FTP ou par DVD-ROM).
Espace disque Espace disque

Client 2 Client 4
Caractéristiques :
L’hébergeur fournit un poste serveur à différents clients.
L’hébergeur :
• configure le serveur FTP (nécessaire uniquement pour les déploiements effectués
par FTP).
• détermine le nombre maximum de connexions sur l’ensemble des sites dyna-
miques d’un même client (à l’aide du gestionnaire de comptes WEBDEV).
L’installation et les mises à jour d’un site dynamique ou statique peuvent être réali-
sées par FTP.
Quel type de serveur
Contenu
Centre de contrôle
Contenu
choisir ? d’hébergement
Le tableau ci-dessous présente les avantages et inconvénients des différents types de Destiné principalement aux hébergeurs et aux Webmasters, le Centre de Contrôle d’hé-
serveurs. bergement permet d’aider à héberger plus facilement les sites WEBDEV.
Quel que soit le type de serveur choisi, il est nécessaire de posséder une licence de
déploiement pour chaque serveur. Le Centre de Contrôle gère bien sûr les comptes WEBDEV, mais également, le compte
Chaque serveur héberge un ou plusieurs sites dynamiques WEBDEV (en mode Session au niveau du serveur web et les droits au niveau du système d’exploitation.
ou en mode AWP).
Un choix par défaut est proposé : il permet d’installer un serveur par simple clic, sans
Serveur Avantages / inconvénients Quand utiliser compétences spécifiques.
ce serveur ?
Le paramétrage des éléments suivants est centralisé :
Mutualisé Principaux avantages : Un serveur mutualisé est
• Coût moindre conseillé pour : • Comptes Windows,
• Administration du serveur réalisée par • Groupes des utilisateurs FTP,
l’hébergeur • les sites peu visités
(jusqu’à 20 ou 30 • Groupes des clients WEBDEV,
Principaux inconvénients :
connexions simulta- • Home Directory,
• Ressources mémoire partagées entre les
nées), • Alias FTP,
sites présents sur le serveur.
• les sites nécessitant
• En cas de blocage d’un site, tous les sites • Comptes WEBDEV,
peu de mémoire (pas de
sur le serveur sont bloqués. • Répertoires des données,
calculs très importants
• Utilisation d’exécutables autonomes rare-
effectués sur le serveur), • Sites Web virtuels, ...
ment possible.
• les sites en phase de
• Accès non sécurisé aux données :
démarrage.
Des personnes non autorisées peuvent Le Centre de Contrôle d’hébergement fonctionne sous environnement Windows avec le
avoir accès aux données : l’hébergeur et serveur web IIS (Internet Information Server, toutes versions à partir de la 5).
potentiellement d’autres clients, si le ser-
veur n’est pas correctement configuré.
Conseil : cryptez les fichiers de données
pour éviter toute utilisation non autorisée.
Dédié Principaux avantages : Un serveur dédié est

• Ressources du poste serveur disponibles conseillé pour :
pour le(s) site(s) installé(s) sur ce poste. • les sites très visités,
• Gestion du rapatriement des données tota- • les sites nécessitant une
lement personnalisable : place disque et mémoire
- réplication par e-mails, importante,
- utilitaire WDREPLIC, • Les sites gérant des don-
- copie des fichiers par FTP. nées sensibles,
Principaux inconvénients : • les sites dynamiques.
• Coût important
• Administration du poste serveur entière-
ment réalisée par le client, la plupart du
temps.
Site dynamique sur des
Contenu 2. Installation sur un serveur Windows avec un accès à Internet par
configurations spécifiques UNIX
La configuration est la suivante :
1. Installation sur un serveur Web sous Windows (2000 ou supérieur) INTERNET

ou un serveur Linux
Serveur
1 Unix
La configuration est la suivante :
INTERNET Sont installés sur le serveur :

- serveur Web Unix
Serveur - les pages statiques
Windows
Sont installés sur le serveur :
- le serveur d’application WEBDEV
- le site WEBDEV (Session ou AWP)
Serveur
2
- le serveur Web sous Windows
3 Windows
Sont installés sur le serveur :
INTERNET
- le serveur Web sous Windows
Serveur 1. Ouverture d’une page statique. La page statique est présente sur le serveur UNIX.
Linux
2. Lancement du site dynamique WEBDEV (présent sur le serveur Windows) par un lien
présent dans la page HTML statique.
Sont installés sur le serveur : 3. Fonctionnement normal du site WEBDEV.
- le serveur Web sous Linux Remarque : la même configuration peut être adoptée avec un serveur Linux.
3. Installation sur un serveur Windows ou Linux avec Load Balancer
Statistiques de fréquenta-
Contenu
Le système Load Balancer permet de répartir la charge de connexion sur un site dyna-
tion des sites dynamiques
mique WEBDEV sur différents postes.
Il est souvent important de disposer de statistiques précises sur les visites des sites.
INTERNET Comment savoir qui est venu sur votre site, les pages qui ont été consultées, les applica-
tions qui ont été utilisées, de quel site vient l’internaute ?
WEBDEV est fourni avec un outil complet de statistiques pour les pages dynamiques :
WDStatistique. Cet outil peut être installé sur n’importe quel poste.
Load Quelques exemples de statistiques fournies par WDStatistique : nombre de connexions

balancer par jour, pages consultées, systèmes d’exploitation et navigateurs des internautes, ...
Exemples de statistiques de sites dynamiques :
Serveur Serveur Serveur
Serveur de
données
Solution 1 : Installation du site dynamique WEBDEV uniquement sur le serveur de données.
Cette solution consiste à installer :

• sur chaque serveur Web, le serveur d’application WEBDEV,
• sur le serveur de données, les sites dynamiques WEBDEV et les fichiers de données.
Solution 2 : Installation du site dynamique WEBDEV sur tous les serveurs Web.
Cette solution consiste à installer :
• sur chaque serveur Web, le serveur d’application WEBDEV et les sites dynamiques
WEBDEV.
• sur le serveur de données, les fichiers de données des sites dynamiques WEBDEV.
Surveillez vos sites,
Contenu PARTIE 9
serveurs, ...
Un site dépend souvent de nombreux paramètres extérieurs : site Web, Serveur HFSQL,
réseau, ... Pour optimiser la gestion des incidents, WEBDEV propose d’utiliser un robot
de surveillance.
Composé de trois exécutables lancés sur différents postes, le robot de surveillance per-
met d’exécuter différents tests : tests Internet, tests réseau, ...
En cas de problèmes lors du passage d’un test, le robot de surveillance peut vous aver-
tir de différentes façons :
• Message envoyé dans la messagerie PC SOFT (WDBAL).
• Email
Annexes
• Exécution d’un programme tiers.
De plus, une alerte sonore peut être mise en place sur le moniteur.
Configure
Poste Utilisateur : Poste 1 :
Moniteur Robot de surveillance
- Gére les tests - Exécute régulièrement les tests

- Configure les robots - Envoie un message en cas de
- Peut effectuer directement problème
les tests
Test de
Configure
surveillance
Poste 2 :
Contre Robot
- Test régulièrement le robot de surveillance

- Envoie un message en cas de problème
Types de tests disponibles
Test Internet Test de serveurs Test réseau

(test d’un site Web) HFSQL Client/Serveur (SNMP)
Test serveur Test serveur Test Application

FTP de news WEBDEV
Test personnalisé ...

(en WLangage)
238 Partie 8 : Hébergement de sites WEBDEV

Fonctions du WLangage
Contenu
spécifiques à WEBDEV 26
AJAXAnnuleAppelAsyn- Annule l’exécution automatique de la procédure naviga-
chrone teur appelée par la fonction AJAXExécuteAsynchrone.
AJAXAppelAsynchroneEn- Permet de savoir si une procédure serveur appelée par
Cours la fonction AJAXExécuteAsynchrone est en cours d’exé-
cution.
AJAXDisponible Permet de savoir si la technologie AJAX est utilisable
dans le navigateur en cours.
AJAXExécute Exécute une procédure serveur sans rafraîchir la page.
AJAXExécuteAsynchrone Exécute une procédure serveur sans rafraîchir la page.
AjouteFavori Ajoute une adresse Internet dans la liste des favoris de
l’internaute.
AnnuleContexteAWP Supprime du contexte AWP une variable ajoutée par la
fonction DéclareContexteAWP.
ASPAffiche Appelle un script ASP externe et renvoie la page résultat
dans la fenêtre en cours du navigateur.
ASPExécute Appelle un script externe .asp et renvoie le résultat dans
une chaîne.
BandeauArrêteDéfilement Arrête le défilement automatique sur un champ Ban-
deau défilant.
BandeauPrécédent Affiche le plan précédent d’un champ Bandeau défilant.
BandeauPremier Affiche le premier plan d’un champ Bandeau défilant.
BandeauSuivant Affiche le plan suivant d’un champ Bandeau défilant.
CapsLockVérifie Vérifie si la touche CapsLock est enfoncée.
CaptchaAffiche Affiche un nouveau Captcha dans un champ Captcha.
CaptchaVérifie Vérifie si la valeur saisie par l’utilisateur correspond à la
chaîne affichée dans un champ Captcha.
CelluleAfficheDialogue Affiche un champ Cellule dans la page avec un effet de
GFI (Grisage des Fenêtres Inaccessibles). Cette fonction
permet de simuler simplement une boite de dialogue en
code navigateur, en utilisant un champ Cellule dans une
page.
CelluleFermeDialogue Masque un champ Cellule précédemment affiché dans
la page via la fonction CelluleAfficheDialogue.
CertificatClientInfo Renvoie des informations sur le certificat utilisé par le
poste client.
240 Partie 9 : Annexes Partie 9 : Annexes 241

ChaîneAffiche Renvoie une chaîne spécifique (ou un buffer) sur le navi- ExécuteProcédureDifférée Exécute une procédure différée (dans le serveur d’appli-
gateur du client en réponse à la requête reçue. cation WEBDEV).
ChangeAction Permet de spécifier l’action effectuée en cas de désyn- fCopieFichierRépertoire- Copie un fichier image depuis le répertoire des données
chronisation entre la page HTML affichée dans le navi- Web de l’application (ou un de ses sous-répertoires) vers le
gateur et le contexte de page sur le serveur. répertoire "_WEB" de l’application (ou un de ses sous-
ChangeDestination Change la destination de l’action d’un bouton. répertoires).
CheminNavigationAjoute- Ajoute un lien dans un champ Chemin de navigation. FichierAffiche Affiche un fichier sur le navigateur de l’internaute.
Lien FichierVersPage Initialise automatiquement les champs d’une page
CheminNavigationInsère- Insère un lien dans un champ Chemin de navigation. avec :
Lien • les valeurs des rubriques associées dans l’enregistre-
ment en cours (chargé en mémoire) du fichier de don-
CheminNavigationModifie- Modifie un lien dans un champ Chemin de navigation.
nées décrit sous l’éditeur d’analyses. Cette opération
Lien
est effectuée quel que soit l’état des champs (grisés,
CheminNavigationSuppri- Supprime un lien dans un champ Chemin de navigation. inactifs, ou invisibles).
meLien
• les valeurs des variables WLangage associés. Cette
CheminNavigationSuppri- Supprime tous les liens dans un champ Chemin de navi- opération est effectuée quel que soit l’état des
meTout gation. champs (grisés, inactifs, ou invisibles).
ConfigureContexteAWP Configure le mode de fonctionnement du contexte AWP. FramesetAffiche Affiche un frameset WEBDEV dans le navigateur de
ConnexionOccurrence Renvoie le nombre d’instances du site WEBDEV en l’internaute.
cours d’exécution sur le serveur. FramesetUtilise Affiche un frameset WEBDEV dans le navigateur de
ContexteExiste Permet de savoir si un contexte de page existe sur le l’internaute et ferme tous les contextes de pages et de
serveur (c’est-à-dire si la page a été ouverte). framesets en cours.
ContexteFerme Ferme un contexte de page. fRepWeb Renvoie le nom physique complet du répertoire conte-
ContexteOuvre Ouvre un nouveau contexte de page sans renvoyer les nant les images, les fichiers Javascript et Java du site
informations vers le navigateur. WEBDEV.
CookieEcrit Ecrit un cookie sur le poste de l’internaute. fSupprimeFichierRéper- Supprime un fichier image du répertoire "_WEB" de
toireWeb l’application (ou de un de ses sous-répertoires).
CookieLit Récupère la valeur d’un cookie enregistré sur le poste
de l’internaute. GglAnalyticsAjouteAction- Ajoute une action de type réseau social auprès de
RéseauSocial Google Analytics.
CouleurPalette Renvoie une couleur de la palette courante.
GglAnalyticsAjouteDurée Ajoute une durée auprès de Google Analytics.
DéclareContexteAWP Permet de déclarer une liste de variables dont la valeur
sera persistante entre les affichages successifs des GglAnalyticsAjouteEvéne- Ajoute un événement auprès de Google Analytics
pages AWP. ment
DynamicServingConfigure Indique l’environnement à utiliser par le "Dynamic Ser- GglAnalyticsAjouteExcep- Ajoute une exception auprès de Google Analytics.
ving" pour choisir le jeu de pages à afficher. tion
EmailEtat Renvoie l’état d’un email envoyé par une session SMTP GglAnalyticsAjoutePage Ajoute une page auprès de Google Analytics.
ouverte en mode asynchrone. gpwOuvreConfiguration Ouvre la fenêtre ou la page de configuration du
EmailOuvreMessagerie Ouvre le logiciel de messagerie par défaut : groupware utilisateur.
• de l’internaute sur le poste navigateur. grTailleImage Définit la taille de l’image contenant le graphe.
• de l’utilisateur sur le poste Windows en cours. HTMLClasseAjoute Ajoute une classe dans les classes HTML d’un champ.
• sur le téléphone.

HTMLClasseBascule Bascule une classe dans les classes HTML d’un champ : JSInfoEvénement Permet de manipuler les propriétés JavaScript de l’évé-
si la classe n’existe pas, elle est ajoutée, si la classe nement navigateur qui a déclenché l’exécution du code.
existe déjà, elle est supprimée. JSInterruptionEvénement Interrompt le traitement de l’événement en cours.
HTMLClasseSupprime Supprime une classe des classes HTML d’un champ. JSMéthode Permet d’exécuter une méthode Javascript sur un élé-
IdentifiantContexteAWP Renvoie l’identifiant du contexte AWP. ment de la page en cours.
ImageArrêteDéfilement Arrête le défilement automatique des images. JSONExécute Appelle une URL serveur qui retourne des données au
ImageDernier Affiche la dernière image du défilement. format JSON (JavaScript Object Notation).
ImageLanceDéfilement Lance le défilement automatique des images. JSONExécuteExterne Appelle une URL serveur externe qui retourne des don-
nées au format JSON (JavaScript Object Notation).
ImageOccurrence Renvoie le nombre total d’images prises en compte par
le défilement. JSPropriété Permet de manipuler des fonctionnalités spécifiques sur
des objets de la page en cours.
ImagePositionDéfilement Retourne l’image affichée.
LibèreContexteAWP Libère de manière anticipée le contexte AWP (sur
ImagePosX Renvoie la position horizontale (X) du curseur de souris
disque) pour permettre à d’autres appels sur le même
par rapport au champ Image considéré.
contexte AWP d’être traités en parallèle.
ImagePosY Renvoie la position verticale (Y) du curseur de souris par
MenuAjouteOptionURL Ajoute une nouvelle option de menu à la fin d’un menu
rapport au champ Image cliquable considéré.
d’une page. Cette option de menu permet d’afficher la
ImagePrécédent Affiche l’image précédente du défilement. page correspondant à l’URL indiquée.
ImagePremier Affiche la première image du défilement. MenuAjoutePopup Transforme une option de menu d’une page pour que
ImageSuivant Affiche l’image suivante du défilement. cette option ouvre une popup.
ImageZone Renvoie le numéro de la zone de l’image cliquée par NavigateurAdresseIP Renvoie l’adresse IP du poste de l’Internaute connecté
l’internaute. au site WEBDEV.
iRepImageHTML Permet de sélectionner le répertoire dans lequel les NavigateurEstConnecté Indique si le navigateur est connecté au réseau.
images doivent être générées lors d’une impression au NavigateurFerme Ferme la fenêtre en cours du navigateur et stoppe l’exé-
format HTML. cution du code en cours.
JaugeActive Active le rafraîchissement d’une jauge via Ajax. NavigateurHauteur Renvoie la hauteur en pixels de la zone cliente dans
JaugeDésactive Stoppe le rafraîchissement périodique d’une jauge via laquelle la page est affichée.
Ajax. NavigateurHistoriqueAjoute Ajoute une entrée dans l’historique de navigation en lui
JaugeExécute Lance un traitement navigateur relativement long et fait associant des données. Ces données seront transmises
avancer une jauge via Ajax selon l’avancement de ce lors du retour sur cette entrée.
traitement. NavigateurHistoriqueMo- Modifie les données de l’entrée courante dans l’histo-
jQuery Exécute une méthode Javascript (ou plusieurs méthodes difie rique de navigation. Ces données seront transmises lors
chaînées) de la librairie jQuery sur un élément de la d’un retour sur l’entrée courante.
page. NavigateurImprime Imprime la page courante actuellement affichée dans le
jQueryExécute Exécute une méthode Javascript de la librairie jQuery navigateur.
sur un élément de la page. NavigateurLanceAppli Ouvre le navigateur Web par défaut de l’appareil en
JSEvénement Associe une procédure navigateur à un événement sur cours.
un objet en code navigateur. NavigateurLargeur Renvoie la largeur en pixels de la zone cliente dans
JSFinEvénement Supprime l’association d’une fonction WLangage navi- laquelle la page est affichée.
gateur à événement (mis en place grâce à la fonction NavigateurMobile Permet de savoir si le navigateur utilisé par l’internaute
JSEvénement). est lancé sur un mobile.

NavigateurNom Renvoie le nom du navigateur de l’internaute ("user PageFermeDialogue Ferme la page courante. Cette page a été ouverte avec
agent"). la fonction PageAfficheDialogue. Une valeur de retour
NavigateurOS Indique le système d’exploitation annoncé par le naviga- peut être renvoyée à la page appelante.
teur de l’internaute. PageInitialisation Remet à zéro (ou non) les champs de la page en cours
NavigateurOuvre Ouvre une nouvelle fenêtre du navigateur. et lance les événements d’initialisation des champs et
de la page.
NavigateurPlateforme Retourne la plateforme du navigateur utilisée par l’inter-
naute. PageLitEntêteHTTP Lit et renvoie un ou plusieurs entêtes HTTP reçus par la
page en cours (ces entêtes sont envoyés par le client au
NavigateurTranche Renvoie le numéro de la tranche affichée dans une
serveur dans la requête courante).
page en mode Responsive Web Design.
PageParamètre Renvoie la valeur d’un paramètre passé à la page en
NavigateurType Retourne le type du navigateur utilisé par l’internaute.
cours.
PageActiveGFI Active ou désactive le GFI (Grisage des pages inac-
PagePosition Fait défiler une page pour positionner un champ dans
cessibles) lors de l’affichage d’une page modale (par
la partie visible de la page (le plus haut) dans le naviga-
exemple les pages permettant de dialoguer avec l’utili-
teur.
sateur).
PagePrécédente Renvoie le nom de la page précédente.
PageActualise Actualise une page affichée dans le navigateur de l’in-
ternaute à partir du contexte présent sur le serveur. PageTauxGFI Permet de connaître et de modifier le taux de grisage
des pages utilisant le GFI (Grisage des pages inacces-
PageAdresse Permet d’obtenir l’adresse Internet d’une page.
sibles).
PageAffiche Affiche une page du site dans le navigateur de l’inter-
PageUtilise Affiche une page WEBDEV dans le navigateur de l’inter-
naute.
naute et ferme tous les contextes de pages en cours.
PageAfficheDialogue Affiche une page de manière modale. Cette fonction
PageValide Valide la page spécifiée et lance l’exécution d’un bou-
permet de créer un dialogue avec l’utilisateur. La page
ton.
est affichée devant et en arrière plan se trouve la page
ouvrante, grisée par le mécanisme de GFI. PageVersASP Envoie les données d’une page actuellement affichée
sous le navigateur vers un serveur ASP.
PageAgencementEnCours Renvoie l’indice de l’agencement en cours :
PageVersEmail Envoie les données d’une page actuellement affichée
• dans la page en cours.
sous le navigateur par un email.
• dans la page spécifiée.
PageVersFichier Initialise automatiquement :
PageChangeAgencement Applique un agencement spécifique sur une page.
• la valeur mémoire des rubriques d’un fichier de
PageCourante Renvoie le nom de la page contenant le code WLangage données avec la valeur des champs de la page. Les
en cours d’exécution. rubriques du fichier de données de base reliées aux
PageEcritEntêteHTTP Ajoute un entête HTTP supplémentaire qui sera retourné champs de la fenêtre sont automatiquement affectées
au navigateur : avec les valeurs des champs correspondants (même
• lors de la prochaine fonction d’affichage de la si ces champs sont grisés, inactifs, ou invisibles).
page (PageAffiche, PageActualise, ...), • la valeur des variables WLangage avec la valeur des
• lors du renvoi automatique de la page courante à la champs de la fenêtre. Les variables WLangage reliées
fin de l’action en cours. aux champs de la page sont automatiquement affec-
tées avec les valeurs des champs correspondants
PageExiste Vérifie si la page spécifiée est actuellement affichée
(même si ces champs sont grisés, inactifs, ou invi-
dans le navigateur de l’internaute.Permet de savoir par
sibles).
exemple si une page est affichée dans un cadre diffé-
rent de celui en cours. PageVersJSP Envoie les données d’une page actuellement affichée
sous le navigateur vers un serveur JSP.

PageVersPHP Envoie les données d’une page actuellement affichée SaaSLitParamètreSite Lit une information spécifique au client pour le site
sous le navigateur vers un serveur PHP. SaaS en cours.
PageVersSource Initialise automatiquement : SaaSUtilisateurConnecté Renvoie l’utilisateur actuellement connecté via la fonc-
• la valeur mémoire des rubriques d’un fichier de don- tion SaaSConnecte.
nées avec la valeur des champs de la page. SaaSVérifieService Vérifie les droits d’accès de l’utilisateur à un service du
• la valeur des variables WLangage avec la valeur des site SaaS.
champs de la page. ScriptAffiche Appelle un script ou une page externe (par exemple
PageVisible Indique si la page est visible pour l’utilisateur. .php, .asp, .mhtml ou .mht) et renvoie la page résultat
PHPAffiche Appelle un script PHP externe et renvoie la page résultat dans la fenêtre en cours du navigateur.
dans la fenêtre en cours du navigateur. ScriptExécute Appelle un script externe (par exemple .php ou .asp) et
PHPExécute Appelle un script externe .php et renvoie le résultat dans renvoie le résultat dans une chaîne.
une chaîne. ServeurAppliAjouteTâche- Ajoute une nouvelle tâche planifiée à l’application (site
PleinEcranActive Passe le navigateur en mode "Plein écran". Le naviga- Planifiée ou webservice).
teur occupe ainsi tout l’espace de l’écran. ServeurAppliExécuteTâche- Lance immédiatement l’exécution d’une tâche planifiée
PleinEcranDésactive Désactive le mode "Plein écran" du navigateur. Planifiée sur un Serveur d’Application WEBDEV.
PopupAffiche Affiche une popup dans la page avec un effet de GFI ServeurAppliInfoTâchePla- Lit la description d’une tâche planifiée.
(Grisage des Fenêtres Inaccessibles). nifiée
PopupFerme Masque une popup affichée dans la page via la fonction ServeurAppliListeTâchePla- Renvoie la liste des tâches planifiées de l’application
PopupAffiche. nifiée (site ou Webservice).
RépertoireDonnées La fonction RépertoireDonnées est conservée unique- ServeurAppliModifieTâche- Modifie une tâche planifiée existante.
ment pour compatibilité. Planifiée
RépertoireWeb Renvoie le chemin du répertoire contenant : ServeurAppliSupprimeTâ- Supprime une tâche planifiée associée à l’application
chePlanifiée (site ou Webservice).
• les images,
• les fichiers Javascript, SiteAdresse Renvoie l’adresse internet de connexion à un site dyna-
mique WEBDEV (en mode Session) situé sur le même
• les fichiers applet Java,
serveur.
• les autres fichiers accessibles depuis le navigateur.
SiteDynamiqueAffiche Lance un site dynamique WEBDEV à partir d’une page
rssAffiche Construit un flux RSS et renvoie le contenu du flux RSS statique ou dynamique WEBDEV.
au client.
SourceVersPage Initialise automatiquement les champs d’une page
SaaSConnecte Authentifie un utilisateur d’un site SaaS auprès du web- avec :
service SaaS gestionnaire du site.
• les valeurs des rubriques associées dans l’enregistre-
SaaSConnexionClient Renvoie les caractéristiques de la connexion à la base ment en cours (chargé en mémoire) du fichier de don-
de données du client. nées HFSQL décrit sous l’éditeur d’analyses.
SaaSDéconnecte Déconnecte l’utilisateur d’un site SaaS auprès du web- • les valeurs des variables WLangage associées.
service SaaS gestionnaire du site. SSLActive Permet d’activer ou de désactiver le mode sécurisé SSL.
SaaSEcritParamètreSite Enregistre une information spécifique pour un site SaaS StockageLocalAjoute Ajoute une valeur au stockage local.
dans la configuration d’un compte client.
StockageLocalDisponible Indique si le stockage local est disponible ou non pour
SaaSEstConnecté Détermine si la connexion au webservice SaaS est tou- le navigateur en cours.
jours en cours.
StockageLocalNomValeur Renvoie le nom d’une valeur du stockage local.

Exemples et composants
Contenu
livrés avec WEBDEV
StockageLocalOccurrence Renvoie le nombre de valeurs du stockage local.
StockageLocalRécupère Récupère une valeur du stockage local.
StockageLocalSupprime Supprime une valeur du stockage local.
StockageLocalSupprime- Supprime toutes les valeurs du stockage local. Les exemples et composants livrés avec WEBDEV présentent de manière didactique les
Tout différentes fonctionnalités de WEBDEV.
Leur code source est commenté et détaillé.
SysVersion Renvoie des renseignements sur la version de PHP utili-
sée sur le poste serveur en cours. Différents types d’exemples sont livrés avec WEBDEV :
ToastAffichePopup Affiche une page de type popup pendant une durée don- • exemples complets : ces exemples correspondent à des sites complets, qui peuvent
née pour afficher un message de type "Toast". être utilisés sans adaptation.
UploadCopieFichier Enregistre sur le serveur un fichier "uploadé" par l’inter- • exemples didactiques : ces exemples illustrent une fonctionnalité spécifique.
naute. Cet upload a pu être effectué : • exemples unitaires : ces exemples sont constitués d’une page qui peut facilement
• via un champ de saisie de type "Upload". être testée dans le projet en cours. Cette page permet illustre l’utilisation d’une fonc-
• via un champ Upload mono ou multi-fichiers. tion, d’une famille de fonctions, d’un champ, ...
UploadFichierEnCours Indique le fichier en cours d’upload via le champ • composants : ces exemples sont constitués d’un composant interne, d’un composant
Upload. externe et d’un exemple d’utilisation.
UploadLance Lance l’envoi des fichiers sélectionnés dans un champ Ces exemples et composants peuvent être ouverts directement depuis la fenêtre d’ac-
Upload. cueil de WEBDEV.
UploadNomFichier Renvoie le nom d’un fichier "uploadé" par l’internaute. • Si l’exemple n’est pas installé sur le poste, l’exemple est automatiquement télé-
Cet upload a pu être effectué : chargé (depuis un serveur PC SOFT) et ouvert.
• via un champ de saisie de type "Upload". • Si l’exemple est installé sur le poste, une copie est automatiquement réalisée dans le
• via un champ Upload mono ou multi-fichiers. répertoire "Mes sites\Mes exemples".
UploadSupprime Supprime un fichier de la liste des fichiers à uploader : L’exemple ouvert correspond à la copie de l’exemple original. Il est ainsi possible de
le fichier ne sera pas uploadé sur le serveur. 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"),
UploadSupprimeTout Vide la liste des fichiers à uploader : aucun fichier ne il est possible de travailler sur l’exemple modifié ou de reprendre l’exemple original.
sera uploadé sur le serveur.
UploadTaille Renvoie la taille totale (en octets) des fichiers de Des exemples supplémentaires sont livrés avec la Lettre du Support Technique (LST) ou
l’upload en cours via un champ Upload. sont disponibles sur notre site (www.pcsoft.fr).
UploadTailleEnvoyée Renvoie la taille totale (en octets) des fichiers déjà en-
voyés par l’upload en cours via un champ Upload. Exemples complets
UploadTailleEnvoyéeFichie- Renvoie la taille (en octets) déjà envoyée du fichier en
rEnCours cours d’upload via un champ Upload. eCommerce Site complet de eCommerce personnalisable via une
interface d’administration Web.
UploadTailleFichier Renvoie la taille totale (en octets) d’un fichier présent
• La partie vitrine / paiement du site est réalisée en
dans un champ Upload.
AWP afin de permettre un référencement optimal
UploadTailleFichierEnCours Renvoie la taille totale (en octets) du fichier en cours des produits.
d’upload via un champ Upload. • La partie administration du site est réalisée en
session classique WEBDEV pour garantir une
sécurité optimale.
Galerie_Photos Cet exemple est un site de galerie photos.
Honolulu Portail intranet gratuit : messagerie, forum, blogs, …

WAnnonces Gestion de petites annonces. WW_Forum_AWP Cet exemple propose les fonctionnalités principales
Recherches multicritères, ajout, modification et sup- d’un forum utilisateur (création de forums, de sujets
pression d’annonces, ainsi qu’une gestion d’utilisa- et de messages, modération par un administrateur,
teurs. ...).
webmillion Utilise un fichier de données de plus d’1 million d’en- WW_Forum_PHP Cet exemple propose les fonctionnalités principales
registrements. d’un forum utilisateur (création de forums, de sujets
WW_Association_AWP Site associatif composé de 2 parties principales : et de messages, modération par un administrateur,
• la partie "visiteur", réalisée en mode AWP donc ...).
référençable. WW_MotorEquipment Cet exemple est un exemple de boutique en ligne.
• la partie "espace membre" réalisée en mode Il contient la partie "front-office" (présentation de pro-
WEBDEV classique donc sécurisée. duits), la partie panier, paiement sécurisé.
Ce site permet de présenter les actualités, les gale- WW_Newsletter Permet de créer un site de gestion de newsletters. Il
ries photos, la présentation de l’association, ... permet de créer, rédiger et gérer l’envoi en masse de
WW_Association_PHP Site associatif en WEBDEV PHP composé de 2 parties newsletters à des abonnés.
principales : WW_PlanningActivites_Club Cet exemple présente un site pour une structure pro-
• la partie visiteur, accessible par tous. posant des activités selon un planning précis ; par
• et la partie administration, réservée aux membres exemple pour un club de sport.
de l’association.
WW_Precilia_Sport Cet exemple est un site Web avec une partie bou-
Ce site permet de présenter les actualités, les gale-
tique.
ries photos, la présentation de l’association, ...
Le site prend la largeur complète du navigateur avec
WW_Blog_AWP Cet exemple est un site de gestion de blogs, basé sur une image de fond.
une génération AWP, ce qui permet entre autres de
WW_Precilia_Winter Cet exemple est un site de vente en ligne de matériel
pouvoir référencer le site dans tous les moteurs de
de ski.
recherche. De plus, chaque blog peut être exporté en
RSS. WW_PreciliaTShirts Cet exemple est un site de vente en ligne de TShirts.
Ce site propose une page d’accueil (avec l’ensemble
WW_Blogs_php Cet exemple est un site PHP de gestion de blogs.
des produits), une page de description de produit
WW_CMS Cet exemple est un CMS (Content Management Sys- (avec ajout au panier) ainsi que plusieurs pages an-
tem) ou site de gestion de contenu, typiquement un nexes (faq, formulaire de contact, cgv, etc).
site d’affichage d’articles.
WW_Presentation_Applica- Site Web responsive qui présente une application
WW_Emprunt Cet exemple permet de simuler des emprunts et tion_Mobile Mobile, composé d’une page statique totalement res-
notamment de calculer : ponsive.
• le montant des mensualités à partir du montant
WW_Rewali Achat de voyages en ligne.
emprunté donné.
• le montant empruntable à partir d’une mensualité WW_Statique_Artisanat Cet exemple est un site statique de présentation d’un
donnée. atelier de production ou d’une entreprise dans le
• le rapport d’un placement à partir d’un apport domaine de l’artisanat.
mensuel. WW_Statique_Restaurant Cet exemple est un site statique de présentation de
Le tableau d’amortissement est affiché pour chacun restaurant, un site "vitrine".
des cas.
WW_Statique_Societe Cet exemple est un site statique de présentation de
WW_FAQ Cet exemple Responsive Web Design propose les société, un site "vitrine".
principales fonctionnalités d’un site de FAQ (foire aux
questions).

WW_TamesShop Cet exemple fournit une boutique en ligne complète WW_Dessin_HTML5 Cet exemple utilise les fonctions de dessin en code
et immédiatement opérationnelle. navigateur, pour les navigateurs supportant HTML5.
Le site prend en charge les catégories de produits, WW_Etat Cet exemple montre les différentes méthodes pour
les caractéristiques détaillées, les photos et propose réaliser un état.
plusieurs composants internes modulaires pour gérer
WW_Flux_RSS Cet exemple montre comment lire et afficher un flux
l’espace client, le panier, le paiement...
RSS dans une page WEBDEV grâce au type RSS.
WW_TicketTracker Cet exemple est un exemple de gestion de tickets
WW_Gestion_Auto_Erreurs Cet exemple montre l’utilisation de la gestion automa-
d’incidents.
tique des erreurs de WEBDEV.
Cet exemple peut être utilisé dans tous les domaines
où il est nécessaire de suivre des interventions entre WW_Graphe Cet exemple didactique présente diverses utilisations
plusieurs personnes. du champ graphe.
WW_WebDoc Cet exemple est une Gestion Electronique de Docu- WW_Mobile_Res- Page simple, responsive.
ments (GED). ponsiveWebDesign
WebDoc utilise la recherche fulltext pour effectuer WW_PayPal_PHP Cet exemple présente comment proposer dans vos
des recherches dans le contenu des documents. sites WEBDEV PHP un paiement sécurisé avec la solu-
Les documents sont classés par catégorie. tion PayPal.
Cet exemple montre également comment récupérer le
WW_Presentation_Res- Page simple, responsive, portfolio de réalisations.
contenu d’un document PDF.
ponsiveWebDesign
WW_WebImmo Site de vente et de location de biens immobiliers.
WW_Saisie_Periode Cet exemple montre l’intégration de code javascript
WWDload Ce site permet de proposer des fichiers en télécharge- dans un site WEBDEV.
ment aux utilisateurs en fonction du groupe auquel ils Cet exemple de calendrier gère la sélection de pé-
appartiennent. riode.
Parmi les fonctionnalités :
Exemples didactiques • sélection de période en 2 clics.
• possibilité de spécifier une heure de début et une
WebApp Cet exemple présente une utilisation didactique des heure de fin.
plans en WEBDEV. • lien avec un champ de saisie WEBDEV.
WW_Acces_Chorus_Pro Cet exemple montre comment accéder à l’API Chorus • modèle de champ facilement réutilisable.
Pro. WW_Signature Cet exemple présente comment dessiner en HTML5 et
WW_Administration_Res- Page simple, responsive. sauvegarder l’image dessinée en code navigateur.
ponsiveWebDesign WW_SiteClientSAAS Cet exemple montre l’utilisation des fonctions d’admi-
WW_Agencements Cet exemple est un site pouvant être visualisé sur un nistration SaaS de WEBDEV.
terminal mobile. WW_TableauDeBord Cet exemple montre l’utilisation du champ Tableau de
WW_Agenda Exemple d’utilisation du champ Agenda pour WEBDEV. bord.
WW_Assistant Cet exemple met à disposition une classe et un mo- WW_Zoom_Auto Cet exemple permet d’afficher une miniature d’une
dèle de page réutilisables, qui permettent de créer et image et grâce à un clic sur celle-ci, d’agrandir l’image
de gérer un assistant Web. sans perturber la mise en page.
WW_Blog_Res- Blog simple, responsive. WWDialogueNavigateur Cet exemple montre un dialogue entre deux naviga-
ponsiveWebDesign teurs distincts.
WW_Business_Res- Page simple, responsive.
ponsiveWebDesign

Composants
WEBDEV est livré en standard avec projets correspondants à des composants. Ces pro-
jets 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_Extraction Permet d’extraire et de stocker le contenu de divers do-

cuments (Open Office, Word 2007, ...) afin de retrouver
ceux dont on a besoin grâce à la recherche fulltext.
WW_NuageTags Permet d’afficher un nuage de tags dans une applica-
tion WEBDEV dynamique.
WW_PaiementSecurise Permet de gérer un paiement sécurisé en ligne.
Le composant gère actuellement plusieurs solutions de
paiement sécurisé : Paybox, Ogone E-Commerce, PayPal,
Cybermut, SogenActif, E-Transaction, Scellius, Mercanet,
Sherlocks, CyberP@iement, SPPlus.
WW_PayBox Permet de mettre en place un système de paiement
sécurisé en utilisant la solution de la société PayBox.
WW_PayPal Permet d’inclure dans vos 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).
256 Partie 9 : Annexes

Concepts WB 26

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Concepts WB 26

Transféré par

Droits d'auteur :

Formats disponibles

WEBDEV 26

Documentation version 26 - 1 - 1020

Nous vous souhaitons une agréable prise en main de WEBDEV.

Partie 2 : Développement d’un site

Poste serveur chez

10 Partie 1 : Internet : Concepts de base Partie 1 : Internet : Concepts de base 11

HFSQL ODBC OLE DB Connecteurs MySQL

12 Partie 1 : Internet : Concepts de base Partie 1 : Internet : Concepts de base 13

Les pages suivantes présentent ces différents types de pages.

14 Partie 1 : Internet : Concepts de base Partie 1 : Internet : Concepts de base 15

16 Partie 1 : Internet : Concepts de base Partie 1 : Internet : Concepts de base 17

• les contextes des fichiers de données, ...

page est réutilisé.

18 Partie 1 : Internet : Concepts de base Partie 1 : Internet : Concepts de base 19

Qu’est-ce qu’une page AWP ? Connexion de l’internaute à

- Création du contexte de la Page 1

Fonctionnement des sites AWP

serveur : - Création du contexte de la Page 2

• une session temporaire,

à la construction de la page visualisée par l’internaute : - Création du contexte de la Page N

20 Partie 1 : Internet : Concepts de base Partie 1 : Internet : Concepts de base 21

NomParam2=Valeur2". - Suppression de la session temporaire

- Création du contexte de la Page N

- Suppression de la session temporaire

22 Partie 1 : Internet : Concepts de base Partie 1 : Internet : Concepts de base 23

Que signifie AJAX et quel est son intérêt ?

Cette technologie a de multiples avantages : 3 Exécution de

Envoi du résultat de la requête :

24 Partie 1 : Internet : Concepts de base Partie 1 : Internet : Concepts de base 25

Le schéma suivant présente l’utilisation de "AJAX programmé" dans un site WEBDEV :

Navigateur Serveur code Javascript s’exécutant sur le navigateur.

1 2 3 Exécution de la • De nouvelles fonctions du WLangage spécifiques au Web sont disponibles.

Le serveur La machine de développement

28 Partie 1 : Internet : Concepts de base

Une Analyse WEBDEV regroupe la description des fichiers de données du site.

Un site est construit à partir d’un projet.

Classes Feuille Pages et

Classes Feuille Pages et Classes Feuille Pages et

30 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 31

32 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 33

34 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 35

Détail des différentes phases :

36 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 37

Page Page Page Page

Fichier source des pages au format WEBDEV (.WWH)

Saisie du code (étape optionnelle).

.HTM générique .AWP : Page AWP

38 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 39

Bureau Dans l’exemple, une page interne permet de gérer le panier.

42 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 43

Définition d’un modèle de pages.

Utilisation du modèle dans plusieurs pages.

44 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 45

46 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 47

5 Modèles de pages 8.1 Présentation 8.2 Fonctionnement automatique

48 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 49

50 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 51

Vous voulez... Utilisez...

Proposer un libellé avec une mise en page spéci-

52 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 53

Afficher successivement plusieurs contenus. Champ Bandeau défilant

Champ Tableau de bord

Afficher une liste d’objets sous forme de liste

Envoi du résultat de la requête :

.HTM générique .AWP : Page AWP

5 Modèles de pages 8.1 Présentation 8.2 Fonctionnement automatique

• bandeau vert = WLangage : le sigle WL précède l’intitulé du code.

Page 1 : Sélection des produits

Page 2 : Visualisation du panier

Page 3 : Saisie des coordonnées du client

Pages 2.1 Les différentes étapes Remarque : Les éléments du composant interne

6.1 Présentation 6.2 Les différents types de compatibilité