.:: Jasa Membuat Aplikasi Website,Desktop,Android Order Now..!! | | Order Now..!! Jasa Membuat Project Arduino,Robotic,Print 3D ::.

menampilkan data (CRUD) dengan datatables serverside bootstrap dan php

0 komentar


بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Assalamu'alaikum warahmatullahi wabarakatuh

Sudah lama juga saya tidak update artikel di blog ini, harap di maklum karena saya sibuk mengerjakan project - project, oke pada kesempatan kali ini saya akan membahas tentang datatables serverside bootstrap dan memberikan tutorial singkat serta akan saya berikan link download source code nya agar anda bisa paham dan bisa langsung mempraktekannya. Pada dasarnya data tables serverside digunakan untuk meload data puluhan ribu record dari server dengan cepat tanpa lola alias loading lama, nah tentunya
 bagi anda yang memiliki data besar atau sedang mengembangkan aplikasi dengan data record yang mencapai puluhan ribu metode ini sangat dianjurkan untuk digunakan karena selain bisa meload data engan cepat juga user tidak terlalu lama menunggu load data dari server yang tentunya menghambat kinerja user. 
Untuk membuat DataTables Serverside anda tentunya perlu mendownload plugin DataTables Bootstrap di https://www.datatables.net Berikut adalah script pemanggilan data melalui ajax di datatables serverside  juga configurasi path file yang harus di sertakan :
  • Buatlah sebuah database dengan nama mahasiswa kemudian buat table dengan nama data yang berisi field => (nim,nama,tempat_lahir,tanggal_lahir,alamat,notelp)
  • Letakkan diantara tag <head> </head> css datatables dengan memanggil path filenya
<link rel="stylesheet" href="datatables/dataTables.bootstrap.css"/>

  • Masukan path file datatables javascript  dan code berikut di atas tag </body>
<script src="datatables/jquery.dataTables.js"></script>
<script src="datatables/dataTables.bootstrap.js"></script>

<script>
$(document).ready(function() {
var dataTable = $('#lookup').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
url :"ajax-grid-data.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".lookup-error").html("");
$("#lookup").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#lookup_processing").css("display","none");

}
}
} );
} );
</script>

  • Buat Sebuah table HTML untuk menampilkan data dari datatable dengan menyantumkan id lookup pada tag <table> seperti berikut :

<table id="lookup" class="table table-bordered table-hover">  
<thead bgcolor="#eeeeee" align="center">
<tr>

<th>NIM</th>
<th>Nama </th>
<th>Tempat Lahir </th>
<th>Tanggal Lahir</th>
<th>Alamat </th>
<th>No Telepon</th>
<th class="text-center"> Action </th>

</tr>
</thead>
<tbody>
</tbody>
</table>



  • Langkah berikutnya adalah membuat ajax datatables serverside processing, copy kan code berikut dan simpan dengan nama ajax-grid-data.php 

<?php
/* Database connection start */
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mahasiswa";

$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());

/* Database connection end */


// storing request (ie, get/post) global array to a variable
$requestData= $_REQUEST;


$columns = array(
// datatable column index => database column name
0 => 'nim',
1 => 'nama',
2 => 'tempat_lahir',
3 => 'tanggal_lahir',
4 => 'alamat',
5 => 'notelp'
);

// getting total number records without any search
$sql = "SELECT nim, nama, tempat_lahir, tanggal_lahir, alamat, notelp ";
$sql.=" FROM data";
$query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get InventoryItems");
$totalData = mysqli_num_rows($query);
$totalFiltered = $totalData; // when there is no search parameter then total number rows = total number filtered rows.


if( !empty($requestData['search']['value']) ) {
// if there is a search parameter
$sql = "SELECT nim, nama, tempat_lahir, tanggal_lahir, alamat, notelp ";
$sql.=" FROM data";
$sql.=" WHERE nama LIKE '".$requestData['search']['value']."%' "; // $requestData['search']['value'] contains search parameter
$sql.=" OR tempat_lahir LIKE '".$requestData['search']['value']."%' ";
$sql.=" OR tanggal_lahir LIKE '".$requestData['search']['value']."%' ";
$sql.=" OR alamat LIKE '".$requestData['search']['value']."%' ";
$sql.=" OR notelp LIKE '".$requestData['search']['value']."%' ";
$query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get PO");
$totalFiltered = mysqli_num_rows($query); // when there is a search parameter then we have to modify total number filtered rows as per search result without limit in the query

$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; // $requestData['order'][0]['column'] contains colmun index, $requestData['order'][0]['dir'] contains order such as asc/desc , $requestData['start'] contains start row number ,$requestData['length'] contains limit length.
$query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get PO"); // again run query with limit

} else {

$sql = "SELECT nim, nama, tempat_lahir, tanggal_lahir, alamat, notelp ";
$sql.=" FROM data";
$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." ";
$query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get PO");

}

$data = array();
while( $row=mysqli_fetch_array($query) ) { // preparing an array
$nestedData=array();

$nestedData[] = $row["nim"];
$nestedData[] = $row["nama"];
$nestedData[] = $row["tempat_lahir"];
$nestedData[] = $row["tanggal_lahir"];
$nestedData[] = $row["alamat"];
$nestedData[] = $row["notelp"];
$nestedData[] = '<td><center>
<a href="edit.php?kd='.$row['nim'].'" data-toggle="tooltip" title="Edit" class="btn btn-sm btn-warning"> <i class="menu-icon icon-pencil"></i> </a>
<a href="index.php?hal=hapus&kd='.$row['nim'].'" data-toggle="tooltip" title="Hapus" class="btn btn-sm btn-danger"> <i class="menu-icon icon-trash"></i> </a>
</center></td>';

$data[] = $nestedData;

}



$json_data = array(
"draw" => intval( $requestData['draw'] ), // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw.
"recordsTotal" => intval( $totalData ), // total number of records
"recordsFiltered" => intval( $totalFiltered ), // total number of records after searching, if there is no searching then totalFiltered = totalData
"data" => $data // total data array
);

echo json_encode($json_data); // send data as json format

?>

Dari code di atas kita sudah bisa menampilkan data dengan datatables processing, untuk screenshoot aplikasi CRUD datatables serverside processing yang sudah jadi adalah seperti berikut :


  • Halaman Awal

  • Halaman Input Data

  • Halaman Edit



Untuk Demo dan Download Sourcecode anda bisa mendapatkannya di link berikut :

DEMO

DOWNLOAD

Link Demo dan Link Download sudah saya berikan, Semoga tutorial dan penjelasan singkat ini bisa bermanfaat bagi anda yang sedang membangun aplikasi maupun yang sedang belajar programming, tetap semangat dan jangan menyerah.

Happy Coding & Programming

Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com


atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين
Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
wassalamualaikum warahmatullahi wabarakatuh


Artikel menampilkan data (CRUD) dengan datatables serverside bootstrap dan php, Diterbitkan oleh scodeaplikasi pada Jumat, 19 Februari 2016. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.

Tawk.to