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.
If (RadioButton2.Checked) Then
Button1.Enabled = False
End If

14. Kemudian masukan source code berikut ke dalam Event

If (ComboBox1.Text < 18) Then
MsgBox("Belum cukup umur")
Else
MsgBox("Selamat datang! Umur anda sekarang "
+ ComboBox1.Text + " tahun")
End If

Click pada kontrol Button1.

15. Masukan source code berikut ke dalam Event Load pada
Form1.
16. Jalankan aplikasi dan liat hasilnya!

Button1.Enabled = False
ComboBox1.DroppedDown = 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 = 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 berikut
float 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 berikut
float 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 berikut
float 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 berikut
this.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

tersebut
private 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.
<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"/>
</form>
</body>
</html>

4. Simpan file ke folder xampp/htdocs/Praktikum. Beri nama

index.php.

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
<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
hasil.php.

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!