Get Adobe Flash player

postheadericon 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,

01 - Menubar VBdan dilanjutkan dengan memilih “Add Form”, pada submenu yang ada.02 - Sub Menu Project

Setelah itu, akan muncul sebuah kotak dialog “Add Form”.

03 - Add FormPilih “Form” , dan klik tombol “Open”, untuk menambah sebuah form kosong pada Project kita.

04 - Blank FormForm 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.

05 - Jendela Property

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 Icon Label Label1 lblKodeBarang Label1 Kode Barang
2. Textbox Icon Textbox Text1 txtKodeBarang Text1 -
3. Label Icon Label Label1 lblNamaBarang Label1 Nama Barang
4. Textbox Icon Textbox Text1 txtNamaBarang Text1 -
5. CommandButton Icon CommandButton Command1 cmdTambah Command1 Tambah
6. CommandButton Icon CommandButton Command1 cmdEdit Command1 Edit
7. CommandButton Icon CommandButton Command1 cmdBatal Command1 Batal
8. CommandButton Icon CommandButton Command1 cmdHapus Command1 Hapus
9. CommandButton Icon 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).

08 - Toolbox

Tampilan awalnya, kira-kira akan menjadi seperti di bawah ini:

06 - Form Barang (Belum Lengkap)

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,

01 - Menubar VBdan pilih “Components… Ctrl+T” pada submenu yang muncul.

07 - Sub Menu Project (tambah Component)

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

09 - Components ListSetelah itu, terlihat bahwa toolbox kita sudah bertambah satu kontrol lagi, yaitu kontrol DBGrid. Iconnya seperti ini: Icon DataBoundGrid 

Toolbox semula

Menjadi

08 - Toolbox 10 - Toolbox2

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:

11 - Form Barang 2Sudah? Belum dong. Kita masih harus mengubah property-nya. Tapi sebelum itu (hampir lupa), tambahkan dulu kontrol Data dari Toolbox VB6. Iconnya seperti ini: Icon Data .

 

Tampilannya akan menjadi seperti berikut ini:

12 - Form Barang 3

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 Icon Browse.

13 - Property DatabaseName

 

Kemudian, pada kotak dialog DatabaseName yang muncul, pilihlah database Penjualan yang sebelumnya sudah kita buat.

14 - Pilih Penjualan.mdb dari daftar

 

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

15 - Pilih RecordSource BarangIngat, 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.

16 - Pilih datBarang Untuk Kontrol DBGrid Sehingga tampilannya akan menjadi seperti ini:

17 - datBarang Sudah Terpilih

Selanjutnya, pada kontrol DBGrid yang ada pada Form, lakukan klik kanan, dan pada popup menu yang muncul, pilihlah Retrieve Fields.

18 - Klik Kanan Di DBGrid 

Tampilannya akan menjadi seperti ini:

19 - Form Barang 4

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

postheadericon 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 smile_tongue) bikin program pakai Visual Basic, bagian ini yang jadi favorit saya: perancangan form smile_teeth. 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.

19 - Project Saved

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.

01 - Toolbar VB

Nah, setelah Anda mengklik icon “Menu Editor” tersebut, maka akan tampil kotak dialog Menu Editor (ya iyalah smile_wink).

02 - Menu Editor 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.

03 - Menu Editor - mnuMaster 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.

04b - Menu Editor - Right Arrow 04 - Menu Editor - Right Arrow

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.

05 - Menu Editor - mnuBarang 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.

04b - Menu Editor - Right Arrow 06 - Menu Editor - Left Arrow

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.

07 - Menu Editor - mnuTransaksi Setelah itu, karena kita akan membuat submenu Penjualan, maka klik lagi tombol panah kanan (right-arrow) pada jendela Menu Editor ini.

04b - Menu Editor - Right Arrow 04 - Menu Editor - Right Arrow

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.

08 - Menu Editor - mnuPenjualan

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.

04b - Menu Editor - Right Arrow 06 - Menu Editor - Left Arrow

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.

09 - Menu Editor - mnuLaporan

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.

04b - Menu Editor - Right Arrow 04 - Menu Editor - Right Arrow

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.

10 - Menu Editor - mnuLaporanPenjualanHarianSelanjutnya, 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.

11 - Menu Editor - mnuLaporanPenjualanMingguanKemudian, 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.

04b - Menu Editor - Right Arrow 06 - Menu Editor - Left Arrow

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.

13 - Menu Editor - mnuKeluarSudah? Ya memang hanya itu menu yang akan kita buat, hehe. Tampilan untuk menu yang lengkap adalah sebagai berikut:

14 - Menu Editor - Lengkap

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.

15 - frmUtama Dengan MenuMenu-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 smile_teeth.

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

postheadericon 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”.

01 - Sub Menu Add-Ins

Sesaat kemudian akan muncul halaman Visual Data Manager alias VisData.

02 - Layar 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…”.

03 - Menu Create DB

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

04 - SaveDB

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.

05 - Lauar VisData 2

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

06 - New Table

Setelah itu akan tampil kotak dialog Table Structure. Di sini kita akan mulai menambahkan field-field yang diperlukan.

07 - CreateTable Dialog

Jadi, kliklah tombol “Add Field”, sehingga akan muncul kotak dialog “Add Field”.

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

09 - Table Structure - Barang 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.

10 - Database Window - Sudah Ada Tabel Barang

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 smile_wink. Nantinya, kalau sudah lengkap, jendela “Database Window” akan tampil seperti tampilan di bawah ini:

11 - Database Window - LengkapSelanjutnya, 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)”.

September 2010
S M T W T F S
« Aug    
 1234
567891011
12131415161718
19202122232425
2627282930  
Archives
Categories
Submit Link to Allinks Directory - Friendly quality web links directory. Web sites organized by category. Links exchange.