Database Management Tool Dengan WPF

Hi, sekarang ini saya lagi ngerjain skripsi dan saya musti masukin data tanaman banyak banget. Daripada repot musti masukin satu-satu ke SQLServer, saya bikin aplikasi Add-Update-Delete data dengan WPF. Saya mau share aplikasi yang saya bikin itu ke temen-temen semua. Aplikasi ini bertugas untuk membantu saya memanipulasi database tanaman untuk table yang namanya “daftar_tanaman”.
Saya menggunakan LinQ to SQL untuk mengakses database dan menampilkannya di data grid dan untuk saya manipulasi.

Aplikasinya windowless, iseng-iseng aja.. Source code aplikasi ini bisa di-download di sini. Semoga bermanfaat ya.. 


-- Koding Sambil Ngopi --
-- Farhad Alaydrus --

Menampilkan Data Dari SQLServer ke Datagrid pada WPF dengan LinQ to SQL

Hai, kali ini kita akan coba bikin aplikasi WPF sederhana untuk menampilkan data dari database SQLServer dengan menggunakan LinQ to SQL. Mari kita coba sama-sama.

1. Bukalah Microsoft Visual Studio (saya pakai VStud 2008) dan buat project aplikasi WPF bernama "TesDatabaseWPF"
   
2. Kita akan pakai database Northwind untuk latihan ini, jadi kalau kamu belum punya sample database Northwind, silahkan dulu download yaa.. Nah, pada Server Explorer (View-> Solution Explorer), klik kanan pada "Data Connection", maka akan muncul window Add Connection.
   
3. Pastikan Data Source adalah "Microsoft SQL Server Database File (SqlClient)", lalu browse file database Northwind. Kalau sudah, maka akan terbuka koneksi SQLServer ke database Northwind.
   
4. Pada Solution Explorer, klik kanan pada TestDatabaseWPF, pilih Add->New Item.
   
5. Pilihlah "LinQ to SQL Classes", beri nama "MyNorthwind.dbml" kemudian klik Add
   
6. Dari Server Explorer, drag and drop table "Supplier" ke MyNorthwind.dbml, lalu save (Ctrl+s)
   
7. Berikutnya, drag-drop lah sebuah datagrid ke Window1.xaml dan beri nama "MyDataGrid"
   
8. Berikutnya, pada Window1.xaml.cs, ketikkan kode berikut:

1. 
   

public
partial
class
Window1 : Window

{
public Window1()

{

InitializeComponent();

InitData();

}

private
void InitData()

{

try

{

MyNorthwindDataContext db = new
MyNorthwindDataContext();

var DataResult = from
Supplier
in db.Suppliers

select Supplier;

this.MyDataGrid.ItemsSource = DataResult.ToList<Supplier>();

}

catch

{

MessageBox.Show("Data Gagal Dimasukkan");

}

}

}

Berikutnya, silahkan coba run dengan menekan F5. Gimana? Bisa kan?

-- Koding Sambil Ngopi --
-- Farhad Alaydrus --

Dasar Animasi Silverlight Dengan Expression Blend

Ngga lengkap rasanya Silverlight tanpa animasi. Bagaikan nyetir mobil Ferari di kecepatan 5 km/jam di jalan tol. Silverlihgt memiliki kemampuan untuk memaksimalkan komponen grafis yang dimiliki PC untuk memberikan user experience yang luar biasa. Kita akan coba bikin animasi sederhana dengan menggunakan Storyboard. Storyboard adalah fitur yang tersedia di Expression Blend untuk kita gunakan dalam membuat animasi. Caranya gampang, mari kita coba sama-sama.

Pertama, buka dulu Expression Blend dan buat baru project Silverlight. Ceritanya, kita akan bikin animasi mobil-mobilan. Jadi, mari kita bikin dulu mobilnya. Ga usah ribet-ribet, kita bikin aja rectangle yang ceritanya akan jadi mobil juga ga apa-apa. Tapi silahkan berkarya loh ya, saya ngga mau ngebatesin.. hehe..

Oke, kalo udah jadi mobilnya, sekarang kita siap untuk bikin animasinya. Di bagian kiri, tepat di bawah tulisan "Objects and Timeline" klik tanda tambah (+) untuk membuat storyboard baru. Beri nama "MobilJalan". Nah, coba lihat perubahan tampilan pada Expression Blend. Di sebelah kiri muncul timeline yang akan kita pake untuk bikin animasinya.

Sekarang, klik pada angka 2, artinya kita akan memberikan posisi akhir mobil pada detik ke-2. Pastikan garis oranye yang menandakan posisi aktif timeline berada pada detik ke-2. Sekarang, gerakkanlah mobil pada canvas (posisi mobil sekarang akan menjadi posisi akhir animasi).

Coba tekan tombol Play (segi tiga yang menghadap ke kanan pada timeline), nah gerak kan mobilnya.. Kalau sudah, tekan tombol "x" persis di bawah tulisan "Objects and Timeline" untuk menutup storyboard. Sekarang, kita akan buat button yang akan men-trigger animasi tersebut. Caranya gampang banget, dari toolbar di sebelah kiri, klik button dan gambarlah sebuah button di canvas.

Sekarang kita sudah punya button, pada bagian Properties paling atas, beri button tersebut nama "ButtonAnimasi" dan ubah tulisan di dalamnya menjadi "Jalan" (mengubah tulisan Button dapat dilakukan dengan cara mengklik 2 kali Button tersebut). Nah, kita udah punya button yang akan menjadi trigger. Sekarang, dalam kondisi ButtonAnimasi terpilih, pada Properties, klik gambar petir (Events) untuk menambahkan event pada button.

Sekarang, di bagian property klik dua kali pada textbox dengan label "Click". Dengan mengklik dua kali pada textbox ini, kita akan membuat handler untuk event tombol ButtonAnimasi jika ia diklik. Saat kita klik, akan terbuka file MainPage.xaml.cs. Kemudian silahkan tambahkan kode seperti di bawah ini:

private
void ButtonAnimasi_Click(object sender, System.Windows.RoutedEventArgs e)

{

MobilJalan.Begin();

}

Nah, sekarang coba run Aplikasi dengan menekan F5, lalu klik tombol "Jalan", maka si mobil akan bergerak. Bisa kan? Kalo udah bisa, coba explore Animasi untuk event lain, misalnya animasi kalau tombol di mouse over dan lain-lain.. Selamat mencoba..

-- Koding Sambil Ngopi --
-- Farhad Alaydrus --

Aplikasi Windows Tanpa Window

Windows Presentation Foundation memungkinkan kita untuk membuat aplikasi Window tanpa Window. Nah loh.. Jadi istilahnya kita akan bikin jendela tanpa frame. Kita akan coba bikin jendela tanpa frame itu di Expression Blend 3. Jadi, pertama mari kita buka Expression Blend 3, lalu pilih project WPF Application. Nah, sekarang kita mau bikin window yang bentuknya round-rectangle.

Jadi, kita bikin aja rectangle di Expresion Blend seukuran Window kita. Pada bagian Properties, atur Radius X dan Radius Y menjadi 20 untuk membuat sudut rectangle itu “bulet”. Jreng, jadilah calon window kita. Ubahlah warna rectangle itu sesuai selera. Kalo udah, sekarang klik layer “Window”.

Kemudian, dalam kondisi Window terpilih, pada Properties ceklis pilihan Allow Transparency.

Nah, sekarang window kita udah ngga ber-frame, tapi bentuknya masih kotak. Sekarang, dalam kondisi layer Window terpilih, pilihlah No Brush sebagai warna background Window, dan Jreng, hilanglah si Window kotak itu.

Sekarang silahkan jalankan aplikasi kita itu dengan menekan tombol F5 dan lihat keajaiban apa yang terjadi..


-- Koding Sambil Ngopi --
-- Farhad Alaydrus --

Photoshop to Expression Blend

Photoshop, tool desain keluaran Adobe yang udah sering banget kita denger. Desainer biasanya pasti jagoan banget make Photoshop. Saya pribadi, dalam membuat desain aplikasi, seneng ngedesain pake Photoshop sebelum saya transformasikan ke dalam form aplikasi. Tapi biasanya apa yang udah saya bikin keren-keren di Photoshop jadinya biasa aja di form aplikasinya (biasanya desain keren ngga bisa diulang dua kali, hehe). Nah, untungnya, Microsoft Expression Blend memungkinkan kita untuk meng-import file psd langsung ke XAML pada aplikasi Silverlight atau WPF kita. Disupportnya file psd ini merupakan bagian dari interoperability Microsoft yang sekarang semakin gencarnya. Oke, mari kita cobain..

Pertama, sediakan dulu file photoshop yang akan kita import. Sebelum diimport ke XAML, sebaiknya susun dulu layer-layer dalam photoshop dengan rapi. Beri nama yang jelas untuk setiap layer. Misalkan, gambar tombol berilah nama “MyButton” atau nama apapun yang sesuai dengan fungsi layer itu nantinya. Pastikan juga kamu udah menggabung (merge) setiap komponen yang akan jadi satu. Misalnya buletan tombol dan teks diatas tombolnya usah disatuin dalam satu layer. Tujuan me-merge komponen itu adalah supaya waktu nanti diimport ke Expression Blend udah dalam kondisi rapi dan siap pakai. Oke, kalo sudah rapi layer-layernya, langsung aja save jadi file psd.

Sekarang kita pindah ke Expression Blend. Buat project baru, bisa Silverlight, bisa WPF, tapi kali ini biar seragam, kita cobain aja WPF Application dulu. Setelah project terbentuk, pastikan MainPage.xaml yang menjadi halaman utama kita dalam keadaan aktif. Supaya nanti import photoshopnya rapi, sesuaikan dulu ukuran MainPage.xaml sesuai dengan ukuran file psd yang udah kita bikin. Sekarang bagian magic-nya..

Klik File->Import Adobe Photoshop File, dan browse file psd yang akan kita import. Setelah dipilih, akan muncul window baru. Nah, keliatan kan di situ, layer-layer yang udah kita bikin di photoshop. Kita bisa pilih semua atau beberapa layer aja yang mau diimport. Kalau udah sesuai, tekan OK dan BOOM jadilah sudah user interface XAML kita. Tapi tunggu dulu, button yang udah kita bikin belom bisa langsung dipake karena bentuknya masih berupa image. Kita harus bikin dia jadi button yang sebenar-benarnya button..

Klik aja ke gambar tombol yang akan kita jadikan button. Klik kanan pada gambar tombol, lalu pilih Make into control. Nah, akan muncul window macem-macem control yang bisa kita assign ke gambar tombol tadi. Pilih “Button” dan klik OK, maka sekarang gambar kita udah bisa dipakai sebagai button. Ulangi proses tersebut ke komponen-komponen lain dalam user interface kita.

Gimana, seru kan, ngedesain di Photoshop dan langsung disulap jadi user interface keren di Expression Blend?

-- Koding Sambil Ngopi --
-- Farhad Alaydrus --