BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN

(1)

22

BAB IV

RANCANGAN SISTEM DAN PROGRAM USULAN

4.1. Analisa Kebutuhan Software 4.1.1. Tahapan Analisis

Sistem informasi pengelolaan dana donasi pada Panti Asuhan Lentera Qolbu Amanah Kota Sukabumi, dirancang agar pengelola panti asuhan dapat dengan mudah melakukan pengelolaan keuangannya.

Spesifikasi kebutuhan (system requirment) dari sistem pengelolaan dana donasi yaitu:

Halaman User yaitu:

A1. User dapat melakukan daftar akun. A2. User dapat melakukan login.

A3. User dapat isi dan upload bukti data donasi. A4. User dapat logout dari halaman user.

Halaman Admin yaitu: B1. Admin melakukan login.

B2. Admin dapat mengelola data berita

B3. Admin dapat mengelola data konfirmasi donasi B4. Admin dapat mengelola data keuangan

B5. Admin dapat mengelola data laporan B6. Admin dapat logout dari halaman Admin.

(2)

4.1.2. Use Case Diagram

Penggambaran Use Case dari sistem yang akan dirancang sebagai berikut: 1. Use Case Diagram Halaman User

uc Use Case Model

User

Daftar Akun

Login

Isi dan upload bukti data donasi. Logout

«include» «extend»

Gambar IV. 1 Use Case Diagram Halaman User

Deskripsi Use Case Diagram Halaman User:

Tabel IV. 1 Deskripsi Use Case Diagram Login User

Use Case Name Login User

Requirement A1

Goal User dapat melakukan daftar akun

Pre-condition Isi data lengkap

Post-condition Data user tersimpan

Failed end condition User gagal simpan data

Primary Actor User

Main Flow/Basic Path 1. System menampilkan halaman daftar akun 2. User memasukkan data.

3. User simpan data

Invariant -

Tabel IV. 2 Deskripsi Use Case Diagram Isi dan Upload Bukti Dana Donasi

Use Case Name Isi dan Upload Dana Donasi

(3)

Goal User dapat simpan data

Pre-condition User memilih login user

Post-condition System berhasil simpan data Failed end condition System gagal simpan data

Primary Actor User

Main Flow/Basic Path 1. User melakukan login

2. User isi dan upload dana donasi 3. User melakukan logout

Invariant

2. Use Case Diagram Halaman Admin

uc Use Case Model

Admin Login data berita data konfirmasi donasi data keuangan data laporan Logout

Input Username dan Passw ord

«include»

Gambar IV. 2 Use Case Diagram Halaman Admin

Deskripsi Use Case Diagram Halaman Admin:

Tabel IV.3 Deskripsi Use Case Diagram Login Admin

Use Case Name Login

Requirement B1

Goal Admin dapat masuk ke system

Pre-condition Data admin telah tersimpan di database system

Post-condition Admin dapat masuk ke system

Failed end condition Admin tidak memilih login

Primary Actor Admin

Main Flow/Basic Path 1. Admin memilih login pada system.

(4)

dan level akses.

3. System melakukan validasi.

 Apakah password dan level akses sesuai

dengan username yang tersimpan.

 Apakah username tersimpan.

4. System akan mengaktifkan halaman admin, seperti menu-menu yang dapat diakses oleh admin.

Invariant 1.Jika username, password dan level akses tidak

sesuai, maka akan muncul pesan, “Login anda bukan Admin”.

Tabel IV. 4 Deskripsi Use Case Diagram Menu Data Berita

Use Case Name Mengelola Data Berita

Requirement B1,B2,B6

Goal Admin dapat menambah, meng-edit dan

menghapus data berita

Pre-condition Admin telah login

Post-condition Data berita tersimpan, ter-update atau terhapus

Failed end condition Gagal menyimpan, meng-update atau

menghapus

Main Flow/Basic Path 1. Admin melihat data berita 2. Admin memilih tambah berita.

3. System menampilkan form data berita. 4. Admin meng-input data berita baru. 5. Admin memilih tombol “Simpan”. 6. System menyimpan data berita.

Alternate Flow/ Invariant A

1. Admin memilih Edit.

2. System menampilkan form data berita. 3. Admin meng-edit data berita.

Kembali ke nomor 5. 4.Admin memilih Hapus.

5. System menghapus data berita.

Invariant B

Tabel IV. 5 Deskripsi Use Case Diagram Data Konfirmasi Donasi

Use Case Name Data Konfirmasi Donasi

Requirement B1,B3,B6

Goal Admin dapat mengelola Konfirmasi Donasi

Pre-condition Admin memilih login admin

Post-condition System menampilkan data Konfirmasi Donasi Failed end condition Admin gagal Konfirmasi Donasi

(5)

Primary Actor Admin

Main Flow/Basic Path 1. Admin melanjutkan Konfirmasi Donasi

2. System menampilkan data Konfirmasi

Donasi

3. Admin menyetujui Konfirmasi Donasi 4. System menyimpan Konfirmasi Donasi

Invariant

Tabel IV. 6 Deskripsi Use Case Diagram Menu Data Keuangan

Use Case Name Mengelola Data Keuangan

Requirment B1,B4,B6

Goal Data Keuangan dapat dikelola

Pre-condition Admin Login

Post-condition Admin mengelola

Failed end condition Admin gagal mengelola data keuangan

Main Flow/Basic Path 1. Admin login

2. Admin mengelola data keuangan 3. Admin logout

Invariant

Tabel IV. 7 Deskripsi Use Case Diagram Menu Laporan

Use Case Name Mengelola Laporan

Requirment B1,B5

Goal Laporan ditampilkan

Pre-condition Data seluruh keuangan tersimpan

Post-condition Admin dapat masuk ke system

Failed end condition Admin tidak memilih menu laporan keuangan

Main Flow/Basic Path 1. Admin memilih menu laporan

2. Admin memilih laporan berdasarkan bulan 3. System menampilkan laporan

Invariant 1. Jika admin ingin mencetak laporan

keuangan, maka admin memilih tombol cetak kemudiam system akan mencetak laporan.

(6)

4.1.3. Activity Diagram

1. Activity Diagram User Isi dan Upload Dana Donasi

act Halaman User

System User

Start

Melakukan Login

Cek Data

Sesuai?

Tampil Halaman User Pilih Menu Isi Data Donasi

Input isi dan upload data dana donasi

Simpan Data

Finish [Tidak]

[Ya]

Gambar IV.3 Activity Diagram User Isi dan Upload Dana Donasi

2. Activity Diagram Login Admin

act Business Process Model

System Admin

Start

Cek Data

Sesuai?

Tampil Halaman Admin

Finish [Tidak]

[Ya]

(7)

3. Activity Diagram Mengelola Data Berita act Admin mengelola data berita

Start

Pilih Menu Berita

Input Data Berita SImpan Data

Finish

Gambar IV.5 Activity Diagram Mengelola Data Berita

4. Activity Diagram Mengelola Data Konfirmasi Donasi act Mengelola Data Konfirmasi Donasi

Start

Pilih Menu Konfirmasi Donasi

Tampil Data Konfirmasi Donasi

Pilih Tombol

Konfirmasi Pilih Tombol _Hapus

Simpan Data Hapus Data

Finish

(8)

5. Activity Diagram Mengelola Data Keuangan act Mengelola Data Keuangan

Start

Pilih Menu Data Keuangan Tampil Data Keuangan

Pilih Tombol Tambah

Isi Data dan Upload Bukti Donasi

Simpan Data

Finish

Gambar IV.7 Activity Diagram Mengelola Data Keuangan

6. Activity Diagram Laporan

act Laporan

Start

Pilih Menu Laporan Tampil Form Laporan

Pilih Tanggal Bulan Tahun Tampil Laporan

Finish

(9)

4.2 Desain

4.2.1 Database

Desain database dalam skripsi ini menggunakan Entity Relationship Diagram (ERD). Bentuk ERD yang digunakan dalam sistem sebagai berikut:

A. Entity Relationship Diagram (ERD).

Tb_Admin Tb_Donasi Tb_Berita Tb_Donatur Tb_Bank isi isi isi memiliki No_admin Nama_Admin No_telepon email password _{Id_berita} Tgl_post judul Isi_berita gambar Id_donatur Nama_donatur Alamat_donatur Telp_donatur Email_donatur Password_donatur Nama_bank Kode_bank Atas_nama nominal Tgl_donasi No_donasi status No_admin No_donasi Id_berita No_admin Kode_bank

No_donasi No_donasi Id_donatur

1 M 1 M M 1 1 1

(10)

B. Logical Record Structure Tb_Berita Id_berita Tgl_post judul Isi_berita Gambar No_admin ** Tb_Admin Tb_Donasi No_donasi Tgl_donasi nominal status No_Admin ** Kode_bank ** Id_donatur ** Tb_Donatur Id_donatur Nama_donatur Alamat_donatur Telp_donatur Email_donatur Password_donatur Tb_Bank Kode_bank Nama_bank Atas_nama Tb_Berita Id_berita Tgl_post judul Isi_berita Gambar No_admin ** Tb_Admin No_admin Nama_Admin No_telepon email password Tb_Donasi No_donasi Tgl_donasi nominal status No_Admin ** Kode_bank ** Id_donatur ** Tb_Donatur Id_donatur Nama_donatur Alamat_donatur Telp_donatur Email_donatur Password_donatur Tb_Bank Kode_bank Nama_bank Atas_nama

Gambar IV.10 Logical Record Structure

3. Spesifikasi File

a. Spesifikasi File Tabel Admin

Nama Database : db_donasi

Nama File : Tabel Admin

Akronim : tb_Admin

Tipe File : Master

Akses File : Random

Panjang record : 96 Karakter

Kunci Field : No_Admin

Tabel IV. 8 Spesifikasi File Tabel Admin

No. Elemen Data Nama Field Tipe Panjang Keterangan

1. No admin No_admin Int 11 Primary Key

2. Nama_Admin Nama_Admin Varchar 15

3. No telepon No_telepon Varchar 15

4. email email Varchar 15

5. Password Password Varchar 40

b. Spesifikasi File Tabel Berita

Nama File : Tabel Berita

Akronim : tb_berita

(11)

Primary Key : id_berita

Tabel IV. 9 Spesifikasi File Tabel Berita

No. Elemen Data Nama_Field Tipe Panjang Keterangan

1. Id Berita Id_berita Varchar 10 Primary Key

2. Tgl_post Tgl_post Date

3. judul judul Varchar 30

4. Isi_berita Isi_berita Text

5. Gambar Gambar Varchar 20

6. No_admin No_admin Int 11 Foreign Key

c. Spesifikasi File Tabel Donatur

Nama File : Tabel Donatur

Akronim : Tb_Donatur

Tipe File : Master

Primary Key : id_donatur

Tabel IV. 10 Spesifikasi File Tabel Donatur

No. Elemen Data Akronim Tipe Panjang Keterangan

1. Id donatur Id_donatur Int 11 Primary key

2. Nama donatur Nama_donatur Varchar 10

3. Alamat donatur Alamat_donatur Varchar 30

4. Telp donatur Telp_donatur Date

5. Email donatur Email_donatur Varchar 15

6. Password donatur Password_donatur Varchar 40

d. Spesifikasi File Tabel Donasi

Nama File : Tabel Donasi

Akronim : Tb_Donasi

Tipe File : Transaksi

(12)

Tabel IV. 11 Spesifikasi File Tabel Donasi

No. Elemen Data Nama_Field Tipe Panjang Keterangan

1. No donasi No_donasi Int 11 Primary Key

2. Tgl_donasi Tgl_donasi Date

3. nominal nominal Varchar 20

4. status status Varchar 10

5. No Admin No_Admin Int 11 Foreign Key

6. Kode bank Kode_bank Int 11 Foreign Key

7. Id donatur Id_donatur Int 11 Foreign Key

e. Spesifikasi File Tabel Bank

Nama File : Tabel Bank

Akronim : Tb_Bank

Tipe File : Transaksi

Primary Key : Kode_Bank

Tabel IV. 12 Spesifikasi File Tabel Bank

No. Elemen Data Nama_Field Tipe Panjang Keterangan

1. Kode bank Kode_bank Int 11 Primary Key

2. Nama_bank Nama_bank Varchar 20

3. Atas nama Atas_nama Varchar 20

4.2.2 Software Architecture A. Component Diagram

cmp Use Case Model

Menu Utama Admin <<UI>> Database Applkasi j query.j s style.css xampp serv er mysql database

Menu Utama User <<UI>>

(13)

B. Deployment Diagram

deployment Deployment Model

Localhost

Menu Utama Admin <<UI>>

Menu Utama User <<UI>> j query.j s style.css Database Application Database Mysql Database Client PC Brow ser

Gambar IV.12 Deployment Diagram Sistem Pengelolaan Dana Donasi 4.2.3 User Interface

A. Form Halaman Utama

(14)

B. Form Halaman Cara Donasi

Gambar IV.14 Form Halaman Cara Donasi C. Form Halaman Daftar Akun Donatur

(15)

D. Form Halaman Login Donatur

Gambar IV.16 Form Halaman Login Donatur E. Form Halaman Utama Admin

(16)

F. Form Halaman Donatur

Gambar IV.18 Form Halaman Donatur G. Form Halaman Konfirmasi Donasi

Gambar IV.19 Form Halaman Konfirmasi Donasi H. Form Halaman Laporan Donasi

Gambar IV.20 Form Halaman Laporan Donasi

4.3 Code Generation Form Donasi

<!DOCTYPE html>

(17)

</div> </div> </div>

</section>

<div class="col-lg-12 "> <form name="form" action="<?php echo base_url().'halaman_back/simpan_donasi'?>" enctype="multipart/form-data" method="post"> <div class="col-lg-12">

Nominal Donasi

<input name="donatur" value="<?php echo $this->session->userdata('ses_id');?>" type="hidden">

</div>

<div class="col-lg-12"> Bank

<select name="bank" class="form-control"> <?php

foreach ($bank as $value) {

echo "<option value='>kode_bank'>Rekening : $value->no_rekening - $value->nama_bank a/n $value->atas_nama</option>";

} ?> </select> </div> <br> <div class="col-lg-12">

<button class="primary-btn primary" style="float: right;">SIMPAN DONASI</button> </div> <table class="table"> <tr> <th>No Donasi</th> <th>Tanggal Donasi</th> <th>Nominal</th> <th>Status</th> <th>Konfirmasi</th> </tr>

(18)

<?php

foreach ($donasi as $value) { ?> <td><?php echo $value->no_donasi ?></td> <td><?php echo $value->tgl_donasi ?></td> <td><?php echo number_format($value->nominal) ?></td> <td><?php echo $value->status ?></td> <td><?php if($value->status=='Menunggu'){ ?>

<a href="#" data-toggle="modal" data-target="#modal_edit<?php echo $value->no_donasi;?>"><button class="btn btn-danger btn-sm">Upload Bukti</button></a> <?php

}elseif($value->status=='Sukses'){ ?>

<img src=<?php echo base_url("images/bukti_tf/".$value->bukti) ?> width='100' height='100'>

<?php }else{ ?>

<label class="btn btn-success"> Terimakasih Donasi anda telah valid </label>

</div> </div> </section>

</div>

<?php

foreach ($donasi as $value) {

?>

<div class="modal fade" id="modal_edit<?php echo $value->no_donasi?>" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">

</div>

<form name="form" action="<?php echo base_url().'Halaman_utama/SimpanKonfirm'?>" enctype="multipart/form-data" method="post"> <div class="modal-body">

<label class="control-label col-xs-3" >Bukti</label> <div class="col-xs-8">

<input name="nodonasi" value="<?php echo $value->no_donasi; ?>" class="form-control" type="hidden" placeholder="Kode Barang..." readonly>

</div> </div>

<button class="btn" data-dismiss="modal" aria-hidden="true">Tutup</button> <button class="btn btn-info">Upload</button>

</div> </div> <?php } ?>

(19)

4.4 Testing

Pengujian yang dilakukan dalam program ini adalah menggunakan

Blackbox testing.

A. Pengujian Terhadap Form Login Admin

Tabel IV.13 Hasil Pengujian Black Box Testing Halaman Login Admin

No. Skenario

pengujian

Test Case Hasil yang diharapkan Hasil pengujian Kesimpulan 1 Username, dan password tidak diisi kemudian klik tombol login

Username : (kosong) Password : (kosong) Sistem akan menolak akses dan menampilkan “ Username atau Password Anda Salah.” Sesuai harapan Valid 2 Mengetikan Username, dan password tidak diisi kemudian klik tombol login

Username : (ask) Password : (kosong) Sistem akan menolak akses dan menampilkan “Username atau Password Anda Salah.” Sesuai harapan Valid 3 Mengetikan password, dan username tidak diisi kemudian klik tombol Login

Username : (kosong) Password : (12345) Sistem akan menolak akses dan menampilkan “Username atau Password Anda Salah.” Sesuai harapan Valid 4 Mengetikan password, dan username tidak diisi kemudian klik tombol Login

Username : (kosong) Password : (12345) Sistem akan menolak akses dan menampilkan “Username atau Password Anda Salah.” Sesuai harapan Valid 5 Mengetikan

kondisi salah pada

username, dan password diisi Username : (ask) (salah) Password Sistem akan menolak akses dan menampilkan Sesuai harapan Valid

(20)

salah kemudian klik tombol Login

: (12345) (salah) “Username atau Password Anda Salah.” 6 Mengetikan satu kondisi salah username, dan password diisi kemudian klik tombol Login Username : (ask) (benar) Password : (admin) (salah) Sistem akan menolak akses dan menampilkan “Username atau Password Anda Salah.” Sesuai harapan Valid 7 Mengetikan satu

kondisi salah pada

username, dan password diisi kemudian klik tombol Login Username : (admin) (benar) Password : (12345) (salah) Sistem akan menolak akses dan menampilkan “Username atau Password Anda Salah.” Sesuai harapan Valid 8 Mengetikan username, dan password dengan

data yang benar kemudian klik tombol Login Username : (admin) (benar) Password : (admin) (benar) Sistem menerima akses login kemudian langsung menampilkan halaman utama Sesuai harapan Valid

A. Pengujian Terhadap Form Login User

Tabel IV.14 Hasil Pengujian Black Box Testing Halaman Login User

No. Skenario

pengujian

Test Case Hasil yang

diharapkan Hasil pengujian Kesimpulan 1 Username, dan password tidak diisi kemudian klik tombol login Username : (kosong) Password : (kosong) Sistem akan menolak akses dan menampilkan “Username atau Password Anda Salah” Sesuai harapan Valid 2 Mengetikan Username, dan password tidak diisi kemudian klik tombol Username : (ask) Password : (kosong) Sistem akan menolak akses dan menampilkan “Username atau Password Anda

Sesuai

(21)

login Salah” 3 Mengetikan password, dan username tidak diisi kemudian klik tombol Login Username : (kosong) Password : (12345) Sistem akan menolak akses dan menampilkan “Username atau Password Anda Salah” Sesuai harapan Valid 4 Mengetikan password, dan username tidak diisi kemudian klik tombol Login Username : (kosong) Password : (12345) Sistem akan menolak akses dan menampilkan “Username atau Password Anda Salah” Sesuai harapan Valid 5 Mengetikan kondisi salah pada username, dan password diisi salah kemudian klik tombol Login Username : (ask) (salah) Password : (12345) (salah) Sistem akan menolak akses dan menampilkan “Username atau Password Anda Salah” Sesuai harapan Valid 6 Mengetikan satu kondisi salah username, dan password diisi kemudian klik tombol Login Username : (ask) (benar) Password : (admin) (salah) Sistem akan menolak akses dan menampilkan “Username atau Password Anda Salah” Sesuai harapan Valid 7 Mengetikan satu kondisi salah pada username, dan password diisi kemudian klik tombol Login Username : (admin) (benar) Password : (12345) (salah) Sistem akan menolak akses dan menampilkan “Username atau Password Anda Salah” Sesuai harapan Valid 8 Mengetikan username, dan password dengan data yang benar kemudian klik tombol Login Username : (admin) (benar) Password : (admin) (benar) Sistem menerima akses login kemudian langsung menampilkan halaman utama Sesuai harapan Valid

(22)