PBKK Tugas 4 - Penerapan MVVM di WPF Menggunakan .NET

Nama : Maisie Chiara Salsabila

NRP  : 05111840000057

Kelas : PBKK A

Code dapat diakses di : Link Source Code

Referensi berasal dari : Link Referensi

 

Penjelasan MVVM  

MVVM adalah kependekan dari Model, View, ViewModel. MVVM merupakan salah satu architectural patterns yang membagi tanggung jawab kepada tiga komponen utama yaitu Model, View, dan View-Model. Tanggung jawab ketiga komponen tersebut diantaranya:

1. Model : Bertanggung jawab untuk menyediakan data yang di butuhkan oleh aplikasi.
2. View : Bertanggung jawab untuk merepresentasikan data yang berisi User Interface pada aplikasi.
3. ViewModel : Bertanggung jawab untuk menyimpan dan mengambil data dari Model untuk nantinya digunakan dan ditampilkan oleh View. Komponen ini merupakan inti dari Architectural Patterns MVVM.

Pada tugas ini saya akan mencoba menerapkan MVVM pada WPF (Windows Presentation Foundation) berdasarkan dari referensi yang diberikan.

 

Implementasi Aplikasi

1. Buka Visual Studio 2019, lalu pilih "Create a new project"

 

2. Pilih "WPF Application"

 

3. Mengatur Project Name dan Lokasi Penyimpanan

4.  Memilih Target Framework

5. Membuat class 'ItemPenjualan' sebagai model baru dengan cara 

    klik kanan pada nama proyek > klik Add > klik Class > beri nama 'ItemPenjualan'

Lalu menulis kode sebagai berikut:

 

 

6.  Menambahkan reference System.ComponentModel.DataAnnotations pada solution aplikasi

 

7.  Mengubah kode program pada "MainWindow.xaml" untuk tampilan aplikasi

 

 

8. Membuat class 'ItemPenjualanViewModel' sebagai model baru dengan cara 

    klik kanan pada nama proyek > klik Add > klik Class > beri nama 'ItemPenjualanViewModel'

Lalu menulis kode sebagai berikut:

 

9.  Mengubah kode program pada "MainWindow.xaml.cs" untuk menghubungkan model dengan view

 

10. Mengubah kode program pada "MainWindow.xaml" untuk melakukan binding dan menambahkan validasi 

 

 

11. Mengunduh MySQL Connector/.Net versi 6

 

12. Menambahkan reference MySql.Data.EntityEF6

 

13. Menambahkan Nuget Package Entity Framework 6

 

14. Mengubah kode program pada "App.config"

 

15. Mengubah kode program pada "ItemPenjualan.cs" untuk menambahkan sebuah atribut pada model agar nilai property Id dihasilkan secara otomatis oleh database (melalui auto number)

 

16. Membuat class 'LatihanContext' sebagai model baru dengan cara 

    klik kanan pada nama proyek > klik Add > klik Class > beri nama 'LatihanContext'

17. Membuat class 'MyHistoryContext' sebagai model baru dengan cara 

    klik kanan pada nama proyek > klik Add > klik Class > beri nama 'MyHistoryContext'

18. Mengubah kode program class 'ItemPenjualanViewModel' untuk menambah class 'SimpanCommand' dan property pada 'ViewModel'

19. Mengubah kode program pada "MainWindow.xaml" untuk melakukan binding pada button "Simpan"

20. Menambahkan kode program pada "LatihanContext.cs"

21. Membuat migration database

22. Migrasikan database lalu jalankan program

23. Hasil

Tampilan utama

Hasil sementara

*Hasil belum tersimpan ke dalam database karena masih ada kendala pada koneksi database dan instalasi mysql connectornya