Membuat Aplikasi MVVM dengan WPF di C#

April 14, 2021

MVVM adalah sebuah variasi dari MVC yang memisahkan view menjadi dua, yaitu view dan view model yang terhubung melalui data binding. Pada kesempatan ini, saya akan membahas MVVM dengan contoh berupa sebuah aplikasi yang memakai Windows Presentation Foundation (WPF).

Pertama buat sebuah project baru

Dalam MVVM terdapat model yang yang nantinya akan di simpan di dalam database dan berhubungan dengan business logic. Oleh karena itu kita buat sebuah model(ItemPenjualan) dengan cara Add Class, berikut isi dari class tersebut

Berikutnya kita akan membuat sebuah view. Pada project kita, kita dapat mengedit tampilan view dari program kita dengan cara mengubah file MainWindow.xaml. Ubah MainWindow.xaml menjadi sepertii berikut

Dan hasilnya, tampilannya akan menjadi seperti berikut

Selanjutnya kita akan membuat sebuahh view model yang berfungsi untuk menampung state/nilai yang ada di view sehingga command tidak perlu mengakses setiap control yang ada pada view secara langsung. Disini saya membuat class baru dengan nama ItemPenjualanViewModel yang isinya sebagai berikut

Selanjutnya kita perlu menghubungkan view, view model dan model yang telah kita buat dengan cara mengedit file
MainWindow.xaml.cs dan mengubahnya menjadi seperti berikut,

Selanjutnya agar data yang terdapat pada view dapat diteruskan pada model nantinya, maka kita perlu melakukan binding kepada atribut atribut yang hendak kita kirim nantinya. Untuk melakukan hal tersebut, edit file MainWindow.xaml dan tambahkan code berikut,

Maka ketika program kita jalankan akan berfungsi sebagaimana berikut,

Kita ingin saat user menginputkan input yang salah maka akan muncul sebuah notifikasi error pada textbox-nya. Sehingga kita perlu menambahkan codingan sebagai berikut,

Maka hasilnya akan seperti berikut,

Selanjutnya kita ingin meng-koneksikan aplikasi kita dengan database. Yang perlu kita persiapkan adalah menginstall entity framework dan Mysql Connector pada project kita. Yang perlu di perhatikan adalah mendownload versi yang sesuai antara entity framework dan mysql connector. Disini saya menggunakan Entity framework versi 6.0.0 dan Mysql Connector versi 6.8.7. Setelah itu kita tambahkan reference-nya.

Setelah menambahkan reference, kita perlu setting untuk koneksinya di App.config. Sesuaikan connection stringnya dari db sampai usernamenya,

Selanjutnya, saya ingin mengatur agar property id menjadi otomatis (auto increment). Sehingga pada ItemPenjualan.cs saya rubah Id dan nama menjadi seperti berikut,

Lalu selanjutnya saya membuat class persistence context. Kelas ini berefungsi untuk meng-generate model yang sudah kita buat menjadi sebuah table pada database. Disini saya membuat sebuah dengan nama LatihanContext.cs

Selanjutnya pada mysql EF 6, table _migrationhistory yang dihasilkan menghasilkan kolom yg tetrlalu besar. Sehingga kita mengganti ukuran kolom tersebut saat dii generate dengan cara membuat sebuah class MyHistoryContext.cs dengan isi sebagai berikut,

Lalu pada ItemPenjualanViewModel.cs kita perlu menambahkan sebuah fungsi trigger saat button simpan di klik,

Setelah kita membuat semua yang dibutuhkan pada program kita, kita perlu menggenerate sebuah table dengan cara, buka Packet Manager Console lalu ketikkan Enable-Migrations setelah itu folder migrations akan otomatis terbuat pada project kita,

Lalu pada Packet Manager Console ketikkan Add-Migration initial, dan secara otomatis akan dibuatkan file migration,

Lalu untuk menjalankan file migration tersebut ketikkan Update-Database dan secara otomatis database kita akan dibuatkan sebuah table sesuai dengan model yang telah kita buat,