Project Case Study

SecureExam: High-Integrity Computer Based Test Platform

Fullstack Web App Klien: N/A Tanggal: January 2026 Lihat Demo Live
SecureExam: High-Integrity Computer Based Test Platform Thumbnail

1. Project Overview

LuminaCBT adalah solusi platform ujian digital yang memprioritaskan validitas hasil ujian. Masalah utama pada ujian online seringkali adalah celah bagi peserta untuk melakukan manipulasi waktu (refresh/re-login) dan berpindah tab browser untuk mencari jawaban. Proyek ini hadir untuk menutup celah tersebut melalui sistem penguncian layar dan sinkronisasi waktu absolut antara client dan server.

 

2. Key Challenges & Solutions

> Integritas Waktu: Siswa seringkali mendapatkan durasi tambahan secara ilegal dengan melakukan refresh halaman.

Solution: Mengimplementasikan Server-Side Locked Timer menggunakan kolom end_time di database. Sisa waktu dihitung berdasarkan selisih waktu server, bukan waktu client browser.

 

> Anti-Cheating Guard: Peserta sering berpindah tab browser.

Solution: Menggunakan Fullscreen API dikombinasikan dengan event listener visibilitychange. Jika peserta keluar dari mode fullscreen atau berpindah tab, sistem akan memberikan peringatan otomatis via Custom Modal hingga penghentian ujian secara paksa (Auto-Submit).

 

> Data Reactivity: Statistik jawaban seringkali membutuhkan reload halaman.

Solution: Memanfaatkan reaktivitas Alpine.js dengan teknik Spread Operator Object Re-assignment untuk memperbarui dashboard statistik jawaban secara realtime tanpa mengganggu proses pengerjaan.

 

3. Core Features

> Advanced Examination Interface: Tampilan bersih dengan navigasi soal interaktif.

> Seeded Question Shuffling: Pengacakan soal dan opsi jawaban yang konsisten per sesi (menggunakan seed ID Sesi) untuk mencegah kecurangan antar peserta.

> One-Click Duplicate Exam: Fitur bagi pengajar untuk menduplikat jadwal ujian secara instan (berguna untuk kelas susulan/remedial) beserta seluruh set soal dan konfigurasinya.

> Smart Export System: Export rekap nilai ke format Excel dan PDF yang mendukung filter kelas secara dinamis.

> Auto-Save Reconnect: Jawaban tersimpan secara otomatis ke database setiap kali diklik, memungkinkan peserta melanjutkan ujian jika terjadi gangguan koneksi tanpa kehilangan progress.

 

4. Technical Stack

> Backend Framework: Laravel 11 (PHP 8.2+)

> Frontend Logic: Alpine.js (Lightweight & Reactive)

> Database: MySQL (Relational management untuk soal, siswa, dan sesi)

> Styling: Tailwind CSS (Modern, Responsive, & Dark Mode Support)

 

> Libraries & Tools:

* Axios: Komunikasi asinkronus (AJAX) untuk fitur Auto-Save jawaban.

* SweetAlert2: Penanganan modal konfirmasi dan peringatan pelanggaran ujian.

* Maatwebsite/Laravel-Excel: Engine untuk generate laporan rekap nilai Excel.

* Barryvdh/Laravel-DomPDF: Engine rendering laporan hasil ujian ke format PDF.

* Carbon: Manipulasi waktu tingkat tinggi untuk akurasi durasi ujian.

 

5. Role & Access Management (RBAC)

Sistem ini mengimplementasikan tiga level hak akses utama yang terintegrasi, memastikan setiap pengguna memiliki fungsionalitas yang tepat sasaran:

 

> Superadmin (Full Control & Oversight):

* User Management: Memiliki otoritas penuh untuk mengelola data akun (Guru & Siswa) serta melakukan import data secara massal.

* Global Configuration: Mengatur parameter sistem, manajemen data mata pelajaran, dan kategori ujian secara terpusat.

* Master Data Classrooms: Bertanggung jawab dalam pembuatan dan pengorganisasian data Kelas serta Sekolah.

 

> Guru (Subject Matter Expert & Examiner):

* Question Bank Management: Mengelola bank soal secara mandiri (tambah, edit, hapus, dan upload gambar soal).

* Exam Scheduling & Duplication: Membuat jadwal ujian, mengatur durasi, dan memanfaatkan fitur One-Click Duplicate untuk kebutuhan ujian remedial/susulan.

* Result Analytics & Export: Melakukan monitoring hasil ujian secara real-time, memfilter hasil berdasarkan kelas, serta melakukan ekspor laporan nilai ke format Excel atau PDF.

 

> Siswa (User/Examinee):

* Secure Exam Dashboard: Mengakses daftar ujian yang aktif sesuai dengan kelas dan jadwal yang telah ditentukan.

* Isolated Examination Environment: Menjalankan ujian dalam mode integrity-guard (fullscreen & anti-cheat monitoring).

* Instant Result Summary: Mendapatkan ringkasan hasil ujian (jika fitur diaktifkan oleh pengajar) segera setelah menekan tombol submit.

 

6. Project Impact

Sistem ini berhasil meminimalisir potensi manipulasi waktu hingga 100% dan memberikan pengalaman ujian yang lebih profesional serta transparan bagi pengajar melalui laporan otomatis yang akurat sesuai filter kelas yang dipilih.

 


Tags

Laravel, AlpineJS, TailwindCSS, CBT System, Fullstack Development, Cyber Security UI, Web API.

Galeri Tangkapan Layar

Gallery Screenshot App
Gallery Screenshot App
Gallery Screenshot App
Gallery Screenshot App
Gallery Screenshot App
Gallery Screenshot App
Gallery Screenshot App

Tertarik dengan Karya Saya?

Mari diskusikan bagaimana saya dapat membantu Anda mentransformasikan gagasan sistem menjadi realitas arsitektur digital berintegritas tinggi.

Hubungi Saya