Pengembangan Front End Online Judge dengan React JS
DOI:
https://doi.org/10.26418/jp.v12i1.105633Keywords:
Online Judge, Front End, React JS, Antarmuka Administrator, Sistem Pembelajaran PemrogramanAbstract
Seiring dengan pesatnya perkembangan teknologi informasi, institusi pendidikan tinggi dituntut untuk menyediakan sarana pembelajaran yang mendukung penguasaan keterampilan praktis, khususnya dalam bidang pemrograman. Salah satu sarana penting dalam pembelajaran pemrograman adalah sistem Online Judge sebagai media latihan dan evaluasi kode secara otomatis. Namun, ketergantungan pada platform pihak ketiga menimbulkan berbagai keterbatasan, seperti gangguan ketersediaan layanan, keterbatasan pengelolaan data, serta minimnya fleksibilitas kustomisasi sesuai kebutuhan institusi. Oleh karena itu, Jurusan Informatika Universitas Tanjungpura mengembangkan sistem Online Judge internal, dengan penelitian ini berfokus pada pengembangan front end antarmuka administrator. Penelitian ini bertujuan untuk merancang dan membangun antarmuka front end administrator berbasis React JS serta mengimplementasikan integrasi antara front end dan back end melalui Application Programming Interface (API) agar seluruh fungsionalitas pengelolaan sistem dapat berjalan dengan baik. Metode pengembangan yang digunakan adalah prototyping, yang memungkinkan penyesuaian sistem secara bertahap berdasarkan kebutuhan pengguna. Pengujian sistem dilakukan menggunakan Black Box Testing, Integration Testing, User Acceptance Testing (UAT), dan System Usability Scale (SUS). Hasil Black Box Testing menunjukkan seluruh 33 kasus uji berhasil dijalankan, sedangkan Integration Testing menunjukkan seluruh 65 kasus uji berhasil tanpa ditemukan kesalahan fungsional. Hasil UAT menunjukkan tingkat penerimaan pengguna sebesar 91,53% untuk fitur manajemen problem dan contest, serta 100% untuk fitur Access Control List dan manajemen pengguna dengan kategori sangat baik. Selain itu, hasil pengujian SUS memperoleh skor rata-rata sebesar 76 yang termasuk dalam kategori Grade B, yang menunjukkan bahwa sistem memiliki tingkat usability yang baik. Berdasarkan hasil tersebut, dapat disimpulkan bahwa front end antarmuka administrator yang dikembangkan telah memenuhi kebutuhan fungsional sistem serta mendukung pengelolaan Online Judge internal di Jurusan Informatika Universitas Tanjungpura.References
A. Arvon, M. Muthahhari, and A. Perwitasari, “Pengembangan Microservice Grader pada Online Judge Berbasis Event-Driven Architecture,” JEPIN (Jurnal Edukasi dan Penelitian Informatika), vol. 10, no. 3, pp. 446–459, 2024, Accessed: Dec. 22, 2025. [Online]. Available: https://jurnal.untan.ac.id/index.php/jepin/article/view/83893
Y. Watanobe, Md. M. Rahman, T. Matsumoto, U. K. Rage, and P. Ravikumar, “Online Judge System: Requirements, Architecture, and Experiences,” International Journal of Software Engineering and Knowledge Engineering, vol. 32, no. 06, pp. 917–946, Jun. 2022, doi: 10.1142/S0218194022500346.
S. Wasik, M. Antczak, J. Badura, A. Laskowski, and T. Sternal, “A Survey on Online Judge Systems and Their Applications,” ACM Comput. Surv., vol. 51, no. 1, pp. 1–34, Jan. 2019, doi: 10.1145/3143560.
V. Komperla, P. Deenadhayalan, P. Ghuli, and R. Pattar, “React: A detailed survey,” Indonesian Journal of Electrical Engineering and Computer Science, vol. 27, no. 1, pp. 1710–1717, Jun. 2022, doi: 10.11591/ijeecs.v26.i3.pp1710-1717.
S. Chen, U. R. Thaduri, and V. K. R. Ballamudi, “Front-End Development in React: An Overview,” Engineering International, vol. 7, no. 2, pp. 117–126, 2019.
P. Rawat and A. N. Mahajan, “ReactJS: A Modern Web Development Framework,” Int. J. Innov. Sci. Res. Technol., vol. 5, no. 11, 2020, [Online]. Available: www.ijisrt.com
S. M. Prasetiyo, M. I. P. Nugroho, R. L. Putri, and O. Fauzi, “Pembahasan Mengenai Front-End Web Developer dalam Ruang Lingkup Web Development,” BULLET: Jurnal Multidisiplin Ilmu, vol. 1, no. 06, pp. 1015–1020, 2022, [Online]. Available: https://journal.mediapublikasi.id/index.php/bullet
A. Kurnia, A. Lim, and B. Cheang, “Online Judge,” Comput. Educ., vol. 36, no. 4, pp. 299–315, May 2001, doi: 10.1016/S0360-1315(01)00018-5.
M. Wang, W. Han, and W. Chen, “MetaOJ: A massive distributed online judge system,” Tsinghua Sci. Technol., vol. 26, no. 4, pp. 548–557, Aug. 2021, doi: 10.26599/TST.2020.9010016.
D. Mediana and A. I. Nurhidayat, “RANCANG BANGUN APLIKASI HELPDESK (A-DESK) BERBASIS WEB MENGGUNAKAN FRAMEWORK LARAVEL (STUDI KASUS DI PDAM SURYA SEMBADA KOTA SURABAYA),” Jurnal Manajemen Informatika, vol. 8, no. 2, pp. 75–81, 2018.
B. Suprayogi and A. Rahmanesa, “Penerapan Framework Bootstrap dalam Sistem Informasi Pendidikan SMA Negeri 1 Pacet Cianjur Jawa Barat,” TEMATIK, vol. 6, no. 2, pp. 119–127, Dec. 2019, doi: 10.38204/tematik.v6i2.244.
K. N. B. Putra, I. W. Swandi, and I. A. D. K. Ari, “PERANCANGAN USER INTERFACE DAN USER EXPERIENCE PADA APLIKASI PENCARI PEKERJA DI PT KALMAN GROUP INDONESIA,” AMARASI: JURNAL DESAIN KOMUNIKASI VISUAL, vol. 4, no. 02, pp. 256–265, Jul. 2023, doi: 10.59997/amarasi.v4i02.2454.
I. A. Siregar, Showcase: UX Design. Tangerang Selatan: Universitas Pembangunan Jaya, 2022.
H. Kurniawan et al., BELAJAR WEB PROGRAMMING (REFERENSI PENGENALAN DASAR TAHAPAN BELAJAR PEMROGRAMAN WEB UNTUK PEMULA). Jambi: PT. Sonpedia Publishing Indonesia, 2023.
D. Wijonarko and B. W. R. Mulya, “Pengembangan Antarmuka Pemrograman Aplikasi Menggunakan Metode RESTful pada Sistem Informasi Akademik Politeknik Kota Malang,” SMATIKA JURNAL, vol. 8, no. 02, pp. 63–66, Oct. 2018, doi: 10.32664/smatika.v8i02.202.
R. Choirudin and A. Adil, “Implementasi Rest Api Web Service dalam Membangun Aplikasi Multiplatform untuk Usaha Jasa,” MATRIK : Jurnal Manajemen, Teknik Informatika dan Rekayasa Komputer, vol. 18, no. 2, pp. 284–293, May 2019, doi: 10.30812/matrik.v18i2.407.
A. Ehsan, M. A. M. E. Abuhaliqa, C. Catal, and D. Mishra, “RESTful API Testing Methodologies: Rationale, Challenges, and Solution Directions,” Applied Sciences, vol. 12, no. 9, p. 4369, Apr. 2022, doi: 10.3390/app12094369.
