larazu.biz.id

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...

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 ...

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...

Pengenalan Vue.js Apa itu Vue.js? Vue.js adalah framework JavaScript progresif yang digunakan untuk membangun antarmuka pengguna (UI). Vue memiliki pendekatan yang sangat fleksibel dan bisa digunakan untuk membuat aplikasi dari yang sangat sederhana hingga aplikasi web yang kompleks. Dibandingkan dengan framework lain, Vue lebih ringan dan lebih mudah dipelajari. Vue memudahkan pengembangan aplikasi dengan membagi tampilan (UI) menjadi komponen-komponen yang dapat digunakan kembali (reusable components). Hal ini memungkinkan pengembangan yang lebih efisien, terutama untuk aplikasi dengan kompleksitas tinggi. Vue bekerja dengan dua pendekatan utama: Declarative Rendering : Menggunakan sintaksis deklaratif untuk menampilkan data dalam HTML. Reactivity : Data dan tampilan saling terhubung secara otomatis. Ketika data berubah, tampilan akan diperbarui secara otomatis tanpa perlu melakukan pemrograman manual. Mengapa memilih Vue.js? Berikut adalah beberapa alasan mengapa banyak penge...

Untuk membuat code block (blok kode) di Blogger, Anda dapat menggunakan tag HTML <pre><code> ... </code></pre> . Dengan ini, Anda dapat menampilkan kode dengan format yang sesuai dan mencegah interpretasi tag HTML di dalamnya. Langkah-langkah membuat code block/ syntax highlighter: Buka editor postingan Blogger Masuk ke Blogger, lalu pilih postingan yang ingin Anda edit atau buat postingan baru Beralih ke mode HTML Di editor postingan, klik tombol "HTML" (biasanya di sebelah kiri) untuk beralih ke tampilan HTML Tambahkan tag <pre><code>...</code></pre> Posisikan kursor di tempat di mana Anda ingin menampilkan blok kode. Kemudian, ketik atau tempelkan kode Anda di antara tag <pre><code> dan </pre> . Contoh: <pre><code> console.log("Hello, world!"); </code></pre> Sembunyikan tag <p> Jika Anda menambahkan blok kode di dalam paragraf, hilangkan tag <p...

Bagi seorang pengembang, GitHub bukan hanya sekadar platform penyimpanan kode. Ia adalah pusat kolaborasi, kontrol versi, dan manajemen proyek yang tak tergantikan. Agar Anda dapat berinteraksi dengan GitHub secara efektif dan efisien, pemahaman mendalam tentang perintah-perintah Git adalah sebuah keharusan. Postingan ini hadir sebagai panduan komprehensif yang menyajikan daftar perintah GitHub penting dalam format tabel yang mudah Anda pahami dan gunakan. Perintah-perintah GitHub Perintah Git Pengertian Contoh Penggunaan git init Membuat repository Git baru di direktori lokal git init git clone Menyalin repository dari GitHub ke lokal git clone https://github.com/user/repo git status Menampilkan status file (modified, staged, untracked) git status git add Menambahkan file ke staging area sebelum commit git add index.html git commit Menyimpan perubahan ke repositori lokal git commit -m "Pesan c...