Rosa Valentine Lammora | 05111840000035 | PBKK A
Penjelasan
- Buat project baru yang berjenis Windows Presentation Forms App dengan .NET Framework di Visual Studio 2019.
Model
- Klik kanan pada nama proyek di Solution Explorer, kemudian klik Add Class.
- Pertama kita membuat class ItemPenjualan yang terisi dengan deklarasi nama dan tipe dari atribut-atribut pada sebuah barang penjualan. Class ini disebut sebagai model dalam kerangka kerja MVVM. Di sini kita bisa menambahkan handling untuk ketidaksesuaian input pada form.
- Isi file ItemPenjualan.cs dengan kode berikut:
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace LatihanMVVM
{
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);
}
}
}
View
- Kemudian, kita modifikasi view dengan mengklik file MainWindow.xaml. Working space kita akan menampilkan purwarupa aplikasi WPF.
- Isi file MainWindow.xaml dengan kode berikut:
<Window x:Class="LatihanMVVM.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="356" Width="528">
<Window.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="20" />
<Setter Property="FontFamily" Value="Myriad Pro" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF508FC4" Offset="0" />
<GradientStop Color="#FF6F94AD" Offset="1" />
<GradientStop Color="#FFC7F3FF" Offset="0.302" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Foreground">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF5252CE" Offset="0" />
<GradientStop Color="#FF1B1B5D" Offset="0.953" />
<GradientStop Color="#FF6363CB" Offset="0.337" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Label">
<Setter Property="FontSize" Value="14" />
</Style>
<Style TargetType="TextBox">
<Setter Property="Language" Value="in-IN" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border x:Name="customBorder" Background="{TemplateBinding Background}" CornerRadius="5" BorderThickness="2" BorderBrush="Gray">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter TargetName="customBorder" Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="5" ShadowDepth="0" Color="#578EC9"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="False">
<Setter Property="Foreground" Value="Gray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<StackPanel Orientation="Horizontal">
<AdornedElementPlaceholder />
<TextBlock Text="Perlu Diperbaiki!" Padding="3" Foreground="Red" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Button">
<Setter Property="Background" Value="#DEF2FC" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontSize" Value="15"/>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="3" ShadowDepth="0" Color="#578EC9"/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="customBorder" Background="{TemplateBinding Background}" CornerRadius="4" BorderThickness="2" BorderBrush="Gray">
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#2394CC" />
<Setter Property="Foreground" Value="White" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Effect" Value="{x:Null}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Effect">
<Setter.Value>
<BlurEffect Radius="3" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Label Content="Nama Barang:" Height="29" HorizontalAlignment="Left" Margin="0,49,0,0" Name="label2" VerticalAlignment="Top" HorizontalContentAlignment="Right" Width="107" />
<TextBox Height="23" HorizontalAlignment="Stretch" Margin="112,55,12,0" Name="textBox1" VerticalAlignment="Top" Text="{Binding Path=NamaBarang}"/>
<Label Content="Jumlah:" Height="27" HorizontalAlignment="Left" Margin="1,86,0,0" Name="label3" VerticalAlignment="Top" Width="106" HorizontalContentAlignment="Right" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="113,90,0,0" Name="textBox2" VerticalAlignment="Top" Width="62" Text="{Binding Path=Jumlah, StringFormat={}{0:#}}"/>
<Label Content="Harga:" Height="28" HorizontalAlignment="Left" Margin="12,122,0,0" Name="label4" VerticalAlignment="Top" HorizontalContentAlignment="Right" Width="95" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="113,127,0,0" Name="textBox3" VerticalAlignment="Top" Width="124" Text="{Binding Path=Harga, StringFormat={}{0:C}}" />
<Button Content="Simpan" Height="27" HorizontalAlignment="Left" Margin="207,228,0,0" Name="button1" VerticalAlignment="Top" Width="82" Command="{Binding SimpanCommand}"/>
<Label Content="Diskon (%):" Height="33" HorizontalAlignment="Left" Margin="12,161,0,0" Name="label5" VerticalAlignment="Top" HorizontalContentAlignment="Right" Width="95" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="113,165,0,0" Name="textBox4" VerticalAlignment="Top" Width="62" Text="{Binding Path=DiskonPersen, StringFormat={}{0:#}}"/>
<Label Content="Total:" Height="33" HorizontalAlignment="Left" Margin="12,194,0,0" Name="label6" VerticalAlignment="Top" HorizontalContentAlignment="Right" Width="95" />
<Label Content="{Binding Path=Total}" Height="28" HorizontalAlignment="Left" Margin="113,194,0,0" Name="label7" VerticalAlignment="Top" Width="402" />
<TextBlock Height="28" HorizontalAlignment="Stretch" Name="textBlock1" Text="Tambah Item Penjualan" VerticalAlignment="Top" TextAlignment="Center" Margin="0,12,0,0" />
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFB7CEFF" Offset="0.192" />
<GradientStop Color="White" Offset="1" />
<GradientStop Color="#FF1648AD" Offset="0" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
</Window>- Sesuaikan elemen antarmuka sedemikian rupa hingga terbentuk sebuah formulir penambahan item penjualan beserta tombol untuk menyimpan data item.
View Model
- Kita lanjut dengan membuat view model. Pada kerangka kerja MVVM, view model berperan untuk menampung nilai/state yang ada di view sehingga operasi modifikasi terhadap nilai tersebut tidak dilakukan di view.
- Klik Add Class dan beri nama class-nya ItemPenjualanViewModel.
- Isi file ItemPenjualanViewModel.cs dengan kode berikut:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Input;
namespace LatihanMVVM
{
class ItemPenjualanViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private ItemPenjualan model;
private ICommand simpanCommand;
public ICommand SimpanCommand
{
get
{
if (this.simpanCommand == null)
{
this.simpanCommand = new SimpanCommand(this);
}
return this.simpanCommand;
}
}
public ItemPenjualanViewModel(ItemPenjualan itemPenjualan = null)
{
this.model = itemPenjualan ?? new ItemPenjualan();
}
public string NamaBarang
{
get { return model.NamaBarang; }
set
{
if (value != model.NamaBarang)
{
model.NamaBarang = value;
PropertyChanged(this, new PropertyChangedEventArgs("NamaBarang"));
}
}
}
public int Jumlah
{
get { return model.Jumlah; }
set
{
if (value != model.Jumlah)
{
model.Jumlah = value;
PropertyChanged(this, new PropertyChangedEventArgs("Jumlah"));
PropertyChanged(this, new PropertyChangedEventArgs("Total"));
}
}
}
public decimal Harga
{
get { return model.Harga; }
set
{
if (value != model.Harga)
{
model.Harga = value;
PropertyChanged(this, new PropertyChangedEventArgs("Harga"));
PropertyChanged(this, new PropertyChangedEventArgs("Total"));
}
}
}
public decimal DiskonPersen
{
get { return model.DiskonPersen; }
set
{
if (value != model.DiskonPersen)
{
model.DiskonPersen = value;
PropertyChanged(this, new PropertyChangedEventArgs("DiskonPersen"));
PropertyChanged(this, new PropertyChangedEventArgs("Total"));
}
}
}
public string Total
{
get
{
decimal? total = model.Total();
if (!total.HasValue)
{
return "-";
}
else
{
return total.Value.ToString("C");
}
}
}
public ItemPenjualan Model
{
get { return this.model; }
}
}
class SimpanCommand : ICommand
{
private ItemPenjualanViewModel viewModel;
public SimpanCommand(ItemPenjualanViewModel viewModel)
{
this.viewModel = viewModel;
}
public event EventHandler CanExecuteChanged
{
add { CommandManager.RequerySuggested += value; }
remove { CommandManager.RequerySuggested -= value; }
}
public bool CanExecute(object parameter)
{
return viewModel.Model.Total() > 0;
}
public void Execute(object parameter)
{
using (var db = new LatihanContext())
{
db.Database.Log = Console.Write;
db.DaftarItemPenjualan.Add(viewModel.Model);
db.SaveChanges();
MessageBox.Show("Berhasil disimpan ke Database");
}
}
}
}
Database
- Selanjutnya, kita akan menghubungkan aplikasi ke database MySQL. Pertama, install Entity Framework melalui NuGet Package Manager. Untuk tugas ini, saya meng-install versi 6.0.0.
- Kemudian, install MySQL Connector untuk Visual Studio di https://downloads.mysql.com/archives/c-net/. Pilih versi 6.8.x karena versi itulah yang kompatibel dengan Entity Framework versi 6.0.0. Di sini saya menggunakan versi 6.8.7.
- Pada Solution Explorer, klik kanan pada project dan klik Add > Reference.
- Centang MySql.Data dan MySql.Data.Entity for EF6 dari MySQL Connector 6.8.7 dan klik OK.
- Buka file App.config, kemudian ubah isinya menjadi kode berikut (sesuaikan nama database, uid, dan password dengan database Anda):
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<configSections>
<section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
<!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 --></configSections>
<connectionStrings>
<add name="LatihanContext" connectionString="server=localhost; database=latihanmvvm_db; uid=root; password=" providerName="MySql.Data.MySqlClient" />
</connectionStrings>
<entityFramework>
<providers>
<provider invariantName="MySql.Data.MySqlClient" type="MySql.Data.MySqlClient.MySqlProviderServices, MySql.Data.Entity.EF6" />
<provider invariantName="System.Data.SqlClient" type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer" />
</providers>
</entityFramework>
<startup>
<supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.7.2" />
</startup>
</configuration>- Tambah class LatihanContext sebagai persistence context (data access layer) yang berisi:
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace LatihanMVVM
{
[DbConfigurationType(typeof(MySql.Data.Entity.MySqlEFConfiguration))]
class LatihanContext : DbContext
{
public DbSet<ItemPenjualan> DaftarItemPenjualan { get; set; }
}
}
- Jangan lupa untuk menyalakan MySQL melalui XAMPP Control Panel dan membuat database sesuai dengan nama database di App.config.
Build & Run
Link Github: https://github.com/arommal/PBKK/tree/master/LatihanMVVM
Rosa Valentine Lammora 