Vous êtes sur la page 1sur 155

Dessin.book Page 1 Vendredi, 22.

fvrier 2008 5:53 17

Concepts

Dessin.book Page 2 Vendredi, 22. fvrier 2008 5:53 17

WebDev 12 - Concepts
Version 12 - (1) 11-07

Visitez rgulirement le site www.pcsoft.fr, espace tlchargement, pour vrifier si des


mises jour sont proposes.

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

Conseil : Pour recevoir directement des mises jour intermdiaires et des conseils
dutilisation, abonnez-vous la LST (revue trimestrielle + CD), en franais.

Cette documentation nest pas contractuelle. Des modifications ont pu intervenir dans
le logiciel depuis la parution de ce manuel. Veuillez consulter laide en ligne.

Tous les noms de produits ou autres marques cits dans cet ouvrage sont des marques dposes par leurs propritaires respectifs.
PC SOFT 2007 : Aucune reproduction intgrale ou partielle du prsent ouvrage sur quelque support que ce soit ne
peut tre effectue sans lautorisation expresse de PC SOFT.

Dessin.book Page 3 Vendredi, 22. fvrier 2008 5:53 17

Dans quel ordre lire les manuels ?


WebDev 12 est un puissant outil de dveloppement de sites Internet / Intranet, qui fournit
tous les outils ncessaires la conception et la ralisation de sites pour le Web.
Pour une formation rapide et efficace WebDev 12, nous vous conseillons lordre dapprentissage suivant :

Lecture des "Concepts".


Ce manuel prsente les principaux concepts ncessaires la cration dun site
WebDev performant.

"Auto-formation" (livre + exercices)


Le guide dauto-formation permet une premire approche "pratique" de WebDev.
Vous pouvez ainsi vous familiariser avec les principaux diteurs de WebDev.

Test des exemples


Testez les diffrents exemples livrs avec WebDev dans les domaines qui vous intressent (e-commerce, annuaire, planning, ...).

Le "manuel de programmation" est prvu pour une lecture ponctuelle au fur et mesure
de vos besoins. Pour chaque sujet, vous trouverez le concept associ et la liste des fonctions du WLangage correspondantes.
L'aide en ligne permet de trouver rapidement la syntaxe d'une fonction du WLangage,
dobtenir une aide sur linterface, ...

Nous vous souhaitons une agrable prise en main de WEBDEV.

Concepts WebDev

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

Dessin.book Page 4 Vendredi, 22. fvrier 2008 5:53 17

Concepts WebDev

Dessin.book Page 5 Vendredi, 22. fvrier 2008 5:53 17

SOMMAIRE
PARTIE 1 - INTERNET : CONCEPTS DE BASE
Quest-ce quun site ? ........................................................................................................11
Site statique, semi-dynamique ou dynamique ? .............................................................12
Les diffrents types de sites dynamiques .......................................................................13
Les diffrents types de pages ...........................................................................................14
Comparaison pages AWP et pages dynamiques WebDev ..............................................18
AJAX ....................................................................................................................................20

PARTIE 2 - DVELOPPEMENT DUN SITE


Dvelopper un site avec WebDev .....................................................................................25
Terminologie : Site et projet ..............................................................................................26
Machines et logiciels ncessaires ....................................................................................27
Configuration du serveur ...................................................................................................28
Tableau de bord du projet .................................................................................................29
Perso-dossiers : Organisez votre projet ............................................................................30
Gestionnaire de sources (GDS) .........................................................................................31
Centre de Suivi de Projets .................................................................................................33
WinDev, WebDev, WinDev Mobile : Projet unique ...........................................................34
Configuration de projet ......................................................................................................35
Gnration multiple ...........................................................................................................36
RAD .....................................................................................................................................37
RID ......................................................................................................................................38
Les deux types de code .....................................................................................................39
Le WLangage : un langage simple et trs puissant ........................................................42
Composant .........................................................................................................................43
Composants multi-produits ...............................................................................................44

2 looks de site : modles ou framesets ...........................................................................47


Modle de pages (template) .............................................................................................48
Frameset : une page HTML divise ..................................................................................49
Je cre une page sous lditeur ... ....................................................................................50
Les fichiers suivants sont automatiquement crs : .....................................................51
Choisir un type de champ selon linformation afficher ................................................52
Quel type dimage choisir : dynamique, statique, gnre, ... ? ....................................54
Crer des effets sur les boutons : boutons personnaliss .............................................56
Les modles de champs ...................................................................................................58
Rpter un groupe de champs .........................................................................................59
Afficher un fichier dans une Table ou dans une Zone Rpte ...................................60
Positionner les champs dans une page ...........................................................................61
Superposer les champs .....................................................................................................62

Sommaire

PARTIE 3 - AFFICHER DES INFORMATIONS DANS UNE PAGE

Dessin.book Page 6 Vendredi, 22. fvrier 2008 5:53 17

Des feuilles de styles CSS : pour simplifier la mise en page ..........................................63


Site centr ou adapt ? .....................................................................................................64
10 conseils dergonomie ... ...............................................................................................65
Site multi-langue ................................................................................................................69

PARTIE 4 - ACTIONS POSSIBLES DANS UNE PAGE


Afficher et enchaner les pages ........................................................................................73
Empcher le retour sur une page .....................................................................................79
Choisir un type de bouton / lien .....................................................................................80
Ordre dexcution des codes des boutons / liens ..........................................................81
Tlcharger un fichier (image, ...) vers le serveur (Upload) ............................................83
WebDev et les tats ..........................................................................................................84
Diffrents modes dimpression ........................................................................................85
Raliser un traitement sur plusieurs pages successives ...............................................86
Envoyer des emails ............................................................................................................87
Conserver des informations sur le poste de linternaute grce aux cookies ................89
Protger laccs au site : mots de passe .........................................................................90
Crypter les informations qui transitent sur le Web avec SSL .........................................91
Avantage scuritaire pour votre site dynamique : la gestion du "Back" ........................92
Paiement scuris avec prestataire ................................................................................95

PARTIE 5 - BASE DE DONNES


Les diffrents types de fichiers accessibles ....................................................................99
Comment lier un champ sa rubrique ......................................................................... 100
Hyper File Classic ............................................................................................................ 101
Hyper File Client / Serveur ............................................................................................. 102
Les requtes ................................................................................................................... 103
Les requtes intgres ................................................................................................... 104
Rplication universelle ................................................................................................... 105
Architecture 3-tiers ......................................................................................................... 106

Sommaire

PARTIE 6 - TESTER UN SITE


Tester un site : Les lments tester ........................................................................... 109
Comment tester un site ? .............................................................................................. 110
Le dbogueur .................................................................................................................. 112
Quand peut-on utiliser le dbogueur ? ......................................................................... 113
A quoi sert ladministrateur WebDev ? ......................................................................... 114

PARTIE 7 - DPLOYER UN SITE


Dploiement dun site statique ou dun site semi-dynamique WebDev ..................... 117
Dploiement dun site dynamique WebDev ................................................................. 118
Centre de contrle dhbergement ............................................................................... 122
Rfrencement dun site ............................................................................................... 123

Dessin.book Page 7 Vendredi, 22. fvrier 2008 5:53 17

Mise en service dun site dynamique WebDev ............................................................. 124


Serveur ddi ou mutualis ? ........................................................................................ 125
Quel type de serveur choisir ? ....................................................................................... 127
Installer un site dynamique WebDev sur des configurations spcifiques .................. 128

PARTIE 8 - MAINTENIR UN SITE


Maintenance dun site dynamique WebDev ................................................................. 135
Consulter les statistiques de frquentation des sites dynamiques ............................ 136
Rcuprer des donnes sur un site .............................................................................. 137

PARTIE 9 - ANNEXES

Sommaire

Principales nouveauts de WebDev 12 ........................................................................ 143


Vous connaissez dj WinDev ....................................................................................... 145
Fonctions du WLangage spcifiques WebDev 12 ..................................................... 146
Composants livrs avec WebDev .................................................................................. 149
Exemples livrs avec WebDev ....................................................................................... 150

Dessin.book Page 8 Vendredi, 22. fvrier 2008 5:53 17

Sommaire

Dessin.book Page 9 Vendredi, 22. fvrier 2008 5:53 17

PARTIE 1

Internet : Concepts de base

Dessin.book Page 10 Vendredi, 22. fvrier 2008 5:53 17

Dessin.book Page 11 Vendredi, 22. fvrier 2008 5:53 17

11

Quest-ce quun site ?


Un site Internet / Intranet est un ensemble de pages HTML stockes sur un serveur Web.
Ces pages HTML sont organises dans un but prcis (par exemple, prsenter une entreprise, vendre des produits, ...).
Un site est destin tre utilis par des internautes. Les internautes utilisent un simple
navigateur pour accder au site.

Serveur

Page HTML

Poste serveur chez un hbergeur.


Les pages HTML sont stockes
sur ce serveur

Linternaute accde au site et


affiche des pages HTML
grce un navigateur

Partie 1 : Internet : Concepts de base

WebDev permet de crer facilement des sites Internet / Intranet qui grent ou non des
donnes.

Dessin.book Page 12 Vendredi, 22. fvrier 2008 5:53 17

12

Site statique, semi-dynamique ou dynamique ?

Partie 1 : Internet : Concepts de base

Plusieurs types de sites peuvent tre raliss :


- des sites statiques.
- des sites semi-dynamiques
- des sites dynamiques.
Le tableau ci-dessous prsente les principales diffrences entre ces types de sites :

Site statique

Site semi-dynamique

Site dynamique

Le contenu des pages du site


est fixe, dtermin une fois
pour toutes.
Un site statique ne peut pas
interagir avec des donnes.

Le contenu des pages du site


est construit partir de donnes prsentes dans des fichiers
de
donnes.
Cependant, le contenu des
pages est fixe.

Site statique WebDev : le moteur WebDev nest pas ncessaire.

Site semi-dynamique WebDev : le moteur WebDev nest


pas ncessaire.

Les donnes affiches dans


les pages varient.
En gnral, les pages permettent de :
- raliser des traitements et/
ou des calculs par programmation.
- afficher des donnes stockes dans une base de donnes.
- afficher des images et du texte interactif.
Site dynamique WebDev : le
moteur WebDev est ncessaire.

Quelques exemples de sites


Le tableau ci-dessous prsente quelques exemples de sites statiques et de sites
dynamiques :

Sites statiques
- site de prsentation dune socit, ...
- site dune association
- site personnel
- site dun quotidien ...

Sites dynamiques
- catalogue de produits avec gestion en temps
rel des commandes
- site de gestion des rservations de voyages
- site de gestion des stocks dune entreprise
(Intranet) ...

Remarque : Un site dynamique peut contenir une partie statique (prsentation de lentreprise, ...).
WebDev permet de crer :
- des pages statiques.
- des pages dynamiques.
- des pages semi - dynamiques.

Dessin.book Page 13 Vendredi, 22. fvrier 2008 5:53 17

13

Les diffrents types de sites dynamiques


Un site dynamique permet dafficher des pages dont le contenu varie. Le plus souvent, le
contenu de ces pages est li une base de donnes.
Il est ainsi possible par exemple dans un site dynamique de grer en temps rel les rservations de voyages. Ces rservations sont directement enregistres dans un fichier de
donnes et peuvent tre affiches tout moment.

Site dynamique

PHP
Site PHP

Site dynamique
WebDev

Accs natifs
Hyper File

ODBC

OLE DB

Oracle
SQL Server
MySQL
DB2
XML

Informix
Progress
Sybase
Oracle Lite
AS/400

...

MySQL

Partie 1 : Internet : Concepts de base

WebDev propose deux types de sites dynamiques :


- site dynamique WebDev. Ce type de site ncessite un moteur WebDev sur le serveur.
Il permet de manipuler de nombreuses bases de donnes.
- site dynamique PHP. Ce type de site ncessite un moteur PHP sur le serveur. Ce type
de site est conseill pour hberger des sites dynamiques chez un hbergeur grand public.
Seules les bases de donnes MySQL peuvent tre manipules avec ce type de site.

Dessin.book Page 14 Vendredi, 22. fvrier 2008 5:53 17

14

Les diffrents types de pages

Partie 1 : Internet : Concepts de base

Diffrents types de pages peuvent tre utiliss dans les sites crs avec WebDev :
-

Les pages statiques. Ce type de page permet dafficher des donnes fixes.

Les pages semi-dynamiques. Ces pages permettent dafficher des donnes disponibles dans une base de donnes. Ces pages et leur contenu sont gnres sur le poste
de dveloppement lors de la cration du site. Lorsque les pages HTM correspondant
aux pages dynamiques sont cres, le contenu de la page est alors fix.

Les pages dynamiques WebDev. Ces pages permettent dafficher dynamiquement les
informations contenues dans une base de donnes. Le contenu de la page varie en
fonction de lenregistrement affich.
Lors de laffichage dune page dynamique, le contexte correspondant est automatiquement sauvegard et mis jour sur le serveur. Le contexte de lapplication contient principalement les variables globales, les variables de positionnement dans les fichiers de
donnes, ...

Les pages dynamiques WebDev AWP. Ces pages permettent dafficher dynamiquement des donnes contenues dans une base de donnes. Le contenu de la page varie
en fonction de lenregistrement affich.
Les pages AWP peuvent utiliser ou non le contexte de lapplication. Ce contexte peut
tre stock sous forme de cookie ou sur disque. Si les pages AWP nutilisent pas le contexte de lapplication, elles sont autonomes.

Les pages dynamiques PHP. Ces pages permettent dafficher dynamiquement des
donnes contenues dans une base de donnes. Ces pages peuvent uniquement tre
utilises dans un site PHP.

Les pages suivantes prsentent ces diffrents types de pages.

Dessin.book Page 15 Vendredi, 22. fvrier 2008 5:53 17

15

Principe dune page statique


D V E L O PP E M E NT

Poste de
dveloppement

Cration dune page


statique sous
WebDev (fichier ".WWH")

D P L O IE M E NT

Page HTML

CO N SU L T A T I ON
Poste de
linternaute

Page statique visualise


sous le navigateur

Partie 1 : Internet : Concepts de base

Poste Serveur

Dessin.book Page 16 Vendredi, 22. fvrier 2008 5:53 17

16

Principe dune page semi-dynamique


DVELOPPEMENT
Poste de
dveloppement

Base de donnes
associe au projet

Cration dune page


semi-dynamique sous
WebDev (fichier ".WWH")

Gnration des
pages statiques
ncessaires (fichiers
".HTM")

D P L O I E M E N T
Partie 1 : Internet : Concepts de base

Poste Serveur

Pages
HTML

CO N SU L T A T I ON

Poste de
linternaute

Page statique (correspondant aux pages


semi-dynamiques) en excution sous le navigateur.
La page affiche correspond aux informations
demandes par linternaute.

Dessin.book Page 17 Vendredi, 22. fvrier 2008 5:53 17

17

Principe dune page dynamique


D V E L O P P E M E NT

Poste de
dveloppement

Cration dune page dynamique


sous WebDev (fichier ".WWH")

D P L O I E M E NT
Poste Serveur

Moteur
WebDev
Base de
donnes

CO N SU L T A T I ON
Poste de
linternaute

Page dynamique en excution sous le navigateur.


Les donnes affiches dans les pages varient en
fonction des manipulations de linternaute.

Partie 1 : Internet : Concepts de base

Page
HTML

Dessin.book Page 18 Vendredi, 22. fvrier 2008 5:53 17

18

Comparaison pages AWP et pages dynamiques WebDev


Page dynamique

Partie 1 : Internet : Concepts de base

Lors de l'affichage d'une page dynamique WebDev, les oprations suivantes sont effectues :
1. Demande d'affichage de la page.
2. Lancement du moteur WebDev. Le moteur sera prsent sur le serveur jusqu' la fin de
l'application.
3. Cration du contexte de l'application. Ce contexte sera prsent sur le serveur jusqu' la
fin de l'application.
4. Le moteur WebDev excute le code serveur et construit la page HTML ( partir des donnes de la base de donnes par exemple).
5. Lorsque le moteur a fini de construire la page HTML, le serveur transmet le rsultat au
client (le navigateur).

Poste de linternaute

Demande
daffichage de
MaPage1.htm

Demande
daffichage de
MaPage2.htm

Affichage de
MaPage1.htm

Affichage de
MaPage2.htm

Poste Serveur
Arrt du moteur
WebDev et fermeture du contexte (fin
dapplication, ...)

Lancement du
moteur WebDev

Cration du fichier
MaPage2.htm

Cration du
contexte
Cration du fichier
MaPage1.htm

Contexte

Dessin.book Page 19 Vendredi, 22. fvrier 2008 5:53 17

19

Pages AWP
Une page AWP est un fichier binaire contenant le code HTML de la page, et le code serveur
(saisi sous l'diteur de code par le dveloppeur). Ce fichier doit avoir l'extension ".awp"
pour pouvoir tre interprt par le serveur.
Ainsi, lorsqu'un navigateur (le client) dsire accder une page dynamique AWP ralise
avec WebDev :
1. Le serveur reconnat qu'il s'agit d'un fichier AWP.
2. Le serveur appelle le moteur WebDev pour lire le fichier AWP.
3. Le moteur WebDev excute le code serveur et construit la page HTML ( partir des donnes de la base de donnes par exemple).
4. Lorsque le moteur a fini de construire la page HTML, le moteur se ferme.
5. Le serveur transmet le rsultat (la page HTML) au client (le navigateur).

Demande
daffichage de
MaPage1.AWP

Demande
daffichage de
MaPage2.AWP

Affichage de
MaPage1.htm

Affichage de
MaPage2.htm

Poste Serveur

Lancement du
moteur WebDev
Cration du fichier
MaPage1.htm
Arrt du moteur
WebDev

Lancement du
moteur WebDev
Cration du fichier
MaPage2.htm
Arrt du moteur
WebDev

Remarque : il est possible dutiliser un contexte avec les pages AWP en dfinissant les variables persistantes grce la fonction DclareContexteAWP.

Partie 1 : Internet : Concepts de base

Poste de linternaute

Dessin.book Page 20 Vendredi, 22. fvrier 2008 5:53 17

20

AJAX
La technologie AJAX est disponible nativement dans WebDev.
Que signifie AJAX et quel est son intrt ?
AJAX (pour Asynchronous Javascript and XML) permet de rafrachir uniquement les donnes modifies dans une page HTML sans rafficher la totalit de la page. Par exemple,
si certains lments prsents dans une page affiche (le contenu du panier, les caractristiques d'un produit, une liste de villes, une carte gographique, ) doivent tre modifis, seuls ces lments seront rafrachis. Le serveur n'aura pas envoyer la page entire
sur le poste de l'internaute.

Partie 1 : Internet : Concepts de base

Cette technologie a de multiples avantages :


- le serveur est moins sollicit. Il peut alors supporter un plus grand nombre de connexions simultanes.
- les informations qui circulent sont de taille rduite.
- la dure de transmission est plus courte.
- l'affichage pour l'internaute est immdiat et sans effet visuel.
AJAX peut tre utilis deux niveaux diffrents dans un site WebDev :
- AJAX automatique et immdiat : un simple clic suffit pour accder aux avantages AJAX.
Le code reste le mme.
- AJAX programm : utilisation des fonctions de gestion AJAX pour les traitements complexes.
Remarque : Seuls les navigateurs rcents supportent la technologie AJAX (Internet Explorer 5.5 et suprieur, FireFox 1.0 et suprieur, Netscape 7 et suprieur, Opera 8 et suprieur, Safari 1.2 et suprieur, ). La fonction AJAXDisponible permet de savoir si le
navigateur en cours supporte la technologie AJAX. Si un traitement utilisant la technologie
AJAX est excut sur un navigateur ne supportant pas cette technologie, le traitement
s'excute "comme si" il nutilisait pas la technologie AJAX (rafrachissement de la page entire par exemple).

Dessin.book Page 21 Vendredi, 22. fvrier 2008 5:53 17

21

AJAX automatique et immdiat


Le schma suivant prsente lutilisation automatique et immdiate de AJAX dans un site
WebDev :

Navigateur

Serveur Web

Envoi
de la requte
Action
Envoi des
lments modifis
uniquement

Excution
de la requte

Par exemple, une page d'un site permet de connatre diffrentes caractristiques d'un
pays (capitale, devise, drapeau, situation, ). En fonction du pays slectionn par l'internaute, les informations correspondantes sont affiches.
Action de l'internaute. Dans notre exemple, slection du pays dans la combo
"Slectionner le pays souhait".
Envoi de la requte au serveur.
Excution de la requte : recherche des caractristiques du pays slectionn.
Envoi du rsultat de la requte :
- sans AJAX : toute la page est envoye.
- avec AJAX : seules les caractristiques du pays sont envoyes.
Affichage des caractristiques du pays :
- sans AJAX : toute la page est raffiche.
- avec AJAX : seuls les champs contenant les caractristiques du pays sont
rafrachis.

Partie 1 : Internet : Concepts de base

Mise jour
automatique
des lments
modifis

Dessin.book Page 22 Vendredi, 22. fvrier 2008 5:53 17

22

AJAX programm
Le schma suivant prsente l'utilisation de "AJAX programm" dans un site WebDev :

Navigateur

Serveur Web
Demande
dexcution de la
procdure

Action
Mise jour
automatique
des lments
modifis

Excution
de la procdure
serveur
Envoi du
rsultat uniquement

Partie 1 : Internet : Concepts de base

Analyse du rsultat

Gnration
du rsultat :
Document XML,
chane de
caractres

Excution d'un traitement navigateur (fonction AJAXExcute ou AJAXExcuteAsynchrone).


Demande d'excution d'une procdure serveur.
Excution de la procdure serveur.
Gnration du rsultat. Le rsultat de la procdure sera exprim sous forme
d'une chane de caractres ou d'un document XML.
Envoi du rsultat de la procdure (Mot-cl RENVOYER).
Analyse du rsultat de la procdure.
Affichage des informations modifies. Seuls les champs ncessaires sont rafrachis.

Dessin.book Page 23 Vendredi, 22. fvrier 2008 5:53 17

PARTIE 2

Dveloppement dun site

Dessin.book Page 24 Vendredi, 22. fvrier 2008 5:53 17

Dessin.book Page 25 Vendredi, 22. fvrier 2008 5:53 17

25

Dvelopper un site avec WebDev

Cration du Projet

Cahier des charges

Importation de fichiers existants

Cration de l'analyse

Dveloppement

- RAD projet
- RAD page
- Requtes
- Etats
- Conception et saisie du
code source

GO

Installation du site
sur un poste de test

WDAdmin
Test du site depuis
l'administrateur

Installation relle
du site sur le serveur

WDTEST
SITE
Tests rels du site
Tests de monte
en charge

Ouverture du site

Partie 2 : Dveloppement dun site

Tests Finals

Test du site

Dessin.book Page 26 Vendredi, 22. fvrier 2008 5:53 17

26

Terminologie : Site et projet


Un projet WebDev est un ensemble de pages, champs, classes, composants, ... dont le
but est de raliser un site Internet / Intranet.
Une analyse WebDev regroupe la description des fichiers de donnes.
Un projet est gnralement associ une analyse.
Une analyse peut tre associe un ou plusieurs projets.

Projet 2

Classes

Pages et
champs
Feuille de
styles

Analyse

Projet 1

Partie 2 : Dveloppement dun site

Projet N
Pages et
champs
Classes

Feuille de
styles

Pages et
champs
Classes

Feuille de
styles

Pour crer le site "jaidebeauxyeux.com", crez le projet "jaidebeauxyeux".

Dessin.book Page 27 Vendredi, 22. fvrier 2008 5:53 17

27

Machines et logiciels ncessaires


L'internaute
une machine : PC, Mac, Unix, WebTV, console,
un navigateur : Internet Explorer, FireFox, Netscape, ...
un accs Internet (ou Intranet)
Aucun module ne sera tlcharger. Le fonctionnement est immdiat et rapide.

Le serveur

La machine de dveloppement

1 machine serveur : PC

1 machine : PC

1 systme d'exploitation
serveur (Windows ou Linux) :

1 systme d'exploitation :
NT, Windows 2000 ou suprieur.

Windows 2000 ou suprieur.

IIS, Apache,

1 logiciel serveur Web :


IIS, Apache,

1 serveur dapplication
WebDev
(site dynamique WebDev uniquement)

1 logiciel WebDev

"Dveloppement"
le site lui mme

le site en cours de

dveloppement
les donnes *

les donnes (optionnel) *

(site dynamique uniquement)

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

Les donnes peuvent se trouver sur une autre machine relie en rseau.

Une machine UNIX ou Linux peut tre utilise en frontal du serveur.

Partie 2 : Dveloppement dun site

1 logiciel serveur Web :

Dessin.book Page 28 Vendredi, 22. fvrier 2008 5:53 17

28

Configuration du serveur
Pour un site dynamique WebDev :

Poste Serveur
Poste de
linternaute
Connexion
au site WebDev
Seul un navigateur
est ncessaire.

Serveur Web
(IIS, Apache, ...)

Moteur
WebDev

Site WebDev

Partie 2 : Dveloppement dun site

Base de
donnes

Pour un site statique ou semi-dynamique :

Poste de
linternaute

Poste Serveur
Connexion
au site WebDev

Seul un navigateur
est ncessaire.

Serveur Web
(IIS, Apache, ...)

Site WebDev

Dessin.book Page 29 Vendredi, 22. fvrier 2008 5:53 17

29

Tableau de bord du projet

Partie 2 : Dveloppement dun site

Le tableau de bord du projet est un lment indispensable la gestion de projets WinDev.


Le tableau de bord permet davoir une vision globale et synthtique de ltat davancement dun projet.
Le tableau de bord du projet est compos :
- de voyants : Si les voyants sont verts, tout va bien. Les voyants rouges signalent un problme potentiel.
- de listes dlments, permettant un accs rapide aux principales options du projet.
- de compteurs, permettant de grer les nouveauts, les demandes, ...

Dessin.book Page 30 Vendredi, 22. fvrier 2008 5:53 17

30

Perso-dossiers : Organisez votre projet


Lditeur de projets de WebDev permet de reprsenter la cartographie complte du projet.
Sur des projets de taille importante, la navigation dans cette reprsentation peut tre dlicate. La notion de "perso-dossiers" permet damliorer cette navigation.
Un "perso-dossier" contient les lments que vous y rangez, par exemple une partie du
site : la gestion des clients, la gestion des fournisseurs, ...
Des lments peuvent tre communs plusieurs "perso-dossiers". Il est ainsi plus simple
de travailler sur une partie du site.

Partie 2 : Dveloppement dun site

Affichage des perso-dossiers

Dtail dun perso-dossier

Dessin.book Page 31 Vendredi, 22. fvrier 2008 5:53 17

31

Gestionnaire de sources (GDS)


Prsentation
Pour simplifier vos dveloppements en quipe, WebDev propose dsormais un gestionnaire de sources. Ce gestionnaire de sources permet plusieurs dveloppeurs de travailler simultanment sur le mme projet.

Rseau
(intranet)

ADSL
(internet)
Dconnect

Il est possible de partager les lments prsents dans le GDS :


- via un rseau.
- via Internet.
- en mode dconnect. Dans ce cas, les lments sur lesquels un travail spcifique devra tre effectu seront extraits du GDS par exemple lors de la connexion du portable
au systme gnral.

Partie 2 : Dveloppement dun site

GDS

Dessin.book Page 32 Vendredi, 22. fvrier 2008 5:53 17

32

Fonctionnement du Gestionnaire de Sources


Voici un exemple dutilisation du Gestionnaire de Sources :

Poste Local 1

2
Projet A
Version 1

Extraction 9h57

Projet A
Version 1

Modification

Rintgration 10h41

Projet A
Version 2

Projet A
Version 2

Projet A
Version 3
Poste Local 2

Extraction 14h28

Partie 2 : Dveloppement dun site

Projet A
Version 2

Base de Sources
Poste Nomade
Extraction de la Fentre Beta du
Projet A Version 1 9h13

Poste Nomade

1
Projet A
Version 1

Modification en clientle

7
Projet A
Version 3

Extraction 9h13

Rintgration 18h32

Poste Local 1
Extraction de la fentre Alpha du
Projet A Version 1 9h57
Rintgration de la fentre Alpha modifie
dans le Projet A Version 2 10h41
Poste Local 2
Extraction de la fentre Alpha du
Projet A Version 2 14h28
Poste Nomade
Rintgration de la fentre Beta modifie
dans le Projet A Version 3 18h32

Si un lment (page, tat, ...) du projet est extrait, ce mme lment ne pourra pas tre
extrait une seconde fois.
Aprs modification des lments extraits, il est ncessaire de rintgrer ces lments
pour que le projet de base prenne en compte ces modifications. En effet, la base de sources conserve un historique de tous les lments du projet depuis leur cration.
A chaque rintgration dun lment, le numro de version du projet de base est incrment de 1.

Dessin.book Page 33 Vendredi, 22. fvrier 2008 5:53 17

33

Centre de Suivi de Projets

Fonctionnement du Centre de Suivi de projets


Aprs avoir list lensemble des tches dun projet, le Centre de suivi de projet soccupe
de tout. La saisie du temps pass est quasi automatique, ne demande aucune action spcifique et ne gnre aucune contrainte particulire.
Lors de louverture du projet concern, le Centre de suivi de projet demande ou indique la
tche en cours. Ds quune tche est ralise, il suffit dindiquer que cette tche est termine et de spcifier la nouvelle tche.
Une tche peut tre relie un lment du projet (page, tat, ...). Chaque fois que llment concern est ouvert, le temps pass sur cet lment est dcompt et mmoris
dans le Centre de suivi. Inversement, depuis la liste des tches, il est possible douvrir
automatiquement llment correspondant la tche que vous voulez raliser.
Chaque dveloppeur peut galement visualiser directement sa liste de tches dans le volet "Centre de suivi".

Partie 2 : Dveloppement dun site

Le Centre de Suivi de Projets permet de grer le planning de ralisation dun projet, de sa


cration sa livraison finale. Il est ainsi possible de connatre lensemble des tches raliser sur un projet, les dveloppeurs concerns, les dures ncessaires, ltat davancement du projet, ...

Dessin.book Page 34 Vendredi, 22. fvrier 2008 5:53 17

34

WinDev, WebDev, WinDev Mobile : Projet


unique
Les projets crs actuellement sont souvent multi-cibles.
Par exemple, pour un ERP destin fonctionner sous Windows, il est fort probable qu'en
plus de l'application qui sera le socle de la solution applicative, des commerciaux seront
quips de PDA ou de Smartphones, les magasiniers utiliseront des terminaux mobiles
pour la gestion des stocks et qu'un site Intranet et un site Internet seront mis en place.
Dsormais, toutes ces informations sont regroupes dans un projet global.

Partie 2 : Dveloppement dun site

Quelque soit le produit avec lequel un projet a t cr, il est possible de l'ouvrir avec les
autres produits.
Lorsque vous ouvrez un projet dans un produit diffrent de celui qui a permis de le crer, un assistant
saffiche, permettant de crer un configuration de
projet spcifique au produit utilis.
Par exemple, si un projet WinDev est ouvert avec
WebDev, vous pouvez crer une configuration de
projet nomme "SiteWEB", permettant de regrouper
tous les lments ncessaires au site WebDev.
Dans les phases d'utilisation de l'environnement, il
est possible de visualiser depuis chaque environnement les lments de chaque cible. Un projet sous
WinDev affiche les vignettes des pages WebDev et
les fentres WinDev Mobile par exemple. Cliquer sur
une page WebDev depuis l'diteur de projet WinDev
ouvre la page WebDev (WebDev doit tre install sur
le poste).
Sont galement partags : les documents, les descriptions de modlisations, les composants, les classes, ...

Dessin.book Page 35 Vendredi, 22. fvrier 2008 5:53 17

35

Configuration de projet
Les configurations de projet permettent de crer partir d'un mme projet plusieurs "cibles" diffrentes.
Vous pouvez ainsi crer partir d'un mme projet par exemple :
- 2 ou 3 sites qui ne contiennent pas les mmes lments, qui ont des noms
diffrents,
- 3 ou 4 composants
- 2 bibliothques
A tout moment, vous pouvez travailler sur une configuration spcifique : les lments n'appartenant pas cette configuration apparaissent griss sous l'diteur de projet.

Configurations de projet
Configuration 1
Site

Configuration 2
Bibliothque

Configuration 3
Composant

...
Il est possible de gnrer en une seule opration toutes les configurations dun projet (ou
uniquement certaines) grce la gnration multiple.

Partie 2 : Dveloppement dun site

Projet WebDev

Dessin.book Page 36 Vendredi, 22. fvrier 2008 5:53 17

36

Gnration multiple
Les configurations de projets permettent de dfinir simplement les diffrentes "Cibles" de
votre projet. Vous pouvez ainsi dfinir pour un mme projet plusieurs sites, plusieurs bibliothques ou plusieurs composants.
Pour gnrer le rsultat de chaque configuration, vous pouvez bien entendu slectionner
une une chaque configuration, et gnrer le programme correspondant.

Partie 2 : Dveloppement dun site

Un autre moyen plus rapide existe : la gnration multiple. Vous slectionnez en une seule opration les configurations gnrer, et le rsultat est immdiat.

Pour lancer une gnration multiple, utilisez loption "Atelier .. Gnration multiple".

Dessin.book Page 37 Vendredi, 22. fvrier 2008 5:53 17

37

RAD
Le RAD (Rapid Application Development) permet de crer des pages partir :
- de lanalyse lie au projet,
- des modles RAD standard,
- des modles RAD personnaliss,
- des gabarits WebDev.
Les pages gnres contiennent tout le code ncessaire leur fonctionnement. Ces pages peuvent tre testes immdiatement, avec les donnes prsentes sur le poste de dveloppement

Modle RAD
Pattern RAD

Gabarit

RAD
RAD Application complte
RAD Page

Exemple de page gnre par le RAD

Exemple de code gnr


par le RAD

Partie 2 : Dveloppement dun site

Analyse

Dessin.book Page 38 Vendredi, 22. fvrier 2008 5:53 17

38

RID
Le RID (Rapid graphical Interface Design) permet de crer des pages partir :
- de lanalyse lie au projet,
- des modles RAD standard,
- des modles RAD personnaliss,
- des gabarits.
Les pages gnres contiennent uniquement les champs lis aux rubriques de lanalyse.
Tout le code ncessaire au fonctionnement de ces pages reste la charge du dveloppeur. Vous pouvez directement saisir votre code personnalis.

Partie 2 : Dveloppement dun site

Analyse

Modle RAD
Pattern RAD

RID
RID Page

Exemple de page gnre par le RID


Cette page ne contient aucun code.

Gabarit

Dessin.book Page 39 Vendredi, 22. fvrier 2008 5:53 17

39

Les deux types de code


Code serveur ou code navigateur ?
Deux sortes dactions peuvent tre programmes dans un site WebDev :

1. Actions
pouvant tre
effectues en
local (sur le poste de
linternaute) : vrification simple dune saisie, ...

Poste serveur

2. Actions ncessitant
un retour au poste serveur
(pages dynamiques
uniquement) :
lecture dinformations
dans la base de donnes,
calculs / traitements par
programmation, ...

Pour grer ces deux sortes dactions, lditeur de code de WebDev diffrencie deux types
de code :
-

Code Serveur (code Jaune ou Rose sous lditeur de code) : Ce code est crit en WLangage (code jaune) ou en PHP (code rose, disponible uniquement dans les pages PHP).
Ce code est excut 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 lenregistrement de la page, ce code est automatiquement traduit en Javascript, et
intgr aux pages HTML WebDev. Ce code est excut en local (sur le poste de linternaute), et ne ncessite pas daction du serveur.

Partie 2 : Dveloppement dun site

Poste de
linternaute

Dessin.book Page 40 Vendredi, 22. fvrier 2008 5:53 17

40

Code serveur dans une page PHP : code WLangage ou code PHP ?
Les codes excuts sur le poste serveur sont reprsents sous lditeur de code par un
bandeau Jaune ou Rose.

- bandeau Jaune = WLangage : le sigle WL prcde lintitul du code.


- bandeau Rose = PHP : le sigle PHP prcde lintitul du code.

Partie 2 : Dveloppement dun site

Pour passer dun code jaune (WLangage) un code rose (PHP), il suffit de cliquer sur le
sigle WL prcdant lintitul du code (ou inversement en cliquant sur PHP). Lors de lenregistrement de la page PHP, le code WLangage est automatiquement converti en code
PHP.
Nous vous conseillons de dvelopper en WLangage.

Dessin.book Page 41 Vendredi, 22. fvrier 2008 5:53 17

41

Code navigateur : code WLangage ou code Javascript ?


Les codes excuts sur le poste de linternaute (sur le navigateur) sont reprsents sous
lditeur de code par un bandeau bleu ou vert.

- bandeau vert = WLangage : le sigle WL prcde lintitul du code.


- bandeau bleu = Javascript : le sigle JS prcde lintitul du code.
Pour passer dun code vert (WLangage) un code bleu (Javascript), il suffit de cliquer sur
le sigle WL prcdant lintitul du code (ou inversement en cliquant sur JS). A lenregistrement de la page, le code WLangage est automatiquement converti en Javascript.

La barre dicones situe au bas de la fentre de code permet de grer des vnements
supplmentaires ceux proposs par dfaut :

Ces vnements sont ajouts aux codes affichs par lditeur de code par simple clic sur
licone du code correspondant. Exemples dvnements supplmentaires : double-clic,
touche enfonce, touche presse, touche relche, bouton enfonc, souris dplace, ...
Rappel : Le code navigateur est disponible dans les pages dynamiques, semi-dynamiques, ou statiques.

Partie 2 : Dveloppement dun site

Nous vous conseillons de dvelopper en WLangage.

Dessin.book Page 42 Vendredi, 22. fvrier 2008 5:53 17

42

Le WLangage : un langage simple et trs


puissant
Le langage intgr de WebDev est le WLangage. Ce langage permet de programmer simplement tous les traitements Internet voulus sans avoir connatre le HTML, le Javascript
ou le PHP.
Disponible en franais et en anglais, le WLangage est compos dordres simples, proches
du langage courant. Le franais permet une programmation intuitive (le WLangage est
compatible avec WinDev, AGL n1 en France).
Voici un tout petit exemple illustrant la puissance du WLangage : la vrification de la saisie
dune adresse :
En WLangage, quelques lignes suffisent ...
SI SansEspace(ADRESSE) = "" ALORS
Erreur("Veuillez indiquer votre adresse")
RepriseSaisie(ADRESSE)
FIN

Partie 2 : Dveloppement dun site

En Javascript, voici le traitement quivalent :


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

Le code WLangage est plus facile crire, comprendre, maintenir. La fiabilit est amliore. Les volutions sont plus simples.

Dans tous vos traitements, utilisez le WLangage.

Dessin.book Page 43 Vendredi, 22. fvrier 2008 5:53 17

43

Composant
Un composant est un ensemble d'lments WebDev : pages, tats, analyse, ... Cet ensemble d'lments effectue une fonctionnalit prcise. Par exemple, un composant peut correspondre une des fonctionnalits suivantes :
- Envoi de Fax,
- Envoi d'e-mails,
- ...
Un composant WebDev peut tre redistribu d'autres dveloppeurs WebDev (gratuitement ou non). Ces dveloppeurs pourront ainsi intgrer simplement la fonctionnalit propose par le composant dans leur site. Le composant sera donc intgr au site, et
distribu avec le site.
Projet
WebDev

Gnration du composant

Fichier .WDK

Importation du composant dans


diffrents projets WebDev

Projet
WebDev

Projet
WebDev

Projet
WebDev

Utilisation du
composant

Utilisation du
composant

Utilisation du
composant

Partie 2 : Dveloppement dun site

Dveloppement du
composant

Dessin.book Page 44 Vendredi, 22. fvrier 2008 5:53 17

44

Composants multi-produits
WinDev, WebDev et WinDev Mobile offrent la possibilit de crer des composants multiproduits. Ces composants peuvent contenir des fentres, des pages, ... et tre utiliss
aussi bien dans un projet WinDev, WebDev ou WinDev Mobile.
Le principe est le suivant :

Projet unique
Projet commun WinDev, WebDev et WinDev Mobile
Pages HTML intgrer dans le composant

Partie 2 : Dveloppement dun site

Fentres intgrer dans le composant

Cration du composant
- Slection des lments
- Choix des produits cibles (WinDev, WebDev, ...)

Fichiers WDK et WDI


Utilisables dans les projets des
produits cibles choisis

Dessin.book Page 45 Vendredi, 22. fvrier 2008 5:53 17

PARTIE 3

Afficher des informations


dans une page

Dessin.book Page 46 Vendredi, 22. fvrier 2008 5:53 17

Dessin.book Page 47 Vendredi, 22. fvrier 2008 5:53 17

47

2 looks de site : modles ou framesets

site bas sur des "modles de pages" : les pages utilisent le mme modle. Les pages
senchanent et saffichent entirement dans le navigateur. Le principe de dveloppement du site est simple : il suffit de crer le modle de pages et dutiliser ce modle
dans les diffrentes pages.

site bas sur des "framesets" : un frameset permet de figer une partie du site (le menu
par exemple). Les pages senchanent dans une frame du frameset.

Ces deux looks de site sont prsents dans les pages suivantes.

Avantages des modles de pages


Lutilisation de modles de pages dans vos sites permet de :
-

optimiser la vitesse daffichage des pages du site.

limiter le nombre de fichiers HTML gnrs (et donc le nombre de fichiers HTML charger sur le poste de linternaute).

simplifier la cration 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.

...

Partie 3 : Afficher des informations dans une page

Lors de la conception dun site, il est possible de choisir un des deux modes de prsentation suivants :

Dessin.book Page 48 Vendredi, 22. fvrier 2008 5:53 17

48

Modle de pages (template)

Partie 3 : Afficher des informations dans une page

WebDev permet de crer des modles de pages. Ces modles contiennent tous les lments graphiques communs lensemble des pages de votre site.
Les modifications effectues dans un modle de pages sont automatiquement reportes
sur toutes les pages utilisant ce modle.
Un modle de pages permet de respecter la charte graphique dfinie pour un site.

Dfinition dun modle de pages.


Le modle est encadr dun
trait jaune sous lditeur.

Utilisation du modle dans plusieurs pages.


Les lments appartenant au modle sont identifis par un carr jaune.

Pour crer un modle de pages partir de la page en cours, slectionnez loption


"Fichier .. Enregistrer comme un modle".
Pour crer une page utilisant un modle, slectionnez le modle utiliser lors de la cration de la page.
Remarque : La programmation associe aux lments du modle peut tre directement
ralise dans le modle.

Dessin.book Page 49 Vendredi, 22. fvrier 2008 5:53 17

49

Frameset : une page HTML divise


Un frameset est un type de page spcifique : cette page est divise en plusieurs zones.
Chaque zone est appele "Frame". Dans chaque frame, une page HTML est affiche.
Un frameset permet de regrouper plusieurs pages dans une seule fentre du navigateur.
Un exemple trs courant est lutilisation dune frame pour le menu du site, la seconde frame permettant dafficher les pages du site.

Un frameset affich sous le navigateur

Page du site
elle-mme

Page affiche
dans une
frame

Frame : cadre
o une page
est affiche

Dcomposition schmatique du frameset en 4 frames

Partie 3 : Afficher des informations dans une page

Les framesets permettent de changer facilement une partie des informations affiches.
Une mme frame peut accueillir diffrentes pages selon les actions effectues par linternaute.

Dessin.book Page 50 Vendredi, 22. fvrier 2008 5:53 17

50

Je cre une page sous lditeur ...


Pour crer une page avec WebDev, les tapes sont les suivantes :

Partie 3 : Afficher des informations dans une page

Cration de la page sous lditeur de pages de WebDev.

Saisie du code (tape optionnelle).

Code navigateur

Code serveur

Enregistrement de la page.

Dessin.book Page 51 Vendredi, 22. fvrier 2008 5:53 17

51

Les fichiers suivants sont automatiquement crs :


Types de page disponibles

Page semidynamique
WebDev

Page statique
WebDev

Page AWP

PHP
Page PHP

Fichier source des pages au format WebDev (.WWH)

.HTM
gnrique
WDL

.HTM

.HTM

.AWP

.PHP

Fichiers gnrs
Lgende :
.WWH : Format source des pages
Ce fichier contient la description complte de la page
(champ, code navigateur, code serveur). Ce fichier est
utilis par lditeur et reste sur la machine du dveloppeur.

.WDL : Bibliothque du projet


Gnre lors du dploiement du site dynamique,
la bibliothque contient le code serveur des pages du projet. Ce fichier sera prsent sur le serveur.

.HTM gnrique
Ce fichier contient la description complte de la page
(champ, code navigateur, code serveur). Certains paramtres de cette page sont gnriques et seront remplis
dynamiquement lors de laffichage de la page.

.AWP : Page AWP


Gnr partir du fichier WWH, ce fichier contient
la description des champs, le code serveur, le
code navigateur. Ce fichier sera prsent sur le
serveur.

.HTM : Page HTML du site


Gnr partir du fichier WWH, ce fichier contient la
description des champs en HTML et le code navigateur
(si le code a t saisi en WLangage, il est automatiquement traduit en Javascript). Ce fichier sera prsent sur
le serveur.

.PHP : Page PHP


Gnr partir du fichier WWH, ce fichier contient
la description des champs, le code serveur, le
code navigateur au format PHP. Ce fichier sera
prsent sur le serveur.

Partie 3 : Afficher des informations dans une page

AWP
Page dynamique
WebDev

Dessin.book Page 52 Vendredi, 22. fvrier 2008 5:53 17

52

Choisir un type de champ selon linformation afficher

Partie 3 : Afficher des informations dans une page

WebDev met votre disposition de nombreux champs :

Vous voulez ...

Utilisez un champ de
type :

Afficher du texte, un titre, ...

Libell HTML, Libell

Dfinir une zone de couleur

Cellule, Tableau HTML

Afficher un prix, une quantit, une adresse, une date, une


heure, ...

Champ daffichage format

Slectionner une valeur parmi une liste (Pays, Ville, )

Slecteur, Combo, Liste

Slectionner plusieurs valeurs parmi une liste (les destinataires dun message, des fichiers tlcharger, )

Interrupteur, Liste

Afficher une image graphique (Photo, )

Image, Image clicable

Afficher une animation (Gif anim)

Image

Afficher une page selon la zone clique sur une image

Image clicable

Afficher le contenu dun fichier en table (Liste des clients,


dtail dune commande, )

Table fichier ou mmoire, Zone rpte fichier ou mmoire

Afficher une image rafrachie rgulirement

Champ Web Camra

Rpter des champs dans une page (Catalogue Produits


avec la photo, ...)

Zone rpte

Utiliser un code HTML existant

Champ HTML

Utiliser un applet Java (calendrier, horloge, ...)

Champ Java

Saisir des informations

Champ de saisie

Afficher des informations hirarchises (contenu dun rpertoire, ...)

Champ Arbre

Afficher une animation Flash

Champ Flash

Aligner des champs (tableau HTML)

Cellule, Tableau HTML

Programmer une action dans une page (afficher une page,


valider une saisie, )

Bouton, Champ Lien

Dessin.book Page 53 Vendredi, 22. fvrier 2008 5:53 17

Vous voulez ...

Utilisez un champ de
type :

Afficher une page dun autre site dans une de vos pages

IFrame

Afficher un histogramme, une courbe, un graphe de type


camembert

Champ Graphe

Afficher une page de votre site lintrieur dune de vos pages

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 dimages

Champ Vignette

Partie 3 : Afficher des informations dans une page

53

Dessin.book Page 54 Vendredi, 22. fvrier 2008 5:53 17

54

Quel type dimage choisir : dynamique,


statique, gnre, ... ?
Les images sont souvent utilises pour illustrer les pages des sites.

Partie 3 : Afficher des informations dans une page

Diffrents types dimages peuvent tre utiliss avec WebDev. Chaque type correspond
une utilisation spcifique de limage.

Voici un rcapitulatif des caractristiques de ces images, et comment les utiliser.


Conseil : utilisez toujours des images homothtiques pour les images provenant dune
base de donnes.

Dessin.book Page 55 Vendredi, 22. fvrier 2008 5:53 17

55

Statique

Image non modifie pendant lutilisation du site (logo de la


socit, ...)
Image modifie uniquement dans
un code navigateur (image slectionne par un champ Upload).

Dynamique

Image modifie pendant lutilisation du site (image du produit


dans une fiche, photo dans un annuaire, ...)
Cest le type dimage le plus souvent utilis.

Gnre

Image dessine pendant lutilisation du site :


- graphes (fonctions grXXX)
- dessins (fonctions dXXX)
Il est possible dutiliser une image
de fond.

Depuis une base de


donnes
Images de produits affiches
dans une zone rpte

Caractristiques
Limage associe une image statique doit tre slectionne
sous lditeur WebDev.
Cette image pourra tre change en programmation uniquement dans un code navigateur.
Les formats dimage reconnus par WebDev sont autoriss.
Lors de lenregistrement de la page, limage est automatiquement convertie au format GIF ou JPEG, et enregistre dans le
rpertoire <NomProjet>_WEB (sauf si limage est dj au format GIF ou JPEG).
Lors du dploiement du site WebDev :
- le fichier associ limage doit tre prsent sur le serveur.
- si limage est change dans un code navigateur, la nouvelle image doit tre accessible et dans un format reconnu
par le navigateur.
Une image dynamique peut tre change par programmation
dans un code serveur ou dans un code navigateur.
Limage associe au champ par programmation doit tre :
- prsente dans le rpertoire <NomProjet>_WEB.
- dans un format reconnu par le navigateur (GIF, JPEG ou
autre)
Attention : lutilisation de mmos binaires nest pas possible.

Une image gnre est construite au cours de lutilisation du


site dynamique WebDev.
Il est dconseill dutiliser ce type dimage pour afficher des fichiers de type "image" existants : les performances de votre
site risquent dtre rduites.
Quand le navigateur demande laffichage de limage (lors de
laffichage ou de la ractualisation de la page par exemple),
une image temporaire du dessin en cours est ralise sur le
serveur et enregistre au format JPG. Cette image est affiche
sur le navigateur.

Ces images sont enregistres dans des mmos binaires (mmo) ou dans des champs texte (chemin).
Il est conseill dutiliser une image Homothtique centre :
toutes les images affiches seront redimensionnes proportionnellement afin dtre affiches dans le champ image.

Partie 3 : Afficher des informations dans une page

Type de limage

Dessin.book Page 56 Vendredi, 22. fvrier 2008 5:53 17

56

Crer des effets sur les boutons : boutons


personnaliss
Quand on cre un bouton par dfaut, il est gris. Pour personnaliser ce look, il suffit dutiliser des images. Ces images permettent de dfinir la forme et la couleur du bouton (description du bouton, onglet "Dtail").

Partie 3 : Afficher des informations dans une page

Si une seule image est lie au bouton, cette image sera utilise quelle que soit laction
effectue par linternaute.
Pour crer des effets spcifiques, par exemple changer les couleurs lors du survol du bouton, il suffit dassocier plusieurs images au bouton.

Effet de survol
Pour crer uniquement un effet de survol, associez deux images au bouton : une image
correspondant ltat "normal" du bouton et une image correspondant ltat "survol".

Bouton normal

Bouton "Survol"

Ces images sont spcifies dans longlet "Dtail" de la fentre de description du bouton :

Remarques :
- Le bouton "Catalogue" permet de choisir directement les deux types d'images parmi
une bibliothque d'images livre avec WebDev.
- Loption "Image du cadre / fond avec 3 images" permet de grer simplement la largeur
de limage associe au bouton. Si cette option est slectionne, WebDev dcoupe
automatiquement limage du bouton en 3 images afin dtre la mme taille que le
bouton.

Dessin.book Page 57 Vendredi, 22. fvrier 2008 5:53 17

57

Effet denfoncement
Pour crer un effet denfoncement du bouton, associez une image spcifique au bouton :
cette image contient trois dessins. Chacun des dessins correspond un tat spcifique
du bouton : normal, enfonc, survol. Dans ce cas, la gestion de ltat du bouton est ralise par une applet Java spcifique livre avec WebDev (vous ne vous occupez de rien,
WebDev fait tout !).

Image contenant les diffrents tats du bouton : Normal, Enfonc et survol

Uniformisez le style de vos boutons


Pour uniformiser le style de vos boutons, dfinissez un style spcifique, et utilisez ce style
pour tous vos boutons.

Partie 3 : Afficher des informations dans une page

Dans ce cas, il suffit de spcifier le fichier image utiliser dans longlet "Dtail" de la fentre de description du bouton (option "Image").
Remarque : Le bouton "Catalogue" permet de choisir directement une image 3 tats parmi une bibliothque d'images livre avec WebDev

Dessin.book Page 58 Vendredi, 22. fvrier 2008 5:53 17

58

Les modles de champs

Partie 3 : Afficher des informations dans une page

WebDev permet de crer des modles de champs. Un modle de champs est un ensemble de champs, rutilisables dans plusieurs pages.
Les modifications effectues dans un modle de champs sont automatiquement reportes sur toutes les pages utilisant ce modle.
Un modle de champs permet de
- regrouper un ensemble de champs dans un but prcis.
- rendre les champs indpendants de la page les accueillant.

Dfinition dun modle de champs : le modle


est encadr dun trait jaune sous lditeur.

Utilisation du modle dans


une page.
Les lments appartenant
au modle sont entours
en bleu et identifis par un
carr jaune.
Un modle de champs peut tre cr :
- directement (option "Fichier .. Nouveau .. Modle de champs")
- partir de champs prsents dans la page (option "Champ .. Refactoring .. Crer un modle de champs avec la slection").
Pour crer une page utilisant un modle de champs, crez un champ de type "Modle de
champs".
Remarque : La programmation associe aux lments du modle peut tre directement
ralise dans le modle.
Les caractristiques des lments peuvent tre dsolidarises du modle. Par exemple,
dsolidariser la position dun champ du modle pour positionner le champ ailleurs tout en
conservant les autres volutions sur le champ (code, style, ...). On parle alors dhritage
de champ. Dans ce cas, les lments sont identifis par un carr bleu.

Dessin.book Page 59 Vendredi, 22. fvrier 2008 5:53 17

59

Rpter un groupe de champs

Cration de la zone rpte sous


lditeur de WebDev

Affichage de la zone rpte


sous le navigateur

Pour chaque champ de la zone rpte, plusieurs caractristiques peuvent tre modifies
lors de la rptition : libell, couleur du texte, ...
Les rptitions peuvent tre ralises :
- sur une colonne,
- sur plusieurs colonnes. Dans ce cas, on parle de "Zone rpte horizontale".
Lors de la cration dune zone rpte, il est possible de lier la zone rpte directement
un fichier de donnes ou une requte. Les attributs de la zone rpte sont automatiquement dfinis. Aucune programmation nest ncessaire.

Partie 3 : Afficher des informations dans une page

Les zones rptes permettent de rpter un ensemble de champs "n" fois. Lors de cette
rptition, les champs de la zone rpte peuvent afficher des informations diffrentes.
Il est ainsi possible dafficher chaque rptition des enregistrements dune base de donnes.

Dessin.book Page 60 Vendredi, 22. fvrier 2008 5:53 17

60

Afficher un fichier dans une Table


dans une Zone Rpte

ou

Partie 3 : Afficher des informations dans une page

Une table fichier ou une zone rpte fichier permet dafficher des donnes provenant
dun fichier de donnes. La structure du fichier a t dcrite sous lditeur danalyses, et
les donnes ont t saisies par exemple dans le site.

Un parcours du fichier permet dafficher les donnes dans la table ou dans la zone rpte. Pour chaque ligne affiche, le fichier est lu : lenregistrement lu est affich dans une
ligne de la table ou une rptition de la zone rpte.
Sous WebDev, une table fichier ou une zone rpte fichier est cre laide dun assistant. Vous choisissez les rubriques affiches, la cl de parcours du fichier, ... et le champ
est cr, avec tout le code ncessaire. Une rglette apparat automatiquement, et permet
dafficher les enregistrements suivants ou prcdents du fichier.
Il est possible de limiter les enregistrements affichs dans le champ en utilisant un filtre
(fonction HFiltre utilise dans le code dinitialisation du champ).
Plusieurs fonctions du WLangage permettent de manipuler :
- les tables fichier. Ces fonctions commencent toutes par "Table".
- les zones rptes fichier. Ces fonctions commencent toutes par "ZoneRpte".
Pour ajouter un enregistrement, ajoutez lenregistrement dans le fichier Hyper File correspondant (fonction HAjoute), puis r-affichez :
- la table avec la fonction TableAffiche.
- la zone rpte avec la fonction ZoneRpteAffiche.
Pour supprimer un enregistrement, supprimez lenregistrement dans le fichier Hyper File
correspondant (fonction HSupprime), puis r-affichez :
- la table avec la fonction TableAffiche.
- la zone rpte avec la fonction ZoneRpteAffiche.

Dessin.book Page 61 Vendredi, 22. fvrier 2008 5:53 17

61

Positionner les champs dans une page


WebDev offre plusieurs mthodes pour optimiser le positionnement des champs dans les
pages :
-

les tables de positionnement


les rgles et la grille

Les tables de positionnement

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

Les rgles et la grille


Les rgles dalignement comme la grille magntique permettent daligner simplement les
champs dune page.
Les rgles sont affichables grce loption "Affichage .. Rgles".
La grille est activable grce loption "Affichage .. Grille".

Partie 3 : Afficher des informations dans une page

Les tables de positionnement sont le moyen le plus courant pour aligner des champs dans
une page HTML. Elles permettent galement de crer des bas de page.

Dessin.book Page 62 Vendredi, 22. fvrier 2008 5:53 17

62

Superposer les champs


Pour obtenir des effets de transparence ou de profondeur, superposez vos champs.

Partie 3 : Afficher des informations dans une page

Chaque champ possde une option "Le champ peut tre superpos" (onglet "Dtail" de la
fentre de description du champ).
En cochant cette option, le champ nest plus li aux tables de positionnement de la page.
Vous pouvez dplacer et positionner un champ "au-dessus" de chacun des champs de votre page.
Attention : on dfinit le champ qui va se superposer, et non pas celui qui est recouvert et
accepte le recouvrement.
Par exemple, pour superposer un libell sur une image, il faut rendre le libell superposable et positionner le libell sur limage.

Sous lditeur

Sous le navigateur

Attention : Pour que la superposition soit ralise, linternaute doit possder un navigateur rcent (Internet Explorer version 4 ou suprieur, Netscape 4.7 ou suprieure).
Ce type de navigateur est aujourdhui trs rpandu.

Dessin.book Page 63 Vendredi, 22. fvrier 2008 5:53 17

63

Des feuilles de styles CSS : pour simplifier


la mise en page
Les feuilles de styles sont des modles qui permettent duniformiser la prsentation des
champs dans les pages.

Quand vous modifiez une caractristique du style, tous les champs associs ce style
sont mis jour. Il est ainsi possible de modifier la charte graphique dun site en effectuant uniquement quelques modifications dans les styles utiliss.
Un exemple dutilisation des feuilles de styles : augmenter la taille de 8 15 :

Attention : Pour utiliser les feuilles de styles (CSS), linternaute doit possder un navigateur supportant les feuilles de styles (Internet Explorer version 4 ou suprieur, Netscape
4.7 ou suprieure).
Ce type de navigateur est aujourdhui trs rpandu.
Remarque : Longlet "CSS personnalis" permet de saisir directement du code CSS. Ce
code sera ensuite ajout dans la feuille de styles CSS.

Partie 3 : Afficher des informations dans une page

Les feuilles de styles permettent de dfinir :


- la taille et la forme de vos textes, la police,
- lalignement de vos paragraphes, les retraits de paragraphe, ...
- le style de texte (gras ou italique), sa couleur, ...
Et bien plus encore.

Dessin.book Page 64 Vendredi, 22. fvrier 2008 5:53 17

64

Site centr ou adapt ?


La mise en page est un lment fondamental dans la ralisation dun site. Pour optimiser
cette mise en page, il est ncessaire de prendre en compte la rsolution de lcran de linternaute.
Par exemple, si votre site est cr pour la rsolution 1024 x 768 pixels, les internautes
utilisant une rsolution de 800 x 600 verront apparatre de nombreux ascenseurs.

Partie 3 : Afficher des informations dans une page

Dune manire gnrale, la date dimpression de ce manuel, il est conseill de dvelopper des sites optimiss pour une rsolution 800 x 600.
Deux types de mise en page dun site peuvent tre utiliss :
- site centr :
Les pages sont centres dans le navigateur. Si la rsolution de linternaute est suprieure la rsolution optimale du site, des marges blanches apparaissent de part et
dautre de la page.

Rsolution : 800 x 600

Rsolution : 1024 x 768 :


les marges apparaissent de chaque ct de la page

site adapt :
Les pages sont affiches normalement dans le navigateur. Si la rsolution de linternaute est suprieure la rsolution optimale du site, une marge blanche est ajoute
droite des pages.

Rsolution : 800 x 600

Rsolution : 1024 x 768 :


la page reste "colle" gauche

Remarque : Le type de mise en page (centr ou adapt) configur dans un modle de


page sera automatiquement utilis par les pages associes ce modle.

Dessin.book Page 65 Vendredi, 22. fvrier 2008 5:53 17

65

10 conseils dergonomie ...

Soignez lentre dans votre site.

Un site est lanc partir dune page daccueil. Cette page permet "dentrer" dans le site.
Soignez la prsentation de la page daccueil et simplifiez le lancement du site : le logo ou
le lien permettant de lancer le site doit tre visible et facilement identifiable.
Prsentez-vous.

Lorsque linternaute arrive sur un site, il doit facilement identifier la personne ou la socit
responsable du site par un choix de la page daccueil : il suffit dindiquer un nom, une
adresse postal et une adresse internet, ...

Dautres informations sont utiles :


- la date de ralisation du site ou de dernire mise jour,
- le thme du site, son contenu et sa finalit,
- ladministrateur physique de la socit, numro RCS de la socit, ...

Partie 3 : Afficher des informations dans une page

Dessin.book Page 66 Vendredi, 22. fvrier 2008 5:53 17

66

Vos pages sont trs longues ? Permettez linternaute de retourner directement


en haut de page.

Partie 3 : Afficher des informations dans une page

Lorsque vos pages sont trs longues (plus de 2 crans), utilisez des boutons ou des liens
pour retourner rapidement en haut de la page (et viter lutilisation de lascenseur).

Dbut de la page

Fin de la page avec un lien


permettant de revenir en haut de page

Harmonisez le style et lalignement de vos boutons.

Vrifiez que vos boutons utilisent tous le mme "look", et vrifiez lalignement de vos boutons.

Boutons non aligns,


utilisant diffrents styles

Boutons aligns
et harmoniss

Evitez les ascenseurs inutiles.

Pour viter laffichage dascenseurs inutiles dans les pages dun frameset, slectionnez
loption "Ascenseur automatique" dans la fentre de description de la page (onglet "Frame"). Cette option permet dafficher lascenseur uniquement sil est ncessaire.

Dessin.book Page 67 Vendredi, 22. fvrier 2008 5:53 17

67

Vous affichez des listes de plus de 20 lments ? Utilisez plusieurs pages pour lister les lments (champ rglette).

Utilisez des images 100% ou Homothtiques centres.

Pour conserver les proportions de vos images, il est conseill de choisir :


- soit des images 100% (pour les images statiques ou dynamiques ou si limage est
de taille identique celle du champ).
- soit des images homothtiques centres (pour les images gnres ou les images de
taille varie provenant dune base de donnes) : la taille de limage sadaptera homothtiquement la zone dfinie pour limage. Les proportions seront respectes.

Image 100 % si la
dimension du champ
correspond celle de
limage, sinon image
Homothtique

Image tire
(dconseill)

Slection du mode
daffichage sous lditeur
(description de limage,
onglet "Gnral")

Partie 3 : Afficher des informations dans une page

Dessin.book Page 68 Vendredi, 22. fvrier 2008 5:53 17

68

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

Partie 3 : Afficher des informations dans une page

Image sous lditeur

Image sous le navigateur.


Problme daffichage des
images

En cas de problme daffichage, vrifiez principalement que :


- limage existe,
- limage est enregistre dans un format reconnu par le navigateur (GIF ou JPG par
exemple),
- limage est prsente dans le sous-rpertoire du projet <NomProjet>_WEB.

Linternaute doit saisir une quantit ? Utilisez une combo pour simplifier la saisie
des quantits.

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


Indiquez toutes les informations sur le produit (nom, rfrence, prix, ...) chaque fois, y
compris le bouton ou le lien permettant de commander le produit.

Dessin.book Page 69 Vendredi, 22. fvrier 2008 5:53 17

69

Site multi-langue

Une page en franais ...

... la mme page en anglais

Pour crer un site multi-langue, il suffit de slectionner les diffrentes langues gres par
le projet (option "Projet .. Description du projet", onglet "Langues").
Vous pourrez ensuite configurer tous les lments du projet dans ces diffrentes langues.
Par exemple, WebDev vous permet de configurer :
- les diffrents lments (libell, titre de page, ...).
- les caractristiques daffichage (masque de saisie, ...).
- les fichiers image des lments (bouton, champ image, ...).
Tous les lments (pages, tats, images, ...) ncessaires sont regroups dans un seul rpertoire par langue.

Partie 3 : Afficher des informations dans une page

WebDev permet de crer trs rapidement des sites multi-langues partir dun mme projet.

Dessin.book Page 70 Vendredi, 22. fvrier 2008 5:53 17

Partie 3 : Afficher des informations dans une page

70

Dessin.book Page 71 Vendredi, 22. fvrier 2008 5:53 17

PARTIE 4

Actions possibles
dans une page

Dessin.book Page 72 Vendredi, 22. fvrier 2008 5:53 17

Dessin.book Page 73 Vendredi, 22. fvrier 2008 5:53 17

73

Afficher et enchaner les pages


Un site est un ensemble de pages. Ces pages sont relies entre elles grce aux boutons
(ou aux liens). Un clic sur un bouton entrane laffichage dune 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 ?

Slection de la destination sous lditeur de pages (cas le plus courant)


Dans un bouton, pour dfinir 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 destinations, slectionnez une
destination prdfinie ou
une frame (dans le cas dun frameset).

Remarque : Les destinations prdfinies sont prsentes dans les pages suivantes de ce
manuel.
Slection de la destination sous lditeur de code
Lorsque la destination dpend dun choix de linternaute, cette destination doit tre slectionne par programmation. Par exemple, si linternaute nindique pas son mot de passe,
une page derreur apparat dans un nouveau navigateur; sinon, la page suivante saffiche
dans le navigateur en cours.
La fonction WLangage ChangeDestination permet de modifier par programmation la destination dune action. Cette fonction doit tre utilise dans un code navigateur.

Partie 4 : Actions possibles dans une page

Laffichage dune page se fait dans une "destination" spcifique : page en cours, nouveau
navigateur, ...
La destination peut tre dfinie :
- soit sous lditeur de pages : aucune programmation nest ncessaire.
- soit sous lditeur de code, dans un traitement du bouton (ou du lien).

Dessin.book Page 74 Vendredi, 22. fvrier 2008 5:53 17

74

Choisir une destination


Lors du choix de la destination pour un bouton, un lien, une image clicable, une option de
menu, ... il est possible de choisir :
- une destination prdfinie : quatre destinations prdfinies sont proposes :
- Navigateur en cours (_top pour les habitus)
- Frame en cours (_self)
- Frame parent (_parent)
- Nouveau navigateur (_blank). Dans ce cas, vous pouvez choisir les caractristiques du nouveau navigateur (prsence de la barre de menu, de la barre de message, ...).
- une frame du frameset en cours.

Partie 4 : Actions possibles dans une page

Remarque : dans ce schma, la zone grise reprsente la zone dans laquelle la page est affiche lors du clic sur
le bouton.

Navigateur en cours (_top)

Clic sur
le bouton

Page initiale

Nouvelle page affiche dans


la totalit du navigateur

Frame en cours (_self)

Clic sur
le bouton

Page initiale

Nouvelle page affiche


dans la mme frame

Dessin.book Page 75 Vendredi, 22. fvrier 2008 5:53 17

75

Frame parent (_parent)

Clic sur
le bouton

Page initiale
(imbrication de 2 framesets)

Nouvelle page affiche dans


la page contenant le
second frameset

Clic sur
le bouton

Page initiale

Nouvelle page affiche


dans une nouvelle
fentre du navigateur

Fentre de dfinition des


caractristiques du nouveau navigateur

Partie 4 : Actions possibles dans une page

Nouveau navigateur (_blank)

Dessin.book Page 76 Vendredi, 22. fvrier 2008 5:53 17

76

Quelle page afficher ?


La page afficher peut tre dfinie :
- soit sous lditeur de pages (aucune programmation nest ncessaire).
- soit sous lditeur de code dans un traitement du bouton (du lien, de limage
clicable, ...).
Slection de la page afficher sous lditeur de pages (cas le plus courant)
Pour dfinir la page afficher :
-

Affichez la fentre de description


du champ (clic droit sur le champ,
option "Description").
Dans la liste des actions, slectionnez la page afficher.

Partie 4 : Actions possibles dans une page

Slection de la page afficher par programmation


Il est ncessaire de slectionner la page afficher par programmation lorsque :
-

plusieurs pages peuvent tre affiches (par exemple soit une page derreur si le mot
de passe nest pas saisi, soit la page suivante du site).
une action particulire doit tre effectue sur le serveur (calcul, lecture denregistrement, ...).

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

Dessin.book Page 77 Vendredi, 22. fvrier 2008 5:53 17

77

Affichage dune page dynamique : cration du contexte associ


Nous savons que WebDev permet de crer des pages dynamiques. Le contenu dynamique
des pages est dfini la vole lexcution de la page (cest--dire lorsque la page est
affiche sur le navigateur de linternaute).
Pour chaque page dynamique affiche sur le navigateur, un "contexte de page" est cr
sur le serveur. Ce contexte contient toutes les informations relatives la page (valeur des
variables en cours, contenu des champs, ....).

Poste Serveur

Contexte de page

Chaque page dynamique (affiche sur le poste de chaque internaute) est associe un
contexte de page.
Si la page permet dafficher des donnes diffrentes (fiche produit avec boutons de parcours par exemple), chaque nouvel enregistrement affich, le contexte est modifi, et la
page est uniquement actualise.

Partie 4 : Actions possibles dans une page

Poste de
linternaute

Dessin.book Page 78 Vendredi, 22. fvrier 2008 5:53 17

78

Afficher ou Actualiser une page dynamique ? PageAffiche ou


PageActualise ?
Le WLangage propose deux fonctions pour afficher une page dynamique : PageAffiche et
PageActualise. Ces fonctions permettent dafficher ou dactualiser une page dynamique.
Ces deux concepts sont totalement diffrents.

Affichage dune page = nouvelle page


Laffichage dune page dynamique correspond louverture dune "nouvelle page" sur le
navigateur. Par exemple, ouverture de la page "Visu_Produit" permettant de visualiser larticle slectionn dans une table.

Partie 4 : Actions possibles dans une page

Attention : Si vous "affichez" une page prcdemment ouverte, la page et son contexte
sont ferms puis rouverts. Toutes les donnes de la page sont r-initialises.

Actualisation dune page = r-affichage de la page (plus rapide)


Lactualisation dune page dynamique consiste r-afficher une page dj ouverte sous
le navigateur. Laction effectue est identique lutilisation de la touche "Rafrachir" du
navigateur.
Les donnes dynamiques prsentes dans la page sont mises jour en fonction des contextes prsents sur le serveur. Seules les donnes modifies sont raffiches.
Exemple : Dans un site commercial, la page prsentant la liste des produits slectionns
est actualise lorsquun nouveau produit est command.

Conseil de performances :
Pour actualiser les donnes affiches dans une page dynamique, utilisez la fonction "PageActualise". Avec la fonction "PageAffiche", le temps de chargement de la page est
plus long.

Dessin.book Page 79 Vendredi, 22. fvrier 2008 5:53 17

79

Empcher le retour sur une page

Pour empcher le retour sur une page par le bouton "Prcdent" du navigateur :
1. Affichez la page sous lditeur de pages de WebDev.
2. Slectionnez loption "Affichage .. Description de la slection". La fentre de description de la page saffiche.
3. Affichez longlet "Dtail".
4. Cochez loption "Empcher le retour sur cette page par le bouton "Prcdent" du navigateur".
5. Validez.

Partie 4 : Actions possibles dans une page

Le bouton "Prcdent" du navigateur permet linternaute de revenir sur une page dj


consulte. Cependant, le retour sur une page nest pas toujours souhaitable.
Par exemple, dans un site commercial, si linternaute revient sur la page de validation de
commande, il pourrait valider sa commande 2 fois, et donc passer 2 commandes.

Dessin.book Page 80 Vendredi, 22. fvrier 2008 5:53 17

80

Choisir un type de bouton

/ lien

Selon lopration effectuer sur les champs de


la page, plusieurs types de bouton / lien sont
disponibles.
Le choix du type de bouton / lien se fait dans la
description du champ (onglet "Gnral").

Partie 4 : Actions possibles dans une page

Voici quelques exemples dutilisation "classique" de boutons / liens dans une page :
- Envoi des donnes de la page en cours au serveur pour traitement
Exemple : Formulaire denregistrement : le lien permet de
vrifier la validit des informations saisies et dafficher une
page de confirmation.
Pour effectuer ce type de traitement, utilisez un lien de type
"Envoyer la valeur des champs au serveur". Les donnes de
la page sont envoyes au serveur pour tre traites.
- Effectuer un traitement sur le serveur, sans rcuprer les
donnes de la page en cours
Exemple : Page de menu constitue 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 navigateur
Exemple : Excuter un calcul simple en
local, un contrle de saisie, ...
Pour effectuer ce type de traitement,
utilisez un bouton de type "Aucune".
- Affichage dune page extrieure au site WebDev
Exemple : Lancer un site de moteur de recherche laide dun bouton.
Pour effectuer ce type de traitement, utilisez un bouton de type "Aucune".

- Rinitialiser les champs de la page


Exemple : 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 81 Vendredi, 22. fvrier 2008 5:53 17

81

Ordre dexcution des codes des boutons /


liens
Deux codes de clic sont associs aux boutons / liens :
-

un code de clic navigateur, saisi en WLangage (ou en Javascript) sous lditeur de code. Ce code est intgr la page HTML et sera excut sur le poste de linternaute.

un code de clic serveur saisi en WLangage (uniquement dans les pages dynamiques).
Ce code sera excut sur le serveur.

Code de clic
navigateur

Code de clic
serveur

Partie 4 : Actions possibles dans une page

Le tableau ci-aprs prsente les diffrents codes excuts selon le type de bouton / lien
choisi, et laction associe.
Laspect du bouton / lien et sa destination ninfluent pas sur lordre des codes excuts.

Dessin.book Page 82 Vendredi, 22. fvrier 2008 5:53 17

82

Opration
Envoi
au
serveur
(submit)

Ordre des codes excuts


Action associe :
Aucune
Excuter le code de clic du bouton / lien
Codes excuts :
1. Code de clic navigateur du champ.
2. Code navigateur du submit de la page (sil existe).
3. Envoi des valeurs prsentes dans les champs de
la page pour mettre jour le contexte de la page
sur le serveur.
4. Code serveur du champ.

Partie 4 : Actions possibles dans une page

Action associe : Afficher la page


Codes excuts :
1. Code de clic navigateur du champ.
2. Code navigateur du submit de la page (sil existe).
3. Envoi des valeurs prsentes dans les champs de
la page pour mettre jour le contexte de la page
sur le serveur.
4. Code serveur du champ.
5. Affichage de la page.

Rinitialisation de
page (reset)

Action associe : Aucune

Aucune

Action associe : Aucune

Remarques
Mise jour automatique du contexte de
page sur le serveur
(pages dynamiques
uniquement).

Mise jour automatique du contexte de


page sur le serveur
(pages dynamiques
uniquement).
Affichage automatique de la page.

Codes excuts :
1. Code de clic navigateur du champ.
2. Affichage de la page initiale (page avec tous les
champs initialiss vide ou 0 et excution du
code dinitialisation de chacun des champs).

Codes excuts :
Code navigateur uniquement.
Action associe : Excuter le code de clic du bouton /
lien
Codes excuts :
1. Code de clic navigateur du champ.
2. Code serveur du champ.
Action associe : Afficher la page
Codes excuts :
1. Code de clic navigateur du champ.
2. Code serveur du champ.
3. Affichage de la page.

Affichage automatique de la page

Dessin.book Page 83 Vendredi, 22. fvrier 2008 5:53 17

83

Tlcharger un fichier (image, ...) vers le


serveur (Upload)
Lupload est lopration qui consiste tlcharger sur le poste serveur un fichier provenant du poste de linternaute.

Lors de la validation de la page,


le fichier "upload" est copi
sur le disque dur du serveur.

Serveur WEB
Sur le navigateur de linternaute

Poste serveur
chez lhbergeur

Note : Laspect du bouton "Parcourir" est dfini par le navigateur.

Partie 4 : Actions possibles dans une page

Un exemple simple : La cration dun contact dans un annuaire.


Linternaute veut associer une photographie la fiche du contact. Cette photo est prsente sur le disque dur de son poste.
Le champ de type UPLOAD permet linternaute de slectionner limage grce un bouton "Parcourir".
Lors de la validation de la fiche, le fichier image slectionn est envoy au serveur et copi
sur le disque dur du serveur (fonction UploadCopieFichier).
Lors de la consultation du contact, limage apparatra dans la fiche.

Dessin.book Page 84 Vendredi, 22. fvrier 2008 5:53 17

84

WebDev et les tats


Grce lditeur dtats, ralisez des impressions de qualit.
Un tat est cr selon le principe suivant :
- les donnes imprimer sont issues dune source de donnes (fichier dcrit dans une
analyse, vue Hyper File, requte, zone mmoire ou fichier texte).
- ltat regroupe, trie et met en forme les donnes.

Poste de
dveloppement

Poste Serveur

Champ Table

Sources de ltat

Partie 4 : Actions possibles dans une page

Ltat cr peut ensuite tre :


- imprim sur limprimante du serveur (cas dun site Intranet).
- affich dans le navigateur de linternaute (format HTML, PDF, ...).
- envoy par mail linternaute (format PDF).
- ...

Etat
Champ zone
mmoire

Requte

Txt

Fichiers HTML,
XML, ...
Fichiers XLS,
PDF, ...

XLS PDF

Fichiers texte

Txt

Fichier texte

Donnes

Impression sur
limprimante
du serveur

Navigateur

Dessin.book Page 85 Vendredi, 22. fvrier 2008 5:53 17

85

Diffrents modes dimpression

Etat sous lditeur dtats de WebDev

Impression en HTML

Impression en PDF

Partie 4 : Actions possibles dans une page

Pour imprimer des documents gnrs par votre site (factures, devis, ...), crez des tats
grce lditeur dtats.
Pour imprimer ces tats quelle que soit la configuration du poste de linternaute, il est conseill de proposer au moins deux modes dimpression :
- Impression au format HTML : Ltat saffiche dans une nouvelle page du site. Linternaute na qu utiliser le bouton "Imprimer" du navigateur pour imprimer ltat. Aucun
logiciel spcifique nest ncessaire.
- Impression au format PDF : Ce mode dimpression ncessite la prsence dAcrobat
Reader sur le poste de linternaute. Limpression se fait directement partir de ce logiciel.

Dessin.book Page 86 Vendredi, 22. fvrier 2008 5:53 17

86

Raliser un traitement sur plusieurs pages


successives

Partie 4 : Actions possibles dans une page

Dans un site commercial, une prise de commande peut par exemple tre ralise sur diffrentes pages :
- page 1 : Slection des produits commander.
- page 2 : Visualisation du panier.
- page 3 : Validation de la commande et saisie des coordonnes du client.

Page 1 : Slection des produits

Page 2 : Visualisation du panier

Page 3 : Saisie des coordonnes du client

Dans ce cas, lcriture des donnes dans les fichiers ne doit seffectuer que dans le code
du bouton de validation de la commande : tous les lments de la commande doivent
tre mmoriss jusqu la validation finale. Ncrivez pas dans les fichiers en cours de traitement.
Remarque : Il est galement possible dutiliser une transaction, mais nous vous recommandons de mmoriser les informations de la commande.

Dessin.book Page 87 Vendredi, 22. fvrier 2008 5:53 17

87

Envoyer des emails


Les emails permettent :
- aux internautes de communiquer entre eux : envoi demails 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 transfrer des donnes dun poste un autre : les nouvelles commandes saisies
sur un site commercial sont transfres par email au sige de la socit pour traitement, ...
WebDev permet denvoyer des emails depuis un site par 2 mthodes.

Envoi de lemail depuis le poste de linternaute

Utilisez cette mthode lorsque linternaute doit envoyer un email une adresse dfinie :
auteur du site, support technique, service commercial, ...
La fonction navigateur EmailOuvreMessagerie permet douvrir le logiciel de messagerie
de linternaute. Certains paramtres peuvent tre remplis par dfaut : adresse email du
destinataire, ...

Internaute 3

Internaute n

Serveur WEB

Internaute 2

Envoi demails
entre internautes

Internaute 1

Cette mthode permet dutiliser directement la messagerie de linternaute : aucun traitement spcifique nest effectuer dans le site WebDev.

Partie 4 : Actions possibles dans une page

Dessin.book Page 88 Vendredi, 22. fvrier 2008 5:53 17

88

Envoi de lemail depuis le serveur (pages dynamiques uniquement)

Dans ce cas, cest le serveur qui gre lenvoi des emails.


Lenvoi des emails peut tre ralis :
- directement dans le site dynamique WebDev (par exemple pour un transfert de donnes par email, ou pour un email de validation de commande);
- par le spooler demail (livr avec WebDev).

Internaute N

Partie 4 : Actions possibles dans une page

Serveur WEB
Serveur demails
(administrateur
WebDev)

Internaute 3

ou
Envoi direct des
emails

Internaute 2

Internaute 1

Utilisez cette mthode pour une gestion personnalise des emails :


- un contrle sur le contenu des emails envoys par les internautes (cas dun site de
type "liste de diffusion"),
- la vrification de la validit de ladresse du destinataire,
- le cryptage des informations envoyes par emails,
- la validation dun traitement, ...

Dessin.book Page 89 Vendredi, 22. fvrier 2008 5:53 17

89

Conserver des informations sur le poste de


linternaute grce aux cookies
Un cookie est un fichier enregistr par le site WebDev sur le poste de linternaute. Ce fichier peut tre relu tout moment depuis le serveur ou par le navigateur. Les cookies permettent de stocker des informations persistantes sur le poste de linternaute.
Par exemple, lors de la premire connexion de linternaute, des informations lui sont demandes : son nom dutilisateur, son login, ... et sont stockes sur sa machine. Lors des
connexions suivantes, le site WebDev ira directement lire ces informations dans le cookie
cr lors de la premire connexion et pourra saluer linternaute par son prnom ds la premire page.

Le site WebDev
enregistre des informations
donnes par linternaute
sur son poste.

Le nouvel internaute doit ici saisir


son nom et son mot de passe

Connexions suivantes
Le site WebDev
lit des donnes
prcdemment
enregistres sur le poste
de linternaute.

Le site WebDev affiche par dfaut


les informations lues dans le cookie

Pour crer des cookies dans un site WebDev, utilisez la fonction du WLangage CookieEcrit.
Pour lire les cookies dans un site WebDev, utilisez la fonction du WLangage CookieLit.

Partie 4 : Actions possibles dans une page

1re connexion

Dessin.book Page 90 Vendredi, 22. fvrier 2008 5:53 17

90

Protger laccs au site : mots de passe


Une gestion daccs un site par mot de passe est ncessaire dans deux cas :
1. Protger des informations personnelles
2. Limiter laccs un site

Protger des informations personnelles


Pour accder de nouveau des donnes personnelles, linternaute peut spcifier un mot
de passe. Ainsi, dans un site commercial, un mot de passe dfini par linternaute lui permet daccder au dtail de ses prcdentes commandes.
Dans ce cas, la gestion de laccs un site ncessite :

Partie 4 : Actions possibles dans une page

une identification :
A la premire connexion, linternaute sidentifie et saisit son mot de passe.
Aux connexions suivantes, linternaute sidentifie et accde aux fonctionnalits qui lui
sont rserves (et son historique, ...).
la possibilit pour linternaute de retrouver un mot de passe oubli.

WebDev est livr avec toutes les ressources ncessaires la gestion de mots de passe
personnels.

Limiter laccs un site


Par dfaut, un site internet est accessible nimporte quel internaute. Mais un site nest
pas toujours destin au grand public : certaines fonctionnalits peuvent tre rserves
certains types dinternautes (administrateur de site, ...).
Dans ce cas, le gestionnaire du site attribue un mot de passe chaque internaute. Ce mot
de passe ne pourra pas tre modifi. Ce mot de passe permet un accs des fonctionnalits plus ou moins limites.
Par exemple, dans un site commercial :
- un mot de passe spcifique sera attribu aux commerciaux : ils accderont aux statistiques de ventes, ...
- un mot de passe spcifique sera attribu lquipe marketing : ils pourront mettre en
ligne de nouveaux produits.
WebDev permet de grer simplement ces diffrents types daccs un site.

Dessin.book Page 91 Vendredi, 22. fvrier 2008 5:53 17

91

Crypter les informations qui transitent sur


le Web avec SSL
Par dfaut, les donnes circulant entre le poste de linternaute et le serveur Web ne sont
pas protges. La confidentialit des donnes changes n'est pas certifie.
Pour assurer la confidentialit, plusieurs systmes existent. Un systme courant est l'utilisation du protocole SSL (Secure Socket Layer).

Mise en place des transactions scurises par protocole SSL


Pour mettre en place des transactions scurises par SSL, il est ncessaire deffectuer les
formalits lies ce protocole (certification payante dune cl SSL par un organisme spcialis). Pour plus de dtails, consultez laide en ligne de WebDev.

Seul le transfert de donnes sensibles doit tre scuris : transfert du numro de carte
bancaire par exemple. En effet, le mode scuris est plus lent.
La mise en place dune transaction scurise est effectue lors de louverture dune nouvelle page par un bouton (ou un lien). Il suffit dutiliser la fonction SSLActive dans le code
navigateur du bouton (ou du lien). Ds l'ouverture de la page scurise, toutes les actions
effectues seront en mode scuris (cest--dire crypt).

Poste de linternaute
Oprations en mode scuris

SSLActive(Vrai)
SSLActive(Faux)

Clic sur un
bouton

Page
scurise

Clic sur un
bouton

Page non
scurise

Poste Serveur

Ouverture de
la page

Ouverture de
la page

Pour revenir en mode non scuris, il suffit dutiliser la fonction SSLActive(Faux) dans le
code navigateur d'un bouton (ou dun lien) permettant d'ouvrir une nouvelle page.

Partie 4 : Actions possibles dans une page

Transactions scurises par SSL dans un site WebDev

Dessin.book Page 92 Vendredi, 22. fvrier 2008 5:53 17

92

Avantage scuritaire pour votre site


dynamique : la gestion du "Back"
Un navigateur permet de parcourir les diffrentes pages dun site laide des boutons
"Suivant" (
) et "Prcdent" (
) de son menu.
A chaque nouvelle page dynamique affiche sur le navigateur, un contexte de page spcifique son traitement est cr sur le serveur.
Lorsquune mme page dynamique est utilise pour afficher des donnes diffrentes (page avec table fichier, zones rptes ou page de type "Fiche avec parcours", ...), le contexte de page prsent sur le serveur varie en fonction des donnes affiches.

Partie 4 : Actions possibles dans une page

Lorsque linternaute appuie sur le bouton "Prcdent" (ou "Back"), le navigateur ne prvient ni le site ni le serveur. Le navigateur revient la page prcdente sans le contexte
correspondant.
Aucune gestion particulire nest ncessaire lorsque on fait un "Back" entre des pages diffrentes.
Une gestion spcifique est ncessaire pour une mme page dynamique affichant des donnes diffrentes.

Pourquoi grer le "Back" ? Un exemple simple ...


Pour comprendre la ncessit de la gestion du "Back", tudions un exemple simple : une
page dynamique qui permet dafficher la liste des lecteurs DVD-ROM disponibles.
Etape 1 : Affichage de la liste des DVD-ROM

Le contexte contient la liste des lments affichs dans cette table : lecteurs de DVD ROM
de la marque CREATIVE.

Dessin.book Page 93 Vendredi, 22. fvrier 2008 5:53 17

93

Les priphriques de la marque "NEC" sont affichs. Le contexte de la page sur le serveur
est mis jour : le contexte contient la liste des lments affichs dans cette table (lecteurs
de DVD ROM de la marque NEC).
Etape 3 : Clic sur le bouton "Back" du navigateur.

La page dynamique affiche sur le navigateur correspond la page affiche ltape 1.


Cependant, le serveur nest pas inform par le navigateur que linternaute a utilis la touche Back.
Le contexte de page sur le serveur est toujours celui correspondant aux enregistrements
"NEC".
Si linternaute slectionne dans la table un lment (DVD ROM de la marque "CREATIVE"),
llment slectionn sera llment correspondant dans le contexte : un lment NEC. Il
y a dsynchronisation entre la page dynamique visualise et le contexte de page prsent
sur le serveur. Le moteur WebDev dtecte cette dsynchronisation.

Une gestion du bouton Back est ncessaire.

Partie 4 : Actions possibles dans une page

Etape 2 : Clic sur le lien "Priphriques suivants".

Dessin.book Page 94 Vendredi, 22. fvrier 2008 5:53 17

94

Comment grer le "Back" ?


Pour grer le "Back", vous pouvez utiliser :
-

le code de synchronisation de la page dynamique. Ce code est appel en cas de dsynchronisation.


un champ de saisie cach (champ de saisie invisible) pour identifier lenregistrement
affich sur le navigateur.
loption "Dsactiver le mcanisme de synchronisation des pages pour ce champ" sur
vos boutons et/ou vos liens (onglet "Avanc" de la description du bouton).

Selon le type daction pouvant tre effectu dans la page dynamique, il est possible de
choisir et de combiner lune ou lautre de ces options.

Exemple dtaill de gestion du Back

Partie 4 : Actions possibles dans une page

Une page dynamique permet de parcourir les diffrents produits dun site. Les boutons
prsents dans la page sont les suivants :
-

Retour au menu principal


Cette action ne ncessite pas de gestion particulire du "Back". Ce bouton ne manipule pas les fichiers de donnes : une dsynchronisation entre le contexte et la page affiche na pas dinfluence.

Supprimer le produit en cours


Laction "Supprimer le produit en cours" manipule un fichier de donnes. Il est important que lenregistrement supprim corresponde lenregistrement visualis par linternaute.
Pour grer le "Back" dans ce cas, il est conseill dutiliser :
- un champ cach (invisible) dans la page dynamique : ce champ contiendra lidentifiant de lenregistrement rellement en cours sur le navigateur.
- le code de synchronisation : ce code permet de mettre jour le contexte (recherche
de lenregistrement visualis par linternaute).
Les actions effectues dans le code de synchronisation seront :
1. Re-lecture de lenregistrement correspondant lidentifiant stock dans le
champ cach.
2. Si lenregistrement nest pas trouv : une page derreur est affiche, et le code
du bouton "Supprimer" nest pas excut.
3. Si lenregistrement est trouv, le contexte de page est alors automatiquement
modifi sur le serveur : le code du bouton "Supprimer" est excut.

La scurit totale !

Lexemple "Annuaire" livr avec WebDev illustre le cas prsent dans cette page.

Dessin.book Page 95 Vendredi, 22. fvrier 2008 5:53 17

95

Paiement scuris avec prestataire


Diffrents prestataires permettent de proposer un paiement scuris pour tous les sites
commerciaux. Tout paiement ralis avec une carte bancaire est valid par le prestataire
auprs du centre de carte bancaire.
Les diffrentes tapes du paiement sont les suivantes :

Serveur du
prestataire

Vrification
du numro
de carte

- Serveur dapplication
WebDev
- Site WebDev

Poste dun
internaute

1. Le client valide sa commande.


2. Le site WebDev demande un dbit au prestataire.
3. Le prestataire demande la saisie du numro de carte.
4. Le client saisit son numro de carte.
5. Aprs vrification, le prestataire envoie un numro daccord.
6. La commande est accepte.
Lexemple "REWALI" utilise ce type de paiement.

Partie 4 : Actions possibles dans une page

Serveur Web

Dessin.book Page 96 Vendredi, 22. fvrier 2008 5:53 17

Partie 4 : Actions possibles dans une page

96

Dessin.book Page 97 Vendredi, 22. fvrier 2008 5:53 17

PARTIE 5

Base de donnes

Dessin.book Page 98 Vendredi, 22. fvrier 2008 5:53 17

Dessin.book Page 99 Vendredi, 22. fvrier 2008 5:53 17

99

Les diffrents types de fichiers accessibles


WinDev, WebDev et WinDev Mobile propose un accs simple aux bases de donnes les
plus courantes.

ODBC

Progress

OLE DB
AS/400
Windows

Linux

XML

Client /
Serveur

MySQL

Hyper File
Natif
Mobile
UDC

Sybase

Accs Natifs
Informix

Classic
DB2
Oracle

SQL
Server

Partie 5 : Base de donnes

UDC : Universal Data Connector (HLitRecherche, HExcuteRequte, Fichier, rubrique,


Liaison fichier automatique, SQLExec, ...).

Dessin.book Page 100 Vendredi, 22. fvrier 2008 5:53 17

100

Comment lier un champ sa rubrique


Pour afficher dans une page des informations provenant dune base de donnes, il est ncessaire de lier les champs de cette page avec les diffrentes rubriques de la base de donnes.
La mthode daffichage et de rcupration des informations est trs simple :
- La liaison dun champ avec une rubrique est dfinie sous lditeur de pages, lors de la
description du champ (onglet "Fichier").
- La fonction PageVersFichier permet de mettre jour lenregistrement avec les donnes prsentes dans la page.
- La fonction FichierVersPage permet de mettre jour les donnes affiches dans la
page avec les informations enregistres dans le fichier.

Partie 5 : Base de donnes

PageVersFichier

FichierVersPage

Base de donnes

Dessin.book Page 101 Vendredi, 22. fvrier 2008 5:53 17

101

Hyper File Classic


Une application WebDev Hyper File peut fonctionner en mode Classic (appel Hyper File
Classic) ou en mode Client / Serveur.
Les caractristiques du mode Classic sont les suivantes :
- Un site utilisant Hyper File Classic est excut sur diffrents navigateurs. Pour chaque
site excut, une session est lance sur le serveur.
- Les fichiers de donnes sont prsents dans un rpertoire accessible par les sessions
des sites WebDev (sur le serveur Web ou sur un autre poste). Chaque session accde
physiquement aux fichiers de donnes.
- Les traitements (requte, lecture / ajout dans un fichier, ...) sont raliss par chaque
session.

Serveur Web
Session 1

Session 2

Client 2

Session n

Client n

Bases de donnes
Hyper File
Classic

Partie 5 : Base de donnes

Client 1

Dessin.book Page 102 Vendredi, 22. fvrier 2008 5:53 17

102

Hyper File Client / Serveur


Une application WinDev Hyper File peut fonctionner en mode Classic ou en mode Client /
Serveur.
Les caractristiques du mode Client / Serveur sont les suivantes :
- Un site Hyper File Client / Serveur est excut sur diffrents postes utilisateur. Pour
chaque site lanc, une session est prsente sur le serveur Web.
- Les fichiers de donnes sont prsents sur un poste serveur (Serveur Hyper File). Seul
le poste serveur accde physiquement aux fichiers de donnes.
- Lensemble des traitements (requte, lecture/ajout dans un fichier, ...) sont raliss
sur le serveur.

Serveur Web
Session 1

Client 1

Partie 5 : Base de donnes

Session 2

Serveur Hyper File


Windows ou Linux

Serveur Manta
Client 2

Session n
Bases de donnes
Hyper File
Client/Serveur
Client n
Protocole TCP/IP
Connexion du type :
Cable rseau,
USB,
Wi-Fi,
Internet...

Dessin.book Page 103 Vendredi, 22. fvrier 2008 5:53 17

103

Les requtes
Une requte sert interroger une base de donnes pour visualiser, insrer, modifier ou
supprimer des donnes. La structure de la requte dfinit les donnes manipules.
Une requte peut interroger un ou plusieurs fichiers.
Lditeur de requtes permet de crer trs simplement des requtes, sans avoir programmer.

Page et champs dune


page (onglet "Contenu")

Requte

Etats

Programmation
(utilisation dans les
fonctions WLangage)

Donnes en provenance dun


ou de plusieurs fichiers (Hyper
File, Oracle, ...)

Requtes

Partie 5 : Base de donnes

Le rsultat de la requte se manipule


comme un fichier

Dessin.book Page 104 Vendredi, 22. fvrier 2008 5:53 17

104

Les requtes intgres


Les champs dune page peuvent tre lis un fichier de donnes ou une requte existante, ... Il est galement possible de lier ces champs une requte cre lors de la conception du champ.

Partie 5 : Base de donnes

Zone rpte lie une requte intgre

Requte intgre : MaPage_1$Requte

Dans ce cas, la requte est intgre la page. Elle est prsente dans le fichier WPW correspondant la page. Si le fichier WPW est transmis, les requtes intgres utilises par
cette page seront galement fournies.

Dessin.book Page 105 Vendredi, 22. fvrier 2008 5:53 17

105

Rplication universelle
La rplication universelle permet de maintenir jour des bases de donnes de format
identique ou diffrent (Hyper File Classic, Oracle, SQL Server, ...). Il est par exemple possible de raliser une synchronisation entre une base de donnes Hyper File Classic et une
base de donnes Oracle.

Il est possible dadapter la synchronisation des cas particuliers. Par exemple, il est possible de rcuprer uniquement les enregistrements concernant un produit spcifi ou les
enregistrements raliss une certaine date, de grer les conflits, ...
Ces adaptations doivent tre effectues par programmation grce la fonction HRplProcdureFiltre.

Partie 5 : Base de donnes

La rplication universelle utilise un modle centralis : toutes les bases de donnes se


synchronisent avec une base de donnes matre. La base de donnes matre rpercute
ensuite les modifications vers les autres bases de donnes.

Dessin.book Page 106 Vendredi, 22. fvrier 2008 5:53 17

106

Architecture 3-tiers
Le but du 3-Tiers est de sparer les 3 "couches" habituelles dune application : IHM, traitements et donnes.
Une application sera donc compose de 3 couches indpendantes :
- une couche prsentation,
- une couche traitements,
- une couche daccs aux donnes.

Partie 5 : Base de donnes

Cette sparation a pour but de rendre indpendante chacune des couches afin de faciliter
la maintenance et les volutions futures de lapplication. Elle assure une scurit plus importante car laccs la base de donnes nest autoris que par la couche de traitements.
Elle a galement lavantage doptimiser le travail en quipe et le dveloppement multi-cibles.

Dessin.book Page 107 Vendredi, 22. fvrier 2008 5:53 17

PARTIE 6

Tester un site

Dessin.book Page 108 Vendredi, 22. fvrier 2008 5:53 17

Dessin.book Page 109 Vendredi, 22. fvrier 2008 5:53 17

109

Tester un site : Les lments tester


Le test dun site est une tape fondamentale dans le dveloppement dun site. Le test permet de vrifier le bon fonctionnement du site et son utilisabilit.

le fonctionnement du site :
enchanement des pages, excution du code saisi, ...

le "look" du site :
utilisez diffrents navigateurs (principalement Internet Explorer et Netscape Navigator), utilisez diffrentes rsolutions cran, redimensionnez le navigateur, ...

les fonctionnalits spcifiques au Web :


impression, cookies, touche "Prcdent" du navigateur, ...

laccs au site par diffrents internautes :


gestion des logins et des mots de passe, gestion des accs concurrentiels aux fichiers
de donnes, ...

la non-rgression dun site lors dune mise jour :


validation des modifications effectues dans un site et vrification que les fonctionnalits non modifies sont toujours accessibles.

la monte en charge (pour un site install sur le serveur) :


validation du nombre maximum dinternautes pouvant accder au site.

Partie 6 : Tester un site

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

Dessin.book Page 110 Vendredi, 22. fvrier 2008 5:53 17

110

Comment tester un site ?


Plusieurs outils sont disponibles pour tester un site WebDev :
- lditeur principal de WebDev.
- ladministrateur WebDev.
Ce module est indispensable lexcution dun site dynamique WebDev. Sur le poste
de dveloppement, il est possible de tester les sites dynamiques depuis une page de
test cre par ladministrateur.
- WDTestSite, loutil de test de monte en charge.
Le tableau ci-dessous prsente quand et comment utiliser ces diffrents modes de test.

Mode de test

Partie 6 : Tester un site

Editeur

Administrateur
WebDev :
WD120ADMIN
(site dynamique
WebDev uniquement)

Type de test

Lancement du test

Le lancement du test depuis lditeur permet par exemple de tester :


- les fonctionnalits du site,
- le code utilis dans les diffrents traitements. Un puissant
dbogueur permet de suivre
pas pas lexcution des diffrents traitements.
- lutilisation du site avec diffrents navigateurs (installs sur
le poste de dveloppement).
Ce type de test permet lutilisation
du dbogueur.

Option "Projet .. Mode test .. Tester


le projet" ou "Projet .. Mode test ..
Tester le projet depuis la page
daccueil" depuis lditeur.

Le lancement du test depuis ladministrateur permet par exemple de


tester :
- les fonctionnalits du site,
- les fonctions spcifiques au
Web (cookies, ...),
- lutilisation du site dans des
conditions relles.

1. Lancez ladministrateur WebDev (option "Programmes .. WebDev 12 .. Administrateur WebDev"


depuis le menu "Dmarrer").
2. Cliquez sur le bouton "Page de
test" (onglet "Configuration").

Remarque :
Les droits de linternaute (droits
daccs, dcriture et de lecture)
correspondent aux droits du dveloppeur.

Remarque : Ce test permet dutiliser le site WebDev dans des conditions identiques celles dun
internaute.
Les droits de linternaute (droits
daccs, dcriture et de lecture)
correspondent aux droits de lutilisateur par dfaut dfini dans le
serveur Web utilis.

Dessin.book Page 111 Vendredi, 22. fvrier 2008 5:53 17

111

Tests
ques

automati-

WDTestSite permet de raliser des


tests de monte en charge.
WDTestSite permet de lancer plusieurs connexions simultanes
un site WebDev.
Chaque connexion effectue une
succession dactions dans le site
WebDev (scnario pr-dfini)
Ce test doit tre effectu sur un site
WebDev install sur un poste de
dploiement, prt tre mis en service.

1. Crez un scnario de test (avec


WDTestSite).
2. Installez WDTestSite et le scnario sur diffrents postes pour simuler un grand nombre daccs.
3. Spcifiez le nombre de connexions effectuer.
4. Lancez le scnario de test sur
chaque poste.

Les tests automatiques permettent


de tester les procdures et les classes dun site diffrents niveaux
de dveloppement.
Les scnarios de test sont automatiquement gnrs en WLangage
partir du test de la procdure ou de
la classe. Les scnarios peuvent
tre modifis sous lditeur de code.

1. Affichez la procdure ou la classe sous lditeur de code.


2. Slectionnez loption "Tests
automatiques .. Enregistrer un
nouveau test".

Remarque :
Chaque poste effectue un nombre
de connexions dfini. Chaque connexion effectue le scnario slectionn.

Partie 6 : Tester un site

WDTestSite
(site dynamique
WebDev uniquement)

Dessin.book Page 112 Vendredi, 22. fvrier 2008 5:53 17

112

Le dbogueur
Pour mettre au point votre code, un dbogueur est livr en standard avec WebDev.
Le dbogueur permet une excution pas pas de vos sites dynamiques, en visualisant le
code WLangage excut, le contenu des variables, ...

Partie 6 : Tester un site

Pour lancer le dbogueur, utilisez :


-

soit un point darrt directement plac dans lditeur de code : lorsque la ligne prcde dun point darrt sera excute, le dbogueur sera automatiquement lanc.
Pour poser un point darrt, il suffit de cliquer devant la ligne de code : une puce rouge
apparat.

soit le mot-cl serveur STOP du WLangage directement dans votre code WLangage :
le dbogueur sera automatiquement lanc ds que cette ligne de code sera excute.

soit loption "Projet .. Mode Test .. Tracer le projet" : le dbogueur est lanc en mme
temps que le test du site dynamique.

Dessin.book Page 113 Vendredi, 22. fvrier 2008 5:53 17

113

Quand peut-on utiliser le dbogueur ?

Le "Go" de page :
Le test de la page en cours sous lditeur peut tre lanc par loption "Code .. Tester la
page".

Le "Go" de projet :
Le test du projet sur le poste de dveloppement peut tre lanc par loption "Projet ..
Mode test .. Tester le projet".

Le projet dploy :
Il est possible de dbogueur le projet dploy. Cette fonctionnalit est trs utile pour
reproduire un problme survenant uniquement dans des conditions spcifiques.
Pour lancer le projet dploy, il faut utiliser loption "Projet .. Mode test .. Se connecter
un site et dboguer la connexion".
Remarque : Cette option est utilisable avec un serveur de dveloppement ou de dploiement. Le serveur doit tre configur pour autoriser le dbogage distance.

Le projet dploy en cours dutilisation :


Il est possible de dbogueur le projet dploy, en cours dutilisation. Cette fonctionnalit est trs utile pour reproduire un problme survenant uniquement dans des conditions spcifiques. Le cas le plus courant : vous utilisez le site, et vous rencontrez le
problme : vous pouvez lancer le dbogueur immdiatement en mettant un point darrt dans le code de votre projet.
Pour utiliser une session du projet dploy, il faut utiliser loption "Projet .. Mode test
.. Dboguer une connexion existante".
Remarque : Cette option est utilisable avec un serveur de dveloppement ou de dploiement. Le serveur doit tre configur pour autoriser le dbogage distance.

Partie 6 : Tester un site

Lorsquun test est ralis depuis lditeur, le dbogueur peut toujours tre utilis. Il suffit
de placer les points darrt aux endroits voulus, pour pouvoir dbogueur pas pas le site.
Les diffrents types de tests disponibles depuis lditeur sont les suivants :

Dessin.book Page 114 Vendredi, 22. fvrier 2008 5:53 17

114

A quoi sert ladministrateur WebDev ?


En dveloppement (pour le test) comme en dploiement, ladministrateur WebDev est ncessaire lexcution des sites dynamiques WebDev.

Partie 6 : Tester un site

Lors du dveloppement dun site dynamique WebDev, ladministrateur permet principalement de :


- tester les sites dynamiques grce la page de test (onglet "Avanc", bouton "Page de
test")
- rgler les paramtres de connexion aux sites dynamiques pour vos tests : temps de
dconnexion, ... (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 problme lors du lancement dun site dynamique
WebDev (onglet "Avanc", bouton "Diagnostic")
- autoriser le dbogage distance (onglet "Configuration").
- ...

En dploiement, ladministrateur WebDev permet de :


- grer les comptes WebDev (onglet "Configuration")
- grer la configuration des diffrents sites dynamiques installs sur le serveur : nombre
de connexions autorises, ... (onglet "Sites")
- personnaliser les messages derreurs des diffrents sites dynamiques installs sur le
serveur (onglet "Avanc"),
- ...

Dessin.book Page 115 Vendredi, 22. fvrier 2008 5:53 17

PARTIE 7

Dployer un site

Dessin.book Page 116 Vendredi, 22. fvrier 2008 5:53 17

Dessin.book Page 117 Vendredi, 22. fvrier 2008 5:53 17

117

Dploiement dun site statique ou


dun site semi-dynamique WebDev
Principe
Le dploiement dun site statique ou semi-dynamique est ralis par FTP :

Poste de
dveloppement
Cration de la
version
dinstallation par
FTP (WDDploie)

Hbergeur

Configuration du
serveur FTP

Mise en service
du site
(lien de lancement)

Informations ncessaires pour le dploiement

Avant deffectuer un dploiement par FTP, lhbergeur doit communiquer au dveloppeur


les informations suivantes :
- Nom du serveur Web o linstallation doit tre ralise (ou son adresse IP)
- Nom dutilisateur et mot de passe dfinis dans le serveur FTP
Lors du dploiement par FTP, le dveloppeur doit prciser dans WDDploie :
- les informations fournies par lhbergeur
- les fichiers installer

Partie 7 : Dployer un site

Si vous navez pas ces informations, inutile de tenter dinstaller. Appelez le prestataire
pour obtenir ces informations.

Dessin.book Page 118 Vendredi, 22. fvrier 2008 5:53 17

118

Dploiement dun site dynamique WebDev


Les diffrents types de dploiement
WebDev propose trois mthodes de dploiement dun site dynamique :
-

dploiement par mdia physique (CD ROM, ...) du site WebDev, avec cration dune
version dinstallation livrable sur CD ROM lhbergeur

Poste de
dveloppement

Cration de la version
dinstallation par le
dveloppeur sur un
mdia physique
(CD ROM, ...)

Hbergeur

Installation du site
WebDev et
paramtrage de
ladministrateur

Mise en service du site


(lien de lancement)

Remarque : un serveur dapplication WebDev peut tre intgr linstallation fournie


par mdia physique.

Partie 7 : Dployer un site

dploiement distance directement depuis le poste de dveloppement (par transfert


de fichiers par Internet, FTP)

Poste de
dveloppement

Cration de la version
dinstallation par FTP
Mise en service du site
(lien de lancement)

Hbergeur

Configuration du
serveur FTP, du
gestionnaire de
comptes
(WD120ADMIN.EXE)

Dessin.book Page 119 Vendredi, 22. fvrier 2008 5:53 17

119

dploiement distance depuis un poste dadministration (par transfert de fichiers par


Internet, FTP)

Poste de
dveloppement

Serveur WEB

Cration du package
dinstallation

Configuration du
serveur FTP, du
gestionnaire de
comptes
(WD120ADMIN.EXE)

Mise en service du site


(lien de lancement)

Transmission
du package
Installation du site

Poste
dadministration

Choisir une mthode de dploiement


Le choix de la mthode de dploiement dpend surtout des contraintes imposes par lhbergeur et de la localisation du serveur de dploiement (distant ou prsent dans les locaux).
Linstallation par mdia physique est conseille si le serveur Web est facilement accessible (par exemple, le serveur Web se situe dans les mmes locaux que lquipe de dveloppement).
Linstallation distance (par FTP) directement depuis le poste de dveloppement est
conseille si le poste de dploiement nest pas facilement accessible. Un serveur FTP
standard doit tre prsent sur le poste de dploiement.
Avant deffectuer une installation distance, lhbergeur doit configurer le serveur FTP et
le gestionnaire de comptes WebDev.

Partie 7 : Dployer un site

Excution du Package :
Installation du site sur
le serveur par FTP

Dessin.book Page 120 Vendredi, 22. fvrier 2008 5:53 17

120

Linstallation distance (par FTP) directement depuis un poste de dadministration est


conseille si les caractristiques du serveur ne sont pas connues par le dveloppeur lors
de la cration du programme dinstallation. Le programme dinstallation est appel dans
ce cas un "Package".
Si un site est destin plusieurs clients, il est ainsi possible de crer un seul package et
de le fournir tous les clients voulus.
Les paramtres du serveur (Adresse, compte FTP, ...) ne seront renseigns que lors de
lexcution du package sur le poste dadministration.

Dploiement sur mdia physique : informations ncessaires


Lors dun dploiement par mdia physique, les informations concernant linstallation et le
paramtrage du site sont donnes la fois dans lassistant de prparation de linstallation
et dans lassistant dinstallation.
Lors de la prparation de linstallation, il est ncessaire de fournir :
- le rpertoire dinstallation,
- les fichiers installer,
- le rpertoire de gnration de linstallation.
Lors de linstallation, il est ncessaire de fournir :
- le rpertoire des fichiers de donnes,
- le rpertoire des fichiers du site.

Partie 7 : Dployer un site

Aprs linstallation, il est ncessaire de paramtrer les caractristiques du site (temps de


connexion, nombre de connexions, ...) dans ladministrateur WebDev (version de dploiement).

Dessin.book Page 121 Vendredi, 22. fvrier 2008 5:53 17

121

Dploiement par FTP directement depuis le poste de dveloppement : informations ncessaires


Si vous navez pas ces informations, inutile de tenter dinstaller. Appelez le prestataire
pour obtenir ces informations.
Avant deffectuer un dploiement par FTP directement depuis le poste de dveloppement, lhbergeur doit communiquer au dveloppeur les informations suivantes :
- Nom du serveur Web o linstallation doit tre ralise (ou son adresse IP)
- Nom dutilisateur et mot de passe associ dfinis dans le gestionnaire de compte WebDev
- Nom dutilisateur et mot de passe dfinis dans le serveur FTP
Lors du dploiement par FTP, le dveloppeur doit prciser dans lassistant :
- les informations fournies par lhbergeur
- les fichiers installer
- le nom du sous-rpertoire des fichiers de donnes
- les diffrents paramtres de connexions au site
Remarques :
- Il est possible de raliser une installation diffre, la date et lheure choisies.
- L'installation et la mise jour par FTP sont scurises par mot de passe et cryptage
des donnes transmises.

Lors de la cration du programme dinstallation, aucune information spcifique nest ncessaire.


Lors de lexcution du programme dinstallation du site (depuis un poste dadministration), lhbergeur devra indiquer :
- Nom du serveur Web o linstallation doit tre ralise (ou son adresse IP)
- Nom dutilisateur et mot de passe associ dfinis dans le gestionnaire de compte WebDev
- Nom dutilisateur et mot de passe dfinis dans le serveur FTP
Remarques :
- Il est possible de raliser une installation diffre, la date et lheure choisies.
- L'installation et la mise jour par FTP sont scurises par mot de passe et cryptage
des donnes transmises.

Partie 7 : Dployer un site

Dploiement par FTP directement depuis un poste dadministration : informations ncessaires

Dessin.book Page 122 Vendredi, 22. fvrier 2008 5:53 17

122

Centre de contrle dhbergement


Destin principalement aux hbergeurs et aux Webmasters, le centre de contrle d'hbergement permet d'aider hberger plus facilement les sites WebDev 12.
Le centre gre 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 systme dexploitation Windows.
Un choix par dfaut est propos : il permet d'installer un serveur par simple clic, sans comptences spcifiques.

Partie 7 : Dployer un site

Le paramtrage des lments suivants est centralis :


- Comptes Windows,
- Groupes des utilisateurs FTP,
- Groupes des clients WebDev,
- Home Directory,
- Alias FTP,
- Comptes WebDev,
- Rpertoires des donnes,
- Sites Web virtuels, ...

Dessin.book Page 123 Vendredi, 22. fvrier 2008 5:53 17

123

Rfrencement dun site


Pour que votre site soit visit, les internautes doivent le trouver. Pour cela, votre site doit
tre propos lorsque linternaute saisira les mots-cls caractrisant votre site dans un moteur de recherche.
Pour simplifier le rfrencement de votre site, WebDev vous permet dintgrer une page
daccueil votre site. Cette page daccueil permet de saisir la description de votre site et
les mots-cls dcrivant votre site.

Il est possible dintgrer une page daccueil votre site :


- soit lors de la cration du projet (dans lassistant de cration du projet).
- soit lors du dveloppement du projet (option "Projet .. Rfrencement du site (page
daccueil)").
Plusieurs modles de pages daccueil sont proposs.

Partie 7 : Dployer un site

Exemple de page daccueil cre automatiquement par WebDev :

Dessin.book Page 124 Vendredi, 22. fvrier 2008 5:53 17

124

Mise en service dun site dynamique


WebDev
Votre site dynamique WebDev sera accessible par les internautes ds quil aura t mis
en service. La mise en service dun site dynamique WebDev consiste activer le site.
Lactivation dun site dynamique WebDev peut se faire par plusieurs mthodes :
-

soit lors de linstallation par FTP : une case cocher permet dactiver automatique-

Partie 7 : Dployer un site

ment le site aprs son installation.

soit avec ladministrateur distance (voir Maintenance dun site dynamique WebDev, page 135).

soit avec ladministrateur WebDev prsent sur le poste de dploiement (option "Site
WebDev bloqu", dans longlet "Sites").

Dessin.book Page 125 Vendredi, 22. fvrier 2008 5:53 17

125

Serveur ddi ou mutualis ?


Les hbergeurs proposent deux types de serveurs pour installer vos sites WebDev :
serveur mutualis :
serveur dont les ressources sont partages par diffrents clients (client = socit faisant hberger son site chez un hbergeur)

Partie commune :
- serveur dapplication
WebDev
- systme dexploitation
- base de registres
- serveurs Web et FTP
Espace disque
client 1

Espace disque
client 2

Espace disque
client 3

Espace disque
client n

Caractristiques :
Lhbergeur fournit un poste serveur diffrents clients.
Lhbergeur :
- configure le serveur FTP.
- dtermine le nombre maximum de connexions sur lensemble des sites dynamiques
dun mme client ( laide du gestionnaire de comptes WebDev).
Linstallation et les mises jour dune site dynamique ou statique peuvent tre ralises par FTP.

Partie 7 : Dployer un site

Dessin.book Page 126 Vendredi, 22. fvrier 2008 5:53 17

126

serveur ddi :
le serveur est rserv au client. Lhbergeur fournit uniquement laccs Internet
(adresse IP, cble, ...).
La machine est soit loue par lhbergeur, soit fournie par le client.

Poste ddi au client :

Partie 7 : Dployer un site

- serveur Web et si
ncessaire serveur FTP
- systme dexploitation
- serveur dapplication
WebDev
- sites WebDev

Caractristiques :
Lhbergeur fournit uniquement laccs Internet (adresse IP, cble, ...).
Le client doit :
- fournir ventuellement le poste serveur (location possible)
- configurer le poste (systme, ...)
- installer le serveur Web
- installer et configurer les sites WebDev (par FTP ou par CD ROM)

Dessin.book Page 127 Vendredi, 22. fvrier 2008 5:53 17

127

Quel type de serveur choisir ?


Le tableau ci-dessous prsente les avantages et inconvnients des diffrents types de
serveurs.
Quel que soit le type de serveur choisi, il est ncessaire de possder une licence de dploiement pour chacun des sites dynamiques WebDev installs sur le serveur.
Chaque serveur hberge un ou plusieurs sites dynamiques WebDev.

Mutualis

Avantages / inconvnients

Quand utiliser
ce serveur ?

Principaux avantages :
- Cot moindre
- Administration du serveur ralise par lhbergeur

Un serveur mutualis est


conseill pour :

Principaux inconvnients :
- Ressources mmoire partages entre les sites prsents sur le serveur.
- En cas de blocage dun site, tous les sites sur
le serveur sont bloqus.
- Utilisation dexcutables autonomes rarement possible.
- Accs non scuris aux donnes :
Des personnes non autorises peuvent avoir
accs aux donnes : lhbergeur, et potentiellement, dautres clients, si le serveur nest
pas correctement configur.
Conseil : cryptez les fichiers de donnes pour
viter toute utilisation non autorise.

Ddi

Principaux avantages :
- Ressources du poste serveur disponibles
pour le(s) site(s) install(s) sur ce poste.
- Gestion du rapatriement des donnes totalement personnalisable :
- rplication par e-mails,
- utilitaire WDREPLIC,
- copie des fichiers par FTP.
Principaux inconvnients :
- Cot important
- Administration du poste serveur entirement
ralise par le client, la plupart du temps.

les sites peu visits (jusqu 20 ou 30 connexions simultanes),


les sites ncessitant
peu de mmoire (pas de
calculs trs importants
effectus sur le serveur),
les sites en phase de dmarrage.

Un serveur ddi est conseill pour :


- les sites trs visits,
- les sites ncessitant
une place disque et mmoire importante,
- les sites grant des donnes sensibles,
- les sites dynamiques.

Partie 7 : Dployer un site

Serveur

Dessin.book Page 128 Vendredi, 22. fvrier 2008 5:53 17

128

Installer un site dynamique WebDev sur


des configurations spcifiques
1. Installation sur un serveur Web sous Windows (NT, 2000 ou suprieur) ou
un serveur Linux

Serveur Windows
Internet
Sont installs sur le serveur :
- le serveur dapplication
WebDev
- le site dynamique WebDev

Partie 7 : Dployer un site

- le serveur Web sous Windows

Internet

Serveur Linux

Sont installs sur le serveur :


- le serveur dapplication
WebDev
- le site dynamique WebDev
- le serveur Web sous Linux

Dessin.book Page 129 Vendredi, 22. fvrier 2008 5:53 17

129

2. Installation sur un serveur Windows, avec un accs Internet par UNIX


Serveur UNIX

Serveur Web Unix


Pages statiques

Internet

Serveur Windows

- Serveur dapplication WebDev


- Sites dynamiques WebDev

1. Ouverture dune page statique. La page statique est prsente sur le serveur UNIX.
2. Lancement du site dynamique WebDev (prsent sur le serveur Windows) par un lien
prsent dans la page HTML statique.
3. Fonctionnement normal du site WebDev.
Remarque : la mme configuration peut tre adopte avec un serveur Linux.

Partie 7 : Dployer un site

- Serveur Web sous Windows

Dessin.book Page 130 Vendredi, 22. fvrier 2008 5:53 17

130

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


Le systme Load Balancer permet de rpartir la charge de connexion sur un site dynamique WebDev sur diffrents postes.

Load
balancer

Internet

Partie 7 : Dployer un site

Serveur

Serveur

Serveur

Serveur de
donnes

Solution 1 : Installation du site dynamique WebDev uniquement sur le serveur de donnes.


Cette solution consiste installer :
- sur chaque serveur WEB, le serveur dapplication WebDev,
- sur le serveur de donnes, les sites dynamiques WebDev et les fichiers de donnes.

Dessin.book Page 131 Vendredi, 22. fvrier 2008 5:53 17

131

Solution 2 : Installation du site dynamique WebDev sur tous les serveurs WEB.

Partie 7 : Dployer un site

Cette solution consiste installer :


- sur chaque serveur WEB, le serveur dapplication WebDev, et les sites dynamiques
WebDev.
- sur le serveur de donnes, les fichiers de donnes des sites dynamiques WebDev.

Dessin.book Page 132 Vendredi, 22. fvrier 2008 5:53 17

Partie 7 : Dployer un site

132

Dessin.book Page 133 Vendredi, 22. fvrier 2008 5:53 17

PARTIE 8

Maintenir un site

Dessin.book Page 134 Vendredi, 22. fvrier 2008 5:53 17

Dessin.book Page 135 Vendredi, 22. fvrier 2008 5:53 17

135

Maintenance dun site dynamique WebDev


Le dploiement dun site dynamique est une tape importante du dveloppement dun site, mais ce nest pas la dernire : la maintenance du site commence ...
La maintenance regroupe :
-

La gestion des sites dynamiques dploys :


Un administrateur WebDev distance peut tre lanc depuis nimporte quel navigateur et nimporte quel poste. Cet administrateur permet de configurer laccs au site
dynamique, de raliser des sauvegardes rgulires par FTP, ...

Lvolution du site dynamique : corrections, nouveauts, ...


La mise jour distance (FTP) ou linstallation par mdia physique permettent de faire
voluer votre site dynamique.

La surveillance de laccs au serveur WEB :


Un robot de surveillance permet de tester rgulirement laccs au serveur Web. En
cas de problme (blocage du serveur et des sites WebDev, ...), un e-mail est automatiquement envoy au responsable du site dynamique. Il est aussi possible de relancer
le moteur WebDev ou de rebooter.

Robot de surveillance
Surveillance des moteurs
WebDev (sur poste de
dveloppement pour un
serveur mutualis)
Mise jour
Mise jour des sites
WebDev depuis le poste
de dveloppement par FTP

Serveur WEB :
- Administrateur WebDev
- Site dynamique WebDev
- Serveur Web

Robot de surveillance
Surveillance du moteur
WebDev (conseill sur un
serveur ddi)

Administrateur
distance
Gestion des sites
dynamiques
WebDev

Partie 8 : Maintenir un site

Poste de
dveloppement

Dessin.book Page 136 Vendredi, 22. fvrier 2008 5:53 17

136

Consulter les statistiques de frquentation


des sites dynamiques
Il est important de disposer de statistiques prcises sur les visites des sites.
Comment savoir qui est venu sur votre site, les pages qui ont t consultes, les applications qui ont t utilises, de quel site vient linternaute ?
WebDev est fourni avec un outil complet de statistiques pour les pages dynamiques :
WDStatistiques. Cet outil peut tre install sur nimporte quel poste.
Quelques exemples de statistiques fournies par WDStatistiques : nombre de connexions
par jour, pages consultes, systmes dexploitation et navigateurs des internautes, ...

Partie 8 : Maintenir un site

Exemples de statistiques de sites dynamiques :

Dessin.book Page 137 Vendredi, 22. fvrier 2008 5:53 17

137

Rcuprer des donnes sur un site


Un site commercial permet aux internautes deffectuer des commandes, des rservations, ...
Pour rcuprer ces informations, vous pouvez utiliser plusieurs mthodes.
Conseil : Traitez les donnes rcupres dans une application de "Back Office" ralise
avec WinDev.

Rcuprer les donnes dun site

1.1 Par emails :


Le principe :

Internaute

- Site dynamique
WebDev
- Serveur dapplication
WebDev
Sige de
la socit

1. Linternaute effectue une commande sur le site.


2. Le site WebDev indique linternaute que la commande a bien t enregistre. Linternaute est inform quil recevra un email de confirmation.
3. Le site WebDev envoie un email au sige de la socit. Cet email contient la commande effectue par linternaute.
4. Un email est envoy linternaute par la socit pour lui indiquer que sa commande
a bien t prise en compte.
Avantages :
- Solution simple mettre en place.
- Ne ncessite aucun excutable supplmentaire sur le serveur.
Inconvnient : Rcupration "simple" des donnes : pas de mise jour des donnes vers
le serveur.

Partie 8 : Maintenir un site

Poste serveur

Dessin.book Page 138 Vendredi, 22. fvrier 2008 5:53 17

138

Cette solution peut tre utilise avec un serveur mutualis.


Cette solution est conseille par exemple pour des sites de commerce lectronique traitant un nombre limit de commandes.

1.2 Par FTP :


WebDev permet deffectuer rgulirement une sauvegarde des fichiers de donnes du
site WebDev. Cette sauvegarde peut tre ensuite transfre par FTP au sige de la socit. Il suffit alors de :
- rcuprer la sauvegarde compresse des fichiers de donnes
- dcompresser les fichiers ( laide dune application WinDev)
- traiter les donnes prsentes dans les fichiers.
Avantages :
- Solution simple mettre en place.
- Ne ncessite aucun excutable supplmentaire chez lhbergeur.
Inconvnient : Tous les fichiers de donnes de lapplication sont rcuprs.
Cette solution peut tre utilise avec un serveur mutualis.

Effectuer une rplication

Partie 8 : Maintenir un site

La rplication permet de maintenir jour des bases de donnes distantes de mme structure. Il est ainsi possible de faire une rplication entre la base de donnes dun site WebDev et la base de donnes de lapplication WinDev au sige de la socit.
Par exemple, une base de donnes de saisie de commandes et de gestion de stocks est
utilise la fois sur un site WebDev (prise de commandes en ligne) et au sige de la socit (prise de commandes tlphonique ou par courrier).
La rplication permet de :
- transmettre les commandes saisies en ligne au sige de la socit (rplication monodirectionnelle)
- transmettre les commandes saisies en ligne au sige de la socit, et de transmettre
la mise jour des stocks au site Internet (rplication bi-directionnelle)
Attention : Il est ncessaire de prendre en compte les contraintes de la rplication ds la
cration du projet. En effet, plusieurs rgles doivent tre respectes lors de la description
de lanalyse et des rubriques des fichiers.
Il y a deux types de rplication :
- la rplication par emails
- la rplication laide de WDReplic

Dessin.book Page 139 Vendredi, 22. fvrier 2008 5:53 17

139

1.1 Rplication par emails


Un moteur demails est install :
- sur le serveur. Ce moteur de-mails est livr avec WebDev.
- au sige de la socit.
A chaque modification de la base de donnes (ajout, modification, suppression), un email
est cr. Cet email contient toutes les informations ncessaires la mise jour de la base
de donnes distante. Lemail est envoy et trait par le moteur de-mails.
Sige de la
socit
- Application
Back Office (WinDev)
- Moteur demails

Transfert de donnes
par e-mails

Serveur Web

Avantages :
Mise jour des donnes possible :
- du serveur vers le sige de la socit.
- du sige vers le serveur.
A prvoir :
Moteur demails en tche de fond sur le serveur et sur le poste rceptionnant les emails
au sige de la socit.
Cette solution est conseille pour un site install sur un serveur ddi (il nest pas toujours possible de lancer un excutable en permanence sur un serveur mutualis).

Partie 8 : Maintenir un site

- Application Front Office


(WebDev)
- Moteur demails (livr
avec le serveur dapplication WebDev)

Dessin.book Page 140 Vendredi, 22. fvrier 2008 5:53 17

140

2.2 Rplication laide de WDREPLIC


WDREPLIC est un utilitaire permettant de mettre jour des bases de donnes distantes.
Cet utilitaire est livr avec WebDev et WinDev.

Sige de la
socit
- Application Back
Office (WinDev)
- WDREPLIC

Transfert de donnes

Serveur Web
Rpertoire de
transfert sur le
serveur Web

Partie 8 : Maintenir un site

- Application Front
Office (WebDev)
- WDREPLIC

Avantages :
Mise jour des donnes possible :
- du serveur vers le sige de la socit.
- du sige vers le serveur.
A prvoir :
- Lancement rgulier de WDREPLIC sur le serveur pour effectuer la rplication (par un
traitement BATCH par exemple).
- Ncessite un accs direct ainsi que des droits de lecture et dcriture sur un rpertoire
de transfert prsent sur le serveur.
Cette solution est conseille pour une application installe sur un serveur ddi sur lequel un accs direct est possible.

Dessin.book Page 141 Vendredi, 22. fvrier 2008 5:53 17

PARTIE 9

Annexes

Dessin.book Page 142 Vendredi, 22. fvrier 2008 5:53 17

Dessin.book Page 143 Vendredi, 22. fvrier 2008 5:53 17

143

Principales nouveauts de WebDev 12


Lisez cette partie si vous connaissez WebDev 11.
WebDev 12 prsente de nombreuses nouveauts, aussi bien pour dvelopper des sites
WebDev dynamiques que pour dployer des sites WebDev statiques.
La compatibilit avec WinDev 12 et WinDev Mobile 12 est totale.
Editeur de projet :
Nouveau RAD (Rapid Application Development)
Composant interne
Editeur danalyse :
Nom des rubriques et des fichiers multilangue
Groupes de lanalyse manipulables par programmation

Editeur de code :
Dbogage disponible en mode AWP.
Dbogage dun site prsent sur un serveur.
Dbogage dune session lance sur un serveur.
Go de procdure globale.
Volet Trace du dbogueur pour afficher le rsultat de la trace lors du dernier test.
Itrations dans les tests automatiques.
Navigateur :
Assistant daide au rfrencement.
Gnration automatique dun fichier SiteMaps.
Hyper File Client / Serveur :
Sauvegarde chaud.
Tche programme sur le serveur
Triggers serveur.

Partie 9 : Annexes

Editeur de pages :
Nouveau look des menus, avec de nouvelles options de personnalisation
Champ onglet : permet de grer des "plans" facilement. Il est possible de prsenter un produit avec plusieurs onglets (prsentation, dtail, technique, tarif).
Recherche des styles inutiliss.
Nouveau catalogue dimages.
Refactoring dune slection de champs en modle de champs.
Modle de modles de champs.
Modle de modles de fentres.
Hritage de styles.

Dessin.book Page 144 Vendredi, 22. fvrier 2008 5:53 17

144

Gestionnaire de Sources :
Extraction automatique de la page ds sa modification.
Gestion des droits.
Gestion du changement physique de machine.
Masquage des fichiers de lanalyse.
Possibilit de traiter les tches et les bugs lors de la r-intgration.
Programmation :
Fonctions HTMLVersTexte et HTMLVersRTF
Proprits HTMLAvant et HTMLAprs
Proprits CouleurFond, Bulle, Etat
Nouvelles proprits sur la police (..PoliceGras, ..PoliceItalique, ...)
Nouvelles proprits CSS natives (opacit, alignement, largeur, ...)
Gestion du GFI

Partie 9 : Annexes

PHP :
Ajax est disponible en PHP
Nouvelles fonctions

Dessin.book Page 145 Vendredi, 22. fvrier 2008 5:53 17

145

Vous connaissez dj WinDev


-

WebDev permet de crer des pages alors que WinDev permet de crer des fentres.

Diffrents types de code peuvent tre saisis : un code WLangage sexcutant sur le serveur, un code WLangage sexcutant sur le navigateur, et un code Javascript sexcutant sur le navigateur.
Si vous crez une page PHP, un code supplmentaire apparat : un code PHP sexcutant sur le serveur.

De nouvelles fonctions du WLangage spcifiques Internet et Intranet sont disponibles (la liste de ces fonctions est donne page 146).

Certaines fonctions du WLangage inadaptes Internet et Intranet nexistent plus.

Certaines fonctions du WLangage sont uniquement utilisables dans un traitement excutable en code serveur.

Certaines fonctions du WLangage sont uniquement utilisables dans un traitement excutable en code navigateur.

De nouveaux types de champs plus spcifiques une application Internet / Intranet


sont disponibles :

Champ daffichage format


Champ Applet Java
Champ Cellule
Champ Flash
Champ Image clicable (Map Area)
Champ IFrame
Champ Libell HTML
Champ Lien
Champ Ligne
Champ Page Interne
Champ Rglette
Champ Tableau HTML
Champ Vignette

Certains types de champs inutiles sur Internet ont disparu : ascenseur, potentiomtre,
ActiveX, Objet OLE, Onglet, spin, ...

Partie 9 : Annexes

Ce qui change dans WebDev :

Dessin.book Page 146 Vendredi, 22. fvrier 2008 5:53 17

146

Fonctions du WLangage spcifiques


WebDev 12
(Dtail dans laide en ligne du WLangage)

Partie 9 : Annexes

AJAXAnnuleAppelAsynchrone

Annule l'excution automatique de la procdure navigateur appele par la


fonction AJAXExcuteAsynchrone.
AJAXAppelAsynchroneEnCours Permet de savoir si une procdure serveur appele par la fonction
AJAXExcuteAsynchrone est en cours dexcution.
AJAXDisponible
Permet de savoir si la technologie AJAX est utilisable dans le navigateur en
cours.
AJAXExcute
Excute une procdure serveur sans rafrachir la page. Cette fonction est
bloquante. Tant que le rsultat de la procdure excute n'est pas rcupr, aucun autre traitement n'est excut.
AJAXExcuteAsynchrone
Excute une procdure serveur sans rafrachir la page. Cette fonction n'est
pas bloquante. Les autres traitements continuent de s'excuter normalement (que le rsultat de la procdure excute soit rcupr ou non).
AjouteFavori
Ajoute une adresse Internet dans la liste des favoris de l'internaute.
ASPAffiche
Appelle un script ASP externe et renvoie la page rsultat dans la fentre en
cours du navigateur.
ASPExcute
Appelle un script externe .asp et renvoie le rsultat dans une chane. Une
requte http est effectue : il est possible d'utiliser soit une mthode POST,
soit une mthode GET.
ChangeAction
Permet de spcifier l'action effectue en cas de dsynchronisation entre la
page HTML affiche dans le navigateur et le contexte de page sur le serveur.
ChangeDestination
Change la frame de destination de la page.
CheminNavigationAjouteLien
Ajoute un lien dans un chemin de navigation.
CheminNavigationInsreLien
Insre 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
Dfinit le fonctionnement des contextes AWP.
ConnexionOccurrence
Renvoie le nombre d'instances du site WebDev en cours d'excution sur le
serveur.
ContexteExiste
Permet de savoir si un contexte de page existe sur le serveur.
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
Rcupre la valeur d'un cookie enregistr sur le poste de linternaute.
DclareContexteAWP
Dclarer une liste de variables dont la valeur sera persistante entre les affichages successifs des pages AWP
EmailEtat
Renvoie l'tat d'un e-mail envoy par une session SMTP ouverte en mode
asynchrone.
EmailOuvreMessagerie
Ouvre le logiciel de messagerie par dfaut de l'internaute sur le poste navigateur.

Dessin.book Page 147 Vendredi, 22. fvrier 2008 5:53 17

FichierAffiche
FichierVersPage

FramesetActualise
FramesetAffiche
FramesetUtilise
fRepWeb
grTailleImage
ImagePosX
ImagePosY
ImageZone
JSMthode
JSProprit
NavigateurAdresseIP
NavigateurFerme
NavigateurNom
NavigateurOuvre
PageActiveGFI
PageActualise
PageAdresse
PageAffiche
PageCourante
PageExiste
PageInitialisation
PageParamtre
PagePosition
PagePrcdente
PageSemiDynamiqueAffiche
PageTauxGFI
PageUtilise

Renvoie un fichier spcifique sur le navigateur.


Initialise automatiquement les champs d'une page avec les valeurs des rubriques associes dans l'enregistrement en cours (charg en mmoire) du
fichier Hyper File.
Actualise un frameset affich dans le navigateur de l'internaute partir du
contexte prsent sur le serveur.
Affiche un frameset WebDev dans le navigateur de l'internaute.
Affiche un frameset WebDev dans le navigateur de l'internaute et ferme
tous les contextes de pages et de frameset en cours.
Renvoie le nom physique complet du rpertoire contenant les images, les
fichiers Javascript et Java du site WebDev.
Dfinit la taille de l'image contenant le graphe.
Renvoie la position horizontale du curseur de souris par rapport au champ
image considr.
Renvoie la position verticale du curseur de souris par rapport au champ
image considr.
Renvoie le numro de la zone de limage clique par linternaute (image clicable uniquement).
Permet dexcuter une mthode Javascript sur un lment de la page en
cours.
Permet de manipuler des fonctionnalits spcifiques sur des objets de la
page en cours.
Renvoie l'adresse IP du poste de l'Internaute connect au site WebDev.
Ferme la fentre en cours du navigateur et stoppe l'excution du code en
cours.
Renvoie le nom du navigateur de linternaute.
Ouvre une nouvelle fentre du navigateur.
Active ou dsactive leffet appliqu par WebDev sur les pages inactives lors
de laffichage dune page modale.
Actualise une page affiche dans le navigateur de l'internaute partir du
contexte prsent sur le serveur.
Permet dobtenir ladresse Internet dune page WebDev.
Affiche une page dans le navigateur de linternaute.
Renvoie le nom de la page contenant le code WLangage en cours d'excution.
Vrifie si la page spcifie est actuellement affiche dans le navigateur de
l'internaute.
Remet zro (ou non) les champs de la page en cours et lance les traitements d'initialisation des champs.
Renvoie la valeur d'un paramtre pass la page en cours.
Fait dfiler une page pour positionner un champ dans la partie visible de la
page (le plus haut) dans le navigateur.
Renvoie le nom de la page prcdente.
Affiche une page semi-dynamique dans le navigateur de l'internaute partir d'une page WebDev dynamique ou statique.
Permet de dfinir le taux de grisage des pages inactives.
Affiche une page WebDev dans le navigateur de l'internaute et ferme tous
les contextes de pages en cours.

Partie 9 : Annexes

147

Dessin.book Page 148 Vendredi, 22. fvrier 2008 5:53 17

148

PageValide
PageVersASP
PageVersEmail
PageVersFichier
PageVersJSP
PageVersPHP
PHPAffiche
PHPExcute

RpertoireWeb

ScriptAffiche
ScriptExcute

SiteAdresse
SiteDynamiqueAffiche

Partie 9 : Annexes

SSLActive
SupprimeContexteAWP
UploadCopieFichier
UploadNomFichier

Valide la page spcifie et lance l'excution d'un bouton.


Envoie les donnes dune page actuellement affiche sous le navigateur
vers un serveur ASP.
Envoie les donnes dune page actuellement affiche sous le navigateur
par un email.
Initialise automatiquement la valeur mmoire des rubriques d'un fichier
avec la valeur des champs de la page.
Envoie les donnes dune page actuellement affiche sous le navigateur
vers un serveur JSP.
Envoie les donnes dune page actuellement affiche sous le navigateur
vers un serveur PHP.
Appelle un script PHP externe et renvoie la page rsultat dans la fentre en
cours du navigateur.
Appelle un script externe .php et renvoie le rsultat dans une chane. Une
requte http est effectue : il est possible d'utiliser soit une mthode POST,
soit une mthode GET.
Renvoie le chemin du rpertoire contenant les images, les fichiers Javascript, les fichiers applet Java, les autres fichiers accessibles depuis le
navigateur, ...
Appelle un script externe (par exemple .php, .asp, .mhtml ou .mht) et renvoie la page rsultat dans la fentre en cours du navigateur.
Appelle un script externe (par exemple .php ou .asp) et renvoie le rsultat
dans une chane. Une requte http est effectue : il est possible d'utiliser
soit une mthode POST, soit une mthode GET.
Renvoie ladresse Internet de connexion un site dynamique WebDev situ
sur le mme serveur.
Affiche un site dynamique (cr avec WebDev) dans le navigateur de l'internaute partir d'une page WebDev dynamique ou statique.
Permet d'activer ou de dsactiver le mode scuris SSL.
Supprime du contexte AWP une variable ajoute par DclareContexteAWP
Enregistre sur le serveur un fichier "upload" par l'internaute.
Connatre le nom d'un fichier "upload" par l'internaute.

Dessin.book Page 149 Vendredi, 22. fvrier 2008 5:53 17

149

Composants livrs avec WebDev

Nom du composant

Description

Demande de documentation

Permet de grer une demande de documentation (brochure,


catalogue, ...) dans un site WebDev.

Diagramme de Gantt

Permet dafficher un diagramme de GANTT dans une table


mmoire ou dans une page intgre au composant.

Login

Centralise la gestion des utilisateurs et de leurs mots de passe.

ImagePass

Permet de gnrer une image code en fonction des paramtres donns.

Moteur de Recherche

Permet dindexer des documents (texte, vidos, sons, ) selon un identifiant gr par lutilisateur (pouvant provenir dun
fichier de donnes Hyper File, ) et des mots-cls (texte contenu dans un document, nom de fichier, etc).
Permet galement deffectuer des recherches sur les documents ainsi indexs et de gnrer des statistiques dindexation (mots-cls inutiliss, nombre de documents par motscls, etc).
Attention : Les documents ne sont pas stocks. Seuls les
mots-cls permettant d'indexer les documents sont enregistrs dans les fichiers de donnes du composant.

Panier

Permet de grer facilement un panier de commandes dans


un site WebDev.

PayBox

Permet de mettre en place un systme de paiement scuris


en utilisant la solution de la socit PayBox.
Attention : ceci nest pas une recommandation de PC SOFT
pour lutilisation de la solution de paiement scuris de la socit PayBox.

Deux sous-rpertoires sont spcifiques chacun de ces exemples :


- le sous-rpertoire "<NomDuComposant>-Exemple" contient un exemple de projet utilisant le composant.
- le sous-rpertoire "<NomDuComposant>-Source" contient le projet du composant.
Des composants supplmentaires seront livrs avec la Lettre du Support Technique (LST)
ou disponibles sur notre site (www.pcsoft.fr).

Partie 9 : Annexes

WebDev est livr en standard avec de nombreux composants. Ces composants sont livrs
avec leurs sources et avec un exemple dutilisation.
Voici la liste des principaux composant livrs avec WebDev :

Dessin.book Page 150 Vendredi, 22. fvrier 2008 5:53 17

150

Exemples livrs avec WebDev


Les exemples livrs avec WebDev prsentent de manire didactique les diffrentes fonctionnalits de WebDev.
Leur code source est comment et dtaill.
Ces exemples sont prsents dans le sous-rpertoire "Exemples" du rpertoire d'installation de WebDev et peuvent tre ouverts directement depuis le volet "Assistants, Exemples
et Composants".
Diffrents types d'exemples sont livrs avec WebDev :
- exemples complets : ces exemples correspondent des sites complets, qui peuvent
tre utiliss sans adaptation.
- exemples didactiques : ces exemples illustrent une fonctionnalit spcifique.

Partie 9 : Annexes

Exemples complets
Nom de lexemple

Description

Hawaii

Gestion de supermarch en ligne.


Permet de visualiser, rechercher des produits dans diffrentes boutiques. Ces produits peuvent tre achets
et stocks dans un panier virtuel jusquau paiement.

NetAnnonces

Gestion de petites annonces.


Permet des recherches multicritres, ajout, modification et suppression d'annonces, ainsi qu'une gestion
d'utilisateurs.

Rewali

Achat de voyages en ligne.


Permet de slectionner un voyage, de faire des rservations, ...

SAV

Gestion de dysfonctionnements.
Permet de crer, modifier ou supprimer des suggestions ou des dysfonctionnements. Permet galement la
recherche et la consultation des informations enregistres.

SAV_Php

Gestion de dysfonctionnements en PHP.


Permet de crer, modifier ou supprimer des suggestions ou des dysfonctionnements. Permet galement la
recherche et la consultation des informations enregistres.

Dessin.book Page 151 Vendredi, 22. fvrier 2008 5:53 17

WebDoc

Gestion Electronique de Documents (GED).


Utilise le composant Moteur de recherche pour effectuer des recherches par mot-cls.

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 donnes de plus d'1


million d'enregistrements. Il permet de visualiser, de rechercher et de commander des maquettes.
Une fois la commande tablie, il est possible d'imprimer
la facture au format PDF ou dutiliser le module PayBox
de paiement scuris

WebParc

Cette application Web simule une gestion de parc informatique.

WW_Blog_AWP

Cet exemple est un site de gestion de blogs.


Cet exemple est bas sur une gnration AWP, ce qui
permet entre autres de pouvoir rfrencer le site dans
tous 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 des
images, des citations, etc...
De plus, chaque blog peut tre export en RSS.

WW_Camembert

Cet exemple explique comment utiliser le grapheur livr


en standard avec WebDev et associer des actions au
clic sur des parties dynamiques du graphe.

WW_Editeur_HTML

Cet exemple est dvelopp pour Microsoft Internet Explorer 5.5 (ou version ultrieure). Il utilise les fonctionnalits d'dition HTML d'Internet Explorer.

WW_Emprunt

Cet exemple permet de simuler des emprunts et notamment de calculer :


- le montant des mensualits partir du montant emprunt donn
- le montant empruntable partir d'une mensualit donne
- le rapport d'un placement partir d'un apport mensuel
Le tableau d'amortissement est affich pour chacun
des cas. Ce tableau peut tre dit dans un fichier au
format PDF (fonctionnalit standard de WebDev).

Partie 9 : Annexes

151

Dessin.book Page 152 Vendredi, 22. fvrier 2008 5:53 17

Partie 9 : Annexes

152

WW_Forum_Classic

Cet exemple propose les fonctionnalits principales


d'un forum utilisateur (cration de forums, de sujets (ou
topics) et de messages, modration par un administrateur, etc...).

WW_Images

Cet exemple est une galerie d'images et de photographies simplifie.


Les images contenues dans le rpertoire "Data" du rpertoire "Exe" du projet sont affiches en miniature
dans une liste horizontale dfilante. Le dfilement des
images est ralis grce AJAX.

WW_Images_php

Cet exemple est un site Php. Il s'agit d'une galerie d'images et de photographies simplifie.

WW_Planning

Cet exemple permet d'afficher de faon dynamique les


tches des diffrents collaborateurs.
Il est possible d'ajouter, de modifier ou de supprimer
des tches dans le planning, simplement en cliquant
sur les lments du planning.
Toutes les manipulations sont effectues grce AJAX.

WW_SiteMarchand_php

Cet exemple de site marchand simplifi est un site Php


ralis avec WebDev. Il permet de visualiser, de rechercher et de commander des maquettes.

WW_TraceCourbe

Cet exemple permet de dessiner des graphes.

WW_VitrineAWP

Prsente le mixage entre un site dynamique WebDev


classique et un site AWP WebDev.
Les pages AWP du site seront rfrencs par les moteurs de recherche. Elles contiennent les produits classs par rayon.
Les pages dynamiques permettent de grer les prises
de commandes et les informations sur les clients du site. Ces informations nont pas tre rfrences par
les moteurs de recherche.

WW_WebBourse

Cet exemple explique comment utiliser le grapheur livr


en standard avec WebDev pour tracer des graphes
boursiers.

Dessin.book Page 153 Vendredi, 22. fvrier 2008 5:53 17

153

WW_WebChat

WW_WebChat est un site de discussion en ligne et en


direct.
Plusieurs personnes peuvent se connecter au site et
discuter avec les autres personnes dj prsentes.
Tous les traitements effectus (envoi de messages,
etc.) sont grs grce AJAX. Il n'y a donc aucun effet
de rafraichissement dans les pages.

WW_Zoom

Cet exemple explique comment manipuler les images


en code navigateur : zoomer, se dplacer, grer le clic
sur une carte. (ici une carte Michelin)

Nom de lexemple

Description

WW_ChangementCSS

Cet exemple explique comment modifier la feuille de


styles d'une page WebDev par programmation. Le changement de feuille de styles s'effectue en code navigateur.
Ce principe peut tre utile par exemple pour changer
l'interface d'un site en fonction des prfrences de l'internaute.

WW_FlashParametrable

Cet exemple fournit sous forme de superchamps des


bandeaux Flash personnalisables.

WW_Fraimes

Cet exemple montre comment modifier deux frames diffrentes, sans rafficher tout le frameset.

WW_MapArea

Cet exemple a pour but de prsenter l'utilisation des


map area en programmation ou par action prdfinie.

WW_MiseEnEvidence

Cet exemple montre comment utiliser le CSS pour encadrer et mettre en vidence des mots dans un libell
HTML (ou un champ HTML).

WW_ReassortXML

Prsente lutilisation de fichiers XML.


Permet de grer des commandes, modifier les quantits commandes, valider et enregistrer des commandes au format XML.

Partie 9 : Annexes

Exemples didactiques

Dessin.book Page 154 Vendredi, 22. fvrier 2008 5:53 17

Partie 9 : Annexes

154

WW_RegletteAWP

Cet exemple montre comment grer une rglette dans


une page AWP.
La rglette est gnre en WLangage grce diverses
options (nombre de rsultats par page de recherche,
nombre total de rsultat, ...).

WW_TexteDefilant

Cet exemple propose l'utilisation du superchamp TexteDefilant. Ce superchamp permet de faire dfiler du texte dans un cadre de votre page

WWConnect

Ce site permet de dtecter la fermeture d'un navigateur


client afin d'enregistrer, par exemple, sa dconnexion
ou d'effectuer des oprations spcifiques.

WWDialog

Cet exemple montre un dialogue entre deux navigateurs distincts. Il permet d'ouvrir une nouvelle page
dans un nouveau navigateur et de rcuprer des valeurs modifies.

WWDiapo

Ce site est un diaporama de photographies du Cantal


(15).

WWDload

Ce site permet de proposer des fichiers en tlchargement aux utilisateurs en fonction du groupe auquel ils
appartiennent.

WWEnvironnement

Ce site permet d'utiliser les variables d'environnement


afin de rcuprer certaines informations sur les internautes.

WWFlash

Ce site permet d'intgrer un menu droulant Flash qui


interagit avec WebDev. Ce site permet donc d'utiliser
des animations Flash dans un site WebDev.
Ce site montre aussi l'interaction avec une animation
Flash.

WWForm

Cet exemple permet de montrer comment changer dynamiquement l'apparence d'un formulaire contenu
dans une page Web.

WWTabulation

Ce site ralis permet d'intercepter l'appui sur la touche


[TABULATION] pour insrer une tabulation dans un
champ de saisie.

WWTouche

Ce programme permet de dtecter la touche frappe au


clavier (vnement OnKeyDown) sous Internet Explorer.
Cette fonctionnalit est mise en place dans un jeu de
mots-croiss.

Dessin.book Page 155 Vendredi, 22. fvrier 2008 5:53 17

155

WWZone

Ce programme ralis avec WebDev explique les cas


les plus frquents dutilisation de zones rptes.

WWZRGraphe

Ce programme ralis avec WebDev montre comment


grer des zones rptes contenant des graphes dynamiques.

Partie 9 : Annexes

Des exemples supplmentaires sont livrs avec la Lettre du Support Technique (LST) ou
sont disponibles sur notre site (www.pcsoft.fr).