43 4.1 Analisis Sistem Informasi KUA 4.1.1 Flowchart
4.1.1.1Flowchart 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.
Gambar 4.1 Flowchart untuk user atau pengunjung Pengunjung
START
END Halaman Publik
4.1.1.2Flowchart Sistem Untuk Administrator
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.
Gambar 4.2 Flowchart untuk administrator system Cek Manajemen Konten Website START END Input id Admin Halaman Login Admin Tidak Valid Valid Cek Ya Tidak Halaman Login Admin
4.1.2 Karakteristik Pengguna
Ada beberapa pengguna yang diberikan hak akses (priviledge) terhadap sistem informasi ini, yakni Admin dan user biasa (pengunjung). Adapun otoritas masing-masing pengguna digambarkan dalam tabel di bawah ini.
Tabel 4.1 Karakteristik Pengguna
No Nama User Hak Akses
1 Admin 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 Admin
2 Req_WEBKUA_011 Simpan data admin Menyimpan data admin Admin
3 Req_WEBKUA_012 Edit data admin
Mengubah data admin Admin 4 Req_WEBKUA_020 Pengolahan data buku tamu Mengolah data buku tamu Admin 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 Admin 7 Req_WEBKUA_030 Pengolahan Data Berita Mengolah data berita Admin
8 Req_WEBKUA_031 Input Data Berita
Menambah data berita Admin 9 Req_WEBKUA_032 Simpan Data Berita Menyimpan data berita Admin
10 Req_WEBKUA_033 Edit Data Berita
Mengubah data berita
Admin
11 Req_WEBKUA_034 Hapus Data Berita
Menghapus data berita
Admin
Polling polling
13 Req_WEBKUA_041 Input Data Polling
Menambah data polling Admin 14 Req_WEBKUA_042 Simpan Data Polling Menyimpan data polling Admin
15 Req_WEBKUA_043 Edit Data Polling
Mengubah data polling Admin 16 Req_WEBKUA_044 Hapus Data Polling Menghapus data polling Admin 17 Req_WEBKUA_050 Melakukan Polling
Melakukan polling user
18 Req_WEBKUA_051 Lihat hasil Polling
Melihat hasil polling
Admin dan user
19 Req_WEBKUA_060 Lihat informasi keseluruhan Melihat informasi keseluruhan Admin 20 Req_WEBKUA_061 Lihat informasi Umum Melihat informasi umum
Admin dan user
B. Kebutuhan Antar Muka 1. Menu
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 Administrator
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
F. Kebutuhan Perangkat Keras
Processor : Intel Pentium IV 1,8 GHz. VGA : Shared onboard 64 MB.
RAM : 256 MB.
Harddisk : 20 GB. Koneksi Internet.
4.2 Perancangan Sistem Informasi KUA 4.2.1 Perancangan Struktur Data dan Tabel
a. Tabel Administrator
1. Nama Tabel : admin
2. Fungsi : Menyimpan Data Induk Admin 3. Kunci Primer : userID
4. Kunci sekunder :
-Struktur record :
No Nama_Field Jenis Lebar Keterangan
1 userID Varchar 30 Id Admin
2 passID Varchar 50 Password Admin
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
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
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
4.2.2 Perancangan Interface
Gambar 4.3 Perancangan Menu pada Halaman Utama
Header Web Footer Web Konten (Isi) LOGIN ADMIN Login MENU Home Profile Contact Us POLLING Lihat Hasil
Gambar 4.4 Perancanagan Menu pada Halaman Administrator
4.3 Data Flow Diagram 4.3.1 Diagram Konteks
Gambar 4.5 Diagram Konteks Website
KUA
ADMIN
Id dan data admin
Data Berita Data Polling Konfirmasi Id admin Daftar Berita Hasil Polling USER Data Polling Jendela Berita Data buku tamu
Hasil Polling Daftar Berita Daftar Buku Tamu
HALAMAN UTAMA ADMINISTRATOR
Input Polling Input Berita
4.3.2 Data Flow Diagram Level 1
Gambar 4.6 Data Flow Diagram Level 1
2 Pengolahan
Data
ADMIN
Id dan data admin
Data Polling Data artikel Konfirmasi Id admin Daftar artikel Hasil Polling USER Data Polling Jendela Berita
Data Buku Tamu
Hasil Polling Daftar Berita Hasil Buku Tamu
1 Informasi
KUA
bukutamu polling berita
4.3.3 Data Flow Diagram Level 2 Proses 1
Gambar 4.7 Data Flow Diagram Level 2 Proses 1 ADMIN 1.1 Informasi Keseluruhan KUA Id admin Informasi KUA keseluruhan admin berita bukutamu USER 1.2 Informasi Umum KUA Informasi umum KUA
4.3.4 Data Flow Diagram Level 2 Proses 2
Gambar 4.8 Data Flow Diagram Level 2 Proses 2 ADMIN
2.1 Pengolahan Data Admin
admin Id dan data admin
2.2 Pengolahan Data Polling Data Polling polling 2.3 Pengolahan Data Berita berita Data Berita 2.4 Pengolahan Data Buku Tamu bukutamu Daftar Buku Tamu
4.3.5 Data Flow Diagram Level 3 Proses 2.1
Gambar 4.9 Data Flow Diagram Level 3 Proses 2.1 ADMIN 2.1.1 Tambah Data Admin 2.1.2 Simpan Data Admin 2.1.3 Edit Data Admin 2.1.4 Hapus Data Admin Data admin Data admin Data admin Id admin Data admin Id admin admin
4.3.6 Data Flow Diagram Level 3 Proses 2.2
Gambar 4.10 Data Flow Diagram Level 3 Proses 2.2 ADMIN 2.2.1 Tambah Data Polling 2.2.2 Simpan Data Polling 2.2.3 Edit Data Polling 2.2.4 Hapus Data Polling Data polling polling Id admin Id admin Data polling Data polling Data polling
4.3.7 Data Flow Diagram Level 3 Proses 2.3
Gambar 4.11 Data Flow Diagram Level 3 Proses 2.3 ADMIN 2.3.1 Tambah Data Berita 2.3.2 Simpan Data Berita 2.3.3 Edit Data Berita 2.3.4 Hapus Data Berita Data Berita Data Berita Data Berita berita Id admin Id admin Data Berita
4.3.8 Data Flow Diagram Level 3 Proses 2.4
Gambar 4.12 Data Flow Diagram Level 3 Proses 2.4
2.4.2 Simpan Data Buku Tamu bukutamu ADMIN 2.4.2 Edit Data Buku Tamu 2.4.3 Hapus Data Buku Tamu Data buku tamu
Data buku tamu Id admin
Id admin
Data buku tamu
4.4 Entity Relationship Diagram
Gambar 4.13 Entity Relationship Diagram
admin userID passID mengolah berita id judul headline isiberita pengirim tanggal mengolah bukutamu mengolah polling jawab2 jawab1 id jawab3 pertanyaan jawab4 hasil4 hasil3 hasil2 hasil1 statusaktif id email nama pesan tanggal
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
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
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.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.