Cara Membuat Multiple Edit Tabel dengan JQuery PHP

April 7, 2019

6 Comments

Cara Membuat Multiple Edit Tabel dengan JQuery PHP – Hai ketemu lagi dengan saya dan pada kesempatan kali ini saya akan membahas tentang membuat multiple edit data yang ada pada tabel menggunakan JQuery dan plugin TableEdit. Plugin ini sudah pernah saya bahas sebelumnya namun masih penggunaan dasarnya saja dan hanya mengedit 1 row saja. Pada postingan kali ini saya ingin membahas juga untuk cara mengedit multiple row. Dengan begini user tidak perlu lagi repot-repot untuk ke menu lain untuk mengedit datanya dan cara ini juga cocok untuk user yang terbiasa mengolah data dengan excel. Hal ini pun pernah saya alami saay membuat project yang mana usernya sudah bertahun-tahun mengolah datanya menggunakan excel, maka saat kita buat menggunakan aplikasi yang berntuknya form-form seperti itu user akan kagok dan malah beranggapan dengan adanya aplikasi malah jadi tambah repot tanpa memikirkan manfaat ke depannya dan hanya karena masalah sepele seperti ini.

Cara Membuat Multiple Delete dengan Checkbox dan AJAX pada PHP

Jika sobat belum melihat postingan yang pertama mungkin sobat harus melihatnya terlebih dahulu agar tidak bingung di postingan ini. Langsung saja tidak usah bertele-tele saya jelaskan langkah-langkahnya dibawah ini.

Membuat Database MySQL

1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.

2. Buat tabel untuk mengetesnya dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go

CREATE TABLE `tbl_karyawan`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama_lengkap` varchar(50) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `alamat` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `jenkel` varchar(10) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `jabatan` varchar(100) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `umur` int(11) NOT NULL,
  `foto` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
)

CREATE TABLE `tbl_karyawan` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`nama_lengkap` varchar(50) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`alamat` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`jenkel` varchar(10) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`jabatan` varchar(100) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`umur` int(11) NOT NULL,

`foto` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,

PRIMARY KEY (`id`) USING BTREE

)

3. Untuk mencobanya agar sobat tidak memasukkan satu persatu maka sobat eksekusi saja query sql dibawah ini

INSERT INTO `tbl_karyawan` VALUES (1, 'Jono Jondah', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Supir', 36, 'avatar1.png');
INSERT INTO `tbl_karyawan` VALUES (2, 'Tini Skak', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Programmer', 24, 'avatar3.png');
INSERT INTO `tbl_karyawan` VALUES (3, 'Jini oh jini', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Service technician', 262, 'avatar3.png');
INSERT INTO `tbl_karyawan` VALUES (4, 'Slamet', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Office Boy', 32, 'avatar1.png');
INSERT INTO `tbl_karyawan` VALUES (5, 'Sule Rharjo', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Akuntan', 29, 'avatar2.png');
INSERT INTO `tbl_karyawan` VALUES (6, 'Cristiano Ronaldinho', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Systems programmer', 32, 'avatar2.png');
INSERT INTO `tbl_karyawan` VALUES (7, 'Angelina Ozawa', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Sekertaris', 38, 'avatar3.png');
INSERT INTO `tbl_karyawan` VALUES (8, 'Titin', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Konsultan', 2823, 'avatar3.png');
INSERT INTO `tbl_karyawan` VALUES (9, 'Pongki', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Analis', 6413, 'avatar2.png');
INSERT INTO `tbl_karyawan` VALUES (10, 'Budun', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Fotografer', 331, 'avatar1.png');

INSERT INTO `tbl_karyawan` VALUES (1, 'Jono Jondah', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Supir', 36, 'avatar1.png');

INSERT INTO `tbl_karyawan` VALUES (2, 'Tini Skak', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Programmer', 24, 'avatar3.png');

INSERT INTO `tbl_karyawan` VALUES (3, 'Jini oh jini', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Service technician', 262, 'avatar3.png');

INSERT INTO `tbl_karyawan` VALUES (4, 'Slamet', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Office Boy', 32, 'avatar1.png');

INSERT INTO `tbl_karyawan` VALUES (5, 'Sule Rharjo', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Akuntan', 29, 'avatar2.png');

INSERT INTO `tbl_karyawan` VALUES (6, 'Cristiano Ronaldinho', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Systems programmer', 32, 'avatar2.png');

INSERT INTO `tbl_karyawan` VALUES (7, 'Angelina Ozawa', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Sekertaris', 38, 'avatar3.png');

INSERT INTO `tbl_karyawan` VALUES (8, 'Titin', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Konsultan', 2823, 'avatar3.png');

INSERT INTO `tbl_karyawan` VALUES (9, 'Pongki', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Analis', 6413, 'avatar2.png');

INSERT INTO `tbl_karyawan` VALUES (10, 'Budun', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Fotografer', 331, 'avatar1.png');

Membuat Multiple Edit pada Table

1.Buat file koneksi.php yang berfugsi untuk menyambungkan aplikasi dengan database dan isikan dengan kode dibawah

<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'db_dewankomputer');

// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
?>

<?php

define('HOST','localhost');

define('USER','root');

define('PASS','');

define('DB1', 'db_dewankomputer');

// Buat Koneksinya

$db1 = new mysqli(HOST, USER, PASS, DB1);

isikan sesuai dengan host, user, password, dan nama database sobat. Untuk contoh di bawah ini saya berinama database dengan nama db_dewankomputer.

Jika sobat ingin tahu cara mengkoneksikan dengan dua database atau lebih dalam satu aplikasi maka sobat bisa kunjungi postingan dibawah ini

Cara Membuat Koneksi dengan Database MySQL bisa Dua atau Lebih Koneksi database/Multiple Connection dalam Satu Host maupun beda Host

2. Buat file index.php dan masukkan librari css dan js pada tag <head> seperti dibawah ini

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Untuk librari css dan js saya menggunakan online karena hanya untuk keperluan demo, jika sobat ingin membuatnya untuk development maka sobat perlu mendownloadnya terlebih dahulu atau sobat bisa mendowload bersama project ini diakhir postingan. Karena kita menggunakan Ajax jadi kita wajib untuk memasukkan jquery.js/jquery.min.js.

3. Masih di index.php, selanjutnya kita membuat susunan tabelnya. Tabel kita masukkan ke dalam tag <form>…</form>, hal ini karena kita nanti akan menggunakan ajax form submit. Itu saja sudah cukup karena nantinya kita akan membuat array dalam mengirim datanya sehingga kita tinggal me-loopingnya saja di form actionnya.

<div class="table-responsive">  
    <h3 align="center" class="mt-3 mb-3">Update Multiple Row pada Tabel Menggunakan Ajax PHP</h3><br />
    <form method="post" id="update_form">
        <div align="left">
            <button type="submit" name="multiple_update" id="multiple_update" class="btn btn-primary mb-4">
                <i class="fa fa-save"></i>  Multiple Update
            </button>
        </div>

        <div class="table-responsive">
            <table class="table table-bordered table-striped">
                <thead>
                    <th width="5%"></th>
                    <th width="20%">Name</th>
                    <th width="30%">alamat</th>
                    <th width="15%">jenkel</th>
                    <th width="20%">jabatan</th>
                    <th width="10%">umur</th>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </form>
</div>

<h3 align="center" class="mt-3 mb-3">Update Multiple Row pada Tabel Menggunakan Ajax PHP</h3><br />

<i class="fa fa-save"></i> Multiple Update

</button>

</div>

<thead>

<th width="30%">alamat</th>

<th width="15%">jenkel</th>

<th width="20%">jabatan</th>

</thead>

</table>

</div>

</form>

</div>

4. Selanjutnya membuat javascript/ajax untuk menampilkan datanya, ini masih di file index.php atau jika sobat ingin memisahkan tentu bisa membuat file .js yang kemudian di include-kan ke index.php.

<script>  
        $(document).ready(function(){
            fetch_data();
            function fetch_data(){
                $.ajax({
                    url:"ambil_data.php",
                    method:"POST",
                    dataType:"json",
                    success:function(data)
                    {
                        var html = '';
                        for(var count = 0; count < data.length; count++)
                        {
                            html += '<tr>';
                            html += '<td><input type="checkbox" id="'+data[count].id+'" data-nama_lengkap="'+data[count].nama_lengkap+'" data-alamat="'+data[count].alamat+'" data-jenkel="'+data[count].jenkel+'" data-jabatan="'+data[count].jabatan+'" data-umur="'+data[count].umur+'" class="check_box"  /></td>';
                            html += '<td>'+data[count].nama_lengkap+'</td>';
                            html += '<td>'+data[count].alamat+'</td>';
                            html += '<td>'+data[count].jenkel+'</td>';
                            html += '<td>'+data[count].jabatan+'</td>';
                            html += '<td>'+data[count].umur+'</td></tr>';
                        }
                        $('tbody').html(html);
                    }
                });
            }

            $('#update_form').on('click', '.check_box', function(){
                var html = '';
                if(this.checked)
                {
                    html = '<td><input type="checkbox" id="'+$(this).attr('id')+'" data-nama_lengkap="'+$(this).data('nama_lengkap')+'" data-alamat="'+$(this).data('alamat')+'" data-jenkel="'+$(this).data('jenkel')+'" data-jabatan="'+$(this).data('jabatan')+'" data-umur="'+$(this).data('umur')+'" class="check_box" checked /></td>';
                    html += '<td><input type="text" name="nama_lengkap[]" class="form-control" value="'+$(this).data("nama_lengkap")+'" /></td>';
                    html += '<td><input type="text" name="alamat[]" class="form-control" value="'+$(this).data("alamat")+'" /></td>';
                    html += '<td><select name="jenkel[]" id="jenkel_'+$(this).attr('id')+'" class="form-control"><option value="Laki-laki">Laki-laki</option><option value="Perempuan">Perempuan</option></select></td>';
                    html += '<td><input type="text" name="jabatan[]" class="form-control" value="'+$(this).data("jabatan")+'" /></td>';
                    html += '<td><input type="text" name="umur[]" class="form-control" value="'+$(this).data("umur")+'" /><input type="hidden" name="hidden_id[]" value="'+$(this).attr('id')+'" /></td>';
                } else {
                    html = '<td><input type="checkbox" id="'+$(this).attr('id')+'" data-nama_lengkap="'+$(this).data('nama_lengkap')+'" data-alamat="'+$(this).data('alamat')+'" data-jenkel="'+$(this).data('jenkel')+'" data-jabatan="'+$(this).data('jabatan')+'" data-umur="'+$(this).data('umur')+'" class="check_box" /></td>';
                    html += '<td>'+$(this).data('nama_lengkap')+'</td>';
                    html += '<td>'+$(this).data('alamat')+'</td>';
                    html += '<td>'+$(this).data('jenkel')+'</td>';
                    html += '<td>'+$(this).data('jabatan')+'</td>';
                    html += '<td>'+$(this).data('umur')+'</td>';            
                }
                $(this).closest('tr').html(html);
                $('#jenkel_'+$(this).attr('id')+'').val($(this).data('jenkel'));
            });

            $('#update_form').on('submit', function(event){
                event.preventDefault();
                if($('.check_box:checked').length > 0){
                    $.ajax({
                        url:"multiple_update.php",
                        method:"POST",
                        data:$(this).serialize(),
                        success:function(data){
                            alert('Data Berhasil Diubah');
                            fetch_data();
                        }
                    })
                }
            });
        });  
    </script>

$(document).ready(function(){

fetch_data();

function fetch_data(){

$.ajax({

url:"ambil_data.php",

method:"POST",

dataType:"json",

success:function(data)

{

var html = '';

for(var count = 0; count < data.length; count++)

{

html += '<tr>';

html += '<td><input type="checkbox" id="'+data[count].id+'" data-nama_lengkap="'+data[count].nama_lengkap+'" data-alamat="'+data[count].alamat+'" data-jenkel="'+data[count].jenkel+'" data-jabatan="'+data[count].jabatan+'" data-umur="'+data[count].umur+'" class="check_box" /></td>';

html += '<td>'+data[count].nama_lengkap+'</td>';

html += '<td>'+data[count].alamat+'</td>';

html += '<td>'+data[count].jenkel+'</td>';

html += '<td>'+data[count].jabatan+'</td>';

html += '<td>'+data[count].umur+'</td></tr>';

}

$('tbody').html(html);

}

});

}

$('#update_form').on('click', '.check_box', function(){

var html = '';

if(this.checked)

{

html = '<td><input type="checkbox" id="'+$(this).attr('id')+'" data-nama_lengkap="'+$(this).data('nama_lengkap')+'" data-alamat="'+$(this).data('alamat')+'" data-jenkel="'+$(this).data('jenkel')+'" data-jabatan="'+$(this).data('jabatan')+'" data-umur="'+$(this).data('umur')+'" class="check_box" checked /></td>';

html += '<td><input type="text" name="nama_lengkap[]" class="form-control" value="'+$(this).data("nama_lengkap")+'" /></td>';

html += '<td><input type="text" name="alamat[]" class="form-control" value="'+$(this).data("alamat")+'" /></td>';

html += '<td><select name="jenkel[]" id="jenkel_'+$(this).attr('id')+'" class="form-control"><option value="Laki-laki">Laki-laki</option><option value="Perempuan">Perempuan</option></select></td>';

html += '<td><input type="text" name="jabatan[]" class="form-control" value="'+$(this).data("jabatan")+'" /></td>';

html += '<td><input type="text" name="umur[]" class="form-control" value="'+$(this).data("umur")+'" /><input type="hidden" name="hidden_id[]" value="'+$(this).attr('id')+'" /></td>';

} else {

html += '<td>'+$(this).data('nama_lengkap')+'</td>';

html += '<td>'+$(this).data('alamat')+'</td>';

html += '<td>'+$(this).data('jenkel')+'</td>';

html += '<td>'+$(this).data('jabatan')+'</td>';

html += '<td>'+$(this).data('umur')+'</td>';

}

$(this).closest('tr').html(html);

$('#jenkel_'+$(this).attr('id')+'').val($(this).data('jenkel'));

});

$('#update_form').on('submit', function(event){

event.preventDefault();

if($('.check_box:checked').length > 0){

$.ajax({

url:"multiple_update.php",

method:"POST",

data:$(this).serialize(),

success:function(data){

alert('Data Berhasil Diubah');

fetch_data();

}

})

}

});

</script>

Penjelasan :

fetch_data();
function fetch_data(){
    $.ajax({
        url:"ambil_data.php",
        method:"POST",
        dataType:"json",
        success:function(data)
        {
            var html = '';
            for(var count = 0; count < data.length; count++)
            {
                html += '<tr>';
                html += '<td><input type="checkbox" id="'+data[count].id+'" data-nama_lengkap="'+data[count].nama_lengkap+'" data-alamat="'+data[count].alamat+'" data-jenkel="'+data[count].jenkel+'" data-jabatan="'+data[count].jabatan+'" data-umur="'+data[count].umur+'" class="check_box"  /></td>';
                html += '<td>'+data[count].nama_lengkap+'</td>';
                html += '<td>'+data[count].alamat+'</td>';
                html += '<td>'+data[count].jenkel+'</td>';
                html += '<td>'+data[count].jabatan+'</td>';
                html += '<td>'+data[count].umur+'</td></tr>';
            }
            $('tbody').html(html);
        }
    });
}

fetch_data();

function fetch_data(){

$.ajax({

url:"ambil_data.php",

method:"POST",

dataType:"json",

success:function(data)

{

var html = '';

for(var count = 0; count < data.length; count++)

{

html += '<tr>';

html += '<td>'+data[count].nama_lengkap+'</td>';

html += '<td>'+data[count].alamat+'</td>';

html += '<td>'+data[count].jenkel+'</td>';

html += '<td>'+data[count].jabatan+'</td>';

html += '<td>'+data[count].umur+'</td></tr>';

}

$('tbody').html(html);

}

});

}

Pada kode diatas merupakan script untuk menampilkan datanya ke dalam tabel. Pada contoh kali ini saya menggunakan ajax untuk menampilkan datanya. Tentu karena ini hanya contoh saya hanya menampilkannya standar tanpa searching dan pagination atau lainnya. Jika sobat ingin menggunakan untuk project yang sesungguhnya tentu dikombinasikan dengan searching dan pagination yang mana itu juga sudah sering saya bahas. Jika sobat masih bingung tentang searching dan pagination maka tinggal cari saja di pencarian blog ini.

$('#update_form').on('click', '.check_box', function(){
    var html = '';
    if(this.checked)
    {
        html = '<td><input type="checkbox" id="'+$(this).attr('id')+'" data-nama_lengkap="'+$(this).data('nama_lengkap')+'" data-alamat="'+$(this).data('alamat')+'" data-jenkel="'+$(this).data('jenkel')+'" data-jabatan="'+$(this).data('jabatan')+'" data-umur="'+$(this).data('umur')+'" class="check_box" checked /></td>';
        html += '<td><input type="text" name="nama_lengkap[]" class="form-control" value="'+$(this).data("nama_lengkap")+'" /></td>';
        html += '<td><input type="text" name="alamat[]" class="form-control" value="'+$(this).data("alamat")+'" /></td>';
        html += '<td><select name="jenkel[]" id="jenkel_'+$(this).attr('id')+'" class="form-control"><option value="Laki-laki">Laki-laki</option><option value="Perempuan">Perempuan</option></select></td>';
        html += '<td><input type="text" name="jabatan[]" class="form-control" value="'+$(this).data("jabatan")+'" /></td>';
        html += '<td><input type="text" name="umur[]" class="form-control" value="'+$(this).data("umur")+'" /><input type="hidden" name="hidden_id[]" value="'+$(this).attr('id')+'" /></td>';
    } else {
        html = '<td><input type="checkbox" id="'+$(this).attr('id')+'" data-nama_lengkap="'+$(this).data('nama_lengkap')+'" data-alamat="'+$(this).data('alamat')+'" data-jenkel="'+$(this).data('jenkel')+'" data-jabatan="'+$(this).data('jabatan')+'" data-umur="'+$(this).data('umur')+'" class="check_box" /></td>';
        html += '<td>'+$(this).data('nama_lengkap')+'</td>';
        html += '<td>'+$(this).data('alamat')+'</td>';
        html += '<td>'+$(this).data('jenkel')+'</td>';
        html += '<td>'+$(this).data('jabatan')+'</td>';
        html += '<td>'+$(this).data('umur')+'</td>';            
    }
    $(this).closest('tr').html(html);
    $('#jenkel_'+$(this).attr('id')+'').val($(this).data('jenkel'));
});

$('#update_form').on('click', '.check_box', function(){

var html = '';

if(this.checked)

{

html += '<td><input type="text" name="nama_lengkap[]" class="form-control" value="'+$(this).data("nama_lengkap")+'" /></td>';

html += '<td><input type="text" name="alamat[]" class="form-control" value="'+$(this).data("alamat")+'" /></td>';

html += '<td><select name="jenkel[]" id="jenkel_'+$(this).attr('id')+'" class="form-control"><option value="Laki-laki">Laki-laki</option><option value="Perempuan">Perempuan</option></select></td>';

html += '<td><input type="text" name="jabatan[]" class="form-control" value="'+$(this).data("jabatan")+'" /></td>';

html += '<td><input type="text" name="umur[]" class="form-control" value="'+$(this).data("umur")+'" /><input type="hidden" name="hidden_id[]" value="'+$(this).attr('id')+'" /></td>';

} else {

html += '<td>'+$(this).data('nama_lengkap')+'</td>';

html += '<td>'+$(this).data('alamat')+'</td>';

html += '<td>'+$(this).data('jenkel')+'</td>';

html += '<td>'+$(this).data('jabatan')+'</td>';

html += '<td>'+$(this).data('umur')+'</td>';

}

$(this).closest('tr').html(html);

$('#jenkel_'+$(this).attr('id')+'').val($(this).data('jenkel'));

});

Selanjutnya pada script diatas ini adalah script untuk mengubah isi pada record tabel menjadi sebuah input text atau combobox. Sobat juga bisa mengubah menjadi textarea, radio button, checkbox sesuai kebutuhan. Saya sudah memberikan caranya tinggal sobat kembangkan sendiri. Seperti yang terlihat pada script diatas, jika checkbox tercentang maka semua yang 1 baris dengan checkbox tersebut akan berubah menjadi input text dan jika tidak tercentang maka akan kembali hanya tulisan seperti sebelumnya.

$('#update_form').on('submit', function(event){
    event.preventDefault();
    if($('.check_box:checked').length > 0){
        $.ajax({
            url:"multiple_update.php",
            method:"POST",
            data:$(this).serialize(),
            success:function(data){
                alert('Data Berhasil Diubah');
                fetch_data();
            }
        })
    }
});

$('#update_form').on('submit', function(event){

event.preventDefault();

if($('.check_box:checked').length > 0){

$.ajax({

url:"multiple_update.php",

method:"POST",

data:$(this).serialize(),

success:function(data){

alert('Data Berhasil Diubah');

fetch_data();

}

})

}

});

Sedangkan pada script terakhir pada javascriptnya kita membuat ajax yang berfungsi sebagai action dari form tersebut. karena kita menggunakan ajax maka kita bisa membuatnya lebih enak dipakai karena aplikasi kita juga bisa kita ubah tanpa harus merefresh halaman. Pada script diatas kita berikan validasi jika checkbox ada yang tercentang maka ajax akan dijalankan, dan jika tidak ada yang tercentang maka tidak usah dijalankan. Dan jika berhasil diupdate semua datanya maka kita memanggil ‘fetch_data();’ yang berfungsi untuk merefresh datanya tanpa harua loading halaman. Inilah fungsinya kita membuat function fetch_data() jadi kita tidak perlu menuliskan datanya berkali-kali, karena kita cukup membuat function dan kita panggil saat load, update berhasil maupun jika ada tombol saat berhasil dihapus kita cukup memanggil function fetch_data() dan data otomatis akan terefresh.

5. Melihat dari javascript pada nomer 4, selanjutnya kita perlu membuat file ambil_data.php, karena kita menggunakan native maka hanya perlu membuat file saja jika sobat menggunakan cara OOP/MVC bahkan jika sobat menggunakan framework seperti CodeIgniter, Laravel, dll maka sobat hanya tinggal perlu menyesuaikan backend aplikasinya saja yang mana hasil ajaxnya adalah sebuah json. Caranya adalah sebagai berikut

<?php
include 'koneksi.php';

$query = "SELECT * FROM tbl_karyawan ORDER BY id DESC";
$dewan1 = $db1->prepare($query);
$dewan1->execute();
$res1 = $dewan1->get_result();

if ($res1->num_rows > 0) {
    while ($row = $res1->fetch_assoc()) {
  		$data[] = $row;
 	}
 	echo json_encode($data);
}
?>

<?php

include 'koneksi.php';

$query = "SELECT * FROM tbl_karyawan ORDER BY id DESC";

$dewan1 = $db1->prepare($query);

$dewan1->execute();

$res1 = $dewan1->get_result();

if ($res1->num_rows > 0) {

while ($row = $res1->fetch_assoc()) {

$data[] = $row;

}

echo json_encode($data);

}

6. Selanjut adalah membuat file untuk actionnya yaitu sebagai berikut

<?php
include 'koneksi.php';

if(isset($_POST['hidden_id'])){
   $nama_lengkap =$_POST['nama_lengkap'];
   $alamat = $_POST['alamat'];
   $jenkel = $_POST['jenkel'];
   $jabatan = $_POST['jabatan'];
   $umur = $_POST['umur'];
   $id = $_POST['hidden_id'];

   for($count = 0; $count < count($id); $count++){
    $query = "UPDATE tbl_karyawan SET nama_lengkap=?, alamat=?, jenkel=?, jabatan=?, umur=? WHERE id=?";
    $dewan1 = $db1->prepare($query);
    $dewan1->bind_param('ssssii', $nama_lengkap[$count], $alamat[$count], $jenkel[$count], $jabatan[$count], $umur[$count], $id[$count]);
    $dewan1->execute();
   }
}
?>

<?php

include 'koneksi.php';

if(isset($_POST['hidden_id'])){

$nama_lengkap =$_POST['nama_lengkap'];

$alamat = $_POST['alamat'];

$jenkel = $_POST['jenkel'];

$jabatan = $_POST['jabatan'];

$umur = $_POST['umur'];

$id = $_POST['hidden_id'];

for($count = 0; $count < count($id); $count++){

$query = "UPDATE tbl_karyawan SET nama_lengkap=?, alamat=?, jenkel=?, jabatan=?, umur=? WHERE id=?";

$dewan1 = $db1->prepare($query);

$dewan1->bind_param('ssssii', $nama_lengkap[$count], $alamat[$count], $jenkel[$count], $jabatan[$count], $umur[$count], $id[$count]);

$dewan1->execute();

}

Seperti yang bisa dilihat diatas kita melooping query update-nya karena saat kita mengirimkan datanya pun adalah sebagai array. Untuk penulisan querynya pun saya selalu menggunakan prepare statement karena cara ini adalah cara paling aman untuk menghindari sql injection. Namun akan lebih aman lagi jika kita menggunakan Header Ajax dan Session Login.

7. Jika kita jalankan maka akan menjadi seperti gambar dibawah

Saat kita load pertama-kali maka akan normal seperti biasa namun jika kita klik checkbox maka yang tadinya hanya label berubah menjadi input text dan combobox. Sobat pun bisa membuatnya berubah menjadi radio button, checkbox, textarea atau yang lainnya sesuai kebutuhan. Dan jika klik tombol Multiple Update maka 3 data yang dicentang akan terupdate otomatis dan akan merefresh tanpa me-loading halaman karena kita menggunakan Ajax.

Sekian postingan saya sobat bisa lihat postingan saya yang lain banyak juga yang berhubungan dengan Ajax yang mungkin bisa di masukkan ke dalam project sobat, sampai ketemu lagi pada postingan selanjutnya.

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

6 thoughts on “Cara Membuat Multiple Edit Tabel dengan JQuery PHP”

Ilham Akbar says:

November 2, 2020 at 8:26 am

Makasih banget, fungsi multiple update nya sangat membantu
Walaupun di demo online nya agak kurang sesuai, tapi pas saya download dan coba di localhost saya berjalan sempurna
Semoga lebih baik lagi kedepannya. Sukses Selalu

Reply
Indra says:

November 16, 2020 at 1:18 pm

Terima Kasih,
Kalau mau menggunakan database yang sudah ada, apa saja yang harus dirubahnya?

Reply
Pingback: Cara Membuat Tabel yang bisa Diedit dengan JQuery TableEdit PHP - Dewan Komputer
abu abdillah says:

February 27, 2022 at 6:14 am

tanya bang…. saya sudah buka projectnya dan berhasil…. tapi saat saya membuang misalnya kolom umur dan semua yang terkait dg kolom umur, jadinya program tidak bs submit ke databasenya.. mohon pencerahan

Reply
1. dewan says:
  
  April 6, 2022 at 12:02 pm
  
  pastikan di bind_param ‘s’ atau ‘i’ sesuai dengan jumlah parameternya
  contoh :
  ‘ssssii’ berarti terdapat 6 parameter
  
  Reply
yhono says:

January 25, 2023 at 1:59 pm

tanya bang kalau mau tambahkan datatables yg dilengkapi dengan form pencarian dan sorting bagaimana ya…. terimah kasih atas source codenya…..

Reply