Tugas 5 PBKK C - Menerapkan MVVM Di Windows Presentation Foundation (WPF)

 Artikel ini akan membahas mengenai penerapan Model View View Model (MVVM). MVVM adalah sebuah pola arsitektur perangkat lunak yang memfasilitasi pemisahan pengembangan antarmuka pengguna grafis (tampilan) - baik itu melalui markup language atau kode GUI - dari pengembangan back-end logic (model) sehingga tampilan tidak bergantung pada platform model tertentu. Telah dijelaskan sebelumnya bahwa WPF adalah subsistem grafis baru dalam Sistem Operasi Windows yang dibangun dengan .NET Framework. Secara fisik, ini adalah kumpulan pustaka kelas yang hadir dengan semua versi terbaru kerangka .NET untuk membuat dan menjalankan UI yang menarik dan interaktif.

Berikut adalah hal yang akan dilakukan dalam proses contoh penerapan MVVM pada WPF:

1. Persiapan Instalasi Visual Studio Community, 

Jika belum memiliki VSC, silakan untuk melakukan instalasi Visual Studio Community. Cara instalasi dapat dilihat pada laman berikut.

2. Pembuatan Aplikasi

Lakukan pembuatan contoh program dengan sehingga tampilan program akan sesuai dengan contoh yang dimaksudkan. Referensi yang digunakan adalah laman berikut.

3. Koneksi ke Basis Data

Pada aplikasi tersebut, koneksi basis data dengan aplikasi masih belum ada sehingga diperlukan suatu perubahan kode sumber sehingga hasil masukan pada aplikasi akan terseimpan ke dalam basis data. Referensi yang digunakan dapat dilihat pada laman berikut.

3.1. Instalasi MySQL Installer

Lakukan instalasi MySQL dengan memilih installer community (mysql-installer-community-8.0.23.0.msi) dan pilih Custom, kemudian Add dan pilih product berikut:

• MySQL Server
• MySQL for Visual Studio
• MySQL Connector for .NET

Langkah selanjutnya pilih Next dan pilih Execute di tahap Installation. Ketika proses selesai, pilih Next sampai pada tahap Account and Roles dan masukkan password dengan contohnya "root". Pilih Next hingga di tahap Apply Configuration lalu pilih Execute. Berikut adalah tampilan product yang ter-install:

3.2. Instalasi Package

Setelah itu lakukan instalasi package pada Visual Studio Community melalui NuGet Pakage Manager. Cari package MySql.Data.EntityFramework, karena package tersebut akan digunakan untuk melakukan koneksi ke basis data.

3.3. Penghubungan Aplikasi dengan Basis Data

Lakukan perubahan pada App.Config dengan menyesuaikan Connection String (name, port, dan database) dan ganti MySql.Data.EntityF6 menjadi MySql.Data.EntityFramework. Lakukan perubahan pada WpfContext.cs seperti pada kode sumber berikut:

Berikutnya buat basis data dapat melalui MySQL 8.0 Command Line.

Kembali ke Visual Studio Community, pilih menu Tools, pilih NuGet Package Manager, pilih Package Manager Console. Ketikkan perintah:

• Enable-Migrations
• Add-Migrations (Setelahnya akan diminta parameter name. Masukkan nama bebas untuk parameter name yang diminta)
• Update-Database

Berikutnya pilih menu Tools, pilih Connect to Database. Sesuai dengan nama basis data yang telah dibuat "wpf0" masukkan Database name-nya yaitu wpf0. Berikutnya untuk melihat basis data, pilih menu View, pilih Server Explorer, dan pilih basis data dan tabel yang dimaksud. Klik kanan pada tabel dan pilih Retrieve Data.

Berikut adalah demo aplikasi yang telah dibuat:

Berikut GitHub repository dari MVVM-WPF: GitHub-MVVM.

Fransiskus Xaverius Kevin Koesnadi

05111840000162