Tutorial Ajax C.R.U.D Laravel 9 (Bahasa indonesia)

For articles in English

Pada kesempatan kali ini saya ingin membagikan Tutorial C.R.U.D laravel 9 dengan menggunakan Ajax. Serta disini kita akan mengimplementasikan upload gambar menggunakan Ajax dan penggunaan plugin jquery Datatable.

Apa itu Ajax ? Menurut Wikipedia Ajax yang merupakan kepanjangan dari Asynchronus Javascript and XMLHTTP adalah “ suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web yang interaktif dengan tujuan untuk meningkatkan interaktivitas, kecepatan, dan kegunaan, sehingga halaman web tidak harus di render ulang secara keseluruhan ketika user melakukan suatu perubahan ”.

Langkah pertama kita akan membuat layout baru sebagai main template dari aplikasi C.R.U.D yang akan dibuat. Disini kita akan menggunakan bootstrap

Buat file main.blade.php pada folder layouts dan tambahkan kode seperti berikut :

main.blade.php

Di folder view tambahkan folder crud serta tambahkan juga didalamnya dua file blade index.blade.php dan action.blade.php. Kemudian tambahkan kode berikut :

File index.blade.php pada folder profile

File action.blade.php folder profile

Buat file model, migration dan controller dengan menjalankan command “php artisan make:model Profile -m”. Dan untuk controllernya “php artisan make:controller ProfileController”.

Pada model Profile tambahkan konfigurasi berikut :

model Profile.php

Dan untuk file migration profiles tambahkan beberapa field berikut :

File migration profiles

Kemudian konfigurasi .env yang ada lalu jalankan perintah “php artisan migrate”.

Tambahkan source code berikut pada file controller ProfileController.php untuk memuat data dengan plugin datatable dari tabel profiles.

ProfileController.php method getDataProfile dan index.

Sesuaikan index.blade.php pada folder profile seperti kode di bawah :

index.blade.php

Kemudian atur route pada file web.php yang ada di folder routes menjadi seperti di bawah ini :

File web.php pada folder routes

Selanjutnya kita akan membuat modal create dan edit beserta fungsinya dengan ajax. Tambahkan modal dengan id createModal untuk melakukan insert data seperti berikut :

index.blade.php

Lalu tambahkan modal dengan id editModal untuk melakukan edit data seperti di bawah ini :

index.blade.php

Sekarang file index.blade.php akan terlihat seperti di bawah ini :

Kode lengkap file index.blade.php

Sebelum menambahkan fungsi ajax kita akan menambahkan method store, edit, update dan destroy/delete pada file ProfileController.php.

Perhatikan beberapa kode di bawah ini :

ProfileController.php method store

ProfileController.php method edit

ProfileController.php method Update

ProfileController.php method destroy

Secara keseluruhan kode pada ProfileController.php akan terlihat seperti berikut :

ProfileController.php

Kembali ke file index.blade.php pada folder view/profile dan tambahkan beberapa fungsi ajax seperti kode berikut :

Ajax function CRUD index.blade.php

Maka secara keseluruhan kode dari index.blade.php akan terlihat seperti di bawah ini :

index.blade.php with ajax function CRUD

Terakhir atur route pada file web.php seperti berikut :

File web.php

Sekarang jalankan perintah artisan serve jika langkah di atas diikuti dengan benar maka tampilannya akan seperti di bawah ini :

Cukup untuk tutorial kali ini jika mengalamai kendala silahkan berkomentar di bawah atau hubungi saya via telegram https://t.me/eripratama

Tutorial Lainnya : https://samplekoding.com/

Demo Web : https://larajax.herokuapp.com/

File Project : https://github.com/eripratama1/ajax-laravel-crud-app