Tinggalkan pesan mu disana =>>

Selasa, 26 Mei 2015

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