Vous êtes sur la page 1sur 69

Guide complet - Webdev

23 avril 2008

Boonaert Nicolas
nicolas.boonaert AT NOSPAM supinfo DOT com

Blog : http://blog.boonaert.net
Relecture par Romain VALERI

Boonaert Nicolas http://blog.boonaert.net

1 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

SOMMAIRE
1. Prsentation gnrale ................................................................................................................ 4 1.1. Prsentation de larticle ................................................................................................................... 4 1.1.1. Prsentation du projet Spilo....................................................................................................... 4 1.1.2. Prsentation du projet de stage .................................................................................................. 5 Contexte de ralisation........................................................................................................................... 5 Objectifs .................................................................................................................................................. 5 Rle dans le projet .................................................................................................................................. 5 1.2. Prsentation de loutil utilis ........................................................................................................... 6 1.2.1. Cible et march ............................................................................................................................ 6 1.2.2. Possibilits.................................................................................................................................... 6 1.2.3. Langage utilis ............................................................................................................................. 7 2. Ralisation du site internet ........................................................................................................ 8 2.1. Cration du projet ............................................................................................................................ 8 2.1.1. Types de projets ........................................................................................................................... 9 Dynamique Webdev ............................................................................................................................... 9 Semi dynamique ..................................................................................................................................... 9 Statique................................................................................................................................................... 9 Dynamique AWP ..................................................................................................................................... 9 Dynamique PHP ...................................................................................................................................... 9 2.1.2. Bases de donnes et accs natifs ............................................................................................... 10 2.1.3. Autres informations de projet .................................................................................................... 13 2.2. Gestion du projet ........................................................................................................................... 15 2.2.1. Travailler en quipe : le GDS ...................................................................................................... 15 Ajout du projet utilisant le GDS ........................................................................................................... 16 2.2.2. Documentation .......................................................................................................................... 17 2.2.3. Architecture et conception......................................................................................................... 17 2.3. Conception de la base de donnes ................................................................................................ 18 2.3.1. Cration de lanalyse.................................................................................................................. 18 Ajout dune analyse dans un projet existant ........................................................................................ 18 Configuration de lanalyse .................................................................................................................... 19 2.3.2. Cration des tables .................................................................................................................... 20 2.3.3. Cration des liaisons .................................................................................................................. 21 2.3.4. Importation dune analyse existante ......................................................................................... 23 2.3.5. Cration des fichiers physiques .................................................................................................. 23 2.4. Cration des pages ......................................................................................................................... 24 2.4.1. Cration dune page basique ..................................................................................................... 24 Prsentation des composants .............................................................................................................. 25 Ajout de composants ............................................................................................................................ 26 Modification des proprits des composants ...................................................................................... 27 Exploitation de ces composants ........................................................................................................... 32 2.4.2. Cration dun modle................................................................................................................. 34 2.4.3. Utilisation du modle au sein des pages.................................................................................... 35

Boonaert Nicolas http://blog.boonaert.net

2 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

2.5. Dveloppement avanc de pages .................................................................................................. 37 2.5.1. Code serveur, navigateur et AJAX .............................................................................................. 37 Code serveur ......................................................................................................................................... 37 Code navigateur.................................................................................................................................... 37 Utilisation dAJAX.................................................................................................................................. 38 2.5.2. Procdures ................................................................................................................................. 41 2.6. Interaction avec la base de donnes.............................................................................................. 43 2.6.1. Utilisation des fonctions HyperFile ............................................................................................ 43 Recherche dans un fichier de donnes................................................................................................. 43 Recherche avance dans un fichier de donnes .................................................................................. 44 Ajout dans un fichier de donnes ......................................................................................................... 45 Modification des donnes .................................................................................................................... 45 Autres actions ....................................................................................................................................... 45 2.6.2. Utilisation des requtes ............................................................................................................. 46 Requte de base ................................................................................................................................... 46 Requte volue et paramtre .......................................................................................................... 49 Requte de mise jour de donnes ..................................................................................................... 52 2.6.3. Utilisation de requtes SQL composes ..................................................................................... 54 2.6.4. Liaison des champs aux donnes ............................................................................................... 56 Requte intgre .................................................................................................................................. 58 2.7. Gnration des tats ...................................................................................................................... 60 2.7.1. Etat simple ................................................................................................................................. 60 2.7.2. Etat paramtr........................................................................................................................... 63 2.7.3. Etat reposant sur la base de donnes ........................................................................................ 64 2.8. Dploiement du site ....................................................................................................................... 65

2.9. Mise jour du site .......................................................................................................................... 66 2.9.1. Mise jour de la base de donnes ............................................................................................. 66 3. 4. 4.1. 4.2. Rflexion sur loutil utilis ........................................................................................................ 68 Conclusion ............................................................................................................................... 69 Une base commune rutilisable .................................................................................................... 69 Une ouverture vers dautres technologies .................................................................................... 69

Boonaert Nicolas http://blog.boonaert.net

3 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

1. Prsentation gnrale 1.1. Prsentation de larticle


Cet article traite principalement de la cration dun site internet dynamique laide de Webdev. Les technologies mises en uvre ne feront intervenir que des pages dynamiques Webdev afin de ne pas traiter de cas spcifiques lis dautres types de page. Cet article couvre galement les diffrentes tapes de cration de chacun des lments ainsi que leur exploitation, avec une analyse des possibilits offertes par Webdev tout en prsentant leurs avantages et leurs inconvnients. Enfin dans cet article figurent de nombreuses astuces au sein de cet diteur. Mais tout dabord il faut dcouvrir le projet sur lequel jai eu travailler pendant la priode de stage pour montrer un cas concret de ralisation et lenvironnement du projet de dveloppement, cependant certains lments du projet initial ne peuvent pas tre diffuss dans cet article pour des raisons de confidentialit cest pourquoi jai fait le choix dutiliser des exemples simplifis et accessibles, ce qui amliore galement la comprhension gnrale. Cet article naborde pas le dveloppement PHP laide de Webdev, lutilisation du RAD ou RID intgrs Webdev. 1.1.1. Prsentation du projet Spilo Le projet Spilo est un projet de la socit PC Logiciels. Destin tre utilis sur Internet, cest avant tout une plateforme regroupant plusieurs types dutilisateurs. Dun ct le professionnel qui souhaite se rfrencer dans cet annuaire des vnements et lieux touristiques, et de lautre un particulier, visiteur du site gnral ou du site thmatique profitant ainsi des donnes et participant la vie de la communaut.

http://spileo.fr Site gnral, communautaire Grand public

http://spileopro.com Site pour les professionnels


Base de donnes commune Client/Serveur

Site thmatique, communautaire

Boonaert Nicolas http://blog.boonaert.net

4 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

1.1.2. Prsentation du projet de stage Contexte de ralisation Le projet de stage est un site dynamique qui repose sur une base de donnes que lon a conu lors du projet Spilo. Ce site est un site thmatique qui doit pouvoir facilement tre customis pour changer de thme tant dans sa forme que dans le fond. Il tait donc important de conserver cet impratif en tte lors de lensemble du dveloppement. Ce projet utilisant une plateforme commune dautres sites, il tait important de travailler en quipe en se tenant inform tout au long du processus de dveloppement et dans lvolution de la plateforme. Objectifs Les objectifs taient simples et complets, raliser le site dans le temps imparti (soit les 3 mois de stage) en proposant une rvision du travail dj effectu. Ainsi raliser une analyse de la plateforme Spilo, et proposer des amliorations. Rle dans le projet Ainsi, bien que la tche principale qui mtait confie tait le dveloppement du site thmatique, jai d participer la conception et lamlioration de la plateforme commune aux autres sites. Il mtait galement demand de fiabiliser et doptimiser le site dans son ergonomie et dans linterfaage avec lAPI Virtual Earth que lon met en uvre dans lensemble des sites tout en prenant en compte le besoin en scurit de linformation. Ce point ne sera pas abord pour cause de confidentialit.

Boonaert Nicolas http://blog.boonaert.net

5 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

1.2. Prsentation de loutil utilis


Webdev peut tre prsent comme un EDI (Environnement de Dveloppement Intgr) mme si certains prfre le terme AGL (Atelier de Gnie Logiciel) pour ce logiciel. Webdev est un environnement qui intgre de nombreuses fonctionnalits qui aident le dveloppeur, le chef de projet, le dcideur mais aussi lensemble des personnes qui participent au projet. Il permet de raliser des sites web sous plusieurs formes (qui seront dcrites plus loin dans ce document) mais surtout il offre la possibilit de se concentrer sur les fonctionnalits offertes lutilisateur final, la prsentation des informations, en faisant abstraction de laspect purement technique. Il reste cependant trs important de matriser les technologies sous-jacentes notamment pour optimiser les traitements ou rsoudre des problmes qui peuvent survenir. 1.2.1. Cible et march Webdev ne se positionne pas vritablement face dautres gros diteurs de lindustrie, autrement dit il ne faut clairement pas le voir face des outils comme Visual Studio de Microsoft ou dautres outils comme Eclipse, Netbeans, etc. Loutil existe maintenant depuis de nombreuses annes et cible de prfrence les TPE-PME qui souhaitent pouvoir rpondre rapidement aux besoins de leurs clients. Loutil, principalement en franais, se dcline en version anglaise galement et annonce un nombre de licences de plus de 100 000 utilisateurs (Windev/Webdev/Windev Mobile runis) avec une prsence sur le march franais qui nest pas sans marquer celui de lemploi. 1.2.2. Possibilits Webdev est principalement orient pour des applications web, autrement dit des sites statiques, des sites dynamiques ou des composants rutilisables dans dautres applications web. Il intgre les dernires volutions en terme de technologies internet avec pour exemple le plus mis en avant sur la toile, la technologie AJAX (Asynchronous JavaScript And XML) prsente depuis la version 10 datant de 2006. Toutes les technologies exploites ou exploitables au sein de Webdev se veulent toujours relativement simples mettre en uvre. PC Soft garde cette volont de donner accs ces technologies sans tre oblig de saisir lintgralit de cette dernire. Bien entendu, il est important et utile de connatre les mcanismes mis en uvre pour vritablement saisir le fonctionnement complet, cest dailleurs ce qui fait souvent la diffrence avec cet outil.

Boonaert Nicolas http://blog.boonaert.net

6 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

1.2.3. Langage utilis Le langage utilis au sein de Webdev est principalement le W-Langage. Ce langage tonne trs souvent de par son aspect algorithmique puisquon peut utiliser des instructions ou fonctions directement en franais (ou en anglais). Ce W-Langage est utilis pour le code cot serveur ou navigateur (la diffrence sera explique plus en dtail dans la suite). Il permet bien entendu de dvelopper orient objet mme si ce nest pas lutilisation premire dans la socit o le stage sest droul. Dans la suite du document, vous verrez pourquoi cette notion est abstraite dans le dveloppement. Voici quelques exemples de W-Langage Dclaration de variables :
nMonEntier est un entier sMaChaine est une chane = "valeur d'initialisation" bMonBoolen est un boolen

Webdev, dans la charte de programmation par dfaut, prfixe automatiquement les variables. On peut galement noter la prsence de laide la saisie dans lensemble du code.

Un exemple de code mettant en uvre une boucle et une condition :


POUR i = 2 A 20 SI (i modulo 2) <> 1 ALORS //Si c'est un nombre paire Info("Ma variable de boucle = " + i) FIN FIN

Ce langage est directement comprhensible et ne ncessite que trs rarement des commentaires, ce qui simplifie laccessibilit et la maintenabilit du code.

Du ct navigateur, on peut aussi utiliser du JavaScript au sein mme de Webdev pour le code navigateur. Il est par ailleurs possible de faire interagir du code JavaScript du code W-Langage et donc utiliser les librairies externes habituelles.

Boonaert Nicolas http://blog.boonaert.net

7 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

2. Ralisation du site Internet 2.1. Cration du projet


Pour crer le projet, il est possible dutiliser plusieurs mthodes : Barre de menu : Fichier > Nouveau Barre doutils principale :

Le raccourci clavier : CTRL + N. Dans tous les cas, on obtient la fentre suivante regroupant toutes les possibilits de cration dlments. Cest travers cette fentre que lon pourra ensuite crer une nouvelle page, un nouvel tat ou tout autre lment du projet.

Cette fentre regroupe les types dlments par couleur pour aider rapidement saisir la nature de ces derniers, ainsi : Jaune : Projet ; Vert : Conception et Schma (UML etc) ; Bleu : Elment de projet ; Rouge : Analyse et base de donnes. Les lments en particuliers seront dcrits dans leur contexte dutilisation dans la suite du document.

Boonaert Nicolas http://blog.boonaert.net

8 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

2.1.1. Types de projets A travers cette fentre on observe que lon peut crer diffrents types de projets. Le type de projet est prendre en considration puisquil va imposer un certain nombre de restrictions. Dynamique Webdev Projet par dfaut, il inclut lensemble des fonctionnalits et exploite parfaitement lintgralit des composants. Cest le type de projet le plus complet et le plus fonctionnel, il peut intgrer des pages statiques, dynamiques ou semi-dynamiques qui sappuieront au besoin sur une base de donnes. Certains inconvnients sont tout de mme prsents, il est en effet important de les signaler : les sites dynamique Webdev doivent fonctionner sur un moteur de dploiement dvelopp par PC Soft lors de la mise en production. Ces sites dynamiques causent galement quelques difficults pour tre indexs et rfrencs efficacement dans les moteurs de recherches. Semi dynamique Ce type de projet pourra contenir des pages semi-dynamiques et statiques. Laccs la base de donnes sur ces pages sera donc plus limit (une seule table accessible par page). Comme le projet dynamique, ce type de projet peut poser des problmes pour le rfrencement et ncessite le moteur Webdev pour fonctionner en production. Statique Ce type de projet est utile pour des sites de prsence Internet, il sagit ni plus ni moins de pages HTML statiques. Ces pages nont donc pas de possibilits dynamiques (pas daccs une base de donnes), elles ne ncessitent donc pas de moteur de dploiement pour leur exploitation. Dynamique AWP Le mode AWP possde de nombreuses fonctionnalits du mode dynamique Webdev, certaines fonctionnalits importantes sont nanmoins manquantes en ce qui concerne le contexte serveur (session serveur) et certains traitements spcifiques. Dynamique PHP Ce type de projet permet simplement de raliser son site PHP au sein de Webdev, en utilisant la plupart des composants au sein de lditeur. Les technologies AJAX ne sont pas disponibles lheure actuelle (en version 11) dans ces pages PHP, il en va de mme pour certains autres traitements qui demandent une exploitation particulire. Lavantage de ce type de projet est que le rsultat final se prsente sous la forme de pages PHP dynamiques et hbergeables sur un serveur quelconque sans ncessiter de moteur de dploiement particulier.

Boonaert Nicolas http://blog.boonaert.net

9 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

2.1.2. Base de donnes et accs natifs Comme indiqu, on peut interfacer le projet avec plusieurs types de bases de donnes. Lutilisation de certains de ces types est gratuite, cest le cas des bases de donnes de type Hyper File. Ce type de base de donnes est dvelopp par PC Soft et possde les fonctionnalits habituelles dun systme de gestion de base de donnes relationnelle. Le support des types de base de donnes plus rpandues comme Oracle, MySQL ou bien dautres, peut tre ajout en utilisant les accs natifs se prsentant sous forme dexcutables installer et utilisables gratuitement ou non selon le type.

Boonaert Nicolas http://blog.boonaert.net

10 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Ainsi, on peut remarquer que le projet cr peut sinterfacer avec nimporte quel type de base de donnes ce qui permet notamment dintgrer des existants, louverture est assur par OLEDB et ODBC qui peuvent tre utiliss dans la majorit des cas de figure.

Boonaert Nicolas http://blog.boonaert.net

11 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

UDC : Universal Data Connector (HLitRecherche, HExecuteRequte, Fichier, Rubrique, Liaison fichier automatique, SQLExec,)

Ce schma illustre les possibilits offertes au sein de Webdev en ce qui concerne linterface avec la base de donnes, cest celui fourni par PC Soft pour dmontrer louverture de leur plateforme compose de Windev-Webdev-Windev Mobile.

Boonaert Nicolas http://blog.boonaert.net

12 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

2.1.3. Autres informations de projet Tout au long de la cration du projet, un certains nombre dtapes de cration sont suivies. Etape 1 : Description A travers cette tape de description, on informe le nom souhait sur le projet, le rpertoire de travail (prfrablement dans le dossier Mes Sites, cr dans le lecteur C: par dfaut). On peut aussi pour assurer un meilleur suivi de projet et gestion de la documentation, renseigner par une courte phrase le but du projet. Au moment de la cration et tout moment, on peut choisir dintgrer des documents tels que des cahiers des charges, des schmas scanns ou tout autre fichier, qui seront utiles dans la ralisation du projet.

La gestion des documents est donc intgre au projet. On doit ensuite informer le type de gnration, en clair quel est le type de projet que lon souhaite obtenir en sortie. Webdev permet de gnrer des sites Internet ou des composants rutilisables dans dautres projets. On peut nanmoins ouvrir les projets de types Windev ou Windev Mobile.

Boonaert Nicolas http://blog.boonaert.net

13 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Dans notre cas, on choisit Site Internet et on choisit ensuite le type de site qui imposera le type de projet.

Aprs avoir choisi le type Site dynamique Webdev, on a la possibilit de choisir parmi plusieurs modles de projet. Ces projets prdfinis peuvent aider la cration de site, on retrouve par exemple des projets de commerce lectronique, de location de DVD ou de gestion de Parc Informatique Dans notre cas, nous choisissons un projet vierge. Dautres informations complmentaires peuvent ensuite tre compltes concernant le dploiement, le calendrier de ralisation.

Etape 2 : Equipe Cest ce moment que lon peut caractriser la mthode de travail : travailler en quipe ou travailler seul. Dans le cas dun travail en quipe, il est possible de dcrire la liste des quipes qui participeront au projet et qui permettront dorganiser les participants au projet.

Il faut ensuite constituer les quipes choisies en ajoutant les utilisateurs dans les quipes correspondantes. Pour grer efficacement les projets, on peut inclure le nouveau projet dans un groupe. Ceci savre plutt utile lors des projets multiples du mme ensemble. Ensuite, on peut choisir dutiliser ou non le Gestionnaire De Source, vivement conseill par PC Soft mme en utilisation o lon est seul dvelopper.

Etape 3 : Charte On peut choisir la charte de programmation qui dtermine alors le prfixage automatique des variables selon leurs types et les noms des champs prdfinis.

Boonaert Nicolas http://blog.boonaert.net

14 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

La charte graphique utilise pour le site peut tre galement choisie parmi un ensemble de modles prdfinis. Ces modles seront notamment utiliss au niveau des champs. Etape 4 : Internationalisation Webdev propose dintgrer linternationalisation du site, un projet peut donc supporter plusieurs langues (plus de 20) ce qui est trs utile dans lensemble du dveloppement. Etape 5 : Base de donnes Cette tape permet de dterminer la base de donnes qui sera utilis par le projet. On peut choisir de crer une nouvelle base de donnes ou dutiliser une base existante.

2.2. Gestion du projet


Webdev intgre dans lensemble du cycle de dveloppement des outils et fonctionnalits permettant de grer le projet dans tout le cycle de dveloppement. Lintgration des documents extrieurs, la gestion du travail en quipe et mme les tapes de conception et darchitecture sont intgres dans le projet au sein de lditeur. 2.2.1. Travailler en quipe : le GDS Le Gestionnaire De Sources (GDS) permet de dvelopper efficacement en quipe, de grer les historiques et les versions, et dautomatiser la sauvegarde des sources. Laide intgre de Webdev nous informe de son fonctionnement :

Ainsi on remarque que lors de la premire utilisation, le projet de rfrence situ sur un serveur de gestion de sources est copi sur le poste du dveloppeur. Il est alors tout fait possible pour ladministrateur dtablir des droits sur les fichiers et lments contenus dans le projet pour chacun des dveloppeurs.

Boonaert Nicolas http://blog.boonaert.net

15 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Lorsquun utilisateur souhaite modifier un lment du projet, on lui propose dextraire llment en question et une fois les modifications effectues, il peut rintgrer llment au sein du GDS.

Bien entendu, ce processus peut intgrer de multiples utilisateurs et la synchronisation peut tre bien plus complexe que celle expose sur ce schma. Le GDS intgre par ailleurs des processus de vrification dtat avant extraction, de droit de modification et gre intgralement les conflits de versions dun mme lment. Le GDS intgre galement un systme de messagerie de projet ainsi que des outils pour attribuer les tches aux dveloppeurs. Ajout du projet utilisant le GDS Afin dajouter le projet au gestionnaire de source, on utilise lassistant associ. On choisit, si ce nest pas dj fait, dinstaller une base.

Aprs avoir renseign les champs permettant de localiser la base de sources et aprs que lon ait cliqu sur Tester la connexion (dans le cas dune base Client/serveur), on peut passer ltape suivante dajout.

Boonaert Nicolas http://blog.boonaert.net

16 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

On peut alors voir le rpertoire utilis au sein du GDS pour notre projet, on choisit ensuite les lments du projet et dpendances importer (par dfaut tous). On termine lajout du projet dans la base de sources. 2.2.2. Documentation La documentation dun projet est une tape toujours importante, cest pourquoi elle est prsente en permanence dans Webdev. Ainsi il ne faut pas ngliger les descriptions et autres informations sur les lments que lon cre puisque ceux-ci sont utiliss pour la gnration. Il est possible dintgrer les documents tiers dans le projet de faon fournir des informations complmentaires, et il est galement possible de gnrer la documentation du projet de manire automatique. Pour cela il suffit dutiliser lassistant en slectionnant dans la barre de menu : Projet > Imprimer le dossier du projet

Lassistant guide en diffrentes tapes invitant slectionner le type de dossier, le contenu souhait et la mise en page et enfin le format de sortie (PDF, HTML, imprimante). 2.2.3. Architecture et conception Concernant la conception, Webdev donne la possibilit de complter le projet laide de diagrammes et de schmas. Parmi les standards supports : les diagrammes UML (cas dutilisation, squence, tat transition, classes) et des schmas de modlisation souple. Ces modlisations souples correspondent un schma de description de fonctionnement, on y ajoute des tapes, des traitements, des choix. Cette modlisation peut tre lie directement au code et vnement dans le projet, les modifications peuvent tre rpercutes dun sens comme de lautre.

Boonaert Nicolas http://blog.boonaert.net

17 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Cest un outil puissant de modlisation intgr Webdev, qui permet de simplifier la comprhension de certains traitements et sont donc fort utiles lors dun travail en quipe comme lorsquon travaille seul pour apporter en maintenabilit.

2.3. Conception de la base de donnes


Pour ce cas dexemple, ne pouvant exposer le schma de la base de donnes du projet Spilo, on choisit de crer un schma dexemple participant la comprhension. 2.3.1. Cration de lanalyse Pour crer lanalyse, lditeur de schma de Modle Logique de Donnes (MLD) est utilis, on peut choisir dutiliser la gnration automatique danalyse partir dun Modle Conceptuel de Donnes (MCD) parfois plus simple comprendre et raliser. Cette cration de lanalyse peut seffectuer plusieurs moments. Le premier intervient lors de la cration du projet, le second se prsente lorsquon souhaite ajouter une analyse (un schma de base de donnes) au projet. Dans les deux cas le mme assistant apparat. Ajout dune analyse dans un projet existant Pour ajouter une analyse au projet, il faut tout dabord se rendre dans la description (les proprits) de ce dernier, pour cela on utilise la barre de menu : Projet > Description du projet :

Boonaert Nicolas http://blog.boonaert.net

18 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Aprs avoir slectionn longlet Analyse dans la fentre de description du projet, on choisit de crer une analyse en cliquant sur le bouton associ afin de faire apparatre lassistant de cration et configuration.

Configuration de lanalyse La premire tape de cet assistant permet de renseigner le rpertoire o sera stock le fichier .wda correspondant lanalyse (le schma de la base de donnes). On peut galement indiquer une description pour cette analyse afin de renseigner plus en dtails cet lment dans le dossier technique du projet.

On peut galement imposer un mot de passe pour scuriser laccs cette analyse.

Boonaert Nicolas http://blog.boonaert.net

19 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

2.3.2. Cration des tables Aprs avoir valid la cration, on se retrouve avec une surface de conception danalyse vierge. Pour crer un fichier (une table) de donnes, on peut procder de diffrentes manires : Clic droit sur la surface> Nouveau fichier Barre de menu>Insertion>Fichier Barre doutils :

Lassistant de cration de fichier apparat, on peut choisir de crer une nouvelle description de fichier, de le crer en sappuyant sur un modle existant ou utiliser des fichiers dune base existante. On choisit ici de crer une nouvelle description de fichier afin de pouvoir configurer entirement ce que lon souhaite ds le dbut. Aprs avoir renseign correctement le nom du fichier (Photo) ainsi que le libell qui sera utilis dans les assistants de lditeur, on prend soin de laisser coche loption de cration didentifiant automatique. En effet cet identifiant permet deffectuer des recherches de manire simple, il sert alors de cl principale. On choisit ensuite le type de fichier qui va tre cr, dans le cas prsent : Hyper File Classic et on termine la cration. La fentre de cration des rubriques du fichier (champs/colonnes de la table) apparat et on observe dj la prsence dune premire rubrique appele automatiquement IDPhoto (IDNomDeLaTable de manire gnrale), on peut lire les informations sur cette rubrique et identifier de suite son type et son utilit. Pour mettre en avant dautres fonctionnalits, dautres rubriques sont ajoutes, pour cela soit on clique dans la table de lassistant, soit on utilise les icones situs son bord. On renseigne le nom et le libell et on peut ensuite slectionner son type.

Les types disponibles sont assez explicites dans lensemble, ce qui est intressant cest de voir que ces types comportent des sous-types permettant doptimiser les rubriques et donc la base de donnes, la liste complte et leur utilit sont dtaills dans laide.

Boonaert Nicolas http://blog.boonaert.net

20 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Une fois toutes les rubriques renseignes et paramtres, la surface danalyse se voit ajouter un lment graphique reprsentant le fichier nouvellement cr (la table).

On peut crer directement le schma MLD complet de la nouvelle base de donnes via lditeur. 2.3.3. Cration des liaisons Les fichiers (tables) de la base de donnes sont souvent lis les uns aux autres. Pour dfinir ces liaisons, lditeur nous propose un assistant qui aide dfinir les liaisons. Pour dfinir une liaison : Barre de menu> Insertion> Liaison Clic Droit> Nouvelle liaison Barre doutils > Nouvelle liaison

Il suffit ensuite de cliquer sur les fichiers que lon souhaite lier et lassistant apparat et on saperoit que les libells utiliss pour les fichiers sont utiliss ici, il faut alors dfinir les cardinalits de la liaison.

Boonaert Nicolas http://blog.boonaert.net

21 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

La rubrique cl qui servira pour la liaison

Enfin imposer les rgles dintgrit pour la suppression et la modification de la rubrique de liaison afin de ne pas corrompre la base et assurer la cohrence entre les fichiers, cela crer une contrainte dintgrit qui sera utilis par le moteur de scurit de la base.

La liaison est ainsi cre et visible directement sur la surface de lanalyse :

Aprs avoir dessin le schma de lanalyse, on est maintenant prt pour continuer le projet.

Boonaert Nicolas http://blog.boonaert.net

22 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

2.3.4. Importation dune analyse existante Dans le cas dun dveloppement de plusieurs sites reposant sur la mme base de donnes, il est naturellement indispensable de pouvoir importer lanalyse existant dans les autres projets. On peut au choix copier lanalyse de lautre projet, ou directement la rfrencer depuis son emplacement dorigine. Pour indiquer lanalyse sur laquelle le projet se base, il faut se rendre dans la description du projet > Onglet Analyse et slectionner lanalyse correspondante.

Dans certains cas, il est galement possible de directement importer des bases externes. Lexemple de fichier de type MS Access ou Excel, XML, etc., il suffit ensuite de glisser-dposer le fichier sur la zone ddition de lanalyse. Limportation est effectue travers un assistant. 2.3.5. Cration des fichiers physiques Le schma de la base de donnes (lanalyse) est une reprsentation logique des lments de la base. Les donnes sont stockes dans les fichiers physiques (ou les fichiers grs par le moteur de la base de donnes). Pour crer tous les fichiers physiques, on peut utiliser une fonctionnalit de lditeur en version 11. En utilisant le clic droit sur lobjet graphique du fichier sur la surface > Crer le fichier de donnes.

Une autre solution, dans le code dinitialisation du projet (F2 sur le tableau de bord), utiliser le code suivant qui cre tous les fichiers qui ne le sont pas encore :

Boonaert Nicolas http://blog.boonaert.net

23 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev


HCrationSiInexistant("*")

23 avril 2008

2.4. Cration des pages


2.4.1. Cration dune page basique Pour crer une page dynamique dans le projet : Barre de menu : Fichier > Nouveau Barre doutil : Nouveau > Page Raccourci clavier : CTRL + N Lassistant de cration de page apparat et on peut slectionner parmi les diffrentes options permettant lautomatisation de la cration (on slectionne alors ce quon souhaite afficher depuis la base de donnes, le RAD gnre une page avec les champs adquats) ou on peut choisir de le faire soi mme. On choisit galement le modle sur lequel doit tre base la page, cette notion de modle est aborde un peu plus loin. On choisit Vierge pour navoir aucun modle.

Lditeur affiche une page vierge portant le nom : PAGE_Page1 par dfaut (si le nom nest pas dj utilis dans le projet). On enregistre la page (CTRL + S ou Fichier > Enregistrer) et on lui donne un nom explicite et idalement prfix : PAGE_Accueil. Ce nom peut bien videmment tre modifi par la suite et les changements peuvent tre diffuss dans le code, en utilisant refactoring . On peut alors observer lajout de cet lment du projet dans larborescence :

Boonaert Nicolas http://blog.boonaert.net

24 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Prsentation des composants Les composants sont des lments constituant la page comme par exemple des images, des libells, des zones de saisie. Ces lments sont traduits en HTML lors de la gnration des pages et peuvent donc au besoin tre accds via le DOM condition de connatre leur proprit Alias (nom de gnration HTML). Par dfaut ces Alias sont gnrs automatiquement, et dans limmdiat, si on souhaite utiliser uniquement du code Webdev, cela ne pose aucun souci puisquon peut directement accder aux champs via leur nom dans lditeur. Si toutefois on souhaite avoir des noms comprhensibles dans le code de sortie, il faut le spcifier dans les options de gnration dans la description du projet. Barre de menu > Projet > Description du projet.

Par dfaut, le code de sortie est optimis pour avoir un code HTML le plus concis possible.

Boonaert Nicolas http://blog.boonaert.net

25 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Ajout de composants Pour ajouter un composant sur une page, on peut utiliser : Barre de menu > Insertion On choisit le composant que lon souhaite parmi la liste :

La barre doutils associe : un simple glisser-dposer pour ajouter un lment la page :

Des fonctionnalits peuvent galement aider la disposition des lments sur la page, notamment les rgles et les aides au positionnement/alignement. On peut saider en utilisant les touches F6 et F7 pour disposer les champs sur la page.

Boonaert Nicolas http://blog.boonaert.net

26 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Modification des proprits des composants Aprs avoir ajout les composants, il est primordial de dfinir leurs proprits, pour cela Webdev utilise la technique des onglets runis dans un assistant de description du champ. Ici on dsire modifier un champ image insr sur la page : Onglet Gnral :

On y modifie le nom, le chemin de limage qui doit, pour tre exploitable en production, tre un chemin accessible par et via le serveur web. On peut voir dautres proprits comme le type, le mode daffichage et les actions associs au clic sur ce premier onglet Gnral. Onglet Dtail :

Boonaert Nicolas http://blog.boonaert.net

27 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

On peut indiquer ltat de visibilit, la possibilit de superposition (le champ est alors contenu dans une cellule HTML (DIV)). De mme pour les dimensions et les options dappel au clavier et de curseur. Il est important de remarquer que cest galement dans cet onglet que figure le texte alternatif de limage, utile pour le rfrencement. Onglet Liaison :

Cest travers cet onglet que lon gre le binding automatique des champs la couche de donnes. Cet aspect sera abord dans la partie dinteraction avec la base de donnes dans la suite de cet article. Onglet note :

Les notes sont utilises dans le dossier technique et peuvent tre utiles pour le dveloppeur.

Boonaert Nicolas http://blog.boonaert.net

28 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Onglet Aide :

Il est possible dindiquer linformation qui sera affiche dans la bulle daide qui se prsente au survol de la souris par-dessus le champ. Onglet Avanc :

Webdev permet daccder quelque peu au code de sortie afin de pouvoir y ajouter ce que lon souhaite, ainsi au besoin on peut ajouter du code HTML avant ou aprs le champ.

Boonaert Nicolas http://blog.boonaert.net

29 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Onglet Bord, Fond :

On y dite une partie des proprits CSS, notamment le cadre (border en css), le dbordement (overflow), le cadrage (padding) ainsi que le fond (background).

Boonaert Nicolas http://blog.boonaert.net

30 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Onglet Style :

Les styles CSS sont grs par dfaut par Webdev, on peut dailleurs les grer en se basant sur des styles prdfinis (styles Webdev) ou choisir dutiliser un aspect libre et sappuyer alors sur un style qui sera local au champ.

Il sagit vritablement du style CSS appliqu, on peut dfinir toutes les proprits CSS (pas encore tablies dans dautres onglets) comme par exemple les formats de texte (graisse, style, police) en fonction des tats (survol, actif).

Boonaert Nicolas http://blog.boonaert.net

31 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Le modifieur : On peut galement modifier toutes ces proprits grce un modifieur affichable via : Barre de menu : Affichage > Barre doutils > Modifieur

Ici le champ dont on change les proprits tait une image, la plupart des proprits sont communes aux champs, certaines peuvent tre spcifiques comme par exemple ltat (Actif, Gris, Affichage seul) et bien dautres. Toutes runies dans la fentre de description regroupant les proprits par onglet. Exploitation de ces composants Une fois les champs ajouts et correctement configurs, il est temps de sen servir dans le code des traitements. Pour accder au code correspondant un traitement sur un champ : Clic droit sur le champ > Code Raccourci clavier : F2

Ici sur le bouton BTN_Modifier, le passage dans lditeur de code nous amne dans lvnement de clic ct Serveur.

Boonaert Nicolas http://blog.boonaert.net

32 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

On peut remarquer la prsence dun autre code serveur correspondant linitialisation du champ et enfin lvnement de clic du cot navigateur. Cette notion de code serveur et code navigateur sera plus compltement dcrite par la suite mais, pour rsumer, le code navigateur est celui qui sexcute sur le poste client et qui est donc un traitement JavaScript. Le traitement souhait sur le clic de ce bouton est simple, on saisit un texte dans un champ de saisie (SAI_Modif) et on souhaite que lorsquon clique, on affiche le texte tap dans un champ libell prvu cet effet (LIB_TexteAModifier). Voici donc le code associ au traitement de clic du ct serveur :
SI SAI_Modif <> "" ALORS LIB_TexteAModifier..Valeur = SAI_Modif..Valeur SINON Info("Le champ de saisie est vide") FIN

La notation peut toujours surprendre, elle nen demeure pas moins trs comprhensible. Dans un premier temps on vrifie que le champ de saisie nest pas vide. Sil nest pas vide, on modifie la valeur du libell par la valeur contenue dans le champ de saisie. Sil est vide on affiche une information au visiteur (pas trs esthtique pour le moment). Les proprits dun champ ou dun lment quelconque du projet peuvent tre accds en code via la forme suivante : (attention, certaines dentre elles ne sont pas accessibles en criture)
NomDuChamp..NomProprit

On dispose dune aide la saisie efficace pour ces proprits.

Boonaert Nicolas http://blog.boonaert.net

33 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

2.4.2. Cration dun modle La notion de modle est simple saisir, cest une base quutilise une page pour ses styles CSS mais aussi pour les champs communs plusieurs pages. Equivalents des Masters Pages dans dautres plateformes, les modles de pages WebDev permettent de gagner en cohrence entre les pages, en temps de dveloppement et en maintenabilit. Trs utile pour les menus et parties communes des pages, on ndite les champs et proprits qu un seul endroit pour impacter toutes les pages utilisant le modle. Pour crer un modle : Barre de menu > Nouveau > Modle Barre doutils > Nouveau > Modle CTRL + N > Modle Le modle apparat alors dans lditeur (on remarque le bord jaune de lditeur indiquant quil sagit dun modle), on peut lenregistrer de suite en lui donnant un nom, toujours prfix pour profiter de laide la saisie dans lditeur de code, mais aussi pour mieux sy retrouver en tant que dveloppeur et favoriser ainsi le travail en quipe. Ce modle apparat par dfaut dans larborescence du projet dans le sous dossier Modles :

Pour ajouter des champs au modle, on procde comme sur une page classique, de mme pour les proprits. Pour la disposition, on dispose des mmes aides pour placer les lments. On peut galement mettre en uvre ce qui est appel dans Webdev les zones extensibles . Cela permet par exemple de disposer des lments toujours en bas du navigateur (les positions sont tablies en pourcentages). Pour afficher ces zones extensibles : Affichage > Zones extensibles (CTRL + I). De mme pour afficher les diffrentes tailles de navigateur : CTRL + M. Dans certains cas, on a cr une premire page qui nous plait et dont on aimerait se servir pour tablir un modle. Webdev permet bien sr de raliser cette tche simplement : Barre de menu > Fichier > Enregistrer comme un modle

Boonaert Nicolas http://blog.boonaert.net

34 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

2.4.3. Utilisation du modle au sein des pages Pour utiliser un modle dans une page existante, il faut se rendre dans la fentre de description de la page et afficher la liste des modles du projet :

La liste saffiche, et on peut ajouter les modles ou en retirer selon diffrentes options. Les conflits de positionnement des champs qui peuvent survenir sont signals dans lditeur par un message et par une indication visuelle dans la surface ddition.

Boonaert Nicolas http://blog.boonaert.net

35 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Lorsquon cr une nouvelle page, on peut choisir de baser cette dernire directement sur le modle que lon souhaite :

Explication avec la page daccueil du site : PAGE_Accueil

Le modle impose deux champs la page base sur le modle, affichs en jaune sur la partie droite du schma. Les champs bleus sont ceux propres la page. Sur lditeur, les champs issus du modle sont indiqus dans lditeur par un petit carr jaune dans le coin haut gauche, pour ouvrir le modle correspondant rapidement, il est possible de faire un clic droit et de choisir douvrir le modle.

Boonaert Nicolas http://blog.boonaert.net

36 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

2.5. Dveloppement avanc de pages


2.5.1. Code serveur, navigateur et AJAX Abord plus haut, on observe diffrentes parties dans le code : serveur et navigateur. Code serveur Le code serveur est celui qui sexcute sur le serveur dans le moteur de page. Ce code est trs peu limit concernant linteraction avec les donnes et les traitements qui peuvent tre effectus sur le serveur. Dans lditeur le code serveur est indiqu en orange et par une prcision entre parenthses.

Code navigateur Le code navigateur est le code qui sexcute sur le poste client, il sagit dun code W-Langage ou JavaScript. Le code W-Langage navigateur est dailleurs traduit en JavaScript dans le code de sortie. Dans lditeur le code navigateur est indiqu en vert (W-Langage) et bleu (JS) et par une prcision entre parenthses. Le type de code peut tre modifi en cliquant sur labrviation du bandeau.

La gnration de ce code peut tre paramtre dans les options de gnration dans la description du projet. A travers ce code on peut accder des informations relatives au navigateur et effectuer des traitements daffichage.

Boonaert Nicolas http://blog.boonaert.net

37 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Utilisation dAJAX Webdev permet galement dutiliser la technologie AJAX pour effectuer des traitements serveur sans ncessiter deffectuer un postback complet de la page HTML pour afficher le rsultat sur la page ou tout simplement communiquer avec le serveur. Basiquement, on utilise un objet (XMLHttpRequest) pour transporter des requtes et les rponses associes en XML en utilisant JavaScript. Le schma suivant illustre les changes entre le navigateur et le serveur web lors dappels classiques nutilisant pas la technologie AJAX.

APPELS CLASSIQUES NON AJAX


Navigateur

Serveur web

XMLHttpRequest

Requte HTML - Requte de la page Rponse HTML Page HTML

Webdev

JavaScript
Requte HTML - Requte de la page

CSS

Rponse HTML Page HTML

HTML

Requte HTML - Requte de la page Rponse HTML Page HTML

A chaque requte effectue correspond un rendu complet de la page et le navigateur recharge lintgralit des champs, ce qui peut tre gnant pour lutilisateur.

Dans le cas dappels AJAX, voici le schma qui correspond :

APPELS AJAX
Navigateur

Serveur web

XMLHttpRequest

Requte HTML - Requte de la page Rponse HTML Page HTML

Webdev

JavaScript
Requte Asynchrone

CSS

Rponse JSON / XML

Requte Asynchrone

HTML

Rponse JSON / XML

Boonaert Nicolas http://blog.boonaert.net

38 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

La premire requte reoit une rponse HTML (la page est alors compltement charge). Lors de la seconde requte qui peut intervenir depuis un vnement du navigateur ou depuis le serveur, la rponse contient des donnes en JSON (JavaScript Object Notation ) ou XML (Extensible Markup Language) qui sont alors traites en JavaScript (via lobjet XMLHttpRequest) et qui ne ncessitent pas un rafraichissement complet de la page mais mettent jour uniquement la zone en question quand il le faut. Lexprience utilisateur nen est que plus agrable et les transferts entre le navigateur et le serveur web sont rduits dans la plupart des cas. Volontairement, je ne descends pas plus en dtails sur la technologie AJAX mais il est important de saisir parfaitement les avantages et inconvnients que son utilisation peut apporter pour tre conscient des limitations et des effets.

Pour utiliser AJAX au sein de Webdev, PC Soft a vritablement simplifi la chose. Sur un traitement serveur associ lvnement dun champ : Sur un champ dans un code habituellement serveur, pour activer AJAX il suffit de cliquer sur lindication dans lditeur de code, exemple ici avec un code de clic serveur sur un bouton :

Le traitement AJAX est alors activer sur le clic sur le bouton. Pour ce traitement simple on peut estimer que cest un inutile, mais lorsquon doit interroger une base de donnes partir des donnes entres sur la page et renvoyer une rponse sans rafrachir compltement la page, cela savre fort pratique. Sur un champ directement : Certains champs peuvent tre enrichis par lexprience AJAX, cest le cas notamment des tables, des zones rptes ou des combos. Cela permet par exemple dans le cas des zones rptes, de ne charger que les lments visibles sur la page, au dfilement dans la zone rpte, les donnes sont charges dynamiquement. Dans les tables qui utilisent AJAX, lors de ldition dans ces dernires, les donnes sont charges dynamiquement et modifies dans la base de manire transparente (au souhait du dveloppeur).

Boonaert Nicolas http://blog.boonaert.net

39 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Pour activer AJAX sur un champ, il faut se rendre dans sa fentre de description et cocher Mode Ajax, ici activ sur un champ table :

Le mode AJAX est disponible sur la plupart des contrles disponibles, la liste ne cesse de stoffer au fil des versions de Webdev.

Boonaert Nicolas http://blog.boonaert.net

40 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

2.5.2. Procdures Lorsque lon effectue le mme traitement plusieurs endroits dans une page, on peut utiliser les procdures locales pour regrouper les instructions. Lorsquun mme traitement est effectu dans plusieurs pages, on utilise les procdures globales qui sont tablies au niveau du projet. Ainsi depuis nimporte quel lment du projet, on peut utiliser les procdures globales cres. Ces procdures globales peuvent tre regroupes en collection permettant une meilleure architecture et une rutilisabilit amliore pour dautres projets par exemple. Ces procdures globales comme les procdures locales comportent naturellement deux types : serveur et navigateur. Les procdures serveur (globales ou locales) peuvent tre appeles en AJAX, pour cela il faut que lappel AJAX soit autoris pour ces procdures, pour lactiver il suffit dactiver AJAX sur la fonction :

Pour appeler cette fonction depuis un code W-Langage navigateur :


AJAXExcute(MilliVersSecondeEtMilli,20100)

De manire gnrale :
AjaxExcute(NomProcdure, Paramtre1, )

Ou
AjaxExcuteAsynchrone(NomProcdureServeur, NomProcdureNavigateur, Paramtre1,)

La diffrence entre ces deux mthodes dappel est que dans le premier cas, le traitement nest pas effectu en tche de fond, le code qui suit ventuellement le AjaxExcute() nest excut quaprs rponse du serveur. Dans le second cas, le traitement est effectu en tche de fond, la rponse nest pas attendue et le reste du code sexcute sans attente. Il faut alors indiquer la procdure navigateur qui sera appele une fois la rponse du serveur reue (fonction de callback).

Boonaert Nicolas http://blog.boonaert.net

41 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Dans les deux cas, comme en permanence dans lditeur, laide la saisie nous indique le prototype ainsi quune information complmentaire sur les paramtres des fonctions.

Boonaert Nicolas http://blog.boonaert.net

42 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

2.6. Interaction avec la base de donnes


Dans le cas des sites dynamiques, il est possible dinteragir avec une base de donnes. Pour cela il faut utiliser un traitement serveur qui peut alors utiliser diffrentes techniques pour accder la base de donnes : les fonctions HyperFile du W-Langage, lutilisation des requtes de Webdev, et les requtes SQL. 2.6.1. Utilisation des fonctions HyperFile Le W-langage simplifie laccs aux donnes, bnficiant dune aide la saisie efficace et dot de nombreuses fonctions utilisables. Les fonctions HyperFile sont prfixs par H comme ceci : HNomFonction(). Recherche dans un fichier de donnes Un exemple de recherche dans un fichier dans le code de clic serveur dun bouton :
HLitRecherche(Utilisateur,Pseudo,SAI_Pseudo) SI HTrouve(Utilisateur) ALORS SI Utilisateur.MotDePasse = SAI_Mot_de_passe ALORS //code de traitement... // Info("Vous tes bien authentifi") FIN FIN

Dans un premier temps, on effectue la recherche sur le fichier Utilisateur de lanalyse (table de la base de donnes) : La fonction HLitRecherche() permet de positionner lindex de lecture sur lenregistrement trouv en effectuant la recherche (HRecherche()) et dinitialiser le contexte de donnes (HLit()). Elle prend en paramtres : le nom du fichier de recherche, la rubrique sur laquelle la recherche est effectue, la valeur recherche. Elle prend un dernier paramtre correspondant au type de recherche effectu et aux options de la recherche. On teste si la recherche aboutit un rsultat laide de la fonction HTrouve() qui renvoie un boolen indiquant cette information. On teste ensuite si le mot de passe correspond celui de lenregistrement en cours dans la base de donnes. Pour accder la valeur de la base de donnes, puisque lindex de lecture est initialis, on peut utiliser la notation suivante : NomDuFichier.NomRubrique. La valeur renvoye est vritablement celle lue dans la base de donnes au moment de la recherche.

Boonaert Nicolas http://blog.boonaert.net

43 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Recherche avance dans un fichier de donnes Le code suivant permet de rcuprer des lments dans un fichier dont une rubrique commence par la chane indique, cest un code serveur :
sMaCl est une chane = HFiltreCommencePar(Utilisateur,Pseudo,"to") HLitPremier(Utilisateur,sMaCl) TANTQUE PAS HEnDehors() Info(Utilisateur.Pseudo) HLitSuivant() FIN //Annule l'effet du filtre HDsactiveFiltre(Utilisateur)

On tablit le filtre en utilisant la fonction HFiltreCommencePar(). Cette fonction prend en paramtre le fichier sur lequel le filtre doit tre appliqu, la rubrique et la chane permettant deffectuer la condition. Elle renvoie la rubrique cl sur laquelle le filtre est appliqu. On positionne lindex de lecture sur le premier enregistrement du fichier en indiquant que la rubrique de parcours est celle que lon utilise dans le filtre. Dans une boucle qui se rpte tant quon atteint pas la fin de fichier, pour vrifier si on nest justement pas en dehors du fichier, on utilise HEnDehors() qui renvoie un boolen correspondant linformation. On affiche les donnes lues en base. On positionne ensuite lindex de lecture sur le prochain enregistrement du fichier en utilisant HLitSuivant(). On dsactive le filtre appliqu en fin de traitement, pour viter quil ne sapplique sur dautres lments de code (ici accessoire). Pour cela on utilise la fonction HDsactiveFiltre() qui prend en paramtre le fichier sur lequel le filtre est tabli.

Boonaert Nicolas http://blog.boonaert.net

44 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Ajout dans un fichier de donnes Un exemple dajout simple dans un fichier, toujours dans le code de clic serveur dun bouton :
Utilisateur.Pseudo = SAI_Pseudo Utilisateur.MotDePasse = SAI_Mot_de_passe Utilisateur.Mail = "toto@mail.com" Utilisateur.DateInscription = DateSys() + HeureSys() SI PAS HAjoute(Utilisateur) ALORS Info(HErreur(hErrEnCours)) FIN

On initialise le contexte de donnes manuellement : NomDuFichier.NomRubrique = valeur associer On utilise DateSys() et HeureSys() qui renvoient respectivement la date et lheure du serveur linstant de lappel. A ce moment les donnes ne sont pas en base de donnes, elles ne sont stockes que dans le contexte de donnes serveur (moteur Webdev). On procde lajout effectif dans le fichier grce la fonction HAjoute(). Cette fonction renvoie un boolen indiquant si lajout a t effectu avec succs ou non. On teste cette valeur renvoye et dans le cas o HAjoute() renvoie Faux, une erreur est survenue on laffiche lcran (info() en Webdev = alert() en JS). On rcupre la description de lerreur grce la fonction HErreur() qui peut prendre un paramtre pour spcifier plus prcisment linformation voulue.

Modification des donnes Un exemple de modification de donnes dans un fichier, code de clic serveur sur un bouton :
HRecherche(Utilisateur,Pseudo,SAI_Pseudo) SI HTrouve(Utilisateur) ALORS Utilisateur.Mail = "toto@supinfo.com" HModifie(Utilisateur) FIN

On initialise lindex de lecture sur lenregistrement dont on souhaite modifier les donnes en recherchant et en vrifiant que lon trouve bien un enregistrement correspondant. On modifie le contexte de donnes serveur, la rubrique mail est modifie. A ce moment la modification nest pas applique en base de donnes. On utilise HModifie() pour modifier effectivement la base de donnes.

Autres actions Les fonctions HyperFile du W-Langage sont trs nombreuses, elles permettent de couvrir les besoins daccs aux donnes que ce soit en manipulation de donnes, dfinition ou gestion des connexions.

Boonaert Nicolas http://blog.boonaert.net

45 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

2.6.2. Utilisation des requtes Les requtes sont bien plus intressantes que les fonctions HyperFile car elles sont bien plus rutilisables entre les projets, on peut aussi profiter de leur optimisation automatique et surtout lutilisation elles sont plus sympathiques utiliser. Pour crer un requte, on cr un nouvel lment de projet : CTRL + N ou Fichier > Nouveau > Requte.

Requte de base Par requte de base, on entend une requte qui rcupre simplement un rsultat filtr depuis la base de donnes. Au moment o lon cr la nouvelle requte, il nous faut choisir son type :

Lditeur de requte apparat. Cest un assistant pratique pour composer les requtes de manire graphique en se concentrant sur les donnes que lon souhaite intgrer plutt que sur la forme de lordre envoyer au moteur de base de donnes. Son fonctionnement est relativement simple, sur la zone de gauche, on a un treeview reprsentant lanalyse et les requtes dj tablies. On slectionne les rubriques que lon souhaite ajouter en utilisant le bouton associ. Ces lments slectionns sont affichs ensuite dans la liste centrale. Il est alors possible dindiquer des conditions de tri ou de filtre sur les rubriques slectionnes. Il suffit de cliquer dans la liste sur la rubrique sur laquelle on souhaite appliquer le tri ou la condition. Une indication graphique nous permets de vrifier cela (et dans le cas dun tri sur plusieurs paramtres, lordre dapplication des tris successifs).

Boonaert Nicolas http://blog.boonaert.net

46 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Une fois les lments voulus slectionns ainsi que les diffrentes conditions tablies, on peut avoir une reprsentation graphique de la requte.

Dans ce cas il sagit simplement dune requte qui rcupre les 20 premires photos qui ont la meilleure valeur de vote.

Boonaert Nicolas http://blog.boonaert.net

47 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

On peut bien entendu voir le code SQL associ cette requte gnre depuis lditeur graphique et le corriger, sur lditeur, on appuie sur F2 (raccourci pour voir le code des lments), ce code est galement affich en bas de lditeur graphique de requte :
SELECT TOP 20 Photo.IDPhoto AS IDPhoto, Photo.Description AS Description, Photo.CheminImage AS CheminImage, Photo.ValeurVote AS ValeurVote, Photo.NombreVote AS NombreVote, Photo.DateAjout AS DateAjout, Photo.IDUtilisateur AS IDUtilisateur FROM Photo ORDER BY ValeurVote DESC

Une fois enregistre cette requte figure dans les lments du projet et elle est regroupe dans le dossier Requtes du projet.

Pour utiliser cette requte dans le code, dans le code de clic serveur dun bouton par exemple :
SI HExcuteRequte(REQ_TopPhoto) ALORS HLitPremier(REQ_TopPhoto) SI HNbEnr(REQ_TopPhoto) > 0 ALORS TANTQUE PAS HEnDehors(REQ_TopPhoto) Info(REQ_TopPhoto.CheminImage) HLitSuivant(REQ_TopPhoto) FIN FIN FIN

Dans un premier temps on initialise la requte sur le serveur. Cela initialise le contexte de donnes serveur. Pour cela on utilise la fonction HExecuteRequte(). Cette fonction prend en paramtre le nom de la requte excuter puis dautres paramtres optionnels concernant laccs au fichier et les paramtres ventuels de la requte. Cette fonction renvoie un boolen indiquant si la requte sest correctement initialise, on teste ainsi sur cette condition pour la suite du traitement. On positionne lindex de lecture sur le premier enregistrement des donnes rcupres partir de cette requte. On teste si la requte renvoie des rsultats, et si cest le cas on parcourt dans une boucle les rsultats.

Boonaert Nicolas http://blog.boonaert.net

48 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Requte volue et paramtre Dans le cas prcdent, on a simplement slectionn en effectuant un tri. Webdev permet dutiliser toutes les possibilits offertes par le langage SQL. Ici la requte qui suit va permettre de rcuprer les mmes photos du Top 20 ainsi que les informations sur les utilisateurs qui sont lies ces photos, enfin ces photos seront tries par valeur de vote et une condition sur les dates afin de ne pas rcuprer celles plus anciennes quune date spcifie en paramtre. On slectionne tout dabord les donnes que lon souhaite, ainsi on rcupre les donnes du fichier Photo, puis les donnes du fichier Utilisateur qui contient les informations sur lauteur. On applique le tri sur la rubrique ValeurVote et on applique une condition sur la rubrique DateAjout : en cliquant dans la liste principale, on ajoute une condition laide de lassistant :

Il est trs pratique de prfixer les noms des paramtres des requtes notamment au moment de leur utilisation dans le code. On impose un nombre maximal de rsultats retourner en cliquant sur le bouton n premiers de lditeur de requte, et on supprime les ventuels doublons.

Boonaert Nicolas http://blog.boonaert.net

49 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Voil le rsultat graphique gnr depuis lditeur :

Le code SQL correspondant gnr :


SELECT DISTINCT TOP 20 Photo.IDPhoto AS IDPhoto, Photo.Description AS Description, Photo.CheminImage AS CheminImage, Photo.ValeurVote AS ValeurVote, Photo.NombreVote AS NombreVote, Photo.DateAjout AS DateAjout, Photo.IDUtilisateur AS IDUtilisateur, Utilisateur.Pseudo AS Pseudo_Ut, Utilisateur.DateInscription AS DateInscription, Utilisateur.Mail AS Mail, Utilisateur.IDUtilisateur AS IDUtilisateur_Ut FROM Utilisateur, Photo WHERE Utilisateur.IDUtilisateur = Photo.IDUtilisateur AND ( -- Date maximale des photos Photo.DateAjout >= {P_DateLimite} ) ORDER BY ValeurVote DESC

Boonaert Nicolas http://blog.boonaert.net

50 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Pour utiliser cette requte dans un code serveur, on peut utiliser cette notation :
dhMaDateLimite est une DateHeure dhMaDateLimite..Mois = 3 dhMaDateLimite..Anne = 2007 dhMaDateLimite..Jour = 12 dhMaDateLimite..PartieHeure = 0 REQ_TopPhotoInfo.P_DateLimite = dhMaDateLimite SI PAS HExcuteRequte(REQ_TopPhotoInfo,hRequteDfaut) ALORS Info("ERREUR:"+HErreur(hErrPrincipal)) SINON HLitPremier(REQ_TopPhotoInfo) TANTQUE PAS HEnDehors(REQ_TopPhotoInfo) Info(REQ_TopPhotoInfo.CheminImage) HLitSuivant(REQ_TopPhotoInfo) FIN FIN

On dclare et initialise une variable de type DateHeure. On initialise le paramtre de la requte en utilisant la notation suivante : NomRequete.NomParamtre : ici lintrt de prfixer par P_ les paramtres des requtes prend son sens puisque ds lors que lon commence saisir P_ , on observe la liste des paramtres en auto compltion, bien moins difficile identifier quun nom commun. On appelle la fonction HExecuteRequte() en testant la valeur du rsultat de son initialisation. On positionne lindex de lecture sur le premier rsultat et on lit les donnes dans une boucle.

Ces requtes paramtres peuvent tre trs labores, cest notamment le cas dans le projet de stage, le prfixage sert vritablement, de mme que les commentaires sur les paramtres.

Boonaert Nicolas http://blog.boonaert.net

51 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Requte de mise jour de donnes Aprs avoir slectionn la cration dun nouvel lment de type requte via lassistant ddi, on slectionne le type de requte Update :

Il faut ensuite slectionner le fichier sur lequel on souhaite travailler :

Ensuite, on observe la liste des rubriques du fichier, on peut alors imposer les conditions permettant de slectionner les enregistrements qui devront tre modifis :

Boonaert Nicolas http://blog.boonaert.net

52 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Aprs avoir nomm et dcrit brivement la requte, on peut valider et ainsi observer laperu graphique de la requte :

Le code SQL gnr correspondant :


UPDATE Photo SET DateAjout = {P_DateModif} WHERE -- Date maximale des photos Photo.DateAjout >= {P_DateLimite}

Boonaert Nicolas http://blog.boonaert.net

53 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Toutes les possibilits ddition et de composition de requte sont les mmes que pour les requtes de lecture. Sur le mme principe il existe des requtes de suppression qui permettent de supprimer les champs que lon souhaite selon les conditions indiques. 2.6.3. Utilisation de requtes SQL composes Dans certains cas, le dveloppeur a besoin de composer les requtes selon son besoin. Indiquer sur quel fichier il travaille selon le choix dun utilisateur, selon dautres paramtres de lapplication Les cas possibles sont bien trop nombreux pour tre prsents sous forme de requtes tablies. Webdev permet bien entendu de composer ses propres requtes comme on le ferait avec nimporte quel autre langage de programmation. Pour cela on utilise une fonction du W-Langage qui permet dexcuter une requte SQL compose sous forme de chane de caractres. Cette requte nest pas vrifie dans lditeur, cest pourquoi les solutions prcdentes sont conseilles. Les erreurs ventuelles arrivent pendant lexcution do le besoin de les capturer comme il se doit pour viter un crash de lapplication ou du site. Voici le code permettant de rcuprer certaines rubriques spcifies dans un tableau de chanes dans un fichier lui aussi spcifi. Dans cet exemple, lensemble de la requte est compos :
//Paramtres externes monOrdreSQL est une chane = "SELECT " monFichierRequet est une chane = "Photo" sRubriqueTemp est une chane maRequeteCompose est une chane mesRubriquesSelectionnes est un tableau de 3 chanes TableauAjoute(mesRubriquesSelectionnes,"Description") TableauAjoute(mesRubriquesSelectionnes,"CheminImage") TableauAjoute(mesRubriquesSelectionnes,"IDUtilisateur")

//Composition de la requte maRequeteCompose = monOrdreSQL POUR TOUT ELEMENT sRubriqueTemp DE mesRubriquesSelectionnes SI sRubriqueTemp <> "" ALORS maRequeteCompose += monFichierRequet + "." + sRubriqueTemp + "," FIN maRequeteCompose = Gauche(maRequeteCompose,Taille(maRequeteCompose)-1) //On supprime la dernire virgule maRequeteCompose += " FROM " + monFichierRequet + ";" //Utilisation de la requte compose sdMA_REQ_Compose est une Source de Donnes HExcuteRequteSQL(sdMA_REQ_Compose,maRequeteCompose) HLitPremier(sdMA_REQ_Compose) SI HTrouve ALORS TANTQUE PAS HEnDehors Info(sdMA_REQ_Compose.Description) FIN FIN

Dans ce code, on initialise des variables qui simulent des variables de lapplication ou lues ailleurs. Ceci est fait ainsi pour souligner laspect dynamique de la requte compose.

Boonaert Nicolas http://blog.boonaert.net

54 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev On dfinit lordre SQL, le fichier requt, les rubriques slectionnes. Cette requte est relativement simple dans son utilit.

23 avril 2008

On compose ensuite la requte SQL partir des lments. On rcupre tout dabord lordre SQL, puis les rubriques souhaites dans une boucle sur les lments du tableau. On indique la clause FROM et le fichier requter.

On dclare une variable en tant que source de donnes. Cet lment sera celui qui permettra daccder aux donnes rsultant de la requte. On initialise la requte laide de la fonction HExecuteRequeteSQL() qui dans le cas prsent prend en paramtre la source de donnes et le texte composant la requte SQL. La source de donnes sutilise ensuite comme une requte ou un fichier pour parcourir les lments. On remarque ainsi que cette utilisation est plutt fastidieuse. Cest pourtant encore relativement utilis notamment pour des systmes de fichiers multiples, pour conserver un historique des donnes sur des fichiers diffrents. Bien sur on peut avoir des codes bien moins complexes et bien plus comprhensibles, mais cest rarement le cas de lutilisation de cette mthode.
ReqPhoto est une Source de Donnes // Initialisation de la requte "Client" HExcuteRequteSQL(ReqPhoto,"SELECT Description FROM Photo")

Cette utilisation est viter quand on le peut, ne serait-ce que pour le gain en temps, mais aussi et tout simplement pour la comprhension des autres personnes de lquipe et la maintenabilit gnrale.

Boonaert Nicolas http://blog.boonaert.net

55 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

2.6.4. Liaison des champs aux donnes La liaison des champs aux donnes correspond au binding direct de la base de donnes vers les champs et inversement. Cette mthode est une solution permettant de faire gagner du temps dans le dveloppement tout en amliorant la lisibilit du code. Pour tablir cette liaison des donnes sur les champs, dans la description du champ lier, on configure dans longlet Liaison de cette fentre.

On slectionne la rubrique relier dans le treeview reprsentant les fichiers de lanalyse et les requtes du projet ainsi que leurs rubriques. Une fois cette liaison tablie, il faut garder lide que les donnes qui sont lies sont celles du contexte de donnes serveur, il est donc ncessaire, dans le cas dune liaison sur une requte comme dans le cas dune liaison sur un fichier, dinitialiser ce contexte. Ici, on lie plusieurs champs aux rubriques de la requte REQ_TopPhotoInfo. On souhaite ainsi afficher les informations de la premire photo rsultant de la requte.

Boonaert Nicolas http://blog.boonaert.net

56 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Dans le cas de la requte prcdente, le code se simplifie puisquon agit sur plusieurs champs en une seule instruction. Lassociation des donnes vers les champs seffectue simplement.
dhMaDateLimite est une DateHeure dhMaDateLimite..Mois = 3 dhMaDateLimite..Anne = 2007 dhMaDateLimite..Jour = 12 dhMaDateLimite..PartieHeure = 0 REQ_TopPhotoInfo.P_DateLimite = dhMaDateLimite SI PAS HExcuteRequte(REQ_TopPhotoInfo) ALORS Info("ERREUR:"+HErreur(hErrPrincipal)) SINON HLitPremier(REQ_TopPhotoInfo) FichierVersPage(MaPage) FIN

Le code dinitialisation et de parcours de la requte ne change pas, seule lassociation est simplifie. En effet on utilise la fonction FichierVersPage() qui prend un paramtre optionnel correspondant la page sur laquelle on souhaite effectuer le binding. Ici MaPage est un alias sur la page en cours, il nest pas obligatoire dans ce cas dutilisation. La liaison des champs peut bien sr tre combine une association manuelle. Cette liaison sapplique galement dans lautre sens, de la page (des champs) vers la base de donnes, la fonction mise en uvre est alors PageVersFichier().

Boonaert Nicolas http://blog.boonaert.net

57 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Requte intgre Lorsquon ajoute un champ la page, on souhaite parfois linitialiser de manire automatique sans avoir composer une requte puisque ces donnes ne sont affiches qu travers ce champ. Pas de rutilisation ailleurs, la solution est alors de composer une requte spcifique pour le champ : cette solution, cest la requte intgre. Pour cela, on observe plusieurs solutions permettant de crer cette requte intgre, la plus simple est de la crer en mme temps que le champ, ici par exemple lors de la cration dun champ de type table, on propose de remplir le champ laide des rsultats provenant dun fichier ou dune requte, dune requte que lon souhaite dfinir maintenant (requte intgre) et enfin de le remplir manuellement via code. On choisit ainsi la seconde possibilit permettant de mettre en uvre la requte intgre :

Lassistant graphique ddition des requtes apparat et on choisit les donnes que lon souhaite exploiter, puis lassistant de cration du champ table nous invite choisir les rubriques que lon souhaite afficher dans la table, la rubrique de parcours (permettant de dfinir lordre dajout dans la table), puis les proprits de la table et de mise en forme :

Une fois toutes les tapes valides, en excution, la table est directement exploitable, le binding est simple, aucune ligne de code pour afficher ou exploiter les donnes. Boonaert Nicolas http://blog.boonaert.net 58 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

La liaison des donnes est une fonctionnalit trs puissante et utile qui fait gagner un temps prcieux aux dveloppeurs. Dans certains cas particuliers, on ne peut pas utiliser cette technique de liaison, il est alors utile de procder de manire manuelle, mais lorsquon peut la mettre en uvre, il ne faut absolument pas hsiter car cette liaison est galement une source de rtromodification : lorsquon modifie, par exemple, le format dans la base de donnes, le champ li peut tre modifi automatiquement si on le souhaite. Cest donc une valeur sre en termes de maintenabilit.

Boonaert Nicolas http://blog.boonaert.net

59 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

2.7. Gnration des tats


Les tats sont des rapports, des vues dinformations, des documents textuels ou graphiques, principalement destins tre imprims ou envoys via un support diffrent dune page Web. On peut par exemple les utiliser pour envoyer des emails ou des courriers ou bien mme directement gnrer des documents PDF ou sous dautres formats. 2.7.1. Etat simple Par tat de base, on entend un tat qui ne contient pas de donnes particulires, il est tabli de manire statique par le dveloppeur pour afficher de linformation gnrale. Pour crer un tat, il suffit de procder la cration dun nouvel lment dans le projet : Fichier > Nouveau > Etat. Aprs avoir choisi de crer un nouvel tat, il faut tout dabord choisir son type :

Le type dtat permet de crer les sections dtat, de configurer ltat en fonction du besoin et de crer des champs par dfaut. Pour cet tat de base, on choisit de ne pas utiliser de type particulier et on choisit donc le type dtat vierge. Lassistant qui suit nous permet de dfinir la source de donnes, dans ce premier tat, on choisit de ne pas utiliser de source de donnes. Reste ensuite spcifier les informations de format et de style de ltat avant de saisir enfin le nom de ltat et une brve description. Une fois les tapes de cration valides, on peut voir laperu de ltat dans lditeur dtat de Webdev, on enregistre ltat (par dfaut lextension est .wde ) et on peut le voir ajout dans larborescence du projet :

Boonaert Nicolas http://blog.boonaert.net

60 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Lditeur dtat nous indique que ltat est compos de diffrentes parties permettant dassurer la mise en page de ltat final. La liste de ces diffrentes parties, appeles blocs dans lditeur, peut tre dite dans la description (Clic Droit > Description) de ltat.

Chacune de ces parties peuvent alors dfinir des proprits et la forme du document correspondant ltat final, dans la description de ces parties :

On peut ainsi paramtrer totalement ltat dans sa forme.

Boonaert Nicolas http://blog.boonaert.net

61 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Pour ajouter des champs sur ltat, on procde comme avec les pages : Barre de menu > Insertion > Nouveau champ Barre doutils ddie en utilisant un simple glisser/dposer

Les proprits des champs peuvent tre dites via lassistant de description des champs. Une fois compos, ltat peut tre prvisualis en excution (Petit Go) sous diffrentes formes :

Pour utiliser ltat en programmation, on a sa disposition plusieurs fonctions, on peut mme directement afficher cet tat dans le navigateur :
NomFichier est une chane = "fichier.PDF" iAperu(iPDF, NomFichier) iImprimeEtat(ETAT_Simple) FichierAffiche(NomFichier, "application/pdf")

On cr une chane correspondant au nom du fichier. Le fichier sera gnr par dfaut dans le rpertoire WEB du site (rpertoire racine du serveur pour les lments du site). On initialise les paramtres dimpression en indiquant le type de fichier et le nom (et/ou chemin) du fichier gnr laide de la fonction iApercu(). Cette fonction prend dans ce cas prcis en paramtre le format du fichier (le type) et le chemin. Il existe de nombreux diffrents prototypes pour cette fonction permettant denvoyer le document une imprimante, via le fax et bien dautres solutions. On imprime rellement ltat. Ltat est initialis et gnr selon les paramtres indiqus. A ce moment le fichier PDF est vritablement gnr. On utilise la fonction iImprimeEtat() qui prend en paramtre le nom de ltat imprimer. La dernire ligne permet dafficher le fichier dans le navigateur de lutilisateur. On utilise la fonction FichierAffiche() qui prend en paramtre le chemin du fichier et le type MIME associ. Dune manire gnrale, les fonctions prfixes par iXXX sont des fonctions qui traitent de limpression ou la gnration de fichier. Elles peuvent tre utilises pour travailler avec les tats.

Boonaert Nicolas http://blog.boonaert.net

62 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

2.7.2. Etat paramtr Dans certains cas, il peut tre utile de passer des paramtres un tat pour le gnrer et ajouter des informations personnalises. Pour utiliser des paramtres au sein des tats, il suffit de modifier le code douverture de ce dernier et lappel la fonction iImprimeEtat() : Dans le code douverture de ltat :
PROCEDURE ETAT_Simple(gMonParametre1, gMonParametreOptionnel = "texte optionnel")

Le premier paramtre est obligatoire, le second est optionnel puisquil a une valeur par dfaut. Dans le code de lecture des donnes de ltat, pour utiliser ces paramtres :
LIB_Nom = gMonParametre1 + " " + gMonParametreOptionnel

Les paramtres sont directement utilisables comme des variables.

Pour initialiser ces paramtres au moment de lappel iImprimeEtat(), dans le code dun bouton de la page (code de clic serveur) :
//Impression au format PDF NomFichier est une chane = "fichier.PDF" iAperu(iPDF, NomFichier) iImprimeEtat(ETAT_Simple,"Nicolas Boonaert") FichierAffiche(NomFichier, "application/pdf")

iImprimeEtat() prend les paramtres la suite du nom de ltat imprimer. On peut noter laide la saisie efficace :

Boonaert Nicolas http://blog.boonaert.net

63 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

2.7.3. Etat reposant sur la base de donnes Parfois, on souhaite afficher des informations directement issues de la base de donnes sur un tat, il est tout fait possible de lier une source de donnes des champs de cet tat grce Webdev. Dans le cas dune cration, il suffit de cliquer sur le type de source de donnes associer, dans le cas prsent, on choisit de modifier ltat de base, on entre ainsi dans la description de ltat et sur longlet Donnes.

Dans le cas mis en uvre ici, on souhaite afficher les donnes provenant de la requte utilise prcdemment. Aprs avoir renseign ce choix ainsi que le fichier imprimer, nous allons voir les modifications que a apporte. Tout dabord, puisquon souhaite afficher le contenu dune requte, il est ncessaire dinitialiser la requte avant limpression de ltat. Ainsi dans le code de gnration/impression de ltat, on modifie le code :
dhMaDateLimite est une DateHeure dhMaDateLimite..Mois = 3 dhMaDateLimite..Anne = 2007 dhMaDateLimite..Jour = 12 dhMaDateLimite..PartieHeure = 0 //Impression au format PDF NomFichier est une chane = "fichier.PDF" iAperu(iPDF, NomFichier) iInitRequteEtat(ETAT_Simple,dhMaDateLimite) iImprimeEtat(ETAT_Simple,"Nicolas Boonaert") FichierAffiche(NomFichier, "application/pdf")

On ajoute lappel iInitRequteEtat(), cette fonction prend en paramtre ltat sur lequel est tablie la liaison avec la requte initialiser, puis les paramtres ventuels de la requte.

Boonaert Nicolas http://blog.boonaert.net

64 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Ensuite dans ltat, on ajoute par exemple un champ de type libell, on souhaite afficher le contenu dune rubrique, pour cela, on indique pour son contenu la forme suivante :
[%Description%]

Dune manire gnrale :


[%Rubrique%]

Lors de la lecture des donnes, cette notation est remplace par la valeur du contexte de donnes.

2.8. Dploiement du site


Le site ralis pendant la priode de stage a t dploy sur un systme Windows Server 2003 utilisant IIS. Pour dployer le site ralis, PC Soft a une nouvelle fois simplifi cette tape en automatisant la procdure. Ainsi pour effectuer cette tche : Menu > Atelier > Crer la procdure dinstallation. Lassistant ddi apparat et on peut alors slectionner les lments du projet inclure dans la procdure dinstallation ainsi que les langues. On peut ensuite renseigner des informations qui seront utilises dans la description du fichier dinstallation telles que le nom de la socit, la version, la description et les informations de copyright. Aprs avoir valid les diffrentes tapes, lassistant de cration de fichier dinstallation apparat, on peut alors choisir le type dinstallation que lon souhaite utiliser : Installation distance, mise jour distance, installation sur mdia physique (CD ou autre), Prparation dun package de dploiement. Dans notre cas dutilisation, on utilise linstallation via un media physique.

Aprs avoir renseign ces informations, le fichier dinstallation est gnr dans le dossier de travail du projet, par dfaut dans un sous dossier INST : C:\Mes Sites\Mon_Projet_Exemple\INST Pour installer le site, il suffit de double-cliquer sur le fichier gnr sur le serveur, linstallation simplifie arrte les services Internet du serveur (IIS ou Apache) et les redmarre juste aprs.

Boonaert Nicolas http://blog.boonaert.net

65 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

2.9. Mise jour du site


2.9.1. Mise jour de la base de donnes Un projet voluant en permanence en fonction des besoins, il arrive quon ait modifier lanalyse (schma de la base de donnes). Lorsquon modifie lanalyse, il faut galement modifier les fichiers de donnes utiliss par le site. En effet, pour viter tout souci de corruption des fichiers de la base de donnes, il faut rpercuter les modifications de la dfinition (analyse) vers le fichier de donnes. Lorsquon est matre de projet, on peut modifier lanalyse. Une fois lensemble des modifications effectues, on peut rgnrer lanalyse, son numro de version est alors incrment, pour cela il faut cliquer sur licne correspondant :

Pour chaque gnration, on peut voir une version danalyse, les informations correspondantes sont stockes dans un dossier du projet : MonAnalyse.wd11/ANAXXXXX (ou XXXXX correspondant la version). Webdev nous informe, travers un assistant de modification automatique, que certains fichiers ont t modifis, cet assistant prend en compte les diffrentes connexions sur les bases de tests, de production et mme les rpliques de sauvegarde, le matre de projet peut alors choisir les bases dont les fichiers doivent tre modifis :

Puis il est possible de choisir sur le mme principe les fichiers modifier. Et il est galement possible de grer la sauvegarde avant modification effective des fichiers de donnes. De cette manire, lensemble de lopration de mise jour des donnes est effectu avec sauvegarde, et en cas de problmes dans cette tape critique, il est toujours possible de revenir une version prcdente fonctionnelle. Lorsquon travaille en quipe, il arrive quon ne soit pas matre de projet ou quune autre personne ait eu modifier lanalyse. En rcuprant le projet ou la dernire version de lanalyse, on peut rencontrer des diffrences de versions entre lanalyse et les fichiers de donnes. Boonaert Nicolas http://blog.boonaert.net 66 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

Lerreur se manifeste par ailleurs lors de laccs aux donnes et donc en fonctionnement. Pour mettre jour une base de donnes qui ne la pas t (exemple dune base locale non mis jour par le matre de projet), on peut utiliser loutil WDModFic du centre de maintenance. Pour cela, travers la barre de menu > Outils > WDOutil : Centre de maintenance. Le centre de maintenance apparat et regroupe lensemble des outils utiles de Webdev comme le comparateur de fichiers sources, la gestion de diffrence des analyses et bien dautres outils de gestion de projet et de dpendances. On slectionne loutil WDModFic qui est relativement simple utiliser. En effet il suffit de slectionner lanalyse de rfrence pour la modification travers lassistant, puis la ou les bases modifier ainsi que les fichiers. Les fichiers de donnes sont mis jour et sont alors en cohrence avec lanalyse slectionne, les donnes sont conserves sil sagit dun ajout de champs ou mme dune modification de format, la modification seffectue vritablement de manire automatique, on ne doit pas rintgrer les donnes manuellement par la suite.

Boonaert Nicolas http://blog.boonaert.net

67 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

3. Rflexion sur loutil utilis


Aprs plusieurs mois dutilisation de loutil Webdev, il est important davoir un il critique pos sur loutil. Tout dabord, Webdev amliore la productivit. Cest un fait indniable et cela se remarque dautant plus lorsque les dveloppeurs et utilisateurs de Webdev matrisent loutil. Cependant et il est important de le prciser, les projets mis en uvres sont rarement aussi consquents que dautres raliss sur des technologies plus rpandues et bien plus robustes (J2EE, .Net).

Laccs aux donnes, cest--dire la facilit dinteraction avec la base est une force majeure de la suite de PC Soft. En effet Webdev, en simplifiant cet accs, apporte un gain de temps et defficacit tout en prservant une certaine flexibilit concernant cet outil et peut alors sadapter lexistant.

Lintgration des nouvelles technologies comme le support dAJAX est galement un rel avantage, lvolution du produit se fait encore sentir sur ces points des nouvelles technologies, mais force est de constater que loutil conserve simplicit et puissance. Ces technologies voluent au fil des versions cependant, il est trs dlicat de connatre les prochaines orientations des versions et on peut parfois tre amen fiabiliser un traitement, crer un champ en passant par des astuces de dveloppement, qui savrent au final inutiles puisque la prochaine version les intgre simplement (glisser dposer ou proprits particulires). Le manque daccs au code de sortie est galement une limitation qui peut gner mais qui respecte la philosophie de PC Soft sur le produit Webdev. En effet on se concentre davantage sur lexploitation de ses lments sans se contenter de ce qui est gr plus bas niveau. Webdev permet par exemple dutiliser AJAX de manire simple : en un clic ou en configurant quelques informations sur le champ.

En rsum, Webdev est un outil de qualit, rencontrant parfois des soucis dutilisation dans diffrents domaines et souffrant du manque dune vraie communaut de dveloppeurs. Loutil volue en permanence, et alors que la version 11 tait utilise pendant le stage et pour cet article, on vient de voir paratre la version 12 avec toujours plus de nouveauts.

Boonaert Nicolas http://blog.boonaert.net

68 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr

Guide complet - Webdev

23 avril 2008

4. Conclusion 4.1. Une base commune rutilisable


Le projet Spilo sappuie sur une base de donnes unique et commune lensemble des sites raliss. Le site gnral continue dvoluer au fil des versions tandis que plusieurs sites thmatiques sont en cours de prparation en sappuyant sur une base dveloppe pour tre rutilise sans grand changement de code. Lintgration de Virtual Earth au sein des sites thmatiques a t revue pour simplifier la maintenabilit et lensemble du projet a t prvu pour pouvoir tre facilement mis jour tant sur la forme que pour les contenus.

4.2. Une ouverture vers dautres technologies


En utilisant une base de donnes HyperFile Client/serveur, on assure une disponibilit renforce et on profite de lanalyse tablie au sein du projet. Au sein des diteurs de PCSoft savoir Windev, Webdev et Windev Mobile, on utilise un seul et mme projet. Il est alors possible dutiliser la mme analyse afin dassurer une utilisation sur diffrentes plateformes et sous diffrentes formes. Ainsi, sous Windev il est tout fait possible de crer un web service qui pourra alors tre interrog partir dun client quimporte le langage de dveloppement pourvu de la possibilit de communication avec un Web Service. Cest dailleurs lobjet dun des projets afin douvrir la plateforme dautres technologies et diversifier les utilisations.

Boonaert Nicolas http://blog.boonaert.net

69 / 69

Les sources prsentes sur cette page sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une uvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - 16/01/2008. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Certaines images prsentes ici sont proprits de PCSoft http://pcsoft.fr