Membuat CRUD AJAX Join Table dengan Datatables di CodeIgniter 3

Membuat aplikasi CRUD (Create, Read, Update, Delete) dengan fitur join table, AJAX, dan Datatables di CodeIgniter 3 memang membutuhkan beberapa langkah. Berikut adalah panduan lengkapnya, termasuk struktur proyek dan contoh kodenya:

Konsep Utama

CodeIgniter 3 (CI3): Framework PHP yang ringan dan cepat.
AJAX (Asynchronous JavaScript and XML): Untuk pengiriman dan penerimaan data dari server tanpa me-reload halaman. Ini membuat aplikasi lebih responsif.
Datatables: Plugin jQuery yang powerful untuk menampilkan data tabular dengan fitur pencarian, sorting, dan pagination secara otomatis.
Join Table: Menggabungkan data dari dua tabel atau lebih berdasarkan kolom yang berhubungan (misalnya, foreign key).
Upload: Untuk mengunggah file (gambar, dokumen, dll.) ke server.

Struktur Proyek

Pastikan Anda memiliki instalasi CodeIgniter 3 yang berfungsi. Struktur folder utama akan terlihat seperti ini:

your_project/
├── application/
│   ├── config/
│   ├── controllers/
│   │   └── Produk.php
│   ├── models/
│   │   └── Produk_model.php
│   ├── views/
│   │   ├── produk/
│   │   │   └── index.php
│   │   │   └── form.php (untuk tambah/edit)
│   ├── third_party/ (opsional, untuk Datatables server-side)
│   └── ...
├── assets/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── produk.js
│   ├── img/
│   └── ...
├── system/
└── index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
your_project/
├── application/
│   ├── config/
│   ├── controllers/
│   │   └── Produk.php
│   ├── models/
│   │   └── Produk_model.php
│   ├── views/
│   │   ├── produk/
│   │   │   └── index.php
│   │   │   └── form.php (untuk tambah/edit)
│   ├── third_party/ (opsional, untuk Datatables server-side)
│   └── ...
├── assets/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── produk.js
│   ├── img/
│   └── ...
├── system/
└── index.php
 

Persiapan Database

Misalkan kita ingin menampilkan daftar produk dan kategori produk. Kita membutuhkan dua tabel: produk dan kategori.

Tabel: kategori

SQL

CREATE TABLE `kategori` (
    `id_kategori` INT(11) NOT NULL AUTO_INCREMENT,
    `nama_kategori` VARCHAR(100) NOT NULL,
    PRIMARY KEY (`id_kategori`)
);

CREATE TABLE `kategori` (

`id_kategori` INT(11) NOT NULL AUTO_INCREMENT,

`nama_kategori` VARCHAR(100) NOT NULL,

PRIMARY KEY (`id_kategori`)

);

Tabel: produk

SQL

CREATE TABLE `produk` (
    `id_produk` INT(11) NOT NULL AUTO_INCREMENT,
    `nama_produk` VARCHAR(255) NOT NULL,
    `harga` DECIMAL(10, 2) NOT NULL,
    `id_kategori` INT(11) NOT NULL,
    `gambar` VARCHAR(255) DEFAULT NULL,
    PRIMARY KEY (`id_produk`),
    FOREIGN KEY (`id_kategori`) REFERENCES `kategori`(`id_kategori`) ON DELETE CASCADE
);

CREATE TABLE `produk` (

`id_produk` INT(11) NOT NULL AUTO_INCREMENT,

`nama_produk` VARCHAR(255) NOT NULL,

`harga` DECIMAL(10, 2) NOT NULL,

`id_kategori` INT(11) NOT NULL,

`gambar` VARCHAR(255) DEFAULT NULL,

PRIMARY KEY (`id_produk`),

FOREIGN KEY (`id_kategori`) REFERENCES `kategori`(`id_kategori`) ON DELETE CASCADE

);

Isi beberapa data dummy ke kedua tabel untuk pengujian.

Langkah-langkah Implementasi

1. Konfigurasi CodeIgniter

application/config/database.php: Sesuaikan konfigurasi database Anda.
application/config/autoload.php: Load library yang dibutuhkan.
PHP
$autoload['libraries'] = array('database', 'form_validation', 'session', 'upload'); $autoload['helper'] = array('url', 'form', 'file');
1
2
$autoload['libraries'] = array('database', 'form_validation', 'session', 'upload');
$autoload['helper'] = array('url', 'form', 'file');

2. Model (`application/models/Produk_model.php`)

Model ini akan menangani interaksi dengan database, termasuk join table dan operasi CRUD.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Produk_model extends CI_Model {

    public function __construct() {
        parent::__construct();
        $this->load->database();
    }

    // Ambil semua produk dengan join kategori untuk Datatables
    public function get_all_produk_datatables() {
        $this->db->select('p.*, k.nama_kategori');
        $this->db->from('produk p');
        $this->db->join('kategori k', 'k.id_kategori = p.id_kategori', 'left');

        // Untuk Server-side processing Datatables
        if ($this->input->post('search')['value']) {
            $this->db->like('p.nama_produk', $this->input->post('search')['value']);
            $this->db->or_like('k.nama_kategori', $this->input->post('search')['value']);
            // Tambahkan kolom lain jika ingin bisa dicari
        }

        if ($this->input->post('order')) {
            $this->db->order_by($this->input->post('columns')[$this->input->post('order')[0]['column']]['data'], $this->input->post('order')[0]['dir']);
        } else {
            $this->db->order_by('p.id_produk', 'DESC');
        }

        if ($this->input->post('length') != -1) {
            $this->db->limit($this->input->post('length'), $this->input->post('start'));
        }

        $query = $this->db->get();
        return $query->result();
    }

    // Hitung filtered data untuk Datatables
    public function count_filtered_produk() {
        $this->db->select('p.*, k.nama_kategori');
        $this->db->from('produk p');
        $this->db->join('kategori k', 'k.id_kategori = p.id_kategori', 'left');

        if ($this->input->post('search')['value']) {
            $this->db->like('p.nama_produk', $this->input->post('search')['value']);
            $this->db->or_like('k.nama_kategori', $this->input->post('search')['value']);
        }

        $query = $this->db->get();
        return $query->num_rows();
    }

    // Hitung semua data tanpa filter untuk Datatables
    public function count_all_produk() {
        $this->db->from('produk');
        return $this->db->count_all_results();
    }

    // Ambil produk berdasarkan ID
    public function get_produk_by_id($id) {
        $this->db->select('p.*, k.nama_kategori');
        $this->db->from('produk p');
        $this->db->join('kategori k', 'k.id_kategori = p.id_kategori', 'left');
        $this->db->where('p.id_produk', $id);
        return $this->db->get()->row();
    }

    // Ambil semua kategori
    public function get_all_kategori() {
        return $this->db->get('kategori')->result();
    }

    // Tambah produk baru
    public function insert_produk($data) {
        return $this->db->insert('produk', $data);
    }

    // Update produk
    public function update_produk($id, $data) {
        $this->db->where('id_produk', $id);
        return $this->db->update('produk', $data);
    }

    // Hapus produk
    public function delete_produk($id) {
        $this->db->where('id_produk', $id);
        return $this->db->delete('produk');
    }
}

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Produk_model extends CI_Model {

public function __construct() {

parent::__construct();

$this->load->database();

}

// Ambil semua produk dengan join kategori untuk Datatables

public function get_all_produk_datatables() {

$this->db->select('p.*, k.nama_kategori');

$this->db->from('produk p');

$this->db->join('kategori k', 'k.id_kategori = p.id_kategori', 'left');

// Untuk Server-side processing Datatables

if ($this->input->post('search')['value']) {

$this->db->like('p.nama_produk', $this->input->post('search')['value']);

$this->db->or_like('k.nama_kategori', $this->input->post('search')['value']);

// Tambahkan kolom lain jika ingin bisa dicari

}

if ($this->input->post('order')) {

$this->db->order_by($this->input->post('columns')[$this->input->post('order')[0]['column']]['data'], $this->input->post('order')[0]['dir']);

} else {

$this->db->order_by('p.id_produk', 'DESC');

}

if ($this->input->post('length') != -1) {

$this->db->limit($this->input->post('length'), $this->input->post('start'));

}

$query = $this->db->get();

return $query->result();

}

// Hitung filtered data untuk Datatables

public function count_filtered_produk() {

$this->db->select('p.*, k.nama_kategori');

$this->db->from('produk p');

$this->db->join('kategori k', 'k.id_kategori = p.id_kategori', 'left');

if ($this->input->post('search')['value']) {

$this->db->like('p.nama_produk', $this->input->post('search')['value']);

$this->db->or_like('k.nama_kategori', $this->input->post('search')['value']);

}

$query = $this->db->get();

return $query->num_rows();

}

// Hitung semua data tanpa filter untuk Datatables

public function count_all_produk() {

$this->db->from('produk');

return $this->db->count_all_results();

}

// Ambil produk berdasarkan ID

public function get_produk_by_id($id) {

$this->db->select('p.*, k.nama_kategori');

$this->db->from('produk p');

$this->db->join('kategori k', 'k.id_kategori = p.id_kategori', 'left');

$this->db->where('p.id_produk', $id);

return $this->db->get()->row();

}

// Ambil semua kategori

public function get_all_kategori() {

return $this->db->get('kategori')->result();

}

// Tambah produk baru

public function insert_produk($data) {

return $this->db->insert('produk', $data);

}

// Update produk

public function update_produk($id, $data) {

$this->db->where('id_produk', $id);

return $this->db->update('produk', $data);

}

// Hapus produk

public function delete_produk($id) {

$this->db->where('id_produk', $id);

return $this->db->delete('produk');

}

3. Controller (`application/controllers/Produk.php`)

Controller ini akan menangani logika bisnis, view, dan respons AJAX.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Produk extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->model('Produk_model');
        // Pastikan URL helper dimuat untuk base_url()
        $this->load->helper('url');
    }

    public function index() {
        $this->load->view('produk/index');
    }

    // Method untuk Datatables AJAX (Server-side processing)
    public function ajax_list() {
        $list = $this->Produk_model->get_all_produk_datatables();
        $data = array();
        $no = $_POST['start'];
        foreach ($list as $produk) {
            $no++;
            $row = array();
            $row[] = $no;
            $row[] = $produk->nama_produk;
            $row[] = $produk->nama_kategori;
            $row[] = 'Rp ' . number_format($produk->harga, 2, ',', '.');
            $row[] = $produk->gambar ? '<img src="' . base_url('assets/img/' . $produk->gambar) . '" class="img-thumbnail" width="50" />' : 'Tidak ada gambar';

            // Tombol aksi
            $row[] = '<a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Edit" onclick="edit_produk(' . "'" . $produk->id_produk . "'" . ')"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
                      <a class="btn btn-sm btn-danger" href="javascript:void(0)" title="Hapus" onclick="delete_produk(' . "'" . $produk->id_produk . "'" . ')"><i class="glyphicon glyphicon-trash"></i> Delete</a>';
            $data[] = $row;
        }

        $output = array(
            "draw" => $_POST['draw'],
            "recordsTotal" => $this->Produk_model->count_all_produk(),
            "recordsFiltered" => $this->Produk_model->count_filtered_produk(),
            "data" => $data,
        );
        echo json_encode($output);
    }

    // Ambil data produk untuk diedit
    public function ajax_edit($id) {
        $data = $this->Produk_model->get_produk_by_id($id);
        echo json_encode($data);
    }

    // Tambah produk baru
    public function ajax_add() {
        $this->_validate();

        $data = array(
            'nama_produk' => $this->input->post('nama_produk'),
            'harga'       => $this->input->post('harga'),
            'id_kategori' => $this->input->post('id_kategori'),
        );

        if(!empty($_FILES['gambar']['name'])) {
            $upload = $this->_do_upload();
            $data['gambar'] = $upload;
        }

        $insert = $this->Produk_model->insert_produk($data);
        echo json_encode(array("status" => TRUE));
    }

    // Update produk
    public function ajax_update() {
        $this->_validate();
        $id_produk = $this->input->post('id_produk');
        $data = array(
            'nama_produk' => $this->input->post('nama_produk'),
            'harga'       => $this->input->post('harga'),
            'id_kategori' => $this->input->post('id_kategori'),
        );

        if($this->input->post('remove_photo')) // cek jika ingin menghapus foto
		{
			if(file_exists('assets/img/'.$this->input->post('remove_photo')) && $this->input->post('remove_photo'))
				unlink('assets/img/'.$this->input->post('remove_photo'));
			$data['gambar'] = NULL;
		}

        if(!empty($_FILES['gambar']['name'])) {
            $upload = $this->_do_upload();

            // Hapus gambar lama jika ada
            $produk = $this->Produk_model->get_produk_by_id($id_produk);
            if(file_exists('assets/img/'.$produk->gambar) && $produk->gambar) {
                unlink('assets/img/'.$produk->gambar);
            }
            $data['gambar'] = $upload;
        }

        $this->Produk_model->update_produk($id_produk, $data);
        echo json_encode(array("status" => TRUE));
    }

    // Hapus produk
    public function ajax_delete($id) {
        // Hapus gambar dari server
        $produk = $this->Produk_model->get_produk_by_id($id);
        if(file_exists('assets/img/'.$produk->gambar) && $produk->gambar) {
            unlink('assets/img/'.$produk->gambar);
        }

        $this->Produk_model->delete_produk($id);
        echo json_encode(array("status" => TRUE));
    }

    // Proses upload gambar
    private function _do_upload() {
        $config['upload_path']   = './assets/img/';
        $config['allowed_types'] = 'gif|jpg|png|jpeg';
        $config['max_size']      = 2048; // 2MB
        $config['max_width']     = 1024;
        $config['max_height']    = 768;
        $config['file_name']     = round(microtime(true) * 1000); // Nama file unik

        $this->load->library('upload', $config);
        $this->upload->initialize($config); // Inisialisasi ulang jika perlu

        if(!$this->upload->do_upload('gambar')) {
            $data = array('error' => $this->upload->display_errors());
            echo json_encode($data);
            exit();
        }
        return $this->upload->data('file_name');
    }

    // Validasi input form
    private function _validate() {
        $data = array();
        $data['error_string'] = array();
        $data['inputerror'] = array();
        $data['status'] = TRUE;

        if ($this->input->post('nama_produk') == '') {
            $data['inputerror'][] = 'nama_produk';
            $data['error_string'][] = 'Nama Produk harus diisi';
            $data['status'] = FALSE;
        }

        if ($this->input->post('harga') == '') {
            $data['inputerror'][] = 'harga';
            $data['error_string'][] = 'Harga harus diisi';
            $data['status'] = FALSE;
        } elseif (!is_numeric($this->input->post('harga'))) {
            $data['inputerror'][] = 'harga';
            $data['error_string'][] = 'Harga harus angka';
            $data['status'] = FALSE;
        }

        if ($this->input->post('id_kategori') == '') {
            $data['inputerror'][] = 'id_kategori';
            $data['error_string'][] = 'Kategori harus dipilih';
            $data['status'] = FALSE;
        }

        if($data['status'] === FALSE) {
            echo json_encode($data);
            exit();
        }
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Produk extends CI_Controller {

public function __construct() {

parent::__construct();

$this->load->model('Produk_model');

// Pastikan URL helper dimuat untuk base_url()

$this->load->helper('url');

}

public function index() {

$this->load->view('produk/index');

}

// Method untuk Datatables AJAX (Server-side processing)

public function ajax_list() {

$list = $this->Produk_model->get_all_produk_datatables();

$data = array();

$no = $_POST['start'];

foreach ($list as $produk) {

$no++;

$row = array();

$row[] = $no;

$row[] = $produk->nama_produk;

$row[] = $produk->nama_kategori;

$row[] = 'Rp ' . number_format($produk->harga, 2, ',', '.');

$row[] = $produk->gambar ? '<img src="' . base_url('assets/img/' . $produk->gambar) . '" class="img-thumbnail" width="50" />' : 'Tidak ada gambar';

// Tombol aksi

$row[] = '<a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Edit" onclick="edit_produk(' . "'" . $produk->id_produk . "'" . ')"><i class="glyphicon glyphicon-pencil"></i> Edit</a>

<a class="btn btn-sm btn-danger" href="javascript:void(0)" title="Hapus" onclick="delete_produk(' . "'" . $produk->id_produk . "'" . ')"><i class="glyphicon glyphicon-trash"></i> Delete</a>';

$data[] = $row;

}

$output = array(

"draw" => $_POST['draw'],

"recordsTotal" => $this->Produk_model->count_all_produk(),

"recordsFiltered" => $this->Produk_model->count_filtered_produk(),

"data" => $data,

);

echo json_encode($output);

}

// Ambil data produk untuk diedit

public function ajax_edit($id) {

$data = $this->Produk_model->get_produk_by_id($id);

echo json_encode($data);

}

// Tambah produk baru

public function ajax_add() {

$this->_validate();

$data = array(

'nama_produk' => $this->input->post('nama_produk'),

'harga' => $this->input->post('harga'),

'id_kategori' => $this->input->post('id_kategori'),

);

if(!empty($_FILES['gambar']['name'])) {

$upload = $this->_do_upload();

$data['gambar'] = $upload;

}

$insert = $this->Produk_model->insert_produk($data);

echo json_encode(array("status" => TRUE));

}

// Update produk

public function ajax_update() {

$this->_validate();

$id_produk = $this->input->post('id_produk');

$data = array(

'nama_produk' => $this->input->post('nama_produk'),

'harga' => $this->input->post('harga'),

'id_kategori' => $this->input->post('id_kategori'),

);

if($this->input->post('remove_photo')) // cek jika ingin menghapus foto

{

if(file_exists('assets/img/'.$this->input->post('remove_photo')) && $this->input->post('remove_photo'))

unlink('assets/img/'.$this->input->post('remove_photo'));

$data['gambar'] = NULL;

}

if(!empty($_FILES['gambar']['name'])) {

$upload = $this->_do_upload();

// Hapus gambar lama jika ada

$produk = $this->Produk_model->get_produk_by_id($id_produk);

if(file_exists('assets/img/'.$produk->gambar) && $produk->gambar) {

unlink('assets/img/'.$produk->gambar);

}

$data['gambar'] = $upload;

}

$this->Produk_model->update_produk($id_produk, $data);

echo json_encode(array("status" => TRUE));

}

// Hapus produk

public function ajax_delete($id) {

// Hapus gambar dari server

$produk = $this->Produk_model->get_produk_by_id($id);

if(file_exists('assets/img/'.$produk->gambar) && $produk->gambar) {

unlink('assets/img/'.$produk->gambar);

}

$this->Produk_model->delete_produk($id);

echo json_encode(array("status" => TRUE));

}

// Proses upload gambar

private function _do_upload() {

$config['upload_path'] = './assets/img/';

$config['allowed_types'] = 'gif|jpg|png|jpeg';

$config['max_size'] = 2048; // 2MB

$config['max_width'] = 1024;

$config['max_height'] = 768;

$config['file_name'] = round(microtime(true) * 1000); // Nama file unik

$this->load->library('upload', $config);

$this->upload->initialize($config); // Inisialisasi ulang jika perlu

if(!$this->upload->do_upload('gambar')) {

$data = array('error' => $this->upload->display_errors());

echo json_encode($data);

exit();

}

return $this->upload->data('file_name');

}

// Validasi input form

private function _validate() {

$data = array();

$data['error_string'] = array();

$data['inputerror'] = array();

$data['status'] = TRUE;

if ($this->input->post('nama_produk') == '') {

$data['inputerror'][] = 'nama_produk';

$data['error_string'][] = 'Nama Produk harus diisi';

$data['status'] = FALSE;

}

if ($this->input->post('harga') == '') {

$data['inputerror'][] = 'harga';

$data['error_string'][] = 'Harga harus diisi';

$data['status'] = FALSE;

} elseif (!is_numeric($this->input->post('harga'))) {

$data['inputerror'][] = 'harga';

$data['error_string'][] = 'Harga harus angka';

$data['status'] = FALSE;

}

if ($this->input->post('id_kategori') == '') {

$data['inputerror'][] = 'id_kategori';

$data['error_string'][] = 'Kategori harus dipilih';

$data['status'] = FALSE;

}

if($data['status'] === FALSE) {

echo json_encode($data);

exit();

}

4. View (`application/views/produk/index.php`)

Ini adalah tampilan utama yang akan menampilkan tabel Datatables dan modal untuk form tambah/edit.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CRUD Produk AJAX Datatables</title>
    <link href="<?php echo base_url('assets/css/bootstrap.min.css')?>" rel="stylesheet">
    <link href="<?php echo base_url('assets/datatables/css/dataTables.bootstrap.min.css')?>" rel="stylesheet">
    <link href="<?php echo base_url('assets/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')?>" rel="stylesheet">
    </head>
<body>
    <div class="container">
        <h1 style="font-size:20pt">CRUD Produk dengan AJAX, Join Table & Datatables</h1>

        <button class="btn btn-success" onclick="add_produk()"><i class="glyphicon glyphicon-plus"></i> Tambah Produk</button>
        <button class="btn btn-default" onclick="reload_table()"><i class="glyphicon glyphicon-refresh"></i> Reload</button>
        <br /><br />

        <table id="table" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Nama Produk</th>
                    <th>Kategori</th>
                    <th>Harga</th>
                    <th>Gambar</th>
                    <th style="width:125px;">Aksi</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <div class="modal fade" id="modal_form" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h3 class="modal-title">Form Produk</h3>
                </div>
                <div class="modal-body form">
                    <form action="#" id="form" class="form-horizontal">
                        <input type="hidden" value="" name="id_produk"/>
                        <div class="form-body">
                            <div class="form-group">
                                <label class="control-label col-md-3">Nama Produk</label>
                                <div class="col-md-9">
                                    <input name="nama_produk" placeholder="Nama Produk" class="form-control" type="text">
                                    <span class="help-block"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Kategori</label>
                                <div class="col-md-9">
                                    <select name="id_kategori" class="form-control"></select>
                                    <span class="help-block"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Harga</label>
                                <div class="col-md-9">
                                    <input name="harga" placeholder="Harga" class="form-control" type="text">
                                    <span class="help-block"></span>
                                </div>
                            </div>
                            <div class="form-group" id="gambar-preview">
                                <label class="control-label col-md-3">Gambar</label>
                                <div class="col-md-9">
                                    (Tidak ada gambar)
                                    <span class="help-block"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3" id="label-upload">Upload Gambar</label>
                                <div class="col-md-9">
                                    <input name="gambar" type="file">
                                    <span class="help-block"></span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                </div>
            </div></div></div><script src="<?php echo base_url('assets/js/jquery-3.7.1.min.js')?>"></script>
    <script src="<?php echo base_url('assets/js/bootstrap.min.js')?>"></script>
    <script src="<?php echo base_url('assets/datatables/js/jquery.dataTables.min.js')?>"></script>
    <script src="<?php echo base_url('assets/datatables/js/dataTables.bootstrap.min.js')?>"></script>
    <script src="<?php echo base_url('assets/bootstrap-datepicker/js/bootstrap-datepicker.min.js')?>"></script>

    <script type="text/javascript">
        var save_method; // for save method string
        var table;
        var base_url = '<?php echo base_url();?>';
        var list_kategori = []; // Simpan list kategori

        $(document).ready(function() {
            //datatables
            table = $('#table').DataTable({
                "processing": true, // Feature control the processing indicator.
                "serverSide": true, // Feature control DataTables' server-side processing mode.
                "order": [], // Initial no order.

                // Load data for the table's content from an Ajax source
                "ajax": {
                    "url": "<?php echo site_url('produk/ajax_list')?>",
                    "type": "POST"
                },

                //Set column definition initialisation properties.
                "columnDefs": [
                    {
                        "targets": [ -1 ], //last column
                        "orderable": false, //set not orderable
                    },
                    {
                        "targets": [ -2 ], //2 last column (gambar)
                        "orderable": false, //set not orderable
                    },
                ],
            });

            // Get all categories to populate the dropdown
            $.ajax({
                url : "<?php echo site_url('produk/ajax_get_all_kategori')?>", // Anda perlu membuat method ini di controller
                type: "GET",
                dataType: "JSON",
                success: function(data) {
                    list_kategori = data;
                    populateKategoriDropdown();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Error getting categories from ajax');
                }
            });

            function populateKategoriDropdown(selectedId = '') {
                var selectKategori = $('[name="id_kategori"]');
                selectKategori.empty();
                selectKategori.append('<option value="">-- Pilih Kategori --</option>');
                $.each(list_kategori, function(key, value) {
                    var selected = (value.id_kategori == selectedId) ? 'selected' : '';
                    selectKategori.append('<option value="' + value.id_kategori + '" ' + selected + '>' + value.nama_kategori + '</option>');
                });
            }

            //set input/textarea/select event when change value, remove class error and text help block
            $("input").change(function(){
                $(this).parent().parent().removeClass('has-error');
                $(this).next().empty();
            });
            $("select").change(function(){
                $(this).parent().parent().removeClass('has-error');
                $(this).next().empty();
            });
        });

        function add_produk() {
            save_method = 'add';
            $('#form')[0].reset(); // reset form on modals
            $('.form-group').removeClass('has-error'); // clear error class
            $('.help-block').empty(); // clear error string
            $('#modal_form').modal('show'); // show bootstrap modal
            $('.modal-title').text('Tambah Produk'); // Set Title to Bootstrap modal title

            $('#gambar-preview').hide(); // hide photo preview select
            $('#label-upload').text('Upload Gambar'); // label photo upload
            $('[name="gambar"]').val(''); // clear input file
            populateKategoriDropdown(); // Reset dropdown kategori
        }

        function edit_produk(id) {
            save_method = 'update';
            $('#form')[0].reset(); // reset form on modals
            $('.form-group').removeClass('has-error'); // clear error class
            $('.help-block').empty(); // clear error string
            $('#gambar-preview').show(); // show photo preview

            //Ajax Load data from ajax
            $.ajax({
                url : "<?php echo site_url('produk/ajax_edit/')?>/" + id,
                type: "GET",
                dataType: "JSON",
                success: function(data) {
                    $('[name="id_produk"]').val(data.id_produk);
                    $('[name="nama_produk"]').val(data.nama_produk);
                    $('[name="harga"]').val(data.harga);
                    populateKategoriDropdown(data.id_kategori); // Set selected kategori

                    $('#modal_form').modal('show'); // show bootstrap modal
                    $('.modal-title').text('Edit Produk'); // Set Title to Bootstrap modal title

                    if(data.gambar) {
                        $('#label-upload').text('Ganti Gambar'); // label photo upload
                        $('#gambar-preview div').html('<img src="'+base_url+'assets/img/'+data.gambar+'" class="img-responsive" style="max-height:90px;"><label><input type="checkbox" name="remove_photo" value="'+data.gambar+'"/> Hapus gambar</label>');
                    } else {
                        $('#label-upload').text('Upload Gambar'); // label photo upload
                        $('#gambar-preview div').text('(Tidak ada gambar)');
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Error getting data from ajax');
                }
            });
        }

        function reload_table() {
            table.ajax.reload(null,false); //reload datatable ajax
        }

        function save() {
            $('#btnSave').text('saving...'); // change button text
            $('#btnSave').attr('disabled',true); // set button disable
            var url;

            if(save_method == 'add') {
                url = "<?php echo site_url('produk/ajax_add')?>";
            } else {
                url = "<?php echo site_url('produk/ajax_update')?>";
            }

            // ajax adding data to database
            var formData = new FormData($('#form')[0]);
            $.ajax({
                url : url,
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                dataType: "JSON",
                success: function(data) {
                    if(data.status) { //if success close modal and reload ajax table
                        $('#modal_form').modal('hide');
                        reload_table();
                    } else {
                        for (var i = 0; i < data.inputerror.length; i++) {
                            $('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class
                            $('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string
                        }
                    }
                    $('#btnSave').text('save'); // change button text
                    $('#btnSave').attr('disabled',false); // set button enable
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Error adding / update data');
                    $('#btnSave').text('save'); // change button text
                    $('#btnSave').attr('disabled',false); // set button enable
                }
            });
        }

        function delete_produk(id) {
            if(confirm('Are you sure delete this data?')) {
                // ajax delete data to database
                $.ajax({
                    url : "<?php echo site_url('produk/ajax_delete')?>/" + id,
                    type: "POST",
                    dataType: "JSON",
                    success: function(data) {
                        //if success reload ajax table
                        $('#modal_form').modal('hide');
                        reload_table();
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert('Error deleting data');
                    }
                });
            }
        }

        // Tambahkan method ini di controller (misal di Produk.php)
        // agar dapat mengambil semua kategori untuk dropdown
        // public function ajax_get_all_kategori() {
        //     $kategori = $this->Produk_model->get_all_kategori();
        //     echo json_encode($kategori);
        // }
    </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

<!DOCTYPE html>

<html>

<head>

<title>CRUD Produk AJAX Datatables</title>

</head>

<body>

<h1 style="font-size:20pt">CRUD Produk dengan AJAX, Join Table & Datatables</h1>

<button class="btn btn-success" onclick="add_produk()"><i class="glyphicon glyphicon-plus"></i> Tambah Produk</button>

<button class="btn btn-default" onclick="reload_table()"><i class="glyphicon glyphicon-refresh"></i> Reload</button>

<thead>

<tr>

<th>Nama Produk</th>

<th>Kategori</th>

<th>Harga</th>

<th>Gambar</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

<h3 class="modal-title">Form Produk</h3>

</div>

<label class="control-label col-md-3">Nama Produk</label>

</div>

<label class="control-label col-md-3">Kategori</label>

</div>

<label class="control-label col-md-3">Harga</label>

</div>

<label class="control-label col-md-3">Gambar</label>

(Tidak ada gambar)

</div>

<label class="control-label col-md-3" id="label-upload">Upload Gambar</label>

</div>

</form>

</div>

<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>

</div>

</div></div></div><script src="<?php echo base_url('assets/js/jquery-3.7.1.min.js')?>"></script>

var save_method; // for save method string

var table;

var base_url = '<?php echo base_url();?>';

var list_kategori = []; // Simpan list kategori

$(document).ready(function() {

//datatables

table = $('#table').DataTable({

"processing": true, // Feature control the processing indicator.

"serverSide": true, // Feature control DataTables' server-side processing mode.

"order": [], // Initial no order.

// Load data for the table's content from an Ajax source

"ajax": {

"url": "<?php echo site_url('produk/ajax_list')?>",

"type": "POST"

//Set column definition initialisation properties.

"columnDefs": [

{

"targets": [ -1 ], //last column

"orderable": false, //set not orderable

{

"targets": [ -2 ], //2 last column (gambar)

"orderable": false, //set not orderable

});

// Get all categories to populate the dropdown

$.ajax({

url : "<?php echo site_url('produk/ajax_get_all_kategori')?>", // Anda perlu membuat method ini di controller

type: "GET",

dataType: "JSON",

success: function(data) {

list_kategori = data;

populateKategoriDropdown();

error: function (jqXHR, textStatus, errorThrown) {

alert('Error getting categories from ajax');

}

});

function populateKategoriDropdown(selectedId = '') {

var selectKategori = $('[name="id_kategori"]');

selectKategori.empty();

selectKategori.append('<option value="">-- Pilih Kategori --</option>');

$.each(list_kategori, function(key, value) {

var selected = (value.id_kategori == selectedId) ? 'selected' : '';

selectKategori.append('<option value="' + value.id_kategori + '" ' + selected + '>' + value.nama_kategori + '</option>');

});

}

//set input/textarea/select event when change value, remove class error and text help block

$("input").change(function(){

$(this).parent().parent().removeClass('has-error');

$(this).next().empty();

});

$("select").change(function(){

$(this).parent().parent().removeClass('has-error');

$(this).next().empty();

});

function add_produk() {

save_method = 'add';

$('#form')[0].reset(); // reset form on modals

$('.form-group').removeClass('has-error'); // clear error class

$('.help-block').empty(); // clear error string

$('#modal_form').modal('show'); // show bootstrap modal

$('.modal-title').text('Tambah Produk'); // Set Title to Bootstrap modal title

$('#gambar-preview').hide(); // hide photo preview select

$('#label-upload').text('Upload Gambar'); // label photo upload

$('[name="gambar"]').val(''); // clear input file

populateKategoriDropdown(); // Reset dropdown kategori

}

function edit_produk(id) {

save_method = 'update';

$('#form')[0].reset(); // reset form on modals

$('.form-group').removeClass('has-error'); // clear error class

$('.help-block').empty(); // clear error string

$('#gambar-preview').show(); // show photo preview

//Ajax Load data from ajax

$.ajax({

url : "<?php echo site_url('produk/ajax_edit/')?>/" + id,

type: "GET",

dataType: "JSON",

success: function(data) {

$('[name="id_produk"]').val(data.id_produk);

$('[name="nama_produk"]').val(data.nama_produk);

$('[name="harga"]').val(data.harga);

populateKategoriDropdown(data.id_kategori); // Set selected kategori

$('#modal_form').modal('show'); // show bootstrap modal

$('.modal-title').text('Edit Produk'); // Set Title to Bootstrap modal title

if(data.gambar) {

$('#label-upload').text('Ganti Gambar'); // label photo upload

$('#gambar-preview div').html('<img src="'+base_url+'assets/img/'+data.gambar+'" class="img-responsive" style="max-height:90px;"><label><input type="checkbox" name="remove_photo" value="'+data.gambar+'"/> Hapus gambar</label>');

} else {

$('#label-upload').text('Upload Gambar'); // label photo upload

$('#gambar-preview div').text('(Tidak ada gambar)');

}

error: function (jqXHR, textStatus, errorThrown) {

alert('Error getting data from ajax');

}

});

}

function reload_table() {

table.ajax.reload(null,false); //reload datatable ajax

}

function save() {

$('#btnSave').text('saving...'); // change button text

$('#btnSave').attr('disabled',true); // set button disable

var url;

if(save_method == 'add') {

url = "<?php echo site_url('produk/ajax_add')?>";

} else {

url = "<?php echo site_url('produk/ajax_update')?>";

}

// ajax adding data to database

var formData = new FormData($('#form')[0]);

$.ajax({

url : url,

type: "POST",

data: formData,

contentType: false,

processData: false,

dataType: "JSON",

success: function(data) {

if(data.status) { //if success close modal and reload ajax table

$('#modal_form').modal('hide');

reload_table();

} else {

for (var i = 0; i < data.inputerror.length; i++) {

$('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class

$('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string

}

$('#btnSave').text('save'); // change button text

$('#btnSave').attr('disabled',false); // set button enable

error: function (jqXHR, textStatus, errorThrown) {

alert('Error adding / update data');

$('#btnSave').text('save'); // change button text

$('#btnSave').attr('disabled',false); // set button enable

}

});

}

function delete_produk(id) {

if(confirm('Are you sure delete this data?')) {

// ajax delete data to database

$.ajax({

url : "<?php echo site_url('produk/ajax_delete')?>/" + id,

type: "POST",

dataType: "JSON",

success: function(data) {

//if success reload ajax table

$('#modal_form').modal('hide');

reload_table();

error: function (jqXHR, textStatus, errorThrown) {

alert('Error deleting data');

}

});

}

// Tambahkan method ini di controller (misal di Produk.php)

// agar dapat mengambil semua kategori untuk dropdown

// public function ajax_get_all_kategori() {

// $kategori = $this->Produk_model->get_all_kategori();

// echo json_encode($kategori);

// }

</script>

</body>

</html>

Penting: Anda perlu menambahkan method ajax_get_all_kategori() di controller Produk.php agar dropdown kategori dapat terisi:

// Di dalam class Produk extends CI_Controller
public function ajax_get_all_kategori() {
    $kategori = $this->Produk_model->get_all_kategori();
    echo json_encode($kategori);
}

// Di dalam class Produk extends CI_Controller

public function ajax_get_all_kategori() {

$kategori = $this->Produk_model->get_all_kategori();

echo json_encode($kategori);

}

5. File JavaScript (`assets/js/produk.js`)

Jika Anda ingin memisahkan JavaScript ke file terpisah, Anda bisa memindahkan semua script di dalam tag <script> dari index.php ke assets/js/produk.js, lalu panggil di index.php:

<script src="<?php echo base_url('assets/js/produk.js')?>"></script>

1	<script src="<?php echo base_url('assets/js/produk.js')?>"></script>

6. File CSS (`assets/css/style.css`) (Opsional)

Untuk styling tambahan, jika diperlukan.

Penjelasan Kode

Model (Produk_model.php):
- get_all_produk_datatables(): Mengambil data produk dengan join ke tabel kategori. Ini juga mencakup logika untuk server-side processing Datatables (pencarian, sorting, pagination).
- count_filtered_produk() dan count_all_produk(): Digunakan oleh Datatables untuk menghitung jumlah total dan jumlah data yang difilter.
- Metode get_produk_by_id, insert_produk, update_produk, delete_produk, dan get_all_kategori untuk operasi CRUD standar dan pengambilan data kategori.
Controller (Produk.php):
- index(): Memuat tampilan utama (produk/index.php).
- ajax_list(): Endpoint AJAX untuk Datatables. Mengambil data dari model, memformatnya, dan mengembalikan dalam format JSON yang diharapkan Datatables.
- ajax_edit(): Mengambil detail satu produk berdasarkan ID untuk mengisi form edit.
- ajax_add() dan ajax_update(): Menangani penambahan dan pembaruan data produk, termasuk proses upload gambar menggunakan library upload dari CI.
- ajax_delete(): Menghapus data produk dan juga file gambar terkait dari server.
- _do_upload(): Fungsi private untuk mengelola proses upload file.
- _validate(): Fungsi private untuk validasi input form.
View (index.php):
- Memuat Bootstrap, Datatables CSS & JS, dan jQuery.
- Tabel HTML dengan ID table yang akan diinisialisasi oleh Datatables.
- Modal Bootstrap untuk form tambah/edit produk.
- JavaScript:
  - Menginisialisasi Datatables dengan opsi server-side processing, menunjuk ke produk/ajax_list sebagai sumber data.
  - Fungsi add_produk(), edit_produk(), save(), delete_produk(), dan reload_table() untuk berinteraksi dengan controller via AJAX.
  - Penggunaan FormData untuk mengirimkan data form, termasuk file upload.
  - Menangani tampilan preview gambar dan opsi hapus gambar.
  - Mengambil daftar kategori secara terpisah untuk dropdown.

Cara Menjalankan

Unduh dan Instal CodeIgniter 3: Jika belum punya.
Buat Database dan Tabel: Gunakan skrip SQL di atas.
Konfigurasi CI: Sesuaikan database.php dan autoload.php.
Buat Folder assets: Buat folder assets/img, assets/css, dan assets/js di root proyek Anda.
Tempatkan File:
- Produk.php di application/controllers/
- Produk_model.php di application/models/
- index.php di application/views/produk/ (buat folder produk di dalam views)
- Download Bootstrap dan Datatables, letakkan di assets/css, assets/js, dan assets/datatables. Sesuaikan path di index.php jika berbeda.
- Buat file jquery-3.7.1.min.js (atau versi jQuery terbaru) di assets/js.
Akses Aplikasi: Buka browser dan navigasi ke http://localhost/your_project/index.php/produk (sesuaikan dengan URL proyek Anda).

Dengan langkah-langkah ini, Anda akan memiliki aplikasi CRUD produk yang menggunakan AJAX, join table untuk kategori, Datatables untuk tampilan tabel, dan fungsionalitas upload gambar di CodeIgniter 3.

Dibaca: 230