1 Modul Demo.Net Programming Aplikasi Sederhana menggunakan Microsoft Visual Studio 2010 dan Microsoft Expression Blend 4 RC Modul ini disusun sebagai...
Aplikasi Sederhana menggunakan Microsoft Visual Studio 2010 dan Microsoft Expression Blend 4 RC Modul ini disusun sebagai persembahan dari Komunitas .Net Himpunan Mahasiswa Ilmu Komputer Departemen Ilmu Komputer Institut Pertanian Bogor bekerja sama dengan Microsoft Student Partners Institut Pertanian Bogor atas kunjungan dari SMK Al Ittihad ke Institut Pertanian Bogor pada Tanggal 20 Mei 2010.
Demo .Net Programming Aplikasi Sederhana menggunakan Microsoft Visual Studio 2010 dan Microsoft Expression Blend 4 RC
Oleh: Eko Zulkaryanto [email protected] http://www.ezul.net Microsoft Student Partners Advisor Computer Science Student of Bogor Agricultural University
i
Daftar Isi
Daftar Isi ................................................................................................................... ii Pengenalan Microsoft Visual Studio 2010 ........................................................... 1 Tentang Microsoft Visual Studio 2010 ............................................................. 1 Cara Memperoleh Microsoft Visual Studio..................................................... 2 Training Kit dan Training Course .................................................................... 3 Tutorial dan Komunitas ..................................................................................... 5 Tutorial ............................................................................................................. 5 Komunitas ........................................................................................................ 6 Demo Pembuatan Aplikasi Database pada Windows Form ............................ 7 Pendahuluan ........................................................................................................ 7 Penyiapan Database............................................................................................ 7 Pembuatan Project .............................................................................................. 9 Demo Pembuatan Aplikasi Database pada Windows Presentation Foundation (WPF) ................................................................................................. 25 Pendahuluan ...................................................................................................... 25 Penyiapan Database.......................................................................................... 25 Pembuatan Project ............................................................................................ 25 Menggunakan Microsoft Expression Blend 4 RC ......................................... 32 Menambahkan Animasi ................................................................................... 36 Manipulasi Database Menggunakan LINQ to SQL pada WPF DataGrid .... 43 Membuat Aplikasi Data Binding Database SQL Server pada Windows Form ................................................................................................................................. 64 Aplikasi Sederhana Virtual Earth WPF Control ............................................... 78 Pendahuluan ...................................................................................................... 78 Pembuatan Project dengan Visual Studio 2010 ............................................ 79
ii
Pengenalan Microsoft Visual Studio 2010 Tentang Microsoft Visual Studio 2010 Microsoft Visual Studio merupakan Integrated Development Invirontment (IDE) yang dibuat oleh Microsoft untuk developer .net yang paling banyak digunakan saat ini. Menurut Wikipedia, Microsoft Visual Studio merupakan sebuah perangkat lunak lengkap (suite) yang dapat digunakan untuk melakukan pengembangan aplikasi, baik itu aplikasi bisnis, aplikasi personal, ataupun komponen aplikasinya, dalam bentuk aplikasi console, aplikasi Windows, ataupun aplikasi Web. Visual Studio mencakup kompiler, SDK, Integrated Development Environment (IDE), dan dokumentasi
(umumnya
berupa
MSDN
Library).
Kompiler
yang
dimasukkan ke dalam paket Visual Studio antara lain Visual C++, Visual C#, Visual Basic, Visual Basic .NET, Visual InterDev, Visual J++, Visual J#, Visual FoxPro, dan Visual SourceSafe. Microsoft Visual Studio dapat digunakan untuk mengembangkan aplikasi dalam native code (dalam bentuk bahasa mesin yang berjalan di atas
Windows)
ataupun
managed code (dalam
bentuk Microsoft
Intermediate Language di atas .NET Framework). Selain itu, Visual Studio juga dapat digunakan untuk mengembangkan aplikasi Silverlight, aplikasi Windows Mobile (yang berjalan di atas .NET Compact Framework). Saat ini Microsoft Visual Studio sudah menginjak pada versi 2010 yang rilis pada tanggal 12 April 2010 beserta .Net Framework 4. Microsoft Visual Studio 2010 masih mendukung versi .Net Framework yang sebelumnya.
1
Cara Memperoleh Microsoft Visual Studio Microsoft Visual Studio saat ini bisa Anda peroleh secara gratis untuk versi express di http://www.microsoft.com/express/downloads/default.aspx atau dari miror IIX di http://geeks.netindonesia.net/files/folders/vs2010/entry186744.aspx. Anda akan menemui beberapa pilihan seperti pada gambar di bawah ini:
Versi trial yang bisa Anda coba yang disediakan oleh Microsoft adalah: a. Visual Studio 2010 Professional b. Visual Studio 2010 Premium c. Visual Studio 2010 Ultimate d. Visual Studio 2010 Test Professional e. Visual Studio 2010 Team Foundation 2
Anda bisa mengunjungi http://www.microsoft.com/visualstudio/enus/download untuk informasi lebih dan mengunduhnya. Untuk Microsoft Visual Studio 2010 Ultimate Trial bisa juga Anda peroleh dari IIX di alamat di bawah ini: Visual Studio 2010 Ultimate (part 1) Visual Studio 2010 Ultimate (part 2) Visual Studio 2010 Ultimate (part 3) Visual Studio 2010 Ultimate (part 4)
Bila yang di lingkungan akademik bisa memperoleh Microsoft Visual Studio 2010 melalui program MSDN Academic Alliance atau Dreamspark (http://www.dreamspark.com).
Training Kit dan Training Course Sejak Microsoft Visual Studio 2010 dirilis pada tanggal 12 April 2010, Microsoft juga telah menyediakan Training Kit terbaru untuk versi full rilis ini dan juga Training Course di Channel 9 yang telah ada sejak Versi Beta tersedia yang akan membantu Anda dalam menggunakan Visual Studio 2010. Microsoft Visual Studio 2010 dan .Net Framework 4 Training Kit bisa Anda unduh di http://go.microsoft.com/?linkid=9665216. Training Kit ini berisi slide presentasi, hands-on labs, dan demo. Konten tersebut dirancang 3
untuk membantu Anda dalam belajar bagaimana memanfaatkan fitur Visual Studio 2010 dan berbagai macam teknologi di bawah ini: a. C# 4 b. Visual Basic 10 c. F# d. Parallel Extensions e. Windows Communication Foundation f.
Windows Workflow
g. Windows Presentation Foundation h. ASP.NET 4 i.
Windows 7
j.
Entity Framework
k. ADO.NET Data Services l.
Managed Extensibility Framework
m. Visual Studio Team System Training Course Visual Studio 2010 dan .Net Framework 4 berisi video dan hands-on lab juga dirancang untuk membantu Anda belajar bagaimana cara memanfaatkan fitir Visual Studio 2010 dan berbagai macam teknologi yaitu: C# 4.0, Visual Basic 10, F#, Prallel Platform Computing, WF, WPF, ASP.NET AJAX 4.0, ASP.NET MVC Dynamic Data. Training Course Visual Studio 2010 dan .Net Framework 4 ini bisa Anda kunjungi di http://channel9.msdn.com/learn/courses/VS2010/.
4
Tutorial dan Komunitas Tutorial Microsoft juga telah menyediakan beberapa tutorial yang sangat berguna bagi Anda untuk mempelajari teknologi Microsoft menggunakan Microsoft Visual Studio. Alamat situs atau portal tutorial yang menarik untuk Anda kunjungi adalah sebagai berikut: http://www.asp.net Situs ini sangat berguna bagi Anda sebagai developer website dengan teknologi ASP.NET. Situs ini berisi video beserta tutorialtutorial lainnya yang menggunakan Microsoft Visual Studio. Saat ini Anda akan didukung penuh di situs ini untuk mempelajari lebih dalam mengenai fitur-fitur Microsoft Visual Studio 2010 dan ASP.NET 4. http://www.windowsclient.net Situs ini akan membantu Anda mempelajari aplikasi windowsclient yaitu Windows Form dan Windows Presentation Foundation (WPF). Saat ini disediakan konten untuk mempelajari fitur-fitur Microsoft Visual Studio 2010 pada aplikasi Windows Form dan WPF 4. http://www.silverlight.net Situs ini akan membantu Anda mempelajari Microsoft Silverlight yang saat ini juga sudah mencapai versi 4. Situs ini berisi video, source code, showcase, dan tutorial lainnya yang akan membantu Anda. http://expression.microsoft.com Situs ini akan membantu Anda sebagai desainer aplikasi WPF, Silverlight, dan ASP.NET menggunakan Microsoft Expression Studio.
5
Dan masih banyak lagi situs-situs yang perlu Anda kunjungi, seperti: http://c-sharpcorner.com,
http://www.codeplex.com,
http://codeproject.com, dan juga yang lebih penting Anda jangan sampai melupakan MSDN Library di http://msdn.microsoft.com/library yang sangat lengkap dan cukup sebagai referensi bagi Anda untuk mempelajari lebih dalam mengenai Teknologi .Net. Komunitas Sampai saat ini telah tersedia komunitas lokal yang banyak membantu Anda dalam mempelajari teknologi Microsoft dan bisa membantu Anda lebih dalam dalam mempelajari Microsoft Visual Studio 2010 yaitu http://geeks.netindonesia.net dengan menyediakan fasilitas seperti artikel blog tentang teknologi, forum, e-book dalam Bahasa Indonesia, milis ([email protected]) dan lain-lain. E-book bisa Anda peroleh secara gratis di http://geeks.netindonesia.net/library. Selain
itu,
Anda
bisa
mengunjungi
Technet
Indonesia
di
http://technet.microsoft.com/id-id/default.aspx dan MSDN Indonesia di http://msdn.microsoft.com/id-id/default.aspx dan juga baru-baru ini tersedia
Forum
MSDN
Indonesia
di
http://social.msdn.microsoft.com/Forums/id-ID. Dan juga sebagai tambahan Anda bisa mengunjungi alamat berikut: http://sqlserver-indo.org/, http://wss-id.org/, dan http://mugi.or.id/.
6
Demo Pembuatan Aplikasi Database pada Windows Form Pendahuluan Pada aplikasi desktop Windows Client berbasis .Net Framework terdapat 2 aplikasi yaitu Windows From dan Windows Presentation Foundation (WPF). Pada bagian ini kami akan menerangkan cara-cara dalam membuat aplikasi sederhana menggunakan Windows Form. Aplikasi yang akan kami terangkan adalah aplikasi yang menampilkan data dari Database yang sudah dibuat sebelumnya di Microsoft Access 2007 atau 2010.
Penyiapan Database Database yang kami gunakan adalah Database yang telah kami buat di Microsoft Access 2010 yang tidak jauh beda dengan Microsoft Access 2007.
Yang perlu Anda ketahui adalah pemberian nama kolom dan tabel tidak boleh ada spasi. Jika ada spasi akan menyulitkan Anda ketika Anda memulai membuat project dan melakukan pembuatan program saat
7
koneksi ke database menggunakan Microsoft Visual Studio 2010. Lihat gambar di bawah ini sebagai contoh penamaan kolom yang sudah benar.
Anda bisa gunakan Underscores atau karakter lainnya seperti pada gambar ini.
Hal yang lain yang perlu diperhatikan adalah hubungan antar tabel (bila ada). Jika tabel hanya satu tidak perlu perhatikan hubungan antar tabel. Kemudian pastikan tabel yang buat sudah memiliki primary key yaitu kolom yang memiliki nilai unik tidak boleh berulang (sebagai pembeda antar data). Pada database yang kami siapkan, primary key yang kami gunakan adalah nrp sebagai nomor induk mahasiswa (nrp tidak mungkin sama). Cara membuat primary key yaitu bisa melalui jendela Design View dengan cara klik kanan nama tabel misalnya tabel biodata klik Design View.
Klik kana nrp Klik Primary Key.
Jika sudah, simpan (ctrl + S) dan tutuplah Microsoft Access.
8
Pembuatan Project Setelah Anda menyiapkan database-nya, sekarang mulailah membuat project baru pada Microsoft Visual Studio 2008 atau Microsoft Visual Studio 2010. Buka Microsoft Visual Studio 2010 Anda. Dan Klik New Project.
Atau klik File New Project.
Anda bisa memilih bahasa pemrograman Visual Basic .Net atau Visual C#. Kali ini kami menggunakan bahasa pemrograman Visual C#. Pilih Visual C# Windows Windows Form Application. Beri nama project Anda “StudentData”. Ingat! Nama project tidak boleh ada spasi.
9
Kemudian Anda akan melihat area desain form1 seperti di bawah ini:
Dan ini adalah yang lihat di jendela Solution Explorer
Selanjutnya temukan jendela Server Explorer.
Jika Anda belum menemukan jendela Server Explorer silahkan klik menu View Server Explorer.
10
Selanjutnya pada jendela Server Explorer klik kanan Connection Add Connection.
Setelah itu, ganti Data Source menjadi Microsoft Access Database File.
11
Pilih Microsoft Access Database dan klik OK. Kemudian pada jendela Add Connection klik Browse ke database yang telah dibuat berada.
Klik Open kemudian kosongkan user name dan password dan klik OK.
12
Kemudian lihatlah pada jendela Server Explorer dan expand-lah database44.accdb tersebut sampai terlihat seperti pada gambar di bawah ini.
Klik kanan project StudentData pada jendela Solution Explorer Add New Item.
13
Pada jendela Add New Item di bawah ini pilih Data DataSet. Beri nama MyDataSet.xsd dan klik Add.
Sekarang Drag and Drop tabel biodata ke area MyDataSet.xsd.
Setelah itu, Anda akan menemui pertanyaan seperti di bawah ini, klik Yes. Database database44.accdb akan terkopi ke project StudentData.
14
Kemudian Anda akan melihat seperti di bawah ini:
Sekarang, bukalah jendela Data Source. Jika Anda belum melihat jendela Data Source klik menu Data Show Data Sources
15
Klik tanda pin di sebelah kanan atas jendela Data Sources.
Bukalah jendela Form1.cs [Design]
Perluaslah Form1.
16
Kemudian pada jendela Data Sources klik biodata ListBox.
Jika Anda tidak menemui pilihan ListBox, pilihlah Customize dan beri tanda check list pada ListBox. Klik OK.
Drag and Drop biodata ke area design Form1.
17
Kemudian Anda akan melihat seperti di bawah ini pada Form1.
Sesuaikan ukuran ListBox sehingga seperti di bawah ini:
18
Pada ListBox klik tanda panah kecil di sebelah kanan atas ListBox.
Pada gambar di atas, secara default Display Member berisi nama_lengkap. Hal ini berarti bahwa ListBox tersebut akan menampilkan data nama_lengkap dari database. Anda bisa mengubahnya sesuai kebutuhan. Klik menu Debug Run (Ctrl + F5) atau Start Debugging (F5) untuk menjalankan program atau aplikasi ini. Hasilnya akan tampak seperti pada gambar di bawah ini:
19
Kembali ke jendela Data Sources, klik biodata Details.
Drag and Drop biodata dari Jendela Data Sources ke sebelah kanan ListBox.
20
Setelah itu Anda akan melihat tampilan seperti di bawah ini:
Terdapat penambahan Label (contohnya: nrp, nama lengkap, dll) dan TextBox. Anda bisa mengubah ukuran TextBox agar sesuai, karena terkadang TextBox untuk nama lengkap diusahakan bisa menampung panjangnya nama lengkap, apalagi alamat. Sesuaikan dengan kebutuhan.
21
Jalankan kembali, Run (Ctrl + F5).
Melihat data sebelumnya
Melihat data terakhir Menyimpan perubahan
Melihat data selanjutnya
Menambah data baru
Menghapus
data Melihat data paling awal
22
Anda bisa mengubah judul Form1 menjadi “Data Mahasiswa” melalui jendela Properties. Klik Form1 kemudian pada jendela Properties carilah properti Text, kemudian gantilah Form1 menjadi “Data Mahasiswa”, tampak seperti pada gambar di bawah ini.
Kemudian Anda akan melihat perubahan seperti di bawah ini.
Ubahlah properti Form1 sesuai kebutuhan, misalnya properti Icon diubah sesuai kebutuhan kita, atau properti StartPosition diubah menjadi CenterScreen, dan MaximizeBox dari True menjadi False agar window tidak bisa di maximize.
23
CenterScreen agar nanti posisi Window ketika start up posisinya di tengah layar. Anda juga bisa mengganti properti Label nrp menjadi NRP melalui properti Text.
Hasilnya seperti ini.
24
Demo Pembuatan Aplikasi Database pada Windows Presentation Foundation (WPF) Pendahuluan Bagian ini akan menerangkan pembuatan aplikasi database pada Windows Presentation Foundation (WPF). Langkah-langkahnya hampir sama pada aplikasi Windows From, hanya saja WPF di bagian ini lebih menekankan pada antarmuka pengguna yang lebih menarik dibandingkan Windows Form. Bagian ini juga akan mendemokan sedikit tentang penggunaan Microsoft Expression Blend 4 RC yang digunakan untuk memberi warna gradient pada window dan beberapa kontrol seperti ListBox.
Penyiapan Database Database yang digunakan masih sama yaitu database44.accdb.
Pembuatan Project Buatlah project baru dengan Microsoft Visual Studio 2010. New New Project Visual C# WPF Application. Beri nama “StudentDataWPF”.
25
Pada jendela Server Explorer klik kanan Data Connections Add Connection.
Pada Data Sources klik Change pilih Microsoft Access Database File. Klik OK. Kemudian Browse database file yang udah kita siapkan (database44.accdb), kosongkan user name dan password. Klik OK.
Pada Solution Explorer klik kanan project “StudentDataWPF” Add New Item.
26
Klik Data DataSet. Beri nama StudentDataSet.xsd.
Kemudian Drag and Drop tabel biodata dari Server Explorer ke area StudentDataSet.xsd.
27
Jika muncul dialog klik Yes agar database44.accdb terkopi ke project. Anda juga akan melihat tampilan di bawah ini pada jendela StudentDataSet.xsd.
Bukalah jendela MainWindow.xaml dan lihatlah jendela Data Sources.
Pada biodata klik dan pilih ListBox.
28
Jika Anda tidak menemukan pilihan ListBox, Anda bisa memperolehnya dari pilihan Customize dan beri tanda centang atau Check List pada ListBox.
Drag and drop biodata dari Data Sources ke area design MainWindw.xaml.
Sesuaikan ukuran ListBox. Anda bisa mengubah properti ListBox melalui jendela Properties. HorizontalAlignment = Left dan VerticalAlignment = Stretch.
29
Kembali ke jendela Data Sources. Klik biodata pilih Details. Lakukan Drag and drop ke area design MainWindow.xaml.
30
Jalankan project Anda sekarang. Klik Debug Start Debugging atau Run Without Debugging.
Ubahlah properti Title MainWindow menjadi “Data Mahasiswa” melalui jendela Properties dan properti WindowStartUpLocation = CenterScreen. Dan ubahlah properti Text pada label nrp, nama lengkap dan lainnya sesuai dengan keinginan Anda sehingga terlihat seperti pada gambar di bawah ini.
31
Menggunakan Microsoft Expression Blend 4 RC Sebelumnya Anda telah membuat project dengan Microsoft Visual Studio 2010, selanjutnya sekarang kita masukkan project StudentDataWPF yang sudah dibuat menggunakan Expression Blend 4 RC. Carilah project StudentDataWPF dari Windows Explorer, kemudian klik kanan StudentDataWPF.sln Open With Microsoft Expression Blend 4 (C:\Users\[nama pengguna]\Documents\Visual Studio 2010\Projects\StudentDataWPF).
32
Sekarang kita mulai menambahkan warna bergradient pada background aplikasi yang kita buat. Pada jendela Object and Timeline klik Grid dan lihatlah jendela properties. Pada bagian Brushes klik Gradient Brush.
Untuk membalik warna gradient, klik Reverse Gradient Stop.
33
Untuk mengganti warna, tinggal klik salah satu kontrol silder gradient stop, kemudian klik warna yang diinginkan.
Selanjutnya pada jendela Object and Timeline klik biodataListBox, kemudian pada jendela Properties klik Gradient Brush, kemudian Reverse Gradient Stop dan kurangi warna hitamnya sehingga seperti di bawah ini.
34
Jalankan aplikasi Anda, klik Project Run Project.
Selesai. Saat Anda kembali ke Visual Studio 2010 akan ada dialog seperti beikut:
35
Klik Yes to All. Maka Anda akan melihat perubahan pada jendela design MainWindow.xaml pada Visual Studio 2010.
Menambahkan Animasi Project ini sebenarnya sudah selesai, namun rasanya belum lengkap kalau belum kita tambahkan sedikit animasi. Anda bisa menambahkan sedikit animasi melalui Expression Blend 4. Perbesar ukuran Window dengan cara pada jendela Object and Timeline klik Window kemudian pada jendela Properties pada bagian Layout ubahlah Height menjadi 400.
Sekarang kembali ke Expression Blend 4, lihatlah pada jendela Object and Timeline kemudian klik New pada gambar di bawah ini untuk menambahkan storyboard sebagai object satu animasi.
Namanya tetap Storyboard1 dan klik OK.
36
Sekarang posisi recording dimatikan dulu karena kita perlu menggeser grid1 ke bawah terlebih dahulu.
Pada bagian Object and Timeline klik grid1, kemudian geserlah ke bawah menggunakan keyboard Anda seperti pada gambar di bawah ini.
Drag and Drop Label ke area design view tepat di atas grid1.
Pastikan Properti HorizontalAlignment Label ini bernilai Left dan VerticalAlignment bernilai Top.
Hapuslah Text pada Label tersebut. Hidupkan kembali recorder-nya.
Pada jendela Properties, ubahlah ukuran font menjadi “1 pt” ketika timeline masih pada posisi 0.
38
Dan pada jendela Timeline ubahlah garis kuning Timeline ke posisi 1. Kemudian pada jendela Properties ubahlah ukuran font menjadi “16 pt” dan klik Bold.
Matikan kembali recoder.
Kembali ke Microsoft Visual Studio 2010. Jika Anda menemui dialog klik Yes to All. Pada design view dari MainWindow.xaml, klik Label yang terakhir di tambahkan tadi.
Pada jendela Properties klik pada Content Apply Data Binding.
39
Kemudian klik nrp.
Jalankan project Anda. Run (ctrl + F5).
Saat aplikasi running animasi hanya berjalan di awal saja. Sekarang kita ingin ketika nama-nama atau item lainnya pada ListBox dipilih, animasi ini kembali muncul. Nah bagaimana caranya? Mudah saja, Anda perlu menambahkan event pada ListBox ketika salah satu nama pada ListBox tersebut terpilih kemudian memangil animasi tadi yang bernama Storyboard1.
40
Pada design view MainWindow.xaml klik ListBox kemudian lihatlah pada jendela Properties klik tab Events Double klik atau tekan Enter pada SelectionChanged.
Anda akan di bawa ke blok kode event dari ListBox.
Tambahkan kode program berikut pada blok kode event biodataListBox:
Jalankan kembali Project Anda. Run (ctrl + F5). Dan pilihlah nama lain pada ListBox. Selesai sudah, Anda telah memanggil kembali animasi tersebut ketika memilih nama-nama yang lain pada ListBox.
42
Manipulasi Database Menggunakan LINQ to SQL pada WPF DataGrid Kali ini kita akan membuat aplikasi yang bisa menampilkan data dari SQL Server dengan memanfaatkan LINQ to SQL pada WPF. Data akan di tampilkan pada DataGrid WPF. DataGrid WPF ini kita peroleh dari WPF Toolkit yang diperoleh dari http://wpf.codeplex.com, berupa assembly WPFToolkit.dll yang nantinya akan di tambahkan ke project kita sebagai tambahan referensi assembly. Ok, sekarang kita mulai buka Microsoft Visual Studio 2008 atau 2010 yang terinstall di komputer Anda.
Buatlah project baru dengan nama “CustomersData”.
43
Dengan cara New Project Visual C# Windows WPF Application, dengan target .net framework-nya yaitu .Net Framework 3.5. Beri nama “CustomersData” dan klik OK.
44
Setelah itu ubahlah properti ukuran Window, WindowStartUpLocation, dan Title Window. Ikuti kode program di bawah ini. <Window x:Class="CustomersData.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Customers Data" Height="400" Width="880" WindowStartupLocation="CenterScreen">
Tambahkan WPFToolkit.dll sebagai referensi tambahan. Caranya: pada Solution Explorer klik kanan pada folder References Add Reference.
Pada window Add Reference buka tab Browse dan cari WPFToolkit yang telah disediakan. Kemudian Klik OK.
45
Secara otomatis WPFToolkit akan langsung muncul di folder References.
Kembali ke code XAML atau XAML Editor. Tambahkan baris kode di bawah ini sebagai penggunaan assembly WPFToolkit yang sudah kita tambahkan. <Window x:Class="WpfApplication2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:grid="http://schemas.microsoft.com/wpf/2008/toolkit" Title="Customers Data" Height="400" Width="880" WindowStartupLocation="CenterScreen">
Cara yang lebih mudah adalah sebagai berikut: Ketik xmlns:grid="WPFToolkit" akan muncul intellisense, kemudian pilih yang mengandung kata toolkit dan Enter.
Jika Anda sudah selesai menambahkan referensi WPFToolkit, sekarang buatlah Grid di XAML Editor dengan code program berikut: <Window x:Class="CustomersData.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 46
Lihatlah ada perubahan pada Design View. Kemudian kita mulai menggunakan Database. Pada Solution Explorer klik kanan Data Connection Add Connection.
Kemudian pada Data Source pastikan yang terpilih adalah Microsoft SQL Server Database File (SqlClient) dan pada Database file name cari atau browse database SQL yang disediakan yaitu AdventureWorksLT.mdf misalnya pada C:\Sample DB\AdventureWorksLT.mdf. Pada Log on to the server tetap pilih Use Windows Authentication. Lalu klik OK.
47
Pada Server Explorer Anda akan melihat seperti di bawah ini dan Expandlah AdventureWorksLT.mdf Tables.
Tambahkan Item LINQ to SQL Classes. Caranya: Klik kanan project CustomersData di Solution Explorer Add New Item.
48
Beri nama “Customers.dbml”.
Klik Add. Dan akan muncul Customers.dbml di Solution Explorer.
49
Lihatlah window Customers.dbml pada project Anda.
Pada Server Explorer, lakukan Drag and Drop tabel Customer ke Design View atau Window Customers.dbml. Jika Anda pertanyaan seperti di bawah ini, Klik Yes saja.
50
Kemudian akan terlihat seperti di bawah ini:
Build project Anda. Pada menu Build Build Solution (Ctrl + Shift + B).
51
Lanjutkan ke XAML Editor dengan cara double klik MainWindow.xaml pada Solution Explorer dan tambahkan kode program berikut: <Button Content="Update" Click="UpdateButton_Click" />
Kemudian aktifkan event pada UpdateButton_Click dengan cara klik kanan UpdateButton_Click Navigate to Event Handler.
Kemudian Anda akan di bawa ke window code C# MainWindow.xaml.cs. Anda akan melihat block kode berikut: private void UpdateButton_Click(object sender, RoutedEventArgs e) { }
53
Lakukan hal yang sama untuk DeleteButton_Click, RefreshButton_Click, dan AddButton_Click. Sehingga Anda melihat code program berikut: private void UpdateButton_Click(object sender, RoutedEventArgs e) { } private void DeleteButton_Click(object sender, RoutedEventArgs e) { } private void RefreshButton_Click(object sender, RoutedEventArgs e) { } private void AddButton_Click(object sender, RoutedEventArgs e) { }
54
Tambahkan fungsi Refresh. public void Refresh() { CustomersDataContext db = new CustomersDataContext(); var customers = from c in db.Customers select c; MyDataGrid.ItemsSource = customers; RefreshButton.Content = "Refreshed"; }
Tambahkan kode berikut pada event RefreshButton_Click private void RefreshButton_Click(object sender, RoutedEventArgs e) { Refresh(); }
UpdateButton_Click akan memanggil fungsi atau method Refresh. Run project Anda dengan cara ke menu Debug Start Without Debugging.
Data akan keluar ketika Anda klik button Refresh. 55
Sekarang kita beralih ke even UpdateButton_Click, isi dengan kode program berikut: private void UpdateButton_Click(object sender, RoutedEventArgs e) { try { CustomersDataContext db = new CustomersDataContext(); Customer custRow = MyDataGrid.SelectedItem as Customer; Customer cust = (from c in db.Customers where c.CustomerID == custRow.CustomerID select c).Single(); cust.CustomerID = custRow.CustomerID; cust.FirstName = custRow.FirstName; cust.LastName = custRow.LastName; cust.CompanyName = custRow.CompanyName; cust.EmailAddress = custRow.EmailAddress; cust.Phone = custRow.Phone; 56
Kemudian pada DeleteButton_Click tambahkan kode progra m di bawah ini: private void DeleteButton_Click(object sender, RoutedEventArgs e) { CustomersDataContext db = new CustomersDataContext(); Customer custRow = MyDataGrid.SelectedItem as Customer; var cust = (from c in db.Customers where c.CustomerID == custRow.CustomerID select c).Single(); db.Customers.DeleteOnSubmit(cust); db.SubmitChanges(); MessageBox.Show("Row Deleted Successfully."); Refresh(); }
Sekarang RefreshButton, UpdateButton, dan DeleteButton sudah berfungsi. Sekarang Anda tinggal mengatur AddButton. Kita Akan mengatur tombol AddButton ini memanggil form lain untuk mengisi data baru. Sebelumnya kita buat Form WPF baru. Ikuti langkah berikut: Klik kanan project pada Solution Explorer Add Window
57
Beri nama “AddNew.xaml”.
58
Sekarang ubahlah pada XAML Editor degan kode program berikut: Title="Add New" Height="300" Width="300" WindowStartupLocation="CenterScreen"> <Button Grid.Column="1" Grid.Row="6" Content="Add" Click="Button_Click"/>
Kemudian Anda akan melihat pada Design View seperti di bawah ini:
59
Kemudiian buatlah even klik pada Button_Click dengan cara klik kanan Navigate to Event Handler.
Kemudian Anda akan di bawa pada block kode program berikut: private void Button_Click(object sender, RoutedEventArgs e) { }
Kemudian, pada event Button_Click tambahkan kode program berikut: 60
Selesai. Untuk AddNew.xaml urusannya udah selesai. Sekarang kita panggil dari MainWindow.xaml, yaitu dari AddButton, caranya masuk ke event AddButton_Click pada MainWindow.xaml.cs. Tambahkan kode program berikut: private void AddButton_Click(object sender, RoutedEventArgs e) { AddNew an = new AddNew(); an.Show(); RefreshButton.Content = "Refresh"; }
OK. Sudah selesai. Sekarang jalankan project Anda. Debug Start Without Debugging.
61
Ketika Anda meng-klik tombol Add New akan muncul window berikut:
Anda bisa mencoba isi data Anda di sini dengan catatan Customer ID harus unik tidak boleh sama dengan yang sudah ada dari Database. Contoh pengisian:
62
Klik Add dan klik tombol Refresh. Maka data Anda akan muncul di urutan ke 702.
Anda juga bisa update data langsung pada tabel tersebut dengan cara double klik yang akan di ubah kemudian klik update.
63
Membuat Aplikasi Data Binding Database SQL Server pada Windows Form Buka Microsoft Visual Studio 2008 atau 2010
Buat Project baru dengan Nama “CustomerData”. New Project Visual C# Windows Form Application. Beri nama project Anda dengan nama “CustomerData” dan target versi .net framework yang dipakai adalah .Net Framework 3.5. Secara otomatis Solution Name juga menjadi “CustomerData”. Biarkan data ceck pada Create directory for Solution dan biarkan unceck pada Add to Source Control. Kemudian Klik OK.
64
Setelah Anda mengklik OK, Anda akan melihat bagian design dari Aplikasi Windows Form yang telah Anda buat (Form1.cs [Design])dan project Anda di Solution Explorer (sebelah kanan).
Ubahlah ukuran Form sesuai kebutuhan. 65
Tambahkan item Linq to SQL. Caranya: Klik kanan Project Anda di Solution Explorer Add New Item Visual C# Items Data Linq to SQL Classes.
Beri nama “Customer.dbml”
66
Lalu klik Add. Setelah itu Anda akan melihat Server Explorer, Customer.dbml, serta Solution Explorer seperti di bawah ini:
Buatlah Data Connection baru. Caranya: Klik kanan Data Connections pada Server Explorer Add Connection.
Kemudian pada Data Source pastikan yang terpilih adalah Microsoft SQL Server Database File (SqlClient) dan pada Database file name cari atau browse database SQL yang disediakan yaitu AdventureWorksLT.mdf misalnya pada C:\Sample DB\AdventureWorksLT.mdf. 67
Pada Log on to the server tetap pilih Use Windows Authentication. Lalu klik OK.
Setelah klik OK maka ada pertanyaan “The database file „C:/Sample DB/AdventureWorkLT.mdf does not exist. Would you like to create it?”, maka klik Yes. Pada Server Explorer Anda akan melihat seperti di bawah ini dan Expandlah AdventureWorksLT.mdf Tables.
68
Pilih Customer dan CustomerAddress, dengan menekan control klik Customer klik CustomerAddress. Kemudian Drag and Drop ke ruangan luas di Customer.dbml. Setelah itu Anda akan melihat seperti di bawah ini:
Dari gambar di atas terdapat hubungan tabel antara Customer dengan Customer Address yaitu one to many karena satu Customer bisa saja mempunyai alamat lebih dari satu. Tabel Customer memberikan Primary Key „CustomerID‟ sebagai Foreign Key pada tabel CustomerAddress. Build Project Anda.
69
Bukalah window Data Source di sebelah kanan atau buka melalui menu pada Visual Studio 2010 Anda. Klik Data Show Data Sources.
Kemudian akan muncul window Data Sources seperti di bawah ini dan klik Add New Data Source.
70
Akan muncul wizard seperti di bawah ini dan pilih Object kemudian pilih Next.
Check Customer kemudian klik Finish.
Kemudian akan terlihat tampilan pada window Data Sources sebagai berikut:
71
Kemudian bukalah tab atau window Form1.cs [design].
Tips:
72
Jika terlihat warning pada window Error List maka rebuild project Anda. Klik menu Build Rebuild Solution. Setelah itu akan terlihat seperti ini.
Pada Data Sources klik Customer Details
Kemudian klik NameStyle [None]
73
Kemudian juga untuk yang lainnya seperti di bawah ini.
Tips: Yang di beri perlakuan [None] berarti data tersebut tidak di pilih. Dan pilihan Details, nanti pada form design akan di buatkan label dan textBox secara otomatis oleh Visual Studio.
Kemudian expand-lah pada CustomerAddress dan beri [None] pada rowguid.
Setelah Anda selesai melakukan perlakuan di atas maka sekarang Drag and Drop Customer ke Form1.cs [Design] .
74
Kemudian Drag and Drop CustomerAddress ke Form1.cs[Design] pada sebelah kanannya. Kemudian akan muncul GridView. Karena Anda tidak mengubah pada CustomerAddress menjadi yang lain seperti Details atau yang lainnya. Lihatkan gambar berikut:
75
Kemudian double klik pada bagian paling atas pada design Form1 untuk membuat Form1_Load, Kemudian Anda akan dibawa ke kode program Form1.cs.
Pada Form1_Load isi kode program berikut: CustomerDataContext db = new CustomerDataContext(); this.customerBindingSource.DataSource = db.Customers;
Kemudian jalankan dengan cara klik Debug Start Without Debugging (Ctrl + F5)
76
Hasilnya:
77
Aplikasi Sederhana Virtual Earth WPF Control Pendahuluan Virtual Earth WPF Control merupakan library yang dipakai untuk membuat aplikasi yang memanfaatkan Virtual Earth. Virtual Earth WPF Control digunakan untuk aplikasi Windows Presentation Foundation (WPF). Virtual Earth WPF Control bisa Anda peroleh dari http://vewpf.codeplex.com/.
Pada halaman tab Download, unduhlah VirtualEarthWPFControl.dll.
78
Pembuatan Project dengan Visual Studio 2010 Buatlah project baru dengan Microsoft Visual Studio 2010. Pilih Visual C# Windows WPF Application. Beri nama “MapApp”.
79
Tambahkan VirtualEarthWPFControl.dll yang sudah diunduh sebagai reference tambahan di project kita. Pada Solution Explorer klik kanan References Add Reference
Browse dimana VirtualEarthWPFControl.dll berada. Klik OK.
Definisikan reference tambahan tersebut pada MainWindow.xaml yaitu dengan mengetikkan kode xaml (dibaca “zammel”) berikut: xmlns:ve="clrnamespace:VirtualEarthWPFControl;assembly=VirtualEarthWPFControl"
Atau cara mudahnya lihat gambar di bawah, setelah ketik vir tekan ctrl + space lalu pilihVirtualEarthWPFControl.
80
Kemudian ubah ukuran Window, judul Window, dan properti lainnya, samakan dengan kode di bawah ini: <Window x:Class="MapApp.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ve="clrnamespace:VirtualEarthWPFControl;assembly=VirtualEarthWPFControl" Title="My Map" Height="400" Width="700" WindowStartupLocation="CenterScreen">
Selanjutnya kita buat 2 kolom dengan memanfaatkan tag Grid. Ikuti kode xaml berikut:
Pada design view dari MainWindow.xaml akan terlihat ada 2 kolom seperti pada gambar di bawah ini:
81
Sekarang kita tambahkan TextBox dan Button ke kolom pertama. Dengan cara tambahkan kode xaml di bawah ini: <Button Height="40" Margin="10,50,10,0" Content="Cari" FontSize="18" FontWeight="Bold" VerticalAlignment="Top"/>
Akan terlihat seperti ini:
Sekarang tambahkan kontrol VirtualEarth di kolom ke dua: <Button Height="40" Margin="10,50,10,0" Content="Cari" FontSize="18" FontWeight="Bold" VerticalAlignment="Top"/>
Akan terlihat seperti di bawah ini:
82
Sekarang kita aktifkan Button/Tombol Cari, agar ketika inputan nama kota di ketik di TextBox kemudian tombol Cari di klik maka langsung tertuju ke peta kota yang dicari. Caranya tambahkan event Click pada button/tombol Cari, dengan menambahkan kode xaml di bawah ini: <Button Height="40" Margin="10,50,10,0" Content="Cari" FontSize="18" FontWeight="Bold" VerticalAlignment="Top" Click="Button_Click"/>
Cari mudahnya ketika sudah di ketik Click=, maka akan muncul pilihan , klik saja pilihan tersebut sehingga button mempunyai event klik baru.
Klik kanan Button_Click Navigate to Event Handler.
Anda akan di bawa ke blok kode berikut: private void Button_Click(object sender, RoutedEventArgs e) { } 83
