CodeIgniter Tutorial - CRUD Live Table dengan AJAX

Feri Rimanda Desember 21, 2020

 




CRUD kependekan dari Create, Read, Update dan Delete adalah dasar dalam mengembangkan suatu aplikasi. Bagaimana cara membuat CRUD bisa langsung dilakukan dalam table? itu bisa dilakukan dengan ajax, hal itu membuat website kita lebih interaktif. 

Seperti pada tutorial sebelumnya, disini kita masih menggunakan data dari siswa. Untuk lebih jelasnya bagaimana cara membuat CRUD secara live di table dengan Ajax, silahkan ikuti tutorial ini.

LiveTable.php (Controller)

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

class LiveTable extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->load->model('LiveTable_model', 'MLiveTable');
    }

    function index()
    {
        $this->load->view("live_table");
    }

    function load_data()
    {
        $data = $this->MLiveTable->load_data();
        echo json_encode($data); // ubah array jadi json
    }

    // method simpan data ke db
    function insert_data()
    {
        $data = [
            'kode'        => $this->input->post('kode'),
            'nama'        => $this->input->post('nama'),
            'tahun_lulus' => $this->input->post('tahun_lulus')
        ];
        $this->MLiveTable->insert_data($data);
    }

    //method udpate data
    function update_data()
    {
        $data = [
            $this->input->post('table_column') => $this->input->post('value')
        ];
        $this->MLiveTable->update_data($data, $this->input->post('id'));
    }

    // method delete data
    function delete_data()
    {
        $this->MLiveTable->delete_data($this->input->post('id'));
    }
}


LiveTable_model.php (Model) 
<?php
class LiveTable_model extends CI_Model
{
    //ambil semua data
    function load_data()
    {
        $this->db->order_by('id', 'DESC');
        $query = $this->db->get('tb_siswa');
        return $query->result_array();
    }

    // simpan data
    function insert_data($data)
    {
        $this->db->insert('tb_siswa', $data);
    }

    //update data
    function update_data($data, $id)
    {
        $this->db->where('id', $id);
        $this->db->update('tb_siswa', $data);
    }

    //delete data
    function delete_data($id)
    {
        $this->db->where('id', $id);
        $this->db->delete('tb_siswa');
    }
}

live_table.php (View) 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- CDN Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <!-- CDN Jquery -->
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://use.fontawesome.com/07323268fb.js"></script>
</head>

<body>
    <div class="container">
        <h3 align=center>Live Table With Ajax</h3>
        <br />
        <div class="table-responsive">
            <br />
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>KODE</th>
                        <th>NAMA</th>
                        <th>TAHUN LULUS</th>
                        <th>AKSI</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</body>

</html>
<script>
    $(document).ready(function() {

        // load semua data
        function load_data() {
            $.ajax({
                url: "<?= base_url(); ?>/livetable/load_data",
                dataType: "JSON",
                success: function(data) {
                    // buat kolom inputan
                    var html = '<tr>';
                    html += '<td id="kode" contenteditable placeholder="Masukkan Kode"></td>';
                    html += '<td id="nama" contenteditable placeholder="Masukkan Nama"></td>';
                    html += '<td id="tahun_lulus" contenteditable placeholder="Masukkan Tahun Lulus"></td>';
                    html += '<td><button type="button" name="btn_add" id="btn_add" class="btn btn-sm btn-primary"><span class="fa fa-plus"></span> Tambah</td></tr>';
                    //data dalam bentuk json di looping disini
                    for (var count = 0; count < data.length; count++) {
                        html += '<tr>';
                        html += '<td class="table_data" data-row_id="' +
                            data[count].id + '" data-column_name="kode" contenteditable>' + data[count].kode +
                            '</td>';
                        html += '<td class="table_data" data-row_id="' +
                            data[count].id + '" data-column_name="nama" contenteditable>' + data[count].nama +
                            '</td>';
                        html += '<td class="table_data" data-row_id="' +
                            data[count].id + '" data-column_name="tahun_lulus" contenteditable>' + data[count].tahun_lulus +
                            '</td>';
                        html += '<td><button type="button" name="delete_btn" id="' + data[count].id + '" class="btn btn-sm btn-danger btn_delete"><span class="fa fa-trash"></span></button></td></tr>';
                    }
                    // hasil looping masukan kesini
                    $('tbody').html(html);
                }
            });
        }
        load_data(); // panggil fungsi load data

        // simpan data
        $(document).on('click', '#btn_add', function() {
            var kode = $('#kode').text(); // ambil text dr id kode
            var nama = $('#nama').text(); // ambil text dr id nama
            var tahun_lulus = $('#tahun_lulus').text(); // ambil text dr id tahun_lulus

            // cek jika inputan kosong
            if (kode == '') {
                alert('masukkan kode');
                return false;
            }
            if (nama == '') {
                alert('masukkan nama');
                return false;
            }

            // jika inputan ada isinya kirim request dengan ajax
            $.ajax({
                url: '<?= base_url(); ?>livetable/insert_data',
                method: 'POST',
                // data yg dikirim (name : value)
                data: {
                    kode: kode,
                    nama: nama,
                    tahun_lulus
                },
                // callback jika data berhasil disimpan
                success: function(data) {
                    //panggil fungsi
                    alert('data berhasil ditambah');
                    load_data();
                }
            });

        });

        // update data
        $(document).on('blur', '.table_data', function() {
            var id = $(this).data('row_id'); // ambil nilai attribut data row_id dari class table_data
            var table_column = $(this).data('column_name'); // ambil nilai attribut data column_name dari class table_data
            var value = $(this).text(); // ambil value text dari class table_data

            $.ajax({
                url: '<?= base_url(); ?>livetable/update_data',
                method: 'POST',
                // data yg dikirim ke server untuk update data (name:value)
                data: {
                    id: id,
                    table_column: table_column,
                    value: value
                },
                success: function(data) {
                    load_data(); // panggil fungsi load data jika berhasil update
                }
            });
        });

        // delete data
        $(document).on('click', '.btn_delete', function() {
            var id = $(this).attr('id'); // ambil nilai dr attribut id

            if (confirm("apakah kamu yakin hapus data ini?")) {
                $.ajax({
                    url: "<?= base_url(); ?>livetable/delete_data",
                    method: 'POST',
                    data: {
                        id: id
                    },
                    success: function(data) {
                        load_data();
                    }
                });
            }
        });
    });
</script>

Demo Program


Jangan lupa share, semoga bermanfaat!
Tags
Reactions
Feri Rimanda

Diposting oleh Feri Rimanda

Take action miracle happen. No action nothing happen

Posting Komentar

1 Komentar

  1. Rian3 Oktober 2021 pukul 05.58

    terima kasih mas, sangat membantu, kalau boleh request mas tolong buat tutorial nya di CI4 dong

    BalasHapus