Demo .Net Programming
description
Transcript of Demo .Net Programming
Modul Demo .Net Programming
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.
i
Demo .Net Programming
Oleh:
Eko Zulkaryanto [email protected] http://www.ezul.net Microsoft Student Partners Advisor Computer Science Student of Bogor Agricultural University
Aplikasi Sederhana menggunakan Microsoft Visual Studio 2010 dan Microsoft Expression Blend 4 RC
ii
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
1
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.
2
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
3
Anda bisa mengunjungi http://www.microsoft.com/visualstudio/en-
us/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)
http://geeks.netindonesia.net/files/fol
ders/vs2010/entry184178.aspx
Visual Studio 2010 Ultimate (part 2)
http://geeks.netindonesia.net/files/fol
ders/vs2010/entry184179.aspx
Visual Studio 2010 Ultimate (part 3)
http://geeks.netindonesia.net/files/fol
ders/vs2010/entry184180.aspx
Visual Studio 2010 Ultimate (part 4)
http://geeks.netindonesia.net/files/fol
ders/vs2010/entry185863.aspx
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
4
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/.
5
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 tutorial-
tutorial 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.
6
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/.
7
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
8
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.
9
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.
10
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.
11
Selanjutnya pada jendela Server Explorer klik kanan Connection Add
Connection.
Setelah itu, ganti Data Source menjadi Microsoft Access Database File.
12
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.
13
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.
14
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.
15
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
16
Klik tanda pin di sebelah kanan atas jendela Data Sources.
Bukalah jendela Form1.cs [Design]
Perluaslah Form1.
17
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.
18
Kemudian Anda akan melihat seperti di bawah ini pada Form1.
Sesuaikan ukuran ListBox sehingga seperti di bawah ini:
19
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:
20
Kembali ke jendela Data Sources, klik biodata Details.
Drag and Drop biodata dari Jendela Data Sources ke sebelah kanan ListBox.
21
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.
22
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
23
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.
24
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.
25
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”.
26
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.
27
Klik Data DataSet. Beri nama StudentDataSet.xsd.
Kemudian Drag and Drop tabel biodata dari Server Explorer ke area
StudentDataSet.xsd.
28
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.
29
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.
30
Kembali ke jendela Data Sources. Klik biodata pilih Details. Lakukan
Drag and drop ke area design MainWindow.xaml.
31
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.
32
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).
33
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.
34
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.
35
Jalankan aplikasi Anda, klik Project Run Project.
Selesai.
Saat Anda kembali ke Visual Studio 2010 akan ada dialog seperti beikut:
36
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.
37
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.
Selanjutnya tambahkan Label. Caranya: pada jendela Assets klik Controls
Label.
38
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.
39
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.
40
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.
41
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:
42
((System.Windows.Media.Animation.Storyboard)this.Resources["Storyboard1"]).Begin();
Sehingga menjadi seperti ini:
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.
43
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”.
44
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.
45
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"> <Grid> </Grid> </Window>
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.
46
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"
47
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"> <Grid>
<grid:DataGrid x:Name="MyDataGrid" x:Uid="MyDataGrid" AutoGenerateColumns="False" AlternationCount="2" SelectionMode="Single" Margin="0,30,0,30">
</grid:DataGrid> </Grid> </Window>
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.
48
Pada Server Explorer Anda akan melihat seperti di bawah ini dan Expand-
lah AdventureWorksLT.mdf Tables.
Tambahkan Item LINQ to SQL Classes.
Caranya: Klik kanan project CustomersData di Solution Explorer Add
New Item.
49
Beri nama “Customers.dbml”.
Klik Add.
Dan akan muncul Customers.dbml di Solution Explorer.
50
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.
51
Kemudian akan terlihat seperti di bawah ini:
Build project Anda.
Pada menu Build Build Solution (Ctrl + Shift + B).
52
Lanjutkan ke XAML Editor dengan cara double klik MainWindow.xaml
pada Solution Explorer dan tambahkan kode program berikut:
<Grid> <grid:DataGrid x:Name="MyDataGrid" x:Uid="MyDataGrid" AutoGenerateColumns="False" AlternationCount="2" SelectionMode="Single" Margin="0,31,0,30">
<grid:DataGrid.Columns> <grid:DataGridTextColumn Binding="{Binding Path=CustomerID}" Header="ID" Width="30"/>
<grid:DataGridTextColumn Binding="{Binding Path=FirstName}" Header="First Name" Width="80"/> <grid:DataGridTextColumn Binding="{Binding Path=LastName}" Header="Last Name" Width="80"/> <grid:DataGridTextColumn Binding="{Binding Path=CompanyName}" Header="Company" Width="200"/>
<grid:DataGridTextColumn Binding="{Binding Path=EmailAddress}" Header="Email" Width="200"/>
<grid:DataGridTextColumn Binding="{Binding Path=Phone}" Header="Phone" Width="100"/>
<grid:DataGridTemplateColumn Header="Update Row">
<grid:DataGridTemplateColumn.CellTemplate> <DataTemplate>
<Button Content="Update" Click="UpdateButton_Click" />
</DataTemplate> </grid:DataGridTemplateColumn.CellTemplate> </grid:DataGridTemplateColumn>
53
<grid:DataGridTemplateColumn Header="Delete Row"> <grid:DataGridTemplateColumn.CellTemplate> <DataTemplate>
<Button Content="Delete" Click="DeleteButton_Click"/>
</DataTemplate> </grid:DataGridTemplateColumn.CellTemplate> </grid:DataGridTemplateColumn> </grid:DataGrid.Columns> </grid:DataGrid> <Button Height="23" Margin="0,4,12,0" Name="RefreshButton" Content="Refresh" VerticalAlignment="Top"
Click="RefreshButton_Click" HorizontalAlignment="Right" Width="126"/>
<Button Height="23" Margin="0,0,12,4" Name="AddButton" Content="Add New" VerticalAlignment="Bottom"
Click="AddButton_Click" HorizontalAlignment="Right" Width="126"/>
</Grid>
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) { }
54
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) { }
55
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.
56
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;
57
db.SubmitChanges(); MessageBox.Show("Row Updated Successfully."); Refresh(); } catch (Exception Ex){ MessageBox.Show(Ex.Message); return; } }
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
58
Beri nama “AddNew.xaml”.
59
Sekarang ubahlah pada XAML Editor degan kode program berikut:
Title="Add New" Height="300" Width="300" WindowStartupLocation="CenterScreen"> <Grid Margin="10, 10, 10, 10"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Label Content="Customer ID"/> <Label Content="First Name" Grid.Row="1"/> <Label Content="Last Name" Grid.Row="2"/> <Label Content="Company Name" Grid.Row="3"/> <Label Content="Email Address" Grid.Row="4"/> <Label Content="Phone Number" Grid.Row="5" /> <TextBox x:Name="txtCustomerID" Grid.Column="1"/> <TextBox x:Name="txtFirstName" Grid.Column="1" Grid.Row="1"/> <TextBox x:Name="txtLastName" Grid.Column="1" Grid.Row="2"/> <TextBox x:Name="txtCompanyName" Grid.Column="1" Grid.Row="3"/>
<TextBox x:Name="txtEmailAddress" Grid.Column="1" Grid.Row="4"/>
<TextBox x:Name="txtPhone" Grid.Column="1" Grid.Row="5"/> <Button Grid.Column="1" Grid.Row="6" Content="Add" Click="Button_Click"/>
</Grid>
Kemudian Anda akan melihat pada Design View seperti di bawah ini:
60
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:
61
private void Button_Click(object sender, RoutedEventArgs e) { CustomersDataContext db = new CustomersDataContext(); Customer cust = new Customer(); cust.CustomerID = int.Parse(txtCustomerID.Text); cust.FirstName = txtFirstName.Text; cust.LastName = txtLastName.Text; cust.CompanyName = txtCompanyName.Text; cust.EmailAddress = txtEmailAddress.Text; cust.Phone = txtPhone.Text; cust.ModifiedDate = DateTime.Today; cust.PasswordHash = "default"; cust.PasswordSalt = "default"; cust.rowguid = Guid.NewGuid(); db.Customers.InsertOnSubmit(cust); db.SubmitChanges();
MessageBox.Show("New Data Added Successfully.\nPlease Click Refresh Button.");
this.Close(); }
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.
62
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:
63
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.
64
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.
65
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.
66
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”
67
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.
68
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 Expand-
lah AdventureWorksLT.mdf Tables.
69
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.
70
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.
71
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:
72
Kemudian bukalah tab atau window Form1.cs [design].
Tips:
73
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]
74
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] .
75
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:
76
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)
77
Hasilnya:
78
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.
79
Pembuatan Project dengan Visual Studio 2010
Buatlah project baru dengan Microsoft Visual Studio 2010. Pilih Visual C#
Windows WPF Application. Beri nama “MapApp”.
80
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="clr-namespace:VirtualEarthWPFControl;assembly=VirtualEarthWPFControl"
Atau cara mudahnya lihat gambar di bawah, setelah ketik vir tekan ctrl + space lalu pilihVirtualEarthWPFControl.
81
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="clr-namespace:VirtualEarthWPFControl;assembly=VirtualEarthWPFControl" Title="My Map" Height="400" Width="700" WindowStartupLocation="CenterScreen"> <Grid> </Grid> </Window>
Selanjutnya kita buat 2 kolom dengan memanfaatkan tag Grid. Ikuti kode
xaml berikut:
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition MaxWidth="200"/> <ColumnDefinition/> </Grid.ColumnDefinitions> </Grid>
Pada design view dari MainWindow.xaml akan terlihat ada 2 kolom seperti
pada gambar di bawah ini:
82
Sekarang kita tambahkan TextBox dan Button ke kolom pertama. Dengan
cara tambahkan kode xaml di bawah ini:
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition MaxWidth="200"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <TextBox Height="30" Margin="10,10,10,0" Name="txtCari" VerticalAlignment="Top" FontSize="18" /> <Button Height="40" Margin="10,50,10,0" Content="Cari" FontSize="18" FontWeight="Bold" VerticalAlignment="Top"/> </Grid>
Akan terlihat seperti ini:
Sekarang tambahkan kontrol VirtualEarth di kolom ke dua:
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition MaxWidth="200"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <TextBox Height="30" Margin="10,10,10,0" Name="txtCari" VerticalAlignment="Top" FontSize="18" /> <Button Height="40" Margin="10,50,10,0" Content="Cari" FontSize="18" FontWeight="Bold" VerticalAlignment="Top"/> <ve:VEMap Name="map" BorderBrush="Blue" BorderThickness="5" Grid.Column="1" Margin="10,10,10,10"/> </Grid>
Akan terlihat seperti di bawah ini:
83
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
<New Event Handler>, 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) { }
84
Tambahkan kode berikut:
private void Button_Click(object sender, RoutedEventArgs e) { map.Find(txtCari.Text); }
Selesai, sekarang jalankan aplikasi ini (Crlt + F5).
85
Ketik “Bogor” pada TextBox lalu klik tombol Cari, maka aplikasi akan
mencari kota “Bogor” jika ada akan tampil peta Bogor.
Biar tambah enak dilihat, kita beri warna gradien pada background,
tambahkan kode xaml berikut:
</Grid> <Window.Background> <LinearGradientBrush EndPoint="0,0" StartPoint="0,1"> <GradientStop Color="Black" Offset="0"/> <GradientStop Color="Blue" Offset="1"/> </LinearGradientBrush> </Window.Background> </Window>
Selamat mencoba!