BAB IV IMPLEMENTASI DAN PENGUJIAN Tahap perancangan dalam pembuatan program merupakan suatu hal yang sangat penting, karena didalam perancangan tersebut terdapat elemen-elemen yang mewakili isi atau content didalamnya. Arsitektur dalam perancangan website harus memiliki konstruksi yang baik, proses pengolahan data yang tepat dan akurat mempunyai nilai tersendiri dan memiliki dasar-dasar untuk pengembangan sistem selanjunya. Dasar dari sebuah sistem haruslah mudah dipahami, sehingga user dapat menangkap informasi yang disajikan. Pemrogram sebaiknya jangan terlalu cepat mengambil keputusan dalam merancang / menyusun arsitektur program yang dibuat, supaya hasil yang didapat sesuai dengan harapan. Untuk Menjalankan program website Ukm Mercu Buana, menggunakan PHP, MySQL, maka diperlukan sebuah Web Server yang akan digunakan sebagai tempat penyimpanan program. Web Server yang akan digunakan berupa Appserv, atau program Web Server lain yang mendukung program PHP minimal versi 4.0.5 dan MySQL minimal versi 3.23 sebagai database Server. Untuk memulai program, jalankan browser seperti Internet Explorer, Mozilla Firefox atau Nestcape. Ketikkan alamat http:/nama-server/path-folder/. Nama-server adalah nama server tempat program disimpan. Gambar dibawah ini adalah tampilan versi PHP yang digunakan. 79
4.1 Alur Program 1. Halaman Awal (Home), menampilkan informasi atau berita, baik itu informasi mengenai kegiatan yang telah dilaksanakan atau informasiinformasi yang berkaitan dengan unit kegiatan mahasiswa 2. Halaman unit kegiatan mahasiswa, informasi mengenai ukm yang ada di Universitas Mercu Buana. 3. Halaman Prestasi Ukm, informasi mengenai prestasi mahasiswa UMB yang telah meraih medali. 4. Halaman Galeri Foto, informasi mengenai foto-foto kegiatan mahasiswa/i yang mengikuti kegiatan kemahasiswaan. 5. Halaman Informasi, menampilkan informasi & berita umum. 6. Halaman Calender Event, menampilkan menu Kalender kegiatan ukm 7. Halaman Message Board, menampilkan form message board 8. Halaman Member, menampilkan form daftar member ukm 9. Halaman Kritik & Saran, menampilkan form kritik & saran untuk masing- masing ukm Mercu Buana 10. Halaman Polling, menampilkan menu polling 11. Halaman Menu Link, Menampilkan menu link kepada pengunjung.
4.2 Desain dan Tampilan Halaman 1. Layar Halaman Awal (Home) Gambar 4.1 Layar Halaman Awal (Home) Ini merupakan halaman awal (home) yang merupakan halaman informasi utama. 2. Layar Halaman Unit Kegiatan Mahasiswa Gambar 4.2 Layar Halaman Unit Kegiatan Mahasiswa Ini merupakan halaman Unit Kegiatan Mahasiswa yang merupakan halaman Ukm Mercu Buana, yang terdiri dari:
a. Ukm Sepakbola b. Ukm Karate c. Ukm Teater d. Ukm Panjat Tebing e. Ukm Merpati Putih f. Ukm Tae Kwon Do g. Ukm Paduan Suara h. Ukm Radio Mahasiswa i. Ukm Basket j. Ukm Resimen Mahasiswa 3. Layar Halaman Prestasi Mahasiswa Gambar 4.3 Layar Halaman Prestasi Mahasiswa Ini merupakan halaman prestasi mahasiswa yang merupakan halaman informasi mengenai prestasi mahasiswa.
4. Layar Halaman Galeri Foto Ukm Gambar 4.4 Layar Halaman Galeri Foto Ukm Ini merupakan halaman galeri foto yang merupakan halaman informasi mengenai Galeri Foto Ukm yang terdiri dari : 5. Layar Halaman Informasi Gambar 4.5 Layar Halaman Informasi Ini merupakan halaman informasi yang merupakan halaman informasi mengenai Informasi Ukm terdiri dari :
6. Layar Halaman Calender Event Gambar 4.6 Layar Halaman Calender Event Ini merupakan halaman kalender yang merupakan halaman informasi mengenai Calender Event. 7. Layar Halaman Message Board Gambar 4.7 Layar Halaman message Board Ini merupakan halaman message board yang merupakan halaman bagi pengunjung yang ingin memberikan pesan singkat.
8. Layar Halaman Member Gambar 4.8 Layar Halaman Member Ini adalah halaman yang dituju ketika mengklik Link Member. Kita mengisi form yang akan disimpan ke database. Di dalam form pengisian Member ini terdapat : a. User id adalah Nama id b. Password adalah Password pengunjung c. Nama adalah Nama pengunjung d. Alamat adalah Alamat / Tempat tinggal pengunjung e. Jurusan adalah Calon member kuliah di jurusan apa f. E-mail adalah E-mail pengunjung g. Telepon adalah Telepon dari pengunjung h. Sex adalah Jenis Kelamin (Pria atau Wanita) i. Tempat Lahir adalah Tempat lahir pengunjung j. Tanggal Lahir adalah Tanggal lahir pengunjung k. Jenis Ukm adalah Pilih mendaftar di Ukm apa l. Tombol Daftar adalah Untuk mendaftar, data masuk ke database
9. Layar Halaman Kritik & Saran Gambar 4.9 Layar Halaman Kritik & Saran Ini adalah halaman yang dituju ketika mengklik Link Kritik & Saran. Kita mengisi form yang akan disimpan ke database. Di dalam form pengisian Kritik & Saran ini terdapat : a. Nama adalah nama pengunjung b. E-mail adalah E-mail pengunjung c. Untuk UKM adalah komentar yang diisi oleh pengunjung yang ditujukan untuk ukm yang ingin dikomentari d. Pesan adalah isi dari komentar pengunjung e. Kirim adalah mengirimkan komentar ke dalam database f. Tombol Reset adalah membatalkan pengisian form g. Tampilkan adalah menampilkan data pengunjung yang telah memberikan komentar
10. Layar Halaman Polling Gambar 4.10 Layar Halaman Polling Ini merupakan halaman polling yang merupakan halaman Polling pilihan yang terdiri dari : a. Pilihan Sangat Bagus b. Pilihan Bagus c. Pilihan Cukup Bagus d. Pilihan Kurang Bagus e. Pilihan Tidak Bagus
11. Layar Halaman Menu Link Gambar 4.11 Layar Halaman Menu Link Ini merupakan halaman Menu Link, yang terdiri dari : a. www.kompas.com b. www.google.com c. www.plasa.com d. www.facebook.com e. www.yahoo.com
12. Halaman Admin, sebuah form untuk menginput dan merubah data pada database yang hanya bisa dilakukan oleh administrator atau pembuat website. Berikut ini adalah tampilan menu yang ada pada admin : Gambar 4.12 Tampilan Login Halaman Admin 13. Layar Tampilan Menu Admin Gambar 4.13 Tampilan Menu Admin
14. Layar Tampilan Ubah Password Gambar 4.14 Tampilan Ubah Password 15. Layar Tampilan Password Setelah Diganti Gambar 4.15 Tampilan Password Admin Setelah Dirubah
16. Layar Tampilan Data Kritik & Saran Gambar 4.16 Tampilan Data Kritik & Saran 17. Layar Tampilan Data Polling Pilihan Gambar 4.17Tampilan Data Polling Pilihan
18. Layar Tampilan Data Message Board Gambar 4.18 Tampilan Data Message Board 4.3 Metode Pengujian Ada 2 metode untuk malakukan unit testing, yaitu Black Box Testing dan White Box Testing. Black Box Testing dilakukan dengan memfokuskan pada apakah unit program memenuhi kebutuhan (requirement) yang disebutkan dalam spesifikasi. Pada Black Box Testing cara pengujian hanya dilakukan dengan menjalankan atau mengeksekusi unit atau modul, kemudian diamati apakah hasil dari unit itu sesuai dengan proses bisnis yang diinginkan atau tidak. Sedangkan White Box Testing adalah pengujian dengan melihat kedalam modul untuk meneliti kode-kode program yang ada. Dan menganalisis apakah ada kesalahan atau tidak. Jika ada modul yang menghasilkan output yang tidak sesuai dengan proses bisnis yang dilakukan.
Maka baris-baris program, variable, dan parameter yang terlibat pada unit tersebut akan dicek satu persatu dan diperbaiki, kemudian di compile ulang. Dalam pengujian ini Penulis menggunakan metode pengujian Black Box Testing, karena proses testing ini dilakukan berdasarkan kebutuhan (requirement). 4.4 Skenario Pengujian Skenario pengujian dilakukan untuk menentukan langkah-langkah dalam melakukan pengujian. Pengujian dilakukan dengan menjalankan aplikasi dari perancangan website. Setelah aplikasi dijalankan selanjutnya adalah menguji tombol-tombol yang terdapat dalam antar muka aplikasi tersebut apakah sesuai dengan tahap perancangan. Tabel 4.1 Tabel skenario pengujian PERANCANGAN SISTEM INFORMASI BERBASIS WEB PADA UNIT KEGIATAN MAHASISWA ( UKM) UNIVERSITAS MERCU BUANA No Menu Bagian dari antar Status aplikasi Skenario pengujian Hasil yang yang diuji muka yang diuji diharapkan 1. Halaman Link Halaman awal sudah Klik link yang tersedia Terhubung dengan awal terbuka dihalaman awal halaman link yang di klik 2. Halaman unit Link Halaman unit kegiatan Klik link yang tersedia Terhubung dengan kegiatan mahasiswa sudah di halaman unit kegiatan halaman link yang mahasiswa terbuka mahasiswa di klik 3. Halaman Link Halaman prestasi ukm Klik link yang tersedia Terhubung dengan prestasi ukm sudah terbuka di halaman prestasi ukm halaman link yang di klik
4. Halaman Link Halaman galeri foto Klik link yang Terhubung dengan galeri foto sudah terbuka tersediadihalaman galeri halaman link yang foto di klik 5. Halaman Link Halaman informasi & Klik link yang tersedia Terhubung dengan informasi berita sudah terbuka dihalaman informasi halaman link yang di klik 6. Halaman Link Halaman calendar Klik link yang tersedia Terhubung dengan calendar event sudah terbuka di halaman calender halaman link yang event event di klik 7. Halaman Menguji tombol yang Halaman message Nama, pesan Tersimpan ke dalam Message disimpan ke dalam board sudah terbuka database serta Board database tombol berfungsi 8 Halaman Menguji tombol yang Halaman member UserId,, Password Tersimpan ke dalam member disimpan ke dalam sudah terbuka Nama, Alamat, Jurusan, database serta database E-mail, Telepon, Sex, tombol berfungsi Tempat Lahir, Tgl Lahir, Jenis UKM 9 Halaman Menguji tombol yang Halaman kritik & Input nama, email, untuk Tersimpan ke dalam kritik & disimpan ke dalam saran sudah terbuka ukm,dan pesan database serta saran database tombol berfungsi 10 Halaman Menguji tombol yang Pilihan polling sudah Sangatbagus, bagus, Tersimpan ke dalam Polling disimpan ke dalam ada cukup bagus, kurang database serta database bagus, tidak bagus tombol berfungsi 11 Halaman Link Halaman menu link Klik link yang tersedia Terhubung dengan menu link sudah terbuka di halaman menu link halaman link yang di klik 4.4.1 Hasil Pengujian Dari hasil skenario pengujian terakhir yang dilakukan dapat diperoleh hasil pengujian. Dari hasil skenario pengujian pada setiap pilihan yang ada pada Unit Kegiatan Mahasiswa Mercu Buana Berbasis Web, yaitu menu link (home, ukm,prestasi,galeri foto, informasi, calender event serta semua link yang ada di halaman web), menu member, menu kritik & saran, menu link. Maka diperoleh
hasil pengujian tersebut sesuai dengan rumusan perancangan aplikasi program ini. Dan terangkum dalam table 4.2 hasil pengujian sebagai berikut : Tabel 4.2 Tabel hasil pengujian PERANCANGAN SISTEM INFORMASI BERBASIS WEB PADA UNIT KEGIATAN MAHASISWA (UKM) UNIVERSITAS MERCU BUANA NO Antar muka Bagian dari Status aplikasi yang diuji antarmuka yang diuji 1 Halaman awal Link Semua halaman Link dapat dibuka 2 Halaman unit Link Semua halaman Link kegiatan dapat dibuka mahasiswa 3 Halaman prestasi Link Semua halaman Link ukm dapat dibuka 4 Halaman galeri Link Semua halaman Link foto dapat dibuka 5 Halaman Link Semua halaman Link informasi dapat dibuka 6 Halaman calendar Link Semua halaman Link event dapat dibuka 7 Halaman message Menguji tombol Semua halaman message board yang disimpan ke board dapat dibuka Hasil pengujian Semua menu halaman link dapat dibuka seperti pada contoh tampilan gambar Home pada gambar 4.10 seperti pada gambar yang ada diatas Semua menu halaman link dapat dibuka seperti pada contoh tampilan gambar Home pada gambar 4.11 seperti pada gambar yang ada diatas Semua menu halaman link dapat dibuka seperti pada contoh tampilan gambar Home pada gambar 4.12, seperti pada gambar yang ada diatas Semua menu halaman link dapat dibuka seperti pada contoh tampilan gambar Home pada gambar 4.13, seperti pada gambar yang ada diatas Semua menu halaman link dapat dibuka seperti pada contoh tampilan gambar Home pada gambar 4.14 seperti pada gambar yang ada diatas Semua menu halaman link dapat dibuka seperti pada contoh tampilan gambar Home pada gambar 4.15 Data Tersimpan ke dalam database serta tombol yang ada berfungsi
dalam database dengan baik. Contoh tampilan soalnya ada pada gambar 4.16 seperti pada gambar yang ada diatas 8 Halaman member Menguji tombol Semua halaman Member yang disimpan ke dapat dibuka dalam database 9 Halaman kritik & Menguji tombol Semua halaman Kritik & saran yang disimpan ke Saran dapat dibuka dalam database 10 Halaman Polling Menguji tombol Semua halaman polling yang disimpan ke dapat dibuka dalam database 11 Halaman menu Link Semua halaman Link link dapat dibuka Data Tersimpan ke dalam database serta tombol yang ada berfungsi dengan baik. Contoh tampilan soalnya ada pada gambar 4.17 seperti pada gambar yang ada diatas Data Tersimpan ke dalam database serta tombol yang ada berfungsi dengan baik. Contoh tampilan soalnya ada pada gambar 4.18 seperti pada gambar yang ada diatas Data Tersimpan ke dalam database serta tombol yang ada berfungsi dengan baik. Contoh tampilan soalnya ada pada gambar 4.19 seperti pada gambar yang ada diatas Semua menu halaman link dapat dibuka seperti pada contoh tampilan gambar Home pada gambar 4.20 seperti pada gambar yang ada diatas 4.5 Analisis Hasil Pengujian Dari hasil pengujian dapat diambil kesimpulan : 1. Seluruh tampilan antar muka atau form pada website tersebut dapat berjalan dengan baik. 2. Setiap form yang berhubungan langsung dengan database dapat tersimpan dengan baik. 3. Pengujian halaman home, ukm, prestasi, galeri, informasi, calender event berjalan sesuai skenario pengujian yang di lakukan, di halaman website
tersebut semua link yang menghubungkan antara halaman yang satu dengan yang lain dapat terbuka seperti pada gambar 4.10, 4.11, 4.12, 4.13, 4.14 dan 4.15 di atas. 4. Pengujian halaman member, Pengujian dilakukan dengan menguji tombol daftar, dengan cara user mengisi form yang tersedia, setelah itu user menekan tombol daftar yang berada diakhir form member, lalu akan tersimpan kedalam database, seperti pada tampilan gambar 4.17 di atas. 5. Pengujian halaman message board, Pengujian dilakukan dengan menguji tombol simpan, dengan cara user mengisi form yang tersedia, setelah itu user menekan tombol simpan yang berada diakhir form message board, lalu akan tersimpan kedalam database, sepeti pada tampilan gambar 4.16 di atas. 6. Pengujian halaman Kritik & Saran, Pengujian dilakukan dengan menguji tombol kirim, dengan cara user mengisi form yang tersedia, setelah itu user menekan tombol kirim yang berada diakhir form message board, lalu akan tersimpan kedalam database, sepeti pada tampilan gambar 4.18 di atas. 7. Pengujian halaman Polling, Pengujian dilakukan dengan menguji tombol pilih, dengan cara user memilih pilihan polling yang tersedia, setelah itu user menekan tombol pilih yang berada diakhir pilihan polling, lalu akan tersimpan kedalam database, sepeti pada tampilan gambar 4.19 di atas. 8. Pengujian halaman menu link berjalan sesuai skenario pengujian yang di lakukan, di halaman website tersebut semua link yang menghubungkan antara halaman yang satu dengan yang lain dapat terbuka seperti pada gambar 4.20 di atas.
Dari hasil pengujian yang dilakukan pada website tersebut dapat disimpulkan bahwa semua link dan tombol button pada program yang ada di halaman website tersebut dapat dijalankan. Dan untuk menjalankan program atau hasil website tersebut, maka jalankan browser seperti Internet Explorer, Mozilla Firefox,alamat http:/localhost/www.umbwebukm.com/.