NURFARAH DIANA BINTI MOHD HASSIM · 2018. 8. 12. · NURFARAH DIANA BINTI MOHD HASSIM BACHELOR OF COMPUTER SCIENCE (INTERNET COMPUTING) UNIVERSITI SULTAN ZAINAL ABIDIN 2018. ONLINE

ONLINE SYSTEM BASED ON E-COMMERCE PLATFORM

NURFARAH DIANA BINTI MOHD HASSIM

BACHELOR OF COMPUTER SCIENCE

(INTERNET COMPUTING)

UNIVERSITI SULTAN ZAINAL ABIDIN

2018

ONLINE SYSTEM BASED ON E-COMMERCE PLATFORM

NURFARAH DIANA BINTI MOHD HASSIM

Bachelor of Computer Science (Internet Computing) Faculty of Informatics and Computing

Universiti Sultan Zainal Abidin, Terengganu, Malaysia

2018

i

DECLARATION This declaration proves the project is done on my own effort with the help and guidance

from my supervisor. This work is a result of my research studies. All Section of the

texts and results have been obtaining from the others source are fully referenced. I

understand the circumstances that I will dealt if any part of my work is plagiarized.

Signature : Supervisor : Mr. Mohd Kamir Bin Yusof

Date : 2018

ii

CONFIRMATION This project proposal that entitled Online System Based on E-Commerce Platform for

The Used Item Shopping Website was prepared and submitted by Nurfarah Diana Binti

Mohd Hassim (Matric Number: BTCL15039816). This thesis has been found the

statisfactory in terms of scope, quality and presentation for subject CSB 35102:

Academic Project Proposal. This report is partial fulfilment of the requirement for

Bachelor of Computer Science (Internet Computing with Honours in University Sultan

Zainal Abidin.

Signature :

Name : Nurfarah Diana Binti Mohd Hassim

Date : May, 2018

iii

DEDICATION

BISMILLAHIRRAHMANIRRAHIM, in the name of Allah S.W.T the most Gracious

and the most Merciful May be His Blessing be upon the Prophet Muhammad S.A.W.

Alhamdulillah, thank to Allah S.W.T, The Almighty for giving me strength,

ability and effort to complete this project in a given time. Without His grace, mercy and

guidance, I would not be able to successfully accomplish this project.

I would like to express my gratitude and appreciation towards my supervisor,

Mr. Mohd Kamir Bin Yusof for his ideas and guidance throughout the whole process in

completing this Final Year Project in time. My due appreciation goes to the member of

panel for their feedback and positive criticism during the presentation that has helped

me to improve my weakness and to rectify somethings that were required to be fix.

My personal gratitude towards my beloved parents for the encouragement and

moral support that made me to successfully accomplish this project. I also would like

to give special gratitude to my fellow FYP group member and my beloved friends for

their encouragement and support during developing this project. All the effort that keep

me on the right track should not be forgotten and my most sincere gratitude is for all of

them.

iv

ABSTRACT

Online system allows users to buy or sell used items over the internet. A person can

either be a seller or customer in order to perform the selling or buying process of used

items when using this website. The major problem when dealing with traditional shop

is that it usually has the restriction on the opening time where the customer has to come

to the shop on the specific operation hours. Next, the offline business cannot be operated

from anywhere because of the geographical restrictions where the traditional store has

their own specific location. Online system based on e-commerce platform is developed

in order to provide the information regarding the item that the seller sold. This website

will let a customer view and purchase used items online. Meanwhile, it also allows seller

sell different type of valuable used items such as fashion, gadget, and bag that are

worthy in the market. Based on the experimental result, this system is able to conduct

online transaction between seller and buyer properly.

v

ABSTRAK

Sistem dalam talian membolehkan pengguna membeli atau menjual barangan

terpakai melalui internet. Seseorang boleh menjadi penjual atau pelanggan untuk

melakukan proses penjualan atau pembelian item yang digunakan ketika menggunakan

laman web ini. Masalah utama ketika berurusan dengan kedai tradisional adalah ia

biasanya mempunyai batasan pada waktu pembukaan di mana pelanggan perlu datang

ke kedai pada waktu yang tertentu. Seterusnya, perniagaan luar talian tidak dapat

dikendalikan di mana-mana sahaja kerana sekatan geografi. Hal ini disebabkan, kedai

tradisional mempunyai lokasi khusus mereka sendiri. Sistem dalam talian berdasarkan

platform e-dagang dibangunkan untuk memberikan maklumat mengenai item yang

dijual oleh penjual. Laman web ini akan membolehkan pelanggan melihat dan membeli

barangan yang dijual di atas talian. Sementara itu, ia juga membolehkan penjual

menjual pelbagai jenis barang yang bernilai seperti fesyen, alat komunikasi dan beg

yang layak berada di pasaran. Berdasarkan hasil percubaan, sistem ini dapat melakukan

transaksi daring antara penjual dan pembeli dengan baik.

vi

TABLE CONTENTS

PAGE DECLARATION i CONFIRMATION ii DEDICATION iii ABSTRACT iv ABSTRAK v CONTENTS vi LIST OF TABLES viii LIST OF FIGURES ix LIST OF ABBREVIATIONS x LIST OF APPENDICES xi

CHAPTER I INTRODUCTION

1.1 Project Background 1

1.2 Problem Statement 2

1.3 Objectives 3

1.4 Scopes 4

1.5 Limitation of Work 7

1.6 Expected Outcome 8

1.7 Report Structure 8

1.8 Summary 9

CHAPTER II LITERATURE REVIEW

2.1 Introduction 10

2.2 Project Research 11

2.3 Overview of Existing System 16

2.4 Comparison of Project Research 23

2.5 Comparison of Existing System 28

2.6 System Comparison 32

2.7 Summary 32

CHAPTER III

METHODOLOGY

vii

3.1 Introduction 33

3.2 Methodology Review 34

3.3 Requirement Analysis 37

3.4 Framework 39

3.5 Context Diagram 43

3.6 Data Flow Diagram Level 0 45

3.7 Data Flow Diagram Level 1 47

3.8 Entity Relationship Diagram 51

3.9 Data Dictionary 54

3.10 Data Decomposition 61

3.11 Summary 65

CHAPTER IV DESIGN

4.1 Introduction 66

4.2 Interface Design 67

4.3 Summary 90

CHAPTER V IMPLEMENTATION AND RESULT

5.1 Introduction 91

5.2 Add to Cart using Cookies 92

5.3 Add to Cart using Cookies in Web Browser 94

5.4 System Testing 96

5.5 System Functionality Testing 96

5.6 Summary 103

CHAPTER VI CONCLUSION

5.1 Introduction 104

5.2 Project Achievement and Contribution 104

5.3 Problem and Limitation 105

5.4 Future Work 106

viii

5.5 Conclusion 106

REFERENCES 107

APPENDICES 110

ix

LIST OF TABLES

TABLE TITLE PAGE 2-1 Comparison of Related Research 23 2-2 Comparison of Existing System 28 2-3 System Comparison 32 3-1 Hardware Requirement 37 3-2 Software Requirement 38 3-3 Admin Table 54 3-4 Seller Table 55 3-5 Customer Table 56 3-6 Item Table 57 3-7 Order Table 58 3-8 Product_order Table 60 5-1 System Functionality Testing for Admin 96 5-2 System Functionality Testing for Seller 99 5-3 System Functionality Testing for Customer 101

x

LIST OF FIGURES

FIGURE TITLE PAGE 3-1 The Waterfall Model 35 3-2 Backend Framework 40 3-3 Frontend Framework 41 3-4 E-Commerce Framework 42 3-5 Context Diagram (CD) 43 3-6 Data Flow Diagram (DFD) 45 3-7 DFD Level 1: Manage Seller Profile 47 3-8 DFD Level 1: Manage Selling Item 48 3-9 DFD Level 1: Manage Customer Profile 49 3-10 DFD Level 1: Manage Purchase 50 3-11 Entity Relationship Diagram (ERD) 51 3-12 Data Decomposition (Main) 61 3-13 Data Decomposition (Admin) 62 3-14 Data Decomposition (Seller) 63 3-15 Data Decomposition (Customer) 64 4-1 Home Page Interface 67 4-2 Seller Registration Interface 68 4-3 Seller Login Interface 69 4-4 Sell Item Interface 70 4-5 View Seller Selling Item Interface 71 4-6 Customer Registration Interface 72 4-7 Customer Login Interface 73 4-8 Shop Interface 74 4-9 Item Detail Interface 75 4-10 Shopping Cart Interface 76 4-11 Checkout Interface 77 4-12 Order Confirmation Interface 78 4-13 View Purchase History Interface 79 4-14 Admin Login Interface 80 4-15 Customer Profile Record Interface 81 4-16 Update Customer Profile Record Interface 83 4-17 Seller Profile Record Interface 84 4-18 Update Seller Profile Record Interface 85 4-19 Seller Selling Record Interface 85 4-20 Update Seller Selling Record Interface 87 4-21 Customer Purchasing Record Interface 88

xi

4-22 Update Customer Purchasing Record Interface 89 5-1 Cookies Method for Add to Cart 94 5-2 Cookies Stored in Array in The Web Browser 95

xii

LIST OF ABBREVIATIONS / TERMS / SYMBOLS

CD Context Diagram DFD Data Flow Diagram ERD Entity Relationship Diagram FYP Final year project PHP Hypertext Pre-Processor

xiii

LIST OF APPENDICES

APPENDIX TITLE PAGE A Appendix 1 110

1

CHAPTER 1

INTRODUCTION

1.1 PROJECT BACKGROUND

E-commerce has become one of the most famous method of making money online these

days. It also is a fast gaining ground as an accepted and used business paradigm. Electronic

commerce is defined as buying and selling of product, services or information via computer

networks, mainly the Internet. E-commerce is subdivided into three categories: business to

business or B2B (Cisco), business to consumer or B2C (Amazon), and consumer to consumer

or C2C (eBay) [5]. E-commerce is widely considered the buying and selling of products over

the internet, but any transaction that is completed solely through electronic measures can be

considered e-commerce. As the fastest growing facet of the Internet and other information

technologies, E-Commerce offers functionality and new ways of doing business that no

2

company can afford to ignore [1]. This application used consumer-to-consumer (C2C) business

model where C2C facilitates the transaction of products or services between consumer.

Online E-Commerce website such as Corousell or eBay play important platform for

user to buy or sell used items online. Based on that, I decided on develop a useful online

ecommerce website where process of selling and buying used or prelove item such as used

clothes, devices and bags. The online system based on e-commerce platform which known as

the buy and sell website is design for user who want to sell or buy prelove or used item for

cheaper price.

Buy and sell provides some main modules such as users (sellers) can add list of used

item that they want to sell to the online market. Meanwhile, users (customers) can search their

desired used or prelove item in the item list in order to purchase it. User can also view the items

information regarding its’ condition before decide on buying it. Lastly, after add to cart of their

wish list, customers can make confirmation order for the used item that they have purchased.

3

1.2 PROBLEM STATEMENT

Nowadays, e-commerce has become well-known worldwide. People tend to buy or

sell things online because it is very convenient to use and faster responses. The problem arise

as the users (sellers) requires great deal of time and effort in order to sell and promote their

prelove item to the business market. Meanwhile, by just selling the used item through the

wellknown online website like eBay, Corousell, Mudah.my and many more, the seller can just

sit back in their home and wait until someone purchase their used item. It is a better way to

gain money faster. Next, the users (customers) have to come to the store on specific time as

offline store usually have restriction on the opening time. This is because most stores have their

restriction on the opening time, and moreover people is busy nowadays with their own personal

life and do not have time to go to store on the specific time. That why they tend to buy online

because it does not have restriction time and people can buy anytime and anywhere. Lastly, the

offline business cannot be operated from anywhere because of the geographical restrictions.

This is because traditional store has their own specific location and that is the reason why

people love to shop online or through mobile phone, imagine that they have to drive for hours

to just to walk in to the store. Hence, the online shop whether through web or mobile application

offer a better shopping experience because of the variety of products, unlimited time to shop

and can access anytime and anywhere.

4

1.3 OBJECTIVES

The objectives of developing this application are:

1. To study the ecommerce platform when designing and other related to e-commerce

application.

2. To design an e-commerce an online system for prelove items based on e-commerce

platform.

3. To develop an online system based on e-commerce platform.

1.4 SCOPE

1.4.1 Scope of User

This documentation explains the boundaries of the system, establishes responsibilities of

task that need to be completed.

1.4.1.1 Admin

Admin is the person who will manage and maintain the whole system.

Admin’s Roles:

• Manage Seller and Customer Profile (view and delete)

• Display Seller selling record

5

• Display Customer purchasing record

1.4.1.2 Seller

Seller is the person who can add item that they want to sell.

Seller’s Roles:

• Register and sign in the system

• Add list of used item that need to sell

• View selling history

1.4.1.3 Customer

Customer is the person who can purchase the item and make payment.

Customer’s Roles:

• Register and sign in the system

• Carry out the process of buying used item

• View purchased history

6

1.4.2 Scope of System

These are the system scope including:

1.4.2.1 User Registration

User (Seller and Customer) need to register through this system in order to buy or

sell their desired used item. If they have been registered, they can just login through

this website. Meanwhile, the admin just login through their web based system in

order to manage and monitor the e-commerce web system.

1.4.2.2 Selling Used Item

The seller can create, update and delete the list of used item that they want to sell.

1.4.2.3 Item Category

Customer can view items by the item category.

1.4.2.4 Add to Cart

This is the process of buying used item made by the customer. They can add to cart

to their wish list on which items that they want to buy.

1.4.2.5 Make Order

7

The customer can make order after purchasing the used items.

1.5 LIMITATION OF WORK

These are the limitations of this proposed project:

1. This application carrying out process of buying and selling limited for used item only.

2. The item category limits for specific items only such as fashions, devices and bags.

3. This application did not have payment management.

4. This application did not have shipping management.

1.6 PROJECT SCHEDULE

The project plan is designed to the flow of activities which involve in developing this

project. For a better view of the activities, refer to Appendix A.

8

1.8 EXPECTED OUTCOME

There are the following expected outcome from this project:-

i. Online application for buy and sell prelove items based on e-commerce

platform.

ii. A proposed of e-commerce platform for selling and buying prelove items.

1.7 STRUCTURE OF THESIS

This thesis consists of five (5) chapters that have been discussed. The Introduction of

the project background, problem statement, the objectives of the project, project scope and the

organization report are stated in Chapter 1. Chapter 2 is basically describes the idea of the

whole project. The second chapter basically describes the literature review that discuss the

technique and theory that have been carried out by another researcher and existing system that

related to this proposed project. Based on the literature review, it will give a better

understanding about the project idea. Meantime, the methodology used to develop this project

is been discussed in Chapter 3. It also discusses the method or technique used for this project.

It also includes CD, DFD, ERD, Framework, data dictionary and data decomposition. Chapter

4 describes the design and implementation of the project. Chapter 5 describes the

9

implementation phase and the test case of the project. Finally, Chapter 6 is the conclusion of

the overall project followed by the references.

10

CHAPTER 2

LITERATURE REVIEW

2.1 INTRODUCTION

This chapter describes and explain the selected literature review about the technique used

in the development of the online system based on the e-commerce platform for used item

shopping website. This topic also focused on the research that related directly either indirectly

to the proposed project. The purpose of literature review is to identify research methods and

strategies that will be used in development of the project process. The previous and current

system will also be discussed in this chapter. Therefore, the literature review is carried out to

be used as reference in determining the best approach to the development system. Some

research has been done in order to give a better understand about this proposed project. The

11

overview of the existing system is determined and thoroughly studied regarding the used item

online shopping application.

2.2 PROJECT RESEARCH

2.2.1 The Design and Implementation of an E-Commerce Site for Online Book Sales

Based on this thesis, this project deals with developing an e-commerce website for

Online Book Sale. It provides the user with a catalog of different books available for purchase

in the store. In order to facilitate online purchase a shopping cart is provided to the user. The

system is implemented using a 3-tier approach, with a backend database, a middle tier of

Microsoft Internet Information Services (IIS) and ASP.NET, and a web browser as the frontend

client.

This project is implement using ASP.NET as the technology whereas ASP.NET has

several advantages such as enhanced performance, 66 scalability, built-in security and

simplicity. To build any web application using ASP.NET we need a programming language

such as C#, VB.NET, J# and so on. For the client browser to connect to the ASP.NET engine

we used Microsoft’s Internet Information Services (IIS) as the Web Server. ASP.NET uses

ADO.NET to interact with the database as it provides in-memory caching that eliminates the

12

need to contact the database server frequently and it can easily deploy and maintain an

ASP.NET application. MySQL was used as back-end database since it is one of the most

popular open source databases, and it provides fast data access, easy installation and simplicity.

This thesis described a good shopping cart must be user-friendly. It should be

convenient for the customer to view the contents of their cart and to be able to remove or add

items to their cart. The development of this project had a precise knowledge about how

ASP.NET is used to develop a website, how it connects to the database to access the data and

how the data and web pages are modified to provide the user with a shopping cart application

[1].

2.2.2 An E-Commerce Web Application for a Small Retail Shop

Based on this thesis, objective of this thesis project was to develop an e-commerce Java

web application for a small retail store where the store owner sells the products online. The

application allows the owner to manage products, customers, and orders. Also, with the

application customers make orders and pay for the ordered products. The project uses PayPal

Express Checkout as its payment solution. In addition, the web store offers customers and

visitors to the site an opportunity to subscribe to an email list in order to get news about new

13

products and special offers. Lastly, the application sends an automatic email confirmation after

completing an order or subscribing to an email list.

The development of this project was carried out using Eclipse IDE using the Java

programming language. The database communication of the application was implemented by

using JPA and JPQL, and MySQL database was used to store the application data. The

application was structured according to the Model-View Controller (MVC) pattern. The model,

the view and the controller layers were implemented by using JavaBeans, JSPs, and Servlet

API respectively. The payment transaction of the application was carried out on PayPal

Sandbox (testing environment) with different NVP API operations [2].

2.2.3 E-Commerce Web Application for Sansaar Oy

This thesis explains about Sansaar Oy which is a company operating in Finland with

the main motto of humanely trading for a sustainable environment and common prosperity.

Sansaar Oy Company has been selling handmade products, such as furniture, bags, toys and

accessories through their online store. The existing online store of Sansaar Oy is expensive to

maintain and it lacks many features, due to which the company has not been able to grow their

business as expected. Sansaar Oy wanted to establish a new online store which would be

inexpensive and easy to maintain.

14

The main aim is to find the best solutions to fulfil the requirements related to the e-

commerce online store of Sansaar Oy and to implemented those solutions to establish a new e-

commerce online store for the company. The new features have many marketing tools, such as

newsletter, referring a product through an email, a wish listing feature, separate and easily

visible pages to feature new, promotional and discounted products and static blocks on the

home page to attract customers to buy a specific product. In the new online store, the store

owner can keep track of customers, customers’ behaviours, orders and sales from the admin

panel very easily, which will help to manage the business and make decisions in the future. In

the existing online store, customers are not able to select the right products in many cases and

they need to communicate through email with the store owner just to complete the purchase

but in the new online store it has created customizable products in a way that without any extra

communication both the customers and the store owner can have a clear idea about the products

they are dealing with [3].

2.2.4 Analysis on Online Payment System of E-Commerce

Online payment is a form of electronic payment, which is provided by a third-party

payment interface between banks for real-time payment. Compared with the traditional

15

payment, online payment systems are more convenient, fast, efficient and economical. Users

can use their own PC or mobile phone with Internet to complete the entire payment process in

a very short time [6].

On this thesis, I will focus on the online payment method when using e-commerce

system. Online banking is a very common way of online payment systems. The user must open

an online bank account. This payment is directly paid by credit card or even debit card. And

now third-party online payment systems such as PayPal are also very popular in e-commerce.

Third party payment is an independent organization, which provides the network payment

mode for transaction platform between bank and online payment platform. [7].

There are several types of online payment system which are focuses in this research.

First is the Net Bank, PayPal, Google Wallet, Amazon Payment, AliPay and others. Debit card

(Visa or MasterCard) and Net Bank were the most popular online payment systems while for

third-party online payment system are PayPal and AliPay [8].

2.2.5 Consumer-To-consumer (C2C) Electronic Commerce: The Recent Picture

The consumer-to-consumer is the form of ecommerce that facilitated in large part by

website offering free classified advertisements, auctions, forums, and individual pages for start-

16

up entrepreneurs.C2C is recently supported by large websites as it gone through tremendous

changes in technology as well as increase in the market size. This paper discusses the origin,

definition, business model, advantages and disadvantages of C2C ecommerce.

C2C ecommerce differs from a business-to-business (B2B) or business-to-consumer

(B2C) model consumes interact directly with each other. However, a business does operate the

online platform on which C2C transaction takes place. Generally, an intermediary/third party

maybe involved, but the purpose is only to facilitate the transaction and provide platform for

people to connect with each other.

The C2C model involves transaction between consumers where the buyer can purchase

products from multiple sellers. Meanwhile, the consumer can both act as buyer as well as seller.

The online market place will allow buyer to browse products wish list item so that they can get

best price and offers from sellers. The backend interface includes features for administration

to manage buyer and seller accounts, payment, settings and others.

C2C ecommerce is making progress and more positive results to be seen in the future.

This are because ecommerce system is always available so that customer can have access

whenever they want to shop and customer can directly contact sellers and do without an

intermediary [9].

17

2.3 OVERVIEW OF CURRENT SYSTEM

These are the several current applications that is quite similar as the application that I want

to develop for my final year project.

2.3.1 Zalora Website

ZALORA is a fashion E-commerce website which allows customers to shop the latest

fashion styles and trends from their collection of over 500 brands. By using Zalora, user can

select the particular category in order to search for the product that they want to buy. Then,

after selecting the suitable size, user can click “Add to Shopping bag”. Next, user can click

“checkout” on the shopping bag in order to purchase the product. Before proceed to payment,

they have to log in first in order to continue. After that, user must choose the shipping address

and continue. Then, choose the payment method (COD, Bank Transfer, Credit Card) and click

“review order”. In this step, user can change the previous information. At last, once confirm

with the order, user can click the “Purchase” button and a confirmation email or SMS with the

expected delivery time and booking code will send to them immediately.

The speciality of Zalora website is it has the pinch-to-zoom function when viewing

products images and the colour button on the right side of the product shows another indicator

18

where customers are able to view the other colour options for this particular product by clicking

the button. Meanwhile there is some limitation of Zalora website. First of all, when customers

have added items to their shopping bag whilst through the website, but it does not sync with

the information and when customers intend to continue shopping through their computer, they

might need to search for the items again instead of continuing it off.

2.3.2 Corousell Website

Carousell website is the top community marketplace website that lets users to buy and

sell their products from multiple types of categories such as fashion, clothes, accessories,

beauty products, furniture, art, books, branded goods, cars, bikes, and antiques to houses.

Besides, in order to sell an item, what users can do is just snap a photo of the unused and

secondhand clutter, then post it. It is fast, convenient and easy to use as user can also chat with

the seller about the item they want to buy.

How Corousell works is firstly users can choose the product they want by clicking the

particular item or using the search bar or filter to find the product. When users want to buy the

product, they can click the “Buy Now” button and an offer model will pop up. This offer model

allows user to bargain for the actual price of the particular item. Once user set the bargain price,

they can click the tick icon on the top right corner in order to continue. The offer price message

19

will then send to the seller. If users have any inquiry, they can click the “Chat” button in order

to have a private chat with the seller. At last, once seller received the offer price, the seller will

contact the user for further discussion. Once the seller accepts the offer, then they might meet

up or cash on deliver for the product as Carousell is not involved in payment.

Strength of Corousell website is it provides two different roles which are buyer and

seller. Instead of only buying product like other shopping website, user now can also sell their

product in the app. Besides, some users will use this website to trade item between sellers

instead of only buy or sell. User can bargain the actual price with the seller in a private chat. It

provides flexibility for the users where they might have the chance to get a lower price for the

product because most of the shopping website does not provide chat box. Corousell also

provides a convenient feature where users can set the nearby location in order to filter the

products which are having the same location.

Limitation of Corousell is due to there is no payment platform involved, the only way

to buy a product is to go through meet up or cash delivery. In that case, frauds or prank will

occur in the app where some users will ask the seller for meet up but they do not show up in

the end. Other than that, some sellers will retail some fake products to scam the users by asking

them to transfer the money first but do not deliver the product.

20

2.3.3 eBay Website

In the “one buyer – many prospective sellers”, the buyer requests bids from as many

possible sellers before concluding a purchase. This type of auction is known as reverse auction,

because the buyers seek bids that are the lowest rather than the highest price. This type of bids

is popular amongst B2B and G2B (Government to business) e-Commerce. Some C2C auctions

do cater for reverse auction. For example, eBay allows any buyer to leave a request for bid,

and sellers who are able to meet that specifications contact the buyer [13].

eBay website allows users to search, bids and sell on the products they want. It

uniqueness is that users do not only can buy and sell, but they can also bid on their desired

products. In eBay, it also offers different kind of search function such as barcode scanner

search, voice search and image search. If users have not decided to buy the particular product,

they can save their desired product by clicking the “WATCH” button. If they decided to buy

the products, they can just click the “Buy it now” button. In eBay, it provides the payment

method using PayPal where user have to login to their PayPal account in order to place the

order. Furthermore, for the selling part, at first, users have to write a descriptive title of their

selling product. Then, the system will help users to locate the category which the product is

belonged. Then users have to fill in a number of details in order to sell the product.

21

The strength of eBay website is barcode scanner is a very useful tool where users can

immediately discover whether someone is currently selling the products you need. It saves a

lot of the effort by scrolling through hundreds of product options. Moreover, it also has voice

search function where users just have to voice record the products name and all of the particular

products will be displayed out. The eBay website provides a PayPal method which allows users

to make a purchase by just entering the password. It certainly reduces a lot of time in order to

let the users to buy the products in a fast way. Indeed, eBay also have the automatic bidding

function. In other words, eBay app makes the system so convenient where users just have to

set the maximum bidding price, then it will automatically help users to bid the particular

product.

Meanwhile, it limitation is less flexibility whereas when user want to sell their item

they only can take certain kinds of payment, the keywords for the title is limited, it prevents

users from cross marketing to other platforms and even restricted users to enter only certain

text in the listings. Thus, users have to fill in a lot of information in order to sell products.

22

2.3.4 Mudah.my

Mudah.my is one of the largest online shopping platforms in Malaysia for product

trading. Basically, this website is quite similar with the Carousell in terms of the functionality

where this website allows users to sell their products either is brand new or is second hand

goods. Mudah.my is an online marketplace that connects buyers and sellers in Malaysia.

It is a partnership between 701Search of Singapore and Telenor ASA of Norway.

Mudah.my is reportedly one of the most visited web site in Malaysia. It offers a wide range

of products ranging from office equipment to automotive and electronics [12].

When using this website, users can choose the products categories by clicking the

various icon at the below of the landing page. Next, users can narrow down their search area

by setting up the location. Then, the app will display all kinds of products that user requested.

After users choose their particular product, then it will move to the product detail page. Users

can browse through the detail information and choose whether they want to call, SMS, email

or use the app chat room. Besides, for the selling part, same like Carousell, users are required

to fill in all of the information that is needed.

Mudah.my has simple and clear interface unlike other websites. Besides, it provides

simple guidelines for the users in the first time in order to let users to understand all of the

23

functions and features. Meanwhile, it limitation is require too many steps in order to sell

products. In order to develop a good interactive view and user-friendly website, the number of

inputs must be optimized and restricted. The reason is because users is lazy and might not

interested to sell a product when there are so many steps are required to fill up.

2.4 COMPARISON OF RELATED RESEARCH

Table 2-1: Comparison of Related Research

No. Author Title Description

1. Swapna Kodali,

2007

The Design and

Implementation of

an E-Commerce Site

for Online Book

Sales

• This project

developed e-

commerce website

for Online Book

Sale.

• The system is

implemented using a

3-tier approach, with

a backend database,

middle tier of

Microsoft Internet

Information Services

(IIS) and ASP.NET,

24

and a web browser

as the frontend

client.

2. Babatunde Julius

Adewumi

, 2007

An E-Commerce

Web Application for

a Small Retail Shop

• This project is to

develop e-commerce

Java web application

that uses JavaBeans,

JSPs, and Servlet

API for a small retail

store where the store

owner sells the

products online.

• The project uses

PayPal Express

Checkout as its

payment solution.

• This project can

send an automatic

email confirmation

after completing an

25

order or subscribing

to an email list.

3. Subash Basnet,

2017.

E-commerce Web

Application for

Sansaar Oy

• Sansaar Oy is a

company operating

in Finland with the

main motto of

humanely trading for

a sustainable

environment and

common prosperity.

• Sansaar Oy

Company has been

selling handmade

products, such as

furniture, bags, toys

and accessories

through their online

store.

• The new features

have marketing

tools, such as

newsletter, referring

a product through an

26

email, a wish listing

feature, separate and

easily visible pages

to feature new,

promotional and

discounted products.

5. Wenjing Yang,

2017.

Analysis on Online

Payment System of

E-Commerce

• Online payment is a

form of electronic

payment, which is

provided by a third-

party payment

interface between

banks for real-time

payment.

• Third party payment

is an independent

organization, which

provides the network

payment mode for

transaction platform

between bank and

online payment

platform.

• Examples of online

payment used which

are Net Bank,

PayPal, Google

Wallet, Amazon

Payment, AliPay.

27

• Being user-friendly

and less time

consuming than

manual processing,

electronic commerce

helps a business

organization expand

its market reach

expansion.

5. Cudjoe Dan, 2014. Consumer-To-

consumer (C2C)

Electronic

Commerce: The

Recent Picture

• C2C ecommerce

differs from a

business-to-business

(B2B) or business-

to-consumer (B2C)

model consumes

interact directly with

each other.

• The C2C might

involve

intermediary/third

party but the purpose

is only to facilitate

the transaction and

provide platform for

people to connect

with each other.

• The C2C model

involves transaction

between consumers

where the buyer can

purchase products

28

from multiple

sellers.

• Meanwhile, the

consumer can both

act as buyer as well

as seller.

2.5 COMPARISION OF THE EXISTING SYSTEM

The Table 2-2 shows the comparison of existing system. This table analyses on the

existing system based on their work flows, strength and weakness. Besides, there are some

similar project scopes and objectives between these existing systems.

Table 2-2: Comparison of existing system

No.

Application

Name

Description

Advantages

Disadvantage

1. Zalora • Zalora is a

fashion E-

commerce

website that

• It has the pinch-to-

zoom function when

viewing products

images

• when customers

have added

items to their

shopping bag

29

allows

customers to

shop the

latest fashion

styles and

trends.

• The colour button on

the right side of the

product shows

another indicator

where customers are

able to view the

other colour options

for this particular

product by clicking

the button.

but it does not

sync the

information

• Customers that

intend to

continue

shopping might

have to search

for the items

again instead of

continuing it

off.

2

Corousell

• It lets users to

buy and sell

their products

from multiple

types of

categories

such as

fashion,

clothes,

accessories,

beauty

products,

• It provides two

different roles which

are buyer and seller.

• User can also sell

their product in this

website.

• Besides, some users

will use this website

to trade item between

sellers instead of only

buy or sell.

• Due to there is

no payment

platform

involved, the

only way to

meet up or cash

delivery.

• In that case,

frauds or prank

will occur.

• Some sellers

will retail some

30

furniture, art,

books,

branded

goods, cars,

bikes, and

antiques to

houses.

• User can bargain the

actual price with the

seller in a private

chat.

• users can set the

nearby location in

order to filter the

products which are

having the same

location.

fake products to

scam the users.

3

eBay

• It allows

users to

search, bids

and sell

products.

• It has barcode

scanner where users

can immediately

discover whether

someone is currently

selling the products

• it also has voice

search function

where users just have

to voice record the

products.

• It is less

flexibility

whereas when

user want to sell

their item they

only can take

certain kinds of

payment, the

keywords for

the title is

limited, it

31

• Provides a PayPal

payment method.

• eBay also have the

automatic bidding

function.

prevents users

from cross

marketing to

other platforms

and even

restricted users

to enter only

certain text in

the listings.

• Users have to

fill in a lot of

information in

order to sell

products.

4

Mudah.my

• Mudah.my is

one of the

largest online

shopping

platforms for

• It is simple and clear

interface unlike other

websites.

• Besides, it provides

simple guidelines for

• It requires too

many steps in

order to sell

products.

32

product

trading.

• It is quite

similar with

the Carousell

that allow

user to sell

and buy

products.

the users to

understand all of the

functions and

features.

2.6 System Comparison

The Table 2-3 shows the system comparison. From the table, it is clear that the eBay has

the automated bidding session compared to other system. Automated bidding allows users to

bid a particular product automatically by setting the maximum of bidding value. However,

eBay and Zalora do not have the real time chat functionality like Corousell and Mudah.my.

The real time chat allows the buyers and sellers to chat and deal in real time.

33

Table2-3: System Comparison

Criteria ZALORA Carousell eBay Mudah.my

Automated

Bidding Session

Yes

Real Time Chat Yes Yes

Add-to-Cart Yes Yes

Payment System Yes Yes

COD Details Yes Yes Yes Yes

2.7 SUMMARY

This chapter explains the research studies that being used in developing the online

system based on the e-commerce platform. The technique is fully referred to the previous

research articles and journals. The existing system that are quite similar to this project are

also being described.

34

CHAPTER 3

METHODOLOGY

3.1 INTRODUCTION

This chapter will explain the details of the methodology used for this project. The

methodology is defined as the rationale for the application of specific procedures or techniques

used to identify, select, and analyse information applied to understanding the research problem,

thereby, allowing the reader to evaluate a study of overall validity and reliability [1]. This

chapter play an important part because it is to make sure that the system can be accomplish

successfully. There are variation of Software Development Life Cycle (SDLC) methods that

can be used to assist the project development. Hence, the Waterfall Model is used for this

online system based on e-commerce platform. This method is chosen because it is more

35

organized and structured. It will be described in this chapter with more explanation about every

phase that involve in this project development.

Next, this section also describes the implementation design of the system. The system

design consists of Context Diagram (CD), Data Flow Diagram (DFD), Entity Relationship

Diagram and system framework. The complete data flow analysis includes: Data Flow

Diagram, Data Dictionary and Process Specifications [11].

3.2 METHODOLOGY REVIEW

The Waterfall Model was the first process model to be introduced by. It also the earliest

SDLC approach that was used for software development. That why this model is used to

develop this project because of its simplicity. The waterfall model is divided into six phases

which are Requirement Analysis, System Design, Implementation, Testing, Deployment, and

maintenance. Waterfall approach also referred as Linear-Sequential Life Cycle Model where

the outcome of a phase acts as the input for the next phase sequentially. That it is sequential

design process as it seen as flowing steadily downwards like waterfall. This waterfall model

must be completed by stage before moving to the next phase and there is no overlapping in the

phases which means that any phases will only start if the previous one is completed.

36

Figure 3-1: The Waterfall Model

3.2.1 Requirement Analysis

Requirement analysis is the first phase in waterfall model which related to the

understanding of what need to be design, what is the function, purpose and other requirements.

The requirements are analysed by doing a research on the existing system and documentation.

It also explains the functionality and the main process of the system.

37

3.2.2 System Design

All the specified documentation from the first phase is used for this phase in order to

prepare the system design. The context diagram (CD), Data Flow Diagram (DFD), and Entity

Relationship Diagram (ERD) is built for further clarification about this project. The database

and interface are designed based on the process clarify in the system. This phase also helps to

identify and clarify the system requirements accompanied by the documentation which allow

to review it for validation.

3.2.3 Implementation

From the system design phase, small programs called unit are developed. This project

is developed using SQL server, HTML, CSS and PHP. The development of the system is based

on the database and interface design in the design phase.

3.2.4 Testing

In testing phase, the system will be tested after the implementation is completed. There

are two type of testing which are black-box testing and white-box testing. This testing phase is

to find the error occur in the system and to determine whether the system meets it requirement.

38

3.2.5 Deployment

Once the functional and non-functional testing is done, the system is then deployed to

the client environment. Then, it reviews whether the system meets the all the project goals or

not.

3.2.6 Maintenance

Maintenance is the last phase of the waterfall model. This phase measures the

effectiveness of the system and to evaluate the system potential enhancements. This phase

purpose is to improve the system by determine how well the system meets it objectives and

provide the lessons learned for future work.

3.3 REQUIREMENTS ANALYSIS

3.3.1 Software and Hardware Requirement

This section will show the list of all software and hardware that were involved in the

development process.

39

3.3.1.1 Hardware Requirement

Table 3-1: Hardware Requirement

No. Hardware Description Functionality

1. Laptop • Model:

Macbook Air

• Processor:

1.8GHz Intel Core i5

• RAM:

8GB

• SSD:

128GB

• Use to develop the

Buy&Sell

website.

2. Printer • Model:

HP Deskjet 2135

Series

• To print the

documentation of

the project

proposal.

3. Hard Disk • Model:

Seagate Portable Drive

• To back-up the

project.

40

3.3.1.2 Software Requirement

Table 3-2: Software Requirement

No. Software Description

1. phpmyadmin • System database application.

2. Sublime

• Implementation of the PHP coding.

4. Microsoft Word for Mac

• Preparation of the documentation of

project proposal.

5. Microsoft PowerPoint for

Mac

• Preparation of the presentation of

the project proposal.

6. Edraw Max

• Design of the ERD, Framework, CD

and DFD.

41

3.4 FRAMEWORK

3.4.1 Backend Framework

Figure 3-2: Backend Framework of Online System Based on E-Commerce Platform

Figure 3-2 shows the backend structure of the Online System Based on E-Commerce

Platform for the used item shopping website. The Web Client is representing the admin’s

backend structure where it requests data from PHP only and PHP will request DB queries from

SQL database. Then, the SQL database will return data to PHP and PHP will response based

42

on what web client request. Meantime, the customer and seller backend structure where its

request data from PHP then PHP will request DB queries from SQL database just like the

admin backend structure. Next, SQL database will return data to PHP and then its will response

based on what web client requested.

3.4.2 Frontend Framework

Figure 3-3: Frontend Framework of Online System Based on E-Commerce

Platform

43

Figure 3-3 which explains the general structure of the Online System Based on E-

Commerce Platform for used item shopping website. The colour ‘Peach’ is representing

customer as a user and which process part that he/she can accomplish. The customer has to

login in order to access this web based system. However only registered customer is able to

buy and make payment of the used items.

The colour ‘Green’ is representing seller as a user and which process or tasks he/she

can accomplish. Same as the customer, seller has to login into this web based system and only

registered seller can sell his/her used item through this system.

Meanwhile, the colour ‘Yellow” represents the admin of the system and what process

that he/she can perform. In order to access the web based system, the admin has to login into

the system. Then, the system will display the admin interface. The admin able to view the seller

record, customer record, seller selling record, and customer purchasing record.

44

3.4.3 E-Commerce Framework

Figure 3-4: E-commerce framework

The figure above shows the process of e-commerce framework. The product catalogue is

made up of all the information needed to present any product to the customer and to complete

a sales transaction online. Then, in order for the shopping cart to function properly, the user's

computer must be set to allow "cookies". The checkout system allows customers to select

products by clicking an "add to cart" button and then enables them to pay for these products.

Lastly, they can view what they have been purchased.

45

3.5 CONTEXT DIAGRAM (CD)

Figure 3-5: Context Diagram

Context Diagram shows the interaction in the system. Figure 3-4 explains the relations

between system with customer, seller, and admin and the central process. The customer has

two outgoing entities which are the CUSTOMER DETAILS and the CUSTOMER BUYING

DETAILS, and has two ingoing entities which are the CUSTOMER RECORD, and

CUSTOMER BUYING RECORD. The seller also has two outgoing entities which are the

SELLER DETAILS, and ITEM DETAILS, and has two ingoing entities which are the

SELLER RECORD, and ITEM RECORD. The admin has five ingoing entities which are the

ADMIN RECORD, SELLER DETAIL, CUSTOMER DETAIL, ITEM DETAIL, and

CUSTOMER BUYING DETAIL. Moreover, the admin’s outgoing entities are the ADMIN

46

DETAILS, SELLER RECORD, CUSTOMER RECORD, ITEM RECORD, and CUSTOMER

BUYING RECORD.

47

3.6 DATA FLOW DIAGRAM (DFD) LEVEL 0

Figure 3-6: Data Flow Diagram Level 0

48

Figure 3-5 shows the flow of the processes involve in the system. These shows the

details functionality that stretch out a better understanding of the system tasks. There are three

entities involved in this system which are the seller, customer, and admin. There are seven (7)

processes consists in this Online System Based on E-Commerce Platform which are MANAGE

SELLER PROFILE, MANAGE SELLING ITEM, MANAGE CUSTOMER PROFILE,

MANAGED PURCHASE, ADMIN LOGIN, and MANAGE RECORD. It also has six (6) data

stores which are SELLER, ITEM, CUSTOMER, ORDER, PRODUCT_ORDER, and ADMIN.

These are the DFD process of this project:-

1. There are two major processes involved for seller which are the MANAGE SELLER

DETAILS, and MANAGE SELLING ITEM. Information that has been processed of

managing seller detail will be stored in D1-SELLER data store. Next, the seller can

MANAGE SELLING ITEM where seller can enter the item that he/she wants to sell.

The information processed will be stored in D2-ITEM data store. The output of this

process is used for the record for admin.

2. There are two major processes involved for customer which are the MANAGE

CUSTOMER PROFILE, and MANAGE PURCHASE. Information that has been

processed of managing customer detail will be stored in the D3-CUSTOMER data

store. The information of managing purchase will be stored in the D4-ORDER data

store meanwhile the information of managing purchase item will be stored in the D4-

PRODUCT_ORDER data store.

49

3. The admin required to login to the system which the admin data is stored in D6-

ADMIN. Next, the admin will retrieve all the information in D1-SELLER, D2-ITEM,

D3-CUSTOMER, D4-ORDER, D5-PRODUCT_ORDER. The admin allowed to view

the seller details, customer details, customer purchasing details, and seller selling

details.

3.7 DATA FLOW DIAGRAM (ERD) LEVEL 1

The Data Flow Diagram (DFD) Level 1 shows how the system is divided into few sub-

processes. Each deal with one or more data flows from or to an external agent, which provide

all the data functionality of the whole system.

50

3.7.1 Process 1.0: Manage Seller Profile

Figure 3-7: DFD Level 1 for process 1.0: Manage Seller Profile

The Figure 3-6 shows the DFD Level 1 for Manage Seller Profile. The seller can add

seller details and update seller details. All the program data will be stored in Seller.

51

3.7.2 Process 2.0: Manage Selling Item

Figure 3-8: DFD Level 1 for process 2.0: Manage Selling Item

The Figure 3-7 shows the DFD Level 1 for Manage Selling Item. The seller can add

item details, update item details, and delete item details. All the program data will be stored in

Item.

52

3.7.3 Process 3.0: Manage Customer Profile

Figure 3-9: DFD Level 1 for process 3.0: Manage Customer Profile

The Figure 3-8 shows the DFD Level 1 for Manage Customer Profile. The seller can

add customer details and update customer details. All the program data will be stored in

Customer.

53

3.7.4 Process 4.0: Manage Purchase

Figure 3-10: DFD Level 1 for process 4.0: Manage Purchase

The Figure 3-9 shows the DFD Level 1 for Manage Purchase. The customer can view

item list which the item details will be retrieve in the Item data store. Then, the customer can

add to cart where the add to cart process is by using cookies. Then, customer can update cart,

54

and delete cart. After checkout, all the program data will be stored in Order. Then the order

details will be retrieve by product_order as well as the item details.

3.8 ENTITY RELATIONSHIP DIAGRAM (ERD)

Figure 3-11: Entity Relationship Diagram

Figure 3-11 shows the relationship between those entities which relate to one another.

There are five (5) entities which consists of Seller, Customer, Item, Cart, Payment.

55

Interaction of Admin with Seller

• One to many relationship

• One admin can manage many sellers

• In Seller: user_id (primary key)

• In admin: admin_id (primary key)

Interaction of Admin with Customer


• One admin can manage many customers

• In Customer: user_id (primary key)

• In Item: admin_id (primary key)

Interaction of Seller with Item


• One seller can sell many items

• In Seller: seller_id (primary key)

• In Item: item_id (primary key)

56

Interaction of Customer with Order

• One to one relationship

• One customers can purchase item with one order

• In Customer: cust_id (primary key)

• In Item: order_id (primary key)

Interaction of Order with Product_order

• One to one relationship

• One order can have many product_order

• In Seller: seller_id (primary key)


• In product_order: order_id (foreign key)

Interaction of Item with Product_order

• Many to one relationship

• Many items will be managed in one product_order


• In product_order: id (primary key)

• In product_order: order_id (foreign key)

57

3.9 DATA DICTIONARY

3.9.1 Table of Admin

Table 3-3: Admin Table

Column Type Null Key Default Comment

admin_id Varchar no Primary key

admin_username Varchar no

password Varchar no

The table 3-3 shows the data dictionary for Admin. The table contain 3 rows. Those

rows consist of ADMIN_ID, ADMIN_USERNAME, AND ADMIN_PASSWORD. The

primary key is the ADMIN_ID.

58

3.9.2 Table of Seller

Table 3-4: Seller Table


seller_id Varchar no Primary key Primary key

for Seller

identification

password Varchar no Security for

Seller

seller_name Varchar no

email Varchar no

no.tel Varchar no

business_type Varchar no

The Table 3-4 shows the data dictionary for Seller. The table contain 6 rows. Those

rows consist of SELLER_ID, SELLER_PASSWORD, SELLER_NAME, SELLER_EMAIL,

SELLER_NO.TEL and SELLER_TYPE. The primary key is the SELLER_ID.

59

3.9.3 Table of Customer

Table 3-5: Customer Table


cust_id Varchar no Primary key Primary key

for Customer

identification

password Varchar no Security for

Customer

cust_name Varchar no

email Varchar no

no.tel Varchar no

country Varchar no

The Table 3-5 shows the data dictionary for Customer. The table contain 6 rows. Those

rows consist of CUST_ID, CUST_PASSWORD, CUST_NAME, CUST_EMAIL,

CUST_NO.TEL and CUST_COUNTRY. The primary key is the CUST_ID.

60

3.9.4 Table of Item

Table 3-6: Item Table


item_id Varchar no Primary key Primary key

for Item

identification

item_name Varchar no

item_desc Varchar no

category Varchar no

price Double no

brand Varchar no

images Varchar no

user_id Varchar no Foreign key Foreign key

to seller_id

61

in seller

table.

The Table 3-5 shows the data dictionary for Item. The table contain 5 rows. Those rows

consist of ITEM_ID, ITEM_NAME, ITEM_DESC, ITEM_CATEGORY, ITEM_PRICE,

ITEM_BRAND, ITEM_IMAGES and USER_ID. The primary key is the ITEM_ID while

USER_ID is the foreign key.

3.9.5 Table of Order

Table 3-7: Order Table


order_id Integer no Primary

key

Primary key

for Order

Identification

card_name Varchar no Foreign key Foreign key

to Inventory

62

card_no Integer no

cvv Integer no

Card_expdate Varchar no

User_id Integer no Foreign key Foreign key

to user_id in

Customer

orderdate Datetime no

status Varchar no

total_paid Varchar no

The Table 3-7 shows the data dictionary for Cart. The table contain 5 rows. Those rows

consist of ORDER_ID, CARD_NAME, CARD_NO, CARD_CVV, CARD_EXPDATE,

ORDERDATE, STATUS and TOTAL_PAID. The primary key is the ORDER_ID.

63

3.9.6 Table of Product_Order

Table 3-8: Product_order Table


id Integer no Primary

key

Primary key

for

Product_order

Identification

Order_id Integer no Foreign

Key

Foreign key

to order_id in

order table

product_name Varchar no

product_price Int no

product_qty Int no

product_total Int no

64

The Table 3-8 shows the data dictionary for Payment. The table contain 6 rows. Those

rows consist of ID, ORDER_ID, PRODUCT_NAME, PRODUCT_PRICE,

PRODUCT_QTY, and PRODUCT_TOTAL. The PAYMENT_ID is the primary key while

the ORDER_ID is the foreign key.

3.10 DATA DECOMPOSITION

The data decomposition for this project are shown below:-

3.10.1 Main

Figure 3-12: Process Decomposition (Main)

65

The Figure 3-12 shows the data decomposition for the main module. This system

divides the module into three parts which are the Admin, Seller, and Customer.

3.10.2 Admin

Figure 3-13: Process Decomposition for Admin

The Figure 3-13 shows the data decomposition for the admin module in the web based.

This system divides the module into seven parts which are Manage Seller, Manage Customer,

Seller Selling Record, and Customer Purchasing Record.

66

3.10.3 Seller

Figure 3-14: Process Decomposition for Seller

The Figure 3-14 shows the data decomposition for the Seller module in the mobile

based. This system divides the module into two parts which are Manage Seller Details and

Manage Item.

67

3.10.4 Customer

Figure 3-15: Process Decomposition for Customer

The Figure 3-15 shows the data decomposition for the customer module. The module is

divided into two parts which are Manage Customer details and Manage Purchase.

68

3.11 SUMMARY

This chapter is fully described the methodology that is being used in developing this

project. The Software development methodology plays the important parts because it need to

meets the user requirements. The context diagram (CD), data flow diagram (DFD), framework,

and entity relationship model are being described here. Moreover, the data dictionary and data

decomposition are also being describes.

69

CHAPTER 4

DESIGN

4.1 INTRODUCTION

In this chapter, the main focus is on the system designing phase of the system development

process. The designing phase is the phase that contains the pictures of how to implement the

system be fully functional and fully operate. The guidance of the system was being explained

and describes.

70

4.2 INTERFACE DESIGN

4.2.1 Home Page Interface

Figure 4-1: Home Page Interface

The Figure 4-1 shows the home page interface design of Online System Based on E-

Commerce Platform for used item shopping website.

71

4.2.2 Seller Registration Interface

Figure 4-2: Seller Registration Interface

The Figure 4-2 is the registration interface design for the seller. When the user clicks

the “sell” button at the top, user will direct to seller login interface. User need register first as

a seller in order to sell their used items.

72

4.2.3 Seller Login Interface

Figure 4-3: Seller Login Interface

The Figure 4-3 is the login interface design for the seller. The seller required to sign

in first in order to sell their used item.

73

4.2.4 Sell Item Interface

Figure 4-4: Sell Item Interface

The Figure 4-4 shows the interface design for seller who wish to sell their valuable used item.

74

4.2.5 View Selling History

Figure 4-5: View Selling Item Interface

The Figure 4-5 is the interface design of view selling item where the seller can view the

item that were sold by them. The seller can edit and delete the details of the used items.

75

4.2.6 Customer Registration Interface

Figure 4-6: Registration Interface

The Figure 4-6 is the registration interface for the customer.

76

4.2.7 Customer Login Interface

Figure 4-7: Login Interface

The Figure 4-7 is the login interface for the seller and customer. The customer must

login in order to proceed to the checkout interface and perform the purchased items.

77

4.2.8 Shop Interface

Figure 4-8: Item Display Interface

The Figure 4-8 shows the item display interface design where the customer can view

the item details before purchasing it.

78

4.2.9 Item Detail Interface

Figure 4-9: Item Detail Interface

The Figure 4-9 shows the item detail interface design where the customer can view the

item details before purchasing it. The customer cannot enter quantity more than the availability

79

because it will alert the customer “this much quantity is not available”. Meanwhile sold by

“farah” is the seller user_id. So that the customer knows who sold it.

4.2.10 Shopping Cart Interface

Figure 4-10: Shopping Cart Interface

80

The Figure 4-10 shows the interface design for shopping cart where the customer can

add to cart for every item that they want to purchased. Then customer can delete the item in

the cart that they do not want.

4.2.11 Checkout Interface

Figure 4-11: Checkout Interface

81

The Figure 4-11 shows the interface design of checkout where customer need to add

their billing details in order to purchase the items. The customer must be login in order to

proceed to this interface. When user did not login it to proceed to the checkout interface, it

will alert “please login first”.

4.2.12 Order Confirmation Interface

Figure 4-12: Order Confirmation Interface

82

The Figure 4-12 is the interface design of order confirmation where the customer

successfully places an order of the used item after checkout.

4.2.13 View Purchase History

Figure 4-13: View Purchase Item Interface

83

The Figure 4-13 is the interface design of view purchase item where the customer can

view the item that were purchased by them.

4.2.14 Admin Login

Figure 4-14: Admin Login Interface

The Figure 4-14 is the interface design of admin login interface for admin dashboard.

84

4.2.15 Customer Profile Record

Figure 4-15: Customer Profile Record in Admin Interface

The Figure 4-15 is customer profile in the admin interface. The admin can update and

delete the customer profile.

85

4.2.16 Update Customer Profile

Figure 4-16: Update Customer Profile in Admin Interface

The Figure 4-16 shows that the admin can update the details of the customer profile when

needed.

86

4.2.17 Seller Profile Record

Figure 4-17: Seller Profile record in Admin Interface

The Figure 4-17 is seller profile in the admin interface. The admin can view, update

and delete the seller profile.

87

4.2.18 Update Seller Profile

Figure 4-18: Update Seller Profile in Admin Interface

The Figure 4-18 shows that the admin can update the details of the seller profile when needed.

88

4.2.19 Seller Selling Record

Figure 4-19: Seller Selling Record in Admin Interface

The Figure 4-19 is seller selling record in the admin interface. The admin can view,

update and delete the seller selling record.

89

4.2.20 Update Seller Selling Record

Figure 4-20: Update Seller Selling Record in Admin Interface

The Figure 4-20 shows that the admin can update the details of the seller selling record when

needed.

90

4.2.21 Customer Purchasing Record

Figure 4-21: Customer Purchasing Record in Admin Interface

The Figure 4-21 is customer purchasing record in the admin interface. The admin can

view, update and delete the customer purchasing record.

91

4.2.22 Update Customer Purchasing Record

Figure 4-22: Update Customer Purchasing Record in Admin Interface

The Figure 4-22 shows that the admin can update the details of the customer purchasing

record when needed. This function can be done by admin only.

92

4.3 SUMMARY

The implementation of interface design is discussed in this chapter of what system that

I intended to do. In order to create a well function system, the system must be carefully

designed to ensures the intended result. All the interface designs are required to meet all the

user requirements. There are a number of reasons why cognitive aesthetics (CA) is an

appropriate way to approach the design of ecommerce sites. CA provides a rich theoretical base

that enables a systematic approach which can be applied to creating engaging and immersive

e-commerce sites [14].

93

CHAPTER 5

IMPLEMENTATION AND RESULT

5.1 INTRODUCTION

In this chapter, the step necessarily to verify that development of the Online System Based

on E-Commerce Platform is perfectly done and its performance meets all the quality standards.

The system testing is used to evaluate whether the requirements are compliance with the system

or not. A successful test is one that can encover errors. The procedures in this implementation

phase can be modified in order to make sure the functionality and performance were corrected

and test case can be performed on it.

94

5.2 ADD TO CART USING COOKIES

This project implements add to cart using cookies in e-commerce system. This system

used the HTTP cookie also known as the web cookie or browser cookie. A cookie, which is a

form of persistent state object, is a small piece of data generated by the server and which is

intended to be passed by the client with every subsequent client request to any server in a

defined domain. Upon receipt of the request, the server can verify the client's entitlement to the

requested information by comparing the contents of the cookie to the client records stored on

the server [9]. Cookies is designed to be reliable way for website to remember useful

information such as shopping cart. The cookies method will be shown in the figure below.

95

Figure 5-1: Cookies method for add to cart

Figure 5-1 shows how the cookies is implemented in add to cart. When the customer

clicks the “add to cart button”, it means that the cookies is started and the item details is stored

on the customer’s computer about the items that they intended to buy. The above coding also

mentions on how to calculate the product total where the item quantity will multiple with the

item price. Moreover, it also can check the item availability. If the customer enters the quantity

more than the item availability it will alert “this much quantity is not available”.

96

5.3 ADD TO CART COOKIES IN WEB BROWSER

The figure 5-2 shows the example of the cookies that stored in the customer’s web

browser.

Figure 5-2: The cookies stored in array in web browser.

The Figure 5-2 shows the proof of the cookies that is stored in the customer’s web

browser. Moreover, the items in cookies is stored in array which are the product[1] and

product[2].

97

5.4 SYSTEM TESTING

System testing is a technique to evaluate the performance measures of this e-commerce

system whether it satisfies the requirements or not. The system testing is to investigate the

testing phase where the test of the design and the user requirement.

5.5 SYSTEM FUNCTIONALITY TESTING

In this section, there are three test cases which are for the admin, the seller, and the

customer.

5.5.1 System Functionality Testing for Admin

Table 5-1: System Functionality Testing for Admin

Step Procedure Expected Result Result

1. Insert correct email and

password.

Directed to the admin dashboard. Success

98

2. Insert false email and

password.

Pop up message “please enter

valid username and password”

and redirect to login page.

Success

3. View customer profile List of customers’ details. Success

4. Update customer profile Pop up message “update details is

successful” and prompt back to

customer profile page.

Success

5. Delete customer profile Pop up message “customer profile

is deleted” and prompt back to


Success

6. View seller profile List of sellers’ details. Success

7. Update customer profile Pop up message “update details is


seller profile page.

Success

8. Delete seller profile Pop up message “seller profile is

deleted” and prompt back to


Success

99

9. View seller selling

record

List of sellers’ selling details

which are about the items that

they sold.

Success

10. Update seller selling

record

Pop up message “update details is


seller selling record page.

Success

11. Delete seller selling

record

Pop up message “seller selling

record is deleted” and prompt

back to seller selling page.

Success

12. View customer

purchasing record

List of customers’ purchasing

details which are about the items

that they purchased.

Success

13. Update customer

purchasing record

Pop up message “update details is


customer purchasing record page.

Success

14. Delete customer

purchasing record

Pop up message “customer

purchasing record is deleted” and

prompt back to customer

purchasing page.

Success

100

5.4.2 System Functionality Testing for Seller

Table 5-2: System Functionality Testing for Seller


1. Insert seller details in

the registration form.

Pop up message “you are

successfully registered”

and directed to customer

login interface.

Success

2. Insert correct email

and password.

Session started and

directed to the selling item

interface.

Success


password.

Pop up message “please

enter valid username and

password” and redirect to

login page.

Success

4. Add item details Pop up message “Item

details is successful

added”.

Success

101

5. View selling history List of sellers’ selling

details about the items that

they sold.

Success

6. Update Item details Pop up message “Item


updated” and prompt back

to selling history page.

Success

7. Delete item details Pop up message “Item


deleted” and prompt back

to selling history page.

Success

8. Logout Pop up message “logout is

successful” and the session

ended.

Success

102

5.4.3 System Functionality Testing for Customer

Table 5-3: System Functionality Testing for Customer


1. Insert customer details

in the registration

form.

Pop up message “you are

successfully registered”

and directed to customer

login interface.

Success

2. Insert correct email

and password.

Session started and

directed to the shop

interface.

Success


password.

Pop up message “please

enter valid username and

password” and redirect to

login page.

Success

4. View all product List of product in the shop

interface.

Success

103

5. View product details List of product details in

the product details

interface.

Success

6. Add to cart The item will be added to

cart by using cookies.

Success

7. Checkout If the customer did not

login it will display

message “please login

first”. If they already login

they can proceed to the

checkout page.

Success

8. Add billing details in

checkout.

Pop up message “your

order is being process” and

then will directed to the

order complete interface.

Success

9. View purchase history List of order details and

product order details in the

purchase history interface.

Success

104

10. Logout Pop up message “logout is

successful” and the session

ended.

Success

5.5 SUMMARY

In this chapter, it shows how the e-commerce process is done. Furthermore, it also

describes the test case that has been done during the development processes.

105

CHAPTER 6

CONCLUSION

6.1 INTRODUCTION

In this chapter, the result of the project is discussed and concluded. The content of this

chapter will summarize the overall project contribution.

6.2 PROJECT ACHIEVEMENT AND CONTRIBUTION

The Online System Based on E-Commerce Platform is a system develop for selling and

buying used item such as Corousell and Mudah.my website. In this case, the online system has

106

been chosen as potential place to implement the e-commerce platform. The system is mostly

focused on the process of selling used items by the seller and the process buying used items by

the customer. The seller can manage the item details where he/she can add, update and delete

the item details. Meanwhile, the customer can view item details, add to cart, update cart, delete

cart, checkout and view purchase history. The admin can view, update and delete the seller

profile, customer profile, selling record, and purchase record. To develop the system, web

application is chosen since it can easily implement for the admin, seller, and customer.

6.3 PROBLEM AND LIMITATION

The main focus of this system is to report the completeness of the user requirement.

Unfortunately, the PayPal payment gateway is not free and have to pay in order to use the

PayPal services. The Online Based System Based on The E-Commerce Platform does not reach

it objective for making it fully functional and to meet the user requirements. The user

requirements are hard to establish as they consist the view of many user and each of them have

different opinion.

107

Moreover, the time constraint also one of the major problem in developing the system

because we were given two months in order to complete the proposed project. The most

important thing within the two months is to create many raw data in the web server and each

data need to be tested in order to make sure the expert system is well functional for a better

result. The implementation of the coding required a lot of time because it needs a wide

knowledge of the system language.

6.4 FUTURE WORK

In the future, the different concept of online system based on the e-commerce platform

can be developed into fully functional and more advanced system which it will has the PayPal

payment gateways. Furthermore, the effectiveness in this system can be see where it has chat

application for the customer to directly interact with the seller for further details of the items

in the selling and buying and processes. Lastly, in future works, the shipping management can

be developed in this Online System Based on E-Commerce Platform.

108

6.5 CONCLUSION

As the conclusion, E-Commerce has become a major resource in modern business not

only in the entrepreneur’s but also for the customer’s point of view. In this project, the user is

provided with an e-commerce website that can sell or buy valuable used item over the internet

that will be much easier and more convenience to the user. The PHP language technology is

used to implement this e-commerce web based system. In addition, MySQL is used with PHP

as back-end tool and can be interfaced very well with PHP. Therefore, PHP and MySQL are

excellent choice for webmasters in order to automate their web sites. Next, a good shopping

cart must be design accompanied with user-friendly shopping cart application logic. It should

be convenient for the customer to view the contents of their cart and able to remove or add

items to their cart. The shopping cart application described in this project provides a number

of features that are designed to satisfy the customer. Last but not least, the development of this

project has given me a precise knowledge about the e-commerce platform and hopefully that

the system may meets all the user requirements where this project able to be user friendly and

more convenience for a better human-to-machine interaction (HCI).

109

RE

Documents

NURFARAH DIANA BINTI MOHD HASSIM · 2018. 8. 12. · NURFARAH DIANA BINTI MOHD HASSIM BACHELOR OF COMPUTER SCIENCE (INTERNET COMPUTING) UNIVERSITI SULTAN ZAINAL ABIDIN 2018. ONLINE