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 Menu Fungsi Adminitrator Home Halaman Utama Pengguna Manajemen Modul Manajemen Administrator Mengatur modul dalam website. Mengatur Administrator dalam sistem Lihat Data KUA Logout User/Pengunjung Halaman Utama Melihat keseluruhan Data KUA Keluar dari sistem administrator. 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 Keterangan Hasil 1 Req_WEBKUA_010 2 Req_WEBKUA_011 3 Req_WEBKUA_012 Melakukan pengolahan data admin yang ada pada halaman administrator Menyimpanan data admin hasil edit pada halaman edit admin Melakukan update atau edit admin pada halaman edit admin
83 4 Req_WEBKUA_020 5 Req_WEBKUA_021 6 Req_WEBKUA_022 7 Req_WEBKUA_030 8 Req_WEBKUA_031 9 Req_WEBKUA_032 10 Req_WEBKUA_033 11 Req_WEBKUA_034 12 Req_WEBKUA_040 13 Req_WEBKUA_041 Melakukan pengolahan data buku tamu pada halaman buku tamu Pengunjung mengis buku tamu pada halaman kontak kami Menghapus data buku tamu pengunjung pada halaman buku tamu Melakukan pengolahan data berita pada halaman berita Melakukan penambahan data berita pada halaman berita baru Menyimpan data berita yang sudah ditambahkan pada halaman berita baru Melakukan update atau edit data berita pada halaman edit berita Menghapus data berita pada halaman edit berita Melakukan pengolahan data polling pada halaman polling Melakukan penambahan data polling pada halaman tambah polling
84 14 Req_WEBKUA_042 15 Req_WEBKUA_043 16 Req_WEBKUA_044 17 Req_WEBKUA_050 18 Req_WEBKUA_051 19 Req_WEBKUA_060 Menyimpan data polling baru yang sudah ditambahkan pada halaman tambah polling Melakukan update data polling pada halaman edit polling Menghapus data polling pada halaman edit polling Melakukan voting yang dilakukan oleh user atau pengunjung User atau pengunjung dapat melihat hasil polling Melihat informasi keseluruhan website 20 Req_WEBKUA_061 Melihat informasi umum website