Cara Membuat DataTables Serverside Join Tabel Dengan Fitur Hapus Data, Menggunakan PHP dan MySQL
Initekno.com – Kembali lagi pada tutorial datatables, dan pokoknya dalam situs ini kamu akan diajak membuat datatables dengan berbagai macam fitur. Sebab tanpa kamu sadari ternyata penggunaan datatables serverside cukup membuat beban kerja server semakin ringan. Khususnya yang mempunyai system dengan trafik pemrosesan data yang tinggi.
Kali ini saya akan membagikan artikel datatables dengan fitur hapus data. Tetapi kali ini cara tersebut berbeda, kenapa berbeda?.. kali ini saya menggunakan checkbook, untuk proses cepatnya. Bayangkan jika kamu akan menghapus data dalam jumlah ribuan, dan data tersebut masih dipilah-pilah, tentu kamu akan langsung pucat seketika. hahaha..
Baik, langsung saja buat yang belom baca artikel tentang datatables saya diseri seri sebelumnya silahkan baca terlebih dahulu.
Daftar Tutorial DataTables Join Table, Keseluruhan :
- Datatables Serverside Join Table
- Datatables Serverside Join Table Page Resize
- Datatables Serverside Join Table Multi Dinamis Atribut
- Datatables Serverside Scroller Join 2 Tabel
- Datatables Serverside Join Tabel Hapus Data
Untuk artikel sebelum ini yaitu seri 4 bisa dilihat disini:
Cara Membuat Datatables Scroller Join ke 2 Tabel dengan PHP dan MySQL
Tanpa basa basi mari kita langsung koding saja. Ketikkan konfigurasi database seperti berikut ini:
1 2 3 4 5 6 7 8 9 | <?php /* database konfigurasi */ $servername = "localhost"; $username = "root"; $password = ""; $dbname = "db_appmegatim1"; $conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error()); ?> |
Simpan kode diatas, dan berinama dengan config_database.php. Kemudian simpan pada direktori folder website kamu. File ini nantinya akan kita panggil dalam server_data.php dan hapus_data.php
Langkah selanjutnya membuat server datanya sekaligus query ke tabelnya.
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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <?php require_once 'config_database.php'; //load konfigurasi koneksi kedatabase $requestData= $_REQUEST; $columns = array( 0 => 'nama_kelas', 1 => 'nama_status_input', 2 => 'code_devisi_tentor' ); $sql = " SELECT trx_monitoring.id_monitoring, trx_kelas.nama_kelas, status_input.nama_status_input, code_devisi_tentor "; $sql.= " FROM trx_monitoring"; $sql.= " JOIN trx_kelas ON trx_monitoring.trx_id_kelas=trx_kelas.id_kelas"; $sql.= " JOIN status_input ON trx_monitoring.status_monitoring=status_input.id_status_input"; $query=mysqli_query($conn, $sql) or die("data_server.php: get dataku"); $totalData = mysqli_num_rows($query); $totalFiltered = $totalData; //---------------------------------------------------------------------------------- //query sql join 2 tabel $sql = " SELECT trx_monitoring.id_monitoring, trx_kelas.nama_kelas, status_input.nama_status_input, code_devisi_tentor "; $sql.= " FROM trx_monitoring"; $sql.= " JOIN trx_kelas ON trx_monitoring.trx_id_kelas=trx_kelas.id_kelas"; $sql.= " JOIN status_input ON trx_monitoring.status_monitoring=status_input.id_status_input"; $sql.= " WHERE 1=1"; if( !empty($requestData['search']['value']) ) { //---------------------------------------------------------------------------------- $sql.=" AND ( nama_kelas LIKE '".$requestData['search']['value']."%' "; $sql.=" OR nama_status_input LIKE '".$requestData['search']['value']."%' "; $sql.=" OR code_devisi_tentor LIKE '".$requestData['search']['value']."%' )"; } //---------------------------------------------------------------------------------- $query=mysqli_query($conn, $sql) or die("data_server.php: get dataku"); $totalFiltered = mysqli_num_rows($query); $sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; $query=mysqli_query($conn, $sql) or die("data_server.php: get dataku"); //---------------------------------------------------------------------------------- $data = array(); $i=1+$requestData['start'];//tambahan while( $row=mysqli_fetch_array($query) ) { $nestedData=array(); //tambahan $nestedData[] = "<input type='checkbox' class='deleteRow' value='".$row['id_monitoring']."' /> #".$i ; $nestedData[] = $row["nama_kelas"]; $nestedData[] = $row["nama_status_input"]; $nestedData[] = $row["code_devisi_tentor"]; $data[] = $nestedData; $i++;//tambahan } //---------------------------------------------------------------------------------- $json_data = array( "draw" => intval( $requestData['draw'] ), "recordsTotal" => intval( $totalData ), "recordsFiltered" => intval( $totalFiltered ), "data" => $data ); //---------------------------------------------------------------------------------- echo json_encode($json_data); ?> |
Simpan dengan nama data_server.php
Nah.. kali ini agar data bisa terhapus, maka buat juga file baru dan simpan dengan nama hapus_data.php ketik kode seperti berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?php //load konfigurasi koneksi kedatabase require_once 'config_database.php'; $data_ids = $_REQUEST['data_ids']; $data_id_array = explode(",", $data_ids); if(!empty($data_id_array)) { foreach($data_id_array as $id) { $sql = "DELETE FROM trx_monitoring "; $sql.=" WHERE id_monitoring = '".$id."'"; $query=mysqli_query($conn, $sql) or die("data_server.php: get dataku"); } } ?> |
Langkah kita sudah hampir selesai nih. Sekarang tinggal buat file index.php sebagai file Utama yang akan di eksekusi oleh browser, sehingga menampilkan output berupa data. Ketik kode berikut ini :
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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | <!DOCTYPE html> <html> <title>Initekno - Datatables Serverside Join tabel #Hapus Record</title> <head> <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css"> <script type="text/javascript" language="javascript" src="js/jquery.js"></script> <script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script> <!--google font--> <link href="https://www.initekno.com/cloudme.fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet"> <script type="text/javascript" language="javascript" > $(document).ready(function() { var dataTable = $('#dataku').DataTable( { "processing": true, "serverSide": true, "columnDefs": [ { "targets": 0, "orderable": false, "searchable": false } ], "ajax":{ url :"data_server.php", type: "post", error: function(){ $(".dataku-error").html(""); $("#dataku").append('<tbody class="dataku-error"><tr><th colspan="3">Tidak ada data untuk ditampilkan</th></tr></tbody>'); $("#dataku-error-proses").css("display","none"); } } } ); $("#bulkDelete").on('click',function() { var status = this.checked; $(".deleteRow").each( function() { $(this).prop("checked",status); }); }); $('#deleteTriger').on("click", function(event){ if( $('.deleteRow:checked').length > 0 ){ var ids = []; $('.deleteRow').each(function(){ if($(this).is(':checked')) { ids.push($(this).val()); } }); var ids_string = ids.toString(); $.ajax({ type: "POST", url: "hapus_data.php", data: {data_ids:ids_string}, success: function(result) { dataTable.draw(); }, async:false }); } }); } ); </script> <style> div.container { margin: 0 auto; max-width:760px; } div.header { margin: 100px auto; line-height:30px; max-width:760px; } body { background: #f7f7f7; color: #333; font-size: 15px; font-family: 'Rubik', sans-serif; /*google font*/ } </style> </head> <body> <div class="header"><h1>Initekno - Datatables Serverside Join tabel #Hapus Data</h1></div> <div class="container"> <table id="dataku" cellpadding="0" cellspacing="0" border="0" class="display" width="100%"> <thead> <tr> <th><input type="checkbox" id="bulkDelete" /> <button id="deleteTriger">Hapus Data</button></th> <th>kelas</th> <th>status input</th> <th>kode</th> </tr> </thead> </table> </div> </body> </html> |
Seperti pada tutorial sebelumnya, bahwa file index.php ini berisi berbagai kode komponen, seperti css, kerangka html dan JavaScript, dan ini hanya seperti menulis kode yang diulang-ulang saja ko’ tenang, hehe. Sekarang kamu sudah bisa menjalankan kodingan diatas. Jika terjadi error maka coba teliti kembali ya.
Eits, jangan lupa untuk membuat struktur tabelnya seperti berikut ini, Karena query diatas menggunakan berbagai data pada table yang terpisah, artinya join table, maka kamu perlu membuat tabel sejumlah 3 table.
1. Tabel status input
1 2 3 4 | CREATE TABLE `status_input` ( `id_status_input` int(11) NOT NULL, `nama_status_input` varchar(15) COLLATE utf8mb4_bin NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin; |
2. Tabel kelas
1 2 3 4 5 6 7 8 | CREATE TABLE `trx_kelas` ( `id_kelas` int(11) NOT NULL, `nama_kelas` varchar(20) NOT NULL, `trx_id_lokasi` int(11) NOT NULL, `code_devisi_lokasi` int(11) NOT NULL, `trx_id_wilayah` int(11) NOT NULL, `created_at` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp() ) ENGINE=InnoDB DEFAULT CHARSET=latin1; |
3. Tabel monitoring
1 2 3 4 5 6 7 8 9 | CREATE TABLE `trx_monitoring` ( `id_monitoring` int(11) NOT NULL, `code_lok` varchar(3) NOT NULL, `trx_id_kelas` int(11) NOT NULL, `trx_id_pekan` int(11) NOT NULL, `status_monitoring` int(11) NOT NULL, `code_devisi_tentor` varchar(4) NOT NULL, `created_at` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp() ) ENGINE=InnoDB DEFAULT CHARSET=latin1; |
Ketiga komponen tabel diatas sama persis dengan yang ada pada tutorial datatables serverside pertama dan selanjutnya, tabel ini akan saya gunakan untuk tutorial datatables mendatang. Namun jika kamu sudah mengikuti tutorial sebelumnya, maka langkah ini diabaikan saja.
Sekian semoga bermanfaat, jangan lupa untuk melihat demo pada link dibawah. Untuk mendownload komponen lengkap bisa klik button download project.