Part 2 - PENGENALAN VISUAL STUDIO 2010
- 1. Rolly Yesputra, M.Kom | Organisasi Komputer | 2013 6 MODUL 2 PENGENALAN VISUAL STUDIO 2010 Pada pertemuan yang kedua ini akan membahas mengenai visual studio lebih dalam dan bagaiman membuat project visual basic serta bagaimana membuat aplikasi sederhana dengan menggunakan visual basic 2010 ini. Pembelajaran ini merupakan step by step bagaimana bisa memahami Visual Basic 2010 ini dengan cepat dan terampil. Untuk lebih lengkapnya silahkan diikuti pembahasan dibawa ini : 2.1 Membuat Project Visual Basic 2010 Pada Visual Studio 2010 ini kita dapat membuat berbagai macam aplikasi atau project yang berbasis desktop, namun disini kita akan pelajari bagaimana membuat project untuk bahasa pemrograman Visual Basic .Net 2010, ikuti langkah-langkah dibawah ini : 1. Buka Visual Studio 2010 dengan langkah-langkah seperti pertemuan pertama, silahkan dilihat lagi modul bagian pertama. 2. Tampilan Awal Visual Studio 2010 Lihat Gambar 2.1 Gambar 2.1 Jendela awal Visual Studio 2010 3. Selanjutnya , kita akan membuat project dengan cara klik menu file new Project Lihat Gambar 2.2
- 2. Rolly Yesputra, M.Kom | Organisasi Komputer | 2013 7 Gambar 2.2 Membuat Project Melalui Menu File 4. Atau melalui jendela start page yang ada pada jendela awal visual studio 2010 lihat gambar 2.3. Gambar 2.3 Membuat Project Via Start Page 5. Selanjutnya klik new project maka akan tampil jendela new project Lihat gambar 2.4 dibawah ini : Klik ini untuk membuat Project Baru
- 3. Rolly Yesputra, M.Kom | Organisasi Komputer | 2013 8 Gambar 2.4 Jendela New Project 6. Bahasa dan apa saja yang bisa dibuat dengan Visual Studio 2010 ini Lihat gambar 2.5. Gambar 2.5 Fasilitas yang ada pada Visual Studio 2010 Penjelasan dari berbagai macam tipe project yang ada didalam visual studio 2010, seperti : a. Windows adalah project yang sering digunakan untuk membangun aplikasi- aplikasi desktop seperti (Membuat aplikasi desktop, komponen ActiveX, file DLL, dan sebagainya). Karena menggunakan interface windows baik
- 4. Rolly Yesputra, M.Kom | Organisasi Komputer | 2013 9 command line ataupun windows form yang memiliki form dan kontrol, yang terbaru dari Visual Basic 2010 adalah WPF (Windows Presentation Foundation (Windows, Web), XAML) yang memungkinkan pekerjaan GUI (Graifc User Interface ) dan kode dibuat secara terpisah. b. Web adalah project yang dapat digunakan untuk membuat aplikasi berbasis web menggunakan ASP.Net 4.0 c. Smart Device diperuntukkan untuk mengembangkan aplikasi yang akan dijalankan diatas platform Mobile tertentu seperti PDA (Personal Digital Assistant) berjalan pada sistem operasi Windows CE (Compact Edition). d. Office adalah suatu project yang dapat menyediakan atau menjalankan atau memanggil aplikasi yang terdapat pada program office (2003,2007) sepert Word, Excel, dan lainnya. e. Database project ini diperuntukkan untuk memanajemen dan membangun database SQL Server , tetapi tidak menutup kemungkinan dapat digunakan untuk aplikasi database lainnya. f. Crystal Report dalam pemrograman database project ini selalu digunakan untuk menampilkan laporan dan menyajikan data yang sudah disimpan didalam database yang sudah diolah dan dirancang oleh programmer. g. Dan masih banyak project yang lainnya disediakan oleh Visual Studio 2010 ini. 7. Selanjutnya pilih bahasa yang akan digunakan, disini yang akan kita gunakan adalah Visual Basic, Lihat Gambar 2.6.
- 5. Rolly Yesputra, M.Kom | Organisasi Komputer | 2013 10 Gambar 2.6 Project Visual Basic 8. Selanjunya pilih Visual Basic dan PilihWindows Forms Aplication Lihat Gambar 2.7 Gambar 2.7 Windows Forms Aplication 9. Setting nama project dengan nama ProjectPertamaKu dan lokasi tempat penyimpanan project yang baru dibuat ini di D;VB Net , tetapi setingan seperti aturan dibawah ini tidak mutlak seperti itu, anda masih bebas untuk merubah Pilih Project Ini
- 6. Rolly Yesputra, M.Kom | Organisasi Komputer | 2013 11 setingan tersebut sesuai dengan kebutuhan anda masing-masing lihat gambar 2.8. Gambar 2.8 Settingan Project Baru Untuk mengatur lokasi penyimpanan anda bisa menekan tombol browse... yang ada seperti pada gambar 2.8 diatas. 10. Klik Ok, maka akan didapatkan tampilaan project baru Lihat gambar 2.9. Gambar 2.9 Tampilan Project Baru 2.2 Integrated Development Environment (IDE) Visual Studio Setelah project Visual Basic dibuat maka akan tampil jendela seperti gambar 2.10 dibawah ini, dan banyak bagian-bagian yang akan kita bahas dari jendela tersebut. IDE merupakan lingkugan tempat kita mengembangkan sistem yang sudah terintegrasi antara Kompiler, Desain, Koding dan lainnya. Dengan menggunakan IDE ini pekerjaan kita sebagai programmer akan mudah dan juga memanajemen project yang sedang dikembangkan sangat efisien dilakukan.
- 7. Rolly Yesputra, M.Kom | Organisasi Komputer | 2013 12 Gambar 2.10 IDE Visual Studio Penjelasan dari beberapa item yang sudah ditandai diatas, yang terdapat didalam jendela visual basic. Elemen tersebut merupakan elemen yang sering digunakan didalam memprogram aplikasi. Untuk lebih mudah memahami nya akan dipaparkan pada pembahasan berikut ini. 1. Menu Bar Menubar merupakan suatu baris menu yang mempunyai 11 menu utama, masing-masing memiliki sub menu dan peritnah lengkap dengan shortcut key. Gambar 2.11 Menu Bar Visual Basic Menu Bar Toolbar Standar Form Design Solution Explorer Properties Windows Jendela Toolbox Jendela Error List
- 8. Rolly Yesputra, M.Kom | Organisasi Komputer | 2013 13 2. Toolbar Standar Toolbar standar merupakan suatu baris menu yang mempunyai fungsi yang sama pada setiap tool standard pada umumnya. Seperti fungsi untuk menyimpan, meng-copy, menambah project baru, mengatur tampilan program dan masih banyak yang lainnya. Gambar 2.12 Tolbar Standar Visual Basic 3. Form Design Form design merupakan suatu lembar form yang berfungsi untuk merancang tampilan aplikasi secara visual dengan menempatkan kontrol-kontrol yang diperlukan. Gambar 2.13 Form Design Visual Basic 4. Toolbox Toolbox merupakan suatu jendela yang berfungsi untuk Menampung komponen-komponen standard.
- 9. Rolly Yesputra, M.Kom | Organisasi Komputer | 2013 14 Gambar 2.14 Toolbox 5. Solution Explorer Solution Explorer merupakan suatu jendela yang berfungsi untuk menampilkan objek yang akan anda gunakan untuk membuat aplikasi seperti form , class, dan objek lainnya. Gambar 2.15 Jendela Solution Explorer
- 10. Rolly Yesputra, M.Kom | Organisasi Komputer | 2013 15 6. Properties windows Properties windows merupakan suatu jendela yang berfungsi untuk mengatur nilai properties dari masing-masing komponen yang akan digunakan. Gambar 2.16 Jendela Properties 7. Error List Error list merupakan suatu jendela yang digunakan untuk menampilkan setiap kesalahan dari pembuatan kode program suatu aplikasi. Gambar 2.17 Jendela Error List 2.3 Membuat Aplikasi Pertama Visual Basic Sekarang kita akan membuat aplikasi pertama, dimana aplikasi ini akan menampilkan nama pengguna pada title form yang akan ditampilkan tersebut, tetapi sebelum ditampilkan penggunakan akan mengisi input dialog terlebih dahulu. U ntuk itu anda dapat mengikuti langkah-langkah dibawah ini :
- 11. Rolly Yesputra, M.Kom | Organisasi Komputer | 2013 16 1. Dengan menggunakan project yang sudah kita buat sebelumnya, maka akan kita lanjutkan memprogram project tersebut, klik ganda form1 tersebut Lihat gambar 2.18 dibawah ini. Gambar 2.18 Membuat Kode Pada event Form_Load 2. Selanjutnya akan tampil jendela kode program , lihat pada gambar 2.19 dibawah ini. Gambar 2.19 Jendela Kode Program Untuk menampilkan jendela kode juga bisa menggunakan perintah klik kanan form maka akan tampil pop up menu, dan pilih view code, lihat pada gambar dibawah ini: Gambar 2.20 Popup Menu Jendela Kode Klik Ganda Pada Lembar Form Jendela Kode Items Event Tempat Mengetikan Kode dengan event Form1_load
- 12. Rolly Yesputra, M.Kom | Organisasi Komputer | 2013 17 Begitupun jika anda ingin kembali ke desain setelah anda berada didalam jendela kode, jadi anda juga bisa menggunakan perintah yang sama, yaitu tinggal klik kanan jendela kode kemudian pilih view designer seperti gambar dibawah ini. Gambar 2.21 Popup menu untuk kembali ke disain form Dengan cara pintas anda juga bisa berpindah ke jendala kode dengan menggunakan keyboard yaitu dengan menekan tombol F7. 3. Ketikkan kode program pada event form1_load seperti dibawah ini. Gambar 2.22 Menuliskan Kode Pada Event Form1_Load Penjelasan kode program diatas : Baris 1 merupakan pembuatan sebuah class dengan nama Form1, nama dari sebuah Class akan otomatis dibuat sesuai dengan nama file tersebut. Jika nama file nya Form1.vb maka nama class nya adalah Form1. Sedangkan kata kunci public itu merupakan hak akses class, akan dibahas pada pertemuan berikut nya dan ada pembahasan tersendiri yaitu OOP.
- 13. Rolly Yesputra, M.Kom | Organisasi Komputer | 2013 18 Baris 2 merupakan awal dari sebuah sub atau method dengan nama Form_Load yang juga sebagai sebuah event load terhadap form1 tersebut. Baris 4 merupakan deklarasi variabel nama dengan tipe data String dan pada baris ke 5 variabel tersebut akan diberi nilai dengan data yang diinputkan dari inputbox. Baris 6 merupakan perintah untuk memberikan title untuk form1 tersebut yang diambil dari gabungan kata dan variabel nama. 4. Menjalankan aplikasi pertama sekalai itu sangat mudah Anda cukup menekan tombol F5 atau klik icon Start Debugging , Lihat Gambar 2.23 dibawah ini. Gambar 2.23 Menjalankan Aplikasi 5. Setelah aplikasi dijalankan jika tidak terjadi kesalahan kode program yang dibuat, maka akan tampil kotak dialog dan Anda tinggal memasukkan nama anda dan tekan tombol OK, hasilnya seperti gambar dibawah ini : Icon Start Debugging untuk menjalankan aplikasi
- 14. Rolly Yesputra, M.Kom | Organisasi Komputer | 2013 19 Gambar 2.24 Aplikasi Yang Sedang Berjalan 2.4 Menyimpan Aplikasi Pertama Setelah membuat aplikasi pertama, kita harus menyimpan project yang sudah kita buat tersebut dengan langkah-langkah sebegai berikut : 1. Pilih Menu Bar Klik File Save All dialog save project 2. Silahkan Anda cari dimana tempat penyimpanan project yang Anda buat 3. Ganti nama project bila perlu, dan tekan tombol Save 4. Dan Diikuti dengan menyimpan form dan file1 lainnya. 5. Jika sudah selesai, maka penyimpanan project sudah selsai. 5. Metode Pembelajaran : Ceramah, tanya jawab, dan latihan 6. Materi Latihan : Materi latihan bab 1 yaitu membuat aplikasi form MDI (Multi Document Interface) dimana ada dua form yang akan kita buat, form pertama akan menjadi form induk atau MDI dan form yang kedua akan menjadi form anak. Dan beberapa fungsi untuk menampilkan pesan sederhana. 1. Ketik Disini 2. Klik Tombol OK 2. Klik Tombol OK
- 15. Rolly Yesputra, M.Kom | Organisasi Komputer | 2013 20 Gambar 2.25 Tampilan Program MDI Langkah-langkah membuat aplikasi latihan diatas : 1. Buat Project dengan nama ProjectPertamaKu buat dua buah form dengan nama FormInduk dan FormAnak lihat gambar dibawah ini : Gambar 2.26 Project Latihan dan Form 2. Selanjutnya klik ganda Form Induk untuk masuk ke jendela kode dan ketikkan program dibawah ini pada sub FormInduk_load . Me.isMdiContainer = true Koding ini berfungsi untuk menjadikan FormInduk untuk menjadi Form MDI dan nanti akan bertindak sebagai Form Utama yang akan menampung form lainnya. Dan selanjutnya ketikkan program dibawah ini , Lihat gambar 2.27.
- 16. Rolly Yesputra, M.Kom | Organisasi Komputer | 2013 21 Gambar 2.27 Koding Latihan Pertama Penjalasan Koding diatas : Baris 4 merupakan kode yang yang dimulai dari deklarasi variabel dengan nama variabel pesan dan variabel tersebut akan diberi nilai yang didapatkan dari inputan dari messagebox yang merupakan nilai yes atau no, itu terlihat dari jenis button yang digunakan yaitu MessageBoxButton.YesNo itu menandakan akan ada dua tombol yang disediakan pada messagebox tersebut, jika user memilih tombol yes berarti user memberikan nilai dengan indek 0, dan jika memilih no maka akan memberikan nilai dengan indek 1, tetapi didalam bahasa pemrograman VB Net perintah untuk mencek action yang diberikan user maka sudah ada kode khusus yaitu DialogResult yang akan mencek yes atau no. Baris 6 merupakan kode yang berfungsi untuk melakukan cek kondisi pemilihan button yang di tekan oleh user dan sintak tersebut akan memberikan nilai boolean (true/false). Jika nilai yang diberikan true maka akan dijalankan kode program baris 7 dan 8. Baris 7 berfungsi untuk mengatur Form Induk dari form Anak tersebut, dan baris 8 digunakan untuk menampilkan FormAnak tersebut. 7. Materi Tes : Soal Latihan pertemuan kedua bab pertama, buatlah satu form MDI dan buatlah beberapa form anak minimal 5 buah dan tampilkan seperti gambar dibawah ini.
- 17. Rolly Yesputra, M.Kom | Organisasi Komputer | 2013 22 Gambar 2.28 Soal Latihan Bab Pertama