Saya ingin membangun sebuah **website blog profesional dan modern** dengan fitur lengkap termasuk halaman utama, halaman single post, kategori, hasil pencarian, serta admin panel untuk mengelola konten. Sistem ini juga memiliki pemisahan gambar thumbnail dan gambar konten, serta mendukung editor Visual + HTML. --- ## 🌐 1. WEBSITE UTAMA (FRONTEND USER) ### βœ… 1.1. Homepage (`misal: namaweb.com`) * **Navbar**: * Logo * Menu: Home, Kategori (dropdown opsional), Halaman Statis (Tentang, Kontak) * **Hero Section (Utama)**: * Teks perkenalan / heading besar / gambar background * Dapat disesuaikan dari admin panel * **Section: Postingan Terbaru** * Tampilkan **2 post paling baru** dalam layout besar * Tampilkan **6 post berikutnya** dalam layout grid atau list kecil * **Total 8 post per halaman**, diikuti oleh **pagination otomatis** * Setiap post tampil dengan: * Judul * Tanggal publish * Nama kategori * **Thumbnail khusus** (tidak diambil dari isi konten) * **Section: Kategori (Opsional)** * Bisa diatur tampil atau tidak dari admin panel * Tampilkan beberapa kategori beserta beberapa post terbaru di masing-masing kategori * **Footer**: * Navigasi ulang * Link ke halaman statis * Sosial media * Copyright --- ### πŸ” 1.2. Halaman Hasil Pencarian (`namaweb.com/search?q=kata`) * Digunakan saat user melakukan pencarian * **Breadcrumb**: ``` Beranda > Hasil untuk "ayam" ``` * **Hero Section Khusus**: * Judul: `Hasil Pencarian untuk "ayam"` * Deskripsi pendek jika perlu * Visual bisa dibedakan dari homepage * **Daftar Post Hasil Pencarian**: * Layout seperti post biasa * Pagination jika hasil banyak * Jika tidak ada hasil: tampilkan pesan "Tidak ditemukan post dengan kata 'ayam'" --- ### πŸ—‚οΈ 1.3. Halaman Kategori (`namaweb.com/nama-kategori`) * Ditampilkan saat user klik kategori dari mana pun * **Breadcrumb**: ``` Beranda > [Nama Kategori] ``` * **Hero Section Khusus Kategori**: * Judul besar: `Kategori: Teknologi` * Deskripsi kategori (dari admin panel) * **Daftar Semua Post dalam Kategori Tersebut** * Layout seperti homepage * Pagination tiap 8 post --- ### πŸ“„ 1.4. Halaman Single Post (`namaweb.com/kategori/judul-post`) * **Breadcrumb**: ``` Beranda > [Nama Kategori] ``` * **Detail Post**: * Judul * Tanggal publish * Nama kategori * Jumlah views (misalnya: β€œDilihat 123 kali”) * **Isi Konten Post**: * Diedit dari CMS * Bisa mengandung gambar, teks, embed, video, link, dll. * **Share Section di Bawah Post**: * Ikon untuk: WhatsApp, Facebook, Twitter/X, Copy Link --- ### πŸ“„ 1.5. Halaman Statis (`namaweb.com/page/judul`) * Halaman manual seperti Tentang, Kontak, dll * Tidak muncul di feed post * URL tetap: `/page/judul` --- ## πŸ› οΈ 2. ADMIN PANEL ### ✍️ 2.1. Editor Postingan * **Dual Mode Editor**: 1. **Visual Mode (WYSIWYG)**: * Bold, italic, underline * Heading (H1-H6) * Paragraph alignment (left, center, right) * List, quote, table * Sisip gambar ke dalam isi konten 2. **HTML Mode**: * Bisa toggle untuk melihat dan menulis dalam HTML * Cocok untuk pengguna teknis * **Thumbnail Post**: * Upload **gambar khusus** yang digunakan untuk tampilan preview/post grid * Thumbnail **tidak otomatis muncul di konten post** * Disimpan terpisah dari gambar isi ### πŸ—‚οΈ 2.2. Kelola Postingan * Tambah, edit, hapus post * Field yang disediakan: * Judul * Slug/URL * Kategori (dropdown) * Tag (opsional) * Thumbnail (upload terpisah) * Konten (editor) * Tanggal terbit (default: sekarang, bisa diubah) * SEO: meta title, meta description * Status: Draft / Publish * Counter view (otomatis bertambah) --- ### πŸ“„ 2.3. Kelola Halaman Statis * Sama seperti post, tapi: * Tidak ada kategori atau tag * Tidak tampil di feed * URL: `/page/judul` --- ### πŸ—ƒοΈ 2.4. Kelola Kategori * Tambah/edit/hapus kategori * Field: * Nama kategori * Slug kategori * Deskripsi kategori * Toggle tampilkan di homepage (ya/tidak) --- ### πŸ“Š 2.5. Dashboard Admin * Statistik ringkasan: * Jumlah post * Jumlah draft * Total views * Post paling populer * Media Library: * Semua gambar yang pernah di-upload * Bisa digunakan ulang * Login/Logout Admin --- ## πŸ“ 3. STRUKTUR GAMBAR | Jenis Gambar | Penjelasan | | ---------------- | ---------------------------------------------------------------------- | | Thumbnail Post | Gambar utama post, tampil di homepage/kategori/search | | Gambar Konten | Gambar yang disisipkan di dalam isi post (melalui editor Visual/HTML) | | Gambar Hero Page | Opsional untuk halaman seperti search/kategori (diatur statis/dinamis) | --- Gunakan css manual hindari talwind atau bootstrap. Buat dengan UI modern kekinian 2025 responsive. ---