Mumpung lagi ada waktu, saya ingin melanjutkan tutorial tentang extjs, Tutorial ini baru saya buat tadi pagi setelah pulang dari jaga warnet,, Sebenarnya ingin tidur karena sudah ngantuk, tapi entah kenapa nyampek di kosan tidak bisa tidur atau turu kata orang jawa,, padahal temen sekamarku pas saya nyampek kosan kelihatannya nyenyak buanget tidurnya,, dan tau gak sampek jam berapa dia bngun? setengah 1 coy mantap buanget ,, (moga temanku tidak baca blog ini nanti di cerai bisa-bisa saya di cerai hehehe..hehe..). Lho kok malah melenceng dari topik? sory kawan.. :D
Ok kita mulai aja tutorialnya,, kali in buruh internet ongin menjelaskan tentang cara membuat paging grid menggunakan Exjs,, maksud paging disni yaitu mensplit data yang ingin kita tampilkan di web (pemberian nomor) benar nggak? tujuannya sich biar nggak banyak makan space halaman di web kita dan biar enak juga kalau di lihat.
Note: Anda sudah membaca tutorial ku yang sebelumnya: membuat form login dengan extjs ;))
Untuk membut paging grid dengan menggunakan extjs tentunya kamu sudah punya frameworknya, disini saya menggunakan extjs versi ext-2.2,, sepertinya ini masih yang terbaru...
Ini adalah snapshot dari paging extjs yang aq buat:
 |
 |
Berikut langkah-langkah untuk membuat tampilan seperti diatas:
1. Buat database terlebih dahulu, setelah itu buat table, dan fieldnya... nich caranya:
CREATE TABLE `grid` (
`id` int(10) NOT NULL auto_increment,
`nama` varchar(100) NOT NULL,
`alamat` varchar(100) NOT NULL,
`tgl_Laporan` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
INSERT INTO `grid` (`id`, `nama`, `alamat`, `tgl_Laporan`) VALUES
(1, 'faisal', 'gebang wetan', '01/03/1986'),
(2, 'kahayan', 'ponggok blitar', '01/19/1991'),
(3, 'ica', 'ponggok', '01/02/2004'),
(4, 'sanah', 'seduur', '03/04/2005'),
(5, 'kandar', 'ponggok', '03/04/1979'),
(6, 'sirat', 'pakong', '03/05/1976');
CREATE TABLE `grid` (
`id` int(10) NOT NULL auto_increment,
`nama` varchar(100) NOT NULL,
`alamat` varchar(100) NOT NULL,
`tgl_Laporan` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
INSERT INTO `grid` (`id`, `nama`, `alamat`, `tgl_Laporan`) VALUES
(1, 'faisal', 'gebang wetan', '01/03/1986'),
(2, 'kahayan', 'ponggok blitar', '01/19/1991'),
(3, 'ica', 'ponggok', '01/02/2004'),
(4, 'sanah', 'seduur', '03/04/2005'),
(5, 'kandar', 'ponggok', '03/04/1979'),
(6, 'sirat', 'pakong', '03/05/1976');
2. Kemudian Buatlah file php untuk koneksi ke database.
<?php
$nameSer = "localhost";
$username ="root";
$pass = "";
$dbname = "blog";
$koneksi = mysql_connect($names,$username,$pass)or die('error'.mysql_errno());
$selecdb = mysql_select_db($dbname);
?>
<?php
$nameSer = "localhost";
$username ="root";
$pass = "";
$dbname = "blog";
$koneksi = mysql_connect($names,$username,$pass)or die('error'.mysql_errno());
$selecdb = mysql_select_db($dbname);
?>
3. Buat file javascriptnya untuk tampilan formnya.
var NiagaDataStore;
var NiagaColumnModel;
var NiagaListingEditorGrid;
Ext.onReady(function(){
Ext.QuickTips.init();
NiagaDataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'grid.php', //manggil file grid.php
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total'
},
[
{name: 'id', type: 'int'},//sesuai nama field yang di database
{name: 'nama', type: 'string'},//sesuai nama field yang di database
{name: 'alamat', type: 'string'},//sesuai nama field yang di database
{name: 'tgl_Laporan', type: 'string'}//sesuai nama field yang di database
]),
sortInfo:{field: 'id', direction: "ASC"}//urut berdasarkan id
});
NiagaDataStore.load({params:{start:0,limit:5}}); //menampilkan data sebayak 5 record
//tampilan awal
NiagaColumnModel = new Ext.grid.ColumnModel( // Tampilan form paging Grid
[{
header: 'Id',
readOnly: true,
dataIndex: 'id',
width: 40,
hidden: false
},{
header: 'Nama',
dataIndex: 'nama',
width: 130,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},{
header: 'Alamat',
dataIndex: 'alamat',
width: 160,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},{
header: 'Tanggal Laporan',
dataIndex: 'tgl_Laporan',
width: 120,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
editor: new Ext.form.DateField({
format: 'm/d/Y'
}),
hidden: false
}]
);
NiagaColumnModel.defaultSortable= true;
//tampilan luar
NiagaListingEditorGrid = new Ext.grid.GridPanel({
title: 'Form Paging Grid',
store: NiagaDataStore,
cm: NiagaColumnModel, //manggil NiagaColumnModel
width:455,
height:210,
bbar: new Ext.PagingToolbar({ //buat paging
pageSize: 5, batas nya 5
store: NiagaDataStore,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: "No data to display"
})
});
NiagaListingEditorGrid.render('form');
});
var NiagaDataStore;
var NiagaColumnModel;
var NiagaListingEditorGrid;
Ext.onReady(function(){
Ext.QuickTips.init();
NiagaDataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'grid.php', //manggil file grid.php
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total'
},
[
{name: 'id', type: 'int'},//sesuai nama field yang di database
{name: 'nama', type: 'string'},//sesuai nama field yang di database
{name: 'alamat', type: 'string'},//sesuai nama field yang di database
{name: 'tgl_Laporan', type: 'string'}//sesuai nama field yang di database
]),
sortInfo:{field: 'id', direction: "ASC"}//urut berdasarkan id
});
NiagaDataStore.load({params:{start:0,limit:5}}); //menampilkan data sebayak 5 record
//tampilan awal
NiagaColumnModel = new Ext.grid.ColumnModel( // Tampilan form paging Grid
[{
header: 'Id',
readOnly: true,
dataIndex: 'id',
width: 40,
hidden: false
},{
header: 'Nama',
dataIndex: 'nama',
width: 130,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},{
header: 'Alamat',
dataIndex: 'alamat',
width: 160,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},{
header: 'Tanggal Laporan',
dataIndex: 'tgl_Laporan',
width: 120,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
editor: new Ext.form.DateField({
format: 'm/d/Y'
}),
hidden: false
}]
);
NiagaColumnModel.defaultSortable= true;
//tampilan luar
NiagaListingEditorGrid = new Ext.grid.GridPanel({
title: 'Form Paging Grid',
store: NiagaDataStore,
cm: NiagaColumnModel, //manggil NiagaColumnModel
width:455,
height:210,
bbar: new Ext.PagingToolbar({ //buat paging
pageSize: 5, batas nya 5
store: NiagaDataStore,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: "No data to display"
})
});
NiagaListingEditorGrid.render('form');
});
4. buat file php untuk request data dari database
<?php
include "koneksi.php";//manggil file koneksi.phpinclude "JSON.php";//manggil file JSON.php
$query = "SELECT * FROM grid"; $result = mysql_query($query); $nbrows = mysql_num_rows($result); $start = (integer) (isset($_POST['start']) ? $_POST['start'] : $_GET['start']); $end = (integer) (isset($_POST['limit']) ? $_POST['limit'] : $_GET['limit']); $limit = $query." limit ".$start.",".$end; //echo $limit; $result = mysql_query($limit); if($nbrows>0) { while($rec = mysql_fetch_array($result)) { $rec['tgl_Laporan']=codeDate($rec['tgl_Laporan']); $arr[] = $rec; } $jsonresult = JEncode($arr); echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})'; } else { echo '({"total":"0", "results":""})'; }
// Encodes a SQL array into a JSON formated stringfunction JEncode($arr){ if (version_compare(PHP_VERSION,"5.2","<")) { require_once("JSON.php"); //if php<5.2 need JSON class $json = new Services_JSON();//instantiate new json object $data=$json->encode($arr); //encode the data in json format } else { $data = json_encode($arr); //encode the data in json format } return $data;}
// Encodes a YYYY-MM-DD into a MM-DD-YYYY stringfunction codeDate ($date) { $tab = explode ("-", $date); $r = $tab[1]."/".$tab[2]."/".$tab[0]; return $r;}
// Encodes a MM-DD-YYYY into a YYYY-MM-DD stringfunction decodeDate ($date) { $tab = explode ("/", $date); $n = count($tab); if($n==3) { $r = $tab[2]."-".$tab[0]."-".$tab[1]; } else { $r = ""; } return $r;}?>
<?php
include "koneksi.php";//manggil file koneksi.phpinclude "JSON.php";//manggil file JSON.php
$query = "SELECT * FROM grid"; $result = mysql_query($query); $nbrows = mysql_num_rows($result); $start = (integer) (isset($_POST['start']) ? $_POST['start'] : $_GET['start']); $end = (integer) (isset($_POST['limit']) ? $_POST['limit'] : $_GET['limit']); $limit = $query." limit ".$start.",".$end; //echo $limit; $result = mysql_query($limit); if($nbrows>0) { while($rec = mysql_fetch_array($result)) { $rec['tgl_Laporan']=codeDate($rec['tgl_Laporan']); $arr[] = $rec; } $jsonresult = JEncode($arr); echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})'; } else { echo '({"total":"0", "results":""})'; }
// Encodes a SQL array into a JSON formated stringfunction JEncode($arr){ if (version_compare(PHP_VERSION,"5.2","<")) { require_once("JSON.php"); //if php<5.2 need JSON class $json = new Services_JSON();//instantiate new json object $data=$json->encode($arr); //encode the data in json format } else { $data = json_encode($arr); //encode the data in json format } return $data;}
// Encodes a YYYY-MM-DD into a MM-DD-YYYY stringfunction codeDate ($date) { $tab = explode ("-", $date); $r = $tab[1]."/".$tab[2]."/".$tab[0]; return $r;}
// Encodes a MM-DD-YYYY into a YYYY-MM-DD stringfunction decodeDate ($date) { $tab = explode ("/", $date); $n = count($tab); if($n==3) { $r = $tab[2]."-".$tab[0]."-".$tab[1]; } else { $r = ""; } return $r;}?>
5. Dan yang terpenting dari tutorial ini yaitu jangan lupa untuk menyertakan file JSON.php file ini digunakan ketika kita mau request data dari database,, disini kalian g usah pusing-pusing mikirin isi dari file JSON.php ini, karena file ini tinggal qt pakek (di panggil atau di includekan di file php.) file ini bisa di download di sini
Mungkin cukup sekian tutorialnya jika ada pertanyaan silahkan tinggalkan comment.
kamu bisa medownload source code lengkapnya disini
Baca juga cara membuat add, edit dan delete menggunakan extjs dan php.
Title: Tutorial Form Grid Extjs: Paging Grid Extjs
Posted by faisal
Thanks for reading about Tutorial Form Grid Extjs: Paging Grid Extjs
Posted by faisal
Thanks for reading about Tutorial Form Grid Extjs: Paging Grid Extjs
+ comments + 23 comments
wah keren mas.... makasih nih tutorialnya.. bagus banget...
oiya salam knal mas... terima kasih tempo kemaren mampir di blog saya...
ya sama-sama mas.. kalo ada yang g ngerti bisa langsung di tanyakan mas...
Kok di saya ngga bisa sih... pagingnya ngga nyala!!!
g nyala gimana mas? form muncul nggak?
coba mase pakek firebug, untuk mengetahui penyebabnya?
waduh cantik yah blog nya.....mas saya lihat ada progra PTC indonesia ya???kenapa ga review PTC luarnya aja mas, soalnya sambil ngeblog kan juga asyik maen PTC coba deh mas maen ke blog saya...di tunggu yah mas
http://dollarrupiahgratis.blogspot.com/2009/02/no-more-waste-time.html
trimakasih sebelumnnya....
trims.....
mas bisa buat nomer nya ga???
bingung buat nglooping nomernya...
klo di situ kan id yg muncul...tolong ya mas..
thanks
maksud mas, gridnya yang di kasik nomor?
Maaf mas saya sudah coba, tapi tidak keluar apa2x yah,jawabannya boleh minta dikirim k email saya di sesar2004@gmail.com ...makasih
kahayan-faisal.blogspot.com is very informative. The article is very professionally written. I enjoy reading kahayan-faisal.blogspot.com every day.
quick loan
online payday loans canada
kok pake JSON.PHP??
kan php 5 udh support json
itu file JSON.php bwt apa?
itu hanya contoh mas, mungin masih ada yang makek php versi lawas :d
numpang download sourcenya ya mas, saya lagi nyobak pake JSP :)
trims
mas, aku dah add ym lho
kok belum di accept ya :D
mau tanya mas faisal... ini saya sudah mencoba, tapi waktu saya klik next page tapi gak pindah halaman, yang muncul tetap halaman pertama. ada solusi.. ato ada yang kurang punya saya... terima kasih jawabannya...
saya bermasalah ketika memasukkan checkbox kedalam gridnya mas...ketika saya check beberapa item pada page pertama...lalu saya buka page kedua., nahh.,ketika saya kembali ke halaman pertama lagi,,semua itemnya kembali uncheck lagi..
saya bermasalah ketika memasukkan checkbox kedalam gridnya mas...ketika saya check beberapa item pada page pertama...lalu saya buka page kedua., nahh.,ketika saya kembali ke halaman pertama lagi,,semua itemnya kembali uncheck lagi..
Mas file jasonnya diupload lagi dong, link nya mati tuh.. thx
Mas file jasonnya diupload lagi dong, link nya mati tuh.. thx
asslm wr wb
maaf ini mgkin pertanyaan bodoh. tapi saya bener masi bingung di bagian:
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total'
},
root sm totalProperty nya darimana kq bsa kita tentuin gtu??
maaf saya baru belajar extjs mau tnya masi bingung x di bagian ini:
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total'
},
root sma total properti itu apa memang isinya gtu selalu ???
File json.php bisa anda download disini