Guide ExperSHOP DynHtml

Page Principale Table

Pour tout rapport de bug ou suggestion, envoyez un mèl au Support ExperLog

Instructions DynHtml

Pour une liste complète des instructions DynHtml, Cliquez Ici.

Guide d'utilisation DynHtml

DynHtml est le moyen qu'ExperShop Lite met à votre disposition pour inclure des données en provenance d'une base de données dans des pages HTML:
L'essentiel du travail à effectuer pour créer et mettre à jour une boutique ExperShop consiste à écrire et maintenir des pages DynHtml.

Dans la boutique de démo ExperSHOP Lite, les pages DynHtml sont dans le répertoire ExperSHOP/ESRootDir/ESTemplates/Shop: vous pouvez aller y jeter un coup d'oeil.

Ce guide détaille étape par étape une page DynHtml.

Liste des produits dans un rayon de la boutique

La page DynHtml prise pour exemple permet d'afficher la liste des produits disponibles dans un rayon de la boutique. Voici à quoi ressemble l'affichage:

Product Name Price Add to cart
Flowers Composition 20.0 Add to cart
Roses 30.0 Add to cart

Maintenant, regardons le code source DynHtml interprété par ExperSHOP pour générer cet écran.

Code source DynHtml

DynHtml est un mélange de HTML et d'instructions ExperSHOP, interprétées lors du chargement de la page.
Regardez le code source: vous y verrez des tags HTML, et des instructions comme $ExecSql, $LoopOnResults ... $EndLoop, etc...

Ces instructions permettent d'interroger la base de données, et d'inclure les résultats de la requête dans la page HTML générée.
Le chapitre suivant détaille toutes les instructions et tags spécifiques utilisés dans la page DynHtml. 


$DefineSql LISTPROD SELECT ProdId, Name, ProdImage, Price FROM
 EProduct WHERE DeptId='$DeptId$'

<HTML>
<HEAD>
  <TITLE>List Products</TITLE>
</HEAD>

<BODY BGCOLOR=#ffffff>
<CENTER>

$ExecSql LISTPROD

$IfNoResult LISTPROD

<h2>No Product Available</h2>

$Else

<TABLE BORDER>
  <TR>
    <TD ALIGN="CENTER">
      <B><FONT SIZE=-1>Product Name</FONT></B>
    </TD>
    <TD ALIGN="CENTER">
      <B><FONT SIZE=-1>Price</FONT></B>
    </TD>    
    <TD ALIGN="CENTER">
      <B><FONT SIZE=-1>Add to cart</FONT></B>
    </TD>
  </TR>

$LoopOnResults LISTPROD prod

<TR>

<TD ALIGN=CENTER>
 <A HREF="com.expershop.lite.ExperSHOP?$COOKIE$&Page=
 ESDetail.tmpl&ProdId=$prod:ProdId$">$prod:Name$</a>
</TD>

<TD ALIGN="CENTER">$(.00)prod:Price$</TD>

<TD ALIGN="CENTER">
  <FONT SIZE="-1">
  <A HREF="com.expershop.lite.ESCartServlet?$COOKIE$&Page=
ESViewCart.tmpl&Action=com.expershop.actions.ESAddToCart&ProdId=
$prod:ProdId$">
Add to cart</A>
  </FONT>
</TD>

</TR>

$EndLoop

</TABLE>
$Endif

</BODY>
</HTML>

Comment ça marche ?

Regardons le code DynHtml, étape par étape:

D'abord, nous définissons une requête SQL pour lister tous les produits disponibles dans un rayon de la boutique; pour cela, nous utilisons l'instruction ExperSHOP $DefineSql:

  • La requête va accéder les colonnes "ProdId", "Name", "ProdImage" et "Price" de la table "EProduct" dans la base de données, pour tous les produits appartenant à un rayon donné.
  • $DeptId$ sera remplacé par la valeur du paramètre HTTP "DeptId" provenant d'une page HTML précédente.
    Par exemple, $DeptId$ pourrait être remplacé par "Fruits" si l'utilisateur a sélectionné le rayon des Fruits; dans ce cas, la requête serait:
    "SELECT ProdId, Name, ProdImage, Price FROM EProduct WHERE DeptId='Fruits'" 

$DefineSql LISTPROD SELECT ProdId, Name, ProdImage, 
Price FROM EProduct WHERE DeptId='$DeptId$'
Revenons maintenant au HTML : 
<HTML>
<HEAD>
  <TITLE>List Products</TITLE>
</HEAD>

<BODY BGCOLOR=#ffffff>
<CENTER>
Maintenant, éxécutons la requête que nous avons définie: 

$ExecSql LISTPROD
Si la requête ne produit aucun résultat (s'il n'y a aucun produit dans le rayon), affichons "No Product Available" ("Aucun produit disponible") dans le navigateur du client: 


$IfNoResult LISTPROD

<h2>No Product Available</h2>
Sinon, affichons la liste des produits; d'abord, insérons un en-tête de tableau:

Product Name Price Add to cart 


$Else

<TABLE BORDER>
  <TR>
    <TD ALIGN="CENTER">
      <B><FONT SIZE=-1>Product Name</FONT></B>
    </TD>
    <TD ALIGN="CENTER">
      <B><FONT SIZE=-1>Price</FONT></B>
    </TD>
    <TD ALIGN="CENTER">
      <B><FONT SIZE=-1>Add to cart</FONT></B>
    </TD>
  </TR>
... ensuite, insérons une ligne de tableau pour chaque produit du rayon choisi:

Product 1 20.00 Add To Cart

Pour cela, nous utiliserons l'instruction ExperSHOP $LoopOnResults ... $EndLoop, pour boucler sur les tuples retournés par la requête sur la base de données: 


$LoopOnResults LISTPROD prod

<TR>
Cette instruction signifie que l'on boucle sur la requête LISTPROD en utilisant une variable appelée "prod" ("prod" est le nom que nous donnons au tuple de données obtenu à chaque itération).

Voyez le lien HTTP ci-dessous: si le client clique dessus, le servlet com.expershop.lite.ExperSHOP sera appelé, avec des paramètres lui donnant:

  • Toutes les informations internes nécessaires au bon fonctionnement d'ExperSHOP Lite: c'est ce qu'exprime la macro $COOKIE$.
  • La page à afficher (Page=ESDetail.tmpl, pour détailler le produit spécifié par le paramètre "ProdId").
  • Le paramètre "ProdId" est égal à $prod:ProdId$: cela veut dire égal à la valeur de la colonne "ProdId" dans le tuple courant (souvenez-vous que nous sommes en train de boucler sur les tuples résultats d'une requête à la base de données, et que nous avons nommé "prod" le tuple courant).
    Le séparateur entre le nom du tuple et le nom de la colonne est ":".
Le texte du lien est lui-même dynamique: $prod:Name$ est égal au nom du produit (la valeur de la colonne "Name" dans le tuple courant). 

<TD ALIGN=CENTER>
 <A HREF="com.expershop.lite.ExperSHOP?$COOKIE$&Page=
ESDetail.tmpl&ProdId=$prod:ProdId$">$prod:Name$</a>
</TD>
Maintenant, affichons le prix du produit: 

<TD ALIGN="CENTER">$(.00)prod:Price$</TD>
(.00) est un format d'affichage, qui signifie "2 chiffres après la virgule, avec 0 par défaut".

Affichons le lien "Add to cart" ("Ajouter au panier"): si le client clique dessus, le Servlet com.expershop.lite.ESCartServlet sera appelé, avec des paramètres lui donnant:

  • Toutes les informations internes nécessaires au bon fonctionnement d'ExperSHOP Lite: c'est ce qu'exprime la macro $COOKIE$.
  • La page à afficher (Page=ESViewCart.tmpl, pour détailler le contenu du panier d'achats).
  • L'action à effectuer, avant d'afficher quoi que ce soit: ici, l'action com.expershop.actions.ESAddToCart est appelée pour ajouter un article au panier d'achats (l'article est spécifié par le paramètre "ProdId", référence du produit). 
<TD ALIGN="CENTER">
  <FONT SIZE="-1">
  <A HREF="com.expershop.lite.ESCartServlet?$COOKIE$&Page=
ESViewCart.tmpl&Action=com.expershop.actions.ESAddToCart&ProdId=
$prod:ProdId$">
Add to cart</A>

  </FONT>
</TD>

</TR>


$EndLoop
Maintenant, la boucle sur les produits est terminée, fermons le tableau : 
</TABLE>
Le tableau ressemble à ceci :
Product Name Price Add to cart
Product 1 20.00 Add To Cart
Product 2 25.00 Add To Cart

L'instruction $EndIf marque la fin du groupe d'instructions $IfNoResult ... $Else ... $Endif: 


$Endif
Maintenant, terminons la page HTML: 

</BODY>
</HTML>