Hammer Corp: Membuat Aplikasi Perpustakaan Part 4

Setelah kita membuat master jenis buku, dibagian ini dilanjutkan dengan membuat modul master buku

Pada master buku ini kita tetap menggunakan grid sebagai tampilan datanya. tetapi saya tidak menggunakan editor grid untuk melakukan update/add data tetapi menggunakan form yang akan muncul ketika tombol edit/tambah ditekan. kenapa menggunakan form? karena saya pengen pakai dengan form. hihihi.. bukan itu kok alasannya. Saya menggunakan form sehingga jika anda menginginkan ditambahkan sebuah field gambar (cover buku) bisa langsung diterapkan dengan menambahkan item upload field di form. bagaimana caranya? silahkan dipikir sendiri : ) Oke lah kalo begitu daripada kebanyakan bacot kita buat rancangan interfacenya

Buat GridPanel untuk menampilkan data-data master buku
Buat toolbar Tambah data di Grid untuk menampilkan form
Untuk update/delete tambahkan dua buah kolom di grid dengan header Edit dan Hapus

Setelah membuat gambaran interfacenya, mari kita mengcoding sampe telerr. hehehe

Buat file master_buku.js di folder js. file ini adalah interface utama kita

var cm1 = new Ext.grid.ColumnModel({
 defaults: {
  sortable:true
 },
 columns: [
 {
  dataIndex:'id_buku',
  hidden:true,
  hideable:false
 },{
  dataIndex:'id_jenis',
  hidden:true,
  hideable:false
 },{
  dataIndex:'judul_buku',
  header:'Judul Buku',
  width:300
 },{
  dataIndex:'jenis_buku',
  header:'Jenis Buku',
  width:150
 },{
  dataIndex:'penerbit_buku',
  header:'Penerbit Buku',
  width:150
 },{
  dataIndex:'tahun_terbit',
  header:'Tahun Terbit',
  width:100
 },{
  header:'Edit',
  dataIndex:'',
  width:60,
  hideable:false,
  sortable:false,
  align:'center',
  renderer:function(){
   return ":pointer;" src="images/book_open.png" alt="" />";
  }
 },{
  header:'Hapus',
  dataIndex:'id_buku',
  width:60,
  hideable:false,
  sortable:false,
  align:'center',
  renderer:function(){
   return ":pointer;" src="images/cancel.png" alt="" />";
  }
 
 }
 ]
}
);
 
var ds1 = new Ext.data.JsonStore({
 url:'handle/ajax.buku.php',
 totalProperty:'total',
 baseParams:{
  task:'doRead'
 },
 root:'data',
 fields:[
 {
  name:'id_buku'
 },{
  name:'id_jenis'
 },{
  name:'judul_buku'
 },{
  name:'jenis_buku'
 },{
  name:'penerbit_buku'
 },{
  name:'tahun_terbit'
 }
 ],
 sortInfo:{
  field:'judul_buku',
  direction:'ASC'
 },
 remoteSort:true
});
 
ds1.load({
 params:{
  start:0,
  limit:100
 }
});
 
var gridBuku = new Ext.grid.GridPanel({
 title:'Master Buku',
 ds : ds1,
 cm: cm1,
 stripeRows:true,
 viewConfig:{
  forceFit:false
 },
 loadMask:true,
 bbar: new Ext.PagingToolbar({
  store: ds1,
  pageSize: 100,
  displayInfo:true,
  displayMsg : 'Displaying Data {0} - {1} of {2}',
  emptyMsg : "No Data to display"
 }),
 tbar: [
 {
  text:'Tambah Baru',
  iconCls:'tambah',
  handler: function(){
   form.getForm().reset();
   winForm.setTitle('Tambah Baru');
   winForm.show(this.id);
  }
 }],
 listeners:{
  celldblclick:function(grid,row,col){
   if (col ==6){
    winForm.setTitle('Edit Data');
    form.getForm().setValues(ds1.getAt(row).data);
    winForm.show();
   }
   if (col==7){
    Ext.MessageBox.show({
     title : 'Delete?',
     msg : "Anda Ingin Menghapus Data ini ",
     buttons : Ext.MessageBox.YESNO,
     fn : function(a) {
      if (a == "yes") {
       Ext.Ajax.request({
        url : 'handle/ajax.buku.php',
        params : {
         task : "doDestroy",
         id_buku : ds1.getAt(row).data.id_buku
        },
        success : function(response) {
         var res = Ext.decode(response.responseText);
         if (res.success) {
          ds1.reload();
         } else {
          Ext.MessageBox.show({
           title : 'Alert',
           msg : 'Failed to Delete Data: Error Message : '
             + res.message,
           buttons : Ext.MessageBox.OK,
           icon : Ext.MessageBox.ERROR
          });
         }
        }
       });
      }
     },
     icon : Ext.MessageBox.WARNING
    });
 
   }
  }
 }
}
);
 
var form = new Ext.form.FormPanel({
 labelAlign:'left',
 frame:true,
 border:false,
 labelWidth:100,
 bodyStyle:"padding:4px;",
 defaults:{
  labelSeparator:'',
  anchor:'95%'
 },
 defaultType:'textfield',
 items:[
 {
  xtype:'hidden',
  name:'id_buku'
 },{
  fieldLabel:'Judul Buku',
  name:'judul_buku',
  allowBlank:false
 },{
  xtype:'combo',
  fieldLabel:'Jenis Buku',
  allowBlank:false,
  store:ds,
  displayField:'jenis_buku',
  valueField:'id_jenis',
  hiddenName:'id_jenis',
  pageSize:30,
  triggerAction:'all'
 },{
  fieldLabel:'Penerbit',
  name:'penerbit_buku'
 },{
  xtype:'numberfield',
  name:'tahun_terbit',
  fieldLabel:'Tahun Terbit'
 }
 ]
});
 
var winForm = new Ext.Window({
 title:'Master Buku',
 width:350,
 height:200,
 closeAction:'hide',
 border:false,
 modal:false,
 layout:'fit',
 items:[form],
 buttons:[
 {
  text:'Simpan',
  handler:function(){
   task = 'doUpdate';
   if (winForm.title =='Tambah Baru')
    task = 'doCreate';
   if (form.getForm().isValid()){
    form.getForm().submit({
     url:'handle/ajax.buku.php',
     waitMsg : 'Menyimpan Data',
     params:{
      task:task
     },
     success:function(){
      winForm.hide();
      ds1.reload();
     },
     failure:function(a,b){
      Ext.MessageBox.show({
       title : 'Alert',
       msg : 'Failed Save Data : ' + b.result.message,
       buttons : Ext.MessageBox.OK,
       animEl: this.id,
       icon : Ext.MessageBox.ERROR
      });
 
     }
    }
    );
   }
  }
 },{
  text:'Tutup',
  handler:function(){
   winForm.hide();
  }
 }
 ]
});

Edit file index.js di folder js. tambahkan item gridBuku pada content_panel

activeItem:0,
  items:[
   start,gridJenis,gridBuku
  ],

Buat file class.buku.php, simpan di folder class


/**
 * Class untuk melakukan operasi pada tabel jenis Buku
 *
 */
class buku extends Db {
 /**
  * Nama Tabel
  *
  * @var string
  */
 protected $table ="ext_buku"; 
 
 /**
  * Fungsi untuk membaca data tabel
  *
  * @param array $request
  * @return string
  */
 public function doRead($request){
  $start = $request['start']; 
  $limit  = $request['limit']; 
  $dir  = $request['dir']; 
  $sort  = $request['sort'];
  $total =0; 
  $rsTotal = $this->selectSQL("select count(*) from ".$this->table); 
  while ($row = mysql_fetch_array($rsTotal))
   $total = $row[0];
 
  $sql = "select id_buku,ext_jenis.id_jenis,jenis_buku,judul_buku,penerbit_buku,tahun_terbit from ".$this->table;
  $sql .= ",ext_jenis where ext_jenis.id_jenis = ext_buku.id_jenis"; 
  $sql .= " order by ". $sort ." ". $dir;
  $sql .= " limit ".$start.",".$limit;
  $rsData = $this->selectSQL($sql); 
  $data = Array();
  while ($row = mysql_fetch_object($rsData)){
   $data[] = $row;  
  }
 
  $result = new stdClass(); 
  $result->success = true; 
  $result->total = $total; 
  $result->data = $data; 
 
  return json_encode($result); 
 }
 
 /**
  * Fungsi untuk memasukkan data baru
  *
  * @param string $data
  * @return string
  */
 public function doCreate($data){
  $judul_buku  = $data['judul_buku']; 
  $id_jenis   = $data['id_jenis']; 
  $penerbit_buku  = $data['penerbit_buku']; 
  $tahun_terbit  = $data['tahun_terbit']; 
  $sql    =  "insert into ". $this->table; 
  $sql    .= " (judul_buku,id_jenis,penerbit_buku,tahun_terbit)"; 
  $sql    .= " values('$judul_buku','$id_jenis','$penerbit_buku','$tahun_terbit')";
  $error   = $this->executeSQL($sql); 
  $succes = ($error !="")?false:true;  
  $result = new stdClass(); 
  $result->success =$succes; 
  $result->message=$error; 
  return json_encode($result); 
 }
 
 /**
  * Fungsi untuk melakukan update data
  *
  * @param string $data
  * @return string
  */
 public function doUpdate($data){
  $id_buku  =$data['id_buku'];
  $judul_buku  = $data['judul_buku']; 
  $id_jenis   = $data['id_jenis']; 
  $penerbit_buku  = $data['penerbit_buku']; 
  $tahun_terbit  = $data['tahun_terbit']; 
  $sql    =  "update ". $this->table; 
  $sql    .= " set judul_buku='$judul_buku',id_jenis ='$id_jenis',penerbit_buku='$penerbit_buku'"; 
  $sql    .= ",tahun_terbit='$tahun_terbit' where id_buku ='$id_buku'";
  $error   = $this->executeSQL($sql); 
  $succes = ($error !="")?false:true;  
  $result = new stdClass(); 
  $result->success =$succes; 
  $result->message=$error; 
  return json_encode($result);   
 }
 
 /**
  * Fungsi untuk melakukan delete data
  *
  * @param string $id_buku
  * @return string
  */
 public function doDestory($id_buku){
  $sql = "delete from ".$this->table . " where id_buku ='$id_buku'"; 
  $this->executeSQL($sql); 
  $result = new stdClass(); 
  $result->success =true; 
  $result->message="Data Berhasil dihapus";  
  return json_encode($result);  
 }
}
?>

Buat file ajax.buku.php dan simpan difolder handle


require_once("../config.php"); 
require_once("../class/class.db.php");
require_once("../class/class.buku.php");
 
$task = $_REQUEST['task']; 
$buku = new buku(); 
 
switch ($task){
 case 'doRead':
  $result = $buku->doRead($_REQUEST); 
  echo $result;  
 break; 
 
 case 'doCreate': 
  $result = $buku->doCreate($_REQUEST); 
  echo $result; 
 break; 
 
 case 'doUpdate': 
  $result = $buku->doUpdate($_REQUEST); 
  echo $result; 
 break; 
 
 case 'doDestroy': 
  $result = $buku->doDestory($_REQUEST['id_buku']); 
  echo $result; 
 break; 
 
}
?>

Edit file index.php. sisipkan script master_buku.js agar diload pada saat halaman dibuka

<script src="js/master_buku.js" type="text/javascript">script>

ScreenShoot Master Buku :

Download Source Code Lengkap disini
Selesai sudah untuk tutorial bagian ini . Untuk Menu-menu berikutnya silahkan dibuat sendiri

4 komentar:

tero17 Juni 2010 pukul 12.49
nice inpo gan, thank's bgt.....
BalasHapus
Balasan
Unknown19 Juni 2010 pukul 17.27
iya sama2...
BalasHapus
Balasan
Anonim3 Januari 2011 pukul 16.55
thx gan, misal yg di menu master buku, bagian edit dan hapus di buat shortcut di sebelah tombol tambah baru, bagaimana caranya gan?
BalasHapus
Balasan
Unknown29 Januari 2011 pukul 13.12
mohon maaf sebelumnya gan...
soalnya ini cma copas...
trus sy belum pernah belajar bahasa ini...
jd untuk lebih jelasnya silahkan k http://blog.rosihanari.net/
mudah"an ini bisa membantu agan...
thanks atas komennya...!

jangan segan mampir lgi ya..
BalasHapus
Balasan

Tambahkan komentar

Please leave your comment.
Your Feedback is very helpful for the development of this blog. ♥
(ヘ。ヘ)

Thanks

About Admin's

Category

Followers

FEEDJIT Live Traffic Feed

Kamis, 31 Desember 2009

Membuat Aplikasi Perpustakaan Part 4

4 komentar:

Leave a comment

Supported

My Banner

Donate

hammerboy1828's Fans Box