Autoformation_WebDev by Pierre Conrad

GAF_WebDev.book Page 1 Lundi, 15. dĂŠcembre 2008 5:31 17

Auto-Formation

GAF_WebDev.book Page 2 Lundi, 15. décembre 2008 5:31 17

WebDev 14.0 Documentation version 14.0(1) - 1108

Visitez régulièrement le site www.pcsoft.fr, espace actualités pour vérifier si des mises à jour sont proposées.

Adresse e-mail Support Technique Gratuit : supportgratuit@pcsoft.fr

Conseil : Pour recevoir directement des mises à jour intermédiaires et des conseils d’utilisation, abonnez-vous à la LST (revue trimestrielle + CD), en français.

Cette documentation n’est pas contractuelle. PC SOFT se réserve le droit de modifier ou de supprimer tout sujet traité dans ce document.

Tous les noms de produits ou autres marques cités dans cet ouvrage sont des marques déposées par leurs propriétaires respectifs. © PC SOFT 2008 : Aucune reproduction intégrale ou partielle du présent ouvrage sur quelque support que ce soit ne peut être effectuée sans l’autorisation expresse de PC SOFT.

GAF_WebDev.book Page 3 Lundi, 15. décembre 2008 5:31 17

SOMMAIRE Introduction Préliminaires ......................................................................................................................................................... 17 Présentation du cours d’auto-formation ............................................................................................................ 17 Comment accéder à l'aide en ligne ? ................................................................................................................. 18 Légende des symboles ......................................................................................................................................... 18 Si vous connaissez WebDev 12... ........................................................................................................................ 18 Que fait-on avec WebDev ? .................................................................................................................................. 19 Les nouveautés de WebDev 14 ........................................................................................................................... 19 Environnement de travail....................................................................................................................... 19 Programmation ....................................................................................................................................... 20

PARTIE 1 - A LA DÉCOUVERTE DE WEBDEV Leçon 1.1. Concepts Présentation .......................................................................................................................................................... 24 Concepts de base .................................................................................................................................................. 24 Terminologie .......................................................................................................................................................... 25 Dans l’analyse......................................................................................................................................... 25 Dans les pages et les états.................................................................................................................... 26 Les différents types de pages proposés par WebDev ....................................................................................... 27 Les différents types de pages................................................................................................................ 27 Les différents types de sites.................................................................................................................. 30 Les différents navigateurs ................................................................................................................................... 30 Les différents serveurs Web ................................................................................................................................ 31 Ce qui se passe côté navigateur ... ..................................................................................................................... 31 Ce qui se passe côté serveur ... ........................................................................................................................... 31

Leçon 1.3. Mes premières pages Présentation de la leçon ...................................................................................................................................... 36 Ma première page : saisie d’informations ......................................................................................................... 36 Présentation............................................................................................................................................ 36 Création de la page ................................................................................................................................ 37 Affichage d’un texte mis en forme ........................................................................................................ 39 Saisie d’informations.............................................................................................................................. 41 Bouton de validation d’une page .......................................................................................................... 42 Test d’une page ...................................................................................................................................... 45 Vérification des informations saisies .................................................................................................... 46

Sommaire

Leçon 1.2. Environnement nécessaire au Cours d’auto-formation

GAF_WebDev.book Page 4 Lundi, 15. décembre 2008 5:31 17

Ma seconde page : Affichage des informations saisies ................................................................................... 47 Création de la page ................................................................................................................................ 47 Création d’un libellé ............................................................................................................................... 47 Gestion des paramètres......................................................................................................................... 48

Sommaire

Leçon 1.4. Bases de programmation Introduction ........................................................................................................................................................... 52 Code serveur et code navigateur ........................................................................................................................ 52 Code serveur........................................................................................................................................... 53 Code navigateur...................................................................................................................................... 53 Déclaration des différents types de variables ................................................................................................... 54 La déclaration des variables et leur portée.......................................................................................... 54 Instructions de base du WLangage .................................................................................................................... 56 Instructions conditionnelles (code serveur et navigateur) .................................................................. 56 Instructions de boucle (code serveur et navigateur) ........................................................................... 56 Les commentaires .................................................................................................................................. 57 Le mot-clé MaPage (code serveur)........................................................................................................ 58 Procédures et fonctions ....................................................................................................................................... 58 Définition................................................................................................................................................. 58 Procédure locale..................................................................................................................................... 58 Procédure globale et collection de procédures.................................................................................... 58 Comment savoir si une procédure doit être globale ou locale ? ........................................................ 59 A propos du passage des paramètres .................................................................................................. 59 Appel d’une procédure........................................................................................................................... 59 Création d’une procédure ...................................................................................................................... 59 Un exemple pratique sur les procédures et les fonctions................................................................... 60 Traitement des chaînes (code serveur et navigateur) ...................................................................................... 60 Exemple pratique.................................................................................................................................... 60 Détails (code serveur et navigateur) ..................................................................................................... 61 Traitement des numériques (code serveur et navigateur) ............................................................................... 63 Exemple pratique.................................................................................................................................... 63 Détails...................................................................................................................................................... 63 Traitement des monétaires (code serveur uniquement) .................................................................................. 64 Exemple pratique.................................................................................................................................... 64 Détails...................................................................................................................................................... 64 Traitements des dates et des heures (code serveur et navigateur) ................................................................ 66 Présentation............................................................................................................................................ 66 Exemple pratique.................................................................................................................................... 66 Masque de saisie et valeur retournée .................................................................................................. 66 Les dates (code serveur et code navigateur) ..................................................................................................... 67 Exemple pratique.................................................................................................................................... 67 Quel jour sommes-nous ? ...................................................................................................................... 67 Quel jour sommes-nous, mais avec le jour et le mois en lettres ? ..................................................... 68 Quel est le nombre de jours entre 2 dates ?........................................................................................ 68 Quel est le jour de la semaine d’une date donnée ?........................................................................... 68 Petit exercice pratique ........................................................................................................................... 69 Les heures (code serveur et code navigateur) ................................................................................................... 69 Exemple pratique.................................................................................................................................... 69 Quelle heure est-il? ................................................................................................................................ 69

GAF_WebDev.book Page 5 Lundi, 15. décembre 2008 5:31 17

Combien de temps s'est écoulé entre deux heures ?.......................................................................... 70 Variable de type Date, Heure, DateHeure, Durée (code serveur) ....................................................... 70 Calculs avec des dates et des heures .................................................................................................. 71

PARTIE 2 - SITE AVEC DONNÉES Leçon 2.1. Présentation Présentation du site réalisé dans cette partie ................................................................................................... 76

Leçon 2.2. Projet et analyse Présentation .......................................................................................................................................................... 78 Création du projet ................................................................................................................................................. 78 Création de l’analyse ............................................................................................................................................ 79 Création de la description des fichiers de données .......................................................................................... 80 Création d’un fichier de données et de ses rubriques sous l’éditeur................................................. 81 Importation d’un fichier XML ................................................................................................................. 85 Importation de fichiers du dictionnaire................................................................................................. 88 Importation directe de fichiers de données existant ........................................................................... 88 Création des liaisons ............................................................................................................................................ 89 Génération de l’analyse ....................................................................................................................................... 91 Configuration de l’analyse pour le RAD .............................................................................................................. 92 Configuration du RAD dans la description de fichiers ......................................................................... 92 Configuration du RAD dans la description des rubriques.................................................................... 93

Leçon 2.3. Le RAD complet Qu’est-ce que le RAD ? ......................................................................................................................................... 96 Génération du RAD ............................................................................................................................................... 96 Test du site ............................................................................................................................................................ 98 Personnalisation du site généré ......................................................................................................................... 99

Présentation ........................................................................................................................................................101 Création d’une page de saisie ...........................................................................................................................101 Gestion de l’ajout d’un enregistrement ............................................................................................................103 Création du bouton d’ajout .................................................................................................................. 103 Ajout d’un masque de saisie ...............................................................................................................104 Effacement des données après l’ajout ............................................................................................... 105 Visualiser les enregistrements saisis.................................................................................................. 106 Gestion de l’upload de la couverture du livre..................................................................................... 107 Bouton de fermeture ............................................................................................................................108 Gestion de la recherche puis de la modification .............................................................................................108 Recherche à l’identique ....................................................................................................................... 108 Recherche générique ........................................................................................................................... 110 Modification de la fiche affichée ......................................................................................................... 110 Parcours des fiches .............................................................................................................................. 111

Sommaire

Leçon 2.4. Page de saisie

GAF_WebDev.book Page 6 Lundi, 15. décembre 2008 5:31 17

Leçon 2.5. Recherche multi-critères Présentation ........................................................................................................................................................114 Création d’une requête paramétrée .................................................................................................................114 Création d’une page avec une table basée sur la requête .............................................................................116

Leçon 2.6. Impression de données Présentation ........................................................................................................................................................120 Création d’un état ...............................................................................................................................................120 Lancement de l’impression de l’état ................................................................................................................121

Leçon 2.7. Le groupware utilisateur Présentation ........................................................................................................................................................124 Intégrer le groupware utilisateur .......................................................................................................................124 Configurer le groupware utilisateur ..................................................................................................................126

Leçon 2.8. Le tableau de bord Présentation ........................................................................................................................................................128 Tests automatiques ............................................................................................................................................128

Leçon 2.9. Référencement d’un site Présentation ........................................................................................................................................................133 Ajout d’une page d’accueil ................................................................................................................................133

PARTIE 3 - PAGES ET CHAMPS

Sommaire

Leçon 3.1. Les éditeurs L’environnement .................................................................................................................................................140 Les volets .............................................................................................................................................................140 Les différents volets ............................................................................................................................. 140 Manipuler les volets ............................................................................................................................. 141 Les configurations d’environnement .................................................................................................. 141 Le menu personnalisé ........................................................................................................................................141 Personnalisation des assistants .......................................................................................................................143

Leçon 3.2. Les pages Comment créer une page ? ...............................................................................................................................145 Description d’une page : 7 onglets à votre disposition ..................................................................................145 Exemple pratique.................................................................................................................................. 146 Onglet "Général" ...................................................................................................................................146 Onglet "Détail"....................................................................................................................................... 147 Onglet "Frame"...................................................................................................................................... 147 Onglet "Langue" ....................................................................................................................................147 Onglet "Note"......................................................................................................................................... 147 Onglet "Avancé"..................................................................................................................................... 147 Onglet "Style"......................................................................................................................................... 148

GAF_WebDev.book Page 7 Lundi, 15. décembre 2008 5:31 17

Traitements associés à une page .....................................................................................................................148 Déclarations globales (page dynamique uniquement) ......................................................................148 Initialisation (page dynamique uniquement)...................................................................................... 148 Chargement (page dynamique, semi-dynamique et statique) .......................................................... 148 Déchargement (page dynamique, semi-dynamique et statique) ...................................................... 148 Synchronisation (page dynamique uniquement)................................................................................ 148 Fermeture (page dynamique uniquement) ......................................................................................... 148

Introduction .........................................................................................................................................................151 Les champs classiques ......................................................................................................................................151 Type de champ : Libellé........................................................................................................................152 Type de champ : Champ de saisie....................................................................................................... 153 Type de champ : Bouton ...................................................................................................................... 157 Type de champ : Lien ........................................................................................................................... 158 Type de champ : Image ........................................................................................................................159 Type de champ : Image clicable ..........................................................................................................163 Type de champ : Sélecteur...................................................................................................................165 Type de champ : Interrupteur ..............................................................................................................166 Type de champ : Liste........................................................................................................................... 167 Type de champ : Combo....................................................................................................................... 172 Type de champ : Table ......................................................................................................................... 173 Type de champ : Zone répétée ............................................................................................................ 176 Type de champ : Arbre.......................................................................................................................... 178 Type de champ : Cellule ....................................................................................................................... 179 Type de champ : Graphe ...................................................................................................................... 180 Champs spécialisés ............................................................................................................................................180 Type de champ : Calendrier ................................................................................................................. 181 Type de champ : Tableau HTML ..........................................................................................................181 Type de champ : Ligne ......................................................................................................................... 181 Type de champ : HTML......................................................................................................................... 182 Type de champ : Web Caméra............................................................................................................. 182 Type de champ : Applet Java ...............................................................................................................182 Type de champ : Flash et Flex ............................................................................................................. 183 Type de champ : Silverlight.................................................................................................................. 184 Type de champ : IFrame....................................................................................................................... 185 Type de champ : Chemin de navigation.............................................................................................. 185 Type de champ : Plan de site...............................................................................................................185 Type de champ : Réglette..................................................................................................................... 186 Type de champ : Vignette..................................................................................................................... 187

Leçon 3.4. Ergonomie du site Présentation ........................................................................................................................................................189 Manipuler les styles des champs ......................................................................................................................189 Définir l’ordre de saisie des champs ................................................................................................................190 Afficher une aide dans les pages ......................................................................................................................190 La bulle d’aide....................................................................................................................................... 191 Message d’aide.....................................................................................................................................191 Texte d’indication.................................................................................................................................. 191

Sommaire

Leçon 3.3. Les champs

GAF_WebDev.book Page 8 Lundi, 15. décembre 2008 5:31 17

Utiliser les zones extensibles pour ancrer les champs ...................................................................................191 Regroupez vos champs dans des cellules .......................................................................................................192 Utilisez les règles et les options d’alignement ................................................................................................193 Utilisez des onglets pour regrouper vos champs .............................................................................................194 Améliorez la navigation dans votre site ...........................................................................................................195 Utilisez des boîtes de dialogue modernes .......................................................................................................195 Interface du site : Utilisez les modèles de pages ............................................................................................196 Qu’est-ce qu’un modèle de pages ?....................................................................................................196 Comment créer un modèle de pages ?...............................................................................................197 Comment appliquer un modèle de pages ? ....................................................................................... 197 Mise à jour du modèle..........................................................................................................................198 Comment dissocier un modèle importé dans une page ?................................................................. 198

Leçon 3.5. Réutilisabilité Qu’est-ce que la réutilisabilité ? ........................................................................................................................200 Réutiliser un ensemble de champs ..................................................................................................................200 Le superchamp..................................................................................................................................... 200 Page interne.......................................................................................................................................... 201 Modèle de champs...............................................................................................................................202

Sommaire

Leçon 3.6. Questions/Réponses Comment afficher une page dans une nouvelle fenêtre du navigateur ?........................................204 Par programmation...............................................................................................................................204 En utilisant l’éditeur de pages.............................................................................................................204 Comment modifier la couleur d’un libellé par programmation ?......................................................205 Comment rendre un bouton invisible ?...............................................................................................206 Comment créer un menu vertical dans une page WebDev ?............................................................ 206 Comment harmoniser le look de mes pages ?................................................................................... 206 Comment ajouter un menu contextuel sur une table ou une zone répétée ?................................. 207 Comment passer des paramètres à une page ?................................................................................ 207 Comment regrouper des champs pour modifier leurs propriétés par programmation ?................ 207 Comment transformer un champ Interrupteur en un champ Sélecteur ? ....................................... 208 Comment aligner des champs ?.......................................................................................................... 208 Comment mettre des boutons à la même taille ?.............................................................................. 209 Comment ajouter une image en fond de page ?................................................................................ 209 Comment afficher la date de mise à jour d’un site ?......................................................................... 209

PARTIE 4 - BASE DE DONNÉES ET ANALYSES Leçon 4.1. Introduction Présentation ........................................................................................................................................................214 Les différents modes d’accès aux bases de données ....................................................................................214 Accès Natif ............................................................................................................................................214 Accès ODBC direct................................................................................................................................ 215 Accès OLE DB........................................................................................................................................215 Accès ODBC via OLE DB....................................................................................................................... 215 Quel accès utiliser ? ............................................................................................................................. 215

GAF_WebDev.book Page 9 Lundi, 15. décembre 2008 5:31 17

Leçon 4.2. Parcours de fichiers et de requêtes Parcours de type HLitPremier ...........................................................................................................................217 Parcours de type HLitRecherche .......................................................................................................................217 Parcours de type POUR TOUT ............................................................................................................................218 Parcours de type POUR TOUT AVEC ..................................................................................................................218 Quel type de parcours choisir ? .........................................................................................................................219

Leçon 4.3. Gestion des erreurs Présentation ........................................................................................................................................................221 Gestion des erreurs en mode automatique .....................................................................................................221 Gestion des erreurs en mode programmé manuellement ............................................................................223 Gestion des erreurs en mode programmé avancé .........................................................................................225

Leçon 4.4. La Journalisation Qu’est-ce que la journalisation ? .......................................................................................................................229 La journalisation pour quoi faire ? ......................................................................................................229 Comment mettre en place la journalisation ? .................................................................................................229 Physiquement, comment se matérialise la journalisation ? .............................................................230 Comment réussir la mise en place de la journalisation ? ..............................................................................231

Leçon 4.5. Les transactions Qu’est-ce qu’une transaction ? ..........................................................................................................................233 Un exemple simple de la nécessité des transactions pour certains types de traitements ............ 233 Les transactions sur HyperFileSQL .....................................................................................................234 Utilisation des transactions ...............................................................................................................................234 Mettre en place la gestion des transactions ...................................................................................... 234 Manipuler les enregistrements lors d'une transaction : les règles à suivre .................................... 235 Que faire si une transaction a été interrompue ? ..............................................................................235

Leçon 4.6. Cryptage de données

Leçon 4.7. La réplication A quoi sert la réplication de données ? ............................................................................................................241 Mise en oeuvre de la réplication de données ..................................................................................................241 Mise en place ......................................................................................................................................................242 1. Activation ..........................................................................................................................................242 2. Déclaration de la base maître......................................................................................................... 242 3. Déclaration des bases abonnées ................................................................................................... 242 4. Réplication........................................................................................................................................ 242

Leçon 4.8. Les triggers A quoi sert un trigger ? .......................................................................................................................................245 Définition d’un trigger........................................................................................................................... 245

Sommaire

A quoi sert le cryptage des données ? ..............................................................................................................237 Comment crypter des fichiers ...........................................................................................................................237 Mettre en place le cryptage des fichiers.............................................................................................237 Gestion du cryptage en WLangage......................................................................................................239

GAF_WebDev.book Page 10 Lundi, 15. décembre 2008 5:31 17

Mise en place ......................................................................................................................................................245 Etape 1 : décrire le trigger (ici dans le code d’initialisation du projet) .............................................245 Etape 2 : créer une procédure globale liée au trigger ....................................................................... 246

Leçon 4.9. Bases externes Présentation ........................................................................................................................................................248 Connexion à une base de données dans l’éditeur d’analyses .......................................................................248 Connexion à une base de données par programmation ................................................................................250 Création de la connexion : HOuvreConnexion .................................................................................... 251 Association de la connexion aux fichiers de données : HChangeConnexion...................................251

PARTIE 5 - ADMINISTRER UNE BASE HYPERFILESQL CLIENT/SERVEUR Leçon 5.1. Introduction Présentation ........................................................................................................................................................256 Pourquoi passer un site en mode HyperFileSQL Client/Serveur ? ................................................................257

Leçon 5.2. Mise en place d’un site HyperFileSQL Client/Serveur Présentation ........................................................................................................................................................259 Installation d’un serveur HyperFileSQL local ...................................................................................................259 Créer un site en mode HyperFileSQL Client/Serveur ......................................................................................259 Migrer un site HyperFileSQL Classic en mode HyperFileSQL Client/Serveur ...............................................260 Présentation.......................................................................................................................................... 260 Migration de l’exemple......................................................................................................................... 260 Fonctionnalités disponibles en mode HyperFileSQL Client/Serveur ............................................................262

Leçon 5.3. Administrer

Sommaire

PARTIE 6 - LES REQUÊTES Leçon 6.1. Créez votre 1ère requête Introduction .........................................................................................................................................................274 Votre première requête ......................................................................................................................................274

Leçon 6.2. Requêtes avec comptage Réalisation d’une requête avec comptage ......................................................................................................281

GAF_WebDev.book Page 11 Lundi, 15. décembre 2008 5:31 17

Leçon 6.3. Requêtes Somme Réalisation d’une requête "Somme" ................................................................................................................284

Leçon 6.4. Le langage SQL Code source d’une requête ................................................................................................................................287 Les ordres SQL ....................................................................................................................................................288 L’instruction SELECT ............................................................................................................................288 L’instruction FROM............................................................................................................................... 288 La clause WHERE .................................................................................................................................288 La clause GROUP BY ............................................................................................................................288 La clause ORDER BY ............................................................................................................................289

Leçon 6.5. Utilisation des requêtes Utilisation d’une requête depuis un état ..........................................................................................................291 Utilisation d’une requête depuis un champ table ou une zone répétée .......................................................291 Utilisation d’une requête depuis le WLangage ................................................................................................291

PARTIE 7 - LES ÉTATS Leçon 7.1. Introduction Principes d’impression sur Internet ..................................................................................................................296 Impression directe................................................................................................................................ 296 Génération de documents HTML, PDF, XML, ... ................................................................................. 296 Vocabulaire de base ...........................................................................................................................................296

Leçon 7.2. Votre 1er état Présentation ........................................................................................................................................................300 Les états à créer................................................................................................................................... 300 Création de votre premier état ..........................................................................................................................301 Création de l’état : Liste des clients triée par code postal ................................................................ 301

Leçon 7.4. Etats Tableau Croisé Présentation ........................................................................................................................................................317 Etape par étape ...................................................................................................................................................317

Leçon 7.5. Exécution des états Exécuter les états en WLangage .......................................................................................................................322 Fonction iDestination ........................................................................................................................... 323 Fonction iImprimeEtat.......................................................................................................................... 323

Sommaire

Leçon 7.3. Etats statistiques

GAF_WebDev.book Page 12 Lundi, 15. décembre 2008 5:31 17

PARTIE 8 - PROGRAMMATION AVANCÉE Leçon 8.1. Fonctionnalités WEB Présentation ........................................................................................................................................................328 Les cookies ..........................................................................................................................................................328 Que contient un cookie ? .....................................................................................................................328 Gérer les cookies avec WebDev .......................................................................................................... 329 Exemple pratique.................................................................................................................................. 330 Upload de fichiers ...............................................................................................................................................330 Gérer l’upload ....................................................................................................................................... 331 Exemple pratique.................................................................................................................................. 331 Le download de fichiers (ou "téléchargement") ..............................................................................................332 Gérer le téléchargement (download)...................................................................................................333 Exemple pratique.................................................................................................................................. 333 Sécuriser les pages .............................................................................................................................................333 Protéger l’accès à vos pages par mot de passe.................................................................................333 Sécuriser les informations et les pages grâce à SSL ......................................................................................336 Mise en place des transactions sécurisées par le protocole SSL .................................................... 336 Transactions sécurisées par SSL dans un site WebDev ...................................................................336 Paiement sécurisé ..............................................................................................................................................337 Système de paiement sécurisé dans un site WebDev ...................................................................... 338

Leçon 8.2. XML Qu’est-ce que le langage XML ? ........................................................................................................................341 Exemple de lecture d’un fichier XML ................................................................................................................341 Traiter un document XML.....................................................................................................................342 Récupérer des valeurs ......................................................................................................................... 344 Effectuer une recherche ......................................................................................................................344

Sommaire

Leçon 8.3. Les timers Introduction .........................................................................................................................................................346 Programmation des timers ...............................................................................................................................346 Exemple pratique.................................................................................................................................. 346 Créer un timer....................................................................................................................................... 346 Arrêter un timer ....................................................................................................................................346

Leçon 8.4. Gestion automatique des erreurs Présentation ........................................................................................................................................................348 Fonctionnement....................................................................................................................................348 Mise en place........................................................................................................................................348 Types d’erreurs concernées.................................................................................................................348 Utilisation de la gestion automatique des erreurs ..........................................................................................349

Leçon 8.5. Les indirections Présentation ........................................................................................................................................................351 Exemple ...............................................................................................................................................................351

GAF_WebDev.book Page 13 Lundi, 15. décembre 2008 5:31 17

Leçon 8.6. La gestion des emails Présentation ........................................................................................................................................................353 Les protocoles POP3 / SMTP ............................................................................................................................353 Ouvrir une session de messagerie ....................................................................................................................354 Envoyer un email ................................................................................................................................................354 Lire un email ........................................................................................................................................................355 Déconnexion ........................................................................................................................................................356 Autres possibilités ...............................................................................................................................................356

Leçon 8.7. La POO Concepts ..............................................................................................................................................................358 Les classes............................................................................................................................................ 358 Les objets ..............................................................................................................................................358 Les membres ........................................................................................................................................ 358 Les méthodes ....................................................................................................................................... 358 Notion d’héritage .................................................................................................................................. 358 Constructeur et Destructeur ................................................................................................................ 358 Encapsulation de données .................................................................................................................. 359 Créer un programme orienté objet......................................................................................................359 Déclarer une classe.............................................................................................................................. 359 Décrire les méthodes ........................................................................................................................... 360 Déclarer et manipuler les objets ......................................................................................................... 360

PARTIE 9 - GESTION DE PROJET AVANCÉE Leçon 9.1. Configuration nécessaire Présentation ........................................................................................................................................................364 Mise en place ......................................................................................................................................................364

Leçon 9.3. GDS Introduction .........................................................................................................................................................373 GDS (Gestionnaire de Sources) .........................................................................................................................373 Principe du GDS.................................................................................................................................... 373 Création de la base de sources........................................................................................................... 374 Intégration d’un projet dans le GDS.................................................................................................... 374 Ouverture du projet depuis le GDS......................................................................................................378 Configuration du GDS........................................................................................................................... 378

Sommaire

Leçon 9.2. Tableau de bord

GAF_WebDev.book Page 14 Lundi, 15. décembre 2008 5:31 17

Extraction d’un élément....................................................................................................................... 380 Modification de l’élément extrait......................................................................................................... 381 Réintégration de l’élément extrait....................................................................................................... 381 Synchronisation du projet.................................................................................................................... 382 Mode déconnecté (ou nomade)........................................................................................................... 382 Administrateur du GDS ........................................................................................................................ 383

Leçon 9.4. Centres de contrôle Présentation ........................................................................................................................................................385 Le Centre de Suivi de Projets ............................................................................................................................385 Gérer son temps .................................................................................................................................................387 Les autres Centres de Contrôle .........................................................................................................................388

Leçon 9.5. Règles métier Présentation ........................................................................................................................................................390 Exemple.................................................................................................................................................390 Application sur un exemple concret .................................................................................................................390 Création d’une règle métier .................................................................................................................390

Leçon 9.6. Web Services Introduction .........................................................................................................................................................394 Aspect théorique .................................................................................................................................................394 Le standard SOAP................................................................................................................................. 394 Etape par étape, l’importation d’un service Web ............................................................................................395 Etape 1 : Création du projet.................................................................................................................395 Etape 2 : Importation du service Web................................................................................................. 395 Etape 3 : utilisation de la collection de procédures........................................................................... 397

Sommaire

Leçon 9.7. Les composants Présentation ........................................................................................................................................................402 Travail en équipe .................................................................................................................................. 402 Les projets volumineux ........................................................................................................................ 402 Les bases de données accédées par plusieurs projets ....................................................................403 Les traitements utilisés dans plusieurs projets .................................................................................403 La possibilité de diffuser une fonctionnalité ou un ensemble de fonctionnalités........................... 403 Composant multiproduits.....................................................................................................................403 Etape par étape ...................................................................................................................................................404 Etape 1 : Création d’un composant ....................................................................................................404 Etape 2 : Utilisation du composant ..................................................................................................... 408 Distribuer un composant ...................................................................................................................................409 Distribution simple ...............................................................................................................................409 Distribution professionnelle.................................................................................................................409

Leçon 9.8. Multi-configurations Présentation ........................................................................................................................................................411 Création d’une configuration de projet .............................................................................................................411 Gestion des configurations de projet ................................................................................................................412 Génération multiple ............................................................................................................................................412

GAF_WebDev.book Page 15 Lundi, 15. décembre 2008 5:31 17

Leçon 9.9. Le débogueur Présentation ........................................................................................................................................................414 Déboguer une page ............................................................................................................................................414 Lancer le débogueur.............................................................................................................................414 Visualiser les informations sous le débogueur .................................................................................. 415 Fenêtre de trace du débogueur .........................................................................................................................416 Déboguer un projet .............................................................................................................................................416

Leçon 9.10. L’analyseur de performances Présentation ........................................................................................................................................................418 Utiliser l’analyseur de performances ................................................................................................................418 Optimiser un traitement avec l’analyseur de performances .........................................................................419 Lire le résultat de l’analyseur de performances................................................................................. 419 Choisir un traitement à optimiser........................................................................................................ 419 Optimiser un traitement....................................................................................................................... 419

Leçon 9.11. Import/Export Importer des éléments .......................................................................................................................................422 Exporter des éléments .......................................................................................................................................423 Importations spécifiques ...................................................................................................................................424 Importation d’un projet WinDev........................................................................................................... 424 Importation d’une page HTML............................................................................................................. 424

Qu’est-ce que UML ? ...........................................................................................................................................427 Les diagrammes gérés par WebDev .................................................................................................................427 Diagramme de classes......................................................................................................................... 427 Diagramme de cas d’utilisation........................................................................................................... 427 Diagramme d’objets .............................................................................................................................427 Diagramme de composants................................................................................................................. 427 Diagramme d’activité ........................................................................................................................... 427 Diagramme de séquence..................................................................................................................... 427 Diagramme de collaboration ...............................................................................................................428 Diagramme d’états-transitions ............................................................................................................ 428 Diagramme de déploiement ................................................................................................................ 428 3-Tiers ...................................................................................................................................................................428 Le 3 tiers, c'est quoi ? .......................................................................................................................... 428 Comment mettre en oeuvre le 3 tiers ?.............................................................................................. 429 Manipulation des différentes couches ............................................................................................... 429

Leçon 9.13. Modélisation souple Principe ................................................................................................................................................................431 Manipulations ......................................................................................................................................................431

Leçon 9.14. Multilangue Qu’est-ce qu’un site multi-langue ? ..................................................................................................................435 Choix des langues du projet ...............................................................................................................................435 Internationalisation de l’analyse .......................................................................................................................436

Sommaire

Leçon 9.12. UML et 3-tiers

GAF_WebDev.book Page 16 Lundi, 15. décembre 2008 5:31 17

Internationalisation des éléments du projet ...................................................................................................438 Comment traduire toutes ces informations ?.....................................................................................439 Saisie directe des traductions .............................................................................................................439 Cas particuliers ..................................................................................................................................... 440 Traduction avec WDMSG et WDTRAD................................................................................................. 441 Programmation du changement de langue ....................................................................................................442 Gestion des alphabets spécifiques ...................................................................................................................442

PARTIE 10 - DÉPLOIEMENT DE SITES Leçon 10.1. Déploiement d’un site dynamique Présentation ........................................................................................................................................................446 Configuration nécessaire ...................................................................................................................................446 Installation du Serveur d’Application WebDev 10 connexions ......................................................... 446 Configuration du compte WebDev nécessaire au déploiement........................................................ 447 Création d’un compte utilisateur Windows......................................................................................... 448 Déploiement de votre site dynamique .............................................................................................................448 Préparation de l’installation.................................................................................................................448

Leçon 10.2. Administration distante Présentation ........................................................................................................................................................455 Utilisation de WDAdminWeb140 ......................................................................................................................456

Leçon 10.3. Statistiques d’un site Introduction .........................................................................................................................................................458 Configuration du serveur ....................................................................................................................................458 Utilisation de WDStatistique .............................................................................................................................459 Lancer WDStatistique...........................................................................................................................459 Importer les fichiers Journaux .............................................................................................................459 Fonctionnalités de WDStatistique....................................................................................................... 459

Sommaire

Leçon 10.4. Tests de non-régression Présentation de WDTestSite .............................................................................................................................462 Conditions d'utilisation......................................................................................................................... 462 Utilisation de WDTestSite ..................................................................................................................................462 Enregistrement d’un scénario de test................................................................................................. 463 Exécution d’un scénario....................................................................................................................... 464

Leçon 10.5. Back Office WinDev Présentation ........................................................................................................................................................467

Conclusion

GAF_WebDev.book Page 17 Lundi, 15. décembre 2008 5:31 17

INTRODUCTION Préliminaires Attention : ce manuel est un cours d'auto-formation. Vous devez avoir le Manuel de programmation à portée de main lorsque vous utilisez WebDev. Vous pouvez également consulter l'aide en ligne de WebDev. Le manuel du cours d'auto-formation a pour objectif de vous faire découvrir WebDev, de vous familiariser avec les éditeurs et de vous apprendre les concepts de WebDev. Ce manuel n'est PAS exhaustif des possibilités de WebDev. Consacrez au moins deux journées pour suivre ce cours et pour apprendre WebDev : vous les rentabiliserez vite ! Si vous essayez de démarrer le développement d'un site WebDev sans avoir suivi ce cours, vous perdrez du temps, beaucoup plus que deux jours. Le cours a été conçu pour être suivi de deux façons : • soit vous suivez tous les exercices détaillés dans les leçons du cours (méthode conseillée). • soit, si vous êtes pressé et disposez d’une expérience significative, vous pouvez uniquement le lire sans exécuter les exemples, tous les exercices sont illustrés. Toutefois, pour que les concepts soient plus rapidement assimilés, il est préférable de suivre les manipulations. WebDev évoluant en permanence, les copies d’écran illustrant le cours peuvent être différentes de celles du produit que vous possédez. L’aspect langage n’est qu’un des nombreux aspects de développement. En prenant en compte tous les aspects du développement, la programmation devient beaucoup plus simple.

Le cours d'auto-formation a été conçu pour vous permettre d'apprendre progressivement à utiliser WebDev. En suivant ce cours : • d'une part, vous découvrirez les concepts importants expliqués d'une façon informelle; en effet dans ce cas, il s'agit de concepts à acquérir et à comprendre. • d'autre part, vous serez amené à effectuer des manipulations pour illustrer les concepts qui viennent d'être expliqués. Au fil de la lecture du cours, si vous voulez approfondir un concept ou si vous voulez avoir plus de détails sur une fonction de programmation, consultez le Manuel de Programmation, ou encore l'aide en ligne (accessible directement depuis les éditeurs ou dans le guide). Rappelons que la plupart des informations contenues dans le manuel sont accessibles depuis l'aide en ligne. La taille d’une leçon n’est pas obligatoirement proportionnelle à son intérêt ... N'oubliez pas d'étudier ensuite les exemples livrés avec WebDev : ils sont très didactiques !

Introduction

Présentation du cours d’auto-formation

GAF_WebDev.book Page 18 Lundi, 15. décembre 2008 5:31 17

Astuce

Depuis l’impression de ce document, le cours d’auto-formation a peut-être évolué. N’hésitez pas à consulter la version électronique du cours d’auto-formation (fichier PDF accessible directement par l’option de menu "? .. Guide d’auto-formation .. Guide d’auto-formation (PDF)".

Comment accéder à l'aide en ligne ? 1. Sous les éditeurs, directement par la touche [F1]. 2. Dans les éditeurs, le menu d'aide du menu déroulant (symbolisé par "?") vous permet d'obtenir le sommaire de l'aide ou de rechercher une information précise. 3. De plus, depuis l'éditeur de code, une aide spécifique est directement accessible pour chaque nom de fonction sélectionné grâce à la touche [F1]. 4. Le bouton

accessible depuis chaque fenêtre.

Légende des symboles Ce symbole indique la durée de la leçon et de ces manipulations. Attention, le temps réel peut varier selon votre expérience. Un exemple est disponible pour compléter le cours. Ce symbole présente une "Astuce", la lecture du texte associé est vivement conseillée. Ce symbole présente un "Avertissement", la lecture du texte associé est primordiale.

Introduction

Ce symbole présente une "Note", la lecture du texte associé est conseillée. Ce symbole présente une particularité liée à Internet, la lecture du texte associé est vivement conseillée. Destiné à un développeur connaissant les versions précédentes de WebDev.

Si vous connaissez WebDev 12... Si vous connaissez déjà WebDev, le suivi de ce nouveau cours ne pourra être que bénéfique : ce sera une bonne occasion de "réviser" les possibilités de WebDev !

GAF_WebDev.book Page 19 Lundi, 15. décembre 2008 5:31 17

Que fait-on avec WebDev ? WebDev est un AGL (Atelier de Génie Logiciel). Il vous permet de développer des sites Internet et Intranet sophistiqués dans tous les domaines : • Commerce en ligne (Ventes, Locations, Réservations, ...) • Multimédia (Présentation de société, Sites "vitrines", ...) • Intranet (logins, accès sécurisés, ...) • ... WebDev est un outil de développement complet qui intègre tous les outils nécessaires au cycle de réalisation d’un site Internet ou Intranet. Contrairement à d’autres langages de développement traditionnels, il n’est pas nécessaire de chercher et de rajouter des modules pour pouvoir concevoir, tester et mettre en ligne (ou "déployer") un site. Le L5G (Langage de 5ème Génération) de WebDev, le WLangage, vous étonnera par sa simplicité : quelques heures suffisent pour appréhender le langage, une semaine suffit en général pour maîtriser toute sa puissance ! Comme il est en français, le WLangage (disponible également en anglais) vous fera gagner du temps !

Les nouveautés de WebDev 14 Voici la liste, non exhaustive, des principales nouveautés de WebDev 14 par rapport à WebDev 12 :

• Editeur de projet : •Explorateur de projets •Recherche multi-projets •Composant interne : Possibilité d’inclure une analyse. •Robot de surveillance redistribuable. •Optimisation des Centres de Contrôle (Centre de Suivi de Projets, Centre de Contrôle Qualité, ...) • Editeur d’analyse : •Descriptions d’index full-text • Editeur de pages : •Nouveaux champs : Calendrier, Flex, SilverLight, ... •Nouveaux types de graphes •Databinding : Possibilité de lier les champs avec une variable du WLangage (tableau, classe, élément avancé du langage) •Amélioration du WYSIWYG •Date de péremption des pages •Aperçu des styles CSS •RAD AWP

Introduction

Environnement de travail Les principales nouveautés de l’environnement de travail :

GAF_WebDev.book Page 20 Lundi, 15. décembre 2008 5:31 17

• Editeur d’états : •Modèles d’états et héritage •Améliorations de l’aperçu avant impression (possibilité d’annoter une impression) • Editeur de code : •Numérotation des lignes •Correcteur d’orthographe pour les chaînes et les commentaires •Evolutions de la POO •Texte multiligne enroulable •Références croisées sur les fonctions WLangage • Tests automatiques : •Génération automatique d’un squelette de tests. • HyperFileSQL Mobile et HyperFileSQL Client/Serveur : •Recherche Full-text •Indexation partielle des mémos •Reprise automatique de connexion •Nouveaux ordres SQL •Duplication de base •Compression de trame

Introduction

• Génération PHP : •Support de PHP4 et PHP5. •Support de nouveaux types de champs : Champ Calendrier, Champ Onglet •Support des modèles de champs, des pages internes •Nouveaux types supportés : Tableaux associatifs, Date, Heure, DateHeure, Durée, SourceDeDonnées, Tableaux, caractère, chaîne ASCIIZ, Chaîne Pascal, .... •Optimisation de la vitesse des requêtes SQL •Nouvelles fonctions supportées Programmation Les principales nouveautés de programmation : • Nouveaux types de variables : File, Pile et Liste • Nouveaux types avancés permettant de gérer les éléments Google, les documents XLS, la syndication RSS • Possibilité d’interfaçage avec Office 2007 • Possibilité d’interfaçage avec Sales Force. • Nouvelles fonctions : •Fonctions Calendrierxxx •Fonctions Gglxxx pour gérer la liaison avec les applications Google •Fonctions Menuxxx pour gérer les menus dynamiquement •Fonctions RSS •Fonctions JSON...

GAF_WebDev.book Page 21 Lundi, 15. décembre 2008 5:31 17

PARTIE 1 A la découverte de WebDev

GAF_WebDev.book Page 22 Lundi, 15. dĂŠcembre 2008 5:31 17

GAF_WebDev.book Page 23 Lundi, 15. décembre 2008 5:31 17

LEÇON 1.1. CONCEPTS Ce que vous allez apprendre dans cette leçon ... • Les principaux concepts de WebDev • La terminologie, le vocabulaire employé dans WebDev

Partie 1 : Découverte de WebDev

Durée estimée : 10 mn

GAF_WebDev.book Page 24 Lundi, 15. décembre 2008 5:31 17

Présentation WebDev est un AGL (Atelier de Génie Logiciel) complet permettant de développer des sites Internet et Intranet sophistiqués dans de nombreux domaines : commerce en ligne, multimédia, ... Les sites développés peuvent inclure l’accès à des informations stockées dans des bases de données. WebDev permet de créer : • des sites Internet/Intranet statiques. Ces sites gèrent des données qui ne varient pas (site vitrine d’une société, site disponible sur un CD-ROM, ...). • des sites Internet/Intranet dynamiques, qui gèrent des données. Les sites WebDev accèdent à toutes les bases de données, relationnelles ou non, du marché. Toutes les bases de données sont supportées. En standard, WebDev inclut un puissant moteur de base de données HyperFileSQL. Le moteur HyperFileSQL est disponible en version réseau, et en version Client/Serveur. De nombreuses autres bases de données peuvent être utilisées (comme nous le verrons dans la suite de ce cours) mais il est conseillé d’utiliser HyperFileSQL pour vos sites afin d’optimiser vos traitements de fichiers de données.

Mais pour bien débuter ce cours d’auto-formation, nous allons poser les bases : les concepts et le vocabulaire de base nécessaire pour aborder WebDev.

Concepts de base WebDev permet de créer simplement un site. Mais que recouvre exactement ce terme Site ? Un site Internet (ou Intranet ou même encore Extranet) est un ensemble de pages HTML stockées sur un serveur Web (Web étant le raccourci pour "World Wide Web", littéralement "La large toile d’araignée mondiale"). Pour créer un site, WebDev propose de créer un projet. Un projet relie entre eux les différents éléments du site et les organise. C’est à partir du projet que pourra être créé et déployé le site utilisable sur le Web. Si votre site manipule des données, WebDev permet de définir la structure de la base de données grâce à l’analyse. L’analyse WebDev contient la description des fichiers (appelés souvent "Tables" dans de nombreuses bases de données). Ces fichiers contiendront les données de l’application. Notes

Partie 1 : Découverte de WebDev

Tout au long de ce cours d’auto-formation, vous allez apprendre à créer vos sites (avec ou sans base de données) et à les enrichir en utilisant les nombreuses fonctionnalités proposées par WebDev.

La description des fichiers de données dans l’analyse n’entraîne pas leur création. Les fichiers de données sont créés physiquement uniquement lors de l’utilisation du site.

Un ou plusieurs projets WebDev peuvent être liés à la même analyse. Dans ce cas, on parle d’analyse partagée.

GAF_WebDev.book Page 25 Lundi, 15. décembre 2008 5:31 17

Terminologie Comme nous venons de le voir, un projet WebDev (lié si nécessaire à une analyse) permet de créer un site. Avant de commencer réellement à travailler avec WebDev, revenons sur les termes utilisés dans WebDev. En effet, si vous avez travaillé avec d’autres outils, de nombreux termes sont spécifiques à WebDev, et ne recouvrent pas toujours la même réalité que dans d’autres logiciels. Dans l’analyse Fichier : L’analyse permet de décrire la structure des fichiers de la base de données. Le terme "Fichier" correspond dans certaines bases de données à "une table". Dans WebDev, le terme "Table" est réservé pour désigner un objet graphique permettant de visualiser le contenu d’un fichier sous forme de tableau, et/ou de saisir des lignes. Par exemple, une table peut permettre de saisir le détail d’une commande. Enregistrement : Un enregistrement est quelquefois également appelé ligne. L’enregistrement d’un fichier correspond à l’ensemble des rubriques définies pour le fichier. Rubrique : Dans l’analyse, le terme rubrique désigne une zone d’un fichier de données. L’ensemble des rubriques d’un fichier permet de définir la structure d’un enregistrement. Clé/index : Avec WebDev et sa base de données HyperFileSQL, la notion d’index est liée à la notion de clé. La notion de clé fait partie des caractéristiques d’une rubrique. Les clés permettent d’accélérer les accès aux données ou de faciliter les parcours de fichiers. En WebDev, si un fichier HyperFileSQL a plusieurs rubriques clés, en exécution, un seul fichier d’index sera créé.

Partie 1 : Découverte de WebDev

GAF_WebDev.book Page 26 Lundi, 15. décembre 2008 5:31 17

Dans les pages et les états Page : Les pages permettent d’afficher ou de saisir sur le navigateur des informations. L’internaute peut agir directement sur les pages par l’intermédiaire de champs, de boutons, ... Etat : Les états permettent d’obtenir une vue personnalisée d’informations. Ces informations peuvent provenir de la base de données, de fichiers texte, de champs présents dans les pages, ... Les états peuvent être générés en PDF, HTML, ... Champ : Le mot "champ" est le terme utilisé pour désigner les différents objets graphiques affichés dans une page ou dans un état.

Style : Le style regroupe les caractéristiques graphiques d’un élément : image de fond, bordure, police, ... Les styles des différents éléments constituant l’interface d’un site WebDev sont regroupés dans une feuille de styles.

Important

Partie 1 : Découverte de WebDev

Modèle : Les modèles permettent de définir le "look" de différents éléments repris dans tout le site. Il existe : • Le modèle de pages : il permet de définir le "look" du site : apparence visuelle des pages, des boutons, des champs, ... • Le modèle de champs : il permet par exemple de regrouper un ensemble de champs pour définir une fonctionnalité. • Le modèle d’états : il permet de définir le "look" des états imprimables depuis le site : tous les états utiliseront par exemple la même charte graphique (logos, marges, ...).

Dans une application, l’entité "NomClient" peut correspondre : • au nom d’un champ d’une page • au nom d’un champ d’un état • à la rubrique d’un fichier • à une variable définie par le programmeur

GAF_WebDev.book Page 27 Lundi, 15. décembre 2008 5:31 17

Les différents types de pages proposés par WebDev WebDev permet de créer facilement des sites Internet/Intranet qui gèrent des données. WebDev permet également de créer des sites "statiques" qui ne gèrent pas de données. Les différents types de pages Pages dynamiques

Une page dynamique permet d’afficher des données provenant d’une base de données, d’afficher des images et du texte interactif. Par exemple, pour afficher des informations sur plusieurs produits, une seule page dynamique suffit : en fonction du produit choisi, la page affichera les informations concernant ce produit.

Partie 1 : Découverte de WebDev

Lorsque votre site doit gérer des données en temps réel, gérer des internautes, relier votre société à Internet (prise de commande en ligne, ...), ... choisissez des pages dynamiques.

GAF_WebDev.book Page 28 Lundi, 15. décembre 2008 5:31 17

Pages statiques

Lorsque votre site doit simplement afficher du texte et des images fixes, choisissez des pages statiques. Ces pages statiques peuvent être :

Partie 1 : Découverte de WebDev

1. Hébergées sur un serveur

2. Enregistrées sur support amovible

Une page statique permet d’afficher du texte et des images, mais ne permet pas de réelles "interactions" avec l’internaute. Si vous souhaitez afficher des informations concernant plusieurs produits, vous devez créer autant de pages statiques que de produits. Ce type de page sert généralement à présenter une société, à proposer des informations "figées" qui n’évolueront pas dans le temps.

GAF_WebDev.book Page 29 Lundi, 15. décembre 2008 5:31 17

Pages semi-dynamiques

Beaucoup de sociétés proposent leur catalogue de produits sur CD-ROM. Le choix d’un site Internet peut s’avérer intéressant. En effet, un site Internet sur CD-ROM ne nécessite qu’un navigateur Internet et ce, quel que soit le système d’exploitation de l’utilisateur.

2. Diffusion sur support amovible

Les pages semi-dynamiques correspondent tout à fait à ce choix. Il s’agit de pages "statiques" créées automatiquement par WebDev. Elles sont générées à partir d’une base de données. Vous pouvez ainsi présenter de façon professionnelle vos produits, leurs caractéristiques, ... sans écrire la moindre ligne de programmation.

Partie 1 : Découverte de WebDev

1. Hébergement sur serveur

GAF_WebDev.book Page 30 Lundi, 15. décembre 2008 5:31 17

Les différents types de sites Les sites dynamiques (WebDev ou PHP)

Un site dynamique permet de gérer des données. Il peut contenir des pages dynamiques, statiques ou semi-dynamiques pour un site WebDev. Un site PHP peut contenir des pages PHP ou statiques. Un site dynamique permet également d’effectuer des opérations sur le serveur (génération de commandes, création d’images ...). C’est grâce au moteur d’exécution (installé sur le serveur) qu’un site dynamique peut fonctionner : • moteur WebDev pour un site WebDev • moteur PHP pour un site PHP Les sites statiques

Un site statique est souvent utilisé comme site "vitrine". Il peut contenir des pages statiques ou semi-dynamiques. Un site statique ne permet pas d’effectuer des opérations sur le serveur. Les sites statiques ne nécessitent pas d’installation particulière sur le serveur. Les sites statiques peuvent également être diffusés sur CD-ROM.

Partie 1 : Découverte de WebDev

Les sites semi-dynamiques

Un site semi-dynamique est un site affichant des pages statiques et des pages semi-dynamiques. Les pages semi-dynamiques affichent des données (provenant d’une base de données). Le contenu de ces pages a été généré lors du développement du site. Un site semi-dynamique ne permet pas d’effectuer des opérations sur le serveur. Les sites semi-dynamiques ne nécessitent pas d’installation particulière sur le serveur. Les sites semi-dynamiques peuvent également être diffusés sur CD-ROM.

Les différents navigateurs Un site est destiné à être utilisé par des internautes. Les internautes utilisent un simple navigateur (ou "butineur") pour accéder au site. Il existe plusieurs navigateurs permettant d’accéder à des sites Internet. La plupart des navigateurs fonctionne sous tous les systèmes (Windows, Unix, MacOS, ...) : • Internet Explorer • Netscape Navigator • Opera • Mozilla • ... Chaque navigateur peut avoir ses particularités ou respecter plus ou moins les normes Internet. WebDev permet de créer des sites qui fonctionnent sous TOUS les navigateurs.

GAF_WebDev.book Page 31 Lundi, 15. décembre 2008 5:31 17

Les différents serveurs Web Un serveur Web est un ordinateur possédant un logiciel de services Internet. On le nomme également "serveur HTTP". Par abus de langage, nous nommerons les logiciels de services Internet par "serveur Web". Les serveurs Web reconnus automatiquement par WebDev sont les suivants : • Microsoft Internet Information Server (IIS, depuis la version 2.0), • Omni HTTPd, • Serveur FrontPage 97 (version 2.0), • Serveur FrontPage 98 (version 3.0), • Apache (versions 1.x) sous Windows, • Apache2 (versions 2.x) sous Windows. Il est bien entendu possible de configurer un autre serveur Web pour le faire fonctionner avec WebDev. Dans tous les cas et quel que soit le navigateur utilisé par l’internaute, vos sites seront accessibles depuis n’importe quel endroit au monde !

Côté navigateur, vous trouverez l’internaute avec de grands yeux ébahis ! Plus sérieusement, le navigateur permet d’afficher : • les pages avec leurs données envoyées par le serveur dans le cas de pages dynamiques. • une page HTML stockée sur le serveur dans le cas de pages statiques ou semi-dynamiques. Depuis le navigateur, il est possible de : • effectuer des contrôles de saisie (pour vérifier que l’internaute ne s’est pas trompé lors d’une saisie d’une date par exemple) • afficher un message, • ouvrir un autre navigateur Ces actions "navigateurs" sont programmables grâce au WLangage de WebDev lors du développement de votre site. Ces traitements seront exécutés sur le poste de l’internaute, dans le navigateur. Vous avez également la possibilité d’écrire ces traitements en JavaScript pour les connaisseurs. Nous vous recommandons de programmer en WLangage pour plus de lisibilité. Dans le cas de sites statiques, aucune action navigateur ne peut provoquer d’action "serveur". Dans le cas de sites dynamiques, chaque "validation" (clic sur un bouton, validation de saisies, ...) d’une page provoque une action "navigateur" puis une action "serveur".

Ce qui se passe côté serveur ... Le côté "serveur" n’existe que si votre site utilise des pages dynamiques. Chaque action effectuée par le serveur a été provoquée par une action effectuée par l’internaute dans son navigateur.

Partie 1 : Découverte de WebDev

Ce qui se passe côté navigateur ...

GAF_WebDev.book Page 32 Lundi, 15. décembre 2008 5:31 17

Depuis le serveur, il est possible de : • vérifier les informations saisies dans le navigateur par l’internaute • renvoyer des images, des fichiers ou des pages au navigateur • gérer des fichiers de données • générer des documents au format PDF, HTML, Word, Excel, XML, ... et de les envoyer au navigateur. • dessiner des images, des graphes, ... Ces actions "serveur" sont programmées grâce au WLangage de WebDev lors du développement de votre site (bandeaux orange). Les actions serveur nécessitent l’installation d’un moteur d’exécution WebDev sur le poste serveur. Sur votre poste de développement, ce moteur est automatiquement installé (l’Administrateur WebDev permet de configurer ce moteur). Lors du déploiement de votre site, ce moteur est installé chez l’hébergeur (avec la version "Déploiement" de WebDev).

Partie 1 : Découverte de WebDev

Nous avons vu les termes de base à connaître pour réaliser un site WebDev. Nous allons commencer la programmation en concevant nos premières pages.

GAF_WebDev.book Page 33 Lundi, 15. décembre 2008 5:31 17

LEÇON 1.2. ENVIRONNEMENT NÉCESSAIRE AU COURS D’AUTO-FORMATION Ce que vous allez apprendre dans cette leçon ... • Lancement de WebDev • Configurer WebDev pour suivre le Cours d’auto-formation

Partie 1 : Découverte de WebDev

Durée estimée : 5 mn

GAF_WebDev.book Page 34 Lundi, 15. décembre 2008 5:31 17

Présentation Pour son utilisation, WebDev propose un paramétrage de l’environnement. Plusieurs modes sont à votre disposition : • Environnement simplifié : Ce mode permet de découvrir les principales fonctionnalités de WebDev. • Environnement complet : Ce mode propose toutes les fonctionnalités de WebDev. • Récupérer la configuration de votre environnement 12 : Ce mode reprend les fonctionnalités disponibles en version 12. A tout moment, quel que soit le type d’environnement utilisé, il est possible d’ajouter ou de supprimer l’accès à certaines fonctionnalités non utilisées. Pour suivre ce cours d’auto-formation, nous vous conseillons de travailler avec un environnement simplifié. Les fonctionnalités avancées seront ajoutées au fur et à mesure de l’avancement de ce cours.

Mise en place

Partie 1 : Découverte de WebDev

Pour utiliser l’environnement simplifié de WebDev : 4 1. Lancez WebDev 14. 2. Si vous n’avez jamais lancé WebDev 14, un assistant de bienvenue se lance. Cet assistant vous permet de choisir votre environnement de travail. 3. Sélectionnez "Environnement simplifié" et validez. WebDev a déjà été lancé sur votre poste, cet assistant de bienvenue n’apparaît pas. Pour 4 Sivérifier et modifier si nécessaire la configuration de votre environnement, effectuez les opérations suivantes : 1. Sélectionnez l’option "Outils .. Options .. Options de l’environnement". 2. Cliquez sur "Relancer l’assistant de configuration de l’environnement". 3. Sélectionnez "Environnement simplifié". 4. Validez votre choix en passant au plan suivant. 5. Validez les options de l’environnement. Voilà, WebDev est configuré pour suivre le cours d’auto-formation.

GAF_WebDev.book Page 35 Lundi, 15. décembre 2008 5:31 17

LEÇON 1.3. MES PREMIÈRES PAGES Ce que vous allez apprendre dans cette leçon ... • Comment créer une page • Comment saisir et afficher des informations • A quoi servent le code serveur et le code navigateur

Partie 1 : Découverte de WebDev

Durée estimée : 40 mn

GAF_WebDev.book Page 36 Lundi, 15. décembre 2008 5:31 17

Présentation de la leçon Pour commencer à utiliser WebDev, nous allons simplement créer quelques pages. Ces quelques exemples vous permettront de comprendre le fonctionnement des sites Internet et de connaître les bases de la programmation en WebDev. Il sera ainsi possible d’aborder par la suite des sujets plus complexes. Les leçons de cette première partie vont vous permettre de : • créer des pages simples, • manipuler des chaînes, des numériques, des monétaires, • manipuler des dates et des heures. Dans cette première leçon, nous allons créer les pages suivantes : • Page d’identification. • Page de bienvenue. Ces pages seront regroupées pour des besoins pratiques dans un projet.

Partie 1 : Découverte de WebDev

Ma première page : saisie d’informations Présentation Vous allez créer la page suivante :

Cette page permet à l’internaute de s’identifier et affiche les données saisies. Vous pouvez être tenté de dire que c’est trop simple, trop basique, ... mais nous vous conseillons de réaliser cette page. Vous risquez d’être surpris par la facilité et l’intuitivité de l’éditeur de WebDev. De plus, cette page vous permettra de découvrir des concepts fondamentaux pour la suite de ce cours.

GAF_WebDev.book Page 37 Lundi, 15. décembre 2008 5:31 17

Création de la page 4 Lancez WebDev 14 (si ce n’est déjà fait).

le projet "Mes_Premieres_Pages". Pour cela, sélectionnez l’option de menu "Fichier .. 4 Ouvrez Ouvrir un projet". Sélectionnez ensuite le projet "Mes_Premieres_Pages.WWP" situé dans le

Important

sous-répertoire "\Autoformation\Exercices\Mes_Premieres_Pages" du répertoire d’installation de WebDev. Dans cette partie, nous nous concentrons sur la création de pages simples. Le projet "Mes_Premieres_Pages" est un projet vide, déjà créé. La création de projet sera abordée dans une prochaine leçon.

Le projet "Mes_Premieres_Pages" est un projet dynamique. Ce projet permet de créer un site dynamique : certaines opérations seront effectuées sur le navigateur, certaines opérations seront effectuées sur le serveur.

2. Survolez la catégorie "Page" et sélectionnez l’option "Page". L’assistant de création de pages s’affiche. 3. Sélectionnez "Vierge". Dans la liste des modèles, sélectionnez par exemple le modèle "Zune_style". Vous pouvez choisir un autre modèle proposé dans la liste. 4. Validez. Nous allons renseigner les informations de la page (nom, titre, description).

Note

un clic droit sur la page et sélectionnez l’option "Description". La fenêtre de description 4 Faites s’affiche. Cette fenêtre contient par défaut le nom de la page "PAGE_Page1". Observez bien le nom de la page que WebDev propose par défaut : ce nom commence par les lettres "PAGE_". Ce préfixe est automatiquement mis en place car le projet utilise une charte de programmation. La charte de programmation permet de définir un préfixe pour chaque type d’objet. Nous verrons cette charte de programmation en détail plus loin dans ce cours.

Partie 1 : Découverte de WebDev

Pour créer la page : 4 1. Sélectionnez l’option "Fichier .. Nouveau" du menu principal de WebDev.

GAF_WebDev.book Page 38 Lundi, 15. décembre 2008 5:31 17

Partie 1 : Découverte de WebDev

4 Saisissez les informations suivantes :

1. Le nom de la page : remplacez "PAGE_Page1" par "PAGE_Identification". Ce nom sera le nom sous lequel sera enregistrée la page sur le disque (avec l’extension "WWH") dans le répertoire des sources du projet. Ce nom sera également utilisé en programmation pour manipuler la page, nous y reviendrons. 2. La description de la page : "Identification de l’internaute". Cette description n’est pas destinée à l’internaute mais au développeur. Cette description est affichée par exemple dans le dossier, lors de la visualisation des éléments du projet, ... 3. Le titre de la page : "Bienvenue, identifiez-vous". Ce titre est affiché dans la barre de titre du navigateur. Ce titre permet de renseigner l’internaute sur les fonctionnalités de la page.

4 Validez. Le nom de la page apparaît dans la barre de titre de WebDev.

GAF_WebDev.book Page 39 Lundi, 15. décembre 2008 5:31 17

Notes

4 Enregistrez la page en cliquant sur l’icône

Pour chaque page créée sous l’éditeur, WebDev génère plusieurs types de fichiers : • Un fichier "WWH" qui contient la description de la page pour l’éditeur de pages. Ce fichier est enregistré dans le répertoire du projet. • Un fichier "AWL" qui correspond à la description de la page pour le moteur WebDev dans le répertoire EXE du projet. • Un fichier "HTM" qui contient le code HTML et le code Javascript de la page destiné à être envoyé au navigateur. Ce fichier est enregistré dans le sousrépertoire "\<Nom du projet>_WEB\XX" du répertoire du projet (un sous-répertoire par langue, par exemple "FR" pour la langue française, "UK" pour la langue anglaise, ...).

libellé HTML est un des moyens proposés par WebDev pour insérer un texte. Pour créer un 4 Le libellé HTML : 1. Cliquez sur l’icône

dans la barre d’outils.

2. Positionnez le curseur de la souris dans votre page, le contour du libellé HTML apparaît. 3. Cliquez à la position où le libellé HTML doit être créé. Pour saisir le texte du libellé HTML : 4 1. Cliquez sur le libellé. Le curseur de saisie apparaît ainsi que la barre d’outils du libellé HTML. 2. Saisissez directement le texte "Bienvenue sur mon premier site réalisé avec WebDev !". 3. Cliquez à l’extérieur du libellé HTML pour valider votre saisie. 4. Cliquez sur le champ et agrandissez le champ à l’aide des poignées de redimensionnement pour visualiser l’ensemble du message. Les poignées de redimensionnement sont les petits carrés noirs qui apparaissent tout autour du cadre de sélection du libellé HTML. Le message de bienvenue paraît un peu fade ... Il ne reste plus qu’à le mettre en forme ! Pour mettre en forme le texte du libellé HTML : 4 1. Sélectionnez le champ HTML puis cliquez dans le champ. Le curseur de saisie s’affiche. Une barre de mise en forme apparaît directement au-dessus du champ. 2. Sélectionnez tout le texte à l’aide de la souris. 3. Dans la liste déroulante des polices (dans les options de mise en forme), choisissez la police "Verdana, Arial, Helvetica, sans-serif" si ce n’est déjà fait.

Partie 1 : Découverte de WebDev

Affichage d’un texte mis en forme Souhaiter la bienvenue à un internaute, c’est la première des politesses ! Alors vous ne verrez pas d’inconvénient à bien soigner la mise en page et la présentation de cette page. Vous allez maintenant apprendre à insérer du texte dans votre page et à le mettre en forme ... A vos pinceaux !

GAF_WebDev.book Page 40 Lundi, 15. décembre 2008 5:31 17

Internet

Sur Internet, les polices d’affichage utilisées sont celles présentes sur le poste de l’internaute. Dans notre cas, la police utilisée par défaut sera "Verdana". Si cette police n’est pas présente sur le poste de l’internaute, le navigateur Internet choisira la police "Arial". Si cette dernière n’est pas présente, il choisira ensuite la police "Helvetica" et ainsi de suite. Généralement, les polices spécifiées ainsi sont regroupées selon leur ressemblance.

Internet

4. Dans la liste déroulante des tailles de police (dans les options de mise en forme), sélectionnez la taille "medium". La taille d’une police peut être exprimée de plusieurs façons : • en taille relative (par exemple : 5) : cette taille est fonction de la taille par défaut définie dans les paramètres du navigateur, • en taille standard (par exemple : medium), • en points (par exemple : 8pt), • en pixels (par exemple : 10px).

Partie 1 : Découverte de WebDev

5. Agrandissez le champ si nécessaire. Voici à quoi devrait ressembler votre libellé :

Ajoutez maintenant un peu de couleur ! 4 1. Sélectionnez la partie de texte à mettre en couleur (par exemple : le mot "WebDev"). 2. Dans les options de mise en forme, cliquez sur l’icône de couleurs s’affiche.

. Une fenêtre proposant un choix

GAF_WebDev.book Page 41 Lundi, 15. décembre 2008 5:31 17

3. Sélectionnez la couleur désirée (par exemple : une couleur bleue) puis validez.

Saisie d’informations Nous allons maintenant créer les différents champs permettant d’identifier l’internaute. La saisie d’informations dans une page est réalisée par l’intermédiaire des champs de saisie. Nous allons créer les champs de saisie suivants : • Prénom • Date de naissance • Adresse Mail

4 Pour créer le champ de saisie "Prénom" :

Notes

1. Cliquez sur l’icône . Cliquez ensuite dans la page à la position où le champ doit être créé. 2. Faites un clic droit sur le champ et sélectionnez l’option "Description". 3. Indiquez le nom du champ de saisie : "SAI_Prénom". 4. Sélectionnez le type "Texte". Sélectionnez le masque de saisie de type "1ère lettre en majuscule". Remplacez le libellé par "Prénom". Validez la fenêtre. Par défaut, les caractères seront saisis en majuscules ou en minuscules selon la position de la touche [CAPSLOCK] du clavier de l’internaute. Ce genre de saisie peut être très gênant lors d’une recherche par exemple. WebDev propose la gestion d’un masque de saisie pour un champ. Cela permet de mettre en forme la valeur saisie, automatiquement et sans aucune ligne de code.

Partie 1 : Découverte de WebDev

4. Effectuez les mêmes opérations pour l’ensemble du texte si nécessaire. Votre message de bienvenue est maintenant plus accueillant !

GAF_WebDev.book Page 42 Lundi, 15. décembre 2008 5:31 17

4 Pour créer le champ de saisie "Date de naissance" :

1. Cliquez sur la flèche à droite de l’icône . Dans la liste des champs prédéfinis, sélectionnez un champ de type "Date", puis cliquez dans la page à la position où le champ doit être créé. 2. Faites un clic droit sur le champ et sélectionnez l’option "Description". 3. Indiquez si nécessaire : • le nom du champ : "SAI_Date_de_naissance". • le libellé du champ : "Date de naissance". • le type du champ : Date. 4. Validez la fenêtre.

Partie 1 : Découverte de WebDev

4 Pour créer le champ de saisie "Adresse Mail" :

1. Cliquez sur la flèche à droite de l’icône . Dans la liste des champs prédéfinis, sélectionnez un champ de type "E-mail", puis cliquez dans la page à la position où le champ doit être créé. 2. Faites un clic droit sur le champ et sélectionnez l’option "Description". 3. Indiquez si nécessaire : •le nom du champ de saisie : "SAI_Adresse Mail". •le libellé du champ : "Adresse Mail". •le masque de saisie : "Adresse Email". 4. Validez la fenêtre.

Bouton de validation d’une page Nous allons maintenant créer un bouton de validation. Ce bouton va permettre de : • Informer l’internaute des données saisies, • Calculer son âge, • Afficher les données saisies dans une nouvelle page. Ajoutez un bouton sur la page "PAGE_Bienvenue" : 4 1. Cliquez sur l’icône de la barre d’outils. 2. Placez le bouton à l’endroit désiré sur la page. 3. Effectuez un clic droit sur le bouton, puis choisissez l’option "Description" du menu contextuel qui apparaît. 4. Indiquez le nom "BTN_Valider" et saisissez le libellé "Valider". 5. Validez la fenêtre de description. 6. Affichez le code associé au bouton (option "Code" du menu contextuel du bouton). La fenêtre d’édition de code (appelée "Editeur de code") apparaît pour le bouton que vous venez de créer. Dans la fenêtre de code qui s’affiche, le code est divisé en plusieurs parties de couleurs différentes : • Initialisation de BTN_Valider (serveur), code orange (1) • Clic (onclick) de BTN_Valider (navigateur), code vert (2) • Clic de BTN_Valider (serveur), code orange (3)

GAF_WebDev.book Page 43 Lundi, 15. décembre 2008 5:31 17

Les codes oranges sont les codes s’exécutant sur le serveur et les codes verts sont les codes s’exécutant sur le navigateur.

Deux types de sites existent : • les sites statiques, qui affichent des pages dont les données ne changent pas. Ces sites sont composés de pages dont le contenu est fixe. Aucun moteur spécifique n’est nécessaire pour afficher ces pages. • les sites dynamiques (le cas de notre exemple) dont les données peuvent varier. Ces sites sont composés de pages dont le contenu peut être variable. Un moteur spécifique est nécessaire pour afficher ces pages, et y introduire les données variables.

Dans le cas d’un site dynamique, il est possible d’exécuter des traitements : • directement sur le poste de l’internaute. C’est le code navigateur. Dans ce cas, aucune demande n’est faite au moteur. Sous WebDev, le code WLangage saisi est converti en Javascript. Le nombre de fonctions WLangage utilisables dans ce code est limité. • sur le serveur. C’est le code serveur. Dans ce cas, une requête est réalisée auprès du serveur pour exécuter le code spécifié. Le serveur réaffiche alors la page. cet exemple, nous allons utiliser un code serveur et un code navigateur : 4 •Dans en code navigateur, nous allons afficher les informations saisies. • en code serveur, nous allons calculer et renvoyer l’âge de l’internaute.

4 Dans le code de clic navigateur, saisissez le code suivant :

Info("Vous avez saisi : " , SAI_Prénom , ... SAI_Date_de_naissance, SAI_Adresse_Mail)

Partie 1 : Découverte de WebDev

Notes

Pourquoi 2 codes sont-ils nécessaires ?

GAF_WebDev.book Page 44 Lundi, 15. décembre 2008 5:31 17

Notes

En saisissant ce code sous l’éditeur de code, vous constatez que les différents éléments saisis utilisent des couleurs différentes. En effet, l’éditeur de code permet ainsi d’identifier rapidement les différents éléments manipulés par le code : • les fonctions du WLangage apparaissent en bleu, • les chaînes de caractères (entre guillemets) apparaissent en violet, • les noms de champs apparaissent en cyan.

Dans ce code, Info est une fonction WLangage permettant d’afficher une boîte d’information à l’utilisateur. Dans cette boîte d’information, le contenu des champs est affiché.

Notes

Partie 1 : Découverte de WebDev

avoir plus d’informations sur cette fonction, affichons l’aide en ligne : il suffit de se posi4 Pour tionner sur le nom de la fonction, et d’utiliser la touche [F1].

L’aide en ligne de WebDev permet de consulter les informations détaillées concernant les 2000 fonctions du WLangage. L’aide en ligne contient également l’aide des éditeurs, des champs, des astuces, ... L’aide en ligne est commune à WinDev, WebDev et WinDev Mobile. Vous utilisez uniquement WebDev ? Pour afficher l’aide concernant uniquement ce produit, il suffit de sélectionner "WebDev" dans la liste "Afficher".

GAF_WebDev.book Page 45 Lundi, 15. décembre 2008 5:31 17

4 Dans le code de clic serveur, saisissez le code suivant :

Mon_age est une chaîne Mon_age = Age(SAI_Date_de_naissance) Mon_age = Milieu(Mon_age, 3, 2)+" ans "+ ... Milieu(Mon_age, 5, 2)+ " mois "+Milieu(Mon_age, 7, 2)+ " jours" Info("Vous avez "+ Mon_age)

Pourquoi utiliser un code serveur ? La fonction WLangage Age est une fonction avancée disponible uniquement sur le serveur. WebDev vous indique immédiatement les fonctions disponibles ou non grâce aux erreurs de compilation. Copiez par exemple le code serveur dans le code navigateur : le mot Age devient rouge et un message indique que cette fonction n’est pas disponible.

Test d’une page Pour vérifier le bon fonctionnement de votre page de bienvenue, vous allez maintenant lancer un test de votre page. les modifications apportées à votre page en cliquant sur l’icône 4 Enregistrez d’outils.

de la barre

Notes

sur l’icône . Cette icône permet de tester directement la page dans le navigateur 4 Cliquez par défaut installé sur votre poste. L’icône apparaît automatiquement dans la barre des tâches de votre poste. Cette icône indique que le moteur WebDev a été lancé. En double-cliquant sur cette icône, l’administrateur des sites WebDev dynamiques apparaît. Sur l’onglet "Connexions", vous voyez votre connexion actuelle au site "Mes_premieres_pages". Ici, nous sommes en test sur le poste de développement, l’utilisateur est donc "TEST". En configuration réelle, l’adresse IP de l’internaute est affichée.

1. Dans la page qui s’affiche, saisissez un nom. 2. Saisissez une date de naissance. 3. Saisissez une adresse email. 4. Cliquez sur le bouton "Valider".

Partie 1 : Découverte de WebDev

Notes

Ce code calcule l'âge de l’internaute à partir de la date de naissance, et affiche le résultat dans un format lisible. La fonction Age renvoie l’âge en années, mois et jours au format AAAAMMJJ. Pour obtenir : •le nombre d’années, on extrait les 2 derniers chiffres correspondant à l’année. •le nombre de mois, on extrait les 2 derniers chiffres correspondant au mois. •le nombre de jours, on extrait les 2 derniers chiffres correspondant au jour.

GAF_WebDev.book Page 46 Lundi, 15. décembre 2008 5:31 17

Partie 1 : Découverte de WebDev

Nous allons maintenant améliorer cette page. En effet, actuellement, le message apparaît que les champs soient remplis ou non. Nous allons donc vérifier que les champs ont été remplis. Vérification des informations saisies La vérification des informations saisies doit être réalisée en code navigateur, avant que les données soient envoyées au serveur. Il suffit de tester si la valeur du champ de saisie correspond à une chaîne vide. Dans ce cas, un message est affiché, et la saisie est forcée dans le champ vide. Les trois champs de saisie sont testés de manière identique. Le code navigateur du bouton valider devient : SI SAI_Prénom="" ALORS Info("Merci de saisir un prénom") RepriseSaisie(SAI_Prénom) FIN SI SAI_Date_de_naissance="" ALORS Info("Merci de saisir une date de naissance") RepriseSaisie(SAI_Date_de_naissance) FIN SI SAI_Adresse_Mail="" ALORS Info("Merci de saisir une adresse email") RepriseSaisie(SAI_Adresse_Mail) FIN Info("Vous avez saisi : " , SAI_Nom , ... SAI_Date_de_naissance, SAI_Adresse_Mail)

les modifications apportées à votre page en cliquant sur l’icône de la barre 4 Enregistrez d’outils et lancez le test de la page. Si aucune information n’est saisie, un message apparaît.

4 Revenez sous WebDev.

GAF_WebDev.book Page 47 Lundi, 15. décembre 2008 5:31 17

Ma seconde page : Affichage des informations saisies Pour améliorer notre dialogue avec l’internaute, nous allons : • Demander la confirmation des informations saisies à l’internaute. • Afficher une seconde page d’accueil personnalisée. Cette page affichera un message de bienvenue personnalisé. Dans un premier temps, créons la page. Création de la page Pour créer la page : 4 1. Sélectionnez l’option "Fichier .. Nouveau". 2. Cliquez sur page, puis sélectionnez la création d’une nouvelle page. L’assistant de création de pages s’affiche. 3. Sélectionnez "Vierge". Dans la liste des modèles, sélectionnez par exemple le modèle "Zune_style". Vous pouvez choisir un autre modèle proposé dans la liste. 4. Validez. Nous allons renseigner les informations de la page (nom, titre, description).

1. Le nom de la page : "PAGE_Bienvenue". 2. La description de la page : "Accueil de l’internaute". 3. Le titre de la page : "Bienvenue". 4. Validez la fenêtre de description. 5. Enregistrez la page. Cette page doit afficher à l’internaute un message contenant les informations saisies dans la page précédente, ainsi que l’âge de l’internaute. L’affichage des informations va être réalisé dans un libellé. Comment obtenir les informations saisies dans la page précédente ? Ces informations ne sont pas enregistrées dans une base de données. La solution consiste à passer des paramètres à notre seconde page : à la validation de la page d’identification, les données saisies vont être passées en paramètre pour ouvrir la page de bienvenue. Le passage de paramètres doit être géré par les deux pages : la page permettant de saisir les données, et la page permettant d’afficher les données. Création d’un libellé Nous allons commencer par créer un libellé dans notre page. Ce libellé va nous permettre d’afficher le texte de bienvenue. Comme ce texte dépend des informations saisies dans la page précédente, nous allons laisser le libellé vide : son contenu sera déterminé par programmation.

4 Pour créer un champ Libellé :

1. Cliquez sur puis cliquez dans la page à l’endroit où le champ doit être créé. 2. Dans la description du champ, saisissez les informations suivantes : • Le champ s’appelle LIB_INFO. • Le champ n’a pas de libellé.

Partie 1 : Découverte de WebDev

un clic droit sur la page et sélectionnez l’option "Description". La fenêtre de description 4 Faites s’affiche. Saisissez les informations suivantes :

GAF_WebDev.book Page 48 Lundi, 15. décembre 2008 5:31 17

3. Validez la fenêtre de description. 4. Nous allons maintenant associer un style au texte qui sera affiché dans ce libellé. Sélectionnez l’option "Choisir un style WebDev" du menu contextuel du champ. Sélectionnez le style "Libelle_Gras". Validez. 5. Sous l’éditeur, modifiez la taille du libellé : utilisez les poignées noires pour agrandir le libellé (en hauteur et en largeur). 6. Enregistrez la page. Gestion des paramètres Maintenant que le champ Libellé est créé, nous allons voir comment gérer les paramètres envoyés à la page. En effet, la page "PAGE_Identification" va envoyer à la page "PAGE_Bienvenue" le prénom, la date de naissance et l’adresse email de l’internaute. qu’une page puisse recevoir des paramètres, il suffit de déclarer ces paramètres dans le 4 Pour code "Déclaration des globales" de la page. 1. Affichez si nécessaire la page "Page_Bienvenue" sous l’éditeur. 2. Dans le menu contextuel de la page, sélectionnez l’option "Code". L’éditeur de code s’affiche avec les différents traitements Serveur et Navigateur associés à la page. 3. Dans le code "Déclaration globales de PAGE_Bienvenue", saisissez le code suivant :

Partie 1 : Découverte de WebDev

PROCEDURE PAGE_Bienvenue(Prénom, DateNaissance, AdresseEmail)

Cette ligne permet de déclarer que la page "PAGE_Bienvenue" acceptera trois paramètres lors de son ouverture. Ces paramètres pourront être manipulés directement dans le code de la page grâce aux noms des variables utilisés (Prénom, DateNaissance, AdresseEmail). souhaitons maintenant utiliser les paramètres pour construire le contenu du libellé affi4 Nous ché dans la page. Pour cela, nous allons utiliser le code d’initialisation de la page.

4 Dans le code d’initialisation de la page, saisissez le code suivant :

// Calcul de l'âge Mon_Age est une chaîne Mon_Age = Age(DateNaissance) Mon_Age = "Vous avez : "+ Milieu(Mon_Age, 3, 2)+ ... " ans "+Milieu(Mon_Age, 5, 2)+ " mois "+... Milieu(Mon_Age, 7, 2)+ " jours" // Construction du libellé LIB_INFO LIB_INFO = [ Bienvenue %1 sur mon premier site. Votre adresse email est %2. Vous avez %3. ] LIB_INFO = ChaîneConstruit(LIB_INFO,Prénom, ... AdresseEmail, Mon_Age)

de comprendre ce code. 4 •Essayons Tout d’abord, la première partie du code permet de calculer l'âge et de construire en toutes lettres le résultat de l’âge. Nous connaissons ce code, nous l’avons déjà utilisé.

GAF_WebDev.book Page 49 Lundi, 15. décembre 2008 5:31 17

Notes

• La seconde partie du code permet de construire le contenu du libellé. Le libellé LIB_INFO est initialisé avec une chaîne multiligne contenant le texte à afficher et des %1, %2, %3. Ces %n représentent les paramètres variables. Ils seront automatiquement remplacés par la valeur voulue lors de l’appel à la fonction ChaîneConstruit. Pourquoi ne pas construire directement une chaîne avec le nom des variables ? Bien entendu, il aurait été possible de construire le contenu du libellé de la manière suivante : LIB_INFO = "Bienvenue "+ Prénom + "sur mon premier site."+ RC + RC+ ... "Votre adresse email est "+ AdresseEmail +"."+ RC + RC + ... "Vous avez " + MonAge+"." Cette notation présente plusieurs inconvénients : • la lisibilité du code : une chaîne multiligne est plus simple à lire. • la traduction : une chaîne multiligne peut être traduite dans son intégralité. Il est possible d’inverser les mots et les paramètres. Le traducteur n’a qu’une obligation : remettre les %1, %2, %3.

1. Affichez la page PAGE_Identification sous l’éditeur. Si cette page est ouverte, il suffit de cliquer sur l’onglet correspondant.

2. Affichez le code du bouton "Valider" (option "Code" du menu contextuel du bouton par exemple). Dans ce code nous allons tout d’abord modifier le code serveur du bouton. 4 1. Supprimez le code serveur actuel : le calcul de l'âge est effectué désormais directement dans la page "PAGE_Bienvenue". 2. Saisissez le code serveur suivant : SI OKAnnuler("Confirmez-vous ces informations : ", ... "Prénom : " + SAI_Prénom, ... "Date de naissance : " + SAI_Date_de_naissance, ... "Email : " + SAI_Adresse_Mail) = Oui ALORS PageAffiche(PAGE_Bienvenue,... SAI_Prénom, SAI_Date_de_naissance,SAI_Adresse_Mail) FIN

Ce code permet de faire deux choses : • la fonction OKAnnuler permet de demander à l’utilisateur la confirmation des informations saisies. En exécution, une boîte de dialogue sera affichée (nous allons le voir lors du test),

Partie 1 : Découverte de WebDev

de tester nos pages, il nous faut maintenant modifier la page PAGE_Identification afin 4 Avant d’ouvrir la page PAGE_Bienvenue en lui passant les paramètres.

GAF_WebDev.book Page 50 Lundi, 15. décembre 2008 5:31 17

Notes

• la fonction PageAffiche permet d’afficher la page PAGE_Bienvenue en lui passant la valeur des champs en paramètre. Attention L’ordre des paramètres passés à la fonction PageAffiche et celui des paramètres déclarés dans la page PAGE_BIENVENUE doit être le même.

allons maintenant modifier le code navigateur du bouton Valider. En effet, la ligne de 4 Nous code permettant d’afficher les informations saisies n’est plus nécessaire. Vous pouvez la supprimer.

4 Enregistrez vos modifications. opération avant le test : nous avons maintenant deux pages dans notre projet. Nous 4 Dernière allons définir la première page du projet. Cette page sera la première page affichée lors du test du site. 1. Dans l’explorateur, sélectionnez la page PAGE_Identification. 2. Dans le menu contextuel de la page, sélectionnez l’option "Première page dynamique du projet".

Partie 1 : Découverte de WebDev

le test du projet grâce au bouton . La page d’identification s’affiche. Saisissez les 4 Lancez informations demandées et validez. Confirmez les informations saisies. La page de bienvenue s’affiche.

GAF_WebDev.book Page 51 Lundi, 15. décembre 2008 5:31 17

LEÇON 1.4. BASES DE PROGRAMMATION Ce que vous allez apprendre dans cette leçon ... • Code serveur/code navigateur • Les différents types de variables • Instructions de base du WLangage • Procédures et fonctions • Traitement des chaînes, des numériques et des monétaires • Traitement des dates et des heures

Partie 1 : Découverte de WebDev

Durée estimée : 30 min

GAF_WebDev.book Page 52 Lundi, 15. décembre 2008 5:31 17

Introduction Dans la leçon précédente, nous avons un peu manipulé l’éditeur de code de WebDev et son langage, le WLangage. Cette leçon va vous permettre de revenir sur les bases de la programmation en WLangage en présentant les sujets suivants : • Code serveur et code navigateur • Déclaration des différents types de variables • Instructions de base du WLangage • Procédures et fonctions • Traitements des chaînes • Traitements des numériques • Traitements des dates et des heures

Code serveur et code navigateur

Notes

Partie 1 : Découverte de WebDev

Dans la leçon précédente, nous avons vu que deux types de code pouvaient exister : • le code navigateur, exécuté sur le poste de l’internaute. • le code serveur, exécuté sur le serveur WEB. Ce code est disponible uniquement pour les sites nécessitant un moteur d’exécution sur le serveur. WebDev permet de créer plusieurs types de sites : site statique, site semi-dynamique, site dynamique. Les pages des sites dynamiques possèdent un code serveur et un code navigateur. Il est possible de faire aussi bien des actions en local (sur le poste de l’internaute) que des actions sur le serveur (affichage d’une page contenant des informations lues dans une base de données par exemple) Les pages des sites statiques possèdent uniquement un code navigateur.

Sous l’éditeur de code : 1. Le code serveur est représenté par un bandeau de couleur orange. 2. et 3. Le code navigateur est représenté par un bandeau de couleur verte (mode WLangage) ou bleue (mode Javascript).

GAF_WebDev.book Page 53 Lundi, 15. décembre 2008 5:31 17

Code serveur Un code serveur est exécuté sur le serveur. Lorsque l’internaute effectue une action dans une page, le code navigateur est exécuté, puis la page est envoyée au serveur. Le code serveur est alors exécuté avant l’envoi d’une page de réponse vers le navigateur de l’internaute. Ce code serveur permet d'effectuer toutes les actions possibles sur le serveur : • gestion de base de données, • gestion des fichiers externes, • création de graphes, … Pour exécuter ce code, le moteur WebDev est nécessaire (moteur PHP pour un site PHP). Ce code est disponible uniquement dans les sites dynamiques. Pour les sites dynamiques PHP il est également possible de saisir du code PHP directement dans l’éditeur de code. • Pour passer d’un code WLangage à un code PHP, il suffit de cliquer sur le sigle "WL" précédant l’intitulé du code.

Code navigateur Un code navigateur est exécuté sur le poste de l’internaute. Lorsque l’internaute effectue une action dans une page, le code navigateur est exécuté. Ce code ne nécessite pas d’action de la part du serveur. A l’enregistrement de la page sous l’éditeur, le code navigateur saisi en WLangage est automatiquement traduit en Javascript, et intégré aux pages HTML créées avec WebDev. Le code navigateur peut être écrit soit en WLangage, soit en Javascript : • Pour passer d’un code WLangage à un code Javascript, il suffit de cliquer sur le sigle "WL" précédant l’intitulé du code.

• Pour passer d’un code Javascript à un code WLangage, il suffit de cliquer sur le sigle "JS" précédant l’intitulé du code.

Partie 1 : Découverte de WebDev

• Pour passer d’un code PHP à un code WLangage, il suffit de cliquer le sigle "PHP" précédant l’intitulé du code.

GAF_WebDev.book Page 54 Lundi, 15. décembre 2008 5:31 17

Déclaration des différents types de variables WebDev propose une grande variété de types de variables (booléen, entier, réel, monétaire, chaîne, date, heure, durée, dateheure, variant, tableau, structure, ...). La syntaxe à utiliser pour déclarer une variable est la suivante : NomVariable EST UN(e) TypeVariable

Quelques exemples : Indice est un entier NomFournisseur est une chaîne TablePrix est un tableau de 10 monétaires I, J, K sont des entiers //Déclaration et affectation Compteur est un entier = 120 B1 est un booléen = Faux

La déclaration des variables et leur portée Le WLangage permet de manipuler deux types de variables : • Les variables globales • Les variables locales Les variables globales peuvent être globales au projet, à une page ou à une collection de procédures. Il suffit de déclarer ces variables : • dans le code serveur d’initialisation du projet (variables serveur globales au projet). Ces variables pourront être utilisées dans le code serveur de tous les traitements du projet et des éléments du projet (pages, états, ...). • dans le code serveur de déclaration des globales de la page (variables serveur globales à une page). Ces variables pourront être utilisées dans le code serveur de tous les traitements de la page et des éléments de la page. • dans le code serveur de déclaration des collections de procédures (variables serveur globales à une collection de procédures). Attention !

Partie 1 : Découverte de WebDev

Pour plus d’informations sur ces types de variables et les autres types non cités, consultez l’aide en ligne (mot-clé : "Type de données").

Les variables globales déclarées en code serveur sont disponibles dans les codes navigateur de la page uniquement pour les types suivants : booléen, entier, réel, chaîne ou tableau simple. Les modifications apportées en code navigateur sur une variable globale (affectation de valeur par exemple) ne sont pas reportées en code serveur.

GAF_WebDev.book Page 55 Lundi, 15. décembre 2008 5:31 17

Attention !

• dans le code navigateur de chargement de la page (variables navigateur globales à une page). Ces variables pourront être utilisées dans le code navigateur de tous les traitements de la page et des éléments de la page. Les variables navigateur globales à une page ne sont pas disponibles dans les codes serveur de la page.

Notes

Si votre projet utilise une charte de programmation, le nom de toutes les variables sera automatiquement préfixé. Ce préfixage permet d’identifier simplement le type et la portée de vos variables : • préfixe "g" pour les variables globales • préfixe "n" pour le type entier • préfixe "s" pour le type chaîne • préfixe "r" pour le type réel, .... Attention : l’affichage des préfixes doit être activé (onglet "Avancé" de la description du projet, disponible uniquement si vous utilisez un environnement standard).

La plupart des développeurs est tentée de déclarer toutes ses variables en "global" dans un projet. Ce type de programmation est en effet "facile". Les variables étant toutes globales, elles sont alors manipulables depuis n’importe quel traitement. Mais ce type de programmation est souvent la cause d’écrasement de variables et d’effets de bord indésirables. Il est donc préférable de déclarer un nombre limité de variables globales et ensuite de déclarer des variables locales. Si vous souhaitez partager des valeurs entre 2 pages, il est vivement conseillé d’utiliser la méthode du "passage de paramètres", méthode que nous avons déjà vue au début de ce cours.

Partie 1 : Découverte de WebDev

Attention !

Variable locale : particularité en code navigateur En code navigateur, seuls les types suivants peuvent être utilisés pour déclarer des variables locales : booléen, entier, réel, chaîne, tableau simple d’un des types précédents.

Attention !

Toutes les variables déclarées ailleurs sont des variables locales.

GAF_WebDev.book Page 56 Lundi, 15. décembre 2008 5:31 17

Instructions de base du WLangage Le WLangage est un L5G riche, composé de : • Fonctions WLangage • Propriétés WLangage • Mots-clés WLangage • Instructions WLangage Au fur et à mesure de votre formation, vous découvrirez les instructions nécessaires. Dans cette leçon, nous allons simplement vous présenter les instructions de base, permettant de réaliser des conditions, des boucles ou simplement de saisir des commentaires. Instructions conditionnelles (code serveur et navigateur) Le WLangage permet de gérer des instructions conditionnelles du type : • SI, SINON, FIN pour effectuer un test sur une condition. • SELON, CAS, FIN pour exécuter une ou plusieurs actions selon les différents résultats d’un test sur une condition.

Partie 1 : Découverte de WebDev

Quelques exemples SI Maximum > Hasard(1, 999) ALORS Info("Bravo, vous avez gagné ! ") SINON Info("Dommage, vous avez perdu ! ") FIN SELON Jour CAS "Lundi" // Premier jour de la semaine CAS "Mercredi" // Troisième jour de la semaine CAS "Vendredi" // Cinquième jour de la semaine CAS "Samedi", "Dimanche" // C’est le week-end AUTRES CAS // c’est un autre jour FIN

Instructions de boucle (code serveur et navigateur) Le WLangage propose plusieurs possibilités pour gérer des boucles : • POUR, FIN pour un nombre d’itérations déterminé. • TANTQUE, FIN pour un nombre d’itérations indéterminé et dont la condition de sortie de la boucle est testée au début de la boucle. • BOUCLE, FIN pour un nombre d’itérations indéterminé et dont la condition de sortie de la boucle est testée dans la boucle. L’instruction SORTIR permet de sortir de cette boucle.

GAF_WebDev.book Page 57 Lundi, 15. décembre 2008 5:31 17

Notes

Le WLangage propose également des boucles de type POUR TOUT, FIN permettant de parcourir les éléments d’un champ, les chaînes de caractères, les enregistrements d’un fichier, ... Ces boucles avancées seront étudiées dans la suite de ce cours d’auto-formation.

Quelques exemples POUR Ind = 1 à 100 Cpt = Cpt + 1 FIN

// Il n’est pas nécessaire de déclarer Ind

Astuce

Ind est un entier = 0 TANTQUE Ind<Maximum Ind ++ FIN

Code serveur Pensez à utiliser la fonction Multitâche dans une boucle longue, afin de rendre la main aux autres programmes du serveur ou au système d’exploitation du serveur pendant que la boucle s’exécute.

Les commentaires Pour saisir des commentaires dans le code, il suffit de commencer le code par // (deux caractères "/"). Ils peuvent être écrits indifféremment dans un code serveur ou dans un code navigateur. Exemple :

Astuce

// Ceci est une ligne de commentaire

Vous pouvez mettre en commentaires plusieurs lignes de code en sélectionnant tout d’abord au clavier ou à la souris les lignes à mettre en commentaires et en appuyant sur les touches [CTRL] + [ /] (du pavé numérique). Vous réalisez l’opération inverse (enlever les commentaires) en sélectionnant tout d’abord au clavier ou à la souris les lignes à enlever des commentaires et en appuyant sur les touches [CTRL] + [SHIFT] + [ /] (du pavé numérique).

Partie 1 : Découverte de WebDev

Ind est un entier = 0 BOUCLE Ind ++ SI Ind>Maximum ALORS SORTIR FIN

GAF_WebDev.book Page 58 Lundi, 15. décembre 2008 5:31 17

Le mot-clé MoiMême (code serveur et navigateur) MoiMême est un mot-clé qui retourne le nom du champ en cours. MoiMême permet de rendre un code local (traitement d’un champ, ...) ou global (procédure globale, classe, ...) indépendant du champ en cours. MoiMême..Valeur = "Nouvelle valeur"

Le mot-clé MaPage (code serveur) MaPage est un mot-clé qui retourne le nom de la page en cours. MaPage permet de rendre un code global (procédure globale, ...) indépendant de la page en cours : TitreBienvenue = "Vous êtes ici > " + MaPage..Libellé

Définition Lorsqu’un traitement est appelé plusieurs fois dans un projet ou dans une page, il est souvent intéressant de créer une procédure contenant ce traitement. Il suffira alors d‘appeler la procédure ou la fonction à chaque fois que cela sera nécessaire. Côté programmation, il existe les procédures et les fonctions : • Les fonctions renvoient un résultat • Les procédures servent à exécuter un traitement spécifique. WebDev permet de gérer simplement les deux types de traitements, de manière identique : sous WebDev, il n’y a pas de différence entre une procédure et une fonction. C’est pourquoi dans la suite de ce cours, nous utiliserons uniquement le terme "procédure". Vous avez la possibilité de créer des procédures "locales" et des procédures "globales".

Attention !

Partie 1 : Découverte de WebDev

Procédures et fonctions

Les procédures en code serveur ne sont pas directement accessibles en code navigateur et inversement, les procédures en code navigateur ne sont pas accessibles en code serveur. Il est cependant possible d’exécuter une procédure serveur depuis un code navigateur grâce à la validation d’un bouton. Vous pourrez obtenir plus d’informations sur cette opération dans la partie "Comment le faire ?" à la fin de ce cours.

Procédure locale Une procédure "locale" est liée à une page et uniquement à cette page. Une procédure, lorsqu’elle est locale, peut être utilisée uniquement dans les traitements de la page et des champs de la page dans laquelle elle a été déclarée. Elle fait partie de la page. Procédure globale et collection de procédures Les procédures "globales" sont contenues dans des "collections de procédures". Chaque "collection de procédures" est un fichier qui contient toutes les procédures globales qui lui sont associées. Un projet correspondant à un site dynamique contient au moins deux collections de procédures (une "serveur" et une "navigateur"). Lors de la création du projet : • La collection de procédures serveur par défaut a pour nom : "Procédures globales de <nom_projet>" (fichier ".WDG").

GAF_WebDev.book Page 59 Lundi, 15. décembre 2008 5:31 17

• La collection de procédures navigateur par défaut a pour nom : "Procédures globales de <nom_projet>_Navigateur" (fichier ".WWN"). Vous pouvez créer autant de collections de procédures que vous le désirez dans un projet. Une collection de procédures permet de : • partager des procédures globales entre plusieurs développeurs, pour un même projet. • partager des procédures globales entre plusieurs projets. En effet, une même collection de procédures peut être utilisée dans plusieurs projets.

A propos du passage des paramètres Dans le projet "Mes_Premieres_Pages", vous avez pu voir qu’une procédure gérait des paramètres. Les paramètres peuvent être obligatoires ou optionnels. Les paramètres "obligatoires" sont toujours définis avant les paramètres "optionnels". La déclaration d’un paramètre "optionnel" est effectuée en affectant une valeur par défaut lors de la déclaration du paramètre. Exemple : PROCEDURE MaProcédure(Param1, ParamOption = "Valeur par défaut")

Astuce

Appel d’une procédure Pour appeler une procédure dans un traitement, il suffit d’écrire son nom dans l’éditeur de code et si nécessaire d’indiquer des paramètres. Rappel : une procédure serveur ne peut être appelée que depuis un traitement serveur et une procédure navigateur ne peut être appelée que depuis un traitement navigateur. WebDev sait bien évidemment gérer les appels de procédures imbriqués. Dans l’éditeur de code, lorsque vous êtes positionné sur un nom de procédure, l’appui sur la touche de fonction [F2] permet de visualiser le code de cette procédure. L’appui simultané sur les touches de fonction [CTRL]+[F2] permet de revenir dans le code précédent sur le nom de la procédure.

Création d’une procédure Une procédure peut être créée directement depuis l’explorateur de projet (Volet "Explorateur") disponible dans l’éditeur principal de WebDev. Pour créer une procédure globale : 4 1. Sélectionnez "Procédures" dans le volet "Explorateur". 2. Sélectionnez "Procédures globales" (serveur ou navigateur). 3. Cliquez avec le bouton droit et sélectionnez l’option "Nouvelle procédure Globale". 4. L’éditeur de code s’affiche avec une nouvelle procédure nommée "Nouvelle_Procédure".

Partie 1 : Découverte de WebDev

Comment savoir si une procédure doit être globale ou locale ? Pour savoir si une procédure doit être globale ou locale, posez-vous la question suivante : "La procédure va-t-elle être utilisée uniquement dans cette page, ou peut-elle être appelée depuis une autre page ?" • Si la procédure est appelée "uniquement depuis cette page", la procédure peut être "locale". • Si la procédure peut être appelée "depuis plusieurs pages", la procédure doit être "globale".

GAF_WebDev.book Page 60 Lundi, 15. décembre 2008 5:31 17

5. Modifiez le nom de la procédure : il suffit de remplacer "Nouvelle_Procédure" par le nom de votre procédure. 6. Enfin, écrivez le code de la procédure. Pour créer une procédure locale : 4 1. Sélectionnez dans le volet "Explorateur" la page associée à la procédure. 2. Sélectionnez "Procédures locales" dans les éléments de la page. 3. Cliquez avec le bouton droit et sélectionnez : • l’option "Nouvelle procédure locale" pour créer une procédure locale serveur. • l’option "Nouvelle procédure locale navigateur" pour créer une procédure locale navigateur. 4. L’éditeur de code s’affiche avec une nouvelle procédure nommée "Nouvelle_Procédure". 5. Modifiez le nom de la procédure : il suffit de remplacer "Nouvelle_Procédure" par le nom de votre procédure. 6. Enfin, écrivez le code de la procédure. Remarque : Il est également possible de créer directement une procédure à partir du code sélectionné dans l’éditeur de code (option "Créer une procédure .. Créer une procédure contenant le code sélectionné" du menu contextuel).

Partie 1 : Découverte de WebDev

Un exemple pratique sur les procédures et les fonctions Après avoir vu la théorie, un peu de pratique ! le projet "Concepts_Programmation.WWP" (option "? .. Guide d’auto-formation .. Con4 Ouvrez cepts de programmation"). la page "PAGE_Procedures.WWH" (par exemple double-cliquez sur le nom de la page 4 Ouvrez dans l’explorateur). Testez la page (icône "Go"). 4 1. Cliquez sur les boutons "Changer" et "Changer l’image" pour exécuter une procédure. 2. Cliquez sur le bouton "Quel jour ?" pour exécuter une fonction. Dans les deux cas, le code exécuté est affiché.

Traitement des chaînes (code serveur et navigateur) Dans les fonctionnalités de base d’un langage de programmation, la manipulation des chaînes de caractères est une des fonctionnalités les plus importantes. Le WLangage offre une palette impressionnante de fonctionnalités pour manipuler les chaînes de caractères : fonctions WLangage, opérateurs d’extraction, de concaténation, ... Nous présentons ici les fonctions les plus courantes pour manipuler les chaînes de caractères. Pour plus de détails, consultez l’aide en ligne (mot-clé : "Chaîne de caractères") Exemple pratique si nécessaire le projet "Concepts_Programmation.WWP" (option "? .. Guide d’auto-for4 Ouvrez mation .. Concepts de programmation"). la page "PAGE_Manipulation_chaines.WWH" (double-cliquez sur le nom de la page 4 Ouvrez dans l’explorateur de projet).

4 Testez la page en cliquant sur l’icône

GAF_WebDev.book Page 61 Lundi, 15. décembre 2008 5:31 17

Détails (code serveur et navigateur) Un champ de type texte (par exemple un libellé) peut être initialisé : • soit directement avec la chaîne : LIB_Texte = "WebDev est un outil formidable"

• soit avec une variable de type chaîne : MaChaîne est une chaîne = "J’apprends à travailler avec WebDev" LIB_Texte2 = MaChaîne

Une chaîne peut être construite à partir de plusieurs autres chaînes. On parle alors de concaténation de chaînes. Pour concaténer deux chaînes, il suffit d'utiliser l'opérateur "+" : // La fonction Info permet d’afficher le résultat à l’écran Info(LIB_Texte + LIB_Texte2)

L'extraction d'une partie d'une chaîne peut être réalisée avec : • les opérateurs [[ et ]] (attention il ne faut pas d'espace entre les crochets [[ et ]]). Info(LIB_Texte[[1 à 6]])

// affiche "WebDev"

• la fonction ExtraitChaîne : //Extrait le premier mot de LIB_Texte Info(ExtraitChaîne(LIB_Texte,1," "))

// affiche "WebDev"

• la fonction Milieu, qui extrait un morceau de chaîne depuis une chaîne : Info(Milieu(LIB_Texte2,30,6))

// affiche "WebDev"

Partie 1 : Découverte de WebDev

La page "PAGE_Manipulation_chaines" illustre les différentes manipulations que nous expliquerons dans cette leçon :

GAF_WebDev.book Page 62 Lundi, 15. décembre 2008 5:31 17

• la fonction Gauche, qui retourne la partie gauche d'une chaîne : Info(Gauche(LIB_Texte2,10))

// affiche "J'apprends"

• la fonction Droite, qui retourne la partie droite d'une chaîne : Info(Droite(LIB_Texte,10))

// affiche "formidable"

La taille d'une chaîne peut être connue avec la fonction Taille : Info(Taille(LIB_Texte2))

// affiche 38

Une chaîne peut être transformée en majuscules avec la fonction Majuscule ou en minuscules avec la fonction Minuscule : Info(Majuscule(LIB_Texte2)) //"J’APPRENDS A TRAVAILLER AVEC WEBDEV" Info(Minuscule(LIB_Texte2)) //"j’apprends à travailler avec webdev"

ChaineRecherche est une chaîne = "WebDev" Pos est un entier // Récupère la position de "WebDev" dans LIB_Texte2 Pos = Position(LIB_Texte2, ChaineRecherche) SI Pos=0 ALORS // "WebDev" n’a pas été trouvé dans LIB_Texte2 Info(ChaineRecherche + " non trouvé dans le texte 2") SINON // "WebDev" a été trouvé dans LIB_Texte2 Info(ChaineRecherche + " trouvé dans texte 2") FIN

Astuce

Partie 1 : Découverte de WebDev

Une chaîne peut être recherchée dans une autre chaîne avec la fonction Position :

Code serveur Vous pouvez également effectuer une recherche de position d’une chaîne de caractères dans une autre chaîne sans tenir compte de la casse. Il suffit d’utiliser la fonction Position avec le paramètre SansCasse. Exemple : Pos = Position(TEXT2, ChaineRecherche, 1, SansCasse)

Pour connaître le nombre d’occurrences d’une chaîne de caractères donnée dans une autre chaîne de caractères, utilisez la fonction ChaîneOccurrence : NbOccurrences est un entier NbOccurrences = ChaîneOccurrence("anastasia", "a")

// Renvoie 4

GAF_WebDev.book Page 63 Lundi, 15. décembre 2008 5:31 17

Traitement des numériques (code serveur et navigateur) Les calculs sur les numériques peuvent être effectués à partir des champs de saisie de type numérique ou directement en manipulant des variables typées (entier, réel, numérique, monétaire, ...) Exemple pratique si nécessaire le projet "Concepts_Programmation.WWP" (option "? .. Guide d’auto-for4 Ouvrez mation .. Concepts de programmation"). la page "PAGE_CalculsNumeriques.WWH" (double-cliquez sur le nom de la page dans 4 Ouvrez l’explorateur). la page en cliquant sur l’icône 4 Testez sur les "numériques".

. Cette page présente un aperçu des manipulations

Détails Un champ de type numérique peut être initialisé : • soit directement avec la valeur numérique : SAI_NUM1 = 3.14

ent1 est un entier = 1234 SAI_NUM1 = ent1

Il est possible de concaténer une chaîne et un numérique avec l'opérateur "+" : Info("La valeur entière est " + SAI_NUM1)

Si vous exécutez le code suivant : Astuce

Info("Un calcul : " + 1 + 2)

La boîte de dialogue affichera "Un calcul : 12". Si vous souhaitez afficher le résultat du calcul, il faut utiliser le code suivant : Info("Un calcul : " + (1 + 2))

La boîte de dialogue affichera "Un calcul : 3". Quelques exemples de manipulations de numériques réalisés en WLangage : • La partie entière d'un nombre est connue par la fonction PartieEntière, la partie décimale par la fonction PartieDécimale : //Affiche la partie entière et la partie décimale de SAI_NUM1 Info("Partie entière de "+SAI_NUM1+" : "+... PartieEntière(SAI_NUM1), ... "Partie décimale de "+SAI_NUM1+" : "+ ... PartieDécimale(SAI_NUM1))

• La valeur absolue d'un nombre est retournée par la fonction Abs : //Affiche la valeur absolue de SAI_NUM2 Info("Valeur absolue de "+SAI_NUM2+" : "+Abs(SAI_NUM2))

Partie 1 : Découverte de WebDev

• soit avec une variable numérique :

GAF_WebDev.book Page 64 Lundi, 15. décembre 2008 5:31 17

• La valeur arrondie d'un nombre est retournée par la fonction Arrondi : //Affiche la valeur arrondie à 1 décimale de SAI_NUM2 Info("Arrondi de "+SAI_NUM2 +" : " + Arrondi(SAI_NUM2,1))

• La fonction Racine permet de calculer la racine Nième d'un nombre : //Calcule la racine carrée de SAI_NUMPUIS SAI_NUMRAC = Racine(SAI_NUMPUIS, 2)

• La fonction Puissance permet d'élever un nombre à la puissance N : //Calcule la puissance 2 de SAI_NUMRAC SAI_NUMPUIS = Puissance(SAI_NUMRAC, 2)

Remarque : Le type des champs de saisie numériques Lorsqu'un champ est défini comme numérique, on ne connaît pas a priori son type (entier, réel, réel double, ...). Son type est défini automatiquement en fonction du masque sélectionné pour le champ.

Partie 1 : Découverte de WebDev

Pour forcer le type d'un champ, il suffit d’utiliser une variable typée. Par exemple : Val1 est un entier Val1 = 123456789 //affectation du champ SAI_NUM1 = Val1 Val1 = SAI_NUM1 //récupération du champ

Traitement des monétaires (code serveur uniquement) Exemple pratique si nécessaire le projet "Concepts_Programmation.WWP" (option "? .. Guide d’auto-for4 Ouvrez mation .. Concepts de programmation"). la page "PAGE_Monetaire.WWH". Cette page présente un aperçu des manipulations 4 Ouvrez possibles sur les "Monétaires". la page en cliquant sur l’icône . 4 Testez Testez les différentes actions présentées sur la page. Le code exécuté est affiché dans la page. Détails Le type "Monétaire" est un réel codé sur 10 octets. Il permet de donner la solution à deux problèmes non résolus par les réels : • avoir plus de 15 chiffres significatifs (les réels doubles gèrent 15 chiffres significatifs maximum), le type "Monétaire" gère 23 chiffres significatifs. • éviter une erreur induite par le codage binaire des réels : • Un réel gère jusqu'à 15 chiffres significatifs. Or, en réalité, le codage binaire des réels ne permet pas de coder tous les réels de 15 chiffres significatifs.

GAF_WebDev.book Page 65 Lundi, 15. décembre 2008 5:31 17

• Le type "Monétaire" a un codage différent des réels qui n'induit pas d'erreur d'arrondi. En effet, le code suivant donne un résultat faux : // Avec une variable de type Réel, le calcul est faux x est un Réel x = 18.6 - 8.6 - 10 Erreur ("18.6-8.6-10="+x)

Par contre avec le code suivant, le calcul est correct : x est un Monétaire x = 18.6 - 8.6 - 10 Info(x)

Pour effectuer des divisions sur des monétaires, il est conseillé de passer par des variables intermédiaires de type "Monétaire".

Pour faire des calculs avancés, le WLangage met également à votre disposition le type Numérique. Par défaut, le type Numérique correspond à 32 chiffres pour la partie entière et 6 chiffres pour la partie décimale (comme le type monétaire). Mais l’avantage du type numérique est de pouvoir configurer le nombre de chiffres à utiliser pour la partie entière et le nombre de chiffres à utiliser pour la partie décimale. Pour plus de détails, consultez l’aide en ligne (mot-clé : "Numérique").

Les numériques et les chaînes font bon ménage. WebDev est très souple dans les affectations de variables. Ainsi il est possible d'affecter une chaîne de chiffres dans une variable numérique et inversement. Par exemple : i c i c c i

est un entier est une chaîne = 123 = i //la variable c contient la chaîne "123" = "456" = c //la variable i contient la valeur 456

Si vous voulez transformer un nombre en une chaîne de caractères en respectant un format bien précis, il suffit d’utiliser la fonction NumériqueVersChaîne. Par exemple : NumériqueVersChaîne(1234.567,"012,3f")//renvoie "00001234,567"

Partie 1 : Découverte de WebDev

Remarque

x, y sont des Monétaires x = 12345678901234567.123456 y = 12345678901234567.123456 x = x/y Info ("12345678901234567.123456", ... "/","12345678901234567.123456","= "+x)

GAF_WebDev.book Page 66 Lundi, 15. décembre 2008 5:31 17

Notes

4 Ouvrez et testez la page "PAGE_NumVersChaine.WWH". Code serveur et navigateur La fonction "inverse" de NumériqueVersChaîne, est la fonction Val. Cette fonction permet de convertir une chaîne en un numérique.

Traitements des dates et des heures (code serveur et navigateur) Présentation Pour gérer simplement les dates et les heures dans vos applications, WinDev met à votre disposition : • un champ de saisie de type Date, Heure ou Durée. Avec ce champ, plus aucun problème pour saisir une date ou une heure valide. • des variables de type Date, Heure, DateHeure et Durée. Ces variables simplifient la manipulation des dates et des heures par programmation et permettent de multiples calculs.

Partie 1 : Découverte de WebDev

Exemple pratique si nécessaire le projet "Concepts_Programmation.WWP" (option "? .. Guide d’auto-for4 Ouvrez mation .. Concepts de programmation"). la page "PAGE_DateHeure.WWH". Cette page illustre les explications données dans la 4 Ouvrez suite de cette leçon.

4 Testez cette page. Masque de saisie et valeur retournée Les dates et les heures sont des chaînes qui ont un format prédéfini. Dans un champ de type "Date" ou de type "Heure", il faut distinguer : • Le masque de saisie : c’est le format avec lequel la date et l’heure seront affichées. • La valeur retournée (ou mémorisée) : c’est la valeur retournée par le champ vers le programme. Ces informations sont saisies dans la fenêtre de description du champ de saisie :

Par exemple, pour un champ de type "Date" : • le masque de saisie sera "JJ/MM/AAAA". La date saisie par l’utilisateur sera de la forme "01/ 11/2008". • la valeur retournée sera par défaut "AAAAMMJJ" (Exemple : la valeur saisie sous la forme "23/ 04/2008" retournera au programme "20080423").

GAF_WebDev.book Page 67 Lundi, 15. décembre 2008 5:31 17

Remarque

Il existe la possibilité de choisir un masque de saisie de type "Date système". Dans ce cas, le format affiché sera celui défini dans les "Paramètres régionaux du panneau de configuration de Windows" de la machine en cours d’exécution.

Pour comprendre l’importance et les relations entre le masque de saisie et la valeur retournée, regardons les exemples suivants : • Si le masque de saisie d'un champ date est "JJ/MM/AA" et la valeur retournée est "AAAAMMJJ" : DATEJ="19981225" //affiche la date sous la forme "25/12/98" DATEJ="981225" //affiche la date sous une forme incorrecte

• Si le masque de saisie d'un champ date est "MM/JJ/AAAA" et la valeur retournée est "AAMMJJ" :

Notes

Il faut donc faire attention au format de la valeur retournée dans un champ de type date ou heure. Les fonctions du WLangage qui manipulent : • des dates utilisent le format "AAAAMMJJ". • des heures utilisent le format "HHMMSSCC" (certaines utilisent le format "HHMMSSCCMMM", pour la gestion des millisecondes). Rappel : Par défaut, le format (masque de saisie) du champ correspond au masque date défini par le projet (option "Projet .. Description du projet", onglet "Langues"). Ainsi, le même masque est utilisé automatiquement dans tous les champs de type date de l'application. Cette fonctionnalité est également très utile dans les applications multilangues.

Les dates (code serveur et code navigateur) Exemple pratique si nécessaire le projet "Concepts_Programmation.WWP" (option "? .. Guide d’auto-for4 Ouvrez mation .. Concepts de programmation"). la page "PAGE_Manipdates.WWH". Cette page illustre les explications données dans la 4 Ouvrez suite de cette leçon.

4 Testez cette page (bouton

Quel jour sommes-nous ? connaître la date du jour, il suffit d'utiliser la fonction DateDuJour (ou DateSys). La fonc4 Pour tion DateDuJour retourne la date système de votre ordinateur sous la forme d'une chaîne de caractères au format "AAAAMMJJ". Exemple : Info("Nous sommes le " + DateDuJour())

Partie 1 : Découverte de WebDev

DATEJ="981225" //affiche la date sous la forme "12/25/1998" DATEJ="19981225" //affiche la date sous une forme incorrecte

GAF_WebDev.book Page 68 Lundi, 15. décembre 2008 5:31 17

Pour tester cette fonctionnalité dans notre exemple, cliquez sur le bouton "Quel jour sommesnous ?". Comme vous pouvez le constater, la date affichée est au format "AAAAMMJJ". afficher la date sous un format plus explicite, il suffit d'utiliser la fonction 4 Pour DateVersChaîne : Info("Nous sommes le " + DateVersChaîne(DateDuJour()))

La fonction DateVersChaîne transforme une chaîne au format "AAAAMMJJ" en chaîne au format "JJ/MM/AAAA" (à la norme française et beaucoup plus lisible !). Pour tester cette fonctionnalité dans notre exemple, cliquez sur le bouton "Quel jour sommesnous (bis, mais en clair) ?". Quel jour sommes-nous, mais avec le jour et le mois en lettres ? afficher la date en toutes lettres, il faut utiliser les fonctions EntierVersJourEnLettre et 4 Pour EntierVersMoisEnLettre :

Partie 1 : Découverte de WebDev

varDate, varDateJ sont des Chaînes varDateJ = DateDuJour() varDate = EntierVersJourEnLettre(DateVersEntier(varDateJ))+ ... " " + varDateJ[[7 à]] + " " + ... EntierVersMoisEnLettre(DateVersEntier(varDateJ)) Info("Nous sommes le "+varDate)

Les fonctions EntierVersJourEnLettre et EntierVersMoisEnLettre donnent en toutes lettres le jour et le mois correspondant à la date passée en paramètre. Les fonctions EntierVersJourEnLettre et EntierVersMoisEnLettre attendent un entier. Il faut donc utiliser la fonction DateVersEntier pour convertir une date "chaîne" en un entier. Pour tester cette fonctionnalité dans notre exemple, cliquez sur le bouton "Quel jour sommesnous (ter, mais avec des lettres !) ?". Quel est le nombre de jours entre 2 dates ? voulez savoir combien de jours se sont écoulés entre deux dates ? C’est très simple : il 4 Vous suffit d’utiliser la fonction DateDifférence : NombreJour est un entier NombreJour = DateDifférence(DateSys(), "20100101") Info("Le nombre de jours entre", "le " + ... DateVersChaîne(DateSys()) +" et le 01/01/2010 est " + ... NombreJour)

Pour tester cette fonctionnalité dans notre exemple, cliquez sur le bouton "Nombre de jours entre deux dates". Quel est le jour de la semaine d’une date donnée ? aussi simplement, vous pouvez connaître le jour de n'importe quelle date avec la 4 Toujours fonction EntierVersJourEnLettre : J est une chaîne J = EntierVersJourEnLettre(DateVersEntier("17890714")) Info("Le 14 juillet 1789 était un " + J)

GAF_WebDev.book Page 69 Lundi, 15. décembre 2008 5:31 17

Remarque : Il est également possible d’utiliser directement la fonction DateVersJourEnLettre. J = DateVersJourEnLettre("17890714")

Pour tester cette fonctionnalité dans notre exemple, cliquez sur le bouton "Jour de la semaine". Petit exercice pratique Maintenant que vous maîtrisez les dates, une colle : que fait le code suivant? DateVersChaîne(DateDuJour(),"JJJJ JJ MMM AAAA")

Réponse : Affiche la date littérale (le jour et la date en clair).

Les heures (code serveur et code navigateur) Exemple pratique si nécessaire le projet "Concepts_Programmation.WWP" (option "? .. Guide d’auto-for4 Ouvrez mation .. Concepts de programmation").

4 Testez cette page (bouton "GO"). Quelle heure est-il? connaître l'heure, il suffit d'utiliser la fonction Maintenant (ou HeureSys). La fonction 4 Pour Maintenant retourne l'heure actuelle de votre système sous la forme d'une chaîne de caractères au format "HHMMSSCC" : Info("Il est " + Maintenant())

Pour tester cette fonctionnalité dans notre exemple, cliquez sur le bouton "Quelle heure estil ?".

4 Vous souhaitez afficher l'heure au format standard "HH:MM:SS:CC" ? Le code devient alors : Info("Il est " + HeureVersChaîne(Maintenant()))

La fonction HeureVersChaîne transforme une heure au format "HHMMSSCC" en une chaîne au format "HH:MM:SS:CC". Pour tester cette fonctionnalité dans notre exemple, cliquez sur le bouton "Quelle heure est-il (bis mais en clair)?".

4 Pour ne pas afficher les centièmes de seconde, le code est :

MonHeure est une chaîne = ... Gauche(HeureVersChaîne(Maintenant()),8) Info("Il est "+ MonHeure)

La fonction Gauche retourne les n premiers caractères d'une chaîne (8 dans notre exemple). Pour tester cette fonctionnalité dans notre exemple, cliquez sur le bouton "Quelle heure est-il (ter sans les centièmes)?".

Partie 1 : Découverte de WebDev

la page "PAGE_ManipHeures.WWH". Cette page illustre les explications données dans 4 Ouvrez la suite de cette leçon.

GAF_WebDev.book Page 70 Lundi, 15. décembre 2008 5:31 17

Combien de temps s'est écoulé entre deux heures ? 4 Il est 17h25. Combien de temps s'est écoulé depuis 12h15 ? Le code est le suivant :

// Affiche le temps écoulé depuis 12h15 Diff est un entier = HeureDifférence("1215", Maintenant()) Signe_temps est une chaîne Résultat est une chaîne = EntierVersHeure(Abs(Diff)) SI Diff < 0 ALORS Signe_temps = "-" Info("Temps écoulé : " + Signe_Temps + Gauche(Résultat, 2) + ... "heures"+ Milieu(Résultat, 3, 2) + "minutes"+... Milieu(Résultat, 5, 2) + "secondes"+... Milieu(Résultat, 7, 2) + "centièmes de seconde")

Attention !

Partie 1 : Découverte de WebDev

La fonction EntierVersHeure transforme un entier (qui correspond au nombre de centièmes de secondes écoulées depuis minuit (ou 00h00)) vers une heure sous la forme "HHMMSSCC". La fonction HeureVersEntier effectue l’opération inverse. • Ne mettez pas de ":" dans l'heure passée en paramètre à la fonction HeureVersEntier, cela fausserait le résultat. • Pour calculer des durées de plus de 24 heures, utilisez les types Date, Heure, ....

Pour tester cette fonctionnalité dans notre exemple, cliquez sur le bouton "Temps (en secondes) écoulé depuis 12H15". Variable de type Date, Heure, DateHeure, Durée (code serveur) Le WLangage propose des types de variables spécifiques pour les valeurs de type Date, Heure, DateHeure ou de Durée. Ces types de variables sont disponibles uniquement en code serveur. Ces variables sont assimilables à des "chaînes". Chaque variable contient une valeur selon le tableau suivant : Type

Format par défaut

Date

AAAAMMJJ

Heure

HHMMSSCC

DateHeure

AAAAMMJJHHMMSSCC

Durée

AAAAMMJJHHMMSSCC

Le type "Date" permet de gérer des dates comprises entre le 01/01/0001 et le 31/12/9999 (de quoi être tranquille pour un bon moment !).

GAF_WebDev.book Page 71 Lundi, 15. décembre 2008 5:31 17

Plus sérieusement, pour manipuler la valeur de ces variables, vous pouvez utiliser les syntaxes suivantes : MaDate est une Date = "20021021" //Affiche la date formatée Info(DateVersChaîne(MaDate)) //Affiche "21/10/2002" //Ajoute une année à MaDate MaDate..Année = MaDate..Année + 1 //Ajoute un mois à MaDate MaDate..Mois = MaDate..Mois + 1 //Ajoute un jour à MaDate MaDate..Jour = MaDate..Jour + 1 //Affiche la date formatée Info(DateVersChaîne(MaDate)) //Affiche "22/11/2003"

Dans ce code, Année, Mois et Jour sont des propriétés du WLangage. Pour utiliser des propriétés WLangage sur des éléments WebDev, il suffit d’utiliser la syntaxe suivante : <Nom de l’élément>..NomPropriété

Calculs avec des dates et des heures Le WLangage possède de très nombreuses fonctions pour gérer les dates et les heures et effectuer différents calculs. Pour plus de détails, consultez l’aide en ligne (mot-clé : "Date, Fonctions WLangage").

Partie 1 : Découverte de WebDev

Pour plus de détails sur l’utilisation des propriétés WLangage, consultez l’aide en ligne.

GAF_WebDev.book Page 72 Lundi, 15. décembre 2008 5:31 17

Partie 1 : Découverte de WebDev

GAF_WebDev.book Page 73 Lundi, 15. décembre 2008 5:31 17

PARTIE 2 Site avec données

GAF_WebDev.book Page 74 Lundi, 15. dĂŠcembre 2008 5:31 17

GAF_WebDev.book Page 75 Lundi, 15. décembre 2008 5:31 17

LEÇON 2.1. PRÉSENTATION Ce que vous allez apprendre dans cette leçon ... • Présentation du site réalisé dans cette partie

Partie 2 : Site avec données

Durée estimée : 5mn

GAF_WebDev.book Page 76 Lundi, 15. décembre 2008 5:31 17

Présentation du site réalisé dans cette partie

Partie 2 : Site avec données

Dans cette partie, nous allons étudier les bases de données pouvant être manipulées avec WebDev. Dans un but pédagogique, nous vous proposons de développer un site intranet de A à Z, de la conception de l’analyse au test du site. Le déploiement du site sera étudié dans une partie spécifique. Vous verrez ainsi tous les points importants du développement d’un site WebDev. Le site Intranet que nous allons réaliser ensemble est une gestion de bibliothèque en ligne. Vous pourrez facilement rechercher et réserver un livre directement depuis votre poste. La base de données utilisée est HyperFileSQL Classic, la base de données gratuite fournie avec WebDev. Plus loin dans ce cours, nous manipulerons la base de données HyperFileSQL Client/ Serveur. Mais avant de se mettre au travail, voyons ce que vous allez faire. Le projet complet correspondant au site est disponible dans le sous-répertoire "\Autoformation\Corriges\Ma_Bibliotheque" de WebDev. Vous pouvez lancer directement l’application par l’option "? .. Autoformation .. Site avec données (Bibliothèque)" du menu de WebDev.

GAF_WebDev.book Page 77 Lundi, 15. décembre 2008 5:31 17

LEÇON 2.2. PROJET ET ANALYSE Ce que vous allez apprendre dans cette leçon ... • Création d’un projet • Création d’une analyse

Partie 2 : Site avec données

Durée estimée : 50mn

GAF_WebDev.book Page 78 Lundi, 15. décembre 2008 5:31 17

Présentation Pour créer un site avec une base de données, il faut : • Créer le projet lié au site. Ce projet regroupera tous les éléments du site (pages, codes, requêtes, états, ...). • Créer l’analyse liée au projet. L’analyse permet de décrire tous les fichiers de données manipulés par le site. Nous créerons ensuite le site grâce au module RAD (Rapid Application Development).

Création du projet Pour créer le projet : 4 1. Lancez WebDev si ce n’est pas déjà fait.

Partie 2 : Site avec données

Notes

2. Sélectionnez l’option "Fichier .. Nouveau", survolez le "P" puis cliquez sur "Projet". Lors du survol du "P" de projet, les différents types de projets pouvant être créés avec WebDev sont affichés. Pour créer directement un type de projet spécifique (par exemple projet dynamique WebDev), il suffit de cliquer sur le type de projet voulu.

L’assistant de création de projet se lance. Les différents plans de l’assistant vont vous aider à créer votre projet. Tous les renseignements indiqués dans cet assistant pourront être modifiés par la suite. 3. Le premier plan de l’assistant permet de saisir le nom du projet, son emplacement et sa description. Dans notre cas, ce projet va simplement s’appeler "Ma_Bibliotheque".

Par défaut, WebDev propose de créer ce projet dans le répertoire "\Mes Sites\Ma_Bibliotheque". Vous pouvez conserver cet emplacement ou le modifier grâce au

GAF_WebDev.book Page 79 Lundi, 15. décembre 2008 5:31 17

Notes

bouton [...]. Pour le résumé du projet, saisissez "Le projet a pour but de gérer la réservation de livres". 4. Les différentes étapes de l’assistant sont indiquées à gauche de l’assistant. Ces étapes sont directement clicables. Les autres écrans de l’étape 1 ("Description") n’étant pas fondamentaux, cliquez directement sur "2-Chartes". Les différentes options de la création de projet présentées dans ce paragraphe supposent que vous utilisez l’environnement simplifié de WebDev (voir “Environnement nécessaire au Cours d’auto-formation”, page 33). Si vous utilisez un autre type d’environnement, des options supplémentaires peuvent apparaître.

5. Cette étape permet de définir la charte graphique. Sélectionnez "Max" et passez à l’écran suivant. 6. Nous verrons plus loin comment intégrer une page d’accueil pour référencer le site. Sélectionnez l’option "Non, ne pas intégrer une page d’accueil". 7. Nous allons maintenant donner les renseignements concernant la base de données. Cliquez directement sur "4 Base de données". 8. Sélectionnez l’option "Oui, créer une nouvelle base de données" et validez. L’assistant de création de l’analyse se lance.

Les étapes de l’assistant de création d’analyse sont les suivantes : 4 1. Indiquez le nom et le répertoire de l’analyse.

Partie 2 : Site avec données

Création de l’analyse

GAF_WebDev.book Page 80 Lundi, 15. décembre 2008 5:31 17

Partie 2 : Site avec données

Par défaut, le nom de l’analyse correspond au nom du projet et le répertoire de l’analyse est un répertoire ".ana" dans le répertoire du projet. Nous allons conserver ces paramètres par défaut. Passez à l’écran suivant de l’assistant. 2. L’écran suivant concerne la sécurité de l’analyse, avec l’utilisation d’un mot de passe. Nous verrons cet aspect plus loin dans ce cours. Passez à l’écran suivant. 3. Vous pouvez ensuite choisir le ou les types de bases de données manipulées par le projet. Sélectionnez HyperFileSQL Classic (la base de données proposée par défaut avec WebDev). Passez à l’écran suivant de l’assistant.

4. Validez. L’assistant de création de fichier se lance automatiquement.

Création de la description des fichiers de données Notre projet de gestion de bibliothèque va être associé à l’analyse suivante. Cette analyse comporte les fichiers suivants : • LIVRES • RESERVATION • THEME • UTILISATEUR

GAF_WebDev.book Page 81 Lundi, 15. décembre 2008 5:31 17

Création d’un fichier de données et de ses rubriques sous l’éditeur Les étapes de l’assistant de création de fichier sont les suivantes : 4 1. Sélectionnez dans l’assistant l’option "Créer une nouvelle description de fichier". Passez à l’écran suivant de l’assistant. 2. Le fichier que nous allons créer est le fichier "UTILISATEUR". Son nom est donc "UTILISATEUR".

Ce nom sera utilisé : - pour manipuler le fichier en programmation. La variable associée au fichier sera "Utilisateur". - pour construire le nom du fichier de données physique associé (fichier UTILISATEUR.fic).

Partie 2 : Site avec données

Pour créer les différents fichiers de cette analyse, nous allons utiliser différentes méthodes disponibles dans WebDev.

GAF_WebDev.book Page 82 Lundi, 15. décembre 2008 5:31 17

Notes

Automatiquement, le libellé et la représentation du fichier apparaissent. "Un enregistrement représente" indique l’information qui sera utilisée pour décrire les liaisons entre fichiers. Il est important de renseigner avec soin cette information !

Partie 2 : Site avec données

Notes

3. Conservez l’option "Le fichier possède un identifiant automatique". Cette option indique si le fichier doit posséder une clé unique, gérée automatiquement par WebDev. Pour créer l’identifiant (un identifiant est une clé unique), vous pouvez créer une rubrique numérique de type "Identifiant automatique". Cet identifiant est automatiquement géré par WebDev. Chaque fois qu’un enregistrement est ajouté dans le fichier, WebDev affecte automatiquement une valeur à l’identifiant du fichier. Cette valeur est unique. Vous pouvez décocher ce choix si vous n’avez pas besoin d’identifiant automatique (si aucune clé unique n’est nécessaire, ou si une clé unique existe déjà dans le fichier).

4. Passez à l’écran suivant et sélectionnez le type de la base associée au fichier. Nous allons travailler sur des fichiers HyperFileSQL Classic. Passez à l’écran suivant. 5. Conservez les options par défaut et passez à l’écran suivant. 6. Cliquez sur le bouton vert pour valider. Le fichier est automatiquement créé dans l’analyse. La fenêtre de description des rubriques s’ouvre.

GAF_WebDev.book Page 83 Lundi, 15. décembre 2008 5:31 17

Nous allons saisir les rubriques du fichier UTILISATEUR. Dans la fenêtre de description du fichier, vous pouvez déjà voir qu’une rubrique a été automatiquement créée : IDUTILISATEUR. Cette rubrique correspond à l’identifiant automatique du fichier. Cette rubrique est composée des lettres "ID" et du nom du fichier. Nous allons créer les autres rubriques de ce fichier. d’abord, nous allons créer la rubrique "NomPrénom". Cette rubrique contiendra le nom et 4 Tout le prénom de l’utilisateur. 1. Dans la fenêtre de description des rubriques, cliquez dans la colonne "Nom" de la première ligne vide. Cette colonne passe automatiquement en saisie. Saisissez "NomPrénom". 2. Cliquez dans la colonne "Libellé". Automatiquement, le nom de la rubrique apparaît. Nous allons modifier le libellé de la rubrique en saisissant "Nom et Prénom de l’utilisateur". Dans la colonne "Type", le type "Texte" est automatiquement sélectionné. Nous n’y touchons pas. Nous allons créer la rubrique "Login". Cette rubrique contiendra l’identifiant de l’utilisateur. 4 1. Dans la fenêtre de description des rubriques, cliquez dans la colonne "Nom" de la première

Notes

3. Cette rubrique va être une clé de notre fichier : les clés permettent d’accélérer les accès aux données ou de faciliter les parcours de fichiers. Il sera possible de faire des recherches ou des parcours sur cette rubrique. La notion de clé fait partie des caractéristiques d’une rubrique. En fait, lors de la création d’une rubrique, vous avez la possibilité d’indiquer si elle est : • non clé, • clé unique : la valeur de cette clé sera unique dans l’ensemble du fichier (c’est-à-dire dans tous les enregistrements du fichier) • clé avec doublons : la valeur de cette clé pourra être retrouvée plusieurs fois dans le fichier.

4. La définition de la clé se fait de la manière suivante : re-sélectionnez la ligne de la rubrique "Login" pour activer les champs de description présents sur la droite de l’écran.

Partie 2 : Site avec données

ligne vide. Cette colonne passe automatiquement en saisie. Saisissez "Login". 2. Nous allons modifier la taille de la rubrique. Cliquez sur la case "50" et remplacez "50" par "10". Cliquez sur la ligne suivante. Les valeurs sont automatiquement mises à jour.

GAF_WebDev.book Page 84 Lundi, 15. décembre 2008 5:31 17

Il suffit alors de préciser le type de clé utilisé. Dans notre cas, le login est une clé unique.

•le nom : MotDePasse •le libellé : Mot de passe associé au login •le type : Texte •la taille : 10 2. Dans la partie basse de l’écran, cliquez sur la double flèche pour afficher les paramètres du champ lié à la rubrique sélectionnée. Les informations saisies ici seront automatiquement utilisées lors de la création des pages liées au fichier. Vous retrouvez ici le type du champ et le libellé. Nous allons modifier le type du champ en choisissant le type "Mot de passe". Ainsi, lors de la saisie du mot de passe dans le site, les caractères saisis seront automatiquement masqués. 3. Cliquez à nouveau sur la double flèche. 4. Le mot de passe d’un utilisateur étant une information sensible, nous allons l’afficher uniquement dans les pages de type fiche (par exemple la page de saisie de l’utilisateur). Pour cela, sélectionnez l’onglet "Avancé" sur la droite de l’écran, et indiquez que le RAD doit générer pour cette rubrique uniquement un champ en mode fiche (décochez les options "une colonne en mode table" et "un champ pour les états"). Nous allons créer une rubrique email. Facile ! Mais pour cela, nous allons utiliser les métatypes.

Notes

Partie 2 : Site avec données

Nous allons maintenant créer la rubrique "MotDePasse". 4 1. Positionnez-vous sur une nouvelle ligne de la table. Saisissez :

Métatype Un métatype est une combinaison de caractéristiques d’une rubrique et de son champ relié. Par exemple, un métatype "Fax" contiendra le type et la longueur de la rubrique, le masque de saisie, le cadrage, ... Vous pouvez utiliser les rubriques métatypes fournies avec WinDev, ou créer vos propres métatypes. Pour utiliser une rubrique métatype, il suffit de cliquer sur le bouton "Métatypes" dans la description des rubriques de l’analyse.

4 Pour ajouter une rubrique créée à partir d’un métatype : 1. Cliquez sur le bouton

2. Sélectionnez "Adresse email". 3. Validez.

GAF_WebDev.book Page 85 Lundi, 15. décembre 2008 5:31 17

Importation d’un fichier XML Pour créer le fichier LIVRE, contenant les caractéristiques des livres à réserver, nous allons utiliser une autre méthode : l’import d’un fichier XML. À partir du fichier XML contenant les données, WebDev va créer la description de fichier dans l’analyse ainsi que le fichier HyperFileSQL correspondant avec les données présentes dans le fichier XML. Pour importer un fichier XML dans l’analyse : 4 1. Dans l’explorateur de fichiers de Windows, ouvrez le sous-répertoire de WebDev suivant : "\Autoformation\Exercices\Ma_bibliotheque". 2. Sélectionnez le fichier "Livres.xml". 3. Réalisez un "Drag and Drop" du fichier "Livres.xml" vers l’éditeur d’analyses de WebDev.

Partie 2 : Site avec données

Voilà, la description du fichier UTILISATEUR est terminée. Fermez la fenêtre de description des rubriques en cliquant sur le bouton vert. Sélectionnez l’option "Retourner sous l’éditeur de WebDev" et validez. Fermez ensuite la fenêtre qui s’affiche. Le fichier UTILISATEUR apparaît sous l’éditeur d’analyses.

GAF_WebDev.book Page 86 Lundi, 15. décembre 2008 5:31 17

Partie 2 : Site avec données

L’assistant d’importation de fichier se lance.

4. Nous allons convertir le contenu du fichier XML au format HyperFileSQL. Sélectionnez l’option "Convertir les données dans le format HyperFileSQL Classic ou HyperFileSQL Client/ Serveur". Passez à l’écran suivant de l’assistant. 5. WebDev sélectionne automatiquement l’accès natif à utiliser ("Accès Natif XML pour WebDev") et indique le chemin du fichier à importer. Passez à l’écran suivant de l’assistant. 6. Sélectionnez la table "Livre" à gauche et cliquez sur la flèche ">". "Livre" apparaît dans la colonne "Tables à importer". Il est possible d’effectuer un aperçu du fichier. Passez à l’écran suivant de l’assistant. 7. Validez l’assistant. L’assistant de conversion des données se lance. 8. Validez le répertoire de création des fichiers de données HyperFileSQL. Passez à l’écran suivant de l’assistant. 9. Décochez "Enregistrer les paramètres de la conversion" et validez. Le fichier apparaît dans l’analyse. Voyons la description du fichier importé : 4 1. Sélectionnez le fichier "Livre" et sélectionnez l’option "Description du fichier" du menu contextuel. 2. Ce fichier ne contient pas d’identifiant automatique : cochez l’option "Identifiant automatique". 3. Cliquez sur l’icône

pour afficher la description des rubriques du fichier.

GAF_WebDev.book Page 87 Lundi, 15. décembre 2008 5:31 17

4. Toutes les rubriques ont été importées sous forme de chaîne de 255 caractères, nous allons modifier ces informations : Rubrique Titre Editeur Auteurs Resume DateEntree

Code_Interne

Caractéristique à modifier Taille : 50 Clé unique Taille : 50 Taille : 50 Sous-type : Mémo texte Type : Date Sous type : Date (aaaammjj) Clé avec doublons Taille : 10

permettre à l’internaute d’avoir des informations supplémentaires sur le livre, nous 4 Pour allons créer une rubrique "Couverture". Cette rubrique contiendra l’image de la couverture du

Notes

livre. 1. Créez une nouvelle rubrique dans le fichier "Livre". 2. Cette rubrique a pour nom "Couverture" et pour libellé "Couverture du livre". Cette rubrique est de type "Son, Image, Binaire". 3. Cochez l’option "Gestion automatique des vignettes". La gestion des vignettes permet d’optimiser l’affichage des champs liés à la rubrique.

4. Validez la description des rubriques. 5. Validez la description du fichier.

Partie 2 : Site avec données

Nous obtenons les données suivantes :

GAF_WebDev.book Page 88 Lundi, 15. décembre 2008 5:31 17

Importation de fichiers du dictionnaire Pour simplifier la création des fichiers de l’analyse, nous avons préparé une description de fichiers que nous avons placée dans un dictionnaire. Nous allons voir comment importer rapidement ce fichier. WebDev propose un volet spécifique, le volet "Dictionnaire", afin de manipuler simplement et facilement les dictionnaires. Pour importer des éléments depuis un dictionnaire : 4 1. Affichez si nécessaire le volet "Dictionnaire" (option "Affichage .. Barre d’outils .. Autres volets .. Dictionnaire"). 2. Cliquez dans le volet et sélectionnez l’option "Ouvrir" du menu contextuel. 3. Sélectionnez le fichier "Dico_GAF" présent dans le sous-répertoire de WebDev suivant : "\Autoformation\Exercices\Ma_Bibliotheque". Le dictionnaire apparaît dans le volet. Ce dictionnaire contient le fichier "RESERVATION". 4. Effectuez un "Drag and Drop" du fichier "RESERVATION" vers l’éditeur d’analyses. 5. L’éditeur demande si un abonnement est nécessaire. Répondez "Non". 6. Validez. La description du fichier "RESERVATION" est intégrée à l’analyse. Importation directe de fichiers de données existant La dernière méthode que nous allons voir pour créer des fichiers de données est la simple importation de fichiers HyperFileSQL existants. Nous avons préparé le dernier fichier sous cette forme.

"\Autoformation\Exercices\Ma Bibliotheque". 2. Sélectionnez le fichier "THEME.fic". 3. Réalisez un "Drag and Drop" du fichier "THEME" vers l’éditeur d’analyses de WebDev. 4. L’assistant d’importation se lance. Validez les différents plans. Le fichier apparaît sous l’éditeur d’analyses. Tous les fichiers nécessaires sont maintenant présents dans l’éditeur d’analyses. Remarque : Pour manipuler les données du fichier THEME, copiez le fichier THEME.fic et le fichier THEME.ndx (présents dans le répertoire "\Autoformation\Exercices\Ma Bibliotheque") vers le répertoire EXE de votre projet. Notes

Partie 2 : Site avec données

Pour importer des fichiers de données HyperFileSQL : 4 1. Dans l’explorateur de fichiers de Windows, ouvrez le sous-répertoire de WebDev suivant :

Vous pouvez ouvrir directement le répertoire du projet en cours sous WebDev grâce à l’icône .

GAF_WebDev.book Page 89 Lundi, 15. décembre 2008 5:31 17

Création des liaisons Nous avons créé toutes les descriptions de fichier nécessaires au site de gestion de bibliothèque.

Créons tout d’abord la liaison entre le fichier "UTILISATEUR" et le fichier "RESERVATION". 4 1. Sélectionnez l’option "Insertion .. Liaison". Le curseur de la souris se transforme en crayon. 2. Cliquez sur le fichier "UTILISATEUR" puis sur le fichier "RESERVATION". 3. L’assistant de création de liaison se lance. 4. Répondez aux questions posées par l’assistant :

•Chaque utilisateur a au moins une réservation : Non

Partie 2 : Site avec données

Maintenant nous allons créer les liaisons entre les fichiers.

GAF_WebDev.book Page 90 Lundi, 15. décembre 2008 5:31 17

Notes

•Chaque utilisateur peut avoir plusieurs réservations : Oui •Chaque réservation a au moins un utilisateur : Oui •Chaque réservation peut avoir plusieurs utilisateurs : Non Vous pouvez également saisir directement les cardinalités de la liaison dans l’assistant.

5. Indiquez un libellé par exemple "Crée une réservation". 6. Passez à l’écran suivant. L’assistant propose automatiquement la clé utilisée par la liaison (IDUTILISATEUR). Affichez l’écran suivant de l’assistant. 7. L’assistant propose de créer une nouvelle clé dans le fichier "RESERVATION". Acceptez cette option en passant à l’écran suivant. 8. Validez les règles d’intégrité en passant à l’écran suivant. 9. Cliquez sur la flèche verte. La liaison est automatiquement créée dans l’éditeur d’analyses. la même manière, créez une liaison entre le fichier "THEME" et le fichier "Livre". Les carac4 De téristiques de cette liaison sont les suivantes : • Fichier source : THEME • Fichier relié : Livre • Cardinalité : (0, n) - (1,1)

Partie 2 : Site avec données

créez une liaison entre les fichiers "Livre" et "RESERVATION". Les caractéristiques de 4 Enfin, cette liaison sont les suivantes : • Fichier source : Livre • Fichier relié : RESERVATION • Cardinalité : (0, 1) - (1,1) L’analyse est alors la suivante :

GAF_WebDev.book Page 91 Lundi, 15. décembre 2008 5:31 17

Génération de l’analyse

La génération doit être effectuée à chaque fois que vous voulez que les modifications effectuées dans l’analyse soient prises en compte dans les programmes utilisant cette analyse. Si vous modifiez l’analyse plusieurs fois, sans programmer entre chaque modification, il n’est pas nécessaire de générer l’analyse à chaque modification. Générez uniquement l’analyse lorsque toutes les modifications sont faites et que vous passez à la programmation.

Pour générer l’analyse : 4 1. Sous l’éditeur d’analyses, sélectionnez l’option "Analyse .. Génération".

Notes

2. La génération de l’analyse est automatiquement effectuée. 3. L’assistant de modification automatique se lance. Qu’est-ce que la modification automatique ? Depuis le début de cette partie, nous avons modifié les descriptions des fichiers de données présents dans l’analyse (fichier Livre, fichier utilisateur, ...). Pour mettre à jour les fichiers de données du projet, WebDev lance automatiquement la procédure de modification des fichiers de données. Cette opération permet de mettre à jour les fichiers de données (fichiers d’extension ".fic") en fonction de leur description dans l’analyse.

4. Validez l’emplacement de recherche : les fichiers de données physiques sont recherchés dans le répertoire EXE de votre projet. 5. Sélectionnez tous les fichiers de données proposés (y compris le fichier THEME). Validez en passant au plan suivant. 6. Validez les différents plans jusqu’à l’exécution de la modification automatique des données.

Partie 2 : Site avec données

Attention!

Nous avons décrit tous les fichiers de données de notre application. Nous allons maintenant préparer le développement de notre site. La première étape consiste à générer l’analyse. La génération de l'analyse permet de rendre disponible aux autres modules du projet, les informations sur les fichiers de données. Ces fichiers de données pourront être manipulés dans les programmes, les éditeurs, ... Sans la génération, bien que la description du fichier de données existe, vous ne pourrez pas utiliser le fichier de données dans vos programmes. Lors de la génération de l’analyse, toutes les modifications effectuées sur l’analyse et les fichiers de données seront automatiquement propagées dans tout le projet (pages, champs reliés, états, ...).

GAF_WebDev.book Page 92 Lundi, 15. décembre 2008 5:31 17

Configuration de l’analyse pour le RAD Lors de la génération du site, de pages, d’états, le module RAD (Rapid Application Development) utilise des options spécifiées directement dans l’analyse. Il est nécessaire de consacrer un peu de temps à la configuration de ces options pour obtenir le meilleur résultat possible automatiquement. Les éléments utilisés par le RAD sont définis : • dans la description des fichiers (onglet "RAD") • dans la description des rubriques (onglet "RAD") • dans les informations partagées spécifiées pour chaque rubrique.

Partie 2 : Site avec données

Configuration du RAD dans la description de fichiers Pour configurer les options RAD des fichiers : 4 1. Sélectionnez l’option "Structures de fichiers .. Description". 2. Nous allons tout d’abord modifier le libellé des fichiers Livre et Thème, en enlevant "(Importé)" : •Sélectionnez le fichier "Livre" dans la liste de gauche et modifiez son libellé en supprimant "(importé)". •Sélectionnez le fichier "THEME" dans la liste de gauche et modifiez son libellé en supprimant "(importé)". 3. Sélectionnez à nouveau le fichier "Livre" dans le tableau de gauche et affichez l’onglet "RAD".

Les informations à configurer pour chaque fichier sont : • La clé utilisée par le RAD pour parcourir le fichier. • La rubrique à afficher pour la visualisation • Les éléments générés par le RAD pour le fichier. Le tableau ci-dessous récapitule la configuration à effectuer : Fichier Livre RESERVATION THEME UTILISATEUR

Clé utilisée IDLivre IDRESERVATION IDTHEME IDUTILISATEUR

Rubrique à visualiser Titre Intitulé NomPrénom

Elément à générer Table, Fiche, Etat Table, Fiche, Etat Table, Fiche, Etat Table, Fiche, Etat

GAF_WebDev.book Page 93 Lundi, 15. décembre 2008 5:31 17

Pour réaliser ces modifications : 4 1. Sélectionnez le fichier dans le tableau. 2. Réalisez les modifications dans l’onglet RAD. 3. Cliquez sur le bouton "Valider" (cette étape est optionnelle). 4. Passez au fichier suivant.

4 A la fin de ces modifications, validez la fenêtre de description des fichiers.

En effet, l’identifiant ne doit pas être affiché sur les pages en mode fiche et les états. Laissez tout coché pour les autres rubriques. 4. Validez la description des rubriques du fichier. Ces opérations doivent être effectuées pour : • La rubrique IDLivre du fichier Livre • La rubrique IDRESERVATION du fichier RESERVATION • La rubrique IDTHEME du fichier THEME • La rubrique IDUtilisateur du fichier UTILISATEUR Cas particuliers : IDLivre dans le fichier "RESERVATION" et IDTHEME dans le fichier "Livre" Par défaut, lorsque nous avons réalisé la liaison entre RESERVATION et LIVRE, l’identifiant du livre a été copié dans le fichier RESERVATION. Cependant, lorsque l’utilisateur va vouloir saisir une réservation, il ne va pas saisir l’identifiant du livre (qui ne lui dit rien). allons donc remplacer le champ de saisie associé à la rubrique IDLivre par une combo, 4 Nous qui listera les différents livres. 1. Ouvrez la description des rubriques du fichier RESERVATION. 2. Affichez les informations partagées de la rubrique IDLivre (bouton >> en bas de l’écran). Par défaut cette rubrique est liée à un champ de saisie. 3. Sélectionnez un champ de type "Combo". 4. Dans l’onglet "Contenu" des informations partagées, nous allons indiquer le mode de remplissage de la combo : • Source pour le remplissage : sélectionnez "Fichier", puis "Chargé en mémoire". • Fichier parcouru : Livre • Rubrique affichée : Titre

Partie 2 : Site avec données

Configuration du RAD dans la description des rubriques Pour configurer les options RAD des rubriques : 4 1. Pour chaque fichier, affichez la description des rubriques (option "Description des rubriques" du menu contextuel). 2. Affichez l’onglet "Avancé". 3. Configurez les options RAD. Pour chaque fichier, les identifiants des fichiers doivent avoir les caractéristiques suivantes :

GAF_WebDev.book Page 94 Lundi, 15. décembre 2008 5:31 17

• Rubrique mémorisée et rubrique de parcours : IDLivre 5. Validez la description du fichier. avons le même problème entre le fichier "THEME" et le fichier "Livre". Nous allons donc 4 Nous remplacer le champ de saisie associé à la rubrique IDTHEME par une combo, qui listera les différents thèmes. 1. Ouvrez la description des rubriques du fichier Livre. 2. Affichez les informations partagées de la rubrique IDTHEME (bouton >> en bas de l’écran). Par défaut cette rubrique est liée à un champ de saisie. 3. Sélectionnez un champ de type "Combo". 4. Dans l’onglet "Contenu" des informations partagées, nous allons indiquer le mode de remplissage de la combo : • Source pour le remplissage : sélectionnez "Fichier", puis "Chargé en mémoire". • Fichier parcouru : THEME • Rubrique affichée : Intitulé • Rubrique mémorisée et rubrique de parcours : IDTHEME 5. Validez la description du fichier. prendre en compte ces différentes modifications dans notre projet, nous allons à nou4 Pour veau générer l’analyse. Sélectionnez l’option "Analyse .. Génération".

Partie 2 : Site avec données

Fermez l’éditeur d’analyses. Maintenant, nous pouvons commencer à programmer.

GAF_WebDev.book Page 95 Lundi, 15. décembre 2008 5:31 17

LEÇON 2.3. LE RAD COMPLET Ce que vous allez apprendre dans cette leçon ... • Qu'est-ce le RAD ? • Génération du RAD • Test du projet

Partie 2 : Site avec données

Durée estimée : 20mn

GAF_WebDev.book Page 96 Lundi, 15. décembre 2008 5:31 17

Qu’est-ce que le RAD ? R.A.D. sont les initiales de "Rapid Application Development". Le RAD permet de construire automatiquement une application, c’est-à-dire construire toutes les pages, les états et les requêtes nécessaires. Comme nous l’avons vu précédemment, pour développer un site avec WebDev, il faut commencer par créer un projet et éventuellement une analyse. L’analyse contient la définition des structures des fichiers manipulés dans les traitements. Le module RAD de WebDev s’appuie sur cette analyse. Le module RAD est constitué d’un assistant dans lequel vous pouvez détailler les différents paramètres nécessaires au développement du projet.

Partie 2 : Site avec données

Note

Toutes les pages, les états, les requêtes et le code générés sont entièrement personnalisables. Vous avez également la possibilité de modifier les types de champs, les valeurs par défaut, ... Le RAD permet également de générer des pages de plusieurs types, c’est le RAD page. Nous allons ici découvrir comment utiliser le module RAD Projet. RID (Rapid graphical Interface Design) WebDev permet également de générer des pages contenant uniquement les champs liés aux rubriques de l’analyse. Tout le code nécessaire au fonctionnement de ces pages reste à la charge du développeur. Pour plus de détails, consultez l’aide en ligne (mot-clé : "RID").

Génération du RAD Pour lancer la génération du RAD : 4 1. Sélectionnez l’option "Atelier .. RAD Application complète". L’assistant de génération de l’application RAD se lance. 2. Sélectionnez le modèle à utiliser pour la génération du RAD : par exemple "Intranet". Passez à l’écran suivant de l’assistant.

GAF_WebDev.book Page 97 Lundi, 15. décembre 2008 5:31 17

3. Tous les fichiers de l’analyse vont être pris en compte :

Conservez les fichiers proposés. Affichez l’écran suivant. 5. Validez. Le site est généré et peut être testé.

Partie 2 : Site avec données

Affichez l’écran suivant. 4. Les points d’entrée de l’application correspondent aux entrées disponibles dans le menu.

GAF_WebDev.book Page 98 Lundi, 15. décembre 2008 5:31 17

Test du site Testons immédiatement le site généré.

4 Pour lancer le test du site :

1. Cliquez sur le bouton . Le site se lance. 2. Sélectionnez le menu "UTILISATEUR .. Afficher les UTILISATEUR". 3. La liste des utilisateurs s’affiche. Cette liste est vide. 4. Cliquez sur le bouton "Nouveau". La fiche de saisie d’un nouvel utilisateur s’affiche. 5. Indiquez : • le nom de l’utilisateur : MOULAIN Jacques • le login : MOULAINJ • le mode de passe : MJ 6. Cliquez sur le bouton "Valider". 7. L’utilisateur apparaît dans la liste. 8. Saisissez les utilisateurs suivants :

Partie 2 : Site avec données

Nom Prénom MOULAIN Françoise TESTE Florence VINI Hervé VINI Emma

Mot de passe MF TF VH VE

9. Lors de la validation du dernier enregistrement, une fenêtre spécifique apparaît :

Cette boîte de dialogue signale qu’il existe un doublon : en effet, le login (qui est une clé unique) est identique pour deux personnes. Cette boîte de dialogue permet de modifier la valeur du login : saisissez par exemple "EMMA". Cette page est une des pages de gestion automatique des erreurs HyperFileSQL, disponible en standard. Nous verrons dans la suite de ce cours comment gérer par programmation les différents types d’erreur pouvant survenir sur les bases de données. 10. Sélectionnez le menu "Livre .. Afficher les livres" 11. La liste des livres s’affiche. Cette liste contient les enregistrements présents dans le fichier importé.

GAF_WebDev.book Page 99 Lundi, 15. décembre 2008 5:31 17

Personnalisation du site généré Lors du test du site, vous avez pu observer que la phrase "<Indiquer ici le nom du site>" apparaît sur toutes les pages. Nous allons personnaliser le site en modifiant ce texte. Ne vous inquiétez pas, pas besoin de prévoir des heures et des heures pour réaliser cette opération : nous allons modifier toutes les pages du site en une seule opération, et en quelques minutes. Les différentes pages générées par le RAD utilisent un modèle de pages. Ce modèle permet de définir l’interface commune à toutes les pages. une page du site sous l’éditeur WebDev (par exemple la page PAGE_Fiche_Livre). Pour 4 Affichez afficher la page, il suffit de double-cliquer sur son nom dans l’explorateur de projet. Le libellé "<Indiquez ici le nom du site>" apparaît bien sur cette page. Nous allons le modifier. 4 1. Affichez le menu contextuel (clic droit) du libellé "<Indiquez ici le nom du site>.

5. Enregistrez vos modifications (CTRL + S ou icône ). WebDev propose de mettre à jour les pages du projet utilisant ce modèle. Cliquez sur "Oui". 6. WebDev affiche la liste des pages à mettre à jour.

Validez. 7. Fermer le modèle de pages affiché sous l’éditeur et lancez le test du site.

Partie 2 : Site avec données

2. Sélectionnez l’option "Ouvrir le modèle" du menu contextuel. 3. Une nouvelle page apparaît sous l’éditeur. Cette page contient uniquement les champs utilisés pour le modèle des pages du site. Ces champs sont en commun pour toutes les pages du site. Cette page est entourée d’un trait jaune (pour indiquer qu’il s’agit de modèle). 4. Sélectionnez le libellé "<Indiquez ici le nom du site>" et affichez la description du champ (option "Description" du menu contextuel). Remplacez le texte du libellé par "Ma Bibliothèque" et validez. Le libellé est immédiatement modifié.

GAF_WebDev.book Page 100 Lundi, 15. décembre 2008 5:31 17

100

LEÇON 2.4. PAGE DE SAISIE Ce que vous allez apprendre dans cette leçon ... • Création d’une page de saisie • Gestion de l’ajout d’un enregistrement • Gestion de la recherche puis de la modification

Partie 2 : Site avec données

Durée estimée : 50mn

GAF_WebDev.book Page 101 Lundi, 15. décembre 2008 5:31 17

101

Présentation

Création d’une page de saisie Pour créer la page de saisie sur le fichier "Livre", nous pourrions utiliser l’assistant de création de page RAD et créer une page de type "Fiche". Mais nous avons choisi de créer cette page à partir d’une page vierge : nous verrons ainsi toutes les étapes nécessaires à la programmation d’une telle page. Pour créer une page de saisie : 4 1. Créez une nouvelle page (option "Fichier .. Nouveau .. Page"). 2. Dans l’assistant de création de page, sélectionnez type de page "Vierge" avec le modèle de page "PAGEMOD_Max". 3. Validez. La nouvelle page apparaît sous l’éditeur. 4. Dans la fenêtre de description, indiquez : • le nom de la page "PAGE_Livre". • le titre et la description de la page "Gestion des livres". 5. Validez la fenêtre de description. 6. Enregistrez la page.

Partie 2 : Site avec données

Nous avons vu les différentes pages créées automatiquement par le RAD. Maintenant, nous allons créer nous-même les pages permettant de gérer l’ajout et la modification d’enregistrements. Ces manipulations vous feront découvrir plusieurs aspects de la gestion des fichiers de données et vous feront également utiliser certaines fonctionnalités bien utiles de WebDev. La page que nous allons créer va permettre de gérer la saisie, la recherche et la modification des livres. Cette page est la suivante :

GAF_WebDev.book Page 102 Lundi, 15. décembre 2008 5:31 17

102

Fermez la description. allons afficher un titre dans cette page. Par défaut, le titre est "Liste des RADFichierA(s)". 4 Nous Ce titre étant utilisé par le modèle des pages du site, nous ne pouvons pas le modifier directement. Pour modifier ce titre dans la page en cours, il suffit de surcharger ce champ dans notre page pour afficher à la place "Gestion des livres". 1. Cliquez sur le libellé "Liste des RADFichierA(s)" et affichez le menu contextuel. 2. Sélectionnez l’option "Surcharger le champ". 3. Modifiez le libellé du champ : le nouveau libellé est "Gestion des livres". Vous pouvez modifier directement ce libellé dans la page ou dans la fenêtre de description du champ.

Note

Partie 2 : Site avec données

7. Dans l’explorateur de projet, les différents fichiers décrits dans l’analyse sont listés. 8. Double-cliquez sur le fichier "Livre" : les rubriques du fichier sont listées. 9. Sélectionnez à l’aide de la souris l’ensemble des rubriques et effectuez un "Drag and Drop" (glisser/déplacer) de ces rubriques vers la page que vous venez de créer. 10. Différents champs sont automatiquement créés dans la page. Ces champs sont automatiquement liés à la rubrique dans le fichier. Pour le vérifier, il suffit d’afficher l’onglet "Liaison" de la description d’un des champs (option "Description" du menu contextuel).

Les champs appartenant à un modèle de pages et non surchargés sont identifiés par un carré jaune (affiché en haut à gauche du champ). Les champs appartenant à un modèle de pages et surchargés sont identifiés par un carré bleu (affiché en haut à gauche du champ).

4. Enregistrez la page, puis testez la page (icône

GAF_WebDev.book Page 103 Lundi, 15. décembre 2008 5:31 17

103

Gestion de l’ajout d’un enregistrement Nous allons maintenant gérer l’ajout d’un enregistrement dans notre page. En effet, la page actuellement contient des champs reliés au fichier de données, mais nous voulons maintenant pouvoir saisir des informations dans ces champs et les enregistrer dans le fichier de données "Livre". Nous allons ajouter deux boutons dans notre page : • un bouton "Valider" qui va permettre d’enregistrer les données • un bouton "Retour" pour sortir de la page sans enregistrer. Création du bouton d’ajout 4 Pour créer le bouton d’ajout : 1. Créez un nouveau bouton (icône ). 2. Ce bouton a pour libellé "Valider" et pour nom "BTN_Valider". Pour saisir le code du bouton, nous allons utiliser les briques de code : 4 1. Affichez le gestionnaire de briques de code (option "Affichage .. Barre d’outils .. Gestion-

Nous travaillons sur le fichier "Livre", sélectionnez le fichier dans la combo. 4. Validez. Le code suivant est automatiquement inséré : EcranVersFichier() HAjoute(Livre)

Détaillons ce code : • La fonction EcranVersFichier permet d’initialiser les rubriques avec les valeurs des champs liés. Il est également possible d’utiliser la fonction PageVersFichier qui est identique.

Partie 2 : Site avec données

naire de briques de code"). 2. Afficher le code du bouton "BTN_Valider" (par exemple, sélectionnez le bouton et utilisez la touche F2). 3. Dans le gestionnaire de briques de code, sélectionnez la ligne "Ajout d’un enregistrement" et faites glisser la souris vers le code de clic serveur du bouton. La fenêtre suivante s’affiche :

GAF_WebDev.book Page 104 Lundi, 15. décembre 2008 5:31 17

104

Cette fonction est donc équivalente aux lignes suivantes : Livre.Titre = SAI_Titre Livre.Editeur = SAI_Editeur Livre.Auteur = SAI_Auteur ...

Notre page utilise moins de 10 champs et déjà l’avantage se fait sentir; pensez simplement aux pages qui contiennent plusieurs dizaines de champs : 1 seule ligne de code effectue toutes les affectations ! • La fonction HAjoute ajoute l’enregistrement dans le fichier. Cette fonction prend les valeurs en mémoire et écrit le contenu des rubriques du fichier dans le fichier lui-même. Les index sont immédiatement et automatiquement mis à jour. 5. Enregistrez votre page (icône la page (icône 4 Testez Plusieurs remarques :

). Remplissez les champs et cliquez sur le bouton "Valider".

•Aucun masque n’est utilisé. Vous pouvez saisir des majuscules et des minuscules dans les différents champs. •Après l’ajout, les champs ne sont pas remis à vide. •Aucun bouton de fermeture : il faut fermer le navigateur.

Partie 2 : Site avec données

Nous allons faire les modifications nécessaires. Ajout d’un masque de saisie d’abord, le masque de saisie. Nous allons mettre un masque de saisie sur le champ 4 Tout "Titre". Nous allons sélectionner le masque "1ère lettre en majuscule" dans la description du champ.

GAF_WebDev.book Page 105 Lundi, 15. décembre 2008 5:31 17

105

Après avoir modifié le masque, le bouton de validation de la fenêtre de description change d’aspect. Un bouton "On/Off" apparaît. Si vous cliquez sur ce bouton, l’écran suivant apparaît :

Cet écran permet de gérer la modification des informations partagées dans l’analyse (les informations concernant le champ associé à la rubrique Titre). Si les informations partagées sont modifiées dans l’analyse, à la prochaine génération de l’analyse, tous les champs liés à la rubrique auront cette information également modifiée. Validez la fenêtre de description du champ.

pour sélectionner également l’option "Afficher un bouton calendrier". La saisie de la date sera ainsi plus simple. Effacement des données après l’ajout allons maintenant gérer l’effacement des données dans les champs, après l’utilisation 4 Nous du bouton "Valider". Seules deux nouvelles fonctions du WLangage vont nous permettre de réaliser cette opération sur tous les champs de la page. 1. Affichez le code du bouton "Valider" (F2 sur le bouton par exemple). 2. Complétez le code de la façon suivante : HRAZ(Livre) EcranVersFichier() HAjoute(Livre) RAZ()

La fonction Raz remet à blanc tous les champs pour la prochaine saisie. Cela permet ainsi de signaler à l’utilisateur que l'enregistrement a été ajouté. La fonction HRAZ remet à blanc toutes les variables de fichier (évite de conserver le buffer précédent en cas d’ajout partiel de rubriques dans un enregistrement). 3. Enregistrez la page.

4 Testez la page (bouton

). Remplissez les champs et cliquez sur le bouton "Valider".

Partie 2 : Site avec données

de la même façon un masque de saisie sur le champ "SAI_DateEntree". Ce masque 4 Ajoutez est de la forme "JJ/MM/AAAA". La valeur retournée est de la forme "AAAAMMJJ". Profitez-en

GAF_WebDev.book Page 106 Lundi, 15. décembre 2008 5:31 17

106

Vous pouvez désormais saisir plusieurs enregistrements à la suite. Quelques exemples : Titre Editeur Entre les murs Gallimard La régente noire Flammarion

Auteur Bégaudeau Ferrand

Date Entrée 01/09/2008 01/10/2008

Thème Roman Roman

Visualiser les enregistrements saisis Depuis le début de l’utilisation de notre page, nous avons ajouté plusieurs enregistrements. Comment voir leur contenu ? WebDev propose un outil simple permettant de voir le contenu des fichiers pendant le développement du site (lorsque par exemple, les pages de visualisation n’ont pas encore été créées). Cet outil s’appelle WDMAP. Nous allons l’utiliser pour voir le contenu du fichier Livre. Pour lancer WDMAP : 4 1. Sélectionnez l’option "Outils .. WDMAP - Visionneur de données".

Partie 2 : Site avec données

2. Sélectionnez le fichier "Livre". Le contenu du fichier s’affiche.

GAF_WebDev.book Page 107 Lundi, 15. décembre 2008 5:31 17

107

Gestion de l’upload de la couverture du livre Vous vous souvenez peut-être que dans le fichier Livre, nous avions créé une rubrique de type image pour afficher la couverture du livre. Nous allons maintenant gérer la saisie et l’affichage de cette image. Le but est que l’internaute puisse associer une image à un livre. Cette image sera uploadée sur le serveur et enregistrée dans la rubrique "Couverture" du fichier de données. Lorsque nous avons créé les champs dans notre page PAGE_Livre, le champ Image correspondant à la couverture du livre a été automatiquement créé. Nous allons maintenant créer les champs nécessaires pour définir cette couverture.

4 Pour gérer l’upload de la couverture du livre :

HRAZ(Livre) NomFic est une chaîne SI SAI_Couverture<>"" ALORS // Upload de l'image de la couverture NomFic = fExtraitChemin(... UploadNomFichier(SAI_Couverture,Faux),... fFichier+fExtension) UploadCopieFichier(SAI_Couverture,fRepDonnées(),NomFic) IMG_Couverture = ComplèteRep(fRepDonnées())+NomFic // Ajout de l’image dans le fichier de données HAttacheMémo(LIVRE,Couverture,... ComplèteRep(fRepDonnées())+NomFic) FIN EcranVersFichier() HAjoute(LIVRE) RAZ() IMG_Couverture = ""

Dans ce code : • la fonction UploadNomFichier permet de récupérer le nom du fichier à uploader. En effet, lors de l'upload, le fichier est renommé avec un nom de fichier temporaire.

Partie 2 : Site avec données

1. Créez un nouveau champ de saisie en cliquant sur la flèche à droite de l’icône . Dans la liste de champs prédéfinis qui s’affiche, sélectionnez "Upload". 2. Affichez la fenêtre de description du champ, indiquez le nom "SAI_Couverture" et le libellé "Image (Couverture)". Validez la description du champ. 3. Le champ de saisie créé sous l’éditeur est spécifique. En effet, dans le champ est inclus un bouton sans aucun libellé. Ce bouton sera remplacé automatiquement par un bouton "Parcourir" affiché par le navigateur. 4. Nous allons maintenant modifier le code du bouton "Valider" pour gérer l’upload du fichier image et l’ajout de l’image dans le fichier de données. Le code du bouton de validation devient :

GAF_WebDev.book Page 108 Lundi, 15. décembre 2008 5:31 17

108

• la fonction UploadCopieFichier permet de copier et de renommer le fichier uploadé sur le serveur. Vous pouvez par exemple copier ce fichier dans le répertoire des données ou dans un répertoire accessible par un alias. • la fonction HAttacheMémo permet de charger l'image dans la rubrique mémo du fichier HyperFileSQL LIVRE.

4 Testons les modifications réalisées dans la page. Bouton de fermeture Il ne reste plus qu’à créer un bouton permettant de fermer la page en cours et de revenir soit sur la page précédente, soit sur la page d’accueil.

4 Pour créer le bouton de fermeture :

1. Créez un nouveau bouton (icône ). 2. Ce bouton a pour libellé "Retour" et pour nom "BTN_Retour". 3. Le code serveur associé au bouton est le suivant :

Note

Partie 2 : Site avec données

// Est-ce que l'on vient d'une page ? SI PagePrécédente()<>"" ALORS PageAffiche(PagePrécédente()) // Oui, on affiche cette page SINON // Non, on retourne à la page d'accueil PageAffiche(PAGE_Accueil) FIN

WebDev permet également d’associer aux boutons des actions pré-définies. Ainsi, pour gérer un bouton de fermeture simple (sans gestion de la page précédente), il suffit de définir l’action "Afficher la page Accueil" dans l’onglet "Général" de la description du champ.

4 Enregistrez et testez la page. Gestion de la recherche puis de la modification Nous avons géré l’ajout d’enregistrements dans le fichier "Livre". C’est bien. Mais ce serait encore mieux de pouvoir rechercher et modifier un enregistrement. C’est ce que nous allons faire maintenant, sur la même page. Cette page va nous permettre de réaliser une recherche sur le titre. Nous allons mettre en place deux modes de recherche : une recherche à l’identique et une recherche générique. Ensuite, il sera possible de modifier l’enregistrement affiché. Recherche à l’identique Pour effectuer la recherche à l’identique, nous allons sélectionner le titre du livre dans une combo. Le bouton "Rechercher" permettra d’afficher la fiche du livre correspondant. Un seul livre correspond au titre sélectionné. Dans ce premier cas, le champ de recherche est une combo.

GAF_WebDev.book Page 109 Lundi, 15. décembre 2008 5:31 17

109

4 Pour créer le champ de recherche :

1. Créez un champ de type combo (icône ). 2. L’assistant de création des combos s’affiche. Nous allons créer une combo basée sur le fichier "Livre". Sélectionnez l’option "Afficher les données d’un fichier ou d’une requête". Passez à l’écran suivant de l’assistant. 3. Sélectionnez le fichier "Livre". Passez à l’écran suivant. 4. Nous allons afficher le titre du livre. Sélectionnez la rubrique "Titre". Passez à l’écran suivant. 5. La rubrique "Titre" sera également utilisée pour trier la liste. Sélectionnez la rubrique "Titre". Passez à l’écran suivant. 6. La rubrique retournée par la combo sera l’identifiant "IDLivre". C’est cette valeur qui sera recherchée dans le fichier Livre. Passez à l’écran suivant. 7. La combo ne sera liée à aucune rubrique. Passez à l’écran suivant. 8. Donnez un nom à la combo, par exemple "Combo_Titre", et comme libellé "Titre recherché". 9. Validez. Positionnez la combo dans la page (par exemple en haut à gauche).

4 Pour créer le bouton de recherche :

HLitRecherchePremier(Livre, IDLivre, Combo_Titre) SI HTrouve(Livre) ALORS FichierVersPage() FIN

Note

La fonction HLitRecherchePremier permet de réaliser une recherche à l’identique. Dans cet exemple, la recherche se fait sur le fichier Livre et sur la rubrique IDLivre. La valeur recherchée correspond au dernier paramètre de la fonction. Ici, la valeur recherchée correspond à la valeur sélectionnée dans la combo. Cette valeur est obtenue en utilisant directement le nom de la combo (Combo_Titre). La fonction HTrouve permet de tester le résultat de la recherche. Si HTrouve vaut Vrai, une valeur a été trouvée, si HTrouve vaut Faux, aucune valeur n’a été trouvée. Lorsqu’un enregistrement a été trouvé, cet enregistrement est lu : il devient l’enregistrement courant du fichier. Dans ce code, si l’enregistrement a été trouvé, il est affiché grâce à la fonction FichierVersPage. La fonction FichierVersPage effectue l’opération inverse de PageVersFichier : les données présentes dans les rubriques du fichier sont affichées dans les champs correspondants.

5. Enregistrez la page. la page. Saisissez une valeur dans la combo et cliquez sur le bouton de recherche. Le 4 Testez résultat est immédiat.

Partie 2 : Site avec données

1. Créez un bouton (icône ). 2. Positionnez le bouton à côté de la combo qui vient d’être créée. 3. Ce champ a pour nom "BTN_Identique", et pour libellé "Recherche identique". 4. Saisissez le code de clic serveur suivant :

GAF_WebDev.book Page 110 Lundi, 15. décembre 2008 5:31 17

110

Recherche générique Nous allons maintenant effectuer une recherche générique. Au lieu de rechercher exactement la valeur saisie, nous allons rechercher tous les éléments qui commencent par la valeur saisie. Pour effectuer cette recherche, nous allons créer un champ de saisie afin de saisir le nom recherché et un bouton pour lancer la recherche.

4 Pour créer le champ de recherche :

1. Créez un champ de saisie (icône ). 2. Ce champ a pour nom "SAI_Titre_recherché" et pour libellé "Titre recherché" .

4 Pour créer le bouton de recherche :

1. Créez un bouton (icône ). 2. Positionnez le bouton à côté du champ de saisie qui vient d’être créé. 3. Ce champ a pour nom "BTN_Generique", et pour libellé "Recherche générique". 4. Saisissez le code suivant :

La fonction HLitRecherche permet de réaliser une recherche générique. Dans cet exemple, la recherche se fait sur le fichier Livre et sur la rubrique "Titre". La valeur recherchée correspond à la valeur saisie dans le champ SAI_Titre_Recherché. Cette valeur est obtenue en utilisant directement le nom du champ. Note

Partie 2 : Site avec données

HLitRecherche(Livre, Titre, SAI_Titre_Recherché) SI HTrouve(Livre) ALORS RAZ() FichierVersPage() SINON Erreur("Aucun titre ne correspond") FIN

Il est possible de faire une recherche à l’identique avec la fonction HLitRecherche : il suffit d’utiliser la constante hIdentique.

5. Enregistrez la page. la page. Saisissez une valeur dans le champ de saisie (par exemple "Cours") et cliquez 4 Testez sur le bouton de recherche. Le résultat est immédiat. Cependant, si plusieurs enregistrements correspondent, seul le premier est affiché. Modification de la fiche affichée Lorsque le résultat de la recherche est affiché, il peut être intéressant de modifier les informations affichées. Modifier les valeurs des champs de saisie est simple, mais il faut ensuite les prendre en compte dans le fichier de données. Pour cela, nous allons créer un bouton de modification.

4 Pour créer le bouton de modification :

1. Créez un bouton (icône ). 2. Positionnez le bouton sous le bouton "Valider". 3. Ce champ a pour nom "BTN_Modifier", et pour libellé "Modifier".

GAF_WebDev.book Page 111 Lundi, 15. décembre 2008 5:31 17

111

4. Saisissez le code suivant : PageVersFichier() HModifie(Livre) ListeAffiche(COMBO_Titre)

Note

Dans ce code, la fonction HModifie permet de modifier l’enregistrement en cours avec les données présentes dans l’écran. La fonction ListeAffiche permet de mettre à jour la combo de recherche (par exemple en cas de modification du nom). Lors de la modification d’un enregistrement, des erreurs d’intégrité, de doublons, ... peuvent survenir. Par défaut, le mécanisme de la gestion automatique des erreurs est activé (comme nous l’avons déjà vu lors de l’ajout).

Remarque : La modification de l’image de couverture n’est pas prise en compte. Pour gérer ce cas, il est nécessaire de reprendre le code de gestion de l’upload (voir paragraphe “Gestion de l’upload de la couverture du livre”, page 107). 5. Enregistrez et testez votre page.

quatre boutons qui ont pour nom par exemple "BTN_PREMIER", "BTN_PRECEDENT", 4 Créez "BTN_SUIVANT", et "BTN_DERNIER". Le code de ces boutons sera : //Bouton btn_premier : appeler le premier HLitPremier(Livre) SI HEnDehors(Livre) = Vrai ALORS Info("Aucune fiche à visualiser") SINON FichierVersPage() FIN //Bouton btn_précédent : appeler le précédent HLitPrécédent(Livre) SI HEnDehors(Livre) = Vrai ALORS Info("Début du fichier atteint") SINON FichierVersPage() FIN //bouton btn_Suivant : appeler le suivant HLitSuivant(Livre) SI HEnDehors(Livre) = Vrai ALORS Info("Fin du fichier atteinte") SINON FichierVersPage() FIN

Partie 2 : Site avec données

Parcours des fiches Nous allons maintenant ajouter des boutons pour parcourir les différents enregistrements.

GAF_WebDev.book Page 112 Lundi, 15. décembre 2008 5:31 17

112

//Bouton btn_dernier : appeler le dernier HLitDernier(Livre) SI HEnDehors(Livre) = Vrai ALORS Info("Aucune fiche à visualiser") SINON FichierVersPage() FIN

La fonction HLitPremier permet de lire le premier enregistrement du fichier de données, selon la clé utilisée pour la dernière recherche. Ici, nous lisons le fichier "Livre". La fonction HLitDernier est basée sur le même principe, cette fonction va lire l'enregistrement qui a la valeur de clé la plus grande. La fonction HLitSuivant va lire l'enregistrement qui a la valeur de clé immédiatement supérieure à celle de l'enregistrement en cours. La fonction HLitPrécédent va lire l'enregistrement qui a la valeur de clé immédiatement inférieure à celle de l'enregistrement en cours. Dans tous les cas : • la fonction HEnDehors permet de savoir si le fichier est vide. • la fonction FichierVersPage permet d’afficher l’enregistrement sur la page.

Partie 2 : Site avec données

4 Enregistrez la page et testez-la. Parcourez le fichier en cliquant sur chacun des boutons.

GAF_WebDev.book Page 113 Lundi, 15. décembre 2008 5:31 17

113

LEÇON 2.5. RECHERCHE MULTI-CRITÈRES Ce que vous allez apprendre dans cette leçon ... • Création d’une requête paramétrée • Création d’une page avec une table basée sur une requête • Gestion de la recherche multicritère

Partie 2 : Site avec données

Durée estimée : 20mn

GAF_WebDev.book Page 114 Lundi, 15. décembre 2008 5:31 17

114

Présentation

Note

Partie 2 : Site avec données

Dans cette leçon, nous allons apprendre à manipuler les tables. Dans notre site exemple, nous allons créer une page listant les livres selon les critères définis par l’internaute. En effet, nous avons déjà réalisé une recherche sur le titre d’un livre, mais bien souvent, seul le titre ne suffit pas : le nom de l’auteur ou l’éditeur peuvent également être pris en compte. La table listant le résultat de la recherche va être basée sur une requête que nous allons créer. La requête permet de sélectionner les livres selon les critères définis par l’utilisateur. La page est la suivante :

Cette leçon "survole" la création de requête. Une partie entière de ce cours d’auto-formation est consacrée à la gestion des requêtes (“Créez votre 1ère requête”, page 273).

Création d’une requête paramétrée Pour créer une requête, nous allons utiliser l’éditeur de requêtes. 4 1. Sélectionnez l’option "Fichier .. Nouveau .. Requête". L’assistant de création de requête se lance. 2. Sélectionnez l’option "Sélectionner (SELECT)". En effet, la requête que nous allons créer va nous permettre de sélectionner des enregistrements. Passez à l’écran suivant. 3. La fenêtre de description de la requête apparaît. Nous allons construire la requête en sélectionnant les éléments que nous voulons dans le résultat. 4. Double-cliquez sur les rubriques présentes dans l’analyse à gauche de la fenêtre de description. Les rubriques prises en compte apparaissent alors au centre de l’écran.

GAF_WebDev.book Page 115 Lundi, 15. décembre 2008 5:31 17

115

5. Nous allons trier les données par titre. Sélectionnez la rubrique "Livre.Titre", puis cliquez sur le bouton "Trier" et sélectionnez l’option "Trier sur la rubrique sélectionnée". Indiquez un tri croissant sur la rubrique et validez. 6. Nous allons maintenant indiquer que les livres recherchés par la requête doivent correspondre à des éléments saisis par l’internaute. En effet, une condition peut être saisie pour : • le titre • l’éditeur • les auteurs • le résumé. • Commençons par le titre. Nous allons maintenant indiquer que le titre contient le texte saisi par l’internaute. Pour cela, sélectionnez la rubrique "Livre.Titre", puis cliquez sur le bouton "Condition de sélection" et sélectionnez l’option "Nouvelle condition". Livre.Titre a pour condition de sélection "contient". La rubrique Livre.Titre doit contenir un paramètre. Ce paramètre a pour nom "Param_Titre".

Partie 2 : Site avec données

Nous voulons afficher : • l’identifiant du livre (rubrique IDLivre du fichier Livre) • le titre du livre (rubrique Titre du fichier Livre) • l’éditeur du livre (rubrique Editeur du fichier Livre) • les auteurs du livre (rubrique Auteurs du fichier Livre) • le résumé du livre (rubrique Resume du fichier Livre) La fenêtre de description de la requête est la suivante :

GAF_WebDev.book Page 116 Lundi, 15. décembre 2008 5:31 17

Partie 2 : Site avec données

116

7. Répétez cette opération pour les rubriques suivantes : • Livre.Editeur a pour condition de sélection "contient" le paramètre "Param_Editeur" • Livre.Auteurs a pour condition de sélection "contient" le paramètre "Param_Auteurs" • Livre.Resume a pour condition de sélection "contient" le paramètre "Param_Resume" 8. Notre requête est terminée. Donnez un nom à la requête (par exemple REQ_Recherche_Livre en haut à gauche de l’écran). Validez la fenêtre de description de la requête. 9. Enregistrez la requête. 10. Nous allons tester la requête : cliquez sur

. La fenêtre qui s’affiche demande les para-

mètres de la requête. Saisissez les informations correspondant aux livres saisis lors du test. Le résultat s’affiche automatiquement. Nous allons maintenant créer la page contenant la table associée à cette requête.

Création d’une page avec une table basée sur la requête La page que nous allons créer va permettre à l’utilisateur de saisir les différentes informations permettant de rechercher les livres voulus. Pour créer la page : 4 1. Créez une nouvelle page vierge (option "Fichier .. Nouveau .. Page"). 2. Dans l’assistant de création de page, sélectionnez type de page "Vierge" avec le modèle de page "PAGEMOD_Max". 3. Validez. La nouvelle page apparaît sous l’éditeur. 4. Donnez un nom (par exemple : PAGE_Recherche) et un titre, une description à votre page (par exemple : "Recherche multi-critères de livres"). 5. Enregistrez la page.

GAF_WebDev.book Page 117 Lundi, 15. décembre 2008 5:31 17

117

allons afficher un titre dans cette page. Par défaut, le titre est celui du modèle de 4 Nous pages : "Liste des RADFichierA(s)". Pour modifier ce titre dans la page en cours, il suffit de surcharger ce champ dans notre page pour afficher à la place "Recherche des livres". 1. Cliquez sur le libellé "Liste des RADFichierA(s)" et affichez le menu contextuel. 2. Sélectionnez l’option "Surcharger le champ". 3. Modifiez le libellé du champ : le nouveau libellé est "Recherche des livres". Vous pouvez modifier directement ce libellé dans la page ou dans la fenêtre de description du champ. 4. Enregistrez la page.

1. Créez un champ table (icône ). L’assistant de création de table se lance. 2. Nous allons créer une table basée sur la requête que nous venons de créer. Sélectionnez l’option "Afficher des données d’un fichier ou d’une requête existante". Passez à l’écran suivant de l’assistant. 3. Sélectionnez la requête qui sera la source de données de la table : "REQ_Recherche_Livre". Passez à l’écran suivant de l’assistant. 4. Sélectionnez toutes les rubriques proposées. Passez à l’écran suivant de l’assistant. 5. Sélectionnez la clé de parcours "Titre". Passez à l’écran suivant. 6. Saisissez les différents paramètres de la table : gardez les options proposées par défaut. Passez à l’écran suivant. 7. Conservez le mode de parcours proposé. Passez à l’écran suivant de l’assistant. 8. Donnez un nom et un titre à la table (par exemple "TABLE_RechercheLivre" et "Livres recherchés"). Validez. 9. La table est automatiquement créée. Vous pouvez la redimensionner. 10. Enregistrez la page. créer les champs permettant de saisir les différentes informations recherchées, nous 4 Pour allons simplement créer les champs depuis la description des rubriques correspondantes dans l’analyse, puis enlever le lien des champs au fichier. 1. Dans l’explorateur de projet, l’analyse associée au projet est affichée. Les différents fichiers décrits dans l’analyse apparaissent dans le volet. 2. Double-cliquez sur le fichier "Livre" : les rubriques du fichier sont listées. 3. Sélectionnez à l’aide de la souris les rubriques suivantes : • Titre • Editeur • Auteurs • Resume 4. Effectuez un "Drag and Drop" (glisser/déplacer) de ces rubriques vers la page que vous venez de créer. 5. Différents champs sont automatiquement créés dans la page. Ces champs sont automatiquement liés à la rubrique dans le fichier. Nous allons supprimer cette liaison. En effet, cette liaison est inutile car ces champs permettent uniquement de saisir les critères de recherche. 6. Pour tous les champs de saisie créés : • Affichez l’onglet "Liaison" de la description du champ (option "Description" du menu contextuel). • Sélectionnez l’option "Aucun" dans la rubrique reliée.

Partie 2 : Site avec données

4 Pour créer le champ Table :

GAF_WebDev.book Page 118 Lundi, 15. décembre 2008 5:31 17

118

• Validez. allons maintenant saisir le code qui va permettre d’initialiser la table. Ce code va être 4 Nous saisi dans un bouton spécifique. 1. Créez un nouveau bouton. Ce bouton a pour nom "BTN_Recherche" et pour libellé "Recherche". 2. Affichez le code du bouton (par exemple avec l’option "Code" du menu contextuel du bouton). 3. Saisissez le code suivant dans le code de clic serveur du bouton : REQ_Recherche_Livre.Param_auteurs = SAI_Auteurs REQ_Recherche_Livre.Param_editeur = SAI_Editeur REQ_Recherche_Livre.Param_resume = SAI_Resume REQ_Recherche_Livre.param_titre = SAI_Titre HExécuteRequête(REQ_Recherche_Livre) TableAffiche(TABLE_Recherche_Livre)

Ce code permet d’initialiser les paramètres de la requête REQ_Recherche_Livre avec les valeurs saisies dans les champs de la page. La requête est ensuite exécutée (fonction HExécuteRequête). La table est ensuite affichée.

Partie 2 : Site avec données

4 Il ne nous reste plus qu’à enregistrer et tester la page.

GAF_WebDev.book Page 119 Lundi, 15. décembre 2008 5:31 17

119

LEÇON 2.6. IMPRESSION DE DONNÉES Ce que vous allez apprendre dans cette leçon ... • Création d’un état • Impression d’un état depuis une page Web

Partie 2 : Site avec données

Durée estimée : 20mn

GAF_WebDev.book Page 120 Lundi, 15. décembre 2008 5:31 17

120

Présentation

Note

Dans cette leçon, nous allons nous arrêter sur l’impression de données grâce aux états. Dans la leçon précédente, nous avons créé une page permettant de sélectionner les enregistrements d’une recherche multi-critères. Dans cette leçon, nous allons simplement compléter cette page, afin d’imprimer le résultat affiché dans la table. L’état que nous allons créer est relativement simple : nous voulons imprimer la liste des livres affichée dans la page. La page étant déjà créée, nous allons simplement créer l’état correspondant, puis mettre en place le mécanisme d’impression. Cette leçon "survole" la création d’un état. Une partie entière de ce cours d’autoformation est consacrée à la gestion des états (“Votre 1er état”, page 299).

Création d’un état Nous allons créer l’état qui affichera la liste des livres affichés dans la table de la page "PAGE_Recherche".

Partie 2 : Site avec données

Pour créer un état : 4 1. Sélectionnez l’option "Fichier .. Nouveau .. Etat". L’assistant de création d’un état se lance automatiquement. 2. Sélectionnez un état de type "Tableau". Passez à l’écran suivant de l’assistant. 3. L’état va être basé sur directement sur le champ Table présent dans la page PAGE_Recherche. Sélectionnez l’option "D’un champ table". Passez à l’écran suivant de l’assistant. 4. Sélectionnez la page "PAGE_Recherche". Passez à l’écran suivant de l’assistant. 5. Sélectionnez les rubriques affichées dans l’état. Décochez l’identifiant du livre. Passez à l’écran suivant. 6. Conservez le format du papier proposé. Passez à l’écran suivant. 7. Choisissez un gabarit pour votre état (Max par exemple). Passez à l’écran suivant. 8. Donnez un nom et un libellé à l’état (par exemple ETAT_LivresRecherche, et "Liste des livres recherchés"). 9. Validez. Si nécessaire utilisez le mode paysage pour afficher la totalité du tableau.

GAF_WebDev.book Page 121 Lundi, 15. décembre 2008 5:31 17

121

10. L’état est automatiquement créé et apparaît sous l’éditeur.

Notre état est terminé, mais comment le tester ? Cet état étant basé sur un champ présent dans une page, il n’est pas possible de le tester directement. Pour pouvoir tester l’état, il faut créer dans la page "PAGE_Recherche", un bouton qui va nous permettre d’imprimer l’état. C’est ce que nous allons faire.

Lancement de l’impression de l’état En Web, les états sont très rarement imprimés directement sur une imprimante. En effet, l’imprimante utilisée serait celle du serveur et non de l’internaute. Pour contourner cette contrainte, l’impression proposée aux internautes consiste donc dans l’une des solutions suivantes : • impression de l’état dans une page HTML que l’internaute pourra imprimer sur son imprimante. • impression de l’état dans un fichier PDF que l’internaute pourra imprimer sur son imprimante. Une seconde contrainte apparaît : le fichier correspondant à l’état est créé sur le serveur. Si plusieurs internautes créent le même état au même moment, les données ne doivent pas s’écraser. Il est donc conseillé de donner un nom unique à l’état généré, puis de le supprimer du serveur après son affichage sur le navigateur. Dans notre exemple, nous allons imprimer notre état dans un fichier PDF. Pour proposer l’impression des livres contenus dans la table : 4 1. Ouvrez la page "PAGE_Recherche" sous l’éditeur si ce n’est pas déjà fait. 2. Créez un bouton dans la page "PAGE_Recherche" (icône ). 3. Ce bouton a pour nom "BTN_Imprime" et pour libellé "Imprime".

Partie 2 : Site avec données

11. Enregistrez l’état.

GAF_WebDev.book Page 122 Lundi, 15. décembre 2008 5:31 17

122

4. Ce bouton contient le code de clic serveur suivant : // Définition du nom du fichier NomPDF est une chaîne NomPDF = ComplèteRep(fRepDonnées())+"Livres_recherches_"+... DonneIdentifiant()+".PDF" // Impression iDestination(iPDF,NomPDF) iImprimeEtat(ETAT_LivresRecherche) // Affichage du PDF FichierAffiche(NomPDF,"application/PDF") // Suppression du fichier fSupprime(NomPDF)

Partie 2 : Site avec données

Etudions rapidement ce code : - le nom du fichier unique est défini à l’aide de la fonction DonneIdentifiant. Cette fonction permet d’obtenir un identifiant unique. - la fonction iDestination permet de définir que l’état va être imprimé dans un fichier PDF et la fonction iImprimeEtat lance l’impression de l’état. - la fonction FichierAffiche permet d’afficher le fichier PDF généré dans le navigateur. - la fonction fSupprime permet de supprimer le fichier PDF. 5. Enregistrez le code et testez la page. L’état s’affiche avec le contenu des éléments présents dans la table.

GAF_WebDev.book Page 123 Lundi, 15. décembre 2008 5:31 17

123

LEÇON 2.7. LE GROUPWARE UTILISATEUR Ce que vous allez apprendre dans cette leçon ... • Qu'est-ce le groupware utilisateur ? • Intégrer le groupware utilisateur • Configurer le groupware utilisateur • Tester le groupware utilisateur

Partie 2 : Site avec données

Durée estimée : 10mn

GAF_WebDev.book Page 124 Lundi, 15. décembre 2008 5:31 17

124

Présentation Un site peut être utilisé par différents intervenants, ayant tous des profils différents. Il est souvent nécessaire de prévoir des niveaux d’accès selon les fonctions de l’internaute. Prenons un exemple simple : lors de la mise en place d’un site de vente, le site propose les fonctionnalités suivantes : • Consultation du tarif • Modification du tarif • Saisie des commandes • Gestion des clients Selon l’internaute, les accès possibles sont différents. Quelques exemples : • les internautes client peuvent consulter le tarif et créer des commandes • les commerciaux peuvent consulter le tarif et établir les commandes, gérer de nouveaux clients. • les directeurs commerciaux ont accès à toutes les options. WebDev permet de gérer ces différents niveaux d’accès en quelques clics dans vos sites grâce au groupware utilisateur. Nous allons intégrer le groupware utilisateur dans notre site "Ma bibliotheque" et le configurer.

Partie 2 : Site avec données

Intégrer le groupware utilisateur Pour intégrer le groupware utilisateur dans le projet "Ma bibliotheque" : 4 1. Sélectionnez l’option de menu "Atelier .. Paramétrer le groupware utilisateur". La fenêtre de paramétrage du groupware utilisateur s’affiche.

GAF_WebDev.book Page 125 Lundi, 15. décembre 2008 5:31 17

125

Note

2. Cochez l’option "Activer la gestion du groupware utilisateur". 3. Conservez les options par défaut de l’onglet "Général" : • Intégration par défaut : la page de login est automatiquement intégrée à l’application. • Lancement automatique : le groupware utilisateur est lancé dès le démarrage du site. L’intégration personnalisée permet de personnaliser les pages et le code du groupware utilisateur. Cette option est destinée aux développeurs voulant par exemple traduire les pages du groupware utilisateur, ou les personnaliser. Si le client final utilise un annuaire LDAP, il est possible de l’utiliser pour authentifier les utilisateurs. Lors de l’installation du site, l’utilisateur pourra saisir les paramètres de son annuaire LDAP.

4. Sélectionnez l’onglet "Fichiers". Cet onglet permet de définir le format et l’emplacement des fichiers de données du groupware utilisateur. Dans notre cas, nous utiliserons des fichiers HyperFileSQL Classic, dans l’emplacement spécifié par défaut. 5. Sélectionnez l’option "Activer l’historique des connexions". Cette option permet au superviseur de savoir qui s’est connecté, quand et à quelle heure. 6. Validez. Le groupware utilisateur est intégré dans l’application.

4 Nous allons tout de suite tester notre site :

). Une page de login apparaît.

Par défaut, un seul utilisateur existe, le superviseur. Pour se connecter en tant que superviseur utilisez : • le nom : SUPERVISEUR • le mot de passe : SUPERVISEUR

2. Connectez-vous en tant que superviseur. 3. Un nouveau menu apparaît, permettant soit de se connecter au site, soit de configurer le site. 4. Choisissez l’option "Configurer". Nous allons configurer le groupware utilisateur.

Partie 2 : Site avec données

Note

1. Lancez le test du projet (

GAF_WebDev.book Page 126 Lundi, 15. décembre 2008 5:31 17

126

Configurer le groupware utilisateur

Note

La configuration du groupware utilisateur consiste à définir les différents utilisateurs du site (ou de l’application Intranet) et leurs droits sur les différentes pages et champs du site. La configuration des utilisateurs peut être réalisée : • lors du développement du site. Les fichiers nécessaires (des utilisateurs et de leurs droits) pourront être installés avec le site. • lorsque le site est installé, par l’administrateur.

Partie 2 : Site avec données

4 Pour configurer le groupware utilisateur :

1. Créez les différents utilisateurs qui auront accès à l’application (lien "Nouvel utilisateur"). Par défaut, seul le superviseur existe. Créez le nouvel utilisateur TEST. Son mot de passe est "test". 2. Associez si nécessaire les utilisateurs à un groupe. Le lien "Nouveau groupe" permet de créer des groupes. 3. Paramétrez les droits des utilisateurs grâce au bouton "Modifier les droits". La page qui s’affiche permet de sélectionner chaque page du site. Pour chaque élément de la page, il est possible de dire si le champ aura le comportement du site (défaut) ou sera inactif, invisible ou grisé. 4. Quittez le test. 5. Dans la suite de ce cours, nous n’utiliserons plus le groupware utilisateur, nous allons donc le débrancher : sélectionnez l’option "Atelier .. Paramétrer le groupware utilisateur", puis décochez l’option "Activer la gestion du groupware utilisateur".

GAF_WebDev.book Page 127 Lundi, 15. décembre 2008 5:31 17

127

LEÇON 2.8. LE TABLEAU DE BORD Ce que vous allez apprendre dans cette leçon ... • Qu’est-ce que le tableau de bord ? • Tests automatiques

Partie 2 : Site avec données

Durée estimée : 10mn

GAF_WebDev.book Page 128 Lundi, 15. décembre 2008 5:31 17

128

Présentation Le tableau de bord du projet est un élément indispensable à la gestion de projets WebDev. Le tableau de bord permet d’avoir une vision globale et synthétique de l’état d’avancement d’un projet. Le tableau de bord est constitué de jauges, de voyants, de compteurs permettant de voir d’un seul coup d’œil l’état d’un projet. Dans cette partie, nous nous limiterons à la gestion des tests automatiques. Le tableau de bord sera abordé plus en détail dans le chapitre “Tableau de bord”, page 365.

4 Pour afficher le tableau de bord du projet (si ce n’est pas déjà fait), cliquez sur l’icône

Tests automatiques Une des fonctionnalités intéressante du tableau de bord est de renseigner sur les tests qui ont été réalisés sur le projet. Nous avons déjà fait de nombreux tests d’utilisation, au fur et à mesure de la conception de notre projet. Cependant le voyant Test est encore rouge!

Partie 2 : Site avec données

4 Cliquez sur le voyant test. La fenêtre de taux de validation de l’application apparaît.

Cette fenêtre recense tous les tests qui ont été effectués sur les procédures et les classes du projet. La plupart de ces tests sont des tests automatiques. Les tests automatiques sont une catégorie de tests spécifiques. Les tests automatiques permettent d’automatiser certaines manipulations de vos procédures globales. Ces tests sont enregistrés sous forme de scénarios WLangage, facilement modifiables sous l’éditeur de code. Une fois

GAF_WebDev.book Page 129 Lundi, 15. décembre 2008 5:31 17

129

enregistré, le test automatique peut être réexécuté autant de fois que vous voulez, pour tester par exemple l’impact d’une modification sur une procédure, une classe, ...

Note

Faisons immédiatement un essai ! Nous allons créer une procédure globale dans notre projet puis nous ferons un test automatique sur cette procédure. En WebDev, les tests automatiques peuvent être réalisés sur des procédures ou des classes.

La procédure globale que nous allons créer va permettre de vérifier le code interne saisi pour chaque enregistrement du fichier "Livre". Ce code interne doit être composé de 2 lettres, un tiret et de 3 chiffres. Pour créer une procédure globale : 4 1. Dans l’explorateur, sélectionnez "Procédures .. Procédures globales de Ma_Bibliotheque".

PROCEDURE VérifieCodeInterne(CodeInterne) SI VérifieExpressionRégulière(CodeInterne,... "[A-Z]{2}[-][0-9]{3}") = Vrai ALORS RENVOYER Vrai SINON RENVOYER Faux FIN

Note

Détaillons ce code pour comprendre son fonctionnement : •La procédure reçoit un paramètre CodeInterne. •La fonction VérifieExpressionRégulière permet de vérifier que le code interne correspond à un ensemble de sous-chaînes d’un format spécifique. Dans notre cas, [A-Z]{2} permet de spécifier que le code interne doit commencer par 2 lettres en majuscules. [-] permet de définir que le caractère "-" doit être utilisé après les 2 lettres, [0-9]{3} indique que 3 chiffres doivent être utilisés ensuite. La syntaxe de la fonction VérifieExpressionRégulière peut sembler difficile à construire. Pour vous aider, WebDev propose un assistant pour construire le code correspondant à votre cas. Pour lancer l’assistant de code, saisissez dans l’éditeur de code "VérifieExpressionRégulière(" et cliquez sur l’option "Assistant de la fonction VérifieExpressionRégulière" qui apparaît dans une combo. De nombreuses fonctions WLangage disposent également d’un assistant.

•Si la fonction VérifieExpressionRégulière est à Vrai, le code interne sera validé : la procédure renvoie Vrai. Dans le cas contraire, la procédure renvoie Faux.

Partie 2 : Site avec données

2. Dans le menu contextuel, sélectionnez l’option "Nouvelle procédure globale". Une procédure globale nommée "Nouvelle_Procédure" apparaît immédiatement sous l’éditeur de code. 3. Dans l’éditeur de code, remplacez "PROCEDURE Nouvelle_Procédure()" par "PROCEDURE VérifieCodeInterne(CodeInterne)". 4. Enregistrez (par exemple en utilisant les touches CTRL + S). L’explorateur est automatiquement mis à jour. 5. Saisissez le code suivant :

GAF_WebDev.book Page 130 Lundi, 15. décembre 2008 5:31 17

130

6. Enregistrez le code de la procédure. Maintenant créons un test sur cette procédure. Pour créer un test automatique sur une procédure : 4 1. Dans l’explorateur, sélectionnez la procédure que nous venons de créer VérifieCodeInterne.

Partie 2 : Site avec données

2. Affichez le menu contextuel et sélectionnez l’option "Créer un test unitaire". 3. L’éditeur de tests automatiques apparaît.

4. Dans ce tableau, nous trouvons trois colonnes : • Itération qui correspond à l’itération dans le test. En effet, nous allons utiliser un jeu de tests pour tester notre procédure. Chaque itération correspondra à un test. • CodeInterne qui correspond à la valeur du paramètre CodeInterne de notre procédure. Il faut saisir ici la valeur à tester. • Contrôleur1 qui correspond à la valeur attendue pour le résultat du test (dans notre cas, ce sera Vrai ou Faux). 5. Nous allons saisir différentes valeurs pour tester automatiquement notre procédure. Le bouton "+" permet d’ajouter une nouvelle itération. Saisissez les itérations suivantes : Itération 1 2 3 4 5

CodeInterne AA-352 BBB-456 CC_333 DD-36 ee-360

Contrôleur1 Vrai Faux Faux Vrai Faux

Vous vous êtes peut être rendu compte en saisissant ces valeurs que la ligne 4 est fausse. 6. Lançons maintenant le test de notre procédure. Il suffit d’utiliser l’icône

. L’éditeur se

minimise et le test est exécuté. Le résultat est affiché dans l’onglet "Résultats". Dans cet onglet, un message nous informe d’un problème survenu sur l’itération 4.

GAF_WebDev.book Page 131 Lundi, 15. décembre 2008 5:31 17

131

7. Nous allons modifier l’itération 4 : cliquez sur l’onglet "Données de tests" et modifier l’itération 4 : le contrôleur doit être égal à Faux. 8. Relancez le test pour vérifier que tout est correct. Le test disponible. Maintenant, le test pourra être lancé à tout moment. 9. Fermez l’éditeur de tests et enregistrez le test si nécessaire.

Partie 2 : Site avec données

Vous avez manipulé un exemple simple de création de test unitaire (appelé également test automatique) sous WebDev. Pour plus de détails sur les tests automatiques, nous vous conseillons de consulter l’aide en ligne (mot-clé : "Test automatique").

GAF_WebDev.book Page 132 Lundi, 15. décembre 2008 5:31 17

132

LEÇON 2.9. RÉFÉRENCEMENT D’UN SITE Ce que vous allez apprendre dans cette leçon ... • Comment optimiser le référencement d’un site ?

Partie 2 : Site avec données

Durée estimée : 20mn

GAF_WebDev.book Page 133 Lundi, 15. décembre 2008 5:31 17

133

Présentation Pour qu’un site soit visité, les internautes doivent tout d’abord le trouver. La façon la plus simple de trouver un site est d’utiliser un moteur de recherche. L’internaute n’a qu’à saisir des mots-clés et le moteur de recherche lui propose tous les sites correspondant à ses critères. Il est donc nécessaire de référencer votre site auprès de moteurs de recherche. Pour vous aider, WebDev propose : • un référencement de chaque page statique et AWP : pour chaque page il est possible de définir une description et un ensemble de mots-clés. Ces mots-clés permettront aux internautes d'accéder directement à la page. Il est également possible de ne pas référencer une page. • un assistant d'aide au référencement, indiquant pour chaque page les améliorations pouvant être effectuées pour optimiser le référencement. • la possibilité d'intégrer ou d'utiliser une page spécifique en tant que page d'accueil. Cette solution permet par exemple de référencer les pages dynamiques, en associant des mots-clés à la page d'accueil. Cette page d'accueil contient tous les mots-clés qui permettront aux internautes de trouver votre site. Notre exemple étant un site dynamique n’utilisant pas de pages AWP, nous allons créer une page d’accueil pour permettre son référencement.

La première page d’un site correspond à la page Index.htm ou Defaut.htm. Cette page est la première page du site sur laquelle arrivent les internautes en saisissant l’adresse du site. De plus, cette page peut permettre de référencer le site auprès des différents moteurs de recherche. Cette page d’accueil peut être créée : • lors de la création du projet. • à tout moment pendant le développement de votre site. Cette page peut correspondre à : • Une page quelconque de votre site. • Une page spécifique, générée par WebDev. Cette page sera ensuite entièrement modifiable. Vous allez maintenant créer cette page d’accueil. Pour créer la page d’accueil dans le projet "Ma_Bibliotheque" : 4 1. Dans l’éditeur de WebDev, sélectionnez l’option "Fichier .. Nouveau .. Page". 2. Dans l’onglet "Vierge/Modèles", sélectionnez "Accueil" et validez. 3. Sélectionnez la page d’accueil de votre site. Sélectionnez une des pages d’accueil prédéfinies (par exemple "Classic animé"). Validez. 4. La page d’accueil vient d’être ajoutée dans votre projet. Cette page a pour nom "Accueil". Nous allons modifier la page d’accueil afin de lancer la première page de notre site. 4 1. Ouvrez la page "Accueil" (par exemple depuis le volet "Explorateur"). 2. Supprimez les deux drapeaux (cliquez sur chacun des drapeaux puis utilisez la touche [SUPPR] du clavier). 3. Cette page contient le lien "Entrer". Affichez la fenêtre de description du lien.

Partie 2 : Site avec données

Ajout d’une page d’accueil

GAF_WebDev.book Page 134 Lundi, 15. décembre 2008 5:31 17

134

4. Modifiez les informations ce champ. Changer le libellé et saisissez "Venez réserver votre prochain livre". Dans la combo "Action", vous pouvez observer que le lien affichera la première page dynamique du projet. C’est bien ce que nous voulons. 5. Validez la fenêtre de description du lien, et redimensionnez le champ. 6. Testez le lancement du site en utilisant la page d’accueil. Pour cela, utilisez l’icône

Partie 2 : Site avec données

Maintenant nous allons voir comment nous pouvons optimiser le référencement de cette page d’accueil. Nous allons pour cela lancer l’assistant d’optimisation du référencement. 1. Sélectionnez l’option "Page .. Optimiser le référencement de la page". 2. L’assistant d’optimisation nous fournit le résultat suivant :

Nous allons modifier la page d’accueil en conséquence. 1. Ouvrez sous l’éditeur la page "Accueil". 2. Créez un libellé contenant par exemple le texte suivant : "Le site Ma_Bibliotheque permet de réserver directement des livres en ligne. Une bibliothèque de plus de 5000 livres est disponible." 3. Affichez la description de la page. 4. Dans l’onglet "Général", saisissez une description et un titre (par exemple : "Bienvenue sur le site Ma_Bibliotheque"). 5. Dans l’onglet "Détail", cliquez sur "Editer les expressions et les mots-clés". 6. Dans la fenêtre qui s’affiche, saisissez la description dans l’onglet "Description" (par exemple : "Bienvenue sur le site Ma_Bibliotheque") et les mots-clés dans l’onglet "Mots-clés" (par exemple : Bibliothèque, Livre, Réserver).

GAF_WebDev.book Page 135 Lundi, 15. décembre 2008 5:31 17

135

Note

7. Validez la fenêtre de référencement. Dans le cas d’un site statique, PHP ou AWP, il est possible de générer un fichier "Sitemap". Ce fichier permet de mieux analyser le contenu des sites par le moteur de recherche Google.

8. Dans l’onglet "Langue", supprimez la langue anglaise, notre site étant disponible uniquement en Français (cliquez sur "Synchroniser avec le projet"). 9. Validez la fenêtre de description.

Partie 2 : Site avec données

Le site "Ma_Bibliotheque" est maintenant prêt à être déployé. Ce déploiement sera étudié dans la partie “Déploiement d’un site dynamique”, page 445.

GAF_WebDev.book Page 136 Lundi, 15. décembre 2008 5:31 17

Partie 2 : Site avec données

136

GAF_WebDev.book Page 137 Lundi, 15. dĂŠcembre 2008 5:31 17

PARTIE 3 Pages et champs

GAF_WebDev.book Page 138 Lundi, 15. dĂŠcembre 2008 5:31 17

GAF_WebDev.book Page 139 Lundi, 15. décembre 2008 5:31 17

139

LEÇON 3.1. LES ÉDITEURS Ce que vous allez apprendre dans cette leçon ... • Les éditeurs • Les volets • Les raccourcis • Les configurations d’environnement • Le menu personnalisé • Personnalisation des assistants

Partie 3 : Pages et champs d’une page

Durée estimée : 10 mn

GAF_WebDev.book Page 140 Lundi, 15. décembre 2008 5:31 17

140

L’environnement

Partie 3 : Pages et champs d’une page

Dès les premières leçons de ce guide, vous avez créé/manipulé des pages. Ces manipulations ont été réalisées sous l’éditeur de pages. L’éditeur de pages permet de réaliser simplement de superbes pages, reliées ou non aux données. WebDev possède de multiples éditeurs, tous intégrés dans le même environnement : éditeur de code, éditeur de requêtes, éditeur d’états, ... Tous les éditeurs utilisent le même environnement :

1. Barre de menus 2. Barres d’outils 3. Volets 4. Explorateur de projet Voici quelques astuces pour profiter pleinement de l’environnement de WebDev.

Les volets WebDev propose différents volets affichables à tout moment. Ces volets peuvent être affichés ou non, regroupés dans l’ordre de votre choix. Vous pouvez ainsi définir la configuration qui correspond le mieux à votre environnement et la rappeler à tout moment. Les différents volets Dans ce cours d’auto-formation, nous avons déjà vu plusieurs volets : • l’explorateur, qui permet d’accéder simplement aux différents éléments du projet. L’explorateur permet également de réaliser une recherche dans tous les éléments du projet, de créer directement de nouveaux éléments, ... • le volet des "Assistants, champs et composants". Ce volet vous permet d’accéder directement : •à un ensemble de champs prédéfinis directement utilisables dans vos pages, •aux exemples complets ou unitaires livrés avec le produit. •aux composants livrés en standard avec le produit et à vos propres composants, ...

GAF_WebDev.book Page 141 Lundi, 15. décembre 2008 5:31 17

141

WebDev propose de nombreux volets pour vous aider dans vos développements. Pour accéder à la liste complète, utilisez l’option "Affichage .. Barres d’outils".

Une barre d’outils spécifique à la gestion des volets est disponible. Pour l’afficher, sélectionnez l’option "Affichage .. Barre d’outils .. Contrôle des volets".

Chaque volet présent dans l’interface peut être : • flottant : le volet peut être redimensionné et déplacé indépendamment. Les volets flottants sont par exemple utiles si vous utilisez deux écrans. • regroupé avec d’autres volets : il suffit de déplacer un volet vers un autre volet. Lorsque l’icône représentant des onglets apparaît ( ), il suffit de positionner le volet sur cette icône et de relâcher la souris. • ancré à un des bords de l’interface : il suffit de déplacer un volet vers un des bords de l’interface. Lorsque l’icône représentant un des bords de l’interface apparaît (

), il suffit de

positionner le volet sur cette icône et de relâcher la souris. • invisible : si le volet est flottant, il suffit de cliquer sur la croix (X) de fermeture. Si le volet est regroupé, il suffit de faire un clic droit sur l’onglet correspondant et de sélectionner "Fermer l’onglet".

Astuce

Les configurations d’environnement La configuration de vos volets vous convient ? Vous voulez la mémoriser ? Rien de plus simple : vous pouvez sauvegarder jusqu’à 4 configurations grâce aux touches [Ctrl] + [Alt] + [1], [Ctrl] + [Alt] + [2], ... Et pour afficher la configuration voulue, il suffit d’utiliser la touche [Ctrl] suivie du numéro de configuration voulue. La combinaison de touches [CTRL]+[W] permet de faire apparaître ou disparaître les volets regroupés et ancrés. Il est ainsi possible d’avoir rapidement un espace de travail plus étendu.

Le menu personnalisé Qui n’a jamais souhaité disposer d’un menu "à soi", entièrement personnalisable ? WebDev le propose en standard. Pour comprendre comment ça marche, rien ne vaut un exemple pratique. Nous allons créer un menu personnalisé permettant de : • afficher la calculatrice de Windows • afficher la description du projet.

Partie 3 : Pages et champs d’une page

Astuce

Manipuler les volets Pour afficher des volets : 4 1. Sélectionnez l’option "Affichage .. Barres d’outils .. ". 2. Sélectionnez le volet à afficher ou à rendre invisible (une coche est présente devant le nom des volets actuellement affichés sous l’éditeur).

GAF_WebDev.book Page 142 Lundi, 15. décembre 2008 5:31 17

Note

142

Configuration nécessaire Pour utiliser le "Perso-Menu", vous devez réactiver cette fonctionnalité. Pour cela, effectuez les opérations suivantes : 1. Sélectionnez l’option "Outils .. Options .. Options de l’environnement". 2. Cochez l’option "PersoMenu" . 3. Validez votre choix.

Partie 3 : Pages et champs d’une page

étape : nous allons créer l’option de menu permettant de lancer directement la cal4 Première culatrice de Windows depuis l’éditeur WebDev : 1. Sélectionnez l’option "PersoMenu .. Personnaliser <MonMenu>". L’assistant de création de votre menu personnalisé se lance. 2. Cliquez sur le bouton "Ajouter une option". 3. Saisissez son nom dans le champ "Libellé du menu" ("Calculette" par exemple). 4. Cliquez sur le bouton "Parcourir" et recherchez l’exécutable de la calculette (dans "C:\Windows\system32" par exemple). 5. Saisissez le message à afficher dans la barre de message lors du survol de l’option ("Lance la calculette directement" par exemple). 6. Sélectionnez l’icône à afficher à gauche de l’option dans le menu : il suffit de sélectionner à nouveau l’exécutable de la calculette dans le champ "icône". étape : nous allons rajouter une deuxième option afin de lancer directement le 4 Seconde fichier "<Nom du projet>.RTF" créé automatiquement lors de la création d’un nouveau projet. Ce fichier contient la description du projet définie dans l’assistant de création du projet. 1. Cliquez sur le bouton "Ajouter une option". 2. Saisissez son nom dans le champ "Libellé du menu" ("Description du projet" par exemple). 3. Ce fichier se trouve dans le répertoire du projet en cours. Cliquez sur le bouton "Macro" et double-cliquez sur "{$RepProjet} Chemin du répertoire du projet en cours". La chaîne "{$RepProjet}" apparaît automatiquement dans le champ "Lignes de commande". 4. Saisissez à la suite de cette chaîne le caractère "\". 5. Cliquez sur le bouton "Macro" et double-cliquez sur "{$NomProjet} Nom du projet en cours". La chaîne "{$NomProjet}" apparaît automatiquement dans le champ "Lignes de commande". 6. Saisissez à la suite de cette chaîne les caractères ".RTF". 7. Saisissez le message à afficher dans la barre de message lors du survol de l’option ("Ouvre la description du projet" par exemple). 8. Validez la fenêtre de configuration du menu personnalisable (bouton "OK").

4 Votre menu personnalisé est fini. Testez-le !

GAF_WebDev.book Page 143 Lundi, 15. décembre 2008 5:31 17

143

Personnalisation des assistants

Partie 3 : Pages et champs d’une page

Pour aller plus loin dans la personnalisation de votre environnement de travail, WebDev propose de personnaliser les différents assistants proposés par le produit. Comment ? Lors de l’utilisation d’un assistant (assistant de création du champ liste par exemple), il suffit de cliquer sur l’image. Plusieurs images sont alors affichées : il suffit de choisir celle qui vous convient le plus.

GAF_WebDev.book Page 144 Lundi, 15. décembre 2008 5:31 17

144

LEÇON 3.2. LES PAGES Ce que vous allez apprendre dans cette leçon ... • Comment créer une page ? • Les caractéristiques d’une page • Les traitements associés à une page

Partie 3 : Pages et champs d’une page

Durée estimée : 15mn

GAF_WebDev.book Page 145 Lundi, 15. décembre 2008 5:31 17

145

Comment créer une page ? Depuis le début de ce cours, nous avons créé des pages de différentes façons : • création de pages vierges basées sur un modèle (partie 1 de ce cours) • création de pages de différents types (fiche, table, ...) basées sur les fichiers de données (partie 2 de ce cours). WebDev propose d’autres possibilités pour créer des pages. Ces possibilités sont regroupées dans l’assistant de création de pages, lancé par l’option "Fichier .. Nouveau .. Page". L’assistant de création de pages permet :

• de créer des pages RID (Rapid Interface Development) : ces pages sont basées sur les fichiers de données décrits dans l’analyse. Elles contiennent uniquement les champs et les boutons, et le code nécessaire aux éléments intégrés par le pattern RID associé. La saisie du code correspondant est effectuée par le développeur. Ces pages sont liées à un pattern RID. Ces pages peuvent être utilisées immédiatement. Plusieurs types de pages sont proposés : page de type fiche, page avec table, ... • de créer des pages vierges ou basées sur un modèle de pages. Les modèles de pages permettent de définir un ensemble de critères (graphique, champ, code) devant être repris dans chaque page de l’application. Nous détaillerons la création et l’utilisation d’un modèle de pages dans la suite de cette partie. • de créer des pages internes. Les pages internes sont un type spécifique de page. Nous détaillerons leur fonctionnement dans la suite de cette partie. • de créer des framesets. Les framesets permettent de présenter l’information voulue dans différentes parties du navigateur. Bien sûr, vous avez toujours la possibilité de créer une page vierge, sans aucun champ, utilisant ou non un modèle. Après avoir vu les différentes façons de créer une page, nous allons voir quelles sont les caractéristiques d’une page.

Description d’une page : 7 onglets à votre disposition Dès le début de ce cours d’auto-formation, vous avez créé des pages. La première chose que vous avez affichée, c’est la fenêtre de description afin de saisir le titre de la page, son nom et sa description. Mais la fenêtre de description renferme de nombreux paramétrages très pratiques, qui évitent bien souvent des dizaines de lignes de code. Nous allons détailler quelques-unes de ces fonctionnalités sur un exemple simple.

Partie 3 : Pages et champs d’une page

• de créer des pages RAD (Rapid Application Development) : ces pages sont basées sur les fichiers de données décrits dans l’analyse et contiennent tout le code nécessaire à leur fonctionnement. Ces pages sont associées à un pattern RAD (qui fixe les fonctionnalités intégrées dans la page et si nécessaire l’interface). Ces pages peuvent être utilisées immédiatement. Plusieurs types de pages sont proposés : page de type fiche, page avec table, page avec zone répétée, ... Les pages RAD sont disponibles en mode dynamique ou semi-dynamique.

GAF_WebDev.book Page 146 Lundi, 15. décembre 2008 5:31 17

146

Partie 3 : Pages et champs d’une page

Notes

Exemple pratique Pour manipuler la fenêtre de description des pages, nous allons utiliser un projet exemple préparé à cet effet. 1. Ouvrez le projet "Pages_et_champs.WWP" (option "? .. Guide d’auto-formation .. Pages et champs"). 2. Ouvrez la page "PAGE_Bouton". Ouvrir une page sous l’éditeur Nous avons vu plusieurs méthodes pour ouvrir une page sous l’éditeur. Voici un récapitulatif des différentes possibilités : • Option "Fichier .. Ouvrir" et sélection du fichier de la page à ouvrir. • Utilisation du raccourci clavier [CTRL] + [E] et sélection de la page à ouvrir. L’avantage de cette méthode est la visualisation de l’aperçu de la page. • Dans le volet "Explorateur", double-clic sur le nom de la page à ouvrir.

3. Affichez la description de la page (option "Description" du menu contextuel de la page). L’onglet affiché par défaut est le dernier onglet affiché. Onglet "Général" Le premier onglet de la fenêtre de description est l’onglet "Général". Cet onglet permet d’indiquer les paramètres généraux de la page : • Le nom de la page. Ce nom est utilisé en programmation pour manipuler la page. • La description (ou "libellé") de la page. La description est purement indicative pour le développeur. Elle permet de résumer un peu plus longuement à quoi sert la page. Elle est utilisée lors de l’impression du dossier. • Le titre de la page. Comme nous l’avons déjà vu, le titre est affiché dans la barre de titre du navigateur. • La position des champs. • Si l’option "Fixer les champs dans la page" est cochée, les champs ne bougeront pas lors du redimensionnement de la fenêtre du navigateur. Dans le cas contraire, les champs seront déplacés en fonction de la taille du navigateur. • Si l’option "Centrer la page dans le navigateur ou la frame" est cochée, la totalité de la page sera centrée dans la fenêtre du navigateur ou dans la frame contenant la page (centrage horizontal). • La destination par défaut. Cette option permet de définir une destination par défaut pour tous les champs effectuant une action sur la page (validation, ouverture d’une page, ...). • Le type de la page : • Page dynamique (option par défaut dans un site dynamique) : choisissez cette option si vous utilisez du code serveur ou si vous manipulez des fichiers de données. Une page dynamique utilise le moteur de déploiement pour fonctionner. • Page semi-dynamique : votre page ne comporte pas de code serveur mais peut être générée depuis un fichier de données ou une requête (pour un site présentant des fiches de produit, distribué sur un CD-ROM par exemple). WebDev générera autant de pages HTML que nécessaires pour afficher la totalité du contenu du fichier de données sélectionné. Vous pouvez bien entendu déterminer le nombre d’enregistrements à afficher sur chaque page ! Le moteur de déploiement n’est pas nécessaire pour une page semi-dynamique.

GAF_WebDev.book Page 147 Lundi, 15. décembre 2008 5:31 17

147

Onglet "Détail" Le second onglet de la fenêtre de description est l’onglet "Détail". Cet onglet permet de définir les paramètres concernant la jauge Ajax, le référencement, et les options de gestion de la page. Dans cet onglet, on retrouve : • Le mode de gestion de la jauge Ajax (si la page est en mode Ajax) • Les options de référencement : la page peut être référencée ou non. Il est possible de définir des expressions et des mots-clés pour chaque page. Nous verrons cette fonctionnalité dans la suite de ce cours. • Le curseur de la page. • Le contexte HyperFileSQL indépendant • La gestion du bouton "Précédent" du navigateur. Onglet "Frame" Si la page est incluse dans un frameset, l’onglet "Frame" est activé. La page est alors considérée comme une "Frame". Vous pouvez modifier les options de : • Largeur et de hauteur de la frame. • Bordure de la frame. • Affichage d’un ascenseur. • Redimensionnement de la frame. Onglet "Langue" L’onglet "Langue" permet d’indiquer les différentes langues à gérer par la page (cas des projets multilingues). Pour plus de détails, consultez la leçon “Multilangue”, page 434 Onglet "Note" Dans cet onglet, on saisit du texte. Ce texte est imprimé lors de l’édition du dossier. Vous pouvez par exemple, saisir des informations concernant le fonctionnement de la page, les différentes règles de gestion des traitements effectués. Onglet "Avancé" L’onglet "Avancé" permet de gérer toutes les spécificités du WEB. Il est possible de : • ne plus générer le fichier HTML correspondant à la page • laisser le navigateur gérer l’ordre de navigation entre les champs de la page • autoriser l’accès par la fonction SiteDynamiqueAffiche • optimiser le code HTML généré (la page peut avoir une optimisation différente de celle utilisée pour le projet). L’onglet "HTML" permet de : • inclure du code HTML qui sera ajouté à l’en-tête de la page (entre les balises "<HEAD>" et "</ HEAD>", en code HTML).

Partie 3 : Pages et champs d’une page

• Page statique (option par défaut dans un site statique) : choisissez cette option dans le cas où votre page ne comporte pas d’action serveur, ou si votre page ne comporte que des images ou des libellés. Le moteur de déploiement n’est pas nécessaire pour une page statique. • Page PHP : choisissez cette option si votre page fait partie d’un site PHP. Remarque : Selon le type de page sélectionné, il est possible de saisir des options dans l’onglet "Options".

GAF_WebDev.book Page 148 Lundi, 15. décembre 2008 5:31 17

148

• inclure des informations sous forme de "META tag". Par exemple, inclure un rafraîchissement automatique de la page, etc. L’onglet "Javascript" permet d’ajouter des fichiers Javascript. Ces fichiers seront utilisés par la page HTML générée. L’onglet "Périphériques" permet de définir les paramètres à utiliser lors d’une génération pour un site pour iPhone ou un site pour BlackBerry. Onglet "Style" Cet onglet regroupe les paramètres relatifs au style de la page. On peut sélectionner : • La feuille de styles WebDev associée à votre page (fichier ".WWS"). • L’image de fond de la page et son mode d’affichage. • La couleur de fond. • La couleur du texte par défaut. • La couleur et le style des liens de la page. Ces deux dernières options peuvent être modifiées champ par champ.

Partie 3 : Pages et champs d’une page

Traitements associés à une page Dans l’éditeur de pages, l’option "Code" du menu contextuel de la page permet d’accéder directement à l’éditeur de code. Les différents traitements liés à la page sont alors affichés. Déclarations globales (page dynamique uniquement) Exécuté sur le serveur lors de l’ouverture de la page avant que celle-ci ne soit renvoyée au navigateur. Ce traitement contient par exemple les déclarations des variables globales, ... Initialisation (page dynamique uniquement) Exécuté sur le serveur lors de l’ouverture de la page avant que celle-ci ne soit renvoyée vers le navigateur mais APRES le traitement d’initialisation des champs de la page. Chargement (page dynamique, semi-dynamique et statique) Exécuté dans le navigateur lors de l’affichage de la page dans le navigateur de l’internaute. Ce traitement peut contenir des appels de fonctions navigateurs, ... Déchargement (page dynamique, semi-dynamique et statique) Exécuté dans le navigateur à chaque fois que la page est déchargée, c’est-à-dire lorsqu’une autre page vient la remplacer ou lorsque le navigateur de l’internaute est fermé. Synchronisation (page dynamique uniquement) Permet de gérer la synchronisation de la page sur le serveur lors de l’utilisation du bouton "Précédent" du navigateur. Pour obtenir plus de détails consultez l’aide en ligne (mot-clé : "Synchronisation"). Fermeture (page dynamique uniquement) Exécuté sur le serveur à chaque fois que le contexte de la page est détruit sur le serveur (fin de session, utilisation de PageAffiche en code serveur, ...).

GAF_WebDev.book Page 149 Lundi, 15. décembre 2008 5:31 17

Notes

149

MaPage est un mot-clé qui retourne le nom de la page qui contient le traitement en cours (où est appelé MaPage). Il peut être utilisé indifféremment en code serveur et en code navigateur, dans tous les traitements des champs de la page.

En plus des traitements classiques de gestion de la souris et des touches, deux traitements peuvent être utilisés pour les pages (bouton "...") : • Formulaire réinitialisé (code navigateur "onreset") : Exécuté lorsqu’un bouton de type "Réinitialisation de page" est cliqué ou lorsque la fonction WLangage RAZ est utilisée en code navigateur. • Formulaire envoyé (code navigateur "onsubmit") : Exécuté lorsqu’un bouton de type "Envoi au serveur" est cliqué ou lorsque la fonction WLangage PageValide est utilisée en code navigateur. Ce traitement peut être utilisé par exemple pour vérifier les données saisies dans la page, et empêcher l’envoi des données au serveur grâce à la fonction WLangage RepriseSaisie.

Partie 3 : Pages et champs d’une page

Astuce

D’autres traitements spécifiques peuvent être ajoutés grâce à la barre d’outils présente dans le bas de l’éditeur de code :

GAF_WebDev.book Page 150 Lundi, 15. décembre 2008 5:31 17

150

LEÇON 3.3. LES CHAMPS Ce que vous allez apprendre dans cette leçon ... • Les différents types de champs • Les champs les plus classiques • Les champs spécialisés

Partie 3 : Pages et champs d’une page

Durée estimée : 2h

GAF_WebDev.book Page 151 Lundi, 15. décembre 2008 5:31 17

151

Introduction

Astuce

Exemple pratique Pour apprendre à utiliser les différents types de champs, nous allons utiliser un projet exemple préparé à cet effet. Pour ouvrir ce projet sous WebDev : 1. Sélectionnez l’option "Fichier .. Ouvrir un projet". 2. Sélectionnez le sous-répertoire "AutoFormation\Corriges\Pages_et_champs" du répertoire d’installation de WebDev 14. 3. Sélectionnez le fichier "Pages_et_champs.WWP". Le projet se charge. Pour ouvrir directement le projet "Pages_et_champs.WWP", sélectionnez l’option "? .. Guide d’auto-formation .. Pages et champs".

Les champs classiques Sous l’appellation "Champs classiques", nous avons regroupé tous les champs les plus communs, utilisés constamment dans les sites Intranet ou Internet créés avec WebDev. Ces champs sont les suivants : • Libellé, Libellé HTML • Champ de saisie • Bouton • Lien • Image, image clicable • Sélecteur, Interrupteur • Liste • Combo • Table • Zone répétée • Arbre • Graphe • Cellule Nous allons détailler ces champs un par un.

Partie 3 : Pages et champs d’une page

WebDev met plus de 30 champs à votre disposition pour communiquer avec l’internaute. Ils permettent de saisir ou de visualiser des valeurs. Les valeurs affichées peuvent provenir d’un calcul effectué par programmation, d’un fichier d’une base de données ou d’une affectation. Les valeurs saisies peuvent être utilisées dans des calculs, enregistrées dans un fichier d’une base de données ou affectées dans d’autres champs. Cette leçon va vous permettre de connaître les différents types de champs disponibles, de les tester dans des cas d’utilisation réelle, et pour les plus courants, d’aborder leur programmation. Pour simplifier cette leçon, nous avons séparé les différents champs en deux catégories : • les champs classiques : ce sont les champs les plus utilisés. • les champs spécialisés : ces champs permettent d’obtenir une interface spécifique ou de gérer des fonctionnalités spécifiques.

GAF_WebDev.book Page 152 Lundi, 15. décembre 2008 5:31 17

152

Type de champ : Libellé

(page statique, semi-dynamique et dynamique)

Résumé Les libellés permettent d’afficher du texte statique. Leur contenu ne peut pas être modifié par l’internaute, mais ces champs peuvent être modifiés par programmation en code serveur (comme tous les champs). Les libellés sont utilisés pour afficher une information, par exemple un titre en gros caractères. Le contenu d’un libellé peut être défini sous l’éditeur ainsi que par programmation. Les libellés permettent également d’afficher un texte en fonction de la langue utilisée dans le projet, sans programmation particulière. Exemple pratique 4 Ouvrez la page "PAGE_Libelle.WWH". Partie 3 : Pages et champs d’une page

la page. Cliquez sur les différents boutons afin de découvrir les possibilités de manipu4 Testez lations des libellés simples et les libellés formatés. Les différents types de libellé WebDev propose plusieurs types de libellés : 1. Les libellés simples : ce sont des libellés "normaux" sur lesquels un seul style de police (taille, couleur, ...) peut être appliqué. 2. Les libellés HTML : ce sont des libellés grâce auxquels vous pouvez mettre en forme tout ou partie du texte. Il est possible de modifier le style d’une ou plusieurs portions du texte (taille, couleur, police). 3. Les libellés formatés : ces libellés (appelés champ d’affichage formaté) permettent d’afficher des informations en utilisant un masque d’affichage. Ces libellés sont très utiles pour afficher une date, une heure, une valeur monétaire, ... Manipulation des libellés par programmation Arrêtons-nous un instant sur le code permettant de manipuler des libellés (nous vous conseillons d’étudier le code des différents boutons présents dans cette page). Pour récupérer le libellé de "LIB_Recupère" (bouton "Récupérer"), la syntaxe est : Ch Ch // //

est une Chaîne = "Le contenu du libellé est "+ RC + LIB_Recupere ou Info("Le contenu du libellé est "+ RC + LIB_Recupere)

Il est même possible de changer la couleur du texte du libellé (bouton "Texte") avec la propriété Couleur. LIB_Couleur..Couleur = RougeClair

GAF_WebDev.book Page 153 Lundi, 15. décembre 2008 5:31 17

153

Notes

RougeClair est une constante WLangage correspondant à la couleur Rouge Clair. Les propriétés permettent de modifier par programmation certaines caractéristiques des champs : couleur, libellé, police, ... Nous ne citerons pas toutes les propriétés. Nous découvrirons quelques-unes des principales propriétés au fur et à mesure de cette partie. Toutes les propriétés sont relatives à un champ donné. Leur syntaxe d'utilisation est : Nom_Champ..Nom_Propriété

La liste des propriétés disponibles sur les champs est présente dans l’aide en ligne de WebDev, mot-clé : "Propriétés, Propriétés des champs d’une fenêtre".

(page statique, semi-dynamique et dynamique)

Astuce

Résumé Les champs de saisie sont les premiers champs que vous avez manipulés. Ils permettent de saisir ou d'afficher des données provenant de variables, de calculs ou de fichiers. Ils permettent par exemple de saisir un mot de passe, une quantité à commander, le nom d’un client, une adresse, … Si vous créez une page, il y a 9 chances sur 10 pour que vous utilisiez ensuite un champ de saisie. Voyons un peu plus en détail leur fonctionnement et leurs possibilités. Quelle que soit l’information à saisir ou à afficher, vous pouvez choisir le type correspondant : • texte, • mot de passe : Les caractères contenus dans le champ sont remplacés à l’affichage par des astérisques ("*"). Ce type de champ de saisie est idéal pour la saisie du mot de passe d’un internaute dans une page de login.

• numérique, • heure, • date, • durée, • monétaire, • monétaire+Euro.

Rappel

À chaque type de champ correspondent plusieurs masques de saisie (ou d’affichage si le champ est en affichage). Nous avons vu l’intérêt de ce masque lors du développement du site "Ma_Bibliotheque", nous n’y reviendrons pas. Les champs de saisie numériques ne sont pas typés. C'est le masque sélectionné pour le champ qui va définir si le champ est un réel, réel double, entier, ...

Partie 3 : Pages et champs d’une page

Type de champ : Champ de saisie

GAF_WebDev.book Page 154 Lundi, 15. décembre 2008 5:31 17

154

Exemple pratique la page "PAGE_Saisie.WWH". Cette page présente la gestion des champs de saisie de 4 Ouvrez type texte, numérique et date.

4 Testez la page. des valeurs dans les champs qui ont le libellé "En saisie". Dans les autres champs, il 4 Saisissez n’est pas possible de saisir. En effet, ils ont été décrits en affichage. Cliquez sur les différents boutons et observez ce qu’il se passe.

4 Revenez sous l'éditeur et étudiez le code des boutons. En détail Pour afficher et récupérer une valeur dans un champ de saisie, une simple affectation suffit et ce quel que soit le type du champ de saisie. Quelques exemples d’initialisation : • Code d’initialisation d’un champ de saisie "texte" : //affiche Coucou dans le champ texte

• Code d’initialisation d’un champ de saisie "numérique" : // Affiche la valeur 20.6 dans le champ numérique SAI_Numérique = 20.6

Rappel

Partie 3 : Pages et champs d’une page

SAI_SAISIE2= "Coucou"

Il est également possible d’initialiser la valeur d’un champ de saisie en utilisant l’onglet "Contenu" de la description du champ.

Quelques exemples de récupération : • Code de clic d’un bouton (serveur ou navigateur) pour récupérer la valeur d’un champ de saisie texte : Ch est une Chaîne Ch = SAI_SAISIE2 // Récupère le contenu du champ texte

• Code de clic d’un bouton (serveur ou navigateur) pour récupérer la valeur d’un champ de saisie numérique : Valeur est un Réel Valeur = SAI_Numérique // Récupère le contenu du champ numérique

Gestion de la couleur dans les champs de saisie Dans la zone de saisie, la couleur du texte et la couleur du fond sont modifiables par programmation avec les propriétés Couleur et CouleurFond. //Change la couleur du texte SAI_Manip..Couleur = RougeClair //Change la couleur du fond SAI_Manip..CouleurFond = JauneClair

GAF_WebDev.book Page 155 Lundi, 15. décembre 2008 5:31 17

155

Astuce

Onglet "Général" Comme nous l’avons déjà vu, l’onglet "Général" du champ de saisie permet de définir : • le nom du champ • son libellé • son type • son masque de saisie. Quelques options peuvent se révéler utiles : • Taille max saisie : Nombre de caractères pouvant être saisis ou affectés dans un champ de saisie de type Texte. • Lignes visibles : Pour les champs de saisie de type texte, cette option permet de saisir un texte sur plusieurs lignes. On peut ainsi insérer des retours chariot dans le texte. Ce type d’option est idéal pour saisir un commentaire ou une observation. L'utilisation de ce paramètre est fondamentale pour les champs reliés à une rubrique de type "mémo texte".

Astuce

• Mise à blanc si zéro : si la valeur prise par le champ est nulle, le contenu du champ est vidé automatiquement. • Retourne NULL si vide : retourne la valeur NULL si le champ n’a pas de valeur (Attention ! Ni 0, ni chaîne vide !). La valeur NULL est très utile pour gérer le passage de paramètres à une requête et rendre les conditions optionnelles pour des recherches multicritères.

Onglet "Détail" L’onglet Détail permet de définir les caractéristiques d’interface du champ. L’état initial du champ correspond à l’état du champ lors de l’affichage de la page. Cette caractéristique se retrouve pour presque tous les types de champ. Au lancement d’une page, un champ de saisie peut être : • Actif : le champ est actif; il sera en saisie dans la page. L’internaute pourra saisir des informations dans le champ.

Partie 3 : Pages et champs d’une page

Caractéristiques d’un champ de saisie Comme pour les pages, les champs possèdent une fenêtre de description. Cette fenêtre de description permet de paramétrer de nombreuses options du champ, options d’aspect ou de fonctionnement. Nous allons détailler les caractéristiques du champ de saisie, sachant que de nombreuses options sont reprises dans la description d’autres champs. Nous ne détaillerons pas toutes les options ici (c’est un cours, pas une documentation exhaustive). Pour plus de détails sur chacune des options des fenêtres de description, il est conseillé de consulter l’aide contextuelle.

GAF_WebDev.book Page 156 Lundi, 15. décembre 2008 5:31 17

156

• En affichage : le champ est inactif. L’internaute ne pourra pas saisir de valeur dans le champ. Le champ se comporte comme un libellé. Il sera cependant possible de sélectionner le contenu du champ à l’aide de la souris. • Grisé : le champ est grisé. L’internaute ne pourra pas saisir de valeur dans le champ. • Visible (commun à tous les champs) : Comme son nom l’indique, le champ "existe" dans la page mais il peut être visible ou invisible. Cet état est parfois utile en programmation lorsqu'un champ doit apparaître à certains moments et disparaître à d'autres ! L'état d'un champ est choisi lors de sa création. Il peut être modifié par programme en code serveur en utilisant la propriété Etat pour les options "Actif" et "En affichage", et la propriété Visible pour le rendre visible ou non.

Partie 3 : Pages et champs d’une page

WebDev propose les types de champs suivants : • Automatique (commun à tous les champs d’une page dynamique) : si le champ est modifié par programmation, le champ est alors considéré comme "dynamique". • Statique (commun à tous les champs d’une page dynamique) : le contenu du champ ne pourra pas être modifié par programmation. • Dynamique (commun à tous les champs d’une page dynamique) : le contenu du champ pourra être modifié par programmation. Le champ peut être superposé (commun à la plupart des champs) : si cette option est cochée, ce champ pourra être positionné par-dessus un autre champ. Il pourra être possible de le déplacer à la souris et également de mémoriser sa nouvelle position. Le champ peut être accessible par TAB. Le plus souvent, la touche TAB du clavier permet à l’internaute de se déplacer entre les différents champs de la page. Il est alors possible de définir l’ordre de navigation dans la page (nous le verrons dans le chapitre Ergonomie de cette partie). La "lettre d'appel" permet à l’internaute de se positionner directement sur le champ en tapant simplement une combinaison de touches du clavier (par exemple [ALT] + [Lettre]). Dans le libellé d'un champ de saisie, si une lettre est précédée de "&", elle devient automatiquement "lettre d'appel". Par exemple : "&Nom du client" décrit [ALT]+[N] comme lettre d'appel. Le champ peut être en saisie obligatoire : dans ce cas, un message empêche la validation de la page si l’internaute n’a pas saisi de valeur pour le champ. Il est également possible de définir un curseur de survol spécifique pour chaque champ. Gestion de l’Euro : Pour les champs de type "Monétaire + Euro", caractéristiques concernant l’Euro (devise affichée, devise utilisée pour la programmation, ...). Le bouton "Groupes" (disponible dans les pages dynamiques) permet de "regrouper" plusieurs champs pour modifier l'état de ces champs en une seule opération.

GAF_WebDev.book Page 157 Lundi, 15. décembre 2008 5:31 17

157

Type de champ : Bouton

(page statique, semi-dynamique et dynamique)

Résumé Les boutons sont utilisés pour lancer des traitements. On les appelle également "Contrôles". Le traitement associé au bouton s'exécutera lorsque le bouton sera activé (lorsque l’internaute clique sur le bouton).

Exemple pratique la page "PAGE_Bouton.WDW" sous l’éditeur. Cette page présente différents types de 4 Ouvrez boutons.

4 Testez cette page. Types d’opérations des boutons Un bouton peut effectuer l’un des 3 types d’opérations suivants (information à renseigner dans la fenêtre de description, onglet "Général") : 1. Envoi de la valeur des champs au serveur (submit) 2. Réinitialisation des champs de la page (reset) 3. Aucune opération particulière Bouton de type "Envoi de la valeur des champs au serveur" (submit) Les boutons de type "Envoi de la valeur des champs au serveur" sont les plus courants. Lors d’un clic sur ce type de bouton : • le code navigateur est exécuté (s’il existe). • un appel au serveur est effectué. • la page est renvoyée dans le navigateur. le vérifier, cliquez sur le bouton "Envoi au serveur - (Entree)". Le message correspondant 4 Pour au code navigateur ("Envoi vers le serveur") est affiché, puis la date est modifiée, et le mes-

Astuce

sage correspondant au code serveur est affiché. Ce type de bouton est conseillé si des données provenant d’une base de données devront être affichées dans le navigateur.

Bouton de type Réinitialisation des champs de la page Lorsque le bouton est activé, tous les champs de la page contenant une valeur saisie par l’internaute sont mis à blanc. Les champs contenant une valeur affectée par programmation ne sont pas remis à blanc. Le code de clic serveur n’est pas exécuté.

Partie 3 : Pages et champs d’une page

WebDev propose plusieurs "looks" de bouton : • Bouton à image fixe ou avec survol (appelé également bouton à deux états) : Les deux états sont l’état normal et l’état survolé. Il suffit d’associer le bouton à une image pour chaque état (Onglet "Détail" de la description du bouton). • Bouton à trois états : état normal, état survolé et état enfoncé. Il suffit d’associer le bouton à une image contenant les trois états du bouton (onglet "Détail" de la description du bouton). • Bouton standard (bouton "texte"). L’apparence du bouton est déterminée dans la feuille de styles du projet.

GAF_WebDev.book Page 158 Lundi, 15. décembre 2008 5:31 17

158

Astuce

le vérifier, saisissez un texte dans le champ "Information" et cliquez sur le bouton "Réini4 Pour tialiser". Le content du champ est vidé. Ce type de bouton est conseillé pour annuler la saisie d’un formulaire par exemple.

Bouton de type Aucune opération particulière Lorsque ce bouton est activé, seul le code de clic navigateur est exécuté. La valeur des champs de la page n’est pas renvoyée au serveur. le vérifier, cliquez sur le bouton "Action navigateur". Seul le code navigateur est exécuté. 4 Pour Remarque : Sous l’éditeur de code, un message d’information de compilation apparaît indi-

Ce type de bouton est conseillé pour effectuer des traitements ne nécessitant pas de sauvegarde des informations saisies par l’internaute.

Caractéristiques d’un bouton L’image du bouton peut être : • une image que vous avez créée. • choisie parmi celles proposées dans le catalogue de WebDev (dans les"Cliparts" ou dans les "Boutons graphiques" par exemple).

Astuce

Partie 3 : Pages et champs d’une page

Astuce

quant que le code serveur ne sera jamais exécuté.

Nous vous conseillons de : • ne pas donner de libellé à un bouton graphique dont l'image comporte un libellé, sinon le bouton comportera deux libellés. • ne pas mélanger dans une même page, les boutons graphiques et les boutons texte (aspect visuel, ...).

L’image associée à un bouton est copiée dans le répertoire _WEB du projet. L'image d'un bouton graphique peut être modifiée par programmation (code navigateur) : // Modifie l'image associée au bouton // L'image se trouve dans le répertoire _WEB BTN_Image = RépertoireWeb() + "/VSXP15022_MODIF.gif"

Remarque : la fonction RépertoireWeb permet de connaître le chemin du répertoire contenant les images en code navigateur.

Type de champ : Lien

(page statique, semi-dynamique et dynamique)

Résumé Les liens permettent d’afficher du texte statique. Il est possible de définir une action lors d’un clic sur un lien (afficher une page, effectuer un traitement, ouvrir le logiciel de messagerie de l’internaute, ...).

GAF_WebDev.book Page 159 Lundi, 15. décembre 2008 5:31 17

159

Les liens sont généralement utilisés pour permettre à l’internaute d’écrire un email à l’auteur du site, ouvrir un nouveau navigateur vers une adresse Internet, ... Le contenu d’un lien et son action peuvent être définis sous l’éditeur lors de la description du lien ainsi que par programmation (propriété ..URL du WLangage). Exemple pratique la page "PAGE_Bouton.WDW" sous l’éditeur. Cette page présente l’utilisation d’un 4 Ouvrez champ Lien.

Type de champ : Image

(page statique, semi-dynamique et dynamique)

Exemple pratique la page "PAGE_Image.WDW" sous l’éditeur. Cette page présente différents types 4 Ouvrez d’images : • Image générée • Image statique (homothétique ou étirée)

4 Testez cette page. 4 Revenez sous l’éditeur. Types d’images proposés par WebDev Dans les pages dynamiques et semi-dynamiques, WebDev propose différents types d’images. Ces types d’images sont configurables dans l’onglet "Général" de la fenêtre de description du champ. Les types disponibles sont les suivants : • Statique : l’image associée au champ Image est fixe. L’image ne changera jamais et pourra être modifiée par programmation uniquement dans un code navigateur. Ce type d’image est généralement utilisé pour afficher un logo ou une bannière statique. • Dynamique : l’image peut être modifiée par programmation (code serveur ou navigateur). Ce type d’image est généralement utilisé pour afficher les photos d’un catalogue de produits. • Depuis une base de données : l’image est une image générée qui peut être reliée : - soit à une rubrique d’un fichier de données contenant uniquement le chemin de l’image. - soit à une rubrique de type "Mémo image" d’un fichier de données. Par défaut, le mode d’affichage de cette image est "homothétique", ce qui permet de ne pas déformer l’image quelle que soit la taille du champ Image. • Générée : l’image est "construite" par programmation. Elle peut être une image dont un fichier d’origine (GIF, JPEG, PNG, ...) a été défini. Ce type d’image est généralement conseillé pour utiliser les fonctions de dessin ou de graphe du WLangage.

Partie 3 : Pages et champs d’une page

Résumé Les champs Images permettent d'afficher des images. Il est possible d’effectuer un traitement navigateur ou une action prédéfinie lors d’un clic sur une image.

GAF_WebDev.book Page 160 Lundi, 15. décembre 2008 5:31 17

160

Caractéristiques d’une image La fenêtre de description d’une image contient de nombreux paramètres spécifiques. Nous allons les détailler ici. Nom et emplacement de l’image (onglet "Général") Comme pour tous les champs, le nom de l’image sera utilisé en programmation pour modifier les attributs de l’image (chemin, visibilité, ...). Le chemin de l’image spécifie l’emplacement d’origine du fichier image. Si l’option "Localiser les images dans le répertoire _WEB en code navigateur" est cochée, il ne sera pas nécessaire d’utiliser la fonction RépertoireWeb en code navigateur pour localiser le chemin de l’image. Le bouton "Catalogue" permet d’accéder au catalogue d’images fourni en standard avec WebDev (“Le catalogue d’images”, page 162). Caractéristiques d’affichage (onglet "Général") WebDev permet de paramétrer directement le mode d’affichage de l’image :

Partie 3 : Pages et champs d’une page

Mode d’affichage

Exemple

Description

100 %

L’image s’affiche avec sa taille initiale. La taille du champ peut être modifiée mais cela n’a aucune incidence sur l’image.

Centré

L’image est centrée dans le champ image. La taille du champ peut être modifiée. Si l’image est plus petite (en hauteur ou en largeur) que le champ, des bandes apparaissent sur les côtés.

Etiré

L’image est déformée pour occuper toute la surface du champ. La taille de l’image s’adapte à celle du champ.

Répété

L’image dans sa taille initiale est répétée autant de fois que possible pour occuper toute la surface du champ image.

Homothétique

L'image est agrandie proportionnellement pour être affichée entièrement dans le champ image. L’image est cadrée en haut à gauche.

Homothétique étendu

L'image est agrandie proportionnellement pour que le plus petit coté de l'image soit affiché entièrement dans le champ image

GAF_WebDev.book Page 161 Lundi, 15. décembre 2008 5:31 17

Homothétique centré

L’image est agrandie ou réduite (selon le cas) en conservant les proportions hauteur/largeur pour occuper la plus grande surface possible du champ. L’image n’est pas déformée.

Homothétique centré étendu

L'image est agrandie proportionnellement pour que le plus petit coté de l'image soit affiché entièrement dans le champ image, et centrée dans le champ image.

Homothétique sans agrandissement

L’image peut être réduite si nécessaire mais ne dépassera pas sa taille originale si le champ d’accueil est trop grand.

Homothétique centré sans agrandissement

L’image est centrée et peut être réduite si nécessaire mais ne dépassera pas sa taille originale si le champ d’accueil est trop grand.

Attention !

WebDev gère des images GIF avec un fond transparent (page dynamique uniquement). Dans ce cas, il faut : • soit créer une image avec une couleur de fond "Magenta Clair" (couleur RVB : 255, 0, 255). Le magenta est automatiquement considéré comme la couleur de transparence. • soit créer une image dont la couleur du pixel (point) en haut à gauche est la couleur de référence pour la transparence. Vous êtes maître de la couleur "transparente". La couleur "transparente" est analysée dans la totalité de l’image. Il peut donc y avoir des zones transparentes en plein centre de l’image. Cela peut donner des effets d’affichage, vérifiez les images !

Actions lors du clic sur l’image (onglet "Général") Lors du clic sur une image, il est possible de déclencher une action (exécution du code d’un bouton par exemple). Le bouton "Autres actions" permet de définir des actions prédéfinies lors d’un clic sur l’image. Vous pouvez également choisir la destination de l’action (nouveau navigateur, page en cours, ...). Autres caractéristiques L’onglet "Détail" de la fenêtre de description du champ image permet également de définir : • le cadre de l’image (contour). Il est possible de paramétrer l’épaisseur du cadre, ainsi que les marges horizontale et verticale à l’intérieur du cadre. Par défaut, toutes ces valeurs sont à 0 (aucun cadre). • les dimensions de l’image, la largeur et la hauteur de l’image.

Partie 3 : Pages et champs d’une page

161

GAF_WebDev.book Page 162 Lundi, 15. décembre 2008 5:31 17

162

Le catalogue d’images

Partie 3 : Pages et champs d’une page

Dès qu’une image peut être affichée dans un champ, une page, WebDev propose d’utiliser le catalogue d’images grâce au bouton "CATALOGUE". Ce catalogue contient plusieurs milliers d’images, de cliparts, ... Pour sélectionner un clipart, vous pouvez effectuer une recherche selon un mot-clé. Dans la fenêtre de recherche : •Saisissez un mot-clé (par exemple "Animaux") •Indiquez si nécessaire le thème, les dimensions et la catégorie de recherche. •Cliquez sur le bouton de recherche (les jumelles). Les images se rapprochant le plus du mot-clé s'affichent dans la fenêtre. •Choisissez l’image que vous préférez en cliquant dessus (par exemple un poisson) et validez.

•Indiquez les caractéristiques de l’image à générer : taille, luminosité, extension, ...

Le nom de l’image spécifié s'affiche alors dans la fenêtre de description de l’image et le fichier de l'image (au format voulu) est copié dans le répertoire du projet.

GAF_WebDev.book Page 163 Lundi, 15. décembre 2008 5:31 17

163

Astuce

• le Texte alternatif : cette option permet d’afficher un texte à la place de l’image si le navigateur n’arrive pas à afficher l’image (image introuvable, format non reconnu, ...). Pour améliorer le référencement de vos pages, il est conseillé de saisir un texte alternatif dans tous vos champs Image.

Type de champ : Image clicable

(page statique, semi-dynamique et dynamique)

Exemple pratique visualiser les différentes possibilités offertes par les champs Image clicable, ouvrez la 4 Pour page "PAGE_ImageMapArea.WWH".

4 Testez la page. 4 Revenez sous l’éditeur. Caractéristiques des champs image clicable Les caractéristiques des champs image clicable reprennent les caractéristiques des champs image. Une nouvelle option est le mode de fonctionnement. Le mode de fonctionnement permet de définir le type d’image clicable à utiliser : • Image clicable : l’image est une image clicable simple. Il est possible d’associer une action au clic sur l’image. Cependant, il n’est pas possible de récupérer les coordonnées de la souris ou de définir des zones de clicage. • Zone de clicage (page dynamique uniquement) : l’image est une image clicable avec récupération des coordonnées de la souris (fonction PageParamètre). Voici un exemple de code serveur permettant de récupérer les coordonnées de la souris lors d’un clic sur une zone de clicage : //Récupère les coordonnées de la souris x est un entier = ImagePosX() y est un entier = ImagePosY() //Informe l’internaute Info("Vous avez cliqué à la position X=" + x + "; Y=" + y)

• Zone graphique : image clicable avec définition de zones graphiques clicables. Il est possible d’associer une action au clic sur l’image et sur chaque zone graphique définie. Remarque : L’image se comporte comme un bouton. Il est alors possible d’effectuer une action navigateur et/ou serveur.

Partie 3 : Pages et champs d’une page

Résumé Les champs Images clicable permettent d'afficher des images "réactives". Il est possible de : • déterminer la position de la souris lors d’un clic sur l’image ("zone de clicage"). Cette option est disponible uniquement pour les pages dynamiques. • définir des zones sur l’image ("Map Area").

GAF_WebDev.book Page 164 Lundi, 15. décembre 2008 5:31 17

164

Exemple de gestion d’une zone graphique (Map Area) Pour définir des zones graphiques sur l’image clicable, sélectionnez l’option "Zone graphique" dans l’onglet "Détail" de la fenêtre de description de l’image clicable. Vous pourrez ainsi définir les différentes zones de l’image. Pour ces zones, l’action à effectuer lors d’un clic est différente de celle de l’image.

Partie 3 : Pages et champs d’une page

4 Testez la page "PAGE_ImageMapArea".

Pour dessiner une zone graphique : 4 1. Effectuez un clic droit sur le champ Image. 2. Sélectionnez une des options suivantes du menu contextuel : •"Insérer une zone graphique .. Un rectangle" : pour définir des zones fixes simples. •"Insérer une zone graphique .. Un cercle" : pour définir des zones arrondies. •"Insérer une zone graphique .. Un polygone" : pour définir des zones complexes, comme une carte géographique. 3. Positionnez la souris à l’emplacement où la zone doit être dessinée. Tout en maintenant le bouton gauche de la souris enfoncée, dessinez la forme de la zone graphique. Pour une sélection précise des points de la zone, il est possible de travailler en mode zoom. Il suffit pour cela de sélectionner le pourcentage de zoom dans la combo prévue à cet effet dans la barre d’outils de WebDev.

GAF_WebDev.book Page 165 Lundi, 15. décembre 2008 5:31 17

Astuce

165

Si vous choisissez de dessiner une zone "polygonale", il est possible de rajouter des points après avoir défini la zone. Il suffit pour cela de : 1. Maintenir la touche [CTRL] enfoncée. 2. Cliquer avec la souris à l’endroit désiré sur le contour de la zone (un signe "+" s’affiche en dessous du curseur de la souris).

Enfin, vous pouvez définir plusieurs zones graphiques sur une même image clicable/zone graphique (Map Area). Il est ainsi possible d’exécuter des traitements différents en fonction de l’endroit où l’internaute a cliqué. (page statique, semi-dynamique et dynamique)

Résumé Les sélecteurs d'options sont également appelés "cases d'options". Ils permettent de sélectionner une option et une seule, parmi celles proposées.

Astuce !

Le libellé des options proposées doit être saisi lors de la description du sélecteur sous l'éditeur. Ils sont modifiables par programmation (code serveur). Comment différencier le sélecteur et l’interrupteur ? Le sélecteur est également appelé "Bouton radio". un moyen mnémotechnique simple : pensez aux anciennes radios : le bouton permettait de sélectionner une seule fréquence! Le sélecteur permet de sélectionner une seule option.

Exemple pratique 4 Ouvrez la page "PAGE_Selecteur.WWH".

la page et cliquez sur les différents boutons, modifiez le sélecteur. Constatez ce qu'il se 4 Testez passe. Le code de chaque bouton est directement affiché dans la page.

4 Retournez sous l’éditeur. Caractéristiques des sélecteurs A chaque option d'un sélecteur est associé un entier (qui peut prendre une valeur de 1 à N, N étant le nombre total d’options du sélecteur). La première option a le numéro 1, la seconde le numéro 2, ... Les options sont numérotées de haut en bas et de gauche à droite. Dans notre page : "SEL_Choix = 2" signifie que l’option "Un café sans sucre" est sélectionnée, "SEL_Choix = 3" signifie que l’option "Un thé" est sélectionnée et "SEL_Choix = 4" signifie que l’option "Un chocolat" est sélectionnée, ...

Partie 3 : Pages et champs d’une page

Type de champ : Sélecteur

GAF_WebDev.book Page 166 Lundi, 15. décembre 2008 5:31 17

166

Pour initialiser une case d'options, il suffit d'affecter une valeur entière au champ (code serveur et/ou navigateur) : SEL_Choix = 3

//sélectionne l’option 3 : "Un thé"

Pour connaître l'option sélectionnée, il suffit de récupérer la valeur entière du champ (code serveur et/ou navigateur) : n est un entier = SEL_Choix

Partie 3 : Pages et champs d’une page

Type de champ : Interrupteur

(page statique, semi-dynamique et dynamique)

Résumé Les interrupteurs sont également appelés "cases à cocher". Ils permettent de choisir si la valeur de chaque option proposée est "vraie" ("Oui") ou "fausse" ("Non"). Le libellé des options proposées doit être saisi lors de la description de l'interrupteur sous l'éditeur. Il peut être modifié par programme (code serveur). Exemple pratique 4 Ouvrez la page "PAGE_Interrupteur.WWH".

la page et cliquez sur les différents boutons, modifiez l’interrupteur. Constatez ce qu'il 4 Testez se passe. Le code de chaque bouton est directement affiché dans la page.

4 Retournez sous l’éditeur. Caractéristiques des interrupteurs Chaque option d'un interrupteur est "repérée" par un indice (qui peut prendre une valeur de 1 à N, N étant le nombre total d’options de l’interrupteur). La première option a le numéro 1, la seconde le numéro 2, ... Les options sont numérotées de haut en bas et de gauche à droite : • "INT_Choix[2]=Vrai" signifie : l’option "Boire" est cochée • "INT_Choix[3]=Faux" signifie : l’option "Chanter" n'est pas cochée Lorsqu’il y a plusieurs options, l’interrupteur se comporte comme un tableau d’options. Pour accéder à une option, il suffit de passer l'indice de l'option en utilisant la syntaxe avec les crochets [ ]. Pour initialiser une case à cocher, il faut initialiser le choix correspondant avec la valeur "Vrai" ou "Faux" selon le cas (code serveur et/ou navigateur). INT_Choix[2] = Vrai // pour cocher l'option 2 "Boire"

Pour connaître la valeur d'une option, il suffit de récupérer la valeur du champ ("Vrai" ou "Faux", code serveur et/ou navigateur). SI INT_Choix[2] = Vrai ALORS //option cochée SINON //option non cochée FIN

GAF_WebDev.book Page 167 Lundi, 15. décembre 2008 5:31 17

167

Astuce

Les programmeurs habitués à manipuler des expressions booléennes peuvent omettre le test avec la valeur "Vrai" ou "Faux" : SI INT_Choix[2] ALORS //option cochée SINON //option non cochée FIN

//change le libellé de l’interrupteur INT_Choix..Libelle ="Vous aimez plutôt" //change la 3ème option INT_Choix[3]..Libelle = "Danser la nuit" // change 1ère et 3ème option INT_Choix[1]..Libelle = "Lire un livre" INT_Choix[3]..Libelle = "Danser le twist"

Il n'est par contre pas possible d'ajouter des options par programmation. Type de champ : Liste

(page statique, semi-dynamique et dynamique)

Résumé Les listes sont toujours déroulées. C’est pourquoi on les nomme également "listes déroulées". Elles permettent de visualiser plusieurs éléments et d'en sélectionner un ou plusieurs. Lors de la création d’un champ "Liste", un assistant se lance et propose plusieurs types de listes : • une liste dont le contenu est lié à un fichier de données ou une requête (liste fichier disponible dans les pages dynamiques ou semi-dynamiques). • une liste dont le contenu est lié à une variable (liste sur source). • une liste dont vous définissez le contenu dans l’éditeur ou par programmation (liste mémoire).

Partie 3 : Pages et champs d’une page

Il est possible de modifier le libellé d'un interrupteur ou d'un sélecteur avec la propriété Libellé (code serveur). Par exemple :

GAF_WebDev.book Page 168 Lundi, 15. décembre 2008 5:31 17

Partie 3 : Pages et champs d’une page

Attention !

168

Règles à appliquer pour connaître le type de liste à créer : • Utilisez une liste liée à un fichier de données ou à une requête lorsque vous souhaitez proposer à l’utilisateur une liste de valeurs qui sont contenues dans un fichier de données. Si la liste est liée à un fichier de données, c’est tout le contenu du fichier de données qui est proposé directement. Si la liste est liée à une requête, la liste contiendra une sélection d’enregistrements du fichier de données. • Utilisez une liste dont le contenu est défini dans l’éditeur si les valeurs sont "STATIQUES". Elles ne changent pas durant le déroulement du programme. • Utilisez une liste remplie par programmation lorsque le contenu de la liste est issu de calculs ou si la sélection des éléments à intégrer à la liste ne peut être réalisée par une requête. • Utilisez une liste dont le contenu est lié à une variable lorsque le contenu de la liste est par exemple issu de calculs réalisés à l’aide d’une variable. • Le contenu des listes doit être le moins long possible. En effet, plus il y a d’éléments dans une liste et plus la page qui la contient sera longue à charger !

Exemple pratique 4 Ouvrez la page "PAGE_Liste.WWH".

le test de cette page. 4 •Lancez Les 3 listes du haut sont mono-sélection : liste mémoire, liste fichier et liste sur source. • La liste du bas est une liste mémoire multi-sélections. sur les différents boutons et observez ce qui se passe. Le code correspondant à cha4 Cliquez que bouton est affiché dans la page. exécution, dans une liste multi-sélections (selon le standard Internet) : 4 •Enpour sélectionner plusieurs éléments un par un, appuyez sur la touche [CTRL] et sur le bouton de gauche de la souris. • pour sélectionner plusieurs éléments en même temps, utilisez le "lasso". Cliquez sur la souris, gardez le bouton enfoncé, déplacez la souris pour sélectionner les éléments, relâchez le bouton de la souris. • pour sélectionner plusieurs éléments consécutifs en même temps, cliquez sur le premier élément, appuyez sur la touche [Shift] et la maintenir enfoncée et cliquez sur le dernier élément de la sélection.

4 Revenez sous l'éditeur. Mode de remplissage d’une liste Nous avons vu que l’assistant de création d’une liste proposait de créer plusieurs types de liste : • liste reliée à un fichier de données ou une requête (appelée liste fichier) • liste remplie par programmation (appelée liste mémoire) • liste remplie à partir d’une variable (appelée liste sur source) À chaque type de liste correspond un mode de remplissage spécifique.

GAF_WebDev.book Page 169 Lundi, 15. décembre 2008 5:31 17

169

Remplissage d’une liste mémoire

Dans le cas d’une liste mémoire, vous disposez de deux méthodes pour remplir la liste : • sous l’éditeur, • par programmation. Sous l’éditeur, rien de plus simple : le contenu d’une liste peut être défini directement dans la fenêtre de description du champ (onglet "Général", champ "Contenu initial"). Vous pouvez bien entendu saisir plusieurs valeurs. Pour aller à la ligne suivante, appuyez sur la touche [Entrée]. Pour remplir une liste par programmation, il faut utiliser la fonction ListeAjoute. Par exemple : // Ajoute Emma dans la liste LISTE_Mémoire ListeAjoute(LISTE_mémoire,"Emma")

l’exemple pratique, l’initialisation de la liste mémoire est réalisée dans le bouton "Rem4 Dans plir la liste mémoire".

Notes

Dans le cas d’une liste fichier, le remplissage est effectué à partir des éléments fournis lors de la création de la liste. Ces informations sont également disponibles dans l’onglet "Contenu". Ces informations sont les suivantes : • le fichier de l’analyse ou la requête qui servira de source de données pour le remplissage. Si la requête n’existe pas lors de la création du champ, il est possible de créer la requête en même temps que le champ. La requête sera alors intégrée à la fenêtre qui contient le champ. Attention : si vous utilisez une requête intégrée, cette requête sera utilisée uniquement pour ce champ. Elle ne pourra pas être réutilisée dans votre projet.

Ce fichier de données ou cette requête sera lu(e) automatiquement sans avoir à écrire une seule ligne de code. • la rubrique à afficher dans la liste. • la clé de parcours utilisée : cette rubrique sert de tri pour le remplissage de la liste et donc indique l’ordre dans lequel seront visualisées les valeurs de la liste. • la valeur récupérée : lors de la sélection d’un élément de la liste, la valeur récupérée pourra être : •soit l’indice de la ligne sélectionnée, •soit une valeur du fichier de données. Généralement, on choisit comme valeur récupérée une rubrique du fichier de données. Il s’agit le plus souvent de la clé unique, ce qui permet de faire par exemple des recherches dans les fichiers de données.

Partie 3 : Pages et champs d’une page

Remplissage d’une liste à partir d’un fichier de données ou d’une requête (page semi-dynamique ou dynamique)

GAF_WebDev.book Page 170 Lundi, 15. décembre 2008 5:31 17

170

Notes

l’exemple pratique, consultez l’écran "Contenu" de la liste "Images" pour vérifier les 4 Dans caractéristiques de la liste fichier utilisée. Les différents types de liste fichier Deux types de liste fichier sont disponibles : • Liste fichier "Chargé en mémoire" : Le contenu de la liste est chargé en mémoire, puis affiché dans la liste. L’accès aux différents éléments de la liste est plus rapide. Ce mode est réservé pour des fichiers de données de moins de 10 000 enregistrements. • Liste fichier "Accès direct (sans limite)" : La liste affiche directement le contenu du fichier de données ou de la requête. L’enregistrement en cours correspond à l’élément sélectionné. Chaque déplacement dans la liste entraîne un accès au fichier lié. Ce type de liste est réservé aux fichiers de plus de 10 000 enregistrements.

Partie 3 : Pages et champs d’une page

Remplissage d’une liste sur source

Il est par exemple possible de remplir une liste avec des informations contenues dans un tableau WLangage. Le tableau est une variable globale de la page : Tableau_Mois est un tableau de 12 chaînes Tableau_Mois = ["Janvier", "Février", "Mars", "Avril", "Mai",... "Juin", "Juillet", "Août", "Septembre", ... "Octobre", "Novembre", "Décembre"]

Dans le cas d’une liste sur source, le remplissage est effectué à partir des éléments fournis lors de la création de la liste. Ces informations sont également disponibles dans l’onglet "Contenu". Ces informations sont les suivantes : • le nom de la variable source, • la variable à afficher dans la liste, • la variable mémorisée. l’exemple pratique, consultez l’écran "Contenu" de la liste "Mois" pour vérifier les carac4 Dans téristiques de la liste sur source utilisée. Caractéristiques d’une liste Lorsque la liste est créée, ses caractéristiques sont modifiables directement dans la fenêtre de description du champ (option "Description" du menu contextuel). Les différents onglets permettent de préciser toutes les options des listes. Par exemple, l’onglet "Détail" permet de : • définir si la liste est multisélection. • définir si la liste est triée, ... Programmation d’une liste La programmation des champs Liste est très simple avec WebDev : il suffit d’utiliser les fonctions WLangage commençant par les lettres LISTE. Ces fonctions peuvent être utilisées sur les listes mémoire, fichier ou sur source.

GAF_WebDev.book Page 171 Lundi, 15. décembre 2008 5:31 17

Notes

171

Vous ne savez pas si la fonction peut être utilisée sur une liste mémoire, fichier ou sur source ? Consultez l’aide en ligne! Utilisez la touche F1 sur le nom de la fonction.

Modification d’une liste (mémoire uniquement)

Pour modifier un élément dans une liste, deux méthodes sont disponibles (code serveur) : • la fonction ListeModifie • l'affectation directe en utilisant l'indice de l'élément à modifier. ListeModifie(LISTE_Mémoire,"Emma") // Modifie l'élément en cours ListeModifie(LISTE_Mémoire,"Emma",1) // Modifie l'élément 1 LISTE_Mémoire[1] = "Emma" // Modifie l'élément 1

Remarque : Pour accéder à un élément d’une liste, il faut préciser son indice. Le premier élément d’une liste a l'indice "1".

Dans une liste mono-sélection, pour récupérer l'élément sélectionné, il suffit de connaître l'indice de l'élément sélectionné. La fonction ListeSelect retourne l’indice de l’élément sélectionné. Si aucun élément n’est sélectionné, la fonction ListeSelect retourne la valeur "–1". Indice Prénom Indice Prénom

est un entier est une chaîne = ListeSelect(LISTE_Mémoire) = LISTE_Mémoire[Indice] //Récupère l'élément sélectionné

//Ou bien Prénom = LISTE_Mémoire[LISTE_Mémoire]

Remarque : dans le cas d’une liste fichier, si la valeur récupérée correspond à une valeur du fichier de données, il suffira d’utiliser directement le nom de la liste pour connaître la valeur sélectionnée. Dans une liste multi-sélections, pour récupérer toutes les options sélectionnées, il faut utiliser la fonction ListeSelect. Tant que la fonction ListeSelect ne renvoie pas la valeur "-1", cette fonction retourne l’indice de l'option sélectionnée. // Lignes sélectionnées dans une liste multi-sélections i est un entier = 1 LigneSelectionnee est un entier LigneSelectionnee = ListeSelect(ListeMulti,1) TANTQUE LigneSelectionnee <> -1 Trace("La ligne n°"+ LigneSelectionnee +" est sélectionnée") i++ LigneSelectionnee = ListeSelect(ListeMulti,i) FIN

Pour connaître le nombre d’éléments sélectionnés, il faut utiliser la fonction ListeSelectOccurrence.

Partie 3 : Pages et champs d’une page

Récupération de l’élément sélectionné

GAF_WebDev.book Page 172 Lundi, 15. décembre 2008 5:31 17

172

Pour connaître le nombre d’éléments dans la liste, il faut utiliser la propriété Occurrence ou la fonction ListeOccurrence : SI LISTE_Mémoire..Occurrence = 0 ALORS

//liste vide

Suppression (dans les listes mémoire uniquement)

Pour supprimer une valeur, il faut utiliser la fonction ListeSupprime. Pour supprimer toutes les valeurs de la liste, il faut utiliser la fonction ListeSupprimeTout. // Supprime l'élément sélectionné ListeSupprime(LISTE_Mémoire) Recherche (code serveur/navigateur)

Pour chercher un élément dans une liste, il faut utiliser la fonction ListeCherche.

Type de champ : Combo

(page statique, semi-dynamique et dynamique)

Résumé Une combo est également appelée "combo box" ou encore "liste déroulante". Comme pour une liste, lors de la création d’un champ "Combo", vous pouvez créer : • une combo "Fichier" dont le contenu est lié à un fichier de données ou une requête (page dynamique ou semidynamique). • une combo "Mémoire" dont vous définissez le contenu dans l’éditeur ou par programmation (code serveur). • une combo sur source, liée à une variable WLangage. On appliquera les mêmes règles que pour les listes pour choisir la méthode de remplissage. La combo se déroule lorsque le champ est sélectionné. Attention !

Partie 3 : Pages et champs d’une page

SI ListeCherche(LISTE_Mémoire, Valeur) = -1 ALORS //n'existe pas SINON //existe déjà FIN

Au contraire des listes, les combos ne sont pas multi-sélections : un seul élément peut être sélectionné dans la combo.

Ce paragraphe présente uniquement les spécificités des combos. Pour tout ce qui concerne le fonctionnement des combos, consultez le paragraphe concernant les listes. Exemple pratique 4 Ouvrez la page "PAGE_Combo.WWH" sous l’éditeur.

GAF_WebDev.book Page 173 Lundi, 15. décembre 2008 5:31 17

173

le test de cette page. Cette page contient : 4 •Lancez une combo mémoire triée, • une combo fichier, • une combo sur source. sur les différents boutons et observez ce qu'il se passe. Le code des différents bou4 Cliquez tons est affiché dans la page.

4 Revenez sous l'éditeur. Caractéristiques de la combo Lorsque la combo est créée, ses caractéristiques sont modifiables directement dans la fenêtre de description du champ (option "Description" du menu contextuel). Vous retrouverez tous les caractéristiques indiquées dans l’assistant, et d’autres options très intéressantes. L’écran "Détail" permet par exemple de définir si la combo est triée.

(page semi-dynamique et dynamique)

Résumé Il ne faut pas confondre "Table" et "champ Table". On parle de Table pour une base de données de type SQL. On parle de champ Table pour visualiser en tableau des données (ou "browse" ou encore "feuille de données"). Dans ce cas, ces données peuvent être saisies ou provenir d’un fichier de données (ou d’une table). Ouf! Le champ table WebDev permet de visualiser ou de modifier des données : • en mémoire : on parle alors de table mémoire ou table remplie par programmation. • provenant de fichiers de données ou de requêtes : on parle alors de table fichier. • provenant de variables WLangage : on parle alors de table sur source. L’avantage des tables est de pouvoir visualiser plusieurs données dans une seule page. La gestion des tables est différente selon s’il s’agit d’une table mémoire ou d’une table fichier ou d’une table sur source. Le choix du type de table est réalisé dès la création de la table, dans l’assistant. Nous allons détailler les différents types de champs table. Exemple pratique et testez la page "PAGE_Table.WWH". Cette page présente différents traitements sur 4 Ouvrez les tables mémoire et les tables fichiers Mode de remplissage de la table Comme une liste, une table peut être une table fichier (liée à un fichier de données ou à une requête), une table mémoire ou une table sur source.

Partie 3 : Pages et champs d’une page

Type de champ : Table

GAF_WebDev.book Page 174 Lundi, 15. décembre 2008 5:31 17

174

Remplissage d’une table mémoire

Une table mémoire peut être remplie par programmation grâce à la fonction TableAjouteLigne. Cette fonction admet en paramètre le nom de la table et le contenu de la ligne. Le contenu de la ligne est donné colonne par colonne : chaque valeur de colonne est séparée par "une virgule". //Ajout d'une ligne dans sa totalité TableAjouteLigne(TABLE_Menu,"Lundi","Œuf meurette",... "Blanquette", "Glace vanille") Table reliée à un fichier de données ou une requête

Si la requête n’existe pas lors de la création du champ, il est possible de créer la requête en même temps que le champ. La requête sera alors intégrée à la page qui contient le champ. Attention : si vous utilisez une requête intégrée, cette requête sera utilisée uniquement pour ce champ. Elle ne pourra pas être réutilisée dans votre projet.

Ce fichier ou cette requête sera lu automatiquement sans avoir à écrire aucune ligne de code. • les rubriques affichées dans une ligne de la table. • la clé de parcours utilisée : cette rubrique sert de tri pour le remplissage de la table et donc indique l’ordre dans lequel seront visualisées les valeurs de la table. Par exemple, vous pourrez visualiser dans une table les produits et avec leur libellé.

Notes

Partie 3 : Pages et champs d’une page

Notes

Lors de la création d’un champ table remplie à partir d’un fichier de données ou d’une requête, vous devez indiquer plusieurs informations : • le fichier de l’analyse ou la requête qui servira de source de données pour le remplissage.

Les différents types de tables fichier Deux types de tables fichier sont disponibles : • Table fichier "Chargé en mémoire" : Le contenu du fichier est chargé en mémoire, puis affiché dans la table. L’accès aux différents éléments du fichier est plus rapide. Les données étant en mémoire, toutes les colonnes de la table sont triables. Ce mode est réservé pour des fichiers de données de moins de 10 000 enregistrements. • Table fichier "Accès direct (sans limite)" : La table affiche directement le contenu du fichier de données ou de la requête. L’enregistrement en cours correspond à l’élément sélectionné. Chaque déplacement dans la table entraîne un accès au fichier lié. Ce type de table est réservé aux fichiers de plus de 10 000 enregistrements.

Caractéristiques de la table Lorsque la table est créée, ses caractéristiques sont modifiables directement dans la fenêtre de description du champ (option "Description" du menu contextuel).

GAF_WebDev.book Page 175 Lundi, 15. décembre 2008 5:31 17

175

La fenêtre de description d’une table est composée de deux zones : • la zone supérieure présentant le nom de la table, des colonnes et leur type • la zone inférieure composée des différents onglets de description. Si le nom de la table est sélectionné, la partie inférieure présente les caractéristiques de la table. Si une colonne est sélectionnée, la partie inférieure présente les caractéristiques des colonnes.

Notes

Quelques informations intéressantes : • Les tables peuvent être mono ou multi-sélections (onglet "Détail" de la description de la table). • L’onglet "Style" permet de définir les couleurs des lignes paires et impaires, la couleur de la ligne sélectionnée, l’image affichée pendant le chargement de la table (si la table est en mode Ajax) Que la table soit une table fichier, mémoire ou sur source, les colonnes (en mode Ajax) peuvent être : • Ajustables par l’utilisateur (grâce à la souris) • avec recherche : une loupe sera affichée, permettant de rechercher dans la colonne une valeur. • triables. Des flèches apparaîtront dans le titre des colonnes, signalant à l’utilisateur que la colonne peut être triée, ainsi que le sens de tri. La loupe ou la flèche de tri sont visibles sur toutes les colonnes d’une table mémoire, ou d’une table sur source, ou d’une table fichier chargée en mémoire. La loupe et la flèche ne sont visibles que sur les colonnes liées à une clé (index) pour les tables fichier en mode "Accès direct (sans limite)".

• de type lien (onglet "Détail" de la description des colonnes). Il est alors possible de définir l’action du lien et sa destination. Programmation d’une table mémoire Dans une table mémoire, chaque ligne de la table est identifiée par un indice. Pour manipuler une ligne comme pour manipuler une colonne, il faut préciser l’indice de la ligne concernée. Si l’indice n'est pas précisé, c’est la ligne sélectionnée qui est concernée. • Une table mémoire peut être manipulée ligne par ligne ou colonne par colonne. • Une table mémoire peut être en saisie ou en affichage. • Une table mémoire peut être en mono-sélection ou en multi-sélections. La programmation des champs Table est très simple avec WebDev : il suffit d’utiliser les fonctions WLangage commençant par les lettres TABLE. Ces fonctions peuvent être utilisées sur les tables

Partie 3 : Pages et champs d’une page

Notes

Vous retrouverez toutes les caractéristiques indiquées dans l’assistant, et d’autres options très intéressantes.

GAF_WebDev.book Page 176 Lundi, 15. décembre 2008 5:31 17

176

Notes

mémoire, sur source et/ou fichier. Vous ne savez pas si la fonction peut être utilisée sur une table mémoire, sur source ou fichier? Consultez l’aide en ligne! Utilisez la touche F1 sur le nom de la fonction.

Partie 3 : Pages et champs d’une page

Voici quelques-unes des fonctions les plus utiles pour manipuler une table mémoire : • TableModifieLigne modifie une ligne de la table (soit la ligne en cours, soit la ligne dont le numéro d'indice est précisé). • TableSelect retourne l'indice de la ligne en cours (sélectionnée) ou l’indice d’une des lignes sélectionnées dans le cas d’une table multi-sélections. • TableSelectPlus permet de sélectionner par programmation une ligne de table en fonction de son indice et/ou de sélectionner plusieurs lignes. • TableSupprime permet de supprimer une ligne de table. • TableSupprimeTout vide toute la table mémoire. Astuces sur les tables la page "PAGE_Table.wdw". En haut à droite des tables, vous pouvez constater que 4 Testez l’icône est affichée. Cette icône permet d’afficher un menu contextuel pour la table. Ce menu contextuel permet d’exporter la table au format Word, Excel, XML et PDF. Pour plus de détails sur le fonctionnement d’une table fichier, mémoire ou sur source, consultez l’aide en ligne (mot-clé : "Champ table").

Type de champ : Zone répétée

(page semi-dynamique et dynamique)

Résumé Les zones répétées permettent de répéter "n" fois un ensemble de champs. Lors de cette répétition, les champs de la zone répétée peuvent afficher des informations différentes. Il est ainsi possible d’afficher, à chaque répétition, des enregistrements d’une base de données. Les zones répétées peuvent être de plusieurs types : • Zone répétée mémoire : la zone répétée est remplie par programmation. • Zone répétée fichier : la zone répétée est remplie à partir d’un fichier de données ou d’une requête, automatiquement, sans une seule ligne de code. • Zone répétée sur source : la zone répétée est remplie à partir d’une variable WLangage sans aucune ligne de code. Pour chaque champ de la zone répétée, plusieurs caractéristiques peuvent être modifiées lors de la répétition : valeur, libellé, couleur du texte, état, ... La zone répétée peut être déplacée comme un champ. Lors de son déplacement, tous les champs associés à la zone répétée se déplacent en même temps. Lors de la création d’une zone répétée, il est possible de définir le nombre de colonnes qui seront affichées. Cette option permet d’obtenir une répétition horizontale dans la limite du nombre de colonnes indiqué. Lorsque le nombre de colonnes est atteint, une nouvelle répétition verticale est ajoutée.

GAF_WebDev.book Page 177 Lundi, 15. décembre 2008 5:31 17

177

Exemple pratique et testez la page "PAGE_ZoneRepetee.WWH". Cette page utilise une zone répétée 4 Ouvrez mémoire listant des annonces. La gestion des zones répétées est différente s’il s’agit : • d’une zone répétée mémoire, • d’une zone répétée reliée à un fichier de données ou une requête. • d’une zone répétée sur source. Nous allons détailler les types de zones répétées existant. En détail

Une zone répétée peut contenir plusieurs champs (libellé, champ de saisie, image, ...). Chacun des champs de la zone répétée peut être associé à un attribut. Cet attribut permet de modifier une propriété du champ associé (sa valeur, son libellé, sa couleur, sa visibilité, ...). Il est également possible de créer un attribut dans la zone répétée sans que celuici ne soit associé à un champ : on parle alors d’attribut libre (cet attribut peut contenir la valeur d’un compteur par exemple). Le comportement d’une zone répétée mémoire est très proche d’un champ Table. Dans une zone répétée mémoire, chaque ligne de la zone répétée est identifiée par un indice. Pour ajouter une ligne dans une zone répétée (code serveur), il faut utiliser la fonction ZoneRépétéeAjouteLigne. Cette fonction attend en paramètre : • le nom de la zone répétée, • les valeurs des attributs (dans l’ordre) séparées par des virgules : //Ajout d’une ligne dans la zone répétée ZoneRépétéeAjouteLigne(ZR_Annonce, ... "Annonce n°1", ... "IMAGE1.JPG", ... "Vends GOLF GTI 3." + RC + "Année 1998" + RC + ... "Très bon état. C.T. OK." + RC + ... "5 portes, Sièges cuir, vitres teintées." + RC + ... "Peinture noire, jantes alu." + RC + ... "Moteur 38000KM. 9000 € à débattre.", 1, 1)

La fonction ZoneRépétéeModifieLigne modifie une ligne de la zone répétée (code serveur). Une ligne de zone répétée est supprimée avec la fonction ZoneRépétéeSupprime (code serveur). Zone répétée reliée à un fichier ou une requête

Lors de la création d’un champ zone répétée fichier vous devez indiquer le fichier de l’analyse ou la requête qui servira de source de données pour le remplissage. Ce fichier de données ou cette requête sera lu automatiquement sans avoir à écrire aucune ligne de code.

Partie 3 : Pages et champs d’une page

Zone répétée mémoire (remplie par programmation en code serveur)

GAF_WebDev.book Page 178 Lundi, 15. décembre 2008 5:31 17

178

La clé de parcours sélectionnée sert de tri pour le remplissage de la zone répétée et indique donc l’ordre dans lequel seront visualisées les valeurs. Par exemple, vous pourrez visualiser dans une zone répétée : • la photographie d’un produit • la description du produit • le prix du produit • ... Les caractéristiques d’une zone répétée sont disponibles dans la fenêtre de description de la zone répétée (menu contextuel, option "Description"). Pour plus de détails sur le fonctionnement d’une zone répétée fichier, mémoire ou sur source, consultez l’aide en ligne (mot-clé : "Zone répétée").

Partie 3 : Pages et champs d’une page

Type de champ : Arbre

(page semi-dynamique et dynamique)

Résumé Aussi appelé champ "Liste arborescente" ou champ "Treeview", un champ Arbre est comparable à une liste dont le contenu est classé hiérarchiquement. Plus simplement, les données sont classées comme lorsque vous utilisez l’explorateur de fichiers de Windows. Exemple pratique 4 Ouvrez et testez la page "PAGE_Arbre.WWH".

4 Cliquez sur les différents liens du champ Arbre et observez ce qu'il se passe. 4 Revenez sous l'éditeur et étudiez le code des boutons. En détail Le champ Arbre est géré par programmation. Les fonctions du WLangage qui permettent de programmer un arbre commencent par ArbreXXX. Ces fonctions sont comparables aux fonctions de gestion des tables remplies par programmation. Par exemple, ArbreAjoute, ArbreSupprimeTout, ArbreSupprime, ArbreSelect, ... Il est également possible de manipuler le champ Arbre ligne par ligne pour modifier les propriétés d’une ligne. Il est par exemple possible d’utiliser : • la propriété Couleur pour modifier la couleur d’une ligne, • la propriété CouleurFond pour modifier la couleur de fond d’une ligne, • la propriété Police pour modifier les caractéristiques de la police d’une ligne, ... Nous ne détaillerons pas les fonctions de manipulation des arbres. Pour plus de détails, consultez l’aide en ligne (mot-clé : "Arbre, Manipuler un arbre par programmation").

GAF_WebDev.book Page 179 Lundi, 15. décembre 2008 5:31 17

179

Type de champ : Cellule

(page statique, semi-dynamique et dynamique)

Résumé Une cellule permet d’éviter l’effet de déplacement d’un groupe de champs vers le bas lorsqu’une zone répétée ou une table est située à côté d’un groupe de champs. Un champ cellule est un conteneur. Une cellule peut contenir plusieurs champs (de tous types).

Pour plus de détails sur l’avantage des cellules dans l’ergonomie d’un site, consultez “Regroupez vos champs dans des cellules”, page 192, ainsi que l’aide en ligne (mot-clé : "Cellule").

Partie 3 : Pages et champs d’une page

Exemple pratique et testez la page "PAGE_Cellule.WWH". Cette page présente différents liens placés à 4 Ouvrez coté d’une zone répétée. Les liens placés à gauche sont regroupés dans une cellule, les liens placés à droite ne sont pas regroupés dans une cellule. Lorsque la zone répétée change de taille (passage de la page 1 à la page 2 grâce à la réglette), les champs placés dans la cellule ne sont pas déplacés.

GAF_WebDev.book Page 180 Lundi, 15. décembre 2008 5:31 17

180

Type de champ : Graphe

(page statique, semi-dynamique et dynamique)

Partie 3 : Pages et champs d’une page

Résumé Le champ Graphe permet d’inclure simplement un graphique dans une page. La source de données de ce champ peut être : • définie par programmation, • un fichier de données ou une requête, • une colonne de table, • un champ Liste, • un tableau WLangage. Il est possible de réaliser plusieurs types de graphes en 2 ou 3 dimensions : Secteur, Histogramme, Boursier, Courbe, Nuage de points, ... Pour chacun des types de graphes, des options d'affichage permettent d'avoir des rendus différents. Exemple pratique et testez la page "PAGE_Graphe.WWH". Cette page utilise un champ Graphe. Les don4 Ouvrez nées de ce graphe sont définies par programmation grâce à la fonction grAjouteDonnée. La fenêtre de description du champ Graphe permet de définir les principaux paramètres du champ. Pour plus de détails, consultez l’aide en ligne (mot-clé : "Champ Graphe").

Champs spécialisés Sous l’appellation "Champs spécialisés" nous avons regroupé tous les champs d’une utilisation rare ou spécifique. Ces champs sont les suivants : • Calendrier • Tableau HTML • Ligne • Champ HTML • Web Caméra • Applet Java • Flash et Flex • Silverlight • iFrame • Chemin de navigation • Plan du site • Réglette • Vignette Nous allons étudier rapidement ces différents types de champs. Le projet "Pages_et_champs.WWP" contient un exemple pour chacun de ces types de champs. Nous vous conseillons de tester la page associée au champ, d’étudier le code présent dans cette page et de consulter l’aide en ligne pour obtenir plus de détails sur l’utilisation de ces champs.

GAF_WebDev.book Page 181 Lundi, 15. décembre 2008 5:31 17

181

Type de champ : Calendrier

(page statique, semi-dynamique et dynamique)

Notes

Résumé Le champ Calendrier permet de créer un calendrier. Ce calendrier permet à l’internaute de sélectionner une date. Lors de la description d’un champ de saisie de type date, il est également possible d’afficher un bouton Calendrier. Ce bouton permet à l’internaute de sélectionner la date voulue.

Exemple pratique la page "PAGE_Calendrier.WWH". Cette page présente les différents modes d’utilisation 4 Ouvrez d’un calendrier.

(page statique, semi-dynamique et dynamique)

Résumé Un tableau HTML est une table de positionnement qui permet de positionner les champs dans la page. Tout comme un champ de type cellule, un champ tableau HTML est un conteneur et évite l’effet de déplacement d’un groupe de champs vers le bas lorsqu’une zone répétée ou une table est située à côté de ce groupe de champs. Chaque partie du tableau peut être comparée à un champ de type cellule et peut contenir plusieurs champs de tous types. En détail Le champ tableau HTML peut être adapté suivant les besoins. Il est ainsi possible de fractionner ou de fusionner des cellules du tableau pour disposer au mieux les divers champs inclus dans le tableau HTML. Nous ne détaillerons pas plus les tableaux HTML dans ce cours d’auto-formation. Consultez l’aide en ligne (mot-clé : "Tableau HTML") pour plus d’informations.

Type de champ : Ligne

(page statique, semi-dynamique et dynamique)

Notes

Résumé Les lignes permettent de dessiner un trait ou de définir un pavé de couleur (par exemple : un trait de séparation entre deux ensembles de champs de saisie dans une page). Il est préférable d’utiliser les objets "Cadre" disponibles dans le catalogue de champs du volet "Assistants, Exemples et Composants".

Nous ne détaillerons pas plus ce type de champ dans ce cours d’auto-formation. Consultez l’aide en ligne (mot-clé : "Champ Ligne") pour plus d’informations.

Partie 3 : Pages et champs d’une page

Type de champ : Tableau HTML

GAF_WebDev.book Page 182 Lundi, 15. décembre 2008 5:31 17

182

Type de champ : HTML

(page statique, semi-dynamique et dynamique)

Résumé Le champ HTML permet d’intégrer du code HTML dans une page WebDev. Ce code HTML peut correspondre à : • un ensemble de balises HTML standard, • des scripts Javascript ou VBScript, ... Exemple pratique et testez la page "PAGE_ChampHTML.WWH". 4 Ouvrez Cette page permet d’afficher le contenu d’un autre site dans un champ HTML.

Partie 3 : Pages et champs d’une page

Type de champ : Web Caméra

(page statique, semi-dynamique et dynamique)

Résumé Un champ Web Caméra permet de visualiser une source vidéo (par séquence d’images) provenant d’une caméra extérieure reliée au serveur ou à un autre ordinateur accessible depuis le serveur. Pour plus de détails sur le champ Web Caméra, reportez-vous à l’aide en ligne (mot-clé : "WEB, Champ Web Caméra"). Type de champ : Applet Java

(page statique, semi-dynamique et dynamique)

Résumé Un champ Applet Java permet d’intégrer une applet (ou "appliquette") Java® dans une page WebDev. Généralement, cette applet Java® (fichier avec extension ".class") est placée dans le répertoire des images du projet (répertoire "<Nom du projet>_WEB"). Attention : Vérifiez que tous les fichiers nécessaires au fonctionnement de l’applet (fichiers ".class", images, etc ...) sont placés au même endroit que l’applet elle-même. Exemple pratique 4 Ouvrez et testez la page "PAGE_ChampApplet.WWH".

sous l’éditeur et affichez la description du champ (option "Description" du menu con4 Revenez textuel). Dans l’onglet "Général", le champ Applet Java dispose de plusieurs caractéristiques spécifiques aux applets Java® : • Applet : Nom du fichier applet (extension ".class"). Attention : le nom du fichier doit respecter les minuscules et majuscules (Java® est sensible à la casse). • Base : Répertoire où sont installés les fichiers nécessaires à l’applet Java® (fichiers ".class", images, fichiers texte, ...). Généralement, ce répertoire correspond au répertoire des images du projet : "<Nom du projet>_WEB". • Paramètres et valeurs : liste des paramètres attendus par l’applet et valeurs de ces paramètres.

GAF_WebDev.book Page 183 Lundi, 15. décembre 2008 5:31 17

Type de champ : Flash et Flex

(page statique, semi-dynamique et dynamique)

Résumé Un champ Flash permet d’intégrer une animation Flash® dans une page WebDev. De la même manière, le champ Flex permet d’afficher une animation Flex dans une page WebDev. Généralement, cette animation Flash® ou Flex (fichier avec extension ".SWF") est placée dans le répertoire des images du projet ("<Nom du projet>_WEB"). Remarque : Les animations Flash® ou Flex sont bâties sur la même architecture. Exemple pratique et testez la page "PAGE_ChampFlash.WWH". Cette page présente l’utilisation d’un 4 Ouvrez champ Flash et permet de faire interagir ce champ avec la page WebDev. sous l’éditeur et affichez la description du champ (option "Description" du menu con4 Revenez textuel). Dans l’onglet "Général", le champ Flash (ou Flex) dispose de plusieurs caractéristiques spécifiques : • En pause au démarrage : l’animation est chargée puis mise en pause dès la fin de son chargement. • Lire en boucle : l’animation est lue en boucle. • Afficher le menu : le menu contextuel par défaut des animations Flash® est actif sur le clic droit de la souris. • Police de périphérique : les polices utilisées pour l’affichage de texte dans l’animation Flash® seront les polices les plus proches trouvées sur le poste de l’internaute. • Afficher les messages d’avertissements : si cette option est cochée, les boîtes d’alertes concernant le plug-in Flash® seront affichées. • Qualité : précise la qualité d’affichage de l’animation Flash®.

Partie 3 : Pages et champs d’une page

183

GAF_WebDev.book Page 184 Lundi, 15. décembre 2008 5:31 17

184

Partie 3 : Pages et champs d’une page

• Echelle : indique comment l’animation Flash® doit être redimensionnée si la fenêtre du navigateur est redimensionnée.

• Mode fenêtre : indique comment l’animation Flash® doit être affichée. • Alignement : paramètre l’alignement de l’animation dans le champ Flash. Il est possible d’effectuer des interactions entre Flash® et une page WebDev ! Pour cela, il suffit de cocher l’option "Champ accessible depuis le Javascript" dans l’onglet "Détail" de la fenêtre de description du champ Flash :

Type de champ : Silverlight

(page statique, semi-dynamique et dynamique)

Résumé Le champ Silverlight 2 permet d’intégrer dans une page WebDev des applications riches Siverlight 2. Exemple pratique comprendre le fonctionnement du champ Silverlight, ouvrez et testez la page 4 Pour "PAGE_Silverlight.WWH". Nous ne détaillerons pas plus ce type de champ dans ce cours d’auto-formation. Consultez l’aide en ligne (mot-clé : "Champ Silverlight") pour plus d’informations.

GAF_WebDev.book Page 185 Lundi, 15. décembre 2008 5:31 17

185

Type de champ : IFrame

(page statique, semi-dynamique et dynamique)

Résumé iFrame est un concept HTML : ce concept indique que l’on insère dans une zone définie de la page en cours un contenu "WEB" indépendant. Par exemple, dans une page WebDev, il est possible d’afficher : •une autre page du site en cours •une page d’un autre site. Exemple pratique et testez la page "PAGE_IFrame.WWH". 4 Ouvrez Nous ne détaillerons pas plus ce type de champ dans ce cours d’auto-formation. Consultez l’aide en ligne (mot-clé : "Champ IFrame") pour plus d’informations.

(page statique, semi-dynamique et dynamique)

Résumé Le chemin de navigation permet à l’utilisateur de naviguer entre les pages du site grâce à un menu de type "Matériel >> Photo >> Numérique". Exemple pratique et testez la page "PAGE_CheminNavigation". 4 Ouvrez Nous ne détaillerons pas plus ce type de champ dans ce cours d’auto-formation. Consultez l’aide en ligne (mot-clé : "Champ Chemin de navigation") pour plus d’informations.

Type de champ : Plan de site

(page statique, semi-dynamique et dynamique)

Résumé Le champ Plan du site permet à l’internaute : • d’avoir une vision d’ensemble des pages présentes dans le site. • d’accéder directement à une page spécifique. Le champ "Plan de site" permet également d’améliorer le référencement d’un site. Exemple pratique et testez la page "PAGE_PlanDeSite". 4 Ouvrez Nous ne détaillerons pas plus ce type de champ dans ce cours d’auto-formation. Consultez l’aide en ligne (mot-clé : "Plan du site") pour plus d’informations.

Partie 3 : Pages et champs d’une page

Type de champ : Chemin de navigation

GAF_WebDev.book Page 186 Lundi, 15. décembre 2008 5:31 17

186

Type de champ : Réglette

(page semi-dynamique et dynamique)

Résumé Un champ zone répétée (ou table) peut contenir beaucoup d’enregistrements. Il est judicieux de ne pas afficher tous les enregistrements à la fois, sous peine de ralentir l’affichage des pages et d’exaspérer l’internaute ! La réglette permet de parcourir les enregistrements page par page.

Partie 3 : Pages et champs d’une page

Pour chaque champ zone répétée ou table, il est possible de définir le nombre maximal de lignes par page (onglet "Général" de la fenêtre de description de la zone répétée, ou onglet "Détail" de la fenêtre de description du champ Table) : Si le nombre de lignes de la table ou de la zone répétée est supérieur au nombre maximal de lignes par page, une réglette peut être associée à la table ou à la zone répétée. La création d’une réglette est proposée lors de la création de la zone répétée ou de la table. Il est également possible de créer la réglette après avoir créé une table ou une zone répétée. Exemple : Les réglettes permettent de "découper" l’affichage d’une zone répétée :

Dans cet exemple, 32 enregistrements ont été ajoutés dans une zone répétée. Le nombre maximal de lignes par page a été défini à 5. Une réglette a été associée à la zone répétée pour afficher les 32 enregistrements par page de 5 enregistrements (ce qui fait un total de 7 pages). En détail Nous ne détaillerons pas plus les réglettes dans ce cours d’auto-formation. Consultez l’aide en ligne (mot-clé : "Réglette") pour plus d’informations.

GAF_WebDev.book Page 187 Lundi, 15. décembre 2008 5:31 17

187

Type de champ : Vignette

(page statique, semi-dynamique et dynamique)

Résumé Les vignettes permettent de gérer automatiquement l’affichage d’images sous forme de vignette. Lors d’un clic sur la vignette, l’image originale sera automatiquement affichée dans une nouvelle fenêtre du navigateur : rien à programmer.

Partie 3 : Pages et champs d’une page

En détail et testez la page "PAGE_Vignette.WWH". 4 Ouvrez Nous ne détaillerons pas plus ce type de champ dans ce cours d’auto-formation. Consultez l’aide en ligne (mot-clé : "Champ Vignette") pour plus d’informations.

GAF_WebDev.book Page 188 Lundi, 15. décembre 2008 5:31 17

188

LEÇON 3.4. ERGONOMIE DU SITE Ce que vous allez apprendre dans cette leçon ... • Améliorer l’ergonomie des champs et des pages • Améliorer l’ergonomie des sites

Partie 3 : Pages et champs d’une page

Durée estimée : 20mn

GAF_WebDev.book Page 189 Lundi, 15. décembre 2008 5:31 17

189

Présentation WebDev propose de nombreux outils pour améliorer l’ergonomie de vos pages et de vos champs. Nous vous présentons ici quelques solutions simples pour améliorer efficacement l’utilisabilité de vos pages.

Notes

Un style est un ensemble de paramètres (couleurs, polices, ...) concernant l’aspect d’un champ. A chaque type de champ correspond une série de styles différents. Il existe plusieurs styles pour chaque type de champs. L'ensemble de tous les styles constitue la feuille de styles. En HTML, ces feuilles de styles correspondent à un fichier d’extension CSS (Cascading Style Sheet). Chaque projet WebDev est associé à une feuille de styles (fichier CSS). Lors du développement d’un site, il est conseillé de créer tous les styles nécessaires. Cette création peut être effectuée : • avant de commencer à créer les pages du site • au fur et à mesure des besoins. Si vous utilisez un modèle de pages pour votre projet, les styles du modèle de pages sont incorporés à la feuille de styles du projet.

Attention !

Pour chaque type de champ, il est possible : • soit d’utiliser un style WebDev. Les styles WebDev sont des styles proposés par défaut. Ces styles regroupent un ensemble de styles CSS. • soit d’utiliser directement des styles CSS (option "Aspect libre" dans l’onglet "Style" du champ). Si plusieurs champs d'un projet utilisent le même style CSS, la modification du style effectuée depuis un champ sera répercutée sur tous les champs du projet utilisant ce style CSS. Si le style est "Local au champ", seul le style du champ en cours sera modifié. Ce style ne fera plus partie de la feuille de style CSS mais sera incorporé directement dans la page HTML. Il est conseillé de ne pas abuser des styles "Local au champ" car cette option alourdit de manière non négligeable la taille des pages HTML (et donc le temps de chargement de la page).

Notes

Vous souhaitez réutiliser les styles d’un site dans un autre site ? Rien de plus simple, il suffit de copier la feuille de styles (fichier .CSS) d’un projet à un autre. La feuille de styles à utiliser est indiquée dans la description du projet (option "Projet .. Description du projet", onglet "Style"). WebDev offre également la possibilité d’utiliser des feuilles de styles CSS libres. Ces feuilles de styles seront utilisées par les pages HTML générées.

Partie 3 : Pages et champs d’une page

Manipuler les styles des champs

GAF_WebDev.book Page 190 Lundi, 15. décembre 2008 5:31 17

190

Définir l’ordre de saisie des champs L'ordre de saisie des champs est l'ordre dans lequel seront saisis les champs lors de l’appui sur la touche [TAB] pendant l’exécution sur le navigateur de l’internaute. L'ordre de saisie par défaut est l'ordre de création des champs. Il peut être modifié : • soit en donnant un ordre de saisie automatique, le premier champ en saisie sera le champ situé le plus en haut à gauche, le deuxième sera celui qui est immédiatement situé à droite ou immédiatement en dessous, ... • soit en spécifiant un ordre de saisie par sélection. définir un ordre de navigation 4 Pour navigation .. Définir en automatique".

automatique, activez l'option "Page .. Ordre de

Partie 3 : Pages et champs d’une page

éditer l’ordre de saisie des champs, sélectionnez l’option "Page .. Ordre de navigation .. 4 Pour Editer" :

Pour définir un ordre de saisie par sélection : 4 1. Sélectionnez les champs dans l'ordre de saisie que vous souhaitez tout en maintenant la touche [CTRL] enfoncée. 2. Activez l'option "Page .. Ordre de navigation .. Définir par la sélection". Vous pouvez visualiser l'ordre de saisie des champs en maintenant appuyée la touche [F5].

Afficher une aide dans les pages WebDev propose plusieurs moyens pour proposer une aide pour les champs : messages d’aide, bulles d’aide et texte d’indication. Ils peuvent guider l’internaute et l’informer sur telle ou telle action. Voyons plus en détail les différentes possibilités.

GAF_WebDev.book Page 191 Lundi, 15. décembre 2008 5:31 17

191

La bulle d’aide La bulle d'aide s’affiche lorsque le champ est survolé avec la souris. Elle reste affichée tant que le curseur de la souris est positionné sur le champ. Il convient d’utiliser la bulle d’aide lorsque le texte associé n’excède pas quelques mots. Les bulles d’aide sont particulièrement intéressantes pour les boutons de type image ou les images, ces champs étant souvent sans libellé. Si la bulle d’aide est disponible pour le type de champ voulu, le texte de la bulle d’aide peut être saisi dans l’onglet "Note, Aide" de la fenêtre de description du champ.

Un message d’aide peut être affiché à tout moment grâce à la fonction navigateur Message : Message("Le nom ne doit pas dépasser 25 caractères")

Si le message d’aide est disponible pour le type de champ voulu, le texte du message peut être saisi dans l’onglet "Note, Aide" de la fenêtre de description du champ.

Astuce

Texte d’indication Les champs de saisie proposent également un autre type d’aide : le texte d’indication. Ce texte s’affiche en grisé dans le champ vide. Ce texte d’aide s’efface automatiquement dès que l’internaute tape le premier caractère dans le champ. Ce texte d’indication est saisi directement dans l’onglet "Contenu" du champ de saisie. Le texte d’indication peut également être défini par programmation grâce à la propriété Indication : SAI_Client..Indication = "Entrez le nom du client"

Utiliser les zones extensibles pour ancrer les champs Dans les différentes pages que vous avez manipulées jusqu’à présent, vous avez sans doute vu sous l’éditeur des carrés gris apparaître, avec des chiffres à l’intérieur, à la limite de l’éditeur (en bas et à droite). Ces éléments matérialisent les zones d’extension.

Partie 3 : Pages et champs d’une page

Astuce

Message d’aide Le message d’aide est affiché dans la barre d’état de la fenêtre du navigateur. Le message s’affiche lors du survol d’un champ s’il comporte un message d’aide. Il reste affiché tant que la souris est positionnée au-dessus du champ. Il convient d’utiliser un message d’aide lorsque le texte associé n’excède pas une ligne. Ce message permet de donner des informations supplémentaires sur les données en cours de saisie.

GAF_WebDev.book Page 192 Lundi, 15. décembre 2008 5:31 17

192

Par défaut, les champs WebDev ont une position réelle dans la page, définie en pixels :

Partie 3 : Pages et champs d’une page

L’inconvénient est que si la taille du navigateur est plus grande que celle prévue lors du développement, des zones blanches risquent d’apparaître à droite et en bas de la page. Pour ancrer un champ (le plus souvent vers le bas ou vers la droite), il suffit d’utiliser un pourcentage pour les coordonnées du champ. Pour cela, il suffit de faire un clic droit sur la coordonnée et de choisir "Extensible". Il est alors possible de choisir la valeur voulue.

Lorsque la taille du navigateur sera agrandie, les champs seront automatiquement déplacés pour suivre l’agrandissement.

Regroupez vos champs dans des cellules Nous avons déjà vu le champ Cellule lors de la présentation des différents types de champs. Le champ Cellule est un des types de champs les plus important car il permet d’optimiser la mise en page de vos sites, et permet d’accéder à de nombreuses fonctionnalités. Usez et abusez des champs Cellule. Les cellules ont plusieurs fonctions dans une page. Elles permettent : • de définir une zone de couleur, ou une zone contenant une image. Les champs pourront être positionnés sur la cellule. • d’empêcher le déplacement de champs présents à côté d’une zone répétée ou d’une table. Dans ce cas, les champs qui ne doivent pas être déplacés sont regroupés dans la cellule. • de gérer l’ancrage d’un groupe de champs. En effet, si un groupe de champs doit être déplacé lors du redimensionnement du navigateur, il est nécessaire de les grouper dans une cellule, et de gérer la zone extensible sur la cellule. • de déplacer un groupe de champs dans une page. • de gérer des boîtes de dialogue avancées. Quelques exemples :

4 Pour définir une zone de couleur (ou bien l’image de fond d’une zone), il suffit de :

1. Créer un champ Cellule (icône ) ou option "Insertion .. Champ .. Cellule". 2. Afficher la fenêtre de description de la cellule (option "Description" du menu contextuel).

GAF_WebDev.book Page 193 Lundi, 15. décembre 2008 5:31 17

193

Notes

3. Afficher l’onglet "Bord, Fond". 4. Sélectionner la couleur de fond ou l’image de fond de la cellule. Il n’est pas conseillé d’utiliser un champ image pour afficher une image de fond dans la page. En effet, le champ image alourdi inutilement le code HTML de la page.

4 Pour regrouper les champs dans une cellule :

Pour vérifier que vos champs sont bien associés à la cellule, affichez la fenêtre de description de la cellule. L’onglet "Général" présente la liste des champs liés à la cellule.

Remarque : pour associer un groupe de champs à une cellule, il est également possible de sélectionner les champs sous l’éditeur et d’utiliser l’option "Champ .. Refactoring .. Créer une cellule avec la sélection".

4 Pour déplacer un groupe de champs dans une page :

1. Créez un champ Cellule (icône ) ou option "Insertion .. Champ .. Cellule". 2. Associez les champs à déplacer à la cellule. 3. Dans l’onglet "Détail" de la description de la cellule, cochez les options : •Le champ peut être superposé •Déplaçable à la souris •Si nécessaire, cochez les champs qui permettront de déplacer la cellule. 4. En exécution, l’internaute pourra déplacer la cellule à l’aide de la souris.

Utilisez les règles et les options d’alignement Un aspect important de l’interface d’un site réside dans l’aspect de l’interface. Un point important est l’harmonie des différents champs, leur alignement dans la page. Pour vous aider à réaliser des interfaces respectant les normes de programmation, WebDev met à votre disposition plusieurs outils : grille, règles, options d’alignement, positionnement automatique, ... Voici quelques pistes pour choisir l’outil qui vous convient le mieux. Vous avez sans doute remarqué, lors de la création de nos pages dans les leçons précédentes, des traits en pointillés apparaissant lors du déplacement de vos champs dans la page. C’est le positionnement automatique. Ces "règles" vous aident à positionner en temps réel vos champs. Vous pouvez tout de suite voir si le champ est aligné avec le champ précédent.

Partie 3 : Pages et champs d’une page

Notes

1. Créez un champ Cellule (icône ) ou option "Insertion .. Champ .. Cellule". 2. Positionnez les champs dans la cellule. Pour que le champ soit associé à la cellule, le bord de la cellule doit devenir vert sous l’éditeur.

GAF_WebDev.book Page 194 Lundi, 15. décembre 2008 5:31 17

194

Notes

Pour paramétrer le positionnement automatique, il suffit de sélectionner l’option "Affichage .. Options .. Modifier les options" et de sélectionner l’onglet "Magnétisme". Pour déplacer vos champs sans utiliser le magnétisme ou les règles, maintenez la touche [SHIFT] enfoncée pendant le déplacement.

Partie 3 : Pages et champs d’une page

Mais il se peut que vous vouliez aligner certains champs de votre page après les avoir créés (après leur déplacement par exemple). Vous pouvez utiliser les options d’alignement. Ces options sont toutes regroupées dans une barre d’outils. Pour l’afficher, sélectionnez l’option "Affichage .. Barre d’outils .. Alignement".

Pour utiliser les fonctionnalités de cette barre d’outils, il suffit de sélectionner plusieurs champs (à l’aide du lasso de la souris ou bien avec la touche CTRL) et de choisir un des alignements prédéfinis. Le champ pris pour base pour effectuer l’alignement est le premier champ sélectionné. Si aucun des alignements prédéfinis ne vous convient, vous pouvez toujours effectuer un alignement entièrement personnalisé : l’icône de la barre d’outils permet de paramétrer toutes les options. Si vous souhaitez positionner vos champs au millimètre près, vous pouvez également utiliser les règles. Les règles sont affichables par les touches [CTRL] + [R].

Utilisez des onglets pour regrouper vos champs Votre page contient un nombre de champs important ? Pourquoi ne pas utiliser les onglets pour regrouper les informations. Les onglets permettent de regrouper les informations par thèmes. L’internaute peut accéder directement à un thème en cliquant sur "le volet" voulu. Ce principe des onglets est utilisé actuellement dans de nombreux sites de vente en ligne. Le principe de fonctionnement des onglets est très simple. Il faut : 1. Créer le champ onglet (icône ). 2. Créer autant de volets que nécessaire et donner un libellé à chaque volet (onglet "Général" de la description du champ). 3. Associer les champs sur les onglets voulus. Un champ peut être commun à tous les onglets ou associé à un onglet spécifique. Pour associer le champ à un onglet, deux solutions : 4 1. En déplaçant le champ : •Cliquez sur l’onglet souhaité pour rendre un des volets actifs. •Cliquez sur le champ à associer et déplacez-le vers le volet actif. Le champ est alors directement associé à l’onglet et au volet d’onglet. 2. En utilisant le menu contextuel : •Déplacez si nécessaire le champ à associer sur votre onglet. •Cliquez avec le bouton droit de la souris sur le champ à associer et choisissez l’option

GAF_WebDev.book Page 195 Lundi, 15. décembre 2008 5:31 17

195

"Associer à un onglet..." du menu contextuel. •Sélectionnez l’onglet et le volet d’onglet souhaité et validez. Le champ est automatiquement associé à l’onglet et au volet d’onglet spécifié. Un champ ne peut être associé qu’à un seul volet d’onglet. Le champ sera actif et visible lorsque le volet d’onglet sera activé. Votre onglet est prêt à fonctionner, aucune programmation spécifique n’est nécessaire.

Améliorez la navigation dans votre site

Tous ces éléments contribuent à faire une interface conviviale et permettent à l’internaute de retrouver facilement l’information voulue.

Utilisez des boîtes de dialogue modernes Désormais, grâce aux nouvelles technologies Web, les sites peuvent ressembler à des applications Windows et afficher des boîtes de dialogues. Pour que l'internaute identifie rapidement la page active, le système de grisage automatique des pages est automatiquement utilisé. La page inactive est assombrie, et ainsi les pages actives sont plus visibles par l'internaute.

Partie 3 : Pages et champs d’une page

WebDev propose de nombreux outils pour améliorer la navigation dans un site : • les onglets (nous venons de le voir) • les menus déroulants (pour plus de détails, consultez l’aide en ligne). • les champs de type Chemin de navigation (nous l’avons vu dans la leçon précédente) • les champs de type Plan du site (nous l’avons également vu dans la leçon précédente)

GAF_WebDev.book Page 196 Lundi, 15. décembre 2008 5:31 17

196

WebDev permet de créer des dialogues de plusieurs façons, aussi bien en code serveur qu’en code navigateur. A vous de choisir la méthode qui vous convient le mieux. Pour plus de détails sur toutes les possibilités, consultez l’aide en ligne (mot-clé "Dialoguer, Avec l’internaute").

Interface du site : Utilisez les modèles de pages La première fonctionnalité d’un site est de rendre un service (vente en ligne, recherche, ...), mais un des aspects les plus importants est son interface : si l’interface est conviviale, l’internaute reviendra, sinon il ira voir ailleurs.

Partie 3 : Pages et champs d’une page

Pour améliorer l’interface de votre site et unifier son apparence, WebDev propose d’utiliser des modèles de pages. Dans ce cours, jusqu’à présent, tous les sites que nous avons créés ou manipulés possédaient des modèles de pages. Qu’est-ce qu’un modèle de pages ? Un modèle de pages est comme son nom l’indique un modèle. Ce modèle pourra être utilisé par toute nouvelle page créée. En général, un modèle de pages contient la présentation "par défaut" des pages d’un site. Par exemple : un logo, une zone d’identification, une zone de liens, les menus sous forme d’onglets ou de menus déroulants, ... Un modèle de pages permet de mettre en place une charte graphique. Un modèle de pages peut contenir des images, des champs, du code, des procédures ... Une page peut être liée à plusieurs modèles. Toutes les pages qui utilisent un modèle de pages héritent de toutes les caractéristiques du modèle. Lors de la création d’une page vierge, il est possible de sélectionner le modèle associé à cette page.

GAF_WebDev.book Page 197 Lundi, 15. décembre 2008 5:31 17

197

Si le modèle est modifié, toutes les pages qui y font référence sont également modifiées. Nous avons déjà manipulé les modèles de pages dans la partie 2 de ce cours (voir “Personnalisation du site généré”, page 99).

Astuce

Comment créer un modèle de pages ? Pour créer un modèle : 4 1. Sélectionnez l’option de menu "Fichier .. Nouveau", survolez "Page" et cliquez sur "Modèle de pages". 2. Le modèle est en cours de création. Créez les champs, images, procédures ... nécessaires au modèle. 3. Enregistrez le modèle et donnez-lui un nom. Pensez à nommer spécifiquement tous les champs de votre modèle avec préfixe afin d’identifier facilement les différents champs du modèle. Par exemple : "MDL_SAI_PSEUDONYME" pour un champ de saisie du modèle.

Comment appliquer un modèle de pages ? avez déjà créé un ou plusieurs modèles dans votre projet, vous pouvez les appliquer à 4 Sivosvous pages existantes ou à vos nouvelles pages : 1. Ouvrez une page existante de votre projet ou créez une nouvelle page. 2. Sélectionnez l’option "Insertion .. Un modèle de pages". L’écran suivant s’affiche :

3. Sélectionnez le modèle à importer puis validez. Les champs, le code des champs et les procédures du modèle sont importés (un petit carré jaune apparaît sur le côté gauche de chaque champ du modèle). 4. Les champs, codes et procédures du modèle ne sont pas modifiables directement depuis la page dans laquelle le modèle a été appliqué. Pour cela, il est nécessaire d’ouvrir le modèle : cliquez sur un champ du modèle (identifié par un carré jaune) et sélectionnez l’option "Ouvrir le modèle" du menu contextuel.

Partie 3 : Pages et champs d’une page

Remarque : Plusieurs modèles de pages peuvent être appliqués à une même page.

GAF_WebDev.book Page 198 Lundi, 15. décembre 2008 5:31 17

198

Mise à jour du modèle A chaque modification du modèle, la mise à jour de toutes les pages associées est proposée :

2. Sélectionnez le modèle à dissocier, puis cliquez sur "Dissocier". 3. Validez. Les champs du modèle sont alors libérés dans la page et font désormais partie de la page.

Astuce

Partie 3 : Pages et champs d’une page

Comment dissocier un modèle importé dans une page ? dissocier un modèle importé dans une page, c’est-à-dire pour séparer le modèle et la 4 Pour page (la page ne sera plus mise à jour lors de la modification du modèle) : 1. Sélectionnez l’option "Page .. Liste des modèles utilisés". Une fenêtre de sélection s’affiche :

Conseil d’utilisation : Modèles de pages ou Framesets ? Plutôt que d’utiliser des framesets dans vos sites WebDev, utilisez des modèles de pages ! Plus pratiques à utiliser et à maintenir, les modèles sont surtout moins lourds à charger en exécution dans le navigateur ! En effet, pour une page avec un modèle associé, une seule page est générée, alors qu’un frameset génère autant de pages que de frames !

GAF_WebDev.book Page 199 Lundi, 15. décembre 2008 5:31 17

199

LEÇON 3.5. RÉUTILISABILITÉ Ce que vous allez apprendre dans cette leçon ... • Réutiliser les éléments d’un projet

Partie 3 : Pages et champs d’une page

Durée estimée : 10 mn

GAF_WebDev.book Page 200 Lundi, 15. décembre 2008 5:31 17

200

Qu’est-ce que la réutilisabilité ? Vous avez créé un sélecteur de répertoire que vous aimeriez réutiliser dans tous vos projets ? Vous souhaitez utiliser toujours les mêmes boutons "Fermer" placés au même endroit dans vos sites ? WebDev vous offre différents moyens de gérer la réutilisabilité des fonctionnalités que vous créez. Dans la leçon précédente nous avons vu les modèles de pages, qui permettent de définir simplement le look d’un site. Dans cette leçon, nous allons plutôt voir comment réutiliser des fonctionnalités.

Partie 3 : Pages et champs d’une page

Réutiliser un ensemble de champs Vous voulez réutiliser un ensemble de champs ? WebDev met à votre disposition les outils suivants : • Superchamps • Modèle de champs • Pages internes Nous allons voir ces trois outils en détail, avec un tableau récapitulatif pour chaque option pour vous aider à choisir l’outil le mieux adapté à vos souhaits. Le superchamp Le superchamp est un type de champ avancé. Un superchamp regroupe un ensemble de champs dans un but spécifique (par exemple sélecteur de dates, sélecteur de fichiers, ...). Le superchamp contient : • les champs nécessaires • le code nécessaire à son fonctionnement. Tableau récapitulatif Création

Création d’un superchamp : 1. Créer le superchamp (icône ). 2. Mettre les champs dans le superchamp. Refactoring : Sélectionner les champs et faire "Champ .. Refactoring .. Créer un superchamp avec la sélection".

Réutilisabilité

Via le dictionnaire

Mise à jour

Via le dictionnaire (grâce au système d’abonnement)

Travail en groupe

Partage du dictionnaire par réseau. Gestionnaire de sources non disponible.

GAF_WebDev.book Page 201 Lundi, 15. décembre 2008 5:31 17

201

Page interne Le champ Page interne permet d’inclure une page (et son code) dans une autre page. A l’exécution, la page à fusionner sera dynamiquement fusionnée à la page de réception. Une page interne est une page spécifique. Dans cette page, vous pouvez mettre tout type de champs. Une page interne est un fichier d’extension "WWH". Le champ "Page interne" permet de partager dynamiquement une même partie d’interface au sein d’une ou de plusieurs sites.

Création

Création d’une page interne : 1. Créer la page interne (option "Fichier .. Nouveau .. Page .. Page interne") 2. Définir les champs et le code. 3. Enregistrer. Refactoring : Sélectionner les champs et faire "Champ .. Refactoring .. Créer une page interne avec la sélection".

Réutilisabilité

Via le champ "Page interne".

Mise à jour

Via le dictionnaire (grâce au système d’abonnement) ou via le GDS.

Travail en groupe

Partage par le réseau ou par le GDS

Avantages

Possibilité de modifier dynamiquement (par programmation) la page interne utilisée dans le champ Page interne.

Inconvénients

- Pas améliorable dans l’interface d’accueil : pas de surcharge, pas de déplacement de champs. - Zone rectangulaire.

Exemple d’utilisation : Page dont l’interface ne va pas changer quel que soit le projet : page d’options. Exemple pratique si ce n’est déjà fait le projet "Pages_et_champs.WWP". 4 Ouvrez Sélectionnez l’option "Fichier .. Ouvrir un projet", puis sélectionnez le sous-répertoire "AutoFormation\Corriges\Pages_et_champs" du répertoire d’installation de WebDev 14. Sélectionnez le fichier "Pages_et_champs.WWP". Le projet se charge. et testez la page "PAGE_PageInterne". Cette page utilise deux champs de type Page 4 Ouvrez Interne qui permettent la saisie de l’identité d’une personne et la saisie de son adresse.

Partie 3 : Pages et champs d’une page

Tableau récapitulatif

GAF_WebDev.book Page 202 Lundi, 15. décembre 2008 5:31 17

202

Modèle de champs Un modèle de champs est un ensemble de champs, réutilisables dans plusieurs pages. Un modèle de champs est une page spécifique contenant différents champs. Dans cette page, vous pouvez mettre tout type de champs. Un modèle de champs est un fichier d’extension "WWT".

Partie 3 : Pages et champs d’une page

Tableau récapitulatif Création

Création d’un modèle de champs : 1. Créer le modèle de champ (option "Fichier .. Nouveau .. Page .. Modèle de champs") 2. Définir les champs et le code. 3. Enregistrer. Refactoring : Sélectionner les champs et faire "Champ .. Refactoring .. Créer un modèle de champs avec la sélection".

Réutilisabilité

Via le champ "Modèle de champs".

Mise à jour

Via le dictionnaire (grâce au système d’abonnement) ou via le GDS.

Travail en groupe

Partage par le réseau ou par le GDS

Avantages

Les modèles de champs peuvent être surchargés : du code peut être ajouté, les champs peuvent être déplacés dans la page utilisant le modèle de champs. Les champs peuvent être modifiés.

Dans la majorité des cas, il est conseillé d’utiliser un modèle de champs.

GAF_WebDev.book Page 203 Lundi, 15. décembre 2008 5:31 17

203

LEÇON 3.6. QUESTIONS/RÉPONSES Ce que vous allez apprendre dans cette leçon ... • Astuces sur la manipulation de champs

Partie 3 : Pages et champs d’une page

Durée estimée : 10 mn

GAF_WebDev.book Page 204 Lundi, 15. décembre 2008 5:31 17

204

Question

Comment afficher une page dans une nouvelle fenêtre du navigateur ?

Pour afficher une page dans une nouvelle fenêtre du navigateur, il existe deux possibilités : • par programmation, en utilisant les fonctions NavigateurOuvre, PageAffiche ou SiteDynamiqueAffiche • par l’éditeur de pages en utilisant les options d’un bouton ou d’un lien.

Partie 3 : Pages et champs d’une page

Par programmation Pour ouvrir une nouvelle fenêtre de navigateur, utilisez le code suivant : 4 1. Fonction NavigateurOuvre :

2. Fonction PageAffiche :

3. Fonction PageSemiDynamiqueAffiche :

4. Fonction SiteDynamiqueAffiche :

Pour plus de détails sur la syntaxe des fonctions évoquées ci-dessus, consultez l’aide en ligne (mots-clés : "NavigateurOuvre", "PageAffiche", "PageSemiDynamiqueAffiche" et "SiteDynamiqueAffiche"). En utilisant l’éditeur de pages indiquer que lors du clic sur un lien ou un bouton, la destination sera un nouveau 4 Pour navigateur : 1. Affichez la fenêtre de description du bouton ou du lien. 2. Choisissez dans la liste "Destination" l’option "Nouveau navigateur (_blank)".

GAF_WebDev.book Page 205 Lundi, 15. décembre 2008 5:31 17

205

. Une fenêtre de paramétrage du navigateur s’affiche :

4. Sélectionnez les options souhaitées puis validez.

Question

Comment modifier la couleur d’un libellé par programmation ?

La couleur des libellés se définit dans le style du champ (dans la fenêtre de description du champ). Cependant, il est possible de modifier la couleur d’un libellé par programmation. La syntaxe est la suivante : -- Clic de BTN_Bouton1 (serveur) //Colorier le libellé en rouge LIB_Libelle1..Couleur = RougePastel //Colorier la couleur de fond du libellé en gris foncé LIB_Libelle2..CouleurFond = GrisFoncé //Remettre la couleur d’origine du libellé LIB_Libelle1..Couleur = iCouleurDéfaut

La fonction RVB permet de définir une couleur à partir des valeurs des composantes Rouge, Vert et Bleu. -- Clic de BTN_Bouton1 (serveur) nCouleur = RVB(<rouge>, <vert>, <bleu>)

Il est également possible de modifier la couleur de fond d’un champ de saisie en code navigateur. Il suffit simplement d’affecter le code couleur HTML à la propriété CouleurFond : -- Clic de BTN_Bouton2 (navigateur) CHP_ERREUR..CouleurFond = "FF0000"

Partie 3 : Pages et champs d’une page

3. Cliquez sur le bouton

GAF_WebDev.book Page 206 Lundi, 15. décembre 2008 5:31 17

206

Question

Comment rendre un bouton invisible ?

Un bouton peut être rendu invisible par programmation avec la syntaxe serveur suivante : -- Clic de BTN_Bouton1 (serveur) BTN_Bouton2..Visible = Faux

Donnez la valeur "Vrai" pour rendre le bouton visible. Cette syntaxe peut également être appliquée sur tous les types de champs et sur les groupes de champs.

Question

Comment créer un menu vertical dans une page WebDev ?

Partie 3 : Pages et champs d’une page

Vous pouvez désormais disposer le menu verticalement dans l’éditeur de menu. Cette fonctionnalité est accessible via l’option de menu "Insertion .. Menu". Pour créer un menu : 4 1. Créez une nouvelle page si nécessaire. 2. Sélectionnez l’option "Insertion .. Menu". Un menu complété de deux options s’insère alors dans votre page. 3. Cliquez sur le menu pour passer en mode "édition de menu" (un cadre jaune entoure le menu). 4. Faîtes un clic droit sur l’option de menu souhaitée. • Cliquez sur "Description de l’option" pour modifier l’option sélectionnée. • Cliquez sur "Description du menu" pour modifier l’apparence du menu. • Cliquez sur "Ajouter après" pour ajouter une option de menu. • Cliquez sur "Insérer une option" pour insérer une option de menu à l’emplacement sélectionné. • Cliquez sur "Insérer un sous-menu" pour ajouter un sous-menu dans l’arborescence de l’option de menu sélectionnée. 5. Faîtes à nouveau un clic droit sur le menu et choisissez "Description du menu". 6. Choisissez l’orientation souhaitée pour votre menu : horizontal (par défaut) ou vertical. 7. Appuyez sur la touche [Entrée] pour sortir du mode "édition" du menu.

Question

Comment harmoniser le look de mes pages ?

Pour harmoniser le look des pages d’un projet, il suffit de créer un modèle de pages (option "Fichier .. Enregistrer comme un modèle") et d’utiliser ce modèle pour toutes les pages de votre projet. Pour plus de détails, consultez l’aide ligne (mot-clé : "Modèles de pages").

GAF_WebDev.book Page 207 Lundi, 15. décembre 2008 5:31 17

207

Question

Comment ajouter un menu contextuel sur une table ou une zone répétée ?

Un menu contextuel peut être ajouté sur un champ table ou une zone répétée grâce à l’option "Menu contextuel" disponible dans la fenêtre de description : • du champ table, onglet "Détail". • de la zone répétée, onglet "Général". Le menu contextuel sera accessible dans la page grâce à l’image . L’internaute a simplement à cliquer sur cette image pour voir apparaître le menu contextuel proposant un export des données de la table ou de la zone répétée vers un fichier Excel, Word ou XML (créé sur le serveur et proposé en téléchargement à l’internaute). Question

Comment passer des paramètres à une page ?

Dans le code de déclaration des globales de la page, la syntaxe du code WLangage à saisir est la suivante : -- Déclaration des globales de la page PROCEDURE NomPage(NomParam1, NomParam2, ...)

Lors de l’ouverture de la page avec la fonction PageAffiche, passez les paramètres après le nom de la page, par exemple : PageAffiche(NomPage, ValeurParam1, ValeurParam2, ...)

Si vous initialisez un paramètre lors de la déclaration de la procédure, ce paramètre devient optionnel :

Notes

-- Déclaration des globales de la page PROCEDURE NomPage(NomParam1, NomParam2 = "ValeurDéfaut")

Il est préférable de passer des paramètres à une page plutôt que de déclarer des variables globales dans le projet.

Pour connaître la valeur d’un paramètre passé à la page en cours, utilisez la fonction PageParamètre.

Question

Comment regrouper des champs pour modifier leurs propriétés par programmation ?

Effectuez la manipulation suivante : 1. Sélectionnez plusieurs champs avec la souris. 2. Affichez le menu contextuel sur la sélection et choisissez "Groupes .. Associer la sélection...".

Partie 3 : Pages et champs d’une page

La méthode pour passer des paramètres à une page est similaire au passage des paramètres à une procédure.

GAF_WebDev.book Page 208 Lundi, 15. décembre 2008 5:31 17

208

3. Cliquez sur "Nouveau" et saisissez un nom pour le groupe que vous venez de créer, puis validez. Les champs sont associés à ce groupe. Vous pourrez ensuite : • Modifier les propriétés des champs du groupe par la syntaxe : NomGroupe..<NomPropriété> = Valeur

• Accéder à la valeur des propriétés des champs du groupe par la syntaxe :

Attention !

Valeur = NomGroupe..<NomPropriété>

Partie 3 : Pages et champs d’une page

Question

Seules les propriétés communes à tous les champs du groupe sont modifiables.

Comment transformer un champ Interrupteur en un champ Sélecteur ?

L’option de menu "Champ .. Permuter .. Sélecteur/Interrupteur" inverse ces deux types de champs.

Question

Comment aligner des champs ?

Il existe plusieurs méthodes pour aligner des champs : • Les règles d’alignement (option "Affichage .. Règles"). • Le correcteur d’interface en temps réel. • Les options d’alignement (option "Affichage .. Barres d’outils .. Alignement"). L’activation des règles se réalise en appuyant simultanément sur les touches [CTRL] et [R]. Sur les règles, il suffit de placer des "marques de tabulation" ou "repères" que vous pouvez déplacer (en cliquant sur la règle à l’endroit souhaité). Ensuite, lors du déplacement des champs dans la page, ceux-ci se trouveront "magnétisés" ou "aimantés" à l’approche de ces marques. Le correcteur d’interface en temps réel est actif par défaut. Pour le désactiver pendant le déplacement d’un champ, il suffit d’appuyer sur la touche [SHIFT]. Les options d’alignement permettent de cadrer, positionner ou encore agrandir ou réduire la taille des champs en fonction d’autres champs.

Prenez quelques minutes pour effectuer des tests, vous comprendrez l’intérêt des alignements et vous ne pourrez plus vous en passer !

GAF_WebDev.book Page 209 Lundi, 15. décembre 2008 5:31 17

209

Question

Comment mettre des boutons à la même taille ?

tout d’abord le bouton servant de référence pour la taille (largeur et hauteur), 4 Sélectionnez puis les autres boutons à redimensionner. les actions d’alignement "Même largeur, même hauteur" dans les outils d’aligne4 Sélectionnez ments (option "Champ .. Alignement").

Question

Comment ajouter une image en fond de page ?

L’option "Image de fond fixe" permet de ne pas faire défiler l’image si la page ne peut pas être affichée en totalité dans le navigateur. Remarque : Plus la taille de l’image utilisée est importante, plus l’affichage de la page sera lent.

Question

Comment afficher la date de mise à jour d’un site ?

Pour afficher automatiquement la date de mise à jour d’un site : 1. Créez un champ d’affichage formaté (option "Insertion .. Champ .. Affichage formaté"). 2. Saisissez le code suivant dans le traitement d’initialisation du champ : MoiMême = fDate(ComplèteRep(fRepExe())+ ... "<Nom de la bibliothèque>.WDL", "", fModification)

Partie 3 : Pages et champs d’une page

Sur la page : 1. Faites un clic droit et sélectionnez l’option "Description". 2. Sélectionnez l’onglet "Style". 3. Sélectionnez l’image de fond de la page (option "Image de fond").

GAF_WebDev.book Page 210 Lundi, 15. décembre 2008 5:31 17

Partie 3 : Pages et champs d’une page

210

GAF_WebDev.book Page 211 Lundi, 15. décembre 2008 5:31 17

PARTIE 4 Bases de données et analyses

GAF_WebDev.book Page 212 Lundi, 15. dĂŠcembre 2008 5:31 17

GAF_WebDev.book Page 213 Lundi, 15. décembre 2008 5:31 17

213

LEÇON 4.1. INTRODUCTION Ce que vous allez apprendre dans cette leçon ... • Vocabulaire utilisé. • Les différents modes d’accès aux bases de données.

Partie 4 : Bases de données et analyses

Durée estimée : 10mn

GAF_WebDev.book Page 214 Lundi, 15. décembre 2008 5:31 17

214

Présentation Lors de la conception d’un site (statique ou dynamique), vous pouvez être amené à manipuler des données. Pour les stocker, vous devez constituer ce que l’on nomme "une base de données". Dans WebDev, lors de la création d’un projet manipulant des données, vous devez tout d’abord créer une analyse. Une "analyse" contient la description des fichiers (ou tables) contenant les données.

Partie 4 : Bases de données et analyses

Notes

C’est seulement lors de l’exécution de l’application, que ces descriptions sont utilisées pour créer la base de données et/ou les fichiers de données. C’est dans cette base ou dans ces fichiers que seront stockées les données. Plusieurs outils de maintenance des fichiers de données HyperFileSQL sont livrés en standard avec WebDev. Ils sont accessibles depuis le Centre de Contrôle HyperFileSQL.

WebDev sait gérer différents formats de bases de données (pour ne pas dire tous). Les plus courants sont : • HyperFileSQL, système de base de données intégrée à WebDev et livrée en standard. La base de données HyperFileSQL est disponible en mode Classic ou Client/Serveur. • AS/400, Access, Sybase, Informix ... • Oracle, SQL Server, MySQL, xBase, … • Toute base accessible en langage SQL sous Windows. • Texte (fichiers ASCII). Pour accéder aux données, il existe différentes techniques (appelées aussi "modes d’accès") : • Accès Natif • Accès OLE DB • Accès ODBC direct • Accès ODBC via OLE DB

Les différents modes d’accès aux bases de données Accès Natif Un accès natif manipule directement et exclusivement un format de base de données. Ce type d’accès optimisé est développé spécialement pour chaque format de base de données. Dans WebDev, il existe un accès natif (compatible WinDev) pour les bases de type : • HyperFileSQL Classic ou Client/Serveur (en standard) • xBase (en standard) • Access (en standard) • XML (en standard) • Oracle (optionnel) • AS/400 (optionnel) • SQL Server (optionnel) • Sybase (optionnel) • Informix (optionnel)

GAF_WebDev.book Page 215 Lundi, 15. décembre 2008 5:31 17

215

• DB2 (optionnel) • Progress (optionnel) • MySQL (optionnel et gratuit) D’autres accès natifs seront bientôt disponibles, contactez notre service commercial ! Les fonctions WLangage SQL* et HLit* sont utilisables avec ce type d’accès. Le code est ainsi portable et indépendant de la base de données. Accès ODBC direct Un accès via ODBC direct utilise un standard d’accès multi-bases. Vous devez installer la couche ODBC 32 bits sur le poste serveur Web. Cette couche est en général déjà installée sur les versions récentes de Windows. Vous pouvez le vérifier dans le Panneau de configuration de Windows sur votre poste de développement en choisissant l’option "Administrateur ODBC" (ou demander à l’administrateur de votre site pour le poste de déploiement).

Attention !

Accès OLE DB Un accès via OLE DB est un accès qui utilise un standard d’accès multi-bases. Ce type d’accès est basé sur le MDAC (Microsoft Data Access Component) de Microsoft. Si vous utilisez un accès OLE DB, vous devez obligatoirement installer le MDAC sur les postes de développement et de déploiement (version 2.6 minimum).

Toutes les bases de données ne sont pas obligatoirement accessibles via cette méthode. Si vous souhaitez utiliser ce type d’accès, vérifiez qu’il existe un pilote OLE DB. Les fonctions WLangage SQL* et HLit* sont utilisables avec ce type d’accès. Accès ODBC via OLE DB En résumé, il s’agit d’un "mélange" de OLE DB et de ODBC. Cette technique est la plus "lourde" et la moins efficace en terme de performances. Il est déconseillé de l’utiliser sur des bases de petite taille. Les fonctions WLangage SQL* et HLit* sont utilisables avec ce type d’accès. Quel accès utiliser ? obtenir plus d’informations sur les différents modes d’accès aux bases de données et 4 Pour savoir quel type utiliser, sélectionnez l’option "? .. Aide à l’utilisation des Bases de Données" dans le menu de WebDev.

Partie 4 : Bases de données et analyses

Attention toutes les bases de données ne sont pas obligatoirement accessibles via cette méthode. Si vous souhaitez utiliser ce type d’accès, vérifiez qu’il existe un pilote ODBC. Seules les fonctions WLangage SQL* sont utilisables avec ce type d’accès.

GAF_WebDev.book Page 216 Lundi, 15. décembre 2008 5:31 17

216

LEÇON 4.2. PARCOURS DE FICHIERS ET DE REQUÊTES Ce que vous allez apprendre dans cette leçon ... • Parcours de type HLitPremier • Parcours de type HLitRecherche • Parcours de type POUR TOUT • Parcours de type POUR TOUT AVEC

Partie 4 : Bases de données et analyses

Durée estimée : 20mn

GAF_WebDev.book Page 217 Lundi, 15. décembre 2008 5:31 17

217

Parcours de type HLitPremier Le parcours de type HLitPremier permet de parcourir un fichier de données selon une rubrique clé (ou index) de parcours. Dans ce cas, la fonction HLitPremier est combinée à la fonction HLitSuivant qui permet, comme son nom l’indique de lire l’enregistrement suivant. Par exemple, le code suivant permet de parcourir le fichier Client selon la rubrique clé "Nom", du premier enregistrement au dernier. HLitPremier(Client, Nom) TANTQUE PAS HEnDehors(Client) // Traitement de l'enregistrement HLitSuivant(Client, Nom) FIN

Il est possible de réaliser de la même façon un parcours du fichier du dernier enregistrement au premier. Il suffit d’utiliser les fonctions HLitDernier et HLitPrécédent.

Parcours de type HLitRecherche Le parcours de type HLitRecherche permet de se positionner dans le fichier de données pour réaliser un parcours des enregistrements correspondant à une condition. Cette condition porte sur la clé de parcours (par exemple, toutes les commandes d’un client). La fonction HLitSuivant permet de lire l’enregistrement suivant correspondant à la condition. Par exemple, le code suivant permet de rechercher les clients dont le nom commence par "Dupont" : HLitRecherche(Client, Nom, "Dupont") TANTQUE HTrouve(Client) // Traitement de l'enregistrement HLitSuivant(Client, Nom) FIN

Remarque

Dans ce code, la boucle de parcours teste la valeur de la fonction HTrouve. La fonction HTrouve permet de savoir si un enregistrement correspondant à la condition a été trouvé. Par défaut, la fonction HLitRecherche effectue une recherche générique : tous les enregistrements commençant par la valeur indiquée sont recherchés (dans notre exemple, Dupont et Dupontel seront trouvés). Pour faire une recherche à l’identique : • utilisez la fonction HLitRecherchePremier. • utilisez la constante hIdentique avec la fonction HLitRecherche.

Partie 4 : Bases de données et analyses

Remarque

Dans ce code, la boucle de parcours teste la valeur de la fonction HEnDehors. La fonction HEnDehors permet de savoir si la fin du fichier est atteinte ou non. Lors du parcours d’une requête, la fonction HLitPremier ré-exécute automatiquement la requête.

GAF_WebDev.book Page 218 Lundi, 15. décembre 2008 5:31 17

218

Parcours de type POUR TOUT Le parcours de type POUR TOUT permet d’effectuer un parcours complet d’un fichier, d’une requête ou d’une vue HyperFileSQL. Le parcours peut être effectué : • sur la meilleure clé du fichier, détectée automatiquement par le moteur HyperFileSQL. • sur une clé spécifique. Par exemple, le code suivant permet de parcourir le fichier Client selon la rubrique "Nom", du premier enregistrement au dernier. POUR TOUT Client SUR Nom // Traitement des enregistrements FIN

Partie 4 : Bases de données et analyses

Ce code est équivalent au code présenté pour le parcours de type HLitPremier : HLitPremier(Client, Nom) TANTQUE PAS HEnDehors(Client) // Traitement de l'enregistrement HLitSuivant(Client, Nom) FIN

Il est possible d’effectuer le parcours du dernier enregistrement au premier, en précisant le sens de parcours : POUR TOUT Client SUR Nom DepuisFin // Traitement des enregistrements FIN

Parcours de type POUR TOUT AVEC Le parcours de type POUR TOUT AVEC permet de parcourir un fichier HyperFileSQL selon une condition. Le parcours peut être effectué : • sur la meilleure clé du fichier, détectée automatiquement par le moteur HyperFileSQL. • sur une clé spécifique. Par exemple, le code suivant permet de parcourir le fichier Client selon le numéro de client et en donnant une condition sur le nom du client. // Parcours avec filtre POUR TOUT Client AVEC "Nom = 'Dupont'" // Ajout des clients dans la liste ListeAjoute(ListeClient, Client.NumClient) FIN

GAF_WebDev.book Page 219 Lundi, 15. décembre 2008 5:31 17

219

Ce code est équivalent au code présenté pour le parcours de type HLitRecherche : HLitRecherche(Client, Nom, "Dupont") TANTQUE HTrouve(Client) // Traitement de l'enregistrement HLitSuivant(Client, Nom) FIN

Quel type de parcours choisir ?

Partie 4 : Bases de données et analyses

Tous les types de parcours présentés se valent. Le choix de l’un ou l’autre va dépendre des clés présentes dans le fichier, de la taille du fichier, du type de recherche effectuée (recherche de type "Contient" ou non).

GAF_WebDev.book Page 220 Lundi, 15. décembre 2008 5:31 17

220

LEÇON 4.3. GESTION DES ERREURS Ce que vous allez apprendre dans cette leçon ... • La gestion automatique des erreurs • La gestion programmée des erreurs

Partie 4 : Bases de données et analyses

Durée estimée : 20mn

GAF_WebDev.book Page 221 Lundi, 15. décembre 2008 5:31 17

221

Présentation

WebDev propose plusieurs modes de gestion de ces erreurs : • le mode automatique : pour chaque erreur rencontrée lors de la gestion des enregistrements de la base de données, une fenêtre spécifique est affichée à l’utilisateur. Cette fenêtre permet à l’utilisateur de modifier directement ses données. • le mode programmé manuellement : pour chaque erreur rencontrée lors de la gestion des enregistrements de la base de données, le programmeur traite directement l’erreur dans son programme. • le mode programmé avancé : pour chaque erreur rencontrée lors de la gestion des enregistrements de la base de données, une procédure ou une fenêtre personnalisée de gestion des erreurs est appelée. Nous allons détailler ces trois modes de gestion des erreurs à l’aide d’un exemple simple. Cet exemple est constitué de deux fichiers (Produit et TVA) nous permettant de tester simplement les erreurs de doublons et les erreurs d’intégrité. le projet "WB_ErreursHF.WWP". Ce projet est présent dans le sous-répertoire "Autofor4 Ouvrez mation\Corriges\WB_ErreursHF" de WebDev.

Gestion des erreurs en mode automatique Par défaut, le mode automatique est activé. Dans ce mode, WebDev propose des pages standard pour chaque type d’erreur. Ces pages indiquent à l’internaute le problème. Aucun code spécifique n’est nécessaire dans le site. Testons immédiatement le type d’erreur pouvant être affiché dans notre exemple simple.

4 Exécutez le projet "WB_ErreursHF" grâce au bouton "GO". 4 Cliquez sur "Gestion des erreurs de doublons et d’intégrité en mode automatique". allons tout d’abord tester les erreurs de doublons. Pour cela, saisissez les informations 4 Nous suivantes : • Référence : TEST • Libellé : Produit1 • Description : Produit1 • Prix : 50 • Taux de TVA : 5,5%

Partie 4 : Bases de données et analyses

Lors de la gestion d’une base de données, plusieurs types d’erreurs peuvent apparaître lors de l’ajout ou de la modification d’un enregistrement : • Erreur de mot de passe sur un fichier • Erreur de saisie obligatoire • Erreur de doublons • Erreur d’intégrité, ...

GAF_WebDev.book Page 222 Lundi, 15. décembre 2008 5:31 17

222

Partie 4 : Bases de données et analyses

4 Cliquez sur le bouton "OK". L’écran suivant s’affiche :

Cette boîte de dialogue explique clairement le problème : vous avez saisi une donnée pour la rubrique "Reference" qui existe déjà. Une erreur de doublon apparaît. Cette boîte de dialogue permet à l’internaute de corriger directement la valeur. Le bouton "OK" permet de valider la saisie dans la fenêtre d’erreur. Le bouton "Annuler" permet de revenir à l’écran ayant provoqué l’erreur. Cliquez sur le bouton "Annuler". maintenant les erreurs d’intégrité. Pour cela, saisissez les informations suivantes : 4 •Testons Référence : TEST2 • Libellé : Produit2 • Description : Produit2 • Prix : 50 • Taux de TVA : Pas de taux de TVA.

4 Cliquez sur le bouton "OK". L’écran suivant s’affiche :

Cette boîte de dialogue indique qu’une erreur d’intégrité est rencontrée (dans notre cas, la saisie du taux de TVA n’a pas été réalisée). Le bouton "Modifier" permet de revenir à l’écran en cours de saisie. Dans le mode automatique, dès qu’une erreur de gestion de base de données est rencontrée, les boîtes de dialogue d’assistance s’affichent. Il peut être intéressant dans certains cas de gérer plus ou moins manuellement ces erreurs. Dans ce cas, le programmeur peut intervenir de manière plus précise sur les erreurs rencontrées. sur "Annuler", puis cliquez sur le bouton "Retour à l’accueil". Le menu de l’exemple est 4 Cliquez affiché.

GAF_WebDev.book Page 223 Lundi, 15. décembre 2008 5:31 17

223

Gestion des erreurs en mode programmé manuellement Nous allons exécuter tout de suite l’exemple en mode programmation manuelle puis examiner le code correspondant. sur "Gestion des erreurs de doublons et d’intégrité en mode programmé manuelle4 Cliquez ment". allons tout d’abord tester les erreurs de doublons. Pour cela, saisissez les informations 4 Nous suivantes : • Référence : TEST • Libellé : Produit1 • Description : Produit1 • Prix : 50 • Taux de TVA : 5,5%

Cette boîte de dialogue affiche la raison du problème. maintenant les erreurs d’intégrité. Pour cela, saisissez les informations suivantes : 4 •Testons Référence : TEST2 • Libellé : Produit2 • Description : Produit2 • Prix : 50 • Taux de TVA : Pas de TVA

4 Cliquez sur le bouton "OK". L’écran suivant s’affiche :

4 Cliquez sur le bouton "OK". Fermez le site. Regardons maintenant le code qui a permis d’afficher ces messages : 4 1. Sous l’éditeur, ouvrez la page "PAGE_Erreurs_Manuel" (double-cliquez sur le nom de la page dans le volet "Explorateur"). 2. Affichez les traitements de la page (clic droit sur la page, option "Code"). Le code d’initialisation de la page contient la ligne de code suivante : HSurErreur("*",hErrTout,"")

Partie 4 : Bases de données et analyses

4 Cliquez sur le bouton "OK". L’écran suivant s’affiche :

GAF_WebDev.book Page 224 Lundi, 15. décembre 2008 5:31 17

224

Partie 4 : Bases de données et analyses

La fonction HSurErreur permet de modifier le mode de gestion des erreurs de la base de données. Les paramètres de la fonction permettent de spécifier l’étendue de la modification : • "*" pour indiquer que tous les fichiers de l’analyse sont concernés. • la constante hErrTout pour indiquer que tous les types d’erreurs sont concernés. Il est possible d’utiliser des constantes spécifiques pour chaque type d’erreur à prendre en compte. • "" (chaîne vide) pour indiquer qu’aucune page spécifique ou procédure spécifique ne doit être lancée : le traitement de l’erreur sera géré par le programmeur. 3. Fermez cette fenêtre de code. 4. Affichez le code du bouton "OK" (Sélectionnez le bouton et utilisez la touche [F2] par exemple). 5. Le code utilisé est le suivant : PageVersFichier() HAjoute(Produit) SI ErreurDétectée ALORS SI HErreurDoublon() ALORS Erreur("Erreur de doublon détectée."+... "Veuillez contrôler les données saisies." + RC + ... HErreurInfo()) RETOUR FIN SI HErreurIntégrité() ALORS Info("Erreur d'intégrité détectée."+... "Veuillez contrôler les données saisies"+ RC+ ... HErreurInfo()) RETOUR FIN FIN

Quelle est la signification de ce code ? • Les fonctions PageVersFichier et HAjoute permettent d’ajouter les données saisies dans le navigateur dans le fichier Produit. • La variable ErreurDétectée permet de savoir si une erreur est survenue lors de l’exécution de la dernière instruction (dans notre cas, la fonction HAjoute). Si ErreurDétectée est à Vrai, une erreur est survenue. Astuce : Il est également possible de tester directement le résultat renvoyé par la fonction HAjoute, en utilisant le code : PageVersFichier() SI HAjoute(Produit) = Faux ALORS

Si une erreur s’est produite lors de l’ajout de l’enregistrement, l’enregistrement n’est pas ajouté et il est nécessaire de traiter l’erreur afin de pouvoir continuer l’exécution du site. C’est ce que nous allons faire dans les lignes de code suivantes. • La fonction HErreurDoublon permet de tester si une erreur de doublons est survenue : HErreurDoublon renvoie alors Vrai. Que faire dans ce cas ? Dans notre code, nous affichons un message d’erreur, en précisant le message exact retourné par le moteur HyperFileSQL (grâce à la fonction HErreurInfo). Ensuite, le mot-clé RETOUR permet de revenir sur l’écran de saisie. • La fonction HErreurIntégrité permet de tester si une erreur d’intégrité est survenue. HErreurIntégrité renvoie alors Vrai. La suite du traitement est identique à la gestion des doublons.

GAF_WebDev.book Page 225 Lundi, 15. décembre 2008 5:31 17

225

Ce code nous a permis de gérer correctement les erreurs d’intégrité et / ou de doublons rencontrées lors de l’ajout de l’enregistrement. Mais le mieux serait d’intervenir également en amont, afin de détecter l’erreur effectuée par l’internaute et ainsi lui permettre de corriger sa saisie avant de la valider. Ainsi, pour empêcher une erreur de doublons, il suffit de rechercher si un enregistrement identique existe déjà dans la base. Une seule instruction suffit : HRecherche. // Contrôle pour les doublons // On recherche si le produit existe déjà SI HRecherche(Produit,Reference,SAI_Reference)=Vrai ALORS Erreur("Cette référence existe déjà"+ RC + ... "Merci de modifier cette valeur.") RETOUR FIN

// Contrôle pour l'intégrité // Vérification qu'une valeur a été saisie dans la combo SI TauxTVA..ValeurAffichée="Pas de TVA" ALORS Erreur("Veuillez saisir un taux de TVA.") RETOUR FIN

Pour tester cette solution, lancez l’exécution du site : 4 1. Cliquez sur "Gestion des erreurs de doublons et d’intégrité en mode programmé manuellement". 2. Effectuez les tests de doublons et d’intégrité en validant avec les boutons "OK avec contrôles".

Gestion des erreurs en mode programmé avancé La gestion des erreurs en mode programmé avancé consiste à personnaliser complètement le traitement de l’erreur par programmation. WebDev offre la possibilité d’utiliser : • soit une page de gestion des erreurs complètement personnalisée. • soit une procédure spécifique. Dans notre exemple, nous avons choisi d’utiliser une page spécifique.

4 Exécutez le projet "WB_ErreursHF" grâce au bouton "GO". 4 Cliquez sur "Gestion des erreurs de doublons et d’intégrité en mode programmé avancé". allons tout d’abord tester les erreurs de doublons. Pour cela, saisissez les informations 4 Nous suivantes : • Référence : TEST • Libellé : Produit1 • Description : Produit1 • Prix : 50 • Taux de TVA : 5,5%

Partie 4 : Bases de données et analyses

Pour empêcher l’erreur d’intégrité, il suffit de vérifier que tous les éléments nécessaires ont été saisis. Dans notre exemple, l’erreur d’intégrité apparaît car le taux de TVA n’est pas saisi. Un simple contrôle de la valeur permet d’éviter l’apparition de l’erreur d’intégrité :

GAF_WebDev.book Page 226 Lundi, 15. décembre 2008 5:31 17

226

Partie 4 : Bases de données et analyses

4 Cliquez sur le bouton "OK". L’écran suivant s’affiche :

Cette boîte de dialogue affiche la raison du problème avec une interface personnalisée. Sélectionnez l’option "Je souhaite arrêter le traitement en cours" et validez. maintenant les erreurs d’intégrité. Pour cela, saisissez les informations suivantes : 4 •Testons Référence : TEST2 • Libellé : Produit2 • Description : Produit2 • Prix : 50 • Taux de TVA : laissez le champ vide.

4 Cliquez sur le bouton "OK". L’écran suivant s’affiche :

Sélectionnez l’option "Je souhaite arrêter le traitement en cours" et validez. Regardons maintenant le code qui a permis d’afficher ces messages : 4 1. Sous l’éditeur, ouvrez la page "PAGE_Erreurs_Programme" (double-cliquez sur le nom de la page dans le volet "Explorateur". 2. Affichez les traitements de la page (clic droit sur la page, option "Code"). Le code d’initialisa-

GAF_WebDev.book Page 227 Lundi, 15. décembre 2008 5:31 17

227

tion de la page contient la ligne de code suivante : HSurErreur("*",hErrDoublon,PAGE_Doublon2) HSurErreur("*",hErrIntégrité,PAGE_Integrite2)

Partie 4 : Bases de données et analyses

C’est encore la fonction HSurErreur qui permet de paramétrer le mode de gestion des erreurs de la base de données. Les paramètres de la fonction permettent de spécifier l’étendue de la modification : • "*" pour indiquer que tous les fichiers de l’analyse sont concernés. • la constante hErrDoublon pour indiquer que seules les erreurs de doublons sont concernées. Il est nécessaire de spécifier ensuite le nom de la page à utiliser dans ce cas (PAGE_Doublon2). • la constante hErrIntégrité pour indiquer que seules les erreurs de d’intégrité sont concernées. Il est nécessaire de spécifier ensuite le nom de la page à utiliser dans ce cas (PAGE_Integrite2). 3. Fermez cette fenêtre de code. Nous ne détaillerons pas ici le code des pages utilisées. Nous vous conseillons de consulter l’aide en ligne pour plus de détails.

GAF_WebDev.book Page 228 Lundi, 15. décembre 2008 5:31 17

228

LEÇON 4.4. LA JOURNALISATION Ce que vous allez apprendre dans cette leçon ... • Qu’est-ce que la journalisation ? • Utilisation de la journalisation.

Partie 4 : Bases de données et analyses

Durée estimée : 15mn

GAF_WebDev.book Page 229 Lundi, 15. décembre 2008 5:31 17

229

Qu’est-ce que la journalisation ? Cette leçon concerne uniquement la journalisation de base de données HyperFileSQL. Pour les bases de données externes (Oracle, ...), consultez la documentation de ces bases de données. La journalisation pour quoi faire ? Le journal est un fichier particulier qui vous permettra de répondre aux besoins suivants : • remettre la base de données dans l’état où elle était tel jour à telle heure suite à un problème physique, des erreurs de traitements ou de saisie, ... • avoir un suivi sur les opérations effectuées sur un fichier "sensible" (qui a modifié ou consulté le fichier ? par exemple). • gérer la réplication (voir “La réplication”, page 240)

Comment mettre en place la journalisation ? La mise en place de la journalisation est réellement simple avec WebDev. Pour chaque fichier voulu, il suffit d’indiquer le type de journalisation à appliquer (onglet "Divers" de la fenêtre de description du fichier). Par exemple ici, pour le fichier "Livre" :

Il suffit de choisir le type de journalisation souhaitée : • Si votre objectif est de pouvoir rapidement restaurer votre base de données suite à un problème physique ou une erreur de traitement il suffit de choisir "Journal des écritures".

Partie 4 : Bases de données et analyses

Le journal est une sécurité pour votre base de données. Il vous permettra de remettre rapidement votre base de données dans le dernier état connu avant le problème rencontré, depuis la dernière sauvegarde, sans avoir à tout re-saisir.

GAF_WebDev.book Page 230 Lundi, 15. décembre 2008 5:31 17

230

Attention !

• Si vous souhaitez juste conserver une trace des accès à la base choisissez "Historique des accès au fichier". La journalisation de type "Historique des accès au fichier (Ordres HyperFileSQL)" ne permet pas de restaurer votre base de données en cas de problème. Cette option sert à effectuer des contrôles sur les accès aux fichiers "sensibles" ou tout simplement pour des besoins statistiques. Ce type de journalisation est néanmoins déconseillé.

Physiquement, comment se matérialise la journalisation ? Tous les accès à tous les fichiers journalés d’une analyse donnée sont archivés dans un fichier nommé "Table des opérations" (1 par analyse). Ce fichier unique garantit la séquentialité des opérations. Toutes les modifications sur un fichier de données sont stockées dans le fichier de journal correspondant (1 par fichier journalé). Par exemple pour un fichier de données "PRODUIT", le fichier journal sera "PRODUITJNL". Ces fichiers "journaux" sont situés par défaut dans le répertoire défini lors de la description des fichiers de l’analyse : • Si vous n’avez rien spécifié, ils se trouveront dans le sous-répertoire "JNL" du répertoire des fichiers de données. • Si vous avez spécifié un répertoire, ils se trouveront dans le répertoire que vous aurez indiqué. Le nom des répertoires est stocké dans le fichier lui-même. Il est possible de modifier les répertoires des journaux après la mise en place de la journalisation : • avec WDJournal, livré avec WebDev (bouton "Informations sur un fichier"). • par programmation. Vous pouvez modifier cet emplacement en utilisant les fonctions HChangeRepJNL, HChangeRepRPL, ... (consultez l’aide en ligne pour plus de détails, motclé : "Journalisation")..

Attention !

Partie 4 : Bases de données et analyses

• Si vous souhaitez combiner les deux options, choisissez "Journal des écritures + Historique des accès au fichier".

La modification des répertoires des journaux est une opération "critique". Lors de l’administration de votre site, vous devez absolument suivre le mode opératoire ci-dessous : 1. Interdire les accès à la base (tous les fichiers) 2. Déplacer les fichiers journaux et/ou tables des opérations dans les nouveaux répertoires 3. Modifier le nom des répertoires dans TOUS les fichiers de données concernés (option "Divers", dans l’écran de description des fichiers) 4. Ré-autoriser les accès à la base de données

GAF_WebDev.book Page 231 Lundi, 15. décembre 2008 5:31 17

231

Comment réussir la mise en place de la journalisation ? La mise en place de journaux pour une base de données est liée à la gestion des sauvegardes de cette même base (sauvegardes des fichiers de données). En effet, un journal ne peut être "joué" que sur un état donné de la base (l’état qui correspond à la création ou re-création du journal). Vous pouvez réaliser ces différentes opérations sans programmation en utilisant WDJournal, livré avec WebDev. Nous vous conseillons également de suivre les modes opératoires suivants : Mise en place de la journalisation : 4 1. Sauvegarde des fichiers de données initiaux (s’ils existent). 2. Mise en place de la journalisation.

2. Sauvegarde éventuelle des fichiers journaux. 3. Ré-initialisation des fichiers journaux. Restauration suite à un problème : 4 1. Restaurer la dernière sauvegarde. 2. Rejouer le journal en cours jusqu’à l’opération souhaitée. 3. Refaire une sauvegarde et ré-initialiser les journaux.

Notes

Pour plus de détails sur la journalisation, consultez l’aide en ligne (mot-clé : "Journalisation").

Journalisation et HyperFileSQL Client/Serveur La journalisation est disponible en HyperFileSQL Client/Serveur. Pour plus de détails sur les spécificités de la journalisation en mode Client/Serveur, consultez l’aide en ligne.

Partie 4 : Bases de données et analyses

Sauvegarde d’une application avec des fichiers journalés : 4 1. Sauvegarde des fichiers de données.

GAF_WebDev.book Page 232 Lundi, 15. décembre 2008 5:31 17

232

LEÇON 4.5. LES TRANSACTIONS Ce que vous allez apprendre dans cette leçon ... • Qu’est-ce qu’une transaction ? • Comment utiliser les transactions ?

Partie 4 : Bases de données et analyses

Durée estimée : 10mn

GAF_WebDev.book Page 233 Lundi, 15. décembre 2008 5:31 17

233

Qu’est-ce qu’une transaction ? Une transaction est un ensemble d'opérations sur fichiers indissociables : • soit toutes les opérations de la transaction sont réalisées. • soit aucune opération n'est réalisée.

Un exemple simple de la nécessité des transactions pour certains types de traitements Lors d’une opération bancaire de virement, un compte est débité pour en créditer un autre. Pendant les opérations qui sont effectuées, il peut survenir à tout moment une panne sur le réseau (panne électrique, défaillance des systèmes informatiques). C’est pourquoi il est alors indispensable de gérer ce traitement par une transaction. Si une panne survient, toutes les opérations à effectuer sont alors annulées. On ne se retrouve donc pas avec un compte débité et un compte non crédité !

Partie 4 : Bases de données et analyses

La gestion des transactions est le meilleur moyen d'assurer la cohérence d'un ensemble d'écritures indissociables sur des fichiers HyperFileSQL. Les transactions sont également un moyen sûr et fiable de sécuriser vos traitements sur des fichiers HyperFileSQL.

GAF_WebDev.book Page 234 Lundi, 15. décembre 2008 5:31 17

234

Les transactions sur HyperFileSQL Chaque opération d'écriture effectuée lors d'une transaction est mémorisée dans un fichier spécial. A tout moment, il est possible d'annuler la transaction : toutes les opérations effectuées depuis le début de la transaction seront annulées. Les transactions seront annulées dans les cas suivants : • erreur du programme. • fin de programme sans validation de la transaction. • panne de courant ou arrêt brusque de l’application. Lorsque l’application sera relancée, la cohérence de la base de données pourra être rétablie : • grâce à l’outil WebDev "WDTRANS". • au premier appel de la fonction HTransactionDébut. • au premier appel de la fonction HTransactionAnnule.

Utilisation des transactions Mettre en place la gestion des transactions 1. Si vos fichiers sont protégés par mot de passe, ouvrez tous les fichiers utilisés pendant la transaction (fonction HOuvre) avant le début de la transaction ou spécifiez les mots de passe avec HPasse. Si vos fichiers ne sont pas protégés par mot de passe, les fichiers manipulés après la fonction HTransactionDébut seront automatiquement mis en transaction. 2. Commencez la transaction avec la fonction HTransactionDébut. Cette fonction permet éventuellement de définir le nom du journal des transactions. 3. Effectuez vos opérations. Toutes les opérations d'écriture sur les fichiers en transaction sont automatiquement enregistrées dans le fichier de transaction. Attention !

Partie 4 : Bases de données et analyses

Lorsque les opérations d'écriture incluses dans la transaction sont terminées, le site peut valider les opérations de la transaction par la fonction HTransactionFin.

Les traitements réalisés sont relativement plus lents (puisque chaque opération est également enregistrée dans un fichier spécifique).

4. Annulez si nécessaire les opérations réalisées pendant la transaction (fonction HTransactionAnnule). 5. Spécifiez la fin de la transaction avec la fonction HTransactionFin : la transaction est validée. Pour plus de détails sur les fonctions de gestion des transactions, consultez l’aide en ligne (motclé : "Transactions HyperFileSQL").

GAF_WebDev.book Page 235 Lundi, 15. décembre 2008 5:31 17

235

Manipuler les enregistrements lors d'une transaction : les règles à suivre Les enregistrements modifiés pendant la transaction peuvent être lus avant ou après le début de la transaction : ils seront toujours pris en compte dans le journal des transactions. La gestion des transactions n'exclut pas la gestion des blocages des enregistrements en transaction. En effet, les enregistrements manipulés pendant la transaction sont automatiquement bloqués en écriture.

Que faire si une transaction a été interrompue ? Si une panne (coupure de courant, re-démarrage du poste, ...) survient pendant une transaction, les fichiers de données risquent d'être incohérents : la transaction n'a été ni validée, ni abandonnée. Le fichier de transaction est toujours présent sur le poste. Il est dans ce cas nécessaire de rétablir la cohérence de la base de données. Cette opération peut être automatiquement réalisée : • lors du prochain appel à la fonction HTransactionAnnule ou HTransactionDébut. • avec WDTRANS, utilitaire de gestion des transactions livré avec WebDev. Pour savoir si la restauration de la cohérence de la base est nécessaire, testez le résultat de la fonction HTransactionInterrompue dans le code d'initialisation du projet par exemple.

Notes

Pour plus de détails, consultez l’aide en ligne (mot-clé : "Transactions HyperFileSQL").

Transactions et HyperFileSQL Client/Serveur Les transactions sont disponibles en HyperFileSQL Client/Serveur. Pour plus de détails sur les spécificités des transactions en mode Client/Serveur, consultez l’aide en ligne.

Partie 4 : Bases de données et analyses

Il est donc nécessaire que la transaction soit la plus courte possible, pour éviter tout blocage des utilisateurs. Pensez donc à limiter le nombre d’instructions de parcours, modification ... sur le fichier entre les appels aux fonctions HTransactionDébut et HTransactionFin.

GAF_WebDev.book Page 236 Lundi, 15. décembre 2008 5:31 17

236

LEÇON 4.6. CRYPTAGE DE DONNÉES Ce que vous allez apprendre dans cette leçon ... • A quoi sert le cryptage des données ? • Utiliser le cryptage de données.

Partie 4 : Bases de données et analyses

Durée estimée : 15mn

GAF_WebDev.book Page 237 Lundi, 15. décembre 2008 5:31 17

237

A quoi sert le cryptage des données ? Une des nombreuses fonctionnalités de WebDev sur les fichiers de données HyperFileSQL est de garantir la confidentialité des données contenues dans les fichiers de données HyperFileSQL. Le cryptage des fichiers permet d’assurer cette confidentialité. Le cryptage des fichiers permet d’en rendre le contenu illisible pour toute personne ne possédant pas la clé de décryptage ("Ô Sésame, ouvre-toi !"). En effet, un fichier est crypté selon une clé (appelée également "mot de passe"). Ce mot de passe est (et doit être) connu de vous seul.

Il existe plusieurs types de cryptage : • cryptage 128 bits (performant) • cryptage RC5 (128 bits, 12 boucles, moins performant mais plus sécurisé) • cryptage RC5 (128 bits, 16 boucles, idem) La clé (ou "mot de passe") que vous allez définir ne sera valable que sur le fichier lui-même, et non pas pour l’analyse en totalité. Vous avez alors la liberté de définir un cryptage sur tout ou partie des fichiers de votre analyse. Les données contenues dans le fichier (et/ou dans l’index et/ou dans les fichiers mémos) seront "codées" en fonction de la clé (ou "mot de passe") que vous aurez définie lors de la génération des fichiers. Lors du décodage du fichier, le mot de passe pourra être : • présent directement dans le code du site. Dans ce cas, l’internaute n’aura pas connaissance du mot de passe. • activé par un mode opératoire avancé : mot de passe lu dans un fichier, activé par un traitement spécial ... La gestion de ce mot de passe incombe totalement au développeur, c’est-à-dire ... vous ! WebDev se charge de coder ou décoder en fonction du mot de passe que vous indiquez.

Comment crypter des fichiers Mettre en place le cryptage des fichiers Pour utiliser le cryptage sur un fichier : 4 1. Chargez l’analyse de votre projet avec l’éditeur d’analyses (option "Projet .. Charger l’analyse"). 2. Sélectionnez le fichier que vous souhaitez crypter. 3. Dans la description du fichier (option "Structure de fichiers .. Description", onglet "Détail"), choisissez le type de cryptage pour votre fichier, votre mémo ou votre index.

Partie 4 : Bases de données et analyses

C’est lors de la description d’un fichier dans l’éditeur d’analyses que vous avez la possibilité de définir si un cryptage doit être réalisé : • sur le fichier de données lui-même • sur l’index • sur les fichiers mémos dépendants du fichier de données.

GAF_WebDev.book Page 238 Lundi, 15. décembre 2008 5:31 17

238

Partie 4 : Bases de données et analyses

Vous avez également la possibilité d’activer la sécurité renforcée. Grâce à ce mode, le mot de passe de cryptage devra être saisi à chaque modification automatique des données (nouvelle installation, mise à jour, ...). Lors de la génération de votre analyse, l’assistant vous propose de saisir ou de modifier (si vous aviez déjà crypté votre fichier) le mot de passe de cryptage.

GAF_WebDev.book Page 239 Lundi, 15. décembre 2008 5:31 17

239

Gestion du cryptage en WLangage Pour gérer un mot de passe de cryptage en WLangage, vous pouvez : • soit indiquer le mot de passe avec les fonctions d’ouverture et de création des fichiers (fonctions HCréation, HCréationSiInexistant, HOuvre). Exemple d’utilisation de la fonction HCréationSiInexistant : HCréationSiInexistant(CLIENT, "Motdepasse") SI HErreurMotDePasse() ALORS Trace("Mot de passe invalide") FIN

• soit utiliser la fonction HPasse avant la première opération de lecture ou d’écriture dans le fichier crypté. Exemple d’utilisation de la fonction HPasse : // Ouverture d’un fichier avec mot de passe et contrôle d'erreur HPasse(CLIENT, "MotDePasse") HCréationSiInexistant(CLIENT) SI HErreurMotDePasse() ALORS Trace("Erreur HyperFileSQL : " + HErreurInfo()) RETOUR FIN

Pour plus de détails sur le cryptage des données, consultez l’aide en ligne (mots-clés : "HPasse", "CryptageFIC", "CryptageMMO", "CryptageNDX").

Partie 4 : Bases de données et analyses

Vous obtenez alors la liste des fichiers pour lesquels vous avez demandé un cryptage. Vous avez la possibilité de sélectionner les fichiers à crypter, et de saisir les mots de passe pour chacun des fichiers.

GAF_WebDev.book Page 240 Lundi, 15. décembre 2008 5:31 17

240

LEÇON 4.7. LA RÉPLICATION Ce que vous allez apprendre dans cette leçon ... • A quoi sert la réplication de données ? • Mise en oeuvre de la réplication de données.

Partie 4 : Bases de données et analyses

Durée estimée : 20mn

GAF_WebDev.book Page 241 Lundi, 15. décembre 2008 5:31 17

241

A quoi sert la réplication de données ? La réplication de données est une fonctionnalité très puissante. La réplication est l'opération permettant de maintenir à jour des bases de données distantes de structures identiques. Chacune de ces bases de données évolue indépendamment. Grâce à la réplication, les opérations effectuées sur chacune des bases de données sont reportées sur toutes les autres bases de données. WebDev permet de réaliser ces opérations très simplement.

Nous ne présenterons ici que la réplication universelle.

Mise en oeuvre de la réplication de données Le but de la réplication universelle est de conserver plusieurs bases de données synchronisées. Ces bases de données peuvent être de types différents ou non. Il est par exemple possible de réaliser une réplication entre une base de données HyperFileSQL et une base de données Oracle, ou entre deux bases de données HyperFileSQL. La réplication universelle utilise un modèle centralisé : toutes les bases de données se synchronisent avec une base de données maître. La base de données maître répercute ensuite les modifications vers les autres bases de données. La réplication universelle utilise plusieurs types de fichiers : • Fichier .RPM : fichier permettant de décrire une base maître, et les bases qui lui sont abonnées. • Fichier .RPL : fichier décrivant une base abonnée. Pour chaque base abonnée, un fichier RPL est créé. Ce fichier est présent sur le poste abonné. • Fichier .RPA : fichier journal contenant les informations de réplication. Ce fichier est échangé entre la base de données maître et la base de données abonnée. • Fichier .SYN : fichier contenant les informations sur la situation de la base distante. Ce fichier permet d'optimiser la taille des fichiers de synchronisation. Ce fichier est présent sur le poste maître et sur chaque poste abonné. Remarque : Pour mettre en place la réplication universelle sur des bases de données différentes de HyperFileSQL, il est obligatoire de créer une rubrique de type DateHeure dans chaque fichier. Cette rubrique sera mise à jour par l'application lors de la modification ou lors de l'ajout d'un enregistrement. Si les bases de données utilisent différents fuseaux horaires, il est conseillé d'utiliser un format universel (date et heure GMT par exemple).

Partie 4 : Bases de données et analyses

WebDev propose deux types de réplication : • La réplication journalée (basée sur la journalisation). Ce type de réplication permet de répliquer uniquement des bases de données HyperFileSQL entre elles. Ce type de réplication peut être mis en place grâce aux fonctions WLangage ou grâce à l’outil WDReplic. • La réplication universelle qui permet de répliquer n’importe quel type de base de données (par exemple une base de données HyperFileSQL avec une base de données Oracle).

GAF_WebDev.book Page 242 Lundi, 15. décembre 2008 5:31 17

242

Mise en place 1. Activation Pour activer la réplication universelle, il suffit d'utiliser la fonction HGèreRéplication avec le paramètre rplRéplicationUniverselle. Cette fonction permet de désactiver le mode de réplication standard (s'il était actif) et d'activer la réplication universelle. 2. Déclaration de la base maître Cette opération n'est à faire qu'une seule fois sur la base maître. Pour déclarer la base maître, il suffit d'utiliser la fonction HCréeRéplicaMaître. Remarque : Si le répertoire courant permet de stocker des données, la ligne de code suivante peut être utilisée : HCréeRéplicaMaître("")

Partie 4 : Bases de données et analyses

Cette ligne de code crée le fichier RéplicaMaître.RPM sur le disque. Il ne reste plus qu'à inscrire les abonnés dans ce fichier. 3. Déclaration des bases abonnées Cette opération n'est à faire qu'une seule fois pour chaque base abonnée. Cette opération doit être effectuée sur la base maître. Pour déclarer un nouvel abonné, utilisez la fonction HCréeRéplicaAbonné. Cette fonction crée un abonné (fichier RPL) avec le nom fourni. Cette fonction renvoie également un numéro d'abonné. Remarque : La fonction HCréeRéplicaAbonné utilise des paramètres spécifiques pour la réplication universelle. Pour plus de détails, consultez l'aide de la fonction. 4. Réplication

GAF_WebDev.book Page 243 Lundi, 15. décembre 2008 5:31 17

243

La fonction HCréeRéplicaTransportable crée un fichier journal (fichier .RPA). Ce fichier journal est transmis et exécuté grâce à la fonction HSynchroniseRéplica. Attention : Par défaut lors de la synchronisation (HSynchroniseRéplica), le maître est prioritaire : dans le cas d'une réplication abonné vers maître, les données du maître ne seront pas mises à jour. Pensez à utiliser une autre constante (rplPlusRécentPrioritaire par exemple).

HRplDéclareLiaison

Permet de signaler au moteur de réplication une liaison entre deux fichiers. Le moteur suivra alors la liaison pour obtenir la liste des enregistrements à répliquer dans le second fichier.

HRplProcédureFiltre

Permet de spécifier une procédure de filtrage spécifique lorsqu’un fichier donné sera répliqué.

Partie 4 : Bases de données et analyses

Deux fonctions spécifiques peuvent également être utilisées :

GAF_WebDev.book Page 244 Lundi, 15. décembre 2008 5:31 17

244

LEÇON 4.8. LES TRIGGERS Ce que vous allez apprendre dans cette leçon ... • A quoi sert un trigger ? • Utilisation d’un trigger.

Partie 4 : Bases de données et analyses

Durée estimée : 10mn

GAF_WebDev.book Page 245 Lundi, 15. décembre 2008 5:31 17

245

A quoi sert un trigger ? Définition d’un trigger Un trigger permet de déclencher une action automatiquement lors d’une opération d’ajout, de modification ou de suppression sur un fichier de données HyperFileSQL. Lors d’une opération (ajout, modification ou suppression) sur un fichier HyperFileSQL, il est possible d’exécuter une action avant ou après l’exécution de cette opération. Par exemple, lors d’une suppression dans un fichier, il est possible de demander la confirmation de suppression de l’enregistrement.

Attention !

Les triggers sont définis par programmation. Les fonctions du WLangage utilisables sont : • HDécritTrigger : décrit le trigger. Cette fonction est généralement utilisée dans le code d’initialisation du projet. Le trigger déclenche l’appel d’une procédure. Cette procédure est associée au trigger lors de l’utilisation de la fonction HDécritTrigger. • HActiveTrigger : Active un trigger décrit par la fonction HDécritTrigger. Dès sa création, le trigger est automatiquement activé. • HDésactiveTrigger : Désactive un trigger décrit par la fonction HDécritTrigger. La fonction HDésactiveTrigger ne détruit pas le trigger. Le trigger existe toujours mais n’est plus actif.

• HDétruitTrigger : Détruit un trigger décrit par la fonction HDécritTrigger. Etape 1 : décrire le trigger (ici dans le code d’initialisation du projet) Exemple : - - code d’initialisation du projet - HDécritTrigger("CLIENT,FOURNISSEUR", "HSUPPRIME", ... "ProcConfirmeSuppression", hTriggerAvant)

Attention !

Dans cet exemple, le trigger va déclencher l’appel de la procédure "ProcConfirmeSuppression" lors de la suppression d’un enregistrement dans l’un des fichiers "CLIENT" et/ou "FOURNISSEUR". Cette suppression pourra avoir lieu n’importe où dans le projet. La procédure "ProcConfirmeSuppression" sera appelée AVANT (hTriggerAvant) que la suppression ait lieu.

Partie 4 : Bases de données et analyses

Mise en place

GAF_WebDev.book Page 246 Lundi, 15. décembre 2008 5:31 17

246

Etape 2 : créer une procédure globale liée au trigger Exemple : PROCEDURE PROCCONFIRMESUPPRESSION () // Demande la confirmation à l’utilisateur SI OuiNon("Confirmez-vous la suppression ? ") = Non ALORS // Initialisation de H.Afaire pour annuler l’opération H.Afaire = "A" FIN

Partie 4 : Bases de données et analyses

Nous avons abordé simplement le fonctionnement d’un trigger. Pour obtenir plus de détails, consultez l’aide en ligne (mot-clé : "HDécritTrigger")

GAF_WebDev.book Page 247 Lundi, 15. décembre 2008 5:31 17

247

LEÇON 4.9. BASES EXTERNES Ce que vous allez apprendre dans cette leçon ... • Paramétrer la connexion à une base de données dans l’analyse • Paramétrer la connexion à une base de données par programmation

Partie 4 : Bases de données et analyses

Durée estimée : 15mn

GAF_WebDev.book Page 248 Lundi, 15. décembre 2008 5:31 17

248

Présentation On nommera "Base de données externe" tout système de gestion de base de données autre qu’HyperFileSQL. Tout programme réalisé avec WebDev peut accéder très facilement à une base de données autre qu’HyperFileSQL. Il faut pour cela décrire la base de données dans une analyse (comme pour HyperFileSQL). Les modes d’accès aux bases de données sont : • accès natif • accès via ODBC • accès via OLE DB • accès ODBC via OLE DB

Partie 4 : Bases de données et analyses

La programmation sera effectuée avec les fonctions du WLangage (HLit*) et/ou en utilisant le langage SQL. Consultez le tableau comparatif en sélectionnant l’option "? .. Aide à l’utilisation des bases de données" dans le menu de WebDev.

Connexion à une base de données dans l’éditeur d’analyses Lors de la création d’un nouveau fichier (option "Insertion .. Fichier" de l’éditeur d’analyses), choisissez l’option "Utiliser des fichiers d’une base existante" :

GAF_WebDev.book Page 249 Lundi, 15. décembre 2008 5:31 17

249

Puis, définissez si les données seront converties en HyperFileSQL Classic ou bien si elles restent dans leur format actuel :

Les paramètres de connexion à cette base de données externe doivent être décrits (nom du serveur ou service, base de données, login et mot de passe et le type d’accès par exemple Natif, OLE DB, ODBC).

Partie 4 : Bases de données et analyses

Sélectionnez ensuite le type de base de données :

GAF_WebDev.book Page 250 Lundi, 15. décembre 2008 5:31 17

Partie 4 : Bases de données et analyses

250

Toutes ces informations permettent de définir une connexion dans l’analyse. Cette connexion sera automatiquement utilisée lors de la génération d’un RAD (RAD application complète ou RAD fenêtre). Tous les fichiers sont liés à cette connexion. L’utilisation d’une connexion spécifiée dans l’analyse est très confortable pour le développement de l’application. Mais bien souvent, les paramètres utilisés en développement correspondent aux paramètres d’un administrateur, et l’application cliente doit utiliser un mode de connexion plus sécurisé (avec moins de droits). Il faut donc redéfinir la connexion. Deux solutions sont envisageables : • Solution 1 : Redéfinir la connexion spécifiée dans l’analyse. Cette solution oblige à conserver des données "en dur" dans l’application, et non paramétrables. • Solution 2 : Redéfinir la connexion spécifiée par programmation. Cette solution implique l’utilisation de deux fonctions du WLangage HOuvreConnexion et HChangeConnexion.

Connexion à une base de données par programmation La connexion à une base de données par programmation se fait à l’aide de deux fonctions du WLangage : • HOuvreConnexion, qui permet de décrire les différents paramètres de la connexion et de l’ouvrir. • HChangeConnexion, qui permet d’associer une connexion aux différents fichiers de l’analyse. Etudions en détail les manipulations nécessaires à la mise en place de la connexion par programmation.

GAF_WebDev.book Page 251 Lundi, 15. décembre 2008 5:31 17

251

Création de la connexion : HOuvreConnexion Le plus simple pour utiliser la fonction HOuvreConnexion est d’utiliser l’assistant de cette fonction : vous répondez aux différentes questions et le code correspondant est automatiquement généré dans votre traitement. Pour utiliser l’assistant de la fonction HOuvreConnexion : 1. Dans l’éditeur de code, saisissez le nom de la fonction suivi de la parenthèse ouvrante : HOuvreConnexion(

L’utilisateur et le mot de passe donnés dans l’assistant apparaîtront directement dans le code généré et seront "en dur". Il peut être nécessaire de faire une fenêtre de login afin d’identifier l’utilisateur et d’utiliser des variables pour le nom de l’utilisateur et son mot de passe. Ces opérations peuvent être faites après avoir utilisé l’assistant.

Attention !

3. Poursuivez l’assistant et validez. Le code correspondant est automatiquement intégré dans le traitement en cours. La fonction HOuvreConnexion a permis de définir une connexion, mais cette connexion n’est pas encore associée aux fichiers de données. Pensez à tester le résultat de la fonction HOuvreConnexion. Cette fonction renvoie Faux si la connexion ne peut pas être ouverte.

Association de la connexion aux fichiers de données : HChangeConnexion Pour associer une connexion à un fichier, il suffit d’utiliser la fonction HChangeConnexion. La syntaxe de cette fonction est très simple : • le premier paramètre correspond au nom du fichier ("*" pour tous les fichiers de l’analyse) • le second paramètre correspond au nom de la connexion à utiliser Exemple :

Notes

HChangeConnexion("*","MaNouvelleConnexion")

Il est possible de décrire autant de connexions que nécessaires. Un fichier peut utiliser une connexion différente de la connexion utilisée par les autres fichiers présents dans l’analyse.

Partie 4 : Bases de données et analyses

Attention !

2. Cliquez sur l’option "Assistant de la fonction HOuvreConnexion" qui apparaît. L’assistant se lance automatiquement. L’assistant demande les différents paramètres de la connexion : •Nom de la connexion •Provider •Cryptage •Utilisateur et mot de passe •Serveur et base de données

GAF_WebDev.book Page 252 Lundi, 15. dĂŠcembre 2008 5:31 17

Partie 4 : Bases de donnĂŠes et analyses

252

GAF_WebDev.book Page 253 Lundi, 15. dĂŠcembre 2008 5:31 17

PARTIE 5 Administrer une base HyperFileSQL Client/Serveur

GAF_WebDev.book Page 254 Lundi, 15. dĂŠcembre 2008 5:31 17

GAF_WebDev.book Page 255 Lundi, 15. décembre 2008 5:31 17

255

LEÇON 5.1. INTRODUCTION Ce que vous allez apprendre dans cette leçon ... • Principe du Client/Serveur • Pourquoi passer un site en HyperFileSQL Client/Serveur ?

Partie 5 : Base HyperFileSQL Client/Serveur

Durée estimée : 5 mn

GAF_WebDev.book Page 256 Lundi, 15. décembre 2008 5:31 17

256

Présentation

Partie 5 : Base HyperFileSQL Client/Serveur

WebDev permet de créer des applications accédant à des bases de données HyperFileSQL Client/ Serveur. Un site HyperFileSQL Client/Serveur consiste à exécuter le site sur différents postes utilisateur (appelés machines clientes) et à déporter la ou les bases de données et les traitements sur un poste serveur. Ce mode de fonctionnement permet des temps de réponses plus rapides et plus fiables, ainsi qu'une maintenance de la base de données facilitée.

WebDev permet de : • créer entièrement un site HyperFileSQL Client/Serveur. • modifier un site WebDev existant en un site HyperFileSQL Client/Serveur.

GAF_WebDev.book Page 257 Lundi, 15. décembre 2008 5:31 17

257

Pourquoi passer un site en mode HyperFileSQL Client/Serveur ?

Partie 5 : Base HyperFileSQL Client/Serveur

Les principaux avantages d’un site en mode HyperFileSQL Client/Serveur par rapport à un site en mode HyperFileSQL Classic : • L’utilisation de HyperFileSQL Client/Serveur est plus sécurisée (utilisation d’un login, d’un mot de passe, et définitions de droits associés aux utilisateurs). • Pas de gestion de répertoires : tous les fichiers de la base de données sont regroupés au même endroit. • Les bases de données en mode Client/Serveur peuvent être utilisées par une connexion Internet.

GAF_WebDev.book Page 258 Lundi, 15. décembre 2008 5:31 17

258

LEÇON 5.2. MISE EN PLACE D’UN SITE HYPERFILESQL CLIENT/SERVEUR Ce que vous allez apprendre dans cette leçon ...

Partie 5 : Base HyperFileSQL Client/Serveur

• Installation d’un serveur HyperFileSQL local • Créer un site en mode HyperFileSQL Client/Serveur • Migrer un site en mode HyperFileSQL Client/Serveur • Utiliser le Centre de Contrôle HyperFileSQL • Fonctionnalités disponibles en mode HyperFileSQL Client/Serveur

Durée estimée : 10 mn

GAF_WebDev.book Page 259 Lundi, 15. décembre 2008 5:31 17

259

Présentation Dans cette leçon, nous allons effectuer toutes les opérations nécessaires au développement et au déploiement d’un site HyperFileSQL Client/Serveur.

Attention !

La première opération à faire avant de commencer à développer un site HyperFileSQL Client/Serveur consiste à installer un serveur HyperFileSQL. Sur le poste de développement, ce serveur peut être installé en local (c’est ce que nous allons faire). En déploiement, ce serveur peut être installé sur un poste spécifique. Le programme d’installation du serveur HyperFileSQL est disponible sur le CD de WebDev. Si vous ne possédez pas ce CD, l’installation du serveur HyperFileSQL est également disponible sur le site de PC SOFT (www.pcsoft.fr). Pour installer le serveur HyperFileSQL en local : 1. Lancez le programme d’installation de WebDev. 2. Choisissez l’option "Installer ou mettre à jour un serveur HyperFileSQL Client/Serveur". 3. Acceptez la licence. 4. Choisissez la plate-forme (option "Pour Windows sur cette machine"). 5. Choisissez l’option "Installer un nouveau serveur". 6. Sélectionnez le répertoire d’installation et indiquez le nom du serveur et le port. Par défaut, le port utilisé est 4900. Vous pouvez installer le Centre de Contrôle HyperFileSQL si celui-ci n’est pas présent ou accessible depuis votre poste. Le Centre de Contrôle HyperFileSQL est nécessaire à la gestion de la base HyperFileSQL Client/Serveur.

7. L’installation est effectuée. Par défaut, pour se connecter au serveur en mode administrateur, il faut utiliser l’utilisateur "admin" sans mot de passe.

Créer un site en mode HyperFileSQL Client/Serveur La création d’un site WebDev HyperFileSQL Client/Serveur se fait de la même manière que pour tout site WebDev. Il est nécessaire de : 1. Créer le projet en demandant à créer une nouvelle base de données. 2. Créer l’analyse en spécifiant que les bases de données utilisées par le projet seront de type "HyperFileSQL Client/Serveur". 3. Indiquer les caractéristiques de la connexion au serveur HyperFileSQL Client/Serveur à utiliser. 4. Lors de la création d’un fichier sous l’analyse, indiquer que ce fichier est en mode HyperFileSQL Client/Serveur et préciser la connexion utilisée.

Partie 5 : Base HyperFileSQL Client/Serveur

Installation d’un serveur HyperFileSQL local

GAF_WebDev.book Page 260 Lundi, 15. décembre 2008 5:31 17

260

Migrer un site HyperFileSQL Classic en mode HyperFileSQL Client/Serveur Présentation La migration d’un site HyperFileSQL Classic en mode Client/Serveur est l’opération la plus courante. WebDev propose plusieurs solutions pour réaliser cette migration sur le poste de développement : • réaliser la migration depuis l’éditeur d’analyses (grâce à l’option "Analyse .. HyperFileSQL Client/ Serveur .. Passage en HyperFileSQL Client/Serveur"). • réaliser la migration depuis le Centre de Contrôle HyperFileSQL.

Partie 5 : Base HyperFileSQL Client/Serveur

Pour mieux se rendre compte des différentes étapes, nous allons migrer le site de gestion de bibliothèque que nous avons réalisé dans la partie 2 de ce livre, en utilisant la première méthode. Migration de l’exemple Une version du projet étudié dans la partie 2 est présente dans le sous-répertoire de WebDev "Autoformation\Corriges\MaBibliotheque". Nous allons migrer ce projet pour le tester en mode Client/Serveur. Pour migrer le projet : 1. Ouvrez le projet "MaBibliotheque.wwp" sous l’éditeur (option "Fichier .. Ouvrir un projet"). Ce projet est disponible dans le sous-répertoire de WebDev "Autoformation\Corriges\Ma_Bibliotheque". 2. Affichez l’analyse du projet (option "Projet .. Charger l’analyse"). L’éditeur d’analyses s’affiche. 3. Dans l’éditeur d’analyses, sélectionnez l’option "Analyse .. HyperFileSQL Client/Serveur .. Passage en HyperFileSQL Client/Serveur". Un assistant s’ouvre, permettant de créer une connexion au serveur HyperFileSQL installé sur le poste.

GAF_WebDev.book Page 261 Lundi, 15. décembre 2008 5:31 17

261

Attention !

Vérifiez le code de votre projet : en mode HyperFileSQL Client/Serveur, les instructions HSubstRep, HChangeRep, ... sont inutiles.

Notes

Passez à l’écran suivant. 7. L’assistant propose ensuite de créer les fichiers de données sur le serveur. Validez (option "Copier maintenant"). 8. Sélectionnez les fichiers de l’analyse à copier sur le serveur : dans notre cas, ce sont tous les fichiers de données du répertoire EXE. Passez à l’écran suivant. 9. Les fichiers de l’analyse sont automatiquement transformés en fichiers HyperFileSQL Client/Serveur et associés à la connexion choisie. 10. Générez l’analyse.

Selon les paramètres indiqués lors de la création de la connexion, il est possible de modifier la connexion définie dans l’analyse grâce aux fonctions HOuvreConnexion et HChangeConnexion. Cette manipulation a été vue dans le chapitre “Bases externes”, page 247.

Partie 5 : Base HyperFileSQL Client/Serveur

4. Indiquez dans les plans suivants : • le nom du serveur (nom de votre machine par exemple) et le numéro de port, • le nom de l’utilisateur (laissez cette information vide pour utiliser l’administrateur) • le nom de la base de données (Ma_Bibliotheque dans notre exemple) • le nom de la connexion (conservez le nom proposé) 5. Passez à l’écran suivant. La connexion à la base est automatiquement créée. 6. L’assistant propose ensuite d’associer les différents fichiers présents dans l’analyse à la connexion qui vient d’être créée.

GAF_WebDev.book Page 262 Lundi, 15. décembre 2008 5:31 17

Notes

262

La fonction HOuvreConnexion permet toujours de repasser en mode HyperFileSQL Classic : il suffit de lui préciser le chemin du répertoire contenant les fichiers de données HyperFileSQL Classic.

11. Vous avez migré le projet de développement. Il peut être également nécessaire de migrer l’application déployée (par exemple si l’application déployée utilise des fichiers HyperFileSQL Classic). Cette opération se paramètre lors de la création du programme d’installation de l’application.

Partie 5 : Base HyperFileSQL Client/Serveur

Fonctionnalités disponibles en mode HyperFileSQL Client/Serveur HyperFileSQL Client/Serveur propose de nombreuses fonctionnalités propres au mode Client/Serveur : • Transactions • Journal • Procédures stockées • Triggers Nous ne détaillerons pas ici ces fonctionnalités (certaines ont été abordées dans ce cours en mode HyperFileSQL Classic). Nous vous conseillons de consulter l’aide en ligne pour plus de détails sur ces sujets.

GAF_WebDev.book Page 263 Lundi, 15. décembre 2008 5:31 17

263

LEÇON 5.3. ADMINISTRER Ce que vous allez apprendre dans cette leçon ...

Durée estimée : 20 mn

Partie 5 : Base HyperFileSQL Client/Serveur

• Le Centre de Contrôle HyperFileSQL • Créer un utilisateur dans le Centre de Contrôle HyperFileSQL • Fonctions WLangage permettant d’administrer • Sauvegarder la base

GAF_WebDev.book Page 264 Lundi, 15. décembre 2008 5:31 17

264

Présentation Maintenant que nous savons créer / migrer une application en mode HyperFileSQL Client/Serveur, nous allons voir comment l’administrer. En effet, une base de données Client/Serveur nécessite : • une configuration spécifique des postes (installation d’un serveur HyperFileSQL, ...) • une administration réalisée grâce au Centre de Contrôle HyperFileSQL.

Partie 5 : Base HyperFileSQL Client/Serveur

Configuration des postes Pour utiliser une base HyperFileSQL Client/Serveur, il est nécessaire d’installer un serveur HyperFileSQL sur le poste serveur. Il est possible d’utiliser plusieurs serveurs HyperFileSQL sur le même poste, utilisant des ports différents. Sur chaque serveur, une ou plusieurs bases de données peuvent être installées. Par exemple, il est possible d’installer sur le même poste un serveur HyperFileSQL de tests, avec une base de données de tests, et un serveur HyperFileSQL de production, utilisant un port différent.

Le Centre de Contrôle HyperFileSQL Le Centre de Contrôle HyperFileSQL permet de réaliser toutes les opérations d’administration des serveurs et des bases de données HyperFileSQL Client/Serveur. Nous allons voir les fonctionnalités les plus importantes. Pour lancer le centre de contrôle HyperFileSQL et accéder aux données : 1. Dans l’éditeur, sélectionnez l’option "Outils .. Centre de Contrôle HyperFileSQL".

2. Cliquez sur "HyperFileSQL C/S". La zone qui apparaît peut être vide si le Centre de Contrôle HyperFileSQL n’a jamais été utilisé depuis ce poste. Depuis cet écran, vous pouvez : •Rechercher les serveurs HyperFileSQL accessibles depuis le réseau (opération relativement longue)

GAF_WebDev.book Page 265 Lundi, 15. décembre 2008 5:31 17

265

•Rechercher les serveurs HyperFileSQL accessibles depuis un ordinateur. C’est ce que nous allons faire.

Validez. Le poste apparaît dans le Centre de Contrôle HyperFileSQL. 4. Sélectionnez votre poste, votre serveur HyperFileSQL et votre base "Ma_Bibliotheque". Donnez les paramètres de connexion (Admin sans mot de passe par défaut). La liste des fichiers s’affiche. 5. L’organisation des données est la suivante :

A - Nom du poste B - Nom du serveur C - Nom de la base D - Fichiers de données de la base. 6. Quelques exemples des informations accessibles (pour plus de détails, consultez l’aide en ligne) : •L’onglet "Description" présente les informations sur les fichiers de données (nombre d’enregistrements, ...) •Si vous sélectionnez un fichier de données, l’onglet "Contenu" présente les données enregistrées, ... Depuis le Centre de Contrôle HyperFileSQL, il est possible d’administrer toute la base de données HyperFileSQL Client/Serveur.

Partie 5 : Base HyperFileSQL Client/Serveur

3. Cliquez sur l’icône . Dans l’écran qui apparaît, sélectionnez par exemple "Serveur HyperFileSQL" et indiquez le nom de votre poste.

GAF_WebDev.book Page 266 Lundi, 15. décembre 2008 5:31 17

266

Créer un compte utilisateur dans le Centre de Contrôle HyperFileSQL

Attention !

Partie 5 : Base HyperFileSQL Client/Serveur

Nous avons vu que lors de l’installation d’un serveur HyperFileSQL et lors de la création d’une base de données, un seul compte utilisateur est créé : le compte de l’administrateur (login "Admin" sans mot de passe). L’utilisation de compte utilisateur permet de sécuriser l’accès aux données. En effet, tous les utilisateurs de l’application ne sont pas des administrateurs. A chaque utilisateur (ou groupe d’utilisateurs), il est possible d’associer des droits. Les droits des utilisateurs spécifiés dans le Centre de Contrôle HyperFileSQL sont des droits de base de données et pas des droits d’application. Il ne faut pas confondre la gestion des droits des bases de données Client/Serveur avec le groupware utilisateur.

Certains utilisateurs peuvent par exemple ne pas avoir le droit d’écrire dans certains fichiers. Pour faire un test simple, nous allons créer un utilisateur et lui permettre de consulter les enregistrements du fichier Livre. 1. Dans le Centre de Contrôle HyperFileSQL, positionnez-vous sur le serveur HyperFileSQL. 2. Dans la partie droite de l’écran, sélectionnez l’onglet "Utilisateurs". Cet onglet permet de gérer les utilisateurs du serveur. Seul pour le moment l’utilisateur "Admin" est présent.

3. Pour créer un nouvel utilisateur, cliquez sur "Nouveau". L’écran permettant de définir les caractéristiques de l’utilisateur apparaît.

GAF_WebDev.book Page 267 Lundi, 15. décembre 2008 5:31 17

267

Notes

(utilisez par exemple "Test" également comme mot de passe) Plusieurs caractéristiques peuvent être notées : • Super Utilisateur : Les utilisateurs désignés comme "Super utilisateur" sont autorisés à effectuer toutes les actions sur le serveur, les bases de données et sur tous les fichiers. • Compte actif : Si cette option n’est pas cochée, l’utilisateur existe mais n’est pas actif (cas des utilisateurs en congés par exemple). • Expiration du mot de passe : Il est possible d’avoir un mot de passe valide pour quelques jours.

4. Validez la création de l’utilisateur. Par défaut, cet utilisateur n’a aucun droit. Nous allons maintenant attribuer des droits à l’utilisateur : l’utilisateur "Test" peut consulter le fichier Livre. 1. Dans le Centre de Contrôle HyperFileSQL, sélectionnez la base de données Ma_Bibliotheque, puis le fichier Livre. 2. Cliquez sur l’onglet "Droits". 3. Sélectionnez l’utilisateur "Test" dans la liste des utilisateurs. 4. Dans la liste des droits, sélectionnez "Droit de lire les enregistrements d’un fichier" et sélectionnez la coche verte dans la colonne "Droit défini". 5. Cliquez sur le bouton "Appliquer". Le droit devient effectif. De cette façon, il est possible de définir des droits : • sur le serveur HyperFileSQL • sur la base de données

Partie 5 : Base HyperFileSQL Client/Serveur

Saisissez par exemple les informations suivantes :

GAF_WebDev.book Page 268 Lundi, 15. décembre 2008 5:31 17

268

Dans notre exemple, l’utilisateur "Test" pourra uniquement parcourir les enregistrements du fichier Livre. Si cet utilisateur tente une autre action, un message s’affichera : "L’utilisateur Test n’a pas les droits suffisants pour XXXX" (où XXX correspond à l’action effectuée). Une fois le compte créé, il peut être utilisé lors de la connexion de l’application au serveur (quand la fonction HOuvreConnexion est utilisée). Notes

Partie 5 : Base HyperFileSQL Client/Serveur

• sur les fichiers de la base de données.

La gestion des utilisateurs et de leurs droits peut également être effectuée par programmation grâce aux fonctions WLangage. Pour plus de détails, consultez l’aide en ligne.

Sauvegarde de la base La sauvegarde de la base de données peut être réalisée directement grâce à l’onglet "Sauvegardes" disponible lors de la sélection de la base de données dans le volet gauche du Centre de Contrôle HyperFileSQL.

GAF_WebDev.book Page 269 Lundi, 15. décembre 2008 5:31 17

269

Conclusion

L’installation d’un site utilisant une base de données HyperFileSQL Client/Serveur suppose : • L’installation d’un serveur HyperFileSQL Client/Serveur. Ce serveur doit être accessible par le site. • L’installation des fichiers de données sur le serveur. Pour plus de détails, consultez l’aide en ligne.

Partie 5 : Base HyperFileSQL Client/Serveur

Notes

Le Centre de Contrôle HyperFileSQL est un outil complet d’administration de base de données, permettant entre autre : • d’arrêter ou de redémarrer un serveur en cas de problème, • de gérer les utilisateurs et leurs droits, • de réindexer les fichiers de données si nécessaire, • de faire des sauvegardes de la base. Le Centre de Contrôle HyperFileSQL est un outil redistribuable qui doit être installé chez les clients possédant des bases de données HyperFileSQL Client/Serveur. Le Centre de Contrôle HyperFileSQL doit être utilisé par l’administrateur de la base de données.

GAF_WebDev.book Page 270 Lundi, 15. dĂŠcembre 2008 5:31 17

Partie 5 : Base HyperFileSQL Client/Serveur

270

GAF_WebDev.book Page 271 Lundi, 15. décembre 2008 5:31 17

PARTIE 6 Les requêtes

GAF_WebDev.book Page 272 Lundi, 15. dĂŠcembre 2008 5:31 17

GAF_WebDev.book Page 273 Lundi, 15. décembre 2008 5:31 17

273

LEÇON 6.1. CRÉEZ VOTRE 1ÈRE REQUÊTE Ce que vous allez apprendre dans cette leçon ... • Manipulations de l’éditeur de requêtes. • Etape par étape, la réalisation d’une requête.

Partie 6 : Requêtes

Durée estimée : 20mn

GAF_WebDev.book Page 274 Lundi, 15. décembre 2008 5:31 17

274

Introduction Une requête permet de définir une interrogation sur des fichiers de données. L’éditeur de requêtes vous permettra par exemple de décrire sans aucune programmation des interrogations du type : • la liste des annonces déposées dans le département 75. • le nombre d’annonces par ville. • le total de tous les tarifs proposés par les agences. Et ce, sur tous les types de bases (HyperFileSQL, Oracle, ...) ! Nous allons voir avec un exemple simple comment manipuler l’éditeur de requêtes. Plus loin dans ce cours, nous verrons une utilisation avancée de l’éditeur de requêtes. Dans cette leçon, vous verrez comment : • Faire une requête simple correspondant à une liste avec une sélection et un tri. • Faire une requête qui effectue un comptage. • Faire une requête multi-fichiers. simplifier la création des requêtes, nous vous avons préparé un projet excercice, conte4 Pour nant les données nécessaires.

Notes

1. Ouvrez le projet "Requete.WWP" présent dans le sous-répertoire "Autoformation\Exercices\Requete" de WebDev 14. Si vous ne voulez pas effectuer les manipulations de cette leçon, le projet corrigé est disponible dans le répertoire "Autoformation\Corriges\Requete".

Partie 6 : Requêtes

Votre première requête Nous allons lister les annonces concernant le département 75. Il s’agit en fait de sélectionner toutes les annonces qui ont été déposées par des personnes habitant le département 75. Lancez l’éditeur de requêtes : 4 1. Dans le menu, sélectionnez "Fichier .. Nouveau .. Requête". 2. L’assistant de création de requêtes se lance. Vous avez la possibilité d’utiliser l’assistant de création de requêtes ou de saisir directement le code SQL de la requête (option "Saisir le code SQL"). Avec l’assistant, vous pouvez réaliser des requêtes de type : • "Sélectionner (SELECT)" : interrogation. • "Ajouter (INSERT)" : ajout dans un fichier. • "Saisir le code SQL" : requête entièrement personnalisée en code SQL. • "Modifier (UPDATE)" : modification dans un fichier. • "Unir (UNION)" : réunion d’interrogations. • "Supprimer (DELETE)" : suppression dans un fichier.

GAF_WebDev.book Page 275 Lundi, 15. décembre 2008 5:31 17

Attention !

275

La saisie directe de code SQL est destinée aux utilisateurs maîtrisant le langage SQL ! Consultez l’aide en ligne pour obtenir la liste des fonctions SQL reconnues par WebDev (mot-clé : "SQL, Langage SQL").

lister les annonces du département 75, nous allons réaliser une requête de sélection. 4 Pour Cliquez sur "Suivant". les rubriques qui constitueront le résultat de la requête : 4 Sélectionnez Sur la gauche, dans la liste des rubriques : 1. Déroulez l’arborescence et sélectionnez le fichier "ANNONCE". 2. Double-cliquez sur les rubriques "Titre", "CodePostal" et "Ville". Ces rubriques apparaissent au milieu de la fenêtre.

Partie 6 : Requêtes

Dans les leçons qui vont suivre, vous allez apprendre à utiliser l’éditeur de requêtes en effectuant des requêtes de sélection simples : sélections de clients, comptages, ... Vous pourrez ensuite approfondir vos connaissances en manipulant et en testant tous les types de requêtes.

GAF_WebDev.book Page 276 Lundi, 15. décembre 2008 5:31 17

276

Partie 6 : Requêtes

obtenir les annonces du département 75, nous allons appliquer une condition de sélec4 Pour tion sur le département. La condition de sélection est la suivante : "Nous désirons les annonces en provenance du département 75". C’est-à-dire les annonces provenant d’une ville dont le département est égal à 75. la rubrique "Departement" du fichier "Annonce" dans la liste des rubriques. 4 Ajoutez Sélectionnez la rubrique "Departement" au centre de la fenêtre. Dans les "Actions" sur la droite, cliquez sur le bouton "Condition de sélection" puis sur "Nouvelle condition". La rubrique est donc : "ANNONCE.Departement". La condition est : "est égal à". La valeur est : "75".

GAF_WebDev.book Page 277 Lundi, 15. décembre 2008 5:31 17

277

La rubrique ne devra pas être visible dans le résultat de la requête. Effectuez un clic 4 Validez. droit sur la rubrique "Departement" au centre de la fenêtre de l’éditeur de requêtes, puis sélectionnez l’option "Ne pas afficher". allons maintenant indiquer le critère de tri. Nous allons trier le résultat par "Titre" 4 Nous d’annonce.

Partie 6 : Requêtes

la rubrique "Titre" au centre. Cliquez dans les "Actions" sur le bouton "Trier" et 4 Sélectionnez choisissez "Trier sur la rubrique sélectionnée". Le tri sera croissant :

Une flèche rouge apparaît à la droite de la rubrique "Titre". Cette flèche indique qu’un 4 Validez. tri croissant est fait sur cette rubrique. La requête est créée. Nous allons lui donner un nom et la sauvegarder. 4 1. En haut de la fenêtre, saisissez le nom "REQ_AnnonceDep75". 2. Saisissez le libellé "Annonces du département 75". 3. Validez.

GAF_WebDev.book Page 278 Lundi, 15. décembre 2008 5:31 17

278

Partie 6 : Requêtes

La représentation graphique de la requête est affichée :

4 Cliquez sur

pour sauvegarder la requête.

GAF_WebDev.book Page 279 Lundi, 15. décembre 2008 5:31 17

279

Notes

A la fin de la création d’une requête il est possible que l’AAD (Aide Au Développement) se déclenche pour vous indiquer que des optimisations de performances sont possibles sur la requête.

Nous ne détaillerons pas cette fonctionnalité dans le cours d’auto-formation. Pour plus de détails, veuillez consulter l’aide en ligne (mot-clé : AAD). . Le résultat s’affiche dans une

Si vous faites un clic droit sur la table affichant le résultat de la requête, un menu contextuel apparaît. Vous avez alors la possibilité d’exporter le résultat vers : • un fichier XLS (Excel). • un fichier XML (eXtensible Markup Language). • un fichier texte.

Partie 6 : Requêtes

Il ne reste plus qu’à tester la requête : cliquez sur le bouton fenêtre :

GAF_WebDev.book Page 280 Lundi, 15. décembre 2008 5:31 17

280

LEÇON 6.2. REQUÊTES AVEC COMPTAGE Ce que vous allez apprendre dans cette leçon ... • Manipulations de l’éditeur de requêtes. • Etape par étape, la réalisation d’une requête avec comptage.

Partie 6 : Requêtes

Durée estimée : 10mn

GAF_WebDev.book Page 281 Lundi, 15. décembre 2008 5:31 17

281

Réalisation d’une requête avec comptage

Notes

Nous allons maintenant créer une requête qui effectue un comptage. Cette requête va comptabiliser le nombre d’occurrences d’une valeur dans un fichier. Nous allons compter le nombre d’annonces par ville. Il s’agit de compter le nombre d’annonces déposées par ville. Rappel : Si vous ne voulez pas effectuer les manipulations de cette leçon, le projet corrigé est disponible dans le répertoire "Autoformation\Corriges\Requete".

Lancez l’éditeur de requêtes : 4 1. Dans le menu, sélectionnez "Fichier .. Nouveau .. Requête". 2. Nous allons réaliser une requête de "sélection" (option "Sélectionner (SELECT)"). Cliquez sur "Suivant". Nous allons sélectionner les rubriques à récupérer dans le résultat de la requête. Pour créer une rubrique de comptage : 4 1. Sur la gauche, dans la liste des rubriques,

La rubrique "le nombre de ANNONCE.Ville" s’affiche dans le résultat de la requête. devons quand même afficher la ville. Sur la gauche, dans la liste des rubriques, re-sélec4 Nous tionnez la rubrique "Ville" du fichier "ANNONCE" (par un double-clic). La requête est créée. Nous allons lui donner un nom et la sauvegarder. 4 1. En haut de la fenêtre, saisissez le nom "REQ_NombreAnnoncesParVille". 2. Saisissez le libellé "Nombre d'annonces par ville". 3. Validez.

Partie 6 : Requêtes

sélectionnez la rubrique "Ville" du fichier "ANNONCE" (par un double-clic). 2. Sélectionnez au centre la rubrique "Ville". 3. Dans les "Actions" (sur la droite), cliquez sur le bouton "Compter" puis sur : "Sur la rubrique sélectionnée". 4. Validez.

GAF_WebDev.book Page 282 Lundi, 15. décembre 2008 5:31 17

282

La représentation graphique de votre requête est affichée :

La rubrique "Comptage_1" contient le comptage des enregistrements décrit plus haut.

Partie 6 : Requêtes

4 Cliquez sur pour sauvegarder la requête. Il ne reste plus qu’à tester la requête. 4 Cliquez sur le bouton .

GAF_WebDev.book Page 283 Lundi, 15. décembre 2008 5:31 17

283

LEÇON 6.3. REQUÊTES SOMME Ce que vous allez apprendre dans cette leçon ... • Manipulations de l’éditeur de requêtes. • Etape par étape, la réalisation d’une requête "Somme".

Partie 6 : Requêtes

Durée estimée : 10mn

GAF_WebDev.book Page 284 Lundi, 15. décembre 2008 5:31 17

284

Réalisation d’une requête "Somme"

Notes

Nous allons maintenant créer une requête qui effectue une somme. Nous allons faire un cumul d’une valeur d’un fichier. Nous allons calculer le total de tous les tarifs proposés par les dépositaires d’une annonce par dépositaire (un dépositaire est un client). Rappel : Si vous ne voulez pas effectuer les manipulations de cette leçon, le projet corrigé est disponible dans le répertoire "Autoformation\Corriges\Requete".

Lancez l’éditeur de requêtes : 4 1. Dans le menu, sélectionnez "Fichier .. Nouveau .. Requête". 2. Cette requête est une requête de sélection. Sélectionnez l’option "Sélectionner (SELECT)". Passez à l’écran suivant. allons sélectionner les rubriques à récupérer dans le résultat de la requête. 4 Nous Nous afficherons tout d’abord le nom du dépositaire (client) et la ville du dépositaire. Sur la gauche, sélectionnez la rubrique "NomComplet" et "Ville" du fichier "CLIENT" (par un double-clic). Rappel : le fichier des dépositaires s’appelle CLIENT.

4 Ensuite, nous devons sélectionner la rubrique sur laquelle nous allons faire la somme. 4 Sur la gauche, sélectionnez la rubrique "Tarif" du fichier "ANNONCE" (par un double-clic). Pour effectuer la somme des valeurs de "Tarif" : 4 1. Sélectionnez tout d’abord la rubrique "Tarif" au centre.

Partie 6 : Requêtes

2. Puis dans les "Actions", sur la droite, sélectionnez "Somme".

3. Enfin validez. La somme des "Tarif" a été ajoutée dans la liste du résultat de la requête.

GAF_WebDev.book Page 285 Lundi, 15. décembre 2008 5:31 17

285

Vous pouvez vous apercevoir, au fur et mesure de la création de la requête, que l’éditeur de requêtes de WebDev crée les requêtes en langage naturel (et également en SQL).

Cette façon de générer des requêtes vous permet de vérifier que vous ne vous êtes pas trompé par rapport à l’objectif de votre requête. La requête est créée. Nous allons lui donner un nom et la sauvegarder. 4 1. En haut de la fenêtre, saisissez le nom "REQ_TotalTarifParClient". 2. Saisissez le libellé "Total des tarifs proposés par client". 3. Validez.

Dans cette représentation, deux sources de données (les fichiers "CLIENT" et "ANNONCE") sont utilisées et reliées par une "jointure".

4 Cliquez sur pour sauvegarder la requête. Il ne reste plus qu’à tester la requête. 4 Cliquez sur le bouton .

Partie 6 : Requêtes

La représentation graphique de votre requête est affichée :

GAF_WebDev.book Page 286 Lundi, 15. décembre 2008 5:31 17

286

LEÇON 6.4. LE LANGAGE SQL Ce que vous allez apprendre dans cette leçon ... • Les principaux ordres du langage SQL.

Partie 6 : Requêtes

Durée estimée : 15mn

GAF_WebDev.book Page 287 Lundi, 15. décembre 2008 5:31 17

287

Code source d’une requête Dans WebDev, la requête est représentée dans l’éditeur sous une forme graphique. Nous allons découvrir maintenant le code source correspondant à une requête. Le langage utilisé pour présenter une requête est le langage SQL. Il s’agit ici d’une présentation de SQL et non pas d’un cours complet (il existe des livres entiers sur le sujet !). Nous allons visualiser le code source SQL de la requête créée dans la leçon précédente. la requête "REQ_TotalTarifParClient". 4 Ouvrez Si vous n’avez pas précédemment

créé cette requête, ouvrez la requête "REQ_TotalTarifParClient" présente dans le répertoire "\Autoformation\Corriges\Requete".

Attention !

La requête en langage SQL est composée de différents mots-clés : • l’instruction SELECT • l’instruction FROM • la clause WHERE • l’instruction GROUP BY

Veillez à bien respecter l’enchaînement de ces ordres. Vous ne pouvez pas inverser cet enchaînement.

Partie 6 : Requêtes

4 Dans le menu, sélectionnez l’option "Requête .. Code SQL".

GAF_WebDev.book Page 288 Lundi, 15. décembre 2008 5:31 17

288

Les ordres SQL L’instruction SELECT L’instruction SELECT permet de définir la liste des rubriques et des calculs à visualiser dans le résultat. La syntaxe est la suivante : SELECT NOMRUBRIQUE1, NOMRUBRIQUE2 ...

Chaque rubrique peut être renommée (on parle d’alias) en utilisant le mot-clé AS. Par exemple : CLIENT.NOMCLIENT AS NOM

Dans cet exemple, la rubrique NomClient du fichier CLIENT est renommée en Nom. NomRubriqueXXX peut être soit une rubrique associée à un fichier, soit une formule de calcul. L’instruction FROM L’instruction FROM permet de définir la liste des fichiers à partir desquels seront extraites les rubriques et les calculs. La syntaxe est la suivante : FROM FICHIER1, FICHIER2 ...

FichierXXX correspond à un des fichiers de l’analyse. L’utilisation de AS est possible (voir "L’instruction SELECT).

Partie 6 : Requêtes

La clause WHERE La clause WHERE contient les conditions de sélection ainsi que les conditions de jointure. Ces conditions permettent de filtrer les enregistrements issus des fichiers de la base de données. Seuls les enregistrements vérifiant la ou les conditions seront récupérés dans le résultat. Une jointure permet de faire correspondre à un enregistrement d’un fichier l’enregistrement d’un fichier relié. Par exemple, une jointure entre les fichiers CLIENT et COMMANDE permettra de connaître toutes les commandes de chaque client. La syntaxe est la suivante : WHERE CONDITION1 ET/OU CONDITION2

Les opérateurs ET et OU permettent de réaliser une opération logique entre deux conditions. • L’opérateur ET indique que les deux conditions doivent être vérifiées en même temps. • L’opérateur OU indique qu’une des deux conditions ou les deux conditions doivent être vérifiées. Par exemple : WHERE DATE>="20030523" ET DEPARTEMENT=75

L’instruction WHERE n’est pas obligatoire. Si cet ordre n’est pas indiqué, tous les enregistrements de tous les fichiers seront sélectionnés. La clause GROUP BY La clause GROUP BY permet d’indiquer les rubriques ou formules de regroupement lorsqu’il y a un calcul. Par exemple, dans la requête que nous avons réalisée précédemment, le calcul portait sur le total de tous les tarifs proposés par les dépositaires. Le regroupement des tarifs était donc réalisé par dépositaire.

GAF_WebDev.book Page 289 Lundi, 15. décembre 2008 5:31 17

289

La syntaxe est la suivante : GROUP BY RUBRIQUE1, RUBRIQUE2 ...

RubriqueXXX correspond à une rubrique d’un des fichiers ou à une formule. La clause ORDER BY La clause ORDER BY permet d’indiquer les critères de tri de la requête. Les critères de tri permettront de classer le résultat de la requête. La syntaxe est la suivante : ORDER BY RUBRIQUE1, RUBRIQUE2 ...

L’éditeur de requêtes génère automatiquement le code SQL, c’est également un moyen didactique de se former au langage SQL !

Partie 6 : Requêtes

Notes

RubriqueXXX correspond à une rubrique d’un des fichiers ou à une formule.

GAF_WebDev.book Page 290 Lundi, 15. décembre 2008 5:31 17

290

LEÇON 6.5. UTILISATION DES REQUÊTES Ce que vous allez apprendre dans cette leçon ... • Utilisation des requêtes dans les états. • Utilisation des requêtes dans les tables. • Utilisation des requêtes en WLangage.

Partie 6 : Requêtes

Durée estimée : 5mn

GAF_WebDev.book Page 291 Lundi, 15. décembre 2008 5:31 17

291

Utilisation d’une requête depuis un état Lors de la création d’un état, vous pouvez choisir la source de données. Toutefois, la source de données peut être une requête. Nous pourrions donc faire un état qui travaille directement sur le résultat d’une requête (voir "Les états", page 295).

Utilisation d’une requête depuis un champ table ou une zone répétée Comme pour les états, lors de la création d’un champ table ou d’une zone répétée, il est possible de définir la source de données pour le remplissage. Cette source peut être un fichier ou une requête.

Utilisation d’une requête depuis le WLangage Vous pouvez également utiliser une requête comme si vous utilisiez un fichier de données. Vous devez : • initialiser l’exécution de votre requête avec HExécuteRequête. • lorsque votre parcours est terminé, utiliser la fonction HAnnuleDéclaration (optionnel, qui permet d’annuler la définition de la requête). // Initialise la requête HExécuteRequete(MaRequête) SI ErreurDétectée ALORS Erreur("Erreur d’initialisation de la requête"+... RC+HErreurInfo()) RETOUR FIN POUR TOUT MaRequête // Traitement sur l’enregistrement de la requête // lecture de l’enregistrement suivant FIN HAnnuleDéclaration(MaRequête) //optionnel

Partie 6 : Requêtes

Votre parcours peut s’effectuer normalement par exemple avec la syntaxe POUT TOUT :

GAF_WebDev.book Page 292 Lundi, 15. décembre 2008 5:31 17

Partie 6 : Requêtes

292

GAF_WebDev.book Page 293 Lundi, 15. décembre 2008 5:31 17

PARTIE 7 Les états

GAF_WebDev.book Page 294 Lundi, 15. dĂŠcembre 2008 5:31 17

GAF_WebDev.book Page 295 Lundi, 15. décembre 2008 5:31 17

295

LEÇON 7.1. INTRODUCTION Ce que vous allez apprendre dans cette leçon ... • Le principe d’impression sur Internet • Qu’est-ce qu’un état ?

Partie 7 : Etats

Durée estimée : 10mn

GAF_WebDev.book Page 296 Lundi, 15. décembre 2008 5:31 17

296

Principes d’impression sur Internet À proprement parler, on ne devrait pas parler d’"impression" sur Internet. En effet, si un document doit être "imprimé", un fichier est d’abord généré (en HTML, en PDF ou encore en XML) puis transmis au navigateur. Dès que le transfert du fichier est terminé, c’est à l’internaute de décider si le document qu’il vient de recevoir doit être imprimé ou non. Une "impression" sur le serveur reste toutefois possible. Mais le document imprimé (sur l’imprimante du serveur même ou sur une imprimante partagée du réseau) ne sera pas accessible ni même consultable par l’internaute. Le document imprimé ou généré est préparé et mis en forme avec l’éditeur d’états. Les informations contenues dans le document peuvent provenir d’une base de données Nous distinguerons donc deux types d’impression : 1. L’impression directe (sur l’imprimante du serveur). 2. La génération de documents divers (HTML, PDF, ...).

Partie 7 : Etats

Notes

Impression directe L’impression directe consiste à imprimer directement sur une imprimante. Cette imprimante est reliée au poste serveur ou accessible depuis le réseau. L’impression directe avec WebDev n’est conseillée que dans le cadre d’un Intranet ou un Extranet. Ce type d’impression permet par exemple d’imprimer des journaux de connexions des clients, d’imprimer les commandes en direct sur l’imprimante du service commercial. L’impression directe peut également être utilisée pour envoyer un fax depuis le serveur Web (voir la documentation sur la fonction WLangage iAperçu).

Génération de documents HTML, PDF, XML, ... L’impression à partir de documents HTML, PDF, XML consiste à créer un document puis à l’afficher sur le navigateur de l’internaute. Pour créer ce document, il suffit d’utiliser l’éditeur d’états de WebDev. Ainsi, depuis une source de données, votre site WebDev peut "générer" un fichier mis en forme. Ce fichier peut être au format HTML, PDF, RTF ou XML. Le principal intérêt de cette méthode d’impression est que le fichier ainsi généré peut être transmis au navigateur. L’internaute peut alors imprimer ou stocker le document sur son poste. L’impression dans un fichier peut être utilisée tant pour un site Internet que pour un site Intranet/ Extranet (par exemple : transmettre un bon de commande PDF à l’internaute, ...).

Vocabulaire de base Un Etat est le nom donné à la représentation d’une édition. Dans l’éditeur de WebDev, on construit un état. Lors de l’exécution (ou de l’édition) de l’état, un document est créé. WebDev propose plusieurs types d’états : • Vierge • Fiche • Etiquette • Tableau

GAF_WebDev.book Page 297 Lundi, 15. décembre 2008 5:31 17

297

• Tableau croisé • Tableau avec graphe • Mailing • Formulaire • Graphe

Les différents blocs d’un état : • Début de document : Le bloc Début de document est imprimé une seule fois au début de l’exécution de l’état. Ce bloc contient généralement le titre général du document, la date du jour et éventuellement l’heure d’édition. • Haut de page : Le bloc Haut de page est imprimé à chaque nouvelle page. Ce bloc est exécuté après le bloc Début de document s’il existe. Le bloc Haut de page contient des informations qui doivent figurer en haut de chaque page, par exemple le titre, ou un champ pré-défini indiquant le numéro de page. • Haut de rupture : Le bloc Haut de rupture est optionnel. Il est créé si une rupture est demandée sur un argument de tri. Si ce bloc existe, le bloc Fin de rupture existe obligatoirement. Ce bloc est exécuté à chaque changement de valeur de l’argument de tri, avant l’exécution de la première itération du bloc Corps pour une nouvelle valeur de l’argument de tri. • Corps : Le bloc Corps correspond au bloc principal de l’état. Ce bloc est obligatoirement présent dans chaque état. Ce bloc est imprimé autant de fois qu’il y a d’enregistrements à imprimer.

Partie 7 : Etats

Un Bloc est le nom donné à une partie de l’état. Un état est constitué d’un ensemble de blocs.

GAF_WebDev.book Page 298 Lundi, 15. décembre 2008 5:31 17

298

• Bas de rupture : Le bloc Bas de rupture est optionnel. Il est créé si une rupture est demandée sur un argument de tri. Si ce bloc existe, un bloc Haut de rupture existe obligatoirement. Ce bloc est exécuté à chaque changement de valeur de l’argument de tri, après la dernière itération du bloc Corps pour une valeur de l’argument de tri. Il contient généralement des champs compteurs ou totaux sur les enregistrements correspondant à l’argument de tri. • Bas de page : Le bloc Bas de page est exécuté à la fin de chaque page. Le bloc Bas de page contient des informations qui doivent figurer en bas de chaque page, par exemple des compteurs et/ou des totaux (générés lors de la création du document ou ajoutés par la suite) ou le numéro de la page en cours par rapport au nombre de pages totales. • Fin de document : Le bloc Fin de document est exécuté une seule fois à la fin de l’exécution de l’état. Le bloc Fin de document contient généralement des compteurs et/ou des totaux (générés lors de la création du document ou ajoutés par la suite). Il existe également d’autres blocs que nous ne détaillerons pas ici : • bloc d’itération (Le bloc Itération est un bloc libre, créé manuellement sous l’éditeur d’états). • complément de corps (Le bloc Complément permet de compléter l’édition jusqu’en bas de page, s’il n’y a plus assez de lignes à éditer issues du bloc Corps) Ces différents blocs ne sont pas tous obligatoires. Ils peuvent être supprimés lors de la conception de l’état. Seul le bloc "Corps" est obligatoire.

Partie 7 : Etats

Vous avez également la possibilité d’imprimer des états avec codes barres (automatiquement générés par WebDev), des états avec étiquettes ...

GAF_WebDev.book Page 299 Lundi, 15. décembre 2008 5:31 17

299

LEÇON 7.2. VOTRE 1ER ÉTAT Ce que vous allez apprendre dans cette leçon ... • Etape par étape, la construction d’un état.

Partie 7 : Etats

Durée estimée : 25mn

GAF_WebDev.book Page 300 Lundi, 15. décembre 2008 5:31 17

300

Présentation cette partie, nous vous avons préparé un projet exercice, contenant les données néces4 Pour saires.

Notes

le projet "Etats.WWP" présent dans le sous-répertoire "Autoformation\Exercices\Etats" 4 Ouvrez de WebDev 14. Si vous ne voulez pas effectuer les manipulations de cette leçon, le projet corrigé est disponible dans le répertoire "Autoformation\Corriges\Etats".

Afin de vous familiariser rapidement avec les données, nous avons pris pour exemple des fichiers simples : • un fichier CLIENT • un fichier ANNONCE • un fichier RUBRIQUE • un fichier CATEGORIE • un fichier BANNIERE

Partie 7 : Etats

Ci-dessous la modélisation logique (MERISE) des données utilisées (appelé MLD) :

Les états à créer apprendre à utiliser l’éditeur d’états, nous allons créer les exemples suivants : 4 •Pour Liste des clients (dépositaires d’une annonce) triée par code postal. • Liste des annonces par client (dépositaire d’une annonce). • Nombre d’annonces par année et par catégorie.

GAF_WebDev.book Page 301 Lundi, 15. décembre 2008 5:31 17

301

Création de votre premier état Création de l’état : Liste des clients triée par code postal Nous allons imprimer la liste des clients (dépositaires d’une annonce) triée par code postal. Pour cela, nous allons utiliser un état de type tableau, qui permet de représenter clairement une liste de données.

Partie 7 : Etats

créer un état, sélectionnez "Fichier .. Nouveau .. Etat". L’assistant de création d’états se 4 Pour lance et propose plusieurs présentations pour la création d’un état :

4 Sélectionnez "Tableau". Passez à l’écran suivant.

GAF_WebDev.book Page 302 Lundi, 15. décembre 2008 5:31 17

302

4 L’assistant propose de choisir la source de données de l’état :

Partie 7 : Etats

"D’une requête" et passez au plan suivant. La requête n’existant pas, nous allons 4 Sélectionnez la créer.

"D’une requête que je veux définir maintenant" et passez au plan suivant. 4 Sélectionnez L’assistant de description d’une requête s’affiche. Cet écran permet de sélectionner les fichiers contenant les données à imprimer. Nous allons imprimer des données provenant du fichier CLIENT. sur le signe "+" à gauche du fichier CLIENT. Sélectionnez les rubriques à imprimer (par 4 Cliquez un double-clic) : • NomComplet • CodePostal • Ville

GAF_WebDev.book Page 303 Lundi, 15. décembre 2008 5:31 17

303

Pour trier par code postal, il faut choisir un critère de tri : 4 1. Sélectionnez la rubrique de tri : cliquez sur "CLIENT.CodePostal" au milieu de l’écran.

Partie 7 : Etats

2. Dans la partie droite, cliquez sur le bouton "Trier" et choisissez l’option "Trier sur la rubrique sélectionnée".

3. Choisissez "Croissant" et validez. Une flèche rouge apparaît à droite de la rubrique "CodePostal". Cette flèche indique qu’un tri croissant est fait sur cette rubrique.

GAF_WebDev.book Page 304 Lundi, 15. décembre 2008 5:31 17

304

Partie 7 : Etats

Notes

à l’écran suivant pour valider la création de la requête. L’écran suivant vous demande 4 Passez d’indiquer s’il y a une rupture.

Qu'est-ce qu'une rupture? Une Rupture consiste à regrouper des enregistrements (ou lignes d’un tableau) suivant un ou plusieurs critères. Attention, les enregistrements (ou lignes) sont bien entendus imprimés. Cette rupture est OBLIGATOIREMENT liée à un tri. On note la présence d’un en-tête de rupture et d’une fin de rupture. Les informations communes aux différentes lignes seront regroupées dans l’entête de rupture. Les totaux et les sommes seront affichés dans la fin de rupture.

Dans notre exemple, la rupture concerne le code postal et permet de regrouper tous les clients d’une même commune.

4 Répondez "Oui" et passez à l’écran suivant.

GAF_WebDev.book Page 305 Lundi, 15. décembre 2008 5:31 17

305

4 La rupture s’effectue sur le code postal. Passez à l’écran suivant. allez ensuite indiquer dans quel ordre sont imprimées les rubriques et leur répartition 4 Vous dans les différents blocs.

Partie 7 : Etats

Dans notre exemple, le code postal et la ville seront dans le bloc "Haut de rupture 1" et le nom dans le corps. Dans la colonne de droite, sélectionnez "Haut de rupture 1" pour "Ville".

Les flèches à droite permettent de modifier l’ordre des rubriques. Passez à l’écran suivant. écran permet de définir la mise en page de l’état. Nous garderons les valeurs par défaut 4 Cet avec l’orientation "Portrait". Lors du choix des marges d'impression, n'oubliez pas de tenir compte des marges physiques des imprimantes. Les marges physiques sont les marges réservées par l'imprimante dans lesquelles il n'est pas possible d'imprimer. De plus, les marges physiques diffèrent en fonction

GAF_WebDev.book Page 306 Lundi, 15. décembre 2008 5:31 17

306

des modèles d’imprimante. Passez à l’écran suivant.

4 Sélectionnez le gabarit "Media Center". Passez à l’écran suivant. Il ne nous reste plus qu’à donner un nom et un libellé à l’état puis à le sauvegarder. 4 1. Saisissez le nom "ETAT_ClientParCodePostal". 2. Saisissez le titre "Liste des clients triés par code postal". 3. Validez. L’état apparaît en édition. Modifiez si nécessaire la taille du titre pour le voir dans son intégralité.

4. Enregistrez l’état (icône voir le résultat.

). L’état est terminé. Nous allons immédiatement le tester pour

Partie 7 : Etats

cet état en cliquant sur l'icône "GO" de la barre d'icônes. La destination de l’impres4 Exécutez sion peut être au choix :

GAF_WebDev.book Page 307 Lundi, 15. décembre 2008 5:31 17

307

"Aperçu avant impression" et validez. 4 Choisissez L'exécution de l'état s'affiche à l'écran.

Sous WebDev, la fenêtre d’aperçu avant impression n’est utilisable qu’en mode test depuis l’éditeur lors de la création d’un état. Lors du déploiement ou du test de votre site, la fenêtre d’aperçu avant impression ne sera pas disponible.

Partie 7 : Etats

Notes

Vous pouvez directement : • imprimer la page en cours ou la totalité du document en cliquant sur les imprimantes. • sélectionner un niveau de zoom plus ou moins important :

GAF_WebDev.book Page 308 Lundi, 15. décembre 2008 5:31 17

308

LEÇON 7.3. ETATS STATISTIQUES Ce que vous allez apprendre dans cette leçon ... • Lier plusieurs fichiers de données dans un état. • Faire des regroupements dans un état.

Partie 7 : Etats

Durée estimée : 30mn

GAF_WebDev.book Page 309 Lundi, 15. décembre 2008 5:31 17

309

Présentation

L’état que nous allons réaliser utilise plusieurs fichiers de données comme source. Rappel : Pour cette partie, nous vous avons préparé un projet exercice, contenant les données nécessaires.

Notes

Partie 7 : Etats

Nous allons maintenant éditer la liste des annonces par client (dépositaires d’une annonce). Cette liste sera triée sur le nom du client. Pour chaque client, nous imprimons l’annonce et le détail de l’annonce avec un sous-total (tarif proposé) pour chaque annonce. Nous cherchons à obtenir un résultat semblable à la représentation ci-dessous :

GAF_WebDev.book Page 310 Lundi, 15. décembre 2008 5:31 17

310

Etape par étape Pour créer un nouvel état : 4 1. Sélectionnez l’option "Fichier .. Nouveau .. Etat".

Partie 7 : Etats

2. Sélectionnez "Tableau". Passez à l’écran suivant. 3. Sélectionnez "D’une requête". Passez à l’écran suivant. La requête n’existant pas, nous allons la créer. 4. Sélectionnez "Une requête que je veux définir maintenant". Passez à l’écran suivant. Nous allons imprimer des données provenant des fichiers CLIENT, ANNONCE et CATEGORIE. 5. Sélectionnez les rubriques suivantes à imprimer (par un double-clic) : • Le fichier CLIENT : •NomComplet •Pseudo •CodePostal •Ville • Le fichier ANNONCE : •AnnonceID •DateCreation •Titre •Texte •Tarif • Le fichier CATEGORIE : •Categorie •RUBRIQUEID

GAF_WebDev.book Page 311 Lundi, 15. décembre 2008 5:31 17

311

1. Cliquez sur la rubrique "CLIENT.NomComplet". Dans le menu contextuel (clic droit), sélectionnez "Trier la rubrique .. Trier par ordre croissant". 2. Cliquez ensuite sur la rubrique "CATEGORIE.RUBRIQUEID". Dans le menu contextuel (clic droit), sélectionnez "Trier la rubrique .. Trier par ordre croissant".

Partie 7 : Etats

allons trier les résultats par nom de client et par numéro d’annonce. Pour cela, dans la 4 Nous liste au centre :

GAF_WebDev.book Page 312 Lundi, 15. décembre 2008 5:31 17

312

Une flèche rouge doit apparaître à droite de la rubrique "CLIENT.NomComplet" et "CATEGORIE.RUBRIQUEID" :

Nous allons valider cet écran. Passez à l’écran suivant. de création d’état nous propose de créer des ruptures. Choisissez "Oui". Passez à 4 L’assistant l’écran suivant. Par défaut, des ruptures sont proposées sur les rubriques "NomComplet" et

Partie 7 : Etats

"RUBRIQUEID", car se sont les critères de tri déjà définis.

GAF_WebDev.book Page 313 Lundi, 15. décembre 2008 5:31 17

313

Nous allons confirmer ce choix. Passez à l’écran suivant. allons ensuite définir la répartition des rubriques. 4 •Nous Les informations concernant le client seront dans le haut de rupture 1 : NomComplet, Pseudo, CodePostal, Ville. • Les informations concernant la catégorie de l’annonce seront dans le haut de rupture 2 : Categorie, RUBRIQUEID. • Le corps de l’édition concerne le détail de chaque annonce : ANNONCEID, DateCreation, Titre, Texte, Tarif. L’image ci-dessous présente la répartition à effectuer :

Passez à l’écran suivant. faut maintenant indiquer s’il y a des sommes ou des comptages dans l’état. Nous allons 4 Iladditionner le montant des tarifs proposés par les clients pour leurs annonces. Cette somme Partie 7 : Etats

sera placée dans une rupture. Nous allons conserver la somme sur le tarif.

GAF_WebDev.book Page 314 Lundi, 15. décembre 2008 5:31 17

314

Passez à l’écran suivant.

4 Conservez les paramètres par défaut pour le format de la page. Passez à l’écran suivant. 4 Choisissez le modèle prédéfini "Media Center". Passez à l’écran suivant. un nom à l’état pour terminer : "ETAT_AnnoncesParClient", et un libellé "Liste des 4 Donnez annonces par client (dépositaire)", par exemple. L’état étant trop grand, acceptez de passer en mode paysage. 4 Validez. L’état apparaît sous l’éditeur. Redimensionnez si nécessaire : • le titre de l’état • la colonne titre • la colonne texte

Partie 7 : Etats

4 Enregistrez l’état (icône

). Il ne reste plus qu’à tester en cliquant sur "GO".

GAF_WebDev.book Page 315 Lundi, 15. décembre 2008 5:31 17

315

La fenêtre d’aperçu avant impression n’est utilisable qu’en mode test depuis l’éditeur lors de la création d’un état. Lors du déploiement ou du test de votre site cette option ne sera pas disponible. Partie 7 : Etats

Notes

L’aperçu avant impression affiche l’état suivant :

GAF_WebDev.book Page 316 Lundi, 15. décembre 2008 5:31 17

316

LEÇON 7.4. ETATS TABLEAU CROISÉ Ce que vous allez apprendre dans cette leçon ... • Etape par étape, la création d’un état tableau croisé.

Partie 7 : Etats

Durée estimée : 20mn

GAF_WebDev.book Page 317 Lundi, 15. décembre 2008 5:31 17

317

Présentation L'éditeur d'états offre également la possibilité de créer des états de type "Tableau Croisé". L'état est alors constitué uniquement d'un tableau à deux entrées. Exemple :

Contrairement aux autres types d'états, l'état "Tableau croisé" est toujours basé sur une requête intégrée. Cette requête est créée grâce à l'assistant de création de l'état "Tableau croisé". Vous pourrez par ailleurs modifier cette requête une fois votre état créé.

Notes

Etape par étape Nous allons réaliser un état de synthèse sur le nombre d’annonces par année et par catégorie. Les résultats seront triés à la fois par année (horizontal) et par catégorie d’annonces (vertical). Pour créer un nouvel état : 4 1. Sélectionnez l’option "Fichier .. Nouveau .. Etat". 2. Sélectionnez "Tableau croisé". Passez à l’écran suivant. 3. L’assistant vous propose alors de choisir la rubrique qui servira de source de données pour les en-têtes de colonnes.

Partie 7 : Etats

Rappel : Pour cette partie, nous vous avons préparé un projet exercice, contenant les données nécessaires.

GAF_WebDev.book Page 318 Lundi, 15. décembre 2008 5:31 17

318

Cela revient à définir la première entrée (ligne) de votre tableau croisé. Sélectionnez la rubrique "DateCreation" dans le fichier "ANNONCE". L’assistant vous propose alors trois choix (jour, mois et année) :

Partie 7 : Etats

4. Choisissez "Année". Passez à l’écran suivant. 5. L’assistant vous demande si vous souhaitez "borner" les dates. Ne cochez rien, nous allons prendre toutes les annonces. Passez à l’écran suivant. 6. L’assistant vous demande maintenant de choisir la rubrique qui servira de source de données pour les lignes. En fait, vous allez choisir la seconde entrée (colonne) de votre tableau croisé. Sélectionnez la rubrique "Categorie" dans le fichier "CATEGORIE".

Passez à l’écran suivant.

GAF_WebDev.book Page 319 Lundi, 15. décembre 2008 5:31 17

319

7. L’assistant vous demande maintenant de sélectionner le type d’information à afficher dans les cellules du tableau croisé. Comme nous voulons afficher le nombre d’annonces par année et par catégorie, nous allons demander le nombre d’enregistrement pour chaque catégorie et chaque année. Sélectionnez "Le nombre d’enregistrements par Année et par Categorie".

Passez à l’écran suivant. 8. L’assistant vous propose par défaut de calculer une somme par ligne et une somme par colonne. Nous allons accepter ce calcul. Passez à l’écran suivant. 9. Ne changez rien à la mise en page. Passez à l’écran suivant. 10. Sélectionnez le modèle prédéfini "Media Center". Passez à l’écran suivant.

2. Saisissez le titre : "Synthèse des annonces par catégorie et par année". 3. Validez. 4. Confirmez le passage en mode paysage. 5. L’état apparaît sous l’éditeur d’états. Redimensionnez si nécessaire : • le titre de l’état • le titre du haut de page.

Partie 7 : Etats

Vous allez donner un nom à cet état : 4 1. Saisissez le nom : "ETAT_TabCroisé".

GAF_WebDev.book Page 320 Lundi, 15. décembre 2008 5:31 17

320

4 Enregistrez l’état (icône

). Il ne reste plus qu’à tester en cliquant sur "GO".

Partie 7 : Etats

Attention, l’exécution d’un état de type Tableau Croisé peut être relativement longue en fonction des données à imprimer.

Vous venez de réaliser facilement un état tableau croisé. Ce type d’état peut bien entendu être utilisé pour d’autres applications, notamment pour effectuer des comparatifs, des statistiques, etc.

GAF_WebDev.book Page 321 Lundi, 15. décembre 2008 5:31 17

321

LEÇON 7.5. EXÉCUTION DES ÉTATS Ce que vous allez apprendre dans cette leçon ... • Exécution des états en WLangage.

Partie 7 : Etats

Durée estimée : 10mn

GAF_WebDev.book Page 322 Lundi, 15. décembre 2008 5:31 17

322

Exécuter les états en WLangage

Notes

Vous avez créé des états qui ont été testés depuis l'éditeur. Nous allons voir comment lancer l’exécution d’un état depuis votre site. Grâce au WLangage, WebDev offre la possibilité d’exécuter des états depuis un site, mais également de programmer l’état. Vous pouvez rajouter du code pour effectuer des traitements spécifiques à l’intérieur de chaque bloc de l’état (par exemple : faire un calcul, enregistrer un journal des erreurs, ...).

Attention !

Avec WebDev, vous avez la possibilité d’imprimer vos états : • directement sur une imprimante du serveur ou accessible depuis le serveur. Cette solution ne sera généralement pas utilisée pour des sites Internet, mais pour des sites Intranet. L’impression directe sur une imprimante du serveur ou accessible depuis le serveur nécessite une configuration particulière du poste serveur (droits, ...). Reportez-vous à la documentation en ligne pour plus d’informations sur ce sujet (mot-clé : "Impression").

• dans un fichier PDF, HTML ou RTF. C’est cette solution qui sera le plus souvent utilisée (le fichier généré peut être directement renvoyé au navigateur grâce à la fonction serveur FichierAffiche par exemple). La syntaxe générale d’exécution d’un état est la suivante : • Impression sur le serveur : // impression directe de l'état "Etat_Table_POPULATION" iDestination(iImprimante) iImprimeEtat(Etat_Table_POPULATION)

Partie 7 : Etats

• Impression dans un fichier : // impression de l’état Etat_Table_Population // dans un fichier HTML Fichier est une chaîne = fRepWeb()+ "\"+"ETAPOP_" + ... DateDuJour() + Maintenant() + ".htm" iDestination(iHTML, Fichier) iImprimeEtat(Etat_Table_POPULATION) FichierAffiche(Fichier, "text/html") fSupprime(Fichier)

Remarques : Dans ce code : • la fonction fRepWeb permet de créer le fichier correspondant à l’état dans le répertoire _WEB de l’application (ce répertoire a les droits en écriture). • les fonctions DateDuJour et Maintenant sont utilisées pour créer des fichiers portant des noms différents sur le serveur. Cela permet de différencier les états de chaque internaute créés sur le serveur. • la fonction fSupprime permet de supprimer le fichier créé dès qu’il a été affiché.

GAF_WebDev.book Page 323 Lundi, 15. décembre 2008 5:31 17

323

Fonction iDestination La fonction iDestination permet de sélectionner le mode de sortie de l’édition. La syntaxe de la fonction iDestination est la suivante : iDestination(<format de sortie>)

Le paramètre <format de sortie> peut prendre différentes valeurs : • iImprimante : pour une sortie directe sur l’imprimante courante • iFichier : pour imprimer l’état dans un fichier texte • iPDF : pour imprimer l’état au format PDF • iHTML : pour imprimer l’état au format HTML • iHTMLSansCSS : pour imprimer l’état au format HTML sans feuille de style • iRTF : pour imprimer l’état au format RTF • iXLS : pour imprimer l’état dans un fichier XLS • iXML : pour imprimer l’état dans un fichier XML • iFax : pour une sortie directe sur un fax. Pour plus de détails sur la fonction iDestination, consultez l’aide en ligne (mot-clé : "iDestination"). Fonction iImprimeEtat La fonction iImprimeEtat permet d’indiquer le nom de l’état à exécuter. La syntaxe de cette fonction est la suivante : iImprimeEtat(<Nom de l’état>)

Partie 7 : Etats

D’autres syntaxes sont possibles pour ces deux fonctions, consultez l’aide en ligne pour plus de détails (mots-clés : "Impression d'un état", "iDestination", "iImprimeEtat").

GAF_WebDev.book Page 324 Lundi, 15. dĂŠcembre 2008 5:31 17

Partie 7 : Etats

324

GAF_WebDev.book Page 325 Lundi, 15. décembre 2008 5:31 17

PARTIE 8 Programmation avancée

GAF_WebDev.book Page 326 Lundi, 15. dĂŠcembre 2008 5:31 17

GAF_WebDev.book Page 327 Lundi, 15. décembre 2008 5:31 17

327

LEÇON 8.1. FONCTIONNALITÉS WEB Ce que vous allez apprendre dans cette leçon ... • Les cookies. • Upload et Download : transferts de fichiers. • Sécuriser les pages. • Paiement sécurisé

Partie 8 : Programmation avancée

Durée estimée : 30mn

GAF_WebDev.book Page 328 Lundi, 15. décembre 2008 5:31 17

328

Présentation Cette leçon présente plusieurs fonctionnalités spécifiques au WEB pouvant être incorporées dans un site WebDev. Pour cette leçon, nous vous avons préparé un projet contenant les données nécessaires au test des différentes fonctionnalités. le projet "Fonctionnalites_Web.WWP" présent 4 Ouvrez tion\Corriges\Fonctionnalites_Web" de WebDev 14.

dans le sous-répertoire "Autoforma-

Les cookies Un cookie est un moyen simple de stocker temporairement une information chez un internaute. Cette information pourra être récupérée ultérieurement.

Internet

Partie 8 : Programmation avancée

Lorsque l’internaute retourne sur un site qu’il a déjà consulté, le site "reconnaît" l’utilisateur grâce aux cookies. Il est ainsi possible d’éviter de demander des renseignements déjà fournis lors d’une précédente connexion, et de proposer des pages personnalisées. Un cookie possède une date d’expiration (par défaut 30 jours après la création du cookie). Il est automatiquement détruit par le navigateur de l’internaute si sa durée de vie est dépassée.

Un cookie permet par exemple de conserver sur le poste de l’internaute des informations telles que le nom de l’utilisateur, les pages consultées par l’utilisateur, la date de sa dernière connexion, la sauvegarde de ses options, ... Ces informations, enregistrées sous forme de cookies, pourront être lues par le site lors de la prochaine connexion de l’internaute. Le site pourra ainsi proposer des informations personnalisées à l’utilisateur : • bandeau de publicité correspondant aux sujets consultés lors de la dernière connexion, • personnalisation de la page d’accueil avec le nom de l’internaute et la date de dernière connexion, • affichage de promotions correspondant aux recherches effectuées lors de la dernière visite, ... Que contient un cookie ? Un cookie est un fichier texte conservé sur le disque du poste de l’internaute (généralement dans le "cache" Internet du navigateur) pendant une durée spécifiée. Le cookie est créé par le navigateur ou par le serveur.

GAF_WebDev.book Page 329 Lundi, 15. décembre 2008 5:31 17

Notes

Pour créer un cookie, les informations suivantes sont nécessaires : • Nom du cookie, permettant au site d’identifier le cookie • Texte du cookie, correspondant aux renseignements inscrits par le site : les pages consultées, renseignements fournis par l’internaute, ... • Date d’expiration, au delà de laquelle le cookie n’est plus valide (Il sera automatiquement supprimé). • Nom du domaine Internet qui a créé le cookie. Rappel : le domaine Internet est une partie spécifique de l’adresse Internet : http://machine.domaine.com/dossier/page.html

Gérer les cookies avec WebDev WebDev met à votre disposition deux fonctions du WLangage permettant de gérer les cookies dans vos sites : • CookieEcrit permet d’envoyer un cookie lors de l’affichage de la page HTML dans le navigateur de l’internaute • CookieLit permet de récupérer la valeur d’un cookie enregistré sur le poste de l’internaute. Ces fonctions peuvent être utilisées à la fois en code serveur et en code navigateur : • en code serveur, le cookie sera créé sur le poste de l’internaute lors de l’affichage de la prochaine page. La lecture du cookie sera possible uniquement lors de la prochaine connexion de l’internaute. • en code navigateur, le cookie sera directement créé sur le poste de l’internaute à l’appel de la fonction CookieEcrit. La lecture du cookie sera elle aussi immédiate.

Partie 8 : Programmation avancée

329

GAF_WebDev.book Page 330 Lundi, 15. décembre 2008 5:31 17

Pour tester le fonctionnement des cookies dans votre site WebDev, il est nécessaire de tester votre site directement depuis la page de test de l’administrateur WebDev (onglet "Avancé", bouton "Page de test"). En effet, un simple test par un "GO" du projet depuis l’éditeur de WebDev ne permet pas la gestion des cookies. Remarque : En mode test, le cookie ne sera créé que si le navigateur est configuré pour accepter les cookies (consultez la documentation de votre navigateur pour vérifier ces options).

Exemple pratique Pour comprendre le fonctionnement des cookies : 4 1. Ouvrez le projet "Fonctionnalites_Web.WWP" si ce n’est pas déjà fait. Ce projet est présent dans le répertoire "\AutoFormation\Corriges\Fonctionnalites_Web\". Vous pouvez également utiliser directement l’option "? .. Guide d’auto-formation .. Fonctionnalités Web". 2. Lancez si nécessaire l’administrateur WebDev (option "Outils .. WD140Admin - Administrateur WebDev"). 3. Dans l’onglet "Avancé" de l’administrateur, cliquez sur le bouton "Page de test". Une page de tests est automatiquement affichée sur le navigateur. Cette page contient un lien vers tous les sites WebDev dynamiques présents sur le poste en cours. 4. Cliquez sur le lien "Fonctionnalités Web" puis sur le lien "La gestion des cookies". 5. Saisissez votre nom et cliquez sur "Enregistrer". Lors du prochain chargement de cette page, le nom saisi s’affichera automatiquement. sous WebDev, ouvrez la page "PAGE_Cookie" et consultez les différents codes des 4 Revenez boutons et de la page.

Upload de fichiers

Internet

L’upload est l’opération qui consiste à sauvegarder sur le serveur Web un fichier accessible depuis le poste de l’internaute. Le fichier accessible depuis le poste de l’internaute est "uploadé" vers le serveur. Il est chargé et enregistré sur le serveur. L’upload est initié par l’internaute. Il n’est pas possible de forcer l’upload d’un fichier du poste de l’internaute vers le serveur.

L’upload d’un fichier est possible pour tous les types de fichiers (images, vidéo, archives, ...). WebDev permet de proposer l’upload d’un fichier à un champ de saisie de type "Upload". Internet

Partie 8 : Programmation avancée

Attention !

330

Lors d’un upload, il n’est pas possible de spécifier le répertoire par défaut dans lequel l’internaute devra sélectionner un fichier. De plus, il n’est pas possible de spécifier le type de fichier par défaut.

GAF_WebDev.book Page 331 Lundi, 15. décembre 2008 5:31 17

331

L’upload de fichiers peut être utilisé dans les cas suivants : • dans un site de type "Annuaire", lors de l’ajout d’un nouveau contact dans l’annuaire : l’utilisateur peut sélectionner sur son poste la photographie du contact. Pour être affichée quel que soit l’internaute, l’image est uploadée sur le serveur. • dans un site de type "Gestion documentaire", chaque internaute peut mettre à disposition de tous divers types de documents : texte, ... Ces documents sont sélectionnés sur le poste de l’internaute et uploadés sur le serveur afin d’être consultables par tous les internautes. • ...

Un bouton de type "Envoi des données au serveur" permettra d’uploader le fichier vers le serveur lorsque l’internaute cliquera sur ce bouton. Dans le code de clic serveur de ce bouton, un traitement permet de transférer le fichier. Deux fonctions WLangage sont alors utilisées : • UploadCopieFichier : Cette fonction permet d’effectuer le transfert du fichier du poste de l’internaute vers le serveur. • UploadNomFichier : Cette fonction permet de récupérer le nom du fichier transféré. Exemple pratique Pour comprendre le fonctionnement de l’upload : 4 1. Ouvrez le projet "Fonctionnalites_Web.WWP" si ce n’est pas déjà fait. Ce projet est présent dans le répertoire "\AutoFormation\corriges\Fonctionnalites_Web\". Vous pouvez également utiliser directement l’option "? .. Guide d’auto-formation .. Fonctionnalités Web". 2. Ouvrez et testez la page "PAGE_UploadDownload". 3. Consultez les différents codes des boutons.

Partie 8 : Programmation avancée

Gérer l’upload Pour gérer l’upload de fichiers dans votre site WebDev, il est nécessaire de créer un champ de saisie de type "Upload" dans une page. Lors de l’affichage d’un champ de saisie "Upload" dans le navigateur, un bouton "Parcourir" est automatiquement ajouté à droite du champ de saisie. Ce bouton permet à l’utilisateur de sélectionner le fichier à uploader.

GAF_WebDev.book Page 332 Lundi, 15. décembre 2008 5:31 17

332

Le download de fichiers (ou "téléchargement")

Internet

Le download est l’opération inverse de l’upload. C’est la méthode la plus répandue sur Internet. Le download consiste à enregistrer sur le poste de l’internaute un fichier provenant du serveur. Le fichier du serveur est "downloadé" (nous utiliserons par la suite le terme "téléchargé") vers le poste de l’internaute, puis enregistré sur le poste de l’internaute. Le download est initié par le serveur. Il n’est pas possible de forcer le répertoire de destination du fichier. L’internaute peut à tout moment annuler le téléchargement du fichier.

Le téléchargement d’un fichier est possible pour tous les types de fichiers (images, vidéo, archives).

Partie 8 : Programmation avancée

Remarque : Si le logiciel approprié est installé sur le poste de l’internaute, certains fichiers pourront être visualisés directement dans le navigateur (fichiers texte ou PDF par exemple). Le téléchargement de fichiers peut être utilisé dans les cas suivants : • dans un site de vente ou location en ligne de DVD. Il est par exemple possible de télécharger la bande-annonce d’un film sur le poste de l’internaute afin de la regarder. • dans un site de type "Gestion documentaire". Chaque internaute peut télécharger divers types de documents. Ces documents sont sélectionnés sur le poste serveur et téléchargés sur le poste de l’internaute afin qu’il puisse les consulter. • ...

GAF_WebDev.book Page 333 Lundi, 15. décembre 2008 5:31 17

333

• utilisation de la fonction FichierAffiche en code serveur. Exemple pratique Pour comprendre le fonctionnement du download : 4 1. Ouvrez le projet "Fonctionnalites_Web.WWP" si ce n’est pas déjà fait. Ce projet est présent dans le répertoire "\AutoFormation\corriges\Fonctionnalites_Web\". Vous pouvez également utiliser directement l’option "? .. Guide d’auto-formation .. Fonctionnalités Web". 2. Ouvrez et testez la page "PAGE_UploadDownload". 3. Consultez les différents codes des boutons.

Sécuriser les pages Un site peut proposer à une partie de ses internautes des pages spécifiques (administration back office, consultation des commandes d’un client, ...). Dans la plupart des cas, la protection de vos pages par un mot de passe suffira. Dans d’autres cas, pour protéger plus efficacement les pages, l’affichage des pages pourra être réalisé grâce au protocole SSL. Protéger l’accès à vos pages par mot de passe Une gestion d’accès à un site ou à un groupe de pages par mot de passe peut être nécessaire dans les cas suivants : • Protéger des informations personnelles (mais non sensibles) • Limiter l’accès à certaines pages (réservés à des personnes inscrites ou à l’administrateur du site), ...

Partie 8 : Programmation avancée

Gérer le téléchargement (download) Pour gérer le téléchargement de fichiers, il existe plusieurs possibilités : • utilisation d’un champ "Lien" de type Autre, avec l’adresse du fichier à télécharger :

GAF_WebDev.book Page 334 Lundi, 15. décembre 2008 5:31 17

334

Dans presque tous les cas, une identification devra être demandée à l’internaute (nom d’utilisateur et mot de passe). Par exemple, dans un site commercial de vente en ligne, un internaute identifié pourra consulter l’historique de ses commandes ... Les noms d’utilisateurs et leurs mots de passe peuvent être stockés dans un fichier de données HyperFileSQL ou directement saisis dans le code serveur WLangage du projet WebDev. Pour observer un exemple d’identification de l’internaute dans une page WebDev : 4 1. Ouvrez le projet "Fonctionnalites_Web.WWP" si ce n’est pas déjà fait. Ce projet est présent

Cette page permet d’accéder à une zone sécurisée réservée à un administrateur. Les pages suivantes (si l’identification a réussi) seront protégées par le protocole SSL (voir paragraphe "Sécuriser les informations et les pages grâce à SSL" dans la suite de cette leçon). Attention !

Partie 8 : Programmation avancée

dans le répertoire "\AutoFormation\corriges\Fonctionnalites_Web\". Vous pouvez également utiliser directement l’option "? .. Guide d’auto-formation .. Fonctionnalités Web". 2. Ouvrez et testez la page "PAGE_Securite".

Vous devez avoir au préalable installé un certificat SSL sur votre serveur Web. Consultez l’aide en ligne pour plus de détails sur l’obtention d’un certificat SSL (mot-clé : "SSL").

3. Entrez un nom d’utilisateur et un mot de passe quelconques, puis observez.

GAF_WebDev.book Page 335 Lundi, 15. décembre 2008 5:31 17

335

// Si l'utilisateur a dépassé le nombre de tentatives SI Tentatives > 2 ALORS LIB_Tentatives = "Pour accéder à cette zone, "... "vous devez vous identifier. Vous n'avez plus de tentatives." Erreur("Vous avez dépassé le nombre de tentatives.") // Rend invisible les champs IDENTIFICATION..Visible = Faux MoiMême..Visible = Faux RETOUR FIN // Vérifie l'identité de l'utilisateur // La vérification de l'identité pourrait être réalisée // grâce à des données stockées dans un fichier HyperFileSQL SI SAI_NOMUTI <> "ADMIN" ALORS // L'utilisateur n'a pas saisi le bon nom d'utilisateur, // augmente le nombre de tentatives échouées Tentatives += 1 LIB_Tentatives = ChaîneConstruit(Texte_Tentative, ... (4-Tentatives)) Erreur("Nom d'utilisateur ou mot de passe erroné.",... "Veuillez recommencer.") SINON SI SAI_MOTDEPASSE <> "ADMIN" ALORS // L'utilisateur n'a pas saisi le bon mot de passe, // augmente le nombre de tentatives échouées Tentatives += 1 LIB_Tentatives = ChaîneConstruit(Texte_Tentative, ... (4-Tentatives)) Erreur("Nom d'utilisateur ou mot de passe erroné.", ... "Veuillez recommencer.") SINON // L'utilisateur a saisi le bon nom d'utilisateur // et le bon mot de passe PageAffiche(PAGE_SecuriseOK, SAI_NOMUTI) FIN FIN

Ce code permet tout simplement de comparer la saisie effectuée par l’internaute avec le nom et le mot de passe attendu par le site. S’il y a concordance, la zone "sécurisée" est affichée dans le navigateur de l’internaute (fonction PageAffiche). Dans le cas contraire, une erreur est affichée, et l’internaute doit recommencer sa saisie.

Partie 8 : Programmation avancée

4. Enfin, entrez le nom d’utilisateur "ADMIN" et le mot de passe "ADMIN" (attention : l’identification est sensible aux minuscules et majuscules), puis observez également le fonctionnement. 5. Retournez sous WebDev et étudiez les différents codes présents dans la page et le bouton "Entrer".

GAF_WebDev.book Page 336 Lundi, 15. décembre 2008 5:31 17

336

Sécuriser les informations et les pages grâce à SSL Par défaut, les données circulant entre le poste de l’internaute et le serveur Web ne sont pas protégées. La confidentialité des données échangées n’est pas certifiée. Pour assurer la confidentialité, plusieurs systèmes existent. Un système courant est l’utilisation du protocole SSL (Secure Socket Layer). Les informations ne transitent alors plus par le protocole HTTP, mais par le protocole HTTPS (par exemple : https://clients.monsitewebdev.com/wd120awp/wd120awp.exe/connect/clients).

Transactions sécurisées par SSL dans un site WebDev Seul le transfert de données sensibles doit être sécurisé : transfert du numéro de carte bancaire par exemple. En effet, le mode sécurisé est plus lent. La mise en place d’une transaction sécurisée est effectuée lors de l’ouverture d’une nouvelle page par un bouton. Il suffit d’utiliser la fonction SSLActive dans un code navigateur. Dès l’ouverture de la page sécurisée, toutes les actions effectuées seront en mode sécurisé (c’està-dire crypté), quels que soient les objets utilisés (lien, table, zone répétée, image clicable, ...). Pour comprendre l’utilisation de la fonction SSLActive : 4 1. Ouvrez le projet "Fonctionnalites_Web.WWP" si ce n’est pas déjà fait. 2. Ouvrez la page "PAGE_SecuriseOK". 3. Consultez le code du bouton "Entrer". Attention !

Partie 8 : Programmation avancée

Mise en place des transactions sécurisées par le protocole SSL Pour mettre en place des transactions sécurisées par SSL, il est nécessaire d’effectuer les formalités liées à ce protocole (certification payante d’une clé SSL par un organisme spécialisé). Pour plus de détails sur l’obtention d’une clé SSL, consultez l’aide en ligne au mot-clé : "SSL".

Pour tester la page "PAGE_SecuriseOK", vous devez avoir au préalable installé un certificat SSL sur votre serveur Web. Consultez l’aide en ligne pour plus de détails sur l’obtention d’un certificat SSL (mot-clé : "SSL").

GAF_WebDev.book Page 337 Lundi, 15. décembre 2008 5:31 17

337

Pour plus de détails sur l’utilisation de la fonction SSLActive, consultez l’aide en ligne au mot-clé : "SSLActive".

Paiement sécurisé La plupart des sites commerciaux offrant la possibilité aux internautes de pouvoir acheter ou même louer en ligne utilise un système de paiement en ligne par carte bancaire. Pour un site marchand, le paiement sécurisé est un élément essentiel. La solution de paiement retenue doit à la fois mettre l’internaute (le "client") en confiance et garantir le paiement au site marchand.

Partie 8 : Programmation avancée

Toutes les données circulant pendant cette transaction doivent être sécurisées (par exemple, grâce au protocole SSL que nous avons abordé dans la leçon précédente). Les solutions de paiement utilisées sont diverses et variées (PayBox, ATOS, CyberMut, CyperPaiement, SPPlus, ...). Le principe du paiement sécurisé peut varier légèrement d’un prestataire à un autre, mais il reste globalement le même pour tous :

1. à 4. Préparation de la commande sur le site marchand : l’internaute effectue sa commande sur le site. Lors de l’opération de paiement, le site marchand transfère à l’opérateur de paiement les informations nécessaires à l’identification de la commande (numéro de commerçant, montant de la commande, ...)

GAF_WebDev.book Page 338 Lundi, 15. décembre 2008 5:31 17

338

5. à 7. Saisie et contrôle du numéro de carte bancaire : l’internaute saisit son numéro de carte bancaire dans une page de l’opérateur de paiement sécurisé. La transmission des informations est protégée grâce à SSL, assurant ainsi la confidentialité des données. Le site marchand n’a jamais connaissance du numéro de carte bancaire de l’internaute. 8. Retour au site marchand : l’opérateur de paiement indique au site marchand si le paiement a été validé, annulé ou échoué. Notes

Important : le domaine du paiement électronique évolue rapidement. Avant de mettre en place une solution de paiement, vérifiez toujours les dernières solutions proposées par les différents prestataires !

Système de paiement sécurisé dans un site WebDev

Partie 8 : Programmation avancée

Démarches générales

Lors de la mise en place d’une solution de paiement sécurisé, il est souvent nécessaire d’effectuer les opérations suivantes : 1. Demander un kit de développement à l’opérateur de paiement (PayBox, ATOS, SIPS, CyberMut, ...). 2. Contacter la banque de la société commerçante pour établir un contrat de vente à distance (V.A.D.). A cette étape, la banque fournit un numéro de commerçant. 3. Contacter l’opérateur de paiement pour établir un contrat indiquant les paramètres du contrat de vente à distance. 4. Mettre en production le site marchand. Utilisation du composant fourni avec WebDev : "Composant PayBox"

Plusieurs composants WebDev permettant le paiement en ligne sont livrés en standard avec WebDev. Vous les trouverez dans le répertoire "Composants" du répertoire d’installation de WebDev. Chacun de ces composants comporte un exemple concret d’utilisation. Pour ce cours d’auto-formation, nous nous contenterons d’utiliser le composant "Composant PayBox". Dans notre page exemple, le composant a déjà été importé. Nous ne détaillerons pas étape par étape l’intégration du composant, ce thème sera abordé dans la leçon “Les composants”, page 401. Pour comprendre le fonctionnement du paiement en ligne avec PayBox. 4 1. Ouvrez le projet "Fonctionnalites_Web.WWP" si ce n’est pas déjà fait. Ce projet est présent dans le répertoire "\AutoFormation\corriges\Fonctionnalites_Web\". Vous pouvez également utiliser directement l’option "? .. Guide d’auto-formation .. Fonctionnalités Web". 2. Ouvrez la page "PAGE_PaiementSecurise". 3. Testez la page et effectuez les diverses opérations. 4. Revenez sous WebDev, puis consultez le code du bouton "Payer". pPayBox.Paiement(SAI_MONTANT,SAI_EMAIL)

Le composant "Composant PayBox" se charge d’effectuer la connexion à l’opérateur de paiement.

GAF_WebDev.book Page 339 Lundi, 15. décembre 2008 5:31 17

339

Le fonctionnement de WebDev avec PayBox est donné à titre d’exemple. Il ne s’agit en AUCUN cas d’une recommandation de PC SOFT pour ce produit. WebDev peut être utilisé avec tout prestataire de service de paiement sécurisé.

Partie 8 : Programmation avancée

Notes

Nous ne détaillerons pas dans ce cours les différentes opérations possibles lors d’un paiement en ligne (retour à la page WebDev, annulation du paiement, ...). Toutes ces étapes sont expliquées en détail dans l’exemple "Composant_PayBox - Exemple" disponible dans le répertoire "Composants\Composant_Paybox" du répertoire d’installation de WebDev.

GAF_WebDev.book Page 340 Lundi, 15. décembre 2008 5:31 17

340

LEÇON 8.2. XML Ce que vous allez apprendre dans cette leçon ... • Qu’est-ce que le XML ? • Un exemple simple d’utilisation des fonctions XML de WebDev.

Partie 8 : Programmation avancée

Durée estimée : 20mn

GAF_WebDev.book Page 341 Lundi, 15. décembre 2008 5:31 17

341

Qu’est-ce que le langage XML ? XML (Extensible Markup Language, ou Langage Extensible de Balisage) est le langage destiné à succéder à HTML sur le World Wide Web. Comme HTML (Hypertext Markup Language) c'est un langage de balisage, c'est-à-dire un langage qui présente de l'information encadrée par des balises. Mais contrairement à HTML, qui présente un jeu limité de balises, XML est un métalangage, qui permet d'inventer de nouvelles balises pour isoler toutes les informations élémentaires que peut contenir une page Web. XML permet de structurer un document contenant des données. Un fichier de données HyperFileSQL contenant plusieurs rubriques et enregistrements peut par exemple être exporté dans un fichier XML (fonction HExporteXML) .

• les fichiers au format XML grâce à un accès natif fourni avec WebDev. Pour plus de détails, consultez l’aide en ligne. • les exportations vers le XML (fonctions TableVersXML, TexteVersXML, HExporteXML) • l’import de données XML (fonction HImporteXML) • la manipulation d’un document XML. Les fonctions permettant de manipuler un document au format XML commencent toutes par XML* . Il est possible de : •Créer un document XML manipulable par WebDev (fonction XMLDocument) •Lire et naviguer dans un document XML (fonctions XMLFils, XMLParent, XMLPremier, ...) •Modifier un document XML (fonctions XMLInsèreDocument, XMLInsèreElément, XMLModifie, ...) •Exécuter une requête XPath dans un document XML (fonction XMLExécuteXPath)

Exemple de lecture d’un fichier XML le projet "WB_Programmation.WWP" présent dans le sous-répertoire "Autoforma4 Ouvrez tion\Corriges\WB_Programmation" du répertoire d’installation de WebDev (option "? .. Guide d’auto-formation .. Gestion du XML et des timers"). la page "PAGE_XML". 4 Chargez Cette page permet de manipuler un fichier exemple "Commande.XML".

Partie 8 : Programmation avancée

WebDev gère en standard :

GAF_WebDev.book Page 342 Lundi, 15. décembre 2008 5:31 17

342

Le fichier "Commande.XML" contient les informations suivantes :

Partie 8 : Programmation avancée

<?xml version="1.0"?> <commande> <lignecde numero="1"> <produit>Choux</produit> <prixuni monnaie="Euro">2.06</prixuni> <quantite>2</quantite> </lignecde> <lignecde numero="2"> <produit>Carotte</produit> <prixuni monnaie="Euro">1.93</prixuni> <quantite unite="KG">1</quantite> </lignecde> <lignecde numero="3"> <produit> Ail </produit> <prixuni monnaie="Euro">0.65</prixuni> <quantite unite="Gousse">1</quantite> </lignecde> </commande>

Ce document XML représente une commande ("<COMMANDE>") de trois lignes de produits : • 2 choux à 2.06 Euros pièce (<LIGNECDE NUMERO="1">) • 1 kilo de carottes à 1.93 Euros le kilo (<LIGNECDE NUMERO="2">) • 1 gousse d’ail à 0.65 Euros la gousse (<LIGNECDE NUMERO="3">) Traiter un document XML Afin de pouvoir effectuer des manipulations sur le document XML, il est nécessaire de "créer" un document XML avec la fonction WLangage XMLDocument. Voici la syntaxe d’utilisation de cette fonction : DocXML est une chaîne = "XMLCommande" SourceXML est une chaîne = fChargeTexte("commande.xml") // Création du document XML XMLDocument(DocXML, SourceXML) SI ErreurDétectée ALORS //Une erreur a été détectée Erreur(ErreurInfo(errMessage)) SINON //On se positionne à la racine du document XMLRacine(DocXML) FIN

Ce code WLangage permet de charger un code XML dans un nouveau document XML nommé "XMLCommande" (variable DocXML). Ce code XML a été récupéré grâce à la fonction fChargeTexte. On manipulera ensuite le document grâce à la variable DocXML. Parcourir un document XML

Le parcours d’un document XML ressemble beaucoup au parcours d’un fichier de données (avec les fonctions HLit*).

GAF_WebDev.book Page 343 Lundi, 15. décembre 2008 5:31 17

343

Notes

Les fonctions XMLPremier, XMLSuivant, XMLDernier, XMLPrécédent et XMLEnDehors permettent de parcourir un document XML en se positionnant sur les balises contenues dans ce document. Les fonctions XMLNomElement et XMLDonnée permettent entre autre de récupérer le nom de l’élément en cours de lecture et sa valeur. Vous devez toujours avoir à l’esprit la notion de niveau dans un document XML. En effet, un document XML est un document structuré avec une racine, des noeuds "parents" et des noeuds "enfants".

Dans notre exemple, les balises "LIGNECDE" sont toutes de même niveau; "COMMANDE" est la balise de niveau supérieure par rapport aux balises "LIGNECDE"; les balises "PRODUIT", "PRIXUNI" et "QUANTITE" sont des balises de niveaux inférieurs par rapport aux balises "LIGNECDE". La fonction XMLEnDehors permet de détecter la fin d’un document XML, mais aussi la fin d’un niveau.

Se positionner sur les balises

Pour se positionner sur la première balise du document, il faut utiliser la fonction XMLPremier : XMLPremier(DocXML) LIB_ELEMENT = XMLNomElément(DocXML)

Pour se positionner sur la dernière balise d’un niveau, il faut procéder de la même façon avec la fonction XMLDernier. Pour se positionner sur l’élément suivant de même niveau, il faut utiliser la fonction XMLSuivant : XMLSuivant(DocXML) SI XMLEnDehors(DocXML) ALORS LIB_ELEMENT = "Aucun élément suivant l'élément en cours" FIN

Pour se positionner sur l’élément précédent, il faut procéder de la même façon avec la fonction XMLPrécédent. Le message d’erreur vous indique que vous êtes arrivé en fin de parcours. Cela est tout à fait normal, puisqu’il n’y a pas d’autres éléments de même niveau que "<COMMANDE>".

Notes

Pour se positionner sur la balise suivante sur un autre niveau, il est nécessaire d’utiliser les fonctions XMLFils (pour se positionner sur le premier élément fils de l’élément en cours) et XMLParent (pour se positionner sur l’élément père de l’élément en cours). Si une balise possède un attribut (par exemple "<LIGNECDE NUMERO=1>"), la fonction XMLFils se positionne sur l’attribut et le considère comme une balise.

Partie 8 : Programmation avancée

SI XMLEnDehors(DocXML) ALORS LIB_ELEMENT = ... "Aucun élément suivant l'élément en cours sur le même niveau" FIN

GAF_WebDev.book Page 344 Lundi, 15. décembre 2008 5:31 17

344

Récupérer des valeurs La fonction permettant de récupérer le nom de la balise courante est XMLNomElement : LIB_ELEMENT = XMLNomElement(DocXML)

La fonction permettant de récupérer la valeur de la balise courante est XMLDonnée : LIB_VALEURELEMENT = XMLDonnée(DocXML)

La fonction XMLLit permet aussi de récupérer directement le nom d’une balise ou la valeur d’une balise en exécutant une requête XPATH.

Partie 8 : Programmation avancée

// Affiche les informations concernant la ligne de commande 2 Info("Les informations concernant le second produit " +... "de la ligne de commande sont " + RC +... XMLLit("Commande","/COMMANDE/LIGNECDE[2]/PRODUIT"),... XMLLit("Commande",... "/COMMANDE/LIGNECDE[2]/PRIXUNI/@MONNAIE"),... XMLLit("Commande","/COMMANDE/LIGNECDE[2]/PRIXUNI"))

Effectuer une recherche Vous avez la possibilité d’effectuer une recherche dans un document XML. L’élément recherché peut être une balise, un attribut ou une valeur La fonction permettant d’effectuer des recherches dans un document XML est XMLRecherche. Nous ne détaillerons pas cette fonction. Consultez l’aide en ligne (mot-clé : "XMLRecherche"). Pour en savoir plus sur les fonctionnalités XML de WebDev, nous vous invitons à consulter l’aide en ligne (mot-clé : "XML").

GAF_WebDev.book Page 345 Lundi, 15. décembre 2008 5:31 17

345

LEÇON 8.3. LES TIMERS Ce que vous allez apprendre dans cette leçon ... • Intérêt des timers. • Programmation des timers.

Partie 8 : Programmation avancée

Durée estimée : 5mn

GAF_WebDev.book Page 346 Lundi, 15. décembre 2008 5:31 17

346

Introduction Un timer permet d’appeler de façon périodique et automatique un traitement réalisé par une procédure navigateur. Il est ainsi possible par exemple d’effectuer le rafraîchissement d’une page à intervalle régulier, ou afficher l’heure dans la barre de messages du navigateur. Les timers sont utilisables uniquement en code navigateur et sont automatiquement "stoppés" lorsque la page qui les a lancés est fermée ou actualisée.

Programmation des timers

Partie 8 : Programmation avancée

Exemple pratique Pour comprendre le fonctionnement des timers : 4 1. Ouvrez le projet "WB_Programmation.WWP" présent dans le sous-répertoire "Autoformation\Corriges\WB_Programmation" du répertoire d’installation de WebDev (option "? .. Guide d’auto-formation .. Gestion du XML et des timers"). 2. Ouvrez le page "PAGE_Timer.WWH". 3. Testez cette page. Créer un timer Pour créer un timer, il suffit tout simplement : 1. D’écrire une procédure navigateur (locale à la page en cours ou globale au projet). 2. Puis de l’appeler avec la fonction WLangage Timer. En précisant la fréquence d’appel, la procédure navigateur sera exécutée tous les n centièmes de secondes. notre exemple, la page "PAGE_Timer" contient la procédure locale navigateur Affiche4 Dans Heure. Cette procédure permet d’afficher l’heure système : PROCEDURE AfficheHeure() SAI_HEURE = Gauche(HeureVersChaine(HeureSys()), 8)

Le code du bouton "Démarrer" (à coté de l’horloge) permet de créer le timer afin d’afficher l’heure en temps réel. La syntaxe est la suivante : // Exécute la procédure AfficheHeure toutes les secondes // L’heure sera affichée toutes les secondes MonTimer = Timer("AfficheHeure", 100)

La procédure appelée par timer peut effectuer des modifications dans la page, vérifier la saisie ... Arrêter un timer Pour stopper l’exécution d’un timer, il suffit d’utiliser la fonction WLangage FinTimer.

4 Dans notre exemple, le bouton "Arrêter" (à coté de l’horloge) utilise la syntaxe suivante : // Arrêter l’affichage de l’heure FinTimer(MonTimer)

Pour plus de détails sur les fonctions de gestion des timers, consultez l’aide en ligne (mots-clés : "Timer", "FinTimer").

GAF_WebDev.book Page 347 Lundi, 15. décembre 2008 5:31 17

347

LEÇON 8.4. GESTION AUTOMATIQUE DES ERREURS Ce que vous allez apprendre dans cette leçon ... • Qu’est-ce-que la gestion automatique des erreurs ? • Utilisation de la gestion automatique des erreurs

Partie 8 : Programmation avancée

Durée estimée : 10mn

GAF_WebDev.book Page 348 Lundi, 15. décembre 2008 5:31 17

348

Présentation WebDev peut gérer automatiquement les erreurs. Cette fonctionnalité permet à la fois de réduire sensiblement le code d’un projet tout en uniformisant et en centralisant la gestion des erreurs. L’utilisation de cette fonctionnalité rend également le code plus visible. Fonctionnement Lorsqu’une fonction du WLangage rencontre une erreur, deux opérations sont réalisées : • une valeur de retour d’erreur est renvoyée par la fonction (par exemple, la fonction fOuvre renvoie la valeur "-1" si le fichier spécifié n’a pu être ouvert). • l’erreur est détectée par le WLangage (la variable ErreurDétectée correspond à Vrai) et il est possible de récupérer des informations sur cette erreur grâce à la fonction ErreurInfo. C’est cette seconde opération qui peut être gérée en automatique grâce à la gestion des erreurs de WebDev.

Partie 8 : Programmation avancée

Mise en place Le paramétrage de la gestion automatique des erreurs peut s’effectuer : • soit directement dans l’éditeur de code : il suffit de cliquer sur le lien "Si erreur" dans l’éditeur de code :

• soit par programmation, avec la fonction ErreurChangeParamètre. Types d’erreurs concernées Le WLangage peut rencontrer deux types d’erreurs : • les erreurs "non fatales" (appelées également erreurs d’exécution) : ces erreurs sont généralement gérées dans le code et ne provoquent pas l’arrêt du projet. Par exemple, ouverture d’un fichier inaccessible ou d’une archive inexistante. • les erreurs "fatales" (appelées également erreurs de programmation) : ces erreurs sont généralement liées à un problème matériel (plus d’espace disque, perte de connexion réseau...) ou à des problèmes graves de conception (accès à un fichier non déclaré, utilisation de champs inexistants...). Une erreur "fatale" peut également survenir suite à une erreur "non fatale" mal gérée. Dans ce cas, le projet va s’arrêter. Le mécanisme de gestion des erreurs permet de gérer de façon bien distincte ces deux types d’erreurs afin de pouvoir spécifier des comportements adaptés aux erreurs rencontrées.

GAF_WebDev.book Page 349 Lundi, 15. décembre 2008 5:31 17

349

Utilisation de la gestion automatique des erreurs le projet "Découverte_Gestion_Erreurs.WWP" (présent dans le répertoire "\Autoforma4 Ouvrez tion\Excercices\Découvertes_Gestion_Erreurs" de WebDev). Vous pouvez directement ouvrir ce projet grâce à l’option "? .. Guide d’auto-formation .. Découverte gestion des erreurs". projet présente la gestion : 4 •Ced’une erreur non fatale (ouverture d’une archive inexistante).

4 Testez le projet en cliquant sur l’icône

Partie 8 : Programmation avancée

Lors de l’exécution de la ligne de code générant l’erreur, un message d’erreur s’affiche et propose à l’internaute de réessayer l’opération, d’annuler l’opération ou d’arrêter l’application. • d’une erreur fatale (division d’un entier par 0). Lors de l’exécution de la ligne de code générant l’erreur, une procédure est automatiquement appelée. Cette procédure permet d’afficher le message d’erreur et d’arrêter le traitement en cours. • d’une erreur sur plusieurs niveaux (traitement appelant une procédure qui ouvre une archive inexistante). Lors de l’exécution de la ligne de code générant l’erreur : - la procédure retourne "Faux" au traitement appelant. - le traitement appelant affiche un message d’erreur et arrête le traitement.

GAF_WebDev.book Page 350 Lundi, 15. décembre 2008 5:31 17

350

LEÇON 8.5. LES INDIRECTIONS Ce que vous allez apprendre dans cette leçon ... • Qu’est-ce que les indirections ? • Exemple d’utilisation.

Partie 8 : Programmation avancée

Durée estimée : 5mn

GAF_WebDev.book Page 351 Lundi, 15. décembre 2008 5:31 17

351

Présentation Le mécanisme "d’indirection" permet de construire le nom d’un champ, d’une rubrique de fichier ou le nom d’une variable à partir d’une expression de type chaîne. Ce mécanisme permet par exemple de créer des traitements génériques indépendants des noms des champs, des variables, des rubriques de fichier, ... L’indirection est réalisée à l’aide des opérateurs { }.

Exemple Exemple d’indirections simples : {"NOM"} = NomCli //est équivalent à NOM=NomCli {"NOM"} = {"CL.NOMCLI"} //est équivalent à NOM=CL.NOMCLI {"PAGCLI.NOM"} = NomCli //est équivalent à PAGCLI.NOM=NomCli {"PAGCLI"+".NOM"} = NomCli //est équivalent à PAGCLI.NOM=NomCli

NomChamp est une chaîne NomChamp = "SAISIE1" //SAISIE1 est le nom du champ //appel d'une procédure rendant un champ invisible INVISIBLE(NomChamp) PROCEDURE INVISIBLE(NChamp) {NChamp}..Visible = Faux

Pour optimiser les temps de traitement, les indirections peuvent prendre un paramètre précisant la nature de l’objet manipulé : NomChamp est une chaîne = "MONCHAMP" {NomChamp, indChamp}..Valeur = "Nouvelle valeur" NomFichier est une chaîne = "MONFICHIER" NomRubrique est une chaîne = "MARUBRIQUE" HLitPremier(NomFichier, NomRubrique) Valeur = {NomFichier + "." + NomRubrique, indRubrique}

Pour plus de détails sur le mécanisme des indirections, consultez l’aide en ligne (mot-clé : "Indirections").

Partie 8 : Programmation avancée

Exemple d’indirection avec une procédure :

GAF_WebDev.book Page 352 Lundi, 15. décembre 2008 5:31 17

352

LEÇON 8.6. LA GESTION DES EMAILS Ce que vous allez apprendre dans cette leçon ... • Protocoles de gestion des emails • Les fonctions EmailXXX de WebDev.

Partie 8 : Programmation avancée

Durée estimée : 20mn

GAF_WebDev.book Page 353 Lundi, 15. décembre 2008 5:31 17

353

Présentation Le WLangage possède toutes les fonctions de programmation nécessaires pour gérer la réception ou l’envoi d’emails en code serveur. De plus, grâce à WebDev, vous pourrez connaître toutes les caractéristiques d’un email : • expéditeur • destinataires • date d’envoi • sujet • message • pièces jointes ...

WebDev permet de gérer les emails grâce à deux méthodes : 1. Les protocoles POP3 / SMTP (méthode la plus courante). Ces protocoles sont des protocoles de gestion des emails reconnus par tous les fournisseurs de service. Ces protocoles vous permettent de dialoguer directement avec le serveur, disponible chez votre fournisseur d’accès ou sur votre serveur Web. 2. L’API "Simple Mail API" (appelé aussi SMAPI ou Simple MAPI) : ce mode de gestion des emails est utilisé par la plupart des applications Microsoft et principalement par Microsoft Exchange. Nous évoquerons dans ce cours uniquement la méthode de gestion par les protocoles POP3 / SMTP. En effet, c’est le mode qui est actuellement le plus utilisé dans le monde. Pour plus de détails sur Simple MAPI, consultez l’aide en ligne (mot-clé : "Simple MAPI"). Les fonctions de gestion des emails commencent toutes par "Email".

Les protocoles POP3 / SMTP Le protocole POP3 permet de recevoir des emails. Le protocole SMTP permet d'envoyer des emails Nous ne détaillerons pas ici le principe de fonctionnement de ces protocoles. Pour envoyer ou lire des messages grâce aux protocoles POP3/SMTP, il faut : 1. Ouvrir une session de messagerie avec la fonction EmailOuvreSession. 2. Envoyer et lire les messages. 3. Fermer la session de messagerie avec la fonction EmailFermeSession.

Partie 8 : Programmation avancée

Remarque : il est également possible de paramétrer l’envoi d’un email en code navigateur grâce à la fonction EmailOuvreMessagerie. Pour plus de détails, consultez l’aide en ligne (mot-clé : "EmailOuvreMessagerie").

GAF_WebDev.book Page 354 Lundi, 15. décembre 2008 5:31 17

354

Ouvrir une session de messagerie

4 Pour ouvrir une session de messagerie, il faut utiliser la fonction EmailOuvreSession :

USER est une chaîne = "Utilisateur" Password est une chaîne = "MotDePasse" Serv_POP est une chaîne = "pop.wanadoo.fr" Serv_SMTP est une chaîne = "smtp.wanadoo.fr" NomUser est une chaîne SI EmailOuvreSession(USER,Password,Serv_POP,Serv_SMTP)ALORS NomUser = USER SINON NomUser = "" Erreur("Impossible d'établir la connexion") FIN

Avec la fonction EmailOuvreSession, vous pourrez à la fois lire et envoyer des emails. Pour plus de détails, consultez l’aide en ligne (mot-clé : "Email, Fonctions WLangage").

Pour envoyer un message avec WebDev, il suffit de renseigner les principales informations d’un email qui seront contenues dans la structure Email du WLangage. Nous listons ici les éléments indispensables à l’envoi d’un email. Bien entendu, il existe d’autres informations que vous pouvez renseigner (fichiers attachés, destinataires en copie cachée, etc ...), consultez l’aide en ligne pour plus de détails (mot-clé : "Email, Structure email"). Email.AdresseExpediteur

Chaîne de caractères obligatoire contenant l'adresse de l'expéditeur.

Email.Expediteur

Chaîne de caractères contenant l'adresse à laquelle la réponse au message doit être envoyée.

Email.NbDestinataire

Entier contenant le nombre de destinataires du message. Il est conseillé de limiter ce nombre à 20, en effet certains serveurs n’acceptent pas plus de 20 destinataires par message.

Email.Destinataire

Tableau de chaînes de caractères contenant les adresses des destinataires principaux.

Email.Sujet

Chaîne de caractères contenant le sujet du message

Email.HTML

Chaîne de caractères contenant le message avec une mise en forme HTML. Limité à 2 Go

Email.Message

Chaîne de caractères contenant le texte du message (avec une mise en forme texte simple). Limité à 2 Go

Astuce

Partie 8 : Programmation avancée

Envoyer un email

Dans le cas d’un email avec un contenu de type "texte brut", utilisez la variable Email.Message plutôt que la variable Email.HTML.

GAF_WebDev.book Page 355 Lundi, 15. décembre 2008 5:31 17

355

Le code suivant illustre le remplissage des principales variables à renseigner : // Connexion au serveur effectuée avec EmailOuvreSession // Remplissage des variables Email Email.AdresseExpediteur = "pcsoft@pcsoft.fr" Email.Expediteur = "pcsoft@pcsoft.fr" Email.NbDestinataire = 1 Email.Destinataire[1] = "utilisateur@mail.com" Email.Sujet = "Envoyer des emails avec WebDev !" Email.Message = "Bonjour, ceci est un test"

Si vous vouliez mettre en forme le message, on aurait pu écrire à la place de Email.Message : Email.HTML = "<HTML><BODY><P ALIGN=’CENTER’>Bonjour, ceci" ... + " est un test</P></BODY></HTML>"

Il est possible d’utiliser les deux formes ensemble (texte et HTML). Ainsi les destinataires lisant leur email avec un outil incapable d’afficher du HTML verront quand même le texte de Email.Message.

// Lors de la connexion nous avons récupéré // le nom de l’utilisateur dans la variable NomUser // Envoie le mail EmailEnvoieMessage(NomUser) SI ErreurDétectée ALORS LIB = "EMailEnvoieMessage a échoué '" + ... ErreurInfo(errMessage) + "'" SINON LIB = "EMailEnvoieMessage a réussi" FIN

ré-initialiser toutes les variables Emails (par exemple lors de l’envoi de plusieurs emails 4 Pour les uns à la suite des autres), il suffit d’utiliser la fonction EmailRAZ.

Lire un email Maintenant que nous sommes connectés à notre serveur et que nous avons envoyé un message, nous allons voir comment lire un email. Sur le même principe qu’un parcours de fichier avec les fonctions HLitPremier, HLitSuivant ... il est possible de lire les emails reçus avec les fonctions EmailLitPremier, EmailLitSuivant ... Pour plus de détails sur ces fonctions, consultez l’aide en ligne (mot-clé : "Email, Lire un email"). Pour chaque email lu, la structure Email est initialisée. Les variables de cette structure correspondent à l'ensemble des caractéristiques de l'email en cours.

Partie 8 : Programmation avancée

envoyer le message que nous venons de décrire, il suffit tout simplement d’utiliser la 4 Pour fonction EmailEnvoieMessage :

GAF_WebDev.book Page 356 Lundi, 15. décembre 2008 5:31 17

356

Exemple de code : // Connexion au serveur effectuée avec EmailOuvreSession // Lors de la connexion, nous avons récupéré // le nom de l’utilisateur dans la variable NomUser // Lecture du premier email Message est une chaîne EmailLitPremier(NomUser) SI PAS Email.EnDehors ALORS SI Email.HTML = "" ALORS Message = Email.Message SINON Message = "Email au format HTML:" + RC + Email.HTML FIN ZoneRépétéeAjouteLigne(ZR_EMAIL, Email.Expediteur, ... Email.DateReception, Email.Sujet, Message) FIN

Déconnexion Partie 8 : Programmation avancée

Pour vous déconnecter, il suffit tout simplement d’utiliser la fonction EmailFermeSession : SI NomUser <> "" ALORS EmailFermeSession(NomUser) NomUser = "" FIN

Autres possibilités Il est également possible de : • envoyer des fichiers attachés dans vos emails. • effectuer des mailings par emails. Nous vous conseillons de réaliser les opérations de mailing grâce à une application WinDev en back office (voir “Back Office WinDev”, page 466). Pour plus de détails sur la gestion des emails avec WebDev, consultez l’aide en ligne (mot-clé : "Email, Gestion des emails").

GAF_WebDev.book Page 357 Lundi, 15. décembre 2008 5:31 17

357

LEÇON 8.7. LA POO Ce que vous allez apprendre dans cette leçon ... • Concepts de la Programmation Orientée Objet. • Exemples de déclaration d’objet.

Partie 8 : Programmation avancée

Durée estimée : 30mn

GAF_WebDev.book Page 358 Lundi, 15. décembre 2008 5:31 17

358

Concepts La Programmation Orientée Objet (P.O.O.) a pour but de permettre une meilleure réutilisabilité du code. Les programmes développés en POO sont structurés : ils sont décomposés en modules gérant chacun une fonctionnalité du programme. Les modules développés peuvent être facilement réutilisés dans d’autres programmes. Ils vont regrouper un ensemble de procédures et encapsuler la structure de données sur laquelle les procédures vont agir. Pour programmer "en objet", il faut déclarer des classes, les membres et les méthodes associés. Les classes Une classe rassemble la description d’une structure de données (les membres) et les procédures (méthodes) qui manipulent les membres. Une classe définit donc un type de données et son comportement.

Partie 8 : Programmation avancée

Les objets Une classe permet de créer des objets. Chaque objet créé possède des membres décrits dans sa classe et peut être manipulé par l’intermédiaire des méthodes de sa classe. On dit qu’un objet est une instance de la classe. Lorsque la classe est déclarée, il suffit d’associer un objet à une classe pour que l’objet puisse être manipulé par toutes les méthodes de cette classe. Les membres Un membre est une donnée (ou paramètre) de l’objet. Les méthodes Une méthode permet d’agir sur l’objet, pour modifier ses membres par exemple. Une méthode est une procédure. Son fonctionnement est identique à celui des procédures classiques du WLangage. Notion d’héritage L’héritage permet d’inclure les caractéristiques d’une classe existante (classe de base) dans une nouvelle classe (classe dérivée). L’héritage permet de créer un nouveau type de données à partir d’un type connu, dans le but de lui ajouter des fonctionnalités, ou d’en modifier le comportement. La classe de base ne sera donc pas modifiée. Une classe peut hériter d’une classe dont elle devient une sous-classe. Une classe dérivée hérite des membres et des méthodes de sa classe mère (qui peut, elle-même, être une sous-classe d’une autre classe mère), en plus de ses propres membres et méthodes (et également des membres et méthodes de la première classe mère, s’il s’agit d’un héritage multiple). Il n’est pas nécessaire de dupliquer les membres et méthodes de la ou des classes mères. Constructeur et Destructeur La notion de Constructeur et Destructeur est importante puisqu’elle permet un appel automatique de méthodes d’initialisation lors de la création d’un objet et lors de sa destruction. La méthode Constructeur associée à une classe est automatiquement appelée lors de la déclaration d’un objet de la classe. La méthode Destructeur associée à une classe est automatiquement appelée lors de la suppression de l’objet (sortie de procédure dans laquelle l’objet a été déclaré).

GAF_WebDev.book Page 359 Lundi, 15. décembre 2008 5:31 17

359

Encapsulation de données L’encapsulation des données permet de garantir que les données membres de l’objet ne seront pas modifiées à tort par des fonctions (méthodes) extérieures à l’objet. Il est ainsi possible d’interdire à l’utilisateur d’un objet l’accès à certain ou à tous ses membres. Les membres dont l’accès est interdit sont appelés membres privés. Il n’est possible d’y accéder qu’à partir des méthodes prévues à cet effet dans la classe. Créer un programme orienté objet Pour créer un programme en objet en WLangage, il faut : 1. Décrire la classe et les membres de la classe. 2. Donner toutes les méthodes de la classe. 3. Déclarer les objets en leur associant une classe ("instancier une classe"). Dans le cas de la programmation orientée objet, il faut nécessairement un projet pour manipuler les classes.

Déclarer une classe Pour créer une classe : 1. Affichez si nécessaire l’explorateur de projet (option "Affichage .. Barre d’outils .. Explorateur"). 2. Sélectionnez le nom du projet. 3.Cliquez sur le bouton "Créer" et sélectionnez l’option "Nouvelle classe". La classe "Classe1" est automatiquement créée. 4. Renommez la classe directement dans l’explorateur de projet. Une classe est de la forme : MaReglette est une classe NbBouton est un entier // Nombre de boutons dans la réglette NomBouton est une chaîne // Nom des boutons de la réglette Suivant est une chaîne // Nom du bouton suivant Précédent est une chaîne // Nom du bouton précédent FIN

"Reglette" est le nom de la classe. "NbBouton", "NomBouton"... sont des membres de la classe.

Partie 8 : Programmation avancée

Nous ne détaillons pas ici la syntaxe de la P.O.O. Nous présenterons uniquement un exemple simple de programme orienté objet. Pour plus de détails sur la syntaxe de la P.O.O., consultez l’aide en ligne et le manuel de programmation de WebDev (mot-clé : "POO, Classe").

GAF_WebDev.book Page 360 Lundi, 15. décembre 2008 5:31 17

360

Décrire les méthodes Pour créer une méthode : 1. Cliquez avec le bouton droit de la souris sur votre classe présente dans l’explorateur de projet. 2. Choisissez "Nouvelle méthode" dans le menu contextuel. Une métode "Nouvelle_Méthode" est automatiquement créée. 3. Renommez la méthode directement dans l’explorateur. Une méthode est de la forme : PROCEDURE BoutonPrecedent() // Afficher le bouton précédent BoutonPrécédent est un entier = 0 // Incrémenter l'indice du bouton actif BoutonPrécédent = BoutonActif - 1 // Appeler la méthode BoutonCliquer BoutonCliquer(BoutonPrécédent)

Le nom de la méthode est "BoutonPrecedent".

Partie 8 : Programmation avancée

Déclarer et manipuler les objets Dans les traitements de la fenêtre un objet est déclaré en même temps que les autres variables : GLOBAL Réglette est un MaReglette

Pour faire référence à un membre de l’objet "Fichier", il faut utiliser la syntaxe <NomObjet>.<nom du membre>

L'objet est manipulé de la façon suivante : // Afficher les boutons précédents Réglette.BoutonPrecedent() Réglette.AfficherPage("AfficherRecherche")

Nous ne nous attarderons pas plus sur la présentation de la POO dans ce cours.

GAF_WebDev.book Page 361 Lundi, 15. décembre 2008 5:31 17

PARTIE 9 Gestion de projet avancée

GAF_WebDev.book Page 362 Lundi, 15. dĂŠcembre 2008 5:31 17

GAF_WebDev.book Page 363 Lundi, 15. décembre 2008 5:31 17

363

LEÇON 9.1. CONFIGURATION NÉCESSAIRE Ce que vous allez apprendre dans cette leçon ... • Configurer WebDev pour suivre la partie 9 du Cours d’auto-formation

Partie 9 : Gestion de projet avancée

Durée estimée : 5 mn

GAF_WebDev.book Page 364 Lundi, 15. décembre 2008 5:31 17

364

Présentation

Partie 9 : Gestion de projet avancée

Depuis le début de ce cours, vous utilisez WebDev dans un environnement simplifié. Nous avons ainsi étudié les principales fonctionnalités de WebDev. Dans cette partie, nous allons étudier des concepts avancés de la gestion de projet. Pour réaliser les manipulations présentées dans cette partie, nous vous conseillons de configurer WebDev pour utiliser l’environnement standard. Vous aurez ainsi accès à toutes les fonctionnalités du produit. Rappel : Pour son utilisation, WebDev propose un paramétrage de l’environnement. Plusieurs modes sont à votre disposition : • Environnement simplifié : Ce mode permet de découvrir les principales fonctionnalités de WebDev. • Environnement complet : Ce mode propose toutes les fonctionnalités de WebDev. • Récupérer la configuration de votre environnement 12 : Ce mode reprend les fonctionnalités disponibles en version 12. A tout moment, quel que soit le type d’environnement utilisé, il est possible d’ajouter ou de supprimer l’accès à certaines fonctionnalités non utilisées.

Mise en place Pour utiliser l’environnement complet de WebDev : 4 1. Lancez WebDev 14. 2. Sélectionnez l’option "Outils .. Options .. Options de l’environnement". 3. Cliquez sur "Relancer l’assistant de configuration de l’environnement". 4. Sélectionnez "Environnement complet". 5. Validez votre choix en passant à l’écran suivant. 6. Validez les options de l’environnement. Voilà, WebDev est configuré pour suivre cette partie du cours d’auto-formation.

GAF_WebDev.book Page 365 Lundi, 15. décembre 2008 5:31 17

365

LEÇON 9.2. TABLEAU DE BORD Ce que vous allez apprendre dans cette leçon ... • Présentation • Mode de visualisation • Options du tableau de bord

Partie 9 : Gestion de projet avancée

Durée estimée : 20mn

GAF_WebDev.book Page 366 Lundi, 15. décembre 2008 5:31 17

366

Présentation Le tableau de bord du projet est un élément indispensable à la gestion de projets WebDev. Le tableau de bord permet d’avoir une vision globale et synthétique de l’état d’avancement d’un projet. Nous avons déjà vu dans la partie 2, quelques fonctionnalités du Tableau de bord. Nous allons maintenant l’étudier plus en détail, et voir ses interactions avec les Centres de Contrôle.

Note

Partie 9 : Gestion de projet avancée

Exemple Pour manipuler le tableau de bord, nous allons reprendre le projet "Ma_bibliotheque". Si vous n’avez pas créé cette application, une version corrigée est disponible dans le sous-répertoire "\Autoformation\Corriges\Ma_Bibliotheque" de WebDev 14. Pour ouvrir ce projet sous WebDev : 1. Sélectionnez l’option "Fichier .. Ouvrir un projet". 2. Sélectionnez votre projet "Ma_Bibliotheque" ou bien le projet "Ma_Bibliotheque.WWP" disponible dans le sous-répertoire "\Autoformation\Corriges\Ma_Bibliotheque" de WebDev 14. Configuration nécessaire Pour suivre cette leçon, vous devez utiliser l’environnement en mode complet. Pour plus de détails, consultez “Configuration nécessaire”, page 363.

Les différents éléments du tableau de bord

GAF_WebDev.book Page 367 Lundi, 15. décembre 2008 5:31 17

367

Le tableau de bord du projet est composé : • de voyants : Si les voyants sont verts, tout va bien. Les voyants rouges signalent un problème potentiel. • de listes d’éléments, permettant un accès rapide aux principales options du projet. • de compteurs, permettant de gérer les nouveautés, les demandes, ...

Astuce

Pour rechercher la page PAGE_Livre, rien de plus simple : saisissez les lettres "Livre" et faites votre choix. Un double-clic sur le nom de l’élément permet de l’ouvrir immédiatement sous l’éditeur associé. Vous voulez rechercher un élément sans être dans le tableau de bord ? Utilisez la combinaison de touches [CTRL] + [E] ... et vous retrouverez les mêmes possibilités.

Note

Autre liste intéressante : les favoris. Qui dans son application n’a pas une page ou un code qui sont utilisés fréquemment ? Une page générale regroupant par exemple les principales fonctionnalités ? Pour ne pas perdre de temps à rechercher cet objet, il suffit de le mettre dans les favoris. Par exemple, nous allons mettre la page "PAGE_Livre" de notre site en favoris : 1. Dans le tableau de bord, sélectionnez l’onglet "Favoris", et cliquez sur le lien pour afficher le volet des favoris. Le volet des favoris peut également être affiché par l’option "Affichage .. Barre d’outils .. Favoris".

2. Affichez la page "PAGE_Livre" sous l’éditeur (par exemple en double-cliquant sur son nom dans l’explorateur).

Partie 9 : Gestion de projet avancée

Les listes Le tableau de bord est composé de différentes listes. Ces listes permettent d’optimiser l’accès aux éléments du projet. Par exemple, la liste "Sélection rapide" permet de rechercher facilement un élément du projet. Il suffit de saisir quelques lettres composant le nom de l’élément recherché. La sélection est automatiquement réalisée et un aperçu permet de choisir l’élément voulu.

GAF_WebDev.book Page 368 Lundi, 15. décembre 2008 5:31 17

368

3. Dans le volet "Favoris", cliquez sur le bouton "+". Vous pouvez saisir le nom du favori (par exemple MaPage).

Note

Validez. Le favori apparaît Si plusieurs développeurs travaillent sur le même projet, il est possible de visualiser "Tous les favoris".

Partie 9 : Gestion de projet avancée

4. Dans le tableau de bord, vous retrouvez également votre favori. Les voyants Dans la partie 2, nous avons vu le voyant concernant les tests. Regardons les autres voyants. Les informations concernant la qualité globale du projet sont regroupées dans un compteur spécifique.

Dans le compteur, vous trouvez : • Un indicateur de qualité globale du projet, • Une jauge de sauvegarde. Il suffit de cliquer sur la jauge pour lancer une sauvegarde du projet. • Une jauge de nettoyage. Il suffit de cliquer sur la jauge pour lancer le nettoyage du projet. • Des voyants d’avertissement : composant pas à jour, erreurs de compilations détectées, informations détectées, warnings détectés. Le tableau de bord présente également des voyants d’optimisation : • détection de code mort : Si ce voyant est rouge, cela signifie que des procédures de votre site sont inutilisées. • éléments orphelins : Si ce voyant est rouge, cela signifie que des éléments de votre projet ne sont pas utilisés (par exemple, page utilisée uniquement pour test lors du développement du site).

GAF_WebDev.book Page 369 Lundi, 15. décembre 2008 5:31 17

369

• profiler de projet : Si ce voyant est rouge, cela signifie que vous n’avez jamais lancé l’analyseur de performances sur votre site. Cliquez sur ce voyant : l’analyseur de performances est automatiquement lancé. Utilisez normalement votre site. À la fermeture du navigateur, un rapport complet des actions effectuées sera affiché. Vous trouverez peut-être des traitements à optimiser. Nous détaillerons l’analyseur de performances dans le chapitre “L’analyseur de performances”, page 417. • optimisation de requêtes : Si ce voyant est rouge, cela signifie que votre projet utilise des requêtes qui peuvent être optimisées par une simple modification de l’analyse (ajout d’une clé composée par exemple). N’hésitez pas à utiliser ce bouton : il ne peut qu’améliorer les performances de votre site.

• GDS : Permet de savoir si le projet est partagé via le Gestionnaire de Sources. Nous verrons plus en détail cette fonctionnalité dans la leçon suivante (“GDS”, page 372). • Live data : Permet d’utiliser le contenu des fichiers de données du poste de développement dans les pages, les états, ... manipulés sous l’éditeur. Cette fonctionnalité est très intéressante par exemple pour définir la taille des champs présents dans une page. • Charte de programmation : Nous l’avons vu dans la partie 1, la charte de programmation permet d’unifier les noms des éléments utilisés dans un projet. Comme notre projet utilise une charte de programmation, ce voyant est vert. • Page d’accueil : Cette option indique si une page d’accueil a été intégrée dans votre site. Cet élément peut être important pour favoriser le référencement de votre site. • Langues : vous trouvez ici, le nombre de langues gérées par votre projet. Dans notre cas, une seule langue est gérée. Un clic sur ce voyant vous permet d’ajouter simplement de nouvelles langues à votre projet. Nous étudierons la gestion des projets multi-langues un peu plus loin dans ce cours (“Multilangue”, page 434) • Gabarit : Vous le savez, les modèles, les styles permettent de définir simplement la charte graphique de votre site. Un clic sur ce voyant vous permet d’accéder à l’écran de configuration du style de votre site. • Navigateurs récents : Permet de savoir si la génération HTML des pages de votre projet est configurée pour les navigateurs récents. Un clic sur ce voyant permet d’accéder à l’écran de configuration du projet définissant les options de génération du code HTML.

Partie 9 : Gestion de projet avancée

Par le biais du tableau de bord, il est également possible de connaître et de modifier certaines caractéristiques importantes du projet. Ces éléments sont également présentés sous forme de voyants : le voyant est vert ? Cela signifie que la fonctionnalité est activée dans votre projet. Dans le cas contraire, un simple clic sur le voyant permet d’activer ou de configurer la fonctionnalité. Passons rapidement en revue les éléments disponibles :

GAF_WebDev.book Page 370 Lundi, 15. décembre 2008 5:31 17

370

Les compteurs en relation avec les Centres de Contrôle WebDev est livré avec plusieurs Centres de Contrôle. Les Centres de Contrôle, comme leur nom l’indique, permettent de contrôler un ensemble de fonctionnalités. Nous avons déjà vu le Centre de Contrôle HyperFileSQL, qui permet notamment de contrôler les fichiers de données des sites HyperFileSQL Client/Serveur. WebDev propose également le Centre de Suivi de Projets. Ce centre permet de gérer des projets (informatiques ou non) de leur conception à leur livraison et même leur maintenance. Nous ne détaillerons ici que les éléments en relation avec le tableau de bord. Pour plus de détails sur les Centres de Contrôle et leur configuration, consultez le chapitre “Centres de contrôle”, page 384. Le compteur de tâches

Partie 9 : Gestion de projet avancée

Le compteur de tâches représente le nombre de tâches actuellement en cours sur le projet. Ces tâches sont référencées dans le Centre de Suivi de Projets. Ces tâches correspondent par exemple à : • des fonctionnalités à ajouter au projet • des développements futurs, ... Le compteur de demandes

Le compteur de demandes représente le nombre de demandes actuellement présentes sur le projet. Ces demandes sont référencées dans le Centre de Contrôle Qualité. Le compteur de messages

Le compteur de messages représente le nombre de messages associés au projet. Ces messages sont visibles dans la messagerie de WebDev. Ces messages sont par exemple automatiquement envoyés lors du travail avec le gestionnaire de sources. Vous êtes ainsi automatiquement averti d’une mise à jour d’un élément dans le GDS. Le compteur de règles

Le compteur de règles permet de connaître le nombre de règles métier concernant le projet. Le compteur de règles permet de connaître le nombre de règles métier concernant le projet. Nous verrons les règles métier un peu plus loin dans ce cours. Les règles métier peuvent être saisies par vous, développeur du projet.

GAF_WebDev.book Page 371 Lundi, 15. décembre 2008 5:31 17

371

Configuration du tableau de bord

Note

Il est possible de configurer précisément pour les deux modes : • les voyants concernant les bugs • les voyants concernant les tests • les voyants concernant l’optimisation • les compteurs de tâches et de demandes • le nettoyage • la sauvegarde • la qualité du projet.

Le look de votre tableau de bord ne vous convient pas ? Essayez un nouveau look grâce à l’option "Apparence" du menu contextuel du tableau de bord.

Partie 9 : Gestion de projet avancée

Nous avons vu les grandes catégories d’informations affichées dans le tableau de bord. WebDev propose deux modes de visualisation de ces informations : mode développeur, et mode chef de projet. Pour changer de mode, il suffit de cliquer sur "Mode" en haut du tableau de bord. Pour chaque mode, vous pouvez configurer de manière précise les niveaux d’alerte du tableau de bord. Pour configurer le tableau de bord, sélectionnez l’option "Option du tableau de bord" du menu contextuel du tableau de bord.

GAF_WebDev.book Page 372 Lundi, 15. décembre 2008 5:31 17

372

LEÇON 9.3. GDS Ce que vous allez apprendre dans cette leçon ... • Présentation • Le gestionnaire de sources • Utilisation du gestionnaire de sources

Partie 9 : Gestion de projet avancée

Durée estimée : 30mn

GAF_WebDev.book Page 373 Lundi, 15. décembre 2008 5:31 17

373

Introduction Un développement informatique important nécessite la participation de plusieurs développeurs. Ces développeurs doivent travailler sur un projet WebDev unique, en partageant les différentes ressources (pages, classes, ...) manipulées.

Note

WebDev gère en standard un gestionnaire de sources nommé "GDS" permettant de partager les sources de différents projets entre développeurs et de connaître l’historique complet des modifications réalisées (dans le code, l’interface, ...). Configuration nécessaire Pour suivre cette leçon, vous devez utiliser l’environnement en mode complet. Pour plus de détails, consultez “Configuration nécessaire”, page 363.

Principe du GDS Le gestionnaire de sources permet de stocker et de partager des projets et tous leurs éléments. Le principe est le suivant : • Une version de référence de chacun de vos projets est présente sur un serveur. L’ensemble de ces versions est appelé "Base de sources". • Chaque développeur a sur son poste une copie locale des différents projets sur laquelle il travaille.

• Lorsqu’un développeur veut modifier un élément d’un projet (une page, un état, une requête, ...), il indique au GDS qu’il s’approprie temporairement cet élément. Pour cela, le développeur va extraire cet élément de la base de sources. • Ce développeur obtient alors les droits exclusifs sur cet élément : il peut faire toutes les modifications voulues sur cet élément. • Les autres développeurs continuent de travailler avec la copie de la version de référence de cet élément (présente sur la base de sources).

Partie 9 : Gestion de projet avancée

GDS (Gestionnaire de Sources)

GAF_WebDev.book Page 374 Lundi, 15. décembre 2008 5:31 17

374

Le GDS gère donc le travail collaboratif et permet de connaître l’historique de toutes les modifications réalisées. Le GDS permet également d’administrer et de réglementer les éléments partagés entre plusieurs projets. Création de la base de sources Pour partager un projet grâce au gestionnaire de sources, il est nécessaire de créer une base de sources. Cette base de sources doit être créée une seule fois sur un poste serveur. Cette base de sources peut être créée à différents moments : • lors de l'installation de WebDev. • lors de la création d'un projet utilisant le GDS. • lors de l'importation d'un projet dans le GDS. • directement dans l’administrateur du GDS. allons créer notre base de sources lors de l’importation d’un projet dans le GDS, à la pro4 Nous chaine étape.

Notes

Partie 9 : Gestion de projet avancée

• Dès que le développeur a terminé ses modifications, il réintègre l’élément extrait dans la base de sources. • Les autres développeurs sont automatiquement avertis de cette réintégration. Ils peuvent alors mettre à jour leur copie locale.

Il est conseillé de faire régulièrement des sauvegardes de la base de sources du GDS. Pour cela, il suffit de se connecter en tant qu’administrateur à l’outil d’administration du GDS, et de sélectionner l’option "Outils .. Administration .. Sauvegarde complète de la base".

Intégration d’un projet dans le GDS Pour utiliser un projet existant avec le gestionnaire de sources, il suffit d’intégrer ce projet dans la base de sources du GDS.

GAF_WebDev.book Page 375 Lundi, 15. décembre 2008 5:31 17

375

Nous allons intégrer le projet "Pages_et_champs.WWP" dans la base de sources du GDS : 4 1. Ouvrez le projet "Pages_et_champs.WWP". Ce projet est présent dans le sous-répertoire

Nous n’avons pas précédemment créé de base de sources. Nous allons donc en créer une. Remarque : Nous allons créer une base de sources "locale" (sur le poste de développement). Le fonctionnement serait similaire pour une base de sources réseau. 3. Cliquez sur le bouton "Installer une base". La base de sources peut être au format HyperFileSQL Classic (local ou réseau) ou au format HyperFileSQL Client/Serveur. Nous allons créer une base de sources au format HyperFileSQL Classic.

Partie 9 : Gestion de projet avancée

"Autoformation\Corriges\Pages_et_champs" de WebDev. 2. Sélectionnez l’option "GDS .. Ajouter le projet complet". L’assistant d’ajout de projet dans le GDS se lance :

GAF_WebDev.book Page 376 Lundi, 15. décembre 2008 5:31 17

Notes

376

L’utilisation d’une base de sources au format HyperFileSQL Client/Serveur permet d’utiliser cette base de sources à distance.

Partie 9 : Gestion de projet avancée

4. Conservez l’option "Création d’une base en mode partage réseau" sélectionnée et indiquez le répertoire de cette base de sources ("C:\Mes Projets\Ma base de sources" par exemple). Validez la création de la base de sources (bouton "Créer la base"). La base de sources est à présent créée. Nous allons pouvoir intégrer notre projet dans cette base de sources. 5. Passez à l’écran suivant. 6. L’assistant nous propose de placer le projet dans le sous-répertoire "Projets WebDev" de la base de sources.

Nous allons accepter cet emplacement. Passez à l’écran suivant. 7. L’assistant nous demande de sélectionner les différents éléments du projet à ajouter dans la base de sources.

GAF_WebDev.book Page 377 Lundi, 15. décembre 2008 5:31 17

Notes

Nous voulons que tous les éléments du projet soient ajoutés. Passez à l’écran suivant. 8. L’assistant nous demande de sélectionner les différentes dépendances du projet à ajouter dans la base de sources. Ces dépendances correspondent à tous les éléments externes nécessaires au projet (images, feuilles de styles, ...). Nous voulons que toutes les dépendances du projet soient ajoutées. Passez à l’écran suivant. 9. Validez l’intégration du projet dans le GDS. Notre projet et tous ses éléments sont désormais ajoutés dans notre base de sources. Une fenêtre d’aide sur la barre d’outils d’utilisation du GDS s’affiche. Lisez et validez cette fenêtre. Partage d’éléments du projet Lors de l’intégration dans le GDS de projets partageant les mêmes ressources (la même analyse, les mêmes fenêtres, ...), les éléments concernés peuvent être partagés entre les différents projets. Ainsi, le même élément n’est intégré qu’une seule fois dans le GDS.

Partie 9 : Gestion de projet avancée

377

GAF_WebDev.book Page 378 Lundi, 15. décembre 2008 5:31 17

378

Cette opération doit être effectuée une seule fois par chaque développeur utilisant le projet. Le développeur qui a ajouté le projet dans le gestionnaire de sources (dans ce cas, c’est vous !) n’a aucune manipulation à effectuer. Notes

Partie 9 : Gestion de projet avancée

Ouverture du projet depuis le GDS Pour travailler sur un projet présent dans le gestionnaire de sources, il faut récupérer, en local, une copie de ce projet. Pour cela, il suffit d’ouvrir le projet depuis le gestionnaire de sources (option "GDS .. Ouvrir un projet depuis le GDS").

Les prochaines ouvertures d’un projet géré par le GDS sont identiques aux ouvertures d’un projet non géré par le GDS : il suffit d’ouvrir le projet (fichier ".WWP") correspondant à la copie locale.

Configuration du GDS Avant de commencer à travailler sur les éléments du projet présent dans le GDS, il est important de configurer le GDS. Les points importants de cette configuration concernent : • Le mode d’extraction des éléments du projet. • Le mode d’extraction du projet (fichier WWP). Mode d’extraction des éléments du projet

Lors du travail sur des éléments d’un projet présent dans le GDS, il est nécessaire d’extraire l’élément de la base de source avant de commencer à le modifier, puis de le réintégrer une fois les modifications effectuées. L’élément modifié est ainsi disponible pour tous les utilisateurs du GDS.

GAF_WebDev.book Page 379 Lundi, 15. décembre 2008 5:31 17

379

WebDev propose deux modes d’extraction des éléments du projet : • le mode classique : si vous affichez un élément du GDS non extrait, un panneau indique que cet élément doit être extrait pour être modifié. Vous pouvez extraire immédiatement l'élément (bouton d'extraction présent dans le panneau). • le mode automatique : si vous tentez de modifier un élément du GDS non extrait, le GDS propose automatiquement d'extraire cet élément. Après la validation de l'extraction, l'élément peut être modifié. Remarque : ce mode est déconseillé lors d'une utilisation du GDS avec une connexion Internet lente. Dans ce cours, nous allons utiliser l’extraction automatique. vérifier que l’extraction automatique est bien activée, sélectionnez l’option "Outils .. 4 Pour Options .. Options générales de WebDev". Dans l’onglet "Général", vérifiez que l’option "Extraction des éléments à la première modification" est sélectionnée. Si ce n’est pas le cas, activez cette option.

Notes

Le fichier Projet (fichier WWP) contient les différentes options pour le paramétrage du projet (code d’initialisation du projet, liste des éléments reliés, nom de la première page du projet, ...). WebDev propose deux modes de gestion du projet : • Mode Maître/Invité : Seul le maître peut modifier le projet et reporter ces modifications dans la base de sources du GDS. Le maître peut également réintégrer tous les éléments pour créer l’exécutable et le programme d’installation. Les modifications réalisées par les invités sur le projet ne seront pas prises en compte dans la base de source du GDS. Le mode Maître / Invité est conseillé pour une utilisation du GDS par un seul développeur.

Notes

• Mode automatique : Le fichier projet est extrait uniquement si l'action réalisée le nécessite (quel que soit l'utilisateur). Lorsque l'action sur le projet a été effectuée, le fichier projet est automatiquement réintégré. Le mode "Automatique" devient vite nécessaire pour des projets importants partagés par plusieurs développeurs.

Dans ce cours, nous allons utiliser l’extraction automatique. activer l’extraction automatique du projet est bien activée, sélectionnez l’option "GDS .. 4 Pour Gestion du projet .. Gérer automatiquement l’extraction du projet".

Partie 9 : Gestion de projet avancée

Mode d’extraction du projet

GAF_WebDev.book Page 380 Lundi, 15. décembre 2008 5:31 17

380

Extraction d’un élément Nous allons maintenant commencer à travailler avec le GDS. Pour modifier un élément du projet, il est nécessaire de l’extraire. Nous allons extraire la page "PAGE_Bouton" : 4 1. Sélectionnez la page "PAGE_Bouton" dans l’explorateur du projet.

Partie 9 : Gestion de projet avancée

2. Double-cliquez sur l’élément pour l’ouvrir sous l’éditeur de pages. 3. Affichez le code du bouton "Envoi au serveur - (Entrée)" (option "Code" du menu contextuel). 4. Nous allons saisir un commentaire devant la ligne "Info ...". Positionnez le curseur et utilisez la touche ENTREE. 5. La fenêtre d’extraction automatique apparaît :

6. Saisissez un commentaire ("Ajout d’un commentaire" par exemple). Ce commentaire sera utile pour les autres développeurs. 7. Le GDS propose trois modes d’extraction : •Exclusif (mode conseillé) : personne ne pourra extraire cet élément jusqu'à sa réintégration. L'élément pourra uniquement être extrait pour test. •Pour test : l'élément pourra être modifié mais les modifications ne pourront pas être réintégrées. •Multiple : l'élément pourra également être extrait par d'autres utilisateurs. Dans ce cas, lors de la réintégration, il sera possible de visualiser les différences entre les différentes versions de l'élément. Ce mode est réservé à des cas d’utilisation spécifiques et à des développeurs avancés. 8. Nous allons extraire la page en mode exclusif. Conservez l’option "Exclusif" cochée et validez l’extraction. La page est extraite. Le code peut être modifié.

GAF_WebDev.book Page 381 Lundi, 15. décembre 2008 5:31 17

381

Modification de l’élément extrait La modification d’un élément extrait (IHM, code, ...) s’effectue comme sur un projet non géré par le GDS. Cependant, toutes les modifications effectuées sur un élément extrait ne sont pas visibles par les autres développeurs. Si un autre développeur exécute l’élément extrait, l’élément qui est actuellement dans la base de sources sera utilisé. Il est ainsi possible de faire évoluer une application tout en gardant une version stable dans la base de sources. Modifiez la page extraite. 4 1. Saisissez le commentaire suivant : "// Affichage d’un message". Fermez la fenêtre de code. 2. Changez l’emplacement des champs, modifiez les libellés, ajoutez des champs ou du code, ... 3. Enregistrez votre page (CTRL + S).

Réintégration de l’élément extrait Maintenant que les modifications sont terminées et testées, nous allons réintégrer la page dans la base de sources. Vos modifications seront alors accessibles aux autres développeurs.

4 Sélectionnez l’option "GDS .. Réintégrer l’élément". L’écran suivant s’affiche :

Cet écran permet de : •connaître les modifications effectuées en comparant l'élément de la base de sources avec l'élément extrait (bouton "Mes Modifs"). •accéder à l'historique de l'élément dans la base de sources (bouton "Propriétés"). •saisir un commentaire sur les modifications réalisées. Par défaut, WebDev propose le commentaire saisi lors de l’extraction. •envoyer un message aux autres développeurs.

Partie 9 : Gestion de projet avancée

4 Testez vos modifications.

GAF_WebDev.book Page 382 Lundi, 15. décembre 2008 5:31 17

382

Notes

•réintégrer les modifications effectuées dans l'élément, tout en conservant l'élément extrait (option "Garder le fichier extrait"). Si vous utilisez les Centres de Contrôle, il est également possible de terminer la tâche en cours lors de la réintégration de l’élément dans le Gestionnaire de sources. Cette fonctionnalité est utile notamment pour assurer le suivi des tâches, des corrections de bugs, ...

4 Validez la réintégration. Synchronisation du projet Plusieurs options permettent de configurer un projet manipulé avec le GDS. Ces options sont regroupées dans l'onglet "Groupe" de la description du projet (option "Projet .. Description du projet"). Ces options sont les suivantes :

• Proposer la réintégration des éléments à la fermeture du projet. Cette option permet d'afficher lors de la fermeture du projet la liste de tous les éléments actuellement extraits, afin de réintégrer certains ou tous ces éléments. Par défaut, à la fermeture du projet, les éléments extraits ne sont pas réintégrés. • Proposer la réintégration et la récupération de la dernière version des éléments lors de la génération d'exécutables, de bibliothèques, de composants, … Cette option permet d'afficher lors de la création d'une bibliothèque, … la liste des éléments extraits, afin de réintégrer et de récupérer la dernière version des éléments. Le composant ou la bibliothèque peut ainsi contenir les derniers éléments les plus à jour. Par défaut, la génération de la bibliothèque, … se fait avec les éléments du projet actuellement présents sur le poste local.

Notes

Partie 9 : Gestion de projet avancée

• Proposer la récupération de la dernière version des éléments à l'ouverture du projet. Cette option permet lors de l'ouverture d'un projet présent dans le GDS, de proposer la récupération de la dernière version des différents éléments du projet. Par défaut, la dernière version des éléments est automatiquement récupérée.

Fusion de code Vous pouvez comparer un élément avec une de ces versions précédentes. Il est alors possible de comparer le code pour récupérer un code "perdu" ou supprimé par erreur par un autre développeur par exemple.

Mode déconnecté (ou nomade) Le GDS permet très simplement de travailler en mode déconnecté ou nomade. Ce mode permet par exemple à un développeur utilisant un portable de continuer à travailler sur un projet présent dans la base de sources tout en étant déconnecté.

GAF_WebDev.book Page 383 Lundi, 15. décembre 2008 5:31 17

383

Le principe est simple : • avant la déconnexion, il suffit d'utiliser l'option "GDS .. Travail à distance .. Se déconnecter pour une utilisation nomade". • à la reconnexion, il suffit d'utiliser l'option "GDS .. Travail à distance .. Se reconnecter et synchroniser". Il suffit alors de réintégrer les éléments modifiés.

Administrateur du GDS L'administrateur de GDS permet de manipuler directement les différents projets inclus dans le gestionnaire de sources. Il permet par exemple de : • gérer les bases de sources (création, connexion à une base de sources). • gérer les fichiers et les répertoires présents dans un projet de la base de sources (ajouter, supprimer, renommer, … des fichiers et des répertoires). • gérer les différents fichiers de la base de sources (extraction, réintégration, partage, …). • lancer certains outils (options, maintenances, …). • visualiser l’historique d’un élément. • visualiser l’état des éléments. • réaliser des sauvegardes. • donner des droits aux différents utilisateurs du GDS. • lister les projets auxquels on participe afin de pouvoir s’en dissocier (si besoin). l’administrateur du GDS (option "GDS .. Administrateur du Gestionnaire de Sources"). 4 Lancez Tous les éléments du projet y sont listés. Pour plus de renseignements sur le GDS, consultez l’aide en ligne de WebDev (mot-clé : "GDS").

Partie 9 : Gestion de projet avancée

En mode nomade, deux solutions s’offrent à vous concernant l’extraction d’éléments : • Vous ne faites aucune extraction d’élément du GDS. Ainsi, pendant toute votre période nomade, d’autres développeurs pourront travailler sur le ou les mêmes éléments que vous. À votre retour et à votre reconnexion au GDS, il sera nécessaire de faire des fusions entre vos propres modifications sur l’élément et celles effectuées par d’autres développeurs. • Vous faites une extraction exclusive sur le ou les éléments que vous allez modifier. Vous vous réservez ainsi l’élément pendant toute votre période nomade.

GAF_WebDev.book Page 384 Lundi, 15. décembre 2008 5:31 17

384

LEÇON 9.4. CENTRES DE CONTRÔLE Ce que vous allez apprendre dans cette leçon ... • Présentation • Le Centre de Suivi de Projets • Les autres Centres de Contrôle

Partie 9 : Gestion de projet avancée

Durée estimée : 20mn

GAF_WebDev.book Page 385 Lundi, 15. décembre 2008 5:31 17

385

Présentation

Configuration nécessaire Pour suivre cette leçon, vous devez utiliser l’environnement en mode complet. Pour plus de détails, consultez “Configuration nécessaire”, page 363.

Le Centre de Suivi de Projets Le Centre de Suivi de Projets est le cœur de l’organisation. Le Centre de Suivi de Projets permet de gérer le planning de réalisation d’un projet, de sa création à sa livraison finale. Il est ainsi possible de connaître l’ensemble des tâches à réaliser sur un projet, les développeurs concernés, les durées nécessaires, l'état d'avancement du projet, ... Pour tester les Centres de Contrôle, nous allons utiliser notre application "Ma_Bibliotheque". le Centre de Suivi de Projets (option "Outils .. Centre de Suivi de Projets"). La première 4 Lancez chose à faire est de définir le "Projet" de travail. Dans notre cas, ce projet correspond à un pro-

Notes

jet WebDev, mais il pourrait s’agir de n’importe quel autre projet. Le Centre de Suivi de Projets peut vous aider à gérer, à planifier n’importe quel projet ou tâche (de développement, commercial, ou autre).

1. Créez un nouveau projet (option "Gestion .. Gestion des projets", bouton "+"). 2. Saisissez : • le nom du projet (par exemple "Autoformation") • sa description (par exemple "Ma_Bibliotheque") • le type d’application : Internet/Intranet • le chemin du projet. Dans notre cas, indiquez un chemin de projet hors GDS (par exemple le chemin du projet

Partie 9 : Gestion de projet avancée

Note

WebDev propose un ensemble d’outils pour suivre le développement d’un projet, de sa conception à sa maintenance. Ces outils s’appellent les Centres de Contrôle. Dans un chapitre précédent, nous avons déjà évoqué le Centre de Contrôle HyperFileSQL. Ce Centre de Contrôle (redistribuable) permet notamment de gérer les sites HyperFileSQL Client/Serveur déployés. Dans cette partie, nous allons nous intéresser au Centre de Contrôle lié au développement d’une application : le Centre de Suivi de Projets Ce centre utilise une base de données spécifique. Cette base de données peut être : • soit une base de données HyperFileSQL Classic : au premier lancement de WebDev, vous avez donné le chemin de cette base de données. Par défaut cette base est installée dans un sousrépertoire de WebDev 14. • soit une base de données HyperFileSQL Client/Serveur. Ces informations sont modifiables à tout moment depuis les options de WebDev (option "Outils .. Options de WebDev", bouton "Paramètres des Centres de Contrôle").

GAF_WebDev.book Page 386 Lundi, 15. décembre 2008 5:31 17

386

Note

"Ma_Bibliotheque.wwp", dans le sous-répertoire "Autoformation\Corriges\Ma_Bibliotheque" de WebDev). Si le projet est disponible dans le GDS (Gestionnaire de sources), il est possible de saisir la base de sources et le répertoire distant correspondants au projet.

• un groupe • le spool associé (vous pouvez en créer un nouveau). • la couleur associée au projet (permet d’identifier rapidement les différents projets). 3. L’écran permettant de sélectionner les intervenants de votre projet est automatiquement affiché. Laissez vous-même et validez. 4. Fermez la fenêtre de gestion des projets. il est possible de définir des tâches sur le projet. Nous allons créer une tâche 4 Maintenant, pour passer notre projet en multilangue :

Partie 9 : Gestion de projet avancée

1. Sélectionnez l’option "Tâches .. Créer une nouvelle tâche". 2. Donnez les caractéristiques suivantes :

3. Validez. La tâche apparaît dans la liste des tâches.

GAF_WebDev.book Page 387 Lundi, 15. décembre 2008 5:31 17

387

Vous pouvez créer autant de tâches que vous voulez. Ces tâches représentent votre planning. Ces tâches peuvent également être des tâches fixes (par exemple une réunion à un jour et une heure donnée) ou périodiques (par exemple, une réunion tous les vendredis). Pour activer une tâche, il suffit d’utiliser le menu contextuel de la liste des tâches, et sélectionner l’option "Démarrer cette tâche". L’utilisation du Centre de Suivi de Projets est très simple : dès que vous effectuez une tâche, vous sélectionnez cette tâche dans le Centre de Suivi de Projets, et vous indiquez que vous "démarrez cette tâche" (option du menu contextuel de la liste des tâches). Si votre projet est lié à un projet WebDev, dès que le projet est ouvert sous WebDev, la tâche correspondante est activée.

Gérer son temps

Pour activer l’aide à la gestion du temps : 4 1. Dans le Centre de Suivi de projets, sélectionnez "Paramètres .. Options du Centre de Suivi de Projets". 2. Dans l’onglet "Aide à la gestion du temps", sélectionnez "Activer la gestion du temps". 3. Validez. La tâche en cours est rappelée à intervalle de temps régulier.

L’utilisateur peut valider la tâche en cours ou si nécessaire, changer sa tâche en cours. De plus, si le poste de travail est inutilisé pendant une période déterminée, une "roue des tâches" s’affiche.

Partie 9 : Gestion de projet avancée

La gestion du temps est primordiale. Où passe le temps de chaque journée ? Comment le savoir sans contrainte supplémentaire, sans astreindre les membres de l'équipe à une saisie fastidieuse, et sans non plus donner l’impression désagréable d’être espionné ? La saisie du temps passé sur les tâches est une fonctionnalité intéressante de WebDev. Cette fonctionnalité est liée à l'utilisation du Centre de Suivi de Projets. Le principe est simple : la liste des tâches est saisie dans le centre de suivi de projets.

GAF_WebDev.book Page 388 Lundi, 15. décembre 2008 5:31 17

388

Partie 9 : Gestion de projet avancée

Cette roue des tâches permet de sélectionner la tâche d'interruption correspondant au temps écoulé pendant l'affichage de la roue.

Configuration Il est possible d'activer/désactiver la gestion du temps dans la fenêtre de paramétrage de la gestion du temps. Cette fenêtre peut être affichée : • dans le Centre de Suivi de Projets (option "Paramètres .. Options du Centre de Suivi de Projets") • dans WebDev : option "Projet .. Gestion du temps .. Options de la gestion du temps".

Les autres Centres de Contrôle WebDev dispose également d’autres Centres de Contrôle, réservés aux développeurs WebDev : • Centre de Contrôle Qualité : Ce centre permet de saisir les différents problèmes rencontrés sur un projet, et de suivre leur traitement. • Centre de Réutilisabilité : Ce centre permet de centraliser les ressources (composants, bibliothèques, classes, ...) de vos différents projets afin de les mettre à disposition de votre équipe de développement. • Centre de Gestion des documents : Ce centre permet de centraliser les aides et documents générés pour vos projets. • Centre Topologique : Ce centre permet de réaliser un schéma topologique d'un site d'exploitation. Il est possible de représenter les serveurs, les postes clients, les périphériques mobiles, ...

GAF_WebDev.book Page 389 Lundi, 15. décembre 2008 5:31 17

389

LEÇON 9.5. RÈGLES MÉTIER Ce que vous allez apprendre dans cette leçon ... • Présentation • Créer une règle métier • Valider une règle métier

Partie 9 : Gestion de projet avancée

Durée estimée : 20mn

GAF_WebDev.book Page 390 Lundi, 15. décembre 2008 5:31 17

390

Présentation WebDev permet de gérer des règles métier. Une règle métier permet de définir un mode opératoire précis ou de préciser un traitement particulier. Par exemple : le calcul d’un taux de TVA avec ses particularités, les règles de changement de statut d’un client, la formule de calcul d’un montant de frais de port, ... Une règle métier peut être simple ou élaborée, et concerner un ou plusieurs éléments d’un ou de plusieurs projets.

Note

Partie 9 : Gestion de projet avancée

Exemple Pour voir les avantages des règles métier, nous allons créer une règle métier sur le projet "Ma_Bibliotheque" créé à la partie 2 de ce cours d’auto-formation. Si vous n’avez pas créé cette application, une version corrigée est disponible dans le sous-répertoire "\Autoformation\Corriges\Ma_Bibliotheque" de WebDev 14. Pour ouvrir ce projet sous WebDev : 1. Sélectionnez l’option "Fichier .. Ouvrir un projet". 2. Sélectionnez votre projet "Ma_Bibliotheque" ou bien le projet "Ma_Bibliotheque.WWP" disponible dans le sous-répertoire "\Autoformation\corriges\Ma_Bibliotheque" de WebDev 14. Configuration nécessaire Pour suivre cette leçon, vous devez utiliser l’environnement en mode complet. Pour plus de détails, consultez “Configuration nécessaire”, page 363.

Application sur un exemple concret Création d’une règle métier 4 Ouvrez le projet "Ma_Bibliotheque" et affichez la page "PAGE_Livre".

allons modifier cette page pour gérer le cas des livres dont la date d’entrée est récente 4 Nous (moins d’un an). En effet, si un livre a une date d’entrée récente, il va être mis en avant grâce à une image clignotante. 1. Créez un champ image et positionnez-le à côté du champ "Date entrée". Cette image a pour nom "IMG_Image1". 2. Affichez la description de l’image. Grâce au bouton "Catalogue", sélectionnez une animation GIF ("New" par exemple). Validez l’image choisie, et son intégration dans le répertoire du site. Dans l’onglet "Détail" du champ, indiquez que le champ est invisible. 3. Dans le code de sortie du champ "Date", saisissez le code suivant : SI DateDifférence(SAI_DateEntree, DateDuJour)<365 ALORS IMG_Image1..Visible=Vrai FIN

Ce code permet d’afficher l’image clignotante uniquement si le livre a été rentré il y a moins d’un an.

GAF_WebDev.book Page 391 Lundi, 15. décembre 2008 5:31 17

391

Note

4 Nous allons maintenant créer une règle métier sur cette page. Une règle métier permet de définir un mode opératoire précis ou de préciser un traitement particulier. Par exemple : le calcul d’un taux de TVA avec ses particularités, les règles de changement de statut d’un client, la formule de calcul d’un montant de frais de port, ...

Dans notre cas, la règle métier va s’appliquer à tous les livres rentrés il y a moins d’un an. Dans ce cas, un traitement spécifique doit être fait : il faut afficher une image indiquant que c’est une nouveauté. 1. Affichez le volet des règles métier (par exemple en cliquant sur le bouton ).

5. Nous allons maintenant définir sur quels éléments la règle métier doit s’appliquer. Cliquez sur l’onglet "Liens". 6. Nous allons définir un lien automatique : la règle s’appliquera dès qu’un élément respectant les conditions de la règle sera créé. Cliquez sur le bouton "Conditions des liens automatiques" (icône

). Une nouvelle fenêtre s’affiche.

7. Nous allons définir les conditions de sélection des éléments du projet. Pour l’option "Rechercher automatiquement les éléments dans : ", sélectionnez "le projet courant uniquement". 8. Nous allons définir les conditions de sélection de la règle métier. Cliquez sur "+" et indiquez les informations suivantes :

Partie 9 : Gestion de projet avancée

2. Par défaut, la nouvelle règle métier sera créée sur l’élément sélectionné : sélectionnez le champ "Date entrée". 3. Cliquez sur le bouton "+" : l’écran de saisie de la règle métier s’affiche. 4. La description de la règle est la suivante : "Si la date d’entrée du livre est récente (moins d’un an), afficher une image "New" clignotante".

GAF_WebDev.book Page 392 Lundi, 15. décembre 2008 5:31 17

392

Partie 9 : Gestion de projet avancée

La règle va concerner tous les champs des pages liés à la rubrique "Livre.DateEntree". Validez. La condition de sélection est affichée. Automatiquement, les pages existantes du projet correspondant à la règle sont listées. 9. Validez. 10. Les liens de la règle métier sont mis à jour. 11. Validez la création de la règle métier. 12. Vous pouvez passer en "réalisé" la règle métier pour la page "PAGE_Livre". 13. Enregistrez votre page.

GAF_WebDev.book Page 393 Lundi, 15. décembre 2008 5:31 17

393

LEÇON 9.6. WEB SERVICES Ce que vous allez apprendre dans cette leçon ... • Prise de connaissance avec les services Web. • Etape par étape : utiliser un service Web dans un site.

Partie 9 : Gestion de projet avancée

Durée estimée : 40mn

GAF_WebDev.book Page 394 Lundi, 15. décembre 2008 5:31 17

394

Introduction .NET, J2EE, SOAP, WSDL, XML ... que de termes ! Bienvenue dans le monde merveilleux des services Web XML ! Les plates-formes serveurs Microsoft .NET et Sun J2EE permettent d'exporter leurs composants sous forme de services Web XML. Un service Web est généralement défini comme une application accessible via des protocoles Internet standard. Les services Web permettent notamment l’interactivité entre plusieurs ordinateurs connectés sur le réseau Internet. Via les services Web, il est possible de faire exécuter des procédures et des traitements sur un serveur Web (.NET ou J2EE) à distance depuis un poste client.

Aspect théorique

Quelle que soit la plate-forme du serveur Web (.NET, J2EE ...), un service Web est accessible via l’utilisation de SOAP. Notes

Partie 9 : Gestion de projet avancée

Avec WebDev, ces services WEB sont utilisables en tant que client, via le protocole SOAP sur HTTP (le protocole standard d’Internet pour le transfert des pages HTML), grâce aux fonctions SOAPxx, DotNetxx et J2EExx.

Avec WebDev, il n’est pas nécessaire de maîtriser ces informations. Un assistant se charge de ("presque") tout !

Le standard SOAP Le SOAP (Simple Objet Access Protocol) est un protocole de communication qui permet d'exécuter des procédures sur un serveur distant, d’envoyer des paramètres et d’en récupérer. Ce protocole s'appuie principalement sur le protocole HTTP et le langage XML. Notez toutefois que ce protocole peut également s’appuyer sur le protocole SMTP, protocole que nous avons évoqué dans la leçon sur la gestion des emails (page 352). Les données sont transmises entre le poste local et le serveur SOAP sous forme de texte structuré au format XML (Extensible Markup Language). Le principal avantage du protocole SOAP vient du fait qu'il repose sur deux protocoles standards : • XML : pour la structure des messages. • HTTP : pour le transport des données. De ce fait, le protocole SOAP est indépendant des systèmes d'exploitation et des langages de programmation. Le protocole SOAP permet "l'intéropérabilité". De plus, l'utilisation du protocole HTTP (pour le transfert des données) permet au protocole SOAP de franchir les "firewalls" (solutions matérielles ou logicielles garantissant la sécurité d’un réseau vis-à-vis d’Internet, appelés également "barrières de sécurité") sans problème. Il est vrai que le protocole SOAP est relativement complexe à manipuler. C'est pourquoi il existe un standard de description de service, le WSDL, créé pour simplifier l'intégration des services Web XML dans les différents outils qui voudraient les utiliser.

GAF_WebDev.book Page 395 Lundi, 15. décembre 2008 5:31 17

395

WebDev est capable d’importer un service Web XML grâce à ce standard de description. En bref, avec WebDev : • Vous sélectionnez le fichier WSDL attaché à un service. • WebDev génère une classe ou une collection de procédures qui intègre le service. Et voilà, le service Web XML s’utilisera ensuite comme une classe ou une collection de procédures WebDev!

Etape par étape, l’importation d’un service Web

Configuration nécessaire Pour suivre cette leçon, vous devez utiliser l’environnement en mode complet. Pour plus de détails, consultez “Configuration nécessaire”, page 363.

Etape 1 : Création du projet Au lieu de demander à notre grenouille nationale favorite, nous allons créer un projet très simple permettant de connaître la météo à tel ou tel endroit du globe. N’est-ce pas une façon plus moderne ? un nouveau projet WebDev dynamique. 4 Créez Le nom de ce projet sera "WebMeteo". Ce projet n’utilisera pas d’analyse. Conservez toutes les autres options par défaut. Remarque : le projet entièrement réalisé est disponible dans le sous-répertoire "Autoformation\Corriges\WebMeteo" du répertoire d’installation de WebDev 14 (projet "WebMeteo.WWP"). Avant de continuer, assurez-vous que vous possédez une connexion active à Internet. Etape 2 : Importation du service Web Nous allons commencer par importer la structure du service Web à interroger. le menu de WebDev, sélectionnez l’option "Atelier .. 4 Dans J2EE) .. Importer et utiliser un service dans ce projet".

Service Web XML (SOAP, .Net,

L’assistant d’importation de services Web se lance. Passez à l’écran suivant. l’option "je charge la description à l’adresse suivante", et saisissez l’adresse sui4 Sélectionnez vante dans le champ de saisie situé au dessous : "www.webservicex.net/globalweather.asmx?WSDL". En effet, nous allons charger la description du service directement depuis Internet.

Partie 9 : Gestion de projet avancée

Notes

Les paragraphes suivants détaillent l’importation d’un service WEB dans un projet WebDev.

GAF_WebDev.book Page 396 Lundi, 15. décembre 2008 5:31 17

Passez à l’écran suivant.

Notes

Partie 9 : Gestion de projet avancée

396

Le serveur où se trouve le service Web que nous allons utiliser est un serveur de test américain. Ce serveur peut ne plus exister à l’heure où vous lisez ces lignes. Nous vous demandons de nous excuser par avance. Dans le cadre d’une utilisation professionnelle de ce service Web, vous devrez l’installer sur votre serveur Web. Pour plus de détails sur ce service, consultez les conditions d’utilisation à l’adresse suivante : http://www.webservicex.net

4 Sélectionnez le type du service Web : "SOAP générique". Passez à l’écran suivant. pouvez générer au choix une collection de procédures ou une classe pour utiliser le ser4 Vous vice Web dans votre application. Pour cet exemple, choisissez "une collection de procédures". Passez à l’écran suivant.

GAF_WebDev.book Page 397 Lundi, 15. décembre 2008 5:31 17

397

modifiez rien et validez l’assistant. 4 Ne WebDev génère la collection correspondante et votre service Web est intégré ! Vous pouvez retrouver la collection de procédures dans le volet "Code".

Prenez quelques minutes pour observer le contenu des procédures générées. Vous retrouvez les fonctions "XML" du WLangage. Etape 3 : utilisation de la collection de procédures La collection de procédures générée contient différentes procédures (globales) permettant de dialoguer avec le service Web. Nous allons manipuler quelques-unes de ces procédures. Créez une page vierge. 4 1. Nommez la page "PAGE_Meteo". 2. Saisissez le titre "Quel temps fait-il ?". 3. Enregistrez la page.

Partie 9 : Gestion de projet avancée

va générer une collection de procédures globales. Une procédure sera créée pour 4 L’assistant chaque fonction du service Web :

GAF_WebDev.book Page 398 Lundi, 15. décembre 2008 5:31 17

398

un champ de saisie. Le nom de ce champ est "SAI_NomVille". Le libellé de ce champ 4 Ajoutez est "Ville :". un champ de saisie. Le nom de ce champ est "SAI_Pays". Le libellé de ce champ est 4 Ajoutez "Pays :". deux champs de type "libellé" cote à cote. Le premier libellé à pour nom 4 Ajoutez "LIB_Température". Le libellé de ce champ est "Température :". Le second libellé a pour nom "LIB_Température_Aff" et a pour libellé "...". deux champs de type "libellé" cote à cote. Le premier libellé à pour 4 Ajoutez "LIB_Humidité". Le libellé de ce champ est "Humidité :". Le second libellé a pour

nom nom

"LIB_Humidité_Aff" et a pour libellé "..". deux champs de type "libellé" cote à cote. Le premier libellé à pour nom 4 Ajoutez "LIB_Pression". Le libellé de ce champ est "Pression atmosphérique :". Le second libellé a pour nom "LIB_Pression_Aff" et a pour libellé "..".

Notes

Partie 9 : Gestion de projet avancée

un bouton. Le nom de ce bouton est "BTN_METEO". Le libellé de ce bouton est "Quel 4 Ajoutez temps ?". Dans notre exemple, le service Web utilise le format XML pour renvoyer les informations. Ces informations seront traitées grâce aux fonctions XML du WLangage.

Exploitation du service Web

Les mesures sont référencées suivant un code ICAO (d’après la documentation du service). Le code ICAO correspond à l’identifiant des villes (des stations), par exemple pour Montpellier c'est le code "LFMT". Comme personne ne connaît ces codes, le code ICAO sera recherché grâce au nom de la station (avec la procédure GetWeather).

4 Saisissez le code suivant dans le traitement de clic du bouton "BTN_METEO" :

// Si le nom de la ville est vide, si le pays n'est pas renseigné // on annule le clic SI SAI_NOMVILLE ~= "" ET SAI_PAYS = "" ALORS RETOUR sXMLResultat est une chaîne ="" stSXMLResultatWeather est GlobalWeather.STGetWeatherResponse stSXMLResultatWeather = ... GlobalWeather.GetWeather(SAI_NOMVILLE,SAI_PAYS) sXMLResultat = XMLVersTexte(... stSXMLResultatWeather:m_GetWeatherResult) // si la ville recherchée n'existe pas , // on ne peut pas récupérer les informations SI XMLExtraitChaîne(sXMLResultat,"GetWeatherResult") = ... "Data not found" ALORS Erreur("La ville "+SAI_NOMVILLE+ ... " pour le pays "+SAI_PAYS+" n'a pas été trouvée") SINON

GAF_WebDev.book Page 399 Lundi, 15. décembre 2008 5:31 17

399

La fonction XMLExtraitChaîne permet de récupérer la chaîne contenue dans une balise XML. Pour plus de détails sur cette fonction, consultez l’aide en ligne (mot-clé : "XMLExtraitChaîne"). Après exécution de ces lignes, la variable sXMLResultat contient un code XML manipulable facilement grâce à la fonction XMLExtraitChaîne. Après une courte analyse de ce code XML, nous savons que : • la température est contenue dans la balise "Temperature" • le point de rosée est contenu dans la balise "DewPoint" • le taux d’humidité est contenu dans la balise "RelativeHumidity" • la pression atmosphérique est contenue dans la balise "Pressure"

LIB_NOMVILLE = SAI_NOMVILLE + " " + SAI_PAYS // Il ne reste plus qu'à récupérer // les différentes mesures du résultat // pour la température LIB_TEMPERATURE_AFF= XMLExtraitChaîne(... sXMLResultat,"Temperature") // on a reçu des degrés Fahrenheit, // on les convertit en degrés Celsius LIB_TEMPERATURE_AFF = Arrondi(Conversion(Val(... LIB_TEMPERATURE_AFF),"degré Fahrenheit",... "degré Celsius"),2) + "° C" // on récupère les autres informations basiques LIB_HUMIDITE_AFF= Arrondi(Val(XMLExtraitChaîne(... sXMLResultat,"RelativeHumidity",1,... XMLIgnoreLaCasse)),2) +"%" LIB_Pression_Aff= XMLExtraitChaîne(sXMLResultat,... "Pressure",1,XMLIgnoreLaCasse) // on a reçu des pouces de mercure on convertit en millibar LIB_Pression_Aff = Arrondi(Conversion(Val... LIB_Pression_Aff),"pouce de mercure","millibar"),2)+ "mb" FIN

Et voilà, c’est terminé. puis testez la page. 4 Enregistrez Saisissez par exemple "Montpellier" dans le champ "Station" et "France" dans le champ "Pays", puis cliquez sur "Quel temps ?".

Partie 9 : Gestion de projet avancée

allons ensuite extraire les différentes données. 4 Nous Saisissez le code suivant (toujours dans le code de clic du bouton "BTN_METEO") :

GAF_WebDev.book Page 400 Lundi, 15. décembre 2008 5:31 17

Partie 9 : Gestion de projet avancée

400

En quelques secondes, le service Web a été interrogé, le résultat exploité dans l’application et les données affichées. Et tout ça, en ne saisissant que très peu de code ! Une vraie petite grenouille électronique ! Pour plus de détails sur l’utilisation des services Web, consultez l’aide en ligne (mot-clé : "Services Web").

GAF_WebDev.book Page 401 Lundi, 15. décembre 2008 5:31 17

401

LEÇON 9.7. LES COMPOSANTS Ce que vous allez apprendre dans cette leçon ... • Qu’est-ce qu’un composant ? • Etape par étape, la création d’un composant. • Diffusion d’un composant.

Partie 9 : Gestion de projet avancée

Durée estimée : 30mn

GAF_WebDev.book Page 402 Lundi, 15. décembre 2008 5:31 17

402

Présentation

Les projets qui utilisent un composant ont accès sous l'éditeur WebDev au nom des objets, procédures ou méthodes rendues visibles par le concepteur du composant. Les projets ne peuvent pas voir ou modifier le code source. La confidentialité et la stabilité du code sont garanties. La réalisation d'un composant est très simple. Comment faut-il faire ? Faites comme d'habitude, créez vos pages, procédures, classes. Puis lorsque vous aurez terminé, choisissez l'option de création d'un composant, c'est tout ! Un composant peut contenir du code, des pages, une analyse, des fichiers de données, etc !

Notes

Partie 9 : Gestion de projet avancée

Un composant WebDev est une brique applicative qui peut être réutilisée dans un nombre illimité de projets. Un composant permet d'avoir un traitement identique avec un code source unique pour réaliser une opération donnée même si ce traitement doit être réalisé par plusieurs projets.

Pour partager du "code", WebDev propose les méthodes suivantes : 1. Les collections de procédures 2. Les classes 3. Les superchamps (à travers l’utilisation d’un dictionnaire) 4. Les composants 5. Les composants internes

Voici plusieurs cas dans lesquels les composants peuvent être intéressants. Travail en équipe Un développeur crée et maintient un composant qu’il met à la disposition des autres développeurs. Il ne risque pas d’y avoir des modifications faites "par erreur" ! Les projets volumineux Les composants permettent d'avoir plusieurs projets distincts de tailles réduites, et d'avoir un projet central dans lequel les éléments des autres projets sont visibles. L’utilisabilité des composants est bien meilleure que les bibliothèques (fichiers WDL).

GAF_WebDev.book Page 403 Lundi, 15. décembre 2008 5:31 17

403

Les bases de données accédées par plusieurs projets Lorsqu’une même base de données est accédée par plusieurs projets, il est fréquent d'avoir des incohérences dans la base de données dues à des codes sources modifiés ou trop vieux. En regroupant les opérations d'accès (en écriture au moins) à la base de données dans un composant, cela permet d'avoir un seul code source à vérifier/maintenir, et cela permet donc de limiter le risque d'incohérences dans la base de données.

La possibilité de diffuser une fonctionnalité ou un ensemble de fonctionnalités Les composants permettent de réaliser une fonctionnalité ou un ensemble de fonctionnalités. D'autres développeurs WebDev pourront intégrer ces fonctionnalités dans leurs propres projets. Les développeurs qui utilisent un composant peuvent voir les éléments du composant rendus visibles. Cependant il ne sera pas possible de voir ou de modifier le code source. Vous pouvez diffuser gratuitement ou même commercialiser des composants ! Composant multiproduits Un composant peut être prévu pour fonctionner dans : • une application WinDev • une application WebDev • une application WinDev Mobile • ou dans les trois types d’applications. Dans ce dernier cas, WebDev permet : • d’intégrer les éléments provenant des différents produits (WebDev et/ou WinDev Mobile) dans un même composant. • d’indiquer pour chaque plateforme d’exécution le code WLangage correspondant (par exemple, l’affichage d’une fenêtre se fait par la fonction Ouvre en WinDev, et l’affichage d’une page se fait par la fonction PageAffiche en WebDev).

Partie 9 : Gestion de projet avancée

Les traitements utilisés dans plusieurs projets Il est fréquent d'avoir des traitements plus ou moins complexes utilisés dans plusieurs projets. Il est possible de réutiliser ces traitements par l'intermédiaire de "collections de procédures" ou de "classes". Dans ce cas il existe un risque de modifications non reportées entre les différents projets, qui rendent ensuite ces éléments incompatibles entre eux. L'utilisation des composants permet d'éviter des modifications intempestives et permet de conserver des projets compatibles auxquels il est simple d'apporter une modification commune. De plus avec l’utilisation possible du mot-clé PRIVE, vous pourrez assurer la confidentialité de votre code à tous les niveaux du composant. Lors de la réutilisation de votre composant dans un autre projet WebDev, l’édition du code ne sera pas permise mais la documentation concernant l’utilisation des fonctions (par exemple des procédures) sera affichée !

GAF_WebDev.book Page 404 Lundi, 15. décembre 2008 5:31 17

404

Etape par étape

Notes

Etape 1 : Création d’un composant Nous allons créer un composant permettant de générer de façon aléatoire un mot de passe dans une image brouillée. Cette fonctionnalité est très utile lors de l'enregistrement d'utilisateur "humain". Elle permet d'éviter les enregistrements automatiques grâce à des robots, ... Pour ne pas avoir à développer le code nécessaire au fonctionnement du composant, nous avons regroupé tous les éléments nécessaires dans un projet "ImagePASS_Composant". Nous allons nous servir de ce projet pour créer notre composant. Nous créerons par la suite un nouveau projet pour utiliser ce composant. WebDev est livré en standard avec le composant "ImagePASS". Ce composant est une version plus complète du composant utilisé dans ce cours d’auto-formation.

toire d’installation de WebDev. Ce projet contient tous les éléments nécessaires au fonctionnement du composant. Le composant est constitué : •d’une page interne, •d’une collection de procédures serveur et d’une collection de procédures navigateur. Nous allons maintenant créer notre composant.

Notes

Partie 9 : Gestion de projet avancée

le projet "ImagePASS_Composant.WWP". Ce projet est disponible dans le sous-réper4 Ouvrez toire "Autoformation\Exercices\Composant_Autoformation\ImagePASS_Composant" du réper-

Si vous ne voulez pas suivre les différentes étapes de la création du composant, vous trouverez dans le répertoire "\Autoformation\Corriges\Composant_Autoformation" de WebDev, le projet contenant le composant généré et le projet d’utilisation du composant.

créer un composant, dans le menu de WebDev, sélectionnez l’option "Atelier .. 4 Pour Composant .. Définir un nouveau composant à partir de ce projet". WebDev vous propose de créer une configuration de projet. Refusez. Nous verrons les configurations de projet dans une prochaine leçon. L’assistant de création de composant se lance. Identifiez votre composant : 4 1. Saisissez le nom "ImagePASS_Autoformation". 2. Saisissez comme libellé : "Composant ImagePASS créé par le cours". à l’écran suivant. 4 Passez Sélectionnez les éléments qui constituent le composant. Cochez uniquement les collections de procédures (pImagePASS et PImagePASS_Nav) et la page interne PI_PASS.

GAF_WebDev.book Page 405 Lundi, 15. décembre 2008 5:31 17

à l’écran suivant. 4 Passez L’assistant vous demande de sélectionner les éléments du composant qui seront accessibles depuis le projet client. Dans notre exemple, tous les éléments seront accessibles :

à l’écran suivant. WebDev va créer le composant puis propose de générer le compo4 Passez sant. l’assistant de génération du composant, WebDev propose d’autoriser la traduction du 4 Dans composant. Cette fonctionnalité est intéressante si votre composant doit être utilisé par des applications ou sites multilangues. Si l’option "Autoriser la traduction du composant" est cochée, il sera possible de traduire à partir de l’application utilisant le composant les élé-

Partie 9 : Gestion de projet avancée

405

GAF_WebDev.book Page 406 Lundi, 15. décembre 2008 5:31 17

406

ments spécifiés du composant. Cette traduction sera réalisée à l’aide de WDMSG, module indépendant permettant d’extraire et de réintégrer les messages à traduire d’un projet. Dans cet exemple, ne cochez pas cette option. Passez à l’écran suivant. les langues du composant. Notre exemple contient uniquement le Français. Passez 4 Choisissez à l’écran suivant. propose ensuite de gérer les différentes versions du composant. Dans notre exem4 L’assistant ple, le composant vient d’être créé. Conservez les options par défaut. Passez à l’écran suivant. cette fenêtre, saisissez les différentes informations concernant le composant : 4 •Dans Propriétaire, • Libellé, Copyright, ... Passez à l’écran suivant. pouvez associer une image à votre composant. Les utilisateurs du composant pourront 4 Vous l’identifier rapidement dans le volet "Catalogue d’exemples".

Partie 9 : Gestion de projet avancée

à l’écran suivant. Cet écran permet de spécifier la présentation générale du compo4 Passez sant. Vous pouvez indiquer :

à l’écran suivant. L’assistant va maintenant effectuer la génération automatique de la 4 Passez documentation sur le composant. Cette documentation peut être basée sur les commentaires que vous aurez insérés dans votre code source.

GAF_WebDev.book Page 407 Lundi, 15. décembre 2008 5:31 17

Vous avez la possibilité de modifier la documentation générée. Nous n’allons pas y toucher. Passez à l’écran suivant. avez la possibilité d’intégrer le composant dans le Centre de Réutilisabilité : le compo4 Vous sant pourra être ainsi réutilisé simplement dans d’autres projet. Dans cet exemple, le composant ne sera pas intégré au Centre de Réutilisabilité. Passez à l’écran suivant.

4 Il ne reste plus alors qu’à donner un nom physique à notre composant.

Voilà, votre premier composant est maintenant créé, il est prêt à l’emploi ! 4 Validez. Le composant apparaît alors dans le volet "Assistants, Exemples et Composants" (bouton "Composants", rubrique "Composants personnels").

Partie 9 : Gestion de projet avancée

407

GAF_WebDev.book Page 408 Lundi, 15. décembre 2008 5:31 17

408

Etape 2 : Utilisation du composant Une fois créé, votre composant est alors utilisable dans n’importe quel autre projet WebDev. Nous allons maintenant voir comment réutiliser ce composant. le projet "ImagePASS_Utilisation.WWP". Ce projet est disponible dans le sous-réper4 Ouvrez toire "Autoformation\Exercice\Composant_Autoformation\ImagePASS_Utilisation" du réper-

Notes

toire d’installation de WebDev. Si vous ne voulez pas suivre les différentes étapes de la création du composant, vous trouverez dans le répertoire "\Autoformation\Corriges\Composant autoformation" de WebDev, le projet contenant le composant généré et le projet d’utilisation du composant.

l’éditeur de projet, sélectionnez l’option "Atelier .. Composant .. Importer un composant 4 Dans dans le projet .. À partir d’un fichier". le répertoire du projet "ImagePASS_Composant", sélectionnez le sous-répertoire EXE, 4 Dans puis le fichier "ImagePASS_Autoformation.WDI". Partie 9 : Gestion de projet avancée

4 Après avoir cliqué sur "Ouvrir", la description de notre composant s’est affichée :

4 Validez. allons maintenant modifier le code de l’exemple pour prendre en compte le composant : 4 Nous •Dans le code de la procédure locale GenerationImagePass (serveur) de la page PAGE_Inscription, enlevez le commentaire (ligne concernant la génération de l’image PASS). •Dans le code de la procédure locale _ControleImagePass (navigateur) de la page PAGE_Inscription, enlevez le commentaire (ligne concernant le contrôle du code saisi).

GAF_WebDev.book Page 409 Lundi, 15. décembre 2008 5:31 17

409

4 Testez le projet.

Et c’est terminé ! Simple n’est-ce pas ? Vous savez désormais créer un composant et le réutiliser dans vos projets WebDev. Mais vous pourriez également décider de gérer des procédures d’installation de vos composants, pour, par exemple, les redistribuer séparément de vos sites.

Distribuer un composant

Distribution simple Vous devez dans ce cas fournir tous les fichiers nécessaires au bon fonctionnement de votre composant. Ces fichiers sont créés à la génération du composant (fichiers WDI, WDK, WDO, images, autres documents, ...). Ces fichiers seront copiés manuellement de leur répertoire d’origine vers le répertoire de destination. Les projets WebDev qui utiliseront ce composant, iront chercher les fichiers dépendants dans ce répertoire de destination. Liste des fichiers à fournir pour une distribution simple : • les fichiers générés automatiquement par WebDev (WDK, WDI, ...). • les fichiers de dépendances. • si le composant utilise des fichiers de dépendances, il faudra fournir le fichier WDO. Ce fichier contient les références aux différents fichiers externes utilisés dans le composant. Distribution professionnelle La diffusion des composants à l'aide d'une procédure d'installation consiste à fournir aux utilisateurs du composant WebDev, un programme d'installation. Ce programme installe tous les fichiers nécessaires à l'utilisation du composant dans le répertoire spécifié par l'utilisateur. Ce mode d'installation permet de gérer automatiquement : • le fichier WDO et l'installation des fichiers supplémentaires utilisés par le composant. • l'installation automatique d'outils nécessaires (MDAC, driver ODBC pour HyperFileSQL, ...). • la mise à jour automatique des fichiers de données utilisés par le composant (si nécessaire). • la désinstallation du composant. sur le projet "ImagePASS_Composant". Pour créer l’installation, sélectionnez l’option 4 Revenez "Atelier .. Composant .. Créer la procédure d’installation d’un composant". L’assistant de création d’installation du composant se lance. Nous ne détaillerons pas les différents modes d’installation d’un composant. Suivez les instructions de l’assistant. Si vous souhaitez obtenir plus de détails concernant l’installation de composants, consultez l’aide en ligne (mot-clé : "Composant, Distribuer un composant"). Quelques composants livrés en standard avec WebDev 14 : • Gestion de logins • PayBox • Diagramme de Gantt • Gestion de panier

• Moteur de recherche • Demande de documentation • Image PASS

Partie 9 : Gestion de projet avancée

Vous avez deux choix possibles pour distribuer un composant : 1. Fournir les fichiers nécessaires "manuellement", c’est une distribution "simple". 2. Créer une distribution plus "professionnelle", grâce à l’éditeur d’installation de WebDev.

GAF_WebDev.book Page 410 Lundi, 15. décembre 2008 5:31 17

410

LEÇON 9.8. MULTI-CONFIGURATIONS Ce que vous allez apprendre dans cette leçon ... • Présentation • Utiliser un même projet pour différentes configurations

Partie 9 : Gestion de projet avancée

Durée estimée : 20mn

GAF_WebDev.book Page 411 Lundi, 15. décembre 2008 5:31 17

411

Présentation Vous avez créé un site, et vous voulez créer un composant à partir de certaines pages du projet ? Votre projet contient des procédures qui pourraient être utilisées dans un service Web ? Comment ne pas multiplier les projets ? Un seul projet et plusieurs destinations possibles, voilà le défi résolu grâce aux configurations de projet WebDev. Les configurations de projet permettent de créer à partir d’un même projet plusieurs "cibles" différentes. À tout moment, vous pouvez choisir la configuration sur laquelle vous travaillez, et générer en une seule opération tous les éléments pour toutes les configurations d’un projet. Un exemple pratique ? Nous allons tester les configurations de projet sur notre application complète.

Nous allons créer une configuration de projet afin de créer un composant à partir du projet "Ma_Bibliotheque". Pour créer la configuration de projet : 1. Sélectionnez l’option "Fichier .. Ouvrir un projet". 2. Sélectionnez votre projet "Ma_Bibliotheque" ou bien le projet "Ma_Bibliotheque.WWP" disponible dans le sous-répertoire "\Autoformation\Corriges\Ma_Bibliotheque" de WebDev 14. 3. Dans le volet "Explorateur", sélectionnez l’option "Configurations (Ma_Bibliotheque)". 4. Dans le menu contextuel, sélectionnez "Nouvelle Configuration". L’assistant de création d’une configuration de projet se lance. 5. Dans les informations générales de la configuration de projet, indiquez le nom, la description, et le type de génération (Composant test, test, composant pour notre exemple).

Passez à l’écran suivant. 6. Indiquez pour quels produits le composant pourra être utilisé (WebDev). Passez à l’écran suivant.

Partie 9 : Gestion de projet avancée

Création d’une configuration de projet

GAF_WebDev.book Page 412 Lundi, 15. décembre 2008 5:31 17

412

7. Indiquez les éléments à intégrer dans la configuration. Pour notre exemple, intégrez deux pages. Passez à l’écran suivant. 8. Validez la création de la configuration. 9. L’assistant de génération de l’objet de la configuration (dans notre cas, le composant) se lance automatiquement. 10. Poursuivez l’assistant pour créer le composant. 11. A la fin de l’assistant, la configuration "Composant test" est automatiquement sélectionnée dans le volet "Explorateur". Sélectionnez la configuration "Ma_Bibliotheque" puis l’option "Activer cette configuration" du menu contextuel.

Partie 9 : Gestion de projet avancée

Gestion des configurations de projet L’option "Projet .. Configurations de projet .. Gestion des configurations" permet de définir toutes les options des configurations de projet. Il est possible de : • Créer une nouvelle configuration ou supprimer une configuration existante. • Générer une configuration • Paramétrer le mode test • Obtenir la description de l’élément principal de la configuration • Paramétrer des actions avant et après génération (comme par exemple la copie de l’élément dans un répertoire spécifique).

Génération multiple Nous avons vu comment générer une configuration, mais bien souvent, après une modification, il est nécessaire de générer les éléments correspondants à toutes les configurations définies sur le projet. Pour cela, il suffit d’utiliser l’option "Atelier .. Génération multiple". Il suffit de sélectionner les éléments à générer. Cette génération sera effectuée en une seule opération.

GAF_WebDev.book Page 413 Lundi, 15. décembre 2008 5:31 17

413

LEÇON 9.9. LE DÉBOGUEUR Ce que vous allez apprendre dans cette leçon ... • Présentation • Déboguer un élément du projet • Déboguer un projet • Options avancées

Partie 9 : Gestion de projet avancée

Durée estimée : 20mn

GAF_WebDev.book Page 414 Lundi, 15. décembre 2008 5:31 17

414

Présentation Lors de la réalisation d’un site complet (projet Ma Bibliothèque de la partie 2), nous avons effectué plusieurs tests : tests de pages, tests de requêtes, tests d’états, ... Une erreur apparaît et vous n’arrivez pas à trouver la cause ? WebDev permet d’aller plus loin dans les tests, en permettant de suivre pas à pas l’exécution d’un programme : vous visualisez et vous validez toutes les lignes de code qui sont exécutées grâce au débogueur. Le débogueur vous permet pendant l’exécution de votre site, de connaître les valeurs des différentes variables utilisées, d’exécuter certains traitements, de réexécuter des lignes de code. Il est même possible de modifier des lignes de code tout en déboguant. Le débogueur peut être utilisé en développement (pour trouver la cause d’un problème pendant la phase de développement), ou en exécution : il est possible de déboguer un site lancé sur le poste ou sur un autre poste, un composant, ... Ces fonctionnalités vous intéressent ? Passons aux choses sérieuses et testons directement ces fonctionnalités.

Lancer le débogueur Nous avons vu que pour lancer le test d’une page, il suffit d’utiliser l’icône GO (le raccourci [F9] ou l’option "Code .. Tester la page"). Pour déboguer une page, il suffit de lancer le débogueur. Si vous connaissez le code qui cause l’erreur dans votre page, vous pouvez lancer le débogueur à partir d’une ligne de code spécifique : vous pouvez poser un point d’arrêt ou utiliser l’instruction STOP. Par exemple, nous allons lancer le débogueur sur une des pages de notre site développé dans la partie 2 : 1. Ouvrez le projet "Ma_Bibliotheque". Si vous n’avez pas réalisé le projet, le corrigé est disponible dans le sous-répertoire "\Autoformation\Corriges\Ma_Bibliotheque". 2. Ouvrez la page "PAGE_Livre". 3. Affichez le code du bouton de recherche à l’identique (BTN_Identique). 4. Cliquez avec la souris dans la colonne jaune précédant la première ligne de code. Un point rouge apparaît : c’est un point d’arrêt.

En test, le débogueur sera activé dès l’exécution de la (ou les) ligne(s) contenant un point d’arrêt. Notes

Partie 9 : Gestion de projet avancée

Déboguer une page

Le mot-clé STOP a le même effet que le point d’arrêt. Comme le point d’arrêt, il n’est pas pris en compte dans l’exécutable.

5. Le point d’arrêt étant posé, lançons le test de notre page (icône

GAF_WebDev.book Page 415 Lundi, 15. décembre 2008 5:31 17

415

6. Sélectionnez un élément dans la combo. 7. Cliquez sur le bouton "Recherche identique". 8. L’éditeur de code apparaît en mode débogage. Nous allons maintenant détailler les informations affichées sous le débogueur. Visualiser les informations sous le débogueur En mode débogage, l’éditeur de code est un petit peu modifié. Une barre d’outils spécifique au débogage est affichée, et le volet "Débogueur" est automatiquement affiché.

Suivons les premières lignes de débogage : 1. Dans l’éditeur de code, la flèche jaune indique la ligne qui va être exécutée. 2. Utilisez la touche [F7]. La ligne est exécutée. La flèche jaune passe à la ligne suivante. 3. Positionnez le curseur de souris sur la ligne "FIN". 4. Utilisez la touche [F6]. Toutes les lignes sont exécutées jusqu’au curseur. Nous allons maintenant voir les valeurs des variables utilisées : • Les variables manipulées dans le code sont automatiquement visualisées dans le volet "Débogueur". Leur valeur est automatiquement affichée. • Pour connaître la valeur d’une variable présente dans le code, il suffit de la survoler avec le curseur de la souris : la valeur apparaît dans une bulle d’aide.

Partie 9 : Gestion de projet avancée

L’éditeur de code va permettre de suivre ligne par ligne l’exécution du code. Le volet "Débogueur" va permettre de suivre les valeurs prises par les différentes variables manipulées par le code.

GAF_WebDev.book Page 416 Lundi, 15. décembre 2008 5:31 17

416

• Pour ajouter une expression dans le volet "Débogueur", il suffit de sélectionner l’expression dans l’éditeur de code, et de sélectionner l’option "Ajouter l’expression dans le débogueur" du menu contextuel de l’éditeur de code. Lorsque l’utilisation du débogueur n’est plus nécessaire, vous pouvez : • utiliser la touche [F5] pour continuer l’application sans utiliser le débogueur. • utiliser la touche [SHIFT + F5] pour arrêter le test. Dans ce cas, l’éditeur de code sera ré-affiché en mode normal sur le code en cours d’exécution. Nous avons vu ici les points les plus importants du débogueur. De nombreuses options sont également disponibles, comme les expressions auto-stop, la modification de code pendant le débogage, ... Nous vous conseillons de consulter l’aide en ligne pour plus de détails (mot-clé : "Débogueur").

Pour déboguer un projet, il est également possible d’utiliser la fonction WLangage Trace. Cette fonction permet d’afficher dans une "fenêtre de trace" toutes les informations que vous voulez. Par exemple, il est possible d’afficher la valeur d’une variable, un message pour savoir par où passe l’application, ... Lors du GO (du projet, de la page, ...), lorsque la fonction Trace est rencontrée, la fenêtre de trace s’affiche automatiquement. Lorsque le test se termine, cette fenêtre disparaît. Cependant, vous pouvez retrouver les informations affichées dans la fenêtre de trace grâce au volet "Trace du débogueur". Ce volet affiche toutes les informations affichées pendant le test avec la fonction "Trace". Un clic sur une des lignes du volet de trace permet d’accéder automatiquement à la ligne de code correspondante.

Notes

Partie 9 : Gestion de projet avancée

Fenêtre de trace du débogueur

Une erreur survient pendant le test de votre application ? Vous n’avez pas le temps de noter les informations affichées ? Pas de problème, le volet de trace a mémorisé ces informations. Un double-clic sur le message d’erreur permet d’obtenir toutes les informations détaillées.

Déboguer un projet Nous venons de voir comment déboguer une page, mais il est également possible de déboguer le projet dans son ensemble. Dans ce cas, les paramètres spécifiés dans l’option "Projet .. Mode Test .. Paramétrage du mode test" sont pris automatiquement en compte. Le débogueur de WebDev est un outil puissant, permettant de déboguer de nombreux cas. Il est ainsi possible de déboguer : • un composant, par exemple depuis un projet qui utilise le composant. • un site dynamique WebDev (sur le poste en cours ou sur une machine distante) • un site déjà lancé (sur le poste en cours ou sur une machine distante), ... Pour plus de détails, consultez l’aide en ligne (mot-clé : "Débogueur").

GAF_WebDev.book Page 417 Lundi, 15. décembre 2008 5:31 17

417

LEÇON 9.10. L’ANALYSEUR DE PERFORMANCES Ce que vous allez apprendre dans cette leçon ... • Présentation de l’analyseur de performances. • Utilisation de l’analyseur de performances.

Partie 9 : Gestion de projet avancée

Durée estimée : 20mn

GAF_WebDev.book Page 418 Lundi, 15. décembre 2008 5:31 17

418

Présentation L’analyseur de performances est un outil permettant de vérifier et d'optimiser le temps d’exécution de votre site. Il est conseillé d'utiliser l’analyseur de performances pour optimiser votre projet (avant sa diffusion par exemple). Son principe est simple : Vous testez votre site. Pendant ce test, l’analyseur de performances répertorie toutes les actions et traitements exécutés. À la fin du test, l'analyseur de performances vous présente : • les 10 traitements qui ont pris le plus de temps • toutes les actions effectuées dans le site testé, triées par durée (de l’action la plus longue à l’action la moins longue). Il est possible de sélectionner en particulier un traitement afin d’analyser les causes d’un temps de traitement trop important.

Partie 9 : Gestion de projet avancée

Utiliser l’analyseur de performances L’analyseur de performances peut être lancé : • directement depuis l'éditeur de WebDev (option "Projet .. Performances et améliorations .. Analyser les performances"). Dans ce cas, le projet est alors automatiquement exécuté en mode test. Vous pouvez manipuler votre site et lancer les traitements de votre choix. Pour revenir sous l'éditeur WebDev, il suffit de quitter votre site. L’analyseur de performances affiche alors le résultat de l'analyse. Ce résultat est enregistré sous forme d'un fichier WPF. • depuis un de vos traitements en WLangage, grâce aux fonctions suivantes : AnalyseurDébut

Lance la "collecte d'informations" pour l'analyseur de performances.

AnalyseurFin

Arrête la "collecte d'informations" pour l'analyseur de performances.

Dans ce cas, seul le code présent entre les fonctions AnalyseurDébut et AnalyseurFin est analysé. Le fichier WPF correspondant peut être ouvert dans l'analyseur de performances (option "Projet .. Performances et améliorations .. Rapport de performances .. Ouvrir un rapport de performances"). Par défaut, l’analyseur de performances enregistre les statistiques réalisées sur le code de l’application dans un fichier <Nom du Projet>.WPF. Pour changer ce nom, cliquez sur le bouton "Enregistrer sous ..." dans l’analyseur de performances. Pour ouvrir un fichier de statistiques spécifique (par exemple un fichier créé par programmation) : 1. Sélectionnez l'option "Projet .. Performances et améliorations .. Rapport de performances .. Ouvrir un rapport de performances". 2. Indiquez le chemin et le nom du fichier de statistiques. La liste des derniers fichiers de statistiques ouverts est présente dans le menu "Projet .. Performances et améliorations .. Rapport de performances".

GAF_WebDev.book Page 419 Lundi, 15. décembre 2008 5:31 17

419

Optimiser un traitement avec l’analyseur de performances

Les éléments affichés sont les suivants : 1. Fonction : Fonction, traitement ou procédure exécutée. 2. Temps Total : Temps d’exécution de la fonction. 3. Nb appels : Nombre d’appels effectués à la fonction (procédure ou traitement) 4. Temps 1 appel : Temps d’exécution d’un appel à la fonction (procédure ou traitement) 5. % Code : Pourcentage du temps passé dans le traitement de la fonction ou de la procédure (code du développeur pouvant être optimisé) 6. Parent : Elément qui contient le traitement. Choisir un traitement à optimiser Le choix du traitement à optimiser se fait en fonction de plusieurs critères : • le temps d'exécution du traitement. Les traitements les plus longs doivent bien entendu être optimisés. • le pourcentage de temps passé dans le traitement de la fonction ou procédure. Plus ce pourcentage est important, plus le code peut contenir des traitements pouvant être optimisés. Optimiser un traitement Lorsque le traitement à optimiser est choisi, l'analyseur de performances vous permet de connaître le détail des opérations effectuées. Pour afficher le détail des opérations effectuées dans un traitement : 1. Sélectionnez la fonction à optimiser dans l'onglet "Détail". 2. Affichez le détail de cette fonction : •soit en double-cliquant sur la fonction. •soit en cliquant sur le bouton "Appels".

Partie 9 : Gestion de projet avancée

Lire le résultat de l’analyseur de performances L'analyseur de performances présente le résultat de l'analyse dans deux onglets : • l'onglet "Synthèse" présente les 20 traitements qui ont pris le plus de temps. • l'onglet "Détail" présente tous les traitements lancés lors du test de l'application (classés du plus long au plus rapide). Pour chaque traitement, les informations suivantes sont affichées :

GAF_WebDev.book Page 420 Lundi, 15. décembre 2008 5:31 17

420

Partie 9 : Gestion de projet avancée

L'onglet suivant apparaît :

Cet onglet est divisé en trois parties : • La fonction sélectionnée (avec le nombre d'appels à cette fonction et le temps total de traitement). • La liste des fonctions appelées par la fonction sélectionnée. • La liste des fonctions appelant le traitement sélectionné. La liste des fonctions appelées permet d'affiner la recherche du traitement à optimiser. En effet, il est possible de visualiser les différentes fonctions appelées et le temps de traitement de chaque fonction. Tous les traitements contenant du code WLangage (nommé "Code du développeur") peuvent être optimisés. Un double-clic sur une des fonctions de cette liste (par exemple : "Clic sur Valider") permet de visualiser le détail des traitements appelés par cette fonction. Remarques : • Le libellé "Traitement interne au moteur d'exécution" correspond au temps d'exécution de la fonction ou de la procédure (cas d’une fonction WLangage par exemple). Ce temps est incompressible et ne peut pas être optimisé. • Le libellé "Code du développeur" correspond au temps d'exécution du code même de la fonction ou de la procédure (hors appels de sous-fonctions). Ce temps est compressible et peut être optimisé. • Pour visualiser rapidement le code du traitement en cours, il suffit de cliquer sur le bouton "Code". L’analyseur reste ouvert et vous pouvez modifier le code en cours. • Le bouton "Précédent" permet de revenir à la fonction immédiatement appelante. • Le bouton "Début" permet de revenir au traitement du début de l'application.

GAF_WebDev.book Page 421 Lundi, 15. décembre 2008 5:31 17

421

LEÇON 9.11. IMPORT/EXPORT Ce que vous allez apprendre dans cette leçon ... • Importer des éléments d’un projet dans un autre. • Exporter les éléments de votre projet. • Imports spécifiques (Projet WinDev, pages HTML, ...).

Partie 9 : Gestion de projet avancée

Durée estimée : 10mn

GAF_WebDev.book Page 422 Lundi, 15. décembre 2008 5:31 17

422

Importer des éléments Vous avez la possibilité d’importer des éléments WebDev existants dans votre projet. Vous pouvez importer tous les types d’éléments WebDev : • des pages, des états • des classes, des composants • des procédures, ... Pour importer des éléments existants dans le projet en cours : 4 1. Sélectionnez l’option "Fichier .. Importer .. Des éléments WebDev et leurs dépendances...".

4. Sélectionnez les éléments à importer, puis validez. Les éléments (et tous les fichiers utilisés par ces éléments : images, ...) font désormais partie du projet. Notes

Partie 9 : Gestion de projet avancée

2. Cliquez sur "..." et sélectionnez le répertoire où se trouvent les éléments à importer (le répertoire doit comporter des éléments WebDev). 3. Validez. WebDev liste alors les différents éléments que vous pouvez importer présents dans le répertoire spécifié (les sous-répertoires ne sont pas pris en compte).

Le bouton "Calculer" (présent dans la fenêtre d’importation) permet de calculer la taille des éléments sélectionnés avec toutes leurs dépendances.

GAF_WebDev.book Page 423 Lundi, 15. décembre 2008 5:31 17

423

Exporter des éléments

Attention !

Vous pouvez également exporter des éléments de votre projet vers un autre répertoire par exemple. Ces éléments pourront alors être réutilisés dans d’autres projets. L’exportation d’éléments est plus qu’une simple copie d’éléments. En effet, c’est le seul moyen sûr pour transmettre un élément d’un projet avec toutes ses dépendances (images, icônes ...). Une solution pratique pour transmettre des fenêtres avec leurs dépendances par e-mail, par exemple.

Pour exporter des éléments de votre projet : 4 1. Cliquez sur "Fichier .. Exporter .. Vers un répertoire...".

Notes

2. Indiquez le nom du répertoire de destination (ou sélectionnez-le avec le bouton "..."). 3. Validez. Les éléments sont alors exportés vers le répertoire indiqué. Ces éléments sont toujours disponibles dans votre projet. Le bouton "Calculer" (présent dans la fenêtre d’importation) permet de calculer la taille des éléments sélectionnés avec toutes leurs dépendances.

Partie 9 : Gestion de projet avancée

Dans la fenêtre qui s’affiche, sélectionnez les éléments de votre projet que vous souhaitez exporter.

GAF_WebDev.book Page 424 Lundi, 15. décembre 2008 5:31 17

424

Importations spécifiques

Partie 9 : Gestion de projet avancée

Importation d’un projet WinDev De plus en plus d’applications WinDev doivent être transformées en sites WebDev. Désormais, cette fonctionnalité est automatique. WebDev permet d’importer une fenêtre ou un projet WinDev entier dans un projet WebDev. Lors de cette importation : • Les fenêtres sont transformées en pages. • Les codes sont transformés en codes serveur. • L’import d’éléments sans équivalent en WebDev est effectué sous forme de commentaires ou d’éléments séparés. Pour importer un projet WinDev dans un projet WebDev : 1. Sélectionnez l’option "Fichier .. Importer .. Un projet WinDev". L’assistant d’import de projet WinDev se lance. 2. Sélectionnez le projet WinDev à importer. Ce projet ne sera pas modifié et un nouveau projet WebDev sera créé. 3. Donnez le nom et l’emplacement du projet WebDev à créer. 4. Si une analyse est liée au projet, indiquez son nom, son emplacement, et si elle doit être utilisée par le projet WebDev. 5. Indiquez les éléments à partager entre le projet WebDev et le projet WinDev (éléments communs du type Etats, Classes, ...). Si les éléments sont partagés, ils ne seront pas copiés dans le projet WebDev. 6. Validez. Le projet WinDev est converti en projet WebDev. Pour importer des éléments WinDev dans un projet WebDev : 1. Ouvrez le projet WebDev dans lequel l’élément doit être importé. 2. Sélectionnez l'option "Fichier .. Importer .. Des éléments WinDev". L’assistant d’importation se lance. Sélectionnez le projet WinDev contenant les éléments à importer ou directement les éléments WinDev à importer. Passez à l’écran suivant. 3. Indiquez les éléments à partager entre les projets WinDev et WebDev. Ces éléments ne seront pas copiés dans le projet WebDev. 4. Validez. Les éléments spécifiés sont automatiquement importés dans le projet WebDev en cours. Importation d’une page HTML Une page d’un site non WebDev vous intéresse ? Vous souhaitez récupérer son interface ? Rien de plus simple. WebDev offre la possibilité d’importer vos pages HTML existantes dans votre projet WebDev. Chaque page HTML importée devient un élément de votre site WebDev. Cette page est modifiable bien entendu !

GAF_WebDev.book Page 425 Lundi, 15. décembre 2008 5:31 17

Notes

425

La fonctionnalité d’import de page HTML est une aide apportée au développeur de sites WebDev. Il ne s’agit en aucun cas d’une fonctionnalité d’"aspiration" de sites Internet. Il peut toutefois subsister certaines différences d’affichage entre la page HTML avant importation et après importation.

3. Indiquez l’emplacement de la page HTML. Cette page peut être un fichier présent sur votre poste (bouton "...") ou une adresse Internet (par exemple : http://www.monsitewebdev.fr/ mapage.html). La page HTML s’affiche dans le cadre "Aperçu de la page". 4. Validez. Une nouvelle page WebDev vient d’être créée. 5. Enregistrez la page. La page est automatiquement ajoutée à la liste des éléments de votre projet.

Partie 9 : Gestion de projet avancée

Pour importer une page HTML dans un projet WebDev : 1. Ouvrez votre projet WebDev (par exemple : un projet existant ou un nouveau projet). 2. Sélectionnez l’option "Fichier .. Importer .. Une page HTML...". L’assistant d’importation de pages HTML se lance.

GAF_WebDev.book Page 426 Lundi, 15. décembre 2008 5:31 17

426

LEÇON 9.12. UML ET 3-TIERS Ce que vous allez apprendre dans cette leçon ... • Qu’est-ce que le UML ? • Les différents types de diagrammes gérés par WebDev.

Partie 9 : Gestion de projet avancée

Durée estimée : 5 mn

GAF_WebDev.book Page 427 Lundi, 15. décembre 2008 5:31 17

427

Qu’est-ce que UML ?

Note

UML (Unified Modeling Language) est une norme de modélisation permettant de "modéliser" des traitements. Configuration nécessaire Pour utiliser les diagrammes UML proposés par WebDev, la fonctionnalité UML doit être activée dans votre configuration. Nous vous conseillons d’utiliser l’environnement en mode complet. Pour plus de détails, consultez “Configuration nécessaire”, page 363.

Diagramme de classes Le diagramme de classes permet de modéliser la structure d’un système et des relations entre les différents éléments composant ce système. Il est principalement utilisé en POO. Avec WebDev, grâce au dessin d’un diagramme de classe UML, vous pourrez automatiquement générer les classes et les méthodes qui en découlent. Utilisable en rétro-analyse ("reverse engineering"), vous pourrez alors avoir un aperçu visuel des relations entre les différentes classes que vous aurez créées. Diagramme de cas d’utilisation Utilisable une fois le cahier des charges établi (en phase de pré-projet), le diagramme de cas d’utilisation permet d’établir de façon claire et visuelle le comportement de votre projet (correspondance entre les implémentations des demandes des utilisateurs par les développeurs, ...). On nomme parfois ce type de diagramme, "un diagramme de séquence" (sans chronologie particulière). Il n’est pas possible de générer une application à partir de ce type de diagramme. Ce type de diagramme sert uniquement lors de la mise en place de la gestion de projet. Diagramme d’objets Un diagramme d’objets représente un ensemble d’objets et leurs relations à un moment donné. Un diagramme d’objets est utilisé pour montrer un contexte (avant ou après une interaction entre objets par exemple). Diagramme de composants Un diagramme de composants décrit l'architecture physique et statique d'une application informatique. Par exemple : fichiers sources, librairies, exécutables, ... Diagramme d’activité Un diagramme d’activité représente le comportement d’une méthode ou le déroulement d’un cas d’utilisation. Diagramme de séquence Un diagramme de séquence représente l’ordre chronologique des messages envoyés et reçus par un ensemble d’objets.

Partie 9 : Gestion de projet avancée

Les diagrammes gérés par WebDev

GAF_WebDev.book Page 428 Lundi, 15. décembre 2008 5:31 17

428

Diagramme de collaboration Un diagramme de collaboration présente l’organisation structurelle des objets qui envoient et reçoivent des messages. Diagramme d’états-transitions Un diagramme d’états-transitions présente un automate à états finis. Il permet ainsi de décrire les changements d'états d'un objet ou d'un composant. Un état se caractérise par sa durée et 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énement déclencheur est spécifié. Diagramme de déploiement Un diagramme de déploiement montre la répartition physique des matériels (les noeuds) utilisés dans un système et l’association des programmes exécutables à ces matériels.

Partie 9 : Gestion de projet avancée

Nous ne détaillerons pas plus l’utilisation du langage UML avec WebDev. Consultez l’aide en ligne pour plus d’informations (mot-clé : "UML").

3-Tiers Le 3 tiers, c'est quoi ? Le développement en architecture "3-tiers" est maintenant simplifié avec WebDev. Le but du 3 tiers est de séparer les 3 couches habituelles d'une application : IHM, Traitements et données. Une application sera composée de 3 couches indépendantes : • couche présentation • couche Traitements • couche d'accès aux données. Ces 3 couches communiqueront entre elles à l'aide de fonctions spécifiques (des API dans les langages traditionnels, des fonctions avancées en WLangage). Cette séparation a pour but de rendre indépendantes chacune des couches afin de simplifier la maintenance et les évolutions futures de l'application (par exemple, changement de système de base de données, portage d'un environnement graphique à un autre, ...). Elle assure une sécurité plus importante car l'accès à la base de données n'est autorisé que par la couche Traitements. Elle a également l'avantage d'optimiser le travail en équipe et le développement multi-cibles.

GAF_WebDev.book Page 429 Lundi, 15. décembre 2008 5:31 17

429

1. Vous choisissez les sources de données (fichiers ou requêtes que vous désirez manipuler en 3Tiers). Vous créez sous l'éditeur d'analyses et l'éditeur de requêtes les différents fichiers et requêtes nécessaires. 2. WebDev construit automatiquement le diagramme de classes qui correspond aux classes et structures qui vont être générées. Pour cela, sous l'éditeur d'analyses, sélectionnez l'option "Analyse .. Générer le diagramme UML correspondant à l'analyse". Il est également possible, dans l'éditeur d'UML de créer un diagramme de classes correspondant à l'analyse (Option "Fichier .. Nouveau .. UML .. Diagramme de classe .. Construire le diagramme de classe correspondant à l'analyse et aux requêtes"). Choisissez le type de code à générer (procédural ou objet) 3. Les classes et structures sont générées en WLangage. Fermez le modèle UML et sélectionnez l'option "Atelier .. Modélisation UML .. Générer le code". Les collections de procédures et/ou les classes sont automatiquement générées. 4. Vous pouvez apporter une "valeur ajoutée" en développant vos propres méthodes dans ces classes. La synchronisation entre les classes et le diagramme est effectuée en temps réel. Il est également possible de modifier l'analyse, et de synchroniser le diagramme UML avec l'analyse. 5. Il ne vous reste plus qu'à utiliser ces classes ou structures pour faire circuler les informations entre la couche "Traitement" et la couche "Présentation". Manipulation des différentes couches • Pour la couche "Accès aux données" : Vous manipulez les ordres d'accès aux données habituels : lecture, écriture, requêtes, transactions, ... • Pour la couche "Traitements" : Des fonctions WLangage spécifiques peuvent être utilisées : FichierVersMémoire et MémoireVersFichier. Ces fonctions permettent de remplir les membres de la classe à partir des rubriques des fichiers correspondants, et inversement. • Pour la couche "Présentation" : Vous manipulez les classes générées, sans vous soucier de la structure de la base de données. Pour la communication entre les couches : Suivant le protocole de communication entre les 2 couches (composant, service Web, HTTP, Site WebDev, ...), les classes peuvent être sérialisées en XML ou dans un format binaire (Fonctions Sérialise et Désérialise).

Partie 9 : Gestion de projet avancée

Comment mettre en oeuvre le 3 tiers ? Le dialogue entre les différentes couches s'effectue par classes ou par structures (à votre choix) qui sont générées automatiquement par WebDev.

GAF_WebDev.book Page 430 Lundi, 15. décembre 2008 5:31 17

430

LEÇON 9.13. MODÉLISATION SOUPLE Ce que vous allez apprendre dans cette leçon ... • Principe • Manipulation

Partie 9 : Gestion de projet avancée

Durée estimée : 20mn

GAF_WebDev.book Page 431 Lundi, 15. décembre 2008 5:31 17

431

Principe L’éditeur de modélisation permet de représenter toutes les organisations, existantes ou à venir. L’éditeur de modélisation peut par exemple vous permettre de représenter l’organisation de la gestion des mails dans votre entreprise, l’organisation des contacts clients, ... Pour mieux connaître les possibilités de l’éditeur de modélisation, nous vous avons préparé un exemple de modélisation. Cette modélisation représente une partie de l’ERP (Entreprise Ressource Planning) de l’entreprise fictive H2M.

Manipulations le projet "Modelisation_WB.WWP". Ce projet est présent dans le sous-répertoire "Aufor4 Ouvrez mation\Corriges\Modelisation_WB" du répertoire d’installation de WebDev 14. le fichier "H2M.ERP.wem" (option "Fichier .. Ouvrir" ou en double-cliquant sur la modéli4 Ouvrez sation dans le volet "Explorateur").

L’icône signale qu’une sous-modélisation est présente. En double-cliquant sur cette icône, vous accédez à cette sous-modélisation.

Partie 9 : Gestion de projet avancée

Dans cette modélisation, vous constatez que plusieurs grands domaines sont présents : Gestion des clients, des devis, marketing, ...

GAF_WebDev.book Page 432 Lundi, 15. décembre 2008 5:31 17

432

Partie 9 : Gestion de projet avancée

notre exemple, ouvrez la sous-modélisation correspondant à la gestion des devis. Vous 4 Dans retrouvez les différentes étapes de la gestion des devis :

en détail l’élément "Base du siège". Une flèche est présente en haut à gauche de 4 Regardons cet élément. Cette flèche indique une liaison. Si vous double-cliquez sur la flèche, l’analyse de l’application s’ouvre automatiquement. C’est une fonctionnalité importante de l’éditeur de modélisation : tout élément de la modélisation peut être lié à un élément de votre projet (fenêtre, code, ...). les éléments de la modélisation ont des caractéristiques. Ces caractéristiques peuvent 4 Tous être affichées en sélectionnant l’option "Description" du menu contextuel de l’élément. Par exemple :

GAF_WebDev.book Page 433 Lundi, 15. décembre 2008 5:31 17

433

Cette fenêtre permet d’indiquer : • la liaison de l’élément avec un fichier externe (analyse, fenêtre, ...) • le niveau d’automatisme de l’élément : traitement réalisé automatiquement, manuellement, ... • les acteurs intervenant dans ce traitement (responsable, utilisateurs, développeurs, ...). Ces informations peuvent provenir directement des intervenants décrits au niveau du Centre de Suivi de Projets.

Partie 9 : Gestion de projet avancée

Pour plus de détails sur l’éditeur de modélisation, consultez l’aide en ligne.

GAF_WebDev.book Page 434 Lundi, 15. décembre 2008 5:31 17

434

LEÇON 9.14. MULTILANGUE Ce que vous allez apprendre dans cette leçon ... • Qu’est-ce qu’un site multilingue ? • Etape par étape, création d’un site multilingue.

Partie 9 : Gestion de projet avancée

Durée estimée : 20mn

GAF_WebDev.book Page 435 Lundi, 15. décembre 2008 5:31 17

435

Qu’est-ce qu’un site multi-langue ?

Les principales étapes d’un projet multi-langue sont : • Le choix des langues du projet. • L’internationalisation de l’analyse. • L’internationalisation des éléments du projet (page, états, champs, ...). • L’internationalisation des messages présents dans le code. • L’internationalisation des fonctions WLangage. • La programmation du changement de langue dans le site. Nous allons appliquer ces différentes étapes au projet "Annuaire_Multilingue". Ce projet, disponible en Français, va être traduit en Anglais et en Arabe. La version complète de ce projet multi-langues est disponible dans le sous-répertoire "\Autoformation\Corriges\Multilingue".

Choix des langues du projet le projet "Annuaire_Multilingue.WWP" (option "? .. Guide d’auto-formation .. Site multi4 Ouvrez lingue"). Ce projet est présent dans le sous-répertoire "Autoformation\Corriges\Multilingue" du répertoire d’installation de WebDev 14. L’analyse associée est "Annuaire". Vous pouvez vérifier cette information dans la description du projet (option "Projet .. Description du projet", onglet "Analyse"). La première opération consiste à choisir les langues du projet.

4 Affichez la description du projet si ce n’est déjà fait (option "Projet .. Description du projet"). sur l’onglet "Langues". Notre application va gérer le Français et l’Anglais : sélectionnez 4 Cliquez ces deux langues. onglet permet également de paramétrer les options linguistiques concernant les nombres, 4 Cet les monétaires, les dates, ... pour la langue sélectionnée. Voyons un exemple : • Cliquez sur la langue "Anglais". • Cliquez sur "Date". • Par défaut, les options linguistiques de Windows sont utilisées. Si vous sélectionnez l’option "Utiliser les paramètres suivants", il est possible de définir le format de date utilisé ainsi que la traduction des jours et des mois. • Conservez l’option "Utiliser les paramètres définis dans les options linguistiques de Windows".

Partie 9 : Gestion de projet avancée

Un site multi-langue est un site qui peut s’exécuter dans différentes langues (anglais, français, allemand ou dans une autre langue). Un seul et même site peut donc être utilisé dans plusieurs langues. Mais comment est-ce possible ? C’est ce que nous allons voir dans cette leçon. Nous allons manipuler un projet qui pourra s’exécuter en français ou en anglais, selon le choix de l’internaute.

GAF_WebDev.book Page 436 Lundi, 15. décembre 2008 5:31 17

4 Validez. Notes

Partie 9 : Gestion de projet avancée

436

Dans les options linguistiques, il est possible de choisir le sens d’écriture de la langue (case "Divers", option "Sens d’écriture"). Il est ainsi possible de créer des interfaces avec une langue s’écrivant de droite à gauche.

Internationalisation de l’analyse Par défaut, une analyse est créée dans une langue et ne peut pas être traduite. Cependant, certaines informations peuvent être saisies dans plusieurs langues (notes du dossier, informations partagées, ...). Les champs créés à partir des rubriques de l’analyse ont par défaut le libellé de la rubrique spécifié dans l’analyse. Si un libellé a été spécifié dans les informations partagées de la rubrique, ce libellé sera utilisé lors de la création du champ. Pour gérer plusieurs langues dans une analyse : 1. Affichez l’éditeur d’analyses (option "Projet .. Charger l’analyse"). 2. Dans la description de l’analyse (option "Analyse .. Description de l’analyse"), sélectionnez l’onglet "International".

GAF_WebDev.book Page 437 Lundi, 15. décembre 2008 5:31 17

437

Pour saisir les informations partagées dans plusieurs langues : 1. Affichez la description des rubriques d’un fichier (option "Structure de fichiers .. Rubriques.."). 2. Pour chaque rubrique, affichez les paramètres du champ relié à la rubrique sélectionnée (informations partagées). Pour cela, cliquez sur la double flèche en bas de l’écran.

Partie 9 : Gestion de projet avancée

3. Indiquez les différentes langues gérées par l’analyse et validez.

GAF_WebDev.book Page 438 Lundi, 15. décembre 2008 5:31 17

438

Internationalisation des éléments du projet Tous les éléments du projet peuvent devenir multilingues : pages, états, ... Regardons tout d’abord les caractéristiques d’une page et de ses champs.

4 Ouvrez la page "PAGE_Condition.WWH". la description de la page (option "Description" du menu contextuel de la page). Sélec4 Affichez tionnez l’onglet "Langue" : les deux langues sélectionnées dans le projet apparaissent.

Partie 9 : Gestion de projet avancée

Sélectionnez l’onglet "Général" : le titre de la page doit être traduit.

Fermez cette fenêtre. la description du lien "Retour". L’onglet "Général" présente également la traduction du 4 Affichez libellé du lien. la description du champ "Conditions Générales". Ce champ est une image. L’image 4 Affichez contenant un libellé à traduire, une image différente est utilisée pour chaque langue. Dans le champ "Image", le libellé "<Valeurs multi-langues>" indique l’utilisation d’une image différente par langue. Cliquez sur l’icône .

GAF_WebDev.book Page 439 Lundi, 15. décembre 2008 5:31 17

439

La liste des différents fichiers utilisés est affichée :

• Le libellé du champ (nous l’avons déjà vu) • L’image associée au champ (nous venons de le voir) • Le texte alternatif (onglet "Détail" de la description du champ). Ce texte est utilisé en cas de problème d’affichage (par exemple pour une image). • Le texte de la bulle d’aide (onglet "Aide" de la description du champ). • Le texte d’indication affiché lorsque le champ est vide (onglet "Contenu" des champs de saisie). Le même type d’informations est également à traduire pour : • tous les champs des pages • les pages • les états, • les champs des états • les messages texte présents dans l’éditeur de code. Comment traduire toutes ces informations ? Pour traduire ces informations, WebDev met plusieurs moyens à votre disposition : • une traduction directe des messages dans les différents éditeurs. • une traduction réalisée grâce à un outil externe (WDMSG et WDTRAD) Saisie directe des traductions Les traductions sont directement saisies dans l’interface du produit. Par exemple, le libellé du lien "Retour" devient "Back" en anglais. Il suffit d’ouvrir la fenêtre de description du champ et de saisir dans la langue voulue la traduction correspondante. Si vous disposez d’un logiciel de traduction ou d’un site de traduction, vous pouvez configurer WebDev pour utiliser ce logiciel : 1. Sélectionnez l’option "Outils .. Options .. Options générales de WebDev". 2. Affichez l’onglet "Traduction".

Partie 9 : Gestion de projet avancée

la description d’un champ d’une page, plusieurs éléments doivent être pris en compte 4 Dans lors de la traduction :

GAF_WebDev.book Page 440 Lundi, 15. décembre 2008 5:31 17

440

3. Spécifiez : •Si les paramètres régionaux doivent être automatiquement activés selon la langue en cours de saisie. Dans ce cas, si la langue nécessite un alphabet spécifique, cet alphabet sera automatiquement sélectionné. •Le logiciel ou le site à utiliser pour la traduction. •Les langues gérées. 4. Lorsque les paramètres de traductions sont définis, il est possible d’utiliser le bouton pour utiliser le logiciel défini pour la traduction.

Partie 9 : Gestion de projet avancée

Cas particuliers Traduction directe des menus La traduction des options d’un menu déroulant peut être réalisée directement à partir de l’éditeur de pages. Pour traduire le menu d’une page : 1. Ouvrez la page contenant le menu déroulant. 2. Sélectionnez l’option "Affichage .. Langue affichée..." et sélectionnez la langue à visualiser sous l’éditeur. Les options de menu s’affichent dans la langue sélectionnée. Si aucune traduction ne correspond à la langue sélectionnée, les options de menu s’affichent en français. 3. Saisissez directement le libellé des options de menu dans la langue sélectionnée. Traduction directe des messages de programmation Tous les messages de votre programme peuvent également être saisis dans plusieurs langues.

Pour traduire ce type de message, utilisez l’option "Code .. Messages multilangues .. Traduction des messages". La fenêtre suivante apparaît :

GAF_WebDev.book Page 441 Lundi, 15. décembre 2008 5:31 17

441

Cette fenêtre permet de saisir tous les messages de votre programme dans toutes les langues du projet. Un numéro est attribué à chaque message. Lorsqu’une traduction est saisie pour le message, l’icône apparaît sous l’éditeur de code.

Pour obtenir plus d’informations sur WDINT, contactez le Service Commercial de PC SOFT. Traduction avec WDMSG et WDTRAD Il existe également un outil nommé WDMSG (non fourni en standard avec WebDev) qui permet • d’extraire tous les messages d’un projet (libellé des champs, message de code, titre des pages, ...) pour les traduire, • de réintégrer les messages traduits. Les messages à traduire sont extraits dans un format texte, pouvant être configuré pour être utilisé avec la majorité des logiciels de traduction.

Partie 9 : Gestion de projet avancée

Traduction du résultat des fonctions WLangage et des messages d’erreurs du framework De nombreuses informations et messages sont présents dans le framework WebDev. Par exemple, les noms des jours et des mois utilisés par les fonctions de gestion des dates proviennent du framework WebDev. Pour traduire une ou plusieurs librairies de ce framework, il est nécessaire d’utiliser WDINT (non fourni en standard avec WebDev). Ce logiciel permet d’obtenir un fichier d’extension WDM. Pour utiliser ce fichier dans votre projet : • vous pouvez utiliser la fonction ChargeErreur. • vous pouvez intégrer le fichier à la description du projet (onglet "Langues", option "Traduction du Framework (WDInt)").

GAF_WebDev.book Page 442 Lundi, 15. décembre 2008 5:31 17

442

WDMSG est également fourni avec un outil d’aide à la traduction, WDTRAD. WDTRAD permet de saisir simplement toutes les traductions des informations multilingues d’un projet. Pour obtenir plus d’informations sur WDMSG et WDTRAD, contactez le Service Commercial de PC SOFT.

Programmation du changement de langue Par défaut, le projet s’exécute dans la première langue définie pour le projet (option "Projet .. Description du projet", onglet "Langues"). La fonction Nation permet de changer de langue. La sélection d’une langue dans un site s’effectue généralement par la sélection d’une langue dans une liste déroulante ou lors d’un clic sur un bouton. Dès que l’internaute a sélectionné une langue, le site se charge dans la langue sélectionnée.

Partie 9 : Gestion de projet avancée

la page "PAGE_Carnet", une liste déroulante ("COMBO_LANGUE") et un bouton 4 Dans ("BTN_CHGLNG") permettent de changer la langue. Le code associé au bouton est le suivant : - - Clic de BTN_CHGLNG (serveur) SELON COMBO_LANGUE CAS 1 //L’option "Français" est sélectionnée Nation(nationFrançais) CAS 2 //L’option "English" est sélectionnée Nation(nationAnglais) FIN PageUtilise(PageCourante())

La fonction PageUtilise permet de recharger la page passée en paramètre (la fonction PageCourante permet de connaître le nom de la page en cours). Le changement de langue effectué par la fonction Nation est donc immédiatement pris en compte. le site. 4 Testez Dans la liste déroulante "Langue", sélectionnez une langue pour modifier la langue en cours.

Gestion des alphabets spécifiques Si votre site gère des langues utilisant des alphabets spécifiques (grec, coréen, ...), il est possible de changer par programmation l'alphabet utilisé par toutes les polices écran (fonction ChangeAlphabet). Cet alphabet pourra également être utilisé pour les données enregistrées dans les fichiers HyperFileSQL. Pour plus de détails, consultez l’aide en ligne (mot-clé : Multilangue).

GAF_WebDev.book Page 443 Lundi, 15. décembre 2008 5:31 17

PARTIE 10 Déploiement de sites

GAF_WebDev.book Page 444 Lundi, 15. dĂŠcembre 2008 5:31 17

GAF_WebDev.book Page 445 Lundi, 15. décembre 2008 5:31 17

445

LEÇON 10.1. DÉPLOIEMENT D’UN SITE DYNAMIQUE Ce que vous allez apprendre dans cette leçon ... • Installation d’un Serveur d’Application WebDev - 10 connexions. • Création de l’installation. • Test du site.

Partie 10 : Déploiement

Durée estimée : 20mn

GAF_WebDev.book Page 446 Lundi, 15. décembre 2008 5:31 17

446

Présentation Lorsqu’un site WebDev est terminé, il faut déployer le site sur un serveur WEB pour qu’il soit disponible. C’est ce que nous allons faire. Il est possible de déployer un site dynamique WebDev grâce à plusieurs méthodes : 1. Déploiement par média physique (CD-ROM, ...). Ce déploiement peut être autonome : dans ce cas, l’installation installe également un serveur WEB et un serveur d’application WebDev limité. 2. Déploiement à distance directement depuis le poste de développement (par FTP). 3. Déploiement à distance depuis un poste d’administration (par FTP) à l’aide d’un "package de déploiement" Lors de l’installation de WebDev, vous avez la possibilité d’installer la version de test de WebDev déploiement. Vous avez ainsi la possibilité de tester le déploiement de vos sites dynamiques.

Partie 10 : Déploiement

Notes

Pour simplifier les manipulations du déploiement, et pour que vous puissiez directement tester le déploiement de votre site WEB, nous allons : • Installer un Serveur d’Application WebDev 10 connexions sur un poste Windows. Ce serveur d’application doit être installé sur un poste différent du poste de développement. WebDev Développement ne doit pas avoir été installé sur ce poste. • Déployer le site à distance (par FTP). Si vous possédez déjà les paramètres d’accès au serveur sur lequel votre site va être déployé, il n’est pas nécessaire d’installer le Serveur d’Application WebDev 10 Connexions. Vous pouvez réaliser l’installation directement sur le serveur par FTP.

Configuration nécessaire Le poste hébergeant le serveur d’application de test nécessite une configuration spécifique. Les éléments suivants doivent être installés sur le poste : • un serveur WEB (IIS, Apache, ...) • un serveur FTP • le Serveur d’Application WebDev - 10 connexions Pour plus de détails sur l’installation du serveur WEB et du serveur FTP, consultez la documentation des logiciels correspondants. Installation du "Serveur d’Application WebDev - 10 connexions" Le programme d’installation du "Serveur d’Application WebDev -10 connexions" est disponible : • en téléchargement sur le site www.pcsoft.fr • sur le DVD d’installation de WebDev : lancez "Menu.exe" et choisissez l’option "Installation d’un Serveur d’Application WebDev - 10 connexions".

GAF_WebDev.book Page 447 Lundi, 15. décembre 2008 5:31 17

447

Notes

Les étapes de l’installation sont les suivantes : 1. Acceptez la licence. 2. Choisissez la plate-forme "Windows". Passez à l’écran suivant. Il est également possible de déployer sur une plate-forme Linux.

Configuration du compte WebDev nécessaire au déploiement Dans l’administrateur WebDev : 1. Sélectionnez l’onglet "Administration". 2. Cliquez sur le bouton "Comptes". Le gestionnaire de comptes WebDev se lance. 3. Pour les tests, nous allons utiliser le compte ADMIN déjà créé. Dans le cas d’une utilisation réelle, il est conseillé de créer des comptes spécifiques. 4. Sélectionnez le compte "ADMIN" et cliquez sur "Editer". 5. Sur l’onglet "Utilisateur", indiquez les valeurs suivantes : • Nombre de connexions autorisées pour tous les sites de ADMIN : 50 (chiffre supérieur à 0) • Nombre maximum de sites autorisés pour ADMIN : 50 • Répertoire de connexion FTP : C’est le répertoire dans lequel le compte FTP va se connecter pour transférer les pages du site. Indiquez par exemple "C:\Tests WB\FTP". Nous déclarerons ensuite ce répertoire sur le serveur FTP. • Répertoire de base des sites : C’est le répertoire qui va contenir les pages du site. Indiquez par exemple "C:\Tests WB\sites" • Répertoire de base des fichiers de données : C’est le répertoire qui va contenir les fichiers de données du site. Indiquez par exemple "C:\Tests WB\data". 6. Validez et si nécessaire acceptez la création des différents répertoires. 7. Fermez le gestionnaire de comptes. Création de l’alias FTP Les manipulations suivantes présentent comment créer l’alias FTP pour IIS. Vous trouverez les manipulations à effectuer pour d’autres serveurs dans l’aide en ligne. Pour créer l’alias FTP : 1. Lancez le gestionnaire de Services Internet (par exemple "Démarrer .. Exécuter .. Inetmgr.exe" pour IIS).

Partie 10 : Déploiement

3. Sélectionnez le chemin d’installation du serveur d’application (par défaut "c:\WebDev 14"). Validez la création du répertoire. 4. Choisissez une installation complète. Passez au plan suivant. 5. Validez le plan suivant sans le modifier. 6. Par défaut, le serveur WEB actif sur le poste d’installation est sélectionné. Passez au plan suivant. 7. Conserver l’option "Héberger des sites en versions antérieures" et passez à l’écran suivant. 8. Validez l’installation. 9. Sélectionnez les serveurs WEB virtuels sur lesquels le serveur d’application WebDev doit être installé. Le site WEB par défaut est suffisant. Validez. 10. Conservez les options sélectionnées et cochez l’option "Lancer l’administrateur de WebDev 14". Validez. 11. L’administrateur est automatiquement lancé.

GAF_WebDev.book Page 448 Lundi, 15. décembre 2008 5:31 17

448

2. Sélectionnez le site FTP par défaut. Créez un nouveau répertoire virtuel. Ce répertoire a pour nom par exemple "TEST" et pour chemin le répertoire indiqué dans l’administrateur WebDev ("C:\Tests WB\FTP" dans notre cas). Le répertoire virtuel doit avoir les droits en lecture et écriture. Création d’un compte utilisateur Windows Il est nécessaire de créer un compte utilisateur Windows spécifique sur le poste de déploiement. Ce compte utilisateur doit avoir le même nom que l’alias précédemment créé. Dans notre cas : • le nom sera : test • le mot de passe sera : test Ce compte utilisateur doit avoir le droit d’écriture sur le répertoire "Compte" du serveur d’application. Par défaut, ce répertoire a été installé dans "C:\WebDev 14\Compte". Pour modifier les droits de cet utilisateur, nous allons modifier la base de registres. Cette modification est réalisée à l’aide du programme "regedit.exe" (si vous utilisez un système antérieur à Windows XP, utilisez regedt32.exe). 1. Lancez l’éditeur de la base de registres. 2. Recherchez la clé suivante "HKEY_LOCAL_MACHINE\SOFTWARE\PC SOFT\WEBDEV\14.0\Applications". 3. Dans le menu contextuel de la clé, sélectionnez l’option "Autorisations". 4. Ajoutez l’utilisateur "Test" et affectez-lui le contrôle total. 5. Validez.

Partie 10 : Déploiement

Déploiement de votre site dynamique Nous allons déployer le projet "Ma_Bibliotheque" créé à la partie 2 de ce cours d’auto-formation. Si vous n’avez pas créé ce projet, une version corrigée est disponible dans le sous-répertoire "\Autoformation\Corriges\Ma_Bibliotheque" de WebDev 14. Pour ouvrir ce projet sous WebDev : 4 1. Sélectionnez l’option "Fichier .. Ouvrir un projet". 2. Sélectionnez votre projet "Ma_Bibliotheque" ou bien le projet "Ma_Bibliotheque.WWP" disponible dans le sous-répertoire "\Autoformation\Corriges\Ma_Bibliotheque" de WebDev 14. Préparation de l’installation WebDev dispose d’un assistant d’installation, permettant de diffuser facilement votre site chez un hébergeur WebDev (pour un site Internet ou Extranet par exemple) ou sur l’un de vos serveurs dédié à l’hébergement WebDev (pour un site Intranet par exemple). Vous pouvez y accéder en sélectionnant l’option "Atelier .. Créer la procédure d’installation".

GAF_WebDev.book Page 449 Lundi, 15. décembre 2008 5:31 17

449

l’écran suivant. 4 Affichez Avant de procéder à l’installation, il faut mettre en bibliothèque tous les éléments de votre

pouvez choisir d’intégrer plusieurs langues dans la bibliothèque. Dans notre exemple, 4 Vous nous conservons les options par défaut. Passez à l’écran suivant. informations sur la version de la bibliothèque permettent de saisir les éléments qui seront 4 Les affichés dans les propriétés du fichier sous l’explorateur Windows. Passez à l’écran suivant. pas la bibliothèque dans le centre de réutilisabilité. Validez la création de la 4 N’enregistrez bibliothèque. L’assistant d’installation va maintenant vous poser quelques questions pour définir de quelle manière diffuser votre site.

Partie 10 : Déploiement

site. Une bibliothèque est un fichier qui regroupe tous les éléments créés lors du développement (description de la base de données, description des pages, codes sources compilés, ...). Les pages HTML et les images ne sont pas incluses dans la bibliothèque. Passez à l’écran suivant.

GAF_WebDev.book Page 450 Lundi, 15. décembre 2008 5:31 17

450

Partie 10 : Déploiement

Vous disposez de quatre modes d’installation : • Installation sur un serveur d’application WebDev distant (par FTP), • Préparation d’un package de déploiement, • Installation par média physique (pour une installation manuelle), • Installation autonome par média physique contenant le serveur WEB et le serveur d’application WebDev. Dans notre cas, nous allons réaliser une installation distante par FTP : 4 1. Sélectionnez "Déployer le site WebDev sur un Serveur d’Application WebDev distant". Passez au plan suivant. 2. Sélectionnez "Un autre serveur". Passez au plan suivant. 3. Pour définir les paramètres du serveur, vous aurez besoin des informations suivantes fournies par votre hébergeur pour continuer. Nous allons saisir les informations correspondantes à l’installation précédemment réalisée : • Adresse du serveur (dans notre exemple, nom du poste où Serveur d’Application WebDev 10 connexions a été installé). Le nom peut être : •un nom de machine accessible par le réseau (par exemple : "ServTEST"), •une adresse IP (par exemple : 192.168.15.99), •une adresse Internet (par exemple : www.monserveur.fr). • Caractéristiques du compte utilisateur saisies par l’hébergeur dans le gestionnaire de comptes WebDev. Dans notre exemple, le nom d’utilisateur est ADMIN, et le mot de passe et sa confirmation est ADMIN. • Caractéristiques du compte FTP saisies par l’hébergeur lors de la création d’un compte FTP. Dans notre exemple, le nom d’utilisateur est "test", et le mot de passe et sa confirmation

GAF_WebDev.book Page 451 Lundi, 15. décembre 2008 5:31 17

451

Notes

sont également "test". Attention : le nom d’utilisateur peut être précédé du nom du domaine pour éviter des confusions. Par exemple : "monposte\test" ou "mondomaine\test"

Passez à l’écran suivant. 5. L’assistant vous propose alors d’inclure la modification automatique des fichiers de données dans l’installation. Vous pouvez également configurer les éléments nécessaires pour l’utilisation d’une base de données HyperFileSQL Client/Serveur. Laissez les options par défaut et passez à l’écran suivant.

Partie 10 : Déploiement

4. Lorsque vous avez terminé de saisir les informations de votre compte WebDev et de votre compte FTP, passez à l’écran suivant. WebDev se connecte, puis vous indique la liste des fichiers qui vont être diffusés vers le serveur.

GAF_WebDev.book Page 452 Lundi, 15. décembre 2008 5:31 17

452

Partie 10 : Déploiement

6. Indiquez les paramètres du site :

Vous pouvez modifier : • Le nombre maximum de connexions au site : si vous définissez une valeur de "5" par exemple, seuls 5 internautes pourront consulter votre site en même temps. • Le nombre maximum de connexion par internaute : si vous définissez une valeur de "5" par exemple, un seul internaute pourra lancer jusqu’à 5 fois votre site. • La durée d’inactivité avant la déconnexion d’un utilisateur : cette option permet de libérer toutes les ressources occupées par la session de l’internaute si celui-ci n’a effectué aucune action depuis la durée indiquée. • La durée maximum d’une requête : cette option permet de limite la durée d’exécution d’une requête sur le serveur. Si la requête n’a pas fini de s’exécuter avant la fin de cette durée, elle est automatiquement arrêtée. Si vos fichiers de données ne se trouvent pas dans le répertoire par défaut de votre site, vous pouvez indiquer le nom du sous-répertoire dans lequel les fichiers seront copiés sur le serveur. Par défaut, votre site est activé immédiatement après l’installation. Si vous décochez la case "Activer le site immédiatement après son installation", les utilisateurs n’auront pas accès à votre site. L’assistant vous propose de réaliser une installation : • immédiate : les fichiers seront transférés immédiatement sur le poste serveur et l’installation de votre site se fera également immédiatement. • en différé : les fichiers seront transférés immédiatement sur le poste serveur mais l’installation de votre site débutera à la date et à l’heure indiquée. 7. Affichez l’écran suivant puis validez l’installation. L’assistant d’installation transfère les fichiers.

GAF_WebDev.book Page 453 Lundi, 15. décembre 2008 5:31 17

453

Pendant le transfert des fichiers, l’assistant compresse et crypte les données transférées. Vos données transitent donc en toute sécurité. A la fin de l’installation, un lien permet de lancer immédiatement le site.

Partie 10 : Déploiement

Après l’installation des fichiers de votre site, l’assistant programme l’activation de votre site. Si vous avez choisi une installation immédiate, votre site sera disponible au bout de deux minutes.

GAF_WebDev.book Page 454 Lundi, 15. décembre 2008 5:31 17

454

LEÇON

10.2.

ADMINISTRATION

TANTE Ce que vous allez apprendre dans cette leçon ... • Administrer un site dynamique WebDev à distance. • Utilisation de WDAdminWeb140 en mode déploiement de test.

Partie 10 : Déploiement

Durée estimée : 10mn

DIS-

GAF_WebDev.book Page 455 Lundi, 15. décembre 2008 5:31 17

455

Présentation

Notes

Le serveur d’application WebDev propose plusieurs utilitaires d’administration pour les sites dynamiques, dont WDAdminWeb140. Cet utilitaire est en réalité un site WebDev intégré au moteur de WebDev. Il permet d’administrer à distance un site dynamique WebDev. Lors du déploiement de votre site dynamique chez un hébergeur, et si cet hébergeur a autorisé l’administration à distance de votre site, vous pourrez utiliser cet utilitaire pour mettre à jour les paramètres de votre site. Pour déployer un site WebDev dynamique, il est nécessaire d’installer le serveur d’application WebDev sur les postes serveur .

Pour lancer WDAdminWeb140 : 4 1. Lancer l’administrateur WebDev (WD140ADMIN) sur le poste de déploiement. 2. Ouvrez votre navigateur favori (par exemple, Internet Explorer) sur votre poste. 3. Saisissez dans la barre d’adresses du navigateur l’URL suivante : http://poste/WDAdminWeb140_WEB/

4. Inscrivez ensuite le nom d’utilisateur (login) et le mot de passe fournis par l’administrateur de site. 5. Cliquez ensuite sur "Connexion". L’administrateur à distance est alors disponible.

Partie 10 : Déploiement

où "poste" est le nom du serveur de déploiement de test (votre poste par exemple).

GAF_WebDev.book Page 456 Lundi, 15. décembre 2008 5:31 17

456

Utilisation de WDAdminWeb140

Partie 10 : Déploiement

WDAdminWeb140 reprend la plupart des options disponibles dans l’administrateur WebDev.

1. Paramètres du serveur : vous pouvez ici régler le nombre maximal de connexions au serveur et la durée maximale d’une requête. 2. Paramètres par défaut des sites : vous pouvez ici régler le nombre maximal de connexions à un site WebDev et le nombre de connexions simultanées d’un même internaute sur un site WebDev. Vous pouvez également régler la durée maximale d’inactivité de l’internaute. 3. Paramètres des sites : vous pouvez, pour chaque site WebDev installé sur votre serveur de test, paramétrer les différentes options disponibles. Pour plus d’informations sur les options de paramétrage, consultez l’aide en ligne.

GAF_WebDev.book Page 457 Lundi, 15. décembre 2008 5:31 17

457

LEÇON 10.3. STATISTIQUES D’UN SITE Ce que vous allez apprendre dans cette leçon ... • Récupérer les statistiques d’un site WebDev dynamique. • Utilisation de WDStatistiques.

Partie 10 : Déploiement

Durée estimée : 10mn

GAF_WebDev.book Page 458 Lundi, 15. décembre 2008 5:31 17

458

Introduction Pour un site professionnel, les statistiques de fréquentations sont très importantes. Elles permettent d’analyser le comportement des internautes et d’améliorer, entre autre, la navigation du site. WebDev intègre un outil de statistiques évolué pour les sites dynamiques.

Configuration du serveur Sur votre serveur de déploiement réel (si votre hébergeur propose l’option de statistiques), WDStatistique permet d’analyser les différents journaux de connexions créés par l’administrateur WebDev. Pour que WDStatistique fonctionne correctement, l’administrateur de déploiement doit être configuré de la façon suivante : • pour générer un fichier journal pour tous les sites présent sur le serveur, l’option "Générer un fichier journal ..." doit être cochée. Cette option est présente dans l’onglet "Configuration" de l’administrateur WebDev :

Partie 10 : Déploiement

• pour générer un fichier journal uniquement pour un site WebDev spécifique, l’option "Générer un fichier journal ..." doit être cochée. Cette option est présente dans l’onglet "Sites", "Paramètres personnalisés" :

Remarque : il est également possible de configurer un site pour créer un fichier journal spécifique depuis l’administrateur distant. allons créer un fichier journal pour un des sites dynamiques de ce cours (le projet 4 Nous "Pages_et_champs" par exemple). 1. Lancez l’administrateur WebDev si nécessaire (option "Outils .. WD140ADMIN" depuis WebDev version développement). 2. Dans l’onglet "Sites", sélectionnez le projet pour lequel le fichier journal doit être généré (par exemple "Ma_Bibliotheque"). 3. Sélectionnez l’option "Paramètres personnalisés". 4. Sélectionnez l’option "Générer un fichier journal particulier à ce site" et indiquez le répertoire de création du fichier journal (vous pouvez garder le répertoire par défaut). 5. Cliquez sur le bouton "Appliquer". 6. Dans l’onglet "Avancé", lancez le site à partir de la "Page de tests". 7. Manipulez les différentes pages du site.

GAF_WebDev.book Page 459 Lundi, 15. décembre 2008 5:31 17

459

Utilisation de WDStatistique Lancer WDStatistique Sur votre poste (poste de développement par exemple), l’outil WDStatistique est disponible dans le répertoire "\Programmes" du répertoire d’installation de WebDev (fichier "WDStatistique.exe"). Pour lancer WDStatistique, sélectionnez l’option "Outils .. WDStatistiques" de WebDev.

4 Lancez WDStatistique. Importer les fichiers Journaux Avant toute chose, il est nécessaire d’indiquer l’emplacement des fichiers journaux à WDStatistique. Pour notre exemple, nous allons effectuer une importation manuelle (les fichiers journaux se trouvant sur le poste de développement). Pour une utilisation systématique de WDStatistique, il est conseillé de réaliser une importation automatique. Ainsi, WDStatistique récupérera les prochains journaux automatiquement. Pour plus de détails sur l’importation automatique, consultez l’aide en ligne de WDStatistique. Pour importer les fichiers journaux : 4 1. Cliquez sur le lien "Importer", présent en bas à gauche de l’écran de WDStatistique. Une

2. Indiquez le chemin du fichier LOG. Ce chemin a été saisi lors de la configuration de l’administrateur WebDev. 3. Cliquez sur "Importer". WDStatistique affiche le nombre de connexions qu’il vient d’importer. 4. Cliquez sur "Fermer". 5. Dans la fenêtre principale de WDStatistique, choisissez le type de statistiques à afficher. Remarque : pour notre test, les statistiques concernent uniquement une connexion, à une heure donnée. En utilisation réelle, toutes les connexions au site sont prises en compte.

Partie 10 : Déploiement

fenêtre de sélection s’affiche. Cliquez sur l’onglet "Importation manuelle" :

GAF_WebDev.book Page 460 Lundi, 15. décembre 2008 5:31 17

460

Fonctionnalités de WDStatistique WDStatistique présente plusieurs analyses des journaux générés par l’administrateur WebDev.

Partie 10 : Déploiement

4 Cliquez sur "Pages demandées". 4 Sélectionnez un site dans la liste "<TOUS LES SITES>" :

1. Affichage des statistiques : c’est ici que s’affichent les statistiques triées selon le type d’information demandé. 2. Type de statistiques : vous disposez de graphes journalier ou horaire, ou bien encore de statistiques en fonction : • des pages demandées, • des référents (site sur lequel se trouvait l’internaute avant d’arriver sur votre site), • des noms de domaine utilisateurs (par exemple, pour distinguer les pays), • du système d’exploitation ou du navigateur de l’internaute, ... 3. Sélection de la période des statistiques : en fonction de la période sélectionnée, WDStatistique compile et assemble les statistiques pour le site sélectionné. Nous ne détaillerons pas plus l’utilisation de WDStatistique dans ce cours d’auto-formation. Si vous désirez obtenir plus d’information sur WDStatistique, consultez l’aide en ligne de WDStatistique.

GAF_WebDev.book Page 461 Lundi, 15. décembre 2008 5:31 17

461

LEÇON 10.4. TESTS DE NON-RÉGRESSION Ce que vous allez apprendre dans cette leçon ... • Testez vos sites dynamiques pour vérifier leur bon fonctionnement. • Présentation de WDTestSite, outil de test de montée en charge et de non-régression.

Partie 10 : Déploiement

Durée estimée : 20mn

GAF_WebDev.book Page 462 Lundi, 15. décembre 2008 5:31 17

462

Présentation de WDTestSite WDTestSite est un utilitaire permettant d'enregistrer et d'exécuter automatiquement des scripts de test de sites WebDev. Un scénario de test contient principalement les différentes manipulations (ouverture d’une page, clic sur un bouton, sur un lien ...) effectuées lors de la navigation sur un site WebDev. Après avoir été enregistré, le scénario de test peut être exécuté à volonté. Lorsqu'un scénario est exécuté, une liste des actions effectuées est réalisée et pour chaque action le résultat de celle-ci (succès ou échec) est indiqué. Il est ainsi possible par exemple de vérifier le fonctionnement de vos sites WebDev entre deux mises à jour.

Partie 10 : Déploiement

WDTestSite permet donc d'automatiser les procédures de test de vos sites. Il permet également de simuler plusieurs internautes en créant des "robots" de tests, qui exécuteront en même temps ou chacun leur tour le scénario sélectionné. Vous disposez ainsi d’un test de montée en charge performant et automatique. Conditions d'utilisation WDTestSite est un outil non redistribuable. Cependant, pour réaliser les tests en mode multi-utilisateurs, WDTestSite peut être installé sur plusieurs postes. Nous ne détaillerons pas toutes les possibilités offertes par WDTestSite. Nous aborderons uniquement les principes d’utilisation de WDTestSite. Pour plus de détails, consultez l’aide en ligne.

Utilisation de WDTestSite WDTestSite permet de : • Créer un scénario pour un site WebDev. Ce scénario contient une suite d'actions à effectuer sur un site WebDev. • Tester directement un scénario. • Lancer consécutivement plusieurs exécutions du même scénario à partir d'un même poste ou de postes différents. Le scénario est exécuté sur le poste serveur. • Tester le lancement d'un même scénario par plusieurs utilisateurs simultanés à partir d'un même poste ou de postes différents. Le scénario est exécuté sur le poste serveur.

GAF_WebDev.book Page 463 Lundi, 15. décembre 2008 5:31 17

463

Enregistrement d’un scénario de test L'enregistrement du scénario de test est une étape importante. Le scénario de test est un fichier contenant toutes les manipulations effectuées sur le site pendant l'enregistrement du scénario. Pour enregistrer un scénario de test : 4 1. Lancez l’administrateur WebDev sur le poste serveur (si ce n’est pas déjà fait). 2. Lancez WDTestSite (option "Outils .. WDTestSite" depuis WebDev version Développement).

Partie 10 : Déploiement

3. Cliquez sur le bouton "Nouveau". Dans la fenêtre qui s’ouvre, indiquez le nom et la description de votre scénario de test.

4. Cliquez sur le bouton "Lancer". 5. Effectuez les différentes manipulations sur votre site (lancement, clic sur quelques liens, manipulations standard de vos pages ...). 6. Lorsque vous avez terminé, cliquez sur le bouton "Terminer" de la fenêtre d’enregistrement du scénario de test. Le scénario est enregistré.

GAF_WebDev.book Page 464 Lundi, 15. décembre 2008 5:31 17

Exécution d’un scénario Vous avez la possibilité de : • Exécuter un scénario : cette option permet par exemple de vérifier la non-régression d'un site WebDev. En effet, un scénario effectué avec une version précédente du site doit fonctionner avec une mise à jour du site. • Exécuter un même scénario plusieurs fois consécutivement : cette option permet par exemple de tester les capacités du serveur lors de connexions simultanées. Dans ce cas, il est conseillé d'utiliser un scénario ne fermant pas le site (exécution de la fonction FinProgramme ou fermeture du navigateur par exemple). Dans tous les cas, il est conseillé d'exécuter le scénario : • depuis un poste quelconque (poste de développement par exemple). • sur le serveur Web de déploiement du site WebDev. Astuce

Partie 10 : Déploiement

464

Plutôt qu’un long scénario, créez plusieurs petits scénarios de test, que vous enchaînerez ...

Pour exécuter un scénario : 4 1. Paramétrez l’administrateur WebDev sur le poste où le scénario va être exécuté (serveur Web). Vérifiez les paramètres du site correspondant au scénario : • le nombre maximum de connexions au site : ce nombre doit correspondre au nombre maximum de connexions simultanées voulues (ou successives si les sessions ne se terminent pas) • le nombre maximum de re-connexion d'un internaute au site : dans le cas d'un scénario exécuté depuis un poste plusieurs fois, ce chiffre doit correspondre au nombre d'exécutions du scénario. • le temps de déconnexion des internautes inactifs : dans le cas d'un test des capacités du serveur, le temps de déconnexion des internautes inactifs doit être élevé (plus de 30 minu-

GAF_WebDev.book Page 465 Lundi, 15. décembre 2008 5:31 17

465

tes par exemple). 2. Lancez WDTestSite sur le poste de test (poste de développement par exemple) si ce n'est déjà fait. 3. Sélectionnez le serveur Web sur lequel le scénario doit être exécuté. Ce serveur doit être accessible depuis votre poste. L'administrateur WebDev doit être lancé sur le serveur. Vous pouvez saisir dans la liste "Machine Cible" : • un nom de machine accessible par le réseau. Exemple : "Serveur Test" • une adresse IP. Exemple : 192.168.456.12 • une adresse internet. Exemple : www.monsitewebdev.fr 4. Sélectionnez votre scénario dans la liste des scénarios disponibles. 5. Cliquez sur le bouton "Exécuter". La fenêtre d'exécution apparaît et le test s'exécute automatiquement. 6. Pour exécuter plusieurs fois le scénario consécutivement, indiquez un nombre de tours supérieur à 1 et cliquez sur le bouton "Ré-exécuter".

Nous ne détaillerons pas plus les fonctionnalités de WDTestSite, nous vous conseillons de consulter l’aide en ligne (mot-clé : "WDTestSite").

Partie 10 : Déploiement

Il est important de remarquer les points suivants lors d’un test de non-régression d’un site WebDev : • Lors de l'exécution du scénario, toutes les actions réalisées dans le site sont affichées. En cas de problème (erreur, ...) le scénario s'arrête, et la dernière ligne affiche l'erreur rencontrée. Le bouton "Détail" permet alors d'obtenir le détail de l'erreur. • Pour tester les capacités du serveur lors de connexions simultanées, il est conseillé d'exécuter un même scénario depuis plusieurs postes.

GAF_WebDev.book Page 466 Lundi, 15. décembre 2008 5:31 17

466

LEÇON 10.5. BACK OFFICE WINDEV Ce que vous allez apprendre dans cette leçon ... • Utiliser une application WinDev en Back Office.

Partie 10 : Déploiement

Durée estimée : 25mn

GAF_WebDev.book Page 467 Lundi, 15. décembre 2008 5:31 17

467

Présentation

Si vous ne possédez pas WinDev, contactez le service commercial de PC SOFT pour obtenir la brochure détaillée gratuite présentant WinDev 14 ou connectezvous sur le site Internet de PC SOFT : http://www.pcsoft.fr !

Partie 10 : Déploiement

Notes

Un site professionnel, par exemple un site commercial, peut permettre aux internautes de passer des commandes, effectuer des réservations, acheter en ligne, demander des renseignements sur la société, ... Toutes les informations saisies par l’internaute sont enregistrées dans un fichier de données HyperFileSQL pour permettre la récupération des informations par une application Back Office (littéralement : "derrière le comptoir"). Cette application pourra travailler sur les fichiers de données sans perturber l’exécution du site. Cette application Back Office peut être réalisée avec WinDev. Vous assurez ainsi de la compatibilité des données, sans conversion et sans difficultés. De plus, que le serveur soit dans vos locaux ou chez un hébergeur, WinDev vous permettra très simplement de réaliser une application Back Office pour votre site WebDev ! Le mode opératoire des deux produits est identique, ce qui facilite encore plus la cohabitation ... Enfin, le WLangage (compatible entre WinDev et WebDev) permet de basculer des traitements longs auparavant effectués par le site WebDev, vers une application WinDev, indépendante des fluctuations du réseau Internet ! Quelques exemples d’applications Back Office réalisables avec WinDev et utilisées conjointement avec un site "Front Office" WebDev : • mailing client automatisé (WinDev), ventes et promotions (WebDev), • transfert des commandes vers le siège de la société (WinDev), achat en ligne (WebDev), • surveillance de machine industrielle (WinDev), rapports d’activités en extranet ou intranet (WebDev), • application bancaire (WinDev), consultation de comptes et placements (WebDev), • ...

GAF_WebDev.book Page 468 Lundi, 15. décembre 2008 5:31 17

Partie 10 : Déploiement

468

GAF_WebDev.book Page 469 Lundi, 15. décembre 2008 5:31 17

469

CONCLUSION Le cours est maintenant terminé ! Ce cours a abordé un ensemble de sujets, mais pas la totalité des fonctionnalités de WebDev, loin s’en faut ! Vous êtes maintenant familiarisé avec les principaux concepts. Nous vous conseillons de consacrer une journée supplémentaire à explorer les différents choix de menu de WebDev, pour chacun des modules.

Explorez également les exemples livrés avec WebDev : certains sont simples et ne traitent que d’un sujet, d’autres sont très complets. Ces exemples vous montreront les différentes facettes de WebDev. La lecture du code source sera également instructive en général.

Faute de place, nous n’avons pas pu aborder tous les sujets (il y en des centaines, voire des milliers !). WebDev offre de nombreuses possibilités non abordées ou non approfondies dans ce cours : • fonctions sockets, HTTP, téléphonie • création de gabarits ... • états imbriqués, requêtes paramétrées ... • compilation dynamique, appels de DLL, langages externes ... • Gadgets Vista, JSON, ...

Rappel : Pour recevoir directement des mises à jour intermédiaires et des conseils d’utilisation, abonnez-vous à la LST (revue trimestrielle + DVD), en français.

Nous vous souhaitons de bons développements, avec WebDev !

Conclusion

Pour plus de détails sur toutes ces possibilités, n’hésitez pas à consulter l’aide en ligne.

GAF_WebDev.book Page 470 Lundi, 15. dĂŠcembre 2008 5:31 17

Conclusion

470