BAB IV IMPLEMENTASI DAN PENGUJIAN

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 form, tempat dimana pengguna memasukan username dan password seperti gambar 4.19.

66

Gambar 4. 19.Login form

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. Tabel 4. 1.Sekenario pengujian No

Modul yang diuji

1

Login user

2

Kelola Admin

3

Kelola user

4

Kelola role

5

Kelola soal

6

Kelola kategori soal

7

Kelola jwbuser

8

Kelola profile

9

Isi soal

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 Klik tombol create Klik tombol view Klik tombol update Klik tombol delete Klik tombol create Klik tombol view Klik tombol update Klik tombol delete Klik tombol create Klik tombol view Klik tombol update Klik tombol delete Klik tombol create Klik tombol view Klik tombol update Klik tombol delete Klik tombol my profile Klik tombol update profile Klik tombol change password Klik tombol soal

73

Tabel 4. 1.Sekenario pengujian(lanjutan) 10

Logout

11

Penilaian

12

Tampilan web

Klik tombol logout Klik menu nilai Akses di Mozilla Akses di Chrome Akses di IE Tabel 4. 2. Hasil Pengujian Sistem

No

Modul yang diuji

1

Login user

2

Kelola Admin

Hasil yang diharapkan Menampilkan halaman utama Menampilkan pesan error Menampilkan form inputan Menampilkan detail view Menampilkan data ke form Konfirmasi delete

3

Kelola user

Menampilkan form inputan Menampilkan detail view Menampilkan data ke form Konfirmasi delete

4

Kelola role


5

Kelola soal


6

Kelola kategori soal


Hasil yang didapat Sistem mengambil inputan user dan dicek di basis data Form menampilkan keterangan error Sistem menampilkan form inputan Sistem menampilkan data pada user Sistem mengambil ID dari db dan ditampilkan ke form Sistem menampilkan alert yes dan no Sistem menampilkan form inputan Sistem menampilkan data pada user Sistem mengambil ID dari db dan ditampilkan ke form Sistem menampilkan alert yes dan no Sistem menampilkan form inputan Sistem menampilkan data pada user Sistem mengambil ID dari db dan ditampilkan ke form Sistem menampilkan alert yes dan no Sistem menampilkan form inputan Sistem menampilkan data pada user Sistem mengambil ID dari db dan ditampilkan ke form Sistem menampilkan alert yes dan no Sistem menampilkan form inputan Sistem menampilkan data pada user Sistem mengambil ID dari db dan ditampilkan ke form Sistem menampilkan alert yes dan no

Kesimpulan

[ ]Berhasil [ ]Tidak berhasil






74

Tabel 4. 2. Hasil Pengujian Sistem(lanjutan) 7

Kelola jwbuser

Menampilkan form inputan Menampilkan detail view Menampilkan data ke form

Browser menampilkan dengan sempurna Browser menampilkan dengan sempurna

Sistem menampilkan form inputan Sistem menampilkan data pada user Sistem mengambil ID dari db dan ditampilkan ke form Sistem menampilkan form inputan password lama & baru Sistem menampilkan data pada user Sistem mengambil ID dari db dan ditampilkan ke form Sistem menampilkan form inputan password lama & baru Sistem mangambil data soal-soal dari db Sistem redirect ke halaman login Sistem mengakumulasi nilai dari hasil jawaban user dan diberikan keterangan sangat baik, cukup baik & kurang baik Browser terbaru support dengan CSS3 Browser terbaru support dengan CSS3

Browser menampilkan kurang sempurna

Browser tidak support CSS3

Menampilkan form password 8

Kelola profile

Menampilkan detail profile Menampilkan form profile Menampilkan form password

9

Isi soal

10

Logout

11

Penilaian

12

Tampilan Web

Menampilkan halaman isi soal Kembali ke halaman login user Menampilkan nilai dan keterangan dihalaman nilai



[ [ [ [

]Berhasil ]Tidak berhasil ]Berhasil ]Tidak berhasil


[ ]Berhasil [ ]Tidak berhasil [ ]Berhasil [ ]Tidak 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.

BAB IV IMPLEMENTASI DAN PENGUJIAN

Recommend Documents