BAB IV HASIL DAN PEMBAHASAN

(1)

62

BAB IV

HASIL DAN PEMBAHASAN

4.1. Perancangan Sistem

Perancangan sistem atau desain sistem merupakan pengembangan sistem baru dari sistem lama yang ada, diharapkan sistem yang baru ini dapat lebih baik untuk mengatasi masalah yang ada pada sistem sebelumnya, dan juga dapat meningkatkan produktifitas dan efisien waktu.

Setelah memahami sistem yang berjalan pada perusahaan maka penulis dapat menggambarkan apa yang harus dikerjakan selanjutnya. Penulis menemukan beberapa kelemahan seperti belum adanya pengolaan data secara terkoputerisasi, maka penulis mengusulkan untuk membangun sistem yang baru agar permasalah pengolaan pencatatan tersebut dapat teratasi.

4.1.1. Tujuan perancangan sistem

Tujuan dari perancangan sistem ini yaitu untuk memperbaiki dan menjawab permasalahan sistem yang ada pada pelayan administrasi pendaftaran pernikahan di Kantor Urusan Agama Kecamatan Katapang yang lama. Tahapan ini adalah untuk memperbaiki gambaran pada sistem baru yang akan dibuat.

(2)

4.1.2. Gambaran umum sistem yang diusulkan

Analisis sistem yang sedang berjalan dilakukan dengan bertujuan untuk mengetahui proses produktivitas yang sedang dilakukan. Sistem informasi pengelolaan data administrasi pendaftaran pernikahan perlu dikembangkan mengingat sistem yang sedang berjalan masih banyak kekurangan yang mengakibatkan terhambatnya proses sistem yang sudah ada. Untuk mengantisipasi berbagai kendala yang sedang terjadi dalam melakukan aktifitas pelaksanaa dan pemeliharaan maka diperlukan suatu sistem

Informasi pelayan administrasi pendaftaran pernikahan di Kantor Urusan Agama Kecamatan Katapang yang terstruktur agar pelaksanaan dan pengelolaan data di Kantor Urusan Agama Katapang tersebut menjadi lebih baik agar sesuai dengan apa yang diharapkan.

4.1.3. Perancangan prosedur yang diusulkan

Perancangan prosedur ini adalah hasil dari evaluasi sistem yang sedang berjalan, sistem ini diharapkan mampu memperbaiki kekurangan yang sedang terjadi pada sistem tersebut, berikut adalah prosedur yang diusulkan :

1. Prosedur Pendaftaran Pernikahan

a. Calon pengantin membuka website KUA Kecamatan ketapang. b. Sistem akan menampilkan halaman utama website.

c. Calon pengantin memilih menu pendaftaran pernikahan.

d. Sistem menampilkan informasi alur pendaftaran pernikahan sampai selesai, syarat yang wajib dilengkapi dan tata cara pembayaran.

(3)

e. Calon pengantin klik button form pendaftaran pernikahan f. Sistem menampilkan form pendaftaran pernikahan.

g. Calon pengantin mengisi form pendaftaran dan upload syarat yang sudah ditentukan.

h. Sistem menyimpan data dan menampilkan .pdf dari form pendaftaran yang telah diisi sebelumnya.

i. Calon pengantin save file .pdf dan melakukan pembayaran di bank atau kantor pos sesuai alur yang sebelumnya ada di website.

2. Prosedur Pembayaran

a. Calon pengantin membuka website dan memilih menu pembayaran b. Sistem menampilkan form pembayaran.

c. Calon pengantin menginputkan no registrasi pendaftaran pernikahan dan klik button cari.

d. Sistem akan memeriksa no registrasi pendaftaran pernikahan. Jika no valid maka menampilkan form pembayaran. Jika tidak maka menampilkan alert no registrasi tidak terdaftar.

e. Calon pengantin selanjutnya mengisi form pembayaran dengan lengkap dan upload bukti pembayaran.

f. Sistem menyimpan data pembayaran.

g. Admin login ke halaman administrator dan memilih menu pembayaran h. Sistem akan menampilkan data pembayaran yang sudah masuk.

i. Selanjutnya admin memeriksa data pembayaran yang masuk. Jika sesuai maka pembayaran diterima dan data pendaftaran pernikahan dilanjutkan

(4)

ke penjadwalan suscatin. Jika data pembayaran tidak sesuai / tidak valid maka mengirim email kepada calon pengantin untuk mengupload ulang pembayaran.

3. Prosedur Penjadwalan Suscatin

a. Admin login ke halaman administrator dan memilih menu penjadwalan suscatin.

b. Sistem menampilkan data jadwal suscatin. c. Admin menekan tombol buat jadwal suscatin. d. Sistem menampilkan form jadwal suscatin.

e. Admin memilih no registrasi yang belum terdaftar jadwal suscatin dan memilih PAH (Penyuluh Agama Honorer) untuk mendapatnya penyuluhan pernikahan kepada calon pengantin.

f. Admin menekan tombol simpan

g. Sistem menyimpan data jadwal suscatin

h. Admin memilih data jadwal suscatin dan menekan tombol kirim informasi undangan suscatin ke calon pengantin

i. Sistem mengirim email jadwal suscatin ke calon pengantin.

j. Admin mencetak jadwal suscatin dan diberikan kepada PAH dan Kepala KUA

4. Prosedur Penugasan Penghulu

a. Admin login ke halaman administrator dan memilih menu penugasan penghulu.

(5)

c. Admin menekan tombol buat tambah penugasan penghulu. d. Sistem menampilkan form jadwal penugasan penghulu.

e. Admin memilih no registrasi yang belum ada penghulunya dan memilih penghulu yang memiliki tugas sedikit.

f. Admin menekan tombol simpan

g. Sistem menyimpan data jadwal penugasan penghulu. 4.1.3.1. Use case diagram

Berdasarkan perancangan prosedur yang diusulkan diatas maka selanjutnya akan dituangkan ke dalam use case sistem yang diusulkan dibawah

ini.

Gambar 4.1. Usecase Diagram

a. Definisi aktor dan deskripsinya

Adapun definisi aktor dan deskripsi pada Kantor Urusan Agama Kecamatan Katapang sebagai berikut :

(6)

Tabel 4.1. Definisi Aktor dan Deskripsi

No Aktor Deskripsi

1 Calon Pengantin Orang yang akan menikah.

2 Admin Pegawai yang mengurus persyratan menikah, menerima serta memproses bukti pembayaran menikah dan mengatur penjadwalan suscatin.

3 PAH Menerima laporan jadwal undangan suscatin. 4 Penghulu Pegawai yang menikahkan calon pengantin.

5 Kepala KUA Menunjuk penghulu untuk menikahkan calon pengnantin dan menerima laporan pernikahan.

a. Definisi use case dan deskripsinya

Adapun definisi use case dan deskripsi pada Kantor Urusan Agama Kecamatan Katapang sebagai berikut :

Tabel 4.2. Definisi use case dan deskripsi

No Use Case Deskripsi

1 Daftar Akun Calon pengantin daftar akun terlebih dahulu agar dapat mendaftarkan pernikahannya

2 Login Calon pengantin login untuk menampilkan menu pendaftaran pernikahan

(7)

3 Pendaftaran Pernikahan Calon pengantin mendaftaran pernikahannya di KUA

4 Pembayaran Proses dimana calon pengantin membayaran biaya pernikahan administrasi pernikahan. 5 Penjadwalan Suscatin Proses dimana calon pengantin mengikuti

pembinaan pernikahan.

6 Penugasan Penghulu Proses dimana penghulu ditunjuk langsung oleh kepala KUA untuk menikahkan calon pengantin.

b. Skenario use case

Adapun tahapan Skenario use case yang diusulkan pada sistem informasi Kantor Urusan Agama Kecamatan Katapang sebagai berikut :

a. Nama use case : Daftar Akun KUA Aktor : Calon Pengantin

Tujuan : Daftar akun sebelum dapat mendaftarkan pernikahan

Kondisi awal : membuka website KUA Katapang

Tabel 4.3. skenario use case Daftar Akun KUA

(8)

Skenario Utama : 1. memilih menu login

2. menampilkan form login 3. klik link belum punya akun

4. menampilkan form daftar akun KUA

5. mengisi form daftar akun KUA

Kondisi akhir : Data akun KUA Calon Pengantin Tersimpan

a. Nama use case : Login

Aktor : Calon Pengantin Tujuan : Login calon pengantin

Tabel 4.4. skenario use case Login

Calon Pengantin Sistem

Skenario Utama : 1. memilih menu login

2. menampilkan form login 3. mengisi form login

(9)

4. memeriksa data login

5. jika salah maka akan menampilkan alert login gagal jika benar maka akan menampilkan alert login berhasil

Kondisi akhir : menampilkan menu Akun KUA

b. Nama use case : Pendaftaran Pernikahan

Aktor : Calon Pengantin, admin, kepala KUA Tujuan : Daftar menikah dan melengkapi persyaratan Kondisi awal : membuka website KUA Katapang

Tabel 4.5. skenario use case pendaftaran pernikahan

Calon Pengantin Sistem Admin

Skenario Utama :

1. membuka website KUA Kecamatan ketapang

2. menampilkan halaman utama website 3. memilih menu form

pendaftaran pernikahan

(10)

form pendaftaran 5. klik button form

6. menampilkan form pendaftaran pernikahan 7. mengisi form pendaftaran

dan upload syarat 8. klik tombol daftar

9. menyimpan data dan cetak surat pendaftaran pernikahan.pdf

10 save / print surat pendaftaran pernikahan.pdf

11. memilih menu data pendaftaran pernikahan 12. menampilkan data

13. memilih data pendaftaran pernikahan

(11)

14. menampilkan data pendaftaran pernikahan

15. verifikasi data pendaftaran dan syarat yang di upload

16. simpan verifikasi data dan kirim email hasil verifikasi. 17. memilih menu laporan pendaftaran pernikahan 18. menampilkan form laporan 19. mengisi form laporan dan klik tombol cetak

20. memproses laporan pendaftaran pernikahan

Kondisi akhir : Kepala KUA menerima laporan pendaftaran pernikahan

(12)

Aktor : Calon Pengantin, Admin Tujuan : melakukan pembayaran

Tabel 4.6. skenario use case pembayaran

Calon Pengantin Sistem Admin

Skenario Utama :

1. membuka website KUA Kecamatan ketapang

2. menampilkan halaman utama website 3. memilih menu data

pembayaran

4. menampilkan cek form pembayaran 5. menginputkan no

registrasi pendaftaran pernikahan dan klik button cari

(13)

pembayaran. 7. mengisi form pembayaran

dan upload bukti pembayaran

8. klik tombol simpan

9. simpan data pembayaran 10. memilih menu pembayaran 12. menampilkan data pembayaran 13. validasi data pembayaran 14. mengirim informasi pembayaran

Kondisi akhir : calon pengantin menerima informasi pembayaran

d. Nama use case : Penjadwalan Suscatin

Aktor : Calon Pengantin, Admin, PAH, Kepala KUA Tujuan : membuat jadwal suscatin untuk calon pengantin

(14)

Kondisi awal : membuka halaman administrator

Tabel 4.7. skenario use case penjadwalan suscatin

Admin Sistem Calon Pengantin PAH

Skenario Utama : 1. memilih menu penjadwalan suscatin 2. menampilkan data jadwal suscatin 3. menekan tombol buat jadwal suscatin

4. menampilkan form jadwal suscatin

5. memilih no registrasi yang belum terdaftar jadwal suscatin dan memilih PAH dan klik tombol simpan

(15)

6. menyimpan data jadwal suscatin

7. memilih data jadwal suscatin dan menekan tombol kirim email informasi undangan suscatin ke calon pengantin 8. mengirim email jadwal suscatin ke calon pengantin 9. menerima email informasi jadwal suscatin 10. memilih menu

data jadwal suscatin

12. menampilkan data jadwal suscatin

(16)

13. Cetak jadwal suscatin 14. mencetak jadwal suscatin 15 menerima jadwal suscatin

Kondisi akhir : Kepala KUA menerima jadwal suscatin

e. Nama use case : Penugasan Penghulu

Aktor : Admin, Penghulu, Kepala KUA Tujuan : membuat jadwal penugasan penghulu Kondisi awal : membuka halaman administrator

Tabel 4.8. skenario use case penugasan penghulu

Admin Sistem Penghulu

Skenario Utama : 1. memilih menu penugasan penghulu 2. menampilkan data jadwal penugasan penghulu

(17)

3. menekan tombol buat tambah penugasan penghulu 4. menampilkan form jadwal penugasan penghulu 5. memilih no registrasi yang belum dipilih dan memilih penghulu dan klik tombol simpan

6. menyimpan data jadwal penugasan penghulu

7. memilih menu data jadwal penugasan penghulu

8. menampilkan data jadwal penugasan penghulu

9. Cetak jadwal penugasan penghulu

(18)

10. mencetak jadwal penugasan penghulu

11 menerima jadwal penghulu

Kondisi akhir : Kepala KUA menerima jadwal penghulu

4.1.3.2. Activity diagram

Adapun activity Diagram yang diusulkan pada sistem informasi Kantor Urusan Agama Kecamatan Katapang sebagai berikut :

(19)

Aktivity Diagram Pendaftaran Pernikahan

Calon Pengantin Sistem

Ph

as

e

memilih menu login menampilkan form

login

klik link belum punya akun

menampilkan form daftar akun KUA

mengisi form daftar akun KUA

simpan data daftar Akun KUA

(20)

Aktivity Diagram Login

Calon Pengantin

Sistem

P

h

a

se

memilih menu login

menampilkan form

login

mengisi form login

memeriksa data login

Data login benar ?

tidak

menampilkan menu

Akun KUA

Ya

(21)

Aktivity Diagram Pendaftaran Pernikahan

Calon Pengantin Sistem Admin Kepala KUA

Ph

as

e

membuka website KUA Kecamatan ketapang

menampilkan halaman utama website

memilih menu form pendaftaran pernikahan

menampilkan pilihan jenis pendaftaran

pernikahan

klik button form pendaftaran pernikahan

menampilkan form pendaftaran pernikahan mengisi form

pendaftaran dan upload syarat

klik tombol daftar simpan data pendaftaran pernikahan

menampilkan surat pendaftaran pernikahan.pdf save / print surat

pendaftaran pernikahan.pdf

memilih menu laporan pendaftaran pernikahan

menampilkan form laporan mengisi form laporan dan klik tombol cetak

memproses laporan pendaftaran pernikahan memberikan laporan pendaftaran pernikahan menerima laporan pendaftaran pernikahan memilih menu data

pendaftaran pernikahan menampilkan data

memilih data pendaftaran pernikahan menampilkan form

verifikasi pendaftaran pernikahan

menverifikasi data dan syarat pendaftaran pernikahan sesuai ? mengirim email data lengkap mengirim email data / syarat kurang lengkap ya ti dak mengirim email informasi pendaftaran menerima email informasi pendaftaran

(22)

Aktivity Diagram Pembayaran

Calon Pengantin Sistem Admin

P

h

as

e

membuka website KUA Kecamatan ketapang

menampilkan halaman utama website

memilih menu data pembayaran

menampilkan form cek pembayaran menginputkan no registrasi pendaftaran pernikahan menampilkan form pembayaran klik button cari

mengisi form pembayaran dan upload

bukti pembayaran simpan data pembayaran memilih menu pembayaran menampilkan data pembayaran

validasi data pembayaran

mengirim email informasi pembayaran menerima email informasi

pembayaran Benar ? kirim email pembayaran diterima kirim email pembayaran ditolak Ya Tidak

(23)

Aktivity Diagram Penjadwalan Suscatin

Admin Sistem Calon Pengantin PAH Kepala KUA

P h a se memilih menu penjadwalan suscatin menampilkan data jadwal suscatin

menekan tombol buat jadwal suscatin

menampilkan form jadwal suscatin

memilih no registrasi dan memilih PAH

klik tombol simpan simpan data jadwal

suscatin

memilih data jadwal suscatin

menekan tombol kirim informasi undangan

suscatin

mengirim info jadwal suscatin ke calon

pengantin

menerima informasi jadwal suscatin

memilih menu data jadwal suscatin

menampilkan data jadwal suscatin

Cetak jadwal suscatin mencetak jadwal

suscatin jadwal suscatin menerima jadwal suscatin menerima jadwal suscatin

(24)

Aktivity Diagram Penugasan Penghulu

Admin Sistem Penghulu Kepala KUA

P h as e memilih menu penugasan penghulu menampilkan data jadwal penugasan penghulu

menekan tombol buat tambah penugasan penghulu menampilkan form jadwal penugasan penghulu memilih no registrasi yang belum dipilih dan

memilih penghulu

klik tombol simpan menyimpan data jadwal penugasan penghulu

memilih menu data jadwal penugasan

penghulu

menampilkan data jadwal penugasan

penghulu

Cetak jadwal penugasan penghulu mencetak jadwal penugasan penghulu jadwal penugasan penghulu menerima jadwal penugasan penghulu menerima jadwal penugasan penghulu

Gambar 4.7. Aktivity Diagram Penugasan Penghulu

(25)

Adapun Sequence Diagram yang diusulkan pada sistem informasi Kantor Urusan Agama Kecamatan Katapang sebagai berikut :

Calon Pengantin Form Daftar Database

memilih menu l ogin

mena mpilk an form log in

klik link da fta r mena mpilk an form

daftar akun KUA meng isi form da fta r

akun KUA

simpan da ta akun KUA

info da ftar berha sil

Gambar 4.8. Sequence Diagram Daftar Akun KUA

Calon Pengantin Form Login Database

memilih menu login

menampilk an form login

mengisi form login

memeriksa data login

info login berhasil

login gagal

(26)

Calon Pengantin Form Pendaftaran Database

memilih menu pendaftaran pernikahan

get data info daftar

set data info daftar menampilkan info alur

pendaftaran pernikahan klik button form pendaftaran pernikahan

menampilkan form pendaftaran mengisi form pendaftaran

simpan data pendaftaran pernikahan

memilih menu pendaftaran pernikahan

memilih data pendaftaran pernikahan kirim email informasi pendaftaran Admin Data Pendaftaran

menampilkan data pendaftaran

menampilkan form verifikasi data pendaftaran

verifikasi data menampilkan surat pendaftaran pernikahan.pdf

print surat pendaftaran pernikahan.pdf

simpan data verifikasi

menerima email informasi pendaftaran

memilih menu laporan

menampilkan form laporan

mengisi form laporan

proses laporan

(27)

Gambar 4.10. Sequence Diagram Pendaftaran Pernikahan

Calon Pengantin Form Pembayaran Database

memilih menu pembayaran

get data pembayaran

set data pembayaran

menampilkan form cek pembayaran

input no registrasi

cek no registrasi

menampilkan form pembayaran

mengisi form pembayaran

simpan data pembayaran

memilih menu pembayaran

verifikasi data pembayaran

menerima email informasi pembayaran

Admin Form Verifikasi menampilkan data pembayaran simpan verifikasi data pembayaran

kirim email info pembayaran

(28)

Admin Form Suscatin Database PAH Kepala KUA memilih menu

penjadwalan suscatin

get data jadwal suscatin

set data jadwal suscatin

menampilkan data jadwal suscatin tekan tombol tambah

jadwal suscatin

menampilkan form jadwal suscatin

mengisi form jadwal suscatin

simpan jadwal suscatin

memilih data jadwal suscatin dan tekan tombol kirim email

mengirim email jadwal suscatin

menerima email jadwal suscatin memilih menu data

jadwal suscatin

menampilkan data jadwal suscatin

mencetak jadwal suscatin

jadwal suscatin

Calon Pengantin

cetak jadwal suscatin

(29)

Admin Form Penugasan Database Penghulu Kepala KUA memilih menu

penugasan penghulu

get data penugasan set data penugasan menampilkan data jadwal

penugasan penghulu tekan tombol tambah

penugasan penghulu menampilkan form jadwal

penugasan penghulu mengisi form jadwal penugasan penghulu

simpan jadwal penugasan penghulu memilih menu jadwal

penugasan penghulu

get data jadwal penugasan penghulu

set data jadwal penugasan penghulu menampilkan jadwal penugasan penghulu cetak jadwal penugasan penghulu mencetak jadwal penugasan penghulu jadwal penugasan penghulu

jadwal penugasan penghulu

Gambar 4.13. Sequence Diagram Penugasan Penghulu

(30)

Adapun Class Diagram yang diusulkan pada sistem informasi Kantor Urusan Agama Kecamatan Katapang sebagai berikut :

pegawai no_pegawai : varchar nama : varchar no_telepon : varchar jabatan : varchar username : varchar password : varchar hak_akses : varchar tambah() simpan() edit() hapus() pembayaran no_billing : varchar no_daftar : varchar tanggal_bayar : date bank_bayar : varchar total : int bukti : text status_bayar : varchar simpan() upload() validasi() lihat() suscatin no_suscatin : varchar no_daftar : varchar tanggal_suscatin : date jam_suscatin : varchar no_pegawai : varchar simpan() lihat() kirim() cetak() tugas_penghulu no_tugas : varchar no_daftar : varchar no_pegawai : varchar hari_tugas : varchar tanggal_tugas : date jam_tugas : varchar tempat_tugas : text simpan() lihat() kirim() cetak() pendaftaran no_daftar : varchar tanggal_daftar : date nama : varchar nik : varchar jk : varchar tempat_lahir : varchar tanggal_lahir : date kewarganegaraan : varchar agama : varchar pekerjaan : varchar alamat : text status_perkawinan : varchar nama_suamiistri : varchar nama_pria : varchar bin : varchar nik_pria : varchar tempat_lahirpria : varchar tanggal_lahirpria : date kewarganegaraan_pria : varchar agama_pria : varchar pekerjaan_pria : varchar alamat_pria : text nama_wanita : varchar binti : varchar nik_wanita : varchar tempat_lahirwanita : varchar tanggal_lahirwanita : date kewarganegaraan_wanita : varchar agama_wanita : varchar pekerjaan_wanita : varchar alamat_wanita : text status_daftar : varchar hari : varchar tanggal : date jam : varchar tempat : text catatan : text syarat 1 : text syarat 2 : text syarat 3 : text syarat 4 : text syarat 5 : text syarat 6 : text syarat 7 : text syarat 8 : text syarat 9 : text syarat 10 : text simpan() edit() validasi() kirim() cetak() akun nik : varchar nama : varchar jk : varchar email : varchar username : varchar password : varchar nik_pasangan : varchar nama_pasangan : varchar umur_pasangan : varchar alamat_pasangan : varchar agama_pasangan : varchar simpan() login()

(31)

4.2. Perancangan Antar Muka

Desain Antarmuka Pengguna atau rekayasa antarmuka pengguna adalah desain untuk situs web yang berfokus pada pengalaman pengguna dan interaksi. 4.2.1. Struktur menu

Struktur menu program dibagi menjadi 2 bagian, yaitu administrator dan menu halaman utama website. Dibawah ini struktur menu aplikasi yang diusulkan.

LOGIN

HALAMAN UTAMA ADMINISTRATOR

HOME DATA MASTER MENU PENDAFTARAN MENU PEMBAYARAN MENU JADWAL SUSCATIN MENU PENUGASAN

PENGHULU MENU LAPORAN

DATA PEGAWAI SETTING BIAYA LAPORAN PENDAFTARAN LAPORAN JADWAL SUSCATIN LAPORAN PENUGASAN PENGHULU MENU PRA NIKAH

Gambar 4.15. Struktur Menu Administrator

HALAMAN UTAMA WEBSITE

HOME TENTANG ATURAN

PENDAFTARAN ALUR KERJA KONTAK LOGIN

TENTANG KAMI STRUKTUR ORGANISASI DAFTAR MENU AKUN DATA PENGANTIN FORM DAFTAR PERNIKAHAN DATA PENDAFTARAN DATA PEMBAYARAN JADWAL SUSCATIN PENUGASAN PENGHULU

(32)

4.2.2. Perancangan input

Dibawah ini gambar – gambar perancangan input dari sistem KUA Katapang yang diusulkan :

1. Perancangan Form Login Administrator

Gambar 4.17. Perancangan Form Login Administrator

2. Perancangan Form Data Pegawai

Gambar 4.18. Perancangan Form Data Pegawai

(33)

Gambar 4.19. Perancangan Form Setting Biaya Pendaftaran

4. Perancangan Form Edit Profile

Gambar 4.20. Perancangan Form Edit Profile

(34)

Gambar 4.21. Perancangan Form Verifikasi Data Pendaftaran Pernikahan

6. Perancangan Form Jadwal Suscatin

Gambar 4.22. Perancangan Form Jadwal Suscatin

(35)

Gambar 4.23. Perancangan Form Penugasan Penghulu

8. Perancangan Form Laporan

Gambar 4.24. Perancangan Form Laporan

(36)

Gambar 4.25. Perancangan Form Pendaftaran Akun KUA

10. Perancangan Form Login Akun KUA

Gambar 4.26. Perancangan Form Login Akun KUA

(37)

Gambar 4.27. Perancangan Form Pendaftaran Pernikahan

12. Perancangan Form Pembayaran

(38)

4.2.3. Perancangan output

Dibawah ini gambar – gambar perancangan output dari sistem KUA Katapang yang diusulkan :

1. Perancangan Output Bukti Pembayaran

Gambar 4.28. Perancangan Output Bukti Pembayaran

(39)

Gambar 4.29. Perancangan Output Undangan Suscatin

3. Perancangan Output Laporan Pendaftaran Pernikahan

Gambar 4.30. Perancangan Output Laporan Pendaftaran Pernikahan

(40)

Gambar 4.31. Perancangan Output Laporan Suscatin

5. Perancangan Output Laporan Penugasan Penghulu

Gambar 4.32. Perancangan Output Laporan Penugasan Penghulu

4.3. Perancangan Arsitektur Jaringan

(41)

berbasis website ini memakai jaringan internet, karena dapat mencakup jaringan yang sangat luas dan memudahkan dalam memperoleh informasi. Berikut adalah perancangan arsitektur jaringan yang digunakan dalam sistem informasi KUA Katapang berbasis website.

Jaringan internet Administrasi Calon Pengantin Calon Pengantin Calon Pengantin modem

server Kepala KUA

Gambar 4.33. Perancangan arsitektur jaringan

4.4. Pengujian

Pengujian adalah bagian yang penting dalam siklus pembangunan perangkat lunak. Pengujian dilakukan untuk menjamin kualitas dan juga mengetahui kelemahan dari perangkat lunak. Tujuan dari pengujian ini adalah untuk menjamin bahwa perangkat lunak yang dibangun memiliki kualitas yang handal yaitu mampu mempresentasikan kajian pokok dari spesifikasi, analisis, perancangan dan pengkodean dari perangkat lunak itu sendiri.

4.4.1. Rencana pengujian

Rencana pengujian pada sistem informasi les privat ini akan menggunakan metode pengujian black-box yang memiliki fokus kepada persyaratan fungsional (proses – proses yang terdapat didalamnya) sistem untuk mengetahui apakah sistem sudah berfungsi dengan benar ataukah masih memiliki banyak error dan

(42)

bug. Penulis menguji beberapa proses yang ada dalam sistem untuk membuktikan

bahwa proses yang diuji sudah berjalan dengan baik atau tidak. Berikut ini merupakan rencana pengujian yang akan dilakukan pada sistem informasi les privat pada harapan mandiri cipaku.

Tabel 4.9. Tabel Rencana Pengujian Black Box

Kelas Uji Butir Uji

Pengujian Akun KUA Percobaan registrasi akun calon penganti Pengujian Login Pengguna

yang Merupakan Calon Pengantin dan pegawai KUA

Percobaan masuk / login dengan menggunakan akun calon pengantin, dan pegawai KUA.

Pengujian Input Data

Kelola data pegawai

Kelola data biaya daftar pernikahan

Kelola data Registrasi Akun KUA Olah data Pendaftaran Pernikahan Olah data Pembayaran

Olah data Pembuatan Jadwal Suscatin Olah data Penugasan Penghulu

Pengujian Data Output

Olah laporan pendaftaran pernikahan

(43)

Olah laporan penugasan penghulu

4.4.2. Kasus dan hasil pengujian

Berikut ini merupakan kasus dan hasil pengujian sistem dengan menggunakan metode black-box dan berdasarkan kepada rencana pengujian.

1. Pengujian Data Daftar Akun KUA

Tabel 4.10. Tabel Pengujian Data Daftar Akun KUA

Kasus dan Hasil Uji (Data Normal) Data Masukan Yang

Diharapkan

Pengamatan Kesimpulan Nilai

Mengisi semua form inputan untuk akun KUA

Menampilkan pesan “daftar berhasil” Menampilkan pesan “daftar berhasil” []Diterima [ ]Ditolak 1

Kasus dan Hasil Uji (Data Salah) Data Masukan Yang

Diharapkan

Mengosongkan salah satu field yang ada pada menu daftar akun

Muncul pesan “isi field ini”

[]Diterima

[ ]Ditolak

(44)

KUA

TOTAL NILAI 2

2. Pengujian Login

Tabel 4.11. Tabel Pengujian Login

Kasus dan Hasil Uji (Data Normal) Data Masukan Yang

Diharapkan

Akses admin Username :admin Password : admin Login di halaman admin sukses tampil menu yang dikelola. Login di halaman admin sukses tampil menu yang dikelola. []Diterima [ ]Ditolak 1 Akses Calon Pengantin Username: tatang Password : tatang Login Calon Pengantin sukses Login Calon Pengantin sukses []Diterima [ ]Ditolak 1

(45)

KUA Username: kepala

Password : kepala

KUA sukses KUA sukses

[ ]Ditolak

Kasus dan Hasil Uji (Data Salah) Data Masukan Yang

Diharapkan

Akses halaman admin Username: aa Password: bb Login gagal kesalahan pada username dan password Login gagal kesalahan pada username dan password []Diterima [ ]Ditolak 1 TOTAL NILAI 4

3. Pengujian Input Data

Tabel 4.12. Tabel Pengujian Input Data

Kasus dan Hasil Uji (Data Normal)

Data Masukan Yang

Diharapkan

(46)

Mengisi semua filed Input data pegawai KUA Muncul pesan data berhasil disimpan dan data pegawai KUA bertambah di database Muncul pesan data berhasil disimpan dan data pegawai KUA bertambah di database []Diterima [ ]Ditolak 1 Mengisi semua filed Input data biaya pendaftaran Muncul pesan data berhasil disimpan dan data biaya pendaftaran berubah di database Muncul pesan data berhasil disimpan dan data biaya pendaftaran berubah di database []Diterima [ ]Ditolak 1 Mengenakan tombol hapus pada menu data pegawai Muncul pesan data terhapus dan data pegawai berubah. Muncul pesan data terhapus dan data pegawai berubah. []Diterima [ ]Ditolak 1 Mengedit data pegawai Muncul pesan data pegawai berhasil diedit dan data Muncul pesan data pegawai berhasil diedit dan data pegawai

[]Diterima

[ ]Ditolak 1

(47)

pegawai berubah berubah Kasus dan Hasil Uji (Data Salah)

Data Masukan Yang

Diharapkan

Pengamatan Kesimpulan Nilai

Mengosongkan salah satu field pada form data pegawai

Muncul pesan

error “isi semua field yang ada”

Muncul pesan

[]Diterima

[ ]Ditolak 1

Mengosongkan salah satu field pada form data biaya daftar

Muncul pesan

[]Diterima

[ ]Ditolak 1

TOTAL NILAI 6

4. Pengujian Data Output

Tabel 4.13. Tabel Pengujian Data Output

Kasus dan Hasil Uji (Data Normal) Data

Masukan

Yang

Diharapkan

(48)

Pendaftaran Pernikahan laporan Pendaftaran Pernikahan laporan Pendaftaran Pernikahan [ ]Ditolak Cetak Laporan Jadwal Suscatin Menampilkan laporan Jadwal Suscatin Menampilkan laporan Jadwal Suscatin []Diterima [ ]Ditolak 1 Cetak Laporan Penugasan Penghulu Menampilkan laporan berdasarkan periode yang dipilih Menampilkan laporan berdasarkan periode yang dipilih []Diterima [ ]Ditolak 1

Kasus dan Hasil Uji (Data Salah) Data

Masukan

Yang

Diharapkan

Menginput periode yang belum terlewati Muncul pesan “laporan tidak ada data” Muncul pesan “laporan tidak ada data”

[]Diterima

[ ]Ditolak

1

(49)

4.4.3. Kesimpulan hasil pengujian

Setelah pengujian dengan berdasarkan perhitungan kumulasi nilai yang dilakukan dengan total nilai 17 point, penulis mengambil kesimpulan bahwa sistem yang dibangun sudah memiliki fungsionalitas yang benar.

4.5. Implementasi

Tahap implementasi adalah tahapan penerapan sistem untuk dapat di oprasikan. Pada tahapan ini di jelaskan mengenai sistem yang di rancang dan bagaimana cara penggunaannya. Dengan demikian dapat diketahui apakah website ini dapat menghasilkkan sistem informasi yang sesuai dengan tujuan yang dihararapkan.

4.5.1. Implementasi perangkat lunak

Perangkat lunak yang digunakan dalam pembuatan Sistem Informasi KUA Katapang antara lain:

1. Sistem Operasi : Microsoft Windows 7 Ultimate

2. Text Editor : Macromedia Dreamweaver 8

3. Web Browser : Google Chrome version 35

4. Server Database : MYSQL

5. Web Server : XAMPP version 1.7.4

4.5.2. Implementasi perangkat keras

Perangkat keras yang digunakan dalam pembuatan Sistem Informasi Kua Katapang lain:

(50)

a. Proccesor Pentium® dual core CPU T4200 2.00GHz. b. Memory 2GB atau Lebih.

c. Harddisk 500GB atau lebih. d. Modem

e. Mouse, keyboard,monitor, dan printer 2. Komputer Client

a. Proccesor Pentium 4 1,8GHz. b. Memory 1GB atau lebih c. Harddisk 250GB atau lebih d. Modem

e. Mouse, keyboard,monitor 4.5.3. Implementasi basis data

Implementasi basis data pada Sistem Informasi KUA Katapang dilakukan dengan menggunakan MySQL. Implementasinya sebagai berikut :

CREATE TABLE IF NOT EXISTS `akun` ( `nik` varchar(25) NOT NULL,

`nama` varchar(100) NOT NULL, `jk` varchar(5) NOT NULL, `email` varchar(100) NOT NULL, `username` varchar(100) NOT NULL, `password` varchar(100) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1;

(51)

`no_pegawai` varchar(20) NOT NULL, `nama` varchar(100) NOT NULL, `no_telepon` varchar(13) NOT NULL, `jabatan` varchar(30) NOT NULL, `username` varchar(50) NOT NULL, `password` varchar(50) NOT NULL, `hak_akses` varchar(30) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1;

CREATE TABLE IF NOT EXISTS `pembayaran` ( `no_billing` varchar(25) NOT NULL, `no_daftar` varchar(25) NOT NULL, `tanggal_bayar` date NOT NULL, `bank_bayar` varchar(15) NOT NULL, `total` int(11) NOT NULL,

`bukti` text NOT NULL,

`status_bayar` varchar(25) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1;

CREATE TABLE IF NOT EXISTS `pendaftaran` ( `no_daftar` varchar(25) NOT NULL,

`tanggal_daftar` date NOT NULL, `nama` varchar(100) NOT NULL, `nik` varchar(20) NOT NULL, `jk` varchar(50) NOT NULL,

(52)

`tanggal_lahir` date NOT NULL,

`kewarganegaraan` varchar(25) NOT NULL, `agama` varchar(25) NOT NULL,

`pekerjaan` varchar(100) NOT NULL, `alamat` text NOT NULL,

`status_perkawinan` varchar(25) NOT NULL, `nama_suamiistri` varchar(100) NOT NULL, `nama_pria` varchar(100) NOT NULL,

`bin` varchar(100) NOT NULL, `nik_pria` varchar(20) NOT NULL,

`tempat_lahirpria` varchar(100) NOT NULL, `tanggal_lahirpria` date NOT NULL,

`kewarganegaraan_pria` varchar(25) NOT NULL, `agama_pria` varchar(25) NOT NULL,

`pekerjaan_pria` varchar(100) NOT NULL, `alamat_pria` text NOT NULL,

`nama_wanita` varchar(100) NOT NULL, `binti` varchar(100) NOT NULL,

`nik_wanita` varchar(20) NOT NULL,

`tempat_lahirwanita` varchar(100) NOT NULL, `tanggal_lahirwanita` date NOT NULL,

`kewarganegaraan_wanita` varchar(25) NOT NULL, `agama_wanita` varchar(25) NOT NULL,

`pekerjaan_wanita` varchar(100) NOT NULL, `alamat_wanita` text NOT NULL,

(53)

`hari` varchar(50) NOT NULL, `tanggal` date NOT NULL, `jam` varchar(15) NOT NULL, `tempat` text NOT NULL,

`email` varchar(100) NOT NULL, `catatan` text NOT NULL,

`syarat1` text NOT NULL, `syarat2` text NOT NULL, `syarat3` text NOT NULL, `syarat4` text NOT NULL, `syarat5` text NOT NULL, `syarat6` text NOT NULL, `syarat7` text NOT NULL, `syarat8` text NOT NULL, `syarat9` text NOT NULL, `syarat10` text NOT NULL, `syarat11` text NOT NULL, `syarat12` text NOT NULL, `syarat13` text NOT NULL, `syarat14` text NOT NULL, `syarat15` text NOT NULL, `syarat16` text NOT NULL, `syarat17` text NOT NULL, `syarat18` text NOT NULL, `syarat19` text NOT NULL, `syarat20` text NOT NULL,

(54)

`syarat21` text NOT NULL,

ùsername` varchar(100) NOT NULL, `password` varchar(100) NOT NULL, `nik_istri` varchar(25) NOT NULL, `nama_istri` varchar(50) NOT NULL, ùmur_istri` int(11) NOT NULL, àgama_istri` varchar(25) NOT NULL, àlamat_istri` text NOT NULL,

`istri_ke` int(11) NOT NULL, `syarat22` text NOT NULL, `syarat23` text NOT NULL, `syarat24` text NOT NULL, `syarat25` text NOT NULL, `syarat26` text NOT NULL, `syarat27` text NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

CREATE TABLE IF NOT EXISTS `pra_pendaftaran` ( `no_pranikah` int(11) NOT NULL AUTO_INCREMENT, `tanggal_pranikah` date NOT NULL,

`nik` varchar(25) NOT NULL, `nama` varchar(100) NOT NULL,

`jenis_cerai` varchar(25) NOT NULL, `tanggal_cerai` date NOT NULL,

`syarat_pranikah` varchar(100) NOT NULL, `status_pranikah` varchar(25) NOT NULL,

(55)

PRIMARY KEY (`no_pranikah`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; CREATE TABLE IF NOT EXISTS `suscatin` (

`no_suscatin` varchar(20) NOT NULL, `tanggal_suscatin` date NOT NULL, `jam_suscatin` varchar(15) NOT NULL, `no_daftar` varchar(25) NOT NULL, `no_pegawai` varchar(20) NOT NULL, `status` varchar(25) NOT NULL

CREATE TABLE IF NOT EXISTS `tugas_penghulu` ( `no_tugas` varchar(20) NOT NULL,

`no_daftar` varchar(25) NOT NULL, `no_pegawai` varchar(20) NOT NULL, `hari_tugas` varchar(25) NOT NULL, `tanggal_tugas` date NOT NULL, `jam_tugas` varchar(15) NOT NULL, `tempat_tugas` text NOT NULL, `status` varchar(25) NOT NULL

4.5.4. Implementasi antar muka

Implementasi antar muka merupakan suatu mekanisme komunikasi antara pengguna dengan sistem. Dimana antar muka ini dapat menerima informasi dari

(56)

pengguna dan memberikan informasi kepada pengguna untuk membantu mengarahkan alur penelusuran masalah sampai ditemukan suatu solusi yang diinginkan. Di bawah adalah table - tabel yang akan menggambarkan implementasi antar muka pada sistem informasi KUA Katapang.

1. Implementasi Halaman Utama

Tabel 4.14. Tabel Implementasi Halaman Utama

Sub Menu Deskripsi Nama File

Home

Halaman yang menampilkan homepage website

Index.php

Tentang

Halaman yang menampilkan data tentang KUA Katapang

tentang.php

Aturan Pendaftaran

Halaman yang menampilkan data aturan pendaftaran

aturan.php

Alur Kerja

Halaman yang menampilkan data alur kerja KUA

alur.php

Kontak

Halaman yang menampilkan data kontak KUA Katapang

kontak.php

Login

Halaman yang menampilkan form login

login.php

(57)

daftar akun KUA

Form Pendaftaran Pernikahan

Halaman yang menampilkan form pendaftaran pernikahan

formpernikahan.php

Data Pendaftaran Pernikahan

Halaman yang menampilkan data pendaftaran pernikahan

datapernikahan.php

Data Pembayaran

Halaman yang menampilkan data pembayaran dan form pembayaran

formbayar.php

Jadwal Suscatin

Halaman yang menampilkan data jadwal suscatin

jadwalsuscatin.php

Penugasan Penghulu

Halaman yang menampilkan data penugasan penghulu

penugasan.php

2. Implementasi Halaman Admin

Tabel 4.15. Tabel Implementasi Halaman Admin

Sub Menu Deskripsi Nama File

Home

Halaman yang menampilkan halaman utama admin

Index.php

Data Master Halaman yang menampilkan form untuk

mengelola data pegawai dan biaya

(58)

pernikahan

Menu Pranikah

Halaman yang menampilkan form untuk mengelola data pranikah

pranikah.php

Menu Pendaftaran Nikah

Halaman yang menampilkan form untuk mengelola data pendaftaran nikah

daftarnikah.php

Menu Pembayaran

Halaman yang menampilkan form untuk mengelola data pembayaran yang masuk

pembayaran.php

Menu Suscatin

Halaman yang menampilkan form untuk mengelola data jadwal suscatin

suscatin.php

Menu Penugasan Penghulu

Halaman yang menampilkan form untuk mengelola data penugasan penghulu

penugasan.php

Menu Laporan

Halaman yang menampilkan form untuk mencetak laporan

laporan.php

4.5.5. Implementasi instalasi program

Implementasi program merupakan langkah awal yang dilakukan untuk menerapkan sistem informasi yang dibuat pada sebuah computer, berikut merupakan langkah-langkah instalasi program pada sistem informasi KUA Katapang :

(59)

Xampp Merupakan perangkat lunak yang mendukung banyak sistem operasi yang fungsinya sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP server, MySQL database, dan penerjemah bahasa pemrograman PHP dan Perl. Instalasi programnya sebagai berikut :

1. Klik 2 kali file (dot).exe xampp kemudian muncul tampilan seperti dibawah ini. Pilih folder unutk tempat install, disini penulis menggunakan drive C. Kemudian install.

Gambar 4.34. Proses Instalasi Xampp pertama

(60)

Gambar 4.35. Proses Instalasi Xampp kedua

3. Proses instalasi selesai kemudian muncul dialog seperti gambar dibawah ini, pilih “Y” dan enter.

Gambar 4.36. Proses Instalasi Xampp ketiga

4. Untuk keluar dari menu instalasi xampp gunakan huruf X

(61)

5. Xampp sudah terinstal dikomputer dan control panel xampp muncul seperti gambar dibawah ini.

Gambar 4.38. Kontrol Panel Xampp

6. Kemudian untuk menjalankan program yang dibutuhkan untuk menjalankan sistem informasi ini jalankan Apache server dan MySql dengan meng-klik tombol start.

Gambar 4.39. Kontrol Panel Xampp Aktif

7. Setelah itu buka web browser anda lalu ketikkan ‘localhost’ pada address

bar dan kemudian akan muncul tampilan jendela seperti di bawah ini. Lalu

(62)

Gambar 4.40. Tampilan XAMPP pada localhost

8. Setelah muncul jendela phpmyadmin kemudian lakukan import database KUA Katapang dengan pertama membuat dahulu database baru dengan mengisikan nama database default supaya mudah yakni “db_ kuakatapang” pada create new database kemudian klik ‘create’.

9. Setelah database berhasil dibuat, klik tab import.

10. Lalu pilih ‘choose file’ dan masukkan database ‘db_kuakatapang.sql’ kemudian klik ‘go’ seperti gambar di bawah ini.

11. Setelah import berhasil kemudian akan tampil seluruh tabel yang berada pada database ‘db_ kuakatapang.sql’.

4.5.6. Penggunaan program

Pada bagian ini akan diperlihatkan bagaimana implementasi penggunaan program sistem informasi KUA Katapang dengan bantuan screen-shot program. Adapun implementasi penggunaan program dilakukan dengan dua struktur menu, yakni admin dan Calon Pengantin.

1. Alur Program Untuk Calon Pegantin

Berikut ini merupakan alur program untuk Calon Pengantin yang ingin mendaftarkan diri ke KUA Katapang.

(63)

Gambar 4.41. Halaman Website

a) Daftar Akun KUA

Gambar 4.42. Daftar Akun KUA

(64)

Gambar 4.43. Login Akun KUA

c) Pendaftaran Pernikahan

(65)

Gambar 4.45. Bukti Pendaftaran Pernikahan

d) Upload Pembayaran Pendaftaran Pernikahan