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 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.
45
START
Halaman Login Admin
Input id Admin Tidak Valid Cek Valid Manajemen Konten Website Tidak Cek Ya Halaman Login Admin
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 Admin dan user biasa (pengunjung). Adapun otoritas masingmasing pengguna digambarkan dalam tabel di bawah ini. Tabel 4.1 Karakteristik Pengguna No 1
Nama User
Hak Akses
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 Pengguna No.
Kode
Deskripsi
Keterangan Terkait
Pengolahan data 1
Mengolah data
Req_WEBKUA_010
Admin admin
admin
47
Simpan data 2
Menyimpan data
Req_WEBKUA_011
Admin admin
admin Mengubah data
3
Req_WEBKUA_012
Edit data admin
Admin admin
4
5
6
7
Pengolahan data
Mengolah data
buku tamu
buku tamu
Input data buku
Menambah data
tamu
buku tamu
Hapus data buku
Menghapus data
tamu
buku tamu
Pengolahan Data
Mengolah data
Berita
berita
Req_WEBKUA_020
Admin
Req_WEBKUA_021
User
Req_WEBKUA_022
Admin
Req_WEBKUA_030
Admin
Menambah data 8
Req_WEBKUA_031
Input Data Berita
Admin berita
9
Simpan Data
Menyimpan data
Berita
berita
Req_WEBKUA_032
Admin
Mengubah data 10
Req_WEBKUA_033
Edit Data Berita
Admin berita Menghapus data
11
Req_WEBKUA_034
Hapus Data Berita
Admin berita
12
Req_WEBKUA_040
Pengolahan Data
Mengolah data
Admin
48
Polling
polling Menambah data
13
Req_WEBKUA_041
Input Data Polling
Admin polling
Simpan Data 14
Menyimpan data
Req_WEBKUA_042
Admin Polling
polling Mengubah data
15
Req_WEBKUA_043
Edit Data Polling
Admin polling
16
Hapus Data
Menghapus data
Polling
polling
Req_WEBKUA_044
Admin
Melakukan 17
Req_WEBKUA_050
Melakukan polling
user
Polling Melihat hasil 18
Req_WEBKUA_051
Lihat hasil Polling
Admin dan user polling
19
20
Lihat informasi
Melihat informasi
keseluruhan
keseluruhan
Lihat informasi
Melihat informasi
Umum
umum
Req_WEBKUA_060
Admin
Req_WEBKUA_061
Admin 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 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:
E.
a.
Input Polling
b.
Edit Polling
c.
Input Berita
d.
Edit Berita
e.
Edit Buku Tamu
f.
Logout
Resolusi Monitor Resolusi monitor minimal bila dijalankan pada ukuran 1280 x 800 piksel.
50
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
Tabel 4.3 Tabel Administrator
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 ADMIN Login MENU Home Konten (Isi)
Profile Contact Us 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 Administrator 4.3
Data Flow Diagram
4.3.1 Diagram Konteks Data Polling USER
Jendela Berita Data buku tamu
Id dan data admin Hasil Polling Daftar Berita Daftar Buku Tamu
Website KUA
Data Polling Data Berita
Konfirmasi Id admin Hasil Polling Daftar Berita
Gambar 4.5 Diagram Konteks
ADMIN
56
4.3.2 Data Flow Diagram Level 1 Data Polling Jendela Berita USER
Data Buku Tamu
Hasil Polling Daftar Berita Hasil Buku Tamu
bukutamu
1 Informasi KUA
berita
polling
Id dan data admin admin
2 Pengolahan Data
Data artikel Data Polling
Konfirmasi Id admin Daftar artikel Hasil Polling
Gambar 4.6 Data Flow Diagram Level 1
ADMIN
57
4.3.3 Data Flow Diagram Level 2 Proses 1
ADMIN
admin
Id admin
Informasi KUA keseluruhan
berita 1.1 Informasi Keseluruhan KUA
bukutamu
polling USER
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
ADMIN
Data Polling
Data Berita
Daftar Buku Tamu
2.1 Pengolahan Data Admin
admin
2.2 Pengolahan Data Polling
polling
2.3 Pengolahan Data Berita
berita
2.4 Pengolahan Data Buku Tamu
Gambar 4.8 Data Flow Diagram Level 2 Proses 2
bukutamu
59
4.3.5 Data Flow Diagram Level 3 Proses 2.1
Data admin
Data admin
ADMIN
2.1.1 Tambah Data Admin
2.1.2 Simpan Data Admin
Data admin
Id admin
Data admin Id admin
admin 2.1.3 Edit Data Admin
2.1.4 Hapus Data Admin
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
Data polling
ADMIN
2.2.1 Tambah Data Polling
2.2.2 Simpan Data Polling
Id admin
Data polling
Id admin Data polling
polling 2.2.3 Edit 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
Data Berita
ADMIN
2.3.1 Tambah Data Berita
2.3.2 Simpan Data Berita
Id admin Data Berita
Id admin Data Berita
berita 2.3.3 Edit 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
ADMIN
Data buku tamu Id admin
Data buku tamu Id admin
2.4.2 Edit Data Buku Tamu
2.4.2
Simpan Data Buku Tamu
bukutamu
2.4.3 Hapus Data Buku Tamu
Gambar 4.12 Data Flow Diagram Level 3 Proses 2.4
63
4.4
Entity Relationship Diagram
judul
headline
id userID
passID
admin
isiberita
pengirim
berita
mengolah
tanggal
pertanyaan jawab2 jawab1 id
jawab3 jawab4 polling
mengolah
hasil1 hasil2 hasil3
statusaktif
hasil4
nama id
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.
68
Gambar 4.20 Database KUA yang sudah dibuat
