Data Grid dengan FLexiGrid dan php

Bismillah…

flexigrid adalah salah satu library yg banyak di pakai oleh programmer .. tapi sayangnya flexigrid kalah populer dengan jquery , YUI, dan lainnya. tapi kita coba kali ini menapilkan data dengan flexi grid,

siapkan database:

db_flex

nama databasenya : bukutamu dan tablenya : table bukutamu bisa di view aja gambar di atas

langsung masuk code :

koneksi.php


<?php
error_reporting(0);
function runSQL($rsql) {
 $hostname = "localhost";
 $username = "root";
 $password = "";
 $dbname = "bukutamu";
 $connect = mysql_connect($hostname,$username,$password) or die ("Error: could not connect to database");
 $db = mysql_select_db($dbname);
 $result = mysql_query($rsql) or die ('Error: could not query data');
 return $result;
 mysql_close($connect);
}

function countRec($fname,$tname,$where) {
 $sql = "SELECT count($fname) FROM $tname $where";
 $result = runSQL($sql);
 while ($row = mysql_fetch_array($result)) {
 return $row[0];
 }
}
?>

data.json/ data.php


<?php
include("function/koneksi.php");
$page = $_POST['page'];
$rp = $_POST['rp'];
$sortname = $_POST['sortname'];
$sortorder = $_POST['sortorder'];

if (!$sortname) $sortname = 'id';
if (!$sortorder) $sortorder = 'desc';
if (!$page) $page = 1;
if (!$rp) $rp = 10;

$start = (($page-1) * $rp);
$limit = "LIMIT $start, $rp";
$sort = "ORDER BY $sortname $sortorder";

$where = "";

$query = mysql_real_escape_string($_POST['query']);
$qtype = $_POST['qtype'];

if ($query) $where = " WHERE $qtype LIKE '%$query%' ";
$sql = "SELECT id,nama,email,pesan FROM table_bukutamu $where $sort $limit";
$result = runSQL($sql);
$numrow = countRec('id','table_bukutamu',$where);

if($numrow>0){
 $data['page'] = intval($page);
 $data['total'] = intval($numrow);
 while ($row = mysql_fetch_array($result)) {
 $rows[] = array(
 "id" => $row['id'],
 "cell" => array(
 $row['id'],
 $row['nama'],
 $row['email'],
 $row['pesan']

 )
 );
 }
} else {
 $rows[] = array(
 "id" => 'null',
 "cell" => array(
 'null',
 'null',
 'null',
 'null'
 )
 );
}

$data['rows'] = $rows;
echo json_encode($data);

?>

index.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Flexi Grid </title>

<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="plugin/flexigrid/css/flexigrid.css" />
<script type="text/javascript" src="plugin/flexigrid/js/flexigrid.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#flex1").flexigrid({
 url: 'data.php',
 dataType: 'json',
 colModel : [
 {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
 {display: 'NAMA', name : 'iso', width : 40, sortable : true, align: 'center'},
 {display: 'EMAIL', name : 'name', width : 180, sortable : true, align: 'left'},
 {display: 'PESAN', name : 'printable_name', width : 120, sortable : true, align: 'left'}

 ],
 searchitems : [
 {display: 'ID', name : 'id'},
 {display: 'Nama', name : 'nama', isdefault: true}
 ],
 sortname: "id",
 sortorder: "asc",
 usepager: true,
 title: 'BUKU TAMU',
 useRp: true,
 rp: 10,
 showTableToggleBtn: true,
 width: 640,
 height: 255
 });
});

</script>
</head>
<body>
 <table id="flex1" style="display:none"></table>
</body>
</html>

dan hasilnya seperti ini :

hasil_flex

 

link download disini

Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: