Flexigrid Master Detail

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.

 

DEMO | DOWNLOAD

 

Catatan : 

1. Database yang saya gunakan adalah SQLite

About Administrator

2016-01-12 10:32:36 2016-01-12 14:33:42

Check Also

Create Simple Chat App with Google App Engine Backend and Google Cloud Messaging

Mari membuat aplikasi chat sederhana menggunakan backend Google App Engine (bagian dari Google Cloud Platform) dan …

Tinggalkan Balasan

Translate »
error: Konten dilindungi !!