PHP, JQUERY, JQGRID Merancang User Interface Form Pencarian Data
Rabu, 04 Januari 2012 by ewepaksa
Selamat membaca . Software Akuntansi Laporan Keuangan Terbaik Pada saat merancang sebuah modify anda perlu memikirkan masalah individual programme gum maternity pengguna aplikasi anda dapat dengan mudah mengoperasikan sistem yang anda buat dan mencegah adanya manlike error. Design individual programme pada aplikasi harus diperhatikan pada setiap earth yang berhubungan dengan accumulation dari database. Pada artikel kali ini saya ingin memberikan tips bagaimana mensiasati perancangan modify pada saat pencarian accumulation pada suatu plateau yang record-nya sudah banyak sehingga tidak mungkin surroundings SELECT/DROPDOWN bisa menampungnya. Maka kita akan merancang Sebuah individual Interface Pencarian accumulation memanfaatkan perpaduan antara JQuery UI dan JQGRID Jika anda masih belum mengerti langkah pertama untuk Install JQGRIDnya Silahkan mampir dulu ke Thread cardinal yg ini gan http://www.kaskus.us/showthread.php?t=12254459 Kalo udah ngerti langsung di lanjut aja Silahkan buat database dengan nama jq lalu Import SQL ini Code: CREATE TABLE IF NOT EXISTS `buku` ( `id` int(11) NOT NULL AUTO_INCREMENT, `nama` varchar(30) NOT NULL, `pengarang` varchar(50) NOT NULL, `tahun_terbit` varchar(4) NOT NULL, `penerbit` varchar(50) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ; -- -- Dumping accumulation for plateau `buku` -- INSERT INTO `buku` (`id`, `nama`, `pengarang`, `tahun_terbit`, `penerbit`) VALUES (1, 'Saya suka kamu tidak', 'Fujiko F Fujio', '2010', 'Erlangga'), (2, 'Tidak ada yg bisa', 'Benny Kuncoro', '2011', 'Lokomotif'), (3, 'Tidak mungkin', 'Angga', '2009', 'Erlangga'), (4, 'Ini dia', 'Pillar', '2011', 'Gramedia'); Langkah-langkah nya : - Buat Folder baru bernama jq3 - Download JQgrid di disini atau di website resmi nya disini - Extract Hasil download tadi - Copy folder css dan js dari hasil select ke dalam folder jq3 yg kita buat tadi - download Jquery UI disini - Extract lalu Copy folder css ke folder jq3, bila ada Confirmasi Overwrite Pilih OK Oke, buat File index.php dan Isikan dengan Kode Berikut HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <!-- Mengincludekan JQueryUI CSS. Rename nama sunny dan sesuaikan Folder yg ada di dalam Folder CSS --> <link rel="stylesheet" type="text/css" media="screen" href="./css/sunny/jquery-ui-1.8.16.custom.css" /> <!-- Mengincludekan CSS Jqgrid --> <link rel="stylesheet" type="text/css" media="screen" href="./css/ui.jqgrid.css" /> <style> .tombol{ font-size: 8pt; } </style> <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script> <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> <script type="text/javascript"> function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } $(document).ready(function(){ $("#submit").live('click', function(){ if ($('#nama').val() == '') { alert('Nama buku harus di isi'); $('#nama').focus(); return false; } if ($('#qty').val() == '') { alert('Quantity harus di isi'); $('#qty').focus(); return false; } if ($('#harga').val() == '') { alert('Harga harus di isi'); $('#harga').focus(); return false; } var jwb = confirm('Anda Yakin ingin menyimpan accumulation ini ?'); if (jwb==1) { $("#form1").submit(); } else { return false; } }); $("#kode-search").button({icons: {primary: "ui-icon-search"}, text: simulated }); $("#submit").button(); $("#reset").button(); $("#kode-search").click(function(){ $("#kode-dialog").dialog({ title:"Cari Kode buku", resizable:false, width:500, height:250, show: 'drop', hide: 'scale', modal:true, close:function(){ $(this).dialog('destroy'); } }); $("#tkodebuku").jqGrid({ url: 'json.php', //URL Tujuan Yg Mengenerate accumulation Json nya datatype: "json", //Datatype yg di gunakan mtype: 'GET', colNames: ['Kode buku', 'Nama buku'], colModel: [ {name:'id', index:'id', width: 40, align:'center', sortable: true}, {name:'nama', index:'nama', align:'left', sortable: true} ], rownumbers:true, rowNum:5, rowList:[5,10,15], pager: '#pkodebuku', viewrecords: true, sortname: 'id', sortorder: "asc", width: 470, height: 'auto', caption: ' ', ondblClickRow: function(rowid) { var v = $("#tkodebuku").getRowData(rowid); id = v['id']; nama = v['nama']; $("#kode").val(id); $("#nama").val(id+' - '+nama); $("#kode-dialog").dialog('close'); } }); //$("#pkodebarang_left .navtable").empty(); //$("#tkodebarang").navGrid('#pkodebarang',{edit:false, add:false, del:false}); $("#tkodebuku").jqGrid('navGrid','#pkodebuku',{view:false,edit:false,add:false,del:false}); return false; }); }); </script> </head> <body style="font-size: 9pt; font-family: tahoma, verdana;"> <form name="form1" id="form1" method="post" action=""> <table border="0" cellpadding="3"> <tr> <td>Nama Barang</td> <td> <input type="hidden" readonly="readonly" name="kode" id="kode"> <input type="text" readonly="readonly" name="nama" size="20" id="nama"> <button id="kode-search"> </button> </td> </tr> <tr> <td>Quantity</td> <td> <input type="text" name="qty" size="5" onKeyPress="return isNumberKey(event)" style="text-align: right;" id="qty"> </td> </tr> <tr> <td>Harga</td> <td> <input type="text" name="harga" size="12" onKeyPress="return isNumberKey(event)" style="text-align: right;" id="harga"> </td> </tr> <tr> <td> <input type="submit" name="submit" id="submit" value="Submit"><input type="reset" name="reset" id="reset" value="Reset"> </td> </tr> </table> </form> <br /> <div id="result"> <?php if(isset($_POST["submit"])) { echo "Nama Barang : ".$_POST["nama"]."<br />"; echo "Qty Barang : ".$_POST["qty"]."<br />"; echo "Harga Barang : ".$_POST["harga"]."<br />"; } ?> </div> <!-- Untuk Dialog yg akan munculkan dari Tombol Search Kode --> <div id="kode-dialog" class="" style="display: none; font-size: 10pt"> <table id="tkodebuku" cellpadding="0" cellspacing="0"></table> <div id="pkodebuku" class='ui-widget-header ui-corner-bl ui-corner-br' style="margin-top:0px;"></div> </div> </body> </html> Setelah itu buar file json.php lalu isikan dengan kode berikut PHP Code: <?php $db = mysql_connect("localhost","root",""); $con = mysql_select_db("jq",$db); if(!$con){ echo "Something Problem"; } $page = $_GET['page']; $limit = $_GET['rows']; $sidx = $_GET['sidx']; $sord = $_GET['sord']; if(!$sidx) $sidx=1; function ToSql ($field, $oper, $val) { // we need here more advanced checking using the type of the field - i.e. integer, string, float switch ($field) { default : //mysql_real_escape_string is better if($oper=='bw' || $oper=='bn') return "'" . addslashes($val) . "%'"; else if ($oper=='ew' || $oper=='en') return "'%" . addcslashes($val) . "'"; else if ($oper=='cn' || $oper=! ='nc') return "'%" . addslashes($val) . "%'"; else return "'" . addslashes($val) . "'"; } } ###For Single Searching### //array to translate the search type $ops = array( 'eq'=>'=', //equal 'ne'=>'<>',//not equal 'lt'=>'<', //less than 'le'=>'<=',//less than or equal 'gt'=>'>', //greater than 'ge'=>'>=',//greater than or equal 'bw'=>'LIKE', //begins with 'bn'=>'NOT LIKE', //doesn't begin with 'in'=>'LIKE', //is in 'ni'=>'NOT LIKE', //is not in 'ew'=>'LIKE', //ends with 'en'=>'NOT LIKE', //doesn't end with 'cn'=>'LIKE', // contains 'nc'=>'NOT LIKE' //doesn't contain ); function getWhereClause($col, $oper,! $val){ global $ops; if($oper == 'bw' ! ;|| ;$oper == 'bn') $val .= '%'; if($oper == 'ew' || $oper == 'en' ) $val = '%'.$val; if($oper == 'cn' || $oper == 'nc' || $oper == 'in' || $oper == 'ni') $val = '%'.$val.'%'; return " WHERE $col {$ops[$oper]} '$val' "; } $where = ""; $searchField = isset($_GET['searchField']) ? $_GET['searchField'] : false; $searchOper = isset($_GET['searchOper']) ? $_GET['searchOper']: false; $searchString = isset($_GET['searchString']) ? $_GET['searchString'] : false; if ($_GET['_search'] == 'true') { $where = getWhereClause($searchField,$searchOper,$searchString); } $data = mysql_query("SELECT COUN! T(*) as count FROM buku".$where); $row = mysql_fetch_array($data); $count = $row["count"]; $count > 0 ? $total_pages = ceil($count/$limit) : $total_pages = 0; if ($page > $total_pages) $page=$total_pages; $start = $limit*$page - $limit; if($start <0) $start = 0; $data1 = mysql_query("SELECT * FROM buku ".$where." ORDER BY $sidx $sord LIMIT $start, $limit"); $responce->page = $page; $responce->total = $total_pages; $responce->records = $count; $i=0; while($line = mysql_fetch_array($data1)){ $responce->rows[$i]['id'] = $line["id"]; $responce->rows[$i]['cell'] = array($line["id"],$line["nama"]! ;); $i++; } echo json_encode($responce); ?> Selesai sudah tutorial tentang jquery jqgrid kali ini, Simple But Power Full, sebelumnya saya ucapkan maaf bila masih banyak kekurangan nya.. Lihat Demo-nya disini Download File lengkapnya disini Source From : http://jt3angga.wordpress.com/2012/0...encarian-data/Jual Mobil Murah . Ultrabook Notebook Tipis Harga Murah Terbaik . Harga Notebook .
Angga Sanusi
Angga Sanusi
Posting Komentar