ExperShop DynHtml tutorial

Home Contents

Please email any bug reports, comments or suggestions to ExperLog's Online Support

DynHtml Statements

For a complete DynHtml statements quick reference, Click Here.

Tutorial

DynHtml is the way for ExperShop to publish database content in HTML pages:
The main work for a shop administrator who wants to customize a shop is writing and maintaining DynHtml pages.

In the ExperSHOP Lite sample shop, the DynHtml pages are in the ExperSHOP/ESRootDir/ESTemplates/Shop directory: just have a look there.

This tutorial details a DynHtml example, step by step.

Listing products by department

The DynHtml page detailed here displays the list of all products in a given shop department. The output looks like this:

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

Now, let's have a look at the DynHtml source code expanded by ExperSHOP to generate this output.

DynHtml source

DynHtml is a blend of HTML and ExperSHOP statements, interpreted and expanded at run time.
Look at the source: you can find HTML tags, and statements like $ExecSql, $LoopOnResults ... $EndLoop, etc...

These statements allow to query the database, and include the query results in the generated HTML page.
The next chapter details all the statements and specific tags in the DynHtml page. 


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

How it works

Let's have a look, step by step, at the DynHtml code:

First, we define an SQL query to list the products contained in a shop department; ExperSHOP's $DefineSql statement will be used for that:

  • The query will retrieve the "ProdId", "Name", "ProdImage" and "Price" fields from the "EProduct" database table, for all the products that belong to a given department.
  • $DeptId$ will be expanded, according to the value of the "DeptId" HTTP parameter supposed to come from a previous HTML page.
    For example, it could be "Vegetables" if the user clicked a link to the Vegetables department, then the query would be:
    "SELECT ProdId, Name, ProdImage, Price FROM EProduct
    WHERE DeptId='Vegetables'" 

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

<BODY BGCOLOR=#ffffff>
<CENTER>
Now, let's execute the query we defined before: 

$ExecSql LISTPROD
If there was no result (if there's no product in the department), display "No Product Available" in the customer's browser: 


$IfNoResult LISTPROD

<h2>No Product Available</h2>
Else, display the product list; first, let's display a table header, that looks like this :

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>
... then, a table line for each product in the department, that looks like this:

Product 1 20.00 Add To Cart

For that, we'll use ExperSHOP's $LoopOnResults ... $EndLoop statements,
to loop on the tuples returned by the database query: 


$LoopOnResults LISTPROD prod

<TR>
That statement means we loop on the LISTPROD query results using a variable named "prod" ("prod" is the name we assign to the data tuple).

See the link above: if the customer clicks it, the com.expershop.lite.ExperSHOP servlet will be invoked, with parameters that tell it:

  • All the internal information necessary for ExperSHOP Lite: this is expressed by the $COOKIE$ macro.
  • Which page to display (Page=ESDetail.tmpl, to detail the product specified by the ProdId parameter)
  • The ProdId parameter is equal to $prod:ProdId$: this means the value of the "ProdId" column in the current data tuple (remember we're in a loop on a query result, and prod is the tuple's name).
    The separator between the tuple name and the column name is ":".
The link text itself is dynamic: $prod:Name$ is the product name (the value of the "Name" column in the current database tuple). 

<TD ALIGN=CENTER>
 <A HREF="com.expershop.lite.ExperSHOP?$COOKIE$&Page=
ESDetail.tmpl&ProdId=$prod:ProdId$">
   $prod:Name$</a>
</TD>
Now, display the product's price: 

<TD ALIGN="CENTER">$(.00)prod:Price$</TD>
(.00) is a format directive, that tells the value should be displayed with 2 decimal digits, with default values of "0" (for instance, 20.123 will be displayed as 20.12, and 20.1 as 20.10).

Display the "Add to cart" link: if the customer clicks it, the com.expershop.lite.ESCartServlet servlet will be invoked, with parameters that tell it:

  • All the internal information necessary for ExperSHOP Lite: this is expressed by the $COOKIE$ macro.
  • Which page to display (Page=ESViewCart.tmpl, to view the shopping cart content).
  • Which action to perform, before displaying anything: here, the com.expershop.actions.ESAddToCart action is invoked to add an item to the shopping cart (the item is specified by the "ProdId" parameter). 
<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
Now the loop on the products list is ended, let's end with the table: 
</TABLE>
The table we displayed looks like this:
Product Name Price Add to cart
Product 1 20.00 Add To Cart
Product 2 25.00 Add To Cart

The $EndIf statement marks the end of the $IfNoResult ... $Else ... $Endif statement: 


$Endif
Now, it's the end of the HTML page: 

</BODY>
</HTML>