BAB IV 2 PERANCANGAN SISTEM APLIKASI YANG DIUSULKAN

(1)

100

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

(2)

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

(3)

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

(4)

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

(5)

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

(6)

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

(7)

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

(8)

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

(9)

4.4 Perancangan Use Case Mandiri Pay Baru

Gambar 4.81_{Perancangan Use Case MandiriPay}

System User Lihat Beranda Lihat Laporan Refresh View Saldo Lihat Aplikasi Bayar Donasi Transaksi PLN Transaksi PDAM Transaksi Finnance Transaksi Voucher Pulsa Transaksi Voucher Game Transaksi Jastel Lihat Profile Transaksi Postpaid Transaksi Prepaid Transaksi Nontaglis <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> Kelola Profil Pengguna Kelola Akun Bank Lihat Favorite Lihat Dompet Cash Out Top Up Transfer Lihat Status Kelola Pesan Tulis Pesan Lihat Pesan Masuk Lihat Pesan Keluar <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> Lihat Struk <<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

(10)

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

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

(11)

Pre-Condition :

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

melakukan transaksi pembelian Voucher Pulsa untuk mengisi no HP

dapat di ambil dari Phone Bookuser

Pre-Condition :

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

(12)

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

terpasang.

Pre-Condition :

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

melakukan transaksi Cash Out melalui menu Profil  DompetCash

Out. Parameter yang dibutuhkan yaitu :

- No Rekening Pengirim / Virtual Account

- No Rekening Tujuan

- Jumlah Amount

Pre-Condition :

2. User sudah masuk ke halaman Dompet.

Post-Condition :

(13)

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

Pre-Condition :

2. User sudah masuk ke halaman Donasi.

Post-Condition :

- Mengurangi saldo rekening user sebesar amount yang di

(14)

4.6 Sequence Diagram

4.6.1 Sequence Diagram Lihat Struk

Gambar 4.9_{Sequence Diagram}_{Lihat Struk}

Struk

sd

: 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 struk

8 : Get Detail Struk

(15)

4.6.2 Sequence Diagram Ambil Data Phone Book

Gambar 4.10_{Sequence Diagram}_{Ambil Data Phone}

Ambil Data Phone Book

sd

: 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

(16)

4.6.3 Sequence Diagram Scan Barcode

Gambar 4.11Sequence DiagramScan Barcode

Scan Barcode

sd

: 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()}

(17)

4.6.4 Sequence Diagram Top Up

Gambar 4.12_{Sequence Diagram}_{Top Up}

Top Up sd

: 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 Up 8 : Transfer Data() _{9 : Data Transfer()}

10 : Verifikasi Data()

11 : OTP 12 : Isi OTP()

13 : Kirim OTP() _{14 : Data OTP}

15 : Transfer Dana()

16 : Status Transfer

17 : Olah pesan Status Transfer

(18)

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 Out

sd

: 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 Out

8 : Data Cash Out()

10 : Hasil Verifikasi 11 : View Pesan Verifikasi

12 : Bila pesan BenarTekan Tombol Ok _{13 : Data Cash Out}

14 : Transfer Dana()

16 : Status Transfer 17 : Olah Status Transfer

18 : View Pesan Berhasil/Gagal

Help sd

: User

Interface Android Mandiri Pay Service MandiriPay

1 : Pilih Menu help()

2 : Get Data Help()

(19)

4.7 Activity Diagram

4.7.1 Activity Diagram Lihat Struk

Gambar 4.15_{Activity Diagram}_{Lihat Struk}

User Interface Android MandiriPay

Pilih Menu Beranda

Tampil Beranda

Pilih Menu Struk Tampil List Struk

Pilih Struk Tampil Detai Struk yang

(20)

4.7.2 ActivityDiagram Phone Book

Gambar 4.16Activity Diagram Ambil Data Phone Book

User Interface android MandiriPay

Pilih Menu Aplikasi

Tampil Menu Aplikasi

Pilih Menu

Pembayaran Tampil Menu_Pembayaran

Pilih Menu

Voucher Pulsa _{Voucher Pulsa}Tampil Menu

Tekan tombol Get Data From PhoneBook

(21)

4.7.3 Activity Diagram Scan Barcode

Gambar 4.17Activity DiagramScan Barcode

User Interface android MandiriPay

Pilih Menu Aplikasi Tampil Menu Aplikasi

Pilih Menu

Pembayaran Tampil menu Pembayaran

Pilih Menu PLN _{Tampil Menu PLN}

Pilih Menu

Prepaid Tampil Menu_Pripaid

Tekan Tombol ScanBarcode

Membaca Barcode

(22)

4.7.4 Activity Diagram Top Up

Gambar 4.18_{Activity Diagram}_{Top Up}

User Interface Android MandiriPay Bank

Pilih Menu Dompet

Tampil Menu Dompet

Pilih Menu Top Up

Tampil Menu Top Up

Isi Jumlah nominal

Kirim Data Top

Up Verifikasi

Hasil Verifikasi

Input OTP Kirim OTP Verifikasi OTP

Transfer Dana

Status Transfer Status Transfer Status Transfer

Ya Tidak

(23)

4.7.5 Activity Diagram Cash Out

Gambar 4.19_{Activity Diagram}_{Cash Out}

User Interface Android MandiriPay Bank

Pilih Menu

Dompet Tampil Menu

Dompet

Pilih Menu Cash Out

Tampil Menu Cash Out

Isi No rekening dan Jumlah

Amount

Validasi

Kirim Data Cash Out

Verifikasi Data

Transfer Dana Status Transfrer

Status Transfer Status Transfer

Ya Tidak

Hasil Verifikasi

(24)

4.7.6 Activity Diagram Help

Gambar 4.20_{Activity Diagram}_Help

Pengguna Interface android MandiriPay

(25)

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

(26)

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

(27)

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

(28)

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 AplikasiDonasi.

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

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

(29)

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

(30)

[image:30.595.230.450.82.391.2]

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

[image:30.595.224.450.500.622.2]

(31)

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

[image:31.595.245.435.309.510.2]

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

(32)

4.9.4 Scan Barcode

Untuk melakukan transaksi PLN Prepaid user memilih menu Aplikasi

[image:32.595.225.406.191.469.2]

-> 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

(33)

[image:33.595.208.418.127.428.2]

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