Assalamualaikum semuanya, karena kemarin sudah ada tutorial untuk menampilkan dan menambah data, maka hari ini aku akan berbagi tutorial cara mengubah dan menghapus datanya nih gaes......
Oh iya, selain CRUD di laravel aku juga akan berbagi tutorial cara mengimplementasikan React pada halaman CRUDnya juga nih ikutin tutorialnya terus ya hehe :D
Oke aku akan lanjurin CRUD di laravelnya dulu ya, aku mulai dari mengubah datanya
1. Isi fungsi edit di dalam Controller, disini adalah proses untuk menuju ke halaman edit
2. Setelah itu kita mengisi fungsi update, didalam fungsi ini barulah diisi dengan proses editnya yaitu dengan mengambil data dari id yang telah dipilih dan menyimpan perubahan datanya, lalu kembali ke halaman lihat.
3. Sekarang proses menghapus datanya, dengan mengisi fungsi destroynya dengan memilih data sesuai id yang dipilih setelah itu menghapus datanya, lalu kembali ke halaman lihat.
4. Jika sudah kita buat routenya.
5. Setelah mengisi beberapa fungsi untuk mengubah dan menghapus di Controller, sekarang kita lanjut ke viewnya. di halaman data.blade.php kita tambahkan ini untuk tombol aksinya. Sehingga saat mengklik tombol ubah akan ke halaman ubah dan jika mengklik hapus maka akan menghapus sesuai id yang dipilih.
6. Saat mengklik tombol ubah maka kita akan menuju halaman ubah, oleh karena itu kita harus membuat view edit.blade.php, isinya hampir sama dengan view tambah.blade.php hanya saja disini kita bedanya sudah ada valuenya,valuenya yaitu data yang sudah dipilih sesuai id.
Jika sudah maka akan muncul seperti ini :
Menampilkan data
Mengedit data
Menghapus data
Alhamdulillah CRUDnya sudah berhasil nih gaes......
Sekarang mari kita coba React, sebelum kita melanjutkan ke implementasi react js pada halaman CRUD kalian dah tau belum apa itu react?
ReactJS adalah library javascript yang bisa memudahkan kamu membuat tampilan UI yang interaktif (satu data yang sama bisa saling berkomunikasi), dimana bagian bagiannya nanti akan dibentuk dalam komponen agar mudah dipakai berkali-kali. Tentu kamu ngga mau membuat struktur yang sama dipakai diberabagai bagian aplikasi kamu berulang kali.
Kelebihannya :
- Mudah dipahami
Gaya penulisan yang deklaratif membuat react js mudah dipahami dan membuat react mudah di prediksi jika ada kesalahan penulisan kode.
- JSX
JSX adalah sebuah extension javascript yang di gunakan react untuk menulis HTML di dalam Javascript. JSX bukanlah sintaks javascript, sehingga browser tidak bisa membaca sintaks ini, di butuh kan sebuah JSX compiler yang di gunakan untuk menterjemahkan JSX kedalam bahasa regular javascript agar bisa terbaca oleh browser. Saya sendiri menggunakan BABEL JS sebagai JSX compilernya.
- Modular
Untuk membuat aplikasi dengan skala besar, kita dapat menulis kode-kode dengan skala yang lebih kecil untuk di satukan menjadi aplikasi utuh, dan dapat di gunakan kembali (reusable).
- Scalable
React js dapat menangani dengan sangat baik sebuah program dengan skala yang besar yang dapat menampilkan perubahan data yang sangat kompleks.
- Flexibel
Dengan belajar 1 libary saja kita dapat membuat aplikasi Web, Moblie, maupun Desktop.
- Effisien dan Cepat
React JS menciptakan Virtual DOM untuk mempercepat urusan perubahan DOM. Semua operasi di kerjakan di dalam Virtual DOM, setelah operasi selesai React JS menulis perubahan tersebut di dalam DOM. Contoh kasusnya seperti ini: “Jika kita menulis dalam secarik kertas menggunakan spidol, apabila terjadi kesalahan penulisan kita harus menulis di kertas yang baru. Berbeda jika kita menggunakan pensil, cukup menghapus dan memperbaiki pada bagian yang salah ”.
- Mudah Debugging
Ketika kita mulai menggunakan React JS, jangan lupa menginstall extensi resmi React JS. Kita dapat dengan mudah menjelejah Virtual DOM pada aplikasi yang sudah kita buat, sehingga jika ada bug bisa cepat ditemukan.
- SEO Bagus
Salah satu masalah terbesar dari library Javascript pada umumnya adalah mereka sidak support search engine. Meskipun sudah banyak perbaikan, mesin pencari umumnya masih mengalami kesulitan. Namun tidak dengan React JS, kita dapat menjalankan React JS pada server dan Virtual DOM diberikan ke browser sebagai halaman web biasa, sehingga sangat support SEO.
Kekurangannya :
- Hanya View Layer
React js hanya sebuah pustaka View Layer, untuk membangun aplikasi besar kita harus menyusun sendiri kebutuhan aplikasi lainya seperti data layer, router, struktur aplikasi dan event system(kecuali event DOM).
- Dokumentasi tidak bagus
Beberapa sumber artikel yang saya baca mengatakan bahwa dokumentasi react js tidak bagus karena informasi yang di berikan tidak lengkap, meskipun seperti itu kita tetap bisa mempelajarinya kok, tentunya dengan semangat dan ketekunan.
- Dukungan browser
React js tidak mendukung browser versi lama, hanya browser versi baru. React js menghentikan dukungan pada browser Internet Explorer versi 8, sampai saat ini react yang bisa jalan di IE 8 adalah react versi v0.14. Versi terbaru dari react hanya mendukung Internet Explorer versi 9 keatas.
Nah setelah kalian tau apa itu React aku akan berbagi cara mengimplementasikan React pada halaman CRUD. Yuk ikutin tutorialnya :)
1. Install react di project laravel.
2. Lalu masukan commad sesuai yang diminta.
3. Tunggu sampai proses selesai.
4. Setelah selesai, akan muncul folder node_modules dan js di resources.
5. Ubah halaman welcome.blade.php untuk mengecek apakah react sudah berhasil terinstall atau belum.
6. Jika react sudah berhasil terinstall maka muncul seperti ini.
7. Selanjutnya install react-router.
8. Tunggu sampai proses install berhasil.
9. Jalankan npm run watch agar tercompile otomatis.
10. Ubah app.js menjadi seperti ini.
11. Buat js file bernama Index didalam components folder dan index sebagai root dari componentnya.
Cara menambah data pegawai :
12. Buat file tambah.
13. Setting route dan jangan lupa import.
14. Update versi router agar bisa menggunakan browserHistory.
15. Tunggu hingga selesai.
16. update component index.
17. Tambah beberapa kode di kelas Tambah, sampai dengan selesai.
18. Kode untuk handle submit.
19. Tambah beberapa kode di form nya.
20. Ubah fungsi store pada dataController.
21. Error karna CORS security, download cors package untuk menghilangkan.
22. Masukkan ini pada cmd.
23. Install cors.
24. Tambahkan di config app.
25. Tambahkan di kernel.
26. Publish dengan kode ini.
27. Tunggu hingga selesai.
28. Jangan lupa import.
Cara menampilkan data pegawai :
29. Buat file js untuk menampilkan data pegawai.
30. Selanjutnya buat file tablerow untuk menampilkan hasil.
31. Lalu tambahkan path untuk tampil data.
32. Ubah index pada Controller.
33. Tambah untuk tampilkan data pegawai pada navigasi di file index js.
Cara mengedit data pegawai :
34. Buat file baru bernama ubah.js
35. Buat fungsi untuk menghandle tiap input
36. Fungsi ketika submit
37. Kode form nya
38. Lanjutkan hingga selesai
39. Tambahkan kode di route untuk ubah data
40. Ubah tombol ubah menjadi seperti gambar
Cara menghapus data pegawai :
41. Pada gambar no.40 sudah ada juga kode untuk tombol hapus.
42. Tambahkan kode ini pada file TableRow,js dan jangan lupa import axiosnya.
Jika semua sudah maka akan muncul seperti ini :
referensi :
https://appdividend.com/2017/08/31/laravel-5-5-reactjs-tutorial/
37. Kode form nya
38. Lanjutkan hingga selesai
39. Tambahkan kode di route untuk ubah data
40. Ubah tombol ubah menjadi seperti gambar
Cara menghapus data pegawai :
41. Pada gambar no.40 sudah ada juga kode untuk tombol hapus.
42. Tambahkan kode ini pada file TableRow,js dan jangan lupa import axiosnya.
Jika semua sudah maka akan muncul seperti ini :
Halaman tampil data
Halaman tambah data
Data berhasil ditambah
Halaman mengubah data
Data berhasil diubah
Data berhasil dihapus
Alhamdulillah berhasil gaes.... Selamat mencoba :D
referensi :
https://appdividend.com/2017/08/31/laravel-5-5-reactjs-tutorial/
