BimbelBox — Platform Bimbingan Belajar Online (LMS)

Sebuah platform Learning Management System (LMS) lengkap di mana siswa dapat membeli, mengakses, dan menyelesaikan kursus bimbingan belajar secara online — dilengkapi dengan video player interaktif, sistem kuis & ujian berdurasi, sertifikat kelulusan otomatis, dan pemrosesan pembayaran multi-gateway (Midtrans, PayPal, Stripe). Dibangun secara menyeluruh (end-to-end) sebagai Full-Stack Engineer (PHP & Laravel) — merancang arsitektur monolitik modular berbasis MVC dengan Laravel 12, mengimplementasikan alur pembayaran multi-gateway yang aman, dan membangun antarmuka frontend responsif berbasis Blade, Alpine.js, dan Tailwind CSS.

---

Ringkasan Proyek

---

Latar Belakang & Motivasi

BimbelBox lahir dari kebutuhan nyata di sektor pendidikan Indonesia: menyediakan platform bimbingan belajar (bimbel) online yang lengkap dan terjangkau — bukan sekadar kumpulan video, melainkan ekosistem pembelajaran utuh yang mencakup materi terstruktur, evaluasi berbasis kuis, dan sertifikasi kelulusan. Pada banyak platform LMS sederhana, fitur-fitur kritis seperti alur pembayaran, pembangunan sertifikat, dan manajemen konten instruktur sering kali terfragmentasi atau memerlukan integrasi pihak ketiga yang mahal.

BimbelBox direkayasa sebagai solusi operasional sekaligus showcase teknis full-stack:

• Membangun ekosistem tiga-peran (Multi-Role Ecosystem) — Siswa, Instruktur, dan Admin — masing-masing dengan dashboard, hak akses, dan alur kerja yang terisolasi secara ketat melalui middleware check_role dan guard autentikasi terpisah (web untuk user, admin untuk admin).
• Mengimplementasikan alur pembayaran multi-gateway (Midtrans sebagai default untuk pasar Indonesia, dengan PayPal dan Stripe sebagai opsi internasional) yang terintegrasi langsung dengan siklus hidup pesanan — dari keranjang belanja, checkout, verifikasi webhook, hingga enrollment otomatis.
• Merancang sistem sertifikasi drag-and-drop yang memungkinkan admin membangun template sertifikat secara visual, menghasilkan PDF kelulusan otomatis berisi data dinamis (nama siswa, nama kursus, nama instruktur, tanggal), dan mengunduhnya langsung dari dashboard siswa.
• Mengintegrasikan Cloudinary sebagai CDN media untuk penyimpanan dan pengiriman thumbnail kursus yang optimal — memastikan performa halaman katalog tetap cepat meskipun jumlah kursus terus bertambah.

---

Kontribusi Full-Stack Saya

Arsitektur Backend Modular berbasis MVC (Laravel 12)

• Merancang arsitektur aplikasi monolitik modular menggunakan pola MVC (Model-View-Controller) dengan pemisahan tanggung jawab yang jelas: 49 Model Eloquent, 56+ Controller (terpisah dalam namespace Admin dan Frontend), 4 Service Layer (OrderService, CloudinaryService, PaymentGatewaySettingService, SettingService), dan Global Helper Functions untuk utilitas lintas-fitur.
• Mengimplementasikan sistem multi-guard authentication menggunakan Laravel Breeze — guard web untuk siswa dan instruktur, guard admin terpisah untuk panel administrasi — dengan middleware CheckRoleMiddleware yang mengisolasi akses berdasarkan peran (student, instructor).
• Mengelola 58 migrasi database yang mencakup seluruh skema relasional: dari tabel inti (users, courses, enrollments, orders) hingga tabel pendukung (quiz_attempts, quiz_answers, quiz_results, certificate_builders, watch_histories).
• Memisahkan routing ke dalam 4 file route terstruktur: web.php (halaman publik + frontend terotentikasi), admin.php (panel admin), auth.php (autentikasi), dan console.php (Artisan commands).

Sistem Pembayaran Multi-Gateway & Webhook

• Merekayasa alur checkout-to-enrollment yang sepenuhnya otomatis: keranjang belanja → halaman checkout → pemrosesan pembayaran → pembuatan pesanan & item pesanan → enrollment siswa ke kursus → perhitungan & distribusi komisi instruktur → pengosongan keranjang — seluruhnya diorkestrasikan dalam satu transaksi atomik melalui OrderService::storeOrder().
• Mengimplementasikan Midtrans Snap API sebagai gateway default untuk pasar Indonesia (mendukung Virtual Account, E-Wallet/QRIS, GoPay, ShopeePay, kartu kredit/debit) — termasuk konfigurasi SDK, pembuatan transaksi Snap dengan detail item terperinci, dan penanganan callback redirect.
• Mengimplementasikan pemrosesan webhook Midtrans (midtransNotification) yang menangani berbagai status transaksi (capture, settlement, pending, deny, expire, cancel) dan status fraud (challenge, accept) — memperbarui status pesanan secara asinkronus berdasarkan notifikasi server-to-server.
• Mengintegrasikan PayPal REST API (melalui srmklive/paypal) dengan alur createOrder → capturePaymentOrder dan Stripe Checkout Session untuk pembayaran internasional — keduanya dengan halaman sukses dan pembatalan yang terpisah.
• Menangani kursus gratis (harga Rp 0) secara cerdas: alur checkout langsung memproses enrollment tanpa melalui payment gateway, menghasilkan ID transaksi FREE-{uniqid}.

Sistem Manajemen Kursus & Konten Berlapis

• Merancang hierarki konten 3-lapis: Course → Chapter → Lesson — di mana setiap lesson dapat berupa video (YouTube, Vimeo, external link, atau file upload), file yang dapat diunduh, atau materi teks — dengan pengurutan (ordering) yang dapat dikustomisasi melalui drag-and-drop sort.
• Mengimplementasikan alur pembuatan kursus 4-langkah (Step Wizard): (1) Informasi Dasar & Thumbnail, (2) Informasi Tambahan (kategori, level, bahasa, kapasitas, durasi), (3) Konten Kursus (chapter & lesson), (4) Finalisasi & Pengaturan Status — dengan validasi per-langkah dan penyimpanan progresif menggunakan Session.
• Membangun sistem persetujuan kursus (Approval Workflow): instruktur mengirimkan kursus untuk direview → admin dapat menyetujui (approved), menolak (rejected), atau membiarkan tertunda (pending) — hanya kursus yang disetujui dan berstatus active yang tampil di katalog publik.
• Mengintegrasikan Cloudinary sebagai CDN untuk upload dan pengelolaan thumbnail kursus — menyimpan secure_url dan public_id untuk mendukung penghapusan dan pembaruan gambar secara bersih.

Video Player Interaktif & Pelacakan Progres Belajar

• Membangun video player kustom dalam halaman Course Player yang memuat konten lesson secara dinamis (AJAX) tanpa reload halaman — mendukung multiple storage type (YouTube embed, Vimeo embed, direct URL, uploaded file).
• Mengimplementasikan Watch History tracking yang mencatat setiap lesson yang diakses siswa, mempertahankan posisi terakhir yang ditonton (lastWatchHistory), dan menyediakan checkbox penyelesaian materi yang dapat di-toggle secara real-time — memungkinkan siswa melanjutkan pembelajaran dari titik terakhir.
• Merancang perhitungan progres kursus berdasarkan rasio lesson yang telah diselesaikan (watchedLessonIds) terhadap total lesson (lessonCount) — divisualisasikan sebagai progress bar di dashboard siswa.

Sistem Kuis & Ujian Berdurasi (Timed Assessment)

• Merancang arsitektur kuis komprehensif dengan model relasional: Quiz → Question → Choice (pilihan ganda), didukung oleh QuizAttempt (sesi ujian per siswa) dan QuizAnswer (jawaban per soal) — memungkinkan pelacakan riwayat ujian yang lengkap.
• Mengimplementasikan sistem timer sisi-server yang menghitung sisa waktu berdasarkan started_at dan durasi kuis dalam menit — jika waktu habis, ujian otomatis diakhiri dan skor dihitung secara paksa (quizFinish), mencegah manipulasi timer di sisi klien.
• Merancang navigasi soal maju-mundur (previous/next) dengan penyimpanan jawaban menggunakan updateOrCreate — memastikan jawaban tidak hilang saat siswa menavigasi antar soal.
• Menghasilkan hasil ujian otomatis (QuizResult) yang mencatat jumlah jawaban benar, salah, total soal, dan skor persentase — ditampilkan sebagai halaman hasil segera setelah ujian selesai.

Sertifikat Kelulusan Otomatis (Certificate Builder)

• Membangun Certificate Builder visual berbasis drag-and-drop di panel admin — admin dapat mengunggah background template dan tanda tangan, mengatur teks judul/subjudul/deskripsi, dan memposisikan setiap elemen sertifikat (logo, title, subtitle, description, signature) secara presisi menggunakan koordinat X/Y.
• Mengimplementasikan generasi PDF otomatis menggunakan DomPDF dengan resolusi 150 DPI pada ukuran kertas kustom (744×480 pt landscape) — menggantikan placeholder dinamis ([student_name], [course_name], [instructor_name], [date], [platform_name], [certificate_number]) dengan data aktual siswa.
• Menyediakan preview PDF langsung di panel admin dengan data sampel, sehingga admin dapat memvalidasi tampilan sertifikat sebelum siswa mengunduhnya.
• Siswa dapat mengunduh sertifikat langsung dari dashboard setelah menyelesaikan seluruh materi kursus.

Dashboard Multi-Peran (Student, Instructor, Admin)

• Dashboard Siswa: Menampilkan jumlah kursus yang diikuti, review yang ditulis, dan pesanan — dilengkapi dengan halaman Enrolled Courses (dengan progres belajar), Course Player, riwayat kuis, manajemen review, riwayat pesanan, dan opsi "Become Instructor" dengan upload dokumen persyaratan.
• Dashboard Instruktur: Menampilkan statistik kursus (pending, approved, rejected), daftar pesanan terbaru dari siswa, manajemen kursus (CRUD lengkap dengan Step Wizard), sistem blog (CRUD dengan request-publish), manajemen penarikan dana (withdrawal) dari wallet instruktur, dan pengaturan informasi gateway pembayaran.
• Dashboard Admin: Menampilkan ringkasan pendapatan (harian, mingguan, bulanan, tahunan) dengan grafik Chart.js, total pesanan, statistik kursus, kursus dan blog terbaru — dilengkapi dengan manajemen lengkap untuk seluruh entitas sistem (kursus, kategori, level, bahasa, pengguna, instruktur, pesanan, blog, halaman kustom, pengaturan situs, pengaturan pembayaran, sertifikat, testimonial, dan lainnya).

Ekosistem Instruktur & Distribusi Pendapatan

• Merancang alur "Become Instructor" yang memungkinkan siswa mengajukan diri sebagai instruktur dengan mengunggah dokumen persyaratan → admin mereview dan menyetujui/menolak → setelah disetujui, peran pengguna berubah menjadi instructor dengan akses ke dashboard instruktur.
• Mengimplementasikan sistem komisi otomatis: setiap kali siswa membeli kursus, OrderService menghitung komisi berdasarkan commission_rate yang dikonfigurasi di pengaturan admin dan secara otomatis menambahkannya ke wallet instruktur.
• Membangun sistem penarikan dana (Withdrawal): instruktur dapat mengajukan request payout dari saldo wallet mereka → admin mereview dan menyetujui/menolak → saldo wallet dikurangi setelah persetujuan — dengan validasi saldo mencukupi dan pencegahan duplikasi request pending.
• Menyediakan konfigurasi gateway payout per-instruktur (informasi rekening bank/e-wallet) yang disimpan terpisah dalam tabel instructor_payout_information.

CMS & Manajemen Konten Situs

• Membangun Content Management System (CMS) lengkap yang memungkinkan admin mengelola seluruh tampilan frontend tanpa menyentuh kode: Hero Section, Feature Section, About Us Section, Latest Course Section, Become Instructor Banner, Video Section, Brand/Partner Logos, Featured Instructor Showcase, Testimonials, Counter Statistics, Top Bar, Footer (multi-kolom), dan Social Links.
• Mengimplementasikan sistem Blog dengan workflow persetujuan: instruktur dapat menulis dan mengelola blog → mengirimkan request-publish → admin mereview dan menyetujui/menolak → blog yang disetujui tampil di halaman publik — dengan dukungan kategori, komentar, soft delete, dan integrasi Cloudinary untuk gambar.
• Membangun sistem Custom Page: admin dapat membuat halaman statis kustom (Terms of Service, Privacy Policy, FAQ, dll.) dengan URL slug yang dapat dikustomisasi.
• Mengimplementasikan Newsletter Subscription dengan validasi email unik.

Sistem Pencarian & Filter Kursus Lanjutan

• Merancang halaman katalog kursus dengan sistem filter multi-dimensi: pencarian teks (judul & deskripsi), filter kategori (termasuk sub-kategori dan parent category), filter level, filter bahasa, filter rentang harga (from-to), dan pengurutan (terbaru/terlama) — seluruhnya menggunakan Eloquent query builder dengan conditional when() clauses.
• Mengimplementasikan kategori berhierarki (parent → child) dengan kemampuan filter berdasarkan main category yang mencakup seluruh sub-kategorinya.
• Menampilkan kategori trending di halaman beranda berdasarkan flag show_at_trending dengan penghitungan jumlah kursus aktif per kategori (withCount).

Sistem Review & Rating

• Membangun sistem review & rating yang hanya mengizinkan siswa yang telah membeli kursus (Enrollment exists) untuk memberikan ulasan — dengan validasi duplikasi (satu review per siswa per kursus).
• Menampilkan rating agregat pada halaman detail kursus berdasarkan seluruh review yang disetujui, dengan paginasi untuk daftar review.

---

Fitur Produk Inti

Katalog Kursus & Alur Pembelian

• Katalog kursus yang dapat dijelajahi dengan filter multi-dimensi (kategori, level, bahasa, rentang harga, pencarian teks).
• Halaman detail kursus yang komprehensif: deskripsi, video demo, kurikulum (chapter & lesson), informasi instruktur, review & rating, harga dengan diskon coret.
• Alur keranjang belanja dan checkout yang didukung oleh Midtrans (Virtual Account, E-Wallet, QRIS, Kartu Kredit/Debit) sebagai default, dengan PayPal dan Stripe sebagai opsi pembayaran internasional.
• Enrollment otomatis dan distribusi komisi instruktur segera setelah pembayaran terverifikasi.

Pembelajaran Interaktif (Course Player)

• Video player kustom yang memuat konten lesson secara dinamis (AJAX) tanpa reload halaman.
• Pelacakan progres belajar real-time: lesson yang sudah ditonton, lesson yang diselesaikan, dan posisi terakhir.
• Navigasi chapter dan lesson yang terstruktur dengan visual penyelesaian (checkbox completion).
• Dukungan download file materi tambahan per-lesson.

Evaluasi & Sertifikasi

• Sistem kuis berdurasi (timed quiz) dengan pilihan ganda, navigasi soal maju-mundur, dan auto-finish saat waktu habis.
• Hasil ujian otomatis dengan skor persentase, jumlah jawaban benar/salah.
• Sertifikat kelulusan PDF otomatis yang dapat diunduh siswa setelah menyelesaikan kursus — dengan template yang sepenuhnya dapat dikustomisasi oleh admin melalui Certificate Builder.

Ekosistem Multi-Peran

• Siswa: Dashboard personal, enrolled courses, course player, riwayat kuis, manajemen review, riwayat pesanan, opsi menjadi instruktur.
• Instruktur: Manajemen kursus (CRUD lengkap), manajemen blog, dashboard pendapatan, sistem penarikan dana (withdrawal), pengaturan gateway payout.
• Admin: Dashboard analytics, manajemen seluruh entitas sistem, pengaturan situs (CMS), pengaturan pembayaran, sertifikat builder, persetujuan kursus & instruktur, moderasi blog & review.

Blog & Konten Komunitas

• Sistem blog dengan kategori, komentar pengguna, dan integrasi gambar Cloudinary.
• Workflow persetujuan: instruktur menulis → request publish → admin approve/reject.
• Halaman kustom (Terms of Service, Privacy Policy, dll.) yang dikelola melalui admin panel.

---

Teknologi & Arsitektur (Tech Stack)

BimbelBox dibangun sebagai aplikasi monolitik modular berbasis MVC menggunakan Laravel 12, dengan pemisahan tanggung jawab yang jelas antar layer.

Tantangan Teknis & Solusi

Mengorkestrasikan Alur Checkout-to-Enrollment yang Atomik di Tiga Payment Gateway

Tantangan: Aplikasi harus mendukung tiga payment gateway (Midtrans, PayPal, Stripe) yang masing-masing memiliki alur, format respons, dan mekanisme callback yang berbeda — tetapi semuanya harus menghasilkan efek akhir yang identik: pembuatan pesanan, pencatatan item pesanan, enrollment siswa, dan distribusi komisi instruktur. Jika logika ini diduplikasi di setiap handler gateway, risiko inkonsistensi dan bug sangat tinggi.

Solusi: Mengekstraksi seluruh logika pasca-pembayaran ke dalam satu service method terpusat — OrderService::storeOrder() — yang menerima parameter generik (transaction_id, buyer_id, status, total_amount, paid_amount, currency, payment_method) dan mengorkestrasikan seluruh rangkaian operasi secara atomik. Setiap handler gateway (Midtrans, PayPal, Stripe, Free) hanya bertanggung jawab untuk memvalidasi pembayaran dan memanggil service ini dengan parameter yang sesuai — memastikan konsistensi data terlepas dari gateway mana yang digunakan.

Menangani Webhook Asinkronus Midtrans dalam Arsitektur Monolitik

Tantangan: Midtrans mengirimkan notifikasi server-to-server (webhook) untuk setiap perubahan status transaksi — tetapi webhook ini dapat tiba kapan saja (bahkan beberapa menit setelah redirect callback), dapat dikirim ulang jika Midtrans tidak menerima respons 200 OK, dan harus ditangani tanpa mengganggu alur redirect pengguna yang sudah berhasil.

Solusi: Memisahkan handler redirect (midtransSuccess) dan handler webhook (midtransNotification) secara eksplisit. Handler redirect melakukan enrollment segera untuk UX yang responsif, sementara handler webhook berfungsi sebagai jaring pengaman yang memperbarui status pesanan berdasarkan status definitif dari Midtrans (settlement, deny, expire, cancel). Penanganan fraud status (challenge vs accept) juga diimplementasikan untuk transaksi kartu kredit.

Membangun Timer Kuis Anti-Manipulasi di Sisi Server

Tantangan: Implementasi timer kuis di sisi klien (JavaScript) rentan terhadap manipulasi — siswa dapat menghentikan timer, mengubah variabel, atau memanipulasi request untuk mendapatkan waktu tambahan. Namun, timer murni di sisi server akan membutuhkan polling atau WebSocket yang kompleks.

Solusi: Mengimplementasikan hybrid timer — timer visual ditampilkan di klien untuk UX, tetapi sumber kebenaran waktu ada di server. Setiap kali siswa menavigasi soal, server menghitung remainingSeconds = max(durationSeconds - elapsedSeconds, 0) berdasarkan started_at yang tersimpan di database. Jika remainingSeconds <= 0, server secara paksa mengakhiri kuis dan menghitung skor — memastikan tidak ada cara untuk menambah waktu dari sisi klien.

Membangun Certificate Builder dengan Presisi Visual Piksel-sempurna di PDF

Tantangan: Memposisikan elemen (logo, teks, tanda tangan) pada sertifikat PDF dengan presisi piksel adalah masalah yang non-trivial — DomPDF tidak mendukung CSS positioning modern (flexbox, grid), dan koordinat yang terlihat baik di preview HTML belum tentu sama di output PDF karena perbedaan rendering engine.

Solusi: Merancang sistem koordinat absolut (X, Y) yang disimpan di database (CertificateBuilderItem) dan diterapkan konsisten baik di preview HTML maupun di generasi PDF. Admin menyesuaikan posisi melalui antarmuka drag-and-drop yang menyimpan koordinat via AJAX, dan sertifikat dirender menggunakan CSS position: absolute dengan nilai left dan top dari database — memastikan paritas visual antara preview dan output PDF final.

Mengisolasi Tiga Peran Pengguna dalam Arsitektur Monolitik Tunggal

Tantangan: Tiga peran pengguna (siswa, instruktur, admin) memiliki dashboard, fitur, dan hak akses yang sangat berbeda — tetapi semuanya berjalan dalam satu aplikasi Laravel. Tanpa isolasi yang tepat, seorang siswa bisa mengakses halaman instruktur, atau seorang instruktur bisa mengakses panel admin.

Solusi: Mengimplementasikan isolasi berlapis: (1) Guard autentikasi terpisah (web untuk siswa/instruktur, admin untuk admin) dengan model, tabel, dan login URL yang berbeda; (2) Middleware CheckRoleMiddleware yang memvalidasi peran pengguna (student, instructor) pada setiap route group; (3) Route grouping dengan prefix dan namespace yang terpisah (/student/*, /instructor/*, /admin/*); (4) View directory yang terisolasi (student-dashboard/, instructor-dashboard/, admin/) — memastikan setiap peran hanya dapat mengakses fitur yang sesuai.

---

Pembelajaran Teknis & Poin Kunci

• Merancang dan mengimplementasikan arsitektur multi-gateway payment dari prinsip dasarnya — memahami perbedaan alur OAuth (PayPal), Checkout Session (Stripe), dan Snap Token (Midtrans), serta mengabstraksikan semuanya ke dalam satu service layer yang konsisten. Pola ini langsung dapat ditransfer ke sistem e-commerce produksi manapun.

• Mempraktikkan pemrosesan webhook pembayaran yang menangani status asinkronus (settlement, capture, deny, expire) dan fraud detection — sebuah pola kritis yang sering diabaikan dalam implementasi naif tetapi mutlak diperlukan untuk keandalan sistem pembayaran di produksi.

• Membangun sistem assessment berdurasi yang aman terhadap manipulasi klien dengan menjadikan server sebagai satu-satunya sumber kebenaran waktu — sebuah pelajaran penting tentang prinsip "never trust the client" dalam pengembangan aplikasi web.

• Mengimplementasikan Certificate Builder sebagai generator dokumen PDF dinamis — memahami tantangan rendering PDF (keterbatasan CSS engine DomPDF, encoding gambar base64, presisi koordinat) dan merancang solusi yang memungkinkan non-teknis (admin) mengkustomisasi output tanpa menyentuh kode.

• Merancang sistem otorisasi multi-peran dalam arsitektur monolitik menggunakan guard, middleware, dan route grouping yang berlapis — mendapatkan pemahaman mendalam tentang kapan memilih pendekatan monolitik (kecepatan development, konsistensi data, deployment sederhana) versus microservice (skalabilitas independen, isolasi fault).

• Mengintegrasikan Cloudinary sebagai CDN media dalam alur upload kursus — memahami pola penyimpanan public ID untuk lifecycle management (update/delete) dan trade-off antara cloud storage vs local filesystem untuk aset yang sering diakses.

• Mendapatkan pengalaman langsung (hands-on) tentang pengelolaan state pembelajaran — watch history, completion tracking, quiz attempt lifecycle, dan sertifikasi — sebuah domain yang memiliki kompleksitas tersembunyi yang signifikan (concurrency, idempotency, edge cases waktu habis) yang sulit dipahami tanpa implementasi nyata.