WEBDEV 27

Documentation version 27 - 1 - 1021

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’apprentissage
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étaillant certaines fonc-
tionnalité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
Visitez régulièrement le site www.pcsoft.fr, espace actualités pour vérifier si des mises à jour (e-commerce, annuaire, planning, ...).
sont propo­sé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’obtenir une aide sur
Adresse e-mail Support Technique Gratuit : [email protected] l’interface, ... Pour chaque thème de programmation, vous trouverez une description de la fonc-
tionnalité associée et la liste des fonctions du WLangage correspondantes.

Remarque : En cas de divergence entre les manuels et l’aide en ligne, suivez les instructions de
Conseil : Pour recevoir directement des mises à jour intermédiaires et des conseils d’utilisa- l’aide en ligne.
tion, abonnez-vous à la LST (revue trimestrielle + clé USB), en français.
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 2021 : Aucune reproduction intégrale ou partielle du présent ouvrage sur quelque support que ce soit ne peut être effec­
tué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 certaines Qu’est-ce qu’un site Web ?..................................................................................................11
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
Les sites multilingues........................................................................................................136 Partie 8 - Hébergement de sites WEBDEV
10 conseils d’ergonomie ..................................................................................................140 A quoi sert l’administrateur WEBDEV ?........................................................................... 223
Superposer les champs.....................................................................................................144 Configuration du serveur.................................................................................................. 229
Personnaliser l’aspect d’un site : éléments d’ambiance................................................145 Serveur dédié ou mutualisé ?.......................................................................................... 230
Choisir un type de bouton/lien.........................................................................................147 Quel type de serveur choisir ?......................................................................................... 232
Empêcher le retour sur une page.....................................................................................148 Centre de contrôle d’hébergement.................................................................................. 233
Avantage sécuritaire : la gestion du "Back".....................................................................149 Site dynamique sur des configurations spécifiques....................................................... 234
Cookies : des informations conservées chez l’internaute..............................................155 Statistiques de fréquentation des sites dynamiques......................................................237
Protéger l’accès au site : mots de passe.........................................................................156 Surveillez vos sites, serveurs, ......................................................................................... 238
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 27........................................................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 ser-
veur Web. Ces pages HTML sont organisées dans un but précis (par exemple, présenter une entre-
prise, vendre des produits, ...).

Un site est destiné à être utilisé par des internautes. Les internautes utilisent un simple naviga-
teur 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, le contenu
• des sites statiques, 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 réserva-
tions de voyages. Ces réservations sont directement enregistrées dans un fichier de données et
peuvent être affichées à tout moment.
Le tableau ci-dessous présente les principales différences entre ces types de sites :
WEBDEV propose deux types de sites dynamiques :
• site dynamique WEBDEV (en mode Session ou AWP). Ce type de site nécessite un Serveur
Site statique Site dynamique d’Application WEBDEV sur le serveur. Il permet de manipuler de nombreuses bases de don-
Le contenu des pages du site est fixe, déter- Les données affichées dans les pages va- nées.
miné une fois pour toutes. rient. En général, les pages permettent de : • site dynamique PHP. Ce type de site nécessite un moteur PHP sur le serveur. Ce type de site
Un site statique ne peut pas interagir avec - réaliser des traitements et/ou des est conseillé pour héberger des sites dynamiques chez un hébergeur grand public.
des données. calculs par programmation.
- 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’Applica- Site dynamique WEBDEV : le Serveur d’Appli-
tion WEBDEV n’est pas nécessaire. cation WEBDEV ou le langage PHP est néces-
saire.

Remarque : Un site dynamique peut contenir une partie statique (présentation de l’entreprise, ...).
WEBDEV permet de créer :
• des pages statiques,
HFSQL ODBC OLE DB Connecteurs MySQL
• des pages dynamiques. Natifs

Oracle Informix
SQL Server Progress
MySQL Sybase
DB2 Oracle Lite
XML AS/400...

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

 Les différents types de
Contenu Principe d’une page statique
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 dynami-
quement 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 globales et les variables de positionnement dans
les fichiers de données.

• Les pages dynamiques WEBDEV AWP (Active WEBDEV Page). Ces pages permettent d’afficher Création d’une page statique sous WEBDEV (fichier “.WWH”)
dynamiquement des données contenues dans une base de données. Le contenu de la page
varie en fonction de l’enregistrement affiché.
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 temporaire. Poste
Serveur
• 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.

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

Page HTML

Poste de
l’internaute

CONSULTATION
Page statique visualisée sous le navigateur

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

 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
DÉPLOIEMENT DÉVELOPPEMENT

DÉPLOIEMENT 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.

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

 Principe d’affichage d’un
Contenu
site WEBDEV dynamique Navigateur Temps Serveur d’application
WEBDEV

Session WEBDEV
La session WEBDEV
Lors de l’affichage d’une page WEBDEV en mode Session, les opérations suivantes sont effec- Connexion de l’internaute à un site
- Création automatique de la session WEBDEV
dynamique WEBDEV
tuées :
- Création automatique du contexte de la Page 1
1. Demande d’affichage de la page.
1

CONTEXTE
2. Lancement du moteur WEBDEV. Le moteur sera présent sur le serveur jusqu’à la fin de l’appli-
cation.
Affichage de la Page 1 - Renvoi de la Page 1
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 données
de la base de données par exemple).
5. Lorsque le moteur a fini de construire la page HTML, le serveur transmet le résultat au client
(le navigateur). L’internaute clique dans la Page 1
pour afficher la Page 2 - Création automatique du contexte de la Page 2

1 2

CONTEXTE

CONTEXTE
Les contextes de page
Pour chaque page affichée dans le navigateur, un contexte de page est créé automatiquement sur
le serveur. Ce contexte de page contient tous les éléments qui ont été nécessaires à la construc- Affichage de la Page 2 - Renvoi de la Page 2

tion de la page visualisée par l’internaute :

• les variables globales,
• les variables locales,
• les traitements serveur,
• les connexions aux bases de données, L’internaute clique dans la Page N-1
pour afficher la Page N - Création automatique du contexte de la Page N
• les contextes des fichiers de données, ...
1 2 N

CONTEXTE

CONTEXTE

CONTEXTE
Les contextes de page restent en mémoire sur le serveur jusqu’à la fin de la session WEBDEV.
Si la même page est appelée plusieurs fois : - Renvoi de la Page N
Affichage de la Page N
• Si la fonction PageAffiche est utilisée pour afficher la page, le contexte de page est détruit et
recréé.
• Si la fonction PageActualise est utilisée pour afficher la page, le même contexte de page est
réutilisé.

Programmation Déconnexion de l’internaute

(fermeture du Navigateur)

Par défaut, la gestion de la session WEBDEV et des contextes de page est entièrement automa-
tique. Vous n’avez rien à programmer. Au bout du Time Out (défini dans
l’Administrateur WEBDEV), la session
WEBDEV et les contextes de page
sont détruits.

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

 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 persistant
1

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

- Suppression de la session temporaire

Fonctionnement des sites AWP
Pour chaque page AWP affichée dans le navigateur, sont créés automatiquement sur le serveur :
• une session temporaire, L’internaute clique dans la Page 1
- Création de la session WEBDEV temporaire
pour afficher la Page 2
• un contexte de page AWP temporaire. - Création du contexte de la Page 2

CONTEXTE
La session temporaire contient le contexte de page AWP temporaire. Lorsque la page AWP a été
envoyée à l’internaute, le contexte de page temporaire et la session temporaire sont détruits. Il ne - Création de la page web
Affichage de la Page 2 - Renvoi de la page web à l’internaute
reste rien en mémoire sur le serveur. - Libération du contexte de la Page 2

- Suppression de la session temporaire

Le contexte de page AWP temporaire contient tous les éléments qui ont été nécessaires à la
construction de la page visualisée par l’internaute :
• les variables locales,
• les traitements serveur, L’internaute clique dans la Page N-1
- Création de la session WEBDEV temporaire
pour afficher la Page N
• les connexions aux bases de données, - Création du contexte de la Page N
• les contextes des fichiers de données, ...
N

CONTEXTE
Lorsque la page AWP a été envoyée à l’internaute, ces éléments sont détruits.
- Création de la page web
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

Déconnexion de l’internaute
(fermeture du Navigateur)

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

 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érencement.
Temps
• Sauvegarde des informations dans des contextes AWP (par programmation).
Connexion de l’internaute à
- Création de la session WEBDEV temporaire Stockage du
un site AWP
contexte AWP
Passage des informations (valeurs) entre deux pages dans l’URL - Création du contexte de la Page 1 par programmation
(variables globales)
Il est possible de passer des informations d’une page à une autre via l’URL. L’URL est de la forme 1

CONTEXTE
"http:\\Serveur Web\...\mapage.awp?NomParam1=Valeur1& NomParam2=Valeur2". - Création de la page web
Affichage de la Page 1
Cette méthode permet un meilleur référencement de la page car les informations passées dans - Renvoi de la page web à l’internaute
- Libération du contexte de la Page 1
l’URL sont visibles et analysées par les robots de référencement. - Suppression de la session temporaire

Sauvegarde des informations (valeurs) dans des contextes AWP (par programmation).
il est possible de stocker sur le serveur des valeurs communes à plusieurs pages AWP, grâce aux L’internaute clique dans la Page 1
- Création de la session WEBDEV temporaire
contextes AWP. Un contexte AWP est créé sur le disque sur le serveur. Ce contexte est disponible pour afficher la Page 2
- Création du contexte de la Page 2
tant que des pages AWP sont affichées et que le time out des contextes AWP n’est pas écoulé.
2

CONTEXTE
Le time out des contextes AWP est défini dans l’administrateur WEBDEV (onglet "Configuration",
option "Durée des contextes AWP"). - Création de la page web
Affichage de la Page 2
Pour gérer les contextes AWP, il est nécessaire d’utiliser les fonctions WLangage DéclareContex- - Renvoi de la page web à l’internaute
- Libération du contexte de la Page 2
teAWP, LibèreContexteAWP, ... - Suppression de la session temporaire

Pour plus de détails, consultez l’aide en ligne.

L’internaute clique dans la Page N-1

- Création de la session WEBDEV temporaire
pour afficher la Page N
- Création du contexte de la Page N

CONTEXTE
- Création de la page web
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

Déconnexion de l’internaute
(fermeture du Navigateur)

Au bout du
Time Out des
contextes AWP
(défini dans
l’Administrateur
WEBDEV), le contexte
AWP est détruit.

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

 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 WEB-
DEV :

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 données modi-
Serveur
Navigateur 2
fié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 caractéristiques d’un produit, une liste
de villes, une carte géographique, ...) doivent être modifiés, seuls ces éléments seront rafraîchis. Web
Le serveur n’aura pas à envoyer la page entière sur le poste de l’internaute. Envoi de la requête

Cette technologie a de multiples avantages : 1 Action

• le serveur est moins sollicité. Il peut alors supporter un plus grand nombre de connexions
simultanées. 3 Exécution de
la requête

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

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.

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

 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 code Javascript s’exécu-
Navigateur Serveur tant 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écutant sur le
serveur.

1 2 3
• De nouvelles fonctions du WLangage spécifiques au Web sont disponibles.
Exécution de la
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/événement
exécutable en code serveur.
• Certaines fonctions du WLangage sont uniquement utilisables dans un traitement/événement
Envoi du résultat exécutable en code navigateur.
uniquement
• De nouveaux types de champs plus spécifiques à une application Web sont disponibles :

7 5 4
Mise à jour Génération du résultat : • Champ d’affichage formaté,
AUTOMATIQUE Document XML, chaîne
des éléments modifiés • Champ Applet Java,

6
de caractères
• Champ Bandeau défilant,
• Champ Barre de navigation,
Analyse du résultat • Champ Captcha,
• Champ Cellule,
• Champ Chemin de navigation,
Exécution d’un traitement navigateur (fonction AJAXExécute ou AJAXExécuteAsyn-
chrone). • Champ Composant Web,
• Champ IFrame,
Demande d’exécution d’une procédure serveur.
• Champ Lien,
• Champ Ligne,
Exécution de la procédure serveur. • Champ Page Interne,
• Champ Page cornée,
Génération du résultat. Le résultat de la procédure sera exprimé sous forme d’une • Champ Plan du site,
chaîne de caractères ou d’un document XML. • Champ Popup,
Envoi du résultat de la procédure (Mot-clé RENVOYER). • Champ Réglette,
• Champ Réseau social,
• Champ SilverLight,
Analyse du résultat de la procédure.
• Champ Tableau HTML,
• Champ Upload,
Affichage des informations modifiées. Seuls les champs nécessaires sont rafraîchis. • Champ Vignette,
• Champ Zone de Texte Riche.
• Certains types de champs inutiles sur Internet ont disparu : Ascenseur, ActiveX, Objet OLE,
Spin, ...

26 Partie 1 : Internet : Concepts de base Partie 1 : Internet : Concepts de base 27

 Machines et logiciels
Contenu PARTIE 2
nécessaires
Développement
• une machine : PC, Mac, Unix, Smartphone, ...
• un navigateur : Internet Explorer, FireFox, Chrome, ...
d’un site
• 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 machine : PC
• 1 système d’exploitation • 1 système d’exploitation :
serveur (Windows ou Linux) : Windows Vista ou supérieur.
Windows 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 5.3 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 principaux : le
Projet et l’Analyse.

Un Projet WEBDEV est un ensemble d’éléments : pages, états, champs, classes, composants, ...
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 3.2 Les éléments du projet

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

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

 4  Manipulations du projet 5.2 Zones d’impression 3. Réduisez l’affichage de la représentation gra-
phique (modifiez la valeur de la combo affichant
Si des représentations graphiques (MLD, dia- un pourcentage dans le volet "Affichage" ou utili-
Voici les principales manipulations pouvant être • Copier ou supprimer un projet, grammes UML, ...) doivent être imprimées, il est sez le raccourci Ctrl + Roulette de la souris) pour
réalisées sur un projet : nécessaire de configurer les zones d’impression visualiser l’ensemble du graphe.
• Renommer un projet.
avant d’imprimer la documentation technique.
• Archiver un projet, Pour plus de détails sur ces fonctionnalités, consul- 4. A l’aide de la souris :
• Restaurer un projet, tez l’aide en ligne. • déplacez ces bordures à l’endroit désiré en
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. Affichez les zones d’impression dans l’éditeur • choisissez le nombre de pages sur lesquelles
5  Documentation technique du projet en cours. Par exemple, pour l’éditeur d’analyses, la représentation graphique doit être impri-
sous le volet "Affichage", dans le groupe "Aide à mée (le curseur de la souris se transforme en
l’édition", cochez l’option "Zones d’impression". double-flèche Nord-Ouest / Sud-Est).
WEBDEV permet d’imprimer différentes documen- 5.1 Type de documentation technique 2. Des bordures représentant les zones impri-
tations techniques détaillant l’ensemble des élé- mables dans le dossier apparaissent sous l’édi-
Plusieurs types de documentation technique sont
ments (pages, état, fichier de données, rubrique, ...) teur en cours.
proposés :
du projet. Pour imprimer ces documentations tech-
niques : • Synthétique : Contient les informations de base
sur les éléments du projet.
• sous le volet "Accueil", dans le groupe "Général",
déroulez l’icône et sélectionnez l’option • Code : Contient l’ensemble des codes de tous
"Imprimer la documentation technique du pro- les objets du projet ainsi que les procédures.
jet". La documentation technique peut contenir • Dossier Complet : Contient toutes les informa-
l’ensemble des caractéristiques du projet. tions du projet. Ce type de documentation tech-
• sous le volet "Accueil", dans le groupe "Géné- nique peut être très volumineux.
ral", cliquez sur l’icône . La documentation • Personnalisé : Correspond à une sélection des
technique est alors constituée uniquement informations à imprimer.
des caractéristiques de l’élément (page, état,
Type d’édition de la documentation technique
requête, ...) en cours.
La documentation technique peut être imprimée
sur l’imprimante sélectionnée. Lors de l’impres-
sion, la documentation technique générée est
affichée dans le visualisateur de rapports. Il est
alors possible de :
• lancer l’impression,
• exporter la documentation technique au format
PDF (via le volet "Exporter" du visualisateur de
rapports).
Pour plus de détails, consultez l’aide en ligne.

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

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

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

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

Page Page Page Page

Session statique AWP PHP
WEBDEV WEBDEV

Fichier source des pages au format WEBDEV (.WWH)

HTML
générique .HTM .AWP .PHP
WDL
Saisie du code (étape optionnelle).
Fichiers générés
Légende :
.WWH : Format source des pages .WDL : Bibliothèque du projet
Ce fichier contient la description complète Générée lors du déploiement du site WEBDEV
de la page (champ, code navigateur, code (en mode Session ou AWP), la bibliothèque
serveur). Ce fichier est utilisé par l’éditeur et contient le code serveur des pages du projet.
Code navigateur reste sur la machine du développeur. Ce fichier sera présent sur le serveur.
.HTML générique .AWP : Page AWP
Ce fichier contient la description complète de Généré à partir du fichier WWH, ce fichier
la page (champ, code navigateur, code ser- contient la description des champs, le code
veur). Certains paramètres de cette page sont serveur, le code navigateur. Ce fichier sera
génériques et seront remplis dynamiquement présent sur le serveur.
lors de l’affichage de la page.
.HTM : Page HTML du site .PHP : Page PHP
Généré à partir du fichier WWH, ce fichier Généré à partir du fichier WWH, ce fichier
Code serveur contient la description des champs en HTML contient la description des champs, le code
et le code navigateur (si le code a été saisi serveur, le code navigateur au format PHP. Ce
en WLangage, il est automatiquement traduit fichier sera présent sur le serveur.
en Javascript). Ce fichier sera présent sur le
Enregistrement de la page.
serveur.

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

 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 page en Le "Dynamic serving" est une technique dans laquelle la même adresse (URL) mène à 2 pages
"zones" grâce à l’outil "Crayon". Ces zones sont automatiquement paramétrées et permettent de différentes : une page pour PC et une page pour mobile.
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 an-
crage.

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 automa-
tiquement détecté et la page correspondante (ordinateur ou mobile) est affichée dans le naviga-
teur. 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 améliore la • La détection de l’environnement est réalisée selon les recommandations Google : les tablettes
pertinence du référencement par certains moteurs de recherche. 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 correctement réalisées, le site
est considéré comme "Mobile friendly".

40 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 41

 Site "mobile friendly" :
Contenu
Page
Contenu
Responsive Web Design interne
Les sites Web peuvent être visualisés sur de nombreuses plateformes : mobiles, tablettes, PC, ... Le champ Page interne permet d’inclure une page (et son code) dans une autre page. A l’exécu-
Sur chaque matériel, la taille du navigateur change et donc l’espace disponible pour afficher les tion, la page interne sera dynamiquement fusionnée à la page hôte.
données change également.
La méthode du "Responsive Web Design" consiste à créer une seule et même page qui s’adapte 1. Création d’une page interne
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.
Méthode utilisée Dans cette page, tous les types de champs peuvent être utilisés.

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
(Desktop)
Dans l’exemple, une page interne permet de gérer le panier.

En termes de conception, un site Web est tout d’abord réalisé pour une utilisation "bureau". En
réduisant les résolutions d’affichage (taille de la page), le contenu et les fonctionnalités sont soit 2. Utilisation d’une page interne
déplacés, soit retaillés, soit masqués.
Pour utiliser une page interne, il suffit de :
Sous l’éditeur WEBDEV, la représentation des différentes résolutions possibles se fait à l’aide de
• créer un champ de type page interne.
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 : • sélectionner dans la description du champ la page interne à utiliser et valider.
• 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".
Mobile Tablette Bureau • La zone d’accueil est rectangulaire et aucune surcharge n’est possible. Pour réaliser des sur-
charges, il est conseillé d’utiliser des modèles de champs.
42 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 43
 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 éléments WEBDEV permet de créer des pages Popup. Les pages Popup permettent de dialoguer avec l’utili-
communs à un ensemble de pages du site. sateur d’une manière simplifiée.
Les modifications effectuées dans un modèle de pages sont automatiquement reportées sur Une page Popup est associée à une page. Une page peut avoir plusieurs pages Popup.
toutes les pages utilisant ce modèle. L’utilisation des Popups permet de manipuler sous l’éditeur la fenêtre de dialogue comme un élé-
Un modèle de pages permet, par exemple, de respecter la charte graphique définie pour un site. ment différent de la page, tout en étant intégré à la page.

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ésoli-
dariser 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éritage. Dans ce cas, les
éléments sont identifiés par un carré bleu.

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

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

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

 champs de la page. Une page peut être associée d’enrichissements particuliers : splash screen au 7  Actualiser une page de type Session
à plus de langues que le projet (cas par exemple lancement, mode plein écran, ... Ces fonctionnali-
des pages partagées entre plusieurs projets). tés les font ressembler à de véritables applications.
Pour plus de détails, consultez le chapitre "Les WEBDEV permet de paramétrer aisément toutes 7.1 Présentation 7.2 Mise en place
sites multilingues", page 136. ces spécificités tout en préservant la compatibilité
Remarque : Les pages Web destinées à être vues avec les autres navigateurs (mobiles ou non) du L’actualisation d’une page consiste à ré-afficher Pour actualiser une page, il suffit d’utiliser la fonc-
sur le téléphone Apple iPhone peuvent bénéficier marché. une page déjà ouverte sous le navigateur. Cette tion du WLangage PageActualise.
action est identique à l’utilisation de la touche "Ra-
fraîchir" du navigateur. Lors de l’actualisation d’une page, les opérations
4  Page interne Lors de l’actualisation de la page, les données effectuées automatiquement sont les suivantes :
dynamiques présentes dans la page sont mises à 1. Vérification de l’existence du contexte de la
Les pages internes permettent de partager dynami- Cette interface est utilisée dans les différentes jour en fonction du contexte de page présent sur page sur le serveur.
quement une même partie d’interface au sein d’un pages de votre site grâce au champ de type "Page le serveur. Seules les données modifiées sont ré-
affichées. 2. Ré-affichage de la page en fonction de son
ou de plusieurs sites. interne". contexte présent sur le serveur.
L’interface à utiliser plusieurs fois est créée dans Remarque : La page interne à partager peut être Par exemple, lors de la saisie d’une commande
dans une application commerciale, à chaque nou- L’utilisation de la fonction PageAffiche est décon-
une page de type "Page Interne". issue d’un composant. seillée pour actualiser une page, car le temps de
velle commande d’un article, la page affichant le
Pour plus de détails, consultez l’aide en ligne. récapitulatif de la commande (le panier) est réac- chargement de la page est beaucoup plus long.
tualisée.
5  Modèles de pages
8  Les contextes de pages
WEBDEV permet de créer des modèles de pages. • simplifier la mise à jour de la charte graphique
Ces modèles contiennent tous les éléments gra- du site.
phiques et le code communs à l’ensemble des Un modèle de pages se crée aussi simplement 8.1 Présentation 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 gateur.
Dans une application Windows, toutes les informa-
Les modifications effectuées dans un modèle de modèle, il suffit de choisir l’option "basée sur un tions relatives à la fenêtre sont conservées avec la • Le contexte d’une page est mis à jour en fonc-
pages sont automatiquement reportées sur toutes modèle". fenêtre. tion des informations saisies par l’internaute
les pages utilisant ce modèle. Par défaut, toute modification effectuée dans le sous le navigateur. Cette mise à jour se fait lors
Dans un site WEBDEV en mode Session, pour
Un modèle de pages permet de respecter la charte modèle est reportée dans les pages l’utilisant. Il de la validation de la page (à l’aide d’un bouton
chaque page affichée sur le navigateur de l’inter-
graphique définie pour un site. est cependant possible dans une page spécifique de type "Envoi au serveur" ou de la fonction
naute, un contexte de page existe sur le serveur.
L’utilisation de modèles de pages dans vos sites de gérer des cas particuliers en surchargeant les PageValide).
Le contexte de page regroupe toutes les informa-
permet de : éléments du modèle. • Les contextes de page existants sont fermés
tions relatives à la page : contenu des champs, va-
• simplifier la création des pages du site. Pour plus de détails, consultez l’aide en ligne. lors de l’utilisation de la fonction PageUtilise. Le
riables locales, variables globales, code WLangage
contexte de page correspondant à la page à affi-
• simplifier la mise en page des pages du site. "serveur", ...
cher avec cette fonction est alors ouvert.
8.2 Fonctionnement automatique Remarque : WEBDEV offre la possibilité de réaliser
6  Page popup Par défaut, WEBDEV gère automatiquement les
une gestion avancée des contextes grâce aux fonc-
tions ContexteXXX. Pour plus de détails, consultez
contextes de pages en mode Session : l’aide en ligne.
WEBDEV permet de créer des pages popup. Ces Pour ouvrir une page popup depuis une autre • Un contexte de page est ouvert lors de l’affi-
pages popup permettent de dialoguer simplement page, il est possible d’utiliser la fonction navigateur
avec l’internaute. Il est par exemple possible d’utili- PopupAffiche.
ser une page Popup pour : Remarque : Il est également possible d’afficher une
9  Ouvrir une page dans un site WEBDEV
• faire saisir des renseignements (paramètres page sous forme de popup. Dans ce cas, l’affichage
SMTP pour l’envoi d’emails, nouvelle adresse, de la popup sera réalisé via la fonction PopupAffi-
...), chePage. 9.1 Présentation 9.2 Ouverture d’une page depuis la descrip-
• demander une confirmation de suppression, Pour plus de détails, consultez l’aide en ligne. L’ouverture d’une nouvelle page dans un site
tion d’un champ
• ... WEBDEV peut être réalisée selon plusieurs mé- Lors de la description d’un champ Bouton, d’un
thodes : champ Lien, d’un champ Image (avec zone de clic),
• directement depuis la description du champ qui il est possible de définir directement l’action effec-
doit ouvrir la page (bouton, lien, menu, ...), tuée et la destination de cette action.
• par programmation en WLangage.

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

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

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

 Les différents types de
Contenu
champs standard
Afficher une image rafraîchie régulièrement. Champ Web Caméra
Répéter des champs dans une page (Cata-
logue 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

Champ Zone de texte riche
spécifique (images, liens, ...).
Définir une zone de couleur. Champ Cellule,
Tableau HTML Saisir des informations.
Afficher un prix, une quantité, une adresse,
Champ d’affichage formaté
une date, une heure, ...
Sélectionner une valeur parmi une liste (Pays,
Ville, couleur, ...).
Champ de saisie
Champ Sélecteur,
Champ Combo,
Champ Liste

Afficher des informations hiérarchisées

Champ Arbre
(contenu d’un répertoire, ...).
Sélectionner plusieurs valeurs parmi une liste Champ Interrupteur, Aligner des champs (tableau HTML). Champ Cellule, Tableau HTML
(les destinataires d’un message, des fichiers à Programmer une action dans une page (affi- Champ Bouton,
télécharger, ...). Champ Liste
cher une page, valider une saisie, ...).
Champ Lien
Afficher une animation (Gif animé). Champ Image
Afficher une vidéo. Champ Vidéo
Afficher une page selon la zone cliquée sur
Champ Image (avec zones de clic) Afficher une page d’un autre site dans une de
une image. Champ IFrame
vos pages.
Utiliser un code HTML existant. Champ HTML
Afficher une image graphique (Photo, ...). Sélectionner et afficher une date sur un calen-
drier.

Champ Image

Champ Calendrier

Utiliser une applet Java (horloge, ...). Champ Java

Afficher le contenu d’un fichier de données Champ Table fichier ou Champ Table mémoire,
en table (Liste des clients, détail d’une com- Champ Zone répétée fichier ou champ Zone
mande, ...). répétée mémoire

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

 Afficher les rendez-vous sous forme de plan- Intégrer des champs de type SilverLight. Champ SilverLight
ning ou d’agenda.
Enrouler / Dérouler une zone d’affichage Champ Tiroir
Uploader un ou plusieurs fichiers.

Champ Planning,
Champ Upload
Champ Agenda

Afficher successivement plusieurs contenus. Champ Bandeau défilant

Afficher un tableau de bord affichant des
informations différentes sous forme de
Afficher un histogramme, une courbe, un vignettes.
graphe 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
Afficher une page de votre site à l’intérieur horizontale défilante.
Page Interne
d’une de vos pages.
Utiliser des ressources externes disponibles
Afficher un menu automatique (qui se sur Internet (composants Angular JS, snip- Champ Composant Web
construit au fur et à mesure du parcours du Champ Chemin de navigation pets Bootstrap, ...).
site).
Créer un effet visuel dans une page en pré-
Permettre à l’internaute de donner ou de sentant une image partiellement recouverte Champ Page cornée
visualiser une note. par une autre.

Champ Notation

Afficher des vignettes d’images. Champ Vignette

Afficher un ensemble d’images sous forme
Champ Zone répétée de type galerie
de galerie.

54 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 55

 Les champs en pratique 2  Caractéristiques d’un champ

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

56 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 57

 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 Afficher les règles Pour aligner plusieurs champs, WEBDEV met à réduire ou agrandir l’affichage de la page en cours.
UI "professionnelles" et harmonieuses. Pour vous Pour afficher les règles, sous le volet "Affichage", votre disposition :
aider à concevoir des UI standard, WEBDEV vous 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 sous bilités :
proposent les outils suivants : Deux types de guides peuvent alors être utilisés : le volet "Alignement", ou sous le volet "Modifi-
• les règles. • sous le volet "Affichage", dans le groupe "Aide à
• les guides, permettant d’aligner et de disposer cation", dans le groupe "Profondeur et Aligne- l’édition", spécifiez le facteur de zoom voulu.
• la grille. les champs à l’intérieur des pages. ment").
• 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- • soit un alignement personnalisé (disponible barre de message de l’éditeur (en bas à droite).
automatiquement lors d’un positionnement d’un ner une bordure de taille identique de chaque sous le volet "Alignement", dans le groupe
champ). côté de la page. "Autres alignements"). L’alignement personna- • appuyez sur la touche Ctrl et modifiez le facteur
lisé permet d’utiliser des propriétés spécifiques de zoom avec la roulette de la souris tout en
• le correcteur d’interface avancé. Remarque : L’option "Afficher les guides" du menu maintenant la touche Ctrl enfoncée.
• les options d’alignement. 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.

58 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 59

 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 du navigateur. Le champ
Ces options d’affichage permettent de personnali- • les options de sélection des champs. du navigateur. peut :
ser la manipulation des champs sous l’éditeur de Ces options d’affichage permettent de personnali- • conserver sa hauteur,
pages. ser la manipulation des champs sous l’éditeur de • s’adapter au contenu,
Les options d’édition permettent de paramétrer : fenêtres.
• suivre le comportement du navigateur.
• 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
plateformes différentes (iPhone, PC, ...). Grâce au hauteur peut être adaptée au contenu du champ • ancrage en largeur : permet de définir le
mécanisme d’ancrage, la taille et la position des ou au navigateur. Il est également possible de comportement du champ en largeur lors du
4. Il est également possible de définir le compor-
champs s’adaptent automatiquement lors d’un définir la taille minimale du champ. redimensionnement du navigateur. Le champ
tement du champ lorsque le contenu est plus
redimensionnement de la page. Ces paramètres peuvent être configurés sous l’édi- peut :
grand que le champ. Il est possible :
teur de pages. • conserver sa largeur,
• d’agrandir le champ et pousser les autres
• s’adapter au contenu, champs de la page,
6.1 Ancrer un champ sous l’éditeur • suivre le comportement du navigateur. • tronquer le contenu,
Pour ancrer un champ : • toujours activer un ascenseur,
1. Sélectionnez un ou plusieurs champs à ancrer. • afficher un ascenseur uniquement en cas de
2. Définissez l’ancrage du / des champs : dépassement.
• soit dans l’onglet "UI" de la fenêtre de descrip- 5. Validez. Si l’option "Ancrage" est activée (sous
tion du champ (option "Description" du menu le volet "Affichage", dans le groupe "Voir (tous les
contextuel). champs)"), les signes d’ancrage apparaissent
• soit grâce à l’option "Ancrage" du menu automatiquement dans le champ (flèches rouges).
contextuel (clic droit) du champ. Remarque : Pour gérer l’ancrage des champs, il est
3. Dans la fenêtre qui s’affiche, choisissez le type également possible d’utiliser les tables de position-
La gestion de l’ancrage d’un champ est constituée
d’ancrage à utiliser. nement. Pour plus de détails, consultez l’aide en
de plusieurs paramètres :
ligne.
• 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.

60 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 61

 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 des informations diffé- Code serveur ou code navigateur ?
rentes dans chaque occurrence. Il est ainsi possible d’afficher à chaque répétition des enregistre-
ments 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
(sur le poste de retour au poste serveur
l’internaute) (pages Session ou AWP)
Création de la zone répétée sous
l’éditeur de WEBDEV.
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 (en mode Session ou AWP).
• Code Navigateur (code Vert ou Bleu) : Ce code est écrit en WLangage (code vert) ou en Javas-
cript (code bleu).
A l’enregistrement de la page, ce code est automatiquement traduit en Javascript et intégré
aux pages HTML WEBDEV. Ce code est exécuté en local (sur le poste de l’internaute) et ne
Affichage de la zone répétée
nécessite pas d’action du serveur.
sous le navigateur.

Pour chaque champ de la zone répétée, plusieurs caractéristiques peuvent être modifiées lors de
la répétition : libellé, couleur du texte, ...
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 directement à 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.

62 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 63

 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 l’éditeur
de code par un bandeau vert ou bleu. Les codes exécutés sur le poste serveur sont représentés sous l’éditeur de code par un 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 sur le sigle
WL précédant l’intitulé du code (ou inversement en cliquant sur JS). A l’enregistrement de la page, • bandeau Jaune = WLangage : le sigle WL précède l’intitulé du code.
le code WLangage est automatiquement converti en Javascript. • bandeau Rose = PHP : le sigle PHP précède l’intitulé du code.

Nous vous conseillons de développer en WLangage. Pour passer d’un code jaune (WLangage) à un code rose (PHP), il suffit de cliquer sur le sigle WL
précédant l’intitulé du code (ou inversement en cliquant sur PHP). Lors de l’enregistrement de la
Evénements supplémentaires page PHP, le code WLangage est automatiquement converti en code PHP.

Le lien "Ajouter d’autres événements" présent dans la fenêtre de code permet de gérer des événe- Nous vous conseillons de développer en WLangage.
ments 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 pressée, touche
relâchée, bouton enfoncé, souris déplacée, ...

Rappel : Le code navigateur est disponible dans les pages dynamiques (en mode Session ou AWP)
et statiques.

64 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 65

 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 simplement Deux codes de clic sont associés aux boutons / liens :
tous les traitements web voulus sans avoir à connaître le HTML, le Javascript ou le PHP. • un code de clic navigateur, saisi en WLangage (ou en Javascript) sous l’éditeur de code. Ce
Disponible en français et en anglais, le WLangage est composé d’ordres simples, proches du lan- code est intégré à la page HTML et sera exécuté sur le poste de l’internaute.
gage courant. Le français permet une programmation intuitive. • un code de clic serveur, saisi en WLangage (uniquement dans les pages dynamiques). 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")
DonneFocusEtRetourUtilisateur(ADRESSE)
FIN

En Javascript, voici le traitement équivalent :

<SCRIPT LANGUAGE=Javascript>
function EXE_SansEspace( szChaine , nPartie )
{
var nPremier = 0;
var nDernier = szChaine.length-1;
if (nPartie & 1) while (szChaine.charAt(nPremier)==" ") nPremier++; Le tableau ci-après présente les différents codes exécutés (selon le type de bouton / lien choisi)
if (nPartie & 2) while (szChaine.charAt(nDernier)==" ") nDernier--; et l’action associée.
return szChaine.substring(nPremier,nDernier+1); L’aspect du bouton / lien et sa destination n’influent pas sur l’ordre des codes exécutés.
}
// Clic (onclick) de BOUTON_OK
function _VALIDCDE_BOUTON_OK_CLI() Astuce : Pour comprendre et mémoriser dans quel ordre s’exécutent les codes serveur et naviga-
{ teur, mettez-vous à la place de l’internaute : l’internaute clique sur le bouton dans le navigateur
if((EXE_SansEspace(ADRESSE,3)=="")) donc c’est le clic navigateur qui est effectué en premier.
{
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.

66 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 67

 Upload : Envoi de fichiers
Contenu
Action
Envoyer les
valeurs au
Ordre des codes exécutés
Action associée :
Exécuter les codes navigateur uniquement.
Remarques
Mise à jour automatique
du contexte de page sur
vers le serveur
serveur (sub- Exécuter les codes serveur et navigateur. le serveur (pages dyna-
mit) miques Session ou AWP L’upload est l’opération qui consiste à envoyer sur le poste serveur un ou plusieurs fichiers prove-
Codes exécutés : uniquement). nant du poste de l’internaute.
1. Code de clic navigateur du champ.
2. Code navigateur du submit de la page (s’il existe).
3. Envoi des valeurs présentes dans les champs de la Un exemple simple : La création d’un contact dans un annuaire.
page pour mettre à jour le contexte de la page sur le ser- L’internaute veut associer une photographie à la fiche du contact. Cette photo est présente sur le
veur. disque dur de son poste.
4. Code serveur du champ.
Le champ de type UPLOAD permet à l’internaute de sélectionner l’image grâce à un bouton "Choi-
Action associée : Afficher une page du site. Mise à jour automatique sir un fichier".
du contexte de page sur Lors de la validation de la fiche, le fichier image sélectionné est envoyé au serveur et copié sur le
Codes exécutés : le serveur (pages dyna-
1. Code de clic navigateur du champ. disque dur du serveur (fonction UploadCopieFichier).
miques Session ou AWP
2. Code navigateur du submit de la page (s’il existe). uniquement). Lors de la consultation du contact, l’image apparaîtra dans la fiche.
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.
4. Code serveur du champ. Lors de la validation de la page,
5. Affichage de la page. le fichier “uploadé” est copié sur
Réinitialisa- Action associée : Exécuter les codes navigateur unique- le disque dur du serveur.
tion de page ment.
(reset)
Codes exécutés :
1. Code de clic navigateur du champ.
2. Affichage de la page initiale (page avec tous les champs

Serveur Web
initialisés à vide ou à 0 et exécution du code d’initialisa-
tion de chacun des champs puis de la page).
Ne rien Action associée : Exécuter les codes navigateur unique-
envoyer au ment. Poste serveur chez l’hébergeur
serveur Codes exécutés : Sur le navigateur de l’internaute
Code navigateur du champ uniquement.
Action associée : Exécuter les codes serveur et navigateur.
Attention : L’aspect du bouton "Choisir un fichier" (forme, couleur ou libellé affiché) est défini par
Codes exécutés : le navigateur et ne peut généralement pas être personnalisé.
1. Code de clic navigateur du champ.
2. Code serveur du champ.
Remarque : WEBDEV propose un champ métier permettant également de réaliser un upload. Ce
Action associée : Afficher une page du site. Affichage automatique champ permet de gérer une jauge de progression, la multisélection des fichiers, ...
de la page
Codes exécutés :
1. Code de clic navigateur du champ.
2. Code serveur du champ.
3. Affichage de la page.

68 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 69

 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 ensemble de Un état permet d’obtenir une vue personnalisée d’informations : données saisies dans la base de
champs, réutilisables dans plusieurs pages. données, données présentes dans un fichier texte, données provenant d’un champ Table, ...
Les modifications effectuées dans un modèle de champs sont automatiquement reportées sur
Un état est créé selon le principe suivant :
toutes les pages utilisant ce modèle.
• les données à imprimer sont issues d’une source de données (fichier de données décrit dans
Un modèle de champs permet de :
une analyse, vue HFSQL, requête, zone mémoire ou fichier texte).
• regrouper un ensemble de champs dans un but précis.
• l’état regroupe, trie et met en forme les données.
• rendre les champs indépendants de la page les accueillant.
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éveloppement Modes d’impression
d’un trait jaune sous l’éditeur. Sources de l’état
Imprimante
Champ Table
du serveur

Zone mémoire Fichiers XSL, PDF, ...

Etat
(Editeur
Requête d’états)
Fichiers Texte

Utilisation du modèle dans une page : les éléments appartenant au modèle sont Fichier texte Fichiers PCL
entourés en rouge 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 champs".
Données Fichiers HTML, XML, ...
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ésolida-
Variable WLangage
riser 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éritage de champ. Dans ce cas, Navigateur
les éléments sont identifiés par un carré bleu.

70 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 71

 Modèles
Contenu
Différents modes
Contenu
d’états d’impression
Dans une société, bien souvent, les impressions utilisent un look et une mise en page unifiés : Pour imprimer des documents générés par votre site (factures, devis, ...), créez des états grâce à
date en haut à droite dans un format spécifique, bas de page avec heure d’impression et nom du l’éditeur d’états.
fichier, logo en haut à gauche, ...
Pour imprimer ces états quelle que soit la configuration du poste de l’internaute, il est conseillé de
Les modèles d’états permettent d’uniformiser simplement la mise en page de vos états.
proposer au moins deux modes d’impression :
• Impression au format HTML : L’état s’affiche dans une nouvelle page du site. L’internaute 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éation de
l’état.

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ésoli-
dariser 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éritage. Dans ce cas, les
éléments sont identifiés par un carré bleu.
Impression en HTML Impression en PDF

72 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 73

 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, nouvel onglet du
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
• soit sous l’éditeur de pages : aucune programmation n’est nécessaire.
grâce à des boutons (ou des liens). Un clic sur un bouton entraîne l’affichage d’une nouvelle page.
• soit sous l’éditeur de code, dans un événement du champ Bouton (ou du champ Lien).
Pour afficher une nouvelle page, il faut se poser deux questions :
1. quelle page afficher ?
Plusieurs fonctions du WLangage permettent d’ouvrir une nouvelle page (ou frameset). Les princi-
2. où afficher la page (nouveau navigateur, frame, ...) ?
pales fonctions sont :
• PageAffiche (pour les pages),
Quelle page afficher ? • 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 événement du champ Bouton (du champ Lien, du champ Sélection de la destination sous l’éditeur de pages (cas le plus courant)
Image (avec zones de clic), ...). Dans un champ Bouton, pour définir la desti-
Sélection de la page à afficher sous l’éditeur de pages (cas le plus courant) nation de la page à afficher :
• Affichez la description du champ Bouton ou
Pour définir la page à afficher : Lien (clic droit sur le champ, option "Des-
• Affichez la fenêtre de description du champ cription").
(clic droit sur le champ, option "Descrip- • Dans la liste des destinations, sélectionnez
tion"). une destination prédéfinie ou une frame
• Dans le type de l’action, sélectionnez "Affi- (dans le cas d’un frameset).
cher une page du site".
• 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’enregistrement, ...). Lorsque la destination dépend d’un choix de l’internaute, cette destination doit être sélection-
née par programmation. Par exemple, si l’internaute n’indique pas son mot de passe, une page
d’erreur apparaît dans un nouvel onglet du navigateur; sinon, la page suivante s’affiche dans le
navigateur en cours.
La fonction ChangeDestination permet de modifier par programmation la destination d’une ac-
tion. Cette fonction doit être utilisée dans un code navigateur.

74 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 75

 Choisir une destination Frame parent (_parent)

Lors du choix de la destination pour un champ Bouton, un champ Lien, un champ Image (avec
zones de clic), 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),
• Frame en cours (_self), Clic sur
le bouton
• Frame parent (_parent),
• Nouveau navigateur (_blank). Dans ce cas, le nouveau navigateur peut correspondre à un
nouvel onglet du navigateur ou bien un nouveau navigateur avec des caractéristiques spéci-
fiques (présence de la barre de menu, de la barre message, ...). Page initiale Nouvelle page affichée
• une frame du frameset en cours. (imbrication de 2 framesets) dans la page contenant le
second frameset
Remarque : dans les schémas ci-dessous, la zone grisée représente la zone dans laquelle la page
est affichée lors du clic sur le champ Bouton.

Navigateur en cours (_top) Nouveau navigateur (_blank)

Clic sur
le bouton
Clic sur
le bouton

Page initiale Nouvelle page affichée

dans la totalité du
navigateur Page initiale Nouvelle page affichée dans
une nouvelle fenêtre du
navigateur

Frame en cours (_self)

Clic sur
le bouton

Page initiale Nouvelle page affichée

dans la même frame

76 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 77

 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 différentes Les feuilles de styles sont des modèles qui permettent d’uniformiser la présentation des champs
pages : 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 effectuant uniquement
quelques modifications dans les styles utilisés.
Un exemple d’utilisation des feuilles de styles : augmenter la taille de 9 à 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 UNIQUEMENT
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 recommandons
de mémoriser les informations de la commande.

78 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 79

 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
Deux types de mise en page d’un site peuvent être utilisés : proposé lorsque l’internaute saisira les mots-clés caractérisant votre site dans un moteur de re-
• site centré : cherche.
Les pages sont centrées dans le navigateur. Si la résolution de l’internaute est supérieure à la
résolution optimale du site, des marges apparaissent de part et d’autre de la page. Le contenu Pour aider au référencement de votre site, WEBDEV propose :
du site est centré. • un assistant de référencement. Cet assistant liste toutes les optimisations pouvant être réa-
lisé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électionnez 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 projet, 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 évoluent très vite.
N’hésitez pas à consulter des ouvrages ou des sites spécialisés sur ce sujet.
Remarques :
• Le type de mise en page est défini grâce aux options d’ancrage de la page (option "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.

80 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 81

 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 "Référen-
les pages de votre projet. Cet assistant analyse la cement", 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 "Edi- Pour lancer l’assistant d’aide au référencement
• Trois mots-clés doivent être spécifiés au mini- sur l’ensemble des pages du site :
met de gérer le référencement de la page. ter les expressions et les mots-clés"). mum dans la page. 1. Sous le volet "Projet", dans le groupe "Web",
• La description de la page doit être renseignée. déroulez "Référencement" et sélectionnez "Optimi-
• Le texte alternatif doit être saisi pour tous les ser le référencement".
champs le proposant (si possible en utilisant les 2. L’assistant de référencement se lance. Vous
mots-clés définis pour la page) ... 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.

82 Partie 2 : Développement d’un site Partie 2 : Développement d’un site 83

 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.
Remarque : Le référencement d’un site est parfois
Ces moteurs de recherche référencent des
sites au préalable testés par des personnes Environnement de
développement
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 "Automa- souvent disponible sur ce type de moteur de
tique" : 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
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.

84 Partie 2 : Développement d’un site

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

88 Partie 3 : Environnement de développement Partie 3 : Environnement de développement 89

 2.7 Editeur de code • Gestion de l’historique des modifications du
Tableau de bord
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
du 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 WEBDEV. Le
• des pages, • Interaction des différents volets avec les diffé- tableau de bord permet d’avoir une vision globale et synthétique de l’état d’un projet.
rents éléments de l’éditeur.
• 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 projet :
• des classes et des méthodes, ... L’éditeur d’images permet d’éditer les images et • statistiques sur le projet,
Voici quelques caractéristiques de l’éditeur de icônes du projet et de ses éléments. • incidents,
code : Voici quelques caractéristiques de l’éditeur • tâches,
• Mise en forme automatique des informations d’images : • état des tests automatiques,
saisies. • Recadrage.
• Complétion automatique.
• résultat des différents audits,
• Redimensionnement.
• Glossaire sur les fonctions. • liste des éléments extraits du GDS (Gestionnaire de Sources),
• Symétrie, rotation.
• Détection immédiate des erreurs de frappe et • résultat des plans d’actions (intégration continue), ...
• Gestion des textes.
aide à la correction.
• Gestion des calques.
• Compilation incrémentale.
• 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 Wid-
gets peuvent être paramétrés, déplacés, activés, désactivés, ... Il est possible d’ajouter de nou-
veaux 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.

90 Partie 3 : Environnement de développement Partie 3 : Environnement de développement 91

 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 "cibles" dif-
Par exemple, pour un ERP destiné à fonctionner sous Windows, il est fort probable qu’en plus de férentes.
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 pour la gestion des stocks Vous pouvez ainsi créer à partir d’un même projet par exemple :
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 partageables entre • un Webservice.
des projets WINDEV, WEBDEV et WINDEV Mobile.
A tout moment, vous pouvez travailler sur une configuration spécifique : les éléments n’apparte-
Il est ainsi possible de partager des collections de procédures ou des classes par exemple entre nant pas à cette configuration apparaissent grisés sous l’éditeur de projet.
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 différent
de celui qui a permis de le créer, un assistant s’affiche,
permettant de créer une configuration de projet spéci-
fique au produit utilisé.

Par exemple, si un projet WINDEV est ouvert avec WEB-

DEV, vous pouvez créer une configuration de projet nom-
mée "Site", permettant de regrouper tous les éléments
nécessaires au site WEBDEV.
Configurations du Projet

Dans les phases d’utilisation de l’environnement, il est

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

92 Partie 3 : Environnement de développement Partie 3 : Environnement de développement 93

 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 bibliothèques ou Présentation
plusieurs composants.
Pour simplifier vos développements en équipe, WEBDEV propose un gestionnaire de sources.
Pour générer le résultat de chaque configuration, vous pouvez bien entendu sélectionner une à Ce gestionnaire de sources permet à plusieurs développeurs de travailler simultanément sur le
une chaque configuration et générer l’élément correspondant. 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éra-
tion les configurations à générer et le résultat est immédiat.
Réseau
(intranet)

ADSL
(internet)

Cloud

GDS Déconnecté

Une base de sources regroupe les éléments du projet, chaque poste possède une copie en local
des éléments nécessaires au développement

Il est possible de partager les éléments présents dans le GDS :

Pour lancer une génération multiple, sous le volet "Projet", dans le groupe "Génération", déroulez
"Générer la configuration" et sélectionnez "Génération multiple". • via un réseau,
• via Internet,
• via PCSCloud (solution payante, clé en main, proposant un serveur dédié),
• via GDSDrive, (solution payante, clé en main, utilisant un serveur mutualisé).
• 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 portable au système géné-
ral.
• 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 portable au système géné-
ral.

94 Partie 3 : Environnement de développement Partie 3 : Environnement de développement 95

 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

3 Modification
1.1 Présentation
WEBDEV innove dans la gestion du travail en
1.2 Principe d’utilisation

Projet A Réintégration 10h41 Projet A

Installation
Version 2 Version 2
groupe avec le gestionnaire de sources (appelé

4
également GDS). COPIE LOCALE
Serveur GDS
Totalement intégré à l’environnement, le gestion- Projet
local
Développeur
Réseau local
naire de sources (GDS) permet : COPIE LOCALE
Projet A
Poste Local 2 • un développement performant en équipe,
Version 3 Développeur

5
Projet de Projet
ADSL (Internet)
• l’historique des modifications et des versions, référence
local

COPIE LOCALE
Extraction 14h28
• l’automatisation de la sauvegarde des sources Développeur
Projet A Projet

Version 2 Base de sources des membres de l’équipe développement. local Déconnecté

Poste Nomade
Extraction de la fenêtre Beta du Dimensionné pour des équipes de 1 à 100 déve-
Tous les éléments du projet sont enregistrés dans
Projet A Version 1 à 9h13 loppeurs, le GDS favorise et normalise sans
la base de sources (sur le serveur). Cette opération
Poste Nomade contrainte les échanges entre développeurs (même
Poste Local 1 est effectuée à la création du projet ou lors de
en développant seul, le GDS est utile car il contient
1
Extraction de la fenêtre Alpha du
l’importation d’un projet existant dans le Gestion-
Projet A Version 1 à 9h57 l’historique de vos applications).
Réintégration de la fenêtre Alpha modifiée naire de Sources.
Projet A Extraction 9h57 dans le Projet A Version 2 à 10h41 Le GDS utilise une base de sources : procédures, Chaque développeur utilisant le Gestionnaire de
Version 1
classes, pages, états, composants, analyses, ... Sources récupère une copie du projet en local.
6
Poste Local 2
Modification Extraction de la fenêtre Alpha du Cette base de sources peut être à votre choix :
en clientèle Projet A Version 2 à 14h28 Utilisation
• en mode HFSQL Client/Serveur : Pour travailler sur un élément du projet (fenêtre,
Projet A Réintégration 18h32
Version 3
Poste Nomade • installée sur un serveur personnalisé, page, état, ...), le développeur doit extraire l’élé-
Réintégration de la fenêtre Beta modifiée

7 dans le Projet A Version 3 à 18h32 • disponible via une plateforme PCSCloud

(solution payante, clé en main, proposant un
ment de la base de sources, le modifier, puis le
réintégrer.
serveur dédié), Si l’élément est déjà extrait, le développeur peut
• disponible via GDSDrive, (solution payante, demander à la personne ayant extrait de réintégrer
Si un élément (fenêtre, état, ...) du projet est extrait, ce même élément ne pourra pas être extrait clé en main, utilisant un serveur mutualisé. l’élément (par l’intermédiaire de la messagerie
une seconde fois. • en mode HFSQL Classic (installée en local ou intégrée).
Après modification des éléments extraits, il est nécessaire de réintégrer ces éléments pour que dans un répertoire partagé).
le projet de base prenne en compte ces modifications. En effet, la base de sources conserve un Le GDS permet un fonctionnement connecté en
historique de tous les éléments du projet depuis leur création. 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
A chaque réintégration d’un élément, le numéro de version du projet de base est incrémenté de 1. sans crainte de perte des modifications effectuées.
Le GDS permet également un fonctionnement dé-
connecté (train, avion, ...).

96 Partie 3 : Environnement de développement Partie 3 : Environnement de développement 97

 Pour profiter des modifications effectuées, les Voici donc une série de conseils qui s’appliquent au 3  Configurer le projet pour travailler avec le GDS
autres développeurs doivent synchroniser leur pro- serveur qui hébergera vos sources :
jet local avec le projet de référence (présent dans • Utilisez un serveur dédié avec un disque de
la base de sources). taille confortable (au moins 200 Go). Pour utiliser un projet existant avec le gestionnaire • Une base de sources existante. Il suffit de
de sources, quelques manipulations sont néces- sélectionner la base de sources voulue.
Serveur GDS • Utilisez plutôt le Gestionnaire de Sources (GDS)
1 EXTRACTION Développeur saires. 4. Validez l’assistant. Le projet est ajouté au GDS.
D’UN ÉLÉMENT Réseau local en mode Client/Serveur.
Projet
• Les disques durs peuvent avoir des problèmes 3.1 Ajouter un projet dans le GDS 3.2 Partage de ressources
Projet de 3 2 MODIFICATION
local
physiques : utilisez si possible un système RAID I
référence
RÉINTÉGRATION
sur votre serveur (plusieurs disques stockant les Pour ajouter un projet local dans le GDS : Vous avez importé dans le gestionnaire de sources
Développeur
ADSL (Internet) mêmes informations en double). 1. Ouvrez votre projet sous WEBDEV. un premier projet. Ce projet contient des éléments
SYNCHRONISATION
4 • Protégez l’alimentation de votre serveur par un 2. Sous le volet "GDS", dans le groupe "Ajouter le partagés avec d’autres projets (classes, pages, pro-
projet", cliquez sur "Ajouter le projet dans le GDS". cédures, feuilles de styles, ...).
SY

Projet
onduleur.
N

4 local
CH

Le partage est une notion importante du GDS. Dif-

RO

• Faites des sauvegardes régulières de la base 3. Dans l’assistant qui s’affiche, sélectionnez la
N
IS

Développeur férentes méthodes sont disponibles pour effectuer

AT

de sources (1 sauvegarde par semaine au mini- base de sources à utiliser :

I O

Déconnecté
N

Projet mum). • Une nouvelle base de sources. Dans ce cas, le partage. Pour plus de détails, consultez l’aide en
local

sélectionnez le type de bases de sources à ligne.

• Placez le serveur dans une zone "sécurisée", en
Conseils utilisant un firewall. créer (solution "Clé en main" GDSDrive ou
PCSCloud, base de sources Client/Serveur
Les sources de vos applications sont primordiales.
ou locale). Selon l’option choisie, indiquez les
Ces sources doivent être traitées avec l’attention renseignements demandés.
qu’elles méritent !

2  Créer une base de sources pour le GDS 4  Travailler avec le GDS

2.1 Présentation • le nom et le mot de passe d’un administra- 4.1 Options d’un projet concernant le GDS • Extraire/Réintégrer automatiquement le projet :
teur 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-
• localement, dans un répertoire partagé sur le du "fichier projet". Si cette option est cochée, le
sources, il est nécessaire de créer une base de jet manipulé avec le Gestionnaire de Sources. Ces
réseau : tous les utilisateurs du GDS doivent fichier projet est extrait uniquement si l’action
sources. Cette base de sources doit être créée une options sont regroupées dans l’onglet "GDS" de la
avoir tous les droits sur ce répertoire. La base réalisée le nécessite. Lorsque l’action sur le
seule fois sur un poste serveur. description du projet (sous le volet "Projet", dans le
de sources sera au format HFSQL Classic. projet a été effectuée, le fichier projet est auto-
Le système d’exploitation et le système de fichiers groupe "Projet", cliquez sur "Description").
Il suffit de préciser le répertoire réseau où la matiquement réintégré.
sur lequel est installée la base de sources du GDS • Proposer la récupération de la dernière version Cette option permet de ne plus avoir la gestion
base de 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
Il est possible de créer la base de sources : 2.2 Quand créer une base de sources ? Cette option permet lors de l’ouverture d’un possible d’activer cette option sous le volet
projet présent dans le GDS, de proposer la récu- "GDS", dans le groupe "Projet", en déroulant
• via la solution "clé en main" GDSDrive (solution 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. "Gérer automatiquement l’extraction du projet".
est utilisé. Cette solution payante permet de différents moments : Par défaut, la dernière version des éléments est
simplifier toutes les manipulations d’installation
du serveur GDS. • lors de l’installation de WEBDEV. automatiquement récupérée. 4.2 Extraire un élément
• 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 Les différents modes d’extraction
• lors de l’importation d’un projet dans le Gestion- meture du projet :
cas, un serveur dédié est utilisé. Cette solution Le GDS propose deux modes d’extraction des élé-
naire De Sources. Cette option permet d’afficher lors de la fer-
payante permet de simplifier toutes les mani- 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. Pour plus de détails, consultez PCS- 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
Cloud. les projets WEBDEV à partager. ments extraits ne sont pas réintégrés. pouvez extraire immédiatement l’élément (bou-
• sur un serveur HFSQL Client/Serveur : la base ton d’extraction présent dans le panneau).
de sources sera au format HFSQL Client/Ser- 2.3 Sauvegardes
veur. Dans ce cas, il est nécessaire de préciser : Il est conseillé de faire régulièrement des sauve-
• le serveur, gardes de la base de sources du GDS. Ces sauve-
• la base de données, gardes peuvent être effectuées grâce à l’adminis-
• le port utilisé, trateur du GDS.

98 Partie 3 : Environnement de développement Partie 3 : Environnement de développement 99

 • 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 "Envi- • Gestion du projet en mode Maître / Invité.
ronnement", déroulez "Options" et sélectionnez • Gestion du projet en mode automatique (par Le Gestionnaire de Sources permet très sim- d’extraire avant la déconnexion les différents
"Options générales de WEBDEV". défaut). plement de travailler en mode déconnecté ou éléments qui vont être modifiés (ainsi, ces
2. Dans l’onglet "Général", l’option "Extraction nomade. éléments seront "déjà extraits" pour les autres
Maître et invité utilisateurs). Vous pourrez travailler en local sur
des éléments à la première modification" permet Ce mode permet par exemple à un développeur
de passer tous les prochains projets ouverts en Le Gestionnaire de sources considère 2 types d’uti- utilisant un portable de continuer à travailler sur votre projet. Les différents éléments du projet
mode automatique. lisateurs : un projet présent dans la base de sources tout en sont manipulables directement.
• le maître : le maître est l’utilisateur qui a placé étant déconnecté de la base de sources. • à la reconnexion, sous le volet "GDS", dans
Ouvrir un élément du projet pour le projet dans le gestionnaire de sources. Le principe est simple : le groupe "Autres actions", déroulez "Travail à
modifier ses caractéristiques • les invités : les invités sont les développeurs qui distance" et sélectionnez "Se reconnecter et
• avant la déconnexion, sous le volet "GDS", dans
Pour modifier les caractéristiques d’un élément manipulent le projet depuis le gestionnaire de le groupe "Autres actions", déroulez "Travail synchroniser". Il suffit alors de réintégrer les élé-
d’un projet géré par le GDS : sources. à distance" et sélectionnez "Se déconnecter ments modifiés.
1. Extrayez l’élément du Gestionnaire de sources. Il n’est pas obligatoire d’être connecté en mode pour une utilisation nomade". Il est conseillé 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é- tionnaire de sources. • restaurer une version d’un projet.
grées. Pour passer du mode maître au mode invité, sous Il permet par exemple de : • voir les historiques et les différences de versions
• multiple : l’élément pourra également être le volet "GDS", dans le groupe "Projet", déroulez • gérer les bases de sources (création, connexion de sources.
extrait par d’autres utilisateurs. Dans ce cas, "Maître / Invité" et sélectionnez "Devenir invité sur à une base de sources). • annuler les extractions (en mode administra-
lors de la réintégration, il sera possible de le projet (et tout réintégrer)".
• gérer les branches. teur).
visualiser les différences entre les différentes Dans ce cas, le gestionnaire de sources propose la
versions de l’élément. • gérer les fichiers et les répertoires présents • purger une base de sources, la sauvegarder, la
réintégration de tous les éléments du projet (y com-
dans un projet de la base de sources (ajouter, restaurer.
3. Validez. L’élément est ouvert. La barre de titre pris le fichier .WWP).
supprimer, renommer des fichiers et des réper- • ajouter des fichiers de tout type dans la base de
indique que l’élément est extrait. Pour passer du mode invité au mode maître, sous toires). sources (.doc, .xls, .pdf, ...).
le volet "GDS", dans le groupe "Projet", déroulez
4.3 Réintégrer un élément • gérer les différents fichiers de la base de
"Maître / Invité" et sélectionnez "Devenir maître sur
sources (extraction, réintégration, partage, ...).
Les éléments extraits du Gestionnaire de sources le projet".
apparaissent entourés d’un trait rouge sous l’édi- Attention : Modification des options du projet :
teur de projet. Tous les utilisateurs du projet (qu’ils soient maîtres
Pour réintégrer un élément, il suffit de sélectionner ou invités) peuvent modifier les caractéristiques
l’option "Réintégrer" dans le menu contextuel de du projet (première page du projet, animation,
l’élément dans le volet "Explorateur de projet". charte de programmation, ...). Ces modifications
Lors de la réintégration d’un élément, un écran pourront être réintégrées dans le gestionnaire
s’affiche permettant d’effectuer les actions sui- de sources uniquement par le maître du projet.
vantes avant de réintégrer l’élément : Les modifications faites par un invité seront per-
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).

100 Partie 3 : Environnement de développement Partie 3 : Environnement de développement 101

 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 :
• Organiser un projet : vous pouvez créer des composants internes pour regrouper les éléments Un composant interne est un regroupement d’élé- Un des avantages du composant interne par rap-
d’un projet, par exemple par fonctionnalité. ments d’un projet. Ce regroupement permet de : port au composant classique est de pouvoir débo-
• Partager des éléments entre différents projets par l’intermédiaire du GDS (Gestionnaire de • Organiser un projet : vous pouvez créer des guer directement le composant interne depuis le
Sources). composants internes pour regrouper les élé- projet qui l’utilise.
ments d’un projet par exemple par fonctionna- Différence avec un composant classique : Un com-
lité. posant interne permet d’intégrer la totalité des
GDS • Partager des éléments entre différents projets : éléments du composant dans l’interface du projet
contenant le composant interne. Il est possible de
Les éléments présents dans un composant
interne peuvent être partagés entre plusieurs manipuler tous les éléments "publics" du compo-
projets par l’intermédiaire du GDS. Pour plus 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
Projet 1 être manipulés directement. Il est nécessaire pour
modifier le composant classique d’ouvrir le projet
correspondant.

1
Projet 2
Création du
composant interne 2  Créer un composant interne

Pages
2.1 Les différentes étapes
2
Remarque : Les éléments du composant interne
Partage du accessibles (ou "public") seront automatiquement
composant interne Pour créer un composant interne :
proposés par la complétion. Ils pourront être uti-
Classes via le GDS 1. Sous le volet "Projet", dans le groupe "Configu- lisés par les éléments présents dans le projet ou
ration de projet", déroulez "Nouvelle configuration" depuis un autre composant interne. Les éléments
et sélectionnez "Composant Interne". L’assistant non accessibles (ou "privés") pourront être manipu-
création d’un composant interne se lance. lés uniquement par un autre élément du compo-
Requêtes
2. Indiquez les caractéristiques du composant sant interne (la complétion proposera ces éléments
interne : "privés" uniquement depuis les éléments d’un com-
• son nom. Le nom du composant interne sera posant interne).
utilisé pour le fichier WCI correspondant à la 5. Indiquez le mode de gestion des données et
description du composant interne. Ce nom des contextes d’exécution. Trois modes de gestion
sera également utilisé pour créer un sous-ré- des données et des contextes d’exécution sont
pertoire dans votre projet contenant tous les disponibles :
Fichier WCI
Sous-répertoire éléments du composant interne. • Utiliser l’analyse du projet ou aucune analyse
(Liste des éléments)
du projet • son libellé. (partage complet) : Le composant interne
<MonComposant> • sa description. accède aux fichiers de données du projet.
3. Indiquez les éléments à intégrer dans le compo- Le composant interne utilise également les
sant interne. Un composant interne peut contenir mêmes contextes d’exécution que le projet.
Les éléments d’un composant interne peuvent être privés ou publics : tous les types d’éléments présents dans un pro- Ce mode correspond au mode par défaut si le
jet : pages, états, modèles, ... composant interne n’utilise pas d’analyse.
• Les éléments privés pourront être manipulés uniquement par les autres éléments du compo-
sant. 4. Indiquez les éléments du composant interne
qui seront directement accessibles dans le code
• Les éléments publics pourront être manipulés par les éléments du projet utilisant le compo- et dans les actions prédéfinies du projet accueil-
sant interne. lant le composant interne.

102 Partie 3 : Environnement de développement Partie 3 : Environnement de développement 103

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

ments.
2 Génération du
composant

3  Partager des composants internes (via le GDS)

Fichier .WDK
Les composants internes peuvent être partagés • soit d’importer dans le GDS un projet contenant
entre projets grâce au GDS. un ou plusieurs composants internes. Les com- Créé dans le répertoire EXE
Pour partager un composant interne via le GDS, il posants internes seront alors automatiquement
est nécessaire que le projet contenant le compo- intégrés dans le GDS.
sant interne soit dans le GDS. Il est possible :
• soit de créer le composant interne à partir d’un

3
projet présent dans le GDS. Le composant Importation du
interne sera automatiquement présent dans le composant
GDS.

Projet WEBDEV Projet WEBDEV Projet WEBDEV

4 Utilisation du
composant 4 Utilisation du
composant 4 Utilisation du
composant

104 Partie 3 : Environnement de développement Partie 3 : Environnement de développement 105

 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 compo- sant. 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. Par d’un projet WEBDEV existant. Il peut être ensuite
exemple, un composant peut correspondre à une intégré dans d’autres projets WEBDEV.
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
Remarques : analyse, ses pages, ses états, ses fichiers de don- effectuée à partir d’un projet contenant tous les étapes :
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-
est possible d’utiliser des composants internes. posant. Il est donc conseillé d’utiliser un projet 2. Création du composant.
ront être manipulés ou non dans le projet WEBDEV 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. 4. Génération du composant.
Le composant est constitué de trois fichiers :
• Dans la suite de ce chapitre, le terme "compo- Le composant peut alors être distribué et réutilisé.
sant" signifie "composant externe". <NomComposant>.WDK
Fichier composant. Contient tous les élé-
Un composant externe peut être redistribué à ments du composant. 3  Distribuer un composant externe
d’autres développeurs WEBDEV (gratuitement ou Ce fichier est nécessaire à l’intégration du
non). Ces développeurs pourront ainsi intégrer composant dans un projet.
simplement la fonctionnalité proposée par le com- Ce fichier doit également être livré dans 3.1 Présentation 3.2 Utilisation directe du composant externe
posant dans leur site. Le composant sera donc la procédure d’installation du site utilisant
intégré au site et distribué avec le site. Lorsque le composant a été créé, testé et généré, il Le composant est créé et utilisé sur le même poste.
le composant.
peut être mis à disposition des développeurs. Plu- Lors de l’importation du composant dans un projet
Lors de la création du composant, l’auteur spéci- <NomComposant>.WDI sieurs méthodes sont possibles :
fie : WEBDEV, il suffit de sélectionner le fichier WDI cor-
Description du composant (uniquement • utilisation directe du composant respondant au composant. Ce fichier est disponible
• la provenance des éléments du composant. Le Exemple : le composant est directement utilisé dans le répertoire EXE du projet composant.
développeur peut construire un composant à pour le développement de sites).
Ce fichier est nécessaire à l’intégration du sur le poste du développeur qui a créé le com- Attention : Si le composant utilise des fichiers
partir d’un projet WINDEV lié à un projet WEB- posant.
DEV et / ou un projet WINDEV Mobile. composant dans un projet. spécifiques (fichiers de données, fichiers texte, ...),
Ce fichier ne doit pas être livré dans la • distribution simple, en fournissant directement il est nécessaire de créer un fichier <NomCompo-
• les éléments du composant visibles ou non par les fichiers nécessaires. sant>.WDO après la génération du composant. Ce
procédure d’installation du site utilisant le
l’utilisateur du composant. Les éléments visibles Exemple : le composant est destiné à être utilisé fichier contient la liste des fichiers externes (fichiers
composant.
seront accessibles dans le volet "Explorateur de à l’intérieur d’une même société, par plusieurs de données, fichiers texte, ...) utilisés par le com-
projet" ou par programmation. <Nom du composant>.WDO (fichier optionnel) développeurs. Dans ce cas, les fichiers néces- posant.
• le mode d’utilisation du composant (com- Fichier optionnel saires peuvent être copiés sur un disque réseau. Ces fichiers référencés dans le fichier <NomCompo-
ment utiliser le composant, les paramètres Fichier au format texte contenant la liste • procédure d’installation du composant (avec sant>.WDO seront automatiquement recopiés dans
permettant d’accéder aux fonctionnalités du des différents éléments livrés en plus une procédure d’installation du composant iden- le répertoire EXE du projet utilisant le composant
composant, ...). Une documentation succincte avec le composant (fichiers de données, tique à celle utilisée pour les applications). WEBDEV.
(à compléter) est automatiquement générée et fichiers .INI, ...). Consultez Le fichier WDO. Exemple : ce mode de distribution est conseillé
associée au composant. si le composant est destiné à être vendu ou à
Remarque : Des exemples de composants sont être distribué à grande échelle, avec des mises
livrés en standard avec WEBDEV. Ces composants à jour régulières.
sont accessibles depuis la fenêtre de bienvenue.

106 Partie 3 : Environnement de développement Partie 3 : Environnement de développement 107

 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 plusieurs
Les fichiers sont copiés dans un répertoire spéci- composants se fait de la même façon que le dé- 1. La recompilation du projet hôte
fique. Ce répertoire peut par exemple être présent ODBC pour HFSQL, ...).
ploiement d’un site classique : sous le volet "Pro- Recompilez le projet qui utilise le composant et
sur un serveur réseau. • la mise à jour automatique des fichiers de don- jet", dans le groupe "Génération", déroulez "Dé- redistribuez le site avec le composant. Dans ce cas,
Lors de l’importation du composant dans un pro- nées utilisés par le composant (si nécessaire). ployer le site". aucun problème de version ou de compatibilité ne
jet 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 WEB- site" et sélectionnez "Générer et déployer le site". composant et de l’application. modifiés.
DEV (fichier <NomComposant>.WDK et fichier 2. Dans les différents plans de l’assistant, spéci- • Incompatibilité de la nouvelle version avec les
<NomComposant>.WDI). fiez : 5.2 Mise à jour des composants et des sites anciennes versions du composant.
• Si nécessaire, les fichiers spécifiques manipulés • le support d’installation du composant. déployés • ...
par le composant (fichiers de données, fichiers • 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
d’initialisation, ...) ainsi que le fichier <NomCom- d’installation. site déployé, il est possible d’installer sur le poste Fournissez directement une mise à jour du compo-
posant>.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 WEB- Rappel : Lors de la création de l’installation d’une
DEV. Ce programme installe tous les fichiers néces- application, les fichiers nécessaires sont créés
saires à l’utilisation du composant dans le réper- dans le répertoire INSTALL du projet. 6  Modifier un composant externe
toire spécifié par l’utilisateur.

6.1 Présentation Dans tous les cas, après cette modification, le com-

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

108 Partie 3 : Environnement de développement Partie 3 : Environnement de développement 109

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

110 Partie 3 : Environnement de développement Partie 3 : Environnement de développement 111

 Lors de l’intégration du composant, l’arborescence Diffusion d’un composant avec WDO
Modes de
Contenu
spécifiée dans le WDO sera conservée et repro-
duite dans le répertoire EXE du projet. Pour plus de
détails, consultez le paragraphe "Utiliser un compo-
Pour diffuser un composant utilisant un fichier
WDO :
• Si vous n’utilisez pas de procédures d’instal-
génération
sant externe dans un site", page 108. lation pour le composant, il est nécessaire de
Exemple : Le composant "Code Postal" utilise un fournir : Au-delà des sites Web, WEBDEV vous permet également de générer de nombreux autres types de
fichier de données "Cedex" (fichiers Cedex.fic et Ce- • le fichier WDK, projets.
dex.ndx). Dans le projet de création du composant,
ce fichier de données est présent dans le répertoire • le fichier WDI,
EXE du projet. • le fichier WDO, Sites
Pour que le composant soit livré et installé avec le • tous les fichiers nécessaires référencés dans Les sites sont le mode de génération le plus fréquemment utilisé. WEBDEV
fichier de données, il faut créer le fichier WDO dans le fichier WDO.
permet de générer :
le répertoire EXE du projet de création du compo- • Si vous utilisez une procédure d’installation pour
sant. Ce fichier doit contenir les lignes suivantes : le composant, le fichier WDO sera automatique- • des sites statiques ou dynamiques (Session ou AWP).
.\CEDEX.Fic ment créé lors de la création de la procédure • des sites PHP.
.\CEDEX.NDX d’installation du composant.
Il suffit pour cela dans l’assistant de :
1. Demander la modification des fichiers à instal-
Bibliothèques
ler (option "Modifier la liste des fichiers à installer" Une bibliothèque est un fichier unique rassemblant plusieurs éléments d’un
dans les "modules additionnels"). projet WEBDEV : des pages, des états, etc. Il est possible de générer des
2. Sélectionner les fichiers supplémentaires à bibliothèques autonomes pouvant être utilisées par d’autres sites.
installer.
Le fichier WDO sera automatiquement créé et ins-
tallé avec le composant.

Composants externes
Les composants externes sont des briques applicatives permettant de par-
tager une ou plusieurs fonctionnalités spécifiques entre différentes applica-
tions. Un composant généré avec WINDEV peut également ê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 Webservice (éga-
lement 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 proto-
coles standards de communication HTTP, SOAP ou REST.
Remarque : Un Webservice doit être déployé sur un Serveur d’Application
WEBDEV pour être utilisable.

112 Partie 3 : Environnement de développement Partie 3 : Environnement de développement 113

 Génération PHP en pratique Remarque : Il est conseillé de créer un nouveau
projet WEBDEV pour développer un site PHP plutôt
La compilation d’un site PHP permet de :
• connaître les erreurs de programmation WLan-
que de transformer un site WEBDEV en PHP. gage.
2.2 RAD PHP • visualiser les champs, événements, fonctions
1  Présentation WLangage non disponibles en génération PHP.
Comme sur tout projet associé à une analyse, vous Ces erreurs apparaissent en violet dans le volet
pouvez utiliser le RAD pour générer les pages de "Erreurs de compilation".
WEBDEV permet de générer des sites PHP sans Remarque : Pré-requis : votre site. Pour plus de détails sur les éléments WEBDEV non
pour autant connaître le langage PHP. Le déve- • Serveurs PHP 5 : Version minimale conseillée : Le RAD prend en compte toutes les spécificités de disponibles dans un site PHP, consultez l’aide en
loppement du site peut se faire complètement version 5.3. la génération PHP (champs, événements, fonctions ligne.
en WLangage, comme pour un site WEBDEV clas- • Serveurs PHP 7 : Version minimale conseillée : utilisables dans un site PHP généré depuis WEB-
sique. Il est toutefois possible de saisir votre propre version 7.0.22. DEV). 2.4 Déployer un site PHP
code PHP (code serveur).
• Serveurs PHP 8 : Version minimale conseillée : Le déploiement d’un site PHP se fait de la même
2.3 Test d’un site PHP sous l’éditeur
1.1 Qu’est-ce qu’un site PHP ? version 8.0.10. manière que pour un site statique. Lors de la créa-
• Base de données MySQL nécessaire. Lors du test d’un site PHP, le site est compilé en tion de la procédure d’installation, WDDéploie se
Un site PHP est compilé en PHP. Si ce site mani- PHP et lancé dans votre navigateur. Vous visualisez lance et vous assiste dans la mise en place de
pule une base de données, l’accès à cette base 1.2 Pourquoi développer un site PHP avec directement les pages PHP générées par WEBDEV. votre site PHP.
se fera par un driver ODBC (MyODBC, ODBC pour WEBDEV ? Rappel : Un moteur PHP est nécessaire sur le poste
Oracle, ...) ou via le Connecteur Natif pour MySQL Pour plus de détails, consultez l’aide en ligne.
de développement.
(également appelé Accès Natif). Pour certains sites, surtout de petits sites, il peut
Concernant le driver ODBC, il est spécifique à être pratique de désirer réaliser ces sites en PHP
chaque base de données (et peut être trouvé sur le afin de faciliter leur hébergement gratuit. Vous en
site de l’éditeur de la base de données). avez désormais la possibilité avec WEBDEV.
Un site PHP est composé de pages ".php" et néces- Remarque : Le nombre de fonctions WLangage uti-
site un moteur PHP pour être lancé. lisables dans un projet PHP est limité dans cette
version. Ce nombre de fonctions est amené à
Pour compiler (en PHP) un projet PHP avec WEB- croître régulièrement.
DEV, il est nécessaire d’installer sur le poste de
développement un moteur PHP. De nombreux mo-
teurs PHP sont disponibles sur Internet. Il est né-
cessaire d’en télécharger un et de l’installer. Vous
avez par exemple EasyPHP (http://www.easyphp.
org/). Ce moteur est donné à titre indicatif et vous
pouvez utiliser tout autre moteur PHP.

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.

114 Partie 3 : Environnement de développement Partie 3 : Environnement de développement 115

 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’utiliser le Une exigence est un besoin sur ce qu’un produit (ou un service) devrait faire.
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 projet de
• Gérer le suivi d’un projet (planning des tâches à réaliser), 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/Serveur) : la Il suffit pour cela de :
base de données des Centres de Contrôle. Cette base de données est partagée par de nombreux • définir les différents intervenants du projet.
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
- Qualité
Le chef de projet peut à tout moment suivre l’état d’avancement du projet.
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

Messagerie Catalogue d’images

Règles Métier Tests automatiques
autonome (WDBAL) (images personnelles) Règles Métier Volet des
Règles Métier

Remarque : Lors de l’installation de WEBDEV, le programme d’installation propose de choisir une 3 Suivi des exigences (Centre de Suivi de Projets) :

des options suivantes :

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

116 Partie 3 : Environnement de développement Partie 3 : Environnement de développement 117

 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 planning WEBDEV permet de gérer des règles métier. Une règle métier permet de définir un mode opéra-
des tâches. Ces tâches peuvent être liées à des exigences et correspondre à plusieurs projets. toire précis ou de préciser un traitement particulier. Par exemple : le calcul d’un taux de TVA avec
ses particularités, les règles de changement de statut d’un client ; la formule de calcul d’un mon-
tant 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

Après avoir listé l’ensemble des tâches d’un projet, le Centre de Suivi de Projets s’occupe de tout.
Application des Règles
La saisie du temps passé est quasi automatique, elle ne demande aucune action spécifique et ne
Métier dans le projet
génère aucune contrainte particulière.

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 tâche peut être reliée à un élément du projet (fenêtre, état, ...). Chaque fois que l’élément Utilisation du site
concerné est ouvert, le temps passé sur cet élément est décompté et mémorisé dans le Centre
de Suivi de Projets. Inversement, depuis la liste des tâches, il est possible d’ouvrir automatique-
ment l’élément correspondant à la tâche que vous voulez réaliser.
Chaque développeur peut également visualiser directement sa liste de tâches dans le volet Une règle métier peut être simple ou élaborée.
"Centre de Suivi de Projets" présent sous l’éditeur.
Les règles métier peuvent provenir :
• du cahier des charges (correspondant aux exigences).
• de suggestions faites par les utilisateurs de l’application.

Pendant le développement, les règles métier définies pour le projet sont affichées directement
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 actuelle-
ment réalisé.

118 Partie 3 : Environnement de développement Partie 3 : Environnement de développement 119

 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 fonctionne-
ment. 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éve-
loppeur. 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
1  Présentation
WEBDEV permet de créer ces neuf types de modèle UML :
• 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 de vue de est de créer des applications optimisées, capables UML :
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 donné. leurs utilisateurs. • Diagramme de cas d’utilisation.
• Diagramme de composants : décrit l’architecture physique et statique d’une application infor- La modélisation d’une application permet de spé- • Diagramme d’objet.
cifier la structure et le comportement attendus
matique. • Diagramme de composants.
d’un système, de comprendre son organisation, de
• Diagramme d’activité : représente le comportement d’une méthode ou le déroulement d’un déceler les possibilités de simplification et de réuti- • Diagramme d’activité.
cas d’utilisation. lisation et de gérer les risques encourus. • Diagramme de séquences.
• Diagramme de séquences : représente l’ordre chronologique des messages envoyés et reçus Un modèle est la simplification de la réalité. Il per- • Diagramme de collaboration.
par un ensemble d’objets. met de mieux comprendre le système à développer. • Diagramme d’états-transitions.
• Diagramme de collaboration : présente l’organisation structurelle des objets qui envoient et Un diagramme est la représentation graphique • Diagramme de déploiement.
reçoivent des messages. d’un ensemble d’éléments qui constituent un sys- Ce chapitre ne fait que présenter de manière glo-
tème. Pour visualiser un système sous différentes bale la modélisation UML. Pour plus de détails sur
• Diagramme d’états-transitions : présente un automate à états finis. perspectives, le langage UML (Unified Modeling le langage UML, nous vous conseillons de consulter
• Diagramme de déploiement : montre la répartition des matériels (les nœuds) utilisés dans un Language) propose neuf diagrammes, représen- des ouvrages spécifiques.
système et l’association des programmes exécutables à ces matériels. tant chacun un état du système.

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.

124 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 125

 • Privé : l’élément est visible uniquement par • le développeur puisse implémenter ces élé- • Généralisation : relation permettant d’organi- • objet composite : représente de manière
la classe. ments. ser les éléments selon une hiérarchie. 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- Par exemple : 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- • l’acteur Client peut être de deux types : seurs, des boutons, ...
• Association : Relation structurelle entre gramme de cas d’utilisation. Client individuel ou Client d’entreprise. • lien : représente les relations entre les différents
classes. Par exemple, la classe Commande • la vérification de l’identité d’un utilisateur objets.
est liée aux classes Produit et Client. Un peut être effectuée de deux façons : saisie
Client peut passer plusieurs Commandes. du mot de passe ou vérification de l’em- 2.4 Diagramme de composants
Une commande est constituée de plusieurs preinte digitale. 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,
• Dépendance : Relation d’utilisation qui exé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
générale (parent) et une classe spécifique (en-
l’application. Par exemple, une personne qui tra-
fant) qui en dérive. Par exemple, les classes
vaille dans une banque sera le Gestionnaire de • Paquetage : divise et organise la représentation
Bateau à voile et Bateau à moteur sont déri-
prêts. Si cette personne à un compte dans cette du diagramme (de la même manière que les
vées de la classe Bateau.
banque, elle jouera aussi le rôle de Client. répertoires organisent les fichiers). Chaque
• Cas d’utilisation : décrit une séquence d’actions paquetage peut contenir des acteurs et des cas
exécutées par l’application. Par exemple, Passer d’utilisation.
une commande, Saisir une facture, Créer une
nouvelle fiche client, ... 2.3 Diagramme d’objets Un diagramme de composants est composé des
Un cas d’utilisation décrit ce que fait une appli- Un diagramme d’objets représente un ensemble éléments suivants :
cation mais ne précise pas comment l’applica- d’objets et leurs relations à un moment donné. • module : représente les différents éléments phy-
tion le fait. Un diagramme d’objets est utilisé pour montrer siques constituant une application informatique.
• Relation : décrit le comportement des acteurs un contexte (avant ou après une interaction entre Par exemple : un fichier, une librairie, ...
par rapport aux cas d’utilisation. Trois types de objets par exemple). Un module peut être représenté :
relations existent : Par exemple, le diagramme suivant présente une • soit par une spécification qui montre l’inter-
• Association : Relation structurelle entre deux partie de la structure générale des motos : face du module. Cette spécification peut être
éléments reliés. générique dans le cas de classes paramé-
• Dépendance : Relation qui établit qu’un trables.
é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
WEBDEV utilisées dans votre application. de la Saisie du mot de passe. classes.
2.2 Diagramme de cas d’utilisation Un diagramme d’objets est composé des éléments
suivants :
Un diagramme de cas d’utilisation permet de visua- • objet : représente une instance d’une classe.
liser le comportement d’un système de telle sorte Remarque : Si un diagramme de classes est
que : ouvert, il est possible de créer un objet à partir
• l’utilisateur puisse comprendre comment utiliser d’une classe présente dans ce diagramme (drag
chaque élément. and drop à partir du volet "Analyse UML").

126 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 127

 2.5 Diagramme d’activité montant une ligne en pointillé. Cette ligne repré- 2.8 Diagramme d’états-transitions • historique : représente le dernier état actif d’un
sente la durée de vie de l’objet. Par exemple : super-état.
Un diagramme d’activité représente le comporte- "Appelant", "Appelé", ... Un diagramme d’états-transitions présente un
ment d’une méthode ou le déroulement d’un cas automate à états finis. Il permet ainsi de décrire • souche : permet de symboliser les états conte-
d’utilisation. • période d’activation d’un objet : Sur la ligne les changements d’états d’un objet ou d’un com- nus dans un super-état. Il est ainsi possible de
de vie d’un objet, il est possible d’insérer des posant. relier ces états à d’autres états n’appartenant
Par exemple, le diagramme suivant présente le périodes d’activation de l’objet. Ces périodes pas au super-état.
déroulement d’un barrage : représentent les moments où l’objet est actif. Un état se caractérise par sa durée et sa stabilité.
• transition : représente le passage d’un état à
• message : représente, grâce à des flèches Une transition représente le passage instantané un autre.
horizontales, les messages échangés entre les d’un état vers un autre.
différents objets. Ces flèches sont orientées Une transition est déclenchée : 2.9 Diagramme de déploiement
de l’émetteur du message vers le destinataire. • soit par un événement. Un diagramme de déploiement montre la répar-
L’ordre d’envoi des messages est donné par la • soit automatiquement lorsqu’aucun événement tition physique des matériels (les nœuds) utilisés
position des flèches sur l’axe vertical. déclencheur n’est spécifié. dans un système et l’association des programmes
Par exemple : "Décroche", "Sonnerie", ... Par exemple, le diagramme suivant présente les exécutables à ces matériels.
Par exemple, le diagramme suivant représente le différentes étapes d’une machine à laver les voi- Par exemple, le diagramme suivant présente les
début d’une communication téléphonique : tures : différents matériels utilisés dans une entreprise :
Un diagramme d’activité est composé des élé-
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".
• soit en indiquant les activités à effectuer en 2.7 Diagramme de collaboration
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 à l’objet nisation structurelle des objets qui envoient et éléments suivants :
qui réalise ces activités. Par exemple, les activi- reçoivent des messages. • classe de nœuds : représente une classe de res-
tés "Commander" et "Payer" sont rattachées à Un diagramme d’états-transitions est composé des
Par exemple, le diagramme suivant montre l’utilisa- éléments suivants : source matérielle. Par exemple : un serveur, un
l’objet "Client"; les activités "Enseigner", "Contrô- tion d’un ascenseur par une personne : PC, une imprimante, ...
ler les connaissances" sont rattachées à l’objet • état : représente la valeur des attributs d’un
objet à un instant donné. • instance d’un nœud : représente une ressource
"Enseignant". 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
chronologique des messages envoyés et reçus par Un diagramme de collaboration est composé des
un ensemble d’objets. éléments suivants :
Un diagramme de séquence est composé des élé- • objet : représente les différents objets utilisés.
ments suivants : • acteur : représente un élément externe du sys-
• objet : représente les différents objets utilisés. tème. Par exemple une personne.
Chaque objet est représenté par un carré sur- • message : représente les messages échangés
entre les différents objets.
128 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 129
 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.
• superviseur, pouvant configurer les utilisateurs et leurs droits. selon les fonctions de l’utilisateur. • les directeurs commerciaux ont accès à toutes
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
d’action doit donc être plus ou moins limité. WEBDEV, il suffit d’intégrer le groupware utilisateur
Prenons un exemple simple : lors de la mise en à votre site. Quelques clics de souris suffisent à
Utilisateur place d’une gestion commerciale, l’application pro- transformer une application classique en une ap-
1 Lancement du site
pose les fonctionnalités suivantes :
• Consultation du tarif,
plication gérant de nombreux niveaux d’accès. La
mise en place est instantanée.
• Modification du tarif, Lors de l’exécution du site, le responsable pourra

3
créer des utilisateurs (identifiés par leur login et
2 Utilisation • Saisie des commandes,
Identification
du site
leur mot de passe) et leur donner accès à l’une ou
• Saisie des clients. l’autre des fonctionnalités du site.
Selon l’utilisateur les accès possibles sont diffé- Remarque : Le groupware utilisateur est disponible
rents. Quelques exemples : dans les sites dynamiques WEBDEV exécutés sous
Utilisation Vérification • les secrétaires peuvent consulter le tarif et créer
des droits des droits
Windows ou Linux. Le groupware utilisateur n’est
des commandes. pas disponible dans les sites statiques, PHP, AWP
ou Ajax.
Superviseur
HFSQL Classic,
Client/Serveur,
Accès Natif,
LDAP
2  Comment fonctionne le groupware utilisateur ?
Base de données
du Groupware Utilisateur Un site utilisant le groupware utilisateur a deux La configuration du groupware consiste à créer des
niveaux d’utilisation : utilisateurs, des groupes et d’associer des utilisa-
Configuration des • le niveau utilisateur. teurs aux groupes, à gérer les droits de chaque uti-
droits et des utilisateurs lisateur (ou groupe) sur chacune des pages du site.
4 Menu du • le niveau superviseur.
Les droits sont définissables au niveau des options
superviseur
2.1 Le niveau utilisateur de menu, des groupes de champs et des champs.
Le superviseur peut rendre ces éléments grisés,
L’utilisateur se connecte à l’application grâce à une inactifs ou invisibles. Ces configurations sont prio-
page de login et accède aux fonctionnalités qui lui ritaires sur toute configuration effectuée dans le
sont autorisées. programme.
2.2 Le niveau superviseur Pour plus de détails sur la configuration du
groupware par le superviseur, consultez le chapitre
Historique Le superviseur se connecte à l’application par "Paramétrer le site utilisant le groupware utilisateur
des connexions une page de login et accède à un menu avancé lui classique", page 134.
permettant de configurer les utilisateurs et leurs Remarque : Toutes les informations concernant les
droits, ou bien de lancer l’application. utilisateurs et leurs droits sont stockées dans des
Le menu avancé permet au superviseur de : fichiers de données au format HFSQL.
• lancer le site.
• configurer le groupware.

130 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 131

 3  Mise en place du groupware utilisateur Pour plus de détails sur ces fichiers de données Dans ce mode, une option supplémentaire est dis-
et leur configuration (répertoire d’installation, ...), ponible : Fenêtre de login uniquement (pas de ges-
consultez l’aide en ligne. tion des droits).
3.1 Ajouter le groupware utilisateur dans un gpwOuvre est utilisée. Cette option permet • Si cette option est cochée, aucun fichier de
site d’exécuter le code d’initialisation du projet par 3.3 Options spécifiques au groupware utili- données du groupware ne sera créé. Si le
exemple, avant d’ouvrir la page de login. Il est sateur classique lancement est automatique, la fenêtre de
Pour mettre en place le groupware utilisateur dans
ainsi possible par exemple d’afficher une page Si le groupware utilisateur classique est utilisé, login demandera à l’utilisateur de s’identi-
un site WEBDEV, une seule option suffit : sous le
demandant la langue d’exécution du site. l’onglet "Fichiers" permet de configurer : fier. Si l’utilisateur est bien enregistré dans
volet "Projet", dans le groupe "Projet", cliquez sur
"Groupware Utilisateur". • Lancement manuel par un modèle de champs : • le type de base de données utilisé (ces options l’annuaire LDAP, l’application se lancera,
Un modèle de champs est inclus dans votre pro- sont prises en compte uniquement en mode sinon elle se fermera. Il n’est pas possible à
La fenêtre de paramétrage du groupware utilisa-
jet. Ce modèle de champs permet de lancer la "Lancement automatique"). un superviseur de paramétrer les droits sur
teur permet de définir :
connexion au groupware depuis n’importe quelle les fenêtres.
• Le type du groupware utilisateur et son mode de page de votre site. • le type d’identification :
lancement. • Si cette option n’est pas cochée, seuls les
• Identification gérée par le groupware utilisa-
3.2 Options du groupware utilisateur (mode utilisateurs présents dans l’annuaire LDAP
• Le type de personnalisation. teur de WINDEV.
classique et mode BaaS) pourront se connecter. Le paramétrage des
• Le type de base de données et l’emplacement • Identification à partir d’un annuaire LDAP. droits sur les fenêtres est disponible.
des fichiers de données du groupware utilisateur Plusieurs modes de personnalisation du groupware
Type de base de données Pour plus de détails, consultez l’aide en ligne.
(Groupware utilisateur classique). utilisateur sont disponibles :
En mode "groupware utilisateur classique", le L’onglet "OAuth" permet d’autoriser l’utilisation
• Le mode d’identification de l’utilisateur • Pas de personnalisation : toute la programma-
groupware utilisateur utilise plusieurs fichiers de d’un service de connexion spécifique. Pour le
(Groupware utilisateur classique). tion du groupware utilisateur est automatique-
données spécifiques. Ces fichiers de données service spécifié, il est nécessaire de spécifier les
• L’utilisation d’un service de connexion spéci- ment intégrée à votre site. Aucune personnali-
permettent notamment de gérer les utilisateurs, identifiants correspondants (fournis lors de l’enre-
fique (Groupware utilisateur classique). sation n’est possible. Le gabarit du projet est
les groupes, les droits et les éléments du site. Le gistrement de l’application auprès du service sélec-
• Le paramétrage du mode BaaS. automatiquement appliqué à toutes les pages
groupware utilisateur classique peut être utilisé : tionné).
utilisées par le groupware utilisateur.
Type du groupware utilisateur Ce mode d’intégration permet de suivre auto- • soit avec des fichiers de données HFSQL Clas-
matiquement les éventuelles évolutions du sic. Dans ce cas, un clic sur le lien "Répertoire 3.4 Options spécifiques au groupware utili-
Le groupware utilisateur intégré dans un site WEB-
groupware utilisateur. par défaut" permet de spécifier si nécessaire sateur BaaS
DEV peut correspondre :
l’emplacement des fichiers de données.
• au groupware utilisateur classique : Cette • Personnaliser l’UI de connexion (login, inscrip- Lors de l’utilisation d’un groupware utilisateur de
tion) : toute la programmation du groupware • soit avec des fichiers de données HFSQL Client/ type BaaS, l’onglet "BaaS" et l’onglet "Email" per-
option permet d’intégrer le groupware utilisateur
utilisateur est automatiquement intégrée à votre Serveur. Dans ce cas, un clic sur le lien "Cliquez mettent de définir les options spécifiques.
dans votre site. Ce groupware utilisateur sera
site. L’UI de connexion est modifiable. La page ici pour saisir les paramètres du serveur" per-
associé uniquement à votre site, et la définition L’onglet "BaaS" permet de définir :
correspondante est ajoutée aux pages de votre met de définir les paramètres d’accès à la base
des droits sera également effectuée depuis le • la localisation du serveur d’application du
site. Il est possible de personnaliser cette page. de données HFSQL Client/Serveur, ainsi que le
site. groupware utilisateur. Il est possible de sélec-
Ce mode d’intégration permet de suivre auto- répertoire des fichiers.
• au groupware utilisateur BaaS (Backend as tionner une plateforme PCSCloud ou un serveur
a Service) : Cette option permet d’utiliser un matiquement les éventuelles évolutions du Type d’identification Réseau ou Internet,
groupware utilisateur BaaS (Backend as a groupware utilisateur. Le groupware utilisateur classique propose plu- • le mode de gestion des comptes utilisateurs,
Service) avec une gestion des droits effectuée • Personnalisation complète (uniquement en sieurs types d’identification des utilisateurs : • les URL des sites d’administration.
via un serveur. Dans ce cas, l’installation d’un mode Groupware utilisateur classique) : toute la • Identification entièrement gérée par le
serveur HFSQL et d’un Serveur réservé WDBaaS programmation du groupware utilisateur est au- L’onglet "Email" permet de spécifier les paramètres
groupware utilisateur : du serveur d’envoi d’emails et de saisir les textes
est nécessaire. tomatiquement intégrée à votre site via un com- Les login et mot de passe sont enregistrés dans
posant interne. Toutes les pages nécessaires des emails envoyés pour valider l’inscription ou en
Selon le type de groupware utilisateur choisi, les les fichiers de données du groupware utilisateur. cas de mot de passe oublié.
options peuvent être différentes. à la gestion du groupware utilisateur (login et
gestion des utilisateurs) sont automatiquement • Identification à partir d’un annuaire LDAP ou
Lancement du groupware utilisateur ajoutées à votre projet. Vous pouvez ainsi per- Active Directory : 3.5 Tester le site (groupware utilisateur clas-
sonnaliser totalement toutes les pages utilisées Si votre client utilise un annuaire LDAP au sein sique)
Plusieurs modes de lancement du groupware utili-
par le groupware utilisateur. de son entreprise, il est possible de brancher le Lors du test d’un site gérant le groupware utilisa-
sateur sont disponibles :
Le détail des différentes pages du groupware groupware utilisateur sur cet annuaire. Il suffit teur classique, la première page apparaissant est
• Lancement automatique : La page de login du de cliquer sur le lien "Cliquer ici pour saisir les
groupware utilisateur est lancée avant toute utilisateur est présenté dans l’aide en ligne. automatiquement la page de login (quelle que soit
paramètres du serveur" pour préciser les carac- la première page définie dans votre site).
autre page du site. Le code d’initialisation du L’option "Login automatique pour le mode test" téristiques de l’annuaire LDAP (serveur, port,
projet est exécuté après l’ouverture et la valida- permet d’indiquer le login et le mot de passe à utili- base, ...). Ainsi, le compte et le mot de passe Par défaut, un seul utilisateur existe : le supervi-
tion de la page de login. ser lors d’un test de la page ou du projet (en mode présents dans l’annuaire LDAP seront automati- seur. Pour se connecter en tant que superviseur, il
• Lancement manuel par programmation : La GO comme en mode "Test automatique"). Ces infor- quement demandés à l’utilisateur. suffit de saisir les informations suivantes dans la
page de login ne sera ouverte que si la fonction mations seront utilisées notamment si un test auto- page de login :
matique est réalisé sur le projet. • Nom : SUPERVISEUR

132 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 133

 • Mot de passe : SUPERVISEUR 3.6 Installer un site utilisant le groupware Il est possible de définir l’utilisateur comme étant Pour chaque association utilisateur / page, il est
Vous pouvez alors soit tester votre site, soit configu- utilisateur classique un superviseur du site. possible de définir un état spécifique pour tous les
rer le fonctionnement du groupware. Il est bien entendu possible de modifier ou de sup- éléments de la page.
L’installation d’un site utilisant le groupware utilisa-
Remarques : teur classique se fait comme pour tout autre site : primer un utilisateur. La suppression d’un utilisa- Les éléments gérés dans les pages, les pages in-
• Pour que la première page de votre site ne soit sous le volet "Projet", dans le groupe "Génération", teur permet soit de supprimer entièrement l’utilisa- ternes et les modèles de pages sont les suivants :
pas la page de login, cochez l’option "Lance- il suffit de cliquer sur "Déployer le site". teur, soit de supprimer uniquement ses droits. • les champs, les groupes de champs,
ment manuel par programmation" dans l’onglet Un écran spécifique au groupware utilisateur clas- Les utilisateurs peuvent être rassemblés en • les options de menu.
"Général" des options du groupware Utilisateur. sique permet de configurer l’emplacement des groupes. Les états disponibles pour chaque élément sont
Il suffira d’utiliser la fonction du WLangage fichiers de données propres au groupware utilisa- Un utilisateur peut être associé à plusieurs les suivants :
gpwOuvre pour afficher la page de login. teur. groupes. • Défaut : le comportement de l’élément corres-
• Les pages de gestion du groupware utilisateur Remarques : Remarques : pond au comportement par défaut, défini dans
sont exécutées avant le code d’initialisation du • Si vous avez paramétré les fichiers de données • Il est conseillé de changer le mot de passe du l’application.
projet. du groupware utilisateur pour votre client, il est superviseur dès la première utilisation de l’appli- • Inactif : l’élément est affiché mais toute saisie
• La première page de votre site définie dans nécessaire de les sélectionner lors de la prépa- cation. est impossible.
le projet sera lancée après la page de login ration de l’installation. Il est donc nécessaire • Si vous utilisez un annuaire LDAP, vous avez la • Grisé : l’élément est affiché mais grisé. Toute
(lorsque l’utilisateur n’est pas le superviseur). de personnaliser la liste des fichiers de l’instal- possibilité d’importer les utilisateurs présents saisie est impossible.
• Pour ne pas lancer le groupware utilisateur lors lation. dans l’annuaire pour gérer les droits de ces • Invisible : l’élément n’est pas affiché.
des tests du site, il suffit de sélectionner l’option • Si vous n’avez pas paramétré les fichiers du utilisateurs.
"Inactif" dans l’onglet "Général" des options du groupware, lors du premier lancement de l’appli- 4.3 Afficher les statistiques
groupware utilisateur. cation, seul l’utilisateur Superviseur existera 4.2 Gérer les droits
Si vous rebranchez le groupware utilisateur Pour chaque site, il est possible d’obtenir des sta-
dans le site. Pour chaque utilisateur (ou groupe d’utilisateurs),
par la suite, les fichiers de données utilisés tistiques d’utilisation selon l’utilisateur, pour une
Conseil : si vous ne configurez pas les différents le superviseur peut gérer leurs droits sur les diffé- période spécifique.
précédemment pour le groupware utilisateur ne niveaux d’utilisation du groupware utilisateur pour rents éléments des pages du projet.
seront pas effacés. vos clients, il est conseillé de leur fournir un docu-
ment reprenant tous les champs de vos pages pour
obtenir une configuration optimisée. 5  Conseils pour un site gérant le groupware utilisateur

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

134 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 135

 Les 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 :

1 Choix des langues

- Projet
sieurs langues. Les différentes langues du site
seront prises en compte lors des différentes étapes
• Si le système d’exploitation du poste en cours
gère plusieurs langues (Hébreux, Arabe,
- Analyse
du développement. Grec, ...), lors de la saisie des traductions dans
Pour développer un site mutlilingue, les étapes ces langues, l’alphabet correspondant sera
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

2 Traduction des éléments

du projet
lyse.
2. Saisie des différents éléments du projet (pages,
de gérer cette fonctionnalité dans les pages du
groupware utilisateur et dans les pages de ges-
code, ...) dans les différentes langues du projet. tion automatiques des erreurs HFSQL. Pour plus
- Traduction directe
- Traduction via WDMSG, WDINT, 3. Détermination de la langue du projet par pro- de détails, consultez l’aide en ligne.
WDTRAD, ... • La gestion de l’Unicode est disponible dans les
grammation.
4. Gestion des alphabets spécifiques dans les fichiers de données HFSQL et dans les champs
fichiers de données. des pages.

3 Programmation Fichiers de données 5. Création de la bibliothèque et du programme

d’installation.
- 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  Choix des langues gérées par le projet et l’analyse
(fonction ChangeAlphabet) création des fichiers (fonction HCréation*)
- Prise en compte de l’alphabet lors de
la réindexation (fonction HRéindexe)
2.1 Langues gérées par le projet Options linguistiques
Les différentes langues gérées par le projet sont L’onglet "Langues" de la description du projet per-
définies dans la description du projet : met également de définir toutes les options spéci-
4 Bibliothèque
Choix des langues de la
1. Sous le volet "Projet", dans le groupe "Projet",
cliquez sur "Description". La fenêtre de description
fiques à une langue : nombre, monétaire, date, ...
Par défaut, les paramètres utilisés sont ceux
bibliothèque du projet s’affiche. définis dans les options linguistiques de Windows
(accessibles depuis le panneau de configuration de
2. Dans l’onglet "Langues", il est possible d’ajou-
Windows).
ter ou de supprimer les langues gérées par le
projet. Lors de la création d’un champ de saisie ou d’une

5 Programme d’installation
- Langues proposées
Les différentes langues sélectionnées seront pro-
posées pour toutes les informations des différents
colonne d’un champ Table affichant des données
de type numérique (nombre, monétaire, date,
- Traduction du programme
heure, durée, ...), le masque de saisie utilisé sera
éléments ou objets pouvant être traduites (libellés
d’installation automatiquement le masque défini dans les op-
des champs, options de menus, messages d’aide
tions de langue du projet. Cette option est dispo-
associés à un champ, ...).
nible dans les pages.
Lors de la modification des différentes langues du
En exécution, lorsqu’un champ de saisie ou une co-
projet, les modifications seront automatiquement
lonne d’un champ Table a pour masque "Défini par
prises en compte :
le projet", le masque de saisie / d’affichage s’adap-
• pour tout nouvel élément ou objet créé sous tera automatiquement selon les options choisies
l’éditeur de WEBDEV, dans 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.

136 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 137

 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 nalisé" lors de l’intégration du groupware utilisa-
libellés, ...) dans les différentes langues gérées teur dans votre site. Rappel : Pour paramétrer le
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- groupware utilisateur, sous le volet "Projet", dans le
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 groupe "Projet", cliquez sur "Groupware 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 "Lan-
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 cement automatique" : vous pourrez ainsi afficher
la rubrique). une page de sélection de langue avant de lancer la
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- 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. • L’icône 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
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
• L’utilisation de pages spécifiques (groupware
texte traduit). (fonction HSurErreur). cliquer sur cette icône.
utilisateur, gestion automatique des erreurs
HFSQL). • les langues source et destination de la tra- 3. Traduire les différents messages (voir para- • Pour voir les différentes traductions exis-
duction. graphe précédent). tantes, il suffit de survoler l’icône.
• Les messages affichés par programmation.
3. Si un outil de traduction est précisé, dans Remarque : Pour transformer tous les messages
Groupware utilisateur
3.1 Mode de traduction choisi chaque élément contenant des informations à de votre code en messages multilingues, sous le
Par défaut, le groupware utilisateur est livré en volet "Code", dans le groupe "Langues", déroulez
WEBDEV propose plusieurs modes de traduction : traduire, un bouton "Traduire" sera affiché. Ce
anglais et en français. "Traduire les chaînes" et sélectionnez "Convertir les
bouton permettra de traduire le texte sélectionné
• Traduction automatique des UI à l’aide d’un outil Pour traduire un site utilisant le groupware utilisa- chaînes simples en messages multilingues".
en utilisant l’outil de traduction spécifié.
de traduction spécifique, présent sur le poste teur, il est nécessaire de choisir le mode "Person-
de développement. Cette traduction est réalisée 4. Pour effectuer la traduction, il suffit de sélec-
directement sous l’éditeur de WEBDEV. tionner le texte à traduire et cliquer sur le bouton
"Traduire". 4  Choix de la langue par programmation
• Export de tous les messages à traduire à l’aide
de WDMSG et réintégration après traduction. Export et réintégration des
informations à traduire Un site multilingue est une application qui pourra • de prévoir une option (option de menu par
Traduction des UI être diffusée dans plusieurs langues. L’utilisateur exemple, ou bouton) permettant à l’utilisateur
L’outil WDMSG, disponible séparément, permet
Pour chaque objet, différentes zones multilingues pourra choisir la langue d’exécution de l’applica- de changer de langue en cours d’exécution de
d’extraire tous les messages d’un projet (libellé des
sont affichées dans la fenêtre de description. Ces tion. Il est possible par exemple : l’application.
champs, ...), puis de les réintégrer après traduction.
zones multilingues permettent de saisir les infor- • de demander la langue d’exécution au premier
mations dans les différentes langues gérées par le Contactez le service commercial de PC SOFT pour
plus de détails sur les conditions d’utilisation de ce lancement de l’application.
projet.
produit.

138 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 139

 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 formu-
laire 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ésentation 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é res-
ponsable du site par un choix de la page d’accueil : il suffit d’indiquer un nom, une adresse pos- Début de la page Fin de la page avec un bouton
tale et une adresse Internet, ... permettant à l’internaute de vous contacter. permettant de revenir en haut de page

4 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 automatique pour faci-
liter cette tâche.

5 Evitez l’utilisation de framesets.

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

140 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 141

 6 Vous affichez des listes de plus de 20 éléments ? Utilisez plusieurs pages pour lister les
éléments.
8 Vous utilisez des images ? Testez leur bon affichage dans vos pages.
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.

9 L’internaute doit saisir une quantité ? Utilisez une combo pour simplifier la saisie des
quantités.

7 Utilisez des images à 100% ou Homothétiques centrées.

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 homothé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élection, 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")

142 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 143

 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 professionnel. Pour cela,
Chaque champ possède une option "Superposition et déplacement" (onglet "UI" de la fenêtre de différents outils sont à votre disposition : les ambiances, les palettes et les modèles de pages
description du champ). prédéfinis.
En sélectionnant l’option "Le champ peut être superposé", le champ n’est plus lié aux tables de
positionnement de la page. Vous pouvez déplacer et positionner un champ "au-dessus" de cha- Ambiance
cun 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
Attention : Le champ avec l’option "Le champ peut être superposé" passera au-dessus des autres "Projet", dans le groupe "Projet", cliquez sur "Description"). Les ambiances sont configurées dans
champs. Si plusieurs champs ont cette option activée, leur ordre d’empilement peut être défini l’onglet "Ambiance". De nombreuses ambiances sont livrées en standard avec WEBDEV.
grâce aux options "Avancer", "Reculer", "Mettre au premier plan" et "Mettre à l’arrière plan" du
volet "Modification".

Par exemple, pour superposer un champ Libellé sur un champ Image, il faut rendre le champ
Libellé superposable et positionner le champ Libellé sur le champ Image.

Sous l’éditeur Option de superposition

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 projet.
Sous le navigateur 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 visuel de tous les
champs du site.

144 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 145

 L’ambiance d’une page peut être définie à trois niveaux différents (par ordre décroissant de prio-
Choisir un type de
Contenu
rité) :
• 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 page, plusieurs actions de bouton / lien sont
Il faut définir l’ambiance générale au niveau du projet. Si un ensemble de pages doit utiliser une disponibles.
ambiance particulière (par exemple les pages de "Promotion" d’un site de vente), il est possible de Le choix de l’action se fait dans la description du champ (onglet "Général").
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, celle-ci peut être choisie au niveau de la page elle-
même.

Palettes de couleur
Les palettes de couleurs définissent un jeu de couleurs qui sont proposées dans tous les sélec-
teurs de couleurs du projet. Les palettes de couleurs sont un moyen simple de personnaliser
l’aspect visuel d’un site.
Ces couleurs sont également appliquées sur les styles définis dans l’ambiance du projet afin de
permettre de changer rapidement et facilement l’aspect visuel d’un projet.
Voici quelques exemples d’utilisation "classique" de boutons / liens dans une page :
La palette de couleurs d’une page peut être définie à trois niveaux différents (par ordre décrois-
sant de priorité) : • Envoyer les données de la page en cours au serveur pour traitement
• Dans le projet. Exemple : Formulaire d’enregistrement : le lien permet de vérifier la validité des informations
• Dans le modèle de pages dont la page hérite des propriétés. saisies et d’afficher une page de confirmation.
Pour effectuer ce type de traitement, utilisez un lien ayant pour action "Envoyer les valeurs au
• Dans la page elle-même.
serveur". Les données de la page sont envoyées au serveur pour être traitées.
Il faut définir la palette générale au niveau du projet. Si un ensemble de pages doit utiliser une
• Effectuer un traitement sur le serveur, sans récupérer les données de la page en cours
palette particulière (par exemple les pages de la partie "Administration" d’un site), il est possible
Exemple : Page de menu constituée de boutons : chaque bouton permet de lancer une page
de remplacer la palette du projet en la redéfinissant au niveau d’un modèle de pages. Enfin, si
du site.
une page particulière doit avoir une palette différente, la palette peut être choisie au niveau de la
Pour effectuer ce type de traitement, utilisez un bouton ayant pour action "Ne rien envoyer au
page elle-même.
serveur".

Modèles de pages prédéfinis • Effectuer un traitement en code navigateur

Exemple : Exécuter un calcul simple en local, un contrôle de saisie, ...
Les modèles de pages prédéfinis fournissent des structures de pages correspondant à une grande Pour effectuer ce type de traitement, utilisez un bouton ayant pour action "Ne rien envoyer au
variété de sites et favorisent la ré-utilisabilité et l’harmonie graphique entre les projets. serveur".
De nombreux modèles sont livrés avec WEBDEV et de nouveaux modèles sont livrés régulière- • Afficher une page extérieure au site WEBDEV
ment avec la LST. Exemple : Lancer un site de moteur de recherche à l’aide d’un bouton.
Il est possible d’ajouter plusieurs fois le même modèle prédéfini dans un projet pour l’utiliser avec Pour effectuer ce type de traitement, utilisez un bouton ayant pour action "Ne rien envoyer au
plusieurs ambiances ou plusieurs palettes de couleurs par exemple. serveur".
Après avoir été ajouté au projet, le modèle prédéfini peut être ouvert dans l’éditeur et modifié • Réinitialiser les champs de la page
comme n’importe quel autre modèle de pages. Exemple : Lien permettant de vider les champs de la page en cours.
Pour effectuer ce type de traitement, utilisez un lien ayant pour action "Effacer le contenu des
Un modèle de pages prédéfini peut également être utilisé comme base de création d’un autre
champs côté navigateur".
modèle de pages.

146 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 147

 Empêcher le retour sur
Contenu
Avantage sécuritaire : la
Contenu
une page gestion du "Back"
Le bouton "Précédent" du navigateur permet à l’internaute de revenir sur une page déjà consul- Un navigateur permet de parcourir les différentes pages d’un site à l’aide des boutons "Suivant"
tée. Cependant, le retour sur une page n’est pas toujours souhaitable. et "Précédent".

Par exemple, dans un site commercial, si l’internaute revient sur la page de validation de com- A chaque nouvelle page de type Session affichée sur le navigateur, un contexte de page spéci-
mande, il pourrait valider sa commande 2 fois et donc passer 2 commandes. fique à 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 don-
né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 "Interdit".
5. Validez.

Le contexte contient la liste des founisseurs affichés dans le champ Table.

148 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 149

 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ésyn-
chronisation.
• 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 possible 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 :
• Retour au menu principal
Les clients sont affichés. Le contexte de la page sur le serveur est mis à jour : le contexte contient Cette action ne nécessite pas de gestion particulière du "Back". Ce bouton ne manipule pas
la liste des éléments affichés dans le champ Table (liste des clients). les fichiers de données : une désynchronisation entre le contexte et la page affichée n’a pas
Etape 3 : Clic sur le bouton "Back" du navigateur. d’influence.
• Supprimer le produit en cours
L’action "Supprimer le produit en cours" manipule un fichier de données. Il est important 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’identifiant 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’en-
registrement 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é.
2. Si l’enregistrement n’est pas trouvé : une page d’erreur est affichée et le code du bouton
"Supprimer" n’est pas exécuté.
3. Si l’enregistrement est trouvé, le contexte de page est alors automatiquement modifié sur le
serveur : le code du bouton "Supprimer" est exécuté.

La page de type Session affichée sur le navigateur correspond à la page affichée à l’étape 1.
La sécurité totale !
Cependant le serveur n’est pas informé par le navigateur que l’internaute a utilisé la touche Back.
Le contexte de page sur le serveur est toujours celui correspondant aux clients.
Si l’internaute sélectionne dans le champ Table un élément (un fournisseur), l’élément sélec-
tionné sera l’élément correspondant dans le contexte : un client. Il y a désynchronisation entre
la page dynamique visualisée et le contexte de page présent sur le serveur. Le moteur WEBDEV
détecte cette désynchronisation.
Une gestion du bouton Back est nécessaire.

150 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 151

 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édente" cliquez sur "Description".
Voici un exemple de site :
consultées. du navigateur entraîne l’insertion du code Javas-
• Une page du navigateur contient un champ cript 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 "Sui-
page HTML affichée sur le navigateur est associée "Interdit".
vant". <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 "Des-
permet de réaliser une action uniquement sur le suivantes.
Remarques : cription".
navigateur : la page affichée sur le navigateur et A l’ouverture de la page, le champ Table affiche les
• L’utilisation du bouton "Précédent" du naviga- 2. Cliquez sur l’onglet "Avancé".
son contexte présent sur le serveur peuvent donc 6 premiers enregistrements du fichier (de ’A’ à ’F’).
Voici un enchaînement d’actions faites par l’utilisa- 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
teur : • 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.
sur le bouton "STOP" du navigateur intervient "Interdit".
1. Clic sur le lien "Suivant"
1.1 Deux méthodes de gestion du bouton Résultat : le serveur se positionne sur les 6 avant l’exécution de l’instruction forward() par le 4. Validez. Cette option sera automatiquement
"Précédent" du navigateur enregistrements suivants de ITEM et renvoie au navigateur. prise en compte pour toutes les nouvelles pages
navigateur leurs contenus. Le navigateur affiche du site.
Pour éviter tout problème lié à la désynchronisation
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é
contient les lettres ’A’ à ’F’. Le serveur n’a pas été 3.1 Présentation 3.2 Synchronisation par défaut
depuis le bouton "Précédent" du navigateur.
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. 3. Clic sur le lien "Suivant" page une vérification de synchronisation est auto- nisme de synchronisation des pages" est sélection-
• Solution 2 : Gestion de la synchronisation (solu- Résultat : le serveur se positionne sur les 6 matiquement réalisée. Cette vérification consiste née pour la page.
tion par défaut) enregistrements suivants de ITEM (donc de ’M’ à à vérifier si la page affichée sur le navigateur En cas de désynchronisation, un message d’aver-
Pour chaque action effectuée dans une page ’R’). Le navigateur se synchronise avec le serveur correspond bien au contexte de page présent sur tissement informe l’internaute que l’action deman-
depuis le navigateur, un test de synchronisation et affiche les mêmes éléments : l’internaute a le serveur. dée n’a pu être effectuée. La page correspondant
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 Ce dysfonctionnement peut avoir des consé- 1. Gestion de la synchronisation par défaut.
sont possibles : quences inattendues lors d’une modification d’un 2. Gestion de la synchronisation par programma-
• synchronisation par défaut (mode utilisé par enregistrement de fichier (modification de l’enre- tion, dans le code de synchronisation de la page.
défaut lors de la création d’une nouvelle gistrement qui n’est pas celui visualisé par l’inter-
page). naute par exemple).
• synchronisation programmée. Rappel : chaque action sur le navigateur doit en-
traî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.

152 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 153

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

de synchronisation)".

4  Synchronisation par programmation

Pour gérer la synchronisation par programmation : Remarques : Le nouvel internaute doit ici
1. Affichez la fenêtre de description de la page : • La fonction ChangeAction est initialisée avec saisir son nom et son mot de passe

sous le volet "Page", dans le groupe "Description", l’action "Ne rien faire" si une fonction du WLan-
cliquez sur "Description". gage permettant d’afficher ou de ré-afficher une
page est utilisée dans le code de synchronisa- Connexions suivantes
2. Dans l’onglet "UI", pour l’option "Utilisation du
bouton "Précédent" du navigateur", sélectionnez tion de la page. Le site WEBDEV lit des
"Autorisé". • Pour personnaliser le message de désynchroni- données précédemment
enregistrées sur le poste
3. Configurez si nécessaire les champs de la page sation, il suffit de saisir dans le code de synchro- de l’internaute.
pour lesquels la synchronisation ne doit pas être nisation de la page :
gérée. 1. le message personnalisé.
Pour chaque champ déclenchant une action sur le 2. le ré-affichage de la page en cours sur le
serveur, il est possible de paramétrer si la gestion serveur (avec la fonction PageActualise par
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 Le site WEBDEV affiche par
a utilisé le bouton précédent du navigateur" dans 1. Utiliser un champ caché contenant l’identifiant défaut les informations lues dans le cookie

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 Pour créer des cookies dans un site WEBDEV, utilisez la fonction du WLangage CookieEcrit.
recherche est réalisée à partir de son identifiant
synchronisation de la page. Utilisez la fonction Pour lire les cookies dans un site WEBDEV, utilisez la fonction du WLangage CookieLit.
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.
l’action qui sera faite en cas de désynchronisation
de la page.

154 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 155

 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 sont pas cryp-
1. Protéger des informations personnelles. tées. L’authenticité de l’identité du serveur, la confidentialité et l’intégrité des données échangées
2. Limiter l’accès à un site. ne sont pas certifiées.
Pour assurer la confidentialité, le mécanisme le plus employé est l’utilisation du protocole TLS/
SSL (Transport Layer Security, anciennement Secure Socket Layer). Ce protocole permet de garan-
Protéger des informations personnelles tir l’identité du serveur auquel l’Internet accède et crypte les données échangées entre le serveur
et le navigateur.
Pour accéder de nouveau à des données personnelles, l’internaute peut spécifier un 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’effectuer les
• une identification : formalités liées à ce protocole (certification payante d’une clé SSL par un organisme spécialisé ou
A la première connexion, l’internaute s’identifie et saisit son mot de passe. génération d’une clé auto-signée pour une utilisation privée ou à des fins de test). Pour plus de
Aux connexions suivantes, l’internaute s’identifie et accède aux fonctionnalités qui lui sont détails, consultez l’aide en ligne de WEBDEV.
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 person- Généralement, seul le transfert de données sensibles doit être sécurisé : transfert du numéro
nels. de carte bancaire par exemple. En effet, le mode sécurisé est plus lent. Toutefois, un nombre
croissant de sites fonctionne entièrement en TLS/SSL grâce à l’augmentation de la puissance des
Limiter l’accès au site 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 tou-
jours destiné au grand public : certaines fonctionnalités peuvent être réservées à certains types
d’internautes (administrateur de site, ...). Poste de Poste
l’internaute Serveur
Dans ce cas, le gestionnaire du site attribue un mot de passe à chaque internaute. Ce mot de Clic sur un bouton

passe ne pourra pas être modifié. Ce mot de passe permet un accès à des fonctionnalités plus ou SSLActive(Vrai)
Ouverture de la page

moins limitées.
Page sécurisée
Par exemple, dans un site commercial :
• un mot de passe spécifique sera attribué aux commerciaux : ils accéderont aux statistiques de Opérations en
mode sécurisé

ventes, ... Clic sur un bouton

SSLActive(Faux)
• un mot de passe spécifique sera attribué à l’équipe marketing : ils pourront mettre en ligne de Ouverture de la page

nouveaux produits.
Page non sécurisée

WEBDEV permet de gérer simplement ces différents types d’accès à un site.

La mise en place d’une transaction sécurisée est effectuée lors de l’ouverture d’une nouvelle
page par un bouton (ou un lien). Il suffit d’utiliser la fonction SSLActive dans le code navigateur du
bouton (ou du lien). Dès l’ouverture de la page sécurisée, toutes les actions effectuées seront en
mode sécurisé (c’est-à-dire crypté).
Pour revenir en mode non sécurisé, il suffit d’utiliser la fonction SSLActive(Faux) dans le code
navigateur d’un bouton (ou d’un lien) permettant d’ouvrir une nouvelle page.
156 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 157
 Paiement sécurisé avec
Contenu
Envoyer des
Contenu
prestataire emails
Différents prestataires permettent de proposer un paiement sécurisé pour tous les sites commer- Dans un site Web, les emails permettent :
ciaux. Tout paiement réalisé avec une carte bancaire est validé par le prestataire auprès du centre • de simplifier la communication entre les internautes : envoi d’emails au responsable du site,
de carte bancaire. site de mailing-list, ...
Les différentes étapes du paiement sont les suivantes : • de valider une prise de commande : dans un site commercial, un email est envoyé aux inter-
nautes pour valider leur commande.
• de transférer des données d’un poste à un autre : les nouvelles commandes saisies sur un site
3
1 2 commercial sont transférées par email au siège de la société pour traitement, ...
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 de l’inter-
5 9b naute. Certains paramètres peuvent être remplis par défaut : adresse email du destinataire, ...
SSL 9a SSL
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 traitement spé-
9d commande
cifique n’est à effectuer dans le site WEBDEV.
4 Redirection vers le
paiement sécurisé 8 Réponse de la banque

158 Partie 4 : Concepts avancés Partie 4 : Concepts avancés 159

 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. Bases de données
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
Web
Serveur d’emails
(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 WINDEV, WEBDEV 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, WEBDEV ou WINDEV Mobile 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 (appelé fichier de données). Chaque fichier de données 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 Classic, HFSQL Client/Serveur, SQLite, ...).

162 Partie 5 : Bases de données Partie 5 : Bases de données 163

 L’analyse en pratique • si le fichier de données possède une rubrique
de type "Identifiant automatique". La valeur
2. Sélectionnez l’option "Utiliser des fichiers de
données d’une base existante", puis sélectionnez
de cette rubrique est unique pour chaque le type de la base de données.
enregistrement et est automatiquement cal- 3. Spécifiez la base de données source contenant
1  Présentation culée par WEBDEV. les descriptions à importer et le type de cette
• le type de la base de données associée au 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 Concep- fichier de données. Selon le type choisi, les informations demandées.
ce projet doit être associé à une analyse. Une ana- tuel des Données (MCD), puis création automa- ce fichier de données sera manipulé par 4. Sélectionnez les tables ou les fichiers de don-
lyse permet de décrire les structures de données tique de l’analyse à partir du MCD. Pour plus de le moteur HFSQL, par un pilote OLE DB ou nées dont la description doit être importée et
(fichiers de données, rubriques, ...) utilisées dans détail, consultez l’aide en ligne. par un des connecteurs natifs (également validez.
votre projet. Ce chapitre présente la première méthode. appelé accès natifs) de WEBDEV (SQL Server, 5. Le fichier de données importé est automatique-
Pour décrire une analyse, deux méthodes sont pos- Oracle, ...). ment inséré dans l’analyse en cours.
sibles : 4. Le fichier de données créé devient le fichier de
• 1ère méthode : Création directe de l’analyse données en cours. La fenêtre de description des Solution 2 : Depuis l’explorateur de Windows
(c’est-à-dire un Modèle Logique des Données rubriques du fichier de données s’ouvre automa- "Droppez" directement la description du fichier de
(MLD)). tiquement. Vous pouvez décrire les rubriques du données de l’explorateur Windows vers l’éditeur
fichier de données. d’analyses. Par exemple :
Pour importer une description prédéfinie d’un
2  Création d’un MLD (Modèle Logique des Données) fichier de données :
1. Sous le volet "Analyse", dans le groupe "Créa-
Dans WEBDEV, les termes "MLD" et "Analyse" sont 2.2 Ajouter un fichier de données dans une tion", cliquez sur "Nouveau fichier". L’assistant de
utilisés indifféremment pour définir la structure de analyse création d’un fichier de données se lance.
la base de données associée à un projet. 2. Sélectionnez l’option "Sélectionner une descrip-
L’analyse permet de décrire la structure des
fichiers de données utilisés par le projet. Un fichier tion parmi des fichiers de données prédéfinis".
2.1 Créer une analyse (ou MLD)
de données présent dans l’analyse peut être : 3. Choisissez le fichier de données prédéfini à
Pour créer un MLD : • Un nouveau fichier de données. créer (il est possible d’en sélectionner plusieurs).
1. Cliquez sur parmi les boutons d’accès • Un fichier de données prédéfini, livré avec WEB- Ce fichier de données sera importé dans l’analyse
rapide. La fenêtre de création d’un nouvel élé- DEV. en cours. Ce fichier de données pourra être modi-
ment s’affiche : cliquez sur "Données" puis sur fié par la suite.
"Analyse". L’assistant de création de l’analyse est • Un fichier de données importé depuis une base
existante (utilisant par exemple un format spé- 4. Sélectionnez les rubriques à conserver. Ces Ici : une base de données Oracle, sur le serveur.
lancé. rubriques pourront être modifiées par la suite. Il suffit de faire glisser le nom de la base ...
cifique).
2. Spécifiez : 5. Spécifiez si les liaisons doivent être automati-
• le nom et le répertoire de l’analyse. L’analyse Les paragraphes suivants détaillent comment quement recherchées. Si cette option est cochée,
correspond à un fichier ".WDA". Par défaut, ce créer un fichier de données. les rubriques de même nom seront reliées.
fichier sera créé dans le répertoire de l’ana- Pour créer un nouveau fichier de données : 6. Le fichier de données importé est automatique-
lyse du projet (répertoire <Nom du projet>. ment inséré dans l’analyse en cours.
ANA). Ce répertoire doit être accessible en 1. Sous le volet "Analyse", dans le groupe "Créa-
tion", cliquez sur "Nouveau fichier". L’assistant de Remarque : Pour modifier un fichier de données ou
lecture et en écriture. les rubriques d’un fichier de données :
création d’un fichier de données se lance.
• le libellé de l’analyse décrivant succincte- 1. Sélectionnez le fichier de données.
ment le sujet de l’analyse. 2. Sélectionnez l’option "Créer une nouvelle des-
cription d’un fichier de données". 2. Dans le menu contextuel, sélectionnez l’option
• si l’analyse doit être associée au projet en "Description du fichier de données" ou l’option
cours. 3. Spécifiez :
• le nom du fichier de données. Ce nom est le "Description des rubriques".
• le type de la base de données manipulée par
le projet. nom logique du fichier de données. Il sera uti- Pour importer la description existante d’un fichier
lisé pour manipuler le fichier de données. de données, deux solutions sont possibles :
3. La création du premier fichier de données est ... pour en transférer la description sous l’éditeur
automatiquement proposée. • le libellé du fichier de données résumant suc- Solution 1 : Depuis l’éditeur d’analyses
cinctement le sujet du fichier de données. d’analyses.
4. Créez l’ensemble des éléments (fichiers de don- 1. Sous le volet "Analyse", dans le groupe "Créa-
nées, rubriques et liaisons) de votre analyse. • la représentation d’un enregistrement dans tion", cliquez sur "Nouveau fichier". L’assistant de
le fichier de données. Cette représentation création d’un fichier de données se lance.
permet d’améliorer la lisibilité des questions
posées lors de la description des liaisons.
Cette option doit être précédée d’un article
indéfini (UN ou UNE).
164 Partie 5 : Bases de données Partie 5 : Bases de données 165
 2.3 Créer une rubrique Pour créer une liaison : 3.2 Les cardinalités • chaque "Club" a au moins un "Personne" : Oui/
1. Sous le volet "Analyse", dans le groupe "Créa- Non ?
Pour créer une rubrique : Les cardinalités permettent de dénombrer les liens
tion", cliquez sur "Nouvelle liaison". Le curseur de entre les fichiers de données. • chaque "Club" peut avoir plusieurs "Personne" :
1. Double-cliquez sur le fichier de données dans la souris se transforme en crayon. 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 "Personne" a au moins un "Club" : Oui/
s’ouvre. relier. La fenêtre de description de liaison s’ouvre 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 "Personne" peut avoir plusieurs "Club" :
des rubriques. 3. Pour définir les cardinalités : fichier de données au minimum cet enregistre- 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 liaison • si la réponse est "plusieurs", la cardinalité est
entre les fichiers de données. Pour plus de détails du type X,N. Il est possible de définir avec plus de précision les
sur les liaisons, consultez le paragraphe "Caracté- La réponse à ces deux questions définit la cardina- cardinalités. On parle alors de cardinalités avan-
ristiques des liaisons définies dans une analyse", lité qui peut être de type : 0,1 ; 0,N ; 1,1 ; 1,N cées.
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 fichier de description de la liaison.
3.1 Fichier propriétaire et fichier membre Par exemple, la clé du fichier de données Fournis- données Club et le fichier de données Personne :
seur est copiée dans chaque enregistrement du
Dans le cas de liaison entre deux fichiers de don- Exemple de cardinalités avancées :
fichier de données Produit. Plusieurs enregistre-
nées, il existe un fichier de données propriétaire et Cet exemple présente deux cardinalités diffé-
ments du fichier de données Produit peuvent avoir
un fichier de données membre : rentes :
la même clé du fichier de données Fournisseur :
• le fichier de données propriétaire est proprié-
• le fichier de données propriétaire est Fournis-
taire de la clé.
seur,
• le fichier de données membre est un membre
• le fichier de données membre est Produit.
des fichiers de données de l’analyse contenant
une copie de la clé. La représentation d’une telle liaison est la sui-
vante :
Pour gérer la liaison entre deux fichiers de don- • Cardinalité 0,1 : Une personne peut être inscrite
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.

166 Partie 5 : Bases de données Partie 5 : Bases de données 167

 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 (Four- • chaque propriétaire a au moins un membre (un
fichiers de données : nisseur) peut être partagé par plusieurs enregistre- fournisseur a au moins un produit).
les liaisons entre les fichiers de données.
• création d’un enregistrement. ments dans un autre fichier de données (Produit). • un membre peut ne pas avoir de propriétaire (un
L’intégrité référentielle consiste à vérifier par
exemple que : • suppression d’un enregistrement. Pour gérer une liaison partagée, la clé du fichier produit peut n’avoir aucun fournisseur).
• réindexation avec compactage. de données Fournisseur est copiée dans le fichier
• si un enregistrement est supprimé dans le pro- de données Produit. Elle devient clé multiple pour
priétaire, les enregistrements correspondants Liaison facultative accélérer la vérification de l’intégrité.
dans les membres sont également supprimés, Dans le cas d’une liaison facultative : Le fichier de données propriétaire est Fournisseur,
• si un enregistrement est ajouté dans un • Chaque enregistrement d’un fichier de données le fichier de données membre est Produit.
membre, il existe un enregistrement correspon- (Catégorie) n’a aucun enregistrement ou un seul Liaison partagée de cardinalité 1,N - 1,1
dant dans le propriétaire, Selon la cardinalité, il est possible de distinguer
enregistrement associé dans un autre fichier de quatre types de liaisons partagées : Avec ce type de liaison :
• si un enregistrement est modifié dans un pro- données (Groupe). • chaque propriétaire a au moins un membre
priétaire, la clé unique n’est pas modifiée, ... • Liaison partagée de cardinalité 0,n - 0,1
• Chaque enregistrement de l’autre fichier de (chaque fournisseur a au moins un produit).
La vérification de l’intégrité référentielle dépend de • Liaison partagée de cardinalité 0,n - 1,1
données (Groupe) n’a aucun enregistrement ou • chaque membre a un seul propriétaire (chaque
la nature de la liaison entre les fichiers de données. un seul enregistrement associé dans le premier • Liaison partagée de cardinalité 1,n - 0,1 produit a un seul fournisseur).
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 - 1,1
référentielle, consultez l’aide en ligne. Une liaison facultative est réalisée en copiant
l’identifiant de chacun des fichiers de données Liaison partagée de cardinalité 0,N - 0,1
3.5 Les différents types de liaisons dans l’autre fichier de données.
Les liaisons entre les fichiers de données peuvent Liaison complexe
être de plusieurs types :
Dans le cas d’une liaison "complexe", il est néces-
• parallèle, saire de gérer un fichier de liaison, appelé fichier
• facultative, de relation.
• de complément, Liaison de complément Avec ce type de liaison : Le fichier de relation sera automatiquement créé. Il
• partagée, Dans le cas d’une liaison de complément : • un propriétaire peut ne pas avoir de membre (un contiendra une clé unique composée des deux clés
• complexe. • Chaque enregistrement d’un fichier de données fournisseur n’a pas obligatoirement de produit). des fichiers de données reliés.
(Produit) n’a aucun enregistrement ou un seul • un membre peut ne pas avoir de propriétaire (un Le fichier de relation peut également contenir des
Liaison parallèle enregistrement associé dans un autre fichier de produit n’a pas obligatoirement de fournisseur). informations spécifiques à la liaison.
Dans le cas d’une liaison parallèle, chaque enregis- données (Détail). Une liaison complexe se décompose alors en deux
trement d’un fichier de données (Produit) est relié • Chaque enregistrement de l’autre fichier de Liaison partagée de cardinalité 0,N - 1,1 liaisons de type partagé.
à un enregistrement dans un autre fichier de don- données (Détail) a nécessairement un enre-
nées (Information), et réciproquement. Exemple de liaison complexe
gistrement associé dans le premier fichier de Une commande (fichier de données Commande)
données (Produit). peut contenir un ou plusieurs produits. Un produit
(fichier de données Produit) peut être utilisé dans
plusieurs commandes.
Avec ce type de liaison : Dans ce cas, il faut avoir un fichier de liaison (fichier
Pour gérer une liaison parallèle, l’identifiant du fi- Les liaisons de complément sont assez fréquentes. • un propriétaire peut ne pas avoir de membre (un de données LigneCommande).
chier de données Produit est copié dans le fichier Elles sont notamment utilisées lorsqu’un enregis- fournisseur peut n’avoir aucun produit). Le fichier de données LigneCommande contient :
de données Information. Cet identifiant est égale- trement peut avoir des compléments d’informa- • chaque membre a un seul propriétaire (chaque • une clé unique composée des clés du fichier
ment clé unique dans le fichier de données Infor- tions optionnels. produit a un seul fournisseur). de données Produit et du fichier de données
mation.
Pour gérer une liaison de complément, la clé du fi- Remarque : Ce type de liaison est fréquent. WEB- Commande.
Le fichier de données propriétaire est alors Produit chier de données Produit est copiée dans le fichier DEV permet de créer automatiquement les pages • le nombre de produits commandés.
et le fichier de données membre est Information. de données Détail. Pour assurer la cardinalité maxi- permettant de gérer les fichiers de données liés par Les liaisons entre les fichiers de données sont les
Remarque : Ce type de liaison est rare car les deux male de 1, elle reste clé unique. L’unicité de cette une liaison de type 0,N - 1,1. suivantes :
fichiers de données peuvent être regroupés en un clé interdit l’insertion de plus d’un enregistrement
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.

168 Partie 5 : Bases de données Partie 5 : Bases de données 169

 4  Manipulations possibles sur une analyse Entre deux versions figurent des "petits rectangles" Attention : Les fichiers de données correspondant
qui signifient : à une analyse de numéro de version supérieur à
• un rectangle : il y a eu peu de modifications la version restaurée ne pourront plus être ouverts.
WEBDEV permet de réaliser les manipulations sui- WEBDEV permet de réaliser les manipulations sui- effectuées entre les deux versions. Il faut alors également restaurer des fichiers phy-
vantes sur une analyse : vantes sur une rubrique d’un fichier de données siques correspondant à la version de l’analyse
• plusieurs rectangles : il y a eu plusieurs modifi-
• Dupliquer / Copier un MLD : La duplication d’un présent dans l’éditeur d’analyses : restaurée ou supprimer les fichiers existants pour
cations effectuées entre les deux versions.
MLD permet de disposer de deux MLD iden- • Dupliquer / Copier une rubrique. qu’ils soient recréés.
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 6.2 Annulation de la dernière génération
• Renommer une rubrique.
ligne contenant les "petits rectangles" ou cliquez L’annulation de la dernière génération de l’analyse
• Renommer un MLD. Pour plus de détails, consultez l’aide en ligne. sur le bouton [Modifications]. permet de restaurer l’analyse dans son état avant
• Associer un MLD à un projet.
Les options disponibles dans le gestionnaire de la dernière génération. Les modifications effec-
• Agrandir ou réduire l’affichage d’un MLD sous versions sont : tuées depuis ne sont pas appliquées.
l’éditeur.
• Restauration d’une analyse.
• Déplacer l’affichage du MLD sous l’éditeur. 6.3 Remettre à 1 le numéro de la version
• Annulation de la dernière génération.
• Remettre à 1 le numéro de version. Il est possible de remettre le numéro de génération
WEBDEV permet de réaliser les manipulations de l’analyse à "1" : sous le volet "Analyse", dans le
suivantes sur un fichier de données présent dans 6.1 Restauration d’une analyse groupe "Analyse", cliquez sur "Génération" et sélec-
l’éditeur d’analyses : tionnez "Remettre à 1 la version de l’analyse".
Pour restaurer une analyse à partir du gestionnaire
• Dupliquer / Copier un fichier de données. de versions : Dans ce cas le numéro de version de l’analyse est
• Supprimer un fichier de données. remis à un. Aucune action spécifique n’est réalisée
1. Sélectionnez la version à restaurer.
• Renommer un fichier de données. sur les fichiers de données.
2. Il est possible :
• soit de restaurer la version dans le répertoire
5  Génération de l’analyse (MLD) spécifié. Une analyse indépendante est créée
correspondant à la version choisie. Cette
option est sélectionnée par défaut.
La génération de l’analyse intervient avant la phase Pour lancer la génération de l’analyse, sous le volet • soit d’écraser l’analyse en cours.
de programmation et après la phase de description "Analyse", dans le groupe "Analyse", cliquez sur
3. Validez. La restauration est effectuée.
des fichiers de données. Cette génération permet "Génération".
de : La génération comporte trois étapes :
• valider les modifications effectuées sur l’analyse • vérification des modifications effectuées et
(MLD). génération des fichiers de données de la des-
• créer les modules nécessaires à la programma- cription de l’analyse.
tion. • modification automatique des fichiers de don-
• mettre à jour automatiquement les fichiers de nées accessibles (fichiers présents dans le
données si nécessaire. répertoire "EXE" du projet).
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 "Ana- lyse endommagée pour restaurer par exemple une
lyse", 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.

170 Partie 5 : Bases de données Partie 5 : Bases de données 171

 Les différents types de
Contenu
fichiers accessibles
WEBDEV, WINDEV et WINDEV Mobile proposent un accès simple à la majorité des bases de don-
nées du marché.

APPLIC ATIONS SITESATIONS

APPLIC APPLIC ATIONS
SITES APPLIC ATIONS

UNIVERSAL DATA CONNEC UNIVERSAL TOR DATA CONNEC TOR CONNECTEURS CONNECTEURS
(HLitRecherche, HExécuteRequête, Fichier, Rubrique,
(HLitRecherche, HExécuteRequête, Fichier, Rubrique,
Liaison Fichier Automatique, Databinding, Réplication, SQLExec...)
NATIFS APPLICATIFS NATIFS APPLICATIFS
Liaison Fichier Automatique, Databinding, Réplication, SQLExec...) - Google - Outlook - XML
- iCalendar - SalesForce - ... - Google - Outlook - XML
- JSON - SAP R/3 - iCalendar - SalesForce - ...
- LDAP - RSS - JSON - SAP R/3
- Lotus Notes - Webservice - LDAP - RSS
- MATLAB SOAP/REST - Lotus Notes - Webservice
- MATLAB SOAP/REST
CONNEC TEURS NATIFS CONNEC TEURS NATIFSHFSQL NATIF
Déploiement illimité,
- MQTT Déploiement
- XLS/XLSX
Puissante base de données SQL : Windows - Linux - Android - iOS HFSQL NATIF
libre et gratuit
Puissante base de données SQL : Windows - Linux - Android - iOS
illimité,
libre et gratuit - MQTT - XLS/XLSX

SQL Server MySQL BIG DATA BIG DATA

SQL Server MySQL - Hadoop - Hive - Redis
Classic/Embarqué Mobile
Classic/Embarqué Mobile
- HBase - Memcached - Riak - Hadoop - Hive - Redis
Local, réseau, iOS (iPhone, iPad), Android, - HBase - Memcached - Riak
32 & 64 bits Local, réseau, iOS-(iPhone,
HDFS iPad), Android, - ...
- MongoDB
UWP,...
32 & 64 bits - HDFS - MongoDB - ...
Oracle MariaDB UWP,...
Oracle MariaDB

AS/400 DB2
ODBC ODBC
AS/400 DB2 32 & 64 bits
32 & 64 bits

S
Windows et Linux

S
Windows et Linux
Client/Serveur Client/Serveur
Windows, Linux, Docker, PCSCLOUD PCSCLOUD
Progress Sybase Progress Sybase
Spare, 32 & 64 bits Windows, Linux, Docker,
pour applications PC SOFT
pour applications PC SOFT
Spare, 32 & 64 bits
OLE DB OLE DB
32 & 64 bits
32 & 64 bits
PostgreSQL Informix PostgreSQL Informix

SQLite Azure Cluster Cluster

SQLite Azure
Windows, 32 & 64 bits
Windows, 32 & 64 bits
HFSQLDrive HFSQLDrive

Compatibilité totale Compatibilité totale

172 Partie 5 : Bases de données Partie 5 : Bases de données 173

 HFSQL
Contenu
HFSQL Client/
Contenu
Classic Serveur
Une application WEBDEV HFSQL peut fonctionner en mode Classic (appelé HFSQL Classic) ou en HFSQL Client/Serveur est un puissant système de gestion de bases de données relationnelles
mode Client/Serveur. (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 site exé- • Un site HFSQL Client/Serveur est exécuté sur différents postes utilisateur. Pour chaque site
cuté, une session est lancée sur le serveur. 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 sessions des sites • Les fichiers de données sont présents sur un poste serveur (Serveur HFSQL). Seul le poste ser-
WEBDEV (sur le serveur Web ou sur un autre poste). Chaque session accède physiquement aux veur accède physiquement aux fichiers de données.
fichiers de données. • L’ensemble des traitements (requête, lecture/ajout dans un fichier de données, ...) est réalisé
• Les traitements (requête, lecture/ajout dans un fichier de données, ...) sont réalisés par sur le serveur.
chaque session.

Serveur Serveur
Web 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 Session n HFSQL
Client/Serveur

Client n Client n

174 Partie 5 : Bases de données Partie 5 : Bases de données 175

 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/Serveur. Dans L’éditeur d’analyses permet de décrire la structure des fichiers de données.
un cluster de bases de données, les différents serveurs HFSQL contiennent tous une copie des Selon les informations saisies sous l’éditeur d’analyses, différents fichiers sont créés physique-
bases de données et sont synchronisés en temps réel. ment.
• 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 serveur opé- du fichier (Analyse) physiquement
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
Serveur Web Fichier d’index
doublons)
Fichier “.ftx”
Un ou plusieurs index full-text
Session du client 1 Fichier d’index full-text

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

176 Partie 5 : Bases de données Partie 5 : Bases de données 177

 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

Variable liée
La méthode d’affichage et de récupération des informations est très simple :
Champ simple
• La liaison d’un champ avec une rubrique ou une variable est définie sous l’éditeur de pages, Liaison avec :
- Variable simple
lors de la description du champ (onglet "Liaison"). - Instance d’un membre de
classe ou de structure
• La fonction PageVersFichier permet de mettre à jour soit l’enregistrement, soit la variable avec - Propriété d’un objet dynamique
les données présentes dans la page. Liste, Table, Combo, ...
Liaison avec :
• La fonction FichierVersPage permet de mettre à jour les données affichées dans la page avec - Tableau de classes ou de struc-
soit les informations enregistrées dans le fichier de données, soit les informations enregistrées tures
- Types avancés (par exemple
dans la variable. xlsLigne, xlsColonne)

Liaison champ / rubrique

PageVersFichier FichierVersPage

Base de données

178 Partie 5 : Bases de données Partie 5 : Bases de données 179

 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 supprimer Les champs d’une page peuvent être liés à un fichier de données ou à une requête existante, ... Il
des données. La structure de la requête définit les données manipulées. 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 à programmer.

Sources Utilisations possibles

Pages et champs
d’une page
Données en provenance
d’un ou de plusieurs fichiers Zone répétée liée à une requête intégrée
(HFSQL, Oracle, ...) Etats
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 (un champ 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 correspon-
dant à 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.

180 Partie 5 : Bases de données Partie 5 : Bases de données 181

 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’informations
(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.
• Champs Table/Zone répétée Fichier chargée en mémoire.
Données en
Remarque : Ces trois modes de remplissage vont être détaillés ici pour le champ Table. Les mémoire
mêmes concepts s’appliquent au champ Zone répétée.
Les données étant présentes en mémoire, le champ Table permet toutes les manipulations sur
Champ Table "Fichier accès direct" les données (tri sur n’importe quelle colonne, recherche dans les colonnes, ...)

Un champ Table fichier de type accès direct permet d’afficher directement les données provenant Champ Table Fichier chargé en mémoire
d’un fichier de données ou d’une requête. La structure du fichier de données a été décrite sous
l’éditeur d’analyses et les données ont été saisies par exemple dans le site. Les champs Table fichier chargé en mémoire combinent les avantages des champs Table fichier à
Un parcours du fichier de données permet d’afficher les données dans le champ Table. Pour accès direct et ceux des champs Table mémoire.
chaque ligne affichée, le fichier de données est lu : l’enregistrement lu est affiché dans une ligne Le champ Table est lié au fichier de données, mais le contenu du fichier de données est totale-
du champ Table. ment chargé en mémoire. Le tri et la recherche sont disponibles sur toutes les colonnes.
Les données non liées au fichier de données sont conservées lors de la manipulation de l’ascen-
seur (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

Il est possible de limiter les enregistrements affichés dans le champ en utilisant un filtre (fonc-
tion HFiltre utilisée dans le code d’initialisation du champ). Fichier
Client
Plusieurs fonctions du WLangage permettent de manipuler les champs Table fichier. Ces fonc-
tions commencent toutes par "Table". Fichier chargé
en mémoire
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 fonc-
tion 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, ...

182 Partie 5 : Bases de données Partie 5 : Bases de données 183

 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éservations, ...
Pour récupérer ces informations, vous pouvez utiliser plusieurs méthodes. WEBDEV permet de créer des pages AWP. Les pages AWP sont des pages indépendantes, 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 avec
WINDEV.
Exécution des pages AWP
par requêtes HTTP

1 Partager les données

Serveur Siège de
Les données d’un site WEBDEV peuvent être directement partagées avec les données de l’appli- Web la société
cation Back Office permettant de traiter les opérations effectuées sur le site, en toute sécurité. Il Transmission des données
suffit d’utiliser une base de données HFSQL Client/Serveur. - Site WEBDEV sous forme de chaînes - Application WINDEV
- Base de données (Back Office)
Le principe est le suivant : - Pages AWP

Les pages AWP présentes sur le serveur Web sont interrogées régulièrement par des requêtes
HTTP exécutées par l’application Back Office. Les données sont renvoyées sous forme de chaînes
Accès aux données Accès aux données et traitées par l’application WINDEV.
Serveur Siège de
Web la société Avantages :
Site WEBDEV Application de
• Solution simple à mettre en place.
Back Office • Equivalent à un service Web personnalisé.
• Ne nécessite aucun exécutable supplémentaire sur le serveur. Aucune session supplémentaire
n’est exécutée sur le serveur.

Serveur de données Inconvénient : Récupération monodirectionnelle des données : pas de mise à jour des données
vers le serveur.
- Base de données HFSQL Client/Serveur
- 3 comptes d’accès :
o Internet Invité Cette solution peut être utilisée avec un serveur mutualisé.
o Administrateur
o Back Office

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

184 Partie 5 : Bases de données Partie 5 : Bases de données 185

 2.2 Grâce à un Webservice 2.4 Par emails :
WEBDEV permet de créer des Webservices. Le Webservice est installé sur le serveur Web et le Le principe :
serveur d’application WEBDEV permet de l’utiliser. Le Webservice peut être utilisé simplement
pour récupérer les données saisies sur le site.

Exécution du Webservice
4 Email de
confirmation

par requêtes HTTP

Internaute
Serveur Siège de
Web
- Site WEBDEV
Transmission des données
(chaînes, XML, ...)
la société
- Application WINDEV
2 1
Email de Commande
- Base de données (Back Office)
validation effectuée
- Webservice WEBDEV sur le site

Le Webservice présent sur le serveur Web est interrogé régulièrement par des requêtes HTTP exé- Siège de
cutées par l’application Back Office. Les données sont renvoyées sous forme XML, sous forme de la société
chaînes (ou autres) et traitées par l’application WINDEV.
Avantages :
• Solution simple à mettre en place. Serveur
• Ne nécessite aucun exécutable supplémentaire sur le serveur. Aucune session supplémentaire Web
n’est exécutée sur le serveur.
- Site WEBDEV
- Serveur d’application
Inconvénient : Récupération monodirectionnelle des données : pas de mise à jour des données
3
WEBDEV
vers le serveur. Email contenant
la commande

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 site WEB-
DEV. Cette sauvegarde peut être ensuite transférée par FTP au siège de la société. Il suffit alors 3. Le site WEBDEV envoie un email au siège de la société. Cet email contient la commande
de : effectuée par l’internaute.
• récupérer la sauvegarde compressée des fichiers de données. 4. Un email est envoyé à l’internaute par la société pour lui indiquer que sa commande 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 : Tous les fichiers de données de l’application sont récupérés. Inconvénient : Récupération monodirectionnelle des données : pas de mise à jour des 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é.

186 Partie 5 : Bases de données Partie 5 : Bases de données 187

 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 WEBDEV et la base La réplication universelle permet de maintenir à jour des bases de données de format identique
de données de l’application WINDEV au siège de la société. ou différent (HFSQL Classic, Oracle, SQL Server, ...). Il est par exemple possible de réaliser une
synchronisation entre une base de données HFSQL Classic et une base de données Oracle.
Par exemple, une base de données de saisie de commandes et de gestion de stocks est utilisée
à la fois sur un site WEBDEV (prise de commandes en ligne) et au siège de la société (prise de La réplication universelle utilise un modèle centralisé : toutes les bases de données se synchro-
commandes téléphonique ou par courrier). nisent avec une base de données maître. La base de données maître répercute ensuite les modi-
La réplication permet de : fications vers les autres bases de données.
• transmettre les commandes saisies en ligne au siège de la société (réplication monodirection-
nelle)
• 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 description 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 assisté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 HRplProcédure-
Filtre.

188 Partie 5 : Bases de données Partie 5 : Bases de données 189

 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’archi-
Tester un site
tecture d’application.
Son principe de base consiste à séparer trois couches logicielles contenues dans une application :
Web
• 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 faciliter 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 traitements. Elle a égale-
ment l’avantage d’optimiser le travail en équipe et le développement multi-cibles.

190 Partie 5 : Bases de données

 Tester un site :
Contenu
Les é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, ...), utili-
sez 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 don-
né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 fonctionnalité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’utili-
ser le "Code Coverage". Le code coverage est la mesure de la couverture des tests réali-
sé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 l’ad- Lancez l’administrateur WEBDEV
WEBDEV ministrateur permet par exemple (menu "Démarrer") puis cliquez
de tester : sur le bouton "Page de test" (on-
(site dynamique
• les fonctionnalités du site, glet "Avancé").
WEBDEV unique-
Plusieurs outils sont disponibles pour tester un site WEBDEV : ment) • les fonctions spécifiques au Ce test permet d’utiliser le site
• l’éditeur principal de WEBDEV. Web (cookies, ...), WEBDEV dans des conditions
• l’administrateur WEBDEV. • l’utilisation du site dans des identiques à celles d’un inter-
Ce module est indispensable à l’exécution d’un site dynamique WEBDEV (en mode Session ou conditions réelles. naute.
en mode AWP). Sur le poste de développement, il est possible de tester les sites dynamiques
depuis une page de test créée par l’administrateur. Les droits de l’internaute (accès,
écriture et lecture) correspondent
• WDTestSite, l’outil de test de montée en charge.
aux droits de l’utilisateur par dé-
faut défini dans le serveur Web
Le tableau ci-dessous présente quand et comment utiliser ces différents modes de test. utilisé.
WDTestSite WDTestSite permet de réaliser des 1. Créez un scénario de test
Mode de test Type de test Lancement du test (site dynamique tests de montée en charge. (avec WDTestSite).
WEBDEV unique- WDTestSite permet de lancer plu- 2. Installez WDTestSite et le
Editeur Le lancement du test depuis • Sous le volet "Projet", dans le ment) sieurs connexions simultanées à scénario sur différents postes
l’éditeur permet par exemple de groupe "Mode test", déroulez un site WEBDEV. pour simuler un grand nombre
tester : "Mode test" et sélectionnez d’accès.
"Déboguer le projet". Chaque connexion effectue une
• les fonctionnalités du site, succession d’actions dans le site 3. Spécifiez le nombre de
• le code utilisé dans les diffé- • Sous le volet "Projet", dans le WEBDEV (scénario prédéfini). connexions à effectuer.
rents événements et traite- groupe "Mode test", déroulez
"Mode test" et sélectionnez Ce test doit être effectué sur un 4. Lancez le scénario de test sur
ments. Un puissant débogueur site WEBDEV installé sur un poste chaque poste.
permet de suivre pas à pas "Déboguer le projet depuis la
page d’accueil". de déploiement, prêt à être mis
l’exécution des différents évé- en service. Remarques :
nements et traitements. • Chaque poste effectue un
Les droits de l’internaute (droits
• l’utilisation du site avec diffé- d’accès, d’écriture et de lecture) nombre de connexions défini.
rents navigateurs (installés sur correspondent aux droits du déve- • Chaque connexion effectue le
le poste de développement). loppeur. scénario sélectionné.

Ce type de test : Tests automa- Les tests automatiques per- 1. Affichez la procédure ou la
tiques mettent de tester les procédures classe dans le volet "Eplorateur
• permet l’utilisation du débo-
et les classes d’un site à différents de projet".
gueur.
niveaux de développement. 2. Affichez le menu contextuel
• est pris en compte par le "Code
Les scénarios de test sont géné- de l’élément (clic droit) et sélec-
Coverage".
rés en WLangage à partir du test tionnez l’option "Créer un test
de la procédure ou de la classe. unitaire".
Les scénarios peuvent être modi-
fiés sous l’éditeur de code.
Ce type de test est pris en compte
par le "Code Coverage" .

194 Partie 6 : Tester un site Web Partie 6 : Tester un site Web 195
 Le
Contenu
Quand peut-on utiliser
Contenu
débogueur le 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 suffit de pla-
Le débogueur permet une exécution pas à pas de vos sites dynamiques, en visualisant le code cer les points d’arrêt aux endroits voulus, pour pouvoir déboguer pas à pas le site.
WLangage exécuté, le contenu des variables, ... 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’ac-
cè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électionnez l’op-
tion "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 connexion".
Remarque : Cette option est utilisable avec un serveur de développement ou de déploiement.
Le serveur doit être configuré pour autoriser le débogage à distance.

Pour lancer le débogueur, utilisez : • Le projet déployé en cours d’utilisation :

• un point d’arrêt directement placé dans l’éditeur de code : lorsque la ligne précédée d’un Il est possible de déboguer le projet déployé, en cours d’utilisation. Cette fonctionnalité est très
point d’arrêt sera exécutée, le débogueur sera automatiquement lancé. utile pour reproduire un problème survenant uniquement dans des conditions spécifiques. Le
Pour poser un point d’arrêt, il suffit de cliquer devant la ligne de code : une puce rouge appa- cas le plus courant : vous utilisez le site et vous rencontrez le problème : vous pouvez lancer le
raît. 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 déploiement.
Le serveur doit être configuré pour autoriser le débogage à distance.

• le mot-clé serveur STOP du WLangage directement dans votre code WLangage : le 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 dyna-
mique. Sous le volet "Projet", dans le groupe "Mode test", déroulez Mode test et sélectionnez
"Déboguer le projet".

196 Partie 6 : Tester un site Web Partie 6 : Tester un site Web 197
 Test d’un site en pratique 3. Le navigateur précisé dans les options de WEB-
DEV s’ouvre et la page d’accueil du site s’affiche.
2.2 Tester le projet depuis l’administrateur
WEBDEV
Pour tester un site dynamique (Session ou AWP) Le lancement du test depuis l’administrateur WEB-
1  Présentation depuis l’éditeur, plusieurs méthodes sont dispo- DEV (WD270Admin) permet par exemple de 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 • les fonctions spécifiques au Web (utilisation des
vos sites : quement la requête en cours. Vous pouvez ainsi test", déroulez "Mode test" et sélectionnez cookies, ...).
• test de l’ensemble du projet, choisir de tester le fonctionnement d’une requête "Déboguer le projet" (ou Ctrl + F9). Remarque : L’administrateur WEBDEV permet uni-
• test d’une page seule, dès que son développement est terminé. • Cliquez sur parmi les boutons d’accès quement de tester les sites dynamiques (Session
• test d’une requête seule (consultez le livre "Etats Le test d’un état seul permet d’exécuter unique- rapide. ou AWP) ou la partie dynamique des sites statique
et Requêtes" pour plus de détails), ment l’état en cours. Vous pouvez ainsi choisir de L’éditeur est automatiquement réduit en icône, le + dynamique.
tester le fonctionnement d’un état dès que son navigateur précisé dans les options de WEBDEV Le lancement du test depuis l’administrateur WEB-
• test d’un état seul (consultez le livre "Etats et développement est terminé. Comme pour le test du
Requêtes" pour plus de détails), s’ouvre et la première page du site s’affiche. DEV est équivalent au lancement du site depuis un
projet, il est possible de lancer le débogueur dès poste distant.
• exécution du projet pas à pas, qu’un problème est rencontré. Pour tester un site statique + dynamique (Session
• test des performances de votre site, ou AWP) depuis l’éditeur : Avant de déployer un site WEBDEV, il est conseillé
L’exécution du projet pas à pas permet de lancer 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 • pour tester la partie statique du site : effectuez
les manipulations correspondant au test d’un nistrateur WEBDEV.
• test de montée en charge. permet de suivre méticuleusement le déroulement
du site. site statique. Pour lancer le test depuis l’administrateur WEB-
Le test de l’ensemble du projet permet de simuler Le test des performances de votre site permet de • pour tester la partie dynamique (Session ou DEV :
le lancement du site. Il est ainsi possible de tester vérifier et d’optimiser le temps d’exécution de votre AWP) du site : effectuez les manipulations cor- 1. Lancez l’administrateur WEBDEV : sous le volet
le site dans son ensemble, même si son dévelop- site. respondant au test d’un site dynamique. "Outils", dans le groupe "Utilitaires Web", cliquez
pement n’est pas terminé. Dès qu’un problème sur "WDAdmin".
apparaît, vous pouvez lancer le débogueur pour Le test de non-régression (ou test automatique)
Site dynamique (mode Session ou
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 WEB-
AWP) : Lancement
vérifier que lors de l’exécution de votre site, ... les DEV, cliquez sur le bouton "Page de Test".
Le test d’une page seule permet d’exécuter unique- fonctionnalités existantes sont toujours suppor- Les modules suivants sont automatiquement lan-
ment la page en cours. Vous pouvez ainsi choisir de Pour arrêter le test, affichez l’administrateur WEB-
tées. cés lors d’un test d’un site dynamique (mode Ses-
tester votre projet à partir d’une page donnée ou de DEV (en cliquant sur l’icône 27 présente dans la
sion ou AWP) WEBDEV :
tester le fonctionnement d’une page dès que son Le test de montée en charge permet de lancer barre des tâches) et cliquez sur le bouton "Décon-
plusieurs connexions simultanées à un même site • Le serveur Web installé sur le poste et configuré necter" (onglet "Connexions").
développement est terminé. Comme pour le test du pour WEBDEV lors de l’installation de WEBDEV.
projet, il est possible de lancer le débogueur dès dynamique WEBDEV. Remarque : L’administrateur WEBDEV permet éga-
Si le serveur Web n’est pas lancé, le test ne
qu’un problème est rencontré. Pour compléter ces différentes méthodes, WEB- lement d’effectuer un test du projet équivalent au
peut pas se faire.
DEV propose également de connaître le "Code test du projet depuis l’éditeur :
• L’administrateur WEBDEV (WD270ADMIN.EXE).
coverage" du site, c’est-à-dire la mesure de la cou- 1. Lancez l’administrateur WEBDEV : sous le volet
L’administrateur permet de gérer les connexions
verture des tests réalisés sur un site. Pour plus de "Outils", dans le groupe "Utilitaires Web", cliquez
au serveur Web et de paramétrer les sites WEB-
détails, consultez l’aide en ligne. sur "WDAdmin".
DEV.
Remarque : un test de projet peut être lancé 2. Dans l’onglet "Connexions", sélectionnez le site
2  Tester un projet WEBDEV depuis la page de test de l’administrateur (On- et cliquez sur le bouton "Tester".
glet "Avancé" de WD270ADMIN, bouton "Page
de test").
2.3 Test de montée en charge / Test de non-
régression
2.1 Tester le projet depuis l’éditeur "Options" et sélectionnez "Options générales de • Le moteur WEBDEV (WD270AWP.EXE).
WEBDEV". Le navigateur peut être sélectionné Le moteur WEBDEV permet de gérer les L’outil WDTestSite permet de réaliser des tests de
Le lancement du test depuis l’éditeur permet par requêtes effectuées par les internautes depuis montée en charge : WDTestSite permet de lancer
dans l’onglet "Web".
exemple de tester : leur navigateur et de leur renvoyer la page HTML plusieurs connexions simultanées à un site dyna-
• dans les options du mode test : sous le volet
• les fonctionnalités du site, dynamique correspondante. mique WEBDEV (Session ou AWP).
"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- Chaque connexion effectue une succession d’ac-
Le test d’un projet peut être lancé quel que soit quement si le projet contient des pages dyna- tions dans le site WEBDEV (scénario prédéfini).
l’élément en cours sous l’éditeur. Différents types de test miques. Pour plus de détails sur WDTestSite, consultez
Remarque : Le navigateur de test utilisé pour le test Pour tester un site statique depuis l’éditeur : • Le navigateur Internet. l’aide en ligne.
du projet peut être choisi : 1. Sous le volet "Projet", dans le groupe "Mode Le navigateur Internet permet d’afficher les
• dans les options de WEBDEV : sous le volet "Ac- test", déroulez "Mode test" et sélectionnez "Débo- pages HTML du site WEBDEV.
cueil", dans le groupe "Environnement", déroulez guer le projet depuis la page d’accueil".
2. L’éditeur est automatiquement réduit en icône.
198 Partie 6 : Tester un site Web Partie 6 : Tester un site Web 199
 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 En-
tion.
• Débogage d’un site en cours d’exécution sur un 5.4 Déboguer sans le débogueur ModeTest, la fenêtre de trace apparaît uniquement
serveur d’application distant.
Il est ainsi possible de déboguer depuis votre Dans certains cas, l’exécution d’un programme 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 Win- sans risque d’apparition en clientèle.
dows 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 tester une page depuis l’éditeur : 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, ...),
sibles : cessaire par exemple de suivre l’évolution d’une pour contrôler le bon déroulement du programme,
1. Ouvrez la page à tester. il est nécessaire de conserver une trace physique
2. Cliquez sur parmi les boutons d’accès • 1ère méthode : valeur, le passage dans différentes procédures, ...
des traitements effectués (un fichier texte par
rapide du menu de WEBDEV. Vous pouvez égale- Fermez la page en cours de test. WEBDEV Ces informations peuvent être : exemple).
ment utiliser le raccourci clavier F9. affiche l’éditeur en cours au moment du lance- • affichées à l’écran
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 :
et la page s’exécute. • 2ème méthode : Attention : Si les informations sont affichées à • soit à l’écran (paramètre /DEBUG en ligne de
Lors du test, l’ensemble des fonctionnalités de • Revenez dans l’éditeur avec la barre des l’écran, elles doivent être affichées uniquement commande).
la page pourra être exécuté. Il sera possible par tâches ou avec Alt + Tab. 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 = fRepDonnéesUtilisa
WLangage. teur() + ProjetInfo(piNomProjet)+".
5  Tracer un projet Attention : L’affichage d’une boîte d’information 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 WLan- SI Position(LigneCommande(), "/
gage. 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
différents traitements exécutés sont hiérarchisés SINON
• vérifier la valeur des variables, 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 Avant de diffuser une application, il est donc néces- SI NumFichier <> -1 ALORS
Le débogueur permet de réaliser ces opérations. de chaque variable. DateHeureTrace est un DateHeure
saire de supprimer tout affichage superflu.
Remarque : WEBDEV met également à votre dispo- • dans le volet "Débogueur". Pour éviter tout oubli, il est conseillé de gérer l’affi- DateHeureTrace = DateHeureSys()
sition divers outils de trace (fenêtre de trace, boîte DateTrace est une Date
chage des informations de débogage à l’aide d’une
d’information, ...). Pour plus de détails, consultez le 5.3 Fonctionnalités du débogueur DateTrace = Madate..PartieDate
procédure globale.
paragraphe "Déboguer sans le débogueur", page HeureTrace est une Heure
Le débogueur permet de :
HeureTrace = Madate..Par
201. • connaître la pile des appels, tieHeure
• visualiser le contenu des variables ou des fEcritLigne(NumFichier,
expressions, DateVersChaîne(DateTrace) + ...

200 Partie 6 : Tester un site Web Partie 6 : Tester un site Web 201
 " - répertoire des données de l’utilisateur. Ce fichier 6.4 Choisir un traitement à optimiser • le pourcentage de temps passé dans le traite-
"+HeureVersChaîne(HeureTrace)) a pour nom le nom du projet. Ce fichier contient ment de la fonction ou de la procédure. Plus ce
fEcritLigne(NumFichier, les informations à tracer durant l’exécution du Le choix du traitement à optimiser se fait en fonc- pourcentage est important, plus le code peut
ChaîneATracer) programme. Les informations sont complétées tion de plusieurs critères : contenir des traitements pouvant être optimisés.
fEcritLigne(NumFichier, " ") • le temps d’exécution du traitement. Les traite-
par la date et l’heure de chaque "Trace". Il est Remarque : Si le traitement correspond à une
fFerme(NumFichier) ments les plus longs doivent bien entendu être
ainsi possible de déterminer un éventuel dys- fonction WLangage, il est relativement difficile de
FIN optimisés.
FIN
fonctionnement durant le traitement. l’optimiser.
• Exemple de contenu du fichier de trace :
Remarques :
01/12/2015 - 10:53:25:20
• Le fichier de trace est créé par défaut dans le Nom de client : Martin
7  Tests de non-régression

6  Test de performances 7.1 Présentation 7.3 L’utilitaire WDTestSite

Soucieux de la qualité des applications, plusieurs WDTestSite est un utilitaire permettant de réaliser
6.1 Présentation 6.3 Lire le résultat de l’analyseur de perfor- outils de tests sont à votre disposition : différents tests sur un site WEBDEV.
L’analyseur de performances est un outil permet-
mances • 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 L’analyseur de performances présente le résultat permet de tester immédiatement une modifica- les suivants :
de votre site. Son principe est simple : de l’analyse dans plusieurs onglets : tion dans votre site. • Test de montée en charge :
• Vous testez votre site. • l’onglet "Synthèse" présente les dix traitements • L’utilitaire WDTestSite qui permet de réaliser Le test de montée en charge consiste à simuler
qui ont pris le plus de temps. différents tests sur un site WEBDEV. la connexion de plusieurs internautes à un site
• Pendant ce test, l’analyseur de performances WEBDEV. Chaque internaute exécute une suite
répertorie toutes les actions effectuées et les • l’onglet "Cartographie" présente une vision gra- Pour automatiser ces tests et augmenter la qualité
phique des traitements les plus importants. 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 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
présente : lancés lors du test de l’application (classés du
plus long au plus rapide). les fonctionnalités proposées par vos applications. fonctionnement d’un site WEBDEV entre deux
• les 10 manipulations qui ont pris le plus de mises à jour. Le test de non-régression consiste
temps. • l’onglet "Appels" permet de visualiser le détail 7.2 Tests automatiques à vérifier qu’un scénario réalisé avec une précé-
des opérations réalisées dans un traitement.
• toutes les actions effectuées dans le site testé, Chaque test est composé d’un scénario directe- dente version du site fonctionne correctement
triées par durée (de l’action la plus longue à Pour chaque traitement, les informations suivantes avec la mise à jour du site.
sont affichées : ment éditable dans l’interface du produit. Ce scé-
l’action la moins longue). 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 Fonction Fonction, traitement ou procédure exé- n’importe quel moment. Le test d’un site en mode multi-utilisateurs per-
afin d’analyser les causes de son temps de traite- cutée. Ces tests peuvent être lancés par exemple avant met de vérifier que les accès concurrentiels aux
ment pour l’optimiser. chaque déploiement pour vérifier le bon fonction- fichiers de données sont correctement gérés. Ce
Temps Temps d’exécution de la fonction.
nement d’un site après diverses modifications. test consiste à simuler la connexion simultanée
6.2 Lancer l’analyseur de performances Total
de plusieurs internautes à un site WEBDEV.
Les éléments suivants peuvent être testés :
Pour lancer l’analyseur de performances, sous Nb appels Nombre d’appels effectués à la fonction Chaque internaute exécute une suite d’opéra-
(procédure ou traitement). • les collections de procédures. tions (scénario) simultanément.
le volet "Projet", dans le groupe "Audit et perfor-
mances", déroulez "Analyser les performances" et • les classes. • Comparaison de différents serveurs :
Temps 1 Temps d’exécution d’un appel à la fonc-
sélectionnez "Analyser les performances". appel tion (procédure ou traitement). Chaque test est associé à un code WLangage : le WDTestSite permet de comparer la vitesse de
Le projet est alors automatiquement exécuté en scénario du test. Ce scénario est visible sous l’édi- différents serveurs. Il suffit de lancer un scé-
% code Pourcentage de code exécuté hors teur de code. Le code des tests peut être modifié.
mode test. Vous pouvez exécuter le traitement à nario sur différents serveurs et de comparer le
appel à une fonction WLangage ou à un
optimiser dans votre site. Les tests et le code associé ne sont pas livrés en temps d’exécution de ce scénario.
appel d’une fonction ou une procédure
Pour revenir sous l’éditeur, il suffit de fermer votre clientèle. Le nombre de tests d’un site n’a donc au- • Optimisation de traitements réalisés en WLan-
personnelle.
application ou votre site. cune incidence sur la taille du site livré en clientèle. gage :
Parent Traitement qui a appelé la fonction. Pour plus de détails, consultez l’aide en ligne (mot- WDTestSite permet de comparer le temps d’exé-
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.
sation du code WLangage.
Remarque : Il est conseillé d’utiliser l’analyseur de • Le libellé "Exécution complète" représente le
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).

202 Partie 6 : Tester un site Web Partie 6 : Tester un site Web 203
 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ébergeur pour
obtenir ces informations.

Avant d’effectuer un déploiement par FTP, l’hébergeur doit communiquer au développeur 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 AWP) :
une des phases importantes consiste à déployer ce serveur est facilement accessible.
site sur un serveur Web (chez un hébergeur ou en • déploiement par média physique (CD-ROM, ...) du site WEBDEV, avec création d’une version
L’outil WDDéploie permet de simplifier le déploie-
Intranet). ment de vos sites statiques. 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 (Ses-
lorsque le serveur n’est pas directement dispo- sion ou AWP) en pratique. Poste de
nible.
développement Hébergeur

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
1. Sous le volet "Projet", dans le groupe "Généra- mise à jour du site. Ces caractéristiques vous
tion", cliquez sur "Déployer le site". L’outil WDDé-
ploie se lance.
sont fournies par l’hébergeur du site, ...
3. Cliquez sur le bouton "Préparer". WDDéploie 3 Mise en service du site
(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
présents sur le poste de développement et les Remarque : un serveur d’application WEBDEV peut être intégré à l’installation fournie par mé-
• Emplacement des fichiers locaux (sous-réper-
toire "<NomProjet>_WEB" de votre site). fichiers déjà installés. dia physique.
• Adresse du site WEBDEV. 4. Cliquez sur le bouton "Synchroniser". Les
fichiers de votre site sont copiés à l’emplacement • déploiement à distance directement depuis le poste de développement (par transfert de
• Emplacement des fichiers du site déployé spécifié dans le profil. fichiers par Internet en mode HTTP).
(réseau ou serveur FTP).
Pour plus de détails sur l’utilisation de WDDéploie,
consultez l’aide en ligne.
Poste de
développement Hébergeur

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

208 Partie 7 : Déployer un site Web Partie 7 : Déployer un site Web 209
 • déploiement à distance depuis un poste d’administration (par transfert de fichiers par Inter- L’installation à distance (par HTTP) directement depuis un poste de d’administration est conseil-
net, FTP). lé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é dans ce cas un "Package".
Transmission Installation
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.
Les paramètres du serveur (Adresse, ...) ne seront renseignés que lors de l’exécution du package
Poste de Serveur Web sur le poste d’administration.
développement
2 Déploiement sur média physique : informations nécessaires
1
Création du
package
d’installation Configuration du
Lors d’un déploiement par média physique, les informations concernant l’installation et le para-
gestionnaire de métrage du site sont données à la fois dans l’assistant de préparation de l’installation et dans

4
Mise en comptes
service du l’assistant d’installation.
site (lien de
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.
Lors de l’installation, il est nécessaire de fournir :
Poste d’administration
• le répertoire des fichiers de données,

3
• le répertoire des fichiers du site.
Après l’installation, il est nécessaire de paramétrer les caractéristiques du site (temps de
Exécution du package : connexion, nombre de connexions, ...) dans l’administrateur WEBDEV (version de déploiement).
Installation du site sur le serveur
par HTTP

Déploiement par HTTP directement depuis le poste de développe-

Remarque : Il est également possible de réaliser ce déploiement par transmission de fichiers ment : informations nécessaires
en mode FTP. Dans ce cas, un serveur FTP doit être configuré sur le Serveur Web.
Si vous n’avez pas ces informations, inutile de tenter d’installer. Appelez le prestataire pour obte-
nir ces informations.
Choisir une méthode de déploiement
Avant d’effectuer un déploiement par HTTP directement depuis le poste de développement, l’hé-
Le choix de la méthode de déploiement dépend surtout des contraintes imposées par l’hébergeur
bergeur doit communiquer au développeur les informations suivantes :
et de la localisation du serveur de déploiement (distant ou présent dans les locaux).
• 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.
L’installation par média physique est conseillée si le serveur Web est facilement accessible (par
exemple, le serveur Web se situe dans les mêmes locaux que l’équipe de développement). • 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).
L’installation à distance (par HTTP) directement depuis le poste de développement est conseil-
lé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.

210 Partie 7 : Déployer un site Web Partie 7 : Déployer un site Web 211
 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 internautes dès
qu’il aura été mis en service. La mise en service d’un site WEBDEV consiste à activer le site.
Remarques : L’activation d’un site WEBDEV peut se faire par plusieurs méthodes :
• Il est possible de réaliser une installation différée, à la date et à l’heure choisies. • soit lors de l’installation par HTTP : une case à cocher permet d’activer automatiquement le
• L’installation et la mise à jour par HTTP sont sécurisées par mot de passe et cryptage des don- site après son installation.
nées transmises.

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’administration), 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.
Remarques :
• soit avec l’administrateur WEBDEV présent sur le poste de déploiement (option "Bloqué", dans
• Il est possible de réaliser une installation différée, à la date et à l’heure choisies. l’onglet "Sites").
• L’installation et la mise à jour par HTTP sont sécurisées par mot de passe et cryptage des don-
nées transmises.

212 Partie 7 : Déployer un site Web Partie 7 : Déployer un site Web 213
 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éces-
ment disponible. • Pour créer l’installation d’un site, sous le volet saires (le nom d’utilisateur et le mot de
Les étapes du déploiement sont les suivantes :
Remarque : par compatibilité avec les versions "Projet", dans le groupe "Génération", déroulez passe).
précédentes, il est également possible de réali- 1. Installation du serveur d’application WEBDEV
"Déployer le site" et sélectionnez "Générer et Pour identifier simplement les caractéristiques
ser un déploiement distant par FTP. chez l’hébergeur (étape optionnelle). Pour plus de
déployer le site". du serveur pour une prochaine mise à jour, don-
détails, consultez la documentation du serveur
• déploiement par média physique : DVD, ... : Pour déployer un site statique, consultez Déploie- nez un nom à ce serveur. Ce nom apparaîtra
d’application WEBDEV.
méthode conseillée lorsque le serveur est facile- ment d’un site statique ou PHP en pratique. (suivi de l’adresse du serveur) dans la fenêtre de
ment accessible. 2. Création par l’hébergeur des éléments sui- choix du type d’installation.
vants :
2. Les fichiers à installer. Par défaut, l’assistant
• un compte WEBDEV (dans l’administrateur). sélectionne la bibliothèque, les fichiers de don-
1  Mise en bibliothèque • un compte FTP (dans le serveur FTP) unique- nées, les images et les pages HTML.
ment si le déploiement est réalisé par FTP. 3. Paramétrage de l’installation : Choisissez le
Avant de procéder à une installation, il faut mettre • soit un package de déploiement : 3. L’hébergeur transmet les noms et mots de type d’installation à distance à effectuer :
en bibliothèque tous les objets de votre site dyna- Un package de déploiement est un exécutable passe associés ainsi que le nom (adresse IP) du • Mise à jour immédiate :
mique (en mode Session ou AWP). Une bibliothèque contenant tous les éléments nécessaires au serveur. Les fichiers du site sont compactés et trans-
est un fichier qui regroupe tous les objets créés déploiement d’un site WEBDEV. Ce package 4. Création de l’installation à distance depuis férés immédiatement sur le serveur Web
lors du développement (description de la base de pourra ensuite être exécuté depuis un poste l’éditeur : sous le volet "Projet", dans le groupe (l’accès au serveur Web doit être possible
données, description des pages, codes sources quelconque pour installer le site Web sur le "Génération", déroulez "Déployer le site" et sélec- depuis le poste d’installation). Le site WEB-
compilés, ...). Les pages HTML et les images ne poste serveur par HTTP ou FTP. tionnez "Générer et déployer le site". Dans l’assis- DEV est ensuite installé automatiquement sur
sont pas incluses dans la bibliothèque. La mise en Pour créer ce type d’installation, il n’est pas tant qui se lance, sélectionnez l’option "Déployer le serveur Web.
bibliothèque est automatique lors de la création de nécessaire de connaître les caractéristiques du sur un serveur d’application WEBDEV distant". Les • Mise à jour différée :
la procédure d’installation. compte FTP et du compte WEBDEV présent sur fichiers nécessaires sont copiés dans le répertoire Les fichiers du site sont compactés et transfé-
Une fois la bibliothèque créée, l’assistant de créa- le serveur Web. de transfert. rés immédiatement sur le serveur Web (l’accès
tion de l’installation se lance. Vous pouvez choisir • soit une installation via le service d’héberge- 5. Mise en service du site WEBDEV. au serveur Web doit être possible depuis le
de réaliser : ment de test de PC SOFT : Attention : Par défaut, le déploiement distant d’un poste d’installation). Le site WEBDEV sera
• soit une installation distante (via HTTP ou FTP) PC SOFT propose d’héberger vos sites de test. site WEBDEV est réalisé par HTTP. installé sur le serveur à la date et à l’heure
Avant de réaliser une installation à distance, L’installation s’effectue simplement, directe- indiquée. Il est ainsi possible de faire la mise à
l’hébergeur doit avoir configuré le serveur Web ment depuis l’environnement. Ainsi, une fois 2.2 Création de l’installation jour du site dans la nuit (entre minuit et 3h du
et il doit également vous avoir transmis les para- votre site terminé, il est possible de le tester "en Il faut définir dans l’assistant : matin par exemple), lorsque le nombre d’inter-
mètres nécessaires à l’installation du site. réel" directement. nautes est moins important.
Pour réaliser ce type d’installation, il est néces- 1. Les informations concernant le poste distant. Attention : la date et l’heure spécifiées sont
• soit un déploiement dans le Cloud PC SOFT : Ces informations doivent être fournies par l’héber-
PC SOFT propose une plateforme d’héberge- saire de posséder un compte développeur PC celles du serveur. Assurez-vous de leur validité.
SOFT. Si nécessaire, l’assistant propose de créer geur :
ment sur le modèle du Cloud Computing : vous • Activer le site immédiatement après instal-
ce compte. • Adresse du serveur (un nom de machine lation :
déployez sans vous soucier des contraintes accessible par le réseau, une adresse IP, ou
matérielles et vous êtes facturés selon l’usage • soit une installation par média physique : Le site sera disponible directement après son
L’assistant vous permet de créer un programme une adresse Internet). installation : il sera possible de s’y connecter
réel de vos applications.
Pour réaliser ce type d’installation, il est néces- d’installation de votre site. Ce programme sera • Caractéristiques du compte WEBDEV (le nom soit en utilisant l’adresse adéquate, soit par
saire de posséder un compte Cloud PC SOFT. ensuite fourni à l’hébergeur et permettra d’ins- d’utilisateur, le mot de passe et le compte de une page statique contenant un lien sur le
Si nécessaire, l’assistant propose de créer ce taller votre site WEBDEV sur le serveur Web. l’OS exécutant les sites WEBDEV associés au site. Si cette option n’est pas cochée, il sera
compte Cloud. compte). possible d’activer le site grâce à l’administra-
teur à distance.

214 Partie 7 : Déployer un site Web Partie 7 : Déployer un site Web 215
 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 le Connecteur 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 le Connecteur Natif 3.2 Création de l’installation Les fichiers du site sont compactés et transfé-
par le gestionnaire du site. AS/400, il est nécessaire d’installer les DLL 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, AS/400 sur le 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.
Récapitulatif des éléments installés et de leur localisation : Remarque : si cette option est choisie, la mise à Attention : la date et l’heure spécifiées sont
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é.
Serveur de sites Serveur de données sents sur le serveur sont au format Hyper File 5.5,
• Activer le site immédiatement après instal-
il est nécessaire de les migrer au format HFSQL
Répertoire des sites WEBDEV Répertoire des données lation :
Classic. Cette migration doit être effectuée uni-
de l’utilisateur N de l’utilisateur N Le site sera disponible directement après son
quement lors de la première mise à jour du site.
installation : il sera possible de s’y connecter
Répertoire défini par l’hébergeur. Répertoire défini par l’hébergeur. 3. Paramétrage du site. Ces options permettent soit en utilisant l’adresse adéquate, soit par
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.
Dans ce sous-répertoire de sites sont installés les Dans ce sous-répertoire de données sont installés • soit par l’administrateur de déploiement pré-
pages HTML, la bibliothèque (".WDL"), le répertoire les fichiers ".FIC", les fichiers ".NDX", les fichiers sent sur le serveur. 3.3 Installation du site dynamique
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-
est "C:\UtilN\Sites WEBDEV". teur N est "D:\UtilN\Données WEBDEV". 4. Spécifiez si votre site utilise le Connecteur Natif 2. Indiquer les caractéristiques du serveur Web
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 le Connecteur Natif 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
AS/400, il est nécessaire d’installer les DLL saire et caractéristiques du compte WEBDEV du
WEBDEV\Bateau". dans le répertoire "D:\UtilN\Données WEBDEV\
AS/400 sur le 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éé.

216 Partie 7 : Déployer un site Web Partie 7 : Déployer un site Web 217
 4.1 Création de l’installation 9. Imprimez le dossier de déploiement : • Installez votre site sur un serveur "dédié" (solu- • Cas 3 : votre serveur Web peut être sélection-
Le dossier de déploiement précise la licence tion conseillée). Vous êtes propriétaire de ce né directement : sélectionnez votre serveur.
Il faut définir dans l’assistant : WEBDEV ainsi que tous les modules installés lors serveur. Vous pouvez demander la génération d’un
1. Un titre et un intitulé de version pour votre du déploiement. Il précise également les clés de Dans ce cas vous devez : fichier de configuration afin de pouvoir exécu-
installation. Un titre peut être donné dans cha- la base de registres générées pour le site WEB- • configurer le serveur Web, ter la configuration ultérieurement.
cune des langues susceptibles d’être choisies au DEV. Lors de l’installation du site sur le serveur, Vous pourrez modifier le fichier de configura-
moment de l’installation. • gérer les ressources mémoires nécessaires
ces clés pourront être mises à jour directement pour votre site. tion avant de l’exécuter.
2. Un répertoire par défaut. dans la base de registres ou enregistrées dans un Selon le serveur choisi, le fichier de configura-
3. Un décor pour la fenêtre d’installation. Vous fichier pour un examen ultérieur. Pour installer le site WEBDEV sur un serveur Web tion a une extension ".reg", ".conf" ou autre.
pouvez personnaliser le décor à l’aide du bouton Le dossier de déploiement doit être fourni à la (chez un hébergeur ou en Intranet) : 5. Sélectionnez le répertoire d’installation :
"Personnaliser". personne chargée d’installer votre site WEBDEV 1. Installez si nécessaire le serveur d’application <webroot> désigne le répertoire racine du serveur
4. Les fichiers de votre site. (hébergeur ou responsable réseau Intranet). WEBDEV sur le serveur Web. Web de la machine. En fonction du serveur Web
Remarque : les fichiers bibliothèques, HTML, 10. Modifiez éventuellement le répertoire de Attention : si le serveur d’application WEBDEV choisi, le répertoire racine est détecté et affiché.
Java, JavaScript et les fichiers images sont sélec- génération de l’installation. n’est pas installé sur le serveur Web, le site Si le répertoire racine du serveur Web n’est pas
tionnés par défaut. Par défaut l’installation est générée dans le sous- dynamique WEBDEV ne pourra pas fonctionner affiché, vous pouvez le saisir dans la zone grise ou
5. Les fichiers annexes : répertoire "INST" de votre projet. correctement. le rechercher à l’aide du bouton "…".
11. Générez l’installation. Remarque : Pour chaque serveur Web hébergeant 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. Une fenêtre d’information signale la présence
éventuelle de noms longs de fichiers. En effet, en licence du serveur d’application WEBDEV. 6. Mise à jour des fichiers de données (étape
Remarque : si la licence n’est pas validée par
la personne chargée de l’installation, l’instal- cas d’installation sur un lecteur réseau, vérifiez 2. Pour installer le site WEBDEV, exécutez sur le optionnelle, uniquement dans le cas d’une mise à
lation sera abandonnée. que : serveur Web, le programme INSTALLE.EXE fourni jour du site).
• le lecteur réseau supporte correctement les avec l’installation du site WEBDEV. Pour mettre à jour les fichiers de données asso-
• Le "Lisez-moi" : ce fichier peut correspondre à Important : S’il s’agit d’une mise à jour d’un site ciés au site WEBDEV, choisissez l’exécution de la
différents formats (txt, htm, doc, hlp, pdf, …). noms longs,
• le lecteur réseau ne modifie pas les majus- 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 à l’aide de l’administrateur WEBDEV (cochez "Site En cas de doute sur la nécessité d’opérer cette
posséder un logiciel permettant de visualiser cules/minuscules dans les noms de fichiers.
WEBDEV bloqué" dans l’onglet "Sites"). mise à jour, contactez le fournisseur du site.
ce fichier. 12. Lorsque la création de l’installation est termi- Attention : Les fichiers de données du site ne
née, WEBDEV propose de : 3. Choisissez la langue d’installation : un assis-
• Un exécutable à lancer à la fin de l’installa- tant d’installation se lance. Passez au plan sui- doivent pas être en cours d’utilisation. Utilisez
tion. • tester directement l’installation créée. vant. l’administrateur WEBDEV pour vérifier qu’aucune
Attention : Pensez à joindre les fichiers liés à • ouvrir l’explorateur Windows sur le répertoire connexion n’est en cours et arrêtez les sites
cet exécutable (DLL, fichiers de paramètres, 4. L’installation détecte automatiquement si un
de génération de l’installation. ou plusieurs des serveurs Internet suivants sont (cochez "Site bloqué" dans l’onglet "Sites").
autres fichiers exécutables, …). 13. Réalisez une sauvegarde de votre site. 7. Choisissez l’installation d’un pilote ODBC pour
Remarque : il est possible de sélectionner un installés sur le poste :
Il est recommandé de conserver une sauvegarde • IIS Version 7 et plus (Microsoft Internet Infor- HFSQL si des programmes non réalisés avec WEB-
fichier de licence et un fichier "Lisez-moi" pour des sources de votre site correspondant à une DEV doivent accéder aux fichiers HFSQL du site
chaque langue de l’installation. mation Server) : serveur Microsoft.
version installée. qui va être installé (étape optionnelle).
6. Si une mise à jour de l’analyse a été réalisée, • Apache Version 2.2 et 2.4 : serveur Web gra-
tuit fourni par l’Apache Group. 8. Le résumé de l’installation est affiché. Confir-
sélectionnez la modification automatique des 4.2 Installation du site dynamique sur un mez vos choix.
fichiers de données lors de l’installation. serveur Web (média physique) Trois cas peuvent se présenter :
Remarque : si cette option est choisie, la mise à 9. L’installation est terminée :
Si vous installez votre site chez un hébergeur, celui- • Cas 1  : votre serveur Web n’apparaît pas
jour sera proposée lors de l’installation. dans cette liste : sélectionnez "Autre serveur". • Cliquez sur l’adresse proposée pour tester
ci peut vous proposer deux possibilités : votre site en local. Cette option n’est utilisable
7. Si des programmes non réalisés avec WEBDEV Pour plus de détails sur la configuration de
• Installez votre site sur un serveur "mutualisé". que si le serveur Web a été configuré automa-
doivent accéder aux fichiers HFSQL de votre site, votre serveur, consultez l’aide en ligne.
Ce serveur gère les sites de plusieurs clients. tiquement.
choisissez l’installation d’un pilote ODBC. • Cas 2 : votre serveur Web apparaît dans la
Ce serveur est configuré lors de l’installation du • Cliquez sur "Copier" pour récupérer l’adresse
Remarque : si cette option est choisie, l’installa- liste mais en grisé : votre serveur Web n’a
serveur d’application WEBDEV. L’administrateur proposée. Pour plus de détails, consultez le
tion du pilote sera proposée lors de l’installation. pas été détecté. Vous pouvez toutefois le
WEBDEV (WD270ADMIN.EXE) permet de confi- paragraphe "Mise en service du site dyna-
8. Spécifiez si votre site utilise le Connecteur Natif gurer individuellement chaque site WEBDEV sélectionner en cochant "Afficher tous les
AS/400. serveurs". mique", page 220.
installé sur ce serveur.
Rappel : si votre site utilise le Connecteur Natif Vous devez alors demander la génération • Cliquez sur "Terminer" pour terminer l’instal-
Attention : Les ressources mémoires du serveur
AS/400, il est nécessaire d’installer les DLL d’un fichier de configuration afin de pouvoir lation.
sont partagées par tous les sites.
AS/400 sur le serveur Web. exécuter la configuration ultérieurement (si
Si vous utilisez une licence pour un nombre de vous avez prévu d’installer votre serveur plus
postes limité, il est nécessaire de gérer dans le tard par exemple).
site WEBDEV le nombre de connexions en cours
(fichier INI ou base de registres, ...).

218 Partie 7 : Déployer un site Web Partie 7 : Déployer un site Web 219
 10. Configuration du serveur Web :
Si la configuration du serveur Web n’a pas été
• au nombre total de connexions autorisées sur
le site,
PARTIE 8
faite automatiquement, deux cas peuvent se pré- • au nombre de connexions autorisées pour un
senter : internaute,
• Cas 1 : votre serveur a été détecté et un
fichier de configuration a été généré : vous
• à la durée d’inactivité autorisée.
Testez le site WEBDEV depuis l’administrateur à
Hébergement de
pouvez visualiser, éventuellement modifier
puis exécuter ce fichier.
• Cas 2 : votre serveur n’a pas été détecté :
partir de l’option [page de test] (onglet "Avancé").
Remarques : sites WEBDEV
pour plus de détails, consultez l’aide en ligne. • L’administrateur WEBDEV (WD270ADMIN.EXE)
doit être lancé et tourner en permanence en
11. A l’aide de l’administrateur WEBDEV, déblo- tâche de fond. Il est possible de l’installer en
quez les sites éventuellement bloqués et configu- tant que service sous Windows NT.
rez les paramètres de votre site dynamique.
Ces paramètres correspondent : • Pour plus de détails sur l’administrateur WEB-
DEV, consultez le chapitre L’administrateur WEB-
DEV en pratique.

5  Mise en service du site dynamique

Pour permettre aux internautes l’accès à votre 2. Dans l’entête de cette page, utiliser les com-
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 redirection vers le site WEBDEV c’est-à-dire, par
site WEBDEV. exemple, vers l’adresse :
Si vous avez réalisé une installation par média phy- "http://205.51.231.57/WD270AWP/
sique, l’adresse à utiliser a été fournie à la fin de WD270AWP.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 "NOTRAP- <meta http-equiv="refresh"
PLI" à partir du site de PC SOFT : content="0;URL=http://205.51.231.57/
WD270AWP/WD270AWP.EXE.EXE/CONNECT/
http://www.pcsoft.fr/WD270AWP/
jaidebeauxyeux">
WD270AWP.EXE/ CONNECT/NOTRAPPLI

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 principalement

de :
• tester les sites dynamiques grâce à la page de test (onglet "Avancé", bouton "Page de test").
• gérer les webservices (onglet "Webservices").
• gérer les serveurs de WebSockets (onglet "WebSockets").
• régler les paramètres de connexion aux sites dynamiques pour vos tests : temps de décon-
nexion, ... (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 concernant les Webservices WEBDEV dynamiques
le poste. installés sur le poste.
1  Présentation
L’onglet "Sites" liste les différents sites WEBDEV L’onglet "Webservices" liste les différents Webser-
dynamiques installés sur le poste et gérés par vices WEBDEV dynamiques installés sur le poste et
L’administrateur WEBDEV est un module permet- Ce chapitre présente uniquement l’administrateur l’administrateur WEBDEV. Pour chaque site, les gérés par l’administrateur WEBDEV. Pour chaque
tant de gérer les sites WEBDEV dynamiques (de de WEBDEV version Développement. informations suivantes sont affichées : Webservice, les informations suivantes sont affi-
type Session ou AWP). Pour plus de détails sur les outils de déploiement, • le nom du site. chées dans un tableau :
Lors du développement d’un site WEBDEV, l’admi- consultez leur aide. • le répertoire complet d’installation du site sur • le nom du Webservice.
nistrateur permet principalement de : le poste. • le répertoire complet d’installation du Webser-
Lancement de l’administrateur
• tester le site grâce à la page de test. WEBDEV • le nom du fichier "projet" correspondant. vice sur le poste.
• régler les paramètres de connexion au site pour Pour lancer l’administrateur de WEBDEV version • l’état du site (bloqué ou non). Il est possible de • le nom du fichier "projet" correspondant.
vos tests : temps de déconnexion, ... Développement : cocher la case pour bloquer directement l’accès • l’état du Webservice (bloqué ou non). Il est
• supprimer directement les connexions de test • depuis WEBDEV version Développement : sous au site pendant la mise à jour du site. possible de cocher la case pour bloquer direc-
en cours. le volet "Outils", dans le groupe "Utilitaires Web", • le nombre de tâches planifiées utilisées par le tement l’accès au Webservice pendant sa mise
• changer le serveur Web utilisé pour vos tests. cliquez sur "WDAdmin". site. à jour.
• effectuer un diagnostic en cas de problème lors • sélectionnez l’option "Programmes .. WEB- L’onglet "Sites" permet aussi de : • le nombre de tâches planifiées utilisées par le
du lancement d’un site WEBDEV... DEV 27 .. Administrateur WEBDEV" depuis le • Supprimer le site sélectionné dans le tableau. Webservice.
En déploiement, deux types d’administrateur WEB- menu "Démarrer". Il s’agit uniquement de supprimer le site de L’onglet "Webservices" permet aussi de :
DEV existent : L’administrateur WEBDEV est lancé automatique- l’administrateur : le site WEBDEV sera toujours • Supprimer le Webservice sélectionné dans le
• l’administrateur WEBDEV Déploiement qui ment au premier test du site. présent sur le disque. tableau.
permet à l’hébergeur de gérer les sites WEBDEV L’administrateur peut ensuite être laissé en tâche • Rafraîchir l’affichage des sites présents dans le Il s’agit uniquement de supprimer le Webservice
dynamiques installés sur un serveur Web. de fond. tableau. de l’administrateur : le Webservice WEBDEV
• l’administrateur WEBDEV Distant qui permet au Par défaut, l’administrateur WEBDEV autorise dix Ce rafraîchissement permet de vérifier la pré- sera toujours présent sur le disque.
gestionnaire de site de gérer ses sites WEBDEV connexions simultanées à un même site WEBDEV sence d’un site dans l’administrateur après son • Rafraîchir l’affichage des Webservices présents
dynamiques à distance depuis n’importe quel dynamique (icône GO). installation. dans le tableau.
poste. • Ajouter un site dans le tableau. Ce rafraîchissement permet de vérifier la pré-
• Paramétrer individuellement les sites présents sence d’un Webservice dans l’administrateur
2  Interface de l’administrateur WEBDEV sur le poste. après son installation.
Par défaut, la configuration prise en compte est • Ajouter un Webservice dans le tableau.
celle de l’onglet "Configuration". • Paramétrer individuellement les Webservices
L’administrateur WEBDEV se présente sous la • Le Tableau des connexions en cours indique Il est également possible de créer une configura- présents sur le poste.
forme d’une fenêtre comportant plusieurs onglets : pour chaque connexion : tion spécifique pour le site sélectionné (bouton Par défaut, la configuration prise en compte est
• Onglet "Connexions". • l’identifiant de la connexion, "Paramètres"). celle de l’onglet "Configuration".
• Onglet "Sites" et onglet "Webservices". • le site concerné par la connexion, Cette configuration concerne le nombre de Il est également possible de créer une configu-
• Onglet "WebSockets". • l’identité du client connecté. En utilisation connexions autorisées, la durée d’inactivité ration spécifique pour le Webservice sélectionné
• Onglet "Configuration". réelle, le client est identifié par son adresse IP autorisée et le blocage éventuel du site pour (bouton "Paramètres").
ou son adresse Internet, une mise à jour. Pour plus de détails sur ces Cette configuration concerne le nombre de
• Onglet "Avancé". paramètres, consultez l’onglet "Configuration". connexions autorisées, la durée d’inactivité
• Onglet "Installations/Comptes". • le temps actuel de connexion,
Pour valider immédiatement le nouveau para- autorisée et le blocage éventuel du Webservice
• Onglet "Journaux". • le temps d’inactivité de la connexion. métrage, appuyez sur le bouton "Appliquer". pour une mise à jour. Pour plus de détails sur
• Rafraîchissement automatique : cette option Il est également possible de gérer les tâches ces paramètres, consultez l’onglet "Configura-
2.1 Caractéristiques des connexions en permet de rafraîchir automatiquement les don- planifiées associées au site sélectionné (bouton tion".
cours nées affichées. "Tâches planifiées"). Ce paramétrage est dispo- Pour valider immédiatement le nouveau para-
L’onglet "Connexions" fournit diverses informations L’onglet "Connexions" permet également de : nible uniquement lorsque le site est déployé. métrage, appuyez sur le bouton "Appliquer".
à propos des connexions en cours : • Arrêter une connexion en cours : sélectionnez • Tester directement les sites installés sur le poste Il est également possible de gérer les tâches
une des connexions et cliquez sur "Déconnec- (uniquement en version de développement) : planifiées associées au Webservice sélectionné
• Le Nombre de connexions en cours indique le
ter". Sélectionnez le site puis cliquez sur "Tester". (bouton "Tâches planifiées"). Ce paramétrage est
nombre de connexions totales aux sites WEB-
• Stopper toutes les connexions en cours et fer- disponible uniquement lorsque le Webservice
DEV dynamiques gérés par l’administrateur.
mer l’administrateur : cliquez sur "Déconnecter est déployé.
Tous".
224 Partie 8 : Hébergement de sites WEBDEV Partie 8 : Hébergement de sites WEBDEV 225
 2.4 Serveurs de WebSockets installés necté puis reconnecté. sion ".LOG") pour visualiser les statistiques de Serveur utilisé
Si ce paramètre est supérieur à zéro, un mes- fréquentation des sites WEBDEV à l’aide de Le bouton "Serveur" permet de choisir un des ser-
L’onglet "WebSockets" liste les différents serveurs sage d’erreur apparaîtra automatiquement au WDStatistiques. Pour plus de détails sur WDSta-
de WebSocket WEBDEV installés sur le poste et veurs WEB installés sur le poste en cours pour exé-
bout des x connexions simultanées. tistiques, consultez l’aide de WDStatistiques. cuter les sites WEBDEV. Attention : Ce serveur sera
gérés par l’administrateur WEBDEV. Pour chaque Ce nombre peut être modifié pour chaque site
serveur de WebSocket, les informations suivantes • Enregistrer dans le fichier global et dans le utilisé pour tous les sites dynamiques WEBDEV ins-
(onglet "Sites"). fichier de chaque application : tallés sur ce poste.
sont affichées : L’option "Une seule connexion recyclée auto- Cette option permet d’enregistrer les statis- Si le serveur utilisé n’est pas présent dans cette
• le nom du serveur, matiquement" permet de limiter la connexion tiques à la fois dans le fichier journal de l’appli- liste, choisissez "Autre". Il faudra alors configurer
• le répertoire complet d’installation du serveur d’un utilisateur à une connexion. La même cation et dans le fichier journal du serveur. En manuellement le serveur Web utilisé. Pour plus de
de WebSocket sur le poste, connexion sera réutilisée. effet, si le fichier journal est défini à la fois au détails sur la configuration de serveurs spécifiques,
• l’état du serveur de WebSocket (bloqué ou non). Le paramétrage des sessions et des requêtes niveau du serveur et au niveau des applications consultez l’aide en ligne.
L’onglet "WebSockets" permet aussi de : est réalisé par les options suivantes : (onglet "Sites"), des informations peuvent être Diagnostic
• Supprimer le ou les serveur(s) de WebSocket • Déconnecter les utilisateurs inactifs depuis : "perdues".
Le bouton "Diagnostic" permet d’effectuer une véri-
dans le tableau (bouton "Supprimer"). Il s’agit du temps maximum de connexions Remarque : Si le fichier journal est activé, il est fication de la configuration du poste en cours. Ce
• Rafraîchir l’affichage des webservices présents autorisées sans action de la part de l’inter- possible de visualiser le journal des erreurs dans diagnostic permet de vérifier :
dans le tableau (bouton "Rafraîchir"). naute. Si ce temps est dépassé, l’internaute l’onglet "Journaux" de l’administrateur.
est automatiquement déconnecté et un mes- • si le protocole TCP/IP est installé
• Ajouter un serveur de WebSocket dans le Gérer le débogage à distance
sage d’erreur est affiché. • si un serveur Web (serveur HTTP) est lancé
tableau (bouton "Ajouter"). L’administrateur WEBDEV permet d’autoriser ou
Ce nombre peut être modifié pour chaque site non le débogage à distance des sites WEBDEV • si le gestionnaire de protocole AWP est correcte-
2.5 Configuration générale dans l’onglet "Sites". dynamiques. ment configuré
• Durée des contextes AWP : Si le débogage à distance est autorisé, les para- • si les exécutables WEBDEV nécessaires sont
La configuration générale correspond aux diffé- Durée de validité des contextes AWP. Dès que présents.
rentes options de connexion par défaut pour les mètres suivants doivent être spécifiés :
la durée indiquée est écoulée et si aucune Si une de ces conditions n’est pas remplie, les sites
sites WEBDEV présents sur le serveur et gérés par nouvelle requête n’a été effectuée, le fichier • Port principal (27 271 par défaut).
l’administrateur. WEBDEV dynamiques ne pourront pas fonctionner.
des contextes est supprimé. • Plage des ports des sessions (entre 27 282 et
L’onglet "Configuration" permet de : 27 289 par défaut). Pour plus de détails, consultez l’aide en ligne.
• Durée des contextes Webservices : Nom ou adresse IP du poste en cours
• Paramétrer les connexions. Durée de validité des contextes correspon- Le bouton "Par défaut" permet de rétablir les va-
• Paramétrer les sessions et les requêtes. dants aux Webservices. leurs par défaut. L’administrateur WEBDEV permet de spécifier un
nom ou une adresse IP pour désigner un poste
• Gérer le fichier journal pour obtenir les statis- • Durée maximum d’une requête : 2.6 Options avancées spécifique. Il est également possible de spécifier le
tiques de fréquentation. Temps maximum d’attente autorisé entre le numéro de port. Par exemple : localhost:8080.
• Gérer le débogage à distance. déclenchement d’une action par l’internaute L’onglet "Avancé" permet de :
(par un bouton ou un lien) et l’affichage de la Ce poste sera utilisé :
Le paramétrage des connexions est réalisé par • Choisir un des serveurs Web installés sur le
les options suivantes : réponse. Si ce temps est dépassé, une page poste en cours pour exécuter les sites WEBDEV. • lors de l’utilisation du bouton "Diagnostic".
• Nombre maximum de connexions sur le d’erreur est affichée, mais l’internaute n’est • Effectuer un diagnostic de configuration du • lors de l’utilisation du bouton "Page de test".
serveur : pas déconnecté. poste en cours. • lors du test d’un site, d’une page, d’un état, ...
Nombre maximum de connexions simulta- • Durée maximum d’une tâche : • Spécifier le nom ou l’adresse IP du poste en depuis l’éditeur WEBDEV (icône "GO").
nées autorisées pour l’ensemble des sites Permet de limiter la durée d’exécution d’une cours. Test
gérés par l’administrateur (une connexion = tâche planifiée ou d’une tâche différée WEB- Le bouton "Page de test" permet d’afficher sous le
• Afficher sous le navigateur une page permettant
un internaute). DEV. Si la tâche dépasse cette durée, elle navigateur une page permettant de lancer chacun
de lancer tous les sites WEBDEV installés sur le
• Nombre maximum de connexions sur un sera automatiquement arrêtée. des sites WEBDEV dynamiques et des Webservices
poste en cours.
site : • Autoriser les sessions prélancées : WEBDEV dynamiques installés sur ce poste.
• Gérer la recherche des pages périmées.
Nombre maximum de connexions simulta- Permet de gérer les sessions prélancées sur Pour plus de détails sur les tests d’un site WEBDEV,
le serveur d’application WEBDEV. Cette option • Gérer les impressions.
nées autorisées pour chaque site géré par consultez le chapitre 5. Test d’un site en pratique.
l’administrateur. Ce nombre peut être modifié permet d’optimiser le temps de connexion • Gérer les messages d’erreur.
aux sites et Webservices WEBDEV présents Recherche des pages périmées
pour chaque site dans l’onglet "Sites". • Gérer les emails en mode asynchrone.
sur le serveur. Pour plus de détails, consultez Cette option permet d’activer et de paramétrer la
• Nombre maximum de connexions d’un utili- • Gérer les sockets serveur.
l’aide en ligne. recherche des pages périmées sur les sites WEB-
sateur sur un site : • Autoriser ou non certaines fonctions spécifiques. DEV gérés par le serveur d’application WEBDEV.
Nombre maximum de connexions simulta- L’administrateur WEBDEV permet de générer un
• Interdire le changement d’IP en cours de navi- Imprimante utilisée par défaut (site intranet uni-
nées autorisées pour un même internaute sur fichier journal spécifique permettant de suivre les
gation. quement).
chaque site géré par l’administrateur. statistiques de fréquentation.
• Interdire l’accès aux identifiants de contexte
Si ce paramètre est égal à zéro, l’internaute • Générer un fichier journal pour les statistiques
AWP depuis Javascript.
essayant de se connecter simultanément à de fréquentation (.log) :
un même site, sera automatiquement décon- Permet de générer un fichier journal (exten-

226 Partie 8 : Hébergement de sites WEBDEV Partie 8 : Hébergement de sites WEBDEV 227
 Le bouton "Impressions" permet de sélectionner Interdire l’accès aux identifiants de contexte AWP
Configuration du
l’imprimante utilisée par défaut lors d’une impres-
sion directe sur une imprimante locale ou réseau
du serveur Web.
depuis JavaScript
Dans un site AWP, le contexte du site est stocké sur
le serveur. L’identifiant de ce contexte est transmis
serveur
Messages d’erreur et mémorisé dans le navigateur par l’intermédiaire
Le bouton "Erreurs" affiche les différentes erreurs d’un cookie.
pouvant être affichées dans le navigateur de l’inter- Si l’option "Interdire l’accès aux identifiants de
naute. Il est possible de personnaliser le message contexte AWP depuis JavaScript" est cochée, les
Pour un site dynamique WEBDEV :
d’erreur ou encore la page HTML où l’erreur est cookies utilisés seront de type "HTTPOnly", type
affichée. ne pouvant pas être lu depuis du code Javascript.
Spooler de mails Ce mode protège contre les attaques de type XSS
Si l’option "Désactiver le spooler de mail" est déco- (Cross-Site scripting).
chée, vos sites pourront envoyer des emails sans Par défaut, l’accès aux identifiants de contexte
bloquer l’exécution des différents traitements AWP depuis Javascript est interdit.
Poste de Poste
l’internaute Serveur
(mode asynchrone). Gérer les fonctions fCopieFichierRépertoireWeb et
Il est également nécessaire d’activer le mode asyn- fSupprimeFichierRépertoireWeb
Connexion au site WEBDEV
chrone à l’ouverture de la session d’emails (à l’aide L’option "Autoriser les fonctions fCopieFichierRé- Seul un navigateur est Serveur Web
de la fonction EmailOuvreSessionSMTP ou Emai- pertoireWeb et fSupprimeFichierRépertoireWeb." nécessaire (IIS, Apache, ...)
lOuvreSession). doit être cochée si ces fonctions sont utilisées dans
Si le mode asynchrone est activé, tous les emails à le site Web.
envoyer seront transmis à un "Spooler". Les emails Ces fonctions permettent notamment de mettre Moteur WEBDEV
sont ainsi mis en file d’attente avant d’être envoyés. dans le répertoire des images du site des images
L’exécution des fonctions Email n’est alors plus blo- présentes dans le répertoire des données (cas par
quante pour le reste du programme. La fonction exemple d’images uploadées puis mises à disposi-
EmailEtat permet de connaître l’état d’un email. tion pour les internautes utilisant le site). Site WEBDEV
Remarque : Si l’administrateur WEBDEV est fermé, Attention : La copie est prise en charge par l’admi-
le spooler d’emails est vidé : les emails en attente nistrateur de WEBDEV sur le serveur (WD270AD-
ne sont pas envoyés et sont enlevés du spooler. MIN.EXE). Le compte Windows qui l’exécute doit Base de données
Si vous cochez l’option "Désactiver le spooler de disposer de droits suffisants sur l’emplacement
mail" alors que des emails sont en attente, ces cible de la copie.
emails ne seront pas perdus : l’administrateur
continue de les envoyer, mais aucun nouveau mail 2.7 Installations/Comptes
ne sera accepté par le spooler. L’onglet "Installations/Comptes" permet de : Pour un site statique :
Attention : Le mode asynchrone est utilisable uni- • Configurer le serveur pour les installations et les
quement lors de l’ouverture d’une session sur un mises à jour de site.
serveur SMTP (fonction EmailOuvreSessionSMTP • Gérer le journal des installations.
pour l’envoi d’emails ou fonction EmailOuvreSes-
sion). Ce mode est ignoré dans tous les autres cas. 2.8 Journaux
Sockets
Poste de Poste
L’onglet “Journaux” permet de visualiser le détail
Si l’option "Autoriser les sockets serveur" est co- des journaux sur une période donnée.
chée, vos sites pourront manipuler les sockets du
serveur (à l’aide des fonctions Socketxxx du WLan-
Attention : Pour utiliser cette fonctionnalité, les
journaux doivent avoir été activés pour le site. Les
l’internaute Serveur
gage). journaux peuvent être activés :
Interdire le changement d’IP en cours de naviga- • dans l’onglet “Configuration” pour gérer un jour- Connexion au site WEBDEV
tion nal général, Seul un navigateur est Serveur Web
Si cette option est cochée, l’adresse IP associée à nécessaire (IIS, Apache, ...)
• dans l’onglet “Sites” (bouton “Paramètres”)
la session ne peut pas changer en cours de naviga- et dans l’onglet “Webservices” (bouton “Para-
tion. Il est ainsi possible d’empêcher les attaques mètres”) pour gérer un journal spécifique.
du type "vol de session" (attaque consistant à se Site WEBDEV
faire passer pour un utilisateur légitime connecté L’activation du journal des statistiques entraîne au-
au serveur). tomatiquement la création du journal des erreurs.

228 Partie 8 : Hébergement de sites WEBDEV Partie 8 : Hébergement de sites WEBDEV 229
 Serveur dédié ou • serveur dédié : le serveur est réservé au client. L’hébergeur fournit uniquement l’accès à Inter-

mutualisé ? net (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 mutualisé :
serveur dont les ressources sont partagées par différents clients (client = société faisant
Serveur Web
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
- Serveur FTP (si nécessaire)
• fournir éventuellement le poste serveur (location possible),
• 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 dynamiques 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éalisées par
FTP.

230 Partie 8 : Hébergement de sites WEBDEV Partie 8 : Hébergement de sites WEBDEV 231
 Quel type de serveur 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 serveurs. Destiné principalement aux hébergeurs et aux Webmasters, le Centre de Contrôle d’hébergement
Quel que soit le type de serveur choisi, il est nécessaire de posséder une licence de déploiement permet d’aider à héberger plus facilement les sites WEBDEV.
pour chaque serveur.
Chaque serveur héberge un ou plusieurs sites dynamiques WEBDEV (en mode Session ou en Le Centre de Contrôle gère bien sûr les comptes WEBDEV, mais également, le compte au niveau
mode AWP). du serveur web et les droits au niveau du système d’exploitation.

Serveur Avantages / inconvénients Quand utiliser Un choix par défaut est proposé : il permet d’installer un serveur par simple clic, sans compé-
ce serveur ? tences spécifiques.

Mutualisé Principaux avantages : Un serveur mutualisé est Le paramétrage des éléments suivants est centralisé :
• Coût moindre conseillé pour :
• Comptes Windows,
• Administration du serveur réalisée par
l’hébergeur • les sites peu visités • Groupes des utilisateurs FTP,
Principaux inconvénients :
(jusqu’à 20 ou 30 • Groupes des clients WEBDEV,
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-
ment possible.
effectués sur le serveur), • Sites Web virtuels, ...
• les sites en phase de
• Accès non sécurisé aux données :
démarrage. Le Centre de Contrôle d’hébergement fonctionne sous environnement Windows avec le serveur
Des personnes non autorisées peuvent
avoir accès aux données : l’hébergeur et 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 conseillé

• Ressources du poste serveur disponibles 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,
• les sites dynamiques.
Principaux inconvénients :
• Coût important
• Administration du poste serveur entière-
ment réalisée par le client, la plupart du
temps.

232 Partie 8 : Hébergement de sites WEBDEV Partie 8 : Hébergement de sites WEBDEV 233
 Site dynamique sur des 2. Installation sur un serveur Windows avec un accès à Internet par
configurations spécifiques UNIX
La configuration est la suivante :

INTERNET
1. Installation sur un serveur Web sous Windows (2000 ou supérieur)
ou un serveur Linux Serveur
La configuration est la suivante :
1 Unix
INTERNET Sont installés sur le serveur :
- serveur Web Unix
- les pages statiques

Serveur
Windows
Sont installés sur le serveur :

2
- le serveur d’application WEBDEV
- le site WEBDEV (Session ou AWP) Serveur
3
- le serveur Web sous Windows
Windows
Sont installés sur le serveur :
- le serveur d’application WEBDEV
- le site WEBDEV (Session ou AWP)
- le serveur Web sous Windows

INTERNET
1. Ouverture d’une page statique. La page statique est présente sur le serveur UNIX.
Serveur 2. Lancement du site dynamique WEBDEV (présent sur le serveur Windows) par un lien présent
Linux dans la page HTML statique.
3. Fonctionnement normal du site WEBDEV.
Sont installés sur le serveur :
- le serveur d’application WEBDEV
- le site WEBDEV (Session ou AWP) Remarque : la même configuration peut être adoptée avec un serveur Linux.
- le serveur Web sous Linux

234 Partie 8 : Hébergement de sites WEBDEV Partie 8 : Hébergement de sites WEBDEV 235
 3. Installation sur un serveur Windows ou Linux avec Load Balancer
Statistiques de fréquenta-
Le système Load Balancer permet de répartir la charge de connexion sur un site dynamique WEB-
DEV sur différents postes.
tion des sites dynamiques
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 applications qui
ont été utilisées, de quel site vient l’internaute ?

WEBDEV est fourni avec un outil complet de statistiques pour les pages dynamiques : WDStatis-
tique. Cet outil peut être installé sur n’importe quel poste.

Load Quelques exemples de statistiques fournies par WDStatistique : nombre de connexions par jour,
balancer 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.

236 Partie 8 : Hébergement de sites WEBDEV Partie 8 : Hébergement de sites WEBDEV 237
 Surveillez vos sites, PARTIE 9
serveurs, ...
Un site dépend souvent de nombreux paramètres extérieurs : site Web, Serveur HFSQL, réseau, ...
Annexes
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 permet 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 avertir de diffé-
rentes façons :
• Message envoyé dans la messagerie PC SOFT (WDBAL).
• Email
• 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 27
AJAXAnnuleAppelAsynchrone Annule l’exécution automatique de la procédure navigateur
appelée par la fonction AJAXExécuteAsynchrone.
AJAXAppelAsynchroneEnCours Permet de savoir si une procédure serveur appelée par la fonc-
tion 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’inter-
naute.
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 Bandeau défi-
lant.
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 boîte 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 navigateur fCopieFichierRépertoireWeb Copie un fichier image depuis le répertoire des données de
du client en réponse à la requête reçue. l’application (ou un de ses sous-répertoires) vers le répertoire
"_WEB" de l’application (ou un de ses sous-répertoires).
ChangeAction Permet de spécifier l’action effectuée en cas de désynchro-
nisation entre la page HTML affichée dans le navigateur et le FichierAffiche Affiche un fichier sur le navigateur de l’internaute.
contexte de page sur le serveur.
FichierVersPage Initialise automatiquement les champs d’une page avec :
ChangeDestination Change la destination de l’action d’un bouton. les valeurs des rubriques associées dans l’enregistrement en
CheminNavigationAjouteLien Ajoute un lien dans un champ Chemin de navigation. cours (chargé en mémoire) du fichier de données décrit sous
l’éditeur d’analyses. Cette opération est effectuée quel que
CheminNavigationInsèreLien Insère un lien dans un champ Chemin de navigation. soit l’état des champs (grisés, inactifs, ou invisibles).
CheminNavigationModifieLien Modifie un lien dans un champ Chemin de navigation. les valeurs des variables WLangage associées. Cette opération
est effectuée quel que soit l’état des champs (grisés, inactifs,
CheminNavigationSupprime- Supprime un lien dans un champ Chemin de navigation. ou invisibles).
Lien
FramesetAffiche Affiche un frameset WEBDEV dans le navigateur de l’inter-
CheminNavigationSupprime- Supprime tous les liens dans un champ Chemin de navigation. naute.
Tout
FramesetUtilise Affiche un frameset WEBDEV dans le navigateur de l’internaute
ConfigureContexteAWP Configure le mode de fonctionnement du contexte AWP. et ferme tous les contextes de pages et de framesets en cours.
ConnexionOccurrence Renvoie le nombre d’instances du site WEBDEV en cours d’exé- fRepWeb Renvoie le nom physique complet du répertoire contenant les
cution sur le serveur. images, les fichiers Javascript et Java du site WEBDEV.
ContexteExiste Permet de savoir si un contexte de page existe sur le serveur fSupprimeFichierRépertoire- Supprime un fichier image du répertoire "_WEB" de l’applica-
(c’est-à-dire si la page a été ouverte). Web tion (ou de un de ses sous-répertoires).
ContexteFerme Ferme un contexte de page. GglAnalyticsAjouteActionRé- Ajoute une action de type réseau social auprès de Google Ana-
ContexteOuvre Ouvre un nouveau contexte de page sans renvoyer les informa- seauSocial lytics.
tions vers le navigateur. GglAnalyticsAjouteDurée Ajoute une durée auprès de Google Analytics.
CookieEcrit Ecrit un cookie sur le poste de l’internaute. GglAnalyticsAjouteEvénement Ajoute un événement auprès de Google Analytics
CookieLit Récupère la valeur d’un cookie enregistré sur le poste de l’in- GglAnalyticsAjouteException Ajoute une exception auprès de Google Analytics.
ternaute.
GglAnalyticsAjoutePage Ajoute une page auprès de Google Analytics.
CouleurPalette Renvoie une couleur de la palette courante.
gpwOuvreConfiguration Ouvre la fenêtre ou la page de configuration du groupware uti-
DéclareContexteAWP Permet de déclarer une liste de variables dont la valeur sera lisateur.
persistante entre les affichages successifs des pages AWP.
grTailleImage Définit la taille de l’image contenant le graphe.
DynamicServingConfigure Indique l’environnement à utiliser par le "Dynamic Serving"
pour choisir le jeu de pages à afficher. HTMLClasseAjoute Ajoute une classe dans les classes HTML d’un champ.

EmailEtat Renvoie l’état d’un email envoyé par une session SMTP ouverte HTMLClasseBascule Bascule une classe dans les classes HTML d’un champ : si la
en mode asynchrone. classe n’existe pas, elle est ajoutée, si la classe existe déjà,
elle est supprimée.
EmailOuvreMessagerie Ouvre le logiciel de messagerie par défaut :
HTMLClasseSupprime Supprime une classe des classes HTML d’un champ.
de l’internaute sur le poste navigateur.
de l’utilisateur sur le poste Windows en cours. IdentifiantContexteAWP Renvoie l’identifiant du contexte AWP.
sur le téléphone. ImageArrêteDéfilement Arrête le défilement automatique des images.
ExécuteProcédureDifférée Exécute une procédure différée (dans le serveur d’application ImageDernier Affiche la dernière image du défilement.
WEBDEV).

242 Partie 9 : Annexes Partie 9 : Annexes 243

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

244 Partie 9 : Annexes Partie 9 : Annexes 245

 NavigateurVersion Retourne la version du navigateur utilisé par l’internaute. PageTauxGFI Permet de connaître et de modifier le taux de grisage des
pages utilisant le GFI (Grisage des pages inaccessibles).
PageActiveGFI Active ou désactive le GFI (Grisage des pages inaccessibles)
lors de l’affichage d’une page modale (par exemple les pages PageUtilise Affiche une page WEBDEV dans le navigateur de l’internaute et
permettant de dialoguer avec l’utilisateur). ferme tous les contextes de pages en cours.
PageActualise Actualise une page affichée dans le navigateur de l’internaute PageValide Valide la page spécifiée et lance l’exécution d’un bouton.
à partir du contexte présent sur le serveur.
PageVersASP Envoie les données d’une page actuellement affichée sous le
PageAdresse Permet d’obtenir l’adresse Internet d’une page. navigateur vers un serveur ASP.
PageAffiche Affiche une page du site dans le navigateur de l’internaute. PageVersEmail Envoie les données d’une page actuellement affichée sous le
navigateur par un email.
PageAfficheDialogue Affiche une page de manière modale. Cette fonction permet de
créer un dialogue avec l’utilisateur. La page est affichée devant PageVersFichier Initialise automatiquement :
et en arrière plan se trouve la page ouvrante, grisée par le mé- la valeur mémoire des rubriques d’un fichier de données avec
canisme de GFI. la valeur des champs de la page. Les rubriques du fichier de
PageAgencementEnCours Renvoie l’indice de l’agencement en cours : données de base reliées aux champs de la fenêtre sont auto-
matiquement affectées avec les valeurs des champs corres-
dans la page en cours. pondants (même si ces champs sont grisés, inactifs, ou invi-
dans la page spécifiée. sibles).
PageChangeAgencement Applique un agencement spécifique sur une page. la valeur des variables WLangage avec la valeur des champs
de la fenêtre. Les variables WLangage reliées aux champs de
PageCourante Renvoie le nom de la page contenant le code WLangage en la page sont automatiquement affectées avec les valeurs des
cours d’exécution. champs correspondants (même si ces champs sont grisés,
PageEcritEntêteHTTP Ajoute un entête HTTP supplémentaire qui sera retourné au inactifs, ou invisibles).
navigateur : PageVersJSP Envoie les données d’une page actuellement affichée sous le
lors de la prochaine fonction d’affichage de la page (PageAf- navigateur vers un serveur JSP.
fiche, PageActualise, ...),
PageVersPHP Envoie les données d’une page actuellement affichée sous le
lors du renvoi automatique de la page courante à la fin de l’ac-
navigateur vers un serveur PHP.
tion en cours.
PageVersSource Initialise automatiquement :
PageExiste Vérifie si la page spécifiée est actuellement affichée dans le
navigateur de l’internaute.Permet de savoir par exemple si une la valeur mémoire des rubriques d’un fichier de données avec
page est affichée dans un cadre différent de celui en cours. la valeur des champs de la page.
la valeur des variables WLangage avec la valeur des champs
PageFermeDialogue Ferme la page courante. Cette page a été ouverte avec la fonc- de la page.
tion PageAfficheDialogue. Une valeur de retour peut être ren-
voyée à la page appelante. PageVisible Indique si la page est visible pour l’utilisateur.
PageInitialisation Remet à zéro (ou non) les champs de la page en cours et lance PHPAffiche Appelle un script PHP externe et renvoie la page résultat dans
les événements d’initialisation des champs et de la page. la fenêtre en cours du navigateur.
PageLitEntêteHTTP Lit et renvoie un ou plusieurs entêtes HTTP reçus par la page PHPExécute Appelle un script externe .php et renvoie le résultat dans une
en cours (ces entêtes sont envoyés par le client au serveur chaîne.
dans la requête courante). PleinEcranActive Passe le navigateur en mode "Plein écran". Le navigateur oc-
PageParamètre Renvoie la valeur d’un paramètre passé à la page en cours. cupe ainsi tout l’espace de l’écran.
PagePosition Fait défiler une page pour positionner un champ dans la partie PleinEcranDésactive Désactive le mode "Plein écran" du navigateur.
visible de la page (le plus haut) dans le navigateur. PopupAffiche Affiche une popup dans la page avec un effet de GFI (Grisage
PagePrécédente Renvoie le nom de la page précédente. des Fenêtres Inaccessibles).

246 Partie 9 : Annexes Partie 9 : Annexes 247

 PopupAffichePage Affiche une page WEBDEV comme une popup dans la page ServeurAppliAjouteTâchePla- Ajoute une nouvelle tâche planifiée à l’application (site ou web-
courante avec un effet de GFI (Grisage des Fenêtres Inacces- nifiée service).
sibles).
ServeurAppliExécuteTâchePla- Lance immédiatement l’exécution d’une tâche planifiée sur un
PopupAnime Affiche une popup dans une cellule de la page. nifiée Serveur d’Application WEBDEV.
PopupFerme Masque une popup affichée dans la page via la fonction Popu- ServeurAppliInfoTâchePlani- Lit la description d’une tâche planifiée.
pAffiche. fiée
PopupFermePage Masque une page affichée en popup via la fonction PopupAf- ServeurAppliListeTâchePlani- Renvoie la liste des tâches planifiées de l’application (site ou
fichePage. fiée Webservice).
RépertoireDonnées La fonction RépertoireDonnées est conservée uniquement ServeurAppliModifieTâchePla- Modifie une tâche planifiée existante.
pour compatibilité. nifiée
RépertoireWeb Renvoie le chemin du répertoire contenant : ServeurAppliSupprimeTâche- Supprime une tâche planifiée associée à l’application (site ou
les images, Planifiée Webservice).
les fichiers Javascript, SessionPrologue Active ou désactive une procédure WLangage appelée sur
les fichiers applet Java, chaque requête dans une session.
les autres fichiers accessibles depuis le navigateur. SiteAdresse Renvoie l’adresse internet de connexion à un site dynamique
rssAffiche Construit un flux RSS et renvoie le contenu du flux RSS au WEBDEV (en mode Session) situé sur le même serveur.
client. SiteDynamiqueAffiche Lance un site dynamique WEBDEV à partir d’une page statique
SaaSConnecte Authentifie un utilisateur d’un site SaaS auprès du webservice ou dynamique WEBDEV.
SaaS gestionnaire du site. SourceVersPage Initialise automatiquement les champs d’une page avec :
SaaSConnexionClient Renvoie les caractéristiques de la connexion à la base de don- les valeurs des rubriques associées dans l’enregistrement en
nées du client. cours (chargé en mémoire) du fichier de données HFSQL décrit
sous l’éditeur d’analyses.
SaaSDéconnecte Déconnecte l’utilisateur d’un site SaaS auprès du webservice
SaaS gestionnaire du site. les valeurs des variables WLangage associées.

SaaSEcritParamètreSite Enregistre une information spécifique pour un site SaaS dans SSLActive Permet d’activer ou de désactiver le mode sécurisé SSL.
la configuration d’un compte client. StockageLocalAjoute Ajoute une valeur au stockage local.
SaaSEstConnecté Détermine si la connexion au webservice SaaS est toujours en StockageLocalDisponible Indique si le stockage local est disponible ou non pour le navi-
cours. gateur en cours.
SaaSLitParamètreSite Lit une information spécifique au client pour le site SaaS en StockageLocalNomValeur Renvoie le nom d’une valeur du stockage local.
cours.
StockageLocalOccurrence Renvoie le nombre de valeurs du stockage local.
SaaSUtilisateurConnecté Renvoie l’utilisateur actuellement connecté via la fonction
SaaSConnecte. StockageLocalRécupère Récupère une valeur du stockage local.
SaaSVérifieService Vérifie les droits d’accès de l’utilisateur à un service du site StockageLocalSupprime Supprime une valeur du stockage local.
SaaS. StockageLocalSupprimeTout Supprime toutes les valeurs du stockage local.
ScriptAffiche Appelle un script ou une page externe (par exemple .php, .asp, SysVersion Renvoie des renseignements sur la version de PHP utilisée sur
.mhtml ou .mht) et renvoie la page résultat dans la fenêtre en le poste serveur en cours.
cours du navigateur.
ToastAffichePopup Affiche une page de type popup pendant une durée donnée
ScriptExécute Appelle un script externe (par exemple .php ou .asp) et renvoie pour afficher un message de type "Toast".
le résultat dans une chaîne.

248 Partie 9 : Annexes Partie 9 : Annexes 249

 Exemples et composants
Contenu
livrés avec WEBDEV
UploadCopieFichier Enregistre sur le serveur un fichier "uploadé" par l’internaute.
Cet upload a pu être effectué :
via un champ de saisie de type "Upload".
via un champ Upload mono ou multi-fichiers.
Les exemples et composants livrés avec WEBDEV présentent de manière didactique les diffé-
UploadFichierEnCours Indique le fichier en cours d’upload via le champ Upload.
rentes fonctionnalités de WEBDEV.
UploadLance Lance l’envoi des fichiers sélectionnés dans un champ Upload. Leur code source est commenté et détaillé.
UploadNomFichier Renvoie le nom d’un fichier "uploadé" par l’internaute. Cet Différents types d’exemples sont livrés avec WEBDEV :
upload a pu être effectué :
• exemples complets : ces exemples correspondent à des sites complets, qui peuvent être utili-
via un champ de saisie de type "Upload". sés sans adaptation.
via un champ Upload mono ou multi-fichiers. • exemples didactiques : ces exemples illustrent une fonctionnalité spécifique.
UploadSupprime Supprime un fichier de la liste des fichiers à uploader : le fi- • exemples unitaires : ces exemples sont constitués d’une page qui peut facilement être testée
chier ne sera pas uploadé sur le serveur. dans le projet en cours. Cette page permet illustre l’utilisation d’une fonction, d’une famille de
fonctions, d’un champ, ...
UploadSupprimeTout Vide la liste des fichiers à uploader : aucun fichier ne sera
• composants : ces exemples sont constitués d’un composant interne, d’un composant externe
uploadé sur le serveur.
et d’un exemple d’utilisation.
UploadTaille Renvoie la taille totale (en octets) des fichiers de l’upload en
cours via un champ Upload. Ces exemples et composants peuvent être ouverts directement depuis la fenêtre d’accueil de
WEBDEV.
UploadTailleEnvoyée Renvoie la taille totale (en octets) des fichiers déjà envoyés par • Si l’exemple n’est pas installé sur le poste, l’exemple est automatiquement téléchargé (depuis
l’upload en cours via un champ Upload. un serveur PC SOFT) et ouvert.
UploadTailleEnvoyéeFichierEn- Renvoie la taille (en octets) déjà envoyée du fichier en cours • Si l’exemple est installé sur le poste, une copie est automatiquement réalisée dans le réper-
Cours d’upload via un champ Upload. toire "Mes sites\Mes exemples".
UploadTailleFichier Renvoie la taille totale (en octets) d’un fichier présent dans un L’exemple ouvert correspond à la copie de l’exemple original. Il est ainsi possible de travailler ou
champ Upload. de faire des modifications sur cette copie. L’exemple original est ainsi conservé. A chaque nou-
velle ouverture de l’exemple (via le bouton "Ouvrir un exemple"), il est possible de travailler sur
UploadTailleFichierEnCours Renvoie la taille totale (en octets) du fichier en cours d’upload l’exemple modifié ou de reprendre l’exemple original.
via un champ Upload.
Des exemples supplémentaires sont livrés avec la Lettre du Support Technique (LST) ou sont dis-
ponibles sur notre site (www.pcsoft.fr).

Exemples complets

eCommerce Site complet de eCommerce personnalisable via une interface

d’administration Web.
La partie vitrine / paiement du site est réalisée en AWP afin
de permettre un référencement optimal des produits.
La partie administration du site est réalisée en session clas-
sique WEBDEV pour garantir une sécurité optimale.
Galerie_Photos Cet exemple est un site de galerie photos.
Honolulu Portail intranet gratuit : messagerie, forum, blogs, …

250 Partie 9 : Annexes Partie 9 : Annexes 251

 WAnnonces Gestion de petites annonces : recherches multicritères, ajout, WW_MotorEquipment Exemple de boutique en ligne. Il contient la partie "front-of-
modification et suppression d’annonces, ainsi qu’une gestion fice" (présentation de produits), la partie panier, paiement
d’utilisateurs. sécurisé.
webmillion Utilise un fichier de données de plus d’1 million d’enregistre- WW_Newsletter Permet de créer un site de gestion de newsletters. Il permet
ments. de créer, rédiger et gérer l’envoi en masse de newsletters à
des abonnés.
WW_Association_AWP Site associatif composé de 2 parties principales :
- la partie "visiteur", réalisée en mode AWP donc référençable. WW_Planning Cet exemple permet d’afficher de façon dynamique les tâches
- la partie "espace membre" réalisée en mode WEBDEV clas- des différents collaborateurs.
sique donc sécurisée. WW_PlanningActivites_Club Cet exemple présente un site pour une structure proposant
Ce site permet de présenter les actualités, les galeries photos, des activités selon un planning précis ; par exemple pour un
la présentation de l’association, ... club de sport.
WW_Association_PHP Site associatif en WEBDEV PHP composé de 2 parties princi- WW_Precilia_Sport Site Web avec une partie boutique. Le site prend la largeur
pales : complète du navigateur avec une image de fond.
- la partie visiteur, accessible par tous.
WW_Precilia_Winter Cet exemple est un site de vente en ligne de matériel de ski.
- la partie administration, réservée aux membres de l’association.
Ce site permet de présenter les actualités, les galeries photos, WW_PreciliaTShirts Cet exemple est un site de vente en ligne de TShirts.
la présentation de l’association, ... Ce site propose une page d’accueil (avec l’ensemble des
produits), une page de description de produit (avec ajout au
WW_Blog_AWP Cet exemple est un site de gestion de blogs, basé sur une
panier) ainsi que plusieurs pages annexes (faq, formulaire de
génération AWP, ce qui permet entre autres de pouvoir réfé-
contact, cgv, etc).
rencer le site dans tous les moteurs de recherche. De plus,
chaque blog peut être exporté en RSS. WW_Presentation_Applica- Site Web responsive qui présente une application Mobile,
tion_Mobile composé d’une page statique totalement responsive.
WW_Blogs_php Cet exemple est un site PHP de gestion de blogs.
WW_Rewali Achat de voyages en ligne.
WW_CMS Cet exemple est un CMS (Content Management System) ou
site de gestion de contenu, typiquement un site d’affichage WW_Statique_Artisanat Cet exemple est un site statique de présentation d’un atelier
d’articles. de production ou d’une entreprise dans le domaine de l’arti-
sanat.
WW_Emprunt Cet exemple permet de simuler des emprunts et notamment
de calculer le montant des mensualités à partir du montant WW_Statique_Restaurant Cet exemple est un site statique de présentation de restau-
emprunté donné, le montant empruntable à partir d’une men- rant, un site "vitrine".
sualité donnée, le rapport d’un placement à partir d’un apport
mensuel. WW_Statique_Societe Cet exemple est un site statique de présentation de société,
Le tableau d’amortissement est affiché pour chacun des cas. un site "vitrine".

WW_FAQ Cet exemple Responsive Web Design propose les principales WW_TamesShop Cet exemple fournit une boutique en ligne complète et immé-
fonctionnalités d’un site de FAQ (foire aux questions). diatement opérationnelle.
Le site prend en charge les catégories de produits, les carac-
WW_Forum_AWP Cet exemple propose les fonctionnalités principales d’un fo- téristiques détaillées, les photos et propose plusieurs compo-
rum utilisateur (création de forums, de sujets et de messages, sants internes modulaires pour gérer l’espace client, le panier,
modération par un administrateur, ...). le paiement...
WW_Forum_PHP Cet exemple propose les fonctionnalités principales d’un fo- WW_TicketTracker Cet exemple est un exemple de gestion de tickets d’incidents.
rum utilisateur (création de forums, de sujets et de messages, Cet exemple peut être utilisé dans tous les domaines où il est
modération par un administrateur, ...). nécessaire de suivre des interventions entre plusieurs per-
sonnes.

252 Partie 9 : Annexes Partie 9 : Annexes 253

 WW_WebDoc Cet exemple est une Gestion Electronique de Documents WW_Gestion_Auto_Erreurs Cet exemple montre l’utilisation de la gestion automatique
(GED). Il utilise la recherche fulltext pour effectuer des re- des erreurs de WEBDEV.
cherches dans le contenu des documents. Les documents
sont classés par catégorie. WW_Graphe Cet exemple didactique présente diverses utilisations du
champ graphe.
Cet exemple montre également comment récupérer le
contenu d’un document PDF. WW_Mobile_Res- Page simple, responsive.
ponsiveWebDesign
WW_WebImmo Site de vente et de location de biens immobiliers.
WW_PayPal_PHP Cet exemple présente comment proposer dans vos sites WEB-
WWDload Ce site permet de proposer des fichiers en téléchargement aux
DEV PHP un paiement sécurisé avec la solution PayPal.
utilisateurs en fonction du groupe auquel ils appartiennent.
WW_Presentation_Res- Page simple, responsive, portfolio de réalisations.
Exemples didactiques ponsiveWebDesign
WW_Saisie_Periode Cet exemple montre l’intégration de code javascript dans un
site WEBDEV. Cet exemple de calendrier gère la sélection de
WebApp Cet exemple présente une utilisation didactique des plans en
période. Parmi les fonctionnalités :
WEBDEV.
- sélection de période en 2 clics.
WW_Acces_Chorus_Pro Cet exemple montre comment accéder à l’API Chorus Pro. - possibilité de spécifier une heure de début et une heure de
fin.
WW_Administration_Res- Page simple, responsive.
ponsiveWebDesign - lien avec un champ de saisie WEBDEV.
- modèle de champ facilement réutilisable.
WW_Agencements Cet exemple est un site pouvant être visualisé sur un terminal
mobile. WW_Signature Cet exemple présente comment dessiner en HTML5 et sauve-
garder l’image dessinée en code navigateur.
WW_Agenda Exemple d’utilisation du champ Agenda pour WEBDEV.
WW_SiteClientSAAS Cet exemple montre l’utilisation des fonctions d’administra-
WW_Assistant Cet exemple met à disposition une classe et un modèle de tion SaaS de WEBDEV.
page réutilisables, qui permettent de créer et de gérer un as-
sistant Web. WW_Statut_Liste Cet exemple est une implémentation très simple de la web-
hook mise à disposition par le robot de surveillance. Il suffit
W W _ B l o g _ R e s - Blog simple, responsive. d’indiquer l’URL de la page webhook de l’exemple comme we-
ponsiveWebDesign bhook à appeler dans les paramètres du robot de surveillance
puis de définir les catégories et les contrôles.
WW_Business_Res- Page simple, responsive.
ponsiveWebDesign WW_TableauDeBord Cet exemple montre l’utilisation du champ Tableau de bord.
WW_Dessin_HTML5 Cet exemple utilise les fonctions de dessin en code naviga- WW_Websocket_Page Cet exemple montre comment utiliser un serveur de websoc-
teur, pour les navigateurs supportant HTML5. ket pour gérer une communication entre plusieurs clients
grâce à une simple page statique WebDev.
WW_Double_Authentification Cet exemple montre comment utiliser la double authenfica-
tion afin de sécuriser l’accès à des comptes utilisateurs. Il uti- WW_WebsocketServeur Cet exemple est un serveur de websocket pour l’exemple WW_
lise une double authentification TOTP qui génère un code à 6 WebSocket_Page
chiffres toutes les 30 secondes.
WW_Zoom_Auto Cet exemple permet d’afficher une miniature d’une image et
WW_Etat Cet exemple montre les différentes méthodes pour réaliser un grâce à un clic sur celle-ci, d’agrandir l’image sans perturber
état. la mise en page.
WW_Flux_RSS Cet exemple montre comment lire et afficher un flux RSS dans WWDialogueNavigateur Cet exemple montre un dialogue entre deux navigateurs dis-
une page WEBDEV grâce au type RSS. tincts.

254 Partie 9 : Annexes Partie 9 : Annexes 255

 Composants
WEBDEV est livré en standard avec projets correspondants à des composants. Ces projets
contiennent :
• une configuration de projet correspondant au composant.
• une configuration de projet correspondant à l’utilisation du composant.
• un composant interne.
Voici les principaux composants livrés avec WEBDEV :

WW_Extraction Permet d’extraire et de stocker le contenu de divers docu-

ments (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 application
WEBDEV dynamique.
WW_PaiementSecurise Permet de gérer un paiement sécurisé en ligne.
Le composant gère actuellement plusieurs solutions de paie-
ment sécurisé : Paybox, Ogone E-Commerce, PayPal, Cyber-
mut, 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 dis-
ponibles sur notre site (www.pcsoft.fr).

256 Partie 9 : Annexes