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,
3
bayu_priyambadha@ub.ac.id

Abstrak
Pemrograman dasar merupakan ilmu yang wajib dikuasai oleh setiap mahasiswa FILKOM, namun
berdasarkanhasilkuesionerdidapatkanbahwa76%mahasiswaFILKOMlebihtertarikpadamatakuliah
selain pemrograman dasar. Terdapat beberapa hal yang menyebabkan mahasiswa menjadi kurang
tertarikpadamatakuliahpemrogramandasar,terbatasnyasumbermateriyangbisadiperolehdanteknik
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 te
all, 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.
Thereareseveralthingsthatcausestudentstobelessinterestedinthebasicprogrammingcourses,the
limitedsourceofmaterialthatcanbeobtainedandlearningtechniquesthatarelessvaried.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,featurethatallowsuseronechallengeotheruser(challenge),rewardfeatureforuserreaching
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

1493
1. PENDAHULUAN
Pemrograman merupakan ilmu yang
penting untuk dikuasai bagi setiap mahasiswadi
Fakultas Ilmu Komputer (FILKOM)Universitas
Brawijaya, karena salah satu kompetensi yang
harusdimilikiolehmahasiswalulusanFILKOM
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 matakuliah
 Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer e-ISSN: 2548-964X
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.
Pemrograman merupakan ilmu yang
penting untuk dikuasai bagi setiap mahasiswa
di Fakultas Ilmu Komputer
(FILKOM)Universitas Brawijaya, karena salah
satu kompetensi yang
harusdimilikiolehmahasiswalulusanFILKOM
adalah menciptakan perangkat lunak. Saat ini
terdapat beberapa mata kuliah bersifatwajib
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 kuliahpemrograman
dasar kurang diminati oleh mahasiswa ialah,
banyaknya mahasiswa berlatar belakang
pendidikan Sekolah Menengah Atas (SMA)
yang tidak memiliki pengetahuan dasar
mengenai pemrogramanjava.
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. IOEBehavior
Input, Output and Effects Behavior
merupakan sebuah metode yang digunakan
dalammendeteksikloningkodesecarasemantik.
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) kalipemeriksaan.
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
metodeSystemDevelopmentLifeCycle(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
padamodelwaterfalldilakukansecaraberurutan
yakni analisis kebutuhan, perancangan sistem,
implementasi sistem, pengujian sistem dan
pemeliharaansistem.
3. HASIL DANPEMBAHASAN
3.1. AnalisisKebutuhan
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
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 Gambar 2. Diagram Use Case Member dan
Pengguna
perilaku dan aktor yang bertindak pada sistem,
diagram use case ini dibuat berdasarkan pada
3.2. Perancangan
kebutuhan fungsional sistem yang telah dibuat
sebelumnya. Kemudian digambarkan diagram Pada tahap perancangan dilakukan
berdasarkan aktor yang bertindak pada beberapahalyangakandigunakansebagaiacuan
fungsionalitas tersebut. Berikut ini merupakan dalam proses implementasi, yakni pembuatan
diagram usecase dari sistem pembelajaran diagram-diagram perancangan perangkat lunak
pemrograman java beserta aktor yang dapat yang meliputi diagram sequence, diagram
berinteraksi dengan perangkat lunak pada class, relational data model, perancangan
Gambar 1 dan Gambar 2. komponen sistem dan perancangan
antarmukapengguna.

3.2.1. PerancanganKomponen
Perancangan komponen merupakan
dekomposisi sub-sistem menjadi komponen
detail. Perancangan komponen menjelaskan
atributdanalgoritmamethoddalamsebuahclass
yang telah dimodelkan sebelumnya pada
pemodelan class diagram. Tabel 2 merupakan
algoritmadarimethodtest_java()yangberfungsi
untuk melakukan pemeriksaan terhadap kode
java.

Tabel 2. Algoritma method test_java()

Gambar 1. Diagram Use Case Admin

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
 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
untilquestion.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
CALL FUNCTION random_value as randomval
Rancangan antarmuka pengguna untuk
push randomval to array randoming halaman mengajukan tantangan dapat dilihat
fwrite key_pipes.0 with randomval
END FOR melalui Gambar 4, halaman tersebut meminta
END IF konfirmasi pengguna dalam mengajukan
fclose keypipes.0
key_out = stream_get_contents from key_pipes.1 tantangan kepada pengguna lain.
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
untilquestion.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
IF key_out = user_out
Halaman mengerjakan latihan materi yang
add "True" to data.answer terdapat pada Gambar 5 menampilkan
ELSE
add "False" todata.answer penjelasan soal beserta form source code yang
ENDIF akan dimasukkan oleh aktor yang digunakan
ENDFOR
DB insert to exercise with array data untuk menjawab dan tombol “submit answer”
END test_java digunakan untuk memastikan jawaban yang
dimasukkan dengan benar.
3.2.2. PerancanganAntarmuka
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.
 }else{
for($j=0; $j<$question['param_count'];$j++){
$randoming = $this->random_value(); fwrite($key_pipes[0], $randoming."\n"); echo $randoming;

$data['param_case'] "!!**??CASE??**!!"; .= $randoming.

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); }

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.
3.3.2. ImplementasiAntarmuka
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
antarmukapadahalamanmengerjakanlatihanmateri.

3.3.1. ImplementasiAlgoritma
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 test_compile", array(

-classpath ./java/test
array("pipe","r"),
array("pipe","w"),
array("pipe","w")),

$key_pipes,NULL,NULL,$options); if (is_resource($key_proc)) {
if(!isset($_GET['param_type'])){
for($j=0; $j<$question['param_count'];$j++){ fwrite($key_pipes[0], $test_case[$i][$j]."\n"); echo $test_case[$i][$j];
Gambar 6. Implementasi Antarmuka Menambah
$data['param_case'].=$test_case[$i][$j]. "!!**??CASE??**!!";
if (($j+1)==$question['param_count']) { echo "<br><hr>"; }else{ echo "<br>"; } } Pertanyaan
 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 Tabel5merupakanhasildaripengujianunit
yang telah dilakukan pada 3 method sistem
pembelajaran ini yaitu method melakukan
percobaan kode java, menjalankan compilekode
java, dan mengerjakan latihanmateri.

Tabel 5. Hasil PengujianUnit

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
materi 7 24 29 6 7

3.4.2. PengujianValidasi
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 pengujianvalidasi
dari 3 method di dalam sistem pembelajaranini.
3.4. Pengujian
KasusUji Hasil YangDiharapkan
Tabel 6. Hasil PengujianValidasi Status
Tahapan selanjutnya ialah pengujian Sistem menampilkan
terhadapsistemyangtelahdiimplementasi,pada dialog pesan yang berisi
penelitian ini dilakukan 2 pengujian yaitu Melakukan masukan secara
pengujian unit dan pengujianvalidasi. percobaan random serta keluaran Valid
kode java yang dihasilkan oleh
3.4.1. PengujianUnit kode sumber java
sebanyak 5 kasus.
Pengujian ini dilakukan untuk menentukan
jumlah cyclomatic complexity (kompleksitas Sistem menampilkan
informasi bahwa
siklomatis) dan menentukan jalur independen
compile kode sumber
dari pseudocode method dalam system yang Menjalankan
telah berhasil dan sistem
telah diubah menjadi flow graph. Jumlah compile kode Valid
java menampilkan tombol
kompleksitas siklomatis diperoleh dengan “Test Code” untuk
menggunakan persamaan (1), (2) dan (3), melakukan percobaan
kemudiandisertaidenganpenjelasanpadaTabel 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.
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
pemrogramanjava.
3. Hasil penerapan metode IOE-Behavior pada
sistem pembelajaran pemrograman java
adalahsistemdapatmemeriksakodesumber
java yang dimasukan oleh member
dibandingkan dengan kunci kode sumber
java yang telah tersedia didalamsistem.

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.

Tugas
1.Carilah journal penelitian dan buat
 kesimpulan dari metode yang digunakan

1).Penelitian ini menggunakan model waterfall yang merupakan salah satu model dari
metodeSystemDevelopmentLifeCycle(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
padamodelwaterfalldilakukansecaraberurutan yakni analisis kebutuhan, perancangan sistem,
implementasi sistem, pengujian sistem dan pemeliharaansistem.

2).Penelitian ini membahas tentang bagaimana cara

mengembangkan sistem pembelajaran pemprograman
java yang atraktif dikarenakan sebanyak 76%
mahasiswa tidak tertarik dengan mata kuliah ini
berdasarkan dari hasil kuesioner.
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.