CRUD Pagination Laravel 7 Vue

CRUD Pagination Laravel 7 Vue – Pada artikel kali ini kita akan belajar membuat CRUD Pagination menggunakan Laravel 7 dan Vue.

 

CRUD Pagination Laravel 7 Vue

Create Project

Buat project baru dengan nama lara7vue-crud.
Dari command prompt ketikkan perintah berikut:

 

Install Depedensi

Masuk ke direktori project selanjutnya ketikkan perintah berikut:

 

Database

Masuk ke database consule dan kemudian buat database baru dengan nama lara7vue_crud:

 

Configuration

Buka file .env pada root project dan kemudian edit bagian DB menjadi seperti berikut:

Simpan file .env

 

Migration

Dari command prompt ketikkan perintah berikut:

 

Selanjutnya buka file 2020_XX_create_pegawai_table.php pada folder database/migrations dan kemudian edit menjadi seperti berikut:

Simpan file 2020_XX_create_pegawai_table.php

 

Selanjutnya jalankan proses migrate dengan mengetikkan perintah berikut:

 

Seeder

Selanjutnya kita akan membuat dummy data untuk tabel pegawai.
Dari command prompt ketikkan perintah berikut:

 

Selanjutnya buka file PegawaiTableSeeder.php pada folder database/seeds kemudian edit menjadi seperti berikut:

Simpan file PegawaiTableSeeder.php

 

Selanjutnya dari command prompt ketikkan perintah berikut:

 

Model

Buka file Pegawai.php pada folder app kemudian edit menjadi seperti berikut:

Simpan file Pegawai.php

 

Controllers

Buat controller baru dengan nama PegawaiController.
Dari command prompt ketikkan perintah berikut:

 

Selanjutnya buka file PegawaiController.php pada folder app/Http/Controllers kemudian edit menjadi seperti berikut:

Simpan file PegawaiController.php

 

Routes

web.php

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

Simpan file web.php

 

api.php

Buka file api.php pada folder routes dan tambahkan script berikut:

Simpan file api.php

 

app.blade.php

Buat file baru bernama app.blade.php pada folder resource/views dan kemudian ketikkan script berikut:

Simpan file app.blade.php

 

Resource

app.js

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

Simpan file app.js

 

Components

App.vue

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

Simpan file App.vue

 
Home.vue

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

Simpan file Home.vue

 
PegawaiList.vue

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

Simpan file PegawaiList.vue

 
PegawaiAdd.vue

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

Simpan file PegawaiAdd.vue

 
PegawaiView.vue

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

Simpan file PegawaiView.vue

 
PegawaiEdit.vue

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

Simpan file PegawaiEdit.vue

 

Testing CRUD Pagination Laravel 7 Vue

Compiling

Dari command prompt ketikkan perintah berikut:

 

Kemudian jalankan Laravel 7 menggunakan perintah berikut:

 

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

Gbr1 CRUD Pagination Laravel 7 Vue - List Pegawai
Gbr1 CRUD Pagination Laravel 7 Vue – List Pegawai

Sampai disini kita sudah berhasil membuat CRUD Pagination Laravel 7 Vue. Pada artikel selanjutnya kita akan 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 *