ILAB Malang —Platform Informasi Lomba Pelajar Malang Raya
ILAB Malang —
Platform Informasi Lomba
Pelajar Malang Raya
Perancangan dan pengembangan platform web end-to-end untuk menghubungkan Event Organizer dengan peserta lomba pelajar di wilayah Malang Raya, mulai dari sistem pendaftaran, pembayaran, hingga notifikasi otomatis.
ILAB Malang adalah platform digital berbasis WordPress yang dirancang sebagai ekosistem lomba pelajar terpadu — menghubungkan penyelenggara event (EO) dengan peserta dari berbagai jenjang pendidikan di Malang Raya, dengan ILAB sebagai perantara yang menjamin validitas data dan transaksi.
Latar Belakang & Tujuan
Informasi lomba pelajar di Malang Raya tersebar di berbagai kanal — media sosial, grup WhatsApp, papan pengumuman sekolah — tanpa agregasi terpusat. EO kesulitan menjangkau peserta yang relevan, sementara peserta kesulitan menemukan lomba sesuai jenjang dan bidang minat mereka.
ILAB Malang hadir sebagai solusi dengan model platform dua sisi: EO mendaftarkan event secara gratis, sementara ILAB memperoleh revenue dari komisi 10% biaya pendaftaran peserta yang masuk melalui platform.
Scope proyek: System analysis, database design, full-stack WordPress development (PHP, custom AJAX, REST API), UI/UX implementation, payment gateway integration, WhatsApp automation, SEO implementation, performance optimization, dan technical documentation.
Tech Stack
Arsitektur Sistem
Sistem dibangun di atas WordPress dengan pendekatan custom theme + plugin hybrid — dikelola melalui plugin tersendiri, sementara seluruh logika bisnis, AJAX handler.
Struktur Data
Tiga Custom Post Type utama:
Fitur Utama
Sistem EO & Event
| Fitur | Deskripsi |
|---|---|
| Daftar Rekanan EO | Form pendaftaran EO dengan verifikasi kode posting unik, upload logo, data organisasi lengkap |
| Submit Event Lomba | Form multi-step dengan Quill.js rich text editor untuk deskripsi, upload poster, field tanggal, kuota, biaya |
| Review & Approve Admin | Dashboard review dengan tab status, tombol approve/tolak/pin, set tanggal buka satu klik |
| Profil EO Publik | Halaman profil publik tanpa kontak langsung — semua komunikasi melalui admin ILAB |
| Edit Profil EO | Login berbasis kode posting, edit data profil dan logo, lihat daftar event sendiri |
Sistem Peserta & Pembayaran
| Fitur | Deskripsi |
|---|---|
| Formulir Daftar Peserta | 4 section: data diri, data sekolah, data orang tua, detail lomba — termasuk toggle lomba tim & upload dokumen |
| Kode Tiket Unik | Setiap pendaftaran menghasilkan kode unik (contoh: ILABKRE-FCMHCH) sebagai identifikasi peserta |
| Dual Payment Gateway | Duitku (QRIS, VA, GoPay, OVO) sebagai gateway utama + Midtrans Snap sebagai fallback, dipilih via setting admin |
| Transfer Manual | Peserta upload bukti transfer, admin verifikasi, konfirmasi manual via tombol di Data Peserta |
| Cek Status Pendaftaran | Halaman publik /cek-status/ dengan timeline 4 langkah, tanpa login, URL shareable via parameter kode |
| Rating & Testimoni | Peserta berikan rating event + EO via kode tiket, moderasi admin, shortcode embed di halaman event/EO |
Admin Tools
| Tool | Fungsi |
|---|---|
| Dashboard Statistik | Kartu revenue, komisi 10%, peserta, event aktif, aktivitas terbaru, bar chart per bidang lomba |
| Data Peserta | Filter per event + status, export CSV, print PDF A4 landscape otomatis, kirim data ke EO via WA |
| Template Notifikasi WA | 5 template pesan editable dengan variabel klik-sisipkan, URL konfirmasi bayar bisa diupdate tanpa kode |
| Pengaturan Terpusat | Konfigurasi Duitku/Midtrans, Fonnte token, rekening bank, WA admin, GAS webhook URL |
Alur Pembayaran & Notifikasi
Seluruh alur konfirmasi — baik dari verifikasi manual admin maupun webhook otomatis Duitku/Midtrans — memanggil satu fungsi terpusat ilab_konfirmasi_pembayaran_peserta(), memastikan konsistensi notifikasi dan update status terlepas dari metode pembayaran yang digunakan.
Implementasi SEO & Schema.org
SEO diimplementasikan berlapis: Yoast SEO untuk meta tag, sitemap, dan canonical, sementara kode tema menambahkan Schema.org structured data yang tidak di-handle Yoast.
| Halaman | Schema Type | Manfaat di Google |
|---|---|---|
| Detail Event | Event + Offer | Rich result dengan tanggal, lokasi, harga pendaftaran |
| Profil EO | Organization | Knowledge panel untuk penyelenggara |
| Arsip Lomba | ItemList | Daftar lomba sebagai rich snippet di SERP |
| Homepage | WebSite + SearchAction | Sitelinks search box di Google |
| Semua halaman | BreadcrumbList | Breadcrumb di bawah judul hasil pencarian |
Problem Solving — Tantangan Teknis
Beberapa tantangan teknis signifikan yang ditemui dan diselesaikan selama pengembangan:
Session directory /var/cpanel/php/sessions/alt-php74 tidak exist di server, dan headers already sent menyebabkan session_start() gagal secara konsisten di lingkungan shared hosting.
Migrasi seluruh state management dari PHP Session ke WordPress Transients dikombinasikan dengan cookie browser untuk identifikasi sesi. Lebih reliable di semua jenis hosting, tidak membutuhkan konfigurasi server tambahan, dan memiliki built-in expiry handling.
WordPress tidak otomatis mendaftarkan rewrite rule untuk paginasi pada custom archive template. URL /lomba/page/2/ yang di-generate oleh paginate_links() selalu menghasilkan halaman 404.
Intercept via add_action('template_redirect', ..., 1) sebelum WordPress merender 404. Deteksi pola URL /lomba/page/N/, jalankan custom WP_Query, override $wp_query global, reset HTTP status ke 200, lalu load template yang sesuai.
Field tanggal tersimpan dalam berbagai format: Y-m-d, Ymd (tanpa dash), dan format dobel seperti 20260322260322. Perbandingan string langsung menghasilkan logika yang salah — event yang masih buka ditampilkan sebagai sudah tutup.
Fungsi normalisasi yang mendeteksi dan mengkonversi semua format ke Y-m-d sebelum digunakan untuk perbandingan. Semua logika pengecekan tanggal di seluruh template menggunakan fungsi ini secara konsisten.
Kebutuhan untuk mendukung dua payment gateway berbeda (Duitku untuk operasional, Midtrans sebagai fallback) tanpa duplikasi kode dan dengan kemampuan switch mudah dari admin.
Satu AJAX handler yang otomatis mendeteksi gateway aktif. Seluruh logika post-payment (konfirmasi, update status, notif WA) menggunakan fungsi terpusat yang sama, terlepas dari gateway yang dipakai. Switch gateway cukup dari WP Admin → Pengaturan.
Optimasi Performa
| Optimasi | Implementasi | Dampak |
|---|---|---|
| Lazy Load | Auto-inject loading="lazy" via filter the_content + post_thumbnail_html | Gambar bawah tidak diload saat halaman pertama dibuka |
| LCP Optimization | fetchpriority="high" + loading="eager" pada poster event (LCP element) | Largest Contentful Paint lebih cepat |
| Preload Assets | Preload logo + hero image via wp_head hook priority 2 | Aset kritis tersedia lebih awal |
| DNS Prefetch | Prefetch Google Fonts, CDN domains | Koneksi ke domain eksternal lebih cepat |
| Remove WP Bloat | Hapus Gutenberg block styles, dashicons frontend, jQuery Migrate | ~60KB CSS/JS tidak perlu dimuat pengunjung |
| GZIP + Caching | Konfigurasi .htaccess — cache gambar 1 tahun, CSS/JS 1 bulan | File 60–80% lebih kecil, return visitor lebih cepat |
| Prefetch Navigasi | Prefetch /lomba/page/2/ dan halaman daftar peserta | Navigasi terasa instan |
Catatan Pengembangan
Proyek ini dikembangkan dengan pendekatan iteratif berbasis kebutuhan nyata — setiap fitur dibangun, diuji langsung di server produksi, dan disempurnakan berdasarkan feedback. Total pengembangan mencakup lebih dari 4.000 baris kode PHP di functions.php, 15 template halaman custom, dan integrasi ke empat layanan eksternal (Duitku, Midtrans, Fonnte, Google Fonts).
Seluruh sistem didokumentasikan dalam file HTML mandiri yang mencakup arsitektur, panduan konfigurasi, referensi variabel template WA, dan catatan troubleshooting untuk keperluan maintenance jangka panjang.
Informasi Project
- Klien
- ILAB Malang
- Periode
- 2026
- Kontak WA
- 081235025700
Bagikan ke:
