FORM DAN OBJEK KONTROL (Pemorgraman Visual 1)
FORM DAN OBJEK KONTROL
1. Interface Visual Studio 2013
Pada visual studio 2013 banyak terdapat interface yang memiliki fungsi masing-masing. Berikut ini tabel untuk mengenai beberapa interface pada visual studio 2013 dan fungsinya :
Menu bar : Merupakan baris menu pada visual studio yang berisi perintah-perintah berupa menu untuk menjalankan fitur-fitur tertentu.
Toolbox : Berisi kumpulan objek yang digunakan untuk membuat user interface serta pengontrolan bagi program yang dibuat atau daftar kontrol yang ditambahkan ke dalam program sebagai interface.
Error List :Digunakan untuk menampilkan kesalahan-kesalahan pada kode program di visual studio, jadi akan disampaikan pesan error bisa terdapat kesalahan pada program.
Output : Digunakan untuk memberitahukan bahwa program berhasil dijalankan.
Properties : Digunakan untuk mengubah karakteristik atau setting properties dari elemen yang terdapat pada form. Dapat juga dikatakan untuk mengedit property dari form dan kontrol yang diedit.
Solution Explorer : Digunakan untuk mengelola file dan projek pada visual studio.
Form Design : Merupakan bagian sebagai tempat untuk melakukan design atau perancangan pada form, digunakan untuk mengedit tampilan form serta mengatur posisi kontrol pada form.
Berikut ini tabel penjelasan mengenai elemen-elemen dalam Properties di visual studio 2013 :
AutoRedraw : Jika True, visual basic secara otomatis menggambar ulang gambar pada form karena window lain menghilangkan gambar. Jika False (default), visual basic tidak akan meredraw secara otomatis.
BackColor : Warna background form. Pemakai bisa menentukan dengan angka heksadesimal atau memilih warna yang sesuai dari palet warna.
BorderStyle : 0 tanpa garis batas, 1 untuk garis tetap, 2 (default) untuk garis yang ukurannya bias diubah, 3 garis tetap dengan dua baris pada pinggirnya.
Text : Teks yang tampil pada judul form. Nilai Text secara default adalah nama form.
ClipControls : Jika True (default), Paint even akan bekerja.
ControlBox : Jika True (default), form akan mengandung tombol kontrol.
DrawMode : Menyediakan 16 komposisi yang terkait dengan gambar dalam menghasilkan efek gambar khusus.
DrawStyle : Menyediakan 7 komposisi untuk menentukan tampilan garis dalam gambar.
DrawWidth : Menentukan lebar garis pada form.
Enabled : Jika True (default), form dapat menanggapi events.
FillColor : Warna untuk mengisi gambar pada form.
FillStyle : Menyediakan 8 macam corak pengisi bidang gambar.
FontBold : Untuk menentukan ukuran tebal font pada form maupun pada saat pencetakan. Tidak berpengaruh pada property Text.
FontItalic : Untuk menentukan bentuk miring font pada form maupun pada saat pencetakan. Tidak berpengaruh pada property Text.
FontName : Untuk jenis font pada form maupun pada saat pencetakan. Tidak berpengaruh pada property Text.
FontSize : Untuk menentukan ukuran font pada form dan saat pencetakan. Tidak berpengaruh pada property Text.
FontStrikethru : Untuk menentukan garis coret pada font di form maupun pada saat pencetakan. Tidak berpengaruh pada property Text.
FontTransParent : Untuk menghasilkan efek transparent font pada form maupun pada pencetakan. Tidak berpengaruh pada property Text.
FontUnderline : Untuk menentukan garis bawah font di form maupun pada saat pencetakan. Tidak berpengaruh pada property Text.
ForeColor : Untuk menentukan warna latar depan font di form maupun pada saat pencetakan. Tidak berpengaruh pada property Text.
Height : Untuk menentukan ukuran tinggi form.
HelpContextID : Menyediakan nomor pengenal dalam penyusunan context-sensitive help.
KeyPreview : Jika False (default), kontrol yang menerima fokus menerima bisa menerima event-event berikut KeyDown, KeyUp dan KeyPress sebelum form. Jika bernilai True, form akan menerima event sebelum kontrol terfokus.
Left : Ukuran posisi kiri, terhitung dari pinggir form.
LinkMode : 0 (default) akan melumpuhkan DDE, 1 DDE otomatis DDE, 2 Dde terkode, 3 permintaan terkode.
LinkTopic : Menentukan aplikasi sumber dan topic DDE.
MaxButton : Jika True (default), tombol Maximize muncul pada form pada saat runtime. Jika False, pemakai tidak bisa memaximize form.
Name : Nama form, default Form.
Picture : File gambar yang menampilkan background form.
ScaleHeight : Tinggi form, ScaleMode untuk menentukan unit pengukuran yang digunakan.
ScaleLeft : Jarak dari kiri layar ke batas kiri form.
ScaleMode : Untuk menentukan pengukuran koordinat pada form.
ScaleTop : Jarak dari sisi atas layar ke batas atas form.
ScaleWidth : Untuk menentukan lebar form.
Top : Posisi batas atas form.
Visible : Bernilai True atau False, sehingga form bisa tampak atau hilang.
Width : Lebar form dalam satuan twip.
Berikut ini objek kontrol (common control) dalam Toolbox yaitu diantaranya :
Label : Objek kontrol yang dapat menampilkan output tetapi tidak dapat memeberikan input pada saat dijalankan.
TextBox : Objek kontrol yang dapat diberikan input pada saat program dijalankan.
Button : Digunakan untuk mengeksekusi perintah-perintah yang telah diberikan.
CheckBox : Berfungsi untuk memilih beberapa item data, dan dapat memilih lebih dari satu pilihan bahkan smeua pilihan.
RadioButton : Berfungsi untuk memilih beberapa item data, tetepi hanya dapat memilih satu pilihan saja dari beberapa pilihan yang tersedia.
ComboBox : Dapat digunakan untuk menampilkan daftar item dengan pilihan dropdown.
ListBox : Untuk menampilkan menu daftar pilihan secara keseluruhan.
Timer : Berfungsi untuk mengatur dan menampilkan waktu yang diperlukan. Untuk mengeksekusi waktu kejadian pada program termasuk interval (selang waktu).
DateTimePicker : Berfungsi untuk menampilkan tanggal dengan menu dropdown.
Pointer : Digunakan untuk melakukan drag dan drop objek dari ToolBox menuju form. Selain itu, pointer juga digunakan untuk mengubah ukuran button, surface, form dan lain sebagainya.
CheckListBox : Merupakan suatu box dengan kumpulan CheckBox didalamnya, akan tetapi memiliki nama yang sama. jadi semua CheckBox didalam CheckListBox akan menjadi satu informasi.
Link Label : Dapat berisi sebuah url link pada website tertentu.
Masked TextBox : Dapat menentukan spesifikasi input sesuai ketentuan yang diinginkan, misal input tersebut harus mengandung huruf r dan sebagainya.
Month Calender : Menampilkan box besar dengan data kalender satu bulan.
NumericUpDown : Merupakan TextBox yang berisi nilai numerik, dan valuenya dapat di naikan ataupun diturunkan dengan icon up atau down.
Notify Icon : Berguna untuk menampilkan icon aplikasi pada Notify Bar. Objek ini dapat di gunakan untuk menampilkan pemberitahuan aplikasi.
PictureBox : Berfungsi untuk menampilkan gambar.
Web Browser : Berfungsi untuk menampilkan suatu halaman web berdasarkan url atau file html tertentu.
VScrollBar : Untuk mengubah nilai dengan menggerakan balok gulung vertikal.
HScrollBar : Untuk mengubah nilai dengan menggerakan balok gulung horizontal.
MenuStrip : Berfungsi untuk membuat menu pilihan dropdown.
ContxtMenuStrip : Berfungsi untuk membuat menu pilihan yang akan tampil pada saat tombol kanan mouse di klik.
RichTextBox : Sama seperti TextBox, namun dapat lebih banyak menampung karakter dan bisa memanipulasi karakternya seperti memberi underline.
OpenFileDialog : Untuk membuka kotak dialog open.
SaveFileDialog : Untuk membuka kotak dialog yang dimiliki Windows.
ToolStrip : Setiap tombol memiliki gambar dan digunakan untuk mengakses gambar dengan cepat.
StatusStrip : Menampilkan informasi seperti nama aplikasi jam, tanggal dan lainnya, biasanya terletak dibawah aplikasi.
ListView : Menampilkan item dengan satu dari 4 cara yaitu tampilkan teks saja, teks dengan icon kecil, teks dengan icon besar dan tampilan report.
2. Pengertian Form
Form merupakan objek yang dipakai dalam rancangan yang telah ditampilkan dalam program. Form yang dapat dikatakan dengan objek utama pada program visual basic dikarenakan pada form yang nantinya komponen dengan kontrol Toolbox yang dipakai dan diatur sebagus mungkin. Form juga bisa di atur dengan jendela Properties. Form ini juga bisa diatur lebar dan tingginya. Form juga dapat dikatakan sebagai media interaksi antara pengguna dengan aplikasi yang dibuat. Form dapat dikatakan sebagai wadah atau penampung objek kontrol yang akan digunakan. Form juga dikatakan sebagai objek karena dapat memberikan reaksi saat menemui suatu kejadian.
Form dapat dikategorikan menjadi 2 yaitu :
1. Form Dinamis, yaitu form yang dapat dimanupulasi atau diubah bentuk serta disisipi objek kontrol yang berisi perintah-perintah yang diperlukan oleh aplikasi yang akan dibuat. Contohnya Window (Windows Form, Console, Class Library, WPS), Web (ASP.Net, Web Application, ASP.Net Web Server), Smart Device (Smart Device Project), Database (Access dan SQL Server), Report (Report Application dan Crystal Report), WCF (Windows Communication Foundation).
2. Form Statis, yaitu form yang tidak dapat dimanupulasi atau diubah bentuk serta disisipi objek kontrol. Form ini hanya dapat dipanggil melalui kode perintah. Contohnya :
a) Form pesan (MessageBox), bertugas untuk menampilkan pesan keterangan terhadap suatu kejadian yang diterima oleh aplikasi.
b) InputBox (kotak pesan input), digunakan untuk interaksi anatara pengguna dengan aplikasi yang dibuat, dimana pengguna tersebut memasukkan suatu nilai lalu mengklik suatu tombol dan menunggu efek yang ditimbulkan oleh aplikasi yang dibuat.
3. Membuat Project di Visual Studio 2013
Berikut ini langkah-langkah untuk membuat sebuah project di visual studio 2013 :
1. Buka aplikasi visual studio 2013 yang telah terinstall di laptop. Tunggu sampai muncul tampilan awal dari visual studio 2013.
2. Untuk membuat suatu project klik kalimat New Project yang terdapat pada tampilan awal visual studio 2013. Adapun cara lain yang dapat dilakukan untuk membuat project yaitu dengan buka File yang ada di pojok kiri atas, lalu pilih New, kemudian pilih Project (File -> New -> Project).
3. Kemudian akan muncul tampilan untuk pengaturan dari project, seperti nama dan lokasi project. Untuk pemberian nama project dituliskan pada kolom disamping kata Name. untuk mengatur lokasi penyimpanan project bisa diatur pada kolom disamping kata Location, dengan cara klik Browser lalu pilih dan tentukan tempat yang diinginkan untuk penyimpanan project. Setelah selesai, klik OK.
4. Tunggu proses pembentukan project selesai.
5. Tampilan awal project yang berhasil dibuat.
4. Praktikum Aplikasi Windows
Berikut ini membuat suatu project dimana di dalam form terdapat suatu teks :
1. Buat suatu project, lalu tuliskan nama dan tentukan lokasi penyimpanannya. Jika selesai maka klik OK. Kemudian tunggu beberapa saat sampai terbuka halaman project barunya.
2. Jika sudah muncul tampilan awal dari project, selanjutnya membuat teks di dalam form pada project tersebut. Cara untuk membuat teks yaitu pada Toolbox tuliskan (search) Label, lalu drag (bawa) label tersebut ke dalam form.
3. Untuk mengganti isi teks pada Label dilakukan dengan cara klik kata Label yang ada di dalam form, lalu lihat di sebelah kanan bawah cari kata Text lalu tuliskan isi teks yang diinginkan, misalnya menuliskan Visual Studio 2013. Setelah selesai, tekan Enter maka secara otomatis isi teks pada Label akan berubah.
4. Untuk mengganti nama pada form dilakukan dengan cara klik form pada bagian atasnya, lalu lihat di sebelah kanan bawah cari kata Text lalu tuliskan nama dari form yang diinginkan, misalnya menuliskan Latihan. Setelah selesai, tekan Enter maka secara otomatis nama pada form akan berubah.
Ada cara lain yang dapat digunakan untuk mengubah isi teks pada Label dan mengubah nama form, yaitu dengan menggunakan kode program. Berikut ini langkah-langkah untuk mengganti isi teks dan nama form melalui kode program :
1. Untuk mengganti isi teks pada Label melalui kode program dilakukan dengan cara klik kata Label yang ada di dalam form, lalu lihat di sebelah kanan bawah cari kata Name pada Design dan tuliskan kode pemanggil untuk Label yang akan digunakan ke dalam kode program, misalnya menuliskan LblText. Lalu tekan saja Enter.
2. Untuk mengganti nama form melalui kode program caranya sama seperti pada Label. Tapi disini penulis tetap menuliskan kode pemanggil pada Name di Design dengan nama Form1.
3. Selanjutnya buka kode program dari form tersebut. Dilakukan dengan cara mengklik 2 kali (double klik) pada form dibagian atasnya, lalu nanti akan muncul halaman kode program dan secara otomatis itu akan terbentuk kode program untuk form (sesuai dengan apa yang di klik). Sehingga tinggal melengkapi kode programnya saja.
4. Kemudian, tuliskan kode program untuk mengubah isi teks pada Label dan nama dari form.
5. Setelah selesai maka selanjutnya dijalankan dengan mengklik Start atau dengan menekan F5.
6. Kemudian, jika program berhasil dan tidak ada error maka akan muncul tampilan hasil dari form sesuai dengan yang telah diatur sebelumnya. Berikut ini tampilan hasil dari form.
5. Praktikum CheckBox dan RadioButton
Berikut ini merupakan cara untuk menggunakan Toolbox berupa checkbox dan radiobutton, serta memberikan efek dan style font pada teks :
1. Buat suatu project, lalu tuliskan nama dan tentukan lokasi penyimpanannya. Jika selesai maka klik OK. Kemudian tunggu beberapa saat sampai terbuka halaman project barunya.
2. Untuk mengganti nama pada form dilakukan dengan cara klik form pada bagian atasnya, lalu lihat di sebelah kanan bawah cari kata Text lalu tuliskan nama dari form yang diinginkan, misalnya menuliskan CheckBox dan RadioButton. Setelah selesai, tekan Enter maka secara otomatis nama pada form akan berubah.
3. Buat ukuran form menjadi lebih panjang dan lebih lebar.
4. Pada Toolbox cari atau search Label, kemudian drag ke dalam form. Setelah itu klik kata Label yang ada pada form, kemudian ubah atau atur :
a) Text menjadi CHECKBOX DAN RADIOBUTTON
b) Name pada Design menjadi Lbl_Font
c) Borderstyle menjadi Fixed3D
d) Font menjadi Microsoft sans Serif; 16 pt
Jika sudah, atur tulisan menjadi di tengah-tengah dalam form.
5. Kemudian pada Toolbox cari atau search groupbox, lalu drag ke dalam form. Buat menjadi ada 2 groupbox dan atur ukuran dari groupbox tersebut dan atur tata letaknya menjadi 2 groupbox yang saling bersebelahan. Pada groupbox atur menjadi :
a) Groupbox 1, Text menjadi EFEK
b) Groupbox 2, Text menjadi FONT STYLE
6. Kemudian pada Toolbox cari atau search checkbox, lalu drag ke dalam form. Buat menjadi ada 2 checkbox dan atur tata letaknya menjadi 2 checkbox yang satu diatas dan satunya dibawah. Pada checkbox atur atau ubah menjadi :
a) Checkbox 1, Text menjadi StrikeOut
b) Checkbox 2, Text menjadi Underline
7. Selanjutnya pada Toolbox cari atau search radiobutton, lalu drag ke dalam form. Buat menjadi ada 4 radiobutton dan atur tata letaknya menjadi 4 radiobutton yang berjajar dari atas ke bawah. Pada radiobutton dibuat atau atur menjadi :
a) Radiobutton 1, Text menjadi Regular
b) Radiobutton 2, Text menjadi Italic
c) Radiobutton 3, Text menjadi Bold
d) Radiobutton 4, Text menjadi BoldItalic
8. Selanjutnya buka kode program dari form tersebut. Dilakukan dengan cara mengklik 2 kali (double klik) pada form dibagian atasnya, lalu nanti akan muncul halaman kode program dan secara otomatis itu akan terbentuk kode program untuk form (sesuai dengan apa yang di klik). Sehingga tinggal melengkapi kode programnya saja.
9. Klik kata StrikeOut pada halaman design form lalu akan muncul secara otomatis kode program untuk StrikeOut (Checkbox1), kemudian lengkapi kode program tersebut agar dapat berfungsi sesuai dengan namanya yaitu membuat StikeOut (garis tengah dalam kalimat).
10. Klik kata Underline pada halaman design form lalu akan muncul secara otomatis kode program untuk Underline (Checkbox2), kemudian lengkapi kode program tersebut agar dapat berfungsi sesuai dengan namanya yaitu membuat Underline (garis bawah dalam kalimat).
11. Klik kata Regular pada halaman design form lalu akan muncul secara otomatis kode program untuk Regular (RadioButton1), kemudian lengkapi kode program tersebut agar dapat berfungsi sesuai dengan namanya yaitu membuat Regular (teks sesuai dengan pengaturan awal).
12. Klik kata Italic pada halaman design form lalu akan muncul secara otomatis kode program untuk Italic (RadioButton2), kemudian lengkapi kode program tersebut agar dapat berfungsi sesuai dengan namanya yaitu membuat Italic (teks menjadi miring).
13. Klik kata Bold pada halaman design form lalu akan muncul secara otomatis kode program untuk Bold (RadioButton3), kemudian lengkapi kode program tersebut agar dapat berfungsi sesuai dengan namanya yaitu membuat Bold (teks menjadi cetak tebal).
14. Klik kata BoldItalic pada halaman design form lalu akan muncul secara otomatis kode program untuk BoldItalic (RadioButton4), kemudian lengkapi kode program tersebut agar dapat berfungsi sesuai dengan namanya yaitu membuat BoldItalic (teks menjadi cetak tebal dan miring).
15. Setelah selesai maka selanjutnya dijalankan dengan mengklik Start atau dengan menekan F5.
16. Kemudian, jika program berhasil dan tidak ada error maka akan muncul tampilan hasil dari form sesuai dengan yang telah diatur sebelumnya. Berikut ini tampilan hasil dari form.
17. Coba lakukan pengujian untuk mengecek apakah setiap checkbox dan radiobutton dapat berjalan sesuai dengan nama dan fungsinya.
a) StrikeOut
b) Underline
c) Regular
d) Italic
e) Bold
f) BoldItalic
6. Praktikum Timer dan DateTimePicker
Berikut ini merupakan cara untuk menggunakan Toolbox berupa timer dan datetimepicker :
1. Buat suatu project, lalu tuliskan nama dan tentukan lokasi penyimpanannya. Jika selesai maka klik OK. Kemudian tunggu beberapa saat sampai terbuka halaman project barunya.
2. Untuk mengganti nama pada form dilakukan dengan cara klik form pada bagian atasnya, lalu lihat di sebelah kanan bawah cari kata Text lalu tuliskan nama dari form yang diinginkan, misalnya menuliskan Time dan DateTimePicker. Setelah selesai, tekan Enter maka secara otomatis nama pada form akan berubah. Selain itu, dalam form atur juga StartPosition menjadi CenterScreen.
3. Pada Toolbox cari atau search Label, kemudian drag ke dalam form. Buat menjadi ada 2 Label dan atur tata letaknya menjadi 2 label yang berjajar dari atas ke bawah. Pada Label dibuat atau atur menjadi :
a) Label 1, Name pada Design menjadi Lbl12jam
b) Label 2, Name pada Design menjadi Lbl24jam
4. Pada Toolbox cari atau search DateTimePicker, kemudian drag ke dalam form. Atur tata letak dari DateTimepicker dibawah Label 2. Pada DateTimePicker ubah Name pada Design menjadi Dtanggal.
5. Pada Toolbox cari atau search Timer, kemudian drag ke dalam form. Tapi Timer tidak dapat masuk kedalam form, tapi akan secara otomatis terletak di bawah form (diluar form). Pada Timer atur menjadi :
a) Enabled menjadi True
b) Interval menjadi 1000
6. Selanjutnya buka kode program dari form tersebut. Dilakukan dengan cara mengklik 2 kali (double klik) pada form dibagian atasnya, lalu nanti akan muncul halaman kode program dan secara otomatis itu akan terbentuk kode program untuk form (sesuai dengan apa yang di klik). Sehingga tinggal melengkapi kode programnya saja.
7. Didalam kode form tuliskan kode-kode mengenai Dtanggal (DateTimPicker) seperti dibawah ini agar project dapat berjalan.
8. Klik kata Timer pada halaman design form lalu akan muncul secara otomatis kode program untuk Timer, kemudian lengkapi kode program tersebut agar dapat berfungsi sesuai tugasnya. Lalu, klik Start atau menekan F5. Kemudian, jika program berhasil dan tidak ada error maka akan muncul tampilan hasil dari form sesuai dengan yang telah diatur sebelumnya. Berikut ini tampilan hasil dari form.
