PBKK : Tugas 4 - NVVM

 

Tugas 4 -  MVVM 


  1.  Pertama buat project WPF Application menggunakan bahasa C#





  2. 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) harus diletakkan disini! Saya akan membuat sebuah model baru dengan men-klik kanan nama proyek dan memilih Add Class. Berikut isi dari class tersebut

    using System;
using System.Collections.Generic;
using System.Text;

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

        public long Id { get; set; }

        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);
        }
    }
}


  3. Kemudian kita akan membuat sebuah view. Untuk membuat view disini kita akan mengedit file MainWindow.xaml. Berikut adalah isi dari MainWindow.xaml

    <Window x:Class="WpfApp1.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="#FF0000DB" 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="10" 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>
        </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="10" 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" />
        <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" />
        <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" />
        <Button Content="Simpan" Height="27" HorizontalAlignment="Left" Margin="207,228,0,0" Name="button1" VerticalAlignment="Top" Width="82" />
        <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" />
        <Label Content="Total:" Height="33" HorizontalAlignment="Left" Margin="12,194,0,0" Name="label6" VerticalAlignment="Top" HorizontalContentAlignment="Right" Width="95" />
        <Label Content="Label" 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>

  4. Kemudan akan didapat tampilan sebagai berikut





  5. Selanjutnya kita 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, kita akan membuat sebuah class baru dengan nama ItemPenjualanViewModel yang isinya seperti berikut ini.

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;
 
namespace LatihanMVVM
{
    class ItemPenjualanViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
 
        private ItemPenjualan model;
 
        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; }
        }
    }
}


  6. Selanjutnya kita hubungkan view,view model,model yang telah kita buat. Edit file MainWindow.xaml.cs menjadi seperti berikut

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
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 WpfApp1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new ItemPenjualanViewModel();
        }
    }
}


  7. Selanjutnya agar data pada view dapat diteruskan pada model kita melakukan binding kepada attribut-attribut yang hendak kita kirim. Untuk melakukanya edit MainWindow.xaml dan masukan kode berikut

    <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:#.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" />
<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" />

  8. Maka program akan berjalan seperti berikut



  9. Untuk mengubah padding pada input yang salah tambahkan code berikut pada MainWindow.xml
    <Setter Property="Validation.ErrorTemplate">
	<Setter.Value>
	   <ControlTemplate>
		<StackPanel Orientation="Horizontal">
		   <AdornedElementPlaceholder />
		   <TextBlock Text="Perlu diperbaiki!" Padding="3" Foreground="Red" />
		</StackPanel>
	   </ControlTemplate>
	</Setter.Value>
</Setter>
  10. Jika ada error maka akan tampil serti berikut


  11. Berikut tampilan aplikasi jika dijalankan.


  12. Aplikai sudah bisa berjalan untuk selanjutnya akan disambungkan dengan database. Namun untuk saat ini belum bisa dituliskan pada postingan ini karena masih terdapat kendala dengan Mysql Connector



Komentar

Posting Komentar

Postingan populer dari blog ini

PBKK : ETS

Gambar
 PBKK : ETS Abdur Rohman 05111840000100 PBKK - A Sebutkan aplikasi POS yang biasa dipakai di masyarakat? Salah satu aplikasi POS yang digunakan di masyarakat adalah MokaPOS. Fitur apa saja yang ada di dalam aplikasi tersebut , buatlah screenshotnya dan jelaskan? Manajemen Pesanan, fitur ini mempermudah karyawan untuk mencatat pesanan pelanggan. Pembayaran Secara Digital, fitur ini mempermudah pelanggan untuk membayar menggunakan Online Payment Membuat laporan penjualan harian. Menghitung pajak lokal dan persentase uang tip karyawan. Membuat laporan stock barang yang tersedia. Manajemen Karyawan Manajemen Shift Karyawan Manajmen Outlet Cabang, mempermudah pengawasan cabang. Database Pelanggan, fitur ini memungkinkan untuk menyimpan data customer. Survey kepuasan pelanggan. Kelompok : M. Frediansyah Sinaga (05111840000028) Abdur Rohman (05111840000100) Buat rancangan UI dan navigasi aplikasi POS mu sendiri? Login Admin Menu Obat Daftar Obat Ubah Data Obat Report Penjualan Login Kasir Men
Baca selengkapnya

PBKK : Tugas 6 - Code Igniter

Gambar
  Tugas 6 -  Code Igniter Install Composer dengan panduan pada  Web Composer Selanjutnya install code igniter dengan composer dengan perintah composer create-project codeigniter4/appstarter portofolio Tambahkan about.php pada folder views Kamudian pada Controller Home, fungsi index() ganti view welcome menjadi 'about'
Baca selengkapnya