COMP3121 E-Commerce Technologies Richard Henson University of Worcester November 2010

Week 8: Mechanism of a Shopping Cart n Objectives:  Explain how the shopping cart dataset interfaces with the products table  Make a shopping cart update automatically to a change in product quantity  Gather customer data, that would enable goods to be delivered to a real address

A final word on “embedded asp!” n Still an awful lot of.asp websites, written in VB!  means a lot of converting still needs to be done… n Asp allows code to be added to html as “render blocks”  i.e.  i.e.  Consequences: »the browser in constantly switching between html mode and asp mode… »the file is processed much more slowly because of all the chopping and changing n ASP.NET platform just doesn’t allow this!  code is compiled into assemblies and runs much quickly  however, some external providers seem to find it difficult to support ready compiled assemblies, so they still offer asp

The Common Features of Shopping Cart Systems n Code written in many different languages  running on different web server platforms n Basic features of the cart are mostly the same no matter what the script/platform  five defined data fields that make up a dataset held locally  description & price fields interact with a remote product database via product ID  further fields added to the local dataset to store results of calculations

Trapping Data for the Shopping Cart n Server scripts are required…  to link cart fields with the “product ID”, “price” and “description” fields in the database  to set the “quantity” field with a default value of 1  to give each cart record a unique identifier

Additional Shopping Cart Fields n The point of a shopping cart is to advise the customer on their order, and how the total amount they will have to pay… n This requires calculations, and further data fields to hold the results  Quantity * Price = Line Total  Sum of line totals = Order Total minus Tax  Order Total + Tax = Amount that customer pays for goods  Total including Tax + Shipping = Total amount due

Cart Calculations n If only one product is selected…  the line total cost is calculated (cost * quantity)  order total becomes equal to line total  a record including this value is written to the dataset  and stored as a record within the session cookie n If more than one product is selected, the line totals need to be added together  order total becomes the result of the addition

How a click on the product can update the cart n The cart logic (i.e. server script) needs to be included with each product page  otherwise, OBVIOUSLY, product and quantity data can’t be added to the cart n Advice: use Visual Studio “split screen” to see the code as well as the screen design  you will then be able to check the code that corresponds with the cart, and its appropriateness for that page  if there is a mismatch, you can’t expect the shopping cart to be updated…

ASP.net Web Controls used with WebXel Shopping Cart n Web controls are object classes used by asp.net to render parts of a page  similar to HTML “forms” (but reusable) n New control created for each request »View State & Event tracking handled automatically n An.aspx web page may have a hierarchical structure of web controls  makes them easily manageable

Some Typical Web Controls used with a HTML form n button listbox n checkbox radiobutton n checkboxlist radiobuttonlist n dropdownlist textbox n imagebutton label n All made easily available within the VWD environment n Compiled code included in WebXel.dll and DreamweaverCtrls.dll supports configuration of cart controls as well

Examples of Web Controls (1) n Must be held within a HTML form  i.e. between and  i.e. between and n Example: Textbox:  Opening tag:  Opening tag:  Various properties of the control… »e.g. properties of text box, and displayed text contents »and runat=“server”  Closing tag: /> or  Closing tag: /> or

Examples of Web Controls (2) n Drop Down box & List contents  again within a HTML form n Opening tag: … 1.properties of the control individually defined e.g. properties of drop down list box, and displayed text contents runat=“server” (essential) Control ID = “unique name” (also essential) 2.A further nested control for each item in the drop down list…

Examples of Web Controls (2) 3. Each item defined as: …. properties of listitem…. …. properties of listitem…. properties should include: text = “” (what is displayed) value =“” (what is passed on) 4. Closing tag: or />

Examples of Web Controls (2) n Typical code for whole structure:  Note the embedding of listitem within dropdownbox <form> text = “true” value = “1”/> text = “true” value = “1”/> text = “false” value = “0”/> text = “false” value = “0”/>/></form>

A Summary of cart logic n Interactions must occur between:  the product ID associated with the database and  the equivalent cart field corresponding to product ID n This can be very confusing, but the cart won’t work without the right associations  cart control parameters must be correctly entered otherwise »no data or the wrong data will be added »incorrect parameters will be invoked causing.net errors

WebXel Cart Control n Like any other asp.net web control…  stored as executable code n Available to any.net pages in the application  once it is held in the relevant /bin folder… n Can be called as … n Can be called as …  facilitates: »adding cart logic (ie web control) to a.aspx page »setting parameters for the added control

Updating Cart Values n When the customer clicks on a hyperlink associated with a product:  a “line record” is created on the cart for that product (based on the parameter passed)  quantity is set at the default value of 1 n Cart Totals are then automatically calculated n If customer clicks on a second product…  a further cart record is created  cart totals recalculated

WebXel Product ID and Cart ID n The product page displays one record  needs to pass this data to the cart  can be done several ways…  The webxel logic sets this up via the server scripts in: »Addtocartlink.aspx (parameter passing via “get”) »AddfromDB.aspx (direct copying field to field based on product ID parameter passed)

“Add to Cart Link” n This works by passing all the relevant values for the cart fields as part of a query string  values are passed to the cart using query string parameters  therefore not as secure as using form “post” values or the AddFromDB control n However, this control has the ability to render hyperlinks that use new windows, if so required

“Add from Database” n Enables the customer to DIRECTLY  select the record(s) from a database table  and add those items to the cart  by providing the code to directly access database fields and directly populate cart fields n Most secure method available for enabling the customer to add items to the cart  no discount or pricing information is used in populating the carts fields…  control gets all product information for the cart directly from the database record/s

Passing the Product ID Parameter Product Page Add from DB scripts Product ID value sent as e.g. “ProdID” fields extracted from remote database Shopping Cart Remote DB

What is extra good about ASP.NET n Complete, compiled, components can be associated with an application  e.g. webxel cart n Objects from within that component can readily be integrated with individual web pages  e.g. Add to Cart from Database n Databases can be easily linked to all pages associated with a site, using web.config

More ASP.NET challenges: Web Controls n Compared to.asp, these make life easier when building forms and other HTML controls »e.g. a typical select box in ASP, you would have to build a loop to populate the control »with ASP.NET, a control can be "data-bound" which means it will be tied to a data source, and will populate itself automatically n this is how AddtoDB is so effective

More ASP.NET challenges: Web Controls n Challenge: imposes restrictions  “traditional”.asp and ADO: »could choose where to place database cursors (e.g. server side or client side) depending on the type of performance and function being developed n as with ASP “recordsets”, keeping it client-side gives a “snappier” performance client side n BUT can be a performance drain for both the client, because it must now store all the data in local memory, and the web server, due to resync-ing of data

More ASP.NET challenges: Web Controls n With ASP.NET, developers no longer have so much choice:  link required between web controls and server, so everything kept on the client side…  Microsoft tried to let the developer do less manual coding »but sacrificed flexibility to achieve this…

Control over asp.net product pages n Unlikely that all products can be displayed on a single page n Makes sense at the design stage to include a “category” field in the products table  “category” can then be passed as a parameter from a master page to select products of a particular category for the “detail page”

Passing Parameters & Scary Strings n Dreamweaver shields the non-mathematician from coding as much as possible…  but sometimes the variables used just have to be “scary strings”  if you don’t want to engage with programming logic that’s understandable »Just remember when typing such strings that: n every “begin”({) has an “end” (}) n every “start quotes” has an “end quotes” »Also, remember that Dreamweaver does colour coding to help you when viewing in “code mode, and this could be a useful way to detect typing errors (we all make them!)

Dreamweaver and passing parameters in aspx pages - 1 n A parameter is passed by the “master” page using “GET” in association with the hyperlink  need to make sure… »the correct fieldname is selected when the link is created using “make link” option »the correct parameter is chosen for passing the appropriate value for that field to the detail page  these need to be picked up and used to filter the data when the detail page interrogates the relevant dataset

Dreamweaver and passing parameters in aspx pages - 2 n The detail page should use an SQL query to filter the dataset data  the query needs to know about the parameter fieldname in order to correctly make use of the parameter value passed from the master page  both can be achieved when the dataset wizard is used to filter the data to be displayed »just use the “advanced” option n parameter section just needs a fieldname – a wizard will create the “scary string” n main SQL statement needs where fieldname=? to put the parameter value in the right place

Displaying Shopping Cart Fields n “Cart Display” is a HTML table with scripts added to insert cart values in the right places on the table  should be available from all pages, so the customer can readily see exactly what they have clicked on… n Cart display page should also include the following two features:  update product quantity (e.g. buy 2 instead of 1)  remove a cart line altogether (erase that cart record)

Checkout Pages n It is not necessary for a user to log on in order to activate the shopping cart n However, once there is a commitment to purchase, the user becomes a customer… n The first stage of checkout must therefore be to get the customer’s details  this may become associated with a username/password  so that the system can identify this user if they wish to make further purchases later

Essential Customer Details n Should be common sense…  need an address to send the goods to  need an address to provide fulfilment information to the customer  need a telephone number as a backup to the address n Field contents should be validated in some way  Prevents garbage data being sent to the database and causing run-time errors

Logon Page n This allows the customer to use their chosen username/password to proceed to a more secure area of the website n If the login fails…  the customer should be informed on screen n If successful…  the customer should get a summary of their order  and the address where the order is to be shipped should also be displayed

Order Summary Page n The order now needs to be stored somewhere remotely in a database n The cart is only a temporary local store so cannot be used for fulfilment n Once the order summary is accepted, and the customer clicks on “payment”, the order details must therefore be written to a database n Once the payment system has approved payment, the vendor can then read the order and set about fulfilling it

Payment System n In a real e-commerce system, the next page to be displayed would request bank details for payment n This would normally transfer control to a merchant services provider to deal with interaction with the International Banking Network  the system would again have to provide direct on screen interaction with the customer  the system should also trigger a first message to the customer »the customer has given it their bank details and will be seeking reassurance that: n their details have been processed n goods will soon be on their way

Thank You Page n Can be overlooked, but not a good idea… n The customer will be glad of further reassurance and any indication that the vendor is worthy of their business