Langkah konseptual mengubah halaman statis menjadi sistem konten dengan dashboard, blok, media, dan workflow publish.
Website statis (HTML/CSS murni) pernah menjadi standar emas karena kecepatan dan keamanannya yang nyaris tanpa celah. Tidak ada database yang bisa diretas, dan respons server instan.
Namun, dalam ekosistem digital yang bergerak cepat, kelincahan (agility) adalah segalanya. Website statis perlahan menjadi hambatan besar. Setiap perubahan kecilāmulai dari memperbaiki typo, mengganti spanduk promo, hingga menerbitkan artikel baruāmemerlukan campur tangan tim IT. Ini lambat, mahal, dan membuat tim marketing frustrasi.
Transformasi dari HTML statis menjadi arsitektur CMS (Content Management System) berbasis Laravel seperti Xeniel bukanlah sihir, melainkan metodologi struktural. Berikut adalah pendekatan langkah demi langkah.
Fase 1: Dekonstruksi Visual dan Identifikasi Variabel
Langkah pertama dilakukan di atas kertas (atau Figma), bukan di code editor. Anda harus mengaudit halaman statis tersebut dan memisahkan anatominya. Tanyakan pada diri sendiri: Bagian mana yang merupakan "cangkang" (layout permanen) dan mana yang "isi" (konten dinamis)?
Biasanya, Header (Navigasi) dan Footer adalah cangkang. Di dalam area utama (body), Anda perlu memetakan pola yang berulang. Misalnya, Anda menemukan bahwa halaman tersebut terdiri dari:
- Bagian spanduk gambar besar (Hero).
- Tiga kotak ikon untuk menjelaskan layanan.
- Galeri foto 4 kolom.
Fase 2: Konversi ke dalam Komponen Blade (Blok)
Alih-alih menyalin seluruh file HTML menjadi satu file index.blade.php, sistem modern akan memecahnya.
Setiap bagian yang Anda identifikasi pada Fase 1 diubah menjadi komponen Blade terpisah yang independen.
Misalnya, komponen hero.blade.php. Di dalam file ini, teks asli (statis) seperti <h1>Selamat Datang</h1> diganti dengan variabel pemanggil data, misalnya <h1>{{ $block->content['title'] }}</h1>.
Konsep inilah yang disebut Block-based Architecture. Keuntungannya luar biasa: komponen hero ini sekarang bisa dipakai berulang kali di halaman mana pun, dengan isi konten yang berbeda-beda.
Fase 3: Merancang Skema Database Fleksibel
Sistem CMS tradisional (seperti WordPress jadul) biasanya bergantung pada tabel raksasa dengan banyak kolom spesifik. Namun, untuk arsitektur berbasis blok, pendekatan JSON column (tersedia di MySQL/MariaDB modern) jauh lebih superior.
Dalam Xeniel, sebuah halaman tidak menyimpan teks panjang. Halaman memiliki relasi hasMany ke tabel page_blocks. Tabel blok tersebut hanya memiliki kolom block_type (menyatakan komponen Blade mana yang dirender) dan kolom content_json (menyimpan seluruh konfigurasi teks, warna, dan gambar blok tersebut dalam satu wadah fleksibel).
Fase 4: Menyambungkan Panel Kendali (UI Admin)
Bagian terakhir adalah membuat antarmuka (User Interface) agar manusia bisa mengedit JSON tersebut tanpa menyadari bahwa mereka sedang mengedit JSON. Sebuah Page Builder menggunakan JavaScript (seperti Alpine.js) untuk membaca data dari backend, merendernya sebagai kolom form input visual, dan menyimpan perubahannya kembali ke database saat tombol "Simpan" ditekan.
Dengan mengikuti empat fase di atas, Anda telah memerdekakan website dari belenggu kode statis, menyerahkan tongkat estafet konten kembali kepada tim kreatif dan pemasaran, sambil tetap menjaga struktur desain tetap rapi berkat batasan komponen Blade.