Profiter de la puissance des balises 4D pour afficher vos données sur le Web

Chiheb NASR

- Titre : Profiter de la puissance des balises 4D pour afficher vos données sur le Web

- Auteur : Chiheb NASR

- Parution : 1 juin 2004

- Licence : Ce document est issu de http://www.developpez.com et reste la propriété exclusive de son auteur. La copie, modification et/ou distribution par quelque moyen que ce soit est soumise à l'obtention préalable de l'autorisation de l'auteur.

Sommaire

- I. Introduction ♪

- II. Du mode contextuel vers le mode sans contexte

- III. Exploitation des balises HTML

- IV. La balise 4DSCRIPT/

- V. Les balises 4DIF, 4DELSE et 4DENDIF

- VI. Les balises 4DLOOP et 4DENDLOOP

- <!--#4DLOOP [table]-->

- <!--#4DLOOP tableau-->

- <!--#4DLOOP méthode-->

- VII. Les balises 4DVAR et 4DHTMLVAR

- VIII. Fonctionnement de la base exemple

- Démarrage du site Web

- La méthode base Sur Connexion Web

- Affichage du nombre de clients trouvés

- Affichage de la liste des clients

- Pagination de la sélection des clients

- Les tris de la sélection des clients

- Affichage d’un enregistrement Client

- Recherche via un Menu déroulant

- Recherche via une zone de texte

- IX. Conclusion

- X. Bases exemples

I - Introduction ♪

Cette note technique s'adresse aux développeurs Web débutants qui sont confrontés aux contraintes du mode contextuel et qui désirent construire leurs propres pages HTML et personnaliser le fonctionnement de leur site web. Nous vous proposons une manière de concevoir les recherches, les tris, et la présentation des données, basée sur les balises 4D du serveur Web. L'envoi des données du navigateur vers la base 4D pour sauvegarder les données d'une page Web dans un enregistrement 4D tout en anticipant les différentes possibilités de saisies a déjà été traité par la note technique 4D-200401-03-FR réalisée par Steve HARTMAN.

II - Du mode contextuel vers le mode sans contexte

Le serveur Web de 4D peut fonctionner avec deux modes, le mode sans contexte (mode standard) et le mode contextuel (mode connecté). Bien entendu, on peut à tout moment passer du mode contextuel au mode sans contexte et inversement.

En mode contextuel, la connexion d'un navigateur Web provoque la création d'un contexte, dans lequel il dispose de sa propre sélection courante, de ses variables, etc. Chaque navigateur est considéré comme un 4D Client se connectant à la base en menus créés. Le contexte est pris en charge par un process de connexion Web spécifique. Ce mode permet de publier instantanément une base 4D sur le Web, sans qu'il soit nécessaire de créer des pages Web : 4D génère et envoie au navigateur des pages dynamiques, issues de la conversion automatique en HTML des barres de menus et des formulaires de votre base.

Toutefois, le mode contextuel présente certaines contraintes. Par exemple, l'utilisateur Web ne peut pas utiliser certaines fonctions standards des navigateurs (Recharger, Page précédente, etc.) ou encore le process de connexion reste actif jusqu'à ce que la période d'inactivité (timeout) du navigateur spécifiée dans les préférences de la base soit atteinte.

Dans le mode sans contexte, le fonctionnement du serveur Web 4D est comparable à celui des serveurs Web standards. Lorsqu'il reçoit une requête HTTP d'un navigateur (URL, formulaire posté, etc.), le serveur traite la requête puis retourne une réponse (envoi d'une page Web par exemple). Aucune connexion n'est maintenue par la suite entre le serveur et le navigateur. Dans ce mode, le serveur Web peut envoyer des pages statiques ou des pages semi-dynamiques. Les pages semi-dynamiques permettent d'accéder aux données de la base ou d'effectuer tout type de traitement via des balises 4D spéciales, évaluées au moment de l'envoi de la page. Les pages semi-dynamiques nous permettent de construire, gérer et envoyer des pages Web dont le contenu est en totalité ou en partie issu d'un traitement effectué par 4D. Le mode sans contexte permet généralement de répondre à la plupart des besoins de développement de sites Web.

Note 01 À compter de la version 2003 le serveur Web 4D démarre par défaut en mode sans contexte.

Dans cette note technique, nous utiliserons bien entendu le mode non contextuel afin de personnaliser la présentation de nos pages HTML et de contrôler l'envoi des données de la base au navigateur en utilisant les balises 4D.

III - Exploitation des balises HTML

Le serveur Web de 4D fournit diverses balises HTML spécifiques à 4D, permettant d'insérer des références à des expressions ou variables 4D, ou différents types de traitements, à l'intérieur des pages HTML envoyées par le serveur Web 4D, par exemple à l'aide des commandes ENVOYER FICHER HTML et ENVOYER BLOB HTML. Ces pages sont appelées pages semi-dynamiques.

L'analyse du contenu des pages semi-dynamiques, suffixées « .shtm » ou « .shtml », s'effectue au moment de l'appel aux deux commandes ENVOYER FICHIER HTML et ENVOYER BLOB HTML ou lors de l'envoi de pages appelées via des URL. Il est important de noter que l'analyse des pages suffixées « .htm » et « .html » est effectuée uniquement lorsque la page est envoyée par l'une ou l'autre de deux commandes précédentes.

Ces balises doivent être insérées sous forme de commentaires HTML :

<!--LaBalise LeContenu-->.

Les balises HTML 4D disponibles sont les suivantes :

- 4DVAR, pour insérer des variables et expressions 4D ;

- 4DHTMLVAR, semblable à 4DVAR, mais insérant du code HTML ;

- 4DSCRIPT, pour exécuter une méthode 4D ;

- 4DIF, 4DELSE et 4DENDIF, pour insérer des conditions dans le code HTML ;

- 4DLOOP et 4DENDLOOP, pour insérer des boucles dans le code HTML ;

- 4DINCLUDE, pour insérer une page HTML dans une autre page.

Pour publier les données, nous aurons besoin des balises suivantes : 4DVAR, 4DSCRIPT, 4DIF et 4DLOOP. Nous allons introduire ces balises en nous appuyant sur des exemples extraits de la base exemple jointe à cette note technique.

IV - La balise 4DSCRIPT/

La balise 4DSCRIPT/ permet d'exécuter des méthodes 4D au moment de l'envoi de pages HTML. La présence dans une page statique du commentaire HTML <!--#4DSCRIPT/NomMéthode/Param--> provoque l'exécution de la méthode NomMéthode avec le paramètre Param sous forme de chaîne dans $1. Pour pouvoir appeler une méthode avec 4DSCRIPT il n'est pas nécessaire d'activer l'attribut « Disponible via 4DACTION » défini dans les propriétés de la méthode.

Syntaxe : <!--#4DSCRIPT/NomMéthode/Param-->

Note 02 Dans les versions précédentes la balise 4DACTION pouvait être utilisée soit sous forme d'URL, soit sous forme de commentaire HTML Désormais, la balise 4DSCRIPT s'utilise exclusivement sous forme de commentaire HTML (<!--#4DSCRIPT/NomMéthode/Param-->) et produit exactement les mêmes effets que <!--#4DACTION/NomMéthode/Param -->. En revanche, 4DACTION est réservée à une utilisation en tant qu'URL.

Note 03 Pour toute méthode appelée par une balise 4DSCRIPT/ la déclaration des paramètres $1 et $0 est obligatoire. Dans le cas contraire, le navigateur recevra un message d'erreur d'exécution. La déclaration de $0 est obligatoire, même si, dans les faits, la méthode ne retourne pas de résultat. L'absence de résultat se traduit alors par une chaîne vide pour $0.

Exemple  :

La méthode WebH_date_heure retourne dans $0 la date et l'heure sous forme de texte. L'expression <!--#4DSCRIPT/WebH_date_heure--> retourne par exemple :

mercredi 9 juin 2004, 23:01:25

Le code de la méthode projet WebH_date_heure est le suivant :

1. C_TEXTE($0;$1)   `Ces paramètres doivent toujours être déclarés

3. $0:=Chaine(Date du jour(*);3)+", "+Chaine heure(Heure courante(*);1)

Les méthodes appelées par une balise 4DSCRIPT/ peuvent ne pas renvoyer de texte, mais servir uniquement à effectuer un traitement spécifique, par exemple, exécuter une recherche pour construire une sélection ou bien remplir des tableaux qui seront affichés dans la page sous forme de menu déroulant. Nous détaillerons plus loin l'utilisation des autres appels aux balises 4DSCRIPT/ utilisés dans la base.

V - Les balises 4DIF, 4DELSE et 4DENDIF

Le commentaire <!--#4DIF expression--> permet d'exécuter du code HTML de manière conditionnelle et s'utilise en conjonction avec les commentaires <!--#4DELSE--> (optionnel) et <!--#4DENDIF-->. Le paramètre « expression » peut contenir toute expression 4D valide, un champ 4D ou une méthode projet, retournant une valeur booléenne et doit figurer entre parenthèses. Chaque <!--#4DIF expression--> doit avoir un <!--#4DENDIF--> correspondant.

Syntaxe : <!--#4DIF expression--> <!--# 4DELSE--> <!--# 4DENDIF-->

Note 04 Une « expression » peut contenir directement des appels de fonctions 4D, mais il est déconseillé d'utiliser ce mode de fonctionnement, pour des raisons de localisation. Par exemple le commentaire suivant <!--#4DIF (Enregistrements Trouvés([Client])>1)--> ne fonctionnera plus dans les trois cas suivants :

- si la base est ouverte avec un 4D anglais ;

- si le nom de la commande a changé ;

- si le nom de la table a changé dans la structure.

Dans ces cas, nous vous préconisons de ne pas utiliser les noms des commandes directement dans votre code HTML, mais d'utiliser des expressions faisant appel à des méthodes 4D intermédiaires. On peut par exemple remplacer le commentaire précédent par <!--#4DIF (Web_Enregs_Trouves >1)--> et la méthode Web_Enregs_Trouves sera :

1. C_ENTIER LONG($0)

3. $0:=Enregistrements trouves([Client])

Exemple (extrait de la base de Demo)  :

L'utilisation suivante de la balise 4DIF permet d'alterner les couleurs de fond (gris foncé ou gris clair) des lignes du tableau affichant les enregistrements trouvés. Cette alternance de couleurs est effectuée selon la parité du rang de l'enregistrement dans la sélection courante. Dans cet exemple, si le rang de l'enregistrement est impair, la couleur du fond sera égale à « #f5f5f5 ». Par contre si ce rang est pair, la couleur utilisée sera égale à « #dcdcdc ».

Voici un aperçu de l'affichage de la liste des enregistrements :

Ci-après le code HTML permettant de générer ce type d'affichage :

<!--#4DIF (WebH_Numero_Selection=0)-->

<tr>
<td width="100" bgcolor="#dcdcdc"><font size="-1" color="black"><!--#4dvar [Client]Nom--></font></td>
<td width="100" bgcolor="#dcdcdc"><font size="-1" color="black" ><!--#4dvar [Client]Prenom--></font></td>
<td width="80" bgcolor="#dcdcdc"><font size="-1" color="black"><!--#4dvar [Client]Etat--></font></td>
<td width="180" bgcolor="#dcdcdc"><font size="-1" color="black"><!--#4dvar [Client]Adresse--></font></td>
<td width="70" bgcolor="#dcdcdc"><font size="-1" color="black"><!--#4dvar [Client]Age--></font></td>
</tr>

<!--#4DElse-->

<tr>
<td width="100" bgcolor="#f5f5f5"><font size="-1" color="black"><!--#4dvar [Client]Nom--></font></td>
<td width="100" bgcolor="#f5f5f5"><font size="-1" color="black"><!--#4dvar [Client]Prenom--></font></td>
<td width="80" bgcolor="#f5f5f5"><font size="-1" color="black"><!--#4dvar [Client]Etat--></font></td>
<td width="180" bgcolor="#f5f5f5"><font size="-1" color="black"><!--#4dvar [Client]Adresse--></font></td>
<td width="70" bgcolor="#f5f5f5"><font size="-1" color="black"><!--#4dvar [Client]Age--></font></td>
</tr>

<!--#4DEndif-->

La méthode projet WebH_Numero_Selection retourne un entier qui ne peut être que 0 ou 1 selon le rang de l'enregistrement dans la sélection courante de la table [Client].

1. C_TEXTE($1)

3. C_ENTIER($0)

5. $0:=(Numero dans selection([Client])%2)

VI - Les balises 4DLOOP et 4DENDLOOP

Ce commentaire permet de répéter une portion de code HTML tant que la condition est remplie. La portion est délimitée par <!--#4DLOOP--> et <!--#4DENDLOOP-->. Chaque <!--#4DLOOP condition--> doit avoir un <!--#4DENDLOOP--> correspondant.

Syntaxe : <!--#4DLOOP condition--> <!--#4DENDLOOP-->

Il existe trois types de conditions…

<!--#4DLOOP [table]-->

Cette syntaxe effectue une boucle pour chaque enregistrement de la sélection courante de table dans le process en cours. La portion de code HTML située entre les deux commentaires est répétée pour chaque enregistrement de la sélection courante.

Note 05 Lors de l'utilisation de 4DLOOP avec une table, les enregistrements sont chargés en mode Lecture seule. De plus, les liens (Aller ou Retour) ne sont pas propagés à chaque chargement d'enregistrement et cela même si les liens sont mis en automatique dans la structure. Il convient donc au développeur d'appeler une méthode 4D via un 4DSCRIPT qui activera les liens avec les commandes CHARGER SUR LIEN et/ou LIEN RETOUR .

Cette balise est utilisée dans la base exemple pour afficher la sélection courante de la table [Client]. Le code HTML suivant :

<!--#4DLOOP [Client]-->

<!--#4DIF (WebH_Numero_Selection=0)-->
<tr>
<td width="100" bgcolor="#dcdcdc"><font size="-1" color="black"><!--# 4dvar [Client]Nom--></font></td>
....
</tr>
<!--#4DElse-->
<tr>
<td width="100" bgcolor="#f5f5f5"><font size="-1" color="black"><!--#4dvar [Client]Nom--></font></td>
....
</tr>
<!--#4DEndif-->

<!--#4DENDLOOP-->

Note 06 La commande ENVOYER FICHIER HTML ne provoque pas l'envoi de la page au moment de l'appel de la commande, mais à la fin de l'exécution de toute la chaîne des appels. Prenons l'exemple de code suivant :

1. TOUT SELECTIONNER ([Table])

3. ENVOYER FICHIER HTML ("Table.shtm")

5. REDUIRE SELECTION ([Table];0)

Si la page HTML Table.shtm contient l'appel à la balise <!--#4DLOOP [Table]-->, vous serez surpris d'avoir un résultat vide. Ceci est logique, car la page html ne sera envoyée et la balise 4DLOOP ne sera analysée qu'à la fin de l'exécution des chaînes des appels c'est-à-dire bien après l'exécution de la commande REDUIRE SELECTION. Par conséquent, la balise 4DLOOP sera exécutée sur une sélection vide.

Les syntaxes suivantes de 4DLOOP ne sont pas utilisées dans la base exemple, mais il est important de vous en donner quelques conseils et astuces.

<!--#4DLOOP tableau-->

Cette syntaxe effectue une boucle pour chaque élément du tableau. L'indice courant du tableau est incrémenté à chaque répétition de la portion de code HTML.

L'exemple de code HTML suivant affiche la liste des éléments du tableau tab_noms :

<!--#4DLOOP tab_noms-->
<!--#4DVAR tab_noms{tab_noms}--> <BR>
<!--#4DENDLOOP-->

<!--#4DLOOP méthode-->

Cette syntaxe effectue une boucle tant que la méthode retourne Vrai. La méthode admet un paramètre de type Entier long. Elle est appelée une première fois avec la valeur 0 pour permettre une éventuelle phase d'initialisation, puis elle est appelée successivement avec les valeurs 1, 2, 3… tant qu'elle renvoie Vrai. Pour des raisons de sécurité, la Méthode base Sur authentification Web peut être appelée, une seule fois, avant la phase d'initialisation, et reçoit 0 comme paramètre. Le fait de retourner la valeur Faux dans $0 dans la Méthode base Sur authentification Web n'arrête pas la boucle de 4DLOOP. En effet, c'est dans la méthode appelée avec la balise 4DLOOP qu'il faudra gérer cette interdiction d'exécution.

Note 07 Pour pouvoir appeler une méthode avec 4DLOOP il n'est pas nécessaire d'activer l'attribut « Disponible via 4DACTION » défini dans les propriétés de la méthode. Comme pour la balise 4DSCRIPT, il est impératif de déclarer $0 et $1 au sein de la méthode, mais dans le cas de 4DLOOP, $0 et $1 sont respectivement de type BOOLEEN et ENTIER LONG.

VII - Les balises 4DVAR et 4DHTMLVAR

Syntaxe : <!--#4DVAR NomVar--> ou <!--#4DVAR Expression4D-->

La balise <!--#4DVAR NomVar--> permet d'insérer une référence à une variable (process ou interprocess) ou à une expression 4D à tout endroit d'une page HTML. On peut par exemple insérer directement le contenu d'un champ (<!--#4DVAR [Client]Nom-->) ou un élément de tableau (<!--#4DVAR www_tab{1}-->). 4D analyse la page HTML, puis remplace <!--#4DVAR NomVar --> par la valeur appropriée.

Dans la base exemple, cette balise est utilisée pour afficher des champs 4D et insérer des variables dans des URL. Ces variables ne seront pas visibles sur la page HTML, mais serviront de paramètres à des méthodes de recherche et de tri.

Voici deux exemples d'insertion d'une variable texte et d'un champ 4D :

<!--#4DVAR www_recherche-->
<!--#4DVAR [Client]Nom-->

Par ailleurs, depuis la version 6.7, ces deux balises peuvent recevoir une variable ou un champ de type BLOB pour affranchir la limite de la taille d'une variable ou d'un champ de type texte (32 000 caractères). Pour passer une variable de type BLOB, il faudra la construite avec la commande TEXTE VERS BLOB en lui passant la constante Texte sans longueur dans le troisième paramètre.

Note 08 Une expression peut contenir directement des appels de fonctions 4D, mais il est déconseillé d'utiliser ce mode de fonctionnement, pour des raisons de localisation. Par exemple le commentaire <!--#4DVAR Date du jour(*)-->, bien que correctement interprété avec un 4D français, ne sera pas traité avec un 4D anglais. Il en va de même pour le traitement des nombres réels (car le séparateur décimal peut varier d'un pays à l'autre). Dans ces cas, il est préférable d'affecter une variable par programmation ou faire appel à une méthode, via la balise 4DSCRIPT, qui retournera le résultat dans un texte.

Note 09 Les balises peuvent être écrites sous deux notations différentes <!--#4DVAR MaVar--> ou <!--4DVAR MaVar-->. En effet, les deux notations (avec ou sans dièse) sont analysées correctement, mais il est préférable d'utiliser la notation avec dièse pour les deux raisons suivantes :

1 - La notation avec le dièse est issue des recommandations SSI (Server Side Includes) :

1. ----------------------------

2. SSI directives have the following syntax:

3. <!--#element attribute=value attribute=value ... -->

4. ----------------------------

2 - Pour être compatible avec les ADD-ON des éditeurs HTML spécialisés tels que Dreamweaver et Golive.

VIII - Fonctionnement de la base exemple

Les pages Web semi-dynamiques, c'est-à-dire celles qui contiennent des balises 4D, sont analysées par le moteur de 4D dans les deux cas suivants :

- lorsque la page possède l'extension .shtml ou .shtm. Dans ce cas, la page est analysée dès que le serveur Web reçoit une requête la demandant ;

- lorsqu'une page Web ayant l'extension .html est envoyée par l'une de deux commandes ENVOYER FICHIER HTML ou ENVOYER BLOB HTML.

Il est important de noter que le moteur de 4D analyse la page HTML envoyée par le serveur Web à partir du début jusqu'à la fin de son contenu. Les balises 4D sont donc traitées et remplacées par leurs valeurs appropriées dans l'ordre et en fonction de leurs positions dans la page.

Démarrage du site Web

Le site Web de la base exemple est publiée via le port numéro 80 sous Windows et via le port 8080 sous Macintosh. Le dossier Web est nommé « Web » dans le dialogue des préférences de la base. En revanche, la page d'accueil n'est pas définie dans les préférences, mais sera envoyée par la méthode base Sur Connexion Web. En effet, en mode sans contexte, si vous voulez envoyer des pages d'accueil différentes en fonction de certains critères, il vous suffit de ne pas définir de page d'accueil par défaut (ou de définir une page qui n'existe pas). Dans ce cas, la Méthode base « Sur connexion Web » est appelée. Vous pouvez alors traiter la connexion de manière personnalisée. À la première connexion la méthode base Sur Connexion Web reçoit toujours « / » dans son paramètre texte $1. En contrôlant la valeur de $1, on peut savoir à tout moment si la requête envoyée correspond ou non à une demande de la page d'accueil. Si c'est bien le cas, on fait exécuter le code nécessaire et on envoie la page demandée. Dans la base exemple, on sélectionne tous les clients et on envoie le fichier « Liste.html ». Par défaut, tous les clients sont affichés et triés par ordre alphabétique.

La méthode base Sur Connexion Web

1. Au cas ou

3. : ($1="/")   `à la connexion ou à la demande de la page d'accueil

4. TOUT SELECTIONNER([Client])

5. `Par défaut on sélectionne tous les enregistrements de la table [Client]

6. www_recherche:="1"

7. `Par défaut on effectue un tri alphabétique ascendant selon l'ID

8. www_sensTri:="1A"

9. TRIER([Client];[Client]ID;>)

10. ENVOYER FICHIER HTML("Liste.html")

12. Fin de cas

L'utilité des deux variables www_recherche et www_sensTri sera détaillée plus loin.

Affichage du nombre de clients trouvés

Le nombre des clients de la sélection courante est inséré par la balise 4dscript suivante :

<!--#4dscript/WebH_Nombre_Enregs/-->

Le code suivant de la méthode projet WebH_Nombre_Enregs convertit le nombre de clients trouvés en texte avant d'envoyer le résultat :

1. C_TEXTE($1;$0)

3. $0:=Chaine(Enregistrements trouves([Client]))

Voici un exemple d'affichage du nombre de clients trouvés :

Affichage de la liste des clients

La liste des clients est représentée sous forme d'un tableau HTML. Dans les colonnes, on associe les champs de la table Clients à afficher. Les lignes correspondant aux enregistrements de la sélection courante. Le premier élément du tableau est réservé aux noms des colonnes et aux boutons de tri comme le montre la copie d'écran suivante.

Pour construire cette liste, on fait exécuter une boucle sur la sélection courante de la table Client (via 4DLOOP) tout en insérant une ligne pour chaque enregistrement. Les lignes sont insérées à partir de la deuxième position, car la première est réservée pour l'entête de la liste. Les valeurs des champs sont insérées avec la balise 4DVAR, cette technique a été expliquée plus haut (voir paragraphe « Les balises 4DVAR et 4DHTMLVAR »). L'alternance des couleurs a également été détaillée dans le paragraphe « Les balises 4DIF, 4DELSE et 4DENDIF » . Vous remarquerez que le champ ID est inséré sous forme de lien HTML (<A href="....  ">....</A>) pour pouvoir chercher et afficher un enregistrement client. Ce point sera examiné, plus bas, dans la partie « Affichage d'un enregistrement ».

Pagination de la sélection des clients

Toute la technique de pagination mise en œuvre dans la base exemple est gérée par les quelques lignes de code html suivantes :

<!--#4dscript/WebH_Pagination-->
<!--#4dloop Tab_selectionlimitee-->
<a href="/4daction/WebH_PageClient/<!--#4dvar www_recherche-->/<!--#4dvar www_sensTri-->
/<!--#4dvar Tab_selectionlimitee-->/<!--#4dscript/WebH_Hasard/-->"><!--#4dvar Tab_selectionlimitee--></a>
<!--#4dendloop-->

Cette pagination est basée tout simplement sur les deux commandes 4D suivantes :

1. SELECTION LIMITEE VERS TABLEAU($debut;$fin;[Client];$Tab_selectionClient)

3. CREER SELECTION SUR TABLEAU([Client];$Tab_selectionClient)

Dans la méthode projet WebH_Pagination on subdivise la sélection courante des clients en un nombre de pages et on positionne l'affichage de la liste sur la page courante demandée par l'utilisateur. À la première connexion, c'est les enregistrements de la première page qui sont affichés. Ensuite, c'est la valeur courante de la variable www_selectionlimitee (qui n'est autre que l'indice du tableau Tab_selectionlimitee) qui permettra de déterminer le numéro de la page courante pendant toute la navigation de l'utilisateur. En effet, les numéros des pages sont stockés dans le tableau texte Tab_selectionlimitee. Lorsque la sélection n'est pas vide, l'élément 1 sera égal à la valeur « 1 » et l'élément Taille tableau(Tab_selectionlimitee) va contenir le numéro de la dernière page. Le nombre d'enregistrements par page est défini, pour une raison de clarté, dans la méthode elle-même, mais vous pouvez envisager de le stocker dans une autre table de paramètres de votre site pour pouvoir le modifier facilement même pendant que votre site web est en production.

Après avoir construit le tableau Tab_selectionlimitee, on fait exécuter une boucle sur ce dernier avec la balise 4DLOOP. Pour chaque élément, on affiche un lien html « Href » qui permettra, après une reconstruction de la sélection des clients et tout en conservant le sens de tri, de pointer sur la bonne page demandée par l'utilisateur web. Ce lien fait appel à la méthode 4D WebH_PageClient qui reçoit dans son paramètre texte $1 les variables suivantes :

www_recherche

Cette variable stocke le critère de recherche qui correspond à la position dans le menu déroulant de recherche. La sélection des clients est donc recalculée selon la valeur courante de cette variable.

www_sensTri

Cette variable stocke le sens de tri courant choisi par l'utilisateur web. La sélection des clients est triée selon la valeur courante de cette variable.

Tab_selectionlimitee

Cette variable renvoie à 4D le numéro de la page courante. Sa valeur sera affectée à une variable texte nommée www_selectionlimitee qui servira de variable de stockage du numéro de la page courante.

Note 10 Utilité de la balise <!--#4dscript/WebH_Hasard/-->

Cette balise 4DSCRIPT fait appel à la méthode WebH_Hasard qui rajoute un nombre aléatoire à la fin de chaque URL. Les URL seront donc différentes à chaque affichage de la page. Cette technique nous permettra d'éviter que le navigateur pioche dans son cache pour nous renvoyer une ancienne copie de la page demandée et force le rechargement de la page à partir du serveur Web.

Les tris de la sélection des clients

La sélection courante peut être triée à l'aide de deux boutons de tri (Ascendant et Descendant) qui se trouvent sur chaque colonne de la liste des enregistrements, comme le montre la copie d'écran suivante :

À chaque bouton de tri, on associe un lien html de type 4DACTION.

href="/4DACTION/WebH_TRI/<!--#4dvar www_recherche-->/2A/<!--# 4dscript/WebH_Hasard/-->"

Ces liens font appel à la méthode 4D WebH_TRI qui reçoit dans son paramètre texte $1 les paramètres suivants :

www_recherche

Cette variable stocke le critère de recherche permettant de retrouver la sélection des clients. Cette sélection est recalculée selon la valeur courante de cette variable.

Les critères de tri

Ce paramètre correspond aux critères de tri. Dans notre exemple, ce critère se présente sous forme d'un chiffre suivi de la lettre A ou la lettre D. Le chiffre correspond au numéro de la colonne qui nous renseigne sur le champ selon lequel la sélection doit être triée et la lettre (A ou D) nous informe sur le sens de tri (Ascendant ou Descendant). Ce paramètre est, ensuite, stocké dans la variable www_sensTri  qui nous permettra de garder la sélection toujours triée selon les critères choisis par l'utilisateur web. Bien entendu, vous pouvez adopter toute autre méthodologie pour gérer vos tris. On pourrait imaginer, par exemple, une méthode générique basée sur un critère formaté de la façon suivante : « Numéro de la table - Numéro du champ ? Sens de tri ».

Le rôle du dernier paramètre inséré avec la balise <!--#4dscript/WebH_Hasard/--> est détaillée dans la Note 10.

Affichage d’un enregistrement Client

La liste des clients est représentée sous forme d'un tableau HTML. Chaque colonne affiche un champ de la table Client et les lignes correspondent aux enregistrements de la sélection courante. Les valeurs des champs sont affichées avec la balise 4DVAR.

Par exemple : <!--#4dvar [Client]Nom-->

Dans la première colonne on insère le champ [Client]ID sous forme d'un lien HTML.

1. <A href="/4DACTION/WebH_afficher_client/<!--#4dscript/WebH_Numero_Enreg-->

2. /<!--#4dscript/WebH_Hasard/-->" target="_blank" ><!--# 4dvar [Client]ID--></A>

Ce lien invoque, via la balise 4DACTION, la méthode 4D WebH_afficher_client en lui passant les paramètres suivants :

Le numéro d'enregistrement du Client

Le numéro d'enregistrement est retourné par la méthode 4D WebH_Numero_Enreg suivante appelée via un 4Dscript :

1. C_TEXTE($1;$0)

3. $0:=Chaine(Numero enregistrement([Client]))

<!--#4dscript/WebH_Hasard/-->

Ce paramètre permet de forcer le rechargement de la fiche du client à partir du serveur Web (voir la Note 10).

Le numéro d'enregistrement nous permet d'accéder directement à une fiche d'un client par un simple appel à la commande ALLER A ENREGISTREMENT([Client];$numero_enreg). Voici le code de la méthode 4D WebH_afficher_client :

1. C_TEXTE($1)   `Numero d'enregistrement

3. C_ENTIER LONG($num_enreg)

4. WebH_Recup_Param ($1)

5. $num_enreg:=Num(www_Tab_param{1})

6. ALLER A ENREGISTREMENT([Client];$num_enreg)

8. ENVOYER FICHIER HTML("Client.html")

La méthode WebH_Recup_Param est une méthode utilitaire générique qui permet d'analyser le paramètre texte $1 pour en extraire les valeurs des différents paramètres (séparés par un slash « / ») et de les stocker dans le tableau www_Tab_param.

Note 11 Notez également l'utilisation de l'attribut html target=« _blank » qui nous permet d'ouvrir la fiche de client dans une nouvelle fenêtre du navigateur. Ceci nous offre les avantages de garder ouverte la fenêtre qui affiche la sélection et de pouvoir comparer deux ou plusieurs fiches client.

Recherche via un Menu déroulant

Le menu déroulant est construit avec le code html suivant :

<select name="www_recherche" size="1" onchange="doSubmit(PopupForm, this);">
<!--#4dscript/WebH_Construction_Pop-->
</select></p>

La méthode 4D WebH_Construction_Pop, insérée via une balise 4Dscript, permet de remplir le contenu du menu déroulant à partir du tableau texte Tab_critere_recherche. Elle insère autant de lignes html de la forme <OPTION value="nombre" > Chaîne de caractères> que des éléments dans le tableau texte. Cette méthode conserve également la position courante du menu préalablement sélectionnée par l'utilisateur.

Voici la méthode WebH_Construction_Pop :

1. C_TEXTE($0;$1;www_recherche;$popup)

3. TABLEAU ALPHA(30;Tab_critere_recherche;4)

4. $Guillemets:=Caractere(Guillemets )

6. Tab_critere_recherche{1}:=" Tout afficher"

7. Tab_critere_recherche{2}:=" Age inférieur à 30"

8. Tab_critere_recherche{3}:=" Age compris entre 30 et 60"

9. Tab_critere_recherche{4}:=" Age supérieur à 60"

11. Boucle ($i;1;Taille tableau(Tab_critere_recherche))

12. Si ($i=Num(www_recherche))

13. $popup:=$popup+"<OPTION value="+$Guillemets+Chaine($i)+$Guillemets+"SELECTED>"

14. Sinon

15. $popup:=$popup+"<OPTION value="+$Guillemets+Chaine($i)+$Guillemets+" >"

16. +Mac vers ISO(Tab_critere_recherche{$i})

17. Fin de si

18. Fin de boucle

20. $0:=Caractere(1)+$popup

Les recherches via le menu déroulant nécessitent l'utilisation d'un JavaScript. Pour profiter de la puissance de cette technique, un minimum de connaissance de langage JavaScript est nécessaire.

Le menu déroulant a été défini avec l'attribut suivant :

onchange="doSubmit(PopupForm, this);">

En effet, le onchange est équivalent à l'événement formulaire Sur données modifiées de 4D et le doSubmit est le nom de l'action ou du JavaScript à déclencher de la même manière que les méthodes objets. Le JavaScript doSubmit reçoit deux paramètres : le nom du formulaire html à envoyer au serveur web (PopupForm) et le nom de l'objet courant (This, ce paramètre est équivalent à Self-> dans 4D).

Voici le code du JavaScript doSubmit :

<script language="JavaScript">
function doSubmit(form, popup) {
var IndicePopRecherche = popup.options[popup.selectedIndex].value;
form.action = "/4DACTION/WebH_RechrecheViaPopup/" + IndicePopRecherche + "/";
form.submit();
return true;
}
</script>

Note 12 Il important de noter que 4D n'analyse pas les JavaScript et ne traite donc pas les balises 4D qui y sont insérées. En revanche, pour pouvoir utiliser des variables ou des expressions 4D, on peut utiliser, dans le code JavaScript des références à des variables 4D.

Dans notre cas on utilise la variable Javascript IndicePopRecherche, qui correspond à l'indice de menu sélectionné par l'utilisateur. Cette variable est passée comme paramètre à la méthode WebH_RechrecheViaPopup qui, elle-même, est envoyée au serveur Web via la balise 4DACTION. La méthode WebH_RechrecheViaPopup effectue la recherche demandée et renvoie le résultat approprié. Vous noterez que l'élément sélectionné dans le menu déroulant a bien été conservé.

Recherche via une zone de texte

Pour effectuer une recherche répondant à un critère simple, il faudra utiliser un formulaire html défini par les balises <form> et </form> dont les attributs sont les suivants :

Name :

c’est le nom qu’on donne au formulaire, dans notre exemple « Form_RechercheSimple »

Action :

c’est l’URL à envoyer au serveur web pour exécuter du code 4D. Dans notre exemple nous demandons, via la balise 4DACTION d’exécuter la méthode WebH_RechercheSimple.

Method :

c’est le type de la requête envoyée, ici on utilise le type « get », mais on peut aussi utiliser le type « Post ».

Ci-après une copie d'écran du formulaire de recherche affiché sur un navigateur :

Voici le code html utilisé pour la définition de ce formulaire :

<form name="Form_RechercheSimple" action="/4DACTION/WebH_RechercheSimple" method="get">
<input type="input" name="www_Client"  value="<!--#4Dvar www_Client-->" maxlength="30">
<input type="submit" name="bGO" value="Envoyer">
</form>

Lorsque l'on clique sur le bouton, de type submit, « Envoyer », l'URL « /4DACTION/ WebH_RechercheSimple » est envoyée au serveur Web. La méthode WebH_RechercheSimple est alors exécutée. Il est nécessaire d'activer l'attribut « Disponible via 4DACTION » défini dans les propriétés de cette méthode. Toutes les variables de type input, au sens html, doivent être déclarées de type texte dans la méthode elle-même et dans la méthode « compiler_Web ». Dans notre exemple, la méthode WebH_RechercheSimple reçoit la variable texte www_Client qui permet d'effectuer une recherche par Nom sur la table client.

Voici le code de la méthode WebH_RechercheSimple :

1. C_TEXTE($1;www_Client;www_recherche;www_sensTri)

3. Si (www_Client#"")

4. www_recherche:=www_Client+"@"

5. CHERCHER([Client];[Client]Nom=www_recherche)

6. Fin de si

7. `Par défaut on effectue un tri ascendant selon l'ID

8. www_sensTri:="1A"

9. TRIER([Client];[Client]ID;>)

11. ENVOYER FICHIER HTML("Liste.html")

IX - Conclusion

Dans cette note, nous vous avons présenté des techniques de publication de vos données sur le Web, basée sur les balises 4D. Il s'agit d'une approche puissante, facile à mettre en œuvre et surtout très pratique pour la maintenance de votre site Web. Des astuces et des conseils techniques vous ont été également proposés.

X - Bases exemples

Téléchargez les bases exemples :

base exemple Mac

base exemple Windows