Minggu, 17 Juni 2012

Mengenal kontrol Datagrid

Windows aplikasi, dari namanya saja sudah jelas jika aplikasi ini berbasis window atau jendela (memiliki tampilan visual atau user interface), sebenarnya kita dapat menampilkan data melalui textbox, namun hal ini sangat tidak menarik apalagi bila data yang ditampilkan jumlahnya tidak sedikit. Hal ini akan membuat kita kesulitan dalam menanganinya, namun visual studio menyediakan beberapa kontrol yang dapat digunakan untuk menanganinya. Ada ListView, ListBox, DataGridView, TreeView, RichTextBox, dan sebagainya. Nah kali ini PEPES mau bahas tentang DataGridView, penggunaan DataGridView terbilang mudah, bahkan bila menampilkan data yang diambil dari database. Oke, langsung pembahasannya :)
  • Buka Visual studio, buat satu project Windows Application. Tambahkan satu kontrol DataGridView
  • Sampai disini kita akan diberi tampilan sederhana dari DataGridView, trus isi data-nya gimana?? Kita buat kasus seperti ini: Kita tampilkan data mahasiswa, berupa No urut, NIM, Nama, Alamat, Jenis kelamin. Nah dari sini kita buat kolom-kolomnya, karena pada dasarnya DataGridView memiliki tampilan hampir sama dengan ms.Access
  • Klik kontrol DataGrid-nya, klik lagi tanda panah kecil di pojok kanan atas maka muncul pilihan menu, kita pilih add column.
  • Akan muncul satu jendela baru, disini kita masukkan name, type, dan header text. Name untuk memberi nama kolom, type menentukan tipe kolom, sedangkan header text adalah teks yang muncul di dalam DataGridView-nya.
  • Setelah kita atur name, type dan header text, klik Add. Ulangi langkah ini sampai semua kolom selesai ditambahkan lalu klik Close. Nah, tampilan sudah selesai, sekarang kita akan tampilkan data mahasiswa ke DataGridView tadi.
  • Kita akan buat DataGrid ini terisi data saat form pertama kali dijalankan, klik ganda pada area kosong form, lalu kerikkan kode berikut.
  • Kode diatas menentukan jumlah baris yang akan ditambahkan, kemudian untuk isi datanya kita ketik kode berikut.
  • Oke, bila dijalankan maka data yang diisikan tadi akan langsung muncul. Namun, tampilannya masih sedikit membosankan kita bisa ubah sedikit. Klik kontrol DataGridView di tab properties cari AlternatingRowDefaultCellStyle klik tombol disebelah kanan-nya.
  • Akan muncul satu jendela baru, ganti backColor sesuai selera klik OK. Selesai sudah, temen-temen bisa jalankan dengan menekan tombol F5.

Cara ini masih sangat sederhana, kita dapat mengisi datanya dari kelas maupun database di tutorial berikutnya :)

Jumat, 08 Juni 2012

Array 2 dimensi

Oke, kalo di posting sebelumnya kita udah bahas array 1 dimensi, kali ini kita belajar array 2 dimensi. Pada dasarnya sih sama aja antara array 1 dimensi maupun array 2 dimensi. Sebelumnya kita deklarasikan array dengan cara "dim nama as string()" baru kita lakukan redim sebanyak yang kita inginkan..


Sebelumnya mungkin temen-temen bilang kok printscreen ya kenapa ga nulis kodenya aja biar cepet kan bisa kopi paste. Ada beberapa alasan yang temen-temen PEPES dulu sepakati ketika membuat blog ini, yang juga merupakan tujuan penggunaan gambar (printscreen), diantaranya:

  • Kejelasan, sedikit membingungkan bila kode yang ditulis di visual basic di-paste-kan langsung ke blog, meskipun sebenarnya bisa dibuat tampilan berbeda.
  • Menghindari copy-paste, meskipun pada akhirnya kode yang ditulis sama persis dengan apa yang ada di blog PEPES, yang penting temen-temen mengerti apa yang temen-temen tulis (ga asal copas dan jadi).

Oke, itu sekedar intermezo aja, kita lanjut ke deklarasi array 2 dimensi yang sedikit berbeda, seperti gambar berikut:
Coba diperhatiin, adakah yang berbeda?? yap, ada tanda koma di dalam kurung, fungsinya buat apa nih?? Teorinya hampir sama dengan matriks, temen-temen pasti udah akrab dengan matriks kan?? Bicara soal matriks ada ordo, ordo 2x2, ordo 3x2, dan sebagainya. Begitu pula array 2 dimensi, matriks ordo 2x2 bisa diasumsikan dengan "angka(2,2)". Ini cuma perasaan saya atau memang ini penjelasan yang membingungkan ya??hahaha
Dari pada tambah pusing, kita Learning by doing aja yuk :)

  • Buka visual Studio, buat satu project console application kemudian ketikkan kode berikut.
  • Dari potongan kode diatas, bisa kita ambil kesimpulan kita akan membuat matrik ordo 3x3. Okay, daripada membuat suatu aplikasi yang statis dan tidak manusiawi, karena tidak ada interaksi user. Kita akan membuat aplikasi ini meminta user memasukkan nilainya sendiri, berikut kodenya.
  • Kodenya cukup membingungkan?? Tunggu dulu, masih ada tambahan yang lebih membingungkan,hehehe.. Tambahkan kode berikut.
Oke, kita udah selesai dengan urusan mengetik baris-baris kode. Sekarang penjelasannya dulu biar ga pusing.
  • Deklarasi variabel sepertinya tidak ada masalah, pasti semua sudah paham kan??hehe
  • Langsung aja ke baris 11, perulangan dalam perulangan. variabel i (pertama) digunakan untuk menentukan baris, sedangkan variabel a (kedua) digunakan untuk menentukan kolom.
  • Penjelasan yang sama berlaku untuk kode baris ke 19.
Kalo aplikasinya kaya gini, hanya bisa menampilkan matriks dengan ordo 2x2. Kita ubah kodenya sedikit sehingga user bisa menentukan sendiri ordonya.
Bila dijalankan, akan tampil seperti berikut. Oke, sampai disini tutorial kali ini sampai jumpa di tutorial selanjutnya :)

Kamis, 07 Juni 2012

Mengenal array

Array, mungkin materi ini sangat membingungkan dan membuat frustasi di mata kuliah algoritma pemrograman, nah kali ini PEPES mau bahas array, simpel aja biar temen-temen paham tentang array yang sangat diperlukan kalo menyangkut pemrograman.

Array adalah tipe data yang mampu menyimpan beberapa nilai sekaligus tanpa harus mendeklarasikan banyak variabel. Walaupun sebenarnya ada array satu dimensi, dua dimensi, dan seterusnya, kita bahas satu per satu dulu biar ga tambah pusing dan bingung. Kita mulai dengan array satu dimensi.

Mungkin kita langsung aja ke hands on lab. Buka visual studio, buat satu project console application, di module1 kita tulis kode seperti berikut (klik untuk melihat gambar)

Apabila kita jalankan, akan menghasilkan nama seperti gambar berikut:

Muncul satu pertanyaan, kok cuma "ani", trus "adi"-nya kemana?? nilai "adi" sudah diganti oleh "ani" (baris ke 9). Trus gimana caranya biar namanya tetap "adi" dan "ani"?? Kita ubah sedikit kode diatas, seperti gambar berikut:

Nah, sekarang akan dijelaskan maksud kode diatas. 
  • Baris 5, tanda kurung () menandakan bahwa variabel merupakan array
  • ReDim nama(2), menentukan jumlah array dalam tanda kurung ()
  • nama(0) merupakan nilai variabel nama pertama (baris 9)
  • nama(1) merupakan nilai variabel nama kedua (baris 10), kita tau kan index di visual basic .NET dimulai dari angka 0.
  • Saat kita tampilkan, kita juga harus menuliskan index mana yang akan kita tampilkan misal "console.writeline("Nama: " & nama(0))" ini berarti kita menampilkan nama pertama ke console.
  • "Console.ReadKey" berfungsi untuk menahan console agar tidak langsung menutup.
Oke, sampai disini mungkin tidak ada masalah karena masih gampang... Kita buat satu contoh kasus yang sedikit lebih rumit. Misalkan data nilai siswa, dimana input user berupa nama, nilai 1, nilai 2, nilai 3. Cara buatnya sebagai berikut:

  • Buat satu module lagi dengan cara klik kanan console application->add->module
  • Tuliskan kode berikut
  • Jalankan dengan menekan tombol F5


Nah, ini sedikit lebih rumit tapi masih terlalu sederhana dan tidak efisien dalam penggunaan kode. Kenapa kok gitu?? Coba lihat baris 15-20 dan baris 26-28, kita menuliskan kode input nilai berulang-ulang. Sekarang kita coba sederhanakan lagi dengan menggunakan perulangan. Ubah kode diatas menjadi seperti berikut:
Temen-temen bisa cek baris 15-18 dan baris 24-26, lebih sederhana kan?? Berikut penjelasan singkatnya:
  • Baris ke 15, kode "For i As Integer" digunakan untuk melakukan perulangan (tentunya bisa menggunakan Do, tapi tidak dibahas kali ini). 
  • Setelah "For i As Integer", diikuti "= 0 To 2" digunakan untuk membatasi proses perulangan (dalam kasus ini hanya dibutuhkan 3kali perulangan).
  • Kemudian baris ke 16 ada "Console.Write("Nilai {0}: ", i + 1)" digunakan untuk meminta user memasukkan nilai vaiabel nilai yang pertama.
  • Baris ke 17, "nilai(i) = Console.ReadLine" digunakan untuk menyimpaninput user ke variabel nilai yang pertama.
  • Baris ke 25, "Console.WriteLine("Nilai {0}: {1}", i + 1, nilai(i))" digunakan untuk menampilkan nilai sesuai dengan indexnya.
Apabila temen-tmen masih bingung tentang penggunaan for dan array, bisa dicek satu per satu kodenya dengan menekan F10 atau F11 hingga selesai sambil cek isi masing-masing variabel..
Kemudian untuk pembahasan array dua dimensi, tunggu posting selanjutnya ya :)

Rabu, 23 Mei 2012

Membuat media player sederhana

Setelah lama vakum posting di blog akhirnya hari ini posting juga, hehehe...
Oke, kali ini PEPES mau share gimana sih membuat media player sendiri.. Dengan memanfaatkan player bawaan Windows, kita bisa membuat aplikasi yang dapat memainkan file multimedia seperti video atau sekedar lagu.. WMP atau Windows Media Player, adalah aplikasi player multimedia bawaan windows yang akan kita manfaatkan dalam tutorial hari ini. Sebenarnya kita bisa menggunakan player dari pihak ketiga, namun harus diinstal terlebih dahulu di komputer yang teman-teman gunakan, lain halnya jika kita menggunakan WMP yang memang sudah ada dalam Windows. Kayaknya langsung aja kita mulai pembahasannya...
  • Buka Visual studio, lalu buat project baru Windows Application, kita beri nama MyPlayer. Formnya kita ganti namanya menjadi Player.
  • Kemudian kita tambahkan WMP ke toolbox yang ada disebelah kiri dengan cara klik kanan->choose item. Saya sendiri lebih suka menambahkan player ini di tab General agar tidak bercampur dengan kontrol-kontrol yang disediakan Visual Studio.
  • Akan muncul satu jecdela baru, pilih tab COM Components, lalu cari Windows Media Player, beri tanda centang lalu klik OK.
  • Maka secara otomatis WMP akan ditambahkan ke toolbox kita.
  • Tambahkan WMP ke dalam form yang telah kita buat sebelumnya.
  • Lho kok tampilannya kecil banget yaa??? Ubah property Dock WMP menjadi Fill, maka WMP akan memenuhi seluruh form.
  • Sampai disini tampilan hampir selesai, tinggal bagaimana caranya kita memutar file videonya. Tapi tunggu sebentar, jika tampilan seperti ini trus pilih filenya gimana??? Yup, kita tambah kontrol MenuStrip ke dalam form hingga tampilan seperti berikut.
  • Beri satu tombol "Open file", tombol ini nantinya akan kita gunakan untuk memilih file yang akan diputar.
  • Sekarang kita masuk ke coding, bagian paling menyenangkan dari membuat program, hehehe.... Kita klik ganda "Open file" kemudian ketikkan code berikut.
  • Terus setelah kita pilih file kok ga terjadi apa-apa??? Memang, kita baru menampilkan jendela dialog untuk memilih file, dari code yang telah kita buat tadi kita ubah sedikit menjadi seperti berikut.
  • Sekarang silahkan jalankan aplikasi dengan menekan tombol F5 di keyboard. Selamat anda telah berhasil membuat player multimedia (walaupun menggunakan WMP, hehehehe)
Oke sampai disini dulu tutorialnya, temen-temen bisa kembangin lagi code diatas (karena memang codenya terlalu simpel, hehehe) bisa ditambah playlist dan sebagainya. Oh iya, karena player ini merupakan bawaan windows jadi codecnya ngikut juga :D
Sampai jumpa di tutorial selanjutnya...

Selasa, 08 November 2011

Menampilkan daftar gaji pegawai (TTS PBD)

Kali ini PEPES mau bahas tentang TTS PBD kemarin. Dimana output yang diminta berupa data yang diambil dari beberapa buah tabel yang telah dibuat sebelumnya. Pembuatan tabel tidak dibahas disini, namun hanya bagaimana kita mengambil data dari database sesuai yang diminta. Soal TTS temen-temen bisa download disini.
Oke, langsung aja ke pembahasan.
  • Pertama buat project seperti biasa lengkap dengan app.config dan kelas Utility. Ingat database yang digunakan adalah SBD. Beri tambahan reference system.configuration agar appSettings dapat dikenal di kelas Utility.
















  • Di dalam project DataAccess kita tambahkan satu kelas dengan nama ClassData dan ketikkan kode berikut.
















  • Sedangkan untuk interface kita buat 1 TextBox, 1 ComboBox, 1 DataGridView, 2 Button, dan 3 Label. Isi ComboBox dengan nama-nama bulan sehingga jadi seperti gambar berikut.












  • Beri nama TextBox = "TxtTahun", ComboBox = "CmbBulan", DataGridView = "DG1", Button = "BtnList" dan " BtnClose".
  • Kemudian saat button List diklik, tuliskan kode berikut agar daftar pegawai tampil di DataGridView






Oke, sampai disini dulu, sebenarnya masih banyak cara yang dapat digunakan untuk menyelesaikan soal ini dari cara yang paling simpel hingga cara yang rumit. Dan pembahasan kali ini merupakan cara yang sederhana mungkin nantinya akan diposting kembali penyelesaian dengan cara yang sedikit lebih rumit. Temen-temen bisa download solution-nya disini. Semoga bermanfaat...

Senin, 07 November 2011

Substring

Dari pertemuan PEPES hari Jumat kemarin kita sudah bahas mengenai substring. Substring sendiri digunakan untuk mengambil karakter tertentu dari suatu string. Misalkan kita akan mengambil kode program studi dari kombinasi NIM yang kita miliki, kita tidak perlu mengambil NIM secara keseluruhan, namun hanya perlu mengambil 2 karakter paling depan dari NIM untuk mengetahui program studinya.
Berikut contoh yang kita bahas pada Jumat 4 Nopember kemarin.
Suatu perusahaan pembuat pakaian olah raga akan membuat daftar hasil order bulan Agustus 2009. Sebagai data masukan adalah Kota pemesan, kode barang, jumlah barang dipesan.
Pemesan dari luar jakarta dikenakan ongkos kirim sebesar Rp 1500 per potong, kecuali untuk pemesan kaos kaki ongkos kirimnya adalah Rp 1000 per potong.
Nama barang serta harga satuan disajikan dalam tabel di bawah :
Kode
Barang
Harga satuan
BTK
Blus Tenis Kuning
15000
BTP
Blus Tenis Pink
15000
CTK
Rok Tenis Kuning
17500
CTP
Rok Tenis Pink
17500
KKK
Kaos Kaki Kuning
2250
KKP
Kaos Kaki Pink
2250
TSM
T-Shirt Merah
12500
TSB
T-Shirt Biru
12500
Buat aplikasi dimana user memasukkan Kota pemesan, kode barang, jumlah barang dipesan. Sedangkan output dari aplikasi adalah Nama Barang, jumlah barang dipesan, ongkos kirim dan total bayar.

Dari soal diatas, kita dapat melihat suatu pola dalam pemberian kode barang. Dua huruf pertama dari kode barang merupakan jenis barang dan huruf terakhir kode barang merupakan warna barang. Jadi, soal ini akan kita selesaikan dengan menggunakan substring. 
  • Pertama kita buat Console appplication seperti biasa, dan deklarasikan cariabel yang diperlukan. Dan input Kota pemesan, kode barang, dan jumlah barang.


  • Cek kode barang untuk menentukan harga satuan, ongkos kirim, dan nama barang. Nama barang berdasar 2 huruf pertama dari kode barang.
  • karena nama barang telah ditentukan, sekarang kita tentukan warna barang berdasar huruf terakhir kode barang.
  • Disini, pemesan dari Jakarta tidak dikenakan ongkos kirim, jadi kita ubah ongkos kirim menjadi 0 apabila pemesan dari Jakarta.

  • yang terakhir kita hitung harga yang harus dibayar dan tampilkan output berupa informasi pemesanan seperti yang tertera di soal.
Oke, sampai disini dulu, sebenarnya banyak cara yang bisa digunakan untuk menyelesaikan soal ini namun kali ini dibahas seminimal mungkin dalam penulisan kode agar kode yang sama tidak ditulis berulang-ulang. Soal dan Solution-nya bisa didownload disini. Bila ada pertanyaan bisa langsung ditanyakan, semoga bermanfaat...

Sabtu, 22 Oktober 2011

Menampilkan daftar order di ListView

Halo temen-temen, PEPES mau bagi tutorial yang mungkin bisa bantu temen-temen dalam membuat aplikasi berbasis data. Aplikasi yang akan dibuat dalam pembahasan kali ini adalah mencari daftar order berdasar customer tertentu. Daftar customer akan ditampilkan melalui combobox dan bila kita memilih customer tertentu daftar ordernya akan ditampilkan melalui listview. Kira-kira hasilnya nanti akan seperti ini:
 
Langsung saja kita mulai pembahasannya, dengan mengikuti langkah-langkah berikut:
  • Buka Microsoft Visual Studio, klik File-New Project. Pada Project types kita pilih Other Project Types lalu Visual Studio Solutions. Kita beri nama project dan pilih lokasi penyimpanan filenya dan klik OK.
  •           Setelah kita buat solution-nya, kita klik kanan solution-nya pilih Add-New Project, pilih Windows Application kita beri nama PresentationTier lalu klik OK. Maka project PresentationTier akan otomatis ditambahkan.
  •           Kita akan tambahkan satu project lagi berupa Class Library yang nantinya akan digunakan untuk mengambil data dari database. Klik File-Add-New Project, pilih Class Library dan beri nama DataAccess dan klik OK.
  •           Kemudian kita tambahkan satu item pada project PresentationTier dengan cara klik kanan PresentationTier pilih Add-New Item cari Application Configuration File lalu klik OK. Kita akan meletakkan koneksi string disini, sebelum tag kita tuliskan tag berikut:
    Baris perintah diatas merupakan koneksi string yang dibutuhkan saat akan mengakses database, kenapa kita harus buat di Application Configuration File? Hal ini dilakukan agar memudahkan kita saat database yang digunakan berpindah tempat, sehingga kita hanya mengganti datasource-nya saja, dan juga kita tidak perlu menuliskan perintah data source dan bla bla bla di setiap perintah pengambilan data dari database.

  • Kemudian untuk mengakses Application Configuration File tersebut kita akan buat satu kelas dalam Project DataAccess dengan cara klik kanan Project DataAccess pilih Add- Class dan kita beri nama Utilitydan klik Add. Kemudian kita membutuhkan referensi untuk mengaksesnya. Kita tambahkan referensi dengan klik kanan Project DataAccess pilih Add Reference, dalam tab .NET cari System.Configuration lalu klik OK.
  •           Di kelas Utility yang telah dibuat tadi, tuliskan perintah berikut:


    Perintah ("DBConn") diatas disesuaikan dengan Key yang ada dalam Appication Configuration File yang sebelumnya telah kita buat. Jadi nanyinya saat kita membutuhkan koneksi string ke database kita hanya tinggal memanggil function koneksi di kelas Utility.

  • Kemudian kita juga akan tambahkan dua kelas ke dalam Project DataAccess, CustomerClass dan OrderClass yang masing-masing akan menangani pengambilan data dari database. Dengan cara sama seperti sebelumnya kita klik kanan Projet DataAccess pilih Add-Class dan beri nama masing-masing CustomerClass dan OrderClass. Dalam kedua kelas inilah kita menuliskan perintah untuk mengambil data seperti berikut:   
          Dalam kelas CustomerClass tuliskan perintah berikut:
  
           Dalam kelas OrderClass tuliskan perintah berikut:

  • Oke, kita telah selesai membuat kelas dalam DataAccess, sekarang kita akan buat form di dalam Project PresentationTier, kita buat layout seperti berikut:

  • Control yang ditambahkan berupa Label, ComboBox, Button, dan ListView. Properti yang ditentukan sebagai berikut:
    -Properti ComboBox: NameCmbPelanggan
    -Properti Button: Name BtnCari
    -Properti ListView: Name ListViewOrder; View Details; Column Order Id, Employee name, Order   date, Ship via; FullRowSelect True; GridLines True
  • Kita tambah referensi di PresentationTier dengan klik kanan Project PresentationTier pilih Add Reference, pada tab Projects pilih DataAccess dan klik OK. Kemudian saat form load kita akan mengisi ComboBox dengan perintah berikut:

     
  • Saat kita menekan tombol cari, daftar order pelanggan yang terpilih di comboBox harusnya ditampilkan di ListViewOrder, berarti kita harus mengisi ListViewOrder saat event BtnCari diklik. Klik ganda pada BtnCari dan tuliskan perintah berikut:

Perintah  If Not IsDBNull(dt.Rows(i).Item(0)) Then digunakan untuk memastikan bahwa baris tersebut tidak kosong (null).

  
  • Oke , sekarang kita akan jalankan program ini. Saat pertama dijalankan daftar pelanggan akan muncul di ComboBox.
  • Setelah kita klik tombol Cari, maka daftar order dari pelanggan di ComboBox akan muncul

Oke, sampai disini dulu, kalau gambarnya terpotong bisa dibuka di tab baru biar lebih jelas. Temen-temen bisa kembangin lagi kode program diatas dengan menambahkan Private Sub untuk mengisi ComboBox maupun ListView sehingga dapat dipanggil berulang-ulang dan secara otomatis mengurangi baris kode yang ditulis…

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | SharePoint Demo