International Journal of Application Computer Science and Informatic Engineering (ACSIE)

Vol.1, No.1, May 2019, pp. 43~52

ISSN (print): xxxx-xxxx, ISSN (online): xxxx-xxxx
DOI: https://doi.org/10.33173/acsie.38  43

Design of E-Commerce Gift Shop Case Study MR. Kuta

Bali

Bakhril Ilmi*1, Putu Sugiartawan2, Ketut Laksmi Maswari3

1,2,3
Teknik Informatika, STMIK STIKOM Indonesia; Jl. Tukad Pakerisan 97 Denpasar, Bali, 0361 -
256 995/0361 - 246 875, Indonesia
e-mail: *[email protected], [email protected], [email protected]

Abstract
E-commerce is an alternative which promising enough applied to companies at this
time, because of e-commerce provide facilities for both sides, which is between merchant and
customer. Although which transactions are conducted of being in two different though the
continent, any transaction not there should have been negotiation stage and one of with poor
this is a company gift shop. All this in MR.KUTA BALI, the transaction was done by using
konvesional namely where clients visit directly to that place to choose and purchase products
gift shop. The purpose of research is of designing and constructing system gift shop e-commerce
case studies MR.KUTA BALI. Data collection is done by interviews to assistant general
manager of the company gift shop mr.kuta bali by mrs. Umi Nur Aini. System building design
was conducted using modeling DFD and the ERD to contrive in terms of relationships between
table necessary. E-commerce system gift shop this they use of PHP language and in testing
stage system done by using the method blackbox testing. The result has been testing the system
in accordance with needs functionality designed.

Keywords—E-Commerce Gift Sho

1. INTRODUCTION

See the development of information technology that is increasingly sophisticated at this

time, there are many types and opportunities for tourism business so that business transactions
are increasingly carried out indirectly, one of which is by using internet technology. The
development of the internet is fast and has a significant influence in all aspects of the running of
a company. The presence of the internet, although still a new industry in the growth phase, has
strengthened the belief in the importance of the role of technology in achieving the company's
financial goals through the modification and efficiency of business processes by utilizing E-
Commerce.
The existence of E-Commerce is a promising business alternative to be applied to today's
companies, because E-Commerce provides many conveniences for both parties, both from the
seller and from the buyer in making trade transactions. In the transaction, even though the
parties are on two different continents though, each transaction does not require a meeting in the
negotiation stage, one of which is the souvenir company.
Mr.Kuta Bali is a company that provides services for people from both domestic and
overseas who are on vacation to Bali to get various kinds of souvenirs typical of Bali. At this
time Mr.Kuta Bali still uses conventional systems, where customers must go to the company to
choose and buy the desired souvenir products. The company's product sales marketing system is

Received April 30th,2019; Revised May 12th, 2019; Accepted May 24th, 2019
44  ISSN (print): xxxx-xxxx, ISSN (online): xxxx-xxxx

still using Facebook, so that the ineffective sales and marketing process causes less profit. Some
of these methods are considered to be less than optimal and not considered by the public, while
the construction of new branches in remote areas of the company Mr.Kuta Bali is not possible
because of limited space and costs.
Seeing these conditions, it is necessary to do an E-Commerce application design which
is able to provide product sales facilities online. Through the E-Commerce application,
companies can increase their sales by providing fast and accurate information to customers.
Supported by a product ordering information system with a shopping cart and payment
transactions using iPaymu. iPaymu is a way of online payment or money transfer that serves to
facilitate users in transactions using internet services. iPaymu uses 256 bit SSL encryption and
has been verified by Thwate, so the level of data security in the process of payment or
remittance can be more secure and guaranteed.
Based on the description of the background, the authors are interested in conducting
research under the title "Design of E-Commerce Gift Shop Case Study of Mr.Kuta Bali". It is
expected that the system can facilitate customers in the process of ordering and payment of a
product online, making a wider media campaign, and facilitate the company in the process of
reporting transaction data.

2. METHODS

At this stage an analysis of the needs of the E-Commerce-based souvenir sales system is
carried out. Some of the things analyzed at this stage include the needs of hardware and
software so that the system can work and function as expected.
Data that will be used in making the design and building of the E-Commerce Gift Shop
Case Study of Mr.Kuta Bali, which is in the form of category and item data as information
about the contents of souvenir products that will be sold. Such products are: various kinds of
barong clothes, t-shirts, pants, accessories (bracelets, earrings, etc.), typical Balinese snacks,
sandals, paintings, bags, Balinese dresses, pearls and more.

2.1 E-Commerce
According to Wahana Komputer [1], E-Commerce is one of the advantages of the
internet, until finally in the present era it seems that no day has been missed without hearing or
reading the word E-Commerce in various information media. There are several names for E-
Commerce, namely Internet Commerce or Ecom, which basically has the same name
designation. These terms mean buying or selling electronically and this activity is carried out on
the internet network. E-Commerce can also mean advertising, sales and the best services using a
webshop 24 hours a day for all of its customers

2.2 Entity Relationship Diagram (ERD)

Entity Relationship Diagram is the main data modeling tool and will help organize data
in a project into entities and determine relationships between entities [2]. The process allows
analysts to produce a good database structure so that data can be stored and retrieved efficiently.
There are 3 (three) types of symbols used in ERD, namely:
1. Entity
An entity is something real or abstract where we will store data. There are 4
classes of entities, for example employees, payments, campus, and books.
Examples of an entity are called agencies, for example Adi, Joko's payment, and so
on.
2. Relationship
Relationships Are natural relationships that occur between one or more entities,
for example the employee payment process. Cardinality determines the occurrence

ACSIE Vol. 1, No. 1, May 2019 : 43 – 52

ACSIE ISSN (print): xxxx-xxxx, ISSN (online): xxxx-xxxx  45

of an entity for an event in a related entity. For example, students can take many
subjects.
3. Attributes
Attributes are a common feature of all or most agencies in certain entities.
Other attributes are properties, data elements, and fields. For example, the name,
address, employee number, and salary are the attributes of the employee entity. An
attribute or combination of attributes that identifies one and only one agency an
entity called the primary key or identifier. For example, employee numbers are the
main key for employees.

2.3 Data Flow Diagram Context Level (Context Diagram)

The next model answers a number of questions in making SOPs. Context diagram (CD)
is a special case of DFD (part of dfd which functions to map environmental models), which is
represented by a single circle representing the whole system [3]. Figure 2.1 below is an example
of a book ordering CD system.

Figure 2.1 Context diagram of a book ordering system

.
2.4 Data Flow Diagram (DFD)
According to Saladin [4], Data Flow Diagrams (DFD) were originally developed by
Chris Gane and Trish Sarson in 1979 which were included in the Structured Systems Analysis
and Design Methodology (SSADM) written by Chris Gane and Trish Sarson. The system
developed is based on the functional decomposition of a system. The following Figure 2.2 is an
example of a DFD developed by Chris Gane and Trish Sarson:

Figure 2. 2 Examples of DFDs developed by Chris Gane & Trish Sarson

Design of E-Commerce Gift Shop Case Study ... (Bakhril Ilmi)

46  ISSN (print): xxxx-xxxx, ISSN (online): xxxx-xxxx

Edward Yourdon and Tom DeMarco introduced another method in the 1980s which
changed the square with curved angles (in DFD Chris Gane and Trish Sarson) with circles to
denote. DFD Edward Yourdon and Tom DeMarco are popularly used as systems analysis
models for software systems that will be implemented with structured programming.
The information contained in the software is modified with some needed
transformations. Data Flow Diagram is a graphical representation that describes information
flow and information transformation that is applied as data flowing from input and output.
DFD can be used to represent a system or software at several levels of abstraction. DFD
can be divided into several levels that are more detailed to represent the flow of information or
functions in more detail. DFD provides a mechanism for functional modeling or information
flow modeling. Therefore, DFD is more suitable to be used to model software functions that
will be implemented using structured programming because structured programming divides its
parts with functions and procedures.

2.5 PHP
According to Ramadan [5], PHP is an acronym for Hypertext Preprocessor, which is a
programming language based on codes (scripts) that are used to process data and send it back to
the web browser into HTML code. The PHP code has special characteristics, namely:
1. Can only be run using a web server, for example: Apache.
2. PHP code is placed and run on the web server
3. PHP code can be used to access databases, such as: MySQL, PostgreSQL, Oracle,
and others.
4. Is software that is open source.
5. Free to download and use.
6. It has multipaltform properties, meaning it can be run using any operating system,
such as: Linux, Unix, Windows, and others.

Some ways to use PHP, besides providing benefits as in the above points, are also
supported by many communities. This is what makes PHP continue to grow. We can learn more
about tips and tricks for using it from various communities, educational institutions, or through
internet media. Before learning PHP, you should do some preparations first, such as providing a
web server and PHP editor help program. With a special editor, you can easily detect if a
command write error occurs.

2.6 Flowchart Sistem

Flowchart system when the customer buys the product, the first step is that the customer
will see the web display with related product information. After that, the customer makes a
signup to register as a buyer if he doesn't have an account. If the account is already owned, the
customer can sign in / login and the system will display the product with the buy button with the
status enabled. Then the customer can choose and buy products by entering the purchase
quantity. Data of selected products will be entered into cart / shopping cart to manage product
data such as edit and delete products if the customer does not buy.
Products that have been fixed to be purchased can then be ordered by the customer,
where the tax and transfer fees have been determined by the company. When entering the
payment form, the customer will see the payment details for all products purchased, if the
customer wants to continue payment, the customer must first login to your ipay account.
Conversely, if it doesn't continue, then the customer will return to the product shop page as
when after making a personal account login. After your ipay account login is successful, the
customer can immediately confirm payment and the system will display a successful transaction
page on the website page. The following is an overview of the E-Commerce gift shop system
flowchart at Mr.Kuta Bali, shown in Figure 2.3.

ACSIE Vol. 1, No. 1, May 2019 : 43 – 52

ACSIE ISSN (print): xxxx-xxxx, ISSN (online): xxxx-xxxx  47

Figure 2.3 Flowchart of the E-Commerce Gift Shop System Mr.Kuta Bali

2.7 Context Diagram dan DFD Level 0

Here is the Context Diagram of the Mr.Kuta Bali E-Commerce Gift Shop System,
shown in Figure 2.4 and continued to level 0 DFD (Figure 2.5).

Design of E-Commerce Gift Shop Case Study ... (Bakhril Ilmi)

48  ISSN (print): xxxx-xxxx, ISSN (online): xxxx-xxxx

0
Tambah Data Kategori
Tambah Data Customer
Tambah Data Admin
Edit Data Customer
Edit Data Admin
Tambah Data Keranjang
Cari Data Admin
Edit Data Keranjang
Tambah Data Barang
Hapus Data Keranjang
Edit Data Barang

Tambah Data Buku Tamu Cari Data Barang

Tambah Data Order Tambah Data Stok

Customer
Login Data Akun iPaymu Validasi Status Data Order

Konfirmasi Data Transaksi Cari Data Order

Info Data Log in Akun iPaymu Info C_Data Order

Info T_Data Order Sistem ECommerce Gift Info T_Data Kategori Admin
Shop M rKuta Bali
Info T_Data Keranjang Info T_Data Barang

Info E_Data Barang

Info E_Data Keranjang

Info C_Data Barang

Info T_Data Customer
Info T_Data Stok
Info E_Data Customer
Info T_Data Admin

Info E_Data Admin

Info C_Data Admin

Info Validasi Status Data Order

Info Laporan Stok Barang

Info Laporan Tambah Data Transaksi

Info Laporan Data Customer

+
Info Laporan Data Buku Tamu

Info Konfirmasi Data Transaksi

Tambah Data Transaksi

iPaymu

Figure 2.4 Context Diagram of the E-Commerce Gift Shop System Mr.Kuta Bali
Id Tr ansaks i_Stok
Tabe l
10
Outp ut Lapo ran Tambah Da ta Trans aksi Tran saksi

Data Tamba h Trans aksi

Outp ut Data Konfirma si Tran saksi

9
Data Konfirmasi Tran saksi Info Konfirma si Data Transak si
Outp ut Data Akun iPa ymu

Pros es Men gelola D ata

9 Data base iPaymu Tran saksi
Data Login Akun iPa ymu
Id Or der_Tra nsaksi iPay mu
Tambah Data Trans aksi
+
Id Ba rang_O rder Ca ri
8 Konfirmasi D ata Tran saksi
Id Ba rang_O rder Va lidasi
Id Ba rang_O rder Ta mbah Info D ata Log in Akun iPaymu
Login Data Akun iPa ymu Id Cu stomer _Order Tambah
Data Tamba h Order
Id Cu stomer _Order Cari
Outp ut T_Da ta Orde r Id Cu stomer _Order Validasi
Data Status O rder Pros es Men gelola D ata Ord er
Info E_Data C ustome r
Outp ut VS_D ata Ord er
Tambah Data Custo mer
Data Cari Tambah Data Order
Edit D ata Cu stomer
Outp ut C_Da ta Orde r
+ Info T_Data O rder Info T_Data C ustome r

Info T_Data Keranjan g

Cus tomer
Hap us Data Keranja ng 7

Edit D ata Ker anjang

Id_O rder La poran Transaks i Pros es Men gelola
Info E_Data Keranjan g
8 Tabe l Order
Data Customer
Tambah Data Keran jang
+
Valid asi Statu s Data Order
Outp ut Lapo ran Stok Barang 10
Info C
Info
_Data
Validasi
OrderStatus D ata Ord er Id_C ustome r Lapora n Buku Tamu
Id_Barang L aporan Stok Cari Data Or der
Tambah Data Buku Tamu Outp ut Lapo ran Data Customer
Info L aporan Stok Ba rang Pros es Lapo ran
Id Ba rang_Stok Tambah Data Tamba Data
h Custo
Edit Cu
merstomer
4
Info T_Data Stok + Outp ut T_Da
Outp ta
ut Custo
E_Da ta
mer
Custo mer

4 Tabe l Stok
Outp ut Data Stok Pros es Men gelola
Tambah Data Stok 5
Data Stok Id Cu stomer _BTamu

Data Tamba h Stok +

Pros es Men gelola D ata
Buku Tamu 7 Tabe l Custo mer
3
Data Tamba h Baran g
Tambah Data Baran g +
Data Edit Bar ang Info L aporan Data C ustomer
Edit D ata Bar ang 6
Outp ut T_Da ta Baran g Info L aporan Tamba h Data Transak si

Outp ut E_Da ta Baran g Cari Data Ba rang Admin

Pros es Men gelola D ata Bara ng Info L aporan Data Bu ku Tamu Data Tamba h Buku Tamu Id Cu stomer _Cart Ta mbah
Info T_Data Barang Info T_Data Kategori
Data Cari Ba rang
Id Cu stomer _Cart Ed it
Info E_Data Barang Tambah Data Katego ri Pros es Men gelola D ata
+ Kera njang Belanja Id Cu stomer _Cart H apus
Info C _Data Barang
Tabe l Buku
Outp ut Lapo ran Data Buku Tamu 5
Tamu
+
Tambah DataEdit
Admin
D ata Admin
Cari Data Ad min
Info E_DataInfo
Admin
C _Data Admin
Info T_Data Admin

1
Outp ut C_Da ta Bara ng
2

Data Tamba h Admin

Pros es Men gelola D ata Outp ut Data Kategor i Data Hapus Keranja ng
Admin Pros es Men gelola D ata
Kate gori Tabe l Outp ut H_Da ta Kera njang
+ 6 Kera njang Outp ut E_Da ta Keran jang
Bela nja
Data Tamba h Keran jang
Outp ut T_Da ta Keran jang
Data Edit Ker anjang

Data Edit Admin

Data Cari Ad min
Outp ut T_Da ta
Outp
Admin
ut E_Da ta
Outp
Admin
ut C_Da ta Admin

1 Tabe l Admin

Data Tamba h Katego ri

2 Tabe l Katego ri
Id Ka tegori_Barang C ari
Id Ka tegori_Barang Edit

Id Ka tegori_Barang Tambah

Id Ba rang _C art Tambah

3 Tabe l Baran g
Id Ba rang _C art Edit
Id Ba rang _C art Hap us

Figure 2.5 DFD Level 0 E-Commerce Gift Shop System Mr.Kuta Bali

ACSIE Vol. 1, No. 1, May 2019 : 43 – 52

ACSIE ISSN (print): xxxx-xxxx, ISSN (online): xxxx-xxxx  49

2.8 Entity Relationship Diagram (ERD)

There are eight interconnected entities and each entity has its own attributes. The entity
is an entity category, goods, admin, customer, guest book, order and transaction. Initially, the
transaction entity has a relation to the order entity, where each transaction data has at least one
order data and a maximum of one order data. Furthermore, the order entity that relates to two
entities, namely customers and goods, where each order data can be ordered by at least one
customer and a maximum of one customer, and has at least one item and a maximum of many
items. The goods entity has a relationship with the admin and category, while the customer
relates to the guest book.
Each admin can enter at least one and a maximum of many items, and each category has
at least one item and a maximum of many items. Enter the last relation, that is, where each
customer can fill at least one guest book and a maximum of many. Next is the Entity Relations
Diagram of the E-Commerce Gift Shop Mr.Kuta Bali, shown in Figure 2.6.
Customer
Buku Tamu Id_Customer
Id_Guest Nama_Customer
IdCustomer_Guest Alamat
Komentar Meng isi Neg ara
Kota
Telepon
Memproses Kode_Post
Email
User_Name
Password
Kateg ori
Transaksi
Meng inputkan Id_Kateg ori
Nama_Kateg ori Id_Transaksi
Id_Session
IdOrder_Transaksi
terdapat Tgl_Transaksi
UserName_Cust Memproses
Total Qty
Total Bayar
Aksi
Komentar
Admin
Id_Admin
Nama_Admin Order
Password Id_Order
Hak_Akses IdBarang_Order
Terdapat IdCustomer_Order
Tgl_Order
Stok
Terdapat Qty
memiliki Id_stok SubTotal
IdBarang_Stok Status
IdTrans_Stok tampil
Tang g al
Jumlah
Stok

Barang
Id_Barang
IdKateg ori_Barang
Nama_Barang
Meng inputkan Harg a
Terdapat
Deskripsi
Tgl_M asuk
Gambar

Figure 2.6 Entity Relation Diagram of the E-Commerce Gift Shop Mr.Kuta Bali

3. RESULTS AND DISCUSSION

The design implementation of this website is an implementation of website analysis and

design in the previous chapter. It is expected that with this implementation it can be understood
the way a website design E-Commerce is made, where the website will display various types of
souvenir products along with prices related to the product.
Beginning to make a purchase, the customer must log in first by entering the username
id and password previously created on the signup form. Customers can choose the desired
product, then see the payment details on the product ordered. Payment is made by using
iPaymu, where iPaymu is an online payment system that is used to facilitate online transactions.
3.1 Page Shop

Design of E-Commerce Gift Shop Case Study ... (Bakhril Ilmi)

50  ISSN (print): xxxx-xxxx, ISSN (online): xxxx-xxxx

Here are the results of the shop page display. The corresponding display results are
shown in Figure 3.1, the shop menu page, there are information on what products are sold.
According to this information, the data displayed in the form of images, names, and prices of
products where the data can change according to the wishes of the admin in processing the
product. If the customer has successfully logged in the account and wants to purchase the
product, the buy button will be status enabled to proceed to the add to cart page process.

Figure 3.1 Shop page

3.2 Halaman Add To Cart

The following are the results of the add to cart display. The corresponding display
results are shown in Figure 3.2, based on the add to cart page, there is more specific product
information. The data displayed is in the form of categories, product names, prices, remaining
stocks, descriptions and customers can enter the quantity of goods ordered in quantity. The
amount ordered by the customer cannot exceed the capacity of the remaining stock, because the
system will display a failed message if the customer does so. Products ordered will be
accommodated on the cart page, where customers will be able to process the product data
ordered by providing edit and delete services. Based on the product you want to order, there is
also information on the related product categories.

Figure 3.2 Page Add To Cart

ACSIE Vol. 1, No. 1, May 2019 : 43 – 52

ACSIE ISSN (print): xxxx-xxxx, ISSN (online): xxxx-xxxx  51

3.3 Admin Main Page

The following are the results of the admin main page. The corresponding display results
are shown in Figure 3.3, the following are the main pages of the admin, where there are several
parts, namely the company logo, login data information, time information, navigation menu,
content (Sign content), and the Sign Out button that functions to leave the rights admin access.
The navigation menu has 4 menus, namely the item menu, validation, reports, and utilities. The
item menu contains processed goods data such as adding, editing, and searching for goods or
products. The next menu is the validation menu, which contains information on customer order
data, where the order data will be changed when the customer has made a successful payment
transaction and does not occur pending. Next on the report menu, where there are four
submenus including the item inventory report, transaction reports, customer data reports, and
guest book reports. The four reports are generated from the process of purchasing products
between customers and the company web shop Mr.Kuta Bali.

Figure 3.3 Admin Main Page Results

4. CONCLUSION
Based on the results of the research activities, the analysis of the website design system
until the implementation stage, it can be concluded that the website of the E-Commerce Gift
Shop Mr.Kuta Bali has been successfully built and can help the company to increase broader
marketing online due to limited distance and time. Through marketing, customers can order
products based on existing categories, and can directly make payments using iPaymu. IPaymu
payment uses rupiah format status, so it can make it easier for customers to make transactions to
the company. All subsequent transaction results will be processed into the admin page, which
helps the admin in validating transaction data from customer product orders. Several processes
are carried out until the transaction takes place, before the testing phase is carried out by using
the blackbox testing method, where the tests performed get results that are in accordance with
what is expected and valid.

5. SUGGESTION
The website of the E-Commerce gift shop Mr.Kuta Bali that has been designed and built
is still far from perfect, therefore it is hoped that there will be parties who want to design and
build this website to be more perfect. The program that is currently designed does not yet have a
special feature to service all types of payments, so it can be considered in the future in terms of
security and payment because the website designed still only uses payment with iPaymu.

Design of E-Commerce Gift Shop Case Study ... (Bakhril Ilmi)

52  ISSN (print): xxxx-xxxx, ISSN (online): xxxx-xxxx

DAFTAR PUSTAKA

[1] Wahana Komputer. (2006). Apa & Bagaimana E-Commerce. Yogyakarta: Andi.
[2] Paryudi. (2006). Basis Data. Yogyakarta: Andi.
[3] Iskandar. (1997). Pengantar Perancangan sistem. Bandung: Erlangga.
[4] Shalahuddin. (2011). Rekayasa Perangkat Lunak. Bandung: modula.
[5] Agustina. (2010). Mendesain Web dinamis dan menarik. Semarang: Andi.
[6] Barnes, dkk. http://www.webqual.co.uk. Pengenalan Tentang Webqual., diakses pada
tanggal 27 Juni 2013.
[7] http://www.ipaymu.com. Cara Daftar iPaymu., diakses pada tahun 2014 (ONLINE)
[8] Ramadhan. (2005). Pemrograman Web dengan PHP database MySql. Jakarta: Elex
Media.
[9] Jogiyanto. (2005). Sistem Teknologi Informasi. Yogyakarta: Andi.
[10] Raharjo. (2011). Belajar Pemrograman Web. Bandung: Modula.
[11] Wahana Komputer. (2012). Membuat Web E-Commerce dengan Adobe Dreamweaver
CS5.5. Yogyakarta: Andi.
[12] Waloeya. (2011). Photoshop.com – Editor Grafis Online. Yogyakarta: Andi.

ACSIE Vol. 1, No. 1, May 2019 : 43 – 52