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!