PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Nouveauté WEBDEV 24 !
  • Ce que vous allez apprendre dans cette leçon
  • Principe Navigateur/Serveur
  • Comment ça marche ?
  • Et dans WEBDEV ?
  • Exemple pratique
  • Intranet/Extranet/Internet
  • Principe
  • Et dans WEBDEV ? (Session/AWP, PHP, Statique)
  • Exemple pratique
  • La méthode pour créer un site
Leçon 1.2. Le développement Web et WEBDEV
Ce que vous allez apprendre dans cette leçon
  • Principe Navigateur / Serveur.
  • Intranet / Extranet / Internet.

Durée estimée : 30 mn
Leçon précédenteSommaireLeçon suivante
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 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 traitements, il y a donc deux types de traitements :
  • Des traitements effectués au niveau du navigateur, sur le poste de l'internaute.
  • Des traitements 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.
Le code serveur est exécuté en WLangage.
Le code navigateur est converti en Javascript.
Pour créer un site avec WEBDEV, un seul langage est à connaître : le WLangage.
Cependant, deux types de code sont disponibles : 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, ... Certaines opérations simples peuvent être réalisées directement sur le navigateur, sans retourner au serveur.

Exemple pratique

  • Pour mieux comprendre la différenciation entre les traitements serveur et les traitements navigateur, nous vous avons préparé un exemple simple :
    1. Lancez WEBDEV 24 (si ce n'est déjà fait). Si nécessaire, affichez la page d'accueil de WEBDEV : utilisez la combinaison de touches Ctrl + <.
    2. Ouvrez le projet "Concepts WEBDEV". Pour cela, dans la page d'accueil, cliquez sur "Cours d'auto-formation" et sélectionnez le premier projet "Concepts WEBDEV (Exercice)".

      Note

      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 WD240Admin.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.
  • Ouvrez la page "PAGE_Inscription" sous l'éditeur : double-cliquez sur son nom dans l'explorateur de projet.

    Note

    L'explorateur de projet permet d'afficher dans l'environnement la liste de tous les éléments présents dans le projet. Ces éléments sont regroupés par thème : Pages, Procédures, ...
    Pour afficher l'explorateur de projet :
    1. Sous le volet "Accueil", dans le groupe "Environnement", déroulez "Volets".
    2. Dans la liste des volets qui s'affiche, sélectionnez "Explorateur de projet".
Page sous l'éditeur
  • Cette page contient des champs de saisie et un bouton "S'inscrire". Le bouton "S'inscrire" doit faire deux choses :
    1. Vérifier que tous les champs sont bien renseignés.
    2. Enregistrer les valeurs des champs dans la base de données.
  • Visualisons le code associé au bouton :
    1. Sélectionnez le bouton "S'inscrire".
    2. Affichez le menu contextuel du bouton (clic droit) et sélectionnez l'option "Code".
    3. L'éditeur de code s'affiche avec les différents traitements liés au champ Bouton. Pour visualiser tous les traitements associés au bouton, utilisez la touche Pg Prec de votre clavier.
      Traitements associés au bouton

Note

L'éditeur de code vous permet d'écrire le code de vos traitements.
Sur chaque champ, l'éditeur de code vous présente les événements associés, c'est-à-dire les événements sur lesquels un traitement spécifique peut être déclenché.
Remarque : Les traitements sont affichés dans l'ordre dans lequel ils seront exécutés.
Par exemple sur le champ Bouton, les traitements associés sont :
  • Initialisation.
  • Clic navigateur.
  • Clic serveur.
  • Observons le code affiché : la différenciation entre code serveur et code navigateur 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_Nom ne doit pas être vide. Le code correspondant est le suivant :
// On vérifie que le champ "SAI_Nom" est égal à une chaîne vide
// (aux espaces / ponctuation près)
SI SAI_Nom ~= "" ALORS
// Le champ est vide, on affiche un message d'erreur à
 // l'utilisateur
Erreur("Vous devez saisir votre nom")
// On retourne en saisie dans le champ "SAI_Nom" (sans effectuer
// le reste du code)
RepriseSaisie(SAI_Nom)
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 :
// RAZ de la structure client
HRAZ(Client)

// On récupère les valeurs des champs directement dans
// la structure client
EcranVersFichier()

// On ajoute le client dans la base de données
HAjoute(Client)
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.
  • Fermez la fenêtre de code (utilisez la croix en haut à droite).
  • Fermez la page affichée sous l'éditeur (utilisez la croix en haut à droite).
Intranet/Extranet/Internet

Principe

Un site intranet ou extranet est souvent considéré comme une application de gestion en mode Web, c'est-à-dire une application exécutée dans un navigateur.
Cette application Web peut présenter :
  • des fonctionnalités métiers destinées à des utilisateurs précis,
  • des traitements qui doivent être sécurisés : n'importe qui ne doit pas avoir accès à l'application
L'application Web peut être accessible :
  • uniquement depuis un réseau d'entreprise, auquel cas on parle de site intranet.
  • depuis Internet, auquel cas on parle de site extranet.
Dans les deux cas, l'application Web est sécurisée via une gestion de logins, mots de passe, droits, ...
Un site Internet est un site à destination du "public" (public de particuliers ou de professionnels). Un site Internet doit être trouvé facilement sur le Web. Quelques exemples : site de présentation, site de vente en ligne, ...
Pour amener le plus d'internautes à venir sur le site, il faut que le site soit référençable par les moteurs de recherche. Pour que les moteurs de recherche puissent référencer correctement chaque page, une contrainte supplémentaire apparaît : les pages du site doivent être accessibles directement à n'importe quel moment. Mais cette contrainte est également un gage de simplicité pour l'internaute : il peut copier/coller facilement un lien sur une page, et ainsi, réutiliser le lien à sa convenance.

Et dans WEBDEV ? (Session/AWP, PHP, Statique)

Dans WEBDEV, pour faire un site Intranet ou Extranet, le mode "Session" est le plus approprié grâce notamment aux fonctionnalités suivantes : sécurité intégrée, contextes automatiques. En effet, le mode Session a la particularité d'avoir des sessions automatiques. L'identifiant de la session fait partie intégrante de l'URL. L'adresse des pages dépend donc de cet identifiant qui change à chaque connexion.
Inconvénient : Les moteurs de recherche ne peuvent pas indexer ce site.
Dans WEBDEV, pour faire un site Internet, vous disposez des modes suivants au choix :
  • Le mode AWP (Active WEBDEV Page).
  • Le mode de génération PHP.
  • Le mode statique si votre site comporte uniquement des pages définies à l'avance (pas de base de données).

Exemple pratique

  • Tout d'abord, nous allons regarder le fonctionnement d'une page Internet :
    1. Dans le projet "Concepts_WEBDEV" (que nous avons ouvert au début de cette leçon), ouvrez la page "PAGE_Internet" sous l'éditeur : double-cliquez sur son nom dans l'explorateur de projet.

      Astuce

      Pour rechercher rapidement une page dans le projet en cours, utilisez la combinaison de touches Ctrl + E. Une fenêtre s'affiche permettant de réaliser une recherche sur toutes les pages contenant la suite de lettres saisies dans la zone de recherche. Il suffit de sélectionner la page voulue et de valider pour que cette page s'ouvre sous l'éditeur.
    2. Vérifions le type de la page :
      • Sous le volet "Page", dans le groupe "Description", cliquez sur "Description" (il est également possible d'utiliser l'option "Description" du menu contextuel de la page).
      • Dans l'onglet "Général", la page est une page en mode AWP.
        Onglet 'Général' de la page
      • Validez la fenêtre de description de la page.
    3. Lancez le test de cette page : cliquez sur l'icône Go de page parmi les boutons d'accès rapide.
    4. La page apparaît dans votre navigateur par défaut.
    5. Observez l'adresse affichée dans le navigateur : cette page possède une adresse fixe. Si vous copiez cette adresse et si vous la collez dans un nouveau navigateur, la même page s'affichera !
      Adresse fixe
    6. Fermez le navigateur.
  • Maintenant, testons le comportement d'une page Intranet :
    1. Ouvrez la page "Page_Accueil_du_site_intranet" sous l'éditeur : double-cliquez sur son nom dans l'explorateur de projet.
    2. Vérifions le type de la page :
      • Sous le volet "Page", dans le groupe "Description", cliquez sur "Description" (il est également possible d'utiliser l'option "Description" du menu contextuel de la page).
      • Dans l'onglet "Général", la page est une page en mode session, mode utilisé pour les sites Intranet/Extranet.
    3. Lancez le test de cette page : cliquez sur l'icône Go de page parmi les boutons d'accès rapide.
    4. La page apparaît dans le navigateur.
    5. Observez l'adresse affichée dans le navigateur. L'URL est de la forme : http://localhost/Concepts_WEBDEV/CONNECT_MODETEST/<identifiant de la connexion> où <Identifiant de la connexion> est une chaîne qui change à chaque connexion. L'adresse change à chaque connexion ce qui permet d'augmenter la sécurité. Cependant, ce fonctionnement est incompatible avec un site référençable.
      Adresse non fixe
    6. Fermez le navigateur.
La méthode pour créer un site
Maintenant que nous avons vu les principaux concepts du Web, voyons comment concevoir un site WEBDEV.
Pour créer un site avec 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.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 24
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire