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 :

Untuk artikel sebelum ini yaitu seri 4 bisa dilihat disini:

Cara Membuat DataTables Server Side dengan PHP, MySQL join Tabel dan Ajax

Tanpa basa basi mari kita langsung koding saja. Ketikkan konfigurasi database seperti berikut ini:

<?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());
?>

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

<?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);
?>

<?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:

<?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");
	}
}
?>

<?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 :

<!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>

<!DOCTYPE html>

<html>

<title>Initekno - Datatables Serverside Join tabel #Hapus Record</title>

<head>

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

<thead>

<tr>

<th><input type="checkbox" id="bulkDelete" /> <button id="deleteTriger">Hapus Data</button></th>

<th>kelas</th>

<th>status input</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

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;

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

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;

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

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;

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.

[maxbutton id=”2″ url=”https://www.initekno.com/demo/datatables_delete_data/” text=”DEMO” ] [maxbutton id=”2″ url=”https://www.initekno.com/download/datatables_delete_data.zip” text=”DOWNLOAD” ]

Daftar Tutorial DataTables Join Table, Keseluruhan :

Tinggalkan Balasan Batalkan balasan