1 Case Study An Online Bookstore 2 Introduction

1 Case Study: An Online Bookstore

2 Introduction • Case study of Online bookstore – Divided into two parts • Business-to-client (B 2 C) • Business-to-business(B 2 B) – Three fundamental pieces • Client-side scripting – Java. Script • Server-side scripting – ASP which generates XML • Database

3 Preview of the bookstore Book list Link to account information Book search field Detailed book information Shopping cart Button to show/hide shopping cart

Key interactions between bookstore documents 4

5 Client-Side Documents • Table of client-side documents

6 Client-Side Documents • Methods and properties of the Microsoft user. Data behavior

7 Client-Side Documents • Properties of the XMLHttp. Request object • Methods of the XMLHttp. Request object

1 <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 2 3 4 5 6 7 8 <HTML> 9 <SCRIPT LANGUAGE = "Java. Script" SRC = "table. Highlight. js">  <HEAD> <TITLE>Store. Front</TITLE> <LINK REL = "stylesheet" TYPE = "text/css" HREF = Lines 9 through 22 contain references to external files that contain Java. Script. To 1. index. html reference an external file, use element SCRIPT’s SRC attribute. 1. 1 Link Java. Script "style. css"> files 10 </SCRIPT> 11 <SCRIPT LANGUAGE = "Java. Script" SRC = "row. Selection. js"> 12 </SCRIPT> 13 <SCRIPT LANGUAGE = "Java. Script" SRC = "sort. Table. js"> 14 </SCRIPT> 15 <SCRIPT LANGUAGE = "Java. Script" SRC = "product. Search. js"> 16 </SCRIPT> 17 <SCRIPT LANGUAGE = "Java. Script" SRC = "the. Cart. js"> 18 </SCRIPT> 19 <SCRIPT LANGUAGE = "Java. Script" SRC = "the. Items. js"> 20 </SCRIPT> 21 <SCRIPT LANGUAGE = "Java. Script" SRC = "string. Func. js"> 22 </SCRIPT> 23 <SCRIPT LANGUAGE = "Java. Script"> 24 var save. XMLProducts = null; 25 26 // Location of the pages. Required for XMLHTTP posting. 27 28 Outline var server. Location = "http: //beetle/storefront/"; 1. 2 Set server. Location

29 30 // Handle the loading state of the XML documents. // Large documents can take a while to load. 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 function handle. Loading() { if ( xml. Products. ready. State == 'loading' window. status = "Loading Data. Please return; } else if ( xml. Products. ready. State == 'complete' ) { // XML list finished loading. Function handle. Loading. Outline controls when user interface components are available for use. 1. 4 Function ) { handle. Loading Wait. "; if ( save. XMLProducts == null ) save. XMLProducts = xml. Products. clone. Node( true ); window. status = "Done"; // Enable the interface. nav. First. disabled = false; nav. Prev. disabled = false; nav. Next. disabled = false; nav. Last. disabled = false; box. Search. disabled = false; btn. Search. Go. disabled = false; btn. Search. Reset. disabled = false; buy. Cart. disabled = false; box. Qty. value = 0; // Hide the notification window. notice. style. display = "none"; notice. style. position = "absolute";

60 // Display the Product Listing. Outline 61 product. Listing. style. display = "block"; 62 product. Listing. style. position = "relative"; 63 } 64 } 65 </SCRIPT> 1. 4 Function handle. Loading 66 </HEAD> 67 68 <BODY ONLOAD = "load. Shopping. Cart(); " SCROLLING = "yes"> 69 <CENTER> 70 <TABLE WIDTH = "750" ALIGN = "center" CELLPADDING = "0" 71 CELLSPACING = "0" BORDER = "0" BGCOLOR = "#67 CDFF" 72 73 ID = "product. List" STYLE = "position: relative; display: block; top: 0; left: 0; " > 74 75 76 <TR> <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "35"><IMG The SRC = "images/header. jpg" WIDTH = "650" 77 HEIGHT = "35"><A HREF = "account. asp"><IMG 78 79 SRC = "images/head_account. jpg" WIDTH = "100" HEIGHT = "35" BORDER = "0"></A></TD> 80 81 82 83 84 85 86 87 88 89 1. 5 End Script 1. 6 Begin HTML 1. 7 Bookstore table header search box (lines 82 through 92) in the book store table. </TR> <TD WIDTH = "550" ALIGN = "center" CLASS = "label"> Search: <INPUT TYPE = "text" CLASS = "brand" ID = "box. Search" ONKEYPRESS = "act. Search. Type( event )" DISABLED> <INPUT TYPE = "button" VALUE = "Go" CLASS = "button" ID = "btn. Search. Go" ONCLICK = "act. Search. Go()" DISABLED> <INPUT TYPE = "button" VALUE = "Reset"

90 91 92 93 94 95 CLASS = "button" ID = "btn. Search. Reset" ONCLICK = "act. Search. Reset()" DISABLED> </TD> <TD WIDTH = "200" ROWSPAN = "2" VALIGN = "top" ALIGN = "center"> <TABLE WIDTH = "190" CELLSPACING = "0" CELLPADDING = "0"> 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 <TR> <TD WIDTH = "190" ALIGN = "center" COLSPAN = "2"> <IMG SRC = "images/none. jpg" WIDTH = "150" HEIGHT = "100" BORDER = "1" ID = "desc. Image"> </TD> </TR> <TD WIDTH = "60" ALIGN = "right" VALIGN = "top" CLASS = "label"> ISBN: </TD> <TD WIDTH = "130" VALIGN = "top" ID = "desc. ISBN"> N/A </TD> </TR> <TD WIDTH = "60" ALIGN = "right" VALIGN = "top" CLASS = "label"> Publisher: </TD> <TD WIDTH = "130" VALIGN = "top" ID = "desc. Pub"> Outline 1. 7 Bookstore table header The book details (lines 93 through 174) in the book store table.

120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 N/A </TD> </TR> <TD WIDTH = "60" ALIGN = "right" VALIGN = "top" CLASS = "label"> Author: </TD> <TD WIDTH = "130" VALIGN = "top" ID = "desc. Author"> N/A </TD> </TR> <TD WIDTH = "60" ALIGN = "right" VALIGN = "top" CLASS = "label"> Title: </TD> <TD WIDTH = "130" VALIGN = "top" ID = "desc. Title"> N/A </TD> </TR> <TD WIDTH = "60" ALIGN = "right" VALIGN = "top" CLASS = "label"> Price: </TD> <TD WIDTH = "130" VALIGN = "top" ID = "desc. Price"> N/A Outline 1. 7 Bookstore table header

151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 </TD> </TR> <TD WIDTH = "60" ALIGN = "right" VALIGN = "top" CLASS = "label"> Pages: </TD> <TD WIDTH = "130" VALIGN = "top" ID = "desc. Pages"> N/A </TD> </TR> <TD WIDTH = "60" ALIGN = "right" VALIGN = "top" CLASS = "label"> Media: </TD> <TD WIDTH = "130" VALIGN = "top" ID = "desc. Media"> N/A </TD> </TR> </TABLE> </TD> </TR> <TD WIDTH = "550" HEIGHT = "340" VALIGN = "top" ALIGN = "center"> <DIV ALIGN = "center" ID = "notice" STYLE = "position: relative; display: block; " > Please wait. Book inventory is being loaded. </DIV> Outline 1. 7 Bookstore table header 1. 8 Bookstore table body

183 184 <TABLE WIDTH = "530" CELLPADDING = "0" CELLSPACING = "0" BORDER = "0" DATAPAGESIZE = "8" 185 ID = "product. Listing" DATASRC = "#xml. Products" 186 ONREADYSTATECHANGE = "refresh. Table(); " 187 STYLE = "display: none; position: 188 189 <THEAD> <TD WIDTH = "90" CLASS = "labelhand" Outline The book list (lines 183 through 225) of 1. 8 Bookstore table the book store table. absolute"> body 190 ONCLICK = "sort. Products( 0 ); "> 191 192 193 ISBN </TD> <TD WIDTH = "90" CLASS = "labelhand" 194 ONCLICK = "sort. Products( 1 ); "> 195 196 197 Author </TD> <TD WIDTH = "280" CLASS = "labelhand" 198 ONCLICK = "sort. Products( 2 ); "> 199 200 201 202 203 Title </TD> <TD WIDTH = "70" ALIGN = "right" CLASS = "labelhand" ONCLICK = "sort. Products( 3 ); "> 204 205 206 207 208 209 210 Price </TD> </THEAD> <TR ONMOUSEOVER = "row. Select(); " ONMOUSEOUT = "row. Un. Select(); " ONCLICK = "display. Detail(); " CLASS = "handable" HEIGHT = "40"> 211 212 <TD WIDTH = "90" VALIGN = "top"> <SPAN DATAFLD = "isbn"></SPAN> 213 </TD>

214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 <TD WIDTH = "90" VALIGN = "top"> <SPAN DATAFLD = "author"></SPAN> </TD> <TD WIDTH = "280" VALIGN = "top"> <SPAN DATAFLD = "title"></SPAN> </TD> <TD WIDTH = "70" ALIGN = "right" VALIGN = "top"> $<SPAN DATAFLD = "price"></SPAN> </TD> </TR> The navigation bar (lines 230 </TABLE> 259) of the book store table. </TD> </TR> <TD WIDTH = "550" ALIGN = "center"> <TABLE WIDTH = "540" CELLPADDING = "0" CELLSPACING = "0"> <TR> <TD WIDTH = "50" ALIGN = "center"> <INPUT TYPE = "button" VALUE = z CLASS = "button" ID = " nav. First" ONCLICK = " hide. Table(); product. Listing. first. Page (); " DISABLED> </TD> <TD WIDTH = "50" ALIGN = "center"> <INPUT TYPE = "button" VALUE = "<" CLASS = "button" ID = "nav. Prev" DISABLED ONCLICK = "hide. Table(); product. Listing. previous. Page (); "> </TD> Outline 1. 8 Bookstore table body 1. 9 Bookstore table footer through

245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 <TD WIDTH = "440"></TD> <TD WIDTH = "50" ALIGN = "center"> <INPUT TYPE = "button" VALUE = ">" CLASS = "button" ID = "nav. Next" DISABLED 1. 9 Bookstore ONCLICK = "hide. Table(); footer product. Listing. next. Page(); "> </TD> <TD WIDTH = "50" ALIGN = "center"> <INPUT TYPE = "button" VALUE = ">>" CLASS = "button" ID = "nav. Last" DISABLED ONCLICK = "hide. Table(); product. Listing. last. Page(); "> The shopping cart functionality (lines </TD> 262 through 287) of the book store table. </TR> </TABLE> </TD> <TD WIDTH = "200" ALIGN = "center"> <TABLE WIDTH = "190" CELLPADDING = "0" CELLSPACING = "0"> <TR> <TD WIDTH = "60" ALIGN = "right" CLASS = "label"> Quantity: </TD> <TD WIDTH = "40"> <INPUT TYPE = "text" SIZE = "3" VALIGN = "absmiddle" CLASS = "quantity" ID = "box. Qty" DISABLED VALUE = "0" ONKEYUP = "change. Add. Button(); " MAXLENGTH = "2"> </TD> Outline table

276 <TD WIDTH = "45" ALIGN = "center"> 277 278 279 280 281 <INPUT TYPE = "button" VALUE = "Add" CLASS = "button" ID = "buy. Add" DISABLED ONCLICK = "go. Buy(); "> </TD> <TD WIDTH = "45" ALIGN = "center"> 282 1. 9 Bookstore table footer <INPUT TYPE = "button" VALUE = "Cart" 283 284 CLASS = "button" ID = "buy. Cart" DISABLED ONCLICK = "go. Cart(); "> 285 286 287 </TD> </TR> </TABLE> 288 289 </TD> </TR> 290 291 292 <TR> <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "15"><IMG SRC = "images/footer. jpg" WIDTH = "750" 293 HEIGHT = "15"></TD> 294 </TR> 295 </TABLE> 1. 10 Shopping cart table The shopping cart table (lines 297 through 365) is initially hidden and contains no items. When the Cart button is clicked, the contents of the shopping cart are displayed. 296 <BR> 297 <TABLE WIDTH = "750" CELLPADDING = "0" ALIGN = "center" 298 CELLSPACING = "0" BORDER = "0" BGCOLOR = "#67 CDFF" 299 ID = "cart. Window" STYLE = "position: absolute; 300 display: none; top: 0; left: 0; " > 301 <TR> 302 303 304 305 Outline <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "35"><IMG SRC = "images/header 2. jpg" WIDTH = "750" HEIGHT = "35"></TD> </TR>

306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 <TR> <TD WIDTH = "750" VALIGN = "top" ALIGN = "center"> <TABLE WIDTH = "670" CELLPADDING = "0" CELLSPACING = "0" BORDER = "0" ID = "shopping. Cart"> <THEAD> <TD WIDTH = "90" CLASS = "label"> ISBN </TD> <TD WIDTH = "90" CLASS = "label"> Author </TD> <TD WIDTH = "280" CLASS = "label"> Title </TD> <TD WIDTH = "70" ALIGN = "right" CLASS = "label"> Price </TD> <TD WIDTH = "10"></TD> <TD WIDTH = "50" ALIGN = "center" CLASS = "label"> Quantity </TD> <TD WIDTH = "80" ALIGN = "right" CLASS = "label"> Total </TD> </THEAD> <TFOOT> <TD WIDTH = "90"></TD> Outline 1. 10 Shopping cart table

337 <TD WIDTH = "280"></TD> 338 <TD WIDTH = "70"></TD> 339 <TD WIDTH = "10"></TD> 340 <TD WIDTH = "50" ALIGN = "right" 341 CLASS = "label"> 342 Total: 343 </TD> 344 <TD WIDTH = "80" ALIGN = "right"> 345 $<SPAN ID = "sub. Total">0. 00</SPAN> 346 </TD> 347 </TFOOT> 348 349 </TABLE> </TD> 350 </TR> 351 <TR> 352 <TD COLSPAN = "2" WIDTH = "750" ALIGN = "center"> 353 <INPUT TYPE = "button" VALUE = "Clear Cart" 354 CLASS = "button 2" ID = "go. Clear. Shopping. Cart" 355 ONCLICK = "clear. Shopping. Cart(); " DISABLED> 356 <INPUT TYPE = "button" VALUE = "Checkout" 357 CLASS = "button 2" ID = "go. Check. Out" DISABLED 358 ONCLICK = "buy. Check. Out(); "> 359 </TD> 360 </TR> 361 <TR> 362 <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "15"><IMG 363 364 SRC = "images/footer. jpg" WIDTH = "750" HEIGHT = "15"> </TD></TR> 365 </TABLE> Outline 1. 10 Shopping cart table

366 <BR> 367 <TABLE WIDTH = "750" ALIGN = "center" CELLPADDING = "0" 368 CELLSPACING = "0" BORDER = "0" BGCOLOR = "#67 CDFF" 369 ID = "notice. Shopping" STYLE = "position: absolute; 370 display: none; top: 0; left: 0; " > 1. 11 XML tags for 371 <TR> XMLShopping. Cart 372 <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "35"><IMG 373 SRC = "images/header 2. jpg" WIDTH = "750" HEIGHT = "35"> 374 </TD></TR> 1. 12 XML tag for 375 <TR> The notice message table (lines 367 XMLSort. Products 376 <TD WIDTH = "750" VALIGN = "top" ALIGN = "center"> 377 Please wait. Shopping cart is being submitted. <BR> through 385) is initially hidden, and 378 The browser will be redirected when complete. is used to notify users that the 1. 13 XML tag for 379 </TD> shopping cart is being submitted. XMLSort. Products 380 </TR> This block is displayed when the line 390, the XML element xml. Sort. Products 381 On <TR> user enters the checkout process. 382 references <TD the COLSPAN = "2" WIDTH = "750" HEIGHT = "15"><IMG XSL document sorting. xsl. 1. 14 XML tag for 383 SRC = "images/footer. jpg" WIDTH = "750" HEIGHT = "15"> XMLProducts 384 Lines 393 </TD></TR> and 394 reference the XML book list 385 </TABLE> (xml. Products) generated by products. asp. 386 </CENTER> 387 <DIV ID = "xml. Shopping. Cart" CLASS = "user. Data" 388 STYLE = "position: absolute; display: none; left: 0; top: 0; " > Outline 389 </DIV> 390 <XML ID = "xml. Sort. Products" SRC = "sorting. xsl" The DIV element 391 STYLE = "position: absolute; display: none; left: 0; top: 0; " > xml. Shopping. Cart is used to store the shopping car contents over browser sessions by using Microsoft’s CSS persistence. 392 </XML> 393 <XML ID = "xml. Products" SRC = "products. asp" 394 ONREADYSTATECHANGE = "handle. Loading(); " 395 STYLE = "position: absolute; display: none; left: 0; top: 0; " > 396 </XML> 397 </BODY> 398 399 </HTML>

21 Output from index. html

22 Output from index. html

400 // Figure 28. 6: table. Highlight. js Outline 401 402 // Highlights every other row in a table with ID 403 // "product. Listing". 2. table. Highlight. js 404 405 var new. Color = "#CCDDFF"; 406 407 // Hide the product table. 408 function hide. Table() 409 { 410 product. Listing. style. display = Assign the color #CCDDFF to variable 2. 1 Function new. Color. This color is used to hide. Table highlight every other row in the table, when the function highlight. Table is 2. 2 Function called. 'none'; highlight. Table 411 } 412 413 // Set every other item to a different color. 414 function highlight. Table() 415 { 416 if ( window. product. Listing ) { 417 var obj. Row = window. product. Listing. rows ; 418 var obj. Row. Length = obj. Row. length; 419 420 for ( i = 1; i < obj. Row. Length; i++ ) 421 if ( i % 2 == 1 ) 422 obj. Row[ i ]. style. background = new. Color; 423 else 424 425 426 } 427 obj. Row[ i ]. style. background = "none"; }

428 // If the table has changed, redo the highlighting 429 function refresh. Table() Outline 430 { 431 if ( product. Listing. ready. State == 'complete' ) { 432 highlight. Table(); 433 product. Listing. style. display = "block"; 434 } 435 } 436 437 // If the shopping cart has changed, redo the highlighting 438 function refresh. Shopping. Table() 439 { 440 if ( window. shopping. Cart ) { 441 var obj. Row = window. shopping. Cart. rows ; 442 var obj. Row. Length = obj. Row. length; 443 444 for ( i = 1; i < obj. Row. Length; i++ ) 445 if ( i % 2 == 1 ) 446 obj. Row[ i ]. style. background = new. Color; 447 else 448 449 450 } obj. Row[ i ]. style. background = "none"; } 2. 3 Function refresh. Table 2. 4 Function refresh. Shopping. Tab le

451 // Figure 28. 7: row. Selection. js 452 Outline 453 // The original highlight color. 454 var original. BGColor; 455 456 // Highlight the row. 457 function row. Select() 458 { 459 462 while ( object. tag. Name != "TR" ) object = object. parent. Element; 463 464 original. BGColor = object. style. background; 465 object. style. background = "#FFCCCC"; 466 } 467 468 // Un-highlight the row. 469 function row. Un. Select() 470 { 471 var object = window. event. src. Element; 472 473 474 while ( object. tag. Name != "TR" ) object = object. parent. Element; 475 476 477 } 478 3. 1 Function row. Select var object = window. event. src. Element; 460 461 3. row. Selection. js object. style. background = original. BGColor; 3. 2 Function row. Un. Select

479 // Take the product list and put it into the detail pane. 480 function display. Detail() 481 { 482 var object = window. event. src. Element; Function display. Detail retrieves 3. 3 Function 483 information from the display. Detail XML book list 484 while ( object. tag. Name != "TR" ) and places the selected book’s 485 object = object. parent. Element; information into the detailed book 486 information area. If information for a 487 if ( object. cells[ 0 ]. inner. Text == '' ) field does not exist, N/A is used. 488 return; 489 490 var the. XMLnode = 491 xml. Products. document. Element. select. Single. Node ( 492 "book[ isbn = '" + object. cells[ 0 ]. inner. Text + "' ]" ); 493 494 var obj. Node = the. XMLnode. select. Single. Node ( 'image' Call the); method select. Single. Node to 495 retrieve the book element from the book list. 496 if ( obj. Node != null && obj. Node. text != '' ) From this node, use the select. Single. Node 497 desc. Image. src = obj. Node. text; method to retrieve the node’s children to 498 else populate the detail area. 499 desc. Image. src = "images/none. jpg"; 500 501 obj. Node = the. XMLnode. select. Single. Node ( 'isbn' ); 502 503 if ( obj. Node != null && obj. Node. text != '' ) 504 desc. ISBN. inner. Text = obj. Node. text; 505 else 506 desc. ISBN. inner. Text = "N/A"; 507 508 obj. Node = the. XMLnode. select. Single. Node ( 'publisher' ); 509 Outline

510 if ( obj. Node != null && obj. Node. text != '' ) 511 512 513 514 515 desc. Pub. inner. Text = obj. Node. text; else desc. Pub. inner. Text = "N/A"; obj. Node = the. XMLnode. select. Single. Node ( 'author' ); 516 517 518 if ( obj. Node != null && obj. Node. text != '' ) desc. Author. inner. Text = obj. Node. text; 519 520 521 else desc. Author. inner. Text = "N/A"; 522 523 obj. Node = the. XMLnode. select. Single. Node ( 'title' ); 524 525 526 if ( obj. Node != null && obj. Node. text != '' ) desc. Title. inner. Text = obj. Node. text; else 527 528 529 530 531 532 533 534 535 536 537 538 539 desc. Title. inner. Text = "N/A"; obj. Node = the. XMLnode. select. Single. Node ( 'price' ); if ( obj. Node != null && obj. Node. text != '' ) desc. Price. inner. Text = "$" + obj. Node. text; else desc. Price. inner. Text = "N/A"; obj. Node = the. XMLnode. select. Single. Node ( 'pages' ); if ( obj. Node != null && obj. Node. text != '' ) desc. Pages. inner. HTML = obj. Node. text; Outline 3. 3 Function display. Detail

540 541 542 543 544 545 546 else desc. Pages. inner. Text = "N/A"; obj. Node = the. XMLnode. select. Single. Node ( 'media' ); if ( obj. Node != null && obj. Node. text != '' ) desc. Media. inner. HTML = obj. Node. text; 547 548 else desc. Media. inner. Text = "N/A"; 549 550 551 box. Qty. disabled = false; box. Qty. value = find. Item( desc. ISBN. inner. Text ); 552 553 if ( box. Qty. value > 0 ) 554 555 556 buy. Add. disabled = false; else buy. Add. disabled = true; 557 } Outline 3. 3 Function display. Detail

558 // Figure 28. 8: sort. Table. js 559 560 // These Global variables used to determine last sort order 561 var sort. ISBN, sort. Author, sort. Table, sort. Price, last. Num; 4. sort. Table. js 562 sort. ISBN = sort. Author = sort. Title = sort. Price = "+"; 563 last. Number = -1; 564 4. 1 Function 565 // Sort The product list via XSL. sort. Products 566 function sort. Products( number ) 567 { Function sort. Products sets the sorting 568 if ( number == last. Number ) { variables using the argument provided (e. g. , 569 switch ( number ) { 570 case 0: the function call on line 190). Using these 571 sort. ISBN = ( sort. ISBN == "+" ) ? "-" : variables, "+"; we create a string, which is then 572 break; used by XSLT to transform the book list. 573 case 1: 574 sort. Author = ( sort. Author == "+" ) ? "-" : "+"; 575 break; 576 case 2: 577 sort. Title = ( sort. Title == "+" ) ? "-" : "+"; 578 break; 579 case 3: 580 sort. Price = ( sort. Price == "+" ) ? "-" : "+"; 581 break; 582 } 583 } 584 585 last. Number = number; 586 587 var sort. By = xml. Sort. Products. select. Single. Node ( 588 "//@order-by" ); 589 Outline

590 switch ( number ) { 591 592 sort. By. value = sort. ISBN + 'isbn'; 593 break; 594 4. 1 Function sort. Products case 1: 595 sort. By. value = sort. Author + 'author; ' + 596 sort. Title + 'title'; 597 break; 598 case 2: 599 sort. By. value = sort. Title + 'title; ' + sort. Author + 600 'author'; 601 break; 602 case 3: 603 sort. By. value = sort. Price + 'number(price); ' + sort. Author + 'author; ' + sort. Title. Method + 'title'; transform. Node. To. Object 604 605 606 Outline case 0: break; } transforms the book list stored in xml. Products element according to the XSLT document in element xml. Sort. Products. 607 608 xml. Products. document. Element. transform. Node. To. Object ( 609 xml. Sort. Products. document. Element , 610 xml. Products. XMLDocument ); 611 }

612 // Figure 28. 9: product. Search. js 613 614 // If Enter (key. Code 13) was pressed, then submit. 615 function act. Search. Type( evt ) 5. product. Search. js 616 { Function act. Search. Type handles the event 617 if ( evt. key. Code == 13 ) fired when keyboard buttons are 5. 1 pressed. If the 618 act. Search. Go(); Function Enter key is pressed we performact. Search. Go a search by 619 } calling function act. Search. Go. 620 621 // Do a ISBN / Author / Title Search. 622 function act. Search. Go() 623 { 624 var sort. By; Function act. Search. Go performs an XSL 625 transformation on the book list using the 626 sort. By = xml. Sort. Products. select. Single. Node ( "//@expr" ); text entered into the text box when the Go 627 button is pressed. 628 if ( box. Search. value == "" ) 629 sort. By. value = "true"; 630 else 631 sort. By. value = 632 "(this. select. Single. Node('isbn'). text. index. Of ('" + 633 box. Search. value + "', 0) != -1) ||" + 634 "(this. select. Single. Node('author'). text. index. Of ('" + 635 box. Search. value + "', 0) != -1) ||" + 636 "(this. select. Single. Node('title'). text. index. Of ('" + 637 box. Search. value + "', 0) != -1)"; 638 639 save. XMLProducts. document. Element. transform. Node. To. Object ( 640 xml. Sort. Products. document. Element , 641 xml. Products. XMLDocument ); 642 } Outline

643 644 // Reset the Search. Outline 645 function act. Search. Reset() 646 { 647 box. Search. value = ""; 648 649 650 } act. Search. Go(); 5. 2 Function act. Search. Reset

651 // Figure 28. 10: the. Cart. js 652 653 // Cart button pressed. 654 function go. Cart() 655 { 656 if ( cart. Window. style. display == "none" ) { 657 cart. Window. style. position = "relative"; 658 cart. Window. style. display = "block"; 659 660 cart. Window. scroll. Into. View (); 661 } 662 else { 663 cart. Window. style. position = "absolute"; 664 cart. Window. style. display = "none"; 665 666 window. scroll. To( 0, 0 ); 667 } 668 } 669 670 // The array for shopping cart data storage 671 var cart. Array = new Array(); 672 673 // Fill in the shopping cart table 674 function fill. Table( isbn, quantity ) 675 { 676 var the. Cell = null; 677 var xml. Product = null; 678 var temp. Obj = null; 679 var the. Quantity, the. Price; 680 var i; 681 Outline 6. the. Cart. js 6. 1 Function go. Cart 6. 2 Function fill. Table adds items to the shopping cart table. If null is returned by the search for the ISBN, the item is considered invalid and is rejected. If an item already exists in the table, the existing entry is modified. If an item is new it is appeneded to the table.

682 683 684 685 686 687 xml. Product = xml. Products. document. Element. select. Single. Node ( "book[ isbn = '" + isbn + "' ]" ); if ( xml. Product == null ) return; 688 689 690 if ( cart. Array[ isbn ] == null ) { cart. Array[ isbn ] = shopping. Cart. insert. Row( 691 692 693 shopping. Cart. rows. length - 1 ); cart. Array[ isbn ]. height = "41"; 694 695 // ISBN 696 697 698 the. Cell = cart. Array[ isbn ]. insert. Cell(); the. Cell. inner. Text = isbn; the. Cell. v. Align = "top"; 699 700 701 // Author the. Cell = cart. Array[ isbn ]. insert. Cell(); 702 703 704 705 706 707 temp. Obj = xml. Product. select. Single. Node ( "author" ); the. Cell. inner. Text = temp. Obj. text; the. Cell. v. Align = "top"; 708 709 710 711 // Title the. Cell = cart. Array[ isbn ]. insert. Cell(); temp. Obj = xml. Product. select. Single. Node ( "title" ); the. Cell. inner. Text = temp. Obj. text; the. Cell. v. Align = "top"; Outline 6. 2 Function fill. Table

712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 // Price the. Cell = cart. Array[ isbn ]. insert. Cell(); temp. Obj = xml. Product. select. Single. Node ( "price" ); the. Price = parse. Float( temp. Obj. text ); the. Cell. inner. Text = "$" + create. Price. Num( parse. Float( temp. Obj. text ) ); the. Cell. align = "right"; the. Cell. v. Align = "top"; // Blank cell the. Cell = cart. Array[ isbn ]. insert. Cell(); // Quantity the. Cell = cart. Array[ isbn ]. insert. Cell(); the. Cell. inner. Text = quantity; the. Cell. align = "center"; the. Cell. v. Align = "top"; // Total the. Cell = cart. Array[ isbn ]. insert. Cell(); the. Cell. inner. Text = "$" + create. Price. Num( the. Price * quantity ); the. Cell. align = "right"; the. Cell. v. Align = "top"; // Assign events to the objects cart. Array[ isbn ]. class. Name = "handable"; cart. Array[ isbn ]. onclick = display. Detail; cart. Array[ isbn ]. onmouseover = row. Select; cart. Array[ isbn ]. onmouseout = row. Un. Select; Outline 6. 2 Function fill. Table

743 sub. Total. inner. Text = 744 create. Price. Num( parse. Price. Num( sub. Total. inner. Text ) 745 + the. Price * quantity ); 746 } 747 else { 748 // Price 749 the. Price = parse. Price. Num( 750 cart. Array[ isbn ]. cells( 3 ). inner. Text. substr( 1 ) ); 751 the. Qty = parse. Float( 752 cart. Array[ isbn ]. cells( 5 ). inner. Text ); 753 754 sub. Total. inner. Text = create. Price. Num( 755 parse. Price. Num( sub. Total. inner. Text ) - 756 the. Price * the. Quantity ); 757 758 // Quantity 759 cart. Array[ isbn ]. cells( 5 ). inner. Text = quantity; 760 761 // Total 762 cart. Array[ isbn ]. cells( 6 ). inner. Text = "$" + 763 create. Price. Num( the. Price * quantity ); 764 765 sub. Total. inner. Text = create. Price. Num( 766 parse. Price. Num( sub. Total. inner. Text ) + 767 the. Price * quantity ); 768 769 } 770 } Outline 6. 2 Function fill. Table

771 // Remove item from the table. 772 function unfill. Table( isbn ) 773 { 774 var the. Price; 6. 3 Function 775 unfill. Table 776 var index = cart. Array[ isbn ]. row. Index; 777 778 // Retrieve the Total Price 6. 4 Function 779 the. Price = parse. Price. Num( load. Shopping. Cart 780 cart. Array[ isbn ]. cells( 6 ). inner. Text. substr( 1 ) ); 781 782 sub. Total. inner. Text = create. Price. Num( 783 parse. Price. Num( sub. Total. inner. Text ) - the. Price ); 784 785 cart. Array[ isbn ] = null; 786 Function load. Shopping. Cart 787 shopping. Cart. delete. Row( index ); loads the XML shopping cart data 788 } into the shopping cart table. 789 790 // Load the shopping cart 791 function load. Shopping. Cart() 792 { 793 // clear out old shopping cart. . . 794 cart. Array = new Array(); 795 796 var table. Rows = shopping. Cart. rows; 797 var table. Length = table. Rows. length; 798 799 for ( i = 1; i < table. Length - 1; i++ ) 800 shopping. Cart. delete. Row( 1 ); 801 Outline

802 803 804 805 806 807 sub. Total. inner. Text = "0. 00"; // Load the cart xml. Shopping. Cart. load( "store. Front. Shopping. Cart" ); var xml. Root = xml. Shopping. Cart. XMLDocument. document. Element ; 808 809 810 if ( xml. Root. node. Name != "cart" ) { xml. Shopping. Cart. XMLDocument. load. XML ( "<cart></cart>" ); 811 812 813 xml. Shopping. Cart. save( "store. Front. Shopping. Cart" ); xml. Root = xml. Shopping. Cart. XMLDocument. document. Element ; 814 815 } 816 817 818 if ( xml. Root. child. Nodes. length > 0 ) { go. Check. Out. disabled = false; go. Clear. Shopping. Cart. disabled = false; 819 820 821 // For each element in the cart, add to shopping cart list var xml. Data = xml. Root. child. Nodes; 822 823 824 825 826 827 for ( i = 0; i < xml. Data. length; i++ ) { fill. Table( xml. Data. item( i ). get. Attribute( "isbn" ), xml. Data. item( i ). get. Attribute( "qty" ) ); } 828 829 830 } 831 refresh. Shopping. Table(); } Outline 6. 4 Function load. Shopping. Cart

832 // Remove all items from the shopping cart 833 function clear. Shopping. Cart() Outline 834 { 835 if ( confirm( "Are you sure you want to clear the " + 836 "Shopping Cart? " ) == 0 ) 837 return; 838 839 cart. Array = new Array(); 840 841 var table. Rows = shopping. Cart. rows; 842 var table. Length = table. Rows. length; 843 844 845 for ( i = 1; i < table. Length - 1; i++ ) shopping. Cart. delete. Row( 1 ); 846 847 sub. Total. inner. Text = "0. 00"; 848 849 // Clear out the cart 850 xml. Shopping. Cart. XMLDocument. load. XML ( "<cart></cart>" ); 851 xml. Shopping. Cart. save( "store. Front. Shopping. Cart" ); 852 853 box. Qty. value = "0"; 854 855 go. Check. Out. disabled = true; 856 go. Clear. Shopping. Cart. disabled = true; 857 } 858 6. 5 Function clear. Shopping. Cart

859 // Return the quantity of an item in the cart. 860 function find. Item( val ) 861 { 862 var xml. Product = Outline Function find. Item provides Java. Script code that retrieves a shopping cart item’s quantity. 6. 6 Function find. Item 863 xml. Shopping. Cart. XMLDocument. select. Single. Node ( 864 "cart/item[ @isbn = '" + val + "' ]" ); 865 866 867 868 869 870 871 872 } if ( xml. Product == null ) return 0; else if ( xml. Product. get. Attribute( "qty" ) == "0" ) return 0; else return parse. Int( xml. Product. get. Attribute( "qty" ) );

873 // Figure 28. 12: the. Items. js 874 875 // Disable/Enable the Add button. 876 function change. Add. Button() 877 { 878 if ( is. Na. N( box. Qty. value ) ) 879 buy. Add. disabled = true; 880 else { 881 if ( parse. Int( box. Qty. value ) >= 0 ) 882 buy. Add. disabled = false; 883 else 884 buy. Add. disabled = true; Function go. Buy adds a book to the 885 } shopping cart when the add button is 886 } clicked (line 279). 887 888 // Buy button pressed 889 function go. Buy() 890 { 891 var xml. Product = 892 xml. Shopping. Cart. XMLDocument. select. Single. Node ( 893 "cart/item[ @isbn = '" + desc. ISBN. inner. Text + "' ]" ); 894 895 var xml. Root = xml. Shopping. Cart. XMLDocument. document. Element ; 896 897 if ( xml. Product == null ) { 898 if ( parse. Int( box. Qty. value, 10 ) <= 0 ) 899 return; 900 901 // Product does not exist. Create it. 902 xml. Product = xml. Root. append. Child( 903 xml. Shopping. Cart. XMLDocument. create. Element ( "item" ) ); Outline 7. the. Items. js 7. 1 Function change. Add. Button 7. 2 Function go. Buy

904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 xml. Product. set. Attribute( "isbn", desc. ISBN. inner. Text ); xml. Product. set. Attribute( "qty", parse. Int( box. Qty. value, 10 ) ); fill. Table( desc. ISBN. inner. Text, parse. Int( box. Qty. value, 10 ) ); refresh. Shopping. Table(); } else if ( parse. Int( box. Qty. value, 10 ) > 0 ) { // Product exits already. Just update. xml. Product. set. Attribute( "isbn", desc. ISBN. inner. Text ); xml. Product. set. Attribute( "qty", parse. Int( box. Qty. value, 10 ) ); fill. Table( desc. ISBN. inner. Text, parse. Int( box. Qty. value, 10 ) ); refresh. Shopping. Table(); } else { // Quantity of zero. Remove item from XML. xml. Root. remove. Child( xml. Product ); unfill. Table( desc. ISBN. inner. Text ); refresh. Shopping. Table(); } xml. Shopping. Cart. save( "store. Front. Shopping. Cart" ); if ( xml. Root. child. Nodes. length == 0 ) { go. Check. Out. disabled = true; go. Clear. Shopping. Cart. disabled = true; } Outline 7. 2 Function go. Buy

936 else { Outline 937 go. Check. Out. disabled = false; 938 go. Clear. Shopping. Cart. disabled = false; 939 } 7. 2 Function go. Buy 940 } Function buy. Check. Out submits the 941 shopping cart to the server for 942 // Checkout button pressed verification when the Checkout 7. 3 Function 943 function buy. Check. Out() buy. Check. Out button is clicked (line 358). 944 { 945 if ( confirm( "Continue Checkout? " ) == 0 ) 946 return; 947 948 // Display the notice. 949 cart. Window. style. display = "none"; 950 cart. Window. style. position = "absolute"; 951 952 product. List. style. display = "none"; 953 product. List. style. position = "absolute"; 954 955 product. Listing. style. display = "none"; 956 product. Listing. style. position = "absolute"; 957 958 notice. Shopping. style. display = "block"; 959 notice. Shopping. style. position = "relative"; 960 961 // Submit the data. 962 var xml. Http = new Active. XObject( "Microsoft. XMLHTTP" ); 963 xml. Http. open( "POST", server. Location + "server. asp", false ); 964 xml. Http. send( xml. Shopping. Cart. XMLDocument ); 965

966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 if ( xml. Http. response. Text != "OK" ) { // An error occurred. Display it. alert( xml. Http. response. Text ); cart. Window. style. display = "block"; cart. Window. style. position = "relative"; product. List. style. display = "block"; product. List. style. position = "relative"; product. Listing. style. display = "block"; product. Listing. style. position = "relative"; notice. Shopping. style. display = "none"; notice. Shopping. style. position = "absolute"; return; } if ( xml. Http. status. Text != "OK" ) { // An error occurred. Display it. alert( "Check. Out could not be completed. n" + " Please try again later. nn" + xml. Http. status. Text ); cart. Window. style. display = "block"; cart. Window. style. position = "relative"; product. List. style. display = "block"; product. List. style. position = "relative"; Outline 7. 3 Function buy. Check. Out

997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 product. Listing. style. display = "block"; product. Listing. style. position = "relative"; notice. Shopping. style. display = "none"; notice. Shopping. style. position = "absolute"; return; } // Clear the shopping cart xml. Shopping. Cart. XMLDocument. load. XML ( "<cart></cart>" ); xml. Shopping. Cart. save( "store. Front. Shopping. Cart" ); // Redirect for user verification window. location = "verify. asp"; } Outline 7. 3 Function buy. Check. Out

1013 // Figure 28. 15: string. Func. js Outline 1014 1015 // Format number to "###, ###. ##" 1016 function create. Price. Num( obj ) 1017 { 1018 8. string. Func. js var str. Num, result, i, the. Price; 1019 1020 places) 1021 // Round the number (in case it is more than 3 decimal 8. 1 Function create. Price. Num the. Price = Math. round( obj * 100 ) / 100 1022 1023 str. Num = the. Price. to. String(); 1024 1025 // format to ####. ## 1026 if ( str. Num. index. Of( ". " ) == -1 ) 1027 str. Num = obj + ". 00"; The file string. Func. js contains Java. Script code that formats currency values into strings and converts strings into currency values. 1028 1029 // insert ', ' into the string 1030 result = str. Num. substr( str. Num. index. Of( ". " ) ); 1031 str. Num = str. Num. substring( 0, str. Num. index. Of( ". " ) ); 1032 1033 for ( i = 0; i < str. Num. length; i++ ) { 1034 if ( ( i % 3 == 0 ) && ( i != 0 ) ) 1035 result = ", " + result; 1036 1037 result; 1038 result = str. Num. char. At( str. Num. length - i - 1 ) + } 1039 1040 1041 return result; }

1042 1043 // Format string "###, ###. ##" to "#####. ##" 1044 function parse. Price. Num( obj ) 1045 { 1046 var i, result = ""; 1047 1048 for ( i = 0; i < obj. length; i++ ) 1049 if ( obj. char. At( i ) != ", " ) 1050 result += obj. char. At( i ); 1051 1052 1053 return parse. Float( result ); } Outline 8. 2 Function parse. Price. Num

1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084  BODY { background: #FFFFFF; font-family: Arial; font-size: 10 pt; } TD { font-family: Arial; font-size: 10 pt; }. label { font-size: 8 pt; font-weight: bold; }. typing { font-family: Courier; font-size: 10 pt; }. marking { font-size: 8 pt; } Outline 9. style. css

1085 1086 . handable 1087 { 1088 1089 cursor: hand; } 1090 1091 . labelhand 1092 { 1093 font-size: 8 pt; 1094 font-weight: bold; 1095 cursor: hand; 1096 } 1097 1098 INPUT. brand 1099 { 1100 font-size: 8 pt; 1101 border-style: solid; 1102 border-width: 1 px; 1103 width: 125 px; 1104 } 1105 1106 INPUT. quantity 1107 { 1108 font-size: 8 pt; 1109 border-style: solid; 1110 border-width: 1 px; 1111 width: 30 px; 1112 1113 } Outline 9. style. css

1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 INPUT. button { font-size: 8 pt; background: #88 DDFF; border-style: outset; border-width: 1 px; vertical-align: top; width: 40 px; cursor: hand; } INPUT. button 2 { font-size: 8 pt; background: #88 DDFF; border-style: outset; border-width: 1 px; vertical-align: top; width: 80 px; cursor: hand; }. user. Data { behavior: url(#default#userdata); } TD. margin { padding-left: 5 px; } Outline 9. style. css

1145 1146 . note 1147 { 1148 font-size: 7 pt; 1149 font-style: italic; 1150 } 1151 1152 . error 1153 { 1154 1155 color: #FF 0000; } Outline 9. style. css

52 28. 4 XML Data (Book Listing) • The book listing is in file products. asp

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <% <% @Language = "VBScript" %> Option Explicit %> Response. Expires = 0 %> ' Figure 28. 17: products. asp %> Outline 1. products. asp <? xml version = "1. 0"? > <productlist xmlns = "x-schema: product. Schema. xml "> <% Dim obj. Connection, obj. Record, str. Query Set obj. Connection = Server. Create. Object( "ADODB. Connection" ) Set obj. Record = Server. Create. Object( "ADODB. Record. Set" ) Call obj. Connection. Open( "DSN=db. Storefront" ) str. Query = "SELECT * FROM Products" Call obj. Record. Open( str. Query, obj. Connection, 1, 2 ) While Not obj. Record. EOF %> <book> <isbn><% =obj. Record( "isbn" ) %></isbn> <publisher><% =obj. Record( "publisher" ) %></publisher> <author><% =obj. Record( "author" ) %></author> <title><% =obj. Record( "title" ) %></title> <price><% =Format. Number( obj. Record( "price" ), 2 )%></price> <pages><% =obj. Record( "pages" ) %></pages> <image><% =obj. Record( "image" ) %></image> <media><% =obj. Record( "media" ) %></media> </book> 1. 1 Database connection 1. 2 <book> tag

31 <% 32 33 Call obj. Record. Move. Next() Wend 34 %> 35 </productlist> Outline

55 Output from products. asp

36 <? xml version = "1. 0"? > 37 38  39 40 <Schema xmlns = "urn: schemas-microsoft-com: xml-data "> 41 <Element. Type name = "isbn" content = "text. Only"/> 42 <Element. Type name = "publisher" content = "text. Only"/> 43 44 <Element. Type name = "author" content = "text. Only"/> <Element. Type name = "title" content = "text. Only"/> 45 46 47 <Element. Type name = "price" content = "text. Only"/> <Element. Type name = "pages" content = "text. Only"/> <Element. Type name = "image" content = "text. Only"/> 48 49 <Element. Type name = "media" content = "text. Only"/> 50 51 52 <Element. Type name = "book" content = "elt. Only" model = "closed"> <element type = "isbn"/> 53 <element type = "publisher"/> 54 55 <element type = "author"/> <element type = "title"/> 56 57 58 59 60 61 <element type = "price"/> <element type = "pages"/> <element type = "image"/> <element type = "media"/> </Element. Type> <Element. Type name = "productlist" content = "elt. Only" 62 model = "closed"> 63 <element type = "book" max. Occurs = "*"/> 64 </Element. Type> 65 </Schema> Outline 2. product. Schema. xml 2. 1 <Schema> tag

66 <? xml version = "1. 0"? > 67 68 69 70 71 72 73 74 <book> 75 <isbn><xsl: value-of select = "isbn"/></isbn> 76 <publisher>< xsl: value-of select = "publisher"/> 77 </publisher> 78 <author><xsl: value-of select = "author"/></author> 79 <title><xsl: value-of select = "title"/></title> 80 <price><xsl: value-of select = "price"/></price> 81 <pages><xsl: value-of select = "pages"/></pages> 82 <image><xsl: value-of select = "image"/></image> 83 <media><xsl: value-of select = "media"/></media> 84 Outline The xsl: if element filters the data  using the expression string that we 3. sorting. xsl created in product. Search. js. By <productlist> <xsl: for-each select = "book" order-by = setting "id" the attribute expr to true, all records are initially displayed. 3. 1 <productlist> xmlns: xsl = "http: //www. w 3. org/TR/WD-xsl" > tag <xsl: if expr = "true"> </book> 85 </xsl: if> 86 </xsl: for-each> 87 </productlist>

58 Other Server-Side Documents • Table of server-side documents

88 <% @Language = "VBScript" %> Outline 89 <% Option Explicit %> 90 <% Response. Expires = 0 %> 91 <% 92 93 94 a DOMDocument 4. 1 Create a (Microsoft. XMLDOM)DOMDocument object to store the incoming XML data. Create Dim xml. Data, xml. Items, obj. Connection, obj. Record 95 96 4. server. asp ' Figure 28. 20: server. asp Session( "Store. Front. Order. ID" ) = Empty 97 98 Set xml. Data = Server. Create. Object( "Microsoft. XMLDOM" ) 99 xml. Data. Async = False 100 Call xml. Data. Load( Request ) 101 102 Lines 102 through 113 that thedata into 4. 3 verify Insert the data we loaded is valid. the database If xml. Data. Xml = "" Then 103 Response. Content. Type = "text/html" 104 Call Response. Write( "Invalid submission. " ) 105 Call Response. End() 106 4. 2 Verify the data End If 107 108 If xml. Data. Document. Element. Child. Nodes. Length <= 0 Then 109 Response. Content. Type = "text/html" 110 Call Response. Write( "Invalid number of items Lines in " &115 _ 111 112 113 "Shopping Cart" ) through 136 insert the data into the database. Call Response. End() End If 114 115 116 Set xml. Items = xml. Data. Document. Element. Child. Nodes

117 Set obj. Connection = Server. Create. Object( "ADODB. Connection" ) 118 Set obj. Record = Server. Create. Object( "ADODB. Record. Set" ) 119 Call obj. Connection. Open( "DSN=db. Storefront" ) 120 121 obj. Record. Active. Connection = obj. Connection 122 obj. Record. Source = "Orders" 123 obj. Record. Cursor. Type = 1 ' ad. Open. Keyset 124 obj. Record. Lock. Type = 2 ' ad. Lock. Pessimistic 125 Call obj. Record. Open() 126 127 Call obj. Record. Add. New() 128 obj. Record( "orderdate" ) = Now 129 obj. Record( "product_xml" ) = xml. Data. xml 130 Call obj. Record. Update() Line 127 does not execute an SQL statement directly, but uses the Record. Set method Addnew. 131 132 Session( "Store. Front. Order. Date" ) = obj. Record( "orderdate" ) 133 Session( "Store. Front. Order. ID" ) = _ 134 Right( "000000" & obj. Record( "orderid" ), 6 ) 135 136 Call obj. Record. Close() 137 138 ' Everything is OK 139 Response. Content. Type = "text/html" 140 Call Response. Write( "OK" ) 141 %> Outline

142 <% 143 <% 144 <% 145 <% 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 @Language = "VBScript" %> Option Explicit %> Response. Expires = 0 %> ' Figure 28. 21: verify. asp Dim obj. Connect, obj. Record, str. Query, error. Message, count Dim store. Front. Order. ID, store. Front. Order. Date, customer. ID If Session( "store. Front. Order. ID" ) = Empty Or _ Session( "store. Front. Order. Date" ) = Empty Then Session( "store. Front. Order. ID" ) = Empty Session( "store. Front. Order. Date" ) = Empty Session( "error" ) = "Submission / Verification Error. " Call Response. Redirect( "account. asp" ) End If If Request( "cmd. Button" ) = "Cancel" And _ Request( "order. ID" ) <> Empty Then ' Query DB for record. Set obj. Connect = Server. Create. Object( "ADODB. Connection" ) Set obj. Record = Server. Create. Object( "ADODB. Record. Set" ) Call obj. Connect. Open( "DSN=db. Storefront" ) str. Query = "SELECT * FROM Orders WHERE orderid = " & _ Request( "order. ID" ) Call obj. Record. Open( str. Query, obj. Connect, 1, 2 ) Outline 5. verify. asp

173 174 175 176 177 178 179 180 181 182 183 184 185 186 If obj. Record. Count > 0 Then Call obj. Record. Delete() Call obj. Record. Close() End If Call Response. Redirect( "index. html" ) End If If Request( "cmd. Button" ) = "Submit" Then If Request( "txt. User" ) <> Empty And _ Request( "txt. Pass" ) <> Empty And _ Request( "order. ID" ) <> Empty Then Set obj. Connect = Server. Create. Object("ADODB. Connection ") 187 Set obj. Record = Server. Create. Object( "ADODB. Record. Set" ) 188 189 Call obj. Connect. Open( "DSN=db. Storefront" ) str. Query = "SELECT * FROM Customer WHERE userid = '" & _ 190 191 192 193 194 195 196 197 198 199 200 201 202 203 Request( "txt. User" ) & "' AND password = '" & _ Request( "txt. Pass" ) & "'" Call obj. Record. Open( str. Query, obj. Connect, 1, 2 ) If obj. Record. Count > 0 Then customer. ID = obj. Record( "customerid" ) Session( "store. Front. Logged. In" ) = customer. ID Call obj. Record. Close() ' Get Order. str. Query = "SELECT * FROM Orders WHERE orderid = " & _ Request( " order. ID" ) & " AND verified = False" Outline 5. 1 Verify the user name and password are correct 5. 2 Connect to database 5. 3 Set the user and total price of the order into the record

204 Call obj. Record. Open( str. Query, obj. Connect, 1, 2 ) 205 206 If obj. Record. Count > 0 Then 207 ' Update Records 208 obj. Record( "orderdate" ) = Now 209 obj. Record( "verified" ) = True 210 obj. Record( "customerid" ) = customer. ID 211 obj. Record( "total_cost" ) = Request( "total" ) 212 Call obj. Record. Update() 213 Else 214 Session( " store. Front. Order. ID" ) = Empty 215 Session( " store. Front. Order. Date" ) = Empty 216 Session( "error" ) = "Order Not Found" 217 Call Response. Redirect( "account. asp" ) 218 End If 219 220 Session( "store. Front. Order. ID" ) = Empty 221 Session( "store. Front. Order. Date" ) = Empty 222 223 ' Finished 224 Session( "error" ) = "Order Verified. " & _ 225 226 227 "Thank You for your purchase. " Call Response. Redirect( "account. asp" ) Else 228 Call obj. Record. Close() 229 Call obj. Connect. Close() 230 Session( "store. Front. Logged. In" ) = Empty 231 error. Message = "Invalid Username / Password pair. " 232 Outline End If 5. 3 Set the user and total price of the order into the record 5. 4 Redirect user to the account status page

233 Else 234 Session( "store. Front. Logged. In" ) = Empty 235 error. Message = "Invalid Username / Password pair. " 236 237 End If 238 239 store. Front. Order. ID = Session( "store. Front. Order. ID" ) 240 store. Front. Order. Date = Session( "store. Front. Order. Date" ) 241 %> 242 243 <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 244 <HTML> 245 246 <HEAD> 247 <TITLE>Store. Front</TITLE> 248 <LINK REL = "stylesheet" TYPE = "text/css" HREF = "style. css"> 249 <SCRIPT LANGUAGE = "Java. Script" SRC = "table. Highlight. js"> 250 </SCRIPT> 251 </HEAD> 252 253 <BODY ONLOAD = "refresh. Shopping. Table(); "> 254 <TABLE WIDTH = "750" ALIGN = "center" CELLPADDING = "0" 255 CELLSPACING = "0" BORDER = "0" BGCOLOR = "#67 CDFF"> 256 <TR> 257 <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "35"><IMG 258 SRC = "images/header 2. jpg" WIDTH = "750" 259 HEIGHT = "35"></TD> 260 </TR> Outline 5. 5 Begin HTML portion 5. 6 Shopping table header

261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 <TR> <TD WIDTH = "750" VALIGN = "top" ALIGN = "center"> <P>Please confirm your order <BR> <DIV CLASS = "error"><% =error. Message %></DIV><BR></P> <TABLE WIDTH = "670" CELLPADDING = "2" CELLSPACING = "0" BORDER = "0"> <TR> <TD WIDTH = "25%" ALIGN = "right" CLASS = "label">Order ID: </TD> <TD WIDTH = "75%" CLASS = "typing"> <% =store. Front. Order. ID %></TD> </TR> <TD WIDTH = "25%" ALIGN = "right" CLASS = "label">Order Date: </TD> <TD WIDTH = "75%" CLASS = "typing"> <% =store. Front. Order. Date %></TD> </TR> </TABLE> <BR> <TABLE WIDTH = "670" CELLPADDING = "0" CELLSPACING = "0" BORDER = "0" ID = "shopping. Cart"> <THEAD> <TD WIDTH = "90" CLASS = "label"> ISBN </TD> <TD WIDTH = "90" CLASS = "label"> Author </TD> Outline 5. 6 Shopping table header

291 <TD WIDTH = "280" CLASS = "label"> 292 293 294 295 296 Title </TD> <TD WIDTH = "70" ALIGN = "right" CLASS = "label"> Price 297 </TD> 298 299 <TD WIDTH = "10"></TD> <TD WIDTH = "50" ALIGN = "center" 300 301 302 CLASS = "label"> Quantity </TD> 303 304 <TD WIDTH = "80" ALIGN = "right" CLASS = "label"> On lines 305 306 307 Total </TD> </THEAD> 308 <% 5. 7 Connect to database 5. 8 Generate book list 309 through 380, the book list is generated by matching the items in the XML shopping cart to the items in the database. We also calculate the total price of the order. 309 310 Dim new. Info, new. Info. Root, num. Total, product Dim prod. ISBN, prod. Author, prod. Title, prod. Quantity 311 312 313 314 315 316 Dim prod. Total, prod. Price 317 318 319 320 Outline Set obj. Connect = Server. Create. Object( "ADODB. Connection" ) Set obj. Record = Server. Create. Object( "ADODB. Record. Set" ) Call obj. Connect. Open( "DSN=db. Storefront" ) str. Query = "SELECT * FROM Orders WHERE orderid = " & _ store. Front. Order. ID Call obj. Record. Open( str. Query, obj. Connect, 1, 2 )

321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 If obj. Record. Count > 0 Then If obj. Record("orderdate") <> store. Front. Order. Date Then Call Response. Clear() Call Response. Redirect( "index. html" ) End If Set new. Info = Server. Create. Object( "Microsoft. XMLDOM" ) new. Info. Async = False Call new. Info. Load. XML( obj. Record( "product_xml" ) ) Call obj. Record. Close() Set new. Info. Root = new. Info. Document. Element num. Total = 0 For count = 0 To ( new. Info. Root. Child. Nodes. Length - 1 ) Set product = new. Info. Root. Child. Nodes. Item ( count ) prod. ISBN = product. Get. Attribute( "isbn" ) ' Search the DB for the prod. ID. str. Query = "SELECT * FROM Products WHERE isbn = '" & _ prod. ISBN & "'" Call obj. Record. Open( str. Query, obj. Connect, 1, 2 ) ' Fill in the rest of the items. prod. Author = obj. Record( "author" ) prod. Title = obj. Record( "title" ) prod. Price = obj. Record( "price" ) prod. Price = Format. Number( prod. Price, 2 ) Outline 5. 8 Generate book list

352 prod. Quantity = product. get. Attribute( "qty" ) 353 354 355 356 357 %> prod. Total = prod. Price * prod. Quantity prod. Total = Format. Number( prod. Total, 2 ) num. Total = num. Total + prod. Total Call obj. Record. Close() 358 <TR> 359 360 <TD WIDTH = "90" VALIGN = "top"> <% =prod. ISBN %></TD> 361 362 363 <TD WIDTH = "90" VALIGN = "top"> <% =prod. Author %></TD> <TD WIDTH = "280" VALIGN = "top"> 364 365 <% =prod. Title %></TD> <TD WIDTH = "70" ALIGN = "right" 366 367 368 VALIGN = "top"> $<% =prod. Price %></TD> <TD WIDTH = "10"></TD> 369 <TD WIDTH = "50" ALIGN = "center" 370 371 372 373 374 375 376 <% 377 VALIGN = "top"> <% =prod. Quantity %></TD> <TD WIDTH = "80" ALIGN = "right" VALIGN = "top"> $<% =prod. Total %></TD> </TR> Next 378 379 num. Total = Format. Number( num. Total, 2 ) 380 End If 381 %> Outline 5. 8 Generate book list 5. 9 Shopping table body

382 <TFOOT> 383 384 385 386 387 <TD <TD <TD 388 <TD WIDTH = "50" ALIGN = "right" 389 390 391 392 393 394 395 396 397 398 399 WIDTH WIDTH = = = "90"></TD> "280"></TD> "70"></TD> "10"></TD> CLASS = "label"> Total: </TD> <TD WIDTH = "80" ALIGN = "right"> $<% =num. Total %> </TD> </TFOOT> </TABLE> <BR> <FORM METHOD = "POST" ACTION = "verify. asp"> <DIV ALIGN = "center"> 400 401 <TABLE CELLSPACING = "1" CELLPADDING = "0"> <TR> 402 403 404 405 406 407 <TD CLASS = "label">Username</TD> <TD CLASS = "label">Password</TD> </TR> <TD> <INPUT TYPE = "text" 408 409 410 411 NAME = "txt. User" ID = "txt. User" VALUE = "<% =Request( "txt. User" ) %>" CLASS = "typing"> </TD> Outline 5. 10 Shopping table footer

412 <TD> 413 <INPUT TYPE = "password" 414 NAME = "txt. Pass" ID = "txt. Pass" 415 CLASS = "typing"> 416 </TD> 417 </TR> 418 </TABLE> 419 <BR> 420 <INPUT TYPE = "submit" NAME = "cmd. Button" 421 VALUE = "Submit" CLASS = "button 2"> 422 <INPUT TYPE = "submit" NAME = "cmd. Button" 423 VALUE = "Cancel" CLASS = "button 2"> 424 <INPUT TYPE = "hidden" NAME = "order. ID" 425 VALUE = "<% =store. Front. Order. ID %>"> 426 <INPUT TYPE = "hidden" NAME = "total" 427 VALUE = "<% =num. Total %>"> 428 </DIV> 429 430 </FORM> </TD> 431 </TR> 432 <TR> 433 <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "15"><IMG 434 SRC = "images/footer. jpg" WIDTH = "750" 435 HEIGHT = "15"></TD> 436 </TR> 437 </TABLE> 438 </BODY> 439 440 </HTML> Outline 5. 10 Shopping table footer

71 Output from verify. asp

441 <% @Language = "VBScript" %> 442 <% Option Explicit %> 443 <% Response. Expires = 0 %> 444 445 <% ' Figure 28. 22: account. asp %> 446 447 <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 448 <HTML> 449 450 <HEAD> 451 <TITLE>Store. Front</TITLE> 452 <LINK REL = "stylesheet" TYPE = "text/css" HREF = "style. css"> 453 </HEAD> 454 455 <BODY> 456 <CENTER> 457 <TABLE WIDTH = "750" ALIGN = "center" CELLPADDING = "0" 458 CELLSPACING = "0" BORDER = "0" BGCOLOR = "#67 CDFF" 459 ID = "product. List" STYLE = "position: relative; 460 display: block; top: 0; left: 0; " > 461 <TR> 462 <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "35"><IMG 463 SRC = "images/header. jpg" WIDTH = "650" 464 HEIGHT = "35"><A HREF = "index. html"><IMG 465 SRC = "images/head_products. jpg" 466 WIDTH = "100" HEIGHT = "35" BORDER = "0"></A></TD> 467 </TR> 468 <TR> 469 <TD WIDTH = "150" VALIGN = "top" CLASS = "margin" 470 BGCOLOR = "#CCDDFF"> 471 <STRONG>Account Information</STRONG><BR> Outline 6. account. asp 6. 1 Account information table header

472 <% 473 If Session( "Store. Front. Logged. In" ) = Empty Then Outline 474 %> 475 <A HREF = "login. asp">Login</A><BR> 476 <% 477 Else 478 %> 479 <A HREF = "profile. asp">Customer Profile</A><BR> 480 <A HREF = "orders. asp">Orders</A><BR> 481 <A HREF = "logoff. asp">Logoff</A><BR> 482 <% 483 End If 484 %> 485 <BR> 486 <STRONG>Help!</STRONG><BR> 487 <A HREF = "faq. asp">FAQ</A><BR> 488 Customer Support 489 <DIV CLASS = "note"> not available</DIV> 490 </TD> 491 <TD WIDTH = "600" VALIGN = "top" CLASS = "margin"> 492 <P>Welcome to the Store. Front Account Information 493 page. </P> 494 <P CLASS = "error"><% =Session( "Error" ) %></P> 495 <P>Please select an item from the menu. </P> 496 497 </TD> </TR> 6. 2 Account information table body

498 499 <TR> <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "15"><IMG 500 SRC = "images/footer. jpg" WIDTH = "750" 501 HEIGHT = "15"></TD> 502 </TR> 503 </TABLE> 504 </CENTER> 505 </BODY> 506 <% 507 Session( "Error" ) = Empty 508 %> 509 </HTML> Outline 6. 3 Account information table footer

510 <% 511 <% 512 <% 513 <% 514 515 516 517 518 519 520 521 522 @Language = "VBScript" %> Option Explicit %> Response. Expires = 0 %> ' Figure 28. 23: login. asp Dim obj. Connect, obj. Record, str. Query, Outline Query the database for the username and password pair and if successful, we store 7. login. asp the userid as a session variable named Store. Front. Logged. In. error. Message 7. 1 Connect to database If Request( "cmd. Button" ) <> Empty Then If Request( "txt. User" ) <> Empty And _ Request( "txt. Pass" ) <> Empty Then Set obj. Connect = Server. Create. Object( "ADODB. Connection" ) 523 Set obj. Record = Server. Create. Object( "ADODB. Record. Set" ) 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 Call obj. Connect. Open( "DSN=db. Storefront" ) str. Query = "SELECT * FROM Customer WHERE " & _ "userid = '" & Request( "txt. User" ) & _ "' AND password = '" & Request( " txt. Pass" ) & "'" Call obj. Record. Open( str. Query, obj. Connect, 1, 2 ) If obj. Record. Count > 0 Then Session( "Store. Front. Logged. In" ) = _ obj. Record( "customerid" ) Call Response. Redirect( "profile. asp" ) Else Session( "Store. Front. Logged. In" ) = Empty error. Message = "Invalid Username / Password pair. " End If 7. 2 Check login

540 Else 541 542 543 Outline error. Message = "Invalid Username / Password pair. " End If 7. 3 Function validate 544 %> 545 546 <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 547 <HTML> 548 549 <HEAD> 550 <TITLE>Store. Front</TITLE> 551 <LINK REL = "stylesheet" TYPE = "text/css" HREF = "style. css"> 552 <SCRIPT LANGUAGE = "Java. Script"> 553 We perform client-side verification for the username and password fields. 554 // Validate the username and password fields 555 function validate() 556 { 557 if ( login. txt. User. value == "" || 558 login. txt. Pass. value == "" ) { 559 alert( "Some fields empty" ); 560 561 return false; 562 } 563 564 565 return true; } 566 </SCRIPT> 567 </HEAD> 568

569 <BODY> 570 <CENTER> 571 <TABLE WIDTH = "750" ALIGN = "center" CELLPADDING = "0" 572 CELLSPACING = "0" BORDER = "0" BGCOLOR = "#67 CDFF" 573 ID = "product. List" STYLE = "position: relative; 574 display: block; top: 0; left: 0; " > 575 <TR> 576 <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "35"><IMG 577 SRC = "images/header. jpg" WIDTH = "650" 578 HEIGHT = "35"><A HREF = "index. html"><IMG 579 SRC = "images/head_products. jpg" 580 WIDTH = "100" HEIGHT = "35" BORDER = "0"></A></TD> 581 </TR> 582 <TR> 583 <TD WIDTH = "150" VALIGN = "top" CLASS = "margin" 584 BGCOLOR = "#CCDDFF"> 585 <STRONG>Account Information</STRONG><BR> 586 Login<BR> 587 <STRONG>Help!</STRONG><BR> 588 <A HREF = "faq. asp">FAQ</A><BR> 589 Customer Support 590 <DIV CLASS = "note"> not available</DIV> 591 592 593 594 595 596 597 598 599 600 601 602 </TD> <TD WIDTH = "600" VALIGN = "top" CLASS = "margin"> <P>Please enter your username and password </P> <P CLASS = "error"><% =error. Message %></P> <FORM METHOD = "POST" ACTION = "login. asp" ID = "login" ONSUBMIT = "return validate(); "> <DIV ALIGN = "center"> <TABLE CELLSPACING = "1" CELLPADDING = "0"> <TR> <TD CLASS = "label">Username</TD> <TD CLASS = "label">Password</TD> </TR> Outline 7. 4 Login table header 7. 5 Login table body

603 <TR> 604 Outline <TD> 605 <INPUT TYPE = "text" 606 NAME = "txt. User" ID = "txt. User" 607 CLASS = "typing"> 608 </TD> 609 <TD> 610 7. 6 Login table footer <INPUT TYPE = "password" 611 NAME = "txt. Pass" ID = "txt. Pass" 612 CLASS = "typing"> 613 </TD> 614 </TR> 615 </TABLE> 616 <BR> 617 <INPUT TYPE = "submit" NAME = "cmd. Button" 618 VALUE = "Login" CLASS = "button 2"> 619 </DIV> 620 621 </FORM> </TD> 622 </TR> 623 <TR> 624 <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "15"><IMG 625 SRC = "images/footer. jpg" WIDTH = "750" 626 HEIGHT = "15"></TD> 627 </TR> 628 </TABLE> 629 </CENTER> 630 </BODY> 631 </HTML> 7. 5 Login table body

79 Output from login. asp

634 <% Response. Expires = 0 %> 635 <% 636 ' Figure 28. 24: logoff. asp 637 638 ' Reset the User ID. 639 Session( "Store. Front. Logged. In" ) = Empty 640 %> 641 642 <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 643 <HTML> 644 645 <HEAD> 646 <TITLE>Store. Front</TITLE> 647 <LINK REL = "stylesheet" TYPE = "text/css" HREF = "style. css"> 648 </HEAD> 649 650 <BODY> 651 <CENTER> 652 <TABLE WIDTH = "750" ALIGN = "center" CELLPADDING = "0" 653 CELLSPACING = "0" BORDER = "0" BGCOLOR = "#67 CDFF" 654 ID = "product. List" STYLE = "position: relative; 655 display: block; top: 0; left: 0; " > 656 <TR> 657 <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "35"><IMG 658 SRC = "images/header. jpg" WIDTH = "650" 659 HEIGHT = "35"><A HREF = "index. html"><IMG 660 SRC = "images/head_products. jpg" 661 WIDTH = "100" HEIGHT = "35" BORDER = "0"></A></TD> 662 Outline </TR> 8. logoff. asp 8. 1 Logoff table header

663 664 <TR> <TD WIDTH = "150" VALIGN = "top" CLASS = "margin" 665 BGCOLOR = "#CCDDFF"> 666 <STRONG>Account Information</STRONG><BR> 667 <A HREF = "login. asp">Login</A><BR> 668 <STRONG>Help!</STRONG><BR> 669 <A HREF = "faq. asp">FAQ</A><BR> 670 Customer Support 671 <DIV CLASS = "note"> not available</DIV> 672 </TD> 673 <TD WIDTH = "600" VALIGN = "top" CLASS = "margin"> 674 675 <P>You have logged off. </P> </TD> 676 </TR> 677 <TR> 678 <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "15"><IMG 679 SRC = "images/footer. jpg" WIDTH = "750" 680 HEIGHT = "15"></TD> 681 </TR> 682 </TABLE> 683 </CENTER> 684 </BODY> 685 </HTML> Outline 8. 2 Logoff table body 8. 3 Logoff table footer

82 Output from logoff. asp

686 <% 687 <% 688 <% 689 <% 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 @Language = "VBScript" %> Option Explicit %> Response. Expires = 0 %> ' Figure 28. 25: profile. asp Dim obj. Connection, obj. Record, str. Query, num. ID, error. Message ' Check for Login. If Session( "store. Front. Logged. In" ) = Empty Then Session( "error" ) = "You are not logged in. " Call Response. Redirect( "account. asp" ) End If ' Get the Customer profile Set obj. Connection = server. Create. Object( "ADODB. Connection" ) Set obj. Record = server. Create. Object( "ADODB. Record. Set" ) Call obj. Connection. Open( "DSN=db. Storefront" ) str. Query = "SELECT * FROM Customer WHERE customerid = " & _ Session("Store. Front. Logged. In ") Call obj. Record. Open( str. Query, obj. Connection, 1, 2 ) If obj. Record. Count > 0 Then ' Check update status If Request( "cmd. Submit" ) <> Empty Then ' If password field nonempty, update it. If Request( "password 1" ) <> Empty Then obj. Record( "password" ) = Request( "password 1" ) End If Outline 9. profile. asp 9. 1 Connect to database

717 718 719 720 721 ' Billing information obj. Record( "bill_fname" ) = Request( "bill_fname" ) obj. Record( "bill_lname" ) = Request( "bill_lname" ) obj. Record( "bill_address 1" ) = Request( "bill_address 1" ) 722 obj. Record( "bill_address 2" ) = Request( "bill_address 2" ) 723 724 725 726 727 728 729 730 731 732 obj. Record( "bill_city" ) = Request( "bill_city" ) "bill_state" ) = Request( "bill_state" ) "bill_zip" ) = Request( "bill_zip" ) "bill_country" ) = Request( "bill_country" ) "bill_phone" ) = Request( "bill_phone" ) ' Shipping obj. Record( information "ship_fname" ) = Request( "ship_fname" ) "ship_lname" ) = Request( "ship_lname" ) "ship_address 1" ) = Request( "ship_address 1" ) 733 obj. Record( "ship_address 2" ) = Request( "ship_address 2" ) 734 735 736 737 738 739 740 741 742 743 744 745 746 747 obj. Record( 748 Call obj. Record. Update() "ship_city" ) = Request( "ship_city" ) "ship_state" ) = Request( "ship_state" ) "ship_zip" ) = Request( "ship_zip" ) "ship_country" ) = Request( "ship_country" ) "ship_phone" ) = Request( "ship_phone" ) ' Credit information obj. Record( "credit_name" ) = Request( "credit_name" ) If Request( "credit_number" ) <> Empty Then obj. Record( "credit_number" ) = _ Request( "credit_number" ) End If obj. Record( "credit_expire" ) = Request( "credit_expire" ) Outline 9. 2 Make database requests

749 750 error. Message = "Profile updated. " 751 End If 752 Else 9. 3 Function 753 error. Message = "No Records Found. " 754 End If 755 %> 756 757 <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 758 <HTML> 759 760 <HEAD> 761 <TITLE>Store. Front</TITLE> Function validate performs client 762 <LINK REL = "stylesheet" TYPE = "text/css" HREF = "style. css"> side verification of the dates and phone 763 <SCRIPT LANGUAGE = "Java. Script"> numbers, by using regular expressions. 764 765 // Validate the form 766 function validate() 767 { 768 // Validate Password 769 if ( form. password 1. value != form. password 2. value ) { 770 error. Message. inner. Text = "Password fields do not match. "; Outline 771 772 773 774 775 776 777 778 779 form. password 1. scroll. Into. View(); alert( "Password fields do not match. " ); return false; } // Validate Phone Numbers var phone. Reg = new Reg. Exp( "\d{3}-\d{4}" ); validate

780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 if ( phone. Reg. test( form. bill_phone. value ) == false ) { error. Message. inner. Text = "Billing Phone number is formatted incorrectly. "; form. bill_phone. scroll. Into. View (); alert( "Billing Phone number is " + "formatted incorrectly. " ); return false; } if ( phone. Reg. test( form. ship_phone. value ) == false ) { error. Message. inner. Text = "Shipping Phone number is formatted incorrectly. "; form. ship_phone. scroll. Into. View (); alert( "Shipping Phone number is " + "formatted incorrectly. " ); return false; } // Validate Credit Expiration Date var date. Reg = new Reg. Exp( "\d{2}/\d{4}" ); if ( date. Reg. test( form. credit_expire. value ) == false) { error. Message. inner. Text = "Credit Expiration date is formatted incorrectly. "; form. credit_expire. scroll. Into. View (); alert( "Credit Expiration date is " + "formatted incorrectly. " ); return false; } Outline 9. 3 Function validate

812 813 // Everything is OK 814 return true; 815 } 816 </SCRIPT> 817 </HEAD> 818 819 <BODY> 820 <CENTER> 821 <TABLE WIDTH = "750" ALIGN = "center" CELLPADDING = "0" 822 CELLSPACING = "0" BORDER = "0" BGCOLOR = "#67 CDFF" 823 ID = "product. List" STYLE = "position: relative; 824 display: block; top: 0; left: 0; " > 825 <TR> 826 <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "35"><IMG 827 SRC = "images/header. jpg" WIDTH = "650" 828 HEIGHT = "35"><A HREF = "index. html"><IMG 829 SRC = "images/head_products. jpg" 830 WIDTH = "100" HEIGHT = "35" BORDER = "0"></A></TD> 831 </TR> 832 <TR> 833 <TD WIDTH = "150" VALIGN = "top" CLASS = "margin" 834 BGCOLOR = "#CCDDFF"> 835 <STRONG>Account Information</STRONG><BR> 836 <% 837 If Session( "Store. Front. Logged. In" ) = Empty Then 838 %> 839 <A HREF = "login. asp">Login</A><BR> 840 <% 841 Else 842 %> Outline 9. 4 Customer profile table header

843 Customer Profile <BR> 844 <A HREF = "orders. asp">Orders</A><BR> 845 <A HREF = "logoff. asp">Logoff</A><BR> 846 <% 847 End If 848 849 num. ID = Right( "000000" & obj. Record( "customerid" ), 6 ) 850 %> 851 <BR> 852 <STRONG>Help!</STRONG><BR> 853 <A HREF = "faq. asp">FAQ</A><BR> 854 Customer Support 855 <DIV CLASS = "note"> not available</DIV> 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 </TD> <TD WIDTH = "600" VALIGN = "top" CLASS = "margin"> <P>This is your Customer Profile. </P> <P ID = "error. Message" CLASS = "error"> <% =error. Message %></P> <FORM METHOD = "POST" ACTION = "profile. asp" ONSUBMIT = "return validate(); " ID = "form"> <TABLE WIDTH = "100%" CELLPADDING = "2" CELLSPACING = "0"> <TR> <TD WIDTH = "25%" CLASS = "label" ALIGN = "right"></TD> <TD WIDTH = "75%" CLASS = "label"> User Information </TD> </TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">Customer ID</TD> Outline 9. 5 Customer profile table body

874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 <TD WIDTH = "75%" CLASS = "typing"> <% =num. ID %></TD> </TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">Username</TD> <TD WIDTH = "75%" CLASS = "typing"> <% =obj. Record( "userid" ) %></TD> </TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">Password</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "password" CLASS = "typing" ID = "password 1" NAME = "password 1" SIZE = "20"></TD> </TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">Confirm Password</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "password" CLASS = "typing" ID = "password 2" NAME = "password 2" SIZE = "20"></TD> </TR> <TD WIDTH = "100%" COLSPAN = "2"> </TD> </TR> <TD WIDTH = "25%" CLASS = "label" ALIGN = "right"></TD> Outline 9. 5 Customer profile table body

906 <TD WIDTH = "75%" CLASS = "label"> 907 Customer Information </TD> 908 </TR> 909 <TR> 910 <TD WIDTH = "25%" CLASS = "marking" 911 ALIGN = "right">First Name</TD> 912 <TD WIDTH = "75%" CLASS = "typing"> 913 <% =obj. Record( "fname" ) %></TD> 914 </TR> 915 <TR> 916 <TD WIDTH = "25%" CLASS = "marking" 917 ALIGN = "right">Last Name</TD> 918 <TD WIDTH = "75%" CLASS = "typing"> 919 <% =obj. Record( "lname" ) %></TD> 920 </TR> 921 <TR> 922 <TD WIDTH = "100%" COLSPAN = "2"> 923 </TD> 924 </TR> 925 <TR> 926 <TD WIDTH = "25%" CLASS = "label" 927 928 ALIGN = "right"></TD> <TD WIDTH = "75%" CLASS = "label"> 929 Billing Information </TD> 930 </TR> 931 <TR> 932 933 <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">First Name</TD> Outline 9. 5 Customer profile table body

934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "20" CLASS = "typing" ID = "bill_fname" NAME = "bill_fname" VALUE = "<% =obj. Record( "bill_fname" ) %>"> </TD> </TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">Last Name</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE= "20" CLASS = "typing" ID = "bill_lname" NAME = "bill_lname" VALUE = "<% =obj. Record( "bill_lname" ) %>"> </TD> </TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">Address</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "30" CLASS = "typing" ID = "bill_address 1" NAME = "bill_address 1" VALUE = "<% =obj. Record( "bill_address 1" ) %>"> </TD> </TR> Outline 9. 5 Customer profile table body

965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 <TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right"></TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "30" CLASS = "typing" ID = "bill_address 2" NAME = "bill_address 2" VALUE = "<% =obj. Record( "bill_address 2" ) %>"> </TD> </TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">City</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "20" CLASS = "typing" ID = "bill_city" NAME = "bill_city" VALUE = "<% =obj. Record( "bill_city" ) %>"> 985 986 987 988 989 990 991 992 993 994 995 996 997 </TD> </TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">State</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "20" CLASS = "typing" ID = "bill_state" NAME = "bill_state" VALUE = "<% =obj. Record( "bill_state" ) %>"> </TD> </TR> Outline 9. 5 Customer profile table body

998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 <TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">Postal Code</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "20" CLASS = "typing" ID = "bill_zip" NAME = "bill_zip" VALUE = "<% =obj. Record( "bill_zip" ) %>"> </TD> </TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">Country</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "20" CLASS = "typing" ID = "bill_country" NAME = "bill_country" VALUE = "<% =obj. Record( "bill_country" ) %>"> </TD> </TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">Phone Number</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "12" CLASS = "typing" ID = "bill_phone" NAME = "bill_phone" MAXLENGTH = "12" VALUE = "<% =obj. Record( "bill_phone" ) %>"> ###-#### </TD> </TR> Outline 9. 5 Customer profile table body

1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 <TR> <TD WIDTH = "100%" COLSPAN = "2"> </TD> </TR> <TD WIDTH = "25%" CLASS = "label" ALIGN = "right"></TD> <TD WIDTH = "75%" CLASS = "label"> Shipping Information </TD> </TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">First Name</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "20" CLASS = "typing" ID = "ship_fname" NAME = "ship_fname" VALUE = "<% =obj. Record( "ship_fname" ) %>"> </TD> </TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">Last Name</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "20" CLASS = "typing" ID = "ship_lname" NAME = "ship_lname" VALUE = "<% =obj. Record( "ship_lname" ) %>"> </TD> </TR> Outline 9. 5 Customer profile table body

1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 %>"> 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 %>"> 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 <TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">Address</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "30" CLASS = "typing" ID = "ship_address 1" NAME = "ship_address 1" VALUE = "<% =obj. Record( "ship_address 1" ) </TD> </TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right"></TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "30" CLASS = "typing" ID = "ship_address 2" NAME = "ship_address 2" VALUE = "<% =obj. Record( "ship_address 2" ) </TD> </TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">City</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "20" CLASS = "typing" ID = "ship_city" NAME = "ship_city" VALUE = "<% =obj. Record( "ship_city" ) %>"> </TD> </TR> Outline 9. 5 Customer profile table body

1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 <TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">State</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "20" CLASS = "typing" ID = "ship_state" NAME = "ship_state" VALUE = "<% =obj. Record( "ship_state" ) %>"> </TD> </TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">Postal Code</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "20" CLASS = "typing" ID = "ship_zip" NAME = "ship_zip" VALUE = "<% =obj. Record( "ship_zip" ) %>"> 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 </TD> </TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">Country</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "20" CLASS = "typing" ID = "ship_country" NAME = "ship_country" VALUE = "<% =obj. Record( "ship_country" ) %>"> </TD> </TR> Outline 9. 5 Customer profile table body

1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 <TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">Phone Number</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "12" CLASS = "typing" ID = "ship_phone" NAME = "ship_phone" MAXLENGTH = "12" VALUE = "<% =obj. Record( "ship_phone" ) %>"> ###-#### </TD> </TR> <TD WIDTH = "100%" COLSPAN = "2"> </TD> </TR> <TD WIDTH = "25%" CLASS = "label" ALIGN = "right"></TD> <TD WIDTH = "75%" CLASS = "label"> Credit Information </TD> </TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">Name on Card</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "20" CLASS = "typing" ID = "credit_name" NAME = "credit_name" VALUE = "<% =obj. Record( "credit_name" ) %>"> </TD> </TR> Outline 9. 5 Customer profile table body

1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 <TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">Card Number</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "20" CLASS = "typing" ID = "credit_number" NAME = "credit_number" VALUE = "">. . <% =Right( obj. Record("credit_number "), 4 ) %> 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 %>"> 1186 1187 1188 1189 1190 1191 1192 1193 </TD> </TR> <TD WIDTH = "25%" CLASS = "marking" ALIGN = "right">Expiration Date</TD> <TD WIDTH = "75%" CLASS = "typing"> <INPUT TYPE = "text" SIZE = "7" CLASS = "typing" MAXLENGTH = "7" ID = "credit_expire" NAME = "credit_expire" VALUE = "<% =obj. Record( "credit_expire" ) ##/#### </TD> </TR> <TD WIDTH = "100%" COLSPAN = "2"> </TD> </TR> Outline 9. 5 Customer profile table body

1194 <TR> 1195 <TD WIDTH = "25%" CLASS = "marking" 1196 ALIGN = "right"></TD> 1197 <TD WIDTH = "75%" CLASS = "typing"> 1198 <INPUT TYPE = "submit" 1199 CLASS = "button 2" ID = "btn. Submit" 1200 NAME = "cmd. Submit" VALUE = "Update"> 1201 <INPUT TYPE = "reset" CLASS = "button 2" 1202 ID = "btn. Reset" NAME = "btn. Reset" 1203 VALUE = "Reset"> 1204 </TD> 1205 </TR> 1206 </TABLE> 1207 1208 </FORM> </TD> 1209 </TR> 1210 <TR> 1211 Outline <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "15"><IMG 1212 SRC = "images/footer. jpg" WIDTH = "750" 1213 HEIGHT = "15"></TD> 1214 </TR> 1215 </TABLE> 1216 </CENTER> 1217 </BODY> 1218 </HTML> 9. 5 Customer profile table body 9. 6 Customer profile table footer

100 Output from profile. asp

1219 <% @Language = "VBScript" %> 1220 <% Option Explicit %> 1221 <% Response. Expires = 0 %> 1222 <% 1223 ' Figure 28. 26: orders. asp 1224 1225 Dim error. Message 1226 1227 If Session( "store. Front. Logged. In" ) = Empty Then 1228 Session( "error" ) = "You are not logged in. " 1229 Call Response. Redirect( "account. asp" ) 1230 End If 1231 %> 1232 1233 <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN"> 1234 <HTML> 1235 1236 <HEAD> 1237 <TITLE>Store. Front</TITLE> 1238 <LINK REL = "stylesheet" TYPE = "text/css" HREF = "style. css"> 1239 <SCRIPT LANGUAGE = "Java. Script" SRC = "table. Highlight. js"> 1240 </SCRIPT> 1241 <SCRIPT LANGUAGE = "Java. Script" SRC = "row. Selection. js"> 1242 </SCRIPT> 1243 </HEAD> 1244 1245 <BODY ONLOAD = "refresh. Shopping. Table(); "> 1246 <CENTER> 1247 <TABLE WIDTH = "750" ALIGN = "center" CELLPADDING = "0" 1248 CELLSPACING = "0" BORDER = "0" BGCOLOR = "#67 CDFF" 1249 ID = "product. List" STYLE = "position: relative; 1250 display: block; top: 0; left: 0; " > Outline 10. order. asp 10. 1 Links to Java. Script files 10. 2 Order history table header

1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 <TR> <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "35"><IMG SRC = "images/header. jpg" WIDTH = "650" HEIGHT = "35"><A HREF = "index. html"><IMG SRC = "images/head_products. jpg" WIDTH = "100" HEIGHT = "35" BORDER = "0"></A></TD> </TR> <TD WIDTH = "150" VALIGN = "top" CLASS = "margin" BGCOLOR = "#CCDDFF"> <STRONG>Account Information</STRONG><BR> <% If Session( "Store. Front. Logged. In" ) = Empty Then %> <A HREF = "login. asp">Login</A><BR> <% Else %> <A HREF = "profile. asp">Customer Profile</A><BR> Orders<BR> <A HREF = "logoff. asp">Logoff</A><BR> <% End If %> <BR> <STRONG>Help!</STRONG><BR> <A HREF = "faq. asp">FAQ</A><BR> Customer Support <DIV CLASS = "note"> not available</DIV> </TD> Outline 10. 2 Order history table header 10. 3 Check to see if customer is logged in

1281 <TD WIDTH = "600" VALIGN = "top" CLASS = "margin"> 1282 <P>This is your Order History. </P> 1283 <P ID = "error. Message" CLASS = "error"> 1284 <% =error. Message %> 1285 </P> 1286 <TABLE CELLPADDING = "0" CELLSPACING = "0" 1287 ID = "shopping. Cart" WIDTH = "90%"> 1288 <TR> 1289 <TD CLASS = "label" ALIGN = "right"> 1290 Order ID </TD> 1291 <TD WIDTH = "10"></TD> 1292 <TD CLASS = "label">Date</TD> 1293 <TD CLASS = "label" ALIGN = "right"> 1294 Price</TD> 1295 1296 1297 </TR> <% Dim obj. Connection, obj. Record, str. Query 1298 1299 ' Select all orders for this customer 1300 Set obj. Connection = server. Create. Object( "ADODB. Connection" ) 1301 Set obj. Record = server. Create. Object( "ADODB. Record. Set" ) 1302 Call obj. Connection. Open( "DSN=db. Storefront" ) 1303 str. Query = "SELECT * FROM Orders WHERE customerid = " & _ 1304 Session( "Store. Front. Logged. In" ) 1305 1306 Call obj. Record. Open( str. Query, obj. Connection, 1, 2 ) 1307 1308 1309 Dim fo. ID, fo. Cost, fo. Loc Outline 10. 4 Database connection

1310 While Not obj. Record. EOF 1311 ' Loop over the records 1312 fo. ID = Right( "000000" & obj. Record( "orderid" ), 6 ) 1313 fo. Cost = Format. Number( obj. Record( "total_cost" ), 2 ) 1314 fo. Loc = "info. asp? id=" & _ 1315 Right( "000000" & obj. Record( "orderid" ), 6 ) 1316 %> 1317 <TR CLASS = "handable" ONMOUSEOVER = "row. Select(); " 1318 ONMOUSEOUT = "row. Un. Select(); " 1319 ONCLICK = "window. location = '<% =fo. Loc %>'; "> 1320 <TD ALIGN = "right"><% =fo. ID %></TD> 1321 <TD WIDTH = "10"></TD> 1322 <TD><% =obj. Record( "orderdate" ) %></TD> 1323 <TD ALIGN = "right">$<% =fo. Cost %></TD> 1324 </TR> 1325 <% 1326 Call obj. Record. Move. Next() 1327 Wend 1328 1329 Call obj. Record. Close() 1330 %> 1331 </TABLE> 1332 </TD> 1333 </TR> 1334 <TR> 1335 <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "15"><IMG 1336 SRC = "images/footer. jpg" WIDTH = "750" 1337 HEIGHT = "15"></TD> 1338 </TR> 1339 </TABLE> 1340 </CENTER> 1341 </BODY> 1342 </HTML> Outline 10. 5 Loop through records and generate table body 10. 6 Order history table footer

105 Output from orders. asp

1343 <% @Language = "VBScript" %> 1344 <% Option Explicit %> 1345 <% Response. Expires = 0 %> 1346 <% 1347 ' Figure 28. 27: info. asp 1348 1349 Dim obj. Connection, obj. Record, str. Query 1350 Dim store. Front. Order. ID, store. Front. Order. Date 1351 1352 ' Check if logged in. 1353 If Session( "Store. Front. Logged. In" ) = Empty Then 1354 Session( "Error" ) = "You are not logged in. " 1355 Call Response. Redirect( "account. asp" ) 1356 End If 1357 1358 ' Check for ID request. 1359 If Request( "id" ) <> Empty Then 1360 Store. Front. Order. ID = Request( "id" ) 1361 1362 ' Get the Order ID. Match with Customer ID also. 1363 Set obj. Connection = Server. Create. Object("ADODB. Connection ") 1364 Set obj. Record = Server. Create. Object( "ADODB. Record. Set" ) 1365 Call obj. Connection. Open( "DSN=db. Storefront" ) 1366 str. Query = "SELECT * FROM Orders WHERE orderid = " & _ 1367 Store. Front. Order. ID & " AND customerid = " & _ 1368 Session( "Store. Front. Logged. In" ) 1369 Call obj. Record. Open( str. Query, obj. Connection, 1, 2 ) 1370 1371 If obj. Record. Count > 0 Then 1372 ' Record Found. Get all the data. 1373 Outline 11. info. asp 11. 1 Check to see if logged in 11. 2 Match customer’s order

1374 Store. Front. Order. Date = obj. Record( "orderdate" ) 1375 1376 1377 1378 1379 num. Total = obj. Record( "total_cost" ) 1380 xml. Data. Async = False Set xml. Data = _ Server. Create. Object( "Microsoft. XMLDOM" ) 1381 1382 Call xml. Data. Load. XML( obj. Record( "product_xml" ) ) Else 1383 1384 1385 ' No Records found. Invalid ID and/or Customer. Session( "Error" ) = "Invalid Request" 1386 1387 Call Response. Redirect( "account. asp" ) End If 1388 1389 1390 Else Session( "Error" ) = "Invalid Request" Call Response. Redirect( "account. asp" ) 1391 End If 1392 1393 %> 1394 <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN"> 1395 <HTML> 1396 1397 <HEAD> 1398 <TITLE>Store. Front</TITLE> 1399 <LINK REL = "stylesheet" TYPE = "text/css" HREF = "style. css"> 1400 <SCRIPT LANGUAGE = "Java. Script" SRC = "table. Highlight. js"> 1401 1402 1403 </SCRIPT> </HEAD> Outline 11. 2 Match customer’s order

1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 <BODY ONLOAD = "refresh. Shopping. Table(); "> <TABLE WIDTH = "750" ALIGN = "center" CELLPADDING = "0" CELLSPACING = "0" BORDER = "0" BGCOLOR = "#67 CDFF"> <TR> <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "35"><IMG SRC = "images/header. jpg" WIDTH = "650" HEIGHT = "35"><A HREF = "orders. asp"><IMG SRC = "images/head_account. jpg" WIDTH = "100" HEIGHT = "35" BORDER = "0"></A></TD> </TR> <TD WIDTH = "750" VALIGN = "top" ALIGN = "center"> <TABLE WIDTH = "670" CELLPADDING = "2" CELLSPACING = "0" BORDER = "0"> <TR> <TD WIDTH = "25%" ALIGN = "right" CLASS = "label">Order ID: </TD> <TD WIDTH = "75%" CLASS = "typing"> <% =Store. Front. Order. ID %></TD> </TR> <TD WIDTH = "25%" ALIGN = "right" CLASS = "label">Order Date: </TD> <TD WIDTH = "75%" CLASS = "typing"> <% =Store. Front. Order. Date %></TD> </TR> </TABLE> <BR> <TABLE WIDTH = "670" CELLPADDING = "0" CELLSPACING = "0" BORDER = "0" ID = "shopping. Cart"> Outline 11. 3 Order table header

1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 "label"> 1446 1447 1448 1449 <THEAD> <TD WIDTH = "90" CLASS = "label"> ISBN </TD> <TD WIDTH = "90" CLASS = "label"> Author </TD> <TD WIDTH = "280" CLASS = "label"> Title </TD> <TD WIDTH = "70" ALIGN = "right" CLASS = Price </TD> <TD WIDTH = "10"></TD> <TD WIDTH = "50" ALIGN = "center" CLASS = "label"> 1450 Quantity 1451 </TD> 1452 <TD WIDTH = "80" ALIGN = "right" CLASS = "label"> 1453 Total 1454 </TD> 1455 </THEAD> 1456 <% 1457 Dim num. Total, xml. Data. Root, count, product 1458 Dim prod. Total, prod. Price 1459 Dim prod. ISBN, prod. Author, prod. Title, prod. Quantity 1460 1461 Set obj. Connection = Server. Create. Object( "ADODB. Connection" ) 1462 Set obj. Record = Server. Create. Object( "ADODB. Record. Set" ) 1463 Call obj. Connection. Open( "DSN=db. Storefront" ) 1464 Outline 11. 4 Connect to database

1465 ' The root element. <cart> 1466 1467 1468 1469 1470 Set xml. Data. Root = xml. Data. Document. Element 1471 ' For each item in the cart. <item> 1472 1473 For count = 0 To ( xml. Data. Root. Child. Nodes. Length - 1 ) ' Format the total amount due num. Total = Format. Number( num. Total, 2 ) 1474 1475 1476 ' Retreive the DOMNode Set product = xml. Data. Root. Child. Nodes. Item ( count ) 1477 1478 ' The ISBN prod. ISBN = product. Get. Attribute( "isbn" ) 1479 1480 1481 ' Search the database for the ISBN. str. Query = "SELECT * FROM Products WHERE isbn = '" & _ 1482 prod. ISBN & "'" 1483 1484 Call obj. Record. Open( str. Query, obj. Connection, 1, 2 ) 1485 1486 1487 1488 1489 1490 ' Fill in the author name prod. Author = obj. Record( "author" ) 1491 1492 1493 1494 ' Fill in the title prod. Title = obj. Record( "title" ) ' Fill in the product price prod. Price = obj. Record( "price" ) prod. Price = Format. Number( prod. Price, 2 ) Outline 11. 5 Retrieve order information

1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 ' Fill in the quantity prod. Quantity = product. Get. Attribute( "qty" ) ' Calculate the subtotal prod. Total = prod. Price * prod. Quantity prod. Total = Format. Number( prod. Total, 2 ) %> <TR> <TD WIDTH = "90" VALIGN = "top"> <% =prod. ISBN %></TD> <TD WIDTH = "90" VALIGN = "top"> <% =prod. Author %></TD> <TD WIDTH = "280" VALIGN = "top"> <% =prod. Title %></TD> <TD WIDTH = "70" ALIGN = "right" VALIGN = "top"> $<% =prod. Price %></TD> <TD WIDTH = "10"></TD> <TD WIDTH = "50" ALIGN = "center" VALIGN = "top"> <% =prod. Quantity %></TD> <TD WIDTH = "80" ALIGN = "right" VALIGN = "top"> $<% =prod. Total %></TD> </TR> <% Call obj. Record. Close() Next ' Table Footer. %> Outline 11. 6 Generate body of order table

1526 <TFOOT> 1527 <TD WIDTH = "90"></TD> 1528 <TD WIDTH = "90"></TD> 1529 <TD WIDTH = "280"></TD> 1530 <TD WIDTH = "70"></TD> 1531 <TD WIDTH = "10"></TD> 1532 <TD WIDTH = "50" ALIGN = "right" 1533 CLASS = "label"> 1534 Total: 1535 </TD> 1536 <TD WIDTH = "80" ALIGN = "right"> 1537 $<% =num. Total %> 1538 </TD> 1539 </TFOOT> 1540 1541 </TABLE> </TD> 1542 </TR> 1543 <TR> 1544 <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "15"><IMG 1545 SRC = "images/footer. jpg" WIDTH = "750" 1546 HEIGHT = "15"></TD> 1547 </TR> 1548 </TABLE> 1549 </BODY> 1550 1551 </HTML> Outline 11. 7 Order table footer

113 Output from info. asp

1552 <% @Language = "VBScript" %> 1553 <% Option Explicit %> 1554 <% Response. Expires = 0 %> 1555 <% ' Figure 28. 28: faq. asp %> 1556 1557 <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN"> 1558 <HTML> 1559 1560 <HEAD> 1561 <TITLE>Store. Front</TITLE> 1562 <LINK REL = "stylesheet" TYPE = "text/css" HREF = "style. css"> 1563 </HEAD> 1564 1565 <BODY> 1566 1567 1568 <CENTER> <TABLE WIDTH = "750" ALIGN = "center" CELLPADDING = "0" CELLSPACING = "0" BORDER = "0" BGCOLOR = "#67 CDFF" 1569 ID = "product. List" STYLE = "position: relative; 1570 1571 display: block; top: 0; left: 0; " > <TR> 1572 1573 1574 1575 1576 1577 <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "35"><IMG SRC = "images/header. jpg" WIDTH = "650" HEIGHT = "35"><A HREF = "index. html"><IMG SRC = "images/head_products. jpg" WIDTH = "100" HEIGHT = "35" BORDER = "0"></A></TD> </TR> 1578 1579 1580 1581 <TR> <TD WIDTH = "150" VALIGN = "top" CLASS = "margin" BGCOLOR = "#CCDDFF"> <STRONG>Account Information</STRONG><BR> Outline 12. faq. asp 12. 1 FAQ table header

1582 <% 1583 1584 If Session( "Store. Front. Logged. In" ) = Empty Then %> 1585 1586 <A HREF = "login. asp">Login</A><BR> <% 1587 1588 Else %> 1589 <A HREF = "profile. asp">Customer Profile</A><BR> 1590 <A HREF = "orders. asp">Orders</A><BR> 1591 <A HREF = "logoff. asp">Logoff</A><BR> 1592 <% 1593 1594 End If %> 1595 <BR> 1596 <STRONG>Help!</STRONG><BR> 1597 FAQ<BR> 1598 Customer Support 1599 <DIV CLASS = "note"> not available</DIV> 1600 </TD> 1601 <TD WIDTH = "600" VALIGN = "top" CLASS = "margin"> 1602 <P>Here are the more Frequently Asked Questions </P> 1603 <UL> 1604 <LI><STRONG>Where are you located? </STRONG><BR> 1605 <SPAN CLASS = "typing">490 B Boston Post Road, 1606 Suite 200 <BR>Sudbury, MA 01776</SPAN></LI> 1607 1608 1609 Outline </UL> </TD> </TR> 12. 2 FAQ table body

1610 1611 <TR> <TD COLSPAN = "2" WIDTH = "750" HEIGHT = "15"><IMG 1612 SRC = "images/footer. jpg" WIDTH = "750" 1613 HEIGHT = "15"></TD> 1614 </TR> 1615 </TABLE> 1616 </CENTER> 1617 </BODY> 1618 1619 </HTML> Outline 12. 3 FAQ table footer

117 Business-to-Business (B 2 B) Models • B 2 B transactions – Involve transfer of data • Examples – purchase orders, invoices, payments, document specifications and other documents • Internet provides means for instantaneous delivery – Supplier-oriented B 2 B model • Suppliers provide means for buyers to purchase directly – Buyer-oriented B 2 B model • Buyers making available their product needs – Intermediary-oriented B 2 B model • A business which manages product information from multiple suppliers and provides buyers with this data

118 28. 7 B 2 B Example • Documents in the B 2 B exmaple – request. asp • Creates a purchase request form for our book store – warehouse. asp • Acquires data sent by request. asp

1 <% @Language = "VBScript" %> 2 <% Option Explicit %> 3 <% Response. Expires = 0 %> Outline 4 5 1. request. asp <% ' Figure 28. 29: request. asp %> 6 7 <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 8 <HTML> 1. 1 Function submit. Request 9 10 <HEAD> 11 <TITLE>Store. Front : Purchase Request</TITLE> 12 <LINK REL = "stylesheet" TYPE = "text/css" HREF = "style. css"> Function submit. Request creates the XML purchase request document and submits the data using the XMLHttp. Request object. It is called when the Submit button is clicked (line 112). 13 <SCRIPT LANGUAGE = "Java. Script" SRC = "table. Highlight. js"> 14 </SCRIPT> 15 <SCRIPT LANGUAGE = "Java. Script"> 16 17 function submit. Request() 18 { 19 var str. ID, num. Quantity; 20 var xml. Document, xml. Node, xml. Root, xml. Http; 21 22 xml. Document = new Active. XObject( "Microsoft. XMLDOM" ); Method create. Element 23 xml. Document. async = false; the root element, req. 24 25 xml. Node = xml. Document. create. Element ( "req" ); 26 xml. Document. append. Child( xml. Node ); 27 xml. Root = xml. Document. document. Element ; 28 creates

29 30 31 32 33 for ( i = 0; i < request. length; i++ ) { str. ID = request. item( i ). id; num. Quantity = parse. Int( request. item( i ). value ); if ( str. ID. substr(0, 4) == " isbn" && num. Quantity > 0 ) { Outline 1. 1 Function submit. Request 34 xml. Node = xml. Document. create. Element ( "book" ); 35 xml. Node. set. Attribute( "isbn", str. ID. substr( 4 ) ); 36 xml. Node. set. Attribute( "qty", num. Quantity ); 37 38 xml. Root. append. Child( xml. Node ); Line 38 appends the book element 39 } to the req root element using 40 } method append. Child. 41 42 if ( xml. Root. child. Nodes. length > 0 ) { 43 if ( confirm( "Send Purchase Request? " ) ) If the XML document contained 44 { 45 xml. Http = new Active. XObject( "Microsoft. XMLHTTP" ); books, we submit the document to 46 xml. Http. open( "POST", warehouse. asp using the 47 "http: //beetle/storefront/warehouse. asp", XMLHttp. Request object. 48 false ); 49 xml. Http. send( xml. Document ); 50 51 document. body. inner. HTML = xml. Http. response. Text; 52 } 53 } 54 else { 55 alert( "No purchase request made. " ); 56 } 57 } 58 59 </SCRIPT> 60 </HEAD> 61

62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 <BODY ONLOAD = "highlight. Table()"> <CENTER> <TABLE WIDTH = "750" ALIGN = "center" CELLPADDING = "0" CELLSPACING = "0" BORDER = "0" BGCOLOR = "#67 CDFF"> <TR> <TD WIDTH = "750" HEIGHT = "35"><IMG SRC = "images/header 2. jpg" WIDTH = "750" HEIGHT = "35"></TD> </TR> <TD VALIGN = "top"> <FORM ID = "request"> <TABLE ALIGN = "center" ID = "product. Listing" CELLSPACING = "0" CELLPADDING = "2" BORDER = "0"> <TR> <TD ALIGN = "right" CLASS = "label"> ISBN</TD> <TD CLASS = "label">Author</TD> <TD CLASS = "label">Title</TD> <TD ALIGN = "right" CLASS = "label"> Available </TD> <TD CLASS = "label">To Order</TD> </TR> <% Dim obj. Connection, obj. Record, str. Query Set obj. Connection = Server. Create. Object( "ADODB. Connection" ) Set obj. Record = Server. Create. Object( "ADODB. Record. Set" ) Call obj. Connection. Open( "DSN=db. Storefront" ) str. Query = "SELECT * FROM Products" Outline 1. 2 Bookstore table header 1. 3 Database connection

93 Call obj. Record. Open( str. Query, obj. Connection ) 94 95 While Not obj. Record. EOF 96 %> 97 <TR STYLE = "background: none"> 98 <TD ALIGN = "right"><% =obj. Record( "isbn" ) %></TD> 99 <TD><% =obj. Record( "author" ) %></TD> 100 <TD><% =obj. Record( "title" ) %></TD> 101 <TD ALIGN = "right"><% =obj. Record( "qty" ) %></TD> 102 <TD><INPUT TYPE = "input" 103 SIZE = "3" ID = "isbn<% =obj. Record( "isbn" ) %>" 104 VALUE = "0"></TD> 105 </TR> 106 <% 107 108 Call obj. Record. Move. Next() Wend 109 %> 110 </TABLE> 111 <CENTER> 112 <INPUT TYPE = "button" CLASS = "button 2" VALUE = "Submit" 113 ONCLICK = "submit. Request()"> 114 <INPUT TYPE = "reset" CLASS = "button 2" VALUE = "Reset"> 115 </CENTER> 116 </FORM> 117 118 Outline </TD> </TR> 1. 4 Generate bookstore table body

119 120 <TR> <TD WIDTH = "750" HEIGHT = "15"><IMG 121 SRC = "images/footer. jpg" WIDTH = "750" 122 HEIGHT = "15"></TD> 123 </TR> 124 </TABLE> 125 </CENTER> 126 </BODY> 127 </HTML> Outline 1. 5 Bookstore table footer

1 <% @Language = "VBScript" %> 2 <% Option Explicit %> 3 <% Response. Expires = 0 %> 4 <% 5 Outline 1. warehouse. asp ' Figure 28. 30: warehouse. asp 6 7 Dim xml. Document, str. XML 8 9 Set xml. Document = Server. Create. Object( "Microsoft. XMLDOM" ) 10 xml. Document. Async = False 11 Call xml. Document. Load( Request ) 12 13 str. XML = xml. Document. Xml 14 str. XML = Replace( str. XML, "<b", " 15 str. XML = Replace( str. XML, "<", "< " ) 16 str. XML = Replace( str. XML, ">", "> " & vb. CRLF ) 17 str. XML = Replace( str. XML, "=", " = " ) <b" ) 18 %> 19 <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 20 <HTML> 21 <BODY> 22 23 <H 1>Warehouse: Purchase Request Received </H 1> 24 Your request: 25 <PRE> 26 <% =str. XML %> 27 </PRE> 28 </BODY> 29 </HTML>

125 Output from warehouse. asp