COMP3121 E-Commerce Technologies

COMP3121E-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) On-line invoice Cart data 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@ssistantSystem 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 DesignOn 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 Order line Need to add 1-many ends of relationships customer Where does Shopping Cart fit in?

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 toattract 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!

COMP3121 E-Commerce Technologies