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 :

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.

Komentar

  1. sangat membantu ...! http://bo-fsakti.blogspot.com, http://hdt.16mb.com/home

    BalasHapus
  2. kalo primary key nya id gmna buatnya????.....mohon pencerahannya

    BalasHapus
  3. bagus banget artikelnya, cuma gmana ya pak kalau misalnya ditambahkan 1 field untuk image dan bagaimana untuk menampilkannya .... thx pak

    BalasHapus
  4. waduh...ini yang saya cari-cari Pak...terima kasih banyak Pak..Mantep,

    BalasHapus
  5. pak, filenya gak bisa di download, linknya sudah gak ada

    BalasHapus
    Balasan
    1. bagus kalau ada kotak pencariannya juga... termasuk sort data.. bedasarkan nama atau kode...

      Hapus
  6. maaf pak, ko sy runing datanya tidak tampil y?
    di FlexiGrid reload trz...
    solusinya bgaimana y?
    thanks Gan..

    BalasHapus
    Balasan
    1. pak deddy saya juga mengalami masalah yg sama data tidak tampil dan reload truz, koneksi sudah saya cek tdk ada masalah,,,dimana ya kira2 masalahnya pak? sy mengunakan versi xampp terbaru 1.8.1, pengaruh ngak pak?

      Hapus
    2. Pak Deddy, saya juga mengalami masalah yang sama data tidak tampil dan reload terus. Koneksi saya check sudah OK.

      Hapus
  7. kalau untk eksport ke pdf bisa tidak ya pak?atau print

    BalasHapus
  8. keren om deddy.... izin comot buat tugas @arief: coba hapus beberapa field di colom databasenya....

    BalasHapus
  9. itu kok tombol add sama edit g jalan ya bang?

    BalasHapus
  10. wah bagus sekali, bermanfaat. ..kalo nyimpne ama nampilin gambar gmn ya pak ?

    BalasHapus
  11. saya mengalami masalah itu data tidak tampil dan reload terus. Koneksi saya check sudah OK. itu gimana pak? mohon pencerahannya

    BalasHapus
  12. pak deddy saya juga mengalami masalah yg sama data tidak tampil dan reload truz, koneksi sudah saya cek tdk ada masalah,,,dimana ya kira2 masalahnya pak?

    BalasHapus
  13. terima kasih atas berbagi ilmunya.. sangat berguna sekali untuk saya (entaraza@outlook.com)

    BalasHapus
  14. terima kasih atas ilmu yang telah di tuliskan disini.. semoga Alloh melipat gandakan pahalanya...
    ilmu ini sangat berguna sekali bagi saya.. untuk pengembangan sistem saya sedang saya kerjakana...

    BalasHapus
  15. bener-bener membantu pak... :D
    makasih...
    bisa ane oprek kan programmnya pak... >.<

    BalasHapus
  16. bagaimana untuk form edit, input datanya menggunakan pilihan untuk memasukkan nilai tabelnya?

    BalasHapus
  17. Pak Deddy, saya ada masalah pada saat saya running data yang ada di database tidak tampil. tolong bantuannya.

    BalasHapus
  18. Alhamdulillah.. semoga ilmu pak dedi berkah.. izin pake pak..

    BalasHapus
  19. Mas, klo ketika click tombol Edit. saya mau echo variable id di from edit. tp ga tampil mas. knp tu?

    BalasHapus
  20. Artikel yang sangat menarik, ini yang saya cari-cari. Ada gak bang contoh untuk membuat total perhitungan pada kolom tertentu, misal kita punya kolom Debet dan Kredit, kita ingin menampilkan jumlah total Debet atau Kredit di bagian paling bawah (footer atau apa lah namae)

    BalasHapus
  21. Pak Deddy, gimana ya caranya menampilkan data pada grid sesuai dengan pilihan pada Option Select??/
    Thx

    BalasHapus
  22. Pak Deddy, gimana ya cara memasukan data ke Grid sesuai dengan option select

    BalasHapus
  23. ini yang didownload namanya apa ya pak?

    BalasHapus
  24. Penting banget neh buat ane yang lagi migrasi ke open source... Terlebih pembahasan nya sama dengan blog ane yaitu tentang aplikasi barang dan penjualan...

    Tq pak atas share... izin ctrl-d

    BalasHapus
  25. Pak deddy saya mau nambahin kolom itu yang ditambah apanya ya ? saya sudah tambah di ajax.js tapi masih belum bisa. mohon dibantu ya pak

    BalasHapus
  26. pak ada sampel yg menggunakan combo box atau chek.... mksh...

    BalasHapus
  27. Link untuk download nya udah g ada itu pak

    BalasHapus
  28. iya pak tdk bisa di download

    BalasHapus
  29. http://prntscr.com/8hgbcd
    Data nya tidakmau tampil pak Kalo mengunakan Xampp 3.2.1
    Mohon pencetrahanya

    BalasHapus
  30. di flexi gridnya bisa ditambah cari data nggak berdasarkan kode barang dan nama barang

    BalasHapus
  31. link downloadnya sudah gak bisa pak dedy

    BalasHapus

Posting Komentar