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!