Pemrograman Visual Basic – Salah satu materi yang dipelajari di SMK yaitu pemrograman visual basic. Pemrograman visual basic yang digunakan yaitu versi VB 2010. Pada artikel ini saya akan share modul yang bisa di download di akhir postingan untuk kelas 10. Berikut adalah cover dari modul dan beberapa materi yang dibahas pada modul tersebut.
Mendesain Program Visual Grafis GUI (Graphical User Interface) Sebagai Tampilan Interface dan Komunikasi
1. Mengelola Graphical User Interface (GUI) Visual Basic 2010
Walaupun penggunaan grafis pada VB versi sebelumnya terlihat lebih mudah karena memiliki banyak tool gambar pada VB 2010 jauh lebih fleksibel dalam pembuatan grafis. Misalnya dalam Visual Basic 6 peralatan gambar termasuk di dalam toolbox dimana programmer hanya membutuhkan menyeret kontrol bentuk ke dalam form untuk membuat lingkaran, kotak, elips, persegi panjang dan lainnya. Namun, suatu penyederhanaan juga memiliki kekurangan, Anda tidak memiliki banyak pilihan dalam membuat gambar.
Sejak Visual Basic berevolusi menjadi bahasa OOP sepenuhnya dalam kerangka VB.net, kontrol bentuk tidak lagi tersedia. Sekarang programmer perlu menuliskan kode untuk membuat banyak bentuk dan gambar. Meskipun terlihat lebih rumit tetapi programmer dapat menulis kode dengan baik untuk menciptakan semua jenis grafis. Anda bahkan dapat membuat kontrol Anda sendiri.
Visual Basic 2010 menawarkan berbagai kemampuan yang memungkinkan programmer untuk menulis kode yang dapat menggambarkan berbagai bentuk dan font. Dalam pelajaran ini Anda akan belajar bagaimana menuliskan kode untuk menggambar garis dan bentuk pada antarmuka Visual Basic.
1.1 Membuat Obyek Grafik
Sebelum kita memulai menggambar pada form, kita perlu membuat obyek grafis pada VB 2010. Obyek grafik dibuat menggunakan sebuah metode CreateGraphis(). Anda dapat membuat obyek grafis yang digambar ke form atau kontrol. Sebagai contoh, jika Anda ingin menggambar pada form, Anda dapat menggunakan pernyataan ;
Dim Grafik As Graphics = me.CreateGraphics
Selalu gunakan Dim untuk mendefinisikan obyek. Gunakan kode “me” jika Anda ingin menggambar pada Form. Jika Anda ingin menggambar pada picture box Anda dapat menggunakan perintah berikut :
Selalu gunakan Dim untuk mendefinisikan obyek. Gunakan kode “me” jika Anda ingin menggambar pada Form. Jika Anda ingin menggambar pada picture box Anda dapat menggunakan perintah berikut :
Dim Grafik As Graphics = Picturebox1.CreateGraphics
Anda juga dapat menggambar pada text box dengan perintah :
Dim Grafik As Graphics = TextBox1.CreateGraphics
Obyek grafis yang dibuat, tidak tampak tergambar pada layar sampai Anda memanggil method dari obyek grafis tersebut. Sebelumnya Anda perlu membuat obyek Pena sebagai peralatan gambar.
Baca Juga : KI KD dan Silabus Pemrograman Web Dan Perangkat Bergerak Kelas XII SMK Revisi 2017
Baca Juga : KI KD dan Silabus Pemrograman Dasar Kelas X SMK Revisi 2017
a. Membuat Pena
Pena dapat dibuat menggunakan kode :
Pena = New Pen (Brushes.DarkMagenta, 10)
Dimana Pena adalah sebuah variabel yang akan digunakan sebagai variabel pengatur dari detail garis atau gambar yang akan kita buat. Pernyataan pertama dari obyek pen mendefinisikan warna dari garis yang digambar dan pernyataan kedua mendefinisikan tebal dari garis tersebut.
Anda juga dapat menggambar pena dengan pernyataan berikut :
Dim Pena As Pen
Pena = New Pen (Drawing.Color.Blue, 5)
Dimana pernyataan pertama mendefinisikan warna (disini adalah biru, Anda dapat merubah warna sesuai dengan keinginan) dan pernyataan kedua adalah tebal dari garis yang digambar.
Setelah membuat Grafis dan obyek pena, sekarang Anda telah siap untuk menggambar grafis pada layar.
b. Pixel koordinat form aplikasi
Ketika kita belajar membuat desain grafis pada visual basic, dasar dari semua proses desain adalah mengetahui koordinat kerja dari form yang akan kita buat. Sama seperti ketika kita telah belajar di sekolah dasar mengenai diagram kartesius (x,y), maka pada form design visual basic juga memiliki koordinat (0,0). Perbedaan yang mendasar adalah pada diagram kartesius, diagram terdiri atas empat kuadran dan titik (0,0) terletak tepat pada titik tengah kuadran. Sedangkan pada form design VB (visual basic) terdiri atas satu kuadran dan titik (0,0) terletak di ujung pojok kiri atas. Untuk lebih jelasnya perhatikan titik warna merah yang terletak pada gambar di bawah ini.
Pada gambar di atas, gambar sebelah kiri menunjukkan titik nol dari diagram kartesius sedangkan gambar sebelah kanan menunjukan titik nol dari form design VB (visual basic) 2010. Pada form design visual basic nilai x dan y berdasarkan titik pixel dimana obyek tersebut akan di gambarkan. Contoh, tambahkan komponen PictureBox pada form design dan atur properties location dari komponen tersebut menjadi (50,50). Maka akan muncul tampilan seperti gambar dibawah ini.
Pada gambar di atas titik merah pada ujung kiri atas PictureBox mempunyai dua arti. Yang pertama lokasi titik tersebut terletak pada koordinat (50,50) terhadap form aplikasi, yang kedua titik merah tersebut memiliki titik koordinat (0,0) terhadap PictureBox aplikasi.
Dengan kondisi tersebut kita memiliki dua kemungkinan untuk menggambar, yang pertama kita dapat menggambar (contoh: menggambar suatu garis lurus) dengan menggunakan refrensi terhadap titik koordinat koordinat form dan yang kedua refrensi terhadap titik koordinat PictureBox. Untuk lebih jelasnya perhatikan contoh pada sub c menggambar baris di bawah ini.
c. Menggambar garis
Pada sesi ini kita akan belajar untuk menggambar garis lurus pada form. Pertama bukalah Visual Basic 2010. Pada halaman awal seretlah sebuah tombol ke dalam form. Double klik pada tombol tersebut dan tulislah pernyataan berikut :
Private Sub Button1_Click (ByVal sender As System,.Oject, ByVal e As System.EventArgs) Handles Button1.Click
Dim Grafik As Graphics = me.CreateGraphics
Dim Pena As Pen
Pena = New Pen (Brushes.DarkMagenta, 10)
Grafik.DrawLine (Pen, 10, 10, 100, 10)
End sub
Pernyataan kedua dari program diatas adalah membuat obyek grafis, pernyataan pada baris kedua dan ketiga membuat obyek Pena. Pernyataan pada baris kelima menggambar garis pada form menggunakan method DrawLine. Pernyataan pertama dari baris kelima adalah menggunakan obyek Pena yang Anda buat sebelumnya, pernyataan kolom kedua dan ketiga mendefinisikan koordinat untuk titik awal, pernyataan keempat dam terakhir merupakan akhir koordinat dari garis yang dibuat. Sintaks secara umum dari Drawline adalah sebagai berikut :
Object.DrawLine(Pen, x1, y1, x2, y2)
Tampilan dari garis yang dibuat akan tampak seperti gambar berikut:
Pada contoh di atas tampak bahwa program menggambar garis lurus dari koordinat (10,10) menuju ke koordinat (100,10) pada form design. Sekarang kita akan lihat perbedaan saat menggambar garis lurus pada koordinat (50,50) menuju koordinat (200,50) pada form design dengan menggunakan picturebox.
Script menggambar pada form design (program 1) :
Dim Grafik As Graphics = me.CreateGraphics
Dim Pena As Pen
Pena = New Pen (Brushes.DarkMagenta, 10)
Grafik.DrawLine (Pen, 50, 50, 200, 50)
End sub
Untuk menggambar pada PictureBox, tambahkan terlebih dahulu komponen PictureBox kemudian atur properties location menjadi 50;50. Kemudian tuliskan script program berikut ini (program 2)
Dim Grafik As Graphics = PictureBox1.CreateGraphics
Dim Pena As Pen
Pena = New Pen(Brushes.DarkMagenta, 10)
Grafik.DrawLine(Pena, 0, 0, 150, 0)
Perhatikan penggalan program diatas, hasil eksekusi program antara menggunakan form design dan PictureBox akan menghasilkan tampilan yang sama. Akan tetapi ada perbedaan dari penulisan script koordinat program.
Pada program pertama tertulis kode program berikut :
Grafik.DrawLine (Pen, 50, 50, 200, 50)
Sedangkan pada program kedua tertulis koordinat yang berbeda
Grafik.DrawLine(Pena, 0, 0, 150, 0)
Alasan mengapa koordinat program 2 di tuliskan koordinat (0,0) menuju koordinat (150,0) adalah karena kita telah mengatur posisi PictureBox sebelumnya dengan mengubah properties location (50;50). Sehingga koordinat titik awal dari PictureBox (0,0) identik dengan koordinat form design (50,50). Sedangkan titik akhir koordinat PictureBox (150,0) identik dengan koordinat akhir form design (200,50). Untuk lebih jelasnya perhatikan ilustrasi gambar berikut :
Baca Juga : Materi Produk Kreatif dan Kewirausahaan Kelas XI
Baca Juga : Materi Pemrograman Dasar Kelas 10
Baca Juga : Buku Basis Data Kelas XI Kurikulum Revisi 2013
Baca Juga : Soal Basis Data Kelas XII
Jika berminat pada e-book ini silahkan Download
Demikianlah Modul Pemrograman Visual Basic yang bisa saya share untuk bisa digunakan dengan baik. Silahkan share modul yang ada di artikel ini agar banyak juga yang bisa menggunakannya, terutama siswa SMK kelas X dan para guru.
