Aplikasi Inventaris Sekolah (Laravel 7 - Vue.js - SPA) #8: Membuat Layout Dasboard
Pendahuluan
Setelah kita berhasil membuat halaman login, kita akan lanjut ke part menyususun layout untuk masing-masing role .
Layout dibutuhkan agar tampilan antar muka halaman lebih menarik dan terstruktur. Ada beberapa tahap yang akan kita lakukan.
Memodifikasi SideBar
hal pertama yang kita lakukann adalah membuka text editor dan membuka folder projek kalian, kemudian, buka file yang berada di resources/js/src/layout/dashboard, kemudian buka file DashboardLayout.vue, dan modifikasi file tersebut menjadi:
jika sudah, silahkan kalian simpan file tersebut.
Memodifikasi TopBar
lanjut kita akan memodifikasi layout navigasi bar, silahkan kalian buka folder resources/js/src/layout/dashboard dan buka file TopNavbar.vue dan modifikasi menjadi:
jika sudah, silahkan kalian simpan kembali.
Memodifikasi Footer
tahap akhir, kita akan mmeodifikasi layout footer yang dimana kita akan menampilkan nama perusahaan/ profile dibagian paling bawah halaman, Silahkan buka folder resources/js/src/layout/dashboard dan buka file ContentFooter.vue dan modifikasi menjadi:
jika sudah silahkan simpan.
Tahap Akhir
Setelah semua selesai, lalu kalian jalankan command:
npm run dev
Jika tidak ada error, langkah selanjutnya kita jalankan projeknya terlebih dahulu, buka command line dan ketikan command:
php artisan serve
jika serve sudah aktif, kita buka browser dan buka halaman login menggunakan 1. http://localhost:8000/login untuk halaman admin dan operator, dan buka 2. http://localhost:8000/pegawai/login untuk halaman login pegawai.
coba kalian uji coba memasukan data username dan password, untuk url nomor 1 diperuntukan untuk halaman admin dan operator, dan untuk url nomor 2 diperuntukan untuk halaman pegawai.
untuk data username dan password bsa kalian coba dengan data:
- Admin:
username: admin
password: admin
- Operator:
username: operator
password: operator
- Pegawai:
username: peminjam
password: peminjam
Leave a Comment