Iso Web Id Tutorial Komputer
Related Articles
Pada artikel kali ini kita belajar mengolah data grid mengan menggunakan Flexigrid, Apa itu Flexigrid yaitu plugin dari jquery untuk menampilkan grid/table data dari hasil query database. Bukannya tinggal di tampilkan biasa saja dengan menggunakan table lalu di ulang (For/Foreach) sebanyak data udah cukup! benar akan tetapi perbedaanya kita tidak dipusingkan lagi oleh bentuk dari grid yang akan kita buat. Kenapa menggunakan flexigrid sedangkan banyak sekali grid table plugin untuk jquery?
1. Besar file relative lebih kecil (berdampak pada kecepatan loading Script bukan loading data looh)
2. Bentuk yang sederhana
3. Tidak ada Plugin tambahan (dependency) untuk menjalankan flexigrid
4. Mudah digunakan
Lebih lengkapnya kalian lihat pada situsnya Flexigrid
Saya asumsikan kalian telah mempunyai jquery dan Flexigrid bila belum punya silahkan download melalui link yang sudah saya sediakan, bila semua perangakan telah lengkap kita coba Implementasi
Sebelumnya kalian buat database (dalam kasus ini saya menggunakan sqlite) untuk cara instalasi sqlite bisa melihat artikel sebelumnya
Buat 1 buat file html misal index.html
pada tag head (<head>) isikan
<link rel=”stylesheet” type=”text/css” href=”./css/flexigrid.css”>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.5.2.min.js”></script>
<script type=”text/javascript” src=”./js/flexigrid.js”></script>
tergantung posisi path flexigrid kalian dan juga pada script diatas saya memanfaatkan jquery online (harus terkoneksi Internet).
Kemudian isikan script dibawah pada tag body (<body>)
<table id=”flex1″ style=”display:none”></table>
<script type=”text/javascript”>
$(“#flex1”).flexigrid({
url: ‘show_data.php’,
dataType: ‘json’,
colModel : [
{display: ‘Name’, name : ‘NAMA’, width : 200, sortable : true, align: ‘left’},
{display: ‘Email’, name : ‘EMAIL’, width : 250, sortable : true, align: ‘left’},
{display: ‘Tanggal’, name : ‘TGL’, width : 100, sortable : true, align: ‘left’}
],
searchitems : [
{display: ‘Email’, name : ‘EMAIL’},
{display: ‘Name’, name : ‘name’, isdefault: true}
],
sortname: “TGL”,
sortorder: “desc”,
usepager: true,
title: ‘List member’,
useRp: true,
rp: 15,
width: 590,
height: 180
});
</script>
Penjelasan script diatas :
<table id=”flex1″ style=”display:none”></table>
digunakan untuk menampilkan Flexigrid dengan acuan id pada table (flex1)
$(“#flex1”).flexigrid({
fungsi dari flexigrid untuk memproses.
url: ‘show_data.php’,
dataType: ‘json’,
Mengambil data yang akan ditampilkan pada grid dengan format JSON
colModel : [
{display: ‘Name’, name : ‘NAMA’, width : 200, sortable : true, align: ‘left’},
{display: ‘Email’, name : ‘EMAIL’, width : 250, sortable : true, align: ‘left’},
{display: ‘Tanggal’, name : ‘TGL’, width : 100, sortable : true, align: ‘left’}
],
searchitems : [
{display: ‘Email’, name : ‘EMAIL’},
{display: ‘Name’, name : ‘name’, isdefault: true}
],
Untuk menampilkan Header dari Tiap – tiap kolom data dan juga pencarian berdasar Email dan nama, untuk yang lainnya kalian pasti sudah tau dari penamaan fungsinya 
kalian buat lagi 1 file untuk memproses data show_data.php
<?php
/* koneksi ke database */
$dbname = “db_data.sqlite3”;
try {
$dbhost = new PDO(“sqlite:$dbname”);
}
catch(PDOException $e){
$error = $e->getMessage();
die( “<br><br>Gagal koneksi !!! $error”);
}
/*end*/
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 data
$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){ // ulang sebanyak data query
$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) // total dari record data
,”rows” => $hasil // data yang akan di tampilkan pada grid
);
echo json_encode($data);
?>
Pada script php diatas saya menggunakan PDO sebagai koneksi ke database sqlite, kenapa menggunakan PDO? karena php menyarankan demikian (PDO/mysqli) jadi saya menggunakan antara 2 koneksi tersebut. untuk lebih jelasnya mengenai koneksi bisa lihat pada link berikut http://www.php.net/manual/en/mysqli.overview.php
hasil dari script diatas
