concepts webdev 14

170
Concepts

Transcript of concepts webdev 14

Page 1: concepts webdev 14

Concepts

Dessin.book Page 1 Mardi, 13. janvier 2009 10:44 10

Page 2: concepts webdev 14

WebDev 14 - ConceptsVersion 14 - (1) 11-08

Visitez régulièrement le site www.pcsoft.fr, espace téléchargement, pour vérifier si desmises à jour sont proposées.

Adresse e-mail Support Technique Gratuit : [email protected]

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

Cette documentation n’est pas contractuelle. Des modifications ont pu intervenir dansle logiciel depuis la parution de ce manuel. Veuillez consulter l’aide en ligne.

Tous les noms de produits ou autres marques cités dans cet ouvrage sont des marques déposées par leurs propriétai-res 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.

Dessin.book Page 2 Mardi, 13. janvier 2009 10:44 10

Page 3: concepts webdev 14

So

mm

air

e

3

Dans quel ordre lire les manuels ?

WebDev 14 est un puissant outil de développement de sites Internet / Intranet, qui four-nit tous les outils nécessaires à la conception et à la réalisation de sites pour le Web.

Pour une formation rapide et efficace à WebDev 14, nous vous conseillons l’ordre d’ap-prentissage suivant :

1 Lecture des "Concepts". Ce manuel présente les principaux concepts nécessaires à la création d’un siteWebDev performant.

2 "Auto-formation" (livre + exercices)Le guide d’auto-formation permet une première approche "pratique" de WebDev.Vous pouvez ainsi vous familiariser avec les principaux éditeurs de WebDev.

3 Test des exemplesTestez les différents exemples livrés avec WebDev dans les domaines qui vous in-téressent (e-commerce, annuaire, planning, ...).

Le "manuel de programmation" est prévu pour une lecture ponctuelle au fur et à mesurede vos besoins. Pour chaque sujet, vous trouverez le concept associé et la liste des fonc-tions du WLangage correspondantes. L'aide en ligne permet de trouver rapidement la syntaxe d'une fonction du WLangage,d’obtenir une aide sur l’interface, ...

Remarque : En cas de divergence entre le manuel et l'aide en ligne, suivez les instruc-tions de l'aide en ligne.

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

Dessin.book Page 3 Mardi, 13. janvier 2009 10:44 10

Page 4: concepts webdev 14

So

mm

air

e4

Dessin.book Page 4 Mardi, 13. janvier 2009 10:44 10

Page 5: concepts webdev 14

So

mm

air

e

5

SOMMAIRE

PARTIE 1 - INTERNET : CONCEPTS DE BASE

Qu’est-ce qu’un site ? ..................................................................................................... 11Site statique, semi-dynamique ou dynamique ? .......................................................... 12Les différents types de sites dynamiques .................................................................... 13Les différents types de pages ........................................................................................ 14Pages AWP et pages dynamiques WebDev .................................................................. 18AJAX ................................................................................................................................. 20

PARTIE 2 - DÉVELOPPEMENT D’UN SITE

Développer un site avec WebDev .................................................................................. 25Machines et logiciels nécessaires ................................................................................. 26Configuration du serveur ................................................................................................ 27

PARTIE 3 - GESTION DE PROJET

Site, projet et analyse ..................................................................................................... 31Gestionnaire de sources (GDS) ...................................................................................... 32Les Centres de Contrôle ................................................................................................. 34Gestion des exigences .................................................................................................... 35Centre de Suivi de Projets .............................................................................................. 36Gestion des règles métier .............................................................................................. 37Tableau de bord du projet .............................................................................................. 38WinDev, WebDev, WinDev Mobile : Projet unique ........................................................ 39Configuration de projet ................................................................................................... 40Génération multiple ........................................................................................................ 41Perso-dossiers : Organisez votre projet ......................................................................... 42Composant interne ......................................................................................................... 43Site multi-langues ........................................................................................................... 44Les deux types de code .................................................................................................. 45Le WLangage : un langage simple et très puissant ..................................................... 48

PARTIE 4 - CRÉER LES PAGES D’UN SITE

2 looks de site : modèles ou framesets ........................................................................ 51Modèles de pages (template) ........................................................................................ 52Frameset : une page HTML divisée ............................................................................... 53Je crée une page sous l’éditeur ... ................................................................................. 54Création de pages avec le RAD ..................................................................................... 56Création de pages avec le RID ....................................................................................... 57Choisir un type de champ selon l’information à afficher ............................................. 58Modèles de champs ....................................................................................................... 60Quel type d’image choisir : dynamique, statique, générée, ... ? ................................. 61

Dessin.book Page 5 Mardi, 13. janvier 2009 10:44 10

Page 6: concepts webdev 14

So

mm

air

e6

Créer des effets sur les boutons : boutons personnalisés .......................................... 63Choisir un type de bouton / lien ................................................................................... 65Ordre d’exécution des codes des boutons / liens ........................................................ 66Répéter un groupe de champs ...................................................................................... 68Positionner les champs dans une page ........................................................................ 69Superposer les champs .................................................................................................. 70Des feuilles de styles CSS : pour simplifier la mise en page ....................................... 71Site centré ou adapté ? .................................................................................................. 7210 conseils d’ergonomie ... ............................................................................................ 73

PARTIE 5 - ELÉMENTS DU PROJET SUPPLÉMENTAIRES

WebDev et les états ........................................................................................................ 79Modèles d’états ............................................................................................................... 80Différents modes d’impression ...................................................................................... 81Composant ...................................................................................................................... 82Composants multi-produits ............................................................................................ 83Groupware utilisateur ..................................................................................................... 84

PARTIE 6 - SPÉCIFICITÉS WEBAfficher et enchaîner les pages ..................................................................................... 87Empêcher le retour sur une page .................................................................................. 93Télécharger un fichier (image, ...) vers le serveur (Upload) .......................................... 94Réaliser un traitement sur plusieurs pages successives ............................................. 95Envoyer des emails ......................................................................................................... 96Conserver des informations sur le poste de l’internaute grâce aux cookies ............. 98Protéger l’accès au site : mots de passe ...................................................................... 99Crypter les informations qui transitent sur le Web avec SSL ....................................100Avantage sécuritaire pour votre site dynamique : la gestion du "Back" ...................101Paiement sécurisé avec prestataire ............................................................................104

PARTIE 7 - BASE DE DONNÉES

Les différents types de fichiers accessibles ...............................................................107Analyse : Structure de la base de données .................................................................108HyperFileSQL Classic ....................................................................................................109HyperFileSQL Client/Serveur ........................................................................................110Création de fichiers HyperFileSQL : les fichiers créés physiquement .......................111Associer les champs et les données ...........................................................................112Les requêtes ..................................................................................................................114Les requêtes intégrées .................................................................................................115Le champ Table .............................................................................................................116Réplication universelle .................................................................................................118Architecture 3-tiers ........................................................................................................119

Dessin.book Page 6 Mardi, 13. janvier 2009 10:44 10

Page 7: concepts webdev 14

So

mm

air

e

7

PARTIE 8 - TESTER UN SITE

Tester un site : Les éléments à tester ......................................................................... 123Comment tester un site ? ............................................................................................. 124Le débogueur ................................................................................................................ 126Quand peut-on utiliser le débogueur ? ........................................................................ 127A quoi sert l’administrateur WebDev ? ....................................................................... 128

PARTIE 9 - DÉPLOYER UN SITE Déploiement d’un site statique ou d’un site semi-dynamique WebDev ................... 131Déploiement d’un site dynamique WebDev ............................................................... 132Centre de Contrôle d’hébergement ............................................................................. 136Référencement d’un site .............................................................................................. 137Mise en service d’un site dynamique WebDev ........................................................... 138Serveur dédié ou mutualisé ? ...................................................................................... 139Quel type de serveur choisir ? ..................................................................................... 141Installer un site dynamique WebDev sur des configurations spécifiques ................ 142

PARTIE 10 - MAINTENIR UN SITE

Maintenance d’un site dynamique WebDev ............................................................... 147Consulter les statistiques de fréquentation des sites dynamiques .......................... 148Récupérer des données sur un site ............................................................................ 149Surveillez vos sites, serveurs, ... .................................................................................. 154

PARTIE 11 - ANNEXES

Principales nouveautés de WebDev 14 ...................................................................... 157Vous connaissez déjà WinDev ..................................................................................... 159Fonctions du WLangage spécifiques à WebDev 14 ................................................... 160Composants livrés avec WebDev ................................................................................ 164Exemples livrés avec WebDev ..................................................................................... 165

Dessin.book Page 7 Mardi, 13. janvier 2009 10:44 10

Page 8: concepts webdev 14

So

mm

air

e8

Dessin.book Page 8 Mardi, 13. janvier 2009 10:44 10

Page 9: concepts webdev 14

PARTIE 1

Internet : Concepts de base

Dessin.book Page 9 Mardi, 13. janvier 2009 10:44 10

Page 10: concepts webdev 14

Dessin.book Page 10 Mardi, 13. janvier 2009 10:44 10

Page 11: concepts webdev 14

Part

ie 1

: I

nte

rnet

: C

on

cep

ts d

e b

ase

11

Qu’est-ce qu’un site ? Un site Internet / Intranet est un ensemble de pages HTML stockées sur un serveur Web.Ces pages HTML sont organisées dans un but précis (par exemple, présenter une entre-prise, vendre des produits, ...).

Un site est destiné à être utilisé par des internautes. Les internautes utilisent un simplenavigateur pour accéder au site.

WebDev permet de créer facilement des sites Internet / Intranet qui gèrent ou non desdonnées.

Dessin.book Page 11 Mardi, 13. janvier 2009 10:44 10

Page 12: concepts webdev 14

Part

ie 1

: I

nte

rnet

: C

on

cep

ts d

e b

ase

12

Site statique, semi-dynamique ou dynami-que ? Plusieurs types de sites peuvent être réalisés :• des sites statiques.• des sites semi-dynamiques• des sites dynamiques.Le tableau ci-dessous présente les principales différences entre ces types de sites :

Quelques exemples de sitesLe tableau ci-dessous présente quelques exemples de sites statiques et de sitesdynamiques :

Remarque : Un site dynamique peut contenir une partie statique (présentation de l’en-treprise, ...).

WebDev permet de créer :• des pages statiques.• des pages dynamiques.• des pages semi-dynamiques.

Site statique Site semi-dynamique Site dynamique

Le contenu des pages dusite est fixe, déterminé unefois pour toutes.Un site statique ne peut pasinteragir avec des données.

Site statique WebDev : lemoteur WebDev n’est pasnécessaire.

Le contenu des pages du siteest construit à partir de don-nées présentes dans des fi-chiers de données.Cependant, le contenu despages est fixe.

Site semi-dynamiqueWebDev : le moteur WebDevn’est pas nécessaire.

Les données affichées dansles pages varient. En général, les pages permet-tent de :- réaliser des traitements et/

ou des calculs par program-mation.

- afficher des données stoc-kées dans une base de don-nées.

- afficher des images et du tex-te interactif.

Site dynamique WebDev : lemoteur WebDev est nécessai-re.

Sites statiques Sites dynamiques

- site de présentation d’une société, ...- site d’une association- site personnel- site d’un quotidien ...

- catalogue de produits avec gestion en tempsréel des commandes- site de gestion des réservations de voyages- site de gestion des stocks d’une entreprise(Intranet) ...

Dessin.book Page 12 Mardi, 13. janvier 2009 10:44 10

Page 13: concepts webdev 14

Part

ie 1

: I

nte

rnet

: C

on

cep

ts d

e b

ase

13

Les différents types de sites dynamiquesUn site dynamique permet d’afficher des pages dont le contenu varie. Le plus souvent,le contenu de ces pages est lié à une base de données.Il est ainsi possible par exemple dans un site dynamique de gérer en temps réel les ré-servations de voyages. Ces réservations sont directement enregistrées dans un fichierde données et peuvent être affichées à tout moment.

WebDev propose deux types de sites dynamiques :• site dynamique WebDev. Ce type de site nécessite un moteur WebDev sur le ser-

veur. Il permet de manipuler de nombreuses bases de données.• site dynamique PHP. Ce type de site nécessite un moteur PHP sur le serveur. Ce

type de site est conseillé pour héberger des sites dynamiques chez un hébergeur grand public. Seules les bases de données MySQL peuvent être manipulées avec ce type de site.

Dessin.book Page 13 Mardi, 13. janvier 2009 10:44 10

Page 14: concepts webdev 14

Part

ie 1

: I

nte

rnet

: C

on

cep

ts d

e b

ase

14

Les différents types de pagesDifférents types de pages peuvent être utilisés dans les sites créés avec WebDev :

• Les pages statiques. Ce type de page permet d’afficher des données fixées.

• Les pages semi-dynamiques. Ces pages permettent d’afficher des données disponi-bles dans une base de données. Ces pages et leur contenu sont générés sur le poste de développement lors de la création du site. Lorsque les pages HTM correspondant aux pages dynamiques sont créées, le contenu de la page est alors fixé.

• Les pages dynamiques WebDev. Ces pages permettent d’afficher dynamiquement les informations contenues dans une base de données. Le contenu de la page varie en fonction de l’enregistrement affiché. Lors de l’affichage d’une page dynamique, le contexte correspondant est automati-quement sauvegardé et mis à jour sur le serveur. Le contexte de l’application con-tient principalement les variables globales, les variables de positionnement dans les fichiers de données, ...

• Les pages dynamiques WebDev AWP. Ces pages permettent d’afficher dynamique-ment des données contenues dans une base de données. Le contenu de la page varie en fonction de l’enregistrement affiché.Les pages AWP peuvent utiliser ou non le contexte de l’application. Ce contexte peut être stocké sous forme de cookie ou sur disque. Si les pages AWP n’utilisent pas le contexte de l’application, elles sont autonomes.

• Les pages dynamiques PHP. Ces pages permettent d’afficher dynamiquement des données contenues dans une base de données. Ces pages peuvent uniquement être utilisées dans un site PHP.

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

Dessin.book Page 14 Mardi, 13. janvier 2009 10:44 10

Page 15: concepts webdev 14

Part

ie 1

: I

nte

rnet

: C

on

cep

ts d

e b

ase

15

Principe d’une page statique

Poste de développement

Poste Serveur

Page HTML

Poste de l’internaute

Création d’une page statique sous

WebDev (fichier ".WWH")

Page statique visualisée sous le navigateur

DÉVELOPPEMENT

DÉPLOIEMENT

CONSULTATION

Dessin.book Page 15 Mardi, 13. janvier 2009 10:44 10

Page 16: concepts webdev 14

Part

ie 1

: I

nte

rnet

: C

on

cep

ts d

e b

ase

16

Principe d’une page semi-dynamique

Poste de l’internaute

Pages HTML

Création d’une pagesemi-dynamique sous

WebDev (fichier ".WWH")

Base de donnéesassociée au projet

Génération des pages statiques

nécessaires (fichiers ".HTM")

DÉVELOPPEMENT

DÉPLOIEMENT

CONSULTATION

Poste Serveur

Poste de développement

Page statique (correspondant aux pages semi-dynamiques) en exécution sous le navigateur.

La page affichée correspond aux informationsdemandées par l’internaute.

Dessin.book Page 16 Mardi, 13. janvier 2009 10:44 10

Page 17: concepts webdev 14

Part

ie 1

: I

nte

rnet

: C

on

cep

ts d

e b

ase

17

Principe d’une page dynamique

Poste de l’internaute

PageHTML

Poste de développement

Base dedonnées

MoteurWebDev

Page dynamique en exécution sous le navigateur.Les données affichées dans les pages varient en

fonction des manipulations de l’internaute.

DÉVELOPPEMENT

DÉPLOIEMENT

CONSULTATION

Création d’une page dynamique sous WebDev (fichier ".WWH")

Poste Serveur

Dessin.book Page 17 Mardi, 13. janvier 2009 10:44 10

Page 18: concepts webdev 14

Part

ie 1

: I

nte

rnet

: C

on

cep

ts d

e b

ase

18

Pages AWP et pages dynamiques WebDevPage dynamiqueLors de l'affichage d'une page dynamique WebDev, les opérations suivantes sonteffectuées :1. Demande d'affichage de la page.2. Lancement du moteur WebDev. Le moteur sera présent sur le serveur jusqu'à la fin del'application.3. Création du contexte de l'application. Ce contexte sera présent sur le serveur jusqu'àla fin de l'application.4. Le moteur WebDev exécute le code serveur et construit la page HTML (à partir des don-nées de la base de données par exemple).5. Lorsque le moteur a fini de construire la page HTML, le serveur transmet le résultat auclient (le navigateur).

Dessin.book Page 18 Mardi, 13. janvier 2009 10:44 10

Page 19: concepts webdev 14

Part

ie 1

: I

nte

rnet

: C

on

cep

ts d

e b

ase

19

Pages AWPUne page AWP est un fichier binaire contenant le code HTML de la page, et le code ser-veur (saisi sous l'éditeur de code par le développeur). Ce fichier doit avoir l'extension".awp" pour pouvoir être interprété par le serveur.Ainsi, lorsqu'un navigateur (le client) désire accéder à une page dynamique AWP réaliséeavec WebDev :1. Le serveur reconnaît qu'il s'agit d'un fichier AWP.2. Le serveur appelle le moteur WebDev pour lire le fichier AWP.3. Le moteur WebDev exécute le code serveur et construit la page HTML (à partir des don-nées de la base de données par exemple).4. Lorsque le moteur a fini de construire la page HTML, le moteur se ferme.5. Le serveur transmet le résultat (la page HTML) au client (le navigateur).

Remarque : il est possible d’utiliser un contexte avec les pages AWP en définissant lesvariables persistantes grâce à la fonction DéclareContexteAWP.

Dessin.book Page 19 Mardi, 13. janvier 2009 10:44 10

Page 20: concepts webdev 14

Part

ie 1

: I

nte

rnet

: C

on

cep

ts d

e b

ase

20

AJAXLa technologie AJAX est disponible nativement dans WebDev.

Que signifie AJAX et quel est son intérêt ?AJAX (pour Asynchronous Javascript and XML) permet de rafraîchir uniquement les don-nées modifiées dans une page HTML sans réafficher la totalité de la page. Par exemple,si certains éléments présents dans une page affichée (le contenu du panier, les caracté-ristiques d'un produit, une liste de villes, une carte géographique, …) doivent être modi-fiés, seuls ces éléments seront rafraîchis. Le serveur n'aura pas à envoyer la page entièresur le poste de l'internaute.

Cette technologie a de multiples avantages :• le serveur est moins sollicité. Il peut alors supporter un plus grand nombre de con-

nexions simultanées.• les informations qui circulent sont de taille réduite.• la durée de transmission est plus courte.• l'affichage pour l'internaute est immédiat et sans effet visuel.

AJAX peut être utilisé à deux niveaux différents dans un site WebDev :• AJAX automatique et immédiat : un simple clic suffit pour accéder aux avantages

AJAX. Le code reste le même.• AJAX programmé : utilisation des fonctions de gestion AJAX pour les traitements

complexes.

Remarque : Seuls les navigateurs récents supportent la technologie AJAX (Internet Explo-rer 5.5 et supérieur, FireFox 1.0 et supérieur, Netscape 7 et supérieur, Opera 8 et supé-rieur, Safari 1.2 et supérieur, …). La fonction AJAXDisponible permet de savoir si lenavigateur en cours supporte la technologie AJAX. Si un traitement utilisant la technolo-gie AJAX est exécuté sur un navigateur ne supportant pas cette technologie, le traitements'exécute "comme si" il n’utilisait pas la technologie AJAX (rafraîchissement de la pageentière par exemple).

Dessin.book Page 20 Mardi, 13. janvier 2009 10:44 10

Page 21: concepts webdev 14

Part

ie 1

: I

nte

rnet

: C

on

cep

ts d

e b

ase

21

AJAX automatique et immédiatLe schéma suivant présente l’utilisation automatique et immédiate de AJAX dans un siteWebDev :

Par exemple, une page d'un site permet de connaître différentes caractéristiques d'unpays (capitale, devise, drapeau, situation, …). En fonction du pays sélectionné par l'inter-naute, les informations correspondantes sont affichées.

Action de l'internaute. Dans notre exemple, sélection du pays dans la combo"Sélectionner le pays souhaité".

Envoi de la requête au serveur.

Exécution de la requête : recherche des caractéristiques du pays sélection-né.

Envoi du résultat de la requête :- sans AJAX : toute la page est envoyée.- avec AJAX : seules les caractéristiques du pays sont envoyées.

Affichage des caractéristiques du pays :- sans AJAX : toute la page est réaffichée.- avec AJAX : seuls les champs contenant les caractéristiques du pays sont

rafraîchis.

Navigateur

Action

Serveur Web

Mise à jourautomatiquedes éléments

modifiés

Envoi de la requête

Envoi deséléments modifiés

uniquement

Exécutionde la requête

Dessin.book Page 21 Mardi, 13. janvier 2009 10:44 10

Page 22: concepts webdev 14

Part

ie 1

: I

nte

rnet

: C

on

cep

ts d

e b

ase

22

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

Exécution d'un traitement navigateur (fonction AJAXExécute ou AJAXExécu-teAsynchrone).

Demande d'exécution d'une procédure serveur.

Exécution de la procédure serveur.

Génération du résultat. Le résultat de la procédure sera exprimé sous formed'une chaîne de caractères ou d'un document XML.

Envoi du résultat de la procédure (Mot-clé RENVOYER).

Analyse du résultat de la procédure.

Affichage des informations modifiées. Seuls les champs nécessaires sont ra-fraîchis.

Navigateur

Action

Serveur Web

Mise à jourautomatiquedes éléments

modifiés

Demanded’exécution de la

procédure

Envoi durésultat uniquement

Exécution de la procédure

serveur

Générationdu résultat :

Document XML,chaîne de caractèresAnalyse du résultat

Dessin.book Page 22 Mardi, 13. janvier 2009 10:44 10

Page 23: concepts webdev 14

PARTIE 2

Développement d’un site

Dessin.book Page 23 Mardi, 13. janvier 2009 10:44 10

Page 24: concepts webdev 14

Dessin.book Page 24 Mardi, 13. janvier 2009 10:44 10

Page 25: concepts webdev 14

Part

ie 2

: D

évelo

pp

em

en

t d

’un

sit

e

25

Développer un site avec WebDev

Test du site

Développement

- RAD projet- RAD page- Requêtes- Etats- Conception et saisie du code source

Création de l'analyse

Création du Projet

GOGO

Importation de fichiers existants

Cahier des charges

Test du site depuisl'administrateur

WDAdmin

Installation du sitesur un poste de test

Installation réelledu site sur le serveur

Test

s Fi

nals

WDTESTSITE

Tests réels du siteTests de montée

en charge

Ouverture du site

Dessin.book Page 25 Mardi, 13. janvier 2009 10:44 10

Page 26: concepts webdev 14

Part

ie 2

: D

évelo

pp

em

en

t d

’un

sit

e26

Machines et logiciels nécessairesL'internaute

Aucun module ne sera à télécharger. Le fonctionnement est immédiat et rapide.

* Les données peuvent se trouver sur une autre machine reliée en réseau.

Une machine UNIX ou Linux peut être utilisée en frontal du serveur.

• une machine : PC, Mac, Unix, WebTV, console, …

• un navigateur : Internet Explorer, FireFox, Netscape, ...

• un accès Internet (ou Intranet)

Le serveur La machine de développement

• 1 machine serveur : PC • 1 machine : PC

• 1 système d'exploitationserveur (Windows ou Linux) :

Windows 2000 ou supérieur.

• 1 système d'exploitation : NT, Windows 2000 ou supérieur.

• 1 logiciel serveur Web : IIS, Apache, …

• 1 logiciel serveur Web : IIS, Apache, …

• 1 serveur d’applicationWebDev(site dynamique WebDev unique-ment)

• 1 logiciel WebDev "Développement"

• le site lui-même • le site en cours de développement

• les données *

(site dynamique uniquement)

• les données (optionnel) *

• au moins un navigateur : Internet Explorer, FireFox, Netscape, ...

Dessin.book Page 26 Mardi, 13. janvier 2009 10:44 10

Page 27: concepts webdev 14

Part

ie 2

: D

évelo

pp

em

en

t d

’un

sit

e

27

Configuration du serveurPour un site dynamique WebDev :

Pour un site statique ou semi-dynamique :

Dessin.book Page 27 Mardi, 13. janvier 2009 10:44 10

Page 28: concepts webdev 14

Part

ie 2

: D

évelo

pp

em

en

t d

’un

sit

e28

Dessin.book Page 28 Mardi, 13. janvier 2009 10:44 10

Page 29: concepts webdev 14

PARTIE 3

Gestion de projet

Dessin.book Page 29 Mardi, 13. janvier 2009 10:44 10

Page 30: concepts webdev 14

Dessin.book Page 30 Mardi, 13. janvier 2009 10:44 10

Page 31: concepts webdev 14

Part

ie 3

: G

esti

on

de p

roje

t

31

Site, projet et analyseUn projet WebDev est un ensemble de pages, champs, classes, composants, ... dont lebut est de réaliser un site Internet / Intranet.

Une analyse WebDev regroupe la description des fichiers de données.

Un projet est généralement associé à une analyse.Une analyse peut être associée à un ou plusieurs projets.

Pour créer le site "jaidebeauxyeux.com", créez le projet "jaidebeauxyeux".

Dessin.book Page 31 Mardi, 13. janvier 2009 10:44 10

Page 32: concepts webdev 14

Part

ie 3

: G

esti

on

de p

roje

t32

Gestionnaire de sources (GDS)PrésentationPour simplifier vos développements en équipe, WebDev propose un gestionnaire desources. Ce gestionnaire de sources permet à plusieurs développeurs de travailler simul-tanément sur le même projet.

Il est possible de partager les éléments présents dans le GDS :• via un réseau.• via Internet.• en mode déconnecté. Dans ce cas, les éléments sur lesquels un travail spécifique

devra être effectué seront extraits du GDS par exemple lors de la connexion du por-table au système général.

Réseau(intranet)

Déconnecté

ADSL(internet)GDS

Dessin.book Page 32 Mardi, 13. janvier 2009 10:44 10

Page 33: concepts webdev 14

Part

ie 3

: G

esti

on

de p

roje

t

33

Fonctionnement du Gestionnaire de SourcesVoici un exemple d’utilisation du Gestionnaire de Sources :

Si un élément (page, état, ...) du projet est extrait, ce même élément ne pourra pas êtreextrait une seconde fois.Après modification des éléments extraits, il est nécessaire de réintégrer ces élémentspour que le projet de base prenne en compte ces modifications. En effet, la base de sour-ces conserve un historique de tous les éléments du projet depuis leur création.

A chaque réintégration d’un élément, le numéro de version du projet de base est incré-menté de 1.

Poste NomadeExtraction de la Fenêtre Beta du Projet A Version 1 à 9h13

Poste Local 1Extraction de la fenêtre Alpha duProjet A Version 1 à 9h57Réintégration de la fenêtre Alpha modifiéedans le Projet A Version 2 à 10h41

Poste Local 2Extraction de la fenêtre Alpha duProjet A Version 2 à 14h28

Poste NomadeRéintégration de la fenêtre Beta modifiéedans le Projet A Version 3 à 18h32

Base de Sources

Projet AVersion 1

Poste Local 1

Projet AVersion 2

Poste Local 2

Extraction 9h572

Réintégration 10h414

Extraction 14h285

Projet AVersion 1

Projet AVersion 2

Modification3

Poste Nomade

Extraction 9h131

Réintégration 18h327

Projet AVersion 1

Projet AVersion 3

Modification en clientèle6

Projet AVersion 2

Projet AVersion 3

Dessin.book Page 33 Mardi, 13. janvier 2009 10:44 10

Page 34: concepts webdev 14

Part

ie 3

: G

esti

on

de p

roje

t34

Les Centres de ContrôlePour optimiser la gestion de vos projets de développement, WebDev vous propose d’uti-liser les Centres de Contrôle. Grâce aux différents Centres de Contrôle, vous pouvez :• Gérer les exigences d’un projet,• Gérer le suivi d’un projet.

Les Centres de Contrôle utilisent une base de données (HyperFileSQL Classic ou Client/Serveur). Cette base de données est partagée entre de nombreux outils disponibles dansWebDev :

Lors de l’installation de WebDev, le programme d’installation propose :• soit de créer la base des Centres de Contrôle. Cette base sera automatiquement

créée au format HyperFileSQL Classic dans le répertoire spécifié.• soit de partager une base de données des Centres de Contrôle existante.

Dessin.book Page 34 Mardi, 13. janvier 2009 10:44 10

Page 35: concepts webdev 14

Part

ie 3

: G

esti

on

de p

roje

t

35

Gestion des exigencesLes Centres de Contrôle permettent à un chef de projet de gérer un projet de développe-ment. Il suffit pour cela de :• définir les différents intervenants du projet.• définir les exigences (avec les différents éléments qui leur sont associés).Chaque développeur effectue les différentes tâches qui lui sont affectées.Le chef de projet peut à tout moment suivre l’état d’avancement du projet.

Dessin.book Page 35 Mardi, 13. janvier 2009 10:44 10

Page 36: concepts webdev 14

Part

ie 3

: G

esti

on

de p

roje

t36

Centre de Suivi de ProjetsLe Centre de Suivi de Projets permet aux différents intervenants d’un projet de gérer leurplanning des tâches. Ces tâches peuvent être liées à des exigences, et correspondre àplusieurs projets.

Fonctionnement du Centre de Suivi de projetsAprès avoir listé l’ensemble des tâches d’un projet, le Centre de Suivi de Projets s’occupede tout. La saisie du temps passé est quasi automatique, ne demande aucune actionspécifique et ne génère aucune contrainte particulière.Lors de l’ouverture du projet concerné, le Centre de Suivi de Projets demande ou indiquela tâche en cours. Dès qu’une tâche est réalisée, il suffit d’indiquer que cette tâche estterminée et de spécifier la nouvelle tâche.Une tâche peut être reliée à un élément du projet (page, état, ...). Chaque fois que l’élé-ment concerné est ouvert, le temps passé sur cet élément est décompté et mémorisédans le Centre de suivi. Inversement, depuis la liste des tâches, il est possible d’ouvrirautomatiquement l’élément correspondant à la tâche que vous voulez réaliser.Chaque développeur peut également visualiser directement sa liste de tâches dans le vo-let "Centre de Suivi de Projets".

Dessin.book Page 36 Mardi, 13. janvier 2009 10:44 10

Page 37: concepts webdev 14

Part

ie 3

: G

esti

on

de p

roje

t

37

Gestion des règles métierWebDev permet de gérer des règles métier. Une règle métier permet de définir un modeopératoire précis ou de préciser un traitement particulier. Par exemple : le calcul d’untaux de TVA avec ses particularités, les règles de changement de statut d’un client; laformule de calcul d’un montant de frais de port, une commission commerciale, un tauxde remise, un coefficient de vétusté, ...Une règle métier peut être simple ou élaborée.Les règles métier proviennent du cahier des charges (correspondant aux exigences).

Dessin.book Page 37 Mardi, 13. janvier 2009 10:44 10

Page 38: concepts webdev 14

Part

ie 3

: G

esti

on

de p

roje

t38

Tableau de bord du projetLe tableau de bord du projet est un élément indispensable à la gestion de projets Web-Dev. Le tableau de bord permet d’avoir une vision globale et synthétique de l’état d’avan-cement d’un projet.

Le tableau de bord propose deux modes de visualisation du projet :• Le mode Développeur,• Le mode Chef de projet.

Le tableau de bord du projet en mode Développeur 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, ...

Le tableau de bord en mode Chef de Projet permet d’obtenir des informations graphi-ques sur l’état d’avancement du projet et la qualité du projet. Ce mode est recommandélors de l’utilisation du Centre de Suivi de Projets avec une gestion des exigences.

Dessin.book Page 38 Mardi, 13. janvier 2009 10:44 10

Page 39: concepts webdev 14

Part

ie 3

: G

esti

on

de p

roje

t

39

WinDev, WebDev, WinDev Mobile : Projet uniqueLes projets créés actuellement sont souvent multi-cibles.Par exemple, pour un ERP destiné à fonctionner sous Windows, il est fort probable qu'enplus de l'application qui sera le socle de la solution applicative, des commerciaux serontéquipés de PDA ou de Smartphones, les magasiniers utiliseront des terminaux mobilespour la gestion des stocks et qu'un site Intranet et un site Internet seront mis en place.

Désormais, toutes ces informations sont regroupées dans un projet global.

Quel que soit le produit avec lequel un projet a été créé, il est possible de l'ouvrir avecles autres produits.

Lorsque vous ouvrez un projet dans un produit dif-férent de celui qui a permis de le créer, un assistants’affiche, permettant de créer une configuration deprojet spécifique au produit utilisé.

Par exemple, si un projet WinDev est ouvert avecWebDev, vous pouvez créer une configuration deprojet nommée "SiteWEB", permettant de regroupertous les éléments nécessaires au site WebDev.

Dans les phases d'utilisation de l'environnement, ilest possible de visualiser depuis chaque environne-ment les éléments de chaque cible. Un projet sousWinDev affiche les vignettes des pages WebDev etles fenêtres WinDev Mobile par exemple. Cliquersur une page WebDev depuis l'éditeur de projetWinDev ouvre la page WebDev (WebDev doit êtreinstallé sur le poste).

Sont également partagés : les documents, les des-criptions de modélisations, les composants, lesclasses, ...

Dessin.book Page 39 Mardi, 13. janvier 2009 10:44 10

Page 40: concepts webdev 14

Part

ie 3

: G

esti

on

de p

roje

t40

Configuration de projetLes configurations de projet permettent de créer à partir d'un même projet plusieurs "ci-bles" différentes.

Vous pouvez ainsi créer à partir d'un même projet par exemple :• 2 ou 3 sites qui ne contiennent pas les mêmes éléments, qui ont des noms

différents, …• 3 ou 4 composants• 2 bibliothèques

A tout moment, vous pouvez travailler sur une configuration spécifique : les élémentsn'appartenant pas à cette configuration apparaissent grisés sous l'éditeur de projet.

Il est possible de générer en une seule opération toutes les configurations d’un projet (ouuniquement certaines) grâce à la génération multiple.

Dessin.book Page 40 Mardi, 13. janvier 2009 10:44 10

Page 41: concepts webdev 14

Part

ie 3

: G

esti

on

de p

roje

t

41

Génération multipleLes configurations de projets permettent de définir simplement les différentes "Cibles"de votre projet. Vous pouvez ainsi définir pour un même projet plusieurs sites, plusieursbibliothèques ou plusieurs composants.

Pour générer le résultat de chaque configuration, vous pouvez bien entendu sélectionnerune à une chaque configuration, et générer le programme correspondant.

Un autre moyen plus rapide existe : la génération multiple. Vous sélectionnez en uneseule opération les configurations à générer, et le résultat est immédiat.

Pour lancer une génération multiple, utilisez l’option "Atelier .. Génération multiple".

Dessin.book Page 41 Mardi, 13. janvier 2009 10:44 10

Page 42: concepts webdev 14

Part

ie 3

: G

esti

on

de p

roje

t42

Perso-dossiers : Organisez votre projetL’éditeur de projets de WebDev permet de représenter la cartographie complète du pro-jet grâce au graphe du projet.Sur des projets de taille importante, la navigation dans cette représentation peut être dé-licate. La notion de "perso-dossiers" permet d’améliorer cette navigation.

Un "perso-dossier" contient les éléments que vous y rangez, par exemple une partie dusite : la gestion des clients, la gestion des fournisseurs, ...Des éléments peuvent être communs à plusieurs "perso-dossiers". Il est ainsi plus simplede travailler sur une partie du site.

Remarque : Pour ranger, organiser vos projets, mais aussi pour partager un ensembled’éléments entre différents projets, WebDev met également à votre disposition les com-posants internes (Voir “Composant interne”, page 43).

Affichage des perso-dossiers

Détail d’un perso-dossier

Dessin.book Page 42 Mardi, 13. janvier 2009 10:44 10

Page 43: concepts webdev 14

Part

ie 3

: G

esti

on

de p

roje

t

43

Composant interneUn composant interne est un regroupement d’éléments d’un projet. Ce regroupementpermet de :• Organiser un projet : vous pouvez créer des composants internes pour regrouper les

éléments d’un projet, par exemple par fonctionnalité.• Partager des éléments entre différents projets par l’intermédiaire du GDS (Gestion-

naire de Sources).

Les éléments d’un composant interne peuvent être privés ou publics :• Les éléments privés pourront être manipulés uniquement par les autres éléments

du composant.• Les éléments publics pourront être manipulés par les éléments du projet utilisant le

composant interne.

Dessin.book Page 43 Mardi, 13. janvier 2009 10:44 10

Page 44: concepts webdev 14

Part

ie 3

: G

esti

on

de p

roje

t44

Site multi-languesWebDev permet de créer très rapidement des sites multi-langues à partir d’un même pro-jet.

Pour créer un site multi-langue, il suffit de sélectionner les différentes langues gérées parle projet (option "Projet .. Description du projet", onglet "Langues").

Vous pourrez ensuite configurer tous les éléments du projet dans ces différentes lan-gues. Par exemple, WebDev vous permet de configurer :• les différents éléments (libellé, titre de page, ...).• les caractéristiques d’affichage (masque de saisie, ...).• les fichiers image des éléments (bouton, champ image, ...).

Tous les éléments (pages, états, images, ...) nécessaires sont regroupés dans un seul ré-pertoire par langue.

Une page en français ... ... la même page en anglais

Dessin.book Page 44 Mardi, 13. janvier 2009 10:44 10

Page 45: concepts webdev 14

Part

ie 3

: G

esti

on

de p

roje

t

45

Les deux types de codeCode serveur ou code navigateur ?

Deux sortes d’actions peuvent être programmées dans un site WebDev :

Pour gérer ces deux sortes d’actions, l’éditeur de code de WebDev différencie deux typesde code :

• Code Serveur (code Jaune ou Rose sous l’éditeur de code) : Ce code est écrit en WLangage (code jaune) ou en PHP (code rose, disponible uniquement dans les pages PHP). Ce code est exécuté sur le serveur. Ce code est disponible uniquement dans les pages dynamiques.

• Code Navigateur (code Vert ou Bleu) : Ce code est écrit en WLangage (code vert) ou en Javascript (code bleu). A l’enregistrement de la page, ce code est automatiquement traduit en Javascript, et intégré aux pages HTML WebDev. Ce code est exécuté en local (sur le poste de l’internaute) et ne nécessite pas d’action du serveur.

Dessin.book Page 45 Mardi, 13. janvier 2009 10:44 10

Page 46: concepts webdev 14

Part

ie 3

: G

esti

on

de p

roje

t46

Code serveur dans une page PHP : code WLangage ou code PHP ?

Les codes exécutés sur le poste serveur sont représentés sous l’éditeur de code par unbandeau Jaune ou Rose.

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

Pour passer d’un code jaune (WLangage) à un code rose (PHP), il suffit de cliquer sur lesigle WL précédant l’intitulé du code (ou inversement en cliquant sur PHP). Lors de l’en-registrement de la page PHP, le code WLangage est automatiquement converti en codePHP.

Nous vous conseillons de développer en WLangage.

Dessin.book Page 46 Mardi, 13. janvier 2009 10:44 10

Page 47: concepts webdev 14

Part

ie 3

: G

esti

on

de p

roje

t

47

Code navigateur : code WLangage ou code Javascript ?

Les codes exécutés sur le poste de l’internaute (sur le navigateur) sont représentés sousl’éditeur de code par un bandeau bleu ou vert.

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

Pour passer d’un code vert (WLangage) à un code bleu (Javascript), il suffit de cliquer surle sigle WL précédant l’intitulé du code (ou inversement en cliquant sur JS). A l’enregis-trement de la page, le code WLangage est automatiquement converti en Javascript.

Nous vous conseillons de développer en WLangage.

La barre d’icones située au bas de la fenêtre de code permet de gérer des événementssupplémentaires à ceux proposés par défaut :

Ces événements sont ajoutés aux codes affichés par l’éditeur de code par simple clic surl’icone du code correspondant. Exemples d’événements supplémentaires : double-clic,touche enfoncée, touche pressée, touche relâchée, bouton enfoncé, souris déplacée, ...

Rappel : Le code navigateur est disponible dans les pages dynamiques, semi-dynami-ques, ou statiques.

Dessin.book Page 47 Mardi, 13. janvier 2009 10:44 10

Page 48: concepts webdev 14

Part

ie 3

: G

esti

on

de p

roje

t48

Le WLangage : un langage simple et très puissantLe langage intégré de WebDev est le WLangage. Ce langage permet de programmer sim-plement tous les traitements Internet voulus sans avoir à connaître le HTML, le Javascriptou le PHP.Disponible en français et en anglais, le WLangage est composé d’ordres simples, pro-ches du langage courant. Le français permet une programmation intuitive (le WLangageest compatible avec WinDev, AGL n°1 en France).

Voici un tout petit exemple illustrant la puissance du WLangage : la vérification de la sai-sie d’une adresse :

En WLangage, quelques lignes suffisent :

En Javascript, voici le traitement équivalent :

Le code WLangage est plus facile à écrire, à comprendre, à maintenir. La fiabilité estaméliorée. Les évolutions sont plus simples.

Dans tous vos traitements, utilisez le WLangage.

SI SansEspace(ADRESSE) = "" ALORSErreur("Veuillez indiquer votre adresse")RepriseSaisie(ADRESSE)

FIN

<SCRIPT LANGUAGE=Javascript>function EXE_SansEspace( szChaine , nPartie ){var nPremier = 0;var nDernier = szChaine.length-1;if (nPartie & 1) while (szChaine.charAt(nPremier)==" ") nPremier++;if (nPartie & 2) while (szChaine.charAt(nDernier)==" ") nDernier--;return szChaine.substring(nPremier,nDernier+1);}// Clic (onclick) de BOUTON_OKfunction _VALIDCDE_BOUTON_OK_CLI(){if((EXE_SansEspace(ADRESSE,3)=="")){alert("Veuillez indiquer votre adresse ");return;}}</SCRIPT>

Dessin.book Page 48 Mardi, 13. janvier 2009 10:44 10

Page 49: concepts webdev 14

PARTIE 4

Créer les pages d’un site

Dessin.book Page 49 Mardi, 13. janvier 2009 10:44 10

Page 50: concepts webdev 14

Dessin.book Page 50 Mardi, 13. janvier 2009 10:44 10

Page 51: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e

51

2 looks de site : modèles ou framesetsLors de la conception d’un site, il est possible de choisir un des deux modes de présen-tation suivants :

• site basé sur des "modèles de pages" : les pages utilisent le même modèle. Les pages s’enchaînent et s’affichent entièrement dans le navigateur. Le principe de développement du site est simple : il suffit de créer le modèle de pages et d’utiliser ce modèle dans les différentes pages.

• site basé sur des "framesets" : un frameset permet de figer une partie du site (le menu par exemple). Les pages s’enchaînent dans une frame du frameset.

Ces deux looks de site sont présentés dans les pages suivantes.

Avantages des modèles de pages

L’utilisation de modèles de pages dans vos sites permet de :

• optimiser la vitesse d’affichage des pages du site.

• limiter le nombre de fichiers HTML générés (et donc le nombre de fichiers HTML à charger sur le poste de l’internaute).

• simplifier la création des pages du site.

• simplifier la mise en page des pages du site.

• simplifier la mise à jour de la charte graphique du site.

• simplifier la gestion des destinations des pages du site.

• ...

Dessin.book Page 51 Mardi, 13. janvier 2009 10:44 10

Page 52: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e52

Modèles de pages (template)WebDev permet de créer des modèles de pages. Ces modèles contiennent tous les élé-ments graphiques communs à l’ensemble des pages de votre site.Les modifications effectuées dans un modèle de pages sont automatiquement reportéessur toutes les pages utilisant ce modèle.Un modèle de pages permet de respecter la charte graphique définie pour un site.

Un modèle de pages peut être créé :• directement (option "Fichier .. Nouveau .. Page .. Modèle de pages").• à partir de la page en cours (option "Fichier .. Enregistrer comme un modèle").Pour créer une page utilisant un modèle, sélectionnez le modèle à utiliser lors de la créa-tion de la page.Remarque : La programmation associée aux éléments du modèle peut être directementréalisée dans le modèle.

Les caractéristiques des éléments peuvent être désolidarisées du modèle. Par exemple,désolidariser la position d’un champ du modèle pour positionner le champ ailleurs touten conservant les autres évolutions sur le champ (code, style, ...). On parle alors d’héri-tage. Dans ce cas, les éléments sont identifiés par un carré bleu.

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

trait jaune sous l’éditeur.

Utilisation du modèle dans plusieurs pages.Les éléments appartenant au modèle sont identifiés par un carré jaune.

Dessin.book Page 52 Mardi, 13. janvier 2009 10:44 10

Page 53: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e

53

Frameset : une page HTML diviséeUn frameset est un type de page spécifique : cette page est divisée en plusieurs zones.Chaque zone est appelée "Frame". Dans chaque frame, une page HTML est affichée.

Un frameset permet de regrouper plusieurs pages dans une seule fenêtre du navigateur.Un exemple très courant est l’utilisation d’une frame pour le menu du site, la secondeframe permettant d’afficher les pages du site.

Les framesets permettent de changer facilement une partie des informations affichées.Une même frame peut accueillir différentes pages selon les actions effectuées par l’in-ternaute.

Un frameset affiché sous le navigateur

Décomposition schématique du frameset en 4 frames

Page affichéedans une

frame

Page du site elle-même

Frame : cadreoù une pageest affichée

Dessin.book Page 53 Mardi, 13. janvier 2009 10:44 10

Page 54: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e54

Je crée une page sous l’éditeur ...Pour créer une page avec WebDev, les étapes sont les suivantes :

Création de la page sous l’éditeur de pages de WebDev.

Saisie du code (étape optionnelle).

Enregistrement de la page.

Code navigateur

Code serveur

Dessin.book Page 54 Mardi, 13. janvier 2009 10:44 10

Page 55: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e

55

Les fichiers suivants sont automatique-ment créés :

Légende :

.WWH : Format source des pages Ce fichier contient la description complète de la page(champ, code navigateur, code serveur). Ce fichier estutilisé par l’éditeur et reste sur la machine du déve-loppeur.

.WDL : Bibliothèque du projetGénérée lors du déploiement du site dynamique,la bibliothèque contient le code serveur des pa-ges du projet. Ce fichier sera présent sur le ser-veur.

.HTM génériqueCe fichier contient la description complète de la page(champ, code navigateur, code serveur). Certains para-mètres de cette page sont génériques et seront remplisdynamiquement lors de l’affichage de la page.

.AWP : Page AWPGénéré à partir du fichier WWH, ce fichier contientla description des champs, le code serveur, lecode navigateur. Ce fichier sera présent sur leserveur.

.HTM : Page HTML du siteGénéré à partir du fichier WWH, ce fichier contient ladescription des champs en HTML et le code navigateur(si le code a été saisi en WLangage, il est automatique-ment traduit en Javascript). Ce fichier sera présent surle serveur.

.PHP : Page PHPGénéré à partir du fichier WWH, ce fichier contientla description des champs, le code serveur, lecode navigateur au format PHP. Ce fichier seraprésent sur le serveur.

Dessin.book Page 55 Mardi, 13. janvier 2009 10:44 10

Page 56: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e56

Création de pages avec le RADLe RAD (Rapid Application Development) permet de créer des pages à partir :• de l’analyse liée au projet,• des patterns RAD standard ou personnalisés,• des gabarits.Les pages générées contiennent tout le code nécessaire à leur fonctionnement. Ces pa-ges peuvent être testées immédiatement, avec les données présentes sur le poste de dé-veloppement

Dessin.book Page 56 Mardi, 13. janvier 2009 10:44 10

Page 57: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e

57

Création de pages avec le RIDLe RID (Rapid graphical Interface Design) permet de créer des pages à partir :• de l’analyse liée au projet,• des modèles RAD standard ou personnalisés,• des gabarits.Les pages générées contiennent uniquement les champs liés aux rubriques de l’analyse.Tout le code nécessaire au fonctionnement de ces pages reste à la charge du déve-loppeur. Vous pouvez directement saisir votre code personnalisé.

Dessin.book Page 57 Mardi, 13. janvier 2009 10:44 10

Page 58: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e58

Choisir un type de champ selon l’informa-tion à afficherWebDev met à votre disposition de nombreux champs :

Vous voulez ... Utilisez un champ detype :

Afficher du texte, un titre, ... Libellé HTML, Libellé

Définir une zone de couleur Cellule, Tableau HTML

Afficher un prix, une quantité, une adresse, une date,une heure, ...

Champ d’affichage formaté

Sélectionner une valeur parmi une liste (Pays, Ville, …) Sélecteur, Combo, Liste

Sélectionner plusieurs valeurs parmi une liste (les desti-nataires d’un message, des fichiers à télécharger, …)

Interrupteur, Liste

Afficher une image graphique (Photo, …) Image, Image clicable

Afficher une animation (Gif animé) Image

Afficher une page selon la zone cliquée sur une image Image clicable

Afficher le contenu d’un fichier en table (Liste des clients,détail d’une commande, …)

Table fichier ou mémoire, Zonerépétée fichier ou mémoire

Afficher une image rafraîchie régulièrement Champ Web Caméra

Répéter des champs dans une page (Catalogue Produitsavec la photo, ...)

Zone répétée

Utiliser un code HTML existant Champ HTML

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

Saisir des informations Champ de saisie

Afficher des informations hiérarchisées (contenu d’un ré-pertoire, ...)

Champ Arbre

Afficher une animation Flash Champ Flash

Aligner des champs (tableau HTML) Cellule, Tableau HTML

Programmer une action dans une page (afficher une pa-ge, valider une saisie, …)

Bouton, Champ Lien

Dessin.book Page 58 Mardi, 13. janvier 2009 10:44 10

Page 59: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e

59

Vous voulez ... Utilisez un champ detype :

Afficher une page d’un autre site dans une de vos pages IFrame

Afficher un histogramme, une courbe, un graphe de typecamembert

Champ Graphe

Afficher une page de votre site à l’intérieur d’une de vospages

Champ Page Interne

Afficher un menu automatique (qui se construit au fur et àmesure du parcours du site)

Champ Chemin de navigation

Afficher des vignettes d’images Champ Vignette

Afficher des fichiers Flex Champ Flex

Intégrer des champs de type SilverLight Champ SilverLight

Dessin.book Page 59 Mardi, 13. janvier 2009 10:44 10

Page 60: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e60

Modèles de champsWebDev permet de créer des modèles de champs. Un modèle de champs est un ensem-ble de champs, réutilisables dans plusieurs pages.Les modifications effectuées dans un modèle de champs sont automatiquement repor-tées sur toutes les pages utilisant ce modèle.Un modèle de champs permet de :• regrouper un ensemble de champs dans un but précis.• rendre les champs indépendants de la page les accueillant.

Un modèle de champs peut être créé :• directement (option "Fichier .. Nouveau .. Page .. Modèle de champs")• à partir de champs présents dans la page (option "Champ .. Refactoring .. Créer un

modèle de champs avec la sélection").Pour créer une page utilisant un modèle de champs, créez un champ de type "Modèle dechamps".Remarque : La programmation associée aux éléments du modèle peut être directementréalisée dans le modèle.

Les caractéristiques des éléments peuvent être désolidarisées du modèle. Par exemple,désolidariser la position d’un champ du modèle pour positionner le champ ailleurs touten conservant les autres évolutions sur le champ (code, style, ...). On parle alors d’héri-tage de champ. Dans ce cas, les éléments sont identifiés par un carré bleu.

Définition d’un modèle de champs : le modèle est encadré d’un trait jaune sous l’éditeur.

Utilisation du modèle dans une page.Les éléments appartenant au modèle sont entourés en bleu et identifiés par un carré jaune.

Dessin.book Page 60 Mardi, 13. janvier 2009 10:44 10

Page 61: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e

61

Quel type d’image choisir : dynamique, statique, générée, ... ? Les images sont souvent utilisées pour illustrer les pages des sites.

Différents types d’images peuvent être utilisés avec WebDev. Chaque type correspond àune utilisation spécifique de l’image.

Voici un récapitulatif des caractéristiques de ces images, et comment les utiliser.

Conseil : utilisez toujours des images homothétiques pour les images provenant d’unebase de données.

Dessin.book Page 61 Mardi, 13. janvier 2009 10:44 10

Page 62: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e62

Type de l’image Caractéristiques

Statique

Image non modifiée pendant l’uti-lisation du site (logo de lasociété, ...)Image modifiée uniquement dansun code navigateur (image sélec-tionnée par un champ Upload).

L’image associée à une image statique doit être sélection-née sous l’éditeur WebDev.Cette image pourra être changée en programmation unique-ment dans un code navigateur.Les formats d’image reconnus par WebDev sont autorisés.Lors de l’enregistrement de la page, l’image est automatique-ment convertie au format GIF ou JPEG, et enregistrée dans lerépertoire <NomProjet>_WEB (sauf si l’image est déjà au for-mat GIF ou JPEG).Lors du déploiement du site WebDev :

- le fichier associé à l’image doit être présent sur le ser-veur.

- si l’image est changée dans un code navigateur, la nou-velle image doit être accessible et dans un format recon-nu par le navigateur.

Dynamique

Image modifiée pendant l’utilisa-tion du site (image du produitdans une fiche, photo dans un an-nuaire, ...)C’est le type d’image le plus sou-vent utilisé.

Une image dynamique peut être changée par programma-tion dans un code serveur ou dans un code navigateur.L’image associée au champ par programmation doit être :

- présente dans le répertoire <NomProjet>_WEB. - dans un format reconnu par le navigateur (GIF, JPEG ou

autre)Attention : l’utilisation de mémos binaires n’est pas possible.

Générée

Image dessinée pendant l’utilisa-tion du site :- graphes (fonctions grXXX)- dessins (fonctions dXXX)Il est possible d’utiliser une imagede fond.

Une image générée est construite au cours de l’utilisation dusite dynamique WebDev.Il est déconseillé d’utiliser ce type d’image pour afficher desfichiers de type "image" existants : les performances de votresite risquent d’être réduites.Quand le navigateur demande l’affichage de l’image (lors del’affichage ou de la réactualisation de la page par exemple),une image temporaire du dessin en cours est réalisée sur leserveur et enregistrée au format JPG. Cette image est affichéesur le navigateur.

Depuis une base de donnéesImages de produits affichéesdans une zone répétée

Ces images sont enregistrées dans des mémos binaires (mé-mo) ou dans des champs texte (chemin).Il est conseillé d’utiliser une image Homothétique centrée :toutes les images affichées seront redimensionnées propor-tionnellement afin d’être affichées dans le champ image.

Dessin.book Page 62 Mardi, 13. janvier 2009 10:44 10

Page 63: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e

63

Créer des effets sur les boutons : boutons personnalisésQuand on crée un bouton par défaut, il est gris. Pour personnaliser ce look, il suffit d’uti-liser des images. Ces images permettent de définir la forme et la couleur du bouton (des-cription du bouton, onglet "Détail").

Si une seule image est liée au bouton, cette image sera utilisée quelle que soit l’actioneffectuée par l’internaute.Pour créer des effets spécifiques, par exemple changer les couleurs lors du survol dubouton, il suffit d’associer plusieurs images au bouton.

Effet de survol

Pour créer uniquement un effet de survol, associez deux images au bouton : une imagecorrespondant à l’état "normal" du bouton et une image correspondant à l’état "survolé".

Ces images sont spécifiées dans l’onglet "Détail" de la fenêtre de description du bouton :

Remarques :• Le bouton "Catalogue" permet de choisir directement les deux types d'images parmi

une bibliothèque d'images livrée avec WebDev.• L’option "Image du cadre / fond avec 3 images" permet de gérer simplement la lar-

geur de l’image associée au bouton. Si cette option est sélectionnée, WebDev découpe automatiquement l’image du bouton en 3 images afin d’être à la même taille que le bouton.

Bouton normal Bouton "Survolé"

Dessin.book Page 63 Mardi, 13. janvier 2009 10:44 10

Page 64: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e64

Effet d’enfoncementPour créer un effet d’enfoncement du bouton, associez une image spécifique aubouton : cette image contient trois dessins. Chacun des dessins correspond à un étatspécifique du bouton : normal, enfoncé, survolé. Dans ce cas, la gestion de l’état du bou-ton est réalisée par une applet Java spécifique livrée avec WebDev (vous ne vous occu-pez de rien, WebDev fait tout !).

Dans ce cas, il suffit de spécifier le fichier image à utiliser dans l’onglet "Détail" de la fe-nêtre de description du bouton (option "Image").Remarque : Le bouton "Catalogue" permet de choisir directement une image à 3 étatsparmi une bibliothèque d'images livrée avec WebDev

Uniformisez le style de vos boutonsPour uniformiser le style de vos boutons, définissez un style spécifique, et utilisez ce sty-le pour tous vos boutons.

Image contenant les différents états du bouton : Normal, Enfoncé et survolé

Dessin.book Page 64 Mardi, 13. janvier 2009 10:44 10

Page 65: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e

65

Choisir un type de bouton / lien Selon l’opération à effectuer sur les champs dela page, plusieurs types de bouton / lien sontdisponibles. Le choix du type de bouton / lien se fait dans ladescription du champ (onglet "Général").

Voici quelques exemples d’utilisation "classique" de boutons / liens dans une page :

• Envoi des données de la page en cours au serveur pour traitementExemple : Formulaire d’enregistrement : le lien permet de vérifier la validité des informations saisies et d’afficher une page de confirmation. Pour effectuer ce type de traitement, utilisez un lien de type "Envoyer la valeur des champs au serveur". Les données de la page sont envoyées au serveur pour être traitées.

• Effectuer un traitement sur le serveur, sans récupérer les données de la page en coursExemple : Page de menu constituée de boutons : chaque bouton permet de lancer une page du site. Pour effectuer ce type de traitement, utilisez un bouton de type "Aucune".

• Effectuer un traitement en code navi-gateurExemple : Exécuter un calcul simple en local, un contrôle de saisie, ...Pour effectuer ce type de traitement, utilisez un bouton de type "Aucune".

• Affichage d’une page extérieure au site WebDevExemple : Lancer un site de moteur de recherche à l’aide d’un bouton. Pour effectuer ce type de traitement, utilisez un bouton de type "Aucune".

• Réinitialiser les champs de la pageExemple : Lien permettant de vider les champs de la page en cours. Pour effectuer ce type de traitement, utilisez un lien de type "Ré-initialiser les champs de la page".

Dessin.book Page 65 Mardi, 13. janvier 2009 10:44 10

Page 66: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e66

Ordre d’exécution des codes des boutons / liensDeux codes de clic sont associés aux boutons / liens :

• un code de clic navigateur, saisi en WLangage (ou en Javascript) sous l’éditeur de code. Ce code est intégré à la page HTML et sera exécuté sur le poste de l’inter-naute.

• un code de clic serveur saisi en WLangage (uniquement dans les pages dynami-ques). Ce code sera exécuté sur le serveur.

Le tableau ci-après présente les différents codes exécutés selon le type de bouton / lienchoisi, et l’action associée.L’aspect du bouton / lien et sa destination n’influent pas sur l’ordre des codes exécutés.

Code de clicnavigateur

Code de clicserveur

Dessin.book Page 66 Mardi, 13. janvier 2009 10:44 10

Page 67: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e

67

Opération Ordre des codes exécutés Remarques

Envoi auserveur (submit)

Action associée :AucuneExécuter le code de clic du bouton / lien

Codes exécutés :1. Code de clic navigateur du champ.2. Code navigateur du submit de la page (s’il existe).3. Envoi des valeurs présentes dans les champs de

la page pour mettre à jour le contexte de la pagesur le serveur.

4. Code serveur du champ.

Mise à jour automati-que du contexte depage sur le serveur(pages dynamiquesuniquement).

Action associée : Afficher la page

Codes exécutés :1. Code de clic navigateur du champ.2. Code navigateur du submit de la page (s’il existe).3. Envoi des valeurs présentes dans les champs de

la page pour mettre à jour le contexte de la pagesur le serveur.

4. Code serveur du champ.5. Affichage de la page.

Mise à jour automati-que du contexte depage sur le serveur(pages dynamiquesuniquement).Affichage automati-que de la page.

Réinitialisa-tion depage (reset)

Action associée : Aucune

Codes exécutés :1. Code de clic navigateur du champ.2. Affichage de la page initiale (page avec tous les

champs initialisés à vide ou à 0 et exécution ducode d’initialisation de chacun des champs).

Aucune Action associée : Aucune

Codes exécutés :Code navigateur uniquement.

Action associée : Exécuter le code de clic du bouton/ lien

Codes exécutés :1. Code de clic navigateur du champ.2. Code serveur du champ.

Action associée : Afficher la page

Codes exécutés :1. Code de clic navigateur du champ.2. Code serveur du champ.3. Affichage de la page.

Affichage automati-que de la page

Dessin.book Page 67 Mardi, 13. janvier 2009 10:44 10

Page 68: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e68

Répéter un groupe de champsLes zones répétées permettent de répéter un ensemble de champs "n" fois. Lors de cetteré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 dedonnées.

Pour chaque champ de la zone répétée, plusieurs caractéristiques peuvent être modi-fiées lors de la répétition : libellé, couleur du texte, ...Les répétitions peuvent être réalisées :• sur une colonne,• sur plusieurs colonnes. Dans ce cas, on parle de "Zone répétée horizontale".

Lors de la création d’une zone répétée, il est possible de lier la zone répétée directementà un fichier de données ou à une requête. Les attributs de la zone répétée sont automa-tiquement définis. Aucune programmation n’est nécessaire.

Création de la zone répétée sous l’éditeur de WebDev

Affichage de la zone répétée sous le navigateur

Dessin.book Page 68 Mardi, 13. janvier 2009 10:44 10

Page 69: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e

69

Positionner les champs dans une pageWebDev offre plusieurs méthodes pour optimiser le positionnement des champs dansles pages :

• les tables de positionnement• les règles et la grille

Les tables de positionnementLes tables de positionnement sont le moyen le plus courant pour aligner des champsdans une page HTML. Elles permettent également de créer des bas de page.

Pour activer la visualisation des tables de positionnement, utilisez l’option "Affichage ..Visualisation du tableau de positionnement".

Les règles et la grilleLes règles d’alignement comme la grille magnétique permettent d’aligner simplementles champs d’une page.Les règles sont affichables grâce à l’option "Affichage .. Règles".La grille est activable grâce à l’option "Affichage .. Grille".

Dessin.book Page 69 Mardi, 13. janvier 2009 10:44 10

Page 70: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e70

Superposer les champsPour obtenir des effets de transparence ou de profondeur, superposez vos champs.

Chaque champ possède une option "Le champ peut être superposé" (onglet "Détail" dela fenêtre de description du champ).En cochant cette option, le champ n’est plus lié aux tables de positionnement de la page.Vous pouvez déplacer et positionner un champ "au-dessus" de chacun des champs devotre page.Attention : on définit le champ qui va se superposer, et non pas celui qui est recouvert etaccepte le recouvrement.

Par exemple, pour superposer un libellé sur une image, il faut rendre le libellé superpo-sable et positionner le libellé sur l’image.

Attention : Pour que la superposition soit réalisée, l’internaute doit posséder un naviga-teur récent (Internet Explorer version 4 ou supérieur, Netscape 4.7 ou supérieure).Ce type de navigateur est aujourd’hui très répandu.

Sous l’éditeur

Sous le navigateur

Dessin.book Page 70 Mardi, 13. janvier 2009 10:44 10

Page 71: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e

71

Des feuilles de styles CSS : pour simplifier la mise en pageLes feuilles de styles sont des modèles qui permettent d’uniformiser la présentation deschamps dans les pages.

Les feuilles de styles permettent de définir :• la taille et la forme de vos textes, la police,• l’alignement de vos paragraphes, les retraits de paragraphe, ... • le style de texte (gras ou italique), sa couleur, ...Et bien plus encore.

Quand vous modifiez une caractéristique du style, tous les champs associés à ce stylesont mis à jour. Il est ainsi possible de modifier la charte graphique d’un site en effec-tuant uniquement quelques modifications dans les styles utilisés.

Un exemple d’utilisation des feuilles de styles : augmenter la taille de 8 à 15 :

Attention : Pour utiliser les feuilles de styles (CSS), l’internaute doit posséder un naviga-teur supportant les feuilles de styles (Internet Explorer version 4 ou supérieur, Netscape4.7 ou supérieure).Ce type de navigateur est aujourd’hui très répandu.Remarque : L’onglet "CSS personnalisé" permet de saisir directement du code CSS. Cecode sera ensuite ajouté dans la feuille de styles CSS.

Dessin.book Page 71 Mardi, 13. janvier 2009 10:44 10

Page 72: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e72

Site centré ou adapté ? La mise en page est un élément fondamental dans la réalisation d’un site. Pour optimisercette mise en page, il est nécessaire de prendre en compte la résolution de l’écran del’internaute.Par exemple, si votre site est créé pour la résolution 1024 x 768 pixels, les internautesutilisant une résolution de 800 x 600 verront apparaître de nombreux ascenseurs.

D’une manière générale, à la date d’impression de ce manuel, il est conseillé de déve-lopper des sites optimisés pour une résolution 800 x 600.

Deux types de mise en page d’un site peuvent être utilisés :• site centré :

Les pages sont centrées dans le navigateur. Si la résolution de l’internaute est supé-rieure à la résolution optimale du site, des marges blanches apparaissent de part et d’autre de la page.

• site adapté : Les pages sont affichées normalement dans le navigateur. Si la résolution de l’inter-naute est supérieure à la résolution optimale du site, une marge blanche est ajoutée à droite des pages.

Remarque : Le type de mise en page (centré ou adapté) configuré dans un modèle de pa-ges sera automatiquement utilisé par les pages associées à ce modèle.

Résolution : 800 x 600 Résolution : 1024 x 768 : les marges apparaissent de chaque côté de la page

Résolution : 1024 x 768 : la page reste "collée" à gauche

Résolution : 800 x 600

Dessin.book Page 72 Mardi, 13. janvier 2009 10:44 10

Page 73: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e

73

10 conseils d’ergonomie ...

1 Soignez l’entrée dans votre site.

Un site est lancé à partir d’une page d’accueil. Cette page permet "d’entrer" dans le site.Soignez la présentation de la page d’accueil et simplifiez le lancement du site : le logo oule lien permettant de lancer le site doit être visible et facilement identifiable.

2 Présentez-vous.

Lorsque l’internaute arrive sur un site, il doit facilement identifier la personne ou la so-ciété responsable du site par un choix de la page d’accueil : il suffit d’indiquer un nom,une adresse postale et une adresse internet, ...

D’autres informations sont utiles :• la date de réalisation du site ou de dernière mise à jour,• le thème du site, son contenu et sa finalité,• l’administrateur physique de la société, numéro RCS de la société, ...

Dessin.book Page 73 Mardi, 13. janvier 2009 10:44 10

Page 74: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e74

3 Vos pages sont très longues ? Permettez à l’internaute de retourner directementen haut de page.

Lorsque vos pages sont très longues (plus de 2 écrans), utilisez des boutons ou des lienspour retourner rapidement en haut de la page (et éviter l’utilisation de l’ascenseur).

4 Harmonisez le style et l’alignement de vos boutons.

Vérifiez que vos boutons utilisent tous le même "look", et vérifiez l’alignement de vos bou-tons.

5 Evitez les ascenseurs inutiles.

Pour éviter l’affichage d’ascenseurs inutiles dans les pages d’un frameset, sélectionnezl’option "Ascenseur automatique" dans la fenêtre de description de la page (onglet "Fra-me"). Cette option permet d’afficher l’ascenseur uniquement s’il est nécessaire.

Début de la page Fin de la page avec un lien permettant de revenir en haut de page

Boutons alignés et harmonisés

Boutons non alignés, utilisant différents styles

Dessin.book Page 74 Mardi, 13. janvier 2009 10:44 10

Page 75: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e

75

6 Vous affichez des listes de plus de 20 éléments ? Utilisez plusieurs pages pourlister les éléments (champ réglette).

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

Pour conserver les proportions de vos images, il est conseillé de choisir :• soit des images à 100% (pour les images statiques ou dynamiques ou si l’image est

de taille identique à celle du champ).• soit des images homothétiques centrées (pour les images générées ou les images

de taille variée provenant d’une base de données) : la taille de l’image s’adaptera homothétiquement à la zone définie pour l’image. Les proportions seront respec-tées.

Image étirée(déconseillé)

Image à 100 % si la dimension du champ correspond à celle de l’image, sinon image

Homothétique

Sélection du mode d’affichage sous l’éditeur(description de l’image,

onglet "Général")

Dessin.book Page 75 Mardi, 13. janvier 2009 10:44 10

Page 76: concepts webdev 14

Part

ie 4

: C

réer

les p

ag

es d

’un

sit

e76

8 Vous utilisez des images ? Testez leur bon affichage dans vos pages.

En cas de problème d’affichage, vérifiez principalement que :• l’image existe,• l’image est enregistrée dans un format reconnu par le navigateur (GIF ou JPG par

exemple),• l’image est présente dans le sous-répertoire du projet <NomProjet>_WEB.

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

10 Vous proposez un catalogue de produits avec possibilité de commander ?

Indiquez toutes les informations sur le produit (nom, référence, prix, ...) à chaque fois, ycompris le bouton ou le lien permettant de commander le produit.

Image sous l’éditeur Image sous le navigateur.Problème d’affichage des

images

Dessin.book Page 76 Mardi, 13. janvier 2009 10:44 10

Page 77: concepts webdev 14

PARTIE 5

Eléments du projet supplémentaires

Dessin.book Page 77 Mardi, 13. janvier 2009 10:44 10

Page 78: concepts webdev 14

Dessin.book Page 78 Mardi, 13. janvier 2009 10:44 10

Page 79: concepts webdev 14

Part

ie 5

: E

lém

en

ts d

u p

roje

t su

pp

lém

en

tair

es

79

WebDev et les étatsGrâce à l’éditeur d’états, réalisez des impressions de qualité.Un état est créé selon le principe suivant :• les données à imprimer sont issues d’une source de données (fichier décrit dans

une analyse, vue HyperFileSQL, requête, zone mémoire ou fichier texte).• l’état regroupe, trie et met en forme les données.

L’état créé peut ensuite être :• imprimé sur l’imprimante du serveur (cas d’un site Intranet).• affiché dans le navigateur de l’internaute (format HTML, PDF, ...).• envoyé par mail à l’internaute (format PDF).• ...

Dessin.book Page 79 Mardi, 13. janvier 2009 10:44 10

Page 80: concepts webdev 14

Part

ie 5

: E

lém

en

ts d

u p

roje

t su

pp

lém

en

tair

es

80

Modèles d’étatsDans une société, bien souvent, les impressions utilisent un look et une mise en pageunifiés : date en haut à droite dans un format spécifique, pied de page avec heure d’im-pression et nom du fichier, logo en haut à gauche, ...Les modèles d’états permettent d’uniformiser simplement la mise en page de vos états.

Un modèle d’états peut être créé : • directement (option "Fichier .. Nouveau.. Etat .. Modèle d’Etats").• à partir de l’état en cours (option "Fichier .. Enregistrer comme un modèle").Pour créer un état utilisant un modèle, sélectionnez le modèle à utiliser lors de la créa-tion de l’état.Remarque : La programmation associée aux éléments du modèle peut être directementréalisée dans le modèle.

Les caractéristiques des éléments peuvent être désolidarisées du modèle. Par exemple,désolidariser la position d’un champ du modèle pour positionner le champ ailleurs touten conservant les autres évolutions sur le champ (code, style, ...). On parle alors d’héri-tage. Dans ce cas, les éléments sont identifiés par un carré bleu.

Définition d’un modèle d’états sous l’éditeur d’états.

Utilisation du modèle dans différents états. Les éléments appartenant au modèle sont identifiés par un carré jaune.

Les éléments du modèle surchargés sont identifiés par un carré bleu.

Dessin.book Page 80 Mardi, 13. janvier 2009 10:44 10

Page 81: concepts webdev 14

Part

ie 5

: E

lém

en

ts d

u p

roje

t su

pp

lém

en

tair

es

81

Différents modes d’impressionPour imprimer des documents générés par votre site (factures, devis, ...), créez des étatsgrâce à l’éditeur d’états.

Pour imprimer ces états quelle que soit la configuration du poste de l’internaute, il estconseillé de proposer au moins deux modes d’impression :• Impression au format HTML : L’état s’affiche dans une nouvelle page du site. L’inter-

naute n’a qu’à utiliser le bouton "Imprimer" du navigateur pour imprimer l’état. Aucun logiciel spécifique n’est nécessaire.

• Impression au format PDF : Ce mode d’impression nécessite la présence d’Acrobat Reader sur le poste de l’internaute. L’impression se fait directement à partir de ce logiciel.

Etat sous l’éditeur d’états de WebDev

Impression en PDFImpression en HTML

Dessin.book Page 81 Mardi, 13. janvier 2009 10:44 10

Page 82: concepts webdev 14

Part

ie 5

: E

lém

en

ts d

u p

roje

t su

pp

lém

en

tair

es

82

ComposantUn composant est un ensemble d'éléments WebDev : pages, états, analyse, ... Cet en-semble d'éléments effectue une fonctionnalité précise. Par exemple, un composant peutcorrespondre à une des fonctionnalités suivantes :• Envoi de Fax,• Envoi d'e-mails,• ...

Un composant WebDev peut être redistribué à d'autres développeurs WebDev (gratuite-ment ou non). Ces développeurs pourront ainsi intégrer simplement la fonctionnalité pro-posée par le composant dans leur site. Le composant sera donc intégré au site, etdistribué avec le site.

Dessin.book Page 82 Mardi, 13. janvier 2009 10:44 10

Page 83: concepts webdev 14

Part

ie 5

: E

lém

en

ts d

u p

roje

t su

pp

lém

en

tair

es

83

Composants multi-produitsWinDev, WebDev et WinDev Mobile offrent la possibilité de créer des composants multi-produits. Ces composants peuvent contenir des fenêtres, des pages, ... et être utilisésaussi bien dans un projet WinDev, WebDev ou WinDev Mobile.

Le principe est le suivant :

Dessin.book Page 83 Mardi, 13. janvier 2009 10:44 10

Page 84: concepts webdev 14

Part

ie 5

: E

lém

en

ts d

u p

roje

t su

pp

lém

en

tair

es

84

Groupware utilisateurLe Groupware Utilisateur permet d’inclure simplement une gestion des utilisateurs et deleurs droits dans un site WebDev.Deux types d’utilisateurs sont pris en compte :• utilisateur simple, utilisant directement le site.• superviseur, pouvant configurer les utilisateurs et leurs droits.

Dessin.book Page 84 Mardi, 13. janvier 2009 10:44 10

Page 85: concepts webdev 14

PARTIE 6

Spécificités WEB

Dessin.book Page 85 Mardi, 13. janvier 2009 10:44 10

Page 86: concepts webdev 14

Dessin.book Page 86 Mardi, 13. janvier 2009 10:44 10

Page 87: concepts webdev 14

Part

ie 6

: S

pécif

icit

és W

EB

87

Afficher et enchaîner les pagesUn site est un ensemble de pages. Ces pages sont reliées entre elles grâce aux boutons(ou aux liens). Un clic sur un bouton entraîne l’affichage d’une nouvelle page.

Pour afficher une nouvelle page, il faut se poser deux questions :1. où afficher la page (nouveau navigateur, frame, ....) ? 2. quelle page afficher ?

Où afficher la page ? L’affichage d’une page se fait dans une "destination" spécifique : page en cours, nou-veau navigateur, ...La destination peut être définie : • soit sous l’éditeur de pages : aucune programmation n’est nécessaire.• soit sous l’éditeur de code, dans un traitement du bouton (ou du lien).

Sélection de la destination sous l’éditeur de pages (cas le plus courant)

Dans un bouton, pour définir la destination de la page à afficher :

• Affichez la description du bouton ou du lien (clic droit sur le champ, option "Description").

• Dans la liste des destina-tions, sélectionnez une destination prédéfinie ou une frame (dans le cas d’un frameset).

Remarque : Les destinations prédéfinies sont présentées dans les pages suivantes dece manuel.

Sélection de la destination sous l’éditeur de code

Lorsque la destination dépend d’un choix de l’internaute, cette destination doit être sé-lectionnée par programmation. Par exemple, si l’internaute n’indique pas son mot depasse, une page d’erreur apparaît dans un nouveau navigateur; sinon, la page suivantes’affiche dans le navigateur en cours.La fonction WLangage ChangeDestination permet de modifier par programmation la des-tination d’une action. Cette fonction doit être utilisée dans un code navigateur.

Dessin.book Page 87 Mardi, 13. janvier 2009 10:44 10

Page 88: concepts webdev 14

Part

ie 6

: S

pécif

icit

és W

EB

88

Choisir une destinationLors du choix de la destination pour un bouton, un lien, une image clicable, une optionde menu, ... il est possible de choisir :• une destination prédéfinie : quatre destinations prédéfinies sont proposées :

- Navigateur en cours (_top pour les habitués)- Frame en cours (_self)- Frame parent (_parent)- Nouveau navigateur (_blank). Dans ce cas, vous pouvez choisir les caractéristi-ques du nouveau navigateur (présence de la barre de menu, de la barre de mes-sage, ...).

• une frame du frameset en cours.

Remarque : dans ce schéma, la zone grisée représente la zone dans laquelle la page est affichée lors du clicsur le bouton.

Navigateur en cours (_top)

Frame en cours (_self)

Page initiale Nouvelle page affichée dansla totalité du navigateur

Clic sur le bouton

Page initiale Nouvelle page affichée dans la même frame

Clic sur le bouton

Dessin.book Page 88 Mardi, 13. janvier 2009 10:44 10

Page 89: concepts webdev 14

Part

ie 6

: S

pécif

icit

és W

EB

89

Frame parent (_parent)

Nouveau navigateur (_blank)

Page initiale (imbrication de 2 framesets)

Nouvelle page affichée dans la page contenant le

second frameset

Clic sur le bouton

Page initiale Nouvelle page affichée dans une nouvelle

fenêtre du navigateur

Clic sur le bouton

Fenêtre de définition des caractéristiques du nouveau navigateur

Dessin.book Page 89 Mardi, 13. janvier 2009 10:44 10

Page 90: concepts webdev 14

Part

ie 6

: S

pécif

icit

és W

EB

90

Quelle page afficher ? La page à afficher peut être définie :• soit sous l’éditeur de pages (aucune programmation n’est nécessaire).• soit sous l’éditeur de code dans un traitement du bouton (du lien, de l’image

clicable, ...).

Sélection de la page à afficher sous l’éditeur de pages (cas le plus courant)

Pour définir la page à afficher :

• Affichez la fenêtre de descrip-tion du champ (clic droit sur le champ, option "Description").

• Dans la liste des actions, sélec-tionnez la page à afficher.

Sélection de la page à afficher parprogrammation

Il est nécessaire de sélectionner la page à afficher par programmation lorsque :

• plusieurs pages peuvent être affichées (par exemple soit une page d’erreur si le mot de passe n’est pas saisi, soit la page suivante du site).

• une action particulière doit être effectuée sur le serveur (calcul, lecture d’enregistre-ment, ...).

Plusieurs fonctions du WLangage permettent d’ouvrir une nouvelle page (ou frameset).Les principales fonctions sont : PageAffiche (pour les pages) et FramesetAffiche (pourles framesets).

Dessin.book Page 90 Mardi, 13. janvier 2009 10:44 10

Page 91: concepts webdev 14

Part

ie 6

: S

pécif

icit

és W

EB

91

Affichage d’une page dynamique : création du contexte associéNous savons que WebDev permet de créer des pages dynamiques. Le contenu dynami-que des pages est défini ‘‘à la volée’’ à l’exécution de la page (c’est-à-dire lorsque la pageest affichée sur le navigateur de l’internaute).

Pour chaque page dynamique affichée sur le navigateur, un "contexte de page" est créésur le serveur. Ce contexte contient toutes les informations relatives à la page (valeur desvariables en cours, contenu des champs, ....).

Chaque page dynamique (affichée sur le poste de chaque internaute) est associée à uncontexte de page.Si la page permet d’afficher des données différentes (fiche produit avec boutons de par-cours par exemple), à chaque nouvel enregistrement affiché, le contexte est modifié, etla page est uniquement actualisée.

Poste Serveur

Contexte de page

Poste de l’internaute

Dessin.book Page 91 Mardi, 13. janvier 2009 10:44 10

Page 92: concepts webdev 14

Part

ie 6

: S

pécif

icit

és W

EB

92

Afficher ou Actualiser une page dynamique ? PageAffiche ou PageActualise ?Le WLangage propose deux fonctions pour afficher une page dynamique : PageAfficheet PageActualise. Ces fonctions permettent d’afficher ou d’actualiser une page dynami-que. Ces deux concepts sont totalement différents.

Affichage d’une page = nouvelle page

L’affichage d’une page dynamique correspond à l’ouverture d’une "nouvelle page" sur lenavigateur. Par exemple, ouverture de la page "Visu_Produit" permettant de visualiserl’article sélectionné dans une table.

Attention : Si vous "affichez" une page précédemment ouverte, la page et son contextesont fermés puis réouverts. Toutes les données de la page sont ré-initialisées.

Actualisation d’une page = ré-affichage de la page (plus rapide)

L’actualisation d’une page dynamique consiste à ré-afficher une page déjà ouverte sousle navigateur. L’action effectuée est identique à l’utilisation de la touche "Rafraîchir" dunavigateur.Les données dynamiques présentes dans la page sont mises à jour en fonction des con-textes présents sur le serveur. Seules les données modifiées sont réaffichées.

Exemple : Dans un site commercial, la page présentant la liste des produits sélectionnésest actualisée lorsqu’un nouveau produit est commandé.

Conseil de performances : Pour actualiser les données affichées dans une page dynamique, utilisez la fonction"PageActualise". Avec la fonction "PageAffiche", le temps de chargement de la page estplus long.

Dessin.book Page 92 Mardi, 13. janvier 2009 10:44 10

Page 93: concepts webdev 14

Part

ie 6

: S

pécif

icit

és W

EB

93

Empêcher le retour sur une pageLe bouton "Précédent" du navigateur permet à l’internaute de revenir sur une page déjàconsultée. Cependant, le retour sur une page n’est pas toujours souhaitable.Par exemple, dans un site commercial, si l’internaute revient sur la page de validation decommande, il pourrait valider sa commande 2 fois, et donc passer 2 commandes.

Pour empêcher le retour sur une page par le bouton "Précédent" du navigateur :

1. Affichez la page sous l’éditeur de pages de WebDev.2. Sélectionnez l’option "Affichage .. Description de la sélection". La fenêtre de descrip-

tion de la page s’affiche.3. Affichez l’onglet "Détail".4. Cochez l’option "Empêcher le retour sur cette page par le bouton "Précédent" du na-

vigateur".5. Validez.

Dessin.book Page 93 Mardi, 13. janvier 2009 10:44 10

Page 94: concepts webdev 14

Part

ie 6

: S

pécif

icit

és W

EB

94

Télécharger un fichier (image, ...) vers le serveur (Upload)L’upload est l’opération qui consiste à télécharger sur le poste serveur un fichier prove-nant du poste de l’internaute.

Un exemple simple : La création d’un contact dans un annuaire. L’internaute veut associer une photographie à la fiche du contact. Cette photo est pré-sente sur le disque dur de son poste.Le champ de type UPLOAD permet à l’internaute de sélectionner l’image grâce à un bou-ton "Parcourir".Lors de la validation de la fiche, le fichier image sélectionné est envoyé au serveur et co-pié sur le disque dur du serveur (fonction UploadCopieFichier).Lors de la consultation du contact, l’image apparaîtra dans la fiche.

Note : L’aspect du bouton "Parcourir" est défini par le navigateur.

Sur le navigateur de l’internaute

Lors de la validation de la page, le fichier "uploadé" est copié

sur le disque dur du serveur.

Serveur WEB

Poste serveur chez l’hébergeur

Dessin.book Page 94 Mardi, 13. janvier 2009 10:44 10

Page 95: concepts webdev 14

Part

ie 6

: S

pécif

icit

és W

EB

95

Réaliser un traitement sur plusieurs pages successivesDans un site commercial, une prise de commande peut par exemple être réalisée sur dif-férentes pages :• page 1 : Sélection des produits à commander.• page 2 : Visualisation du panier.• page 3 : Validation de la commande et saisie des coordonnées du client.

Dans ce cas, l’écriture des données dans les fichiers ne doit s’effectuer que dans le codedu bouton de validation de la commande : tous les éléments de la commande doiventêtre mémorisés jusqu’à la validation finale. N’écrivez pas dans les fichiers en cours detraitement.

Remarque : Il est également possible d’utiliser une transaction, mais nous vous recom-mandons de mémoriser les informations de la commande.

Page 1 : Sélection des produits

Page 3 : Saisie des coordonnées du client

Page 2 : Visualisation du panier

Dessin.book Page 95 Mardi, 13. janvier 2009 10:44 10

Page 96: concepts webdev 14

Part

ie 6

: S

pécif

icit

és W

EB

96

Envoyer des emailsLes emails permettent :• aux internautes de communiquer entre eux : envoi d’emails au responsable du site,

site de mailing-list, ...• de valider une prise de commande : dans un site commercial, un email est envoyé

aux internautes pour valider leur commande.• de transférer des données d’un poste à un autre : les nouvelles commandes saisies

sur un site commercial sont transférées par email au siège de la société pour traite-ment, ...

WebDev permet d’envoyer des emails depuis un site par 2 méthodes.

1 Envoi de l’email depuis le poste de l’internaute

Utilisez cette méthode lorsque l’internaute doit envoyer un email à une adresse définie :auteur du site, support technique, service commercial, ... La fonction navigateur EmailOuvreMessagerie permet d’ouvrir le logiciel de messageriede l’internaute. Certains paramètres peuvent être remplis par défaut : adresse email dudestinataire, ...

Cette méthode permet d’utiliser directement la messagerie de l’internaute : aucun trai-tement spécifique n’est à effectuer dans le site WebDev.

Dessin.book Page 96 Mardi, 13. janvier 2009 10:44 10

Page 97: concepts webdev 14

Part

ie 6

: S

pécif

icit

és W

EB

97

2 Envoi de l’email depuis le serveur (pages dynamiques uniquement)

Dans ce cas, c’est le serveur qui gère l’envoi des emails.L’envoi des emails peut être réalisé :• directement dans le site dynamique WebDev (par exemple pour un transfert de don-

nées par email, ou pour un email de validation de commande);• par le spooler d’email (livré avec WebDev).

Utilisez cette méthode pour une gestion personnalisée des emails :• un contrôle sur le contenu des emails envoyés par les internautes (cas d’un site de

type "liste de diffusion"),• la vérification de la validité de l’adresse du destinataire,• le cryptage des informations envoyées par emails,• la validation d’un traitement, ...

Dessin.book Page 97 Mardi, 13. janvier 2009 10:44 10

Page 98: concepts webdev 14

Part

ie 6

: S

pécif

icit

és W

EB

98

Conserver des informations sur le poste de l’internaute grâce aux cookiesUn cookie est un fichier enregistré par le site WebDev sur le poste de l’internaute. Ce fi-chier peut être relu à tout moment depuis le serveur ou par le navigateur. Les cookiespermettent de stocker des informations persistantes sur le poste de l’internaute.

Par exemple, lors de la première connexion de l’internaute, des informations lui sontdemandées : son nom d’utilisateur, son login, ... et sont stockées sur sa machine. Lorsdes connexions suivantes, le site WebDev ira directement lire ces informations dans lecookie créé lors de la première connexion et pourra saluer l’internaute par son prénomdès la première page.

Pour créer des cookies dans un site WebDev, utilisez la fonction du WLangage CookieE-crit.Pour lire les cookies dans un site WebDev, utilisez la fonction du WLangage CookieLit.

Le site WebDev lit des données précédemment

enregistrées sur le poste de l’internaute.

1ère connexion

Le nouvel internaute doit ici saisir son nom et son mot de passe

Le site WebDev enregistre des informations

données par l’internaute sur son poste.

Connexions suivantes

Le site WebDev affiche par défaut les informations lues dans le cookie

Dessin.book Page 98 Mardi, 13. janvier 2009 10:44 10

Page 99: concepts webdev 14

Part

ie 6

: S

pécif

icit

és W

EB

99

Protéger l’accès au site : mots de passeUne gestion d’accès à un site par mot de passe est nécessaire dans deux cas :1. Protéger des informations personnelles2. Limiter l’accès à un site

Protéger des informations personnelles

Pour accéder de nouveau à des données personnelles, l’internaute peut spécifier un motde passe. Ainsi, dans un site commercial, un mot de passe défini par l’internaute lui per-met d’accéder au détail de ses précédentes commandes.

Dans ce cas, la gestion de l’accès à un site nécessite :

• une identification : A la première connexion, l’internaute s’identifie et saisit son mot de passe. Aux connexions suivantes, l’internaute s’identifie et accède aux fonctionnalités qui lui sont réservées (et à son historique, ...).

• la possibilité pour l’internaute de retrouver un mot de passe oublié.

WebDev est livré avec toutes les ressources nécessaires à la gestion de mots de passepersonnels.

Limiter l’accès à un sitePar défaut, un site internet est accessible à n’importe quel internaute. Mais un site n’estpas toujours destiné au grand public : certaines fonctionnalités peuvent être réservéesà certains types d’internautes (administrateur de site, ...).

Dans ce cas, le gestionnaire du site attribue un mot de passe à chaque internaute. Cemot de passe ne pourra pas être modifié. Ce mot de passe permet un accès à des fonc-tionnalités plus ou moins limitées.

Par exemple, dans un site commercial :• un mot de passe spécifique sera attribué aux commerciaux : ils accéderont aux sta-

tistiques de ventes, ...• un mot de passe spécifique sera attribué à l’équipe marketing : ils pourront mettre

en ligne de nouveaux produits.

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

Dessin.book Page 99 Mardi, 13. janvier 2009 10:44 10

Page 100: concepts webdev 14

Part

ie 6

: S

pécif

icit

és W

EB

100

Crypter les informations qui transitent sur le Web avec SSLPar défaut, les données circulant entre le poste de l’internaute et le serveur Web ne sontpas 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'uti-lisation du protocole SSL (Secure Socket Layer).

Mise en place des transactions sécurisées par protocole SSLPour mettre en place des transactions sécurisées par SSL, il est nécessaire d’effectuerles formalités liées à ce protocole (certification payante d’une clé SSL par un organismespécialisé). Pour plus de détails, consultez l’aide en ligne de WebDev.

Transactions sécurisées par SSL dans un site WebDevSeul le transfert de données sensibles doit être sécurisé : transfert du numéro de cartebancaire 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 nou-velle page par un bouton (ou un lien). Il suffit d’utiliser la fonction SSLActive dans le codenavigateur du bouton (ou du lien). Dès l'ouverture de la page sécurisée, toutes les actionseffectuées seront en mode sécurisé (c’est-à-dire crypté).

Pour revenir en mode non sécurisé, il suffit d’utiliser la fonction SSLActive(Faux) dans lecode navigateur d'un bouton (ou d’un lien) permettant d'ouvrir une nouvelle page.

Dessin.book Page 100 Mardi, 13. janvier 2009 10:44 10

Page 101: concepts webdev 14

Part

ie 6

: S

pécif

icit

és W

EB

101

Avantage sécuritaire pour votre site dynamique : la gestion du "Back"Un navigateur permet de parcourir les différentes pages d’un site à l’aide des boutons"Suivant" ( ) et "Précédent" ( ) de son menu.

A chaque nouvelle page dynamique affichée sur le navigateur, un contexte de page spé-cifique à son traitement est créé sur le serveur.

Lorsqu’une même page dynamique est utilisée pour afficher des données différentes(page avec table fichier, zones répétées ou page de type "Fiche avec parcours", ...), lecontexte de page présent sur le serveur varie en fonction des données affichées.

Lorsque l’internaute appuie sur le bouton "Précédent" (ou "Back"), le navigateur ne pré-vient ni le site ni le serveur. Le navigateur revient à la page précédente sans le contextecorrespondant.

Aucune gestion particulière n’est nécessaire lorsqu’on fait un "Back" entre des pages dif-férentes.Une gestion spécifique est nécessaire pour une même page dynamique affichant desdonnées différentes.

Pourquoi gérer le "Back" ? Un exemple simple ...Pour comprendre la nécessité de la gestion du "Back", étudions un exemple simple : unepage dynamique qui permet d’afficher la liste des lecteurs DVD-ROM disponibles.

Etape 1 : Affichage de la liste des DVD-ROM

Le contexte contient la liste des éléments affichés dans cette table : lecteurs de DVDROM de la marque CREATIVE.

Dessin.book Page 101 Mardi, 13. janvier 2009 10:44 10

Page 102: concepts webdev 14

Part

ie 6

: S

pécif

icit

és W

EB

102

Etape 2 : Clic sur le lien "Périphériques suivants".

Les périphériques de la marque "NEC" sont affichés. Le contexte de la page sur le serveurest mis à jour : le contexte contient la liste des éléments affichés dans cette table (lec-teurs de DVD-ROM de la marque NEC).

Etape 3 : Clic sur le bouton "Back" du navigateur.

La page dynamique affichée sur le navigateur correspond à la page affichée à l’étape 1.Cependant, le serveur n’est pas informé par le navigateur que l’internaute a utilisé la tou-che Back. Le contexte de page sur le serveur est toujours celui correspondant aux enre-gistrements "NEC".Si l’internaute sélectionne dans la table un élément (DVD ROM de la marque "CREATI-VE"), l’élément sélectionné sera l’élément correspondant dans le contexte : un élémentNEC. Il y a désynchronisation entre la page dynamique visualisée et le contexte de pageprésent sur le serveur. Le moteur WebDev détecte cette désynchronisation.Une gestion du bouton Back est nécessaire.

Dessin.book Page 102 Mardi, 13. janvier 2009 10:44 10

Page 103: concepts webdev 14

Part

ie 6

: S

pécif

icit

és W

EB

103

Comment gérer le "Back" ?Pour gérer le "Back", vous pouvez utiliser :

• le code de synchronisation de la page dynamique. Ce code est appelé en cas de désynchronisation.

• un champ de saisie caché (champ de saisie invisible) pour identifier l’enregistre-ment affiché sur le navigateur.

• l’option "Désactiver le mécanisme de synchronisation des pages pour ce champ" sur vos boutons et/ou vos liens (onglet "Avancé" de la description du bouton).

Selon le type d’action pouvant être effectué dans la page dynamique, il est possible dechoisir et de combiner l’une ou l’autre de ces options.

Exemple détaillé de gestion du BackUne page dynamique permet de parcourir les différents produits d’un site. Les boutonsprésents dans la page sont les suivants :

• Retour au menu principalCette action ne nécessite pas de gestion particulière du "Back". Ce bouton ne mani-pule pas les fichiers de données : une désynchronisation entre le contexte et la page affichée n’a pas d’influence.

• Supprimer le produit en coursL’action "Supprimer le produit en cours" manipule un fichier de données. Il est impor-tant que l’enregistrement supprimé corresponde à l’enregistrement visualisé par l’internaute.Pour gérer le "Back" dans ce cas, il est conseillé d’utiliser :

- un champ caché (invisible) dans la page dynamique : ce champ contiendra l’iden-tifiant de l’enregistrement réellement en cours sur le navigateur.- le code de synchronisation : ce code permet de mettre à jour le contexte (recher-che de l’enregistrement visualisé par l’internaute).

Les actions effectuées dans le code de synchronisation seront : 1. Relecture de l’enregistrement correspondant à l’identifiant stocké dans lechamp caché. 2. Si l’enregistrement n’est pas trouvé : une page d’erreur est affichée, et le codedu bouton "Supprimer" n’est pas exécuté. 3. Si l’enregistrement est trouvé, le contexte de page est alors automatiquementmodifié sur le serveur : le code du bouton "Supprimer" est exécuté.

La sécurité totale !

L’exemple "Annuaire" livré avec WebDev illustre le cas présenté dans cette page.

Dessin.book Page 103 Mardi, 13. janvier 2009 10:44 10

Page 104: concepts webdev 14

Part

ie 6

: S

pécif

icit

és W

EB

104

Paiement sécurisé avec prestataireDifférents prestataires permettent de proposer un paiement sécurisé pour tous les sitescommerciaux. Tout paiement réalisé avec une carte bancaire est validé par le prestataireauprès du centre de carte bancaire.

Les différentes étapes du paiement sont les suivantes :

1. Le client valide sa commande.2. Le site WebDev demande un débit au prestataire.3. Le prestataire demande la saisie du numéro de carte.4. Le client saisit son numéro de carte.5. Après vérification, le prestataire envoie un numéro d’accord.6. La commande est acceptée.

Dessin.book Page 104 Mardi, 13. janvier 2009 10:44 10

Page 105: concepts webdev 14

PARTIE 7

Base de données

Dessin.book Page 105 Mardi, 13. janvier 2009 10:44 10

Page 106: concepts webdev 14

Dessin.book Page 106 Mardi, 13. janvier 2009 10:44 10

Page 107: concepts webdev 14

Part

ie 7

: B

ase d

e d

on

nées

107

Les différents types de fichiers accessiblesWinDev, WebDev et WinDev Mobile proposent un accès simple aux bases de données lesplus courantes.

Dessin.book Page 107 Mardi, 13. janvier 2009 10:44 10

Page 108: concepts webdev 14

Part

ie 7

: B

ase d

e d

on

nées

108

Analyse : Structure de la base de donnéesLorsqu'un projet WinDev, WebDev ou WinDev Mobile utilise des fichiers de données, ceprojet doit être associé à une analyse. Une analyse permet de décrire les structures dedonnées (fichiers, rubriques, ...) utilisées dans votre projet.L'éditeur d'analyses permet de créer très simplement une analyse.

L’analyse d’un projet WebDev correspond au MLD (Modèle Logique des données). Toutela structure et l’organisation des données sont décrites : les données sont regroupéespar fichier. Chaque fichier contient plusieurs données appelées rubrique.Dans l’analyse, il est possible de lier la description d’un fichier à un type de fichier (Hy-perFileSQL, Oracle, ...).

Dessin.book Page 108 Mardi, 13. janvier 2009 10:44 10

Page 109: concepts webdev 14

Part

ie 7

: B

ase d

e d

on

nées

109

HyperFileSQL ClassicUne application WebDev HyperFileSQL peut fonctionner en mode Classic (appelé Hyper-FileSQL Classic) ou en mode Client/Serveur.

Les caractéristiques du mode Classic sont les suivantes :• Un site utilisant HyperFileSQL Classic est exécuté sur différents navigateurs. Pour

chaque site exécuté, une session est lancée sur le serveur.• Les fichiers de données sont présents dans un répertoire accessible par les ses-

sions des sites WebDev (sur le serveur Web ou sur un autre poste). Chaque session accède physiquement aux fichiers de données.

• Les traitements (requête, lecture / ajout dans un fichier, ...) sont réalisés par chaque session.

Session 1

Session 2

Session n

Bases de donnéesHyperFileSQLClassic

Serveur Web

Client 1

Client 2

Client n

Dessin.book Page 109 Mardi, 13. janvier 2009 10:44 10

Page 110: concepts webdev 14

Part

ie 7

: B

ase d

e d

on

nées

110

HyperFileSQL Client/ServeurUne application WebDev HyperFileSQL peut fonctionner en mode Classic ou en modeClient/Serveur.

Les caractéristiques du mode Client/Serveur sont les suivantes :• Un site HyperFileSQL Client/Serveur est exécuté sur différents postes utilisateur.

Pour chaque site lancé, une session est présente sur le serveur Web.• Les fichiers de données sont présents sur un poste serveur (Serveur HyperFileSQL).

Seul le poste serveur accède physiquement aux fichiers de données.• L’ensemble des traitements (requête, lecture/ajout dans un fichier, ...) sont réalisés

sur le serveur.

Session 1

Session 2

Session n

Serveur HyperFileSQLWindows ou Linux

Serveur Manta

Bases de donnéesHyperFileSQLClient/Serveur

Connexion du type : Cable réseau,USB, Wi-Fi,Internet...

Protocole TCP/IP

Serveur Web

Client 1

Client 2

Client n

Dessin.book Page 110 Mardi, 13. janvier 2009 10:44 10

Page 111: concepts webdev 14

Part

ie 7

: B

ase d

e d

on

nées

111

Création de fichiers HyperFileSQL : les fichiers créés physiquementL’éditeur d’analyses permet de décrire la structure des fichiers de données.Selon les informations saisies sous l’éditeur d’analyses, différents fichiers sont créésphysiquement.

Remarque : Ce schéma présente uniquement les principaux fichiers créés. D’autres fi-chiers spécifiques peuvent être créés si le fichier utilise la journalisation, les transactionsou encore la réplication.

Dessin.book Page 111 Mardi, 13. janvier 2009 10:44 10

Page 112: concepts webdev 14

Part

ie 7

: B

ase d

e d

on

nées

112

Associer les champs et les donnéesUne page peut afficher des informations provenant :• d’une base de données : les champs sont directement liés aux rubriques des fichiers

ou des requêtes disponibles dans la base de données.• de variables présentes dans le code de l’application (variables globales à la page ou

au projet ou paramètres passés à la page).Pour afficher ces informations dans une page, il est nécessaire de lier les champs de cet-te page avec :• les différentes rubriques de la base de données.• les différentes variables WLangage disponibles.

La méthode d’affichage et de récupération des informations est très simple :• La liaison d’un champ avec une rubrique ou une variable est définie sous l’éditeur

de pages, lors de la description du champ (onglet "Liaison").• La fonction PageVersFichier permet de mettre à jour soit l’enregistrement, soit la

variable avec les données présentes dans la page.• La fonction FichierVersPage permet de mettre à jour les données affichées dans la

page avec soit les informations enregistrées dans le fichier, soit les informations enregistrées dans la variable.

Liaison champ / rubrique

Dessin.book Page 112 Mardi, 13. janvier 2009 10:44 10

Page 113: concepts webdev 14

Part

ie 7

: B

ase d

e d

on

nées

113

Liaison champ / variable

Dessin.book Page 113 Mardi, 13. janvier 2009 10:44 10

Page 114: concepts webdev 14

Part

ie 7

: B

ase d

e d

on

nées

114

Les requêtesUne requête sert à interroger une base de données pour visualiser, insérer, modifier ousupprimer des données. La structure de la requête définit les données manipulées.Une requête peut interroger un ou plusieurs fichiers.L’éditeur de requêtes permet de créer très simplement des requêtes, sans avoir à pro-grammer.

Dessin.book Page 114 Mardi, 13. janvier 2009 10:44 10

Page 115: concepts webdev 14

Part

ie 7

: B

ase d

e d

on

nées

115

Les requêtes intégréesLes champs d’une page peuvent être liés à un fichier de données ou à une requête exis-tante, ... Il est également possible de lier ces champs à une requête créée lors de la con-ception du champ.

Dans ce cas, la requête est intégrée à la page. Elle est présente dans le fichier WWH cor-respondant à la page. Si le fichier WWH est transmis, les requêtes intégrées utilisées parcette page seront également fournies.

Requête intégrée : MaPage_1$Requête

Zone répétée liée à une requête intégrée

Dessin.book Page 115 Mardi, 13. janvier 2009 10:44 10

Page 116: concepts webdev 14

Part

ie 7

: B

ase d

e d

on

nées

116

Le champ TableWebDev propose trois types de champs table utilisables dans une fenêtre :• Table Fichier accès direct• Table Mémoire• Table Fichier chargée en mémoire

Table Fichier accès directUne table fichier de type accès direct permet d’afficher directement les données prove-nant d’un fichier de données ou d’une requête. La structure du fichier a été décrite sousl’éditeur d’analyses et les données ont été saisies par exemple dans le site.Un parcours du fichier permet d’afficher les données dans la table. Pour chaque ligne af-fichée, le fichier est lu : l’enregistrement lu est affiché dans une ligne de la table.

Il est possible de limiter les enregistrements affichés dans le champ en utilisant un filtre(fonction HFiltre utilisée dans le code d’initialisation du champ).

Plusieurs fonctions du WLangage permettent de manipuler les tables fichier. Ces fonc-tions commencent toutes par "Table".

Pour ajouter un enregistrement, ajoutez l’enregistrement dans le fichier HyperFileSQLcorrespondant (fonction HAjoute), puis ré-affichez la table avec la fonction TableAffiche.

Pour supprimer un enregistrement, supprimez l’enregistrement dans le fichier HyperFi-leSQL correspondant (fonction HSupprime), puis ré-affichez la table avec la fonction Ta-bleAffiche.

Table MémoireUne table mémoire permet d’afficher directement des données chargées en mémoire.Les données sont ajoutées dans la table par programmation (par exemple avec la fonc-tion TableAjouteLigne).

Dessin.book Page 116 Mardi, 13. janvier 2009 10:44 10

Page 117: concepts webdev 14

Part

ie 7

: B

ase d

e d

on

nées

117

Table Fichier chargée en mémoireLes tables fichier chargées en mémoire combinent les avantages des tables fichier etceux des tables mémoire.La table est liée au fichier de données, mais le contenu du fichier est totalement chargéen mémoire. Le tri et la recherche sont disponibles sur toutes les colonnes.Les données non liées au fichier sont conservées lors de la manipulation de l’ascenseur(colonne de type Interrupteur pas exemple).Les enregistrements du fichier étant chargés en mémoire, ce type de table est conseillépour les fichiers de moins de 10 000 enregistrements (pour éviter une saturation mémoi-re).

Remarque : les différents modes de remplissage (mémoire, fichier, fichier chargé en mé-moire) sont disponibles pour les listes, les combos, les tables, les zones répétées, ...

Dessin.book Page 117 Mardi, 13. janvier 2009 10:44 10

Page 118: concepts webdev 14

Part

ie 7

: B

ase d

e d

on

nées

118

Réplication universelleLa réplication universelle permet de maintenir à jour des bases de données de formatidentique ou différent (HyperFileSQL Classic, Oracle, SQL Server, ...). Il est par exemplepossible de réaliser une synchronisation entre une base de données HyperFileSQLClassic et une base de données Oracle.

La réplication universelle utilise un modèle centralisé : toutes les bases de données sesynchronisent avec une base de données maître. La base de données maître répercuteensuite les modifications vers les autres bases de données.

Il est possible d’adapter la synchronisation à des cas particuliers. Par exemple, il est pos-sible de récupérer uniquement les enregistrements concernant un produit spécifié ou lesenregistrements réalisés à une certaine date, de gérer les conflits, ...Ces adaptations doivent être effectuées par programmation grâce à la fonction HRplPro-cédureFiltre.

Dessin.book Page 118 Mardi, 13. janvier 2009 10:44 10

Page 119: concepts webdev 14

Part

ie 7

: B

ase d

e d

on

nées

119

Architecture 3-tiersLe but du 3-Tiers est de séparer les 3 "couches" habituelles d’une application : IHM, trai-tements et données.Une application sera donc composée de 3 couches indépendantes :• une couche présentation,• une couche traitements,• une couche d’accès aux données.

Cette séparation a pour but de rendre indépendante chacune des couches afin de facili-ter la maintenance et les évolutions futures de l’application. Elle assure une sécurité plusimportante car l’accès à la base de données n’est autorisé que par la couche de traite-ments. Elle a également l’avantage d’optimiser le travail en équipe et le développementmulti-cibles.

Dessin.book Page 119 Mardi, 13. janvier 2009 10:44 10

Page 120: concepts webdev 14

Part

ie 7

: B

ase d

e d

on

nées

120

Dessin.book Page 120 Mardi, 13. janvier 2009 10:44 10

Page 121: concepts webdev 14

PARTIE 8

Tester un site

Dessin.book Page 121 Mardi, 13. janvier 2009 10:44 10

Page 122: concepts webdev 14

Dessin.book Page 122 Mardi, 13. janvier 2009 10:44 10

Page 123: concepts webdev 14

Part

ie 8

: T

este

r u

n s

ite

123

Tester un site : Les éléments à testerLe test d’un site est une étape fondamentale dans le développement d’un site. Le testpermet de vérifier le bon fonctionnement du site et son utilisabilité.

Voici quelques exemples des principaux points à tester dans un site WebDev :

• le fonctionnement du site : enchaînement des pages, exécution du code saisi, ...

• le "look" du site : utilisez différents navigateurs (principalement Internet Explorer et Netscape Naviga-tor), utilisez différentes résolutions écran, redimensionnez le navigateur, ...

• les fonctionnalités spécifiques au Web : impression, cookies, touche "Précédent" du navigateur, ...

• l’accès au site par différents internautes : gestion des logins et des mots de passe, gestion des accès concurrentiels aux fichiers de données, ...

• la non-régression d’un site lors d’une mise à jour : validation des modifications effectuées dans un site et vérification que les fonction-nalités non modifiées sont toujours accessibles.

• la montée en charge (pour un site installé sur le serveur) : validation du nombre maximum d’internautes pouvant accéder au site.

Dessin.book Page 123 Mardi, 13. janvier 2009 10:44 10

Page 124: concepts webdev 14

Part

ie 8

: T

este

r u

n s

ite

124

Comment tester un site ? Plusieurs outils sont disponibles pour tester un site WebDev :• l’éditeur principal de WebDev.• l’administrateur WebDev.

Ce module est indispensable à l’exécution d’un site dynamique WebDev. Sur le poste de développement, il est possible de tester les sites dynamiques depuis une page de test créée par l’administrateur.

• WDTestSite, l’outil de test de montée en charge.

Le tableau ci-dessous présente quand et comment utiliser ces différents modes de test.

Mode de test Type de test Lancement du test

Editeur Le lancement du test depuis l’édi-teur permet par exemple de tester :- les fonctionnalités du site,- le code utilisé dans les diffé-

rents traitements. Un puissantdébogueur permet de suivrepas à pas l’exécution des diffé-rents traitements.

- l’utilisation du site avec diffé-rents navigateurs (installés surle poste de développement).

Ce type de test permet l’utilisationdu débogueur.

Option "Projet .. Mode test .. Tes-ter le projet" ou "Projet .. Modetest .. Tester le projet depuis lapage d’accueil" depuis l’éditeur.

Remarque :Les droits de l’internaute (droitsd’accès, d’écriture et de lecture)correspondent aux droits du dé-veloppeur.

Administrateur WebDev :WD140ADMIN(site dynamiqueWebDev unique-ment)

Le lancement du test depuis l’admi-nistrateur permet par exemple detester :- les fonctionnalités du site,- les fonctions spécifiques au

Web (cookies, ...),- l’utilisation du site dans des

conditions réelles.

1. Lancez l’administrateur Web-Dev (option "Programmes .. Web-Dev 14 .. AdministrateurWebDev" depuis le menu "Démar-rer").2. Cliquez sur le bouton "Page detest" (onglet "Avancé").

Remarque : Ce test permet d’utili-ser le site WebDev dans des con-ditions identiques à celles d’uninternaute.

Les droits de l’internaute (droitsd’accès, d’écriture et de lecture)correspondent aux droits de l’uti-lisateur par défaut défini dans leserveur Web utilisé.

Dessin.book Page 124 Mardi, 13. janvier 2009 10:44 10

Page 125: concepts webdev 14

Part

ie 8

: T

este

r u

n s

ite

125

WDTestSite(site dynamiqueWebDev unique-ment)

WDTestSite permet de réaliser destests de montée en charge.WDTestSite permet de lancer plu-sieurs connexions simultanées àun site WebDev. Chaque connexion effectue unesuccession d’actions dans le siteWebDev (scénario pré-défini)Ce test doit être effectué sur un siteWebDev installé sur un poste dedéploiement, prêt à être mis en ser-vice.

1. Créez un scénario de test (avecWDTestSite).2. Installez WDTestSite et le scé-nario sur différents postes poursimuler un grand nombre d’ac-cès.3. Spécifiez le nombre de con-nexions à effectuer.4. Lancez le scénario de test surchaque poste.

Remarque :Chaque poste effectue un nom-bre de connexions défini. Chaqueconnexion effectue le scénariosélectionné.

Tests automati-ques

Les tests automatiques permettentde tester les procédures et les clas-ses d’un site à différents niveauxde développement.Les scénarios de test sont automa-tiquement générés en WLangage àpartir du test de la procédure ou dela classe. Les scénarios peuventêtre modifiés sous l’éditeur de co-de.

1. Affichez la procédure ou laclasse sous l’éditeur de code.2. Sélectionnez l’option "Testsautomatiques .. Enregistrer unnouveau test".

Dessin.book Page 125 Mardi, 13. janvier 2009 10:44 10

Page 126: concepts webdev 14

Part

ie 8

: T

este

r u

n s

ite

126

Le débogueurPour mettre au point votre code, un débogueur est livré en standard avec WebDev.Le débogueur permet une exécution pas à pas de vos sites dynamiques, en visualisantle code WLangage exécuté, le contenu des variables, ...

Pour lancer le débogueur, utilisez :

• soit un point d’arrêt directement placé dans l’éditeur de code : lorsque la ligne pré-cédée d’un point d’arrêt sera exécutée, le débogueur sera automatiquement lancé. Pour poser un point d’arrêt, il suffit de cliquer devant la ligne de code : une puce rouge apparaît.

• soit le mot-clé serveur STOP du WLangage directement dans votre code WLangage : le débogueur sera automatiquement lancé dès que cette ligne de code sera exécu-tée.

• soit l’option "Projet .. Mode Test .. Tracer le projet" : le débogueur est lancé en même temps que le test du site dynamique.

Dessin.book Page 126 Mardi, 13. janvier 2009 10:44 10

Page 127: concepts webdev 14

Part

ie 8

: T

este

r u

n s

ite

127

Quand peut-on utiliser le débogueur ? Lorsqu’un test est réalisé depuis l’éditeur, le débogueur peut toujours être utilisé. Il suffitde placer les points d’arrêt aux endroits voulus, pour pouvoir débogueur pas à pas le site.Les différents types de tests disponibles depuis l’éditeur sont les suivants :

• Le "Go" de page : Le test de la page en cours sous l’éditeur peut être lancé par l’option "Code .. Tester la page".

• Le "Go" de projet : Le test du projet sur le poste de développement peut être lancé par l’option "Projet .. Mode test .. Tester le projet".

• Le projet déployé : Il est possible de débogueur le projet déployé. Cette fonctionnalité est très utile pour reproduire un problème survenant uniquement dans des conditions spécifiques. Pour lancer le projet déployé, il faut utiliser l’option "Projet .. Mode test .. Se connec-ter à un site et déboguer la connexion". Remarque : Cette option est utilisable avec un serveur de développement ou de déploiement. Le serveur doit être configuré pour autoriser le débogage à distance.

• Le projet déployé en cours d’utilisation : Il est possible de débogueur le projet déployé, en cours d’utilisation. Cette fonction-nalité est très utile pour reproduire un problème survenant uniquement dans des conditions spécifiques. Le cas le plus courant : vous utilisez le site, et vous rencon-trez le problème : vous pouvez lancer le débogueur immédiatement en mettant un point d’arrêt dans le code de votre projet. Pour utiliser une session du projet déployé, il faut utiliser l’option "Projet .. Mode test .. Déboguer une connexion existante". Remarque : Cette option est utilisable avec un serveur de développement ou de déploiement. Le serveur doit être configuré pour autoriser le débogage à distance.

Dessin.book Page 127 Mardi, 13. janvier 2009 10:44 10

Page 128: concepts webdev 14

Part

ie 8

: T

este

r u

n s

ite

128

A quoi sert l’administrateur WebDev ? En développement (pour le test) comme en déploiement, l’administrateur WebDev estnécessaire à l’exécution des sites dynamiques WebDev.

Lors du développement d’un site dynamique WebDev, l’administrateur permet principa-lement de :• tester les sites dynamiques grâce à la page de test (onglet "Avancé", bouton "Page

de test")• régler les paramètres de connexion aux sites dynamiques pour vos tests : temps de

déconnexion, ... (onglet "Configuration")• supprimer directement les connexions de test en cours (onglet "Connexions")• changer le serveur Web utilisé pour vos tests (onglet "Avancé", option "Serveur")• effectuer un diagnostic en cas de problème lors du lancement d’un site dynamique

WebDev (onglet "Avancé", bouton "Diagnostic")• autoriser le débogage à distance (onglet "Configuration").• ...

En déploiement, l’administrateur WebDev permet de :• gérer les comptes WebDev (onglet "Administration")• gérer la configuration des différents sites dynamiques installés sur le serveur : nom-

bre de connexions autorisées, ... (onglet "Sites")• personnaliser les messages d’erreurs des différents sites dynamiques installés sur

le serveur (onglet "Administration"),• ...

Dessin.book Page 128 Mardi, 13. janvier 2009 10:44 10

Page 129: concepts webdev 14

PARTIE 9

Déployer un site

Dessin.book Page 129 Mardi, 13. janvier 2009 10:44 10

Page 130: concepts webdev 14

Dessin.book Page 130 Mardi, 13. janvier 2009 10:44 10

Page 131: concepts webdev 14

Part

ie 9

: D

ép

loyer

un

sit

e

131

Déploiement d’un site statique ou d’un site semi-dynamique WebDevPrincipeLe déploiement d’un site statique ou semi-dynamique est réalisé par FTP :

Informations nécessaires pour le déploiementSi vous n’avez pas ces informations, inutile de tenter d’installer. Appelez le prestatairepour obtenir ces informations.

Avant d’effectuer un déploiement par FTP, l’hébergeur doit communiquer au déve-loppeur les informations suivantes :• Nom du serveur Web où l’installation doit être réalisée (ou son adresse IP)• Nom d’utilisateur et mot de passe définis dans le serveur FTP

Lors du déploiement par FTP, le développeur doit préciser dans WDDéploie :• les informations fournies par l’hébergeur• les fichiers à installer

Dessin.book Page 131 Mardi, 13. janvier 2009 10:44 10

Page 132: concepts webdev 14

Part

ie 9

: D

ép

loyer

un

sit

e132

Déploiement d’un site dynamique WebDevLes différents types de déploiementWebDev propose trois méthodes de déploiement d’un site dynamique :

• déploiement par média physique (CD ROM, ...) du site WebDev, avec création d’une version d’installation livrable sur CD-ROM à l’hébergeur

Remarque : un serveur d’application WebDev peut être intégré à l’installation four-nie par média physique.

• déploiement à distance directement depuis le poste de développement (par trans-fert de fichiers par Internet, FTP)

Dessin.book Page 132 Mardi, 13. janvier 2009 10:44 10

Page 133: concepts webdev 14

Part

ie 9

: D

ép

loyer

un

sit

e

133

• déploiement à distance depuis un poste d’administration (par transfert de fichiers par Internet, FTP)

Choisir une méthode de déploiementLe choix de la méthode de déploiement dépend surtout des contraintes imposées parl’hébergeur et de la localisation du serveur de déploiement (distant ou présent dans leslocaux).

L’installation par média physique est conseillée si le serveur Web est facilement acces-sible (par exemple, le serveur Web se situe dans les mêmes locaux que l’équipe de dé-veloppement).

L’installation à distance (par FTP) directement depuis le poste de développement estconseillée si le poste de déploiement n’est pas facilement accessible. Un serveur FTPstandard doit être présent sur le poste de déploiement. Avant d’effectuer une installation à distance, l’hébergeur doit configurer le serveur FTPet le gestionnaire de comptes WebDev.

Dessin.book Page 133 Mardi, 13. janvier 2009 10:44 10

Page 134: concepts webdev 14

Part

ie 9

: D

ép

loyer

un

sit

e134

L’installation à distance (par FTP) directement depuis un poste de d’administration estconseillée si les caractéristiques du serveur ne sont pas connues par le développeur lorsde la création du programme d’installation. Le programme d’installation est appelé dansce cas un "Package".Si un site est destiné à plusieurs clients, il est ainsi possible de créer un seul package etde le fournir à tous les clients voulus.Les paramètres du serveur (Adresse, compte FTP, ...) ne seront renseignés que lors del’exécution du package sur le poste d’administration.

Déploiement sur média physique : informations nécessairesLors d’un déploiement par média physique, les informations concernant l’installation etle paramétrage du site sont données à la fois dans l’assistant de préparation de l’instal-lation et dans l’assistant d’installation.

Lors de la préparation de l’installation, il est nécessaire de fournir :• le répertoire d’installation,• les fichiers à installer,• le répertoire de génération de l’installation.

Lors de l’installation, il est nécessaire de fournir :• le répertoire des fichiers de données,• le répertoire des fichiers du site.

Après l’installation, il est nécessaire de paramétrer les caractéristiques du site (tempsde connexion, nombre de connexions, ...) dans l’administrateur WebDev (version de dé-ploiement).

Dessin.book Page 134 Mardi, 13. janvier 2009 10:44 10

Page 135: concepts webdev 14

Part

ie 9

: D

ép

loyer

un

sit

e

135

Déploiement par FTP directement depuis le poste de développement : infor-mations nécessairesSi vous n’avez pas ces informations, inutile de tenter d’installer. Appelez le prestatairepour obtenir ces informations.

Avant d’effectuer un déploiement par FTP directement depuis le poste de développe-ment, l’hébergeur doit communiquer au développeur les informations suivantes :• Nom du serveur Web où l’installation doit être réalisée (ou son adresse IP)• Nom d’utilisateur et mot de passe associé définis dans le gestionnaire de compte

WebDev• Nom d’utilisateur et mot de passe définis dans le serveur FTP

Lors du déploiement par FTP, le développeur doit préciser dans l’assistant :• les informations fournies par l’hébergeur• les fichiers à installer• le nom du sous-répertoire des fichiers de données• les différents paramètres de connexions au site

Remarques :• Il est possible de réaliser une installation différée, à la date et à l’heure choisies.• L'installation et la mise à jour par FTP sont sécurisées par mot de passe et cryptage

des données transmises.

Déploiement par FTP directement depuis un poste d’administration : infor-mations nécessairesLors de la création du programme d’installation, aucune information spécifique n’est né-cessaire.

Lors de l’exécution du programme d’installation du site (depuis un poste d’administra-tion), l’hébergeur devra indiquer :• Nom du serveur Web où l’installation doit être réalisée (ou son adresse IP)• Nom d’utilisateur et mot de passe associé définis dans le gestionnaire de compte

WebDev• Nom d’utilisateur et mot de passe définis dans le serveur FTP

Remarques :• Il est possible de réaliser une installation différée, à la date et à l’heure choisies.• L'installation et la mise à jour par FTP sont sécurisées par mot de passe et cryptage

des données transmises.

Dessin.book Page 135 Mardi, 13. janvier 2009 10:44 10

Page 136: concepts webdev 14

Part

ie 9

: D

ép

loyer

un

sit

e136

Centre de Contrôle d’hébergementDestiné principalement aux hébergeurs et aux Webmasters, le centre de contrôle d'hé-bergement permet d'aider à héberger plus facilement les sites WebDev 14. Le centre gère bien sur les comptes WebDev, mais également, le compte au niveau du"Serveur WEB IIS" (versions 5.xx, 6.xx et 7.xx) et les droits au niveau du système d’exploi-tation Windows.Un choix par défaut est proposé : il permet d'installer un serveur par simple clic, sanscompétences spécifiques.

Le paramétrage des éléments suivants est centralisé :• Comptes Windows,• Groupes des utilisateurs FTP,• Groupes des clients WebDev,• Home Directory,• Alias FTP,• Comptes WebDev,• Répertoires des données,• Sites Web virtuels, ...

Dessin.book Page 136 Mardi, 13. janvier 2009 10:44 10

Page 137: concepts webdev 14

Part

ie 9

: D

ép

loyer

un

sit

e

137

Référencement d’un sitePour que votre site soit visité, les internautes doivent le trouver. Pour cela, votre site doitêtre proposé lorsque l’internaute saisira les mots-clés caractérisant votre site dans unmoteur de recherche.

Pour simplifier le référencement de votre site, WebDev propose :• un assistant de référencement. Cet assistant liste toutes les optimisations pouvant

être réalisées pour améliorer le référencement de votre site. Pour lancer l’assistant, utilisez l’option "Projet .. Performances et améliorations .. Optimiser le référence-ment").

• la possibilité de saisir une description et des mots-clés sur chaque page de votre site.

• l’intégration d’une page d’accueil. Cette page d’accueil permet de saisir la descrip-tion de votre site et les mots-clés décrivant votre site.

Il est possible d’intégrer une page d’accueil à votre site :• soit lors de la création du projet (dans l’assistant de création du projet).• soit lors du développement du projet (option "Fichier .. Nouveau .. Page", onglet

"Vierge / Modèles", option "Accueil").Plusieurs modèles de pages d’accueil sont proposés.

Dessin.book Page 137 Mardi, 13. janvier 2009 10:44 10

Page 138: concepts webdev 14

Part

ie 9

: D

ép

loyer

un

sit

e138

Mise en service d’un site dynamique WebDev

Votre site dynamique WebDev sera accessible par les internautes dès qu’il aura été misen service. La mise en service d’un site dynamique WebDev consiste à activer le site.

L’activation d’un site dynamique WebDev peut se faire par plusieurs méthodes :

• soit lors de l’installation par FTP : une case à cocher permet d’activer automatique-ment le site après son installation.

• soit avec l’administrateur à distance (voir “Maintenance d’un site dynamique Web-Dev”, page 147).

• soit avec l’administrateur WebDev présent sur le poste de déploiement (option "Site WebDev bloqué", dans l’onglet "Sites").

Dessin.book Page 138 Mardi, 13. janvier 2009 10:44 10

Page 139: concepts webdev 14

Part

ie 9

: D

ép

loyer

un

sit

e

139

Serveur dédié ou mutualisé ?

Les hébergeurs proposent deux types de serveurs pour installer vos sites WebDev :

• serveur mutualisé : serveur dont les ressources sont partagées par différents clients (client = société fai-sant héberger son site chez un hébergeur)

Caractéristiques :L’hébergeur fournit un poste serveur à différents clients.L’hébergeur :- configure le serveur FTP.- détermine le nombre maximum de connexions sur l’ensemble des sites dynamiquesd’un même client (à l’aide du gestionnaire de comptes WebDev).

L’installation et les mises à jour d’un site dynamique ou statique peuvent être réali-sées par FTP.

Dessin.book Page 139 Mardi, 13. janvier 2009 10:44 10

Page 140: concepts webdev 14

Part

ie 9

: D

ép

loyer

un

sit

e140

• serveur dédié : le serveur est réservé au client. L’hébergeur fournit uniquement l’accès à Internet (adresse IP, câble, ...).La machine est soit louée par l’hébergeur, soit fournie par le client.

Caractéristiques :L’hébergeur fournit uniquement l’accès à Internet (adresse IP, câble, ...). Le client doit :- fournir éventuellement le poste serveur (location possible)- configurer le poste (système, ...)- installer le serveur Web- installer et configurer les sites WebDev (par FTP ou par CD-ROM)

Dessin.book Page 140 Mardi, 13. janvier 2009 10:44 10

Page 141: concepts webdev 14

Part

ie 9

: D

ép

loyer

un

sit

e

141

Quel type de serveur choisir ?

Le tableau ci-dessous présente les avantages et inconvénients des différents types deserveurs.Quel que soit le type de serveur choisi, il est nécessaire de posséder une licence de dé-ploiement pour chacun des sites dynamiques WebDev installés sur le serveur.Chaque serveur héberge un ou plusieurs sites dynamiques WebDev.

Serveur Avantages / inconvénients Quand utiliser ce serveur ?

Mutualisé Principaux avantages :- Coût moindre- Administration du serveur réalisée par l’hé-

bergeur

Principaux inconvénients :- Ressources mémoire partagées entre les si-

tes présents sur le serveur.- En cas de blocage d’un site, tous les sites

sur le serveur sont bloqués.- Utilisation d’exécutables autonomes rare-

ment possible.- Accès non sécurisé aux données :

Des personnes non autorisées peuventavoir accès aux données : l’hébergeur, etpotentiellement, d’autres clients, si le ser-veur n’est pas correctement configuré. Conseil : cryptez les fichiers de donnéespour éviter toute utilisation non autorisée.

Un serveur mutualisé estconseillé pour :

- les sites peu visités (jus-qu’à 20 ou 30 con-nexions simultanées),

- les sites nécessitantpeu de mémoire (pas decalculs très importantseffectués sur le ser-veur),

- les sites en phase de dé-marrage.

Dédié Principaux avantages :- Ressources du poste serveur disponibles

pour le(s) site(s) installé(s) sur ce poste.- Gestion du rapatriement des données tota-

lement personnalisable : - réplication par e-mails, - utilitaire WDREPLIC, - copie des fichiers par FTP.

Principaux inconvénients :- Coût important- Administration du poste serveur entière-

ment réalisée par le client, la plupart dutemps.

Un serveur dédié est con-seillé pour :- les sites très visités,- les sites nécessitant

une place disque et mé-moire importante,

- les sites gérant des don-nées sensibles,

- les sites dynamiques.

Dessin.book Page 141 Mardi, 13. janvier 2009 10:44 10

Page 142: concepts webdev 14

Part

ie 9

: D

ép

loyer

un

sit

e142

Installer un site dynamique WebDev sur des configurations spécifiques

1. Installation sur un serveur Web sous Windows (NT, 2000 ou supérieur) ou un serveur Linux

Dessin.book Page 142 Mardi, 13. janvier 2009 10:44 10

Page 143: concepts webdev 14

Part

ie 9

: D

ép

loyer

un

sit

e

143

2. Installation sur un serveur Windows, avec un accès à Internet par UNIX

1. Ouverture d’une page statique. La page statique est présente sur le serveur UNIX.2. Lancement du site dynamique WebDev (présent sur le serveur Windows) par un lien

présent dans la page HTML statique.3. Fonctionnement normal du site WebDev.

Remarque : la même configuration peut être adoptée avec un serveur Linux.

Dessin.book Page 143 Mardi, 13. janvier 2009 10:44 10

Page 144: concepts webdev 14

Part

ie 9

: D

ép

loyer

un

sit

e144

3. Installation sur un serveur Windows ou Linux, avec Load Balancer

Le système Load Balancer permet de répartir la charge de connexion sur un site dynami-que WebDev sur différents postes.

Solution 1 : Installation du site dynamique WebDev uniquement sur le serveur de don-nées.Cette solution consiste à installer :• sur chaque serveur WEB, le serveur d’application WebDev,• sur le serveur de données, les sites dynamiques WebDev et les fichiers de données.

Solution 2 : Installation du site dynamique WebDev sur tous les serveurs WEB.Cette solution consiste à installer :• sur chaque serveur WEB, le serveur d’application WebDev, et les sites dynamiques

WebDev.• sur le serveur de données, les fichiers de données des sites dynamiques WebDev.

Dessin.book Page 144 Mardi, 13. janvier 2009 10:44 10

Page 145: concepts webdev 14

PARTIE 10

Maintenir un site

Dessin.book Page 145 Mardi, 13. janvier 2009 10:44 10

Page 146: concepts webdev 14

Dessin.book Page 146 Mardi, 13. janvier 2009 10:44 10

Page 147: concepts webdev 14

Part

ie 1

0 :

Dép

loyer

un

sit

e

147

Maintenance d’un site dynamique WebDevLe déploiement d’un site dynamique est une étape importante du développement d’unsite, mais ce n’est pas la dernière : la maintenance du site commence ...

La maintenance regroupe :

• La gestion des sites dynamiques déployés : Un administrateur WebDev à distance peut être lancé depuis n’importe quel naviga-teur et n’importe quel poste. Cet administrateur permet de configurer l’accès au site dynamique, de réaliser des sauvegardes régulières par FTP, ...

• L’évolution du site dynamique : corrections, nouveautés, ... La mise à jour à distance (FTP) ou l’installation par média physique permettent de fai-re évoluer votre site dynamique.

• La surveillance de l’accès au serveur WEB : Un robot de surveillance permet de tester régulièrement l’accès au serveur Web. En cas de problème (blocage du serveur et des sites WebDev, ...), un e-mail est automa-tiquement envoyé au responsable du site dynamique. Il est aussi possible de relan-cer le moteur WebDev ou de rebooter.

Dessin.book Page 147 Mardi, 13. janvier 2009 10:44 10

Page 148: concepts webdev 14

Part

ie 1

0 :

Dép

loyer

un

sit

e148

Consulter les statistiques de fréquentationdes sites dynamiquesIl est important de disposer de statistiques précises sur les visites des sites.Comment savoir qui est venu sur votre site, les pages qui ont été consultées, les applica-tions qui ont été utilisées, de quel site vient l’internaute ?

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

Quelques exemples de statistiques fournies par WDStatistiques : nombre de connexionspar jour, pages consultées, systèmes d’exploitation et navigateurs des internautes, ...

Exemples de statistiques de sites dynamiques :

Dessin.book Page 148 Mardi, 13. janvier 2009 10:44 10

Page 149: concepts webdev 14

Part

ie 1

0 :

Dép

loyer

un

sit

e

149

Récupérer des données sur un siteUn site commercial permet aux internautes d’effectuer des commandes, desréservations, ... Pour récupérer ces informations, vous pouvez utiliser plusieurs méthodes.Conseil : Traitez les données récupérées dans une application de "Back Office" réaliséeavec WinDev.

1 Partager les données

Les données d’un site WebDev peuvent être directement partagées avec les données del’application Back Office permettant de traiter les opérations effectuées sur le site, entoute sécurité. Il suffit d’utiliser une base de données HyperFileSQL Client/Serveur.Le principe est le suivant :

Dessin.book Page 149 Mardi, 13. janvier 2009 10:44 10

Page 150: concepts webdev 14

Part

ie 1

0 :

Dép

loyer

un

sit

e150

Avantage : Les données du site sont accessibles en temps réel.

Inconvénients :• Nécessité de gérer la sécurité de manière optimisée : Utiliser une connexion sécuri-

sée pour accéder aux données, ouverture d’un port spécifique pour accéder aux don-nées (port 4900 par défaut), configuration du firewall, ...

• Nécessité d’utiliser une base HyperFileSQL Client/Serveur.

Cette solution est conseillée pour un site installé sur un serveur dédié.

2 Récupérer les données d’un site

2.1 Par emails :

Le principe :

1. L’internaute effectue une commande sur le site.2. Le site WebDev indique à l’internaute que la commande a bien été enregistrée. L’in-

ternaute est informé qu’il recevra un email de confirmation.3. Le site WebDev envoie un email au siège de la société. Cet email contient la comman-

de effectuée par l’internaute.4. Un email est envoyé à l’internaute par la société pour lui indiquer que sa commande

a bien été prise en compte.

Dessin.book Page 150 Mardi, 13. janvier 2009 10:44 10

Page 151: concepts webdev 14

Part

ie 1

0 :

Dép

loyer

un

sit

e

151

Avantages :• Solution simple à mettre en place.• Ne nécessite aucun exécutable supplémentaire sur le serveur.

Inconvénient : Récupération "simple" des données : pas de mise à jour des données versle serveur.

Cette solution peut être utilisée avec un serveur mutualisé.Cette solution est conseillée par exemple pour des sites de commerce électronique trai-tant un nombre limité de commandes.

2.2 Grâce à une page AWP d’interrogation

WebDev permet de créer des pages AWP. Les pages AWP sont des pages indépendantes,pouvant exécuter des traitements à partir de paramètres passés en ligne de commandeà la page. Les pages AWP peuvent être utilisées simplement pour récupérer les donnéessaisies sur le site.

Les pages AWP présentes sur le serveur WEB sont interrogées régulièrement par des re-quêtes HTTP exécutées par l’application Back Office. Les données sont renvoyées sousforme de chaînes et traitées par l’application WinDev.

Avantages :• Solution simple à mettre en place.• Equivalent à un service WEB personnalisé.• Ne nécessite aucun exécutable supplémentaire sur le serveur. Aucune session sup-

plémentaire n’est exécutée sur le serveur.

Inconvénient : Récupération "simple" des données : pas de mise à jour des données versle serveur.

Cette solution peut être utilisée avec un serveur mutualisé.Cette solution est conseillée par exemple pour des sites de commerce électronique.

Dessin.book Page 151 Mardi, 13. janvier 2009 10:44 10

Page 152: concepts webdev 14

Part

ie 1

0 :

Dép

loyer

un

sit

e152

2.3 Par FTP :

WebDev permet d’effectuer régulièrement une sauvegarde des fichiers de données dusite WebDev. Cette sauvegarde peut être ensuite transférée par FTP au siège de la socié-té. Il suffit alors de :• récupérer la sauvegarde compressée des fichiers de données• décompresser les fichiers (à l’aide d’une application WinDev)• traiter les données présentes dans les fichiers.

Avantages :• Solution simple à mettre en place.• Ne nécessite aucun exécutable supplémentaire chez l’hébergeur.

Inconvénient : Tous les fichiers de données de l’application sont récupérés.

Cette solution peut être utilisée avec un serveur mutualisé.

3 Effectuer une réplication

La réplication permet de maintenir à jour des bases de données distantes de mêmestructure. Il est ainsi possible de faire une réplication entre la base de données d’un siteWebDev et la base de données de l’application WinDev au siège de la société.

Par exemple, une base de données de saisie de commandes et de gestion de stocks estutilisée à la fois sur un site WebDev (prise de commandes en ligne) et au siège de la so-ciété (prise de commandes téléphonique ou par courrier).La réplication permet de :• transmettre les commandes saisies en ligne au siège de la société (réplication

monodirectionnelle)• transmettre les commandes saisies en ligne au siège de la société, et de transmet-

tre la mise à jour des stocks au site Internet (réplication bi-directionnelle)

Attention : Il est nécessaire de prendre en compte les contraintes de la réplication dèsla création du projet. En effet, plusieurs règles doivent être respectées lors de la descrip-tion de l’analyse et des rubriques des fichiers.

La réplication peut être réalisée par email ou à l’aide de la réplication universelle assis-tée. Seule la réplication par email est présentée dans ce chapitre. Pour plus de détailssur la réplication universelle assistée, consultez l’aide en ligne.

Dessin.book Page 152 Mardi, 13. janvier 2009 10:44 10

Page 153: concepts webdev 14

Part

ie 1

0 :

Dép

loyer

un

sit

e

153

Réplication par emails

Un moteur d’emails est installé :• sur le serveur. Ce moteur d’e-mails est livré avec WebDev.• au siège de la société.

A chaque modification de la base de données (ajout, modification, suppression), unemail est créé. Cet email contient toutes les informations nécessaires à la mise à jour dela base de données distante. L’email est envoyé et traité par le moteur d’emails.

Avantages :Mise à jour des données possible :• du serveur vers le siège de la société.• du siège vers le serveur.

A prévoir :Moteur d’emails en tâche de fond sur le serveur et sur le poste réceptionnant les emailsau siège de la société.

Cette solution est conseillée pour un site installé sur un serveur dédié (il n’est pas tou-jours possible de lancer un exécutable en permanence sur un serveur mutualisé).

Dessin.book Page 153 Mardi, 13. janvier 2009 10:44 10

Page 154: concepts webdev 14

Part

ie 1

0 :

Dép

loyer

un

sit

e154

Surveillez vos sites, serveurs, ...Un site dépend souvent de nombreux paramètres extérieurs : site Web, Serveur HyperFi-leSQL, réseau, ... Pour optimiser la gestion des incidents, WebDev propose d’utiliser unrobot de surveillance.Composé de trois exécutables lancés sur différents postes, le robot de surveillance per-met d’exécuter différents tests : tests Internet, tests réseau, ...En cas de problèmes lors du passage d’un test, le robot de surveillance peut vous avertirde différentes façons :• Message envoyé dans la messagerie PC SOFT (WDBAL).• Email• Exécution d’un programme tiers.De plus, une alerte sonore peut être mise en place sur le moniteur.

Dessin.book Page 154 Mardi, 13. janvier 2009 10:44 10

Page 155: concepts webdev 14

PARTIE 11

Annexes

Dessin.book Page 155 Mardi, 13. janvier 2009 10:44 10

Page 156: concepts webdev 14

Dessin.book Page 156 Mardi, 13. janvier 2009 10:44 10

Page 157: concepts webdev 14

Part

ie 1

1 :

An

nexes

157

Principales nouveautés de WebDev 14

Lisez cette partie si vous connaissez WebDev 12.WebDev 14 présente de nombreuses nouveautés, aussi bien pour développer des sitesWebDev dynamiques que pour déployer des sites WebDev statiques.La compatibilité avec WinDev 14 et WinDev Mobile 14 est totale.

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

• 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

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

Dessin.book Page 157 Mardi, 13. janvier 2009 10:44 10

Page 158: concepts webdev 14

Part

ie 1

1 :

An

nexes

158

• 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

• 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•Support des pages internes•Nouveaux types supportés : Tableaux associatifs, Date, Heure, DateHeure, Durée, Sour-

ceDeDonnées, Tableaux, Caractère, Chaîne ASCIIZ, Chaîne Pascal, ....•Optimisation de la vitesse des requêtes SQL•Nouvelles fonctions supportées

ProgrammationLes principales nouveautés de programmation :

• Nouveaux types de variables : File, Pile et Liste• Nouveaux types avancés permettant de gérer par exemple les éléments Google, les docu-

ments 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 JourFériéxxx pour gérer les jours fériés•Fonctions Menuxxx pour gérer les menus dynamiquement•Fonctions RSS•Fonctions JSON•...

Dessin.book Page 158 Mardi, 13. janvier 2009 10:44 10

Page 159: concepts webdev 14

Part

ie 1

1 :

An

nexes

159

Vous connaissez déjà WinDev

Ce qui change dans WebDev :

- WebDev permet de créer des pages alors que WinDev permet de créer des fenêtres.

- Différents types de code peuvent être saisis : un code WLangage s’exécutant sur leserveur, un code WLangage s’exécutant sur le navigateur, et un code Javascript s’exé-cutant sur le navigateur. Si vous créez une page PHP, un code supplémentaire apparaît : un code PHP s’exé-cutant sur le serveur.

- De nouvelles fonctions du WLangage spécifiques à Internet et Intranet sont disponi-bles (la liste de ces fonctions est donnée page 160).

- Certaines fonctions du WLangage inadaptées à Internet et Intranet n’existent plus.

- Certaines fonctions du WLangage sont uniquement utilisables dans un traitementexécutable en code serveur.

- Certaines fonctions du WLangage sont uniquement utilisables dans un traitementexécutable en code navigateur.

- De nouveaux types de champs plus spécifiques à une application Internet / Intranetsont disponibles :

• Champ d’affichage formaté• Champ Applet Java• Champ Cellule• Champ Chemin de navigation• Champ Flash• Champ Flex• Champ Image clicable (Map Area)• Champ IFrame• Champ Libellé HTML• Champ Lien• Champ Ligne• Champ Page Interne• Champ Plan du site• Champ Réglette• Champ SilverLight• Champ Tableau HTML• Champ Vignette

- Certains types de champs inutiles sur Internet ont disparu : ascenseur, potentiomè-tre, ActiveX, Objet OLE, spin, ...

Dessin.book Page 159 Mardi, 13. janvier 2009 10:44 10

Page 160: concepts webdev 14

Part

ie 1

1 :

An

nexes

160

Fonctions du WLangage spécifiques à WebDev 14(Détail dans l’aide en ligne du WLangage)

AJAXAnnuleAppelAsynchrone Annule l'exécution automatique de la procédure navigateur appelée par lafonction AJAXExécuteAsynchrone.

AJAXAppelAsynchroneEnCours Permet de savoir si une procédure serveur appelée par la fonctionAJAXExécuteAsynchrone est en cours d’exécution.

AJAXDisponible Permet de savoir si la technologie AJAX est utilisable dans le navigateur encours.

AJAXExécute Exécute une procédure serveur sans rafraîchir la page. Cette fonction estbloquante. Tant que le résultat de la procédure exécutée n'est pas récupé-ré, aucun autre traitement n'est exécuté.

AJAXExécuteAsynchrone Exécute une procédure serveur sans rafraîchir la page. Cette fonctionn'est pas bloquante. Les autres traitements continuent de s'exécuter nor-malement (que le résultat de la procédure exécutée soit récupéré ou non).

AjouteFavori Ajoute une adresse Internet dans la liste des favoris de l'internaute.AnnuleContexteAWP Supprime du contexte AWP une variable ajoutée par la fonction Déclare-

ContexteAWP.ASPAffiche Appelle un script ASP externe et renvoie la page résultat dans la fenêtre

en cours du navigateur.ASPExécute Appelle un script externe .asp et renvoie le résultat dans une chaîne. Une

requête http est effectuée : il est possible d'utiliser soit une méthodePOST, soit une méthode GET.

CelluleAfficheDialogue Affiche une cellule dans la page avec un effet de GFI (Grisage des FenêtresInaccessibles). Cette fonction permet de simuler simplement une boîte dedialogue en code navigateur, en utilisant une cellule dans une page.

CelluleFermeDialogue Masque une cellule affichée dans la page via la fonction CelluleAffiche-Dialogue.

ChaîneAffiche Renvoie une chaîne spécifique (ou un buffer) sur le navigateur du client enréponse à la requête reçue. Permet d'afficher sur le navigateur de l'inter-naute des documents sans avoir à passer par un fichier.

ChangeAction Permet de spécifier l'action effectuée en cas de désynchronisation entrela page HTML affichée dans le navigateur et le contexte de page sur le ser-veur.

ChangeDestination Change la frame de destination de la page.CheminNavigationAjouteLien Ajoute un lien dans un chemin de navigation.CheminNavigationInsèreLien Insère un lien dans un chemin de navigation.CheminNavigationModifieLien Modifie un lien dans un chemin de navigation.CheminNavigationSupprimeLien Supprime un lien dans un chemin de navigation.CheminNavigationSupprimeTout Supprime tous les liens dans un chemin de navigation.ConfigureContexteAWP Définit le fonctionnement des contextes AWP.ConnexionOccurrence Renvoie le nombre d'instances du site WebDev en cours d'exécution sur le

serveur.ContexteExiste Permet de savoir si un contexte de page existe sur le serveur.

Dessin.book Page 160 Mardi, 13. janvier 2009 10:44 10

Page 161: concepts webdev 14

Part

ie 1

1 :

An

nexes

161

ContexteFerme Ferme un contexte de page.ContexteOuvre Ouvre un nouveau contexte de page sans renvoyer les informations vers

le navigateur.CookieEcrit Ecrit un cookie sur le poste de l'internaute lors du prochain affichage d'une

page WebDev dans le navigateur.CookieLit Récupère la valeur d'un cookie enregistré sur le poste de l’internaute.DéclareContexteAWP Déclarer une liste de variables dont la valeur sera persistante entre les af-

fichages successifs des pages AWPEmailEtat Renvoie l'état d'un e-mail envoyé par une session SMTP ouverte en mode

asynchrone.EmailOuvreMessagerie Ouvre le logiciel de messagerie par défaut de l'internaute sur le poste na-

vigateur.FichierAffiche Renvoie un fichier spécifique sur le navigateur.FichierVersPage Initialise automatiquement les champs d'une page avec les valeurs des ru-

briques associées dans l'enregistrement en cours (chargé en mémoire) dufichier HyperFileSQL.

FramesetActualise Actualise un frameset affiché dans le navigateur de l'internaute à partir ducontexte présent sur le serveur.

FramesetAffiche Affiche un frameset WebDev dans le navigateur de l'internaute.FramesetUtilise Affiche un frameset WebDev dans le navigateur de l'internaute et ferme

tous les contextes de pages et de frameset en cours.fRepWeb Renvoie le nom physique complet du répertoire contenant les images, les

fichiers Javascript et Java du site WebDev.GadgetAfficheFlyout Affiche dans une zone popup une page du gadget Vista.GadgetChargeParamètre Charge une valeur persistante dans un gadget Vista. Cette valeur a été

précédemment sauvegardée grâce à la fonction GadgetSauveParamètre.GadgetFermeFlyout Ferme la zone popup d'un gadget Vista.GadgetSauveParamètre Sauve une valeur persistante dans un gadget Vista. Cette valeur pourra

être lue ensuite avec la fonction GadgetChargeParamètre.grTailleImage Définit la taille de l'image contenant le graphe.IdentifiantContexteAWP Renvoie l'identifiant du contexte AWP. Cet identifiant peut par exemple

être utilisé pour construire une URL.ImagePosX Renvoie la position horizontale du curseur de souris par rapport au champ

image considéré.ImagePosY Renvoie la position verticale du curseur de souris par rapport au champ

image considéré.ImageZone Renvoie le numéro de la zone de l’image cliquée par l’internaute (image

clicable uniquement).JSMéthode Permet d’exécuter une méthode Javascript sur un élément de la page en

cours.JSONExécute Appelle une URL serveur du même domaine qui retourne des données au

format JSON (JavaScript Object Notation).JSONExécuteExterne Appelle une URL serveur externe qui retourne des données au format

JSON (JavaScript Object Notation). Les données sont traitées dans uneprocédure spécifique.

JSPropriété Permet de manipuler des fonctionnalités spécifiques sur des objets de lapage en cours.

Dessin.book Page 161 Mardi, 13. janvier 2009 10:44 10

Page 162: concepts webdev 14

Part

ie 1

1 :

An

nexes

162

NavigateurAdresseIP Renvoie l'adresse IP du poste de l'Internaute connecté au site WebDev.NavigateurFerme Ferme la fenêtre en cours du navigateur et stoppe l'exécution du code en

cours.NavigateurNom Renvoie le nom du navigateur de l’internaute.NavigateurOuvre Ouvre une nouvelle fenêtre du navigateur.PageActiveGFI Active ou désactive l’effet appliqué par WebDev sur les pages inactives

lors de l’affichage d’une page modale.PageActualise Actualise une page affichée dans le navigateur de l'internaute à partir du

contexte présent sur le serveur.PageAdresse Permet d’obtenir l’adresse Internet d’une page WebDev.PageAffiche Affiche une page dans le navigateur de l’internaute.PageAfficheDialogue Affiche une page de manière modale. Cette fonction permet de créer un

dialogue avec l'utilisateur. La page est affichée devant, et en arrière planse trouve la page ouvrante, grisée par le mécanisme de GFI.

PageCourante Renvoie le nom de la page contenant le code WLangage en cours d'exécu-tion.

PageExiste Vérifie si la page spécifiée est actuellement affichée dans le navigateur del'internaute.

PageFermeDialogue Ferme la page courante. Cette page a été ouverte avec la fonction PageAfficheDialogue. Une valeur de retour peut être renvoyée à la page appelante.

PageInitialisation Remet à zéro (ou non) les champs de la page en cours et lance les traite-ments d'initialisation des champs.

PageParamètre Renvoie la valeur d'un paramètre passé à la page en cours.PagePosition Fait défiler une page pour positionner un champ dans la partie visible de

la page (le plus haut) dans le navigateur.PagePrécédente Renvoie le nom de la page précédente.PageSemiDynamiqueAffiche Affiche une page semi-dynamique dans le navigateur de l'internaute à par-

tir d'une page WebDev dynamique ou statique.PageTauxGFI Permet de définir le taux de grisage des pages inactives.PageUtilise Affiche une page WebDev dans le navigateur de l'internaute et ferme tous

les contextes de pages en cours.PageValide Valide la page spécifiée et lance l'exécution d'un bouton.PageVersASP Envoie les données d’une page actuellement affichée sous le navigateur

vers un serveur ASP.PageVersEmail Envoie les données d’une page actuellement affichée sous le navigateur

par un email.PageVersFichier Initialise automatiquement la valeur mémoire des rubriques d'un fichier

avec la valeur des champs de la page.PageVersJSP Envoie les données d’une page actuellement affichée sous le navigateur

vers un serveur JSP.PageVersPHP Envoie les données d’une page actuellement affichée sous le navigateur

vers un serveur PHP.PHPAffiche Appelle un script PHP externe et renvoie la page résultat dans la fenêtre

en cours du navigateur.

Dessin.book Page 162 Mardi, 13. janvier 2009 10:44 10

Page 163: concepts webdev 14

Part

ie 1

1 :

An

nexes

163

PHPExécute Appelle un script externe .php et renvoie le résultat dans une chaîne. Unerequête http est effectuée : il est possible d'utiliser soit une méthodePOST, soit une méthode GET.

RépertoireWeb Renvoie le chemin du répertoire contenant les images, les fichiers Javas-cript, les fichiers applet Java, les autres fichiers accessibles depuis lenavigateur, ...

ScriptAffiche Appelle un script externe (par exemple .php, .asp, .mhtml ou .mht) et ren-voie la page résultat dans la fenêtre en cours du navigateur.

ScriptExécute Appelle un script externe (par exemple .php ou .asp) et renvoie le résultatdans une chaîne. Une requête http est effectuée : il est possible d'utilisersoit une méthode POST, soit une méthode GET.

SiteAdresse Renvoie l’adresse Internet de connexion à un site dynamique WebDev si-tué sur le même serveur.

SiteDynamiqueAffiche Affiche un site dynamique (créé avec WebDev) dans le navigateur de l'in-ternaute à partir d'une page WebDev dynamique ou statique.

SSLActive Permet d'activer ou de désactiver le mode sécurisé SSL.SupprimeContexteAWP Supprime du contexte AWP une variable ajoutée par DéclareContexteAWPUploadCopieFichier Enregistre sur le serveur un fichier "uploadé" par l'internaute.UploadNomFichier Connaître le nom d'un fichier "uploadé" par l'internaute.

Dessin.book Page 163 Mardi, 13. janvier 2009 10:44 10

Page 164: concepts webdev 14

Part

ie 1

1 :

An

nexes

164

Composants livrés avec WebDevWebDev est livré en standard avec de nombreux composants. Ces composants sont li-vrés avec leurs sources et avec un exemple d’utilisation.Voici la liste des principaux composants livrés avec WebDev :

Deux sous-répertoires sont spécifiques à chacun de ces exemples :- le sous-répertoire "<NomDuComposant>-Exemple" contient un exemple de projet uti-

lisant le composant.- le sous-répertoire "<NomDuComposant>-Source" contient le projet du composant.

Des composants supplémentaires seront livrés avec la Lettre du Support Technique(LST) ou disponibles sur notre site (www.pcsoft.fr).

Nom du composant Description

Demande de documentation Permet de gérer une demande de documentation (brochu-re, catalogue, ...) dans un site WebDev.

Diagramme de Gantt Permet d’afficher un diagramme de GANTT dans une tablemémoire ou dans une page intégrée au composant.

Login Centralise la gestion des utilisateurs et de leurs mots depasse.

ImagePass Permet de générer une image codée en fonction des para-mètres donnés.

Moteur de Recherche Permet d’indexer des documents (texte, vidéos, sons, …) se-lon un identifiant géré par l’utilisateur (pouvant provenird’un fichier de données HyperFileSQL, …) et des mots-clés(texte contenu dans un document, nom de fichier, etc).Permet également d’effectuer des recherches sur les docu-ments ainsi indexés et de générer des statistiques d’indexa-tion (mots-clés inutilisés, nombre de documents par mots-clés, etc).Attention : Les documents ne sont pas stockés. Seuls lesmots-clés permettant d'indexer les documents sont enregis-trés dans les fichiers de données du composant.

Panier Permet de gérer facilement un panier de commandes dansun site WebDev.

PayBox Permet de mettre en place un système de paiement sécuri-sé en utilisant la solution de la société PayBox.Attention : ceci n’est pas une recommandation de PC SOFTpour l’utilisation de la solution de paiement sécurisé de lasociété PayBox.

Dessin.book Page 164 Mardi, 13. janvier 2009 10:44 10

Page 165: concepts webdev 14

Part

ie 1

1 :

An

nexes

165

Exemples livrés avec WebDevLes exemples livrés avec WebDev présentent de manière didactique les différentes fonc-tionnalités de WebDev.Leur code source est commenté et détaillé.Ces exemples sont présents dans le sous-répertoire "Exemples" du répertoire d'installa-tion de WebDev et peuvent être ouverts directement depuis le volet "Assistants, Exem-ples et Composants".

Différents types d'exemples sont livrés avec WebDev :- exemples complets : ces exemples correspondent à des sites complets, qui peuvent

être utilisés sans adaptation.- exemples didactiques : ces exemples illustrent une fonctionnalité spécifique.

Exemples complets

Nom de l’exemple Description

Catalogue_Internet Site cataloguePropose un site catalogue en AWP et un site d'adminis-tration.- Gestion d'un panier- Gestion des promotions- Gestion des nouveautés- Recherche de produit

Hawaii Gestion de supermarché en ligne.Permet de visualiser, rechercher des produits dans dif-férentes boutiques. Ces produits peuvent être achetéset stockés dans un panier virtuel jusqu’au paiement.

NetAnnonces Gestion de petites annonces.Permet des recherches multicritères, ajout, modifica-tion et suppression d'annonces, ainsi qu'une gestiond'utilisateurs.

Rewali Achat de voyages en ligne.Permet de sélectionner un voyage, de faire des réser-vations, ...

Dessin.book Page 165 Mardi, 13. janvier 2009 10:44 10

Page 166: concepts webdev 14

Part

ie 1

1 :

An

nexes

166

SAV Gestion de dysfonctionnements.Permet de créer, modifier ou supprimer des sugges-tions ou des dysfonctionnements. Permet également larecherche et la consultation des informations enregis-trées.

SAV_Php Gestion de dysfonctionnements en PHP.Permet de créer, modifier ou supprimer des sugges-tions ou des dysfonctionnements. Permet également larecherche et la consultation des informations enregis-trées.

WebDoc Gestion Electronique de Documents (GED).Utilise le composant Moteur de recherche pour effec-tuer des recherches par mot-clé.

WebDVD Site de location de DVD en ligne.

WebImmo Site de vente et de location de biens immobiliers.

WebMillion Cet exemple utilise un fichier de données de plus d'1million d'enregistrements. Il permet de visualiser, derechercher et de commander des maquettes.Une fois la commande établie, il est possible d'impri-mer la facture au format PDF ou d’utiliser le modulePayBox de paiement sécurisé

WebParc Cette application Web simule une gestion de parc infor-matique.

WW_Blog_AWP Cet exemple est un site de gestion de blogs.Cet exemple est basé sur une génération AWP, ce quipermet entre autres de pouvoir référencer le site danstous les moteurs de recherche.De plus, chaque blog peut être exporté en RSS.

WW_Blog_PHP Cet exemple est un site Php de gestion de blogs.Il est possible de mettre en forme le texte, d'inclure desimages, des citations, etc...De plus, chaque blog peut être exporté en RSS.

WW_Camembert Cet exemple explique comment utiliser le grapheur li-vré en standard avec WebDev et associer des actionsau clic sur des parties dynamiques du graphe.

Dessin.book Page 166 Mardi, 13. janvier 2009 10:44 10

Page 167: concepts webdev 14

Part

ie 1

1 :

An

nexes

167

WW_Editeur_HTML Cet exemple est développé pour Microsoft Internet Ex-plorer 5.5 (ou version ultérieure). Il utilise les fonction-nalités d'édition HTML d'Internet Explorer.

WW_Emprunt Cet exemple permet de simuler des emprunts et no-tamment de calculer :- le montant des mensualités à partir du montant em-prunté donné- le montant empruntable à partir d'une mensualitédonnée- le rapport d'un placement à partir d'un apport men-suelLe tableau d'amortissement est affiché pour chacundes cas. Ce tableau peut être édité dans un fichier auformat PDF (fonctionnalité standard de WebDev).

WW_Forum_Classic Cet exemple propose les fonctionnalités principalesd'un forum utilisateur (création de forums, de sujets(ou topics) et de messages, modération par un admi-nistrateur, etc...).

WW_Images Cet exemple est une galerie d'images et de photogra-phies simplifiée.Les images contenues dans le répertoire "Data" du ré-pertoire "Exe" du projet sont affichées en miniaturedans une liste horizontale défilante. Le défilement desimages est réalisé grâce à AJAX.

WW_Images_php Cet exemple est un site Php. Il s'agit d'une galeried'images et de photographies simplifiée.

WW_Planning Cet exemple permet d'afficher de façon dynamique lestâches des différents collaborateurs.Il est possible d'ajouter, de modifier ou de supprimerdes tâches dans le planning, simplement en cliquantsur les éléments du planning.Toutes les manipulations sont effectuées grâce à AJAX.

WW_SiteMarchand_php Cet exemple de site marchand simplifié est un site Phpréalisé avec WebDev. Il permet de visualiser, de recher-cher et de commander des maquettes.

WW_TraceCourbe Cet exemple permet de dessiner des graphes.

Dessin.book Page 167 Mardi, 13. janvier 2009 10:44 10

Page 168: concepts webdev 14

Part

ie 1

1 :

An

nexes

168

Exemples didactiques

WW_VitrineAWP Présente le mixage entre un site dynamique WebDevclassique et un site AWP WebDev.Les pages AWP du site seront référencés par les mo-teurs de recherche. Elles contiennent les produits clas-sés par rayon.Les pages dynamiques permettent de gérer les prisesde commandes et les informations sur les clients du si-te. Ces informations n’ont pas à être référencées parles moteurs de recherche.

WW_WebBourse Cet exemple explique comment utiliser le grapheur li-vré en standard avec WebDev pour tracer des graphesboursiers.

WW_WebChat WW_WebChat est un site de discussion en ligne et endirect.Plusieurs personnes peuvent se connecter au site etdiscuter avec les autres personnes déjà présentes.Tous les traitements effectués (envoi de messages,etc.) sont gérés grâce à AJAX. Il n'y a donc aucun effetde rafraîchissement dans les pages.

WW_Zoom Cet exemple explique comment manipuler les imagesen code navigateur : zoomer, se déplacer, gérer le clicsur une carte. (ici une carte Michelin)

Nom de l’exemple Description

WW_ChangementCSS Cet exemple explique comment modifier la feuille destyles d'une page WebDev par programmation. Lechangement de feuille de styles s'effectue en code na-vigateur.Ce principe peut être utile par exemple pour changerl'interface d'un site en fonction des préférences de l'in-ternaute.

WW_FlashParametrable Cet exemple fournit sous forme de superchamps desbandeaux Flash personnalisables.

WW_Frames Cet exemple montre comment modifier deux framesdifférentes, sans réafficher tout le frameset.

Dessin.book Page 168 Mardi, 13. janvier 2009 10:44 10

Page 169: concepts webdev 14

Part

ie 1

1 :

An

nexes

169

WW_MapArea Cet exemple a pour but de présenter l'utilisation desmap area en programmation ou par action prédéfinie.

WW_MiseEnEvidence Cet exemple montre comment utiliser le CSS pour en-cadrer et mettre en évidence des mots dans un libelléHTML (ou un champ HTML).

WW_ReassortXML Présente l’utilisation de fichiers XML.Permet de gérer des commandes, modifier les quanti-tés commandées, valider et enregistrer des comman-des au format XML.

WW_RegletteAWP Cet exemple montre comment gérer une réglette dansune page AWP.La réglette est générée en WLangage grâce à diversesoptions (nombre de résultats par page de recherche,nombre total de résultat, ...).

WW_TexteDefilant Cet exemple propose l'utilisation du superchamp Texte-Defilant. Ce superchamp permet de faire défiler du tex-te dans un cadre de votre page

WWAjaxPHP Cet exemple est un site Php Ajax réalisé avec WebDev.Il présente notamment les tables Ajax et les zones ré-pétées Ajax.

WWChampOnglet Présente l’utilisation du champ Onglet.

WWConnect Ce site permet de détecter la fermeture d'un naviga-teur client afin d'enregistrer, par exemple, sa décon-nexion ou d'effectuer des opérations spécifiques.

WWDialog Cet exemple montre un dialogue entre deux naviga-teurs distincts. Il permet d'ouvrir une nouvelle pagedans un nouveau navigateur et de récupérer des va-leurs modifiées.

WWDialogue Cet exemple présente donc les boîtes de dialogue auto-matiques et également les boîtes de dialogue person-nalisées.

WWDiapo Ce site est un diaporama de photographies du Cantal(15).

WWDload Ce site permet de proposer des fichiers en télécharge-ment aux utilisateurs en fonction du groupe auquel ilsappartiennent.

Dessin.book Page 169 Mardi, 13. janvier 2009 10:44 10

Page 170: concepts webdev 14

Part

ie 1

1 :

An

nexes

170

Des exemples supplémentaires sont livrés avec la Lettre du Support Technique (LST) ousont disponibles sur notre site (www.pcsoft.fr).

WWEnvironnement Ce site permet d'utiliser les variables d'environnementafin de récupérer certaines informations sur les inter-nautes.

WWFlash Ce site permet d'intégrer un menu déroulant Flash quiinteragit avec WebDev. Ce site permet donc d'utiliserdes animations Flash dans un site WebDev.Ce site montre aussi l'interaction avec une animationFlash.

WWForm Cet exemple permet de montrer comment changer dy-namiquement l'apparence d'un formulaire contenudans une page Web.

WWMenu Cet exemple présente un menu réalisé avec WebDev.

WWParam Cet exemple montre comment passer et récupérer desparamètres à un site.

WWPocket Cet exemple est un site pouvant être visualisé sur unPocket PC. Le site détecte la résolution du client et af-fiche les pages en conséquence.

WWTabulation Ce site réalisé permet d'intercepter l'appui sur la tou-che [TABULATION] pour insérer une tabulation dans unchamp de saisie.

WWTouche Ce programme permet de détecter la touche frappéeau clavier (événement OnKeyDown) sous Internet Ex-plorer.Cette fonctionnalité est mise en place dans un jeu demots-croisés.

WWZone Ce programme réalisé avec WebDev explique les casles plus fréquents d’utilisation de zones répétées.

WWZRGraphe Ce programme réalisé avec WebDev montre commentgérer des zones répétées contenant des graphes dyna-miques.

Dessin.book Page 170 Mardi, 13. janvier 2009 10:44 10