## TEKNO Jurnal Teknologi Elektro dan Kejuruan
http://journal2.um.ac.id/index.php/tekno | ISSN 1693-8739 / 2686-4657
TEKNO Vol. 29 Issue 2, p161-177 | Jurusan Teknik Elektro, Universitas Negeri Malang, Indonesia | September 2019 R. F. Arif, H. A. Rosyid | Pengembangan aplikasi web dengan gamifikasi sebagai media pendukung …

## Pengembangan aplikasi web dengan gamifikasi sebagai media pendukung pembelajaran untuk mata pelajaran pemrograman dasar
Rahadyan Fannani Arif 1 , Harits Ar Rosyid 2
1. Universitas Negeri Malang, Indonesia | rahadyan.fannani.1405334@students.um.ac.id
2. Universitas Negeri Malang, Indonesia | harits.ar.ft@um.ac.id

## Abstrak
Siswa  SMK  dan  MAK  program  keahlian  Rekayasa  Perangkat  Lunak  dituntut  memiliki  kemampuan pemrograman web. Mata pelajaran ini sangat  penting dikarenakan banyak digunakan  diindustri saat  ini. Dan  pengembangan  dari  teknologi  web  sendiri  sangat  beragam.  Sehingga  Mata  Pelajaran  ini  penting untuk  dipahami  oleh  siswa  SMK  jurusan  RPL.  Sedangkan  penunjang  untuk  pembelajaran  web  di  SMK masih  kurang,  dikarenakan  siswa  masih  menggunakan  cara  konvensional.  Permasalahannya  adalah siswa  banyak  yang  kurang  memahami  saat  mengikuti  instruksi  yang  ada  di  modul.  Penelitian  ini bertujuan mengembangkan Web Application sebagai penunjang pembelajaran dengan unsur gamifikasi. Metode  yang  digunakan  dalam  penelitian  ini  adalah  metode  penelitian  dan  pengembangan.  Penelitian dan  pengembangan  ini  menggunakan  model  pengembangan  media  model  ADDIE  dan  model Prototyping. Hasil uji validasi yang dilakukan oleh para ahli, media yang dikembangkan dinyatakan valid, dengan persentase sebesar 95,24% oleh ahli materi  dan 94,17% oleh ahli media. Berdasarkan uji coba kelayakan  yang  telah  dilaksanakan  di  SMKN  4  Malang, diperoleh  persentase  sebesar  87,63%  untuk  uji coba kelompok kecil, dan 91,93% untuk uji coba kelompok besar. Dari rangkaian uji validasi dan uji coba tersebut, dapat dinyatakan bahwa secara keseluruhan, media yang dikembangkan telah valid dan layak digunakan sebagai penunjang proses pembelajaran mata pelajaran Pemrograman Dasar.

## Kata Kunci
E-learning, gamifikasi, web application, pemrograman dasar, sekolah kejuruan

## TEKNO Jurnal Teknologi Elektro dan Kejuruan
http://journal2.um.ac.id/index.php/tekno | ISSN 1693-8739 / 2686-4657
TEKNO Vol. 29 Issue 2, p161-177 | Jurusan Teknik Elektro, Universitas Negeri Malang, Indonesia | September 2019 R. F. Arif, H. A. Rosyid | Pengembangan aplikasi web dengan gamifikasi sebagai media pendukung …

## 1.  Pendahuluan
Pemrograman  Dasar  merupakan  salah  satu  mata  pelajaran  Dasar  Program  Keahlian  yang wajib  ditempuh  siswa  kelas  X  Program  Keahlian  Rekayasa  Perangkat  Lunak.  Mata  pelajaran Pemrograman  Dasar  adalah  dasar  untuk  pembelajaran  pemrograman  lainnya  seperti Pemrograman  Web,  Pemrograman  Dekstop,  dan  lain-lain.  Sehingga  apabila  kompetensi  ini tidak dikuasai, akan menyulitkan siswa untuk memahami mata pelajaran pemrograman dengan tingkat lebih lanjut. Oleh karena itu, siswa dituntut untuk aktif dalam pembelajaran.
Berdasarkan  hasil  observasi  wawancara  dan  lesson  study  yang  dilakukan  di  SMKN  4 Malang, Platform yang digunakan untuk membuat interface yaitu Platform Web, sehingga siswa diharapkan  untuk  menguasai  bahasa  HTML,  CSS,  dan  Javascript.  Namun  pemrograman interface  ini  menjadi  sulit  dimengerti  dan  dipahami  dikarenakan  banyaknya  kombinasi  bahasa pemrograman,  sehingga  siswa  bingung  dengan  maksud  dari  script  yang  ditulisnya. Berdasarkan  hasil  observasi  dan  wawancara  pada  guru  pengampu  Pemrograman  Dasar  di SMKN  4  Malang,  metode  pembelajaran  masih  menggunakan  metode  konvensional,  yaitu menggunakan modul  yang  berisikan  materi  dan soal  praktek. Guru  akan  menjelaskan terlebih dahulu  setelah  itu  siswa  akan  mengerjakan  soal  pada  modul  dengan  menggunakan  software Integrated Development Environment (IDE) di masing-masing perangkatnya.
Pembelajaran  secara  konvensional  menggunakan  modul  yang  kurang  interaktif menghasilkan tingkat pemahaman materi pelajaran yang rendah (Rumansyah, 2016) dan hanya menekankan pada aspek kognitif peserta didik. Peserta didik hanya bersikap pasif dan merasa bosan.  Sejalan  dengan  pernyataan  tersebut,  seorang  pendidik  yang  menggunakan  proses pembelajaran  tradisional  dengan  hanya  menjadikan  buku  sebagai  sumber  utama  informasi dapat  menjadikan  peserta  didik  merasa  bosan  dan  kurang  tertarik  pada  mata  pelajaran  yang bersangkutan.  Karena  kurangnya  interaktif  dari  media  yang  digunakan,  siswa  menjadi  kurang aktif  dalam  mencari  solusi  dari  soal  yang  diberikan  (Yulia  dan  Arifin,  2016),  dikarenakan feedback dari media yang digunakan masih kurang.
Gamifikasi  adalah  pendekatan  pembelajaran  menggunakan  elemen-elemen  di  dalam permainan  atau  video  game  dengan  tujuan  memotivasi  para  peserta  didik  dalam  proses pembelajaran  dan  memaksimalkan  perasaan  enjoy  dan  engagement  terhadap  proses pembelajaran tersebut (Jusuf, 2016; Suhendi dan Adriansyah, 2018). Selain itu, media ini dapat digunakan  untuk  menangkap  hal-hal  yang  menarik  minat  siswa  dan  menginspirasinya  untuk terus  melakukan  pembelajaran.  Gamifikasi,  memberikan  alternatif  untuk  membuat  proses belajar lebih menarik, menyenangkan, dan efektif (Prambayun dan Farozi, 2015; Maryanto dkk, 2017; Aini dkk, 2018; Farida dkk, 2018; Pratomo, 2018).
Berdasarkan  permasalahan  tersebut,  peneliti  tertarik  untuk  mengembangkan  Media pembelajaran  berbasis  Web  Application  dengan  gamifikasi.  Web  Application  tersebut  berisi konten  pembelajaran  untuk  mata  pelajaran  pemrograman  dasar  kelas  X  dengan  standar kompetensi  sesuai  dengan  struktur  kurikulum  2013  revisi  2017.  Oleh  sebab  itu,  penelitian  ini dikembangkan  dengan  judul  “Pengembangan  Web  Application  dengan  Menggunakan

## TEKNO Jurnal Teknologi Elektro dan Kejuruan
http://journal2.um.ac.id/index.php/tekno | ISSN 1693-8739 / 2686-4657
TEKNO Vol. 29 Issue 2, p161-177 | Jurusan Teknik Elektro, Universitas Negeri Malang, Indonesia | September 2019 R. F. Arif, H. A. Rosyid | Pengembangan aplikasi web dengan gamifikasi sebagai media pendukung …
Gamifikasi  Sebagai  Media  Pendukung  Pembelajaran  untuk  Mata  Pelajaran  Pemrograman Dasar Kelas X di SMKN 4”. Web Application tersebut menyediakan sarana bagi pendidik untuk membuat courses online berbentuk Interactive Coding dengan teknik gamifikasi.

## 2.  Metode
Penelitian dan pengembangan produk ini menggunakan model ADDIE. Model ADDIE terdiri dari  lima  tahapan  pengembangan  media  pembelajaran  (Trisiana  dan  Wartoyo,  2016)  yaitu: analisis,  desain,  pengembangan,  implementasi,  dan  evaluasi.  Sedangkan  di  bagian pengembangan  menggunakan  metodologi  pengembangan  perangkat  lunak  Prototyping. Diagram model pengembangan ADDIE dan prototyping ditunjukkan seperti pada Gambar 1.
Implementation Analysis Design Development Evaluate Gather Requirement System Design Implementation Evaluate

## TEKNO Jurnal Teknologi Elektro dan Kejuruan
http://journal2.um.ac.id/index.php/tekno | ISSN 1693-8739 / 2686-4657
TEKNO Vol. 29 Issue 2, p161-177 | Jurusan Teknik Elektro, Universitas Negeri Malang, Indonesia | September 2019 R. F. Arif, H. A. Rosyid | Pengembangan aplikasi web dengan gamifikasi sebagai media pendukung …
Gambar 1. Diagram model pengembangan ADDIE dan prototyping

## 1)  Tahap Analisa
Sebelum  melakukan  analisa  kebutuhan  perlu  dilakukan  identifikasi  masalah  mengenai proses  pembelajaran  pada  mata  pelajaran  pemrograman  dasar  pada  SMKN  4  Malang. Untuk mengidentifikasi masalah tersebut dilakukan observasi wawancara dan lesson study. Setelah  permasalahan  telah  ditemukan,  selanjutnya  dapat  diidentifikasi  kebutuhan  dalam pengembangan  Web  Application  untuk  pembelajaran  pemrograman  dasar.  Analisa kebutuhan  ini  digunakan  sebagai  acuan  dalam  pengembangan  media  pembelajaran nantinya. Hal yang dianalisa adalah kebutuhan dari guru dan siswa, jenis bahan ajar yang akan dikembangkan dan materi Pemrograman Dasar yang akan dijadikan materi
2)  Tahap Desain
Pada  tahapan  ini  dilakukan  perencanaan  desain  sistem  yang  digunakan  sebagai  media pembelajaran  pemrograman  dasar  sesuai  dari  hasil  pada  tahap  analisis.  Tahap  ini  terdiri dari  perancangan  materi,  perancangan  UML  (use  case,  flow  diagram,  dan  flowchart)  dan perancangan antar muka pengguna, menyusun instrumen pengujian, serta evaluasi.

## 3)  Tahap Pengembangan
a)  Analisis Kebutuhan Sistem
Analisis  dilakukan  untuk  melihat  berbagai  komponen  yang  dipakai  sistem  yang  sedang berjalan  meliputi  hardware,  software,  jaringan  dan  sumber  daya  manusia.  Analisa kebutuhan  sistem  dari  media  yang  dikembangkan  adalah  sebagai  berikut:  (a)  Dapat menangani  minimal  45  koneksi  secara  simultan;  (b)  Komunikasi  data  secara  Real-Time untuk  menangani  fitur  gamifikasi;  (c)  Dapat  berkomunikasi  dua  arah  antara  Server  dan Client;  (d)  Dapat  bekerja  secara  offline;  (e)  Keamanan  API;  (f)  Dapat  dikembangkan berkelanjutan.

## b)  Desain Sistem
Sistem akan dibagi menjadi 2 bagan yaitu bagian client dan API Server. Pada bagian client terdapat  3  teknologi  utama,  yaitu  single  page  application  yang  digunakan  sebagai  tempat user  interface  dari  aplikasi  yang  berjalan,  state  management  yang  digunakan  untuk mengolah state pada web application, dan local storage yang digunakan untuk menyimpan data  pada  sisi  client.  Pada  bagian  API  Server  terdapat  4  komponen  utama  yaitu authentication  yang  bertugas  untuk  memberikan  otorisasi  dan  menentukan  hak  akses terhadap pengguna, API Query yang digunakan sebagai metode untuk komunikasi dengan server, nodejs yang digunakan sebagai bahasa pemrograman di sisi server, dan MongoDB yang digunakan sebagai database pada server.

## TEKNO Jurnal Teknologi Elektro dan Kejuruan
http://journal2.um.ac.id/index.php/tekno | ISSN 1693-8739 / 2686-4657
TEKNO Vol. 29 Issue 2, p161-177 | Jurusan Teknik Elektro, Universitas Negeri Malang, Indonesia | September 2019 R. F. Arif, H. A. Rosyid | Pengembangan aplikasi web dengan gamifikasi sebagai media pendukung …

## c)  Membangun Prototype
Pada  tahap  ini  dibuat  prototype  dengan  konsep  yang  sederhana  dan  fitur  yang  minimal dengan pembuatan secepat mungkin tetapi dapat memenuhi kebutuhan inti pengguna atau disebut juga dengan Minimum Viable Product (MVP). Pembuatan MVP ini digunakan untuk menvalidasi  apakah  fungsi  dasar,  User  Interface  dan  User  Experience  yang  akan  dibuat dapat sesuai dengan tujuan pengembangan ini. Pada MVP ini akan dikembangkan produk dengan  alur  utama  aplikasi  yaitu  mulai  daftar  pengguna  sampai  penentuan  score  pemain, tanpa fitur tambahan seperti Leaderboard, Social, Achievement dan lain-lain.
d)  Pengujian Sistem
Pada  tahap  ini  akan  dilakukan  uji  coba  terhadap  prototype,  apakah  sudah  sesuai  dengan apa yang diharapkan. Hasil dari uji coba tersebut akan dijadikan evaluasi apakah prototype tersebut masih memiliki kekurangan, jika masih terdapat kekurangan  maka akan diperbaiki dan dilakukan uji coba kembali. Hal yang perlu divalidasi adalah fungsi dasar, User Interface dan User Experience.
e)  Implementasi Sistem
Pada  tahap  ini  aplikasi  web  akan  di  deploy  ke  server  sehingga  dapat  diakses  melalui koneksi  internet.  Untuk  proses  deployment  ini  menggunakan  alat  yang  bernama  Docker. Docker  adalah  platform  yang  digunakan  untuk  menjalankan  aplikasi  web  dimanapun menggunakan  wadah  (Container)  sehingga  memungkinkan  suatu  aplikasi  web  berjalan  di lingkungan  manapun  dengan  konsisten.  Container  sendiri  adalah  suatu  konsep  yang menggantikan  model  virtual  machine  dengan  ukuran  yang  lebih  kecil  dan  beban  yang ringan.
4)  Tahap Desain
Pada tahapan ini media pembelajaran akan diimplementasikan pada siswa kelas X RPL di SMK  Negeri  4  Malang  untuk  dilakukan  uji  coba  akhir.  Siswa  akan  mencoba mengoperasikan  media  pembelajaran  yang  sudah  dikembangan  sebelum  nantinya  siswa diminta untuk menilai media pembelajaran di tahap evaluasi. Uji coba ini terdapat 2 siklus yaitu uji coba kelompok kecil sejumlah 12 orang dan uji coba kelompok besar sejumlah 30 orang.
5)  Tahap Evaluasi
Pada model penelitian dan pengembangan ADDIE, terdapat tahap evaluasi yang dilakukan di  setiap  tahapan.  Tahapan  ini  digunakan  untuk  memperbaiki  pada  setiap  tahapan  jika terdapat  hal  yang  tidak  sesuai.  Dengan  adanya  tahapan  ini  proses  penelitian  dan

## TEKNO Jurnal Teknologi Elektro dan Kejuruan
http://journal2.um.ac.id/index.php/tekno | ISSN 1693-8739 / 2686-4657
TEKNO Vol. 29 Issue 2, p161-177 | Jurusan Teknik Elektro, Universitas Negeri Malang, Indonesia | September 2019 R. F. Arif, H. A. Rosyid | Pengembangan aplikasi web dengan gamifikasi sebagai media pendukung …
pengembangan  menjadi  lebih  dinamis  dan  pada  akhirnya  dapat  menyesuaikan  dengan kondisi di lapangan, sehingga produk yang dihasilkan lebih maksimal. Validasi dan uji coba produk terdiri dari beberapa langkah, yaitu:

## a)  Validasi Produk
Validasi  produk  terdapat  dua  bagian,  yaitu  validasi  media  dan  validasi  materi.  Ahli  media dan materi untuk pengembangan media ini dilakukan oleh dosen Program Studi Pendidikan Teknik  Informatika,  Teknik  Elektro,  Universitas  Negeri  Malang  yang  telah  kompeten dibidangnya dan guru pengampu mata pelajaran Pemrograman Dasar kelas X RPL di SMK Negeri  4  Malang.  Ahli  media  bertugas  menilai  kelayakan  dari  media  yang  telah dikembangkan.
b)  Uji Coba Kelompok Kecil
Subjek  uji  coba  pada  kelompok  kecil  menggunakan  12  siswa  kelas  X  RPL  SMK  Negeri  4 Malang sebagai sampel dan dipilih dari rentang dibawah rata-rata, sedang, dan di atas rata- rata.
c)  Uji Coba Kelompok Besar
Uji coba kelompok besar dilakukan oleh siswa kelas X RPL di SMK Negeri 4 Malang. Pada uji  coba  lapangan  ini  siswa  yang  diambil  sebagai  sampel  lebih  banyak  daripada  uji  coba kelompok kecil. Siswa yang digunakan sebagai sampel minimal 30 orang. Pada tahap inilah yang menentukan media dikatakan valid atau tidak.
Jenis data yang didapat dari uji coba diatas adalah data kuantitatif dan data kualitatif. Data kuantitatif  dalam  penelitian  ini  ialah  penilaian  media  dari  hasil  angket  yang  disebarkan kepada ahli media, ahli materi, dan peserta didik kelas X Program Keahlian RPL dari SMK Negeri  4  Malang.  Dari  angket  tersebut  akan  diperoleh  data  dengan  menghitung  skor jawaban. Data kualitatif merupakan data yang berbentuk kalimat, kata, atau gambar. Dalam penelitian  ini,  data  kualitatif  didapatkan  dari  tanggapan  oleh  ahli  materi,  ahli  media,  dan responden. Data tersebut berupa kritik, saran, dan komentar mengenai media.
Angket  tersebut menggunakan teknik  4  skala  likert,  agar  tidak  terdapat jawaban  ragu-ragu dari subjek uji coba. Berdasarkan data kuantitatif tersebut akan diketahui tingkat kevalidan dan  kelayakan  dari  bahan  ajar  yang  dikembangkan.  Dalam  penentuan  hasil kelayakan/kevalidan  dilakukan  dengan  menggunakan  kriteria  penilaian  yang  dapat  dilihat pada Tabel 1.
Tabel 1. Kriteria penilaian kelayakan bahan ajar No Persentase Indikator Keterangan 1 76% - 100,00% Valid Layak dan tidak perlu direvisi 2 51% - 75,00% Cukup valid Cukup layak dan perlu revisi kecil 3 26% - 50,00% Kurang valid Kurang layak dan perlu revisi sebagian

## TEKNO Jurnal Teknologi Elektro dan Kejuruan
http://journal2.um.ac.id/index.php/tekno | ISSN 1693-8739 / 2686-4657
TEKNO Vol. 29 Issue 2, p161-177 | Jurusan Teknik Elektro, Universitas Negeri Malang, Indonesia | September 2019 R. F. Arif, H. A. Rosyid | Pengembangan aplikasi web dengan gamifikasi sebagai media pendukung …
4 < 26% Tidak valid Tidak valid gunakan dan perlu revisi keseluruhan

## 3.  Hasil dan Pembahasan
Media  pembelajaran  yang  dihasilkan  berupa  Web  Application  yang  berisi  konten pembelajaran  untuk  mata  pelajaran  pemrograman  dasar  kelas  X  dengan  standar  kompetensi sesuai  dengan  struktur  kurikulum  2013  revisi  2017  yang  dikemas  dengan  gamifikasi.  Materi pembelajaran yang diajarkan yaitu HTML, CSS, dan Javascript. Dalam media pembelajaran ini, peserta  didik  akan  melakukan  programming  secara  daring.  Sistem  secara  realtime  akan menampilkan hasil dari script yang ditulis oleh peserta didik. Berikut merupakan hasil tampilan antarmuka media pembelajaran:

## 1)  Halaman Welcome
Halaman ini berisi pengenalan media pembelajaran, Pada header terdapat dua menu, yaitu menu daftar dan masuk. Menu daftar akan membawa pengguna ke halaman pendaftaran, sedangkan  menu  masuk  akan  membawa  pengguna  ke  halaman  masuk  yang  digunakan untuk melakukan otentikasi untuk masuk ke media pembelajaran. Selain itu terdapat menu mulai yang ditujukan untuk pengguna yang baru memulai. Gambar 2.
Gambar 2. Halaman Welcome

## TEKNO Jurnal Teknologi Elektro dan Kejuruan
http://journal2.um.ac.id/index.php/tekno | ISSN 1693-8739 / 2686-4657
TEKNO Vol. 29 Issue 2, p161-177 | Jurusan Teknik Elektro, Universitas Negeri Malang, Indonesia | September 2019 R. F. Arif, H. A. Rosyid | Pengembangan aplikasi web dengan gamifikasi sebagai media pendukung …

## 2)  Halaman Sign In
Halaman  Sign  In  digunakan  untuk  melakukan  autentikasi  sebelum  masuk  ke  media pembelajaran.  Pada  Form  Sign  In  terdapat  2  input  yaitu  email  dan  password,  selain  itu terdapat 2 tombol yaitu tombol SIGN IN yang digunakan untuk melakukan autentikasi dan tombol SIGN UP yang akan membawa pengguna ke halaman pendaftaran. Jika email dan password yang dimasukkan sudah benar maka akan dialihkan ke halaman dashboard user, jika salah maka akan keluar peringatan bahwa email atau password salah (Gambar 3).
Gambar 3. Halaman Sign In

## 3)  Halaman Sign Up
Halaman  Sign  Up  (Gambar  4)  digunakan  untuk  melakukan  pendaftaran  jika  pengguna belum  memiliki  akun.  Pada  halaman  Sign  Up  terdapat  3  input  yaitu  nama,  email,  dan password  yang  wajib  untuk  diisi.  Jika  pengguna  sudah  melengkapi  form  tersebut,  maka selanjutnya  yaitu  menekan  tombol  SIGN  UP  yang  digunakan  untuk  mengirim  data pendaftaran ke server dan menyimpannya, jika proses pendaftaran berhasil maka halaman akan  dialihkan  ke  halaman  Sign  In,  jika  gagal  maka  akan  keluar  peringatan  seperti  kalau email sudah ada yang menggunakan.

## TEKNO Jurnal Teknologi Elektro dan Kejuruan
http://journal2.um.ac.id/index.php/tekno | ISSN 1693-8739 / 2686-4657
TEKNO Vol. 29 Issue 2, p161-177 | Jurusan Teknik Elektro, Universitas Negeri Malang, Indonesia | September 2019 R. F. Arif, H. A. Rosyid | Pengembangan aplikasi web dengan gamifikasi sebagai media pendukung …

## Gambar 4. Halaman Sign Up

## 4)  Halaman Dashboard
Halaman  Dashboard  (Gambar  5)  adalah  halaman  awal  setelah  pengguna  melakukan otentikasi.  Halaman  ini  akan  menampilkan  rangkuman  progress  pengguna.  Data  yang ditampilkan  yaitu  total  achievement,  badges,  dan  stars  yang  berhasil  dikumpulkan  oleh siswa.  Selain  itu  terdapat  informasi  level  dan  experience  point  (exp),  semakin  tinggi  nilai exp  maka  level  juga  semakin  tinggi.  Dibawah  bagian  User  Summary  terdapat  bagian  My Course dan Daily Target. My Course adalah daftar pembelajaran yang sedang diambil oleh pengguna.  Sedangkan  Daily  Target  adalah  target  harian  exp  yang  harus  dicapai  untuk mendapatkan achievement.
Gambar 5. Halaman Dashboard

## TEKNO Jurnal Teknologi Elektro dan Kejuruan
http://journal2.um.ac.id/index.php/tekno | ISSN 1693-8739 / 2686-4657
TEKNO Vol. 29 Issue 2, p161-177 | Jurusan Teknik Elektro, Universitas Negeri Malang, Indonesia | September 2019 R. F. Arif, H. A. Rosyid | Pengembangan aplikasi web dengan gamifikasi sebagai media pendukung …

## 5)  Halaman Achievement
Pada halaman achievement (Gambar 6) terdapat 2 bagian yaitu achievement dan badges. Untuk  mendapatkan  achievement  pengguna  harus  memenuhi  syarat  yang  ada  pada achievement  tersebut.  Jika  berhasil  terpenuhi  maka  bintang  akan  bertambah  dan  akan muncul syarat baru yang lebih menantang untuk mendapatkan bintang berikutnya. Badges didapatkan jika pengguna berhasil menyelesaikan 1 course. Pada contoh diatas pengguna mendapatkan  badges  “Dasar  Javascript”  yang  berarti  pengguna  sudah  menyelesaikan Course “Dasar Javascript”.
Gambar 6. Halaman Achievement
6)  Halaman Daftar Course
Halaman  Daftar  Course  (Gambar  7)  menampilkan  semua  Course  yang  bisa  diambil  oleh pengguna.  Pada  gambar  diatas  terdapat  3  Course  yaitu  HTML  Dasar,  CSS  Dasar,  dan Javascript  Dasar.  Setiap  pengguna  bebas  untuk  memilih  course  yang  akan  dijalankan. Pada  setiap  course  ini  nantinya  akan  terdapat  beberapa  stage  yang  harus  diselesaikan secara berurutan.
Gambar 7. Halaman Daftar Course

## TEKNO Jurnal Teknologi Elektro dan Kejuruan
http://journal2.um.ac.id/index.php/tekno | ISSN 1693-8739 / 2686-4657
TEKNO Vol. 29 Issue 2, p161-177 | Jurusan Teknik Elektro, Universitas Negeri Malang, Indonesia | September 2019 R. F. Arif, H. A. Rosyid | Pengembangan aplikasi web dengan gamifikasi sebagai media pendukung …

## 7)  Halaman Daftar Stage
Halaman  ini  akan  menampilkan  daftar  Stage  dari  Course  beserta  dengan  Leaderboard score tertinggi yang berhasil didapatkan oleh pengguna pada Course tersebut (Gambar 8). Stage harus diselesaikan secara berurutan, Stage dengan ikon gembok adalah Stage yang masih  belum  bisa  dimainkan  dikarenakan  Stage  sebelumnya  belum  berhasil  diselesaikan. Jika  pengguna  sudah  berhasil  menyelesaikan  stage  tersebut,  maka  akan  keluar  icon bintang  yang  menandakan  bintang  yang  berhasil  didapatkan  oleh  pengguna  pada  stage tersebut.  Pada  bagian  learderboard  akan  muncul  10  nama  pengguna  yang  berhasil mendapatkan score akumulatif tertinggi pada course tersebut.
Gambar 8. Halaman Daftar Stage

## 8)  Halaman Stage
Halaman  Stage  (Gambar  9)  adalah  halaman  dimana  pengguna  akan  melakukan  proses pembelajaran  dengan  cara  menyelesaikan  misi-misi  yang  ada  pada  halaman  tersebut. Disini  pengguna  dituntut  untuk  menyelesaikan  misi  tersebut  dengan  waktu  sesingkat- singkatnya  dan  minim  kesalahan  untuk  mendapatkan  skor  yang  tinggi.  Pada  Halaman Stage  terdapat  5  bagian  yaitu  bagian  Status  Bar,  Guide,  Interactive  Coding,  Output  dan Navigation.  Setiap  bagian  tersebut  memiliki  fungsionalitasnya  masing-masing  untuk membantu siswa dalam proses pembelajaran.

## TEKNO Jurnal Teknologi Elektro dan Kejuruan
http://journal2.um.ac.id/index.php/tekno | ISSN 1693-8739 / 2686-4657
TEKNO Vol. 29 Issue 2, p161-177 | Jurusan Teknik Elektro, Universitas Negeri Malang, Indonesia | September 2019 R. F. Arif, H. A. Rosyid | Pengembangan aplikasi web dengan gamifikasi sebagai media pendukung …

## Gambar 9. Halaman Stage
Pada  bagian  Status  Bar  terdapat  informasi  nyawa,  skor,  dan  waktu.  Nyawa  akan berkurang jika pengguna melakukan kesalahan saat pemeriksaan kode. Jika nyawa habis maka pengguna  harus  mengulang  stage  tersebut.  Informasi  skor  akan  bertambah  setiap  pengguna berhasil  menyelesaikan  misi.  Informasi  waktu  memberikan  informasi  tentang  berapa  lama pengguna dalam pengerjaan. Semakin singkatnya waktunya maka semakin baik.
Bagian  navigasi  berfungsi  untuk  melakukan  navigasi  antar  stage,  dan  melihat  daftar  Stage dari  Course  yang  sedang  dijalankan.  Navigasi  hanya  dapat  dilakukan  pada  stage  yang  sudah terbuka.  Terdapat  2  bagian  navigasi  yaitu  dibagian  sidebar  yang  menampilkan  daftar  stage pada  course  yang  dijalankan,  dan  di  bagian  footer  yang  digunakan  untuk  melakukan  navigasi secara maju atau mundur.
Bagian  Guide  akan  menampilkan  materi  yang  berkaitan  dengan  Stage  tersebut  materi tersebut  nantinya  akan  dibaca  oleh  siswa  terlebih  dahulu  sebelum  melanjutkan  untuk mengerjakan misi. Materi tersebut bersifat rich content, dalam artian tidak hanya media tulisan yang  bisa  ditampilkan  melainkan  bisa  juga  gambar,  audio,  maupun  video.    Selain  itu  bagian guide  juga  menampilkan  daftar  misi  yang  harus  diselesaikan  oleh  pengguna.  Daftar  misi tersebut akan berwarna hijau jika sudah berhasil diselesaikan.
Bagian  Interactive  Coding  adalah  tempat  bagi  pengguna  untuk  menuliskan  script  sesuai dengan  misi  yang  harus  diselesaikan.  Seperti  layaknya  pada  editor  pemrograman,  pada Interactive  Coding  ini  juga  terdapat  Syntax  Highlighting  untuk  memudahkan  pengguna  dalam melakukan  pemrograman.  Pada  bagian  ini  terdapat  3  tombol  yaitu  Jalankan,  Periksa,  dan Expand.  Tombol  Jalankan  digunakan  untuk  menjalankan  script  dan  hasilnya  akan  ditampilkan pada  bagian  Output.  Tombol  Periksa  digunakan  untuk  mengirimkan  script  jika  sudah  dirasa

## TEKNO Jurnal Teknologi Elektro dan Kejuruan
http://journal2.um.ac.id/index.php/tekno | ISSN 1693-8739 / 2686-4657
TEKNO Vol. 29 Issue 2, p161-177 | Jurusan Teknik Elektro, Universitas Negeri Malang, Indonesia | September 2019 R. F. Arif, H. A. Rosyid | Pengembangan aplikasi web dengan gamifikasi sebagai media pendukung …
benar  untuk  diverifikasi  apakah  script  yang  diketik  sudah  sesuai  dengan  persyaratan  misi. Tombol Expand digunakan untuk memperluas bagian Interactive Coding.
Bagian Output berfungsi seperti layaknya browser¸ bagian ini akan menampilkan hasil output sesuai  dengan  script  yang  diketik.  Terdapat  3  tombol  yaitu  Output,  Console,  dan  Expand. Tombol  Output  digunakan  untuk  mengganti  tampilan  sehingga  bisa  menampilkan  hasil  render dari script HTML dan CSS yang sudah diketikkan. Sedangkan tombol Console digunakan untuk menampilkan  output  console  yang  dituliskan  di  javascript.  Tombol  Expand  digunakan  untuk memperluas tampilan Output untuk memudahkan pengguna dalam melihat tampilan website.
Setelah  semua  misi  berhasil  diselesaikan  maka  akan  tampil  Score  Board  yang  berisi informasi skor, waktu selesai, dan bintang yang berhasil didapatkan. Terdapat beberapa tombol pada Score Board yaitu tombol Lanjut, Main lagi, dan Kembali. Tombol lanjut hanya muncul jika pengguna  berhasil  menyelesaikan  stage  tersebut.  Tombol  lanjut  berfungsi  untuk  berpindah  ke stage  selanjutnya.  Tombol  Main  lagi  digunakan  untuk  mengulang  Stage  yang  berjalan. Sedangkan tombol Kembali digunakan untuk kembali ke halaman daftar Stage.
Gambar  16  adalah  dialog  peringatan  yang  muncul  jika  pengguna  keluar  dari  Stage  yang belum  diselesaikan.  Hal  tersebut  berfungsi  untuk  menghindari  jika  pengguna  menekan tombol keluar  secara  tidak  sengaja,  sehingga  proses  pembelajaran  tidak  hilang.  Jika  pengguna menekan  tombol  no  maka  pengguna  tidak  akan  dialihkan  dan  bisa  tetap  untuk  mengerjakan course. Sedangkan jika menekan tombol yes, maka akan langsung dialihkan ke halaman yang dituju dan progress dari pengerjaan course tersebut akan hilang.
Hasil  yang  didapat  dari  validasi  media  berupa  saran  dan  tingkat  kevalidan  dari  produk tersebut.  validasi  ahli  media.  Tingkat  kevalidan  memperoleh  persentase  sebesar  94,17% dengan kriteria sangat valid. hasil rata-rata ahli media tersebut masuk kategori valid tetapi perlu untuk revisi dikarenakan masih ada beberapa kekurangan yaitu misi yang belum sesuai dengan kode  program,  penulisan  huruf  besar  dan  kecil,  dan  skor  yang  belum  real-time.  Untuk  rincian persentase setiap aspek dapat dilihat pada Tabel 2.
Tabel 2. Hasil validasi ahli media Aspek ∑Tse ∑ Tsh  V (%) Kriteria Rekayasa Perangkat Lunak 44 48 91,67 Sangat Valid Desain Pembelajaran 30 32 93,75 Sangat Valid Komunikasi Visual 39 40 97,50 Sangat Valid
Hasil  yang  didapat  dari  validasi  media  berupa  saran  dan  tingkat  kevalidan  dari  produk tersebut. Validasi ahli materi oleh guru jurusan RPL di SMK Negeri 4 Malang Malang. Hasil uji coba validasi ahli materi mendapatkan persentase sebesar 95,24 %. Hasil rata-rata ahli materi tersebut  masuk  kategori  valid  dan  tidak  ada  revisi  dikarenakan  sudah  memenuhi  kebutuhan aplikasi. Namun ahli materi memberikan saran untuk memperbaiki tampilan (tombol, form, dan icon) sehingga siswa lebih tertarik dan mampu untuk menyerap materi lebih baik. Untuk rincian persentase setiap aspek dapat dilihat pada Tabel 3.

## TEKNO Jurnal Teknologi Elektro dan Kejuruan
http://journal2.um.ac.id/index.php/tekno | ISSN 1693-8739 / 2686-4657
TEKNO Vol. 29 Issue 2, p161-177 | Jurusan Teknik Elektro, Universitas Negeri Malang, Indonesia | September 2019 R. F. Arif, H. A. Rosyid | Pengembangan aplikasi web dengan gamifikasi sebagai media pendukung …
Tabel 3. Hasil validasi ahli materi Aspek ∑Tse  ∑ Tsh  V (%) Kriteria Isi 44 48 91,67 Sangat Valid Bahasa 30 32 93,75 Sangat Valid Penyajian 39 40 97,50 Sangat Valid
Uji  coba  kelompok  kecil  dilakukan  oleh  12  orang  siswa  SMK  Negeri  4  Malang.  Uji  coba dilakukan menggunakan angket uji coba responden. Hasil uji coba kelompok kecil mendapatkan persentase  sebesar  87,63  %.  Berdasarkan  kriteria  penilaian  pada  Tabel  3.7,  hasil  tersebut masuk  kategori  valid  dan  tidak memerlukan  revisi.  Berdasarkan  data  yang  diperoleh  dari  hasil uji  coba  kelompok  kecil,  terdapat  2  aspek  yang  dinilai  yang  meliputi:  (1)  Aspek  rekayasa perangkat lunak; dan (2) Aspek Komunikasi Visual;
Dilihat  dari  aspek  rekayasa  perangkat  lunak  yang  digunakan  untuk  mengukur  tingkat kelayakan  media  pembelajaran  berdasarkan:  (1)  Usabilitas  (kemudahan  penggunaan  media pembelajaran);  (2)  Kelengkapan  konten;  dan  (3)  Petunjuk  penggunaan  media.  Dari  hasil  uji coba  kelompok  kecil,  skor  yang  didapat  sebesar  86,28%.  Hal  ini  menandakan  bahwa  media pembelajaran  telah  memenuhi  kriteria  valid  dalam  aspek  rekayasa  perangkat  lunak.  Namu masih  belum  sempurna,  sehingga  perlu  untuk  dilakukan  perbaikan  terhadap  media pembelajaran  khususnya  pada  aspek  rekayasa  perangkat  lunak  sehingga  dapat  menutupi kekurangan tersebut.
Dilihat  dari  aspek  komunikasi  visual  yang  digunakan  untuk  mengukur  tingkat  kelayakan media  pembelajaran  berdasarkan:  (1)  Komunikatif;  (2)  Visual;  (3)  Layout  interaktif;  (4)  Audio; dan  (5)  Keterbacaan  konten.  Dari  hasil  uji  coba  kelompok  kecil,  skor  yang  didapat  sebesar 91,67%.  Hal  ini  menunjukkan  bahwa  E-Modul  telah  memenuhi  kriteria  valid  dalam  aspek komunikasi  visual.  Namun  skor  tersebut  masih  belum  sempurna,  sehingga  perlu  dilakukan perbaikan  terhadap  media  pembelajaran  khususnya  pada  aspek  komunikasi  visual,  sehingga dapat menutupi kekurangan tersebut. Untuk rincian persentase setiap aspek dapat dilihat pada Tabel 4.
Tabel 4. Hasil uji coba kelompok kecil Aspek ∑Tse ∑ Tsh V (%) Kriteria Rekayasa Perangkat Lunak 497 576 86,28 Sangat Valid Komunikasi Visual 176 192 91,66 Sangat Valid
Uji coba kelompok besar dilakukan oleh 30 orang siswa SMK Negeri 4 Malang. Hasil uji coba kelompok besar mendapatkan persentase sebesar 91,93 %. Berdasarkan kriteria penilaian hasil tersebut masuk kategori valid dan tidak memerlukan revisi.
Berdasarkan data yang diperoleh dari hasil uji coba kelompok besar, terdapat 2 aspek yang dinilai yang meliputi: (1) Aspek rekayasa perangkat lunak; dan (2) Aspek komunikasi visual.
Dilihat  dari  aspek  rekayasa  perangkat  lunak  yang  digunakan  untuk  mengukur  tingkat kelayakan  media  pembelajaran  berdasarkan:  (1)  Usabilitas  (kemudahan  penggunaan  media

## TEKNO Jurnal Teknologi Elektro dan Kejuruan
http://journal2.um.ac.id/index.php/tekno | ISSN 1693-8739 / 2686-4657
TEKNO Vol. 29 Issue 2, p161-177 | Jurusan Teknik Elektro, Universitas Negeri Malang, Indonesia | September 2019 R. F. Arif, H. A. Rosyid | Pengembangan aplikasi web dengan gamifikasi sebagai media pendukung …
pembelajaran);  (2)  Kelengkapan  konten;  dan  (3)  Petunjuk  penggunaan  media.  Dari  hasil  uji coba kelompok besar, skor yang didapat sebesar 91,67%. Hal ini menandakan bahwa E-Modul telah  memenuhi  kriteria  valid  dalam  aspek  rekayasa  perangkat  lunak.  Namun  skor  tersebut masih  belum  sempurna,  sehingga  masih  menunjukkan  bahwa  masih  ada  sedikit  kekurangan pada  media  pembelajaran.  Oleh  karena  itu  perlunya  dilakukan  perbaikan  terhadap  media pembelajaran  khususnya  pada  aspek  rekayasa  perangkat  lunak,  sehingga  dapat  menutupi kekurangan tersebut.
Dilihat  dari  aspek  komunikasi  visual  yang  digunakan  untuk  mengukur  tingkat  kelayakan media  pembelajaran  berdasarkan:  (1)  Komunikatif;  (2)  Visual;  (3)  Layout  interaktif;  (4)  Audio; dan  (5)  Keterbacaan  konten.  Dari  hasil  uji  coba  kelompok  besar,  skor  yang  didapat  sebesar 92,71%.  Hal  ini menunjukkan  bahwa media  pembelajaran  telah memenuhi  kriteria  valid  dalam aspek komunikasi visual. Namun skor yang masih belum sempurna. Hal ini menandakan masih ada  sedikit  kekurangan  pada  media  pembelajaran.  Oleh  karena  itu  perlunya  dilakukan perbaikan  terhadap  media  pembelajaran  khususnya  pada  aspek  komunikasi  visual,  sehingga dapat  menutupi  kekurangan  tersebut.  Perbaikan  yang  dilakukan  senada  dengan  teori  yang dikatakan  oleh  Wahono  (2007)  bahwa  sebuah  media  pembelajaran  harus  memiliki  memiliki tampilan  yang  sederhana  dan  memikat,  kemudian  media  pembelajaran  juga  harus  memiliki keterbacaan yang jelas agar pengguna bisa menerima informasi dengan mudah. Untuk rincian persentase setiap aspek dapat dilihat pada Tabel 5.
Tabel 5. Hasil uji coba kelompok besar Aspek ∑Tse ∑ Tsh V (%) Kriteria Rekayasa Perangkat Lunak 1329 1440 91,67 Sangat Valid Komunikasi Visual 445 480 93,00 Sangat Valid
Dari  beberapa  rangkaian  validasi  dan  uji  coba  yang  sudah  dilakukan  merujuk  pada  kriteria penilaian  menurut  Akbar  (2013),  maka  secara  keseluruhan  media  pembelajaran  dapat dinyatakan sangat valid dan sangat layak digunakan sebagai suplemen penunjang siswa dalam belajar dimana saja dan kapan saja.

## 4.  Kesimpulan
Media  berupa  web  application  yang  telah  dirancang  sesuai  dengan  kebutuhan  dan  dengan mengintegrasikan  gamifikasi,  sehingga  menjadi  media  pembelajaran  pendukung  pada  mata pelajaran Pemrograman Dasar kelas X RPL di SMK Negeri 4 Malang. Media ini dikembangkan dengan  menggunakan  model  penelitian  dan  pengembangan  ADDIE.  Media  memuat  3 kompetensi,  sehingga  media  dapat  digunakan  sebagai  media  pendukung  mata  pelajaran Pemrograman  Dasar.  Media  pembelajaran  ini  telah  valid  dan  layak  digunakan  berdasarkan penilaian dari validator dan subjek coba dengan persentase hasil akhir 91,93%. Detail penilaian dari validator dan subjek coba sebagai berikut: (a) Hasil validasi pada validator media diperoleh persentase  sebesar  94,17%  dengan  kategori  sangat  valid;  (b)  Hasil  validasi  pada  validator

## TEKNO Jurnal Teknologi Elektro dan Kejuruan
http://journal2.um.ac.id/index.php/tekno | ISSN 1693-8739 / 2686-4657
TEKNO Vol. 29 Issue 2, p161-177 | Jurusan Teknik Elektro, Universitas Negeri Malang, Indonesia | September 2019 R. F. Arif, H. A. Rosyid | Pengembangan aplikasi web dengan gamifikasi sebagai media pendukung …
materi  diperoleh  persentase  sebesar  95,24%  dengan  kategori  sangat  valid;  (c)  Hasil  uji  coba pada subjek coba, diperoleh persentase sebesar 87,63% dengan kategori sangat layak pada uji coba  kelompok  kecil  dan  diperoleh  persentase sebesar  91,93%  dengan  kategori  sangat  layak pada uji coba kelompok besar.

## Daftar Rujukan
Aini, Q., Rahardja, U., Moeins, A., dan Apriani, D. M. 2018. Penerapan Gamifikasi pada Sistem Informasi Penilaian Ujian Mahasiswa untuk Meningkatkan Kinerja Dosen. Jurnal Informatika Upgris, 4, 1, 46-55.
Akbar,  S.  dan  Sriwijaya,  H.  2010.  Pengembangan  Kurikulum  dan  Pembelajaran  Ilmu Pengetahuan Sosial (IPS). Yogyakarta: Cipta Media.
Farida, Khoirunnisa, Y., dan Putra, R. W. Y. 2018. Pengembangan Bahan Ajar Gamifikasi pada Materi Bangun Ruang Sisi Lengkung. Jurnal Penelitian dan Pembelajaran Matematika, 11, 2, 193-204.
Jusuf, H. 2016. Penggunaan Gamifikasi dalam Proses Pembelajaran. Jurnal TICOM, 5, 1, 1-6. Maryanto,  H.,  Suyanto,  M.,  dan  Fatta,  H.  A.  2017.  Penerapan  Gamification  Cashflow  sebagai Media  Pembelajaran  Pengelolaan  Keuangan  Pribadi  pada  Anak  Usia  Dasar  (Studi  Kasus: SDN Plumpung 1 Plaosan Magetan). Jurnal Telematika, 10, 2, 166-178.
Prambayun,  A.  dan  Farozi,  M.  2015.  Pola  Perancangan  Gamifikasi  untuk  Membangun Engagement Siswa dalam Belajar. SEMNASTEKNOMEDIA ONLINE, 3, 1, 5.7-11.
Pratomo,  A.  2018.  Pengaruh  Konsep  Gamifikasi  terhadap  Tingkat  Engagement  (Studi  Kasus Pelatihan  Karyawan  the  Park  Lane  Jakarta).  The  Journal:  Tourism  and  Hospitality Essentials Journal, 8, 2, 63-74.
Rumansyah,  M.  2016.  Perbedaan  Pengaruh  Pembelajaran  dengan  menggunakan  Modul Interaktif  dan  Modul  Konvensional  terhadap  Pemahaman  Konsep  IPA.  Jurnal  Pendidikan Matematika dan Sains, 4, 1, 54-62.
Suhendi  dan  Adriansyah,  A.  R.  2018.  Prototype  Gamifikasi  Situs-Situs  Wilayah  Depok menggunakan Perangkat Mobile. Ikraith-Informatika, 2, 2, 76-81.
Trisiana,  A.  dan  Wartoyo.  2016.  Desain  Pengembangan  Model  Pembelajaran  Pendidikan Kewarganegaraan  melalui  Addie  Model  untuk  Meningkatkan  Karakter  Mahasiswa  di Universitas Slamet Riyadi Surakarta. PKn Progresif, 11, 1, 312-330.
Wahono,  R.  S.  2007.  Panduan  Pengembangan  Multimedia  Pembelajaran.  Jakarta:  Ditjen Manajemen Pendidikan Dasar dan Menegah, Depdiknas.
Yulia, D. dan Arifin, M. 2016. Pengaruh Penggunaan Media Film Animasi dalam Pembelajaran IPS  Terpadu  terhadap  Hasil  Belajar  Siswa  Kelas  VIII  di  SMP  Kartini  1  Batam  Tahun Pelajaran 2013/2014. Historia, 10, 31-45.