Tugas 4 Menerapkan MVVM Di Windows Presentation Foundation (WPF)

Link Github : Source Code


  • Pertama buat sebuah project baru



  • Kita buat sebuah model(ItemPenjualan) dengan cara Add Class, berikut isi dari class tersebut

  • Ubah file MainWindow.xaml. Ubah MainWindow.xaml menjadi sepertii berikut


  • Dan hasilnya, tampilannya akan menjadi seperti berikut

 


  • MVVM terdiri atas model, view dan view model. Saya sudah membuat model dan view. Sekarang, saya akan membuat view model. Pada dasarnya, view model adalah sesuatu yang menampung state/nilai yang ada diview sehingga command (dan controller bila ada) tidak perlu mengakses setiap control yang ada di view secara langsung. Sebagai contoh, saya akan membuat sebuah class baru dengan nama ItemPenjualanViewModel yang isinya seperti berikut ini:


  • 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 itu kita import database yang ada di github dengan nama wpf-practice.sql
  • Selesai, sekarang jika kita jalankan program kita, maka data akan berhasil tersimpan kedalam database.

Komentar