BAB IV ANALISIS DAN PERANCANGAN 4.1 Analisis Sistem Informasi KUA 4.1.1 Flowchart 4.1.1.1 Flowchart Sistem Untuk User Flowchart untuk user atau pengunjung dapat dilihat pada gambar 4.1. Secara singkat keterangan flowchart tersebut adalah sebagai berikut. User yang mengunjungi Website KUA Lembang harus log in terlebih dahulu, sehingga user dapat menginput pesan dan menginput polling serta dapat melihat informasi KUA. START Pengunjung Halaman Publik Website END Gambar 4.1 Flowchart untuk user atau pengunjung 43
44 4.1.1.2 Flowchart Sistem Untuk istrator Hanya seorang administrator yang dapat mengakses kedua halaman tersebut. Untuk melakukan administrasi website, maka administrator harus melakukan login melalui halaman administrasi website, Setelah administrator tersebut melakukan login, maka dia dapat mengatur manajemen untuk melakukan pengaktifan module dan component, serta management content. Disamping itu, melalui halaman administrasi website, apabila administrator tersebut logout dari halaman administrasi website, maka ia akan kembali ke halaman depan administrasi website.
45 START Halaman Login Input id Tidak Valid Cek Valid Tidak Manajemen Konten Website Cek Ya Halaman Login END Gambar 4.2 Flowchart untuk administrator system
46 4.1.2 Karakteristik Pengguna Ada beberapa pengguna yang diberikan hak akses (priviledge) terhadap sistem informasi ini, yakni dan user biasa (pengunjung). Adapun otoritas masingmasing pengguna digambarkan dalam tabel di bawah ini. Tabel 4.1 Karakteristik Pengguna No Nama User Hak Akses 1 Dapat melakukan log in, mengolah data KUA seperti input, edit, dan delete. 2 User (pengunjung) Melihat dan melakukan pencarian informasi, isi pesan, isi polling dan pemilihan fitur lainnya. 4.1.3 Deskripsi Kebutuhan A. Kebutuhan Fungsional Kebutuhan fungsional pada pembuatan Sistem Informasi Kantor Urusan Agama Kecamatan Lembang Berbasis Web dideskripsikan pada tabel 4.2 di bawah ini : Tabel 4.2 Tabel Kebutuhan Fungsional No. Kode Deskripsi Keterangan Pengguna Terkait 1 Req_WEBKUA_010 Pengolahan data admin Mengolah data admin
47 2 Req_WEBKUA_011 Simpan data admin Menyimpan data admin 3 Req_WEBKUA_012 Edit data admin Mengubah data admin 4 Req_WEBKUA_020 Pengolahan data buku tamu Mengolah data buku tamu 5 Req_WEBKUA_021 Input data buku tamu Menambah data buku tamu User 6 Req_WEBKUA_022 Hapus data buku tamu Menghapus data buku tamu 7 Req_WEBKUA_030 Pengolahan Data Berita Mengolah data berita 8 Req_WEBKUA_031 Input Data Berita Menambah data berita 9 Req_WEBKUA_032 Simpan Data Berita Menyimpan data berita 10 Req_WEBKUA_033 Edit Data Berita 11 Req_WEBKUA_034 Hapus Data Berita Mengubah data berita Menghapus data berita 12 Req_WEBKUA_040 Pengolahan Data Mengolah data
48 Polling 13 Req_WEBKUA_041 Input Data Polling polling Menambah data polling 14 Req_WEBKUA_042 Simpan Data Polling Menyimpan data polling 15 Req_WEBKUA_043 Edit Data Polling Mengubah data polling 16 Req_WEBKUA_044 Hapus Data Polling Menghapus data polling 17 Req_WEBKUA_050 Melakukan Polling Melakukan polling user 18 Req_WEBKUA_051 Lihat hasil Polling Melihat hasil polling dan user 19 Req_WEBKUA_060 Lihat informasi keseluruhan Melihat informasi keseluruhan 20 Req_WEBKUA_061 Lihat informasi Umum Melihat informasi umum dan user B. Kebutuhan Antar Muka 1. Menu Pilihan menu pada Website KUA Lembang ini terdiri dari :
49 A. Home Menu home ini berisi berita mengenai KUA Kec. Lembang tersebut. B. Profile Menu profil ini berisi profil mengenai KUA Kec. Lembang tersebut. C. Contact Us Halaman Contact Us merupakan halaman untuk mengontak pemilik Sistem Informasi KUA Kec. Lembang serta buku tamu yang dapat diisi oleh user. D. Login istrator Halaman ini merupakan halaman yang tersedia namun tersembunyi atau tidak dapat diakses oleh sembarang orang tetapi hanya adminnya saja. Halaman ini digunakan untuk mengakses halaman admin yang mempunyai fungsi mengontrol sistem dan tampilan secara keseluruhan. Pada halaman ini terdapat menu-menu, sebagai berikut: a. Input Polling b. Edit Polling c. Input Berita d. Edit Berita e. Edit Buku Tamu f. Logout E. Resolusi Monitor Resolusi monitor minimal bila dijalankan pada ukuran 1280 x 800 piksel.
50 F. Kebutuhan Perangkat Keras Processor VGA RAM Harddisk : Intel Pentium IV 1,8 GHz. : Shared onboard 64 MB. : 256 MB. : 20 GB. Koneksi Internet. 4.2 Perancangan Sistem Informasi KUA 4.2.1 Perancangan Struktur Data dan Tabel a. Tabel istrator 1. Nama Tabel : admin 2. Fungsi : Menyimpan Data Induk 3. Kunci Primer : userid 4. Kunci sekunder : - Struktur record : No Nama_Field Jenis Lebar Keterangan 1 userid Varchar 30 Id 2 passid Varchar 50 Password Tabel 4.3 Tabel istrator
51 b. Tabel Polling 1. Nama Tabel : polling 2. Fungsi : Menyimpan Data Polling 3. Kunci Primer : id 4. Kunci Sekunder : - Struktur record : No Nama_Field Jenis Lebar Keterangan 1 Id Int 4 Id Polling 2 Pertanyaan Varchar 250 Pertanyaan Poll 3 jawab1 Varchar 100 Pilihan jawaban1 4 jawab2 Varchar 100 Pilihan jawaban2 5 jawab3 Varchar 100 Pilihan jawaban3 6 jawab4 Varchar 100 Pilihan jawaban4 7 hasil1 Tinyint 5 Hasil jawaban 1 8 hasil2 Tinyint 5 Hasil jawaban 2 9 hasil3 Tinyint 5 Hasil jawaban 3 10 hasil4 Tinyint 5 Hasil jawaban 4 11 Statusaktif Enum ( Y, N ) Status aktif poll Table 4.4 Tabel Polling
52 c. Tabel Berita 1. Nama Tabel : berita 2. Fungsi : Menyimpan Data Berita 3. Kunci Primer : id 4. Kunci Sekunder : - Struktur record : No Nama_Field Jenis Lebar Keterangan 1 Id Int 4 Id berita 2 Judul Varchar 100 Judul berita 3 Headline Varchar 200 Headline berita 4 Isiberita Text - Isi berita 5 Pengirim Varchar 25 Pengirim berita 6 Tanggal Date - Tanggal berita Table 4.5 Tabel Berita d. Table Buku Tamu 1. Nama Tabel : bukutamu 2. Fungsi : Menyimpan Data Buku Tamu 3. Kunci Primer : id 4. Kunci Sekunder : -
53 Struktur record No Nama_Field Jenis Lebar Keterangan 1 Id Int 4 Id buku tami 2 Nama Varchar 40 Nama tamu/user 3 Email Varchar 60 Email tamu/user 4 Pesan Text - Pesan tamu/user 5 Tanggal Date - Tanggal mengirim Tabel 4.6 Tabel Buku Tamu
54 4.2.2 Perancangan Interface Header Web Login LOGIN ADMIN MENU Home Profile Contact Us Konten (Isi) POLLING Lihat Hasil Footer Web Gambar 4.3 Perancangan Menu pada Halaman Utama
55 HALAMAN UTAMA ADMINISTRATOR Input Polling Input Berita Edit Polling Edit Berita Edit Buku Tamu Edit Password LogOut Gambar 4.4 Perancanagan Menu pada Halaman istrator 4.3 Data Flow Diagram 4.3.1 Diagram Konteks Data Polling USER Jendela Berita Data buku tamu Hasil Polling Daftar Berita Daftar Buku Tamu Website KUA Id dan data admin Data Polling Data Berita Konfirmasi Id admin Hasil Polling Daftar Berita ADMIN Gambar 4.5 Diagram Konteks
56 4.3.2 Data Flow Diagram Level 1 USER Data Polling Jendela Berita Data Buku Tamu Hasil Polling Daftar Berita Hasil Buku Tamu 1 Informasi KUA bukutamu polling berita admin 2 Pengolahan Data Id dan data admin Data artikel Data Polling Konfirmasi Id admin Daftar artikel Hasil Polling ADMIN Gambar 4.6 Data Flow Diagram Level 1
57 4.3.3 Data Flow Diagram Level 2 Proses 1 ADMIN Id admin admin Informasi KUA keseluruhan 1.1 Informasi Keseluruhan KUA berita bukutamu USER polling Informasi umum KUA 1.2 Informasi Umum KUA Gambar 4.7 Data Flow Diagram Level 2 Proses 1
58 4.3.4 Data Flow Diagram Level 2 Proses 2 Id dan data admin 2.1 Pengolahan Data admin ADMIN Data Polling 2.2 Pengolahan Data Polling polling Data Berita 2.3 Pengolahan Data Berita berita Daftar Buku Tamu 2.4 Pengolahan Data Buku Tamu bukutamu Gambar 4.8 Data Flow Diagram Level 2 Proses 2
59 4.3.5 Data Flow Diagram Level 3 Proses 2.1 Data admin 2.1.1 Tambah Data Data admin 2.1.2 Simpan Data ADMIN Data admin admin Id admin 2.1.3 Edit Data Data admin Id admin 2.1.4 Hapus Data Gambar 4.9 Data Flow Diagram Level 3 Proses 2.1
60 4.3.6 Data Flow Diagram Level 3 Proses 2.2 Data polling 2.2.1 Tambah Data Polling Data polling 2.2.2 Simpan Data Polling ADMIN Id admin polling Data polling 2.2.3 Edit Data Polling Id admin Data polling 2.2.4 Hapus Data Polling Gambar 4.10 Data Flow Diagram Level 3 Proses 2.2
61 4.3.7 Data Flow Diagram Level 3 Proses 2.3 Data Berita 2.3.1 Tambah Data Berita Data Berita 2.3.2 Simpan Data Berita ADMIN Id admin berita Data Berita 2.3.3 Edit Data Berita Id admin Data Berita 2.3.4 Hapus Data Berita Gambar 4.11 Data Flow Diagram Level 3 Proses 2.3
62 4.3.8 Data Flow Diagram Level 3 Proses 2.4 Data buku tamu Id admin 2.4.2 Edit Data Buku Tamu ADMIN Data buku tamu Id admin 2.4.2 Simpan Data Buku Tamu bukutamu Data buku tamu Id admin 2.4.3 Hapus Data Buku Tamu Gambar 4.12 Data Flow Diagram Level 3 Proses 2.4
63 4.4 Entity Relationship Diagram userid passid id judul headline isiberita admin mengolah berita pengirim tanggal pertanyaan id jawab1 jawab2 jawab3 jawab4 mengolah polling hasil1 hasil2 statusaktif hasil4 hasil3 id nama email pesan mengolah bukutamu tanggal Gambar 4.13 Entity Relationship Diagram
64 4.5 Basis Data 4.5.1 Implementasi Database Mengimplementasikan basis data dalam Pembuatan Website KUA Lembang ini, menggunakan MySQL sebagai pengolah basis data. MySQL adalah sebagai database yang multi platform yaitu dapat dipakai di berbagai platform berbeda, yaitu : Linux, Windows, Solaris, maupun MacOS, dan memiliki banyak tipe data, juga mampu menangani database dalam skala besar dan memiliki kecepatan query yang lebih bila dibandingkan dengan tools database lainnya. Oleh karena itu dalam pembuatan website KUA ini dipergunakan MySQL ver.5.3 yang berada pada bundle XAMPP. 4.5.2 Pembuatan Database Pembuatan database dilakukan dengan mengaktifkan service MySQL terlebih dahulu pada paket XAMPP. Cara mengaktifkan service MySQL dapat dilakukan dengan dua cara, yaitu : 1. Melalui console (Command Promt) C:\>cd xampp/mysql C:\xampp\mysql>mysql_installservice.bat
65 Gambar 4.14 Mengaktifkan Service MySQL melalui console 2. Melalui XAMPP Control Panel Gambar 4.15 Mengaktifkan service MySQL melalui XAMPP Control Panel Tahapan implementasi selanjutnya yaitu pembuatan database dengan mengetikan perintah SQL. Oleh karena itu dipergunakan DDL (Data Definition
66 Lamguage) dalam mendefinisikan data website yang akan dibuat. Database yang dibuat tersebut diberi nama kua. Gambar 416. Membuat database kua Setelah database dibuat maka harus dibuat table-table di dalamnya. Berikut adalah cara menambahkan table pada database kua. Gambar 4.17 membuat table admin pada database kua
67 Gambar 4.18 Mengisi struktur tabel admin Setelah table admin diisi, dilanjutkan dengan menekan tombol Save pada bagian bawah form. Maka table admin ini sudah terisi. Gambar 4.19 Tabel admin yang sudah terisi Table-table yang dibutuhkan dalam pembuatan website KUA Lembang ini sederhana yaitu admin, berita, bukutamu dan poling. Yang dari masing-masing table itu sudah diisi dengan struktur table yang diperlukan.
Gambar 4.20 Database KUA yang sudah dibuat 68