BAB IV IMPLEMENTASI DAN PENGUJIAN

Transkripsi

1 BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1 Implementasi Sistem Dalam penulisan tugas akhir ini pembuatan program menggunakan web server Sistem Informasi Pengelolaan ZIS pada Masjid Jami Baitul Hikmah menggunakan software aplikasi pemrograman MYSQL dan Xampp sebagai software aplikasi pengolah database. 4.2 Implementasi Requirement 1. Hardware Hardware (Perangkat Keras) digunakan dalam pembuatan sistem informasi berbasis web pada Masjid Jami Baitul Hikmah spesifikasinya adalah sebagai berikut : a. Processor : INTEL ATOM 2310M b. Hardisk : 160GB c. RAM : 1GB d. VGA Card : 256MB Intel Graphic e. Monitor : LED 10 f. Keyboard : Standar g. Mouse : Optic 2. Software Software (Perangkat Lunak) digunakan dalam pembuatan sistem informasi ini memiliki spesifikasi sebagai berikut : a. Sistem operasi Windows XP & Windows 7 (Ultimate Edition) b. Server: localhost via TCP/IP c. Server version: d. Protocol version: 10 e. User: root@localhost 69

2 70 f. MYSQL charset: UTF-8 Unicode (utf8)web Server Apache/ (Win32) mod_ssl/ OpenSSL/1.0.0e PHP/5.3.8 mod_perl/2.0.4 Perl/v g. MYSQL client version: MYSQLnd dev $Revision: $ h. PHP extension: MYSQL i. Web Browser (Google Chrome), (Internet Explorer), (Opera v12.02) j. Macromedia Dreamweaver 8 k. Adobe Dreamweaver CS3 4.3 Implementasi Database Halaman MYSQL Database db_simzis Pembuatan Database db_simzis di dalam MYSQL. Diawali memasukkan db_simzis ke dalam kolom Create new Database. Gambar 4.1 Database db_simzis Membuat Tabel tbl_muzaki Pembuatan tbl_muzaki di dalam MYSQL. Diawali memasukkan tbl_muzaki ke dalam kolom Create table on db_simzis. setelah basis data tercipta, maka selanjutnya dapat dibuat tabel-tabel diperlukan dalam pembuatan aplikasi ini, cara membuat tabel baru memasukkan jumlah field diperlukan dalam suatu tabel baru memasukkan

3 71 jumlah field diperlukan dalam suatu tabel. Seperti terlihat pada gambar dibawah. Gambar 4.2 Pembuatan Tabel tbl_muzaki Membuat Tabel tbl_mustahik Pembuatan tbl_mustahik di dalam MYSQL. Diawali memasukkan tbl_mustahik ke dalam kolom Create table on db_simzis. setelah basis data tercipta, maka selanjutnya dapat dibuat tabel-tabel diperlukan dalam pembuatan aplikasi ini, cara membuat tabel baru memasukkan jumlah field diperlukan dalam suatu tabel baru memasukkan jumlah field diperlukan dalam suatu tabel. Seperti terlihat pada gambar dibawah. Gambar 4.3 Pembuatan Tabel tbl_mustahik

4 Membuat Tabel tbl_app_muzaki Pembuatan tbl_app_muzaki di dalam MYSQL. Diawali memasukkan tbl_app_muzaki ke dalam kolom Create table on db_simzis. setelah basis data tercipta, maka selanjutnya dapat dibuat tabel-tabel diperlukan dalam pembuatan aplikasi ini, cara membuat tabel baru memasukkan jumlah field diperlukan dalam suatu tabel baru memasukkan jumlah field diperlukan dalam suatu tabel. Seperti terlihat pada gambar dibawah. Gambar 4.4 Pembuatan Tabel tbl_app_muzaki Membuat Tabel tbl_peny_mustahik Pembuatan tbl_app_muzaki di dalam MYSQL. Diawali memasukkan tbl_peny_mustahik ke dalam kolom Create table on db_simzis. setelah basis data tercipta, maka selanjutnya dapat dibuat tabeltabel diperlukan dalam pembuatan aplikasi ini, cara membuat tabel baru memasukkan jumlah field diperlukan dalam suatu tabel baru memasukkan jumlah field diperlukan dalam suatu tabel. Seperti terlihat pada gambar dibawah.

5 73 Gambar 4.5 Pembuatan Tabel tbl_peny_mustahik Membuat Tabel users Pembuatan users di dalam MYSQL. Diawali memasukkan users ke dalam kolom Create table on db_simzis. setelah basis data tercipta, maka selanjutnya dapat dibuat tabel-tabel diperlukan dalam pembuatan aplikasi ini, cara membuat tabel baru memasukkan jumlah field diperlukan dalam suatu tabel baru memasukkan jumlah field diperlukan dalam suatu tabel. Seperti terlihat pada gambar dibawah. Gambar 4.6 Pembuatan Tabel users

6 Pengujian Sistem Pengujian program sistem informasi web ini dilakukan untuk memastikan bahwa program web dirancang ini dapat berfungsi dan berjalan baik. Apabila pengujian tidak dilakukan, maka tidak akan mengetahui pasti apakah program sudah dirancang tersebut sudah atau belum spesifikasi rancangan dari program dibuat. Kebenaran dari program web pada aplikasi dibuat adalah : 1. Kemampuan untuk menginput data dan muztahik. 2. Kemampuan untuk melihat informasi tentang daftar muzaki, daftar mustahik. 3. Kemampuan untuk mencetak laporan dalam bentuk PDF nantinya bisa di cetak oleh user. 4. Kemampuan untuk menghitung Zakat melalui kalkulator ZIS Metode Pengujian Pada Metode pengujian aplikasi web ini dilakukan menggunakan black box testing yaitu sebuah pengujian berfokus pada persyaratan fungsional perangkat lunak tanpa memperdulikan source code program. Pengujian ini untuk menentukan sejauh mana sistem dapat memenuhi keinginan user dalam menggunakan Sistem Informsi Pengelolaan ZIS di Masjid Jami Baitul Hikmah setelah tahapan perancangan diselesaikan dilanjutkan ke tahap selanjutnya yaitu tahap pengujian pada program aplikasi web, hal ini dilakukan cara menguji dan memastikan bahwa program aplikasi web telah dirancang dan dikembangkan ini sehingga dapat berfungsi baik dan rumus-rumus rancangan telah ditetapkan sebelumnya Prosedur Pengujian Pengujian dilakukan adalah pengujian black box (black box testing), black box testing terfokus pada apakah unit program memenuhi

7 75 kebutuhan disebutkan dalam spesifikasi. Pada black box testing cara pengujiannya hanya dilakukan menjalankan atau mengeksekusi unit atau modul, kemudian diamati apakah dari unit itu prosedur diinginkan Skenario dan Hasil Pengujian Pengujian dilakukan untuk menentukan langkah-langkah dalam melakukan pengujian. Pengujian dilakukan menjalankan Sistem Informasi Pengelolaan ZIS pada Masjid Jami Baitul Hikmah tersebut. Setelah aplikasi dijalankan selanjutnya melakukan serangkaian uji tombol atau berupa link terdapat dalam tampilan antar muka (interface) aplikasi tersebut apakah tahap perancangan diinginkan. Tabel 4.1 Skenario dan Hasil pengujian ada pada utama menggunakan metode black box testing No. Antar Unit Status Skenario Hasil Yang Hasil muka Program Aplikasi Pengujian (Uji Coba) 1. Tampilan Menguji link Masuk klik link Menampilk home home pada an interface home utama Home utama berisi informasi tentang masjid 2. Tampilan Menguji link Masuk Setelah Menampilk ke an valid login login login login isi atau user name tidaknya

8 76 dan username password dan password 3. Tampilan Menguji link Masuk klik link Menampilk mustahik an daftar Mustahik mustahik mustahik Mustahik 4. Tampilan Menguji link Masuk Mengisi Bisa Donasi form mencetak Donasi Donasi Donasi data telah diisi lengkap 5. Tampilan Menguji link Masuk klik link Menampilk an daftar 6. Tampilan Menguji link Masuk klik link Menampilk kalkulator an tampilan kalkulator kalkulator kalkulato kalkulator r berfungsi untuk menghitung harta ingin dikeluarkan

9 77 Tabel 4.2 Skenario dan Hasil pengujian ada pada aplikasi untuk admin menggunakan metode black box testing No. Antar Unit Status Skenario Hasil Yang Hasil muka Program Aplikasi Pengujian (Uji Coba) 1. Tampilan Proses login Tampila mengisi Apabila login n login username username sudah dan dan terbuka password password lalu klik benar maka login akan masuk untuk ke masuk, admin, jika klik reset tidak akan untuk me menampilka reset data, n notifikasi dan klik bahwa user batal name / untuk password kembali ke salah home 2. Tampilan Menguji Masuk Klik link Link menu index semua link index menu satu dipilih pada persatu dapat menu utama membuka dimaksud

10 78 3. Tampilan Melihat Menamp Melihat Menampilk Informasi informasi ilkan informasi an mengena mengenai i daftar / daftar / informas informasi i muzaki muzaki Klik link Menamp Input Seluruh Tambah ilkan seluruh data di form data input dapat tambah muzaki di simpan muzaki lengkap Klik link Edit Menamp Mengganti Bisa Belum pada kolom ilkan /update menampilka aksi data data n data ada telah di sebelum ganti/ di nya telah baru update di input Klik link Menghap Klik link Data Hapus pada us data Hapus terhapus kolom aksi pada kolom aksi 4. Tampilan Melihat Menamp Melihat Menampilk Informasi informasi ilkan informasi an Mustahik Mustahik mengena mustahik mengenai i daftar / daftar / informas informasi

11 79 i mustahik mustahik Klik link Menamp Input Seluruh Tambah ilkan seluruh data di mustahik form data input dapat tambah mustahik di simpan mustahik lengkap Klik link Edit Menamp Mengganti Bisa pada kolom ilkan /update menampilka aksi data data n data ada telah di sebelum ganti/ di nya telah baru update di input Klik link Menghap Klik link Data Hapus pada us data Hapus terhapus kolom aksi pada kolom aksi 5. Tampilan Melihat Menamp Melihat Menampilk Approval Approval ilkan informasi an muzaki mengena Approval mengenai i daftar / daftar / informas informasi i Approval Approval Klik link Menamp Input Seluruh

12 80 Tambah ilkan seluruh data di Approval form data input dapat tambah approval di simpan Approval muzaki lengkap Klik link Tidak Klik link Bisa Belum bisa Approval merespo Approval memindahk pada kolom n pada an data aksi kolom aksi ada di tbl_app_mu zaki ke tbl_muzaki Klik link Menghap Klik link Data Hapus pada us data Hapus terhapus kolom aksi pada kolom aksi 6. Tampilan Melihat Menamp Melihat Menampilk index informasi ilkan informasi an users users mengena users mengenai i daftar / daftar / informas informasi i users users Klik link Menamp Input Seluruh Tambah users ilkan seluruh data di form data users input dapat tambah di simpan users lengkap

13 81 Klik link Edit Menamp Mengganti Bisa pada kolom ilkan /update menampilka aksi data data n data ada telah di sebelum ganti/ di nya telah baru update di input Klik link Menghap Klik link Data Hapus pada us data Hapus terhapus kolom aksi pada kolom aksi

14 Analisa Hasil Pengujian Pada kesimpulan berikut adalah pengujian dilakukan dapat disimpulkan link dan proses berjalan baik dirancang pada perancangan dilakukan dan dapat berjalan baik menggunakan spesifikasi komputer digunakan. Dalam pengujian ini menggunakan aplikasi browser OPERA v 12. Berikut adalah : 1. Fungsi Kalkulator baik, dan semestinya diinginkan. 2. Guest dapat mendonasikan harta ingin dikeluarkan cara mengisi form donasi lengkap, dan ia juga bisa mencetak dokumen tersebut. 3. Menu Login berjalan baik 4. Admin memiliki hak akses penuh. 5. Menu logout berjalan baik. 6. Cetak dokumen berfungsi baik, kecuali pada bagian form donasi, karena terkendala pengkodean. Dari hasil pengujian dilakukan pada website tersebut dapat disimpulkan bahwa semua link dan tombol button pada program ada di website tersebut dapat dijalankan. Dan untuk menjalankan program atau hasil website tersebut, maka jalankan pada web browser seperti Opera v 12, ketikkan alamat

15 Tampilan Layar Halaman Utama Kode Penggalan Program Halaman Utama: index.html <li><a href="index.html"><span class="l"></span><span class="r"></span><span class="t">home</span></a></li> <li><li><a href="adm/login.php" class="active"><span class="l"></span><span class="r"></span><span class="t">login</span></a></li> <li><a href="mustahik.php"><span class="l"></span><span class="r"></span><span class="t">mustahik</span></a></li> <li><a href="donasi.php"><span class="l"></span><span class="r"></span><span class="t">donasi</span></a></li> <li><a href="muzaki.php"><span class="l"></span><span class="r"></span><span class="t"></span></a></li> <li><a href="kalkulator.htm" title="new" target="_blank"><span class="l"></span><span class="r"></span><span class="t">kalkulator </span></a></li> Gambar 4.7 Halaman utama

16 Halaman Login Kode Penggalan Program Halaman Login: login.php <table width="319"> <tr><td width="66">username</td><td width="241">: <input name="username" type="text" size="30" maxlength="50" /></td></tr> <tr><td>password</td><td>: <input name="password" type="password" size="30" maxlength="40" /></td></tr> <tr><td colspan="2"> <input type="submit" value="login" /> <input type="reset" value="reset"> <input type="button" value="batal" onclick= window.location.href=" </td></tr> </table> Gambar 4.8 Halaman Login

17 Halaman Donasi Kode Penggalan Program Halaman Login: Donasi.php <form method=post action="simpan.php"> <table frame="void" cellspacing="3" cellpadding="5"> <tr> <td valign="top"><p><strong> Nama Donatur : </strong><br /> <input type="text" name="nm_app_muzaki" size="25" maxlength="75" /></p><p><strong> Alamat Donatur : </strong><br /> <input type="text" name="alamat_app_muzaki" size="75" maxlength="100" /></p><p><strong> Donatur : </strong><br /> <input type="text" name=" _app_muzaki" size="25" maxlength="75" /></p><p><strong> Jenis kelamin Donatur: </strong><br /> <input type="radio" name="jk_app_muzaki" size="25" maxlength="75" value='l'/> Laki</p> <input type="radio" name="jk_app_muzaki" size="25" maxlength="75" value='p'/> Perempuan</p> <p><strong> Tanggal Donatur transfer : </strong><br /> <input type="date" name="tgl_app_muzaki" size="11" /></date> </p> Gambar 4.9 Halaman Form Donasi

18 Halaman Mustahik Kode Penggalan Program Halaman Mustahik: mustahik.php <?php include "include/koneksi.php"; $select = "select * from tbl_mustahik order by id_mustahik desc"; $select_query = MYSQL_query($select);?> <table style="font-size:11px;font-family:'arial';text-align:center;" border='1' width="80%" align='center' > <p></p><br><tr><th>nama Mustahik </th> <th> Alamat Mustahik</th><th>Notelp Mustahik</th><th>Jenis Kelamin</th> <th>tgl terima mustahik</th><th>keterangan</th><th>nominal Mustahik</th></tr> Gambar 4.10 Halaman Mustahik

19 Halaman Kode Penggalan Program Halaman : muzaki.php <?php include "include/koneksi.php"; $select = "select * from tbl_muzaki order by id_muzaki desc"; $select_query = MYSQL_query($select);?> <table style="font-size:11px;font-family:'arial';text-align:center;" border='1' width="80%" align='center' > <p></p><br> <tr><th>nama Donatur</th><th>Alamat Donatur</th><th>Jenis Donatur</th> <th>nominal Donasi</th></tr> Gambar 4.11 Halaman

20 Halaman kalkulator Kode Penggalan Program Halaman Kalkulator: kalkulator.html <title>kalkulator Zakat ZIS</title> <link href="kalkulator/kalkulat.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="kalkulator/jquery-1.js"></script> <script type="text/javascript"> function calc_zakat() { var harta = 0; $(".harta").each(function(i){ val = parseint( $(this).val() ); if(isnan(val)) val = 0; }); harta += val; Gambar 4.12 Halaman Kalkulator

21 Halaman Admin (content.php) Kode Penggalan Program Halaman Admin (content.php) if ($_GET['module']=='home' empty($_get['module'])){ echo "<h1>selamat Datang</h1> <p><h1>hai <b>$_session[namauser]</b>,<br> level anda sebagai $_SESSION[leveluser] </b>, <br> </h1> Silahkan klik menu pilihan berada di sebelah kiri untuk mengelola website SISTEM PENGELOLAAN ZIS PADA MASJID JAMI BAITUL HIKMAH </p><p> </p><p> </p><p> </p><p> </p> <p align=right>login : $hari_ini"; echo tgl_indo(date("y m d")); echo " "; echo date("h:i:s"); echo " WIB</p>"; Gambar 4.13 Halaman admin

22 Halaman Informasi (index.php?module=muzaki) Kode Penggalan Program Informasi (index.php?module=muzaki) <?php session_start(); if (empty($_session['username']) AND empty($_session['pass'])){ header("location:login.php"); }else{ $aksi="modul/mod_muzaki/aksi_muzaki.php"; switch($_get[act]){ // Tampil default: echo "<h2></h2> <input type=button value='tambah ' onclick=location.href='?module=muzaki&act=tambahmuzaki'> <table> <tr><th>no</th><th>nama</th><th>alamat</th><th> </th><th>jeni s Kelamin</th><th>Tanggal donasi</th><th>no telp / hp</th><th>jenis Donasi</th><th>Nominal Donatur</th><th>Aksi</th></tr>"; $p = new Paging; $batas = 10; $posisi = $p->cariposisi($batas); Gambar 4.14 Halaman informasi muzaki

23 Halaman Tambah (index.php?module=muzaki&act= tambahmuzaki) Kode Penggalan Program Tambah (index.php?module=muzaki&act= tambahmuzaki) case "tambahmuzaki": echo "<h2>tambah </h2> <form method=post action='$aksi?module=muzaki&act=input'> <table> <tr><td>nama </td> <td> <input type=text name='nm_muzaki' size=5></text></td></tr> <tr><td> Alamat </td> <td> <textarea name='alamat_muzaki' style='width: 400px; height: 100px;'></textarea></td> </tr> <tr><td> </td> <td> <input type=text name=' _muzaki' size=15></text></td></tr> <tr><td> Jenis Kelamin </td> <td> <input type=radio name='jk_muzaki' value='l' checked> Laki <input type=radio name='jk_muzaki' value='p'> Perempuan </td></tr> <tr><td> Gambar 4.15 Halaman Tambah muzaki

24 Halaman (index.php?module=muzaki&act= editmuzaki&id_muzaki=70) Kode Penggalan Program Edit (index.php?module=muzaki&act= editmuzaki&id_muzaki=70) case "editmuzaki": $edit = MYSQL_query("SELECT * FROM tbl_muzaki WHERE id_muzaki='$_get[id_muzaki]'"); $r = MYSQL_fetch_array($edit); echo "<h2>edit </h2> <form method=post action=$aksi?module=muzaki&act=update> <table> <tr><td>nama </td> <td> : <input type=text name='nm_muzaki' size=20 value='$r[nm_muzaki]'></td></tr> <tr><td>alamat </td> <td> : <input type=text name='alamat_muzaki' size=30 value='$r[alamat_muzaki]'></td></tr> <tr><td> </td> <td>: <input type=text name=' _muzaki' size=15 value='$r[ _muzaki]'></td></tr> <tr><td>jenis Kelamin </td> <td>: <input type=radio name='jk_muzaki' value='l' checked> Laki <input type=radio name='jk_muzaki' value='p'> Perempuan Gambar 4.16 Halaman Edit muzaki

25 Halaman Laporan (report_muzaki.php) Kode Penggalan Program Laporan (report_muzaki.php) $judul = "LAPORAN DATA MUZAKI"; $judul1 = "MASJID JAMI BAITUL HIKMAH"; $header = array( array("label"=>"id ", "length"=>30, "align"=>"c"), ); array("label"=>"nama ", "length"=>30, "align"=>"c"), array("label"=>"alamat ", "length"=>50, "align"=>"c"), array("label"=>" ", "length"=>30, "align"=>"c"), array("label"=>"jenis Kelamin ", "length"=>30, "align"=>"c"), array("label"=>"tanggal Donasi", "length"=>30, "align"=>"c"), array("label"=>"notelp ", "length"=>30, "align"=>"c"), array("label"=>"jenis Donasi", "length"=>30, "align"=>"c"), array("label"=>"nominal ", "length"=>30, "align"=>"c"), Gambar 4.17 Halaman Laporan

26 Halaman Laporan Mustahik (report_mustahik.php) Kode Penggalan Program Laporan Mustahik (report_mustahik.php) $judul = "LAPORAN DATA MUSTAHIK"; $judul1 = "MASJID JAMI BAITUL HIKMAH"; $header = array( array("label"=>"id Mustahik", "length"=>20, "align"=>"l"), array("label"=>"nama Mustahik", "length"=>40, "align"=>"l"), array("label"=>"alamat Mustahik", "length"=>50, "align"=>"l"), array("label"=>"notelp Mustahik", "length"=>30, "align"=>"l"), array("label"=>"jenis Kelamin Mustahik", "length"=>30, "align"=>"l"), array("label"=>"tanggal terima Mustahik", "length"=>30, "align"=>"l"), array("label"=>"keterangan Mustahik", "length"=>20, "align"=>"l"), array("label"=>"nominal Mustahik", "length"=>20, "align"=>"l"),); Gambar 4.18 Halaman Laporan Mustahik

27 Laporan di Halaman utama (portal) Mustahik (cetak_portal_mustahik.php) Kode Penggalan Program Laporan di Halaman utama (portal) Mustahik (cetak_portal_mustahik.php) #ambil data di tabel dan masukkan ke array $query = "SELECT nm_mustahik, alamat_mustahik, notelp_mustahik, jk_mustahik, tgl_terima_mustahik, ket_mustahik, nominal_mustahik from tbl_mustahik "; $sql = MYSQL_query ($query); $data = array(); while ($row = MYSQL_fetch_assoc($sql)) { } array_push($data, $row); Gambar 4.19 Halaman utama (portal) Mustahik

28 Laporan di Halaman utama (portal) (cetak_portal_muzaki.php) Kode Penggalan Program Laporan di Halaman utama (portal) (cetak_portal_muzaki.php) if ($conn) { $open = MYSQL_select_db($dbnm); if (!$open) { die ("Database tidak dapat dibuka karena ".MYSQL_error()); } } else { die ("Server MYSQL tidak terhubung karena ".MYSQL_error()); } $query = "SELECT nm_muzaki, alamat_muzaki, jns_muzaki, nominal_muzaki from tbl_muzaki"; $sql = MYSQL_query ($query); $data = array(); while ($row = MYSQL_fetch_assoc($sql)) { } array_push($data, $row); Gambar 4.20 Halaman utama (portal)