APLIKASI WPF DAN

MVVM
Indikator Topik
Pembahasan

Oleh : M. Fairul Filza, M.Kom.

Mampu merancang dan
menciptakan aplikasi berbasis
Abstraksi : design pattern MVVM dengan
SQL Server sebagai basis
Membahas pembuatan contoh aplikasi dengan
datanya.
proses bisnis (CRUD). Aplikasi berbasis Ms.
Windows dekstop dibuat menggunakan WPF  Dasar SQL Server
Arsitektur dengan memanfaatkan rancang pola
MVVM. Dilengkapi basis data dengan SQL  SQL Server Non-Query
Server. Materi mencakup pembuatan Database,  SQL Server Query
Table, View, Trigger, Stored Procedure, Cursor,
Join, Subquery, hinnga export-import kedalam  SQL Server Export-Import
format lain seperti Ms. Excel. Materi juga
 MVVM Design-Pattern
mencakup pemrogramman dengan bahasa
Csharp (C#), XAML, pembuatan model, view, Model
view-model sampai dengan data binding dan
command. View-Model

View
Peralatan yang digunakan :
Ms. Visual Studio 2019 Community / Profesional dan
SQL Server 2018
Contents

Materi Pembelajaran APLIKASI WPF DAN MVVM

Chapter 1 : Basisdata dengan Ms. SQL Server ..................................................... 3

Chapter 2 : Structured Query Language .............................................................. 8

Chapter 3 : ERD & Eksekusi Query ................................................................... 12

Chapter 4 : Eksport Import Data ........................................................................ 22

Chapter 5 : Aplikasi WPF ................................................................................... 28

Chapter 6 : MVVM - Model ................................................................................ 32

Chapter 7 : MVVM – View-Model ...................................................................... 35

Chapter 8 : MVVM - View .................................................................................. 41

Chapter 1 : Basisdata dengan Ms. SQL Server

Materi Pembelajaran APLIKASI WPF DAN MVVM

Pembuatan basis data akan dibuat dengan menggunakan alat dari Microsoft. Ms. SQL Server
merupakan salah satu dari RDBMS yang terkenal. Kasus kali ini akan menggunakan Ms. SQL
Server Management Studio versi 18.
Pastikan perangkat lunak terinstal dengan baik agar pada saat pembuatan aplikasi tidak
mengalami kendala.

Gambar 1.1. Ms. SQL Server Management Studio 18

Pembuatan basis data pada SSMS 18 dapat ditempuh dengan 2 cara: Yaitu dengan menggunaka
wizzard, dan yang kedua menggunakan skrip query. Sebelum membuat basis data pastikan PC
terhubung dahulu dengan lokal server dari Ms. SQL Server. Gambar berikut akan menunjukan
tampilan dari “Connect to Server”.

Gambar 1.2. Koneksi ke Server

Setelah koneksi ke lokal server berhasil dilakukan. Pembuatan basis data secara wizzard atau
secara skrip dapat dilakukan. Dengan melakukan klik kanan pada folder Database, maka akan
muncul berbagai menu. “New Database...” merupakan menu yang akan digunakan untuk
membuat basis data secara wizzard. Juga terdapat beberapa menu penting antara lain “Attach...”

Materi Pembelajaran APLIKASI WPF DAN MVVM

yang digunakan untuk menambahkan berkas basis data dari luar (external file). “Restore
Database...” untuk mengembalikan berkas basis data yang sebelumnya di cadangkan (back-up).
Dan lain-lain. Berikut gambar untuk tampilan menu yang diakses dengan klik kanan.

Gambar 1.3. Menu Membuat Basis Data Baru

Setelah dipilih, maka akan muncul tampilan baru. Tampilan ini bernama “New Database”. Pada
tampilan terdapat fasilitas pembuatan basis data yang dilengkapi dengan berbagai properti.

Gambar 1.4. Tampilan “New Database”

Beberapa pilihan dapat dilakukan seperti merubah path dari berkas pada penyimpanan,

Materi Pembelajaran APLIKASI WPF DAN MVVM

menentukan inisial ukuran awal dari basis data (default: 8 Mb), Penambahan ukuran file
(Default: 64Mb), Batas maksimum ukuran basis data. Masih banyak lagi pilihan untuk di
tingkatan lanjutan. Untuk kasus kali ini basis data akan dinamai dengan nama “Retailer_DB”.
Setelah basis data selesai dibuat, langkah selanjutnya adalah pembuatan tabel. Masih
menggunakan wizzard, Penambahan tabel dilakukan dengan klik kanan pada folder tabel.
Perhatikan gambar dibawah ini:

Gambar 1.4. Menu Pembuatan Tabel

Setelah menu tabel dipilih, akan muncul tampilan baru yang melekat di tampilan utama.
Tampilan ini dikenal dengan nama docked window. Pada tampilan ini tabel dapat dibuat secara
instan. Tidak ada batasan khusus dalam pembuatan tabel. Yang perlu diperhatikan adalah,
proses pembuatan tabel akan lebih baik diawali dengan perancangan dan analisis terlebih
dahulu. Perancangan tabel yang buruk akan mempengaruhi performa dari aplikasi ketika
berjalan. Perancangan meliputi kengunaan data, hubungan relasi antar data. Hindari redudansi
seminim mungkin. Dan tetap menjaga agar data tersebut konsisten.Pembuatan tabel lebih lanjut
dapat dilihat pada gambar dibawah ini.
 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 1.5. Tampilan Pembuatan Tabel
Setelah tampilan muncul, akan terdapat banyak sekali pilihan. Yang paling penting dan
mendasar adalah tabel haruslah memiliki nama dan kolom. Untuk penamaan tabel perhatikan
nomor (1) pada gambar. Kolom yang dibuat juga harus memiliki nama, tipe data, dan beberapa
atribut penunjang, perhatikan nomor (2). Atribut “Allow Null” digunakan untuk menandakan
data boleh kosong atau harus diisi. Usahakan setiap tabel memiliki Primary Key. Kunci primer
atau Primary Key merupakan sebuah konstrain yang digunakan oleh Database Engine untuk
membedakan atau memberikan identitas pada data agar data yang disimpan menjadi terstruktur.
Kunci primer memiliki 2 sifat alami yaitu: Bersifat unik dimana id 1 data dengan yang lain
berbeda dan bersifat harus diisi. Kunci primer dapat ditambahkan dari menu yang muncul
ketika melakukan klik kanan, lihat nomor (3). Setelah tabel selesai dibuat maka menjadi seperti
gambar dibawah ini.

Gambar 1.6. Tampilan Hasil Tabel

Detail hasil pembuatan tabel dapat dilihat pada hirarki, untuk kolom-kolom dari tabel, serta

Materi Pembelajaran APLIKASI WPF DAN MVVM

konstraint yang sudah dibuat. Seperti pada gambar dibawah ini.

Gambar 1.7. Hirarki Struktur Tabel

Adapun cara lain yang dapat ditempuh untuk membuat tabel adalah dengan menggunakan skrip.
Ms. SQL Server Menggunakan bahasa Query. Tampilan Query editor dapat diakses dengan
melakukan klik pada “New Query”. Berikut gambar Query editor pada Ms. SQL Server
Management Studio 18.

Gambar 1.8. Query Editor

Chapter 2 : Structured Query Language

Materi Pembelajaran APLIKASI WPF DAN MVVM

Structured Query Language (SQL) adalah sebuah bahasa yang digunakan untuk mengakses
data dalam basis data relasional. Bahasa ini secara de facto merupakan bahasa standar yang
digunakan dalam manajemen basis data relasional. Saat ini hampir semua server basis data
yang ada mendukung bahasa ini untuk melakukan manajemen datanya. SQL sendiri
dikelompokan menjadi beberapa bagian, antara lain Query (Retrieving Data), Data definition
(DDL), Data manipulation (DML), Data control (DCL), Transaction control (DTL). Dimana
masing-masing bagian memiliki kata-kata kunci khusus yang disesuaikan fungsinya. Pada
chapter ini hanya akan membahas 3 bagian saja.
Data Definition Language (DDL), merupakan bagian pada SQL yang bertugas untuk
melakukan manajemen pada struktur tabel dan indeks. Kata kunci dasar dari DDL adalah:
CREATE, ALTER, DROP, RENAME, dan TRUNCATE. Pada tingkatan pemula DDL
yang umum digunakan adalah CREATE, ALTER dan DROP.
Kata kunci CREATE digunakan untuk menciptakan objek di dalam RDBMS termasuk
didalamnya, Tabel, Indeks, View, Function, Procedure bahkan Database itu sendiri. CREATE
dapat diikuti dengan beberapa properti. Tabel misalnya, properti dapat berupa kolom-kolom
dan konstraint. Perhatikan potongan skrip berikut:

Gambar 2.1 DDL CREATE Basis Data

Potongan skrip diatas digunakan untuk membuat objek berupa basis data. Namun pada
potongan skrip diatas basis data yang dibuat bersifat standar default. Seperti pada pembuatan
menggunakan wizzard, dimana tidak ada perubahan dari propertinya. Setelah basis data dibuat
untuk selanjutnya, basis data tersebut harus diaktifkan dengan menggunakan perintah USE
<nama-basis-data>. Basis data yang sudah aktif sudah dapat dibuat objek-objek yang lain,
tabel misalnya.
Kata kunci CREATE juga digunakan untuk membuat tabel. Ada 4 tabel yang akan dibuat
menggunakan DDL. Perhaikan potongan skrip berikut:
 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 2.2 DDL CREATE Tabel Pengguna
Dari tabel diatas yang dicetak dengan huruf kapital adalah kata kunci. Kolom dibuat dengan
diawali nama kemudian diikuti tipe data lalu dilanjutkan dengan atribut-atribut lainnya seperti
NOT NULL, DEFAULT, dll. IDENTITY (1,1) merupakan kata kunci yang berguna untuk
mengurutkan angka dimulai dari 1 dengan penambahan sebanyak 1. Dibeberapa RDBMS yang
lain dikenal dengan nama auto_increment. Agar lebih jelas perhatikan contoh lain dari
pembuatan tabel yang lain.

Gambar 2.3 DDL CREATE Tabel Produk

Tabel Produk dibuat untuk menampung semua produk yang dimiliki oleh retail. Dengan kata
lain Produk merupakan barang yang akan ditransaksikan. Tabel selanjutanya yang akan dibuat
adalah Inventori. Sistem retail menggunakan sistem gudang. Setiap pembelian yang dilakukan
oleh retail jumlah barang dipesan belum tentu sama seperti barang yang datang. Maka dari itu
Stok dari inventori akan dibuat menjadi data transaksional. Perhitungan untuk stok dari produk
akan dihitung menggunakan barang masuk dikurang barang keluar. Berikut potongan skirp
untuk pembuatan tabel inventori.
 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 2.4 DDL CREATE Tabel Inventori
Perancangan basis data juga terapat hubungan kardinalitas. Terjadi diantara tabel “users” dan
“usersrule” dan tabel “products” dengan “inventories”. Realisasi hubungan one-to-many, dapat
diwujudkan dengan penambahan konstraint FOREIGN KEY. Penambahan konstraint akan
dilakukan dengan menggunakan DDL kata kunci ALTER. Berikut potongan skrip untuk cara
penambahan kunci tamu .

Gambar 2.5 DDL ALTER Kolom FOREIGN KEY

Secara default kunci tamu memiliki atribut NO ACTION, yang bearti selama data memiliki
pasangan atau hubungan maka data tersebut tidak diperkenankan untuk di manipulasi
(UPDATE, DELETE). Untuk menangani kasus tersebut maka atribut pada konstrain dapat
dirubah menjadi CASCADE. Atribut tersebut akan mengakibatkan data yang berhubungan
akan ikut berubah (update) atau hilang (delete) apabila data master-nya dimanipulasi.
Tabel yang dibuat dapat di hapus menggunakan DDL kata kunci DROP. Tabel yang dihapus
akan berdampak terhadap data yang terkandung didalamnya. Menghapus tabel tidak dapat
dilakukan apabila tabel tersebut masih terikat hubungan didalam VIEW ataupun Konstraint

Materi Pembelajaran APLIKASI WPF DAN MVVM

FOREIGN KEY.
Data Manipulation Language (DML), merupakan bagian pada SQL yang bertugas untuk
melakukan manipulasi terhadap data sudah tersimpan maupun data yang akan disimpan. Kata
kunci dasar yang digunakan pada DML antara lain: INSERT, UPDATE, DELETE dan
MERGE. Berikut potongan skrip yang dibuat untuk memasukan sample data ke masing-
masing tabel yang sudah dibuat.

Gambar 2.6 DML INSERT Tabel yang Sudah Dibuat

Ada beberapa poin yang perlu dierhatikan ketika melakukan perintah insert kedalam tabel.
Pertama, jika kunci primer memiliki fungsi IDENTITY (1, 1), maka nilai dari kunci primer
tidak boleh diberikan. Sehingga kata setelah values akan dimulai dari kolom selanjutnya (name,
dsb). Poin selanjutnya adalah yang memiliki atribut NOT NULL, maka nilai dari data tersebut
wajib diisi untuk menghindari pesan error, kecuali atribut tersebut memiliki nilai DEFAULT
Pemberian nilai pada kunci tamu atau FOREIGN KEY, harus disamakan dengan nilai dari
tabel yang berhubungan. Jika itu tidak dilakukan maka data tersebut akan mengalami NULL
ketika dipanggil kembali dengan metode JOIN.
Perubahan data atau menghapus data apat dilakukan dengan DML UPDATE dan DELETE.
Perintah tersebut akan memiliki hubungan kolom yang memiliki konstrain FOREIGN KEY.
Apabila konstrain tersebut memiliki atribut NO ACTION, maka manipulasi update dan delete
tidak dapat dilakukan.

Gambar 2.7 DML UPDATE dan DELETE

Kata kunci WHERE ditambahkan untuk mencegah manipulasi secara global. Kata kunci
tersebut akan membuat manipulasi data menjadi spesifik.
Chapter 3 : ERD & Eksekusi Query

Materi Pembelajaran APLIKASI WPF DAN MVVM

Pemodelan basis data dapat diwujudkan kedalam diagram. Entitas Relasional Diagram atau
biasa disingkat dengan ERD, adalah jenis diagram struktural untuk digunakan dalam desain
basis data. ERD berisi berbagai macam simbol dan konektor berbeda yang menggambarkan
dua informasi penting: Entitas utama dalam lingkup sistem, dan hubungan antar-hubungan di
antara entitas ini.
ERD sangat berguna untuk membaca alur dari hubungan antara tabel satu dengan tabel yang
lain. ERD berperan aktif dalam menghindari redudansi data. Redudansi data akan
mengakibatkan hubungan yang buruk didalam basis data. Dengan membaca ERD programmer
dapat membuat formula Query yang tepat untuk menampilkan kembali data.
Membuat ERD dilakukan pada Ms. SQL Server dengan menggunakan wizzard. Pada lingkup
basis data di Ms. SQL Server, sudah disediakan folder khusus dengan nama “Database
Diagrams”. Dengan klik kanan maka akan memunculkan menu untuk membuat ERD baru.
Perhatikan gambar dibawah ini.

Gambar 3.1 Membuat ERD

Tahap pertama adalah manampilkan menu dengan klik kanan pada folder “Database Diagrams”.

Materi Pembelajaran APLIKASI WPF DAN MVVM

Tahap kedua pilih menu “New Database Diagram”. Akan muncul tampilan baru, masuk ke
tahap ketiga, pilih tabel yang akan ditampilkan kedalam diagram. Akhiri dengan klik tombol
“Add”. ERD akan tampil dan tampak seperti gambar dibawah ini.

Gambar 3.2 Entitas Relasional Diagram

Pada ERD diatas terdapat hubungan dengan derajat kardinalitas one-to-many. Simbol kunci
kuning pada garis menunjukan one yang bearti tabel produk merupakan tabel dengan
PRMARY KEY. Simbol lain pada garis menunjukan many yang bearti terdapat kolom
penghubung bisa juga sebagai FOREIGN KEY atau hanya kolom biasa tanpa memiliki
konstraint. Penamaan ERD dapat dilakukan ketika diagram di-save. ERD akan membantu
dalam proses pembuatan Query hingga di tingkatan lanjut.
SQL didalam pemrogramannya hanya 2 bagian saja. Eksekusi Query dan eksekusi non Query.
Perbedaannya terletak pada hasil yang diberikan ketika skrip SQL di eksekusi. Eksekusi Query
adalah skirp yang akan menghasilkan tampilan data baik dalam bentuk matrik terstruktur,
plain-text, tampilan tabel, maupun berbentuk berkas (file). Dalam bahasa umum
pemrogramman, eksekusi Query akan menghasilkan nilai balik (return). SQL menyebut ini
dengan nama lain Retrieving Data.
Eksekusi Non Query berlawanan dengan Query. Artinya Non Query tidak akan menghasilkan
nilai balik (return) ketika dieksekusi. Contoh dari Non Query adalah DDL, DML, DCL dan
DTL. Eksekusi Non Query dalam pemrogrammannya tidak memiliki perlakuan khusus dan
lebih sederhana.
Perintah Query hanya memiliki satu kata kunci dasar yaitu SELECT. Namun perintah ini
memiliki paling banyak kasus dengan bentuk yang luas sehingga butuh waktu lebih untuk
mempelajari dan memahaminya. Perintah select bisa sangat sederhana dan bisa sangat
kompleks. Kesalahan pada perintah ini bisa menjadi sebuah nilai ukur apakah struktur data
yang dirancang benar apa tidak. Berikut contoh sederhana dari perintah select.
 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 3.3 SELECT Sederhana
Perintah select dapat diberlakukan kondisi dengan nilai true / false. Menggunakan kata kunci
WHERE akan membuat perinta select memiliki kondisi. Tidak hanya disitu perintah ini juga
memiliki berbagai macam fitur agregasi seperti MIN, MAX, COUNT, SUM, AVG.
Perintah select juga dapat dilengkapi dengan fasilitas seperti TOP n, DISTINCT, ORDER
BY <ASC/DESC>, GROUP BY, HAVING, hingga percabangan CASE...WHEN...THEN.
Pencarian data juga dapat diberlakukan ketika Query di eksekusi. Pencarian dapat dilakukan
dengan meningkatkan kondisional (where) untuk kata kunci LIKE, BETWEEN, AND, OR,
NOT, IN, hingga konsep wildcard.

Gambar 3.4 Variasi dalam Perintah SELECT

Perintah Query lanjut juga dapat dieksekusi dengan melibatkan multi tabel. Beberapa fitur
dapat digunakan untuk menggabungkan beberapa tabel kedalam 1 perintah Query, antara lain:
1. Subquery, perintah ini memiliki bentuk select didalam select. Subquery dapat
diberlakukan didalam SELECT sebagai kolom atau didalam FROM sebagai tabel alias,
maupun didalam kondisi (WHERE, dsb). Subquery juga dapat digabungkan dengan
perintah yang lain seperti UPDATE dan DELETE tanpa merubah esensi mereka
sebagai Non Query.
2. JOIN. Perintah ini sering digunakan untuk menampilkan nilai-nilai dalam tabel-tabel
dengan format tampilan mendatar (horizontal). JOIN secara garis besar memiliki 2
 bentuk dasar, yaitu INNER JOIN dimana data yang ditampilkan dari tabel satu dengan

Materi Pembelajaran APLIKASI WPF DAN MVVM

yang lain harus memiliki pasangan, jika pasangan tidak ditemukan maka data tersebut
tidak akan ditampilkan. OUTER JOIN (LEFT / RIGHT / FULL) kebalikan dari inner
jika data tidak memiliki pasangan maka tetap akan ditampilkan. LEFT dan RIGHT
menandakan posisi nilai yang tidak memiliki pasangan.
3. UNION. Perintah ini cukup jarang digunakan pada kasus kecil. Union akan
menampilkan nilai-nilai pada tabel-tabel dengan format tampilan menurun (vertical).
Union akan menghasilkan data yang benar dengan syarat jumlah kolom yang dimiliki
oleh tabel-tabel berjumlah sama. Kasus union dapat dijumpai pada tabel yang dibuat
secara parsial.
Banyaknya kasus yang terdapat pada perintah Query lanjut membuat SQL menjadi sulit
dipelajari. Dibutuhkan ketelitian dan dukungan dari rancangan basis data. Query lanjut akan
menimbulkan kendala jika basis data yang dirancang tidak tepat. Berikut potongan contoh dari
Query yang menggabungkan beberapa tabel kedalam 1 perintah Query.

Gambar 3.5 Subquery pada Kolom

Gambar 3.6 Subquery pada Kondisi

Pada inner join kata kunci INNER tidak perlu ditulis. ON merupakan kata kunci yang merujuk
pada kolom dengan nilai yang sama untuk dipasangkan. Dapat berupa pasangan antara
PRIMARY KEY dengan FOREIGN KEY ataupun pasangan PRIMARY KEY dengan kolom
biasa. Perhatikan contoh potongan skrip berikut.
 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 3.7 Inner Join

Gambar 3.9 Outer Join Left & Right

Inner join hanya akan menampilkan data yang berpasangan. Outer join merupakan efek kolom
yang tidak memiliki atribut NOT NULL. Kolom yang diizinkan kosong jika dipasangkan akan
mengakibat salah satu pasangan mungkin saja bernilai NULL. Jika semua kolom yang akan
dipasangkan sudah memiliki atribut NOT NULL, maka kasus outer join akan menghilang.
Penempatan stok pada product tidak diposisikan sebagai kolom. Perubahan nilai pada kolom

Materi Pembelajaran APLIKASI WPF DAN MVVM

stok ketika dimanipulasi (update), hanya akan menimbulkan sederetan masalah yang pada
akhirnya akan sulit terpecahkan. Merujuk pada ilmu akuntansi yang menyatakan bahwa stok
persedian merupakan kumpulan rumus dengan dasar stok adalah persedian datang dikurangi
persedian keluar.
Stok kemudian akan dihitung sebagai rumus dimana pencatatan akan dilakukan pada tabel
inventories untuk setiap produk yang keluar dan produk yang masuk. Hal ini tentu akan
mengakibatkan proses Query yang ada akan semakin kompleks.

Gambar 3.10 Query Jumlah Stok Gudang

Query yang rumit ditempuh untuk mengoptimalkan rancangan dari basis data itu sendiri.
Akurasi, konsistensi dan redudansi harus dikurangi sebanyak mungkin. Query yang komplek
pada kasus pemrograman dapat menjadi kendala dalam pengkodean. Hal ini biasa terjadi ketika
perbedaan divisi pengembang antara programmer dengan basis data programmer.
Alternatif penggunaan objek VIEW dapat dilakukan guna menyederhanakan tampilan yang
kompleks. VIEW dibuat setelah Query siap dieksekusi. Perhatikan gambar potongan skrip
dibawah ini.
 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 3.11 View Stok Gudang
Beberapa view bisa dibuat untuk basis data “Retail_Db” dengan 5 buat tabel. Berikut potongan
lengkap dari view yang dibuat.
 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 3.12 View Basis Data Retail_App
View tidak hanya digunakan untuk menyederhanakan proses seleksi. View juga dapat
digunakan untuk menyamarkan tabel dan kolom-kolom aslinya. View memiliki keamanan
karena bersifat read-only. Dengan bantuan dari Function, view dapat dienkripsi end-to-end
nilainya agar terjaga keamanannya. Ini sangat berguna apabila Retailer memiliki multi lapis
Server.
View dapat memiliki performa yang lebih lama dibandingkan dengan tabel. Namun untuk
menutupi kekurangan dari view. Beberapa vendor SQL memiliki view khusus yang di indeks
secara statis. View ini dikenal dengan nama “Materialized View”. View ini memiliki kecepatan
akses yang sangat cepat seperti tabel aslinya.
Selain view, terdapat objek lain yaitu Trigger. Trigger merupakan mekanisme yang aktif
sendiri ketika proses DML terjadi (Sebelum ataupun sesudah) yang dapat diprogram dengan
menggunakan bahasa T-SQL. Perhatikan contoh berikut.

Gambar 3.13 Trigger pada Tabel Users untuk Insert dan Delete
Trigger ini akan aktif ketika tabel Users diisi, maka secara otomatis akan menambahkan data

Materi Pembelajaran APLIKASI WPF DAN MVVM

baru pada UsersRule sebanyak jumlah menu yang ditentukan (cth:6). Contoh trigger yang lain
adalah trigger pada tabel inventories yang diletakkan setelah proses insert dilakukan guna
memanggil proses call-back untuk id yang digunakan pada tabel Inventories.

Gambar 3.14 Trigger pada Tabel Inventories

Objek terakhir yang akan dibahas adalah Stored Procedure. Objek ini merupakan metode tanpa
pengembalian nilai dasar didalam teknik pemrograman pada Ms. SQL Server. RDBMS
memiliki pemrograman dengan struktur bahasanya masing-masing. Ms SQL Server
menggunakan T-SQL. T-SQL dapat diprogram pada Trigger, Stored Procedure dan Function.
Pada basis data Retailer_db akan mencontohkan pembuatan Stored Procedure. Perhatikan
potongan gambar dibawah ini.

Gambar 3.15 Stored Procedure dan Cursor

Stored Procedure ini menggunakan 2 parameter digunakan untuk proses update data secara
terprogram pada tabel UsersRule. Stored Procedure juga dapat menggunakan cursor. Cursor
digunakan untuk mengambil data kolom yang di-select untuk menjadi variabel. Variabel yang
didapat dari cursor dapat diprogram sesuai dengan kebutuhan. Untuk penggunaan Stored
Procedure yang kedua, perhatikan potongan skrip pada gambar dibawah ini.
 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 3.16 Stored Procedure untuk Proses Backup
Stored Procedure juga dapat untuk mempermudah pemanggilan proses back-up pada basis data.

Gambar 3.17 Eksekusi Stored Procedure

Stored Procedure dapat dieksekusi dengan perintah non Query. Kata kunci EXECUTE atau
EXEC digunakan untuk melakukan eksekusi. Gambar diatas menunjukan proses eksekusi
untuk Stored Procedure biasa dan Stored Procedure dengan 2 nilai argumen.
Chapter 4 : Eksport Import Data

Materi Pembelajaran APLIKASI WPF DAN MVVM

Ms. SQL Server menyediakan fasilitas untuk men-generate ulang skrip dengan format .sql.
Skrip ini bisa digunakan sebagai dokumentasi maupun digunakan untuk menduplikat basis data
ke mesin yang berbeda.
Skrip yang dibuat dapat terbagi 2 yaitu: Skema objek basis data dan Data yang tersimpan.
Pemisahan ini berguna untuk basis data yang sudah berkembang besar. Untuk melakukan
proses itu, ada beberapa langkah yang harus ditempuh. Tahap pertama adalah menampilkan
menu dan memilih menu “Generate Scripts...” seperti yang tampak pada gambar dibawah ini.

Gambar 4.1 Menu Generate Skrip SQL

Gambar 4.2 Generate Skrip SQL

Setelah muncul tampilan pembuka teruskan sampai muncul tampilan seperti gambar dibawah

Materi Pembelajaran APLIKASI WPF DAN MVVM

ini. Pada tampilan ini perlu disesuaikan untuk pengaturan nama berkas. Secara default generasi
skrip hanya berlaku pada skema objek pada basis data saja, untuk menyertakan data maka
dibutuhkan pengaturan lanjutan.

Gambar 4.3 Seting Generate Skrip SQL

Pilihan “Advanced” akan menampilkan pengaturan lanjutan. Pilih atribut “Types of data to
script” dan berikan nilai “Schema and data”. Hal ini bertujuan agak ketika skrip di generasi
semua data akan ikut di generasikan kedalam berkas. Generasi memiliki 3 opsi pilihan yaitu:
Hanya data, Data dan Skema, Hanya Skema. Pilihlah sesuai kebutuhan.

Gambar 4.4 Pilihan Schema & Data

Lanjutkan sampai semua proses dilewati. Jika berhasil maka akan muncul tampilan seperti

Materi Pembelajaran APLIKASI WPF DAN MVVM

dibawah ini.

Gambar 4.5 Generate Sukses

Berkas hasil generasi akan disimpan didalam folder yang telah ditentukan pada tahap
sebelumnya. Berkas tersebut dapat dibuka langsung pada SSMS 18 dan dapat langsung
dieksekusi dengan catatan basis data tersbut belum dibuat sebelumnya. Berikut potongan
tampilan dari skrip hasil generasi dengan format sql.

Gambar 4.6 Potongan Hasil Generate

Semua data-data yang tersimpan didalam basis data Ms. SQL Server juga dapat di ekspor
kedalam file dengan format excel (xlsx). Menu ekspor berada di tempat yang sama dengan
menu generate scripts. Setelah menu dipilih maka akan muncul tampilan pembuka seperti yang
tampak pada gambar dibawah ini.
 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 4.7 Ekspor Data dari Berkas .xlsx
Langkah selanjutnya adalah memilih sumber data. Pilih “Microsoft OLE DB Provider for SQL
Server”. Pastikan nama server sesuai dengan yang digunakan oleh SSMS 18. Pilih nama basis
data yang diinginkan. Lanjutkan ketahap selanjutnya.

Gambar 4.8 Pilihan Server Basis Data

Tahap selanjutnya, adalah memilih tujuan ekspor. Pilih ke pilihan Micosoft Excel untuk luaran
dengan format excel (.xlsx). Masukan nama berkas yang nantinya aka otomatis dibuat. Pilih
versi dari berkas Ms. Excel sesuai dengan kebutuhan. Perhatikan gambar dibawah ini.
 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 4.9 Pilihan Tujuan ke Berkas .xlsx
Selanjutnya pilih dari tabel mana saja yang akan dipindahkan kedalam berkas excel. Pemilihan
diperbolehkan lebih dari 1 tabel. Multitabel akan masing-masing tersimpan kedalam Sheet dari
berkas excel yang dibuat. Ikuti alur dari tampilan sampai selesai. Setelah selesai berkas excel
sudah siap untuk di buka.

Gambar 4.10 Pilihan Tabel Ekspor

Gambar 4.11 Tampilan Hasil Berkas .xlsx

Selain Ekspor data ke excel, proses juga dapat melakukan hal sebaliknya. Impor dari data excel

Materi Pembelajaran APLIKASI WPF DAN MVVM

menuju ke tabel juga dapat dilakukan. Inti dari prosesnya sama persis seperti ekspor. Diawali
dengan memilih sumber data. Pilih Excel, lalu memilih tujuan. Pilih Microsoft OLE DB
Provider for SQL Server. Pastikan nama server dan basis data sudah sesuai.
Lanjutkan proses sampai ke tampilan seperti yang tampak dibawah ini. Tampilan tersebut
untuk memilih sheet mana yang akan dipindahkan untuk menjadi tabel di dalam basis datanya
nanti.

Gambar 4.12 Pilih Sheet Sebagai Tabel

Akhiri proses dengan melakukan klik pada tombol Finish. Maka otomatis akan terbentuk tabel
baru dengan data yang sesuai dengan data yang berada didalam berkas Excel. Ekspor impor
juga mendukung file csv. Dengan memilih tujuan atau sumber data sebagai “Flat File” seperti
pada gambar berikut.

Gambar 4.13 Pilih Sheet Sebagai Tabel

Chapter 5 : Aplikasi WPF

Materi Pembelajaran APLIKASI WPF DAN MVVM

Membuat aplikasi berbasis windows dapat menggunakan dot Net framework. Rangka kerja ini
dirancang khusus oleh Microsoft untuk memudahkan pengembang dalam membuat aplikasi
berbasis windows.
Beberapa bahasa diberikan dukungan untuk Net framework antara lain: Csharp (C#), Fsharp
(F#), C++, dan Visual Basic. Pembuatan aplikasi akan menggunakan WPF Csharp (C#).
Langkah pertama adalah dengan membuat Project baru sesuai dengan yang tampak pada
gambar di bawah ini.

Gambar 5.1 Project Baru dengan WPF App

Lalu masukan untuk nama project dan nama “Solution” untuk project tersebut. Perhatikan
gambar dibawah ini.

Gambar 5.2 Konfigurasi Project Baru

Aplikasi berbasis windows memiliki user-interface berbasis grafis (GUI) dimana layoutnya

Materi Pembelajaran APLIKASI WPF DAN MVVM

dilengkapi dengan banyak sekali komponen yang dapat digunakan. Untuk pembahasan kali ini
akan dibahas beberapa komponen yang sering digunakan saja, antara lain: Label, Text-Box,
Combo-Box, Data Grid, Datepicker, dan Button. Perhatikan gambar dibawah ini.

Gambar 5.3 Layout dan Komponen didalam VB Desktop

Komponen label baik digunakan untuk menyampaikan informasi kepada pengguna. Label
digunakan sebagai dekorasi. Beberapa properti pada label yang sering digunakan adalah Text.
Auto-Size, hingga Image.
Komponen textbox adalah komponen yang paling sering digunakan didalam aplikasi.
Komponen ini digunakan untuk menerima masukan dari keyboard. Komponen Textbox
memiliki banyak sekali atribut yang dapat digunakan, antara lain Name, Text, dsb.
Komponen combo-box digunakan untuk masukan nilai data yang bersifat pilihan. Combo-box
mempunyai koleksi nilai yang dapat dimuat dari basis data. Umumnya digunakan untuk
implementasi hubungan antara one (PRIMARY KEY) dan many (FOREIGN KEY).
Komponen datepicker digunakan untuk memasukan nilai data berupa penanggalan. Komponen
ini dapat disesuaikan sesuai dengan kebutuhan. Perlu diingat dalam aturan aplikasi dan
pemrograman penanggalan disistem harus memiliki format tahun, bulan lalu tanggaldengan
pola seperti “yyyy-MM-dd” selanjutnya diikuti jam, menit, detik “hh:mm:ss” apabila
menghendaki adanya penunjuk waktu (time).
Komponen datagridview digunakan untuk menampilkan data dari tabel sumber. Dalam
aplikasi pendaftaran, keuangan, hingga pencatatan persedian, datagridview digunakan untuk
mempermudah menyajikan data. Datagridview juga mengizinkan pengguna untuk melakukan
manipulasi langsung tanpa harus memindahkan terlebih dahulu ke textbox.
Komponen button merupakan komponen yang digunakan sebagai pemicu terjadinya aktivitas

Materi Pembelajaran APLIKASI WPF DAN MVVM

pada layout tampilan. Button dapat diberikan berbagai event seperti Click, MouseDown, dsb.
Memulai proses pengerjaan pertama kali dengan membuat kelas untuk membuka tutup koneksi
ke basis data. Basis data yang dibuat menggunakan SQL Server akan diakses dengan
menggunakan string koneksi. Beberapa informasi dari basis data dibutuhkan untuk membuat
string koneksi. Informasi tersebut antara lain nama server meliputi soket jika basis data berada
di perangkat komputer yang berbeda, nama basis data, nama pengguna serta katakunci jika
tidak menggunakan “Trusted_Connection”. Berikut potongan kode untuk kelas
“Db_Connection.cs” disimpan pada folder dengan nama “Setup” pada gambar dibawah ini.

Gambar 5.4 Kode Skrip Db_Connection.cs

Dibutuhkan 2 metode dasar dengan kembalian nilai bertipe boolean. yaitu untuk membuka
koneksi dengan untuk menutup koneksi. Setiap vendor basis data RDBMS menggunakan string
koneksi yang berbeda. Akan bernilai true apabila koneksi berhasil terbuka atau tertutup.
Simbol += digunakan untuk menambahkan event. SQLConnection memiliki sebuah event

Materi Pembelajaran APLIKASI WPF DAN MVVM

dengan nama InfoMessage. Event ini digunakan untuk meneruskan T-SQL: Print ‘Message’
kedalam lingkup aplikasi. Fungsi Notice_Handler akan dijadikan fungsi yang picu oleh event
InfoMessage untuk menampilkan pesan. Sebaliknya simbol -= digunakan untuk menghapus
fungsi Notice_Handler.
Setelah kelas koneksi selanjutnya membuat kelas RelayCommand. Relay command khusus
digunakan pada pola desain berbasis MVVM. Relay command akan melakukan eksekusi untuk
setiap perintah-perintah yang ada pada view model. Relay command menggunakan interface
ICommand dari librari bawaan System.Windows.Input.

Gambar 5.5 Relay Command

Selanjutnya aplikasi akan dibuat dengan menggunakan rancangan pola MVVM. MVVM
kepanjangan dari Model-View-ViewModel sudah sangat umum digunakan didalam dunia
rekayasa perangkat lunak. Penjelasan akan dimulai dari model, view-model diakhiri dengan
view.
Chapter 6 : MVVM - Model

Materi Pembelajaran APLIKASI WPF DAN MVVM

Pola rangcang MVVM mengacu pada 3 bagian penting. Persiapan yang dilakukan adalah
dengan membuat 3 buah folder yang diberi nama sesuai dengan pola rancang MVVM. Gambar
dibawah ini akan menunjukan penempatan 3 folder didalam pola rancang MVVM.

Gambar 6.1 Pola Rancang MVVM

Setelah selesai dengan folder, selanjutnya dengan membuat masing-masing model untuk tiap-
tiap entitas yang terlibat. Basis data dengan Aplikasi berada pada ruang lingkup yang berbeda.
Perbedaan ini mengakibatkan ketika data berpindah dari basis data menuju aplikasi, maka
aplikasi harus punya wadah yang sama agar format data tidak berubah.
Model merupakan kelas yang umum dibuat. Model diisi dengan atribut-atribut / properti yang
sama persis seperti tabel yang ada pada basis data. Hal ini bertujuan untuk menjaga format data
tetap konsisten. Jika didalam rancangan sistem memiliki 4 entitas data yang diwujudkan
menjadi 4 buah tabel maka didalam aplikasi juga akan memiliki 4 unit model sebagai kelas.
Berikut 1 contoh pembuatan model untuk entitas.

Gambar 6.2 Kelas Model User

 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 6.3 Kelas Model UserRule
Penggunaan string pada tipe data akan mempermudah dalam proses konversi dan pemformatan.
Berikut untuk potongan kelas Product dan Inventory.

Gambar 6.4 Kelas Model Product

Gambar 6.5 Kelas Model Inventory

 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 6.6 Kelas Model Inventory Log
Jika menggunakan Entity Framework, maka pembuatan model dapat dilakukan secara otomatis
dengan melakukan generasi model.

Gambar 6.7 Struktur Model Retailer App

Chapter 7 : MVVM – View-Model

Materi Pembelajaran APLIKASI WPF DAN MVVM

View-model memiliki dua peranan, pertama bertugas untuk proses bisnis, dan kedua
melakukan data binding kedalam view. Kelas dinyatakan sebagai view model dengan
menggunakan interface InotifyPropertyChanged. Interface ini dapat diakses dari librari
bawaan System.ComponentModel.
Kelas view-model umumnya dibuat sebanyak jumlah bisnis yang diperlukan. Satu view-model
lebih baik dibuat untuk menangani satu entitas. Berikut potongan gambar untuk susunan
struktur view-model.

Gambar 7.1 Struktur View-Model

Proses pertama dalam pemrogramannya akan dibuat terlebih dahulu proses bisnis. Proses
tersebut meliputi proses CRUD. Pembuatan kelas “UserViewModel”, Harus menggunakan
interface INotifyPropertyChanged. Interface ini harus melakukan implementasi untuk public
event PropertyChangedEventHandler PropertyChanged . Berikut bentuk awal dari kelas
“UserViewModel”.

Gambar 7.2 Kelas View-Model

Proses pembacaan data akan menggunakan metode ReadAsync().Fungsi ini akan memanggil

Materi Pembelajaran APLIKASI WPF DAN MVVM

perintah Eksekusi Query. Seperti pada pembahasan sebelumnya, apabila SQL yang digunakan
adalah SELECT, maka eksekusi yang digunakan adalah eksekusi query. Eksekusi query akan
menghasilkan result. Result akan ditampung kedalam sebuah objek collection lalu kemudian
di binding kedalam view untuk ditampilkan.
Tipe ObservableCollection<T> digunakan untuk mempopulasikan data yang didapat dari proses
query. Kemudian koleksi data tersebut akan dibinding kedalam grid. Objek model digunakan
untuk membawa hasil data terpilih guna keperluan Tampilan yang detail, dan proses manipulasi
insert, update, dan delete. Berikut potongan kode untuk ReadAsync().

Gambar 7.3 Metode Read Data

Fungsi ReadAsync() dibuat dalam bentuk asinkronus. Artinya proses run-time akan berjalan
pada thread yang berbeda dari thread utama. MVVM membedakan antara proses yang berada
di tampilan dengan proses bisnis. Hal ini membuat kinerja tampilan jauh lebih ringan. Fungsi
asinkronus harus memiliki kata kunci await.
ReadAsync() juga terdapat sebuah event yang digunakan untuk proses callback. Fungsi
ResetComponent() yang ada pada view akan di-callback kedalam view model.
Selain perintah query, CRUD juga terdapat perintah non-query yaitu insert, update, dan delete.

Materi Pembelajaran APLIKASI WPF DAN MVVM

Perintah non query jauh lebih sederhana karena tidak mengembalikan nilai koleksi data.
Berikut untuk perintah Insert, Update, dan Delete.

Gambar 7.4 Fungsi Insert Data

Gambar 7.5 Fungsi Update Data

 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 7.6 Fungsi Delete Data
Semua metode yang dibuat untuk proses bisnis merupakan metode asinkronus. Adapun metode
untuk melakukan validasi akan tampak seperti dibawah ini.

Gambar 7.7 Fungsi Validasi Data

Tahap kedua adalah membuat Properti binding dan command binding. Hal ini dilakukan agar
data dapat disajikan kedalam tampilan (view). Pembuatan command binding bertujuan untuk
tombol-tombol yang ada di tampilan dan digunakan untuk keperluan bisnis data.
Kelas RelayCommand akan digunakan melakukan eksekusi lanjut terhadap fungsi CRUD yang
sebelumnya dibuat. Berikut potongan pembuatan command binding dengan RelayCommand.

Gambar 7.8 Command Binding

Properti binding akan diperlukan untuk melakukan proses data binding kedalam view. Setiap
properti yang akan dibinding harus menyisipkan event “PropertyChanged”. Hal ini diperlukan
agar setiap perubahan yang terjadi pada properti data dapat di notif kedalam view-model.

Materi Pembelajaran APLIKASI WPF DAN MVVM

Berikut contoh potongan untuk Properti binding.

Gambar 7.9 Property Binding

Setelah dua tahap selesai dibuat. Langkah terakhir adalah melengkapi kelas konstruktor dengan
proses instansi semua properti dan command binding yang ada.
 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 7.10 Konstruktor View Model
Kelas view model yang dibuat kemudian diimplementasikan kedalam tampilan (View)
dengan bantuan property DataContext pada konstruktor yang ada didalam tampilan.
Chapter 8 : MVVM - View

Materi Pembelajaran APLIKASI WPF DAN MVVM

View dalam pola rancang MVVM merupakan bagian yang memuat segala bentuk tampilan.
Didalam projek WPF, tampilan dapat dibuat sebagai Form (Windows Form) atau juga sebagai
UserControl. Perhatikan langkah-langkah berikut untuk membuat sebuah form.

Gambar 8.1 Pembuatan View

Jika pembuatan berdasarkan pada tabel basis data, pembuatan view tidak memiliki aturan
dalam pembatasan jumlah. Artinya pembuatan view boleh dilakukan sebanyak mungkin sesuai
dengan kebutuhan analisis perancangan aplikasi.
Jika view yang dibuat dalam jumlah besar, maka pembuatan view dapat di bagi-bagi menjadi

Materi Pembelajaran APLIKASI WPF DAN MVVM

bagian-bagian yang disesuaikan dengan jumlah menu yang akan dipakai. Pada rancangan menu
utama akan dibagi menjadi 2 menu utama yaitu: Home/File, Inventories. Sehingga pembuatan
View akan dikelompokan kedalam 2 bagian. Dan viewnya sendiri akan disesuaikan dengan
kebutuhan dari sistem yang memiliki 5 buah tabel dan model. Berikut potongan gambar dari
hasil pembuatan view.

Gambar 8.2 Struktur View

Aplikasi yang dibuat harus memiliki kontainer utama. Maka dari itu pembuatan menu utama
atau dashboard harus dibuat. Pembuatan dashboard menggunakan windows form seperti biasa.
Berikut rancangan untuk tampilan Dashboard.
 Gambar 8.3 Rancangan Dashboard

Materi Pembelajaran APLIKASI WPF DAN MVVM

Gambar 8.4 Dashboard XAML

Gambar 8.5 Dashboard Menu Click CSharp

Tampilan ini memiliki dua bagian utama, yaitu menu dan panel utama. Menu mengakomodir
semua navigasi menuju tampilan lainnya. Pembuatan menu pada WPF akan lebih mudah
melewati kode XAML. Berikut potongan untuk kode pembuatan menu.
 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 8.6 Menu XAML
Menu dilengkapi dengan eventlistener yaitu Click. Pada bagian kedua adalah sebuah panel.
Panel ini berujuan untuk menampilkan tampilan lainnya yang berbentuk UserControl.
Tampilan UserControl membuat tampilan utama menjadi padat satu kesatuan.
Proses CRUD akan menggunakan UserControl. Pada MVVM kode programnya hanya
memuat proses-proses terkait komponen dari tampilan itu sendiri. Langkah pertama dengan
membuat UserControl terlebih dahulu.

Gambar 8.8 Users View

Setelah itu masuk ke kode csharp untuk mengatur kembali konstruktor tampilan dengan view-
model agar data binding dapat berjalan dengan baik. Berikut potongan kode konstruktor.
 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 8.9 Konstruktor Tampilan dan View Model
Pada tampilan diatas, view-model di instansikan kedalam objek. Event Callback juga
dideklarasikan untuk menjalankan fungsi ResetComponent(). Data binding akan
dideklarasikan pada kode DataContext = vm;. Berikut potongan kode untuk ResetComponent().

Gambar 8.10 Fungsi Reset Component

Tampilan selanjutkan akan diberlakukan data binding dan pemberian eventlistener pada
komponen yang berhubungan data. Binding juga diberlakukan pada tombol yang berperan pada
proses bisnis. Berikut potongan kode binding pada data dan command.

Gambar 8.11 Binding Data dan Event pada Grid

 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 8.12 Binding Data pada Text Box

Gambar 8.13 Binding Command pada Tombol Bisnis

Gambar 8.14 Event pada Tombol Tampilan

Setelah binding selesai, selanjutnya melengkapi eventlistener untuk tombol dan komponen
lainnya. Berikut tampilan kodenya.
 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 8.15 Kode Csharp pada Tombol Tampilan
Akhiri proses dengan proses rute navigasi untuk membuka tutup UserControl. Proses ini
melibatkan berkas App.xaml, Dashboard.xaml beserta kode csharp-nya.

Gambar 8.16 Berkas App.xaml

Gambar 8.17 Berkas App.xaml.cs

Berikut gambar dari semua rancangan form dan user-control yang dibuat pada bagian tampilan
(view).
 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 8.18 Tampilan User Control Inventori

Gambar 8.19 Tampilan User Control Editor Transaksi

 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 8.20 Tampilan User Control Produk

Gambar 8.21 Tampilan Form Rule

 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 8.22 Tampilan Form Login
Adapun fungsi login akan terbagi menjadi beberapa bagian antara lain: Pembuatan sesi untuk
menampung sesi id dan sesi nama pengguna. Selanjutnya membuat Relay Command dengan
nama LoginCommand yang akan dibinding kedalam tombol login.Text yang berjenis
“password”, akan lebih mudah jika ditambahkan event PasswordChange(). Berikut beberapa
potongan kodenya.

Gambar 8.23 Sesi Login pada App.xaml.cs

Gambar 8.24 Login Binding

Gambar 8.25 Login Relay Command

 Materi Pembelajaran APLIKASI WPF DAN MVVM
Gambar 8.26 Kode Csharp pada Login Form
Berikut untuk potongan kode LoginAsync() yang kemudian akan dimasukan kedalam Relay
Command.

Gambar 8.27 Fungsi LoginAsync()