BAB III

METODE PENELITIAN

3.1 Tahapan Penelitian

Tahapan penelitian adalah tahapan yang harus direncanakan

saat melakukan penelititan, data yang direncanakan adalah:

3.1.1. Perumusan Masalah

Bagaimana Membangun e-marketplace UMKM berbasis

web di kacamatan sakra.

3.1.2. Penentuan Judul Penelitian

Berdasarkan yang telah dilakukan pada objek penelitian,

maka penulis menentukan judul penelitian sesuai dengan

masalah yang diteliti yaitu membangun rancang e-marketplace

UMKM Berbasis web di kacamatan sakra.

3.1.3. Penentuan Tujuan

Penentuan tujuan berfungsi untuk memperjelas tentang apa

saja yang menjadi sasaran dari penelitian ini. Adapun Tujuan

penelitian ini membuat Rancang bangun e-marketplace UMKM

berbasis web di kacamatan sakra.

3.1.4. Studi Pustaka

Studi pustaka dilakukan dengan mencari teori-teori apa

yang akan digunakan untuk menyelesaikan permasalahan yang

akan diteliti, serta mendapatkan dasar-dasar referensi yang kuat

1
 bagi peneliti untuk merancang dan bangun E-marketplace

UMKM berbasis web di kacamatan sakra.

3.2 Metode Pengumpulan Data

Pada tahap ini dilakukan pengumpulan data untuk lebih

mengetahui mengenai permasalahan yang diteliti. Dari data yang

dikumpulkan akan dapat diketahui mengenai system yang

digunakan pada saat ini. Data-data dapat diperoleh melalui

wawancara langsung. Dalam hal ini objek penelitian berada di

Kacamatan sakra. Adapun data-data yang diperlukan dalam

penelitian ini adalah

3.2.1. Wawancara

Untuk penyebaran kusioner kepada UMKM dengan isi

kusioner tersebut bagaimana proses dan masalah yang

membangun dan merancang e-marketplace.

3.2.2. Observasi

Observasi merupakan salah satu teknik yang digunakan

untuk pengumpulan data. Dalam teknik observasi, penulis

melakukan pengamatan secara langsung dengan meninjau

bagaimana proses penjualan pada UMKM.

3.2.3. Studi Pustaka

Studi pustaka merupakan teknik pencarian dengan

melakukan data lewat literature-literatur yang berkaitan

2
 misalnya buku-buku refernsi,artikel atau jurnal dan situs

internet.

3.3 Metode Pengembangan Sistem

Untuk mengerjakan tugas akhir ini digunakan metode

pengembangan prototype dalam membangun aplikasi.Prototype

merupakan sebuah metode pengembangan perangkat lunak yang

memiliki fokus pada user experience. Menurut (Pressman, 2002),

seringkali seorang pelanggan mendefinisikan serangkaian sasaran

umum bagi perangkat lunak, tetapi tidak mengidentifikasi

kebutuhan input, pemrosesan, ataupun secara detail.

Proses pengembangan pada metode prototype terdiri dari

beberapa iterasi tergantung pada kepuasan klien terhadap

prototype yang dibuat. Pada tugas akhir ini pengembang

menggunakan metode pro totype evolusioner.Prototype evolusioner

adalah dimana prototype yang telah dibangun terus disempurnakan

sampai prototype tersebut menjadi sistem yang benar-benar siap

untuk oleh klien

3.3.1. Mendengarkan Pengguna

Mendengar dan mewawancari klien merupakan langkah

awal dalam metode prototype. Dan dalam tahapan ini dilakukan

dengan klien untuk mendapatkan informasi tentang kebutuhan

untuk analisis kebutuhan sistem. Dalam penelitian ini wawancara

dan observasi terhadap proses pengiinputan data pelanggan.

3
 Setelah mewawancara dan menggali segala informasi,

langkah selanjutnya yang dilakukan adalah menganalisis informasi

yang dapat untuk menyusun spesifikasi dan fungsi awal aplikasi.

Dari wawancara yang telah dilakukan informasi yang didapat hanya

garis besarnya saja dan selebihnya klien menyarankan

pengembang untuk mencari reverensi di luar untuk di

implementasikan pada sistem yang akan dibangun. Setelah

informasi dan reverensi didapat cukup, langkah selanjutnya adalah

melakukan analisis terhadap informasi yang didapat. Hasil analisis

ini akan digunakan untuk langkah selanjutnya.

3.3.2. Membangun Prototype

Tahap kedua setelah mendengarkan pengguna ialah

membangun prototype (Mpro). Pada tahap ini ada dua hal yang

dilakukan pengembang yaitu perancangan cepat (p) dan

pembangunan prototype (pp).Kedua hal ini dilakukan secara

beriringan karena perancangan dan pembangunan prototype saling

terkait satu samalain. Prototype harus dibangun sesuai dengan

yang telah dirancang sebelumnya. Setelah sebelumnya informasi

yang didapat melalui wawancara lalu di analisa untuk mendapatkan

spesifikasi aplikasi yang akan dibuat, langkah selanjutnya adalah

melakukan perancangan cepat terhadap spesifikasi yang telah

terbentuk.

4
 Pada tahap Mpro1, perancangan awal yang dibuat adalah

perancangan basisdata. Untuk perancangan basisdata digunakan

Entity Relationship Diagram (ERD) dan Data Flow Diagram (DFD).

ERD digunakan untuk perancangan basisdata yang digunakan

sistem, sedangkan DFD digunakan untuk melihat arah data

mengalir untuk setiap proses di aplikasi..

3.4 Perancangan Sistem

Perancangan sistem pada penelitian ini melibatkan

beberapa diagram dan user interface dalam pembuatan rancang

bangun Website E-Marketplace Pada UMKM. Beberapa alur data

didapat pada saat pengumpulan data yaitu: Analisa Kebutuhan

Sistem, statement of purpose (SOP), event list, dan data flow

diagram.

3.4.1 Statement Of Purpose (SOP)

Rancang bangun UMKM digunakan sebagai media

promosi dan transaksi kepada pelanggan UMKM yang tidak

dapat dijangkau oleh pengelola usaha baik di dalam maupun

diluar daerah. Website ini menampilkan informasi tentang

UMKM seperti profile, produk-produk yang dijual, cara

melakukan transaksi, serta promosi produk unggulan.

5
6
 3.4.2 Event List

Daftar event list yang akan digunakan dalam sistem

website e-marketplace pada UMKM sebagai berikut:

1. Login

2. Mengelola Data Admin

2.1. Tambah data admin

2.2. Ubah data admin

3. Mengelola Data Barang

3.1. Tambah barang

3.2. Ubah data barang

3.3. Cari data barang

4. Mengelola Data Stok Barang

4.1. Tambah data stok barang

4.2. Cari data stok barang

5. Mengelola Data Pelanggan

5.1. Daftar data pelanggan

5.2. Ubah data pelanggan

6. Mengelola Data Pesanan

6.1. Tambah data pesanan

6.2. Konfirmasi data pembayaran

6.3. Validasi data pembayaran

7. Mengelola Laporan

6.1. Laporan data barang

7
 6.2. Laporan data transaksi

3.5 Contex Diagram

Contex Diagram website e-marketplace UMKM, bertujuan untuk

memetakkan keseluruhan sistem dimana admin, pemilik dan pelanggan

dapat mengelola sistem. Gambar Contex Diagram terdapat pada Gambar

3.1.

Gambar 3.1 Contex Diagram

3.6 Data Flow Diagram (DFD)

Data flow diagram digunakan untuk memodelkan dan

menggambarkan alur dari sistem website e-marketplace pada UMKM.

Berikut adalah data flow diagram yang akan digunakan sebagai model

dari pembuatan sistem website e-marketplace.

Data Flow Diagram Level 0

8
 Data flow diagram level 0, Terdapat entitas yang terkait pada

sistem website UMKM yaitu entitas admin, Owner dan pelanggan. Dan

terdapat tujuh proses yaitu proses login, mengelola data admin,

mengelola data barang, mengelola data stok barang, mengelola data

pelanggan, mengelola data pesanan, pembayaran dan laporan. Gambar

data flow diagram level 0 terdapat pada Gambar 3.2.

Login Login
Info Login
Info Login
Login Logi n
Info Login 1 Owner
1 Data Admin
Logi n Info Login

Data Adm in

Info Data Admi n

2
Mengelola Data Adm in Data admin

Info Data Admi n

Data Barang
Data Barang
Info Data Barang 3
Mengelola Data Info Data Barang 2 Data Barang
Data Barang
Barang
Info Data Barang

Data Stok Barang Data Stok Barang

4 Info Data Stok Barang
Info Data Stok Barang
Mengelola Data Stok Data Stok Barang
Barang
Info Data Stok Barang 3 Data Stok Barang
Admin Pel anggan

Data Pelanggan
5 Data Pelanggan

Megelol a Data
4 Data Pelanggan
Info Data Pelanggan Pelanggan Info Data Pelanggan

Pesanan Tambah
Info Data Barang
Info Pesanan T ambah Data Pesanan
Konfirmasi Pembayaran 6
Info Data Pesanan
Mengelola Data
Info konfirmasi Pembayaran
Pesanan

Data Pesanan 5 Data Pesanan

Info Data Pesanan

Data Pesanan
Info Data Pesanan

Data Stok Barang

Validasi pembayaran 7
Info Validasi Pembayaran Info Data Stok Barang
Mengelola Laporan

Laporan Penjualan

Info Laporan Penjualan

Gambar 3.2 DFDLevel0

3.7 DFD Level 1 Mengelola Data Admin

Data flow diagram level 1 mengelola data admin, proses dalam

mengelola data admin yaitu, Owner dapat melakukan tambah data

9
 admin dan ubah data admin. Gambar Data flow diagram level 1

mengelola data admin terdapat pada gambar 3.2

Tambah Data Admin Data Admin
2.1
Tambah Data
Info Tambah Data Admin Info Data Admin
Admin

Owner
1 Data Admin

Data Admin
Ubah Data Admin
2.2

Info Ubah Data Admin Ubah Data Admin Info Data Admin

Gambar 3.3 DFD Leve 1 Mengelola Data Admin

3.8 DFD Level 1 Mengelola Data Barang

Data flow diagram level 1 mengelola data barang, admin dapat

melakukan 3 proses yaitu, tambah data barang, ubah data barang, dan

cari data barang. Gambar data flow diagram level 1 mengelola data

barang terdapat pada gambar 3.4.

10
 Tambah Data Barang Data Barang
3.1
Tambah Data Info Data Barang
Info Tambah Data Barang
Barang

Ubah Data Barang Data Barang

Admin
3.2
Info Ubah Data Barang Ubah Data Barang Info Data Barang 2 Data Barang

Cari Data Barang Data Barang

3.3
Cari Data Barang Info Data Barang
Info Cari Data Barang

Gambar 3.4 DFD Level 1 Mengelola Data Barang

3.9 DFD Level 1 Mengelola Data Stok Barang

Data flow diagram level 1 mengelola data stok barang. Admin dapat

melakukan tambah stok barang dan cari stok barang.. Gambar data flow

diagram level 1 mengelola data stok barang terdapat pada Gambar 3.5.

Cari Data Stok Barang Data Stok Barang

4.1 Info Data Stok Barang

Info Cari Data Stok Barang Cari Data Stok Barang

Admin

3 Data Stok Barang

Tambah Data Stok Barang

Data Stok Barang
4.2
Tambah Data Stok Info Data Stok Barang
Info Tambah Data Stok Barang Barang

Gambar 3.5 DFD Level 1 Mengelola Data Stok Barang.

3.10 DFD Level 1 Mengelola Data Pelanggan

Data flow diagram level 1 mengelola data pelanggan. Pelanggan.

Pelanggan yang belum memiliki akun dapat mendaftar data pelanggan,

dan ubah data pelanggan. Gambar data flow diagram level 1 mengelola

data pelanggan terdapat pada Gambar 3.6.

11
 Daftar Data Pelanggan Data Pelanggan
5.1

Info Daftar Data Pelanggan Daftar Data Info Data Pelanggan

Pelanggan

Pelanggan
4 Data Pelanggan

Ubah Data Pelanggan Data Pelanggan

5.2
Ubah Data
Info Ubah Data Pelanggan Pelanggan Info Data Pelanggan

Gambar 3.6 DFD Level 1 Mengelola Data Pelanggan

3.11 DFD Level 1 Mengelola Data pesanan

Data flow diagram level 1 mengelola data pesanan. Memiliki dua

entitas yaitu entitas pelanggan dan admin, pelanggan dapat melakukan

tambah pesanan dan konfirmasi pesanan, sedangkan admin dapat

melakukan validasi pembayaran. Gambar data flow diagram level 1

mengelola data pesanan terdapat pada Gambar 3.7.

Data Barang
T am bah Pesanan
Info Data Barang
Info T ambah Pesanan

Pelanggan 6.1
T am bah Pesanan 2 Data Barang

Data Pesanan
Info Data Pesanan

Konfirmasi Pembayaran Data Pesanan

6.2
Konfirm asi
Info Konfirmasi Pesanan Info Data Pesanan
Pem bayaran

Admi n Data Pesanan

6.3
Vali dasi Info Data Pesanan 5 Data Pesanan
Pembayaran

Vali dasi Pembayaran

Info Validasi Pem bayaran

Gambar 3.7 DFD Level 1 mengelola data pesanan

3.12 DFD Level 1 Mengelola Laporan

12
 Data flow diagram level 1 mengelola data laporan, Owner dapat

melihat dan mencetak laporan data barang, dan owner juga dapat melihat

laporan data transaksi pelanggan yang sudah melakukan transaksi.

Gambar data flow diagram level 1 mengelola laporan terdapat pada

Gambar 3.8.

Laporan Data Stok Barang

7.1
Info Laporan Data Stok Barang Laporan Data Stok
Barang

Owner Data Stok Barang

Info Data Stok Barang 3 Data Stok Barang

Data Pesanan
Laporan Penjualan
7.2 Info Data Pesanan
Info Laporan Penjualan Laporan Penjualan

5 Data Pesanan

Gambar 3.8 DFD level 1 Mengelola laporan.

3.13 Conceptual Data Model (CDM)

Conceptual Data Model (CDM) perancangan E-Marketplace pada

UMKM. Dimana terdiri dari Lima tabel yaitu tabel admin, tabel pelanggan,

tabel barang, tabel pesanan, dan table stok barang.Gambar Conceptual

Data Model (CDM) terdapat pada Gambar 3.10.

13
 Gambar 3.9Conceptual Data Model (CDM)

3.14 Physical Data Model (PDM)

Physical Data Model (PDM), dibawah ini merupakan hasil generate

dari conceptual data model (CDM). Physical Data Model akan

memperlihatkan relasi dari tujuh tabel yang saling berhubungan. Gambar

Physical Data Model (PDM) terdapat pada Gambar 3.11.

14
 Gambar 3.10Physical Data Model (PDM)

3.2 Struktur Tabel Basis Data

Basis data digunakan untuk menyimpan data-data dari pembuatan

website e-Marketplacepada UMKM. Adapun struktur tabel database yang

akan digunakan pada website ini adalah sebagai berikut.

1. Table Admin

Berikut merupakan Tabel admin, digunakan untuk menyimpan data

admin. Data yang disimpan seperti, id_admin, nama_admin, Alamat,

No_telepon, dan Jenis_kelamin ,username, password, level . Berikut

adalah struktur tabel data admin pada tabel 3.1.

15
 N Field Tipe Length Keterangan

1 Id_Admin Integer - Primary Key

2 Nama_Admin Varchar 30 Not Null

3 Alamat Varchar 30 -

4 No_Telepon Varchar 20 -

5 Jenis_Kelamin Varchar 20 -

6 Username Varchar 20 -

7 Password Varchar 20 -

Tabel 3.1 Tabel Admin

2. Table Barang

Berikut merupan Tabel barang, berisi data barang yang digunakan

untuk menyimpan data barang.Data yang di simpan seperti, Id_barang,

Nama_barang, Harga_barang, Jumlah_barang, foto_barang.Berikut

adalah struktur tabel data barang pada tabel 3.2.

No Field Tipe Length Keterangan

1 Id_barang Integer - Primary Key

2 Nama_Barang Varchar 30 Not null

16
 3 Harga_ Barang Characters 20 -

4 Jumlah_Barang Integer - -

5 Foto_Barang Varchar 20 -

3. Table Pelanggan

Tabel pelanggan berisi data pelanggan yang digunakan untuk login

dan menyimpan data pelanggan seperti Id_pelanggan, Nama_pelanggan,

No_telepon, Jenis_kelamin, username, password.Berikut adalah struktur

tabel data kategori pada tabel 3.3.

c Field Tipe Lengt Keteranga

h n

1 Id_Pelanggan Integer - Primary Key

2 Nama_Pelangga Varcha 30 Not Null

n r

3 Alamat Varcha 30 -

4 No_Telepon Varcha 20 -

5 Jenis_Kelamin Varcha 20 -

6 Username Varcha 20 -

7 Password 17
Varcha 20 -

r
 4. Table Pesanan

Tabel pesanan, berisi data pesanan yang digunakan untuk

menyimpan data pesanan.Data yang di simpan seperti, Id_pesanan,

Jumlah_pesanan, Tanggal_pesanan, total_pesanan, id_bayar,

tanggal_bayar, jumlah_bayaran.Berikut adalah struktur tabel data

pesanan pada tabel 3.4.

N Field Tipe Lengt Keteranga

o h n

1 Id_Pesanan Intege - Primary Key

2 Jumlah_Pesana Intege - -

n r

3 Tanggal_Pesan Date - -

4 Total_Pesanan Intege - -

5 Id_bayar Intege - -

6 Tanggal_bayar Date - -

7 Jumlah_bayara Intege - -

n r

18
 5. Table Penjualan

Tabel Penjualan, berisi data Penjualan yang digunakan untuk

menyimpan data penjualan. Data yang disimpan seperti, Id_penjualan,

Tanggal_penjualan, Total_penjualan. Berikut adalah struktur tabel data

Penjualan pada tabel 3.5.

Tabel 3.5 Tabel Penjualan

N Field Tipe Lengt Keterang

o h an

1 Id_Penjualan Varch 20 Primary

ar Key

2 Tanggal_Penjual Date - -

an

3 Total_Penjualan Doubl - -

6. Table Stok Barang

Tabel Stok Barang, berisi data Stok Barang yang digunakan untuk

menyimpan data penjualan. Data yang disimpan seperti, Kode_Barang,

Nama_Barang, Tanggal, Jumlah, foto_barang, Berikut adalah struktur

tabel data Penjualan pada tabel 3.6.

Table 3.6 Table Stok Barang

19
 N Field Tipe Lengt Keteranga

o h n

1 Kode_Barang Integer - Primary Key

2 Nama_Baran Varcha 30 -

g r

3 Tanggal Date - -

4 Jumlah Integer - -

5 Foto_barang Varcha 20 -

1. Table Transaksi

Tabel Transaksi, berisi data Transaksi yang digunakan untuk

menyimpan data pesanan. Data yang di simpan seperti, Id_bayar,

Total_Belanja, Konfirmasi_pembayaran. Berikut adalah struktur tabel data

pesanan pada tabel 3.7.

Table 3.7 Table Data Transaksi

20
 N Field Tipe Leng Keteran

o th gan

1 Id_Bayar Integ - Primary

er Key

2 Total_Belanja Varch 30 -

ar

3 Konfirmasi_pembay Varch 10 -

aran ar

7.

3.3.1

3.3.2

3.3.3

3.3.4

3.3.5

3.3.1. Perancangan Antarmuka (User Interface)

Adapun perancangan antarmuka (user interface) yang akan

digunakan pada pembuatan website e-marketplace UMKMadalah

sebagai berikut

1. Rancangan User Interface Halaman Utama

Rancangan halaman menu utama pelanggan.Dimana pada

halaman utama ini, terdapat beberapa menu yaitu home, product, cari,

21
dan login. Gambar Rancangan User Interface Halaman Utama

terdapat pada Gambar 3.11

Gambar 3.11 User Interface Halaman Utama

2. Rancangan User Interface Halaman Login Pelanggan

Rancangan halaman login pelanggan, dimana pada halaman login

pelanggan ini, pelanggan menginputkan username dan password jika

sudah memiliki akun dan mengisi form registrasi jika belum memiliki

akun pada E-Marketplace UMKM. Gambar Rancangan User Interface

Halaman Login Pelanggan terdapat pada Gambar 3.12

22
 r

Gambar 3.12 Interface Halaman Login Pelanggan

3. Rancangan User Interface Halaman Daftar Pelanggan

Rancangan halaman daftar pelanggan.Pada halaman daftar

pelanggan ini, menampilkan form untuk daftar pelanggan sebelum

melakukan login dan transaksi pembelian barang padaUMKM. Gambar

Rancangan User Interface Halaman Daftar Pelanggan terdapat pada

Gambar 3.13

23
 Gambar 3.13User Interface Halaman Daftar Pelanggan

4. Rancangan User Interface Halaman Profile Pelanggan

Rancangan halaman profile pelanggan.pada halaman ini,

menampilkan data pelanggan. Gambar Rancangan User Interface

Halaman Profile Pelanggan terdapat pada Gambar 3.14.

Gambar 3.14 User Interface Halaman Profil Pelanggan

24
5. Rancangan User Interface Halaman Ubah Profile Pelanggan

Rancangan halaman profile pelanggan.Pada halaman ini, pelanggan

dapat mengubah data pelanggan. Gambar Rancangan User Interface

Halaman Ubah Profile Pelanggan terdapat pada Gambar 3.15

Gambar 3.15 User Interface Halaman Ubah Profile Pelanggan

6. Rancangan User Interface Halaman Barang Pelanggan

Rancangan halaman barang untuk pelanggan.Pada halaman ini

pelanggan dapat melihat barang yang tersedia di E-Marketplace

UMKM. Gambar Rancangan User Interface Halaman Barang

Pelanggan terdapat pada Gambar 3.16

25
 Gambar 3.16 User Interface Halaman Barang Pelanggan

7. Rancangan User Interface Halaman Detail Barang

Rancangan halaman pesanan.Pada halaman ini, menampilkan barang

yang telah dipesan oleh pelanggan tetapi belum melakukan transaksi

pembayaran. Gambar Rancangan User Interface Halaman Pesanan

terdapat pada Gambar 3.17

GAMBAR 3.17 USER INTERFACE HALAMAN ADMIN

8. Rancangan User Interface Halaman Pesanan

26
Rancangan halaman pesanan.Pada halaman ini, menampilkan barang

yang telah dipesan oleh pelanggan tetapi belum melakukan transaksi

pembayaran.Gambar Rancangan User Interface Halaman Pesanan

terdapat pada Gambar 3.18.

Gambar 3.18User Interface Halaman Pesanan

9. Rancangan User Interface Halaman Transaksi Pembayaran

Rancangan halaman pembayaran.Pada halaman ini, pelanggan dapat

melakukan pembayaran melalui BANK. Gambar Rancangan User

Interface Halaman Transaksi Pembayaran terdapat pada Gambar 3.19

27
 Gambar 3.19 User Interface Halaman Transaksi Pembayaran

10. Rancangan User Interface Halaman Bukti Pembayaran

Rancangan halaman bukti pembayaran.Pada halama ini, pelanggan

dapat Upload bukti pembayaran. Gambar Rancangan User Interface

Halaman Bukti Pembayaran terdapat pada Gambar 3.20

Gambar 3.20 User Interface Halaman Bukti Pembayaran

28
11. Rancangan User Interface Halaman Login Admin

Rancangan halaman login admin dan Owner. Pada halaman ini,

menampilkan halaman login admin dan Owner, dimana menggunakan

username dan password yang sudah terdaftar. Gambar Rancangan

User Interface Halaman Login Admin terdapat pada Gambar 3.21

Gambar 3.21 User Interface Halaman Login Admin

12. Rancangan User Interface Halaman Utama Admin

Rancangan halaman utama admin. Pada halaman ini,

menampilkan halaman yang terdiri dari menu home, produk, stok,

pelanggan, pesanan, dan pembayaran. Gambar Rancangan User

Interface Halaman Utama Admin terdapat pada Gambar

29
 Gambar 3.22 User Interface Halaman Utama Admin

13. Rancangan User Interface Halaman Data Barang

Rancangan halaman mengelola data barang, dimana pada

halaman ini admin dapat input data barang. Data barang yang dapat di

input yaitu, nama produk, harga, stok, dan gambar. Halaman data

barang terdapat pada Gambar 3.23

Gambar 3.23 User Interface Halaman Data Barang

30
14. Rancangan User Interface Halaman Ubah Data Barang

Rancangan halaman ubah data barang. Pada halaman ini,

menampilkan form ubah data barang. Halaman ini dapat di akses oleh

admin. Gambar Halaman ubah data barang terdapat pada Gambar

3.24

Gambar 3.24 User Interface Halaman Ubah Data Barang

15. Rancangan User Interface Halaman Tambah Data Stok Barang

Rancangan halaman tambah data stok barang. Pada halaman ini,

menginputkan nama barang, jumlah, ukuran, foto barang, dan

keteranganform ubah data barang. Halaman ini dapat di akses oleh

admin. Gambar Halaman tambah data stok barang terdapat pada

Gambar 3.25

31
 Gambar 3.25User Interface Halaman Tambah Data Stok Barang

16. Rancangan User Interface Halaman cari Data Stok Barang

Rancangan halaman cari data stok barang.Pada halaman ini, admin

dapat mencari data stok barang.Halaman ini dapat di akses oleh

admin.Gambar Halaman ubah data stok barang terdapat pada Gambar

3.26.

32
 Gambar 3.26User Interface Halaman Cari Data Stok Barang

17. Rancangan User Interface Halaman Data Pelanggan

Rancangan halaman data pelanggan. Pada halaman ini, menampilkan

halaman data pelanggan. Halaman ini admin hanya bisa melihat detail

data pelanggan, tidak bisa menambah atau mengubah data

pelanggan. Halaman data pelanggan terdapat pada Gambar 3.27

Gambar 3.27User Interface Halaman Data Pelanggan

18. Rancangan User Interface Halaman Detail Pelanggan

Rancangan halamn Detail pelanggan.Pada halaman ini, admin dapat melihat

data pelanggan dengan lebih Detail. Halaman detail pelanggan terdapat pada

gambar 3.28

33
 .

Gambar 3.28User Interface Halaman Detail Pelanggan

19. Rancangan User Interface Halaman Data Pesanan

Rancangan halaman mengelola data pesanan.Pada halaman ini, admin

mengonfirmasi pesanan dari pelanggan. Halaman data pesanan terdapat

pada Gambar 3.29

34
 Gambar 3.29User Interface Halaman Data Pesanan

20. Rancangan User Interface Halaman Data Pembayaran

rancangan halaman mengelola data pembayaran. Dimana halaman ini,

menampilkan kelola data pembayaran.Pada halaman ini, admin dapat

mengonfirmasi pembayaran pesanan yang telah dilakukan oleh pelanggan.

Halaman data pembayaran terdapat pada Gambar 3.30 .

Gambar 3.30User Interface Halaman Data Pembayaran

35
21. Rancangan User Interface Halaman Utama Pemilik

Rancangan halaman utama pemilik Lovlar Store.Pada halaman ini, pemilik

Lovlar dapat mengelola data pegawai dan melihat laporan.Rancangan

halaman utama pemilik terdapat pada Gambar 3.31.

Gambar 3.31User Interface Halaman Utama Pemilik

22. Rancangan User Interface Halaman Data Pegawai

Dalam rancangan halaman data pegawai, dimana pada halaman ini pemilik

dapat menginputkan data pegawai. Data yang dapat di input yaitu, nama,

email, status, username, dan password. Rancangan halaman data pegawai

terdapat pada Gambar 3.32

36
 Gambar 3.32User Interface Halaman Data Pegawai

23. Rancangan User Interface Halaman Ubah Data Pegawai

Dalam rancangan halaman ubah data pegawai, dimana pada halaman ini

menampilkan data pegawai yang ingin diubah oleh pemilik. Data yang dapat

di ubah yaitu, nama, email, status, username, dan password. Rancangan

halaman ubah data pegawai terdapat pada Gambar 3.33.

37
 Gambar 3.33User Interface Halaman Ubah Data Pegawai

24. Rancangan User Interface Halaman Laporan Data Transaksi Penjualan

Dalam halaman laporan data transaksi penjualan terdapat Table nama,

harga, size, dan stok. Halaman ini, dapat di kelola oleh Admin. Gambar

rancangan halaman laporan transaksi penjualan terdapat pada Gambar 3.35

Gambar 3.35User Interface Halaman

Laporan Transaksi Penjualan

38