Input Data Barang dengan JQuery, FlexiGrid, JQueryUI dan JSON

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

CREATE TABLE `tbbarang` (
  `kodebarang` char(25) NOT NULL,
  `namabarang` varchar(100) DEFAULT NULL,
  `hargabeli` int(11) DEFAULT NULL,
  `hargajual` int(11) DEFAULT NULL,
  `stokawal` smallint(6) DEFAULT NULL,
  PRIMARY KEY (`kodebarang`)
);

INSERT INTO `tbbarang` VALUES ('001', 'TOP  Kopi', '950', '1000', '1000');
INSERT 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

1. Folder css (untuk menyimpan file css)
2. Folder images (untuk menyimpan file gambar)
3. 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 :

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

Tahap Keenam membuat file ajax.js

// JavaScript Document
$(document).ready(function(){
 
 $("#kode").keyup(function(e){
  var isi = $(e.target).val();
  $(e.target).val(isi.toUpperCase());
 });
 $("#hargabeli").keypress(function(data){
  if (data.which!=8 && data.which!=0 && (data.which<48 data-blogger-escaped-data.which="data.which">57)) {
   return false;
  }
 });
 $("#hargajual").keypress(function(data){
  if (data.which!=8 && data.which!=0 && (data.which<48 data-blogger-escaped-data.which="data.which">57)) {
   return false;
  }
 });
 $("#stok").keypress(function(data){
  if (data.which!=8 && data.which!=0 && (data.which<48 data-blogger-escaped-data.which="data.which">57)) {
   return false;
  }
 });
 //seting Flexi Grid
 $(".data").flexigrid({
    url : 'post-json.php',
    dataType : 'json',
    colModel : [{display : 'No',name : 'no',width : 20,sortable : false,align : 'center'},
       {display : 'Kode',name : 'kodebarang',width : 60,sortable : true,align : 'center'}, 
       {display : 'Nama Barang',name : 'namabarang',width : 180,sortable : true,align : 'left'}, 
       {display : 'Harga Beli',name : 'hargabeli',width : 70,sortable : true,align : 'right'},
       {display : 'Harga Jual',name : 'hargajual',width : 70,sortable : true,align : 'right'},
       {display : 'Stok Awal',name : 'stokawal',width : 50,sortable : true,align : 'right'}
    ],
    buttons : [{name : 'Add',bclass : 'add',onpress : test}, 
      {name : 'Edit',bclass : 'edit',onpress : test}, 
      {name : 'Delete',bclass : 'delete',onpress : test}, 
      {separator : true} ,
      {name : 'Refresh',bclass : 'refresh',onpress : test}
    ],
    searchitems : [ 
     {display : 'Kode',name : 'kodebarang',isdefault : true}, 
     {display : 'Nama Barang',name : 'namabarang' }
    ],
    sortname : "kodebarang",
    sortorder : "asc",
    singleSelect : true,
    usepager : true,
    title : 'Daftar Barang',
    useRp : true,
    rp : 10,
    showTableToggleBtn : false,
    height : 300,
    width : 700,
    pagetext: 'Hal ',
    outof: 's.d'
   });
   function test(com, grid) {
    if (com == 'Delete') {
     //confirm('Delete ' + $('.trSelected', grid).length + ' items?')
     if ($('.trSelected',grid).length == 1) { 
    $('.trSelected',grid).each(function() {
     var id = $(this).attr('id');
     id = id.substring(id.lastIndexOf('row')+3);  // ambil data kolom id       
      var pilih = confirm('Data yang akan dihapus  = '+id+ '?');
     if (pilih==true) {
      HapusData(id);
     }
    });    
      } else {
    alert('Silahkan pilih salah satu baris yang ingin di Hapus');
    return false;
      }
    } else if (com == 'Add') {
     //alert('Add New Item');
     Tambah();
     $('#form').dialog('open');
    }else if (com == 'Edit') {
     //alert('Add New Item');
     if ($('.trSelected',grid).length == 1) { 
    $('.trSelected',grid).each(function() {
     var id = $(this).attr('id');
     id = id.substring(id.lastIndexOf('row')+3);  // ambil data kolom id       
      EditData(id);
    });    
      } else {
    alert('Silahkan pilih salah satu baris yang ingin di edit');
    return false;
      }
    }else if (com == 'Refresh') {
     window.location.replace('index.php');
    }
   }

 $('#form').dialog({
  autoOpen: false,
  width: 600,
  buttons: {
   "Simpan": function() { 
    simpan();
   }, 
   "Tambah": function() { 
    Tambah();
   }, 
   "Kembali": function() { 
    $(this).dialog("close"); 
    $('.data').flexReload();
   } 
  }
 });

 
 function Tambah(){
  $(".input").val('');
  $("#kode").attr("disabled",false);
  $("#kode").val('');
  $("#kode").focus();
 }
 
 function EditData(e){
  var id = e;
  $.ajax({
   type : "POST",
   url  : "cari.php",
   data : "id="+id,
   dataType : "json", //konsep json      
   success : function(data){
    $("#kode").val(id);
    $("#namabarang").val(data.namabarang);
    $("#hargajual").val(data.hargajual);
    $("#hargabeli").val(data.hargabeli);
    $("#stok").val(data.stok);
    
    $("#kode").attr("disabled",true);
    $('#form').dialog('open');
   }
  });
 }
 
 function HapusData(e){
  var id = e;
  $.ajax({
   type : "POST",
   url  : "hapus.php",
   data : "id="+id,     
   success : function(data){
    alert(data);
    $('.data').flexReload();
   }
  });
 }
  
 function simpan(){
  var kode  = $("#kode").val();
  var nama  = $("#namabarang").val();
  var hargabeli = $("#hargabeli").val();
  var hargajual = $("#hargajual").val();
  var stok  = $("#stok").val();

  if(kode.length==0){
   alert('Maaf, Kode Barang tidak boleh kosong');
   $("#kode").focus();
   return false();
  }
  if(nama.length==0){
   alert('Maaf, Nama Barang tidak boleh kosong');
   $("#namabarang").focus();
   return false();
  }
  if(hargabeli.length==0){
   alert('Maaf, Anda belum mengisi Harga Beli');
   $("#hargabeli").focus();
   return false();
  }  
  if(hargajual.length==0){
   alert('Maaf, Anda belum mengisi Harga Jual');
   $("#hargajual").focus();
   return false();
  }
  if(stok.length==0){
   alert('Maaf, Anda belum mengisi Stok atau berikan angka 0');
   $("#stok").focus();
   return false();
  }
  $.ajax({
   type : "POST",
   url  : "simpan.php",
   data : "kode="+kode+"&nama="+nama+"&hargabeli="+hargabeli+"&hargajual="+hargajual+"&stok="+stok,
   success : function(data){
    alert(data);
    $('.data').flexReload();
   }
  });
 }
});

Tahap Keetujuh membuat file cari.php

<?php
include "koneksi.php";

$table = 'tbbarang';
$id  = $_POST['id'];
$where = "WHERE kodebarang='$id'";
$text = "SELECT * FROM $table $where";
$sql  = mysql_query($text);
$row = mysql_num_rows($sql);
if ($row>0){
while ($r=mysql_fetch_array($sql)){ 
 $data['namabarang'] = $r[namabarang];
 $data['hargabeli'] = $r[hargabeli];
 $data['hargajual'] = $r[hargajual];
 $data['stok']  = $r[stokawal];
 echo json_encode($data); // konsep JSON
}
}else{
 $data['namabarang'] = '';
 $data['hargabeli'] = '';
 $data['hargajual'] = '';
 $data['stok']  = '';
 echo json_encode($data);
}
?>

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

untuk mendapatkan file diatas silahkan unduh disini.