Cara Membuat Tabel yang bisa Diedit dengan JQuery TableEdit PHP

March 28, 2019

6 Comments

Cara Membuat Tabel yang bisa diedit dengan Jquery TableEdit PHP – Hai ketemu lagi dengan saya dan pada kesempatan kali ini saya akan membahas tentang cara membuat tabel yang bisa di edit menggunakan JQuery TableEdit menggunakan javascript ajax dan php. Terkadang kita ingin agar user edit data melalui tabelnya saja jadi tidak perlu ke menu baru untuk mempermudah pengguna juga dalam mengedit data. Berikut adalah cara membuat tabel yang bisa diedit.

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');

Cara Membuat Tabel yang bisa Diedit

Setelah database sudah dibuat selanjutnya kita baru membuat datanya ditampilkan ke dalam tabel dan membuat sortnya. Berikut langkah-langkahnya :

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/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/jquery.tabledit.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 file index.php selanjutnya isikan script dibawah pada tag <body>

<nav class="navbar navbar-dark bg-primary">
  <a class="navbar-brand" style="color: #fff;" href="index.php">
    Dewan Komputer
  </a>
</nav>

<div class="container">  
  <div class="table-responsive">  
    <h3 align="center">Live Table Data Edit Delete using Tabledit Plugin in PHP</h3><br />  
    <table id="editable_table" class="table table-bordered table-striped">
       <thead>
          <tr>
           <th>ID</th>
           <th>Nama Lengkap</th>
           <th>Alamat</th>
           <th>Jenkel</th>
           <th>Jabatan</th>
           <th>Umur</th>
          </tr>
       </thead>
       <tbody>
          <?php
            include 'koneksi.php';
            $query = "SELECT * FROM tbl_karyawan ORDER BY id ASC";
            $dewan1 = $db1->prepare($query);
            $dewan1->execute();
            $res1 = $dewan1->get_result();
            while ($row = $res1->fetch_assoc()) {
              echo '
              <tr>
               <td>'.$row["id"].'</td>
               <td>'.$row["nama_lengkap"].'</td>
               <td>'.$row["alamat"].'</td>
               <td>'.$row["jenkel"].'</td>
               <td>'.$row["jabatan"].'</td>
               <td>'.$row["umur"].'</td>
              </tr>
              ';
           }
          ?>
       </tbody>
    </table>
  </div>  
</div>

Dewan Komputer

</a>

</nav>

<h3 align="center">Live Table Data Edit Delete using Tabledit Plugin in PHP</h3><br />

<thead>

<tr>

<th>Nama Lengkap</th>

<th>Alamat</th>

<th>Jenkel</th>

<th>Jabatan</th>

</tr>

</thead>

<tbody>

<?php

include 'koneksi.php';

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

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

$dewan1->execute();

$res1 = $dewan1->get_result();

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

echo '

<tr>

<td>'.$row["nama_lengkap"].'</td>

<td>'.$row["alamat"].'</td>

<td>'.$row["jenkel"].'</td>

<td>'.$row["jabatan"].'</td>

</tr>

}

</tbody>

</table>

</div>

4. Selanjutnya kita membuat javascriptnya seperti dibawah yang diletakkan pada file index.php

<script>  
  $(document).ready(function(){  
    $('#editable_table').Tabledit({
      url:'action.php',
      columns:{
        identifier:[0, "id"],
        editable:[[1, 'nama_lengkap'], [2, 'alamat'], [3, 'jenkel'], [4, 'jabatan'], [5, 'umur']]
      },
      restoreButton:true,
      onSuccess:function(data, textStatus, jqXHR){
        if(data.action == 'delete'){
          $('#'+data.id).remove();
        }
      }
    });
  });
</script>

$(document).ready(function(){

$('#editable_table').Tabledit({

url:'action.php',

columns:{

identifier:[0, "id"],

editable:[[1, 'nama_lengkap'], [2, 'alamat'], [3, 'jenkel'], [4, 'jabatan'], [5, 'umur']]

restoreButton:true,

onSuccess:function(data, textStatus, jqXHR){

if(data.action == 'delete'){

$('#'+data.id).remove();

}

});

</script>

Sesuaikan kolom dengan project sobat.

5. Kemudian buat file action.php yang berfungsi untuk menyimpan script untuk update/delete data. Isinya adalah sebagai berikut

<?php  
include 'koneksi.php';

$input = filter_input_array(INPUT_POST);

$nama_lengkap = mysqli_real_escape_string($db1, $input["nama_lengkap"]);
$alamat = mysqli_real_escape_string($db1, $input["alamat"]);
$jenkel = mysqli_real_escape_string($db1, $input["jenkel"]);
$jabatan = mysqli_real_escape_string($db1, $input["jabatan"]);
$umur = mysqli_real_escape_string($db1, $input["umur"]);
$id = mysqli_real_escape_string($db1, $input["id"]);

if($input["action"] === 'edit'){
	$query = "UPDATE tbl_karyawan SET nama_lengkap=?, alamat=?, jenkel=?, jabatan=?, umur=? WHERE id=?";
	$dewan1 = $db1->prepare($query);
	$dewan1->bind_param('sssssi', $nama_lengkap, $alamat, $jenkel, $jabatan, $umur, $id);
	$dewan1->execute();
}

if($input["action"] === 'delete'){
	$query = "DELETE FROM tbl_karyawan WHERE id=?";
	$dewan1 = $db1->prepare($query);
	$dewan1->bind_param('i', $id);
	$dewan1->execute();
}

echo json_encode($input);
?>

<?php

include 'koneksi.php';

$input = filter_input_array(INPUT_POST);

$nama_lengkap = mysqli_real_escape_string($db1, $input["nama_lengkap"]);

$alamat = mysqli_real_escape_string($db1, $input["alamat"]);

$jenkel = mysqli_real_escape_string($db1, $input["jenkel"]);

$jabatan = mysqli_real_escape_string($db1, $input["jabatan"]);

$umur = mysqli_real_escape_string($db1, $input["umur"]);

$id = mysqli_real_escape_string($db1, $input["id"]);

if($input["action"] === 'edit'){

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

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

$dewan1->bind_param('sssssi', $nama_lengkap, $alamat, $jenkel, $jabatan, $umur, $id);

$dewan1->execute();

}

if($input["action"] === 'delete'){

$query = "DELETE FROM tbl_karyawan WHERE id=?";

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

$dewan1->bind_param('i', $id);

$dewan1->execute();

}

echo json_encode($input);

6. Selanjutnya jalankan project sobat maka akan muncul seperti gambar dibawah

Jika sobat sudah mengikuti langkah-langkah diatas seharusnya sudah benar dan hasilnya akan seperti gambar diatas. Sekian postingan saya tentang Cara Membuat Tabel yang bisa Diedit dengan JQuery TableEdit PHP. Jika ada salah kata saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah.

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

Sampai jumpa pada postingan saya selanjutnya..

6 thoughts on “Cara Membuat Tabel yang bisa Diedit dengan JQuery TableEdit PHP”

Ari Prasetyawan says:

December 6, 2019 at 8:04 am

kalau mau buat tabelnya responsive tampilan di smartphone biar menurun gimana kak?

kan selama ini cuma di buat overflow: auto; jadi cuma geser kekanan

Reply
1. dewan says:
  
  December 6, 2019 at 3:46 pm
  
  tinggal tambah cssnya saja mas untuk sekarang blum ada postingannya mungkin lain kali akan saya bahas contohnya
  
  Reply
Ade Tri says:

November 23, 2020 at 10:53 pm

Agan dewan, ane mau tanya untuk “http://js/jquery.tabledit.min.js” itu salah satu plugin dari jquery atau itu bikin sendiri gan.

Thx

Reply
1. dewan says:
  
  November 24, 2020 at 4:19 am
  
  itu salah satu plugin dari jquery
  
  Reply
Ester says:

February 15, 2021 at 10:12 am

1. index.php kurang koneksi.php
2. tabel hasilnya berhenti di kolom umur, selanjutnya edit dan delete tidak muncul

Reply
1. dewan says:
  
  February 24, 2021 at 1:46 am
  
  kalo tombol edit dan delete tidak muncul mungkin js jquery & jquery.tabledit.min ada yg kurang atau mungkin javascriptnya ada yg kurang karena nambah tombolnya otomatis lewat script javascriptnya
  
  Reply