Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer e-ISSN: 2548-964X

Vol. 1, No. 12, Desember 2017, hlm. 1493-1499 http://j-ptiik.ub.ac.id

Pengembangan Sistem Pembelajaran Pemrograman Java yang Atraktif

Berbasis Website
Dhanuari Indra Bastari1, Fajar Pradana2, Bayu Priyambadha3

Program Studi Sistem Informasi, Fakultas Ilmu Komputer, Universitas Brawijaya

Email: 1d.indrabastari@gmail.com, 2fajar.p@ub.ac.id, 3bayu_priyambadha@ub.ac.id

Abstrak
Pemrograman dasar merupakan ilmu yang wajib dikuasai oleh setiap mahasiswa FILKOM, namun
berdasarkan hasil kuesioner didapatkan bahwa 76% mahasiswa FILKOM lebih tertarik pada mata kuliah
selain pemrograman dasar. Terdapat beberapa hal yang menyebabkan mahasiswa menjadi kurang
tertarik pada mata kuliah pemrograman dasar, terbatasnya sumber materi yang bisa diperoleh dan teknik
pembelajaran yang kurang bervariasi. Maka pada penelitian ini akan mengembangkan sebuah sistem
pembelajaran pemrograman java yang atraktif berbasis website dengan mengadaptasi metode
gamification dan IOE-Behavior. Metode gamification diterapkan pada sistem pembelajaran ini melalui
beberapa fitur yaitu, fitur yang memungkinkan pengguna satu menantang pengguna lain (challenge),
fitur penghargaan bagi pengguna yang mencapai kondisi tertentu, fitur level dan experience point.
Sedangkan metode IOE-Behavior diterapkan pada fitur pemeriksaan kode java yang memungkinkan
sistem untuk memeriksa kode java secara otomatis dengan membandingkan input yang dimasukan dan
output yang dihasilkan. Sistem ini dikembangkan dengan menggunakan metode SDLC dengan model
waterfall. Pada tahap akhir sistem ini diuji dengan menggunakan metode black-box testing dan white-
box testing dengan hasil pengujian sebesar 100% valid.
Kata kunci: sistem pembelajaran, gamification, ioe-behavior, waterfall, pemrograman java
Abstract
Basic programming is a knowledge that must be mastered by every FILKOM student, but based on the
result of the questionnaire found that 76% of FILKOM students are more interested in other subject.
There are several things that cause students to be less interested in the basic programming courses, the
limited source of material that can be obtained and learning techniques that are less varied. Therefore,
this research will develop an attractive web-based java learning system by adapting the gamification
and IOE-Behavior methods. Gamification method wass applied to this learning system through several
features, feature that allows user one challenge other user (challenge), reward feature for user reaching
certain condition, level feature and experience point. While the IOE-Behavior method was applied to
the java code check feature that allows the system to check the java code automatically by comparing
input and output results. This system was developed using SDLC method with waterfall model. In the
final stages the system was tested using black-box testing and white-box testing methods with 100%
valid test results.
Keywords: learning management system, gamification ioe-behavior, waterfall, java programming

pemrograman dasar, bahasa pemrograman yang

1. PENDAHULUAN
Pemrograman merupakan ilmu yang
penting untuk dikuasai bagi setiap mahasiswa di
Fakultas Ilmu Komputer (FILKOM) Universitas
Brawijaya, karena salah satu kompetensi yang
harus dimiliki oleh mahasiswa lulusan FILKOM
adalah menciptakan perangkat lunak. Saat ini
terdapat beberapa mata kuliah bersifat wajib
yang mengharuskan mahasiswa menggunakan
bahasa pemrograman salah satunya adalah mata
kuliah pemrograman dasar. Pada mata kuliah
1493
wajib untuk dikuasai adalah pemrograman java.
Namun dari hasil pengamatan yang dilakukan
terdapat banyak mahasiswa yang kurang minat
pada mata kuliah pemrograman dasar.
Pemrograman merupakan ilmu yang
penting untuk dikuasai bagi setiap mahasiswa di
Fakultas Ilmu Komputer (FILKOM) Universitas
Brawijaya, karena salah satu kompetensi yang
harus dimiliki oleh mahasiswa lulusan FILKOM
adalah menciptakan perangkat lunak. Saat ini
terdapat beberapa mata kuliah bersifat wajib
Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer
yang mengharuskan mahasiswa menggunakan
bahasa pemrograman salah satunya adalah mata
kuliah pemrograman dasar. Pada mata kuliah
pemrograman dasar, bahasa pemrograman yang
wajib untuk dikuasai adalah pemrograman java.
Namun dari hasil pengamatan yang dilakukan
terdapat banyak mahasiswa yang kurang minat
pada mata kuliah pemrograman dasar. Faktor
lain yang menjadikan mata kuliah pemrograman
dasar kurang diminati oleh mahasiswa ialah,
banyaknya mahasiswa berlatar belakang
pendidikan Sekolah Menengah Atas (SMA)
yang tidak memiliki pengetahuan dasar
mengenai pemrograman java.
Dari beberapa hal yang diuraikan diatas,
melalui penelitian ini penulis akan
mengembangkan sistem pembelajaran
pemrograman java yang disajikan dalam bentuk
permainan simulasi dengan menerapkan metode
gamification dan IOE-Behavior. Kemudian
fakta lain yang dapat diambil pada survei
dilapangan yaitu sebanyak 94% responden
menyatakan bahwa dengan menggunakan
metode pembelajaran permainan simulasi akan
memudahkan dalam memahami serta
meningkatkan minat terhadap materi
pemrograman java. Metode gamification
digunakan untuk menerapkan sebuah konsep
game yang tepat sehingga dapat memberikan
proses yang menyenangkan serta bermanfaat
bagi setiap pihak yang terlibat. Sedangkan
metode IOE-Behavior digunakan untuk
melakukan pemeriksaan terhadap kode sumber
java secara semantik dengan
mempertimbangkan masukan, keluaran, serta
efek yang dihasilkan dari kode sumber java
tersebut.
2. TEORI
2.1. IOE Behavior
Input, Output and Effects Behavior
merupakan sebuah metode yang digunakan
dalam mendeteksi kloning kode secara semantik.
IOE Behavior terbagi dalam 4 proses, yaitu
abstraction, filtering, testing, dan collection
(Elva, 2012). Metode ini digunakan sebagai
dasar dalam melakukan pemeriksaan antara dua
source code java. Pemeriksaan source code
tersebut dilakukan dengan cara membandingkan
keluaran (output) yang dihasilkan oleh masing-
masing source code dengan masukan (input)
yang sama sebanyak lima (5) kali pemeriksaan.
Fakultas Ilmu Komputer, Universitas Brawijaya
1494
2.2. Gamification
Gamification merupakan suatu proses
penggunaan teknik desain dan mekanisme game
dalam aplikasi non-game guna mengikat
pengguna dalam mencapai tujuan. Pengertian
lain dari gamification yaitu sebuah upaya dalam
mengimplmentasikan sebuah konsep game yang
tepat sehingga dapat memberikan proses yang
menyenangkan serta bermanfaat bagi setiap
pihak yang terlibat (Romdhoni & Wibowo,
2014). Dalam gamification terdapat beberapa
mekanisme game yang akan diterapkan pada
aplikasi pembelajaran pemrograman java yaitu
point, level user, achievement, dan challenge.
2.3. Waterfall
Dalam pengembangan perangkat lunak
pada penelitian ini menggunakan model
waterfall yang merupakan salah satu model dari
metode System Development Life Cycle (SDLC).
Model Waterfall ini merupakan contoh dari
sebuah proses yang bersifat plan-driven dimana
semua aktivitas yang akan dilakukan harus
direncanakan terlebih dahulu sebelum
mengerjakannya (Sommerville, 2011). Tahapan
pada model waterfall dilakukan secara berurutan
yakni analisis kebutuhan, perancangan sistem,
implementasi sistem, pengujian sistem dan
pemeliharaan sistem.
3. HASIL DAN PEMBAHASAN
3.1. Analisis Kebutuhan
Pada penelitian ini dibangun sebuah sistem
pembelajaran pemrograman java yang atraktif
berbasis website. Sistem pembelajaran tersebut
dikembangkan dengan tujuan dapat
meningkatkan minat dan memudahkan
pemahaman mahasiswa FILKOM UB terhadap
materi pemrograman java. Mahasiswa dapat
mempelajari materi pemrograman java berupa
teks, gambar, atau video, kemudian mahasiswa
dapat mengerjakan latihan soal dari setiap
materi, selain itu sistem pembelajaran ini juga
menyediakan sebuah fitur yang memungkinkan
mahasiswa untuk menantang mahasiswa lain
dalam keahlian pemrograman java. Dalam
mendeteksi kebenaran dari kode yang
dimasukan oleh pengguna, sistem pembelajaran
ini menggunakan metode IOE-Behavior. Sistem
pembelajaran ini menggunakan metode
gamification untuk menyediakan sistem
Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer 1495

pembelajaran yang atraktif, yakni dengan

menerapkan sistem point.
Pada tahap identifikasi aktor dilakukan
pengidentifikasian aktor beserta deskripsi
singkat tentang perlakuan yang dapat dilakukan
oleh masing-masing aktor. Rincian identifikasi
aktor sistem pembelajaran pemrograman java
yang akan dibangun dapat dilihat pada Tabel 1.
Tabel 1. Identifikasi Aktor
Aktor Deskripsi
Pengguna Dalam sistem ini pengguna harus
melakukan login untuk proses autentifikasi
terhadap pengguna tersebut ketika ingin
menggunakan sistem.
Admin Dalam sistem ini admin bertugas untuk
mengelola data dari member, materi,
penghargaan dan soal.
Member Dalam sistem ini member dapat melihat
materi, melihat penghargaan yang pernah
diraih, mengerjakan pertanyaan latihan,
serta mencari member lain, menambahkan
member lain ke daftar teman dan
melakukan tantangan kepada member lain.

Diagram use case digunakan untuk

memodelkan semua proses bisnis berdasarkan
perspektif pengguna sistem yang terdiri dari
perilaku dan aktor yang bertindak pada sistem,
diagram use case ini dibuat berdasarkan pada
kebutuhan fungsional sistem yang telah dibuat
sebelumnya. Kemudian digambarkan diagram
berdasarkan aktor yang bertindak pada
fungsionalitas tersebut. Berikut ini merupakan
diagram usecase dari sistem pembelajaran
pemrograman java beserta aktor yang dapat
berinteraksi dengan perangkat lunak pada
Gambar 1 dan Gambar 2.
Gambar 2. Diagram Use Case Member dan
Pengguna
3.2. Perancangan
Pada tahap perancangan dilakukan
beberapa hal yang akan digunakan sebagai acuan
dalam proses implementasi, yakni pembuatan
diagram-diagram perancangan perangkat lunak
yang meliputi diagram sequence, diagram class,
relational data model, perancangan komponen
sistem dan perancangan antarmuka pengguna.
3.2.1. Perancangan Komponen
Perancangan komponen merupakan
dekomposisi sub-sistem menjadi komponen
detail. Perancangan komponen menjelaskan
atribut dan algoritma method dalam sebuah class
yang telah dimodelkan sebelumnya pada
pemodelan class diagram. Tabel 2 merupakan
algoritma dari method test_java() yang berfungsi
untuk melakukan pemeriksaan terhadap kode
java.

Tabel 2. Algoritma method test_java()

BEGIN test_java(id_question, id_exercise)
SESSION get uid
DB get question by id_question as question
data as new array with exercise_id, member_id, param_case, result,
error, answer, param_count
IF (question.param_type not random)
test_case as new array
explode question.param_case as param
FOREACH param as p
Gambar 1. Diagram Use Case Admin
Fakultas Ilmu Komputer, Universitas Brawijaya
Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer 1496

IF p not null
temp_case as new array
explode p as case
FOREACH case as c
IF c not null
push c to array temp_case
END IF
END FOREACH
push temp_case to array test_case
END IF
END FOREACH
data.param_case = question.param_case
END IF
key_out as string
user_out as string
FOR i=0 until 5
randoming as new array
key_proc = proc_open java key_file with key_pipes as pipe
IF is_resource = key_proc
IF question.param_type is random
FOR j=0 until question.param_count Gambar 3. Rancangan Antarmuka Menambah
fwrite key_pipes.0 with test_case.i.j Pertanyaan
END FOR
ELSE
FOR j=0 until question.param_count Rancangan antarmuka pengguna untuk
CALL FUNCTION random_value as randomval
push randomval to array randoming halaman mengajukan tantangan dapat dilihat
fwrite key_pipes.0 with randomval melalui Gambar 4, halaman tersebut meminta
END FOR
END IF konfirmasi pengguna dalam mengajukan
fclose keypipes.0 tantangan kepada pengguna lain.
key_out = stream_get_contents from key_pipes.1
delete white spaces on key_out
fclcose key_pipes.1
END IF
user_proc = proc_open java user_file with user_pipes as pipe
IF is_resource = user_proc
IF question.param_type is random
FOR j=0 until question.param_count
fwrite user_pipes.0 with test_case.i.j
END FOR
ELSE
FOR j=0 until question.param_count
fwrite user_pipes.0 with randoming.j
END FOR
END IF
fclose user_pipes.0
user_out = stream_get_contents from user_pipes.1
user_error = stream_get_contents from user_pipes.2
delete white spaces on user_out
fclcose user_pipes.1
END IF Gambar 4. Rancangan Antarmuka Halaman
add user_out to data.result Mengajukan Tantangan
add user_error to data.error
PRINT user_out and key_out Halaman mengerjakan latihan materi yang
IF key_out = user_out
add "True" to data.answer terdapat pada Gambar 5 menampilkan
ELSE penjelasan soal beserta form source code yang
add "False" to data.answer
END IF akan dimasukkan oleh aktor yang digunakan
END FOR untuk menjawab dan tombol “submit answer”
DB insert to exercise with array data
END test_java digunakan untuk memastikan jawaban yang
dimasukkan dengan benar.
3.2.2. Perancangan Antarmuka
Perancangan antarmuka pengguna
merupakan proses pembuatan rancangan
tampilan sistem yang akan dibangun agar
pengguna dapat berinteraksi dengan sistem
pembelajaran. Gambar 3 merupakan rancangan
antarmuka pengguna untuk halaman menambah
pertanyaan, pada halaman ini pengguna dapat
melakukan penambahan pertanyaan baru untuk
sistem pembelajaran, selain itu pengguna juga
dapat melakukan proses percobaan kode java.
Fakultas Ilmu Komputer, Universitas Brawijaya
Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer 1497

Gambar 5. Rancangan Antarmuka Halaman
Mengerjakan Latihan Materi
3.3. Implementasi
Tahapan implementasi yang dilakukan
terdiri dari penjelasan tentang spesifikasi
lingkungan pengembangan sistem, batasan-
batasan implementasi, implementasi algoritma,
implementasi basis data dan implementasi
antarmuka pengguna.
}else{
for($j=0; $j<$question['param_count'];$j++){
$randoming = $this->random_value();
fwrite($key_pipes[0], $randoming."\n");
echo $randoming;
$data['param_case'] .= $randoming .
"!!**??CASE??**!!";
if (($j+1)==$question['param_count']) {
echo "<br><hr>"; }else{ echo "<br>"; } } }
$data['param_case'] .= "!!**??PARAM??**!!";
fclose($key_pipes[0]);
$key_out = stream_get_contents($key_pipes[1]);
$error = stream_get_contents($key_pipes[2]);
echo $key_out."<br><hr>"; echo $error."<br><hr>";
$data['result'] .= $key_out . "!!**??RESULT??**!!";
$data['error'] .= $error . "!!**??ERROR??**!!";
fclose($key_pipes[2]); fclose($key_pipes[1]); } }
$this->m_question->add_log($data); }
3.3.2. Implementasi Antarmuka
Berikut ini adalah hasil implementasi dari
perancangan antarmuka yang telah dilakukan pada
tahap sebelumnya. Gambar 6 merupakan
implementasi antarmuka pada halaman menambah
pertanyaan, Gambar 7 adalah hasil implementasi
antarmuka pada halaman mengajukan tantangan,
sedangkan Gambar 8 adalah hasil implementasi
antarmuka pada halaman mengerjakan latihan materi.

3.3.1. Implementasi Algoritma

Tabel 3 merupakan hasil implementasi dari
algoritma method test_java() yang telah
dirancang pada tahapan perancangan komponen
sebelumnya.

Tabel 3. Implementasi Algoritma test_java()

public function test_java(){
$key = $_GET['key'];
$param_count = $_GET['param_count'];
$param_case = $_GET['param'];
$question = array(
'key' => $key, 'param_count' => $param_count,
'param_case' => $param_case);
if (isset($_GET['param_type'])) {
$question['param_type']='random';}
$test_case = $question['param_case'];
$data['question_id'] = $_GET['id'];
$data['param_count'] = $_GET['param_count'];
$data['param_case'] = ""; $data['result'] = "";
$data['error'] = "";
$options = ["bypass_shell" => true];
$key_out = ""; $user_out = ""; $return = true;
for($i=0; $i<5; $i++){
$key_proc=proc_open("java -classpath ./java/test
test_compile", array(
array("pipe","r"),
array("pipe","w"),
array("pipe","w")),
$key_pipes,NULL,NULL,$options);
if (is_resource($key_proc)) {
if(!isset($_GET['param_type'])){ Gambar 6. Implementasi Antarmuka Menambah
for($j=0; $j<$question['param_count'];$j++){
fwrite($key_pipes[0], $test_case[$i][$j]."\n"); Pertanyaan
echo $test_case[$i][$j];
$data['param_case'] .= $test_case[$i][$j] .
"!!**??CASE??**!!";
if (($j+1)==$question['param_count']) {
echo "<br><hr>"; }else{ echo "<br>"; } }

Fakultas Ilmu Komputer, Universitas Brawijaya

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer 1498

Tabel 4. Penjelasan Persamaan Kompleksitas

Siklomatis
Simbol Arti
V(G) Jumlah kompleksitas siklomatis
E Sisi atau edge
N Simpul atau node
P Predictate node
R Region
Gambar 7. Implementasi Antarmuka Mengajukan
Tantangan Tabel 5 merupakan hasil dari pengujian unit
yang telah dilakukan pada 3 method sistem
pembelajaran ini yaitu method melakukan
percobaan kode java, menjalankan compile kode
java, dan mengerjakan latihan materi.

Tabel 5. Hasil Pengujian Unit

Method R N E P V(G)
Melakukan percobaan
16 51 65 15 16
kode java

Menjalankan compile
2 7 7 1 2
kode java

Mengerjakan latihan
7 24 29 6 7
materi

3.4.2. Pengujian Validasi

Pengujian validasi dilakukan untuk
memastikan bahwa seluruh kebutuhan
fungsional dari sistem berjalan sesuai dengan
Gambar 8. Implementasi Antarmuka Mengerjakan yang diharapkan menggunakan metode black
Latihan Materi box. Tabel 6 merupakan hasil pengujian validasi
dari 3 method di dalam sistem pembelajaran ini.
3.4. Pengujian
Tabel 6. Hasil Pengujian Validasi
Tahapan selanjutnya ialah pengujian Kasus Uji Hasil Yang Diharapkan Status
terhadap sistem yang telah diimplementasi, pada Sistem menampilkan
penelitian ini dilakukan 2 pengujian yaitu dialog pesan yang berisi
pengujian unit dan pengujian validasi. Melakukan masukan secara random
percobaan serta keluaran yang Valid
3.4.1. Pengujian Unit kode java dihasilkan oleh kode
sumber java sebanyak 5
Pengujian ini dilakukan untuk menentukan kasus.
jumlah cyclomatic complexity (kompleksitas
siklomatis) dan menentukan jalur independen Sistem menampilkan
informasi bahwa compile
dari pseudocode method dalam system yang
kode sumber telah
telah diubah menjadi flow graph. Jumlah Menjalankan
berhasil dan sistem
kompleksitas siklomatis diperoleh dengan compile kode Valid
java menampilkan tombol
menggunakan persamaan (1), (2) dan (3), “Test Code” untuk
kemudian disertai dengan penjelasan pada Tabel melakukan percobaan
4. kode sumber

V(G) = E-N+2 (1) Sistem menampilkan

V(G) = P+1 (2) Mengerjakan halaman riwayat latihan
Valid
latihan materi dan data latihan
V(G) = R (3)
bertambah.

Fakultas Ilmu Komputer, Universitas Brawijaya

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer 1499

4. KESIMPULAN
Kesimpulan yang dapat diambil dari
seluruh proses yang telah dilakukan dalam
penelitian ini adalah sebagai berikut:
1. Hasil perancangan dari penelitian yang
dilakukan adalah sebuah website yang
menerapkan metode gamification dan IOE-
Behavior dengan hasil pengujian black-box
dan white-box 100% valid.
2. Hasil penerapan metode gamification pada
sistem yaitu fitur level setiap member yang
akan bertambah sesuai dengan
meningkatnya exp, penghargaan yang
diberikan kepada member ketika mencapai
kondisi tertentu, serta fitur yang
memungkinkan member untuk menantang
member lain di dalam sistem pembelajaran
pemrograman java.
3. Hasil penerapan metode IOE-Behavior pada
sistem pembelajaran pemrograman java
adalah sistem dapat memeriksa kode sumber
java yang dimasukan oleh member
dibandingkan dengan kunci kode sumber
java yang telah tersedia didalam sistem.

5. DAFTAR PUSTAKA
SOMMERVILE, IAN. 2011. Software
Engineering. Ninth Edition. New York:
Addison – Wesley.
ELVA, ROCHELLA. 2012. ”Semantic Clone
Detection Method IOE-Behavior”.
Department of EECS, University of
Central Florida.
ROMDHONI, WIBOWO. 2014. Penerapan
Gamification Pada Aplikasi Interaktif
Pembelajaran SQL Berbasis Web.
Institut Teknologi Sepuluh November .
Surabaya.

Fakultas Ilmu Komputer, Universitas Brawijaya