Home > Visual Basic > Objek TreeView sebagai alternatif membuat menu

Objek TreeView sebagai alternatif membuat menu

January 18, 2010

Pada postingan sebelumnya saya sudah membahas bagaimana membuat menu alternatif menggunakan komponen VBSmartMenu XP dan kali ini kita akan membahas bagaimana membuat menu menggunakan objek TreeView.

Objek TreeView digunakan untuk menampilkan data dalam bentuk Hirarki sehingga sangat cocok untuk menampilkan menu dalam jumlah banyak.

Pada pembahasan ini saya hanya membatasi untuk menampilkan menu 2 tingkat yaitu level 1 (menu induk) dan level 2 (menu anak), kedua menu tersebut akan disimpan didatabase Access dengan nama tabel MENU_INDUK dan MENU_ANAK.

Berikut adalah contoh rancangan tabelnya :

Gambar struktur tabel

Gambar relasi tabel

Contoh data

Untuk project VB sendiri kita akan tambahkan komponen (CTRL + T) Microsoft Windows Common Control 6.0 (SP6) kemudian tinggal drag komponen TreeView.

Oke jika semua data sudah siap tambahkan sebuah modul dan copy paste kode berikut :

Option Explicit

Public conn    As ADODB.Connection
Public strSql  As String

Public Function KonekToServer() As Boolean
    Dim strConn As String

    On Error GoTo errHandle

    strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source= " & App.Path & "\database.mdb"

    Set conn = New ADODB.Connection
    conn.ConnectionString = strConn
    conn.Open

    KonekToServer = True

    Exit Function

errHandle:
    KonekToServer = False
End Function

Public Function openRecordset(ByVal query As String) As ADODB.Recordset
    Dim obj As ADODB.Recordset

    Set obj = New ADODB.Recordset
    obj.CursorLocation = adUseClient
    obj.Open query, conn, adOpenForwardOnly, adLockReadOnly
    Set openRecordset = obj
End Function

Public Sub closeRecordset(ByVal vRs As ADODB.Recordset)
    If Not (vRs Is Nothing) Then
        If vRs.State = adStateOpen Then vRs.Close
    End If

    Set vRs = Nothing
End Sub

Public Function getRecordCount(ByVal vRs As ADODB.Recordset) As Long
    vRs.MoveLast
    getRecordCount = vRs.RecordCount
    vRs.MoveFirst
End Function

Adapun contoh prosedur untuk menambahkan data ke TreeView adalah sebagai berikut :

Private Sub addMenu()
    Dim rsMenuInduk As ADODB.Recordset
    Dim rsMenuAnak  As ADODB.Recordset

    Dim root        As Node
    Dim i           As Long
    Dim x           As Long
    Dim rowCount(1) As Long

    mnuTree.Nodes.Clear
    With mnuTree.Nodes
        'menampilkan menu induk
        strSql = "SELECT id, menu_name, menu_caption " & _
                 "FROM menu_induk " & _
                 "ORDER BY id"
        Set rsMenuInduk = openRecordset(strSql)
        If Not rsMenuInduk.EOF Then
            rowCount(0) = getRecordCount(rsMenuInduk)

            For i = 1 To rowCount(0)
                Set root = .Add(, , rsMenuInduk("menu_name").Value, rsMenuInduk("menu_caption").Value)
                root.Bold = True

                'menampilkan menu anak
                strSql = "SELECT menu_name, menu_caption " & _
                         "FROM menu_anak " & _
                         "WHERE menu_induk_id = " & rsMenuInduk("id").Value & " " & _
                         "ORDER BY id"
                Set rsMenuAnak = openRecordset(strSql)
                If Not rsMenuAnak.EOF Then
                    rowCount(1) = getRecordCount(rsMenuAnak)

                    For x = 1 To rowCount(1)
                        .Add root, tvwChild, rsMenuAnak("menu_name").Value, rsMenuAnak("menu_caption").Value

                        rsMenuAnak.MoveNext
                    Next x
                End If
                Call closeRecordset(rsMenuAnak)

                rsMenuInduk.MoveNext
            Next i
        End If
        Call closeRecordset(rsMenuInduk)
    End With

    For i = 1 To mnuTree.Nodes.Count
        mnuTree.Nodes(i).Expanded = True
    Next
End Sub

Kemudian kita tinggal panggil di event Form_Load

Private Sub Form_Load()
    Dim ret As Boolean

    ret = KonekToServer

    'inisialisasi treeview
    With mnuTree
        .Style = tvwTreelinesPlusMinusText
        .LineStyle = tvwRootLines
        .Indentation = 300.47
    End With

    Call addMenu
End Sub

Kode untuk menghandle menu mana yang diklik :

Private Sub mnuTree_DblClick()
    If mnuTree.Nodes(mnuTree.SelectedItem.Index).Children = 0 Then 'menu anak
        Select Case mnuTree.SelectedItem.Key
            Case "mnuBarang": 'TODO : tampilkan frmBarang disini
            Case "mnuCustomer"
            Case "mnuSupplier"
            Case "mnuPembelian"
            Case "mnuReturPembelian"
            Case "mnuPenjualan"
            Case "mnuBiayaOperasional"
            Case "mnuGajiKaryawan"
            Case "mnuLapPembelian"
            Case "mnuLapJthTempo"
            Case "mnuLapPenjualan"
        End Select
    End If
End Sub

Contoh output program :


Source code lengkap bisa didownload disini. Selamat mencoba🙂

  1. March 1, 2010 at 12:38 pm

    Aplikasi yang bagus, jadi menu bisa dinamis ya?

  2. March 1, 2010 at 12:56 pm

    Iya mas pake komponen VBSmartMenu XP juga bisa dibuat dinamis

  3. March 5, 2010 at 2:50 pm

    Kakak kalau tanpa database bisa ga yah….

  4. March 5, 2010 at 10:19 pm

    Eka Riana :

    Kakak kalau tanpa database bisa ga yah….

    ya jelas bisa, seperti ini aja :

    Private Sub Command1_Click()
        Dim root        As Node
        Dim i           As Long
        
        mnuTree.Nodes.Clear
        With mnuTree.Nodes
            '>> MENU MASTER + SUBNYA
            Set root = .Add(, , "mnuMaster", "Master")
            root.Bold = True
            .Add root, tvwChild, "mnuBarang", "Barang"
            .Add root, tvwChild, "mnuCustomer", "Customer"
            .Add root, tvwChild, "mnuSupplier", "Supplier"
            
            '>> MENU TRANSAKSI + SUBNYA
            Set root = .Add(, , "mnuTransaksi", "Transaksi")
            root.Bold = True
            .Add root, tvwChild, "mnuBeli", "Pembelian"
            .Add root, tvwChild, "mnuReturPembelian", "Retur Pembelian"
            .Add root, tvwChild, "mnuReturPenjualan", "Retur Penjualan"
            
            'TODO : MENU-MENU LAINNYA
        End With
    
        For i = 1 To mnuTree.Nodes.Count
            mnuTree.Nodes(i).Expanded = True
        Next
    End Sub
    

    Selamat mencoba🙂

  5. April 20, 2010 at 4:14 pm

    ijin nyoba pak

  6. April 20, 2010 at 10:08 pm

    ekaperintis :

    ijin nyoba pak

    Oke om eka silahkan🙂

  7. bernard
    April 27, 2010 at 6:42 am

    Trus gimana untuk menampilkan form table disamping treeview menu tersebut……Konkritnya saya akan menggunakan treeview menu trus disampingnya untuk menampilkan form utama yang merupakanb tabel data tertentu……gimana caranya?

  8. April 27, 2010 at 7:18 am

    bernard :

    Trus gimana untuk menampilkan form table disamping treeview menu tersebut……Konkritnya saya akan menggunakan treeview menu trus disampingnya untuk menampilkan form utama yang merupakanb tabel data tertentu……gimana caranya?

    Buat Aplikasinya model MDI Form, di Form utama (MDI) letakkan 1 objek picturebox kemudian atur alignmentnya terserah mau kiri atw kanan dan terakhir objek treeviewnya diletakkan di dalam objek picturebox (picturebox sebagai container).

    Selamat mencoba🙂

  9. August 23, 2010 at 6:17 am

    mas..saya mau tanya nih..
    saya sedang buat aplikasi sistem pakar pakai vb n mysql..
    ingin menggunakan treeview..
    biar bisa isi tree tsb bisa dimanipulasi data..

    • August 23, 2010 at 10:59 pm

      Kayaxnya sample diatas sudah cukup memberikan dasar untuk penggunaan treeview lebih lanjut.

  10. ferdy
    October 30, 2010 at 3:11 am

    mas admin kalo ada menu anak yg kedua gmn caranya nempatkan nodenya…contohnya di menu transaksi ada menu anak bank…trus saya mau buat lagi menu anak kedua dr bank tsb ada bank bca,bri dan lain sbgnya….tolong mas…tq

    • October 30, 2010 at 3:51 am

      Mau buat Chart of Account ya?, contoh menu diatas memang baru support untuk 2 level. Sy akan kasih contoh untuk menambah menu di level berikutnya, tapi masih manual dan akan lebih baik jika masnya bisa mengembangkan dengan menggunakan metode recursive.

      Kita akan revisi sedikit prosedure addMenu diatas, tambahkan variabel baru dengan nama root2

      Dim root2 As Node
      

      Kemudian di perulangan untuk menambahkan menu anak direvisi menjadi berikut :

      For x = 1 To rowCount(1)
          Set root2 = .Add(root, tvwChild, rsMenuAnak("menu_name").Value, rsMenuAnak("menu_caption").Value)
          
          If rsMenuAnak("menu_name").Value = "mnuGajiKaryawan" Then 'penambahan sub menunya disini
              .Add root2, tvwChild, "mnuGajiKaryawanTetap", "Karyawan Tetap"
              .Add root2, tvwChild, "mnuGajiKaryawanKontrak", "Karyawan Kontrak"
          End If
          
          rsMenuAnak.MoveNext
      Next x
      

      revisi diatas menambahkan menu Karyawan Tetap dan Karyawan Kontrak di bawah menu gaji karyawan.

      Lihat gambar.

      Selamat mencoba🙂

  11. ferdy
    October 30, 2010 at 4:08 am

    Ilmu yang bermanfaat…. thanks mas….akan saya coba

    • October 30, 2010 at 5:48 am

      Oke, sama2x

  12. iwan
    February 21, 2011 at 12:06 pm

    MAs Gimana Kalo ingin menampilkan Direktori list pada Treefiew…??
    seperti di antivirus smad*v ,,yang pas mau pilih direktory scannya…??/

    • February 23, 2011 at 7:55 am

      Coba ini om.

  13. urip widodo
    August 8, 2011 at 4:10 pm

    bisa gak ya tree view ditambah check box di sebelahnya ?
    dari urip widodo trims..

    • August 9, 2011 at 1:21 am

      Maksudnya gini ya om ?

  14. October 26, 2011 at 3:27 pm

    Kalo disebelah kirinya gambar yang berbeda antara menu utama dan menu anaknya bagaimana yach master?
    Terima kasih

    • October 28, 2011 at 2:34 am

      Bisa menggunakan ImageList om untuk menyimpan iconya, jadi ada 2 ImageList. ImageList untuk menyimpan icon menu induk dan menu anak.

      Untuk mengakses icon yg ada di ImageList menggunakan index mulai dari index 1 sampai n.
      Nah nilai indexnya langsung disimpan aja di tabel MENU_INDEX dan MENU_ANAK misal dengan menambahkan field INDEX_ICON.

      Contoh pemanggilan dengan menambahkan icon :

      Set root = .Add(, , rsMenuInduk("menu_name").Value, rsMenuInduk("menu_caption").Value, rsMenuInduk("index_icon").Value)
      
      • August 11, 2013 at 4:20 pm

        Saya sudah lakukan apa yang disarankan oleh agan, tetapi masih kedapatan error.
        Kira-kira kurang dimananya ya?
        Tolong pencerahannya dong gan.

  15. uchy
    December 7, 2011 at 5:04 pm

    maaf om.. saya kesulitan utk input node2 baru.. gmn caranya utk insert,update,delete node2nya om..

    terima kaasih byk sebelumnya..🙂🙂

    • December 9, 2011 at 3:29 pm

      Kesulitannya dimana ? error atw gimana ?

  16. muhammadraiz
    March 11, 2012 at 11:05 pm

    gimana cara masukan kode di nodenya… mohon jawabannya… trims

    • March 12, 2012 at 3:46 pm

      Diataskan udah ada om, sample utk menghandle node yg diklik

  17. muhammadraiz
    March 13, 2012 at 12:11 am

    sy kan menggunakan yang tanpa database… maksud sy bagaimana cara ketika mengklik salah satu childnya otomatis membuka sebuah form… contohnya ketika sy klik child barang otomatis form barang….

    mohon penjelasannya….

    • March 14, 2012 at 9:13 am
      Private Sub mnuTree_DblClick()
          If mnuTree.Nodes(mnuTree.SelectedItem.Index).Children = 0 Then 'menu anak
              Select Case mnuTree.SelectedItem.Key
                  Case "mnuBarang": 'TODO : tampilkan frmBarang disini
                  Case "mnuCustomer"
                  Case "mnuSupplier"
                  Case "mnuPembelian"
                  Case "mnuReturPembelian"
                  Case "mnuPenjualan"
                  Case "mnuBiayaOperasional"
                  Case "mnuGajiKaryawan"
                  Case "mnuLapPembelian"
                  Case "mnuLapJthTempo"
                  Case "mnuLapPenjualan"
              End Select
          End If
      End Sub
      
      • Timtim Sukmawan
        January 4, 2013 at 7:43 am

        Ini yang saya cari,ijin nyoba ya pak.

        • January 4, 2013 at 8:48 am

          Oke silahkan🙂

  18. April 13, 2012 at 10:24 am

    Makasih Atas Penjelasannya mas.

    • April 13, 2012 at 3:34 pm

      Sama2x om🙂

  19. pita
    June 28, 2012 at 8:09 am

    saya kan memakai database mysql ko error gtu ya ,, katanya “the connection cannot be used to perform this operation. it is either closed or invalid in this context” koneksi tidak dapat digunakan untuk melakukan operasi ini itu gimana ya solusinya

    dan salahnya di script ini
    Public Function openRecordset(ByVal query As String) As ADODB.Recordset
    Dim obj As ADODB.Recordset
    Set obj = New ADODB.Recordset
    obj.CursorLocation = adUseClient
    obj.Open query, db, adOpenForwardOnly, adLockReadOnly
    Set openRecordset = obj
    End Function

    mohon bantuanya ya🙂

    • June 28, 2012 at 3:43 pm

      Pastikan dulu koneksi kedatabasenya sudah berhasil, klo belum ya otomatis fungsi openRecordset diatas akan error.

  20. January 18, 2013 at 11:54 pm

    alhamdulillah akhirnya dapet referensinya juga, thanks

    • January 19, 2013 at 4:10 pm

      Sippp, senang bisa membantu om🙂

  21. April 30, 2014 at 11:59 am

    Gan saya coba pake tree yang tanpa database
    Private Sub Command1_Click()
    Dim root As Node
    Dim i As Long

    mnuTree.Nodes.Clear
    With mnuTree.Nodes
    ‘>> MENU MASTER + SUBNYA
    Set root = .Add(, , “mnuMaster”, “Master”)
    root.Bold = True
    .Add root, tvwChild, “mnuBarang”, “Barang”
    .Add root, tvwChild, “mnuCustomer”, “Customer”
    .Add root, tvwChild, “mnuSupplier”, “Supplier”

    ‘>> MENU TRANSAKSI + SUBNYA
    Set root = .Add(, , “mnuTransaksi”, “Transaksi”)
    root.Bold = True
    .Add root, tvwChild, “mnuBeli”, “Pembelian”
    .Add root, tvwChild, “mnuReturPembelian”, “Retur Pembelian”
    .Add root, tvwChild, “mnuReturPenjualan”, “Retur Penjualan”

    ‘TODO : MENU-MENU LAINNYA
    End With

    For i = 1 To mnuTree.Nodes.Count
    mnuTree.Nodes(i).Expanded = True
    Next
    End Sub

    cara agar pas saya klik barang load form1.show gmn gan apa yg harus di tambah trims

  1. April 16, 2014 at 9:12 am
Comments are closed.
%d bloggers like this: