Membuat Program Penjualan Dengan Visual Basic 6.0 (Tutorial – Bagian 3 – Perancangan Form Data Master Barang)
Sesudah kita sedikit “mengutak-atik” Form Utama (frmUtama) pada tutorial sebelumnya, sekarang kita akan mulai membuat form Data Master Barang. Pertama-tama, tambahkan sebuah form pada Project Penjualan yang sudah kita buat. Caranya adalah dengan mengklik menu Project pada menubar Visual Basic 6.0,
dan dilanjutkan dengan memilih “Add Form”, pada submenu yang ada.![]()
Setelah itu, akan muncul sebuah kotak dialog “Add Form”.
Pilih “Form” , dan klik tombol “Open”, untuk menambah sebuah form kosong pada Project kita.
Form ini akan menjadi form Data Master Barang kita. Jadi, kita akan ubah dulu property-nya. Adapun property yang diubah adalah sebagai berikut:
|
No. |
Nama Property |
Nilai Awal |
Ubah Menjadi |
|
1. |
Name |
Form1 |
frmBarang |
|
2. |
BorderStyle |
2 – Sizeable | 1 – Fixed Single |
|
3. |
Caption | Form1 | Data Master Barang |
| 4. | StartUpPosition | 3 – WIndows Default | 2 – Center Screen |
Sudah tahu kan caranya? Belum? Ah! Masa sudah lupa. Ya sudah, kalau begitu, beralihlah pada jendela properties, yang berada di sebelah kanan dari IDE Visual Basic 6.0. ini.
Carilah item-item property yang akan diubah nilainya, dan ubah nilainya menjadi seperti tabel di atas.
Setelah selesai, pada form kosong tersebut, tambahkan beberapa kontrol (dari toolbox) sebagai berikut:
Caranya adalah dengan mengklik icon-icon sesuai tabel di atas, dan “melukisnya” di dalam form Data Master Barang tadi (drag).
Tampilan awalnya, kira-kira akan menjadi seperti di bawah ini:
Lho, kok di bagian bawah tombol-tombol (CommandButton) itu ada bagian yang kosong? Iya, karena di situ akan kita tambahkan sebuah kontrol DataBoundGrid, untuk menampilkan data-data Master Barang yang nantinya akan diinput atau dimasukkan. Namun karena secara default, Visual Basic belum menambahkannya ke dalam Toolbox yang ada, maka kita harus menambahkannya secara manual. Caranya adalah dengan mengklik menu Project,
dan pilih “Components… Ctrl+T” pada submenu yang muncul.
Pada kotak dialog “Components” yang muncul, carilah kontrol “Microsoft Data Bound Grid Control 5.0 (SP3)”, kemudian kliklah checkbox di sebelah kirinya, klik tombol “Apply”, lalu klik juga tombol “OK”.
Setelah itu, terlihat bahwa toolbox kita sudah bertambah satu kontrol lagi, yaitu kontrol DBGrid. Iconnya seperti ini:
Nah, kontrol tersebut akan kita tambahkan pada form tadi. Caranya sama dengan kontrol-kontrol yang lain, yaitu dengan cara mengklik icon kontrol DBGrid, kemudian menggambarnya di atas form, tepat di bawah deretan tombol yang sudah ada sebelumnya. Tampilannya akan menjadi seperti berikut ini:
Sudah? Belum dong. Kita masih harus mengubah property-nya. Tapi sebelum itu (hampir lupa), tambahkan dulu kontrol Data dari Toolbox VB6. Iconnya seperti ini:
.
Tampilannya akan menjadi seperti berikut ini:
Selanjutnya ubah dulu property “Name” dari kontrol Data ini, menjadi datBarang, dan property Caption menjadi kosong (tidak usah diisi). Kemudian, masih pada jendela property, kliklah icon
.
Kemudian, pada kotak dialog DatabaseName yang muncul, pilihlah database Penjualan yang sebelumnya sudah kita buat.
Lalu, kembali pada jendela property, turunkan kursor mouse Anda ke arah bawah, dan ubah property RecordSource-nya menjadi Barang (Anda dapat memilihnya dari combobox yang tersedia).
Ingat, nilai-nilai atau nama-nama tabel yang ada pada combobox RecordSource itu hanya akan muncul, jika Anda sudah menambahkan database Penjualan, pada kontrol Data, seperti langkah di atas.
Nah, karena kita sudah memilih tabel Barang pada kontrol Data, selanjutnya kita akan mengkaitkannya dengan tombol DBGrid atau DataBoundGrid yang sebelumnya juga sudah kita tambahkan. Caranya, klik kontrol DBGrid tersebut, kemudian pada item DataSource, pilihlah datBarang dari daftar yang ada.
Sehingga tampilannya akan menjadi seperti ini:
Selanjutnya, pada kontrol DBGrid yang ada pada Form, lakukan klik kanan, dan pada popup menu yang muncul, pilihlah Retrieve Fields.
Tampilannya akan menjadi seperti ini:
Terlihat di situ bahwa field Kode_Barang, Nama_Barang dan field Harga sudah ditambahkan atau muncul pada DBGrid tadi. Nah, sebelum lupa, ubah juga property Name dari DBGRid ini, dari DBGrid1 menjadi dbgBarang.
Langkah selanjutnya adalah menuliskan kode program atau script, agar kontrol-kontrol yang kita tambahkan tadi, bisa berfungsi dan form ini juga dapat digunakan sebagai Form Data Master Barang.
Kita akan membahasnya pada tutorial berikutnya, yaitu Membuat Program Penjualan Dengan Visual Basic 6.0 (Tutorial – Bagian 4 – Penulisan Script Pada Form Data Master Barang). Jadi, mohon bersabar ya. Orang sabar itu disayang Tuhan lho, hehehe. ![]()
Membuat Program Penjualan Dengan Visual Basic 6.0 (Tutorial – Bagian 3 – Perancangan Form)
Bikin database sudah, sekarang waktunya perancangan form. Dulu, waktu pertama kali belajar (sampe sekarang juga masih sih
) bikin program pakai Visual Basic, bagian ini yang jadi favorit saya: perancangan form
. Langsung saja ya. Setelah kita sebelumnya kita membuat database dengan aplikasi VisData, dan menutup aplikasi tersebut, maka kita akan dikembalikan pada layar IDE (Integrated Development Editor) Visual Basic 6.0.
Kita sudah punya satu form di situ, yaitu frmUtama. Sesuai dengan namanya, form ini akan kita jadikan sebagai form utama. Maksudnya, melalui form inilah, kita akan dapat memanggil form-form lainnya yang nanti akan kita buat. Sebagai awal, kita akan menempatkan satu set menu pada form ini. Untuk itu, klik icon ke tiga pada toolbox IDE Visual Basic. Icon apa itu? Jelas icon Menu Editor dong, hehe.
Nah, setelah Anda mengklik icon “Menu Editor” tersebut, maka akan tampil kotak dialog Menu Editor (ya iyalah
).
Langsung ya. Pada kotak isian “Caption:”, isilah dengan “&Master”, lalu pada kotak isian “Name:”, isi dengan “mnuMaster”. Setelah itu, tekan tombol Enter, atau bisa juga mengklik tombol “Next” pada layar kotak dialog menu editor ini.
Setelah kotak isian “Caption:” dan “Name:” kosong kembali, klik-lah tombol panah kanan yang berada di bagian tengah kiri dari kotak dialog menu editor ini.
Setelah itu, terlihat adanya 4 (empat) titik pada menulist di bawah. Itu artinya, menu yang kita buat selanjutnya, akan menjadi submenu. Karena kita akan membuat menu Barang, maka itu artinya menu Barang tersebut akan menjadi submenu atau bagian dari menu Master. Jelas ya? Ok, langsung saja kalau begitu. Pada kolom Caption, isilah dengan &Barang, dan pada kolom Name, isilah dengan mnuBarang, lalu tekan tombol Enter pada keyboard Anda, atau bisa juga dengan mengklik tombol Next pada kotak dialog Menu Editor ini.
Selanjutnya, karena kita akan kembali membuat menu (bukan submenu) untuk Transaksi, maka kita harus mengembalikan posisinya seperti semula dulu. Untuk itu, klik tombol panah kiri (left-arrow) pada kotak dialog Menu Editor ini.
Setelah itu, pada kolom Caption, isilah dengan &Transaksi, dan pada kolom Name, isilah dengan mnuTransaksi, lalu tekan tombol Enter pada keyboard Anda, atau bisa juga dengan mengklik tombol Next pada kotak dialog Menu Editor ini.
Setelah itu, karena kita akan membuat submenu Penjualan, maka klik lagi tombol panah kanan (right-arrow) pada jendela Menu Editor ini.
Sudah? Nah, pada kolom Caption, isilah dengan &Penjualan, dan pada kolom Name, isilah dengan mnuPenjualan, lalu tekan tombol Enter pada keyboard Anda, atau bisa juga dengan mengklik tombol Next pada kotak dialog Menu Editor ini.
Selanjutnya, lagi-lagi kita harus mengembalikan posisi menu ke semula, karena kita akan membuat menu, dan bukan submenu. Jadi, klik lagi tombol panah kiri (left-arrow) pada jendela Menu Editor ini.
Kemudian pada kolom Caption, isilah dengan &Laporan, dan pada kolom Name, isilah dengan mnuLaporan, lalu tekan tombol Enter pada keyboard Anda, atau bisa juga dengan mengklik tombol Next pada kotak dialog Menu Editor ini.
Setelah itu, karena kita akan membuat submenu Laporan Penjualan Harian, Laporan Penjualan Mingguan dan Laporan Penjualan Bulanan, maka klik lagi tombol panah kanan (right-arrow) pada jendela Menu Editor ini.
Jika sudah, maka pada kolom Caption, isilah dengan &Laporan Penjualan Harian, dan pada kolom Name, isilah dengan mnuLaporanPenjualanHarian, lalu tekan tombol Enter pada keyboard Anda, atau bisa juga dengan mengklik tombol Next pada kotak dialog Menu Editor ini.
Selanjutnya, pada kolom Caption, isilah dengan &Laporan Penjualan Mingguan, dan pada kolom Name, isilah dengan mnuLaporanPenjualanMingguan, lalu tekan tombol Enter pada keyboard Anda, atau bisa juga dengan mengklik tombol Next pada kotak dialog Menu Editor ini.
Kemudian, lagi pada kolom Caption, isilah dengan &Laporan Penjualan Bulanan, dan pada kolom Name, isilah dengan mnuLaporanPenjualanBulanan, lalu tekan tombol Enter pada keyboard Anda, atau bisa juga dengan mengklik tombol Next pada kotak dialog Menu Editor ini.
Dan, karena kita akan membuat menu utama lagi (menu yang bukan submenu, maksudnya), maka kita harus mengembalikan posisi pointer menu kita ke posisi awal.
Jika sudah, pada kolom Caption, isilah dengan &Keluar, dan pada kolom Name, isilah dengan mnuKeluar, lalu tekan tombol Enter pada keyboard Anda, atau bisa juga dengan mengklik tombol Next pada kotak dialog Menu Editor ini.
Sudah? Ya memang hanya itu menu yang akan kita buat, hehe. Tampilan untuk menu yang lengkap adalah sebagai berikut:
Selanjutnya tentu saja, Anda bisa mengklik tombol “OK” pada jendela Menu Editor ini. Dan setelah itu, kita akan dikembalikan pada layar utama dari IDE Visual Basic 6.0. ini. Terlihat di situ bahwa frmUtama sudah berisi menu.
Menu-menu tersebut masih dalam kondisi kosong. Maksudnya, kita belum akan mentautkan atau menghubungkannya dengan form-form lain, karena form-form lain tersebut memang belum kita buat
.
Langkah selanjutnya adalah… menyimpan dulu pekerjaan kita! Jadi, klik icon “Save Project” pada toolbar IDE Visual Basic 6.0. kita. Kemudian apa lagi? Selanjutnya, kita akan membuat form Data Master Barang, yang akan kita namai frmBarang. Tapi itu akan kita lakukan pada tutorial selanjutnya, yaitu Membuat Program Penjualan Dengan Visual Basic 6.0 (Tutorial – Bagian 3 – Perancangan Form Data Master Barang).
Membuat Program Penjualan Dengan Visual Basic 6.0 (Tutorial – Bagian 2 – Membuat Database)”.
Setelah kita melakukan “persiapan” pada Membuat Program Penjualan Dengan Visual Basic 6.0 (Tutorial – Bagian 1), sekarang kita akan membuat database untuk program tersebut. Langsung saja, pada layar IDE Visual Basic 6.0, klik menu “Add-Ins”, dan pilih submenu “Visual Data Manager”.
Sesaat kemudian akan muncul halaman Visual Data Manager alias VisData.
Di sinilah kita akan membuat database dan seluruh tabel-tabel yang diperlukan. Sekarang, kliklah menu “File”, kemudian pilih submenu “New”, lalu pilih “Microsoft Acces”, dan pilih lagi “Version 7.0 MDB…”.
Akan ada kotak dialog yang muncul, yang akan menanyakan di mana kita akan menyuimpan database ini. Pindahkan lokasi ke folder yang tadi kita buat, yaitu pada folder “c:\Penjualan”, kemudian isikan “Penjualan” (tanpa tanda kutip) pada kotak isian “File name:” yang ada, dan klik tombol “Save”.
dan kita akan dikembalikan pada halaman awal VisData. Bedanya dengan yang tadi adalah bahwa sekarang sudah ada dua jendela yang tersedia, yaitu jendela “Database Windows” di sebelah kiri dan jendela “SQL Statement” di sebelah kanan.
Database sudah terbentuk, namun tabel-tabel yang diperlukan belum ada. Jadi hal selanjutnya yang harus kita lakukan adalah membuat tabel-tabel tersebut, yaitu:
-
Tabel Master Barang
-
Tabel Transaksi Penjualan
-
Tabel Transaksi Penjualan Detail
-
Tabel Temporar
Adapun detail dari masing-masing tabel tersebut adalah sebagai berikut:
1. Tabel Master Barang
| No. | Nama Field | Jenis | Panjang | Keterangan |
| 1. | Kode_Barang | Text | 5 | Primary Index |
| 2. | Nama_Barang | Text | 30 | |
| 3. | Harga | Double |
2. Tabel Transaksi Penjualan
| No. | Nama Field | Jenis | Panjang | Keterangan |
| 1. | No_Faktur | Text | 10 | Primary Index |
| 2. | Tanggal | Date/Time | ||
| 3. | Keterangan | Text | 30 |
3. Tabel Transaksi Penjualan_Detail
| No. | Nama Field | Jenis | Panjang | Keterangan |
| 1. | No_Faktur | Text | 10 | |
| 2. | Kode_Barang | Text | 5 | |
| 3. | Jumlah | Single |
4. Tabel Temporar
| No. | Nama Field | Jenis | Panjang | Keterangan |
| 1. | Kode_Barang | Text | 5 | |
| 2. | Nama_Barang | Text | 30 | |
| 3. | Jumlah | Single |
Sekarang, kita akan mulai membuat tabel pertama, yaitu tabel master Barang. Sudah tahu kan struktur tabelnya? Nah, coba klik kanan pada jendela “Database Window”, lalu pada popup menu yang muncul, pilihlah “New Table”.
Setelah itu akan tampil kotak dialog Table Structure. Di sini kita akan mulai menambahkan field-field yang diperlukan.
Jadi, kliklah tombol “Add Field”, sehingga akan muncul kotak dialog “Add Field”.
Pada kotak isian “Name:”, isilah dengan “Kode_Barang” (tanpa tanda kutip ya), lalu pada combobox “Type:”, pilih “Text”. Secara default, combobox tersebut akan tersorot pada pilihan “Text”, jadi Anda bisa saja langsung mengisikan ukuran field-nya, pada kotak isian “Size:”. Isikan dengan angka “5” (juga tanpa tanda kutip
). Setelah itu, Anda dapat mengklik tombol “OK”, untuk menambahkan field tersebut pada struktur yang akan kita buat.
Langkah selanjutnya, tentu saja adalah dengan cara menambahkan field-field lain seperti field Nama_Barang dan Harga. Perhatikan ukurannya ya. Dan, untuk field Harga, jangan lupa untuk memilih type field-nya dengan “Double”, sesuai dengan struktur yang ada di atas.
Jika ketiga field tersebut sudah dimasukkan, yaitu Kode_Barang, Nama_Barang, dan Harga, silahkan klik tombol Close untuk menutup kotak dialog ini, dan kembali pada kotak dialog sebelumnya, yaitu Table Structure.
Di situ terlihat bahwa field-field yang tadi kita tambahkan, sudah ada pada daftar. Lalu, apakah tabelnya sudah jadi? Belum, saudara-saudara. Kita harus membentuknya secara fisik. Jadi, silahkan klik tombol “Build the Table”. Setelah itu, klik-lah tombol “Close”, untuk menutup kotak dialog ini dan kembali ke jendela Database Window.
Terlihat di situ, sudah ada tabel Barang yang tadi kita buat. Selanjutnya, buatlah tabel-tabel berikutnya, yaitu tabel Penjualan, tabel Penjualan_Detail dan tabel Temporar. Caranya? Ah! Pasti Anda sudah tahu dong. Kan tinggal mengulangi langkah-langkah di atas. Tidak sulit kok, dan bila sudah terbiasa, akan merupakan pekerjaan yang menyenangkan bagi Anda
. Nantinya, kalau sudah lengkap, jendela “Database Window” akan tampil seperti tampilan di bawah ini:
Selanjutnya, kita akan mulai membuat form-form yang diperlukan. Jadi, tutuplah aplikasi VisData alias Visual Data Manager ini, dan kita akan bertemu lagi pada tutorial selanjutnya, yaitu Membuat Program Penjualan Dengan Visual Basic 6.0 (Tutorial – Bagian 3 – Perancangan Form)”.