Aplikasi Inventory Sederhana – Form Transaksi Barang Masuk

Aplikasi Inventory Sederhana - Form Transaksi Barang Masuk Inventory In

Form Transaksi Barang Masuk | Setelah sebelumnya kita berhasil membuat form entri master barang, 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 data-binding untuk menampilkan data yang berhasil diambil menggunakan library data access layer yang kita buat sebelumnya.

Artikel ini adalah lanjutan dari artikel berseri tentang Tutorial Membuat Aplikasi Inventory Sederhana Menggunakan VB.net dan Database MySQL

Persiapkan Data Access Layer

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 artikel ini. 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.

[collapsed title=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.

Persiapkan Data Access Layer Edit Relation Foreign Key

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.

Persiapkan Data Access Layer Edit Relation Foreign Key

[/collapsed] [collapsed title=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.

Persiapkan Data Access Layer Add Tambah Query By Tipe Jenis Transaksi

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.

Persiapkan Data Access Layer Add Tambah Query By Tipe Jenis Transaksi

[/collapsed]

Desain Form Entri Transaksi Barang Masuk

Berikutnya kita buat desain form transaksi barang masuk. Desain form transaksi ini akan menggunakan Visual Inheritance seperti yang sudah dibahas sebelumnya di artikel desain user interface dan desain form master barang, jadi silakan pelajari kedua artikel tersebut sebelum melanjutkan membaca artikel ini.

[collapsed title=Desain Form Entri Barang Masuk]Silakan buat sebuah Inherited Form dari template form List dan kemudian tambahkan semua kontrol yang diperlukan antara lain 

  • TextBox untuk Kode Transaksi
  • DateTimePicker untuk Tanggal Transaksi
  • Multiline TextBox untuk field Remarks atau Keterangan
  • DataGridView untuk detail transaksi

Tambahkan juga beberapa komponen

  • DataSet DsInventory
  • TransactionsTableAdapter untuk proses retrieval dan saving data di table transactions.
  • Transaction_detailsTableAdapter untuk proses retrieval dan saving data di table transaction_details.
  • ItemsTableAdapter untuk proses retrieval lookup data items

Hasilnya akan tampak seperti gambar di bawah ini.

Desain Form Entri Transaksi Barang Masuk User Inteface Design

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.

Desain Form Entri Transaksi Barang Masuk User Inteface Design

[/collapsed]

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.

[collapsed title=Setting DataGridView untuk Master-Detail]

Desain Form Entri Transaksi Barang Masuk User Inteface Design

[/collapsed]

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.

[collapsed title=Setting DataGridView untuk Master-Detail]

Desain Form Entri Transaksi Barang Masuk User Inteface Design

Desain Form Entri Transaksi Barang Masuk User Inteface Design

[/collapsed]

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.

[collapsed title=Setting ComboBox Items di DataGridView untuk Master-Detail]

Desain Form Entri Transaksi Barang Masuk User Inteface Design

[/collapsed]

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.

[collapsed title=Setting ComboBox Items di DataGridView untuk Master-Detail]

Desain Form Entri Transaksi Barang Masuk User Inteface Design

[/collapsed]

Hasil akhirnya akan tampak seperti pada gambar di bawah ini.

[collapsed title=Setting ComboBox Items di DataGridView untuk Master-Detail]

Desain Form Entri Transaksi Barang Masuk User Inteface Design

[/collapsed]

Kode Sumber Form Entri Transaksi Barang Masuk

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.

[collapsed title=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.

    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

[/collapsed]

[collapsed title=Kode Sumber Inisialisasi Database] 

Inisialisasi database membedakan proses add new dan edit data seperti tampak pada potongan kode berikut ini.

    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

[/collapsed]

[collapsed title=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.

    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

[/collapsed]

Desain Form List Transaksi Barang Masuk

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 desain user interface dan cara melakukan setting data-binding untuk grid list transaksi bisa di lihat di artikel desain form master barang, jadi silakan pelajari kedua artikel tersebut sebelum melanjutkan membaca artikel ini.

[collapsed title=Desain Form List Transaksi Barang Masuk] 

Desain Form List Transaksi Barang Masuk User Inteface Design

[/collapsed]

Kode Sumber Form List Transaksi Barang Masuk

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

[collapsed title=Kode Sumber Constructor dan Refresh Data] 

    ' 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

[/collapsed]

[collapsed title=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

    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

[/collapsed]

[collapsed title=Kode Sumber Hapus Data Transaksi] 

    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

[/collapsed]

Simpulan

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.

Source Code

Untuk memudahkan teman-teman mempelajari hal ini, silakan Download Source Code Di SiniDibuat menggunakan Visual Studio 2013,  

Salam PojokProgrammer ^_^

 

/

Aplikasi Inventory Sederhana – Form Master Barang

Aplikasi Inventory Sederhana User Interface Antarmuka Pengguna Form Utama Master Barang

Form Master Barang | Setelah sebelumnya kita berhasil membuat templare desain user interface dan data access layer, berikutnya kita akan membuat form untuk mengelola proses CRUD (Create, Read, Update, Delete) untuk data Master Barang di Aplikasi Inventory ini. Untuk mengelola data master barang ini, kita memerlukan 2 (dua) buah form, yaitu Form List Barang, dan Form Entri Barang. Kedua form tersebut akan menggunakan metode data-binding untuk menampilkan data yang berhasil diambil menggunakan library data access layer yang kita buat sebelumnya.

Artikel ini adalah lanjutan dari artikel berseri tentang Tutorial Membuat Aplikasi Inventory Sederhana Menggunakan VB.net dan Database MySQL

Data Binding

Data Binding adalah metode untuk menghubungkan elemen atau komponen user interface dengan data access layer di belakangnya. Dengan konfigurasi yang benar, maka perubahan apapun yang ada di data layer dapat langsung terlihat di user interface. Dan juga sebaliknya, perubahan yang kita lakukan di form user interface dapat langsung terseimpan ke database, hanya dengan memanfaatkan beberapa baris kode saja. Untuk mencapai hal ini, kita hanya perlu mengkonfigurasikan property data-binding yang ada di setiap elemen user interface yang terlibat. Jadi misalkan kita mempunyai sebuah TextBox yang di-binding ke sebuah DataSet, maka ketika kita mengisikan sesuatu, atau mengubah isi TextBox bersangkutan, maka secara otomatis data yang tersimpan di DataSet juga ikut berubah.

Form Entri Barang

Kita akan menggunakan satu buah form yang sama untuk proses menambah data baru (Add New) dan mengubah data lama (Edit) dikarenakan field yang terlibat akan sama, hanya berbeda behavior saat di awal melakukan inisialisasi data. Saat menambah data baru yang perlu dilakukan adalah menambahkan satu row kosong, sedangkan saat mengubah data yang dilakukan adalah mengambil ulang (Retrieve) data dari database. Langkah-langkah yang perlu dilakukan antara lain:

  • Menyiapkan sebuah Inherited Form dari template frmEdit kemudian kita beri nama frmItemEdit. Untuk menambahkan form turunan dari template yang sudah kita buat di atas maka, maka silakan buka Form Dialog Add New Item, dan pilih Inherited Form seperti gambar di bawah ini, kemudian berikan nama form turunan dan klik tombol [Add]

[collapsed title=Spoiler: Add New Item Dialog] Aplikasi Inventory Sederhana Desain User Interface Visual Inheritance BiruniLabs [/collapsed]

  • Berikutnya akan muncul Dialog Box yang meminta kita untuk memilih Form superclass, atau Form template layout yang akan kita pakai sebagai parent, seperti tampak pada gambar di bawah ini.

[collapsed title=Spoiler: Select Parent Form] Aplikasi Inventory Sederhana Desain User Interface Visual Inheritance BiruniLabs [/collapsed]

  • Menambahkan elemen user interface ke dalam frmItemEdit. Tambahkan semua elemen field yang diperlukan ke dalam form, sehingga tampak seperti desain form di bawah ini.

[collapsed title=Spoiler: Desain Awal Form Master Barang] Aplikasi Inventory Sederhana Desain User Interface Visual Inheritance BiruniLabs [/collapsed]

  • Setting konfigurasi data-binding untuk setiap elemen User Interface. Pertama-tama pilih TextBox kode barang, kemudian cari property Text dalam group DataBinding, kemudian klik tombol dropdown dan pilih field code dari table items sebagai data-binding-nya seperti tampak pada gambar di bawah ini.

[collapsed title=Spoiler: Setting Property Data Binding] Aplikasi Inventory Sederhana Desain User Interface Visual Inheritance BiruniLabs [/collapsed]

  • Pada saat pertama kali kita melakukan setting data-binding, maka akan muncul beberapa komponen baru di bawah desain form, seperti tampak pada gambar di bawah ini. Selanjutnya lakukan setting data-binding untuk semua field lainnya.

[collapsed title=Spoiler: Tambahan Komponen Setelah Setting Data Binding Pertama Kali] Aplikasi Inventory Sederhana Desain User Interface Visual Inheritance BiruniLabs [/collapsed]

  • Menambahkan kode untuk membedakan inisialisasi data baru dengan edit data lama. Untuk membedakan proses inisialisasi databaru dengan edit data lama, maka kita manfaatkan constructor New dengan tambahan parameter id saat ketika kita ingin mengubah (edit) data lama.

[collapsed title=Spoiler: Kode Sumber Inisialisasi Form Edit]

    Public Sub New()
        ' This call is required by the designer.
        InitializeComponent()
        ' panggil inisialisasi database
        InitializeDatabase(-1)
    End Sub

    Public Sub New(ItemID As Integer)
        ' This call is required by the designer.
        InitializeComponent()
        ' panggil inisialisasi database
        InitializeDatabase(ItemID)
    End Sub

    Private Sub InitializeDatabase(ItemID As Integer)
        ' 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 ItemID < 0 Then
                Me.BindingContext(Me.ItemsBindingSource).AddNew()
            Else
                Me.ItemsTableAdapter.FillByID(Me.DsInventory.items, ItemID)
            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

[/collapsed]

  • Menambahkan kode untuk menyimpan perubahan data ke database. Untuk menambahkan kode penyimpanan data ke database, bukalah designer form, kemudian klik ganda (double click) button [Save] dan tambahkan kode seperti di bawah ini.

[collapsed title=Spoiler: Kode Sumber Penyimpanan Data Ke Database]

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        ' try saving data
        Try
            ' akhiri proses editing
            Me.BindingContext(Me.ItemsBindingSource).EndCurrentEdit()
            ' persist changes
            Me.ItemsTableAdapter.Update(Me.DsInventory)
            ' 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\nDetails: " + ex.Message,
                Application.ProductName, MessageBoxButtons.OK, MessageBoxIcon.Exclamation)
        End Try
    End Sub

[/collapsed]

Form List Barang

Sedangkan untuk melihat seluruh data barang yang tersimpan di database, kita akan membuatkan sebuah form list yang akan berisikan tombol-tombol (button) untuk proses tambah data, ubah data, dan delete data barang. Langkah-langkah yang perlu dilakukan antara lain,

  • Menyiapkan sebuah Inherited Form dari template frmList kemudian kita beri nama frmItemList. Cara membuat Inherited Form sama seperti saat kita membuat frmItemEdit di atas, silakan lakukan cara yang sama.
  • Berikutnya yang perlu kita lakukan adalah menambahkan elemen user interface ke dalam frmItemList. Elemen user interface yang harus di tambahkan di form list ini adalah DataGridView yang akan menampilkan seluruh data yang kita ambil dari database

[collapsed title=Spoiler: Desain Form List Master Barang]Aplikasi Inventory Sederhana Desain User Interface Visual Inheritance BiruniLabs[/collapsed]

  • Setting konfigurasi data-binding untuk setiap elemen User Interface. Proses setting data-binding ini bisa dilakukan lewat property Data Source, atau dapat juga dengan menggunakan shortcut context button kecil yang ada di atas design DataGridView, seperti tampak pada gambar di bawah ini.

[collapsed title=Spoiler: Konfigurasi Data Binding]Aplikasi Inventory Sederhana Desain User Interface Visual Inheritance BiruniLabs[/collapsed]

  • Jika kita membuka kode sumber untuk frmItemList ini, maka akan terlihat bahwa Visual Studio secara otomatis menambahkan sebaris kode untuk mengambil data dari database menggunakan data access layer yang kita buat pada artikel sebelumnya. Rupanya Visual Studio cukup cerdas dengan menmbahkan kode sumber yang diperlukan untuk mengantisipasi para developer yang terlupa menambahkannya.

[collapsed title=Spoiler: Auto Generate Code untuk Retrieve Data dari Visual Studio]Aplikasi Inventory Sederhana Desain User Interface Visual Inheritance BiruniLabs[/collapsed]

  • Menambahkan kode untuk mengambil data dari database. Proses pengambilan data (data retrieval) ini dilakukan pada saat Load Form, dimana kode sumbernya sudah ditambahkan secara otomatis oleh Visual Studio. Namun kita perlu tambahkan satu lagi ke button [Refresh] agar kita bisa mengambil ulang isi database. Caranya cukup dengan melakukan klik ganda (double click) pada button4 yang bertuliskan [Refresh]

[collapsed title=Spoiler: Kode Sumber untuk Proses Retrieve Data]

    Private Sub frmItemList_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        'TODO: This line of code loads data into the 'DsInventory.items' table. You can move, or remove it, as needed.
        Me.ItemsTableAdapter.Fill(Me.DsInventory.items)
    End Sub

    Private Sub Button4_Click(sender As Object, e As EventArgs) Handles Button4.Click
        Me.ItemsTableAdapter.ClearBeforeFill = True
        Me.ItemsTableAdapter.Fill(Me.DsInventory.items)
    End Sub

[/collapsed]

  • Menambahkan kode untuk menampilkan form tambah data baru. Untuk menambah data baru, kita perlu memanggil frmItemEdit tanpa menggunakan parameter apapun agar form edit barang tahu kita akan menambahkan data baru. Caranya cukup dengan melakukan klik ganda (double click) pada button1 yang bertuliskan [Add], kemudian tambahkan kode berikut ini

[collapsed title=Spoiler: Kode Sumber untuk Tambah Data Baru]

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        ' start process
        Cursor = Cursors.AppStarting
        ' prepare variables
        Dim fx As frmItemEntry
        fx = New frmItemEntry
        ' tampilkan form
        fx.ShowDialog()
        ' refresh data, ambil data yang berubah
        Button4.PerformClick()
        ' finish process
        Cursor = Cursors.Default
    End Sub

[/collapsed]

  • Menambahkan kode untuk menampilkan form ubah data lama. Untuk mengubah data lama, yang kita perlu lakukan adalah memanggil frmItemEdit dengan memberikan parameter id agar form edit barang tahu kita akan menambahkan data baru. Caranya cukup dengan melakukan klik ganda (double click) pada button2 yang bertuliskan [Edit], kemudian tambahkan kode berikut ini

[collapsed title=Spoiler: Kode Sumber untuk Ubah Data Lama]

    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 frmItemEntry
        ' ambil id data yg akan diedit
        id = DataGridView1.SelectedRows(0).Cells("id").Value
        ' create form entry berdasarkan id yang dipilih
        fx = New frmItemEntry(id)
        ' refresh data, ambil data yang berubah
        Button4.PerformClick()
        ' tampilkan form
        fx.ShowDialog()
        ' finish process
        Cursor = Cursors.Default
    End Sub

[/collapsed]

  • Menambahkna kode untuk menghapus data barang. Untuk menghapus data, yang kita perlu lakukan adalah mengambil row data yang akan dihapus, kemudian melakukan konfirmasi ke pengguna apakah benar-benar akan menghapus data yang dimaksud. Caranya cukup dengan melakukan klik ganda (double click) pada button3 yang bertuliskan [Edit], kemudian tambahkan kode berikut ini,

[collapsed title=Spoiler: Kode Sumber untuk Hapus Data]

    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.ItemsBindingSource).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.ItemsBindingSource).Position
                Me.BindingContext(Me.ItemsBindingSource).RemoveAt(pos)
                Me.ItemsTableAdapter.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

[/collapsed]

Simpulan

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.

Source Code

Untuk memudahkan teman-teman mempelajari hal ini, silakan Download Source Code Di SiniDibuat menggunakan Visual Studio 2013,  

Salam PojokProgrammer ^_^

 

/

Aplikasi Inventory Sederhana – Data Access Layer

Aplikasi Inventory Sederhana - Data Access Layer

Aplikasi Inventory | Untuk memudahkan proses pembuatan Aplikasi Inventory sederhana atau Aplikasi Stok Barang ini, kita memerlukan sebuah Data Access Layer untuk proses pengambilan (retrieval) dan penyimpanan (persisting) data dari dan ke database yang kita gunakan, yaitu MySQL. Teknologi yang kita gunakan adalah ADO.net menggunakan DataSet dan DataAdapter. Dan untuk memudahkan kerja kita, maka kita akan menggunakan MySQL Installer for Windows untuk proses instalasi driver MySQL Connector/NET dan plugin MySQL for Visual Studio. Kekuatan ADO.net salah satunya ada di DataSet, dimana kita bisa membuat replika dari database fisik dan kemudian kita bisa menggunakannya secara object-oriented. 

 

Artikel ini adalah bagian dari artikel berseri tentang Tutorial Membuat Aplikasi Inventory Sederhana Menggunakan VB.net dan Database MySQL

 

Siapkan Koneksi Database

Langkah pertama adalah dengan membuka Server Explorer kemudian menambahkan koneksi baru ke database MySQL yang sudah kita siapkan di artikel sebelumnya. Perlu dicatat bahwa kita memerlukan plugin MySQL for Visual Studio agar dapat melakukan langkah-langkah tutorial di bawah ini, dan plugin ini hanya bisa digunakan di Visual Studio Professional ke atas, pada versi Express plugin ini tidak bisa digunakan.

Silakan tambahkan koneksi baru dan isikanlah form konfigurasi database, seperti contoh pada gambar di bawah ini

[collapsed title=Membuat Koneksi Baru di Server Explorer]

Pada Server Explorer, click icon Add New Connection sehingga muncul dialog box seperti di bawah ini

[collapsed title=Tentukan Data Source]

Aplikasi Inventory Sederhana - Data Access Layer Create Dataset

[/collapsed]

Kemudian isikan credential yang diperlukan untuk mengakses database mysql Anda, jika menggunakan paket xampp di localhost maka cukup isikan root sebagai user name dan kosongkan password.

[collapsed title=Isikan Credential Database]

Aplikasi Inventory Sederhana - Data Access Layer Create Dataset

[/collapsed]

Jika sukses, Anda dapat melihat seluruh tables, viwes, dan stored procedure yang ada di database.

[collapsed title=Penampakan Database di Server Explorer]

Aplikasi Inventory Sederhana - Data Access Layer Create Dataset

[/collapsed]

[/collapsed]

 

Membuat Typed-DataSet

Kekuatan ADO.net salah satunya ada di DataSet, dimana kita bisa membuat replika dari database fisik dan kemudian kita bisa menggunakannya secara object-oriented. Sedangkan DataSet sendiri ada 2 (dua) jenis, untyped-dataset dan typed-dataset. Disebut typed-dataset karena DataSet yang kita gunakan bukan dataset generic namun sudah dikonfigurasikan sesuai dengan schema database tertentu. Dengan menggunakan plugin MySQL for Visual Studio, kita bisa membuat Typed DataSet dengan cepat hanya dengan melakukan drag-and-drop dari Server Explorer.

[collapsed title=Membuat DataSet dengan Cara Drag-and-Drop dari Server Explorer]

Untuk membuat Typed DataSet pertama-tama buat sebuah Folder bernama Data di Solution Explorer, kemudian klik-kanan mouse pada folder Data tersebut dan pilihlah menu Add New Item

[collapsed title=Membuat DataSet kosong]

Aplikasi Inventory Sederhana - Data Access Layer Create Dataset

[/collapsed]

Berikan nama DataSet tersebut sebagai dsInventory, cukup logis karena kita sedang membuat sebuah Aplikasi Inventory. DataSet Designer kosong akan muncul seperti tampak pada gambar di screenshot ini.

[collapsed title=DataSet Designer kosong dengan nama dsInventory]

Aplikasi Inventory Sederhana - Data Access Layer Create Dataset

[/collapsed]

Drag-And-Drop. Langkah selanjutnya adalah membuka Server Explorer, kemudian lakukan Drag-And-Drop semua table yang ada di database ke atas DataSet Designer, sehingga akan terbentuk seperti gambar di bawah ini.

[collapsed title=Hasil setelah proses Drag-And-Drop dari Server Explorer]

Aplikasi Inventory Sederhana - Data Access Layer Create Dataset

[/collapsed]

Perlu diperhatikan bahwa Visual Studio secara otomatis membantu kita membuatkan semua fungsi SELECTINSERTUPDATE, dan DELETE dari semua table di atas pada saat proses Drag-And-Drop sehingga kita tidak perlu membuat semua query tersebut secara manual. Pastinya cara ini sangat meningkatkan produktifitas para programmer karena hal-hal seperti ini bisa kita otomasikan menggunakan Visual Studio.

[/collapsed]

 

Enhancing DataSet – Field Tambahan

Setelah kita berhasil membuat Typed-DataSet sesuai langkah-langkah di atas, langkah selanjutnya adalah melakukan enhancing, atau memberikan fungsi tambahan, terhadap DataSet yang sudah dibuatkan oleh Visual Studio. Tambahan fungsi ini meliputi field dan query untuk mempermudah kita melakukan pengambilan data dari database

[collapsed title=Enhancing DataSet – Field]

Membuat field tambahan ke table transactions, dengan cara meletakkan cursor pada posisi field yang mau kita tambahkan, kemudian klik-kanan mouse dan pilih menu Insert Column.

[collapsed title=Enhancing DataSet – Table Transactions]

Membuat field tambahan ke table transactions, dengan cara meletakkan cursor pada posisi field yang mau kita tambahkan, kemudian klik-kanan mouse dan pilih menu Insert Column.

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Buatlah semua field tambahan untuk table transactions sehingga menjadi seperti tampak di gambar di bawah ini.

[collapsed title=Enhancing DataSet – Table Transactions]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Buatlah semua field tambahan untuk table transaction_details sehingga menjadi seperti tampak di gambar di bawah ini.

[collapsed title=Enhancing DataSet – Table Transactions Details]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Perlu diperhatikan bahwa penambahan field diluar yang ada di table fisik nantinya akan sangat berguna ketika kita melakukan proses data binding  data ke control seperti DataGridView, sehingga kita tidak perlu membuat kolom tambahan lagi di DataGridView karena sudah tersedia semua di DataSet.

[/collapsed]

 

Enhancing DataSet – Query Tambahan

Berikutnya yang kita lakukan menambahkan query ke DataSet. Jika kita perhatikan di DataSet Designer, ada komponen khusus dibawah bable dengan nama xxxTableAdapter. Komponen TableAdapter ini adalah DataAdapter yang khusus dibuatkan untuk menangani proses CRUD dari tabel bersangkutan, jadi proses CRUD untuk table transactions ditangani oleh transactionsTableAdapter. Secara default, sudah tersedia method Fill dan GetData, namun kedua methos tersebut masih bersifat generic pada saat proses pengambilan data dari database akan mengambil keseluruhan data tanpa filter.

Untuk itu kita perlu menambahkan sejumlah query untuk memudahkan kita mengambil data dari database berdasarkan kriteria tersentu, pastinya kita akan memerlukan query untuk mendapatkan data transaksi dengan ID tertentu, atau nomor transaksi tertentu, atau bisa juga berdasarkan tanggal transaksi.

[collapsed title=Enhancing DataSet – Add Query]

Membuat query tambahan ke table items, dengan cara meletakkan cursor pada posisi header itemsTableAdapter yang mau kita tambahkan, kemudian klik-kanan mouse dan pilih menu Add Query. Seperti tampak di bawah ini.

[collapsed title=Enhancing DataSet – Add Items Query]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Setelah itu akan muncul dialog box wizard proses pembuatan TableAdapter Query seperti ini, pilih Use SQL Statement karena kita akan mengambil data menggunakan perintah SQL.

[collapsed title=Enhancing DataSet – Add Query Wizard]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Kemudian pilih SELECT which returns rows karena query kita menghasilkan rows dari table items, untuk option lain silakan teman-teman coba sendiri.

[collapsed title=Enhancing DataSet – Add Query Wizard]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Beginilah penampakan query terhadap table items berdasarkan field ID, perhatikan bahwa query di bawah ini memasukkan sebuah parameter @id yang harus kita berikan nanti ketika memanggil query ini.

[collapsed title=Enhancing DataSet – Add Query Wizard]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

 

Berikan nama untuk query ini, seperti tampak pada gambar di bawah ini.

[collapsed title=Enhancing DataSet – Add Query Wizard]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

 

Selesai! Visual Studio sudah membuatkan fungsi untuk membantu kita melakukan query ke table items di database berdasarkan field ID.

[collapsed title=Enhancing DataSet – Add Query Wizard]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Setelah menambahkan query pengambilan data items berdasarkan ID, maka penampakan DataSet akan menjadi seperti pada gambar di bawah ini.

[collapsed title=Enhancing DataSet – Add Items Query]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Berikutnya yang perlu kita lakukan adalah menambahkan semua query berdasarkan kriteria yang kita inginkan ke seluruh table yang ada dalam DataSet kita ini. Berikut ini penampakan query terhadap table items berdasarkan field Code.

[collapsed title=Enhancing DataSet – Add Query]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Penampakan DataSet setelah menambahkan query berdasarkan field ID dan dan field Code pada table items dan transaction_types seperti pada gambar di bawah ini.

[collapsed title=Enhancing DataSet – Add Query]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Berikut ini penampakan query terhadap table transactions berdasarkan field ID. Perhatikan bahwa pada query ini kita melakukan JOIN terhadap table transactions dan transaction_types. Lebih jauh tentang JOIN silakan pelajari artikel ini.

[collapsed title=Enhancing DataSet – Add Query]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Berikut ini penampakan query terhadap table transactions berdasarkan field Code. Untuk query ini kita juga lakukan JOIN dengan transaction_types.

[collapsed title=Enhancing DataSet – Add Query]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Berikut ini penampakan query terhadap table transactions berdasarkan field Date. Perhatikan bahwa kita menggunakan klausa BETWEEN di dalam klausa WHERE.

[collapsed title=Enhancing DataSet – Add Query]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset By Dae

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset By Date

[/collapsed]

Penampakan DataSet setelah menambahkan query berdasarkan field ID dan, field Code, dan field Date pada table transactions seperti pada gambar di bawah ini.

[collapsed title=Enhancing DataSet – Add Query]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Berikut ini penampakan query terhadap table transaction_details berdasarkan field Code.

[collapsed title=Enhancing DataSet – Add Query – Transactions Details by ID]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Berikut ini penampakan query terhadap table transaction_details berdasarkan field Trans_ID.

[collapsed title=Enhancing DataSet – Add Query – Transactions Details by Transaction ID]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Penampakan DataSet setelah menambahkan query berdasarkan field ID dan dan field Transaction ID pada table transaction_details seperti pada gambar di bawah ini.

[collapsed title=Enhancing DataSet – Add Query]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Dengan tersedianya fungsi-fungsi query tambahan pada DataSet yang kita buat di atas, maka pada saat proses pengambilan data, kita hanya perlu meamanggil fungsi-fungsi tersebut dan tidap perlu lagi membuat query secara manual. Sekali lagi, produktifitas programmer semakin meningkat dengan cara ini.

[/collapsed]

 

Denormalisasi

Apakah denormalisasi database itu? denormalisasi database adalah pelanggaran aturan normalisasi atau menjabarkan suatu desain database yang telah normal untuk meningkatkan performa pengaksesan data pada database. Database yang telah normal disini dimaksudkan database yang redundansi datanya minim sehingga data yang disimpan tidak mengalami kerancuan dalam proses pengaksesan. Namun denormalisasi yang kita lakukan di sini tidak secara fisik, namun hanya menggunakan fasilitas view yang ada di database.

[collapsed title=Denormalisasi]

Denormalisasi kita lakukan dengan melakukan JOIN terhadap seluruh tabel yang ada di database inventory kita. Nantinya view denormalisasi ini akan berguna saat membuat laporan. Dengan bantuan plugin MySQL for Visual Studio, kita bisa membuat sebuah View langsung dari IDE Visual Studio sehingga tidak perlu berpindah ke phpMyAdmin atau HeidiSQL untuk membuat view denormalisasi ini.

[collapsed title=Denormalisasi – Membuat View]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Setelah View berhasil kita buat, langkah berikutnya adalah menambahkan view tersebut ke dalam Data Access Layer yang kita buat, caranya sama cukup dengan melakukan drag-drop dari Server Explorer ke DataSet Designer, sehingga tampak seperti gambar di bawah ini.

[collapsed title=Denormalisasi – Drag View ke DataSet Designer]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Berikut ini penampakan query terhadap view transaction_denormalized berdasarkan field Trans_ID.

[collapsed title=Denormaslisasi – Add Query – untuk view]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Berikut ini penampakan query terhadap view transaction_denormalized berdasarkan field Trans_Code.

[collapsed title=Denormaslisasi – Add Query – untuk view]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Berikut ini penampakan query terhadap view transaction_denormalized berdasarkan field Item_ID.

[collapsed title=Denormaslisasi – Add Query – untuk view]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Berikut ini penampakan query terhadap view transaction_denormalized berdasarkan field Item_Code.

[collapsed title=Denormaslisasi – Add Query – untuk view]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

Penampakan Data Access Layer setelah kita melengkapi query untuk View transaction_denormalized.

[collapsed title=Denormalisasi – Hasil Query Tambahan untuk View]

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

[/collapsed]

[/collapsed]

 

Hasil Akhir

Setelah seluruh langkah di atas kita selesaikan, maka langkah pamungkas dalam pembuatan Data Access Layer ini adalah dengan melakukan compile atau build project ini. Setelah proses build selesai dilakukan maka kita akan mendapatkan sejumlah komponen baru tampil di toolbox seperti tampak pada gambar di bawah ini. Visual Studio otomatis akan mengenali komponen Data Access Layer buatan kita dan menambahkannya ke dalam toolbox, dan kita bisa melakukan drag-and-drop komponen-komponen tersebut ke dalam form-form buatan kita nantinya. Komponen tambahan ini nantinya akan kita pergunakan dalam pembuatan Aplikasi Inventory ini.

Aplikasi Inventory Sederhana - Data Access Layer Enhance Dataset

 

Penutup

Mudah-mudahan penjelasan tentang pembuatan Data Access Layer dapat dipahami dengan mudah, dan silakan kunjungi link di bawah ini untuk mengunduh source-code sementara.

[collapsed title=Spoiler: Download Source Code Di Sini] Dibuat menggunakan Visual Studio 2013, Silakan Download Source Code Di Sini [/collapsed]

 

Salam Pojok Programmer !

Aplikasi Inventory Sederhana – Desain User Interface

Aplikasi Inventory Sederhana Desain User Interface Visual Inheritance BiruniLabs

Desain User Interface | Untuk memudahkan penggunaan aplikasi atau program yang kita buat, makan user interface atau antarmuka pengguna haruslah cukup intuitif dan konsisten. Misalkan sebuah aplikasi inventory pastinya akan mempunya form untuk menampilkan daftar gudang, daftar barang, daftar transaksi barang dan sebagainya. Form-form yang memiliki tujuan serupa harus memiliki layout yang sama, dalam artian memiliki posisi button yang sama, posisi grid juga sama, dan sebagainya. Untuk itu kita bisa saja membuat beberapa form dan menambahkan control ke dalamnya satu persatu, kemudian kita ulangi kembali langkah2 tersebut untuk semua form yang diperlukan…. Sungguh kerja keras yang luar biasa 🙂 …. Namun sebagai programmer kita harus juga kerja cerdas. Di sinilah Visual Inheritance akan membantu kita mempermudah hal tersebut.

Artikel ini adalah lanjutan dari artikel berseri tentang Tutorial Membuat Aplikasi Inventory Sederhana Menggunakan VB.net dan Database MySQL

Masih ingat dengan konsep Inheritance di OOP? Dengan menggunakan inheritance kita bisa membuat sebuah class yang merupakan turunan dari class yang lain dengan class hasil turunannya mewariskan (inherit) semua sifat (properties dan methods) dari superclass-nya. Dan kalau kita perhatikan Form juga adalah sebuah class, artinya kita juga bisa membuat sebuah class turunannya. Di sinilah istilah Visual Inheritance menjadi relevan, karena seluruh tampilan visual, berupa layout dan posisi control, seperti Button, Panel, Label, dan sebagainya otomatis akan diwariskan kepada Form turunannya, sehingga keinginan kita membuat sebuah User Interface yang konsisten bisa dicapai dengan coding seminimal mungkin.

Untuk Aplikasi Inventory Sederhana yang sedang kita buat ini, kita memerlukan 2 (dua) buah form dengan tampilan layout Button yang konsisten, untuk mempermudah pengguna, yaitu

  • Pertama, form untuk melihat daftar barang dan daftar transaksi
  • Kedua, form untuk proses tambah atau edit barang dan transaksi

Sesuai desain aplikasi yang sudah kita buat sebelumnya, desain form untuk menampilkan daftar barang dan daftar transaksi harus memiliki sejumlah Button untuk proses Tambah, Ubah, dan Hapus. Action tambahan lainnya adalah Button untuk Refresh dan Cetak Data. Maka desainnya kita buat seperti ini.

[collapsed title=Spoiler: Desain Form List] Aplikasi Inventory Sederhana Desain User Interface Visual Inheritance BiruniLabs [/collapsed]

Sedangkan form untuk proses penambahan dan pengubahan data cukup memiliki Button untuk Simpan saja, seperti ini.

[collapsed title=Spoiler: Desain Form Edit Data] Aplikasi Inventory Sederhana Desain User Interface Visual Inheritance BiruniLabs [/collapsed]

Seluruh control dalam template tersebut harus kita set property Modifer sebagai Protected, agar kita bisa mengubah property masing-masing control tersebut di dalam form turunannya.

[collapsed title=Spoiler: Ubah Modifier Semua Control] Aplikasi Inventory Sederhana Desain User Interface Visual Inheritance BiruniLabs [/collapsed]

Untuk menambahkan form turunan dari template yang sudah kita buat di atas maka, maka silakan buka Form Dialog Add New Item, dan pilih Inherited Form seperti gambar di bawah ini, kemudian berikan nama form turunan dan klik tombol [Add]

[collapsed title=Spoiler: Add New Item Dialog] Aplikasi Inventory Sederhana Desain User Interface Visual Inheritance BiruniLabs [/collapsed]

Berikutnya akan muncul Dialog Box yang meminta kita untuk memilih Form superclass, atau Form template layout yang akan kita pakai sebagai parent, seperti tampak pada gambar di bawah ini.

[collapsed title=Spoiler: Select Parent Form] Aplikasi Inventory Sederhana Desain User Interface Visual Inheritance BiruniLabs [/collapsed]

Jika kita kita buka file frmItemList.Designer.vb, maka ada kata kunci penting yang menandakan bahwa frmItemList adalah turunan (inherit) dari frmList. Seperti terlihat di gambar ini.

[collapsed title=Spoiler: Inheritance – Designer Code] Aplikasi Inventory Sederhana Desain User Interface Visual Inheritance BiruniLabs [/collapsed]

Tambahkan semua form yang kita perlukan, meliputi Form Daftar Barang, Form Edit Barang, Form Daftar Barang Masuk, Form Edit Barang Masuk, dan seterusnya, sehingga keseluruhan Solution kita menjadi seperti gambar di bawah ini.

[collapsed title=Spoiler: Struktur File Solution] Aplikasi Inventory Sederhana Desain User Interface Visual Inheritance BiruniLabs [/collapsed]

Setelah selesai, maka kita dapat mengubah dan menambahkan control yang kita inginkan ke Form Turunannya, misalkan contoh untuk Form Entry Data Master Barang seperti gambar di bawah ini.

[collapsed title=Spoiler: Contoh Desain Form Edit Barang] Aplikasi Inventory Sederhana Desain User Interface Visual Inheritance BiruniLabs [/collapsed]

Mudah-mudahan penjelasan tentang Visual Inheritance dapat dipahami dengan mudah, dan silakan kunjungi link di bawah ini untuk mengunduh source-code sementara.

[collapsed title=Spoiler: Download Source Code Di Sini] Dibuat menggunakan Visual Studio 2013, Silakan Download Source Code Di Sini [/collapsed]

Salam PojokProgrammer ^_^

 

.

Aplikasi Inventory Sederhana – Penggunaan Trigger untuk Tracking Stock Barang

Aplikasi Inventory Sederhana - Penggunaan Trigger untuk Tracking Stock Barang

Trigger bagaikan pisau bermata dua. Salah penggunaan bisa berakibat fatal, dan tidak sedikit developer software antipati dengan trigger karena sering terjadi hal-hal yang tidak disangka-sangka dan bahkan di luar nalar, berhari-hari melakukan debugging, pada akhirnya problem ditemukan karena adanya sebuat trigger yang tidak terdokumentasi dengan baik. Walaupun sebuah pisau bisa membunuh kita, bukan berarti kita harus membuangnya jauh-jauh dan tidak mau menggunakannya lagi, karena penggunaan yang benar tentunya akan sangat membantu mempermudah dan meningkatkan kualitas hidup kita 🙂

Dalam artikel ini, akan kita mempelajari cara penggunaan trigger yang benar, dalam rangka membantu mempermudah kita membuat sebuah Aplikasi Inventory Sederhana Aplikasi Stok Barang ini. Trigger akan kita gunakan untuk melakukan update status kuantitas stok barang setiap kali terjadi transaksi penambahan dan pengurangan barang, atau transaksi barang masuk atau barang keluar. Jika kita sederhanakan sampai level database, maka akan ada perintah SQL INSERT, UPDATE, dan DELETE di table transaksi yang secara otomatis, mengubah status stok barang bersangkutan.

Desain database sudah kita buat pada langkah analisa dan desain database pada artikel sebelumnya. Maka langkah selanjutnya adalah membuat trigger untuk setiap jenis SQL DML. Trigger akan kita tempelkan ke table transaction_details, karena di table itulah informasi ID dan jumlah kuantitas barang tersedia. Untuk detail sintaks CREATE TRIGGER dapat mengacu ke dokumentasi MySQL CREATE TRIGGER di sini.

Referensi Data

Untuk tutorial ini, diasumsikan sudah tersedia data untuk transaction_types dan items seperti berikut ini,

mysql> -- -----------------------------
mysql> -- data jenis transaksi
mysql> -- -----------------------------
mysql> select * from transaction_types ;
+----+------+---------------+
| id | code | name          |
+----+------+---------------+
|  1 | IN   | BARANG MASUK  |
|  2 | OUT  | BARANG KELUAR |
+----+------+---------------+
2 rows in set (0.00 sec)

mysql> -- -----------------------------
mysql> -- data master barang
mysql> -- -----------------------------
mysql> select * from items ;
+----+--------+-------------------------+------------------+---------+
| id | code   | name                    | quantity_on_hand | remarks |
+----+--------+-------------------------+------------------+---------+
|  1 | PC.001 | PC Jangkrik Tipe 1      |             0.00 | NULL    |
|  2 | PC.002 | PC Jangkrik Tipe 2      |             0.00 | NULL    |
|  3 | SV.001 | Server Rainer Tipe 1    |             0.00 | NULL    |
|  4 | SV.002 | Server Rainer Rackmount |             0.00 | NULL    |
+----+--------+-------------------------+------------------+---------+
4 rows in set (0.00 sec)

INSERT Data Transaksi

Untuk proses INSERT ini akan kita set berjalan setiap kali ada sebuah row dimasukkan ke dalam database, diindikasikan dengan keywork FOR EACH ROW, dan setiap row yang baru masuk bisa kita ketahui di variable NEW. Logikanya adalah seperti ini,

  • Setiap kali ada transaksi barang masuk, maka field stok barang di table items akan kita tambahkan,
  • Sebaliknya, setiap kali ada transaksi barang keluar, maka field stok barang di table items akan kita kurangi,

maka trigger INSERT akan seperti ini.

mysql> delimiter $$

mysql> drop trigger if exists trg_transaction_details_after_insert$$
Query OK, 0 rows affected (0.00 sec)

mysql> -- -----------------------------
mysql> -- after insert trigger
mysql> -- -----------------------------
mysql> create trigger trg_transaction_details_after_insert
    -> after insert on transaction_details
    -> for each row
    -> begin
    ->   -- -----------------------------
    ->   -- ambil jenis transaksi
    ->   -- -----------------------------
    ->   declare tipe varchar(20);
    ->   set tipe = (
    ->     select tt.code
    ->       from transactions tr
    ->       join transaction_types tt on tr.type_id=tt.id
    ->       where tr.id=new.trans_id
    ->   ) ;
    ->   -- -----------------------------
    ->   -- update sesuai jenis transaksi
    ->   -- -----------------------------
    ->   update items
    ->     set quantity_on_hand
    ->         = quantity_on_hand
    ->         + case when tipe='IN' then new.quantity
    ->                when tipe='OUT' then -new.quantity
    ->                else 0 end
    ->     where items.id=new.item_id ;
    -> end$$
Query OK, 0 rows affected (0.12 sec)

mysql> delimiter ;
mysql>

[collapsed title=Spoiler: Hasil Test INSERT Transaksi Barang Masuk dan Barang Keluar]

Test INSERT data transaksi barang masuk.

mysql> -----------------------------
mysql> -- insert header transaksi barang masuk
mysql> -----------------------------
mysql> insert into transactions (type_id, trans_code, trans_date, remarks)
    -> values (1, 'BM.00001/2014', '2014-01-10', 'Penerimaan Barang') ;
Query OK, 1 row affected (0.05 sec)

mysql> -----------------------------
mysql> -- lihat data transaksi
mysql> -- pastikan data sudah masuk
mysql> -----------------------------
mysql> select * from transactions;
+----+---------+---------------+------------+-------------------+
| id | type_id | trans_code    | trans_date | remarks           |
+----+---------+---------------+------------+-------------------+
|  1 |       1 | BM.00001/2014 | 2014-01-10 | Penerimaan Barang |
+----+---------+---------------+------------+-------------------+
1 row in set (0.00 sec)

mysql> -----------------------------
mysql> -- insert detail transaksi barang masuk
mysql> -----------------------------
mysql> insert into transaction_details (trans_id, item_id, quantity, remarks)
    -> values (1, 1, 20, 'Penerimaan Barang 1')
    ->      , (1, 2, 30, 'Penerimaan Barang 2')
    ->      , (1, 3, 10, 'Penerimaan Barang 3')
    ->      , (1, 4, 15, 'Penerimaan Barang 4') ;
Query OK, 4 rows affected (0.07 sec)
Records: 4  Duplicates: 0  Warnings: 0

mysql> -----------------------------
mysql> -- lihat detail transaksi
mysql> -- pastikan data sudah masuk
mysql> -----------------------------
mysql> select * from transaction_details where trans_id=1 ;
+----+----------+---------+----------+---------------------+
| id | trans_id | item_id | quantity | remarks             |
+----+----------+---------+----------+---------------------+
| 22 |        1 |       1 |       20 | Penerimaan Barang 1 |
| 23 |        1 |       2 |       30 | Penerimaan Barang 2 |
| 24 |        1 |       3 |       10 | Penerimaan Barang 3 |
| 25 |        1 |       4 |       15 | Penerimaan Barang 4 |
+----+----------+---------+----------+---------------------+
4 rows in set (0.00 sec)

mysql> -----------------------------
mysql> -- dengan asumsi awal semua stok barang masih kosong
mysql> -- maka saat ini quantity on hand pasti sudah berubah
mysql> -----------------------------
mysql> select * from items ;
+----+--------+-------------------------+------------------+---------+
| id | code   | name                    | quantity_on_hand | remarks |
+----+--------+-------------------------+------------------+---------+
|  1 | PC.001 | PC Jangkrik Tipe 1      |            20.00 | NULL    |
|  2 | PC.002 | PC Jangkrik Tipe 2      |            30.00 | NULL    |
|  3 | SV.001 | Server Rainer Tipe 1    |            10.00 | NULL    |
|  4 | SV.002 | Server Rainer Rackmount |            15.00 | NULL    |
+----+--------+-------------------------+------------------+---------+
4 rows in set (0.00 sec)

mysql> -----------------------------
mysql> -- YAY!!! Berhasil!!!
mysql> -----------------------------
mysql> 

Test INSERT data transaksi barang keluar.

mysql> -----------------------------
mysql> -- insert header transaksi barang keluar
mysql> -----------------------------
mysql> insert into transactions (type_id, trans_code, trans_date, remarks)
    -> values (2, 'BK.00001/2014', '2014-01-11', 'Pengeluaran Barang') ;
Query OK, 1 row affected (0.05 sec)

mysql> -----------------------------
mysql> -- lihat data transaksi
mysql> -- pastikan data sudah masuk
mysql> -----------------------------
mysql> select * from transactions ;
+----+---------+---------------+------------+--------------------+
| id | type_id | trans_code    | trans_date | remarks            |
+----+---------+---------------+------------+--------------------+
|  1 |       1 | BM.00001/2014 | 2014-01-10 | Penerimaan Barang  |
|  2 |       2 | BK.00001/2014 | 2014-01-11 | Pengeluaran Barang |
+----+---------+---------------+------------+--------------------+
2 rows in set (0.00 sec)

mysql> -----------------------------
mysql> -- insert detail transaksi barang keluar
mysql> -----------------------------
mysql> insert into transaction_details (trans_id, item_id, quantity, remarks)
    -> values (2, 1, 4, 'Pengeluaran Barang 1')
    ->      , (2, 4, 5, 'Pengeluaran Barang 4') ;
Query OK, 2 rows affected (0.07 sec)
Records: 2  Duplicates: 0  Warnings: 0

mysql> -----------------------------
mysql> -- lihat detail transaksi
mysql> -- pastikan data sudah masuk
mysql> -----------------------------
mysql> select * from transaction_details where trans_id=2 ;
+----+----------+---------+----------+----------------------+
| id | trans_id | item_id | quantity | remarks              |
+----+----------+---------+----------+----------------------+
| 29 |        2 |       1 |        4 | Pengeluaran Barang 1 |
| 30 |        2 |       4 |        5 | Pengeluaran Barang 4 |
+----+----------+---------+----------+----------------------+
2 rows in set (0.00 sec)

mysql> -----------------------------
mysql> -- dengan asumsi awal semua stok barang masih kosong
mysql> -- maka saat ini quantity on hand pasti sudah berubah
mysql> -- item_id=1 yang semula 20, dikurangi 4 menjadi 16
mysql> -- item_id=4 yang semula 15, dikurangi 5 menjadi 10
mysql> -----------------------------
mysql> select * from items ;
+----+--------+-------------------------+------------------+---------+
| id | code   | name                    | quantity_on_hand | remarks |
+----+--------+-------------------------+------------------+---------+
|  1 | PC.001 | PC Jangkrik Tipe 1      |            16.00 | NULL    |
|  2 | PC.002 | PC Jangkrik Tipe 2      |            30.00 | NULL    |
|  3 | SV.001 | Server Rainer Tipe 1    |            10.00 | NULL    |
|  4 | SV.002 | Server Rainer Rackmount |            10.00 | NULL    |
+----+--------+-------------------------+------------------+---------+
4 rows in set (0.00 sec)

mysql> -----------------------------
mysql> -- YAY!!! Berhasil Lagi!!!
mysql> -----------------------------
mysql>

[/collapsed]

UPDATE (Edit) Data Transaksi

Untuk proses UPDATE, sama seperti proses INSERT dan DELETE, trigger akan berjalan FOR EACH ROW, namun sedikit lebih rumit, row ebelum proses update, atau data original tersimpan di variable OLD, dan row yang baru tersimpan di variable NEW. Logikanya adalah seperti ini,
  • Setiap kali ada update data transaksi barang masuk, maka field stok barang di table items akan kita kurangi dengan kuantitas lama kemudian kita tambahkan dengan kuantitas yang baru
  • Sebaliknya, setiap kali ada update data transaksi barang keluar, maka field stok barang di table items akan kita tambahkan dengan kuantitas lama kemudian kita kurangi dengan kuantitas yang baru,

maka trigger UPDATE akan seperti ini,

mysql> delimiter $$
mysql>

mysql> drop trigger if exists trg_transaction_details_after_update$$
Query OK, 0 rows affected (0.06 sec)

mysql> -- -----------------------------
mysql> -- after update trigger
mysql> -- -----------------------------
mysql> create trigger trg_transaction_details_after_update
    -> after update on transaction_details
    -> for each row
    -> begin
    ->   -- -----------------------------
    ->   -- ambil jenis transaksi
    ->   -- -----------------------------
    ->   declare tipe varchar(20);
    ->   set tipe = (
    ->     select tt.code
    ->       from transactions tr
    ->       join transaction_types tt on tr.type_id=tt.id
    ->       where tr.id=old.trans_id
    ->   ) ;
    ->   -- -----------------------------
    ->   -- update sesuai jenis transaksi
    ->   -- => kurangi dengan old quantity
    ->   -- -----------------------------
    ->   update items
    ->     set quantity_on_hand
    ->         = quantity_on_hand
    ->         + case when tipe='IN' then -old.quantity
    ->                when tipe='OUT' then old.quantity
    ->                else 0 end
    ->     where items.id=old.item_id ;
    ->   -- -----------------------------
    ->   -- update sesuai jenis transaksi
    ->   -- => tambahkan dengan new quantity
    ->   -- -----------------------------
    ->   update items
    ->     set quantity_on_hand
    ->         = quantity_on_hand
    ->         + case when tipe='IN' then new.quantity
    ->                when tipe='OUT' then -new.quantity
    ->                else 0 end
    ->     where items.id=new.item_id ;
    -> end$$
Query OK, 0 rows affected (0.14 sec)

mysql> delimiter ;
mysql>

[collapsed title=Spoiler: Hasil Test UPDATE Transaksi Barang Masuk dan Barang Keluar]

Status data sebelum Test UPDATE.

mysql> -----------------------------
mysql> -- status stok 
mysql> -- sebelum proses UPDATE
mysql> -----------------------------
mysql> select * from items;
+----+--------+-------------------------+------------------+---------+
| id | code   | name                    | quantity_on_hand | remarks |
+----+--------+-------------------------+------------------+---------+
|  1 | PC.001 | PC Jangkrik Tipe 1      |            16.00 | NULL    |
|  2 | PC.002 | PC Jangkrik Tipe 2      |            30.00 | NULL    |
|  3 | SV.001 | Server Rainer Tipe 1    |            10.00 | NULL    |
|  4 | SV.002 | Server Rainer Rackmount |            10.00 | NULL    |
+----+--------+-------------------------+------------------+---------+
4 rows in set (0.00 sec)

mysql> -----------------------------
mysql> -- status detil transaksi
mysql> -- sebelum proses UPDATE
mysql> -----------------------------
mysql> select * from transaction_details ;
+----+----------+---------+----------+----------------------+
| id | trans_id | item_id | quantity | remarks              |
+----+----------+---------+----------+----------------------+
| 22 |        1 |       1 |       20 | Penerimaan Barang 1  |
| 23 |        1 |       2 |       30 | Penerimaan Barang 2  |
| 24 |        1 |       3 |       10 | Penerimaan Barang 3  |
| 25 |        1 |       4 |       15 | Penerimaan Barang 4  |
| 29 |        2 |       1 |        4 | Pengeluaran Barang 1 |
| 30 |        2 |       4 |        5 | Pengeluaran Barang 4 |
+----+----------+---------+----------+----------------------+
6 rows in set (0.00 sec)

Test UPDATE data transaksi barang masuk.

mysql> -----------------------------
mysql> -- ubah detil transaksi masuk
mysql> -- untuk id transaksi 22,
mysql> -- dari quantity awal 20 menjadi 50
mysql> -----------------------------
mysql> update transaction_details
    -> set quantity = 50
    -> where id = 22 ;
Query OK, 1 row affected (0.07 sec)
Rows matched: 1  Changed: 1  Warnings: 0

mysql> -----------------------------
mysql> -- maka untuk item_id 1 (dari transaction detail id 22)
mysql> -- ada update quantity dari 20 menjadi 50 ada selisih +30
mysql> -- maka stok barang berubah, 16 -20 +30 = 46
mysql> -----------------------------
mysql> select * from items ;
+----+--------+-------------------------+------------------+---------+
| id | code   | name                    | quantity_on_hand | remarks |
+----+--------+-------------------------+------------------+---------+
|  1 | PC.001 | PC Jangkrik Tipe 1      |            46.00 | NULL    |
|  2 | PC.002 | PC Jangkrik Tipe 2      |            30.00 | NULL    |
|  3 | SV.001 | Server Rainer Tipe 1    |            10.00 | NULL    |
|  4 | SV.002 | Server Rainer Rackmount |            10.00 | NULL    |
+----+--------+-------------------------+------------------+---------+
4 rows in set (0.00 sec)
Query OK, 0 rows affected (0.04 sec)

mysql> -----------------------------
mysql> -- YAY!!! Sukses!!!
mysql> -----------------------------
mysql> 

Test UPDATE data transaksi barang keluar.

mysql> -----------------------------
mysql> -- ubah detil transaksi keluar
mysql> -- untuk id transaksi 29,
mysql> -- dari quantity awal 4 menjadi 25
mysql> -----------------------------
mysql> update transaction_details
    -> set quantity = 25
    -> where id = 29 ;
Query OK, 1 row affected (0.07 sec)
Rows matched: 1  Changed: 1  Warnings: 0

mysql> -----------------------------
mysql> -- maka untuk item_id 1 (dari transaction detail id 29)
mysql> -- ada update quantity keluar dari 4 menjadi 25 ada selisih 21
mysql> -- dari transaksi sebelumnya saldo akhir item_id 1 adalah 46
mysql> -- maka saldo stok barang berubah, 46 +4 -25 = 25
mysql> -----------------------------
mysql> select * from items ;
+----+--------+-------------------------+------------------+---------+
| id | code   | name                    | quantity_on_hand | remarks |
+----+--------+-------------------------+------------------+---------+
|  1 | PC.001 | PC Jangkrik Tipe 1      |            25.00 | NULL    |
|  2 | PC.002 | PC Jangkrik Tipe 2      |            30.00 | NULL    |
|  3 | SV.001 | Server Rainer Tipe 1    |            10.00 | NULL    |
|  4 | SV.002 | Server Rainer Rackmount |            10.00 | NULL    |
+----+--------+-------------------------+------------------+---------+
4 rows in set (0.00 sec)

mysql> -----------------------------
mysql> -- YAY!!! Awesome!!!
mysql> -----------------------------
mysql> 

[/collapsed]

DELETE Data Transaksi

Untuk proses DELETE, sama seperti proses INSERT, trigger akan berjalan FOR EACH ROW, namun row yang sedang kita hapus ada di variable OLD. Logikanya adalah seperti ini,
  • Setiap kali ada penghapusan data transaksi barang masuk, maka field stok barang di table items akan kita kurangi
  • Sebaliknya, setiap kali ada penghapusan data transaksi barang keluar, maka field stok barang di table items akan kita tambahkan,

maka trigger DELETE akan seperti ini,

mysql> delimiter $$

mysql> drop trigger if exists trg_transaction_details_after_delete$$
Query OK, 0 rows affected (0.06 sec)

mysql> -- -----------------------------
mysql> -- after delete trigger
mysql> -- -----------------------------
mysql> create trigger trg_transaction_details_after_delete
    -> after delete on transaction_details
    -> for each row
    -> begin
    ->   -- -----------------------------
    ->   -- ambil jenis transaksi
    ->   -- -----------------------------
    ->   declare tipe varchar(20);
    ->   set tipe = (
    ->     select tt.code
    ->       from transactions tr
    ->       join transaction_types tt on tr.type_id=tt.id
    ->       where tr.id=old.trans_id
    ->   ) ;
    ->   -- -----------------------------
    ->   -- update sesuai jenis transaksi
    ->   -- -----------------------------
    ->   update items
    ->     set quantity_on_hand
    ->         = quantity_on_hand
    ->         + case when tipe='IN' then -old.quantity
    ->                when tipe='OUT' then old.quantity
    ->                else 0 end
    ->     where items.id=old.item_id ;
    -> end$$
Query OK, 0 rows affected (0.23 sec)

mysql> delimiter ;
mysql>

[collapsed title=Spoiler: Hasil Test DELETE Transaksi Barang Masuk dan Barang Keluar]

Status database sebelum proses DELETE.

mysql> ----------------------------
mysql> -- status stok 
mysql> -- sebelum proses DELETE
mysql> -----------------------------
mysql> select * from items ;
+----+--------+-------------------------+------------------+---------+
| id | code   | name                    | quantity_on_hand | remarks |
+----+--------+-------------------------+------------------+---------+
|  1 | PC.001 | PC Jangkrik Tipe 1      |            25.00 | NULL    |
|  2 | PC.002 | PC Jangkrik Tipe 2      |            30.00 | NULL    |
|  3 | SV.001 | Server Rainer Tipe 1    |            10.00 | NULL    |
|  4 | SV.002 | Server Rainer Rackmount |            10.00 | NULL    |
+----+--------+-------------------------+------------------+---------+
4 rows in set (0.00 sec)

mysql> -----------------------------
mysql> -- status detil transaksi
mysql> -- sebelum proses DELETE
mysql> -----------------------------
mysql> select * from transaction_details;
+----+----------+---------+----------+----------------------+
| id | trans_id | item_id | quantity | remarks              |
+----+----------+---------+----------+----------------------+
| 22 |        1 |       1 |       50 | Penerimaan Barang 1  |
| 23 |        1 |       2 |       30 | Penerimaan Barang 2  |
| 24 |        1 |       3 |       10 | Penerimaan Barang 3  |
| 25 |        1 |       4 |       15 | Penerimaan Barang 4  |
| 29 |        2 |       1 |       25 | Pengeluaran Barang 1 |
| 30 |        2 |       4 |        5 | Pengeluaran Barang 4 |
+----+----------+---------+----------+----------------------+
6 rows in set (0.00 sec)

Test DELETE data transaksi.

Untuk test delete, kita lakukan sederhanan saja, yaitu hapus semua data transactions_details sehingga seluruh data transaksi akaterhapus, maka status stok seharusnya berubah menjadi seperti awal lagi yaitu seluruh saldo stok bernilai 0 (nol)

mysql> -----------------------------
mysql> -- hapus detil transaksi
mysql> -----------------------------
mysql> delete from transaction_details ;
Query OK, 4 rows affected (0.03 sec)

mysql> -----------------------------
mysql> -- pastikan table detil transaksi kososng
mysql> -----------------------------
mysql> select * from transaction_details;
Empty set (0.00 sec)

mysql> -----------------------------
mysql> -- status saldo stok kembali nol
mysql> -----------------------------
mysql> select * from items;
+----+--------+-------------------------+------------------+---------+
| id | code   | name                    | quantity_on_hand | remarks |
+----+--------+-------------------------+------------------+---------+
|  1 | PC.001 | PC Jangkrik Tipe 1      |             0.00 | NULL    |
|  2 | PC.002 | PC Jangkrik Tipe 2      |             0.00 | NULL    |
|  3 | SV.001 | Server Rainer Tipe 1    |             0.00 | NULL    |
|  4 | SV.002 | Server Rainer Rackmount |             0.00 | NULL    |
+----+--------+-------------------------+------------------+---------+
4 rows in set (0.00 sec)

mysql> -----------------------------
mysql> -- YAY!!! I'm Invincible!!!
mysql> -----------------------------
mysql> 

[/collapsed]

[collapsed title=Spoiler: Source Code Trigger Lengkap]

delimiter $$

drop trigger if exists trg_transaction_details_after_insert$$
-- -----------------------------
-- after insert trigger
-- -----------------------------
create trigger trg_transaction_details_after_insert
after insert on transaction_details
for each row
begin
  -- -----------------------------
  -- ambil jenis transaksi
  -- -----------------------------
  declare tipe varchar(20);
  set tipe = (
    select tt.code
      from transactions tr
      join transaction_types tt on tr.type_id=tt.id
      where tr.id=new.trans_id
  ) ;
  -- -----------------------------
  -- update sesuai jenis transaksi
  -- -----------------------------
  update items
    set quantity_on_hand
        = quantity_on_hand
        + case when tipe='IN' then new.quantity
               when tipe='OUT' then -new.quantity
               else 0 end
    where items.id=new.item_id ;
end$$
 
drop trigger if exists trg_transaction_details_after_update$$
-- -----------------------------
-- after update trigger
-- -----------------------------
create trigger trg_transaction_details_after_update
after update on transaction_details
for each row
begin
  -- -----------------------------
  -- ambil jenis transaksi
  -- -----------------------------
  declare tipe varchar(20);
  set tipe = (
    select tt.code
      from transactions tr
      join transaction_types tt on tr.type_id=tt.id
      where tr.id=old.trans_id
  ) ;
  -- -----------------------------
  -- update sesuai jenis transaksi
  -- => kurangi dengan old quantity
  -- -----------------------------
  update items
    set quantity_on_hand
        = quantity_on_hand
        + case when tipe='IN' then -old.quantity
               when tipe='OUT' then old.quantity
               else 0 end
    where items.id=old.item_id ;
  -- -----------------------------
  -- update sesuai jenis transaksi
  -- => tambahkan dengan new quantity
  -- -----------------------------
  update items
    set quantity_on_hand
        = quantity_on_hand
        + case when tipe='IN' then new.quantity
               when tipe='OUT' then -new.quantity
               else 0 end
    where items.id=new.item_id ;
end$$
 
drop trigger if exists trg_transaction_details_after_delete$$
-- -----------------------------
-- after delete trigger
-- -----------------------------
create trigger trg_transaction_details_after_delete
after delete on transaction_details
for each row
begin
  -- -----------------------------
  -- ambil jenis transaksi
  -- -----------------------------
  declare tipe varchar(20);
  set tipe = (
    select tt.code
      from transactions tr
      join transaction_types tt on tr.type_id=tt.id
      where tr.id=old.trans_id
  ) ;
  -- -----------------------------
  -- update sesuai jenis transaksi
  -- -----------------------------
  update items
    set quantity_on_hand
        = quantity_on_hand
        + case when tipe='IN' then -old.quantity
               when tipe='OUT' then old.quantity
               else 0 end
    where items.id=old.item_id ;
end$$
 
delimiter ;

[/collapsed]

Simpulan

Setelah kita perhatikan hasil test di atas, maka proses pengerjaan coding di aplikasi akan jauh lebih mudah karena tidak perlu lagi memikirkan code untuk mengubah status stok barang, karena perubahan status stok barang seluruhnya sudah ditangani oleh trigger yang kita buat ini.

Salam PojokProgrammer

^_^

Aplikasi Inventory Sederhana – Analisa dan Desain Database

Aplikasi Inventory Sederhana - Analisa dan Desain Database

Design Database adalah salah satu hal penting yang perlu diperhatikan dalam membuat aplikasi perkantoran. Dalam membuat design database, ikutilah kaidah-kaidah yang pernah kita dapatkan semasa kuliah, terutama Normalisasi, minimal sampai dengan bentuk 3NF. Kesalahan dalam membuat design database dapat berakibat fatal, misalnya sulit membuat coding dan men-generate report yang kita inginkan. Dan jika sampai harus mengubah design database maka akan banyak waktu terbuang karena kita harus menyesuaikan kembali coding yang sudah dibuat sebelumnya. Oleh karena itu sediakanlah waktu dan pikiran yang cukup dalam men-design database ini.

Artikel ini adalah bagian dari artikel berseri tentang Tutorial Membuat Aplikasi Inventory Sederhana Menggunakan VB.net dan Database MySQL

Dalam membuat design database Aplikasi Inventory atau Aplikasi Stok Barang ini, kami juga menyengajakan diri untuk membuat design database menggunakan bahasa inggris, tujuannya selain melatih skill bahasa inggris kita, juga untuk melatih diri kita, siapa tahu aplikasi ini akan di-publish menjadi open source, atau kita berkesempatan berkontribusi dalam project open source lain.

Berdasarkan analisa dan design aplikasi yang tertuang dalam artikel sebelumnya, maka kita memerlukan sejumlah table untuk menyimpan data-data Barang dan Transaksi Keluar Masuk Barang. Untuk itu, sejumlah table yang diperlukan antara lain:

Tabel Barang

Table untuk menampung data master barang ini akan kita beri nama items. Data dictionary lengkapnya adalah sebagai berikut:

No. Nama Field Tipe Data Keterangan
1. id integer Primary Key, Auto Increment
2. code varchar(20) Kode barang berupa text bebas maksimal 20 karakter, bisa digunakan sebagai barcode
3. name varchar(100) Nama barang maksimal 100 karakter
4. quantity_on_hand decimal(10,2) Quantity barang terakhir yang saat ini ada di gudang
5. remarks text Keterangan lebih lengkap tentang barang bersangkutan

Tabel Jenis Transaksi

Tabel ini akan berisi kode untuk menentukan jenis transaksi dan kita beri nama transaction_types. Untuk aplikasi ini akan ada 2 (dua) jenis transaksi yaitu Transaksi Barang Masuk (kita beri kode BM) dan Transaksi Barang Keluar (kita beri kode BK). Data dictionary lengkapnya adalah sebagai berikut:

No. Nama Field Tipe Data Keterangan
1. id integer Primary Key, Auto Increment
2. code varchar(20) Kode jenis transaksi berupa text bebas maksimal 20 karakter
3. name varchar(100) Nama panjang yang lebih deskriptif, maksimal 100 karakter

Tabel Transaksi

Tabel ini akan berisi seluruh transaksi inventory dari aplikasi yang akan kita buat. Untuk membedakan Transaksi Barang Masuk dengan Transaksi Barang Keluar kita sediakan field type_id yang merupakan Foreign Key yang me-refer ke . Data dictionary lengkapnya adalah sebagai berikut:

No. Nama Field Tipe Data Keterangan
1. id integer Primary Key, Auto Increment
2. type_id integer Foreign Key refer ke tabel transaction_types, untuk membedakan Transaksi Barang Masuk atau Keluar
3. trans_code varchar(100) Nama panjang yang lebih deskriptif, maksimal 100 karakter
4. trans_date date Tanggal transaksi
5. remarks text Teks bebas untuk keterangan, silakan mengarang di field ini juga boleh

Tabel Detil Transaksi

Tabel ini akan berisi seluruh transaksi inventory dari aplikasi yang akan kita buat. Untuk membedakan Transaksi Barang Masuk dengan Transaksi Barang Keluar kita sediakan field type_id yang merupakan Foreign Key yang me-refer ke . Data dictionary lengkapnya adalah sebagai berikut:

No. Nama Field Tipe Data Keterangan
1. id integer Primary Key, Auto Increment
2. trans_id integer Foreign Key refer ke tabel transactions, untuk record detil transaksi ini milik transaksi yang mana
3. item_id integer Foreign Key refer ke tabel items, untuk menentukan barang mana yang harus diubah status stock-nya
4. quantity decimal(10,2) Jumlah barang yang masuk atau keluar
5. remarks text Teks bebas untuk keterangan, silakan mengarang di field ini juga boleh

Diagram ER

Diagram ER menggunakan notasi IDEF1X dari desain database untuk aplikasi inventory sederhana ini adalah sebagai berikut.

Design Database Aplikasi Inventiry Sederhana Menggunakan VB.net

Script Database

Sedangkan script sql create table-nya adalah sebagai berikut.

create table items (
  id int auto_increment primary key,
  code varchar(20) not null,
  name varchar(100) not null,
  quantity_on_hand decimal(10,2) not null default 0,
  remarks text null
) ;

create table transaction_types (
  id int auto_increment primary key,
  code varchar(20) not null,
  name varchar(100) not null
) ;

create table transactions (
  id int auto_increment primary key,
  type_id int not null,
  trans_code varchar(20) not null,
  trans_date varchar(100) not null,
  remarks text null,
  foreign key(type_id) references transaction_types(id)
) ;

create table transaction_details (
  id int auto_increment primary key,
  trans_id int not null,
  item_id int not null,
  quantity decimal(10,2) not null default 0,
  remarks text null, 
  foreign key (trans_id) references transactions(id), 
  foreign key (item_id) references items(id) 
) ;

Simpulan

Dengan demikian selesailah sudah proses analisa dan desain kita. Dengan tersedianya Design Aplikasi dan Design Database, maka langkah selanjutnya kita bisa membuat Aplikasi-nya dengan lebih mudah dan terarah.

^_^

Aplikasi Inventory Sederhana – Analisa dan Desain Aplikasi

Aplikasi Inventory Sederhana - Analisa dan Desain Aplikasi

Analisa dan Desain biasanya merupakan salah satu langkah yang kadang disepelekan kebanyakan programmer, terutama programmer pemula dan single fighter, karena dianggap menghabiskan waktu saja, Kebanyakan programmer lebih memilih untuk langsung duduk di depan komputer dan melakukan coding, hasilnya biasanya adalah kebingungan yang sangat tentang apa yang harus mereka lakukan pertama kali. Padahal analisa dan desain sesungguhnya akan membantu kita mengarahkan dan mengetahui fitur apa saja yang harus dibuat dalam aplikasi yang sedang dikembangkan ini. Dalam membuat Aplikasi Inventory Sederhana atau Aplikasi Stok Barang ini, kita akan memanfaatkan software StarUML untuk membuat Use Case Diagram aplikasi ini. Use Case Diagram menggambarkan “apa” saja, atau fitur yang harus ada dalam aplikasi yang sedang kita buat ini. Dan untuk memudahkan, kita akan membatasi lingkup tutorial ini sesuai dengan apa yang tercantum dalam Use Case Diagram yang kita buat sekarang.

Artikel ini adalah lanjutan dari artikel berseri tentang Tutorial Membuat Aplikasi Inventory Sederhana Menggunakan VB.net dan Database MySQL

analisa dan desain use case aplikasi inventory vbnet vb.net mysql sederhana

Aplikasi ini akan kita bagi menjadi beberapa module meliputi

  • Modul Master Barang
  • Modul Transaksi Inventory
  • Modul Laporan

 

Pembagian modul ini nantinya juga harus tercermin dalam code vb.net yang kita buat. Jika kita perhatikan dalam gambar, terlihat bahwa Modul Transaksi dan Modul Laporan bergantung pada Modul Master, pada saat yang sama Modul Laporan juga bergantu pada Modul Transaksi. Hal ini sangatlah wajar karena Transaksi  tidak bisa dilakukan tanpa adanya data Master, dan Laporan tidak bisa dibuat tanpa tersedianya data dari Modul Master dan Modul Transaksi. Setelah kita tahu module apa saja yang perlu dibuat, maka kita harus mendetilkan masing-masing modul dengan diagram use case-nya.

Modul Master Barang

Modul Master Barang akan berisikan use-case berikut ini dengan fungsinya masing-masing antara lain,

  • Mengelola Data Master Barang. Use Case ini menggambarkan proses pengelolaan data Master Barang, skenario utama use case ini adalah melihat list barang yang tersimpan dalam database, pengguna kemudian dapat melakukan filtering untuk mencari data barang yang diinginkan. Extension, atau skenario alternatif, dari use case ini meliputi,
    • Menambah Barang Baru. Pengguna akan menekan tombol tertentu yang akan menampilkan form entri data barang agar pengguna bisa mengisikan data barang yang akan dibuatnya
    • Mengubah Data Barang. Pengguna akan memilih data barang yang akan diubah datanya kemudian menekan tombol tertentu, atau melakukan klik ganda pada data bersangkutan dan sistem akan menampilkan form berisikan data barang yang ingin diubah.
    • Menghapus Data Barang. Pengguna akan memilih data barang yang akan dihapus, kemudian menekan tombol tertentu. Sistem kemudian akan memberikan konfirmasi apakah pengguna benar-benar akan melakukan penghapusan data.

analisa dan desain use case modul master aplikasi inventory vbnet vb.net mysql sederhana

Modul Transaksi

Modul Transaksi akan berisikan use-case berikut ini dengan fungsinya masing-masing antara lain,

  • Mengelola Transaksi Barang Masuk. Use Case ini menggambarkan proses pengelolaan data Transaksi Barang Masuk, skenario utama use case ini adalah melihat list transaksi yang tersimpan dalam database, pengguna kemudian dapat melakukan filtering untuk mencari data transaksi yang diinginkan. Extension, atau skenario alternatif, dari use case ini meliputi,
    • Menambah Transaksi Barang Masuk Baru. Pengguna akan menekan tombol tertentu yang akan menampilkan form entri data transaksi agar pengguna bisa mengisikan transaksi yang akan dibuatnya
    • Mengubah Data Transaksi Barang Masuk. Pengguna akan memilih data transaksi yang akan diubah datanya kemudian menekan tombol tertentu, atau melakukan klik ganda pada data bersangkutan dan sistem akan menampilkan form berisikan data transaksi yang ingin diubah.
    • Menghapus Data Transaksi Barang Masuk. Pengguna akan memilih data transaksi yang akan dihapus, kemudian menekan tombol tertentu. Sistem kemudian akan memberikan konfirmasi apakah pengguna benar-benar akan melakukan penghapusan data.

analisa dan desain use case modul transaksi aplikasi inventory vbnet vb.net mysql sederhana

  • Mengelola Transaksi Barang Keluar. Use Case ini menggambarkan proses pengelolaan data Transaksi Barang Keluar, skenario utama use case ini adalah melihat list transaksi yang tersimpan dalam database, pengguna kemudian dapat melakukan filtering untuk mencari data transaksi yang diinginkan. Extension, atau skenario alternatif, dari use case ini meliputi,
    • Menambah Transaksi Barang Keluar Baru. Pengguna akan menekan tombol tertentu yang akan menampilkan form entri data transaksi agar pengguna bisa mengisikan transaksi yang akan dibuatnya
    • Mengubah Data Transaksi Barang Keluar. Pengguna akan memilih data transaksi yang akan diubah datanya kemudian menekan tombol tertentu, atau melakukan klik ganda pada data bersangkutan dan sistem akan menampilkan form berisikan data transaksi yang ingin diubah.
    • Menghapus Data Transaksi Barang Keluar. Pengguna akan memilih data transaksi yang akan dihapus, kemudian menekan tombol tertentu. Sistem kemudian akan memberikan konfirmasi apakah pengguna benar-benar akan melakukan penghapusan data.

analisa dan desain use case modul transaksi aplikasi inventory vbnet vb.net mysql sederhana

Modul Laporan

Modul Laporan akan berisikan use-case berikut ini dengan fungsinya masing-masing antara lain,

  • Melihat Laporan Kartu Stok. Sederhana saja, aplikasi akan menampilkan kronolagi keluar masuk barang sesuai dengan kriteria kode barang yang diberikan oleh pengguna.
  • Melihat Laporan Mutasi Stok. Berdasarkan periode tertentu sesuai input dari pengguna, Aplikasi akan menampilkan summary dari total keluar dan masuk dari masing-masing barang.

analisa dan desain use case modul laporan aplikasi inventory vbnet vb.net mysql sederhana

Simpulan

Selesailah kita mendefinisikan semua fitur dari Aplikasi yang akan kita bangun. Teman-teman mungkin bertanya-tanya, “Kenapa tidak ada modul Security? Apakah pengguna dapat menggunakan Aplikasi ini tanpa Login terlebih dahulu?” Jawabannya adalah, kita dengaja membatasi lingkup tutorial ini. Mengenai Modul security yang mengatur hak akses pengguna silakan dikembangkan sendiri, atau…. jika ada kesempatan, mungkin akan kita buatkan tutorialnya tersendiri.

Tetap Semangat!

Aplikasi Inventory Sederhana

Aplikasi Inventory Sederhana menggunakan VB VBnet MySQL

Membuat Aplikasi Inventory Sederhana atau Aplikasi Stok Barang adalah salah satu topik yang sangat umum, dan sering dijadikan sebagai salah satu topik skripsi, atau sekedar untuk mempelajari bahasa pemrograman tertentu. Aplikasi inventory juga menjadi topik yang cukup digemari karena kemungkinan pengguna yang sangat banyak, mulai dari warung-warung pinggir jalan sampai dengan hipermarket akan memerlukan aplikasi inventory untuk mengontrol status barang yang mereka jual. Bagi seorang programmer pemula, membuat aplikasi inventory juga bisa menjadi batu loncatan untuk membangun aplikasi perkantoran yang jauh lebih rumit.

Untuk itu saya akan mencoba membuat sebuah Tutorial Membuat Aplikasi Inventory Sederhana Menggunakan VB.net dan Database MySQL. VB.net dipilih karena merupakan salah satu bahasa yang sangat populer di Indonesia, dan sama halnya dengan database MySQL. Tutorial ini akan dibuat berseri menjadi artikel-artikel kecil untuk memudahkan teman-teman mempelajari konsep yang ada di dalamnya.

Struktur dari tutorial ini akn dibagi-bagi menjadi subtopik kecil adalah sebagai berikut:

  1. Analisa dan Desain Aplikasi. Menjabarkan hasil analisa dan desain untuk aplikasi yang akan dibuat. Untuk memudahkan, Diagram UML Use Case akan digunakan untuk menggambarkan fitur-fitur yang akan tersedia dalam Aplikasi Inventory Sederhana ini.
  2. Analisa dan Desain Database. Menjabarkan hasil analisa dan desain database yang akan digunakan untuk menyimpan data barang dan transaksinya. Notasi IDEF1X akan digunakan untuk diagram desain database-nya
  3. Penggunaan Trigger untuk Update Stok Barang. Menjabarkan desain database trigger untuk melakukan proses update saldo stok barang setiap kali ada transaksi barang masuk dan transaksi barang keluar. Artikel ini dilengkapi dengan test langkah-demi-langkah untuk mempermudah pemahaman materi.
  4. Desain User Interface. Menjabarkan desain umum user interface dan pemanfaatan visual inheritance untuk mendapatkan tampilan yang konsisten untuk semua form dalam aplikasi ini.
  5. Desain Data Access Layer. Menjabarkan desain lapisan data akses untuk mempermudah kita membuat aplikasi ini. Untuk Data Access Layer ini akan kita gunakan ADO.net 2.0 terlebih dahulu untuk mempermudah teman-teman dalam migrasi dari VB6 ke VB.net. Kalau ada kesempatan nanti kita bisa buat menggunakan Entity Framework.
  6. Membuat Form Master Barang. Menjabarkan detil langkah demi langkah membuat form master barang, mencakup keseluruhan fungsi CRUD (Created Read Update Delete) untuk data barang.
  7. Membuat Form Transaksi Barang Masuk. Menjabarkan detil langkah demi langkah membuat form transaksi barang masuk, mencakup keseluruhan fungsi CRUD (Created Read Update Delete) untuk data transaksi barang masuk.
  8. Membuat Form Transaksi Barang Keluar. Menjabarkan detil langkah demi langkah membuat form transaksi barang keluar, mencakup keseluruhan fungsi CRUD (Created Read Update Delete) untuk transaksi barang keluar.
  9. Membuat Form Laporan Kartu Stok, Menjabarkan pembuatan form yang menampilkan data kartu stok masing-masing barang, meliputi kronologis keluar masuknya barang.
  10. Membuat Form Laporan Mutasi Stok, Menjabarkan pembuatan form yang menampilkan data kartu stok keseluruhan barang, berupa summary barang masuk dan keluar serta saldo terakhir barang tercatat di gudang.

 

Jadi….. Bookmark segera artikel ini, karena artikel-artikel lanjutan akan diterbitkan secara periodik. Dan mudah-mudahan tutorial ini dapat membantu teman-teman mempelajari VB.net.

Semangat Belajar!

^_^