Login System Dengan JSON Web Token Laravel 7 Dan Vue – 02 Front End

Login System Dengan JSON Web Token Laravel 7 Dan Vue – 02 Front End – Pada artikel kali ini kita akan membuat aplikasi Login System Dengan JSON Web Token Laravel 7 Dan Vue. Disini kita akan membuat bagian Front End.

Untuk bagian Back End anda bisa melihat pada artikel sebelumnya disini:

https://blog.cacan.id/login-system-dengan-json-web-token-laravel-7-dan-vue-01-back-end

 

Login System Dengan JSON Web Token Laravel 7 Dan Vue – Front End

Masuk ke direktori project, selanjutnya install dependencies VUE menggunakan perintah berikut:

 

app.blade.php

Buat file baru dengan nama app.blade.php pada folder resources/views kemudian ketikkan script berikut:

Simpan file app.blade.php

 

Routes

Buka file web.php pada folder routes kemudian edit menjadi seperti berikut:

Simpan file web.php

 

Router

Install dependencies untuk router menggunakan perintah berikut:

 

routes.js

Selanjutnya buat file baru dengan nama routes.js pada folder resources/js kemudian ketikkan script berikut:

Simpan file routes.js

 

Vuex

Install dependencies untuk vuex menggunakan perintah berikut:

 

store.js

Selanjutnya buat file baru dengan nama store.js pada folder resources/js kemudian ketikkan script berikut:

Simpan file store.js

 

Components

AppComponent.vue

Buat file baru dengan nama AppComponent.vue pada folder resources/js/components kemudian ketikkan script berikut:

Simpan file AppComponent.vue

 

app.js

Buka file app.js pada folder resources/js kemudian edit menjadi seperti berikut:

Simpan file app.js

 

LoginComponent.vue

Buat file baru dengan nama LoginComponent.vue pada folder resources/js/components kemudian ketikkan script berikut:

Simpan file LoginComponent.vue

 

HomeComponent.vue

Buat file baru dengan nama HomeComponent.vue pada folder resources/js/components kemudian ketikkan script berikut:

Simpan file HomeComponent.vue

 

LogoutComponent.vue

Buat file baru dengan nama LogoutComponent.vue pada folder resources/js/components kemudian ketikkan script berikut:

Simpan file LogoutComponent.vue

 

Testing Login System Dengan JSON Web Token Laravel 7 Dan Vue

Dari command prompt ketikkan perintah berikut:

Kemudian jalankan Laravel 7 menggunakan perintah berikut:

Selanjutnya buka browser dan ketikkan URL http://localhost:8000

Gbr1 Login System Dengan JSON Web Token Laravel 7 Dan Vue - 02 Front End - Login Page
Gbr1 Login System Dengan JSON Web Token Laravel 7 Dan Vue – 02 Front End – Login Page

Selanjutnya silahkan coba login menggunakan data user yang sudah dibuat sebelumnya pada sesi Back End.

Jika berhasil login maka kita akan diarahkan ke Page Home.

Gbr2 Login System Dengan JSON Web Token Laravel 7 Dan Vue - 02 Front End - Home Page
Gbr2 Login System Dengan JSON Web Token Laravel 7 Dan Vue – 02 Front End – Home Page

Sampai disini kita sudah berhasil membuat Login System Dengan JSON Web Token Laravel 7 Dan Vue untuk bagian Front End.

Pada kesempatan lain akan kita bahas Laravel 7 dan Vue lebih jauh lagi.

Semoga bermanfaat.

Source Code bisa anda download disini:

Dewaweb Gives Your Website Only the Best!

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *