Concepts de WEBDEV 16 - WINDEV et WEBDEV
Concepts de WEBDEV 16 - WINDEV et WEBDEV
Concepts de WEBDEV 16 - WINDEV et WEBDEV
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
WebDev - <strong>Concepts</strong>Version <strong>16</strong> - (1) 10-2010Visitez régulièrement le site www.pcsoft.fr, espace téléchargement, pour vérifier si <strong>de</strong>smises à jour sont proposées.Adresse e-mail Support Technique Gratuit : supportgratuit@pcsoft.frConseil : Pour recevoir directement <strong>de</strong>s mises à jour intermédiaires <strong>et</strong> <strong>de</strong>s conseilsd’utilisation, abonnez-vous à la LST (revue trimestrielle + CD), en français.C<strong>et</strong>te documentation n’est pas contractuelle. Des modifications ont pu intervenir dansle logiciel <strong>de</strong>puis la parution <strong>de</strong> ce manuel. Veuillez consulter l’ai<strong>de</strong> en ligne.Tous les noms <strong>de</strong> produits ou autres marques cités dans c<strong>et</strong> ouvrage sont <strong>de</strong>s marques déposées par leurs propriétairesrespectifs.© PC SOFT 2010 : Aucune reproduction intégrale ou partielle du présent ouvrage sur quelque support que ce soit nepeut être effectuée sans l’autorisation expresse <strong>de</strong> PC SOFT.
Dans quel ordre lire les manuels ?WebDev est un puissant outil <strong>de</strong> développement <strong>de</strong> sites web, qui fournit enn standardtous les outils nécessaires à la conception <strong>et</strong> à la réalisation <strong>de</strong> sites.Pour une formation rapi<strong>de</strong> <strong>et</strong> efficace à WebDev, nous vous conseillons l’ordre d’apprentissagesuivant :1Lecture <strong>de</strong>s "<strong>Concepts</strong>".Ce manuel présente les principaux concepts nécessaires à la création d’un siteWebDev performant. Certains concepts sont suivis d’une partie "Pratique" détaillantcertaines fonctionnalités <strong>de</strong> l’éditeur.23"Auto-formation" (livre + exercices)Le gui<strong>de</strong> d’auto-formation perm<strong>et</strong> une première approche "pratique" <strong>de</strong> WebDev.Vous pouvez ainsi vous familiariser avec les principaux éditeurs <strong>de</strong> WebDev.Test <strong>de</strong>s exemplesTestez les différents exemples livrés avec WebDev dans les domaines qui vous intéressent(e-commerce, annuaire, planning, ...).Le livre "WLangage" présente la programmation en WLangage. Pour chaque thème <strong>de</strong>programmation, vous trouverez une <strong>de</strong>scription <strong>de</strong> la fonctionnalité associée <strong>et</strong> la liste<strong>de</strong>s fonctions du WLangage correspondantes.L'ai<strong>de</strong> en ligne, accessible par Intern<strong>et</strong> à l’adresse http://doc.pcsoft.fr ou installée avecWebDev perm<strong>et</strong> <strong>de</strong> trouver rapi<strong>de</strong>ment la syntaxe d'une fonction du WLangage, d’obtenirune ai<strong>de</strong> sur l’interface, ...Remarque : En cas <strong>de</strong> divergence entre le manuel <strong>et</strong> l'ai<strong>de</strong> en ligne, suivez les instructions<strong>de</strong> l'ai<strong>de</strong> en ligne.Nous vous souhaitons une agréable prise en main <strong>de</strong> <strong>WEBDEV</strong>.Introduction 3
Organisation du manuelCe manuel présente les principaux concepts nécessaires à la création d’un site WebDevperformant. Certains concepts sont suivis d’une partie "Pratique" détaillant certainesfonctionnalités <strong>de</strong> l’éditeur.Deux types <strong>de</strong> pages sont donc présentes dans ce manuel :Page conceptPage <strong>de</strong> mise en pratique4Introduction
SommairePARTIE 1 - INTERNET : CONCEPTS DE BASEQu’est-ce qu’un site web ? ............................................................................................11Site statique, semi-dynamique ou dynamique ? .........................................................12Les différents types <strong>de</strong> sites dynamiques ...................................................................13Machines <strong>et</strong> logiciels nécessaires ................................................................................14Les différents types <strong>de</strong> pages .......................................................................................15Pages dynamiques <strong>et</strong> pages AWP ................................................................................19Technologie AJAX ...........................................................................................................21Si vous connaissez déjà WinDev ..................................................................................24PARTIE 2 - DÉVELOPPEMENT D’UN SITEProj<strong>et</strong> <strong>et</strong> Analyse ............................................................................................................27Cycle <strong>de</strong> développement d’un site ...............................................................................32Je crée une page sous l’éditeur ... ................................................................................34Les fichiers suivants sont automatiquement créés ...................................................35Page interne ...................................................................................................................36Modèles <strong>de</strong> pages .........................................................................................................37Les différents types <strong>de</strong> champs standard ...................................................................44Répéter un groupe <strong>de</strong> champs : les zones répétées ..................................................52Les <strong>de</strong>ux types <strong>de</strong> co<strong>de</strong> .................................................................................................53Le WLangage : un langage simple <strong>et</strong> très puissant ....................................................56Ordre d’exécution <strong>de</strong>s co<strong>de</strong>s <strong>de</strong>s boutons / liens .......................................................57Upload : Envoi <strong>de</strong> fichiers vers le serveur ....................................................................59Modèles <strong>de</strong> champs ......................................................................................................60Les états .........................................................................................................................61Modèles d’états .............................................................................................................62Différents mo<strong>de</strong>s d’impression ....................................................................................63Afficher <strong>et</strong> enchaîner les pages ....................................................................................64Réaliser un traitement sur plusieurs pages successives ...........................................70Feuilles <strong>de</strong> styles : pour simplifier la mise en page ....................................................71Site centré ou adapté ? .................................................................................................72Référencement d’un site ...............................................................................................73PARTIE 3 - ENVIRONNEMENT DE DÉVELOPPEMENTLes éditeurs <strong>de</strong> WebDev ...............................................................................................79Tableau <strong>de</strong> bord du proj<strong>et</strong> .............................................................................................83WebDev, WinDev, WinDev Mobile : 100% compatible ...............................................84Configuration <strong>de</strong> proj<strong>et</strong> ..................................................................................................85Génération multiple .......................................................................................................86Perso-dossiers : Organisez votre proj<strong>et</strong> ........................................................................87Gestionnaire <strong>de</strong> sources (GDS) .....................................................................................88Sommaire 5
Composant interne ....................................................................................................... 95Composant externe ....................................................................................................... 98Mo<strong>de</strong>s <strong>de</strong> génération .................................................................................................. 106Les Centres <strong>de</strong> Contrôle ............................................................................................. 110Gestion <strong>de</strong>s exigences ................................................................................................ 111Centre <strong>de</strong> Suivi <strong>de</strong> Proj<strong>et</strong>s .......................................................................................... 112Gestion <strong>de</strong>s règles métier .......................................................................................... 113PARTIE 4 - DÉVELOPPEMENT DE SITES WEB : CONCEPTS AVANCÉSRAD / RID ..................................................................................................................... 117Le modèle UML ........................................................................................................... 118Groupware utilisateur ................................................................................................. 126Sites multilingues ........................................................................................................ 13510 conseils d’ergonomie ... ........................................................................................ 139Positionner les champs dans une page .................................................................... 143Superposer les champs .............................................................................................. 144Type d’image : dynamique, statique, générée, ... ? .................................................. 145Personnaliser l’aspect d’un site : éléments d’ambiance ......................................... 147Choisir un type <strong>de</strong> bouton/lien ................................................................................... 149Empêcher le r<strong>et</strong>our sur une page .............................................................................. 150Avantage sécuritaire : la gestion du "Back" .............................................................. 151Cookies : <strong>de</strong>s informations conservées chez l’internaute ....................................... 157Protéger l’accès au site : mots <strong>de</strong> passe .................................................................. 158TLS/SSL : Crypter les informations sur le Web ......................................................... 159Paiement sécurisé avec prestataire .......................................................................... <strong>16</strong>0Envoyer <strong>de</strong>s emails ..................................................................................................... <strong>16</strong>1PARTIE 5 - BASES DE DONNÉESAnalyse : Structure <strong>de</strong> la base <strong>de</strong> données ............................................................... <strong>16</strong>5Les différents types <strong>de</strong> fichiers accessibles ............................................................. 176HyperFileSQL Classic .................................................................................................. 178HyperFileSQL Client/Serveur ...................................................................................... 179Clusters HyperFileSQL Client/Serveur ....................................................................... 180HyperFileSQL : les fichiers créés physiquement ....................................................... 181Associer les champs <strong>et</strong> les données ......................................................................... 182Les requêtes ................................................................................................................ 184Les requêtes intégrées ............................................................................................... 185Le champ Table/Zone Répétée ................................................................................. 186Récupérer <strong>de</strong>s données sur un site ........................................................................... 188Réplication universelle ............................................................................................... 193Architecture 3-tiers ...................................................................................................... 1946Sommaire
PARTIE 6 - TESTER UN SITE WEBTester un site : Les éléments à tester ....................................................................... 197Comment tester un site ? ........................................................................................... 198Le débogueur .............................................................................................................. 200Quand peut-on utiliser le débogueur ? ...................................................................... 201PARTIE 7 - DÉPLOYER UN SITE WEBDéploiement d’un site statique ou semi-dynamique ............................................... 211Déploiement d’un site dynamique WebDev ............................................................. 213Mise en service d’un site dynamique WebDev ......................................................... 217PARTIE 8 - HÉBERGEMENT DE SITES <strong>WEBDEV</strong>A quoi sert l’administrateur WebDev ? ..................................................................... 227Configuration du serveur ............................................................................................ 233Serveur dédié ou mutualisé ? .................................................................................... 234Quel type <strong>de</strong> serveur choisir ? ................................................................................... 236Centre <strong>de</strong> Contrôle d’hébergement ........................................................................... 237Site dynamique sur <strong>de</strong>s configurations spécifiques ................................................ 238Statistiques <strong>de</strong> fréquentation <strong>de</strong>s sites dynamiques .............................................. 241Surveillez vos sites, serveurs, ... ................................................................................ 242PARTIE 9 - ANNEXESFonctions du WLangage spécifiques à WebDev <strong>16</strong> ................................................. 245Composants livrés avec WebDev .............................................................................. 250Exemples livrés avec WebDev ................................................................................... 251Sommaire 7
8Sommaire
PARTIE 1Intern<strong>et</strong> :<strong>Concepts</strong> <strong>de</strong> base
Qu’est-ce qu’unsite web ?Un site web est un ensemble <strong>de</strong> pages HTML (HyperText Markup Language) stockées surun serveur web. Ces pages HTML sont organisées dans un but précis (par exemple, présenterune entreprise, vendre <strong>de</strong>s produits, ...).Un site est <strong>de</strong>stiné à être utilisé par <strong>de</strong>s internautes. Les internautes utilisent un simplenavigateur pour accé<strong>de</strong>r au site.WebDev perm<strong>et</strong> <strong>de</strong> créer facilement <strong>de</strong>s sites web qui gèrent ou non <strong>de</strong>s données.Partie 1 : <strong>Concepts</strong> <strong>de</strong> base 11
Site statique, semi-dynamiqueou dynamique ?Plusieurs types <strong>de</strong> sites peuvent être réalisés :• <strong>de</strong>s sites statiques.• <strong>de</strong>s sites semi-dynamiques• <strong>de</strong>s sites dynamiques.Le tableau ci-<strong>de</strong>ssous présente les principales différences entre ces types <strong>de</strong> sites :Site statique Site semi-dynamique Site dynamiqueLe contenu <strong>de</strong>s pages dusite est fixe, déterminé unefois pour toutes.Un site statique ne peut pasinteragir avec <strong>de</strong>s données.Site statique WebDev : leServeur d’Application Web-Dev n’est pas nécessaire.Le contenu <strong>de</strong>s pages du siteest construit à partir <strong>de</strong> donnéesprésentes dans <strong>de</strong>s fichiers<strong>de</strong> données.Cependant, le contenu <strong>de</strong>spages est fixe.Site semi-dynamiqueWebDev : le Serveur d’ApplicationWebDev n’est pas nécessaire.Les données affichées dansles pages varient.En général, les pages perm<strong>et</strong>tent<strong>de</strong> :- réaliser <strong>de</strong>s traitements <strong>et</strong>/ou <strong>de</strong>s calculs par programmation.- afficher <strong>de</strong>s données stockéesdans une base <strong>de</strong> données.- afficher <strong>de</strong>s images <strong>et</strong> du texteinteractif.Site dynamique WebDev : leServeur d’Application WebDevou le langage PHP sont nécessaires.Remarque : Un site dynamique peut contenir une partie statique (présentation <strong>de</strong> l’entreprise,...).WebDev perm<strong>et</strong> <strong>de</strong> créer :•<strong>de</strong>s pages statiques.•<strong>de</strong>s pages semi-dynamiques.•<strong>de</strong>s pages dynamiques.12Partie 1 : <strong>Concepts</strong> <strong>de</strong> base
Les différents types <strong>de</strong> sitesdynamiquesUn site dynamique perm<strong>et</strong> d’afficher <strong>de</strong>s pages dont le contenu varie. Le plus souvent,le contenu <strong>de</strong> ces pages est lié à une base <strong>de</strong> données.Il est ainsi possible par exemple dans un site dynamique <strong>de</strong> gérer en temps réel les réservations<strong>de</strong> voyages. Ces réservations sont directement enregistrées dans un fichier<strong>de</strong> données <strong>et</strong> peuvent être affichées à tout moment.WebDev propose <strong>de</strong>ux types <strong>de</strong> sites dynamiques :• site dynamique WebDev. Ce type <strong>de</strong> site nécessite un Serveur d’Application WebDevsur le serveur. Il perm<strong>et</strong> <strong>de</strong> manipuler <strong>de</strong> nombreuses bases <strong>de</strong> données.• site dynamique PHP. Ce type <strong>de</strong> site nécessite un moteur PHP sur le serveur. Ce type<strong>de</strong> site est conseillé pour héberger <strong>de</strong>s sites dynamiques chez un hébergeur grandpublic.Partie 1 : <strong>Concepts</strong> <strong>de</strong> base 13
Machines <strong>et</strong> logicielsnécessairesL'internaute• une machine : PC, Mac, Unix, Smartphone, …• un navigateur : Intern<strong>et</strong> Explorer, FireFox, Chrome, ...• un accès Intern<strong>et</strong> (ou Intran<strong>et</strong>)Aucun module ne sera à télécharger. Le fonctionnement est immédiat <strong>et</strong> rapi<strong>de</strong>.Le serveurLa machine <strong>de</strong> développement• 1 machine serveur : PC • 1 machine : PC• 1 système d'exploitationserveur (Windows ou Linux) :Windows 2000 ou supérieur.• 1 logiciel serveur Web :IIS, Apache, …• 1 système d'exploitation :Windows 2000 ou supérieur.• 1 logiciel serveur Web :IIS, Apache, …• 1 Serveur d’ApplicationWebDevou• 1 Moteur PHP(version 4.3.2 minimum)• 1 logiciel WebDev"Développement"• le site lui- même • le site en cours <strong>de</strong>développement• les données *(site dynamique uniquement)• les données (optionnel) *• au moins un navigateur :Intern<strong>et</strong> Explorer, FireFox, Chrome, ...* Les données peuvent se trouver sur une autre machine reliée en réseau.14Partie 1 : <strong>Concepts</strong> <strong>de</strong> base
Les différents types<strong>de</strong> pagesDifférents types <strong>de</strong> pages peuvent être utilisés dans les sites créés avec WebDev :• Les pages statiques. Ce type <strong>de</strong> page perm<strong>et</strong> d’afficher <strong>de</strong>s données fixes.• Les pages semi-dynamiques. Ces pages perm<strong>et</strong>tent d’afficher <strong>de</strong>s données disponiblesdans une base <strong>de</strong> données. Ces pages <strong>et</strong> leur contenu sont générés sur le poste<strong>de</strong> développement lors <strong>de</strong> la création du site. Lorsque les pages HTML correspondantaux pages dynamiques sont créées, le contenu <strong>de</strong> la page est alors défini.• Les pages dynamiques WebDev. Ces pages perm<strong>et</strong>tent d’afficher dynamiquementles informations contenues dans une base <strong>de</strong> données. Le contenu <strong>de</strong> la page varieen fonction <strong>de</strong> l’enregistrement affiché.Lors <strong>de</strong> l’affichage d’une page dynamique, le contexte correspondant est automatiquementsauvegardé <strong>et</strong> mis à jour sur le serveur. Le contexte <strong>de</strong> l’application contientprincipalement les variables globales, les variables <strong>de</strong> positionnement dans lesfichiers <strong>de</strong> données, ...• Les pages dynamiques WebDev AWP. Ces pages perm<strong>et</strong>tent d’afficher dynamiquement<strong>de</strong>s données contenues dans une base <strong>de</strong> données. Le contenu <strong>de</strong> la pagevarie en fonction <strong>de</strong> l’enregistrement affiché.Les pages AWP peuvent utiliser ou non le contexte <strong>de</strong> l’application. Ce contexte peutêtre stocké sous forme <strong>de</strong> cookie ou sur disque. Si les pages AWP n’utilisent pas lecontexte <strong>de</strong> l’application, elles sont autonomes.• Les pages dynamiques PHP. Ces pages perm<strong>et</strong>tent d’afficher dynamiquement <strong>de</strong>sdonnées contenues dans une base <strong>de</strong> données. Ces pages peuvent uniquement êtreutilisées dans un site PHP.Les pages suivantes présentent ces différents types <strong>de</strong> pages.Partie 1 : <strong>Concepts</strong> <strong>de</strong> base 15
Principe d’une page statiquePoste <strong>de</strong>développementDÉVELOPPEMENTCréation d’une pagestatique sousWebDev (fichier ".WWH")Poste ServeurDÉPLOIEMENTPage HTMLCONSULTATIONPoste <strong>de</strong>l’internautePage statique visualiséesous le navigateur<strong>16</strong>Partie 1 : <strong>Concepts</strong> <strong>de</strong> base
Principe d’une page semi-dynamiqueDÉVELOPPEMENTPoste <strong>de</strong>développementBase <strong>de</strong> donnéesassociée au proj<strong>et</strong>Création d’une pagesemi-dynamique sousWebDev (fichier ".WWH")Génération <strong>de</strong>spages statiquesnécessaires (fichiers".HTM")Poste ServeurDÉPLOIEMENTPagesHTMLCONSULTATIONPoste <strong>de</strong>l’internautePages statiques (correspondant aux pagessemi-dynamiques) en exécution sous le navigateur.La page affichée correspond aux informations<strong>de</strong>mandées par l’internaute.Partie 1 : <strong>Concepts</strong> <strong>de</strong> base 17
Principe d’une page dynamiquePoste <strong>de</strong>développementDÉVELOPPEMENTCréation d’une page dynamiquesous WebDev (fichier ".WWH")Poste ServeurDÉPLOIEMENTPageHTMLMoteurWebDevBase <strong>de</strong>donnéesCONSULTATIONPoste <strong>de</strong>l’internautePage dynamique en exécution sous le navigateur.Les données affichées dans les pages varient enfonction <strong>de</strong>s manipulations <strong>de</strong> l’internaute.18Partie 1 : <strong>Concepts</strong> <strong>de</strong> base
Pages dynamiques <strong>et</strong> pagesAWPPage dynamiqueLors <strong>de</strong> l'affichage d'une page dynamique WebDev, les opérations suivantes sonteffectuées :1. Deman<strong>de</strong> d'affichage <strong>de</strong> la page.2. Lancement du moteur WebDev. Le moteur sera présent sur le serveur jusqu'à la fin <strong>de</strong>l'application.3. Création du contexte <strong>de</strong> l'application. Ce contexte sera présent sur le serveur jusqu'àla fin <strong>de</strong> l'application.4. Le moteur WebDev exécute le co<strong>de</strong> serveur <strong>et</strong> construit la page HTML (à partir <strong>de</strong>s données<strong>de</strong> la base <strong>de</strong> données par exemple).5. Lorsque le moteur a fini <strong>de</strong> construire la page HTML, le serveur transm<strong>et</strong> le résultat auclient (le navigateur).Partie 1 : <strong>Concepts</strong> <strong>de</strong> base 19
Pages AWPUne page AWP est un fichier binaire contenant le co<strong>de</strong> HTML <strong>de</strong> la page, <strong>et</strong> le co<strong>de</strong> serveur(saisi sous l'éditeur <strong>de</strong> co<strong>de</strong> par le développeur). Ce fichier doit avoir l'extension".awp" pour pouvoir être interprété par le serveur.Ainsi, lorsqu'un navigateur (le client) désire accé<strong>de</strong>r à une page dynamique AWP réaliséeavec WebDev :1. Le serveur reconnaît qu'il s'agit d'un fichier AWP.2. Le serveur appelle le moteur WebDev pour lire le fichier AWP.3. Le moteur WebDev exécute le co<strong>de</strong> serveur <strong>et</strong> construit la page HTML (à partir <strong>de</strong>s données<strong>de</strong> la base <strong>de</strong> données par exemple).4. Lorsque le moteur a fini <strong>de</strong> construire la page HTML, le moteur se ferme.5. Le serveur transm<strong>et</strong> le résultat (la page HTML) au client (le navigateur).Remarque : il est possible d’utiliser un contexte avec les pages AWP en définissant lesvariables persistantes grâce à la fonction DéclareContexteAWP.20Partie 1 : <strong>Concepts</strong> <strong>de</strong> base
TechnologieAJAXLa technologie AJAX est disponible nativement dans WebDev.Que signifie AJAX <strong>et</strong> quel est son intérêt ?AJAX (pour Asynchronous Javascript and XML) perm<strong>et</strong> <strong>de</strong> rafraîchir uniquement les donnéesmodifiées dans une page HTML sans réafficher la totalité <strong>de</strong> la page. Par exemple,si certains éléments présents dans une page affichée (le contenu du panier, les caractéristiquesd'un produit, une liste <strong>de</strong> villes, une carte géographique, …) doivent être modifiés,seuls ces éléments seront rafraîchis. Le serveur n'aura pas à envoyer la page entièresur le poste <strong>de</strong> l'internaute.C<strong>et</strong>te technologie a <strong>de</strong> multiples avantages :• le serveur est moins sollicité. Il peut alors supporter un plus grand nombre <strong>de</strong> connexionssimultanées.• les informations qui circulent sont <strong>de</strong> taille réduite.• la durée <strong>de</strong> transmission est plus courte.• l'affichage pour l'internaute est immédiat <strong>et</strong> sans eff<strong>et</strong> visuel.AJAX peut être utilisé à <strong>de</strong>ux niveaux différents dans un site WebDev :• AJAX automatique <strong>et</strong> immédiat : un simple clic suffit pour accé<strong>de</strong>r aux avantagesAJAX. Le co<strong>de</strong> reste le même.• AJAX programmé : utilisation <strong>de</strong>s fonctions <strong>de</strong> gestion AJAX pour les traitements complexes.Remarque : Seuls les navigateurs suffisamment récents supportent la technologieAJAX : Intern<strong>et</strong> Explorer 5.5 <strong>et</strong> supérieur, FireFox 1.0 <strong>et</strong> supérieur, N<strong>et</strong>scape 7 <strong>et</strong> supérieur,Opera 8 <strong>et</strong> supérieur, Safari 1.2 <strong>et</strong> supérieur, … La fonction AJAXDisponible perm<strong>et</strong><strong>de</strong> savoir si le navigateur en cours supporte la technologie AJAX. Si un traitement utilisantla technologie AJAX est exécuté sur un navigateur ne supportant pas c<strong>et</strong>te technologie,le traitement s'exécute "comme si" il n’utilisait pas la technologie AJAX (rafraîchissement<strong>de</strong> la page entière par exemple).Partie 1 : <strong>Concepts</strong> <strong>de</strong> base 21
AJAX automatique <strong>et</strong> immédiatLe schéma suivant présente l’utilisation automatique <strong>et</strong> immédiate <strong>de</strong> AJAX dans un siteWebDev :NavigateurServeur WebActionMise à jourautomatique<strong>de</strong>s élémentsmodifiésEnvoi<strong>de</strong> la requêteEnvoi <strong>de</strong>séléments modifiésuniquementExécution<strong>de</strong> la requêtePar exemple, une page d'un site perm<strong>et</strong> <strong>de</strong> connaître différentes caractéristiques d'unpays (capitale, <strong>de</strong>vise, drapeau, situation, …). En fonction du pays sélectionné par l'internaute,les informations correspondantes sont affichées.Action <strong>de</strong> l'internaute. Dans notre exemple, sélection du pays dans la combo"Sélectionner le pays souhaité".Envoi <strong>de</strong> la requête au serveur.Exécution <strong>de</strong> la requête : recherche <strong>de</strong>s caractéristiques du pays choisi.Envoi du résultat <strong>de</strong> la requête :- sans AJAX : toute la page est envoyée.- avec AJAX : seules les caractéristiques du pays sont envoyées.Affichage <strong>de</strong>s caractéristiques du pays :- sans AJAX : toute la page est réaffichée.- avec AJAX : seuls les champs contenant les caractéristiques du pays sontrafraîchis.22Partie 1 : <strong>Concepts</strong> <strong>de</strong> base
AJAX programméLe schéma suivant présente l'utilisation <strong>de</strong> "AJAX programmé" dans un site WebDev :NavigateurServeur WebActionMise à jourautomatique<strong>de</strong>s élémentsmodifiésDeman<strong>de</strong>d’exécution <strong>de</strong> laprocédureEnvoi durésultat uniquementAnalyse du résultatExécution<strong>de</strong> la procédureserveurGénérationdu résultat :Document XML,chaîne <strong>de</strong>caractèresExécution d'un traitement navigateur (fonction AJAXExécute ou AJAXExécuteAsynchrone).Deman<strong>de</strong> d'exécution d'une procédure serveur.Exécution <strong>de</strong> la procédure serveur.Génération du résultat. Le résultat <strong>de</strong> la procédure sera exprimé sous formed'une chaîne <strong>de</strong> caractères ou d'un document XML.Envoi du résultat <strong>de</strong> la procédure (Mot-clé RENVOYER).Analyse du résultat <strong>de</strong> la procédure.Affichage <strong>de</strong>s informations modifiées. Seuls les champs nécessaires sont rafraîchis.Partie 1 : <strong>Concepts</strong> <strong>de</strong> base 23
Si vous connaissez déjàWinDevVoici les principales différences entre WebDev <strong>et</strong> WinDev :- WebDev perm<strong>et</strong> <strong>de</strong> créer <strong>de</strong>s pages alors que WinDev perm<strong>et</strong> <strong>de</strong> créer <strong>de</strong>s fenêtres.- Dans WebDev, différents types <strong>de</strong> co<strong>de</strong> peuvent être saisis: un co<strong>de</strong> WLangages’exécutant sur le serveur, un co<strong>de</strong> WLangage s’exécutant sur le navigateur, <strong>et</strong> unco<strong>de</strong> Javascript s’exécutant sur le navigateur.Si vous créez une page PHP, un co<strong>de</strong> supplémentaire apparaît : un co<strong>de</strong> PHP s’exécutantsur le serveur.- De nouvelles fonctions du WLangage spécifiques au web sont disponibles.- Certaines fonctions du WLangage inadaptées au web n’existent plus.- Certaines fonctions du WLangage sont uniquement utilisables dans un traitementexécutable en co<strong>de</strong> serveur.- Certaines fonctions du WLangage sont uniquement utilisables dans un traitementexécutable en co<strong>de</strong> navigateur.- De nouveaux types <strong>de</strong> champs plus spécifiques à une application web sontdisponibles :•Champ d’affichage formaté•Champ Appl<strong>et</strong> Java•Champ Cellule•Champ Chemin <strong>de</strong> navigation•Champ Flash•Champ Flex•Champ Image clicable (Map Area)•Champ IFrame•Champ Libellé HTML•Champ Lien•Champ Ligne•Champ Page Interne•Champ Page Cornée•Champ Plan du site•Champ Régl<strong>et</strong>te•Champ SilverLight•Champ Tableau HTML•Champ Upload•Champ Vign<strong>et</strong>te- Certains types <strong>de</strong> champs inutiles sur Intern<strong>et</strong> ont disparu : ascenseur, potentiomètre,ActiveX, Obj<strong>et</strong> OLE, spin, ...24Partie 1 : <strong>Concepts</strong> <strong>de</strong> base
PARTIE 2Développementd’un site
Proj<strong>et</strong> <strong>et</strong>AnalyseLe développement d’un site web en utilisant WebDev repose sur <strong>de</strong>ux élémentsprincipaux : le Proj<strong>et</strong> <strong>et</strong> l’Analyse.Un Proj<strong>et</strong> WebDev est un ensemble d’éléments : pages, états, champs, classes, composants,... dont l’assemblage perm<strong>et</strong> <strong>de</strong> réaliser un site web.Une Analyse WebDev regroupe la <strong>de</strong>scription <strong>de</strong>s fichiers <strong>de</strong> données du site.Un site est construit à partir d’un proj<strong>et</strong>.Un proj<strong>et</strong> est généralement associé à une analyse.Une analyse peut être associée à un ou plusieurs proj<strong>et</strong>s.Partie 2 : Développement d’un site 27
Le proj<strong>et</strong> en pratique1 PrésentationLa première étape <strong>de</strong> la <strong>de</strong>scription d’un site consisteà créer un proj<strong>et</strong>.Lors <strong>de</strong> la création d’un proj<strong>et</strong>, plusieurs questionsvous sont posées afin que votre proj<strong>et</strong> correspon<strong>de</strong>à toutes vos attentes. Toutes les caractéristiquesdu proj<strong>et</strong> spécifiées lors <strong>de</strong> la création du proj<strong>et</strong>pourront être modifiées par la suite.2 Création du proj<strong>et</strong>Pour créer un proj<strong>et</strong> :1. Sélectionnez l’option "Fichier .. Nouveau .. Proj<strong>et</strong>".L’assistant <strong>de</strong> création du proj<strong>et</strong> s’ouvre.2. Spécifiez les différentes options du proj<strong>et</strong> :• le nom <strong>et</strong> l’emplacement. Ces options ne serontpas modifiables. Le proj<strong>et</strong> correspond à un fichier".WWP". Tous les obj<strong>et</strong>s associés au proj<strong>et</strong> serontcréés dans le répertoire spécifié.•le type <strong>de</strong> génération du proj<strong>et</strong> c’est-à-dire quelsera le type <strong>de</strong> site généré par le proj<strong>et</strong> : site statique,site dynamique WebDev, site semi-dynamique,site dynamique PHP• si le proj<strong>et</strong> va être manipulé par plusieurs développeurs.Il est possible d’utiliser le groupwaredéveloppeur ou le gestionnaire <strong>de</strong> sources (GDS)pour partager le proj<strong>et</strong>.• la charte <strong>de</strong> programmation. C<strong>et</strong>te charte perm<strong>et</strong><strong>de</strong> préfixer automatiquement les variables,les noms <strong>de</strong> champs, <strong>de</strong> pages, ...•la charte graphique.• les langues gérées. Ces langues seront proposéespar défaut dès qu’une option d’un champ,d’une page, d’un état, ... pourra être traduite.3. Indiquez si le proj<strong>et</strong> est associé ou non à unebase <strong>de</strong> données. Si oui, la base <strong>de</strong> données peutexister ou être créée.4. Vali<strong>de</strong>z l’assistant. Le proj<strong>et</strong> créé <strong>de</strong>vient le proj<strong>et</strong>en cours.Remarques :• Si vous avez <strong>de</strong>mandé la création d’une analyse,l’assistant correspondant se lance automatiquement.• L’ensemble <strong>de</strong>s informations fournies peut êtremodifié dans la <strong>de</strong>scription du proj<strong>et</strong> (option"Proj<strong>et</strong> .. Description du proj<strong>et</strong>").3 Tableau <strong>de</strong> bord <strong>et</strong> graphe du proj<strong>et</strong>3.1 Tableau <strong>de</strong> bordTout responsable <strong>de</strong> proj<strong>et</strong> cherche à avoir unevision globale <strong>et</strong> synthétique <strong>de</strong> l'état d'avancement<strong>de</strong>s proj<strong>et</strong>s qu'il dirige.Tout responsable qualité veut connaître le nombre<strong>et</strong> l'importance <strong>de</strong>s bogues <strong>de</strong>s proj<strong>et</strong>s <strong>et</strong> en suivrel'évolution.Le responsable fonctionnel cherche à savoir quellessont les évolutions <strong>de</strong>mandées par les utilisateurs.Le développeur cherche à lancer directement <strong>et</strong>rapi<strong>de</strong>ment les éléments du proj<strong>et</strong>, les co<strong>de</strong>s lesplus utilisés, ...Le tableau <strong>de</strong> bord perm<strong>et</strong> <strong>de</strong> répondre à tous cessouhaits. Le tableau <strong>de</strong> bord propose différentsvoyants perm<strong>et</strong>tant d'obtenir une vision globale <strong>de</strong>sdifférents indicateurs. Les différents voyants passentdu vert au rouge à chaque fois qu'une partiedu proj<strong>et</strong> nécessite une intervention.Pour afficher le tableau <strong>de</strong> bord <strong>de</strong> votre proj<strong>et</strong>, ilsuffit <strong>de</strong> sélectionner l'option "Proj<strong>et</strong> .. Tableau <strong>de</strong>bord du proj<strong>et</strong>".28Partie 2 : Développement d’un site
3.2 Graphe du proj<strong>et</strong>L'éditeur <strong>de</strong> proj<strong>et</strong> perm<strong>et</strong> <strong>de</strong> visualiser <strong>de</strong> manièregraphique les différents éléments du proj<strong>et</strong> (pages,états, requêtes, ...) <strong>et</strong> leurs enchaînements.Pour afficher le graphe du proj<strong>et</strong>, il suffit <strong>de</strong> sélectionnerl’option "Proj<strong>et</strong> .. Graphe du proj<strong>et</strong>".3.3 Les éléments du proj<strong>et</strong>Le proj<strong>et</strong> est composé <strong>de</strong> pages, d’états, <strong>de</strong> requêtes,<strong>de</strong> collections <strong>de</strong> procédures, ...Pour connaître la liste <strong>de</strong>s éléments d’un proj<strong>et</strong>,sélectionnez l’option "Proj<strong>et</strong> .. Liste <strong>de</strong>s élémentsdu proj<strong>et</strong>".C<strong>et</strong>te option perm<strong>et</strong> <strong>de</strong> :• ajouter à votre proj<strong>et</strong> <strong>de</strong>s éléments appartenantà <strong>de</strong>s proj<strong>et</strong>s accessibles <strong>de</strong>puis votre poste. Lesfichiers correspondants ne seront pas déplacésdans le répertoire <strong>de</strong> votre proj<strong>et</strong>.•supprimer <strong>de</strong>s éléments <strong>de</strong> votre proj<strong>et</strong>. Lesfichiers correspondants ne sont pas supprimésphysiquement.Pour rechercher rapi<strong>de</strong>ment un élément <strong>de</strong> votreproj<strong>et</strong>, utilisez la combinaison <strong>de</strong> touches"CTRL + E" <strong>de</strong>puis n’importe quel éditeur.4 Manipulations du proj<strong>et</strong>Voici les principales manipulations pouvant êtreréalisées sur un proj<strong>et</strong> :• Archiver un proj<strong>et</strong>• Restaurer un proj<strong>et</strong>•Dupliquer un proj<strong>et</strong>• Copier ou supprimer un proj<strong>et</strong>• Renommer un proj<strong>et</strong>Pour plus <strong>de</strong> détails sur ces fonctionnalités, consultezl’ai<strong>de</strong> en ligne.5 Dossier du proj<strong>et</strong>WebDev perm<strong>et</strong> d’imprimer différents dossiersdétaillant l’ensemble <strong>de</strong>s éléments (page, état,fichier <strong>de</strong> données, rubrique, ...) du proj<strong>et</strong>. Ces dossierspeuvent être imprimés grâce à :• l’option "Proj<strong>et</strong> .. Imprimer le dossier du proj<strong>et</strong>".Le dossier peut contenir l’ensemble <strong>de</strong>s caractéristiquesdu proj<strong>et</strong>.• l’option "Fichier .. Imprimer le dossier". Le dossierest alors constitué uniquement <strong>de</strong>s caractéristiques<strong>de</strong> l’élément (fenêtre, page, état,requête, ...) en cours.5.1 Type <strong>de</strong> dossierPlusieurs types <strong>de</strong> dossier sont proposés :•Dossier Analyse / Fichier / Requêtes: Contientles informations sur l’analyse, les fichiers <strong>et</strong> lesrequêtes du proj<strong>et</strong>.•Dossier IHM (Interface Homme Machine): Contientuniquement la représentation <strong>de</strong>s pages <strong>et</strong><strong>de</strong>s états, ainsi que leur enchaînement.• Dossier Co<strong>de</strong> : Contient l’ensemble <strong>de</strong>s traitements<strong>de</strong> tous les obj<strong>et</strong>s du proj<strong>et</strong>.• Dossier Technique : Contient les traitements <strong>et</strong>les <strong>de</strong>scriptions techniques <strong>de</strong> tous les obj<strong>et</strong>s duproj<strong>et</strong>.• Dossier Compl<strong>et</strong> : Contient toutes les informationsdu proj<strong>et</strong>. Ce dossier correspond à la fusion<strong>de</strong> tous les types <strong>de</strong> dossiers.Type d’édition du dossierLe dossier peut au choix être :•imprimé,•exporté vers un document RTF, vers un fichierXML,• exporté vers un fichier HTML (un navigateur intern<strong>et</strong>doit être installé sur le poste en cours),• exporté vers un fichier texte.5.2 Zones d’impressionSi <strong>de</strong>s représentations graphiques (graphe du proj<strong>et</strong>,MLD, diagrammes UML,...) doivent être imprimées,il est nécessaire <strong>de</strong> configurer les zonesd’impression avant d’imprimer le dossier.Pour spécifier les zones d’impression <strong>de</strong> la représentationgraphique en cours :1. Sélectionnez l’option "Affichage .. Zonesd’impression". Des bordures représenta nt leszones imprimables dans le dossier apparaissentsous l’éditeur en cours.Partie 2 : Développement d’un site 29
2. Réduisez l’affichage <strong>de</strong> la représentation graphique(option "Affichage .. Zoom" ou [Ctrl] + Roul<strong>et</strong>te<strong>de</strong> la souris) pour visualiser l’ensemble du graphe.3. A l’ai<strong>de</strong> <strong>de</strong> la souris :• déplacez ces bordures à l’endroit désiré en maintenantle bouton <strong>de</strong> la souris enfoncé (la couleurdu curseur <strong>de</strong> la souris est noire).• choisissez le nombre <strong>de</strong> pages sur lesquelles lareprésentation graphique doit être imprimée (lecurseur <strong>de</strong> la souris se transforme en double-flècheNord-Ouest / Sud-Est).Si le format d'impression est modifié (passage <strong>de</strong>A4 à A3 par exemple dans les propriétés <strong>de</strong> l'imprimante),il est possible d'adapter le format <strong>de</strong>spages du dossier. Pour cela :1. Définissez <strong>de</strong>s zones d'impression.2. Affichez les options <strong>de</strong> mise en page du dossier(option "Fichier .. Mise en page du dossier").3. Sélectionnez l'option "Adapter la taille <strong>de</strong>s zonesd'impression <strong>de</strong>s documents ouverts".4. Lancez l'impression du dossier.30Partie 2 : Développement d’un site
Partie 2 : Développement d’un site 31
Cycle <strong>de</strong> développementd’un siteWebDev couvre la totalité du cycle <strong>de</strong> développement d’un site :Détail <strong>de</strong>s différentes phases :Phase <strong>de</strong> conception : Il est possible <strong>de</strong> concevoir un site à partir d’un simple cahier <strong>de</strong>scharges, d’une modélisation UML <strong>de</strong>s traitements ou même à partir <strong>de</strong> fichiers <strong>de</strong> donnéespréexistants.Phase <strong>de</strong> développement : La création du proj<strong>et</strong> <strong>et</strong> <strong>de</strong> l’analyse est réalisée à l’ai<strong>de</strong> d’assistantstrès compl<strong>et</strong>s. Le développement peut être effectué en mo<strong>de</strong> RAD (Rapid DevelopmentApplication) avec génération automatique du co<strong>de</strong> <strong>et</strong> <strong>de</strong>s IHM ou être le résultatd’une création manuelle <strong>de</strong>s différents éléments du proj<strong>et</strong>.32Partie 2 : Développement d’un site
Phase <strong>de</strong> tests <strong>et</strong> génération : WebDev offre toute une panoplie d’outils <strong>de</strong> tests automatiquespour garantir la fiabilité <strong>de</strong>s applications <strong>et</strong> assurer la non-régression entre lesphases <strong>de</strong> développement.Phase <strong>de</strong> déploiement : Le déploiement d’un site dynamique WebDev est réalisé sur unserveur d’application WebDev. Lorsque le site est déployé, il est possible <strong>de</strong> réaliser les<strong>de</strong>rniers tests avant d’ouvrir le site aux utilisateurs.Partie 2 : Développement d’un site 33
Je crée une page sousl’éditeur ...Pour créer une page avec WebDev, les étapes sont les suivantes :Création <strong>de</strong> la page sous l’éditeur <strong>de</strong> pages <strong>de</strong> WebDev.Saisie du co<strong>de</strong> (étape optionnelle).Co<strong>de</strong> navigateurCo<strong>de</strong> serveurEnregistrement <strong>de</strong> la page.34Partie 2 : Développement d’un site
Les fichiers suivants sontautomatiquement créés :Légen<strong>de</strong> :.WWH : Format source <strong>de</strong>s pagesCe fichier contient la <strong>de</strong>scription complète <strong>de</strong> la page(champ, co<strong>de</strong> navigateur, co<strong>de</strong> serveur). Ce fichier estutilisé par l’éditeur <strong>et</strong> reste sur la machine du développeur..HTM génériqueCe fichier contient la <strong>de</strong>scription complète <strong>de</strong> la page(champ, co<strong>de</strong> navigateur, co<strong>de</strong> serveur). Certains paramètres<strong>de</strong> c<strong>et</strong>te page sont génériques <strong>et</strong> seront remplisdynamiquement lors <strong>de</strong> l’affichage <strong>de</strong> la page..HTM : Page HTML du siteGénéré à partir du fichier WWH, ce fichier contient la<strong>de</strong>scription <strong>de</strong>s champs en HTML <strong>et</strong> le co<strong>de</strong> navigateur(si le co<strong>de</strong> a été saisi en WLangage, il est automatiquementtraduit en Javascript). Ce fichier sera présent surle serveur..WDL : Bibliothèque du proj<strong>et</strong>Générée lors du déploiement du site dynamique,la bibliothèque contient le co<strong>de</strong> serveur <strong>de</strong>s pagesdu proj<strong>et</strong>. Ce fichier sera présent sur le serveur..AWP : Page AWPGénéré à partir du fichier WWH, ce fichier contientla <strong>de</strong>scription <strong>de</strong>s champs, le co<strong>de</strong> serveur, leco<strong>de</strong> navigateur. Ce fichier sera présent sur leserveur..PHP : Page PHPGénéré à partir du fichier WWH, ce fichier contientla <strong>de</strong>scription <strong>de</strong>s champs, le co<strong>de</strong> serveur, leco<strong>de</strong> navigateur au format PHP. Ce fichier seraprésent sur le serveur.Partie 2 : Développement d’un site 35
PageinterneLe champ Page interne perm<strong>et</strong> d’inclure une page (<strong>et</strong> son co<strong>de</strong>) dans une autre page. Al’exécution, la page interne sera dynamiquement fusionnée à la page hôte.1. Création d’une page interneUne page interne est une page spécifique qui ne comporte ni barre <strong>de</strong> titre, ni menu.Dans c<strong>et</strong>te page, tous les types <strong>de</strong> champs peuvent être utilisés.Dans l’exemple, une page interne perm<strong>et</strong> <strong>de</strong> gérer le panier.2. Utilisation d’une page internePour utiliser une page interne, il suffit <strong>de</strong> :• créer un champ <strong>de</strong> type page interne.• sélectionner dans la <strong>de</strong>scription du champ la page interne à utiliser <strong>et</strong> vali<strong>de</strong>r.Remarques :• Il n’est pas possible <strong>de</strong> modifier par programmation la page interne utilisée dans lechamp "Page interne".• La zone d’accueil est rectangulaire <strong>et</strong> aucune surcharge n’est possible. Pour réaliser<strong>de</strong>s surcharges, il est conseillé d’utiliser <strong>de</strong>s modèles <strong>de</strong> champs.36Partie 2 : Développement d’un site
Modèles <strong>de</strong>pagesWebDev perm<strong>et</strong> <strong>de</strong> créer <strong>de</strong>s modèles <strong>de</strong> pages. Un modèle est <strong>de</strong>stiné à contenir <strong>de</strong>séléments communs à un ensemble <strong>de</strong> pages du site.Les modifications effectuées dans un modèle <strong>de</strong> pages sont automatiquement reportéessur toutes les pages utilisant ce modèle.Un modèle <strong>de</strong> pages perm<strong>et</strong>, par exemple, <strong>de</strong> respecter la charte graphique définie pourun site.Définition d’un modèle <strong>de</strong> pages.Le modèle est encadré d’untrait jaune sous l’éditeur.Utilisation du modèle dans plusieurs pages.Les éléments appartenant au modèle sont i<strong>de</strong>ntifiés par un carré jaune.Pour créer une page utilisant un modèle, sélectionnez le modèle à utiliser lors <strong>de</strong> la création<strong>de</strong> la page.Remarque : La programmation associée aux éléments du modèle peut être directementréalisée dans le modèle.Les caractéristiques <strong>de</strong>s éléments peuvent être désolidarisées du modèle. Par exemple,désolidariser la position d’un champ du modèle pour positionner le champ ailleurs touten conservant les autres évolutions sur le champ (co<strong>de</strong>, style, ...). On parle alors d’héritage.Dans ce cas, les éléments sont i<strong>de</strong>ntifiés par un carré bleu.Partie 2 : Développement d’un site 37
Les pages en pratiqueUne page a pour but d’afficher, <strong>de</strong> consulter <strong>et</strong> <strong>de</strong>saisir <strong>de</strong>s informations. Ces informations peuventprovenir <strong>de</strong>s fichiers <strong>de</strong> données d’une analyse, <strong>de</strong>fichiers externes, <strong>de</strong> requêtes, ...WebDev propose plusieurs solutions pour créer lespages d’un proj<strong>et</strong> :• Créer une page vierge avec l’assistant.• Construire l’ensemble <strong>de</strong>s pages du site à partir<strong>de</strong> la <strong>de</strong>scription <strong>de</strong> l’analyse.• Créer une page à partir <strong>de</strong> la <strong>de</strong>scription <strong>de</strong> l’analyse(avec son co<strong>de</strong> ou non).• Créer <strong>de</strong>s pages basées sur un modèle, ...quelle que soit la métho<strong>de</strong> utilisée, la page pourraêtre modifiée après création : il sera possibled’ajouter, modifier ou supprimer <strong>de</strong>s champs, <strong>de</strong>modifier les caractéristiques <strong>de</strong> la page.Pour plus <strong>de</strong> détails sur la manipulation <strong>de</strong>schamps d’une page, consultez “Les champs en pratique”,page 48.Ce chapitre traite les suj<strong>et</strong>s suivants :• “Création d’une page”, page 38• “Manipulations simples sur une page”, page 39• “Principales caractéristiques d’une page”,page 39• “Page interne”, page 39• “Modèles <strong>de</strong> pages”, page 40• “Actualiser une page dynamique”, page 40• “Les contextes <strong>de</strong> pages”, page 40• “Ouvrir une page dans un site WebDev”, page 41• “Traitements associés aux pages”, page 42• "Les menus", page 421 Création d’une pageWebDev propose plusieurs métho<strong>de</strong>s pour créerune page :• Création <strong>de</strong> pages vierges, sans aucun champ.•Création <strong>de</strong> pages pré-définies (<strong>de</strong> type RADDynamique, RAD Semi-Dynamique, RAD PHP ouStandard).• Création <strong>de</strong> pages par le RAD proj<strong>et</strong>.Remarque : Les principales caractéristiques <strong>de</strong>spages sont détaillées dans l’ai<strong>de</strong> en ligne.1.1 Création <strong>de</strong> pages viergesPour créer une page vierge :1. Sélectionnez l'option "Fichier .. Nouveau .. Page".2. Choisissez le type "Vierge".3. Spécifiez le modèle <strong>de</strong> la page.4. Vali<strong>de</strong>z la création <strong>de</strong> la page. Une page viergeest créée.5. Enregistrez la page (option "Fichier.. Enregistrer").6. Spécifiez le nom <strong>de</strong> la page. La page correspondà un fichier ".WWH". Par défaut, ce fichier sera créédans le répertoire principal du proj<strong>et</strong>. Ce nom serautilisé pour manipuler la page.7. Créez les champs dans la page.Par défaut la page créée est dynamique. Le type <strong>de</strong>la page peut être modifié dans la fenêtre <strong>de</strong> <strong>de</strong>scription<strong>de</strong> la page. Pour plus <strong>de</strong> détails, consultez“Principales caractéristiques d’une page”, page 39.Les différents types <strong>de</strong> champs sont présentésdans le chapitre “Les différents types <strong>de</strong> champsstandard”, page 44.1.2 Création <strong>de</strong> pages pré-définiesPour créer une page pré-définie :1. Sélectionnez l'option "Fichier .. Nouveau .. Page".2. Choisissez le type <strong>de</strong> la page à créer. C<strong>et</strong>te pagepeut être :• R.A.D. Dynamique : C<strong>et</strong>te page perm<strong>et</strong>tra <strong>de</strong>visualiser <strong>et</strong>/ou <strong>de</strong> modifier les enregistrementsd’un ou <strong>de</strong> plusieurs fichiers.• R.A.D. Semi-dynamique : C<strong>et</strong>te page perm<strong>et</strong>tra<strong>de</strong> visualiser les enregistrements d’un ou <strong>de</strong> plusieursfichiers.• R.I.D. : C<strong>et</strong>te page perm<strong>et</strong>tra <strong>de</strong> visualiser <strong>et</strong>/ou<strong>de</strong> modifier les enregistrements d’un ou <strong>de</strong> plusieursfichiers. Seule l’interface <strong>de</strong> la page estgénérée. Le co<strong>de</strong> est à la charge du développeur.• Vierge / Modèles : Perm<strong>et</strong> <strong>de</strong> créer une pagevierge utilisant le modèle <strong>de</strong> pages sélectionné.• Page interne : Perm<strong>et</strong> <strong>de</strong> créer <strong>de</strong>s pages internesqui seront utilisées dans <strong>de</strong>s champs <strong>de</strong> type"Page interne". Les pages internes perm<strong>et</strong>tentd’inclure une page (<strong>et</strong> son co<strong>de</strong>) dans un champd’une autre page.• Frames<strong>et</strong> : Perm<strong>et</strong> <strong>de</strong> créer différents types <strong>de</strong>Frames<strong>et</strong>s. Chaque Frame <strong>de</strong>vra être associéeaux pages <strong>de</strong> votre proj<strong>et</strong> sous l’éditeur.38Partie 2 : Développement d’un site
3. Selon le type <strong>de</strong> page choisi, saisissez les informations<strong>de</strong>mandées dans les différents écrans <strong>de</strong>l’assistant (ces écrans varient selon le type <strong>de</strong> pagesélectionné).4. Vali<strong>de</strong>z la création <strong>de</strong> la page.1.3 Création <strong>de</strong>s pages du proj<strong>et</strong> par constructionautomatique du site (R.A.D.)Pour les sites dynamiques, les pages du proj<strong>et</strong> peuventêtre créés directement en une seule opérationà partir <strong>de</strong> la <strong>de</strong>scription <strong>de</strong> l'analyse, par la constructionautomatique du site (RAD).Pour plus <strong>de</strong> détails sur les pages créées par le RAD,consultez l’ai<strong>de</strong> en ligne.Pour créer le site dynamique par le R.A.D. :1. Sélectionnez l'option "Atelier.. RAD Applicationcomplète".Attention : Pour utiliser c<strong>et</strong>te option, le proj<strong>et</strong> doitêtre associé à une analyse générée au moins unefois.2. Sélectionnez le pattern RAD à utiliser.3. Sélectionnez les fichiers utilisés pour la génération.4. Sélectionnez les fichiers principaux qui serontles points d’entrée dans l’application (principalement,ces fichiers seront utilisés pour m<strong>et</strong>tre enplace les options <strong>de</strong> menu).5. Associez si nécessaire une image à chaquefichier. C<strong>et</strong>te image sera utilisée pour représenterles fichiers.6. Vali<strong>de</strong>z la création <strong>de</strong> votre application par leRAD.2 Manipulations simples sur une pageL’éditeur <strong>de</strong> pages perm<strong>et</strong> <strong>de</strong> réaliser les manipulationssuivantes sur les pages :• Ouvrir une page sous l’éditeur : Il suffit <strong>de</strong> double-cliquersur le nom <strong>de</strong> la page affiché dans levol<strong>et</strong> "Explorateur <strong>de</strong> proj<strong>et</strong>".• Sauvegar<strong>de</strong>r <strong>et</strong> copier une page.• Importer <strong>et</strong> exporter une page• Modifier l’ordre <strong>de</strong> navigationPour plus <strong>de</strong> détails sur ces manipulations, consultezl’ai<strong>de</strong> en ligne.3 Principales caractéristiques d’une pageUne page peut accueillir tous les types <strong>de</strong> champsdisponibles.Une page peut :•avoir une image <strong>de</strong> fond : c<strong>et</strong>te image est affichéeen fond <strong>de</strong> la page <strong>et</strong> les champs viennentse superposer à c<strong>et</strong>te image.•avoir un menu déroulant : ce menu perm<strong>et</strong>traaux internautes d’accé<strong>de</strong>r plus rapi<strong>de</strong>ment auxprincipales fonctionnalités du site. Pour créer unmenu déroulant dans une page, il suffit d’utiliserl’option "Insertion .. Menu". Les <strong>de</strong>ux premièresoptions apparaissent dans la page. Les optionspeuvent être manipulées grâce au menu contextuel<strong>de</strong>s options. Les options <strong>de</strong> menu peuventensuite être manipulées par programmation.Pour plus <strong>de</strong> détails, consultez “Manipuler lesoptions <strong>de</strong> menu par programmation”, page 43.•avoir une barre <strong>de</strong> message : c<strong>et</strong>te barre <strong>de</strong> messageaffichera les messages d’ai<strong>de</strong> associés auxdifférents champs <strong>de</strong> la page. Pour plus <strong>de</strong>détails, consultez l’ai<strong>de</strong> en ligne.•être multilingue : toutes les langues définiespour la page seront disponibles pour tous leschamps <strong>de</strong> la page. Une page peut être associéeà plus <strong>de</strong> langues que le proj<strong>et</strong> (cas par exemple<strong>de</strong>s pages partagées entre plusieurs proj<strong>et</strong>s).Pour plus <strong>de</strong> détails, consultez le chapitre “Sitesmultilingues”, page 135.4 Page interneLes pages internes perm<strong>et</strong>tent <strong>de</strong> partager dynamiquementune même partie d’interface au sein d’unou <strong>de</strong> plusieurs sites.L’interface à utiliser plusieurs fois est créée dansune page <strong>de</strong> type "Page Interne".Partie 2 : Développement d’un site 39
C<strong>et</strong>te interface est utilisée dans les différentespages <strong>de</strong> votre site grâce au champ <strong>de</strong> type "Pageinterne".Remarque : La page à fusionner peut être issued’un composant.Pour plus <strong>de</strong> détails, consultez l’ai<strong>de</strong> en ligne.5 Modèles <strong>de</strong> pages5.1 PrésentationWebDev perm<strong>et</strong> <strong>de</strong> créer <strong>de</strong>s modèles <strong>de</strong> pages.Ces modèles contiennent tous les éléments graphiques<strong>et</strong> le co<strong>de</strong> communs à l’ensemble <strong>de</strong>s pages<strong>de</strong> votre site.Les modifications effectuées dans un modèle <strong>de</strong>pages sont automatiquement reportées sur toutesles pages utilisant ce modèle.Un modèle <strong>de</strong> pages perm<strong>et</strong> <strong>de</strong> respecter la chartegraphique définie pour un site.L’utilisation <strong>de</strong> modèles <strong>de</strong> pages dans vos sitesperm<strong>et</strong> <strong>de</strong> :• simplifier la création <strong>de</strong>s pages du site.• simplifier la mise en page <strong>de</strong>s pages du site.• simplifier la mise à jour <strong>de</strong> la charte graphique dusite.Un modèle <strong>de</strong> pages se crée aussi simplementqu’une page. Pour créer une page en utilisant unmodèle, il suffit <strong>de</strong> choisir l’option "basée sur unmodèle".Par défaut, toute modification effectuée dans lemodèle est reportée dans les pages l’utilisant. Il estcependant possible dans une page spécifique <strong>de</strong>gérer <strong>de</strong>s cas particuliers en surchargent les élémentsdu modèle.Pour plus <strong>de</strong> détails, consultez l’ai<strong>de</strong> en ligne.6 Actualiser une page dynamique6.1 PrésentationL'actualisation d'une page consiste à ré-afficherune page déjà ouverte sous le navigateur. C<strong>et</strong>teaction est i<strong>de</strong>ntique à l'utilisation <strong>de</strong> la touche"Rafraîchir" du navigateur.Lors <strong>de</strong> l'actualisation <strong>de</strong> la page, les donnéesdynamiques présentes dans la page sont mises àjour en fonction du contexte <strong>de</strong> page présent sur leserveur. Seules les données modifiées sont ré-affichées.Par exemple, lors <strong>de</strong> la saisie d'une comman<strong>de</strong>dans une application commerciale, à chaque nouvellecomman<strong>de</strong> d'un article, la page affichant lerécapitulatif <strong>de</strong> la comman<strong>de</strong> (le panier) est réactualisée.6.2 Mise en placePour actualiser une page, il suffit d'utiliser la fonctiondu WLangage PageActualise.Lors <strong>de</strong> l'actualisation d'une page, les opérationseffectuées automatiquement sont les suivantes :1. Vérification <strong>de</strong> l'existence du contexte <strong>de</strong> la pagesur le serveur.2. Ré-affichage <strong>de</strong> la page en fonction <strong>de</strong> son contexteprésent sur le serveur.L'utilisation <strong>de</strong> la fonction PageAffiche est déconseilléepour actualiser une page, car le temps <strong>de</strong>chargement <strong>de</strong> la page est beaucoup plus long.7 Les contextes <strong>de</strong> pages7.1 PrésentationDans une application Windows, toutes les informationsrelatives à la fenêtre sont conservées avec lafenêtre.Dans un site dynamique WebDev, pour chaquepage affichée sur le navigateur <strong>de</strong> l’internaute, uncontexte <strong>de</strong> page existe sur le serveur.Le contexte <strong>de</strong> page regroupe toutes les informationsrelatives à la page :• contenu <strong>de</strong>s champs,• variables locales,• variables globales,• co<strong>de</strong> WLangage "serveur", ...40Partie 2 : Développement d’un site
7.2 FonctionnementGestion automatiquePar défaut, WebDev gère automatiquement les contextes<strong>de</strong> pages dynamiques :• Un contexte <strong>de</strong> page est ouvert lors <strong>de</strong> l’affichage<strong>de</strong> la page dynamique sur le navigateur.• Le contexte d’une page est mis à jour en fonction<strong>de</strong>s informations saisies par l’internaute sous lenavigateur. C<strong>et</strong>te mise à jour se fait lors <strong>de</strong> la validation<strong>de</strong> la page (à l’ai<strong>de</strong> d’un bouton <strong>de</strong> type"Envoi au serveur" ou <strong>de</strong> la fonction PageVali<strong>de</strong>).• Les contextes <strong>de</strong> page existants sont fermés lors<strong>de</strong> l’utilisation <strong>de</strong>s fonctions PageUtilise ou Frames<strong>et</strong>Utilise.Les contextes <strong>de</strong> pages correspondantsaux pages à afficher sont alors ouverts.Gestion avancéeWebDev offre la possibilité <strong>de</strong> réaliser une gestionavancée <strong>de</strong>s contextes grâce aux fonctions Contexte*.Il est ainsi possible <strong>de</strong> :•ouvrir le contexte d’une page sans en lancerl’affichage sur le navigateur (ContexteOuvre),• tester l’existence du contexte d’une page sur leserveur (ContexteExiste),• fermer le contexte d’une page inutilisée (ContexteFerme).C<strong>et</strong>te gestion avancée <strong>de</strong>s contextes <strong>de</strong> page peutêtre utilisée pour :• Economiser l’espace mémoire du serveur (parexemple, en fermant les contextes <strong>de</strong>s pages précé<strong>de</strong>mmentouvertes mais inutilisées).• Préparer <strong>de</strong>s pages <strong>de</strong>stinées à dialoguer avecd’autres applications (par exemple, la page recevantles informations en r<strong>et</strong>our d’un site <strong>de</strong> paiementsécurisé).• Manipuler <strong>de</strong>s pages à partir d’autres pages.Cas particulierLors <strong>de</strong> l'utilisation <strong>de</strong> la touche "Précé<strong>de</strong>nt" dunavigateur, une désynchronisation peut existerentre la page <strong>et</strong> son contexte. Pour plus <strong>de</strong> détails,consultez “Avantage sécuritaire: la gestion du"Back"”, page 151.8 Ouvrir une page dans un site WebDev8.1 PrésentationL'ouverture d'une nouvelle page dans un site Web-Dev peut être réalisée selon plusieurs métho<strong>de</strong>s :•directement <strong>de</strong>puis la <strong>de</strong>scription du champ quidoit ouvrir la page (bouton, lien, menu, ...)• par programmation en WLangage.8.2 Ouverture d’une page <strong>de</strong>puis la <strong>de</strong>scriptiond’un champLors <strong>de</strong> la <strong>de</strong>scription d'un bouton, d'un lien, d'uneimage clicable, il est possible <strong>de</strong> définir directementl'action effectuée <strong>et</strong> la <strong>de</strong>stination <strong>de</strong> c<strong>et</strong>teaction.Pour ouvrir directement une page "xxx" à partir d'unbouton, lien, image, … :1. Affichez la <strong>de</strong>scription <strong>de</strong> l'élément (option "Description"du menu contextuel <strong>de</strong> l'élément).2. Sélectionnez l'action à effectuer : "Afficher lapage xxx".3. Sélectionnez la <strong>de</strong>stination <strong>de</strong> l'action : page encours, navigateur en cours, … (frame spécifiquedans le cas d'un frames<strong>et</strong>). L'action précé<strong>de</strong>mmentsélectionnée sera effectuée dans c<strong>et</strong>te frame.4. Vali<strong>de</strong>z.8.3 Ouverture d’une page par programmationLe WLangage propose plusieurs fonctions perm<strong>et</strong>tantd'ouvrir une page.• PageActualiseActualise la page affichée par rapport à son contexte.• PageAfficheOuvre <strong>et</strong> affiche une nouvelle page dans le navigateur<strong>de</strong> l'internaute.• PageUtiliseFerme toutes les pages en cours <strong>et</strong> leurs contextes,<strong>et</strong> ouvre une nouvelle page.Lors <strong>de</strong> l'ouverture <strong>de</strong> la page, il est possible <strong>de</strong>passer <strong>de</strong>s paramètres à la page. Pour plus <strong>de</strong>détails, consultez l’ai<strong>de</strong> en ligne.Remarque : Par défaut, lors <strong>de</strong> l'ouverture d'unepage en programmation, la <strong>de</strong>stination choisie est :•soit la <strong>de</strong>stination définie dans la <strong>de</strong>scription <strong>de</strong>l'obj<strong>et</strong> lançant l'ouverture <strong>de</strong> la page (bouton,lien, …).• soit la <strong>de</strong>stination définie pour la page en cours.Partie 2 : Développement d’un site 41
8.4 Cas <strong>de</strong>s pages dynamiquesLors <strong>de</strong> l'affichage d'une page dynamique, lesactions effectuées sont les suivantes :1. Vérification <strong>de</strong> l'existence du contexte <strong>de</strong> la pagesur le serveur.2. Si le contexte existe, ferm<strong>et</strong>ure du contexte.3. Ouverture du contexte <strong>de</strong> la page. Toutes lesvariables, champs, ... liés à la page sont ré-initialisés.4. Affichage <strong>de</strong> la page <strong>de</strong>mandée sous le navigateur.9 Traitements associés aux pages9.1 Traitements gérés par défautWebDev gère par défaut les traitements suivants(ordre d'apparition sous l'éditeur <strong>de</strong> co<strong>de</strong>) :• Déclaration globales (co<strong>de</strong> serveur) :Déclaration <strong>de</strong>s variables globales à la page.C’est le premier co<strong>de</strong> exécuté à l’ouverture <strong>de</strong> lapage.• Initialisation (co<strong>de</strong> serveur) :Exécuté lors <strong>de</strong> l'ouverture <strong>de</strong> la page. Le traitementd’initialisation <strong>de</strong>s champs <strong>de</strong> la page estexécuté avant ce co<strong>de</strong>.• Chargement (onload) <strong>de</strong> la page (co<strong>de</strong>navigateur) :Co<strong>de</strong> navigateur exécuté lors <strong>de</strong> l’affichage <strong>de</strong> lapage dans le navigateur.• Déchargement (onunload) <strong>de</strong> la page (co<strong>de</strong>navigateur) :Co<strong>de</strong> navigateur exécuté lors <strong>de</strong> l’affichage d’unenouvelle page dans le navigateur.• Synchronisation <strong>de</strong> la page (co<strong>de</strong> serveur) :Co<strong>de</strong> serveur perm<strong>et</strong>tant <strong>de</strong> gérer la synchronisation<strong>de</strong> la page lors <strong>de</strong> l’utilisation <strong>de</strong> la touche"Précé<strong>de</strong>nt" du navigateur.• Ferm<strong>et</strong>ure <strong>de</strong> la page (co<strong>de</strong> serveur) :Exécuté lors <strong>de</strong> la ferm<strong>et</strong>ure <strong>de</strong> la page.• Affectation <strong>de</strong> la propriété ..Valeur (page interneuniquement)Exécuté lors <strong>de</strong> l’utilisation <strong>de</strong> la propriété Valeuren affectation sur le champ Page Interne.• Récupération <strong>de</strong> la propriété ..Valeur (pageinterne uniquement)Exécuté lors <strong>de</strong> l’utilisation <strong>de</strong> la propriété Valeuren lecture sur le champ Page Interne.9.2 Traitements optionnelsPlusieurs traitements optionnels peuvent êtregérés.Pour gérer un traitement optionnel, il suffit <strong>de</strong> lesélectionner dans la barre d'icônes <strong>de</strong> la fenêtre <strong>de</strong>co<strong>de</strong>.Il est ainsi possible <strong>de</strong> gérer par exemple :• le survol du champ par la souris,• le bouton gauche enfoncé, relâché, avec doubleclic,• le bouton droit enfoncé, relâché, avec double-clic,• la roul<strong>et</strong>te <strong>de</strong> la souris, <strong>et</strong>c.10 Les menus principauxWebDev perm<strong>et</strong> <strong>de</strong> créer un menu déroulant dansvos pages HTML. Ce menu peut être vertical ouhorizontal. A partir <strong>de</strong>s différentes options <strong>de</strong> cemenu, il est possible :• d'afficher <strong>de</strong>s pages,•d'exécuter le co<strong>de</strong> <strong>de</strong> boutons présents dans lapage,• ...WebDev perm<strong>et</strong> <strong>de</strong> :• Créer un menu principal• Editer un menu principal• Supprimer un menu principal.Pour plus <strong>de</strong> détails, consultez l’ai<strong>de</strong> en ligne.42Partie 2 : Développement d’un site
11 Les options <strong>de</strong> menu11.1 PrésentationUn menu est composé d'une ou <strong>de</strong> plusieursoptions <strong>et</strong> sous-options. Chaque option perm<strong>et</strong>d'exécuter un co<strong>de</strong> WLangage.Pour manipuler les options <strong>de</strong> menu, il suffit d'éditerle menu concerné.Pour éditer (ou afficher sous l'éditeur), le menuprincipal d’une page :1. Ouvrez la page concernée sous WebDev.2. Cliquez <strong>de</strong>ux fois sur le menu: un cadre jauneapparaît.11.2 Manipuler les options <strong>de</strong> menu sousl’éditeurL’éditeur <strong>de</strong> pages perm<strong>et</strong> <strong>de</strong> réaliser très simplementles manipulations suivantes :• Ajouter une option <strong>de</strong> menu•Ajouter un séparateur• Ajouter un sous-menu• Supprimer une option <strong>de</strong> menuLes options <strong>de</strong> menu peuvent également être directementmanipulées sous l’éditeur <strong>de</strong> fenêtres <strong>et</strong>leurs caractéristiques sont modifiables grâce à unefenêtre <strong>de</strong> <strong>de</strong>scription.La fenêtre <strong>de</strong> <strong>de</strong>scription <strong>de</strong>s options <strong>de</strong> menu perm<strong>et</strong>par exemple <strong>de</strong> :• modifier le libellé <strong>de</strong> l’option.• cocher ou décocher une option <strong>de</strong> menu• associer une image à une option <strong>de</strong> menu•associer un raccourci clavier à une option <strong>de</strong>menu.Il est également possible d’associer du co<strong>de</strong> WLangageà une option <strong>de</strong> menu. Seules les options <strong>de</strong>menu ne possédant pas <strong>de</strong> sous-menu peuventlancer un traitement WLangage.Pour plus <strong>de</strong> détails, consultez l’ai<strong>de</strong> en ligne.11.3 Manipuler les options <strong>de</strong> menu par programmationPour manipuler par programmation une option <strong>de</strong>menu, utilisez la notation :• "" si l'option <strong>de</strong> menu est manipulée<strong>de</strong>puis la page.• ".." sil'option est manipulée <strong>de</strong>puis une autre page.Partie 2 : Développement d’un site 43
Les différents types <strong>de</strong>champs standardVous voulez...Utilisez un champ...Afficher du texte, un titre, ... Libellé HTML,LibelléDéfinir une zone <strong>de</strong> couleur Cellule,Tableau HTMLAfficher un prix, une quantité, une adresse, une date,une heure, ...Champ d’affichageformatéSélectionner une valeur parmi une liste (Pays, Ville, …) Sélecteur,Combo,ListeSélectionner plusieurs valeurs parmi une liste (les <strong>de</strong>stinatairesd’un message, <strong>de</strong>s fichiers à télécharger, …)Interrupteur,ListeAfficher une image graphique (Photo, …)Image,Image clicable44Partie 2 : Développement d’un site
Afficher une animation (Gif animé) ImageAfficher une page selon la zone cliquée sur une image Image clicableAfficher le contenu d’un fichier en table (Liste <strong>de</strong>s clients,détail d’une comman<strong>de</strong>, …)Table fichier outable mémoire,Zone répétée fichier ouzone répétée mémoireAfficher une image rafraîchie régulièrement Champ Web CaméraRépéter <strong>de</strong>s champs dans une page (Catalogue Produitsavec la photo, ...)Zone répétéeUtiliser un co<strong>de</strong> HTML existant Champ HTMLUtiliser une appl<strong>et</strong> Java (horloge, ...)Champ JavaSaisir <strong>de</strong>s informationsChamp <strong>de</strong> saisieAfficher <strong>de</strong>s informations hiérarchisées (contenu d’un répertoire,...)Champ ArbreAfficher une animation Flash Champ FlashPartie 2 : Développement d’un site 45
Aligner <strong>de</strong>s champs (tableau HTML)Cellule,Tableau HTMLProgrammer une action dans une page (afficher une page,vali<strong>de</strong>r une saisie, …) Bouton,Champ LienSélectionner <strong>et</strong> afficher une date sur un calendrierChamp CalendrierAfficher une vidéo Champ VidéoAfficher une page d’un autre site dans une <strong>de</strong> vos pages IFrameAfficher un histogramme, une courbe, un graphe <strong>de</strong> typecamembertChamp GrapheAfficher une page <strong>de</strong> votre site à l’intérieur d’une <strong>de</strong> vospages Champ Page InterneAfficher un menu automatique (qui se construit au fur <strong>et</strong>à mesure du parcours du site)Champ Chemin <strong>de</strong>navigation46Partie 2 : Développement d’un site
Afficher <strong>de</strong>s vign<strong>et</strong>tes d’images Champ Vign<strong>et</strong>teAfficher <strong>de</strong>s fichiers Flex Champ FlexIntégrer <strong>de</strong>s champs <strong>de</strong> type SilverLight Champ SilverLightEnrouler / Dérouler une zone d’affichage Champ TiroirUploa<strong>de</strong>r un ou plusieurs fichiersChamp UploadAfficher une liste d’obj<strong>et</strong>s sous forme <strong>de</strong> liste horizontaledéfilante.Créer un eff<strong>et</strong> visuel dans une page en présentant uneimage partiellement recouverte par une autre.Champ Zone RépétélinéaireChamp Page cornéePartie 2 : Développement d’un site 47
Les champs en pratiqueWebDev propose <strong>de</strong> nombreux types <strong>de</strong> champs,fa cilement intégra bles da ns vos pa ges. Ceschamps peuvent être créés soit par la barre d’outils"Champ", soit par le menu "Insertion" <strong>de</strong> l’éditeur<strong>de</strong> pages. Tous les champs peuvent bien sur êtremanipulés par programmation.1 Créer un champLes champs disponibles sous l’éditeur <strong>de</strong> pages <strong>de</strong>WebDev sont les suivants :•Libellé HTML,•Libellé,•Bouton,•Lien,•Image,•Image clicable,• Champ d’affichageformaté,• Champ <strong>de</strong> saisie,• Interrupteur,• Sélecteur,•Liste,•Combo,•Table,•Zone répétée,• Régl<strong>et</strong>te,•Captcha•Arbre,• Cellule,•Tableau HTML,•Ligne,•Ongl<strong>et</strong>,• Champ Web Caméra,• Champ Appl<strong>et</strong> Java,•Champ Flash,•Champ IFrame,• Champ page interne,•Chemin <strong>de</strong> navigation,•Plan du site•Superchamp,•Graphe,• Calendrier,• Planing,•Modèle <strong>de</strong> champs.1.1 Créer un nouveau champPour créer un champ :1. Sélectionnez le type <strong>de</strong> champ à créer :• soit par l’option "Insertion .. Champ/Forme/Spécial".• soit par l’icône correspondante dans la barred’outils "Champs".2. La forme du nouveau champ apparaît sous lecurseur <strong>de</strong> la souris.3. Cliquez dans la page à la future position <strong>de</strong> créationdu champ. Le champ est automatiquementcréé.Remarque : D’autres mo<strong>de</strong>s <strong>de</strong> création sont disponibles.Pour plus <strong>de</strong> détails, consultez l’ai<strong>de</strong> enligne.1.2 Créer un champ associé à une rubriqueMis à part les types <strong>de</strong> champs suivants, tous leschamps d’une page peuvent être associés à unerubrique <strong>de</strong> fichier :•Bouton,•ongl<strong>et</strong>•ligne•champ HTML• champ appl<strong>et</strong> Java•champ Flash• régl<strong>et</strong>te• cellule <strong>et</strong> tableau HTML•Plan du sitePour créer un champ associé à une rubrique (ourécupérer une rubrique), plusieurs métho<strong>de</strong>s sontdisponibles :• Drag and Drop <strong>de</strong>puis le vol<strong>et</strong> "Analyse".• Utilisation <strong>de</strong> l’ongl<strong>et</strong> "Fichier" du champ.2 Caractéristiques d’un champPour tous les champs d’une page, il est possibled’afficher la fenêtre <strong>de</strong> <strong>de</strong>scription <strong>de</strong>s champs.C<strong>et</strong>te fenêtre est une fenêtre à ongl<strong>et</strong>s, regroupanttoutes les caractéristiques paramétrables d’un ou<strong>de</strong> plusieurs champs.Remarque : Il est également possible <strong>de</strong> visualiser<strong>et</strong>/ou <strong>de</strong> modifier les caractéristiques d’un ou <strong>de</strong>plusieurs champs dans le modifieur. Pour plus <strong>de</strong>détails, consultez l’ai<strong>de</strong> en ligne.2.1 Affichage <strong>de</strong>s caractéristiquesPour afficher la fenêtre <strong>de</strong> <strong>de</strong>scription d’un champ :• soit double-cliquez sur le champ.• soit sélectionnez l'option "Description" du menucontextuel du champ (clic droit <strong>de</strong> la souris).• soit sélectionnez le champ <strong>et</strong> sélectionnezl'option "Affichage .. Description <strong>de</strong> la sélection".• soit sélectionnez le champ <strong>et</strong> utilisez le raccourciclavier [Alt]+[Entrée].48Partie 2 : Développement d’un site
• soit sélectionnez l'option "Affichage .. Options ..Modifier les options" (touche [F12]), sélectionnezle champ <strong>et</strong> cliquez sur le bouton "Éditer".Remarques :• Il est possible d’afficher la fenêtre <strong>de</strong> <strong>de</strong>scriptionpour un ensemble <strong>de</strong> champs sélectionnés. Seulesles caractéristiques communes aux différentschamps sélectionnés seront affichées.• Plusieurs fenêtres <strong>de</strong> <strong>de</strong>scription peuvent êtreaffichées simultanément. Chaque fenêtre <strong>de</strong><strong>de</strong>scription affiche alors les caractéristiques d’unou <strong>de</strong> plusieurs champs.2.2 Caractéristiques par ongl<strong>et</strong>Ce paragraphe présente rapi<strong>de</strong>ment les différentescatégories <strong>de</strong> caractéristiques affichées par ongl<strong>et</strong>.Pour plus <strong>de</strong> détails sur chacune <strong>de</strong>s caractéristiquesprésentes dans les différents ongl<strong>et</strong>s, consultez l’ai<strong>de</strong>contextuelle <strong>de</strong>s fenêtres <strong>de</strong> <strong>de</strong>scription.Ongl<strong>et</strong> GénéralL’ongl<strong>et</strong> "Général" perm<strong>et</strong> <strong>de</strong> spécifier le nom duchamp <strong>et</strong> toutes les caractéristiques d’affichage duchamp (libellé, masque <strong>de</strong> saisie, ...).Ongl<strong>et</strong> DétailL’ongl<strong>et</strong> "Détail" perm<strong>et</strong> <strong>de</strong> définir les différentsparamètres du champ :• Etat initial du champ à l’ouverture <strong>de</strong> la page.• Visibilité du champ•Type du champOngl<strong>et</strong> LiaisonC<strong>et</strong> ongl<strong>et</strong> perm<strong>et</strong> <strong>de</strong> sélectionner la rubrique (d’unfichier ou d’une rubrique) à laquelle le champ estrelié. Selon l'enregistrement en cours, le contenu<strong>de</strong> la rubrique reliée sera affiché dans le champ.La liaison peut être mono-fichier ou multi-fichier.Ongl<strong>et</strong> ContenuC<strong>et</strong> ongl<strong>et</strong> est disponible uniquement pour leschamps <strong>de</strong>s pages.L’ongl<strong>et</strong> "Contenu" perm<strong>et</strong> <strong>de</strong> définir :• soit le contenu initial du champ (pour les champs<strong>de</strong> saisie uniquement).• soit la source <strong>de</strong> données utilisée pour remplir lechamp (pour les listes, les combos <strong>et</strong> les tablesuniquement).Ongl<strong>et</strong> Note / Ai<strong>de</strong>L’ongl<strong>et</strong> "Note/Ai<strong>de</strong>" perm<strong>et</strong> <strong>de</strong> :• décrire le fonctionnement détaillé du champ. Cesinformations seront imprimées dans les dossiers<strong>de</strong> programmation (dossier du proj<strong>et</strong>, dossier <strong>de</strong>la page, ...).•configurer tous les types d’ai<strong>de</strong>s associés auchamp. Un champ peut avoir :•Une bulle d’ai<strong>de</strong>, affichée lors du survol duchamp.•Un message d’ai<strong>de</strong>, affiché dans la barre <strong>de</strong>message lors <strong>de</strong> l’entrée dans le champ.Ongl<strong>et</strong> AvancéL’ongl<strong>et</strong> "Avancé" perm<strong>et</strong> <strong>de</strong> saisir le co<strong>de</strong> HTMLgénéré avant <strong>et</strong> après le champ.Ongl<strong>et</strong> Bord, FondL’ongl<strong>et</strong> "Bord, Fond" perm<strong>et</strong> <strong>de</strong> définir :• le cadre affiché autour du champ,• le cadrage du champ,• le débor<strong>de</strong>ment,• l’image <strong>et</strong> / ou la couleur <strong>de</strong> fond.Ongl<strong>et</strong> StyleL’ongl<strong>et</strong> "Style" perm<strong>et</strong> <strong>de</strong> définir le style <strong>de</strong>s différentséléments du champ. C<strong>et</strong> écran perm<strong>et</strong> <strong>de</strong> :•modifier l’aspect d’un champ: il suffit alors <strong>de</strong>sélectionner l’élément du champ à modifier, puisses caractéristiques <strong>de</strong> style. Seul l’aspect duchamp en cours est modifié.• Appliquer un style existant au champ : il suffit <strong>de</strong>sélectionner le style à appliquer.• Créer ou modifier un style : le style créé ou modifiéest mis à jour pour tous les champs du proj<strong>et</strong>utilisant ce style.2.3 Champ dynamique, champ statiquePour tous les types <strong>de</strong> champs, WebDev proposeles options suivantes :• Automatique : le champ s'adaptera automatiquementau type d'utilisation qui est effectué.• Statique : le champ ne pourra pas être modifiéen programmation : les différentes propriétésassociées au champ seront sans eff<strong>et</strong>.• Dynamique : le champ pourra être modifié enprogrammation : toutes les propriétés associéesau champ pourront être utilisées.Remarque : si un champ est défini comme étantdynamique, le co<strong>de</strong> HTML <strong>de</strong> la page contiendra duco<strong>de</strong> spécifique pour gérer la programmation duchamp en WLangage. Le fichier HTML correspondantà la page sera donc plus important que si lechamp est défini en statique.Partie 2 : Développement d’un site 49
3 Manipuler les champs sous l’éditeur3.1 Les poignées <strong>de</strong>s champsLorsqu'un champ vient d'être créé ou lorsqu'il estsélectionné, il s’affiche avec <strong>de</strong>s poignées. Les poignéesperm<strong>et</strong>tent <strong>de</strong> :• visualiser la taille d'un champ,• modifier la taille d'un champ.Les couleurs <strong>de</strong>s poignées perm<strong>et</strong>tent <strong>de</strong> connaîtreles actions réalisables :•Les poignées noires perm<strong>et</strong>tent <strong>de</strong> visualiser <strong>et</strong><strong>de</strong> redimensionner un champ.•Les poignées blanches perm<strong>et</strong>tent uniquement<strong>de</strong> visualiser un champ. Par exemple, lors <strong>de</strong> lasélection <strong>de</strong> plusieurs champs, les poignéesblanches indiquent qu'il est impossible <strong>de</strong> modifierla taille <strong>de</strong>s champs sélectionnés.Ce type <strong>de</strong> poignées est aussi affiché lorsqu'unepa ge est en lecture seulement pour ledéveloppeur : les champs ne peuvent pas êtremodifiés.•Les poignées grises indiquent que le premierchamp sélectionné lors d'une sélection multiple.Ce champ sera le champ <strong>de</strong> référence.3.2 Manipulations disponiblesL’éditeur <strong>de</strong> pages perm<strong>et</strong> <strong>de</strong> :• Sélectionner un ou plusieurs champs (par exempleà l’ai<strong>de</strong> du lasso).• Regrouper <strong>de</strong>s champs sélectionnés•Déplacer un champ• Modifier le libellé d’un champ• Afficher une bulle d’ai<strong>de</strong> avancée lors du survold’un champ. C<strong>et</strong>te bulle d’ai<strong>de</strong> contient : le nomdu champ, sa position, sa taille, son état initial (sile champ est invisible).4 Alignement <strong>de</strong>s champsL’alignement <strong>de</strong>s champs perm<strong>et</strong> d’obtenir <strong>de</strong>sinterfaces "professionnelles", <strong>et</strong> harmonieuses.Pour vous ai<strong>de</strong>r à concevoir <strong>de</strong>s interfaces standard,WebDev vous proposent les outils suivants :•les règles.•la grille.• le correcteur d’interface en temps réel (proposéautomatiquement lors d’un positionnement d’unchamp).• le correcteur d’interface avancé.• les options d’alignement.• le zoom paramétrable.• la table <strong>de</strong> positionnement.4.1 Les règlesSous l'éditeur <strong>de</strong> pages, il est possible <strong>de</strong> faireapparaître <strong>de</strong>s règles d'alignement.Dans ces règles, <strong>de</strong>s gui<strong>de</strong>s magnétiques sontaffichés : tout champ approché d'un gui<strong>de</strong> est automatiquement"attiré" par celui-ci. Ce magnétismeperm<strong>et</strong> d'utiliser les gui<strong>de</strong>s pour faciliter le positionnement,l'alignement ou le redimensionnement<strong>de</strong>s champs <strong>de</strong> la page.Afficher les règlesLes règles sont affichées par l'option "Affichage ..Règles". Deux types <strong>de</strong> gui<strong>de</strong>s peuvent alors êtreutilisés :•les gui<strong>de</strong>s, perm<strong>et</strong>tant d'aligner <strong>et</strong> <strong>de</strong> disposerles champs à l'intérieur <strong>de</strong>s pages.•les gui<strong>de</strong>s <strong>de</strong> bordure, perm<strong>et</strong>tant <strong>de</strong> déterminerune bordure <strong>de</strong> taille i<strong>de</strong>ntique <strong>de</strong> chaque côté<strong>de</strong> la page.Remarque : L’option "Gui<strong>de</strong> visible" du menu contextuel<strong>de</strong>s règles perm<strong>et</strong> <strong>de</strong> visualiser la page avecou sans ses gui<strong>de</strong>s. Visibles ou non, les gui<strong>de</strong>s sonttoujours actifs : un champ déplacé vers un repèreest automatiquement accolé à celui-ci.Manipuler les repèresLes repères sont facilement manipulables à l'ai<strong>de</strong><strong>de</strong> la souris dans l'éditeur. Lorsque la souris survoleun repère, le curseur se transforme en unedouble flèche.4.2 Grille magnétiqueLa grille magnétique perm<strong>et</strong> <strong>de</strong> placer <strong>de</strong>s repères(vertica ux <strong>et</strong> horizonta ux) da ns la pa ge. Leschamps créés viennent se placer contre ces repères,comme si les champs <strong>et</strong> les repères étaientmagnétisés. La grille magnétique perm<strong>et</strong> ainsi d'ali-50Partie 2 : Développement d’un site
gner les champs selon les repères.4.3 Correcteur d’interface en temps réelLors du déplacement d’un champ dans une page,le correcteur d’interface en temps réel affiche automatiquement<strong>de</strong>s gui<strong>de</strong>s. Ces gui<strong>de</strong>s sont magnétisés<strong>et</strong> perm<strong>et</strong>tent d’aligner le champ déplacé avecles champs présents dans la page.4.4 Correcteur d’interface avancéLe correcteur d'interface avancé est un outil perm<strong>et</strong>tantd'harmoniser la disposition <strong>de</strong>s champsdans les différentes pages d’un site.Le correcteur d'interface avancé propose pour lapage en cours ou uniquement pour les champssélectionnés, d'appliquer <strong>de</strong>s règles <strong>de</strong> présentationd'interface issues du standard Windows: alignement<strong>de</strong>s champs, normalisation <strong>de</strong> la taille<strong>de</strong>s boutons, ...4.5 Les options d’alignementPour aligner plusieurs champs, WebDev m<strong>et</strong> à votredisposition :• soit un alignement prédéfini (disponible par lemenu déroulant "Champ .. Alignement .." ou dansla barre d'outils d’alignement <strong>de</strong>s champs).•soit un a lignement personna lisé ("Cha mp..Alignement .. Alignement personnalisé"). L'alignementpersonnalisé perm<strong>et</strong> d’utiliser <strong>de</strong>s propriétésspécifiques d’alignement.Lors <strong>de</strong> l’alignement personnalisé, il est possible<strong>de</strong> définir :• l'alignement horizontal ou vertical : les champspeuvent être alignés à gauche en fonction dudébut du champ ou en fonction du début <strong>de</strong> lazone <strong>de</strong> saisie. Ils peuvent aussi être alignés àdroite, en fonction <strong>de</strong> la fin du champ, ou en fonction<strong>de</strong> la fin <strong>de</strong> la zone <strong>de</strong> saisie.• l'espacement uniforme : l'espacement entre leschamps est adapté pour être le même entre chaquechamp (horizontalement ou verticalement).• la taille : la taille <strong>de</strong>s champs sélectionnés estautomatiquement adaptée pour obtenir <strong>de</strong>schamps <strong>de</strong> même hauteur <strong>et</strong>/ou <strong>de</strong> même largeur.• le champ <strong>de</strong> référence : pour l'alignement <strong>et</strong> lataille <strong>de</strong>s champs, le champ <strong>de</strong> référence est auchoix :•le premier champ sélectionné (celui qui a lespoignées blanches)•le <strong>de</strong>rnier champ sélectionné•le plus grand champ sélectionné•le champ situé le plus en haut à gauche <strong>de</strong>schamps sélectionnés4.6 Le zoom paramétrableIl est possible <strong>de</strong> spécifier un facteur <strong>de</strong> zoom pourréduire ou agrandir l’affichage <strong>de</strong> la page en cours.Pour spécifier un facteur <strong>de</strong> zoom :• 1ère métho<strong>de</strong> :•Soit sélectionnez l’option "Affichage .. Zoom .."<strong>et</strong> choisissez le facteur <strong>de</strong> zoom à utiliser.• Soit saisissez directement le facteur <strong>de</strong> zoomdans la barre <strong>de</strong> message <strong>de</strong> l’éditeur (en bas àdroite).• 2ème métho<strong>de</strong> :•Appuyez sur la touche [Ctrl].•Modifiez le facteur <strong>de</strong> zoom avec la roul<strong>et</strong>te <strong>de</strong>la souris tout en maintenant la touche [Ctrl]enfoncée.4.7 Table <strong>de</strong> positionnementLa table <strong>de</strong> positionnement perm<strong>et</strong> <strong>de</strong> contrôler lestables créées dans le co<strong>de</strong> HTML <strong>de</strong> la page.Pour activer l’affichage <strong>de</strong> la table <strong>de</strong> positionnement,sélectionnez l’option "Affichage Visualisation<strong>de</strong> la table <strong>de</strong> positionnement" ou utilisez lacombinaison <strong>de</strong> touches [CTRL]+[U].Pour plus <strong>de</strong> détails sur la table <strong>de</strong> positionnement,consultez l’ai<strong>de</strong> en ligne.5 Options d’édition <strong>de</strong>s champs dans une pageLes options d’édition (option "Affichage .. Options ..Modifier les options") perm<strong>et</strong>tent <strong>de</strong> paramétrer :• les options d’affichage.• le magnétisme <strong>de</strong>s champs.• les opérations <strong>de</strong> clic <strong>et</strong> <strong>de</strong> double-clic sur leschamps.• les options <strong>de</strong> sélection <strong>de</strong>s champs.Ces options d’affichage perm<strong>et</strong>tent <strong>de</strong> personnaliserla manipulation <strong>de</strong>s champs sous l’éditeur <strong>de</strong>pages.Partie 2 : Développement d’un site 51
Répéter un groupe <strong>de</strong>champs : les zones répétéesLes zones répétées perm<strong>et</strong>tent <strong>de</strong> répéter un ensemble <strong>de</strong> champs dans une page web.Lors <strong>de</strong> c<strong>et</strong>te répétition, les champs <strong>de</strong> la zone répétée peuvent afficher <strong>de</strong>s informationsdifférentes dans chaque occurrence. Il est ainsi possible d’afficher à chaque répétition<strong>de</strong>s enregistrements d’une base <strong>de</strong> données.Création <strong>de</strong> la zone répétée sousl’éditeur <strong>de</strong> WebDevAffichage <strong>de</strong> la zone répétéesous le navigateurPour chaque champ <strong>de</strong> la zone répétée, plusieurs caractéristiques peuvent être modifiéeslors <strong>de</strong> 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 <strong>de</strong> "Zone répétée horizontale".Lors <strong>de</strong> la création d’une zone répétée, il est possible <strong>de</strong> lier la zone répétée directementà un fichier <strong>de</strong> données ou à une requête. Les attributs <strong>de</strong> la zone répétée sont automatiquementdéfinis. Aucune programmation n’est nécessaire.52Partie 2 : Développement d’un site
Les <strong>de</strong>ux types<strong>de</strong> co<strong>de</strong>Co<strong>de</strong> serveur ou co<strong>de</strong> navigateur ?Deux sortes d’actions peuvent être programmées dans un site WebDev :Pour gérer ces <strong>de</strong>ux sortes d’actions, l’éditeur <strong>de</strong> co<strong>de</strong> <strong>de</strong> WebDev différencie <strong>de</strong>ux types<strong>de</strong> co<strong>de</strong> :• Co<strong>de</strong> Serveur (co<strong>de</strong> Jaune ou Rose sous l’éditeur <strong>de</strong> co<strong>de</strong>) : Ce co<strong>de</strong> est écrit enWLangage (co<strong>de</strong> jaune) ou en PHP (co<strong>de</strong> rose, disponible uniquement dans lespages PHP). Ce co<strong>de</strong> est exécuté sur le serveur.Ce co<strong>de</strong> est disponible uniquement dans les pages dynamiques.• Co<strong>de</strong> Navigateur (co<strong>de</strong> Vert ou Bleu) : Ce co<strong>de</strong> est écrit en WLangage (co<strong>de</strong> vert) ouen Javascript (co<strong>de</strong> bleu).A l’enregistrement <strong>de</strong> la page, ce co<strong>de</strong> est automatiquement traduit en Javascript, <strong>et</strong>intégré aux pages HTML WebDev. Ce co<strong>de</strong> est exécuté en local (sur le poste <strong>de</strong> l’internaute)<strong>et</strong> ne nécessite pas d’action du serveur.Partie 2 : Développement d’un site 53
Co<strong>de</strong> serveur dans une page PHP : co<strong>de</strong> WLangage ou co<strong>de</strong> PHP ?Les co<strong>de</strong>s exécutés sur le poste serveur sont représentés sous l’éditeur <strong>de</strong> co<strong>de</strong> par unban<strong>de</strong>au Jaune ou Rose.• ban<strong>de</strong>au Jaune = WLangage : le sigle WL précè<strong>de</strong> l’intitulé du co<strong>de</strong>.• ban<strong>de</strong>au Rose = PHP : le sigle PHP précè<strong>de</strong> l’intitulé du co<strong>de</strong>.Pour passer d’un co<strong>de</strong> jaune (WLangage) à un co<strong>de</strong> rose (PHP), il suffit <strong>de</strong> cliquer sur lesigle WL précédant l’intitulé du co<strong>de</strong> (ou inversement en cliquant sur PHP). Lors <strong>de</strong> l’enregistrement<strong>de</strong> la page PHP, le co<strong>de</strong> WLangage est automatiquement converti en co<strong>de</strong>PHP.Nous vous conseillons <strong>de</strong> développer en WLangage.54Partie 2 : Développement d’un site
Co<strong>de</strong> navigateur : co<strong>de</strong> WLangage ou co<strong>de</strong> Javascript ?Les co<strong>de</strong>s exécutés sur le poste <strong>de</strong> l’internaute (sur le navigateur) sont représentés sousl’éditeur <strong>de</strong> co<strong>de</strong> par un ban<strong>de</strong>au vert ou bleu.• ban<strong>de</strong>au vert = WLangage : le sigle WL précè<strong>de</strong> l’intitulé du co<strong>de</strong>.• ban<strong>de</strong>au bleu = Javascript : le sigle JS précè<strong>de</strong> l’intitulé du co<strong>de</strong>.Pour passer d’un co<strong>de</strong> vert (WLangage) à un co<strong>de</strong> bleu (Javascript), il suffit <strong>de</strong> cliquer surle sigle WL précédant l’intitulé du co<strong>de</strong> (ou inversement en cliquant sur JS). A l’enregistrement<strong>de</strong> la page, le co<strong>de</strong> WLangage est automatiquement converti en Javascript.Nous vous conseillons <strong>de</strong> développer en WLangage.Evénements supplémentairesLa barre d’icônes située au bas <strong>de</strong> la fenêtre <strong>de</strong> co<strong>de</strong> perm<strong>et</strong> <strong>de</strong> gérer <strong>de</strong>s événementssupplémentaires à ceux proposés par défaut :Ces événements sont ajoutés aux co<strong>de</strong>s affichés par l’éditeur <strong>de</strong> co<strong>de</strong> par simple clic surl’icone du co<strong>de</strong> correspondant. 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 co<strong>de</strong> navigateur est disponible dans les pages dynamiques, semi-dynamiques<strong>et</strong> statiques.Partie 2 : Développement d’un site 55
Le WLangage : un langagesimple <strong>et</strong> très puissantLe langage intégré <strong>de</strong> WebDev est le WLangage. Ce langage perm<strong>et</strong> <strong>de</strong> programmer simplementtous les traitements web voulus sans avoir à connaître le HTML, le Javascript oule PHP.Disponible en français <strong>et</strong> en anglais, le WLangage est composé d’ordres simples, prochesdu langage courant. Le français perm<strong>et</strong> une programmation intuitive.Voici un tout p<strong>et</strong>it exemple illustrant la puissance du WLangage : la vérification <strong>de</strong> la saisied’une adresse :En WLangage, quelques lignes suffisent :SI SansEspace(ADRESSE) = "" ALORSErreur("Veuillez indiquer votre adresse")RepriseSaisie(ADRESSE)FINEn Javascript, voici le traitement équivalent :function EXE_SansEspace( szChaine , nPartie ){var nPremier = 0;var nDernier = szChaine.length-1;if (nPartie & 1) while (szChaine.charAt(nPremier)==" ") nPremier++;if (nPartie & 2) while (szChaine.charAt(nDernier)==" ") nDernier--;r<strong>et</strong>urn szChaine.substring(nPremier,nDernier+1);}// Clic (onclick) <strong>de</strong> BOUTON_OKfunction _VALIDCDE_BOUTON_OK_CLI(){if((EXE_SansEspace(ADRESSE,3)=="")){alert("Veuillez indiquer votre adresse ");r<strong>et</strong>urn;}}Le co<strong>de</strong> WLangage est plus facile à écrire, à comprendre, à maintenir. La fiabilité estaméliorée. Les évolutions sont plus simples.Dans tous vos traitements, utilisez le WLangage.56Partie 2 : Développement d’un site
Ordre d’exécution <strong>de</strong>s co<strong>de</strong>s<strong>de</strong>s boutons / liensDeux co<strong>de</strong>s <strong>de</strong> clic sont associés aux boutons / liens :• un co<strong>de</strong> <strong>de</strong> clic navigateur, saisi en WLangage (ou en Javascript) sous l’éditeur <strong>de</strong>co<strong>de</strong>. Ce co<strong>de</strong> est intégré à la page HTML <strong>et</strong> sera exécuté sur le poste <strong>de</strong> l’internaute.• un co<strong>de</strong> <strong>de</strong> clic serveur saisi en WLangage (uniquement dans les pages dynamiques).Ce co<strong>de</strong> sera exécuté sur le serveur.Co<strong>de</strong> <strong>de</strong> clicnavigateurCo<strong>de</strong> <strong>de</strong> clicserveurLe tableau ci-après présente les différents co<strong>de</strong>s exécutés selon le type <strong>de</strong> bouton / lienchoisi, <strong>et</strong> l’action associée.L’aspect du bouton / lien <strong>et</strong> sa <strong>de</strong>stination n’influent pas sur l’ordre <strong>de</strong>s co<strong>de</strong>s exécutés.Partie 2 : Développement d’un site 57
Opération Ordre <strong>de</strong>s co<strong>de</strong>s exécutés RemarquesEnvoiserveur(submit)auAction associée :AucuneExécuter le co<strong>de</strong> <strong>de</strong> clic du bouton / lienCo<strong>de</strong>s exécutés :1. Co<strong>de</strong> <strong>de</strong> clic navigateur du champ.2. Co<strong>de</strong> navigateur du submit <strong>de</strong> la page (s’il existe).3. Envoi <strong>de</strong>s valeurs présentes dans les champs <strong>de</strong>la page pour m<strong>et</strong>tre à jour le contexte <strong>de</strong> la pagesur le serveur.4. Co<strong>de</strong> serveur du champ.Mise à jour automatiquedu contexte <strong>de</strong>page sur le serveur(pages dynamiquesuniquement).Action associée : Afficher la pageCo<strong>de</strong>s exécutés :1. Co<strong>de</strong> <strong>de</strong> clic navigateur du champ.2. Co<strong>de</strong> navigateur du submit <strong>de</strong> la page (s’il existe).3. Envoi <strong>de</strong>s valeurs présentes dans les champs <strong>de</strong>la page pour m<strong>et</strong>tre à jour le contexte <strong>de</strong> la pagesur le serveur.4. Co<strong>de</strong> serveur du champ.5. Affichage <strong>de</strong> la page.Mise à jour automatiquedu contexte <strong>de</strong>page sur le serveur(pages dynamiquesuniquement).Affichage automatique<strong>de</strong> la page.Réinitialisation<strong>de</strong>page (res<strong>et</strong>)AucuneAction associée : AucuneCo<strong>de</strong>s exécutés :1. Co<strong>de</strong> <strong>de</strong> clic navigateur du champ.2. Affichage <strong>de</strong> la page initiale (page avec tous leschamps initialisés à vi<strong>de</strong> ou à 0 <strong>et</strong> exécution duco<strong>de</strong> d’initialisation <strong>de</strong> chacun <strong>de</strong>s champs puis<strong>de</strong> la page).Action associée : AucuneCo<strong>de</strong>s exécutés :Co<strong>de</strong> navigateur du champ uniquement.Action associée : Exécuter le co<strong>de</strong> <strong>de</strong> clic du bouton/ lienCo<strong>de</strong>s exécutés :1. Co<strong>de</strong> <strong>de</strong> clic navigateur du champ.2. Co<strong>de</strong> serveur du champ.Action associée : Afficher la pageCo<strong>de</strong>s exécutés :1. Co<strong>de</strong> <strong>de</strong> clic navigateur du champ.2. Co<strong>de</strong> serveur du champ.3. Affichage <strong>de</strong> la page.Affichage automatique<strong>de</strong> la page58Partie 2 : Développement d’un site
Modèles <strong>de</strong>champsWebDev perm<strong>et</strong> <strong>de</strong> créer <strong>de</strong>s modèles <strong>de</strong> champs. Un modèle <strong>de</strong> champs est un ensemble<strong>de</strong> champs, réutilisables dans plusieurs pages.Les modifications effectuées dans un modèle <strong>de</strong> champs sont automatiquement reportéessur toutes les pages utilisant ce modèle.Un modèle <strong>de</strong> champs perm<strong>et</strong> <strong>de</strong> :• regrouper un ensemble <strong>de</strong> champs dans un but précis.• rendre les champs indépendants <strong>de</strong> la page les accueillant.Définition d’un modèle <strong>de</strong> champs : le modèleest encadré d’un trait jaune sous l’éditeur.Utilisation du modèle dansune page.Les éléments appartenantau modèle sont entourésen bleu <strong>et</strong> i<strong>de</strong>ntifiés par uncarré jaune.Un modèle <strong>de</strong> champs peut être créé :• directement (menu "Fichier .. Nouveau .. Page .. Modèle <strong>de</strong> champs")• à partir <strong>de</strong> champs présents dans la page (menu "Champ .. Refactoring .. Créer unmodèle <strong>de</strong> champs avec la sélection").Pour utiliser un modèle <strong>de</strong> champs dans une page, créez un champ <strong>de</strong> type "Modèle <strong>de</strong>champs".Remarque : La programmation associée aux éléments du modèle peut être directementréalisée dans le modèle.Les caractéristiques <strong>de</strong>s éléments peuvent être désolidarisées du modèle. Par exemple,désolidariser la position d’un champ du modèle pour positionner le champ ailleurs touten conservant les autres évolutions sur le champ (co<strong>de</strong>, style, ...). On parle alors d’héritage<strong>de</strong> champ. Dans ce cas, les éléments sont i<strong>de</strong>ntifiés par un carré bleu.60Partie 2 : Développement d’un site
LesétatsUn état perm<strong>et</strong> d’obtenir une vue personnalisée d’informations : données saisies dansla base <strong>de</strong> données, données présentes dans un fichier texte, données provenant d’unchamp Table, ...Un état est créé selon le principe suivant :• les données à imprimer sont issues d’une source <strong>de</strong> données (fichier décrit dansune analyse, vue HyperFileSQL, requête, zone mémoire ou fichier texte).• l’état regroupe, trie <strong>et</strong> m<strong>et</strong> en forme les données.L’état créé peut ensuite être :• imprimé sur l’imprimante du serveur (cas d’un site Intran<strong>et</strong>).• affiché dans le navigateur <strong>de</strong> l’internaute (format HTML, PDF, ...).• envoyé par mail à l’internaute (format PDF).Partie 2 : Développement d’un site 61
Modèlesd’étatsDans une société, bien souvent, les impressions utilisent un look <strong>et</strong> une mise en pageunifiés : date en haut à droite dans un format spécifique, bas <strong>de</strong> page avec heure d’impression<strong>et</strong> nom du fichier, logo en haut à gauche, ...Les modèles d’états perm<strong>et</strong>tent d’uniformiser simplement la mise en page <strong>de</strong> vos états.Définition d’un modèle d’étatssous l’éditeur d’états.Utilisation du modèle dans différents états.Les éléments appartenant au modèle sont i<strong>de</strong>ntifiés par un carré jaune.Les éléments du modèle surchargés sont i<strong>de</strong>ntifiés par un carré bleu.Un modèle d’états peut être créé :• directement (option "Fichier .. Nouveau.. Etat .. Modèle d’Etats").• à partir <strong>de</strong> l’état en cours (option "Fichier .. Enregistrer comme un modèle").Pour créer un état utilisant un modèle, sélectionnez le modèle à utiliser lors <strong>de</strong> la création<strong>de</strong> l’état.Remarque : La programmation associée aux éléments du modèle peut être directementréalisée dans le modèle.Les caractéristiques <strong>de</strong>s éléments peuvent être désolidarisées du modèle. Par exemple,désolidariser la position d’un champ du modèle pour positionner le champ ailleurs touten conservant les autres évolutions sur le champ (co<strong>de</strong>, style, ...). On parle alors d’héritage.Dans ce cas, les éléments sont i<strong>de</strong>ntifiés par un carré bleu.62Partie 2 : Développement d’un site
Différents mo<strong>de</strong>sd’impressionPour imprimer <strong>de</strong>s documents générés par votre site (factures, <strong>de</strong>vis, ...), créez <strong>de</strong>s étatsgrâce à l’éditeur d’états.Pour imprimer ces états quelle que soit la configuration du poste <strong>de</strong> l’internaute, il estconseillé <strong>de</strong> proposer au moins <strong>de</strong>ux mo<strong>de</strong>s d’impression :• Impression au format HTML : L’état s’affiche dans une nouvelle page du site. L’internauten’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 mo<strong>de</strong> d’impression nécessite la présenced’Adobe Rea<strong>de</strong>r (ou d’un logiciel équivalent) sur le poste <strong>de</strong> l’internaute. L’impressionse fait directement à partir <strong>de</strong> ce logiciel.Etat sous l’éditeur d’états <strong>de</strong> WebDevImpression en HTMLImpression en PDFPartie 2 : Développement d’un site 63
Afficher <strong>et</strong> enchaînerles pagesUn site est généralement constitué d’un ensemble <strong>de</strong> pages. Ces pages sont reliées entreelles grâce à <strong>de</strong>s boutons (ou <strong>de</strong>s liens). Un clic sur un bouton entraîne l’affichaged’une nouvelle page.Pour afficher une nouvelle page, il faut se poser <strong>de</strong>ux questions :1. où afficher la page (nouveau navigateur, frame, ....) ?2. quelle page afficher ?Quelle page afficher ?La page à afficher peut être définie :• soit sous l’éditeur <strong>de</strong> pages (aucune programmation n’est nécessaire).• soit sous l’éditeur <strong>de</strong> co<strong>de</strong> dans un traitement du bouton (du lien, <strong>de</strong> l’imageclicable, ...).Sélection <strong>de</strong> la page à afficher sous l’éditeur <strong>de</strong> pages (cas le plus courant)Pour définir la page à afficher :• Affichez la fenêtre <strong>de</strong> <strong>de</strong>scriptiondu champ (clic droit sur lechamp, option "Description").• Dans la liste <strong>de</strong>s actions, sélectionnezla page à afficher.Sélection <strong>de</strong> la page à afficher par programmationIl est nécessaire <strong>de</strong> sélectionner la page à afficher par programmation lorsque :• plusieurs pages peuvent être affichées (par exemple soit une page d’erreur si le mot<strong>de</strong> passe n’est pas saisi, soit la page suivante du site).• une action particulière doit être effectuée sur le serveur (calcul, lecture d’enregistrement,...).64Partie 2 : Développement d’un site
Où afficher la page ?L’affichage d’une page se fait dans une "<strong>de</strong>stination" spécifique : page en cours, nouveaunavigateur, ...La <strong>de</strong>stination peut être définie :• soit sous l’éditeur <strong>de</strong> pages : aucune programmation n’est nécessaire.• soit sous l’éditeur <strong>de</strong> co<strong>de</strong>, dans un traitement du bouton (ou du lien).Plusieurs fonctions du WLangage perm<strong>et</strong>tent d’ouvrir une nouvelle page (ou frames<strong>et</strong>).Les principales fonctions sont : PageAffiche (pour les pages) <strong>et</strong> Frames<strong>et</strong>Affiche (pourles frames<strong>et</strong>s).Sélection <strong>de</strong> la <strong>de</strong>stination sous l’éditeur <strong>de</strong> pages (cas le plus courant)Dans un bouton, pour définir la <strong>de</strong>stination <strong>de</strong> la page à afficher :• Affichez la <strong>de</strong>scription dubouton ou du lien (clicdroit sur le champ, option"Description").• Dans la liste <strong>de</strong>s <strong>de</strong>stinations,sélectionnez une<strong>de</strong>stination prédéfinie ouune frame (dans le cas d’un frames<strong>et</strong>).Remarque : Les <strong>de</strong>stinations prédéfinies sont présentées dans les pages suivantes <strong>de</strong>ce manuel.Sélection <strong>de</strong> la <strong>de</strong>stination sous l’éditeur <strong>de</strong> co<strong>de</strong>Lorsque la <strong>de</strong>stination dépend d’un choix <strong>de</strong> l’internaute, c<strong>et</strong>te <strong>de</strong>stination doit être sélectionnéepar programmation. Par exemple, si l’internaute n’indique pas son mot <strong>de</strong>passe, une page d’erreur apparaît dans un nouveau navigateur; sinon, la page suivantes’affiche dans le navigateur en cours.La fonction WLangage ChangeDestination perm<strong>et</strong> <strong>de</strong> modifier par programmation la <strong>de</strong>stinationd’une action. C<strong>et</strong>te fonction doit être utilisée dans un co<strong>de</strong> navigateur.Partie 2 : Développement d’un site 65
Choisir une <strong>de</strong>stinationLors du choix <strong>de</strong> la <strong>de</strong>stination pour un bouton, un lien, une image clicable, une option<strong>de</strong> menu, ... il est possible <strong>de</strong> choisir :• une <strong>de</strong>stination prédéfinie : quatre <strong>de</strong>stinations prédéfinies sont proposées :- Navigateur en cours (_top pour les habitués)- Frame en cours (_self)- Frame parent (_parent)- Nouveau navigateur (_blank). Dans ce cas, vous pouvez choisir les caractéristiquesdu nouveau navigateur (présence <strong>de</strong> la barre <strong>de</strong> menu, <strong>de</strong> la barre <strong>de</strong> message,...).• une frame du frames<strong>et</strong> en cours.Remarque : dans les schémas ci-<strong>de</strong>ssous, la zone grisée représente la zone dans laquellela page est affichée lors du clic sur le bouton.Navigateur en cours (_top)Clic surle boutonPage initialeNouvelle page affichée dansla totalité du navigateurFrame en cours (_self)Clic surle boutonPage initialeNouvelle page affichéedans la même frame66Partie 2 : Développement d’un site
Frame parent (_parent)Clic surle boutonPage initiale(imbrication <strong>de</strong> 2 frames<strong>et</strong>s)Nouvelle page affichée dansla page contenant lesecond frames<strong>et</strong>Nouveau navigateur (_blank)Clic surle boutonPage initialeNouvelle page affichéedans une nouvellefenêtre du navigateurFenêtre <strong>de</strong> définition <strong>de</strong>scaractéristiques du nouveau navigateurPartie 2 : Développement d’un site 67
Affichage d’une page dynamique : création du contexte associéNous savons que WebDev perm<strong>et</strong> <strong>de</strong> créer <strong>de</strong>s pages dynamiques. Le contenu dynamique<strong>de</strong>s pages est défini ‘‘à la volée’’ à l’exécution <strong>de</strong> la page (c’est-à-dire lorsque la pageest affichée sur le navigateur <strong>de</strong> l’internaute).Pour chaque page dynamique affichée sur le navigateur, un "contexte <strong>de</strong> page" est créésur le serveur. Ce contexte contient toutes les informations relatives à la page (valeur <strong>de</strong>svariables en cours, contenu <strong>de</strong>s champs, ....).Poste <strong>de</strong>l’internautePoste ServeurContexte <strong>de</strong> pageChaque page dynamique (affichée sur le poste <strong>de</strong> chaque internaute) est associée à uncontexte <strong>de</strong> page.Si la page perm<strong>et</strong> d’afficher <strong>de</strong>s données différentes (fiche produit avec boutons <strong>de</strong> parcourspar exemple), à chaque nouvel enregistrement affiché, le contexte est modifié, <strong>et</strong>la page est uniquement actualisée.68Partie 2 : Développement d’un site
Afficher ou Actualiser une page dynamique : PageAffiche ouPageActualise ?Le WLangage propose <strong>de</strong>ux fonctions pour afficher une page dynamique : PageAffiche<strong>et</strong> PageActualise. Ces fonctions perm<strong>et</strong>tent d’afficher ou d’actualiser une page dynamique.Ces <strong>de</strong>ux concepts sont totalement différents.Affichage d’une page = nouvelle pageL’affichage d’une page dynamique correspond à l’ouverture d’une "nouvelle page" sur lenavigateur. Par exemple, ouverture <strong>de</strong> la page "Visu_Produit" perm<strong>et</strong>tant <strong>de</strong> visualiserl’article sélectionné dans une table.Attention : Si vous "affichez" une page précé<strong>de</strong>mment ouverte, la page <strong>et</strong> son contextesont fermés puis réouverts. Toutes les données <strong>de</strong> la page sont ré-initialisées.Actualisation d’une page = ré-affichage <strong>de</strong> la page (plus rapi<strong>de</strong>)L’actualisation d’une page dynamique consiste à ré-afficher une page déjà ouverte sousle navigateur. L’action effectuée est i<strong>de</strong>ntique à l’utilisation <strong>de</strong> la touche "Rafraîchir" dunavigateur.Les données dynamiques présentes dans la page sont mises à jour en fonction <strong>de</strong>s contextesprésents sur le serveur. Seules les données modifiées sont réaffichées.Exemple : Dans un site commercial, la page présentant la liste <strong>de</strong>s produits sélectionnésest actualisée lorsqu’un nouveau produit est commandé.Conseil <strong>de</strong> performances :Pour actualiser les données affichées dans une page dynamique, utilisez la fonction"PageActualise". Avec la fonction "PageAffiche", le temps <strong>de</strong> chargement <strong>de</strong> la page estplus long.Partie 2 : Développement d’un site 69
Réaliser un traitement surplusieurs pages successivesDans un site commercial, une prise <strong>de</strong> comman<strong>de</strong> peut par exemple être réalisée sur différentespages :• page 1 : Sélection <strong>de</strong>s produits à comman<strong>de</strong>r.• page 2 : Visualisation du panier.• page 3 : Validation <strong>de</strong> la comman<strong>de</strong> <strong>et</strong> saisie <strong>de</strong>s coordonnées du client.Page 1 : Sélection <strong>de</strong>s produitsPage 2 : Visualisation du panierPage 3 : Saisie <strong>de</strong>s coordonnées du clientDans ce cas, l’écriture <strong>de</strong>s données dans les fichiers doit s’effectuer UNIQUEMENT dansle co<strong>de</strong> du bouton <strong>de</strong> validation <strong>de</strong> la comman<strong>de</strong> : tous les éléments <strong>de</strong> la comman<strong>de</strong>doivent être mémorisés jusqu’à la validation finale. N’écrivez pas dans les fichiers encours <strong>de</strong> traitement.Remarque : Il est également possible d’utiliser une transaction, mais nous vous recommandons<strong>de</strong> mémoriser les informations <strong>de</strong> la comman<strong>de</strong>.70Partie 2 : Développement d’un site
Feuilles <strong>de</strong> styles : poursimplifier la mise en pageLes feuilles <strong>de</strong> styles sont <strong>de</strong>s modèles qui perm<strong>et</strong>tent d’uniformiser la présentation <strong>de</strong>schamps dans les pages.Les feuilles <strong>de</strong> styles perm<strong>et</strong>tent <strong>de</strong> définir :• la taille <strong>et</strong> la forme <strong>de</strong> vos textes, la police,• l’alignement <strong>de</strong> vos paragraphes, les r<strong>et</strong>raits <strong>de</strong> paragraphe, ...• le style <strong>de</strong> texte (gras ou italique), sa couleur, ...Et bien plus encore.Quand vous modifiez une caractéristique du style, tous les champs associés à ce stylesont mis à jour. Il est ainsi possible <strong>de</strong> modifier la charte graphique d’un site en effectuantuniquement quelques modifications dans les styles utilisés.Un exemple d’utilisation <strong>de</strong>s feuilles <strong>de</strong> styles : augmenter la taille <strong>de</strong> 8 à 15 :Remarque : L’ongl<strong>et</strong> "CSS personnalisé" perm<strong>et</strong> <strong>de</strong> saisir directement du co<strong>de</strong> CSS. Ceco<strong>de</strong> sera ensuite ajouté dans la feuille <strong>de</strong> styles.Partie 2 : Développement d’un site 71
Site centréou adapté ?La mise en page est un élément fondamental dans la réalisation d’un site. Pour optimiserc<strong>et</strong>te mise en page, il est nécessaire <strong>de</strong> prendre en compte la résolution <strong>de</strong> l’écran <strong>de</strong>l’internaute.Par exemple, si votre site est créé pour la résolution 1280 x 1024 pixels, les internautesutilisant une résolution <strong>de</strong> 1024 x 768 verront apparaître <strong>de</strong> nombreux ascenseurs.D’une manière générale, à la date d’impression <strong>de</strong> ce manuel, il est conseillé <strong>de</strong> développer<strong>de</strong>s sites optimisés pour une résolution écran <strong>de</strong> 1024 x 768.Deux types <strong>de</strong> mise en page d’un site peuvent être utilisés :• site centré :Les pages sont centrées dans le navigateur. Si la résolution <strong>de</strong> l’internaute est supérieureà la résolution optimale du site, <strong>de</strong>s marges blanches apparaissent <strong>de</strong> part <strong>et</strong>d’autre <strong>de</strong> la page.Résolution : 800 x 600 Résolution : 1024 x 768 :les marges apparaissent <strong>de</strong> chaque côté <strong>de</strong> la page• site adapté :Les pages sont affichées normalement dans le navigateur. Si la résolution <strong>de</strong> l’internauteest supérieure à la résolution optimale du site, une marge blanche est ajoutéeà droite <strong>de</strong>s pages.Résolution : 800 x 600Résolution : 1024 x 768 :la page reste "collée" à gaucheRemarque : Le type <strong>de</strong> mise en page (centré ou adapté) configuré dans un modèle <strong>de</strong>pages sera automatiquement utilisé par les pages associées à ce modèle.72Partie 2 : Développement d’un site
Référencementd’un sitePour que votre site soit visité, les internautes doivent le trouver. Pour cela, votre site doitêtre proposé lorsque l’internaute saisira les mots-clés caractérisant votre site dans unmoteur <strong>de</strong> recherche.Pour ai<strong>de</strong>r au référencement <strong>de</strong> votre site, WebDev propose :• un assistant <strong>de</strong> référencement. C<strong>et</strong> assistant liste toutes les optimisations pouvantêtre réalisées pour améliorer le référencement <strong>de</strong> votre site. Pour lancer l’assistant,utilisez le menu "Proj<strong>et</strong> .. Référencement .. Optimiser le référencement").• la possibilité <strong>de</strong> saisir une <strong>de</strong>scription <strong>et</strong> <strong>de</strong>s mots-clés sur chaque page <strong>de</strong> votresite.• l’intégration d’une page d’accueil. C<strong>et</strong>te page d’accueil perm<strong>et</strong> <strong>de</strong> saisir la <strong>de</strong>scription<strong>de</strong> votre site <strong>et</strong> les mots-clés décrivant votre site.Il est possible d’intégrer une page d’accueil à votre site :• soit lors <strong>de</strong> la création du proj<strong>et</strong> (dans l’assistant <strong>de</strong> création du proj<strong>et</strong>).• soit lors du développement du proj<strong>et</strong> (option "Fichier .. Nouveau .. Page", ongl<strong>et</strong>"Vierge / Modèles", option "Accueil").Plusieurs modèles <strong>de</strong> pages d’accueil sont proposés.Remarque : le référencement est une technique dont les règles sont dictées par les moteurs<strong>de</strong> recherche (Google, Bing, <strong>et</strong>c.), ne sont pas toujours explicites <strong>et</strong> évoluent trèsvite. N’hésitez pas à consulter <strong>de</strong>s ouvrages ou <strong>de</strong>s sites spécialisés sur ce suj<strong>et</strong>.Partie 2 : Développement d’un site 73
Référencement d’un site en pratique1 Principes du référencementPour que votre site WebDev soit visité, il faut queles internautes puissent le trouver. Pour cela, votresite doit être proposé lorsque l’internaute saisirales mots-clés caractérisant votre site dans unmoteur <strong>de</strong> recherche.Pour vous ai<strong>de</strong>r, WebDev propose :• Un référencement <strong>de</strong> chaque page statique <strong>et</strong>AWP : pour chaque page il est possible <strong>de</strong> définirune <strong>de</strong>scription <strong>et</strong> un ensemble <strong>de</strong> mots-clés.Ces mots-clés perm<strong>et</strong>tront aux internautesd'accé<strong>de</strong>r directement à la page. Il est égalementpossible <strong>de</strong> ne pas référencer une page.• Un assistant d'ai<strong>de</strong> au référencement, indiquantpour chaque page les améliorations pouvant êtreeffectuées pour optimiser le référencement.•La possibilité d'intégrer ou d'utiliser une pagespécifique en tant que page d'accueil. C<strong>et</strong>te solutionperm<strong>et</strong> par exemple <strong>de</strong> référencer les pagesdynamiques, en associant <strong>de</strong>s mots-clés à lapage d'accueil. C<strong>et</strong>te page d'accueil contient tousles mots-clés qui perm<strong>et</strong>tront aux internautes <strong>de</strong>trouver votre site.Remarque : Pour optimiser le référencement <strong>de</strong> vospages dans les moteurs <strong>de</strong> recherche, il est conseilléd'utiliser <strong>de</strong>s pages AWP. Si vous <strong>de</strong>vez référencerun site dynamique, utilisez :• une page d'accueil.•une partie du site en statique. Le site statiqueperm<strong>et</strong>tra d'effectuer le référencement <strong>et</strong> <strong>de</strong> lancerle site dynamique.• une partie du site en mo<strong>de</strong> AWP. Le site AWP perm<strong>et</strong>trad'effectuer le référencement <strong>et</strong> <strong>de</strong> lancerle site dynamique.2 Référencer ou non une page statique ou AWP d’un sitePour référencer une page statique ou AWP <strong>de</strong> votresite :1. Affichez la fenêtre <strong>de</strong> <strong>de</strong>scription <strong>de</strong> la page.2. Dans l'ongl<strong>et</strong> "Détail", une zone spécifique perm<strong>et</strong><strong>de</strong> gérer le référencement <strong>de</strong> la page.Il est possible <strong>de</strong> :• Ne pas référencer la page en cours.• Référencer la page en cours, en lui associant <strong>de</strong>sexpressions <strong>et</strong> <strong>de</strong>s mots-clés (bouton "Editer lesexpressions <strong>et</strong> les mots-clés").3 Référencer <strong>et</strong> saisir les mots-clés d’une pagePour référencer une page statique ou AWP <strong>de</strong> votresite :1. Affichez la fenêtre <strong>de</strong> <strong>de</strong>scription <strong>de</strong> la page.2. Dans l'ongl<strong>et</strong> "Détail", une zone spécifique perm<strong>et</strong><strong>de</strong> gérer le référencement <strong>de</strong> la page. Dansc<strong>et</strong>te zone, cliquez sur le bouton "Editer les expressions<strong>et</strong> les mots-clés".3. Dans l'ongl<strong>et</strong> "Description" <strong>de</strong> la fenêtre <strong>de</strong> référencement,saisissez la <strong>de</strong>scription <strong>de</strong> la page.C<strong>et</strong>te <strong>de</strong>scription apparaît le plus souvent dansl'affichage du résultat d'une recherche effectuéeavec un moteur <strong>de</strong> recherche. Quelques conseils :• Utilisez <strong>de</strong>s phrases courtes, limitez le nombre<strong>de</strong> mots (200 caractères maximum)•C<strong>et</strong>te <strong>de</strong>scription doit donner aux internautesenvie d'afficher la page.Remarque : C<strong>et</strong>te <strong>de</strong>scription peut être modifiéedynamiquement grâce à la propriété ..Description.4. Dans l'ongl<strong>et</strong> "Mots-clés" <strong>de</strong> la fenêtre <strong>de</strong> référencement,saisissez les mots-clés associés à lapage. Ces mots-clés (ou expressions) seront lesmots-clés pour lesquels la page sera référencée : sil'internaute saisit un <strong>de</strong> ces mots-clés, le moteur <strong>de</strong>recherche proposera la page correspondante. Lasaisie <strong>de</strong>s mots-clés se fait <strong>de</strong> la manière suivante :saisissez le premier mot-clé puis appuyez sur latouche [ENTREE] pour saisir le suivant.74Partie 2 : Développement d’un site
Quelques conseils :• Les trois premiers mots-clés sont les plus importants.Utilisez <strong>de</strong>s mots-clés usuels <strong>et</strong> discriminants.• Les mots-clés ne doivent pas être répétés.• Utilisez <strong>de</strong>s variantes (singulier / pluriel, masculin/ féminin, nom / verbe, ...).Remarque : Ces mots-clés peuvent être modifiésdynamiquement grâce à la propriété ..MotsClés.5. Vali<strong>de</strong>z la fenêtre <strong>de</strong> référencement, puis la fenêtre<strong>de</strong> <strong>de</strong>scription <strong>de</strong> la page.4 Utiliser l’assistant d’ai<strong>de</strong> au référencementPour vous ai<strong>de</strong>r à optimiser le référencement <strong>de</strong>vos sites <strong>et</strong> <strong>de</strong> vos pages, WebDev propose unassistant d'ai<strong>de</strong> au référencement. C<strong>et</strong> assistantpeut être utilisé sur une page spécifique, ou surtoutes les pages <strong>de</strong> votre proj<strong>et</strong>. C<strong>et</strong> assistant analysela composition <strong>de</strong>s pages du site <strong>et</strong> indique lesaméliorations à apporter pour maximiser le positionnement<strong>de</strong>s pages dans les moteurs <strong>de</strong> recherche.Quelques exemples d'optimisations détectées parl'assistant :• Le titre <strong>de</strong> la page doit être renseigné.• Trois mots-clés doivent être spécifiés au minimumdans la page.• La <strong>de</strong>scription <strong>de</strong> la page doit être renseignée.• Le texte alternatif doit être saisi pour tous leschamps le proposant (si possible en utilisant lesmots-clés définis pour la page), ...Pour lancer l'assistant d'ai<strong>de</strong> au référencementsur une page :1. Affichez la page voulue dans l'éditeur.2. Sélectionnez l'option "Page .. Optimiser le référencement<strong>de</strong> la page".3. L'assistant <strong>de</strong> référencement se lance. Vous pouvezdouble-cliquer directement sur une propositionpour effectuer l'optimisation correspondante. Lebouton "Rafraîchir" perm<strong>et</strong> <strong>de</strong> m<strong>et</strong>tre la liste <strong>de</strong>spropositions à jour.Pour lancer l'assistant d'ai<strong>de</strong> au référencementsur l'ensemble <strong>de</strong>s pages du site :1. Sélectionnez l'option "Proj<strong>et</strong> .. Performances <strong>et</strong>Améliorations .. Optimiser le référencement".2. L'assistant <strong>de</strong> référencement se lance. Vous pouvezdouble-cliquer directement sur une propositionpour effectuer l'optimisation correspondante. Lebouton "Rafraîchir" perm<strong>et</strong> <strong>de</strong> m<strong>et</strong>tre la liste <strong>de</strong>spropositions à jour. Les résultats peuvent être triéspar page ou par type <strong>de</strong> conseils.5 Intégrer une page d’accueil dans votre siteIl est possible d'intégrer une page d'accueil dansvotre site :• lors <strong>de</strong> la création du proj<strong>et</strong>. Il est alors possible<strong>de</strong> choisir une page d'accueil pré-définie.•lors <strong>de</strong> la création d'une nouvelle page (option"Fichier .. Nouveau .. Page", ongl<strong>et</strong> "Vierge /modèles", option "Accueil").Si aucune page d'accueil n'est associée à votre proj<strong>et</strong>,vous pouvez :• soit choisir une page d'accueil parmi les pagesstatiques <strong>de</strong> votre site• soit choisir une page d'accueil pré-définie.Partie 2 : Développement d’un site 75
6 Faire connaître son site auprès <strong>de</strong>s moteurs <strong>de</strong> rechercheLe référencement d’un site se fait directement surles moteurs <strong>de</strong> recherche.Remarque : Le référencement d’un site est parfoispayant.Il existe <strong>de</strong>ux types <strong>de</strong> moteurs <strong>de</strong> recherche :• les moteurs <strong>de</strong> recherche <strong>de</strong> type"Automatique" :Ces moteurs <strong>de</strong> recherche reposent sur <strong>de</strong>s programmesautomatiques d'analyse <strong>de</strong> contenu.Comment se faire référencer ?Un lien <strong>de</strong> type "Référencer votre site" est trèssouvent disponible sur ce type <strong>de</strong> moteur <strong>de</strong>recherche. Il suffit alors <strong>de</strong> spécifier l'adresse dusite <strong>et</strong> l'email du Webmaster. Le site sera alorsautomatiquement analysé (analyse basée sur lesmots-clé <strong>et</strong> le contenu <strong>de</strong> votre site) <strong>et</strong> référencé.• les moteurs <strong>de</strong> recherche <strong>de</strong> type "Annuaire" :Ces moteurs <strong>de</strong> recherche référencent <strong>de</strong>s sitesau préalable testés par <strong>de</strong>s personnes physiques.Comment se faire référencer ?Un lien <strong>de</strong> type "Référencer votre site" est trèssouvent disponible sur ce type <strong>de</strong> moteur <strong>de</strong>recherche.La procédure <strong>de</strong> référencement est généralementla suivante :1. Choix d'une catégorie d'appartenance du site(loisirs, culture, ...).2. Répondre à un questionnaire sur le site àréférencer : adresse Intern<strong>et</strong> du site, email duWebMaster, <strong>de</strong>scription du site, ...3. Après l'envoi du questionnaire, votre site seraévalué par une personne <strong>de</strong> la société <strong>de</strong> gestion<strong>de</strong> l'annuaire. C<strong>et</strong>te personne référencera votresite si son contenu lui semble intéressant.76Partie 2 : Développement d’un site
PARTIE 3Environnement <strong>de</strong>développement
Les éditeurs<strong>de</strong> WebDevPour manipuler un proj<strong>et</strong>, WebDev propose <strong>de</strong> nombreux éditeurs intégrés :• éditeur <strong>de</strong> proj<strong>et</strong>.• éditeur d’analyses.• éditeur <strong>de</strong> modèles UML.• éditeur <strong>de</strong> requêtes.• éditeur <strong>de</strong> pa ges.• éditeur d’états.• ...Ces éditeurs perm<strong>et</strong>tent <strong>de</strong> manipuler facilement les différents éléments du proj<strong>et</strong>.Partie 3 : Environnement <strong>de</strong> développement 79
Des éditeurs conviviaux en pratique1 IntroductionWebDev est architecturé autour d’éditeurs, adaptésà chacun <strong>de</strong>s besoins du développeur, unifiés dansun environnement unique :•éditeur <strong>de</strong> proj<strong>et</strong>.•éditeur d’analyses.•éditeur <strong>de</strong> modèles UML.• éditeur <strong>de</strong> requêtes.•éditeur <strong>de</strong> pages.•éditeur d’états.•éditeur <strong>de</strong> co<strong>de</strong> source, débogueur <strong>et</strong> compilateur.• éditeur <strong>de</strong> modélisation.•éditeur <strong>de</strong> documents.Ces différents éditeurs vont perm<strong>et</strong>tre <strong>de</strong> créer lesdifférents éléments (pages, états, base <strong>de</strong> données,programmes, …) manipulés par le site.2 Les différents éditeurs2.1 L’éditeur <strong>de</strong> proj<strong>et</strong>L’éditeur <strong>de</strong> proj<strong>et</strong> a <strong>de</strong>ux fonctionnalitésprincipales :• il perm<strong>et</strong> <strong>de</strong> visualiser rapi<strong>de</strong>ment l’ensemble<strong>de</strong>s éléments d’un proj<strong>et</strong> (principalement pages,états <strong>et</strong> requêtes).• il perm<strong>et</strong> <strong>de</strong> visualiser <strong>et</strong> <strong>de</strong> créer les enchaînementsentre les pages <strong>et</strong> les états.Voici quelques caractéristiques <strong>de</strong> l’éditeur <strong>de</strong>proj<strong>et</strong> :• Editeur WYSIWYG ("What You See Is What YouG<strong>et</strong>"). Vous visualisez directement tous les éléments<strong>de</strong> votre proj<strong>et</strong>.•Gestion du proj<strong>et</strong> à l’ai<strong>de</strong> d’un tableau <strong>de</strong> bordcompl<strong>et</strong>.• Création <strong>et</strong> visualisation <strong>de</strong>s enchaînementsentre plusieurs éléments (pages, états, ...) <strong>de</strong>votre proj<strong>et</strong> à l’ai<strong>de</strong> du graphe du proj<strong>et</strong>.• Interaction <strong>de</strong>s différents vol<strong>et</strong>s avec les différentséléments du proj<strong>et</strong>.•Editeur d’analyses• L’éditeur d’analyses perm<strong>et</strong> <strong>de</strong> décrire les caractéristiques<strong>et</strong> la structure <strong>de</strong>s fichiers <strong>de</strong> données.• L’éditeur d’analyses supporte la métho<strong>de</strong> Merise(MCD <strong>et</strong> MLD).• L’éditeur d’analyses perm<strong>et</strong> principalement <strong>de</strong>uxtypes <strong>de</strong> <strong>de</strong>scriptions d’une base <strong>de</strong> données :•<strong>de</strong>scription directe <strong>de</strong> l’analyse liée au proj<strong>et</strong>(appelée aussi Modèle Logique <strong>de</strong>s Données(MLD)•<strong>de</strong>scription du Modèle Conceptuel <strong>de</strong>s Données(MCD) puis génération automatiquement <strong>de</strong>l’analyse.Voici quelques caractéristiques <strong>de</strong> l’éditeurd’analyses :•Editeur WYSIWYG ("What You See Is What YouG<strong>et</strong>"). Vous visualisez directement tous lesfichiers <strong>et</strong> les liaisons <strong>de</strong> votre proj<strong>et</strong>.• Création <strong>et</strong> <strong>de</strong>scription <strong>de</strong>s fichiers <strong>et</strong> <strong>de</strong> leursrubriques.• Utilisation d’une analyse au format WinDev 5.5.• Mise en forme automatique <strong>de</strong>s liaisons <strong>de</strong> l’analyse.• Informations sur les liaisons par <strong>de</strong>s bullesd’ai<strong>de</strong>.• Récupération simplifiée <strong>de</strong> la <strong>de</strong>scription d’unebase <strong>de</strong> données externe (SQL Server, Oracle,AS/400, ...).• Description indépendante <strong>de</strong>s fichiers <strong>de</strong> données.• Cryptage <strong>de</strong>s fichiers <strong>de</strong> données.• Modification automatique <strong>de</strong>s fichiers <strong>de</strong> donnéesen cas <strong>de</strong> modification <strong>de</strong> la structure <strong>de</strong>sfichiers.• Vérification <strong>de</strong> l'intégrité référentielle.• Génération automatique <strong>de</strong> l’analyse.• Zoom sur l’éditeur d’analyses.•Insertion <strong>de</strong> commentaires dans le graphe <strong>de</strong>l’analyse.• Interaction <strong>de</strong>s différents vol<strong>et</strong>s avec les différentséléments <strong>de</strong> l’analyse.80Partie 3 : Environnement <strong>de</strong> développement
2.2 Editeur UMLLe langage UML est un langage graphique perm<strong>et</strong>tant<strong>de</strong> :• représenter le système d’information étudié sousforme d’obj<strong>et</strong>s.•générer la structure obj<strong>et</strong> du site (squel<strong>et</strong>te <strong>de</strong>l’application sous forme <strong>de</strong> classes obj<strong>et</strong>) correspondantau système d’information étudié.L’éditeur d’UML perm<strong>et</strong> principalement :• <strong>de</strong> décrire directement un ou plusieurs diagrammesUML.•<strong>de</strong> construire un modèle UML par rétro-analyse<strong>de</strong> votre proj<strong>et</strong>.Pour plus <strong>de</strong> détails sur la création d’un modèleUML, consultez le chapitre “Le modèle UML”,page 118.Voici quelques caractéristiques <strong>de</strong> l’éditeur d’UML :• Création <strong>et</strong> <strong>de</strong>scription <strong>de</strong> diagrammes UML.• Mise en forme automatique <strong>de</strong>s liaisons.• Génération automatique d’une classe ou d’unensemble <strong>de</strong> classes à partir d’un diagramme <strong>de</strong>classes.• Zoom sur l’éditeur d’UML.• Insertion <strong>de</strong> commentaires dans un modèle UML.• Interaction <strong>de</strong>s différents vol<strong>et</strong>s avec les différentséléments du modèle UML.2.3 Editeur <strong>de</strong> requêtesL’éditeur <strong>de</strong> requêtes perm<strong>et</strong> <strong>de</strong> créer automatiquement<strong>de</strong>s requêtes sur les fichiers <strong>de</strong> données.La programmation est ainsi simplifiée: pages,tables, combos, états, ... pourront s’appuyer sur lesrequêtes.Un assistant perm<strong>et</strong> <strong>de</strong> créer une requête : il suffit<strong>de</strong> choisir les rubriques à intégrer <strong>et</strong> <strong>de</strong> saisir lesconditions <strong>de</strong> sélection à l’ai<strong>de</strong> <strong>de</strong> l’assistant. Larequête est automatiquement générée (en co<strong>de</strong>SQL optimisé) <strong>et</strong> peut être testée immédiatement.Vous trouverez toutes les informations concernantles requêtes dans le "Gui<strong>de</strong> <strong>de</strong> l’éditeur d’états <strong>et</strong><strong>de</strong> requêtes".Voici quelques caractéristiques <strong>de</strong> l’éditeur <strong>de</strong>requêtes :• Editeur WYSIWYG ("What You See Is What YouG<strong>et</strong>"). Vous visualisez directement la requête <strong>et</strong>son résultat.• Création simplifiée d’une requête à l’ai<strong>de</strong> d’unassistant.• Génération automatique du co<strong>de</strong> SQL <strong>de</strong> chaquerequête.•Possibilité <strong>de</strong> tester immédiatement les requêtes.• Zoom sur l’éditeur <strong>de</strong> requêtes.2.4 Editeurs <strong>de</strong> pagesL’éditeur <strong>de</strong> pages perm<strong>et</strong> <strong>de</strong> décrire les caractéristiques<strong>de</strong> l’interface utilisateur <strong>de</strong> votre proj<strong>et</strong>.De nombreux modèles, ambiances <strong>et</strong> types <strong>de</strong>pages sont proposés. Ils perm<strong>et</strong>tent d’améliorerl’ergonomie <strong>de</strong> vos pages <strong>et</strong> <strong>de</strong> rendre vos sitesconviviaux.Voici quelques caractéristiques <strong>de</strong> l’éditeur <strong>de</strong>pages :• Editeur WYSIWYG ("What You See Is What YouG<strong>et</strong>"). Vous visualisez directement votre pag<strong>et</strong>elle qu’elle apparaîtra à l’utilisateur.• Création <strong>et</strong> <strong>de</strong>scription <strong>de</strong>s pages <strong>et</strong> <strong>de</strong> leurschamps.• "Drag and Drop" perm<strong>et</strong>tant <strong>de</strong> copier, <strong>de</strong> collerou <strong>de</strong> déplacer <strong>de</strong>s champs d’une page à uneautre.• Modèles <strong>de</strong> pages <strong>et</strong> styles <strong>de</strong> champ pré-définis.•Présence <strong>de</strong> plusieurs catalogues d’icones perm<strong>et</strong>tantd’associer <strong>de</strong>s images aux champs.• Correcteur d’interface en temps réel perm<strong>et</strong>tant<strong>de</strong> simplifier le positionnement <strong>de</strong>s champs.• Saisie <strong>de</strong>s libellés <strong>de</strong>s champs directement dansla zone <strong>de</strong> travail <strong>de</strong> l’éditeur.• Gestion <strong>de</strong> l’ai<strong>de</strong> contextuelle dans les pages.•Zoom sur l’éditeur <strong>de</strong> pages.• Interaction <strong>de</strong>s différents vol<strong>et</strong>s avec les différentséléments <strong>de</strong> l’éditeur.2.5 Editeur d’étatsL’éditeur d’états perm<strong>et</strong> <strong>de</strong> créer très simplement<strong>de</strong>s états à imprimer.Vous trouverez toutes les informations concernantla création d’états imprimés dans le "Gui<strong>de</strong> <strong>de</strong> l’éditeurd’états <strong>et</strong> <strong>de</strong> requêtes".Voici quelques caractéristiques <strong>de</strong> l’éditeurd’états :• Editeur WYSIWYG ("What You See Is What YouG<strong>et</strong>"). Vous visualisez directement les états telsqu’ils seront à l’impression.• Création simplifiée d’un état sans une seule ligne<strong>de</strong> co<strong>de</strong>.• "Drag and Drop" perm<strong>et</strong>tant <strong>de</strong> copier, <strong>de</strong> collerou <strong>de</strong> déplacer <strong>de</strong>s champs d’un état à un autre.Partie 3 : Environnement <strong>de</strong> développement 81
• Gabarits d’états <strong>et</strong> styles <strong>de</strong> champs pré-définis.• Correcteur d’interface en temps réel perm<strong>et</strong>tant<strong>de</strong> simplifier le positionnement <strong>de</strong>s champs.• Utilisation d’un formulaire en fond d’un état.• Création d’étiqu<strong>et</strong>tes multi-colonnes.• Edition d’un état au format HTML (pour le publiersur Intern<strong>et</strong> par exemple), ou au format RTF (pourl’éditer avec un traitement <strong>de</strong> texte par exemple).• Zoom sur l’éditeur d’état.2.6 Editeur <strong>de</strong> co<strong>de</strong>L’éditeur <strong>de</strong> co<strong>de</strong> perm<strong>et</strong> <strong>de</strong> saisir tous les traitementsen WLangage (le langage <strong>de</strong> programmationintégré à WebDev). Il perm<strong>et</strong> par exemple <strong>de</strong> saisirle co<strong>de</strong> source :•<strong>de</strong>s champs,•<strong>de</strong>s pages,•<strong>de</strong>s états• <strong>de</strong>s procédures locales <strong>et</strong> globales,• <strong>de</strong>s classes <strong>et</strong> <strong>de</strong>s métho<strong>de</strong>s, ...Voici quelques caractéristiques <strong>de</strong> l’éditeur <strong>de</strong>co<strong>de</strong> :• Mise en forme automatique <strong>de</strong>s informations saisies.•Complétion automatique.• Glossaire sur les fonctions.• Détection immédiate <strong>de</strong>s erreurs <strong>de</strong> frappe <strong>et</strong>ai<strong>de</strong> à la correction.• Compilation incrémentale.• Visualisation <strong>de</strong>s différents traitements d’unefenêtre, d’un champ ou d’un état du proj<strong>et</strong>.• Insertion <strong>de</strong> traitements spécifiques à l’utilisation<strong>de</strong> la souris ou du clavier.• Gestion <strong>de</strong> l’historique <strong>de</strong>s modifications du co<strong>de</strong>avec possibilité <strong>de</strong> revenir en arrière.• Ouverture <strong>de</strong> plusieurs fenêtres <strong>de</strong> co<strong>de</strong> (poureffectuer <strong>de</strong>s comparaisons <strong>de</strong> co<strong>de</strong> par exemple).• Zoom sur l’éditeur <strong>de</strong> co<strong>de</strong>.• Interaction <strong>de</strong>s différents vol<strong>et</strong>s avec les différentséléments <strong>de</strong> l’éditeur.Pour plus <strong>de</strong> détails sur l’éditeur <strong>de</strong> co<strong>de</strong>, nousvous recommandons <strong>de</strong> lire le manuel "WLangage".82Partie 3 : Environnement <strong>de</strong> développement
Tableau <strong>de</strong> borddu proj<strong>et</strong>Le tableau <strong>de</strong> bord du proj<strong>et</strong> est un élément indispensable à la gestion <strong>de</strong> proj<strong>et</strong>s Web-Dev. Le tableau <strong>de</strong> bord perm<strong>et</strong> d’avoir une vision globale <strong>et</strong> synthétique <strong>de</strong> l’état d’avancementd’un proj<strong>et</strong>.Le tableau <strong>de</strong> bord propose <strong>de</strong>ux mo<strong>de</strong>s <strong>de</strong> visualisation du proj<strong>et</strong> :• Le mo<strong>de</strong> Développeur,• Le mo<strong>de</strong> Chef <strong>de</strong> proj<strong>et</strong>.Le tableau <strong>de</strong> bord du proj<strong>et</strong> en mo<strong>de</strong> Développeur est composé :• <strong>de</strong> voyants : Si les voyants sont verts, tout va bien. Les voyants rouges signalent unproblème potentiel.• <strong>de</strong> listes d’éléments, perm<strong>et</strong>tant un accès rapi<strong>de</strong> aux principales options du proj<strong>et</strong>.• <strong>de</strong> compteurs, perm<strong>et</strong>tant <strong>de</strong> gérer les nouveautés, les <strong>de</strong>man<strong>de</strong>s, ...Le tableau <strong>de</strong> bord en mo<strong>de</strong> Chef <strong>de</strong> Proj<strong>et</strong> perm<strong>et</strong> d’obtenir <strong>de</strong>s informations graphiquessur l’état d’avancement du proj<strong>et</strong> <strong>et</strong> la qualité du proj<strong>et</strong>. Ce mo<strong>de</strong> est recommandélors <strong>de</strong> l’utilisation du Centre <strong>de</strong> Suivi <strong>de</strong> Proj<strong>et</strong>s avec une gestion <strong>de</strong>s exigences.Partie 3 : Environnement <strong>de</strong> développement 83
WebDev, WinDev, WinDevMobile : 100% compatibleLes proj<strong>et</strong>s créés actuellement sont souvent multi-cibles.Par exemple, pour un ERP <strong>de</strong>stiné à fonctionner sous Windows, il est fort probable qu'enplus <strong>de</strong> l'application qui sera le socle <strong>de</strong> la solution applicative, <strong>de</strong>s commerciaux serontéquipés <strong>de</strong> PDA ou <strong>de</strong> Smartphones, les magasiniers utiliseront <strong>de</strong>s terminaux mobilespour la gestion <strong>de</strong>s stocks <strong>et</strong> qu'un site Intran<strong>et</strong> <strong>et</strong> un site Intern<strong>et</strong> seront mis en place.Tous les éléments, hormis l’IHM (pages <strong>et</strong> fenêtres) sont 100% compatibles <strong>et</strong> partageablesentre <strong>de</strong>s proj<strong>et</strong>s WinDev, WebDev <strong>et</strong> WinDev Mobile.Il est ainsi possible <strong>de</strong> partager <strong>de</strong>s collections <strong>de</strong> procédures ou <strong>de</strong>s classes par exempleentre plusieurs proj<strong>et</strong>s.Quel que soit le produit avec lequel un proj<strong>et</strong> a été créé, il est possible <strong>de</strong> l'ouvrir avecles autres produits.Lorsque vous ouvrez un proj<strong>et</strong> dans un produit différent<strong>de</strong> celui qui a permis <strong>de</strong> le créer, un assistants’affiche, perm<strong>et</strong>tant <strong>de</strong> créer une configuration <strong>de</strong>proj<strong>et</strong> spécifique au produit utilisé.Par exemple, si un proj<strong>et</strong> WinDev est ouvert avecWebDev, vous pouvez créer une configuration <strong>de</strong>proj<strong>et</strong> nommée "Site", perm<strong>et</strong>tant <strong>de</strong> regroupertous les éléments nécessaires au site WebDev.Dans les phases d'utilisation <strong>de</strong> l'environnement, ilest possible <strong>de</strong> visualiser <strong>de</strong>puis chaque environnementles éléments <strong>de</strong> chaque cible. Un proj<strong>et</strong> sousWebDev affiche les vign<strong>et</strong>tes <strong>de</strong>s fenêtres WinDev<strong>et</strong> WinDev Mobile par exemple. Cliquer sur une fenêtreWinDev <strong>de</strong>puis l'éditeur <strong>de</strong> proj<strong>et</strong> WebDevouvre la fenêtre WinDev (WinDev doit être installésur le poste).84Partie 3 : Environnement <strong>de</strong> développement
Configuration<strong>de</strong> proj<strong>et</strong>Les configurations <strong>de</strong> proj<strong>et</strong> perm<strong>et</strong>tent <strong>de</strong> créer à partir d'un même proj<strong>et</strong> plusieurs "cibles"différentes.Vous pouvez ainsi créer à partir d'un même proj<strong>et</strong> par exemple :• <strong>de</strong>s sites qui ne contiennent pas les mêmes éléments, qui ont <strong>de</strong>s nomsdifférents, …• différents composants• un Webservice...A tout moment, vous pouvez travailler sur une configuration spécifique : les élémentsn'appartenant pas à c<strong>et</strong>te configuration apparaissent grisés sous l'éditeur <strong>de</strong> proj<strong>et</strong>.Il est possible <strong>de</strong> générer en une seule opération toutes les configurations d’un proj<strong>et</strong> (ouuniquement certaines) grâce à la génération multiple.Partie 3 : Environnement <strong>de</strong> développement 85
GénérationmultipleLes configurations <strong>de</strong> proj<strong>et</strong>s perm<strong>et</strong>tent <strong>de</strong> définir simplement les différentes "Cibles"<strong>de</strong> votre proj<strong>et</strong>. Vous pouvez ainsi définir pour un même proj<strong>et</strong> plusieurs sites, plusieursbibliothèques ou plusieurs composants.Pour générer le résultat <strong>de</strong> chaque configuration, vous pouvez bien entendu sélectionnerune à une chaque configuration, <strong>et</strong> générer l’élément correspondant.Un autre moyen plus rapi<strong>de</strong> existe : la génération multiple. Vous sélectionnez en uneseule opération les configurations à générer <strong>et</strong> le résultat est immédiat.Pour lancer une génération multiple, utilisez le menu "Atelier .. Génération multiple".86Partie 3 : Environnement <strong>de</strong> développement
Perso-dossiers : Organisezvotre proj<strong>et</strong>Les éléments qui composent un proj<strong>et</strong> sont tous listés dans l’Explorateur <strong>de</strong> Proj<strong>et</strong>. Pardéfaut, l’Explorateur range les éléments en fonction <strong>de</strong> leur type : fenêtres, états, classes...Dans les proj<strong>et</strong>s <strong>de</strong> taille importante, il est souvent plus pertinent <strong>de</strong> regrouper les élémentsqui ont trait à la même fonctionnalité : gestion du stock ou traitement <strong>de</strong>s comman<strong>de</strong>spar exemple.Pour cela, il suffit <strong>de</strong> créer <strong>de</strong>s "perso-dossiers" dans l’arborescence <strong>de</strong> l’explorateur <strong>de</strong>proj<strong>et</strong> <strong>et</strong> <strong>de</strong> glisser les différents éléments dans ces dossiers.Des éléments peuvent être communs à plusieurs "perso-dossiers". Il est ainsi plus simple<strong>de</strong> travailler sur une partie du site.Affichage <strong>de</strong>s perso-dossiersDétail d’un perso-dossierRemarques :• Pour ranger, organiser vos proj<strong>et</strong>s, mais aussi pour partager un ensemble d’élémentsentre différents proj<strong>et</strong>s, WebDev m<strong>et</strong> également à votre disposition les composantsinternes.• Les "perso-dossiers" sont affichés dans le graphe du proj<strong>et</strong> <strong>et</strong> dans l’explorateur <strong>de</strong>proj<strong>et</strong>.Partie 3 : Environnement <strong>de</strong> développement 87
Gestionnaire <strong>de</strong> sources(GDS)PrésentationPour simplifier vos développements en équipe, WinDev propose un gestionnaire <strong>de</strong> sources.Ce gestionnaire <strong>de</strong> sources perm<strong>et</strong> à plusieurs développeurs <strong>de</strong> travailler simultanémentsur le même proj<strong>et</strong>, <strong>et</strong> <strong>de</strong> partager aisément <strong>de</strong>s éléments entre différents proj<strong>et</strong>s.Réseau(intran<strong>et</strong>)GDSADSL(intern<strong>et</strong>)DéconnectéIl est possible <strong>de</strong> partager les éléments présents dans le GDS :• via un résea u.• via Intern<strong>et</strong>.• en mo<strong>de</strong> déconnecté. Dans ce cas, les éléments sur lesquels un travail spécifique<strong>de</strong>vra être effectué seront extraits du GDS par exemple lors <strong>de</strong> la connexion du portableau système général.88Partie 3 : Environnement <strong>de</strong> développement
Fonctionnement du Gestionnaire <strong>de</strong> SourcesVoici un exemple d’utilisation du Gestionnaire <strong>de</strong> Sources :Poste Local 1Proj<strong>et</strong> AVersion 132ModificationExtraction 9h57Proj<strong>et</strong> AVersion 1Proj<strong>et</strong> AVersion 24Réintégration 10h41Proj<strong>et</strong> AVersion 2Poste Local 2Proj<strong>et</strong> AVersion 35Extraction 14h28Proj<strong>et</strong> AVersion 2Base <strong>de</strong> SourcesPoste Noma<strong>de</strong>Poste Noma<strong>de</strong>Extraction <strong>de</strong> la Fenêtre B<strong>et</strong>a duProj<strong>et</strong> A Version 1 à 9h13Proj<strong>et</strong> AVersion <strong>16</strong>1Extraction 9h13Modification en clientèlePoste Local 1Extraction <strong>de</strong> la fenêtre Alpha duProj<strong>et</strong> A Version 1 à 9h57Réintégration <strong>de</strong> la fenêtre Alpha modifiéedans le Proj<strong>et</strong> A Version 2 à 10h41Proj<strong>et</strong> AVersion 37Réintégration 18h32Poste Local 2Extraction <strong>de</strong> la fenêtre Alpha duProj<strong>et</strong> A Version 2 à 14h28Poste Noma<strong>de</strong>Réintégration <strong>de</strong> la fenêtre B<strong>et</strong>a modifiéedans le Proj<strong>et</strong> A Version 3 à 18h32Si un élément (page, état, ...) du proj<strong>et</strong> est extrait, ce même élément ne pourra pas êtreextrait une secon<strong>de</strong> fois.Après modification <strong>de</strong>s éléments extraits, il est nécessaire <strong>de</strong> réintégrer ces élémentspour que le proj<strong>et</strong> <strong>de</strong> base prenne en compte ces modifications. En eff<strong>et</strong>, la base <strong>de</strong> sourcesconserve un historique <strong>de</strong> tous les éléments du proj<strong>et</strong> <strong>de</strong>puis leur création.A chaque réintégration d’un élément, le numéro <strong>de</strong> version du proj<strong>et</strong> <strong>de</strong> base est incrémenté<strong>de</strong> 1.Partie 3 : Environnement <strong>de</strong> développement 89
Partager un proj<strong>et</strong> en pratiqueUn développement informatique important nécessitela participation <strong>de</strong> plusieurs développeurs. Cesdéveloppeurs doivent travailler sur un proj<strong>et</strong> Web-Dev unique, en partageant les différentes ressources(requêtes, classes, ...) manipulées.Pour partager un proj<strong>et</strong>, vous pouvez utiliser :• le gestionnaire <strong>de</strong> sources.• le groupware développeur. Son utilisation estconservée pour compatibilité avec les versionsprécé<strong>de</strong>ntes. Il ne sera pas développé dans cechapitre. Pour plus <strong>de</strong> détails, consultez l’ai<strong>de</strong> enligne (mot-clé : "Groupware développeur").1 Le Gestionnaire <strong>de</strong> Sources1.1 PrésentationWebDev innove dans la gestion du travail en groupeavec le gestionnaire <strong>de</strong> sources (appelé égalementGDS).Totalement intégré à l'environnement, le gestionnaire<strong>de</strong> sources (GDS) perm<strong>et</strong> :• un développement performant en équipe,• l'historique <strong>de</strong>s modifications <strong>et</strong> <strong>de</strong>s versions,• l'automatisation <strong>de</strong> la sauvegar<strong>de</strong> <strong>de</strong>s sources<strong>de</strong>s membres <strong>de</strong> l'équipe développement.Dimensionné pour <strong>de</strong>s équipes <strong>de</strong> 1 à 100 développeurs,le GDS favorise <strong>et</strong> normalise sans contrainteles échanges entre développeurs (même endéveloppant seul, le GDS est utile car il contientl'historique <strong>de</strong> vos applications).Le GDS utilise une base <strong>de</strong> sources: procédures,classes, fenêtres, pages, états, composants, analyses,…C<strong>et</strong>te base peut être installée à votre choix sur unserveur (en mo<strong>de</strong> HyperFileSQL Classic ou HyperFileSQLClient/Serveur) ou sur un poste du réseaudans un répertoire partagé.Le GDS perm<strong>et</strong> un fonctionnement connecté enlocal <strong>et</strong> à distance, via Intern<strong>et</strong> ou une liaison HTTPou HTTPS. Il est ainsi possible <strong>de</strong> travailler sur unproj<strong>et</strong> <strong>de</strong>puis une agence ou <strong>de</strong>puis un site clientsans crainte <strong>de</strong> perte <strong>de</strong>s modifications effectuées.Le GDS perm<strong>et</strong> également un fonctionnementdéconnecté (train, avion, …).1.2 Principe d’utilisationInstallationTous les éléments du proj<strong>et</strong> sont enregistrés dansla base <strong>de</strong> sources (sur le serveur). C<strong>et</strong>te opérationest effectuée à la création du proj<strong>et</strong> ou lors <strong>de</strong>l'importation d'un proj<strong>et</strong> existant dans le gestionnaire<strong>de</strong> sources.Chaque développeur utilisant le gestionnaire <strong>de</strong>sources récupère une copie du proj<strong>et</strong> en local.UtilisationPour travailler sur un élément du proj<strong>et</strong> (page,état, …), le développeur doit extraire l'élément <strong>de</strong> labase <strong>de</strong> sources, le modifier, puis le ré-intégrer.Si l'élément est déjà extrait, le développeur peut<strong>de</strong>man<strong>de</strong>r à la personne ayant extrait <strong>de</strong> ré-intégrerl'élément (par l'intermédiaire <strong>de</strong> la messagerie intégrée).Pour profiter <strong>de</strong>s modifications effectuées, lesautres développeurs doivent synchroniser leur proj<strong>et</strong>local avec le proj<strong>et</strong> <strong>de</strong> référence (présent dans labase <strong>de</strong> sources).90Partie 3 : Environnement <strong>de</strong> développement
2 Créer une base <strong>de</strong> sources pour le GDSConseilsLes sources <strong>de</strong> vos applications sont primordiales.Ces sources doivent être traitées avec l'attentionqu'elles méritent !Voici donc une série <strong>de</strong> conseils qui s'appliquent auserveur qui hébergera vos sources :• Utilisez un serveur dédié avec un disque <strong>de</strong> tailleconfortable (au moins 200 Go)•Utilisez plutôt le Gestionnaire <strong>de</strong> Sources (GDS)en mo<strong>de</strong> Client/Serveur.• Les disques durs peuvent avoir <strong>de</strong>s problèmesphysiques : utilisez si possible un système RAID Isur votre serveur (plusieurs disques stockant lesmêmes informations en double)• Protégez l'alimentation <strong>de</strong> votre serveur par unonduleur.•Faites <strong>de</strong>s sauvegar<strong>de</strong>s régulières <strong>de</strong> la base <strong>de</strong>sources (1 sauvegar<strong>de</strong> par semaine au minimum)•Placez le serveur dans une zone "sécurisée", enutilisant un firewall.2.1 PrésentationPour partager un proj<strong>et</strong> grâce au gestionnaire <strong>de</strong>sources, il est nécessaire <strong>de</strong> créer une base <strong>de</strong>sources. C<strong>et</strong>te base <strong>de</strong> sources doit être créée uneseule fois sur un poste serveur.Le système d'exploitation <strong>et</strong> le système <strong>de</strong> fichierssur lequel est installée la base du GDS doiventsavoir gérer les fichiers <strong>de</strong> plus <strong>de</strong> 4 Go.Il est possible <strong>de</strong> créer la base <strong>de</strong> sources :•dans un répertoire partagé sur le réseau: tousles utilisateurs du GDS doivent avoir tous lesdroits sur ce répertoire. La base <strong>de</strong> sources seraau format HyperFileSQL Classic.Il suffit <strong>de</strong> préciser le répertoire réseau ou labase <strong>de</strong> sources doit être créée.• sur un serveur HyperFileSQL Client/Serveur : labase <strong>de</strong> sources sera au format HyperFileSQLClient/Serveur. Dans ce cas, il est nécessaire <strong>de</strong>préciser :• le serveur• la base• le port utilisé• le nom <strong>et</strong> le mot <strong>de</strong> passe d'un administrateur<strong>de</strong> la base HyperFileSQL.2.2 Quand créer une base <strong>de</strong> sources ?La base <strong>de</strong> sources doit être créée une seule fois.WebDev perm<strong>et</strong> <strong>de</strong> créer c<strong>et</strong>te base <strong>de</strong> sources àdifférents moments :• lors <strong>de</strong> l'installation <strong>de</strong> WebDev.• lors <strong>de</strong> la création d'un proj<strong>et</strong> utilisant le GDS.• lors <strong>de</strong> l'importation d'un proj<strong>et</strong> dans le gestionnaire<strong>de</strong> sources.• directement dans l’administrateur du GDS.Lorsque la base <strong>de</strong> sources est créée, il est possibled'importer dans c<strong>et</strong>te base <strong>de</strong> sources tous lesproj<strong>et</strong>s WebDev à partager.2.3 Sauvegar<strong>de</strong>sIl est conseillé <strong>de</strong> faire régulièrement <strong>de</strong>s sauvegar<strong>de</strong>s<strong>de</strong> la base <strong>de</strong> sources du GDS. Ces sauvegar<strong>de</strong>speuvent être effectuées grâce àl’administrateur du GDS.Partie 3 : Environnement <strong>de</strong> développement 91
3 Configurer le proj<strong>et</strong> pour travailler avec le GDSPour utiliser un proj<strong>et</strong> existant avec le gestionnaire<strong>de</strong> sources, quelques manipulations sont nécessaires.3.1 Ajouter un proj<strong>et</strong> dans le GDSPour ajouter un proj<strong>et</strong> local dans le GDS :1. Ouvrez votre proj<strong>et</strong> sous WebDev.2. Sous l'éditeur <strong>de</strong> proj<strong>et</strong>, sélectionnez l'option"GDS .. Ajouter le proj<strong>et</strong> compl<strong>et</strong>".3. Dans l'assistant qui s'affiche, sélectionnez labase <strong>de</strong> sources à utiliser.Remarque : Si vous n'avez pas encore créé <strong>de</strong> base<strong>de</strong> sources, cliquez sur le bouton "Installer unebase".Indiquez si vous voulez utiliser :• une base <strong>de</strong> sources située sur un partageréseau (base <strong>de</strong> sources au format HyperFileSQLClassic). Donnez le répertoire <strong>de</strong> la base <strong>de</strong> sources(poste du réseau ou répertoire partagé).• une base <strong>de</strong> sources située sur un serveur Hyper-FileSQL Client/Serveur. La base <strong>de</strong> sources seraau format HyperFileSQL Client/Serveur. Dans cecas, il est nécessaire <strong>de</strong> préciser :• le serveur• la base• le port utilisé• le nom <strong>et</strong> le mot <strong>de</strong> passe d'un administrateur<strong>de</strong> la base HyperFileSQL.4. Cliquez ensuite sur le bouton "Créer".3.2 Partage <strong>de</strong> ressourcesVous avez importé dans le gestionnaire <strong>de</strong> sourcesun premier proj<strong>et</strong>. Ce proj<strong>et</strong> contient <strong>de</strong>s élémentspartagés avec d'autres proj<strong>et</strong>s (classes, pages, procédures,feuilles <strong>de</strong> styles, …).Le partage est une notion importante du GDS. Différentesmétho<strong>de</strong>s sont disponibles pour effectuerle partage. Pour plus <strong>de</strong> détails, consultez l’ai<strong>de</strong> enligne.4 Travailler avec le GDS4.1 Options d’un proj<strong>et</strong> concernant le GDSPlusieurs options perm<strong>et</strong>tent <strong>de</strong> configurer un proj<strong>et</strong>manipulé avec le Gestionnaire <strong>de</strong> Sources. Cesoptions sont regroupées dans l'ongl<strong>et</strong> "GDS" <strong>de</strong> la<strong>de</strong>scription du proj<strong>et</strong> (option Proj<strong>et</strong> .. Description duproj<strong>et</strong>"). Ces options sont cochées par défaut.• Proposer la récupération <strong>de</strong> la <strong>de</strong>rnière version<strong>de</strong>s éléments à l'ouverture du proj<strong>et</strong> :C<strong>et</strong>te option perm<strong>et</strong> lors <strong>de</strong> l'ouverture d'un proj<strong>et</strong>présent dans le GDS, <strong>de</strong> proposer la récupération<strong>de</strong> la <strong>de</strong>rnière version <strong>de</strong>s différentséléments du proj<strong>et</strong>. Par défaut, la <strong>de</strong>rnière version<strong>de</strong>s éléments est automatiquement récupérée.• Proposer la réintégration <strong>de</strong>s éléments à la ferm<strong>et</strong>uredu proj<strong>et</strong> :C<strong>et</strong>te option perm<strong>et</strong> d'afficher lors <strong>de</strong> la ferm<strong>et</strong>uredu proj<strong>et</strong> la liste <strong>de</strong> tous les éléments actuellementextraits, afin <strong>de</strong> ré-intégrer certains outous ces éléments.Par défaut, à la ferm<strong>et</strong>ure du proj<strong>et</strong>, les élémentsextraits ne sont pas ré-intégrés.menu "GDS .. Gérer le proj<strong>et</strong> .. Gérer automati-• Proposer la réintégration <strong>et</strong> la récupération <strong>de</strong> la<strong>de</strong>rnière version <strong>de</strong>s éléments lors <strong>de</strong> la générationd'exécutables, <strong>de</strong> bibliothèques, <strong>de</strong> composants,…C<strong>et</strong>te option perm<strong>et</strong> d'afficher lors <strong>de</strong> la créationd'une bibliothèque, … la liste <strong>de</strong>s élémentsextraits, afin <strong>de</strong> ré-intégrer <strong>et</strong> <strong>de</strong> récupérer la <strong>de</strong>rnièreversion <strong>de</strong>s éléments. Le composant ou labibliothèque peut ainsi contenir les <strong>de</strong>rniers élémentsles plus à jour.Par défaut, la génération <strong>de</strong> la bibliothèque, … sefait avec les éléments du proj<strong>et</strong> actuellement présentssur le poste local.• Extraire / Réintégrer automatiquement leproj<strong>et</strong> :C<strong>et</strong>te option perm<strong>et</strong> une gestion automatique du"fichier proj<strong>et</strong>". Si c<strong>et</strong>te option est cochée, lefichier proj<strong>et</strong> est extrait uniquement si l'actionréalisée le nécessite. Lorsque l'action sur le proj<strong>et</strong>a été effectuée, le fichier proj<strong>et</strong> est automatiquementréintégré.C<strong>et</strong>te option perm<strong>et</strong> <strong>de</strong> ne plus avoir la gestion"Maître / Invité" sur le proj<strong>et</strong>. Il est égalementpossible d'activer c<strong>et</strong>te option par l'option <strong>de</strong>quement l'extraction du proj<strong>et</strong>".92Partie 3 : Environnement <strong>de</strong> développement
4.2 Extraire un élémentLes différents mo<strong>de</strong>s d’extractionLe GDS propose <strong>de</strong>ux mo<strong>de</strong>s d'extraction <strong>de</strong>s élémentsdu proj<strong>et</strong> :• le mo<strong>de</strong> classique : si vous affichez un élémentdu GDS non extrait, un panneau indique que c<strong>et</strong>élément doit être extrait pour être modifié. Vouspouvez extraire immédiatement l'élément (boutond'extraction présent dans le panneau).• le mo<strong>de</strong> automatique : si vous tentez <strong>de</strong> modifierun élément du GDS non extrait, le GDS proposeautomatiquement d'extraire c<strong>et</strong> élément. Après lavalidation <strong>de</strong> l'extraction, l'élément peut êtremodifié.Remarque : ce mo<strong>de</strong> est déconseillé lors d'uneutilisation du GDS avec une connexion Intern<strong>et</strong>lente.Pour changer le mo<strong>de</strong> d'extraction, sélectionnezl'option "Outils .. Options <strong>de</strong> WebDev", puis sélectionnezl'ongl<strong>et</strong> "Général". L'option "Extraction <strong>de</strong>séléments à la première modification" perm<strong>et</strong> <strong>de</strong>passer tous les proj<strong>et</strong>s ouverts <strong>de</strong>puis le logiciel encours en mo<strong>de</strong> automatique.Ouvrir un élément du proj<strong>et</strong> pourmodifier ses caractéristiquesPour modifier les caractéristiques d'un élémentd'un proj<strong>et</strong> géré par le GDS :1. Extrayez l'élément du Gestionnaire <strong>de</strong> sources.2. Sélectionnez le mo<strong>de</strong> d'extraction <strong>de</strong> l'élément :Le mo<strong>de</strong> d'extraction peut être :• exclusif : personne ne pourra extraire c<strong>et</strong> élémentjusqu'à sa réintégration. L'élément pourrauniquement être extrait pour test.• pour test : l'élément pourra être modifié mais lesmodifications ne pourront pas être réintégrées.• multiple : l'élément pourra également être extraitpar d'autres utilisateurs. Dans ce cas, lors <strong>de</strong> laréintégration, il sera possible <strong>de</strong> visualiser les différencesentre les différentes versions <strong>de</strong> l'élément.3. Vali<strong>de</strong>z. L'élément est ouvert. La barre <strong>de</strong> titreindique que l'élément est extrait.4.3 Réintégrer un élémentLes éléments extraits du Gestionnaire <strong>de</strong> sourcesapparaissent entourés d'un trait rouge sous l'éditeur<strong>de</strong> proj<strong>et</strong>.Pour réintégrer un élément, il suffit <strong>de</strong> sélectionnerl'option "Réintégrer" dans le menu contextuel <strong>de</strong>l'élément (dans le graphe du proj<strong>et</strong> ou dans le vol<strong>et</strong>"Explorateur <strong>de</strong> proj<strong>et</strong>").Lors <strong>de</strong> la réintégration d'un élément, un écrans’affiche perm<strong>et</strong>tant d’effectuer les actions suivantesavant <strong>de</strong> réintégrer l'élément :• connaître les modifications effectuées• comparer l'élément <strong>de</strong> la base <strong>de</strong> sources avecl'élément local (extrait)•accé<strong>de</strong>r à l'historique <strong>de</strong> l'élément dans la base<strong>de</strong> sources.Il est possible <strong>de</strong> ré-intégrer les modifications effectuéesdans l'élément, tout en conservant l'élémentextrait (option "Gar<strong>de</strong>r le fichier extrait").4.4 Mo<strong>de</strong>s <strong>de</strong> gestion du proj<strong>et</strong>Deux mo<strong>de</strong>s <strong>de</strong> gestion du proj<strong>et</strong> sont disponiblesavec le GDS :• Gestion du proj<strong>et</strong> en mo<strong>de</strong> Maître / Invité• Gestion du proj<strong>et</strong> en mo<strong>de</strong> automatiqueMaître <strong>et</strong> invitéLe Gestionnaire <strong>de</strong> sources considère 2 typesd'utilisateurs :• le maître : le maître est l'utilisateur qui a placé leproj<strong>et</strong> dans le gestionnaire <strong>de</strong> sources.• les invités : les invités sont les développeurs quimanipulent le proj<strong>et</strong> <strong>de</strong>puis le gestionnaire <strong>de</strong>sources.Il n'est pas obligatoire d'être connecté en mo<strong>de</strong>maître sur un proj<strong>et</strong>. Le mo<strong>de</strong> "Maître" est nécessaireuniquement pour :• modifier les caractéristiques du proj<strong>et</strong> <strong>et</strong> réintégrerces modifications dans la base <strong>de</strong> sources.• réintégrer tous les éléments pour faire l'exécutable<strong>et</strong> le programme d'installation <strong>de</strong> l'application.Pour passer du mo<strong>de</strong> maître au mo<strong>de</strong> invité, sélectionnezl'option "GDS .. Gestion du proj<strong>et</strong> .. Devenirinvité sur le proj<strong>et</strong> (<strong>et</strong> tout réintégrer)".Dans ce cas, le gestionnaire <strong>de</strong> sources propose laréintégration <strong>de</strong> tous les éléments du proj<strong>et</strong> (y comprisle fichier .WWP).Pour passer du mo<strong>de</strong> invité au mo<strong>de</strong> maître, sélectionnezl'option "GDS .. Gestionnaire du proj<strong>et</strong> ..Devenir maître sur le proj<strong>et</strong>".Attention : Modification <strong>de</strong>s options du proj<strong>et</strong> :Tous les utilisateurs du proj<strong>et</strong> (qu'ils soient maîtresou invités) peuvent modifier les caractéristiques duproj<strong>et</strong> (première page du proj<strong>et</strong>, animation, charte<strong>de</strong> programmation, ...). Ces modifications pourrontêtre réintégrées dans le gestionnaire <strong>de</strong> sourcesuniquement par le maître du proj<strong>et</strong>.Les modifications faites par un invité seront perdueslors <strong>de</strong> la mise à jour du proj<strong>et</strong> <strong>de</strong>puis la base<strong>de</strong> données.Partie 3 : Environnement <strong>de</strong> développement 93
Mo<strong>de</strong> automatiqueAvec le mo<strong>de</strong> automatique, le fichier proj<strong>et</strong> estextrait uniquement si l'action réalisée le nécessite(quel que soit l'utilisateur). Lorsque l'action sur leproj<strong>et</strong> a été effectuée, le fichier proj<strong>et</strong> est automatiquementréintégré.Le mo<strong>de</strong> automatique perm<strong>et</strong> <strong>de</strong> ne plus avoir lagestion "Maître/Invité" sur le proj<strong>et</strong>.5 Travailler en mo<strong>de</strong> déconnecté avec le GDSLe Gestionnaire <strong>de</strong> Sources perm<strong>et</strong> très simplement<strong>de</strong> travailler en mo<strong>de</strong> déconnecté ounoma<strong>de</strong>.Ce mo<strong>de</strong> perm<strong>et</strong> par exemple à un développeur utilisantun portable <strong>de</strong> continuer à travailler sur unproj<strong>et</strong> présent dans la base <strong>de</strong> sources tout enétant déconnecté <strong>de</strong> la base <strong>de</strong> source.Le principe est simple :•avant la déconnexion, il suffit d'utiliser l'option"GDS .. Travail à distance .. Se déconnecter pourune utilisation noma<strong>de</strong>". Il est conseillé d'extraireavant la déconnexion les différents éléments quivont être modifiés (ainsi, ces éléments seront"déjà extraits" pour les autres utilisateurs). Vouspourrez travailler en local sur votre proj<strong>et</strong>. Les différentséléments du proj<strong>et</strong> sont manipulablesdirectement.• à la reconnexion, il suffit d'utiliser l'option "GDS ..Travail à distance .. Se reconnecter <strong>et</strong> synchroniser".Il suffit alors <strong>de</strong> réintégrer les élémentsmodifiés.Pour plus <strong>de</strong> détails, consultez l’ai<strong>de</strong> en ligne.6 Administrateur du GDSL'administrateur <strong>de</strong> GDS perm<strong>et</strong> <strong>de</strong> manipulerdirectement les différents proj<strong>et</strong>s inclus dans legestionnaire <strong>de</strong> sources.Il perm<strong>et</strong> par exemple <strong>de</strong> :• gérer les bases <strong>de</strong> sources (création, connexion àune base <strong>de</strong> sources)• gérer les branches• gérer les fichiers <strong>et</strong> les répertoires présents dansun proj<strong>et</strong> <strong>de</strong> la base <strong>de</strong> sources (Ajouter, supprimer,renommer, … <strong>de</strong>s fichiers <strong>et</strong> <strong>de</strong>s répertoires)• gérer les différents fichiers <strong>de</strong> la base <strong>de</strong> sources(extraction, réintégration, partage, …).• lancer certains outils (options, maintenances, …).• restaurer une version d’un proj<strong>et</strong>.• voir les historiques <strong>et</strong> les différences <strong>de</strong> versions<strong>de</strong> sources.• annuler les extractions (en mo<strong>de</strong> administrateur)• purger une base, la sauvegar<strong>de</strong>r, la restaurer•ajouter <strong>de</strong>s fichiers <strong>de</strong> tout type dans la base(.doc, .xls, .pdf, ...)94Partie 3 : Environnement <strong>de</strong> développement
ComposantinterneUn composant interne est un regroupement d’éléments d’un proj<strong>et</strong>. Ce regroupementperm<strong>et</strong> <strong>de</strong> :• Organiser un proj<strong>et</strong> : vous pouvez créer <strong>de</strong>s composants internes pour regrouper leséléments d’un proj<strong>et</strong>, par exemple par fonctionnalité.• Partager <strong>de</strong>s éléments entre différents proj<strong>et</strong>s par l’intermédiaire du GDS (Gestionnaire<strong>de</strong> Sources).Les éléments d’un composant interne peuvent être privés ou publics :• Les éléments privés pourront être manipulés uniquement par les autres éléments ducomposant.• Les éléments publics pourront être manipulés par les éléments du proj<strong>et</strong> utilisant lecomposant interne.Partie 3 : Environnement <strong>de</strong> développement 95
Composant interne en pratique1 PrésentationUn composant interne est un regroupement d'élémentsd'un proj<strong>et</strong>. Ce regroupement perm<strong>et</strong> <strong>de</strong> :• Organiser un proj<strong>et</strong> : vous pouvez créer <strong>de</strong>s composantsinternes pour regrouper les élémentsd'un proj<strong>et</strong> par exemple par fonctionnalité.• Partager <strong>de</strong>s éléments entre différents proj<strong>et</strong>s :Les éléments présents dans un composantinterne peuvent être partagés entre plusieursproj<strong>et</strong>s par l'intermédiaire du GDS. Pour plus <strong>de</strong>détails, consultez “Partager <strong>de</strong>s composantsinternes (via le GDS)”, page 97.Un <strong>de</strong>s avantages du composant interne par rapportau composant classique est <strong>de</strong> pouvoir déboguerdirectement le composant interne <strong>de</strong>puis leproj<strong>et</strong> qui l'utilise.Différence avec un composant classique : Un composantinterne perm<strong>et</strong> d'intégrer la totalité <strong>de</strong>s élémentsdu composant dans l'interface du proj<strong>et</strong>contenant le composant interne. Il est possible <strong>de</strong>manipuler tous les éléments "publiques" du composantinterne directement sous l'éditeur.Lors <strong>de</strong> l'utilisation d'un composant classique, leséléments "publics" du composant ne peuvent pasêtre manipulés directement. Il est nécessaire pourmodifier le composant classique d'ouvrir le proj<strong>et</strong>correspondant.2 Créer un composant interne2.1 Les différentes étapesPour créer un composant interne :1. Sélectionnez l'option "Atelier .. ComposantInterne .. Créer un composant interne". L'assistant<strong>de</strong> création d'un composant interne se lance.2. Indiquez les ca ra ctéristiques du composa ntinterne :• son nom. Le nom du composant interne sera utilisépour le fichier WCI correspondant à la <strong>de</strong>scriptiondu composant interne. Ce nom seraégalement utilisé pour créer un sous-répertoiredans votre proj<strong>et</strong> contenant tous les éléments ducomposant interne.•son libellé.•sa <strong>de</strong>scription.3. Indiquez les éléments à intégrer dans le composantinterne. Un composant interne peut contenirtous les types d'éléments présents dans un proj<strong>et</strong> :pages, états, modèles, collections <strong>de</strong> procédures,...Remarque : Si les éléments intégrés dans le composantinterne contiennent <strong>de</strong>s liens vers les élémentsprésents par exemple dans le proj<strong>et</strong> ou dansun autre composant interne, une erreur <strong>de</strong> compilationapparaît indiquant qu'il n'est pas possibled'accé<strong>de</strong>r à un élément du proj<strong>et</strong> <strong>de</strong>puis un composantinterne.4. Indiquez les éléments du composant interne quiseront directement accessibles dans le co<strong>de</strong> <strong>et</strong>dans les actions prédéfinies du proj<strong>et</strong> accueillant lecomposant interne.Remarque : Les éléments du composant interneaccessibles (ou "public") seront automatiquementproposés par la complétion. Ils pourront être utiliséspar les éléments présents dans le proj<strong>et</strong> ou<strong>de</strong>puis un autre composant interne. Les élémentsnon accessibles (ou "privés") pourront être manipulésuniquement par un autre élément du composantinterne (la complétion proposera ces éléments"privés" uniquement <strong>de</strong>puis les éléments d'un composantinterne).5. Indiquez le mo<strong>de</strong> <strong>de</strong> gestion <strong>de</strong>s données <strong>et</strong> <strong>de</strong>scontextes d'exécution. Trois mo<strong>de</strong>s <strong>de</strong> gestion <strong>de</strong>sdonnées <strong>et</strong> <strong>de</strong>s contextes d'exécution sontdisponibles :• Partage compl<strong>et</strong> : Le composant interne accè<strong>de</strong>aux fichiers <strong>de</strong> données du proj<strong>et</strong>. Le composantinterne utilise également les mêmes contextesd'exécution que le proj<strong>et</strong>.Ce mo<strong>de</strong> correspond au mo<strong>de</strong> par défaut si lecomposant interne n'utilise pas d'analyse.• Partage <strong>de</strong> données uniquement (mo<strong>de</strong>avancé) : Le composant interne accè<strong>de</strong> auxfichiers <strong>de</strong> données du proj<strong>et</strong>. Le composantinterne utilise <strong>de</strong>s contextes d'exécution distincts<strong>de</strong> ceux du proj<strong>et</strong>.Ce mo<strong>de</strong> est à utiliser dans <strong>de</strong>s cas très spécifiques.96Partie 3 : Environnement <strong>de</strong> développement
• Autonomie totale : Le composant interne accè<strong>de</strong>à ses propres fichiers <strong>de</strong> données. Le composantinterne utilise <strong>de</strong>s contextes d'exécution distincts<strong>de</strong> ceux du proj<strong>et</strong>.Ce mo<strong>de</strong> correspond au mo<strong>de</strong> par défaut si lecomposant utilise une analyse.Dans ce cas, il est nécessaire d'indiquer l'analyseutilisée par le composant interne. Il est égalementpossible <strong>de</strong> créer directement une nouvelleanalyse. C<strong>et</strong>te analyse sera associée au composantinterne.6. Vali<strong>de</strong>z la création du composant interne. A toutmoment, il sera possible <strong>de</strong> :• Modifier les caractéristiques du composantinterne grâce à la fenêtre <strong>de</strong> <strong>de</strong>scription du composantinterne.• Manipuler le composant interne <strong>et</strong> ses éléments.Astuce : Un composant interne n'a pas <strong>de</strong> co<strong>de</strong> <strong>de</strong>déclaration <strong>de</strong>s globales. Il suffit d'utiliser une collection<strong>de</strong> procédures pour effectuer l'initialisationdu composant interne.2.2 Composant interne <strong>et</strong> analyse : cas <strong>de</strong>l’autonomie totaleUn composant interne peut être lié à sa propre analyse.Dans ce cas, le proj<strong>et</strong> accueillant le composantinterne peut avoir plusieurs analyses :•l'analyse du proj<strong>et</strong>•l'analyse du ou <strong>de</strong>s composants internes. C<strong>et</strong>teanalyse est définie lors <strong>de</strong> la création du composantinterne. Elle peut être également sélectionnée<strong>de</strong>puis la fenêtre <strong>de</strong> <strong>de</strong>scription ducomposant interne.Les éléments générés par le RAD pour le composantinterne seront générés dans le répertoire ducomposant interne. Bien entendu, si l'analyse ducomposant interne est modifiée, une nouvellegénération par le RAD proposera automatiquement<strong>de</strong> générer uniquement les éléments correspondantsaux modifications.3 Partager <strong>de</strong>s composants internes (via le GDS)Les composants internes peuvent être partagésentre proj<strong>et</strong>s grâce au GDS.Pour partager un composant interne via le GDS, ilest nécessaire que le proj<strong>et</strong> contenant le composantinterne soit dans le GDS. Il est possible :• soit <strong>de</strong> créer le composant interne à partir d'unproj<strong>et</strong> présent dans le GDS. Le composantinterne sera automatiquement présent dans leGDS.•soit d'importer dans le GDS un proj<strong>et</strong> contenantun ou plusieurs composants internes. Les composantsinternes seront alors automatiquementintégrés dans le GDS.Partie 3 : Environnement <strong>de</strong> développement 97
ComposantexterneUn composant externe est un ensemble d'éléments WebDev : pages, états, analyse, ...C<strong>et</strong> ensemble d'éléments effectue une fonctionnalité précise. Par exemple, un composantexterne peut correspondre à une <strong>de</strong>s fonctionnalités suivantes :• Envoi <strong>de</strong> Fa x,• Envoi d'e-ma ils,• ...Un composant externe WebDev peut être redistribué à d'autres développeurs WebDev(gratuitement ou non). Ces développeurs pourront ainsi intégrer simplement la fonctionnalitéproposée par le composant externe dans leur site sans pour autant avoir accès auco<strong>de</strong> source correspondant (s’il n’a pas été lui aussi distribué). Le composant externesera ensuite intégré au site <strong>et</strong> distribué avec lui.98Partie 3 : Environnement <strong>de</strong> développement
Composant externe en pratique1 Présentation1.1 DéfinitionUn composant externe est un ensemble d'élémentsWebDev : pages, états, analyse, ... C<strong>et</strong> ensembled’éléments effectue une fonctionnalité précise. Parexemple, un composant peut correspondre à une<strong>de</strong>s fonctionnalités suivantes :•Envoi <strong>de</strong> Fax• Envoi d'emails• ...Remarques :• Pour optimiser l'organisation <strong>de</strong> vos proj<strong>et</strong>s, il estpossible d'utiliser <strong>de</strong>s composants internes. Pourplus <strong>de</strong> détails, consultez “Composant interne”,page 95.•Dans la suite <strong>de</strong> ce chapitre, le terme "composant"signifie "composant externe".Un composant externe peut être redistribué àd'autres développeurs WebDev (gratuitement ounon). Ces développeurs pourront ainsi intégrer simplementla fonctionnalité proposée par le composantdans leur site. Le composant sera doncintégré à l'application ou au site, <strong>et</strong> distribué avecle site.Lors <strong>de</strong> la créa tion du composa nt, l'a uteurspécifie :• la provenance <strong>de</strong>s éléments du composant. Ledéveloppeur peut construire un composant à partird’un proj<strong>et</strong> WinDev lié à un proj<strong>et</strong> WebDev <strong>et</strong> /ou un proj<strong>et</strong> WinDev Mobile.•les éléments du composant visibles ou non parl'utilisateur du composant. Les éléments visiblesseront accessibles dans le graphe du proj<strong>et</strong> oupar programmation.• le mo<strong>de</strong> d'utilisation du composant (comment utiliserle composant, les paramètres perm<strong>et</strong>tantd'accé<strong>de</strong>r aux fonctionnalités du composant, ...).Une documentation succincte (à compléter) estautomatiquement générée <strong>et</strong> associée au composant.Remarques : Des exemples <strong>de</strong> composants sontlivrés en standard avec WebDev. Ces composantssont accessibles <strong>de</strong>puis le vol<strong>et</strong> "Assistants, Exemples<strong>et</strong> Composants" (option "Composants").1.2 De quoi est constitué un composantexterne ?Un composant externe est défini <strong>et</strong> généré à partird'un proj<strong>et</strong> WebDev existant. Il peut être ensuiteintégré dans d'autres proj<strong>et</strong>s WebDev.Tous les éléments du composant sont totalementindépendants du proj<strong>et</strong> dans lequel le composantest intégré. Le composant peut avoir sa propre analyse,ses pages, ses états, ses fichiers, ... Lors <strong>de</strong> lacréation <strong>de</strong> la génération du composant, il suffitd'indiquer si ces éléments pourront être manipulésou non dans le proj<strong>et</strong> WebDev intégrant ce composant.Le composant est constitué <strong>de</strong> trois fichiers :.WDK.WDI.WDO(fichieroptionnel)Fichier composant. Contient tousles éléments du composant.Ce fichier est nécessaire à l'intégrationdu composant dans unproj<strong>et</strong>.Ce fichier doit également être livrédans la procédure d’installationdu site utilisant le composant.Description du composant (uniquementpour le développement<strong>de</strong> sites).Ce fichier est nécessaire à l'intégrationdu composant dans unproj<strong>et</strong>.Ce fichier ne doit pas être livrédans la procédure d’installationdu site utilisant le composant.Fichier optionnelFichier au format texte contenantla liste <strong>de</strong>s différents élémentslivrés en plus avec le composant(fichiers <strong>de</strong> données, fichiers .INI,...). Consultez “Le fichier WDO”,page 104.1.3 Que contient un composant externe ?Un composant externe contient :• les différents éléments à redistribuer (fenêtres,pages, états, ...). Ces éléments peuvent êtreaccessibles ou non lors <strong>de</strong> l'importation du composantdans un proj<strong>et</strong> WebDev.• une brève <strong>de</strong>scription du composant.• une ai<strong>de</strong> perm<strong>et</strong>tant <strong>de</strong> ré-utiliser ce composant.C<strong>et</strong>te ai<strong>de</strong> est générée à partir <strong>de</strong>s commentaires<strong>de</strong> co<strong>de</strong>.Partie 3 : Environnement <strong>de</strong> développement 99
Remarque : Par défaut, si un composant utilise uneanalyse, <strong>de</strong>s fichiers, ... les fonctions HyperFileSQLmanipuleront ces éléments dans un contexte indépendant.Ces paramètres peuvent être modifiésdans les options avancées du composant. Pourplus <strong>de</strong> détails, consultez l’ai<strong>de</strong> en ligne.2 Créer <strong>et</strong> générer un composant externe2.1 PrésentationLa création d'un composant externe doit être effectuéeà partir d'un proj<strong>et</strong> contenant tous les élémentsnécessaires au fonctionnement ducomposant. Il est donc conseillé d'utiliser un proj<strong>et</strong>spécifique pour créer chaque composant.La création d'un composant se fait en plusieursétapes :1. Développement <strong>de</strong>s éléments du composant.2. Création du composant3. Définition <strong>de</strong>s options avancées du composant.4. Génération du composant.Le composant peut alors être distribué <strong>et</strong> ré-utilisé.3 Distribuer un composant externe3.1 PrésentationLorsque le composant a été créé, testé <strong>et</strong> généré, ilpeut être mis à disposition <strong>de</strong>s développeurs. Plusieursmétho<strong>de</strong>s sont possibles :• utilisation directe du composantExemple: le composant est directement utilisésur le poste du développeur qui a créé le composant.• distribution simple, en fournissant directementles fichiers nécessaires.Exemple : le composant est <strong>de</strong>stiné à être utiliséà l'intérieur d'une même société, par plusieursdéveloppeurs. Dans ce cas, les fichiers nécessairespeuvent être copiés sur un disque réseau.• procédure d’installation du composant (avec uneprocédure d'installation du composant i<strong>de</strong>ntiqueà celle utilisée pour les applications).Exemple : ce mo<strong>de</strong> <strong>de</strong> distribution est conseillé sile composant est <strong>de</strong>stiné à être vendu ou à êtredistribué à gran<strong>de</strong> échelle, avec <strong>de</strong>s mises à jourrégulières.3.2 Utilisation directe du composant externeLe composant est créé <strong>et</strong> utilisé sur le même poste.Lors <strong>de</strong> l'importation du composant dans un proj<strong>et</strong>WebDev, il suffit <strong>de</strong> sélectionner le fichier WDI correspondantau composant. Ce fichier est disponibledans le répertoire EXE du proj<strong>et</strong> composant.Attention : Si le composant utilise <strong>de</strong>s fichiers spécifiques(fichiers <strong>de</strong> données, fichiers texte, ...), ilest nécessaire <strong>de</strong> créer un fichier .WDOaprès la génération du composant. Cefichier contient la liste <strong>de</strong>s fichiers externes(fichiers <strong>de</strong> données, fichiers texte, ...) utilisés parle composant.Ces fichiers référencés dans le fichier .WDOseront automatiquement recopiésdans le répertoire EXE du proj<strong>et</strong> utilisant le composantWebDev.3.3 Distribution simple d’un composantexterneLa distribution simple d'un composant consiste àfournir uniquement les fichiers nécessaires aufonctionnement du composant par simple copie.Les fichiers sont copiés dans un répertoire spécifique.Ce répertoire peut par exemple être présentsur un serveur réseau.Lors <strong>de</strong> l'importation du composant dans un proj<strong>et</strong>WebDev, il suffit <strong>de</strong> sélectionner le fichier WDI correspondantau composant dans le répertoire <strong>de</strong>distribution.Pour distribuer un composant, il est nécessaire <strong>de</strong>fournir :• Les fichiers automatiquement générés par Web-Dev (fichier .WDK <strong>et</strong> fichier.WDI).• Si nécessaire, les fichiers spécifiques manipuléspar le composant (fichiers <strong>de</strong> données, fichiersd'initialisation, ...) ainsi que le fichier .WDO.Le fichier texte .WDO contientla liste <strong>de</strong>s fichiers qui doivent être fournis avecle composant. Pour plus <strong>de</strong> détails sur ce fichier,consultez le paragraphe “Le fichier WDO”,page 104.100Partie 3 : Environnement <strong>de</strong> développement
3.4 Distribution grâce à une procédured’installationLa diffusion <strong>de</strong>s composants à l'ai<strong>de</strong> d'une procédured'installation consiste à fournir aux utilisateursdu composa nt WebDev, un progra mmed'installation. Ce programme installe tous lesfichiers nécessaires à l'utilisation du composantdans le répertoire spécifié par l'utilisateur.Ce mo<strong>de</strong> d'installation perm<strong>et</strong> <strong>de</strong> gérerautomatiquement :• le fichier WDO <strong>et</strong> l'installation <strong>de</strong>s fichiers spécifiques(fichiers <strong>de</strong> données, ...) utilisés par le composant.• l'installation d'outils spécifiques (MDAC, driverODBC pour HyperFileSQL, ...)• la mise à jour automatique <strong>de</strong>s fichiers <strong>de</strong> donnéesutilisés par le composant (si nécessaire).• la désinstallation du composant.Pour proposer une procédure d'installation pour uncomposant :1. Créez la procédure d’installation du composant :• soit directement par l'option "Atelier .. Composantexterne.. Créer la procédure d’installation d'uncomposant".•soit <strong>de</strong>puis la liste <strong>de</strong>s composants générés àpartir du proj<strong>et</strong> (option "Atelier .. ComposantExterne .. Liste <strong>de</strong>s composants générés à partir<strong>de</strong> ce proj<strong>et</strong> ", bouton "Installation").2. Dans les différents plans <strong>de</strong> l'assistant,spécifiez :• le support d'installation du composant• les langues proposées dans la procédure d'installation• le répertoire d'installation par défaut du composant• les modules optionnels à installer. Il est possible<strong>de</strong> modifier la liste <strong>de</strong>s fichiers à distribuer avecle composant. Le fichier WDO sera automatiquementcréé à partir <strong>de</strong> c<strong>et</strong>te liste.• ...Par défaut, les fichiers nécessaires à l'installationd'un composant sont créés dans le sous-répertoireINSTALL COMPO du proj<strong>et</strong>.Rappel : Lors <strong>de</strong> la création <strong>de</strong> l'installation d'uneapplication, les fichiers nécessaires sont créésdans le répertoire INSTALL du proj<strong>et</strong>.4 Utiliser un composant externe dans un siteUn composant externe peut être ré-utilisé à toutmoment dans n'importe quel site WebDev : il suffit<strong>de</strong> connaître le répertoire <strong>de</strong>s fichiers du composant.Lorsqu’une nouvelle version d'un composant estdisponible, il suffit d'installer les nouveaux fichiers<strong>de</strong> c<strong>et</strong>te mise à jour dans le répertoire d'installationdu composant (selon le mo<strong>de</strong> d'installation utilisé).Pour plus <strong>de</strong> détails sur les différents mo<strong>de</strong>s d'installationd'un composant, consultez “Distribuer uncomposant externe”, page 100.Si le composant a été publié <strong>et</strong> importé via le GDS,les mises à jour sont proposées à l’ouverture duproj<strong>et</strong> utilisant le composant.Si le composant a été distribué avec un site Web-Dev, il est nécessaire <strong>de</strong> m<strong>et</strong>tre le composant àjour. Pour plus <strong>de</strong> détails, consultez le paragraphe"Déploiement d’un site utilisant un composant".5 Déploiement d’un site utilisant un composant externe5.1 PrésentationLe déploiement d’un site utilisant un ou plusieurscomposants se fait <strong>de</strong> la même façon que ledéploiement d’un site classique (option "Atelier ..Créer la procédure d’installation").Lors du déploiement d’un site utilisant un composant,les fichiers suivants sont automatiquementinstallés sur le poste serveur :• .WDK,• les fichiers nécessaires au fonctionnement ducomposant <strong>et</strong> <strong>de</strong> l'application.Partie 3 : Environnement <strong>de</strong> développement 101
5.2 Mise à jour <strong>de</strong>s composants <strong>et</strong> <strong>de</strong>s sitesdéployésLors <strong>de</strong> la mise à jour d'un composant <strong>et</strong>/ou d'unsite déployé, il est possible d'installer sur le poste<strong>de</strong> déploiement du site :• soit le site, le composant <strong>et</strong> les fichiers nécessairesà leur fonctionnement.• soit uniquement le site <strong>et</strong> les fichiers nécessairesau fonctionnement du site.• soit uniquement le composant <strong>et</strong> les éventuelsfichiers nécessaires à son fonctionnement.Pour plus <strong>de</strong> détails sur la gestion <strong>de</strong> la compatibilitéentre le site <strong>et</strong> son composant, consultez l’ai<strong>de</strong>en ligne.Pour m<strong>et</strong>tre à jour un composant en clientèle, <strong>de</strong>uxpossibilités existent :1. La recompilation du proj<strong>et</strong> hôteRecompilez le proj<strong>et</strong> qui utilise le composant <strong>et</strong>redistribuez le site avec le composant. Dans ce cas,aucun problème <strong>de</strong> version ou <strong>de</strong> compatibilité nesera rencontré. La recompilation est nécessairedans les cas suivants :• De nouvelles fonctions ont été ajoutées dans lecomposant <strong>et</strong> doivent être prises en compte.• Les paramètres <strong>de</strong> certaines procédures ont étémodifiés.• Incompatibilité <strong>de</strong> la nouvelle version avec lesanciennes versions du composant.• ...2. Distribution directe du fichier .WDKFournissez directement une mise à jour du composant(fichier .WDK) en clientèle sans recompilationdu proj<strong>et</strong>.C<strong>et</strong>te possibilité s'applique en général lorsque :• La nouvelle version sert à corriger un ou <strong>de</strong>s dysfonctionnementsd'une version antérieure.• De nouvelles fonctions ont été ajoutées dans lecomposant mais ne sont pas nécessaires au bonfonctionnement du site.6 Modifier un composant externe6.1 PrésentationA tout moment, un composant créé <strong>et</strong> généré peutêtre modifié. C<strong>et</strong>te modification peutcorrespondre :• soit à l'ajout d'éléments dans le composant.• soit à la suppression d'élément du composant.• soit à la modification <strong>de</strong>s droits sur les élémentsdu composant.• soit à la modification d'un <strong>de</strong>s éléments du composant.Dans tous les cas, après c<strong>et</strong>te modification, le composantdoit être re-généré pour prendre en compteles modifications effectuées.6.2 Les différents types <strong>de</strong> compatibilitéLa gestion <strong>de</strong> la compatibilité est liée aux versionsd'un composant. En eff<strong>et</strong>, si <strong>de</strong>s modifications ontété apportées au composant, les sites qui utilisentle composant en déploiement peuvent rencontrer<strong>de</strong>s problèmes d'exécution si elles ne sont pas enphase avec ce composant.La gestion <strong>de</strong> la compatibilité est une étape importantedans la modification d'un composant. Il existe2 types <strong>de</strong> compatibilité :•la compatibilité <strong>de</strong>scendante : la version du composantutilisée (fichier .WDK) pour compiler lessites utilisant ce composant doit être toujourssupérieure ou égale à la version actuellement utiliséeen déploiement.C<strong>et</strong>te compatibilité est automatiquement gérée.Si le composant installé avec le site est d'une versioninférieure à celle utilisée par le site, le siterefusera <strong>de</strong> fonctionner.• la compatibilité ascendante : l'utilisation d'unenouvelle version d'un composant avec les proj<strong>et</strong>scompilés avec une ancienne version peut êtreinterdite. Il est donc nécessaire <strong>de</strong> recompiler lesproj<strong>et</strong>s pour utiliser correctement la nouvelle versiondu composant.102Partie 3 : Environnement <strong>de</strong> développement
7 Caractéristiques avancées d’un composant externe7.1 Documentation automatiqueUn composant doit absolument être accompagnéd'une documentation pour perm<strong>et</strong>tre sa ré-utilisation.WebDev simplifie la réalisation <strong>de</strong> c<strong>et</strong>te documentationen proposant :• une présentation générale du composant. C<strong>et</strong>teprésentation générale est saisie lors <strong>de</strong> la générationdu composant. Lors <strong>de</strong> l'utilisation du composantdans un site WebDev, c<strong>et</strong>te présentationsera visible lors du survol du composant affichédans le vol<strong>et</strong> "Assistants, Exemples <strong>et</strong> Composants".Pour plus <strong>de</strong> détails, consultez l’ai<strong>de</strong> enligne.• une génération automatique <strong>de</strong> la documentationtechnique à partir <strong>de</strong>s commentaires insérésdans le co<strong>de</strong> <strong>de</strong>s éléments du composant.Quels sont les commentaires <strong>de</strong> co<strong>de</strong>pris en compte ?Les commentaires pris en compte automatiquementpour la documentation du composant sont :• Les commentaires placés en tête <strong>de</strong>s procéduresWLangage• les commentaires placés en tête <strong>de</strong>s traitementssuivants :•Co<strong>de</strong> d'initialisation <strong>de</strong>s pages•Co<strong>de</strong> d'initialisation <strong>de</strong>s états•Co<strong>de</strong> d'initialisation <strong>de</strong>s classes•Co<strong>de</strong> d'initialisation <strong>de</strong>s collections <strong>de</strong> procédures.A quel moment la documentationest-elle générée ?La documentation du composant est générée lors<strong>de</strong> la première génération du composant (option"Atelier .. Composant Externe .. Générer un composant").Lors <strong>de</strong> c<strong>et</strong>te génération <strong>de</strong> la documentation :• les commentaires existants dans le co<strong>de</strong> sont utiliséspour créer la documentation.• si aucun commentaire n'existe, WebDev documenteraautomatiquement les éléments accessiblesdu composant en précisant les paramètresattendus en entrée <strong>et</strong> en sortie <strong>de</strong> chaque élément.Les commentaires correspondants sontautomatiquement créés dans les différents éléments.Remarque : A chaque re-génération du composant,il est possible <strong>de</strong> re-générer la documentation associéeau composant (bouton "Regénérer" dans lafenêtre "Historique du composant").Attention : Si vous utilisez le bouton "Regénérer",les modifications effectuées sous l'assistant <strong>de</strong>génération seront supprimées.Comment disposer <strong>de</strong> la documentationd’un composant ?La présentation générale du composant est automatiquementaffichée lors du survol du composantprésent dans le vol<strong>et</strong> "Assistants, Exemples <strong>et</strong> Composants".La documentation technique du composant estdisponible :• lors <strong>de</strong> l'intégration d'un composant dans un proj<strong>et</strong>(option "Atelier .. Composant Externe .. Importerun composant dans le proj<strong>et</strong>").• à tout moment, lors d’un double-clic sur l’icônedu composant présent dans le vol<strong>et</strong> "Assistants,Exemples <strong>et</strong> Composants" ou par l’option "Description"du menu contextuel du composant.•à tout moment, dans la <strong>de</strong>scription <strong>de</strong>s composantsintégrés dans le proj<strong>et</strong> (option "Atelier ..Composant Externe .. Liste <strong>de</strong>s composants intégrésdans le proj<strong>et</strong>"). Le bouton "Description" perm<strong>et</strong>d'obtenir les informations <strong>et</strong> ladocumentation du composant.La documentation spécifique à un élément ducomposant peut être obtenue :•soit en double-cliquant sur c<strong>et</strong> élément (vol<strong>et</strong>"Explorateur <strong>de</strong> proj<strong>et</strong>" ou graphe du proj<strong>et</strong>) ou enappuyant sur la touche [F2] <strong>de</strong>puis le co<strong>de</strong> <strong>de</strong> c<strong>et</strong>élément.•soit directement dans la liste <strong>de</strong>s composantsintégrés au proj<strong>et</strong> (option "Atelier .. ComposantExterne .. Liste <strong>de</strong>s composants intégrés dans leproj<strong>et</strong>").Partie 3 : Environnement <strong>de</strong> développement 103
7.2 Visibilité d’un élément d’un composantLors <strong>de</strong> la création d'un composant, il est possible<strong>de</strong> définir les éléments du composant qui serontaccessibles ou non par l'utilisateur du composant.• Si l'élément est accessible, l'utilisateur du composantverra c<strong>et</strong> élément dans la liste <strong>de</strong>s élémentsdu proj<strong>et</strong>. Il pourra manipuler ceséléments par programmation (comme s'il s'agissaitd'un élément créé dans le proj<strong>et</strong>).Remarque : Le co<strong>de</strong> <strong>de</strong> c<strong>et</strong> élément n'est cependantpas visible.• Si l'élément n'est pas accessible, l'utilisateur nesaura même pas que c<strong>et</strong> élément existe.Attention : Selon le mo<strong>de</strong> <strong>de</strong> déclaration <strong>de</strong>s élémentsdu proj<strong>et</strong> (classe, Collection <strong>de</strong> procédures,...) les éléments accessibles ou non peuvent varier.Le tableau ci-<strong>de</strong>ssous récapitule les différentesfaçons d'accé<strong>de</strong>r à un élément en fonction <strong>de</strong> sonmo<strong>de</strong> <strong>de</strong> déclaration. .7.3 Le fichier WDOLors <strong>de</strong> la génération du composant externe, <strong>de</strong>uxfichiers sont automatiquement créés dans le répertoireEXE du proj<strong>et</strong> en cours :.WDK.WDIContient tous les éléments àredistribuer (pages, états, ...)avec le composantInterface du composant. Cefichier contient :- une ai<strong>de</strong> pour l'utilisation ducomposant lors <strong>de</strong> sa ré-intégration- les éléments à l'utilisation ducomposant dans le proj<strong>et</strong> (information<strong>de</strong> compilation, ...)Lors <strong>de</strong> la diffusion du composant, ces <strong>de</strong>uxfichiers doivent être redistribués.Si le composant utilise <strong>de</strong>s éléments supplémentaires(fichiers <strong>de</strong> données, ...), il est nécessaired'ajouter dans le répertoire EXE du proj<strong>et</strong> :• un fichier .WDO : ce fichiercontient la liste <strong>de</strong>s fichiers externes (fichiers <strong>de</strong>données, fichiers texte, ...) utilisés par le composant.Ces fichiers doivent être livrés <strong>et</strong> installésavec le composant.• les fichiers <strong>de</strong>vant être redistribués avec le composant.Ces fichiers peuvent être placés selonune sous-arborescence spécifique. Dans ce cas,le co<strong>de</strong> du composant doit gérer l'accès à cesfichiers selon c<strong>et</strong>te même arborescence.Qu’est-ce que le fichier WDO ?Le fichier .WDO est un fichier auformat TXT, pouvant être créé <strong>et</strong> modifié à toutmoment. Ce fichier peut par exemple être créé <strong>et</strong>modifié avec l'éditeur <strong>de</strong> texte standard <strong>de</strong> Windows,NotePad.Ce fichier contient la liste <strong>de</strong>s fichiers externes(fichiers <strong>de</strong> données, fichiers texte, ...) utilisés parle composant <strong>et</strong> <strong>de</strong>vant être livrés <strong>et</strong> installés avecle composant. Ces fichiers doivent être recopiésdans le répertoire EXE <strong>de</strong>s proj<strong>et</strong>s utilisant le composant.Ce fichier ".WDO" peut contenir :•soit le nom compl<strong>et</strong> du fichier.Par exemple : C:\Composants\ComposantSélecteur\EtatInitial.INI•soit le nom du fichier. Ce fichier sera recherchédans le répertoire en cours du composant.Par exemple : EtatInitial.INI•soit un nom <strong>de</strong> fichier utilisant un chemin relatif.Les syntaxes possibles sont :•Répertoire\NomFichier.xxx pour indiquer unsous répertoire du répertoire en cours•.\NomFichier.xx pour indiquer le répertoire encours•..\NomFichier.xx pour indiquer le répertoireparentPar exemple : \ComposantSélecteur\EtatInitial.INICe fichier sera utilisé lors <strong>de</strong> l'intégration du composantdans le proj<strong>et</strong>. Les chemins précisés dansle WDO doivent correspondre aux chemins où lesfichiers sont installés sur le poste <strong>de</strong> développementdu composant.Lors <strong>de</strong> l'intégration du composant, l'arborescencespécifiée dans le WDO sera conservée <strong>et</strong> reproduitedans le répertoire EXE du proj<strong>et</strong>. Pour plus <strong>de</strong>détails, consultez le paragraphe “Utiliser un composantexterne dans un site”, page 101.Exemple : Le composant "Co<strong>de</strong> Postal" utilise unfichier <strong>de</strong> données "Ce<strong>de</strong>x" (fichiers Ce<strong>de</strong>x.fic <strong>et</strong>Ce<strong>de</strong>x.ndx). Dans le proj<strong>et</strong> <strong>de</strong> création du composant,ce fichier <strong>de</strong> données est présent dans lerépertoire EXE du proj<strong>et</strong>.Pour que le composant soit livré <strong>et</strong> installé avec lefichier <strong>de</strong> données, il faut créer le fichier WDO dansle répertoire EXE du proj<strong>et</strong> <strong>de</strong> création du composant.Ce fichier doit contenir les lignes suivantes :.\CEDEX.Fic.\CEDEX.NDX104Partie 3 : Environnement <strong>de</strong> développement
Diffusion d’un composant avec WDOPour diffuser un composant utilisant un fichierWDO :• Si vous n’utilisez pas <strong>de</strong> procédures d’installationpour le composant, il est nécessaire <strong>de</strong> fournir :•le fichier WDK•le fichier WDI•le fichier WDO•tous les fichiers nécessaires référencés dans lefichier WDO.• Si vous utilisez une procédure d'installation pourle composant, le fichier WDO sera automatiquementcréé lors <strong>de</strong> la création <strong>de</strong> la procédured’installation du composant.Il suffit pour cela dans l'assistant <strong>de</strong> :1. Deman<strong>de</strong>r la modification <strong>de</strong>s fichiers à installer(option "Modifier la liste <strong>de</strong>s fichiers à installer"dans les "modules additionnels").2. Sélectionner les fichiers supplémentaires àinstaller.Le fichier WDO sera automatiquement créé <strong>et</strong>installé avec le composant.Partie 3 : Environnement <strong>de</strong> développement 105
Mo<strong>de</strong>s <strong>de</strong>générationAu <strong>de</strong>là <strong>de</strong>s sites web, WebDev vous perm<strong>et</strong> également <strong>de</strong> générer <strong>de</strong> nombreux autrestypes <strong>de</strong> proj<strong>et</strong>s...SitesLes sites sont le mo<strong>de</strong> <strong>de</strong> génération le plus fréquemment utilisé.WebDev perm<strong>et</strong> <strong>de</strong> générer :•<strong>de</strong>s sites statiques, semi-dynamiques, dynamiques•<strong>de</strong>s sites PHPBibliothèquesUne bibliothèque est un fichier unique rassemblant plusieurs élémentsd’un proj<strong>et</strong> WebDev : <strong>de</strong>s pages, <strong>de</strong>s états, <strong>et</strong>c. Il est possible<strong>de</strong> générer <strong>de</strong>s bibliothèques autonomes pouvant être utiliséespar d’autres sites.Gadg<strong>et</strong>s Windows Vista/Windows 7Un gadg<strong>et</strong> est une forme particulière <strong>de</strong> site web <strong>de</strong>stiné à être intégrécomme une mini application sur le bureau <strong>de</strong> Windows Vistaou Windows 7. WebDev fournit en standard les éléments nécessairespour créer en distribuer facilement <strong>de</strong> tels gadg<strong>et</strong>s.Composants externesLes composants externes sont <strong>de</strong>s briques applicatives perm<strong>et</strong>tant<strong>de</strong> partager une ou plusieurs fonctionnalités spécifiques entre différentesapplications. Un composant généré avec WinDev peutégalement être utilisé dans un proj<strong>et</strong> WebDev ou WinDev Mobile.WebservicesA partir d’un proj<strong>et</strong> WebDev, il est possible <strong>de</strong> générer un Webservice(également appelé service Web XML). Un Webservice exposeun ensemble <strong>de</strong> fonctions (généralement une ou plusieurs collections<strong>de</strong> procédures). Il les rend accessibles à travers le web (ou unréseau privé) en utilisant les protocoles standard <strong>de</strong> communicationHTTP <strong>et</strong> SOAP.Remarque : Un Webservice doit être déployé sur un Serveur d’ApplicationWebDev pour être utilisable.106Partie 3 : Environnement <strong>de</strong> développement
Sites spécifiques iPhoneLes sites web <strong>de</strong>stinés à être vus sur le téléphone Apple iPhonepeuvent bénéficier d’enrichissements particuliers : splash screenau lancement, mo<strong>de</strong> plein écran,... Ces fonctionnalités les font ressemblerà <strong>de</strong> véritables applications. WebDev perm<strong>et</strong> <strong>de</strong> paramétreraisément toutes ces spécificités tout en préservant lacompatibilité avec les autres navigateurs (mobiles ou non) du marché.Partie 3 : Environnement <strong>de</strong> développement 107
Génération PHP en pratique1 PrésentationWebDev perm<strong>et</strong> <strong>de</strong> générer <strong>de</strong>s sites PHP sanspour autant connaître le langage PHP. Le développementdu site peut se faire complètement enWLangage, comme pour un site WebDev classique.Il est toutefois possible <strong>de</strong> saisir votre propre co<strong>de</strong>PHP (co<strong>de</strong> serveur).1.1 Qu’est-ce qu’un site PHP ?Un site PHP est compilé en PHP. Si ce site manipuleune base <strong>de</strong> données, l’accès à c<strong>et</strong>te base se ferapar un driver ODBC (MyODBC, ODBC pour Oracle,...) ou via l’accès natif pour MySQL.Concernant le driver ODBC, il est spécifique à chaquebase <strong>de</strong> données (<strong>et</strong> peut être trouvé sur le site<strong>de</strong> l’éditeur <strong>de</strong> la base <strong>de</strong> données).Un site PHP est composé <strong>de</strong> pages ".php" <strong>et</strong> nécessiteun moteur PHP pour être lancé.Pour compiler (en PHP) un proj<strong>et</strong> PHP avec Web-Dev, il est nécessaire d’installer sur le poste <strong>de</strong>développement un moteur PHP. De nombreuxmoteurs PHP sont disponibles sur intern<strong>et</strong>. Il estnécessaire d’en télécharger un <strong>et</strong> <strong>de</strong> l’installer.Vous avez par exemple EasyPHP (http://www.easyphp.org/).Ce moteur est donné à titre indicatif <strong>et</strong>vous pouvez utiliser tout autre moteur PHP.Remarque : PHP 4.3.2 version minimale estnécessaire. Une base <strong>de</strong> données MySQL estnécessaire. Les sites PHP générés avec WebDevpeuvent également être utilisés avec <strong>de</strong>s serveursPHP version 5.1.2 Pourquoi développer un site PHP avecWebDev ?Pour certains sites, surtout <strong>de</strong> p<strong>et</strong>its sites, il peutêtre pratique <strong>de</strong> désirer réaliser ces sites en PHPafin <strong>de</strong> faciliter leur hébergement gratuit. Vous enavez désormais la possibilité avec WebDev.Remarque : le nombre <strong>de</strong> fonctions WLangage utilisablesdans un proj<strong>et</strong> PHP est limité dans c<strong>et</strong>te version.Ce nombre <strong>de</strong> fonctions est amené à croîtrerégulièrement.2 Fonctionnalités pour un proj<strong>et</strong> PHP2.1 Création d’un proj<strong>et</strong> PHPPour créer un proj<strong>et</strong> PHP, il suffit d’indiquer dansl’assistant <strong>de</strong> création d’un proj<strong>et</strong> (option "Fichier ...Nouveau ... Proj<strong>et</strong>") que vous voulez générer un sitedynamique PHP.Dès que le proj<strong>et</strong> est configuré comme un proj<strong>et</strong>PHP, tous les outils WebDev disponibles sont automatiquementparamétrés pour le proj<strong>et</strong> PHP :•Le RAD PHP qui génère du co<strong>de</strong> PHP <strong>de</strong>puis unproj<strong>et</strong> pour <strong>de</strong> nombreuses fonctionnalités <strong>de</strong>WebDev.•Le compilateur indique les fonctions ou champsnon utilisables en PHP. Un message apparaît enviol<strong>et</strong> dans le vol<strong>et</strong> "Erreurs <strong>de</strong> compilation".• Le déploiement du site PHP via l’outil WDDéploie.Remarque : il est conseillé <strong>de</strong> créer un nouveauproj<strong>et</strong> WebDev pour développer un site PHP plutôtque <strong>de</strong> transformer un site WebDev en PHP.2.2 RAD PHPComme sur tout proj<strong>et</strong> associé à une analyse, vouspouvez utiliser le RAD pour générer les pages <strong>de</strong>votre site.Le RAD prend en compte toutes les spécificités <strong>de</strong>la génération PHP (champs, traitements, fonctionsutilisables dans un site PHP généré <strong>de</strong>puis Web-Dev).2.3 Test d’un site PHP sous l’éditeurLors du test d’un site PHP, le site est compilé enPHP <strong>et</strong> lancé dans votre navigateur. Vous visualisezdirectement les pages PHP générées par WebDev.Rappel : Un moteur PHP est nécessaire sur le poste<strong>de</strong> développement.La compilation d’un site PHP perm<strong>et</strong> <strong>de</strong> :• connaître les erreurs <strong>de</strong> programmation WLangage• visualiser les champs, traitements, fonctionsWLangage non disponibles en génération PHP.108Partie 3 : Environnement <strong>de</strong> développement
Ces erreurs apparaissent en viol<strong>et</strong> dans le vol<strong>et</strong>"Erreurs <strong>de</strong> compilation".Pour plus <strong>de</strong> détails sur les éléments WebDevnon disponibles dans un site PHP, consultezl’ai<strong>de</strong> en ligne.2.4 Déployer un site PHPLe déploiement d’un site PHP se fait <strong>de</strong> la mêmemanière que pour un site statique. Lors <strong>de</strong> la création<strong>de</strong> la procédure d’installation, WDDéploie selance <strong>et</strong> vous assiste dans la mise en place <strong>de</strong>votre site PHP.Pour plus <strong>de</strong> détails, consultez l’ai<strong>de</strong> en ligne.Partie 3 : Environnement <strong>de</strong> développement 109
Les Centres<strong>de</strong> ContrôlePour gérer le cycle <strong>de</strong> vie <strong>de</strong> vos proj<strong>et</strong>s <strong>de</strong> développement, WebDev vous propose d’utiliserles Centres <strong>de</strong> Contrôle. Les Centres <strong>de</strong> Contrôle forment un ensemble d’outils <strong>de</strong>stinésà prendre en charge :• les exigences d’un proj<strong>et</strong> (formalisation <strong>de</strong>s besoins)• les tâches <strong>de</strong> développement, <strong>de</strong> test <strong>et</strong> <strong>de</strong> documentation• le suivi <strong>de</strong>s inci<strong>de</strong>nts signalés par les utilisateurs• les règles métier utilisées par l’entreprise dans ses développementsLes Centres <strong>de</strong> Contrôle fonctionnent autour d’une base <strong>de</strong> données (HyperFileSQLClassic ou Client/Serveur) partagée par <strong>de</strong> nombreux outils disponibles dansWebDev mais aussi avec WinDev <strong>et</strong> WinDev Mobile si vous les utilisez :Lors <strong>de</strong> l’installation <strong>de</strong> WebDev, le programme d’installation propose :• soit <strong>de</strong> créer la base <strong>de</strong>s Centres <strong>de</strong> Contrôle. C<strong>et</strong>te base sera automatiquementcréée au format HyperFileSQL Classic dans le répertoire spécifié.• soit <strong>de</strong> partager une base <strong>de</strong> données <strong>de</strong>s Centres <strong>de</strong> Contrôle existante.110Partie 3 : Environnement <strong>de</strong> développement
Gestion <strong>de</strong>sexigencesUne exigence est un besoin sur ce qu'un produit (ou un service) <strong>de</strong>vrait faire.Les Centres <strong>de</strong> Contrôle perm<strong>et</strong>tent à un chef <strong>de</strong> proj<strong>et</strong> <strong>de</strong> gérer les exigences d’un proj<strong>et</strong><strong>de</strong> développement.Il suffit pour cela <strong>de</strong> :• définir les différents intervenants du proj<strong>et</strong>.• définir les exigences (avec les différents éléments qui leur sont associés).Chaque développeur effectue les différentes tâches qui lui sont affectées.Le chef <strong>de</strong> proj<strong>et</strong> peut à tout moment suivre l’état d’avancement du proj<strong>et</strong>.Partie 3 : Environnement <strong>de</strong> développement 111
Centre <strong>de</strong> Suivi<strong>de</strong> Proj<strong>et</strong>sLe Centre <strong>de</strong> Suivi <strong>de</strong> Proj<strong>et</strong>s perm<strong>et</strong> aux différents intervenants d’un proj<strong>et</strong> <strong>de</strong> gérer leurplanning <strong>de</strong>s tâches. Ces tâches peuvent être liées à <strong>de</strong>s exigences, <strong>et</strong> correspondre àplusieurs proj<strong>et</strong>s.Fonctionnement du Centre <strong>de</strong> Suivi <strong>de</strong> proj<strong>et</strong>sAprès avoir listé l’ensemble <strong>de</strong>s tâches d’un proj<strong>et</strong>, le Centre <strong>de</strong> Suivi <strong>de</strong> Proj<strong>et</strong>s s’occupe<strong>de</strong> tout. La saisie du temps passé est quasi automatique, ne <strong>de</strong>man<strong>de</strong> aucune actionspécifique <strong>et</strong> ne génère aucune contrainte particulière.Lors <strong>de</strong> l’ouverture du proj<strong>et</strong> concerné, le Centre <strong>de</strong> Suivi <strong>de</strong> Proj<strong>et</strong>s <strong>de</strong>man<strong>de</strong> ou indiquela tâche en cours. Dès qu’une tâche est réalisée, il suffit d’indiquer que c<strong>et</strong>te tâche estterminée <strong>et</strong> <strong>de</strong> spécifier la nouvelle tâche.Une tâche peut être reliée à un élément du proj<strong>et</strong> (page, état, ...). Chaque fois que l’élémentconcerné est ouvert, le temps passé sur c<strong>et</strong> élément est décompté <strong>et</strong> mémorisédans le Centre <strong>de</strong> suivi. Inversement, <strong>de</strong>puis la liste <strong>de</strong>s tâches, il est possible d’ouvrirautomatiquement l’élément correspondant à la tâche que vous voulez réaliser.Chaque développeur peut également visualiser directement sa liste <strong>de</strong> tâches dans le vol<strong>et</strong>"Centre <strong>de</strong> Suivi <strong>de</strong> Proj<strong>et</strong>s".112Partie 3 : Environnement <strong>de</strong> développement
Gestion <strong>de</strong>srègles métierWebDev perm<strong>et</strong> <strong>de</strong> gérer <strong>de</strong>s règles métier. Une règle métier perm<strong>et</strong> <strong>de</strong> définir un mo<strong>de</strong>opératoire précis ou <strong>de</strong> préciser un traitement particulier. Par exemple : le calcul d’untaux <strong>de</strong> TVA avec ses particularités, les règles <strong>de</strong> changement <strong>de</strong> statut d’un client; laformule <strong>de</strong> calcul d’un montant <strong>de</strong> frais <strong>de</strong> port, une commission commerciale, un taux<strong>de</strong> remise, un coefficient <strong>de</strong> vétusté, ...Une règle métier peut être simple ou élaborée.Les règles métier peuvent provenir :•du cahier <strong>de</strong>s charges (correspondant aux exigences).•<strong>de</strong> suggestions faites par les utilisateurs <strong>de</strong>l’application.Pendant le développement, les règles métier définies pour le proj<strong>et</strong> sont affichées directementdans le vol<strong>et</strong> "Règles métier" <strong>de</strong> l’environnement <strong>de</strong> développement. Ce vol<strong>et</strong> présentele nombre d’éléments du proj<strong>et</strong> auxquels les règles métier s’appliquent <strong>et</strong> lepourcentage <strong>de</strong> règle actuellement réalisé.Partie 3 : Environnement <strong>de</strong> développement 113
114Partie 3 : Environnement <strong>de</strong> développement
PARTIE 4Développement <strong>de</strong>sites web : conceptsavancés
RADRIDLe RAD (Rapid Application Development) <strong>et</strong> le RID (Rapid graphical Interface Design) perm<strong>et</strong>tent<strong>de</strong> créer <strong>de</strong>s pages à partir :• <strong>de</strong> l’analyse liée au proj<strong>et</strong>,• <strong>de</strong>s patterns RAD standard ou personnalisés,• <strong>de</strong>s gabarits.En génération RAD, les pages générées contiennent tout le co<strong>de</strong> nécessaire à leur fonctionnement.Ces pages peuvent être testées immédiatement, avec les données présentessur le poste <strong>de</strong> développement.En génération RID, les pages générées contiennent uniquement les champs liés aux rubriques<strong>de</strong> l’analyse. Tout le co<strong>de</strong> nécessaire au fonctionnement <strong>de</strong> ces pages reste à lacharge du développeur. Vous pouvez directement saisir votre co<strong>de</strong> personnalisé.Partie 4 : <strong>Concepts</strong> avancés 117
Le modèleUMLWebDev perm<strong>et</strong> <strong>de</strong> créer ces neuf types <strong>de</strong> modèle UML :• Diagramme <strong>de</strong> classes : décrit <strong>de</strong> manière générale la structure d’un système.• Diagramme <strong>de</strong> cas d’utilisation : représente les fonctionnalités du système du point<strong>de</strong> vue <strong>de</strong> l’utilisateur.• Diagramme d’obj<strong>et</strong> : représente un ensemble d’obj<strong>et</strong>s <strong>et</strong> leurs relations à unmoment donné.• Diagramme <strong>de</strong> composants : décrit l'architecture physique <strong>et</strong> statique d'une applicationinformatique.• Diagramme d’activité : représente le comportement d’une métho<strong>de</strong> ou le déroulementd’un cas d’utilisation.• Diagramme <strong>de</strong> séquences : représente l’ordre chronologique <strong>de</strong>s messages envoyés<strong>et</strong> reçus par un ensemble d’obj<strong>et</strong>s.• Diagramme <strong>de</strong> collaboration : présente l’organisation structurelle <strong>de</strong>s obj<strong>et</strong>s quienvoient <strong>et</strong> reçoivent <strong>de</strong>s messages.• Diagramme d’états-transitions : présente un automate à états finis.• Diagramme <strong>de</strong> déploiement : montre la répartition <strong>de</strong>s matériels (les nœuds) utilisésdans un système <strong>et</strong> l’association <strong>de</strong>s programmes exécutables à ces matériels.118Partie 4 : <strong>Concepts</strong> avancés
Le modèle UML en pratique1 PrésentationL’objectif principal d’une équipe <strong>de</strong> développementest <strong>de</strong> créer <strong>de</strong>s applications optimisées, capables<strong>de</strong> satisfaire les besoins en constante évolution <strong>de</strong>leurs utilisateurs.La modélisation d’une application perm<strong>et</strong> <strong>de</strong> spécifierla structure <strong>et</strong> le comportement attendus d’unsystème, <strong>de</strong> comprendre son organisation, <strong>de</strong>déceler les possibilités <strong>de</strong> simplification <strong>et</strong> <strong>de</strong> ré-utilisation<strong>et</strong> <strong>de</strong> gérer les risques encourus.Un modèle est la simplification <strong>de</strong> la réalité. Il perm<strong>et</strong><strong>de</strong> mieux comprendre le système à développer.Un diagramme est la représentation graphiqued’un ensemble d’éléments qui constituent un système.Pour visualiser un système sous différentesperspectives, le langage UML (Unified Mo<strong>de</strong>lingLanguage) propose neuf diagrammes, représentantchacun un état du système.WinDev perm<strong>et</strong> <strong>de</strong> créer ces neuf types <strong>de</strong> modèleUML :• Diagramme <strong>de</strong> classes : décrit <strong>de</strong> manière généralela structure d’un système.• Diagramme <strong>de</strong> cas d’utilisation : représente lesfonctionnalités du système du point <strong>de</strong> vue <strong>de</strong>l’utilisateur.• Diagramme d’obj<strong>et</strong> : représente un ensembled’obj<strong>et</strong>s <strong>et</strong> leurs relations à un moment donné.• Diagramme <strong>de</strong> composants : décrit l'architecturephysique <strong>et</strong> statique d'une application informatique.• Diagramme d’activité : représente le comportementd’une métho<strong>de</strong> ou le déroulement d’un casd’utilisation.• Diagramme <strong>de</strong> séquences : représente l’ordrechronologique <strong>de</strong>s messages envoyés <strong>et</strong> reçuspar un ensemble d’obj<strong>et</strong>s.• Diagramme <strong>de</strong> collaboration : présente l’organisationstructurelle <strong>de</strong>s obj<strong>et</strong>s qui envoient <strong>et</strong>reçoivent <strong>de</strong>s messages.• Diagramme d’états-transitions : présente unautomate à états finis.• Diagramme <strong>de</strong> déploiement : montre la répartition<strong>de</strong>s matériels (les nœuds) utilisés dans unsystème <strong>et</strong> l’association <strong>de</strong>s programmes exécutablesà ces matériels.Ce chapitre ne fait que présenter <strong>de</strong> manière globalela modélisation UML. Pour plus <strong>de</strong> détails surle langage UML, nous vous conseillons <strong>de</strong> consulter<strong>de</strong>s ouvrages spécifiques.Partie 4 : <strong>Concepts</strong> avancés 119
2 Les différents diagrammes UML2.1 Diagramme <strong>de</strong> classesUn diagramme <strong>de</strong> classes perm<strong>et</strong> <strong>de</strong> modéliser lastructure d’un système grâce à <strong>de</strong>s classes <strong>et</strong> à<strong>de</strong>s relations entre ces classes.Les diagrammes <strong>de</strong> classes sont les diagrammesles plus courants dans la modélisation <strong>de</strong>s systèmesorientés obj<strong>et</strong>.Par exemple, le diagramme suivant présente la gestion<strong>de</strong>s stocks :• Protégé : l’élément est visible par la classe ellemême<strong>et</strong> par les sous-classes.• Privé : l’élément est visible uniquement par laclasse.• Relation : décrit le comportement <strong>de</strong>s classesentre elles. Trois types <strong>de</strong> relations existent :•Association : Relation structurelle entre classes.Par exemple, la classe Comman<strong>de</strong> est liéeaux classes Produit <strong>et</strong> Client. Un Client peutpasser plusieurs Comman<strong>de</strong>s. Une comman<strong>de</strong>est constituée <strong>de</strong> plusieurs produits. Une comman<strong>de</strong>doit obligatoirement contenir au moinsun produit.•Dépendance : Relation d’utilisation qui établitque les instances d’une classe sont reliées auxinstances d’un autre élément. Par exemple, laclasse Comman<strong>de</strong> utilise la classe Stock:avant d’ajouter un produit dans une comman<strong>de</strong>,il est nécessaire <strong>de</strong> vérifier que ce produitest en stock.•Généralisation : Rela tion entre une cla ssegénérale (parent) <strong>et</strong> une classe spécifique(enfant) qui en dérive. Par exemple, les classesBateau à voile <strong>et</strong> Bateau à moteur sont dérivées<strong>de</strong> la classe Bateau.Un diagramme <strong>de</strong> classes est composé <strong>de</strong>s élémentssuivants :• Classe : représente les structures <strong>de</strong> l’application.Chaque classe est divisée en troiscompartiments :• le nom <strong>de</strong> la classe indique ce que la classeest <strong>et</strong> non ce qu’elle fait.• les attributs <strong>de</strong> la classe donnent les caractéristiques<strong>de</strong> la classe.• les opérations <strong>de</strong> la classe représentent lesactions possibles sur la classe.Par exemple, la classe Stock contient l’attributListeProduits. C<strong>et</strong>te classe regroupe aussi lesopérations AjouteProduit <strong>et</strong> R<strong>et</strong>ireProduit. Cesopérations sont applicables aux instances <strong>de</strong> laclasse.• Remarque : Le langage UML définit trois niveaux<strong>de</strong> visibilité pour les attributs <strong>et</strong> les opérations :• Public : l’élément est visible par toutes les autresclasses.• Paqu<strong>et</strong>ages : perm<strong>et</strong>tant <strong>de</strong> diviser <strong>et</strong> d’organiserla représentation du diagramme (<strong>de</strong> la mêmemanière que les répertoires organisent lesfichiers). Chaque paqu<strong>et</strong>age peut contenir <strong>de</strong>sclasses <strong>et</strong> <strong>de</strong>s relations.Grâce à la génération d’un diagramme <strong>de</strong> classes,il est possible <strong>de</strong> créer la structure <strong>de</strong>s classesWebDev utilisées dans votre application.120Partie 4 : <strong>Concepts</strong> avancés
2.2 Diagramme <strong>de</strong> cas d’utilisationUn diagramme <strong>de</strong> cas d’utilisation perm<strong>et</strong> <strong>de</strong> visualiserle comportement d’un système <strong>de</strong> telle sorteque :• l’utilisateur puisse comprendre comment utiliserchaque élément.•le développeur puisse implémenter ces éléments.Par exemple, il est possible <strong>de</strong> décrire le comportementd’un téléphone portable à l’ai<strong>de</strong> d’un diagramme<strong>de</strong> cas d’utilisation.• Dépendance : Relation qui établit qu’un élémenten utilise un autre. Par exemple, le Clientd’une banque peut r<strong>et</strong>irer <strong>de</strong> l’argent dans undistributeur automatique. Dans ce cas, l’actionR<strong>et</strong>rait d’argent dépend du Client.Pour pouvoir r<strong>et</strong>irer <strong>de</strong> l’argent, le Client doitpréalablement saisir son co<strong>de</strong> confi<strong>de</strong>ntiel.Dans ce cas, l’action R<strong>et</strong>rait d’argent dépend<strong>de</strong> la Saisie du mot <strong>de</strong> passe.• Généralisation : relation perm<strong>et</strong>tant d’organiserles éléments selon une hiérarchie.Par exemple :•l’acteur Client peut être <strong>de</strong> <strong>de</strong>ux types : Clientindividuel ou Client d’entreprise.• la vérification <strong>de</strong> l’i<strong>de</strong>ntité d’un utilisateur peutêtre effectuée <strong>de</strong> <strong>de</strong>ux façons : saisie du mot<strong>de</strong> passe ou vérification <strong>de</strong> l’empreinte digitale.Un diagramme <strong>de</strong> cas d’utilisation est composé<strong>de</strong>s éléments suivants :• Acteur : représente le rôle <strong>de</strong>s utilisateurs <strong>de</strong>l’application. Par exemple, une personne qui travailledans une banque sera le Gestionnaire <strong>de</strong>prêts. Si c<strong>et</strong>te personne à un compte dans c<strong>et</strong>tebanque, elle jouera aussi le rôle <strong>de</strong> Client.• Cas d’utilisation : décrit une séquence d’actionsexécutées par l’application. Par exemple, Passerune comman<strong>de</strong>, Saisir une facture, Créer unenouvelle fiche client,...Un cas d’utilisation décrit ce que fait une applicationmais ne précise pas comment l’applicationle fait.• Relation : décrit le comportement <strong>de</strong>s acteurspar rapport aux cas d’utilisation. Trois types <strong>de</strong>relations existent :• Association : Relation structurelle entre <strong>de</strong>uxéléments reliés.• Paqu<strong>et</strong>age : divise <strong>et</strong> organise la représentationdu diagramme (<strong>de</strong> la même manière que lesrépertoires organisent les fichiers). Chaquepaqu<strong>et</strong>age peut contenir <strong>de</strong>s acteurs <strong>et</strong> <strong>de</strong>s casd’utilisation.2.3 Diagramme d’obj<strong>et</strong>sUn diagramme d’obj<strong>et</strong>s représente un ensembled’obj<strong>et</strong>s <strong>et</strong> leurs relations à un moment donné.Un diagramme d’obj<strong>et</strong>s est utilisé pour montrer uncontexte (avant ou après une interaction entreobj<strong>et</strong>s par exemple).Partie 4 : <strong>Concepts</strong> avancés 121
Par exemple, le diagramme suivant présente unepartie <strong>de</strong> la structure générale <strong>de</strong>s motos :Par exemple, le diagramme suivant présente lefonctionnement d’un programme perm<strong>et</strong>tant <strong>de</strong> seloguer en mo<strong>de</strong> texte sous Unix.Un diagramme d’obj<strong>et</strong>s est composé <strong>de</strong>s élémentssuivants :• obj<strong>et</strong> : représente une instance d’une classe.Remarque : Si un diagramme <strong>de</strong> classes estouvert, il est possible <strong>de</strong> créer un obj<strong>et</strong> à partird’une classe présente dans ce diagramme (dragand drop à partir du vol<strong>et</strong> "Analyse UML").• obj<strong>et</strong> composite : représente <strong>de</strong> manière visuelleun obj<strong>et</strong> formé d’autres obj<strong>et</strong>s. Par exemple : unefenêtre qui contient <strong>de</strong>s ascenseurs, <strong>de</strong>sboutons, ...• lien : représente les relations entre les différentsobj<strong>et</strong>s.2.4 Diagramme <strong>de</strong> composantsUn diagramme <strong>de</strong> composants décrit l'architecturephysique <strong>et</strong> statique d'une application informatique.Par exemple : fichiers sources, librairies,exécutables, ...Un diagramme <strong>de</strong> composants est composé <strong>de</strong>séléments suivants :• module : représente les différents éléments physiquesconstituant une application informatique.Par exemple : un fichier, une librairie, ...Un module peut être représenté :•soit par une spécification qui montre l’interfacedu module. C<strong>et</strong>te spécification peut être génériquedans le cas <strong>de</strong> classes paramétrables.•soit par son corps qui présente l’implémentationdu module.• tâche : représente un composant ayant son propreflot (thread) <strong>de</strong> contrôle.• programmes principaux <strong>de</strong> l’application informatique.• sous-programmes : regroupent les procédures <strong>et</strong>les fonctions qui n’appartiennent pas à <strong>de</strong>s classes.2.5 Diagramme d’activitéUn diagramme d’activité représente le comportementd’une métho<strong>de</strong> ou le déroulement d’un casd’utilisation.122Partie 4 : <strong>Concepts</strong> avancés
Par exemple, le diagramme suivant présente ledéroulement d’un barrage :2.6 Diagramme <strong>de</strong> séquenceUn diagramme <strong>de</strong> séquence représente l’ordrechronologique <strong>de</strong>s messages envoyés <strong>et</strong> reçus parun ensemble d’obj<strong>et</strong>s.Par exemple, le diagramme suivant représente ledébut d’une communication téléphonique :Un diagramme d’activité est composé <strong>de</strong>s élémentssuivants :• activité : représente une étape particulière dansl’exécution d’un mécanisme. Par exemple : "Etablirun <strong>de</strong>vis", "Ouvrir la fenêtre", "Vérifier lesconnaissances", ...• barre <strong>de</strong> synchronisation : perm<strong>et</strong> <strong>de</strong> synchroniserles différentes activités :•soit en indiquant les activités à effectuer avantune certaine activité. Par exemple : "Appuyersur l’embrayage" <strong>et</strong> "Enclencher une vitesse"avant <strong>de</strong> "Relâcher l’embrayage".•soit en indiquant les activités à effectuer enparallèle.• obj<strong>et</strong> : perm<strong>et</strong> <strong>de</strong> rattacher <strong>de</strong>s activités à l’obj<strong>et</strong>qui réalise ces activités. Par exemple, les activités"Comman<strong>de</strong>r" <strong>et</strong> "Payer" sont rattachées àl’obj<strong>et</strong> "Client"; les activités "Enseigner", "Contrôlerles connaissances" sont rattachées à l’obj<strong>et</strong>"Enseignant".• émission <strong>de</strong> signal : représente l’envoi d’unsignal vers un obj<strong>et</strong>.• attente <strong>de</strong> signal : représente l’attente d’unsignal en provenance d’un obj<strong>et</strong>.• transition : représente le passage d’une activitéterminée à une autre. Par exemple : "Trop d’eau","Assez d’argent", ...Un diagramme <strong>de</strong> séquence est composé <strong>de</strong>s élémentssuivants :• obj<strong>et</strong> : représente les différents obj<strong>et</strong>s utilisés.Chaque obj<strong>et</strong> est représenté par un carré surmontantune ligne en pointillé. C<strong>et</strong>te ligne représentela durée <strong>de</strong> vie <strong>de</strong> l’obj<strong>et</strong>. Par exemple :"Appelant, "Appelé, ...• pério<strong>de</strong> d’activation d’un obj<strong>et</strong> : Sur la ligne <strong>de</strong>vie d’un obj<strong>et</strong>, il est possible d’insérer <strong>de</strong>s pério<strong>de</strong>sd’activation <strong>de</strong> l’obj<strong>et</strong>. Ces pério<strong>de</strong>s représententles moments où l’obj<strong>et</strong> est actif.• message : représente, grâce à <strong>de</strong>s flèches horizontales,les messages échangés entre les différentsobj<strong>et</strong>s. Ces flèches sont orientées <strong>de</strong>l’ém<strong>et</strong>teur du message vers le <strong>de</strong>stinataire.L’ordre d’envoi <strong>de</strong>s messages est donné par laposition <strong>de</strong>s flèches sur l’axe vertical.Par exemple : "Décroche", "Sonnerie", ...2.7 Diagramme <strong>de</strong> collaborationUn diagramme <strong>de</strong> collaboration présente l’organisationstructurelle <strong>de</strong>s obj<strong>et</strong>s qui envoient <strong>et</strong> reçoivent<strong>de</strong>s messages.Partie 4 : <strong>Concepts</strong> avancés 123
Par exemple, le diagramme suivant montre l’utilisationd’un ascenseur par une personne :Par exemple, le diagramme suivant présente lesdifférentes étapes d’une machine à laver lesvoitures :Un diagramme <strong>de</strong> collaboration est composé <strong>de</strong>séléments suivants :• obj<strong>et</strong> : représente les différents obj<strong>et</strong>s utilisés.• acteur : représente un élément externe du système.Par exemple une personne.• message : représente les messages échangésentre les différents obj<strong>et</strong>s.2.8 Diagramme d’états-transitionsUn diagramme d’états-transitions présente un automateà états finis. Il perm<strong>et</strong> ainsi <strong>de</strong> décrire leschangements d'états d'un obj<strong>et</strong> ou d'un composant.Un état se caractérise par sa durée <strong>et</strong> sa stabilité.Une transition représente le passage instantanéd'un état vers un autre.Une transition est déclenchée :•soit par un événement.• soit automatiquement lorsqu’aucun événementdéclencheur est spécifié.Un diagramme d’états-transitions est composé <strong>de</strong>séléments suivants :• état : représente la valeur <strong>de</strong>s attributs d’unobj<strong>et</strong> à un instant donné.• état initial : représente l’état au démarrage dusystème.• état final : représente l’état dans lequel se trouvele système à la fin du fonctionnement.• super-état : perm<strong>et</strong> <strong>de</strong> structurer le diagrammeen indiquant plusieurs niveaux <strong>de</strong> distinctionentre les états.• historique : représente le <strong>de</strong>rnier état actif d’unsuper-état.• souche : perm<strong>et</strong> <strong>de</strong> symboliser les états contenusdans un super-état. Il est ainsi possible <strong>de</strong>relier ces états à d’autres états n’appartenantpas au super-état.• transition : représente le passage d’un état à unautre.124Partie 4 : <strong>Concepts</strong> avancés
2.9 Diagramme <strong>de</strong> déploiementUn diagramme <strong>de</strong> déploiement montre la répartitionphysique <strong>de</strong>s matériels (les nœuds) utilisésdans un système <strong>et</strong> l’association <strong>de</strong>s programmesexécutables à ces matériels.Par exemple, le diagramme suivant présente lesdifférents matériels utilisés dans une entreprise :Un diagramme <strong>de</strong> déploiement est composé <strong>de</strong>séléments suivants :• classe <strong>de</strong> nœuds : représente une classe <strong>de</strong> ressourcematérielle. Par exemple : un serveur, unpc, une imprimante, ...• instance d’un nœud : représente une ressourcematérielle. Par exemple : le serveur numéro 3,l’imprimante numéro 7, ...• connexion : décrit le support <strong>de</strong> communicationentre <strong>de</strong>ux nœuds. Par exemple : liaison RNIS ouTCP/IP.Partie 4 : <strong>Concepts</strong> avancés 125
GroupwareutilisateurLe Groupware Utilisateur perm<strong>et</strong> d’inclure simplement une gestion <strong>de</strong>s utilisateurs <strong>et</strong> <strong>de</strong>leurs droits dans un site WebDev.Deux types d’utilisateurs sont pris en compte :• utilisateur simple, utilisant directement le site.• superviseur, pouvant configurer les utilisateurs <strong>et</strong> leurs droits.126Partie 4 : <strong>Concepts</strong> avancés
Le groupware utilisateur en pratique1 PrésentationUn site Intran<strong>et</strong> ou Intern<strong>et</strong> nécessite la définitiondu rôle <strong>de</strong>s différents intervenants. Il est souventnécessaire <strong>de</strong> prévoir différents niveaux d’accèsselon les fonctions <strong>de</strong> l’utilisateur.En eff<strong>et</strong>, tous les utilisateurs n’ont pas les mêmesfonctions, ni les mêmes besoins. Leur domained’action doit donc être plus ou moins limité.Prenons un exemple simple: lors <strong>de</strong> la mise enplace d’une gestion commerciale, l’application proposeles fonctionnalités suivantes :• Consultation du tarif,•Modification du tarif,• Saisie <strong>de</strong>s comman<strong>de</strong>s,• Saisie <strong>de</strong>s clients.Selon l’utilisateur les accès possibles sont différents.Quelques exemples :• les secrétaires peuvent consulter le tarif <strong>et</strong> créer<strong>de</strong>s comman<strong>de</strong>s.• les commerciaux peuvent consulter le tarif <strong>et</strong> établirles comman<strong>de</strong>s, gérer <strong>de</strong> nouveaux clients.• les directeurs commerciaux ont accès à toutesles options.Pour gérer ces niveaux d’accès dans vos sites Web-Dev, il suffit d’intégrer le groupware utilisateur àvotre site. Quelques clics <strong>de</strong> souris suffisent àtransformer une application classique en une applicationgérant <strong>de</strong> nombreux niveaux d’accès. Lamise en place est instantanée.Lors <strong>de</strong> l’exécution du site, le responsable pourracréer <strong>de</strong>s utilisateurs (i<strong>de</strong>ntifiés par leur login <strong>et</strong>leur mot <strong>de</strong> passe) <strong>et</strong> leur donner accès à l’une oul’autre <strong>de</strong>s fonctionnalités du site.Remarque : le groupware utilisateur est disponibledans les sites dynamiques WebDev exécutés sousWindows ou Linux. Le groupware utilisateur n’estpas disponible dans les sites statiques, semi-dynamiques,PHP, AWP ou Ajax.2 Comment fonctionne le groupware utilisateur?Un site utilisant le groupware utilisateur a <strong>de</strong>uxniveaux d’utilisation :• le niveau utilisateur.• le niveau superviseur.2.1 Le niveau utilisateurL’utilisateur se connecte à l’application grâce à unepage <strong>de</strong> login <strong>et</strong> accè<strong>de</strong> aux fonctionnalités qui luisont autorisées.Remarque : le groupware utilisateur peut perm<strong>et</strong>tre<strong>de</strong> se connecter en utilisant un annuaire LDAP.2.2 Le niveau superviseurLe superviseur se connecte à l’application par unepage <strong>de</strong> login <strong>et</strong> accè<strong>de</strong> à un menu avancé lui perm<strong>et</strong>tant<strong>de</strong> configurer les utilisateurs <strong>et</strong> leursdroits, ou bien <strong>de</strong> lancer l’application.La page <strong>de</strong> configuration perm<strong>et</strong> au superviseur<strong>de</strong> :• lancer l’application.• configurer le groupware.La configuration du groupware consiste à créer <strong>de</strong>sutilisateurs, <strong>de</strong>s groupes, <strong>et</strong> d’associer <strong>de</strong>s utilisateursaux groupes, à gérer les droits <strong>de</strong> chaque utilisateur(ou groupe) sur chacune <strong>de</strong>s pages du site.Les droits sont définissables au niveau <strong>de</strong>s options<strong>de</strong> menu, <strong>de</strong>s groupes <strong>de</strong> champs <strong>et</strong> <strong>de</strong>s champs.Le superviseur peut rendre ces éléments grisés,inactifs ou invisibles. Ces configurations sont prioritairessur toute configuration effectuée dans le programme.Pour plus <strong>de</strong> détails sur la configuration du groupwarepar le superviseur consultez le paragraphe“Paramétrer le site utilisant le groupware utilisateur”,page 129.Remarque : Toutes les informations concernant lesutilisateurs <strong>et</strong> leurs droits sont stockées dans <strong>de</strong>sfichiers au format HyperFileSQL. Les fichiers concernantles utilisateurs peuvent être communs àplusieurs sites. Les fichiers concernant les droits<strong>de</strong>s utilisateurs sur les différentes pages du sitesont spécifiques au site, <strong>et</strong> ne peuvent pas êtrepartagés.Partie 4 : <strong>Concepts</strong> avancés 127
3 Mise en place du groupware utilisateur3.1 Ajouter le groupware utilisateur dans unsitePour m<strong>et</strong>tre en place le groupware utilisateur dansun site WebDev, une seule option suffit : "Atelier ..Paramétrer le groupware utilisateur". La fenêtre <strong>de</strong>paramétrage du groupware utilisateur perm<strong>et</strong> <strong>de</strong>définir :• Le mo<strong>de</strong> <strong>de</strong> gestion du groupware utilisateur.• Le type <strong>de</strong> lancement du groupware utilisateur.• L’emplacement <strong>de</strong>s fichiers <strong>de</strong> données du groupwareutilisateur.Mo<strong>de</strong> d’intégration du GroupwareUtilisateurDeux mo<strong>de</strong>s d’intégration du groupware utilisateursont disponibles :• Intégration par défaut : toute la programmationdu groupware utilisateur est automatiquementintégrée à votre application.Une nouvelle page est intégrée à votre proj<strong>et</strong> : lapage <strong>de</strong> login. Elle apparaît lors du lancement dusite <strong>et</strong> perm<strong>et</strong> à l’utilisateur <strong>de</strong> se connecter ausite. Vous pouvez ainsi personnaliser c<strong>et</strong>te pageen lui appliquant par exemple le gabarit <strong>de</strong> votresite.• Intégration personnalisée : toute la programmationdu groupware utilisateur est automatiquementintégrée à votre site. Toutes les pagesnécessaires à la gestion du groupware utilisateur(login <strong>et</strong> gestion <strong>de</strong>s utilisateurs) sont automatiquementajoutées à votre proj<strong>et</strong>. Vouspouvez ainsi personnaliser totalement toutes lespages utilisées par le groupware utilisateur.Le détail <strong>de</strong>s différentes pages du Groupware Utilisateurest présenté dans le paragraphe “Les pagesWebDev”, page 131.Démarrage du Groupware UtilisateurDeux mo<strong>de</strong>s <strong>de</strong> lancement du groupware utilisateursont disponibles :• Lancement automatique : La page <strong>de</strong> login dugroupware utilisateur est lancée avant touteautre page <strong>de</strong> l’application. Le co<strong>de</strong> d’initialisationdu proj<strong>et</strong> est exécuté après l’ouverture <strong>et</strong> lavalidation <strong>de</strong> la page <strong>de</strong> login.• Lancement manuel : La page <strong>de</strong> login ne seraouverte que si la fonction gpwOuvre est utilisée.C<strong>et</strong>te option perm<strong>et</strong> d’exécuter le co<strong>de</strong> d'initialisationdu proj<strong>et</strong> par exemple, avant d’ouvrir lapage <strong>de</strong> login. Il est ainsi possible par exempled’afficher une page <strong>de</strong>mandant la langue d'exécutiondu site.Login automatique en mo<strong>de</strong> testVous pouvez indiquer le login <strong>et</strong> le mot <strong>de</strong> passe àutiliser en mo<strong>de</strong> "Test automatique". Ces informationsseront utilisées si un test automatique estréalisé sur le site.Annuaire LDAPSi votre client utilise un annuaire LDAP au sein <strong>de</strong>son entreprise, il est possible <strong>de</strong> brancher le groupwareutilisateur sur c<strong>et</strong> annuaire. Ainsi le compte<strong>et</strong> le mot <strong>de</strong> passe présent dans l'annuaire LDAPseront automatiquement <strong>de</strong>mandés à l'utilisateur.Deux mo<strong>de</strong>s sont disponibles :• Sans gestion <strong>de</strong>s droits: Dans ce cas, aucunfichier du groupware ne sera créé. Si le lancementest automatique, la page <strong>de</strong> login <strong>de</strong>man<strong>de</strong>raà l'utilisateur <strong>de</strong> s'i<strong>de</strong>ntifier. Si l'utilisateurest bien enregistré dans l'annuaire LDAP, le sitese lancera, sinon il se fermera. Il n'est pas possibleà un superviseur <strong>de</strong> paramétrer les droits surles pages.• Avec gestion <strong>de</strong>s droits : Seuls les utilisateursprésents dans l'annuaire LDAP pourront se connecter.Le paramétrage <strong>de</strong>s droits sur les pagesest disponible.Pour plus <strong>de</strong> détails, consultez l’ai<strong>de</strong> en ligne.Remarque : Le groupware utilisateur fonctionneavec Active Directory. Il ne fonctionne pas avecopenLDAP.Fichiers <strong>de</strong> données du GroupwareUtilisateurDeux catégories <strong>de</strong> fichiers <strong>de</strong> donnés sont géréespar le groupware utilisateur :• les fichiers <strong>de</strong> données perm<strong>et</strong>tant d’i<strong>de</strong>ntifierles utilisateurs. Ces fichiers <strong>de</strong> données peuventêtre communs à plusieurs applications.• les fichiers <strong>de</strong> données perm<strong>et</strong>tant <strong>de</strong> gérer lesdroits <strong>de</strong>s utilisateurs sur les différentes pagesdu site. Ces fichiers sont propres au site.Le mot <strong>de</strong> passe <strong>de</strong>s fichiers <strong>de</strong> donnéesPar défaut, les fichiers <strong>de</strong> données du groupwareutilisateur ont un mot <strong>de</strong> passe spécifique. Ce mot<strong>de</strong> passe est : "PCSGPW2001".Pour changer ce mot <strong>de</strong> passe, saisissez le nouveaumot <strong>de</strong> passe. Les caractères saisis apparaissentsous forme d'étoiles.128Partie 4 : <strong>Concepts</strong> avancés
Remarque : Ce mot <strong>de</strong> passe est utilisé par exemplelors <strong>de</strong> la ré-in<strong>de</strong>xation <strong>de</strong>s fichiers ou lors <strong>de</strong>l’ouverture <strong>de</strong>s fichiers avec l'outil WDMAP.Pour plus <strong>de</strong> détails sur ces fichiers <strong>et</strong> leur configuration(répertoire d'installation, ...), consultez leparagraphe “Les fichiers <strong>de</strong> données”, page 131.3.2 Tester l’applicationLors du test d’un site gérant le groupware utilisateur,la première page apparaissant est automatiquementla page <strong>de</strong> login (quelle que soit lapremière page définie dans votre site).Par défaut, un seul utilisateur existe : le superviseur.Pour se connecter en tant que superviseur, ilsuffit <strong>de</strong> saisir les informations suivantes dans lapage <strong>de</strong> login :•Nom: SUPERVISEUR• Mot <strong>de</strong> passe : SUPERVISEURVous pouvez alors soit tester votre site, soit configurerle fonctionnement du groupware.Remarques :•Pour que la première page <strong>de</strong> votre site ne soitpas la page <strong>de</strong> login, cochez l'option "Lancementmanuel" dans les options du Groupware Utilisateur.Il suffira d'utiliser la fonction du WLangagegpwOuvre pour ouvrir la page <strong>de</strong> login.•Les pages <strong>de</strong> gestion du groupware utilisateursont exécutées avant le co<strong>de</strong> d’initialisation duproj<strong>et</strong>.• La première page <strong>de</strong> votre site définie dans leproj<strong>et</strong> sera lancée après la page <strong>de</strong> login (lorsquel’utilisateur n’est pas le superviseur).• Pour ne pas lancer le groupware utilisateur lors<strong>de</strong>s tests du site, il suffit <strong>de</strong> décocher l’option"Atelier .. Paramétrer le Groupware Utilisateur". Sivous re-branchez le groupware utilisateur par lasuite, les fichiers <strong>de</strong> données utilisés précé<strong>de</strong>mmentpour le groupware utilisateur ne seront paseffacés.3.3 Installer un site utilisant le groupwareutilisateurL’installation d’un site utilisant le groupware utilisateurse fait comme pour toute application parl’option "Atelier .. Créer la procédure d’installation".Un écran spécifique au groupware utilisateur perm<strong>et</strong><strong>de</strong> configurer l’emplacement <strong>de</strong>s fichiers <strong>de</strong>données propres au groupware utilisateur.Remarques :• Si vous avez paramétré les fichiers <strong>de</strong> donnéesdu groupware utilisateur pour votre client, il estnécessaire <strong>de</strong> les sélectionner lors <strong>de</strong> la préparation<strong>de</strong> l’installation. Il est donc nécessaire <strong>de</strong>personnaliser la liste <strong>de</strong>s fichiers <strong>de</strong> l’installation.• Si vous n’avez pas paramétré les fichiers du groupware,lors du premier lancement <strong>de</strong> l’application,seul l’utilisateur Superviseur existera dansl’application.Conseil : si vous ne configurez pas les différentsniveaux d’utilisation du groupware utilisateur pourvos clients, il est conseillé <strong>de</strong> leur fournir un documentreprenant tous les champs <strong>de</strong> vos pages pourobtenir une configuration optimisée.4 Paramétrer le site utilisant le groupware utilisateurLorsque le site est déployé, le paramétrage dugroupware utilisateur est réalisé par le superviseur<strong>de</strong> l’application. Ce paramétrage consiste à créer<strong>de</strong>s utilisateurs, <strong>de</strong>s groupes d’utilisateurs, <strong>et</strong> àleur attribuer pour chaque champ <strong>de</strong> chaque page<strong>de</strong> l’application certains droits. Ces droits consistentà rendre visible, invisible ou grisé <strong>de</strong>s champs,<strong>de</strong>s groupes <strong>de</strong> champs, <strong>de</strong>s options <strong>de</strong> menus.Pour paramétrer le groupware utilisateur, il suffit<strong>de</strong> :1. Lancer le site <strong>et</strong> <strong>de</strong> se connecter en tant quesuperviseur :•Nom: SUPERVISEUR• Mot <strong>de</strong> passe : SUPERVISEUR2. Choisir l’option "Configurer le groupware"4.1 Gérer les utilisateursLa création d’un nouvel utilisateur consiste à donnerles informations suivantes :• le nom <strong>de</strong> l’utilisateur (obligatoire)• le prénom <strong>de</strong> l’utilisateur• le login <strong>de</strong> l’utilisateur. Ce login correspond àl’i<strong>de</strong>ntifiant <strong>de</strong> l’utilisateur lors <strong>de</strong> sa connexion àl’application.• le mot <strong>de</strong> passe <strong>de</strong> l’utilisateur. Ce mot <strong>de</strong> passen’est pas obligatoire, <strong>et</strong> peut être saisi par l’utilisateurlui-même lors <strong>de</strong> sa première connexion(cochez l’option correspondante).Il est possible <strong>de</strong> définir l’utilisateur comme étantun superviseur du site.Partie 4 : <strong>Concepts</strong> avancés 129
Il est bien entendu possible <strong>de</strong> modifier ou <strong>de</strong> supprimerun utilisateur. La suppression d’un utilisateurperm<strong>et</strong> soit <strong>de</strong> supprimer entièrementl’utilisateur, soit <strong>de</strong> supprimer uniquement sesdroits.Les utilisateurs peuvent être rassemblés en groupes.Lors <strong>de</strong> la création d’un groupe, il est possible<strong>de</strong> copier les droits précé<strong>de</strong>mment définis pour unautre groupe ou utilisateur.Il est possible <strong>de</strong> créer ou <strong>de</strong> supprimer un groupe.Lors <strong>de</strong> la suppression d’un groupe, il est possiblesoit <strong>de</strong> supprimer le groupe <strong>et</strong> ses utilisateurs, soit<strong>de</strong> supprimer uniquement le groupe. Dans ce cas,les utilisateurs ne sont plus associés à un groupe.Remarques :• Il est conseillé <strong>de</strong> changer le mot <strong>de</strong> passe dusuperviseur dès la première utilisation.• Le groupe "Défaut" est le groupe proposé pardéfaut dans le groupware utilisateur. Ce groupe apar défaut tous les droits sur l’application.• Il n’est pas possible <strong>de</strong> supprimer le groupe <strong>et</strong> le groupe DEFAUT.• Si vous utilisez un annuaire LDAP, vous avez lapossibilité d'importer les utilisateurs présentsdans l'annuaire pour pouvoir gérer les droits <strong>de</strong>ces utilisateurs.4.2 Gérer les droitsPour chaque utilisateur (ou groupe d’utilisateurs),le superviseur peut gérer leurs droits sur les différentséléments <strong>de</strong>s pages du proj<strong>et</strong>.Pour chaque association utilisateur / page, il estpossible <strong>de</strong> définir un état spécifique pour tous leséléments <strong>de</strong> la page.Les éléments gérés dans les pages, les pages internes<strong>et</strong> les modèles <strong>de</strong> pages sont les suivants :•les champs• les groupes <strong>de</strong> champs• les options <strong>de</strong> menuLes états disponibles pour chaque élément sont lessuivants :• Défaut : le comportement <strong>de</strong> l’élément correspondau comportement par défaut, défini dansl’application.• Inactif : l’élément est affiché mais toute saisieest impossible.• Grisé : l’élément est affiché mais grisé. Toute saisieest impossible.• Invisible : l’élément n’est pas affiché.5 Conseils pour un site gérant le groupware utilisateur5.1 Utilisation <strong>de</strong> groupes <strong>de</strong> champsPour simplifier le paramétrage <strong>de</strong> la gestion dugroupware utilisateur en fonction <strong>de</strong>s utilisateurs, ilest conseillé <strong>de</strong> regrouper les champs par groupe<strong>de</strong> champs.Il est par exemple possible <strong>de</strong> créer dans vos pages<strong>de</strong>s groupes <strong>de</strong> champs correspondant auxchamps à afficher pour un type d’utilisateur. Lapossibilité d’associer un champ à plusieurs groupes<strong>de</strong> champs augmente les combinaisons disponibles.Ces groupes <strong>de</strong> champs peuvent être créés dansvotre site uniquement en vue d’une gestion dugroupware, sans programmation spécifique <strong>de</strong>votre part.5.2 Visibilité <strong>de</strong>s champsLors du développement <strong>de</strong> votre application, vouspouvez définir les caractéristiques <strong>de</strong> visibilité <strong>de</strong>sdifférents éléments <strong>de</strong> vos pages :• soit lors <strong>de</strong> la <strong>de</strong>scription <strong>de</strong> l’élément (fenêtre à7 ongl<strong>et</strong>s)• soit par programmation (propriété Etat ou propriétéVisible)Lors <strong>de</strong> la configuration du groupware utilisateur, lesuperviseur peut définir d’autres caractéristiques<strong>de</strong> visibilité. Les caractéristiques définies par lesuperviseur sont prioritaires. Par exemple, un boutonperm<strong>et</strong> <strong>de</strong> rendre un champ actif. Or ce champa été grisé par le superviseur. Votre co<strong>de</strong> ne serapas pris en compte <strong>et</strong> le champ ne sera pas actif.5.3 Définition <strong>de</strong>s droitsPour obtenir une définition <strong>de</strong>s droits correspondantaux fonctionnalités <strong>de</strong> votre site, il estconseillé :• soit d’effectuer la configuration <strong>de</strong>s droits vouluepar l’utilisateur <strong>de</strong> votre application avant <strong>de</strong>créer la procédure d’installation. Il suffit alorsd’ajouter les fichiers du groupware lors <strong>de</strong> lacréation <strong>de</strong> l’installation du site.130Partie 4 : <strong>Concepts</strong> avancés
•soit <strong>de</strong> livrer un dossier <strong>de</strong> programmation perm<strong>et</strong>tant<strong>de</strong> donner les noms <strong>de</strong>s champs, <strong>de</strong>sgroupes <strong>de</strong> champs <strong>et</strong> <strong>de</strong>s options à gérer selonle niveau d’utilisation du site.6 Les éléments du groupware utilisateur6.1 Les pages WebDevSelon le mo<strong>de</strong> d’intégration du groupware utilisateurdans votre application, une ou plusieurs pagespeuvent être intégrées dans votre proj<strong>et</strong>. Ces pagessont les suivantes.Remarque : le fonctionnement <strong>de</strong> ces pages estprésenté en détail dans le paragraphe “Paramétrerle site utilisant le groupware utilisateur”, page 129.Page <strong>de</strong> login (GPWLOGIN_WB.WDW)C<strong>et</strong>te page perm<strong>et</strong> à tous les internautes <strong>de</strong> se connecterau site. Dans c<strong>et</strong>te page, l’internaute doitsaisir son nom <strong>et</strong> son mot <strong>de</strong> passe (optionnel) quiont été préalablement définis par le superviseur dusite. Dès le lancement, il est possible d’utiliser lelogin "SUPERVISEUR" <strong>et</strong> le mot <strong>de</strong> passe "SUPERVI-SEUR".C<strong>et</strong>te page perm<strong>et</strong> également :• à l’internaute <strong>de</strong> changer son mot <strong>de</strong> passe• au superviseur <strong>de</strong> configurer les droits <strong>et</strong> <strong>de</strong> lancerle site.Page Fiche d’un utilisateur(GPWFicheUtilisateur_WB.WDW)C<strong>et</strong>te page est visualisable dans votre proj<strong>et</strong> uniquementen mo<strong>de</strong> personnalisé.C<strong>et</strong>te page perm<strong>et</strong> au superviseur <strong>de</strong> saisir un nouvelutilisateur <strong>et</strong> les renseignements le concernant.Page Association <strong>de</strong>s utilisateurs <strong>et</strong> <strong>de</strong>s configurations(GPWAssociationConfiguration_WB. WDW)C<strong>et</strong>te page est visualisable dans votre proj<strong>et</strong> uniquementen mo<strong>de</strong> personnalisé.C<strong>et</strong>te page perm<strong>et</strong> au superviseur <strong>de</strong> gérer lesinternautes, les groupes <strong>et</strong> les droits <strong>de</strong>s internautes.Page Détail d’une configuration(GPWD<strong>et</strong>ailConfiguration_WB.WDW)C<strong>et</strong>te page est visualisable dans votre proj<strong>et</strong> uniquementen mo<strong>de</strong> personnalisé.C<strong>et</strong>te page perm<strong>et</strong> au superviseur <strong>de</strong> paramétrerpour chaque page les droits d’un internaute (oud’un groupe) sur tous les champs, les groupes <strong>de</strong>champs <strong>et</strong> les options <strong>de</strong> menu <strong>de</strong> la page.Page Choix d’une configuration(GPWChoixConfiguration_WB. WDW)C<strong>et</strong>te page est visualisable dans votre proj<strong>et</strong> uniquementen mo<strong>de</strong> personnalisé.C<strong>et</strong>te page perm<strong>et</strong> au superviseur <strong>de</strong> copier uneconfigura tion précé<strong>de</strong>mment définie (pour ungroupe ou un internaute).Page Fiche configuration(GPWFicheConfiguration_WB. WDW)C<strong>et</strong>te page est visualisable dans votre proj<strong>et</strong> uniquementen mo<strong>de</strong> personnalisé.C<strong>et</strong>te page perm<strong>et</strong> au superviseur <strong>de</strong> créer ungroupe ou un utilisateur.Page Fiche Historique <strong>de</strong>s connexions(GPWHistoriqueConnexion_WB. WDW)C<strong>et</strong>te page est visualisable dans votre proj<strong>et</strong> uniquementen mo<strong>de</strong> personnalisé.C<strong>et</strong>te page perm<strong>et</strong> au superviseur <strong>de</strong> consulterl’historique <strong>de</strong>s connexions (<strong>et</strong> <strong>de</strong> purger c<strong>et</strong> historiquesi nécessaire).6.2 Les fichiers <strong>de</strong> donnéesDeux catégories <strong>de</strong> fichiers sont prises en compte :• Les fichiers perm<strong>et</strong>tant d’i<strong>de</strong>ntifier les utilisateurs.Ces fichiers peuvent être communs à plusieursapplications.• Les fichiers perm<strong>et</strong>tant <strong>de</strong> gérer les droits <strong>de</strong>sutilisateurs sur les différents éléments <strong>de</strong> l’application.Ces fichiers sont spécifiques à l’application<strong>et</strong> ne peuvent pas être partagés avec uneautre application.Par défaut, ces fichiers <strong>de</strong> données sont créés auformat HyperFileSQL Classic, mais il est possibled’utiliser <strong>de</strong>s fichiers <strong>de</strong> données HyperFileSQLClient/Serveur. Pour plus <strong>de</strong> détails, consultezl’ai<strong>de</strong> en ligne.Mot <strong>de</strong> passe : Par défaut, les fichiers <strong>de</strong> donnéesdu groupware utilisateur ont un mot <strong>de</strong> passe spécifique.Ce mot <strong>de</strong> passe est : "PCSGPW2001".Pour changer ce mot <strong>de</strong> passe :1. Affichez la fenêtre <strong>de</strong> configuration du groupwareutilisateur (option "Atelier .. Paramétrer legroupware utilisateur").Partie 4 : <strong>Concepts</strong> avancés 131
2. Dans l’ongl<strong>et</strong> "Fichiers", saisissez le nouveaumot <strong>de</strong> passe. Les caractères saisis apparaissentsous forme d'étoiles.Remarque : Ce mot <strong>de</strong> passe est utilisé par exemplelors <strong>de</strong> la ré-in<strong>de</strong>xation <strong>de</strong>s fichiers ou lors <strong>de</strong>l'ouverture <strong>de</strong>s fichiers avec l'outil WDMAP.Fichiers <strong>de</strong> données utilisateurCes fichiers sont les suivants :GPWUtilisateurGPWUtilisateurConfigurationGPWLogConnexionFichier <strong>de</strong>s utilisateurs. Contienttoutes les caractéristiques<strong>de</strong>s utilisateurs (login,nom, prénom, mot <strong>de</strong> passe,...).Fichier <strong>de</strong>s groupes d’utilisateursFichier contenant l'historique<strong>de</strong>s connexions. Ce fichier estprésent uniquement si l'historique<strong>de</strong>s connexions a été<strong>de</strong>mandé.Les rubriques <strong>de</strong> ces fichiers sont détaillées dansl’ai<strong>de</strong> en ligne.Où sont créés ces fichiers ?• Par défaut, ces fichiers <strong>de</strong> données (mo<strong>de</strong> Hyper-FileSQL Classic) sont créés dans un sous-répertoire<strong>de</strong> votre proj<strong>et</strong> (répertoire EXE\GPW_). Lors <strong>de</strong> l'intégration du groupwareutilisateur, vous pouvez spécifier un répertoiredifférent pour réaliser les tests <strong>de</strong> votre application.• Lors <strong>de</strong> la préparation <strong>de</strong> la procédure d’installation,il est possible <strong>de</strong> perm<strong>et</strong>tre à l'utilisateur <strong>de</strong>paramétrer l'emplacement <strong>de</strong> ces fichiers (planintitulé "Modules additionnels"). Il est ainsi possible<strong>de</strong> sélectionner un répertoire commun à plusieursapplications gérant le groupwareutilisateur.•Si l'option "Lancement manuel" a été sélectionnée,la fonction gpwOuvre perm<strong>et</strong> <strong>de</strong> lancer lafenêtre ou la page <strong>de</strong> login du groupware utilisateur,mais aussi <strong>de</strong> personnaliser le répertoire<strong>de</strong>s fichiers <strong>de</strong> données du groupware utilisateur.Quels que soient les répertoires indiqués dansles différentes étapes <strong>de</strong> la création <strong>et</strong> <strong>de</strong> l'installation<strong>de</strong> l'application, ce répertoire, s'il est précisé,sera pris en compte.Remarque : si aucun paramétrage spécifique n'esteffectué, les fichiers <strong>de</strong> données Utilisateur (mo<strong>de</strong>HyperFileSQL Classic) seront créés dans un sousrépertoire du répertoire d'installation <strong>de</strong> la bibliothèquenommé \GPW_.Fichiers <strong>de</strong> données <strong>de</strong>s droitsCes fichiers sont les suivants :GPWConfigurationFichier contenant les <strong>de</strong>scriptions<strong>de</strong>s configurations disponibles.Chaqueconfiguration est associée àun groupe d'utilisateurs.Etat <strong>de</strong> chaque élément <strong>de</strong>l'application pour chaqueconfiguration. Par exempleperm<strong>et</strong> <strong>de</strong> stocker si pour l'utilisateur"Secrétaire", l'option"Menu statistiques" doit êtregrisé ou non.Fichier content les différentséléments du site à configurer(champs <strong>de</strong>s pages, options<strong>de</strong> menu, ...).GPWConfigurationElémentGPWElémentLes rubriques <strong>de</strong> ces fichiers sont détaillées dansl’ai<strong>de</strong> en ligne.Où sont créés ces fichiers ?• Par défaut, ces fichiers <strong>de</strong> données (mo<strong>de</strong> Hyper-FileSQL Classic) sont créés dans un sous-répertoire<strong>de</strong> votre proj<strong>et</strong> (répertoire EXE\GPW_).• Lors <strong>de</strong> la préparation <strong>de</strong> la procédure d’installation,il est possible <strong>de</strong> perm<strong>et</strong>tre à l'utilisateur <strong>de</strong>paramétrer l'emplacement <strong>de</strong> ces fichiers (planintitulé "Modules additionnels"). Il est ainsi possible<strong>de</strong> sélectionner un répertoire spécifique pourles fichiers <strong>de</strong>s droits <strong>de</strong> l'application.• Si l'option "Lancement manuel" a été sélectionnée,la fonction gpwOuvre perm<strong>et</strong> <strong>de</strong> lancer lafenêtre ou la page <strong>de</strong> login du groupware utilisateur,mais aussi <strong>de</strong> personnaliser le répertoire<strong>de</strong>s fichiers <strong>de</strong> données du groupware utilisateur.Quels que soient les répertoires indiqués dansles différentes étapes <strong>de</strong> la création <strong>et</strong> <strong>de</strong> l'installation<strong>de</strong> l'application, ce répertoire, s'il est précisé,sera pris en compte.Remarque : si aucun paramétrage spécifique n'esteffectué, les fichiers <strong>de</strong> données <strong>de</strong>s droits serontcréés dans un sous répertoire du répertoire d'installation<strong>de</strong> l'exécutable nommé \GPW_.132Partie 4 : <strong>Concepts</strong> avancés
7 Modifier le groupware utilisateur7.1 Personnaliser les pages du groupwareLa page <strong>de</strong> loginLa page <strong>de</strong> login s’affichant pour tout utilisateurlançant votre application, il peut être nécessaire <strong>de</strong>la personnaliser. Si vous avez choisi d’intégrer c<strong>et</strong>tepage à votre proj<strong>et</strong>, vous pouvez simplement luiappliquer le style ou les gabarits utilisés pour votreapplication.Attention : il ne faut pas renommer c<strong>et</strong>te page.Toutes les pages du groupware utilisateurSi vous avez choisi d’intégrer toutes les pages dugroupware utilisateur, vous pouvez toutes les personnaliser.Cependant, seule la page <strong>de</strong> login seravisualisée par tous les utilisateurs. Les pages <strong>de</strong>configuration du groupware sont visualisées uniquementpar le superviseur <strong>de</strong> l’application.Attention : la page GPWLogin_WB ne doit pas êtrerenommée.7.2 Groupware utilisateur <strong>et</strong> applicationmultilingueSi votre application est multilingue, il est nécessaire<strong>de</strong> gérer c<strong>et</strong>te fonctionnalité également dansles pages du groupware utilisateur. Par défaut, lespages du groupware utilisateur gèrent l'anglais /américain <strong>et</strong> le français.Pour utiliser le groupware utilisateur dans uneapplication multilingue, il faut :1. Configurer le groupware utilisateur <strong>de</strong> la façonsuivante :• toutes les pages du groupware utilisateur doiventêtre intégrées dans l’application.• l’option "Lancement manuel" doit être sélectionnée.2. Traduire les différentes pages du groupware utilisateur.Par défaut, les pages du groupware utilisateursont disponibles en français <strong>et</strong> anglais. Pourtraduire ces pages dans d'autres langues, il suffit<strong>de</strong> traduire les différents libellés, ... (en utilisantl'outil WDMSG si nécessaire pour extraire les messagesà traduire).Rappel : WDMSG est un outil optionnel <strong>de</strong> WebDevperm<strong>et</strong>tant d'extraire <strong>et</strong> <strong>de</strong> ré-intégrer tous les messagesà traduire.3. Exécuter l’application dans la langue souhaitée.Pour cela, il est possible par exemple <strong>de</strong> :• Deman<strong>de</strong>r si nécessaire à l’utilisateur la languedans laquelle l’application doit s'exécuter (parune page spécifique par exemple).•Configurer la langue d’exécution <strong>de</strong> l’applicationavec la fonction Nation.• Ouvrir la première page <strong>de</strong> gestion du groupwareutilisateur avec la fonction gpwOuvre.Pour plus <strong>de</strong> détails sur les applications multilingues,consultez “Sites multilingues”, page 135.7.3 Modifier la première page <strong>de</strong> l’applicationen fonction <strong>de</strong> l’utilisateurPour changer la première page <strong>de</strong> l’application enfonction <strong>de</strong> l’utilisateur, il suffit d’utiliser la fonctiongpwRecupInfoUtilisateur dans le co<strong>de</strong> d’initialisation<strong>de</strong> votre proj<strong>et</strong>. C<strong>et</strong>te fonction perm<strong>et</strong> d’obtenir<strong>de</strong>s renseignements sur l’utilisateur comme parexemple son nom, ou son mot <strong>de</strong> passe.En fonction <strong>de</strong> son nom, il est possible par exempled’ouvrir une page ou une autre.Exemple :Si gpwRecupInfoUtilisateur(...gpwLogin) = "FP" ALORSOuvre("Fen_Gestion")SINONOuvre("Menu")FIN7.4 Lancer la page <strong>de</strong> login <strong>de</strong>puis unepage du siteLors <strong>de</strong> l'insertion du groupware utilisateur dansune application, il est possible <strong>de</strong> choisir ou non unlancement automatique du groupware. C<strong>et</strong>te optionest ensuite modifiable à tout moment.Par défaut (lancement automatique), la page <strong>de</strong>login est la première page <strong>de</strong> l'application. Elle estexécutée avec le co<strong>de</strong> d'initialisation du proj<strong>et</strong>.Dans certains cas, il est nécessaire d'ouvrir unepage <strong>de</strong> configuration avant la page <strong>de</strong> login. Il suffitpour cela <strong>de</strong> :1. Sélectionner l'option "Lancement manuel".2. Ouvrir la page <strong>de</strong> login à n'importe quel endroitdu co<strong>de</strong> avec la fonction gpwOuvre.7.5 Configurer les fichiers <strong>de</strong> données dugroupware utilisateurDeux types <strong>de</strong> fichiers <strong>de</strong> données sont utilisés parle groupware utilisateur :• fichiers <strong>de</strong> données <strong>de</strong>s utilisateurs.• fichiers <strong>de</strong> données <strong>de</strong>s droits.Partie 4 : <strong>Concepts</strong> avancés 133
L'emplacement <strong>de</strong> ces fichiers <strong>de</strong> données peutêtre configuré :•lors <strong>de</strong> l'insertion du groupware utilisateur pourles tests• lors <strong>de</strong> la création <strong>de</strong> l'exécutable• lors <strong>de</strong> l'installation <strong>de</strong> l'application (par la personneexécutant l'installation)• par programmation.Pour plus <strong>de</strong> détails, consultez “Les fichiers <strong>de</strong> données”,page 131.7.6 Ré-initialiser les fichiers <strong>de</strong> données dugroupware utilisateurPour ré-initialiser les fichiers <strong>de</strong> données du groupwareutilisateur, il suffit <strong>de</strong> supprimer les fichiers<strong>de</strong> données spécifiques au groupware utilisateur(fichier <strong>de</strong>s utilisateurs <strong>et</strong> fichier <strong>de</strong>s droits). Cesfichiers sont automatiquement re-créés au lancement<strong>de</strong> l'application.Remarque :• Si seuls les fichiers utilisateur sont supprimés(GPWUtilisateurConfiguration <strong>et</strong> GPWUtilisateur),seul le superviseur pourra lancer l'application.• Si seuls les fichiers <strong>de</strong>s droits sont supprimés(GPWConfigurationElément, GPWConfiguration <strong>et</strong>GPWElément), tous les utilisateurs auront tousles droits sur toute l'application.Pour plus <strong>de</strong> détails sur les différents types <strong>de</strong>fichiers gérés par le groupware utilisateur, consultez“Les fichiers <strong>de</strong> données”, page 131.7.7 Modifier les fichiers <strong>de</strong> données utiliséspar le groupware utilisateurIl est impossible <strong>de</strong> modifier la structure <strong>de</strong>sfichiers <strong>de</strong> données spécifiques au groupware utilisateur.Remarque : Ces fichiers contiennent <strong>de</strong>s informationsconfi<strong>de</strong>ntielles <strong>et</strong> sont donc cryptés.7.8 Gestion <strong>de</strong>s analysesSi une analyse spécifique est ouverte lors du paramétragedu groupware utilisateur, il est nécessaire<strong>de</strong> ré-exécuter la fonction gpwInitAnalyse (perm<strong>et</strong>l’ouverture <strong>de</strong> l’analyse du groupware utilisateur).Rappel : En exécution, il n’est pas possible d’ouvrirsimultanément plusieurs analyses.134Partie 4 : <strong>Concepts</strong> avancés
SitesmultilinguesWebDev perm<strong>et</strong> <strong>de</strong> créer très rapi<strong>de</strong>ment <strong>de</strong>s sites multilingues à partir d’un même proj<strong>et</strong>.Partie 4 : <strong>Concepts</strong> avancés 135
Sites multilingues en pratique1 PrésentationUn site multilingue pourra être diffusé dans plusieurslangues. Les différentes langues du siteseront prises en compte lors <strong>de</strong>s différentes étapesdu développement.Pour développer un site mutlilingue, les étapessont les suivantes :1. Choix <strong>de</strong>s langues gérées par le proj<strong>et</strong> <strong>et</strong> l'analyse.2. Saisie <strong>de</strong>s différents éléments du proj<strong>et</strong> (pages,co<strong>de</strong>, ...) dans les différentes langues du proj<strong>et</strong>.3. Détermination <strong>de</strong> la langue du proj<strong>et</strong> par programmation.4. Gestion <strong>de</strong>s alphab<strong>et</strong>s spécifiques dans lesfichiers <strong>de</strong> données.5. Création <strong>de</strong> la bibliothèque <strong>et</strong> du programmed'installation.Remarques :•Si le système d’exploitation du poste en coursgère plusieurs langues (Hébreux, Arabe, Grec, ...),lors <strong>de</strong> la saisie <strong>de</strong>s traductions dans ces langues,l’alphab<strong>et</strong> correspondant sera automatiquementutilisé.•Si votre site est multilingue, il est nécessaire <strong>de</strong>gérer c<strong>et</strong>te fonctionnalité dans les pages du groupwareutilisateur, <strong>et</strong> les pages <strong>de</strong> gestion automatiques<strong>de</strong>s erreurs HyperFileSQL. Pour plus <strong>de</strong>détails, consultez l’ai<strong>de</strong> en ligne.•La gestion <strong>de</strong> l’Unico<strong>de</strong> est disponible dans lesfichiers HyperFileSQL, les champs <strong>de</strong>s pages.2 Choix <strong>de</strong>s langues gérées par le proj<strong>et</strong> <strong>et</strong> l’analyse2.1 Langues gérées par le proj<strong>et</strong>Les différentes langues gérées par le proj<strong>et</strong> sontdéfinies dans la <strong>de</strong>scription du proj<strong>et</strong> (option"Proj<strong>et</strong> .. Description du proj<strong>et</strong> .. Langues").Les différentes langues sélectionnées seront proposéespour toutes les informations <strong>de</strong>s différentséléments ou obj<strong>et</strong>s pouvant être traduites (libellés<strong>de</strong>s champs, options <strong>de</strong> menus, messages d'ai<strong>de</strong>associés à un champ, ...).Lors <strong>de</strong> la modification <strong>de</strong>s différentes langues duproj<strong>et</strong>, les modifications seront automatiquementprises en compte :• pour tout nouvel élément ou obj<strong>et</strong> créé sous l'éditeur<strong>de</strong> WebDev,• pour tout élément ou obj<strong>et</strong> ouvert sous l'éditeur<strong>de</strong> WebDev.La langue principale correspond à la langue utiliséepar défaut en exécution.Options linguistiquesIl est possible <strong>de</strong> paramétrer l'affichage <strong>de</strong>s différentesdonnées numériques du proj<strong>et</strong> (nombre,monétaire, date, ...) dans chaque langue gérée parle proj<strong>et</strong>.Par défaut, les paramètres utilisés sont ceux définisdans les options linguistiques <strong>de</strong> Windows(accessible <strong>de</strong>puis le panneau <strong>de</strong> configuration <strong>de</strong>Windows).Ce paramétrage s'effectue dans l'ongl<strong>et</strong> "Langues"<strong>de</strong> la <strong>de</strong>scription du proj<strong>et</strong> (option "Proj<strong>et</strong> .. Descriptiondu proj<strong>et</strong>").Lors <strong>de</strong> la création d'un champ <strong>de</strong> saisie ou d'unecolonne <strong>de</strong> table affichant <strong>de</strong>s données <strong>de</strong> typenumérique (nombre, monétaire, date, heure, durée,...) le masque <strong>de</strong> saisie utilisé sera automatiquementle masque défini dans les options <strong>de</strong> languedu proj<strong>et</strong>. C<strong>et</strong>te option est disponible dans lespages.En exécution, lorsqu’un champ <strong>de</strong> saisie ou unecolonne <strong>de</strong> table a pour masque "Défini par le proj<strong>et</strong>",le masque <strong>de</strong> saisie / d'affichage s'adapteraautomatiquement selon les options choisies dansle proj<strong>et</strong> pour la langue affichée en exécution.Remarque : Les options linguistiques perm<strong>et</strong>tentégalement <strong>de</strong> définir le sens d'écriture <strong>et</strong> l'alphab<strong>et</strong>utilisé (option "divers").136Partie 4 : <strong>Concepts</strong> avancés
2.2 Langues gérées par l'analyseSi votre proj<strong>et</strong> utilise une analyse, le choix <strong>de</strong>s différenteslangues gérées par l'analyse se fait directementsous l'éditeur d'analyses. En eff<strong>et</strong>, une mêmeanalyse peut être partagée entre différents proj<strong>et</strong>sne proposant pas tous les mêmes langues. Ainsi, lenombre <strong>de</strong> langues défini pour l'analyse peut êtresupérieur à celui défini pour le proj<strong>et</strong>.La configuration <strong>de</strong>s différentes langues gérées parl'analyse est effectuée par l'option "Analyse .. Description<strong>de</strong> l'analyse .. International".Les différentes langues configurées dans l'analyseseront proposées :•lors <strong>de</strong> la configuration <strong>de</strong>s informations partagées<strong>de</strong>s rubriques. Vous pouvez saisir la <strong>de</strong>scription<strong>de</strong>s champs liés aux rubriques (options,libellés, ...) dans les différentes langues géréespar l'analyse. Lors <strong>de</strong> la génération d'un "RADapplication complète" ou d'un RAD page, cesinformations seront automatiquement prises encompte pour toutes les langues communes àl'analyse <strong>et</strong> au proj<strong>et</strong>.• pour les informations imprimées dans le dossier<strong>de</strong> l'analyse (notes du fichier ou <strong>de</strong> la rubrique).• pour les informations gérées par "Etats <strong>et</strong> Requêtes".2.3 Langues gérées par les différents élémentsdu proj<strong>et</strong>Par défaut, les différents éléments du proj<strong>et</strong>(pages, états, co<strong>de</strong>, classes, collections <strong>de</strong> procédures,...) gèrent les mêmes langues que le proj<strong>et</strong>dans lequel ils ont été créés.Il est possible qu'un élément gère plus <strong>de</strong> languesque le proj<strong>et</strong> (cas par exemple ou l'élément est partagéentre plusieurs proj<strong>et</strong>s gérant <strong>de</strong>s langues différentes).3 Saisie <strong>de</strong> l’interface dans les différentes languesLorsque les différentes langues gérées par le proj<strong>et</strong>ont été sélectionnées, il est nécessaire <strong>de</strong> saisirtoutes les informations affichées par le site dansces différentes langues.Pour saisir l'interface dans différentes langues, plusieurséléments doivent être pris en compte :• Le mo<strong>de</strong> <strong>de</strong> traduction choisi.• Les langues gérées (langues utilisant un alphab<strong>et</strong>spécifique ou non)• L'utilisation <strong>de</strong> pages spécifiques (groupware utilisateur,Gestion automatique <strong>de</strong>s erreurs Hyper-FileSQL)• Les messages affichés par programmation.3.1 Mo<strong>de</strong> <strong>de</strong> traduction choisiWebDev propose plusieurs mo<strong>de</strong>s <strong>de</strong> traduction :• Traduction automatique <strong>de</strong>s interfaces à l'ai<strong>de</strong>d'un outil <strong>de</strong> traduction spécifique, présent sur leposte <strong>de</strong> développement. C<strong>et</strong>te traduction estréalisée directement sous l'éditeur <strong>de</strong> WebDev.• Export <strong>de</strong> tous les messages à traduire à l'ai<strong>de</strong><strong>de</strong> WDMSG <strong>et</strong> réintégration après traduction.Traduction automatique <strong>de</strong>s interfacesPour chaque obj<strong>et</strong>, différentes zones multilinguessont affichées dans les fenêtres <strong>de</strong> <strong>de</strong>scription <strong>de</strong>l'obj<strong>et</strong>. Ces zones multilingues perm<strong>et</strong>tent <strong>de</strong> saisirles informations dans les différentes languesgérées par le proj<strong>et</strong>.Pour traduire ces informations <strong>de</strong>puis WebDev :1. Configurez les options <strong>de</strong> traduction du logicielutilisé (option "Outils .. Options <strong>de</strong> WebDev .. Traduction").Ces options perm<strong>et</strong>tent <strong>de</strong> définir :•l'outil <strong>de</strong> traduction par défaut (<strong>et</strong> les modalités<strong>de</strong> transmission du texte à traduire <strong>et</strong> du text<strong>et</strong>raduit)•les langues source <strong>et</strong> <strong>de</strong>stination <strong>de</strong> la traduction.2. Si un outil <strong>de</strong> traduction est précisé, dans chaqueélément contenant <strong>de</strong>s informations à traduire,un bouton "Traduire" sera affiché. Ce boutonperm<strong>et</strong>tra <strong>de</strong> traduire le texte sélectionné en utilisantl'outil <strong>de</strong> traduction spécifié.3. Pour effectuer la traduction, il suffit <strong>de</strong> sélectionnerle texte à traduire <strong>et</strong> cliquer sur le bouton "Traduire".Export <strong>et</strong> réintégration <strong>de</strong>s informationsà traduireL'outil WDMSG, disponible séparément, perm<strong>et</strong>d'extraire tous les messages d'un proj<strong>et</strong> (libellé <strong>de</strong>schamps, ...), puis <strong>de</strong> les réintégrer après traduction.Contactez le service commercial <strong>de</strong> PC SOFT pour plus<strong>de</strong> détails sur les conditions d'utilisation <strong>de</strong> ce produit.Partie 4 : <strong>Concepts</strong> avancés 137
3.2 Langues utilisant un alphab<strong>et</strong> spécifiqueSi votre site gère <strong>de</strong>s langues utilisant <strong>de</strong>s alphab<strong>et</strong>sspécifiques (Grec, Russe, ...), il est nécessaire<strong>de</strong> saisir la traduction <strong>de</strong>s différents messagesmultilingues en utilisant ces alphab<strong>et</strong>s spécifiques.WebDev perm<strong>et</strong> <strong>de</strong> gérer automatiquement l'utilisation<strong>de</strong>s alphab<strong>et</strong>s spécifiques sous l'éditeur.En eff<strong>et</strong>, dès que le car<strong>et</strong> (curseur <strong>de</strong> saisie <strong>de</strong> lasouris) est positionné dans une zone <strong>de</strong> saisied'une langue utilisant un alphab<strong>et</strong> spécifique, lalangue d'entrée (alphab<strong>et</strong> utilisé par le clavier) correspondanteest automatiquement activée.Ainsi, si vous saisissez un libellé dans la zoneRusse <strong>de</strong> la <strong>de</strong>scription du libellé, l'alphab<strong>et</strong> utilisépar le clavier sera automatiquement le russe.Rappel : Pour utiliser <strong>de</strong>s alphab<strong>et</strong>s spécifiques, ilest nécessaire d'Installer les fichiers correspondantsaux alphab<strong>et</strong>s voulus dans les options régionales<strong>de</strong> Windows (panneau <strong>de</strong> configuration).3.3 Traductions <strong>de</strong>s pages spécifiquesGestion <strong>de</strong>s erreurs HyperFileSQLPar défaut, les pages <strong>de</strong> gestion <strong>de</strong>s erreurs Hyper-FileSQL sont fournies en anglais <strong>et</strong> en français.Pour les traduire dans une autre langue, il estnécessaire <strong>de</strong> :1. Intégrer les pages d'erreur par défaut dans votreproj<strong>et</strong>. Les pages sont fournies (avec leur co<strong>de</strong>WLangage) à titre d'exemple dans le répertoire\Programmes\Données\Pages prédéfinies\Hyper-FileSQL - Pages assistance automatique.2. Personnaliser la gestion <strong>de</strong>s erreurs pour utiliserles pages HyperFileSQL <strong>de</strong> gestion <strong>de</strong>s erreurs(fonction HSurErreur).3. Traduire les différents messages (voir paragrapheprécé<strong>de</strong>nt).Groupware utilisateurPar défaut, le groupware utilisateur est livré enanglais <strong>et</strong> en français.Pour traduire un site utilisant le groupware utilisateur,il est nécessaire <strong>de</strong> choisir le mo<strong>de</strong> "Personnalisé"lors <strong>de</strong> l'intégration du groupware utilisateurdans votre site (option "Atelier .. Paramétrer le groupwareutilisateur").Les différentes pages du groupware utilisateurseront intégrées dans votre proj<strong>et</strong>.Il ne restera plus qu'à traduire ces pages.Remarque : Si nécessaire, décochez l'option "lancementautomatique" : vous pourrez ainsi afficherune page <strong>de</strong> sélection <strong>de</strong> langue avant <strong>de</strong> lancer lapage <strong>de</strong> login.3.4 Traduction <strong>de</strong>s messages présents dansle co<strong>de</strong> WLangageDans votre co<strong>de</strong>, diverses fonctions du WLangagevous perm<strong>et</strong>tent <strong>de</strong> communiquer avec l’internauteau moyen <strong>de</strong> chaînes <strong>de</strong> caractères. Ces messagesdoivent être eux aussi traduits dans les différenteslangues <strong>de</strong> votre site.Pour traduire une chaîne <strong>de</strong> caractères saisie dansl'éditeur <strong>de</strong> co<strong>de</strong> :1. Sélectionnez la chaîne <strong>de</strong> caractères à traduire.2. Dans le menu contextuel <strong>de</strong> la sélection, choisissezl'option "Traduire". La fenêtre <strong>de</strong> traduction <strong>de</strong>smessages s'affiche.3. Saisissez la traduction <strong>et</strong> vali<strong>de</strong>z. La ligne <strong>de</strong>co<strong>de</strong> apparaît sous l'éditeur <strong>de</strong> co<strong>de</strong> :Le drapeau indique que <strong>de</strong>s traductions existentpour c<strong>et</strong>te chaîne <strong>de</strong> caractères. Pour afficher lafenêtre <strong>de</strong> traduction, il suffit <strong>de</strong> cliquer sur ce drapeau.Le chiffre (2 dans notre exemple) indique le nombre<strong>de</strong> traductions saisies pour c<strong>et</strong>te chaîne <strong>de</strong> caractères.Remarque : Pour transformer tous les messages<strong>de</strong> votre co<strong>de</strong> en messages multilingues, sélectionnezl’option "Co<strong>de</strong> .. Messages multilingues .. Convertirles cha înes simples en messa gesmultilingues".4 Choix <strong>de</strong> la langue par programmationUne application multilingue est une application quipourra être diffusée dans plusieurs langues. L'utilisateurpourra choisir la langue d'exécution <strong>de</strong>l'application. Il est possible par exemple :•<strong>de</strong> <strong>de</strong>man<strong>de</strong>r la langue d'exécution au premierlancement <strong>de</strong> l'application• <strong>de</strong> prévoir une option (option <strong>de</strong> menu par exemple,ou bouton) perm<strong>et</strong>tant à l'utilisateur <strong>de</strong> changer<strong>de</strong> la ngue en cours d'exécution <strong>de</strong>l'application138Partie 4 : <strong>Concepts</strong> avancés
10 conseilsd’ergonomie ...1 Soignez l’accueil dans votre site.La page d’accueil est un élément capital d’un site. Dans certains sites, elle se résume àun formulaire <strong>de</strong> connexion mais dans la majorité <strong>de</strong>s sites Intern<strong>et</strong>, c’est véritablementla page d’accroche avec le visiteur (<strong>et</strong> futur client du site). Son contenu <strong>et</strong> sa présentationdoivent être spécialement étudiés. N’hésitez pas à lire <strong>de</strong>s ouvrages spécialisés sur l’ergonomie<strong>de</strong>s sites web pour vous y ai<strong>de</strong>r.2 Présentez-vous.Lorsque l’internaute arrive sur un site, il doit facilement i<strong>de</strong>ntifier la personne ou la sociétéresponsable du site par un choix <strong>de</strong> la page d’accueil : il suffit d’indiquer un nom,une adresse postale <strong>et</strong> une adresse intern<strong>et</strong>, ...D’autres informations sont utiles :• l’administrateur physique <strong>de</strong> la société, numéro RCS <strong>de</strong> la société ...• les informations <strong>de</strong> déclaration à la CNIL pour les sites collectant <strong>de</strong>s informationspersonnelles sur leurs utilisateurs.• la date <strong>de</strong> réalisation du site ou <strong>de</strong> <strong>de</strong>rnière mise à jour.• le thème du site, son contenu <strong>et</strong> sa finalité.Partie 4 : <strong>Concepts</strong> avancés 139
3 Vos pages sont très longues ? Perm<strong>et</strong>tez à l’internaute <strong>de</strong> r<strong>et</strong>ourner directementen haut <strong>de</strong> page.Lorsque vos pages sont très longues (plus <strong>de</strong> 2 écrans), utilisez <strong>de</strong>s boutons ou <strong>de</strong>s lienspour r<strong>et</strong>ourner rapi<strong>de</strong>ment en haut <strong>de</strong> la page (<strong>et</strong> éviter l’utilisation <strong>de</strong> l’ascenseur).Début <strong>de</strong> la pageFin <strong>de</strong> la page avec un lienperm<strong>et</strong>tant <strong>de</strong> revenir en haut <strong>de</strong> page4 Harmonisez le style <strong>et</strong> l’alignement <strong>de</strong> vos boutons.Vérifiez que vos boutons utilisent tous le même "look", <strong>et</strong> vérifiez l’alignement <strong>de</strong> vos boutons.L’éditeur <strong>de</strong> page dispose d’un système <strong>de</strong> magnétisme <strong>et</strong> d’alignement automatiquepour faciliter c<strong>et</strong>te tâche.Boutons non alignés,utilisant différents stylesBoutons alignés<strong>et</strong> harmonisés5 Evitez l’utilisation <strong>de</strong> frames<strong>et</strong>s.Les frames<strong>et</strong>s, même s’ils semblent être une approche efficace au premier abord souffrent<strong>de</strong> problèmes particuliers : ils sont composés en fait <strong>de</strong> plusieurs pages. Leur référencementauprès <strong>de</strong>s moteurs <strong>de</strong> recherche est plus difficile. La navigation (notammentl’emploi <strong>de</strong> la touche "Back" du navigateur) est difficile à comprendre pour les utilisateurs.Il est aujourd’hui recommandé d’éviter <strong>de</strong> développer <strong>de</strong>s sites en utilisant <strong>de</strong>s frames<strong>et</strong>s.140Partie 4 : <strong>Concepts</strong> avancés
6 Vous affichez <strong>de</strong>s listes <strong>de</strong> plus <strong>de</strong> 20 éléments ? Utilisez plusieurs pages pourlister les éléments.Le champ régl<strong>et</strong>te vous perm<strong>et</strong>tra <strong>de</strong> passer d’une page à l’autre sans avoir <strong>de</strong> co<strong>de</strong> àécrire <strong>et</strong> l’interface globale <strong>de</strong> votre site sera moins chargée. Le site sera <strong>de</strong> ce fait plusagréable <strong>et</strong> plus rapi<strong>de</strong> à consulter.7 Utilisez <strong>de</strong>s images à 100% ou Homothétiques centrées.Pour conserver les proportions <strong>de</strong> vos images, il est conseillé <strong>de</strong> choisir :• soit <strong>de</strong>s images à 100% (pour les images statiques ou dynamiques ou si l’image est<strong>de</strong> taille i<strong>de</strong>ntique à celle du champ).• soit <strong>de</strong>s images homothétiques centrées (pour les images générées ou les images <strong>de</strong>taille variée provenant d’une base <strong>de</strong> données) : la taille <strong>de</strong> l’image s’adapterahomothétiquement à la zone définie pour l’image. Les proportions seront respectées.Image à 100 % si ladimension du champcorrespond à celle <strong>de</strong>l’image, sinon imageHomothétiqueImage étirée(déconseillé)Sélection du mo<strong>de</strong>d’affichage sous l’éditeur(<strong>de</strong>scription <strong>de</strong> l’image,ongl<strong>et</strong> "Général")Partie 4 : <strong>Concepts</strong> avancés 141
8 Vous utilisez <strong>de</strong>s images ? Testez leur bon affichage dans vos pages.Image sous l’éditeurImage sous le navigateur.Problème d’affichage <strong>de</strong>simagesEn cas <strong>de</strong> problème d’affichage, vérifiez principalement que :• l’ima ge existe,• l’image est enregistrée dans un format reconnu par le navigateur (GIF ou JPG parexemple),• l’image est présente dans le sous-répertoire du proj<strong>et</strong> _WEB.9 L’internaute doit saisir une quantité ? Utilisez une combo pour simplifier la saisie<strong>de</strong>s quantités.10 Vous proposez un catalogue <strong>de</strong> produits avec possibilité <strong>de</strong> comman<strong>de</strong>r ?Indiquez toutes les informations sur le produit (nom, référence, prix, ...) à chaque fois, ycompris le bouton ou le lien perm<strong>et</strong>tant <strong>de</strong> comman<strong>de</strong>r le produit.142Partie 4 : <strong>Concepts</strong> avancés
Positionner les champsdans une pageWebDev offre plusieurs métho<strong>de</strong>s pour optimiser le positionnement <strong>de</strong>s champs dansles pages :• les tables <strong>de</strong> positionnement• les règles <strong>et</strong> la grilleLes tables <strong>de</strong> positionnementLes tables <strong>de</strong> positionnement sont le moyen le plus courant pour aligner <strong>de</strong>s champsdans une page HTML. Elles perm<strong>et</strong>tent également <strong>de</strong> créer <strong>de</strong>s bas <strong>de</strong> page.Pour activer la visualisation <strong>de</strong>s tables <strong>de</strong> positionnement, utilisez l’option "Affichage ..Visualisation du tableau <strong>de</strong> positionnement".Les règles <strong>et</strong> la grilleLes règles d’alignement comme la grille magnétique perm<strong>et</strong>tent d’aligner simplementles champs d’une page.Les règles sont affichables grâce au menu "Affichage .. Règles".La grille est activable grâce au menu "Affichage .. Grille".Partie 4 : <strong>Concepts</strong> avancés 143
Superposerles champsPour obtenir <strong>de</strong>s eff<strong>et</strong>s <strong>de</strong> transparence ou <strong>de</strong> profon<strong>de</strong>ur, superposez vos champs.Chaque champ possè<strong>de</strong> une option "Le champ peut être superposé" (ongl<strong>et</strong> "Détail" <strong>de</strong>la fenêtre <strong>de</strong> <strong>de</strong>scription du champ).En cochant c<strong>et</strong>te option, le champ n’est plus lié aux tables <strong>de</strong> positionnement <strong>de</strong> la page.Vous pouvez déplacer <strong>et</strong> positionner un champ "au-<strong>de</strong>ssus" <strong>de</strong> chacun <strong>de</strong>s champs <strong>de</strong>votre page.Attention : Le champ avec l’option "Ce champ peut être superposé" passera au-<strong>de</strong>ssus<strong>de</strong>s autres champs. Si plusieurs champs ont c<strong>et</strong>te option activée, leur ordre d’empilementpeut être défini grâce aux options "Monter", "Descendre", "Premier plan" <strong>et</strong> "Arrièreplan" du menu "Champ".Par exemple, pour superposer un libellé sur une image, il faut rendre le libellé superposable<strong>et</strong> positionner le libellé sur l’image.Sous l’éditeurSous le navigateurRemarque : La superposition ne fonctionne pas sur les navigateurs très anciens (antérieursà Intern<strong>et</strong> Explorer version 4 ou N<strong>et</strong>scape 4.7).144Partie 4 : <strong>Concepts</strong> avancés
Type d’image : dynamique,statique, générée, ... ?Les images sont souvent utilisées pour illustrer les pages <strong>de</strong>s sites.Différents types d’images peuvent être utilisés avec WebDev. Chaque type correspond àune utilisation spécifique <strong>de</strong> l’image.Voici un récapitulatif <strong>de</strong>s caractéristiques <strong>de</strong> ces images <strong>et</strong> <strong>de</strong> leur mo<strong>de</strong> d’utilisation.Conseil : Privilégiez toujours un affichage homothétique pour les images provenant d’unebase <strong>de</strong> données.Partie 4 : <strong>Concepts</strong> avancés 145
Type <strong>de</strong> l’imageStatiqueImage non modifiée pendant l’utilisationdu site (logo <strong>de</strong> lasociété, ...)Image modifiée uniquement dansun co<strong>de</strong> navigateur (image sélectionnéepar un champ Upload).DynamiqueImage modifiée pendant l’utilisationdu site (image du produitdans une fiche, photo dans un annuaire,...)C’est le type d’image le plus souventutilisé.GénéréeImage <strong>de</strong>ssinée pendant l’utilisationdu site :- graphes (fonctions grXXX)- <strong>de</strong>ssins (fonctions dXXX)Il est possible d’utiliser une image<strong>de</strong> fond.Depuis une base <strong>de</strong>donnéesImages <strong>de</strong> produits affichéesdans une zone répétéeCaractéristiquesL’image associée à une image statique doit être sélectionnéesous l’éditeur WebDev.C<strong>et</strong>te image pourra être changée en programmation uniquementdans un co<strong>de</strong> navigateur.Les formats d’image reconnus par WebDev sont autorisés.Lors <strong>de</strong> l’enregistrement <strong>de</strong> la page, l’image est automatiquementconvertie au format GIF, JPEG ou PNG, <strong>et</strong> enregistréedans le répertoire _WEB (sauf si l’image est déjàau format GIF ou JPEG).Lors du déploiement du site WebDev :- le fichier associé à l’image doit être présent sur le serveur.- si l’image est changée dans un co<strong>de</strong> navigateur, la nouvelleimage doit être accessible <strong>et</strong> dans un format reconnupar le navigateur.Une image dynamique peut être changée par programmationdans un co<strong>de</strong> serveur ou dans un co<strong>de</strong> navigateur.L’image associée au champ par programmation doit être :- présente dans le répertoire _WEB.- dans un format reconnu par le navigateur (GIF, JPEG ouautre)Attention : l’utilisation <strong>de</strong> mémos binaires n’est pas possible.Une image générée est construite au cours <strong>de</strong> l’utilisation dusite dynamique WebDev.Il est déconseillé d’utiliser ce type d’image pour afficher <strong>de</strong>sfichiers <strong>de</strong> type "image" existants : les performances <strong>de</strong> votresite risquent d’être réduites.Quand le navigateur <strong>de</strong>man<strong>de</strong> l’affichage <strong>de</strong> l’image (lors <strong>de</strong>l’affichage ou <strong>de</strong> la réactualisation <strong>de</strong> la page par exemple),une image temporaire du <strong>de</strong>ssin en cours est réalisée sur leserveur <strong>et</strong> enregistrée au format JPG. C<strong>et</strong>te image est affichéesur le navigateur.Ces images sont enregistrées dans <strong>de</strong>s mémos binaires (mémo)ou dans <strong>de</strong>s champs texte (chemin).Il est conseillé d’utiliser une image Homothétique centrée :toutes les images affichées seront redimensionnées proportionnellementafin d’être affichées dans le champ image.146Partie 4 : <strong>Concepts</strong> avancés
Personnaliser l’aspect d’unsite : éléments d’ambianceL’aspect graphique d’un site web est un élément primordial. Avec WebDev, il est très faciled’obtenir du premier coup un site graphiquement abouti avec un aspect professionnel.Pour cela, différents outils sont à votre disposition : les ambiances, les pal<strong>et</strong>tes <strong>et</strong>les modèles <strong>de</strong> pages prédéfinis.AmbianceL’ambiance d’un site peut être sélectionnée dans la fenêtre <strong>de</strong>s propriétés du proj<strong>et</strong> (option"Proj<strong>et</strong> .. Description du proj<strong>et</strong>"). Les ambiances sont configurées dans l’ongl<strong>et</strong> "Style".De nombreuses ambiances sont livrées en standard avec WebDev.Une ambiance est composée <strong>de</strong> :• une feuille <strong>de</strong> styles contenant <strong>de</strong>s styles WebDev.• un répertoire d'images.• une pal<strong>et</strong>te <strong>de</strong> couleurs par défaut.• un ensemble d'états utilisé comme base pour construire les nouveaux états du proj<strong>et</strong>.Les ambiances peuvent être interchangées à volonté pour modifier l’aspect graphiqued’un site. Lorsque vous changez l’ambiance, WebDev adapte automatiquement l’aspectvisuel <strong>de</strong> tous les champs du site.Partie 4 : <strong>Concepts</strong> avancés 147
L’ambiance d’une page peut être définie à trois niveaux différents (par ordre décroissant<strong>de</strong> priorité) :• Dans le proj<strong>et</strong>.• Dans le modèle <strong>de</strong> pages dont la page hérite <strong>de</strong>s propriétés.• Dans la page elle-même.Il faut définir l’ambiance générale au niveau du proj<strong>et</strong>. Si un ensemble <strong>de</strong> pages doit utiliserune ambiance particulière (par exemple les pages <strong>de</strong> "Promotion" d'un site <strong>de</strong> vente),il est possible <strong>de</strong> remplacer l’ambiance du proj<strong>et</strong> en la redéfinissant au niveau d'unmodèle <strong>de</strong> pages. Si une page particulière doit avoir une ambiance différente, celle-cipeut être choisie au niveau <strong>de</strong> la page elle-même.Les pal<strong>et</strong>tes <strong>de</strong> couleurLes pal<strong>et</strong>tes <strong>de</strong> couleurs définissent un jeu <strong>de</strong> couleurs qui sont proposées dans tous lessélecteurs <strong>de</strong> couleurs du proj<strong>et</strong>. Les pal<strong>et</strong>tes <strong>de</strong> couleurs sont un moyen simple <strong>de</strong> personnaliserl'aspect visuel d'un site.Ces couleurs sont également appliquées sur les styles définis dans l'ambiance du proj<strong>et</strong>afin <strong>de</strong> perm<strong>et</strong>tre <strong>de</strong> changer rapi<strong>de</strong>ment <strong>et</strong> facilement l'aspect visuel d'un proj<strong>et</strong>.La pal<strong>et</strong>te <strong>de</strong> couleurs d’une page peut être définie à trois niveaux différents (par ordredécroissant <strong>de</strong> priorité) :• Dans le proj<strong>et</strong>.• Dans le modèle <strong>de</strong> page dont la page hérite <strong>de</strong>s propriétés.• Dans la page elle-même.Il faut définir la pal<strong>et</strong>te générale au niveau du proj<strong>et</strong>. Si un ensemble <strong>de</strong> pages doit utiliserune pal<strong>et</strong>te particulière (par exemple les pages <strong>de</strong> la partie "Administration" d'un site),il est possible <strong>de</strong> remplacer la pal<strong>et</strong>te du proj<strong>et</strong> en la redéfinissant au niveau d'unmodèle <strong>de</strong> pages. Enfin, si une page particulière doit avoir une pal<strong>et</strong>te différente, la pal<strong>et</strong>tepeut être choisie au niveau <strong>de</strong> la page elle-même.Les modèles <strong>de</strong> pages prédéfinisLes modèles <strong>de</strong> pages prédéfinis fournissent <strong>de</strong>s structures <strong>de</strong> pages correspondant àune gran<strong>de</strong> variété <strong>de</strong> sites <strong>et</strong> favorisent la ré-utilisabilité <strong>et</strong> l'harmonie graphique entreles proj<strong>et</strong>s.De nombreux modèles sont livrés avec WebDev <strong>et</strong> <strong>de</strong> nouveaux modèles sont livrés régulièrementavec la LST.Il est possible d'ajouter plusieurs fois le même modèle prédéfini dans un proj<strong>et</strong> pour l'utiliseravec plusieurs ambiances ou plusieurs pal<strong>et</strong>tes <strong>de</strong> couleurs par exemple.Après avoir été ajouté au proj<strong>et</strong>, le modèle prédéfini peut être ouvert dans l'éditeur <strong>et</strong> modifiécomme n'importe quel autre modèle <strong>de</strong> pages.Un modèle <strong>de</strong> pages prédéfini peut également être utilisé comme base <strong>de</strong> création d'unautre modèle <strong>de</strong> pages.148Partie 4 : <strong>Concepts</strong> avancés
Choisir un type <strong>de</strong> bouton/lienSelon l’opération à effectuer sur les champs <strong>de</strong>la page, plusieurs types <strong>de</strong> bouton / lien sontdisponibles.Le choix du type <strong>de</strong> bouton / lien se fait dans la<strong>de</strong>scription du champ (ongl<strong>et</strong> "Général").Voici quelques exemples d’utilisation "classique" <strong>de</strong> boutons / liens dans une page :• Envoi <strong>de</strong>s données <strong>de</strong> la page en cours au serveur pourtraitementExemple : Formulaire d’enregistrement : le lien perm<strong>et</strong> <strong>de</strong>vérifier la validité <strong>de</strong>s informations saisies <strong>et</strong> d’afficher unepage <strong>de</strong> confirmation.Pour effectuer ce type <strong>de</strong> traitement, utilisez un lien <strong>de</strong> type"Envoyer la valeur <strong>de</strong>s champs au serveur". Les données <strong>de</strong>la page sont envoyées au serveur pour être traitées.• Effectuer un traitement sur le serveur, sans récupérer lesdonnées <strong>de</strong> la page en coursExemple : Page <strong>de</strong> menu constituée <strong>de</strong> boutons : chaquebouton perm<strong>et</strong> <strong>de</strong> lancer une page du site.Pour effectuer ce type <strong>de</strong> traitement, utilisez un bouton <strong>de</strong>type "Aucune".• Effectuer un traitement en co<strong>de</strong> navigateurExemple : Exécuter un calcul simple enlocal, un contrôle <strong>de</strong> saisie, ...Pour effectuer ce type <strong>de</strong> traitement,utilisez un bouton <strong>de</strong> type "Aucune".• Affichage d’une page extérieure au site WebDevExemple : Lancer un site <strong>de</strong> moteur <strong>de</strong> recherche à l’ai<strong>de</strong> d’un bouton.Pour effectuer ce type <strong>de</strong> traitement, utilisez un bouton <strong>de</strong> type "Aucune".• Réinitialiser les champs <strong>de</strong> la pageExemple : Lien perm<strong>et</strong>tant <strong>de</strong> vi<strong>de</strong>r les champs <strong>de</strong> la page en cours.Pour effectuer ce type <strong>de</strong> traitement, utilisez un lien <strong>de</strong> type "Ré-initialiser leschamps <strong>de</strong> la page".Partie 4 : <strong>Concepts</strong> avancés 149
Empêcher le r<strong>et</strong>our sur unepageLe bouton "Précé<strong>de</strong>nt" du navigateur perm<strong>et</strong> à l’internaute <strong>de</strong> revenir sur une page déjàconsultée. Cependant, le r<strong>et</strong>our sur une page n’est pas toujours souhaitable.Par exemple, dans un site commercial, si l’internaute revient sur la page <strong>de</strong> validation <strong>de</strong>comman<strong>de</strong>, il pourrait vali<strong>de</strong>r sa comman<strong>de</strong> 2 fois, <strong>et</strong> donc passer 2 comman<strong>de</strong>s.Pour empêcher le r<strong>et</strong>our sur une page par le bouton "Précé<strong>de</strong>nt" du navigateur :1. Affichez la page sous l’éditeur <strong>de</strong> pages <strong>de</strong> WebDev.2. Sélectionnez l’option "Affichage .. Description <strong>de</strong> la sélection". La fenêtre <strong>de</strong> <strong>de</strong>scription<strong>de</strong> la page s’affiche.3. Affichez l’ongl<strong>et</strong> "Détail".4. Cochez l’option "Empêcher le r<strong>et</strong>our sur c<strong>et</strong>te page par le bouton "Précé<strong>de</strong>nt" du navigateur".5. Vali<strong>de</strong>z.150Partie 4 : <strong>Concepts</strong> avancés
Avantage sécuritaire : lagestion du "Back"Un navigateur perm<strong>et</strong> <strong>de</strong> parcourir les différentes pages d’un site à l’ai<strong>de</strong> <strong>de</strong>s boutons"Suivant" ( ) <strong>et</strong> "Précé<strong>de</strong>nt" ( ) <strong>de</strong> son menu.A chaque nouvelle page dynamique affichée sur le navigateur, un contexte <strong>de</strong> page spécifiqueà son traitement est créé sur le serveur.Lorsqu’une même page dynamique est utilisée pour afficher <strong>de</strong>s données différentes(page avec table fichier, zones répétées ou page <strong>de</strong> type "Fiche avec parcours", ...), lecontexte <strong>de</strong> page présent sur le serveur varie en fonction <strong>de</strong>s données affichées.Lorsque l’internaute appuie sur le bouton "Précé<strong>de</strong>nt" (ou "Back"), le navigateur ne prévientni le site ni le serveur. Le navigateur revient à la page précé<strong>de</strong>nte sans le contextecorrespondant.Aucune gestion particulière n’est nécessaire lorsqu’on fait un "Back" entre <strong>de</strong>s pages différentes.Une gestion spécifique est nécessaire pour une même page dynamique affichant <strong>de</strong>sdonnées différentes.Pourquoi gérer le "Back" ? Un exemple simple ...Pour comprendre la nécessité <strong>de</strong> la gestion du "Back", étudions un exemple simple : unepage dynamique qui perm<strong>et</strong> d’afficher la liste <strong>de</strong>s lecteurs DVD-ROM disponibles.Etape 1 : Affichage <strong>de</strong> la liste <strong>de</strong>s DVD-ROMLe contexte contient la liste <strong>de</strong>s éléments affichés dans c<strong>et</strong>te table : lecteurs <strong>de</strong> DVDROM <strong>de</strong> la marque CREATIVE.Partie 4 : <strong>Concepts</strong> avancés 151
Etape 2 : Clic sur le lien "Périphériques suivants".Les périphériques <strong>de</strong> la marque "NEC" sont affichés. Le contexte <strong>de</strong> la page sur le serveurest mis à jour : le contexte contient la liste <strong>de</strong>s éléments affichés dans c<strong>et</strong>te table (lecteurs<strong>de</strong> DVD-ROM <strong>de</strong> la marque NEC).Etape 3 : Clic sur le bouton "Back" du navigateur.La page dynamique affichée sur le navigateur correspond à la page affichée à l’étape 1.Cependant le serveur n’est pas informé par le navigateur que l’internaute a utilisé la toucheBack. Le contexte <strong>de</strong> page sur le serveur est toujours celui correspondant aux enregistrements"NEC".Si l’internaute sélectionne dans la table un élément (DVD ROM <strong>de</strong> la marque "CREATI-VE"), l’élément sélectionné sera l’élément correspondant dans le contexte : un élémentNEC. Il y a désynchronisation entre la page dynamique visualisée <strong>et</strong> le contexte <strong>de</strong> pageprésent sur le serveur. Le moteur WebDev détecte c<strong>et</strong>te désynchronisation.Une gestion du bouton Back est nécessaire.152Partie 4 : <strong>Concepts</strong> avancés
Comment gérer le "Back" ?Pour gérer le "Back", vous pouvez utiliser :• le co<strong>de</strong> <strong>de</strong> synchronisation <strong>de</strong> la page dynamique. Ce co<strong>de</strong> est appelé en cas <strong>de</strong>désynchronisation.• un champ <strong>de</strong> saisie caché (champ <strong>de</strong> saisie invisible) pour i<strong>de</strong>ntifier l’enregistrementaffiché sur le navigateur.• l’option "Désactiver le mécanisme <strong>de</strong> synchronisation <strong>de</strong>s pages pour ce champ"sur vos boutons <strong>et</strong>/ou vos liens (ongl<strong>et</strong> "Avancé" <strong>de</strong> la <strong>de</strong>scription du bouton).Selon le type d’action pouvant être effectué dans la page dynamique, il est possible <strong>de</strong>choisir <strong>et</strong> <strong>de</strong> combiner l’une ou l’autre <strong>de</strong> ces options.Exemple détaillé <strong>de</strong> gestion du BackUne page dynamique perm<strong>et</strong> <strong>de</strong> parcourir les différents produits d’un site. Les boutonsprésents dans la page sont les suivants :• R<strong>et</strong>our au menu principalC<strong>et</strong>te action ne nécessite pas <strong>de</strong> gestion particulière du "Back". Ce bouton ne manipulepas les fichiers <strong>de</strong> données : une désynchronisation entre le contexte <strong>et</strong> la pageaffichée n’a pas d’influence.• Supprimer le produit en coursL’action "Supprimer le produit en cours" manipule un fichier <strong>de</strong> données. Il est importantque l’enregistrement supprimé correspon<strong>de</strong> à l’enregistrement visualisé parl’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’i<strong>de</strong>ntifiant<strong>de</strong> l’enregistrement réellement en cours sur le navigateur.- le co<strong>de</strong> <strong>de</strong> synchronisation : ce co<strong>de</strong> perm<strong>et</strong> <strong>de</strong> m<strong>et</strong>tre à jour le contexte (recherche<strong>de</strong> l’enregistrement visualisé par l’internaute).Les actions effectuées dans le co<strong>de</strong> <strong>de</strong> synchronisation seront :1. Relecture <strong>de</strong> l’enregistrement correspondant à l’i<strong>de</strong>ntifiant stocké dans lechamp caché.2. Si l’enregistrement n’est pas trouvé : une page d’erreur est affichée, <strong>et</strong> le co<strong>de</strong>du bouton "Supprimer" n’est pas exécuté.3. Si l’enregistrement est trouvé, le contexte <strong>de</strong> page est alors automatiquementmodifié sur le serveur : le co<strong>de</strong> du bouton "Supprimer" est exécuté.La sécurité totale !L’exemple "Annuaire" livré avec WebDev illustre le cas présenté dans c<strong>et</strong>te page.Partie 4 : <strong>Concepts</strong> avancés 153
Gérer le bouton Précé<strong>de</strong>nt en pratique1 PrésentationLe bouton "Précé<strong>de</strong>nt" ou "Back" du navigateur perm<strong>et</strong>à l'internaute d'afficher les pages précé<strong>de</strong>ntesdéjà consultées.Dans un site WebDev, chaque page HTML affichéesur le navigateur est associée à un contexte <strong>de</strong>page, présent sur le serveur. Chaque action effectuéedans une page affichée par le navigateur doitentraîner une action i<strong>de</strong>ntique sur le contexte <strong>de</strong>page correspondant présent sur le serveur.Or l'utilisation du bouton "Précé<strong>de</strong>nt" du navigateurperm<strong>et</strong> <strong>de</strong> réaliser une action uniquement sur lenavigateur: la page affichée sur le navigateur <strong>et</strong>son contexte présent sur le serveur peuvent doncêtre désynchronisés en cas d'utilisation du bouton"Précé<strong>de</strong>nt" du navigateur.1.1 Deux métho<strong>de</strong>s <strong>de</strong> gestion du bouton"Précé<strong>de</strong>nt" du navigateurPour éviter tout problème lié à la désynchronisationentre les pages affichées sur le navigateur <strong>et</strong> lescontextes correspondants présents sur le serveur,WebDev m<strong>et</strong> à votre disposition <strong>de</strong>ux mo<strong>de</strong>s <strong>de</strong>gestion du bouton "Précé<strong>de</strong>nt" du navigateur :• Solution 1 : Empêcher le r<strong>et</strong>our sur c<strong>et</strong>te page<strong>de</strong>puis le bouton "précé<strong>de</strong>nt" du navigateur.Si le bouton "Précé<strong>de</strong>nt" du navigateur est utilisépour afficher la page, c<strong>et</strong>te action n'aura aucuneff<strong>et</strong>.• Solution 2 : Gestion <strong>de</strong> la synchronisation (solutionpar défaut)Pour chaque action effectuée dans une page<strong>de</strong>puis le navigateur, un test <strong>de</strong> synchronisationentre la page HTML <strong>et</strong> son contexte est automatiquementréalisé.Deux mo<strong>de</strong>s <strong>de</strong> gestion <strong>de</strong> la synchronisationsont possibles :•synchronisation par défaut (mo<strong>de</strong> utilisé pardéfaut lors <strong>de</strong> la création d'une nouvelle page).•synchronisation programmée.1.2 Exemple <strong>de</strong> désynchronisationVoici un exemple <strong>de</strong> site :• Une page du navigateur contient une table fichierrelié au fichier ITEM <strong>et</strong> un lien "Suivant".• Le fichier ITEM ne contient qu’une rubrique, chaqueenregistrement est constitué d’une l<strong>et</strong>tre <strong>de</strong>l’alphab<strong>et</strong>.• La page perm<strong>et</strong> d’afficher 6 lignes <strong>de</strong> la table, lelien "Suivant" perm<strong>et</strong> d’afficher les 6 suivantes.A l’ouverture <strong>de</strong> la page, la table affiche les 6 premiersenregistrements du fichier (<strong>de</strong> ’A’ à ’F’). Voiciun enchaînement d'actions faites par l'utilisateur :1. clic sur le lien "Suivant"Résultat : le serveur se positionne sur les 6 enregistrementssuivants <strong>de</strong> ITEM <strong>et</strong> renvoie au navigateurleurs contenus. Le navigateur affiche la pagesuivante <strong>de</strong> la table avec les 6 nouveaux contenus(’G’ à ’L’).2. clic sur "Précé<strong>de</strong>nt" du navigateurRésultat : le navigateur affiche la page précédantla première action. La table affichée contient lesl<strong>et</strong>tres ’A’ à ’F’. Le serveur n’a pas été sollicité, il estdonc toujours positionné sur les enregistrements’G’ à ’L’.3. clic sur "Suivant"Résultat : le serveur se positionne sur les 6 enregistrementssuivants <strong>de</strong> ITEM (donc <strong>de</strong> ’M’ à ’R’). Lenavigateur se synchronise avec le serveur <strong>et</strong> afficheles mêmes éléments : l’internaute a l'impressionque certaines informations ne sont pasaffichées.Ce dysfonctionnement peut avoir <strong>de</strong>s conséquencesinattendues lors d’une modification d’un enregistrement<strong>de</strong> fichier (modification <strong>de</strong>l'enregistrement qui n'est pas celui visualisé parl'internaute par exemple).Rappel : chaque action sur le navigateur doitentraîner une action du serveur : le serveur envoiealors une réponse au navigateur. Or le clic sur lebouton "Précé<strong>de</strong>nt" du navigateur étant une actionnavigateur indépendante <strong>de</strong> votre site WebDev, la<strong>de</strong>uxième condition peut ne pas être réalisée.154Partie 4 : <strong>Concepts</strong> avancés
2 Empêcher l’utilisation du bouton "Précé<strong>de</strong>nt"Si le bouton "Précé<strong>de</strong>nt" du navigateur est utilisépour afficher la page, c<strong>et</strong>te action n'aura aucuneff<strong>et</strong>.2.1 FonctionnementLa désactivation <strong>de</strong> la fonction "Page précé<strong>de</strong>nte"du navigateur entraîne l'insertion du co<strong>de</strong> Javascriptsuivant dans la page HTML générée :history.forward()Lors <strong>de</strong> l'exécution <strong>de</strong> la page sous un navigateur, ilsera impossible <strong>de</strong> revenir sur c<strong>et</strong>te page par la touche"Précé<strong>de</strong>nt" du navigateur.Remarques :• L’utilisation du bouton "Précé<strong>de</strong>nt" du navigateurpeut entraîner un clignotement <strong>de</strong> la page.• Ce mécanisme peut être mis en échec si un clicsur le bouton [STOP] du navigateur intervientavant l’exécution <strong>de</strong> l'instruction forward() par lenavigateur.2.2 Mise en placePour désactiver le bouton "Précé<strong>de</strong>nt" du navigateurpour une page précise :1. Affichez l'ongl<strong>et</strong> "Détail" <strong>de</strong> la fenêtre <strong>de</strong> <strong>de</strong>scription<strong>de</strong> la page (option "Description" du menu contextuel<strong>de</strong> la page).2. Cochez l’option "Empêcher le r<strong>et</strong>our sur c<strong>et</strong>tepage <strong>de</strong>puis le bouton "Précé<strong>de</strong>nt" du navigateur".3. Vali<strong>de</strong>z.Pour désactiver le bouton "Précé<strong>de</strong>nt" du navigateurpour un frames<strong>et</strong> :1. Affichez l'ongl<strong>et</strong> "Détail" <strong>de</strong> la fenêtre <strong>de</strong> <strong>de</strong>scriptiondu frames<strong>et</strong> (option "Description" du menucontextuel <strong>de</strong> la frame).2. Cochez l’option "Empêcher le r<strong>et</strong>our sur ce frames<strong>et</strong><strong>de</strong>puis le bouton "Précé<strong>de</strong>nt" du navigateur".3. Vali<strong>de</strong>z.Pour désactiver le bouton "Précé<strong>de</strong>nt" du navigateurpour toutes les pages du proj<strong>et</strong> :1. Affichez la <strong>de</strong>scription du proj<strong>et</strong> (option "Proj<strong>et</strong> ..Description du proj<strong>et</strong>").2. Cliquez sur l’ongl<strong>et</strong> "Options".3. Cochez l’option "Empêcher le r<strong>et</strong>our sur la page<strong>de</strong>puis le bouton "Précé<strong>de</strong>nt" du navigateur".4. Vali<strong>de</strong>z. C<strong>et</strong>te option sera automatiquementprise en compte pour toutes les nouvelles pages dusite.3 Gestion <strong>de</strong> la synchronisation3.1 PrésentationGrâce au mécanisme <strong>de</strong> synchronisation <strong>de</strong>spages, lors <strong>de</strong> chaque action effectuée dans unepage une vérification <strong>de</strong> synchronisation est automatiquementréalisée. C<strong>et</strong>te vérification consiste àvérifier si la page affichée sur le navigateur correspondbien au contexte <strong>de</strong> page présent sur le serveur.Deux mo<strong>de</strong>s <strong>de</strong> gestion <strong>de</strong> la synchronisation sontdisponibles :1. Gestion <strong>de</strong> la synchronisation par défaut.2. Gestion <strong>de</strong> la synchronisation par programmation,dans le co<strong>de</strong> <strong>de</strong> synchronisation <strong>de</strong> la page.3.2 Synchronisation par défautLe mécanisme <strong>de</strong> synchronisation par défaut estdéclenché uniquement si l'option "Utiliser le mécanisme<strong>de</strong> synchronisation <strong>de</strong>s pages" est sélectionnéepour la page.En cas <strong>de</strong> désynchronisation, un message d’avertissementinforme l'internaute que l’action <strong>de</strong>mandéen’a pu être effectuée. La page correspondantau contexte présent sur le serveur est réaffichée.Le site peut continuer à fonctionner.Pour m<strong>et</strong>tre en place la gestion <strong>de</strong> la synchronisationdans une page :1. Dans l'ongl<strong>et</strong> "Détail" <strong>de</strong> la <strong>de</strong>scription <strong>de</strong> lapage (option "Description" du menu contextuel),cochez l'option "Utiliser le mécanisme <strong>de</strong> synchronisation<strong>de</strong>s pages".2. Vali<strong>de</strong>z. C<strong>et</strong>te page sera automatiquementincluse dans l'historique <strong>de</strong>s pages du navigateur :il sera possible <strong>de</strong> revenir sur c<strong>et</strong>te page par la touche"Précé<strong>de</strong>nt" du navigateur.Partie 4 : <strong>Concepts</strong> avancés 155
Pour m<strong>et</strong>tre en place la gestion <strong>de</strong> la synchronisationdans toutes les pages du proj<strong>et</strong> :1. Dans la <strong>de</strong>scription du proj<strong>et</strong> (option "Proj<strong>et</strong> ..Description du proj<strong>et</strong>", ongl<strong>et</strong> "Options"), cochezl'option "Utiliser le mécanisme <strong>de</strong> synchronisation<strong>de</strong>s pages".2. Vali<strong>de</strong>z. Les pages du proj<strong>et</strong> seront automatiquementincluses dans l'historique <strong>de</strong>s pages dunavigateur : il sera possible <strong>de</strong> revenir sur cespages par la touche "Précé<strong>de</strong>nt" du navigateur.Remarques :• Ce mo<strong>de</strong> <strong>de</strong> gestion ne nécessite aucun co<strong>de</strong>WLangage particulier.•Pour les champs <strong>de</strong> la page ne nécessitant pasune gestion <strong>de</strong> la synchronisation (bouton "Fermer"par exemple) il est possible <strong>de</strong> débrancherle mécanisme <strong>de</strong> synchronisation: il suffit <strong>de</strong>cocher l'option "Désactiver le mécanisme <strong>de</strong> synchronisation<strong>de</strong>s pages pour ce champ" dansl’ongl<strong>et</strong> "Avancée" <strong>de</strong> la <strong>de</strong>scription du champ.• Le message d'avertissement peut être personnalisé(voir le paragraphe suivant).4 Synchronisation par programmationPour gérer la synchronisation par programmation :1. Dans l'ongl<strong>et</strong> "Détail" <strong>de</strong> la <strong>de</strong>scription <strong>de</strong> lapage (option "Description" du menu contextuel),cochez l'option "Utiliser le mécanisme <strong>de</strong> synchronisation<strong>de</strong>s pages".2. Configurez si nécessaire les champs <strong>de</strong> la pagepour lesquels la synchronisation ne doit pas êtregérée.Pour chaque champ déclenchant une action sur leserveur, il est possible <strong>de</strong> paramétrer si la gestion<strong>de</strong> la synchronisation <strong>de</strong> la page doit être effectuée(option par défaut) ou ignorée lors <strong>de</strong> c<strong>et</strong>te action.Pour ignorer la gestion <strong>de</strong> la synchronisation, il suffit<strong>de</strong> cocher l'option "Désactiver le mécanisme <strong>de</strong>synchronisation <strong>de</strong>s pages pour ce champ" dansl’ongl<strong>et</strong> "Avancée" <strong>de</strong> la <strong>de</strong>scription du champ.3. Saisissez le co<strong>de</strong> nécessaire à la gestion personnalisée<strong>de</strong> la synchronisation dans le co<strong>de</strong> <strong>de</strong>synchronisation <strong>de</strong> la page. Utilisez la fonctionChangeAction dans le co<strong>de</strong> <strong>de</strong> synchronisation <strong>de</strong>la page. C<strong>et</strong>te fonction perm<strong>et</strong> <strong>de</strong> déterminerl'action qui sera faite en cas <strong>de</strong> désynchronisation<strong>de</strong> la page.Remarques :•La fonction ChangeAction est initialisée avecl'action "Ne rien faire" si une fonction du WLangageperm<strong>et</strong>tant d'afficher ou <strong>de</strong> réafficher unepage est utilisée dans le co<strong>de</strong> <strong>de</strong> synchronisation<strong>de</strong> la page.• Pour personnaliser le message <strong>de</strong> désynchronisation,il suffit <strong>de</strong> saisir dans le co<strong>de</strong> <strong>de</strong> synchronisation<strong>de</strong> la page :1. le message personnalisé.2. le réaffichage <strong>de</strong> la page en cours sur le serveur(avec la fonction PageActualise par exemple).• Pour réaliser une synchronisation à partir <strong>de</strong>sinformations présentes sur le poste <strong>de</strong> l'internaute,il est conseillé <strong>de</strong> :1. Utiliser un champ caché contenant l'i<strong>de</strong>ntifiant<strong>de</strong> l'enregistrement affiché <strong>et</strong> sélectionné.2. Rechercher dans le co<strong>de</strong> <strong>de</strong> synchronisationl'enregistrement en cours sur le navigateur. C<strong>et</strong>terecherche est réalisée à partir <strong>de</strong> son i<strong>de</strong>ntifiantcontenu dans le champ caché.3. Réactualiser la page.156Partie 4 : <strong>Concepts</strong> avancés
Cookies : <strong>de</strong>s informationsconservées chez l’internauteUn cookie est un fichier enregistré par le site WebDev sur le poste <strong>de</strong> l’internaute. Ce fichierpeut être relu à tout moment <strong>de</strong>puis le serveur ou par le navigateur. Les cookiesperm<strong>et</strong>tent <strong>de</strong> stocker <strong>de</strong>s informations persistantes sur le poste <strong>de</strong> l’internaute.Par exemple, lors <strong>de</strong> la première connexion <strong>de</strong> l’internaute, <strong>de</strong>s informations lui sont<strong>de</strong>mandées : son nom d’utilisateur, son login, ... <strong>et</strong> sont stockées sur sa machine. Lors<strong>de</strong>s connexions suivantes, le site WebDev ira directement lire ces informations dans lecookie créé lors <strong>de</strong> la première connexion <strong>et</strong> pourra saluer l’internaute par son prénomdès la première page.1ère connexionLe site WebDevenregistre <strong>de</strong>s informationsdonnées par l’internautesur son poste.Le nouvel internaute doit ici saisirson nom <strong>et</strong> son mot <strong>de</strong> passeConnexions suivantesLe site WebDevlit <strong>de</strong>s donnéesprécé<strong>de</strong>mmentenregistrées sur le poste<strong>de</strong> l’internaute.Le site WebDev affiche par défautles informations lues dans le cookiePour créer <strong>de</strong>s cookies dans un site WebDev, utilisez la fonction du WLangage CookieEcrit.Pour lire les cookies dans un site WebDev, utilisez la fonction du WLangage CookieLit.Partie 4 : <strong>Concepts</strong> avancés 157
Protéger l’accès au site :mots <strong>de</strong> passeUne gestion d’accès à un site par mot <strong>de</strong> passe est nécessaire dans <strong>de</strong>ux cas :1. Protéger <strong>de</strong>s informations personnelles2. Limiter l’accès à un siteProtéger <strong>de</strong>s informations personnellesPour accé<strong>de</strong>r <strong>de</strong> nouveau à <strong>de</strong>s données personnelles, l’internaute peut spécifier un mot<strong>de</strong> passe. Ainsi, dans un site commercial, un mot <strong>de</strong> passe défini par l’internaute lui perm<strong>et</strong>d’accé<strong>de</strong>r au détail <strong>de</strong> ses précé<strong>de</strong>ntes comman<strong>de</strong>s.Dans ce cas, la gestion <strong>de</strong> l’accès à un site nécessite :• une i<strong>de</strong>ntification :A la première connexion, l’internaute s’i<strong>de</strong>ntifie <strong>et</strong> saisit son mot <strong>de</strong> passe.Aux connexions suivantes, l’internaute s’i<strong>de</strong>ntifie <strong>et</strong> accè<strong>de</strong> aux fonctionnalités quilui sont réservées (son historique, ...).• la possibilité pour l’internaute <strong>de</strong> r<strong>et</strong>rouver un mot <strong>de</strong> passe oublié.WebDev est livré avec toutes les ressources nécessaires à la gestion <strong>de</strong> mots <strong>de</strong> passepersonnels.Limiter l’accès à un sitePar défaut, un site intern<strong>et</strong> est accessible à n’importe quel internaute. Mais un site n’estpas toujours <strong>de</strong>stiné au grand public : certaines fonctionnalités peuvent être réservéesà certains types d’internautes (administrateur <strong>de</strong> site, ...).Dans ce cas, le gestionnaire du site attribue un mot <strong>de</strong> passe à chaque internaute. Cemot <strong>de</strong> passe ne pourra pas être modifié. Ce mot <strong>de</strong> passe perm<strong>et</strong> un accès à <strong>de</strong>s fonctionnalitésplus ou moins limitées.Par exemple, dans un site commercial :• un mot <strong>de</strong> passe spécifique sera attribué aux commerciaux : ils accé<strong>de</strong>ront aux statistiques<strong>de</strong> ventes, ...• un mot <strong>de</strong> passe spécifique sera attribué à l’équipe mark<strong>et</strong>ing : ils pourront m<strong>et</strong>treen ligne <strong>de</strong> nouveaux produits.WebDev perm<strong>et</strong> <strong>de</strong> gérer simplement ces différents types d’accès à un site.158Partie 4 : <strong>Concepts</strong> avancés
TLS/SSL : Crypter lesinformations sur le WebPar défaut, les données circulant entre le poste <strong>de</strong> l’internaute <strong>et</strong> le serveur Web ne sontpas cryptées. L’authenticité <strong>de</strong> l’i<strong>de</strong>ntité du serveur, la confi<strong>de</strong>ntialité, <strong>et</strong> l’intégrité <strong>de</strong>sdonnées échangées ne sont pas certifiées.Pour assurer la confi<strong>de</strong>ntialité, le mécanisme le plus employé est l'utilisation du protocoleTLS/SSL (Transport Layer Security, anciennement Secure Sock<strong>et</strong> Layer). Ce protocoleperm<strong>et</strong> <strong>de</strong> garantir l’i<strong>de</strong>ntité du serveur auquel l’intern<strong>et</strong> accè<strong>de</strong> <strong>et</strong> crypte les donnéeséchangées entre le serveur <strong>et</strong> le navigateur.Mise en place <strong>de</strong>s transactions sécurisées par protocole TLS/SSLPour m<strong>et</strong>tre en place <strong>de</strong>s transactions sécurisées par TLS/SSL, il est nécessaire d’effectuerles formalités liées à ce protocole (certification payante d’une clé SSL par un organismespécialisé ou génération d’une clé auto-signée pour une utilisation privée ou à <strong>de</strong>sfins <strong>de</strong> test). Pour plus <strong>de</strong> détails, consultez l’ai<strong>de</strong> en ligne <strong>de</strong> WebDev.Transactions sécurisées par TLS/SSL dans un site WebDevGénéralement, seul le transfert <strong>de</strong> données sensibles doit être sécurisé : transfert du numéro<strong>de</strong> carte bancaire par exemple. En eff<strong>et</strong>, le mo<strong>de</strong> sécurisé est plus lent. Toutefois,un nombre croissant <strong>de</strong> sites fonctionne entièrement en TLS/SSL grâce à l’augmentation<strong>de</strong> la puissance <strong>de</strong>s machines ce qui assure une plus gran<strong>de</strong> confi<strong>de</strong>ntialité <strong>de</strong>s opérations<strong>de</strong>s utilisateurs.La mise en place d’une transactionsécurisée est effectuée lors <strong>de</strong>l’ouverture d’une nouvelle page parun bouton (ou un lien). Il suffit d’utiliserla fonction SSLActive dans leco<strong>de</strong> navigateur du bouton (ou dulien). Dès l'ouverture <strong>de</strong> la page sécurisée,toutes les actions effectuéesseront en mo<strong>de</strong> sécurisé(c’est-à-dire crypté).Pour revenir en mo<strong>de</strong> non sécurisé,il suffit d’utiliser la fonction SSLActive(Faux)dans le co<strong>de</strong> navigateurd'un bouton (ou d’un lien) perm<strong>et</strong>tantd'ouvrir une nouvelle page.Partie 4 : <strong>Concepts</strong> avancés 159
Paiement sécurisé avecprestataireDifférents prestataires perm<strong>et</strong>tent <strong>de</strong> proposer un paiement sécurisé pour tous les sitescommerciaux. Tout paiement réalisé avec une carte bancaire est validé par le prestataireauprès du centre <strong>de</strong> carte bancaire.Les différentes étapes du paiement sont les suivantes :1. Le client vali<strong>de</strong> sa comman<strong>de</strong>.2. Le site WebDev <strong>de</strong>man<strong>de</strong> un débit au prestataire.3. Le prestataire <strong>de</strong>man<strong>de</strong> la saisie du numéro <strong>de</strong> carte.4. Le client saisit son numéro <strong>de</strong> carte.5. Après vérification, le prestataire envoie un numéro d’accord.6. La comman<strong>de</strong> est acceptée.<strong>16</strong>0Partie 4 : <strong>Concepts</strong> avancés
Envoyer<strong>de</strong>s emailsDans un site web, les emails perm<strong>et</strong>tent :• aux internautes <strong>de</strong> communiquer entre eux : envoi d’emails au responsable du site,site <strong>de</strong> mailing-list, ...• <strong>de</strong> vali<strong>de</strong>r une prise <strong>de</strong> comman<strong>de</strong> : dans un site commercial, un email est envoyéaux internautes pour vali<strong>de</strong>r leur comman<strong>de</strong>.• <strong>de</strong> transférer <strong>de</strong>s données d’un poste à un autre : les nouvelles comman<strong>de</strong>s saisiessur un site commercial sont transférées par email au siège <strong>de</strong> la société pour traitement,...WebDev perm<strong>et</strong> d’envoyer <strong>de</strong>s emails <strong>de</strong>puis un site par 2 métho<strong>de</strong>s.1 Envoi <strong>de</strong> l’email <strong>de</strong>puis le poste <strong>de</strong> l’internauteUtilisez c<strong>et</strong>te métho<strong>de</strong> lorsque l’internaute doit envoyer un email à une adresse définie :auteur du site, support technique, service commercial, ...La fonction navigateur EmailOuvreMessagerie perm<strong>et</strong> d’ouvrir le logiciel <strong>de</strong> messagerie<strong>de</strong> l’internaute. Certains paramètres peuvent être remplis par défaut : adresse email du<strong>de</strong>stinataire, ...C<strong>et</strong>te métho<strong>de</strong> perm<strong>et</strong> d’utiliser directement la messagerie <strong>de</strong> l’internaute : aucun traitementspécifique n’est à effectuer dans le site WebDev.Partie 4 : <strong>Concepts</strong> avancés <strong>16</strong>1
2 Envoi <strong>de</strong> l’email <strong>de</strong>puis le serveur (pages dynamiques uniquement)Dans ce cas, c’est le serveur qui gère l’envoi <strong>de</strong>s emails.L’envoi <strong>de</strong>s emails peut être réalisé :• directement dans le site dynamique WebDev (par exemple pour un transfert <strong>de</strong> donnéespar email, ou pour un email <strong>de</strong> validation <strong>de</strong> comman<strong>de</strong>);• par le spooler d’email (livré avec WebDev).Utilisez c<strong>et</strong>te métho<strong>de</strong> pour une gestion personnalisée <strong>de</strong>s emails :• un contrôle sur le contenu <strong>de</strong>s emails envoyés par les internautes (cas d’un site <strong>de</strong>type "liste <strong>de</strong> diffusion"),• la vérification <strong>de</strong> la validité <strong>de</strong> l’adresse du <strong>de</strong>stinataire,• le cryptage <strong>de</strong>s informations envoyées par emails,• la validation d’un traitement, ...<strong>16</strong>2Partie 4 : <strong>Concepts</strong> avancés
PARTIE 5Bases <strong>de</strong> données
Analyse : Structure <strong>de</strong> labase <strong>de</strong> donnéesLorsqu'un proj<strong>et</strong> WebDev, WinDev ou WinDev Mobile utilise <strong>de</strong>s fichiers <strong>de</strong> données, ceproj<strong>et</strong> doit être associé à une analyse. Une analyse perm<strong>et</strong> <strong>de</strong> décrire les structures <strong>de</strong>données (fichiers, rubriques, ...) utilisées dans votre proj<strong>et</strong>.L'éditeur d'analyses perm<strong>et</strong> <strong>de</strong> créer très simplement une analyse.L’analyse d’un proj<strong>et</strong> WinDev correspond au MLD (Modèle Logique <strong>de</strong>s Données). Toutela structure <strong>et</strong> l’organisation <strong>de</strong>s données sont décrites : les données sont regroupéespar fichier. Chaque fichier contient plusieurs données appelées rubrique.Dans l’analyse, il est possible <strong>de</strong> lier la <strong>de</strong>scription d’un fichier à un type <strong>de</strong> fichier (HyperFileSQL,Oracle, ...).Partie 5 : Bases <strong>de</strong> données <strong>16</strong>5
L’analyse en pratique1 PrésentationLorsqu’un proj<strong>et</strong> utilise <strong>de</strong>s fichiers <strong>de</strong> données, ceproj<strong>et</strong> doit être associé à une analyse. Une analyseperm<strong>et</strong> <strong>de</strong> décrire les structures <strong>de</strong> données(fichiers, rubriques, ...) utilisées dans votre proj<strong>et</strong>.Pour décrire une analyse, <strong>de</strong>ux métho<strong>de</strong>s sontpossibles :• 1ère métho<strong>de</strong> : Création directe <strong>de</strong> l’analyse(c’est-à-dire un Modèle Logique <strong>de</strong>s Données(MLD)).C<strong>et</strong>te opération est détaillée dans le paragraphe"Création d’un MLD" page <strong>16</strong>6.• 2ème métho<strong>de</strong> : Création du Modèle Conceptuel<strong>de</strong>s Données (MCD), puis création automatique<strong>de</strong> l’analyse à partir du MCD.Ces opérations sont détaillées dans les paragraphes"Création d’un MCD", page 172 <strong>et</strong> “Générationdu MCD en MLD”, page 173.Ce chapitre présente chacune <strong>de</strong> ces métho<strong>de</strong>s.2 Création d’un MLD (Modèle Logique <strong>de</strong>s Données)Dans un site WebDev, les termes "MLD" <strong>et</strong> "Analyse"sont utilisés indifféremment pour définir lastructure <strong>de</strong> la base <strong>de</strong> données associée à un proj<strong>et</strong>.2.1 Créer une analyse (ou MLD)Pour créer un MLD :1. Sélectionnez l’option "Fichier .. Nouveau .. Analyse".L’assistant <strong>de</strong> création <strong>de</strong> l’analyse est lancé.2. Spécifiez :• le nom <strong>et</strong> le répertoire <strong>de</strong> l’analyse. L’analysecorrespond à un fichier ".WDA". Par défaut, cefichier sera créé dans le répertoire <strong>de</strong> l’analysedu proj<strong>et</strong> (répertoire .ANA). Cerépertoire doit être accessible en lecture <strong>et</strong> enécriture.• le libellé <strong>de</strong> l’analyse décrivant succinctement lesuj<strong>et</strong> <strong>de</strong> l’analyse.• si l’analyse doit être associée au proj<strong>et</strong> en cours.• si l’analyse doit être protégée par un mot <strong>de</strong>passe. Ce mot <strong>de</strong> passe sera <strong>de</strong>mandé lors <strong>de</strong>l’ouverture <strong>de</strong> l’analyse (avec les outils <strong>de</strong> Web-Dev ou en programmation).•le ou les type(s) <strong>de</strong> bases <strong>de</strong> données manipuléespar le proj<strong>et</strong>.• La création du premier fichier est automatiquementproposée.3. Créez l’ensemble <strong>de</strong>s éléments (fichiers, rubriques<strong>et</strong> liaisons) <strong>de</strong> votre analyse.2.2 Ajouter un fichier dans une analyseLes fichiers <strong>de</strong> l’analyse perm<strong>et</strong>tent <strong>de</strong> décrire lastructure <strong>de</strong>s fichiers <strong>de</strong> données utilisés par leproj<strong>et</strong>. Un fichier présent dans l’analyse peut être :•Un nouveau fichier.• Un fichier pré-défini, livré avec WebDev.• Un fichier importé <strong>de</strong>puis une base existante (utilisantpar exemple un format <strong>de</strong> fichiers spécifique).Les paragraphes suivants détaillent comment créerun fichier.Pour créer un nouveau fichier :1. Sélectionnez l’option "Insertion .. Fichier".L’assistant <strong>de</strong> création <strong>de</strong> fichier se lance.2. Cochez l’option "Créer une nouvelle <strong>de</strong>scription<strong>de</strong> fichier".3. Spécifiez :• le nom logique du fichier. Ce nom sera utilisépour manipuler le fichier.• le libellé du fichier résumant succinctement lesuj<strong>et</strong> du fichier.• la représentation d’un enregistrement dans lefichier. C<strong>et</strong>te représentation perm<strong>et</strong> d’améliorerla lisibilité <strong>de</strong>s questions posées lors <strong>de</strong> la <strong>de</strong>scription<strong>de</strong>s liaisons. C<strong>et</strong>te option doit être précédéed’un article indéfini (UN ou UNE).• si le fichier possè<strong>de</strong> une rubrique <strong>de</strong> type "I<strong>de</strong>ntifiantautomatique". La valeur <strong>de</strong> c<strong>et</strong>te rubriqueest unique pour chaque enregistrement <strong>et</strong> estautomatiquement calculée par WebDev.<strong>16</strong>6Partie 5 : Bases <strong>de</strong> données
• le type <strong>de</strong> la base <strong>de</strong> données pour laquelle lefichier va être créé. Selon le type choisi, cefichier <strong>de</strong> données sera manipulé par le moteurHyperFileSQL, par un pilote OLE DB ou par un <strong>de</strong>saccès natifs <strong>de</strong> WebDev (SQL Server, Oracle, ...).•si la taille du fichier peut dépasser 2 Go. C<strong>et</strong>teoption est utilisable uniquement si le système<strong>de</strong>s fichiers du poste serveur <strong>et</strong> <strong>de</strong>s postes surlequel les fichiers <strong>de</strong> données sont installés pourWebDev est au format NTFS (Windows 2000, NTou XP).Attention : Si c<strong>et</strong>te option est cochée, il ne serapas possible d’ouvrir ce fichier sous Windows 95,98 ou Me.•si le fichier doit gérer la réplication. C<strong>et</strong>te optionperm<strong>et</strong> <strong>de</strong> gérer les mises à jour automatiques<strong>de</strong> bases <strong>de</strong> données i<strong>de</strong>ntiques <strong>et</strong> distantes.Pour plus <strong>de</strong> détails sur la réplication, consultezl’ai<strong>de</strong> en ligne.4. Le fichier créé <strong>de</strong>vient le fichier en cours. Lafenêtre <strong>de</strong> <strong>de</strong>scription <strong>de</strong>s rubriques du fichiers’ouvre automatiquement. Vous pouvez décrire lesrubriques du fichier.Pour importer une <strong>de</strong>scription <strong>de</strong> fichier prédéfinie:1. Sélectionnez l’option "Insertion .. Fichier".2. Cochez l’option "Sélectionner une <strong>de</strong>scriptionparmi <strong>de</strong>s fichiers pré-définis".3. Choisissez le fichier pré-défini. Ce fichier seraimporté dans l’analyse en cours. Ce fichier pourraêtre modifié par la suite.4. Sélectionnez les rubriques du fichier à conserver.Ces rubriques pourront être modifiées par lasuite.5. Spécifiez si les liaisons doivent être automatiquementrecherchées. Si c<strong>et</strong>te option est cochée,les rubriques <strong>de</strong> même nom seront reliées.6. Le fichier importé est automatiquement insérédans l’analyse en cours.Remarque : Pour modifier un fichier ou les rubriquesd’un fichier, sélectionnez le fichier <strong>et</strong> activezl’option "Structure <strong>de</strong> fichiers .. Description" ou"Structure <strong>de</strong> fichiers .. Rubriques".Pour importer une <strong>de</strong>scription <strong>de</strong> fichier existante,<strong>de</strong>ux solutions sont possibles :Solution 1 : <strong>de</strong>puis l’éditeur d’analyses1. Sélectionnez l’option "Insertion .. Fichier".2. Cochez l’option "Utiliser <strong>de</strong>s fichiers d’une baseexistante", puis sélectionnez le type <strong>de</strong> la base <strong>de</strong>données.3. Précisez le format <strong>de</strong>s données utilisé par votreproj<strong>et</strong>. Il est possible <strong>de</strong> conserver le format actuelou <strong>de</strong> migrer les fichiers au format HyperFileSQL.4. Si nécessaire, sélectionnez l’analyse WebDevdans laquelle la <strong>de</strong>scription doit être importée (analyseexistante ou nouvelle analyse).5. Spécifiez la base <strong>de</strong> données source contenantles <strong>de</strong>scriptions à importer <strong>et</strong> le type <strong>de</strong> c<strong>et</strong>te base<strong>de</strong> données source. Selon le type choisi, renseignezles informations <strong>de</strong>mandées.6. Sélectionnez les tables ou fichiers dont la <strong>de</strong>scriptiondoit être importée <strong>et</strong> vali<strong>de</strong>z.7. Le fichier importé est automatiquement insérédans l’analyse en cours.Solution 2 : Depuis l’explorateur <strong>de</strong> Windows"Droppez" directement la <strong>de</strong>scription du fichier <strong>de</strong>l’explorateur Windows vers l’éditeur d’analyses.Par exemple :Ici : une base <strong>de</strong> données Oracle, sur le serveur.Il suffit <strong>de</strong> faire glisser le nom <strong>de</strong> la base ...... pour en transférer la <strong>de</strong>scription sous l’éditeurd’analyses.2.3 Créer une rubriquePour créer une rubrique :1. Double-cliquez sur le fichier dans lequel la rubriquedoit être créée. La fenêtre <strong>de</strong> <strong>de</strong>scription <strong>de</strong>srubriques du fichier s’ouvre.2. Cliquez sur la première ligne vi<strong>de</strong> du tableau <strong>de</strong>sPartie 5 : Bases <strong>de</strong> données <strong>16</strong>7
ubriques.3. Spécifiez le nom, le libellé <strong>et</strong> le type <strong>de</strong> la rubriquedirectement dans le tableau.4. Indiquez dans la partie droite <strong>de</strong> l’écran lesdétails concernant la nouvelle rubrique (type, taille,valeur par défaut, sens <strong>de</strong> parcours, ...).5. Indiquez dans la partie basse <strong>de</strong> l’écran lesdétails concernant les informations partagées.6. Vali<strong>de</strong>z la <strong>de</strong>scription <strong>de</strong> la rubrique.Remarque : il est également possible <strong>de</strong> créer unerubrique à partir <strong>de</strong>s méta-types proposés par Web-Dev. Pour cela, il suffit <strong>de</strong> cliquer sur le bouton"+M"à droite du tableau. La liste <strong>de</strong>s méta-typesdisponibles apparaît.2.4 Créer une liaisonIl est possible <strong>de</strong> créer différents types <strong>de</strong> liaisonentre les fichiers. Pour plus <strong>de</strong> détails sur lesliaisons, consultez le paragraphe “Caractéristiques<strong>de</strong>s liaisons définies dans une analyse”, page <strong>16</strong>8.Pour créer une liaison :1. Sélectionnez l’option "Insertion .. Liaison". Lecurseur <strong>de</strong> la souris se transforme en crayon.2. Sélectionnez les <strong>de</strong>ux fichiers à relier. La fenêtre<strong>de</strong> <strong>de</strong>scription <strong>de</strong> liaison s’ouvre automatiquement.3. Pour définir les cardinalités entre les <strong>de</strong>uxliaisons :•soit sélectionnez directement les cardinalitésparmi celles proposées (0,1 ; 1,1 ; 0,N ; 1,N).• soit répon<strong>de</strong>z aux questions posées. Les cardinalitésseront mises à jour automatiquement.4. Pour décrire <strong>de</strong>s cardinalités avancées, cochezl’option "Afficher les cardinalités avancées" <strong>et</strong>répon<strong>de</strong>z aux questions posées.5. Saisissez le libellé <strong>de</strong> la liaison en décrivant succinctementle suj<strong>et</strong> <strong>de</strong> la liaison.6. Spécifiez les clés à relier.7. Précisez les règles d’intégrité. Ces règles perm<strong>et</strong>tentd’assurer la cohérence <strong>de</strong>s données lors <strong>de</strong> lamodification ou lors <strong>de</strong> la suppression d’une <strong>de</strong>sclés <strong>de</strong> la relation.8. Vali<strong>de</strong>z. La liaison est automatiquement créée.3 Caractéristiques <strong>de</strong>s liaisons définies dans une analyse3.1 Fichier propriétaire <strong>et</strong> fichier membreDans le cas <strong>de</strong> liaison entre <strong>de</strong>ux fichiers, il existeun fichier propriétaire <strong>et</strong> un fichier membre :• le fichier propriétaire est propriétaire <strong>de</strong> la clé.• le fichier membre est un membre <strong>de</strong>s fichiers <strong>de</strong>l’analyse contenant une copie <strong>de</strong> la clé.Pour gérer la liaison entre <strong>de</strong>ux fichiers, la clé dufichier propriétaire est copiée dans le fichier membre.Par exemple, la clé du fichier Fournisseur estcopiée dans chaque enregistrement du fichier Produit.Plusieurs enregistrements du fichier Produitpeuvent avoir la même clé du fichier Fournisseur :• le fichier propriétaire est Fournisseur,• le fichier membre est Produit.La représentation d'une telle liaison est lasuivante :3.2 Les cardinalitésLes cardinalités perm<strong>et</strong>tent <strong>de</strong> dénombrer les liensentre les fichiers.La cardinalité est définie en fonction <strong>de</strong>s réponsesaux <strong>de</strong>ux questions suivantes :1. Pour chaque enregistrement du fichier, à combiend’enregistrements <strong>de</strong> l’autre fichier au minimumc<strong>et</strong> enregistrement est-il relié ?La réponse fournit la première partie <strong>de</strong> la cardinalité(cardinalité minimale):•si la réponse est "aucun", la cardinalité est dutype 0,X.•si la réponse est "un seul", la cardinalité est dutype 1,X.2. Pour chaque enregistrement du fichier, à combiend’enregistrements <strong>de</strong> l’autre fichier au maximumc<strong>et</strong> enregistrement est-il relié ?La réponse fournit la <strong>de</strong>uxième partie <strong>de</strong> la cardinalité(cardinalité maximale):•si la réponse est "un seul", la cardinalité est dutype X,1.• si la réponse est "plusieurs", la cardinalité est dutype X,N.La réponse à ces <strong>de</strong>ux questions définit la cardinalitéqui peut être <strong>de</strong> type : 0,1 ; 0,N ; 1,1 ; 1,N<strong>16</strong>8Partie 5 : Bases <strong>de</strong> données
La <strong>de</strong>scription <strong>de</strong>s cardinalités est fondamentale :elle est la base du respect <strong>de</strong> l’intégrité référentielle<strong>de</strong> la base <strong>de</strong> données.Pour plus <strong>de</strong> clarté, ces <strong>de</strong>ux questions peuventêtre décomposées en quatre questions. Par exemple,pour décrire une liaison entre le fichier Fournisseur<strong>et</strong> le fichier Produit :Pour définir les cardinalités avancées, cochezl’option "Affichez les cardinalités avancées" dans la<strong>de</strong>scription <strong>de</strong> la liaison (option "Insertion ..Liaison").Exemple <strong>de</strong> cardinalités avancées :C<strong>et</strong> exemple présente <strong>de</strong>ux cardinalitésdifférentes :• Cardinalité 0,1 : Une personne peut être inscriteà un seul club <strong>de</strong> sport. C<strong>et</strong>te personne n’est pasobligée d’être inscrite à un club <strong>de</strong> sport.• Cardinalité 0,10 : Un club peut avoir <strong>de</strong> 0 à 10personnes inscrites.• chaque "fournisseur" a au moins un "produit" :Oui/Non ?• chaque "fournisseur" peut avoir plusieurs"produits" : Oui/Non ?• chaque "produit" a au moins un "fournisseur" :Oui/Non ?• chaque "produit" peut avoir plusieurs"fournisseurs" : Oui/Non ?Exemple <strong>de</strong> cardinalités :C<strong>et</strong> exemple présente <strong>de</strong>ux cardinalitésdifférentes :• Cardinalité 0,1 : Une personne peut être inscriteà un seul club <strong>de</strong> sport. C<strong>et</strong>te personne n’est pasobligée d’être inscrite à un club <strong>de</strong> sport.• Cardinalité 0,N : Un club peut avoir aucune ouplusieurs personnes inscrites.3.3 Les cardinalités avancéesIl est possible <strong>de</strong> définir avec plus <strong>de</strong> précision lescardinalités. On parle alors <strong>de</strong> cardinalités avancées.Ces cardinalités perm<strong>et</strong>tent <strong>de</strong> préciser exactementla cardinalité minimale <strong>et</strong> la cardinalité maximale.3.4 L’intégrité référentielleL'intégrité référentielle d'une base <strong>de</strong> données correspondau respect <strong>de</strong>s contraintes impliquées parles liaisons entre les fichiers.L'intégrité référentielle consiste à vérifier par exempleque :• si un enregistrement est supprimé dans le propriétaire,les enregistrements correspondantsdans les membres sont également supprimés,• si un enregistrement est ajouté dans un membre,il existe un enregistrement correspondant dansle propriétaire,• si un enregistrement est modifié dans un propriétaire,la clé unique n'est pas modifiée, ...La vérification <strong>de</strong> l'intégrité référentielle dépend <strong>de</strong>la nature <strong>de</strong> la liaison entre le fichier.Pour plus <strong>de</strong> détails sur le contrôle <strong>de</strong> l’intégritéréférentielle, consultez l’ai<strong>de</strong> en lgne.3.5 Les différents types <strong>de</strong> liaisonsLes liaisons entre fichiers peuvent être <strong>de</strong> plusieurstypes :•parallèle•facultative• <strong>de</strong> complément•partagée•complexeLiaison parallèleDans le cas d'une liaison parallèle, chaque enregistrementd’un fichier (Produit) est relié à un enregistrementdans un autre fichier (Information), <strong>et</strong>Partie 5 : Bases <strong>de</strong> données <strong>16</strong>9
éciproquement.Pour gérer une liaison parallèle, l'i<strong>de</strong>ntifiant dufichier Produit est copié dans le fichier Information.C<strong>et</strong> i<strong>de</strong>ntifiant est également clé unique dans lefichier Information.Le fichier propriétaire est alors Produit, <strong>et</strong> Informationest le fichier membre.Remarque : Ce type <strong>de</strong> liaison est rare car les <strong>de</strong>uxfichiers peuvent être regroupés en un seul.Le parallélisme <strong>de</strong>s enregistrements dans le fichierest respecté si les opérations suivantes sont exécutéessimultanément sur les <strong>de</strong>ux fichiers :• création d'un enregistrement• suppression d'un enregistrement• réin<strong>de</strong>xation avec compactageLiaison facultativeDans le cas d'une liaison facultative, chaque enregistrementd’un fichier (Catégorie) n’a aucun enregistrementou un seul enregistrement associédans un autre fichier (Groupe). Chaque enregistrement<strong>de</strong> l’autre fichier (Groupe) n’a aucun enregristrementou un seul enregistrement associé dans lepremier fichier (Catégorie).Pour gérer une liaison <strong>de</strong> complément, la clé dufichier Produit est copiée dans le fichier Détail.Pour assurer la cardinalité maximale <strong>de</strong> 1, ellereste clé unique. L'unicité <strong>de</strong> c<strong>et</strong>te clé interditl'insertion <strong>de</strong> plus d'un enregistrement dans Détailpour un enregistrement <strong>de</strong> Produit.Le fichier propriétaire est Produit, le fichier membreest Détail.Liaison partagéeDans le cas d'une liaison partagée, un même enregistrementdans un fichier (Fournisseur) peut êtrepartagé par plusieurs enregistrements dans unautre fichier (Produit).Pour gérer une liaison partagée, la clé du fichierFournisseur est copiée dans le fichier Produit. Elle<strong>de</strong>vient clé multiple pour accélérer la vérification <strong>de</strong>l'intégrité.Le fichier propriétaire est Fournisseur, le fichiermembre est Produit.Selon la cardinalité, il est possible <strong>de</strong> distinguerquatre types <strong>de</strong> liaisons partagées :• Liaison partagée <strong>de</strong> cardinalité 0,n - 0,1• Liaison partagée <strong>de</strong> cardinalité 0,n - 1,1• Liaison partagée <strong>de</strong> cardinalité 1,n - 0,1• Liaison partagée <strong>de</strong> cardinalité 1,n - 1,1Liaison partagée <strong>de</strong> cardinalité 0,N - 0,1Une liaison facultative est réalisée en copiantl'i<strong>de</strong>ntifiant <strong>de</strong> chacun <strong>de</strong>s fichiers dans l'autrefichier.Liaison <strong>de</strong> complémentDans le cas d'une liaison <strong>de</strong> complément, chaqueenregistrement d’un fichier (Produit) n’a aucunenregistrement ou un seul enregistrement associédans un autre fichier (Détail). Chaque enregistrement<strong>de</strong> l’autre fichier (Détail) a nécessairementun enregistrement associé dans le premier fichier(Produit).Les liaisons <strong>de</strong> complément sont assez fréquentes.Elles sont notamment utilisées lorsqu'un enregistrementpeut avoir <strong>de</strong>s compléments d'informationsoptionnels.Avec ce type <strong>de</strong> liaison :• un propriétaire peut ne pas avoir <strong>de</strong> membre (unfournisseur n’a pas obligatoirement <strong>de</strong> produit).• un membre peut ne pas avoir <strong>de</strong> propriétaire (unproduit n’a pas obligatoirement <strong>de</strong> fournisseur).Liaison partagée <strong>de</strong> cardinalité 0,N - 1,1Avec ce type <strong>de</strong> liaison :• un propriétaire peut ne pas avoir <strong>de</strong> membre (unfournisseur peut n’avoir aucun produit).•chaque membre a un seul propriétaire (chaqueproduit a un seul fournisseur).Remarque : Ce type <strong>de</strong> liaison est fréquent. Web-Dev perm<strong>et</strong> <strong>de</strong> créer automatiquement les pagesperm<strong>et</strong>tant <strong>de</strong> gérer les fichiers liés par une liaison<strong>de</strong> type 0,N - 1,1.170Partie 5 : Bases <strong>de</strong> données
Liaison partagée <strong>de</strong> cardinalité 1,N - 0,1Avec ce type <strong>de</strong> liaison :• chaque propriétaire a au moins un membre (unfournisseur a au moins un produit).• un membre peut ne pas avoir <strong>de</strong> propriétaire (unproduit peut n’avoir aucun fournisseur).Liaison partagée <strong>de</strong> cardinalité 1,N - 1,1Avec ce type <strong>de</strong> liaison :• chaque propriétaire a au moins un membre (chaquefournisseur a au moins un produit).• chaque membre a un seul propriétaire (chaqueproduit a un seul fournisseur).Liaison complexeDans le cas d'une liaison "complexe", il est nécessaire<strong>de</strong> gérer un fichier <strong>de</strong> liaison, appelé fichier<strong>de</strong> relation.Le fichier <strong>de</strong> relation sera automatiquement créé. Ilcontiendra une clé unique composée <strong>de</strong>s <strong>de</strong>ux clés<strong>de</strong>s fichiers reliés.Le fichier <strong>de</strong> relation peut également contenir <strong>de</strong>sinformations spécifiques à la liaison.Une liaison complexe se décompose alors en <strong>de</strong>uxliaisons <strong>de</strong> type partagé.Exemple <strong>de</strong> liaison complexeUne comman<strong>de</strong> (fichier Comman<strong>de</strong>) peut contenirun ou plusieurs produits. Un produit (fichier Produit)peut être utilisé dans plusieurs comman<strong>de</strong>s.Dans ce cas, il faut avoir un fichier <strong>de</strong> liaison(fichier LigneComman<strong>de</strong>).Le fichier LigneComman<strong>de</strong> contient :•une clé unique composée <strong>de</strong>s clés <strong>de</strong> Produit <strong>et</strong><strong>de</strong> Comman<strong>de</strong>.• le nombre <strong>de</strong> produits commandés.Les liaisons entre fichiers sont les suivantes :4 Manipulations possibles sur une analyseWebDev perm<strong>et</strong> <strong>de</strong> réaliser les manipulations suivantessur une analyse :•Dupliquer / Copier un MLD : La duplication d’unMLD perm<strong>et</strong> <strong>de</strong> disposer <strong>de</strong> <strong>de</strong>ux MLD i<strong>de</strong>ntiques<strong>de</strong> nom différent.• Supprimer un MLD• Renommer un MLD• Associer un MLD à un proj<strong>et</strong>• Agrandir ou réduire l’affichage d’un MLD sousl’éditeur• Déplacer l’affichage du MLD sous l’éditeurWebDev perm<strong>et</strong> <strong>de</strong> réaliser les manipulations suivantes sur un fichier présent da ns l’éditeurd’analyses :• Dupliquer / Copier un fichier• Supprimer un fichier• Renommer un fichierWebDev perm<strong>et</strong> <strong>de</strong> réaliser les manipulations suivantessur une rubrique d’un fichier présent dansl’éditeur d’analyses :• Dupliquer / Copier une rubrique• Supprimer une rubrique• Renommer une rubriquePour plus <strong>de</strong> détails, consultez l’ai<strong>de</strong> en ligne.Partie 5 : Bases <strong>de</strong> données 171
5 Création d’un MCD (Modèle Conceptuel <strong>de</strong>s Données)Selon la méthodologie MERISE, le modèle conceptuel<strong>de</strong> données définit les obj<strong>et</strong>s <strong>et</strong> les actions<strong>de</strong>vant être pris en compte dans la base <strong>de</strong> données.Ce modèle représente uniquement les structuresd'information <strong>et</strong> les échanges d'informationdu système étudié, indépendamment <strong>de</strong>s contraintesphysiques liées à la nature <strong>de</strong> la base <strong>de</strong> donnéesutilisée.5.1 Créer un MCDPour créer un MCD :1. Sélectionnez l’option "Fichier .. Nouveau .. MCD".L’assistant <strong>de</strong> création du MCD se lance.2. Spécifiez :• le nom <strong>et</strong> le répertoire du MCD. Le MCD correspondà un fichier ".MCD". Par défaut, ce fichiersera créé dans le répertoire <strong>de</strong> l’analyse du proj<strong>et</strong>(répertoire .ANA). Ce répertoiredoit être accessible en lecture <strong>et</strong> en écriture.• le libellé du MCD décrivant succinctement lesuj<strong>et</strong> du MCD.• si le MCD doit être directement associé à l’analyseen cours. C<strong>et</strong>te analyse peut être une analyseexistante ou une analyse à créer.3. Le MCD créé <strong>de</strong>vient le MCD en cours. WebDevpropose automatiquement <strong>de</strong> créer la premièreentité.4. Créez l’ensemble <strong>de</strong>s éléments (entités, associations,propriétés <strong>et</strong> relations) <strong>de</strong> votre MCD.5.2 Créer une entitéPour créer une entité :1. Sélectionnez l’option "Entité .. Nouvelle entité".La <strong>de</strong>scription <strong>de</strong> l’entité s’affiche.2. Spécifiez :• le nom <strong>de</strong> l’entité. Ce nom sera le nom logiquedu fichier créé lors <strong>de</strong> la génération du MCD enMLD.• le libellé <strong>de</strong> l’entité résumant succinctement lesuj<strong>et</strong> <strong>de</strong> l’entité.•si une propriété <strong>de</strong> type "I<strong>de</strong>ntifiant automatique"doit être définie dans l’entité. La valeur <strong>de</strong>c<strong>et</strong>te propriété est unique pour chaque enregistrement<strong>et</strong> est automatiquement calculée parWebDev.• les notes détaillant le fonctionnement <strong>de</strong> l’entité(ongl<strong>et</strong> "Divers").3. L’entité <strong>de</strong>vient l’entité en cours. WebDev proposeautomatiquement <strong>de</strong> décrire les propriétés <strong>de</strong>c<strong>et</strong>te entité.5.3 Créer une associationPour créer une association :1. Sélectionnez l’option "Association .. Nouvelleassociation". La <strong>de</strong>scription <strong>de</strong> l’associations’ouvre.2. Spécifiez :• le nom <strong>de</strong> l’association. Lors <strong>de</strong> la génération duMCD en MLD, ce nom sera le nom logique dufichier créé si c<strong>et</strong>te association comporte aumoins une propriété ou fait parti d’une liaisoncomplexe.• le libellé <strong>de</strong> l’association résumant succinctementle suj<strong>et</strong> <strong>de</strong> l’association.• les notes détaillant le fonctionnement <strong>de</strong> l’association.3. L’association <strong>de</strong>vient l’association en cours.WebDev propose automatiquement <strong>de</strong> décrire lespropriétés <strong>de</strong> c<strong>et</strong>te association.5.4 Créer une propriétéPour décrire une propriété :1. Double-cliquez sur l’entité ou sur l’associationdans laquelle la propriété doit être créée. La fenêtre<strong>de</strong> <strong>de</strong>scription <strong>de</strong>s propriétés s’ouvre.2. Cliquez sur la première ligne vi<strong>de</strong> du tableau <strong>de</strong>spropriétés ou cliquez sur l’icône "+".3. Spécifiez le nom, le libellé, le type, la taille <strong>et</strong> lesnotes <strong>de</strong> la propriété.4. Dans le cas d’une propriété d’entité, cochezl’option "I<strong>de</strong>ntifiant" si la propriété est l’i<strong>de</strong>ntifiant<strong>de</strong> l’entité.5. Vali<strong>de</strong>z la <strong>de</strong>scription <strong>de</strong> la propriété.5.5 Créer une relationPour créer une relation :1. Sélectionnez l’option "Entité .. Tracer une relation".Le curseur <strong>de</strong> la souris se transforme encrayon.2. Sélectionnez soit les <strong>de</strong>ux entités à relier, soitl’entité <strong>et</strong> l’association à relier.3. Définissez les cardinalités <strong>de</strong> la relation.5.6 Définir les cardinalitésPour définir les cardinalités :1. Sélectionnez la relation dont les cardinalités doiventêtre définies.2. Sélectionnez l’option "Entité .. Informations surla relation".3. Choisissez la cardinalité parmi celles proposées.4. Vali<strong>de</strong>z la <strong>de</strong>scription <strong>de</strong>s cardinalités.172Partie 5 : Bases <strong>de</strong> données
6 Principales manipulations d’un MCDWebDev perm<strong>et</strong> <strong>de</strong> réaliser les manipulations suivantessur un MCD :• Supprimer un MCD• Renommer un MCD• Spécifier un facteur <strong>de</strong> zoom pour réduire ouagrandir l’affichage du MCD en cours.•Déplacer l’affichage du MCDWebDev perm<strong>et</strong> <strong>de</strong> réaliser les manipulations suivantessur une entité d’un MCD :• Dupliquer / Copier une entité• Supprimer une entité• Renommer une entitéWebDev perm<strong>et</strong> <strong>de</strong> réaliser les manipulations suivantessur une association d’un MCD :• Dupliquer / Copier une association• Supprimer une association• Renommer une associationWebDev perm<strong>et</strong> <strong>de</strong> réaliser les manipulations suivantessur une propriété d’un MCD :• Supprimer une propriété• Renommer une propriétéPour plus <strong>de</strong> détails, consultez l’ai<strong>de</strong> en ligne.7 Génération du MCD en MLDPour associer un MCD à un proj<strong>et</strong>, il est nécessaire<strong>de</strong> générer le MLD associé.Rappel : C’est le MLD qui est associé au proj<strong>et</strong> <strong>et</strong>non le MCD.La génération du MCD perm<strong>et</strong> <strong>de</strong> créer automatiquementle MLD correspondant après avoir vérifiéla validité du MCD.Pour générer le MCD en MLD :1. Sélectionnez l’option "Analyse .. Générer lemodèle logique".2. Définissez les paramètres <strong>de</strong> la génération duMCD en MLD :• le nom <strong>et</strong> le chemin du MLD généré. Le MLD correspondà un fichier ".WDA". Par défaut, ce fichiersera créé dans le répertoire <strong>de</strong> l’analyse du proj<strong>et</strong>(répertoire .ANA). Ce répertoiredoit être accessible en lecture <strong>et</strong> en écriture.•si les libellés <strong>de</strong>s associations sans propriétés(du MCD) sont conservés pour i<strong>de</strong>ntifier lesliaisons (du MLD).• le type d’accès aux fichiers <strong>de</strong> données. Selon l<strong>et</strong>ype choisi, les fichiers <strong>de</strong> données seront manipuléspar le moteur <strong>de</strong> WinDev, par un piloteOLEDB ou par un <strong>de</strong>s accès natifs <strong>de</strong> WinDev(SQL Server, Oracle, ...).• le type <strong>de</strong> la base <strong>de</strong> données utilisée.• le format <strong>de</strong>s caractères utilisés dans l’analyse.3. Vali<strong>de</strong>z la génération. Le MLD correspondant auMCD est automatiquement créé.Cas particulier : Mise à jour d’un MLD existantSi le nom <strong>et</strong> le chemin du MLD spécifiés lors <strong>de</strong> lagénération du MCD correspon<strong>de</strong>nt à un MLD existant,le MLD existant va être mis à jour avec la nouvelle<strong>de</strong>scription du MCD.Lors <strong>de</strong> la mise à jour d’un MLD existant, la générationvérifie :4. L’existence <strong>de</strong> l’entité dans le MLD :• si l’entité est nouvelle, le fichier correspondantest créé.• si l’entité existe déjà, ses propriétés sont mises àjour.5. L’existence <strong>de</strong>s propriétés dans le MLD :• si la propriété est nouvelle, la rubrique correspondanteest créée.• si la propriété existe déjà, avec la même <strong>de</strong>scription,aucune action n’est réalisée.• si la propriété existe déjà, avec une <strong>de</strong>scriptiondifférente, il y a un conflit. L’éditeur d’analysespropose :•soit d’ignorer la nouvelle <strong>de</strong>scription <strong>de</strong> la propriété<strong>et</strong> <strong>de</strong> ne faire aucune modification.•soit <strong>de</strong> m<strong>et</strong>tre à jour la rubrique existante avecla nouvelle <strong>de</strong>scription <strong>de</strong> la propriété.•soit <strong>de</strong> créer une nouvelle <strong>de</strong>scription synonymeavec la nouvelle <strong>de</strong>scription <strong>de</strong> la propriété.Partie 5 : Bases <strong>de</strong> données 173
6. L’existence <strong>de</strong>s relations <strong>et</strong> associations. Lorsquel’association nécessite la création d’un ou <strong>de</strong>plusieurs fichiers <strong>de</strong> relation, les fichiers <strong>et</strong> lesrubriques du MLD sont mis à jour <strong>de</strong> la manièredécrite ci-<strong>de</strong>ssus. Lorsqu’une relation a été modifiée,la liaison du MLD est recréée ou mise à jour :•si les propriétés i<strong>de</strong>ntifiantes d’une <strong>de</strong>s entitésont été modifiées, les cardinalités <strong>de</strong>s liaisonsexistantes sont mises à jour <strong>et</strong> les nouvellesliaisons sont créées.• si aucune propriété i<strong>de</strong>ntifiante d’une <strong>de</strong>s entitésn’a été modifiée, les cardinalités sont simplementmises à jour.Remarques :• La suppression d’entités, <strong>de</strong> relations ou d’associationsn’est pas prise en compte lors <strong>de</strong> lagénération du MCD en MLD.• La suppression <strong>de</strong> propriétés d’une entité peutêtre prise en compte en décochant "Conserverles modifications du MLD" <strong>de</strong>s options <strong>de</strong> lagénération du MCD en MLD. Dans ce cas, lesfichiers du MLD contiennent uniquement lesrubriques <strong>de</strong> l’entité correspondante du MCDaprès la conversion.8 Génération <strong>de</strong> l’analyse (MLD)La génération <strong>de</strong> l’analyse intervient avant la phase<strong>de</strong> programmation <strong>et</strong> après la phase <strong>de</strong> <strong>de</strong>scription<strong>de</strong>s fichiers. C<strong>et</strong>te génération perm<strong>et</strong> <strong>de</strong> :• vali<strong>de</strong>r les modifications effectuées sur l’analyse(MLD).•créer les modules nécessaires à la programmation.• m<strong>et</strong>tre à jour automatiquement les fichiers <strong>de</strong>données si nécessaire.Tant que l’analyse (le MLD) n’a pas été générée, la<strong>de</strong>scription <strong>de</strong> l’analyse (les fichiers) ne pourra pasêtre utilisée dans le proj<strong>et</strong>.La génération (option "Analyse .. Génération") comport<strong>et</strong>rois étapes :• vérification <strong>de</strong>s modifications effectuées <strong>et</strong> génération<strong>de</strong>s fichiers <strong>de</strong> la <strong>de</strong>scription <strong>de</strong> l’analyse.• modification automatique <strong>de</strong>s fichiers <strong>de</strong> donnéesaccessibles (fichiers présents dans le répertoire"EXE" du proj<strong>et</strong>).•Synchronisation du proj<strong>et</strong>.9 Gestion <strong>de</strong>s versions <strong>de</strong> l’analyseWinDev / WebDev perm<strong>et</strong> <strong>de</strong> gérer les différentesversions <strong>de</strong> l’analyse (option "Analyse.. Gestion<strong>de</strong>s versions").Il est alors possible <strong>de</strong> travailler sur l’analyse encours ou sur une analyse spécifique.Remarque : lorsqu’une analyse est endommagée,il est possible <strong>de</strong> sélectionner directement l’analyseendommagée pour restaurer par exemple une<strong>de</strong>s versions précé<strong>de</strong>ntes.Toutes les versions <strong>de</strong> l’analyse sont visualiséessous forme d’un graphique. Le carré jaune indiquele numéro <strong>de</strong> version <strong>de</strong> l'analyse; le libellé à droiterappelle la date <strong>de</strong> la génération.Entre <strong>de</strong>ux versions figurent <strong>de</strong>s "p<strong>et</strong>its rectangles"qui signifient :• un rectangle : il y a eu peu <strong>de</strong> modifications effectuéesentre les <strong>de</strong>ux versions.• plusieurs rectangles : il y a eu plusieurs modificationseffectuées entre les <strong>de</strong>ux versions.Pour visualiser le détail <strong>de</strong>s modifications effectuéesentre <strong>de</strong>ux versions : Double-cliquez sur laligne contenant les "p<strong>et</strong>its rectangles" ou cliquezsur le bouton [Modifications].Les options disponibles dans le gestionnaire <strong>de</strong> versionssont :• Restauration d’une analyse• Annulation <strong>de</strong> la <strong>de</strong>rnière génération• Rem<strong>et</strong>tre à 1 le numéro <strong>de</strong> version9.1 Restauration d'une analysePour restaurer une analyse à partir du gestionnaire<strong>de</strong> versions :1. Sélectionnez la version à restaurer.2. Il est possible <strong>de</strong> :•soit <strong>de</strong> restaurer la version dans le répertoirespécifié. Une analyse indépendante est créée174Partie 5 : Bases <strong>de</strong> données
correspondant à la version choisie. C<strong>et</strong>te optionest sélectionnée par défaut.• soit d’écraser l’analyse en cours.3. Vali<strong>de</strong>z. La restauration est effectuée.Attention : Les fichiers <strong>de</strong> données correspondantà une analyse <strong>de</strong> numéro <strong>de</strong> version supérieur à laversion restaurée ne pourront plus être ouverts. Ilfaut alors également restaurer <strong>de</strong>s fichiers correspondantà la version <strong>de</strong> l'analyse restaurée ou supprimerles fichiers existants pour qu'ils soientrecréés.9.2 Annulation <strong>de</strong> la <strong>de</strong>rnière générationL’annulation <strong>de</strong> la <strong>de</strong>rnière génération <strong>de</strong> l’analyseperm<strong>et</strong> <strong>de</strong> restaurer l’analyse dans son état avantla <strong>de</strong>rnière génération. Les modifications effectuées<strong>de</strong>puis ne sont pas appliquées.9.3 Rem<strong>et</strong>tre à 1 le numéro <strong>de</strong> la versionIl est possible <strong>de</strong> rem<strong>et</strong>tre le numéro <strong>de</strong> génération<strong>de</strong> l'analyse à "1" (option "Analyse .. Rem<strong>et</strong>tre à 1 laversion <strong>de</strong> l’analyse"). Dans ce cas le numéro <strong>de</strong>version <strong>de</strong> l'analyse est remis à un. Aucune actionspécifique n’est réalisée sur les fichiers <strong>de</strong> données.Partie 5 : Bases <strong>de</strong> données 175
Les différents types <strong>de</strong>fichiers accessiblesWebDev, WinDev <strong>et</strong> WinDev Mobile proposent un accès simple à la majorité <strong>de</strong>s bases<strong>de</strong> données du marché.176Partie 5 : Bases <strong>de</strong> données
Partie 5 : Bases <strong>de</strong> données 177
HyperFileSQLClassicUne application WebDev HyperFileSQL peut fonctionner en mo<strong>de</strong> Classic (appelé Hyper-FileSQL Classic) ou en mo<strong>de</strong> Client/Serveur.Les caractéristiques du mo<strong>de</strong> Classic sont les suivantes :• Un site utilisant HyperFileSQL Classic est exécuté sur différents navigateurs. Pourchaque site exécuté, une session est lancée sur le serveur.• Les fichiers <strong>de</strong> données sont présents dans un répertoire accessible par les sessions<strong>de</strong>s sites WebDev (sur le serveur Web ou sur un autre poste). Chaque sessionaccè<strong>de</strong> physiquement aux fichiers <strong>de</strong> données.• Les traitements (requête, lecture / ajout dans un fichier, ...) sont réalisés par chaquesession.Serveur WebSession 1Client 1Session 2Client 2Bases <strong>de</strong> donnéesHyperFileSQLClassicSession nClient n178Partie 5 : Bases <strong>de</strong> données
HyperFileSQLClient/ServeurHyperFileSQL Client/Serveur est un puissant système <strong>de</strong> gestion <strong>de</strong> bases <strong>de</strong> donnéesrelationnelles (SGBD/R) en mo<strong>de</strong> Client/Serveur.Les caractéristiques du mo<strong>de</strong> Client/Serveur sont les suivantes :• Un site HyperFileSQL Client/Serveur est exécuté sur différents postes utilisateur.Pour chaque site lancé, une session est présente sur le serveur Web.• Les fichiers <strong>de</strong> données sont présents sur un poste serveur (Serveur HyperFileSQL).Seul le poste serveur accè<strong>de</strong> physiquement aux fichiers <strong>de</strong> données.• L’ensemble <strong>de</strong>s traitements (requête, lecture/ajout dans un fichier, ...) est réalisé surle serveur.Serveur WebSession 1Client 1Session 2Serveur HyperFileSQLWindows ou LinuxClient 2Serveur MantaSession nBases <strong>de</strong> donnéesHyperFileSQLClient/ServeurClient nProtocole TCP/IPConnexion du type :Cable réseau,USB,Wi-Fi,Intern<strong>et</strong>...Partie 5 : Bases <strong>de</strong> données 179
Clusters HyperFileSQLClient/ServeurHyperFileSQL Cluster est une extension du modèle <strong>de</strong> base <strong>de</strong> données <strong>de</strong>HyperFileSQL Client/Serveur. Dans un cluster <strong>de</strong> bases <strong>de</strong> données, les différents serveursHyperFileSQL contiennent tous une copie <strong>de</strong>s bases <strong>de</strong> données <strong>et</strong> sont synchronisésen temps réel.• La charge en lecture peut être équilibrée entre différents serveurs.• La configuration physique peut évoluer sans interruption pour les postes clients.• En cas <strong>de</strong> crash d’un <strong>de</strong>s serveurs, le client est automatiquement redirigé vers unserveur opérationnel.180Partie 5 : Bases <strong>de</strong> données
HyperFileSQL : les fichierscréés physiquementL’éditeur d’analyses perm<strong>et</strong> <strong>de</strong> décrire la structure <strong>de</strong>s fichiers <strong>de</strong> données.Selon les informations saisies sous l’éditeur d’analyses, différents fichiers sont créésphysiquement.Remarque : Ce schéma présente uniquement les principaux fichiers créés. D’autres fichiersspécifiques peuvent être créés si le fichier utilise la journalisation, les transactionsou encore la réplication.Partie 5 : Bases <strong>de</strong> données 181
Associer les champs <strong>et</strong> lesdonnéesUne page peut afficher <strong>de</strong>s informations provenant :• d’une base <strong>de</strong> données : les champs sont directement liés aux rubriques <strong>de</strong>s fichiersou <strong>de</strong>s requêtes disponibles dans la base <strong>de</strong> données.• <strong>de</strong> variables présentes dans le co<strong>de</strong> <strong>de</strong> l’application (variables globales à la page ouau proj<strong>et</strong> ou paramètres passés à la page).Pour afficher ces informations dans une page, il est nécessaire <strong>de</strong> lier les champs <strong>de</strong> c<strong>et</strong>tepage avec :• les différentes rubriques <strong>de</strong> la base <strong>de</strong> données.• les différentes variables WLangage disponibles.La métho<strong>de</strong> d’affichage <strong>et</strong> <strong>de</strong> récupération <strong>de</strong>s informations est très simple :• La liaison d’un champ avec une rubrique ou une variable est définie sous l’éditeur <strong>de</strong>pages, lors <strong>de</strong> la <strong>de</strong>scription du champ (ongl<strong>et</strong> "Liaison").• La fonction PageVersFichier perm<strong>et</strong> <strong>de</strong> m<strong>et</strong>tre à jour soit l’enregistrement, soit lavariable avec les données présentes dans la page.• La fonction FichierVersPage perm<strong>et</strong> <strong>de</strong> m<strong>et</strong>tre à jour les données affichées dans lapage avec soit les informations enregistrées dans le fichier, soit les informationsenregistrées dans la variable.Liaison champ / rubrique182Partie 5 : Bases <strong>de</strong> données
Liaison champ / variablePartie 5 : Bases <strong>de</strong> données 183
LesrequêtesUne requête sert à interroger une base <strong>de</strong> données pour visualiser, insérer, modifier ousupprimer <strong>de</strong>s données. La structure <strong>de</strong> la requête définit les données manipulées.Une requête peut interroger un ou plusieurs fichiers.L’éditeur <strong>de</strong> requêtes perm<strong>et</strong> <strong>de</strong> créer très simplement <strong>de</strong>s requêtes, sans avoir à programmer.Remarque : En programmation, une requête peut être manipulée <strong>de</strong> la même façonqu’un fichier. En particulier, elle peut être associée à un champ d’affichage (une table parexemple) qui présentera les données r<strong>et</strong>ournées par la requête.184Partie 5 : Bases <strong>de</strong> données
Les requêtesintégréesLes champs d’une page peuvent être liés à un fichier <strong>de</strong> données ou à une requête existante,... Il est également possible <strong>de</strong> lier ces champs à une requête créée lors <strong>de</strong> la conceptiondu champ.Zone répétée liée à une requête intégréeRequête intégrée : MaPage_1$RequêteDans ce cas, la requête est intégrée à la page. Elle est présente dans le fichier WWH correspondantà la page. Si le fichier WWH est copié (dans un autre proj<strong>et</strong> par exemple), lesrequêtes intégrées utilisées par c<strong>et</strong>te page seront également copiées.Partie 5 : Bases <strong>de</strong> données 185
Le champ Table/Zone RépétéeLes champs Table/Zone répétée peuvent être utilisés pour afficher un ensemble d’informations(par exemple, le contenu d’un fichier <strong>de</strong> données). Le contenu <strong>de</strong> ces champspeut être issu <strong>de</strong> trois sources différentes :• Table/Zone Répétée "Fichier accès direct"• Table/Zone Répétée "Mémoire"• Table/Zone Répétée "Fichier chargée en mémoire"Remarque : Ces trois mo<strong>de</strong>s <strong>de</strong> remplissage vont être détaillés ici pour le champ Table.Les mêmes concepts s’appliquent au champ Zone Répétée.Table "Fichier accès direct"Une table fichier <strong>de</strong> type accès direct perm<strong>et</strong> d’afficher directement les données provenantd’un fichier <strong>de</strong> données ou d’une requête. La structure du fichier a été décrite sousl’éditeur d’analyses <strong>et</strong> les données ont été saisies par exemple dans le site.Un parcours du fichier perm<strong>et</strong> d’afficher les données dans la table. Pour chaque ligne affichée,le fichier est lu : l’enregistrement lu est affiché dans une ligne <strong>de</strong> la table.Il est possible <strong>de</strong> limiter les enregistrements affichés dans le champ en utilisant un filtre(fonction HFiltre utilisée dans le co<strong>de</strong> d’initialisation du champ).Plusieurs fonctions du WLangage perm<strong>et</strong>tent <strong>de</strong> manipuler les tables fichier. Ces fonctionscommencent toutes par "Table".Pour ajouter un enregistrement, ajoutez l’enregistrement dans le fichier HyperFileSQLcorrespondant (fonction HAjoute), puis ré-affichez la table avec la fonction TableAffiche.Pour supprimer un enregistrement, supprimez l’enregistrement dans le fichier HyperFileSQLcorrespondant (fonction HSupprime), puis ré-affichez la table avec la fonction TableAffiche.186Partie 5 : Bases <strong>de</strong> données
Table MémoireUne table mémoire perm<strong>et</strong> d’afficher directement <strong>de</strong>s données chargées en mémoire.Les données sont ajoutées dans la table par programmation (par exemple avec la fonctionTableAjouteLigne).Table Fichier chargée en mémoireLes tables fichier chargées en mémoire combinent les avantages <strong>de</strong>s tables fichier <strong>et</strong>ceux <strong>de</strong>s tables mémoire.La table est liée au fichier <strong>de</strong> données, mais le contenu du fichier est totalement chargéen mémoire. Le tri <strong>et</strong> la recherche sont disponibles sur toutes les colonnes.Les données non liées au fichier sont conservées lors <strong>de</strong> la manipulation <strong>de</strong> l’ascenseur(colonne <strong>de</strong> type Interrupteur pas exemple).Les enregistrements du fichier étant chargés en mémoire, ce type <strong>de</strong> table est conseillépour les fichiers <strong>de</strong> moins <strong>de</strong> 10 000 enregistrements (pour éviter une saturation mémoire).Remarque : Les différents mo<strong>de</strong>s <strong>de</strong> remplissage (mémoire, fichier, fichier chargé en mémoire)sont disponibles pour les listes, les combos, les tables, les zones répétées, ...Partie 5 : Bases <strong>de</strong> données 187
Récupérer <strong>de</strong>s donnéessur un siteUn site commercial perm<strong>et</strong> aux internautes d’effectuer <strong>de</strong>s comman<strong>de</strong>s, <strong>de</strong>sréservations, ...Pour récupérer ces informations, vous pouvez utiliser plusieurs métho<strong>de</strong>s.Conseil : Traitez les données récupérées dans une application <strong>de</strong> "Back Office" réaliséeavec WinDev.1 Partager les donnéesLes données d’un site WebDev peuvent être directement partagées avec les données <strong>de</strong>l’application Back Office perm<strong>et</strong>tant <strong>de</strong> traiter les opérations effectuées sur le site, entoute sécurité. Il suffit d’utiliser une base <strong>de</strong> données HyperFileSQL Client/Serveur.Le principe est le suivant :Avantage : Les données du site sont accessibles en temps réel.Inconvénient : Nécessité <strong>de</strong> gérer la sécurité <strong>de</strong> manière optimisée : utilisation d’uneconnexion sécurisée pour accé<strong>de</strong>r aux données, ouverture d’un port spécifique pour accé<strong>de</strong>raux données (port 4900 par défaut), configuration du firewall, ..C<strong>et</strong>te solution est conseillée pour un site installé sur un serveur dédié.188Partie 5 : Bases <strong>de</strong> données
2 Récupérer les données d’un site2.1 Grâce à une page AWP d’interrogationWebDev perm<strong>et</strong> <strong>de</strong> créer <strong>de</strong>s pages AWP. Les pages AWP sont <strong>de</strong>s pages indépendantes,pouvant exécuter <strong>de</strong>s traitements à partir <strong>de</strong> paramètres passés en ligne <strong>de</strong> comman<strong>de</strong>à la page. Les pages AWP peuvent être utilisées simplement pour récupérer les donnéessaisies sur le site.Les pages AWP présentes sur le serveur Web sont interrogées régulièrement par <strong>de</strong>s requêtesHTTP exécutées par l’application Back Office. Les données sont renvoyées sousforme <strong>de</strong> chaînes <strong>et</strong> traitées par l’application WinDev.Avantages :• Solution simple à m<strong>et</strong>tre en place.• Equivalent à un service Web personnalisé.• Ne nécessite aucun exécutable supplémentaire sur le serveur. Aucune session supplémentairen’est exécutée sur le serveur.Inconvénient : Récupération monodirectionnelle <strong>de</strong>s données : pas <strong>de</strong> mise à jour <strong>de</strong>sdonnées vers le serveur.C<strong>et</strong>te solution peut être utilisée avec un serveur mutualisé.Partie 5 : Bases <strong>de</strong> données 189
2.2 Grâce à un WebserviceWebDev perm<strong>et</strong> <strong>de</strong> créer <strong>de</strong>s Webservices. Le Webservice est installé sur le serveur Web<strong>et</strong> le serveur d’application WebDev perm<strong>et</strong> <strong>de</strong> l’utiliser. Le Webservice peut être utilisésimplement pour récupérer les données saisies sur le site.Le Webservice présent sur le serveur Web est interrogé régulièrement par <strong>de</strong>s requêtesHTTP exécutées par l’application Back Office. Les données sont renvoyées sous formeXML, sous forme <strong>de</strong> chaînes (ou autres) <strong>et</strong> traitées par l’application WinDev.Avantages :• Solution simple à m<strong>et</strong>tre en place.• Ne nécessite aucun exécutable supplémentaire sur le serveur. Aucune session supplémentairen’est exécutée sur le serveur.Inconvénient : Récupération monodirectionnelle <strong>de</strong>s données : pas <strong>de</strong> mise à jour <strong>de</strong>sdonnées vers le serveur.C<strong>et</strong>te solution peut être utilisée avec un serveur mutualisé.2.3 Par FTP :WebDev perm<strong>et</strong> d’effectuer régulièrement une sauvegar<strong>de</strong> <strong>de</strong>s fichiers <strong>de</strong> données dusite WebDev. C<strong>et</strong>te sauvegar<strong>de</strong> peut être ensuite transférée par FTP au siège <strong>de</strong> la société.Il suffit alors <strong>de</strong> :• récupérer la sauvegar<strong>de</strong> compressée <strong>de</strong>s fichiers <strong>de</strong> données• décompresser les fichiers (à l’ai<strong>de</strong> d’une application WinDev)• traiter les données présentes dans les fichiers.Avantages :• Solution simple à m<strong>et</strong>tre en place.• Ne nécessite aucun exécutable supplémentaire chez l’hébergeur.Inconvénient : Tous les fichiers <strong>de</strong> données <strong>de</strong> l’application sont récupérés.C<strong>et</strong>te solution peut être utilisée avec un serveur mutualisé.190Partie 5 : Bases <strong>de</strong> données
2.4 Par emails :Le principe :1. L’internaute effectue une comman<strong>de</strong> sur le site.2. Le site WebDev indique à l’internaute que la comman<strong>de</strong> a bien été enregistrée. L’internauteest informé qu’il recevra un email <strong>de</strong> confirmation.3. Le site WebDev envoie un email au siège <strong>de</strong> la société. C<strong>et</strong> email contient la comman<strong>de</strong>effectuée par l’internaute.4. Un email est envoyé à l’internaute par la société pour lui indiquer que sa comman<strong>de</strong>a bien été prise en compte.Avantages :• Solution simple à m<strong>et</strong>tre en place.• Ne nécessite aucun exécutable supplémentaire sur le serveur.Inconvénient : Récupération monodirectionnelle <strong>de</strong>s données : pas <strong>de</strong> mise à jour <strong>de</strong>sdonnées vers le serveur.C<strong>et</strong>te solution peut être utilisée avec un serveur mutualisé.Partie 5 : Bases <strong>de</strong> données 191
3 Effectuer une réplicationLa réplication perm<strong>et</strong> <strong>de</strong> maintenir à jour <strong>de</strong>s bases <strong>de</strong> données distantes <strong>de</strong> mêmestructure. Il est ainsi possible <strong>de</strong> faire une réplication entre la base <strong>de</strong> données d’un siteWebDev <strong>et</strong> la base <strong>de</strong> données <strong>de</strong> l’application WinDev au siège <strong>de</strong> la société.Par exemple, une base <strong>de</strong> données <strong>de</strong> saisie <strong>de</strong> comman<strong>de</strong>s <strong>et</strong> <strong>de</strong> gestion <strong>de</strong> stocks estutilisée à la fois sur un site WebDev (prise <strong>de</strong> comman<strong>de</strong>s en ligne) <strong>et</strong> au siège <strong>de</strong> la société(prise <strong>de</strong> comman<strong>de</strong>s téléphonique ou par courrier).La réplication perm<strong>et</strong> <strong>de</strong> :• transm<strong>et</strong>tre les comman<strong>de</strong>s saisies en ligne au siège <strong>de</strong> la société (réplicationmonodirectionnelle)• transm<strong>et</strong>tre les comman<strong>de</strong>s saisies en ligne au siège <strong>de</strong> la société, <strong>et</strong> <strong>de</strong> transm<strong>et</strong>trela mise à jour <strong>de</strong>s stocks au site Intern<strong>et</strong> (réplication bi-directionnelle)Attention : Il est nécessaire <strong>de</strong> prendre en compte les contraintes <strong>de</strong> la réplication dèsla création du proj<strong>et</strong>. En eff<strong>et</strong>, plusieurs règles doivent être respectées lors <strong>de</strong> la <strong>de</strong>scription<strong>de</strong> l’analyse <strong>et</strong> <strong>de</strong>s rubriques <strong>de</strong>s fichiers.La réplication peut être réalisée par email ou à l’ai<strong>de</strong> <strong>de</strong> la réplication universelle assistée.Pour plus <strong>de</strong> détails sur la réplication, consultez l’ai<strong>de</strong> en ligne.192Partie 5 : Bases <strong>de</strong> données
RéplicationuniverselleLa réplication universelle perm<strong>et</strong> <strong>de</strong> maintenir à jour <strong>de</strong>s bases <strong>de</strong> données <strong>de</strong> formati<strong>de</strong>ntique ou différent (HyperFileSQL Classic, Oracle, SQL Server, ...). Il est par exemplepossible <strong>de</strong> réaliser une synchronisation entre une base <strong>de</strong> données HyperFileSQLClassic <strong>et</strong> une base <strong>de</strong> données Oracle.La réplication universelle utilise un modèle centralisé : toutes les bases <strong>de</strong> données sesynchronisent avec une base <strong>de</strong> données maître. La base <strong>de</strong> données maître répercuteensuite les modifications vers les autres bases <strong>de</strong> données.Il est possible d’adapter la synchronisation à <strong>de</strong>s cas particuliers. Par exemple, il est possible<strong>de</strong> récupérer uniquement les enregistrements concernant un produit spécifié ou lesenregistrements réalisés à une certaine date, <strong>de</strong> gérer les conflits, ...Ces adaptations doivent être effectuées par programmation grâce à la fonction HRplProcédureFiltre.Partie 5 : Bases <strong>de</strong> données 193
Architecture3-tiersLe but du 3-Tiers est <strong>de</strong> séparer les 3 "couches" habituelles d’une application : IHM, traitements<strong>et</strong> données.Une application sera donc composée <strong>de</strong> 3 couches indépendantes :• une couche présentation,• une couche application,• une couche d’accès aux données.C<strong>et</strong>te séparation a pour but <strong>de</strong> rendre indépendante chacune <strong>de</strong>s couches afin <strong>de</strong> faciliterla maintenance <strong>et</strong> les évolutions futures <strong>de</strong> l’application. Elle assure une sécurité plusimportante car l’accès à la base <strong>de</strong> données n’est autorisé que par la couche <strong>de</strong> traitements.Elle a également l’avantage d’optimiser le travail en équipe <strong>et</strong> le développementmulti-cibles.194Partie 5 : Bases <strong>de</strong> données
PARTIE 6Tester un site web
Tester un site :Les éléments à testerLe test d’un site est une étape fondamentale dans le développement d’un site. Le testperm<strong>et</strong> <strong>de</strong> vérifier le bon fonctionnement du site <strong>et</strong> son utilisabilité.Voici quelques exemples <strong>de</strong>s principaux points à tester dans un site WebDev :• le fonctionnement du site :enchaînement <strong>de</strong>s pages, exécution du co<strong>de</strong> saisi, ...• le "look" du site :utilisez différents navigateurs (principalement Intern<strong>et</strong> Explorer <strong>et</strong> N<strong>et</strong>scape Navigator),utilisez différentes résolutions écran, redimensionnez le navigateur, ...• les fonctionnalités spécifiques au Web :impression, cookies, touche "Précé<strong>de</strong>nt" du navigateur, ...• l’accès au site par différents internautes :gestion <strong>de</strong>s logins <strong>et</strong> <strong>de</strong>s mots <strong>de</strong> passe, gestion <strong>de</strong>s accès concurrentiels auxfichiers <strong>de</strong> données, ...• la non-régression d’un site lors d’une mise à jour :validation <strong>de</strong>s modifications effectuées dans un site <strong>et</strong> vérification que les fonctionnalitésnon 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é<strong>de</strong>r au site.Partie 6 : Tester un site web 197
Comment testerun site ?Plusieurs outils sont disponibles pour tester un site WebDev :• l’éditeur principal <strong>de</strong> WebDev.• l’administrateur WebDev.Ce module est indispensable à l’exécution d’un site dynamique WebDev. Sur le poste<strong>de</strong> développement, il est possible <strong>de</strong> tester les sites dynamiques <strong>de</strong>puis une page <strong>de</strong>test créée par l’administrateur.• WDTestSite, l’outil <strong>de</strong> test <strong>de</strong> montée en charge.Le tableau ci-<strong>de</strong>ssous présente quand <strong>et</strong> comment utiliser ces différents mo<strong>de</strong>s <strong>de</strong> test.Mo<strong>de</strong> <strong>de</strong> test Type <strong>de</strong> test Lancement du testEditeurAdministrateurWebDev(site dynamiqueWebDev uniquement)Le lancement du test <strong>de</strong>puis l’éditeurperm<strong>et</strong> par exemple <strong>de</strong> tester :- les fonctionnalités du site,- le co<strong>de</strong> utilisé dans les différentstraitements. Un puissantdébogueur perm<strong>et</strong> <strong>de</strong> suivrepas à pas l’exécution <strong>de</strong>s différentstraitements.- l’utilisation du site avec différentsnavigateurs (installés surle poste <strong>de</strong> développement).Ce type <strong>de</strong> test perm<strong>et</strong> l’utilisationdu débogueur.Le lancement du test <strong>de</strong>puis l’administrateurperm<strong>et</strong> par exemple <strong>de</strong>tester :- les fonctionnalités du site,- les fonctions spécifiques auWeb (cookies, ...),- l’utilisation du site dans <strong>de</strong>sconditions réelles.Option "Proj<strong>et</strong> .. Mo<strong>de</strong> test .. Testerle proj<strong>et</strong>" ou "Proj<strong>et</strong> .. Mo<strong>de</strong>test .. Tester le proj<strong>et</strong> <strong>de</strong>puis lapage d’accueil" <strong>de</strong>puis l’éditeur.Remarque :Les droits <strong>de</strong> l’internaute (droitsd’accès, d’écriture <strong>et</strong> <strong>de</strong> lecture)correspon<strong>de</strong>nt aux droits du développeur.1. Lancez l’administrateur Web-Dev <strong>de</strong>puis le menu "Démarrer".2. Cliquez sur le bouton "Page <strong>de</strong>test" (ongl<strong>et</strong> "Avancé").Remarque : Ce test perm<strong>et</strong> d’utiliserle site WebDev dans <strong>de</strong>s conditionsi<strong>de</strong>ntiques à celles d’uninternaute.Les droits <strong>de</strong> l’internaute (droitsd’accès, d’écriture <strong>et</strong> <strong>de</strong> lecture)correspon<strong>de</strong>nt aux droits <strong>de</strong> l’utilisateurpar défaut défini dans leserveur Web utilisé.198Partie 6 : Tester un site web
WDTestSite(site dynamiqueWebDev uniquement)WDTestSite perm<strong>et</strong> <strong>de</strong> réaliser <strong>de</strong>stests <strong>de</strong> montée en charge.WDTestSite perm<strong>et</strong> <strong>de</strong> lancer plusieursconnexions simultanées àun site WebDev.Chaque connexion effectue unesuccession d’actions dans le siteWebDev (scénario pré-défini)Ce test doit être effectué sur un siteWebDev installé sur un poste <strong>de</strong>déploiement, prêt à être mis en service.1. Créez un scénario <strong>de</strong> test (avecWDTestSite).2. Installez WDTestSite <strong>et</strong> le scénariosur différents postes poursimuler un grand nombre d’accès.3. Spécifiez le nombre <strong>de</strong> connexionsà effectuer.4. Lancez le scénario <strong>de</strong> test surchaque poste.Remarque :Chaque poste effectue un nombre<strong>de</strong> connexions défini. Chaqueconnexion effectue le scénariosélectionné.automati-TestsquesLes tests automatiques perm<strong>et</strong>tent<strong>de</strong> tester les procédures <strong>et</strong> les classesd’un site à différents niveaux<strong>de</strong> développement.Les scénarios <strong>de</strong> test sont automatiquementgénérés en WLangage àpartir du test <strong>de</strong> la procédure ou <strong>de</strong>la classe. Les scénarios peuventêtre modifiés sous l’éditeur <strong>de</strong> co<strong>de</strong>.1.Affichez la procédure ou laclasse sous l’éditeur <strong>de</strong> co<strong>de</strong>.2. Sélectionnez l’option "Testsautomatiques .. Enregistrer unnouveau test".Partie 6 : Tester un site web 199
LedébogueurPour m<strong>et</strong>tre au point votre co<strong>de</strong>, un débogueur est livré en standard avec WebDev.Le débogueur perm<strong>et</strong> une exécution pas à pas <strong>de</strong> vos sites dynamiques, en visualisantle co<strong>de</strong> WLangage exécuté, le contenu <strong>de</strong>s variables, ...Pour lancer le débogueur, utilisez :• soit un point d’arrêt directement placé dans l’éditeur <strong>de</strong> co<strong>de</strong> : lorsque la ligne précédéed’un point d’arrêt sera exécutée, le débogueur sera automatiquement lancé.Pour poser un point d’arrêt, il suffit <strong>de</strong> cliquer <strong>de</strong>vant la ligne <strong>de</strong> co<strong>de</strong> : une pucerouge apparaît.• soit le mot-clé serveur STOP du WLangage directement dans votre co<strong>de</strong> WLangage :le débogueur sera automatiquement lancé dès que c<strong>et</strong>te ligne <strong>de</strong> co<strong>de</strong> sera exécutée.• soit l’option "Proj<strong>et</strong> .. Mo<strong>de</strong> Test .. Tracer le proj<strong>et</strong>" : le débogueur est lancé en mêm<strong>et</strong>emps que le test du site dynamique.200Partie 6 : Tester un site web
Quand peut-on utiliser ledébogueur ?Lorsqu’un test est réalisé <strong>de</strong>puis l’éditeur, le débogueur peut toujours être utilisé. Il suffit<strong>de</strong> placer les points d’arrêt aux endroits voulus, pour pouvoir débogueur pas à pas le site.Les différents types <strong>de</strong> tests disponibles <strong>de</strong>puis l’éditeur sont les suivants :• Le "Go" <strong>de</strong> page :Le test <strong>de</strong> la page en cours sous l’éditeur peut être lancé par l’option "Co<strong>de</strong> .. Testerla page".• Le "Go" <strong>de</strong> proj<strong>et</strong> :Le test du proj<strong>et</strong> sur le poste <strong>de</strong> développement peut être lancé par l’option "Proj<strong>et</strong> ..Mo<strong>de</strong> test .. Tracer le proj<strong>et</strong>".• Le proj<strong>et</strong> déployé :Il est possible <strong>de</strong> débogueur le proj<strong>et</strong> déployé. C<strong>et</strong>te fonctionnalité est très utile pourreproduire un problème survenant uniquement dans <strong>de</strong>s conditions spécifiques.Pour lancer le proj<strong>et</strong> déployé, il faut utiliser l’option "Proj<strong>et</strong> .. Mo<strong>de</strong> test .. Se connecterà un site <strong>et</strong> déboguer la connexion".Remarque : C<strong>et</strong>te option est utilisable avec un serveur <strong>de</strong> développement ou <strong>de</strong>déploiement. Le serveur doit être configuré pour autoriser le débogage à distance.• Le proj<strong>et</strong> déployé en cours d’utilisation :Il est possible <strong>de</strong> débogueur le proj<strong>et</strong> déployé, en cours d’utilisation. C<strong>et</strong>te fonctionnalitéest très utile pour reproduire un problème survenant uniquement dans <strong>de</strong>sconditions spécifiques. Le cas le plus courant : vous utilisez le site, <strong>et</strong> vous rencontrezle problème : vous pouvez lancer le débogueur immédiatement en m<strong>et</strong>tant unpoint d’arrêt dans le co<strong>de</strong> <strong>de</strong> votre proj<strong>et</strong>.Pour utiliser une session du proj<strong>et</strong> déployé, il faut utiliser l’option "Proj<strong>et</strong> .. Mo<strong>de</strong> test.. Déboguer une connexion existante".Remarque : C<strong>et</strong>te option est utilisable avec un serveur <strong>de</strong> développement ou <strong>de</strong>déploiement. Le serveur doit être configuré pour autoriser le débogage à distance.Partie 6 : Tester un site web 201
Test d’un site en pratique1 PrésentationWebDev propose plusieurs métho<strong>de</strong>s pour testervos sites :• test <strong>de</strong> l’ensemble du proj<strong>et</strong>,• test d’une page seule,• test d’une requête seule (consultez le livre "Etats<strong>et</strong> Requêtes" pour plus <strong>de</strong> détails),•test d’un état seul (consultez le livre "Etats <strong>et</strong>Requêtes" pour plus <strong>de</strong> détails),• exécution du proj<strong>et</strong> pas à pas,• test <strong>de</strong>s performances <strong>de</strong> votre site,• test <strong>de</strong> non régression / test automatique,• test <strong>de</strong> montée en charge.Le test <strong>de</strong> l’ensemble du proj<strong>et</strong> perm<strong>et</strong> <strong>de</strong> simulerle lancement du site. Il est ainsi possible <strong>de</strong> testerle site dans son ensemble, même si son développementn’est pas terminé. Dès qu’un problème apparaît,vous pouvez lancer le débogueur pourconnaître <strong>et</strong> solutionner le problème rencontré.Le test d’une page seule perm<strong>et</strong> d’exécuter uniquementla page en cours. Vous pouvez ainsi choisir <strong>de</strong>tester votre proj<strong>et</strong> à partir d’une page donnée, ou<strong>de</strong> tester le fonctionnement d’une page dès queson développement est terminé. Comme pour l<strong>et</strong>est du proj<strong>et</strong>, il est possible <strong>de</strong> lancer le débogueurdès qu’un problème est rencontré.Le test d’une requête seule perm<strong>et</strong> d’exécuter uniquementla requête en cours. Vous pouvez ainsichoisir <strong>de</strong> tester le fonctionnement d’une requêtedès que son développement est terminé.Le test d’un état seul perm<strong>et</strong> d’exécuter uniquementl'état en cours. Vous pouvez ainsi choisir <strong>de</strong>tester le fonctionnement d’un état dès que sondéveloppement est terminé. Comme pour le test duproj<strong>et</strong>, il est possible <strong>de</strong> lancer le débogueur dèsqu’un problème est rencontré.L’exécution du proj<strong>et</strong> pas à pas perm<strong>et</strong> <strong>de</strong> lancer ledébogueur au lancement du site. C<strong>et</strong>te solutionperm<strong>et</strong> <strong>de</strong> suivre méticuleusement le déroulementdu site.Le test <strong>de</strong>s performances <strong>de</strong> votre site perm<strong>et</strong> <strong>de</strong>vérifier <strong>et</strong> d’optimiser le temps d’exécution <strong>de</strong> votresite.Le test <strong>de</strong> non régression (ou test automatique)est basé sur l’exécution <strong>de</strong> scripts. Il perm<strong>et</strong> <strong>de</strong>vérifier que lors <strong>de</strong> l’exécution <strong>de</strong> votre site, ... lesfonctionnalités existantes sont toujours supportées.Le test <strong>de</strong> montée en charge perm<strong>et</strong> <strong>de</strong> lancer plusieursconnexions simultanées à un même sitedynamique WebDev.2 Tester un proj<strong>et</strong> WebDev2.1 Tester le proj<strong>et</strong> <strong>de</strong>puis l’éditeurLe lancement du test <strong>de</strong>puis l’éditeur perm<strong>et</strong> parexemple <strong>de</strong> tester :• les fonctionnalités du site,• l’utilisation du site avec différents navigateurs.Le test d’un proj<strong>et</strong> peut être lancé quel que soitl’élément en cours sous l'éditeur.Différents types <strong>de</strong> testPour tester un site statique <strong>de</strong>puis l'éditeur, sélectionnezl'option "Proj<strong>et</strong> .. Mo<strong>de</strong> Test .. Tracer le proj<strong>et</strong><strong>de</strong>puis la page d’accueil" (ou l’icône ).L’éditeur est automatiquement réduit en icône, lenavigateur précisé dans les options <strong>de</strong> WebDevs’ouvre (option "Outils .. Options .. Options générales<strong>de</strong> WebDev .. Web") <strong>et</strong> la page d’accueil du sites’affiche.Il est également possible <strong>de</strong> se connecter à un sitepour déboguer la connexion, ou <strong>de</strong> déboguer laconnexion en cours à un site.Pour tester un site dynamique <strong>de</strong>puis l'éditeur,sélectionnez l’option "Proj<strong>et</strong> .. Mo<strong>de</strong> test .. Tester leproj<strong>et</strong>" (ou l'icône , ou [Ctrl] + [F9]).L’éditeur est automatiquement réduit en icône, lenavigateur précisé dans les options <strong>de</strong> WebDevs’ouvre (option "Outils .. Options .. Options générales<strong>de</strong> WebDev .. Web") <strong>et</strong> la première page du sites’affiche.202Partie 6 : Tester un site web
Pour tester un site statique + dynamique <strong>de</strong>puisl'éditeur :•pour tester la partie statique du site: effectuezles manipulations correspondant au test d’unsite statique.• pour tester la partie dynamique du site : effectuezles manipulations correspondant au testd’un site dynamique.Remarque : Pour tester un site avec un navigateurspécifique, sélectionnez l’option "Proj<strong>et</strong> .. Navigateur<strong>de</strong> test" <strong>et</strong> sélectionnez le navigateur voulu. Lenavigateur par défaut est défini dans les options <strong>de</strong>WebDev (option "Outils .. Options .. Options générales<strong>de</strong> WebDev" ongl<strong>et</strong> "WEB").Site dynamique : LancementLes modules suivants sont automatiquement lancéslors d’un test d’un site dynamique WebDev :• Le serveur Web installé sur le poste <strong>et</strong> configurépour WebDev lors <strong>de</strong> l'installation <strong>de</strong> WebDev.Si le serveur Web n'est pas lancé, le test ne peutpas se faire.• L’administrateur WebDev (WD<strong>16</strong>0ADMIN.EXE).L’administrateur perm<strong>et</strong> <strong>de</strong> gérer les connexionsau serveur Web <strong>et</strong> <strong>de</strong> paramétrer les sites Web-Dev.Remarque : un test <strong>de</strong> proj<strong>et</strong> peut être lancé<strong>de</strong>puis la page <strong>de</strong> test <strong>de</strong> l’administrateur (Ongl<strong>et</strong>"Avancé" <strong>de</strong> WD<strong>16</strong>0ADMIN, bouton "Page <strong>de</strong>test").• Le moteur WebDev (WD<strong>16</strong>0AWP.EXE).Le moteur WebDev perm<strong>et</strong> <strong>de</strong> gérer les requêteseffectuées par les internautes <strong>de</strong>puis leur navigateur<strong>et</strong> <strong>de</strong> leur renvoyer la page HTML dynamiquecorrespondante.Remarque : Le moteur WebDev est lancé uniquementsi le proj<strong>et</strong> contient <strong>de</strong>s pages dynamiques.• Le navigateur Intern<strong>et</strong>.Le navigateur Intern<strong>et</strong> perm<strong>et</strong> d'afficher lespages HTML du site WebDev.2.2 Tester le proj<strong>et</strong> <strong>de</strong>puis l’administrateurWebDevLe lancement du test <strong>de</strong>puis l’administrateur Web-Dev (WD<strong>16</strong>0Admin) perm<strong>et</strong> par exemple <strong>de</strong> tester :• les fonctionnalités du site.•les fonctions spécifiques au Web (utilisation <strong>de</strong>scookies, ...).Remarque : L’administrateur WebDev perm<strong>et</strong> uniquement<strong>de</strong> tester les sites dynamiques ou la partiedynamique <strong>de</strong>s sites statique + dynamique.Le lancement du test <strong>de</strong>puis l’administrateur Web-Dev est équivalent au lancement du site <strong>de</strong>puis unposte distant.Avant <strong>de</strong> déployer un site WebDev, il est conseillé<strong>de</strong> tester au moins une fois ce site <strong>de</strong>puis l’administrateurWebDev.Pour lancer le test <strong>de</strong>puis l’administrateurWebDev :1. Lancez l’administrateur WebDev (option "Outils ..WD<strong>16</strong>0Admin - Administrateur WebDev").2. Cliquez sur le bouton "Page <strong>de</strong> test" (ongl<strong>et</strong>"Avancé").Pour arrêter le test, affichez l’administrateur Web-Dev (en cliquant sur l’icône présente dans labarre <strong>de</strong>s tâches) <strong>et</strong> cliquez sur le bouton "Déconnecter"(ongl<strong>et</strong> "Connexions").Remarque : L’administrateur WebDev perm<strong>et</strong> égalementd’effectuer un test du proj<strong>et</strong> équivalent autest du proj<strong>et</strong> <strong>de</strong>puis l’éditeur :1. Lancez l’administrateur WebDev (option "Outils ..WD<strong>16</strong>0Admin - Administrateur WebDev").2. Cliquez sur le bouton "Tester" (ongl<strong>et</strong> "Connexions").2.3 Test <strong>de</strong> montée en charge / Test <strong>de</strong> nonrégressionL’outil WDTestSite perm<strong>et</strong> <strong>de</strong> réaliser <strong>de</strong>s tests <strong>de</strong>montée en charge : WDTestSite perm<strong>et</strong> <strong>de</strong> lancerplusieurs connexions simultanées à un site dynamiqueWebDev.Chaque connexion effectue une successiond’actions dans le site WebDev (scénario pré-défini).Pour plus <strong>de</strong> détails sur WDTestSite, consultezl’ai<strong>de</strong> en ligne.Partie 6 : Tester un site web 203
3 Tester un site WebDev distantWebDev offre plusieurs possibilités pour tester <strong>et</strong>déboguer un site directement sur le poste <strong>de</strong> développement.Mais dans certains cas, il est nécessaire<strong>de</strong> déboguer directement le site enexploitation.Il est ainsi possible <strong>de</strong> déboguer <strong>de</strong>puis votrebureau <strong>de</strong> Paris, un site lancé sur un serveur WEBprésent à Taïwan. Le débogage est effectué sansse déplacer, directement sur la configuration finale.Deux fonctionnalités sont disponibles :•Lancement <strong>et</strong> débogage du site sur un serveurd'application distant.•Débogage d'un site en cours d'exécution sur unserveur d'application distant.Pour ces <strong>de</strong>ux fonctionnalités, une configurationspécifique <strong>de</strong> la machine distante est nécessaire.4 Tester une page4.1 Tester la page <strong>de</strong>puis l’éditeurPour tester une page <strong>de</strong>puis l'éditeur :1. Ouvrez la page à tester.2. Sélectionnez l'option "Co<strong>de</strong> .. Tester la page"(icône , ou [F9]). L'éditeur est automatiquementréduit en icône <strong>et</strong> la page s'exécute.Lors du test, l’ensemble <strong>de</strong>s fonctionnalités <strong>de</strong> lapage pourront être exécutées. Il sera possible parexemple <strong>de</strong> lancer d’autres pages.4.2 Arrêter le test d’une pagePour arrêter le test, plusieurs métho<strong>de</strong>s sontpossibles :• 1ère métho<strong>de</strong> :Fermez la page en cours <strong>de</strong> test. WebDev affichel’éditeur en cours au moment du lancement dutest.• 2ème métho<strong>de</strong> :•Revenez dans l’éditeur avec la barre <strong>de</strong>s tâchesou avec [Alt] + [Tab].•Confirmez l’arrêt du test. WebDev affiche l’éditeuren cours au moment du lancement du test.5 Tracer un proj<strong>et</strong>5.1 Principes du débogageLe débogage d’une application consiste à :• vérifier le bon fonctionnement d’un traitement,• comprendre le fonctionnement d’un programmeexistant,• vérifier la valeur <strong>de</strong>s variables,• vérifier le bon fonctionnement <strong>de</strong> cas particuliersdans une application ou un site.Le débogueur perm<strong>et</strong> <strong>de</strong> réaliser ces opérations.Remarque : WebDev m<strong>et</strong> également à votre dispositiondivers outils <strong>de</strong> trace (fenêtre <strong>de</strong> trace, boîted’information, ...). Pour plus <strong>de</strong> détails, consultez leparagraphe “Déboguer sans le débogueur”,page 205.5.2 Présentation du débogueurLe débogueur perm<strong>et</strong> <strong>de</strong> tracer les programmes enWLangage afin <strong>de</strong> faciliter la mise au point <strong>de</strong> programmes.Le co<strong>de</strong> source exécuté est visualisé à l’écran. Lesdifférents traitements exécutés sont hiérarchisésdans le vol<strong>et</strong> "Débogueur".La valeur <strong>de</strong>s variables peut être visualisée :• individuellement dans la bulle d’ai<strong>de</strong> <strong>de</strong> survol<strong>de</strong> chaque variable.•dans le vol<strong>et</strong> "Débogueur".5.3 Fonctionnalités du débogueurLe débogueur perm<strong>et</strong> <strong>de</strong> :• connaître la pile <strong>de</strong>s appels• visualiser le contenu <strong>de</strong>s variables ou <strong>de</strong>s expressions204Partie 6 : Tester un site web
• exécuter pas à pas avec possibilité <strong>de</strong> sauter <strong>de</strong>sblocs.• utiliser <strong>de</strong>s points d’arrêt conditionnels• modifier le co<strong>de</strong> tout en continuant l’exécution,• ...5.4 Déboguer sans le débogueurDans certains cas, l’exécution d’un programmeavec ou sans le débogueur peut être différente.En eff<strong>et</strong>, le débogueur introduit <strong>de</strong>s pauses dansl’exécution du traitement, durant lesquelles Windowseffectue certaines tâches.Ainsi, le débogueur ne peut pas être utilisé dansune procédure appelée par timer ou dans le co<strong>de</strong><strong>de</strong> l’ascenseur.Remarque : Pour connaître l’ensemble <strong>de</strong>s limitesdu débogueur, consultez l’ai<strong>de</strong> en ligne.Pour déboguer ces applications, il peut être nécessairepar exemple <strong>de</strong> suivre l’évolution d’unevaleur, le passage dans différentes procédures, ...Ces informations peuvent être :• affichées à l’écran• stockées dans un fichier <strong>de</strong> trace.Attention : Si les informations sont affichées àl’écran, elles doivent être affichées uniquementlors <strong>de</strong>s tests <strong>de</strong> l’application.Afficher <strong>de</strong>s informationsDeux outils perm<strong>et</strong>tent d’afficher <strong>de</strong>sinformations :• les boîtes d’informations : fonction Info du WLangage.Attention : L’affichage d’une boîte d’informationest blocante.• la fenêtre <strong>de</strong> trace : fonction Trace du WLangage.La fenêtre <strong>de</strong> trace s’affiche en haut à gauche <strong>de</strong>l’écran, sans interrompre le déroulement du programme.Gérer l’affichage <strong>de</strong>s informations <strong>de</strong>débogageL’affichage à l’écran <strong>de</strong>s informations <strong>de</strong> débogageest utile uniquement en mo<strong>de</strong> test.Avant <strong>de</strong> diffuser une application, il est donc nécessaire<strong>de</strong> supprimer tout affichage superflu.Pour éviter tout oubli, il est conseillé <strong>de</strong> gérer l’affichage<strong>de</strong>s informations <strong>de</strong> débogage à l’ai<strong>de</strong> d’uneprocédure globale.Par exemple :PROCEDURE MaTrace(ChaîneATracer)SI EnMo<strong>de</strong>Test() ALORSTrace(ChaîneATracer)FINDans ce co<strong>de</strong>, selon le résultat <strong>de</strong> la fonctionEnMo<strong>de</strong>Test, la fenêtre <strong>de</strong> trace apparaît uniquementlors d’un test <strong>de</strong> l’application.Une telle procédure perm<strong>et</strong> <strong>de</strong> laisser l’appel auxfenêtres <strong>de</strong> trace dans le co<strong>de</strong> <strong>de</strong> l’application,sans risque d’apparition en clientèle.L’appel à c<strong>et</strong>te procédure <strong>de</strong> trace est i<strong>de</strong>ntique àl’utilisation <strong>de</strong> la fonction Trace :MaTrace("Client : "+...Client.NumClient)Créer un fichier <strong>de</strong> traceLors <strong>de</strong> traitements longs (traitements Batchs, ...),pour contrôler le bon déroulement du programme,il est nécessaire <strong>de</strong> conserver une trace physique<strong>de</strong>s traitements effectués (un fichier texte parexemple).La procédure suivante perm<strong>et</strong> <strong>de</strong> gérer par exemplel’affichage <strong>de</strong> la trace :• soit à l’écran (paramètre /DEBUG en ligne <strong>de</strong>comman<strong>de</strong>).• soit dans un fichier texte (mo<strong>de</strong> par défaut).PROCEDURE MaTrace(ChaîneATracer)Fichier est un entierMo<strong>de</strong>Debug est un booléen = FauxSI Position(LigneComman<strong>de</strong>(),..."/DEBUG") > 0 ALORSMo<strong>de</strong>Debug = VraiFINSI Mo<strong>de</strong>Debug ALORSTrace(ChaîneATracer)SINONFichier = fOuvre(..."C:\Trace.txt"+,...foCréationSiInexistant+...foEcriture+foAjout)SI Fichier -1 ALORSfEcritLigne(Fichier,...DateVersChaîne(DateSys())+..."->"+HeureVersChaîne(HeureSys())fEcritLigne(Fichier,...ChaîneATracer)fEcritLigne(" ")fFerme(Fichier)FINFINPartie 6 : Tester un site web 205
Remarques :• Le fichier <strong>de</strong> trace : "C:\Trace.txt"" est créé pardéfaut. Ce fichier contient les informations à tracerdurant l’exécution du programme.Les informations sont complétées par la date <strong>et</strong>l’heure <strong>de</strong> chaque "Trace". Il est ainsi possible <strong>de</strong>déterminer un éventuel dysfonctionnementdurant le traitement.• Exemple <strong>de</strong> contenu du fichier <strong>de</strong> trace :01/12/2001 - 10:53:25:20Nom <strong>de</strong> client : Martin6 Test <strong>de</strong> performances6.1 PrésentationL'analyseur <strong>de</strong> performances est un outil perm<strong>et</strong>tant<strong>de</strong> vérifier <strong>et</strong> d'optimiser le temps d'exécution<strong>de</strong> votre site.Son principe est simple :Vous testez votre site. Pendant ce test, l'analyseur<strong>de</strong> performances répertorie toutes les actionseffectuées <strong>et</strong> les traitements correspondants exécutés.A la fin du test, l'analyseur <strong>de</strong> performances vousprésente :• les 10 manipulations qui ont pris le plus <strong>de</strong>temps• toutes les actions effectuées dans le site testé,triées par durée (<strong>de</strong> l'action la plus longue àl'action la moins longue).Il est alors possible <strong>de</strong> sélectionner un traitementafin d'analyser les causes <strong>de</strong> son temps <strong>de</strong> traitementpour l'optimiser.6.2 Lancer l’analyseur <strong>de</strong> performancesPour lancer l'analyseur <strong>de</strong> performances, sélectionnezl'option "Proj<strong>et</strong> .. Analyseur <strong>de</strong> performances ..Analyser les performances".Le proj<strong>et</strong> est alors automatiquement exécuté enmo<strong>de</strong> test. Vous pouvez exécuter le traitement àoptimiser dans votre site.Pour revenir sous l'éditeur, il suffit <strong>de</strong> fermer votreapplication ou votre site.L'analyseur <strong>de</strong> performances affiche alors le résultat<strong>de</strong> l'analyse.Remarque : Il est conseillé d'utiliser l'analyseur <strong>de</strong>performances pour optimiser votre site (avant sadiffusion par exemple).6.3 Lire le résultat <strong>de</strong> l'analyseur <strong>de</strong> performancesL'analyseur <strong>de</strong> performances présente le résultat<strong>de</strong> l'analyse dans <strong>de</strong>ux ongl<strong>et</strong>s :• l'ongl<strong>et</strong> "Synthèse" présente les 20 traitementsqui ont pris le plus <strong>de</strong> temps.• l'ongl<strong>et</strong> "Détails" présente tous les traitementslancés lors du test <strong>de</strong> l'application (classés duplus long au plus rapi<strong>de</strong>).Pour chaque traitement, les informations suivantessont affichées :Fonction Fonction, traitement ou procédureexécutée.Temps Total Temps d'exécution <strong>de</strong> la fonction.Nb appels Nombre d'appels effectués à la fonction(procédure ou traitement).Temps 1appelTemps d'exécution d'un appel à lafonction (procédure ou traitement).% co<strong>de</strong> Pourcentage <strong>de</strong> co<strong>de</strong> exécuté horsappel à une fonction WLangage ou àun appel d'une fonction ou une procédurepersonnelle.Parent Traitement qui a appelé la fonction.Remarque :• Le libellé "Exécution complète" représente l<strong>et</strong>emps compl<strong>et</strong> <strong>de</strong> l’exécution du test du site réaliséavec l’analyseur <strong>de</strong> performances.• Le libellé "Total Page XXX" représente le tempscompl<strong>et</strong> <strong>de</strong> l’exécution <strong>de</strong> la page XXX (<strong>de</strong> sonouverture à sa ferm<strong>et</strong>ure).6.4 Choisir un traitement à optimiserLe choix du traitement à optimiser se fait en fonction<strong>de</strong> plusieurs critères :• le temps d’exécution du traitement. Les traitementsles plus longs doivent bien entendu êtreoptimisés.206Partie 6 : Tester un site web
• le pourcentage <strong>de</strong> temps passé dans le traitement<strong>de</strong> la fonction ou <strong>de</strong> la procédure. Plus cepourcentage est important, plus le co<strong>de</strong> peutcontenir <strong>de</strong>s traitements pouvant être optimisés.Remarque : Si le traitement correspond à une fonctionWLangage, il est relativement difficile <strong>de</strong> l’optimiser.7 Tests <strong>de</strong> non-régression7.1 PrésentationSoucieux <strong>de</strong> la qualité <strong>de</strong>s applications, plusieursoutils <strong>de</strong> tests sont à votre disposition :•Le mo<strong>de</strong> test (Go <strong>de</strong> proj<strong>et</strong> ou Go <strong>de</strong> page) quiperm<strong>et</strong> <strong>de</strong> tester immédiatement une modificationdans votre site.• L’utilitaire WDTestSite qui perm<strong>et</strong> <strong>de</strong> réaliser différentstests sur un site WebDev.Pour automatiser ces tests, <strong>et</strong> augmenter la qualité<strong>de</strong> vos applications, vous pouvez désormais faire<strong>de</strong>s tests unitaires automatiques. Grâce à cestests, il est encore plus simple <strong>de</strong> contrôler toutesles fonctionnalités proposées par vos applications.7.2 Tests automatiquesChaque test est composé d'un scénario directementéditable dans l'interface du produit. Ce scénarioest écrit en WLangage <strong>et</strong> peut être modifié àn'importe quel moment.Ces tests peuvent être lancés par exemple avantchaque déploiement pour vérifier le bon fonctionnementd'un site après diverses modifications.Les éléments suivants peuvent être testés :• les collections <strong>de</strong> procédures• les classesChaque test est associé à un co<strong>de</strong> WLangage : lescénario du test. Ce scénario est visible sous l'éditeur<strong>de</strong> co<strong>de</strong>. Le co<strong>de</strong> <strong>de</strong>s tests peut être modifié.Les tests <strong>et</strong> le co<strong>de</strong> associé ne sont pas livrés enclientèle. Le nombre <strong>de</strong> tests d'un site n'a doncaucune inci<strong>de</strong>nce sur la taille du site livré en clientèle.Pour plus <strong>de</strong> détails, consultez l’ai<strong>de</strong> en ligne (motclé: "Test automatique").7.3 L'utilitaire WDTestSiteWDTestSite est un utilitaire perm<strong>et</strong>tant <strong>de</strong> réaliserdifférents tests sur un site WebDev.Les différents tests possibles avec WDTestSite sontles suivants :• Test <strong>de</strong> montée en charge :Le test <strong>de</strong> montée en charge consiste à simulerla connexion <strong>de</strong> plusieurs internautes à un siteWebDev. Chacun internaute exécute une suited'opérations (scénario) simultanément.• Test <strong>de</strong> non-régression :Le test <strong>de</strong> non-régression consiste à vérifier lefonctionnement d'un site WebDev entre <strong>de</strong>uxmises à jour. Le test <strong>de</strong> non-régression consiste àvérifier qu'un scénario réalisé avec une précé<strong>de</strong>nteversion du site fonctionne correctementavec la mise à jour du site.• Test d'un site en mo<strong>de</strong> multi-utilisateurs :Le test d'un site en mo<strong>de</strong> multi-utilisateurs perm<strong>et</strong><strong>de</strong> vérifier que les accès concurrentiels auxfichiers <strong>de</strong> données sont correctement gérés. C<strong>et</strong>est consiste à simuler la connexion simultanée<strong>de</strong> plusieurs internautes à un site WebDev. Chacuninternaute exécute une suite d'opérations(scénario) simultanément.• Comparaison <strong>de</strong> différents serveurs :WDTestSite perm<strong>et</strong> <strong>de</strong> comparer la vitesse <strong>de</strong> différentsserveurs. Il suffit <strong>de</strong> lancer un scénariosur différents serveurs <strong>et</strong> <strong>de</strong> comparer le tempsd'exécution <strong>de</strong> ce scénario.• Optimisation <strong>de</strong> traitements réalisés enWLangage :WDTestSite perm<strong>et</strong> <strong>de</strong> comparer le temps d'exécutiond'un scénario avant <strong>et</strong> après une optimisationdu co<strong>de</strong> WLangage.Pour plus <strong>de</strong> détails, consultez l’ai<strong>de</strong> en ligne (motclé: "WDTestSite").Partie 6 : Tester un site web 207
208Partie 6 : Tester un site web
Déployer unsite webPARTIE 7
Déploiement d’un site statiqueou semi-dynamiquePrincipeLe déploiement d’un site statique ou semi-dynamique est réalisé par FTP :Informations nécessaires pour le déploiementSi vous n’avez pas ces informations, inutile <strong>de</strong> tenter d’installer. Contactez votre hébergeurpour obtenir ces informations.Avant d’effectuer un déploiement par FTP, l’hébergeur doit communiquer au développeurles informations suivantes :• Nom du serveur Web où l’installation doit être réalisée (ou son adresse IP)• Nom d’utilisateur <strong>et</strong> mot <strong>de</strong> passe définis dans le serveur FTPLors du déploiement par FTP, le développeur doit préciser dans WDDéploie :• les informations fournies par l’hébergeur• les fichiers à installerPartie 7 : Déployer un site web 211
Déploiement d’un site statique, semidynamiqueou PHP en pratique1 PrésentationLors du développement d'un site statique, semidynamiqueou PHP, une <strong>de</strong>s phases importantesconsiste à déployer ce site sur un serveur Web(chez un hébergeur ou en Intran<strong>et</strong>).Deux métho<strong>de</strong>s <strong>de</strong> déploiement sont possibles :• déploiement distant (par FTP) : conseillé lorsquele serveur n'est pas directement disponible.• déploiement par réseau : conseillé lorsque leserveur est facilement accessible.L’outil WDDéploie perm<strong>et</strong> <strong>de</strong> simplifier le déploiement<strong>de</strong> vos sites statiques.Remarque : Pour déployer un site dynamique, consultez“Déploiement d’un site dynamique en pratique”,page 218.2 Création <strong>de</strong> l’installationPour déployer votre site statique :1. Sélectionnez l’option "Atelier.. Créer la procédured’installation". L’outil WDDéploie se lance.2. Créez le profil correspondant à votre site. Ce profilcontient les informations suivantes :• Emplacement <strong>de</strong>s fichiers locaux (sous-répertoire"_WEB" <strong>de</strong> votre site).• Adresse du site WebDev.•Empla cement <strong>de</strong>s fichiers du site déployé(réseau ou serveur FTP).• Caractéristiques du serveur FTP utilisé pour lamise à jour du site. Ces caractéristiques voussont fournies par l’hébergeur du site, ...3. Cliquez sur le bouton "Préparer". WDDéploie préparela liste <strong>de</strong>s fichiers à installer. En cas <strong>de</strong> miseà jour, WDDéploie compare les fichiers présentssur le poste <strong>de</strong> développement <strong>et</strong> les fichiers déjàinstallés.4. Cliquez sur le bouton "Synchroniser". Les fichiers<strong>de</strong> votre site sont copiés à l’emplacement spécifiédans le profil.Pour plus <strong>de</strong> détails sur l’utilisation <strong>de</strong> WDDéploie,consultez l’ai<strong>de</strong> en ligne.212Partie 7 : Déployer un site web
Déploiement d’un sitedynamique WebDevLes différents types <strong>de</strong> déploiementWebDev propose trois métho<strong>de</strong>s <strong>de</strong> déploiement d’un site dynamique :• déploiement par média physique (CD ROM, ...) du site WebDev, avec création d’uneversion d’installation livrable sur CD-ROM à l’hébergeurRemarque : un serveur d’application WebDev peut être intégré à l’installation fourniepar média physique.• déploiement à distance directement <strong>de</strong>puis le poste <strong>de</strong> développement (par transfert<strong>de</strong> fichiers par Intern<strong>et</strong>, FTP)Partie 7 : Déployer un site web 213
• déploiement à distance <strong>de</strong>puis un poste d’administration (par transfert <strong>de</strong> fichierspar Intern<strong>et</strong>, FTP)Choisir une métho<strong>de</strong> <strong>de</strong> déploiementLe choix <strong>de</strong> la métho<strong>de</strong> <strong>de</strong> déploiement dépend surtout <strong>de</strong>s contraintes imposées parl’hébergeur <strong>et</strong> <strong>de</strong> la localisation du serveur <strong>de</strong> déploiement (distant ou présent dans leslocaux).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 <strong>de</strong> développement).L’installation à distance (par FTP) directement <strong>de</strong>puis le poste <strong>de</strong> développement estconseillée si le poste <strong>de</strong> déploiement n’est pas facilement accessible. Un serveur FTPstandard doit être présent sur le poste <strong>de</strong> déploiement.Avant d’effectuer une installation à distance, l’hébergeur doit configurer le serveur FTP<strong>et</strong> le gestionnaire <strong>de</strong> comptes WebDev.214Partie 7 : Déployer un site web
L’installation à distance (par FTP) directement <strong>de</strong>puis un poste <strong>de</strong> d’administration estconseillée si les caractéristiques du serveur ne sont pas connues par le développeur lors<strong>de</strong> la création du programme d’installation. Le programme d’installation est appelé dansce cas un "Package".Si un site est <strong>de</strong>stiné à plusieurs clients, il est ainsi possible <strong>de</strong> créer un seul package <strong>et</strong><strong>de</strong> le fournir à tous les clients voulus.Les paramètres du serveur (Adresse, compte FTP, ...) ne seront renseignés que lors <strong>de</strong>l’exécution du package sur le poste d’administration.Déploiement sur média physique : informations nécessairesLors d’un déploiement par média physique, les informations concernant l’installation <strong>et</strong>le paramétrage du site sont données à la fois dans l’assistant <strong>de</strong> préparation <strong>de</strong> l’installation<strong>et</strong> dans l’assistant d’installation.Lors <strong>de</strong> la préparation <strong>de</strong> l’installation, il est nécessaire <strong>de</strong> fournir :• le répertoire d’installation,• les fichiers à installer,• le répertoire <strong>de</strong> génération <strong>de</strong> l’installation.Lors <strong>de</strong> l’installation, il est nécessaire <strong>de</strong> fournir :• le répertoire <strong>de</strong>s fichiers <strong>de</strong> données,• le répertoire <strong>de</strong>s fichiers du site.Après l’installation, il est nécessaire <strong>de</strong> paramétrer les caractéristiques du site (temps<strong>de</strong> connexion, nombre <strong>de</strong> connexions, ...) dans l’administrateur WebDev (version <strong>de</strong> déploiement).Déploiement par FTP directement <strong>de</strong>puis le poste <strong>de</strong> développement : informationsnécessairesSi vous n’avez pas ces informations, inutile <strong>de</strong> tenter d’installer. Appelez le prestatairepour obtenir ces informations.Avant d’effectuer un déploiement par FTP directement <strong>de</strong>puis le poste <strong>de</strong> développement,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 <strong>et</strong> mot <strong>de</strong> passe associé définis dans le gestionnaire <strong>de</strong> compteWebDev• Nom d’utilisateur <strong>et</strong> mot <strong>de</strong> passe définis dans le serveur FTPLors du déploiement par FTP, le développeur doit préciser dans l’assistant :• les informations fournies par l’hébergeur• les fichiers à installer• le nom du sous-répertoire <strong>de</strong>s fichiers <strong>de</strong> donnéesPartie 7 : Déployer un site web 215
• les différents paramètres <strong>de</strong> connexions au siteRemarques :• Il est possible <strong>de</strong> réaliser une installation différée, à la date <strong>et</strong> à l’heure choisies.• L'installation <strong>et</strong> la mise à jour par FTP sont sécurisées par mot <strong>de</strong> passe <strong>et</strong> cryptage<strong>de</strong>s données transmises.Déploiement par FTP directement <strong>de</strong>puis un poste d’administration : informationsnécessairesLors <strong>de</strong> la création du programme d’installation, aucune information spécifique n’est nécessaire.Lors <strong>de</strong> l’exécution du programme d’installation du site (<strong>de</strong>puis un poste d’administration),l’hébergeur <strong>de</strong>vra indiquer :• Nom du serveur Web où l’installation doit être réalisée (ou son adresse IP)• Nom d’utilisateur <strong>et</strong> mot <strong>de</strong> passe associé définis dans le gestionnaire <strong>de</strong> compteWebDev• Nom d’utilisateur <strong>et</strong> mot <strong>de</strong> passe définis dans le serveur FTPRemarques :• Il est possible <strong>de</strong> réaliser une installation différée, à la date <strong>et</strong> à l’heure choisies.• L'installation <strong>et</strong> la mise à jour par FTP sont sécurisées par mot <strong>de</strong> passe <strong>et</strong> cryptage<strong>de</strong>s données transmises.2<strong>16</strong>Partie 7 : Déployer un site web
Mise en service d’un sitedynamique WebDevVotre site dynamique WebDev sera accessible par les internautes dès qu’il aura été misen service. La mise en service d’un site dynamique WebDev consiste à activer le site.L’activation d’un site dynamique WebDev peut se faire par plusieurs métho<strong>de</strong>s :• soit lors <strong>de</strong> l’installation par FTP : une case à cocher perm<strong>et</strong> d’activer automatiquementle site après son installation.• soit avec l’administrateur à distance.• soit avec l’administrateur WebDev présent sur le poste <strong>de</strong> déploiement (option "SiteWebDev bloqué", dans l’ongl<strong>et</strong> "Sites").Partie 7 : Déployer un site web 217
Déploiement d’un site dynamique en pratiqueLors du développement d'un site dynamique, une<strong>de</strong>s phases importantes consiste à déployer ce sitesur un serveur Web (chez un hébergeur ou en Intran<strong>et</strong>).Deux métho<strong>de</strong>s <strong>de</strong> déploiement sont possibles :• déploiement distant (par FTP) : conseillé lorsquele serveur n'est pas directement disponible.• déploiement par média physique : CD, ... : conseillélorsque le serveur est facilement accessible.• déploiement par package : conseillé lorsque leserveur n’est pas directement disponible <strong>et</strong> sivous ne connaissez pas les caractéristiques duserveur.Remarques :• Pour chaque serveur Web accueillant <strong>de</strong>s sitesWebDev, l'hébergeur doit possé<strong>de</strong>r une licencedu serveur d’application WebDev.• La création <strong>de</strong> l’installation est réalisée parl’option ‘‘Atelier .. Créer la procédure d’installation".Pour déployer un site statique, consultez “Déploiementd’un site statique, semi-dynamique ou PHPen pratique”, page 212.1 Mise en bibliothèqueAvant <strong>de</strong> procé<strong>de</strong>r à une installation, il faut m<strong>et</strong>treen bibliothèque tous les obj<strong>et</strong>s <strong>de</strong> votre site dynamique.Une bibliothèque est un fichier qui regroup<strong>et</strong>ous les obj<strong>et</strong>s créés lors du développement (<strong>de</strong>scription<strong>de</strong> la base <strong>de</strong> données, <strong>de</strong>scription <strong>de</strong>spages, co<strong>de</strong>s sources compilés,…). Les pagesHTML <strong>et</strong> les images ne sont pas incluses dans labibliothèque. La mise en bibliothèque est automatiquelors <strong>de</strong> la création <strong>de</strong> la procédure d'installation.Une fois la bibliothèque créée, l'assistant <strong>de</strong> création<strong>de</strong> l'installation se lance. Vous pouvez choisir<strong>de</strong> réaliser :• soit une installation par FTP (installation à distance)Avant <strong>de</strong> réaliser une installation à distance,l'hébergeur doit avoir :1. Créé <strong>et</strong> configuré votre compte FTP sur le serveur.2. Créé <strong>et</strong> configuré votre compte WebDev sur leserveurL’hébergeur doit vous fournir vos logins <strong>et</strong> mots<strong>de</strong> passe pour ces différents comptes.• soit une installation par média physique :L'assistant vous perm<strong>et</strong> <strong>de</strong> créer un programmed’installation <strong>de</strong> votre site. Ce programme seraensuite fourni à l’hébergeur, <strong>et</strong> perm<strong>et</strong>tra d'installervotre site WebDev sur le serveur Web. Pourinstaller votre site WebDev, l'hébergeur doit :1. Installer le serveur d’application WebDev surle serveur Web (si cela n'a pas déjà été fait).2. Installer votre site WebDev en lançant le programmeexécutable Installe fourni avec votre installation.Remarque : Il est également possible <strong>de</strong> créerune installation par média physique autonome,contenant l’installation d’un serveur d’applicationWebDev limité à 10 connexions. C<strong>et</strong>te solutionest idéale pour les maqu<strong>et</strong>tes présentéessur un portable.• soit un package <strong>de</strong> déploiement :Un package <strong>de</strong> déploiement est un exécutablecontenant tous les éléments nécessaires audéploiement d’un site WebDev. Ce packagepourra ensuite être exécuté <strong>de</strong>puis un poste quelconquepour installer le site Web sur le poste serveurpar FTP.Pour créer ce type d’installation, il n’est pasnécessaire <strong>de</strong> connaître les caractéristiques ducompte FTP <strong>et</strong> du compte WebDev présent sur leserveur WEB.218Partie 7 : Déployer un site web
2 Déploiement distant (par FTP)2.1 Les étapesLes étapes du déploiement sont les suivantes :1. Installation du serveur d’application WebDevchez l'hébergeur (étape optionnelle). Pour plus <strong>de</strong>détails, consultez la documentation du serveurd’application WebDev.2. Création par l'hébergeur d'un compte WebDev(dans l'administrateur) <strong>et</strong> d'un compte FTP (dans leserveur FTP).3. L'hébergeur transm<strong>et</strong> les noms <strong>et</strong> mots <strong>de</strong> passeassociés ainsi que le nom (adresse IP) du serveur.4. Création <strong>de</strong> l'installation à distance <strong>de</strong>puis l'éditeur(option "Atelier .. Créer la procédure d’installation").Les fichiers nécessaires sont copiés dans lerépertoire <strong>de</strong> transfert.5. Mise en service du site WebDev.2.2 Création <strong>de</strong> l’installationIl faut définir dans l'assistant :1. Les informations concernant le poste distant.Ces informations doivent être fournies parl'hébergeur :• Adresse du serveur (un nom <strong>de</strong> machine accessiblepar le réseau, une adresse IP, ou une adresseintern<strong>et</strong>)• Caractéristiques du compte WebDev (le nomd'utilisateur <strong>et</strong> le mot <strong>de</strong> passe).• Caractéristiques du compte FTP (le nom d'utilisateur<strong>et</strong> le mot <strong>de</strong> passe).Pour i<strong>de</strong>ntifier simplement les caractéristiques duserveur pour une prochaine mise à jour, donnez unnom à ce serveur. Ce nom apparaîtra (suivi <strong>de</strong>l'adresse du serveur) dans la fenêtre <strong>de</strong> choix dutype d'installation.2.Les fichiers à installer. Par défaut, l'assistantsélectionne la bibliothèque, les fichiers <strong>de</strong> données,les images <strong>et</strong> les pages HTML.3. Paramétrage <strong>de</strong> l'installation : Choisissez l<strong>et</strong>ype d'installation à distance à effectuer :• Mise à jour immédiate :Les fichiers du site sont compactés <strong>et</strong> transférésimmédiatement sur le serveur WEB (l'accès auserveur Web doit être possible <strong>de</strong>puis le posted'installation). Le site WebDev est ensuite installéautomatiquement sur le serveur WEB.• Mise à jour différée :Les fichiers du site sont compactés <strong>et</strong> transférésimmédiatement sur le serveur WEB (l'accès auserveur Web doit être possible <strong>de</strong>puis le posted'installation). Le site WebDev sera installé sur leserveur à la date <strong>et</strong> à l'heure indiquée. Il est ainsipossible <strong>de</strong> faire la mise à jour du site dans lanuit (entre minuit <strong>et</strong> 3h du matin par exemple),lorsque le nombre d'internautes est moins important.Attention : la date <strong>et</strong> l'heure spécifiées sont cellesdu serveur. Assurez-vous <strong>de</strong> leur validité.• Activer le site immédiatement aprèsinstallation :Le site sera disponible directement après soninstallation : il sera possible <strong>de</strong> s'y connecter soiten utilisant l'adresse adéquate, soit par une pagestatique contenant un lien sur le site. Si c<strong>et</strong>teoption n'est pas cochée, il sera possible d'activerle site grâce à l'administrateur à distance.4. Paramétrage du site. Ces options perm<strong>et</strong>tent <strong>de</strong>configurer les options <strong>de</strong> connexions au site dèsson installation.Ces paramètres pourront être modifiés sinécessaire :• soit par l'administrateur <strong>de</strong> déploiement présentsur le serveur.• soit par l'administrateur à distance, utilisable parle gestionnaire du site.5. Si une mise à jour <strong>de</strong> l’analyse a été réalisée,sélectionnez la modification automatique <strong>de</strong>sfichiers <strong>de</strong> données lors <strong>de</strong> l’installation.Remarque : si c<strong>et</strong>te option est choisie, la mise àjour sera proposée lors <strong>de</strong> l’installation.Cas particulier : Si les fichiers <strong>de</strong> données présentssur le serveur sont au format Hyper File 5.5, il estnécessaire <strong>de</strong> les migrer au format HyperFileSQLClassic. C<strong>et</strong>te migration doit être effectuée uniquementlors <strong>de</strong> la première mise à jour du site.6. Spécifiez si votre site utilise l’Accès NatifAS/400.Rappel : si votre site utilise l’Accès Natif AS/400, ilest nécessaire d’installer les DLL AS/400 sur leserveur Web.Si vous utilisez une licence pour un nombre <strong>de</strong> posteslimité, il est nécessaire <strong>de</strong> gérer dans le siteWebDev le nombre <strong>de</strong> connexions en cours (fichierINI ou base <strong>de</strong> registres, ...).Partie 7 : Déployer un site web 219
Récapitulatif <strong>de</strong>s éléments installés <strong>et</strong> <strong>de</strong> leurlocalisation :Serveur <strong>de</strong> sitesRépertoire <strong>de</strong>s sites WebDev<strong>de</strong> l’utilisateur NRépertoire défini par l’hébergeur.Dans ce répertoire, un sous-répertoire sera créépour chaque site <strong>de</strong> l’utilisateur N.Dans ce sous-répertoire <strong>de</strong> sites sont installés lespages HTML, la bibliothèque (".WDL"), le répertoire<strong>de</strong>s images.Exemple : Le répertoire <strong>de</strong>s sites <strong>de</strong> l’utilisateur Nest "C:\UtilN\Sites WebDev".L’utilisateur N installe son site "Bateau". Ce sitesera installé dans le répertoire "C:\UtilN\SitesWebDev\Bateau".Serveur <strong>de</strong> donnéesRépertoire <strong>de</strong>s données<strong>de</strong> l’utilisateur NRépertoire défini par l’hébergeur.Dans ce répertoire, un sous-répertoire sera créépour les fichiers <strong>de</strong> données <strong>de</strong> chaque site <strong>de</strong>l’utilisateur N.Dans ce sous-répertoire <strong>de</strong> données sont installésles fichiers ".FIC", les fichiers ".NDX", les fichiers".MMO"Exemple : Le répertoire <strong>de</strong>s données <strong>de</strong> l’utilisateurN est "D:\UtilN\Données WebDev".L’utilisateur N installe son site "Bateau". Pardéfaut, les fichiers <strong>de</strong> données seront installésda ns le répertoire "D:\UtilN\Données Web-Dev\Bateau".3 Déploiement par package <strong>de</strong> déploiement3.1 Les étapesLes étapes du déploiement sont les suivantes :1. Création du package <strong>de</strong> déploiement <strong>de</strong>puisl’éditeur (option "Atelier .. Créer la procédure d’installation").Un fichier d’installation est créé.2. Transmission du package <strong>de</strong> déploiement (parintern<strong>et</strong>, CD, ...) à l’administrateur du serveur WEB(hébergeur par exemple)3. Installation du serveur d’application WebDevchez l'hébergeur (étape optionnelle). Pour plus <strong>de</strong>détails, consultez la documentation du serveurd’application WebDev.4. Création par l'hébergeur d'un compte WebDev(dans l'administrateur) <strong>et</strong> d'un compte FTP (dans leserveur FTP).5. Exécution du package <strong>de</strong> déploiement sur unposte <strong>et</strong> installation du site WebDev.6. Mise en service du site WebDev.3.2 Création <strong>de</strong> l’installationIl faut définir dans l'assistant :1. Les fichiers à installer. Par défaut, l'assistantsélectionne la bibliothèque, les fichiers <strong>de</strong> données,les images <strong>et</strong> les pages HTML.2. Si une mise à jour <strong>de</strong> l’analyse a été réalisée,sélectionnez la modification automatique <strong>de</strong>sfichiers <strong>de</strong> données lors <strong>de</strong> l’installation.Remarque : si c<strong>et</strong>te option est choisie, la mise àjour sera proposée lors <strong>de</strong> l’installation.Cas particulier : Si les fichiers <strong>de</strong> données présentssur le serveur sont au format Hyper File 5.5, il estnécessaire <strong>de</strong> les migrer au format HyperFileSQLClassic. C<strong>et</strong>te migration doit être effectuée uniquementlors <strong>de</strong> la première mise à jour du site.3. Paramétrage du site. Ces options perm<strong>et</strong>tent <strong>de</strong>configurer les options <strong>de</strong> connexions au site dèsson installation.Ces paramètres pourront être modifiés sinécessaire :• soit par l'administrateur <strong>de</strong> déploiement présentsur le serveur.• soit par l'administrateur à distance, utilisable parle gestionnaire du site.4. Spécifiez si votre site utilise l’Accès NatifAS/400.Rappel : si votre site utilise l’Accès Natif AS/400, ilest nécessaire d’installer les DLL AS/400 sur leserveur Web.220Partie 7 : Déployer un site web
Si vous utilisez une licence pour un nombre <strong>de</strong> posteslimité, il est nécessaire <strong>de</strong> gérer dans le siteWebDev le nombre <strong>de</strong> connexions en cours (fichierINI ou base <strong>de</strong> registres, ...).5. Le profil par défaut du serveur Web à utiliser.Ces paramètres pourront être saisis ou modifiéspar la personne qui installera le package <strong>de</strong>déploiement.6. Paramétrage <strong>de</strong> l'installation : Choisissez l<strong>et</strong>ype d'installation à distance à effectuer :• Mise à jour différée :Les fichiers du site sont compactés <strong>et</strong> transférésimmédiatement sur le serveur WEB (l'accès auserveur Web doit être possible <strong>de</strong>puis le posted'installation du package). Le site WebDev serainstallé sur le serveur à la date <strong>et</strong> à l'heure indiquée.Il est ainsi possible <strong>de</strong> faire la mise à jourdu site dans la nuit (entre minuit <strong>et</strong> 3h du matinpar exemple), lorsque le nombre d'internautesest moins important.Attention : la date <strong>et</strong> l'heure spécifiées sont cellesdu serveur. Assurez-vous <strong>de</strong> leur validité.• Activer le site immédiatement aprèsinstallation :Le site sera disponible directement après soninstallation : il sera possible <strong>de</strong> s'y connecter soiten utilisant l'adresse adéquate, soit par une pagestatique contenant un lien sur le site. Si c<strong>et</strong>teoption n'est pas cochée, il sera possible d'activerle site grâce à l'administrateur à distance.3.3 Installation du site dynamiquePour installer le site, il suffit <strong>de</strong> :1. Exécuter le package <strong>de</strong> déploiement.2. Indiquer les caractéristiques du serveur WEB surlequel le site WebDev doit être installé (caractéristiquesdu compte FTP du serveur, <strong>et</strong> caractéristiquesdu compte WebDev du serveur).3. Vali<strong>de</strong>r l’installation du site.4 Déploiement par média physiqueCe déploiement est réalisé en trois étapes :1. Création <strong>de</strong> la version d’installation.2. Installation si nécessaire du serveur d’applicationWebDev sur le serveur Web. Pour plus <strong>de</strong>déta ils, consultez documenta tion du serveurd’application WebDev.3. Installation du site chez l’hébergeur.4.1 Création <strong>de</strong> l’installationIl faut définir dans l’assistant :1. Un titre <strong>et</strong> un intitulé <strong>de</strong> version pour votre installation.Un titre peut être donné dans chacune<strong>de</strong>s langues susceptibles d’être choisies aumoment <strong>de</strong> l’installation.2. Un répertoire par défaut.3. Un décor pour la fenêtre d’installation. Vous pouvezpersonnaliser le décor à l’ai<strong>de</strong> du bouton "Personnaliser".4. Les fichiers <strong>de</strong> votre site.Remarque : les fichiers bibliothèques, HTML, Java,JavaScript <strong>et</strong> les fichiers images sont sélectionnéspar défaut.5. Les fichiers annexes :• La licence (fichier au format txt) s’affichera aulancement <strong>de</strong> l’installation.Remarque : si la licence n’est pas validée par lapersonne chargée <strong>de</strong> l’installation, l’installationsera abandonnée.• Le "Lisez-moi" : ce fichier peut correspondre à différentsformats (txt, htm, doc, hlp, pdf…). Quelque soit le format choisi, l’utilisateur doit possé<strong>de</strong>run logiciel perm<strong>et</strong>tant <strong>de</strong> visualiser ce fichier.• Un exécutable à lancer à la fin <strong>de</strong> l’installation.Attention : Pensez à joindre les fichiers liés à c<strong>et</strong>exécutable (DLL, fichiers <strong>de</strong> paramètres, autresfichiers exécutables …).Remarque : il est possible <strong>de</strong> sélectionner unfichier <strong>de</strong> licence <strong>et</strong> un fichier "Lisez-moi" pourchaque langue <strong>de</strong> l’installation.6. Si une mise à jour <strong>de</strong> l’analyse a été réalisée,sélectionnez la modification automatique <strong>de</strong>sfichiers <strong>de</strong> données lors <strong>de</strong> l’installation.Remarque : si c<strong>et</strong>te option est choisie, la mise àjour sera proposée lors <strong>de</strong> l’installation.7. Si <strong>de</strong>s programmes non réalisés avec WebDevdoivent accé<strong>de</strong>r aux fichiers HyperFileSQL <strong>de</strong> votresite, choisissez l’installation d’un pilote ODBC.Remarque : si c<strong>et</strong>te option est choisie, l’installationdu pilote sera proposée lors <strong>de</strong> l’installation.8. Spécifiez si votre site utilise l’Accès NatifAS/400.Rappel : si votre site utilise l’Accès Natif AS/400, ilest nécessaire d’installer les DLL AS/400 sur leserveur Web.Partie 7 : Déployer un site web 221
Si vous utilisez une licence pour un nombre <strong>de</strong> posteslimité, il est nécessaire <strong>de</strong> gérer dans le siteWebDev le nombre <strong>de</strong> connexions en cours (fichierINI ou base <strong>de</strong> registres, ...).9. Imprimez le dossier <strong>de</strong> déploiement :Le dossier <strong>de</strong> déploiement précise la licence Web-Dev ainsi que tous les modules installés lors dudéploiement. Il précise également les clés <strong>de</strong> labase <strong>de</strong> registres générées pour le site WebDev.Lors <strong>de</strong> l’installation du site sur le serveur, ces cléspourront être mises à jour directement dans labase <strong>de</strong> registres ou enregistrées dans un fichierpour un examen ultérieur.Le dossier <strong>de</strong> déploiement doit être fourni à la personnechargée d’installer votre site WebDev(hébergeur ou responsable réseau Intran<strong>et</strong>).10. Modifiez éventuellement le répertoire <strong>de</strong> génération<strong>de</strong> l’installation.Par défaut l’installation est générée dans le sousrépertoire"INST" <strong>de</strong> votre proj<strong>et</strong>.11. Générez l’installation :Une fenêtre d’information signale la présence éventuelle<strong>de</strong> noms longs <strong>de</strong> fichiers. En eff<strong>et</strong>, en casd’installation sur un lecteur réseau, vérifiez que :• le lecteur réseau supporte correctement lesnoms longs,• le lecteur réseau ne modifie pas les majuscules/minuscules dans les noms <strong>de</strong> fichiers.12. Lorsque la création <strong>de</strong> l’installation est terminée,WebDev propose <strong>de</strong> :• tester directement l’installation créée.•ouvrir l’explorateur Windows sur le répertoire <strong>de</strong>génération <strong>de</strong> l’installation.13. Réalisez une sauvegar<strong>de</strong> <strong>de</strong> votre site.Il est recommandé <strong>de</strong> conserver une sauvegar<strong>de</strong><strong>de</strong>s sources <strong>de</strong> votre site correspondant à une versioninstallée.4.2 Installation du site dynamique sur unserveur Web (média physique)Si vous installez votre site chez un hébergeur, celuicipeut vous proposer <strong>de</strong>ux possibilités :• Installez votre site sur un serveur "mutualisé".Ce serveur gère les sites <strong>de</strong> plusieurs clients. Ceserveur est configuré lors <strong>de</strong> l’installation du serveurd’a pplica tion WebDev. L’a dministra teurWebDev (WD<strong>16</strong>0ADMIN.EXE) perm<strong>et</strong> <strong>de</strong> configurerindividuellement chaque site WebDev installésur ce serveur.Attention : Les ressources mémoires du serveursont partagées par tous les sites.• Installez votre site sur un serveur "dédié" (solutionconseillée). Vous êtes propriétaire <strong>de</strong> ce serveur.Dans ce cas vous <strong>de</strong>vez :•configurer le serveur Web,•gérer les ressources mémoires nécessairespour votre site.Pour installer le site WebDev sur un serveur Web(chez un hébergeur ou en Intran<strong>et</strong>) :1. Installez si nécessaire le serveur d’applicationWebDev sur le serveur Web.Attention : si le serveur d’application WebDev n’estpas installé sur le serveur Web, le site dynamiqueWebDev ne pourra pas fonctionner correctement.Remarque : Pour chaque serveur WEB hébergeant<strong>de</strong>s sites WebDev, l’hébergeur doit possé<strong>de</strong>r unelicence du serveur d’application WebDev.2. Pour installer le site WebDev, exécutez sur le serveurWeb, le programme INSTALLE.EXE fourni avecl’installation du site WebDev.Important : S’il s’agit d’une mise à jour d’un siteexistant, vous <strong>de</strong>vez au préalable bloquer le site àl’ai<strong>de</strong> <strong>de</strong> l’administrateur WebDev (cochez "SiteWebDev bloqué" dans l’ongl<strong>et</strong> "Sites").3. Choisissez la langue d’installation : un assistantd’installation se lance. Passez au plan suivant.4. L’installation détecte automatiquement si un ouplusieurs <strong>de</strong>s serveurs Intern<strong>et</strong> suivants sont installéssur le poste :• IIS Version 2 à 7 (Microsoft Intern<strong>et</strong> InformationServer) : serveur Microsoft.• Apache Version 1.3.x <strong>et</strong> 2.x : serveur Web gratuitfourni par l’Apache Group.Trois cas peuvent se présenter :• Cas 1 : votre serveur Web n’apparaît pas dansc<strong>et</strong>te liste : sélectionnez "Autre serveur". Pourplus <strong>de</strong> détails sur la configuration <strong>de</strong> votre serveur,consultez l’ai<strong>de</strong> en ligne.• Cas 2 : votre serveur Web apparaît dans la listemais en grisé : votre serveur Web n’a pas étédétecté. Vous pouvez toutefois le sélectionner encochant "Afficher tous les serveurs".Vous <strong>de</strong>vez alors <strong>de</strong>man<strong>de</strong>r la génération d’unfichier <strong>de</strong> configuration afin <strong>de</strong> pouvoir exécuterla configuration ultérieurement (si vous avezprévu d’installer votre serveur plus tard par exemple).• Cas 3 : votre serveur Web peut être sélectionnédirectement : sélectionnez votre serveur.Vous pouvez <strong>de</strong>man<strong>de</strong>r la génération d’un fichier222Partie 7 : Déployer un site web
<strong>de</strong> configuration afin <strong>de</strong> pouvoir exécuter la configurationultérieurement.Vous pourrez modifier le fichier <strong>de</strong> configurationavant <strong>de</strong> l’exécuter.Selon le serveur choisi, le fichier <strong>de</strong> configurationa une extension ".reg", ".conf" ou autre.5. Sélectionnez le répertoire d’installation : désigne le répertoire racine du serveurWeb <strong>de</strong> la machine. En fonction du serveur Webchoisi, le répertoire racine est détecté <strong>et</strong> affiché. Sile répertoire racine du serveur Web n’est pas affiché,vous pouvez le saisir dans la zone grise ou lerechercher à l’ai<strong>de</strong> du bouton "…".Attention : si la zone est renseignée, évitez <strong>de</strong> lamodifier.6.Mise à jour <strong>de</strong>s fichiers <strong>de</strong> données (étapeoptionnelle, uniquement dans le cas d’une mise àjour du site).Pour m<strong>et</strong>tre à jour les fichiers <strong>de</strong> données associésau site WebDev, choisissez l’exécution <strong>de</strong> la modificationautomatique <strong>de</strong>s fichiers <strong>de</strong> donnés.En cas <strong>de</strong> doute sur la nécessité d’opérer c<strong>et</strong>temise à jour, contactez le fournisseur du site.Attention : Les fichiers <strong>de</strong> données du site ne doiventpas être en cours d’utilisation. Utilisez l’administrateurWebDev pour vérifier qu’aucuneconnexion n’est en cours <strong>et</strong> arrêtez les sites(cochez "Site bloqué" dans l’ongl<strong>et</strong> "Sites").7. Choisissez l’installation d’un pilote ODBC pourHyperFileSQL si <strong>de</strong>s programmes non réalisés avecWebDev doivent accé<strong>de</strong>r aux fichiers HyperFileSQLdu site qui va être installé (étape optionnelle).8. Le résumé <strong>de</strong> l’installation est affiché :• Pour lancer l’installation, passez au plan suivant.• Pour modifier certains paramètres <strong>de</strong>s fenêtresprécé<strong>de</strong>ntes, cliquez sur "Précé<strong>de</strong>nt".9. L’installation est terminée :• Cliquez sur l’adresse proposée pour tester votresite en local. C<strong>et</strong>te option n’est utilisable que si leserveur Web a été configuré automatiquement.• Cliquez sur "Copier" pour récupérer l’adresse proposée.Pour plus <strong>de</strong> détails, consultez le paragraphe“Mise en service du site dynamique”,page 224.• Cliquez sur "Terminer" pour terminer l’installation.10. Configuration du serveur web :Si la configuration du serveur Web n’a pas été faiteautomatiquement, <strong>de</strong>ux cas peuvent se présenter :•Cas 1: votre serveur a été détecté <strong>et</strong> un fichier<strong>de</strong> configuration a été généré: vous pouvezvisualiser, éventuellement modifier puis exécuterce fichier.•Cas 2: votre serveur n’a pas été détecté: pourplus <strong>de</strong> détails, consultez l’ai<strong>de</strong> en ligne.11. A l’ai<strong>de</strong> <strong>de</strong> l’administrateur WebDev, débloquezles sites éventuellement bloqués <strong>et</strong> configurez lesparamètres <strong>de</strong> votre site dynamique.Ces paramètres correspon<strong>de</strong>nt :• au nombre total <strong>de</strong> connexions autorisées sur lesite,•au nombre <strong>de</strong> connexions autorisées pour uninternaute,• à la durée d’inactivité autorisée.Testez le site WebDev <strong>de</strong>puis l’administrateur à partir<strong>de</strong> l’option [page <strong>de</strong> test] (ongl<strong>et</strong> "Avancé").Remarques :• L’administrateur WebDev (WD<strong>16</strong>0ADMIN.EXE)doit être lancé <strong>et</strong> tourner en permanence entâche <strong>de</strong> fond. Il est possible <strong>de</strong> l’installer en tantque service sous Windows NT.• Pour plus <strong>de</strong> détails sur l’administrateur WebDev,consultez le chapitre “L’administrateur WebDeven pratique”, page 228.Important : La ressource nécessaire par internauteconnectéPour chaque internaute connecté, il est nécessaire<strong>de</strong> prévoir une consommation :• d’environ 400 Ko <strong>de</strong> mémoire centrale par connexion,en plus <strong>de</strong> la mémoire nécessaire au serveur.•d’environ 1 Mo d’espace disque (mémoire virtuelle)par connexion, en plus <strong>de</strong> l’espace nécessaireau site.Par exemple, pour 20 connexions parallèles, il estnécessaire <strong>de</strong> prévoir environ :• Mémoire vive : 67,8 Mo (7,8 Mo <strong>de</strong> mémoire centralepour ce site, 60 pour le serveur NT).• Mémoire virtuelle : 84 Mo (20 Mo pour les connexions,64 Mo pour le serveur NT).Partie 7 : Déployer un site web 223
5 Mise en service du site dynamiquePour perm<strong>et</strong>tre aux internautes l’accès à votre siteinstallé chez un hébergeur, créez un lien dans votrepage d’accueil perm<strong>et</strong>tant <strong>de</strong> lancer votre sitedynamique WebDev.Si vous avez réalisé une installation par média physique,l’adresse à utiliser a été fournie à la fin <strong>de</strong>l’installation. Remplacez par l’adresse<strong>de</strong> votre site.Exemple perm<strong>et</strong>tant <strong>de</strong> lancer un site "NOTRAP-PLI" à partir du site <strong>de</strong> PC SOFT :http://www.pcsoft.fr/WD<strong>16</strong>0AWP/WD<strong>16</strong>0AWP.EXE/ CONNECT/NOTRAPPLIPour lancer le site en utilisant directement sonadresse (jai<strong>de</strong>beauxyeux.com par exemple), il suffit<strong>de</strong> :1. Créer une page d’accueil <strong>de</strong> type "in<strong>de</strong>x.html".2. Dans l'entête <strong>de</strong> c<strong>et</strong>te page, utiliser les comman<strong>de</strong>shtml (META REFRESH) pour réaliser une redirectionvers le site WebDev c'est-à-dire, parexemple, vers l'adresse :"http://195.51.231.57/WD<strong>16</strong>0AWP/WD<strong>16</strong>0AWP.EXE/CONNECT/jai<strong>de</strong>beauxyeux"Exemple <strong>de</strong> balise META à placer dans la partie d'une page HTML :Cas particulier : Si une page d’accueil a été définiedans votre site dynamique, l’adresse <strong>de</strong> lancement<strong>de</strong> c<strong>et</strong>te page d’accueil est la suivante :http:///_WEB/224Partie 7 : Déployer un site web
PARTIE 8Hébergement <strong>de</strong>sites WebDev
A quoi sert l’administrateurWebDev ?En développement (pour le test) comme en déploiement, l’administrateur WebDev estnécessaire à l’exécution <strong>de</strong>s sites dynamiques WebDev.Lors du développement d’un site dynamique WebDev, l’administrateur perm<strong>et</strong> principalement<strong>de</strong> :• tester les sites dynamiques grâce à la page <strong>de</strong> test (ongl<strong>et</strong> "Avancé", bouton "Page <strong>de</strong>test")• gérer les webservices (ongl<strong>et</strong> "Webservices)• régler les paramètres <strong>de</strong> connexion aux sites dynamiques pour vos tests : temps <strong>de</strong>déconnexion, ... (ongl<strong>et</strong> "Configuration")• supprimer directement les connexions <strong>de</strong> test en cours (ongl<strong>et</strong> "Connexions")• changer le serveur Web utilisé pour vos tests (ongl<strong>et</strong> "Avancé", option "Serveur")• effectuer un diagnostic en cas <strong>de</strong> problème lors du lancement d’un site dynamiqueWebDev (ongl<strong>et</strong> "Avancé", bouton "Diagnostic")• autoriser le débogage à distance (ongl<strong>et</strong> "Configuration").• ...En déploiement, l’administrateur WebDev perm<strong>et</strong> <strong>de</strong> :• gérer les comptes WebDev (ongl<strong>et</strong> "Administration")• gérer la configuration <strong>de</strong>s différents sites dynamiques installés sur le serveur : nombre<strong>de</strong> connexions autorisées, ... (ongl<strong>et</strong> "Sites")• personnaliser les messages d’erreurs <strong>de</strong>s différents sites dynamiques installés surle serveur (ongl<strong>et</strong> "Administration")• ...Partie 8 : Hébergement <strong>de</strong> sites WebDev 227
L’administrateur WebDev en pratique1 PrésentationL'administrateur WebDev est un module perm<strong>et</strong>tant<strong>de</strong> gérer les sites WebDev dynamiques.Lors du développement d'un site WebDev dynamique,l'administrateur perm<strong>et</strong> principalement <strong>de</strong> :• tester le site grâce à la page <strong>de</strong> test (ongl<strong>et</strong>"Avancé", option "Page <strong>de</strong> test").• régler les paramètres <strong>de</strong> connexion au site pourvos tests : temps <strong>de</strong> déconnexion, ... (ongl<strong>et</strong> "Configuration").• supprimer directement les connexions <strong>de</strong> test encours (ongl<strong>et</strong> "Connexions").• changer le serveur WEB utilisé pour vos tests(ongl<strong>et</strong> "Avancé", option "Serveur").•effectuer un diagnostic en cas <strong>de</strong> problème lorsdu lancement d'un site WebDev (ongl<strong>et</strong> "Configuration",option "Diagnostic").• ...En déploiement, <strong>de</strong>ux types d'administrateur Web-Dev existent :• l’administrateur WebDev Déploiement qui perm<strong>et</strong>à l'hébergeur <strong>de</strong> gérer les sites WebDevdynamiques installés sur un serveur WEB.• l'administrateur WebDev Distant qui perm<strong>et</strong> augestionnaire <strong>de</strong> site <strong>de</strong> gérer ses sites WebDevdynamiques à distance <strong>de</strong>puis n'importe quelposte.C<strong>et</strong>te ai<strong>de</strong> présente uniquement l’administrateurWebDev Développement.Pour plus <strong>de</strong> détails sur les outils <strong>de</strong> déploiement,consultez leur ai<strong>de</strong>.Lancement <strong>de</strong> l’administrateurWebDevPour lancer l'administrateur WebDev Développement,sélectionnez :• soit l'option "Outils .. WD<strong>16</strong>0Admin - AdministrateurWebDev" <strong>de</strong>puis WebDev Développement.• soit l'option "Programmes .. WebDev <strong>16</strong> .. AdministrateurWebDev" <strong>de</strong>puis le menu "Démarrer".L'administrateur WebDev est lancé automatiquementau premier test du site.L'administrateur peut ensuite être laissé en tâche<strong>de</strong> fond.Par défaut, l'administrateur WebDev autorise dixconnexions simultanées à un même site WebDevdynamique (icône GO).2 Interface <strong>de</strong> l’administrateur WebDevL’administrateur WebDev se présente sous laforme d’une fenêtre comportant plusieurs ongl<strong>et</strong>s :• Ongl<strong>et</strong> "Connexions".• Ongl<strong>et</strong> "Sites".•Ongl<strong>et</strong> "Webservices".• Ongl<strong>et</strong> "Configuration".• Ongl<strong>et</strong> "Administration".•Ongl<strong>et</strong> "Avancé".2.1 Caractéristiques <strong>de</strong>s connexions encoursL’ongl<strong>et</strong> "Connexions" fournit diverses informationsà propos <strong>de</strong>s connexions en cours. Ces informationspeuvent être consultées à tout moment sur leserveur :•Le Nombre <strong>de</strong> connexions en cours indique lenombre <strong>de</strong> connexions totales aux sites WebDevdynamiques gérés par l'administrateur.•Le Tableau <strong>de</strong>s connexions en cours indiquepour chaque connexion :•l'i<strong>de</strong>ntifiant <strong>de</strong> la connexion,•le site concerné par la connexion,•l'i<strong>de</strong>ntité du client connecté. En utilisationréelle, le client est i<strong>de</strong>ntifié par son adresse IPou son adresse Intern<strong>et</strong>,•le temps actuel <strong>de</strong> connexion,•le temps d'inactivité <strong>de</strong> la connexion.228Partie 8 : Hébergement <strong>de</strong> sites WebDev
• La ca<strong>de</strong>nce <strong>de</strong> rafraîchissement : ce paramètrecorrespond à la vitesse avec laquelle est réactualiséela table présentant les différentes connexionsen cours.L’ongl<strong>et</strong> "Connexions" perm<strong>et</strong> également <strong>de</strong> :• Tester directement les sites installés sur le poste(uniquement en version <strong>de</strong> développement) :Sélectionnez le site dans la combo puis cliquezsur "Tester". Ce mo<strong>de</strong> <strong>de</strong> test perm<strong>et</strong> <strong>de</strong> testersur le poste <strong>de</strong> développement <strong>de</strong>s options spécifiquesà la gestion <strong>de</strong>s cookies par exemple.• Arrêter une connexion en cours :Sélectionnez une <strong>de</strong>s connexions <strong>et</strong> cliquez sur"Déconnecter".• Stopper toutes les connexions en cours <strong>et</strong> fermerl’administrateur : cliquez sur "Déconnecter Tous".2.2 Sites installésL’ongl<strong>et</strong> "Sites" fournit <strong>de</strong>s informations concernantles sites WebDev dynamiques installés sur le poste.L'ongl<strong>et</strong> "Sites" liste les différents sites WebDevdynamiques installés sur le poste <strong>et</strong> gérés parl'administrateur WebDev. Pour chaque site, lesinformations suivantes sont affichées dans untableau :• le nom du site,•le répertoire compl<strong>et</strong> d'installation du site sur leposte,• le nom du fichier "proj<strong>et</strong>" correspondant.L’ongl<strong>et</strong> "Sites" perm<strong>et</strong> aussi <strong>de</strong> :• Supprimer le site sélectionné dans le tableau.Il s’agit uniquement <strong>de</strong> supprimer le site <strong>de</strong>l'administrateur : le site WebDev sera toujoursprésent sur le disque.• Rafraîchir l'affichage <strong>de</strong>s sites présents dans l<strong>et</strong>ableau.Ce rafraîchissement perm<strong>et</strong> <strong>de</strong> vérifier la présenced'un site dans l'administrateur après soninstallation.• Ajouter un site dans le tableau.• Paramétrer individuellement les sites présentssur le poste.Par défaut, la configuration prise en compte estcelle <strong>de</strong> l’ongl<strong>et</strong> "Configuration".Il est également possible <strong>de</strong> créer une configurationspécifique pour le site sélectionné.C<strong>et</strong>te configuration concerne le nombre <strong>de</strong> connexionsautorisé, la durée d’inactivité autorisée<strong>et</strong> le blocage éventuel du site pour une mise àjour. Pour plus <strong>de</strong> détails sur ces paramètres,consultez l'ongl<strong>et</strong> "Configuration".Pour vali<strong>de</strong>r immédiatement le nouveau paramétrage,appuyez sur le bouton "Appliquer".2.3 Webservices installésL’ongl<strong>et</strong> "Webservices" fournit <strong>de</strong>s informationsconcernant les webservices WebDev dynamiquesinstallés sur le poste.L'ongl<strong>et</strong> "webservices" liste les différents webservicesWebDev dynamiques installés sur le poste <strong>et</strong>gérés par l'administrateur WebDev. Pour chaquewebservice, les informations suivantes sont affichéesdans un tableau :• le nom du webservice,• le répertoire compl<strong>et</strong> d'installation du webservicesur le poste,• le nom du fichier "proj<strong>et</strong>" correspondant.L’ongl<strong>et</strong> "Webservices" perm<strong>et</strong> aussi <strong>de</strong> :• Supprimer le webservice sélectionné dans l<strong>et</strong>ableau.Il s’agit uniquement <strong>de</strong> supprimer le webservice<strong>de</strong> l'administrateur : le webservice WebDev seratoujours présent sur le disque.• Rafraîchir l'affichage <strong>de</strong>s webservices présentsdans le tableau.Ce rafraîchissement perm<strong>et</strong> <strong>de</strong> vérifier la présenced'un webservice dans l'administrateuraprès son installation.• Ajouter un webservice dans le tableau.• Paramétrer individuellement les webservices présentssur le poste.Par défaut, la configuration prise en compte estcelle <strong>de</strong> l’ongl<strong>et</strong> "Configuration".Il est également possible <strong>de</strong> créer une configurationspécifique pour le site sélectionné.C<strong>et</strong>te configuration concerne le nombre maximal<strong>de</strong> connexions autorisé <strong>et</strong> le blocage éventuel duwebservice pour une mise à jour. Pour plus <strong>de</strong>détails sur ces paramètres, consultez l'ongl<strong>et</strong>"Configuration".Pour vali<strong>de</strong>r immédiatement le nouveau paramétrage,appuyez sur le bouton "Appliquer".2.4 Configuration généraleLa configuration générale correspond aux différentesoptions <strong>de</strong> connexion par défaut pour les sitesWebDev présents sur le serveur <strong>et</strong> gérés par l'administrateur.L'ongl<strong>et</strong> "Configuration" perm<strong>et</strong> <strong>de</strong> :• Paramétrer les connexions.• Paramétrer les sessions <strong>et</strong> les requêtes.Partie 8 : Hébergement <strong>de</strong> sites WebDev 229
• Gérer le fichier journal pour obtenir les statistiques<strong>de</strong> fréquentation.• Gérer le débogage à distance.Le paramétrage <strong>de</strong>s connexions est réalisé par lesoptions suivantes :• Nombre maximum <strong>de</strong> connexions sur leserveur :Nombre maximum <strong>de</strong> connexions simultanéesautorisées pour l'ensemble <strong>de</strong>s sites gérés parl'administrateur (une connexion = un internaute).• Nombre maximum <strong>de</strong> connexions sur un site :Nombre maximum <strong>de</strong> connexions simultanéesautorisées pour chaque site géré par l'administrateur.Ce nombre peut être modifié pour chaquesite dans l’ongl<strong>et</strong> "Sites".• Nombre maximum <strong>de</strong> connexions d'un utilisateursur un site :Nombre maximum <strong>de</strong> connexions simultanéesautorisées pour un même internaute sur chaquesite géré par l'administrateur.Si ce paramètre est égal à zéro, l’internauteessayant <strong>de</strong> se connecter simultanément à unmême site, sera automatiquement déconnectépuis reconnecté.Si ce paramètre est supérieur à zéro, un messaged'erreur apparaîtra automatiquement aubout <strong>de</strong>s x connexions simultanées.Ce nombre peut être modifié pour chaque site(ongl<strong>et</strong> "Sites").Le paramétrage <strong>de</strong>s sessions <strong>et</strong> <strong>de</strong>s requêtes estréalisé par les options suivantes :• Déconnecter les utilisateurs inactifs <strong>de</strong>puis :Il s’agit du temps maximum <strong>de</strong> connexion autorisésans action <strong>de</strong> la part <strong>de</strong> l’internaute. Si c<strong>et</strong>emps est dépassé, l’internaute est automatiquementdéconnecté, <strong>et</strong> un message d'erreur estaffiché.Ce nombre peut être modifié pour chaque sitedans l’ongl<strong>et</strong> "Sites".• Durée <strong>de</strong>s contextes AWP :Durée <strong>de</strong> validité <strong>de</strong>s contextes AWP. Dès que ladurée indiquée est écoulée <strong>et</strong> si aucune nouvellerequête n'a été effectuée, le fichier <strong>de</strong>s contextesest supprimé.• Durée maximale d'une requête :Temps maximum d'attente autorisé entre ledéclenchement d'une action par l’internaute (parun bouton ou un lien) <strong>et</strong> l'affichage <strong>de</strong> la réponse.Si ce temps est dépassé, une page d'erreur estaffichée, mais l’internaute n'est pas déconnecté.L'administrateur WebDev perm<strong>et</strong> <strong>de</strong> générer unfichier journal spécifique perm<strong>et</strong>tant <strong>de</strong> suivre lesstatistiques <strong>de</strong> fréquentation.• Générer un fichier journal pour les statistiques<strong>de</strong> fréquentation (.log) :C<strong>et</strong>te option perm<strong>et</strong> <strong>de</strong> générer un fichier journal(extension ".LOG") pour visualiser les statistiques<strong>de</strong> fréquentation <strong>de</strong>s sites WebDev à l'ai<strong>de</strong> <strong>de</strong>WDStatistiques.Pour plus <strong>de</strong> détails sur WDStatistiques, consultezl'ai<strong>de</strong> <strong>de</strong> WDStatistiques.La localisation du ficher journal peut être spécifiéedans le champ "Répertoire".C<strong>et</strong>te option peut être modifiée pour chaque sitedans l’ongl<strong>et</strong> "Sites".• Enregistrer dans le fichier global <strong>et</strong> dans lefichier <strong>de</strong> chaque application :C<strong>et</strong>te option perm<strong>et</strong> d'enregistrer les statistiquesà la fois dans le fichier journal <strong>de</strong> l'application <strong>et</strong>dans le fichier journal du serveur. En eff<strong>et</strong>, si lefichier journal est défini à la fois au niveau duserveur <strong>et</strong> au niveau <strong>de</strong>s applications (ongl<strong>et</strong>"Sites"), <strong>de</strong>s informations peuvent être "perdues".Gérer le débogage à distanceL'administrateur WebDev perm<strong>et</strong> d'autoriser ounon le débogage à distance <strong>de</strong>s sites WebDevdynamiques.Si le débogage à distance est autorisé, les paramètressuivants doivent être spécifiés :• Port principal (27 271 par défaut).•Plage <strong>de</strong>s ports <strong>de</strong>s sessions (entre 27 282 <strong>et</strong>27 289 par défaut).Le bouton "Par défaut" perm<strong>et</strong> <strong>de</strong> rétablir lesvaleurs par défaut.2.5 AdministrationL'ongl<strong>et</strong> "Administration" perm<strong>et</strong> <strong>de</strong> :• Configurer le serveur pour les installations <strong>et</strong> lesmises à jour <strong>de</strong> site.• Paramétrer les messages d'erreur affichés dansle navigateur.• Gérer les comptes WebDev.Installation / mise à jourCes options sont accessibles en version déploiement.Elles perm<strong>et</strong>tent à l'hébergeur <strong>de</strong> perm<strong>et</strong>tre<strong>et</strong> <strong>de</strong> paramétrer les installations <strong>et</strong> mises à jour <strong>de</strong>sites à distance.230Partie 8 : Hébergement <strong>de</strong> sites WebDev
L'option "Bloquer le serveur (pour une mise à jour)''perm<strong>et</strong> <strong>de</strong> simplifier la mise à jour d'un site, eninterdisant toute connexion d'un nouvel utilisateur.A chaque essai d'une nouvelle connexion à un <strong>de</strong>ssites présent sur le serveur, l’internaute reçoit unmessage l'informant <strong>de</strong> l'indisponibilité momentanéedu site, <strong>et</strong> lui <strong>de</strong>mandant <strong>de</strong> réessayer plustard. Les utilisateurs déjà connectés peuvent continuerd'utiliser le site WebDev en cours.Messages d'erreurLe bouton "Erreurs" affiche les différentes erreurspouvant être affichées dans le navigateur <strong>de</strong> l'internaute.Il est possible <strong>de</strong> personnaliser le messaged'erreur ou encore la page HTML où l'erreur est affichée.2.6 Options avancéesL'ongl<strong>et</strong> "Avancé" perm<strong>et</strong> <strong>de</strong> :•Choisir un <strong>de</strong>s serveurs WEB installés sur leposte en cours pour exécuter les sites WebDev.• Effectuer un diagnostic <strong>de</strong> configuration du posteen cours.•Spécifier le nom ou l'adresse IP du poste encours.• Afficher sous le navigateur une page perm<strong>et</strong>tant<strong>de</strong> lancer tous les sites WebDev installés sur leposte en cours.• Gérer les emails en mo<strong>de</strong> asynchrone.• Gérer les sock<strong>et</strong>s serveur.• Gérer les impressions.Serveur utiliséLe bouton "Serveur" perm<strong>et</strong> <strong>de</strong> choisir un <strong>de</strong>s serveursWEB installés sur le poste en cours pour exécuterles sites WebDev. Attention : Ce serveur serautilisé pour tous les sites dynamiques WebDev installéssur ce poste.Si le serveur utilisé n'est pas présent dans c<strong>et</strong>teliste, choisissez "Autre". Il faudra alors configurermanuellement le serveur Web utilisé. Pour plus <strong>de</strong>détails sur la configuration <strong>de</strong> serveurs spécifiques,consultez l’ai<strong>de</strong> en ligne.DiagnosticLe bouton "Diagnostic" perm<strong>et</strong> d'effectuer une vérification<strong>de</strong> la configuration du poste en cours. Cediagnostic perm<strong>et</strong> <strong>de</strong> vérifier :• si le protocole TCP/IP est installé• si un serveur WEB (serveur HTTP) est lancé•si le gestionnaire <strong>de</strong> protocole AWP est correctementconfiguré• si les exécutables WebDev nécessaires sont présents.Si une <strong>de</strong> ces conditions n'est pas remplie, les sitesWebDev dynamiques ne pourront pas fonctionner.Pour plus <strong>de</strong> détails sur la configuration du poste<strong>de</strong> développement ou du serveur <strong>de</strong> déploiement,consultez l’ai<strong>de</strong> en ligne.Nom ou adresse IP du poste en coursL'administrateur WebDev perm<strong>et</strong> <strong>de</strong> spécifier unnom ou une adresse IP pour désigner un poste spécifique.Il est également possible <strong>de</strong> spécifier lenuméro <strong>de</strong> port. Par exemple : localhost:8080.Ce poste sera utilisé :• lors <strong>de</strong> l'utilisation du bouton "Diagnostic".• lors <strong>de</strong> l'utilisation du bouton "Page <strong>de</strong> test".•lors du test d'un site, d'une page, d'un état, ...<strong>de</strong>puis l'éditeur WebDev (icone "GO").TestLe bouton "Page <strong>de</strong> test" perm<strong>et</strong> d'afficher sous lenavigateur une page perm<strong>et</strong>tant <strong>de</strong> lancer chacun<strong>de</strong>s sites WebDev dynamiques <strong>et</strong> <strong>de</strong>s webservicesWebDev dynamiques installés sur ce poste.Pour plus <strong>de</strong> détails sur les tests d’un site WebDev,consultez le chapitre “Test d’un site en pratique”,page 202.Spooler <strong>de</strong> mailsSi c<strong>et</strong>te option est cochée, vos sites pourrontenvoyer <strong>de</strong>s emails sans bloquer l'exécution <strong>de</strong>sdifférents traitements. Il est également nécessaired'activer le mo<strong>de</strong> asynchrone à l'ouverture <strong>de</strong> lasession d'e-mails (à l'ai<strong>de</strong> <strong>de</strong> la fonction EmailOuvreSessionSMTP).Si le mo<strong>de</strong> asynchrone est activé, tous les emails àenvoyer seront transmis à un "Spooler". Les emailssont ainsi mis en file d'attente avant d'être envoyés.Remarque : si l'administrateur WebDev est fermé,le spooler d'emails est vidé : les emails en attentene sont pas envoyés <strong>et</strong> sont enlevés du spooler.Si vous cochez l'option "Désactiver le spooler <strong>de</strong>mail" alors que <strong>de</strong>s emails sont en attente, cesemails ne seront pas perdus : l'administrateur continue<strong>de</strong> les envoyer, mais aucun nouveau mail nesera accepté par le spooler.Partie 8 : Hébergement <strong>de</strong> sites WebDev 231
Sock<strong>et</strong>sSi l'option "Autoriser les sock<strong>et</strong>s serveur" estcochée, vos sites pourront manipuler les sock<strong>et</strong>sdu serveur (à l'ai<strong>de</strong> <strong>de</strong>s fonctions Sock<strong>et</strong>xxx duWLangage).Imprimante utilisée par défaut (site intran<strong>et</strong> uniquement)Le bouton "Configurer les impressions" perm<strong>et</strong> <strong>de</strong>sélectionner l'imprimante utilisée par défaut lorsd'une impression directe sur une imprimante localeou réseau du serveur Web.Remarque : Si une imprimante réseau est sélectionnée,il est nécessaire <strong>de</strong> définir les droitsd'impression <strong>de</strong> c<strong>et</strong>te imprimante.Recherche <strong>de</strong>s pages périméesC<strong>et</strong>te option perm<strong>et</strong> d'activer <strong>et</strong> <strong>de</strong> paramétrer larecherche <strong>de</strong>s pages périmées sur les sites Web-Dev gérés par le serveur d'application WebDev.232Partie 8 : Hébergement <strong>de</strong> sites WebDev
Configuration duserveurPour un site dynamique WebDev :Pour un site statique ou semi-dynamique :Partie 8 : Hébergement <strong>de</strong> sites WebDev 233
Serveur dédiéou mutualisé ?Les hébergeurs proposent <strong>de</strong>ux types <strong>de</strong> serveurs pour installer vos sites WebDev :• serveur mutualisé :serveur dont les ressources sont partagées par différents clients (client = société faisanthéberger son site chez un hébergeur)Caractéristiques :L’hébergeur fournit un poste serveur à différents clients.L’hébergeur :- configure le serveur FTP.- détermine le nombre maximum <strong>de</strong> connexions sur l’ensemble <strong>de</strong>s sites dynamiquesd’un même client (à l’ai<strong>de</strong> du gestionnaire <strong>de</strong> comptes WebDev).L’installation <strong>et</strong> les mises à jour d’un site dynamique ou statique peuvent être réaliséespar FTP.234Partie 8 : Hébergement <strong>de</strong> sites WebDev
• serveur dédié :le serveur est réservé au client. L’hébergeur fournit uniquement l’accès à Intern<strong>et</strong>(adresse IP, câble, ...).La machine est soit louée par l’hébergeur, soit fournie par le client.Caractéristiques :L’hébergeur fournit uniquement l’accès à Intern<strong>et</strong> (adresse IP, câble, ...).Le client doit :- fournir éventuellement le poste serveur (location possible)- configurer le poste (système, ...)- installer le serveur Web- installer <strong>et</strong> configurer les sites WebDev (par FTP ou par CD-ROM)Partie 8 : Hébergement <strong>de</strong> sites WebDev 235
Quel type <strong>de</strong> serveurchoisir ?Le tableau ci-<strong>de</strong>ssous présente les avantages <strong>et</strong> inconvénients <strong>de</strong>s différents types <strong>de</strong>serveurs.Quel que soit le type <strong>de</strong> serveur choisi, il est nécessaire <strong>de</strong> possé<strong>de</strong>r une licence <strong>de</strong> déploiementpour chaque serveur.Chaque serveur héberge un ou plusieurs sites dynamiques WebDev.Serveur Avantages / inconvénients Quand utiliserce serveur ?Mutualisé Principaux avantages :- Coût moindre- Administration du serveur réalisée par l’hébergeurPrincipaux inconvénients :- Ressources mémoire partagées entre les sitesprésents sur le serveur.- En cas <strong>de</strong> blocage d’un site, tous les sitessur le serveur sont bloqués.- Utilisation d’exécutables autonomes rarementpossible.- Accès non sécurisé aux données :Des personnes non autorisées peuventavoir accès aux données : l’hébergeur, <strong>et</strong>potentiellement, d’autres clients, si le serveurn’est pas correctement configuré.Conseil : cryptez les fichiers <strong>de</strong> donnéespour éviter toute utilisation non autorisée.Un serveur mutualisé estconseillé pour :- les sites peu visités (jusqu’à20 ou 30 connexionssimultanées),- les sites nécessitantpeu <strong>de</strong> mémoire (pas <strong>de</strong>calculs très importantseffectués sur le serveur),- les sites en phase <strong>de</strong> démarrage.Dédié Principaux avantages :- Ressources du poste serveur disponiblespour le(s) site(s) installé(s) sur ce poste.- Gestion du rapatriement <strong>de</strong>s données totalementpersonnalisable :- réplication par e-mails,- utilitaire WDREPLIC,- copie <strong>de</strong>s fichiers par FTP.Principaux inconvénients :- Coût important- Administration du poste serveur entièrementréalisée par le client, la plupart dutemps.Un serveur dédié est conseillépour :- les sites très visités,- les sites nécessitantune place disque <strong>et</strong> mémoireimportante,- les sites gérant <strong>de</strong>s donnéessensibles,- les sites dynamiques.236Partie 8 : Hébergement <strong>de</strong> sites WebDev
Centre <strong>de</strong> Contrôled’hébergementDestiné principalement aux hébergeurs <strong>et</strong> aux Webmasters, le centre <strong>de</strong> contrôle d'hébergementperm<strong>et</strong> d'ai<strong>de</strong>r à héberger plus facilement les sites WebDev.Le centre <strong>de</strong> contrôle gère bien sûr les comptes WebDev, mais également, le compte auniveau du serveur web <strong>et</strong> les droits au niveau du système d’exploitation.Un choix par défaut est proposé : il perm<strong>et</strong> d'installer un serveur par simple clic, sanscompétences spécifiques.Le paramétrage <strong>de</strong>s éléments suivants est centralisé :• Comptes Windows,• Groupes <strong>de</strong>s utilisateurs FTP,• Groupes <strong>de</strong>s clients WebDev,• Home Directory,• Alia s FTP,• Comptes WebDev,• Répertoires <strong>de</strong>s données,• Sites Web virtuels, ...Le centre <strong>de</strong> contrôle d’hébergement fonctionne sous environnement Windows avec leserveur web IIS (Intern<strong>et</strong> Information Server, toutes versions à partir <strong>de</strong> la 5).Partie 8 : Hébergement <strong>de</strong> sites WebDev 237
Site dynamique sur <strong>de</strong>s configurationsspécifiques1. Installation sur un serveur Web sous Windows (2000 ou supérieur) ou unserveur Linux238Partie 8 : Hébergement <strong>de</strong> sites WebDev
2. Installation sur un serveur Windows, avec un accès à Intern<strong>et</strong> par UNIX1. Ouverture d’une page statique. La page statique est présente sur le serveur UNIX.2. Lancement du site dynamique WebDev (présent sur le serveur Windows) par un lienprésent dans la page HTML statique.3. Fonctionnement normal du site WebDev.Remarque : la même configuration peut être adoptée avec un serveur Linux.Partie 8 : Hébergement <strong>de</strong> sites WebDev 239
3. Installation sur un serveur Windows ou Linux, avec Load BalancerLe système Load Balancer perm<strong>et</strong> <strong>de</strong> répartir la charge <strong>de</strong> connexion sur un site dynamiqueWebDev sur différents postes.Solution 1 : Installation du site dynamique WebDev uniquement sur le serveur <strong>de</strong> données.C<strong>et</strong>te solution consiste à installer :• sur chaque serveur WEB, le serveur d’application WebDev,• sur le serveur <strong>de</strong> données, les sites dynamiques WebDev <strong>et</strong> les fichiers <strong>de</strong> données.Solution 2 : Installation du site dynamique WebDev sur tous les serveurs WEB.C<strong>et</strong>te solution consiste à installer :• sur chaque serveur WEB, le serveur d’application WebDev, <strong>et</strong> les sites dynamiquesWebDev.• sur le serveur <strong>de</strong> données, les fichiers <strong>de</strong> données <strong>de</strong>s sites dynamiques WebDev.240Partie 8 : Hébergement <strong>de</strong> sites WebDev
Statistiques <strong>de</strong> fréquentation<strong>de</strong>s sites dynamiquesIl est souvent important <strong>de</strong> disposer <strong>de</strong> statistiques précises sur les visites <strong>de</strong>s sites.Comment savoir qui est venu sur votre site, les pages qui ont été consultées, les applicationsqui ont été utilisées, <strong>de</strong> quel site vient l’internaute ?WebDev est fourni avec un outil compl<strong>et</strong> <strong>de</strong> statistiques pour les pages dynamiques :WDStatistiques. C<strong>et</strong> outil peut être installé sur n’importe quel poste.Quelques exemples <strong>de</strong> statistiques fournies par WDStatistiques : nombre <strong>de</strong> connexionspar jour, pages consultées, systèmes d’exploitation <strong>et</strong> navigateurs <strong>de</strong>s internautes, ...Exemples <strong>de</strong> statistiques <strong>de</strong> sites dynamiques :Partie 8 : Hébergement <strong>de</strong> sites WebDev 241
Surveillez vos sites,serveurs, ...Un site dépend souvent <strong>de</strong> nombreux paramètres extérieurs : site Web, Serveur HyperFileSQL,réseau, ... Pour optimiser la gestion <strong>de</strong>s inci<strong>de</strong>nts, WebDev propose d’utiliser unrobot <strong>de</strong> surveillance.Composé <strong>de</strong> trois exécutables lancés sur différents postes, le robot <strong>de</strong> surveillance perm<strong>et</strong>d’exécuter différents tests : tests Intern<strong>et</strong>, tests réseau, ...En cas <strong>de</strong> problèmes lors du passage d’un test, le robot <strong>de</strong> surveillance peut vous avertir<strong>de</strong> différentes façons :• Message envoyé dans la messagerie PC SOFT (WDBAL).• Ema il• Exécution d’un programme tiers.De plus, une alerte sonore peut être mise en place sur le moniteur.242Partie 8 : Hébergement <strong>de</strong> sites WebDev
AnnexesPARTIE 9
Fonctions du WLangagespécifiques à WebDev <strong>16</strong>(Détail dans l’ai<strong>de</strong> en ligne du WLangage)AJAXAnnuleAppelAsynchrone Annule l'exécution automatique <strong>de</strong> la procédure navigateur appelée par lafonction AJAXExécuteAsynchrone.AJAXAppelAsynchroneEnCours Perm<strong>et</strong> <strong>de</strong> savoir si une procédure serveur appelée par la fonctionAJAXExécuteAsynchrone est en cours d’exécution.AJAXDisponiblePerm<strong>et</strong> <strong>de</strong> savoir si la technologie AJAX est utilisable dans le navigateur encours.AJAXExécuteExécute une procédure serveur sans rafraîchir la page. C<strong>et</strong>te fonction estbloquante.AJAXExécuteAsynchrone Exécute une procédure serveur sans rafraîchir la page. C<strong>et</strong>te fonction n'estpas bloquante.AjouteFavoriAjoute une adresse Intern<strong>et</strong> dans la liste <strong>de</strong>s favoris <strong>de</strong> l'internaute.AnnuleContexteAWPSupprime du contexte AWP une variable ajoutée par la fonction Déclare-ContexteAWP.ASPAfficheAppelle un script ASP externe <strong>et</strong> renvoie la page résultat dans la fenêtreen cours du navigateur.ASPExécuteAppelle un script externe .asp <strong>et</strong> renvoie le résultat dans une chaîne.CaptchaAfficheAffiche un nouveau captcha dans un champ captcha.CaptchaVérifieVérifie si la valeur saisie par l'utilisateur correspond à la chaîne affichéedans un champ captcha.CelluleAfficheDialogue Affiche une cellule dans la page avec un eff<strong>et</strong> <strong>de</strong> GFI (Grisage <strong>de</strong>s FenêtresInaccessibles). Perm<strong>et</strong> <strong>de</strong> simuler simplement une boîte <strong>de</strong> dialogue enco<strong>de</strong> navigateur, en utilisant une cellule dans une page.CelluleFermeDialogue Masque une cellule affichée dans la page via la fonction CelluleAffiche-Dialogue.CertificatClientInfoPerm<strong>et</strong> <strong>de</strong> connaître <strong>de</strong>s informations sur le certificat utilisé par le posteclient.ChaîneAfficheRenvoie une chaîne spécifique (ou un buffer) sur le navigateur du client enréponse à la requête reçue. Perm<strong>et</strong> d'afficher sur le navigateur <strong>de</strong> l'internaute<strong>de</strong>s documents sans avoir à passer par un fichier.ChangeActionPerm<strong>et</strong> <strong>de</strong> spécifier l'action effectuée en cas <strong>de</strong> désynchronisation entrela page HTML affichée dans le navigateur <strong>et</strong> le contexte <strong>de</strong> page sur le serveur.ChangeDestinationChange la frame <strong>de</strong> <strong>de</strong>stination <strong>de</strong> la page.CheminNavigationAjouteLien Ajoute un lien dans un chemin <strong>de</strong> navigation.CheminNavigationInsèreLien Insère un lien dans un chemin <strong>de</strong> navigation.CheminNavigationModifieLien Modifie un lien dans un chemin <strong>de</strong> navigation.CheminNavigationSupprimeLien Supprime un lien dans un chemin <strong>de</strong> navigation.CheminNavigationSupprimeTout Supprime tous les liens dans un chemin <strong>de</strong> navigation.ConfigureContexteAWP Définit le fonctionnement <strong>de</strong>s contextes AWP.ConnexionOccurrence Renvoie le nombre d'instances du site WebDev en cours d'exécution sur leserveur.ContexteExistePerm<strong>et</strong> <strong>de</strong> savoir si un contexte <strong>de</strong> page existe sur le serveur.ContexteFermeFerme un contexte <strong>de</strong> page.Partie 9 : Annexes 245
ContexteOuvreCookieEcritCookieLitDéclareContexteAWPEmailEtatEmailOuvreMessagerieFichierAfficheFichierVersPageFrames<strong>et</strong>ActualiseFrames<strong>et</strong>AfficheFrames<strong>et</strong>UtilisefRepWebGadg<strong>et</strong>AfficheFlyoutGadg<strong>et</strong>ChargeParamètreGadg<strong>et</strong>FermeFlyoutGadg<strong>et</strong>SauveParamètregpwOuvreConfigurationGPSDernièrePositionGPSEtatGPSRécupèrePositionGPSSuitDéplacementgrTailleImageI<strong>de</strong>ntifiantContexteAWPImageArrêteDéfilementImageDernierImageLanceDéfilementImageOccurrenceImagePositionDéfilementImagePosXImagePosYImagePrécé<strong>de</strong>ntImagePremierImageSuivantOuvre un nouveau contexte <strong>de</strong> page sans renvoyer les informations versle navigateur.Ecrit un cookie sur le poste <strong>de</strong> l'internaute lors du prochain affichage d'unepage WebDev dans le navigateur.Récupère la valeur d'un cookie enregistré sur le poste <strong>de</strong> l’internaute.Déclarer une liste <strong>de</strong> variables dont la valeur sera persistante entre les affichagessuccessifs <strong>de</strong>s pages AWPRenvoie l'état d'un email envoyé par une session SMTP ouverte en mo<strong>de</strong>asynchrone.Ouvre le logiciel <strong>de</strong> messagerie par défaut <strong>de</strong> l'internaute sur le poste navigateur.Renvoie un fichier spécifique sur le navigateur.Initialise automatiquement les champs d'une page avec les valeurs <strong>de</strong>s rubriquesassociées dans l'enregistrement en cours (chargé en mémoire) dufichier HyperFileSQL.Actualise un frames<strong>et</strong> affiché dans le navigateur <strong>de</strong> l'internaute à partir ducontexte présent sur le serveur.Affiche un frames<strong>et</strong> WebDev dans le navigateur <strong>de</strong> l'internaute.Affiche un frames<strong>et</strong> WebDev dans le navigateur <strong>de</strong> l'internaute <strong>et</strong> ferm<strong>et</strong>ous les contextes <strong>de</strong> pages <strong>et</strong> <strong>de</strong> frames<strong>et</strong> en cours.Renvoie le nom physique compl<strong>et</strong> du répertoire contenant les images, lesfichiers Javascript <strong>et</strong> Java du site WebDev.Affiche dans une zone popup une page du gadg<strong>et</strong> Vista.Charge une valeur persistante dans un gadg<strong>et</strong> Vista.Ferme la zone popup d'un gadg<strong>et</strong> Vista.Sauve une valeur persistante dans un gadg<strong>et</strong> Vista.Ouvre la page <strong>de</strong> configuration du groupware utilisateur.Récupère les informations sur la <strong>de</strong>rnière position connue <strong>de</strong> l’appareil.Récupère l’état d’activation du fournisseur <strong>de</strong> géolocalisation ou <strong>de</strong>man<strong>de</strong>à être notifié lors du changement d’état.Récupère les informations sur la position actuelle du périphérique.Deman<strong>de</strong> à être notifié périodiquement <strong>de</strong> la position courante du périphérique.Définit la taille <strong>de</strong> l'image contenant le graphe.Renvoie l'i<strong>de</strong>ntifiant du contexte AWP. C<strong>et</strong> i<strong>de</strong>ntifiant peut par exempleêtre utilisé pour construire une URL.Arrête le défilement automatique <strong>de</strong>s images.Affiche la <strong>de</strong>rnière image.Lance le défilement automatique <strong>de</strong>s images.Perm<strong>et</strong> <strong>de</strong> connaître le nombre total d'images.R<strong>et</strong>ourne l'image affichée.Renvoie la position horizontale du curseur <strong>de</strong> souris par rapport au champimage considéré.Renvoie la position verticale du curseur <strong>de</strong> souris par rapport au champimage considéré.Affiche l'image précé<strong>de</strong>nte.Affiche la première image.Affiche l'image suivante.246Partie 9 : Annexes
ImageZoneiRepImageHTMLJSEvénementJSFinEvénementJSInfoEvénementJSInterruptionEvénementJSMétho<strong>de</strong>JSONExécuteJSONExécuteExterneJSPropriétéMenuAjouteOptionURLNavigateurAdresseIPNavigateurEstConnectéNavigateurFermeNavigateurLanceAppliNavigateurNomNavigateurOuvrePageActiveGFIPageActualisePageAdressePageAffichePageAfficheDialoguePageCourantePageExistePageFermeDialoguePageInitialisationRenvoie le numéro <strong>de</strong> la zone <strong>de</strong> l’image cliquée par l’internaute (imageclicable uniquement).Perm<strong>et</strong> <strong>de</strong> sélectionner le répertoire <strong>de</strong>s images générées lors d'une l'impressionau format HTML.Associe une procédure navigateur à un événement sur un obj<strong>et</strong> en co<strong>de</strong>navigateur.Supprime l'association d'une fonction WLangage navigateur à événement(mis en place grâce à la fonction JSEvénement). La procédure associée àl'événement ne sera plus appelée.Perm<strong>et</strong> <strong>de</strong> manipuler les propriétés JavaScript <strong>de</strong> l'événement navigateurqui a déclenché l'exécution du co<strong>de</strong>.Interrompt le traitement <strong>de</strong> l'événement en cours.Perm<strong>et</strong> d’exécuter une métho<strong>de</strong> Javascript sur un élément <strong>de</strong> la page encours.Appelle une URL serveur du même domaine qui r<strong>et</strong>ourne <strong>de</strong>s données auformat JSON (JavaScript Object Notation).Appelle une URL serveur externe qui r<strong>et</strong>ourne <strong>de</strong>s données au formatJSON (JavaScript Object Notation). Les données sont traitées dans uneprocédure spécifique.Perm<strong>et</strong> <strong>de</strong> manipuler <strong>de</strong>s fonctionnalités spécifiques sur <strong>de</strong>s obj<strong>et</strong>s <strong>de</strong> lapage en cours.Ajoute une nouvelle option <strong>de</strong> menu à la fin d'un menu. C<strong>et</strong>te option <strong>de</strong>menu perm<strong>et</strong> d'afficher la page correspondant à l'URL indiquée.Renvoie l'adresse IP du poste <strong>de</strong> l'Internaute connecté au site WebDev.Indique si le navigateur est connecté au réseau.Ferme la fenêtre en cours du navigateur <strong>et</strong> stoppe l'exécution du co<strong>de</strong> encours.Lance le navigateur web natif <strong>de</strong> l'applicationRenvoie le nom du navigateur <strong>de</strong> l’internaute.Ouvre une nouvelle fenêtre du navigateur.Active ou désactive l’eff<strong>et</strong> appliqué par WebDev sur les pages inactiveslors <strong>de</strong> l’affichage d’une page modale.Actualise une page affichée dans le navigateur <strong>de</strong> l'internaute à partir ducontexte présent sur le serveur.Perm<strong>et</strong> d’obtenir l’adresse Intern<strong>et</strong> d’une page WebDev.Affiche une page dans le navigateur <strong>de</strong> l’internaute.Affiche une page <strong>de</strong> manière modale. C<strong>et</strong>te fonction perm<strong>et</strong> <strong>de</strong> créer undialogue avec l'utilisateur. La page est affichée <strong>de</strong>vant, <strong>et</strong> en arrière planse trouve la page ouvrante, grisée par le mécanisme <strong>de</strong> GFI.Renvoie le nom <strong>de</strong> la page contenant le co<strong>de</strong> WLangage en cours d'exécution.Vérifie si la page spécifiée est actuellement affichée dans le navigateur <strong>de</strong>l'internaute.Ferme la page courante. C<strong>et</strong>te page a été ouverte avec la fonctionPageAfficheDialogue. Une valeur <strong>de</strong> r<strong>et</strong>our peut être renvoyée à la pageappelante.Rem<strong>et</strong> à zéro (ou non) les champs <strong>de</strong> la page en cours <strong>et</strong> lance les traitementsd'initialisation <strong>de</strong>s champs.Partie 9 : Annexes 247
PageParamètreRenvoie la valeur d'un paramètre passé à la page en cours.PagePositionFait défiler une page pour positionner un champ dans la partie visible <strong>de</strong>la page (le plus haut) dans le navigateur.PagePrécé<strong>de</strong>nteRenvoie le nom <strong>de</strong> la page précé<strong>de</strong>nte.PageSemiDynamiqueAffiche Affiche une page semi-dynamique dans le navigateur <strong>de</strong> l'internaute à partird'une page WebDev dynamique ou statique.PageTauxGFIPerm<strong>et</strong> <strong>de</strong> définir le taux <strong>de</strong> grisage <strong>de</strong>s pages inactives.PageUtiliseAffiche une page WebDev dans le navigateur <strong>de</strong> l'internaute <strong>et</strong> ferme tousles contextes <strong>de</strong> pages en cours.PageVali<strong>de</strong>Vali<strong>de</strong> la page spécifiée <strong>et</strong> lance l'exécution d'un bouton.PageVersASPEnvoie les données d’une page actuellement affichée sous le navigateurvers un serveur ASP.PageVersEmailEnvoie les données d’une page actuellement affichée sous le navigateurpar un email.PageVersFichierInitialise automatiquement la valeur mémoire <strong>de</strong>s rubriques d'un fichieravec la valeur <strong>de</strong>s champs <strong>de</strong> la page.PageVersJSPEnvoie les données d’une page actuellement affichée sous le navigateurvers un serveur JSP.PageVersPHPEnvoie les données d’une page actuellement affichée sous le navigateurvers un serveur PHP.PageVersSource Initialise automatiquement :- la valeur mémoire <strong>de</strong>s rubriques d'un fichier <strong>de</strong> données avec la valeur<strong>de</strong>s champs <strong>de</strong> la page- la valeur <strong>de</strong>s variables WLangage avec la valeur <strong>de</strong>s champs <strong>de</strong> la page.PHPAfficheAppelle un script PHP externe <strong>et</strong> renvoie la page résultat dans la fenêtreen cours du navigateur.PHPExécuteAppelle un script externe .php <strong>et</strong> renvoie le résultat dans une chaîne. Unerequête http est effectuée: il est possible d'utiliser soit une métho<strong>de</strong>POST, soit une métho<strong>de</strong> GET.RépertoireDonnées Initialise automatiquement :- la valeur mémoire <strong>de</strong>s rubriques d'un fichier <strong>de</strong> données avec la valeur<strong>de</strong>s champs <strong>de</strong> la page- la valeur <strong>de</strong>s variables WLangage avec la valeur <strong>de</strong>s champs <strong>de</strong> la page.RépertoireWebRenvoie le chemin du répertoire contenant les images, les fichiers Javascript,les fichiers appl<strong>et</strong> Java, les autres fichiers accessibles <strong>de</strong>puis lenavigateur, ...rssAfficheConstruit un flux RSS <strong>et</strong> renvoie le contenu du flux RSS au client. Le résultatest affiché sur le navigateur <strong>de</strong> l'internaute.SaaSConnecteAuthentifie un utilisateur d’un site SaaS auprès du webservice SaaS gestionnairedu site.SaaSConnexionClient Renvoie les caractéristiques <strong>de</strong> la connexion à la base <strong>de</strong> données duclient. C<strong>et</strong>te fonction perm<strong>et</strong> à un utilisateur connecté grâce à la fonctionSaaSConnecte d'accé<strong>de</strong>r à la base <strong>de</strong> données cliente lui appartenant.SaaSDéconnecteDéconnecte l'utilisateur d'un site SaaS auprès du webservice SaaS gestionnairedu site.SaaSEcritParamètreSite Enregistre une information spécifique pour un site SaaS dans la configurationd'un compte client.SaaSEstConnectéDétermine si la connexion au webservice SaaS est toujours en cours.SaaSLitParamètreSite Lit une information spécifique au client pour le site SaaS en cours.248Partie 9 : Annexes
SaaSVérifieServiceVérifie les droits d'accès <strong>de</strong> l'utilisateur à un service du site SaaS.ScriptAfficheAppelle un script externe (par exemple .php, .asp, .mhtml ou .mht) <strong>et</strong> renvoiela page résultat dans la fenêtre en cours du navigateur.ScriptExécuteAppelle un script externe (par exemple .php ou .asp) <strong>et</strong> renvoie le résultatdans une chaîne. Une requête http est effectuée : il est possible d'utilisersoit une métho<strong>de</strong> POST, soit une métho<strong>de</strong> GET.SiteAdresseRenvoie l’adresse Intern<strong>et</strong> <strong>de</strong> connexion à un site dynamique WebDev situésur le même serveur.SourceVersPage Initialise automatiquement les champs d'une page avec :- les valeurs <strong>de</strong>s rubriques associées dans l'enregistrement en cours,- les valeurs <strong>de</strong>s variables WLangage associées.SiteDynamiqueAffiche Affiche un site dynamique (créé avec WebDev) dans le navigateur <strong>de</strong> l'internauteà partir d'une page WebDev dynamique ou statique.SSLActivePerm<strong>et</strong> d'activer ou <strong>de</strong> désactiver le mo<strong>de</strong> sécurisé SSL.StockageLocalAjouteAjoute une valeur au stockage local.StockageLocalDisponible Indique si le stockage local est disponible.StockageLocalNomValeur Donne le nom d'une valeur du stockage local.StockageLocalOccurrence Donne le nombre <strong>de</strong> valeurs du stockage local.StockageLocalRécupère Récupère une valeur du stockage local.StockageLocalSupprime Supprime une valeur du stockage local.StockageLocalSupprimeTout Supprime toutes les valeurs du stockage local.SupprimeContexteAWP Supprime du contexte AWP une variable ajoutée par DéclareContexteAWPSysVersionRenvoie <strong>de</strong>s renseignements sur la version <strong>de</strong> PHP utilisée sur le posteserveur en cours.UploadCopieFichierEnregistre sur le serveur un fichier "uploadé" par l'internaute.UploadFichierEnCours Indique le fichier en cours d'upload via le champ upload. C<strong>et</strong>te fonction estutile notamment pour les champs Upload multi-fichiers.UploadLanceLance l'envoi <strong>de</strong>s fichiers sélectionnés dans un champ upload. A la fin <strong>de</strong>l'envoi, la liste <strong>de</strong>s fichiers à envoyer est vidée sur le navigateur.UploadNomFichierRenvoie le nom d'un fichier "uploadé" par l'internaute. C<strong>et</strong> upload a pu êtreeffectuée :- via un champ <strong>de</strong> saisie <strong>de</strong> type "Upload",- via un champ Upload mono ou multi-fichiers.UploadSupprimeSupprime un fichier <strong>de</strong> la liste <strong>de</strong>s fichiers à uploa<strong>de</strong>r : le fichier ne serapas uploadé sur le serveur.UploadSupprimeToutVi<strong>de</strong> la liste <strong>de</strong>s fichiers à uploa<strong>de</strong>r : aucun fichier ne sera uploadé sur leserveur.UploadTailleRenvoie la taille totale (en oct<strong>et</strong>s) <strong>de</strong>s fichiers déjà envoyés par l'upload encours via un champ Upload.UploadTailleEnvoyéeRenvoie la taille totale (en oct<strong>et</strong>s) <strong>de</strong>s fichiers déjà envoyés par l'upload encours via un champ Upload.UploadTailleEnvoyéeFichierEn- Renvoie la taille (en oct<strong>et</strong>s) déjà envoyée du fichier en cours d'upload viaCoursun champ Upload.UploadTailleFichierRenvoie la taille totale (en oct<strong>et</strong>s) d'un fichier présent dans un champUpload.UploadTailleFichierEnCours Renvoie la taille (en oct<strong>et</strong>s) déjà envoyée du fichier en cours d'upload viaun champ Upload.Partie 9 : Annexes 249
Composants livrésavec WebDevWebDev est livré en standard avec <strong>de</strong> nombreux composants. Ces composants sont livrésavec leurs sources <strong>et</strong> avec un exemple d’utilisation.Voici la liste <strong>de</strong>s principaux composants livrés avec WebDev :Nom du composantDeman<strong>de</strong> <strong>de</strong> documentationDiagramme <strong>de</strong> GanttLoginImagePassMoteur <strong>de</strong> RecherchePanierPayBoxDescriptionPerm<strong>et</strong> <strong>de</strong> gérer une <strong>de</strong>man<strong>de</strong> <strong>de</strong> documentation (brochure,catalogue, ...) dans un site WebDev.Perm<strong>et</strong> d’afficher un diagramme <strong>de</strong> GANTT dans une tablemémoire ou dans une page intégrée au composant.Centralise la gestion <strong>de</strong>s utilisateurs <strong>et</strong> <strong>de</strong> leurs mots <strong>de</strong>passe.Perm<strong>et</strong> <strong>de</strong> générer une image codée en fonction <strong>de</strong>s paramètresdonnés.Perm<strong>et</strong> d’in<strong>de</strong>xer <strong>de</strong>s documents (texte, vidéos, sons, …) selonun i<strong>de</strong>ntifiant géré par l’utilisateur (pouvant provenird’un fichier <strong>de</strong> données HyperFileSQL, …) <strong>et</strong> <strong>de</strong>s mots-clés(texte contenu dans un document, nom <strong>de</strong> fichier, <strong>et</strong>c).Perm<strong>et</strong> également d’effectuer <strong>de</strong>s recherches sur les documentsainsi in<strong>de</strong>xés <strong>et</strong> <strong>de</strong> générer <strong>de</strong>s statistiques d’in<strong>de</strong>xation(mots-clés inutilisés, nombre <strong>de</strong> documents par motsclés,<strong>et</strong>c).Perm<strong>et</strong> <strong>de</strong> gérer facilement un panier <strong>de</strong> comman<strong>de</strong>s dansun site WebDev.Perm<strong>et</strong> <strong>de</strong> m<strong>et</strong>tre en place un système <strong>de</strong> paiement sécuriséen utilisant la solution <strong>de</strong> la société PayBox.Attention : ceci n’est pas une recommandation <strong>de</strong> PC SOFTpour l’utilisation <strong>de</strong> la solution <strong>de</strong> paiement sécurisé <strong>de</strong> lasociété PayBox.Deux sous-répertoires sont spécifiques à chacun <strong>de</strong> ces exemples :- le sous-répertoire "-Exemple" contient un exemple <strong>de</strong> proj<strong>et</strong> utilisantle composant.- le sous-répertoire "-Source" contient le proj<strong>et</strong> du composant.Des composants supplémentaires seront livrés avec la L<strong>et</strong>tre du Support Technique(LST) ou disponibles sur notre site (www.pcsoft.fr).250Partie 9 : Annexes
Exemples livrésavec WebDevLes exemples livrés avec WebDev présentent <strong>de</strong> manière didactique les différentes fonctionnalités<strong>de</strong> WebDev.Leur co<strong>de</strong> source est commenté <strong>et</strong> détaillé.Ces exemples sont présents dans le sous-répertoire "Exemples" du répertoire d'installation<strong>de</strong> WebDev <strong>et</strong> peuvent être ouverts directement <strong>de</strong>puis le vol<strong>et</strong> "Assistants, Exemples<strong>et</strong> Composants".Différents types d'exemples sont livrés avec WebDev :- exemples compl<strong>et</strong>s : ces exemples correspon<strong>de</strong>nt à <strong>de</strong>s sites compl<strong>et</strong>s, qui peuventêtre utilisés sans adaptation.- exemples didactiques : ces exemples illustrent une fonctionnalité spécifique.Exemples compl<strong>et</strong>sNom <strong>de</strong> l’exempleCatalogue_Intern<strong>et</strong>HawaiiN<strong>et</strong>AnnoncesRewaliSAVSAV_PhpDescriptionPropose un site catalogue en AWP <strong>et</strong> un site d'administration.- Gestion d'un panier- Gestion <strong>de</strong>s promotions- Gestion <strong>de</strong>s nouveautés- Recherche <strong>de</strong> produitGestion <strong>de</strong> supermarché en ligne. Perm<strong>et</strong> <strong>de</strong> visualiser, rechercher<strong>de</strong>s produits dans différentes boutiques. Ces produitspeuvent être ach<strong>et</strong>és <strong>et</strong> stockés dans un panier virtueljusqu’au paiement.Gestion <strong>de</strong> p<strong>et</strong>ites annonces. Perm<strong>et</strong> <strong>de</strong>s recherches multicritères,ajout, modification <strong>et</strong> suppression d'annonces, ainsiqu'une gestion d'utilisateurs.Achat <strong>de</strong> voyages en ligne. Perm<strong>et</strong> <strong>de</strong> sélectionner un voyage,<strong>de</strong> faire <strong>de</strong>s réservations, ...Gestion <strong>de</strong> dysfonctionnements. Perm<strong>et</strong> <strong>de</strong> créer, modifierou supprimer <strong>de</strong>s suggestions ou <strong>de</strong>s dysfonctionnements.Perm<strong>et</strong> également la recherche <strong>et</strong> la consultation <strong>de</strong>s informationsenregistrées.Gestion <strong>de</strong> dysfonctionnements en PHP. Perm<strong>et</strong> <strong>de</strong> créer,modifier ou supprimer <strong>de</strong>s suggestions ou <strong>de</strong>s dysfonctionnements.Perm<strong>et</strong> également la recherche <strong>et</strong> la consultation <strong>de</strong>sinformations enregistrées.Partie 9 : Annexes 251
WebDocWebDVDWebImmoWebMillionWebParcWW_Blog_AWPWW_Blog_PHPWW_CamembertWW_Editeur_HTMLWW_EmpruntWW_Forum_ClassicGestion Electronique <strong>de</strong> Documents (GED). Utilise le composantMoteur <strong>de</strong> recherche pour effectuer <strong>de</strong>s recherches parmot-clé.Site <strong>de</strong> location <strong>de</strong> DVD en ligne.Site <strong>de</strong> vente <strong>et</strong> <strong>de</strong> location <strong>de</strong> biens immobiliers.Utilise un fichier <strong>de</strong> données <strong>de</strong> plus d'1 million d'enregistrements.Il perm<strong>et</strong> <strong>de</strong> visualiser, <strong>de</strong> rechercher <strong>et</strong> <strong>de</strong> comman<strong>de</strong>r<strong>de</strong>s maqu<strong>et</strong>tes. Une fois la comman<strong>de</strong> établie, il estpossible d'imprimer la facture au format PDF ou d’utiliser lemodule PayBox <strong>de</strong> paiement sécuriséSimule une gestion <strong>de</strong> parc informatique.C<strong>et</strong> exemple est un site <strong>de</strong> gestion <strong>de</strong> blogs.C<strong>et</strong> exemple est basé sur une génération AWP, ce qui perm<strong>et</strong>entre autres <strong>de</strong> pouvoir référencer le site dans tous les moteurs<strong>de</strong> recherche. De plus, chaque blog peut être exportéen RSS.C<strong>et</strong> exemple est un site Php <strong>de</strong> gestion <strong>de</strong> blogs.Il est possible <strong>de</strong> m<strong>et</strong>tre en forme le texte, d'inclure <strong>de</strong>s images,<strong>de</strong>s citations, <strong>et</strong>c. De plus, chaque blog peut être exportéen RSS.C<strong>et</strong> exemple explique comment utiliser le grapheur livré enstandard avec WebDev <strong>et</strong> associer <strong>de</strong>s actions au clic sur <strong>de</strong>sparties dynamiques du graphe.C<strong>et</strong> exemple est développé pour Microsoft Intern<strong>et</strong> Explorer5.5 (ou version ultérieure). Il utilise les fonctionnalités d'éditionHTML d'Intern<strong>et</strong> Explorer.C<strong>et</strong> exemple perm<strong>et</strong> <strong>de</strong> simuler <strong>de</strong>s emprunts <strong>et</strong> notamment<strong>de</strong> calculer :- le montant <strong>de</strong>s mensualités à partir du montant empruntédonné- le montant empruntable à partir d'une mensualité donnée- le rapport d'un placement à partir d'un apport mensuelLe tableau d'amortissement est affiché pour chacun <strong>de</strong>s cas.Ce tableau peut être édité dans un fichier au format PDF(fonctionnalité standard <strong>de</strong> WebDev).C<strong>et</strong> exemple propose les fonctionnalités principales d'un forumutilisateur (création <strong>de</strong> forums, <strong>de</strong> suj<strong>et</strong>s (ou topics) <strong>et</strong> <strong>de</strong>messages, modération par un administrateur, <strong>et</strong>c...).252Partie 9 : Annexes
WW_ImagesWW_Images_phpWW_PlanningWW_SiteMarchand_phpWW_TraceCourbeWW_VitrineAWPWW_WebBourseWW_WebChatWW_ZoomC<strong>et</strong> exemple est une galerie d'images <strong>et</strong> <strong>de</strong> photographiessimplifiée. Les images contenues dans le répertoire "Data" durépertoire "Exe" du proj<strong>et</strong> sont affichées en miniature dansune liste horizontale défilante. Le défilement <strong>de</strong>s images estréalisé grâce à AJAX.C<strong>et</strong> exemple est un site Php. Il s'agit d'une galerie d'images <strong>et</strong><strong>de</strong> photographies simplifiées.C<strong>et</strong> exemple perm<strong>et</strong> d'afficher <strong>de</strong> façon dynamique les tâches<strong>de</strong>s différents collaborateurs.Il est possible d'ajouter, <strong>de</strong> modifier ou <strong>de</strong> supprimer <strong>de</strong>s tâchesdans le planning, simplement en cliquant sur les élémentsdu planning.Toutes les manipulations sont effectuées grâce à AJAX.C<strong>et</strong> exemple <strong>de</strong> site marchand simplifié est un site Php réaliséavec WebDev. Il perm<strong>et</strong> <strong>de</strong> visualiser, <strong>de</strong> rechercher <strong>et</strong> <strong>de</strong>comman<strong>de</strong>r <strong>de</strong>s maqu<strong>et</strong>tes.C<strong>et</strong> exemple perm<strong>et</strong> <strong>de</strong> <strong>de</strong>ssiner <strong>de</strong>s graphes.Présente le mixage entre un site dynamique WebDev classique<strong>et</strong> un site AWP WebDev.Les pages AWP du site seront référencés par les moteurs <strong>de</strong>recherche. Elles contiennent les produits classés par rayon.Les pages dynamiques perm<strong>et</strong>tent <strong>de</strong> gérer les prises <strong>de</strong>comman<strong>de</strong>s <strong>et</strong> les informations sur les clients du site. Ces informationsn’ont pas à être référencées par les moteurs <strong>de</strong>recherche.C<strong>et</strong> exemple explique comment utiliser le grapheur livré enstandard avec WebDev pour tracer <strong>de</strong>s graphes boursiers.Site <strong>de</strong> discussion en ligne <strong>et</strong> en direct. Plusieurs personnespeuvent se connecter au site <strong>et</strong> discuter avec les autres personnesdéjà présentes. Tous les traitements (envoi <strong>de</strong> messages,<strong>et</strong>c.) sont gérés grâce à AJAX. Il n'y a donc aucun eff<strong>et</strong><strong>de</strong> rafraîchissement dans les pages.C<strong>et</strong> exemple explique comment manipuler les images enco<strong>de</strong> navigateur : zoomer, se déplacer, gérer le clic sur unecarte. (ici une carte Michelin)Partie 9 : Annexes 253
Exemples didactiquesNom <strong>de</strong> l’exempleWW_AssistantWW_ChangementCSSWW_DiapoFonduWW_FlashParam<strong>et</strong>rableWW_Formulaire_FlexWW_FramesWW_MapAreaWW_MiseEnEvi<strong>de</strong>nceWW_NuageTagsDescriptionC<strong>et</strong> exemple m<strong>et</strong> à disposition une classe <strong>et</strong> un modèle <strong>de</strong>page réutilisables, qui perm<strong>et</strong>tent <strong>de</strong> créer <strong>et</strong> <strong>de</strong> gérer un assistantWeb.C<strong>et</strong> exemple explique comment modifier la feuille <strong>de</strong> stylesd'une page WebDev par programmation. Le changement <strong>de</strong>feuille <strong>de</strong> styles s'effectue en co<strong>de</strong> navigateur.Ce principe peut être utile par exemple pour changer l'interfaced'un site en fonction <strong>de</strong>s préférences <strong>de</strong> l'internaute.C<strong>et</strong> exemple montre comment réaliser un eff<strong>et</strong> <strong>de</strong> fondu entre2 images.C<strong>et</strong> exemple offre donc la possibilité <strong>de</strong> visionner <strong>de</strong>s imagesprésentes dans un répertoire donné avec un eff<strong>et</strong> <strong>de</strong> fondu àchaque changement d'images.Divers réglages sont disponibles :- vitesse du fondu,- lecture en boucle ou non,- lecture aléatoire ou non,- mo<strong>de</strong> diaporama ou passage à l'image suivante ou précé<strong>de</strong>ntepar clic.Techniquement, l'eff<strong>et</strong> <strong>de</strong> fondu est réalisé grâce à 2 imagessuperposées, <strong>et</strong> à un timer dans lequel on modifie <strong>de</strong> manièreinversement proportionnelle l'opacité <strong>de</strong>s 2 images, enco<strong>de</strong> navigateur.C<strong>et</strong> exemple fournit sous forme <strong>de</strong> superchamps <strong>de</strong>s ban<strong>de</strong>auxFlash personnalisables.C<strong>et</strong> exemple illustre un dialogue entre un champ Flex <strong>et</strong> unsite WebDev. Dans c<strong>et</strong> exemple, le champ Flex contient unformulaire. Ce formulaire est transmis au site WebDev parune requête HTTP. Il est conseillé <strong>de</strong> traiter c<strong>et</strong>te requêteHTTP <strong>de</strong>puis une page AWP.C<strong>et</strong> exemple montre comment modifier <strong>de</strong>ux frames différentes,sans réafficher tout le frames<strong>et</strong>.C<strong>et</strong> exemple a pour but <strong>de</strong> présenter l'utilisation <strong>de</strong>s maparea en programmation ou par action prédéfinie.C<strong>et</strong> exemple montre comment utiliser le CSS pour encadrer<strong>et</strong> m<strong>et</strong>tre en évi<strong>de</strong>nce <strong>de</strong>s mots dans un libellé HTML (ou unchamp HTML).C<strong>et</strong> exemple montre comment afficher un nuage <strong>de</strong> tagsdans une application WebDev dynamique.254Partie 9 : Annexes
WW_ReassortXMLWW_Regl<strong>et</strong>teAWPWW_TexteDefilantWW_WEB2WW_WIKIWWAjaxPHPWWChampOngl<strong>et</strong>WWConnectWWDialoguePerm<strong>et</strong> <strong>de</strong> gérer <strong>de</strong>s comman<strong>de</strong>s, modifier les quantitéscommandées, vali<strong>de</strong>r <strong>et</strong> enregistrer <strong>de</strong>s comman<strong>de</strong>s au formatXML.C<strong>et</strong> exemple montre comment gérer une régl<strong>et</strong>te dans unepage AWP. La régl<strong>et</strong>te est générée en WLangage grâce à diversesoptions (nombre <strong>de</strong> résultats par page <strong>de</strong> recherche,nombre total <strong>de</strong> résultat, ...).C<strong>et</strong> exemple propose l'utilisation du superchamp TexteDefilant.Ce superchamp perm<strong>et</strong> <strong>de</strong> faire défiler du texte dans uncadre <strong>de</strong> votre pageC<strong>et</strong> exemple montre comment utiliser un système <strong>de</strong> drag'ndrop <strong>de</strong> champs dans une page Web. Il s'agit ici <strong>de</strong> déplacerun produit en provenance d'une zone répétée vers un panier(ici, une page interne).C<strong>et</strong> exemple est un gestionnaire <strong>de</strong> documents WIKI.Un document WIKI est un document modifiable par toutes lespersonnes ayant accès à ce document.C<strong>et</strong> exemple est un site Php Ajax réalisé avec WebDev.Il présente notamment les tables Ajax <strong>et</strong> les zones répétéesAjax.Présente l’utilisation du champ Ongl<strong>et</strong>.Ce site perm<strong>et</strong> <strong>de</strong> détecter la ferm<strong>et</strong>ure d'un navigateur clientafin d'enregistrer, par exemple, sa déconnexion ou d'effectuer<strong>de</strong>s opérations spécifiques.C<strong>et</strong> exemple présente les boîtes <strong>de</strong> dialogue automatiques <strong>et</strong>également les boîtes <strong>de</strong> dialogue personnalisées.WWDiapo Ce site est un diaporama <strong>de</strong> photographies du Cantal (15).WWDloadWWEnvironnementWWFlashWWFormCe site perm<strong>et</strong> <strong>de</strong> proposer <strong>de</strong>s fichiers en téléchargementaux utilisateurs en fonction du groupe auquel ils appartiennent.Ce site perm<strong>et</strong> d'utiliser les variables d'environnement afin<strong>de</strong> récupérer certaines informations sur les internautes.Ce site perm<strong>et</strong> d'intégrer un menu déroulant Flash qui interagitavec WebDev. Ce site perm<strong>et</strong> donc d'utiliser <strong>de</strong>s animationsFlash dans un site WebDev.Ce site montre aussi l'interaction avec une animation Flash.C<strong>et</strong> exemple perm<strong>et</strong> <strong>de</strong> montrer comment changer dynamiquementl'apparence d'un formulaire contenu dans une pageWeb.Partie 9 : Annexes 255
WWMenuWWParamWWPock<strong>et</strong>WWTabulationWWToucheWWZoneWWZRGrapheC<strong>et</strong> exemple présente un menu réalisé avec WebDev.C<strong>et</strong> exemple montre comment passer <strong>et</strong> récupérer <strong>de</strong>s paramètresà un site.C<strong>et</strong> exemple est un site pouvant être visualisé sur un Pock<strong>et</strong>PC. Le site détecte la résolution du client <strong>et</strong> affiche les pagesen conséquence.Ce site perm<strong>et</strong> d'intercepter l'appui sur la touche [TABULA-TION] pour insérer une tabulation dans un champ <strong>de</strong> saisie.Ce programme perm<strong>et</strong> <strong>de</strong> détecter la touche frappée au clavier(événement OnKeyDown) sous Intern<strong>et</strong> Explorer. C<strong>et</strong>tefonctionnalité est mise en place dans un jeu <strong>de</strong> mots-croisés.C<strong>et</strong> exemple présente les cas les plus fréquents d’utilisation<strong>de</strong> zones répétées.C<strong>et</strong> exemple montre comment gérer <strong>de</strong>s zones répétées contenant<strong>de</strong>s graphes dynamiques.Des exemples supplémentaires sont livrés avec la L<strong>et</strong>tre du Support Technique (LST) ousont disponibles sur notre site (www.pcsoft.fr).256Partie 9 : Annexes
Change language