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 ([Link]) Then
[Link] = True
End If
13. Selanjutnya masukan juga source code berikut ini ke dalam
Event CheckedChanged pada kontrol RadioButton2.
If ([Link]) Then
[Link] = False
End If
14. Kemudian masukan source code berikut ke dalam Event
If ([Link] < 18) Then
MsgBox("Belum cukup umur")
Else
MsgBox("Selamat datang! Umur anda sekarang "
+ [Link] + " tahun")
End If
Click pada kontrol Button1.
15. Masukan source code berikut ke dalam Event Load pada
Form1.
16. Jalankan aplikasi dan liat hasilnya!
[Link] = False
[Link] = True
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
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 berikut
float a, b, c;
a = [Link]([Link]);
b = [Link]([Link]);
c = a * b;
[Link] = [Link](c);
9. Double klik pada button / atau pembagian dan masukkan
listing code berikut
float a, b, c;
a = [Link]([Link]);
b = [Link]([Link]);
c = a / b;
[Link] = [Link](c);
10. Double klik pada button + atau pertambahan dan masukkan
listing code berikut
float a, b, c;
a = [Link]([Link]);
b = [Link]([Link]);
c = a + b;
[Link] = [Link](c);
11. Double klik pada button - atau pengurangan dan masukkan
listing code berikut
float a, b, c;
a = [Link]([Link]);
b = [Link]([Link]);
c = a - b;
[Link] = [Link](c);
12. Double klik pada button CLEAR! dan masukkan listing
code berikut
[Link] = "";
[Link] = "";
[Link] = "";
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
tersebut
private void
btnOKActionPerformed([Link]
evt) {
[Link]([Link]());
[Link]([Link]());
[Link]([Link]());
[Link]([Link]());
[Link]([Link]());
}
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.
<html>
<head>
<title>Praktikum DKP</title>
<head>
<body>
<form action="[Link]" 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"/>
</form>
</body>
</html>
4. Simpan file ke folder xampp/htdocs/Praktikum. Beri nama
[Link].
Gambar 28. Menyimpan file [Link]
5. Buat file baru dengan memilih menu File/New.
6. Masukan source code berikut ini ke file yang baru saja
<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>
dibuat.
7. Simpan file ke folder xampp/htdocs/Praktikum. Beri nama
[Link].
Gambar 29. Menyimpan file [Link]
8. Buka aplikasi XAMPP. Jalankan modul Apache dengan
menekan tombol Start.
Gambar 30. Aplikasi XAMPP
9. Jalankan aplikasi PHP menggunakan
browser. Akses
localhost/praktikum/[Link].
Gambar 31. Mengakses aplikasi PHP
10. Selamat mencoba!
Gambar 32. Tampilan [Link]
Gambar 33. Tampilan [Link]
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!
