EAS MPPL 2021 Pada kesempatan ini kelompok kami akan menjelaskan salah satu produk perangkat lunak milik Zoho yaitu Zoho Marketing Automation yang dikerjakan secara berkelompok yang beranggotakan: Ricky Supriyanto 05111940000036 Arvel Gavrilla R 05111940000040 M Arif Faizin 05111940000060 Zulfiqar Fauzul Akbar 05111940000101 Raihan Alifianto 05111940000213 Dengan hasil sebagai berikut 1. Deskripsi Produk 2. Manajemen Ruang Lingkup 3. Manajemen Waktu 4. Manajemen Biaya 5. Manajemen Resiko 6. Video demo
Postingan kali ini akan membahas tentang cara membuat aplikasi menggunakan Windows Presentation Foundation (WPF) pada Visual Studio. Langsung saja, ikuti langkah-langkah berikut :
- Buka Visual Studio, pilih Create a New Project, kemudian pilih WPF Application C#, Windows, lalu pilih Next
- Kemudian buat project dengan nama "LatihanMVVM", lalu pilih Next
- Lalu pada Additional Information, pilih Create
- Kemudian isikan kode berikut pada MainWindow.xaml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
<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="#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>
- Lalu tambahkan class baru pada project dengan cara klik kanan nama project > Add > Class.. Kemudian akan muncul jendela baru untuk membuat class baru. Pilih Class, lalu isikan nama class dengan ItemPenjualan, dimana Class ini merupakan model dari program, kemudian pilih Add
- Setelah itu, tambahkan kode berikut pada Class yang telah dibuat
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
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; } 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); } } }
- Langkah selanjutnya yaitu buat lagi Class baru dengan nama ItemPenjualanViewModel, dimana Class ini yang akan menjadi controller dari view. Isikan Class tersebut dengan kode berikut
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
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; } } } }
- Lalu, kita perlu menghubungkan view, model, dan view model. Untuk itu, double click MainWindows.xaml.cs, kemudian mengubah kode tersebut menjadi seperti berikut
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
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 selanjutnya yaitu melakukan binding pada komponen agar nilai dari form dapat diambil. Perbarui kode yang sudah ada menjadi
1 2 3 4 5 6 7 8 9 10 11 12
<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 Height="28" HorizontalAlignment="Left" Margin="113,194,0,0" Name="label7" VerticalAlignment="Top" Width="402" Content="{Binding Path=Total}" /> <TextBlock Height="28" HorizontalAlignment="Stretch" Name="textBlock1" Text="Tambah Item Penjualan" VerticalAlignment="Top" TextAlignment="Center" Margin="0,12,0,0" />
- Lalu simpan project dan jalankan project
Tampilan ketika program dijalankan akan seperti berikut
Begitu juga ketika data yang dimasukkan memiliki tipe yang berbeda, maka akan muncul validasinya seperti ini
Untuk lebih jelasnya bisa dilihat melalui animasi berikut - Program telah selesai.
Sumber :
Comments
Post a Comment