Malay

Tutorial Laravel

Laravel - Ajax: A Panduan Pemula

Hai saudara, para pengembang Laravel masa depan! Saya sangat gembira untuk membawa Anda ke dalam dunia yang menakjubkan Laravel dan Ajax. Sebagai seseorang yang telah mengajar ilmu komputer selama tahun-tahun, saya dapat mengatakan bahwa memahami topik ini akan membuka sebuah realm baru dari kemungkinan dalam karier pengembangan web Anda. Jadi, mari kita mulai!

Laravel - Ajax

Apa Itu Ajax?

Sebelum kita masuk ke spesifikasi Laravel, mari kita pahami apa itu Ajax. Ajax adalah singkatan dari Asynchronous JavaScript dan XML. Jangan khawatir jika itu terdengar seperti suatu jenis produk pembersih - ingat saat pertama kali saya mendengar itu, saya pikir itu adalah jenis produk pembersih!

Dalam kata-kata sederhana, Ajax memungkinkan halaman web untuk memperbarui konten secara dinamis tanpa memuat ulang seluruh halaman. Itu seperti magi - tapi lebih baik, karena Anda akan segera tahu bagaimana cara kerjanya!

Mengapa Menggunakan Ajax di Laravel?

Laravel, kerangka kerja PHP yang kita pilih, bermain sangat baik dengan Ajax. Itu memungkinkan kita untuk menciptakan aplikasi web yang halus dan responsif yang terasa seperti aplikasi destop. Bayangkan mengklik tombol dan melihat hasil instan tanpa adanya refresh halaman yang mengganggu. Itu kekuatan Ajax di Laravel!

Menyiapkan Laravel untuk Ajax

Pertama-tama, mari memastikan proyek Laravel kita siap untuk melakukan aksi Ajax.

  1. Buat proyek Laravel baru (jika Anda belum melakukan itu):
composer create-project --prefer-dist laravel/laravel ajax-tutorial
  1. Navigasikan ke direktori proyek Anda:
cd ajax-tutorial
  1. Pastikan Anda memiliki database yang sudah disiapkan dan dikonfigurasi di file .env.

Fungsi json(): Teman Baru Anda

Sekarang, mari kita bicarakan bintang pertunjukan kita: fungsi json(). Kecil gemar ini adalah apa yang membuat Ajax di Laravel begitu halus dan mudah.

Sintaks Fungsi json()

Ini adalah sintaks dasar:

return response()->json($data, $status_code);

mari kitauraikan ini:

  • $data: Ini adalah data yang Anda ingin kirim kembali ke klien. Itu bisa menjadi array, objek, atau bahkan koleksi Laravel.
  • $status_code: Ini opsional. Itu adalah kode status HTTP yang Anda ingin kirimkan dengan tanggapan (misalnya, 200 untuk sukses, 404 untuk tidak ditemukan).

Menggunakan json() di Kerja

Mari kita buat contoh sederhana untuk melihat json() dalam aksi. Kita akan membuat rute yang mengembalikan tanggapan JSON.

  1. Buka file routes/web.php dan tambahkan rute ini:
Route::get('/greeting', function () {
$data = ['message' => 'Hello, Ajax!'];
return response()->json($data);
});
  1. Sekarang, jika Anda mengunjungi /greeting di browser Anda, Anda akan melihat tanggapan JSON:
{"message":"Hello, Ajax!"}

Menarik, kan? Tetapi tunggu, masih ada lagi!

Contoh Dunia Nyata: Pencarian User Dinamis

Mari kita buat sesuatu yang lebih praktis - fitur pencarian user yang memperbarui hasil secara dinamis saat Anda mengetik. Ini adalah tempat Ajax benar-benar berkilau!

Langkah 1: Buat Rute

Dalam routes/web.php, tambahkan:

Route::get('/search', 'UserController@search');

Langkah 2: Buat Controller

Jalankan perintah ini untuk membuat controller baru:

php artisan make:controller UserController

Sekarang, buka app/Http/Controllers/UserController.php dan tambahkan metode ini:

public function search(Request $request)
{
$query = $request->get('query');
$users = User::where('name', 'LIKE', "%{$query}%")->get();
return response()->json($users);
}

Langkah 3: Buat View

Buat file baru resources/views/search.blade.php:

<!DOCTYPE html>
<html>
<head>
<title>Pencarian User</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="search" placeholder="Cari user...">
<div id="results"></div>

<script>
$(document).ready(function() {
$('#search').on('keyup', function() {
var query = $(this).val();
$.ajax({
url: '/search',
type: 'GET',
data: {'query': query},
success: function(data) {
var results = '';
$.each(data, function(key, value) {
results += '<p>' + value.name + '</p>';
});
$('#results').html(results);
}
});
});
});
</script>
</body>
</html>

Langkah 4: Perbarui Rute

Dalam routes/web.php, tambahkan:

Route::get('/', function () {
return view('search');
});

Sekarang, ketika Anda mengunjungi halaman utama dan mulai mengetik di kotak pencarian, Anda akan melihat hasil user muncul secara dinamis!

Metode Ajax Umum di Laravel

Berikut adalah tabel metode Ajax umum yang Anda mungkin gunakan di Laravel:

Metode Deskripsi Contoh
GET Mengambil data $.get('/users', function(data) { ... });
POST Mengirim data untuk membuat $.post('/users', {name: 'John'}, function(data) { ... });
PUT Memperbarui data yang ada $.ajax({url: '/users/1', type: 'PUT', data: {name: 'John'}, success: function(data) { ... }});
DELETE Menghapus data $.ajax({url: '/users/1', type: 'DELETE', success: function(data) { ... }});

Kesimpulan

Selamat! Anda baru saja mengambil langkah pertama ke dalam dunia Ajax dengan Laravel. Ingat, seperti belajar keterampilan baru, mungkin terasa membingungkan pada awalnya. Tetapi percayalah kepada saya, dengan latihan, Anda akan segera menciptakan aplikasi web yang dinamis dan responsif.

Saat kita mengakhiri, saya teringat tentang seorang murid yang pernah mengatakan kepada saya bahwa belajar Ajax merasa seperti memberikan superpower kepada website-nya. Dan Anda tahu apa? Dia benar! Jadi, teruskan eksperimen, dan jangan takut untuk membuat kesalahan. Itu adalah bagaimana kita semua belajar dan tumbuh.

Selamat coding, dan may your Ajax requests always return 200 OK!

Credits: Image by storyset

Tutorial Sebelumnya:
Laravel - Menghantar E-mel
Tutorial Seterusnya:
Laravel - Penanganan Kesilapan