oleh: Julius Fenata

Pembaca yang budiman, pada kesempatan kali ini saya akan mengajak saudara untuk mempelajari salah
satu teknologi pengembangan aplikasi dengan menggunakan Visual Studio 2010 Express Edition
(disertakan dalam CD).

Teknologi ini disebut Windows Presentation Foundation (WPF), merupakan suatu teknologi yang
dikembangkan Microsoft untuk memperkaya pengalaman pengguna (User Experience) dalam
beraktifitas dengan aplikasi yang dibangun dengan menggunakan teknologi ini.

Untuk menjelaskannya, saya akan mengajak para pembaca yang budiman untuk bersama-sama dengan
saya untuk mencoba membangun sebuah aplikasi kecil yang harapannya akan dapat memberikan
pencerahan dalam memahami aplikasi teknologi ini dalam kebutuhan bisnis sehari-hari.

Kali ini kita akan membuat suatu kerangka (scaffolding) untuk keperluan data binding untuk aplikasi
anda, dimana nantinya kita dapat mempresentasikan data yang anda miliki pada database pada jendela
aplikasi yang anda buat.

Modul 1 – Menambahkan koneksi database ke dalam project dengan menggunakan Data

Sources

1. Anda dapat memulai dengan membuka aplikasi Visual Studio Express anda (setelah terinstall
dengan baik) lewat Start menu Windows anda, dengan menuju Start | All Programs | Microsoft
Visual Studio 2010 Express | Microsoft Visual C# 2010 Express.

2. Setelah aplikasi Visual Studio anda terbuka. Pilih File | New Project pada menu command. Beri
nama pada aplikasi bisnis pertama anda: MyFirstBizApplication.
3. Pilih root window (pastikan anda tidak memilih grid yang berada di dalam windows – dan anda
dapat menekan tombol ‘F4’ pada keyboard anda untuk membuka jendela properties di panel
sebelah kanan bawah anda, untuk memastikan nama komponen yang anda seleksi).

4. Masih pada jendela Properties, ubah property Width dari root window anda menjadi 800,
lakukan hal yang sama untuk property Height-nya menjadi 600.
5. Pada sudut kanan atas, anda akan mendapatkan panel-panel yang tertutup – yaitu Toolbox,
Document Outline dan Data Sources. Arahkan mouse anda pada tulisan Data Sources, dimana
panel tersebut akan terbuka – dan pada saat panel tersebut terbuka, anda dapat ubah setting
panel tersebut sehingga akan selalu dalam kondisi terbuka dengan menekan icon pin Auto Hide
yang terdapat pada sudut kanan atas panel tersebut.

6. Sekarang kita akan menunjuk source data dari aplikasi bisnis yang akan kita buat/tampilkan.
Pada panel tersebut, klik tulisan Add New Data Source.

7. Pilih tipe data source yang hendak anda buat: Database. Klik Next.

8. Pilih Database Model-nya, untuk aplikasi ini pilih: DataSet. Klik Next.

9. Kemudian kita harus membuat sebuah koneksi data ke database. Klik New Connection.

1. Ubah Data source menjadi Microsoft SQL Server Database file.

2. Tekan tombol Browse di sebelah Database file name. Pilih database file yang disertakan
dalam CD (Southridge.mdf).
 3. Tekan tombol Test Connection di sebelah kiri bawah jendela tersebut – tunggu sampai
anda memperoleh konfirmasi bahwa koneksi anda berhasil. Lanjutkan dengan menekan
tombol OK.

4. Pada halaman selanjutnya klik Next.

5. Klik Next. Klik Yes apabila anda diminta untuk meng-copy file database anda di dalam
lokal project folder anda.

6. Pada halaman berikutnya anda diminta konfirmasi untuk menyimpan dan menentukan
nama Connection String yang hendak digunakan, kita akan menggunakan nama yang
sistem anjurkan – klik Next.

7. Pilih Database Objects yang hendak digunakan:

1. Klik checkbox di sebelah kiri untuk mengembangkan detail dari Tables | Listings,
check MLS, Title, Price and PrimaryPhoto.
2. Check Tables | Neighborhoods.
3. Check Tables | Viewings.

8. Klik Finish.

10. Saat ini, anda dapat melihat munculnya database schema pada jendela data sources.
 11. Anda dapat melakukan build pada solusi/aplikasi anda untuk melihat apakah aplikasi anda
berjalan dengan baik dengan menekan tombol ‘F6’ pada keyboard.

Modul 2 – Menggunakan Data Sources yang telah dibuat untuk menambahkan Data-Bound
controls (component) di Window

Sekarang kita akan menambahkan komponen pada jendela (window) aplikasi anda. Pada umumnya
setiap objek yang kita taruh pada jendela aplikasi kita – kita sebut dengan komponen (component) atau
kontrol (control).

Tahap pertama, kita akan menampilkan sebuah control yang dapat menampilkan data yang terdapat di
dalam database. Komponen tersebut adalah Data-Bound Control (kontrol yang terhubung dengan data
yang kita miliki pada database), tujuannya adalah supaya kita bisa melakukan manipulasi terhadap data,
seperti navigasi dalam menampilkan data-data yang kita miliki yang terdapat dalam database.

1. Pada jendela Data Sources, klik Listings dropdown list dan pilih Details.

2. Drag dan drop Listings dropdown tersebut ke jendela aplikasi anda, seperti yang terlihat di
bawah ini.

3. Drag dan drop Viewings foreign key table ke jendela aplikasi anda, seperti yang terlihat di
bawah ini.
4. Aplikasi anda akan terlihat seperti ini:

5. Buka panel Toolbox di sebelah kanan atas, tambahkan 2 button pada jendela aplikasi anda.
6. Pada jendela Properties, beri nama pada Content property menjadi Forward.

7. Kemudian masih pada jendela yang sama, ubah Name dari komponen ini menjadi
forwardButton.
8. Untuk sementara ini seharusnya tampilan jendela aplikasi anda menjadi seperti ini:

9. Double klik tombol Forward yang baru anda buat pada jendela aplikasi. Visual Studio akan
membawan anda ke layar untuk melakukan coding (code view) untuk anda memberikan
perintah pada fungsi tombol Forward tersebut.

CollectionViewSource cvs = (this.FindResource("listingsViewSource"))

as CollectionViewSource;
cvs.View.MoveCurrentToNext();
 10. Berikut adalah tampilan perintah yang anda sisipkan pada tombol Forward anda:

11. Lakukan hal yang sama dengan tombol Back: set Content property menjadi Back. ubah Name
dari komponen ini menjadi backButton. Double klik dan beri perintah pada tombol Back anda
code yang tertera di bawah ini.

CollectionViewSource cvs = (this.FindResource("listingsViewSource"))

as CollectionViewSource;
cvs.View.MoveCurrentToPrevious();

12. Klik Debug | Start Debugging (atau tekan tombol ‘F5’) untuk menjalankan aplikasi.

Selamat! Anda telah berhasil membuat sebuah aplikasi bisnis yang dapat menampilkan data-data yang
anda miliki. Aplikasi ini memiliki informasi umum (header/master) dan juga dapat menampilkan
informasi detail yang ditampilkan dalam bentuk grid. Untuk fungsi navigasi, terdapat 2 buah tombol
untuk membawa anda maju ke record selanjutnya ataupun mundur ke record sebelumnya.

Selain artikel diatas, anda juga dapat belajar dari beberapa portal pembelajaran di bawah ini, untuk
membantu anda mengembangkan kemampuan anda dalam pembuatan program.

http://msdn.microsoft.com/id-id
http://geeks.netindonesia.net
https://channel9.msdn.com
http://students.netindonesia.net/blogs

Apabila anda memiliki pertanyaan yang hendak diajukan, anda dapat mengajukan pertanyaan pada
comment section versi online dari tutorial ini. Pertama-tama anda perlu register (sign-up) sebagai
member dari portal di bawah ini dan segera setelah anda terdaftar – anda dapat mengajukan
pertanyaan pada comment section di alamat ini:
http://students.netindonesia.net/blogs/idjoel/default.aspx

SELAMAT MENCOBA! TETAP SEMANGAT! 