Serveur Web

4D v16

Serveur Web

En complément des manipulations expliquées dans la vidéo, il faut noter que :

Vous pouvez utiliser avec le serveur Web de 4D toutes les technologies modernes liées au web.

Pour aller plus loin je vous conseille de vous référer à la documentation, notamment pour toute la partie gestion des sessions, des formulaires, l'intégration de frameworks et ou la pise en compte de tous les éléments nécessaires à un site Web.

Une notion importante que vous devrez mettre en place est la balise 4DINCLUDE qui permet d'envoyer toujours la même page en gérant le contenu à l'aide de cette balise. Vous pouvez aussi si vous maîtriser les outils internet, utiliser la commande Javascript XmlHttpRequest qui permet de rendre votre site pleinement Web 2.0.

Avec du code générique, et des appels de méthodes existantes à partir de la méthode sur connexion web vous gagnerez beaucoup de temps en réutilisant ce que vous avez déjà écrit (méthode de recherche, d'ajout, suppression, contrôle, etc ...)

Video script

Bonjour,

dans cette vidéo nous allons apprendre à paramétrer et mettre en œuvre le serveur Web intégré de 4D.

L'architecture intégrée de 4D présente de nombreux avantages car avec le même outil, avec la même programmation vous pouvez développer en mono-poste, en client/serveur, mais également publier sur le web les données de base sans changer d'outil.

Pour commencer nous allons vérifier le port de publication. Sur windows ce n'est pas utile, sur mac le port 80 est utilisé par défaut par Apache. Nous configurons donc ce port par exemple en 8080 puis démarrons le serveur Web (en production, nous cocherons la case "Lancer le serveur Web au démarrage de la base" afin que ce soit automatique).

La page qui s'affiche sur le navigateur indique que la connexion a bien été effectuée. Nous allons donc vérifier ce qui s'est passé :
Retournons dans les préférences : Nous pouvons noter qu'une page par défaut est indiquée et un répertoire par défaut. 4D a donc cherché (et en fait a créé puisqu'ils n'existaient pas initialement) le répertoire et la page index.

Il nous appartient maintenant de changer le contenu de la page et éventuellement le nom du dossier qui contiendra tout notre site web (pages html, images, javascripts, css, ...).

Pour travailler plus facilement je vous conseille à terme d'organiser vos fichiers selon une architecture semblable à celle-ci :

css
images
index_fr.html
index_en.html
js
pages

dans laquelle vous pourrez regrouper dans des dossiers les différentes types de fichiers correspondants.

Dans un premier temps nous allons modifier la page d'accueil pour ajouter quelques données qui proviennent de notre base de données (qui pourraient être le nombre d'enregistrements par table, le contenu d'un tableau, etc ...).

Mais avant nous devons comprendre comment circulent les messages entre le navigateur et le serveur Web de 4D.
Lorsque le navigateur envoie une requête :

elle est reçue par le serveur web qui l'envoie en priorité à la méthode "sur authentification web" si elle existe
puis à la méthode "sur connexion web" qui est le point central de traitement des requêtes.

En effet, cette méthode va recevoir un certain nombre de paramètres qui vont nous permettre d'orienter les traitements à effectuer et les réponses à donner.

Supposons que le navigateur demande :

la racine de notre site en tapant juste l'adresse que nous avons vue (127.0.0.1 et le numéro de port 8080) ou le nom de domaine si on était sur un site réel : La méthode "sur connexion web" reçoit juste comme paramètre "/".
Si une page particulière est demandée par exemple 127.0.0.1:8080/ListeTech, dans ce cas là elle recevra tout ce qui suit la racine du site c'est-à-dire "/ListeTech". C'est donc ce paramètre que nous allons recevoir et qu'il faudra analyser.

Mais avant d'aller plus loin, nous allons modifier une des préférences de 4D afin de choisir par programmation la page que nous souhaitons envoyer par défaut :

Nous retournons donc dans 4D
dans les propriétés de la base
et on enlève la page par défaut

A partir de là, 4D ne sera plus capable en automatique d'envoyer la page sans que nous ayons pris la main au préalable.

Lorsque vous faites de modifications dans les préférences, il faut arrêter le serveur Web et le redémarrer.

Maintenant, modifions la méthode "sur connexion web" pour qu'elle envoie la page souhaitée.

Comme toute méthode 4D, cette méthode va recevoir des paramètres :
Dans un premier temps nous ne tiendrons compte que tu 1er paramètre reçu ($1)

Ensuite nous allons pouvoir tester si le paramètre reçu est égal à / et dans ce cas nous déciderons d'envoyer telle ou telle page, et nous décidons d'envoyer la page index.html
Tapons le code suivant :

 C_TEXT($1)

 Case of

    :($1="/")

       WEB SEND FILE("index.html")

 End case

en mettant un point d'arrêt et en raffraichissant la page de notre navigateur, le navigateur se met en attente car le point d'arrêt a bien été exécuté. Nous pouvons vérifier le paramètre reçu en $1 qui est bien / et dans ce cas nous allons bien envoyer la page index.html.

Modifions maintenant notre page pour afficher la date et l'heure ainsi que la liste des techniciens..
Dans le dossier Webfolder, nous modifions la page index.html :

Nous supprimons toute la partie ici,
celle-ci également dont on n'a pas besoin pour l'instant
et nous recopions ceci : du texte une balise 4D de type 4DVAR qui signifie soit une variable soit un champ de la base concernée et on termine le commentaire.
Idem ici pour l'heure.

Nous comptons donc utiliser des variables et données de la base.

Avant d'aller plus loin, il faut savoir qu'à chaque connexion Web, un nouveau process est créé et donc que les variables et sélections du précédent appel n'ont a priori pas été conservés par 4D (vous découvrirez dans la documentation de 4D la gestion des sessions, que je n'aborde pas ici pour que vous compreniez bien les mécanismes sous-jacents, mais les variables pourraient ne pas être effacées, c'est le principe des sessions).

Si nous raffraichissons la page sur le navigateur 4D nous indique (puisqu'il a essayé de trouver les variables vdate et vheure) que ces 2 variables sont indéfinies. Il faut donc que nous ajoutions l'initialisation et la valorisation de ces variables avant de raffraichir la page.

Nous ajoutons donc la valorisation des 2 variables

 vDate:=Current date

 vHeure:=Current time

Maintenant nous avons donc bien la date et l'heure.

Avant d'envoyer la page nous pouvons par exemple créer une sélection de techniciens.

ALL RECORDS([Technicians])

Lorsqu'on raffraichit la page, bien sûr les techniciens n'apparaissent pas seuls, il faut que nous l'ajoutions dans le code HTML.

Nous allons donc mettre 2 sauts de lignes puis faire une boucle sur les techniciens et indiquer par exemple que nous souhaitons avoir le contenu d'un champ qui sera le nom du technicien avec un retour chariot à la fin.

En raffraichissant la page nous obtenons bien l'ensemble de nos techniciens.

Bien évidemment tous les artifices de présentation HTML (listes, tableaux, css, div, ...) peuvent être utilisés dans la création de vos pages. L'objectif de cette vidéo est de vous faire découvrir le fond, pas la forme.

Rendons maintenant "cliquables" chacun des techniciens. Pour les rendre cliquables, ceci est suffisant. J'enregistre, je recharge ma page et chaque technicien devient donc cliquable.

On voit sur la partie inférieure ici qu'aucune précision n'est donnée car nous n'avons pas précisé dans le HREF vers quoi devait pointer ce lien.

C'est donc à nous de définir quel URL apparaîtrra dans 4D sachant que si on souhaite passer systématiquement dans le sur connexion web, la syntaxe de 4D est celle-ci (/4DCGI), ensuite nous choisissons par exemple le fait de voir un technicien (visu_tech).

Si j'enregistre ceci et qu'on revient, nous avons donc des liens qui sont cliquables. par contre nous n'avons pas de distinction entre chaque technicien. Il faut donc indiquer à la suite de cet URL l'identifiant du technicien qui permettra de le retrouver de manière certaine.

J'enregistre, je recharge et maintenant j'ai bien au bout de chaque URL l'identifiant du technicien.

Nous allons tracer pour voir ce qu'il se passe dans 4D quand nous allons cliquer sur un lien.
Mode Trace => Bonaparte

Dans la méthode sur connexion Web $1 contient bien ce que nous attendions. Nous allons donc devoir modifier la méthode afin de tenir compte de cette nouvelle information. Nous voyons donc que $1 peut contenir autre chose que / et par exemple /4DCGI/@. Donc là nous sommes dans le cadre où nous avons un appel standard à la méthode sur connexion Web.

Nous allons structurer cette partie de cette manière là

:($1="/4DCGI/@") //si on a reçu une URL destinée au sur connexion web

 $URL:=$1

 $URL:=Replace string($URL;"/4DCGI/";"")

 Case of:($URL="Visu_Techn/@")

       $URL:=Replace string($URL;"Visu_Techn/";"")

       QUERY([Technicians];[Technicians]ID=$URL)

       WEB SEND FILE("page_tech.html")

    Else

 End case

A savoir qu'on valorise une variable intermédiaire dans laquelle on remplace le 4DCGI puis si la demande nous est envoyée est de voir un technicien, nous allons encore remplacer la partie qui ne nous intéresse pas pour finalement disposer dans cette variable là de l'identifiant que l'on souhaite. Et ensuite on peut choisir d'envoyer telle ou telle page.

Nous allons donc créer une page technicien page-tech.html qui contiendra le nom le prénom et l'email du technicien. Mais avant nous allons vérifier si nous obtenons bien ce résultat.
Lorsqu'on raffraichit la page :

$1 contient bien la chaine complète que nous attendons
et lorsque nous déroulons nous allons remplacer dans cette variable URL le 4DCGI
puis le visu_tech pour terminer
et trouver dans la table techniciens, le technicien qui nous intéresse.
Ensuite nous allons envoyer cette page_tech.html que nous allons créer au préalable.

Nous allons :

dupliquer la page index. page_tech.html
et ici nous allons enlever la date et l'heure
récupérer du technicien son nom, son prénom
et mettre un titre.

Lorsque dans 4D nous continuons la méthode, notre navigateur reçoit bien les informations page_tech avec le nom et le prénom du technicien.

Maintenant nous pouvons par exemple dans cette page ajouter la liste des 10 prochaines interventions à réaliser par le techniciens. il nous suffit d'ajouter dans la méthode sur connexion web, avant l'envoi de la page :

la recherche des interventions à venir
de les trier par date d'intervention
de prendre les 10 prochaines
et d'ajouter dans notre page HTML ici un boucle sur [Interventions]
et demander à avoir par exemple la date d'inervention et l'objet sur une même ligne

 QUERY([Interventions];[Interventions]Tech_ID=[Technicians]ID)

 QUERY SELECTION([Interventions];[Interventions]Date_Intervention>=Current date)

 ORDER BY([Interventions];[Interventions]Date_Intervention;>)

 REDUCE SELECTION([Interventions];10)

On ajoute un titre avec éventuellement un saut de ligne préalable. On enregistre et lorsqu'on recharge on dispose bien des informations liées au technicien ainsi que les prochaines interventions et on peut même par la suite rajouter de l'html afin de présenter la page de manière un peu plus claire.

À ce stade vous pourriez de la même manière rendre chaque intervention cliquable en ajoutant une balise href. Il suffit d'enregistrer, bien sûr d'indiquer l'URL que vous souhaitez recevoir dans votre serveur web pour que chaque ligne devienne clliquable.

Cette première approche rapide de la mise en place d'un site web vous permet de découvrir la manière de publier facilement vos données sur internet en utilisant le moteur intégré de 4D.