Aplikasi Inventory Sederhana - Form Transaksi Barang Masuk

<a href="http://pojokprogrammer.net/content/aplikasi-inventory-sederhana-form-tr…">Form Transaksi Barang Masuk</a> | Setelah sebelumnya kita berhasil membuat <a href="http://pojokprogrammer.net/content/aplikasi-inventory-sederhana-form-ma…">form entri master barang</a>, berikutnya kita akan membuat form untuk mengelola proses CRUD (Create, Read, Update, Delete) data Transaksi Barang Masuk di Aplikasi Inventory ini. Untuk mengelola data master barang ini, kita memerlukan 2 (dua) buah form, yaitu Form List Transaksi Barang Masuk, dan Form Entri Transaksi Barang Masuk. Sama seperti form untuk mengelola data master barang, kedua form transaksi ini juga akan menggunakan metode <a href="http://pojokprogrammer.net/tags/data-binding">data-binding</a> untuk menampilkan data yang berhasil diambil menggunakan library data access layer yang kita buat sebelumnya.

<blockquote>
Artikel ini adalah lanjutan dari artikel berseri tentang <a href="http://pojokprogrammer.net/node/41">Tutorial Membuat Aplikasi Inventory Sederhana Menggunakan VB.net dan Database MySQL</a>. 
</blockquote>
<h3>Persiapkan Data Access Layer</h3>
Form transaksi ini merupakan form master-detail yang melibatkan 2 (dua) buah table, yaitu transactions sebagai master table, dan transaction_details sebagai detail table. Desain dari kedua table ini dapat di lihat dalam <a href="http://pojokprogrammer.net/content/aplikasi-inventory-sederhana-analisa…">artikel ini</a>. Untuk itu kita perlu mendefinisikan relasi foreign key antar DataTable yang ada di dalam DataSet dsInventory. Relasi ini yang nantinya akan sangat membantu kita dalam proses data-binding ke form transaksi.

Setting Relasi Foreign Key

Pertama-tama bukalah desain DataSet dsInventory, kemudian cari link relasi antara table transactions dengan table transaction_details, setelah itu klik tombol kanan mouse untuk menampilkan context menu seperti gambar di bawah ini.
<img alt="Persiapkan Data Access Layer Edit Relation Foreign Key" src="/sites/default/files/tutorial/vbnet/transaksi/02-data-layer.png" style="height:498px; width:700px" />
Setelah ini pilihlah menu Edit Relation, dan kemudian ubahlah setting-nya menjadi "Both Relation and Foreign Key Contraints" dan ubah juga setting Update Rule dan Delete Rule menjadi Cascade, seperti tampak pada gambar di bawah ini.
<img alt="Persiapkan Data Access Layer Edit Relation Foreign Key" src="/sites/default/files/tutorial/vbnet/transaksi/03-data-layer.png" style="height:498px; width:700px" />

Setting Query Berdasarkan Jenis Transaksi

Berikutnya kita tambahkan Query untuk memudahkan proses data retrieval (temu kembali data) di form list transaksi barang masuk, Caranya dengan membuka DataSet dsInventory, kemudian lakukan klik kanan pada table transactions dan pilih menu "Add Query" seperti tampak pada gambar di bawah ini.
<img alt="Persiapkan Data Access Layer Add Tambah Query By Tipe Jenis Transaksi" src="/sites/default/files/tutorial/vbnet/transaksi/01-data-layer.png" style="height:498px; width:700px" />
Setelah itu berikan nama method sebagai FillByType dan GetDataByType, karena method ini kita gunakan untuk mengambil data berdasarkan tipe atau jenis transaksinya. Hasilnya akan tampak seperti gambar di bawah ini.
<img alt="Persiapkan Data Access Layer Add Tambah Query By Tipe Jenis Transaksi" src="/sites/default/files/tutorial/vbnet/transaksi/00-data-layer.png" style="height:498px; width:700px" />

<h3>Desain Form Entri Transaksi Barang Masuk</h3>
Berikutnya kita buat desain form transaksi barang masuk. Desain form transaksi ini akan menggunakan Visual Inheritance seperti yang sudah dibahas sebelumnya di artikel <a href="http://pojokprogrammer.net/content/aplikasi-inventory-sederhana-desain-…">desain user interface</a> dan <a href="http://pojokprogrammer.net/content/aplikasi-inventory-sederhana-form-ma…">desain form master barang</a>, jadi silakan pelajari kedua artikel tersebut sebelum melanjutkan membaca artikel ini.

Desain Form Entri Barang Masuk

Silakan buat sebuah Inherited Form dari template form List dan kemudian tambahkan semua kontrol yang diperlukan antara lain 
<ul>
<li>TextBox untuk Kode Transaksi</li>
<li>DateTimePicker untuk Tanggal Transaksi</li>
<li>Multiline TextBox untuk field Remarks atau Keterangan</li>
<li>DataGridView untuk detail transaksi</li>
</ul>
Tambahkan juga beberapa komponen
<ul>
<li>DataSet DsInventory</li>
<li>TransactionsTableAdapter untuk proses retrieval dan saving data di table transactions.</li>
<li>Transaction_detailsTableAdapter untuk proses retrieval dan saving data di table transaction_details.</li>
<li>ItemsTableAdapter untuk proses retrieval lookup data items</li>
</ul>
Hasilnya akan tampak seperti gambar di bawah ini.
<img alt="Desain Form Entri Transaksi Barang Masuk User Inteface Design" src="/sites/default/files/tutorial/vbnet/transaksi/10-desain-form-entri.png" style="height:498px; width:700px" />
Setelah desain form selesai kita buat, lanjutkan dengan setting data-binding pada property Text untuk field Transaction Code seperti tampak pada gambar di bawah ini. Lakukan juga hal yang sama untuk field Transaction Date, Remarks dan DataGridView. Gambar di bawah adalah contoh setting data-binding property Text untuk Transaction Code.
<img alt="Desain Form Entri Transaksi Barang Masuk User Inteface Design" src="/sites/default/files/tutorial/vbnet/transaksi/11-desain-form-entri.png" style="height:498px; width:700px" />

Berikutnya yang perlu kita lakukan adalah mengkonfigurasikan binding DataGridView agar memudahkan kita menambahkan detail barang yang terlibat dalam transaksi bersangkutan. Khusus untuk binding DataGridView, yang kita lakukan adalah setting property DataMember dari DataGridView ke relasi yang sudah kita buat sebelumnya, yaitu transaction_details_ibfk_1, seperti tampak pada gambar di bawah ini.

Setting DataGridView untuk Master-Detail

Setelah setting binding kita lakukan, selanjutnya ubah property Visible untuk beberapa kolom yang tidak perlu dilihat oleh user atau pengguna, misalkan kolom id, trans_id, item_code, dan item_name. Caranya adalah dengan melakukan klik kanan mouse di atas DataGridView, kemudian pilih menu "Edit Columns" setelah itu silakan ubah property visible menjadi false, seperti tampak pada gambar di bawah ini.

Setting DataGridView untuk Master-Detail

Untuk memudahkan pengguna memilih barang yang akan masuk dalam transaksi ini, maka kita buatkan sebuah ComboBox berisikan list Items sehingga user dapat langsung memilih dari daftar yang tersedia. Caranya adalah buka menu "Edit Columns" kemudian pilih field item_id dan set ColumnType sebagai ComboBoxColumn, seperti tampak pada gambar di bawah ini.

Setting ComboBox Items di DataGridView untuk Master-Detail

Berikutnya kita beritahukan vb.net untuk mengambil data Items dari DataSet DsInventory dengan cara mengkonfigurasikan property DataSource, DisplayMember, dan ValueMember menjadi seperti tampak pada gambar di bawah ini.

Setting ComboBox Items di DataGridView untuk Master-Detail

Hasil akhirnya akan tampak seperti pada gambar di bawah ini.

Setting ComboBox Items di DataGridView untuk Master-Detail

<h3>Kode Sumber Form Entri Transaksi Barang Masuk</h3>
Kode sumber untuk proses penyimpanan data dalam model master-detail agak sedikit sulit dikarenakan setelah menyimpan data baru ke master table, kita harus mengambil id auto_increment yang dihasilkan dari database kemudian menyesuaikannya ke data di detail table agar referential integrity tetap terjaga.

Kode Sumber Constructor

Constructur New kita buat dua versi untuk membedakan proses Add atau Edit, karena perlakuannya berbeda pada saat penyimpanan data, asumsinya adalah jika TransID yang diberikan bernilai kurang dari 0 (nol) maka kita anggap menambahkan data baru.
<pre class="brush:vbnet">
Public Sub New()
' This call is required by the designer.
InitializeComponent()
' panggil inisialisasi database
InitializeDatabase(-1)
End Sub

Public Sub New(TransID As Integer)
' This call is required by the designer.
InitializeComponent()
' panggil inisialisasi database
InitializeDatabase(TransID)
End Sub
</pre>

Kode Sumber Inisialisasi Database

Inisialisasi database membedakan proses add new dan edit data seperti tampak pada potongan kode berikut ini.
<pre class="brush:vbnet">
Private Sub InitializeDatabase(TransID As Integer)
' load lookup/reference table
Me.ItemsTableAdapter.Fill(Me.DsInventory.items)
' try retrieve data
Try
' periksa nilai ItemID
' jika kurang dari 0 maka kita asumsikan mau bikin data baru
' jika lebih dari 0 maka kita asumsikan ambil bikin data lama
If TransID < 0 Then
IsNewData = True
' tambahkan row baru
Me.BindingContext(Me.DsInventory.transactions).AddNew()
' nilai default untuk beberapa field
Dim NewID As String = Helper.GenerateNewID(TransCode)
Dim dv As DataRowView = Me.BindingContext(Me.DsInventory.transactions).Current
dv("type_id") = 1 ' IN: barang masuk
dv("trans_code") = NewID
dv("trans_date") = DateTime.Today
TextBox1.Text = NewID
DateTimePicker1.Value = DateTime.Today
Else
IsNewData = False
' retrieve data dari database
Me.TransactionsTableAdapter.FillByID(Me.DsInventory.transactions, TransID)
Me.Transaction_detailsTableAdapter.FillByTransID(Me.DsInventory.transaction_details, TransID)
End If
Catch ex As Exception
MessageBox.Show("Error retrieving data from database\nDetails: " + ex.Message,
Application.ProductName, MessageBoxButtons.OK, MessageBoxIcon.Exclamation)
End Try
End Sub
</pre>

Kode Sumber Simpan Data

Proses penyimpanan data melibatkan dua table seperti pada potongan kode di bawah ini, silakan perhatikan komentar pada tiap baris kode yang menjelaskan maksud dari masing-masing baris kode yang ada.
<pre class="brush:vbnet">
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
' try saving data
Try
' akhiri proses editing
Me.BindingContext(Me.DsInventory.transactions).EndCurrentEdit()
Me.BindingContext(Me.DsInventory.transaction_details).EndCurrentEdit()
' cek apakah add new atau edit data
If (IsNewData) Then
Dim dsChanges As New dsInventory
' copy master record dari main dataset
' harus dilakukan krena main dataset sebelumnya sudah
' AcceptChanges padahal belum diupdate ke database
dsChanges.transactions.Rows.Add(Me.DsInventory.transactions(0).ItemArray)
' copy juga detail record dari main dataset
For i = 0 To Me.DsInventory.transaction_details.Rows.Count - 1
dsChanges.transaction_details.Rows.Add(Me.DsInventory.transaction_details(i).ItemArray)
Next

' simpan perubahan ke master table
Me.TransactionsTableAdapter.Update(dsChanges.transactions)

' retrieve generated identity field
Dim id As Long = 0
Dim sql As String = "select last_insert_id()"
Using cn As New MySqlConnection(My.Settings.inventoryConnectionString)
Using cm As New MySqlCommand(sql, cn)
cn.Open()
id = cm.ExecuteScalar
cn.Close()
End Using
End Using

' assign retrieved id to master table
dsChanges.transactions(0).id = id
dsChanges.transactions.AcceptChanges()
' simpan perubahan ke details table
Me.Transaction_detailsTableAdapter.Update(dsChanges.transaction_details)

Else
' simpan perubahan ke database
Me.TransactionsTableAdapter.Update(Me.DsInventory.transactions)
Me.Transaction_detailsTableAdapter.Update(Me.DsInventory.transaction_details)
End If
' informasikan data berhasil disimpan
MessageBox.Show("Data BERHASIL disimpan!",
Application.ProductName, MessageBoxButtons.OK, MessageBoxIcon.Information)
' tutup form
Me.Close()
Catch ex As Exception
MessageBox.Show("Error saving data to database " + vbCrLf + "Details: " + ex.Message,
Application.ProductName, MessageBoxButtons.OK, MessageBoxIcon.Exclamation)
End Try
End Sub
</pre>

<h3>Desain Form List Transaksi Barang Masuk</h3>
Berikutnya kita buat desain form list transaksi barang masuk. Desain form list transaksi ini juga akan menggunakan Visual Inheritance seperti yang sudah dibahas sebelumnya di artikel <a href="http://pojokprogrammer.net/content/aplikasi-inventory-sederhana-desain-…">desain user interface</a> dan cara melakukan setting data-binding untuk grid list transaksi bisa di lihat di artikel <a href="http://pojokprogrammer.net/content/aplikasi-inventory-sederhana-form-ma…">desain form master barang</a>, jadi silakan pelajari kedua artikel tersebut sebelum melanjutkan membaca artikel ini.

Desain Form List Transaksi Barang Masuk

<h3>Kode Sumber Form List Transaksi Barang Masuk</h3>
Secara umum hampir tidak ada perbedaan pada code di artikel sebelumnya, hanya ada penambahan variable TransCode untuk membedakan jenis transaksi yang akan dimuat dari dalam database. Silakan perhatikan dengan seksama komentar yang terdapat dalam baris kode sumber, karena komentar-komentar tersebut menerangkan tujuan dari baris-baris kode yang ada

Kode Sumber Constructor dan Refresh Data

<pre class="brush:vbnet">
' kode jenis transaksi
Private TransCode As String = "IN"

Private Sub frmTransactionIn_Load(sender As Object, e As EventArgs) Handles MyBase.Load
' retrieve data from database
Me.TransactionsTableAdapter.FillByType(Me.DsInventory.transactions, TransCode)
End Sub

Private Sub Button4_Click(sender As Object, e As EventArgs) Handles Button4.Click
Me.TransactionsTableAdapter.ClearBeforeFill = True
Me.TransactionsTableAdapter.FillByType(Me.DsInventory.transactions, TransCode)
End Sub
</pre>

Kode Sumber Loading Form Entri Data

Perbedaan Add dan Edit data adalah kita melempar parameter id transaksi ke form entri sebagai kondisi kita melakukan edit data
<pre class="brush:vbnet">
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
' start process
Cursor = Cursors.AppStarting
' prepare variables
Dim fx As frmTransInEntry
fx = New frmTransInEntry
' tampilkan form
fx.ShowDialog()
' refresh data, ambil data yang berubah
Button4.PerformClick()
' finish process
Cursor = Cursors.Default
End Sub

Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
' start process
Cursor = Cursors.AppStarting
' prepare variables
Dim id As Integer
Dim fx As frmTransInEntry
' ambil id data yg akan diedit
id = DataGridView1.SelectedRows(0).Cells("id").Value
' create form entry berdasarkan id yang dipilih
fx = New frmTransInEntry(id)
' refresh data, ambil data yang berubah
Button4.PerformClick()
' tampilkan form
fx.ShowDialog()
' finish process
Cursor = Cursors.Default
End Sub
</pre>

Kode Sumber Hapus Data Transaksi

<pre class="brush:vbnet">
Private Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click
' start process
Cursor = Cursors.AppStarting
' prepare variables
Dim dr As DialogResult
Dim id As Integer
Dim code As String
Dim name As String
Dim message As String
Dim pos As Integer
' ambil id dan code dari data yg akan diedit
Dim dv As DataRowView
dv = Me.BindingContext(Me.TransactionsBindingSource).Current
id = Convert.ToInt32(dv("id"))
code = Convert.ToString(dv("code"))
name = Convert.ToString(dv("name"))
' buat pesan konfirmasi
message = String.Format("Are you sure to delete this [{0}] {1} data ? ", code, name)
' try deleting
Try
dr = MessageBox.Show(message,
Application.ProductName, MessageBoxButtons.YesNo, MessageBoxIcon.Question)
If dr = Windows.Forms.DialogResult.Yes Then
pos = Me.BindingContext(Me.TransactionsBindingSource).Position
Me.BindingContext(Me.TransactionsBindingSource).RemoveAt(pos)
Me.TransactionsTableAdapter.Update(Me.DsInventory)
Me.DsInventory.AcceptChanges()
End If
Catch ex As Exception
MessageBox.Show("Error deleting data from database\nDetails: " + ex.Message,
Application.ProductName, MessageBoxButtons.OK, MessageBoxIcon.Exclamation)
Me.DsInventory.RejectChanges()
End Try
' finish up
Cursor = Cursors.Default
End Sub
</pre>

<h3>Simpulan</h3>
Jika kita perhatikan kode sumber yang kita tuliskan di aplikasi ini sangat sedikit sekali dikarenakan kita menggunakan metode data-binding. Kita juga tidak perlu lagi repot-repot membuat perintah SQL untuk proses CRUD, karena proses CRUD ini sudah ditangani di data access layer. Dengan makin sedikit-nya kode yang harus kita tuliskan tentunya akan semakin meningkatkan produktifitas kita semua sebagai programmer dan semakin banyak karya-karya fenomenal yang bisa kita buat.
<h3>Source Code</h3>
Untuk memudahkan teman-teman mempelajari hal ini, silakan <a href="http://pojokprogrammer.net/sites/default/files/tutorial/vbnet/BiruniLab…">Download Source Code Di Sini</a>. Dibuat menggunakan Visual Studio 2013,  
Salam PojokProgrammer ^_^
 
/
<img alt="" src="/sites/default/files/tutorial/inventory-solutions.jpg" style="height:397px; width:720px" />

Tag

Log in to post comments
12011 kali dilihat