| Table of Contents | Previous Next |
14.5 A simple e-commerce application for small businesses14.5.1 A simple business model on the InternetMany small businesses such as shops, restaurants, and cafés may already have some kind of telephone/fax ordering service. A typical telephone ordering service may include "accepting orders on the phone," "delivery in local area," and "collecting payment." For these small businesses, in addition to telephone ordering, one obvious approach to expand their businesses to reach more customers is to accept orders over the Internet. From the customers' point of view, the major advantage of online ordering is that a full list of services/products can be seen. Pricing, additional information or descriptions, pictures of the product, and/or services can also be provided. Putting your business and accepting orders online will enhance your services and not be restricted by just one or two telephone lines. The online business or e-commerce that we are going to design is a simple one without any money transactions over the Internet. The design involves a local computer in a shop that has access to a server on the Internet provided by an ISP (see Fig. 14.25). The server should host the shop's Web site address and be connected to the Internet all the time. Most ISPs can provide hosting services for very little charge or are virtually free. The local machine in your shop should be able to get emails from the ISP just like you check your personal emails at home through your ISP. Figure 14.25. A small business model on the Internet
Basically the operation of the model is simple. You set up a Web site for your shop on the server provided by your ISP. The customers get information and an order form from your Web site. When they place an order by submitting the form back to the server, a CGI application is activated to process the form and ultimately sends the order to you by email. All you then need is to get a machine in the shop to check the email and to print the order out. To make this work, you may need to write (or ask someone to write) a Web application that includes a page with one or more forms for online ordering and a CGI application to process the form. For a simple model like this one, the CGI application can be as simple as getting the ordered items and the ability to send email. Once you have the Web page with the CGI application uploaded to the server, you are ready to receive orders from your local machine inside the shop by email. 14.5.2 A page to receive and process online ordersAs an example, suppose you are running a small café called "Jenny's Café" with a local telephone ordering and delivery service. To expand the business, you have set up a Web site address www.JennyCafe.com and an email account Jenny@JennyCafe.com allocated by an ISP. To expand the business on the Internet, you need to write an XHTML Web page to include "Today's Menu" and take orders from the customers. The page ex14-05.htm is a good example, but we want more flexibility to change the menu items and add some more easily. A modification is given below:
Example: ex14-14.htm - A Page To Receive Online Orders
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title> Receiving Online Orders - ex1414.htm</title></head>
6: <style>
7: .butSt{background:#aaffaa;width:200px;
8: font-family:arial;font-weight:bold;font-size:16pt;color:#880000}
9: .butSt2{background:#aaffaa;width:30px;height:30px;
10: font-family:arial;font-weight:bold;font-size:18pt;color:#880000}
11: .txtSt{width:250px;
12: font-family:arial;font-weight:bold;font-size:16pt;color:#ffff00}
13: </style>
14: <script>
15: noRow = 3
16: noCol = 2
17: menuValue = new Array("Burger Combo","Seafood Burger",
18: "Chicken Burger Royal","Lamb Fajita",
19: "Vegetarian Delight","Two Jumbo Sausages")
20: menuPrice = new Array("3.50","4.50","3.50","4.50","3.50","4.50")
21: currency = "\$"
22: </script>
23: <body style="background:#000088;font-family:arial;font-size:18pt;
24: color:#ffff00;font-weight:bold">
25: <div style="font-size:22pt;font-weight:bold;text-align:center">
26: Jenny's Cafe <br /> Internet Ordering & Delivery Services</div>
27:
28: <form action="ex1414.pl" style="text-align:center" method="post">
29: <div id="usrTable"></div>
30: Special Offer From Today's Menu<br />
31: All Come With Fries<br /><br />
32: <div id="menuTable"></div>
33: How Would You Like To Pay?<br /><br />
34: <div id="payTable"></div>
35: <table class="txtSt" cellspacing="5"><tr>
36: <td><input type="submit" value="Submit" class="butSt" /></td>
37: <td><input type="reset" value="Reset" class="butSt" /></td></tr>
38: </table>
39: Payment Will Be Collected By Delivery Personnel
40: </form>
41:
42: <script src="ex14-14.js"></script>
43: </body>
44: </html>
The first part of this page (lines 1521) contains two arrays, "menuValue" and "menuPrice." They are linked to each other. For example, consider the items of each array: menuValue menuPrice Burger Combo 3.50 Seafood Burger 4.50 ... ... Two Jumbo Sausages 4.50 The order of appearance is important since each price is associated with a menu item. When the form is submitted to the server, both values are needed to pass to the CGI application. Using arrays will make any changes to the menu easier. To change the online menu and prices, these arrays need to be altered and only this page needs to be uploaded again. The second part of the page is a form application. Inside the form, there are three division elements with identities "usrTable" (user information), "menuTable" (menu information), and "payTable" (payment information). They will display three table structures with input elements generated by the ECMAScript program file ex14-14.js. The first table is a structure to obtain a customer's information such as "Name," "Phone Number," and "Address" so that delivery is possible. The second table displays the menu and obtains the customer's order. The third table structure is used to obtain the payment information. For the display of this page, see the screen shot in Fig. 14.26. Figure 14.26. ex14-14.htm
The program file ex14-14.js responsible for the generation of the table structures is listed below:
Example: ex14-14.js - The ECMAScript Program File For ex14-14.htm
1: usrSt='<table class="txtSt" cellspacing="5"><tr><td>Name:</td>'+
2: '<td><input type="text" name="usrN" id="usrN" class="butSt" /></td>'+
3: '<td>Phone Number:</td>'+
4: '<td><input type="text" name="phone" id="phone" class="butSt" /></td>'+
5: '</tr><tr><td>Address:</td><td colspan="3">'+
6: '<input type="text" name="addr" id="addr" class="butSt" '+
7: 'style="width:510px" /></td></tr>'+
8: '</table><br />'
9:
10: menuSt = '<table cellspacing="5" border="0">'
11: for (ii=0;ii<noRow;ii++)
12: {
13: menuSt = menuSt +'<tr>'
14: for(jj=0;jj<noCol;jj++)
15: {
16: menuSt = menuSt +'<td><input type="text" name="'+
17: menuValue[(jj+ii*noCol)]+'@'+menuPrice[jj+ii*noCol]+'" id="'+
18: menuValue[(jj+ii*noCol)]+'@'+menuPrice[jj+ii*noCol]+
19: '" class="butSt2" value="0" /></td>'+
20: '<td class="txtSt">'+menuValue[(jj+ii*noCol)] +
21: ' ('+currency+menuPrice[(jj+ii*noCol)]+')</td>'
22: }
23: menuSt = menuSt +'</tr>'
24: }
25: menuSt = menuSt + '</table><br />'
26:
27:
28: paySt = '<table cellspacing="5" border="0">'+
29: '<tr><td><input type="radio" name="Payment" id="Payment" class="butSt2" '+
30: ' value="Cash" checked /></td><td class="txtSt">Cash</td>'+
31: '<td><input type="radio" name="Payment" id="Payment" class="butSt2" '+
32: ' value="VISA" /></td><td class="txtSt">VISA</td></tr>'+
33: '<tr><td><input type="radio" name="Payment" id="Payment" class="butSt2" '+
34: ' value="Check" /></td><td class="txtSt">Check</td>'+
35: '<td><input type="radio" name="Payment" id="Payment" class="butSt2" '+
36: ' value="Master Card" /></td><td class="txtSt">Master Card</td></tr>'+
37: '<tr><td><input type="radio" name="Payment" id="Payment" class="butSt2" '+
38: 'value="American Express" /></td><td class="txtSt">American Express</td>'+
39: '<td><input type="radio" name="Payment" id="Payment" class="butSt2" '+
40: 'value="Customer Account" /></td><td class="txtSt">Customer Account</td>'+
41: '</tr></table><br />'
42:
43: document.getElementById("usrTable").innerHTML = usrSt
44: document.getElementById("menuTable").innerHTML = menuSt
45: document.getElementById("payTable").innerHTML = paySt
The table structures represented by the strings usrSt (lines 18) and paySt (2841) are easy to understand. The interesting part is the table structure generated by menuSt defined in lines 1025. The six menu items are arranged into six rows by two columns. The for-loop on the ii variable generates the rows; another for-loop handles the columns. For example, when ii=0, the first row of the table structure becomes
<tr><td><input type="text" name="Burger Combo@3.50"
id="Burger Combo@3.50" class="butSt2" value="0" /></td>
<td>Burger Combo</td>
<td><input type="text" name="Seafood Burger@4.50"
id="Seafood Burger@4.50" class="butSt2" value="0" /></td>
<td>Seafood Burger</td></tr>
After three rows and adding the table tag names, we have a complete table structure. All three table structures are displayed by the statements in lines 4345. If the customer has made order 1 "Burger Combo," the value attribute associated with the text box will have value =1. When the customer presses the Submit button, the whole form data and hence the name/value pair of the "Burger Combo" are sent to the CGI application ex14-14.pl. The name/value pair of the "Burger Combo" is "Burger Combo@3.50 = 1" Using some simple split functions of Perl, the name/value pair can be easily split into "Burger Combo," "3.5" (price), and "1" (quantity). A confirmation of the order message is shown in Fig. 14.27. Figure 14.27. Confirmation of order
To process the submitted form, a Perl script, ex14-14.pl, is used. The first part of the script is listed below:
Example: ex14-14.pl - The Perl Script For ex1414.htm (Part One)
1: #! /usr/bin/perl
2:
3: ## Minimum Requirement For CGI Application
4: print ("Content-type:text/html\n\n");
5: my $formSt="UNKNOWN";
6:
7: if ($ENV{'REQUEST_METHOD'} eq "GET")
8: {
9: $formSt = $ENV{'QUERY_STRING'};
10: } elsif ($ENV{'REQUEST_METHOD'} eq "POST") {
11: read(STDIN,$formSt,$ENV{'CONTENT_LENGTH'});
12: }
13: my $total = 0;
14: my $outMsg = '';
15: my $price = 0.0;
16: my $name2;
17: my $name;
18: my $value;
19:
20: if ( $formSt eq "" )
21: {
22: print 'We have received an empty input string';
23: } else {
24: my @pairs = split ( "&", $formSt );
25: my $tmpSt = sprintf "Time : %s",scalar(localtime());
26:
27: $outMsg = $outMsg . $tmpSt;
28: $outMsg = $outMsg . "<br />The Submitted Form Contents are: <br />";
29: foreach my $i (0 .. $#pairs)
30: {
31: ## Convert plus's to spaces
32: $pairs[$i] =~ s/\+/ /g;
33: ($name2, $value) = split("=",$pairs[$i]);
34: ($name, $price) = split("@",$name2);
35: ## Convert %XX from hex numbers to alphanumeric
36: $name =~ s/%(..)/pack("c",hex($1))/ge;
37: $value =~ s/%(..)/pack("c",hex($1))/ge;
38:
39: if ( $i <= 2)
40: {
41: $outMsg = $outMsg . " $name = $value <br />";
42: } else {
43: if ( $value != 0)
44: {
45: $outMsg = $outMsg . " $name = $value (\$ $price Each) <br />";
46: $total = $total + $value * $price
47: }
48: }
49: }
50: $outMsg = $outMsg . " $name = $value <br />";
51: $outMsg = $outMsg . " Total ************************* \$ $total<br />";
52: $outMsg = $outMsg . "======================================== <br />";
53: }
This script is designed to handle both get and post methods. After the CGI header, some local variables are declared in lines 1318, the first two of which are:
To build the $outMsg string, a number of string concatenations are performed. Line 25 is to print the date and time into a string variable $tmpSt. This string is added to $outMsg by (line 27) $outMsg = $outMsg . $tmpSt In Perl, a period symbol is used to combine two strings together. Since we have passed the name, price, and quantity to the script, the statements in lines 3334 are used to split them into the variables $name, $price, and $value (quantity). Since the first three name/value pairs are user information, the for-loop in lines 3942 is used to add the information directly into $outMsg. For the remaining name/value pairs, we execute the following statements (lines 4347):
if ( $value != 0)
{
$outMsg = $outMsg . " $name = $value (\$ $price Each) <br />";
$total = $total + $value * $price
}
That is, if the ordered quantity $value is not 0, the menu variables $name, $value, and $price are added to the string $outMsg. Then the total price of the order is calculated by $value * $price and added to $total. The final name/value pair is the payment method and is added to $outMsg at line 50. After the total price, a double line is added to the string $outMsg to represent the end of the order. The entire string $outMsg is displayed to the customer for confirmation and finally sent by email to the shop for preparation and delivery. The second part of the script is listed below: Listing: Continuation Of The Perl Script - ex1414.pl (Part Two) 54: 55: print << "myDoc"; 56: <?xml version="1.0" encoding="iso-88591"?> 57: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 58: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 59: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 60: <head><title>Perl Example: ex1414.pl</title></head> 61: <body style="background:#000088;font-family:arial;font-size:18pt; 62: color:#ffff00;font-weight:bold"> 63: <div style="text-align:center;font-size:22pt">Jenny's Cafe</div> 64: Thank you! We will deliver the following order <br /> 65: to your doorstep within 25 minutes.<br /><br /> 66: $outMsg 67: </body></html> 68: myDoc 69: 70: $outMsg =~ s/<br \/>/\\n/g; 71: ##Send Email To The Shop 72: open (USRMAIL, "| /usr/lib/sendmail -oi -n -t" ); 73: print USRMAIL << "usr_message"; 74: To:Jenny@JennyCafe.com 75: From:www.JennyCafe.com 76: Subject:Online Order 77: $outMsg 78: usr_message 79: close USRMAIL; The Perl script in lines 5468 is just a here document to generate an XHTML page back to the customer. After the message confirming the order, the entire order is displayed at line 66. Since the string $outMsg contains the XHTML element <br />, straightforward substitution with Perl script at line 70 will replace it with "\n" (new line). Then this new $outMsg is sent by email to the café with a simple call to sendmail. The local machine inside the café can check the emails regularly for any online orders. A screen shot of an email reaching the café is shown in Fig. 14.28. Figure 14.28. Online order
With a speed of more than 6,000 miles (9,600 kilometers) per second, email may be one of the most efficient methods of passing messages to the café. Also, by using email, hundreds of orders can be handled at the same time without any problems. |
| Table of Contents | Previous Next |
