95
BAB IV
IMPLEMENTASI DAN PENGUJIAN
4.1
Penyiapan Lingkungan Kerja
Setelah melakukan analisis dan perancangan, tahapan selanjutnya adalah
implementasi dan pengujian. Pada tahapan ini dilakukam tahapan penyiapan
lingkungan kerja yang terdiri dari 3 (tiga) bagian yaitu pemilihan spesifikasi
kebutuhan sistem, penyiapan lingkungan kerja pada komputer, penyiapan aplikasi
untuk melakukan manajemen kontrol pembuatan aplikasi dan pembuatan
issue/task terkait dengan apa saja yang harus dikerjakan untuk menyelesaikan
aplikasi ini.
4.1.1 Spesifikasi Kebutuhan Sistem Pada Area Kerja dan Pengujian
Spesifikasi kebutuhan sistem pada area kerja dan pengujian terbagi
menjadi 2 (dua) yaitu perangkat keras dan perangkat lunak yang dapat dilihat pada
keterangan di bawah ini:
1. Perangkat Keras
a. Prosesor Intel Core i7 2 GHz
b. RAM sebesar 8 GB 1333 MHz DDR3
2. Perangkat Lunak
a. Sistem Operasi, Mac OS X Versi 10.8.0
b. Web Server, Apache Versi 2.2.21
c. Bahasa Pemrogaman Server Side, PHP Versi 5.3.6
d. Database Server, MySQL Versi 5.5.9
e. Version Control Sistem, Git Versi 1.7.10.4
f. GitHub Account
g. Text Editor, Sublime Text Versi 2.0
4.1.2 Penyiapan Area Lingkungan Kerja (Local Environment)
Dalam hal penyiapan area lingkungan kerja di komputer yang akan
digunakan untuk proses pengembangan, maka diperlukan sebuah repositori lokal
yang digunakan untuk proses manajemen kontrol (git). Perintah untuk membuat
repositori lokal adalah membuat folder kosong sebagai area kerja, kemudian
masuki folder tersebut melalui perintah text (command promt) dan ketikkan “git
init” di dalam folder tersebut. Proses pembuatan repositori lokal dijelaskan pada
gambar berikut:
Gambar 4.1 Proses pembuatan repositori lokal
Setelah repositori lokal dibuat, proses selanjutnya adalah instalasi Laravel
Framework di folder tersebut. Unduh Laravel framework di situs resminya
(laravel.com) lalu ekstrak dan letakan file hasil ekstrakan tadi ke folder git.
Berikut ini adalah gambar struktur direktori git setelah file Laravel Framework
dipindahkan:
Gambar 4.2 Lingkungan kerja yang sudah terdapat Laravel Framework
Git tidak secara otomatis melakukan pencatatan file yang berubah di area
yang sudah di seting sebagai repositori lokal. Hal ini dapat dicek dengan
menggunakan perintah “git status” pada folder yang sudah di seting sebagai
repositori.
Gambar 4.3 Status berkas dan file yang belum tercatat dalam git.
Setelah melakukan instalasi Laravel maka proses selanjutnya adalah
melakukan pencatatan seluruh file ke git dengan cara mengetikkan “git add”
untuk memasukkan file tersebut kedalam index git dan kemudian “git commit”
untuk memberikan pesan apa yang sedang terjadi dengan tindakan yang sudah
dilakukan.
Gambar 4.4 Status berkas dan file yang sudah di masukkan ke dalam index git
Gambar 4.5 Status berkas dan file yang sudah di commit
Setelah proses pencatatan selesai, langkah selanjutnya adalah membuat
cabang(branch), agar dalam proses pengembangan perangkat lunak mejadi fokus
terhadap apa yang akan dibuat. Dalam pengembangan sistem ini, penulis
membuat tiga (tiga) buah yang terdiri dari master, full-screen dan auth.
Gambar 4.6 Daftar cabang (branch) di lokal repositori
4.1.3 Penyiapan Perangkat Lunak Manejemen Kontrol
GitHub adalah sebuah situs web yang beralamatkan di
https://github.com
merupakan penyedia layanan remote server repositories git yang open source.
Selain sebagai layanan remote server repositories git, GitHub juga memberikan
layanan pada setiap repositori dengan beberapa fitur yakni issue/task, wiki dan
grafik perkembangan keadaan repositori tersebut. GitHub memberikan dua
macam layanan remote server repositories yaitu repositori yang bersifat public
dan private. Untuk layanan public remote server repositories tidak dikenakan
biaya/gratis, sedangkan untuk private remote server repositories dikenakan biaya
yang beragam.
Gambar 4.7 Situs resmi GitHub
Proses penyiapan yang dilakukan pertama kali adalah pembuatan
repositori. Proses pembuatan repositori baru dapat dilihat pada gambar di bawah
ini:
Gambar 4.8 Pembuatan repositori baru
Repositori
yang
penulis
buat
beralamatkan
di
https://github.com/purwandi/usm
.
Setelah repositori sudah dibuat, langkah selanjutnya adalah melakukan
push atau mengirimkan kode perubahan yang terdapat di repositori lokal
(komputer lokal) ke GitHub.
Listing 4.1 Setting remote server
/* Menambahkan remote server
* ====================================================== */ // via port https
git remote add origin https://github.com/purwandi/usm.git
atau
// via ssh
git remote add origin git@github.com:purwandi/usm.git
/* Melakukan push ke remote server, dalam hal ini nama * remote origin berada di github.com
* ====================================================== */ git push origin master
4.1.4 Pembuatan Milestone dan Issue/Task
Issue/task sangat berguna dalam menajemen pengerjaan proyek perangkat
lunak. Dengan adanya issue/task permasalahan atau langkah-langkah yang harus
dikerjakan dalam pengembangan proyek perangkat lunak dapat terkoordinir
dengan baik sehingga proses pengembangan lebih cepat.
Khusus untuk pengembangan sistem ujian saringan masuk ini penulis
membuat issue/task sebanyak 33. Issue/task dapat dilihat pada di
https://github.com/purwandi/usm/issues
atau dapat dilihat pada gambar dibawah
ini:
Gambar 4.10 Halaman issue/task pada GitHub
Milestone berguna untuk mengelompokkan issue/task menjadi satu
kelompok. Pada milestone ini, pengembang dapat memberikan batas waktu kapan
milestone tersebut haru diselesaikan.
Khusus untuk pengembangan sistem ujian saringan masuk ini penulis
membuat milestone sebanyak 5. Milestone dapat dilihat pada di
https://github.com/purwandi/usm/issues/milestones
atau dapat dilihat pada
gambar dibawah ini:
4.2
Implementasi
4.2.1 Implementasi Halaman Login
Halaman login berguna sebagai halaman utama pengguna. Untuk dapat
menggunakan aplikasi ujian saringan masuk online, pengguna diharuskan untuk
melakukan login dengan cara memasukkan username dan password dengan benar.
4.2.2 Implementasi Halaman Ketua Program Studi
4.2.2.1 Implementasi Halaman Utama Ketua Program Studi
Berikut adalah halaman utama untuk pengguna yang memiliki login role
sebagai ketua program studi. Setelah ketua program studi berhasil masuk, maka
sistem akan menampilkan halaman utama seperti gambar berikut ini:
Gambar 4.13 Halaman Utama Ketua Program Studi
4.2.2.2 Implementasi Halaman Pengolahan Data Passing Grade
Halaman ini digunakan ketua program studi untuk mengelola data passing
grade yang menjadi acuan kelulusan bagi calon mahasiswa baru yang akan
mengikuti proses seleksi.
Gambar 4.15 Halaman Form Passing Grade
4.2.2.3 Implementasi Halaman Pengolahan Data Tata Usaha
Halaman ini digunakan ketua program studi untuk mengelola data tata
usaha. Tampilan halaman pengolahan tata usaha dapat dilihat pada gambar
dibawah ini.
Gambar 4.17 Halaman Form Tata Usaha
4.2.2.4 Implementasi Halaman Pengolahan Data Dosen
Halaman ini digunakan ketua program studi untuk mengelola data dosen.
Tampilan halaman pengolahan dosen dapat dilihat pada gambar dibawah ini.
Gambar 4.19 Halaman Form Data Dosen
4.2.3 Implementasi Halaman Tata Usaha
4.2.3.1 Implementasi Halaman Utama Tata Usaha
Setelah tata usaha berhasil masuk, maka sistem akan menampilkan
halaman utama seperti gambar berikut ini:
4.2.3.2 Implementasi Halaman Pengolahan Data Topik
Halaman ini digunakan tata usaha untuk mengelola data topik yang telah
ditentukan oleh ketua program studi. Tampilan halaman pengolahan topik dapat
dilihat pada gambar dibawah ini.
Gambar 4.21 Halaman Pengolahan Data Topik
4.2.3.3 Implementasi Halaman Pengolahan Data Jenjang Pendidikan
Halaman ini digunakan tata usaha untuk mengelola data jenjang
pendidikan yang telah ditentukan oleh ketua program studi. Tampilan halaman
pengolahan jenjang pendidikan dapat dilihat pada gambar dibawah ini.
Gambar 4.23 Halaman Data Jenjang Pendidikan
4.2.3.4 Implementasi Halaman Pengolahan Data Pengaturan Topik Soal
Pada Tiap Jenjang Pendidikan
Halaman ini digunakan tata usaha untuk mengelola pengaturan topik ujian
yang diberikan ketika calon mahaiswa melakukan ujian. Pengaturan topik
berdasarkan jenjang pendidikan yang telah dibuat.
Tata usaha dapat memilih beberapa topik pada setiap jenjang sesuai
dengan ketentuan yang diperoleh dari ketua program studi. Pada pengaturan topik
ini tiap jenjang pendidikan yang diceklist memiliki bobot dab tata usaha harus
menentukan bobot yang diberikan kepada masing-masing topik sesuai dengan
ketentuan yang diperoleh dari ketua program studi. Nilai bobot total keseluruhan
haruslah 100.
Gambar 4.25 Halaman Pengolahan Data Pengaturan Topik Ujian
Listing 4.1 Javascript pada halaman pengaturan topik ujian
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 <script> $(document).ready(function() { calculate();// jika element dengan class topik_id di click $('.topik_id').click(function(){ // jika element tersebut dalam posisi terceklist maka if ($(this).attr('checked')) { // element dengan id bobot_id akan dihilangkan // atribut disable nya
$('#bobot_'+$(this).attr('id')).attr('disabled', false).removeClass('uneditable-‐input');
// element dengan id waktu_id akan terisi dengan nilai
// data-‐value yang terdapat // pada topik_id yang dipilh $('#waktu_'+$(this).attr('id')).val($(this).attr('data-‐ value'));
}
// jika tidak di ceklist else { $('#bobot_'+$(this).attr('id')).attr('disabled', true).addClass('uneditable-‐input').val(''); $('#waktu_'+$(this).attr('id')).val(''); } calculate(); });
// setiap element id yang memiliki class bobot maka akan dilakukan // pemanggilan fungsi calculate untuk mengetahui jumlah bobot total $('.bobot').blur(function(){ calculate(); }) }); function calculate() { // mendefinisikan variabel
var sum = waktu = 0;
// lakukan looping setiap element yang memiliki class bobot
// looping ini bertujuan untuk melakukan kalkulasi pada masing-‐masing element
$('.bobot').each(function() { sum += Number($(this).val()); });
// mengisi element dengan id total dengan hasil penjumlahan var sum $('#total').val(sum); $('.waktu').each(function() { waktu += Number($(this).val()); }); $('#waktu').val(waktu);
// jika total bobot sama dengan 100, maka atribut disabled // yang berada di element id simpan dihilangkan
if ( $('#total').val() == '100') { $('#simpan').attr('disabled',false); }
58 59 60 61 $('#simpan').attr('disabled',true); } } </script>
Penjelasan : Pada listing 4.1,
Baris 2, fungsi
$(document).ready(function(){})pada jQuery merupakan fungsi
khusus yang digunakan oleh jQuery untuk menganalisa / mendeteksi apakah
Document Object Model (DOM) pada halaman HTML / web kita sudah siap
digunakan. Apabila belum siap, maka kode yang didefinisikan pada bagian dalam
function ini tidak akan bisa dijalankan. Demikian juga sebaliknya, jika DOM
sudah siap maka kode yang didefinisikan dapat dijalankan. Dengan kontrol seperti
ini, maka kita dapat meminimalisasi kesalahan perilaku (behavior) script yang
tidak kita kehendaki.
4.2.3.5 Implementasi Halaman Pengolahan Data Calon Mahasiswa Baru
Halaman ini digunakan tata usaha untuk mengelola data calon mahasiswa
baru Tampilan halaman pengolahan calon mahasiswa baru dapat dilihat pada
gambar dibawah ini
Setiap kali melakukan penambahan data baru calon mahasiswa baru,
password yang diperoleh calon mahasiswa baru menggunakan tanggal lahir yang
bersangkutan.
Gambar 4.27 Halaman Form Calon Mahasiswa Baru
4.2.3.6 Implementasi Halaman Laporan
Pada halaman laporan, tata usaha dapat mengetahui siapa saja yang telah
melakukan ujian saringan masuk pada hari tertentu dan juga tata usaha dapat
melakakukan filter mahasiswa mana yang mendapatkan grade tertentu.
4.2.4 Implementasi Halaman Dosen
4.2.4.1 Implementasi Halaman Utama Dosen
Setelah dosen berhasil masuk, maka sistem akan menampilkan halaman
utama seperti gambar berikut ini:
4.2.4.2 Implementasi Halaman Pengolahan Soal
Halaman ini digunakan dosen untuk mengelola data dosen. Tampilan
halaman pengolahan soal dapat dilihat pada gambar dibawah ini.
Gambar 4.30 Halaman Utama Dosen
Pada saat membuat soal baru, sistem akan membuat popup window
konfirmasi apakah soal tesebut soal cerita atau bukan. Konfirmasi ini dapat dilihat
pada gambar 4.31 Popup Tipe Soal Pilihan.
Gambar 4.32 Form soal cerita
4.2.5 Implementasi Halaman Calon Mahasiswa Baru
4.2.5.1 Implementasi Halaman Utama Calon Mahasiswa Baru
Setelah calon mahasiswa baru berhasil login, maka sistem akan
menampilkan halaman utama seperti gambar 4.2.5.2 Implementasi Halaman Soal.
Di halaman utama ini terdapat tombol untuk mulai mengerjakan soal. Kondisi
awal tombol ini dalam keadaan disable , untuk itu jika calon mahasiswa baru ingi
memulai pengisian ujian saringan masuk, calon mahasiswa baru harus menceklist
pernyataan tentang ketentuan pelaksanaan ujian.
Gambar 4.35 Implementasi Halaman Soal
Listing 4.3 Javascript Halaman Utama Calon Mahasiswa Baru
(function($, w, doc){w.App = {
init: function(){
// var definition
var chkConfirm = $('#chkterm'), btnMulai = $('#btn-‐mulai'), content = $('#fullscreen'), frm = $('#frm-‐jawab'), frmTarget = $('#frm-‐target'), btnClose = $('#btn-‐Close');
// first disable button mulai btnMulai.attr('disabled', true);
// check if user confirm of term chkConfirm.click(function(){ if (chkConfirm.attr('checked')) { btnMulai.attr('disabled', false); } else { btnMulai.attr('disabled', true); } });
// start click full screen btnMulai.click(function(){
// go request full screen content.fullScreen({ 'background' : '#FFF',
'callback' : function(fullScreen){
// if not full screen mode if ( ! fullScreen) {
// remove hide class on target content.html('');
} else {
// Fire ajax call $.ajax({
type : 'GET',
url : '/api/jawab?csrf_token='+ CSRF_TOKEN, dataType : 'json', success : function(resp){ if (resp.code == '200') { //display content content.html(resp.html.begin);
// fire call button w.App.closeFull();
// fire countdown w.App.countDown(resp);
// fire ajax form w.App.formAjax(); } else { //display content content.html(resp.html);
// fire call button w.App.closeFull(); } } }); } } }); }); // end click }, countDown: function(resp){ // var coundown
var content = $('#fullscreen'),
futuredate = new cdtime("countdown", resp.waktu);
// start display countdown
futuredate.displaycountdown("days", function(){ // jika waktu habis
// hapus content dan ganti dengan resp.habis content.html(resp.html.end);
} else {
//show countdown timer
return arguments[1]+" jam "+arguments[2]+" menit "+arguments[3]+" detik"; } }); }, formAjax: function(){ // var definition var frm = $('#frm-‐jawab'), frmTarget = $('#frm-‐target');
// handle form ajax frm.ajaxForm({
dataType : 'json',
url : '/api/jawab?csrf_token=' + CSRF_TOKEN, success : function(resp){ if (resp.code == '200') { frmTarget.removeClass().addClass('alert alert-‐ success').html(resp.html); } else { frmTarget.removeClass().addClass('alert alert-‐ error').html(resp.html); } w.setTimeout(function(){
frmTarget.fadeOut(200); // fade out speed }, 5000); // start to fadeOut after 5sec } }); }, closeFull: function(){ // var definition
var btnClose = $('#btn-‐Close'), content = $('#fullscreen'); // handle close btnClose.click(function(){ content.html(''); content.cancelFullScreen(); }); } };
})(jQuery, window, window.document);
