BAB IV IMPLEMENTASI DAN PENGUJIAN Pengujian aplikasi website Fontana Perkasa Motor ini dilakukan dengan mencoba semua fitur masing masing tingkatan pengguna. Untuk melakukan pengujian digunakan komputer dengan sistem operasi Windows XP dan sudah dinstalasi dengan WampServer2.0C, Adobe Flash 8, MySQL 5.5, dan PHP 5.3.6 sebagai media perancangan dan pembuatan. Kemudian untuk web browser digunakan Mozilla Firefox 4.0. Untuk sementara website dapat diakses melalui localhost. Aplikasi web ini terdiri atas 2 bagian dimana bagian pertama adalah website guest dan dapat diakses oleh siapa saja. Kemudian bagian kedua adalah website admin, yang hanya dapat diakses oleh administrator website. 4.1 Pengujian Proses untuk Front End 4.1.1 Perancangan Layar Pembuka (Intro) Saat membuka web pertama kali akan muncul intro dari PT FONTANA PERKASA MOTOR. Untuk pengguna biasa atau guest dapat mengklik home atau skip untuk masuk ke halaman website. Pengguna admin website dapat mengklik login untuk masuk kehalaman berikutnya dengan cara mengisi username dan password. Pengguna biasa juga dapat mengklik login, namun tidak dapat masuk ke halaman khusus admin. Terdapat button skip jika pengguna ingin langsung menuju halaman awal website.
Gambar 4.1 Tampilan Intro Fontana Perkasa Motor 4.1.2 Pengujian Layar Menu Utama Pada layar ini terdapat beberapa button, yaitu button contacts, creation, privacy policy dan volume untuk mengatur volume. Gambar 4.2 Tampilan Halaman Utama Website
4.1.3 Pengujian Layar Contact Pada layar ini pengunjung dapat mengirimkan pesan, saran dan kritik pada feedback. Untuk mengirim feedback pada PT FONTANA PERKASA MOTOR, pengunjung harus mengisi nama pada kolom dibawah tulisan name, email pada kolom di bawah tulisan e-mail dan pesan, saran atau kritik pada kolom di bawah tulisan comment lalu klik button submit. Untuk membersihkan tulisan pada feedback, pengunjung dapat klik button reset. Gambar 4.3 Tampilan Halaman Contact Berikut akan dilakukan pengujian seperti pada gambar 4.4 yang ketika pengguna menekan button submit menyebabkan daftar pengirim feedback telah bertambah seperti pada gambar 4.5. Sedangkan jika pengguna tidak memasukkan nama email dengan benar akan muncul warning email harus valid.
Gambar 4.4 Tampilan Pengisian Contact Gambar 4.5 Tampilan Hasil Pengisian Contact 4.1.4 Pengujian Layar About Us Jika memilih tombol creation, maka secara langsung pengunjung akan masuk pada layar About Us. Pada layar ini menjelaskan tentang PT FONTANA PERKASA MOTOR dengan berupa teks, dan juga foto gedung, para staff di PT FONTANA PERKASA MOTOR.
Gambar 4.6 Tampilan Halaman About Us 4.1.5 Pengujian Layar Gallery Pada layar ini terdapat list foto/gambar yang berbentuk pilihan. Jika salah satu dipilih (klik), maka akan muncul gambar sesuai dengan pilihannya. Pengguna dapat memilih besar dari gambar. Gambar 4.7 Tampilan Halaman Gallery 4.1.6 Pengujian Layar Services
Pada layar Services, pada sisi halaman web sebelah kanan pengguna dapat melihat pelayanan yang disediakan oleh PT FONTANA PERKASA MOTOR dan pada sebelah kiri, pengguna dapat melihat berita yang disediakan oleh web. Saat mengklik selengkapnya, berita akan ditampilkan secara utuh.. Gambar 4.8 Tampilan Halaman Services 4.1.7 Pengujian Layar Privacy Gambar 4.9Policy Tampilan Halaman Berita/News
Layar ini menjelaskan privacy policy dari web ini. Pada layar ini terdapat Logo PT FONTANA PERKASA MOTOR di bagian bawah layar. Gambar 4.10 Tampilan Halaman Privacy Policy 4.2 Pengujian Proses untuk Back End 4.2.1 Pengujian Layar Login Layar ini digunakan admin website untuk masuk ke layar tertentu yang berhubungan dengan isi web. Pada layar ini terdapat dua tombol, yaitu submit dan reset. Button submit digunakkan untuk menvalidasikan username dan password yang ditulis oleh user pada kolom di sebelah teks username dan password. Jika username dan passwordnya benar, maka user dapat lanjut ke layar berikutnya, tetapi bila tidak user akan tetap di layar ini. Sedangkan button reset untuk membersihkan tulisan user yang ada.
Gambar 4.11 Tampilan Halaman Login Untuk menguji button yang telah dibuat berfungsi atau tidak akan dilakukan pengujian Login. Dalam textbox username akan dimasukkan username yang telah terdaftar yaitu Adi dengan password tanabe, maka akan menghasilkan halaman sebagai berikut : Gambar 4.12 Tampilan Halaman User yang telah Login
4.2.2 Pengujian Layar Edit Profile Pada halaman Edit profile ada daftar pengguna yang mempunyai hak akses tertentu. Terdapat 3 button yaitu button Add untuk menambah Username baru, button Edit untuk mengubah mengubah username, password atau keduanya sesuai dengan username dan password baru, dan button Delete untuk menghapus Username tertentu.. Gambar 4.13 Tampilan Halaman Edit Profile Pengujian button Add akan diisikan username baru yaitu afgan dengan username 123456 yang akan mengakibatkan pertambahan jumlah username yang berhak masuk ke halaman tertentu seperti pada gambar 4.11. Pengujian button Edit akan dilakukan untuk mengedit password yang bernama afgan menjadi 654321 kemudian dilakukan pengujian login dengan menggunakan password yang lama akan mengakibatkan action seperti pada gambar 4.12. Sedangkan pengujian untuk button delete, akan dilakukan penghapusan atas username yang bernama afgan yang mengakibatkan username yang bernama afgan sudah tidak terdaftar di website Fontana Perkasa Motor ini.
Gambar 4.14 Tampilan Add username Gambar 4.15 Tampilan Re-Login Ganti Password Gambar 4.16 Tampilan Delete Profile
4.2.3 Pengujian Layar Edit News Pada halaman Edit News, pengguna langsung disajikan daftar news yang sudah dimasukkan sebelumnya. Terdapat 3 button didalamnya yaitu Button Add untuk menambah news, button Edit untuk mengubah isi dari news yang sudah dimasukkan sebelumnya, dan button delete untuk menghapus berita yang sudah dimasukkan. Gambar 4.17 Tampilan Halaman Edit News 4.2.4 Pengujian Layar Update/Delete News Pada halaman Button Add, terdapat form ID Berita, Judul Berita, Isi berita dan tanggal berita. Jika Admin telah selesai memasukkan data berita, admin dapat menyimpannya dengan menggunakan button Save..
- Gambar 4.18 Tampilan Halaman Update, Delete, Edit News Untuk menguji edit news akan dilakukan pengisian seperti pada gambar 4.16. Khusus untuk ID Berita, akan terisi otomatis saat melakukan penambahan berita. Hasil pengujian dapat dilihat pada gambar 4.17. Sedangkan bila admin akan menghapus berita dapat menggunakan button delete yang menyebabkan berita terhapus dari database. Gambar 4.19 Tampilan Pengisian Edit News
Gambar 4.20 Tampilan Hasil dari Edit News 4.2.5 Pengujian Layar Edit Gambar Pada layar upload gambar terdapat textbox untuk memberikan keterangan pada gambar dan kotak browse untuk mengambil gambar dari drive komputer. Terdapat button Upload untuk gambar yang siap di publish.. Gambar 4.21 Tampilan Halaman Edit Gambar 4.2.6 Pengujian Layar Update/Delete Gambar Pada layar Edit Gambar terdapat daftar gambar yang sudah dimasukkan sebelumnya. Terdapat button Add untuk menambahkan gambar beserta dengan keterangannya dan Delete untuk menghapus gambar yang telah dimasukkan.
Gambar 4.22 Tampilan Halaman Update/Delte Gambar 4.2.7 Pengujian Layar Edit Feedback Pada layar Edit Feedback terdapat 2 button button yaitu Button edit untuk mengedit feedback dan Button Delete untuk mendelete feedback yang telah masuk. Gambar 4.23 Tampilan Halaman Edit Feedback
4.3 Pengujian Database 4.3.1 Database MsAdmin.Database MsAdmin adalah database untuk menyimpan username dan password dari admin yang terdaftar. Setiap ada perubahan pada nama dan password admin akan terlihat perubahannya. Terlihat pada gambar 4.25 bahwa jumlah admin yang terdaftar pada database ada 2 orang berikut dengan passwordnya. Kode_admin terisi otomatis saat menginput username. Gambar 4.24 Tampilan Halaman Database MsAdmin Gambar 4.25 Tampilan isi Database MsAdmin 4.3.2 Database MsNews Database MsNews adalah database untuk menyimpan data pada halaman service. Setiap ada perubahan baik itu penambahan berita atau edit akan masuk ke
database ini. Pada gambar 4.27 terlihat isi berita yang sudah dimasukkan terlebih dahulu. Kode_news terisi otomatis saat penginputan berita. Gambar 4.26 Tampilan Halamn Database MsNews Gambar 4.27 Tampilan isi Database MsNews 4.3.3 Database MsGambar Database MsGambar adalah database untuk menyimpan data pada halaman gallery. Setiap ada perubahan baik itu penambahan berita atau edit akan masuk ke database ini. Kode_gambar akan terisi otomatis saat penginputan gambar. Terlihat pada gambar 4.29 terdapat beberapa gambar yang telah dimasukkan oleh admin.
Gambar 4.28 Tampilan Halaman Database MsGambar Gambar 4.29 Tampilan Isi Database MsGambar 4.3.4 Database MsFeedback Database MsFeedback adalah database untuk menyimpan data pada halaman Contact Us. Setiap tamu yang masuk dan mengisi isi feedback dapat terlihat dan masuk ke database ini.
Gambar 4.30 Tampilan Halaman Database MsFeedback Gambar 4.31 Tampilan Isi Database MsFeedback