cara membuat insert_batch ajax di codeigniter 3

Tentu, membuat insert_batch dengan AJAX di CodeIgniter 3 melibatkan beberapa langkah, terutama pada sisi JavaScript (AJAX) untuk mengirim data array dan pada sisi Controller/Model CodeIgniter untuk memproses array tersebut menggunakan fungsi insert_batch.

Berikut adalah contoh langkah-langkahnya:

Konsep Dasar

insert_batch di CodeIgniter digunakan untuk menyisipkan multiple baris data ke dalam database dalam satu query. Ini jauh lebih efisien daripada melakukan banyak query INSERT individual dalam loop, terutama saat Anda memiliki banyak data untuk disimpan.

Saat menggunakan AJAX, Anda perlu mengirim data array dari JavaScript (biasanya sebagai objek JSON) ke Controller CodeIgniter.

Studi Kasus: Menambah Beberapa Item Sekaligus

Misalkan kita memiliki sebuah form untuk menambahkan beberapa produk sekaligus, di mana setiap produk memiliki nama dan harga.

1. Persiapan Database

Pastikan Anda memiliki tabel di database yang sesuai. Misalnya, tabel products:

CREATE TABLE `products` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(255) NOT NULL,
  `price` DECIMAL(10, 2) NOT NULL,
  `created_at` DATETIME DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `products` (

`id` INT(11) NOT NULL AUTO_INCREMENT,

`name` VARCHAR(255) NOT NULL,

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

`created_at` DATETIME DEFAULT CURRENT_TIMESTAMP,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

2. Konfigurasi CodeIgniter

Pastikan database library sudah di-autoload di application/config/autoload.php:

// application/config/autoload.php
$autoload['libraries'] = array('database', 'form_validation', 'session');
$autoload['helper'] = array('url', 'form');

// application/config/autoload.php

$autoload['libraries'] = array('database', 'form_validation', 'session');

$autoload['helper'] = array('url', 'form');

3. Membuat Model (`Product_model.php`)

Buat file baru di application/models/Product_model.php:

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

class Product_model extends CI_Model {

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

    // Fungsi untuk menyisipkan multiple data menggunakan insert_batch
    public function insert_products_batch($data)
    {
        return $this->db->insert_batch('products', $data);
    }

}

<?php

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

class Product_model extends CI_Model {

public function __construct()

{

parent::__construct();

$this->load->database();

}

// Fungsi untuk menyisipkan multiple data menggunakan insert_batch

public function insert_products_batch($data)

{

return $this->db->insert_batch('products', $data);

}

4. Membuat Controller (`Products.php`)

Buat file baru di application/controllers/Products.php:

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

class Products extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
        $this->load->model('product_model');
        $this->load->helper(array('form', 'url'));
    }

    // Halaman utama untuk menampilkan form
    public function index()
    {
        $this->load->view('product_batch_add_view');
    }

    // Endpoint AJAX untuk menerima dan menyimpan data batch
    public function ajax_add_batch()
    {
        // Pastikan request adalah POST dan ada data yang dikirim
        if ($this->input->post()) {
            $products_data = json_decode($this->input->post('products_data'), true);

            $data_to_insert = [];
            $errors = [];

            // Validasi data (contoh sederhana)
            if (!empty($products_data) && is_array($products_data)) {
                foreach ($products_data as $index => $product) {
                    $name = isset($product['name']) ? trim($product['name']) : '';
                    $price = isset($product['price']) ? (float) $product['price'] : 0.00;

                    if (empty($name)) {
                        $errors[] = "Nama produk di baris " . ($index + 1) . " tidak boleh kosong.";
                    }
                    if ($price <= 0) {
                        $errors[] = "Harga produk di baris " . ($index + 1) . " harus lebih dari nol.";
                    }

                    if (empty($errors)) {
                        $data_to_insert[] = [
                            'name' => $name,
                            'price' => $price
                        ];
                    }
                }
            } else {
                $errors[] = "Tidak ada data produk yang diterima.";
            }

            if (!empty($errors)) {
                echo json_encode(['status' => FALSE, 'message' => $errors]);
                exit();
            }

            if (!empty($data_to_insert)) {
                $inserted_rows = $this->product_model->insert_products_batch($data_to_insert);

                if ($inserted_rows) {
                    echo json_encode(['status' => TRUE, 'message' => $inserted_rows . ' produk berhasil ditambahkan.']);
                } else {
                    echo json_encode(['status' => FALSE, 'message' => 'Gagal menambahkan produk.']);
                }
            } else {
                 echo json_encode(['status' => FALSE, 'message' => 'Tidak ada data valid untuk ditambahkan.']);
            }

        } else {
            echo json_encode(['status' => FALSE, 'message' => 'Metode request tidak valid atau data tidak ditemukan.']);
        }
    }
}

<?php

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

class Products extends CI_Controller {

public function __construct()

{

parent::__construct();

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

$this->load->helper(array('form', 'url'));

}

// Halaman utama untuk menampilkan form

public function index()

{

$this->load->view('product_batch_add_view');

}

// Endpoint AJAX untuk menerima dan menyimpan data batch

public function ajax_add_batch()

{

// Pastikan request adalah POST dan ada data yang dikirim

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

$products_data = json_decode($this->input->post('products_data'), true);

$data_to_insert = [];

$errors = [];

// Validasi data (contoh sederhana)

if (!empty($products_data) && is_array($products_data)) {

foreach ($products_data as $index => $product) {

$name = isset($product['name']) ? trim($product['name']) : '';

$price = isset($product['price']) ? (float) $product['price'] : 0.00;

if (empty($name)) {

$errors[] = "Nama produk di baris " . ($index + 1) . " tidak boleh kosong.";

}

if ($price <= 0) {

$errors[] = "Harga produk di baris " . ($index + 1) . " harus lebih dari nol.";

}

if (empty($errors)) {

$data_to_insert[] = [

'name' => $name,

'price' => $price

];

}

} else {

$errors[] = "Tidak ada data produk yang diterima.";

}

if (!empty($errors)) {

echo json_encode(['status' => FALSE, 'message' => $errors]);

exit();

}

if (!empty($data_to_insert)) {

$inserted_rows = $this->product_model->insert_products_batch($data_to_insert);

if ($inserted_rows) {

echo json_encode(['status' => TRUE, 'message' => $inserted_rows . ' produk berhasil ditambahkan.']);

} else {

echo json_encode(['status' => FALSE, 'message' => 'Gagal menambahkan produk.']);

}

} else {

echo json_encode(['status' => FALSE, 'message' => 'Tidak ada data valid untuk ditambahkan.']);

}

} else {

echo json_encode(['status' => FALSE, 'message' => 'Metode request tidak valid atau data tidak ditemukan.']);

}

5. Membuat View (`product_batch_add_view.php`)

Buat file baru di application/views/product_batch_add_view.php. Kita akan menggunakan sedikit JavaScript untuk menambahkan baris form secara dinamis.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tambah Produk Massal</title>
    <link href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css')?>" rel="stylesheet">
    <style>
        body { padding: 20px; }
        .product-row { margin-bottom: 15px; border: 1px solid #eee; padding: 15px; border-radius: 5px; background-color: #f9f9f9; }
        .product-row:not(:last-child) { margin-bottom: 20px; }
        .remove-row-btn { margin-top: 25px; }
        .form-control-label { margin-bottom: 0; padding-top: 7px; }
    </style>
</head>
<body>

    <div class="container">
        <h1>Tambah Produk Massal</h1>
        <hr>

        <form id="productBatchForm">
            <div id="productRowsContainer">
                </div>

            <button type="button" class="btn btn-info" id="addProductRow">Tambah Baris Produk</button>
            <button type="submit" class="btn btn-primary" id="saveBatchBtn">Simpan Semua Produk</button>
        </form>

        <div id="responseMessage" class="mt-4"></div>
    </div>

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

    <script>
        $(document).ready(function() {
            var productRowIndex = 0;

            // Fungsi untuk menambahkan baris produk baru
            function addProductRow() {
                var rowHtml = `
                    <div class="row product-row" data-index="${productRowIndex}">
                        <div class="col-md-5">
                            <div class="form-group">
                                <label for="name_${productRowIndex}">Nama Produk:</label>
                                <input type="text" class="form-control" id="name_${productRowIndex}" name="products[${productRowIndex}][name]" placeholder="Masukkan Nama Produk" required>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="form-group">
                                <label for="price_${productRowIndex}">Harga:</label>
                                <input type="number" class="form-control" id="price_${productRowIndex}" name="products[${productRowIndex}][price]" placeholder="Masukkan Harga" step="0.01" min="0.01" required>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-danger btn-block remove-row-btn">Hapus</button>
                        </div>
                    </div>
                `;
                $('#productRowsContainer').append(rowHtml);
                productRowIndex++;
            }

            // Tambahkan baris pertama secara default
            addProductRow();

            // Event handler untuk tombol "Tambah Baris Produk"
            $('#addProductRow').on('click', addProductRow);

            // Event handler untuk tombol "Hapus" (delegated event)
            $('#productRowsContainer').on('click', '.remove-row-btn', function() {
                $(this).closest('.product-row').remove();
            });

            // Event handler untuk submit form AJAX
            $('#productBatchForm').on('submit', function(e) {
                e.preventDefault(); // Mencegah form submit secara tradisional

                $('#saveBatchBtn').text('Menyimpan...').attr('disabled', true);
                $('#responseMessage').html(''); // Kosongkan pesan sebelumnya

                var productsData = [];
                $('.product-row').each(function() {
                    var name = $(this).find('input[name$="[name]"]').val();
                    var price = $(this).find('input[name$="[price]"]').val();

                    // Hanya tambahkan ke array jika ada nilai, atau jika Anda ingin validasi di sisi JS
                    if (name && price) {
                        productsData.push({
                            name: name,
                            price: price
                        });
                    }
                });

                if (productsData.length === 0) {
                    $('#responseMessage').html('<div class="alert alert-warning">Tidak ada produk untuk disimpan.</div>');
                    $('#saveBatchBtn').text('Simpan Semua Produk').attr('disabled', false);
                    return;
                }

                $.ajax({
                    url: "<?php echo site_url('products/ajax_add_batch'); ?>",
                    type: "POST",
                    dataType: "JSON",
                    data: { products_data: JSON.stringify(productsData) }, // Kirim array sebagai string JSON
                    success: function(response) {
                        if (response.status) {
                            $('#responseMessage').html('<div class="alert alert-success">' + response.message + '</div>');
                            // Opsional: Kosongkan form setelah sukses
                            $('#productRowsContainer').empty();
                            addProductRow(); // Tambahkan satu baris kosong lagi
                        } else {
                            // Tangani error, bisa berupa array pesan error
                            if (Array.isArray(response.message)) {
                                var errorHtml = '<div class="alert alert-danger"><ul>';
                                $.each(response.message, function(index, msg) {
                                    errorHtml += '<li>' + msg + '</li>';
                                });
                                errorHtml += '</ul></div>';
                                $('#responseMessage').html(errorHtml);
                            } else {
                                $('#responseMessage').html('<div class="alert alert-danger">' + response.message + '</div>');
                            }
                        }
                        $('#saveBatchBtn').text('Simpan Semua Produk').attr('disabled', false);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        $('#responseMessage').html('<div class="alert alert-danger">Terjadi kesalahan saat berkomunikasi dengan server: ' + textStatus + '</div>');
                        $('#saveBatchBtn').text('Simpan Semua Produk').attr('disabled', false);
                    }
                });
            });
        });
    </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

<!DOCTYPE html>

<head>

<title>Tambah Produk Massal</title>

<style>

body { padding: 20px; }

.product-row { margin-bottom: 15px; border: 1px solid #eee; padding: 15px; border-radius: 5px; background-color: #f9f9f9; }

.product-row:not(:last-child) { margin-bottom: 20px; }

.remove-row-btn { margin-top: 25px; }

.form-control-label { margin-bottom: 0; padding-top: 7px; }

</style>

</head>

<body>

<h1>Tambah Produk Massal</h1>

<hr>

</div>

<button type="button" class="btn btn-info" id="addProductRow">Tambah Baris Produk</button>

<button type="submit" class="btn btn-primary" id="saveBatchBtn">Simpan Semua Produk</button>

</form>

</div>

$(document).ready(function() {

var productRowIndex = 0;

// Fungsi untuk menambahkan baris produk baru

function addProductRow() {

var rowHtml = `

<label for="name_${productRowIndex}">Nama Produk:</label>

</div>

<label for="price_${productRowIndex}">Harga:</label>

</div>

<button type="button" class="btn btn-danger btn-block remove-row-btn">Hapus</button>

</div>

$('#productRowsContainer').append(rowHtml);

productRowIndex++;

}

// Tambahkan baris pertama secara default

addProductRow();

// Event handler untuk tombol "Tambah Baris Produk"

$('#addProductRow').on('click', addProductRow);

// Event handler untuk tombol "Hapus" (delegated event)

$('#productRowsContainer').on('click', '.remove-row-btn', function() {

$(this).closest('.product-row').remove();

});

// Event handler untuk submit form AJAX

$('#productBatchForm').on('submit', function(e) {

e.preventDefault(); // Mencegah form submit secara tradisional

$('#saveBatchBtn').text('Menyimpan...').attr('disabled', true);

$('#responseMessage').html(''); // Kosongkan pesan sebelumnya

var productsData = [];

$('.product-row').each(function() {

var name = $(this).find('input[name$="[name]"]').val();

var price = $(this).find('input[name$="[price]"]').val();

// Hanya tambahkan ke array jika ada nilai, atau jika Anda ingin validasi di sisi JS

if (name && price) {

productsData.push({

name: name,

price: price

});

}

});

if (productsData.length === 0) {

$('#responseMessage').html('<div class="alert alert-warning">Tidak ada produk untuk disimpan.</div>');

$('#saveBatchBtn').text('Simpan Semua Produk').attr('disabled', false);

return;

}

$.ajax({

url: "<?php echo site_url('products/ajax_add_batch'); ?>",

type: "POST",

dataType: "JSON",

data: { products_data: JSON.stringify(productsData) }, // Kirim array sebagai string JSON

success: function(response) {

if (response.status) {

$('#responseMessage').html('<div class="alert alert-success">' + response.message + '</div>');

// Opsional: Kosongkan form setelah sukses

$('#productRowsContainer').empty();

addProductRow(); // Tambahkan satu baris kosong lagi

} else {

// Tangani error, bisa berupa array pesan error

if (Array.isArray(response.message)) {

var errorHtml = '<div class="alert alert-danger"><ul>';

$.each(response.message, function(index, msg) {

errorHtml += '<li>' + msg + '</li>';

});

errorHtml += '</ul></div>';

$('#responseMessage').html(errorHtml);

} else {

$('#responseMessage').html('<div class="alert alert-danger">' + response.message + '</div>');

}

$('#saveBatchBtn').text('Simpan Semua Produk').attr('disabled', false);

error: function(jqXHR, textStatus, errorThrown) {

$('#responseMessage').html('<div class="alert alert-danger">Terjadi kesalahan saat berkomunikasi dengan server: ' + textStatus + '</div>');

$('#saveBatchBtn').text('Simpan Semua Produk').attr('disabled', false);

}

});

</script>

</body>

</html>

6. Buat Folder `assets`

Pastikan Anda memiliki struktur folder assets di root proyek Anda, dan letakkan file-file JavaScript dan CSS yang diperlukan di dalamnya, sama seperti contoh CRUD sebelumnya:

assets/bootstrap/css/bootstrap.min.css
assets/bootstrap/js/bootstrap.min.js
assets/jquery/jquery-2.2.3.min.js

7. Akses Aplikasi

Akses URL berikut di browser Anda: http://localhost/nama_proyek_ci/products

Anda akan melihat form dengan satu baris produk. Anda bisa:

Klik “Tambah Baris Produk” untuk menambahkan lebih banyak input.
Isi data nama dan harga untuk setiap produk.
Klik “Simpan Semua Produk”.

AJAX akan mengirim data ke controller, dan controller akan memprosesnya menggunakan insert_batch.

Penjelasan Kode:

JavaScript (di product_batch_add_view.php):

Dinamis Menambah/Menghapus Baris: Kode ini memungkinkan pengguna untuk menambahkan atau menghapus baris input produk secara dinamis. Setiap baris memiliki input untuk nama dan harga.
Mengumpulkan Data: Saat form disubmit, JavaScript akan mengiterasi setiap baris produk yang ada di DOM dan mengumpulkan nilai nama dan harga ke dalam sebuah array of objects.
JSON.stringify(productsData): Ini adalah bagian kunci. Array objek JavaScript tidak bisa langsung dikirim sebagai POST data yang standar. Kita perlu mengubahnya menjadi string JSON agar bisa dikirim melalui AJAX.
data: { products_data: JSON.stringify(productsData) }: Data ini dikirim ke server dengan nama parameter products_data.
dataType: "JSON": Mengharapkan respons dari server dalam format JSON.

PHP (di Products.php Controller):

$this->input->post('products_data'): Controller menerima string JSON yang dikirim dari AJAX.
json_decode($this->input->post('products_data'), true): Ini adalah bagian kunci lainnya. Fungsi ini mengonversi string JSON kembali menjadi array asosiatif PHP (true parameter membuat array asosiatif).
Validasi Data: Sebelum menyisipkan ke database, sangat penting untuk memvalidasi data yang diterima. Contoh di atas adalah validasi sederhana (cek kosong dan harga > 0). Untuk aplikasi nyata, Anda bisa menggunakan form_validation library CodeIgniter atau validasi kustom yang lebih kompleks.
$this->product_model->insert_products_batch($data_to_insert): Memanggil fungsi model untuk melakukan operasi insert_batch.
Respons JSON: Controller selalu mengembalikan respons dalam format JSON (echo json_encode(['status' => TRUE, 'message' => ...]);) agar JavaScript di frontend bisa menanganinya.

PHP (di Product_model.php Model):

$this->db->insert_batch('products', $data);: Ini adalah inti dari operasi batch insert. Anda cukup memberikan nama tabel dan array multidimensional berisi data yang akan disisipkan. CodeIgniter akan otomatis menghasilkan query INSERT BATCH yang efisien.

Dengan setup ini, Anda bisa melakukan operasi insert_batch ke database menggunakan AJAX di CodeIgniter 3, yang sangat berguna untuk mengelola banyak data secara efisien dari sisi frontend.

Dibaca: 221