KEMI -TORNIO UNIVERSITY OF APPLIED SCIENCES [631366]

KEMI -TORNIO UNIVERSITY OF APPLIED SCIENCES
TECHNOLOGY

Shen Yeyin

Design and Implementation of a Web Shop System

The Bachelor’s Thesis in the Degree Programme of Information Technology
Kemi 2010

I
SHEN YEYIN BACHELOR’S THESIS
PREFACE

First o f all, I am particularly grateful to my supervisor, Aalto Teppo for instructions
contributed to the writing of the thesis and the technical solution. Without his help, this
thesis could not have reached its present form.

Secondly, I would like to thank al l the teachers for their four years’ constructive instruction
and innovative ideas giving.

Last but not the least what I want to thank all my friends and my families for their
continuous support during my studies here.

II
SHEN YEYIN BACHELOR’S THESIS
ABSTRAC T

Kemi -Tornio University of Applied Sciences, Technology
Degree Programme Software Engineering
Name Shen Yeyin
Title Title Design and Implementation of a Web Shop System
Type of Study Bachelor’s Thesis
Date 6 November 2010
Pages 39+ 14 appendic es
Instructor Aalto Teppo
Company None
ContactPerson/Supervisor
from Company None

The purpose of this thesis is to design and implement a small web shop for o nline business.
It is designed for consumer who can be shopping at home by a computer, and the seller is
able to sell their products and services without the huge amount of maintenance cost for
the management and marketing in the real storefront.

The task is simply to establish a Web s hop system by analyzing, web user interface
designing, database constructing and connecting, testing and implementing. It uses ASP
(Active Server Pages), HTML (Hyper Text Markup Language), VBScript, J avaScript for
implementin g and bases on Microsoft Access for handing the database. The system is
divided into front -stage and back -stage management page. Front -stage management is
friendly interface for users to browse, inquire. It includ es: browse products, check products,
order items, view shopping cart, user maintenance and other functions. Back -stage
management is available to administrators, it includ es: product management, user
management, order management and so on. The administrators from the tedious manual
operation freed and increase office efficiency. Additionally, the whole research and
developing work are based on course materials.

In conclusion, I compared some existing systems (such as ebay). After that, I analyzed and
modified my system by following and resolving so me real problems and needs from some
online shops. During the whole work, I really learned how to work with a project and how
to analyze system, gather requirements and solve the problems while you are meeting
them.

Keywords: ASP, HTML, Access Database, D esign, Implementation.

III
SHEN YEYIN BACHELOR’S THESIS
TABLE OF CONTENTS

PREFACE ………………………….. ………………………….. ………………………….. ………………………… I
ABSTRACT ………………………….. ………………………….. ………………………….. …………………….. II
TABLE OF CONTENTS ………………………….. ………………………….. ………………………….. ….. III
ABBREVIATIONS ………………………….. ………………………….. ………………………….. ………….. V
1 INTRODUCTION ………………………….. ………………………….. ………………………….. ………. 1
2 INTEGRATED D EVELOPMENT ENVIRONMENTS ………………………….. ……………. 2
2.1 Web server software ………………………….. ………………………….. …………………….. 2
2.1.1 IIS ………………………….. ………………………….. ………………………….. …………………. 2
2.1.2 Apache http server ………………………….. ………………………….. ………………………. 2
2.1.3 Hiawatha ………………………….. ………………………….. ………………………….. ……….. 2
2.1.4 Comparison of web server software ………………………….. ………………………….. .. 3
2.2 Relational database management systems ………………………….. …………………… 4
2.2.1 Microsoft Access ………………………….. ………………………….. ………………………… 4
2.2.2 MySQL ………………………….. ………………………….. ………………………….. …………. 5
2.2.3 PostgreSQL ………………………….. ………………………….. ………………………….. ……. 5
2.2.4 Oracle ………………………….. ………………………….. ………………………….. ……………. 6
2.2.5 Comparison of relational database management s ystems ………………………….. . 6
2.3 Programming languages ………………………….. ………………………….. ……………….. 8
2.3.1 PHP ………………………….. ………………………….. ………………………….. ………………. 9
2.3.2 Ruby ………………………….. ………………………….. ………………………….. ……………… 9
2.3.3 Python ………………………….. ………………………….. ………………………….. …………. 10
2.4 Web application frameworks ………………………….. ………………………….. ………. 11
2.4.1 Django ………………………….. ………………………….. ………………………….. …………. 11
2.4.2 ASP.net MVC ………………………….. ………………………….. ………………………….. . 11
2.4.3 Ruby on Rails ………………………….. ………………………….. ………………………….. .. 11
2.4.4 Comparison of web application frameworks ………………………….. ……………… 11
3 REQUIREMENTS ………………………….. ………………………….. ………………………….. ……. 13

IV
SHEN YEYIN BACHELOR’S THESIS
3.1 Functional requirements ………………………….. ………………………….. ……………… 13
3.1.1 Stakeholders ………………………….. ………………………….. ………………………….. …. 13
3.2 Non-functional requirements ………………………….. ………………………….. ………. 13
3.2.1 Security ………………………….. ………………………….. ………………………….. ……….. 13
3.2.2 Usability ………………………….. ………………………….. ………………………….. ………. 15
3.2.3 Backup ………………………….. ………………………….. ………………………….. ………… 16
3.2.4 Extensibility ………………………….. ………………………….. ………………………….. …. 16
3.3 Structure of database ………………………….. ………………………….. ………………….. 17
4 USER INTERFACE DESIGN ………………………….. ………………………….. ………………… 20
4.1 Interface window ………………………….. ………………………….. ……………………….. 20
4.1.1 Primary window ………………………….. ………………………….. ………………………… 20
4.1.2 Secondary window ………………………….. ………………………….. …………………….. 21
5 IMPLEMENTATION ………………………….. ………………………….. ………………………….. … 24
5.1 Integrated development environment implementation ………………………….. … 24
5.2 Create the database tables ………………………….. ………………………….. …………… 24
5.3 Database connection ………………………….. ………………………….. ………………….. 25
5.4 Interface implementation ………………………….. ………………………….. ……………. 26
5.4.1 User Module ………………………….. ………………………….. ………………………….. …. 26
5.4.2 Administrator Module ………………………….. ………………………….. ………………… 32
6 CONCLUSION ………………………….. ………………………….. ………………………….. ………… 36
7 REFERENCES ………………………….. ………………………….. ………………………….. …………. 37
8 LIST OF APPENDICES ………………………….. ………………………….. ………………………… 39

V
SHEN YEYIN BACHELOR’S THESIS
ABBREVIATIONS

ASP Active Server Page
HTML Hypertext Markup Language
SQL Structured Query Language
URL Uniform Resource Locator
IIS Internet Information Server
AJAX Asynchronous JavaScript and XML
XSS Cross -site Scripting
CSRF Cross Site Request Forgery
OLE Object Linking and Embedding
TDD Test Driven Development
DDE Dynamic Data Exchange
ORM Object -relational Mapping
ACL Access Control List
AJP Apache JServ Pr otocol
ODBC Open Data Base Connectivity
OOAD Object -Oriented Analysis and Design
GUI Graphical User Interface
CGI Common Gateway Interface
MVC Model -View -Controller
API Application Programming Interface
RAID Redundant Array of Independent Disk
HSM Hierarchical Storage Management
B2C Business to Consumer
BSD Berkeley Software Distribution
MIT Massachusetts Institute of Technology

1
SHEN YEYIN BACHELOR’S THESIS
1 INTRODUCTION

Nowadays, online shopping is very popular. It is a shop that sets up on the Internet, a place
that can offer the consumer to shopping at home by a computer, and the seller to selling
their products and services without the huge maintenance cost for the management and
marketing in the real storefront. Virtual stores exist in the Internet, whi ch is the
well-known global information network. You can easily enter the virtual store by typing
the URL in the web browser.

With the rapid development of Internet, online shopping is changing the way of the
traditional consumption patterns. However, how to do business on the internet? The answer
is; we need a platform for selling and buying products online.

The purpose of this thesis is planning to build an online shop which is easier to use, more
convenient to order product for the consumer, and bette r to manage the product
information for the administrator. It concentrates on system’s requirements gathering, user
interface design and system implementation .

Firstly, I will introduce and compare some different technologies to build the integrated
deve lopment environment for a Web shop system . Secondly, I will describe the privileges
in term of requirements which define functional and non -functional. In the next chapter , I
will show the two main aspect s of interface windows in user interface design phase. In the
last chapter, I will describe how to implement a Web shop system and what technologies I
have chosen to implement for a Web shop system . In this phase, it means that the database
will be connected online and all of the functionality will be final ly tested and realized.

2
SHEN YEYIN BACHELOR’S THESIS
2 INTEGRATED DEVELOPMENT ENVIRONMENT S

Before the system implementation process for the establishment of an online shop, it is very
important to adopt various technologies and tools which are used to implement a Web sh op
system .

In this chapter are introduce d several technologies and tools to built integrated
development en vironment for a Web shop system . After that, it will compar e them
according to feature, license and so on .

2.1 Web server software

2.1.1 IIS
Internet Information Services which is for Windows Server , it is a flexi ble, secure and
easy-to-manage Web server for hosting anything on the Web. From media streaming to
web application hosting, IIS’s scalable and open architecture is ready to handle the most
demanding tasks. /1/

2.1.2 Apache http server
The Apache H ttp server is an open source web server software which is an established
standard in the online distribution of website services, which play a key role in the initial
growth of the World Wide Web , it has been developed by an open source community –
Apache software Found ation. The server is aimed at serving a great deal of widely popular
modern web platforms/operating systems, including Unix, GNU, FreeBSD, Linux, Solaris,
Novell NetWare, Mac OS X, Microsoft Windows. It released under the Apache license. /2/

2.1.3 Hiawatha
Hiawatha started in January 2002 as a very small web server which is an open source with
a focus on security . Hiawatha has many security features that no other web server has, like
preventing SQL injectio n, cross -site scripting (XSS), c ross-site request forge ry (CSRF)
prevention, d enial -of-service protection, control external image linking, banning of
potential hackers and limiting the runtime of CGI applications. /3/

3
SHEN YEYIN BACHELOR’S THESIS
2.1.4 Comparison of web server software

Table 1. Table of Web Server Software
Server Apache Ht tp
Server Internet
Information Server Hiawatha
Developed by Apache Software
Foundation Microsoft Hugo Leisink
Cost It is f ree software It is not free
software , bundled
with Windows NT
family products It is f ree software
Open Source Apache is
characteriz ed as
open -source
software No, it isn’t Yes, it is an open
source
Software License Apache License Non-free/Proprietary GNU General
Public License
Security of Basic
Access
Authentication Yes, the server
supports Basic
Authentication, for
password -protecte d
web pages Yes, the server
supports Basic
Authentication, for
password -protected
web pages Yes, the server
supports Basic
Authentication, for
password -protected
web pages
Security of Digest
Access
Authentication Yes Yes Yes, digest HTTP
authentication
works with
htdigest created
password files.
Dynamic content
of Java Servlets No, this server
implements AJP;
compatible
third -party Servlet
containers can be
integrated to
provide seamless
Servlet support No, Servlet Engines
are supported via
isapi_redirect No, it is not
suppor ted
Dynamic content
of ASP.net Yes, t his server can
use mod_mono
(Multi -platform) or
mod_asp.net(win32
only) which will Yes, IIS receives a
request for an
ASP.NET web page
it passes this request
to the ASP.NET No, it is not
support ed

4
SHEN YEYIN BACHELOR’S THESIS
provide ASP.NET
support engine. This engine
processes the
appropriate web
page and returns the
HTML content to
IIS
Support in
Windows Yes, t he application
is available for
Microsoft
Windows, has been
the most popular
HTTP server
software in use Yes, is a web server
application and set
of feature extension
modules created by
Microsoft for use
with Mi crosoft
Windows Yes, it works a
Unix -like
environment and
command -line
interface for
Microsoft
Windows
Support in Linux Yes, t he application
is available for
Linux No, it is not support
for Linux Yes, Hiawatha is a
secure web server
for Linux
Support in Mac OS
X Yes, t he application
is available for Mac
OS X No, it is not support
for Mac OS X Yes, the
application is
available for Mac
OS X
Support in Solaris Yes, t he application
is available for
Solaris No, it is not support
for Solaris Yes, the
application is
available for
Solaris

In table 1, it shows comparison of web server software according featur es and operating
system support and so on. Apache and I IS are two of the most widely used web server
applications in the world. The author of Hiawatha web server was a computer science
student. Both of Apache and Hiawatha web server are free, open source, cross -platform
software. IIS just works with the Window s operating systems, it is not free. But it works
well with other Microsoft applications, IIS has crash protection.

2.2 Relational database management systems

2.2.1 Microsoft Access

Access is database management system from Microsoft, it is a software -developmen t tools.
Advantages of Access:

5
SHEN YEYIN BACHELOR’S THESIS

– Stored in a single way – Access Manager object have tables, queries, forms, reports, pages,
macros and modules, all the objects are stored in the suffix (. Mdb) database file,
user-friendly to operation and management.
– Acces s is an object -oriented development tools, use of database management functions
encapsulated in various types of objects.
– Access is a visual tool, very intuitive and convenient.
Access supports ODBC (Open Data Base Connectivity), using Access Powerful DD E
(Dynamic Data Exchange) and OLE (object link and embedding) features, can be
embedded in a data table, bitmap, sound, Excel tables, Word documents, but also can
create dynamic database reports and forms and so on. Access procedures can also be
applied to the network, and with the network to link the dynamic data. Database access
page object generated using HTML files, easy to build Internet / Intranet applications. /4/

2.2.2 MySQL

The MySQL database has consistent fast performance, high reliability and ease of use. So
it has become the world's most popular open source database. It is used on every continent ;
by individual Web developers as well as many of the world's largest and fastest -growing
organizations to save time and money powering their high -volume W eb sites,
business -critical systems and packaged software. /5/

2.2.3 PostgreSQL

PostgreSQL is a powerful, open source object -relational database system which is released
under and MIT -style license. It has many years of active development and a proven
archite cture that has earned it a strong reputation for reliability, data integrity, and
correctness. /6/

PostgreSQL offers many advantages for company or business over other database systems:

– Immunity to over -deployment .
Over -deployment is what some proprietar y database vendors regard as their #1 licence
compliance problem. With PostgreSQL, no -one can sue you for breaking licensing
agreements, as there is no associated licensing cost for the software.
– Better suppo rt than the proprietary vendors .
– Signi ficant sav ing on staffing costs .
– Lege ndary reliability and stability .
Unlike many proprietary databases, it is extremely common for companies to report that

6
SHEN YEYIN BACHELOR’S THESIS
PostgreSQL has never, crashed for them in several years of high activity operation.
– Cross platform .
– Extensibl e.
– Design ed for high volume environments .
– GUI database design and administration tools .
There are many high -quality GUI Tools available for PostgreSQL from both open source
developers and commercial providers. /6/

2.2.4 Oracle

Oracle Database is a relational database management system produced by Oracle
Corporation , which is the first database designed for enterprise grid computing, the most
flexible and cost effective way to manage information and applications. Enterprise grid
computing creates large pools of industry -standard, modular storage and servers. With this
architecture, each new system can be rapidly provisioned from the pool of components.
There is no need for peak workloads, because capacity can be easily added or reallocated
from the resource pool s as needed. /7/

The database has logical structures and physical structures. Because the physical and
logical structures are separate, the physical storage of data can be managed without
affecting the access to logical storage structures. It can store ex ecute stored procedures and
functions within itself. /7/

2.2.5 Comparison of relational database management systems

Table 2. Table of relational database management systems
RDBMS Access MySQL PostgreSQL Oracle
Maintainer Microsoft Oracle
Corporation Postgre SQL
Global
Development
Group Oracle
Corporation
Software
License Proprietary Available under
the terms of the
GNU General
Public License,
as well as under
a variety of PostgreSQL
License(Free and
Open Source) Proprietary

7
SHEN YEYIN BACHELOR’S THESIS
proprietary
agreements
Speed It is slowly
while
transfer data
too large MySQL is fast
when concurrent
access levels are
low, and when
there are many
more reads than
writes PostgreSQL is
relatively slow at
low concurrency
levels, but scales
well with
increasing load
levels It is the one of
fastest in the
many database
Max DB Size 2GB
maximum
file size on
mdb file Unlimited Unlimited Unlimited( 4GB
block size per
table space)
Max Table Size 2GB MySAM storage
limits: 256 TB;
Innodb storage
limits:64 TB 32 TB 4 GB block
size(with
BIGFILE table
space)
Type System Static Static Static Static + Dynamic
(through
ANYDATA)
Support in
Windows Yes, runs
natively on
Microsoft
Windows Yes, runs
natively on
Microsoft
Windows Yes, runs
natively on
Microsoft
Windows since
version 8.0. Yes, support
Microsoft
Windows: X86,
X86-64, Itanium
Support in
Linux No, it is not
supported Yes, in most
Linux
distributions Yes, in most
Linux
distributions Yes, support
Linux: X86,
X86-64,
PowerPC, zSeries,
Itanium
Support in Unix No, it is not
supported Yes, runs on
many Unix -like
operating
systems Yes, runs on
many Unix -like
operating
systems Yes, runs on many
Unix -like
operating systems
Useable Small size
datab ase Small to
medium sized
database Medium sized
database Very large
database

In table 2, it shows co mparison of relational database management system from general
information, operating system support, limits and so on . For the product cost, Microsoft
and Oracle are not free, Access is one of software tools from Microsoft whose software

8
SHEN YEYIN BACHELOR’S THESIS
license is propri etary and Oracle as a commercial product , has a large staff of full time
technical writers, so it is very expensive. MySQL and PostgreSQL are free and open source
relational database management systems. MySQL has been popular among various
software project s because of its speed and ease of use, while PostgreSQL has had a close
following from developers who come from an Oracle or SQL Server background.

2.3 Programming languages

In figure 1, we can see the result of Evans Data (Evans Data Corporation is a comp any for
market research and strategic planning in the software development industry) published
PHP, Ruby and Python are the favorite choices of more than 500 developers and IT
Professionals.

Fig. 1. Overall Satis faction /8/

The Evans Data’s report is based on the perception of the users of those languages. In this
survey, users were asked to rank the languages they use based on different aspects or
features (from the survey):
– ease of use
– exception handling
– extensibility

9
SHEN YEYIN BACHELOR’S THESIS
– maintainability / readability
– cross-platform portability
– community
– availability of tools
– quality of tools
– performanc e
– memory management
– client side scripting
– security /8/

The overall ranking brings PHP, Ruby and Python to the top. The top languages in this
study are open source languages and thus evolve in an organic way. The proprietary
Microsoft languages, though bac ked by the software titan and its many resources, did not
satisfy their users as well as any of the open source languages. Ease of use is the most
important for Ruby and PHP users, while Python users rated extensibility highest.
Community is also a n import ant attribute of those three languages with an advantage for
Ruby. /8/

2.3.1 PHP

PHP is the most widely accepted and used programming language. That is especially
suited for Web development and can be embedded into HTML. Its syntax draws upon C,
Java, and Per l, and is easy to learn. The main goal of the language is to allow web
developers to write dynamically generated web pages quickly. /9/

2.3.2 Ruby

Ruby is a dynamic, reflective, open source general purpose object -oriented programming
language with a focus on simplicity and productivity. It has an elegant syntax that is
natural to read and easy to write. /10/

10
SHEN YEYIN BACHELOR’S THESIS

Fig. 2. User Satisfaction for Ruby /8/

In figure 2, it is Evans Data’s result which shows Ruby appears to be the first for ease of
use, community, cross platform portably and maintainability/readability. It also
emphasizes the uniform low interest of developers for security .

2.3.3 Python

Python is an interpreted and a remarkably p owerful dynamic programming language that is
used in a wide variety of application domains. Python i s often compared to Perl, Ruby or
Java. Some of its key distin guishing features include:

– Very clear, readable syntax .
– Strong introspection capabilities .
– Intuitive object orientation .
– Natural expression of procedural code .
– Full modularity, supporting hierarchical packages .
– Exception -based error handling .
– Very high le vel dynamic data types .
– Extensive standard libraries and third party modules for virtually every task .
– Extensions and modules easily written in C, C++ (or .NET languages for IronPython)
– Embeddable within applic ations as a scripting interface . /11/

11
SHEN YEYIN BACHELOR’S THESIS
2.4 Web application frameworks

2.4.1 Django

Django is an open so urce and a BSD licensed web application framework which allow
developers to write high performance, elegant web applications quickly. It was written in
Python, it follows the model -view -controller architec tural pattern and encourages rapid
development and clean, pragmatic design. /12/

2.4.2 ASP.net MVC

ASP.NET MVC is a part of the ASP.NET Web application framework that implements the
model -view -controller pattern. It was written in C#. It is one of the two dif ferent
programming models you can use to create ASP.NET Web applications, the other being
ASP.NET Web Forms. /13/

ASP.NET MVC brings the power of this development paradigm to ASP.NET development,
allowing you to use your .NET development skills to build M VC applications. It gives
you:

– Complete control over you r HTML Markup.
– Enables ri ch AJAX and jQuery integration.
– Allows you to create S EO-friendly URLs for your site.
– Makes Test Driven Development (TDD) easy . /13/

2.4.3 Ruby on Rails

Ruby on rails is an ope n source web application framework for Ruby programming
language. It uses the Model -View -Controller (MVC) architecture pattern to organize
application programming. That’s optimized for programmer happiness and sustainable
productivity. It can be write beau tiful code by favoring convention over configuration. /14/

2.4.4 Comparison of web application frameworks

12
SHEN YEYIN BACHELOR’S THESIS

Table 3. Table of web application framework
Project ASP.net MVC Django Ruby on rails
License Microsoft Public
License BSD MIT/Ruby
Language ASP.net Python Ruby
Ajax Yes, it enhanced
interactivity and
responsiveness Django uses jquery
in the admin, but is
jsagnostic in the
user templates Prototype, script
aculo, us, jQuery
MVC framework Yes, it implements
MVC pattern Full Stack ActiveRecord,
Action Pac k
MVC Push/Pull Push Push Push
ORM ORM -independent Django ORM ActiveRecord
Testing framework Unit Tests Yes Unit Tests,
Functional tests
and Integration
Tests
Security framework ASP.net forms
Authentication ACL -based Plug-in
Template
framework Pluggab le (default
is WebForms) Django Template
Language Yes
Caching framework Yes, caching
framework Yes, caching
framework Yes, caching
framework
Form validation
framework Yes (client -side via
plugins) Django forms API Yes

Table 3 shows comparison of web a pplication framework for their architectures and
features and so on. These three web application framework follow similar a push -based
architecture which use actions that do the required processing, and then “push” the data to
the view layer to get in the results. But it is different in language, different web application
framework tools depend on which programming language to use.

13
SHEN YEYIN BACHELOR’S THESIS
3 REQUIREMENTS

In this chapter are introduce d the requirements of a Web shop . It separates into functional
requirements a nd non -functional requirements. In the non -functional requirem ents part, it
analyz es the security of data security, information security and network security, usability,
backup and extensibility of a Web shop system. And after that, I will show the structu re of
database at end of this chapter.

3.1 Functional requirements

Functional requirements capture the intended behavior of the system. This behavior may
be expressed as services, tasks or functions the system is required to perform . /15/

3.1.1 Stakeholders

Stakeholders are people who have a stake in a software project. Any person affected by the
system or who influence on system development is a stakeholder. In a Web shop system,
there are two main groups of stakeholders . First are customer s, includ ing unregis tered
customers. It could be any other people who are interested in shop when viewing our
website. The second group are administrators who the main actors in a Web shop system.
They are those who will be sitting in front of the server, receiving informatio n and orders
from the users and updating database. They are al so in charge of web maintenance , as are
the salesperson and warehouse. /16/

3.2 Non-functional requirements

Non-functional requirements are usually called qualities of a system . Such as security and
backup.

3.2.1 Security

In electronic commerce, security is a core issue that must be considered. Viruses and
hacking are threatening e -commerce, thus requiring the network to provide a security

14
SHEN YEYIN BACHELOR’S THESIS
solution. Including encryption, signature scheme, distributed security management, access
control, firewall, secure Web servers, anti -virus protection.

The security of network system is divided into data security, information security and
network security.

3.2.1.1 Data Security

The damage of the hard drive is one of thr eat factors for data security. A hard drive
physical damage means loss of data. Loss of equipment operation, storage media failure,
operating environment and the human destruction, these can be caused by hard disk drives
affected. In order to ensure data s ecurity, redundant arrays of inexpensive disks,
hierarchical storage management can solve it.

Redundant Arrays of Inexpensive Disks is called RAID. It uses more than one type ,
capacity, interface or regular hard drive connected into an array as well as m akes it faster,
accurate and safe to achieve the data read speed and security. There are eight single RAID
levels, which are used to varying degrees in the real world today. Some few levels,
especially RAID 0, RAID 1 and RAID 5, are extremely popular, whil e a couple are rarely
if ever seen in modern systems. /17/

The Web shop system need s to keep working for 24×7 with handling of capital flow, so
that it is very important to secure the date accurately and safely. If the data is lost, t he
economic loss will be huge. RAID 1 is implemented as mirroring; a drive has its data
duplicated on two different drives using either a hardware RAID controller or software
(generally via the operating system). If either drive fails, the other continues to function as
a sing le drive until the failed drive is replaced. Conceptually simple, RAID 1 is popular for
those who require fault tolerance at low cost and don't need top -notch read performance.
Especially useful in situations where the perception is having a duplicated set of data is
more secure than using parity. /17/

Hierarchical storage management is called HSM. Storage devices by the online and offline
storage devices to work together to form a coordinated storage system, the system in the
online storage and offline st orage devices for dynamic management of data, make access to
data stored in the high frequency of high -performance data stored in line with higher
performance storage devices, and access to data stored in the low frequency of cheaper
offline storage device s.

15
SHEN YEYIN BACHELOR’S THESIS
3.2.1.2 Information Security

To prevent unregistered users to bypass the registration interface to trade directly into the
application system, the Web shop system uses Session object to register verification.

In a Web shop system whose source code will not be passed to the client browser, thus
avoiding the abbreviation of the source of plagiarism by others to enhance the security of
the program .

In addition, the people who operate the computer are one of the biggest potential threat to
information security . That is to say, the administrator c an’t give out or reset password ,
change any data without verifying who the information is for, it would let anyone easily to
get access to the system.

3.2.1.3 Network Security

Network security is a complicated subject, howev er, it is becoming more and more
important as people spend more and more time connected .

In a Web shop system, network security starts from authenticating the user with a user
name and password, for authentication, users have to use password with strongl y of
security, and also need to change it usually. In the code, it should be also prepared for
certain attack type such as SQL injection attack. And for instance, automatic generation of
user id in the firewall is a good way to prevent attacks.

The Web s hop system is a small or medium business . It has a fairly strong firewall to
prevent malicious attacks from hacking or some spamming and protect computer networks
from attack and subsequent intrusion by restricting the network t raffic which can pass
throug h.

The system must use an optional network analyzer or network monitor. This type of
electronic test equipment can provide same functi on with protection of firewall. The
system should also be tested well for weaknesses and holes that hackers and intruder s
could use. There are several applications that can be used for that action, such as openVAS
for Linux, Nessus and Yasca for Windows.

3.2.2 Usability

16
SHEN YEYIN BACHELOR’S THESIS
Usability is crucial in website development. Because whether you are doing online store or
online applicatio n, the page for users to make h im easy and fun to use is a key ; efficient to
use, easy to use and consistent interface can help enhance usability.

– Efficient to use.
Most users just simply leave the site and browse or shop elsewh ere, so information
produc ts like best sellers module can help the customer to notice it, if the online shopping
site has product pages, the customer will be sure to see them. But if it lacks of adequate
information page for product , or even if it is difficult to quick browser. Thi s is a serious
problem, because the product information to help mak e people's determination to buy.
– Easy to use.
If the system has well structured user manu als, information error message and help
facilities, it can be easy to use for users.
– Consistent inte rfaces .
It has a solely characteristic of the user interface like consistent interfaces enhance
usability. Because when a person visits a new Web site, they find in the first place is that
they find most of the other sites where they are; they use their ex perience to understand the
meaning of new content. This is called habits. People expect certain things remain the
same, such as link colors, logo, web site location, tab navigation behavior .

3.2.3 Backup

Backup is useful in recovering your data in the event o f an electronic disaster like
hardware failure or a break -in that changes or otherwise damages your data. It cop ies of all
the important computer files kept in another location. So if the database is quite large that
has to extract file first. That means, storage is the base of a backup system.

3.2.4 Extensibility

The implementation of a Web shop system takes into consideration future growth, the
extensibility of the new network system designed to adapt to the user the ability to future
development of enterpri ses. Such as a pplication extensibility, application functionality in
the network configuration on the one hand to fully meet current and foreseeable future
applications within a period of time, on the other hand can easily extend the functionality
can be f lexibly added and functional modules. Like update or add new payment types, the
shipping method of different options and so on.

17
SHEN YEYIN BACHELOR’S THESIS
3.3 Structure of database

For a g ood database design , that can accommodate and support all application programs, is
the necessary condition for an information system to deliver the intended functionality. The
data structures that have persistent presence in the database are modeled as the entity
classes and as the relationships between entity classes. The entity classes need to be
mapped to the data structures recognized by the database. These data structures vary
depending on the underlying database model, which can be object -oriented,
object -relational or relational. /18/

When creating database it should be know n what should be st ored and what is important
and how to sort them in different tables. In this Web s hop system, the database is not
complex. I create 7 tables into it: Class_1, Class_2, Product, OrderList, ShopList,
RegUser, Manage_User.

Below is the structure of what tab les were create d for Web Shop system:

18
SHEN YEYIN BACHELOR’S THESIS

Class_1
PKId
Class_1_Name
Class_1_RegTime
Class_2
PKId
Class_1_Name
Class_2_Name
Class_2_RegTimeManage_User
Id
UserName
PassWord
OrderList
Form_Id
User_Id
Name
Zip
Phone
Email
Address
Pays
RegTime
Flag
RemarkRegUser
PKId
UserId
PassWD
WtPass
DaPass
Name
Sex
Email
Phone
Address
Zip
RegTime
ShopList
PKId
Product_Id
Form_Id
Product_Name
Number
P_NewPrice
RegTimeProduct
PKProduct_No
Product_Id
Product_Name
Class_1
Class_2
Product_Intro
Product_Show
P_NewPrice
P_OldPrice
P_Pic
P_Full_Pic
RegTime
Look_Coun
Fig. 3. Database Entity Relationship

Class_1
It is a table stores category name, which includes Id, Class_1_Name and Class_1_RegTime.
Administrator is able to add, edit and remove the c ategory.

Class_2
It is a table stores sub category name, which includes Id, Class_1_Name, Class_2_Name
and Class_2_RegTime. Administrator is able to add, edit and remove the sub category.

Product

19
SHEN YEYIN BACHELOR’S THESIS
It is a table stores product detail , which includes Produc t_No, Product_Id, Product_Name
and other product information. User can see the product picture and how many users have
been visited this product. Administrator is able to add, edit and remove the product.

OrderList
It is a table store s order information, which includes Form_Id, User_Id and user’s
information. From it user can check the order status. Administrator is able to add, edit and
remove the order.

ShopList
It is a table stores shoplist, which includes Id, Product_Id, Form_Id, Product_Name,
Number, P_NewPrice and RegTime. It shows the information from the shopping cart.

RegUser
It is a table stores all user account and more information for user. For every user this is
unique userid. At the same time, user can store email, pe rsonal information. Admi nistrator
is able to add, edit and remove the user account.

Manage_User
It is a table store administration account, which includes the Id, username and password. It
is different from RegUser table that admin don’t need register.

20
SHEN YEYIN BACHELOR’S THESIS
4 USER I NTERFACE DESIGN

In the use interface requirements analysis phase, th e development of user interfaces begins
with early sketches of GUI windows. These sketches are used for requirements gathering,
in story -boarding sessions with the users, for prototyping, and for inclusion in the use case
documents. The GUI windows for the application are developed to conform to the
underlying GUI presentation software and to the peculiarities and constraints of the chosen
programming environment during the design . /19/

In this chapter are introduce d two main aspects of interface window in the user interface
design.

4.1 Interface window

There are two main aspects of GUI design which divided into the design of windows and
the design of windows’ input and editing controls. A typical Windows application consists
of a single main application window, the primary window and the secondary window . The
primary window is suppo rted by a set of pop -up windows . The secondary wind ow support
the user’s activities in the primary window. /20/

4.1.1 Primary window

A primary window has a border (frame) is the main window in which user interacts with a
document or data. The frame contains a title bar (caption bar) for the window, optionally, a
menu bar, toolbars and the window’s viewable and modif iable content. /20/

If a web page is used as an entry point of a web application, it can also be treated as special
kind of primary window . The user events in web applications are normally programmed
through active hyperlinks and action buttons. /21/

21
SHEN YEYIN BACHELOR’S THESIS

Fig. 4. Web page window of Web Shop

Figure 4 shows the main page which links to other pages . It includes registration, order
inquire and view shopping cart. Users can log in the right behind the control bar which is
member’s login section. In the middle of main page are categories and be st sellers, the
categories show the products category and name and best sellers show the popular products.
In the left side of main page are the new products.

4.1.2 Secondary window

To the primary window, a secondary window i s typically modal with respect . In particular
for operations that modify the database such as the inser t, delete and update operations, it
extends the functionality of the primary window. /22/

A secondary window can be:
– a drop-down list
– a message box /22/

22
SHEN YEYIN BACHELOR’S THESIS
4.1.2.1 Drop -down list

A drop -down list provides a pick -list of choices from which the us er can select one that
applies. That allow s the user to choose one value wanted from a list. /23/

In the search part of the interface, the drop -down list to display the m enu is seen Figure 5.

Fig. 5. Menu of Drop -down list

The following code demonstrates the drop -down list in the Web shop system:

<select name='Product_Class' size='1' tabindex='0' class='a' style="font -size: 14px">
<option value='Computer'>Desktop</option>
<option value='Hardware Peripherals'>CPU</option>
<option value='Network Equipment'>Network Ca rd</option>
<option value='Mobile Digital'>MP3</option>
<option value='Software'>Office Software</option>
</select>

4.1.2.2 Message box

A message box is a secondary window that displays a message to the user. It contains a
system icon, a set of buttons and mess age can signify a warning, an explanation, an
exceptional condition, etc. is seen Figure 6. /23/

23
SHEN YEYIN BACHELOR’S THESIS

Fig. 6. Message box of Login failed

The following code demonstrates the message box in the Web shop system:

<%=Request.QueryString("msg")%></p>
<TR bgColor=#e6e4c4>
<TD class=main1 width="292" height="27">
<DIV align=center><INPUT class=main type=submit size=3 value=Back name=Submit2
onClick="javascript:window.history.go( -1)">

24
SHEN YEYIN BACHELOR’S THESIS
5 IMPLEMENTATION

In this chapter are introduce d what technologies have chosen to implement integrated
developments environment for a Web shop system and the database table creation. Then it
will tell how to connect database by using ASP. During the implementing, each step must
be followed in order to get fewer errors would occur.

5.1 Integrated development environment implementation

It was used Internet Informatio n Server combined with ASP and Access database to build
an integrated development environment for example in a Web shop system.

It was chose n ASP because it is easy to learn and its development tools are very powerful
and various. It is not required to i nstall the dedicated ASP software on the server; there is
also no special requirement for the client except a browser. It is a Microsoft technology an d
program that runs inside IIS, but the weakness is its poor cross -platform, currently only
runs on Micros oft’s web server.

Internet Information Server is valid for small sites, but also for a large volume of
enterprise -class Web site. Currently, IIS only runs on Windows Server. IIS within an
integrated search engine allows users with a variety of tools (incl uding ASP, ActiveX Data
Objects and SQL database ) to create a search form . IIS allows remote management of the
server browser, supports multiple virtual hosts. Furthermore, since the introduction of ASP
technology, it can easily use it to create dynamic We b pages. This Web shop system uses
Windows XP + IIS framework is currently a popular Web server platform for individual ,
its configuration and development are relatively easy, it is suitable for small enterprise
development based B2C e -commerce system.

Access database is a software development tool from Microsoft. D ue to the data volume of
this Web shop is not much and as an example of my thesis, facilitate to display , it is
suitable database for this Web shop system .

5.2 Create the database tables

Create d atabase table must be used on the system of data classification and the specific
structural design. It has to be able to adapt to various functions of the system transfer and
does not produce structural logic confusion. It ensure s that critical data in une xpected
situations will not be destroyed.

25
SHEN YEYIN BACHELOR’S THESIS
As well as an entity corresponds to a table, figure s out what attributes of the entity,
corresponding to what the field, and what kind of contact between the various entities.

This following databa se table is one of the Web shop . (see Table 4 )

Table 4. Database table of RegUser
Field Data Type Length Description
Id int 10 ID number
(Primary key)
UserId int 10 User ID number
PassWD var 20 Password
WTPass var 50 Question of
password
DAPass var 50 Answer of
password
Name var 20 User Name
Sex char 2 User Gender
Email var 50 Email Address
Phone char 20 Telephone number
Address var 100 User address
Zip var 20 Postcode
RegTime datetime 50 Register time

5.3 Database connection

Generally speaking, a true and c omplete site is inseparable from the database, because in
the practical application, it need to save a lot of data, and often associated with other data,
using a database to manage the data, you can easily query and update.

Here, it is a short piece of co de as an example to show you how to use ASP to connect
database.

<%
dim conn
dim connstr
on error resume next
connstr="DBQ="+server.mappath("market_database/supermarket_data.asp")+";DefaultDir
=;DRIVER={Microsoft Access Driver (*.mdb)};"

26
SHEN YEYIN BACHELOR’S THESIS
set conn=serve r.createobject("ADODB.CONNECTION")
if err then
err.clear
else
conn.open connstr
if err then
err.clear
end if
end if
%>

5.4 Interface i mplementation

The implementation was started by designing the user module and administrator module.
Login module is the first step in order to user accounts are able to log. If not, the user can
apply to register a new account .

When it comes to the user interface design part, the implementation was started with bars
functions like search bar, order inquire and view shoppi ng cart. After the user module is
well structured it was started to implement module for administrator which has more
function than user module.

5.4.1 User Module

Member Login

This is the login field where user can type the member name and password to login. The
address is : http://127.0.0.1/webshop/ (see Figure 7)

27
SHEN YEYIN BACHELOR’S THESIS
Fig. 7. User module of Login

In figure 7, user login module is the first line of defense to prevent illegal user login,
through which you can protect the security of the database. When the user wants to order,
the first is to enter the authentication interface, only in the case of correct password it can
continue to shopping ; if you enter an incorrect password, it can’t be ordered.

If he/she enters as a visitor into the site, he/she can only br owse and search for goods in
general, not to buy, when click added in the shopping cart, the system determines whether
the user is already login, if not then get the prompt page that prompts the user must login to
order goods, if he/she is the first time, is need ed to register first.

If the user enter s the correct member number and password, it set s the session variable
Session ("LoginSuccess") =1. It will send a header to redirect the user to the default.asp.

The following code demonstrates login valida tion:

Name = Request("UserName")
Pwd = Request("UserPass")
set Rs = Server.CreateObject("ADODB.recordset")
sql="select * from RegUser where UserId='"&Name&"'and PassWD='"&Pwd&"'"
sqltext="select * from Manage_User where UserName='" & Name & "' and PassW ord='"
& Pwd & "'"
rs.open sql,conn,1,1
IF rs.RecordCount >=1 then
Session("LoginSuccess")=rs("UserId")
response.redirect "default.asp"

New Member Registration

If you are not a member then prompt the user for registration.

28
SHEN YEYIN BACHELOR’S THESIS
Fig. 8. User module of Re gistration

In figure 8, there is the new member registration where user can type the new member
account to register.

After register, user jumps to another window to fill in the rest of member registration
information.

When u ser submitted information, t he system begins to determine whether the user's
registration information is valid . The first is the user name it can’t be empty, the user need s
to enter the password twice the same, followed by subsequent users fill out to determine
whether the informatio n reach to the requirements, until all the information is correct, the
system information is saved to members of the user registration form and prompts the user
registered, it can user login, also can be shopping. (see Figure 9 )

Fig. 9. Registration Form

29
SHEN YEYIN BACHELOR’S THESIS

In figure 9, in the Gender part of registration form , it is used RadioButton control, it allows
the user to choose only one if a predefine d of options.

The following code example demonstrates how the RadioButton control to perform set the
button of “ Gender” button.

Type = radio CHECKED value=male name=sex>Male < INPUT id=sex type=radio
value=female name=sex> Female

When all the conditions are met, the system record data to database table, and the page
display the filled of registration informatio n, the key statement is following:

<%
set rs=server.createobject("adodb.recordset")
sqltext="select * from RegUser"
rs.open sqltext,conn,3,3

rs.addnew
rs("UserId")=request.form("uid")
rs("PassWD")=request.form("pwd")
rs("WtPass")=request.form("question" )
rs("DaPass")=request.form("answer")
rs("Name")=request.form("Name")
rs("Sex")=request.form("Sex")
rs("Email")=request.form("Email")
rs("Phone")=request.form("usephone")
rs("Address")=request.form("haddr")
rs("Zip")=request.form("postcode")
rs.update
%>
<%
set rs_detail=server.createobject("adodb.recordset")
sqltext2="select * from RegUser where UserId='" & request.form("uid") & "'"
rs_detail.open sqltext2,conn,1,1
%>

Search b ar

30
SHEN YEYIN BACHELOR’S THESIS

Online shopping as a display of goods in the online sales system, how the u ser can find the
fastest which they want to buy, it is very important issue, it also essential to the search bar.
This shopping system also did a small module for users to find, users do not have to enter
all of name, just enter some key words, then the sy stem can be found all the goods of the
information to a web page returned to the user.

Fig. 10. Search Bar

In figure 10, bars started to search bar, user can type the product name and choose
keyword in the drop-down menu. After then, she/he can click the inquire button or reset it.

The SQL statement is following like:

<%
ProductClass_2=request("ProductClass_2")
set rs=server.createobject("adodb.recordset")
sqltext="select * from Product"
if request("Product_Name")<>"" then
sqltext=sqltext &" where Product_Name like '%"& request("Product_Name") &"%' "
else
sqltext=sqltext &" where Product_Name like '%"& "" &"%' "
end if
if request("Product_Class")<>"" then
sqltext=sqltext &" and Class_1 like '%"& request("Product_Class") &"%' "
end if
rs.open sqltext,conn,1,1
%>

Shopping cart

31
SHEN YEYIN BACHELOR’S THESIS
When the user login successful, if found, ordered items, click on items in the bottom of the
order, the system will pop up a new page, showing that the item has been added to the
shopping cart, then the user nee d to select the quantity ordered. (see Figure 11)

Fig. 11. List of Shopping Cart

After clicking the confirmation, the item information is added to the shop list table in
background management, if the user needs to continue shopping, you can continue t o
select, continue to add, the system will automatically list all of the information save to
shopping cart, also shows a list of items purchased by the user, and in the total price.
If users go to checkout before the purchase of the items have been satisfi ed, it can choose
button of order cancellation, shopping list and the system will delete the relevant
information. After users complete the purchase, click on payment, the system returns the
final list of items and the total purchase price.

Users once aga in confirmed, the system displays a successful shopping, prompts the user
to check information, including name, address, zip code, email, phone, payment method,
and other comments that is automatically extracted from the user list table, but the user can
modify. (see Figure 12 )

32
SHEN YEYIN BACHELOR’S THESIS

Fig. 12. List of Shopping Settlement

5.4.2 Administrator Module

Administrator l ogin

Fig. 13. Administrator Login

In figure 13, this is the login field where administrator can type the administrator account
and password to login . The address is: http://127.0.0. 1 /admin/shop_login.htm

33
SHEN YEYIN BACHELOR’S THESIS
In addition to online shopping system that allows users to browse and shop front to achieve
such operations, but also must be able to enable ma nagers to a variety of information on
system maintenance, such as commodities to add, delete, modify, members of the review,
product updates and so on. The management function is a very important part of the online
shopping system function.

Administrators can login the main page of the administrator access into the background as
maintenance, click after the first is authentication, it need to enter the correct account
number, password. As it relates to transaction, for system security consideration, it sho uld
be minimal distribution of the administrator account, password, and we should try complex,
password frequently changed.

Navigation m anagement

After entering the main page of system management is the use of a frame structure, the left
is a tree menu as hidden. On the right shows the specific information.

The main function of managing updates with product information, commodity transaction,
member management and operation management, such as the four blocks, product
information management, mainly to a dd new items, delete and modify products have been
added.

34
SHEN YEYIN BACHELOR’S THESIS

Fig. 14. Navigation Management

The figure 1 4 is the management list shown to the administrator from which admin can
select, edit and delete them from database.

Fig. 15. Add Product Categori es

In figure 15, it is the table for admin to add product categories.

The following code shows to insert information by using SQL statement:

<%

35
SHEN YEYIN BACHELOR’S THESIS
set rs=server.createobject("adodb.recordset")
sqltext="select * from Product"
rs.open sqltext,conn,3,3
rs.ad dnew
rs("Class_2")=request.form("class_2_name")
rs("Class_1")=request.form("class_1_name")
rs("Product_name")=request.form("p_name")
rs("Product_intro")=request.form("p_intro")
rs("Product_show")=request.form("p_show")
rs("P_newprice")=request.form("newpri ce")
rs("P_oldprice")=request.form("oldprice")
rs("P_pic")=request.form("p_pic")
rs("P_Full_pic")=request.form("p_full_pic")
rs.update
%>

Fig. 16. Product Review

In figure 16, this is the table for admin to check the products and edit or delete the pr oduct.
After confirm, the system will record information in related database table.

After completing the system update, as managers, should be immediately logout your
account, the options is at the bottom of the tree menu, click after the logout, and retu rn to
the front page, it to prevent others from malicious modified Web site information, resulting
in unnecessary losses.

These two parts user module and administration module are relatively simple
implementation of function in a Web shop system.

36
SHEN YEYIN BACHELOR’S THESIS
6 CONC LUSION

This thesis was completed under my supervisor Aalto Teppo with the careful guidance ;
from choos ing the topics to project task that he gives me many earnest teachings and
meticulous guidance. I got benefit a lot from both of academic standards and a cademic
attainments. This knowledge provided valuable experience for my future study and work.
Though this the final project lack s of own learning. Primarily lack of practical ability, but I
will study and work hard in future, continue to enrich myself and improve myself.

After several months of design and development, a Web shop system development is
completed. The function was to achieve the basic requirements. It is able to complete the
management interface and user login process design, information man agement module,
product category management module, order management module and so on.

Through this project, I am deeply to understanding of the ASP, IIS, Microsoft Access.
From theory to practice, from perceptual knowledge to rational knowledge, I really have
learned to use, combination of the theory in practice, further understand the rules of
information systems development.

However, I met a lot of problems during the project, sometimes a small error will make me
spend a lot of time and concentrate eff orts on finding and fix. I have overcome the
problems finally. Since then, I will redouble my efforts to research, acquire more skilled on
the basis of new technology to improve my level of development. On the other hand it
proved my knowledge and ability, I have been raising awareness of own quality.

37
SHEN YEYIN BACHELOR’S THESIS
7 REFERENCES

/1/ Internet Information Server Overview ., [WWW -document],
<http://www.iis.net/overview >. 2010

/2/ Apache http server About ., [WWW -docum ent],
< http://httpd.apache.org/ABOUT_APACHE.html >. 2010

/3/ Hiawatha About ., [WWW -document],
<http://www.hiawatha -webserver.org/about>. 2010

/4/ Baike Baidu., [WWW.document],
<http://baike.baidu.com/view/355.htm>, 2010

/5/ MySQL Tutorial ., [WWW -documen],
<http://www.mysql.com/why -mysql/>. 2010

/6/ PostgreSQL About ., [WWW -document],
<http://www.postgresql.org/about/ >. 2010

/7/ Oracle Database Documentation Library., [WWW -document],
<http://download.oracle.com/docs/cd/B19306_01/server.102/b14220/intro.htm#i62345>.
2010

/8/ Infoq., [WWW -document],
<http://www.infoq.com/news/2009/03/top -scripting -languages -php-ruby>. 2010

/9/ PHP Tutorial., [WWW -document],
<http://fi.php.net/manual/en/preface.php >. 2010

/10/ Ruby Tutorial., [WWW -document],
<http://www.ruby -lang.org/en/ >. 2010

/11/ Python About ., [WWW -document],
<http://www.python.org/about/ >. 2010

/12/ Django Tutoria l., [WWW -documeny],
<http://www.djangoproject.com/ >. 2010

/13/ Microsoft ASP.net Tutorial ., [WWW -document],
<http://www.asp.net/mvc/whatisaspmvc >. 2010

38
SHEN YEYIN BACHELOR’S THESIS
/14/ Ruby on Rails Tutorial ., [WWW -document],
<http://rubyonrails.org/ >. 2010

/15/ Architecture Resources for enterprise Advantage., [WWW -document],
<http://www.bredemeyer.com/pdf_files/functreq.pdf>. 2010

/16/ Leszek A, Maciaszek, 2001, Requirements analysis and System Design, developing
information systems with UML, p 3

/17/ PCGuide., [WWW -document],
< http://www.pcguide.com/ref/hdd/perf/raid/level s/single.htm >. 2010

/18/ Leszek A, Maciaszek, 2001, Requirements analysis and System Design, developing
information systems with UML, p275

/19/ Leszek A, Maciaszek, 2001, Requirements analysis and System Design, developing
information systems with UML, p244

/20/ Leszek A, Maciaszek, 2001, Requirements analysis and System Design, developing
information systems with UML, p250

/21/ Leszek A, Maciaszek, 2001, Requirements analysis and System Design, developing
information systems with UML, p255

/22/ Lesz ek A, Maciaszek, 2001, Requirements analysis and System Design, developing
information systems with UML, p256

/23/ Leszek A, Maciaszek, 2001, Requirements analysis and System Design, developing
information systems with UML, p260

39
SHEN YEYIN BACHELOR’S THESIS
8 LIST OF APPE NDICES

Appendix A: Functionality

Appendix B: Use Case

Appendix C: Test Case

40
SHEN YEYIN BACHELOR’S THESIS
Appendix A

1) Customer link to the URL and register for a user account.
2) The system generates username and password.
3) The system authent icates the login by checking the validity of username and password.
4) Customer can search products.
5) Customer can update their personal information such as, password and address, e -mail.
6) Customer can write information or give suggestions in content.
7) The admin istrator should get registered users personal information and restore to
database.
8) Administrator can edit user information and update it when necessary.
9) Administrator should put delivery information to the page for users to check.
10) Administrator can edit pr oducts information and update it when necessary.

41
SHEN YEYIN BACHELOR’S THESIS
Appendix B

Use case of registration
Use Case ID: UC1
Use Case Name: Regist ration
Created By: Shen Yeyin Last Updated
By: Shen Yeyin
Date Created: 01-09-2010 Date Last
Updated : 05-09-2010
Actors: Unregistered customer
Description: When the unregistered users want to buy products, they
must register.
Trigger: None
Preconditions: Customer use the system of Web shop first time.
Post conditions:
Normal Flow: 1. Type URL: the ma in page of Web shop pops up, which
allows customer s to register.
2. Customer clicks the register button/link. A page pops up
with requested information entries for users to input.
3. Customer s input requested Information: user name,
password, email address, and other personal information .
4. Customer clicks the button of submit.
Alternative Flows: None
Exceptions: 1.0.E1 The registration is rejected .
Back to step 2.
Includes: None
Priority: High
Frequency of Use: Unknown
Business Rules: N/A
Special Requ irements: Server, Database
Assumptions: None
Notes and Issues:

Use case of login
Use Case ID: UC2
Use Case Name: Login
Created By: Shen Yeyin Last Updated
By: Shen Yeyin

42
SHEN YEYIN BACHELOR’S THESIS
Date Created: 01-09-2010 Date Last
Updated: 05-09-2010
Actors: Customer and Administrators
Description: Customer and administrator want to login to the main page.
Trigger: None
Preconditions: Customer are registered already.
Post conditions:
Normal Flow: 1. Click the Member Login button, a page pops up asking for
username and p assword.
2. Type username and password.
3. Click on login to submit username and password to the
system .
Alternative Flows: None
Exceptions: 2.0.E.1 Enter username or password empty.
Shows back button and to step 2.
2.0.E.2 Username doesn’t match the password .
Shows back button and to step 2.
Includes: User database in system.
Priority: High
Frequency of Use: Unknown
Business Rules: N/A
Special Requirements: Server, Database
Assumptions: None
Notes and Issues:

Use case of search
Use Case ID: UC 3
Use Case Name: Search
Created By: Shen Yeyin Last Updated
By: Shen Yeyin
Date Created: 01-09-2010 Date Last
Updated: 05-09-2010
Actors: Customer
Description: When the customer want to search products .
Trigger: None
Preconditions: Customer were success fully login.
Post conditions:
Normal Flow: 1. Customer are into Web shop system.
2. Customer type keyword and click the button of search .
3. Customer select and check what they need .

43
SHEN YEYIN BACHELOR’S THESIS
Alternative Flows: None
Exceptions: 3.0.E1 The system has not search the resu lt.
Shows the search again back to step 2.
3.0.E2 Pre-visit time overdue, the system automatically
exit.
Back to UC2.
Includes: User database in system.
Priority: High
Frequency of Use: Unknown
Business Rules: N/A
Special Requirements: Server, D atabase
Assumptions: None
Notes and Issues:

Use case of track order
Use Case ID: UC 4
Use Case Name: Track Order
Created By: Shen Yeyin Last Updated
By: Shen Yeyin
Date Created: 01-09-2010 Date Last
Updated: 05-09-2010
Actors: Customer
Descripti on: When the customer want to know products delivery status.
Trigger: None
Preconditions: Customer were successfully order products and purchase
from the market.
Post conditions:
Normal Flow: 1. Customer are into Web shop system.
2. Customer type order numb er and click the button of inquire .
Alternative Flows: None
Exceptions: 4.0.E1 The system has not found the order.
Back to step 2.
4.0.E2 Enter the wrong order number.
Shows “is not belongs to your order” and enter “back”
button. Back to step 2.
4.0.E3 Pre-visit time overdue, the system automatically
exit.
Back to UC2.
Includes: User database in system.
Priority: High

44
SHEN YEYIN BACHELOR’S THESIS
Frequency of Use: Unknown
Business Rules: N/A
Special Requirements: Server, Database
Assumptions: None
Notes and Issues:

Use case of view shopping cart
Use Case ID: UC 5
Use Case Name: View shopping cart
Created By: Shen Yeyin Last Updated
By: Shen Yeyin
Date Created: 01-09-2010 Date Last
Updated: 05-09-2010
Actors: Customer
Description: When the customer want to see pr oducts information which
they choose.
Trigger: None
Preconditions: Customer were successfully added products in the shopping
cart.
Post conditions:
Normal Flow: 1. Customer click the button of view shopping cart.
2. Customer can confirm edit .
3. Customer can c ontinue shopping
4. Customer can cancel the order
5. Customer can go to checkout .
Alternative Flows: None
Exceptions: 5.0.E1 Pre-visit time overdue, the system automatically
exit.
Back to UC2.
Includes: User database in system.
Priority: High
Frequency of U se: Unknown
Business Rules: N/A
Special Requirements: Server, Database
Assumptions: None
Notes and Issues:

Use case of edit products
Use Case ID: UC 6

45
SHEN YEYIN BACHELOR’S THESIS
Use Case Name: Edit Products
Created By: Shen Yeyin Last Updated
By: Shen Yeyin
Date Created: 01-09-2010 Date Last
Updated: 05-09-2010
Actors: Administrator
Description: Administrator wants to handle products.
Trigger: None
Preconditions: Administrator is registered already .
Post conditions:
Normal Flow: 1. Select category to edit.
2. Insert the i nformation and confirm.
Alternative Flows: None
Exceptions: 6.0.E1 Pre-visit time overdue, the system automatically
exit.
Back to UC2.
Includes: User database in system.
Priority: High
Frequency of Use: Unknown
Business Rules: N/A
Special Requiremen ts: Server, Database
Assumptions: None
Notes and Issues:

Use case of edit orders
Use Case ID: UC 7
Use Case Name: Edit Orders
Created By: Shen Yeyin Last Updated
By: Shen Yeyin
Date Created: 01-09-2010 Date Last
Updated: 05-09-2010
Actors: Admini strator
Description: Administrator wants to handle orders.
Trigger: None
Preconditions: Administrator is registered already .
Post conditions:
Normal Flow: 1. Select category to edit.
2. Edit status and confirm.
Alternative Flows: None
Exceptions: 7.0.E1 Pre-visit time overdue, the system automatically

46
SHEN YEYIN BACHELOR’S THESIS
exit.
Back to UC2.
Includes: User database in system.
Priority: High
Frequency of Use: Unknown
Business Rules: N/A
Special Requirements: Server, Database
Assumptions: None
Notes and Issues:

Use ca se of edit member
Use Case ID: UC 8
Use Case Name: Edit Member
Created By: Shen Yeyin Last Updated
By: Shen Yeyin
Date Created: 01-09-2010 Date Last
Updated: 05-09-2010
Actors: Administrator
Description: Administrator wants to handle Member.
Trigger: None
Preconditions: Administrator is registered already .
Post conditions:
Normal Flow: 1. Check the registered member details.
2. Delete the member.
Alternative Flows: None
Exceptions: 8.0.E1 Pre-visit time overdue, the system automatically
exit.
Back to UC2.
Includes: User database in system.
Priority: High
Frequency of Use: Unknown
Business Rules: N/A
Special Requirements: Server, Database
Assumptions: None
Notes and Issues:

Use case of edit management
Use Case ID: UC 9
Use Case Name: Edit Ma nagement

47
SHEN YEYIN BACHELOR’S THESIS
Created By: Shen Yeyin Last Updated
By: Shen Yeyin
Date Created: 01-09-2010 Date Last
Updated: 05-09-2010
Actors: Administrator
Description: Administrator wants to handle admin information.
Trigger: None
Preconditions: Administrator is regis tered already .
Post conditions:
Normal Flow: 1. Administrator adds a new manger in the system.
2. Review the admin information.
3. Change the password or delete account.
Alternative Flows: None
Exceptions: 9.0.E1 Pre-visit time overdue, the system automaticall y
exit.
Back to UC2.
Includes: User database in system.
Priority: High
Frequency of Use: Unknown
Business Rules: N/A
Special Requirements: Server, Database
Assumptions: None
Notes and Issues:

Use case of logout
Use Case ID: UC 10
Use Case Name: Logout
Created By: Shen Yeyin Last Updated
By: Shen Yeyin
Date Created: 01-09-2010 Date Last
Updated: 05-09-2010
Actors: Customer and Administrator
Description: Customer and administrator want to logout the system.
Trigger: None
Preconditions: Custo mer and administrator are all login.
Post conditions:
Normal Flow: 1. Click on button ”Logout”.
Alternative Flows: None
Exceptions:
Includes: User database in system.

48
SHEN YEYIN BACHELOR’S THESIS
Priority: High
Frequency of Use: Unknown
Business Rules: N/A
Special Requirements : Server, Database
Assumptions: None
Notes and Issues:

49
SHEN YEYIN BACHELOR’S THESIS
Appendix C

Test case of registration
Test case ID: TC 1
Test case name: Registration
Purpose: Customer to register their own username and password.
Prereq : This function is just for new customer.
Test data: User account, Name, Gender, Password, Password confirm,
Password question, Password answer, Email, Telephone,
Address, Zip
Steps: Steps to carry out the test. See step formatting rules below.
1. Click on registration link.
2. Type User account, Name, Gender, Password, Password
confirm, Password question, Password answer, Email,
Telephone, Address, Zip.
3. Click “Confirm” button.
4. See the registration information form.
5. Click “Go to shopping” button.
6. Go back to the homepage.
Expected results: Registering customer’s account successful.
(Error message if username and password wrong).
Test results:
(date/result/tester) 10-09-2010
Show customer register successful.
Show customer register unsuccessful.
Shen Yeyin

Test case of login
Test case ID: TC 2
Test case name: Login
Purpose: Customer log into the system with existing login information.
Prereq: This function is for Customer and Administrator.
Test data: Member Name={Valid Member Name, invalid Member
name, e mpty}
Password = {Valid password, invalid password, empty}
Steps: Steps to carry out the test. See step formatting rules below.
1. Enter Member Name.
2. Enter Password.
3. Click “Login” button.
Expected results: Customer login is successful.

50
SHEN YEYIN BACHELOR’S THESIS
(Error message if use rname or password doesn’t match).
Test results:
(date/result/tester) 10-09-2010
Verify that welcome message is correct member name.
Shows wrong username or password.
Shen Yeyin

Test case of search
Test case ID: TC 3
Test case name: Search
Purpose: Customer can search product which they want.
Prereq: The function is for customer.
Test data: Product Name={ Valid Product Name, invalid Product name,
empty}
Category={Computer, Hardware, Network Equipment,
Mobile Digital, Software}
Steps: Steps to carry out the test. See step formatting rules below.
1. Enter the product name.
2. Choose the category.
3. Click the “Inquire” button.
Expected results: Items are displayed successfully.
Test results:
(date/result/tester) 10-09-2010
The system display searching result .
(Error message shows have not found result).
Shen Yeyin

Test case of track order
Test case ID: TC 4
Test case name: Track Order
Purpose: Customer can see the product status.
Prereq: The function is for customer.
Test data: Order Number={Valid order number, invalid order number,
empty}
Steps: Steps to carry out the test. See step formatting rules below.
1. Enter the order number.
2. Click “Inquire” button.
Expected results: Product status is displayed successfully.
(Error message shows wrong order number ).
Test results:
(date/result/tester) 10-09-2010
It will show the products status.

51
SHEN YEYIN BACHELOR’S THESIS
It will show the message: the item is not belongs to you.
Shen Yeyin

Test case of view shopping cart
Test case ID: TC 5
Test case name: View shopping cart
Purpose: Customer wants to see products information which they
choose.
Prereq: The function is for customer.
Test data:
Steps: Steps to carry out the test. See step formatting rules below.
1. Click the “View shopping cart” link.
Expected results: The items which cho ose are displayed successfully.
Test results:
(date/result/tester) 10-09-2010
It will displays the list of items you choose form.
Shen Yeyin

Test case of edit products
Test case ID: TC 6
Test case name: Edit Products
Purpose: Administrator wants to h andle products information.
Prereq: The function is just for administrator.
Test data:
Steps: Steps to carry out the test. See step formatting rules below.
1. Choose one category to edit.
Expected results: Edit shows successfully.
(Error massage if filed nothing).
Test results:
(date/result/tester) 10-09-2010
The page will show the navigation management page.
Shows handle success.
Show the wrong page.
Shen Yeyin

Test case of edit orders
Test case ID: TC 7
Test case name: Edit Orders
Purpose: Adminis trator wants to handle order information.
Prereq: The function is just for administrator.

52
SHEN YEYIN BACHELOR’S THESIS
Test data:
Steps: Steps to carry out the test. See step formatting rules below.
1. Choose one category to edit.
Expected results: Edit shows successfully.
(Error ma ssage if filed nothing).
Test results:
(date/result/tester) 10-09-2010
The page will show the navigation management page.
Shows handle success.
Show the wrong page.
Shen Yeyin

Test case of edit member
Test case ID: TC 8
Test case name: Edit Member
Purpose: Administrator wants to handle member information.
Prereq: The function is just for administrator.
Test data:
Steps: Steps to carry out the test. See step formatting rules below.
1. Check member details and to edit.
Expected results: Edit shows suc cessfully.
(Error massage if filed nothing).
Test results:
(date/result/tester) 10-09-2010
The page will show the navigation management page.
Shows handle success.
Show the wrong page.
Shen Yeyin

Test case of edit management
Test case ID: TC 9
Test ca se name: Edit Management
Purpose: Administrator wants to management information.
Prereq: The function is just for administrator
Test data:
Steps: Steps to carry out the test. See step formatting rules below.
1. Add manager.
2. Change admin password or delet e.
Expected results: Manage shows successfully.
(Error massage if account name or password wrong).
Test results: 10-09-2010

53
SHEN YEYIN BACHELOR’S THESIS
(date/result/tester) The page will show the navigation management page.
Shows handle success.
Show the wrong page.
Shen Yeyin

Test case of logout
Test case ID: TC 10
Test case name: Logout
Purpose: User logs out of the system.
Prereq: This function is for Customer and Administrator.
Test data:
Steps: Steps to carry out the test. See step formatting rules below.
1. Click “Logout button”
2. Go back to the homepage.
Expected results: User logout is successful.
Test results:
(date/result/tester) 10-09-2010
Show the main page.
Shen Yeyin