Tugas 4 PBKK - NET MVVM

TUGAS 4 PBKK - MVVM

Source Code : https://github.com/vierifath/PBKK_TUGAS4

 

            MVVM (Model View View Model) adalah sebuah variasi dari MVC yang memisahkan view menjadi dua, yaitu view dan view model yang terhubung melalui data binding.

Berikut merupakan tutorial  menerapkan MVVM di Windows Presentation Foundation (WPF) :

 

Langkah #1 Membuat Project Baru:

Membuat project baru dengan cara pilihjenis proyek Visual C#, Windows, WPF Application untuk membuat aplikasi desktop yang memakai WPF.

Langkah #2 Membuat Model : 

Model dalam MVVM adalah domain model atau entity yang nantinya disimpan ke database.  Seluruh nilai dan operasi yang berkaitan dengan permasalahan yang dihadapi (business logic). Buatlah sebuah model baru dengan mengklik kanan nama proyek dan memilih Add, Class

Beri nama model ini sebagai ItemPenjualan yang kode programnya terlihat seperti berikut ini:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace LatihanMVVM
{
    public class ItemPenjualan
    {
        public ItemPenjualan()
        {
            DiskonPersen = 0;
        }

        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public long Id { get; set; }

        [StringLength(50)]
        public string NamaBarang { get; set; }

        public int Jumlah { get; set; }

        public decimal Harga { get; set; }

        public decimal DiskonPersen { get; set; }

        public decimal Total()
        {
            decimal total = Jumlah * Harga;
            return total - (DiskonPersen / 100 * total);
        }
    }
}

 

Langkah #3 Membuat View

 
View pada Windows Presentation Foundation (WPF) dibuat dalam bentuk XML yang disebut sebagai XAML. Sama seperti view pada Windows Forms, view XAML ini juga didukung oleh sebuah class C#.
Untuk kode selengkapnya bisa dilihat pada link berikut : link

 

Langkah #4 Membuat Model ViewMenghubungkan View, View Model, dan Model

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. Buat sebuah class baru dengan nama ItemPenjualanViewModel.
Untuk kode selengkapnya bisa dilihat pada link berikut : link

Langkah #5 Menghubungkan View, View Model, dan Model

Karena model sudah dibuat secara langsung di constructor view model, maka perlu menghubungkan view dan view model.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace LatihanMVVM
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new ItemPenjualanViewModel();
        }
    }
}

 

 

Langkah #6 Menambahkan Binding

Data binding dilakukan agar saya tidak perlu mengakses sebuah TextBox untuk mendapatkan nilai harga. Hanya perlu mengakses property Harga milik view model. 

 

Langkah #7 Menyimpan Model ke Database

Install entity framework dan Mysql Connector pada project kita. Yang perlu di perhatikan adalah mengunduh versi yang sesuai antara entity framework dan mysql connector. Disini gunakan Entity framework versi 6.0.0 dan Mysql Connector versi 6.8.7. Setelah itu ditambahkan reference-nya.

 

Langkah #8 Jalankan Program

Berikut tampilan screenshot ketika menjalankan program 

 

 

Untuk mengakses source code dapat mengunjungi link github yang tertera di bawah judul. Terimakasih.