BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1. Implementasi Sistem 4.1.1. Spesifikasi Kebutuhan Perangkat Keras Dalam pembuatan aplikasi tes berbasis web menggunakan framework Yii dan database MySQL, terdapat beberapa perangkat keras yang digunakan dalam pembuatan aplikasi, karena menggunakan perangkat lunak yang terbaru maka perangkat keras yang digunakan yang cukup mempuni sebagai berikut: - Laptop 14 - Proccessor intel core i3 2.20GHz - Memory SODIMM 4GB - VGA ATI Radeon 1GB - Harddisk 500GB - Keyboard tandar & mouse optik - Koneksi internet 54Mbps 4.1.2. Spesifikasi Kebutuhan Perangkat Lunak Selain perangkat keras juga dibutuhkan perangkat lunak agar dapat menjalankan aplikasi tes berbasis web ini. Spesifikasi perangkat lunak ini meliputi kebutuhan pada pembuatn web tes tersebut, kebutuhan tersebut adalah sebagai berikut: - Framework Yii - XAMPP 1.7.3 - phpmysql - Notepad ++ - Browser mozilla, chrome & Internet Explorer versi terbaru - Operating System Windows 7 32bit/64bit - Photoshop CS6, MS Word 2010 56
57 4.1.3. Proses instalasi 4.1.3.1. Instalasi XAMPP XAMPP adalah server lokal yang bertugas menjalankan sebuah aplikasi PHP melalui browser sehingga dapat berjalan secara efektif yang bersifat open source, berikut ini adlah proses instalasi xampp. 1. Apabila belum memiliki aplikasi ini dapat di download di situs https://www.apachefriends.org/download.html 2. Setelah dapat klik 2x seperti gambar 4.1. Gambar 4. 1.xampp.exe 3. Selanjutnya klik install, folder tujuan default adalah C:\ seperti gambar 4.2. Gambar 4. 2.Pilihan Path
58 4. Setelah tahapan 3 selesai, akan tampak jendela command prompt (DOS prompt) seperti di bawah, tekan saja enter untuk membuat shortcut desktop/startmenu dan lanjut ke tahapan berikutnya seperti gambar 4.3. Gambar 4. 3.DOS Prompt 5. Tekan kembali Enter untuk lanjut ke tahapan ke 6 seperti gambar 4.4. Gambar 4. 4.DOS Prompt 2 6. Kemudian enter untuk proses penginstalan file, seperti gambar 4.5. Gambar 4. 5.Copy File
59 7. Kemudian tekan enter maka terdapat pilihan menu lalu pilih ketik angka 1 lalu enter, seperti gambar 4.6. Gambar 4. 6.Setup 8. Selanjutnya akan muncul jendela XAMPP control panel (lihat gambar di bawah), klik start Apache dan MySql seperti gambar 4.7. Gambar 4. 7.CP Xampp 9. Apabila Apache dan MySql berhasil diaktifkan, jendela control panel XAMPP akan seperti gambar 4.8 (terlihat tulisan running).
60 Gambar 4. 8.Running 10. Setelah semua selesai maka buka folder tempat instalasi xampp tadi, kemudian htdocs seperti ini C:\xampp\htdocs lalu buat folder yang nantinya akan digunakan untuk pembuatan situs web. 4.1.3.2. Instalasi Yii Framework Berikut ini proses instalasi yii framework untuk pembuatan web tes. 1. Apabila belum memiliki aplikasi ini dapat di download di situs http://www.yiiframework.com/download/ 2. Extrak file hasil download (dapat berupa tar atau zip, tetapi saya lebih memilih yang zip) lalu copy-paste ke folder tempat xampp diinstall yaitu C:\xampp\htdocs\, nama folder bisa diganti demi kemudahan misalnya yii. 3. Klik kanan pada Computer atau My Computer dan pilih Properties, seperti gambar 4.9.
61 Gambar 4. 9.Properties 4. Pilih Advanced system settings, seperti gambar 4.10. Gambar 4. 10.Jendela properties 5. Pilih tab Advanced dan klik Environment Variables, kemudian klik 2x variable path seperti gambar 4.11.
62 Gambar 4. 11.Path 6. Copy-paste path tempat file yiic.php & php.exe berada yaitu C:\xampp\htdocs\yii\frameworks, C:\xampp\php, lalu tambahkan titik-koma ; seperti gambar 4.12. Gambar 4. 12.Variable value 7. Lalu buka cmd dan buka htdocs pada xampp, lalu ketik yiic webapp aplikasiyii, maka folder aplikasiyii akan terbuat dan didalamnya terdapat aplikasi yii yg baru dibuat, seperti gambar 4.13.
63 Gambar 4. 13.Coping file 4.1.3.3. Koneksi ke database Aplikasi yang di generate oleh yii harus di seting terlebih dahulu agar dapat terkoneksi ke database, adapun cara mengkoneksikan ke database sebagai berikut: 1. Buat database terlebih dahulu sesuai yang kita inginkan, dengan membuka browser dan ketik pada address bar, localhost/phpmyadmin lalu enter. 2. Lalu buat nama database pada kolom Create new database seperti gambar dibawah ini, kemudian klik create, seteah itu buat tabel dengan mengisi field yang kita butuhkan seperti gambar 4.14 dan 4.15. Gambar 4. 14.Phpmyadmin view
64 Gambar 4. 15.Create tabel 3. Setelah membuat database dan tabel-tabelnya maka buka folder aplikasi yang telah di generate oleh yii seprti contoh : D:\xampp\htdocs\syukri-ta. 4. Kemudian buka folder protected, config dan klik 2x file main.php seperti gambar 4.16. Gambar 4. 16.File cofig yii 5. Cari kode berikut ini kemudian comment. Gambar 4. 17.Dummy database 6. Setelah itu uncomment kode dibawah ini, dan isi database sesuai yang kita buat di phpmyadmin seperti gambar 4.18. Gambar 4. 18. Koneksi db
65 Keterangan : - Mysql:host : nama host yaitu localhost - Dbname : nama database - Username : root (default) - Password : password phpmyadmin 7. Setelah di save jalankan program di browser. 4.1.4. Algoritma Sistem 4.1.4.1. Bagian Admin Pada bagian admin mengelola data berupa soal, kategori soal, user admin, jawaban user role, dan menginput data calon karyawan. Pengaksesan basis data menggunakan phpmyadmin, yaitu mysql yang sudah terdapat di server local xampp. 4.1.4.2. Bagian User/Calon Karyawan User mengakses profile kemudian mengecek apakah ada kesalahan atau tidak, user dapat mengupdate profile terkait dengan biodata yang diinput oleh admin dan mengupdate password pengguna. Lalu user mengakses halaman soal untuk menjawab soal yang diberikan oleh perusahaan. 4.1.5. Rancangan Antarmuka/User interface Setelah melakukan pembuatan mockup atau disain secara kasar maka disain tersebut diimplementasikan kedalam bentuk bahasa program yaitu CSS, HTML dan Javascript. 4.1.5.1. Halaman login Tampilan awal ketika mengetikan alamat URL di browser adalah login, tempat dimana pengguna memasukan username dan password seperti gambar 4.19.
66 Gambar 4. 19.Login 4.1.5.2. Halaman Utama Admin Ketika pengguna yang memiliki otoritas sebagai admin kemudian login, maka akan disuguhkan banyak navigasi menu yang bertujuan untuk mengelola situsweb tersebut dan hanya admin yang dapat mengakses halaman ini, berikut ini adalah tampilan halaman utama admin seperti gambar 4.20.
67 Gambar 4. 20.Dashboard Admin 4.1.5.3. Halaman Utama User(Calon Karyawan) Bagi calon karyawan tampilan yang disajikan sedikit berbeda dari tampilan admin, dan navigasi menu yang dimiliki user hanya ada 3 items, berikut ini adalah tampilan halaman depan calon karyawan seperti gambar 4.21. Gambar 4. 21.Dashboard Caln karyawan
68 4.1.5.4. Halaman Index Soal Berikut ini adalah halaman index ketika calon karyawan klik menu soal maka tampil halaman ini yang bersisi tentang cara mengisi soal dan karyawan diminta untuk mengupload foto dirinya melalui webcam yang tersedia untuk autentikasi user, halaman ini dapat dilihat pada gambar 4.22. Gambar 4. 22. Halaman index soal 4.1.5.5. Halaman Isi Soal Berikut ini adalah halaman isi soal yang dibuat untuk calon karyawan mengisi soal yang diberikan oleh perusahaan, halaman ini dapat dilihat pada gambar 4.23.
69 Gambar 4. 23.Halaman isi soal 4.1.5.6. Halaman Keloka Profile Berikut ini adalah pengelolaan profile, masing-masing user dapat memanajemen profile-nya, kemudian dapat merubaah password sesuai yang diinginkan baik Admin maupun calon karyawan seperti gambar 4.24 4.27. Gambar 4. 24.Kelola profile Admin
70 Gambar 4. 25.Ganti password Gambar 4. 26. Kelola profile calon karyawan
71 Gambar 4. 27.Ganti password 4.1.5.7. Halaman nilai Halaman ini adalah halaman nilai masing-masing peserta calon karyawan yang sudah diakumulasi dan mendapatkan keterangan apakah calon karyawan tersebut lulus tes atau tidak, halaman tersebut dapat dilihat pada gambar 4.28. Gambar 4. 28. Halaman nilai
72 4.2. Pengujian Sistem Pengujian sistem bertujuan untuk memastikan modul sistem yang sudah dibuat telah berfungsi sesuai dengan yang diharapkan. Uji coba perlu dilakukan untuk mencari kesalahan/bug yang mungkin masih terjadi. Sistem telah di tes terlebih dahulu berdasarkan program yang telah diintegrasikan untuk melihat apakah sistem dapat menerima input, memproses dengan baik dan dapat memberikan output yang tepat. 4.2.1. Sekenario & Hasil Pengujian Pengujian ini dilakukan dengan menguji setiap proses dari use case, pengujian ini dilakukan secara black box yaitu dilakukan hanya dalam mengamati hasil output dan memeriksa fungsional dari perangkat lunak. Berikut ini adalah tabel 4.1 sekenario pengujian sistem dan hasil yang didapat pada tabel 4.2. No Modul yang diuji 1 Login user 2 Kelola Admin 3 Kelola user Klik tombol create Klik tombol view Klik tombol update Klik tombol delete 4 Kelola role Klik tombol create Klik tombol view Klik tombol update Klik tombol delete 5 Kelola soal Klik tombol create Klik tombol view Klik tombol update Klik tombol delete 6 Kelola kategori soal Tabel 4. 1.Sekenario pengujian Sekenario pengujian Username & password benar, klik tombol submit Username & password salah, klik tombol submit Klik tombol create Klik tombol view Klik tombol update Klik tombol delete Klik tombol create Klik tombol view Klik tombol update Klik tombol delete 7 Kelola jwbuser Klik tombol create Klik tombol view Klik tombol update Klik tombol delete 8 Kelola profile Klik tombol my profile Klik tombol update profile Klik tombol change password 9 Isi soal Klik tombol soal
73 10 Logout Klik tombol logout 11 Penilaian Klik menu nilai 12 Tampilan web Tabel 4. 1.Sekenario pengujian(lanjutan) Akses di Mozilla Akses di Chrome Akses di IE No Modul yang diuji 1 Login user 2 Kelola Admin 3 Kelola user Tabel 4. 2. Hasil Pengujian Sistem Hasil yang diharapkan Hasil yang didapat Kesimpulan Menampilkan halaman utama Menampilkan pesan error Menampilkan Menampilkan detail view Menampilkan data ke Konfirmasi delete Menampilkan Menampilkan detail view Menampilkan data ke Konfirmasi delete 4 Kelola role Menampilkan Menampilkan detail view Menampilkan data ke Konfirmasi delete 5 Kelola soal Menampilkan Menampilkan detail view Menampilkan data ke 6 Kelola kategori soal Konfirmasi delete Menampilkan Menampilkan detail view Menampilkan data ke Konfirmasi delete Sistem mengambil user dan dicek di basis data [ ]Berhasil Form menampilkan keterangan error Sistem menampilkan Sistem menampilkan data pada user [ ]Berhasil Sistem mengambil ID dari db dan ditampilkan ke Sistem menampilkan alert yes dan no Sistem menampilkan Sistem menampilkan data pada user Sistem mengambil ID dari db dan ditampilkan ke Sistem menampilkan alert yes dan no Sistem menampilkan Sistem menampilkan data pada user Sistem mengambil ID dari db dan ditampilkan ke Sistem menampilkan alert yes dan no Sistem menampilkan Sistem menampilkan data pada user Sistem mengambil ID dari db dan ditampilkan ke Sistem menampilkan alert yes dan no Sistem menampilkan Sistem menampilkan data pada user Sistem mengambil ID dari db dan ditampilkan ke Sistem menampilkan alert yes dan no [ ]Berhasil [ ]Berhasil [ ]Berhasil [ ]Berhasil
74 7 Kelola jwbuser Menampilkan Menampilkan detail view Menampilkan data ke Tabel 4. 2. Hasil Pengujian Sistem(lanjutan) Menampilkan password 8 Kelola profile Menampilkan detail profile Menampilkan profile Menampilkan password 9 Isi soal Menampilkan halaman isi soal 10 Logout Kembali ke halaman login user 11 Penilaian Menampilkan nilai dan keterangan dihalaman nilai 12 Tampilan Web Browser menampilkan dengan sempurna Browser menampilkan dengan sempurna Browser menampilkan kurang sempurna Sistem menampilkan Sistem menampilkan data pada user Sistem mengambil ID dari [ ]Berhasil db dan ditampilkan ke Sistem menampilkan password lama & baru Sistem menampilkan data pada user Sistem mengambil ID dari db dan ditampilkan ke [ ]Berhasil Sistem menampilkan password lama & baru Sistem mangambil data [ ]Berhasil soal-soal dari db Sistem redirect ke halaman [ ]Berhasil login Sistem mengakumulasi nilai dari hasil jawaban [ ]Berhasil user dan diberikan keterangan sangat baik, cukup baik & kurang baik Browser terbaru support dengan CSS3 [ ]Berhasil Browser terbaru support dengan CSS3 Browser tidak support CSS3 [ ]Berhasil 4.2.2. Kesimpulan Pengujian Berdasarkan hasil pengujian terhadap aplikasi sistem tes berbasis web, dapat ditarik kesimpulan aplikasi web tes ini dapat berfungsi sesuai dengan yang diharapkan serta telah cukup memenuhi tujuan awal.