CRUD Pagination Laravel 7 React JS

CRUD Pagination Laravel 7 React JS – Pada artikel kali ini kita akan mencoba membuat CRUD Pagination Laravel 7 dan React JS

 

Integrasi Laravel 7 React JS

Create Project

Direktori project akan saya letakkan didalam direktori sourcecode (Silahkan sesuaikan saja dengan direktori anda).

Buat project baru dengan nama lara7react-crud.

Dari command prompt ketikkan perintah berikut:

 

Install Dependency

Dari command prompt ketikkan perintah berikut:

 

Kemudian jalankan perintah berikut untuk mengunduh module-module yang akan kita gunakan:

 

Selanjutnya dari command prompt compile menggunakan perintah berikut:

 

Database

Buat database baru dengan nama lara7react_crud.

Dari command prompt ketikkan perintah berikut:

 

Configure Environment

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

Simpan file .env

 

Setting Route Web dan Api

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

Simpan file web.php

 

Buat Halaman View

app.blade.php

Buat file baru dengan nama app.blade.php pada folder resourses\views.
Kemudian ketikkan script berikut ini:

Simpan file app.blade.php

 

app.js

Buka file app.js pada folder resourses\js.
Kemudian edit menjadi berikut ini:

Simpan file app.js

 

Components

App.js

Buat file baru dengan nama App.js pada folder resourses\js\components.
Kemudian ketikkan script berikut ini:

Simpan file App.js

 

Header.js

Buat file baru dengan nama Header.js pada folder resourses\js\components.
Kemudian ketikkan script berikut ini:

Simpan file Header.js

 

Membuat CRUD Pagination Laravel 7 React JS

Model

Buat model baru dengan nama Pegawai.
Dari command prompt ketikkan perintah berikut:

 

Buka file 2020_XXXX_create_pegawais_table.php pada folder database/migrations kemudian edit menjadi seperti berikut:

Simpan file 2020_XXXX_create_pegawais_table.php

 

Selanjutnya dari command prompt ketikkan perintah berikut:

 

Kemudian buka file Pegawai.php pada folder app dan edit menjadi seperti berikut:

Simpan file Pegawai.php

 

Seeder

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:

 

Controller

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

 

Pegawai List

Controllers

Buka file PegawaiController.php pada folder app/Http/Controllers kemudian tambahkan use App\Agama dan App\Pegawai dan edit pada bagian function index() menjadi seperti berikut:

Simpan file PegawaiController.php

 

Routes

Buka file api.php pada folder routers kemudian tambahkan script berikut pada baris paling akhir:

Simpan file api.php

 

Components

PegawaiRow.js

Buat file baru dengan nama PegawaiRow.js pada folder resourses\js\components.
Kemudian ketikkan script berikut ini:

Simpan file PegawaiRow.js

 
PegawaiList.js

Buat file baru dengan nama PegawaiList.js pada folder resourses\js\components.
Kemudian ketikkan script berikut ini:

Simpan file PegawaiList.js

 
App.css

Disini kita akan membuat style untuk pagination.

Buat file baru dengan nama App.css pada folder resourses\js\components.
Kemudian ketikkan script berikut:

Simpan file App.css

 
App.js

Buka file App.js pada folder resourses\js\components.
Kemudian edit menjadi seperti berikut:

Simpan file App.js

 

Testing Pegawai List

Dari command prompt compile dengan menggunakan perintah berikut:

Kemudian jalankan Laravel 7 menggunakan perintah berikut:

 

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

Gbr1 CRUD Pagination Laravel 7 React JS - List Data Pegawai
Gbr1 CRUD Pagination Laravel 7 React JS – List Data Pegawai

 

Pegawai Create

Controllers

Buka file PegawaiController.php pada folder app/Http/Controllers kemudian edit function store() menjadi seperti berikut:

Simpan file PegawaiController.php

 

Routes

Buka file api.php pada folder routers kemudian tambahkan script berikut pada baris paling akhir:

Simpan file api.php

 

Components

PegawaiCreate.js

Buat file baru dengan nama PegawaiCreate.js pada folder resourses\js\components.
Kemudian ketikkan script berikut ini:

Simpan file PegawaiCreate.js

 
App.js

Buka file App.js pada folder resourses\js\components.
Kemudian import PegawaiCreate dan tambahkan route untuk PegawaiCreate menjadi seperti berikut:

Simpan file App.js

 

Testing Create Pegawai

Dari command prompt compile dengan menggunakan perintah berikut:

 

Kemudian jalankan Laravel 7 menggunakan perintah berikut:

 

Selanjutnya buka browser dan ketikkan URL http://localhost:8000/
Kemudian klik tombol Add Record untuk menambah data.

Gbr2 CRUD Pagination Laravel 7 React JS - Add Data Pegawai
Gbr2 CRUD Pagination Laravel 7 React JS – Add Data Pegawai

 

Pegawai View

Controllers

Buka file PegawaiController.php pada folder app/Http/Controllers kemudian edit function show() menjadi seperti berikut:

Simpan file PegawaiController.php

 

Routes

Buka file api.php pada folder routers kemudian tambahkan script berikut pada baris paling akhir:

Simpan file api.php

 

Components

PegawaiView.js

Buat file baru dengan nama PegawaiView.js pada folder resourses\js\components.
Kemudian ketikkan script berikut ini:

Simpan file PegawaiView.js

 
App.js

Buka file App.js pada folder resourses\js\components.
Kemudian import PegawaiView dan tambahkan route untuk PegawaiView menjadi seperti berikut:

Simpan file App.js

 

Testing View Pegawai

Dari command prompt compile dengan menggunakan perintah berikut:

 

Kemudian jalankan Laravel 7 menggunakan perintah berikut:

 

Selanjutnya buka browser dan ketikkan URL http://localhost:8000/
Kemudian pilih salah satu record dan klik tombol View untuk menampilkan data pegawai.

Gbr3 CRUD Pagination Laravel 7 React JS - View Pegawai
Gbr3 CRUD Pagination Laravel 7 React JS – View Pegawai

 

Pegawai Edit

Controllers

Buka file PegawaiController.php pada folder app/Http/Controllers kemudian edit function edit() dan function update() menjadi seperti berikut:

Simpan file PegawaiController.php

 

Routes

Buka file api.php pada folder routers kemudian tambahkan script berikut pada baris paling akhir:

Simpan file api.php

 

Components

PegawaiEdit.js

Buat file baru dengan nama PegawaiEdit.js pada folder resourses\js\components.
Kemudian ketikkan script berikut ini:

Simpan file PegawaiEdit.js

 
App.js

Buka file App.js pada folder resourses\js\components.
Kemudian import PegawaiEdit dan tambahkan route untuk PegawaiEdit menjadi seperti berikut:

Simpan file App.js

 

Testing Edit Pegawai

Dari command prompt compile dengan menggunakan perintah berikut:

 

Kemudian jalankan Laravel 7 menggunakan perintah berikut:

 

Selanjutnya buka browser dan ketikkan URL http://localhost:8000/
Pilih salah satu record, kemudian klik tombol Edit untuk mengubah data.

Gbr4 CRUD Pagination Laravel 7 React JS - Edit Pegawai
Gbr4 CRUD Pagination Laravel 7 React JS – Edit Pegawai

 

Pegawai Delete

Controllers

Buka file PegawaiController.php pada folder app/Http/Controllers kemudian edit function destroy() menjadi seperti berikut:

Simpan file PegawaiController.php

 

Routes

Buka file api.php pada folder routers kemudian tambahkan script berikut pada baris paling akhir:

Simpan file api.php

 

Components

PegawaiDelete.js

Buat file baru dengan nama PegawaiDelete.js pada folder resourses\js\components.
Kemudian ketikkan script berikut ini:

Simpan file PegawaiDelete.js

 
App.js

Buka file App.js pada folder resourses\js\components.
Kemudian import PegawaiDelete dan tambahkan route untuk PegawaiDelete menjadi seperti berikut:

Simpan file App.js

 

Testing Delete Pegawai

Dari command prompt compile dengan menggunakan perintah berikut:

 

Kemudian jalankan Laravel 7 menggunakan perintah berikut:

 

Selanjutnya buka browser dan ketikkan URL http://localhost:8000/
Pilih salah satu record, kemudian klik tombol Delete untuk menghapus data.

Gbr5 CRUD Pagination Laravel 7 React JS - Delete Pegawai
Gbr5 CRUD Pagination Laravel 7 React JS – Delete Pegawai

 

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