eBusiness Business Promotion Buying Products Purching Products Exercises

Session 8: Web shop

e-business

One of the most talked about web applications is e-shop, e-business or e-commerce . Complete commercial systems are available from the shelf, new web shops have emerged and many have disappeared. Great expectations obviously exist for the future of web shops. These application also demonstrate a number of web application aspects.

In this session we discuss and demonstrate some of the basic principles for a web shop . The example is a web shop, which are selling the web scripts we have introduced in this course. As all the other examples, our web shop application is not complete, and can be improved in many ways.

The essential templates of the application are discussed below. Some trivial templates as conditions.cfm , shipping.cfm , support.cfm and about.cfm are demonstrated in the running example available at the end of this session, but are not discussed below. It is recommended that you make yourself acquainted with the example before you start studying the templates in detail.

Business promotion

Operating a web shop requires product promotion , i.e. dissemination of information about the products offered, prices, sales conditions, shipping, information about the company and its addresses. In addition to distribution of information by huge lists of e-mail addresses and advertisements, a web shop must have a home page with links to required information and provide the possibility to order/buy products online. In our example, Software Shop has a home page generated by the template index.cfm . This homepage, Figure 1 , will serve as an introduction to this application.

In a fancy commercial application, the home page template should probably contain icons , flash or applet driven animation , etc. The main focus in our example is, however, the dynamics aspects. On the introductory page, a menu with links provides a list of the services offered to the customers. The example concentrates on products, orders and sales . On the Introductory page, the links to products.cfm and information templates are on Lines 5. - 9.:

1. <!--- index.cfm --->

2. <h1><font color="Blue">Welcome to the Software Shop</font></h1>

3. <p>The Software Shop has an exclusive suite of software for small companies. We have well satisfied customers and would be glad to see you among them. Please study out list of Product and if you fin any item of interest, click for more details and price. You can buy the product safely on the net and the merchandise will be shipped to you according to the alternative you prefer.</p>

4. <ul>

5. <li><a href="products.cfm">Products</a></li>

6. <li><a href="conditions.cfm">Sales conditions</a></li>

7. <li><a href="shipping.cfm">Shipping</a></li>

8. <li><a href="support.cfm">Support</a></li>

9. <li><a href="about.cfm">About Software Shop</a></li>

10. </ul>

Except for the links, this page is of minimal interest in the context of dynamic web applications.

The product.cfm template generates a table with a row for each product. The template is a straight forward demonstration of the HTML table tag features.

1. <!--- products.cfm --->

2. <h1><font color="Blue">Products</font></h1>

3. <p>Our products cover web ColdFusion scripts. They all require a web server and a

4. ColdFusion application interface installed:</p>

5. <h3>Product list</h3>

6. <table border="2" cellpadding="10" cellspacing="10">

7. <th>

8. <tr><td><b>Product name</b>:</td><td><b>Demonstration</b>:</td>

9. <td><b>Price</b>:</td></tr></th>

10. <tr><td>Market research</td><td><a href="../omarket_research/">Demo</a></td><td>$ 150,00</td></tr>

11. <tr><td>Opinion polls</td><td><a href="../opinion_polls/">Demo</a></td><td>$ 150,00</td></tr>

12. <tr><td>Perception investigation</td><td><a href="../perception/">Demo</a></td><td>$ 300,00</td></tr>

13. <tr><td>Search engine</td><td><a href="../search_engine/">Demo</a></td><td>$ 200,00</td></tr>

14. <tr><td>Net course </td><td><a href="../course/">Demo</a></td><td>$ 350,00</td></tr>

15. <tr><td>Shop</td><td><a href="../shop/">Demo</a></td><td>$ 250,00</td></tr>

16. </table>

17. <p>Do you want to order? <a href="form.cfm">Yes</a>/<a href="index.cfm">No</a></p>

Figure 2 shows the table generated . Each product is listed with the possibility to get an online demo of the product. The table also informs the customers about the prices and has a link to ordering .

Buying products

Buying products is taken care of by the form.cfm template which generates the form ( Figure 3 ) by which necessary data about the customer are collected:

1. <!--- form.cfm --->

2. <h1><font color="Blue">customer form</font></h1>

3. <p>If you are a new customer, please give the information necessary to send the products you buy to you:</p>

4. <table cellpadding="10">

5. <form action="customers.cfm" >

6. <tr><td>First name: </td><td><input type="text" name="first_name"></td></tr>

7. <tr><td>Last name: </td><td><input type="text" name="last_name"></td></tr>

8. <tr><td>Street: </td><td><input type="text" name="Street"></td></tr>

9. <tr><td>City: </td><td><input type="text" name="City"></td></tr>

10. <tr><td>State: </td><td><input type="text" name="State"></td></tr>

11. <tr><td>Country: </td><td><input type="text" name="Country"></td></tr>

12. <tr><td>Zip no.: </td><td><input type="text" name="zip"></td></tr>

13. <tr><td>e-mail:</td><td><input type="text" name="submitted_email"></td></tr>

14. <input type="hidden" name="sswitch" value="0">

15. <tr><td><td><td><input type="submit" value="Name and adress"></td></tr>

16. </table>

17. </form>

18. <p></p>

19. <p>If you have previously bought products from us, please type your</p>

20. <table cellpadding="10"></table>

21. <form action="customers.cfm" >

22. <tr><td>e-mail address: </td><td><input type="text" name="submitted_email"></td></tr>

23. <input type="hidden" name="sswitch" value="1">

24. <tr><td></td><td><input type="submit" value="e-mail address"></td></tr>

25. </form>

The HTML FORM-/FORM tags for new customers extend on Lines 5-17 and collect name and address . Another form block on Lines 21. - 25. for 'old' customers collects only the e-mail address. The application must be able to 'remember' the data provided, and to check the e-mail address and retrieve the information when a customer responds as an 'old' customer. To distinguish which of the two blocks is submitted, a 'hidden' variable SSWITCH   (the double ss is used to avoid confusion with the reserved word SWITCH ) is used with value " 0 " set in Line 14 if the customer is a new, and " 1 " set in Line 23 if he/she is an 'old'. Both blocks call on the template customer.cfm when submitted.

Before we proceed to the custommer.cfm template, we describe a database table , customers , which has to be defined in the #session.datasource#. . The table must have the columns:

• First_Name
• Last_name
• Street
• City
• State
• Country
• Zip
• Email

All variables are defined as text variables.

The customer.cfm template has 3 tasks.

• update the database table customers with the data about the customer if he is 'new (Lines 3. -5.),
• retrieve customer data from the database for display if he is an 'old' customer (Lines 7. -9.)
• display recorded custommer data for the client.

1. <!--- customer.cfm --->

2. <cfif #sswitch# EQ "0">

3. <cfquery datasource="#session.dat5asource#" name="add">

4. INSERT INTO customers(first_name,last_name,street,city,state,country, zip, email) VALUES ('#first_name#','#last_name#','#street#','#city#','#state#','#country#','#zip#','#submitted_email#')

5. </cfquery>

6. </cfif>

7. <cfquery datasource="#session.datasource#" name="retrieve">

8. SELECT customer_id,first_name,last_name,street,city,state,country,zip,email FROM customers WHERE email='#submitted_email#'

9. </cfquery>

10. <p>You are recorded with the following data:</p>

11. <cfoutput query="retrieve">

12. <table>

13. <tr><td>First name:</td><td>#first_name#</td></tr>

14. <tr><td>Last name: </td><td>#last_name#</td></tr>

15. <tr><td>Street: </td><td>#street#</td></tr>

16. <tr><td>City:</td><td>#city#</td></tr>

17. <tr><td>State:</td><td>#state#</td></tr>

18. <tr><td>Country:</td><td>#country#</td></tr>

19. <tr><td>Zip:</td><td>#zip#</td></tr>

20. </table>

21 </cfoutput>

22. <cfset session.customer_id=#retrieve.email#>

23. <p>Are the above data correct? <a href="order.cfm">Yes</a>/<a href="form.cfm">No</a></p>

In Line 2 a CFIF tag checks if the data received concern a new customer. If so, CFQUERY tag for the datasource #session.datasource# followed by an SQL INSERT INTO table customers , inserts the submitted data.

Both new and old customers forms are then processed according to Lines 7-23. A CFQUERY tag block in Lines 7-9 named "retrieve" with a SELECT from table customers the row WHERE email='#submitted_email#' . Usually only one row is retrieved, but if the customer has submitted data as 'new' customer twice or more, there can be more than one record.

By means of a CFOUTPUT block referring to the QUERY="retrieve" in Lines 11-21, one or more sets of data for the e-mail address submitted is displayed ( Figure 4 ). Finally, if the customer accepts the displayed data, the control is transferred to template order.cfm . Note that #email# is used as customer identification.

This template presents the form for buying items with boxes to check for the different products. The template contains a set of multiple inputs ( Figure 5 ). The values of the checked items are saved in a shopping list named order :

1. <!--- order.cfm --->

2. <cfset order="">

3. <h1><font color="Blue">Order</font></h1>

4. <p>Please, mark the items you want to buy:</p>

5. <form action="sum.cfm" method="post" >

6. <p><input type="checkbox" name="order" value="150">Market research - $150.00</p>

7. <p><input type="checkbox" name="order" value="150">Opinion poll - $150.00</p>

8. <p><input type="checkbox" name="order" value="300">Perception investigation - $300.00</p>

9. <p><input type="checkbox" name="order" value="200">Search engine - $200.00</p>

10. <p><input type="checkbox" name="order" value="350">Net course - $350.00</p>

11. <p><input type="checkbox" name="order" value="250">Shop - $250</p>

12. <p><input type="checkbox" name="order" value="150">Web agent - $150.00</p>

13. </select>

14. <p><input type="submit" value="Order"></p>

15. </form>

When the above form is submitted, the control is left to the sum.cfm template below. Here are several new CFML features introduced. In Line 3, an one-dimensional array of items , is defined. In ColdFusion arrays can be defined with up to 3 dimensions.One great advantage with CFMX arrays is that the size (number of rows and columns) is not required specified, but is determined dynamically. In Line 4, the shopping list from the form is transferred to the array by means of the function ListToArray(order) . The reason is that an array can be manipulated more conveniently than a list.

In a CFOUPUT block in Lines 5-9, the value of the variable total is computed in a CFLOOP .

1. <!--- sum.cfm --->

2. <cfset total="0">

3. <cfset items=ArrayNew(1)>

4. <cfset items=ListToArray(order)>

5. <cfoutput>

6. <cfloop from="1" index="count" to="#ListLen(order)#">

7. <p><cfset total=#items[count]#+#total#></p>

8. </cfloop>

9. </cfoutput>

10. <cfoutput>You have ordered products for $#total#.</cfoutput>

11. <cfset session.total=#total#>

12. <p>Please return your creditcard information:</p>

13. <cfform action="sale.cfm">

14. <p>Card type:</p>

15. <p><input type="radio" name="card_type" value="VISA">VISA</p>

16. <p><input type="radio" name="card_type" value="Mastercard">MASTERCARD</p>

17. <p><input type="radio" name="card_type" value="Ammerican Express">AMERICAN EXPRESS</p>

18. <p></p>

19. <p>Card number:<cfinput type="text" validate="creditcard" name="card_no"></p><p>

20. </p>Expire date: <input type="text" name="expire_date">

21. <p><input type="submit" value="Submit order"></p>

22. </cfform>

The remaining of the template specify a form for the customer to specify credit card type, number and expire date ( Figure 6 ). In Line 13, the tag CFFORM is used to be able to check the credit card number. The attribute VALIDATE with value "creditcard" checks that the credit card number is a formally correct number (but unfortunately not for validity!).

Purchasing products

We shall need a second database table , Sales , which must be defined with the following 3 columns:

• custommer_id
• total
• ddate

We assume that all are specified as text type.

Submitting the shopping list and the credit card information establish a purchase . The task of the template sales.cfm is to process the purchase. The date of the purchase is determined in Line 2 by using the value of the function DateFormat(Now()) , and the transaction including customer identification, total value of the transaction and the date is booked in the datasource #session.datasource# by a CFQUERY tag with the sql INSERT INTO .

1. <!--- sale.cfm --->

2. <cfset ddate=#DateFormat(Now())#>

3. <cfquery name="sales" datasource="#session.datasource#">

4. INSERT INTO sales(customer_id,total,ddate) VALUES(#session.customer_id#, '#session.total#', '#ddate#')

5. </cfquery>

6. <cfoutput>

7. <p>Sales for customer no. #session.customer_id# has been processed.</p>

8. </cfoutput>

9. <p>Print out a <a href="receipt.cfm">receipt</a>.</p>

The template sends a message that the transaction has been processed, and offers a printout of a receipt:

1. <!--- receipt.cfm --->

2. <cfquery datasource="#session.datasource#" name="receipt">

3. SELECT first_name,last_name, street, city,state,country, zip FROM customers WHERE customer_id = '#session.customer_id#'

4. </cfquery>

5. <h1><font color="Blue">Software Shop</font></h1>

6. <cfoutput query="receipt">

7. <p><b>#first_name# #last_name#</b></p>

8. <p><b>#Street#</b></p>

9. <p><b>#City#</b></p>

10. <p><b>#State#</b></p>

11. <p><b>#Country#</b></p>

12. <p><b>zip</b></p>

13. <p></p>

14. <p>We have charged your account with <b>$#session.total#</b> for products sent to you.</p>

15. <p> Thank you for ordering our products.</p>

17. </cfoutput>

16. <p><a href="list.cfm">Yes</a>/<a href="index.cfm">Return</a> to the product page. </p>

The output receipt is illustrated in Figure 7 .

To be a real functional application, an agreement has to be signed with a credit card company and a connection established with company.

Exercises

a. In this session we have used the datatypes list and array . Read Chapter 6 in RBB about these and other complex datatypes included in CFML promotion .

b. Copy the templates and rewrite them for your favorite business idea. Complete and expand the 'surrounding' pages.

Link to the session examples.

Link to the session test.

 

Svein Nordbotten, Professor mailto:svein@nordbotten.com

 

 

 

Other information:

Links - Macromedia Developers Journal