91
BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1
Implementation (Implementasi) Tahap implementasi sistem ini merupakan tahap meletakan sistem supaya
siap untuk dioperasikan. Dalam implementasi pembuatan website Anbiyapedia ini ada beberapa tahapan implementasi sistem yang harus dijalankan diantaranya adalah: 4.1.1 Lingkungan Implementasi Lingkungan yang digunakan dalam implementasi Tugas Akhir ini adalah sebagai berikut: 1. Persiapan Perangkat lunak (software) Perangkat lunak yang digunakan untuk pembuatan aplikasi dalam Tugas Akhir ini adalah dengan sebagai berikut: a. Notepad++ atau Notepad untuk menulis bahasa pemograman PHP, HTML, CSS, dan JavaScript. b. Implementasi basisdata menggunakan MySQL dan bahasa pemograman PHP dengan XAMPP 1.7.1 sebagai web servis localhost c. Pembuatan animasi serta actionscript menggunakan Macromedia Flash 8 d. Foto editor menggunakan Adobe Photoshop CS3 e. Web Browser menggunakan Google Chrome f. Paint untuk memotong image
92
2. Persiapan perangkat keras ( hardware ) Kebutuhan perangkat keras yang diperlukan untuk implementasi pembuatan website Anbiyapedia ini adalah sebagai berikut: a. CPU dengan processor Intel® Pentium® dual-core T4200 @ 2.00 GHz, Memori 1024 MB. b. Harddisk dengan kapasitas penyimpanan data 250 Gbyte. c. Monitor d. Keyboard dan Mouse. 4.2 Implementasi Basis Data Berikut ini gambar daftar tabel-tabel dalam database yang merupakan hasil implementasi perancangan dan analisis data. Dapat dilihat pada gambar 4.1 tabel database anbiyapedia:
Gambar 4.1 Tabel database anbiyapedia a. Tabel Admin Merupakan tabel data yang menampung data admin yang dapat mengatur aktivitas aliran data yang masuk dan keluar pada website mau pun yang akan disebarkan ke publik. Dapat dilihat pada gambar tabel 4.2 dibawah ini.
93
Gambar 4.2 Tabel Admin b. Tabel Konten Statis/Menu Statis Merupakan tabel yang berisi menu statis seperti riwayat ringkas, lafadzku, cerita islami, sifat Allah, nama Malaikat, hikmah, tips, dan tentang kami. Dapat dilihat pada gambar tabel 4.3 dibawah ini.
Gambar 4.3 Konten statis/ Menu statis c. Tabel Pengumuman Merupakan tabel yang akan diisi oleh pengumuman yang berhubungan dengan aplikasi ini. Untuk lebih jelasnya dapat dilihat pada tabel 4.4 di bawah ini.
Gambar 4.4 Pengumuman
94
d. Tabel Berita Merupakan tabel yang berisi data berita dan informasi baik dari luar mau pun dari dalam yang berkaitan dengan Kisah Para nabi atau pun yang dirasa perlu untuk dipublikasikan. Berikut hasilnya dapat dilihat pada gambar 4.5 tabel berita dibawah ini :
Gambar 4.5 Tabel Berita e. Tabel Kategori Merupakan tabel yang berisi nama-nama kategori yang nantinya akan berhubungan dengan tabel artikel dan berita. Dapat dilihat pada tabel 4.6 dibawah ini.
Gambar 4.6 Tabel Kategori
95
f. Tabel Galeri do`a Merupakan tabel yang berisi do`a yang berbentuk gambar (image). Untuk lebih jelasnya dapat dilihat pada tabel 4.7 dibawah ini.
Gambar 4.7 Tabel Galeri do`a g. Tabel Foto Do`a Merupakan tabel yang berisi gambar (image) doa dan suara (rekaman) dari do`a-do`a tersebut. Untuk lebih jelasnya dapat dilihat pada tabel 4.8 di bawah ini.
Gambar 4.8 Tabel Foto Do`a h. Tabel Pesan Merupakan tabel yang akan menyimpan pesan yang dikirim oleh user, kemudian admin akan melakukan reply dari email yang dimasukan oleh user. Tergambar dalam tabel 4.9 di bawah ini.
96
Gambar 4.9 Tabel Pesan i. Tabel Mutiara (Kata Mutiara) Merupakan tabel yang beisi kata-kata mutiara. Tergambar dalam tabel 4.10 di bawah ini.
Gambar 4.10 Tabel Mutiara j. Tabel Artikel Merupakan tabel yang berisi data artikel yang dimasukan oleh members pada halaman sharing. Berikut hasilnya dapat dilihat pada gambar tabel 4.11 dibawah ini :
Gambar 4.11 Tabel Artikel
97
k. Tabel Banner Merupakan tabel yang berisi banner yang dapat ngelink sesuai denga alamat url nya. Untuk lebih jelasnya ada pada tabel 4.11 dibawah ini.
Gambar 4.12 Tabel Banner 4.3 Implementasi Antarmuka 4.3.1 Implementasi Antarmuka Halaman Belakang (back-end) a. Halaman Login Halaman login ini merupakan tempat untuk memasukan username dan password bagi admin dan sub admin untuk dapat masuk ke dalam halaman kontrol panel website Anbiyapedia. Tampilannya terlihat seperti pada Gambar 4.13 di bawah ini, dan kode programnya terlampir pada lampiran kode program A1
Gambar 4.13 Halaman Login
98
b. Halaman utama control panel Halaman utama control panel untuk admin utama dan sub admin memiliki menu content yang berbeda karena memiliki hak akses yang berbeda pula. Tampilannya terlihat seperti pada Gambar 4.14 dan Gambar 4.15 di bawah ini, dan kode programnya dapat dilihat pada lampiran kode program B1.
Gambar 4.14 Halaman utama control panel untuk admin utama
Gambar 4.15 Halaman utama control panel untuk sub admin
99
c. Halaman control panel untuk konten statis Karena content static/ menu statis tidak dapat ditambah dan dihapus, maka halaman ini memberikan akses untuk mengubah/update isi dari menu tersebut. Yang termasuk content static adalah menu Riwayat Ringkas, Lafadzku, Cerita Islami, Sifat Allah, Nama Malaikat, Hikmah, Kontak Kami dan Tips. Sebagai contohnya adalah halaman pada menu Riawayat Ringkas sebagai berikut. Tampilannya terlihat seperti pada Gambar 4.16 di bawah ini, dan kode programnya dapat dilihat pada lampiran kode program B3.
Gambar 4.16 Halaman control panel untuk konten statis
100
d. Halaman control panel untuk konten dinamis Isi pada content dynamic/menu dinamis ini dapat ditambah, dihapus, dan diubah maka halaman ini memberikan akses untuk melakukan itu.
Yang
termasuk content dynamic adalah menu Galeri do`a, Photo Do`a, Pengumuman, Berita dan Artikel. Sebagai contohnya adalah halaman pada menu pengumuman sebagai berikut. Tampilannya terlihat seperti pada Gambar 4.17, Gambar 4.18, Gambar 4.19 kode programnya dapat dilihat pada kode program B4.
Gambar 4.17 Halaman control panel untuk konten dinamis
Gambar 4.18 Halaman control panel untuk tambah isi pada konten dinamis
101
Gambar 4.19 Halaman control panel untuk update isi pada konten dinamis e. Halaman control panel untuk menu Pesan Halaman ini menampilkan pesan yang masuk dari pengunjung. Admin bisa melakukan balas pesan dan hapus pesan yang masuk. Tampilannya terlihat seperti pada Gambar 4.20 dan Gambar 4.21, kode programnya dapat dilihat pada lampiran kode B4.
Gambar 4.20 Halaman control panel untuk Pesan
102
Gambar 4.21 Halaman control panel untuk Balas Pesan f. Halaman control panel untuk Admin Halaman ini menampilkan daftar admin/user website control panel. Pada halaman ini dapat dilakukan tambah, update dan delete sub admin oleh admin utama. Tampilannya terlihat seperti pada Gambar 4.22, Gambar 4.23, Gambar 4.24 kodenya programnya dapat dilihat pada lampiran kode program B3.
Gambar 4.22 Halaman control panel untuk Admin
103
Gambar 4.23 Halaman control panel untuk Tambah Admin
Gambar 4.24 Halaman control panel untuk Edit Admin g. Halaman control panel untuk Mutiara Kata Halaman ini berisi mutiara kata yang akan ditampilkan didalam website. Pada halaman ini hanya dapat dilakukan update isi oleh admin utama. Tampilannya terlihat seperti pada Gambar 4.25 berikut, untuk kode programnya dapat dilihat pada lampiran kode program B4.
104
Gambar 4.25 Halaman control panel untuk Update Mutiara Kata 4.3.2
Implementasi Antarmuka Halaman Depan (front-end)
a. Halaman Index dan Halaman Beranda Halaman ini adalah halaman yang akan pertama kali tampil ketika pengunjung/user masuk ke alamat website Anbiyapedia tampilannya terlihat seperti pada Gambar 4.26 di bawah ini, untuk kode programnya dapat dilihat pada lampiran kode program C1. Sedangkan untuk Gambar 4.27, 4.28, 4.29, 4.30 kode program dapat dilihat pada lampiran kode program C2.
105
Gambar 4.26 Halaman Beranda b. Daftar menu
Gambar 4.27 Daftar menu
106
Gambar 4.28 Sub menu Pengetahuan
Gambar 4.29 Sub menu Informasi
Gambar 4.30 Sub menu Kontak c. Halaman untuk konten statis Yang termasuk konten statis adalah menu Pengetahuan. Sebagai contohnya adalah halaman pada sub menu Riwayat Ringkas sebagai berikut. Tampilannya terlihat seperti pada Gambar 4.31 di bawah ini, untuk kode programnya dapat dilihat pada lampiran kode program C2.
Gambar 4.31 Halaman konten statis untuk sub menu Riwayat Ringkas
107
d. Halaman untuk konten dinamis Yang termasuk content dynamic adalah menu Galeri do`a, Photo Do`a, Pengumuman, Berita dan Artikel. Sebagai contohnya adalah halaman pada menu Berita sebagai berikut. Tampilannya terlihat seperti pada Gambar 4.32 di bawah ini, dan kode programnya dapat dilihat pada lampiran kode program C2.
Gambar 4.32 Halaman konten dinamis untuk menu Berita Untuk melihat isi lengkap dari berita yang disajikan, pengunjung bisa klik “Selanjutnya” atau klik pada judul berita. Tampilannya terlihat seperti pada Gambar 4.33 berikut. Dan kode programnya dapat dilihat pada lampiran kode program C2.
108
Gambar 4.33 Halaman konten dinamis untuk detail Berita e. Halaman untuk menampilkan Galeri Do`a Sebelum melihat galeri do`a pengunjung harus memilih terlebih album do`a yang akan dilihat, dengan klik judul album. Tampilannya terlihat seperti pada Gambar 4.34 dan Gambar 4.35 di bawah ini, dan kode programnya dapat dilihat pada lampiran kode program C2.
Gambar 4.34 Halaman untuk menampilkan Daftar Album
109
Gambar 4.35 Halaman untuk menampilkan Galeri Do`a f. Halaman Kirim Pesan Untuk mengirimkan pesan komentar, saran atau meminta informasi lain kepada Anbiyapedia. Pengunjung memasukan identitas pesan berupa nama, email, dan subjek, dan isi pesan. Tampilannya terlihat seperti pada Gambar 4.36 di bawah ini, untuk kode programnya terlampir pada lampiran kode program C3.
Gambar 4.36 Halaman untuk Kirim Pesan
110
g. Konten untuk pencarian informasi berita Pengunjung bisa melakukan pencarian terhadap informasi berita yang dicarinya, dengan memasukan kata kunci dari berita yang akan dicari. Tampilannya terlihat seperti pada Gambar 4.37 di bawah ini, dan kode programnya terlampir pada lampiran kode program C4.
Gambar 4.37 Tampilan untuk konten pencarian berita h.
Konten Animasi Menu inilah yang menjadi konten utama dalam pembelajaran interaktif.
Terdapat beberapa menu dalam konten animasi ini, diantaranya adalah sebagai berikut: 1. Menu Tampilan / Top up Berikut ini adalah menu tampilan pada konten interaktif. Tampilannya terlihat seperti pada Gambar 4.38 Tampilan home/ beranda/ top up, kode programnya dapat dilihat pada lampiran kode program D1.
Gambar 4.38 Tampilan home/ beranda Konten Animasi Interaktif
111
2. Tampilan layar pembuka (standby) konten animasi pada Gambar 4.39 kode programnya dapat dilihat pada lampiran kode program D2.
Gambar 4.39 Tampilan Layar Pembuka Konten Animasi Interaktif 3. Tampilan menu konten animasi pada Gambar 4.40 kode programnya dapat dilihat pada lampiran kode program D3.
Gambar 4.40 Tampilan Menu Konten Animasi Interaktif
112
4. Tampilan anbiyapedia konten animasi pada Gambar 4.41 kode programnya dapat dilihat pada lampiran kode program D4.
Gambar 4.41 Tampilan anbiyapedia Konten Animasi Interaktif 5. Tampilan menu bernyanyi konten animasi pada Gambar 4.42 kode programnya dapat dilihat pada lampiran kode program D5.
Gambar 4.42 Tampilan Bernyanyi Konten Animasi Interaktif
113
6. Tampilan menu kalkulator konten animasi pada Gambar 4.43 kode programnya dapat dilihat pada lampiran kode program D6.
Gambar 4.43 Tampilan Kalkulator Sederhana Konten Animasi Interaktif 7. Tampilan menu al-imtihan konten animasi pada Gambar 4.44 kode programnya dapat dilihat pada lampiran kode program D7.
Gambar 4.44 Tampilan Al-Imtihan Konten Animasi Interaktif
114
8. Tampilan menu menonton konten animasi pada Gambar 4.45 kode programnya dapat dilihat pada lampiran kode program D8.
Gambar 4.45 Tampilan Menonton Konten Animasi Interaktif 9. Tampilan menu bermain
konten animasi pada Gambar 4.46
programnya dapat dilihat pada lampiran kode program D9.
Gambar 4.46 Tampilan Permainan Konten Animasi Interaktif
kode
115
4.4 Pengujian Sistem 4.4.1
Pengujian pada Antarmuka Halaman Belakang (back-end)
a. Uji Beranda Control Panel Tabel 4.1 Uji Beranda Control Panel Kode
Skenario
req1
Login dengan username dan password yang benar Login dengan username dan password yang salah
req1
req1
Mengisi form login dengan data kosong kemudian submit
Hasil
Keterangan
Sukses Gagal √ √ √
User berhasil masuk ke halaman CP Ada pesan kesalahan, user tidak bisa masuk Ada pesan kesalahan, user tidak bisa masuk
b. Uji halaman konten control panel Tabel 4.2 Uji halaman konten control panel Kode req3-req8 req3-req8
Skenario Klik semua menu Klik semua link
Hasil Sukses Gagal √ √
Keterangan Berhasil dibuka Berhasil berpindah halaman
c. Uji kelola isi konten (insert, update, dan delete) Tabel 4.3 Uji kelola isi konten halaman Kode
Skenario
req4-req8 req4-req8
Memasukan data baru Mengubah data yang sudah ada Menghapus data
req4-req8
Hasil Keterangan Sukses Gagal √ Berhasil tersimpan Berhasil diubah √ √
Berhasil terhapus
116
d. Uji masukan dari keyboard halaman back-end Tabel 4.4 Uji masukan dari keyboard Kode
Hasil Sukses Gagal
Skenario
req4req8 req4req8 req4req8 req4req8 req4req8
Memasukan angka terhadap data dengan tipe angka Memasukan huruf terhadap data dengan tipe angka Memasukan huruf terhadap data dengan tipe huruf Memasukan angka terhadap data dengan tipe huruf Memasukan huruf dan angka terhadap data dengan tipe huruf dan angka (character)
Keterangan
√
Bisa tampil angka
√
Huruf tidak bisa tampil Bisa tampil huruf
√ √ √
Angka tidak bisa tampil Huruf dan angka bisa tampil
e. Uji balas pesan Tabel 4.5 Uji balas pesan Kode
Skenario
req8.2 Mengirim balasan pesan yang masuk, terkirim atau tidak? 4.4.2
Hasil Sukses Gagal √
Keterangan Terkirim ke email pengunjung
Pengujian pada Antarmuka Halaman Depan (front-end)
a. Uji halaman konten Animasi Tabel 4.6 Uji halaman konten animasi Kode
Skenario
Hasil Sukses Gagal
req1
Klik semua button
√
req2
Memasukan Jawaban yang Benar Memasukan jawaban yang salah
√
req2
√
Keterangan Berhasil dibuka dan berpindah halaman Ada pesan berhasil, lalu lanjut Ada pesan kesalahan, kuis jadi random
117
b. Uji halaman konten web Tabel 4.7 Uji halaman konten web Kode req3-req8 req3-req8
Skenario Klik semua menu Klik semua link
Hasil Sukses Gagal √ √
Keterangan Berhasil dibuka Berhasil berpindah halaman
c. Uji kirim pesan Tabel 4.8 Uji kirim pesan Kode
Skenario
req8.2 Mengirim pesan, terkirim atau tidak?
Hasil Sukses Gagal √
Keterangan Terkirim pesan ke kotak masuk CP
d. Uji masukan dari keyboard halaman front-end Tabel 4.9 Uji masukan dari keyboard halaman front-end Kode req4req8 req4req8
Skenario Memasukan angka terhadap data dengan tipe huruf Memasukan huruf dan angka terhadap data dengan tipe huruf dan angka (character)
Hasil Sukses Gagal √ √
Keterangan Tidak bisa tampil angka Huruf dan angka bisa tampil
