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
|
1 2 3 4 5 6 7 8 9 10 |
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
|
1 2 3 4 5 6 7 8 9 10 |
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
|
1 2 3 4 5 6 7 8 9 |
<?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
2. Buat file index.php dan masukkan librari css dan js pada tag <head> seperti dibawah ini
|
1 2 3 4 |
<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>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<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> |
4. Selanjutnya kita membuat javascriptnya seperti dibawah yang diletakkan pada file index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?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.
Baca juga :
Cara Membuat Multiple Edit Tabel dengan JQuery PHP
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :
kalau mau buat tabelnya responsive tampilan di smartphone biar menurun gimana kak?
kan selama ini cuma di buat overflow: auto; jadi cuma geser kekanan
tinggal tambah cssnya saja mas untuk sekarang blum ada postingannya mungkin lain kali akan saya bahas contohnya
Agan dewan, ane mau tanya untuk “http://js/jquery.tabledit.min.js” itu salah satu plugin dari jquery atau itu bikin sendiri gan.
Thx
itu salah satu plugin dari jquery
1. index.php kurang koneksi.php
2. tabel hasilnya berhenti di kolom umur, selanjutnya edit dan delete tidak muncul
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