Menyimpan gambar dari form ke database

Kadang, dalam membangun suatu aplikasi kita meminta data-data yang diinputkan oleh user, baik itu berupa teks, menu pilihan (dari RadioButton, CheckBox, ComboBox, dsb), gambar, dan sebagainya. Nah inputan yang berupa teks terbilang sangat mudah apabila akan disimpan, misal ke database, namun bila inputan berasal dari RadioButton, CheckBoc, ComboBox maupun PictureBox memiliki perlakuan yang sedikit berbeda. Kali ini akan dibahas gimana sih caranya menyimpan gambar ke database?? 

• Kita buat satu project windows application, desain formnya kita isi dengan 2 Label, 1TextBox, 1 PictureBox, dan 3 Button (masing-masing Button untuk memilih gambar, menghapus gambar, dan menyimpan ke database).

• Nah, cara pilih gambarnya gimana?? Kita akan gunakan OpenFileDialog, ketikkan baris kode berikut pada event BtnBrowse_Click.

• Untuk menghapus gambar dari PictureBox kita ketikkan baris kode berikut.

• Sekarang gambar sudah bisa tampil di form, namun belum bisa disimpan ke database. Kita buat databasenya dulu, disini saya gunakan Microsoft SqlServer, desain seperti berikut.

• Sebelum kita simpan gambarnya, kita konversi dulu ke array byte. Kita buat 2 method, untuk konversi ke byte dan untuk menyimpan ke database seperti berikut dan jangan lupa menambah baris kode paling atas (karena kita akan mengakses database SqlServer).

• Nah, sekarang kita bisa simpan gambar ke database, ketik baris kode berikut pada event BtnSimpan_Click.

• Jalankan aplikasi dengan menekan tombol F5, tekan tombol Simpan, cek database yang tadi dibuat, datanya telah terisi. Adakah yang aneh?? Yap, kolom Gambar berisi "<Binary>", itu adalah gambar yang telah kita konversi ke byte. Muncul satu pertanyaan, kalo mau nampilin gambar dari database gimana?? Kita lihat di tutorial selanjutnya disini :)

Read More

Mengisi ListView dari form lain

Wah, gara-gara bantuin temen bikin tugas IMK (Interaksi Manusia dan Komputer) kepikiran buat posting disini sekalian, kan lumayan buat nambah2 posting :p

Ada kalanya dan seringkali data yang berupa daftar ditampilkan tersendiri, tidak berada dalam satu form dengan borang pengisian data. Dari kasus yang saya dapatkan (dari tugas temen :p) ada form yang menampilkan daftar mahasiswa, form ini memiliki tombol untuk menambahkan data baru, penambahan data baru ini dilakukan dari form lain. Gimana?? Lumayan ribet penjelasannya yak :p 

Dari pada bingung, langsung kita buat:

• Seperti biasa, kata-kata yang terus diulang saat mulai membuat aplikasi, kita buka visual studio dan buat satu project windows application. Buat satu form dengan nama FormDaftar dengan desain seperti berikut.

• Form diatas terdiri dari 1 ListView dan 1 MenuStrip yang bisa di-drag dari toolbox. ListView kita tambahkan kolom-kolom seperti pada gambar, properti View-nya kita buat Details. Sedangkan MenuStrip berisi data->tambah dan keluar.

• Nah form daftar mahasiswa sudah selesai (desainnya :p), sekarang kita akan buat form baru untuk mengisi data mahasiswa, klik kanan WindowsApplication1 pilih add->Windows Form dan buat desain seperti gambar berikut.

• FormInput tersebut memiliki kontrol TextBox, RadioButton, CheckBox, ComboBox, Label dan Button. Oke sekarang kita mulai dulu dari FormDaftar, kita buat satu variabel yang akan dipakai untuk passing data antar form, ketikkan baris kode berikut.

• Nah, sekarang kita panggil FormInput dari MenuStrip tambah

• Yang terakhir, kita tutup form

• Sekarang kita beralih ke FormInput, disini aga lumayan ribet kode yang saya buat apalagi melihat desain form-nya memiliki pilihan hobi. Baris-baris kode dalam FormInput saya bagi dalam beberapa region seperti: Member, Private Methods, Button Events. Kita bahas satu per satu
• Region Members, disini dideklarasikan beberapa variabel yang nantinya berhubungan dengan pilihan hobi.

• Region Private Methods, region ini berisi method (Sub prosedur maupun Function prosedur), "kenapa harus dibuat method sendiri?? Kan bisa ditulis pas event button klik" mungkin itu pertanyaan yang ada di pikiran temen-temen, jawabnya "Yap bener banget kita bisa tulis kode itu waktu event button di klik, tapi gimana kalo ternyata kita mengulang fungsi yang sama beberapa kali?? Pasti kita akan menulis kode yang sama berulang-ulang, beda halnya jika dipisah menjadi method sendiri, kita hanya perlu memanggil method tersebut berulang-ulang sesuai kebutuhan, sehingga baris kode pun menjadi lebih rapi". Disini saya buat 2 method, CekHobi dan FillListView, CekHobi digunakan untuk mengetahui hobi apa saja yang dipilih user, sedangkan FillListView digunakan untuk mengisi ListView di FormDaftar.

• Region Button Events, disini kita tempatkan kode saat tombol simpan dan batal ditekan.

• Form_Load, disini kita hanya menentukan index ComboBox.

• Oke, Selesai sudah program ini. Bisa dijalankan dengan tombol F5

Read More

Splash screen part II

Bila di tutorial sebelumnya sudah dibahas splash screen menggunakan form dari vb.NET, sekarang kita coba buat splash screen sendiri. Caranya hampir sama dengan cara sebelumnya, cuman kali ini kita buat splash screen dari windows form. Dan pasti ada beberapa penyesuaian yang harus dilakukan agar splash screen custom ini dapat berjalan layaknya splash screen dari .NET. Oke daripada kelamaan, kita langsung buat :)

• Seperti biasa, buka visual studio dan buat satu project windows application. Secara otomatis akan ada satu form, kita tambah satu lagi untuk splash screen-nya dengan klik kanan WindowsApplication1 add windows form. Beri nama MySplash.

• Sekarang kita punya 2 form, Form1 dan MySplash. Kita atur properti form MySplash seperti berikut, FormBorderStyle:none, StartPosition: CenterScreen.

• Kenapa kita harus buat propertinya seperti itu?? kalo kita langsung pake MySplash jadi splash screen, pasti ada tombol minimize, maximize dan close sementara splash screen harus bebas dari kontrol-kontrol seperti itu. Juga munculnya di tengah-tengah layar monitor.
• Nah, disini kita punya form kosong, bisa tambahkan pictureBox untuk logo perusahaan, atau apapun terserah kalian :) Kalo desain saya seperti ini.

• Nah, cara panggilnya gimana?? kita klik ganda My Project, pada bagian bawah ada pilihan splash screen, kita pilih MySplash. 

• Sampai disini kita sudah bisa cek jalannya aplikasi dengan menekan tombol F5.

Read More

Splash screen

Splash screen, dari namanya kita dapat mengambil kesimpulan splash screen itu tampilan yang hanya muncul sesaat. Dan memang tampilan ini hanya muncul beberapa detik saja, contoh yang paling sering kita jumpai saat membuka ms.Word. Nah kali ini akan dibahas cara buat splash screen di visual basic .NET. Kita dapat menggunakan splash screen yang sudah disediakan .NET maupun splash screen buatan kita sendiri, langsung aja pembahasannya daripada kelamaan :)

• Buka visual studio, buat satu project Windows Application. Desain form1 terserah sesuai selera :p
• Nah, kalo dijalanin, form1 tadi langsung muncul kan?? Kita klik kanan WindowsApplication1 trus add new item, cari splash screen, beri nama trus klik OK.

• Nah, tampilan yang muncul adalah splash screen yang nantinya akan digunakan, kita bisa ubah teksnya sesuai aplikasi yang kita buat. Setelah ini, klik ganda My Project di bagian bawah, ada pilihan splash screen, disini kita pilih form mana yang akan dijadikan splash screen aplikasi kita.

• Oke, jalankan dengan menekan tombol F5.. Walaaa splash screen sudah muncul :) 
• Cara buat splash screen custom ada di tutorial berikutnya :)

Read More

Kalkulator sederhana dengan vb.net

Kali ini share tentang pemrograman ahh biar keliatan kalo mahasiswa TI, hahahaha....
bingung mau bikin TA mulai darimana, yaudah lah bikin tulisan aja :)
Kalkulator, simpel sih kan cuma tombol 0-9, tombol operator, sama tombol sama dengan aja... Tapi setelah dipraktekin, kok agak ribet juga yak???
Langsung aja dibahas gimana sih cara buat kalkulator sederhana dengan vb .NET...

• Buka visual studio, buat project baru Windows App. Buat desain seperti berikut

• Simpelkan??ya iyalah, namanya aja sederhana, hahahaha.... Sekarang kita masuk ke coding, daripada menulis kode berulang-ulang, kita buat satu sub yang berfungsi menangani proses hitung yang dipanggil saat tombol operator diklik.

• Nah, cara panggilnya gimana??

• Jalankan dengan menekan tombol F5 di keyboard, selesai sudah kalkulator sederhana ini :)

Tapi kok kayaknya kalkulator ini mengecewakan ya??hahaha.... Kenapa kita ga buat kalkulator yang lebih manusiawi (bc. user friendly)?? Kita buat satu form lagi, kita buat desain seperti gambar berikut.

Nah, kalo yang ini kan lebih enak dilihat, hehehe... Trus codingnya gimana??Tunggu di tutorial selanjutnya :)

Read More

Membuat komentar ala facebook di blog

Setelah lama ga posting, akhirnya hari ini dipaksain posting, biar blognya ga sepi kayak kuburan :p
Kali ini share cara merubah tampilan komentar yang biasanya ada di bagian bawah posting blog. Bisa dibilang komentar di blog tampilannya mungkin kurang menarik atau bahkan sangat tidak menarik bagi beberapa orang (termasuk saya :p ). Kita juga harus memasukkan alamat email bila ingin memberi komentar, kadang hal ini membuat kita malas berkomentar karena harus mengisi inilah itulah dan sebagainya. 
Lain halnya jika blog kita memiliki kotak komentar yang simpel dan mudah digunakan, facebook menyediakan fasilitas untuk ini. Mereka juga memudahkan kita menambahkan kotak komentar ala facebook diblog, langsung aja kita bahas langkah-langkahnya...

• Pertama, kita login dulu ke facebook, kemudian buka http://developers.facebook.com/setup untuk membuat aplikasi.
• Akan muncul jendela baru yang meminta kita memberi nama aplikasi. Isikan aja sesuai selera :)

• Kemudian isikan detail aplikasi temen-temen, contact email, app domains, dan site url blog temen-temen.Jangan lupa copy app id ke notepad.

• Sampai disini kita selesai berurusan dengan facebook, lanjut login ke blogger. Masuk ke menu rancangan->edit html klik "expand template widget"

• Paste code berikut setelah tag <head> 

<meta content='YOUR_FACEBOOK_APPLICATION_ID' property='fb:app_id'/>

• Temen-temen ubah  YOUR_FACEBOOK_APPLICATION_ID dengan app id yang dicopy sebelumnya.
• Setelah itu tekan ctrl+f di browser cari kode berikut

'post-footer-line post-footer-line-3'

• Tambahkan kode berikut tepat dibawahnya.

<b:if cond='data:blog.pageType ==
&quot;item&quot;'>
<div id='fb-root'/>
<script>(function(d){
var js, id = &#39;facebook-jssdk&#39;;
if (d.getElementById(id)) {return;}
js =
d.createElement(&#39;script&#39;); js.id = id; js.async = true;
js.src =
&quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));</script>
<fb:comments colorscheme='light'
expr:href='data:post.canonicalUrl' expr:title='data:post.title'
expr:xid='data:post.id' width='450'/>
</b:if>

• Yang terakhir, tambahkan kode berikut setelah tag <html

xmlns:fb="https://www.facebook.com/2008/fbml"

Oke, selesai sudah tutorial kali ini. Temen-temen bisa save template trus preview deh...

Oh iya, setelah saya coba-coba lagi, berhasil atau tidaknya tergantung dengan template yang digunakan..

Read More