Membuat Aplikasi CRUD Ajax di CodeIgniter: Panduan Lengkap untuk Developer Modern

CREATE DATABASE crud_ajax_ci;
USE crud_ajax_ci;

CREATE TABLE employees (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    phone VARCHAR(15),
    position VARCHAR(50),
    salary DECIMAL(10,2),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

<?php
namespace App\Models;
use CodeIgniter\Model;

class EmployeeModel extends Model
{
    protected $table = 'employees';
    protected $primaryKey = 'id';
    protected $allowedFields = ['name', 'email', 'phone', 'position', 'salary'];
    protected $useTimestamps = true;
    protected $createdField = 'created_at';
    protected $updatedField = 'updated_at';
    
    // Validation rules
    protected $validationRules = [
        'name' => 'required|min_length[3]|max_length[100]',
        'email' => 'required|valid_email|is_unique[employees.email,id,{id}]',
        'phone' => 'permit_empty|min_length[10]|max_length[15]',
        'position' => 'required|max_length[50]',
        'salary' => 'permit_empty|decimal'
    ];
}

<?php
namespace App\Controllers;
use App\Models\EmployeeModel;

class Employee extends BaseController
{
    protected $employeeModel;
    
    public function __construct()
    {
        $this->employeeModel = new EmployeeModel();
    }
    
    public function index()
    {
        return view('employee/index');
    }
    
    // Get all employees (READ)
    public function getEmployees()
    {
        $employees = $this->employeeModel->findAll();
        return $this->response->setJSON([
            'status' => 'success',
            'data' => $employees
        ]);
    }
    
    // Create new employee
    public function store()
    {
        $data = [
            'name' => $this->request->getPost('name'),
            'email' => $this->request->getPost('email'),
            'phone' => $this->request->getPost('phone'),
            'position' => $this->request->getPost('position'),
            'salary' => $this->request->getPost('salary')
        ];
        
        if ($this->employeeModel->insert($data)) {
            return $this->response->setJSON([
                'status' => 'success',
                'message' => 'Employee created successfully'
            ]);
        } else {
            return $this->response->setJSON([
                'status' => 'error',
                'message' => 'Failed to create employee',
                'errors' => $this->employeeModel->errors()
            ]);
        }
    }
}

<div class="container mt-5">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <h5>Employee Management</h5>
                    <button class="btn btn-primary" id="addEmployeeBtn">
                        <i class="fas fa-plus"></i> Add Employee
                    </button>
                </div>
                <div class="card-body">
                    <table class="table table-striped" id="employeeTable">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Position</th>
                                <th>Salary</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

$(document).ready(function() {
    // Load employees on page load
    loadEmployees();
    
    // Load employees function
    function loadEmployees() {
        $.ajax({
            url: '<?= base_url('employee/getEmployees') ?>',
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                if (response.status === 'success') {
                    let tbody = '';
                    response.data.forEach(function(employee) {
                        tbody += `
                            <tr>
                                <td>${employee.name}</td>
                                <td>${employee.email}</td>
                                <td>${employee.position}</td>
                                <td>$${employee.salary}</td>
                                <td>
                                    <button class="btn btn-sm btn-warning edit-btn" 
                                            data-id="${employee.id}">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-sm btn-danger delete-btn" 
                                            data-id="${employee.id}">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        `;
                    });
                    $('#employeeTable tbody').html(tbody);
                }
            },
            error: function() {
                Swal.fire('Error!', 'Failed to load employees', 'error');
            }
        });
    }
});