lisensi ini mengizinkan setiap orang untuk …kc.umn.ac.id › 5072 › 5 › bab iii.pdfdata sesuai...

Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP

Hak cipta dan penggunaan kembali:

Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli.

Copyright and reuse:

This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.

18

BAB III

METODOLOGI DAN PERANCANGAN SISTEM

3.1 Metode Penelitian

Beberapa metode penelitian yang digunakan untuk melakukan penelitian ini

antara lain:

a. Studi literatur

Melakukan studi terhadap referensi-referensi yang menjadi dasar untuk

penelitian ini, seperti teori tentang metode gamifikasi serta metode push

notification.

b. Perancangan Aplikasi

Perancangan sistem dilakukan dengan merancang tampilan untuk pengguna

serta fitur-fitur yang berfungsi untuk mempermudah dan membuat nyaman

pengguna saat menggunakan aplikasi.

c. Implementasi Aplikasi

Implementasi aplikasi dilakukan dengan merealisasikan ide yang awalnya

berupa gambaran aplikasi diimplementasikan menjadi sebuah aplikasi

sehingga dapat digunakan oleh user.

d. Pengujian Aplikasi

Setelah implementasi aplikasi selesai, maka dilakukan uji coba terhadap

aplikasi tersebut. Uji coba dilakukan dengan menggunakan dua metode,

yaitu beta testing untuk grup pengguna customer, dan black box testing

untuk ketiga grup pengguna, yaitu administrator, tenant, serta customer.

Rancang Bangun Aplikasi..., Rian Suhito Purnama, FTI UMN, 2018

19

Uji coba dilakukan dengan mencari beberapa responden (minimal 30

responden) untuk berperan sebagai pengguna. Dari uji coba tersebut, akan

diperoleh feedback dari responden. Kuesioner disebarkan menggunakan

teknik Simple Random Sampling yang artinya anggota sampel dari populasi

dilakukan secara acak tanpa memperhatikan strata yang ada dalam populasi.

e. Evaluasi

Evaluasi sistem dilakukan dengan menganalisis hasil dari pengujian sistem.

Terdapat dua pengujian, yaitu black box testing dan beta testing. Evaluasi

yang dilakukan di beta testing dilakukan dengan cara menyebarkan

kuesioner setelah customer melakukan pengujian.

f. Penulisan Laporan

Penulisan laporan berguna untuk membuat dokumentasi dari suatu

penelitian yang telah dilakukan, memaparkan hasil pengujian dan analisa

data sesuai dengan evaluasi yang telah dilakukan, serta kesimpulan dan

saran untuk penelitian selanjutnya.

3.2 Perancangan Sistem

Pada penelitian ini, dikembangkan aplikasi mobile berbasis Android dengan

menggunakan Web API untuk interaksi dengan database MySQL yang terdapat

pada server. Fitur yang terdapat pada aplikasi dibuat sepenuhnya bergantung pada

database MySQL.

Perancangan sistem dimulai dengan menggambarkan diagram yang terdiri

atas Data Flow Diagram, Flowchart Diagram, Database Schema dan struktur tabel

dalam database.


20

3.2.1 Data Flow Diagram

Dalam proses pengembangan aplikasi Digital Receipt terdapat beberapa

alur perpindahan data. Data Flow Diagram digunakan untuk memperjelas dan

mempermudah setiap alur data yang terjadi dalam aplikasi.

Gambar 3.1 Context Diagram

Gambar 3.1 menunjukkan context diagram untuk sistem Digital Receipt.

Terdapat empat entitas yang terdiri dari administrator, tenant, customer, dan

Firebase Cloud Messaging. Entitas customer menggunakan usertype customer

untuk berinteraksi dengan sistem. Entitas administrator menggunakan usertype


21

administrator untuk berinteraksi dengan sistem. Entitas tenant menggunakan

usertype tenant untuk berinteraksi dengan sistem. Entitas Firebase Cloud

Messaging akan digunakan setiap pengiriman notifikasi.

Diagram di atas menunjukkan administrator adalah kasir dari Cafetaria

Delicia SDC. Tenant adalah penjual yang terdapat di Cafetaria Delicia SDC.

Customer adalah pembeli makanan dan minuman dari setiap tenant. Firebase Cloud

Messaging adalah server yang akan melakukan pemrosesan yang berhubungan

dengan notifikasi. Penjelasan lebih lanjut mengenai proses-proses yang dilakukan

akan dijelaskan pada DFD Level 1.


22

Gambar 3.2 Data Flow Diagram Level 1


23

Gambar 3.2 merupakan DFD Level 1 dari sistem Digital Receipt. Terdapat

empat proses yang dapat dilakukan pada DFD Level 1, yaitu proses login, sistem

administrator, sistem tenant, dan sistem customer.

Proses login membutuhkan data dt_login dari setiap user. Data tersebut akan

digunakan untuk mengambil data dari database aplikasi. Salah satu data yang

diperlukan yaitu user_type_id. Data user_type_id akan diperiksa ke dalam

tbl_user_type untuk mengetahui role apa yang dimiliki oleh user tersebut. Proses

sistem administrator memuat proses-proses yang dapat digunakan oleh

administrator. Proses sistem tenant memuat proses-proses yang dapat digunakan

oleh tenant. Proses sistem customer memuat proses-proses yang dapat digunakan

oleh customer.

Terdapat proses-proses pada DFD Level 1 yang akan dijelaskan lebih lanjut

di DFD Level 2 karena masih memiliki proses turunan. Proses yang akan dijelaskan

lebih lanjut yaitu, sistem administrator, sistem tenant, dan sistem customer.

Gambar 3.3 Data Flow Diagram Level 2 Proses Subsistem Administrator


24

Gambar 3.3 merupakan DFD Level 2 untuk proses subsistem administrator.

Dalam proses ini, Administrator dapat melakukan register customer, topup

customer, update customer, create tenant, dan update tenant serta melihat list

customer, list active tenant, dan list all tenant.

Register customer membutuhkan data dt_register_customer untuk

dimasukkan ke dalam tbl_users. Topup customer membutuhkan data

dt_topup_customer yang berisi jumlah topup yang dibeli customer. Update

customer membutuhkan data dt_current_update_customer untuk menampilkan

data yang sekarang dimiliki oleh customer dan data dt_update_customer yang berisi

data yang akan diubah. Create tenant membutuhkan data dt_create_tenant untuk

dimasukkan ke dalam tbl_tenant dan tbl_users. Update tenant membutuhkan data

dt_current_update_tenant untuk menampilkan data yang sekarang dimiliki oleh

tenant dan data dt_update_tenant yang berisi data yang akan diubah. List customer

membutuhkan data dt_list_customer untuk menampilkan daftar customer yang

terdaftar di dalam aplikasi. List active tenant membutuhkan data

dt_list_active_tenant untuk menampilkan daftar tenant yang sedang memiliki status

aktif yang artinya tenant yang sedang berjualan di Cafetaria Delicia. List tenant

membutuhkan data dt_list_all_tenant untuk menampilkan daftar seluruh tenant

yang pernah terdaftar di aplikasi.


25

Gambar 3.4 Data Flow Diagram Level 2 Proses Subsistem Tenant

Gambar 3.4 merupakan DFD Level 2 dari proses subsistem tenant. Tenant

dapat melakukan register FCM, create menu, notify customer, update menu, create

promo, melihat order list, melihat confirmed order, melihat order history, dan

melakukan push notification. Tenant akan selalu melakukan pergantian token FCM

ketika melakukan login atau masuk ke dalam aplikasi.

Register FCM membutuhkan data dt_registrasi_fcm_tenant untuk

mendaftarkan token ke tbl_fcm_token. Create menu membutuhkan data

dt_create_menu untuk mendaftarkan menu ke tbl_menu. Notify customer

membutuhkan data dt_push_notification, dt_notification_status_order_list, dan

dt_notification_status_confirmed_order yang kemudian akan dikirimkan ke entitas

FCM. Update menu membutuhkan data dt_current_update_menu untuk

menampilkan data menu yang sekarang dan akan mengirimkan data

dt_update_menu ke tbl_menu jika ada menu yang diubah. Create promo

membutuhkan data dt_create_promo untuk mendaftarkan promo. Promo yang


26

dimaksud disini adalah pesan yang akan dikirimkan ke seluruh customer dengan

menggunakan push notification.

Order list dapat dilihat dengan mengambil data dt_order_list yang akan

menampilkan daftar order yang pertama kali dipesan oleh customer. Ketika salah

satu daftar tersebut ditekan, maka akan menampilkan detail dari order tersebut.

Kemudian tenant dapat memilih untuk menerima order atau membatalkan order

setelah itu, dt_notification_status_order_list akan dikirimkan sesuai dengan pilihan

tenant. Confirmed order dapat dilihat dengan mengambil data dt_confirmed_order

yang akan menampilkan daftar order yang telah selesai dibuat oleh tenant. Ketika

salah satu daftar tersebut ditekan, maka akan menampilkan detail dari order

tersebut. Kemudian tenant dapat menekan confirmed order,

dt_notification_status_confirmed_order akan dikirimkan ke customer yang

menandakan bahwa order tersebut sudah diambil oleh customer. Order history

dapat dilihat dengan mengambil data dt_order_history yang akan menampilkan

daftar order yang telah selesai dan biasanya digunakan untuk melihat daftar order

yang pernah dilakukan. Ketika salah satu daftar tersebut ditekan, maka akan

menampilkan detail dari order tersebut.

Gambar 3.5 Data Flow Diagram Level 2 Proses Subsistem Customer


27

Gambar 3.5 merupakan DFD Level 2 dari proses subsistem customer.

Customer dapat melihat badge yang telah didapat, order history, dan pending order

serta melakukan transaction, register, notify tenant, dan register FCM.

Customer akan selalu melakukan pergantian token FCM ketika melakukan

login, karena token yang didapat belum tentu sama setiap kali login ke dalam

aplikasi. Get badge akan digunakan ketika customer berhasil memenuhi syarat

untuk mendapatkan badge, dan ketika badge tersebut belum didapatkan oleh

customer, maka akan dilakukan register badge. Dalam tbl_badges berisi daftar

seluruh badge yang disediakan, sedangkan dalam tbl_user_badges, berisi daftar

badge yang dimiliki oleh setiap customer.

Register untuk mendaftarkan customer ke dalam aplikasi, seluruh user yang

menggunakan register untuk masuk ke dalam aplikasi akan memiliki usertype

sebagai customer. Get pending merupakan proses untuk melihat daftar order yang

masih memiliki status pending, yaitu order yang belum diterima oleh tenant.

Dibutuhkan data dt_pending_order_customer untuk menampilkan daftar pending

order dan data dt_pending_order_customer_detail untuk menampilkan detail dari

daftar pending order tersebut. Get order history merupakan proses untuk melihat

daftar order yang telah diterima oleh tenant dan order yang sudah diambil oleh

customer. Di dalam daftar akan dibedakan menjadi dua, pertama daftar order

history yang tidak memiliki icon centang, order history ini memiliki status

completed yang berarti order belum diambil oleh customer namun sudah selesai

dimasak oleh tenant. Kedua, order history yang memiki icon centang, order history

ini memiliki status taken yang berarti order sudah diambil oleh customer dan

menandakan bahwa transaksinya selesai. Data dt_order_history_customer untuk


28

menampilkan daftar order history dan data dt_order_history_customer_detail

untuk menampilkan detail dari order history yang ditekan.

Notify tenant merupakan proses untuk melakukan notifikasi kepada tenant,

proses ini akan digunakan setiap kali customer melakukan transaction. Transaction

merupakan proses untuk melakukan transaksi, untuk lebih detail akan dijelaskan

pada DFD Level 3.

Gambar 3.6 Data Flow Diagram Level 3 Proses Transaction

Gambar 3.6 merupakan DFD Level 3 dari proses transaction. Get active

tenant merupakan proses untuk mendapatkan data dt_list_tenant yang didapat dari

tbl_tenant yang berisi daftar active tenant yang dapat dipesan oleh customer. Get

menu merupakan proses untuk mendapatkan data dt_list_menu_per_tenant yang

tersedia dari setiap tenant. Register transaction merupakan proses untuk

mendaftarkan data dt_register_transaction ke tbl_transaction. Register order

merupakan proses untuk mendaftarkan data dt_register_order ke tbl_order.

3.2.2 Flowchart Diagram

Flowchart Diagram digunakan untuk memberikan informasi mengenai alur

proses yang terdapat pada aplikasi Digital Receipt.


29

Gambar 3.7 Flowchart Sistem Digital Receipt

Gambar 3.7 menunjukkan Flowchart dari aplikasi Digital Receipt secara

keseluruhan, pada sistem ini ditunjukkan bahwa pertama kali user membuka

aplikasi, aplikasi akan menampilkan splash screen terlebih dahulu, kemudian

setelah splash screen berakhir, maka akan ditampilkan halaman login yang

meminta email dan password user sebagai syarat untuk login. Jika user tidak

memiliki akun untuk login, di halaman ini terdapat pilihan untuk melakukan

register. Jika user berhasil login, user type dari user tersebut akan diperiksa dan

akan ditentukan user tersebut memiliki akses ke administrator, tenant, atau user.


30

Gambar 3.8 Flowchart Login

Gambar 3.8 menunjukkan Flowchart dari proses login, pada proses ini

ditunjukkan bahwa pertama kali aplikasi akan memeriksa sharedpreferences login

yang dimiliki oleh user, jika ada, maka langsung masuk ke aplikasi tanpa harus

mengisi email dan password, jika tidak ada, maka akan ditampilkan halaman login

yang meminta user untuk mengisi email dan password untuk melakukan proses

login.


31

Gambar 3.9 Flowchart Register Customer

Gambar 3.9 menunjukkan Flowchart dari proses register customer, pada

proses ini ditunjukkan bahwa user diminta untuk memasukkan data yang

diperlukan untuk menjadi customer. User diminta untuk memasukkan firstname,

lastname, phone number, gender, email, password, dan confirm password.

Kemudian aplikasi akan melakukan validasi formulir, pertama aplikasi akan

memeriksa kelengkapan pengisian data pada kolom-kolom yang disediakan.

Kemudian aplikasi akan memeriksa kesamaan dari password dan confirm

password. Setelah itu aplikasi akan memeriksa email yang dimasukkan oleh user,

sudah pernah dipakai atau belum. Setelah semua validasi sukses, maka user akan

didaftarkan ke dalam database aplikasi.


32

Gambar 3.10 Flowchart Sistem Administrator

Gambar 3.10 menunjukkan Flowchart dari sistem administrator, yang dapat

memasuki sistem ini hanya user yang memiliki user type sebagai administrator.

Pada sistem ini, user dapat memilih antara dua tabbed yang disediakan, yaitu

tabbed customer dan tabbed tenant. Tabbed customer akan menampilkan menu-

menu yang berhubungan dengan mengatur customer seperti menu list customer dan

create customer. Tabbed tenant akan menampilkan menu yang berhubungan

dengan mengatur tenant seperti menu update tenant dan create tenant.


33

Gambar 3.11 Flowchart Mengatur Customer

Gambar 3.11 menunjukkan Flowchart dari subproses mengatur customer,

subproses ini menampilkan dua menu utama, yaitu list customer dan create

customer. List customer akan menampilkan customer yang terdaftar di dalam

sistem, kemudian user dapat memilih salah satu customer untuk menampilkan

menu update customer dan top up balance. Create customer akan menampilkan

tampilan dan proses yang sama dengan register customer.


34

Gambar 3.12 Flowchart Update Customer

Gambar 3.12 menunjukkan Flowchart dari subproses update customer,

subproses ini menampilkan data yang dapat di update oleh user. Data yang

sebelumnya, ditampilkan di kolom-kolom yang tersedia, sehingga dapat

memudahkan user untuk mengetahui data apa yang telah tersimpan. Data yang

dapat diubah adalah firstname, lastname, phone, email, password, dan confirm

password. Proses validasi dilakukan dengan pengecekkan setiap kolom yang

terdapat di form tersebut. Setelah itu, email akan diperiksa ke dalam database

aplikasi, jika tidak ada yang sama, maka validasi sukses.


35

Gambar 3.13 Flowchart Topup Balance

Gambar 3.13 menunjukkan Flowchart dari subproses topup balance,

subproses ini menampilkan balance sebelumnya yang dimiliki oleh customer.

Kemudian di kolom kedua akan disediakan untuk menambahkan jumlah balance

yang telah dimiliki oleh customer. Validasi dilakukan dengan melakukan

pengecekkan setiap kolom yang terdapat pada form tersebut, jika tidak ada yang

kosong, kemudian topup yang dimasukkan tidak boleh berjumlah nol.


36

Gambar 3.14 Flowchart Mengatur Tenant

Gambar 3.14 menunjukkan Flowchart dari subproses mengatur tenant,

subproses ini menampilkan tiga menu utama, yaitu show active tenant, list tenant,

dan create tenant. Show active tenant akan menampilkan tenant-tenant yang sedang

aktif menyewa di Cafeteria Delicia SDC. List tenant akan menampilkan seluruh

tenant yang pernah terdaftar dalam sistem, jika user memilih salah satu tenant yang

ada, maka akan langsung mengarah ke subproses mengubah tenant. Create tenant

akan langsung mengarah ke subproses mendaftarkan tenant.


37

Gambar 3.15 Flowchart Mendaftarkan Tenant

Gambar 3.15 menunjukkan Flowchart dari subproses mendaftarkan tenant,

subproses ini menampilkan data yang perlu diisi untuk mendaftarkan satu tenant.

Data-data yang perlu diisi adalah tenant name, firstname, lastname, phone, email,

password, dan confirm password. Validasi yang dilakukan sama seperti validasi

register customer. Setelah semua validasi sukses, maka akan didaftarkan ke

database sistem. Tenant yang baru didaftarkan ke dalam sistem langsung memiliki

status aktif.


38

Gambar 3.16 Flowchart Mengubah Tenant

Gambar 3.16 menunjukkan Flowchart dari subproses mengubah tenant,

subproses ini menampilkan data-data yang dapat diubah oleh user. Data yang

sebelumnya akan ditampilkan di kolom-kolom yang tersedia, sehingga dapat


dapat diubah adalah tenant name, firstname, lastname, phone, email, dan status.

Proses validasinya sama dengan register customer.


39

Gambar 3.17 Flowchart Sistem Tenant

Gambar 3.17 menunjukkan Flowchart dari sistem tenant, user yang dapat

memasuki sistem tenant adalah user yang memiliki user type sebagai tenant.

Pertama kali memasuki sistem ini, user akan didaftarkan ke server Firebase Cloud

Messaging(FCM) dan juga ke database sistem. Fungsinya agar user dapat

mengirimkan dan menerima notifikasi. Proses ini juga dialami ketika user

memasuki sistem customer. Setelah itu akan ditampilkan lima menu yang dapat

diakses oleh user, yaitu list menu, create promo, order list, confirmed order, order

history, dan logout.

Gambar 3.18 Flowchart Mengatur Menu


40

Gambar 3.18 menunjukkan Flowchart dari subproses mengatur menu,

subproses ini menampilkan list menu yang dimiliki oleh user tersebut. Jika user

memilih salah satu menu yang ditampilkan, maka akan diarahkan ke halaman

update menu, dan jika user memilih tombol add menu, maka akan diarahkan ke

halaman create menu.

Gambar 3.19 Flowchart Update Menu


41

Gambar 3.19 menunjukkan Flowchart dari subproses update menu,

subproses ini menampilkan data yang dapat diubah oleh user. Data yang

sebelumnya akan ditampilkan di kolom-kolom yang tersedia, sehingga dapat


dapat diubah adalah menu name dan menu price. Validasi dilakukan untuk

memeriksa kelengkapan formulir, jika validasi sukses maka sistem akan melakukan

update ke database sistem.

Gambar 3.20 Flowchart Create Menu


42

Gambar 3.20 menunjukkan Flowchart dari subproses create menu,

subproses ini menampilkan kolom-kolom yang dapat diisi oleh user. Data yang

dapat diperlukan untuk membuat menu adalah menu name dan menu price. Validasi

dilakukan untuk memeriksa kelengkapan formulir, jika validasi sukses maka sistem

akan melakukan insert ke database sistem.

Gambar 3.21 Flowchart Membuat Promo

Gambar 3.21 menunjukkan Flowchart dari subproses membuat promo,

subproses ini menampilkan kolom-kolom yang dapat diisi oleh user untuk membuat

promo. Data yang dapat diperlukan untuk membuat promo adalah title dan

description. Validasi dilakukan untuk memeriksa kelengkapan formulir, jika


43

validasi sukses maka sistem akan melakukan insert ke database sistem dan

mengirimkan title dan description ke server FCM, kemudian server FCM akan

melakukan push notification ke seluruh customer.

Gambar 3.22 Flowchart Pending Order


44

Gambar 3.22 menunjukkan Flowchart dari subproses pending order,

subproses ini menampilkan list pending order yang dimiliki oleh user. Ketika user

memilih salah satu pending order tersebut, maka akan ditampilkan halaman

pending order detail. Pada halaman ini, user dapat melihat secara detail pesanan

dari customer. Terdapat dua tombol, yaitu confirm order untuk memberikan status

confirm ke customer dan cancel order jika terdapat kesalahan pesanan.

Gambar 3.23 Flowchart Confirmed Order


45

Gambar 3.23 menunjukkan Flowchart dari subproses confirmed order,

subproses ini menampilkan list confirmed order yang dimiliki oleh user. Ketika

user memilih salah satu confirmed order tersebut, maka akan ditampilkan halaman

confirmed order detail. Pada halaman ini, user dapat melihat secara detail pesanan

dari customer. Jika pesanan sudah diambil oleh customer, maka user harus menekan

tombol confirm untuk menyatakan bahwa pesanan dari customer telah diambil dan

transaksi telah selesai.

Gambar 3.24 Flowchart Order History


46

Gambar 3.24 menunjukkan Flowchart dari subproses order history,

subproses ini menampilkan list order history yang dimiliki oleh user. Ketika user

memilih salah satu order history tersebut, maka akan ditampilkan halaman order

history detail. Pada halaman ini, user dapat melihat secara detail pesanan dari

customer.

Gambar 3.25 Flowchart Sistem Customer

Gambar 3.25 menunjukkan Flowchart dari sistem customer, user yang

dapat memasuki sistem customer adalah user yang memiliki user type sebagai

customer. Pertama kali memasuki sistem ini, user akan didaftarkan ke server FCM

dan juga ke database sistem. Fungsinya agar user dapat mengirimkan dan

menerima notifikasi. Proses ini juga dialami ketika user memasuki sistem tenant.

Setelah itu akan ditampilkan list active tenant yang terdapat pada Cafetaria Delicia

SDC.


47

User dapat membuka navigation drawer dengan cara menekan tombol baris

tiga di atas kiri atau dengan cara melakukan slide right dari layar bagian kiri, setelah

itu maka akan ditampilkan list menu, yaitu home, badges, order history, about, dan

logout. Ketika user memilih badges, maka akan ditampilkan list badge yang ada di

dalam sistem. Ketika user memilih about, maka akan ditampilkan halaman about

yang berisikan kalimat mengenai tujuan pembuatan sistem.

Gambar 3.26 Flowchart Transaction


48

Gambar 3.26 menunjukkan Flowchart dari subproses transaction. Pertama

user diminta untuk memilih salah satu dari list active tenant, kemudian setelah

ditekan akan ditampilkan menu-menu yang terdapat pada tenant tersebut, user

dapat menambahkan quantity jika ingin memesan pada salah satu menu yang

tersedia. Setelah selesai memesan, user akan menekan tombol done.

Kemudian, sistem akan menampilkan menu-menu yang telah dipilih oleh

user untuk memastikan pesanan yang dipesan sesuai, setelah itu, user dapat

menekan tombol order untuk melakukan pembayaran sesuai dengan total

pembayaran dari menu yang dipesan.

Sistem akan mendaftarkan pesanan tersebut ke database sistem. Kemudian

sistem juga akan melakukan update point customer sesuai dengan total pembayaran

yang harus dibayar. Setelah itu sistem akan memeriksa persyaratan-persyaratan

mendapatkan badges.

Kemudian sistem akan mengirimkan data yang dibutuhkan oleh FCM untuk

mengirimkan notifikasi ke tenant yang bersangkutan. Setelah itu akan ditampilkan

popup exp gained.

Terakhir sistem akan memeriksa sharedpreferences yang menandakan

bahwa user levelup atau unlock badges, jika sharedpreferences-nya ada, maka akan

ditampilkan popup levelup atau popup unlock badges disertai dengan popup get

reward.


49

Gambar 3.27 Flowchart Memeriksa Badge Menu

Gambar 3.27 menunjukkan Flowchart dari subproses memerika badge

menu, dalam subproses ini, pertama sistem akan menghitung total dari seluruh menu

yang pernah dipesan oleh user, jika total menu lebih atau sama dengan seratus,

maka user akan mendapatkan badge culinary master, kemudian badge itu akan

diperiksa ke dalam database sistem, jika user tidak memilikinya, maka badge

tersebut akan didaftarkan. Proses ini juga berlaku untuk total menu lebih atau sama

dengan lima puluh dengan badge culinary hunter dan total menu lebih atau sama


50

dengan dua puluh dengan badge culinary novice. Jika total menu tidak memenuhi

syarat, maka subproses langsung selesai.

Gambar 3.28 Flowchart Memeriksa Badge Point


topup, dalam subproses ini, pertama sistem akan menghitung total dari seluruh point

yang pernah di-topup oleh user, jika total topup lebih atau sama dengan satu juga

lima ratus ribu rupiah, maka user akan mendapatkan badge topup 1500K, kemudian

badge itu akan diperiksa ke dalam database sistem, jika user tidak memilikinya,

maka badge tersebut akan didaftarkan. Proses ini juga berlaku untuk total point

lebih atau sama dengan satu juta rupiah dengan badge topup 1000K dan total point


51

lebih atau sama dengan lima ratus ribu rupiah dengan badge topup 500K. Jika total

point tidak memenuhi syarat, maka subproses langsung selesai.

Gambar 3.29 Flowchart Memeriksa Badge Level


level, dalam subproses ini, pertama sistem akan memeriksa level yang dicapai user,

jika level lebih atau sama dengan lima puluh, maka user akan mendapatkan badge

level MAX, kemudian badge itu akan diperiksa ke dalam database sistem, jika user

tidak memilikinya, maka badge tersebut akan didaftarkan. Proses ini juga berlaku

untuk level lebih atau sama dengan tiga puluh dengan badge reach level 30, level

lebih atau sama dengan lima belas dengan badge reach level 15, dan level lebih atau


52

sama dengan lima dengan badge reach level 5. Jika level tidak memenuhi syarat,

maka subproses langsung selesai.

Gambar 3.30 Flowchart Melihat Order History

Gambar 3.30 menunjukkan Flowchart dari subproses melihat order history.

Pertama, user akan diarahkan ke tabbed menu pending order, di tabbed menu ini

user dapat melihat list pending order yaitu order yang belum di confirm oleh tenant,

jika user menekan salah satu pending order, maka akan ditampilkan halaman order

pending detail yang menampilkan menu yang telah dipesan oleh customer.

Ketika user memilih tabbed menu completed order, maka user dapat

melihat list completed order yaitu order yang telah di confirm oleh tenant. Di list

completed order ada dua tipe list, yaitu list yang memiliki tanda centang dan list


53

yang tidak memiliki tanda centang. List yang memiliki tanda centang berarti order

tersebut sudah diambil oleh customer dan transaksi sudah selesai. List yang tidak

memiliki tanda centang, berarti order tersebut sudah siap diambil, namun belum

diambil oleh customer. Ketika user memilih salah satu completed order, maka akan

ditampilkan halaman completed order detail yang menunjukkan detail dari

completed order tersebut, yaitu menu-menu yang telah dipesan oleh customer.

3.2.3 Database Schema

Database Schema digunakan untuk memberikan informasi mengenai

hubungan atau relasi antar tabel dalam database aplikasi Digital Receipt.

Gambar 3.31 Database Schema

Gambar 3.31 menunjukkan database schema yang digunakan dalam aplikasi

Digital Receipt. Tabel yang digunakan berjumlah sepuluh tabel. Hubungan antara

tabel badges dan tabel users adalah many to many karena banyak badges dapat

dimiliki oleh banyak users, sehingga dibuat tabel user_badges karena hubungan

tabel tersebut many to many. Hubungan antara tabel users dan tabel fcm_token


54

adalah one to many karena satu fcm_token hanya bisa dimiliki oleh satu users

sedangkan satu users dapat memiliki banyak fcm_token. Hubungan antara tabel

users dan tabel transaction adalah one to many karena satu transaction hanya bisa

dimiliki oleh satu users sedangkan satu users dapat memiliki banyak transaction.

Hubungan antara tabel transaction dan tabel order_list adalah one to many karena

satu order_list hanya memiliki satu transaction, namun satu transaction dapat

memiliki banyak order_list. Hubungan antara tabel tenant dan menu adalah one to

many karena satu tenant memiliki banyak menu, sedangkan satu menu hanya

dimiliki oleh satu tenant. Hubungan antara tabel promo dengan tenant adalah one

to many karena satu promo hanya dimiliki oleh satu tenant, namun satu tenant dapat

memiliki banyak promo. hubungan antara tabel menu dan tabel order_list adalah

one to many karena satu order_list dapat memiliki banyak menu namun satu menu

hanya dapat memiliki satu order_list. Hubungan antara tabel user_type dan tabel

users adalah one to many karena satu user_type hanya dapat memiliki satu users

sedangkan satu users dapat memiliki banyak user_type.

3.2.4 Struktur Tabel

Dalam membangun aplikasi Digital Receipt terdapat sepuluh struktur tabel

yang digunakan. Tabel-tabel ini berada pada database MySQL yang terdapat dalam

server. Berikut tabel-tabel yang digunakan dalam aplikasi.

1. Tabel users

Fungsi tabel: menyimpan data user yang terdaftar


55

Tabel 3.1 Struktur Tabel users

# Nama Tipe Panjang Keterangan

1 id int 11 Primary Key

2 firstname varchar 20 Nama depan user

3 lastname varchar 20 Nama belakang user

4 xp int 11 Experience yang dimiliki user

5 email varchar 50 Email user, digunakan untuk

login

6 gender varchar 10 Gender yang dimiliki user

7 phone_number varchar 20 Phone number yang dimiliki

user

8 balance int 11 Point yang dimiliki user

9 password varchar 200 Password yang dimiliki user

10 salt varchar 20 Untuk membantu proses

enkripsi password

11 user_type_id int 11 Foreign Key dari tabel

usertype, kolom id

12 registered_date timestamp - Waktu user dibuat

2. Tabel user_type

Fungsi: menyimpan nama-nama usertype

Tabel 3.2 Struktur Tabel user_type


1 id int 11 Primary key

2 type varchar 50 Nama yang dimiliki usertype

3. Tabel badge

Fungsi: menyimpan seluruh badges yang dapat dimiliki user


56

Tabel 3.3 Struktur Tabel badge



2 name varchar 100 Nama tiap badge

3 image int 111 Image tiap badge

4 description varchar 200 Keterangan tiap badge

4. Tabel user_badges

Fungsi: menyimpan data badges yang dimiliki oleh tiap user

Tabel 3.4 Struktur Tabel user_badges



2 badge_id int 11 Foreign key tabel badge, kolom id

3 user_id int 11 Foreign key tabel users, kolom id

5. Tabel transaction

Fungsi: menyimpan data transaksi user

Tabel 3.5 Struktur Tabel transaction


1 id varchar 20 Primary key

2 total_point int 11 Total point yang harus dibayar

user

3 total_exp int 11 Total experience yang didapat

user

4 user_id int 11 Foreign key tabel users, kolom

id

5 transaction_date timestamp - Waktu melakukan transaksi

6 notes varchar 200 Catatan pesanan

7 status varchar 20 Status transaksi


57

6. Tabel order_list

Fungsi: untuk menyimpan informasi mengenai order

Tabel 3.6 Struktur Tabel order_list



2 transaction_id varchar 20 Foreign key tabel transaction,

kolom id

3 menu_id int 11 Foreign key tabel menu, kolom id

4 qty int 11 Banyak pesanan dalam satu menu

7. Tabel promo

Fungsi: untuk menyimpan informasi mengenai promo yang dikirimkan ke

user

Tabel 3.7 Struktur Tabel promo



2 title varchar 100 Judul promo yang dikirimkan ke user

3 description varchar 500 Deskripsi promo yang dikirimkan ke

user

4 tenant_id int 11 Foreign key tabel tenant, kolom id

8. Tabel tenant

Fungsi: untuk menyimpan informasi mengenai tenant yang terdaftar dalam

aplikasi

Tabel 3.8 Struktur Tabel tenant




58

Tabel 3.9 Struktur Tabel tenant (lanjutan)


2 name varchar 100 Nama tenant

3 status varchar 10 Status tenant

4 user_id int 11 Foreign key tabel users, kolom id

9. Tabel menu

Fungsi: untuk menyimpan informasi mengenai menu yang tersedia dalam

aplikasi

Tabel 3.10 Struktur Tabel menu



2 name varchar 100 Nama menu

3 tenant_id int 11 Foreign key tabel tenant, kolom id

4 price int 11 Harga menu

10. Tabel fcm_token

Fungsi: untuk menyimpan data token

Tabel 3.11 Struktur Tabel fcm_token



2 token varchar 500 Token yang dimiliki tiap user

3 user_id int 11 Foreign key tabel tenant, kolom id

3.2.5 Perancangan User Interface

Perancangan user interface merupakan desain antarmuka yang dimiliki oleh

aplikasi Digital Receipt.


59

Gambar 3.32 Rancangan Halaman Splash Screen

Gambar 3.32 merupakan rancangan halaman splash screen untuk aplikasi

Digital Receipt. Logo aplikasi, logo Universitas Multimedia Nusantara, dan logo

Summarecon Digital Center akan ditampilkan pada halaman ini.

Gambar 3.33 Rancangan Halaman Login


60

Gambar 3.33 merupakan rancangan halaman login. Dalam halaman ini akan

ditampilkan logo aplikasi, icon email, icon password, kolom email, password,

button login, dan teks yang dapat ditekan untuk berpindah ke halaman register.

Kolom email dan password adalah syarat untuk masuk ke dalam aplikasi. Jenis

masukan pada kolom email dan password merupakan jenis masukan teks.

Jika user memasukkan email dan password yang tidak sesuai, maka akan

muncul Toast message yang memberitahukan bahwa email atau password salah.

Jika user tidak memasukkan email dan password kemudian menekan button login

maka akan dimunculkan error message di kolom tersebut bahwa email atau

password tidak boleh kosong.

Gambar 3.34 Rancangan Halaman Register

Gambar 3.34 merupakan rancangan halaman register. Halaman ini

menampilkan logo aplikasi, kolom first name, last name, gender, email, phone

number, password, confirm password, button register, dan button cancel. Terdapat


61

dua jenis masukan yang terdapat pada form register yaitu masukan berupa teks dan

masukan berupa radio button.

Gambar 3.35 Rancangan Halaman Home Admin Tabbed Customer

Gambar 3.35 merupakan rancangan halaman home admin pada tabbed

customer. Dalam halaman ini ditampilkan tabbed customer, tabbed tenant, button

list customer, dan button create customer.

Gambar 3.36 Rancangan Halaman List Customer


62

Gambar 3.36 merupakan rancangan halaman list customer. Halaman ini

menampilkan daftar customer yang telah terdaftar dalam aplikasi. Data yang

ditampilkan pada halaman ini yaitu nama customer, email customer, dan balance

customer. Terdapat juga search bar untuk mencari customer agar lebih mudah

untuk mencarinya.

Gambar 3.37 Rancangan Halaman Popup Menu List Customer

Gambar 3.37 merupakan rancangan halaman popup menu yang muncul

ketika salah satu list customer ditekan. Terdapat dua pilihan menu yang tersedia,

yaitu update customer untuk mengubah data customer, dan topup balance.

Gambar 3.38 Rancangan Halaman Topup Balance Customer


63

Gambar 3.38 merupakan rancangan halaman topup balance customer. Pada

halaman ini disediakan dua baris, baris pertama yaitu saldo customer yang

memberitahukan current balance customer pada saat itu. Baris kedua yaitu topup

untuk mengisi berapa jumlah topup yang ingin dibeli oleh customer.

Gambar 3.39 Rancangan Halaman Update Customer

Gambar 3.39 merupakan rancangan halaman update customer. Halaman ini

akan menampilkan kolom-kolom yang dapat diubah oleh admin. Kolom-kolom

yang disediakan yaitu, kolom first name, kolom last name, kolom phone number,

dan kolom email. Data yang sebelumnya tersimpan akan dimunculkan pada kolom

kedua.


64

Gambar 3.40 Rancangan Halaman Create Customer

Gambar 3.40 merupakan rancangan halaman create customer. Halaman ini

sama seperti halaman register pada Gambar 3.34, karena data yang dibutuhkan

untuk create customer dan register sama.

Gambar 3.41 Rancangan Halaman Home Admin Tabbed Tenant


65

Gambar 3.41 merupakan rancangan halaman home admin yang memilih

tabbed tenant. Halaman ini menyediakan empat fungsi, pertama show active tenant

berupa teks yang jika ditekan akan diarahkan ke halaman daftar aktif tenant. Kedua

active tenant number berupa teks angka yang menunjukkan total keseluruhan tenant

yang aktif dan jika ditekan, maka akan diarahkan ke halaman daftar aktif tenant.

Ketiga button create tenant, jika ditekan akan diarahkan ke halaman create tenant.

Keempat button list tenant, halaman ini akan menampilkan daftar seluruh tenant

yang pernah terdaftar pada aplikasi. Jika button ini ditekan, maka akan diarahkan

ke halaman list tenant.

Gambar 3.42 Rancangan Halaman List Active Tenant

Gambar 3.42 merupakan rancangan halaman list active tenant. Halaman ini

menampilkan daftar tenant yang telah terdaftar dan memiliki status aktif pada

aplikasi.


66

Gambar 3.43 Rancangan Halaman List All Tenant

Gambar 3.43 merupakan rancangan halaman list all tenant. Halaman ini

menampilkan daftar seluruh tenant yang pernah terdaftar dalam aplikasi.

Gambar 3.44 Rancangan Halaman Update Tenant


67

Gambar 3.44 merupakan rancangan halaman update tenant. Data yang

sebelumnya tersimpan akan dimunculkan pada kolom kedua.

Gambar 3.45 Rancangan Halaman Create Tenant

Gambar 3.45 merupakan rancangan halaman create tenant. Kolom yang

disediakan yaitu, tenant name, first name, last name, phone number, email,

password, dan confirm password. Kemudian disediakan juga button register dan

button cancel.

Gambar 3.46 Rancangan Halaman Home Tenant


68

Gambar 3.46 merupakan rancangan halaman home tenant. Halaman ini

menampilkan menu utama tenant. Terdapat enam button yaitu, list menu, create

promo, order list, confirmed order, order history, dan logout.

Gambar 3.47 Rancangan Halaman Menu List

Gambar 3.47 merupakan rancangan halaman menu list. Halaman ini

menampilkan list menu yang dimiliki oleh tenant tersebut. Ketika salah satu menu

ditekan, maka akan diarahkan ke halaman update menu. Ketika button add menu

ditekan, maka akan diarahkan ke halaman create menu.

Gambar 3.48 Rancangan Halaman Update Menu


69

Gambar 3.48 merupakan rancangan halaman update menu. Halaman ini

menampilkan data yang dapat diubah untuk update menu. Kolom sebelah kanan

akan diisi oleh data yang telah terdaftar sebelumnya.

Gambar 3.49 Rancangan Halaman Create Menu

Gambar 3.49 merupakan rancangan halaman create menu. Halaman ini

menampilkan data yang dibutuhkan untuk create menu yaitu menu name dan price.

Gambar 3.50 Rancangan Halaman Create Promo


70

Gambar 3.50 merupakan rancangan halaman create promo. Halaman ini

menampilkan data yang dibutuhkan dalam create promo, yaitu title dan description.

Gambar 3.51 Rancangan Halaman Order List

Gambar 3.51 merupakan rancangan halaman order list. Halaman ini

menampilkan daftar pesanan yang baru dipesan oleh customer. Ketika salah satu

daftar ditekan, maka akan diarahkan ke halaman detail order list.

Gambar 3.52 Rancangan Halaman Detail Order List


71

Gambar 3.52 merupakan rancangan halaman detail order list. Halaman ini

menampilkan customer name dan pesanan yang customer tersebut pesan. Terdapat

dua button, yaitu button cancel order dan button confirm order.

Gambar 3.53 Rancangan Halaman Popup Cancel Order

Gambar 3.53 merupakan rancangan halaman popup cancel order. Ketika

yes ditekan, maka order tersebut akan berubah statusnya menjadi cancel. Ketika no

ditekan, maka akan kembali ke halaman detail order list.

Gambar 3.54 Rancangan Halaman Popup Confirm Order


72

Gambar 3.54 merupakan rancangan halaman popup confirm order. Ketika

yes ditekan, maka akan status order akan diubah menjadi completed. Ketika no

ditekan, maka akan kembali ke halaman detail order list.

Gambar 3.55 Rancangan Halaman Confirmed Order

Gambar 3.55 merupakan rancangan halaman confirmed order. Halaman ini

menampilkan daftar pesanan dengan status completed. Ketika salah satu daftar

pesanan ditekan, maka akan diarahkan ke halaman confirmed order detail.

Gambar 3.56 Rancangan Halaman Confirmed Order Detail


73

Gambar 3.56 merupakan rancangan halaman confirmed order detail.

Halaman ini akan menampilkan detail dari confirmed order. Terdapat satu button

yang terdapat dalam halaman ini, yaitu button order taken.

Gambar 3.57 Rancangan Halaman Popup Order Taken

Gambar 3.57 merupakan rancangan halaman popup order taken. Ketika yes

ditekan, maka akan status order akan diubah menjadi taken. Ketika no ditekan,

maka akan kembali ke halaman confirmed order detail.

Gambar 3.58 Rancangan Halaman Order History


74

Gambar 3.58 merupakan rancangan halaman order history. Halaman ini

menampilkan daftar pesanan yang memiliki status taken. Ketika salah satu daftar

pesanan ditekan, maka akan diarahkan ke halaman order history detail.

Gambar 3.59 Rancangan Halaman Order History Detail

Gambar 3.59 merupakan rancangan halaman order history detail. Halaman

ini akan menampilkan detail dari order history.

Gambar 3.60 Rancangan Navigation Drawer

Gambar 3.60 merupakan rancangan navigation drawer untuk aplikasi

Digital Receipt dengan role sebagai customer. Pada navigation drawer ini terdapat


75

lima menu, yaitu home, badges, order history, about, dan logout. Header pada

navigation drawer ini menampilkan customer name, level, gender image dan point.

Gambar 3.61 Rancangan Halaman Home Customer

Gambar 3.61 merupakan rancangan halaman home customer. Halaman ini

menampilkan daftar tenant yang berstatus aktif dan di bawah halaman, terdapat

experience bar yang menunjukkan progress dari experience yang telah didapat.

Ketika customer menekan salah satu list tenant tersebut, maka akan diarahkan ke

halaman list menu customer.

Gambar 3.62 Rancangan Halaman List Menu Customer


76

Gambar 3.62 merupakan rancangan halaman list menu customer. Halaman

ini menampilkan menu beserta harganya yang terdapat pada tenant yang telah

dipilih sebelumnya.

Gambar 3.63 Rancangan Halaman Confirmation Order

Gambar 3.63 merupakan rancangan halaman confirmation order. Halaman

ini menampilkan halaman konfirmasi yang menampilkan pesanan customer yang

telah dipesan serta menampilkan total point yang harus dibayar customer dan total

point customer pada saat itu. Terdapat juga button order untuk memesan ke tenant.

Gambar 3.64 Rancangan Halaman Popup Experience


77

Gambar 3.64 merupakan rancangan halaman popup experience. Halaman

ini menampilkan experience number yang didapat oleh customer. Halaman ini akan

ditampilkan ketika customer selesai memesan.

Gambar 3.65 Rancangan Halaman Popup Level Up

Gambar 3.65 merupakan rancangan halaman popup level up. Halaman ini

akan dimunculkan ketika customer berhasil mencapai sejumlah experience yang

membuatnya naik level.

Gambar 3.66 Rancangan Halaman Popup New Badge


78

Gambar 3.66 merupakan rancangan halaman popup new badge. Halaman

ini akan dimunculkan ketika customer berhasil mendapatkan badge baru.

Gambar 3.67 Rancangan Halaman Popup Reward Experience

Gambar 3.67 merupakan rancangan halaman popup reward experience.

Halaman ini akan dimunculkan ketika customer berhasil mendapatkan reward

berupa experience.

Gambar 3.68 Rancangan Halaman Popup Reward Point

Gambar 3.68 merupakan rancangan halaman popup reward point. Halaman

ini akan dimunculkan ketika customer berhasil mendapatkan reward berupa point.


79

Gambar 3.69 Rancangan Halaman Badge

Gambar 3.69 merupakan rancangan halaman badge. Halaman ini diakses

melalui menu badge di navigation drawer. Halaman ini menampilkan daftar seluruh

badge yang tersedia dalam aplikasi. Setiap badge yang ada akan dilengkapi dengan

nama serta deskripsi berupa syarat untuk mendapatkan badge tersebut.

Gambar 3.70 Rancangan Halaman Order History Tabbed Pending


80

Gambar 3.70 merupakan rancangan halaman order history pada tabbed

pending. Halaman ini menampilkan daftar pending order yang belum diterima oleh

tenant.

Gambar 3.71 Rancangan Halaman Order History Tabbed Completed

Gambar 3.71 merupakan rancangan halaman order history pada tabbed

completed. Halaman ini menampilkan dua jenis daftar order, pertama daftar order

yang tidak memiliki centang yaitu daftar order yang telah selesai dibuat oleh tenant

namun belum diambil oleh customer. Daftar order kedua, daftar order yang

memiliki tanda centang yaitu daftar order yang telah diambil oleh customer.

Gambar 3.72 Rancangan Halaman Pending Order Detail


81

Gambar 3.72 merupakan rancangan halaman pending order detail. Halaman

ini merupakan detail dari daftar pending order. Halaman ini menampilkan menu

yang dipesan oleh customer serta total pembayaran yang telah customer tersebut

bayar.

Gambar 3.73 Rancangan Halaman Completed Order Detail

Gambar 3.73 merupakan rancangan halaman completed order detail.

Halaman ini merupakan detail dari daftar order history. Halaman ini menampilkan

menu yang telah dipesan oleh customer serta total pembayaran yang dibayar.

Gambar 3.74 Rancangan Halaman About

Gambar 3.74 merupakan rancangan halaman about. Halaman ini

menampilkan tujuan dari pembuatan aplikasi.


lisensi ini mengizinkan setiap orang untuk …kc.umn.ac.id › 5072 › 5 › bab iii.pdfdata sesuai...

Documents