BAB V IMPLEMENTASI DAN PENGUJIAN 5.1
Implementasi Pembuatan Sistem
5.1.1 Lingkungan Pemrograman Implementasi dari Website KUA Lembang ini dibuat dengan menggunakan bahasa pemrograman PHP dengan mengandalkan web sebagai media pengolahan data tersebut. Alasan pemilihan interface web sebagai media pengolahan data yakni agar tampilan yang lebih atraktif dan dapat diakses tanpa batasan ruang dan waktu, serta dapat dihosting pada suatu domain web (publish), file pembuatan yang relatif kecil yaitu file yang berekstensi *.php.
5.1.2 Konfigurasi Hardware Website KUA Lembang ini dirancang menggunakan tool pendukung yang berupa hardware dan software. Perangkat keras (hardware) yang digunakan untuk website ini adalah computer/laptop yang mempunyai spesifikasi sebagai berikut : 1. Processor
: Intel Pentium IV 1,8 Ghz
2. VGA
: Shared onboard 64 MB
3. RAM
: 512 MB
4. Harddisk
: 80 GB
5. Monitor
: CRT 15” (1024x768 pixels)
6. Mouse USB dan keyboard
69
70
Pengembangan ini dilakukan dengan menggunakan spesifikasi yang berlebih dibandingkan
dengan
spesifikasi
diatas.
Hal
ini
dapat
dilakukan
karena
pengembangan sistem website ini tidak dibutuhkan spesifikasi tinggi, namun storage yang dibutuhkan cukup banyak. Sedangkan pada sisi client, website ini dapat dijalankan dengan spesifikasi lebih rendah daripada spesifikasi pengembang. Spesifikasinya adalah berikut ini: 1. Processor : Intel Pentium IV 1,8 Ghz 2. VGA
: Shared onboard 64 MB
3. RAM
: 256 MB
4. Harddisk
: 20 GB
5. Monitor
: CRT 15” (1024x768 pixels)
6. Mouse USB dan keyboard 7. Koneksi Internet Pengembangan Website KUA Lembang ini akan dikembangkan dengan menggunakan koneksi internet dengan membuat domain dan hosting pada internet. Sehingga website ini tersimpan di server dan dapat diakses oleh seluruh pengunjung website.
5.1.3 Konfigurasi Software Software yang digunakan dalam pembuatan Website KUA Lembang ini adalah sebagai berikut : 1. Sistem Operasi PC
: Microsoft Windows XP
71
2. Bahasa Pemrograman
: PHP ver. 5.3
3. Database
: MySQL ver. 5.3
4. Web Server
: Apache (XAMPP ver. 1.7)
5. Browser
: Google Chrome
5.2
Coding Implementasi dari pembuatan Website KUA Lembang ini dibuat dengan
menggunakan PHP sebagai bahasa pemrograman, dipadukan dengan CSS dan HTML sebagai interface web. Juga dalam pemngolahan basis data dipergunakan MySQL sebagai tools pengolahan data. 5.2.1
Implementasi Antar Muka Website KUA Lembang ini dibangun dengan mempunyai 2 halaman yang
berbeda yaitu halaman public yang dapat diakses oleh user atau pengunjung dan halaman administrator khusus untuk admin. Oleh karena itu pada implementasinya user dan admin mempunyai interface yang berbeda dalam mengakses halaman utamanya. Didalam PHP, implementasi antarmuka dilakukan dengan sebuah webpage berekstensi PHP. Sehingga setiap file program keseluruhan ditulis dengan file yang berekstensi .php. Berikut ini adalah implementasi antarmuka dari pembuatan website KUA Lembang.
72
Tabel 5.1. Implementasi Interface pada Website KUA Kecamatan Lembang
Hak Akses Adminitrator
Menu
Fungsi
Home
Halaman Utama Pengguna
Manajemen Modul
Mengatur modul dalam website.
Manajemen Administrator
Mengatur Administrator dalam sistem
Lihat Data KUA
Melihat keseluruhan Data KUA
Logout
Keluar dari sistem administrator.
User/Pengunjung Halaman Utama
Halaman utama pada user atau pengunjung
Informasi KUA
Melihat informasi KUA secara umum
Contact Us
Pada halaman ini, selain adanya kontak
terkait
disini
juga
disediakan kolom untuk menulis pesan sebagai buku tamu.
73
5.2.2
Implementasi Program Ada beberapa hal yang perlu dijalankan dalam pengimplementasian Website
KUA ini. Untuk menjalankan program yang telah ditulis dalam bahasa pemrograman PHP diperlukan webserver. Web server yang digunakan adalah Apache, webserver tersebut berada dalam paket installer XAMPP. Dilain pihak untuk melihat tampilan dari baris-baris program yang telah dibutuhkan browser dikarenakan sistem ini dibangun dengan berbasis web. Ada dua cara yang dapat digunakan untuk mengaktifkan service Apache. Berikut ini adalah langkah-langkah untuk menjalankan service webserver (Apache) : 1. Melalui console (Command Prompt) C:\>cd xampp C:\xampp>apache_start.bat
Gambar 5.1 Menjalankan webserver (Apache) melalui console
74
2. Melalui XAMPP Control Panel
Gambar 5.2 Menjalankan webserver (Apache) melalui XAMPP Control Panel
5.2.2.1 Halaman Utama Halaman ini merupakan halaman utama dari Website KUA Kecamatan Lembang, halaman ini berisi menu Home, Profile, Contact Us, dan menu login untuk admin. Berikut ini merupakan tampilan Halaman Utama pada user atau pengunjung bila dijalankan pada browser Google Chrome.
75
Gambar 5.3 Tampilan Halaman Utama
5.2.2.2 Halaman Administrator Untuk dapat masuk kedalam halaman administrator, admin harus login terlebih dahulu dengan cara memilih menu untuk login. Berikut source code dan tampilan halaman login. Halaman ini terdiri dari halaman index (index.php), form input admin (login.php) dan validasi pengguna sebagai administrator (loginPeriksa.php).
76
Gambar 5.4 Tampilan Halaman Login Administrator
Form tersebut akan dicek apakah data yang dimasukkan pengguna merupakan administrator atau bukan. Halaman form ini divalidasi dengan source code program pada loginPeriksa.php. Bila admin berhasil melakukan login kedalam sistem, maka berikut tampilan administrator.
77
Gambar 5.5 Tampilan Menu pada Halaman Administrator Dalam halaman ini admin dapat melakukan berbagai pengolahan data, diantaranya Input Polling, Edit Poling, Input Berita, Edit Berita, Edit Buku Tamu, Edit Password dan Log Out. Berikut beberapa tampilan yang ada dalam halaman admin
78
Gambar 5.6 Tampilan Halaman Input Polling
Gambar 5.7 Tampilan Halaman Edit Polling
79
Gambar 5.8 Tampilan Halaman Input Berita
Gambar 5.9 Tampilan Halaman Edit Berita
80
5.2.2.3 Halaman User Halaman ini dapat diakses oleh user untuk mengetahui seputar website ini. Webpage ini pun tidak mempunyai otoritasi sehingga semua user dapat mengakses halaman tanpa melakukan login terlebih dahulu.
Gambar 5.10 Tampilan Halaman User Dalam halaman user terdapat fitur Polling, fitur ini dapat di vote oleh user atau pengunjung website, sebagai penilaian mengenai pengetahuan umum atau juga tentang website ini. Fitur ini menggunakan component poll. Berikut ini tampilan polling pada website ini.
81
Gambar 5.11 Tampilan Fitur Polling
Gambar 5.12 Tampilan Hasil Polling User juga dapat melihat halaman Profile. Yang didalamnya terdapat profil atau informasi mengenai instansi tersebut, yakni Sejarah Instansi, aktivitas kerja, struktur organisasi, visi dan misi, dan lokasi instansi berada. Berikut tampilan halaman profil.
82
Gambar 5.13 Tampilan Halaman Profil
5.3
Hasil Pengujian Table 5.2. Tabel Hasil Pengujian
No.
Kode
1
Req_WEBKUA_010
Keterangan
Hasil
Melakukan pengolahan data admin Berhasil yang ada pada halaman administrator Menyimpanan data admin hasil edit 2
Req_WEBKUA_011
Berhasil pada halaman edit admin Melakukan update atau edit admin
3
Req_WEBKUA_012
Berhasil pada halaman edit admin
83
Melakukan pengolahan data buku 4
Req_WEBKUA_020
Berhasil tamu pada halaman buku tamu Pengunjung mengis buku tamu pada
5
Req_WEBKUA_021
Berhasil halaman kontak kami Menghapus data buku tamu
6
Req_WEBKUA_022
Berhasil pengunjung pada halaman buku tamu Melakukan pengolahan data berita
7
Req_WEBKUA_030
Berhasil pada halaman berita Melakukan penambahan data berita
8
Req_WEBKUA_031
Berhasil pada halaman berita baru Menyimpan data berita yang sudah
9
Req_WEBKUA_032
ditambahkan pada halaman berita
Berhasil
baru Melakukan update atau edit data 10
Req_WEBKUA_033
Berhasil berita pada halaman edit berita Menghapus data berita pada halaman
11
Req_WEBKUA_034
Berhasil edit berita Melakukan pengolahan data polling
12
Req_WEBKUA_040
Berhasil pada halaman polling Melakukan penambahan data polling
13
Req_WEBKUA_041
Berhasil pada halaman tambah polling
84
Menyimpan data polling baru yang 14
Req_WEBKUA_042
sudah ditambahkan pada halaman
Berhasil
tambah polling Melakukan update data polling pada 15
Req_WEBKUA_043
Berhasil halaman edit polling Menghapus data polling pada
16
Req_WEBKUA_044
Berhasil halaman edit polling Melakukan voting yang dilakukan
17
Req_WEBKUA_050
Berhasil oleh user atau pengunjung User atau pengunjung dapat melihat
18
Req_WEBKUA_051
Berhasil hasil polling Melihat informasi keseluruhan
19
Req_WEBKUA_060
Berhasil website
20
Req_WEBKUA_061
Melihat informasi umum website
Berhasil
