Desain InputOutput Analisis dan Perancangan Sistem

4.2.5 Desain InputOutput

Desain inputoutput IO merupakan rancangan antar muka perangkat lunak awal dari pembuatan suatu aplikasi. Desain IO sangat membantu dalam mempercepat proses pengembangan serta mengetahui dengan lebih jelas alur program yang akan dirancang. Desain IO untuk Aplikasi Pendataan Umat Redemptor Mundi dapat digambarkan sebagai berikut. 1. Rancangan Form Otentikasi Pengguna Gambar 4.7 menggambarkan rancangan form otentikasi pengguna. Check box ’ingat’ dimaksudkan agar komputer dapat mengingat akun pengguna yang terakhir kali melakukan otentikasi, sehingga ketika pengguna hendak menggunakan aplikasi ia tidak perlu memasukkan nama pengguna dan sandi kembali. Gambar 4.7 Rancangan Form Otentikasi Pengguna STIKOM SURABAYA 2. Rancangan Form Halaman Utama Gambar 4.8 menggambarkan rancangan form halaman utama. Pada sisi kiri halaman ini terdapat panel yang berisikan tautan untuk membuka menufungsi lainnya. Gambar 4.8 Rancangan Form Halaman Utama 3. Rancangan Form Tambah Data Umat Gambar 4.9, 4.10, dan 4.11 menggambarkan rancangan form tambah data umat dengan setiap tab-nya. Check box ’kunci’ dimaksudkan untuk memudahkan penambahan data secara batch langsung dalam jumlah besar. STIKOM SURABAYA Gambar 4.9 Rancangan Form Tambah Data Umat – Tab Umum Gambar 4.10 Rancangan Form Tambah Data Umat – Tab Sakramen STIKOM SURABAYA Gambar 4.11 Rancangan Form Tambah Data Umat – Tab Lain-Lain 4. Rancangan Form Ubah Data Umat Untuk melakukan perubahan data umat, pengguna harus mencari terlebih dahulu umat yang datanya ingin diubah. Form pencarian ini dapat dilihat pada Gambar 4.12. Setelah tombol ’cari’ diklik, maka akan tampil data umat yang bersesuaian dengan pencarian yang dilakukan. Untuk melakukan perubahan, pengguna cukup melakukan klik ganda pada data umat yang ingin diubah. Gambar 4.13, 4.14, dan 4.15 menggambarkan rancangan form ubah data umat dengan setiap tab-nya. STIKOM SURABAYA Gambar 4.12 Rancangan Form Ubah Data Umat – Cari Data Umat Gambar 4.13 Rancangan Form Ubah Data Umat – Tab Umum STIKOM SURABAYA Gambar 4.14 Rancangan Form Ubah Data Umat – Tab Sakramen Gambar 4.15 Rancangan Form Ubah Data Umat – Tab Lain-Lain 5. Rancangan Form Master Cara Pernikahan Gambar 4.16 menggambarkan rancangan form master cara pernikahan. Jika pengguna ingin menambah cara pernikahan baru, pengguna cukup langsung mengetikkannya pada kotak teks, kemudian mengklik tombol ’simpan’. Jika pengguna ingin STIKOM SURABAYA merubah cara pernikahan yang telah ada, pengguna cukup mengklik cara pernikahan yang ingin diubah, lalu mengubahnya di kotak teks baru kemudian mengklik tombol ’simpan’. Jika pengguna terlanjur mengklik cara pernikahan namun ingin memasukkan cara pernikahan baru, maka pengguna cukup mengklik tombol ’baru’, lalu kemudian memasukkan cara pernikahan baru di kotak teks dan mengklik tombol ’simpan’. Gambar 4.16 Rancangan Form Master Cara Pernikahan 6. Rancangan Form Master Hubungan Keluarga Gambar 4.17 menggambarkan rancangan form master hubungan keluarga. Jika pengguna ingin menambah hubungan keluarga baru, pengguna cukup langsung mengetikkannya pada kotak teks, kemudian mengklik tombol ’simpan’. Jika pengguna ingin merubah hubungan keluarga yang telah ada, pengguna cukup mengklik cara pernikahan yang ingin diubah, lalu mengubahnya di kotak teks baru kemudian mengklik tombol ’simpan’. Jika STIKOM SURABAYA pengguna terlanjur mengklik hubungan keluarga namun ingin memasukkan hubungan keluarga baru, maka pengguna cukup mengklik tombol ’baru’, lalu kemudian memasukkan hubungan keluarga baru di kotak teks dan mengklik tombol ’simpan’. Gambar 4.17 Rancangan Form Master Hubungan Keluarga 7. Rancangan Form Master Kegiatan Gereja Gambar 4.18 menggambarkan rancangan form master kegiatan gereja. Jika pengguna ingin menambah kegiatan gereja baru, pengguna cukup langsung mengetikkannya pada kotak teks, kemudian mengklik tombol ’simpan’. Jika pengguna ingin merubah kegiatan gereja yang telah ada, pengguna cukup mengklik kegiatan gereja yang ingin diubah, lalu mengubahnya di kotak teks baru kemudian mengklik tombol ’simpan’. Jika pengguna terlanjur mengklik kegiatan gereja namun ingin memasukkan kegiatan gereja baru, maka pengguna cukup STIKOM SURABAYA mengklik tombol ’baru’, lalu kemudian memasukkan kegiatan gereja baru di kotak teks dan mengklik tombol ’simpan’. Gambar 4.18 Rancangan Form Master Kegiatan Gereja 8. Rancangan Form Master Kegiatan Masyarakat Gambar 4.19 menggambarkan rancangan form master kegiatan masyarakat. Jika pengguna ingin menambah kegiatan masyarakat baru, pengguna cukup langsung mengetikkannya pada kotak teks, kemudian mengklik tombol ’simpan’. Jika pengguna ingin merubah kegiatan masyarakat yang telah ada, pengguna cukup mengklik kegiatan masyarakat yang ingin diubah, lalu mengubahnya di kotak teks baru kemudian mengklik tombol ’simpan’. Jika pengguna terlanjur mengklik kegiatan masyarakat namun ingin memasukkan kegiatan masyarakat baru, maka pengguna cukup mengklik tombol ’baru’, lalu kemudian memasukkan kegiatan masyarakat baru di kotak teks dan mengklik tombol ’simpan’. STIKOM SURABAYA Gambar 4.19 Rancangan Form Master Kegiatan Masyarakat 9. Rancangan Form Master Pekerjaan Gambar 4.20 menggambarkan rancangan form master pekerjaan. Jika pengguna ingin menambah pekerjaan baru, pengguna cukup langsung mengetikkannya pada kotak teks, kemudian mengklik tombol ’simpan’. Jika pengguna ingin merubah pekerjaan yang telah ada, pengguna cukup mengklik pekerjaan yang ingin diubah, lalu mengubahnya di kotak teks baru kemudian mengklik tombol ’simpan’. Jika pengguna terlanjur mengklik pekerjaan namun ingin memasukkan pekerjaan baru, maka pengguna cukup mengklik tombol ’baru’, lalu kemudian memasukkan pekerjaan baru di kotak teks dan mengklik tombol ’simpan’. STIKOM SURABAYA Gambar 4.20 Rancangan Form Master Pekerjaan 10. Rancangan Form Master Pendidikan Gambar 4.21 menggambarkan rancangan form master pendidikan. Jika pengguna ingin menambah pendidikan baru, pengguna cukup langsung mengetikkannya pada kotak teks, kemudian mengklik tombol ’simpan’. Jika pengguna ingin merubah pendidikan yang telah ada, pengguna cukup mengklik pendidikan yang ingin diubah, lalu mengubahnya di kotak teks baru kemudian mengklik tombol ’simpan’. Jika pengguna terlanjur mengklik pendidikan namun ingin memasukkan pendidikan baru, maka pengguna cukup mengklik tombol ’baru’, lalu kemudian memasukkan pendidikan baru di kotak teks dan mengklik tombol ’simpan’. STIKOM SURABAYA Gambar 4.21 Rancangan Form Master Pendidikan 11. Rancangan Form Master Wilayah Gambar 4.22 menggambarkan rancangan form master wilayah. Jika pengguna ingin menambah wilayah baru, pengguna cukup langsung mengetikkannya pada kotak teks, kemudian mengklik tombol ’simpan’. Jika pengguna ingin merubah wilayah yang telah ada, pengguna cukup mengklik wilayah yang ingin diubah, lalu mengubahnya di kotak teks baru kemudian mengklik tombol ’simpan’. Jika pengguna terlanjur mengklik wilayah namun ingin memasukkan wilayah baru, maka pengguna cukup mengklik tombol ’baru’, lalu kemudian memasukkan wilayah baru di kotak teks dan mengklik tombol ’simpan’. STIKOM SURABAYA Gambar 4.22 Rancangan Form Master Wilayah 12. Rancangan Form Master Lingkungan Gambar 4.23 menggambarkan rancangan form master lingkungan. Jika pengguna ingin menambah lingkungan baru, pengguna cukup langsung mengetikkannya pada kotak teks dan memilih wilayah lingkungan tersebut, kemudian mengklik tombol ’simpan’. Jika pengguna ingin merubah lingkungan yang telah ada, pengguna cukup mengklik lingkungan yang ingin diubah, lalu mengubahnya di kotak teks baru kemudian mengklik tombol ’simpan’. Jika pengguna terlanjur mengklik lingkungan namun ingin memasukkan lingkungan baru, maka pengguna cukup mengklik tombol ’baru’, lalu kemudian memasukkan lingkungan baru di kotak teks dan mengklik tombol ’simpan’. STIKOM SURABAYA Gambar 4.23 Rancangan Form Master Lingkungan 13. Rancangan Form Master Pegawai Gambar 4.24 menggambarkan rancangan form master pegawai. Jika pengguna ingin menambah pegawai baru, pengguna cukup langsung mengisikan data pegawai tersebut, kemudian mengklik tombol ’simpan’. Jika pengguna ingin merubah pegawai yang telah ada, pengguna cukup mengklik pegawai yang ingin diubah, lalu mengubah datanya, baru kemudian mengklik tombol ’simpan’. Jika pengguna terlanjur mengklik pegawai namun ingin memasukkan pegawai baru, maka pengguna cukup mengklik tombol ’baru’, lalu kemudian memasukkan data pegawai baru dan mengklik tombol ’simpan’. STIKOM SURABAYA Gambar 4.24 Rancangan Form Master Pegawai 14. Rancangan Form Laporan Gambar 4.25 menggambarkan rancangan form laporan. Dalam form ini, pengguna dapat memilih kriteria dari laporan yang ingin dihasilkan, kemudian klik tombol ’tampil’. Form print preview kemudian akan tampil memuat laporan dengan kriteria yang telah dipilih. Dalam form tersebut, pengguna dapat melihat, mencetak, maupun menyimpan laporan tersebut dalam berbagai format. STIKOM SURABAYA Gambar 4.25 Rancangan Form Laporan STIKOM SURABAYA

4.3 Implementasi Sistem