100

1 BAB IV

2 PERANCANGAN SISTEM APLIKASI YANG DIUSULKAN

4.1. Model Sistem Baru Yang Di Usulkan

Aplikasi Mandiri Pay memiliki 4 Menu Utama yaitu :

1. Beranda.

2. Aplikasi.

Aplikasi terbagi menjadi 2 sub menu yaitu:

a. Pembayaran

b. Donasi

3. Profile.

Profile terbagi menjadi 4 sub menu yaitu :

a. Profil pengguna

b. Akun Bank

c. Dompet

d. Favorite

4. Pesan.

Untuk model sistem baru yang diusulkan ada penambahan fungsi

maupun fitur – fitur yaitu, pada Menu Beranda akan ditambahkan fitur

cetak Struk, pada Menu Aplikasi akan ditambahkan Daftar Jenis pada

Donasi,Ambil Data Phone Book pada Voucher pulsa serta Scan Barcode

pada PLN Prepaid, pada menu Profil akan ditambahkan transaksi M-

Banking pada sub menu akun bank yaitu Cek Saldo dan Transfer,

101

sedangkan pada sub menu dompet akan ditambahkan ,Validasi cash out

dan transaksi Top Up. Selain itu penambahan model baru yaitu fitur Help.

Model – model tersebut akan dijelaskan pada gambar dibawah ini.

4.1.1 Transaksi Top Up

Gambar 4.1 Transaksi Top Up

Keterangan :

Untuk transaksi Top Up, model baru yang diusulkan yaitu user dapat

melakukan pengisian Top Up pada aplikasi Mandiri Pay. Pertama-

tama, user membuka menu Top Up. Pada halaman Top Up tersebut,

user diharuskan mengisi deposit dengan memasukan nomor rekening

pribadi dan jumlah amount serta melakukan konfirmasi pengisian deposit.

Deposit tersebut akan digunakan untuk melakukan transaksi pada aplikasi

Mandiri Pay.

102

4.1.2 Cash Out

Gambar 4.2 Cash Out

Keterangan :

Untuk transaksi Cash Out, model baru yang diusulkan yaitu pada saat

konfirmasi cash out ditambahkan fungsi validasi akun bank. Pertama-tama,

user membuka menu Cash Out. Pada halaman Cash Out tersebut, user

melakukan proses transfer dengan mengisi akun bank tujuan, jumlah

amount dan konfirmasi Cash Out. Jika terjadi kesalahan pada pengisian

akun bank tujuan, maka sistem akan menampilkan warning atau alert

berupa pesan kesalahan. Sistem melalukan validasi rekening sebelum

terjadi proses transaksi.

103

4.1.3 Donasi

Gambar 4.3 Donasi

Keterangan :

Untuk menu Donasi, model baru yang diusulkan yaitu user dapat memilih

jenis donasi pada Aplikasi Mandiri Pay. Pertama-tama, user membuka

menu Donasi. Pada halaman Donasi tersebut, user memilih informasi

lembaga donasi, jenis donasi serta konfirmasi donasi.

104

4.1.4 Help

Gambar 4.4 Rancangan untuk Menu Help

Keterangan :

Untuk menu Help, model baru yang diusulkan yaitu user memiliki

panduan untuk menggunakan fitur – fitur pada Aplikasi Mandiri Pay. Setelah user

login, user bisa melihat informasi help guna meningkatkan pemahaman user

terhadap fitur – fitur pada Aplikasi MandiriPay.

105

4.1.5 Cetak Struk

Gambar 4.5 Rancangan untuk Menu Cetak Struk

Keterangan :

Untuk menu Cetak struk, model baru yang diusulkan yaitu user dapat

melihat struk tanpa membuka suatu link.

4.1.6 Scan Barcode

Gambar 4.6 Rancangan untuk Menu Scan Barcode

Keterangan : Untuk menu Scan Barcode, model baru yang diusulkan

yaitu pada saat user bertransaksi PLN Prepaid, user dapat mengisi field

IDPel dengan men Scan Barcode yang tertera di Meteran PLN.

106

4.1.7 Ambil Data Phone Book

Gambar 4.7 Rancangan untuk Menu Ambil Data Phone

Keterangan :

Untuk menu Ambil Data Phone Book, model baru yang diusulkan yaitu

pada saat user melakukan transaksi isi pulsa, user dapat mengisi field no

HP dengan mengambil data dari Phone Book.

4.2 Fitur-Fitur Baru

Setelah ditemukan beberapa kelemahan dari aplikasi, maka ada beberapa

fitur-fitur yang diusulkan agar kelemahan atau kekurangan yang

ditemukan dapat di minimalisir. Fitur-fitur tersebut adalah :

a) Fungsi Top Up yang bisa dilakukan dari aplikasi.

b) Pilihan daftar jenis donasi pada menu donasi.

c) Menu Help sebagai panduan user

d) Fungsi cetak Struk

e) Memasukan ID pelanggan Prepaid melalui Scan Barcode

f) Memasukan no HP dari Phone Book untuk transaksi Voucher Pulsa

107

4.3 Kebutuhan Terhadap Sistem

Usulan kebutuhan sistem untuk pengembangan dan pengujian lebih lanjut

aplikasi Mandiri Pay adalah:

- Hardware

LAN Card/ Wifi/ USB Modem

PC (Intel core 2 Duo, RAM 1Gb, Hardisk) untuk develop.

Mobile Phone yang digunakan untuk testing

2 Server. Server untuk Valuestream dan pihak Biller

Token yang digunakan untuk proses transaksi transfer antar

bank.

- Software

Netbeans dan Java J2EE (Code back end)

Keepass Password

Putty

Eclipse (Code Android)

WinSCP

Navicat Premium

108

4.4 Perancangan Use Case Mandiri Pay Baru

Gambar 4.81 Perancangan Use Case MandiriPay

System

User

LihatBeranda

LihatLaporan

Refresh

ViewSaldo

LihatAplikasi

BayarDonasi

Transaksi PLN

TransaksiPDAM

Transaksi Finnance

TransaksiVoucher

Pulsa

Transaksi Voucher

Game

Transaksi Jastel

LihatProfile

TransaksiPostpaid

Transaksi Prepaid

TransaksiNontaglis

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

KelolaProfil

Pengguna

KelolaAkunBank

LihatFavorite

LihatDompet

Cash Out

Top Up

Transfer

Lihat Status

KelolaPesan

TulisPesan

LihatPesanMasuk

LihatPesanKeluar

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

LihatStruk

<<extend>>

Use Case yang diusulkan

Use Case Voucher pulsa

mengalami penambahan

fungsionalitas

Lihat Help

Use Case yang diusulkan

Untuk Use Case Tpo Up

dan Cash Out

mengalami perubahan

di Use case spesification,

activity diagram,

squance diagram

dan class diagram.

Validasi

<<include>>

Use Case Prepaid

mengalami penambahan

fungsionalitas

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

109

4.5 Use Case Description

Tabel 4.1 Deskripsi Use Case Lihat Struk

Deskripsi Use Case Lihat Struk

Aktor : User

Deskripsi Setelah User Login ke aplikasi MandiriPay, maka user dapat

melakukan transaksi transaksi dan mendapatkan Struk pembayaran

Alternate Flow : Tidak Ada

Pre-Condition :

1. User telah login ke aplikasi.

2. User sudah melakukan suatu transaksi.

Post-Condition :

Tampil Struk bukti pembayaran

Tabel 4.2 Deskripsi Use Case Top Up

Deskripsi Use Case Transaksi Top Up

Aktor : User

Deskripsi Setelah User Login ke aplikasi MandiriPay, maka user dapat

melakukan transaksi Top Up melalui menu Profil ->Dompet -

>Informasi Top Up. Parameter yang dibutuhkan yaitu :

- No Rekening Pengirim

- No Rekening Tujuan

- Jumlah Amount

Alternate flow: user menginputkan data tidak valid, aplikasi

menampilkan pesan agar data di cek kembali

110

Pre-Condition :

1. User telah login ke aplikasi.

2. User sudah masuk ke halaman Informasi TopUp.

Post-Condition :

Deposit user bertambah

Tabel 4.3 Deskripsi Use Case Ambil Data Phone Book

Deskripsi Use Case Ambil Data Phone Book

Aktor : User

Deskripsi Setelah User Login ke aplikasi MandiriPay, maka user dapat

melakukan transaksi pembelian Voucher Pulsa untuk mengisi no HP

dapat di ambil dari Phone Book user

Alternate Flow : Tidak Ada

Pre-Condition :

1. User telah login ke aplikasi.

2. User sudah masuk ke halaman Aplikasi -> Vouceh Pulsa.

Post-Condition :

Field No HP terisi

Tabel 4.4 Deskripsi Use Case Scan Barcode

Deskripsi Use Case Scan Barcode

Aktor : User

Deskripsi Setelah User Login ke aplikasi MandiriPay, maka user dapat

melakukan transaksi pembelian voucher prepaid PLN, untuk mengisi

111

ID Pelanggan user men-scan barcode yang tertera di meteran yang

terpasang.

Alternate Flow : Tidak Ada

Pre-Condition :

1. User telah login ke aplikasi.

2. User sudah masuk ke Aplikasi-> PLN -> Prepaid.

Post-Condition :

Field ID Pelanggan terisi

Tabel 4.5 Deskripsi Use Case Validasi Rekening

Deskripsi Use Case Validasi Rekening (Cash Out)

Aktor : User

Deskripsi Setelah User Login ke aplikasi MandiriPay, maka user dapat

melakukan transaksi Cash Out melalui menu Profil DompetCash

Out. Parameter yang dibutuhkan yaitu :

- No Rekening Pengirim / Virtual Account

- No Rekening Tujuan

- Jumlah Amount

Pre-Condition :

1. User telah login ke aplikasi.

2. User sudah masuk ke halaman Dompet.

Post-Condition :

- Mengurangi saldo rekening user sebesar amount yang di Cash

112

Out

- Jika user salah memasukan No Rekening , maka sistem akan

memvalidasi terlebih dahulu dan menampilkan warning atau alert

berupa pesan kesalahan.

Tabel 4.6 Deskripsi Use Case Lihat Daftar Jenis Donasi

Deskripsi Use Case Lihat Daftar Jenis Donasi

Aktor : User

Deskripsi Setelah User Login ke aplikasi MandiriPay, maka user dapat melihat

daftar jenis donasi melalui menu Donasi-> Lihat Daftar Jenis Donasi.

Untuk melakukan Donasi Parameter yang dibutuhkan yaitu :

- Daftar Lembaga Donasi

- Jenis Donasi

- ID Donatur

- Jumlah Amount

Alternate Flow : Tidak Ada

Pre-Condition :

1. User telah login ke aplikasi.

2. User sudah masuk ke halaman Donasi.

Post-Condition :

- Mengurangi saldo rekening user sebesar amount yang di

donasikan

113

4.6 Sequence Diagram

4.6.1 Sequence Diagram Lihat Struk

Gambar 4.9 Sequence Diagram Lihat Struk

Struksd

: User

Interface Android MandiriPay Service MandiriPay

1 : Pilih Menu Beranda()

2 : Tampil Beranda

3 : Pilih Menu Sturk

4 : Get Data Struk()

5 : View List Struk

6 : View List Struk

7 : Pilih struk8 : Get Detail Struk

9 : View Detail Struk

10 : View Detail Struk

114

4.6.2 Sequence Diagram Ambil Data Phone Book

Gambar 4.10 Sequence Diagram Ambil Data Phone

Ambil Data Phone Booksd

: User

Interface android MandiriPay

1 : Pilih Menu Aplikasi()

2 : Tampil Menu Aplikasi

3 : Pilih Menu Pembayaran

4 : Tampil menu Pembayaran

5 : Pilih Menu Voucher Pulsa

6 : Tampil Menu Voucher Pulsa

7 : Tekan Tombol GetData from Phone book 8 : Get Data Nomor HP dari Phone Book()

9 : Tampil Nomor Telephone

10 : Pilih Nomor telepon

115

4.6.3 Sequence Diagram Scan Barcode

Gambar 4.11 Sequence Diagram Scan Barcode

Scan Barcodesd

: User

Interface Android MandiriPay

1 : Pilih Menu Aplikasi()

2 : Tampil Menu Aplikasi

3 : Pilih Menu Transaksi

4 : Tampil Menu Pembayaran

5 : Pilih Menu PLN

6 : Tampil menu PLN

7 : Pilih Menu Prepaid

8 : Tampil Menu Prepaid 9 : Scan Barcode()

10 : Tampil IDPEL Pelanggan

116

4.6.4 Sequence Diagram Top Up

Gambar 4.12 Sequence Diagram Top Up

Top Upsd

: User

Interface Android MandiriPay Service MandiriPay Bank

1 : Pilih Menu Profile()

2 : Tampil Profile

3 : Pilih menu Dompet

4 : Tampil Halaman Dompet

5 : Pilih Menu Top Up

6 : Tampil Menu Top Up

7 : Isi Form Data Top Up8 : Transfer Data()

9 : Data Transfer()

10 : Verifikasi Data()

11 : OTP12 : Isi OTP()

13 : Kirim OTP() 14 : Data OTP

15 : Transfer Dana()

16 : Status Transfer

17 : Olah pesan Status Transfer

18 : View Pesan Berhasil/Gagal

117

4.6.5 Sequence Diagram Cash Out

Gambar 4.13 Sequence Diagram Cash Out

4.6.6 Sequence Diagram Help

Gambar 4.14 Sequence Diagram Help

Cash Outsd

: User

Interface Android MandiriPay Service Mandiri Pay Bank

1 : Pilih Menu Profile()

2 : Tampil profile

3 : Pilih Menu Dompet

4 : Tampil Halaman Dompet

5 : Pilih Menu Cash out

6 : Tampil menu Cash Out

7 : Isi Data Cash Out8 : Data Cash Out()

9 : Verifikasi Data()

10 : Hasil Verifikasi11 : View Pesan Verifikasi

12 : Bila pesan BenarTekan Tombol Ok 13 : Data Cash Out14 : Transfer Dana()

15 : Verifikasi Data()

16 : Status Transfer17 : Olah Status Transfer

18 : View Pesan Berhasil/Gagal

Helpsd

: User

Interface Android Mandiri Pay Service MandiriPay

1 : Pilih Menu help()

2 : Get Data Help()

3 : View Data help

4 : View Data Help

118

4.7 Activity Diagram

4.7.1 Activity Diagram Lihat Struk

Gambar 4.15 Activity Diagram Lihat Struk

User Interface Android MandiriPay

Pilih MenuBeranda

Tampil Beranda

Pilih Menu Struk Tampil List Struk

Pilih Struk Tampil DetaiStruk yang

dipilih

119

4.7.2 ActivityDiagram Phone Book

Gambar 4.16 Activity Diagram Ambil Data Phone Book

User Interface android MandiriPay

Pilih MenuAplikasi

Tampil MenuAplikasi

Pilih MenuPembayaran

Tampil MenuPembayaran

Pilih MenuVoucher Pulsa

Tampil MenuVoucher Pulsa

Tekan tombol GetData FromPhoneBook

Tampil Phone Book

120

4.7.3 Activity Diagram Scan Barcode

Gambar 4.17 Activity Diagram Scan Barcode

User Interface android MandiriPay

Pilih Menu Aplikasi Tampil MenuAplikasi

Pilih MenuPembayaran Tampil menu

Pembayaran

Pilih Menu PLN Tampil Menu PLN

Pilih MenuPrepaid

Tampil MenuPripaid

Tekan TombolScanBarcode

MembacaBarcode

Tampil IDPelanggan

121

4.7.4 Activity Diagram Top Up

Gambar 4.18 Activity Diagram Top Up

User Interface Android MandiriPay Bank

Pilih MenuDompet

Tampil MenuDompet

Pilih Menu TopUp

Tampil Menu TopUp

Isi Jumlahnominal

Kirim Data TopUp

Verifikasi

Hasil Verifikasi

Input OTPKirim OTP Verifikasi OTP

Transfer Dana

Status Transfer Status TransferStatus Transfer

Ya

Tidak

Ya

Text

122

4.7.5 Activity Diagram Cash Out

Gambar 4.19 Activity Diagram Cash Out

User Interface Android MandiriPay Bank

Pilih MenuDompet Tampil Menu

Dompet

Pilih Menu CashOut

Tampil MenuCash Out

Isi No rekeningdan Jumlah

Amount

Validasi

Kirim Data CashOut

Verifikasi Data

Transfer Dana Status Transfrer

Status TransferStatus Transfer

Ya

Tidak

Hasil Verifikasi

Ya

Tidak

123

4.7.6 Activity Diagram Help

Gambar 4.20 Activity Diagram Help

Pengguna Interface android MandiriPay

Pilih Menu Help Tampil Menu Help

124

4.8 Class Diagram

Gambar 4.21 Class Diagram

4.9 Perancangan Output

4.9.1 Transaksi Top Up

Untuk melakukan Top Up melalui aplikasi MandiriPay, user pilih

menu Profil Dompet Topup. Maka akan tampil halaman To Up berikut:

Top Up

+NoRek+Bank+Jumlah+OTP

+Transfer()

Cash Out

+NoRek+Bank+Jumlah

+VerifikasiData()+Transfer()

Dompet

+Top Up()+CashOut()+Transfer()+Status()

Struk

+ViewList Struk()+Select Struk()

Help

+View Help()+Select()

Voucher Pulsa

+NoPhone+Amount+Provider

+Inquery()+Payment()+GetNoPhone()

Aplikasi Mandiri Pay

+PLN()+Voucher Pulsa()+PDAM()+Finance()+Voucher Game()+Donasi()+Dompet()

PLN Prepaid

+Id Pelanggan

+Inquery()+Payment()+Scan Barcode()

Beranda Mandiri Pay

+View Saldo()+Laporan()+Struk()

Donasi

+User+Nominal+Tujuan

+Inquery()+Payment()

125

Gambar 4.22 Mock Up Transaksi Top Up

Keterangan :

1. Inputkan data sesuai dengan data permintaan pada form, inputkan

Bank Tujuan, No Rekening tujuan (deposit account), dan Nominal

(nilai yang di Top Up). Sedangkan untuk Biaya Admin akan tampil

otomatis.

2. Kemudian klik Konfirmasi, untuk menegaskan user apakah transaksi

Top Up yang diinginkan sesuai dengan data yang diinputkan.

126

Gambar 4.2 Alert Konfirmasi

3. Jika data sudah lengkap dan diinputkan dengan benar, klik OK, data

akan diproses selanjutnya oleh admin. Struk/bukti transaksi Top Up

akan dikirim ke email.

4.9.2 Cash Out

Untuk melakukan Cash Out deposit dalam MandiriPay, user masuk

pilih Profil Dompet Cashout. Maka akan tampil halaman Cash Out

Gambar 4.34 Mock Up Cash Out

127

Keterangan :

1. Inputkan data sesuai dengan data permintaan pada form, inputkan

Bank Tujuan, No Rekening, dan Nominal (nilai yang di Cash Out).

Sedangkan untuk Biaya Admin akan tampil otomatis.

2. Kemudian klik Konfirmasi, untuk menegaskan user apakah transaksi

Cash Out yang diinginkan sesuai dengan data yang diinputkan.

Gambar 4.4 Mock Up Alert Konfirmasi Cash Out

3. Jika data sudah lengkap dan diinputkan dengan benar, klik OK, data

akan diproses selanjutnya oleh admin. Struk atau bukti transaksi Cash

Out akan dikirim ke email.

4.9.3 Donasi

Untuk melakukan transaksi donasi, user pilih menu AplikasiDonasi.

Member Donasi terbagi 2, yaitu member yang terdaftar dan member yang

belum terdaftar (baru) pada lembaga Donasi. Jika member terdaftar maka klik

pada checkbox pilihan Terdaftar.

128

Gambar 4.56 Mock Up Donasi - Terdaftar

Keterangan :

1. Inputkan data sesuai dengan data permintaan pada form, pilih Biller

(Lembaga Donasi) dan Produk. Kemudian inputkan jumlah yang

didonasikan dan ID donatur.

2. Jika data sudah lengkap dan diinputkan dengan benar, klik Cek, data

akan diproses dan selanjutnya tampil inquiry.

129

Gambar 4.67 Mock Up Inquiry Donasi

3. Setelah tampil inquiry, user dapat melakukan pembayaran dengan klik

Bayar.Kemudian tampil alert konfirmasi.

Konfirmasi Konfirmasi

Apakah Anda yakin untuk melakukan

pembayaran donasi?

OK Cancel

Gambar 4.28 7 Mock Up Alert Konfirmasi Donasi

130

4. Pastikan data sudah lengkap dan diinputkan dengan benar. Jika sudah

yakin untuk melakukan pembayaran, klik OK. Pembayaran akan

diproses danstruk/bukti transaksi donasi akan dikirim ke email.

4.9.3 Lihat Struk

Untuk melakukan transaksi donasi, user pilih menu Beranda. User

diasumsikan telah melakukan suatu transaksi pembayaran, kemudian user

memilih menu struk dan memilih struk yang akan di cetak.

Gambar 4.29 Mock Up Lihat Struk

Keterangan :

1. User memilih menu Beranda => Cetak Struk

2. User memilih struk mana yang akan di cetak/ditampilkan

3. MandiriPay menampilkan Struk yang dipilih

131

4.9.4 Scan Barcode

Untuk melakukan transaksi PLN Prepaid user memilih menu Aplikasi

-> PLN -> PLN Prepaid

Gambar 4.30 Mock Up Scan Barcode

Keterangan :

1. User Menekan tombol Scan Barcode

2. User mengarahkan kamera pada Barcode yang tertera di

meteran PLN

3. Aplikasi men-Scan Barcode

4. Field No meter/ID Pelanggan terisi

132

4.9.5 Ambil Data Phone Book

Gambar 4.31 Mock Up Ambil data Phone Book

Keterangan :

1. User Memilih Menu Aplikasi -> Voucher Pulsa

2. User memilih Biller serta nominal pengisian pulsa

3. User menekan tombol Get Phone Book untuk mencari nomor yang

akan diisi pulsa dalam kontak telepon

4. Field No Seluler terisi