CARA CEPAT MAHIR VB 6.0 DAN DATABASE [bagian 3]

[Zainal Abidin, A.Md.Kom]

Bersama : Zainal Abidin, A.Md.Kom.
LISTVIEW
Pada bagian 3 ini akan dijelaskan bagaimana cara menampilkan data di form dan kelihatan menarik. Pada bagian 1 dan 2 diberikan contoh bagaimana menampilkan data yang ada di database dengan menggunakan media DataGrid, tentunya kita masih ingat dengan contoh ini :

Jika table tersebut diisi data sebanyak 5 baris (record) maka gambarnya akan kelihatan seperti berikut :

Kemudian bedakan dengan gambar berikut dan bandingkan mana yang lebih indah :

Tentu anda akan mengatakan bahwa yang dibawah lebih indah dan menarik dari pada yang diatas, begitulah otak kita mengatakannya. Tentunya ketertarikan yang kita rasakan harus dibarengi dengan adanya cara dan tips untuk merasakan keindahan tersebut, karena sadar atau tidak otak kita telah memerintahkan untuk sesegera mungkin mengetahui bagaimana cara membuatnya.
Baiklah langsung saja kita pada tahap yang akan membahas tentang bagaimana cara dan langkah demi langkah membuat tampilan yang menarik seperti itu.
A. KOMPONEN YANG DIBUTUHKAN
Tentunya untuk membuat tampilan yang lebih menarik seperti contoh diatas harus menambahkan satu komponen lagi yang masih belum diaktifkan yaitu Microsoft Windows Common Controls 6.0 dengan langkah sebagai berikut :
1. Dari menu project
2. Pilih component atau Ctrl + T
3. Tampil kotak dialog components
4. Ceklist kotak Microsoft Windows Common Controls 6.0
5. Ok
Perhatikan gambar berikut :

Dan hasilnya akan muncul di toolbox seperti gambar berikut :
yang diambil adalah listview yaitu :
B. CARA MEMBUATNYA
Cara membuatnya sangat gampang sekali tinggal Anda menambahkan fungsi API untuk listview tersebut sehingga data yang ditampilkan pada listview akan ditandai dengan warna perbaris pada setiap jarak satu baris, seperti yang terlihat pada contoh diatas.
Namun hal ini akan membingungkan bagi pemula, tapi jangan hawatir disini saya akan mengupasnya mulai dari awal secara gamblang dan saya jamin Anda bisa menguasainya.
Ada beberapa ketentuan yang dibutuhkan untuk menampilkan data table ke dalam listview yaitu header, dan record.
1. Menambahkan Header Melalui Properti
Header adalah wakil dari field yang ada pada table sedangkan record adalah isi dari setiap field. Untuk menambahkan header dalam listview tidak semudah menambahkan header dalam DataGrid, jika dalam DataGrid kita bisa langsung memanggilnya dari table yang bersangkutan maka semua fieldnya akan ditampilkan, namun dalam listview kita harus mengesetnya satu persatu yaitu :
a. Tambahkan listview pada form
b. Klik kanan listview  properties
c. Pada tab general  view = lvwReport  labelEdit = lvwManual  ceklist gridline
d. Klik tab column headers
e. Klik tombol insert column
f. Tambahkan kolomnya sesuai kebutuhan (NIS, NAMA, ALAMAT, NO_TELP)

Anda bisa mengatur lebar kolomnya di width
g. OK
h. Jalankan programnya, dan hasilnya seperti berikut :

Namun hal ini akan mengalami kerepotan ketika ingin diisi data dari record, kita harus bolak balik masuk pada properti listview untuk mengetahui dimana tempat record tersebut harus dimasukkan. Sebab setiap header yang mewakili field berupa nilai index bukan berupa text, misalkan gambar diatas untuk header NIS berada pada index 0, NAMA berana pada index 1, dan begitu seterusnya. Oleh sebab itulah jalan keluar satu-satunya adalah membuat header listview dari code program.
2. Menambahkan Header Melalui Code Program
a. Tambahkan lisview pada form (jika belum ada)
b. Klik dua kali form atau masuk pada code form_load, perhatikan gambar berikut :

c. Isikan code berikut di dalan form_load tersebut :

Dim ch As ColumnHeader
Set ch = ListView1.ColumnHeaders.Add(, , "NIS", 700)
Set ch = ListView1.ColumnHeaders.Add(, , "NAMA", 1700, vbLeftJustify)
Set ch = ListView1.ColumnHeaders.Add(, , "ALAMAT", 2000, vbLeftJustify)
Set ch = ListView1.ColumnHeaders.Add(, , "NO TELP", 1500, vbLeftJustify)
ListView1.FullRowSelect = True
ListView1.View = lvwReport
ListView1.GridLines = True

Hasilnya seperti gambar berikut :

Jika program dijalankan hasilnya sebagai berikut :

C. MENAMPILKAN DATA KE DALAM LISTVIEW
Disini kita akan gunakan metode adodb dan bahasa SQL untuk menampilkan data yang ada ditabel ke dalam listview. Namun sebelumnya perlu diketahui dahulu bahwa record dari field yang pertama harus dibedakan dengan record dari field selanjutnya. Langkahnya sebagai berikut :
1. Buatkan private sub untuk menampilkan listview
Hal ini sebenarnya bisa dilakukan di form_load namun agar code program lebih terstruktur dan rapi maka buatlah private sub pada code general. Bentuk codenya sebagai berikut :

Private Sub TampilLV()

End Sub

2. Buka table yang berada di database dengan code berikut :

bukaDB
rs.Open "select * from t_siswa", koneksi

3. Bersihkan isi listview agar ketika record bertambah tidak muncul record yang sama. Codenya sebagai berikut :

ListView1.ListItems.Clear

4. Cek record yang berada dalam table, Jika tabelnya kosong (tidak ada record) maka rocord yang ada di table tidak perlu ditampilkan, namun jika recordnya ada datanya maka record ditampilkan ke listview. Kodenya sebagai berikut :

If rs.RecordCount > 0 Then
...................
End if

5. Lakukan terus secara berulang-ulang selama recordnya masih ada. Masukkan code berikut ke dalam IF :

Do While Not rs.EOF
Set Lst = ListView1.ListItems.Add(, , rs!nis)
With Lst
.SubItems(1) = rs!nama
.SubItems(2) = rs!alamat
.SubItems(3) = rs!no_telp
End With
rs.MoveNext
Loop

6. Tutup dan hapus dari memory databasenya dengan code berikut :

rs.Close
Set rs = Nothing

7. Panggil private TampilLV di form_load, lihat code berikut :

Private Sub Form_Load()
Call LV
Call TampilLV
End Sub

Atau bisa ditulis seperti ini :

Private Sub Form_Load()
LV
TampilLV
End Sub

Agar lebih jelas code yang dituliskan dari awal tadi, silahkan perhatikan gambar dibawa ini :

8. Jalankan programnya maka hasilnya akan seperti gambar berikut :

D. MENAMBAHKAN NOMOR URUT DI LISTVIEW
Menambahkan nomor urut di listview digunakan untuk mengetahui banyaknya record yang ditampilkan di listview. Cara manambahkannya sebagai berikut :
1. Buatlah variable nomor dengan code berikut :

Dim nomor As Integer

2. Buatlah rumus penambahan nomor dengan code berikut :

nomor = nomor + 1

3. Masukkan variable dan rumus diatas kedalam perulangan. Untuk lebih jelasnya perhatikan gambar berikut :

E. MEMPERCANTIK TAMPILAN LISTVIEW
Untuk mempercantik tampilan listview harus mempunyai dasar pemrograman API yang memang dikenal untuk memperindah tampilan VB. Tapi jangan hawatir meskipun kita tidak mempunyai dasar semua itu “yah kayak saya lah pas-pasan…. Kwkwkwk”. Baiklah langsung saja copas code berikut :

Public Sub setBackColorListView(ByVal objList As ListView, ByVal objPic As PictureBox)
Dim i As Long
On Error Resume Next
objPic.BackColor = objList.BackColor
objPic.ScaleMode = vbTwips
objPic.BorderStyle = vbBSNone
objPic.AutoRedraw = True

objPic.Width = objList.Width
objPic.Height = objList.ListItems(1).Height * (objList.ListItems.Count)
objPic.ScaleHeight = objList.ListItems.Count
objPic.ScaleWidth = 1
objPic.DrawWidth = 1
objPic.Cls

For i = 1 To objList.ListItems.Count
If i Mod 2 = 0 Then
objPic.Line (0, i - 1)-(1, i), RGB(255, 255, 255), BF
Else
objPic.Line (0, i - 1)-(1, i), RGB(200, 200, 239), BF
End If
Next

objList.Picture = objPic.Image
End Sub

1. Setelah dicopy silahkan buat module baru dan paste code diatas kemudian simpan dengan nama modListView
2. Tambahkan picturebox di form dan atur visible menjadi false

3. Kemudian panggil isi dari module tadi di dalam private TampilLV dengan code berikut :

Call setBackColorListView(ListView1, Picture1)

Untuk lebih jelasnya perhatikan gambar berikut :

4. Gambar dibawah ini adalah hasilnya :

F. MENGURUTKAN DATA RECORD SESUAI NAMA FIELD
Ada dua macam pengurutan (sortir) data record yaitu ascending dan descending. Pengurutan ascending adalah pengurutan yang dimulai dari depan ke belakang, jika yang diurutkan berupa angka maka diurutkan dari angka terkercil sampai terbesar, dan jika berupa huruf maka diurutkan dari A sampai Z. yang kedua adalah pengurutan descending adalah pengurutan yang dimulai dari belakang ke depan jadi kebalikan dari yang pertama.
Dalam bahasa SQL sendiri disediakan code pengurutan namun metode ini hanya berlaku pada satu field saja bisa lebih namun perintahnya harus jelas dan biasanya seorang user diminta untuk mengurutkan sesuai kriteria yang diminta gambar ini adalah contohnya :

Tapi berbeda dengan metode disini, yakni kita akan mengurutkan sesuai dengan header (field) apa yang kita klik di listview. Misalkan kita mengklik header NIS maka data pada record akan diurutkan sesuai NIS secara berulang, maksudnya ketika pertama diklik NIS akan diurutkan menurut ascending kemudian diklik lagi maka NIS akan diurutkan menurut descending begitu seterusnya. Ide ini saya dapat ketika saya menggunakan program shollu. Perhatikan gambar berikut :

Gambar untuk pengurutan ascending

Gambar untuk pengurutan descending. Yang diurutkan adalah field Tipe.
Itu dalam program shollu, namun apakah hal tersebut bisa kita pelajari ? tentu saja programer shollu tidak akan memberikan program beserta sourcecode-nya secara gratis. Tapi jangan hawatir jika ada kemauan untuk belajar pasti semuanya tidak ada yang mustahil. Baiklah akan saya bongkar rahasia tersebut.
1. Klik dua kali pada listview
2. Gantilah procedure-nya menjadi ColumnClick
3. Copas code berikut kedalam ColumnClick tadi :

If ListView1.Sorted And ColumnHeader.Index - 1 = ListView1.SortKey Then
ListView1.SortOrder = 1 - ListView1.SortOrder
Else
ListView1.SortOrder = lvwAscending
ListView1.SortKey = ColumnHeader.Index - 1
End If
ListView1.Sorted = True

Untuk lebih jelasnya perhatikan gambar berikut :

Sampai disini dulu mudah-mudahan bermanfaat. Silahkan baca do’a yang saya berikan pada bagian 2….

file PDF silahkan unduh disini
file project silahkan unduh disini

Masalah yang disebabkan ketika mulai mengunduh adalah karena web ini disambungkan ke adf.ly yang mengakibatkan link yang dituju tidak dieksekusi langsung dan Anda tidak akan ditujukan pada file yang seharusnya disediakan untuk diunduh.
Jika hal tersebut menimpa Anda maka cara mengunduhnya adalah
1. klik kanan tulisan tulisan yang dilink
2. pilih copy link location

3. buka tab baru
4. paste pada addres bar

5. hapus tulisan http://adf.ly/246619/ yang berada sebelum http-nya media fire

6. enter
anda sudah siap mengunduh filenya.