Langsung ke konten utama

Blogger

Belajar Blogger: Panduan Dalam Mengembangkan Blog

Selamat datang di halaman khusus Blogger di larazu.biz.id! Dapatkan berbagai panduan dan tutorial untuk memaksimalkan platform Blogger.

Tips Blogger

Komentar

Postingan populer dari blog ini

Instalasi Vue 3 menggunakan Vue CLI & Vite

Instalasi Vue 3 menggunakan Vue CLI Vue CLI adalah alat untuk membuat proyek Vue secara otomatis dengan konfigurasi yang sudah diatur sebelumnya. Ini adalah pilihan yang bagus jika kamu ingin memiliki kontrol lebih atas pengaturan proyek dan konfigurasi build. Langkah-langkah: Install Vue CLI secara global (jika belum terpasang) : Buka terminal dan jalankan perintah berikut untuk menginstal Vue CLI secara global di komputer kamu: npm install -g @vue/cli Buat proyek baru menggunakan Vue CLI : Setelah Vue CLI terpasang, kamu bisa membuat proyek Vue 3 baru dengan perintah berikut: // Pilih salah satu vue create nama-proyek npm create vue@latest nama-proyek // Rekomendasi karena sesuai Official Docs Gantilah nama-proyek dengan nama yang kamu inginkan untuk proyekmu. Pilih konfigurasi : Ketika perintah di atas dijalankan, Vue CLI akan menanyakan beberapa pilihan konfigurasi. Pilihlah opsi yang sesuai (misalnya, memilih preset default yang sudah menyertakan Babe...

Project Website CMS: Membuat Fitur Login Admin

Tanpa berlama-lama. Yuk, langsung kita mulai mengerjakan fitur login pada project yang dibuat menggunakan Vue 3 sebagai frontend dan Laravel 10 sebagai backend. Lakukan instalasi project Kalau belum tahu caranya melakukan instalasi, silahkan simak postingan ini: Install Vue.js:  https://www.larazu.biz.id/2025/04/instalasi-vue-3-menggunakan-vue-cli-vite.html Install Laravel: Coming soon Struktur project Dalam case ini, folder frontend dan backend berada pada folder yang sama. Ini adalah struktur project yang saya buat (opsional): 🔵   Backend: Laravel 10 (folder backend/) backend/ ├── app/ │ └── Http/ │ ├── Controllers/ │ │ └── Api/ │ │ └── AuthController.php ← Controller login │ └── Middleware/ │ └── VerifyCsrfToken.php ← Bypass CSRF untuk /api/login ├── config/ │ ├── cors.php ← Atur CORS │ └── session.php ← Atur same_site=lax ├── routes/ │ └── api.php ...

Project Website CMS: Membangun AdminLayout.vue dan Dashboard.vue

Sekarang kita akan membangun AdminLayout.vue dan Dashboard.vue dari nol , dengan pendekatan yang: ✅ Aman ✅ Rapi dan ringan ✅ Terintegrasi dengan Tailwind CSS ✅ Siap untuk dikembangkan lebih lanjut (CRUD, dll) 📁 Struktur Komponen yang Akan Kita Buat src/ ├── layouts/ │ └── AdminLayout.vue // ← Layout admin dengan header + sidebar ├── views/ │ └── admin/ │ └── Dashboard.vue // ← Halaman dashboard pertama setelah login ✅ 1. AdminLayout.vue (Header + Sidebar) directory: src/layouts/AdminLayout.vue <template> <div class="min-h-screen flex bg-gray-100"> <!-- Sidebar --> <aside class="w-64 bg-white shadow-md hidden md:block"> <div class="p-6 font-bold text-blue-600 text-xl border-b border-gray-200"> STIP Admin </div> <nav class="p-4 space-y-2 text-gray-700"> <RouterLink to="/admin/dashboard" class="blo...