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:

 

No.	Nama Kontrol Yg Ditambahkan	Icon	Nama Semula	Ubah Menjadi	Caption /Text Semula	Ubah Menjadi
1.	Label		Label1	lblKodeBarang	Label1	Kode Barang
2.	Textbox		Text1	txtKodeBarang	Text1	-
3.	Label		Label1	lblNamaBarang	Label1	Nama Barang
4.	Textbox		Text1	txtNamaBarang	Text1	-
5.	CommandButton		Command1	cmdTambah	Command1	Tambah
6.	CommandButton		Command1	cmdEdit	Command1	Edit
7.	CommandButton		Command1	cmdBatal	Command1	Batal
8.	CommandButton		Command1	cmdHapus	Command1	Hapus
9.	CommandButton		Command1	cmdSelesai	Command1	Selesai

 

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:  

Toolbox semula	Menjadi

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).