3.

ANALISIS DAN DESAIN SISTEM

Bab ini dijelaskan mengenai perancangan dari keseluruhan sistem yang

dibuat, yang meliputi analisis sistem dan permasalahan, perancangan Data Flow
Diagram (DFD), desain database, dan Entity Realtionship Data (ERD).
3.1. Analisis Sistem
Setelah mendapatkan semua informasi maka, dibuat sistem baru yang
digunakan oleh Petra Gaming Store. Dengan dilakukan analisis ini diharapkan
dapat membantu Petra Gaming Store untuk mengatasi masalah yang mungkin
dapat terjadi.
3.1.1.
Analisis Sistem yang Lama
Sistem yang lama digunakan masih menggunakan cara periklanan
dengan membuat thread di kaskus dan di tokobagus. Cara Petra Gaming Store
untuk mempromosikan produk yang dijualnya masih menggunakan forum online
seperti kaskus. Hal ini membuat produk-produk yang diiklankan kurang diketahui
oleh masyarakat.
Meski dengan adanya forum jual beli seperti kaskus, user terkadang tidak
mendapatkan informasi yang detil terhadap produk yang diinginkan. Masalah ini
sering terjadi pada kebanyakan user yang berbelanja pada Petra Gaming Store.
Masalah lainnya adalah jika pelanggan ingin memesan barang secara
online, forum tidak dapat memberikan fitur ini dikarenakan forum hanyalah
sarana jual beli berdasarkan thread, jika ingin melakukan pembelian masih harus
via sms ke pembuat thread bersangkutan tadi. Contoh thread dapat dilihat pada
Gambar 3.1.

22
Universitas Kristen Petra

Gambar 3.1. Thread Iklan Kaskus

3.1.2.
Desain Sistem yang Diinginkan
Dilihat dari permasalahan pada sistem yang lama, maka untuk
memperbaiki kinerja dan mengatasi masalah yang ada, dibuatlah suatu sistem
informasi berbasis web yang mana website yang dibuat mampu membuat Petra
Gaming Store lebih dikenal oleh masyarakat luar serta dapat menambah
keuntungan yang lebih banyak.
Dengan sistem penjualan yang berbasis online diharapkan sistem dapat
berjalan lebih efisien baik dari segi waktu maupun keakuratan data. Dengan
demikian Petra Gaming Store dapat mempercepat kinerja pemasarannya juga
dikarenakan pelayanan secara online yang mulai trending. Hal ini dapat
menguntungkan kedua belah pihak baik owner ataupun pelanggan.
3.1.3.
Analisis Website E-commerce sejenis
Pembuat website pada umumnya menilai sebuah website dari sudut
pandang desain dan tampilan serta dari faktor apakah sebuah website telah
memenuhi standar yang telah ditetapkan. Sebagai pemilik atau pengelola website
lebih mempertimbangkan faktor yang berhubungan dengan pengunjung seperti
statistik mengenai distribusi, interaksi, serta profil pengunjung. Sedangkan
sebagai pengunjung website lebih memperhatikan masalah konten, keakuratan
informasi, aksesibilitas, fitur yang ditawarkan dan usability.
Untuk mendapatkan gambaran mengenai karakteristik website ecommerce di industri retail, maka dilakukan review terhadap beberapa website
seperti Bhineka.com dan Lazada.co.id. Hasil review mengindikasikan bahwa

23
Universitas Kristen Petra

website tersebut pada umumnya memiliki fitur dasar yaitu shopping cart dan
katalog produk
Karakteristik pengguna mengharapkan sebuah website mudah untuk
dimengerti, diakses, tampilan yang bagus dan kemudahan dalam melakukan
transaksi. Perbandingan antara website e-commerce:
3.1.3.1.
Kaskus
Desain website kaskus.co.id yang khas membuatnya berbeda dari website
lainnya. Kaskus.co.id merupakan website yang memungkinkan pelanggan untuk
melakukan pembelian dan penjualan dan juga sarana berdiskusi. Mekanisme
sistem kerja kaskus.co.id membuat banyak pelanggan melakukan proses
pembelian online melalui kaskus. Kemudahan dalam bertransaksi dan
kelengkapan dalam persediaan produk. Proses pembelian kaskus tidak resmi,
pelanggan yang membeli barang tidak mengetahui bahwa penjual merupakan
orang yang dapat dipercaya atau tidak.
3.1.3.2.
Bhinneka
Desain bhinneka.com sangat bagus dibandingkan dengan website ecommerce lainnya. Untuk pemilihan warna, letak dan tampilan merupakan nilai
utama yang dapat mencari perhatian pelanggan serta bagaimana pelanggan mudah
untuk melakukan transaksi pembelian menjadi faktor pendukung.
Dari hasil relevansi di atas maka dapat dibuat tabel perbandingan
terhadap website yang dibuat seperti pada Tabel 3.1.

24
Universitas Kristen Petra

Tabel 3.1. Perbandingan Website

3.2. Proses Bisnis

Petra Gaming Store adalah distributor dropship peralatan hardware
seperti keyboard, mouse, headphone, dan-lain-lain. Dropship adalah penjualan
produk yang memungkinkan dropshipper menjual barang ke pelanggan dengan
bermodalkan foto dari dealer (tanpa harus melakukan stok barang) dan menjual ke
pelanggan dengan harga yang ditentukan oleh dropshipper. Setelah pelanggan
mentransfer uang ke rekening dropshipper, dropshipper membayar kepada dealer
sesuai dengan harga beli dropshipper (ditambah dengan ongkos kirim ke
pelanggan) serta memberikan data pelanggan (nama, alamat, no. ponsel) kepada
dealer, kemudian dealer memberikan nomor resi pengiriman atas penjualan
tersebut. Barang yang dipesan akan dikirim oleh Petra Gaming Store ke
pelanggan/pembeli. Namun, yang menarik, nama pengirim yang tercantum
tetaplah Petra Gaming Store selaku dropshipper.
Namun setelah Petra Gaming Store memiliki website, maka proses yang
terjadi sedikit berubah dimulai dari pelanggan memilih produk yang diinginkan
lalu ditambahkan ke dalam shopping cart. Kemudian dilanjutkan ke proses

25
Universitas Kristen Petra

pembayaran dengan 2 metode yaitu transfer atau PayPal, pelanggan yang telah
melakukan checkout akan mendapatkan email detil penjualan atas apa yang sudah
pelanggan masukkan. Setelah pelanggan mentrasfer sejumlah uang sesuai dengan
yang tertera pada detil penjualan, pelanggan dapat melakukan konfirmasi
pembayaran agar order dapat diproses dan dikirim. Petra Gaming Store terus
meng-update nomor resi pengiriman setelah dealer memberikan informasi nomor
resinya. Flowchart proses bisnis dari Petra Gaming Store dapat dilihat pada
Gambar 3.2.

26
Universitas Kristen Petra

Gambar 3.2. Flowchart Proses Bisnis Petra Gaming Store

3.3. Desain Sistem
Pada sub bab ini dibahas tentang desain sistem meliputi Data Flow
Diagram dan Entity Relationship Data.
3.3.1.

Data Flow Diagram

Pada sub bab ini menjelaskan tentang aliran proses yang ada pada Petra
Gaming Store. Sistem yang ada adalah sistem penjualan dan pembelian barang
3.3.1.1.
Diagram Konteks
Pada diagram konteks ini diberikan penjelasan mengenai aliran data
secara keseluruhan dari proses penjualan dan pembelian pada Petra Gaming Store.
0
Laporan Pembelian
Data Barang Dipesan
Laporan Penjualan

Admin

Laporan Laba Rugi

Data Penjualan

Pembayaran
Sistem Penjualan dan Pembelian Petra
Gaming Store

Nota
Rekomendasi Produk

Pembayaran

Member

Nomor Resi

Update Status Penjualan

Pembayaran

Data Pesanan
Nomor Resi

Supplier

Gambar 3.3 Diagram Konteks

Dari Gambar 3.3 dapat dilihat bahwa terjadi dua proses yaitu penjualan
dan pemesanan yang melibatkan 3 entity yaitu member, supplier dan admin.
Entity member berfungsi sebagai pelanggan yang melakukan proses pemesanan
kepada Petra Gaming Store. Pada entity supplier berfungsi mencatat data pesanan
yang diambil dari data penjualan. Sedangkan pada entity admin berfungsi sebagai
pengelola dari Petra Gaming Store yang melakukan proses pembayaran, update
penjualan dan pembuatan laporan.
3.3.1.2.

Diagram Level 0

27
Universitas Kristen Petra

Pada diagram level 0 ini dijelaskan secara lebih detail dari proses
penjualan dan pembelian. Pada diagram ini proses dibagi menjadi tiga bagian

[Data Pesanan]

Pembelian

Admin

Admin

[Pembayaran]

[Nomor Resi]

1.1

Data Penjualan

[Pembayaran]

[Nomor Resi]

Supplieerr
Suppli

Pembelian Detil
Data Pesanan

Data Pesanan

Penjualan Detil

Data Barang
Data Barang Dipesan

Data Penjualan

Update Status Penjualan

[Update Status Penjualan]

Penjualan

Data Barang Dipesan

[Rekomendasi Produk]

[Nota]

[Data Penjualan]

1.2

[Pembayaran]

[Data Barang Dipesan]

Pembelian

Member
Member

Penjualan

Data Transaksi

Data Transaksi

Data Transaksi

1.3

Pembuatan Laporan

[Laporan Laba Rugi]

Data Transaksi

[Laporan Pembelian]

Admin

[Laporan Penjualan]

yang meliputi proses penjualan, pembelian dan pembuatan laporan.

Gambar 3.4. Diagram Level 0

Pada Gambar 3.4 dapat dilihat bahwa member yang ingin melakukan
proses pembelian secara online haruslah terlebih dahulu melakukan pemilihan
data barang yang ingin dibeli, ketika member melakukan pemilihan barang atau
melihat keranjang belanja, rekomendasi produk yang dibeli bersamaan ikut

28
Universitas Kristen Petra

disajikan dengan tujuan menarik perhatian member agar membeli barang tersebut
juga. Kemudian data penjualan tersebut akan disimpan ke dalam sistem. Proses
penjualan dapat dilihat pada Gambar 3.5.
Setelah melakukan penjualan, admin melakukan pembelian barang
kepada supplier dimana Petra Gaming Store tidak perlu repot menangani urusan
pengiriman barang dikarenakan status dropship. Ketika barang sudah dikirim,
supplier memberikan nomor resi pengiriman kepada admin yang nantinya admin
akan melakukan update database penjualan agar member dapat mengetahui
proses pengiriman barang. Proses pembelian dari supplier dapat dilihat pada
Gambar 3.6.
Pada sub proses 1.3 dilakukan pembuatan laporan yang didapatkan dari
seluruh data transaksi penjualan dan pembelian.
3.3.1.3.
Diagram Level 1
Pada diagram level 1 ini ada 2 diagram yang diuraikan lebih lanjut lagi
yaitu, proses penjualan dan pembelian.
[Data Penjualan]

Admin

1.2.1

[Data Penjualan]

[Data Barang Dipesan]

[Update Status Penjualan]

Pemesanan Barang

[Nota]

Member
Member
Member

[Data Barang Dipesan]

[Pembayaran]

[Data Penjualan]
1.2.2
Penjualan
Penjualan
Penjualan:: :321

[Update Status Penjualan]

Pembayaran
[Data Barang Dipesan]
Penjualan
PenjualanDetil
Detil :: 321

1.2.3

Suggestion Produk
[Rekomendasi Produk]

[Data Barang]

Gambar 3.5. Diagram Level 1 Proses Penjualan

Pada Gambar 3.5 dapat dilihat bahwa untuk melakukan pembelian secara
online, member akan memberikan data barang dipesan yang ingin dibeli seperti

29
Universitas Kristen Petra

pada sub proses 1.2. Member melakukan pembayaran dan admin akan mengupdate status penjualan dan menyimpan ke dalam tabel penjualan dan penjualan
detil seperti pada sub proses 1.2.2. Proses rekomendasi produk diberikan kepada
member, barang yang direkomendasikan diambil dari data penjualan detil yang
sering dibeli bersamaan. Proses rekomendasi produk ini menggunakan algoritma
apriori.
1.1.1

Pemesanan Barang

Supplier

[Data Pesanan]
Penjualan

[Data Pesanan]

[Nomor Resi]

1.1.2

[Pembayaran]
[Nomor Resi]

[Pembayaran]

Pembayaran Barang

[Data Pesanan]

Pembelian

Admin

[Data Pesanan]

Pembelian Detil

Ga

mbar 3.6. Diagram Level 1 Proses Pemesanan

Pada Gambar 3.6 dimulai dari admin yang melakukan pembayaran
kepada supplier atas data pesanan yang diambil dari tabel penjualan seperti pada
sub proses 1.1.1. Setelah melakukan pembayaran, data pembelian dari supplier
dicatat ke dalam tabel pembelian dan pembelian detil seperti pada sub proses
1.1.2. Supplier yang telah mengirimkan barangnya memberikan informasi nomor
resi kepada admin.
3.3.2.

Flowchart
Pada sub bab ini dijelaskan tentang proses login, member, register,

reminder, rating dan komentar, history transaksi, banding produk, master produk,
master merk, master member, master kategori, master spesifikasi, master
spesifikasi detil, master foto produk, laporan penjualan, laporan pembelian dan
ubah status.

30
Universitas Kristen Petra

3.3.2.1.

Flowchart Proses Login

Proses login dapat dilakukan dengan dua cara yaitu login melalui

facebook dan login melalui web Petra Gaming Store. Apabila user telah
melakukan login via facebook, maka sistem akan otomatis menampilkan halaman
index, namun apabila member belum melakukan login, maka user harus mengisi
data login. Flowchart proses login dapat dilihat pada Gambar 3.7.

3.3.2.2.

Gambar 3.7. Flowchart Proses Login

Flowchart Proses Pemesanan
Proses pemesanan ini dimulai dengan user menambahkan produk ke

dalam shopping cart, dimana produk yang dipilih akan disimpan dalam dua
database yaitu shopping cart dan checkout. Kemudian dilanjutkan dengan
pengecekan login, apabila user belum melakukan login maka dapat melakukan
proses login seperti pada Gambar 3.7, namun apabila user sudah login maka
sistem akan menampilkan halaman data pengiriman. Data pengiriman tersebut
akan dimasukkan ke dalam database checkout, selanjutnya sistem akan mengecek
ongkos kirim yang harus dibayar. Proses selanjutnya akan muncul output
checkout yang diikuti dengan pengecekan jenis pembayaran yang dipilih, apabila
pembayaran melalui PayPal maka akan langsung tersambung dengan API PayPal
terlebih dahulu, namun jika pembayaran melalui transfer BCA maka akan
langsung menampilkan summary pesanan barang. Kemudian, proses pengiriman
email ke member akan disimpan dalam dua tabel penjualan dan penjualan detil.

31
Universitas Kristen Petra

User yang sudah melakukan pembayaran akan konfirmasi lewat sms atau telefon.
Flowchart proses member dapat dilihat pada Gambar 3.8.

3.3.2.3.

Gambar 3.8. Flowchart Proses Pemesanan

Flowchart Proses Register
Proses register ini dimulai dengan user memasukkan data register

seperti email, password, nama, alamat, kota, kode pos, dan nomor telefon.
Kemudia sistem akan melakukan pengecekan apakah password dengan konfirmasi
password sudah sama, data sudah terisi semua dan email yang digunakan sudah
pernah digunakan atau belum. Jika syarat terpnuhi dari semua pengecekan, maka

32
Universitas Kristen Petra

data akan disimpan ke dalam database member. Flowchart proses register dapat
dilihat pada Gambar 3.9.

Gambar 3.9. Flowchart Proses Register

3.3.2.4.

Flowchart Proses Stok Reminder

Proses reminder ini dimulai dengan user memilih produk terlebih

dahulu, namun apabila stok barang tersebut habis, maka disediakan fitur stok
reminder dimana user akan mendapat pemberitahuan, kemudian sistem akan
melakukan pengecekan apakah user telah melakukan reminder barang tersebut
sebelumnya, jika user sudah pernah melakukan reminder barang tersebut maka
proses stok reminder selesai, namun apabila user belum pernah melakukan
reminder produk yang dipilih, maka user melakukan input data reminder yang
diperlukan. Flowchart proses stok reminder dapat dilihat pada Gambar 3.10.

33
Universitas Kristen Petra

Gambar 3.10. Flowchart Proses Stok Reminder

3.3.2.5.

Flowchart Proses Rating dan Komentar

Proses rating dan komentar ini dimulai dengan user memilih produk

terlebih dahulu, kemudian sistem akan melakukan pengecekan apakah user pernah
melakukan pembelian produk yang dipilih atau belum, jika tidak maka sistem
akan menampilkan pesan yang menunjukkan bahwa user harus membeli produk
tersebut terlebih dahulu untuk memberikan rating dan komentar, jika user pernah
melakukan pembelian, maka user dapat langsung memasukkan nilai rating dan
komentar. Sistem akan mencatat nilai rating dan komentar ke dalam database
member review dan member rating. User yang dapat memberikan rating dan
komentar hanya user yang pernah pernah membeli produk tersebut. Flowchart
proses rating dan komentar dapat dilihat pada Gambar 3.11.

34
Universitas Kristen Petra

Gambar 3.11. Flowchart Proses Rating dan Komentar

3.3.2.6.

Flowchart Proses History Transaksi

Proses history transaksi dimulai dengan user memilih menu order

history dan detil. Pada halaman order history, data yang memiliki status pending
dan tanggal pembayaran sudah expired, link download tidak akan muncul,
sedangkan data yang tidak expired akan ditampilkan dengan link download yang
berisi file pdf . Flowchart proses history transaksi dapat dilihat pada Gambar 3.12.

35
Universitas Kristen Petra

Gambar 3.12. Flowchart Proses History Transaksi

3.3.2.7.

Flowchart Proses Banding Produk

Proses banding produk dimulai dengan user memilih fitur Bandingkan

Produk pada produk yang pertama, kemudian memilih produk kedua pada
combobox yang tersedia. Produk yang ditampilkan hanya produk yang memiliki
kategori sejenis. Selanjutnya, sistem akan menampilkan output hasil perbandingan
antara kedua produk tersebut. Flowchart proses banding produk dapat dilihat pada
Gambar 3.13.

36
Universitas Kristen Petra

Gambar 3.13. Flowchart Proses Banding Produk

3.3.2.8.

Flowchart Proses Master Produk

Master produk hanya dapat diakses oleh admin. Admin hanya dapat

melihat dan mengubah data produk yang ada. Data produk yang ditampilkan
hanyalah produk yang berstatus Aktif. Flowchart proses master produk dapat
dilihat pada Gambar 3.14.

37
Universitas Kristen Petra

Gambar 3.14. Flowchart Proses Master Produk

3.3.2.9.

Flowchart Proses Master Merk

Master merk hanya dapat diakses oleh admin. Admin hanya dapat

melihat, mengubah dan menghapus data produk yang ada. Flowchart proses
master merk dapat dilihat pada Gambar 3.15.

Gambar 3.15. Flowchart Proses Master Merk

3.3.2.10.

Flowchart Proses Master Member

38
Universitas Kristen Petra

Master member hanya dapat diakses oleh admin. Admin hanya dapat
melihat dan mengubah data produk yang ada. Flowchart proses master member
dapat dilihat pada Gambar 3.16.

Gambar 3.16. Flowchart Proses Master Member

3.3.2.11.

Flowchart Proses Master Kategori

Master kategori hanya dapat diakses oleh admin. Admin hanya dapat
melihat, mengubah dan menghapus data produk yang ada. Flowchart proses
master kategori dapat dilihat pada Gambar 3.17.

3.3.2.12.

Gambar 3.17. Flowchart Proses Master Kategori

Flowchart Proses Master Spesifikasi

39
Universitas Kristen Petra

Master spesifikasi hanya dapat diakses oleh admin. Admin hanya dapat
melihat, mengubah dan menghapus data produk yang ada. Flowchart proses
master spisifikasi dapat dilihat pada Gambar 3.18.

Gambar 3.18. Flowchart Proses Master Spesifikasi

3.3.2.13.

Flowchart Proses Master Spesifikasi Detil

Master spesifikasi detil hanya dapat diakses oleh admin. Admin hanya
dapat melihat, mengubah dan menghapus data produk yang ada. Flowchart proses
master spesifikasi detil dapat dilihat pada Gambar 3.19.

40
Universitas Kristen Petra

Gambar 3.19. Flowchart Proses Master Spesifikasi Detil

3.3.2.14.

Flowchart Proses Master Foto Produk

Master foto produk hanya dapat diakses oleh admin. Admin hanya dapat
melihat, mengubah dan menghapus data produk yang ada. Flowchart proses
master foto produk dapat dilihat pada Gambar 3.20.

Gambar 3.20. Flowchart Proses Master Foto Produk

3.3.2.15.

Flowchart Proses Laporan Penjualan

Laporan penjualan hanya dapat diakses oleh admin. Laporan penjualan

dapat diakses dengan cara admin memilih periode tanggal awal dan tanggal akhir
laporan yang diinginkan, kemudian sistem akan menampilkan laporan penjualan.
Flowchart proses laporan penjualan dapat dilihat pada Gambar 3.21.

41
Universitas Kristen Petra

Gambar 3.21. Flowchart Proses Laporan Penjualan

3.3.2.16.

Flowchart Proses Laporan Pembelian

Laporan pembelian hanya dapat diakses oleh admin. Laporan pembelian

dapat diakses dengan cara admin memilih periode tanggal awal dan tanggal akhir
laporan yang diinginkan, kemudian sistem akan menampilkan laporan pembelian.
Flowchart proses laporan pembelian dapat dilihat pada Gambar 3.22.

3.3.2.17.

Gambar 3.22. Flowchart Proses Laporan Pembelian

Flowchart Proses Ubah Status

Pada proses ubah status, admin dapat mengubah status penjualan dan
nomor resi yang belum terisi. Data tersebut akan di-update ke dalam database
penjualan. Flowchart proses ubah status dapat dilihat pada Gambar 3.23.

42
Universitas Kristen Petra

Gambar 3.23. Flowchart Proses Ubah Status

3.3.2.18. Flowchart Proses Pembelian
Pada proses pembelian, sistem akan menampilkan data penjualan yang
mempunyai status Sudah Terbayar Paypal atau Transfer yang berarti bahwa
user telah melakukan pembayaran. Admin kemudian melakukan pembayaran ke
supplier untuk mencatat tanggal pembayaran, kemudian admin dapat merubah
status penjualan dan nomor resi agar informasi tersebut dapat dilihat oleh user.
Flowchart Proses Pembelian dapat dilihat pada Gambar 3.24.

43
Universitas Kristen Petra

Gambar 3.24. Flowchart Proses Pembelian

3.3.2.19. Flowchart Proses Apriori
Pada proses apriori adalah mencari kombinasi barang yang sering
dibeli dalam suatu transaksi. Admin memasukkan minimum support dan
confidence agar hasil yang diinginkan sesuai. Hasil dari kombinasi tersebut
dinamakan itemset, itemset memiliki nilai confidence dan support. Itemset yang
tidak memenuhi nilai confidence dan support akan dihapus dari data. Setelah
semua proses kombinasi dan pengecekan nilai support dan confidence selesai
dilakukan, maka iterasi akan berhenti. Flowchart proses apriori dapat dilihat pada
Gambar 3.25.

44
Universitas Kristen Petra

Gambar 3.25. Flowchart Proses Apriori

3.3.3.
Entity Relationship Diagram
Pada sub bab ini dijelaskan tabel apa saja yang diperlukan dalam
pembuatan sistem. Dalam pembuatan ERD dibagi menjadi 2 bagian yaitu
Conceptual Data Model (CDM) dan Physical Data Model (PDM). CDM
menggambarkan

keseluruhan

struktur

logical

database,

dan

PDM

menggambarkan implementasi database secara fisik.

45
Universitas Kristen Petra

id_penjualan
id_member
session_id
tanggal
pincode
status
noresi
expired_date
grandtotal
nama_penerima
alamat_penerima
kota_penerima
no_penerima
kodepos_penerima
email_penerima
ongkir
payment_method
...

penjualan_detil

INTEGER
<pk>
INTEGER
<fk1>
pembelian_detil
INTEGER
<fk2>
id_pembelian_detil
INTEGER
VARCHAR2(255)
qty
VARCHAR2(255)

hargabeli
hargajual

merk
id_merk
nama_merk

FK_REMINDER_MEMILIKI1_PRODUK

FK_PENJUALA_MEMILIKI7_PRODUK

FK_PEMBELIA_MEMILIKI1_PRODUK
MEMILIKI
FK_PRODUK_F_MEMILIKI5_PRODUK

id_pembelian_detil
id_produk
id_pembelian
MEMILIKI
qty
hargabeli
hargajual
...

pembelian_detil

id_merk
INTEGER
<pk>
nama_merk VARCHAR2(255)

merk

id_penjualan_detik
id_produk
id_penjualan
qty
hargabeli
hargajual
...

id_penjualan
session_id
tanggal
pincode
status
noresi
expired_date
grandtotal
nama_penerima
alamat_penerima
kota_penerima
no_penerima
kodepos_penerima
email_penerima
ongkir
payment_method

penjualan

MEMILIKI

FK_SPESIFIK_MEMILIKI6_PRODUK

FK_SPESIFIK_MEMILIKI_KATEGORI

INTEGER
<pk>
INTEGER
<fk1>
INTEGER
<fk2>
VARCHAR2(255)
VARCHAR2(255)
VARCHAR2(255)
INTEGER
FLOAT
INTEGER
INTEGER

INTEGER <pk>
INTEGER <fk2>
INTEGER <fk1>
INTEGER
INTEGER

member

FK_SHOPPING_MEMILIKI2_MEMBER

id_shoppingcart
id_member
id_produk
session_id
qty
...

shoppingcart

MEMILIKI

FK_SHOPPING_MEMILIKI2_PRODUK

MEMILIKI

id_produk
id_merk
id_kategori
nama_produk
hargabeli
hargajual
stok
rating
jumrating
berat
...

MEMILIKI
produk

FK_PRODUK_MEMILIKI1_KATEGORI

id_kategori
INTEGER
<pk>
nama_kategori VARCHAR2(255)

kategori

MEMILIKI

apriori_maka

FK_APRIORI__MEMILIKI2_APRIORI

id_apriori_jika

apriori_jika

id_apriori_maka INTEGER <pk>

id_produk
INTEGER <fk2>
MEMILIKI
id_apriori
INTEGER <fk1>
...

spesifikasi_detil

INTEGER
<pk>
INTEGER
<fk1>
id_spesifikasi_detil
INTEGER
<fk2>
isi_spesifikasi
VARCHAR2(255)

spesifikasi_detil
MEMILIKI

id_spesifikasi_detil
id_spesifikasi
id_produk
isi_spesifikasi
...

qty

id_member_review INTEGER
<pk>
id_member
INTEGER
<fk2>
shoppingcart
id_produk
INTEGER
<fk1>
id_shoppingcart
isi_review
VARCHAR2(255)
...
session_id

member_review

MEMILIKI

apriori_jika

MEMILIKI

alamat
kodepos
nohp
facebook_id

MEMILIKI

member_rating
id_member_rating
nilai_rating

checkout
id_checkout
session_id
payment_method
data_penerima
total
ongkir
grandtotal

INTEGER <pk>
INTEGER <fk1>
INTEGER <fk2>
INTEGER

member_rating
id_member_rating
id_produk
id_member
nilai_rating
...

admin
INTEGER
<pk>
VARCHAR2(255)
VARCHAR2(255)

apriori
id_apriori
rules
support
confidence
jika
maka

admin
id_admin
id_adminusername
username
password
...
password

member_review
id_member_review
isi_review

id_apriori_jika INTEGER <pk>

id_produk
INTEGER <fk2>
id_apriori
INTEGER
<fk1>
MEMILIKI
...
MEMILIKI

setting
id_setting
INTEGER
<pk>
nama_setting VARCHAR2(255)
value
VARCHAR2(255)
...

produk
id_produk
MEMILIKI
nama_produk
apriori
hargabeli
FK_APRIORI__MEMILIKI2_PRODUK
id_apriori INTEGER
<pk>
hargajual
FK_APRIORI__MEMILIKI2_PRODUK
rules
VARCHAR2(255)
MEMILIKI
stok
MEMILIKI
apriori_maka
rating
FK_MEMBER_R_MEMILIKI1_PRODUK
jumrating
id_apriori_maka
FK_MEMBER_R_MEMILIKI1_PRODUK
berat
FK_APRIORI__MEMILIKI2_APRIORI
status

MEMILIKI

kategori
id_kategori
nama_kategori

MEMILIKI

spesifikasi
id_spesifikasi
nama_spes ifikasi

FK_SPESIFIK_MEMILIKI2_SPESIFIK

id_member INTEGER
<pk>
FK_MEMBER_R_MEMILIKI1_MEMBER
email
VARCHAR2(255)
MEMILIKI
FK_PENJUALA_MEMILIKI9_MEMBER
password
VARCHAR2(255)
MEMILIKI
nama
VARCHAR2(255)
FK_MEMBER_R_MEMILIKI1_MEMBER
kota
VARCHAR2(255)
MEMILIKI
alamat
VARCHAR2(255) FK_CHECKOUT_MEMILIKI1_MEMBER
checkout
kodepos
INTEGER
id_checkout
INTEGER
<pk>
nohp
VARCHAR2(25)
member
id_member
INTEGER
<fk> MEMILIKI
facebook_id VARCHAR2(255)
session_id
INTEGER
...
id_member
payment_method VARCHAR2(255)
email
data_penerima
VARCHAR2(255)
MEMILIKI
total
INTEGER
password
ongkir
INTEGER
nama
grandtotal
INTEGER
...
kota

FK_REMINDER_MEMILIKI1_MEMBER

spesifikasi
id_spesifikasi
INTEGER
<pk>
id_kategori
INTEGER
<fk>
nama_spesifikasi VARCHAR2(255)
...

FK_PRODUK_MEMILIKI3_MERK

reminder
id_reminder
status

INTEGER
<pk>
penjualan_detil
INTEGER
<fk1>
INTEGER id_penjualan_detik
<fk2>
INTEGER qty
VARCHAR2(255)
reminder
hargabeli
VARCHAR2(255)
id_reminder INTEGER
<pk>
hargajual
id_produk INTEGER
<fk1>
id_member INTEGER
<fk2>
status
VARCHAR2(255)
FK_PENJUALA_MEMILIKI8_PENJUALA
...

INTEGER
INTEGER
VARCHAR2(255)
VARCHAR2(255)

id_produk_foto
<pk>
<fk>foto
thumbnail

produk_foto

pembelian
id_pembelian
FK_PEMBELIA_MEMILIKI1_PEMBELIA
total
ongkir
grandtotal

INTEGER
<pk>
INTEGER
<fk>
INTEGER
DATE
VARCHAR2(255)
VARCHAR2(255)
VARCHAR2(255)
DATE
INTEGER
VARCHAR2(50)
VARCHAR2(100)
VARCHAR2(25)
VARCHAR2(25)
VARCHAR2(6)
VARCHAR2(100)
INTEGER
VARCHAR2(255)

penjualan

id_produk_foto
id_produk
foto
thumbnail
...

produk_foto

INTEGER <pk>
INTEGER
INTEGER
INTEGER

pembelian

id_pembelian
total
ongkir
grandtotal
...

Gambar

3.26.

Conceptual Data Model

Gambar 3.27. Physical Data Model

3.4. Desain Database

46

Universitas Kristen Petra

Pada sub bab ini dijelaskan mengenai tabel-tabel yang digunakan dalam
pembuatan website Petra Gaming Store.

Tabel Member
Tabel member digunakan untuk menyimpan data pelanggan dimana

pelanggan ini merupakan member dari Petra Gaming Store. Tabel ini berisi
id_member, email, password, nama, kota, alamat, kodepos, nohp, facebook_id.
Tabel member ini dapat dilihat pada Tabel 3.2.

Tabel 3.2. Tabel Member

Nama Field
Id_member
Email
Password
Nama
Kota
Alamat
Kodepos
Nohp
Facebook_id

Tipe Field
Int(10)
Varchar(20)
Varchar(20)
Varchar(20)
Varchar(20)
Varchar(150)
Int(6)
Varchar(25)
Varchar(20)

Keterangan
Primary key
Email untuk login
Password untuk login
Nama asli pelanggan
Kota asli pelanggan
Alamat asli pelanggan
Kodepos asli pelanggan
Nomor HP pelanggan
Facebook ID untuk login via facebook

Tabel Member review

Tabel member_review digunakan untuk member

yang ingin memberikan

komentar ataupun ulasan tentang produk yang dibelinya. Tabel ini berisi
id_member_review, id_produk, id_member, isi_review. Tabel member_review ini
dapat dilihat pada Tabel 3.3.

47
Universitas Kristen Petra

Tabel 3.3. Tabel Member Review

Nama Field
Id_member_review
Id_produk
Id_member
Isi_review

Tipe Field
Int(10)
Int(10)
Int(10)
Varchar(255)

Keterangan
Primary Key
Foreign Key
Foreign Key
Isi dari komentar atau ulasan

Tabel Member rating

Tabel member_rating digunakan untuk memberikan nilai rating pada suatu

produk yang dibeli oleh pelanggan. Tabel ini berisi id_member_rating, id_produk,
id_member, nilai_rating. Tabel member_rating ini dapat dilihat pada Tabel 3.4.
Tabel 3.4. Tabel Member Rating
Nama Field
Id_member_rating
Id_produk
Id_member
Nilai_rating

Tipe Field
Int(10)
Int(10)
Int(10)
int(10)

Keterangan
Primary Key
Foreign Key
Foreign Key
Nilai rating terhadap produk

Tabel Produk

Tabel produk digunakan untuk menyimpan data barang yang dijual oleh Petra
Gaming Store. Tabel ini berisi id_produk, nama_produk, id_merk, hargabeli,
hargajual, stok, rating, jumrating, berat, id_kategori. Tabel produk ini dapat dilihat
pada Tabel 3.5.

48
Universitas Kristen Petra

Tabel 3.5. Tabel Produk

Nama Field
Id_produk
Nama_produk
Id_merk
Hargabeli
Hargajual
stok
rating
Jumrating
Berat
Id_kategori
Status

Tipe Field
Int(10)
Varchar(100)
Int(10)
Varchar(25)
Varchar(25)
Int(10)
Float
Int(10)
Int(10)
Int(10)
Varchar(20)

Keterangan
Primary Key
Nama Barang
Foreign Key
Harga beli barang
Harga jual barang
Stok barang
Rating barang
Jumlah rating suatu barang
Berat barang
Foreign Key
Status Produk

Tabel Produk Foto

Tabel produk_foto digunakan untuk menyimpan data gambar dari suatu produk.
Tabel ini berisi id_produk_foto, id_produk, foto, thumbnail. . Tabel produk foto
ini dapat dilihat pada Tabel 3.6.
Tabel 3.6. Tabel Produk Foto
Nama Field
Id_produk_foto
Id_produk
Foto
Thumbnail

Tipe Field
Int(10)
Int(10)
Varchar(255)
Varchar(255)

Keterangan
Primary Key
Nama Barang
Path untuk foto
Path untuk foto thumbnail

49
Universitas Kristen Petra

Tabel Kategori

Tabel kategori digunakan untuk menentukan spesifikasi dari sebuah kategori.

Tabel ini berisi id_kategori dan nama_kategori. Tabel kategori ini dapat dilihat
pada Tabel 3.7.
Tabel 3.7. Tabel Kategori
Nama Field
Id_kategori
Nama_kategori

Tipe Field
Int(10)
Varchar(50)

Keterangan
Primary Key
Nama kategori

Tabel Merk

Tabel merk digunakan untuk menentukan merk dari sebuah produk. Tabel ini
berisi id_merk dan nama_merk. Tabel merk ini dapat dilihat pada Tabel 3.8.
Tabel 3.8. Tabel Merk
Nama Field
Id_merk
Nama_merk

Tipe Field
Int(10)
Varchar(50)

Keterangan
Primary Key
Nama merk

Tabel Spesifikasi

Tabel spesifikasi digunakan untuk memberi nama spesifikasi dari tiap kategori.
Tabel ini berisi id_spesifikasi, nama_spesifikasi, id_kategori. Tabel spesifikasi ini
dapat dilihat pada Tabel 3.9.
Tabel 3.9. Tabel Spesifikasi
Nama Field
Id_spesifikasi
Nama_spesifikasi
Id_kategori

Tipe Field
Int(10)
Varchar(50)
Int(10)

Keterangan
Primary Key
Nama Spesifikasi
Foreign Key

50
Universitas Kristen Petra

Tabel Spesifikasi Detil

Tabel spesifikasi_detil digunakan untuk mengisi dari isi nama spesifikasi. Tabel
ini berisi id_spesifikasi_detil, isi_spesifikasi, id_spesifikasi, id_produk. Tabel
spesifikasi detil ini dapat dilihat pada Tabel 3.10.
Tabel 3.10. Tabel Spesifikasi Detil
Nama Field
Id_spesifikasi_detil
isi_spesifikasi
Id_spesifikasi
Id_produk

Tipe Field
Int(10)
Varchar(25)
Int(10)
Int(10)

Keterangan
Primary Key
Isi Spesifikasi
Foreign Key
Foreign Key

Tabel Shopping Cart

Tabel shopping cart digunakan untuk menyimpan data barang apa saja yang
dipesan oleh pelanggan. Tabel ini berisi id_shoppingcart, id_member, session_id,
id_produk, qty. Tabel shopping cart ini dapat dilihat pada Tabel 3.11.
Tabel 3.11. Tabel Shopping Cart
Nama Field
Id_shoppingcart
Id_member
Session_id
Id_produk
Qty

Tipe Field
Int(10)
Int(10)
Varchar(50)
Int(10)
Int(10)

Keterangan
Primary Key
Foreign Key
Session dari sebuah cart
Foreign Key
Jumlah

51
Universitas Kristen Petra

Tabel Checkout

Tabel checkout digunakan untuk menyimpan seluruh data pemesanan pelanggan

sebelum diteruskan ke penjualan. Tabel ini berisi id_checkout, session_id,
id_member, payment_method, total, berat, ongkir, grandtotal, nama_penerima,
alamat_penerima,

kota_penerima,

no_penerima,

kodepos_penerima,

email_penerima. Tabel checkout ini dapat dilihat pada Tabel 3.12.

Tabel 3.12. Tabel Checkout
Nama Field
Id_checkout
Session_id
Id_member
Payment_method
Total
Berat
Ongkir
Grandtotal
Nama_penerima
Alamat_penerima
Kota_penerima
No_penerima
Kodepos_penerima
Email_penerima

Tipe Field
Int(10)
Varchar(50)
Int(10)
Varchar(10)
Int(25)
Int(10)
Int(25)
Int(25)
Varchar(50)
Varchar(100)
Varchar(25)
Varchar(25)
Varchar(6)
Varchar(50)

Keterangan
Primary Key
Session dari pemesanan
Foreign Key
Metode pembayaran
Total harga barang
Berat total pesanan
Ongkos kirim
Total keseluruhan
Nama pemesan
Alamat penerima pesanan
Kota penerima pesanan
Nomor Telefon penerima pesanan
Kodepos penerima pesanan
Email penerima pesanan

52
Universitas Kristen Petra

Tabel Penjualan

Tabel penjualan digunakan untuk pencatatan tentang data penjualan. Tabel ini
berisi id_penjualan, session_id, id_member, tanggal, pincode, status, noresi,
expired_date, grandtotal, nama_penerima, alamat_penerima, kota_penerima,
no_penerima, kodepos_penerima, email_penerima, ongkir, payment_method.
Tabel penjualan ini dapat dilihat pada Tabel 3.13.
Tabel 3.13. Tabel Penjualan

Nama Field
Id_penjualan
Session_id
Id_member
Tanggal
Pincode
Status
Noresi

Tipe Field
Int(10)
Varchar(50)
Int(10)
Date
Varchar(10)
Varchar(20)
Varchar(25)

Keterangan
Primary Key
Session dari sebuah penjualan
Foreign Key
Tanggal penjualan
Kode penjualan
Status penjualan
Nomor resi pengiriman
Masa berlaku sebelum
dinyatakan lunas

Expired_date

datetime

Grandtotal

Int(25)

Total biaya keseluruhan

Nama_penerima

Varchar(50)

Nama penerima pesanan

Alamat_penerima

Varchar(100)

Alamat penerima pesanan

Kota_penerima

Varchar(25)

Kota penerima pesanan

No_penerima
Kodepos_penerim
a
Email_penerima
Ongkir
Payment_method

Varchar(25)

Nomor telefon penerima pesanan

Varchar(6)

Kodepos penerima pesanan

Varchar(100)
Int(25)
Varchar(20)

Email penerima pesanan

Ongkos kirim
Jenis pembayaran

Tabel Penjualan Detil

53
Universitas Kristen Petra

Tabel penjualan_detil digunakan untuk mencatat data penjualan secara detail dari
proses penjualan. Tabel ini berisi id_penjualan_detil, id_penjualan, id_produk,
qty, hargabeli, hargajual. Tabel penjualan detil ini dapat dilihat pada Tabel 3.14.
Tabel 3.14. Tabel Penjualan_detil
Nama Field
Id_penjualan_detil
Id_penjualan
Id_produk
Qty
Hargabeli
Hargajual

Tipe Field
Int(10)
Int(10)
Varchar(50)
Int(10)
Int(25)
Int(25)

Keterangan
Primary Key
Foreign Key
Foreign Key
Jumlah
Harga beli
Harga jual

Tabel Pembelian

Tabel pembelian digunakan untuk mecatat data pemesanan kepada supplier. Tabel
ini berisi id_pembelian, total, ongkir, grandtotal. Tabel pembelian ini dapat dilihat
pada Tabel 3.15.
Tabel 3.15. Tabel Pembelian
Nama Field
Id_pembelian
Total
Ongkir
Grandtotal

Tipe Field
Int(10)
Int(25)
Int(25)
Int(25)

Keterangan
Primary Key
Total harga barang
Ongkos kirim
Total semua biaya

Tabel Pembelian Detil

54
Universitas Kristen Petra

Tabel pembelian_detil digunakan untuk mencatat data pembelian dari supplier

secara detil. Tabel ini berisi id_pembelian_detil, id_pembelian, id_produk, qty,
hargabeli, hargajual. Tabel pembelian detil ini dapat dilihat pada Tabel 3.16.
Tabel 3.16. Tabel Pembelian Detil
Nama Field
Id_pembelian_detil
Id_pembelian
Id_produk
Qty
Hargabeli
Hargajual

Tipe Field
Int(10)
Int(25)
Int(25)
Int(10)
Int(25)
Int(25)

Keterangan
Primary Key
Foreign key
Foreign key
Jumlah
Harga beli barang
Harga jual barang

Tabel Apriori

Tabel apriori digunakan untuk menentukan rule dan support dari suatu barang
untuk memberikan produk rekomendasi. Tabel ini berisi id_apriori, rule, support,
confidence. Tabel apriori ini dapat dilihat pada Tabel 3.17.
Tabel 3.17. Tabel Apriori
Nama Field
Id_apriori
Rule
Support
Confidence
jika
maka

Tipe Field
Int(10)
Varchar(50)
Int(10)
Float
Varchar(100)
Varchar(100)

Keterangan
Primary Key
Rule yang digunakan
Nilai support
Nilai confidence
Jika produk ini
Maka produk ini

Tabel Apriori_jika

55
Universitas Kristen Petra

Tabel apriori_jika digunakan untuk mencatat data jika produk ini. Tabel ini
berisi id_apriori_jika, id_apriori, id_produk. Tabel apriori jika ini dapat dilihat
pada Tabel 3.18.
Tabel 3.18. Tabel Apriori Jika
Nama Field
Id_apriori_jika
Id_apriori
Id_produk

Tipe Field
Int(10)
Int(10)
Int(10)

Keterangan
Primary Key
Foreign key
Foreign key

Tabel Apriori_maka

Tabel apriori_maka digunakan untuk mencata data maka produk itu. Tabel ini
berisi id_apriori_maka, id_apriori, id_produk. Tabel apriori maka ini dapat dilihat
pada Tabel 3.9.
Tabel 3.19. Tabel Apriori Maka
Nama Field
Id_apriori_maka
Id_apriori
Id_produk

Tipe Field
Int(10)
Int(10)
Int(10)

Keterangan
Primary Key
Foreign key
Foreign key

Tabel Reminder

Tabel reminder digunakan untuk mencatat jika ada barang yang kosong dan
pelanggan ingin meminta notifikasi jika barang tersebut sudah tersedia kembali.
Tabel ini berisi id_reminder, id_produk, id_member, status. Tabel reminder maka
ini dapat dilihat pada Tabel 3.20.

56
Universitas Kristen Petra

Tabel 3.20. Tabel Reminder

Nama Field
Id_reminder
Id_produk
Id_member
Status

Tipe Field
Int(10)
Int(10)
Int(10)
Varchar(100)

Keterangan
Primary Key
Foreign key
Foreign key
Status notifikasi

Tabel Admin

Tabel admin digunakan untuk hak akses login admin, dibedakan dengan tabel
member karena admin tidak memerlukan data seperti alamat, nama, dan lain-lain.
Tabel admin maka ini dapat dilihat pada Tabel 3.21.
Tabel 3.21. Tabel Admin
Nama Field
Id_admin
Username
Password

Tipe Field
Int(10)
Varchar(50)
Varchar(50)

Keterangan
Primary Key
Username untuk login
Password untuk login

57
Universitas Kristen Petra

3.5. Desain Menu

3.5.1.

Desain Menu untuk Halaman Utama

Gambar 3.28. Desain Menu Halaman Utama

Gambar 3.28. merupakan tampilan halaman utama yang mana dapat
diakses baik member maupun guest meliputi halaman index, search produk, detil
produk, register/login, konfirmasi pembayaran dan pemesanan.

3.5.2.

Desain Menu untuk Halaman Member

Gambar 3.29. Desain Menu Halaman Member

58
Universitas Kristen Petra

Gambar 3.29. merupakan halaman member meliputi edit data, lihat

history transaksi, lihat transaksi yang belum terbayar, reminder.

3.5.3.

Desain Menu untuk Halaman Admin

Gambar 3.30. Desain Menu Halaman Admin

Gambar 3.30 merupakan halaman admin, terdapat data member yang
hanya dapat dihapus, data produk yang dapat ditambah, diedit dan dihapus, data
penjualan yang dapat di rubah statusnya, data pembelian dan laporan yang hanya
dapat dilihat dan yang terakhir apriori yang hanya dapat dilihat dan refresh.

3.6. Desain Interface

Pada desain user interface dibuat tampilan menu yang menggunakan web
yang di dalamnya meliputi fasilitas menu-menu yang dapat diakses oleh
pengguna. Main menu (Menu Utama) terdapat pada bagian header pada tampilan
web, berfungsi sebagai menu utama yang meliputi sub-menu untuk mengakses

59
Universitas Kristen Petra

program. Menu-menu tersebut dapat diakses berbeda-beda tergantung pada login

yang digunakan pengguna saat itu, berikut pembagian menu untuk masing-masing
pengguna:
Admin :

Master data

Master Produk

Master Member

Master Merk

Master Spesifikasi

Master Kategori

Master Foto Produk

Master Penjualan

Master Pembelian

Apriori

Laporan Laba Rugi

Member :
a. Home
b. Contact Us
c. Detil Produk
d. Bandingkan Produk
e. Shopping Cart

60
Universitas Kristen Petra

f. Rating Produk
g. Pembelian Produk
h. Informasi Akun

3.6.1.

User Interface halaman awal

Halaman utama akan muncul pertama kali ketika website diakses seperti
pada Gambar 3.31. Sehingga pengunjung yang tidak melakukan proses login tetap
dapat melihat halaman web yang tersedia fitur perbandingan produk, search
produk, rekomendasi produk yang ditawarkan Petra Gaming Store beserta harga.

Gambar 3.31. User Interface Halaman Awal

3.6.2.

User Interface halaman detil produk

61
Universitas Kristen Petra

Pada halaman detil produk akan muncul data produk disertai harga dari
setiap produk, review produk, spesifikasi produk, dan rating produk. Halaman ini
dapat diakses oleh semua pengguna. Halaman detil produk dapat dilihat pada
Gambar 3.32.

Gambar 3.32. User Interface Detil Produk

3.6.3.

User Interface halaman perbandingan produk

Pada halaman perbandingan produk akan muncul sebuah combobox

untuk memilih produk lain sejenis yang dapat dibandingkan, misal produk a
adalah mouse, maka produk yang dapat dibandingkan hanyalah mouse saja.
Halaman ini dapat diakses oleh semua pengguna. Halaman perbandingan produk
dapat dilihat pada Gambar 3.33.

62
Universitas Kristen Petra

Gambar 3.33. User Interface Perbandingan Produk

3.6.4.

User Interface halaman shopping cart

Saat pengguna sudah selesai memilih produk yang diinginkan, maka

pengguna melanjutkan ke halaman cart untuk melihat produk apa saja yang sudah
pengguna masukkan. Halaman shopping cart diberikan rekomendasi produk agar
pengguna dapat mempertimbangkan apakah pengguna ingin membeli produk dari
rekomendasi tersebut atau tidak. Rekomendasi produk hanya muncul apabila isi
dari shopping cart lebih dari satu produk. Halaman shopping cart dapat dilihat
pada Gambar 3.34.

63
Universitas Kristen Petra

Gambar 3.34. User Interface Shopping Cart

3.6.5.

User Interface halaman Shipping

Saat pengguna sudah mengisikan form data pengiriman, maka API

ongkir.info memberikan informasi ongkos kirim kepada pengguna agar dapat
mengetahui ongkos kirim secara langsung dan memilih radio button yang
disediakan seperti pada Gambar 3.35.

64
Universitas Kristen Petra

Gambar 3.35. User Interface Ongkos Kirim

3.6.6.

User Interface halaman login

Member dapat melakukan login dengan cara menekan link login dan
mengisi username dan password yang sudah disediakan. Apabila login sukses
ataupun gagal, sistem akan memunculkan alert yang berada pada tengah halaman.
Fitur yang dimiliki oleh admin hanya muncul ketika admin sukses melakukan
proses login, dan fitur ini tidak dapat ditampilkan saat pengguna login sebagai
pengguna lain selain admin.
Login/sign up with facebook akan muncul apabila pengguna sebelumnya
sudah ter-login ke dalam facebook lalu sistem melakukan pengecekan ke
database. Halaman login dapat dilihat pada Gambar 3.36.

Gambar 3.36. User Interface Login

3.6.7.

User Interface halaman apriori

Halaman apriori ini hanya dapat diakses oleh admin saja. Halaman ini
digunakan untuk memberikan proses algoritma apriori dari awal hingga akhir
proses. Tujuan dari halaman ini adalah untuk memberikan rekomendasi produk

65
Universitas Kristen Petra

yang nantinya digunakan di halaman shopping cart. Halaman apriori dapat dilihat
pada Gambar 3.37.

Gambar 3.37. User Interface Apriori

3.6.8.

User Interface halaman master produk

Saat pengguna mengakses menu master yang berada di menu navigasi di

samping layar, maka muncul beberapa pilihan untuk menampilkan beberapa
master data produk, merk, kategori, spesifikasi dan laporan. Pada Gambar 3.38,
pengguna memilih master produk untuk menambah, memperbarui serta
menghapus data.
Ketika pengguna hendak menambahkan data produk baru, pengguna
dapat mengisi data pada textbox atau combobox yang telah disediakan, selanjutnya
pengguna dapat menggunakan tombol submit untuk menyimpan data produk yang
baru ke dalam database. Apabila data ada yang kosong, maka akan muncul alert
untuk memberitahu pengguna. Selain itu ada pula fitur edit data yang berada di
sebelah tombol hapus. Untuk menghapus data produk, di setiap baris tabel akan

66
Universitas Kristen Petra

muncul tombol berwarna merah yang berfungis untuk mengapus data produk
seperti pada Gambar 3.38.
Desain tampilan ini juga akan digunakan untuk halaman lain yang
memiliki fungsi serupa, yaitu untuk menambahkan data baru ke dalam database
maupun memperbarui dan menghapus data. Halaman lainnya yang menggunakan
desin serupa antara lain adalah master merk, kategori, spesifikasi, member,
produk, dan laporan.

Gambar 3.38. User Interface Master Produk

67
Universitas Kristen Petra