Case study · 2022
Unit 3C (Computing Certification Center)
Unit 3C adalah platform pembelajaran dan sertifikasi komputing yang dikembangkan sebagai project pengenalan development web. Project ini merupakan implementasi dari Unit Computing Certification Center yang menyediakan berbagai kelas pelatihan dan sertifikasi di bidang teknologi informasi. Project ini dibuat sebagai project pertama dalam pengenalan web development menggunakan teknologi dasar web seperti HTML, CSS, JavaScript, dan beberapa library pendukung.
01The problem
Platform pelatihan dan sertifikasi komputing butuh satu alur yang jelas bagi penggunanya: calon peserta perlu melihat kelas apa saja yang tersedia, mendaftar, belajar, mengikuti ujian, lalu menerima sertifikat, sementara mentor perlu tempat untuk melihat daftar kelas. Di sisi lain, project ini juga dibuat sebagai pengenalan web development, jadi tantangannya adalah merangkai alur produk yang utuh dari banyak halaman hanya dengan teknologi dasar web, tanpa framework.
02The process
Project dibangun tanpa framework dan tanpa build tool: HTML5, CSS3, dan JavaScript, dengan Bootstrap 5.2.2 untuk layout dan komponen (navbar, kartu, modal, carousel) serta jQuery 3.6.1 untuk interaksi. index.html berperan sebagai shell. Navbar tetap di tempat, sedangkan konten beranda, kelas, dan kategori dimuat ke dalamnya sebagai fragmen HTML dengan jQuery .load(). Data kelas, kategori, dan pengguna tidak ditulis langsung di HTML, melainkan dibaca dari satu berkas JSON hasil ekspor database unit_3c lewat $.getJSON, lalu dirender menjadi kartu kelas. Status login disimpan di localStorage dan menentukan tampilan yang muncul: pengunjung, peserta, atau mentor. Tabel kelas untuk mentor memakai DataTables 1.13.1, animasi scroll memakai AOS, dan ikon memakai Bootstrap Icons.
03The solution
Alur peserta dibuat utuh dari awal sampai akhir. Pengunjung melihat beranda, kategori, dan katalog kelas, lalu masuk. Setelah masuk, peserta memilih kelas, membuka modal pendaftaran yang memuat poster, lokasi, kategori, durasi, dan harga, lalu menekan Bayar. Dari dashboard, peserta melanjutkan ke halaman materi, ujian akhir dengan dua halaman soal pilihan ganda, halaman hasil ujian, dan sertifikat kelulusan. Mentor mendapat tampilan yang berbeda: katalog kelas berbentuk tabel dengan kontrol tambah, ubah, dan hapus. Katalog contohnya berisi empat kelas dalam dua kategori, yaitu Security Training dan Network and Cloud Training.
Alur halaman
index.htmldengan beranda, katalog kelas, dan kategorilogin.htmldansignup.htmldashboardHome.htmldandashboardKelas.htmlmateri.htmlujian.html,soal1.html, dansoal2.htmlhasilUjian.htmlsertifikat.html
Totalnya 11 halaman penuh dan 4 fragmen HTML (home, home1, kelas, kategori) yang tidak punya kerangka halaman sendiri.
Keputusan teknis
- Shell dan fragmen. Navbar ditulis sekali di
index.html, sehingga berpindah antara beranda, kelas, dan kategori tidak memuat ulang halaman. - Data di JSON. Katalog kelas dirender dari
assets/store.json, sehingga daftar kelas mengikuti isi berkas tersebut. - Tampilan menurut peran. Satu halaman kelas menampilkan kartu untuk peserta dan tabel untuk mentor, ditentukan dari data sesi di
localStorage.
Batasan yang disadari
Project ini berfokus pada sisi antarmuka, sehingga beberapa bagian belum berupa sistem sungguhan:
- Login dicocokkan di browser terhadap data di
store.json. Belum ada autentikasi di server, dan halaman dashboard belum memeriksa status login. - Pembayaran, pendaftaran, serta kontrol tambah, ubah, dan hapus milik mentor baru sebatas antarmuka. Belum ada data yang disimpan.
- Soal, skor, dan modul belajar masih berupa konten contoh.
- Karena fragmen dan JSON dimuat lewat permintaan HTTP, situs perlu dijalankan lewat static server seperti Live Server dan tidak bisa dibuka langsung dari
file://.
Untuk dipakai sungguhan, bagian-bagian tersebut membutuhkan backend.
Mencoba demo
Halaman Masuk menampilkan akun contoh peserta sebagai placeholder form. Pakai akun itu untuk menelusuri alur dari katalog kelas sampai sertifikat. Kode lengkapnya bisa diunduh lewat tombol Source code.