Download - Modul BAB IX - GUI Programming
BAB IX
GUI PROGRAMMING
9.1 Tujuan
1. Praktikan mampu mengimplementasikan materi – materi sebelumnya
dalam bentuk GUI pada visual basic, C#, Java, dan PHP.
2. Praktikan mampu memahami penggunaan GUI dari empat bahasa
pemrograman yang berbeda(visual basic, C#, Java, dan PHP).
3. Praktikan mampu membuat beberapa fungsi pada GUI Programming
dalam pemrograman visual basic, C#, Java, dan PHP.
4. Praktikan dapat membedakan GUI Programming dengan CLI
Programming.
9.2 Materi
9.2.1. Pengertian GUI
Antarmuka grafis atau biasa kita sebut Graphical User
Interface yang merupakan kepanjangan dari GUI. GUI sendiri
merupakan antarmuka grafis yang memfasilitasi interaksi antara
pengguna (user) dengan program aplikasi.
Berbeda dengan CLI atau Command Line Interface dimana
dalam memrogramnya menggunakan barisan perintah dan bukan
berupa objek. GUI menggunakan objek sebagai antarmuka
tampilan, dengan GUI pula user atau pengguna menjadi lebih
mudah dalam menggunakan sebuah aplikasi.
9.2.2. GUI Programming pada Visual Basic
Pada bahasa pemrograman Visual Basic untuk membuat
aplikasi berbasis GUI, kita bisa menggunakan aplikasi Visual
Studio. Microsoft Visual Studio merupakan sebuah perangkat
lunak lengkap yang dapat digunakan untuk melakukan
pengembangan aplikasi, baik itu aplikasi bisnis, aplikasi personal,
ataupun komponen aplikasinya, dalam bentuk aplikasi console,
aplikasi Windows, ataupun aplikasi Web.
Untuk mencoba membuat aplikasi berbasis GUI pada bahasa
pemrograman Visual Basic, ikuti langkah berikut ini:
1. Buka aplikasi Visual Studio.
2. Pilih menu File/New/Project.
3. Pilih Visual Basic, kemudian pilih Windows Form
Application.
Gambar 1. New Project
Gambar 2. Tampilan Visual Studio
4. Untuk memasukan kontrol ke dalam aplikasi, buka Toolbox
di sebelah kiri bidang kerja.
Gambar 3. Toolbox
5. Pilih Label dan drag ke dalam Form seperti pada tampilan
program berikut ini.
Gambar 4. Tampilan program
6. Atur properties Text dari Label1 seperti berikut ini.
Gambar 5. Properties kontrol Label1
7. Masukan juga kontrol Button, Combobox, dan RadioButton
ke dalam Form.
Gambar 6. Tampilan program
8. Ubah properties Text tiap kontrol sehingga tampilan program
menjadi seperti berikut ini.
Gambar 7. Tampilan program
9. Pilih kontrol ComboBox1, pilih properties Items.
Gambar 8. Properties Items pada ComboBox1
10. Masukan data seperti berikut ini.
Gambar 9. Input data untuk ComboBox1
11. Saatnya memasukan source code ke dalam program. Pilih
kontrol RadioButton1, pilih Events di dalam Properties. Lalu
double-click di kotak kosong di sebelah kanan tulisan
“CheckedChanged”.
Gambar 10. Events
Gambar 11. Pilih CheckedChanged
12. Ketikan source code berikut.
If (RadioButton1.Checked) Then Button1.Enabled = True End If
13. Selanjutnya masukan juga source code berikut ini ke dalam
Event “CheckedChanged” pada kontrol RadioButton2.
14. Kemudian masukan source code berikut ke dalam Event
“Click” pada kontrol Button1.
15. Masukan source code berikut ke dalam Event “Load” pada
Form1.
16. Jalankan aplikasi dan liat hasilnya!
Gambar 12. Hasil ketika program dijalankan
9.2.3. GUI Programming pada C#
Sama halnya dengan Visual Basic, Bahasa Pemrograman C#
juga menggunakan Microsoft Visual Studio sebagai IDE praktikum
If (ComboBox1.Text < 18) Then MsgBox("Belum cukup umur") Else MsgBox("Selamat datang! Umur anda sekarang " + ComboBox1.Text + " tahun") End If
Button1.Enabled = False ComboBox1.DroppedDown = True
kali ini. Microsoft Visual Studio merupakan sebuah perangkat
lunak lengkap yang dapat digunakan untuk melakukan
pengembangan aplikasi, baik itu aplikasi bisnis, aplikasi personal,
ataupun komponen aplikasinya, dalam bentuk aplikasi console,
aplikasi Windows, ataupun aplikasi Web.
Untuk mencoba membuat aplikasi berbasis GUI pada bahasa
pemrograman C#, ikuti langkah berikut ini:
1. Buka aplikasi Visual Studio.
2. Pilih menu File New Project.
3. Kemudian pilih Visual C# dan Windows Form Application
Gambar 13. New project
Gambar 14. Tampilan Visual Studio
4. Untuk memasukan kontrol ke dalam aplikasi, buka Toolbox
di sebelah kiri bidang kerja.
Gambar 15. Toolbox
5. Pilih Common Controls untuk menampilkan komponen –
komponen yang akan digunakan.
6. Desain komponen – komponen seperti berikut dengan
menggunakan label, text box, dan button.
Gambar 16. Tampilan Kalkulator Sederhana
7. Saatnya memasukkan listing code kedalam setiap button yang
telah dibuat.
8. Double klik pada button “x” atau perkalian dan masukkan
listing code berikutfloat a, b, c;a = float.Parse(this.textBox1.Text);b = float.Parse(this.textBox2.Text);c = a * b;
this.textBox3.Text = Convert.ToString(c);
9. Double klik pada button “/” atau pembagian dan masukkan
listing code berikutfloat a, b, c;a = float.Parse(this.textBox1.Text);b = float.Parse(this.textBox2.Text);c = a / b;this.textBox3.Text = Convert.ToString(c);
10. Double klik pada button “+” atau pertambahan dan masukkan
listing code berikutfloat a, b, c;a = float.Parse(this.textBox1.Text);b = float.Parse(this.textBox2.Text);c = a + b;this.textBox3.Text = Convert.ToString(c);
11. Double klik pada button “-” atau pengurangan dan masukkan
listing code berikutfloat a, b, c;a = float.Parse(this.textBox1.Text);b = float.Parse(this.textBox2.Text);c = a - b;this.textBox3.Text = Convert.ToString(c);
12. Double klik pada button “CLEAR!” dan masukkan listing
code berikutthis.textBox1.Text = "";this.textBox2.Text = "";this.textBox3.Text = "";
13. Kemudian jalankan aplikasi dengan menekan “F5” dan lihat
hasilnya!
Gambar 17. Hasil perkalian
Gambar 18. Hasil pembagian
Gambar 19. Hasil pertambahan
Gambar 20. Hasil penguranan
9.2.4. GUI Programming pada Java
Pada bahasa pemrograman java untuk membuat aplikasi
berbasis GUI digunakan lah Java Swing atau Java AWT. Dalam
praktikum kali ini kita menggunakan NetBeans sebagai IDE dari
bahasa pemrograman java. Terdapat beberapa komponen GUI pada
NetBeans yaitu JFrame, JLabel, JTextField, JTextArea,
JComboBox, JButton, dan masih banyak lagi. Dalam praktikum
kali ini kita akan menggunakan beberapa komponen pada NetBeans
untuk membentuk suatu program sederhana berbasis GUI. Program
yang akan kita buat merupakan program dengan input berupa text.
Berikut merupakan langkah – langkah nya :
1. Buka aplikasi NetBeans
2. Pilih File New Project
3. Pada langkah pertama akan muncul pilihan, pilih Java pada
categories lalu pilih Java Aplication dan next
Gambar 21. New project
4. Selanjutnya beri nama project anda setelah selesai pilih
finish.
Gambar 22. Memberi nama project
5. Kemudian akan muncul tampilan seperti gambar berikut
Gambar 23. Tampilan NetBeans
6. Langkah selanjutnya masukan komponen panel, text field,
button, dan label.
7. Desain komponen tersebut seperti gambar berikut
Gambar 24. Tampilan program
8. Kemudian beri nama variable setiap text field pada desain,
dengan cara klik kanan text field kemudian pilih change
variable name.
9. Setelah itu kita akan memasukkan listing code untuk
menjalankan fungsi dari aplikasi sederhana ini.
10. Pada langkah ini kita akan memanfaatkan fungsi event
handler untuk mengaktifkan fungsi yang kita inginkan, klik
kanan pada button OK! Properties Events pilih
“actionPerformed”
Gambar 25. Event pada JButton
11. Tuliskan listing code berikut pada event handler button
tersebutprivate void
btnOKActionPerformed(java.awt.event
.ActionEvent evt) {
lblKlmpk.setText(txtKlmpk.getText
());
lblNama1.setText(txtNama1.getText
());
lblNama2.setText(txtNama2.getText
());
lblNim1.setText(txtNim1.getText()
);
lblNim2.setText(txtNim2.getText()
);
}
12. Jalankan project tersebut dengan menekan “SHIFT+F6”
13. Berikut merupakan hasil running project (sebelum dan
setelah menekan tombol OK) dan liat hasilnya!
Gambar 26. Hasil program
Gambar 27. Hasil program
9.2.5. GUI Programming pada PHP
Pada bahasa pemrograman PHP untuk membuat aplikasi
berbasis GUI, kita bisa menggunakan aplikasi Notepad++.
Notepad++ adalah sebuah aplikasi penyunting teks dan penyunting
source code yang berjalan di sistem operasi Windows. Notepad++
menggunakan komponen Scintilla untuk dapat menampilkan dan
menyunting teks dan source code berbagai bahasa pemrograman.
Untuk mencoba membuat aplikasi berbasis GUI pada bahasa
pemrograman PHP, ikuti langkah berikut ini:
1. Buka aplikasi Notepad++.
2. Pilih menu File/New.
3. Masukan source code berikut ini.
4. Simpan file ke folder xampp/htdocs/Praktikum. Beri nama
index.php.
<html> <head> <title>Praktikum DKP</title> <head> <body> <form action="hasil.php" method="post"> <label for="nama">Nama:</label> <input name="nama" id="nama_gudang"> </br> </br> <label for="jk">Jenis Kelamin:</label></td> <Select name="jk" id="jk"> <option value='pria'>--Pria--</option> <option value='wanita'>--Wanita--</option> </Select> </br> </br> <input type="submit" value="OK"/>
Gambar 28. Menyimpan file index.php
5. Buat file baru dengan memilih menu File/New.
6. Masukan source code berikut ini ke file yang baru saja
dibuat.
7. Simpan file ke folder xampp/htdocs/Praktikum. Beri nama
hasil.php.
<html> <head> <title>Praktikum DKP</title> <head> <body> <?php $nama = $_POST['nama']; $jk = $_POST['jk']; if ($jk == 'pria') { $hasil = 'Selamat datang mas '.$nama; } else { $hasil = 'Selamat datang mbak '.$nama; } echo $hasil; ?> </body></html>
Gambar 29. Menyimpan file hasil.php
8. Buka aplikasi XAMPP. Jalankan modul Apache dengan
menekan tombol Start.
Gambar 30. Aplikasi XAMPP
9. Jalankan aplikasi PHP menggunakan browser. Akses
localhost/praktikum/index.php.
Gambar 31. Mengakses aplikasi PHP
10. Selamat mencoba!
Gambar 32. Tampilan index.php
Gambar 33. Tampilan hasil.php
9.3 Latihan
Buatlah sebuah aplikasi sederhana berbasis GUI dengan menerapkan
salah satu materi dari Bab III sampai Bab VIII. Buat dalam bahasa
pemrograman Visual Basic, C#, Java, dan PHP!
9.4 Tugas
Buatlah sebuah aplikasi berbasis GUI dengan menerapkan minimal 3
materi dari Bab II sampai Bab VIII. Semakin banyak materi yang diterapkan,
nilai semakin baik. Aplikasi tiap kelompok harus berbeda. Gunakan salah
satu bahasa pemrograman yang paling kalian pahami!