Aplikasi Inventaris Sekolah (Laravel 7 - Vue.js - SPA) #7: Membuat Data Store menggunakan Vuex

 

Pendahuluan

Pada part sebelumnya kita telah behasil membuat halaman admin beserta untuk autentikasi login nantinya.

Data store digunakan untuk menyimpan data yang bersifat sementara, pada kasus ini data setiap halaman yang kita buat dataNya akan disimpan dan diolah di Data Store.

Library yang akan kita gunakan untuk membuat data store adalah Vuex, yang dimana library ini sangat berguna untuk menyimpan data sementara pada state, saya harap kalian terlebih dahulu mengetahui Vuex beserta fungsi nya.

Sebelum melangkah ke tahap pembuatan data store, terlbih dahulu kalian membuat folder store pada resources/js/src. Jika sudah kita lanjut ke tahap berikut;

Membuat Data Store Ruang

Buka text editor dan buka projek kalian, buat file RuangStore.js pada folder store yang telah kalian buat sebelumnya. masukan code dbawah ini kedalam RuangStore.js:

Membuat Data Store Jenis

Buka text editor dan buka projek kalian, buat file JenisStore.js pada folder store yang telah kalian buat sebelumnya. masukan code dbawah ini kedalam JenisStore.js:

Membuat Data Store Level

Buka text editor dan buka projek kalian, buat file LevelStore.js pada folder store yang telah kalian buat sebelumnya. masukan code dbawah ini kedalam LevelStore.js:

Membuat Data Store Petugas

Buka text editor dan buka projek kalian, buat file PetugasStore.js pada folder store yang telah kalian buat sebelumnya. masukan code dbawah ini kedalam PetugasStore.js:

Membuat Data Store Inventaris

Buka text editor dan buka projek kalian, buat file InventarisStore.js pada folder store yang telah kalian buat sebelumnya. masukan code dbawah ini kedalam InventarisStore.js:

Membuat Data Store Pegawai

Buka text editor dan buka projek kalian, buat file PegawaiStore.js pada folder store yang telah kalian buat sebelumnya. masukancode dbawah ini kedalam PegawaiStore.js:

Membuat Data Store Peminjaman

Buka text editor dan buka projek kalian, buat file PeminjamanStore.js pada folder store yang telah kalian buat sebelumnya. masukancode dbawah ini kedalam PeminjamanStore.js:

Membuat Data Store Detail Pinjam

Buka text editor dan buka projek kalian, buat file DetailPinjamStore.js pada folder store yang telah kalian buat sebelumnya. masukan code dbawah ini kedalam DetailPinjamStore.js:

Memodifikasi Data Store index.js

Buka text editor dan buka file resources/js/src/store/index.js, kemdian modifikasi menjadi: 

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

Kesimpulan

Pada part ini kita telah berhasil membuat halaman login pada semua role yang kita butuhkan.

Jika ada pertanyaan bisa menghubungi saya via WhatsApp ataupun Telegram 

Adapun dokumentasi code dalam serial ini dapat kalian lihat di Github

Daftar Pustaka

https://vuex.vuejs.org/