Input Data Barang dengan JQuery, FlexiGrid, JQueryUI dan JSON

byutak.atik -
0




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
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
  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 :
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.
Tags

utak.atik

Anda mungkin menyukai postingan ini

Posting Komentar

Lebih baru Lebih lama