Tutorial Sortable dengan SortableJS
Halo teman teman dumenity, kembali lagi di panduan panduan pemrogramman web Source Code Aplikasi, kali ini kita akan belajar diantara package Javascript yang bernama sortablejs, sortablejs ini yaitu pustaka JavaScript bagi drag dan drop Data yang dapat disetel ulang di peramban modern dan perlengkapan sentuh atau touchscreen. Sortable ini tak menggunakan jQuery. Package ini mendukung pelbagai framework Javascript seperti Meteor, AngularJS, React, Polymer, Knockout, Vue dan segala framework CSS, misalnya Bootstrap. Yuk seketika saja kita praktekan Panduan Sortable table dengan SortableJS teman teman.
sebelumnya kita bikin folder dan bikin file index.html.
dan ketikan struktur html berikut.
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title> SortableJS </title>
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css/>
</head>
<body>
<div class=container>
<div class=row>
<h1 class=text-center mb-2>Sortablejs</h1>
<div class=col-12>
<table class=table table-bordered table-hover table-Primary>
<thead>
<tr>
<th scope=col>Nama</th>
<th scope=col>Tempat tinggal</th>
<th scope=col>Email</th>
</tr>
</thead>
<tbody id=items>
<tr>
<td>Risman Hakim</td>
<td>Bogor</td>
<td>Risman@mail.com</td>
</tr>
<tr>
<td>Eky Zulianto Arif</td>
<td>Serang</td>
<td>Eky@mail.com</td>
</tr>
<tr>
<td>Reza Syahputra</td>
<td>Depok</td>
<td>Syahputra@mail.com</td>
</tr>
</tbody>
</table>
</table>
</div>
</div>
</div>
</body>
</html>
yang hasilnya seperti di bawah ini.
setelah itu teman teman dapat ke terminal atau command promptnya, jangan lupa arah kan ke root folder teman teman.
kalian dapat inisialisai kan dulu, cara ketikan npm init di terminal
setelah itu kita install package nya, ketikan ini di terminal kalian.
npm install sortablejs --save
bila telah karenanya akan seperti ini struktur folder nya.
setelah itu panggil script nya di index.html
oke berikutnya kita bikin script nya seperti berikut.
jalan kan index.html di webrowser dan coba teman teman sort datanya.
awalnya datanya seperti di atas, apabila kita drag data yang bernama risman ke row ke dua, karenanya akan berpindah seperti berikut.
nah gampang bukan teman teman. demikianlah Panduan Sortable table dengan SortableJS, semoga bermanfaat yah teman teman.
Sumber https://kursuswebsite.org
