Input Data Barang dengan JQuery, FlexiGrid, JQueryUI dan JSON

Rabu, 17 Desember 2014

Pada tutorial kali ini saya akan membuat form barang yang dapat memproses input, edit dan hapus data, ato bahasa krennya CRUD (Create, Read, Update dan Delete). kita harus mengunduh file-file yang dibutuhkan seperti :

JQuery
JQueryUI
FLexiGrid. mudah-mudahan ada perkembangan lagi.
XAMPP, bagi yang belum memiliki webservernya.

tutorial kali ini ada dapat menggunakan database sebelumnya disini, akan tetapi jangan kawatir saya tetap akan membahasnya.
Langsung aja ke materi :
Tahap Pertama membuat database.

Struktur database dan contoh datanya

1CREATE TABLE `tbbarang` (
2  `kodebarang` char(25) NOT NULL,
3  `namabarang` varchar(100) DEFAULT NULL,
4  `hargabeli` int(11) DEFAULT NULL,
5  `hargajual` int(11) DEFAULT NULL,
6  `stokawal` smallint(6) DEFAULT NULL,
7  PRIMARY KEY (`kodebarang`)
8);

1INSERT INTO `tbbarang` VALUES ('001', 'TOP  Kopi', '950', '1000', '1000');
2INSERT INTO `tbbarang` VALUES ('002', 'Pulpy Orange', '4500', '5000', '10');

Tahap Kedua membuat Folder
Buatlah folder databarang pada folder HTDOCS kalo Anda menggunakan XAMPP. setelah itu buatlah sub folder yang khusus menyimpan file-file yang dibutuhkan

Folder css (untuk menyimpan file css)
Folder images (untuk menyimpan file gambar)
Folder js (untuk menimpan file javascrip/jquery)

isikan hasil unduhan diatas kedalam sub folder yang Anda buat bedasarkan nama foldernya.

Tahap Ketiga membuat file koneksi.php
isi file seperti berikut :

1

Tahap Keempat membuat file index.php ada di file unduh.
Tahap Kelima membuat file post-json.php

1

Tahap Keenam membuat file ajax.js

001// JavaScript Document
002$(document).ready(function(){
003  
004 $("#kode").keyup(function(e){
005  var isi = $(e.target).val();
006  $(e.target).val(isi.toUpperCase());
007 });
008 $("#hargabeli").keypress(function(data){
009  if (data.which!=8 && data.which!=0 && (data.which<48 data-blogger-escaped-data.which="data.which">57)) {
010   return false;
011  }
012 });
013 $("#hargajual").keypress(function(data){
014  if (data.which!=8 && data.which!=0 && (data.which<48 data-blogger-escaped-data.which="data.which">57)) {
015   return false;
016  }
017 });
018 $("#stok").keypress(function(data){
019  if (data.which!=8 && data.which!=0 && (data.which<48 data-blogger-escaped-data.which="data.which">57)) {
020   return false;
021  }
022 });
023 //seting Flexi Grid
024 $(".data").flexigrid({
025    url : 'post-json.php',
026    dataType : 'json',
027    colModel : [{display : 'No',name : 'no',width : 20,sortable : false,align : 'center'},
028       {display : 'Kode',name : 'kodebarang',width : 60,sortable : true,align : 'center'}, 
029       {display : 'Nama Barang',name : 'namabarang',width : 180,sortable : true,align : 'left'}, 
030       {display : 'Harga Beli',name : 'hargabeli',width : 70,sortable : true,align : 'right'},
031       {display : 'Harga Jual',name : 'hargajual',width : 70,sortable : true,align : 'right'},
032       {display : 'Stok Awal',name : 'stokawal',width : 50,sortable : true,align : 'right'}
033    ],
034    buttons : [{name : 'Add',bclass : 'add',onpress : test}, 
035      {name : 'Edit',bclass : 'edit',onpress : test}, 
036      {name : 'Delete',bclass : 'delete',onpress : test}, 
037      {separator : true} ,
038      {name : 'Refresh',bclass : 'refresh',onpress : test}
039    ],
040    searchitems : [ 
041     {display : 'Kode',name : 'kodebarang',isdefault : true}, 
042     {display : 'Nama Barang',name : 'namabarang' }
043    ],
044    sortname : "kodebarang",
045    sortorder : "asc",
046    singleSelect : true,
047    usepager : true,
048    title : 'Daftar Barang',
049    useRp : true,
050    rp : 10,
051    showTableToggleBtn : false,
052    height : 300,
053    width : 700,
054    pagetext: 'Hal ',
055    outof: 's.d'
056   });
057   function test(com, grid) {
058    if (com == 'Delete') {
059     //confirm('Delete ' + $('.trSelected', grid).length + ' items?')
060     if ($('.trSelected',grid).length == 1) { 
061    $('.trSelected',grid).each(function() {
062     var id = $(this).attr('id');
063     id = id.substring(id.lastIndexOf('row')+3);  // ambil data kolom id       
064      var pilih = confirm('Data yang akan dihapus  = '+id+ '?');
065     if (pilih==true) {
066      HapusData(id);
067     }
068    });    
069      } else {
070    alert('Silahkan pilih salah satu baris yang ingin di Hapus');
071    return false;
072      }
073    } else if (com == 'Add') {
074     //alert('Add New Item');
075     Tambah();
076     $('#form').dialog('open');
077    }else if (com == 'Edit') {
078     //alert('Add New Item');
079     if ($('.trSelected',grid).length == 1) { 
080    $('.trSelected',grid).each(function() {
081     var id = $(this).attr('id');
082     id = id.substring(id.lastIndexOf('row')+3);  // ambil data kolom id       
083      EditData(id);
084    });    
085      } else {
086    alert('Silahkan pilih salah satu baris yang ingin di edit');
087    return false;
088      }
089    }else if (com == 'Refresh') {
090     window.location.replace('index.php');
091    }
092   }
093
094 $('#form').dialog({
095  autoOpen: false,
096  width: 600,
097  buttons: {
098   "Simpan": function() { 
099    simpan();
100   }, 
101   "Tambah": function() { 
102    Tambah();
103   }, 
104   "Kembali": function() { 
105    $(this).dialog("close"); 
106    $('.data').flexReload();
107   } 
108  }
109 });
110
111  
112 function Tambah(){
113  $(".input").val('');
114  $("#kode").attr("disabled",false);
115  $("#kode").val('');
116  $("#kode").focus();
117 }
118  
119 function EditData(e){
120  var id = e;
121  $.ajax({
122   type : "POST",
123   url  : "cari.php",
124   data : "id="+id,
125   dataType : "json", //konsep json      
126   success : function(data){
127    $("#kode").val(id);
128    $("#namabarang").val(data.namabarang);
129    $("#hargajual").val(data.hargajual);
130    $("#hargabeli").val(data.hargabeli);
131    $("#stok").val(data.stok);
132     
133    $("#kode").attr("disabled",true);
134    $('#form').dialog('open');
135   }
136  });
137 }
138  
139 function HapusData(e){
140  var id = e;
141  $.ajax({
142   type : "POST",
143   url  : "hapus.php",
144   data : "id="+id,     
145   success : function(data){
146    alert(data);
147    $('.data').flexReload();
148   }
149  });
150 }
151   
152 function simpan(){
153  var kode  = $("#kode").val();
154  var nama  = $("#namabarang").val();
155  var hargabeli = $("#hargabeli").val();
156  var hargajual = $("#hargajual").val();
157  var stok  = $("#stok").val();
158
159  if(kode.length==0){
160   alert('Maaf, Kode Barang tidak boleh kosong');
161   $("#kode").focus();
162   return false();
163  }
164  if(nama.length==0){
165   alert('Maaf, Nama Barang tidak boleh kosong');
166   $("#namabarang").focus();
167   return false();
168  }
169  if(hargabeli.length==0){
170   alert('Maaf, Anda belum mengisi Harga Beli');
171   $("#hargabeli").focus();
172   return false();
173  }  
174  if(hargajual.length==0){
175   alert('Maaf, Anda belum mengisi Harga Jual');
176   $("#hargajual").focus();
177   return false();
178  }
179  if(stok.length==0){
180   alert('Maaf, Anda belum mengisi Stok atau berikan angka 0');
181   $("#stok").focus();
182   return false();
183  }
184  $.ajax({
185   type : "POST",
186   url  : "simpan.php",
187   data : "kode="+kode+"&nama="+nama+"&hargabeli="+hargabeli+"&hargajual="+hargajual+"&stok="+stok,
188   success : function(data){
189    alert(data);
190    $('.data').flexReload();
191   }
192  });
193 }
194});

Tahap Keetujuh membuat file cari.php

01<?php
02include "koneksi.php";
03
04$table = 'tbbarang';
05$id  = $_POST['id'];
06$where = "WHERE kodebarang='$id'";
07$text = "SELECT * FROM $table $where";
08$sql  = mysql_query($text);
09$row = mysql_num_rows($sql);
10if ($row>0){
11while ($r=mysql_fetch_array($sql)){ 
12 $data['namabarang'] = $r[namabarang];
13 $data['hargabeli'] = $r[hargabeli];
14 $data['hargajual'] = $r[hargajual];
15 $data['stok']  = $r[stokawal];
16 echo json_encode($data); // konsep JSON
17}
18}else{
19 $data['namabarang'] = '';
20 $data['hargabeli'] = '';
21 $data['hargajual'] = '';
22 $data['stok']  = '';
23 echo json_encode($data);
24}
25?>

Tahap Kedelapan membuat file hapus.php
Tahap Kesembilan membuat file simpan.php

untuk mendapatkan file diatas silahkan unduh disini.