Halo semuanya, kembali lagi di sahretech. Baiklah pada kesempatan kali ini saya akan berbagi
tutorial bagaimana cara membuat tabel yang data di dalamnya dapat didrag and drop. Fitur ini sangat berguna dan wajib dipelajari. Ayo ikuti selengkapnya berikut ini!.
Pada Tutorial kali ini kita akan membuat sebuah halaman web sederhana yang menampilkan tabel dan data kegiatan di dalamnya. Setiap baris tabel dapat didrag n drop ke atas atau ke bawah agar dapat disusun sesuai dengan skala prioritas kegiatannya masing-masing.
Pada tutorial kali ini, kita akan menggunakan php,
mysql, bootstrap, datatable, dan jquery. Dari mulai tampilan hingga proses data ke dalam database. Untuk preview akhir dari tutorial kali ini bisa kalian scroll ke bagian paling bawah untuk melihat hasil akhirnya.
1. Buatlah sebuah database baru dengan nama latihan di dalam phpmyadmin. Lalu buat sebuah tabel di dalamnya dengan menjalankan perintah query di bawah ini.
CREATE TABLE IF NOT EXISTS `sorting_items` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`title` varchar(120) NOT NULL,
`description` text NOT NULL,
`position_order` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
Setelah tabel berhasil dibuat, jangan lupa juga untuk menambah
beberapa data dummy ke dalam tabel tersebut untuk proses testingnya nanti
2. Buatlah sebuah folder baru di dalam htdocs dengan nama drag-n-drop-table atau bebas. Lalu buat sebuah file di dalamnya dengan nama index.php. Ikuti scriptnya seperti di bawah ini.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css"/>
head>
<body>
<div class="container mt-5">
<h3 class="alert alert-info mb-4">Tutorial Membuat Tabel Drag n Drop dengan Datatableh3>
<div class="card">
<div class="card-body">
<table id="example" class="table table-striped">
<thead>
<tr>
<th>#th>
<th>Judul Kegiatanth>
<th>Keterangan Kegiatanth>
tr>
thead>
<tbody class="row_position">
$mysqli = new mysqli("localhost", "root", "", "latihan");
$sql = "SELECT * FROM sorting_items ORDER BY position_order";
$users = $mysqli->query($sql);
$no = 1;
while($user = $users->fetch_assoc()){
?>
<tr id="">
<td> echo $no++; ?>td>
<td> echo $user['title'] ?>td>
<td> echo $user['description'] ?>td>
tr>
} ?>
tbody>
table>
div>
div>
div>
<script src="https://code.jquery.com/jquery-3.5.1.js">script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js">script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">script>
<script type="text/javascript">
$(document).ready(function () {
$("#example").DataTable({});
});
$(".row_position").sortable({
delay: 150,
stop: function() {
var selectedData = new Array();
$('.row_position>tr').each(function() {
selectedData.push($(this).attr("id"));
});
console.log(selectedData);
updateOrder(selectedData);
}
});
function updateOrder(data) {
$.ajax({
url:"update.php",
type:'post',
data:{position:data},
success:function(){
alert('perubahan data berhasil disimpan!');
}
})
}
script>
body>
html>
3. Buatlah sebuah file baru dengan nama update.php di dalam folder drag-n-drop-table. Lalu ikuti scriptnya seperti di bawah ini.
$mysqli = new mysqli("localhost", "root", "", "latihan");
$position = $_POST['position'];
$i=1;
foreach($position as $k=>$v){
$sql = "Update sorting_items SET position_order=".$i." WHERE id=".$v;
$mysqli->query($sql);
$i++;
}
?>
Ok, sampai disini semua tahap sudah kita selesaikan, saatnya uji coba aplikasi. Silahkan jalankan localhost/drag-n-drop-table dengan browser. Jika berhasil maka tampilannya akan tampak seperti di bawah ini.
Gimana, susah atau gampang guys?. Ok, sekian tutorial kali ini tentang cara membuat drag & drop tabel dan prosesnya dengan php dan mysql. Semoga membantu, jika ada kendala boleh tanya langsung di bawah atau tanya langsung ke fanspage sahretech. Sekian dan sampai jumpa di tutorial pemrograman asik lainnya.
