Membuat User Interface form Pada Visual Basic (VB6)

Hi bloggers, salam blog buat kita semua
now, i will share for you about ......... My final Project
Semoga bisa membantu khususnya buat adik tingkat saya, karna ini tugas biasanya jadi tugas turun temurun :)

Lets, Chekidot

3.3 Membuat User Interface form

3.3.1 Mensimulasikan dan Membuat langkah – langkah dalam pembuatan Form

Pemrograman Visual Basic adalah suatu pemrograman visual, dimana pembuatan program dilakukan menggunakan media visual atau sering disebut dengan user-interface. Yang artinya bahwa pembuatan program berdasarkan tampilan yang dihasilkan program, dengan kode-kode program (Script) diletakkan masing-masing komponen.

Contoh 1:

Buat project baru dengan StandartEXE untuk membuat User Interface sederhana dengan melibatkan komponen Label, Textbox dan CommandButton yang ada di Toolbox pada sebelah kiri dari antar muka Visual Basic seperti gambar 1.1 dan gambar 1.2 berikut:

Gambar 1.1. Komponen yang digunakan

Gunakan komponen-komponen seperti pada gambar 1.1 untuk membuat form pada gambar 1.2. berikut:

Gambar 1.2 Tampilan latihan 1

Untuk mengatur letaknya tinggal menggunakan “drag & drop” dengan mouse. Program ini belum selesai karena masih perlu pengaturan property dan penambahan event pada masing-masing komponen untuk dapat memberikan tampilan yang dapat diterima oleh user dan dapat menjalankan proses.

a.       Mengatur Property

Property pada tampilan antar muka Visual Basic terletak di sebelah kanan, seperti gambar 1.3 berikut:

Gambar 1.3. Tampilan property

Pada contoh 1 di atas, komponen-komponen yang sudah digunakan adalah Label1, Label 2, Text1, Command1 dan Command2. Atur property masing-masing komponen tersebut sebagai berikut, sehingga menghasilkan tampilan seperti gambar 1.4.

Tabel 1.1. Pengaturan property contoh latihan 1

Hasil form setelah propertynya di atur adalah:

Gambar1.4. Hasil tampilan form contoh 1

Masing-masing komponen mempunyai property yang berbeda dan jumlahnya banyak, tetapi ada beberapa property yang sering digunakan pada setiap komponen, antara lain [Caption]. Property yang sering digunakan untuk Form antara lain:

• Name: menyatakan nama obyek form yang sangat berguna untuk memanggil dan menyimpan form.

• Caption: digunakan untuk memberikan title pada form.

• StartUpPosition: digunakan untuk meletakkan form ketika form tersebut dipanggil atau aktif. Ada empat pilihan yaitu: Manual, CenterOwner, CenterScreen, Windows Default,

b.      Event Dengan Kode Program

Pemrograman visual bersifat event-driver, yang artinya program bekerja berdasarkan event yang terjadi ketika suatu object diberikan aksi misalkan tombol ditekan, option dipilih, atau setelah mengetikkan sesuatu pada text kemudian di tekan [Enter]. Untuk membuat event ini tinggal click pada komponen dari tampilan user interface yang sudah dibuat.

Pada tampilan contoh 1, click pada form (bagian kosong yang tidak digunakan komponen-komponen lainnya), maka akan muncul tampilan seperti gambar berikut:

Gambar 1.5. Tampilan untuk kode program

Perhatikan gambar 1.5, ketika form di-click maka akan muncul event Load, ini disebabkan event default untuk form adalah load. Dan secara otomatis di bagian kode program sudah disediakan fungsi untuk event load pada form yang tertulis:

Private Sub Form_Load()

End Sub

Di dalam fungsi ini dituliskan kode program. Kode program ini dijalankan ketika form dipanggil. Event ini bisa diganti di bagian [Event], perhatikan bahwa event pada setiap komponen termasuk form jumlahnya banyak, tinggal dipilih sesuai kebutuhan aplikasi.

Pada tampilan contoh 2, click pada command1, sehingga muncul event pada bagian kode program sebagai berikut:

Private Sub Command1_Click()

End Sub

Tambahkan program pada kode program ini sehingga menjadi:

Private Sub Command1_Click()

Label2.Caption = Text1.Text

End Sub

Program ini berarti bahwa apa yang diketikkan pada text1 akan ditampilkan pada label2. Kemudian click pada command2, dan tambahkan kode program sehingga menjadi:

Private Sub Command2_Click()

End

End Sub

Perintah End, berarti program keluar dan selesai. Simpan form dan project ini dengan cara pilih menu [File] >> [Save Project], beri nama form misalnya dengan formLatihan1 dan nama project dengan projectLatihan1. Jalankan dengan menekan ikon Run ( ) pada toolbar. Masukkan nama misalnya “MAS ILHAM” pada text1, dan tekan tombol Ok. Hasilnya adalah seperti gambar berikut.

3.4 Mengetik Program atau Mengisi Kode

3.4.1  Mensimulasikan dan Bagaimana Membuat Pengetik Program atau Mengisi Kode Program

A. CARA PENULISAN KODE PROGRAMVISUAL BASIC 6

1. Pengertian Program

Aplikasi Visual Basic berisi komponen-komponen berupa objek. Setiap objek memiliki event atau kejadian dan metode atau aksi. Jika user memanipulasi suatu objek (misalnya mengklik, mengetik, meletakkan kursor, dan sebagainya), itu adalah event-event yang akan memicu metode yang terdapat di dalam objek tersebut. Metode yang sebenarnya adalah kode program itu sendiri akan menghasikan aksi tertentu pada aplikasi tersebut. Pada dasarnya, kode program adalah instruksi-instruksi yang ditulis oleh programmer yang memerintahkan aplikasi untuk melakukan tugas tertentu, seperti misalnya melakukan perhitungan, memanipulasi data, membuka atau menjalankan aktivitas tertentu, merespon input dari user, menghasilkan keluaran, dan sebagainya. Program pada Visual Basic berfungsi menyatukan kontrol-kontrol yang ada di dalam aplikasi.

Letak Kode Program Pada dasarnya, pemrograman pada Visual Basic relatif lebih mudah, tetapi dalam konsep modular programing kode-kode program diletakkan terpisah-pisah, sehingga inilah yang membuat para programer pemula agak bingung. Tidak seperti linear programming yang kode-kode programnya dituliskan di dalam satu tempat, pada modular programming kode-kode program letaknya tersebar, bergantung pada komponen - komponen aplikasi tersebut. Pada Visual Basic, kode-kode pemrograman biasanya diletakkan pada objek-objek
sebagai berikut.               

1. Objek Form
Biasanya kode-kode program ini adalah kode-kode inisialisasi yang akan dijalankan apabila Form tersebut di-load.

2. Kontrol
Kontrol dapat memiliki kode-kode programnya sendiri yang disebut dengan event procedure atau metode dari kontrol tersebut. Setiap kontrol tersebut memiliki event procedure lebih dari satu, dan di dalam setiap event procedure yang dibuat bisa membuat program-program yang berbeda-beda, bergantung pada tindakan apa yang harus dilakukan oleh kontrol tersebut.

3. Module standard
Ini adalah termasuk salah satu objek pada Visual Basic yang tidak tampak dan terpisah dari form, tetapi masih berada di dalam aplikasi. Modul standar berisi kode-kode program yang bersifat umum yang dapat dipanggil oleh objek apa saja yang membutuhkannya.

Cara Penulisan Kode Program Visual Basic 6
Bahasa Pemrograman Visual Basic 7
Cara Penulisan Program Penulisan event procedure. Kode program yang dijalankan oleh sebuah objek disebut dengan metode atau sering juga disebut dengan event procedure atau prosedur event. Prosedur event ini adalah kode-kode program yang dijalankan apabila event dari suatu objek (Kontrol) dipicu oleh user.
Prosedur event dimulai dengan kalimat Private Sub dan diakhiri dengan kalimat End Sub. Blok ini
membentuk awal dan akhir dari suatu prosedur event. Baris-baris di antara kedua kalimat inilah yang harus dilengkapi untuk membentuk suatu modul program dari prosedur event tersebut.
Cara penulisan event pun lebih mudah, pengguna tidak perlu menghapal semua event-event yang ada atau yang didukung oleh suatu kontrol. Visual Basic sudah menyediakan event-event tersebut pada suatu daftar yang tinggal anda pilih yang mana yang dibutuhkan. Klik pada kotak daftar nama event di sebelah kanan atas Jendela Code untuk menampilkan daftar event-event yang anda gunakan. Setiap kali dipilih salah satu event pada daftar tersebut, sacara otomatis akan dibuat sebuah kerangka program untuk event tersebut beserta kontrolnya
yang bersangkutan.

Pada hampir semua bahasa pemrograman terdapat sebuah perintah untuk menampilkan komentar pada program yang dibuat. Komentar atau remark ini tidak akan ikut proses saat aplikasi dijalankan, dan hanya berfungsi sebagai penjelas program yang dibuat.

Sintaks untuk menuliskan komentar (remark) bisa dilakukan dengan dua cara sebagai berikut:
1. Dengan pernyataan Rem.
Pernyataan ini hanya bisa diletakkan di bagian awal kalimat komentar. Semua kalimat yang terdapat dibelakanya tidak akan ikut diproses.
2. Dengan karakter apostrophe (‘).
Karakter ini bisa diletakkan di awal kalimat (seperti pernyataan Rem) atau dibelakang kode program.

Contoh :
REM -----------------------------------
REM Program : Menghitung hari
REM Programer : Dijas
REM Tanggal : 11 November 2001
REM -----------------------------------
Dim intHasil As Integer ‘Mendeklarasikan variabel inthasil
Dim intX As Integer ‘Mendeklarasikan variabel intX
intHasil = intX * 100 ‘Mengalikan intX dengan 100
(dan seterusnya)

Macam-macam menu editor di dalam visual basic :

4. TextBox

TextBox (Kotak teks) adalah alat yang dapat kita gunakan pada Visual Basic 6 untuk meminta input dari pengguna dalam bentuk rangkaian huruf atau string.

5. Label

Label adalah alat yang dapat kita gunakan pada Visual Basic 6 untuk menampilkan teks statis. Prinsipnya sama seperti TextBox yang tidak bisa diedit.

6. CommandButton

CommandButton (tombol perintah) adalah alat yang dapat kita gunakan pada Visual Basic 6. Kegunaannya banyak sekali, tergantung kebutuhan kita. Namun, kegunaan yang paling umum dari alat ini adalah untuk menampilkan sebuah tombol yang dapat diklik dan melakukan suatu instruksi atau perintah dalam kode.

7. MsgBox
MsgBox adalah perintah yang dapat kita gunakan dalam kode untuk menampilkan sebuah kotak dialog.

Tombol-tombol yang dapat kita gunakan untuk MsgBox.

No	Nama Konstanta	Keterangan
1	vbOkOnly	Menampilkan hanya tombol OK
2	vbOkCancel	Menampilkan tombol OK dan Cancel
3	vbYesNo	Menampilkan tombol Yes dan No
4	vbYesNoCancel	Menampilkan tombol Yes, No dan Cancel
5	vbAbortRetryIgnore	Menampilkan tombol Abort, Retry dan Ignore
6	vbRetryCancel	Menampilkan tombol Retry dan Cancel
7	vbInformation	Menampilkan ikon informasi pada kotak dialog
8	vbExclamation	Menampilkan ikon tanda seru dalam segitiga kuning pada kotak dialog
9	vbCritical	Menampilkan ikon cakra dalam lingkaran merah pada kotak dialog
10	vbQuestion	Menampilkan ikon tanda tanya pada kotak dialog
11	vbDefaultButton1	Jika anda mengklik tombol ‘x’ pada kotak dialog, program akan menganggap anda telah mengklik tombol paling kiri
12	vbDefaultButton2	Jika anda mengklik tombol ‘x’ pada kotak dialog, program akan menganggap anda telah mengklik tombol kedua dari kiri
13	vbDefaultButton3	Jika anda mengklik tombol ‘x’ pada kotak dialog, program akan menganggap anda telah mengklik tombol ketiga dari kiri
14	vbDefaultButton4	Jika anda mengklik tombol ‘x’ pada kotak dialog, program akan menganggap anda telah mengklik tombol paling kanan
15	vbApplicationModal	Aplikasi VB anda tidak akan berjalan selama kotak dialog ini belum ditutup
16	vbSystemModal	Anda tidak bisa menjalankan Windows anda sebelum kotak dialog ini ditutup
17	vbMsgBoxHelpButton	Akan ada tombol bantuan ‘?’ pada dialog anda, di sebelah kiri tombol ‘x’
18	vbMsgBoxRight	Kotak dialog anda akan muncul di sebelah kanan layar *masih harus dicoba*
19	vbMsgBoxRtlReading	Kotak dialog anda mendukung pembacaan teks dari kanan ke kiri (arab)
20	vbMsgBoxSetForeground	Kotak dialog anda akan muncul di layar anda di atas semua aplikasi yang sedang terbuka

Setelah kotak dialog anda dijalankan, variabel tombol_yang_diklik bisa saja berisi nilai-nilai sebagai berikut.

No	Konstanta	Keterangan
1	vbOk	Tombol ‘OK’ telah diklik
2	vbCancel	Tombol ‘Cancel’ telah diklik
3	vbYes	Tombol ‘Yes’ telah diklik
4	vbNo	Tombol ‘No’ telah diklik
5	vbAbort	Tombol ‘Abort’ telah diklik
6	vbRetry	Tombol ‘Retry’ telah diklik
7	vbIgnore	Tombol ‘Ignore’ telah diklik

Contoh!

Pada contoh di atas, tulisan ‘Qty’ dibuat menggunakan Label. Kotak yang ada di sebelahnya menggunakan TextBox. Tombol ‘Proses’, ‘Hapus’ dan ‘Exit’ menggunakan CommandButton.

Latihan

Buatlah aplikasi desain yang sederhana, yang meminta nama dan kelas lalu menampilkannya kembali dalam kotak dialog. Anda akan membuat desain kurang lebih seperti ini.

Caranya, klik tombol Label dan buat kotak tempat label anda akan berdiam.

Setelah label dibuat, pada jendela properties, ganti property untuk Label1. Pastikan anda telah memilih label1 sebelum mengganti propertiesnya.

Penjelasan:

·       (Name) adalah nama dari objek yang nantinya digunakan dalam kode.

·       Caption adalah teks yang muncul pada objek tersebut.

·       Alignment adalah aturan perataan teks: rata kiri, kanan atau tengah.

·       Appearance adalah bentuk penampilan objek: 3D atau Flat.

·       BackColor adalah warna latar objek.

·       BackStyle adalah gaya latar belakang: warna atau transparan.

Properti lain akan dipelajari sambil tutorial kita berjalan.
Selamat! Anda telah meletakkan kontrol (objek) pertama anda! Dengan berbagai kontrol yang berfungsi pada program, anda dapat membuat program dengan berbagai fungsi dan kegunaan.

Untuk mengubah ukuran kontrol, caranya sama dengan merubah gambar pada Word: klik salah satu dari  kotak-kotak yang muncul di sekitar kontrol dan tahan lalu geser sesuai keinginan.

Sekarang, untuk menyelesaikan desain form kita, lakukan hal-hal berikut:

·       Buatlah sebuah label dengan nama lblKelas dan ubah property Caption menjadi “Kelas :”. Biarkan property yang lain apa adanya.

·       Buatlah dua buah TextBox di sebelah kanan setiap label. Namai masing-masing TextBox “txtNama” dan “txtKelas”. Kosongkan property Text dan biarkan property lain apa adanya.

·       Buatlah sebuah CommandButton di tempat sesuai keinginan, atur ukurannya supaya proporsional. Kerapihan sebuah program adalah hal yang penting. Ubah namanya menjadi cmdLogin dan ubah property Caption menjadi “Login!”

Selamat! Anda telah membuat desain form pertama anda! Tampak sederhana memang, namun dengan pengetahuan yang anda miliki sekarang, anda dapat membuat form yang lebih menarik lagi. Semuanya tidak berjalan dengan instan. Mie ‘instan’ saja membutuhkan waktu 3 menit lho :)

Anyway, lanjut. Kita akan mulai menambahkan kode. Mari kita satukan persepsi kita. Ketika tombol ‘Login!’ diklik, akan muncul sebuah kotak dialog yang bertuliskan ‘Selamat datang <nama>! Silahkan masuk ke kelas <kelas>.’

Untuk dapat melakukan hal tersebut, klik dua kali pada tombol Login!.

Visual Basic 6 didesain sebisa mungkin ramah untuk pemula. Kode-kodenya juga tidak asing dengan aturan bahasa inggris ketikkan kode berikut pada prosedur cmdLogin_Click().

Penjelasan:

·       Dim (Declare Immediately) adalah perintah untuk menyatakan suatu variabel. Variabel sebelumnya pernah dibahas pada artikel ke-4 kalau ga salah. Secara ringkas, variabel adalah suatu ‘wadah’ yang mempunyai nama. Dimana-mana, wadah berfungsi untuk menampung, kan?

·       Pada barisan ke-1 dan ke-2, Dim digunakan untuk membuat dua buah variabel dengan nama ‘Nama’ dan ‘Kelas’

·       Pada barisan ke-3, ke-6 dan ke-8 sengaja dikosongkan agar kode rapi dan enak dilihat

·       Pada barisan ke-4, variabel ‘Nama’ diisi dengan ‘txtNama.Text’.
Pada property window, ingat kan tadi kita mengosongkan property Text pada txtNama? Itu disebut Property Set atau Menyatakan Nilai Property pada Design Time (Waktu pembuatan desain program). Pada saat program dijalankan, ketika pengguna mengganti teks di txtNama, sebenarnya dia sedang mengganti nilai property pada run-time (saat-saat program dijalankan).

txtNama.Text maksudnya adalah ‘Property Text pada txtNama’. Ketika kita menyatakan ‘Nama = txtNama.Text’, artinya adalah ‘Isikan nilai yang ada pada txtNama.Text kedalam variabel Nama’. Sama dengan menyatakan variabel pada matematika, misalnya ‘x = 3’ yang dapat berarti ‘isikan angka 3 ke dalam variabel x’.

Jika kodenya adalah ‘txtNama.Text = Nama’ maka dapat diartikan ‘Isikan nilai yang ada pada Nama kepada Text yang terdapat dalam txtNama’. Sama saja dengan mengubah property Text pada saat run-time. Bagaimana dengan ‘txtNama.Text = “Ini Budi”’ ?

·       Pada barisan ke-5, anda memerintahkan VB untuk mengisi variabel Kelas dengan nilai yang terdapat pada txtKelas.Text.

·       Pada titik ini, variabel Nama dan Kelas sudah berisi nama dan kelas yang diketikkan pada masing-masing txtNama dan txtKelas.

·       Pada barisan ke-7, anda memanggil MsgBox untuk menunjukkan variabel tersebut.

·       Pada barisan ke-8, anda menyatakan ‘Unload Me’. Secara bahasa, anda memerintahkan VB untuk menutup program (unload) anda (me).

Ayo tes program yang baru saja anda buat! Klik pada toolbar atau tekan F5. Selamat! Program anda berhasil dijalankan!