webdev - desenvolvimento de sites, webservices, intranets e extranets

31
PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud Web 2.0, Ajax, HTML5, PHP Toutes les Bases de Données CODE MULTI-PLATEFORMES : Windows, .Net, Linux, Java, PHP, Internet, Ajax, Android, Windows Phone, iOS (iPhone, iPad) ... Développement en L5G

Upload: adriano-boller

Post on 14-Apr-2017

621 views

Category:

Internet


5 download

TRANSCRIPT

Page 1: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

PLATEFORME INTÉGRÉE DE DÉVELOPPEMENTWEB

Internet, Intranet, CloudWeb 2.0, Ajax, HTML5, PHP

Toutes les Bases de Données

CODE MULTI-PLATEFORMES : Windows, .Net, Linux, Java, PHP, Internet, Ajax, Android, Windows Phone, iOS (iPhone, iPad) ...

Développement en L5G

Page 2: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

Des sites toujours à jour, quipartagent en toute sécuritéles données de l’entreprise

NATIONAL AWARD

Aujourd’huiles sites Internetet Intranet sont reliés en temps

réel aux donnéesde l’entreprise et se

comportent commede véritables applica-

tions. WEBDEV 20 est la

meilleure solution pourcréer ces sites.

Avec WEBDEV 20, vos équipescréent ces sites et ces applications 10

fois plus vite. Vos budgets sont respectés.

Comme des dizaines de milliers de développeursen France, choisissez la plateforme la plus perfor-mante pour développer et publier vos sites et vosapplications Internet et Intranet: WEBDEV 20.

S o m m a i r e3 Le cycle complet

4 Questions/Réponses

6 Exemples

8 Compatibilité navigateurs

9 Une techno révolutionnaire

10 IDE: l’environnement intégréWYSIWYG

13 La techno des «7 onglets»

14 Templates & Zoning

16 HTML5 & CSS3

18 Sites statiques et dynamiques

19 Intranet, Internet

20 SSL, Paiement sécurisé

21 Les Référencement naturel,Sécurité par mot de passe

22 Des contrôles (champs) adaptés au Web

28 Le champ ZTR

30 L’éditeur HTML

31 Export Word, Excel, 64 langues

32 Le Langage L5G

33 Editeur de code

34 Le débogueur, tests unitaires

35 Les composants, la POO

36 Ajax en 1 clic

37 Les Webservices

38 Modélisation UML et Merise

39 Toutes les bases de données

40 HFSQL: base de données libre

42 Editeur de requêtes visuel

43 Générateur de rapports & PDF

44 Versionning (GDS /SCM)

45 Pilotage des projets

46 Import HTML & WINDEV

47 PHP

48 Accès natif Google, SAP,...

49 SaaS et Cloud

50 Déploiement

52 L’hébergement

54 Administration, Statistiques

55 Front Office, Back Office

57 Les services PC SOFT

59 Exemples de sites

BIENVENUE DANS LE MONDE DEL’INTERNET INTERACTIF !

Fournisseur Officiel de la Préparation Olympique www.pcsoft.fr • 3

GRÂCE À WEBDEV 20CRÉEZ TRÈS VITE DES SITES

INTERNET, INTRANETET SAAS QUIGÈRENT DES

DONNÉES

Page 3: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

4 • WEBDEV 20 : Développez 10 fois plus vite

1 A qui est destiné WEBDEV 20 ?A toutes les sociétés et tous les développeurs qui désirent réali-ser des sites et des applications INTERNET, INTRANET, Cloud etSaaS.

2 Quels types de sites et d’applicationspeut-on créer ?

Tous les types de sites. WEBDEV est spécialisé dans les sites «dyna-miques», c’est-à-dire qui se comportent comme de véritables appli-cations, et qui gèrent des données en temps réel.

3 Quelle est la formation requise ?Il suffit d’avoir programmé au moins une fois dans sa vie (ou sesétudes!). Une semaine suffit en général pour s’auto-former avecle manuel d’auto-formation livré en standard.

4 Faut-il des connaissances particu-lières sur INTERNET ?

Non. Vos équipes de développement produiront des sitesrobustes et efficaces. Tout le code (HTML, Javascript, Serveur)est généré par WEBDEV 20.

5 Comment créer un traitement AJAXavec WEBDEV 20 ?

Il suffit de cliquer sur le bouton «Ajax» du traitement... Il n’y apas plus simple.

6 Quel est l’avantage principal de WEBDEVpar rapport à d’autres outils?

Il y en a plusieurs, comme: l’intégration totale, la simplicité, lavitesse de développement, 3 à 10 fois plus rapide, ou encore l’ac-cès aux bases de données.

7 WEBDEV s’appuie-t-il sur des techno-logies standard ?

Oui, comme HTML5, XML, CSS, Javascript ou PHP. Mais vousn’avez pas besoin de connaître ces technologies, WEBDEVgénère automatiquement le code nécessaire.

8 Je possède un existant. Pourrais-je lerécupérer avec WEBDEV ?

Oui. Vous pouvez aspirer des pages HTML existantes. Vous pou-vez également mixer des pages WEBDEV avec un site existant,en conservant votre existant.

9 On n’a pas besoin de connaître Java, HTMLPHP ou Javascript pour créer des sites ?

Non, c’est inutile. WEBDEV génère automatiquement le codeHTML, Javascript, CSS et PHP optimisé qui est nécessaire.

10 Et si je veux saisir du HTML, ou récupé-rer un existant Javascript par exemple ?

WEBDEV est ouvert. Il est possible de saisir du code HTML, PHPou Javascript directement dans l’éditeur (ou de copier un codeJavascript ou HTML existant), voire même un script JSP ou ASP.

11 J’ai lu que WEBDEV est compatibleWINDEV; il faut posséder WINDEV ?

WEBDEV est une plateforme totalement autonome. Aucun autreoutil n’est nécessaire pour développer avec WEBDEV.

12 Et si je possède déjà WINDEV ?Dans ce cas, d’une part, la formation est plus rapide, d’autre partvous pourrez automatiquement transformer vos applicationsWinDev en applications Web...

13 L’éditeur de «pages» est-il WYSIWYG? Oui, au pixel près !

14 Quelles bases de données peuventêtre utilisées avec WEBDEV ?

Toutes les bases peuvent être utilisées: HFSQL, MySQL, SQLite, Oracle,AS/400, SQL Server, DB2, Informix, PostgreSQL, Progress, Access, ...

15 Ajax, XML, Flash, CSS, W3C, JSON,JQuery sont-ils supportés ? Oui.

16 WEBDEV permet-il de développer dessites de grande envergure ?

Oui, c’est même dans ces projets qu’il excelle: sites Internet,Intranet et SaaS.

17 Quel Support Technique est dispo-nible?

C’est très simple: le Support Technique WEBDEV est gratuit (15 requêtes personnalisées gratuites par téléphone ou paremail)

18 Qui utilise WEBDEV ?Tous les types de structures professionnelles: SSII, construc-teurs, services informatiques, ingénieurs de laboratoire, minis-tères, administrations, indépendants...

19 Je peux générer des sites en pur«PHP» avec WEBDEV 20 ? Oui, c’est une fonctionnalité standard.

20 En France WEBDEV est donc «le» stan-dard pour créer des sites dynamiques ? Oui, certainement.

Nous répondons ici aux questions que l’on nouspose le plus souvent surWEBDEV.

Vous y retrouverez certainement les réponses àquelques-unes de vos interrogations.

Vous avez d’autres questions? Appelez-nous,nous y répondrons avec plaisir.

Consultez le numéro spécial de la revue«01Net» consacré à WEBDEV et WINDEV

pour découvrir 100 témoignages de sociétés prestigieuses.

Hébergement sous Windows ousous Linux !(et dans le Cloud)

QUESTIONSREPONSES

www.pcsoft.fr • 5

WEBDEV 20gère le cycle de vie completdes sites

WEBDEV 20 GÈRE TOUTES LES PHASESDE LA CRÉATION D’UN SITE

W E B D E V,c’est l’assu-

rance d’un pro-duit complet et

totalement intégré: laformation est plus

rapide, le support tech-nique est meilleur (et gratuit).

Les sites «dynamiques» sont main-tenant la norme de l’INTERNET et de

l’INTRANET. Ces sites sont faciles à déve-lopper et à maintenir avec WEBDEV 20.

• Le maquettage•  La conception•  Le dossier d’analyse

et de programmation•  La liaison avec les

sites statiques exis-tants

• Les Bases de Données•  La programmation

(L5G, Webservice, Ajax,.NET, J2EE, HTML,

HTML5, Javascript...)• La reprise de l’existant•  Les états (PDF, codes-

barres,...)•  Le paiement sécurisé•  La création et l’utilisa-

tion de composants•  La documentation•  Les tests en cours de

dévelop-pement

•  La liaison avec le BackOffice

•  L’hébergement• La gestion SaaS, le

Cloud•  Le travail avec les

infographistes•  L’installation chez

l’hébergeur

• Les tests de non-régression

•  Les tests de perfor-mance

•  L’intégration continue• La maintenance et les

évolutions•  Les statistiques de

fréquentation•  L’assistance au déve-

loppement

TOUTES LES PHASES DU DÉVELOPPEMENT SONT PRISESEN COMPTE EN STANDARD PAR WEBDEV 20

Page 4: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

DES SITES RÉUTILISABLES, ET PERSONNALISABLES SONT LIVRÉSWEBDEV 20 est livré avec de nombreux sites déjà dévelop-pés. Le code source et les pages sont livrés: vous pouvez uti-liser directement ces sites, les modifier, les personnaliser, lesrevendre...

UN ASPECT DIDACTIQUEVous pouvez également étudier l’analyse et le code de cessites, dans un but didactique.

PARMI LES SITES LIVRÉS...Voici une sélection de quelques exemples livrés :

• Commerce électronique Gestion des rayons, du chariot, du paiement.

• Petites annoncesGestion de plusieurs critères de sélection.

• Annuaire partagéEn Intranet, l’annuaire pourra êtrepartagé dans une entreprise. En Internet, l’annuaire pourra êtrepartagé entre différentes agences,ou par les membres d’une associa-tion...

• Gestion de parc matériel

Répartition et affectation du maté-riel sur un site.

• Agence immobilièreRecherche d’un bien en fonction de nombreux critères.

• CMSSystème de gestion de contenu.

• Gestion d’une base documentairePour archiver et retrouver des documents en fonction demots-clés que vous décidez.

• Paiement sécurisé(voir détail page 20)

• Gestion d’agence de voyage Présentation des hôtels, des disponibilités, sélection selon denombreux critères, ...

• News, Forum, Blog, Site associatif...... et tout un ensemble d’autres exemples immédiatement uti-lisables.

ETC...De nombreux autres exemples sont également livrés sousforme de pages, ou sous forme d’objets dans le dictionnaireinteractif.

Une partie du dictionnaire interactif de WEBDEV

GAGNEZ DU TEMPSLes sites livrés, que vous pourrez adapter à vos besoins, vouspermettront de gagner beaucoup de temps lors de vos déve-loppements.

Réutilisez les exemples

dans vos sites

WEBDEV®

DE NOMBREUX SITES PRÊTS À L’EMPLOI SONT LIVRÉS

En ra

ison

des é

volu

tions

per

man

ente

s, l’a

spec

t des

site

s livr

és e

t pré

sent

és p

eut d

iffér

er.

6 • WEBDEV 20 : Développez 10 fois plus vite

Honolulu : portail IntranetUn portail Intranet com-plet, avec toutes ses applications (messageries,news, recherche documentaire,...), estégalement livré.Directement utilisable, ilpeut également êtreadapté à vos besoins(source livré).

Honolulu a déjà été diffuséà plusieurs centaines demilliers d’exemplaires

DES SITES EN WEBDEVParmi les dizaines de milliers de sites réalisés enWEBDEV, en voici quelques-uns. Retrouvez-enplus de 1000 sur le site www.pcsoft.fr.

DES DIZAINES DE MILLIERSDE SITES

Des milliersd’autres sites àdécouvrir surwww.pcsoft.fr

www.pcsoft.fr • 7

Page 5: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

Internet Explorer sous Windows

Firefox sous Windows

Firefox sous Linux

Tablette sous Android

iPad

Chrome sous Windows

Safari sur Mac

WEBDEVgénère à lademande dessites compa-tibles avec lanorme W3Ctransitional

LES SITES CRÉÉSAVEC WEBDEVSONT COMPATIBLESAVEC TOUS LESNAVIGATEURS

Les navigateurs propo-sent tous leurs particu-larités, qui diffèrentmême selon les ver-sions.WEBDEV génère uncode générique, qui estreconnu par quasimenttous les navigateursstandard du marché.Voici la consultation dumême site sous diffé-rents navigateurs etsystèmes.

LE MÊME SITEWEBDEV S’AFFICHE SURTOUS LES NAVIGATEURS

iPhone

VOS SITES COMPATIBLES TOUS NAVIGATEURS

8 • WEBDEV 20 : Développez 10 fois plus vite www.pcsoft.fr • 9

WYSIWYG:créez en visuel

WEBDEV®

CRÉATION DE PAGE : UNE MÉTHODE RÉVOLUTIONNAIRECréez vos sites «à la souris», WEBDEV 20génère automatiquement le code HTML, lecode Javascript et le code Serveur néces-saires au site. Et sur demande, WEBDEV 20génère même le site en PHP.

CLIQUEZ AU LIEU DE CODERWEBDEV 20 est un environnement complet, intégré.L’ensemble du développement s’effectue avec un seul envi-ronnement et un seul et unique langage: le WLangage, L5Gd’une très grande PUISSANCE, et FACILE à apprendre.

WEBDEV 20 permet ainsi de s’affranchir des connaissancesinutilement complexes de l’Internet. Par ailleurs, les traitements sont totalement séparés despages, il n’y a pas de mélange comme avec des langagestraditionnels.Les pages se créent facilement en positionnant les champsà la souris (voir encadré page 10). Des zones de champs peuvent être créées pour les dépla-cements et décalages d’un bloc.

HTML, CSS ET JAVASCRIPTInutile de connaître ni HTML, ni CSS, ni Javascript pour réa-liser de superbes et puissants sites dynamiques.WEBDEV 20 génère tout le code qui est nécessaire à votreplace.Mais WEBDEV 20 est OUVERT, et si cela est nécessaire, ilest toujours possible de taper (ou coller) directement ducode de bas niveau: HTML, CSS, Javascript, scripts ASP, JSP,Applets Java, PHP...

Avec WEBDEV 20, vos équipesdéveloppent 10 FOIS PLUS VITE tous lestypes de sites et d’applications, Internet,Intranet, Extranet et SaaS.

L’éditeur de WEBDEV : visuel,création des pages et deschamps à la souris !

Code HTML qu’il fallaittaper soi-même Code Javascript qu’il fallait taper

soi-même

Le WLangage de WEBDEV: simplifiez et réduisez le code !

La création et le paramétrages’effectuent visuellement, enWYSIWIG, à la souris, pour lespages et les puissants champs. Inutile de connaître HTML pourcréer des pages sophistiquées.

Page 6: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

10 • WEBDEV 20 : Développez 10 fois plus vite

La méthode laplus intuitive

WEBDEV 20 propose certai-nement l’environnement detravail le plus puissant, leplus facile et le plus intégrédu marché !Vos équipes créeront facile-ment de superbes sites.Aucune connaissance préa-lable de la programmationInternet n’est nécessaire.Le générateur de pages de WEBDEVpermet de réaliser facilement desuperbes pages.

PC SOFT bénéficie d'une expérience deplus de 20 ans dans la conception d'ou-tils de création d'IHM. Cette expérience aété mise à profit pour WEBDEV.

Notez que les pages suivantesdétaillent de nombreuses fonctionnali-tés présentées dans ce chapitre.

LES CHAMPS DANSLES PAGES: WYSIWYG RÉVOLU-TIONNAIRE !Les différents champs (saisie, table,image...) sont créés et positionnésvisuellement, en interactif sous l'édi-teur. Ce que vous voyez sous l’éditeurcorrespond à ce que l’internauteverra dans son navigateur.Les pages (avec les champs, leurscaractéristiques détaillées définies parles 7 onglets, et leur code) sont sauve-gardées comme éléments réutili-sables.Cette technique permet de simplifier laprogrammation, en gérant les pagescomme des objets évolués. L’éditeur de pages permet de créer et

de modifier visuellement les champs,indépendamment du code source.

Il est possible de s’abonner aux éven-tuelles modifications d’un élément par-tagé entre plusieurs développeurs(héritage).

Avec WEBDEV 20, il est bien sûr pos-sible d'intervenir par programme pourmodifier les propriétés d'un champ:cible, couleur, visibilité,... Par exemple, selon le profil de l’inter-naute, il est possible de rendre deschamps visibles ou invisibles, ... Tout estdynamique !

Cette technique de gestion des pageset des champs fait gagner un tempsconsidérable lors de la maintenancedes sites, et apporte un gain de robus-tesse.Et un simple «GO» permet de testerimmédiatement le site.

UN POSITIONNEMENTPRÉCIS AVEC OU SANSCSSWEBDEV inclut de manière transpa-rente des algorithmes de positionne-ment (à la souris) très puissants, et per-met un positionnement au pixel près. WEBDEV peut faire appel, si vous ledésirez, aux feuilles de styles à la normeCSS. Les feuilles de styles se créent faci-lement depuis l’environnement (voirégalement CSS3 p17)

Les tables de positionnement optimisent le poids des pages

TOUS LES CHAMPS POURINTERNETL'éditeur de WEBDEV permet de créeret manipuler tous les champs dontvous aurez besoin pour réaliser rapide-ment de superbes interfaces (voirpages 22 à 29).

Les principaux objets gérés par l'éditeurd'IHM sont:• Texte, libellé HTML

WEBDEV®

UN PUISSANT ENVIRONNEMENT VISUEL

Sous l’environnement intégré

Une méthode

révolutionnaire !

La création des pages

est facile:

glissez/déplacez les

champs à créer

depuis le ruban,

positionnez-les

directement à la

souris !

Les caractéristiques

personnalisées du

champ se

définissent en visuel

par les «7 onglets»

(voir page 13)

www.pcsoft.fr • 11

• Champ de saisie, saisie riche• Champ d’affichage formaté• Sélecteur, interrupteur• Liste, combo, treeview• Bouton texte, bouton graphique• Web Caméra• Image statique, dynamique, générée • Zone de cliquage, Map Area• Table, Champ zone répétée• Champ HTML• Champ Applet Java, Objet Flash• Champ «réglette» de parcours• Superchamp, Modèle de champs, • IFrame, Page interne• SiteMapPath, Plan du site, • Graphe, Calendrier• Onglets, etc...Les masques de saisie HTML5 sontgérés.

POSITIONNEMENT PARANCRAGE Les ancrages définissent la manièredont le contenu d’une page va se com-porter lorsque la page est agrandie parl’internaute.La gestion des ancrages en WEBDEV20 est très facile.

LE CHAMP «ZONE RÉPÉTÉE» WEBDEV permet la création de zonesrépétées multicolonnes, remplies auto-matiquement par liaison fichier, ou parprogrammation personnalisée ( voirpage 23).

DÉFINIR UN LIEN Pour définir un lien depuis un boutongraphique ou un champ lien, il suffit depointer la page à afficher à l’aide dumini-modifieur.

Ce lien peut être redéfini par programma-tion si nécessaire.

LES GRAPHIQUES DEGESTION INTERACTIFSUn grapheur est livré avec WEBDEV; ilpermet de réaliser facilement des his-togrammes, des courbes, des camem-berts, boursiers... en 2D ou en relief.Les graphiques sont statiques ou inter-actifs, avec ou sans mire.

DES BOUTONS INTELLIGENTSLe «multi-clic» sur les boutons de vali-dation est neutralisé par défaut. Uninternaute qui clique 3 fois sur le bou-ton «valider» ne recevra pas 3 fois sacommande...

PLAN DU SITELe plan du site est calculé par rétro-analyse de l’existant, en fonction desliens fixes et programmés.

Un champ «plan du site» est automa-tiquement créé pour être inclus dans lesite généré.

DES AMBIANCES POURTOUS LES USAGESWEBDEV 20 est livré avec de nom-breuses ambiances de pages, permet-tant ainsi de réaliser facilement dessites pour toutes les cibles (comme parexemple ci-dessous, sur un iPhone).

CRÉEZ FACILEMENT VOS PAGES

DE BELLES PAGES FACILEMENT La création des pages s’effectue facilement, en visuel, et vousdisposez d’un arsenal impressionnant de champs (contrôles)très puissants. Un «champ de saisie» WEBDEV avec toutes sesfonctionnalités intégrées, qui se pose par un simple«glisser/déplacer» à la souris correspond à plus de 50 lignesJavascript ! Vous imaginez facilement le code que vous écono-misez.

Découvrez dans les pages suivantesles principales possibilités offertespar l’éditeur intégré de WEBDEV 20.

Page 7: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

12 • WEBDEV 20 : Développez 10 fois plus vite

WEBDEV®

UN ENVIRONNEMENT DE CRÉATION WEBINTÉGRÉ ET INTUITIFL’environnement de tra-vail WYSIWYG de WEBDEVapporte un confort propice àla productivité. Vos équipes réaliseront faci-lement les sites que vousdevez développer, et que vosclients et utilisateurs atten-dent.WEBDEV 20 est facile àprendre en main: unesemaine suffit en général àun développeur.Tout est en français: c’est plus clair (ver-sion anglaise également disponible).

Tout est intégré avec le même modeopératoire, tout est visuel, tout estinclus: vos équipes développent plusvite!Le Support Technique5 est égalementinclus, ce qui représente encore unconfort et des économies non négli-geables, ainsi qu’un gain de temps dedéveloppement supplémentaire.Notez que les projets peuvent être sau-vés dans le Cloud, ce qui facilite le tra-vail en équipe.WEBDEV 20 est compatible WINDEV20. Roue chromatique dans l’environne-

ment

Un petit carréjaune indique quele champ fait par-tie du modèle(template)

Un menu contextuel(clic droit) est dispo-nible pour un accèsrapide aux différentesfonctionnalités

Un menu contextuel(clic droit) est dispo-nible pour le paramé-trage des barresd’icones.

Les volets proposent descomposants, des champs,du code,... pour vous faire gagner dutemps

Volet: il donneune vision glo-bale du projet; undouble-clic (ou undrag & drop) surun élémentl’ouvre immédia-tement

Ruban & boîtes à outilsdéplaçables, visibles oupas, et paramétrables

Barre d’informationindiquant le nomde la page encours, sa taille,...

L’interface des éditeurs estvraiment très intuitive, ettrès efficace.

Note: la combi-naison de touchesCtrl W permet dedégager momen-tanément l’espacede travail en mas-quant les volets.

Affichage optionnel

L’ENVIRONNEMENT INTÉGRÉ EST TRÈS INTUITIF.

La méthodologie proposée par les «7 onglets»pour définir des champs puissants est très intui-tive: aucune connaissance préalable d’Internetn’est nécessaire, tout est décrit en français lim-pide.Les caractéristiques de chaque contrôle (champ) se définissent parl’intermédiaire d’un mode de dialogue exclusif, très facile et trèspuissant: les «7 onglets».Chacun des onglets permet de définir les différentes caractéris-tiques du champ. Si nécessaire il est également possible de modi-fier ces caractéristiques par programme.

Le contenu des onglets diffère selon le type d’objet; voici le détaildes 7 onglets pour un champ de type «Saisie».

Onglet «Liaison»: pour lier les données aux pages, ...

Onglet «Aide»: bulle d’aide, message d’aide...

Onglet «Avancé»: pour saisir ou copier/coller du code HTML

Onglet «Détail»: définissez les caractéristiques en saisie

Onglet «Style»: définissez les caractéristiques du champ:taille de police, caractères forcés en majuscules...

Onglet «Code»: saisissez directement dans l’événement(entrée dans le champ, clic sur le champ, ...)

le code WLangage, Javascript et ou PHP

La technologie des «7 onglets» permet la création de pages efficaces.

www.pcsoft.fr • 13

Les 7 ongletsfacilitent lescréations depage: il suffit decliquer

WEBDEV®

TECHNOLOGIE 7 ONGLETS : DES CONTRÔLESPUISSANTS EN QUELQUES CLICS

Onglet«Général»: nom,libellé, type duchamp, visuali-sation du style...Ici masques pro-posés

1

4

5

6

7

2

3

Page 8: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

Commencer un nouveau siteavec WEBDEV 20 est un jeud’enfant: choisissez uneambiance, une palette decouleur, un modèle de pagesprédéfini et votre premièrepage est créée sur une basesolide !

LES MODÈLES DE PAGE(TEMPLATE), POURSTRUCTURER LE SITELe modèle de pages est un élémentessentiel dans la construction des sitesWeb.Un modèle de pages contient la pré-sentation «commune» à plusieurspages.Le modèle de pages définit l’architec-ture des pages: • en-tête de page• menu• colonne• pied de page• bandeau pub• … (voir le concept de «zoning»).Les éléments communs sont position-nés dans ce modèle de pages.Un modèle de pages peut égalementcontenir des images, des champs, ducode, des procédures, …Lors de la création du site, chaque pagecréée peut hériter d’un modèle depages.Toute modification apportée aumodèle de pages sera propagée auto-matiquement à toutes les pages utili-sant ce modèle de pages.Dans une page, il est bien entendu pos-sible de «surcharger» une propriété dumodèle de pages si cela est nécessaire.

MODÈLES DE PAGES PRÉDÉFINISWEBDEV 20 propose de nombreuxmodèles de pages prédéfinis.Ces modèles permettent de gagner untemps considérable lors de la concep-tion d’un site Web.Ces modèles prédéfinis s’adaptentautomatiquement aux ambiances.

AMBIANCE, POUR DÉFI-NIR LE LOOK DES PAGESUne ambiance définit un ensemble destyles, une palette de couleurs, desillustrations, des polices de carac-tères,…Changer d’ambiance permet de chan-ger le look du site ou d’une page, sansen changer la structure et la mise enpage.De nombreuses ambiances sont livréesavec WEBDEV 20.Il est possible de changer l’ambiance

d’un site ou d’une page donnée à toutmoment.

LA PALETTE DE COULEURS, POUR L’HAR-MONIE DES COULEURSUne palette de couleurs est unensemble de couleurs harmonieuses(ton sur ton par exemple) utilisées dansles styles des pages.Une palette de couleurs définit parexemple une couleur de texte pour untitre, ainsi que la couleur de fond cor-respondante, ou bien la couleur d’unbouton, etc.De nombreuses palettes de couleursprêtes à l’emploi sont livrées.

14 • WEBDEV 20 : Développez 10 fois plus vite

TEMPLATE & AMBIANCES :LE WEB DESIGN FACILE !

Changement d’ambiance sur un site.Un site au printemps...

Le même site pendant la saison d’hiver: l’ambiance a changé (couleurs, styles,...)

ZONING EN ÉDITION(ZONE D’ÉDITION)WEBDEV 20 permet de délimiter deszones d’édition dans une page, c’est ceque l’on nomme le «zoning».Les zones permettent de définir l’ar-chitecture de la page: en-tête (<hea-der>), pied de page (<footer>), encart(<aside>),...Il suffit de découper la page en«zones» logiques.Une zone contient les champs qui ysont présents.Le zoning est en général défini dans unmodèle de pages et sera ainsi communà plusieurs pages du site (voir ci-contre).Une fois ces zones d’édition délimitées,la modification de la page est facilitéeen édition.

ANCRAGESIl est possible de définir l’ancrage dechaque zone et des champs qui la com-posent.Par exemple le fait d’agrandir le navi-gateur en largeur peut étirer une zonede la page pour donner plus d’espaceà un champ texte, tout en poussant leszones adjacentes.

ZONING EN EXÉCUTIONIl est également possible de définir lecomportement des zones et de leurcontenu pendant la navigation (en exé-cution).Lorsque l’internaute modifie la taille dunavigateur, ou bien si le contenu d’unezone change, la page peut se réorga-niser seule harmonieusement.Tout ceci est automatiquement gérépar WEBDEV 20 !Les moteurs de recherche reconnais-sent la sémantique des zones et ainsiréférencent mieux la page.

www.pcsoft.fr • 15

ZONING :LA MISE EN PAGE FACILE !

MANIPULATIONS D’UNEZONESi la zone est déplacée, ses champsseront ensuite automatiquementdéplacés avec la zone.Ce mode d’édition simplifie les mani-pulations de création et de modifica-tion de pages.L’ outil «crayon» permet de découperune page de manière visuelle.Ces zones sont matérialisées et faci-

lement manipulables sous l’éditeur. Par exemple l’agrandissement de lahauteur de la zone d’en-tête déplaceautomatiquement vers le bas leszones qui sont situées en dessous: lazone corps de page et de bas depage.L’édition respecte la position relativedes champs contenus dans chaquezone, ainsi que leurs ancrages.L’édition est WYSIWYG.

WEBDEV®

Page 9: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

HTML5 ET W3CEn WEDEV 20, vous n’avez pas besoind’écrire de code HTML, WEBDEV legénère automatiquement pour vous !Le code HTML généré par WEBDEV 20respecte le standard HTML5 et suit lesrecommandations du W3C.Le respect de la nome HTML5 garantitune compatibilité des pages sur tousles navigateurs du marché supportantla norme.

HTML5 : LAPUISSANCEHTML5 représente uneévolution importante dela norme Internet. La pré-sentation élaborée despages Internet se stan-dardise et de nouvellesfonctionnalités apparaissent.Le standard HTML5 permet de tirerpartie de toute la puissance des navi-gateurs récents et de proposer desfonctionnalités avancées.

COMPATIBILITÉANCIENS NAVIGATEURS:HTML4 TRANSITIONALPour assurer la compatibilitéavec d’anciennes versions denavigateurs (utilisés en

Intranet par exemple), WEBDEV permettoutefois de générer les sites à lanorme HTML4 Transitional.

16 • WEBDEV 20 : Développez 10 fois plus vite

HTML5

MASQUES DE SAISIEHTML5La norme HTML5 propose desmasques sur les champs de saisie.Avec ce type de masque, le site laissela gestion de la saisie et son contrôleau navigateur. Ce n’est plus la page (lesite) qui effectue les contrôles, maisdirectement le navigateur. Les masques gérés sont: Email, Url,Date, Heure, DateHeure, Mois,Semaine, Nombre, Intervalle,Recherche, Numéro de téléphone,Couleur,...Sous l’éditeur de WEBDEV 20, il estpossible de définir un masque natif ouun masque HTML5.

LOCALISATION PAR GPSDIRECTEMENT EN MODENAVIGATEURWEBDEV 20 offre un jeu de fonctions«navigateur» qui permet d’interagiravec les fonctionnalités GPS du maté-riel, si ce matériel en dispose: position,déplacement,...

Ici une carte affichée par un champ «image»: le trajet a été

dessiné avec les fonctions de dessinen mode «navigateur»

(sans retour au serveur)

DESSIN EN MODE NAVIGATEURWEBDEV 20 propose des fonctions dedessin basées sur la norme HTML5. La célèbre famille des fonctions de des-sin du WLangage est également dis-ponible en code navigateur.Cela est très pratique pour annoterune carte ou un plan interactif, oudans le domaine de la réalité augmen-tée.

VIDEO SANS PLAYERUn site réalisé en WEBDEV 20 utilisépar un navigateur supportant la normeHTML5 ne nécessite pas de plug-inspécifique (Windows Media Player,QuickTime ou encore Flash...) pourjouer des vidéos.Cela permet d'interagir avec la vidéogrâce au WLangage, et de personnali-ser l'affichage.

AUTO-COMPLETION AUTOMATIQUELes navigateurs HTML5 récents propo-sent automatiquement une auto-com-plétion des formulaires dans les pages.Lorsque l’internaute commence à sai-sir des informations dans un formulaire(par exemple une adresse de livraison),tous les champs de la page se remplis-sent immédiatement. Cette fonctionnalité est dangereusepour des données confidentielles. Avec WEBDEV 20, il est possible dedésactiver cette fonctionnalité champpar champ grâce à la nouvelle option«Désactiver l’autocomplétion». Cettesécurité est également utile sur lesordinateurs partagés.

HTML5 AVANCÉ

UTILISATION DE SITEDÉCONNECTÉ (OFFLINE) WEBDEV 20 permet d’indiquer qu’unsite ou un ensemble de pages donnéespeuvent fonctionner en mode décon-necté (sans connexion Internet).Dans ce cas, l’ensemble des ressources(pages, images, fichier .js, fichier .css,..) utilisées par le site ou les pages estautomatiquement mis en cache par lenavigateur sur le poste de l’internaute.Ainsi le site peut être utilisé sans sereconnecter à Internet.

STOCKAGE LOCAL WEBDEV 20 permet à un site de stoc-ker un ensemble d’informations sur leposte de l’internaute.Ces informations sont stockées dans uncontexte propre au navigateur.

ACCÈS EN MODE LOCALÀ UNE BASE DE DON-NÉES (SQLITE) WEBDEV 20 permet à un site de créeret d’accéder à une base de donnéescréée par le navigateur, sur le poste del’internaute en code navigateur. Cette fonctionnalité permet d’envisa-ger de saisir des données en modedéconnecté, et par exemple de lestransmettre automatiquement au ser-veur dès que la connexion à Internetest établie.

MODIFICATION DESSTYLES WEBDEV DIRECTEMENT EN CSSLes styles WEBDEV 20 sont stockéssous forme de feuilles de styles au stan-dard CSS3. Le code CSS3 généré peut si nécessaireêtre modifié directement dans le fichier.css . Cette ouverture est offerte dans le butde permettre aux spécialistes CSS3 deréutiliser leur savoir-faire dans cedomaine. Un style CSS3 créé par WEBDEV 20 etmodifié depuis l’extérieur de WEBDEVest toujours reconnu par l’éditeur.Le style modifié peut être appliqué dela même manière qu’un style WEBDEVsur les champs et les pages.

IMPORTATION DE STYLECSS EXISTANTDes styles CSS3 existants peuvent êtreimportés dans WEBDEV 20, depuis desfeuilles de styles CSS3.La fonctionnalité d’import permet desélectionner les styles à importer, etceux à ne pas importer.Dans l’environnement de WEBDEV 20,les styles importés sont proposés aumême titre que les styles créés dansWEBDEV.

EDITEUR DE STYLES CSS L’environnement WEBDEV permetl’édition de styles CSS de manière gra-phique à travers un éditeur de descrip-tion de styles CSS.

L’éditeur de styles CSS3

INTÉGRER UNE ANIMA-TION EXTERNE DANS UNCHAMPL’environnement de WEBDEV proposel’ajout automatique d’effets d’anima-tion sur les champs : clignotement,fondu, grossissement, rotation,pirouette 3D,… Il existe d’autres types d’effets plus par-ticuliers, disponibles sur le marché sousforme d’animations CSS. Par exemple:balancier, flottement, explosion... Pourappliquer ce type d’animations à unchamp, il suffit d’importer la feuille destyles CSS contenant la description del’animation, et de spécifier dans le styledu champ le nom de l’animation à uti-liser, sa durée, et sa répétition.

ASSOCIEZ UN SCRIPT JSOU JQUERY À VOSCHAMPS

Une «classe CSS» peut être référencéedans un script Javascript externe ou unscript jQuery pour appliquer des modi-fications sur le champ auquel elle estattribuée.Il est ainsi possible de modifier demanière dynamique les propriétés deschamps et d’en modifier le comporte-ment.Par exemple: pouvoir déplacer unchamp à la souris, changer son style, lemettre en mouvement en réaction àcertains évènements, le faire interagiravec d’autres champs...

www.pcsoft.fr • 17

La méthode laplus simple et laplus intuitive

WEBDEV®

CSS3

CSS3 AVANCÉ

CRÉATION DE STYLES : CSS SANS CONNAITRECSS Pour créer un style avec WEBDEV 20,il est tout à fait inutile au développeurou au webdesigner de connaîtreCSS3: WEBDEV 20 génère lui-mêmele style qui est créé en visuel grâce àla technologie des «7 onglets».Les styles WEBDEV sont stockés sousforme de feuilles de styles au standardCSS3.Les styles sont modifiables à toutmoment sous l’éditeur, les modifica-

tions étant bien entendurépercutées à toutes lespages et champs utilisant lestyle modifié.

POSITIONNEMENTCSS3Le CSS3 est également utilisépar WEBDEV 20 pour positionner (aupixel ou en flux) les éléments dans lespages en respectant la séparation«positionnement» / «contenu HTML».

ANIMATIONS ETEFFETS SUR LESCHAMPSL’environnement WEBDEV20 propose de nombreuxeffets et animations baséssur la technologie CSS3 :

fondus, grossissement au survol, rota-tion, pirouette 3D, etc.Ces effets sont proposés sur tous leschamps et sont paramétrables (durée,courbe d’accélération, …).Vous n’avez pas besoin de connaître lelangage CSS3.

Page 10: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

RAPPEL : SITE STATIQUEUn SITE STATIQUE est un site qui pré-sente des pages figées, reliées demanière définie les unes aux autres.Il s’agit en gros d’un «ensemble depages» sur Internet, que l’on peut justeconsulter.En général ce site présente des infor-mations de base sur la société, legroupe ou l’association: activité,adresse, les produits, et quelquefoisdes tarifs, une page de contacts...Les limites des sites statiques se fontvite sentir: à chaque modificationd’une donnée, il faut la reporter dansle site, et ré-installer les pages concer-nées.

Pour que les produits présentés restentd’actualité, il faut effectuer à chaquefois les modifications sur le site sta-tique.

QU’EST-CE QU’UN SITEDYNAMIQUE ?Un SITE DYNAMIQUE crée «à lavolée» les pages vues par les internautes,en fonction des actions de l’internaute etdes données présentes dans des bases dedonnées. Prenons l’exemple d’un catalogue quicontient 30.000 articles: un site sta-tique devrait prévoir 30.000 pagesHTML statiques différentes !Un site dynamique ne nécessitera

qu’une seulepage, prévue pourrecevoir des don-nées (les réfé-rences du produit,sa photo,...). Leserveur «assem-blera» les élé-ments nécessairesà la demande, à lavolée.

TOUJOURS À JOURLes données du site dynamique sont

TOUJOURS À JOUR, puisqu’issues desbases de données de l’entreprise.Vous affichez les stocks réels, vous indi-quez à l’internaute la date réelle d’en-voi de sa commande, vous gérez desplannings,...

DES SITES QUI SONT DE VÉRITABLES APPLICA-TIONSAutre aspect intéressant des sites dyna-miques réalisés avec WEBDEV 20, ils secomportent comme de VÉRITABLESAPPLICATIONS. Toute la puissancede l’informatique est à votre disposi-tion.

FACILITÉ DE RÉALISATIONGrâce à la puissance de son environ-nement complet et à sa richesse fonc-tionnelle, il est extrêmement FACILE àtout développeur, sans compétenceparticulière en Internet, de réaliser dessites dynamiques sophistiqués, dehaute fiabilité, rapides et évolutifs avecWEBDEV 20.

AJOUTER UNE PARTIE «DYNAMIQUE»À UN SITE STATIQUE EXISTANT

UN SITE DYNAMIQUE C’EST QUOI ?

Aujourd’hui, la plupart dessociétés qui possèdent unsite statique désirent profi-ter des fonctionnalités dyna-miques.

AVEC WEBDEV 20,RÉUTILISEZ VOTRE EXISTANTPour réutiliser un EXISTANT, vouspouvez, à votre choix:• brancher des pages dynamiques sur

le site statique• brancher des pages statiques dans le

site dynamique• mixer statique et dynamique• importer des pages statiques dans le

site dynamique• ...Dans tous les cas, vous pouvez conser-ver votre existant, et l’améliorer.

MIXER STATIQUE ETDYNAMIQUEMIXER statique et dynamique est lasolution la plus rapide.Souvent un site statique existe dansl’entreprise. Le site statique est CONSERVÉ, et lespages dynamiques sont RAJOUTÉES, ou remplacent cer-taines pages statiques.Il est également facile de relier demanière transparente 2 sites, un sta-tique et l’autre dynamique.

IMPORTER LES PAGESSTATIQUESWEBDEV 20 propose une puissantefonctionnalité d’import de pages sta-tiques et de templates (voir page 46). Les pages existantes sont ainsi IMPOR-TÉES dans l’environnement, et sonttransformées en pages WEBDEV 20.

LE BESOIN DE «TEMPS RÉEL»Un tarif change dans le système de ges-tion de l’entreprise ? Immédiatement,le site est à jour.Une nouvelle référence de produit estcréée ?Automatiquement et immédiatementce produit est présent sur le site dyna-mique.Le stock évolue ? Automatiquement, leclient qui passe commande estinformé.Sans avoir à installer en permanence, àmodifier et mettre à jour les pages, unsite dynamique affiche automatique-ment des DONNÉES À JOUR.

LE «DYNAMIQUE» ESTINDISPENSABLEAujourd’hui, vos sites doivent se com-porter comme des applications ! Vossites doivent être des sites dynamiques.

18 • WEBDEV 20 : Développez 10 fois plus vite

WEBDEV 20 IDÉAL POURCRÉER UN INTRANET OUUN EXTRANETWEBDEV est l'outil idéal pour créer dessites Intranet et Extranet. Un site Intranet est un site interne à unensemble d'utilisateurs: sociétés,clients, fournisseurs... Il peut être utilisé au sein d'une entre-prise, ou à l'extérieur. L'accès se fait paridentification et mot de passe, ce quiest automatiquement géré parWEBDEV (voir page 21).

SÉCURITÉ TOTALE AUTOMATIQUELes pages d’un site Intranet réalisé enWEBDEV sont accessibles uniquementà travers une session unique. Pourchaque internaute, une session estouverte et maintenue automatique-ment sur le serveur.La sécurité du site est assurée automa-tiquement, par la notion de session.L’adresse de la page ne peut parexemple pas être réutilisée parcopier/coller. Le fonctionnement dynamique (chaque

page est crééedynamique-ment sur leserveur avantson affichage)protège lesrequêtes etleurs résultats,qui peuventêtre cryptés.

AUCUNELIMITELa richessefonctionnellede WEBDEVpermet ded é v e l o p p e rdes sites qui sec o m p o r t e n tcomme de véri-tables applications, vous n'êtes paslimité: gestion de frais, catalogue four-nisseur avec tarifs remisés, prise decommande d'un réseau, diffusion d'in-formations confidentielles, abonne-ment à un service payant, gestion decomptes bancaires, portail...

WEBDEV est l'outil idéal pour créer dessites Intranet et des Extranet, et c'estpour cette raison que des milliers degrandes sociétés ont créé leur Intranetavec WEBDEV.

WEBDEV 20 IDÉAL POURCRÉER UN SITE INTERNETUn site Internet est un site accessiblesimultanément par de nombreux inter-nautes dans le monde entier.Un site Internet peut être hébergé ausein d'une entreprise, chez un héber-geur professionnel ou dans le cloud.Pour l’internaute, un site Internet doitgarantir une vitesse élevée, une dispo-nibilité permanente, la sécurité desdonnées qu’il saisit.Pour le propriétaire du site, un siteInternet doit offrir une visibilité maxi-male (référencement naturel par lesmoteurs de recherche).WEBDEV 20 offre tous ces avantages.

LA TECHNOLOGIE AWPWEBDEV 20 propose la technologieAWP: Active WebDev Page.Grâce à cette technologie AWP,WEBDEV 20 permet de créer des pages

Web dyna-miques indé-pendantes, lespages AWP.Chaque pageAWP du sites'exécute demanière auto-nome et sanscontexte d'exé-cution sur leserveur.Ceci permetune faibleconsommationde ressources(CPU, RAM), etdonc un nombre d'accès simultanéstrès élevé à ressource égale.Chaque page AWP est référençable demanière individuelle par son adresse(URL).Chaque page du site peut être réfé-

rencée par les moteurs de recherche.L’adresse d’une page peut êtrecopiée/collée pour être réutilisée.Lorsque le site doit conserver des infor-mations entre la navigation des pages,il peut gérer un contexte.

www.pcsoft.fr • 19

La méthode laplus simple et laplus intuitive

WEBDEV®

INTRANET/EXTRANET : WEBDEV EST ROI !

INTERNET : WEBDEV EST (AUSSI) ROI !

Site sécurisé de gestion de frais de déplacement des collaborateurs d’une entreprise

Page 11: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

20 • WEBDEV 20 : Développez 10 fois plus vite

SÉCURITÉ SSLLA SÉCURITÉVous le savez, la sécurité et la confi-dentialité sont des sujets cruciaux surInternet.Par défaut, lors de l’utilisation d’un siteInternet, les données circulant entre leposte de l’internaute et le serveur Webne sont pas protégées : les donnéessont accessibles par n’importe quelinternaute malveillant. La confidentialité et l’authentificationde la source des données ne sont pasassurées par défaut.

CONNEXION SÉCURISÉESSLLe moyen le plus efficace aujourd’huipour protéger les informations de l’in-ternaute est d’utiliser une connexionsécurisée de type SSL (Secure SocketLayer). Cette connexion SSL assure le cryptagedes données qui transitent entre leposte de l’internaute et le serveur Webhébergeant le site. Ce protocole permet également à l’in-

ternaute d’authentifier avec certitudele propriétaire du site visité.Pour sécuriser un site ou une partie desite par SSL, il est nécessaire d’acheterun certificat SSL auprès d’une autoritéde certification reconnue (par exempleNorton VeriSign, Thawte, GeoTrust,…).Une fois ce certificat SSL obtenu, il suf-fit de l’installer sur le serveur héber-geant le site. Il est à noter qu’il existe différentsdegrés de certification, du simple cryp-tage à l’authentification « SSLExtended Validation » qui permet l’af-fichage d’une barre d’adresse vertedans certains navigateurs.

HTTP, HTTPSL’URL utilisée ensuite pour laconnexion sécurisée au site commen-cera par «https:// »au lieu du classique« http:// ». L’internaute peut enplus contrôler la pré-

sence d’un cadenas dans la barred’état dans son navigateur, témoin dela transaction sécurisée en cours, ainsique l’identité du site qu’il consulte.La barre peut même se colorer en vertpour signifier la sécurité !

SÉCURITÉ: FACILE ENWEBDEV 20Le mode sécurisé est bien entendu sup-porté par les sites créés avec WEBDEV20. Grace à la fonction SSLActive(), il estfacile de combiner une partie consul-tative non sécurisée (catalogue produit)avec un espace sécurisé (compte client,paiement). Un même site peut bascu-ler du mode non sécurisé au modesécurisé SSL.

Les certificats «client» sont égalementdisponibles.

PAIEMENT SÉCURISÉ Le paiement en ligne par carte bancaires’est aujourd’hui démocratisé.Il existe 2 méthodes principales pourrecevoir le paiement par carte bancaire.Récolter directement les données ban-caires du client (Numéro de carte, datede validité, cryptogramme) et effectuerensuite la transaction avec la banque.Cette méthode est assez lourde etcomporte des risques de stockage dedonnées sensibles.La méthode la plus répandue est baséesur un basculement vers une page depaiement spécialisée proposée par unopérateur financier (banque,...).Typiquement, l’internaute remplit unpanier et après validation de la com-mande, il est redirigé vers un site depaiement tiers qui assure la transactionbancaire. Dans ce mode de fonctionnement, iln’y a pas de formulaire de paiement àgérer, aucun numéro de carte à gérerou stocker. Seul l’accord de paiementest à gérer.

LES OPÉ-RATEURSFINAN-CIERSVous pouvezchoisir directe-ment unebanque commeopérateur, quivous proposeraun service depaiement enligne (Atos,C y b e r m u t ,C y b e r p l u s ,PPlus, …), aveclequel s’interfa-cer. Vous pouvezégalement pas-ser par un opérateur multibanquescomme PayBox ou PayPal. Cetteméthode permet de choisir et changerfacilement le compte bancaire qui seracrédité.La mise en place de cette solution est

très simple avec WEBDEV 20, à l’aidedu composant «PayBox» ou «PayPal»livré en standard.

PAIEMENT SÉCURISÉ

www.pcsoft.fr • 21

RÉFÉRENCEZ VOS SITESUn assistant analyse la composition despages du site, et indique les améliora-tions à apporter pour maximiser lepositionnement des pages dans lesmoteurs de recherche (Google,Yahoo,...).L’assistant vérifie également que les liensentre les pages peuvent être détectés etutilisés par les robots des moteurs.De nombreuses autres règles sont véri-fiées.Les sites créés seront ainsi mieux réfé-rencés par les moteurs de recherche.

RÉFÉRENCEZ CHAQUEPAGE DYNAMIQUE («URL REWRITING»)Grâce à la technologie «AWP»,WEBDEV 20 permet de référencerchaque page dynamique. Un mode d’URL rewriting permet dedéfinir plusieurs adresses pour unemême page en fonction de soncontenu. Cette page et son contenu

dynamique seront ainsi mieux référen-cés par les moteurs de recherche. Unepage peut être renommée.Par exemple, l’adresse de la page peutcontenir le nom de l’objet (Vélo, VTT,armoire en teck,...), ce qui permettra àla page d’être mieux référencée.

STATISTIQUES DESOURCE DE CONNAISSANCEAfin de vérifier depuis quels sites pro-viennent les internautes, un module de«statistiques» est également fourniavec WEBDEV (voir page 54).

RÉFÉRENCEMENT NATUREL DE VOS SITES

SÉCURITÉ DE VOS SITES ASSURÉE :ACCÈS PAR MOT DE PASSE

CONTRÔLEZ L’ACCÈSAUX PAGES DES SITESLa sécurité d’accès aux sites ou à cer-taines pages peut être nécessaire: c’esten standard dans WEBDEV 20 !La fonctionnalité de «groupware utili-sateur» permet de définir des mots depasse pour des personnes et desgroupes.

Le contrôle d’accès se définit simple-ment sous l’éditeur. Aucune program-mation n’est nécessaire pour assurer la

sécurité d’accès à vos applications, ilsuffit d’activer l’option «Groupware».

UN CONTRÔLE SÉCURISÉTRÈS FIN

Le contrôle d’accès permet de fil-trer l’accès à de nombreux élé-ments: choix de menus, boutons,champs, groupes de champs, pages,états, ...

Les éléments interdits seront inac-tifs et à votre choix grisés ou invi-sibles.

LE MODE SUPERVISEURLe superviseur du site livré pourra

à tout moment paramétrer facile-ment les droits des utilisateurs. Unéditeur convivial permet de définiret gérer ces droits.

Si vous le désirez, les droits desutilisateurs ou des groupes d’utilisa-teurs, pourront être créés ou modi-fiés par programme.

LDAPSi vous désirez utiliser une base de

login déjà existante en LDAP, lecontrôle d’accès en fera usage.

SAASWEBDEV 20 propose des fonction-

nalités avancées de gestion d’appli-cations SaaS (voir page 49).

Sécurisez automatiquementvos sites, sans avoir à coder!

Vous connaissez déjà la ver-sion 19 ? Il existe un document tech-nique illustré (92 pages encouleurs) consacré aux 920Nouveautés de la version 20.Version imprimée disponiblesur simple demande; version PDF disponible surwww.pcsoft.fr .

Page 12: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

WEBDEV 20 propose tous les types de champs(«contrôles») nécessaires à la création despages Internet et Intranet. Voici quelques-uns de ces champs détaillés.Notez que ces champs fonctionnent en Ajax.

ZONE DE TEXTE RICHE

Le champ «Zone de Texte Riche» (ZTR) permet d’éditer uncontenu. Ce champ très puissant est présenté en détail enpages 28 et 29.

CHAMP DE SAISIE RICHE HTMLCe type de champ permet de créer et mettre en page destextes avec enrichissement.Une barre d’outils apparaît automatiquement en-tête duchamp, et permet de définir les enrichissements.

Les données sont sauvegardées au standard HTML.

CHAMPS DE SAISIE (AVEC MASQUE)Les champs de saisie de WEBDEV 20 permettent, comme lesautres champs, de définir de nombreux paramètres, demanière visuelle et intuitive à travers les «7 onglets» ou parprogrammation. Il est facile de définir de puissants masquesde saisie, sans avoir besoin de taper la moindre ligne de code.Les formats sont matérialisés dès l’entrée de champ.

En entrant dans le champ, le masque apparaît: ici, taper le «/» est facultatif

Parmi les masques de saisie fournis: durée, première lettre enmajuscule, numéro de téléphone français, nom et chemin defichier, adresse email, code postal...

PERSONNALISER LE LISERÉ DESCHAMPSUn champ peut posséder un liseré.Un usage habituel de ce liseré est de mettre en valeur lechamp qui a le focus.

3 exemples de liserés différents, matérialisant le champ en saisie

Il est facile de personnaliser l’apparence du liseré, selon lesactions sur le champ: prise de focus, survol,...

TABLES SERVEUR, NAVIGATEUR ETTABLES AJAXLes tables sont gérées par WEBDEV 20. Une table «habituelle» est une table serveur, qui effectue desrequêtes sur le serveur pour se remplir.Le mode Ajax est géré sur les tables serveur, ce qui éliminele réaffichage complet de la page à chaque modification d’unélément de la table. La page 35 détaille des fonctionnalitésoffertes sur les tables Ajax.Une table peut également être en mode «Navigateur», c’est-à-dire n’exécuter aucun code serveur.

Le champ «Table Navigateur» est un champ table complète-ment autonome sur le navigateur.Il n’y a pas d’aller-retour avec le serveur d’application.Son contenu peut être initialisé directement sous l’éditeur deWEBDEV, en saisissant les données à afficher !Ce type de champ peut être utilisé à la fois dans les sites sta-tiques et les sites dynamiques !

Le champ «Table Navigateur» propose des fonctionnalitésautomatiques de :• filtre, • recherche,

22 • WEBDEV 20 : Développez 10 fois plus vite

Tous leschamps du

Web,et plus...

WEBDEV®

DE PUISSANTS CONTRÔLES (CHAMPS) POUR LES PAGES

En entrant dans le champ, le masque apparaît: notez la barre qui permet d’enrichir le texte

• déplacement de colonne,• colonne redimensionnable,• en-tête de colonne, sur-en-tête de colonne,• colonne conteneur,• ruptures...Le champ «Table Navigateur» peut également être manipuléet rempli par programmation en code navigateur.

UNE ZONE RÉPÉTÉE EST UN CONCEPTTRÈS PUISSANTUne «zone répétée» est un ensemble de champs qui serépète horizontalement, verticalement et/ou linéairement unnombre de fois défini ou indéterminé.Les zones répétées sont soit alimentées par programme, soitpar liaison directe avec une ou des tables de données, soit àpartir de requêtes.

Zone répétée en définition sous l’éditeur

Par exemple, le nombre de répétitions peut être le nombred’enregistrements de la requête,...A chaque répétition, il est possible de modifier chaque attri-but de chaque champ. Par exemple:- couleur de la ligne- couleur d’une police (montant en rouge si négatif)- photo d’un article...

Zone répétée en exécution

La zone répétée peut adapter dynamiquement le nombred’éléments à afficher suivant la largeur de la page chez l’in-ternaute.

Une zone répétée peut également être uniquement linéaire.

RÉGLETTE AUTOMATIQUELa réglette de parcours rapide des pages (avec son code) estgénérée automatiquement pour une zone répétée, toutcomme pour une table.

Exemples de réglettes automatiques

MENUS DÉROULANTS & POP-UPWEBDEV permet de créer des menus déroulants (verticaux ethorizontaux) en mode WYSIWYG, des menus «onglet», etdes menus «Pop-up».Il est possible d’ajouter dynamiquement (par programmation)des choix de menus, des sous-menus, etc...

LES ONGLETS Les onglets peuvent facilement être gérés.

Exemples d’onglets dans une page.

CHAMP TIROIR Un champ tiroir permet d’enrouler et dérouler une zone d’af-fichage.

A gauche, une image déroulée.A droite un autre exemple, avec un texte déroulé

www.pcsoft.fr • 23

Des champssophistiqués trèsfaciles à créer

WEBDEV®

•••suite page 24

Page 13: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

CHAMP VIGNETTE (STATIQUE OU DYNAMIQUE)Un site Web gère souvent des images ou des photos qui sontpar ailleurs utilisées sous forme de vignette (imagette), parexemple pour leur sélection.WEBDEV 20 gère automatiquement la génération dynamiqueautomatique de ces vignettes: elles sont créées en fonctionde l’image initiale.WEBDEV 20 offre un deuxième mode de fonctionnementpour ces vignettes: le mode statique. Dans ce mode, lavignette est créée par l’infographiste, avec un contenu quipeut être différent de celui de l’image principale pour qu’ellesoit plus visible ou représentative.

CHAMP CALENDRIER ET CHAMP DE SAISIE DATE AVEC POPUP CALENDRIERLe champ calendrier permet soit de créer un champ intégrédans une page, soit d’ouvrir une «popup» calendrier pour lasaisie de la date (très utilisé en Web). De très nombreuses options de personnalisation et présen-tation sont fournies: encadrer le jour en cours, barrer les datesdéjà passées, délimiter une durée, signaler les jours fériés,...Le fonctionnement du champ calendrier est assuré en mode«Ajax», ce qui permet de ne pas rafraîchir toute la page lorsd’un affichage ou d’un choix de date.

Le champ calendrier est très pratique à l’usage

CAPTCHA CODELa gestion des «captcha», ces codes de sécurité à saisir parl’internaute, est totalement automatique. Le champ captcha calcule et affiche automatiquementl’image déformée correspondant à un texte. Ce texte est soit généré automatiquement par le champ, soit

défini par l’application.La déformation change à chaque affichage.

CHAMP GRAPHE INTERACTIFLe champ graphe de WEBDEV 20 propose de nombreux typesde graphes, en mode 2D et relief, en statique et en interac-tif: courbes, barres, hémicycles, camembert, ...Une barre d’outils permet à l’internaute de modifier dyna-miquement certains paramètres: type de graphe, affichagede légende,... Une mire permet une lecture précise des don-nées. Des effets d’animation sont disponibles.

IMAGES, IMAGES CLIQUABLESLe champ image permet d’afficher des images dans les for-mats standard du Web: Jpeg, Gif, Tiff, PNG, SVG...Les images peuvent être cliquables pour lancer un traitement.Le mode «défilement automatique» permet d’afficher auto-matiquement des images présentes dans un répertoire.

IMAGE AVEC ZOOM AUTOMATIQUE Lorsque l’effet de zoom est activé sur une image, le survolde l’image par le curseur de souris ouvre automatiquementune zone à côté de cette image, zone dans laquelle la par-tie de l’image originale pointée est affichée agrandie, ce quimet en avant le détail de cette partie.

24 • WEBDEV 20 : Développez 10 fois plus vite

La méthode laplus simple et la

plus intuitive

WEBDEV®

DES CHAMPS PUISSANTS POUR LES PAGES

suite de la page 23•••La taille de la PopUp zoomée est paramétrable, ainsi que lefacteur de zoom dans un rapport de 1 à 100 fois.Cet effet peut s’appliquer sur les champs image et vignette.Il n’y a rien à programmer pour bénéficier de cet effet, il suf-fit de cliquer sur le choix «Zoom automatique» dans la des-cription du champ dans les «7 onglets».

Lorsque le curseur passe sur une zone de l’image, celle-ci est automatiquement affichée et zoomée

EFFET MOUVEMENT AUTOMATIQUED’IMAGECet effet donne vie à vos pages !L’effet «mouvement automatique» simule le déplacementléger d’une caméra sur une image: sans rien programmer,l’image affichée prend vie et se déplace légèrement, lente-ment et harmonieusement dans sa zone.3 effets sont combinés: balayage dans des directions aléa-toires, zoom léger, fondu pour l’enchaînement de ces effets.Cet effet est idéal pour mettre en valeur automatiquementdes photos de produit: bien immobilier, produit de luxe,...

CHAMP SLIDER & RANGE SLIDERLes champs potentiomètre linéaire (Slider) et potentiomètred’intervalle (range Slider) sont proposés.

ZONES DE CLIQUAGE (MAP AREA)Les zones de clicage permettent de réaliser des traitementsd’hypertexte: en fonction de la zone d’une image sur laquellel’internaute clique, un traitement particulier est exécuté.Définir les zones est très simple à l’aide des zones géomé-triques fournies. Plusieurs zones peuvent être reliées.

Si nécessaire, il est facile de récupérer les coordonnées de cli-quage, au pixel près.Cela peut être utile dans des cartes de pointage précis,comme par exemple des cartes géographiques, ou dans lemilieu médical.

CHAMP «CARTE GOOGLE»Il est possible d’intégrer un champ Carte «Google Maps»dans un site. Le champ Carte de WEBDEV 20 est totalementinteractif: l’internaute peut zoomer, se déplacer, utiliser dif-férents affichages (plan, satellite), basculer en mode «streetview», etc.

CHAMP «VIDEO»Le champ «Vidéo» permet de jouer des vidéos Flash (Flv),QuickTime (Mov), Microsoft (Wmv),...Les fonctionnalités de lecture, pause, avance rapide,... sontgérées.L’affichage de vidéos est également géré par HTML5 si lenavigateur le supporte (voir page 16)

CHAMP «FLASH»Le champ «Flash» permet d’inclure des animations flash dansune page WEBDEV: bandeau animé....

www.pcsoft.fr • 25

La méthode laplus simple et laplus intuitive

WEBDEV®

•••suite page 26

Page 14: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

26 • WEBDEV 20 : Développez 10 fois plus vite

La méthode laplus simple et la

plus intuitive

WEBDEV®

CHAMP NOTATIONCe champ permet à l’internaute de donner une note, ou àun site d’afficher une note.Par défaut le visuel utilisé est une étoile, mais ce visuel peutêtre modifié (smiley, main, coeur...). La note peut être déci-male.

CHAMPS PLANNING & AGENDALe champ planning permet de gérer l’emploi du temps de res-sources multiples. Ce champ est Ajax.Le mode opératoire est confortable pour l’internaute, puis-qu’il est manipulable entièrement à la souris pour la création,l’agrandissement, le déplacement et la suppression destâches et ce, quel que soit le navigateur.Le lien avec les données est automatique (databinding).Ce champ fait gagner des semaines de programmation.

Le champ planning est adapté aux terminaux tactiles(tablette, smartphone). Les modes opératoires pour créer,déplacer, supprimer les rendez-vous sont compatibles avecl’environnement «multi-touch», et peuvent donc s’effectueravec le doigt.Un champ «Agenda» est également disponible.

SITEMAPPATH (CHEMIN DE NAVIGATION)Un «SiteMapPath» est un menu qui se construit au fur et àmesure des parcours de l’internaute dans un site.Il permet de revenir rapidement sur une page précédente. Lagénération de cette ligne est automatique.Un plan du site est également automatiquement généré.

La navigation devient facile

LA FONCTION «UPLOAD»Le champ Upload permet de télécharger depuis le Navigateurun fichier vers le serveur. Sélecteur de fichiers, multi sélec-tion, jauge de progression,... sont gérés en standard.

La taille des fichiers uploadables n’est pas limitée.L’upload peut s’effectuer en tâche de fond ou en différé.

GFI AUTOMATIQUE Le GFI (Grisage de Fenêtre Inactive) de page sur page est géréautomatiquement. La page inactive est assombrie dèsqu’une page de dialogue s’ouvre.

CHAMP RÉSEAU SOCIAL Le champ «Réseau social» est une barre d’outils composéede pictogrammes faisant le lien vers les principaux réseauxsociaux du Web : Facebook, Tweeter, Google+, LinkedIn.

TABLEAU HTMLLe champ Tableau HTML permet de créer facilement destableaux de présentation dans les pages.

ZONE FIXE SUR L’ÉCRAN (FIXED) L’ancrage fixe permet de maintenir visibles un ou plusieurschamps lors du déplacement par l’internaute de l’ascenseur(scrolling) du navigateur. La zone est dite «épinglée».

DES CHAMPS PUISSANTS POUR LES PAGES

suite de la page 25•••

Le saviez-vous ?

Il est facile decréer des «bullesde survol» surtous les champs.

Même si l’internaute fait défiler la page vers le bas, lepanier reste visible au même endroit

Le ou les éléments ainsi ancré(s) se déplace(nt) avec l’ascen-seur, et reste(nt) donc visible(s), alors que le reste de la pagedéfile.

CHAMP «TABLEAU DE BORD»WEBDEV 20 permet de créer facilement des tableaux debord. Un champ tableau de bord est constitué de Widgets.L’internaute peut personnaliser et adapter le tableau de bord.

EFFETS CSS3 SUR LES CHAMPSWEBDEV 20 permet de définir facilement des effets CSS3 surles champs de type image: accélération, clipping, fondu,zoom automatique, fondu, grossissement en survol, effetphoto, mouvement panoramique, clignotement, décalage,balayage, inclinaison, rotation, ...

Morphing

Le cornage de page est également géré.Il est même possible de créer ses propres transitions et trans-formations.

CHAMP BOUTON IMAGE Comme leur nom l’indique, les boutons image sont basés surune image.Un bouton peut être défini par 5 images différentes au maxi-mum, correspondant chacune à un état du bouton: repos,survol, clic, focus, grisé.

Des exemples de boutons graphiques livrés avecWEBDEV 20

Ces images des différents états peuvent être contenues dansune planche d’images, gérée automatiquement, avec un affi-chage fluide. Le bouton peut être animé.

CHAMP BOUTON CSS3 Le bouton CSS3 est entièrement défini à base d’un style CSS.Il ne nécessite pas d’images, mais le style CSS lui-même peutcontenir (ou pas) une ou des images.Un bouton CSS peut proposer jusqu’à 5 états également, quisont des éléments du style CSS (pseudo-classes).Le bouton CSS3 est automatiquement adapté selon le navi-gateur.

CLIPART COMPLET DE 10.000 IMAGESET BOUTONSWEBDEV 20 est livré avec un clipart comprenant plus de10.000 éléments.Il est possible de référencer ses propres images et illustrationspour enrichir le catalogue.Le contenu du clipart est riche et varié: images, icones,cadres, animations, boutons graphiques, bandeaux, formes.

TOUS LES CHAMPS WEBWEBDEV 20 propose également les champs «Treeview»,Webcam, Applet Java, Iframe... Vous avez tout.(voir également le champ de mise en page très puissant«Zone de Texte Riche», ZTR, ci-après).

www.pcsoft.fr • 27

Les champs duWeb

WEBDEV®

•••suite page 28

Page 15: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

28 • WEBDEV 20 : Développez 10 fois plus vite

La méthode laplus simple et la

plus intuitive

WEBDEV®

CHAMP «ZONE DE TEXTE RICHE» (ZTR)WEBDEV 20 propose un type de champ extrêmement puis-sant : il s’agit du champ «Zone de Texte Riche» (abrégé enZTR).Le champ Zone de Texte Riche est fondamental pour l’édi-tion des pages statiques et dynamiques: saisir un texte richedevient enfantin. La saisie du texte et son enrichissement s’effectuent commedans un traitement de texte: insertion des images avechabillage, insertion des liens, enrichissement du texte...Tout se passe en WYSIWYG.Sous l’éditeur, lors de la saisie de texte, le champ s’agranditautomatiquement lorsque cela est nécessaire.

Il n’est plus nécessaire comme avant de créer des champs dif-férents à positionner côte à côte.Comme pour tous les champs, le code HTML est automati-quement généré par WEBDEV. Ce code HTML est standard, optimisé et modifiable, y com-pris par programmation.

ZTR : MISE EN FORME DU TEXTE LUI-MÊMELe champ ZTR permet déjà, bien entendu, de spécifier lescaractéristiques de chaque texte, au caractère près : police,taille de police, graisse, couleur, barré, surligné, exposant,indice,...

La mise en forme des textes est «logique» au sens HTML.Par exemple, un attribut «gras» sera automatiquement tra-duit en «Strong» dans le code HTML, ce qui facilite auto-matiquement le référencement par les moteurs de recherche(Google...).Les balises adéquates sont insérées avant et après le textedans sa forme HTML.

Par exemple :Bonjoursera stocké sous la forme <strong> Bonjour </strong>.La balise <strong>, que le navigateur reconnait et interprète,signifie qu’il s’agit d’un mot «important». Le navigateur affichera en général le texte entre balises engras, selon les préférences du navigateur de l’internaute. Le navigateur reconnait ces balises, et les interprète.Les moteurs de recherche utilisent également ce type debalise pour le référencement des pages. L’utilisation de cesbalises dans un texte augmente son référencement naturel.

ZTR : MISE EN FORME LOGIQUE DE PARAGRAPHESLe champ ZTR permet de mettre en forme les paragraphes:titre, sous-titre, sous sous-titre, bas de page, adresse email,note, haut de page...La mise en forme est logique: par exemple, un titre seramémorisé automatiquement dans sa forme HTML comme untexte de type <h1>.<h1> est une balise HTML qui définit un titre de page. Le navigateur reconnait ces balises, et les interprète: en géné-ral le texte sera affiché en gros et gras !Les moteurs de recherche utilisent également ce type debalise pour le référencement des pages: pour le moteur derecherche, un titre aura plus de poids qu’un texte simple.

ZTR : MISE EN FORME PHYSIQUE DE PARAGRAPHEEn plus de cette mise en forme logique, une mise en formephysique est disponible: alignement des paragraphes, inden-tation, couleur, ...

ZTR : DES PUCES Des paragraphes peuvent être indentés, automatiquement,avec ou sans puce (<li>).Les puces peuvent être numérotées ou pas.

ZTR : STYLES CSSIl est possible d’appliquer un style contenu dans le projet àune sélection de texte d’une ZTR.

ZTR : INSERTION DE CHAMPSA tout endroit d’un texte dans une ZTR, il est possible d’in-sérer un champ (de tout type) WEBDEV: un graphique, unchamp table,...Le champ est positionné au fil du texte, relativement au texte.Le champ est «ancré» sur le texte.C’est une nouvelle façon («au fil du texte») de mettre enpage avec WEBDEV !

LE CHAMP ZTR : ZONE DE TEXTE RICHE

suite de la page 27•••

Visualisationd’un unique

champ «Zone de Texte

Riche» deWEBDEV 20

www.pcsoft.fr • 29

Une ZTR en création sous l’éditeur de pages

ZTR : INSERTION DE LIENSUne ZTR peut contenir un ou plusieurs champs de type«lien».Il y a plusieurs façons d’insérer un champ lien dans une ZTR:• Transformer une sélection de texte en lien• Créer un champ lien dans le texte• Copier un champ lien existant.Le champ lien présent dans une ZTR offre les mêmes possi-bilités qu’un champ lien habituel.Le champ lien présent dans la ZTR est éditable avec la tech-nologie «7 onglets». Les fonctionnalités proposées par les «7 onglets» dans cecontexte sont simplifiées pour s’adapter au contexte ZTR.

ZTR : INSERTION D’IMAGESL’insertion d’une image dans un texte de ZTR peut prendreplusieurs formes.L’image peut être collée, ou l’image peut être insérée.L’image elle-même peut être recopiée dans le projet, ou sonlien peut juste être utilisé, sans que l’image ne soit recopiéedans le projet, au choix. Les images ne sont jamais altérées par WEBDEV. Elles conser-vent leur nom et leur taille d’origine.Un style du projet peut être appliqué à l’image.L’image est positionnée dans le texte, au fil de l’eau. Des paramètres d’habillage sont disponibles: gauche, droite,paragraphe, dans le texte,...

ZTR : ACCÈS AU CODE HTML, SAUVEGARDE DES MODIFICATIONS DEHTML BRUTL’accès au code HTML de la ZTR est possible, et le code HTMLgénéré par WEBDEV dans la ZTR est volontairement clair etlisible, au lieu d’être compressé.Un développeur qui maîtrise le code HTML peut modifier lecode HTML généré pour le champ ZTR, en édition, mais éga-lement par programmation, lors de l’exécution du site.Ce qui a été modifié directement dans le code HTML seravisualisé également sous l’éditeur.Les modifications effectuées sont conservées lors des futuresgénérations.Exemple de code généré et modifiable pour la fenêtre ci-des-sous :

<header><h1 class="CollectionTitre">La nouvelle collection arrive!</h1><div class="dzA2" id="dzA2">

<img src="vignette_collection.jpg" alt="" id="A2" class="padding"></div><p class="CollectionCommentaire">

<img src="bulle.png" alt="" style=" width:16px; height:16px;" id="A1Commentaires (<span class="NbCommentaires">24</span>)

</p><h2>La nouvelle collection arrive bientôt dans nos boutiques et sur Internet :

</header><section><p>

<img src="fl%C3%A8che.png" alt="" style=" width:16px; height:16px;" id="A3<a href="tendances.htm" target="_self" id="A9" class="padding CollectionLiVenez découvrir en avant-première les <strong>nouvelles tendances </strong</a>

</p><p>

Et ce n’est pas tout, en tant qu’abonné à la newsletter, vous bénéficiez réduction exclusive de 10%</strong> sur toute la <em>nouvelle collection<

</p><ul>

<li>10 % de remise pour les abonnés à la newsletter</li><li>Accès immédiat et exclusif à la nouvelle collection</li>

</ul></section><footer>...</footer>

WEBDEV®

La mise en pagefacile

Page 16: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

30 • WEBDEV 20 : Développez 10 fois plus vite

L’ÉDITEUR HTML INTÉGRÉPour ceux qui désirent modifier le code HTML qui est généré parWEBDEV, un éditeur visuel, convivial et puissant est livré.

www.pcsoft.fr • 31

La méthode laplus simple et laplus intuitive

WEBDEV®EXPORT AUTOMATIQUEVERS XML, WORD, EXCELET OPEN OFFICEPour les tables et les zones répétées, unmenu d’export automatique vers XML,Word, Excel et Open Office est proposéà l’internaute.

Les données contenues dans la tableou la zone répétée seront automati-quement exportées vers le format etl’outil choisi.Pour un export vers XML, la feuille destyles XSL permettant une éditionimmédiate sur navigateur est mêmegénérée.En utilisation Intranet, les utilisateurspeuvent réaliser facilement leurs simu-lations sous Excel !

RIEN À PROGRAMMERIl n’y a rien à programmer pour béné-ficier de cette fonctionnalité.Vous pouvez bien sûr désactiver cettefonctionnalité.

UNE OUVERTURE TOTALESi vous désirez programmer des exportsautomatiques dans vos sites, des ordresde programmation du L5G de WEBDEVsont à votre disposition.Les ordres hExporteXML,TableVersXML, XMLPremier, per-mettent de personnaliser tous les trai-tements.

MENU D’EXPORT VERS WORD, EXCEL, XML, OPEN OFFICE

Un site a une audience mon-diale : tout internaute dumonde entier peut le consul-ter !Développer des sites multi-lingues est donc souventnécessaire sur Internet.Et il y a bien sûr les pays quiutilisent plusieurs languesofficielles: la Belgique, laSuisse, le Luxembourg, leCanada ...WEBDEV apporte une solu-tion inédite et très puissanteau support des langues.

64 LANGUES PAR SITEJusqu’à 64 langues différentes sontsupportées par les sites que vous déve-loppez. Il suffit de choisir les languesdans l'écran de paramétrage (listemodifiable à tout moment, même surun site existant).

Exemple de saisie d'un texte en plusieurs langues

WEBDEV se charge de tout, il suffit desaisir les libellés dans les différenteslangues sélectionnées (langues latineset non latines: chinois, russe,...).Pour changer de langue dynamique-ment dans le site, il suffit de faire appelà la fonction Nation.Notez que même le libellé des boutonsimage sera traduit !

PRÉVOYEZ LE FUTURImaginez la simplification du travail lorsdu développement de sites multi-lingues (ou si un de vos sites risque de

le devenir, car les tra-ductions peuvent êtreeffectuées a posteriori,sur un site existant).

EXTRACTIONAUTOMA-TIQUE DESTEXTES Un outil disponibleséparément (WDMSG)permet d’extraire tousles «textes» d’un pro-jet, afin de les faire tra-duire, et de les ré-inté-grer automatiquementaprès traduction. Utilepour faire traduire sonsite par un cabinetspécialisé!

64 LANGUES DANS VOS SITES

Page 17: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

32 • WEBDEV 20 : Développez 10 fois plus vite

Le WLangage, le langageL5G intégré de WEBDEV,permet de décrire tous les

traitements que vous dési-rez. Vos équipes n’auront

pas à se plonger dansHTML ni Javascript. Le

WLangage facilite lap r o g r a m m a t i o n

Internet et Intranet.

LA PROGRAMMATIONINTERNET N’A JAMAIS

ÉTÉ AUSSI FACILELe langage L5Gde WEBDEV (leWLangage, déjàutilisé par descentaines demilliers de pro-f e s s i o n n e l s )apporte unconfort qui per-met de dévelop-per beaucoupplus vite tous lestypes de traite-ments.

COMMENT PROGRAM-MER LES TRAITEMENTS ?Sous Internet le code est donc de deuxtypes :• le code qui s’exécute sur le serveur de

l’hébergeur (à saisir sous le bandeaujaune - voir ci-contre)

• le code qui s’exécute sur le naviga-teur de l’Internaute (à saisir sous lebandeau vert - voir ci-contre).

LE RADNotez que le code (et les pages)peuvent être automatiquementgénérés par le RAD et les assis-

tants de WEBDEV, à partir d’unedescription de données («une ana-lyse»).

GÉNÉRATION AUTOMATIQUE DE HTMLET JAVASCRIPTUn Navigateur ne comprend que lecode HTML et Javascript.Le code WLangage destiné à s’exécu-ter sous le Navigateur génère doncautomatiquement le code HTML etJavascript optimisé correspondant. Le code est immédiatement fiable,beaucoup plus concis, et plus facile àmaintenir.

GÉNÉRATION AUTOMA-TIQUE DE CODE PHP

Les pages créées et le code peuventêtre transformés automatiquement encode PHP. Sans connaître PHP, vouscréez facilement des sites dynamiquesPHP ! (voir page 32).

CONNAISSANCE DEJAVASCRIPT ET HTML:INUTILEIl est inutile de connaître Javascript ouHTML ou PHP pour développer avecWEBDEV. Toutefois, si pour une raison quel-conque vos équipes désirent utiliser ourécupérer du code Javascript, HTML ouPHP, WEBDEV le permet évidemment.

AJAX AUTOMATIQUE-MENTPour qu’un traitement soit «Ajax», ilsuffit de cliquer sur un bouton (voirpage 36).

IMPOSSIBLE D’ÊTRE BLOQUÉLe L5G de WEBDEV est extrêmementpuissant. Vous ne serez jamais bloqué. Par ailleurs, il est possible de saisir ducode HTML, Javascript ou PHP, d’incluredes applets Java, des animations Flashet CSS3, de l’ASP ou du JSP...

APPLET JAVA WEBDEV 20 permet d’utiliser dans unsite une ou des applets Java (écrites enWINDEV par exemple): cela simplifieleur développement !

LE WLANGAGE: PUISSANT, INTUITIFLe WLangage est disponible en françaiset en anglais. Le français permet une programmationintuitive, et une maintenance facile. Les ordres du WLangage (hLitPremier,hLitSuivant, SSLActive, hTrouvé, etc...)sont des ordres faciles à comprendre,sans aucun effort particulier. Et facilesà maintenir.Le WLangage permet une grandevitesse de programmation, et unemeilleure qualité du code.Un ordre du WLangage correspondsouvent à des dizaines (ou des cen-taines) de lignes de code en Javascript:vos équipes développent plus vite.

EXEMPLE : ENVOYER UNEMAILIl est facile d’envoyer un email.L’ordre s’appelle simplementeMailEnvoieMessage.Vous pouvez joindre des pièces atta-chées. L’envoi de mail s’effectue entâche de fond.

INTÉGRATION OPTIMALEDES BASES DE DONNÉESLe WLangage est optimisé pour mani-puler les données de tables: la com-plétion automatique propose les nomsde tables et de colonnes.

GESTION PUISSANTE DESCHAÎNESLe WLangage propose une gestion dechaînes vraiment très performante! Elle permet une programmation plusrapide:• taille dynamique gérée automati-

quement • concaténation par l'opérateur «+»• conversion automatique «numérique

vers texte» et réciproquement• fonctions évoluées de recherche• tests multiples (CASE, SELON,...).

PROFILER: OPTIMISEZ LAVITESSE DE VOTRE CODEWEBDEV 20 est livré avec un «profi-ler», outil qui mesure la vitesse dechaque instruction de votre code.

JQUERY

WEBDEV 20 permet d’appeler despoints d’entrée de la bibliothèquejQuery. Cette fonction s’utilise en codenavigateur, elle est donc utilisable danstous les sites, y compris les sites sta-tiques.

JSON Le WLangage inter-prète (sérialise etdésérialise) native-ment JSON.

LA POO (OBJET)La Programmation Orientée Objet estsupportée par WEBDEV: héritage mul-tiple, constructeur, destructeur, public,privé, polymorphisme... L’utilisation dela POO est optionnelle, et peut êtremixée avec la programmation tradi-tionnelle.

Le WLangage apporte unL5G structuré audéveloppement Internet. Les outils de productivitélivrés sont un réel atout.

PROGRAMMATION DE 5ÈME GÉNÉRATION :PUISSANCE ET FACILITÉ

Pour consulter laliste exhaustivedes ordres duL5G, consultezl’aide en ligne deWEBDEV 20 surle site de PC SOFT

www.pcsoft.fr • 33

WEBDEV®L’éditeur de code participe àla puissance et à la produc-tivité de WEBDEV.La saisie du code est intui-tive, plus rapide et se faitdirectement dans le champconcerné.

UNE MÉTHODE RÉVOLU-TIONNAIRELa technologie exclusive de l’éditeur decode participe à la création d’un codede qualité, et permet de développerplus vite.

LA MÉTHODE WEBDEVLes événements les plus utiles sur unchamp sont proposés par défaut dansl’éditeur de code, et matérialisés par unbandeau de couleur.

Par exemple, pour un champ de type«saisie», les événements par défaut sont:initialisation du champ, entrée dans lechamp, sortie du champ, à chaquemodification. Il suffit de taper le codecorrespondant dans la partie adéquate.

Le code qui s’exécutera sur leNavigateur peut être saisi enWLangage, ou en Javascript, au choix.

CODE SERVEUR ET CODENAVIGATEURIl suffit de saisir votre code sous le ban-deau correspondant. Le bandeau jaune indique que le codesaisi est du WLangage et s’exécuterasur le Serveur. Le bandeau vert indique que le codesaisi est du WLangage et s’exécuterasous le Navigateur.Le bandeau rose signifie que le codesaisi est du PHP. Le bandeau bleu signifie que le codesaisi est du code Javascript. C’est visuel et très intuitif !

TOUS LES ÉVÉNEMENTSSONT GÉRÉS

Les événementsmoins habituelssont proposés parles icones en basde la fenêtre.

Tous les événe-ments sont gérés:clic, double clic,touche pressée,touche mainte-nue enfoncée,touche relâchée,bouton de sourisenfoncé, boutonde souris relâché,souris en dehorsde l’objet, sourisau-dessus del’objet, perte defocus, prise defocus, modifica-tion, sélection du

contenu du champ, appel de l’aide,chargement, envoi du formulaire,...

COLORATION SYNTAXIQUEPour un plus grand confort et unemeilleure lisibilité, chaque mot estcoloré en fonction de son type.

ENROULÉ/DÉROULÉL'éditeur de code dispose d’un méca-nisme confortable d’enroulé/dérouléde code: vous masquez le code connuet testez pour plus de lisibilité!

UMLWEBDEV 20 supporte UML et crée

automatiquement le diagramme declasses en rétro analysant le code.Inversement, un diagramme UMLgénère le code des classes.

GESTIONNAIRE DESOURCESWEBDEV 20 est livré en standard avecun outil de versionning, le Gestionnairede Sources collaboratif (GDS, voir page44).

AJAXC o n c e r n a n tAJAX, il suffitde cliquer surle bouton«Ajax» de la ligne pour utiliser cettetechnologie (voir p 36).

COMPLÉTION AUTOMATIQUELors de lafrappe d’unordre, le typede paramètreattendu estproposé dansune liste déroulante. Une bulle d’aideapporte également des informationsprécieuses sur chaque paramètre de lafonction utilisée.

ERREURS EN TEMPS RÉELSi une erreur desyntaxe estcommise, ellesera détectéesous l’éditeur de code, avant même lacompilation du projet ! Les erreurs sontmatérialisées par un souligné rougesous la fonction dont la syntaxe estincorrecte.

L’éditeur de code participe àl’ergonomie générale, et à lafacilité légendaire deWEBDEV 20.

• Initialisation du champ• Entrée dans le champ (onfocus)

• Modification en sortie (onchange)• Sortie du champ (onblur)

L’EDITEUR DE CODE VOUS ASSISTE

Page 18: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

WEBDEV®

La phase de tests auto-matisés n’est qu’unepartie du chemine-ment qui amène laqualité du logiciel,mais c'est une

phase importante.WEBDEV 20 propose

en plus des tests denon-régression, la réali-

sation de tests unitaires,de tests d’intégration, de

tests de charge.

TEST UNITAIRE DE PRO-CÉDURES ET DE CLASSESLe processus de création des testsest totalement intégré à l’environ-nement. Pour tester directementune procédure ou une classe, il suf-fit d’utiliser le menu contextuel quipropose de créer (et ensuite derejouer) un nouveau test unitaire.

TAUX DE VALIDATION DE L’APPLICATIONLe centre de tests permet d’afficherla liste des tests existants, la versiondu site sur lequel chacun de ces

tests estpassé et lerésultat dechaquetest. Ces infor-mationssont égale-ment affi-chées enmoderésumé

dans le «Tableau de bord» du projet.

L’ÉDITEUR DE SCÉNARIOSDE TESTLors de l’exécution d’un test, si uneerreur est détectée dans le site, leclic sur l’erreur d’exécution duscript positionne directement dansle code à l’emplacement de l’erreur.

LA VÉRIFICATION DESTESTS LORS DES PROCESSUS COURANTSChaque élément modifié qui n’a pasété validé en passant des tests estsignalé. Le Centre de Tests signaleaussi toutes les erreurs qui n’ontpas été corrigées, ainsi que toutesles régressions. Un historique des taux de validationest automatiquement mémorisé, cequi permet le suivi de l’évolution dela qualité du site.Cette vérification est égalementeffectuée lorsque vous réintégrezdes éléments dans le gestionnairede sources (voir p 44).

DÉBOGUEURPUISSANT ETCONVIVIALPour mettre au point

les sites Internet inter-actifs, le débogueur

permet l'exécution enpas à pas d’un traitementdu site, en visualisant ouen modifiant le contenude variables choisies.

DES FONC-TIONNALITÉS

AVANCÉESLe débogueur est très puissant et pro-pose des fonctionnalités avancées:• exécution en pas à pas, saut de fonc-

tions, sortie immédiate de fonction,exécution jusqu’à une ligne donnée,...

• autostop, qui arrête l’exécution àchaque changement de valeur d’unevariable ou d’une expression définie

• visualisation automatique (débran-chable) de toutes les variables de laligne en cours d’exécution («Watch»)

• visualisation d’expressions contenantdes fonctions

• affichage de la valeur de la variable sur-volée par bulle

• résultat en décimal ou hexadécimal• pile des appels visualisée en temps réel• trace du code exécuté• 32 et 64 bits • ...

DÉBOGAGE À DISTANCEIl est possible de déboguer un serveur àdistance: vous déboguez par exemple leserveur en place chez l’hébergeur sansvous déplacer.

DÉBOGUEUR PHP ET AWPLe débogueur fonctionne en mode«AWP» (le mode des contextes semi-automatiques). En PHP, il est possible dedéboguer l’application initiale.

Le débogueurpermet un gainde tempsprécieux lorsdes phases demise au point. Il devient viteindispensable !

Le débogueurapporte uneproductivité

professionnelle

DÉBOGUEUR INTÉGRÉ: MISE AU POINT FACILE DE VOTRE CODE

QUALITÉ DE VOS SITES: TESTS UNITAIRES

34 • WEBDEV 20 : Développez 10 fois plus vite www.pcsoft.fr • 35

Ne ré-inventezpas la roue,ré-utilisez !

WEBDEV®

La notion de «composant»simplifie drastiquement ledéveloppement: il s’utilisecomme une «boîte noire»,en toute facilité, en toutesécurité.Un composant peut contenirdu code, des pages, desimages, des classes, uneanalyse, et même des tablesde données.

LE DÉVELOPPEMENT FIA-BILISÉ GRÂCE AUX COM-POSANTSUn composant est une «boîte noire»,une «brique logicielle», dont le déve-loppeur utilisateur connaît seulementles points d’entrée et la nature desinformations éventuellement retour-nées. La possibilité de créer des composantsélaborés aussi simplement que des par-ties de sites traditionnels vous permetde simplifier vos développements.

Des composants dans l’environnement

SÉCURISEZ VOS COMPOSANTSLes composants que vous créez sont«sécurisés», c’est-à-dire que personnene pourra étudier ou voir ou copier lecode source, l’analyse,...

COMPOSANTS MULTICIBLESLes composants sont compatiblesentre WINDEV, WINDEV Mobile etWEBDEV. Cela permet une meilleureré-utilisabilité.

DE NOMBREUX COMPOSANTS PRÊT-À-L’EMPLOI LIVRÉSWEBDEV 20 est livré avec de nombreuxcomposants (avec leur source) quevous pourrez utiliser dans vos sites:

• demande de documentation • panier (pour commerce électro-

nique)• paiement sécurisé...

Le développement d’un sitedynamique (relié à des don-nées, et comportant des trai-tements) nécessite unephase de programmation.WEBDEV 20 est ouvert àtoutes les méthodes dedévelopement.

PROGRAMMATIONPROCÉDURALE OU POOLa programmation avec WEBDEV 20s'effectue en WLangage, le célèbreL5G, réputé pour sa puissance et sonintuitivité.Les développeurs ont le choix entreprogrammation procédurale etProgrammation Orienté Objet (POO).L'approche objet garantit l'évolutivitédu code complexe et facilite sa main-tenance future.

POOWEBDEV permet un développementorienté objet si vous le souhaitez.Les classes et les syntaxes duWLangage autorisent une program-

mation orientée objet moderne etefficace. Les méthodes des classes de basepeuvent être redéfinies visuellementdepuis l'explorateur de projet; lesméthodes virtuelles sont généréesautomatiquement.La gestion de la mémoire des ins-tances est totalement automatiquedans la très grande majorité des cas,pour les allocations comme pour leslibérations.

TOUTES LES NOTIONS DELA POOLes notions suivantes de la POO sontsupportées: • Classes• Classes abstraites• Héritage,héritage multiple• Réflexion• Surcharge (dynamic dispatch)• Méthodes abstraites et virtuelles

(polymorphisme)• Propriétés (get et set)• Constructeur• Destructeur

• Encapsulation des données : public,privée, protégée

• Libération automatique• Opérateur "est un" et downcast• Référence faible• Association• ...

XML, JSON,...Le WLangage est optimisé pour trai-ter les documents XML et JSON.Les structures des documents sontimportées directement dans leWLangage.L’éditeur de code propose alors la sai-sie assistée sur les noms des élémentsdes documents, la coloration syn-taxique,...

LES COMPOSANTS: RÉUTILISABILITÉ DE VOTRE CODE

LA POO

Page 19: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

La technologie Web 2.0 per-met aux applications Webd’apporter un comporte-ment d’IHM proche d’uneinterface traditionnelle sousWindows. Un élément déterminant duWeb 2.0 est «AJAX» qui per-met au navigateur de nerafraîchir que la partiemodifiée de la page.

SANS AJAX...En WEB traditionnel, lorsque l'applica-tion souhaite modifier un seul élémentdans une page affichée (par exemple unprix, une liste de véhicules...), le serveurdoit renvoyer la page entière sur lamachine de l'internaute.Cela charge le serveur, occupe de la«bande passante», produit un effetvisuel de «repaint» sous le navigateur del'internaute, et l'affichage peut être lentpuisque le navigateur doit réinterpréteret réafficher la page entière...

AVEC AJAX...Avec la technologie AJAX, point centraldu «WEB 2.0», il devient possible den'envoyer sur la machine de l'inter-naute «que» les données modifiées,sans rafraîchir la totalité de la page.Les avantages sont multiples : le ser-veur est moins sollicité, les informationsqui circulent sont de taille réduite, l'af-fichage pour l'internaute est immédiatet sans effet visuel.

UTILISER AJAX DANS UNSITE WEBDEV: 1 CLIC !Vous n'avez rien à programmer. Vous bénéficiez automatiquement deAJAX.Vous continuez à programmer en L5G(WLangage). WEBDEV s'occupe detout !Un choix «AJAX» apparaît dans la barrede titre de l'éditeur de code. Si vousdésirez activer AJAX sur le traitement,il suffit de cliquer ... sur le bouton«AJAX».Le libellé change et devient «AJAXactivé».

LA SÉCURITÉDe par sa technologie, AJAX permet lelancement de procédures et traite-ments «serveur» depuis un appel dunavigateur. Pour sécuriser vos sites, lestraitements WEBDEV sont protégés detout appel illégal (tentative de détour-nement de session,...).

LA TECHNOLOGIE AJAXDE WEBDEV SUR LESCHAMPSSuite à une requête Ajax sur une page,tous les champs concernés sont auto-matiquement mis à jour en fonction deleur valeur sur le serveur. Il n’y a rien àcoder.

36 • WEBDEV 20 : Développez 10 fois plus vite

Quelques fonctionnalités disponibles dans les tables «AJAX»Ces fonctionnalités sont disponibles pour les sites Internet et Intranet

Le fond du ban-deau de sélection

peut être uneimage

Il est possible deredimensionner

les colonnes

Un ascenseur rem-place automatique-ment la règlette

Ancrage et ascen-seur automatique

Gestion automatique d’un «cache» (fetch par-tiel) qui ne charge que lesdonnées nécessaires à l’af-fichage et au parcoursfluide à vitesse humaine

Si un traitement estlong, un sablier s’affiche

automatiquement.

Les cellules detable peuvent être

en «saisie»

Les lignes de latable sont «multisélection»

Le tri descolonnes est disponible

La recherche dansla table est possiblevia la loupe

IMPLÉMENTEZ AJAX EN 1 CLIC Ajaxsans code supplémentaire.

www.pcsoft.fr • 37

Webservices àvotre service

WEBDEV®

LA FACILITÉ DE WEBDEVAU SERVICE DESWEBSERVICES

WEBDEV 20 permet de consommer,créer, déployer et héberger facilementdes Webservices.

CONSOMMATION FACILEDE WEBSERVICESIl est très facile d’importer et d’utiliserun Webservice depuis WEBDEV. A partir de la description au formatstandard WSDL (Web ServicesDescription Language) de ce service,WEBDEV génère automatiquementdes types et des fonctions WLangagescorrespondant à l’interface de pro-grammation du Webservice. Ainsi les éléments du Webservice appa-raissent dans le projet comme des élé-ments à part entière du site. CONSOMMATION FACILE

DES WEBSERVICES SOAPUne utilisation avancée desWebservices utilisant le protocole stan-dard SOAP (Simple Object AccessProtocol) est possible grâce à un jeu defonctions SOAP. Ces fonctions permettent de manipulerprécisément le flux de données XMLéchangé avec le Webservice (en-têtes,authentification, meta informations,…).

CONSOMMATION FACILEDES WEBSERVICES RESTIl est possible également d’interrogerun Webservice de type REST grâce à lafonction WLangage RESTEnvoie().

CRÉATION FACILE DEWEBSERVICES

La création de Webservices s’ef-fectue facilement: il suffit de définirla collection de procédures quiconstitue l’interface du Webservice. Le fichier de description WDSL estgénéré automatiquement.

TOUT EST GÉRÉLa gestion des Webservices enWEBDEV est très puissante; voici uneliste de quelques fonctionnalitésgérées: • Résultats de type tableau (SoapArray) • Databinding Webservices • Inclusion de Webservices• Attributs dans les wsdl• Réponses multiples• En-têtes multiples • Signature du message• WS-Addressing• Cyclage dans les schémas• Authentifications SPNEGO

DÉPLOIEMENT FACILE DEWEBSERVICES

Les Webservices sont hébergés surune machine disposant d’un serveurd’application WEBDEV. La procédure d’installation est auto-matiquement générée. L’administration s’effectue depuis l’ad-ministrateur WEBDEV comme un site«classique», tous les outils sont dispo-nibles: statistiques de fréquentation,etc (voir administration des sites p 54)

HÉBERGEMENT FACILEDE WEBSERVICES

La technologie d’hébergement estbasée sur le robuste serveur d’applica-tion standard de WEBDEV. Cette technologie permet d’assurer ladisponibilité du Webservice, ainsi quesa vitesse. Les demandes sont exécutées simulta-nément, dans des process séparés, cequi garantit la sécurité.Les Webservices peuvent être consom-més par tout type d’applications ,créées en WINDEV, WEBDEV ou avectout autre langage tiers.

LES WEBSERVICES: FACILE

Consommation de Webservices: les éléments du Webservice

apparaissent dans le projet commedes éléments du site,

pour faciliter le développement

Page 20: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

Lorsque l’on crée un site dynamique de zéro,il est nécessaire de définir les tables de don-nées à gérer. C’est facile avec WEBDEV 20.Et si les bases de données existent déjà,WEBDEV les utilise directement. La méthode visuelle de WEBDEV décrit l'organisation desdonnées de manière graphique. Merise et UML sont inclusesdans l’environnement. Notez que WEBDEV fonctionne avectoutes les méthodes d’analyse.

DÉFINIR UNE NOUVELLE STRUCTURE Si vous devez définir de nouvelles tables de données,détaillons un exemple simple mais représentatif de définitionde nouvelle structure: la définition de tables de «Produit» etde «Commandes».

1. Créons la table «PRODUIT»: il suffit de spécifier son nom,et quelques renseignements généraux.

2. Créons la structure de la table: chaque colonne est défi-nie, ou récupérée du dictionnaire des données.

3. On crée ensuite de la même manière latable «COMMANDE». Les CLIENTS passent des commandes. Il faut donc relier ces 2 tables dans l’analyse.Après avoir cliqué sur l'outil «liaison» de labarre d'icones, il suffit de tracer un lien avecla souris entre ces 2 tables.

4. WEBDEV 20 pose alors les questions simples en langagenaturel pour déterminer automatiquement le type de liaisonentre les 2 tables.

Les questions sont d’une simplicité enfantine. Par exemple ici:

En fonction des réponses à ces questions simples, WEBDEVdétermine les cardinalités correctes, et déduit la nécessitééventuelle d’une table de relation!

5. WEBDEV demande ensuite les règles à appliquer en casde suppression ou de modification (intégrité référentielle).

6. Voilà, les tables sont reliées, le travail est terminé.L’éditeur de requêtes saura trouver les jointures automati-quement, et chaque éditeur de l’environnement saura mani-puler automatiquement les données...

Une table de liaison a été automatiquement créée.

Il ne reste plus qu'à (éventuellement) imprimer le dossier, etgénérer les pages et le code avec le RAD, ou débuter un déve-loppement... C'est aussi simple que cela.

38 • WEBDEV 20 : Développez 10 fois plus vite

LE DOSSIER TECHNIQUE D’UN CLICWEBDEV 20 permet d’éditer à tout moment le dossier d’ana-lyse et de programmation complet du site. Le dossier est réa-

lisé par rétro analyse de l’existant, donc toujours à jour. Un dos-sier peut contenir plusieurs centaines de pages, être édité enPDF, en HTML, sous un traitement de textes...

Chaque «produit» a au mo ins une «commande»: oui ou non?Chaque «produit» peut avo ir p lusieurs «commandes»: oui ou non?Etc...

Interdire la suppression d’un Produit qui a une Commande: oui ou non?Etc...

MODÉLISER UNE BASE DE DONNÉES :FACILE (UML, MERISE,...)

IMPORTERDES

DONNÉESEXISTANTESSi vous possédez

déjà une analyse oudes données, vous

les intégrez automa-tiquement dans l’en-vironnement (impor-tation de la descrip-

tion des tables,colonnes et rela-tions). Un simple

«drag & drop» de lastructure dans l’édi-teur d’analyses crée

les structures !

www.pcsoft.fr • 39

TOUTES LES BASES DE DONNÉES: MYSQL,ORACLE, AS/400, SQL SERVER, INFORMIX...

Une descriptionde structures dedonnées sousWEBDEV

Un site dynamique utilisedes données. WEBDEV 20accède à toutes les bases dedonnées du marché. WEBDEV est ouvert, il per-met de ré-utiliser et decohabiter avec un existant.

TOUTES LES BASES DEDONNÉES SONT SUPPORTÉES (LISTE NONEXHAUSTIVE)WEBDEV peut lire et écrire dans toutesles bases de données.Parmi ces bases, on trouve les suivantes(voir tableau ci-contre svp).

HFSQL, UNE PUISSANTEBASE DE DONNÉES SQLEN STANDARDWEBDEV est livré avec HFSQL, unepuissante base de données SQLClient/Serveur, déjà utilisée sur des mil-lions de sites. HFSQL est déplyable librement avec vossites WEBDEV.HFSQL est décrit en détail page 40.

ACCÈS EN MODE NATIF WEBDEV peut accéder en mode natifà MySQL, Oracle, SQL Server,PostgreSQL, SQLite, AS/400, DB2,Informix, Sybase directement (modulesdisponibles séparément). L’installation de ces accès natifs estextrêmement simple (un fichier detaille réduite). Les champs de type BLOB ou Long Rawsont supportés.Les performances d’accès sont remar-quables.

SUPPORT NATIF DESBASES «AS/400» ET«ISERIES»

WEBDEV accède àl’AS/400 directe-ment (module dis-ponible séparé-ment), sans driverODBC, OLE DB etsans ActiveX.WEBDEV saitrécupérer etexporter desDDS, lancer desc o m m a n d e s

CL, gérer uneDataqueue,...L’intégration à l’environnement esttotale, et la vitesse est époustouflante.

Demandez la brochure spécifique !

BIG DATAWEBDEV est livré avec des exemplesd’accès à MongoDB et riak.

TOUTES LES BASES DEDONNÉES VIA ODBC OUOLE DBWEBDEV 20 accède à toute base dedonnées possédant un driver ODBC ouOLE DB.

SCRIPT SQL = ANALYSEWEBDEVUne analyse définie sous WEBDEVpeut être convertie en script SQL pourcréer de nouvelles bases SQL, et toutscript SQL peut être converti automa-tiquement en analyse WEBDEV pourexploiter un existant. Cela offre une ouverture totale.La récupération des structures exis-tantes s’effectue le plus souvent par unsimple «drag&drop» vers l’éditeurd’analyses.

LES PROCÉDURES STOCKÉESSi la Base de Données tierce supporteles procédures stockées, celles-ci sontaccessibles par des applications écritesavec WEBDEV.

LA PROGRAMMATIONEST IDENTIQUEQUELLE QUE SOIT LABASE DE DONNÉESQuelle que soit la base de données,vous pourrez utiliser indifféremment laprogrammation par SQL ou par lesordres du L5G de WEBDEV, leWLangage (hLitSuivant,...).Cela offre encore fois une grandeouverture, et la possibilité de changerde base de données très facilement.

VOUS UTILISEZWINDEV...Si vous utilisez WINDEV, notez quevous pouvez partager le projet et seséléments (code, classes, fenêtres,requêtes, états, ...) entre les 2 environ-nements, et exporter vos applicationsvers WEBDEV.

WEBDEV 20 permet decréer un nouveau site et sesdonnées, ou de créer dessites reliés à des donnéesexistantes, quelle que soit laBase de Données.

- HFSQL*

- MySQL*

- Oracle**

- Informix**

- SQLServer**

- PostgreSQL*

- MariaDB*

- SQLite*

- IBM DB2**

- IBMAS/400**

- Sybase**

- Netware SQL- Ingres- Progress**

- XML*

- Bull DPS- Access- xBase*

- ASCII*

- Excel*- Etc...

*: connecteur natif standard **: connecteur natif en option

Page 21: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

WEBDEV 20 gère toutes lesbases de données du mar-ché.En standard, WEBDEV estlivré avec une base SQL,HFSQL, à la fois très puis-sante, rapide et fiable.La diffusion du moteurHFSQL est gratuite.

WEBDEV GÈRE TOUTESLES BASESWEBDEV fonctionne avec toutes lesBases de Données du marché (voirpage 39).

UNE BASE DE DONNÉESÉPROUVÉE LIVRÉE ENSTANDARD: HFSQLHFSQL est le nouveau nomHyperFileSQL.HFSQL est livré en standard avecWEBDEV 20. Il s’agit d’une base de données fiableet robuste, utilisée sur des millions desites à travers le monde.

329 MILLIONS DE MILLIARDS DE LIGNES(ENREGISTREMENTS)...

HFSQL permet de manipuler simple-ment et en toute sécurité des volumesde données importants (jusqu’à 329millions de milliards de lignes). Vous envisagez sereinement la crois-sance naturelle des volumes de don-nées.

PARTAGE DES DONNÉESFACILE AVEC LE «BACKOFFICE»Les données du site peuvent facilementêtre partagées avec les applications«back office», par exemple pour trai-ter les commandes reçues, émettre lesBL et les factures, les ordres de prépa-ration... WINDEV est le complémentidéal à WEBDEV pour réaliser un BackOffice performant.

RÉPLICATION SITE / BACK OFFICELa réplication est souvent utile entre lesite et le back office.HFSQL gère la réplication de bases dedonnées et la réplication de serveurs,mono et bi-directionnelle, périodiqueou continue.La réplication peut être automatique,ou totalement personnalisée.

UNE VITESSE TRÈS ÉLEVÉEL’intégration totale des ordres, l’orga-nisation (automatique) des index per-

mettent des vitesses d’accès fabu-leuses. Cela donne de meilleurs tempsde réponse à votre site, que ce soit enInternet ou en Intranet.

UNE INTÉGRATIONTOTALEL’intégration du moteur à l’environne-ment de développement est totale.A tout moment, dans tous les éditeurs,vous disposez d’un accès immédiat àtoutes les informations concernant lestables et les colonnes. L’intégration Interface et base de don-nées permet une programmation plusfacile et plus rapide.

CONFIDENTIALITÉ: CRYPTAGE 128 BITSSur Internet, les données seront pré-sentes sur un serveur: il faut les proté-ger des tentatives d’accès illégales;c’est facile avec HFSQL. Le cryptage desdonnées et index est possible, pour unesécurité accrue.

FONCTIONNALITÉSAVANCÉESHFSQL propose les fonctionnalitésavancées: cluster, intégrité, journal,transactions, triggers, gestion automa-tique des accès concurrents, Unicode,maintenance à chaud (sans décon-nexion des utilisateurs)...

HFSQL : BASE DE DONNÉES SQL LIBRECLIENT/SERVEUR WINDOWS ET LINUX

iOSiOS

Ce Centre de Contrôle per-met d’administrer tous lesserveurs et toutes lesbases de données installéssur le réseau de votreentreprise ou à distancevia Internet. Ce centre permet égale-ment:• la visualisation et édition

des données• l’exécution directe de

requêtes• la gestion des comptes

utilisateur (groupes), desdroits, liste desconnexions en cours

• l’édition des statistiques

précises d’utilisation duserveur: postes,requêtes, journaux, logs,paramètres...

• déconnexion d’utilisateur• la gestion des transac-

tions: visualisation, annu-lation, ...

• la gestion des sauve-gardes (à chaud)

• la visualisation des blo-cages d’enregistrement

• les tâches planifiées• la réplication de serveurs• l’affichage du nombre de

lignes traitées• la gestion des clusters• ...

40 • WEBDEV 20 : Développez 10 fois plus vite

LE «CENTRE DE CONTRÔLE» HFSQL

www.pcsoft.fr • 41

FONCTIONNALITÉSCryptages 128 bits

Intégrité référentielle

Journalisation

Réplication

Transactions

Triggers

Unicode

Import Export

Cluster

Compression/Décompressiondes mémos à la volée

TECHNOLOGIESMaintenance automatique (SDD)

Gestion des accès concurrents

Reconnexion automatique

Zéro administration

Reprise après incident automatique

Déploiement automatique

Découvrez HFSQL danscette documentation de24 pages disponible surwww.pcsoft.fr

CLUSTER (FERME DE SERVEURS)Grâce à la fonctionnalité de cluster, unensemble de serveurs physiques apparaîtcomme un serveur unique aux clients.La défaillance éventuelle d’un serveur phy-sique ne provoque pas de défaillance desaccès à la base de données (haute disponi-

bilité, tolérance aux pannes).La charge d’accès lecture est répartie surl’ensemble des serveurs (répartition de lacharge en lecture).Lorsqu’un utilisateur est connecté à un ser-veur qui défaille, l’application ne sera pasdéconnectée, et sera automatiquementreconnectée à un serveur valide (bascule-ment automatique).

OUVERTURE AUX AUTRESLOGICIELSLes connecteurs natifs, les driversODBC et OLE DB fournis avec HFSQLpermettent de lire et écrire depuis desprogrammes ou applications tiers.

SQL ET WLANGAGEIl est possible d’accéder aux donnéesvia SQL ou par les fonctions puissantesdu WLangage. Dans un même pro-gramme, commandes SQL et com-mandes WLangage peuvent êtremixées.

LE CODE PEUT ÊTREGÉNÉRÉ !La programmation est très facile, trèsrapide et très fiable. Le code peut êtregénéré automatiquement lors des créa-tions de pages par le RAD WEB!

SÉCURITÉ : «SQLINJECTION» IMPOSSIBLEIl est possible de créer des requêtesparamétrées, ce qui interdit lesattaques de type « sql injection » auserveur.

RECHERCHE «FULL TEXT» La recherche «full text» permet larecherche de chaînes de caractères trèsrapide dans les données. L’index gère les textes enrichis (RTF,HTML), pour ignorer les balises de cesformats lors de l’indexation.Les résultats sont proposés selon unordre de pertinence («ranking»).

SAUVEGARDE À CHAUDIl est possible de déclencher une sau-vegarde d’une base de données alorsque la base de données est utilisée. Il peut y avoir des accès en cours (lec-ture, écriture, exécution de requêtes,...)à la base de données. La cohérence desdonnées sauvées est assurée.La sauvegarde peut être déclenchéepar programmation (à heure fixe parexemple) ou par action du DBA. Il est également possible d’effectuerdes sauvegardes différentielles.

INSTALLATION ETCONFIGURATIONFACILESHFSQL est immédiat à installer, sans

aucune manipulation. De même, l’ad-ministration des bases de données estautomatique. La gestion de l’évolution des structuresde base de données est automatique-ment gérée (technologie SDD).

DÉPLOIEMENT HFSQL : GRATUITL’utilisation de HFSQL peut représenterdes économies de plusieurs centainesde milliers d’Euros en déploiement (etencore plus dans le cas de déploiementde sites Intranet). Un avantage à ne pasnégliger.

HFSQL Client/Serveur est lemeilleur allié de vos sites !

WEBDEV®

Page 22: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

L’éditeur permet de créer automatiquementdes requêtes sur des tables, requêtes simplesou complexes. Cela simplifie encore la pro-grammation: pages, tables, zones répétées,combos, états... pourront s’appuyer sur lesrequêtes.

INUTILE DE CONNAÎTRE SQL POURCRÉER DE PUISSANTES REQUÊTESGrâce à l’éditeur visuel, il suffit de choisir les colonnes à inté-grer, de saisir les conditions de sélection à l’aide de l’assis-tant, et la requête est générée.Le code SQL généré par l’éditeur de requêtes est bienentendu modifiable.Les requêtes s’exécutent sur HFSQL (Classic, Mobile etClient/Serveur), ainsi que sur toutes les autres bases de don-nées.Il est possible de mixer du code WLangage (ordres hLit*) avecdes requêtes.

DES REQUÊTES VISUELLESLa requête est également générée en langage naturel au furet à mesure de vos choix dans l’éditeur (ou en SQL, à votrechoix).

L’éditeur de requêtes (aide «furtive» affichée)

� Le code SQL généré automatiquement

Une fois validée, la requête apparaîtra sous une forme degraphe synthétique dans l’environnement, ce qui affineencore sa compréhension pour des évolutions futures.

3 � La requête définie, celle-ci est visualisée.

EXÉCUTION OPTIMISÉEAvec HFSQL, le choix des index les plus discriminants seraeffectué lors de l’exécution, en tenant compte du poids réelde chaque index dans la table. S’il manque des clés, l’envi-ronnement le signale immédiatement grâce à l’AAD (Aide AuDéveloppement).

DES REQUÊTES SUR REQUÊTES...Le résultat d’une requête peut être une table de visualisation,un état imprimé, voire même une table de type HFSQL. Unerequête peut utiliser comme source le résultat envoyé par uneautre requête.

DES REQUÊTES SUR TOUTES LES BASESLa source des données peut être une base HFSQL ou une basetierce: Oracle, SQL Server, DB2, AS/400, MySQL, Access...

L’éditeur de requêtes simplifie laprogrammation des accès à vos données.

42 • WEBDEV 20 : Développez 10 fois plus vite

� La requête se construit sous vos yeux en langage naturel

ÉDITEUR DE REQUÊTES VISUEL

www.pcsoft.fr • 43

Un éditeur d’états résout laproblématique du reportingsur Internet. Et il simplifie la création desimpressions. Son usage est double:• d’une part pour les appli-

cations Intranet• d’autre part pour la géné-

ration dynamique d’étatsqui seront envoyés à l’in-ternaute (facture PDF parexemple).

PDF EN STANDARDLes états peuvent être créés au formatPDF en standard (sans frais supplé-mentaires, sans module complémen-taire à acquérir ou à installer).

Un état PDF généré avec WEBDEV 20

CRÉER UN ÉTAT: FACILE

Le choix du type d’état à créer

Un assistant est systématiquement pro-posé pour générer des états de hautequalité; il pose les questions permet-tant de n'oublier aucun élément !

En Intranet, les états s’impriment surune imprimante accessible depuis leserveur.Pour Internet, l’état sera envoyé à l’in-ternaute sous une forme spécifique:HTML, RTF, PDF...

TOUTES LES SOURCES DEDONNÉESLes données utilisées pour un état peu-vent provenir de n’importe quellesource: HFSQL, Oracle, Access...,requête, fichier texte, zone mémoire,table de page,...

GESTION DES FONDS DEPAGE PDFL’éditeur d’états gère les fonds de pageet les formulaires destinés à être impri-més, par exemple les formulaires fis-caux.

INCLURE DES IMAGES:AUTOMATIQUEInclure des images (BMP, TIFF, PCX, GIF,JPEG, PNG...) dans des états est d'unesimplicité totale. L'image peut être fixe(logo,...), ou provenir du traitement oud’un fichier (photo du produit,...). Il est également facile d'imprimer desdessins créés par programme.

DU CODE SOURCE OÙVOUS DÉSIREZWebDev permet d'inclure tout codesource exécutable (WLangage) à toutendroit d'un état: vous pourrez ainsiréaliser les traitements les plus particu-liers, sans jamais rencontrer de blo-cages.

CODE-BARRES AUTOMATIQUES

WEBDEV 20 imprime automatique-ment les codes-barres (horizontale-ment ou verticalement). Les formats supportés sont: QR Code,UPCA, UPCE, EAN13, EAN8,CODE128, CODE39, CODE93,CODE11, intervaled 2 of 5, CODABAR,CB_MSI, Datamatrix, PDF417...

MAILEZ DES ÉTATSAvec WEBDEV il est facile de créer unétat dynamiquement (par exemple unefacture des produits que vient d’ache-ter l’internaute en ligne!) et de le mai-ler immédiatement (au format PDF parexemple).

DIFFUSION LIBRE DESÉTATSIl n’y a pas de redevances ou de royal-ties à verser pour diffuser les états avecvos sites WEBDEV.

Avec WEBDEV 20, les étatssophistiqués c’est vraimentfacile !

Un éditeurd’états

WYSIWYG, aupixel près

WEBDEV®

ÉDITEUR DE RAPPORTS : GÉNÉREZ DES PDF EN TEMPS RÉEL (FACTURES...)

Un état en coursde création sousl’environnement

Page 23: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

LA BASE DES SOURCESAvec le GDS (Gestionnaire De Sources

- appelé SCM en anglais), les élémentsdu projet sont regroupés dans une basede données. Avant d’être utilisé un élé-ment est extrait, après avoir été modi-fié, il est ré-intégré. Chaque membrede l’équipe utilise donc des éléments àjour.Le GDS stocke tous les éléments duprojet: procédures, collections, classes,pages, états, composants, requêtes,analyses, dépendances (images,...), ...

TOTALEMENT INTÉGRÉTotalement intégré aux différents édi-

teurs, l’outil de versionning (GDS) per-met le développement en équipe, laconservation de l’historique des modi-fications et des versions, la gestionsimultanée de plusieurs versions d’unmême site, et l’automatisation de lasauvegarde des sources.

Le gestionnaire de versions apporteconfort, souplesse, sécurité et vitesse. Dimensionné pour des équipes de 1 à100 développeurs, le GDS favorise etnormalise sans contrainte les échangesentre développeurs.

DE PUISSANTES FONCTIONNALITÉS• Le GDS est totalement intégré à l'en-

vironnement; par exemple le GDSpropose d’extraire l’élément lorsd’une modification.

• La base gère plusieurs projets; si plu-

sieurs projets utilisentun même élément,celui-ci peut être par-tagé.

• Un historique de tousles éléments (pages,codes, requêtes,...),depuis leur création, estmémorisé dans la base(une purge totale oupartielle est toujours pos-sible).

• Le projet est éga-lement présentsur chaquemachine de déve-loppement; il estdonc possible dedévelopper avec lamachine déconnec-tée.

• La gestion desbranches est assu-rée.

• Le «Diff» (diffé-rences) entre 2 élé-ments est disponible:source, page,...

• Vous pouvez consul-ter à tout moment laliste des modificationseffectuées entre 2 versions,par vous-même et/ou pard’autres développeurs ou web-masters...

CONNECTÉ ET À DISTANCELe GDS permet un fonctionnement à

distance, connecté via Internet. Il estainsi possible de travailler sur un projetdepuis un site client, sans crainte deperte des modifications effectuées.Si vous êtes connecté (par exemple enADSL), les modifications que vouseffectuez seront immédiatement dis-ponibles pour les autres développeurs.

DÉVELOPPEUR ISOLÉMême en développant seul, l’outil de

versionning a de l’intérêt: il conservel’historique des modifications de tousles éléments, et agit donc comme unefonctionnalité de sauvegarde et d’ar-chivage des versions.La gestion des branches permet degérer facilement plusieurs versions d’unmême site.

44 • WEBDEV 20 : Développez 10 fois plus vite

TRAVAIL EN ÉQUIPEOUTIL DE VERSIONNING (GDS /SCM)

Développez

au bureau,

en déplace-

ment, etmême à la

plage !

Le GDS gèreautomatique-ment les «dépen-dances»: lesfichiers utilisés(images,...). LeGDS les détectedans le projet, etles sauvegardeavec le reste duprojet.

TABLEAU DEBORD DE PROJETLe Tableau de Bord permet

une vision globale du pro-jet, de son état d’avance-ment et de sa qualité. Des voyants alertent lorsquecertains seuils (paramé-trables) sont franchis:nombre de bogues, retardde planning... et indiquentles optimisations à effec-tuer.

POUR GÉRER LECYCLE DE VIEUn Centre de Contrôle est

une application de «super-vision» d’un aspect du cyclede vie d’un site.

Un Centre de Contrôlepermet d’avoir une visionglobale du domaine cou-vert, que ce soit en phasede développement, sur unsite d’exploitation, ouencore pour les aspects de mainte-nance et d’évolution.Les Centres de Contrôle que l’on utilisele plus dans le cadre d’un développe-ment Web sont les suivants:• Centre de Suivi de Projets• Centre de Contrôle d’hébergement.Les Centres de Contrôle sont totale-ment intégrés à l’environnement; lesinformations sont partagées.

ALM : CENTRE DECONTRÔLE DE SUIVI DE PROJETSCe centre permet le suivi des plan-nings, des tâches affectées et réaliséespar chaque membre de l’équipe, eteffectue le suivi de la gestion des «exi-gences» et de la qualité.

GESTION DES EXI-GENCES ET DES TÂCHESLe Centre de Suivi de Projets permet dedéfinir et suivre l’avancement des «exi-gences» de chaque version du projet.Une exigence correspond à une fonc-tionnalité à développer dans le logiciel.A chaque exigence peuvent être liéesdes tâches (tâche de développement,de test, de documentation,...), desbogues, des règles métier...

GESTION DE LA QUALITÉLa gestion de la qualité permet le suivides incidents de développement.

CENTRE DE CONTRÔLE D’HÉBERGEMENTLe Centre de Contrôle d’hébergementpermet de configurer un profil d’hé-bergement type, et de maintenir le ser-veur d’hébergement. La gestion des comptes et des serveursWeb est également effectuée à traversce centre (voir p 50 à 53).

La gouvernance de projetsdevient facile.

www.pcsoft.fr • 45

PILOTEZ VOS PROJETS: TABLEAU DE BORD &CENTRES DE CONTRÔLE

Le Tableau de Bord permet d’avoir une vision globale de l’état du projet.

Gérez le planning de l’équipe de développement en temps réel

Analyse d’impact

WEBDEV®

Pilotez vos projets

Page 24: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

Import de pages HTML.

Les pages statiques existantes peuvent être récupérées dans WEBDEV 20. Les champs correspondants sont créés.

Ici : une fenêtre sous WINDEV ... ... et le résultat de son import dans WEBDEV 20.Le code source est également importé !

Import, export et partage WINDEV.L’import, l’export et le partage d’applications et de fenêtres WINDEV permettent de gagner énormément de temps lors dupassage d’une application Windows à une application Internet et vice-versa.

IMPORT D’EXISTANT HTML

La page statique initiale... La même page importée dans l’éditeur de WEBDEV

IMPORTER UN EXISTANT HTMLWEBDEV propose une fonctionnalité intéressante: l’aspirationde page HTML existante.La page est importée dans WEBDEV, et chaque libellé, image,lien... est transformé automatiquement en objet WEBDEV.La présentation générale de la page est conservée.Vous pourrez ainsi récupérer facilement un existant.

IMPORTER UN EXISTANT DREAMWEAVERIl est possible d’importer des pages, des templates et deslibrairies Dreamweaver. Lors de l’import d’une page réaliséeavec Dreamweaver, si un template Dreamweaver est détecté,il est automatiquement transformé en «modèle de pages»WEBDEV. Si ce template est détecté dans une autre pageimportée, il sera automatiquement substitué par le «modèlede pages» précédemment créé.

RÉCUPÉRER ET PARTAGER UN EXISTANTWINDEVLes fenêtres réalisées avec WINDEV sont directement trans-formées en pages. Les projets sont communs. Les champs,

le code, les états sont récupérés. Le passage de Windows versInternet (et Internet vers Windows) n’a jamais été aussi facile!Vous pouvez partager les classes, les procédures, les états, lesrequêtes entre des projets WINDEV, WEBDEV et WINDEVMobile.

L’import permetégalement de

créer facilementune «charte gra-phique» compa-

tible avec un sitestatique exis-

tant, pourconserver l’har-

monie du site.

HTML

WINDEV WEBDEV

WEBDEV

IMPORT/EXPORT D’APPLICATIONS WINDEV

46 • WEBDEV 20 : Développez 10 fois plus vite www.pcsoft.fr • 47

L’ouverture àtous les stan-dards

WEBDEV®PHP SANS CONNAÎTREPHP !Toute la puissance de WEBDEV (éditeurWYSIWYG, éditeur d’analyses, UML,éditeur de requêtes, champs évolués,WLangage …) est disponible pourcréer des sites en PHP. Si vous le dési-rez, les pages et le code (en WLangage)sont transformés automatiquement encode PHP (il est également possible desaisir directement du code PHP).Sans connaître PHP, vous créez facile-ment des sites dynamiques PHP !

RAD PHPLa méthode RAD WEB est égalementdisponible pour générer des sites PHPen quelques clics. Générez automatiquement vos sites àpartir de l’analyse des données.

SAISIE DIRECTE DE CODEPHPSous l’éditeur de code de WEBDEV, ilest possible d’écrire (ou coller) du codePHP.

Ici, dans le traitement decouleur rouge, du code PHP.

Vous n’êtes jamais bloqué.Dans une même page, il est possible demixer du code PHP et du codeWLangage.

DES CHAMPS ÉVOLUÉSEN STANDARDEn plus des champs classiques (champde saisie, libellé,...) la plupart deschamps sophistiqués de WEBDEV 20sont disponibles en PHP: table avecascenseurs automatiques, zone répé-tée, calendrier, onglet, champ de saisieriche, libellé HTML, réglette automa-tique…Cela permet de simplifier énormémentles phases de codage, et apporte unegrande sécurité à vos sites par la pré-

sence de masques de saisie qui ne per-mettent pas la saisie de données horsformat.

WEB 2.0: AJAX EN PHPDe nombreux champs et traitementssont compatibles «AJAX» en modePHP: vous créez des sites PHP Web 2.0grâce à WEBDEV 20! (voir page 36)

TYPES ÉVOLUÉS En plus des types classiques de PHP,WEBDEV 20 permet de programmer àl’aide de types évolués. La programmation est ainsi plus facile,et plus sûre. Les types évolués sont: date, heure,durée, source de données, tableauassociatif, structures, numérique...Les syntaxes et les opérateurs puissantssont également disponibles: POURTOUT, manipulation des chaînes,concaténation optionnelle, opérateur«commence par»,...

PARTAGE DU CODELe codage en WLangage permet departager du code unique entre despages et des sites PHP, WEBDEV clas-sique, et même avec des applicationsWINDEV !Cela permet un gain de temps appré-ciable, et une fiabilité accrue par laréutilisabilité.

GESTION FACILE ETAUTOMATIQUE DES SESSIONS PHPLa gestion des sessions (contextes)PHP est automatique. Il suffit de décla-rer les variables qui doivent être retrou-vées dans une prochaine exécution dela page. Il n’y a aucun traitement de sérialisationà coder.

COMPATIBILITÉ PHP 5 &PHP 4WEBDEV 20 génère du code PHP com-patible à la fois avec PHP 4 et avec PHP5.

ACCÈS A HFSQLL’accès à HFSQL (Classic, Réseau etClient/Serveur) est assuré via les ordresSQL.

ACCÈS A MYSQL, POST-GRESQL, ORACLEL’accès aux bases de données MySQL,PostgreSQL et Oracle est assuré.Notez que toutes les bases qui propo-sent un pilote ODBC sont accessibles.

ACCÈS A L’AS/400 (IBM I)L’accès à l’AS/400 est effectué en natif(module à acquérir séparément).

APPEL DE SCRIPTS PHPIl est possible d’appeler un scriptexterne .php depuis une page PHP ouWEBDEV classique, grâce à la com-mande PHPExécute. Il est possibled’utiliser soit une méthode POST, soitune méthode GET, le résultat est ren-voyé dans une chaîne.

WAMP & LAMPAcronymes souvent utilisés, les tech-nologies basées sur 4 composants,WAMP (Windows, Apache, MySQL,PHP) et LAMP (Linux, Apache, MySQL,PHP) sont supportées en standard parWEBDEV 20.

EASYPHP: CONFIGURA-TION ET PARAMÉTRAGEAUTOMATIQUE DEWEBDEVLors de l’installation du serveur d’ap-plication WEBDEV 20, les serveursWeb «Apache» (utilisés en particulierpar EasyPHP) sont détectés et automa-tiquement paramétrés, comme les ser-veurs Apache isolés.

ACCÈS AUX HÉBERGEURSGRATUITSLa génération d’un site en PHP permet(parmi d’autres solutions) l’accès auxhébergeurs «gratuits» de sites dyna-miques. Cette possibilité peut êtreutile aux sites d’associations et depetites structures qui ne désirent pasun hébergement dédié.

Avec WEBDEV 20, PHP c’est facile !

GÉNÉREZ DU CODE PHP

Page 25: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

48 • WEBDEV 20 : Développez 10 fois plus vite

WEBDEV AUSERVICE DESAP

SAP R/3 est un ERP trèsutilisé. Un site réalisé enWEBDEV 20 peut accéderaux données d’un ERP SAPen natif (via BAPI). L’accèsaux données est directe-ment réalisé par SAP, la tra-çabilité des accès est main-tenue, la gestion des priori-tés également.

Une famille de fonctions permetd’établir une connexion (avecauthentification) et d’appeler desBAPI en passant des paramètres.

Un assistant permet d’importerautomatiquement les structuresmanipulées.Il est inutile d’installer le moduleSAP GUI.Toutes les fonctionnalités de WEBDEVsont disponibles.

DES REQUÊTES SUR SAPLe générateur d’états (voir p 43) peutêtre utilisé pour créer des requêtes surdes données contenues dans une baseSAP.

ACCÈS NATIF À LOTUSNOTES

Les sites WEBDEV peuventaccéder en natif à LotusNotes. L’accès aux mailsprésents sur le serveur demails de Lotus Notes(Domino), en envoi etréception, est standard enmode natif. L’accès auxcontacts, aux rendez-vous,aux tâches et aux docu-ments présents sur le ser-veur est facile. Cela per-met de réaliser des Intranetqui s’intègrent totalement

au S.I. en place.La sécurité habituelle de LotusNotes est bien entendu respectée,via le certificat de Lotus.

ACCÈS NATIF À OUTLOOKLes sites WEBDEV peuvent accéder ennatif à Outlook. L’accès aux mails deOutlook, en envoi et réception, eststandard. L’accès aux contacts, aux rendez-vous et aux tâches est facile, en lec-ture et en écriture. Cela permet de réaliser des Intranet

qui s’intègrent totalement au S.I. enplace.

ACCÈS NATIF À GOOGLEAPPSIndépendamment des possibilités deconnexion aux applications Google àtravers le Mashup, WEBDEV 20 pro-pose un accès natif aux données desapplications Google: Google Agenda,Google Maps, Google Contacts,Picasa...Cela permet de récupérer des donnéesqui seront réaffichées dans un format

personnalisé sur le site.

Voici un exemple de code qui liste lescontacts de Gmail et les affiche dansune table WEBDEV.

ACCÈS NATIFS: GOOGLE APPS, SAP, LOTUS NOTES...

Exemple d’accès natif à Google Agenda,pour ensuite être utilisé directement dans une page WEBDEV 20

Connexion est une gglConnexionConnexion.Email=”[email protected]”Connexion.MotDePasse=”motdepasse”GglConnecte(Connexion)Contacts est un tableau de gglContactContacts=GglListeContact(Connexion)TableAffiche(TABLE_Contacts)

www.pcsoft.fr • 49

SaaS (acronyme de Software As AService) est un modèle de livraison desolution informatique.Les clients ne payent pas pour possé-der le logiciel en lui-même mais pourl’utiliser. Les données sont stockées sur les ser-veurs du fournisseur de l’application, etnon plus en local dans la société.

SAAS FACILELa version 20 de WEBDEV fournit lesoutils nécessaires à la mise en lignefacile de solutions SaaS: commerciali-sez vos sites en SaaS grâce aux outilsfournis.L’administrateur SaaS permet dedécrire les autorisations d’utilisation. La gestion des comptes clients permetde définir les règles d’utilisation du site:authentification, nombre deconnexions autorisé, plage deconnexions,...Cette gestion s’effectue directementdepuis l’interface de l’administrateur,ou via des fonctions WLangage.A l’utilisation, le site vérifie l’autorisa-tion de connexion et les droits de l’uti-lisateur via un jeu de fonctionsWLangage.

ADMINISTRATEUR SAASLe logiciel administrateur peut fonc-tionner avec ou sans interventionhumaine. Il permet de créer descomptes sociétés, des comptes utilisa-teurs en fonction d’un paramétrage ini-tial, sans intervention humaine.L’interface est proposée en mode Web.

API D’ADMINISTRATIONSAASLes fonctions WLangage disponiblespour gérer les comptes sont (liste nonexhaustive):• création et suppression de comptes • modification de comptes: ajout d’uti-

lisateurs, de plages d’utilisation, denombre d’utilisateurs,...

• initialisation d’une base de donnéespar clonage d’une base de référence

• définition de la connexion à la basede données...

API AUTHENTIFICATIONSAASParmi les éléments à gérer dans un siteproposé en SaaS, vous trouverez:• Connexion et déconnexion• Identifiant de société • Mot de passe société

• Identifiant d’utilisateur • Mot de passe utilisateur• Vérification d’adresse IP• Nombre de connexions maximal• Durée de connexion maximale• Plage autorisée de connexion, etc...

GESTION PERSONNALI-SÉE DE VOTRE TARIFICA-TIONLa gestion de la tarification est assuréefacilement par un simple paramétrage.

Le SaaS c’est facile avecWEBDEV 20 !

Le SaaS facile

WEBDEV®

SAAS : LES OUTILS POUR GÉRER L’ACCÈSSAAS DE VOS SITES

Page 26: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

Une fois un site terminé, il faut le déployer surun serveur.WEBDEV 20 est livré avec un puissant outil dedéploiement et d’installation.

LIVRÉ EN STANDARDComme les autres modules, ce module de création d’instal-lation est livré en standard avec WEBDEV.Le déploiement des sites créés avec WEBDEV peut s’effectuerà distance (FTP, HTTP,...) ou par le fourniture d’un CD, d’unDVD ou d’une clé USB à l’hébergeur.

LE DÉPLOIEMENT À DISTANCE ESTTOTALEMENT ASSISTÉPour déployer un site, il suffit de répondre à quelques ques-tions simples.Le déploiement peut s’effectuer de manière totalement sécu-risée en utilisant les protocoles HTTPS et FTPS.

LE DÉPLOIEMENT À DISTANCE DESMISES À JOUR DU SITEUne fois le site installé, celui-ci évoluera. Lors des évolutions,seuls les fichiers modifiés devront être mis à jour, ce qui limiteles volumes à transférer.WEBDEV comparera les fichiers du site réel et ceux du sitedu poste de développement, et pré-sélectionnera les fichiersayant été modifiés. L’assistant sélectionne automatiquement l’opération appro-priée pour chacun des fichiers : copie, mise à jour, suppres-sion,…Il est bien sûr possible de définir manuellement les fichiers àinstaller.

LES MISES À JOUR DIFFÉRÉES: LANUIT...Il est souvent intéressant d’effectuer les mises à jour de sitesdans les périodes de moindre affluence, comme la nuit. WEBDEV propose une programmation de la mise à jour à unedate et une heure donnée. Les fichiers à mettre à jour sont transférés sur le serveurimmédiatement, mais leur mise à jour effective ne s’effec-tuera qu’à l’heure et à la date que vous aurez indiquées.

DÉPLOIEMENT PAR MEDIA-PHYSIQUEIl est parfois utile de fournir le site sous forme d’un CD, d’unDVD ou d’une clé USB.Ce cas de figure peut également servir si le serveur d’héber-gement n’est pas accessible par le protocole FTP (ou FTPS)pour des raisons de sécurité.WEBDEV 20 permet de créer un «package d’installation»complet du site pour répondre à ce cas de figure.Notez que ce «package d’installation» peut être fourni partéléchargement.Quand l’hébergeur reçoit le CD ou la clé USB, il déploie lesite sur son serveur.Il est possible de déployer le «serveur d’application WEBDEV»avec le site lui-même. Cela permet la diffusion de version dedémonstration.

DATE DE PÉREMPTION DE PAGELors de la création d’une page, il est possible d’indiquer unedate de péremption pour cette page.Par exemple, si une page concerne un événement particulier(un salon professionnel, une promotion, ...), il faut enlevercette page à une date donnée !Pour ne pas oublier de le faire, WEBDEV 20 préviendra ledéveloppeur lors de l’ouverture du projet, et/ou enverra uneMail à une adresse donnée, avec un message paramétrable.Les risques d’oubli sont ainsi limités.

DÉPLOIEMENT D’UN MÊME SITE SURPLUSIEURS SERVEURSUn site qui a une grande affluence peut avoir besoin d’êtredéployé sur plusieurs serveurs en parallèle.C’est le principe du load balancing.

50 • WEBDEV 20 : Développez 10 fois plus vite

Administrezfacilement à

distance

WEBDEV®

DÉPLOIEMENT FACILE DE VOS SITES

www.pcsoft.fr • 51

La méthode laplus simple et laplus intuitive

WEBDEV 20 permet en une seule opération de déployer oude mettre à jour un site sur plusieurs serveurs d’hébergement.

DÉPLOIEMENT MULTIPLE D’UN MÊMESITE SUR LE MÊME SERVEURWEBDEV 20 permet de déployer facilement plusieurs exem-plaires d’un même site sur un même serveur, à partir d’unseul projet.Cela permet par exemple à un prestataire de proposer plu-sieurs exemplaires d’un même site à différents clients.Une copie de chaque site (un site par client) sera hébergéesur le même serveur.Il suffit pour cela d’indiquer les noms des sites au momentdu déploiement, les paramètres de chaque site (time out,nombre de connexions, …) sont indépendants.Il est de plus possible de gérer l’ensemble des sites ainsi pro-posés grâce au module SAAS livré en standard dansWEBDEV (voir SAAS p 49).

L’ARCHIVAGECette fonctionnalité effectue la sauvegarde de tous les élé-ments du site avant d’effectuer une mise à jour de site.Il est ainsi possible de conserver différentes versions d’un site.

TESTS: MONTÉE EN CHARGE, DE NON-RÉGRESSION...La qualité de votre site passe par un jeu de tests approprié.WEBDEV 20 est livré en standard avec un outil de test quivous permettra de vérifier que le paramétrage de votre ser-veur permet le nombre maximum de connexions simultanéessouhaité, ou encore d’exécuter des scénarios d’actions, pourvérifier l’absence de régressions par exemple.

DÉPLOIEMENT DANS LE CLOUD EN UNCLICDéployer un site dans le CLOUD est simple.Il suffit d’indiquer l’identifiant du compte PCSCLOUD et lemot de passe dans l’assistant de déploiement, de sélection-ner la plateforme sur laquelle déployer le site, et le tour estjoué!

Déployer et administrer un site: facile avecWEBDEV 20 !

Administrateur duServeur d’ApplicationWEBDEV.

Administrateur duServeur HFSQL

Gestion des comptesWEBDEV

Centre de Contrôled’hébergement

Installation parmedia physique

Déploiement du sitedepuis le poste de

développement

Administrateur distantdu serveur d’Application

WEBDEV

Administrateur distant duserveur HFSQL

Robot de surveillance(Watchdog)

Tests de montée en charge

LES OUTILSD’ADMINISTRATION LIVRÉS

Page 27: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

WEBDEV 20 permetd’héberger les siteschez un hébergeur,dans le cloud, ou eninterne.

SÉLECTIONNERUN HÉBERGEURWEBDEV POURUN SITEDYNAMIQUE

Le site PC SOFT pro-pose une liste fournied’hébergeurs (dans plu-sieurs pays) maîtrisantl’hébergement de sitesdynamiques WEBDEV.Vous pouvez égale-ment contacter votrehébergeur habituel.

HERBERGEZ(GRATUITE-MENT) ETTESTEZ VOSSITES ENRÉEL EN 1CLICPC SOFT vous pro-

pose d’héberger vos sites en test.

L’installation s’effectue facilement, en1 clic depuis l’environnement.

SERVEUR DÉDIÉL’hébergement dédié est réalisé sur unemachine que vous «louez» chez unhébergeur.Vous avez la charge de l’administrationdu système de cette machine et vousêtes le seul à en faire usage, elle estréservée à votre société.Vous êtes seul à pouvoir installer dessites sur cette machine. Vous pourrezadministrer vos sites à distance à l’aidedes outils fournis par WEBDEV.

SERVEUR MUTUALISÉL’hébergement mutualisé consiste àhéberger votre site sur une machinepartagée avec d’autres sociétés, quipourront y déployer leurs propres sites.Les ressources de la machine sont doncmutualisées.Avec une machine mutualisée, vousn’êtes pas administrateur du système,vous pouvez uniquement déployer vossites. Les performances dépendentégalement de l’activité des autres sites,mais le coût d’hébergement est moinsélevé que pour un serveur dédié.

.

CLOUDLe Cloud pour applications PC SOFT(www.pcscloud.net) met à votre dis-position des plateformes d’exploitationpréconfigurées et optimisées pour vosapplications WEBDEV, WINDEV, ouWINDEV Mobile.Ces plateformes d’exploitation vousdonnent la possibilité d’héberger vossites WEBDEV ou vos WebservicesWEBDEV.Elles vous permettent également departager vos bases de données HFSQLpartout dans le monde, depuis despoints fixes ou des terminaux mobiles,avec possibilité de répliquer vos don-nées depuis un serveur propriétaire.

PLATEFORME CLOUDUne plateforme PCSCloud est un ser-veur virtuel.Ce serveur vous est totalement dédié,vous êtes le seul à pouvoir déployer dessites sur ce serveur. Vous pouvez régler à tout moment ettrès finement la puissance nécessaire àvotre plateforme (CPU, RAM,disque,...) et ainsi réduire le coût austrict nécessaire. Vous êtes déchargé de l’administrationsystème des serveurs, vous pouvezvous concentrer sur votre coeur demétier.

AVANTAGES CLOUD Le Cloud permet de s’affranchir descontraintes matérielles, et permet degérer facilement les besoins d’évolu-tions des ressources.Il est facile de déployer un site dans lecloud PCSCloud.net: il suffit d’un clicdans l’environnement !PCSCloud vous propose égalementd’héberger vos Webservices, vos basesde données HFSQL...

52 • WEBDEV 20 : Développez 10 fois plus vite

HÉBERGEMENT CHEZ UN HÉBERGEUR

HÉBERGEMENT FACILE DE VOS SITES DANS LE CLOUD

SITE INTRANET En règle générale, le site sera installéet géré sur un serveur interne à l’en-treprise. Tous les postes reliés au ser-veur auront accès au site.

SITE INTERNET/EXTRANETEn règle générale, le site Internet ouExtranet sera installé chez un «héber-geur», distinct de la société utilisa-trice.

HÉBERGEMENTIl existe 4 types d’hébergement: • Serveur interne• Serveur dédié• Serveur mutualisé• Plateforme Cloud

SITESIl existe 3 types principaux de sites:• Site statique• Site Intranet• Site Internet/Extranet

www.pcsoft.fr • 53

Déployez etadministrezfacilement vossites.

WEBDEV®

HÉBERGEMENT INTERNE

WEBDEV 20 permet d’hébergeren interne les sites réalisésavec WEBDEV, directementdans votre société.

LE SERVEUR D’APPLICATIONWEBDEVLe serveur d’application WEBDEV per-met de faire fonctionner les sites dyna-miques.Il est installé sur la machine d’héberge-ment.Le Serveur d’Application WEBDEV fonc-tionne sous Windows et Linux. L’installation du Serveur d’ApplicationWEBDEV reconnaît automatiquement leserveur Web installé.Chaque serveur Web doit être confi-guré. La configuration des serveurs WebIIS ou Apache est réalisée automati-quent lors de l’installation du serveurd’application.

VERSIONS DE WINDOWSSUPPORTÉESQuasiment toutes les versions deWindows «serveur» sont supportées:Windows 2012, 2008, 2010,… 32 et 64bits. Les versions «non serveur» de Windows(Windows 10, 8, 7, Vista …) sont éga-lement supportées.

DISTRIBUTIONS LINUXSUPPORTÉESLes distributions Linux évoluent souvent.Certaines évolutions sont mineures,d’autres majeures. La version 20 deWEBDEV supporte à la fois certaines dis-

tributions d’ancienne technologie, etcelles de nouvelle technologie.A la date d’impression de ce document,les nouvelles distributions suivantes ontété testées: Debian 7, OpenSuse 12,Ubuntu 12, Mandriva...Le fonctionnement avec les distributionssupérieures est assuré si ces distributionssont compatibles. N’hésitez pas à inter-roger PC SOFT pour connaître les der-nières évolutions.

POUR LES HÉBERGEURS:INSTALLATION SILEN-CIEUSEUtile aux hébergeurs et aux dévelop-peurs qui gèrent leur hébergement, laconfiguration automatique de serveurd’hébergement est possible de manière«silencieuse», c’est-à-dire sans deman-der d’intervention manuelle. L’installation est totalement paramétrée,et il devient possible de monter des ser-veurs en «batch» (créer des instances deserveur d’application WEBDEV demanière automatique).

EASYPHP (WAMP, LAMP) :CONFIGURATION ETPARAMÉTRAGE AUTOMA-TIQUE

Si vous utilisez un package EaysyPHP,lors de l’installation du serveur d’appli-cation WEBDEV 20 (de manière isoléeou avec l’environnement), les serveurs

Web «Apache» (utilisés en particulierpar EasyPHP) sont détectés et automa-tiquement paramétrés, comme les ser-veurs Apache isolés.Il est possible de modifier ce paramé-trage.

CONFIGURATION AUTO-MATIQUE DES SITES VIRTUELS SOUS APACHE Le serveur Web Apache permet l’utilisa-tion de sites virtuels, ce qui permet decloisonner les hébergements.Un compte WEBDEV peut être défini parsite virtuel.Le paramétrage de ces serveurs virtuelsest maintenant réalisé automatique-ment par l’installation d’un site et parl’environnement WEBDEV 20.

HÉBERGEMENTPHPL’hébergement PHP peut être effectuéchez un hébergeur «grand public»(Free,...).Il peut également être effectué eninterne.La machine serveur doit alors être équi-pée d’un moteur PHP (version 4.3.2 ousupérieur) et d’un serveur FTP.Le déploiement des sites s’effectue trèssimplement depuis l’environnementWEBDEV.

HÉBERGEMENTDE SITES PUREMENT STATIQUESUn site statique ne nécessite pas deServeur d’Application WEBDEV pourfonctionner, seul un serveur WEB etun serveur FTP sont nécessaires.Un site statique peut facilement êtrehébergé chez un hébergeur «grandpublic» (Free,...).

RECORD ACTUEL DECONNEXIONS:31.200CONNEXIONSSIMULTANÉESPOUR UN SITEDYNAMIQUEWEBDEV.Base de données HFSQL

Page 28: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

ADMINISTRATION FACILE DE VOS SITES

L’ADMINISTRATION:LOCALE OU DISTANTELe serveur d’application WEBDEV estlivré avec un administrateur accessible àdistance, qui permet de paramétrer leserveur, et de suivre en permanence l’ac-tivité de celui-ci.

De nombreux paramètres peuvent êtrespécifiés: nombre maximum deconnexions autorisées pour le serveur,nombre maximum de connexions pourun site donné, nombre maximum d’ins-tances par internaute,...

Notez que l’administrateur peut égale-ment être installé sous forme de «ser-vice», sans interface sur le Serveur.Un robot de surveillance (fourni) peutêtre activé pour vérifier en permanencele bon fonctionnement du serveur d’ap-plication.

Il est possible d’indiquer des droits parutilisateur.

L’administrateur à distance

ROBOT DE SURVEILLANCEUn robot de surveillance très sophistiquéest livré avec WEBDEV 20. Il peut êtreutilisé pour surveiller la disponibilité desites WEBDEV, de serveurs HTTP, de ser-veurs NMTP, de serveurs SNMP, de ser-veurs de fichiers, de serveurs de mails,de serveurs d’application WEBDEV, deserveurs HFSQL...Le serveur alerte, au choix, par envoi

d’un message email, par messageenvoyé à une application spécifique(messagerie interne,…), sur écran decontrôle (alerte visuelle et/ou sonore),par lancement d’une procédureWLangage, par programme tiers (ceprogramme tiers peut par exempleeffectuer l’envoi d’un message paramé-trable par SMS).Bien entendu, il est possible de choisirune combinaison de ces alertes.Il est possible de paramétrer égalementla fréquence et la répétition des tests àeffectuer.

Il est important de disposerde statistiques précises surles visites des sites.

CONNAÎTRE LA FRÉ-QUENTATION D’UN SITEDans la vie non-Internet, il est assezfacile de se rendre compte d’une acti-vité: courrier reçu, nombre d’appelstéléphoniques, nombre de chalandsdans le magasin, ...Sur Internet, comment savoir combiend’internautes ont consulté le site, lespages qui ont été consultées, les appli-cations qui ont été utilisées, de quelsite vient l’internaute?C’est l’objet des statistiques sur le site.

UN OUTIL TOTALEMENTPARAMÉTRABLE ESTFOURNIWEBDEV est fourni avec un outil com-

plet de statistiques pour les pagesdynamiques. Cet outil est directementutilisable.L’accès aux statistiques peut se faire àtravers Internet.

LES STATISTIQUESParmi les informations fournies :• nombre de pages

vues• nombre de visiteurs

uniques• nombre de visiteurs

par page• site de provenance

des internautes.• pays de provenance• navigateur utilisé• et même pages

ayant posé un pro-blème technique ! Des statistiques utiles !

STATISTIQUES DE FRÉQUENTATION DE VOS SITES

54 • WEBDEV 20 : Développez 10 fois plus vite

WEBDEV 20 etWINDEV 20 sontcompatibles:• projet• analyse• tables• composants• états• code• classes• fenêtres, pages• ...

N°1 ENFRANCE

Les sites WEBDEV 20 serelient facilement aux appli-cations existantes, quel quesoit l’outil utilisé pour lescréer.Mais la compatibilité entreWEBDEV et WINDEV en faitle package idéal pour déve-lopper très vite un «front» etun «back» office perfor-mants !

FRONT ET BACK OFFICELe «Front Office» concerne la partie quiest en contact avec le client: en géné-ral le site Internet interactif. En schématisant, le Front Officeinforme, gère les demandes d’infor-mation et décroche les commandes.Le «Back Office» concerne la gestioninterne de l’entreprise: traitementdes commandes, gestion des stocks,statistiques, ordres de fabrication,... En schématisant, le Back Officetraite les commandes.

POUR DÉMARRER UNEAPPLICATION GLOBALE, LE COUPLEWINDEV 20 & WEBDEV20 EST LA PLATEFORMEIDÉALEPour créer les sites Internet et Intranetgérant des données (le Front Office),PC SOFT propose l’environnement inté-gré WEBDEV 20.Il s’agit du seul environnement intégré(de la modélisation à l’installation, enpassant par la Base de Données et lamaintenance) qui permette de dévelop-per facilement des sites robustes géranten temps réel des données.

Pour tout l’aspect de gestion interne (leBack Office), PC SOFT propose l’envi-ronnement préféré des développeursprofessionnels en France, le N°1 desAGL sous Windows: WINDEV.

Et pour utiliser les applications surmobile, il suffit de les recompiler avecWINDEV Mobile 20.

WINDEV permet de créer en un tempsrecord les applications les plus com-plètes et les plus performantes, que cesoit en local ou en réseau. Vous utili-serez la puissante Base de Donnéesintégrée ou toute base de données dumarché.WINDEV, WINDEV Mobile et WEBDEVsont compatibles; leur environnementde développement est similaire. Ils par-tagent les projets, les objets, le code,les classes, les états, l’analyse...

VOUS AVEZ DÉJÀ UNEXISTANT ?Grâce à son ouverture totale, WEBDEVpermet de se relier à toute applicationet toute base de données existante, via

ODBC, OLE DB ou en accès natif.

Vous atteignez facilementvos objectifs avecWEBDEV 20.

FRONT OFFICE BACK OFFICE

PLUS DE 1000 EXEMPLES EN LIGNEPour tester des sites réalisés en WEBDEV,le plus simple est de se connecter surwww.pcsoft.fr. Dans la rubriqueWEBDEV, une page propose une liste deplus de mille sites réalisés par des utili-sateurs de WEBDEV.

TOUS LES DOMAINES,TOUTES LES LANGUESIl s’agit de sites dans tous les domaines,dans toutes les langues, réalisés enWEBDEV par différents types de sociétés.

LES SITES INTRANETPour des raisons évidentes de confiden-tialité, les sites Intranet et Extranet nepeuvent pas figurer dans cette liste. Des sociétés multinationales ont déve-loppé des Intranet et Extranet straté-giques qui sont diffusés dans leurs cen-taines d’agences et filiales, avec consolidation sur une basecentrale.

TESTEZ PLUS DE 1000 SITESRÉALISÉS EN WEBDEV

www.pcsoft.fr • 55

Page 29: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

100TÉMOIGNAGES

Partagez l’expérience de

sociétés prestigieuses en

demandant ce numéro

spécial de la revue

«01Net» consacré à

WINDEV et WEBDEV.

(140 pages)

• Editeur de pages visuel WYSIWYG• Support de Ajax, XML, Applet Java, Flash,

PHP...• RAD applicatif, pour créer des sites en

répondant simplement à quelques ques-tions

• RAD page, pour créer des pages d’un siteen quelques clics

• Génération PHP • Import de page HTML, Import de fenêtre et

d’application WinDev• Editeur de code, gérant le L5G, et permet-

tant la saisie directe de code Javascript,HTML et PHP

• Modélisation (UML, Merise), pour décrireles tables de données, les traitements, lesrelations...

• Gestionnaire de règles métier• Centres de Contrôle• Tableau de bord• Générateur de dossier d’analyse et de pro-

grammation• Base de Données multi-accès, librement dis-

tribuable• Accès à toutes les bases de données du

marché via ODBC ou OLE DB• Accès à MySQL, SQLite, PostgreSQL,

Oracle*, SQL Server*, AS/400*, Informix*,DB2*, Sybase*, Progress*, MariaDB et MS-Access en mode natif

• Langage L5G, générant automatiquementle code HTML et Javascript

• Gestionnaire de Sources, Profiler• Editeur d’états avec PDF et codes-barres• Générateur de procédure d’installation et

administration locale et à distance• Sites prêts à l’emploi• Moteur de test interactif, pour tester en

direct les sites créés, avec des données• Centre de tests unitaires et de montée en

charge • Jeu de manuels complets, en français (tout

est en français)• Hot Line gratuite...

L M M J V Une formation rapide !

DÉCISION INFORMATIQUEIl n’existe pas à notre connaissancede solution directement concur-rente

NETSURFL’intégré du développement WEB

01 INFORMATIQUEUn générateur de sites WEB avecSGBD intégré

PROGRAMMEZWEBDEV, nous l’avons essayé,beaucoup l’adopteront

LOGICIELS ET SYSTÈMESWEBDEV, un AGL dédié aux appli-cations Internet et Intranet

.NET PROWEBDEV de PC SOFT reprend tousles atouts de WINDEV

LE MONDE INFORMATIQUEPC SOFT a repris les principes debase de son célèbre Atelier deGénie Logiciel et les a transposésdans WEBDEV

LANGAGES ET SYSTÈMESL’environnement mérite vraimentqu’on s’y arrête

WINDOWS NEWSLes exemples et applications four-nis par l’éditeur permettent uneprise en main rapide du logicielWEBDEV.

L’avis de la presse spécialisée

56 • WEBDEV 20 : Développez 10 fois plus vite

3 manuels en français sont livrés: coursd’auto-formation pour découvrir le pro-duit, manuel des concepts pour maîtriserle produit, manuel de l’éditeur d’états etde l’éditeur de requêtes.Une aide en ligne complète est égalementdisponible sur Internet.

La formation à WEBDEV demande engénéral une semaine à un développeurgénéraliste. Un développeur connaissant déjà WINDEVest opérationnel en 2 jours.PC SOFT organise également des sémi-naires de formation.

WEBDEV EST LIVRÉ AVEC UNE DOCUMENTATION COMPLÈTE.

WEBDEV® 20

EXTRAIT DU SOMMAIRE

10 CHATEAU MARGAUX14 PHILIPS 16 VINCI AUTOROUTES18 QUICK14 LYONNAISE DES EAUX22 SYSTEME U29 FEDERATION FRAN-

ÇAISE DE BASKET32 BOLORRÉ34 CASIO40 TAITTINGER62 SIEMENS VAI68 TRUFFAUT71 AIR CALÉDONIE78 HONDA EUROPE82 PRONUPTIA98 HOPITAUX DE PARIS

102 SOCIÉTÉ GÉNÉRALE121 PHOTOMATON128 GROUPAMA 129 CPAM134 REEF...

TOUT EST LIVRÉ EN STANDARD

WEBDEV 20 EST COMPOSÉ DES MODULES SUIVANTS, TOUS LIVRÉS EN STANDARD

PC SOFT est à votre service.Avec une présence depuisplus de 25 ans, PC SOFT dis-pose d’une expérience sansprécédent dans le monde dudéveloppement profession-nel.

AU SERVICE DES DÉVE-LOPPEURS DEPUIS PLUSDE 25 ANSDepuis 1984, PC SOFT crée des outilsde développement.

Plusieurs millions d'applications déve-loppées avec des outils PC SOFT sonten service dans le monde, dans tous lesdomaines d'activité (n’hésitez pas àdemander le magazine de 100 témoi-gnages).

SE FORMER RAPIDEMENTÀ WEBDEVDe nombreux moyens, simples, effi-caces, accessibles, sont à votre dispo-sition pour vous former rapidement àWEBDEV:• Cours d'auto-formation (500 pages,livré en standard)

• Séminaires de formation PC SOFT• Mise à disposition de consultants• Assistance Directe®

LE SUPPORT TECHNIQUE(HOT LINE): GRATUITLes outils de développement, plus quetous les autres types de logiciels, néces-sitent la disponibilité d'un supporttechnique (hot line) qualifié et person-nalisé.Un simple mail ou un coup de fil peu-vent faire économiser des heures oudes jours entiers !Nous avons tellement confiance en nosoutils que nous vous offrons 15requêtes gratuites5 (téléphone ouemail) au Support technique.

La plupart des «hot lines» de nosconcurrents coûtent plus cher que lesimple prix d’achat de WEBDEV.

POUR VOS SITES STRATÉ-GIQUES: «ASSISTANCEDIRECTE®»Si vous désirez un niveau de supportavancé, PC SOFT propose un serviced'assistance téléphonique spécifique,appelé «Assistance Directe».Ce service privilégié permet de dispo-ser d'un interlocuteur unique, sur unstandard téléphonique différent de laHot Line gratuite. Ce service, complé-

mentaire du Support Technique gratuit,répond à vos questions, effectue destâches d’audit, de test de vos applica-tions, d’écriture de routines, d’aide à laconfiguration...

Votre interlocuteur connaît parfaitementvos développements, et peut ainsi vousaiguiller et vous aider plus efficacement.

UN MAGAZINE TECH-NIQUE (AVEC DVD),TOUT EN FRANÇAIS SURWEBDEVTous les 3 mois paraît un magazinetechnique en français, en couleurs, quicontient articles de fond, trucs etastuces, exemples de programmes aveccode source sur le DVD d'accompa-gnement, de nouveaux assistants etsurtout des mises à jour intermédiairescomplètes de WEBDEV.

Pour un faible coût d'abonnement, laLST est le meilleur moyen de rester àl'écoute de WEBDEV.

LA FORMATIONPC SOFT organise chaque semaine àParis, des séminaires de formation àWEBDEV, de différents niveaux.Ces séminaires permettent de décou-vrir et de maîtriser WEBDEV selon unplan efficace. Ils sont assurés par des

i n g é n i e u r sP C S O F T ,connaissant par-faitement leproduit.

Ces séminairespeuvent égale-ment être orga-nisés dans voslocaux, en France et à l’étran-ger.

UN CONSULTANTPC SOFT DANS VOSLOCAUX

PC SOFT peut mettre à votredisposition dans vos locauxun ingénieur expérimentéPC SOFT possédant les com-pétences de votre domaine,pour une durée de 1 à 5jours. En votre présence perma-nente, le consultant PC SOFTvous guidera pour exploiterau mieux les fonctionnalitésde WebDev dans votre projet.

Quel que soit le service dont vous avezbesoin, n’hésitez jamais à contacterPCSOFT.Le service «formation» rechercheraavec vous le meilleur moyen de voussatisfaire.

WEBDEV: PRODUIT DEGRANDE DIFFUSIONEn utilisant un outil diffusé à grandeéchelle, vous bénéficiez de l'expé-rience des autres développeurs!

La diffusion à grande échelle permet éga-lement de proposer WEBDEV à un tarifridicule eu égard à ses possibilités.

Et rappelez-vous qu'un développeurgénéraliste est opérationnel en 5 joursen moyenne... et WEBDEV gère le cyclecomplet de développement.

Pour tous vos développe-ments Internet et Intranet,PC SOFT est présent pourvous assurer le servicepersonnalisé de qualité quevous attendez.Avec WEBDEV 20 vousréussirez vos projets.

Malg

ré le

soin

appo

rté à

sa réd

actio

n, ce

docu

ment

n’est

pas c

ontra

ctuel.

WEB

DEV

est ré

servé

à un

usag

e prof

ession

nel.

N’hé

sitez

jama

is à c

ontac

ter di

rectem

ent P

C SO

FT po

ur tou

t asp

ect im

porta

nt po

ur vo

us. T

outes

marq

ues d

épos

ées p

ar leu

rspro

priéta

ires r

espec

tifs.

*: op

tion;

5: 1

5 req

uêtes

gratu

ites;

assuré

sur l

a vers

ion en

cours

de co

mmerc

ialisa

tion;

seul l’

appe

l est

à votr

e cha

rge. C

onsu

ltez l

a lice

nce.

PC SOFT À VOTRE SERVICE

www.pcsoft.fr • 57

Page 30: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

Le meilleurmoyen de tirer

profitd’Internet

WEBDEV®

VOUS ÊTES DÉCIDEURVous avez besoin d’une solution qui permette à

vos équipes de DÉVELOPPER PLUS VITE lespuissantes applications Internet et Intranet dont

votre entreprise a besoin: WEBDEV 20 s’impose. WEBDEV 20 vous garantit le respect du bud-

get, des performances et du délai prévu.

VOUS ÊTES DÉVELOPPEURVous savez développer. AvecWEBDEV 20 vous saurez immédia-

tement créer des sites statiques etdynamiques.

WEBDEV 20 permet unedémarche méthodolo-

gique naturelle, quiaboutit à la RÉUSSITE DE

TOUS VOS PROJETS.

VOUS ÊTES SPÉCIALISTEINTERNETWEBDEV 20 apporte la solution à

votre problématique: utilisationconjointe à des sites statiques existants,

aspiration de sites, sites dynamiquesconnectés aux bases de données en

temps réel. Vous pourrez RÉ-UTILISER sans limites

votre existant Web.

LA COMPATIBILITÉ AVECWINDEVWINDEV est l’AGL Windows le plus utilisé

en France. WEBDEV 20 est COMPATIBLEavec WINDEV et WINDEV Mobile.Le mode opératoire des logiciels est identique.

Il est très facile de transformer une applicationWINDEV en un site Internet ou Intranet WEBDEV,

et vice versa.

GESTION DU CYCLE DE VIE DESSITES

WEBDEV 20 est une PLATEFORME DE DÉVE-LOPPEMENT COMPLÈTE, intégralement en fran-çais, qui intègre tous les modules nécessaires audéveloppement.Cela assure le succès de vos projets. WEBDEV 20 est réputé pour sa FACILITÉ DEPRISE EN MAIN.

ACHETEZ WEBDEV 20 AUJOUR-D’HUI !

Chaque jour qui passe, vous-même et vos équipesperdez un temps précieux.WEBDEV 20 vous permet d’être efficace très rapi-dement dans le développement des SITES INTER-ACTIFS PERFORMANTS, aujourd’hui nécessairesà toutes les sociétés.Ne laissez pas vos concurrents vous dépasser, uti-

lisez vous aussi le plus puissant, le plus intégré, leplus facile des environnements de développementprofessionnels de sites Internet et Intranet efficaces.

WEBDEV 20 est un environnement trèscomplet, très puissant, mais très facile d’uti-lisation.Le «Retour Sur Investissement» (ROI) esttrès rapide: vous réaliserez vite des écono-mies importantes grâce à WEBDEV 20.

PASSEZ À L’ACTION:COMMANDEZ VOTRE

WEBDEV 20 DÈS AUJOURD’HUI

Développez 10 fois plus viteVous aussi...

58 • WEBDEV 20 : Développez 10 fois plus vite

WEBDEV® 20

NE LAISSEZ PAS LA RÉVOLUTIONINTERNET SE FAIRE SANS VOUS

PHPSaaSCloudLinux

Wamp, LampHTML5

Mobiles...

Voici des exemples de sites etd’applications que vous pourrezcréer facilement avec WEBDEV(cette liste n’est pas exhaus-tive).Certains sites sont des Intranet,d’autres des Extranet, d’autresdes sites Internet.

• Site de commerce électroniqueavec paiement sécurisé

• Télépaiement de factures parInternet

• Gestion des commandes de vosclients connus

• Prise de commande générale• Consultation par vos clients de

l’état d’avancement de leur com-mande (commande reçue, saisie,traitée, correcte, partie à telleheure,...)

• Accès aux stocks réels• Création dynamique d’image en

fonction de paramètres saisis:- essayage virtuel de vêtements - présentation d’une automobile

avec la couleur et les optionschoisies

- personnalisation de T-Shirt enfonction d’une image fournie(uploadée) par le client

• Définition en ligne des optionsd’un progiciel, calcul du prix decession de la licence, et télé-chargement immédiat aprèspaiement

• Réservation de places d’avion oude bateau, en choisissant sonsiège ou sa cabine sur un plan àjour

• Tableau de bord Dirigeant à jouren temps réel avec CA de l’en-treprise, Marge prévisible, Etatdes stocks...

• Planning partagé d’une équipedispersée géographiquement

• Planning de prise de rendez-vousde personnel itinérant

• Planning d’intervention d’uneéquipe de maintenance

• Pour une société de VPC, mise enligne de la documentation tech-nique de toutes les notices desproduits commercialisés

• Moteur de recherche en langagenaturel d’informations (FAQ,...)dans une base de données texte

• Scan et archivage de tous lesdocuments comptables reçus(factures, BL,...) dans le but depouvoir les visualiser à toutmoment, même des annéesaprès (archives)

• Prise d’inscription à un événe-ment: présentation, repas, sor-tie,...

• Gestion d’un annuaire partagé:salariés de l’entreprise, étu-diants d’une école,anciens étudiants,membres d’un club,...

• Petites annoncesimmobilières, voi-

tures, enchères ...• Gestion de parc matériel• Site de rencontre• Gestion d’un wiki• Portail BtoB• Forum de discussion• Flux RSS• Suivi de livraison de colis• Gestion de mailing-Liste• Gestion des points «bonus» liés

à une carte de fidélité: rappel dunombre de points, échéance,affichage automatique desprimes accordables, gestion dela demande des primes,...

• GED• Suivi à distance de l’état d’une

chaîne de robotisation et de pro-duction

• Portail Intranet d’entreprise

Et tout autre site dont vousavez l’idée !

WEBDEV 20 :DÉVELOPPEZTOUS LES TYPESDE SITES.

Découvrez plus de 1000 exemples de sites WEBDEVsur www.pcsoft.fr

Développez tous les types de sites

Page 31: Webdev - Desenvolvimento de sites, webservices, intranets e extranets

Fournisseur Officiel de laPréparation Olympique

®

www.pcsoft.fr

WEBDEV®

PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT

INTERNET, INTRANET, SAAS

Siège Montpellier : 3 Rue de Puech Villa BP 444 08 34197 MONTPELLIER, France Tél: 04.67.032.032 Fax: 04.67.03.07.87 Agence Paris : 142 Avenue des Champs Elysées 75008 PARIS, France Tél: 01.48.01.48.88PC SOFT Informatique - SAS au capital de 2 297 548 Euros

SIRET 330 318 270 00064 - Code APE 5829B - Numéro de TVA Européen: FR09 330 318 270