COMP3121COMP3121E-Commerce TechnologiesE-Commerce Technologies

Richard HensonRichard Henson

University of WorcesterUniversity of Worcester

October 2011October 2011

Week 5: B2C E-commerce Week 5: B2C E-commerce websites with Shopping Cartswebsites with Shopping Carts

Objectives:Objectives: describe the software & hardware components of describe the software & hardware components of

a typical B2C on-line trading systema typical B2C on-line trading system describe the stages required to capture an order describe the stages required to capture an order

on-line, produce an online invoice and receive on-line, produce an online invoice and receive payment on-linepayment on-line

apply a knowledge of the above to design a data apply a knowledge of the above to design a data model for the on-line payment systemmodel for the on-line payment system

explain the crucial role of the website itself in explain the crucial role of the website itself in generating on-line orders and ROIgenerating on-line orders and ROI

Systems for On-line OrderingSystems for On-line Ordering COULD be achieved via the www in a COULD be achieved via the www in a

number of ways:number of ways: via emailvia email using a HTML Form that sends “semi-structured” using a HTML Form that sends “semi-structured”

data to an email addressdata to an email address using a more sophisticated HTML forms system using a more sophisticated HTML forms system (a (a

shopping cart)shopping cart)» sends data to an on-line product databasesends data to an on-line product database» database could be local (client only system) or on a web database could be local (client only system) or on a web

server (client-server system)server (client-server system)» data could be processed and presented as an online data could be processed and presented as an online

invoiceinvoice» invoice could be linked to a payment systeminvoice could be linked to a payment system

Order via e-mailOrder via e-mail Two possibilities:Two possibilities:

using email address given on home pageusing email address given on home pageusing a HTML mailto command on the using a HTML mailto command on the

home page, which allows the email home page, which allows the email message header to be generated message header to be generated automaticallyautomatically

In either case…In either case… a manual system requiring the vendor to physically a manual system requiring the vendor to physically

read the message and send a reply...read the message and send a reply...

Processes in ordering via e-mailProcesses in ordering via e-mail Customer:Customer:

initiates communication using email address on initiates communication using email address on web siteweb site

types out/sends an unstructured message types out/sends an unstructured message requesting product(s) displayed on websiterequesting product(s) displayed on website

Vendor:Vendor: replies with an emailed orderreplies with an emailed order

» may have be inputted by handmay have be inputted by hand requests some means of payment before requests some means of payment before

proceeding…proceeding…» issues with security of personal data for unencrypted issues with security of personal data for unencrypted

email…email…» may have to be sent by post…may have to be sent by post…

Processes in ordering via a Processes in ordering via a simple HTML formsimple HTML form

Customer presented with product list as a Customer presented with product list as a form on the web pageform on the web page

If properly designed, customer just needs toIf properly designed, customer just needs to type in a number for qty of each product requiredtype in a number for qty of each product required submit the completed form to the vendor’s email submit the completed form to the vendor’s email

addressaddress Because the information is structured, it can Because the information is structured, it can

be processed automatically by software at be processed automatically by software at the server endthe server end

Ordering via Shopping CartOrdering via Shopping Cart

Intention: making ordering products as easy as Intention: making ordering products as easy as possible for the customerpossible for the customer series a web pages with embedded programming series a web pages with embedded programming

featuresfeatures all the processing happens “behind the scenes”all the processing happens “behind the scenes”

Transparency (and EU law!): the customer Transparency (and EU law!): the customer should see exactly what they are ordering…should see exactly what they are ordering… the database should incorporate a means of the database should incorporate a means of

systematically storing customer addressessystematically storing customer addresses the shopping cart logic should total up the exact the shopping cart logic should total up the exact

amount the customer will have to payamount the customer will have to pay

E-commerce via E-marketing E-commerce via E-marketing & Shopping Cart& Shopping Cart

A complete e-commerce website system A complete e-commerce website system should fulfill two main functions:should fulfill two main functions: advertising & promoting the company’s productsadvertising & promoting the company’s products providing a secure and robust system for providing a secure and robust system for

encouraging people to buy those products onlineencouraging people to buy those products online

Each function is a subsystem in its own rightEach function is a subsystem in its own right» Presentation… FRONT ENDPresentation… FRONT END» behind the scenes scripts, database, etc… BACK ENDbehind the scenes scripts, database, etc… BACK END

Shopping System Shopping System Front EndFront End

Online equivalent of a high street shopOnline equivalent of a high street shop home page = shop windowhome page = shop window browsing through the product web pages… the browsing through the product web pages… the

equivalent of walking round the shopequivalent of walking round the shop Objective (should be!)Objective (should be!)

use creative web page design to present use creative web page design to present products as positively as possibleproducts as positively as possible

» to encourage customers to want to buy…to encourage customers to want to buy…» and to increase “hit rate”and to increase “hit rate”

provide a “buy” button in appropriate places!provide a “buy” button in appropriate places!

The Shopping System The Shopping System Back EndBack End

The components that communicate with the The components that communicate with the remote web server:remote web server: relational database holding product, transaction, and relational database holding product, transaction, and

possibly customer datapossibly customer data server scripts to manipulate that data, including…server scripts to manipulate that data, including…

» connectivity string(s) to enable scripts to interact with connectivity string(s) to enable scripts to interact with databasedatabase

» SQL statements to query fields and tablesSQL statements to query fields and tables

Often regarded as “the boring bit!”Often regarded as “the boring bit!” but should all work perfectly, and never really be but should all work perfectly, and never really be

noticed…noticed…» ““transparent to the user”transparent to the user”

Linking Front-End Linking Front-End and Back-Endand Back-End

Where the shopping Where the shopping cart system becomes cart system becomes invaluable…invaluable… cart data held locally cart data held locally

for quicknessfor quickness cart display gives cart display gives

customer immediate customer immediate feedback on what has feedback on what has already been boughtalready been bought

Front end (products on view)

Processing allowing purchase

Cart data On-line invoice

Payment & Fulfillment Payment & Fulfillment

The “after ordering” or “customer service” web The “after ordering” or “customer service” web pages (especially important in B2C)pages (especially important in B2C) reports progress of order, points out problemsreports progress of order, points out problems should “look good”, to maintain the customer’s should “look good”, to maintain the customer’s

confidence in the company as an online vendorconfidence in the company as an online vendor Consist of...Consist of...

secure payment pages, that connect to a clearly secure payment pages, that connect to a clearly identified (logo?) merchant services provideridentified (logo?) merchant services provider

corporate “thank you” pagecorporate “thank you” page system to email customer with information system to email customer with information

concerning the acceptance & progress of their orderconcerning the acceptance & progress of their order

Shopping Cart LogicShopping Cart Logic The cart itself has to:The cart itself has to:

collect the order using information collect the order using information gathered by mouse clicks on shopping gathered by mouse clicks on shopping pagespages

store & process the order datastore & process the order dataprepare online invoiceprepare online invoicedisplay invoice for customerdisplay invoice for customerrequest some means of payment request some means of payment

Using local datasets & Using local datasets & cookiescookies

E-commerce is very big businessE-commerce is very big business no expense spared in providing the best customer no expense spared in providing the best customer

experience…experience… aim for rapid interaction, good security, minimal aim for rapid interaction, good security, minimal

customer effort, fast responsecustomer effort, fast response in this case “small is beautiful”, because small in this case “small is beautiful”, because small

means fast…means fast…

Makes sense to make shopping cart dataset Makes sense to make shopping cart dataset (“VIEW” of database) as simple as possible(“VIEW” of database) as simple as possible

Typical B2C Typical B2C shopping cart system… (1)shopping cart system… (1)

Web page displays live data from Web page displays live data from organisational web serverorganisational web server

Cart:Cart: customer selects product(s) and qty using customer selects product(s) and qty using

hyperlinks/buttons on product pageshyperlinks/buttons on product pages data from selections stored locally on cart datasetdata from selections stored locally on cart dataset new page created to display cart datanew page created to display cart data totals, including VAT automatically displayed on totals, including VAT automatically displayed on

on-line order (not yet an invoice – by convention, on-line order (not yet an invoice – by convention, no customer details included on dataset)no customer details included on dataset)

Typical B2C Typical B2C shopping cart system… (2)shopping cart system… (2) customer chooses to buy (or not!) directly using customer chooses to buy (or not!) directly using

button/hyperlink on on-line orderbutton/hyperlink on on-line order System requires customer to either:System requires customer to either:

» log on so existing customer record can be accessedlog on so existing customer record can be accessed» supply new details on a new (preferably secure) web supply new details on a new (preferably secure) web

form, and details need to saved securely before form, and details need to saved securely before proceedingproceeding

system presents on-line invoice, and requests system presents on-line invoice, and requests paymentpayment

Typical B2C Typical B2C shopping cart system… (3)shopping cart system… (3)

The invoice has to comply with EU The invoice has to comply with EU legislation (other legislation, for legislation (other legislation, for purchases outside the EUpurchases outside the EUno further charges beyond this point…no further charges beyond this point…terms & conditions clearly displayedterms & conditions clearly displayedcustomer personal data suitably protectedcustomer personal data suitably protected

Hyperlink/button from online invoice to Hyperlink/button from online invoice to payment & fulfillment pagespayment & fulfillment pages

Shop@ssistant resource: essential Shop@ssistant resource: essential features of a shopping cartfeatures of a shopping cart

Default shopping pDefault shopping pages supplied - readily ages supplied - readily customizablecustomizable e.g.e.g. buttons, text, pictures etc buttons, text, pictures etc. . important for meeting client needs!important for meeting client needs!

Good practice:Good practice: enforces reading of “terms & conditions”enforces reading of “terms & conditions” automatically displays shopping cart contents whenever automatically displays shopping cart contents whenever

forms data is addedforms data is added captures customer data later in the processcaptures customer data later in the process handles tax and shipping for overseas customershandles tax and shipping for overseas customers scope to link with banking network via secure payment scope to link with banking network via secure payment

systems, with systems, with built-in linksbuilt-in links» security of financial data security of financial data handled by a trusted third party!!!handled by a trusted third party!!!

Shop@ssistantShop@ssistant System System Architecture (if interested…)Architecture (if interested…)

Very confusing because it uses several instances of Very confusing because it uses several instances of index.htmlindex.html root folder file boots the main system file, in the system folderroot folder file boots the main system file, in the system folder causes the system to be loadedcauses the system to be loaded

» a web page informs that “Shop@ssistant system is being loaded…”a web page informs that “Shop@ssistant system is being loaded…” finally, the home page is loaded from the pages folderfinally, the home page is loaded from the pages folder

Product DataProduct Data saved within product pages as JavaScript arrayssaved within product pages as JavaScript arrays

Shopping Cart DataShopping Cart Data set up on local hard disk as a cookieset up on local hard disk as a cookie

» NOT a session cookieNOT a session cookie» data remains after user has logged out, and system has been switched data remains after user has logged out, and system has been switched

off!off! cookie values put there by customer clicking on a pay buttoncookie values put there by customer clicking on a pay button

Cart page itself created by calling a JavaScript routine, and Cart page itself created by calling a JavaScript routine, and placing cookie values into a HTML tableplacing cookie values into a HTML table other features are also JavaScript routinesother features are also JavaScript routines

““Bookshop”– e.g. of shopping Bookshop”– e.g. of shopping system designsystem design

Very simple design... Very simple design... enables ordering of a book in at least two waysenables ordering of a book in at least two ways

» text or imagetext or image

Easy navigation:Easy navigation:forward (buttons at the bottom of the page)forward (buttons at the bottom of the page)back (hyperlinks at top and bottom)back (hyperlinks at top and bottom)

Buttons at the bottom of the page:Buttons at the bottom of the page: Order this BookOrder this Book 3 Copies for 2 Offer3 Copies for 2 Offer Review Basket Review Basket

Shop@ssistant “Bookshop”Shop@ssistant “Bookshop”Site design (more…)Site design (more…)

Clicking on either the image of the book or Clicking on either the image of the book or the order button displays “shopping basket”the order button displays “shopping basket”

Features to note:Features to note: heading - reflect corporate image, etc.heading - reflect corporate image, etc. buttons at top of every page - good navigationbuttons at top of every page - good navigation hyperlink on product pages for more detailhyperlink on product pages for more detail option to go to payment page - cashieroption to go to payment page - cashier ““remove item” check box remove item” check box separate form: on-line invoiceseparate form: on-line invoice bullet pointed helpbullet pointed help

““Bookshop”Bookshop” Site DesignSite DesignOn Screen InvoiceOn Screen Invoice

Dealing with Customer Details…Dealing with Customer Details… Based on “buy” hyperlinkBased on “buy” hyperlink

» i.e. customer commitment to a purchasei.e. customer commitment to a purchase customer has to appropriately complete name, customer has to appropriately complete name,

address, email address fields (all validated)address, email address fields (all validated) ““Next” from customer details selectively Next” from customer details selectively

provides an invoice:provides an invoice: if customer details are not in the right format…if customer details are not in the right format…

» customer details page will instead be calledcustomer details page will instead be called

On screen invoice page:On screen invoice page: includes all extra charges (e.g. shipping and VAT)includes all extra charges (e.g. shipping and VAT) pay button to go to “merchant” site for paymentpay button to go to “merchant” site for payment

Handling PaymentHandling Payment

After payment, fulfillment…After payment, fulfillment…thank you pagethank you pagethen a goodbye page…then a goodbye page…and (optionally) an email confirmation of and (optionally) an email confirmation of

order...order...» independent of whether payment has been independent of whether payment has been

accepted…accepted…

Not bad for mid-1990s!! Not bad for mid-1990s!! (wonder how much the developer was (wonder how much the developer was

paid…)paid…)

Security and E-commerceSecurity and E-commerce Focused mostly on financial transactionFocused mostly on financial transaction

system needs to be designed so financial data system needs to be designed so financial data cannot be tapped into en route or on either client cannot be tapped into en route or on either client or server computeror server computer

quite a challenge for a developer… often passed quite a challenge for a developer… often passed to 3to 3rdrd party provider party provider

» e.g. PayPal, WorldPaye.g. PayPal, WorldPay However…customer requirement to supply However…customer requirement to supply

personal datapersonal data need for protection of such data under EU need for protection of such data under EU

legislationlegislation» many systems based on US model (no data protection many systems based on US model (no data protection

legislation). Note that Shop@ssistant was British legislation). Note that Shop@ssistant was British » still on “catch up” as regards shopping cart design…still on “catch up” as regards shopping cart design…

Developing your own cartDeveloping your own cart Many possible solutions…Many possible solutions… Many “skeletal” shopping cart systems Many “skeletal” shopping cart systems

already createdalready createdshopping cart components that just need to shopping cart components that just need to

be assembled into a unique systembe assembled into a unique system» Charon Cart (asp)Charon Cart (asp)» Webthang (asp, asp.net)Webthang (asp, asp.net)» WebXel (asp.net)WebXel (asp.net)

Still available for a “fall back” positionStill available for a “fall back” position

Developing a Shopping Cart Developing a Shopping Cart with Visual Studiowith Visual Studio

Need data source controls & general Need data source controls & general controls to coordinate button logiccontrols to coordinate button logic

Also needs HTMLAlso needs HTML tables now frowned on by (some) client-side tables now frowned on by (some) client-side

developersdevelopers really useful for server-sidereally useful for server-side

Best data source control for working with Best data source control for working with HTML tables: <asp:repeater>HTML tables: <asp:repeater>

Use of ASP:RepeaterUse of ASP:Repeater Only limited use of a wizardOnly limited use of a wizard

manual use of <table> and <itemtemplate>manual use of <table> and <itemtemplate> Syntax (hard coded):Syntax (hard coded):

» <asp:Repeater ID="Repeater1" runat="server“ <asp:Repeater ID="Repeater1" runat="server“ DataSourceID="AccessDataSource2" DataSourceID="AccessDataSource2" EnableViewState="False"> EnableViewState="False">

<HeaderTemplate><HeaderTemplate>

<table> <tr> </HeaderTemplate>  <table> <tr> </HeaderTemplate>  

<ItemTemplate> <td><%# Eval("CategoryName") <ItemTemplate> <td><%# Eval("CategoryName") %></td> </ItemTemplate> %></td> </ItemTemplate>

<FooterTemplate> </tr> <FooterTemplate> </tr>

</table> </FooterTemplate>  </table> </FooterTemplate>  

</asp:Repeater></asp:Repeater>

Making a Start…Making a Start…

Which comes first… the chicken or the egg?Which comes first… the chicken or the egg? i.e. Which to develop first… database or i.e. Which to develop first… database or

server scripts?server scripts? Generally considered to be a good idea to Generally considered to be a good idea to

start with the data…start with the data… that means:that means:

» identifying the ENTITIESidentifying the ENTITIES» modelling their relationshipsmodelling their relationships» Adding the ATTRIBUTESAdding the ATTRIBUTES

The Data Model for a The Data Model for a Shopping SystemShopping System

Basic Entities:Basic Entities:ProductProductCustomerCustomer

Link Entities:Link Entities:OrderOrderOrder-LineOrder-Line

All four need to be logically linked in an All four need to be logically linked in an appropriate way…appropriate way…

Possible basic data (entity) Possible basic data (entity) model for a Shopping Systemmodel for a Shopping System

customer

Order line

orderproduct

Need to add 1-many ends ofrelationships

Where does Shopping Cart fit in?

Possible Data Model with Possible Data Model with entities/attributes addedentities/attributes added

Creating the Physical Database Creating the Physical Database from a Logical Designfrom a Logical Design

It works on paper…It works on paper… But a practical working model is needed:But a practical working model is needed:

create database tablescreate database tableslink them together, according to the link them together, according to the

Entity/relationships/attributes model you Entity/relationships/attributes model you createdcreated

populate the tables with trial data of an populate the tables with trial data of an appropriate formatappropriate format

make sure all is consistent…make sure all is consistent…

Which Fields are necessary Which Fields are necessary for the shopping cart?for the shopping cart?

These will be used as a dataset, held as a These will be used as a dataset, held as a cookie on the local machinecookie on the local machine needs to be the minimum numberneeds to be the minimum number needs to be non-sensitive data (held on local needs to be non-sensitive data (held on local

machine)machine)

Which data is needed for a shopping cart?Which data is needed for a shopping cart? the corresponding fields are what is required…the corresponding fields are what is required… over to you… (something to do in study week)over to you… (something to do in study week)

Justifying the Cost of a Justifying the Cost of a Shopping Cart SystemShopping Cart System

Many ways to create a shopping cart system:Many ways to create a shopping cart system: how does the business know what is good value how does the business know what is good value

for money?for money? Internet or cloud-based systems may look Internet or cloud-based systems may look

attractive…attractive…» may appear to be cheapermay appear to be cheaper

» may appear to manage everything for the businessmay appear to manage everything for the business

how well does outsourcing fit withhow well does outsourcing fit with» business objectivesbusiness objectives

» legal & regulatory requirementslegal & regulatory requirements

Business Benefits of B2CBusiness Benefits of B2C Can generate more sales…Can generate more sales…

increase revenueincrease revenue BUT how can B2C e-commerce cut BUT how can B2C e-commerce cut

costs?costs?data input is done by the customerdata input is done by the customer

» help from the shopping pages and shopping help from the shopping pages and shopping cartcart

data output is presented directly on the data output is presented directly on the screenscreen

cuts greatly on administration…cuts greatly on administration…

What makes a successful What makes a successful on-line B2C E-commerce site?on-line B2C E-commerce site?

Needs toNeeds to attract customersattract customers and retain customers…and retain customers… measured through hit ratemeasured through hit rate

Good design principles:Good design principles: common “look and feel”common “look and feel” shopping pages tasteful, but not over-elaborateshopping pages tasteful, but not over-elaborate shopping system user-friendly & works efficientlyshopping system user-friendly & works efficiently

Successful e-commerce websites save/make the Successful e-commerce websites save/make the vendor an awful lot of money!vendor an awful lot of money! potentially huge ROI (wise developer requests a cut?)potentially huge ROI (wise developer requests a cut?)

B2C E-commerce: Keeping B2C E-commerce: Keeping the customer satisfied…the customer satisfied…

All transaction data has to be presented All transaction data has to be presented digitally on-screen… digitally on-screen… order forms (no opening envelopes and processing order forms (no opening envelopes and processing

an order from paper)an order from paper) invoices (no need to print them, put them into invoices (no need to print them, put them into

envelopes, or send them off by post)envelopes, or send them off by post) Huge potential cost saving, but the screen Huge potential cost saving, but the screen

interface must be designed FOR THE interface must be designed FOR THE CUSTOMER!!!CUSTOMER!!!

If the customer is not comfortable with it, they If the customer is not comfortable with it, they may not buy… and may not returnmay not buy… and may not return

Internet MarketingInternet Marketing Huge growth area…Huge growth area…

Whole conferences devoted to e.g. “Technologies Whole conferences devoted to e.g. “Technologies for Marketing”for Marketing”

In the early days of e-commerce, the rate of In the early days of e-commerce, the rate of hits on website WAS the value of the hits on website WAS the value of the company (!)company (!) now revised downwards, but same principle now revised downwards, but same principle

applies…applies…» formula based on (say) every tenth visitor will be a formula based on (say) every tenth visitor will be a

customer…customer…

Best ways to attract visitors:Best ways to attract visitors: use search engines effectivelyuse search engines effectively advertise URL effectively using a diverse range of advertise URL effectively using a diverse range of

mediamedia

Promoting the WebsitePromoting the Website

However excellent the site may be…However excellent the site may be…the business will get no benefits from the business will get no benefits from

increase in sales if there are no visitors (!)increase in sales if there are no visitors (!) MANY ways to maximise the number of MANY ways to maximise the number of

visitors to a site…visitors to a site… Suggestions?Suggestions?

Ways to Ways to Improving Hit RateImproving Hit Rate

Many applications availableMany applications available Some very simpleSome very simple

» counterscounters» meta name generatorsmeta name generators» date/time/special effects, etc. (client end)date/time/special effects, etc. (client end)» links to code located on other sides (e.g weather links to code located on other sides (e.g weather

forecast) forecast) » provide more features for the siteprovide more features for the site

any number of possibilitiesany number of possibilities

Others more technological/sophisticated :Others more technological/sophisticated :» example: ASP Sheriffexample: ASP Sheriff

Effective Use of Search Engines Effective Use of Search Engines Objective: to use appropriate Objective: to use appropriate

techniques to cause the search engine techniques to cause the search engine display your site in its “top ten”display your site in its “top ten”Search Engine “spiders”Search Engine “spiders”

» crawl round the net looking out for keywords in crawl round the net looking out for keywords in web pagesweb pages

» retrieve keywords and corresponding URLsretrieve keywords and corresponding URLs» take keywords back to the search engine take keywords back to the search engine

database database » Program automatically adds the lists of Program automatically adds the lists of

keywords to the databasekeywords to the database right keywords MUST be presented to the spidersright keywords MUST be presented to the spiders

Effective Use of Effective Use of Search Engines (2)Search Engines (2)

Longer-term Search Engine ranking also Longer-term Search Engine ranking also based on:based on: hit ratehit rate number, and activity, of external links on sitenumber, and activity, of external links on site

Technologies available to help boost rankingsTechnologies available to help boost rankings whole discipline e-marketing technology focuses whole discipline e-marketing technology focuses

on improving hit rate…on improving hit rate… Like e-commerce itself this is now VERY BIG Like e-commerce itself this is now VERY BIG

BUSINESS!BUSINESS!