Tutorial menggunakan JqGird

Membuat tabel-Gird dengan menggunakan JqGird

download dulu bahan-bahan nya 😀

pastinya jqGird & jquery ui,di sini jquery ui di gunakan untuk theming girdnya,

Membuat Gird

pertama kita buat database db_contac dan tbl_contac, and dummy data

CREATE DATABASE  `db_contact` ;
CREATE TABLE IF NOT EXISTS `tbl_contac` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(128) NOT NULL,
  `alamat` mediumtext NOT NULL,
  `email` varchar(128) NOT NULL,
  `tlp` varchar(15) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data untuk tabel `tbl_contac`
--

INSERT INTO `tbl_contac` (`id`, `nama`, `alamat`, `email`, `tlp`) VALUES
(1, 'Budi', 'Jl. Jakarta No.32', 'budi@yahoo.com', '0856719999'),
(2, 'Rey', 'Jl. Lak. Muda', 'rey@yahoo.com', '085799988'),
(3, 'Reina', 'Jl. Budi Luhur', 'reina@gmail.com', '0813-85724235'),
(4, 'Lexs', 'Jl. Raya Bogor', 'lexs@yahoo.co.id', '0818-737335');

selanjutnya kita masukan stylesheet beserta scriptnya, untuk penempatannya harus sesuai agar script berjalan dengan baik

<link rel="stylesheet"  media="screen" href="js/jqueryui/css/flick/jquery-ui-1.8.13.custom.css"></script>
<link rel="stylesheet" type="text/css" media="screen" href="js/jqgird/css/ui.jqgrid.css" />
<script type="text/javascript" src="js/jqueryui/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jqueryui/js/jquery-ui-1.8.13.custom.min.js"></script>
<script src="js/jqgird/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jqgird/js/jquery.jqGrid.min.js" type="text/javascript"></script>

kita selesai dengan database dan penempatan script, sekarang langsung masuk kebagian menampilkan girdnya
untuk bisa menampilkan girdnya kita membutuhkan 2 file, satu untuk client-side & dan satu lagi untuk server-side(PHP)

[*cat: jqGird menggunakan 2 data type untuk respone ajaxnya (XML&JSON)]
index.html | Javascript

<script>
jQuery(document).ready(function(){
    jQuery("#tbl_view").jqGrid({
    url:'ajax/data.php',
    datatype: "json",
    colNames:['Nama','Alamat','Email','Tlp'],
    colModel:[
    {name:'nama',index:'nama', width:150,search:true,editable:true},
	{name:'alamat',index:'alamat', width:150,search:true,editable:true},
	{name:'email',index:'email', width:150,search:true,editable:true},
	{name:'tlp',index:'tlp', width:150,search:true,editable:true},
   ],
    pager: jQuery('#pager'),
    rownumbers:true,
    rowNum:20,
    width:'auto',
    height:250,
    sortorder:'desc',
    rowList:[30,50,100],
    editurl: "ajax/crud.php",
    sortname: 'id',
    viewrecords: true,
    caption: "&nbsp;TABEL BIODATA",

});

//TOOLBAR PAGER
$("#tbl_view").jqGrid('navGrid','#pager', {view:true,del:true,add:true,edit:true},
 {multipleSearch : true,sopt:['cn','bw','eq'],
  matchText: "", rulesText: ""
}
   );

})

<script>

Point yg harus di perhatikan adalah

'url:ajax/data.php'

di line ini jqGird melakukan pengiriman parameter untuk di proses di serverside untuk melihat parameter apa saja yg dikirimkan dapat di lihat dengan menggunakan add On firebug di Mozilla

'editurl: "ajax/crud.php"'

di sini jqgird mengirimkan parameter oper
untuk proses CRUD

$("#tbl_view").jqGrid('navGrid','#pager', {view:true,del:true,add:true,edit:true},
 {multipleSearch : true,sopt:['cn','bw','eq'],
  matchText: "", rulesText: ""
}
   );

Line digunakan untuk membuat toolbar untuk proses Searching, Add,Edit, dan Delete

Kode Full Index.html

<!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=iso-8859-1" />
</head>
<link rel="stylesheet"  media="screen" href="js/jqueryui/css/flick/jquery-ui-1.8.13.custom.css"></script>
<script type="text/javascript" src="js/jqueryui/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jqueryui/js/jquery-ui-1.8.13.custom.min.js"></script>
<script>
jQuery(document).ready(function(){
    jQuery("#tbl_view").jqGrid({
    url:'ajax/data.php',
    datatype: "json",
    colNames:['Nama','Alamat','Email','Tlp']
    colModel:[
	{name:'nama',index:'nama', width:150,search:true,editable:true},
	{name:'alamat',index:'alamat', width:150,search:true,editable:true},
	{name:'email',index:'email', width:150,search:true,editable:true},
	{name:'tlp',index:'tlp', width:150,search:true,editable:true},
   ],
    pager: jQuery('#pager'),
    rownumbers:true,
    rowNum:30,
    width:'auto',
    height:350,
    sortorder:'desc',
    rowList:[30,50,100],
    editurl: "ajax/crud.php",
    sortname: 'id',
    viewrecords: true,
    caption: "&nbsp;TABEL BIODATA",

});

//TOOLBAR PAGER
$("#tbl_view").jqGrid('navGrid','#pager', {view:true,del:true,add:true,edit:true},
 {multipleSearch : true,sopt:['cn','bw','eq'],
  matchText: "", rulesText: ""
}
   );

})

<script>
</head>
<body>
<table id="tbl_view" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</body>
</html>

Selanjutnya kita buat untuk pengolahan data di sisi server nya

url:'ajax/data.php'

disini proses query data di database seperti biasa yg berbeda hanya untuk proses querynya kita menggunakan parameter-parameter yg ada di jquery gird secara default parameternya adalah

_search	false           // True apabila dilakukan pencarian
nd	1309158671147   // rand number
page	1               // hal
rows	20              // Jml rows per gird
sidx	id              // index id untuk proses query
sord	desc            // ordering untuk proses query

[cat : parameter ini dapat di set di client]

data.php

<?php
/* Config */

$dbname="db_contac";
$dbhost="localhost";
$dbroot="root";
$dbpassword="";
$conn=mysql_connect($dbhost,$dbroot,$dbpassword);
$db=mysql_select_db($dbname);

$page = $_REQUEST['page'];
$limit = $_REQUEST['rows'];
$sidx = $_REQUEST['sidx'];
$sord = $_REQUEST['sord'];
$search=$_REQUEST['_search'];

$sString=mysql_real_escape_string($_REQUEST['searchString']);

$result = mysql_query("SELECT COUNT(*) AS count FROM tbl_contac ");

$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];

if( $count >0 ) { $total_pages = ceil($count/$limit);
} else { $total_pages = 0; }

if ($page > $total_pages) $page=$total_pages;

$start = $limit*$page - $limit; //
if($start <0) $start = 0;

	$SQL = "SELECT * FROM tbl_contac ORDER BY $sidx $sord LIMIT $start , $limit";
	$result = mysql_query( $SQL ) or die("Couldn`t execute query.".mysql_error());
	$responce->page = $page;
	$responce->total = $total_pages;
	$responce->records = $count;
	$i=0;
	while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
                $responce->rows[$i]['id']=$row[id];
		$responce->rows[$i]['cell']=array($row[id],$row[nama],$row[alamat],$row[email],$row[tlp]);
		$i++;
	}
// return the formated data
echo json_encode($responce);
?>

[*cat : json_encode hanya bisa untuk versi php >= 5.2, untuk PHP < 5 dapat mendownload JSON]

Penampakan
Gird

CRUD (Create, Update, Delete)

sekarang kita masuk pada bagian pengolahan data (Create, Delete, Update) + Searching yang ada di jqGird

JqGird sendiri telah menyediakan toollbar untuk hal ini,
Gird

//TOOLBAR PAGER
$("#tbl_view").jqGrid('navGrid','#pager',<strong> {view:true,del:true,add:true,edit:true} </strong>,
 {multipleSearch : true,sopt:['cn','bw','eq'],
  matchText: "", rulesText: ""
}
   );

disini jqgird mengirimkan parameter

oper :add,del,edit  //parameter yg dikirimkan oleh jqgird

editurl:ajax/crud.php // url yg digunakan dalam proses crud

crud.php

<?php
include("config.php");
$oper=$_REQUEST['oper'];
$id=$_REQUEST['id'];
$nama=$_REQUEST['nama'];
$alamat=$_REQUEST['alamat'];
$email=$_REQUEST['email'];
$tlp=$_REQUEST['tlp'];

switch ($oper) {
    case 'add':
        $q=mysql_query("INSERT INTO tbl_contac VALUES('','$nama','$alamat','$email','$tlp')");
        break;
    case 'edit':
        $q=mysql_query("UPDATE tbl_contac SET nama='$nama',alamat='$alamat',email='$email',tlp='$tlp' WHERE id='$id'");
        break;
    case 'del':
        $q=mysql_query("DELETE FROM tbl_contac WHERE id='$id'");
	break;
}
?>

weesss, finished 😀
sourcenya bisa di download disini

14 thoughts on “Tutorial menggunakan JqGird”

ramoreez on June 27, 2011 at 8:19 pm said:

wah mantebz gan
ini nih selama ini yg ane cari
keep posting ..ane bookmark

Reply ↓
- bazzara on June 27, 2011 at 10:49 pm said:
  
  thanks gan,,
  
  Reply ↓
ramoreez on July 1, 2011 at 2:31 pm said:

untuk pencariannya kog gk bisa ya gan?

Reply ↓
- bazzara on July 2, 2011 at 5:37 am said:
  
  maaf gan lupa di tambahin 😛
  
  untuk searching ambil variable dari jqgirdnya aja, bisa di liat pake firebug
  
  _search /* true or false
  searchField /* untuk field yg akan di cari
  searchOper /* tipe pencarian eq(=),cn(like %%) untuk proses querynya
  searchString /* string
  
  nanti ditambahkan di querynya
  
  $search=$_REQUEST[‘_search’];
  $field=$_REQUEST[‘searchField’];
  $oper=$_REQUEST[‘searchOper’];
  
  $sString=mysql_real_escape_string($_REQUEST[‘searchString’]);
  if($search==’true’){
  
  switch($oper)
  {
  
  case ‘eq’:
  $wh = $field.” = ‘”.$sString.”‘”;
  break;
  case ‘bw’:
  $wh = $field.” LIKE ‘”.$sString.”‘”;
  break;
  case ‘cn’:
  $wh = $field.” LIKE ‘%”.$sString.”%'”;
  break;
  default:
  break;
  }
  $wh=”WHERE “.$wh;
  }
  
  $qry=SELECT * FROM tbl_contac $wh ORDER BY $sidx $sord LIMIT $start , $limit”;
  
  Reply ↓
ramoreez on July 1, 2011 at 2:32 pm said:

request yg inline editing donk gan

Reply ↓
andi on October 5, 2011 at 4:57 am said:

yang untuk search dimasukin dimana ya?
ga ngerti maksudnya? source ny g d update ya?

Reply ↓
mooremotomo on October 6, 2011 at 8:06 am said:

muanttapppp banget nih, oh iya kalo masukkan date dan images, bisa gak

misal data tanggal lahir dan foto

makasih ya gan

Reply ↓
- Rio Ruslan on October 12, 2011 at 5:37 am said:
  
  masukin images? upload images gan? klo upload images bisa tapi pake plugin ajax-uploader trus tipe editing untuk rowsnya di ubah jadi file
  
  Reply ↓
lpholic on November 15, 2011 at 12:51 pm said:

gan, ane coba ko datanya ga masuk ke database ya?

Reply ↓
- Rio Ruslan on November 17, 2011 at 6:12 am said:
  
  coba liat pake firebug gan, ada yang salah apa ngga.. 🙂
  
  Reply ↓
fitri on November 27, 2011 at 6:47 pm said:

datanya koq ndak nampil di jqgridnya ya, padahal di database nya dah tak isi data??knapa ya??

Reply ↓
- Rio Ruslan on November 29, 2011 at 8:49 am said:
  
  coba liat pake firebug, klo ga muncul biasanya ada error di serversidenya (PHP)
  
  Reply ↓
  - cyberzilla42 on March 6, 2012 at 4:19 am said:
    
    pada bagian data.php ko’ muncul : Warning: Division by zero in C:\xampp\htdocs\Ajax\lagi\ajax\data.php on line 23
    Couldn`t execute query.You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘LIMIT 0 ,’ at line 1
  - Rio Ruslan on March 6, 2012 at 10:28 am said:
    
    udah cek database sama tabel nya?
    klo ga coba cek query sql nya