A SY STE M F OR T EA CHIN G

MIS AND MB A ST UD ENT S

TO DEPL OY A S CALABLE
DATABASE-D RIV EN WEB
ARCHIT EC TUR E F OR B 2C E-
COM MER CE
Alexander Y. Yap, Ph.D.
Elon University, North Carolina

Claudia Loebbecke, Ph.D.

University of Cologne, Germany

Yap, Elon University, N. Carolina

 Background
 IS Environment: Five Years Teaching in two Business School
Environments (MIS & MBA students)

 A variety of B2C E-commerce systems solutions are available for

different business needs …

 But deciding on a particular systems solution can be a

challenging process

 Putting things in perspective for students

• Choosing the appropriate IS strategy for Business Objectives
• Looking at Business Processes behind E-commerce systems
• Assessing how different solutions and systems address short
term vs. long term strategies

Yap, Elon University, N. Carolina

 Objective
 Show students different solution paths
 We came up with four generic solutions models
 Show different architecture scalability
 Demonstrate the role of database in e-commerce
 Show how a web application server (middleware) shuttles
data between the database and browser
 Discuss the importance of web interface and its usability
(front-end design)
 Develop and Deploy an E-commerce application (one
project for each student)

Yap, Elon University, N. Carolina

Business Process Optimization,
Outsourcing, & Content Development

Yap, Elon University, N. Carolina

Stand Alone Model
(Two-tier Architecture)

Yap, Elon University, N. Carolina

E-Commerce
Integrated with E-Business Systems
(Model 4 – Three-tier & Multi-tier Architecture)

Yap, Elon University, N. Carolina

 Web Architectures
Two-tier Architecture Three-tier Architecture Multi-tier Architecture

Client Client Client

Computer Computer Computer
(Web Browser) (Web Browser) (Web Browser)

Web Server
+ Web Server Web Server
Stand Alone
Database
(Access)
Database Server
Database
Server Email Server
(Oracle,
SQL Server) File Server

Video Server

Yap, Elon University, N. Carolina

 E-Commerce: A Two Component
Course (Teaching the Business &
Technology Components)
 Students taking MIS (Graduate Level) – needed 2 semesters to cover
the business component (1) and the technology component (1)
• Three-tier architecture
• Oracle and SQL programming
• Customize the Application with a lot of hand coding
• Setting up the Application Server & Web/HTTP Server
 MBA students learning E-commerce were limited to a one semester.
Business component (half a semester) and technology component
(half a semester)
• Two-tier architecture
• MS Access
• Use Rapid Application Development Methods for Coding
(Wizards, Drag and Drop coding, reuse of existing
components – shopping cart)
• No Server set up required
Yap, Elon University, N. Carolina
Student Feedback
 MBA students with no database background were more
suited to learning Model 3 (just to see how technology
manages the electronic process)
 MIS students preferred Model 4, because they know that
high-end relational database management systems (like
Oracle) work with other enterprise applications
 MBA students were able to see how different systems
could be integrated with e-commerce systems, enabling
them to make technology acquisition decisions (Model 4)
 MIS students were able to set-up customized e-
commerce applications with their own coding logic, their
choice of database, and operating system (Linux)

Yap, Elon University, N. Carolina

Application
Development Environment
Client Software Middleware Parsing Codes
(Home Installed) (University E-commerce Server) Embedded in Tags

Web WEB/HTTP SERVER

FLASH
Page (Microsoft IIS)
Animation
(Nested in html codes) COLD FUSION
Process HTML tags
APPLICATION HTML
SERVER Tags
Processes Web pages Cold Fusion Tags
with with SQL scripts are
HOMESITE +
CF tags passed on to
Generates Cold Fusion database
Enabled Cold
Web pages (*.cfm) Fusion
Tags

DATABASE

ORACLE or
MS ACCESS
(interprets SQL scripts)

Database
(University Server)

Yap, Elon University, N. Carolina

 TECHNOLOGIES USED

SOFTWARE TOOLS
• Macromedia Homesite+ & Dreamweaver (editors
for coding)
• Cold Fusion Server (Application Server -
middleware)
• MS Access Database or Oracle (relational
database; back-end)
• Macromedia Flash MX (animation)
• Others (Fireworks, Photoshop, Graphic editors)

Yap, Elon University, N. Carolina

Application Features
When we decided to use CF
(2000-2001)
Features Cold Fusion (CF) Active Server Pages (ASP)
Multi-Platform Windows, HP Unix, Solaris, Windows only
(Interoperability) Linux
Native RDBMS Drivers (i.e. Yes No
Oracle drivers)
Simplified One Tag XML Yes No
Parser
Clustering and Software Load Yes No
Balancing
Security Sandboxes Yes No
CORBA / COM / Native support for all three Only COM is native to ASP
JAVA Support

Rapid Deployment (Rapid Drag and Drop coding, custom No

Application Development) tags, automated scripting
with SQL Builder,
Template Wizards

Yap, Elon University, N. Carolina

RDBMS/Database Connectivity

Yap, Elon University, N. Carolina

 Cold Fusion Studio
(now Macromedia
Homesite +) – RAD
Features
 You can link the tables:
‘click and drag’ the
primary key to the foreign
key
 Then, double click on the
fields and they will
appear automatically
 SQL Script appears
automatically
 You can sort the order
by a chosen field (e.g.
date)

Yap, Elon University, N. Carolina

RAD Tools:
Drag and Drop Query Codes
(Cold Fusion Studio -> Homesite Plus)

Yap, Elon University, N. Carolina

RAP - Using Wizards to create
Form and Action Templates

Yap, Elon University, N. Carolina

Select Table and Fields
that you want to include in form

Yap, Elon University, N. Carolina

Form & Action Template Created
(product_entryform.cfm, product_entryaction.cfm)

Yap, Elon University, N. Carolina

Form Template
Design & Code

Yap, Elon University, N. Carolina

 Action Template
(CFINSERT)

Validation/Confirmation that data

Yap, Elon has been
University, inputted into the database
N. Carolina
First Step: Create Database
Data Data Data Data Content
to be Provided Content to be Collected (Samples)

Product Categories Product Categories (i.e. Client Information Name, Address, E-Mail,
(Catalog) cars, computers) (upon ordering) Phone

Products Product Name, Product Payment Information Credit Card Number,

(Catalog) Description (short & (upon ordering) Billing Address
long), Price, Images
(small & large)
Product Inventory Stock Available (quantity), Order Information Products Ordered,
(Catalog) Back Orders, Date of (upon ordering) Quantity, Order
Delivery Date

Order Invoice Order No., Item No., Items Customer Services Complaints and
(after Ordering) Ordered, Total (after ordering) Comments, Item
and Order Tracking

Yap, Elon University, N. Carolina

Second Step: Show students how their data is
connected to the Server
“Creating the ‘data source’ using student’s name”

Yap, Elon University, N. Carolina

Data source
 MSAccess – set
up the path of
the database file
in the server
 Oracle – create
a schema name
for each student
(using Oracle’s
userid and
password)

Yap, Elon University, N. Carolina

Third Step:
Creating the E-commerce Application:
Separating Content and Web Design

Yap, Elon University, N. Carolina

The
Shopping Cart

Yap, Elon University, N. Carolina

Handling Session Variables
(Passing Data from Catalog to
Shopping Cart to Database)

Yap, Elon University, N. Carolina

Passing Data Variables
(Using different web templates)

Product Online Capture

Shopping
Table Product Order Info
Cart
Info Catalog In Database

Yap, Elon University, N. Carolina

Form Variables
Inserted into the Customer Table

Yap, Elon University, N. Carolina

 Fourth Step:
Flash Animation

 SPLASH PAGE

 Create layers

 Separate animated
objects for each layer

 Different animation
effects

 Timeline of the animated

objects

 NAVIGATION BUTTONS
(optional)

Yap, Elon University, N. Carolina

Embedding Sound

 Drag the sound clip to the object

 If you successfully dragged the sound, it will
appear on the frame

Yap, Elon University, N. Carolina

Conclusion
 Students taking MIS at the Graduate level, with background in SQL
and Oracle, handled the three-tier architecture system very well.
 They all wanted to learn full scalability of the architecture (Model
4).
 MIS students mostly combined hand-coding and RAD functions
 MBA students learning E-commerce for the first time could handle
the two-tier architecture without a problem.
 But they need to use RAD methods with minimal coding (drag &
drop, wizards, application server handled by someone else)
 MBA students felt they could make technology-related decisions
better knowing the capabilities of web technologies to improve
business process.
 Multi-tier architecture was only feasible if taught across several
courses (logistics limitations; cannot be compressed into 1 or 2
semesters)

Yap, Elon University, N. Carolina

 CFGraph
 Create query Pie Chart
Of
 You can use
SUM to add Quantity Sold
 Use an alias –
e.g “as totalsum”
for the sum of a
variable
 Define the graph Horizontal bar
as shown Chart of
 Sum (Quantity x Sales Amount
Price)

Yap, Elon University, N. Carolina

Dynamic Charts based on the
Database (Sales Table)

Yap, Elon University, N. Carolina