Laravel adalah salah satu framework PHP yang paling populer, menawarkan berbagai fitur canggih untuk membangun aplikasi yang efisien.
Salah satu tantangan pengembangan web adalah memastikan pengalaman pengguna tetap responsif tanpa reload halaman. Di sinilah Ajax menjadi solusi ideal.
Dengan Ajax, operasi CRUD (Create, Read, Update, Delete) dapat dilakukan lebih cepat dan interaktif, sehingga pengalaman pengguna meningkat.
Artikel ini membahas tutorial lengkap mengimplementasikan CRUD menggunakan Ajax di Laravel 10.
Apa Itu Laravel?
Laravel adalah framework PHP yang dirancang untuk mempermudah pengembangan aplikasi web dengan pendekatan yang elegan dan kaya fitur.
Framework ini dikenal karena kemampuannya untuk menangani tugas-tugas kompleks, seperti routing, manajemen database, dan autentikasi, dengan cara yang sederhana dan terstruktur.
Salah satu alasan utama Laravel menjadi favorit adalah keberadaan fitur seperti ORM Eloquent yang memungkinkan interaksi dengan database menjadi lebih mudah dan intuitif.
Selain itu, Laravel menyediakan sistem migrasi yang memungkinkan pengembang melacak perubahan pada struktur database, serta mekanisme routing yang fleksibel untuk mengelola URL aplikasi.
Baca Juga: Laravel Adalah: Pengertian, Tools Andalan & Kelebihannya
Persiapan Awal: Install Laravel
Sebelum menginstal Laravel 10, pastikan bahwa lingkungan pengembangan Anda sudah memenuhi prasyarat berikut:
- PHP: Versi 8.1 atau lebih baru.
- Composer: Alat manajemen dependensi PHP.
- Database: MySQL, PostgreSQL, atau database lainnya yang didukung Laravel.
Untuk menginstal Laravel, Anda bisa menggunakan Composer dengan perintah berikut:
composer create-project –prefer-dist laravel/laravel nama-proyek “^10.0”
Setelah proses instalasi selesai, buka terminal dan jalankan server pengembangan lokal dengan perintah:
php artisan serve
Langkah ini akan membuka aplikasi Laravel Anda di browser melalui URL default.
Baca Juga: Cara Install Laravel Di Windows
Memahami CRUD dalam Laravel (200-250 kata)
CRUD adalah singkatan dari Create, Read, Update, dan Delete, yang merupakan operasi dasar untuk mengelola data dalam aplikasi web.
Laravel menyediakan berbagai alat untuk mempermudah implementasi CRUD, termasuk ORM Eloquent untuk berinteraksi dengan database.
Dengan Eloquent, Anda dapat dengan mudah membuat, membaca, memperbarui, dan menghapus data tanpa harus menulis query SQL secara manual.
Sebagai contoh, berikut adalah operasi CRUD sederhana menggunakan Eloquent:
- Create: $user = User::create([‘name’ => ‘John Doe’]);
- Read: $user = User::find(1);
- Update: $user->update([‘name’ => ‘Jane Doe’]);
- Delete: $user->delete();
Dengan menggabungkan CRUD dan Ajax, Anda dapat menciptakan aplikasi yang lebih responsif dan interaktif.
Baca Juga: CRUD Operation Pada Laravel
Membuat Tabel dan Migration
Migrasi di Laravel adalah cara yang efisien untuk membuat dan mengelola tabel di database. Untuk memulai, buat file migrasi menggunakan perintah:
php artisan make:migration create_nama_tabel –create=nama_tabel
Dalam file migrasi, Anda dapat mendefinisikan struktur tabel, seperti berikut:
Schema::create(‘nama_tabel’, function (Blueprint $table) {
$table->id();
$table->string(‘kolom_nama’);
$table->timestamps();
});
Tambahkan nilai kolom yang sesuai dengan kebutuhan Anda di method public function up. Setelah selesai, jalankan perintah berikut untuk mengeksekusi migrasi:
php artisan migrate
Langkah ini akan membuat tabel di database Anda sesuai dengan definisi pada file migrasi.
Membuat Route untuk CRUD Ajax
Rute di Laravel digunakan untuk menghubungkan permintaan dari browser ke controller. Untuk mendefinisikan rute CRUD dengan Ajax, tambahkan kode berikut pada file routes/web.php:
Route::get(‘/data’, [DataController::class, ‘index’]);
Route::post(‘/data’, [DataController::class, ‘store’]);
Route::put(‘/data/{id}’, [DataController::class, ‘update’]);
Route::delete(‘/data/{id}’, [DataController::class, ‘destroy’]);
Rute ini akan menangani permintaan Create, Read, Update, dan Delete yang dikirim melalui Ajax. Jangan lupa untuk menambahkan namespace di bagian atas file Anda jika menggunakan controller yang dilindungi oleh namespace tertentu.
Menggunakan Ajax di Laravel
Ajax memungkinkan Anda mengirimkan data ke server tanpa perlu reload halaman. Berikut adalah contoh bagaimana Anda dapat menggunakan Ajax untuk operasi CRUD di Laravel:
- Create Data:
$.ajax({
url: ‘/data’,
type: ‘POST’,
data: {
name: ‘John Doe’,
_token: ‘{{ csrf_token() }}’
},
success: function(response) {
console.log(‘Data created:’, response);
},
error: function() {
console.log(‘Request failed’);
}
});
- Read Data:
$.ajax({
url: ‘/data’,
type: ‘GET’,
success: function(data) {
data.forEach(function(item) {
console.log(`ID: ${item.id}, Name: ${item.name}`);
});
},
error: function() {
console.log(‘Request failed’);
}
});
Tambahkan button untuk memicu event pada fungsi Ajax di frontend.
Menangani Data dengan Controller
Controller bertanggung jawab untuk menangani request Ajax dan mengembalikan data ke frontend. Contoh implementasi CRUD di controller adalah sebagai berikut:
- Create Data:
public function store(Request $request) {
$data = DataModel::create($request->all());
return response()->json($data);
}
Tambahkan properti $fillable di model Anda untuk melindungi data yang dapat diisi:
protected $fillable = [‘name’, ’email’];
- Read Data:
public function index() {
$data = DataModel::all();
return response()->json($data);
}
Implementasi Fitur CRUD di Frontend
Gunakan Blade template untuk membuat tampilan tabel di frontend. Kombinasikan dengan jQuery untuk mengirim request Ajax dan menampilkan data di tabel secara real-time.
- Contoh Tabel:
<table id=”dataTable”>
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Aksi</th>
</tr>
</thead>
<tbody></tbody>
</table>
Tambahkan style menggunakan Bootstrap untuk membuat tabel lebih menarik dan responsif.
- Menggunakan jQuery:
$.ajax({
url: ‘/data’,
type: ‘GET’,
success: function(data) {
data.forEach(function(item) {
$(‘#dataTable tbody’).append(`<tr><td>${item.id}</td><td>${item.name}</td></tr>`);
});
}
});
Menguji Aplikasi CRUD Ajax
Uji aplikasi Anda dengan memastikan semua operasi CRUD bekerja dengan baik. Gunakan alat seperti postman untuk menguji endpoint API dan cek log di terminal untuk memastikan tidak ada error selama proses berjalan.
Laravel CRUD AJax untuk Meningkatkan User Experience pada Aplikasi Laravel
Menggunakan CRUD Ajax di Laravel 10 tidak hanya membuat aplikasi Anda lebih interaktif, tetapi juga meningkatkan efisiensi pengelolaan data secara real-time.
Dengan pengalaman pengguna yang lebih baik, Anda dapat membangun aplikasi web yang modern dan handal.
Tertarik untuk mendalami pengembangan aplikasi dengan Laravel? Ikuti kursus web developer dari Course Net untuk meningkatkan kemampuan Anda.
Yuk, bergabung dengan Course Net dan mulai perjalanan Anda sebagai pengembang web profesional!
