PENGENALAN PEMROGRAMAN VISUAL Tujuan Mata Kuliah Mahasiswa dapat memahami pengertian pemrograman visual Mahasiswa dapat memahami sintak Visual basic Mahasiswa dpt membuat berbagai aplikasi pemrograman visual Mahasiswa dapat memahami pemrograman database dan koneksi database dalam VB Mahasiwa dapat membuat proyek dengan menggunakan VB dan Memahami solusi studi kasus menggunakan konsep berorientasi objek dalam visual basic (VB) Tujuan Instruksional Umum : Pengenalan Visual programming dan VB By Ibu KARTINI

MEMAHAMI ISTILAH VISUAL PROGRAMMING MEMULAI VB FORM TOOLBOX PROPERTIES PROJECT EXPLORER CODE EDITOR EVENT MANAJEMEN PROYEK VB

Memahami Istilah Object, Property, Method dan Event Dalam pemrograman berbasis obyek (OOP), anda perlu memahami istilah object, property, method dan event sebagai berikut : Object : komponen di dalam sebuah program Property : karakteristik yang dimiliki object Method : aksi yang dapat dilakukan oleh object Event : kejadian yang dapat dialami oleh object Sebagai ilustrasi anda dapat menganggap sebuah mobil sebagai obyek yang memiliki property, method dan event. Perhatikan gambar berikut :

Memahami Istilah Object, Property, Method dan Event

Memahami Istilah Object, Property, Method dan Event Implementasinya dalam sebuah aplikasi misalnya anda membuat form, maka form tersebut memiliki property, method, dan event. Sebagaimana pemrograman visual lain seperti Delphi dan Java VB juga Bersifat event driven progamming. Artinya anda dapat menyisipkan kode program pada event yang dimiliki suatu obyek.

Memahami Istilah Object, Property, Method dan Event Implementasinya dalam sebuah aplikasi misalnya anda membuat form, maka form tersebut memiliki property, method, dan event. Sebagaimana pemrograman visual lain seperti Delphi dan Java VB juga Bersifat event driven progamming. Artinya anda dapat menyisipkan kode program pada event yang dimiliki suatu obyek.

MEMULAI VB (1) ADA BEBERAPA Dari Menu Start pilih program – Microsoft Visual Studio 6 – lalu klik Visual basic 6 Klik ganda icon Visual Basic 6 pada Dekstop Klik ganda ekstensi .MAK pada Window Eksplorer Klik ganda file VB6.EXE pada Windows Eksplorer. File ini secara default terletak pada folder C:\Program files\Microsoft VisualStudio\VB98

MEMULAI VB (2) Dari Menu Start pilih program – Microsoft Visual Studio 6 – lalu klik Visual basic 6

MEMULAI VB (3) Dgn Menekan tombol Enter atau Double click MEMULAI VB (3) Dgn Menekan tombol Enter atau Double click. Hasilnya sbb, clicklah tombol Open dan lihat tampilan IDE halaman berikutnya :

MEMULAI VB (4) TAMPILAN IDE INTERFACE VB Toolbar Toolbox Form Project Gbr. IDE, yg merupakan Interface Visual Basic ( VB6) Toolbar Toolbox Form Project MainMenu Window Window Explorer form layout Properties

Mengenal Integrated Development Environment (IDE) VB 6 Anda akan melihat tampilan area kerja atau IDE VB 6. Kenali bagian-bagian utama di dalam IDE VB6 berikut ini :

Mengenal Integrated Development Environment (IDE) VB 6 KETERANGAN 1 Menubar 2 Toolbar 3 Toolbox Bila Toolbox tidak muncul klik tombol Toolbox pada bagian Toolbar atau klik menu View > Toolbox. 4 Jendela Form Bila Jendela Form tidak muncul klik tombol View Object pada bagian Project Explorer atau klik menu View > Object. 5 Jendela Code Bila Jendela Code tidak muncul klik tombol View Code di pada bagian Project Explorer atau klik menu View > Code. 6 Project Explorer Bila Project Explorer tidak muncul klik tombol Project Explorer pada bagian Toolbar atau klik menu View > Project Explorer. 7 Jendela Properties Bila Jendela Properties tidak muncul klik tombol Properties Window pada bagian Toolbaratau klik menu View > Properties Window.

FORM (1) FORM ADALAH JENDELA YANG BISA DIUBAH-UBAH UNTUK MEMBUAT ANTARMUKA PROGRAM FORM BISA MENGANDUNG MENU, TOMBOL, KOTAK DAFTAR, BARIS PENGGULUNG DAN ITEM-ITEM LAIN FORM – FORM TAMBAHAN BISA DITAMBAHKAN FORM ADALAH LEMBAR DESAIN TAMPILAN DARI PROGRAM YANG DIBUAT

FORM (2) Project Name Bidang Form Caption Symbol actif Bidang project Minimize Maximize Close

TOOLBOX (1) TOOLBOX MENGANDUNG KONTROL-KONTROL YANG BISA DIGUNAKAN UNTUK MENAMBAH GAMBAR,LABEL DAN ELEMEN LAINNYA TOOLBOX BERISI KUMPULAN OBJEK YANG DIGUNAKAN UNTUK MEMBUAT USER INTERFACE SERTA PENGONTROLAN BAGI PROGRAM YANG DIBUAT

TOOLBOX (2) PictureBox TextBox Command ListBox VScrollBar FileListBox Data DrivelistBox Line Pointer Label Frame CheckBox ComboBox Timer HScrollBar DirListBox Shape Image Ole OtionButton

PROPERTIES (1) JENDELA PROPERTIES DIGUNAKAN UNTUK MENGUBAH KARAKTERISTIK ATAU SETTING PROPERTI DARI ELEMEN YANG TERDAPAT PADA FORM JENDELA PROPERTIES MENGANDUNG KOTAK DAFTAR DROP-DOWN YANG MENAMPILKAN SEMUA ELEMEN OBJEK PADA FORM SETIAP ELEMEN ATAU COMPONENT MEMILIKI PROPERTI YANG SUDAH DITENTUKAN PROPERTIES DIBAGI MENJADI DUA YAITU ALPHABETIC DAN CATEGORIZED ALPHABETIC, PROPERTI DIATUR BERDASARKAN URUTAN ABJAD CATEGORIZED, PROPERTI DIATUR DALAM KELOMPOK-KELOMPOK KATEGORI

PROPERTIES (2) ObjectBox Diurutkan ber dsrkan Abjad Diurutkan berda sarkan fungsi ObjectBox PropertieList Kelompok katagori Keterangan dari propertie yg dipilih

PROJECT EXPLORER (1) PROJECT EXPLORER DIGUNAKAN UNTUK MENGELOLA FILE YANG MENYUSUN PROYEK PROJECT EXPLORER INI BERISI DAFTAR FORM, MODUL, MODUL CLASS DAN FILE RESOURCE YANG DIGUNAKAN

PROJECT EXPLORER (2) View Object View Code Tonggle Folder

CODE EDITOR (1) JENDELA INILAH TEMPAT MENULIS DAN MENYUNTING RUTIN YANG AKAN MENENTUKAN MEKANISME PROGRAM PROCEDURE VIEW AKAN MENYEBABKAN CODE EDITOR AKAN MENAMPILKAN RUTIN PROGRAM DALAM BENTUK PROSEDUR-PROSEDUR FULL MODUL VIEW AKAN MENYEBABKAN CODE EDITOR AKAN MENAMPILKAN SEMUA RUTIN PROGRAM YANG ADA DALAM SATU MODUL

CODE EDITOR (2) Kotak nama2 prosedure Kotak Event Prosedur VScrollbar HScrollbar Tempat menulis kan rutin Program

Menulis Kode Program Even Click Even DocbleClick Even load Even change Even keyPrees

EVENT EVENT ADALAH AKTIFITAS YANG TERJADI SAAT MENGGUNAKAN APLIKASI EVENT TERJADI KARENA ADANYA TINDAKAN DARI PEMAKAI, SEPERTI KLIK MOUSE ATAU PENGGUNAAN KEYBOARD EVENT BISA JUGA TERJADI KARENA ADANYA PENGATURAN OLEH TIMER ATAU APLIKASI

MANAJEMEN PROJECT (1) PROYEK MERUPAKAN CIKAL BAKAL DARI APLIKASI DAN TERDIRI DARI BEBERAPA FILE YANG SALING TERKAIT SATU SAMA LAIN BEBERAPA FILE UTAMA YANG DICIPTAKAN VB UNTUK MEMBANGUN PROYEK ADLAH : .VBP,.FRM,.OCX,.BAS,.CLS,.RES

MANAJEMENT PROJECT (2) FILE .VBP UNTUK TIAP PROYEK FILE .FRM UNTUK TIAP FORM APLIKASI PADA SEBUAH PROYEK FILE.OCX UNTUK TIAP CUSTOM CONTROL PADA SEBUAH PROYEK FILE.BAS UNTUK MODUL STANDAR PADA SEBUAH PROYEK FILE .RES MERUPAKAN RESOURCE FILE PADA SEBUAH PROYEK

CONTOH PROGRAM (1) Buka project baru, disainlah object commandbutton1 dan commandbutton2 pada form1 ( dgn cara Double click tool CommandButton pada toolbox) dan seting properti caption nya menjadi : Exit dan Clear, seperti terlihat dibawah ini, dimana form1 tsb, dlm keadaan Running :

CONTOH PROGRAM (2) Double click control Command (clear) yang ada di dalam form Kemudian ketik kode VB di dalam prosedur sebagai berikut: Private Sub Command1_Click() Form1.Cls End Sub Private Sub Command2_Click() End End sub

CONTOH PROGRAM (3) Private Sub Form_Click() Form1.Print Form1.FontName = "Arial Black" Form1.FontSize = 12 Form1.ForeColor = vbRed Form1.Print "Haloo...Selamat Datang di VB" Form1.FontSize = 14 Form1.ForeColor = vbYellow Form1.Print "HALOOO SELAMAT DATANG DI VB" Form1.FontBold = True Form1.FontSize = 16 Form1.ForeColor = vbGreen Form1.FontItalic = True Form1.FontSize = 18 Form1.ForeColor = &H808080 End Sub

Membuat User Interface (UI) Pada Jendela Form buatlah UI seperti ini : Cara membuatnya : Klik komponen Label di dalam ToolBox kemudian “gambar” object Label1 di dalam Form dengan cara drag-drop. Lakukan langkah yang sama untuk object Label2. Object Text1 di-“gambar” menggunakan komponen TextBox, Sedangkan object Command1 dan Command2 menggunakan komponen Command Button.

Mengatur Property Object Melalui Jendela Properties atur property setiap object sebagai berikut :

Mengatur Property Object Sehingga UI-nya menjadi seperti ini :

Menulis Kode Program : Property Test Buka Jendela Code dan kenali bagian-bagian di dalamnya : Program yang berbasis Windows bersifat event-driven, artinya program bekerja berdasarkan event yang terjadi pada object di dalam program tersebut. Misalnya, jika seorang user meng-klik sebuah tombol maka program akan memberikan “reaksi” terhadap event klik tersebut. Program akan memberikan“reaksi” sesuai dengan kode- kode program yang dibuat untuk suatu event pada object tertentu.

Menulis Kode Program : Property Test Pilih object Command1 pada bagian Object Selector. Secara otomatis pada bagian Code Editor akan muncul blok kode program berikut : Event Click merupakan event default (standar) dari object Command1, Anda bisa melihat event lainnya pada bagian Event Selector. Pada bagian Code Editor ketikkan kode programnya sebagai berikut

Menulis Kode Program : Property Test Simpan Project1 (nama file : Latihan.vbp) dan Form1 (nama file : Lat1.frm). VB 6 akan menyimpan program yang Anda buat ke dalam beberapa file yang saling terkait, antara lain : file project (*.vbp), file form (*.frm) dan file module (*.bas). Coba jalankan Project1 dengan meng-klik tombol Start pada bagian Toolbar atau tekan tombol F5 pada keyboard. Ketikkan “Salman” di dalam TextBox kemudian klik tombol OK. Maka akan tampil hasil sebagai berikut : Bila ingin keluar klik tombol Selesai.

Menulis Kode Program : Property Test Penjelasan kode program : Berikut diberikan penjelasan bagaimana cara kerja program sederhana di atas Private Sub Command1_Click() Label2.Caption = Text1.Text End Sub Ketika seorang user meng-klik tombol OK (object Command1) maka isi tulisan pada object Label2 akan sama dengan isi tulisan pada object Text1. Property Caption pada obyek Label2 digunakan untuk menampilkan text tertentu di obyek tersebut. Selanjutnya untuk keluar dari program dituliskan kode berikut : Private Sub Command2_Click() End

Menulis Kode Program : Property test Ketika seorang user meng-klik tombol Selesai (object Command2) maka program akan berhenti. Perintah End digunakan untuk menutup program. Menampilkan tulisan merupakan salah satu property yang dimiliki oleh komponen Label. Property isi tulisan pada komponen Label adalah Caption, sedangkan pada komponen Textbox adalah Text. Cara penulisan (syntax) kode program untuk mengatur property sebuah object adalah sebagai berikut : nama_object.property = value Perhatikan, setelah Anda mengetikkan tanda titik (dot) dibelakang nama_object maka VB 6 akanmenampilkan daftar property dan method yang dimiliki oleh nama_object : Fasilitas ini disebut Intellisense, dan sangat membantu Anda agar tidak salah mengetikkan nama_object maupun property-nya.

Modifikasi Kode Program Ubah tampilan UI-nya menjadi seperti ini : (Tambahkan komponen Frame, OptionButton dan CheckBox) Atur property object-object tambahannya sebagai berikut :

Modifikasi Kode Program Obyek Frame1 harus dibuat terlebih dahulu si form, Obyek Option dan Check dibuat didalam Frame1 tersebut. Tujuan pembuatan berbagai pilihan tsb adlh memperkenalkan pd Anda Fasilitas Option dan CheckBox yg digunakan utk membuat pilihan dlm aplikasi. Tambahkan kode programnya sebagai berikut : Private Sub Option1_Click() Label2.ForeColor = vbBlue End Sub Private Sub Option2_Click() Label2.ForeColor = vbRed Private Sub Check1_Click() Label2.FontBold = Check1.Value Private Sub Check2_Click() Label2.FontItalic = Check2.Value

Modifikasi Kode Program Simpan kembali Form1, kemudian coba jalankan Project1 dan lihat hasilnya :

PEMROGRAMAN VISUAL Situs terkait utk memperoleh materi ini Silahkan buka & cari : Ilmukomputer.com Atau Makalah yg terkait dgn topik ini dapat dibaca di Modul I : Pemrograman visual basic Enterprise 6.0