Latar belakang

Media Adhi Persada (MAP) adalah perusahaan advertising, event organizer, dan IT solution di Sukabumi. Situs lama mereka hanya berisi profil dan daftar portofolio. Titik billboard yang disewakan cuma ditulis sebagai teks, statusnya diubah manual, dan calon penyewa tidak bisa melihat titik mana yang masih kosong. Kalau ada yang menghubungi lewat WhatsApp, MAP juga tidak tahu orang itu datang dari halaman mana.

Solusi

Saya membangun ulang situsnya dengan Laravel 13 sebagai satu aplikasi yang melayani dua domain. Domain utama berisi situs publik, sedangkan subdomain cms berisi panel admin dari Filament. Route publik dibungkus Route::domain() dan panel Filament hanya terdaftar di domain CMS, jadi /admin di situs publik memang tidak ada.

Semua yang tampil di situs bisa diubah dari CMS: billboard, layanan, portofolio, galeri, slider, banner, klien, FAQ, sampai nomor kontak dan template pesan WhatsApp. Setiap kali konten disimpan, cache HTML halaman publik ikut dibersihkan sehingga perubahan langsung terlihat.

Fitur utama

• Katalog billboard dengan filter wilayah, status, tipe, dan penerangan, plus tampilan grid, list, dan peta Leaflet.
• Status Tersedia atau Disewa dihitung dari tanggal sewa saat halaman dibuka. Billboard otomatis kembali tersedia sehari setelah masa sewanya habis, tanpa scheduler.
• Semua tombol WhatsApp lewat route /wa yang mencatat sumber klik (billboard, layanan, portofolio, atau umum) dan mengabaikan bot.
• Form Hubungi Kami menyimpan pesan sebagai lead lalu mengirim email notifikasi. Proteksinya honeypot, time-trap terenkripsi, dan rate limit, tanpa CAPTCHA.
• Pencarian lintas billboard, layanan, dan portofolio dengan saran saat mengetik.
• Dashboard CMS berisi statistik billboard, grafik klik WhatsApp 30 hari, sewa yang segera berakhir, dan pesan terbaru.
• Pemilih titik peta di form billboard: klik peta, geser penanda, atau tempel tautan Google Maps.
• Kotak masuk pesan dengan status, catatan internal, tombol balas lewat WhatsApp, dan ekspor CSV.
• SEO per halaman (meta, Open Graph, JSON-LD untuk LocalBusiness, Service, Place, CreativeWork, dan FAQPage), sitemap dengan gambar, serta robots.txt yang berbeda untuk domain publik dan CMS.
• Redirect 301 untuk URL lama, termasuk yang dibuat otomatis saat slug diubah. Ke-14 URL portofolio dari situs lama tetap sama.

Tantangan teknis

Bahan fotonya berupa 478 foto mentah dari HP tim lapangan, dan banyak yang masih membawa overlay aplikasi kamera berisi nomor telepon dan koordinat. Saya menulis skrip Node dengan sharp untuk mengompres foto dan membuat lembar kontak, lalu memilahnya satu per satu ke portofolio, galeri, atau dibuang. Hasilnya 93 foto terpakai, 18 di antaranya dipotong atau dipikselkan dulu. Foto yang nanti diunggah admin lewat CMS juga dibersihkan: EXIF dan XMP (termasuk lokasi GPS) dibuang begitu file masuk, sebelum konversi WebP dibuat.

Cache sempat bikin pusing. Laravel 13 secara bawaan menolak membuka objek dari cache, sedangkan cache database tidak punya tags. Akhirnya saya menyimpan hasil render HTML dalam bentuk string, dengan kunci yang memuat nomor versi. Saat konten berubah, versinya dinaikkan dan kunci lama kedaluwarsa sendiri.

Aturan status billboard juga harus sama persis di dua tempat, yaitu accessor untuk tampilan dan scope untuk query filter. Keduanya saya uji dengan kasus yang sama: tanpa sewa, sewa di masa depan, sewa yang sudah lewat, dan status khusus seperti perawatan.

Pemilih peta di CMS saya buat sebagai field kustom Filament dengan Alpine dan Leaflet. Tautan Google Maps lengkap bisa dibaca koordinatnya, tapi tautan pendek maps.app.goo.gl tidak bisa karena butuh redirect dari server. Untuk kasus itu admin diminta menempel tautan lengkapnya.

Ada juga yang belum beres. Ukuran dan koordinat sebagian billboard belum ada datanya, jadi di situs masih tampil "-" sampai klien mengisinya lewat CMS. Satu foto billboard punya stempel GPS yang ternyata menunjuk ke lokasi lain, jadi koordinatnya sengaja saya kosongkan daripada menampilkan titik yang salah di peta.

Peran saya

Saya mengerjakan project ini sendiri. Mulai dari menyusun kebutuhan dan spesifikasi, mengolah foto, mendesain tampilan, menulis backend dan CMS, menulis test, sampai deploy. Aplikasinya dikemas dengan Dockerfile (image serversideup/php dengan PHP 8.5) dan dijalankan di Coolify pada VPS dengan database MySQL 8.

Hasil dan pengembangan selanjutnya

Situs sudah berjalan di server dengan seluruh konten awal: 14 portofolio, 47 foto galeri, 3 layanan, dan 4 titik billboard aktif. Ada 165 test Pest yang mencakup halaman publik, filter billboard, pencatatan klik WhatsApp, form kontak, CMS, dan SEO. Data pemakaian seperti jumlah pesan atau klik belum ada karena situs belum dipindah ke domain utamanya.

Berikutnya saya akan memindahkan DNS mediaadhipersada.id ke server baru, mendaftarkan sitemap ke Google Search Console, dan membantu MAP melengkapi data billboard. Setelah data klik WhatsApp terkumpul, saya ingin menambah laporan klik per billboard supaya MAP bisa melihat titik mana yang paling sering ditanyakan.