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!