DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WEBDEV 2024 !
Aide / Tuto WEBDEV / Tuto - A la découverte de WEBDEV
  • Leçon 2 - Développement Web et WEBDEV
  • Principe Navigateur/Serveur
  • Comment ça marche ?
  • Et dans WEBDEV ?
  • Exemple pratique
  • Méthode pour créer un site
  • En résumé

Tuto - A la découverte de WEBDEV

Leçon 2 - Développement Web et WEBDEV
Ce que vous allez apprendre :
  • Principe Navigateur / Serveur.
  • Méthode pour créer un site.
Durée de la leçon 10 mn
Principe Navigateur/Serveur

Comment ça marche ?

Un site Internet ou intranet fonctionne de la manière suivante :
  • Le client (l'internaute) utilise un navigateur pour accéder au site.
  • Le navigateur effectue une demande auprès du serveur hébergeant le site demandé. Dans cette demande, il indique la page qu'il souhaite afficher et les différents paramètres qui permettent au serveur de construire la page correspondante.
  • Le serveur reçoit cette demande, la traite et renvoie la page "HTML" correspondante. Le HTML (HyperText Markup Language) est le langage utilisé par tous les navigateurs pour afficher les pages Web.
Au niveau des événements, il y a donc deux types d'événements :
  • Des événements effectués au niveau du navigateur, sur le poste de l'internaute.
  • Des événements effectués au niveau du serveur.
Le code exécuté au niveau du navigateur s'appelle le code Javascript. Les navigateurs ne savent exécuter que du code Javascript.

Et dans WEBDEV ?

Avec WEBDEV, tout est développé :
  • en WYSIWYG ("What You See Is What You Get") sous l'éditeur : vos pages sont visuellement identiques en création et en exécution.
  • en WLangage pour le côté programmation.
WEBDEV convertit votre page créée sous l'éditeur en page HTML, lisible par les navigateurs.
Les événements effectués au niveau du serveur sont écrits et exécutés en WLangage.
Les événements effectués au niveau du navigateur sont écrits en WLangage et convertis en Javascript.
Pour créer un site avec WEBDEV, le seul langage à connaître est donc le WLangage.
Cependant, WEBDEV propose deux types de code : code serveur et code navigateur.
Pourquoi cette distinction entre serveur / navigateur ? Pour des raisons de performances. En effet, entre le navigateur et le serveur, c'est Internet, avec ses délais de réponses, sa latence, etc. Certaines opérations simples peuvent être réalisées directement sur le navigateur, sans retourner au serveur.
Fonctionnement Serveur/Navigateur d'un site WEBDEV
Exemple pratique
Pour mieux comprendre la différenciation entre les événements serveur et les événements navigateur, nous vous avons préparé un exemple simple :
  1. Depuis la page d'accueil de WEBDEV, ouvrez le projet exercice "Site_WEBDEV_Complet" : cliquez sur "Tutoriel" puis dans la zone "Tuto - Découvrez WEBDEV (Leçon 1 et 2)", double-cliquez sur le projet "Site WEBDEV Complet - Corrigé".
    Si le mécanisme de l'UAC est activé sous Windows, une fenêtre spécifique peut apparaître. Cette fenêtre indique que le programme WD290Admin.exe va s'exécuter sur le poste en cours. Accordez l'autorisation d'exécution. Ce programme correspond à l'administrateur local WEBDEV qui permet le test des sites développés avec WEBDEV. Nous verrons ses fonctionnalités plus tard dans ce cours.
  2. Ouvrez la page "PAGE_Fiche_du_produit" sous l'éditeur :
    • Dans le volet "Explorateur de projet", déroulez le dossier "Pages" puis le dossier "Pages_administration".
    • Double-cliquez sur "PAGE_Fiche_du_produit".
  3. La page apparaît sous l'éditeur.
    Page sous l'éditeur
    Cette page correspond à une fiche permettant de créer et de modifier un produit.
A l'aide de la souris, faites défiler la page vers le bas.
Page sous l'éditeur
Cette page contient des champs de saisie et un champ Bouton "Valider" en bas de la page.
Le champ Bouton "Valider" doit faire deux choses :
  • Vérifier que tous les champs obligatoires sont bien renseignés.
  • Enregistrer les valeurs des champs dans la base de données.
Ces actions sont effectuées dans le code du bouton.
Affichons donc le code du bouton "Valider" :
  1. Cliquez sur le champ Bouton "Valider" pour le sélectionner. Des poignées bleues apparaissent autour du champ.
  2. Utilisez la touche F2 : l'éditeur de code apparaît. Les événements WLangage associés au champ Bouton sont affichés, avec le code WLangage associé.
    Evénements associés au champ Bouton
Observons le code WLangage affiché :
  • Les événements associés au champ Bouton sont : Initialisation, Clic navigateur et Clic serveur.
  • La différenciation entre les différents codes s'effectue grâce à un code couleur :
    • En vert, c'est le code navigateur c'est-à-dire le code qui va s'exécuter sur le poste de l'internaute.
    • En jaune, c'est le code serveur, c'est-à-dire le code qui va s'exécuter sur le serveur.
Dans notre exemple, dans le code en vert (code navigateur), toutes les vérifications de saisie sont effectuées. Par exemple, le champ SAI_Référence ne doit pas être vide. Le code correspondant est le suivant :
Clic sur BTN_Valider (onclick navigateur)
SI SAI_Référence ~= "" ALORS
Erreur("Vous devez saisir une référence.")
DonneFocusEtRetourUtilisateur(SAI_Référence)
FIN

Cette vérification est effectuée en code navigateur car il est inutile de retourner au serveur pour vérifier que les champs sont bien renseignés.
Des allers-retours inutiles sont ainsi évités et l'attente de l'internaute est limitée : le site est plus fluide.
Après avoir exécuté le code navigateur, la page envoie les valeurs saisies au serveur. Le serveur exécute alors le code serveur. Dans le code serveur, il est par exemple possible de traiter les informations reçues.
Dans notre exemple, les informations reçues sont ajoutées dans la base de données grâce au code suivant :
Clic sur BTN_Valider (serveur)
PageVersFichier()
SI CheminImage<>"" ALORS
Produit.Visuel = fChargeBuffer(CheminImage)
FIN
SI Produit..NouvelEnregistrement ALORS
Produit.Ajoute()
SINON
Produit.Modifie()
FIN
PAGE_Liste_des_produits.Affiche()

Cette opération ne peut pas être réalisée en code navigateur car la base de données est commune à tous les utilisateurs du site et est donc située sur le serveur.
Avertissement
Nous ne détaillerons pas dans cette leçon le code WLangage utilisé. Cet exemple sera entièrement repris dans le tuto Créer un site WEBDEV (Back Office et Front Office).
Méthode pour créer un site
Maintenant que nous avons vu les principaux concepts du Web, voyons comment concevoir un site WEBDEV.
La méthode à appliquer est la suivante :
  • Création de la maquette du site :
    • Maquette des pages (ergonomie).
    • Définition des styles CSS (si nécessaire).
    • Conception de la structure de la base de données.
  • Développement sous WEBDEV :
    • Création d'un projet, qui regroupe tous les éléments du site.
    • Création des modèles de pages, qui vont définir le "look" du site. Ces modèles sont basés sur la maquette des pages, les styles CSS et les styles WEBDEV.
    • Définition de la base de données (Analyse), qui peut reprendre une structure existante.
Méthode pour créer un site
En résumé
Nous venons de découvrir le principe d'un site Internet. Nous avons ouvert un projet et vu les différents types de code disponibles. Le prochaine tuto vous permettra de créer votre premier site.
Nous avons terminé cette leçon, pensez à fermer le projet en cours :
  1. Sous le volet "Accueil", dans le groupe "Général", déroulez "Fermer" et sélectionnez "Fermer le projet".
  2. Validez la sauvegarde des éléments modifiés si nécessaire.
La page d'accueil de WEBDEV apparaît.
Leçon précédenteSommaire
Version minimum requise
  • Version 2024
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 14/12/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale