Tuto - A la découverte de WEBDEV

Comment ça marche ?

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

• Des événements effectués au niveau du navigateur, sur le poste de l'internaute.
• Des événements effectués au niveau du serveur.

Et dans WEBDEV ?

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

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.

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

Cette page contient des champs de saisie et un champ Bouton "Valider" en bas de la page.

• Vérifier que tous les champs obligatoires sont bien renseignés.
• Enregistrer les valeurs des champs dans la base de données.

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

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

SI SAI_Référence ~= "" ALORS
	Erreur("Vous devez saisir une référence.")
	DonneFocusEtRetourUtilisateur(SAI_Référence)
FIN

PageVersFichier()
SI CheminImage<>"" ALORS
	Produit.Visuel = fChargeBuffer(CheminImage)
FIN
SI Produit..NouvelEnregistrement ALORS
	Produit.Ajoute()
SINON
	Produit.Modifie()
FIN
PAGE_Liste_des_produits.Affiche()

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