ReactJS pada CRUD di framework laravel
Halo teman-teman, Pada story sebelumnya, saya membuat Tampilan dan Create data dari tabel employees (hr.sql).
Kali
ini saya akan menjelaskan bagaimana cara untuk Mengupdate dan Menghapus
data serta implementasi ReactJs pada CRUD framework laravel dari tabel
employees (em.sql), yuk langsung saja kita coba.
Install Node Js
Untuk proses instalasi NodeJs kalian harus mendownloadnya terlebih dahulu pada situs resminya yaitu https://nodejs.org/en/download/. Lalu sesuaikan dengan sistem operasi anda.
Lalu,
Install ReactJs sesuai dengan perintah instalasinya seperti persetujuan
penginstalan, destinasi folder penginstalan, dan summary dari
penginstalannya
Test Instalasi NodeJs
untuk mengecek apakah instalasi nodejs berhasil atau tidak, kita perlu masuk Command Prompt/PowerShell lalu ketikkan
node -v
output
dari code tersebut adalah versi nodejs yang baru saja kita install.
Lalu sekarang kita coba tes instalasi npm nya dengan masukkan command
berikut
npm -v
Instalasi React
Ketikkan kode berikut untuk melakukan instalasi ReactJs pada folder yang telah dibuat
npm install -g create-react-app
Tunggu hingga terinstall sepenuhnya.
Pembuatan Update & Delete pada Laravel CRUD
Pada
post sebelumnya, saya telah membuat fitur Create dan Read data pada
tabel employees (hr.sql) sekarang, saya akan menjelaskan bagaimana kita
akan menjelaskan cara mengupdate data dengan cara mengeditnya dan delete
data pada project laravel kita.
Masukkan Script berikut untuk menambahkan tampilan update dan delete pada index.blade.php
Update data
lihat kembali baris edit pada index.blade.php
<a href=”/employees/edit/{{ $e->employee_id }}”>Edit</a>
jika link edit di klik maka otomatis akan menuju pada route /employees/edit/employee_id
lalu kita tambahkan method Edit pada EmployeeController
Pada method edit
ini kita mengambil data dari table employee berdasarkan id nya(line
79), dan langsung dimasukkan pada variabel employees lalu diarahkan ke
halaman edit.blade.php
Lalu
pada view edit, kita buat viewnya dengan form isian lengkap seperti
pada penginputan data baru Employee(create). hanya saja, pada edit ini
tidak akan menambah data baru dan hanya akan mengupdate data yang ada
dengan id yang telah dipilih
Berikut adalah script dari edit.blade.php
Kita akan memasukkan data yang baru pada employee_id dengan method Post pada tag form. kemudian pada update tersebut kita pakai method PUT.
Lalu pada EmployeeController tambahkan method update
Pada
fungsi find0rFail(line 95) akan dicari data dengan id yang sesuai
dengan id data yang di edit. Kemudian kita ubah data datanya dengan data
yang baru, lalu kita simpan dengan fungsi save()
Beginilah tampilan edit.blade.php-nya
Delete
Perhatikan baris delete pada index.blade.php
<a href=”/employees/hapus/{{ $e->employee_id }}”>Hapus</a>.
jika pada tampilan /employees tombol Delete di klik, maka kita akan di arahkan ke /employees/edit/employee_id dan juga mengirimkan data yang ingin dihapus.
Masuk ke EmployeeControllers, buat method
fungsi delete() adalah untuk menghapus data sesuai id yang dipilih dengan method destroy ini. Setelah berhasil dihapus, lalu sistem akan meredirect ke route /employees.
Seperti ini tampilan aplikasi kita setelah di beri Update & Delete
Setelah
itu, saya akan mengimplementasikan ReactJs pada project yang sudah di
kembangkan dengan Update&Delete. Caranya adalah berikut
Install React pada project anda
Pertama, kita masuk kedalam project kita, lalu buka terminal Command Prompt/PowerShell lalu ketikkan script ini
php artisan preset react
Setelah ada pesan ‘React scaffolding installed successfully.’, selanjutnya kita masukkan lagi perintah
npm install
perintah
tersebut adalah untuk menginstall component react pada project kita.
Setelah selesai, ketikkan perintah berikut pada terminal
npm run dev
Mencoba ReactJs pada Laravel
Pada project, script react ada pada /resources/js/components
Example.js
App.js
Ketikkan script berikut untuk menyambungkan ReactJs ke view yang kita inginkan di laravel pada tag body
<div class=”container”>
<div class=”content”>
<div id=”example” class=”title m-b-md”></div>
</div>
</div>
<script type=”text/javascript” src=”/js/app.js”></script>
Lalu ketikkan script berikut
npm run watch
Kegunaan dari npm run watch adalah untuk menyimpan hasil compile dari javascript yang telah kita perbarui/update.
Sekarang kita jalankan file example ini pada terminal cmd/PowerShell baru dan biarkan npm run watch hidup, agar kodingan javascript otomatis ter-save saat anda menekan ctrl+s.
php artisan serve
Localhost:8000
Mengimplementasikan ReactJs pada Project
Sekarang, kita buat tampilan baru yang akan diimplimentasikan pada project kita.
Pertama, buat file baru pada folder component dengan ekstensi .js. Disini, saya telah membuat file bernama Login.js.
Lalu, ketikkan script berikut
Login.js
perhatikan script berikut
<a href=”/employees” className=”btn btn-success btn-lg fixed bottom”>Masuk ke data</a>
Script tersebut gunanya untuk membuat link pada halaman /employees dengan button
Lalu, kita tambahkan komponen baru pada app.js
Untuk
merender elemen apa pun ke dalam browser DOM, kita perlu memiliki
sebuah container atau elemen DOM root, dan semua yang ada di dalamnya
akan dikelola oleh react DOM. Perubahan ini akan berada di dalam
welcome.blade.php yang terletak di resource /views.
Lalu, saya akan mengganti kodingan dalam welcome.blade.php dengan script seperti berikut
perhatikan script berikut
<div class=”container”>
<div class=”content”>
<div id=”login” class=”title m-b-md”></div>
</div>
</div>
<script type=”text/javascript” src=”/js/app.js”></script>
pada div id kita ganti dengan login karena kita memakai component Login.js bukan Example.js lagi
Jangan lupa pasang route welcome pada web.php
Setelah selesai kita masuk terminal cmd/PowerShell dan jalankan script php artisan serve
Ingat, kalian tidak perlu menjalankan npm run watch lagi, karena tadi npm run watch sudah dibiarkan dihidupkan
Lalu buka browser anda
Nah setelah itu kalian dapat mengklik button “masuk ke data” untuk masuk ke table employee
Baik, itulah tutorial bagaimana mengimplementasikan React Js pada CRUD Laravel, Terimakasih :D
Selamat mencoba..
Posting Komentar