COMP3241 COMP3241 E-Commerce TechnologiesE-Commerce Technologies

Richard HensonRichard Henson

University of WorcesterUniversity of Worcester

NovemberNovember 20122012

Week 7: Mechanism of a Week 7: Mechanism of a Shopping Cart & Customer LoginShopping Cart & Customer Login

Objectives:Objectives: Explain how the shopping cart dataset interfaces Explain how the shopping cart dataset interfaces

with the products tablewith the products table Explain how a shopping cart can update Explain how a shopping cart can update

automatically in response to a user change of mindautomatically in response to a user change of mind Use the shopping cart system to gather customer Use the shopping cart system to gather customer

data, that would enable goods to be delivered to a data, that would enable goods to be delivered to a real addressreal address

The Generalised The Generalised Shopping Cart Shopping Cart

Basic features:Basic features: five defined data fields are the bare minimum (cart five defined data fields are the bare minimum (cart

record ID, cart ID, product ID, product description, record ID, cart ID, product ID, product description, product price)product price)

as you’ve seen, description & price fields interact as you’ve seen, description & price fields interact with a remote product table via product IDwith a remote product table via product ID

further constants and variable fields added to the further constants and variable fields added to the local dataset to store results of calculationslocal dataset to store results of calculations

The Common Features of The Common Features of Shopping Cart SystemsShopping Cart Systems

Code for the cart can be written in Code for the cart can be written in many different languagesmany different languagescan run on different web server can run on different web server

platformsplatformsall must create the local dataset, all must create the local dataset,

store the constants, do the store the constants, do the calculations, allow interaction with calculations, allow interaction with remote databaseremote database

Trapping Data for the Trapping Data for the Shopping CartShopping Cart

Server scripts needed to manage the Server scripts needed to manage the dataset…dataset…link cart fields with “product ID” , “price” and link cart fields with “product ID” , “price” and

“description” fields in the database“description” fields in the databaseset the “quantity” field to have a default set the “quantity” field to have a default

value of 1value of 1give each cart record a unique identifiergive each cart record a unique identifier

Additional Shopping Additional Shopping Cart FieldsCart Fields

The point of a shopping cart is to advise the The point of a shopping cart is to advise the customer about:customer about: what they’ve bought (clicked on)what they’ve bought (clicked on) the total amount they will have to pay…the total amount they will have to pay…

This requires calculations, and further data This requires calculations, and further data fields to hold the resultsfields to hold the results Quantity * Price = Quantity * Price = Line TotalLine Total Sum of line totals = Sum of line totals = Order TotalOrder Total (minus Tax) (minus Tax) Order Total + Tax = Order Total + Tax = What customer pays for goodsWhat customer pays for goods Total including Tax + Shipping = Total including Tax + Shipping = Total amount dueTotal amount due

How Carts create and store the How Carts create and store the line totals & order totalline totals & order total

If only one product is selected…If only one product is selected… the line total cost is calculated (cost * quantity)the line total cost is calculated (cost * quantity) order total becomes equal to line totalorder total becomes equal to line total a record including this value is written to the a record including this value is written to the

datasetdataset and stored as a record within the session cookieand stored as a record within the session cookie

If more than one product is selected, the line If more than one product is selected, the line totals need to be added togethertotals need to be added together order total becomes the result of the additionorder total becomes the result of the addition

How a click on the product How a click on the product can update the cartcan update the cart

Essential that the cart dataset is available Essential that the cart dataset is available with each product pagewith each product page otherwise, product and quantity data can’t be otherwise, product and quantity data can’t be

added to the cart!added to the cart! Advice: use “split screen” to see the code as Advice: use “split screen” to see the code as

well as the screen designwell as the screen design then able to check the code that corresponds with then able to check the code that corresponds with

the cart, and its appropriateness for page displaythe cart, and its appropriateness for page display if there is a mismatch, you can’t expect the if there is a mismatch, you can’t expect the

shopping cart to be updated…shopping cart to be updated…

Web Controls and ASP.net Web Controls and ASP.net Shopping CartsShopping Carts

Web controls…object classes used by Web controls…object classes used by asp.net to render parts of a pageasp.net to render parts of a page similar to HTML “forms”similar to HTML “forms” extra advantage of being reusableextra advantage of being reusable

An .aspx web page may use a hierarchical An .aspx web page may use a hierarchical structure of defined web controlsstructure of defined web controls making a combination of code behind and making a combination of code behind and

assembly-based controls easily manageableassembly-based controls easily manageable

Some Typical Web Controls Some Typical Web Controls that used with a HTML formthat used with a HTML form

button button listboxlistbox checkbox checkbox radiobuttonradiobutton checkboxlist checkboxlist radiobuttonlistradiobuttonlist dropdownlist dropdownlist textboxtextbox imagebutton imagebutton labellabel

Web Control syntax (1)Web Control syntax (1)

Textbox & contents must be held within a Textbox & contents must be held within a HTML formHTML form i.e. between <form> and </form>i.e. between <form> and </form>

Opening tag: <asp:textbox>Opening tag: <asp:textbox> various properties of the control follow… various properties of the control follow…

» e.g. display of text boxe.g. display of text box

» displayed text contentsdisplayed text contents

» runat=“server”runat=“server”

Closing tag: /> or </asp:textbox>Closing tag: /> or </asp:textbox>

Dropdown box control Dropdown box control & “nesting” syntax& “nesting” syntax

Drop Down List box & contentsDrop Down List box & contents again within a HTML form again within a HTML form

Opening tag: <asp:dropdownlist>…Opening tag: <asp:dropdownlist>…1.1. properties of the control individually definedproperties of the control individually defined

e.g. properties of drop down list box, and displayed text contentse.g. properties of drop down list box, and displayed text contents

runat=“server” (essential)runat=“server” (essential)Controlname ID = “unique name” (also essential)Controlname ID = “unique name” (also essential)

2.2. further nested control needed for each item in the further nested control needed for each item in the drop down list…drop down list…

Dropdown box control Dropdown box control & “nesting” syntax (cont…)& “nesting” syntax (cont…)

3. Each item defined as:3. Each item defined as:

<asp:listitem> …. properties of listitem…. <asp:listitem> …. properties of listitem….

</asp:listitem></asp:listitem>

propertiesproperties should include: should include:

text = “” (what is displayed)text = “” (what is displayed)

value = “” (what is passed on)value = “” (what is passed on)

4. Closing tag: </asp:dropdownlist> or />4. Closing tag: </asp:dropdownlist> or />

Dropdown box control Dropdown box control & “nesting” syntax (3)& “nesting” syntax (3)

Typical code for whole structure: Typical code for whole structure: Note the embedding of one control, Note the embedding of one control, listitemlistitem within within

another, another, dropdownbox dropdownbox

<form><form><asp:dropdownlist ID = “selected” runat = “server”><asp:dropdownlist ID = “selected” runat = “server”><listitem> text = “true” value = “1”/><listitem> text = “true” value = “1”/><listitem> text = “false” value = “0”/> <listitem> text = “false” value = “0”/> />/></form></form>

Summary of cart logicSummary of cart logic Up to three different labels for product ID:Up to three different labels for product ID:

product table valueproduct table value parameter valueparameter value cart valuecart value

This can be very confusing, but the cart won’t This can be very confusing, but the cart won’t work without the right associationswork without the right associations all cart control parameters must be correctly all cart control parameters must be correctly

entered… otherwise…entered… otherwise…» no data or the wrong data will be addedno data or the wrong data will be added

» incorrect parameters will be invoked causing .net errors incorrect parameters will be invoked causing .net errors

WebXelCart AssemblyWebXelCart Assembly

Collection of compiled versions of many Collection of compiled versions of many coded web controls:coded web controls: CartCart AddFromDBAddFromDB WriteToDBWriteToDB etc..etc..

Visual Studio can “open” an assembly to Visual Studio can “open” an assembly to reveal defined properties of each controlreveal defined properties of each control

WebXelCart:Cart controlWebXelCart:Cart control

Like any other asp.net web control…Like any other asp.net web control… stored as executable codestored as executable code

Visual Studio makes it available to any .net Visual Studio makes it available to any .net pages in the project…pages in the project… assuming parent assembly is…assuming parent assembly is…

» held in the relevant /App_Data folderheld in the relevant /App_Data folder» and added to “References”and added to “References”

Can be called as <control name>… < />Can be called as <control name>… < /> like any other web controllike any other web control parameters have to be set accordinglyparameters have to be set accordingly

Passing the Product ID Passing the Product ID ParameterParameter

Product Page

Add from DB scripts

Product ID value sent as e.g. “ProdID”

fields extracted from remote database

Shopping Cart

Remote DB

Updating Cart ValuesUpdating Cart Values When the customer clicks on a hyperlink/button When the customer clicks on a hyperlink/button

associated with a product:associated with a product: a “line record” is created on the cart for that product a “line record” is created on the cart for that product

(based on the parameter passed)(based on the parameter passed) quantity is set at the default value of 1quantity is set at the default value of 1

Cart Totals are then automatically calculatedCart Totals are then automatically calculated If customer clicks on a second product…If customer clicks on a second product…

further cart record is createdfurther cart record is created all cart totals recalculatedall cart totals recalculated

Cart Display PageCart Display Page Cart.aspxCart.aspx consists of a HTML table with consists of a HTML table with

scripts added to insert cart values in the right scripts added to insert cart values in the right places on the tableplaces on the table

Pages should be designed so cart.aspx is Pages should be designed so cart.aspx is available at all times, so the customer can available at all times, so the customer can readily remind themselves what they have readily remind themselves what they have clicked on… clicked on…

Cart.aspx should also include:Cart.aspx should also include: update product quantity (e.g. buy 2 instead of 1)update product quantity (e.g. buy 2 instead of 1) remove a cart line altogether (erase cart record)remove a cart line altogether (erase cart record)

Login & Checkout PagesLogin & Checkout Pages A user should NOT have to log on in A user should NOT have to log on in

order to activate the shopping cartorder to activate the shopping cart However, the user becomes a customer However, the user becomes a customer

once there is a commitment to purchaseonce there is a commitment to purchaseat that point, the login page must be offeredat that point, the login page must be offered

First stage of checkout:First stage of checkout:recall the customer’s details (if they exist)recall the customer’s details (if they exist)gather new customer detailsgather new customer details

Designing the Customer PageDesigning the Customer Page

This is challenging, because the page This is challenging, because the page has to do two different things on the has to do two different things on the same HTML form…same HTML form…gather new customer detailsgather new customer detailsdisplay existing customer detailsdisplay existing customer details

Also the matter of username/passwordAlso the matter of username/passwordso that existing customers have as much so that existing customers have as much

as possible done for them…as possible done for them…

Adding Customer DetailsAdding Customer Details

Fields required:Fields required: name/address/postcode to send the goods toname/address/postcode to send the goods to email address to provide fulfilment information to email address to provide fulfilment information to

the customerthe customer Username (use email address) & passwordUsername (use email address) & password telephone number as backup to email addresstelephone number as backup to email address

Validation of field contents:Validation of field contents: essential to prevent garbage data being sent to essential to prevent garbage data being sent to

the database and causing run-time errorsthe database and causing run-time errors

WebXel:WritetoDB controlWebXel:WritetoDB control Has to do two different things, Has to do two different things,

depending on whether customer exists depending on whether customer exists or not…or not…

Checks for existing customer based on Checks for existing customer based on email addressemail addressif not, blank form has to be completed and if not, blank form has to be completed and

sent to customer tablesent to customer tableIf so, customer details brought from If so, customer details brought from

customer table and displayedcustomer table and displayed

WebXel:Login controlWebXel:Login control

Login page called during customer login Login page called during customer login for existing customersfor existing customers

Uses WebXelCart:LoginUses WebXelCart:Loginchecks email/password supplied against checks email/password supplied against

values in the customer tablevalues in the customer table» IF a match… causes customer/getcust.aspx page to IF a match… causes customer/getcust.aspx page to

be called and customer record to be displayedbe called and customer record to be displayed» ELSE… brings up a blank customer/getcust.aspx ELSE… brings up a blank customer/getcust.aspx

page with error message, and allows details to be page with error message, and allows details to be addedadded

Logon PageLogon Page Called from the customers/getcust pageCalled from the customers/getcust page Uses WebXelCart:Login controlUses WebXelCart:Login control

allows the customer to use their chosen allows the customer to use their chosen username/password to proceed to a more username/password to proceed to a more secure/purchasing area of the websitesecure/purchasing area of the website

If the login fails…If the login fails… the customer should be informed on screenthe customer should be informed on screen

If successful…If successful… the customer should have their details displayedthe customer should have their details displayed and be provided with an option to updateand be provided with an option to update

Order Display/Online InvoiceOrder Display/Online Invoice

Once the customer details have been Once the customer details have been agreed…agreed… the system presents an “order summary” pagethe system presents an “order summary” page to make this page valid as an online invoice it to make this page valid as an online invoice it

should also displayshould also display» the order numberthe order number

» the address where the order is to be shippedthe address where the order is to be shipped

» the amount the customer will pay including all additional the amount the customer will pay including all additional chargescharges

Store Order controlStore Order control The cart is only a temporary local store so The cart is only a temporary local store so

cannot be used for fulfilmentcannot be used for fulfilment So after the invoice has been displayed, the order So after the invoice has been displayed, the order

needs to be stored somewhere remotely in the needs to be stored somewhere remotely in the databasedatabase

Once the invoice is accepted, by the Once the invoice is accepted, by the customer clicking on “payment”, the order customer clicking on “payment”, the order details must be written to the databasedetails must be written to the database this is achieved through the WebXel:SaveOrder this is achieved through the WebXel:SaveOrder

controlcontrol

Payment & Send OrderPayment & Send Order

Once the payment system has approved Once the payment system has approved payment, the vendor can then read the order payment, the vendor can then read the order and set about fulfilling itand set about fulfilling it

This is beyond the scope of assignment 2… This is beyond the scope of assignment 2… the payment page should therefore a “dummy” the payment page should therefore a “dummy”

pagepage» it should still provide good navigation to other pages it should still provide good navigation to other pages

» it COULD still trigger an email (e.g. copy of invoice) to the it COULD still trigger an email (e.g. copy of invoice) to the customercustomer

» WebXelCart:Sendmail if you are feeling adventurous!WebXelCart:Sendmail if you are feeling adventurous!

Payment SystemPayment System

In a real e-commerce system… control would In a real e-commerce system… control would normally be transferred to a merchant services normally be transferred to a merchant services provider to deal with interaction with the provider to deal with interaction with the International Banking NetworkInternational Banking Network the system would again have to provide direct on the system would again have to provide direct on

screen interaction with the customerscreen interaction with the customer the system should also trigger a first email the system should also trigger a first email

message to the customermessage to the customer» the customer has given it their bank details and will be seeking the customer has given it their bank details and will be seeking

reassurance that:reassurance that: their details have been processedtheir details have been processed goods will soon be on their waygoods will soon be on their way

““Thank You” Page Thank You” Page and emailing the customerand emailing the customer COULD be overlooked, but not a COULD be overlooked, but not a

good idea…good idea…the customer will be glad of further the customer will be glad of further

reassurance and any indication that reassurance and any indication that the vendor is worthy of their businessthe vendor is worthy of their business

the customer will also appreciate the customer will also appreciate further messages by email further messages by email