Membuat Drag & Drop Baris Tabel Dengan PHP dan Mysql

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.

Baca Artikel Lain ✨

📰 1. Membuat Notifikasi Realtime dengan php dan Jquery read more

📰 2. Cara Membuat Hide/Show Input Password dengan Javascript dan Bootstrap read more

📰 3. Cara Mencegah Multiple Submit dan Cara Menggunakan Spinner Bootstrap sebagai Indicator Loading pada Php read more

Membuat Drag & Drop Tabel dan Prosesnya dengan Php dan Mysql

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.

  


  <!DOCTYPE html>
  <html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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 Datatable</h3>
  
          <div class="card">
              <div class="card-body">
                  <table id="example" class="table table-striped">
                      <thead>
                          <tr>
                              <th>#</th>
                              <th>Judul Kegiatan</th>
                              <th>Keterangan Kegiatan</th>
                          </tr>
                      </thead>
                      <tbody class="row_position">
                      <?php
          
                      //koneksi ke database
                      $mysqli = new mysqli("localhost", "root", "", "latihan");
          
                      //mengabil data
                      $sql = "SELECT * FROM sorting_items ORDER BY position_order";
  
                      $users = $mysqli->query($sql);
                      $no = 1;
                      while($user = $users->fetch_assoc()){
          
          
                      ?>
                          <tr  id="<?php echo $user['id'] ?>">
                              <td><?php echo $no++; ?></td>
                              <td><?php echo $user['title'] ?></td>
                              <td><?php echo $user['description'] ?></td>
                          </tr>
                      <?php } ?>
                      </tbody>
                  </table>
              </div>
          </div>
      </div> <!-- container / end -->
      <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">
  
          //script datatable
          $(document).ready(function () {
              $("#example").DataTable({});
          });
  
          //script untuk sorting tabel
          $(".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);
              }
          });
      
      
          //script untuk menyimpan data
          function updateOrder(data) {
              $.ajax({
                  url:"update.php",
                  type:'post',
                  data:{position:data},
                  success:function(){
  
                      //jika berhasil tampilkan pesan
                      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.

  


  <?php 

  $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.

Preview Hasil Akhir

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.

Sahretech

Membuat Drag & Drop Row Tabel Dengan PHP dan Mysql

Membuat Drag & Drop Tabel dan Prosesnya dengan Php dan Mysql

No comments

Kategori Pemrograman

Popular

Facebook