Membuat Inputan dan Load Data dengan AJAX di CodeIgniter 4

Membuat Inputan dan Load Data dengan AJAX di CodeIgniter 4

CodeIgniter 4 adalah framework PHP ringan yang cocok untuk membangun aplikasi web modern. Dalam artikel ini, Anda akan mempelajari cara membuat inputan dan memuat data secara dinamis menggunakan AJAX dengan CodeIgniter 4.

1. Persiapan Proyek CodeIgniter

Pastikan Anda sudah memiliki proyek CodeIgniter 4. Jika belum, buat proyek baru dengan perintah:

composer create-project codeigniter4/appstarter ci4-ajax

Konfigurasikan database di file .env:

database.default.hostname = localhost
database.default.database = ci4db
database.default.username = root
database.default.password =
database.default.DBDriver = MySQLi

2. Membuat Tabel dan Model

Buat tabel untuk menyimpan data:

CREATE TABLE items (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL
);

Buat model di app/Models/ItemModel.php:

<?php
namespace App\Models;

use CodeIgniter\Model;

class ItemModel extends Model {
    protected $table = 'items';
    protected $primaryKey = 'id';
    protected $allowedFields = ['name'];
}
?>

3. Membuat Controller

Buat controller untuk menangani request AJAX:

php spark make:controller Item

Edit file app/Controllers/Item.php:

<?php
namespace App\Controllers;

use App\Models\ItemModel;
use CodeIgniter\HTTP\Response;

class Item extends BaseController {
    public function index() {
        $model = new ItemModel();
        return $this->response->setJSON($model->findAll());
    }

    public function store() {
        $model = new ItemModel();
        $data = $this->request->getPost();
        $model->insert($data);
        return $this->response->setJSON(['name' => $data['name']]);
    }
}
?>

4. Menambahkan Rute

Tambahkan rute di file app/Config/Routes.php:

$routes->get('/items', 'Item::index');
$routes->post('/items', 'Item::store');

5. Membuat Halaman HTML dengan AJAX

Buat file view di app/Views/items.php:

<!DOCTYPE html>
<html>
<head>
    <title>AJAX CodeIgniter 4</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()
                    },
                    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

CodeIgniter 4 mempermudah pengelolaan data menggunakan AJAX dengan struktur MVC yang rapi dan ringan. Dengan ini, Anda dapat membuat aplikasi web yang dinamis tanpa memuat ulang halaman.

Check Also

Migrasi Database dengan CodeIgniter 4

Migrasi Database dengan CodeIgniter 4 CodeIgniter 4 menyediakan fitur migrasi database untuk mengelola perubahan skema …

Verified by MonsterInsights