bab iv rancangan sistem dan program usulan filekebutuhan sistem dari sistem pengelolaan data zakat :...
TRANSCRIPT
18
BAB IV
RANCANGAN SISTEM DAN PROGRAM USULAN
4.1. Analisa Kebutuhan Software
4.1.1. Tahap Analisis
Pada sistem informasi pengelolaan data zakat Masjid Al-Hurriyyah Puri
Indah berbasis web yang dibuat, Muzakki ( Pemberi Zakat ) tidak harus langsung
menyerahkan ke Amil ( Pengelola Zakat ) secara langsung, tetapi bisa diberikan
disalurkan melalui sistem berbasis web. Yang nantinya pembayarannya dapat
melalui e-Banking. Hal ini dilakukan untuk memudahkan Muzakki menyalurkan
kewajiban membayar Zakat Maal maupun Zakat fitrah. Berikut ini spesifikasi
kebutuhan sistem dari sistem pengelolaan data zakat :
Halaman Administrasi :
A1.Amil dapat melakukan login
A2.Amil dapat mengelola data Muzakki
A3. Amil dapat mengelola data Mustahiq
A4. Amil dapat mengelola data Zakat
Halaman User :
B1. User dapat melihat data Zakat
B2. User dapat melihat data Muzakki
B3. User dapat melihat data Mustahiq
Halaman Muzakki:
C1. Muzakki dapat melakukan login.
C2. Muzakki dapat mengisi form pembayaran zakat
C3. Muzakki menerima informasi untuk pembayaran zakat
19
A. Use Case Diagram
Use case Diagram Amil
Gambar IV.1. Deskripsi Use Case Diagram Amil
Tabel IV.1. Deskripsi Use Case Diagram Amil
Use Case Name : Amil Requirements : A1 Goal : Amil melakukan login ke sistem. Pre-Conditions : Terhubung dengan server Post-Conditions : Amil dapat login Failed End Condition : Gagal login Primary Actors : Amil Main Flow/Basic Path : 1. Masuk ke halaman Amil login
2. Input username dan password 3. Klik Login 4.Logout
Invariant B :
Amil memilih logout. Keluar dari sistem Amil dapat login kembali.
20
Use case Diagram User
Gambar IV.2. Deskripsi Use Case Diagram User
Tabel IV.2. Deskripsi Use Case Diagram User
Use Case Name : User
Requirements : B1-B3
Goal : User dapat melihat data zakat, data muzakki dan data mustahik.
Pre-Conditions : User sudah melakukan login
Post-Conditions : User memilih data balita
Failed End Condition : Koneksi server terputus.
Primary Actors : User Main Flow/Basic Path : Memilih lihat data zakat.
Memilih lihat data muzakki Memilih lihat data mustahik
Invariant -
21
Login
Mengisi Form Zakat
Melihat data Zakat
Melihat dataMustahik
Menerima informasipembayaran
Muzakki
Gambar IV.3. Deskripsi Use Case Diagram Muzakki
Tabel IV.3. Deskripsi Use Case Diagram Muzakki
Use Case Name : Muzakki
Requirements : B1-B3
Goal : User dapat melihat data zakat, data muzakki dan data mustahik.
Pre-Conditions : User sudah melakukan login
Post-Conditions : User memilih data balita
Failed End Condition : Koneksi server terputus.
Primary Actors : User Main Flow/Basic Path : Memilih lihat data zakat.
Memilih lihat data muzakki Memilih lihat data mustahik
Invariant -
22
B. Activity Diagram
Gambar IV.4. Deskripsi Activity Diagram Muzakki
23
Gambar IV.5. Deskripsi Activity Diagram Amil Mengelola Data Mustahik
24
Gambar IV.6.
Deskripsi Activity Diagram Amil Mengelola Data Zakat
Amil Sistem
25
4.2. Desain
4.2.1 Database
1. Entity Relationship Diagram
Gambar IV.6. Entity Relationship Diagram Sistem Pembayaran Zakat
26
2. Logical Relational Structure
Gambar IV.6. Entity Relationship Diagram Sistem Pembayaran
3. Spesifikasi File
Zakat
a. Spesifikasi File Tabel Muzakki Nama Database : db_zakat Nama File : Muzakki Akronim : muzakki.myd Tipe File : File Master Akses File : Random Panjang Record : 220 byte Kunci Field : id_muzakki
Tabel 4.4. Spesifikasi File Tabel Muzakki No. Element Data Nama Field Type Size Keterangan
1 ID Muzakki id_muzakki int 5 Primary Key
2 Nama Nama varchar 50
Muzakki
Id_muzakki Nik Nama Alamat Handphone Email Username password
Amil
Id_amil Nama Username password
Zakat
Kd_zakat Jenis Tgl_penerimaan jumlah
Mustahik
No_ktp Nama Alamat status
27
3 Alamat Alamat text 100
4 No KTP Nik varchar 16
5 No Handphone
Handphone varchar 12
6 Email Email varchar 25
7 Username Username varchar 6
8 Password Password varchar 6
b. Spesifikasi File Tabel Amil Nama Database : db_zakat Nama File : Amil Akronim : amil.myd Tipe File : File Master Akses File : Random Panjang Record : 66 byte Kunci Field : id_amil
Tabel 4.5. Spesifikasi File Tabel Amil No. Element Data Nama Field Type Size Keterangan
1 ID Amil id_amil varchar 4 Primary Key
2 Nama Amil nama varchar 50
3 Username user varchar 6
4 Password pass varchar 6
c. Spesifikasi File Tabel Mustahiq Nama Database : db_zakat Nama File : Mustahiq Akronim : mustahiq.myd Tipe File : File Master
28
Akses File : Random Panjang Record : 186 byte Kunci Field : no_ktp
Tabel 4.6. Spesifikasi File Tabel Mustahiq No. Element Data Nama Field Type Size Keterangan
1 No. KTP no_ktp int 16 Primary Key
2 Nama Mustahiq
Nama varchar 50
3 Alamat Alamat text 100
4 Status Status varchar 20
d. Spesifikasi File Tabel Zakat Nama Database : db_zakat Nama File : Zakat Akronim : zakat.myd Tipe File : File Transaksi Akses File : Random Panjang Record : 32 byte Kunci Field : no_ktp
Tabel 4.7. Spesifikasi File Tabel Zakat No. Element Data Nama Field Type Size Keterangan
1 Kode Zakat kd_zakat int 4 Primary Key
2 Jenis Zakat Jenis varchar 10
3 Tanggal Penerimaan
tgl_penerimaan date 8
4 Jumlah Zakat Jumlah currency 12
29
4.2.2. Software Architecture
Di dalam merancang sebuah sistem sistem informasi. Bahasa program
yang penulis gunakan adalah PHP secara terstruktur. Maka Software Architecture
yang digunakan untuk menggambarkan program adalah sebagai berikut:
30
A. Component Diagram
Login
Login Amil
Login Muzakki
Lihat data Muzakki
Menambah Data
Info Pembayaran
zakline.mdb
Lihat data Zakat
Lihat data Mustahik
Lihat data Zakat
Lihat data Mustahik
Mengisi form Zakat
Gambar IV.7. Component Diagram pada Zakat Masjid Al-Hurriyyah
B. Deployment Diagram
Gambar IV.8. Deployment Diagram pada Zakat Online Al-Hurriyyah
31
4.2.3. User Interface
1. Tampilan Beranda
32
1. Tampilan Login Amil
3. Tampilan Beranda Amil
33
2. Tampilan Tambah Zakat
34
3. Tampilan Data Muzakki
35
4. Tampilan Isi Form Zakat
4.3. Code Generation
1. Listing Lihat Muzakki <?php include("../koneksi.php"); ?> <html lang="en"> <head> <title>ZAKAT ONLINE | AMIL</title> <!-- start: CSS --> <link href="../css/bootstrap.css" rel="stylesheet"> <link href="../css/bootstrap-responsive.css" rel="stylesheet"> <link href="../css/style.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700"> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif"> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Boogaloo"> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Economica:700,400italic">
36
<!-- end: CSS --> </head> <?php session_start(); if(empty($_SESSION['username'])) { ?> <body background="image/banner-bg.jpg"> <div class="container"> <!-- role="form" --> <form class="form-signin" method="post" action="../index.php"> <h2 class="form-signin-heading"><center><span class="glyphicon glyphicon-th-large"></span>Maaf, Anda belum melakukan Login</center></h2> <button class="btn btn-lg btn-danger btn-block" type="submit">Login</button> </form> </div> <!-- /container --> </body> <?php } else { ?> <body> <!--start: Header --> <header> <!--start: Container --> <div class="container"> <!--start: Row --> <div class="row"> <!--start: Logo --> <div class="logo span3"> <a class="brand" href="amil.php"><img src="../img/logo.png" alt="Logo"></a> </div> <!--end: Logo --> <!--start: Navigation --> <div class="span9"> <div class="navbar navbar-inverse"> <div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse collapse"> <ul class="nav">
37
<li><a href="amil.php">Home</a></li> <li class="active"><a href="lihatmuzakki.php">Muzakki</a></li> <li><a href="lihatmustahik.php">Mustahik</a></li> <li><a href="lihatzakat.php">Zakat</a></li> <li><a href="../index.html">Logout</a></li> </ul> </div> </div> </div> </div> <!--end: Navigation --> </div> <!--end: Row --> </div> <!--end: Container--> </header> <!--end: Header--> <!--start: Wrapper--> <div id="wrapper"> <!--start: Container --> <div class="container"> <!-- start: Table --> <br> <form action="" method="POST"> <div class="title"><h3>Data Muzakki</h3></div> <table class="table table-hover table-condensed"> <tr> <th><center>ID</center></th> <th><center>No. KTP</center></th> <th><center>Nama Muzakki</center></th> <th><center>Alamat</center></th> <th><center>Handphone</center></th> </tr> <?php $query = mysqli_query($koneksi, "SELECT * FROM muzakki") or die (mysqli_error()); if(mysqli_num_rows($query) == 0){ echo "<b>Tidak ada data yang tersedia</b>"; }else{ while($data = mysqli_fetch_array($query)): ?> <tr> <td><center><?php echo $data['id_muz']; ?></center></td> <td><center><?php echo $data['nik']; ?></center></td> <td><center><?php echo $data['nama']; ?></center></td> <td><center><?php echo $data['alamat']; ?></center></td> <td><center><?php echo $data['handphone']; ?></center></td> <td><center><a class="btn btn-warning btn-large" href="ubahmuzakki.php?id_muz=<?php echo $data['id_muz'] ?>">UPDATE »</a></center></td>
38
<td><center><a class="btn btn-danger btn-large" href="deletemuzakki.php?id_muz=<?php echo $data['id_muz'] ?>" onClick='return confirm("Apakah Anda yakin menghapus?")'>DELETE »</a></center></td> </tr> <?php endwhile; } ?> </table> </form> <!-- end: Table --> <a class="btn btn-success btn-large" href="tambahmuzakki.php">TAMBAH DATA »</a> </div> <!--end: Container--> </div> <!-- end: Wrapper --> <!-- start: Footer Menu --> <div id="footer-menu" class="hidden-tablet hidden-phone"> <!-- start: Container --> <div class="container"> <!-- start: Row --> <div class="row"> <!-- start: Footer Menu Logo --> <div class="span2"> <div id="footer-menu-logo"> <a href="#"><img src="../img/spam.png" alt="logo" /></a> </div> </div> <!-- end: Footer Menu Logo --> <!-- start: Footer Menu Links--> <div class="span9"> <div id="footer-menu-links"> <ul id="footer-nav"> <li><a href="lihatmuzakki.php">Muzakki</a></li> <li><a href="lihatmustahik.php">Mustahik</a></li> <li><a href="lihatzakat.php">Zakat</a></li> </ul> </div> </div> <!-- end: Footer Menu Links--> <!-- start: Footer Menu Back To Top -->
39
<div class="span1"> <div id="footer-menu-back-to-top"> <a href="#"></a> </div> </div> <!-- end: Footer Menu Back To Top --> </div> <!-- end: Row --> </div> <!-- end: Container --> </div> <!-- end: Footer Menu --> <!-- start: Footer --> <div id="footer"> <!-- start: Container --> <div class="container"> <!-- start: Row --> <div class="row"> <!-- start: About --> <div class="span3"> <h3>Tentang Kami</h3> <p> Kami adalah salah satu kelompok dari mata kuliah Web Programming II yang membahas tentang Pengelolaan Data Zakat Nasional, yang beranggotakan Abdul Jabbar, Mas Sunaryo, Muhammad Afif Rivai dan Syahril Fauzi. </p> </div> <!-- end: About --> <!-- start: Photo Stream --> <div class="span3"> <h3>Alamat Kampus</h3> Jl. Salemba Tengah No.22, RT.1/RW.4, Paseban, Senen, Kota Jakarta Pusat, Daerah Khusus Ibukota Jakarta 10440<br /> Telp : (021) 31907284<br /> </div> <!-- end: Photo Stream --> <div class="span6"> <!-- start: Follow Us --> <h3>Follow Us!</h3> <ul class="social-grid"> <li> <div class="social-item">
40
<div class="social-info-wrap"> <div class="social-info"> <div class="social-info-front social-twitter"> <a href="http://twitter.com"></a> </div> <div class="social-info-back social-twitter-hover"> <a href="http://twitter.com"></a> </div> </div> </div> </div> </li> <li> <div class="social-item"> <div class="social-info-wrap"> <div class="social-info"> <div class="social-info-front social-facebook"> <a href="http://facebook.com"></a> </div> <div class="social-info-back social-facebook-hover"> <a href="http://facebook.com"></a> </div> </div> </div> </div> </li> <li> <div class="social-item"> <div class="social-info-wrap"> <div class="social-info"> <div class="social-info-front social-dribbble"> <a href="http://dribbble.com"></a> </div> <div class="social-info-back social-dribbble-hover"> <a href="http://dribbble.com"></a> </div> </div> </div>
41
</div> </li> <li> <div class="social-item"> <div class="social-info-wrap"> <div class="social-info"> <div class="social-info-front social-flickr"> <a href="http://flickr.com"></a> </div> <div class="social-info-back social-flickr-hover"> <a href="http://flickr.com"></a> </div> </div> </div> </div> </li> </ul> <!-- end: Follow Us --> <!-- start: Newsletter --> <!-- <form id="newsletter"> <h3>Newsletter</h3> <p>Please leave us your email</p> <label for="newsletter_input">@:</label> <input type="text" id="newsletter_input"/> <input type="submit" id="newsletter_submit" value="submit"> </form> --> <!-- end: Newsletter --> </div> </div> <!-- end: Row --> </div> <!-- end: Container --> </div> <!-- end: Footer --> <!-- start: Copyright --> <div id="copyright"> <!-- start: Container --> <div class="container"> <p> Copyright © Kelompok Web Programming II - 2017 <a href="http://bootstrapmaster.com" alt="Bootstrap Themes">Bootstrap Themes</a> designed by MAR
42
</p> </div> <!-- end: Container --> </div> <!-- end: Copyright --> <!-- start: Java Script --> <!-- Placed at the end of the document so the pages load faster --> <script src="../js/jquery-1.8.2.js"></script> <script src="../js/bootstrap.js"></script> <script src="../js/flexslider.js"></script> <script src="../js/carousel.js"></script> <script src="../js/jquery.cslider.js"></script> <script src="../js/slider.js"></script> <script defer src="../js/custom.js"></script> <!-- end: Java Script --> </body> <?php } ?> </html>
5. Listing Login Muzakki
<?php include("../koneksi.php"); ?> <html lang="en"> <head> <title>LOGIN | Muzakki</title> <!-- Bootstrap core CSS --> <link href="../dist/css/bootstrap.min.css" rel="stylesheet"> <script src="../dist/js/jquery-1.9.1.js"></script> <script src="../dist/js/bootstrap.js"></script> <!-- Custom styles for this template --> <link href="signin.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="assets/js/ie-emulation-modes-warning.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="assets/js/ie10-viewport-bug-workaround.js"></script> </head> <body background="image/banner-bg.jpg"> <div class="container"> <!-- role="form" --> <form class="form-signin" method="post" action="session.php"> <h2 class="form-signin-heading"><center><span class="glyphicon glyphicon-th-large"></span>Welcome Muzakki</center></h2> <h5 class="baru">Login To Muzakki</h5>
43
<input name="username" id="user" type="input" class="form-control" placeholder="Masukkan Username" required autofocus> <input name="password" id="pass" type="password" class="form-control" placeholder="Masukkan Password" required> <label class="checkbox"> <input type="checkbox" value="remember-me"> Remember me </label> <button class="btn btn-lg btn-danger btn-block" type="submit">Log In</button> <a class="btn btn-lg btn-success btn-block" href="../index.html">Back to Home</a> </form> </div> <!-- /container --> <!-- Modal Dialog Contact --> <div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Contact Us</h4> </div> <div class="modal-body"> Aplikasi ini masih dalam pengembangan, dan masih dikembangkan oleh Muhammad Afif Rivai yang dapat di hubungi di <table> <tr> <td>No Telepon</td> <td>:</td> <td>0878 8643 0157</td> </tr> <br /> <tr> <td>E-mail</td><td>:</td> <td><a href="mailto:[email protected]">[email protected]</a> | <a href="mailto:[email protected]">[email protected]</a></td> </tr> <br /> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- end dialog modal --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <br /> <br /> <br /> <br /> <br /> <br />
44
<br /> <br /> <br /> <br /> <br /> <br /> <center><h5 class="form-signin">Copyright © Kelompok Web Programming II - <a href="#" data-toggle="modal" data-target="#contact">MAR</a></h5></center> </body> </html>
4.4. Testing
Terjadi perubahan ketika penginputan sering terjadi, pada tahap ini
penggujian dengan menggunakan tahapan black box testing untuk memastikan
sistem yang telah dibuat sesuai dengan desainnya dan semua fungsi dapat
digunakan dengan baik.
45
A. Form Tambah Muzakki
Tabel IV.8. Hasil Pengujian Black Box Testing Form Lihat Muzakki
No
Skenario Pengujian
Test Case Hasil yang di harapkan
Hasil Pengujian
Kesimpulan
1 Mengosongkan semua kolom isian dan langsung klik tombol Simpan
Semua kolom isian kosong
Sistem tidak memproses penyimpanan data dan akan menampilkan pesan error pada tiap kolom yang kosong
Sesuai Harapan
Valid
2 Hanya mengisi salah satu dari kolom isian dan klik tombol Simpan Data
Mengisi salah satu kolom isian dan membiarkan yang lain kosong
Sistem tidak memproses penyimpanan data dan akan menampilkan pesan error pada tiap kolom kecuali kolom yang terisi
Sesuai Harapan
Valid
3 Mengisi kolom NIK dan klik tombol Simpan Data
NIK: 31118664KMK(Salah)
Sistem tidak memproses penyimpanan data dan akan menampilkan pesan error “Harus diisi dengan angka”
Sesuai Harapan
Valid
4 Mengisi kolom handphone dengan huruf dan klik tombol simpan
Nomor Telepon /Fax: 0896abc(Salah)
Sistem tidak memproses penyimpanan data dan akan menampilkan pesan error “Harus diisi dengan angka”
Sesuai Harapan
Valid
5 Mengisi kolom email dengan format email yang salah dan klik tombol Simpan
Email perusahaan: maman$gmail.com (Salah)
Sistem tidak memproses penyimpanan data dan akan menampilkan pesan error "Format email tidak valid."
Sesuai harapan
Valid
Mengisi semua kolom dengan benar dan klik tombol Simpan
Sistem memproses dan menyimpan data pesanan ke database, lalu muncul halaman Data Muzakki
Sesuai harapan
Valid
46
B. Form Login Admin
Tabel IV.9. Hasil Pengujian Black Box Testing Form Login Admin
No
Skenario Pengujian Test Case Hasil yang di harapkan
Hasil Pengujian
Kesimpulan
1 Username dan Password dalam keadaan kosong dan klik tombol Login
Username:(kosong) Password:(kosong)
Sistem akan menampilkan error " Username dan Password masih kosong"
Sesuai Harapan
Valid
2 Mengisi Username yang tidak terdaftar dan klik tombol Login
Username: test (tidak terdaftar) Sistem akan menampilkan error " Username salah."
Sesuai Harapan
Valid
3 Mengisi Username dengan benar dan Password salah lalu klik tombol Login
Username: admin (benar) Password: coba (salah)
Sistem akan menampilkan error " Password salah."
Sesuai Harapan
Valid
4 Mengisi Username dan Password dengan benar dan klik tombol Login
Username: afif (benar) Password: afif (benar)
Sistem menerima akses dan redirect ke halaman beranda Amil
Sesuai Harapan
Valid
Mengulangi proses pengembangan mulai dari analisis spesifikasi untuk
perubahan perangkat lunak yang sudah ada, tapi tidak untuk membuat perangkat
lunak baru.
4.5. Support
4.5.1. Publikasi Web
Pada pembuatan skripsi ini penulis membuat program berbasis web
digunakan secara online. Penulis sudah melakukan registrasi untuk pendaftaran
hosting dan domain secara berbayar. Melalui Domainesia.com, berikut rincian
biaya penyewaan hosting dan domain online.
47
Tabel IV.9. Rincian Publikasi Web
Domain zakatonline-alhurriyyah.pw
Periode Pendaftaran 1 tahun
Disk Space 300 MB
Jumlah Rp 27.000
Lokasi Server Indonesia
Total Keseluruhan Rp 27.000
4.5.2. Spesifikasi Hardware dan Software
Spesifikasi Hardware dan Software
Kebutuhan hardware meliputi Processor, Memory, monitor, Hard disk, Keyboard, dan
mouse. Sedangkan kebutuhan Software meliputi Sistem Operasi, Local Server Xampp, HTML,
PHP dan MySQL.
Tabel IV.15. Spesifikasi Hardware Dan Software
Kebutuhan Keterangan
Sistem Operasi Windows 10 32 Bit
Processor Core i3
Ram 2 GB
Hardisk 500 GB
DVD-ROM DVD-SuperMulti DL drive
Monitor SVGA 14”
Keyboard 101/102 Key
Printer Deskjet 2135
Mouse Standart
Browser Mozilla Firefox, Google chrome, Internet Explorer
Software Sublime, Xampp, Wamp, MySql, PHP, HTML