Ma’had Nurul Ilmi adalah pesantren yang memadukan hafalan Al-Qur’an dengan pendidikan berbasis alam, dan program serta kegiatan hariannya sudah dibagikan di YouTube, Instagram, TikTok, dan Facebook. Pesantren ini membutuhkan website resmi yang menyatukan semuanya di satu tempat untuk calon santri dan orang tua, termasuk yang berasal dari luar daerah. Situs ini dibangun sebagai child theme custom di atas Blocksy dengan plugin pengaturan pendamping, setiap halamannya dibangun dengan Tailwind CSS tanpa page builder, dan konten tiap section bisa diedit dari tempatnya sendiri di dashboard.
Tampilan situs jadi yang bisa di-scroll, persis seperti yang dilihat pengunjung.
Desktop
Mobile
Pekerjaan seperti ini biasanya dibagi ke pengembang, desainer UI/UX, desainer grafis, dan pemasar. Di proyek ini, keempat keahlian itu dikuasai satu orang, jadi setiap keputusan datang dari orang yang memahami keseluruhan proyek, bukan hanya bagiannya sendiri.
16
standar yang terpenuhi, dari kode hingga pemasaran.
Dampak bisnis di sini diukur dari 5 area: Kehadiran, Kualitas, Kepercayaan, Konversi dan Pertumbuhan. Semuanya mencakup bagaimana bisnisnya ditemukan, dipersepsikan, dan direspons.
Informasi yang tetap mudah dicari, tidak terkubur
Sebelum
Pesantren yang hanya mengandalkan media sosial seperti YouTube, Instagram, TikTok, dan Facebook untuk membagikan programnya akan melihat informasi itu tergeser oleh postingan baru dalam hitungan hari, tanpa tempat pasti yang bisa dicek ulang oleh calon orang tua.
Sesudah
Situs web menyajikan informasi yang sama di tempat yang rapi dan profesional, tersusun per halaman dan tidak tergeser di feed, sehingga calon orang tua selalu menemukan yang mereka butuhkan sebelum berkunjung langsung.
Tiap proyek memanfaatkan kombinasi berbagai disiplin, begini gambarannya di proyek ini.
Tools dan teknologi yang digunakan untuk mewujudkan proyek ini.
Masalah yang muncul selama membangun proyek ini, dan hasil yang didapat dari menyelesaikannya.
Pengaturan yang Kembali ke Default Tanpa Peringatan
WordPress menyimpan pengaturan tema per folder tema, jadi child theme dimulai dari pengaturan default tanpa pesan error apa pun. Menyalin pengaturannya saja juga tidak cukup, karena Blocksy menulis gayanya ke stylesheet hasil generate yang hanya diperbarui lewat hook miliknya sendiri. Solusinya, pengaturan disalin, cache resmi Blocksy diperbarui, lalu nilai di stylesheet hasil generate dicocokkan dengan pengaturan yang tersimpan.
Menjaga Halaman Tetap Terbuka Saat Plugin Field Gagal
Setiap halaman statis membaca kontennya lewat ACF, jadi update yang gagal atau penonaktifan yang tidak disengaja akan membuat semuanya error sekaligus. Lapisan cadangan kini menangani sisi depan situs tanpa menyentuh dashboard dan proses latar belakang, sehingga ACF tetap bisa diaktifkan kembali dengan bersih. Hal ini diverifikasi dengan menonaktifkan ACF secara paksa lalu memeriksa setiap halaman.
Ekspor Database yang Ditolak Alat Impor Hosting
Production menerima seluruh hasil build dari lokal, baik database maupun file. Alat impor database di hosting menolak file berukuran besar, dan find-and-replace biasa pada domain akan merusak pengaturan yang tersimpan dalam format serialized. Karena itu domain diganti dengan cara yang aman untuk data serialized, dan ekspor database dipecah menjadi beberapa bagian yang masing-masing diuji ke database kosong terlebih dahulu.
Masalah teknis yang diperbaiki selama membangun proyek ini.
Halaman tetap terbuka walau ACF gagal
Pengaturan ikut pindah, terbukti di hasilnya
Permukaan serangan diperkecil
Setiap impor diuji sebelum live
Gambar di bawah 200KB
Kompresi otomatis di setiap unggahan baru
Tanpa beban page builder
Autoload: 161KB menjadi 74KB
Setting independen dari tema
Satu file per section, dipakai ulang
Version control khusus kode custom
Dipantau dan dirawat, bukan dibiarkan begitu saja
Sebelum
Setiap halaman statis membaca kontennya lewat ACF, jadi update yang gagal atau penonaktifan yang tidak disengaja akan membuat setiap halaman mengalami fatal error.
Sesudah
Lapisan cadangan mengembalikan nilai kosong di sisi depan situs saat ACF tidak termuat, tanpa ikut aktif di dashboard, CLI, dan cron, sehingga ACF tetap bisa diaktifkan kembali. Saat ACF dinonaktifkan secara paksa, setiap halaman statis tetap terbuka normal.
Sebelum
WordPress menyimpan pengaturan tema per folder tema, dan Blocksy hanya membuat ulang stylesheet dinamisnya lewat hook miliknya sendiri, sehingga child theme akan kembali ke tampilan default tanpa pesan error apa pun.
Sesudah
Pengaturan yang sudah ada disalin, cache resmi Blocksy diperbarui, lalu hasilnya diverifikasi dengan mencocokkan nilai di stylesheet hasil generate dengan pengaturan yang tersimpan.
Sebelum
Instalasi WordPress default mengekspos informasi yang bisa dipakai penyerang untuk meriset target sebelum mencoba apa pun lebih jauh.
Sesudah
Hardening berlapis di plugin pengaturan menutup celah-celah itu di berbagai titik, dari proteksi login sampai konfigurasi server, dan dua putaran uji payload tidak menemukan masalah kritis.
Sebelum
Production menerima seluruh hasil build dari lokal, database dan file sekaligus. Find-and-replace domain biasa merusak pengaturan yang tersimpan dalam format serialized, dan alat impor di hosting menolak file SQL berukuran besar.
Sesudah
Domain diganti dengan cara yang aman untuk data serialized, database diekspor dalam beberapa bagian yang masing-masing diuji ke database kosong terlebih dahulu, dan aturan hardening level server ikut dalam setiap paket deploy.
Sebelum
Gambar beresolusi tinggi yang tersebar di seluruh situs, bukan hanya di satu bagian, berisiko memperlambat setiap halaman.
Sesudah
Setiap gambar di seluruh situs dikompres ke WebP dan dijaga di bawah 200KB, sehingga halaman tetap cepat tanpa penurunan kualitas yang terlihat.
Sebelum
Kompresi hanya dilakukan sekali secara manual, sehingga foto yang diunggah klien nantinya akan masuk dalam ukuran penuh tanpa kompresi.
Sesudah
Pipeline khusus kini otomatis mengompres dan mengonversi setiap unggahan baru, sehingga halaman tetap cepat tanpa bergantung pada orang yang harus ingat mengoptimasi gambar secara manual.
Sebelum
Page builder memuat script, style, dan markup bersarang yang dalam di setiap halaman, dan Blocksy secara default juga memuat salinan font-nya sendiri.
Sesudah
Halaman dibangun sebagai template Tailwind yang dikompilasi menjadi satu stylesheet berisi class yang benar-benar dipakai saja, font dimuat sekali oleh child theme, dan foto hero mendapat prioritas pemuatan di atas logo.
Sebelum
Option yang diset autoload sudah mencapai 161KB, dan semuanya dimuat di setiap request.
Sesudah
Option autoload dipangkas menjadi 74KB, sehingga data yang harus dimuat WordPress sebelum merender halaman jauh lebih kecil.
Sebelum
Pengaturan tema bawaan WordPress disimpan dalam kondisi terikat ke tema yang sedang aktif.
Sesudah
Plugin pengaturan terpisah kini menyimpan warna brand, data kontak, media sosial, dan footer secara independen dari tema, dan setiap bagian situs membaca data kontak dari satu sumber itu.
Sebelum
Membangun tiap halaman sebagai satu template panjang akan mencampur markup dan logic setiap section, dan section yang dipakai di beberapa halaman akan terduplikasi.
Sesudah
Struktur semi atomic menjaga page template tetap tipis sebagai pengatur urutan, memberi setiap section file dan field group-nya sendiri, dan memakai ulang section bersama di beberapa halaman tanpa menyalinnya.
Sebelum
Project WordPress mencampur file core, plugin pihak ketiga, uploads, dan konfigurasi dengan kode yang benar-benar ditulis untuknya, sehingga riwayat versinya berantakan dan berisiko untuk dibagikan.
Sesudah
Repository berbasis whitelist hanya melacak child theme custom, plugin pengaturan, template server, dan dokumentasi, sementara core, plugin, uploads, dan konfigurasi otomatis tidak ikut.
Sebelum
Situs yang dibiarkan tanpa perawatan setelah diluncurkan, dengan plugin yang tidak diperbarui dan tanpa pemantauan uptime, diam-diam menumpuk risiko dan downtime yang sering baru disadari setelah ada yang benar-benar rusak.
Sesudah
Perawatan rutin menjaga plugin dan tema tetap diperbarui serta memantau performa dan uptime, sehingga masalah ketahuan sebelum berdampak ke pengunjung.
