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
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
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.
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.
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.
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
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
Gambar 5.11 - Tampilan Layar Editor Kontak
Gambar 5.12 - Tampilan Layar Editor Event
Gambar 5.13 - Tampilan Layar Editor Galeri
Gambar 5.14 - Tampilan Layar Editor Fasilitas
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 masing – masing tombol menu
Menampilkan konten – konten yang sesuai dengan tujuan masing – masing
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
admin
Masukan username dan password
Masuk ke halaman utama 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
simpan
Konten yang diubah dapat 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
tambah
Manampilkan halaman editor tambah gambar
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
telusuri atau tombol memilih file setelah file terpilih selanjutnya menekan tombol upload file.
File gambar berhasil tersimpan dan terekam nama file di database.
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.
