Implementasi Creat and Read with Laravel + React Js + MySql (Part 1)

Baiklah kali ini kita akan melakukan sesuatu yang sangat menantang. Mengimplementasikan Create dan Read data dari database dengan React Js. Tutorial ini dibagi menjadi dua part ya wan kawan ehe. Langsung saja tanpa basa basi.

Disini saya menggunakan laravel versi 6, React Js versi 5, dan php versi 7,2 :))

Step by Step

1. Install laravel
   Kalo kalian mengituki blog ini tentunya sudah tau cara instal laravel dan membuat projek laravelnya. Kalo lupa bisala tengok-tengok di link ini.
2. Membuat table baru pada database kalian.
   Setelah itu langsung saja ketik di cmd atau terminal kalian perintah berikut
   
   php artisan make:migration create_products_table
   
   Kemudian setelah tabelnya terbentuk, ketikan code berikut pada function up()
   
   
   
   
   

   Kemudian ketikan perintah berikut di cmd atau terminal untuk membuat modelnya.
   
   php artisan make:model Product
3. Membuat Controllernya, just type this perintah again ye guys php artisan make:controller Api\ProductController -resource Setelah itu ketikan kode berikut sesuai dengan gambar, index berfungsi untuk menampilkan data dan pada store berfungsi untuk mengirim data ke database MySQl
   

   
4. Selanjutnya kita akan install komponen yang diperlukan oleh React.Js dalam projek kita ini. Ketik saja perintah-perintah berikut ini dalam cmd atau terminal kalian.
   
   php artisn preset react
   
    npm install
   
   npm run dev
   
    npm install react-router-dom --save
   
   npm install axios
5. Selanjutnya kita akan membuat beberapa file dalam folder berikut sesuai dengan gambar ini
   

   
6. Ketikan code berikut pada file app.js
   resources/js/app.js
   

   
   
7. and next next
   resources/js/components/Index.js
   

   
   
8. resources/js/components/Home.js
   

   
9. resources/js/components/Header.js
   

   
10. resources/js/components/About.js
    

    
11. resources/js/components/categoory/Index.js
    

    
12. resources/js/components/categoory/Listing.js
    

    
    
13. resources/js/components/categoory/Add.js
    

    

    
14. Jika sudah, jalan kan perintah berikut "npm run dev"
    Kalian harus melakukan perintah tersebut setiap kali ada perubahan dalam file Js. Kalian juga bisa menggunakan perintah "npm run watch" sehingga setiap kalian menyimpan file, dia akan update secara otomatis tanpa harus menjalankan dev berkali kali
15. Baik selanjutnya membuat dua buah perintah route dalam file web.php
    

    
    
16. Sekarang kita edit file "welcome.blade.php" menjadi seperti di bawah ini
    
    
17. Setelah itu jalankan "php artisan serve" as usual
18. SELAMAT BELAJAR, semangat ngetiknya jangan sampai typo dan jangan lupa TITIK KOMA
    
    Tampilan kasarnya seperti ini guys

-

-

-

OK, terima kasih banyak. That's all for me see you in the second part guys. for the video you can watch these Chanel.  https://www.youtube.com/watch?v=XJ6E9-YdGJU&list=PLS28RXxLK_RRh5y0vwkL2CFVpyjwd_oyy

and my other resource is https://www.itsolutionstuff.com/post/laravel-5-simple-crud-application-using-reactjs-part-1example.html