BAB V IMPLEMENTASI DAN PENGUJIAN Berdasarkan perancangan aplikasi pada bab sebelumnya, maka dihasilkan sebuah aplikasi kiosk informasi berbasis web based. Implementasi dan pengujian merupakan langkah yang dilakukan setelah melakukan perancangan. Pada bagian implementasi akan dibahas mengenai rancangan aplikasi yang telah dibuat dan kode program yang akan diterapkan sesuai dengan proses yang ada pada diagram alur. Sedangkan untuk pengujian menggunakan metode pengujian kotak hitam (black box testing) akan dilakukan pada apa saja yang telah dibuat dan apakah sistem dapat berjalan sesuai dengan yang diinginakan. 5.1.Ruang Lingkup Implementasi Ruang lingkup tahap implementasi penelitian ini mencakup proses tahap meletakkan sistem supaya siap dioperasikan. Penulisan kode program merupakan kegiatan terbesar didalam tahap implementasi sistem. Dalam lingkungan implemetasi aplikasi ini meliputi lingkungan perangkat lunak dan perangkat lunak pendukung. 5.2.Lingkungan Perangkat Lunak Selama proses implementasi ada beberapa perangkat lunak yang digunakan. Perangkat lunak disini digunakan untuk menampilkan halaman. Untuk melakukan menampilkan halaman menggunakan perangkat lunak peramban dalam mode layar penuh (full screen).perangkat lunak yang digunakan untuk aplikasi baik dari sisi Front-End (Kiosk informasi) dan Back-end (Server) adalah : 1. Sistem operasi Windows 10 2. Xampp 30
3. Peramban 5.3.Spesifikasi Perangkat Keras Yang Digunakan 1. Perangkat keras yang digunakan untuk menguji aplikasi dari sisi Front-End (Kiosk informasi) dan Back-end (Server): 2. Proccesor Intel Core i3 3. VGA ATI Mobile Radeon HD 6470M 4. Memory 4 GB 5. Hard Drive 640 GB 6. Diplay 14 WXGA LED, Max Resolution 1366 x 768 5.4.Tampilan Antarmuka 5.4.1. Tampilan Layar (Front End) Pada Kiosk Informasi Gambar 5.1 - Tampilan Front-End selamat datang Layar selamat datang ini merupakan tampilan pertama kali dijalankan kiosk informasi Yayasan Pesantren Islam Al Azhar, terdapat 7 menu utama yaitu; 1. Home ( Selamat Datang ) 2. Map 31
3. Profile 4. Fasility 5. Event 6. Galery 7. Contac Us Pada layar Map dapat melihat denah kampus Kampus Kebayoran baru, tampilannya hanya berupa gambar sketc tanpa kelebihan apapun, beberapa indicator menerang lokasi - lokasi terkait pada kampus Kebayoran Baru dan posisi anda sekarang ( posisi dimana perangkat pendukung kiosk di tempatkan ) seperti digambar bawah ini Gambar 5.2 - Tampilan Map Pada layar Profile bagian dari profile singkat dari Yayasan Pesantren Islam Al Azhar dan visi misi Kampus Kebayoran baru, dengan menampilkan berupa teks seperti digambar bawah ini. 32
Gambar 5.3 - Tampilan Profile Pada layar fasilitas, menampilkan berapa gambar atau foto fasilitas yang ada di kampus Kebayoran Baru, seperti gambar dibawah ini. Gambar 5.4 - Tampilan Fasilitas Pada layar event, merupakan jadwal kegiatan dari beberapa unit atau stake holder khususnya kampus Kebayoran Baru, serpeti gambar di bawah ini. 33
Gambar 5.5 - Tampilan Event Pada layar galeri, merupakan kumpulan foto / gambar momen momen kegiatan belajar dan mengajar khusus untuk unit pendidikan, serpeti gambar di bawah ini. Gambar 5.6 - Tampilan Galeri Pada layar contack, merupakan daftar kontak dan email dari unit, bagian dan stake holder lainnya pada kampus Kebayoran Baru, serpeti gambar di bawah ini. 34
Gambar 5.7 - Tampilan Kontak 5.4.2. Tampilan Layar Back End Pada Kiosk Informasi Layar Login Gambar 5.8 - Tampilan Layar Login Pada tampilan ini admin memasukan password dan username terlebih dahulu untuk memperoleh akses menuju editor aplikasi kiosk informasi Yayasan Pesantren Islam Al Azhar. Setelah tombol submit ditekan, sistem akan melakukan pengecekan dari table User di database apakah username dan password yang dimasukan valid atau 35
tidak. Jika tidak valid, sistem akan meminta admin untuk memasukan kembali username dan password-nya. Jika valid, sistem akan membawa admin ke halaman panel admin utama. Gambar 5.9 - Tampilan Layar Panel Admin Utama Pada tampilan ini admin dapat memilih menu menu untuk mengubah tampilan konten. Menu menu berada pada kolom sebelah kiri. Gambar 5.10 - Tampilan Layar Editor Profile 36
Gambar 5.11 - Tampilan Layar Editor Kontak Gambar 5.12 - Tampilan Layar Editor Event 37
Gambar 5.13 - Tampilan Layar Editor Galeri Gambar 5.14 - Tampilan Layar Editor Fasilitas 38
Gambar 5.15 - Tampilan Editor Kontak 5.5.Pengujian Pada tahap ini akan menjelaskan pengujian yaitu menguji aplikasi yang telah dibangun. Pengujian mengikuti metode yang digunakan dalam penelitian ini. Sehingga tidak terjadi penyimpangan dari tujuan yang telah dibuat sebelumnya. Proses pengujian ini dilakukan dengan cara install aplikasi. Dalam hal ini saya akan menggunakan metode pengujian aplikasi blackbox. Untuk melihat apakah fungsi-fungsi pada aplikasi berjalan dengan baik atau tidak. Skenario pengujian Skenario pengujian pada perangkat lunak yaitu melakukan test case terhadap proses-proses di setiap tampilan baik disisi Front End maupun Beck End. Dari hasil test apakah aplikasi menghasilkan keluaran yang sesuai atau belum.tahapan skenario test meliputi : 5.5.1. Skenario pengujian aplikasi Kiosk Informasi (Front End) Tabel 5.1 - Pengujian aplikasi (Front End) No Item yang di uji Cara pengujian Hasil yang diharapkan 1 Tombol Menu Melakukan mengklik Menampilkan konten masing masing konten yang sesuai dengan tombol menu tujuan masing masing 39
menu 5.5.2. Skenario login Back End Aplikasi Kiosk Informasi Tabel 5.2 - Pengujian login Aplikasi Kiosk Informasi No. Item yang di uji Cara pengujian Hasil yang diharapkan 1 Mengetik tautan Masukan username Masuk ke halaman utama admin dan password Back End Aplikasi Kiosk Informasi 5.5.3. Skenario Pengujian Back End Aplikasi Kiosk Informasi Tabel 5.3 - Pengujian Back End Aplikasi Kiosk Informasi No. Item yang di uji Cara pengujian Hasil yang diharapkan 1 Tombol Menu Mengklik masing masing tombol menu Menampilkan halaman Editor konten pada tiap tiap menu. 5.5.4. Skenario Pengujian Simpan Editor Konten Tabel 5.4 - Pengujian Skenario Pengujian simpan Editor Konten No. Item yang di uji Cara pengujian Hasil yang diharapkan 1 Tombol Simpan Mengklik tombol Konten yang diubah dapat simpan terekam ke database 5.5.5. Skenario Pengujian Tambah Gambar. Tabel 5.5 - Pengujian Skenario Tambah Gambar No. Item yang di uji Cara pengujian Hasil yang diharapkan 1 Tombol Tambah Mengklik tombol Manampilkan halaman editor tambah tambah gambar 40
5.5.6. Skenario Pengujian Unggah File Gambar Tabel 5.6 - Pengujian Skenario Unggah File Gambar No. Item yang di uji Cara pengujian Hasil yang diharapkan 1 Tombol Telusuri Mengklik tombol File gambar berhasil telusuri atau tombol memilih file setelah tersimpan dan terekam nama file di database. file terpilih selanjutnya menekan tombol upload file. 5.6.Analisis Hasil Pengujian Dari hasil pengujian tersebut dapat disimpulkan, sebagai berikut : 1. Pengujian halaman login aplikasi Back End Kiosk Informasi. Form melakukan proses login masuk ke halaman admin panel Back End Aplikasi Kiosk Informasi 2. Pengujian aplikasi Kiosk Informasi (Front End). Tiap tombol menampilkan sesuai dengan kontennya masing masing. 3. Pengujian aplikasi Back End Aplikasi Kiosk Informasi. Menampilkan halaman Editor konten pada tiap tiap menu. 4. Pengujian Simpan Editor Konten. Data terekam di database, pada halaman Front End sudah sesuai data sudah terekam. 5. Pengujian Tambah Gambar. Form unggah file gambar untuk memilih file gambar. 6. Pengujian Unggah File Gambar. Sudah mampu menyimpan file gambar. 41