Praktek Pengembangan GUI dengan C#

(1)

(2)

Praktek Pengembangan GUI dengan C#

Sebuah Pengantar untuk Mengembangkan GUI

Penulis:

Rosa Andrie Asmara Putra Prima Arhadi Kadek Suarjuna Batubulan Lia Nur Enis Ratna Wijayanti Odhitya Desta Triswidrananta Sofyan Noor Arief

Arie Rachmad Syulistyo

Penerbit:

Polinema Press

(3)

PRAKTEK PEMROGAMAN GUI DENGAN C#

Sebuah Pengantar untuk Mengembangkan GUI Hak Cipta ©Rosa Andrie Asmara

Hak Cipta ©Putra Prima Arhadi

Hak Cipta ©Kadek Suarjuna Batubulan

Hak Cipta ©Lia Nur Enis Ratna Wijayanti

Hak Cipta ©Odhitya Desta Triswidrananta

Hak Cipta ©Sofyan Noor Arief

Hak Cipta ©Arie Rachmad Syulistyo

Hak Terbit pada POLINEMA PRESS

Penerbit POLINEMA PRESS, Politeknik Negeri Malang Jl. Soekarno-Hatta no.09 PO BOX 04 Malang 65141 Telp. (0341) 404424, 404425

Fax. (0341) 404420

UPT. Percetakan dan Penerbitan Gedung AU ground floor

[email protected] www.polinemapress.org press.polinema.ac.id

Anggota APPTI (Asosiasi Penerbit Perguruan Tinggi Indonesia) no. 207/KTA/2016

Anggota IKAPI (Ikatan Penerbit Indonesia) no.

177/JTI/2017

Cetakan Pertama, Desember 2019 ISBN :

xiv; 157 hlm.; 15,5 x 23 cm

Setting & Layout : S. Hariyanto Cover Design : Avin Rizaldy

Hak cipta dilindungi undang-undang. Dilarang memperbanyak karya tulis ini dalam bentuk dan dengan cara apapun, termasuk fotokopi, tanpa izin tertulis dari penerbit. Pengutipan harap menyebutkan sumber.

(4)

Sanksi Pelanggaran Pasal 113 Undang-Undang Nomor 28 Tahun 2014

Tentang Hak Cipta

1) Setiap Orang yang dengan tanpa hak melakukan pelanggaran hak ekonomi sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf i untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 1 (satu) tahun dan/atau pidana denda paling banyak Rp100.000.000 (seratus juta rupiah).

2) Setiap Orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf c, huruf d, huruf f, dan/atau huruf h untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 3 (tiga) tahun dan/atau pidana denda paling banyak Rp500.000.000,00 (lima ratus juta rupiah).

3) Setiap Orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf a, huruf b, huruf e, dan/atau huruf g untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 4 (empat) tahun dan/atau pidana denda paling banyak Rp1.000.000.000,00 (satu miliar rupiah).

4) Setiap Orang yang memenuhi unsur sebagaimana dimaksud pada ayat (3) yang dilakukan dalam bentuk pembajakan, dipidana dengan pidana penjara paling lama 10 (sepuluh) tahun dan/atau pidana denda paling banyak Rp4.000.000.000,00 (empat miliar rupiah).

(5)

Kata Pengantar

Puji syukur kehadirat Allah SWT. Atas limpahan nikmat serta karunia sehingga kami mendapat kesempatan untuk menyelesaikan penulisan buku bertajuk “Praktik Pemrograman Gui”. Buku ini bertujuan untuk mengenalkan tools Visual Studio dan langkah-langkah untuk membuat projek maupun animasi menggunakan Visual Studio.

Visual Studio digunakan untuk proses pembelajaran Pemrograman Gui di Politeknik Negeri Malang di Jurusan Teknologi Informasi pada mahasiswa tingkat 2 lebih tepatnya semester 4. Hasil proses pembelajaran mahasiswa membuat tugas akhir berupa Create, Reset, Update dan Delete.

Dari pengalaman dosen pengampu dapat diambil kesimpulan bahwa Visual Studio merupakan tools yang lengkap namun kompleks bagi mahasiswa atau orang awam yang sama sekali belum pernah mencoba.

Dari pengalaman tersebut kami merasa diperlukan modul atau buku yang menjelaskan setiap langkah dengan jelas dan detail.

Penulisan buku ini tak lepas dari peran serta pihak-pihak yang telah banyak memberikan kontribusi mereka. Untuk itu penulis mengucapkan banyak terima kasih kepada team teaching atas dukungan untuk membuat modul atau tutorial dengan jelas dan detail serta kami ucapkan terima kasih kepada Politeknik Negeri Malang yang telah memberikan kepercayaan kepada kami menjadi Dosen dan dukungan untuk membuat buku. Tak lupa penulis ucapkan juga terima kasih kepada Jurusan Teknologi Informasi Politeknik Negeri Malang pada khususnya yang selalu menjadi motivasi bagi para akademisinya untuk terus berkarya.

Dan tentu saja penghargaan setinggi-tingginya kepada seluruh tim Jurusan

(6)

Teknologi Informasi, khususnya para pengajar mata kuliah Pemrograman Gui.

Terakhir, penulis meminta maaf jika ada konten pada buku ini yang tidak tepat, akan tetapi kami berharap agar kekurangan tersebut tidak mengurangi esensi tujuan penulis penulisan pada buku ini. Semoga buku ini menjadi salah satu sarana untuk bersama-sama membangun Indonesia dari sisi akademis dalam waktu sesingkat mungkin.

Akhir kata, tim penulis mengucapkan selamat membaca, selamat mengambil manfaat ilmu dari buku ini.

Politeknik Negeri Malang, Malang September 2017 Tim Penulis

(7)

Daftar Isi

Halaman Judul ... i

Kata Pengantar ………...v

Daftar Isi ... vii

Daftar Gambar ………..………....…….viii

Bab 1 ...1

Pengenalan Visual Studio ...1

Bab 2 ...22

Percabangan Dan Pengulangan ...22

Bab 3 ...38

Object Oriented Programming ...39

Bab 4 ...55

Hello World Desktop dan Form Input Output ...56

Bab 5 ...83

Validating (Validasi) ...84

Bab 6 ...97

Validating II ...98

Bab 7 ... 108

Gui Component (Music Player) ... 109

Bab 8 ... 123

Koneksi Data Base dan CRUD ... 124

Bab 9 ... 137

CRUD II ... 138

Daftar Pustaka ……… 153

(8)

Daftar Gambar

Gambar 1. 1 Bagian-Bagian Penting pada Visual Studio...4

Gambar 1. 2 Daftar Text ...6

Gambar 1. 3 Halaman Visual Studio ...7

Gambar 1. 4 Console ...8

Gambar 1. 5 Code Editor ...9

Gambar 1. 7 Console Application ...10

Gambar 1. 8 Window Layout ...10

Gambar 1. 9 Windows Form Application ...11

Gambar 1. 10 Solution Explorenama ...11

Gambar 1. 11 Form1.cs ...12

Gambar 1. 12 Form Designer ...13

Gambar 1. 13 Start ...13

Gambar 1. 15 Local ...15

Gambar 1. 16 Watch ...15

Gambar 1. 17 Autos ...16

Gambar 1. 18 Local ...16

Gambar 1. 21 Immediate ...17

Gambar 1. 22 Immediate ...17

Gambar 1. 23 stepinto ...18

Gambar 1. 24 Debugging...18

Gambar 1. 25 Luas Persegi ...19

Gambar 1. 26 Rumus ...19

Gambar 1. 27 Step Into ...20

Gambar 1. 28 Locals ...20

Gambar 1. 29 Persegi ...20

(9)

Gambar 1. 30 Hasil ...20

Gambar 1. 31 Locals ...21

Gambar 2. 2 Hasil ...25

Gambar 2. 4 Hasil Output...27

Gambar 2. 11 Hasil Output ...32

Gambar 3. 1 MS. Visual Studio C# ...42

Gambar 3. 2 Windows Forms Application ...45

Gambar 3. 3 Solution Explorer ...46

Gambar 3. 4 Windows Form ...46

Gambar 3. 6 Generate Class for Rekening in Windows Forms ATM ...48

Gambar 3. 7 Rekening.cs ...48

Gambar 3. 10 Form1.cs ...50

Gambar 3. 11 Form 1 ...51

(10)

Gambar 3. 14 Kode Editor ...53

Gambar 4. 1 Menu Strip ...57

Gambar 4. 2 Sub Menu ...58

Gambar 4. 3 Data Grid View ...58

Gambar 4. 4 Window Add Column ...59

Gambar 4. 5 Combo Box ...60

Gambar 4. 6 Form ...61

Gambar 4. 7 Models ...62

Gambar 4. 8 Class Mahasiswa ...62

Gambar 4. 9 Class Agama ...63

Gambar 4. 10 Menu Strip ...63

Gambar 4. 11 Compile Data Mahasiswa ...64

Gambar 4. 12 MessageBox ...65

Gambar 4. 13 Form Mahasiswa ...65

Gambar 4. 14 Form Agama ...65

Gambar 4. 16 Form Agama dan Form Mahasiswa ...66

Gambar 4. 18 Data Grid View ...67

Gambar 4. 21 Menu Mahasiswa ...68

Gambar 5. 1 Windows Forms Application ...85

Gambar 5. 2 Properties “MaxLength” ...86

Gambar 5. 2 Properties “Validating” ...86

Gambar 5. 4 Code Editor “Validating” ...88

Gambar 5. 5 Properties “PasswordChar” ...89

Gambar 5. 6 Code Editor “PasswordValidating ...89

(11)

Gambar 5. 7 Code Editor “ConfirmPassword” ...90

Gambar 5. 8 Properties ”CharacterCasing” ...91

Gambar 5. 9 Code Editor “NamaIdentitas” ...92

Gambar 5. 10 Code Editor “NomorIdentitas” ...92

Gambar 5. 11 Properties “Mask” ...94

Gambar 5. 12 Properties”MaskCustom” ...94

Gambar 5. 13 Properties “MaskPhoneNumber” ...95

Gambar 5. 14 Properties “MaskHP” ...95

Gambar 5. 15 Code Editor “ValidatingEmail”...96

Gambar 6. 1 Forms Application ...99

Gambar 6. 2 Add Class ... 100

Gambar 6. 3 Add System Code ... 101

Gambar 6. 4 Code Editor “EmptyValidation” ... 101

Gambar 6. 5 Code Editor “ConfirmPassword” ... 101

Gambar 6. 6 Code Editor “TextAndSpace”... 102

Gambar 6. 7 Code Editor “NumberValidation” ... 102

Gambar 6. 8 Code Editor “EmailValidation” ... 102

Gambar 6. 9 Code Editor “FullFillTextValidation” ... 103

Gambar 6. 10 Code Editor “ComboBoxValidation” ... 103

Gambar 6. 11 Code Editor “RadioButtonValidation” ... 103

Gambar 6. 12 Code Editor “Construktor” ... 104

Gambar 6. 13 Code Editor “UsernamseValidating”... 104

Gambar 6. 14 Code Editor “ConfirmPasswordVAlidating” ... 104

Gambar 6. 15 Code Editor “NamaTextChanged” ... 105

Gambar 6. 16 Code Editor “NomorTextChanged” ... 105

Gambar 6. 17 Code Editor “EmailValidating”... 105

Gambar 6. 18 Code Editor “RTRWValidating ... 106

Gambar 6. 19 Code Editor ”ComboBoxClick” ... 106

Gambar 6. 20 Code Editor “RadioButtonClick” ... 106

Gambar 7. 1 Windows Media Player Component ... 111

Gambar 7. 2 Windows Media Player Toolbox ... 112

(12)

Gambar 7. 4 Komponen TableLayoutPanel ... 113

Gambar 7. 5 Komponen Tambahan ... 113

Gambar 7. 6 Gambar Sub Menu Strip ... 115

Gambar 7. 7 Code Editor ... 115

Gambar 7. 7 Open File ... 116

Gambar 7. 8 ListMusic Media Player ... 116

Gambar 7. 9 Code Editor “Timer” ... 117

Gambar 7. 10 Code Editor “Listmusic” ... 117

Gambar 7. 11 Code Editor “Play” ... 117

Gambar 7. 12 Code Editor “Pause”... 118

Gambar 7. 13 Code Editor “Stop” ... 118

Gambar 7. 14 Code Editor “First” ... 118

Gambar 7. 15 Code Editor “Previous” ... 119

Gambar 7. 16 Code Editor “Next” ... 119

Gambar 7. 17 Code Editor “Last”... 119

Gambar 7. 18 Code Editor “Trackbar” ... 120

Gambar 7. 19 Tampilan Video ... 120

Gambar 7. 20 Tampilan Music... 121

Gambar 8. 1 Coloumn Database... 125

Gambar 8. 2 Form CRUD ... 125

Gambar 8. 3 Solution Explore ... 126

Gambar 8. 4 Add Data ... 127

Gambar 8. 5 Designer From Database ... 127

Gambar 8. 6 Connection Properties ... 128

Gambar 8. 7 Entity Data Model ... 128

Gambar 8. 8 Entity Framework Tables ... 129

Gambar 8. 9 Security Warning ... 129

Gambar 8. 10 Rebuild ... 130

Gambar 8. 11 DataBindings ... 131

Gambar 8. 12 Select Object ... 131

Gambar 8. 13 DataBindings CustomerID ... 132

Gambar 8. 14 DataBindings Fullname ... 132

Gambar 8. 15 Code Editor Form ... 133

(13)

Gambar 8. 16 Code Editor Button New ... 133

Gambar 8. 17 Editor Button Edit ... 133

Gambar 8. 18 Code Editor Button Save ... 134

Gambar 8. 19 Code Editor TextBox Search ... 134

Gambar 8. 20 Code Editor DataGridView ... 134

Gambar 8. 21 Code Editor Button Cancel ... 135

Gambar 8. 22 Choose Data Source ... 136

Gambar 9. 1 Column Database ... 139

Gambar 9. 2 New Data Source ... 139

Gambar 9. 3 Choose Data Source Type ... 140

Gambar 9. 4 Add Connection ... 141

Gambar 9. 5 Data Connection ... 142

Gambar 9. 6 Database Object ... 142

Gambar 9. 7 Connect to Database ... 143

Gambar 9. 8 Form CRUD ... 143

Gambar 9. 9 Choose Data Source ... 145

Gambar 9. 10 Code Editor Add System ... 145

Gambar 9. 11 Code Editor Connection ... 145

Gambar 9. 12 Connection String ... 146

Gambar 9. 13 Code Editor Load data... 146

Gambar 9. 14 Code Editor Form Load ... 146

Gambar 9. 15 Form DataGridView ... 147

Gambar 9. 16 Code Editor DataGridView ... 147

Gambar 9. 17 Code Editor DataGridView ... 147

Gambar 9. 18 Form Panel ... 148

Gambar 9. 19 Code Editor Button Save ... 148

Gambar 9. 20 Menyimpan Data di DataGridView ... 149

Gambar 9. 21 Code Editor Button Update ... 149

Gambar 9. 22 Update Data Forms... 150

Gambar 9. 23 Code Editor Button Delete ... 150

Gambar 9. 24 Form Delete ... 151

Gambar 9. 25 Button Refresh ... 151

Gambar 9. 26 Button Search ... 152