Aplikasi Inventaris Sekolah (Laravel 7 - Vue.js - SPA) #6: Membuat Halaman Login Admin, Operator, dan Pegawai
Pendahuluan
Pada part yang sebelumnya kita telah berhasil membuat semua tahap pembuatan backend untuk projek kita, backend sangat diperlukan dalam pembuatan aplikasi yang membutuhkan koneksi server-side dalam mengelola database.
Login adalah suatu Proses untuk masuk ke dalam sebuah layanan online yang berisi nama, username, email atau password. Saat ini halaman login bisa dilakukan pada halaman website maupun aplikasi. Secara teknis pun saat ini dalam melakukan login bisa dilakukan secara variatif mulai dari menggunakan email dan no hp, atau bisa juga menggunakan social media yang terintegrasi pada sistem tersebut.
Login sangat diperlukan dalam sebuah aplikasi yang sifatnya secure dan kompleks, untuk menghindari tindakakn-tindakan yang tidak diinginkan dari user/ pengguna yang tifak bertanggung jawab.
Pada tahap ini kita akan membuat halaman login menggunakan sebuah framework frontend Javascript yaitu VueJs, saya harap kalian mengerti dahulu apa itu vuejs, link referensi akan saya cantumkan dibagian daftar pustaka.
Langsung saja kita mulai.
Persiapan
Pada tahap persiapan, alangkah baiknya kalian persiapkan terdahulu nodejs, nodejs disini dibutuhkan untuk menginstall packge/ alat yang diperlukan dalam framework vuejs. Untuk tutorial menginstall nodejs bisa kalian lihat disini
Jika sudah, kalian bisa menginstall package laravel/ui, package ini digunakan untuk menginstall vuejs pada framework laravel, pada command line, jalankan command:
composer require laravel/ui "2.4"
perintah diatas kita menginstall package laravel/ui versi 2.4, saya tegaskan lagi bahwasanya setiap versi package tertentu menyesuaikan framework laravel yang akan kita gunakan.
Jika sudah, lanjutkan dengan membuka command line, dan jalankan command:
php artisan ui vue
perintah diatas untuk menginstall vuejs menggunakaan package laravel/ui yang sebelumnya telah kita install.
kemudian buka kembali command line dan ketikan perintah:
npm i
perintah diatas untuk menginstall modules/ package nodejs yang dibutuhkan.
setelah mengetik npm i dan berhasil, langkah selanjutnya kita akan menginstall beberapa module dengan mengetikan command:
npm i vue-router vee-validate vuex register-service-worker vue-i18n vue-router-prefetch vue2-transitionsuntuk melanjutkan ke tahap pengerjaan, kalian unduh terlebih dahulu asset yang akan digunakan dalam projek ini, bisa kalian download disini kemudian kalian extract dan pindahkan folder src ke folder resources/js pada projek kalian.
Mulai Pengerjaan
Setelah sudah melaui tahap persiapan, kita lanjutkan ke beberapa tahap dibawah ini:
Membuat Component Login Admin dan Operator
Buka file resources/js/src/pages dan buat folder baru bernama Auth lalu buat file Login.vue di folder Auth yang telah dibuat sebelumnya.
Modifikasi file Login.vue menjadi:
setalah itu simpan.
Membuat Component Login Pegawai
Buka folder resources/js/src/pages/Auth dan buat folder baru bernama Pegawai lalu buat file Login.vue di folder Pegawai yang telah kita buat.
Modifikasi file Login.vue di folder Pegawai tadi menjadi:
Membuat router admin
buka folder resources/js/src/router dan buat file admin.js lalu modifikasi menjadi:
Membuat router operator
buka folder resources/js/src/router dan buat file operator.js lalu modifikasi menjadi:
Membuat router pegawai
buka folder resources/js/src/router dan buat file pegawai.js lalu modifikasi menjadi:
Membuat router routes.js
buka folder resources/js/src/router dan buat file routes.js lalu modifikasi menjadi:
Membuat router index.js
buka folder resources/js/src/router dan buat file index.js lalu modifikasi menjadi:
Memodifikasi main.js
buke folder resources/js/src dan modifikasi file main.js menjadi:
pindahkan file bootstrap.js yang berada di folder resources/js/bootstrap.js ke folder resources/js/src
Modifikasi route web.php
buka folder routes dan modifikasi file web.php menjadi:
Modifikasi app.js
buka folder resources/js/app.js, kemudian modifikasi menjadi seperti ini:
dan simpan.
Modifikasi app.blade.php
buka folder resources/views dan buka file app.blade.php, jika file tidak ada, bisa kalian buat file app.blade.php terlebih dahulu, kemudian 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
cjika serve sudah aktif, kita buka browser dan buka halaman login menggunakan url http://localhost:8000/login untuk halaman admin dan operator, dan buka url http://localhost:8000/pegawai/login untuk halaman login pegawai.
Kesimpulan
Pada part ini kita telah berhasil membuat halaman login pada semua role yang kita butuhkan.
Adapun dokumentasi code dalam serial ini dapat kalian lihat di Github
Leave a Comment