Melanjut artikel yang sebelumnya tentang Flexigrid akan saya bahas lebih jauh penggunaan Flexigrid untuk penggunaan Master detail data. Apa itu master detail Dua buah grid/Table yang dihubungkan dengan Relasi tabel (kira – kira seperti itu pengertiannya menurut saya), lantas mengapa dibuat master detail tentu saja untuk memudahkan pengguna dalam melihat data Child dari tabel induk.
Contohnya penerapannya kebanyakan di lingkungan SAP, ERP, untuk skala kecil biasanya untuk Toko. Untuk kalian yang belum tau cara instalasi Flexigrid silahkan ikuti link ini, bila kalian sudah membaca saya lanjutkan implementasi langsung pada code – code master detail.
1. Pada Tag Head (<head>) tambahkan 1 buah fungsi untuk even click pada Grid Master
<script type=”text/javascript”>
function getDetail(cel,id){
$(cel).click(
function(){
if(!id) return;
var p = [{name:’id’, value: id}];
$(“#detail”).flexOptions({params: p});
$(‘#detail’).flexReload();
}
);
};
</script>
2. Buat 1 File index.html (sesuaikan nama dengan kenginginan kalian) isinya sebagai berikut
<table id=”master” style=”display:none”></table> <br /> // Hasil Rendering untuk grid master
<table id=”detail” style=”display:none”></table> // Hasil Rendering untuk grid detail
<script type=”text/javascript”>
$(“#master”).flexigrid({
url: ‘show_data.php’, // panggil file show_data.php
dataType: ‘json’, // tentukan type data sebagai json
colModel : [ // Kolom model data yg akan ditampilkan
{display: ‘Name’, name : ‘NAMA’, width : 200, sortable : true, align: ‘left’, process: getDetail},
{display: ‘Email’, name : ‘EMAIL’, width : 250, sortable : true, align: ‘left’, process: getDetail},
{display: ‘Tanggal’, name : ‘TGL’, width : 100, sortable : true, align: ‘left’, process: getDetail}
],
searchitems : [ // Pencarian item
{display: ‘Email’, name : ‘EMAIL’},
{display: ‘Name’, name : ‘name’, isdefault: true}
],
sortname: “TGL”, // Urutkann berdasarkan tanggal
sortorder: “desc”, // Urutkan dari yang terakhir
usepager: true, // Tampilkan Pagination
title: ‘List master’, // Penamaan Grid
useRp: true,
rp: 15,
width: 590,
height: 180
});
$(“#detail”).flexigrid({
url: ‘show_detail.php’, // Panggil file show_detail.php
dataType: ‘json’, // Tentukan type data sebagai json
colModel : [ // Kolom model data yg akan ditampilkan
{display: ‘Title’, name : ‘TITLE’, width : 350, sortable : true, align: ‘left’},
{display: ‘Tanggal’, name : ‘TGL’, width : 100, sortable : true, align: ‘left’},
{display: ‘Status’, name : ‘STATUS’, width : 100, sortable : false, align: ‘center’}
],
sortname: “TGL”, // Urutkann berdasarkan tanggal
sortorder: “desc”, // Urutkan dari yang terakhir
usepager: true, // Tampilkan Pagination
title: ‘List detail’, // Penamaan Grid
useRp: true,
rp: 10,
width: 590,
height: 180
});
</script>
3. Buat file untuk menampilkan data master (show_data.php)
if($_POST[‘query’] != ”){ // check apabila terdapat pencarian data
if($_POST[‘qtype’] == ‘name’){ // bila pencarian berdasarkan Nama
$where = ” AND (MEMBER_NAMA_DEPAN LIKE ‘%”.htmlentities($_POST[‘query’]).”%’ OR MEMBER_NAMA_BELAKANG LIKE ‘%”.htmlentities($_POST[‘query’]).”%’) ORDER BY “.$_POST[‘sortname’].” “.$_POST[‘sortorder’];
}else{ // bila pencarian berdasar Email
$where = ” AND MEMBER_EMAIL LIKE ‘%”.htmlentities($_POST[‘query’]).”%’ ORDER BY “.$_POST[‘sortname’].” “.$_POST[‘sortorder’];
}
}else{ // bila tidak ada pencarian
$where = “ORDER BY MEMBER_ID DESC”;
}
$result = $dbhost->query(“SELECT MEMBER_NAMA_DEPAN AS FNAME, MEMBER_NAMA_BELAKANG AS LNAME, MEMBER_EMAIL AS EMAIL
, DATE_INPUT AS TGL FROM tb_member WHERE MEMBER_STATUS = ‘1’ $where”);// query tabel seperti layaknya di semua database
foreach($result as $key => $row){
$rows = array(‘TGL’ => date(‘d M Y’,strtotime($row[‘TGL’])), ‘EMAIL’ => $row[‘EMAIL’], ‘NAMA’ => $row[‘FNAME’].” “.$row[‘LNAME’]); // data yang akan kita tampilkan pada Grid
$record = array(‘id’ => $key, ‘cell’ => $rows); // array data yang sudah siap ditampilkan
$hasil[] = $record;
}
$data = array(
“page” => 1
,”total” => count($hasil)
,”rows” => $hasil
);
echo json_encode($data); // tampilkan data json master
4. Buat file untuk menampilkan data master (show_detail.php)
$result = $dbhost->query(“SELECT NEWS_TITLE AS TITLE, NEWS_STATUS AS STATUS
, DATE_INPUT AS TGL FROM tb_news
WHERE MEMBER_ID = ‘”.(int)$_POST[‘id’].”‘”); // query tabel seperti layaknya di semua database
foreach($result as $key => $row){
$status = ($row[‘STATUS’] == ‘1’)?”Aktif”:”Non Aktif”;
$rows = array(‘TGL’ => date(‘d M Y’,strtotime($row[‘TGL’])), ‘TITLE’ => $row[‘TITLE’], ‘STATUS’ => $status); // data yang akan kita tampilkan pada Grid
$record = array(‘id’ => $key, ‘cell’ => $rows); // array data yang sudah siap ditampilkan
$hasil[] = $record;
}
$data = array(
“page” => 1
,”total” => count($hasil)
,”rows” => $hasil
);
echo json_encode($data); // tampilkan data json Detail
Simple bukan untuk membuat master detail dengan flexigrid tidak kalah kok dengan grid extjs, dhtmlx, jqgrid dll malah tidak terlalu memakan ruang penyimpanan bila menggunakan Flexigrid.
Catatan :
1. Database yang saya gunakan adalah SQLite