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

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.

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

TOUT SELECTIONNER ([Table])

ENVOYER FICHIER HTML ("Table.shtm")

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.

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

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.

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.

Au cas ou

   : ($1="/")   `à la connexion ou à la demande de la page d'accueil
      TOUT SELECTIONNER([Client])
         `Par défaut on sélectionne tous les enregistrements de la table [Client]
      www_recherche:="1"
         `Par défaut on effectue un tri alphabétique ascendant selon l'ID
      www_sensTri:="1A"
      TRIER([Client];[Client]ID;>)
      ENVOYER FICHIER HTML("Liste.html")

Fin de cas

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

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 :

C_TEXTE($1;$0)

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

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

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

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 :

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

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.

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.

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.

<A href="/4DACTION/WebH_afficher_client/<!--#4dscript/WebH_Numero_Enreg-->
/<!--#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 :

   C_TEXTE($1;$0)

   $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 :

C_TEXTE($1)   `Numero d'enregistrement

C_ENTIER LONG($num_enreg)
WebH_Recup_Param ($1)
$num_enreg:=Num(www_Tab_param{1})
ALLER A ENREGISTREMENT([Client];$num_enreg)

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.

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 :

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

TABLEAU ALPHA(30;Tab_critere_recherche;4)
$Guillemets:=Caractere(Guillemets )

Tab_critere_recherche{1}:=" Tout afficher"
Tab_critere_recherche{2}:=" Age inférieur à 30"
Tab_critere_recherche{3}:=" Age compris entre 30 et 60"
Tab_critere_recherche{4}:=" Age supérieur à 60"

Boucle ($i;1;Taille tableau(Tab_critere_recherche))
   Si ($i=Num(www_recherche))
      $popup:=$popup+"<OPTION value="+$Guillemets+Chaine($i)+$Guillemets+"SELECTED>"
   Sinon
      $popup:=$popup+"<OPTION value="+$Guillemets+Chaine($i)+$Guillemets+" >"
         +Mac vers ISO(Tab_critere_recherche{$i})
   Fin de si
Fin de boucle

$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>

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

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 :

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 :

C_TEXTE($1;www_Client;www_recherche;www_sensTri)

Si (www_Client#"")
   www_recherche:=www_Client+"@"
   CHERCHER([Client];[Client]Nom=www_recherche)
Fin de si
   `Par défaut on effectue un tri ascendant selon l'ID
www_sensTri:="1A"
TRIER([Client];[Client]ID;>)

ENVOYER FICHIER HTML("Liste.html")