Development

4th Dimension Standard Edition | 4D Developer Edition | 4D Server Standard Edition | 4D Server Developer Edition | 4D Web 2.0 Pack

Deployment

4D Deployment Options | 4D Runtime Volume | 4D Server Application | 4D Web Server 4D Web Services Server

Solution Accelerators

4D Meetings

Customise 4D Business Kit To Fit Your Needs

Creating Customised Dynamic store Front Pages
Technical Note 02-24

About this Tech Note

Since we will go through the details of creating dynamic web pages from scratch, this tech note is designed for those who have some knowledge of HTML. You have the option of using either a text editor or web page creation software such as Adobe GoLive or Macromedia Dreamweaver. You should have an understanding of the concepts behind programming. If you have not already done so, we recommend getting familiar with the 4D Business Kit Language Reference and Quick Start guides.

4D Business Kit allows you multiple ways of creating your site. You may opt to use the wizard and the included templates, you may create your own templates, you may edit and Customise the templates for your own individual needs and lastly, you can build it all from the ground up without the templates. This tech note will focus on the last option. We will build a site from scratch. We will call our store "DEMO" and the theme will be based on an ice cream cake store. To proceed with this tech note, you should have a copy of 4D Business Kit 1.0 or higher, the zipped file included with this tech note and the 4D Business Kit Language Reference and Quick Start guides. All the HTML files discussed below is include with this tech note and can be found in the zipped file. To take full advantage of this tech note, you may consider setting up a Verisign PayFlowPro test account to experience the merchant account integration capabilities of 4D Business Kit.

By the end of this tech note, you should be more comfortable working in the 4D Business Kit environment and well on your way to creating fully functional dynamic web pages.

Creating Your Store

Launch 4D Business Kit. From the "File" menu, select "New" to open up this dialog box:

Select "Manually". The store management window appears:

For this demonstration, we will only fill in the values for "Code" and "Label". Enter "DEMO" for Code and "Delicious Ice Cream Cakes" for Label. Click "Save". Once you have saved the new store information, a folder called "Demo_Site" will be created in the same directory as your 4D Business Kit application. Place the included files into this directory.

The "Data.txt" file is our data file containing all items we wish to import into our store. Information in this file is formatted and tab delimited. There are 10 items for import in this file. You can edit this file directly to add any additional information or products. You may also import this file into an excel spreadsheet to modify the contents. We encourage you to take a look at the contents of this file, so that you can learn how to create your own data files for your future store. In this demonstration, the "Data.txt" file will be imported as store items into our DEMO store.

The "Pictures" folder contains pictures of the products we will import into the store. There are 10 pictures in this folder. During import, 4D Business Kit will create thumbnails and icons of each picture and copies them into the "Views" subfolder of the "DEMO_Site" folder. So this folder is no longer necessary after importing data items.

The "WebMediaUS" folder contains the graphics that will be used on our site. The pages we will create will use the graphics contained in this folder.

Importing DEMO Store Items

Click on "Items…" in the "Data" menu. A window containing all the Items will pop up. Now, click on "Import" in the "File" menu:

Select the "Data.txt" file from the "DEMO_Site" folder and click on continue. The next page shows a structure outline of the data model that will be imported.

Click on continue to proceed. The next page will ask which store do you want to import the data into. Select "Demo". Click on continue. Page four asks for input on the picture size in pixels and compression rate. Accept all the default values and click continue.

The last page describes what is being imported and where. Click on Import and confirm the import. A dialog box will appear to show the status of the import:

In the Items window of your 4D Business Kit application, you should be able to see the newly imported items of your DEMO store. If not, then click on the store icon in the upper left hand corner of the Items window and select "Filter on DEMO (Delicious Ice Cream Cakes)".

What you have essentially done is created your own data model for the DEMO store, and imported items into your store in the form of this data model.

Creating Your Site

4D Business Kit is a high level language that is used to manipulate data in the database. It is embedded within HTML code to allow browsers to display contents of the database. This in essence is what makes a web site dynamic. As the data in the database changes, the contents on your site changes. Once the 4D Business Kit commands are inserted into your HTML pages, they interact with the store data whenever the pages are loaded. All 4D Business Kit tags starts with: "<!—4DBK" and ends with "-->".

We are now ready to Customise the external features of our store, namely the web interface pages. Each manually created store will contain default pages that allow you to view contents of your store. The pages included are: admin.htm, detail.htm, home.htm and list.htm. You should take a look at these pages by opening a browser window and type in your IP address as the URL, and select "DEMO". If you don't know your IP address, you can find out by clicking on "General Information…" of the "Tools" menu in 4D Business Kit. Click on the hypertext links to see where it will take you. You will notice that the data we have just imported show up on the list.htm and detail.htm pages. We will edit these pages and add others to define our store. A flow chart for the pages we will create is below.

Home.htm

Lets start with the home.htm page. Open your HTML editor and open the home.htm file from the 4DBK\Demo_Site\WebPagesUS directory on your computer. To be able to connect to the admin.htm page, just edit the home.htm page by adding this line:

<a href="admin.htm">Admin</a>

For simplicity, we've placed it right before the body metatag at the bottom of the page.

Save the file, and view it with your browser. You may have to refresh the page for the changes to take effect. Remember, a default username and password is created for the remote admin from the web when we created our DEMO store. It will be required for you to access the admin.htm page. The default username is "adm" and the password is "poweruser". Note: you should change these values for your actual store.

The first page we will work on is the home.htm page. This is the page the user will be brought to when he/she enters your store. So the first thing we would recommend doing is to find on the home.htm page this tag:

This tag tells 4D Business Kit that this page and all subsequent commands belong to the DEMO store. We should move this tag to the beginning of the page so that all subsequent commands will be recognised. Note: if a 4D Business Kit command appears in the browser before the store has been set by the 4DBKStoreSet command, your browser will give you the following error:

This error indicates that it does not know which store the command should execute from.

Find this command and move it to the beginning of your page, after the <html> and before the<head> tags. When a page is sent to the server, we want 4D Business Kit to know what store it is dealing with right from the beginning. Now we want to change the title of the window from "DEMO home page" to the label that we gave to our store when we first created the store. The command for the label is:

Put this command in place of what is in between the <title> and the </title> tags. Next we will add a background and a new logo to our store. A couple of lines down, find the <body…. tag and insert this line inside the tag.

background="../WebMediaUS/background.jpg"

Also, a couple of lines down, change the "logo.gif" to "4DICS_logo_anim.gif". Save the file, and view it with your browser. You will notice that your store is now a little more personalized, with changes to the title, logo and background of the site.

Let us now add some searching functions to the page. For our DEMO store, we have two attributes for searching on, and they are flavors of ice cream and category. We will need to add in a few lines of code. Delete the highlighted lines of code:

We will place these lines of code in the place of the code we have just deleted:

In the first 5 lines above, we are simply designating a table of 1 row and 4 columns to format how our page shall look. The next 10 lines or so, specify a drop down menu and what action to take when a value from the menu is chosen.

location='4DBKExecute:4DBKStoreSet/DEMO;4DBKSelectionSet/1;
4DBKCursorSet/1;4DBKQuerySet/L01=
'+this.options[this.selectedindex].value+';4DBKGo/list.htm';"

The string of commands above will execute and load the page list.htm with the searched criteria, when the user selects from the drop down menu. Note: the command 4DBKStoreSet command is used again because the execution of a command, or set of commands must belong to a store.

The drop down menu in this case is created using the 4DBKMenu command. First, we obtain all items and assign it to a set. Then we filter out the distinct values of L01, which is our category field, and create a menu based on those distinct values. If the 4DBKSelectionDistinct command was left out, our drop down menu would have a value from every item in the database that has a category field, it would no longer be distinct.

<option value="">Category</option>

The last third of the page is for another drop down menu selection. Although quite similar to the first menu, the core code is very specific to this type of searches. The format of the form is the same, executing a string of commands and loading the home.htm page with the new searched criteria. This time the drop down menu is not created using the 4DBKMenu command, rather it is created with a variant of the "for" loop command involving the multiple data values we used in our data model, it's variable name is M01. For as many distinct values of M01, an option is created in the drop down menu. That option is associated with the particular value of M01 for that iteration of the loop.

<option value="">Your Favorite Flavor...</option>

<option value="">
</option>

The difference between the first menu and the second is the way we created the menu values. The commands 4DBKSelectionDistinct and 4DBKMenu does not work with multiple data values (M01-M05), thus we have to implement a loop structure to substitute for what 4DBKMenu did. The 4DBKStoreMultiple command will filter the distinct values out, so we do not have to worry about it in this case.

Immediately after the closure of the table containing our menus, we might want to add in a welcome message, and the current date. This line will do the trick:

<img src="../WebMediaUS/date.jpg">  Welcome!

Our goal now is to have the items in our store displayed on the page. This sequence will allow us to do just that. First, we will delete the highlighted set of code and replace it with our own set of codes:

Add in these lines of code to create a table, which will position the picture, name, description and price of the cakes we are going to sell.

The next step after we defined the table is to wrap html code around the 4D Business Kit tags. This means we want to create a row with four columns, one row for each item we have in the database. After setting the selection and querying the database for all records, we loop through all the records starting at record number one. From here, we will embed html code within the 4DBKLoop tag. This means that for every record that the loop executes, code in between the 4DBKLoop and 4DBKEndLoop tags, will be displayed.

<tr height="40">
//Comment: creating a new row

The first column, we display a thumbnail image of the item as a link to detail.htm with the information of that item in the link.

The "4DBKDetailSet/!4DBKField/C01" command sets the record (in this case the C01 field) whose detail page should be displayed. The next command "4DBKGo/detail.htm", will take the record that had been set, and pass that information onto the detail.htm page.

The second column, we display the name of the item as a link to detail.htm also, with the information of that item in the link. This is basically the same code for the thumbnail.

The third column, we display the data within the multiple data field. A nested loop is implemented to extract each of the individual data out.

The last column, we display the price of the item. The code will test to see if the item is on sale. If so, the sale price will be displayed and a sign will be displayed on the page alerting the shopper to the sale.

<td width="100" height="40" bgcolor="#8A2BE2"><img src="../WebMediaUS/promoblink.gif" width="30" height="15" border="0" name="Promotion" alt="Promotion"> </td></tr>
//Comment: to close out the row

Go ahead and update any of the items in the DEMO store database to see the price change. From the main menu bar, select "Data" and then "Items…". Filter on the DEMO store, and double click any item. Under the "Price" menu insert a price for the "Special Offer" and check the "Special Offer" checkbox. Save the item and refresh your browser.

The last two 4D Business Kit tags, increments to the next record in the set, if there are no more records to display, the loop terminates.

List.htm

This page is essentially the same as the home.htm. The reason being, we want the search through the menus with only those items that satisfies the search criteria to end up back in the list format. The one difference between these two pages is a single line of code. The "" command sets the current selection to all the items in the database. The user is only interested in the items he/she is searching for. Thus, this line is in home.htm and not in list.htm.

//Comment: this line is not in list.htm

At this point, you can make a copy of home.htm, edit to remove the above line and save it as list.htm, overwriting the original list.htm that was created with the store. Open up your browser, and go to your DEMO store site. Select from the drop down menus and see the results of your current selection.

Detail.htm

When the shopper arrives at this page, they are either looking for more information about a specific product, or would like to make a purchase. This is the page that will present the product information as well as the option to add to a "shopping cart" or "basket" and allows the user to proceed with check out. The design of the page will be constant with what was generated, however, we will add many lines of code to add more features and enhance the look, feel and functionality of this page.

The beginning of the page is the same as home.htm. We set the store name, add the title of the store to the title section of the page, add in the background and add in the store logo, all in the same place as we did with the home.htm page. Scroll down to find the row displaying the price of the item.

Replace the line of code above with these lines below:

SPECIAL Sale Only!
<!-#4DBKEndif-->

Again, this is the same as with home.htm, because we want to show the sale price if an item is indeed on sale. Immediately after the closure of the row containing the price of the item, we create another row or set of rows describing the multiple data field.

<tr>
<th bgcolor="silver" colspan="2">Flavors</th>
</tr>

<tr>
<th colspan="2">
 </th>
</tr>

This will conclude the table containing information about the item. The next few lines we will add a button in the form of a picture to represent our "shopping cart". I've decided to use a JavaScript function involving a popup window to display the contents of our cart (discussed below). The two-highlighted section describes the set up of the "shopping cart" button and the JavaScript used to call the cart.htm page. The key is in this line, where quantity (4DBKQuantitySet/+1) of the basket for the particular item (!4DBKField/Code) is incremented by one :

onClick="topWindow('4DBKExecute:4DBKStoreSet/DEMO;
4DBKQuantitySet/+1;4DBKBasketSet/!4DBKField/code;
4DBKGo/cart.htm

After the JavaScript script, we add entries for customer verification Information. Here, the user can use their email address and password. If they are returning customer, the information will be extracted from 4D Business Kit and a confirmation page will be sent to the user's browser. If they are new customers, an enrollment page will be sent. The code used for this verification process is: 4DBKCustomerLogin.

4DBKCustomerLogin accepts 4 arguments. It accepts the customer code, customer password, an html page to go if successful, and a page redirected to if unsuccessful. 4D Business Kit will test the first two arguments of 4DBKCustomerLogin to see if they match any information in the store's customer database. If the information match, then the server will send the page of the third argument to the customer's browser. If no match occurs, the customer is redirected to the page of the fourth argument. How this information is handled is up to the web developer. 4D Business Kit allows the web developer to test for the condition returned by 4DBKCustomerLogin by using the command 4DBKField/ErrorCode. Based on this result, the web pages can be formatted to display the relevant information to the customer.

Cart.htm

This page is displayed via a small popup window. The information contained on this page is the contents of the user's "shopping cart". In this respect, the 4DBKSelection we will be working with will be 4DBKSelectionSet/B or the Basket selection. The page will contain a table with four columns. The first column will hold the links and icons for incrementing and decrementing the items in the basket, the second column will display the quantity of the items currently in the basket. The third column will display the item name and the last column will hold the current price of the item.

The first highlighted section, the selection set is set to the basket and we sort the items in the basket by name. Now, for each item in the basket, we will execute a loop that will proceed through every item and display information about those items.

//Comment: Selection is the basket

//Comment: Set the sorting criteria

//Comment: Sort based on sorting criteria

//Comment: set to the first record in basket

//Comment: Start of loop

//Comment: Condition statement

The next couple of statements will allow the shopper to either increment the contents of a specific item, or decrement it. By combining the 4DBKQuantitySet and 4DBKBasketSet commands, we can regulate how many of an item we add into or take away from our basket.

The last couple of statements extract the total quantity in the basket, the name of the item, and price information. If an item is currently on sale, the sale price will be calculated instead of the regular price.

//Comment: Quantity of each distinct item

//Comment: Name in a particular format

//Comment: Sum price of distinct itme

//Comment: Subtotal

Note: the last line above is only a subtotal of all items in the basket with tax but no shipping applied to it. For price with tax and shipping calculated together, use the foolowing tag:

Also, any tag with "INV" attached to the end of it already has tax calculated into the price. Those tags with "EXT" at the end reflect prices that have no tax applied to it.

Finally, we display a total amount of what is in the basket before taxes and shipping.

Note, this is not shown in the picture of the coding above. Here is a picture of what the "shopping cart" for our DEMO Store will look like.

Identity.htm

Using the 4DBKCustomerLogin command, this page is the fourth and last argument accepted. This is the page that will be displayed when the customer information entered does not match that of the store's customer database. This is where the new customer can enter in his or her information to be stored in the store's customer database. As WEmentioned earlier, you may use this page to process the 4DBKField/ErrorCode result. If for example, the customer code matched, but the password does not, you can ask the customer to re-enter the password, or to notify the customer if he or she did not enter a password and/or customer code. Processing the different result is left to the individual storeowner or web developer.

The first half of the page is actually dedicated to a couple of JavaScript functions. I've implemented the first function to make sure the customer has entered all necessary information before proceeding on to the next page. The second function will encode a long list of 4D Business Kit commands, after the customer has entered in all relevant information, into an URL and request the web server to send the confirmation.htm page to the customer's browser.

The last half of Identity.htm, I've set up input fields for storing the data customers will enter. This is a relatively easy, in terms of not a whole lot of coding, just a lot of HTML.

After the user clicks on the "OK" button, or presses enter using the keyboard, the information he or she has entered will be encoded into a string command involving 4DBKFieldSet, whereby creating a new customer entry in the store's customer database. As stated earlier, this list of commands is packaged in the URL along with a 4DBKGO command to be processed by the 4D Business Kit server. After the request has been processed, the server then returns the requested page, confirmation.htm. A Javascript function "checkcustomerform()" is assigned to the "onsubmit" attribute of the form element we used to accept customer information input. This is to safeguard any errors that may occur during information input.

Confirmation.htm

Before an order is accepted, it is customary for the retailer to display customer information as well as the customers order information. After the customer and order information is displayed, the customer is presented with a payment option, usually via credit card. That is what confirmation.htm does. After the usual store information (such as background, store name, 4DBKStoreSet command and the store logo), a table is created to will hold the customer's name and shipping address. This is the same information that the customer had just entered in the previous page. This also confirms that a new customer has been successfully created. This is the second section that is highlighted in the picture below.

At this point, it might be necessary for us to create some shipping options for our DEMO store. Under the "Data" menu, select "Shipping Options…" and create a couple shipping options where the "shipping calculation is based on the number" and assign it to the DEMO store. You may input any dollar amount as you wish, this is just for demonstration purposes. Once we have the shipping options available, the last highlighted section details how we can extract that information and incorporate it to our web site. The drop down menu created will hold the shipping options available to the customer, depending on his shipping address. This is done automatically by 4DBK.

Note: Not all of the shipping options will be available for each customer. The restriction is the shipping address. For example, options for shipping to New York is not applicable for shipping to California.

<option value="" selected>Choose a shipping method</option>


<option value="" selected>
:
</option>

<option value="">
:
</option>

The above snippet of code is similar to the second drop down menu we created for the home.htm page.

The next part of the page is not shown because it is essentially the same as cart.htm. We are basically displaying the contents of the basket. The next section, we tally up the subtotal, shipping charge, and arrive at a grand total.

The last third of confirmation.htm consists of a few lines of condition statements followed by a table of pictures, which forms a picture of a credit card. This credit card picture acts as the form for receiving information from the customer, namely their credit card information.

Basically the idea here is that if the basket is not empty, the shipping has been selected and a customer has been defined, go ahead and display options for the user to continue and conclude this order. On the other hand, if any of the three conditions is false, then the customer cannot proceed. The credit card number that the customer entered is checked for errors such as input length via the "checkpaymentform()" Javascript function in the "onsubmit" attribute of the html input form. The "checkpaymentform()" function also contains a call to the "CheckCard()" function located in one of the imported library files. This function will check the validity of the numbers entered. It does not check if the card is actually active, it just checks the input string to determine if the values entered are with in the range of a set of numbers issued by the actual credit card company. If everything seems well, the "onaction" attribute of the input form calls another Javascript function, "ValidateOrder()", which will encode a string of 4DBK commands into the URL.

The code in the picture below closes out the form with an "OK" button and the appropriate end-if statements.

The picture below displays the confirmation.html page viewed through a browser.

The "OrderValidate" Javascript function will utilise a script written to format and send a request to Verisign's PayFlowPro network to authenticate and process the credit card. This service is only available for the Windows platform. You must have an account to with Verisign to use this script. If you do not have an account, we recommend signing up for a PayFlowPro test account.

Once the customer presses the "OK" button the customer's credit card information is then sent to Verisign. The result from Verisign is then processed within the Final.htm page.

Final.htm

The name of this file speaks for itself. This is the last page a customer will see when they complete the order.

This page has only a few lines of relevant code. First, we want to know if the credit card was accepted or declined. The line:

tests for the credit card processing code returned from Verisign. If the value of this variable is "0", then the card has been accepted. All other values in our case represent a decline for whatever reasons. If the variable is indeed "0", then we will use the 4DBKOrderValidate command to secure the order in our database. If the variable returned is anything other than "0", then, we provide a message telling the customer the status of the transaction and ask them to go back and enter in a new number.

We want the credit card authorisation to go through before submitting an order. Once the transaction is approved, 4D Business Kit can proceed with the order. The 4DBKOrderValidate command will create an order in the store's order database using the information found in the basket, the user information and the shipping information. It will also clear the basket.

To display an order number for the customer to refer to if they need to contact you via phone or email, insert the command:

After every 4DBKOrderValidate command, an order number is automatically generated.

Congratulations, you have just created your own e-commerce website with 4DBK.

Conclusion

I've purposefully kept this project as simple as possible for demonstration purpose only. The limits of producing a more complex or more creative e-commerce solution are only hindered by your creativity. Knowing that, this tech note offers a solid foundation from which to build upon. The pages I've created are included in the zipped file. Feel free to modify the code in these pages and use them to enhance your own pages.

Summary

With 4D Business Kit, you can develop dynamic sites professionally for commercial or non-commercial uses for the Internet or Intranet. This technical note explains how to create dynamic pages with 4D Business Kit and walks you through the creation of an example.

Extra

Minimum System

Windows
Pentium II minimum
800 X 600 monitor resolution
Windows 2000, Windows XP.
256 MB RAM minimum

MacOS:
G3 or better processor
800 X 600 monitor resolution
Mac OS X v10.2.8 or later
256 MB RAM minimum

When the solution matters

International Sites

Product Lines

Solutions

Corporate

Support

Purchase