Data Binding

Aplikasi Inventory Sederhana – Form Transaksi Barang Masuk

superadmin July 20, 2015 No Comments

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.

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.

[/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.

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.

[/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.

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.

[/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]

[/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]

[/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]

[/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]

[/collapsed]

Hasil akhirnya akan tampak seperti pada gambar di bawah ini.

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

[/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]

[/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 Sini. Dibuat menggunakan Visual Studio 2013,

Salam PojokProgrammer ^_^

Aplikasi Inventory Sederhana – Form Master Barang

superadmin May 16, 2015 No Comments

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 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] [/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] [/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] [/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] [/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] [/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][/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][/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][/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 Sini. Dibuat menggunakan Visual Studio 2013,

Salam PojokProgrammer ^_^

Filter Data Menggunakan Tanggal dan Karakter di VB.net

superadmin July 11, 2014 No Comments

Filter Pengambilan Data Menggunakan Tanggal dan Karakter di VB.net

Tips dan Trik | Saat membangun sebuah aplikasi database, pasti kita akan bertemu dengan kasus pengolahan data yang besar atau proses pengambilan (retrieval) data yang luar biasa banyak. Untuk memudahkan proses pengambilan data, dan pengolahannya, maka kita harus tahu bagaimana cara mengambil data dengan kriteria tertentu dari database. Proses Filter data ini menjadi penting karena sesungguhnya pengguna tidak memerlukan seluruh data yang ada di database, namun hanya sebagian kecil saja. Misalkan data transaksi keuangan yang tersimpan bisa jutaan row berisikan data beberapa tahun terakhir, biasanya pengguna hanya memerlukan data transaksi di bulan tertentu saja. Artikel ini akan mencoba menjelaskan cara melakukan filter data dari database berdasarkan beberapa kriteria sekaligus, yaitu berdasarkan string, angka, dan tanggal.

Misalkan kita memiliki 2 (dua buah table) yaitu Orders dan OrderTypes. Table Orders menyimpan data-data transaksi berikut dengan tanggal dan jenis transaksi. Table OrderTypes menyimpan definisi jenis-jenis transaksi yang ada, misalkan transaksi Purchase Order, Deliveri Order dan sebagainya. Penampakan isi table Orders adalah seperti pada gambar di bawah ini,

Sedangkan isi table OrderTypes seperti tampak pada gambar di bawah ini.

Kemudian kita coba buat sebuah desain form seperti tampak pada gambar di bawah ini. Kita akan menggunakan control TextBox untuk filter berdasarkan Nomor Transaksi, kemudian menggunakan DateTimePicker untuk filter berdasarkan tanggal transaksi, dan ComboBox untuk filter berdasarkan Jenis Transaksi. Dengan cara ini kita mendapatkan beberapa model filter sekaligus (y).

Berikutnya yang kita perlukan adalah code untuk proses-proses berikut ini

Inisialisasi kriteria filter tanggal transaksi
Inisialisasi kriteria filter jenis transaksi
proses pengambilan data dari database

Untuk proses pengambilan data dari database, aplikasi contoh kita menggunakan SQL Server 2012 LocalDB dengan connection string seperti di bawah ini

Private Const _cnString As String = "Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\dbSample.mdf;Integrated Security=True"

Untuk inisialisasi kriteria filter tanggal, maka kita cukup memberikan nilai tanggal ke control DateTimePicker berupa tanggal awal dan tanggal akhir tahun saja, dengan asumsi pengguna ingin melihat data pada tahun ini secara default. Maka code-nya akan tampak seperti ini.

    Private Sub InitializeDatePicker()
        ' set value date time picker ke awal dan akhir tahun
        DateTimePicker1.Value = "2014-01-01"
        DateTimePicker2.Value = "2014-12-31"
    End Sub

Untuk jenis transaksi, kita mengambil jenis-jenis transaksi yang tersedia di dalam tabel OrderTypes kemudian memuatnya ke ComboBox, sehingga code-nya akan tampak seperti ini

    Private Sub InitializeComboBox()
        ' siapkan koneksi database
        Dim cn As New SqlConnection(_cnString)
        ' siapkan data adapter untuk data retrieval
        Dim da As New SqlDataAdapter("select * from OrderTypes", cn)
        ' siapkan datatable untuk menampung data dari database
        Dim dt As New DataTable
        ' enclose di dalam try-catch block
        ' untuk menghindari crash jika terjadi kesalahan database
        Try
            ' ambil data dari database
            da.Fill(dt)
            ' bind data ke combobox
            ComboBox1.DataSource = dt
            ComboBox1.ValueMember = "ID"
            ComboBox1.DisplayMember = "Description"
            ' DONE!!!
        Catch ex As Exception
            ' tampilkan pesan error
            MessageBox.Show(ex.Message)
        End Try
    End Sub

Untuk proses penampilan data ke grid, maka yang kita lakukan adalah membuat perintah SQL berdasarkan kriteria yang diberikan pengguna kemudian mengambilnya dari database dan memuat data yang didapat ke dalam GridView. Maka code-nya akan tampak seperti di bawah ini.

    Private Sub RefreshGrid()
        ' siapkan koneksi database
        Dim cn As New SqlConnection(_cnString)
        ' siapkan data adapter untuk data retrieval
        Dim da As New SqlDataAdapter("SELECT A.*, B.Description AS TypeName " & _
                                     "FROM Orders A JOIN OrderTypes B ON A.TypeID=B.ID " & _
                                     "WHERE OrderNum LIKE @p1 AND TypeID = @t1 " & _
                                     "AND OrderDate BETWEEN @d1 AND @d2 ", cn)
        da.SelectCommand.Parameters.AddWithValue("@p1", "%" & TextBox1.Text & "%")
        da.SelectCommand.Parameters.AddWithValue("@t1", ComboBox1.SelectedValue)
        da.SelectCommand.Parameters.AddWithValue("@d1", DateTimePicker1.Value.ToString("yyyy-MM-dd"))
        da.SelectCommand.Parameters.AddWithValue("@d2", DateTimePicker2.Value.ToString("yyyy-MM-dd"))
        ' siapkan datatable untuk menampung data dari database
        Dim dt As New DataTable
        ' enclose di dalam try-catch block
        ' untuk menghindari crash jika terjadi kesalahan database
        Try
            ' ambil data dari database
            da.Fill(dt)
            ' bind data ke combobox
            DataGridView1.DataSource = dt
            ' DONE!!!
        Catch ex As Exception
            ' tampilkan pesan error
            MessageBox.Show(ex.Message)
        End Try
    End Sub

Secara keseluruhan, Code dalam Form kita menjadi seperti ini, termasuk di dalamnya procedure New dan Event Handler untuk menangani event click di tombol Filter.

Imports System.Data.SqlClient

Public Class Form1
    Private Const _cnString As String = "Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\dbSample.mdf;Integrated Security=True"

    Public Sub New()
        ' required by form designer
        InitializeComponent()
        ' inisialisasi datetimepicker
        InitializeDatePicker()
        ' inisialisasi combobox jenis transaksi
        InitializeComboBox()
        ' refresh grid data
        RefreshGrid()
    End Sub

    Private Sub InitializeDatePicker()
        ' set value date time picker ke awal dan akhir tahun
        DateTimePicker1.Value = "2014-01-01"
        DateTimePicker2.Value = "2014-12-31"
    End Sub

    Private Sub InitializeComboBox()
        ' siapkan koneksi database
        Dim cn As New SqlConnection(_cnString)
        ' siapkan data adapter untuk data retrieval
        Dim da As New SqlDataAdapter("select * from OrderTypes", cn)
        ' siapkan datatable untuk menampung data dari database
        Dim dt As New DataTable
        ' enclose di dalam try-catch block
        ' untuk menghindari crash jika terjadi kesalahan database
        Try
            ' ambil data dari database
            da.Fill(dt)
            ' bind data ke combobox
            ComboBox1.DataSource = dt
            ComboBox1.ValueMember = "ID"
            ComboBox1.DisplayMember = "Description"
            ' DONE!!!
        Catch ex As Exception
            ' tampilkan pesan error
            MessageBox.Show(ex.Message)
        End Try
    End Sub

    Private Sub RefreshGrid()
        ' siapkan koneksi database
        Dim cn As New SqlConnection(_cnString)
        ' siapkan data adapter untuk data retrieval
        Dim da As New SqlDataAdapter("SELECT A.*, B.Description AS TypeName " & _
                                     "FROM Orders A JOIN OrderTypes B ON A.TypeID=B.ID " & _
                                     "WHERE OrderNum LIKE @p1 AND TypeID = @t1 " & _
                                     "AND OrderDate BETWEEN @d1 AND @d2 ", cn)
        da.SelectCommand.Parameters.AddWithValue("@p1", "%" & TextBox1.Text & "%")
        da.SelectCommand.Parameters.AddWithValue("@t1", ComboBox1.SelectedValue)
        da.SelectCommand.Parameters.AddWithValue("@d1", DateTimePicker1.Value.ToString("yyyy-MM-dd"))
        da.SelectCommand.Parameters.AddWithValue("@d2", DateTimePicker2.Value.ToString("yyyy-MM-dd"))
        ' siapkan datatable untuk menampung data dari database
        Dim dt As New DataTable
        ' enclose di dalam try-catch block
        ' untuk menghindari crash jika terjadi kesalahan database
        Try
            ' ambil data dari database
            da.Fill(dt)
            ' bind data ke combobox
            DataGridView1.DataSource = dt
            ' DONE!!!
        Catch ex As Exception
            ' tampilkan pesan error
            MessageBox.Show(ex.Message)
        End Try
    End Sub

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        ' refresh grid data
        RefreshGrid()
    End Sub

End Class

Penampakan aplikasi berjalan adalah seperti ini

Selamat Belajar, Salam Pojok Programmer !

CRUD Sederhana – Insert Menggunakan MySqlCommand

superadmin June 28, 2014 No Comments

CRUD Sederhana | Aplikasi database memerlukan pemahaman yang cukup karena banyak konsep yang harus dipahami sebelumnya, belum lagi komponen dan driver yang harus di-install sebelumnya. Namun .NET framework memudahkan kita untuk membuat coding database atau dikenal sebagai CRUD (Create Read Update Delete). Artikel ini akan membahas proses INSERT data ke database MySql menggunakan MySqlCommand. Pertama-tama kita siapkan table yang akan digunakan untuk menyimpan data. Silakan buka phpMyAdmin dan jalankan script SQL berikut ini untuk membuat table-nya

CREATE TABLE `pegawai` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nip` varchar(50) CHARACTER SET utf8 DEFAULT NULL,
  `nama` varchar(50) CHARACTER SET utf8 DEFAULT NULL,
  `alamat` varchar(50) CHARACTER SET utf8 DEFAULT NULL,
  `tempat_lahir` varchar(50) CHARACTER SET utf8 DEFAULT NULL,
  `tanggal_lahir` date DEFAULT NULL,
  PRIMARY KEY (`id`)
);

Berikutnya kita buatkan Form sederhana yang berisikan TextBox untuk input data dan DataGridView untuk menampilkan data yang sudah tersimpan di database. Mungkin kira-kira tampilannya seperti ini, namun silakan jika teman-teman punya selera desain yang lain.

Pada awalprogram kita lakukan inisialisasi data dengan cara melakukan refresh terhadap isi grid, dengan menggunakan code seperti ini

Public Sub New()
    ' required by designer code
    InitializeComponent()
    ' required by this tutorial
    RefreshDataGrid()
End Sub

Private Sub RefreshDataGrid()
    ' siapkan koneksi database
    Dim cn As New MySqlConnection(cnString)
    Dim da As New MySqlDataAdapter("SELECT * FROM pegawai", cn)
    Dim dt As New DataTable
    ' coba ambil data
    Try
        ' masukkan data ke datatable
        da.Fill(dt)
        ' binding datatable ke grid
        DataGridView1.DataSource = dt
    Catch ex As Exception
        ' tampilkan error jika ada
        MessageBox.Show(ex.Message)
    End Try
End Sub

Sedangkan ini adalah code yang digunkan untuk meng-handle event click dari button Simpan.

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
    ' siapkan koneksi database
    Dim cn As New MySqlConnection(cnString)
    Dim cm As MySqlCommand
    Try
        ' siapkan perintah sql
        cm = cn.CreateCommand
        cm.CommandType = CommandType.Text
        cm.CommandText = "INSERT " & _
            "INTO pegawai(nip, nama, tempat_lahir, tanggal_lahir, alamat) " & _
            "VALUES (@nip, @nama, @tempat, @tanggal, @alamat)"
        ' gunakan parameter
        cm.Parameters.AddWithValue("@nip", TextBox1.Text)
        cm.Parameters.AddWithValue("@nama", TextBox2.Text)
        cm.Parameters.AddWithValue("@tempat", TextBox3.Text)
        cm.Parameters.AddWithValue("@alamat", TextBox4.Text)
        cm.Parameters.AddWithValue("@tanggal", DateTimePicker1.Value.ToString("yyyy-MM-dd"))
        ' buka koneksi database (wajib)
        cn.Open()
        ' jalankan perintah insert
        cm.ExecuteScalar()
        ' tutup koneksi (kalau tidak, dosa!)
        cn.Close()
        ' refresh data grid kembali
        RefreshDataGrid()
    Catch ex As Exception
        ' tampilkan error jika ada
        MessageBox.Show(ex.Message)
    End Try
End Sub

Dan Hasil akhirnya setelah dijalankan menjadi seperti ini

Silakan unduh source code di sini. Selamat Belajar

Mudah Membuat Chained Drop Down Combo Box

superadmin January 30, 2014 No Comments

Chained Dropdown List, atau Chained Combo Box, atau Chained Select, atau jika di Indonesiakan menjadi Select Bertingkat atau Combo Box Bertingkat

Belajar Programming | Chained Dropdown List, atau Chained Combo Box, atau Chained Select, atau jika di Indonesiakan menjadi Select Bertingkat atau Combo Box Bertingkat, adalah salah satu teknik yang sering ditanyakan di forum-forum pemrograman. Dengan teknik ini, kita membuat seolah-olah beberapa dropdown list atau combobox saling berhubungan, misalkan combobox nama-nama kota akan terisi otomatis sesuai dengan pilihan negara di combobox lainnya. Atau combobox list pegawai akan berubah sesuai dengan departemen yang dipilih. Teknik ini sebenarnya sangatlah sederhana, namun memerlukan pemahaman yang cukup komprehensif mengenai mengenai beberapa hal, seperti cara mengambil data dari database, cara mengisi data ke combobox atau dropdown list, dan cara mengambil pilihan pengguna sebagai referensi untuk mengisi combobox lainnya.

(more…)

Mengisi ComboBox Dengan Data Dari Database

superadmin December 24, 2013 No Comments

Belajar Programming | Salah satu hal yang amat sangat umum dalam membuat sebuah aplikasi VB.net atau C# adalah mengisi ComboBox dengan berdasarkan data yang ada di database. Sebenarnya hal ini sangat simple namun bagi para programmer bisa jadi merupakan hal yang sangat sulit 🙂 Cara yang paling mudah adalah dengan menggunakan metoda data-binding sehingga kita bisa menghilangkan dan menghapus code iterasi yang melelahkan saat mengisi data ke combobox bersangkutan. Langkah-langkah atau algoritma dasarnya adalah sebagai berikut:

Siapkan koneksi database
Siapkan perintah SQL
Siapkan variable penampung data (bisa DataTable atau DataSet)
Ambil data dari database, masukkan ke DataTable
Binding data di DataTable ke ComboBox

Algortima yang sederhana di atas ketika kita terjemahkan ke dalam VB.net akan seperti ini,

Imports System.Data
Imports System.Data.SqlClient

Public Class Form1

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles Me.Load
        InitializeComboBox()
    End Sub

    Private Sub InitializeComboBox()
        ' siapkan koneksi database
        Dim cn As New SqlConnection(My.Settings.LocalDatabase)
        ' siapkan data adapter untuk data retrieval
        Dim da As New SqlDataAdapter("select account_id, description from acc_accounts", cn)
        ' siapkan datatable untuk menampung data dari database
        Dim dt As New DataTable
        ' enclose in try-catch block
        ' untuk menghindari crash jika terjadi kesalahan database
        Try
            ' ambil data dari database
            da.Fill(dt)
            ' bind data ke combobox
            ComboBox1.DataSource = dt
            ComboBox1.ValueMember = "account_id"
            ComboBox1.DisplayMember = "description"
            ' DONE!!!
        Catch ex As Exception
            ' tampilkan pesan error
            MessageBox.Show(ex.Message)
        End Try
    End Sub

End Class

Sedangkan jika kita terjemahkan ke dalam C# akan menjadi seperti ini,

using System;
using System.Data;
using System.Data.SqlClient;
using System.Windows.Forms;

namespace ComboBoxSample2
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            InitializeComboBox();
        }

        private void InitializeComboBox()
        {
            // siapkan koneksi database
            SqlConnection cn = new SqlConnection(ComboBoxSample2.Properties.Settings.Default.LocalDatabase);
            // siapkan data adapter untuk data retrieval
            SqlDataAdapter da = new SqlDataAdapter("select account_id, description from acc_accounts", cn);
            // siapkan datatable untuk menampung data dari database
            DataTable dt = new DataTable();
            // enclose in try-catch block
            // untuk menghindari crash jika terjadi kesalahan database
            try
            {
                // ambil data dari database
                da.Fill(dt);
                // bind data ke combobox
                ComboBox1.DataSource = dt;
                ComboBox1.ValueMember = "account_id";
                ComboBox1.DisplayMember = "description";
                // DONE!!!
            }
            catch (Exception ex)
            {
                // tampilkan pesan error
                MessageBox.Show(ex.Message);
            }
        }
    }
}

Jika data yang ada di database seperti ini,

Maka tampilan aplikasinya jadi seperti ini,

Semoga berguna…. Happy Coding

^_^