BAB IV IMPLEMENTASI DAN PENGUJIAN. siap untuk dioperasikan. Dalam implementasi pembuatan website Anbiyapedia ini

Transkripsi

1 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: 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 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

2 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 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.

3 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

4 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

5 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 yang dimasukan oleh user. Tergambar dalam tabel 4.9 di bawah ini.

6 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

7 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 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

8 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

9 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

10 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

11 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

12 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

13 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.

14 104 Gambar 4.25 Halaman control panel untuk Update Mutiara Kata 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.

15 105 Gambar 4.26 Halaman Beranda b. Daftar menu Gambar 4.27 Daftar menu

16 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

17 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.

18 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

19 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, , 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

20 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

21 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

22 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

23 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

24 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 kode programnya dapat dilihat pada lampiran kode program D9. Gambar 4.46 Tampilan Permainan Konten Animasi Interaktif

25 Pengujian Sistem Pengujian pada Antarmuka Halaman Belakang (back-end) a. Uji Beranda Control Panel Tabel 4.1 Uji Beranda Control Panel Kode Skenario Hasil Sukses Gagal Keterangan req1 req1 req1 Login dengan username dan password yang benar Login dengan username dan password yang salah Mengisi form login dengan data kosong kemudian submit 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 Skenario Hasil Sukses Gagal Keterangan req3-req8 Klik semua menu Berhasil dibuka req3-req8 Klik semua link Berhasil berpindah halaman c. Uji kelola isi konten (insert, update, dan delete) Tabel 4.3 Uji kelola isi konten halaman Kode Skenario Hasil Sukses Gagal Keterangan req4-req8 Memasukan data baru Berhasil tersimpan req4-req8 Mengubah data yang Berhasil diubah sudah ada req4-req8 Menghapus data Berhasil terhapus

26 116 d. Uji masukan dari keyboard halaman back-end Tabel 4.4 Uji masukan dari keyboard Kode req4- req8 req4- req8 req4- req8 req4- req8 req4- req8 Skenario 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) Hasil Sukses Gagal 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? Hasil Sukses Gagal Keterangan Terkirim ke 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 Keterangan req1 req2 req2 Klik semua button Memasukan Jawaban yang Benar Memasukan jawaban yang salah Berhasil dibuka dan berpindah halaman Ada pesan berhasil, lalu lanjut Ada pesan kesalahan, kuis jadi random

27 117 b. Uji halaman konten web Tabel 4.7 Uji halaman konten web Kode Skenario Hasil Sukses Gagal Keterangan req3-req8 Klik semua menu Berhasil dibuka req3-req8 Klik semua link 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 req4- req8 req4- req8 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