DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

46
DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING WAMP A Thesis Presented to the Faculty of San Diego State University In Partial Fulfillment of the Requirements for the Degree Master of Science in Computer Science by Jie Zhang Fall 2010

Transcript of DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

Page 1: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING WAMP

A Thesis

Presented to the

Faculty of

San Diego State University

In Partial Fulfillment

of the Requirements for the Degree

Master of Science

in

Computer Science

by

Jie Zhang

Fall 2010

Page 2: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...
Page 3: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

iii

Copyright 2010

by

Jie Zhang

Page 4: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

iv

DEDICATION

Dedicated to my parents, my sister and me.

Page 5: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

v

ABSTRACT OF THE THESIS

Development of E-Commerce Web Application Using WAMPby

Jie ZhangMaster of Science in Computer Science

San Diego State University, 2010

Electronic Commerce, commonly known as e-commerce consistsof the buying andselling of products over Internet based on browser/server system. There are several relatedtechnologies to develop an E-Commerce system such as ASP.NET, J2EE, but thesetechnologies have their disadvantages and weakness, to solve their problems, and improve thesystem efficiency, WAMP (Windows+Apache+MySQL+PHP) architecture theory andtechnology is needed for this purpose. We will compare thesedifferent technologies of theirperformance by several different benchmarks-iteration operation, arithmetic operations, stringoperations, database operations and file operations to acquire the result of in which scenario isappropriate to use specific technology.

To get a understanding of how to develop an E-Commerce application by usingWAMP theory and technology, we will generate a simulation environment of an on-line storesystem based on the three-tier MVC model and go through the whole process of systemrequirements analysis, system architecture design, UI design and system testing.

Page 6: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

vi

TABLE OF CONTENTS

PAGE

ABSTRACT .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v

LIST OF TABLES.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii

LIST OF FIGURES .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix

ACKNOWLEDGEMENTS .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi

CHAPTER

1 INTRODUCTION .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.1 System Development Background . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . 1

1.1.1 E-Commerce Industry Description . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . 1

1.1.2 E-Commerce Category . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . 1

1.1.3 E-Commerce Related Technologies . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . 1

1.2 The Purpose of The Thesis . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.3 Thesis Overview. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2 COMPARISON OF SEVERAL DIFFERENT RELATED TECHNOLOGIES . . . . 3

2.1 ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2.2 J2EE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2.2.1 J2EE Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2.2.2 JSP Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2.2.3 JSPRuntime Environment . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . 4

2.3 WAMP Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.3.1 Apache Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.3.2 MySQL Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . 5

2.3.3 PHP Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.4 Comparison of the Above Technologies . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . 6

2.4.1 Performance Metrics . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.4.2 ASP.NET, JSP, PHP Performance Test . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . 7

2.4.3 Overall Summery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . 12

3 E-COMMERCE FRIENDLY USER INTERFACE AND EXPERI-ENCE AND RELATED TECHNOLOGIES . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . 15

Page 7: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

vii

3.1 How to Build Friendly User Interface and Experience . . . . .. . . . . . . . . . . . . . . . . . . 15

3.2 Html+Div+Css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

3.3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

3.4 Xml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

3.5 Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4 SYSTEM DESIGN AND MODELING .. . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . 17

4.1 System Data Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

4.2 System Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . 17

4.3 System Architecture. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4.4 System Modeling. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4.5 System Workflow Design and Function Module . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . 19

4.6 Database Design. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

4.6.1 Database Requirement Analysis . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . 20

4.6.2 Database Entity-Relation (ER) Diagrams . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . 21

4.6.3 Database Logic Structure Design . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . 21

5 System Detailed Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

5.1 System Front-end Detailed Design . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . 23

5.2 Back-end Management Side . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . 25

6 SYSTEM TEST AND EVALUATION .. . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . 29

6.1 Function Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

6.1.1 Add Products Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . 29

6.1.2 User Registration Test . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . 29

6.1.3 User Shopping Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . 29

6.1.4 Order Management Test . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . 30

6.2 Browsers Compatibility Test. . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . 30

7 CONCLUSION .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

BIBLIOGRAPHY .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Page 8: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

viii

LIST OF TABLES

PAGE

Table 4.1 Product Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Table 4.2 User Table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Table 4.3 Indent Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Page 9: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

ix

LIST OF FIGURES

PAGE

Figure 2.1 WAMP multitier architecture diagram. . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Figure 2.2 Apache server architecture diagram. . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Figure 2.3 MySQL database server architecture diagram. . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Figure 2.4 PHP architecture diagram. . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Figure 2.5 Arithmetic operation test. . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Figure 2.6 Arithmetic operation test result (unit: ms). . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Figure 2.7 String operation test. . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Figure 2.8 String concatenation test result (unit: ms). . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Figure 2.9 Database operation test. . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Figure 2.10 Database operations test result (unit: ms). . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Figure 2.11 File operation test. . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Figure 2.12 File operations test result (unit: ms). . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Figure 2.13 The code to get run time. . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Figure 2.14 Comparison conclusion of several technologies.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Figure 4.1 Data flow diagram. . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Figure 4.2 Front-end user model graph. . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Figure 4.3 Back-end server model graph. . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Figure 4.4 Online store use-case UML diagram. . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Figure 4.5 User order ER diagram. . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Figure 5.1 Front-end PHP files and other folders. . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Figure 5.2 Front-end theme folder UI files. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Figure 5.3 Back-end admin folder PHP fils and others. . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Figure 5.4 Back-end admin folder UI files. . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Figure 5.5 Online store system homepage (upper part). . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Figure 5.6 Online store system homepage (lower part). . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Figure 5.7 User operation module. . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Figure 5.8 Front-end navigation bar module. . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Figure 5.9 Searching engine module.. . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Page 10: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

x

Figure 5.10 Back-end admin login module. . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Figure 5.11 Back-end start up module. . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Figure 5.12 Back-end system operation module. . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Figure 5.13 Back-end navigation module. . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Figure 5.14 Main statistics information module.. . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Figure 5.15 Back-end search engin module. . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Figure 5.16 Products list module.. . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Figure 6.1 Add products test. . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Figure 6.2 User registration test. . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Figure 6.3 User shopping test. . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Figure 6.4 Order management test. . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Page 11: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

xi

ACKNOWLEDGEMENTS

I am indebted to a number of people who have contributed to thesuccessful

completion of my Master’s program. First, I would like to thank my supervisor, Professor

Marko Vuskovic, for his guidance and valuable suggestions.In particular, I highly appreciate

the great amount of time he spent for my program and his high availability to students. My

thanks also go to Professor Kris Stewart, and Professor Jianwei Chen for taking their time

serving as members of my thesis defense committee.

Finally, I would like to express my profound gratitude to my parents who are living in

China, for their love and incredible support.

Page 12: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

1

CHAPTER 1

INTRODUCTION

This chapter will give the introduction of E-commerce and its evolution.

1.1 SYSTEM DEVELOPMENT BACKGROUND

The following is the related concept of the system development background.

1.1.1 E-Commerce Industry DescriptionE-commerce usually refers to the trade in global business activities, the Internet

environment based on browser/server application mode, achieving consumer on-line shopping

[1], on-line transactions between merchants and on-line electronic payment and a variety of

business activities.

Over the past years e-commerce has grown fast. In order to keep successful, an

e-commerce website need to attract new customers and keep existing ones, as extended

customer relationships will lead to direct rising profits [2].

E-commerce website is one type of web applications, most websystems have to

provide transaction service, state maintenance, and reliable storage functions [3], so these

rules also apply to e-commerce applications. A transactionactivity is involved to plenty of

database operations and some third party interactions, such as shipping and payment service

[4].

1.1.2 E-Commerce CategoryMost E-commerce activities can be divided into one of the following categories:

Business-to-Business (B2B), Business-to-Customer (B2C) and Customer-to-Customer (C2C).

Electronic commerce that is conducted between businesses corporations is referred to

as business-to-business or B2B. Electronic commerce that is conducted between businesses

and consumers is referred to as business-to-consumer or B2C[5]. On-line shopping is usually

a form of B2C.

1.1.3 E-Commerce Related TechnologiesNormally there are three kind technologies which are used todesign and build many

different kind web applications -ASP.NET, J2EE and WAMP. Although they can also be used

to build e-commerce website, for their respective features, each of them is appropriate for

specific scenarios. It is important to know about their respective advantages, disadvantages

Page 13: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

2

and performance difference in several related metrics-iteration operation, arithmetic

operations, string operations, database operations and file operations.

1.2 THE PURPOSE OF THE THESIS

The purpose of this thesis is to:

• Compare and evaluate several different related technologies-ASP.NET, J2EE andWAMP.

• Generate a simulation environment that could be used for building a e-commercesystem.

• Accomplish the simulation by designing, developing and testing an on-line store systemusing WAMP.

1.3 THESIS OVERVIEW

This thesis is organized as follows. Chapter 1 describes the background of the

e-commerce, related technologies and the goal of the thesis. Chapter 2 introduces the detailed

related technologies which used to accomplish web application including e-commerce

application, such as: ASP.NET, JSP and PHP, and compare thembased on different aspects,

especially performance in several different benchmarks–iteration test, arithmetic operations,

string operations, database operations, and file operations, and give the summary of the

comparison. Chapter 3 describes the importance of user interface and experience for

e-commerce application, and the related technologies withit. Chapter 4 presents the process

of on-line store system design and modeling. Chapter 5 describes the detailed system user

interface design. Chapter 6 gives the system test and evaluation with several different test

metrics. Chapter 7 summarizes the conclusions and proposes future work.

Page 14: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

3

CHAPTER 2

COMPARISON OF SEVERAL DIFFERENT

RELATED TECHNOLOGIES

The architecture of an e-commerce web system normally consists of three layers: UI

layer, Business logic layer and Database layer [6].

The following is several related technologies; we will analyze and compare them in

performance in several different benchmarks-iteration operation, arithmetic operation, string

operation, database operation and file operation. With the comparison result, we will draw the

conclusion of which specific technology combination is appropriate for specific scenario.

2.1 ASP.NETASP.NET is a Microsoft technology that is embedded in Web pages executed by the

server side. It is the process-based server programming language running in IIS. Unlike the

previous ASP interpreter immediately, but will first run theserver program when compiled[7],

so the next time when it run will become faster. But when it is revised, it must be re-compiled;

the effect of implementation will be reduced.

2.2 J2EEThe following is the introduction of the J2EE technology.

2.2.1 J2EE DescriptionJava Platform Enterprise Edition or Java platform EE is a multi-tier architecture for

server programming in the Java based language. J2EE takes advantage of Java 2 platform

enterprise solutions to simplify development, deploymentand management of complex issues

related to architecture. It is based on a core Java platform or Java 2 Platform Standard

Edition[8, 9], J2EE not only consolidated the many advantages, such as “write once, run

anywhere” features, easy access to the database JDBC API, CORBAtechnology, and provides

EJB (Enterprise JavaBeans), Java Servlets API, JSP (Java Server Pages) and XML support.

2.2.2 JSP IntroductionJSP (Java Server Page) is a technology that software developers can use to build

dynamical websites. The JSP syntax has XML-like tags, called JSP tags. JSP technology uses

Java programming language to encapsulate and produce dynamic pages processing logic.

When web server accesses JSP page in the event of a request, first implements the logic code,

Page 15: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

4

then the results will be embedded in HTML code with the resultreturned to customer[10, 11].

The inserted Java code can operate database and build dynamic pages in order to achieve the

functionality required. JSP and Java Servlet, both are implemented in the server side, usually

returned to the client an HTML text, so long as the client browser will be able to browse.

2.2.3 JSPRuntime EnvironmentRunning JSP file needs a JSP supported web server. The commonlyused server is

JBoss and Tomcat. Tomcat is a servlet and JSP container developed by the Apache Software

Foundation (ASF)[12]. Tomcat compiles the Java Servlet andprovides a Java-based web

server environment for Java code to run.

2.3 WAMP I NTRODUCTION

The WAMP Platform is a multi-tier enterprise applications (see Figure 2.1), the web

server tier, PHP programming tier, database server tier andbusiness logic tier. Windows +

Apache + Mysql + Python, a group softwares often used to builddynamic Web site or

server[13], itself are separate programs, but because often used together with the increasing of

compatibility, constitute a powerful Web application platform.

Figure 2.1. WAMP multitier architecture diagram.

Page 16: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

5

2.3.1 Apache IntroductionApache Web Server is a very stable and robust web server for the Linux, Unix,

Windows and other related operating systems that existed today. Apache is a process-based

structure, the process consumes more system costs than the thread does, so it is not suitable

for multi-processor environment [14, 15], therefore, whenan Apache Web site needs to

expand, usually to increase or expand a server cluster rather than increase processors. The

layout below (see Figure 2.2) show’s the general setup flow tofollow, when setting up a Web

Server or HTTP server as follows:

Figure 2.2. Apache server architecture diagram.

2.3.2 MySQL IntroductionMySQL is a popular relational database management system. It can provide high

performance and stability. It is used by websites developers to build different types web

applications [16], it provides API for many languages such as: C, C++, Java and PHP etc. The

top layer of MySQL architecture is not unique for MySQL, all network-based C/S for web

applications should include the connection handling, authentication, security management.

The middle layer is the core of MySQL, including query parsing, analysis, optimization, and

caching. It also provides functions across storage engines, including stored procedures,

triggers and views and so on. The bottom layer is a storage engine, which is responsible for

Page 17: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

6

access to data. Web server through the storage engine API[17] can interact with a variety of

storage engines. The following is the MySQL architecture (see Figure 2.3).

Figure 2.3. MySQL database server architecturediagram.

2.3.3 PHP IntroductionPHP: Hypertext Preprocessor is a webpage programming language that was designed

to produce dynamic web pages. For this purpose, PHP code is embedded into the html source

file with PHP tags and interpreted by a web server[18]. PHP’s special syntax mixes C, Java,

Perl syntax. It can be faster than the CGI or Perl when implements dynamic webpages. The

following is PHP architecture (see Figure 2.4). The top layer is web serve which will process

PHP code, middle layer is PHP core which provides most important PHP api, such as

connection to database, under it is zend api and extensions,the bottom layer is zend engine

which used as php compiler and executor.

2.4 COMPARISON OF THE ABOVE

TECHNOLOGIES

In order to select appropriate programming platform from the above technologies, we

need to compare them in performance metrics. Here we will useseveral different performance

benchmarks to evaluate them.

2.4.1 Performance MetricsPerformance metrics including response time, reliability, and availability have been

used to measure the performance of web applications [19, 20]. Response time is a very

valuable performance criteria. These metrics can be used tomeasure the efficiency of a Web

Page 18: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

7

Figure 2.4. PHP architecture diagram.

application in processing requests or transactions. The performance of an e-commerce system

should also be measured in an economic way. Menasce et al [21]proposed a metric named

revenue throughput, which is measured in dollars/second. Although the metric is not widely

accepted, the economic performance of an e-commerce systemis considered important. A

good web system should have a high level of system performance in response time and in

reliability so as to provide customers with enjoyable shopping experience. Short response

time and high level reliability are the essential to friendly customer experience[22].

2.4.2 ASP.NET, JSP, PHP Performance TestWe will compare the several different technologies performance with sveral

benchmarks.

2.4.2.1 ITERATION SPEED TEST

(a) ASP.NET Test iteration cycle is 2000*2000, result is 54 seconds, and the following

is the code:

<%

response.write now

response.write "<br><br><br>"

for m = 0 to 2000

for n = 0 to 2000

next

next

response.write now

%>

Page 19: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

8

(b) JSP Test iteration cycle is 2000*2000, test result is 52 seconds, the following is the

code:

<jsp:useBean id = ’clockA’ scope = ’page’ class = ’dates.JspCalendar’/>

<jsp:getProperty name = "clock" property = "time" />

<%

int m = 0;

int n = 0;

for (m = 0; m < 2000; m++) {

for (n = 0; n < 2000; n++) {

}

}

%>

<jsp:useBean id = ’clockB’ scope = ’page’ class = ’dates.JspCalendar’/>

<jsp:getProperty name = "clockB" property = "time" />

(c) PHP Test iteration cycle is 2000*2000, test result is 57 seconds, the following is

the code:

<?

$Time = date("Y-m-d"). " " . date("H:i:s");

echo $Time;

echo "<br>";

for ($m = 0; $m < 2000; $m++) {

for ($n = 0; $n < 2000; $n++) {

}

}

$Time = date("Y-m-d"). " " . date("H:i:s");

echo $Time;

?>

Page 20: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

9

2.4.2.2 ARITHMETIC OPERATION

Arithmetic operations are important operations for web systems, as for most complex

computer arithmetic operations, such as multiply, divide etc are actually executed using

addition, so knowing the addition speed is useful.

Test Operation:

Iteration NNNN times, Integer Add Operation (see Figure 2.5)

Figure 2.5. Arithmetic operation test.

The test result table presents the comparison result based on different iteration scope

of arithmetic addition operation (see Figure 2.6)

Figure 2.6. Arithmetic operation test result (unit: ms).

Test result analysis:

Because PHP is interpreted and run, and its variable has no type, so everytime

compiler has to determine the type of arithmetic operations, this will cause it’s calculation

speed slower than JSP.

It is not appropriate to use PHP for complex numerical calculations, if you have to do

better to use a c user-defined PHP function, use C language to achieve and call it with PHP.

2.4.2.3 STRING OPERATION

String operations are very frequently used in web applications[23]. Different

programming language have different sting operations api and performance.

Test Operation: String Concatenation (see Figure 2.7)

The test result table presents the comparison result based on different iteration scope

of string concatenation operation (see Figure 2.8)

Page 21: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

10

Figure 2.7. String operation test.

Figure 2.8. String concatenation test result (unit: ms).

Test result analysis:

Because Java is strong type language, everything in Java is object, so string

manipulation is also object operation, it is obvious that for string operation, PHP is much

better than JSP (Because for string operation, most of them iscategorized in string

concatenation, so here we just compare concatenation operation).

PHP’s string manipulationmost of them is directly call C’s string function (PHP is

written by C language), so it has a better efficiency.

In web application, it is very frequently using string operation (including generate

SQL string at most time), so for this important aspect, PHP isbetter than JSP.

2.4.2.4 DATABASE OPERATIONS

For nowadays web 2.0 web applications, most websites have touse database, so

compare different languages’ database performance is veryuseful.

Test Operation:

Iteration NNNN times for database open, query and close operation. Compare JSP

connect/disconnect database with PHP connect/disconnectdatabase (see Figure 2.9).

The test result table presents the comparison result based on different iteration scope

of database connection and disconnection operation (see Figure 2.10)

Test result analysis:

For normal connection, Java’s connection to MySQL is slowerthan PHP’s for about

one fold, but if using Java database connection pool, performance is enhanced very obviously.

If move database connection and database disconnection outof iteration, JSP and PHP

run time are almost the same, iterate 60 times will cost about19 ms, because in database

operations, connection and disconnection operation is very resource costly, and JSP’s

database connection and disconnection is more costly than PHP’s.

Page 22: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

11

Figure 2.9. Database operation test.

2.4.2.5 FILE OPERATIONS

In web applications, file operation is used frequently, suchas: file upload/download

and other operations.

Test Operation

Test several kind of file operation. First check if file exists, if yes then delete it, and

create a new file, write some content in it. Iterate this operation N times (see Figure 2.11).

The test result table presents the comparison result based on different iteration scope

of file operations (see Figure 2.12)

Figure 2.10. Database operations test result (unit: ms).

Page 23: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

12

Figure 2.11. File operation test.

Figure 2.12. File operations test result (unit: ms).

Test result analysis:

This result shows that JSP is better than PHP for file operation.

2.4.2.6 THE CODE TO GET RUN T IME

The following is the code to get run time (see Figure 2.13):

2.4.3 Overall SummeryFrom above test results, it is indicated that when using JSP or PHP in web

applicationthe performance difference between them is notvery obvious, we can only say

Page 24: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

13

Figure 2.13. The code to get run time.

they are expert in some aspects respectively. JSP is not goodas PHP in database operation and

string manipulationsbut is better than PHP in file operationand arithmetic operatio

From the above analysis we can get the following conclusion:

Windows + Apache + PHP + MySQL (WAMP)

This combination is good value for economic cost, and has thefastest response time of

the database, also is quite stable. WAMP drawback is the weaknumerical calculation ability,

so it is unsuitable for enterprise level computing, but it isa better choice for situation of plenty

of reading and writing database operations, and not many arithmetic calculation processing

applications, such as medium and small sized e-commerce websites, forums, etc.

Windows + IIS + ASP.NET + SQL Server

Page 25: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

14

This combination’s development costs should be low, because it has the most powerful

desktop integration environment to support many functions, especially for small and medium

sized enterprise office automation network, enterprise portal sites.

LinuxUnix+ Apache + Tomcat + JSP + Oracle 11g

This combination is designed for medium to large enterpriseinformation systems,

although Oracle requires higher hardware configuration, but is suitable for mass data storage.

Large enterprises often multiple databases, use J2EE to integrate them is appropriate, and it is

easily to scale up through the server clusters, in a timely manner to meet business clients

growing quickly. This combination’s vulnerability is relatively high development costs, in

particular, involves some of J2EE’s advanced features but not too mature.

From the above comparison results and analysis, we can draw the comparison

conclusion (See Figure 2.14) of these technology combination on some different features

Figure 2.14. Comparison conclusion of several technologies.

Page 26: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

15

CHAPTER 3

E-COMMERCE FRIENDLY USER INTERFACE

AND EXPERIENCE AND RELATED

TECHNOLOGIES

Improving the user experience, is very important to e-commerce website, user

experience includes from the impression of the website, thewebsite features, website

usability, to website content, a combination of factors to improve the website environment

[24]. It can be said that the performance of the user experience will be directly related to the

value of e-commerce website.

3.1 HOW TO BUILD FRIENDLY USER I NTERFACE

AND EXPERIENCE

1. Nice page design, arranged in orderly columns Website’s overall page design is

simple and beautiful, the purchasing process is clear and easy to use, so it is easy to attract

new users, but also can increase the viscosity of the old users.

2. Shopping process is easy and convenient Internet users inthe process of online

shopping go into a shopping website, from registration of new users through purchase orders

and payment, the process should be as simple as possible, so that users feel it is convenient to

operate, if the site is very complex, users may give up shopping.

3. Web site effective help center There may be new users who are not too familiar with

online shopping process, so the website needs to provide helpful tips.

3.2 HTML +DIV +CSS

DIV is an element of html, div + css is a page layout approach, this page layout is

different from the traditional table layout approach, and achieves the w3c separation of

content and presentation.

DIV element is used within the document for the bulk of the content structure and

background elements. DIV start and end tags are used for everything between the block[25],

in which the characteristics of the elements contained in the DIV tag attribute to control, or

through the use of style sheets to format the block to be controlled.

Relative to the conventional table, using DIV + CSS technologyweb, the website will

be friendlier to search engine. It also separate website content and style, so that the

adjustment of the page and style has become more convenient.

Page 27: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

16

3.3 JAVA SCRIPT

JavaScript is an object oriented web page programming language used by web

application programmer.

Based on the html, using Javascript can develop dynamic interactive Web pages[26].

The emergence of Javascript enables web pages and users to achieve a real-time, dynamic,

interactive relationship, so that pages contain more active elements and more exciting content.

3.4 XML

The difference between XML and HTML is: XML is used to store data, focusing on

the data itself. HTML is used to define the data, focusing on the data display mode[27].

XML’s simplicity make it easy to read and write in any application data, this makes

XML becomes the unique data exchange language, although different applications also

support other data exchange format.

3.5 AJAX

Traditional web applications allow users to fill out the form, as when the form is

submitted to the web server sends a request. Server receivesand processes the coming form,

and then returns a new page. This approach will waste a lot of bandwidth, because the major

content of the two pages in HTML code are the same. Since each application needs to interact

with the request to the server, application response time depends on the server[28, 29]. This

has resulted in response time to the user interface is much slower than the local application.

AJAX applications will only send to the server and required data, using SOAP or other

web service interfaces based on XML, and JavaScript on the client side deals with the

response from the server[30]. Because the server and browserexchange significant reduced

data, so web server also reduces the processing time.

The greatest advantage of using Ajax is to update the entire page without the premise

of maintaining data. This makes web applications more rapidresponded to user actions.

Page 28: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

17

CHAPTER 4

SYSTEM DESIGN AND MODELING

This on-line store system provides convenient environmentfor users to search and buy

many different kinds of products. The system is divided intofront-end side (user side) and

back-end side (Administrator side). There are registration, browse products, search products,

order products modules etc in the user side; there are user management, order management,

products management modules etc in the administrator side for admin to manage, update and

maintenance system.

4.1 SYSTEM DATA FLOW

The following is the data flow diagram (see Figure 4.1):

Figure 4.1. Data flow diagram.

4.2 SYSTEM COMPONENTS

1. Front-end Side has the following modules:

User Registration User Login / Logout User Center (my information, my order, my

favorite, my comments) Search Engine (use category or key word to search, advanced search)

Shopping Cart Order Query Shop Notice and Articles Friendly Reminders Email Subscribe

Front-end Counter All Products Exhibition (Recommended Products, Hot Products, New

Products, and Promotion Products) Categorized Products Exhibition Check Products Detail

Information View History Buy and Check out Add Products to Favorite Write Comments to

Products

Page 29: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

18

2. Administration Management Side has the following modules:

Products Category Management: add, delete, update, query Products Management:

add, delete, update, query Member Management: add, delete,update, query Order

Management: add, delete, update, query order, and check order manifest, product delivery

status. Article Category Management: add, delete, update, query Article Management: add,

delete, update, query Reports Statistics: sales details

The following are the front-end user side model and back-endserver side model (see

Figure 4.2 and Figure 4.3).

Figure 4.2. Front-end user model graph.

Figure 4.3. Back-end server model graph.

Page 30: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

19

4.3 SYSTEM ARCHITECTURE

This system is a three-tier architecture, UI layer send request to business layer through

unified interface, business layer performs database operation after handle the request based on

its logic rule, then encapsulate the data which are returnedfrom the database into class format

and present for UI layer [31, 32]. This makes UI layer unknownthe database structure, the UI

layer only need to maintenance the interface to the businesslayer.

4.4 SYSTEM M ODELING

UML (Unified Modeling Language) is used for software systemsas a visual modeling

language. UML is used for object-oriented development system description, visualization,

and documentation[33].

This method uses object model, dynamic model, functional model and use case model

together to complete the system modeling, the definition of concepts and symbols can be used

for software development, analysis, design and implementation of the whole process[34, 35].

UML has the following mostly used three types:

The first is use case diagram, which can describe system functions from a user point of

view, and point out the operator of the function.

The second type is a static diagram, including class diagrams, object diagrams and

package diagrams. Class diagram can describe the system static structure of classes and static

relationship for the system’s entire life cycle.

The third type is the behavior diagram, which can describe the system dynamic model

and the composition of the interactions between objects. One type is object state diagram

which shows all possible states and state transfer of the incident conditions.

The following is use-case diagram, it describes system functions from a shopping

user’s point of view, and points out the operator of the function (see Figure 4.4).

4.5 SYSTEM WORKFLOW DESIGN AND FUNCTION

M ODULE

When you come into this system, you can browse products and search the products

you want (search includes category and key word ways). For this system, only registered user

can buy products on-line, so when you select a products and want to put it into shopping cart,

you must login the website first. If you have user name and password, you can directly login;

if not, you need to register first, then login. When you successfully login, you can check and

manage your shopping cart, update order item number, check and manage your personal

registration info. You can submit your shopping cart to billwhen you make sure you will buy

the products, and after submit you can still buy products, the back-end server received the user

submitted order and handle the request order. This is the whole process of shopping

Page 31: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

20

Figure 4.4. Online store use-case UML diagram.

productss. After user submit the order, if he/she immediately pay the cost, after the payment

process, the admin need to manually update the order status to paid status in the server side.

The administrator in the server side is required to login andbe validated to go into

admin UI, at this time, the system searches if there is user record which is inputted by user

from Products Admin user database table, and validate whether it is correct, if it is not correct,

the system will give an alert to go back and re-login, if it is correct, then go into consequent

workflow process. Now the admin can perform management operation, such as user

management operation (browse user info, add user, delete user, update user info), products

management operation (browse products list, browse products detail info, add products, delete

products, update products), order management operation (browse order, confirm order, update

order status, delete order). Admin can logout system after management operation.

4.6 DATABASE DESIGN

Database is very important in an information management system, designing a good

database architecture will directly affect the efficiency of the application system[36].

Reasonable database structure can improve the efficiency of data storing, to ensure the data

integrity and consistence.

4.6.1 Database Requirement AnalysisTarget to normal store requirement, we can get the followinginfo: ” User is

categorized as unregistered and registered. ” Order is categorized as single detailed order and

Page 32: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

21

total order ” One user can buy products (1:M) ” One user relates to many orders (1:M) ” One

list relates to many orders (1:M) Based on the system functionanalysis, we can summarize

and get the following info: ” User, includes fields: user ID, user name, password, email,

phone, address, etc ” Products, includes fields: products ID, products category, products

name, price(store price, market price, promotion price), products quantity, products

introduction, etc ” Order List, includes fields: order ID, products ID, number of ordered

products, etc ” Order, includes fields: order ID, user ID, order time, etc

4.6.2 Database Entity-Relation (ER) DiagramsThe following are order module ER Diagrams (see Figure 4.5) from this system: The

entities extracted from the system are: user entity, products entity, order entity, order list

entity. User Order ER diagram:

Figure 4.5. User order ER diagram.

4.6.3 Database Logic Structure DesignOn-line store system tables are designed as the following:

Table 4.1 is product table.

Table 4.2 is user table.

Table 4.3 is order table.

Page 33: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

22

Table 4.1. Product Table

Field Name Data Type Length Not Null DescriptionID Int 10 No auto increprimary key

Productsname Varchar 40 No products nameProductsclass Int 10 No products category

Author Varchar 25 Yes products authorPublish Varchar 150 yes publish agency

productsNo Varchar 30 yes products numberContent Varchar 4000 yes content summaryPrice float yes 65price

Amount int 10 Yes total amountLeav number int 10 Yes in-store amount

reg time Datetime No In-store time

Table 4.2. User Table

Field Name Data Type Length Not Null DescriptionID Int 10 No auto incrememberID

Username Varchar 20 No user namePassword Varchar 50 No PasswordNames Varchar 20 Yes member level

Sex varchar 2 Yes GenderAddress varchar 150 Yes AddressPhone varchar 25 Yes TelephonePost varchar 8 Yes post number

Email varchar 50 Yes EmailRetime datetime 8 Yes registration time

RegIpAddr varchar 20 Yes registration ip

Table 4.3. Indent Table

Field Name Data Type Length Not Null DescriptionID int 10 No auto incre

IndentNo varchar 20 No order numberuserid int 10 No memberID

Submittime datetime 8 No submit order timeconsignmentTime datetime 8 Yes delivery time

Totalprice float 8 Yes total priceContent varchar 4000 Yes content

ipAddress varchar 20 Yes user ipisPayoff int 10 Yes is pay offisSales int 10 Yes Is delivered

Page 34: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

23

CHAPTER 5

System Detailed Design

The system program files consist of front-end and back-end files. Front-end files and

back-end files both consist of UI files and logic files.

Front-end logic files (see Figure 5.1) are the php files with .php extension. Each php

file is used for specific module.

Figure 5.1. Front-end PHP files and other folders.

The front-end UI files (see Figure 5.2) are located in the folder of theme and each of

them is used for specific module’s layout.

Figure 5.2. Front-end theme folder UI files.

Back-end logic files (see Figure 5.3) are located in the folderof admin and with the

file extension .php.

Back-end admin UI files (see Figure 5.4) are the files with file extension of .htm.

5.1 SYSTEM FRONT-END DETAILED DESIGN

Homepage is always very important, it will give users first impression when then get

into the website, so make it integrated and appealing will attract user to come back again.

Homepage is divided into several parts according positions(see Figure 5.5, Figure

5.6): top, left, middle, right and foot side. According to these different areas there are many

Page 35: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

24

Figure 5.3. Back-end admin folder PHP fils and others.

Figure 5.4. Back-end admin folder UI files.

function modules: user center, navigation bar, search engine, category tree, products

exhibition, promotion products and store info.

This homepage UI consists of three part: top.html, index.html and footer.html. For

most of front-end pages, we can reuse the top.html and footer.html files.

Figure 5.5. Online store system homepage (upper part).

User operation module (see Figure 5.7) is designed for usersto registration and sign

in, after user sign in, he can click view cart to check the goods he selected. As this is a very

important module, users should very easily to find it, so it isdesigned on the right top of each

webpage.

Page 36: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

25

Figure 5.6. Online store system homepage (lower part).

Figure 5.7. User operation module.

Front-end navigation bar module (see Figure 5.8) is the panel which contains most

important buttons. Users can click specific category to check related products. Admin can

create a category and put it on the navigation bar.

Figure 5.8. Front-end navigation bar module.

Searching engine module (see Figure 5.9) is designed for users to search products by

different criteria and/or key words, he can also click advanced button to search by advanced

options.

5.2 BACK -END M ANAGEMENT SIDE

Back-end admin login module (see Figure 5.10) is the first webpage of the back-end

management side. Admin can click “Return to Home” to go to front-end homepage.

Page 37: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

26

Figure 5.9. Searching engine module.

Figure 5.10. Back-end admin login module.

Back-end start up module (see Figure 5.11) is the first webpageafter admin logged in.

This start up page presents the most useful categorized information for admin to manage the

back-end system.

It is designed by integrating several different parts. The top of it is system operation

module, which provides some useful function, eg. Shop guide, refresh, profile, calculator,

clear cache and quit button. Under the top module is system navigation bar, which contains

several important quick launch buttons in the color orange.The content page is under

navigation bar, and is divided by two parts: the left menu tree and the right specific content

page. When admin click specific item on the left menu tree, the according content page of that

item will present on the right side.

Back-end system operation module (see Figure 5.12) is in color purple. This module

provides admin several useful functions. Shop guide provide some basic information of store

system. Refresh is used when sometimes if no response of some functions. Calculator is a

system tool which will pop up a calculator when click button,it is useful when admin wants to

calculate some price and sales. Clear cache will clear the memory cache to activate some

updated state. Quit button is click to log out and go back to back-end log in webpage.

Page 38: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

27

Figure 5.11. Back-end start up module.

Figure 5.12. Back-end system operation module.

Back-end navigation module (see Figure 5.13) located under system operation

module. This module provides admin several important buttons which he can use to quickly

check the related info.

Figure 5.13. Back-end navigation module.

Main statistics information module (see Figure 5.14) is thestart up page right middle

side. This module shows admin all the important categorizedstatistics information and he can

also click to check the detailed information.

Back-end search engine module (see Figure 5.15) is located ontop of most specific

item page. It can search by category, subcategory and keywords etc.

Products list module (see Figure 5.16) is an item of product category. This module

shows all the products detailed information and enables admin to manage them using different

buttons.

Page 39: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

28

Figure 5.14. Main statistics information module.

Figure 5.15. Back-end search engin module.

Figure 5.16. Products list module.

Page 40: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

29

CHAPTER 6

SYSTEM TEST AND EVALUATION

Software testing provides manual or automated means used torun or test a system,

process, aimed at testing whether it satisfies specified requirements or expected results [37].

To provide high quality, software system should place emphasis on reliability and integrity

[38].

Capability Maturity Model (CMM) [39], points out that the improvement of software

quality pertains to defect prevention, technology management. The Capability Maturity

Model Integration (CMMI)[40, 41] emphasize that software improvement can be facilitated

by effective test analysis and bug fix.

Peeger [42] asserts that there are several types of evaluation techniques, such as

feature analysis, case study, and formal test. Brown and Wallnau [43] proposed that software

evaluations efficiency is depend on the evaluation staff’s skills and experience.

6.1 FUNCTION TEST

The following is several different detailed function tests:

6.1.1 Add Products TestThe following is adding products test details (see Figure 6.1).

Figure 6.1. Add products test.

6.1.2 User Registration TestThe following is user registration test details (see Figure6.2).

Page 41: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

30

Figure 6.2. User registration test.

6.1.3 User Shopping TestThe following is user shopping test details (see Figure 6.3).

6.1.4 Order Management TestThe following is order management test details (see Figure 6.4).

6.2 BROWSERS COMPATIBILITY TEST

Tested in IE7,8 Firefox 3.5-3.6 Maxthon 3.0 Opera 2.0 All thefunctions run correctly

in these browsers.

Page 42: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

31

Figure 6.3. User shopping test.

Figure 6.4. Order management test.

Page 43: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

32

CHAPTER 7

CONCLUSION

This thesis researched the e-commerce web application related issues. We compared

several related technologies-ASP.NET, J2EE and WAMP of their advantages and

disadvantages and performance based on several different benchmarks-iteration test,

arithmetic operations, string operations, database operations, and file operations. Through the

process of comparison, we get the comparison result of thesetechnologies on some different

features, and we recommend to use WAMP for medium or small sized e-commerce

corporation or group to build their website.

We also designed and developed an on-line store system to be familiar with the

procedures of developing an e-commerce web system through the whole process of system

modeling design, system architecture design, UI design andsystem testing.

Page 44: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

33

BIBLIOGRAPHY

[1] Marshall Brain. How e-commerce works.http://communication.howstuffworks.com/ecommerce.htm, 2000. accessed Apr. 2009.

[2] M. Arlitt, D. Krishnamurthy, and J. Rolia. Characterizingthe scalability of a largeweb-based shopping system.ACM Transactions on Internet Technology, 28:50–56,2001.

[3] G. Gama, W. Meira Jr., M. Carvalho, D. Guedes, and V. Almeida. Resource placementin distributed e-commerce servers.The Evolving Global Communications Network,3:6–8, 2001.

[4] U. Vallamsetty, K. Kant, and P. Mohapatra. Characterization of e-commerce traffic.Fourth IEEE International Workshop on Advanced Issues of Ecommerce and Web-BasedInformation Systems, 3:167–192, 2003.

[5] DigitSmith Embroidery and Screen Printing. Ecommerce definition and types ofecommerce. http://www.digitsmith.com/ecommerce-definition.html, 2003. accessedMay. 2009.

[6] D. Menasce and V. Almeida.Scaling for E-Business. Prentice Hall, Upper Saddle River,New Jersey, 2001.

[7] W3Schools. Asp.net tutorial. http://www.w3schools.com/aspnet/default.asp, 2002.accessed Aug. 2009.

[8] Oracle. Java ee at a glance. http://java.sun.com/javaee, 2001. accessed Aug. 2009.

[9] Sue Spielman. J2ee design patterns.http://onjava.com/pub/a/onjava/2002/01/16/patterns.html, 2002. accessed Aug. 2009.

[10] Scott McPherson. Java server pages: A developer’s perspective.http://java.sun.com/developer/technicalArticles/Programming/jsp, 2000. accessed Feb.2010.

[11] MassLight. Servlets and java server pages. http://j2ee.masslight.com/Chapter1.html,2001. accessed Aug. 2009.

[12] Apache Software Foundation. Apache tomcat. http://tomcat.apache.org/, 2001. accessedAug. 2009.

[13] Wampserver. Wamp introduction. http://www.wampserver.com/en/presentation.php,2004. accessed Apr. 2009.

[14] A. Mockus, R. T. Fielding, and J. Herbsleb. A case study ofopen source softwaredevelopment: The apache server. InProceedings of the 2000 International Conferenceon Software Engineering, Limerick, Ireland, June 2000.

[15] Apache Software Foundation. The apache web server. http://www.apache.org, 2001.accessed Jul. 2009.

Page 45: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

34

[16] Biray Jr Turan. A web-based database application as an analysis tool for energy use andcarbon dioxide emission. Master’s thesis, Halmstad University, 2009.

[17] The PHP Group. Mysql api. http://php.net/manual/en/book.mysql.php, 2004. accessedJan. 2010.

[18] Zend Technologies Ltd. Zend online documentation.http://www.zend.com/en/resources/zend-documentation/, 2006. accessed Jul. 2009.

[19] R. Jain.The Art of Computer Systems Performance Analysis. John Wiley Sons, Inc,Hoboken, New Jersey, 1992.

[20] Qing Wang. Workload characterization and customer interaction at e-commerce webservers. Master’s thesis, University of Saskatchewan, 2004.

[21] D. Menasce, V. Almeida, R. Fonseca, and M. Mendes. Business-oriented resourcemanagement policies for e-commerce servers.Performance Evaluation, 42:224–238,May 2000.

[22] Website Optimization LLC. Response time: Eight seconds,plus or minus two.http://www.websiteoptimization.com/speed/1/, 2001. accessed Jan. 2010.

[23] Hal Abelson. Basic string operations. http://philip.greenspun.com/tcl/strings.adp, 1999.accessed Jan. 2010.

[24] Thomas Hilburn and Massood Towhidnejad. Software quality across the curriculum. InProceedings of the 15th Conference on Software Engineering Education and Training,February 2002.

[25] W3Schools. Html div tag. http://www.w3schools.com/tags/tagdiv.asp, 2002. accessedJan. 2010.

[26] W3Schools. Javascript tutorial. http://www.w3schools.com/js/default.asp, 2001.accessed Jan. 2010.

[27] W3Schools. Xml schema. http://www.w3.org/XML/Schema, 2001. accessed Oct. 2009.

[28] Ajaxmatters. Getting started with ajax.http://www.ajaxmatters.com/2006/05/getting-started-with-ajax-using-java-tutorial/,2006. accessed Sept. 2009.

[29] Greg Murray. Asynchronous javascript technology and xml (ajax) with the java platform.http://java.sun.com/developer/technicalArticles/J2EE/AJAX, 2005. accessed Jan. 2010.

[30] Wikipedia. Ajax programming. http://en.wikipedia.org/wiki/Ajax, 2004. accessed Oct.2009.

[31] Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides.Design Patterns.Addison-Wesley, Boston, Massachusetts, July 2001.

[32] Kees van der Sluijs and Geert-Jan Houben. A generic component for exchanging usermodels between web-based systems. InInt. J. Cont. Engineering Education andLifelong Learning, 2006.

[33] OMG. Introduction to omg’s unified modeling language.

Page 46: DEVELOPMENT OF E-COMMERCE WEB APPLICATION USING ...

35

http://www.omg.org/gettingstarted/whatis uml.htm, 2006. accessed Oct. 2009.

[34] Randy Miller. Practical uml: A hands-on introduction for developers.http://edn.embarcadero.com/article/31863, 2003. accessed Jun. 2009.

[35] Atlas. What is uml.http://atlas.kennesaw.edu/ dbraun/csis4650/AD/UMLtutorial/whatis uml.htm, 2007.accessed Jun. 2009.

[36] Quackit. Database tutorial. http://www.quackit.com/database/tutorial/, 2004. accessedFeb. 2010.

[37] Mary Jean Harrold. Testing: A roadmap. InInternational Conference on SoftwareEngineering, Limerick, Ireland, June 2000.

[38] Jiantao Pan. Software testing, dependable embedded systems. Master’s thesis, CarnegieMellon University, 1999.

[39] M. Paulk, C. Weber, and M. Chrissis.The Capability Maturity Model. Addison Wesley,Boston, Massachusetts, 1995.

[40] CMMI. Cmmi(sm) for software engineering.http://www.sei.cmu.edu/publications/documents/, 2007. accessed Mar. 2010.

[41] Daniel Rowley. Model-based software testing technology change management. Master’sthesis, Monash University, 2002.

[42] Peeger.S.Software Engineering Theory and Practice. Prentice Hall, Upper SaddleRiver, New Jersey, 2001.

[43] A. Brown and K Wallnau. A framework for evaluating software technology.IEEESoftware, 13:41–48, 1996.