Transcript presentation5 - University of Worcester

COMP3121
E-Commerce Technologies
Richard Henson
University of Worcester
October 2011
Week 5: B2C E-commerce
websites with Shopping Carts

Objectives:
 describe the software & hardware components of
a typical B2C on-line trading system
 describe the stages required to capture an order
on-line, produce an online invoice and receive
payment on-line
 apply a knowledge of the above to design a data
model for the on-line payment system
 explain the crucial role of the website itself in
generating on-line orders and ROI
Systems for On-line Ordering

COULD be achieved via the www in a
number of ways:
 via email
 using a HTML Form that sends “semi-structured”
data to an email address
 using a more sophisticated HTML forms system (a
shopping cart)
» sends data to an on-line product database
» database could be local (client only system) or on a web
server (client-server system)
» data could be processed and presented as an online
invoice
» invoice could be linked to a payment system
Order via e-mail

Two possibilities:

using email address given on home page
using a HTML mailto command on the
home page, which allows the email
message header to be generated
automatically
In either case…
 a manual system requiring the vendor to
physically read the message and send a reply...
Processes in ordering via e-mail

Customer:
 initiates communication using email address on
web site
 types out/sends an unstructured message
requesting product(s) displayed on website

Vendor:
 replies with an emailed order
» may have be inputted by hand
 requests some means of payment before
proceeding…
» issues with security of personal data for unencrypted
email…
» may have to be sent by post…
Processes in ordering via a
simple HTML form


Customer presented with product list as a
form on the web page
If properly designed, customer just needs to
 type in a number for qty of each product required
 submit the completed form to the vendor’s email
address

Because the information is structured, it can
be processed automatically by software at
the server end
Ordering via Shopping Cart

Intention: making ordering products as easy as
possible for the customer
 series a web pages with embedded programming
features
 all the processing happens “behind the scenes”

Transparency (and EU law!): the customer
should see exactly what they are ordering…
 the database should incorporate a means of
systematically storing customer addresses
 the shopping cart logic should total up the exact
amount the customer will have to pay
E-commerce via E-marketing
& Shopping Cart

A complete e-commerce website system
should fulfill two main functions:
 advertising & promoting the company’s products
 providing a secure and robust system for
encouraging people to buy those products online

Each function is a subsystem in its own right
» Presentation… FRONT END
» behind the scenes scripts, database, etc… BACK END
Shopping System
Front End

Online equivalent of a high street shop
 home page = shop window
 browsing through the product web pages… the
equivalent of walking round the shop

Objective (should be!)
 use creative web page design to present
products as positively as possible
» to encourage customers to want to buy…
» and to increase “hit rate”
 provide a “buy” button in appropriate places!
The Shopping System
Back End

The components that communicate with the
remote web server:
 relational database holding product, transaction, and
possibly customer data
 server scripts to manipulate that data, including…
» connectivity string(s) to enable scripts to interact with
database
» SQL statements to query fields and tables

Often regarded as “the boring bit!”
 but should all work perfectly, and never really be
noticed…
» “transparent to the user”
Linking Front-End
and Back-End

Where the shopping
cart system becomes
invaluable…
 cart data held locally
for quickness
 cart display gives
customer immediate
feedback on what has
already been bought
Front end
(products on view)
Cart data
On-line
invoice
Processing allowing
purchase
Payment & Fulfillment

The “after ordering” or “customer service” web
pages (especially important in B2C)
 reports progress of order, points out problems
 should “look good”, to maintain the customer’s
confidence in the company as an online vendor

Consist of...
 secure payment pages, that connect to a clearly
identified (logo?) merchant services provider
 corporate “thank you” page
 system to email customer with information
concerning the acceptance & progress of their order
Shopping Cart Logic

The cart itself has to:
collect the order using information
gathered by mouse clicks on shopping
pages
store & process the order data
prepare online invoice
display invoice for customer
request some means of payment
Using local datasets & cookies

E-commerce is very big business
 no expense spared in providing the best customer
experience…
 aim for rapid interaction, good security, minimal
customer effort, fast response
 in this case “small is beautiful”, because small
means fast…

Makes sense to make shopping cart dataset
(“VIEW” of database) as simple as possible
Typical B2C
shopping cart system… (1)


Web page displays live data from
organisational web server
Cart:
 customer selects product(s) and qty using
hyperlinks/buttons on product pages
 data from selections stored locally on cart dataset
 new page created to display cart data
 totals, including VAT automatically displayed on
on-line order (not yet an invoice – by convention,
no customer details included on dataset)
Typical B2C
shopping cart system… (2)
 customer chooses to buy (or not!) directly using
button/hyperlink on on-line order
 System requires customer to either:
» log on so existing customer record can be accessed
» supply new details on a new (preferably secure) web
form, and details need to saved securely before
proceeding
 system presents on-line invoice, and requests
payment
Typical B2C
shopping cart system… (3)

The invoice has to comply with EU
legislation (other legislation, for
purchases outside the EU
no further charges beyond this point…
terms & conditions clearly displayed
customer personal data suitably protected

Hyperlink/button from online invoice to
payment & fulfillment pages
Shop@ssistant resource: essential
features of a shopping cart

Default shopping pages supplied - readily
customizable
 e.g. buttons, text, pictures etc.
 important for meeting client needs!

Good practice:
 enforces reading of “terms & conditions”
 automatically displays shopping cart contents whenever
forms data is added
 captures customer data later in the process
 handles tax and shipping for overseas customers
 scope to link with banking network via secure payment
systems, with built-in links
» security of financial data handled by a trusted third party!!!
Shop@ssistant System
Architecture (if interested…)

Very confusing because it uses several instances of index.html
 root folder file boots the main system file, in the system folder
 causes the system to be loaded
» a web page informs that “Shop@ssistant system is being loaded…”
 finally, the home page is loaded from the pages folder

Product Data
 saved within product pages as JavaScript arrays

Shopping Cart Data
 set up on local hard disk as a cookie
» NOT a session cookie
» data remains after user has logged out, and system has been switched
off!
 cookie values put there by customer clicking on a pay button

Cart page itself created by calling a JavaScript routine, and
placing cookie values into a HTML table
 other features are also JavaScript routines
“Bookshop”– e.g. of shopping
system design

Very simple design...
 enables ordering of a book in at least two ways
» text or image

Easy navigation:

forward (buttons at the bottom of the page)
back (hyperlinks at top and bottom)
Buttons at the bottom of the page:
 Order this Book
 3 Copies for 2 Offer
 Review Basket
Shop@ssistant “Bookshop”
Site design (more…)


Clicking on either the image of the book or
the order button displays “shopping basket”
Features to note:
 heading - reflect corporate image, etc.
 buttons at top of every page - good navigation
 hyperlink on product pages for more detail
 option to go to payment page - cashier
 “remove item” check box
 separate form: on-line invoice
 bullet pointed help
“Bookshop” Site Design
On Screen Invoice

Dealing with Customer Details…
 Based on “buy” hyperlink
» i.e. customer commitment to a purchase
 customer has to appropriately complete name,
address, email address fields (all validated)

“Next” from customer details selectively
provides an invoice:
 if customer details are not in the right format…
» customer details page will instead be called

On screen invoice page:
 includes all extra charges (e.g. shipping and VAT)
 pay button to go to “merchant” site for payment
Handling Payment

After payment, fulfillment…
thank you page
then a goodbye page…
and (optionally) an email confirmation of
order...
» independent of whether payment has been
accepted…

Not bad for mid-1990s!!
(wonder how much the developer was
paid…)
Security and E-commerce

Focused mostly on financial transaction
 system needs to be designed so financial data
cannot be tapped into en route or on either client
or server computer
 quite a challenge for a developer… often passed
to 3rd party provider
» e.g. PayPal, WorldPay

However…customer requirement to supply
personal data
 need for protection of such data under EU
legislation
» many systems based on US model (no data protection
legislation). Note that Shop@ssistant was British
» still on “catch up” as regards shopping cart design…
Developing your own cart
Many possible solutions…
 Many “skeletal” shopping cart systems
already created

shopping cart components that just need to
be assembled into a unique system
» Charon Cart (asp)
» Webthang (asp, asp.net)
» WebXel (asp.net)

Still available for a “fall back” position
Developing a Shopping Cart
with Visual Studio


Need data source controls & general
controls to coordinate button logic
Also needs HTML
 tables now frowned on by (some) client-side
developers
 really useful for server-side

Best data source control for working with
HTML tables: <asp:repeater>
Use of ASP:Repeater

Only limited use of a wizard
 manual use of <table> and <itemtemplate>
 Syntax (hard coded):
» <asp:Repeater ID="Repeater1" runat="server“
DataSourceID="AccessDataSource2"
EnableViewState="False">
<HeaderTemplate>
<table> <tr> </HeaderTemplate>
<ItemTemplate> <td><%# Eval("CategoryName")
%></td> </ItemTemplate>
<FooterTemplate> </tr>
</table> </FooterTemplate>
</asp:Repeater>
Making a Start…



Which comes first… the chicken or the egg?
i.e. Which to develop first… database or
server scripts?
Generally considered to be a good idea to
start with the data…
 that means:
» identifying the ENTITIES
» modelling their relationships
» Adding the ATTRIBUTES
The Data Model for a
Shopping System

Basic Entities:
Product
Customer

Link Entities:
Order
Order-Line

All four need to be logically linked in an
appropriate way…
Possible basic data (entity)
model for a Shopping System
order
product
Need to add
1-many ends of
relationships
Order line
Where does
Shopping Cart fit in?
customer
Possible Data Model with
entities/attributes added
Creating the Physical Database
from a Logical Design
It works on paper…
 But a practical working model is needed:

create database tables
link them together, according to the
Entity/relationships/attributes model you
created
populate the tables with trial data of an
appropriate format
make sure all is consistent…
Which Fields are necessary
for the shopping cart?

These will be used as a dataset, held as a
cookie on the local machine
 needs to be the minimum number
 needs to be non-sensitive data (held on local
machine)

Which data is needed for a shopping cart?
 the corresponding fields are what is required…
 over to you… (something to do in study week)
Justifying the Cost of a
Shopping Cart System

Many ways to create a shopping cart system:
 how does the business know what is good value
for money?
 Internet or cloud-based systems may look
attractive…
» may appear to be cheaper
» may appear to manage everything for the business
 how well does outsourcing fit with
» business objectives
» legal & regulatory requirements
Business Benefits of B2C

Can generate more sales…
increase revenue

BUT how can B2C e-commerce cut
costs?
data input is done by the customer
» help from the shopping pages and shopping
cart
data output is presented directly on the
screen
cuts greatly on administration…
What makes a successful
on-line B2C E-commerce site?

Needs to attract customers
 and retain customers…
 measured through hit rate

Good design principles:
 common “look and feel”
 shopping pages tasteful, but not over-elaborate
 shopping system user-friendly & works efficiently

Successful e-commerce websites save/make the
vendor an awful lot of money!
 potentially huge ROI (wise developer requests a cut?)
B2C E-commerce: Keeping
the customer satisfied…

All transaction data has to be presented
digitally on-screen…
 order forms (no opening envelopes and processing
an order from paper)
 invoices (no need to print them, put them into
envelopes, or send them off by post)


Huge potential cost saving, but the screen
interface must be designed FOR THE
CUSTOMER!!!
If the customer is not comfortable with it, they
may not buy… and may not return
Internet Marketing

Huge growth area…
 Whole conferences devoted to e.g. “Technologies
for Marketing”

In the early days of e-commerce, the rate of
hits on website WAS the value of the
company (!)
 now revised downwards, but same principle
applies…
» formula based on (say) every tenth visitor will be a
customer…

Best ways to attract visitors:
 use search engines effectively
 advertise URL effectively using a diverse range of
media
Promoting the Website

However excellent the site may be…
the business will get no benefits from
increase in sales if there are no visitors (!)
MANY ways to maximise the number of
visitors to a site…
 Suggestions?

Ways to
Improving Hit Rate

Many applications available
 Some very simple
»
»
»
»
counters
meta name generators
date/time/special effects, etc. (client end)
links to code located on other sides (e.g weather
forecast)
» provide more features for the site

any number of possibilities
 Others more technological/sophisticated :
» example: ASP Sheriff
Effective Use of Search Engines

Objective: to use appropriate
techniques to cause the search engine
display your site in its “top ten”
Search Engine “spiders”
» crawl round the net looking out for keywords in
web pages
» retrieve keywords and corresponding URLs
» take keywords back to the search engine
database
» Program automatically adds the lists of
keywords to the database

right keywords MUST be presented to the spiders
Effective Use of
Search Engines (2)

Longer-term Search Engine ranking also
based on:
 hit rate
 number, and activity, of external links on site

Technologies available to help boost rankings
 whole discipline e-marketing technology focuses
on improving hit rate…
 Like e-commerce itself this is now VERY BIG
BUSINESS!