Code, Create, Innovate: Welcome to Programmer World Code, Create, Innovate: Welcome to Programmer World
Membuat Inputan dan Load Data dengan AJAX di Laravel
AJAX memungkinkan pengiriman data ke server tanpa memuat ulang halaman. Artikel ini menjelaskan cara membuat inputan dan memuat data secara dinamis dengan AJAX di Laravel.
1. Persiapan Proyek Laravel
Buat proyek Laravel baru jika belum memiliki proyek yang ada:
composer create-project laravel/laravel ajax-laravelPastikan Anda menjalankan migrasi database dan konfigurasi database di file .env.
2. Membuat Tabel dan Model
Buat migrasi tabel untuk menyimpan data:
php artisan make:migration create_items_table --create=itemsEdit file migrasi di database/migrations/:
Schema::create('items', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});Jalankan migrasi:
php artisan migrateBuat model di app/Models/Item.php:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Item extends Model {
protected $fillable = ['name'];
}
?>3. Membuat Controller
Buat controller untuk menangani request AJAX:
php artisan make:controller ItemControllerEdit file app/Http/Controllers/ItemController.php:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Item;
class ItemController extends Controller {
public function store(Request $request) {
$item = Item::create($request->all());
return response()->json($item);
}
public function index() {
$items = Item::all();
return response()->json($items);
}
}
?>4. Menambahkan Rute
Tambahkan rute API di file routes/web.php:
use App\Http\Controllers\ItemController;
Route::get('/items', [ItemController::class, 'index']);
Route::post('/items', [ItemController::class, 'store']);5. Membuat Halaman HTML dengan AJAX
Buat file resources/views/items.blade.php:
<!DOCTYPE html>
<html>
<head>
<title>AJAX Laravel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h2>Input Item</h2>
<form id="itemForm">
<div class="mb-3">
<input type="text" id="name" name="name" class="form-control" placeholder="Masukkan nama item" required>
</div>
<button type="submit" class="btn btn-primary">Simpan</button>
</form>
<h3 class="mt-5">Data Items</h3>
<ul id="itemList" class="list-group"></ul>
</div>
<script>
$(document).ready(function() {
loadItems();
$('#itemForm').submit(function(e) {
e.preventDefault();
$.ajax({
url: '/items',
method: 'POST',
data: {
name: $('#name').val(),
_token: '{{ csrf_token() }}'
},
success: function(response) {
$('#itemList').append('<li class="list-group-item">' + response.name + '</li>');
$('#name').val('');
}
});
});
function loadItems() {
$.ajax({
url: '/items',
method: 'GET',
success: function(response) {
response.forEach(function(item) {
$('#itemList').append('<li class="list-group-item">' + item.name + '</li>');
});
}
});
}
});
</script>
</body>
</html>6. Pengujian
Buka aplikasi Anda di browser dan uji input data serta pemuatan data menggunakan AJAX.
Kesimpulan
Dengan menggunakan AJAX, Laravel dapat memproses data tanpa memuat ulang halaman, memberikan pengalaman pengguna yang lebih baik.
