BAB VII

GUI PROGRAMMING

7.1. Tujuan
1. Praktikan mampu mengimplementasikan materi – materi sebelumnya
dalam bentuk GUI pada C#, Java, dan PHP.
2. Praktikan mampu memahami penggunaan GUI dari empat bahasa
pemrograman yang berbeda(C#, Java, dan PHP).
3. Praktikan mampu membuat beberapa fungsi pada GUI Programming
dalam pemrograman C#, Java, dan PHP.
4. Praktikan dapat membedakan GUI Programming dengan CLI
Programming.

7.2. Materi
7.2.1 Pengertian GUI
GUI (Graphical User Interface) merupakan antarmuka grafis
yang memfasilitasi interaksi antara pengguna (user) dengan
program aplikasi.
Berbeda dengan CLI (Command Line Interface) dimana
dalam pemrogramannya menggunakan barisan perintah dan bukan
berupa objek. Sedangkan GUI menggunakan objek sebagai
antarmuka tampilan. Dengan GUI, user atau pengguna menjadi
lebih mudah dalam menggunakan sebuah aplikasi.

7.2.2 GUI Programming pada C#

Bahasa Pemrograman C# 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 1 New Project

Gambar 2 Tampilan form

4. Jadikan Gambar menjadi BackGround. Melalui Properties

yang ada di kanan bawah, carilah Background dan insert
image nya
 Gambar 3 Properties

5. Pilih Local Resource lalu import gambar yang telah disediakan

Gambar 4 Import Gambar

6. Gambar akan menjadi seperti ini

Gambar 5 Tampilan gambar

7. Pilih Zoom di Background Image Layout

Gambar 6 Properties pilih Zoom

8. Gambar akan berubah. Lalu, besarkan Form nya dan ikuti

Langkah yang tertera di gambar tersebut

Gambar 7 Contoh jadi gambar

9. Tools untuk menginsert seperti di gambar tersedia pada Toolbar

yang dapat di akses di bagian kiri Aplikasi atau di view dan cari
Toolbar
 Gambar 8 Menu Toolbox

10. Tambahkan ComboBox pada Pilihan dan Liter, pada 2 Button

dibawah, dinamakan Reset (yang kiri) dan Execute yang kanan.
Untuk mengubah nama dapat di akses di property (seperti
langkah Background tadi) dan carilah Text untuk diisikan di
Nota Pembelian

Gambar 9 Tampilan setelah ditambahi toolbox

11. Klik 2 kali pada Execute, lalu masukan Code ini

int pilihan;
int harga = 0;
int total = 0;
int liter = 0;
 pilihan = comboBox1.SelectedIndex;
if (comboBox1.SelectedIndex == 1)
{
harga = 5000;
liter = comboBox2.SelectedIndex +
1;//Convert.ToInt(comboBox2.SelectedValue);
total = harga * liter;

}
else if (comboBox1.SelectedIndex == 0)
{
harga = 7500;
liter = comboBox2.SelectedIndex +
1;
total = harga * liter;

}
else if (comboBox1.SelectedIndex == 2)
{
harga = 3000;
liter = comboBox2.SelectedIndex +
1;
total = harga * liter;
}
else if (comboBox1.SelectedIndex == 3)
{
harga = 4000;
liter = comboBox2.SelectedIndex +
1;
total = harga * liter;
}
textBox1.Text = "Terima kasih sudah
mengisi di Pertamini. Total harganya adalah" +
total;
}

12. Klik dua kali pada Button Reset (yang telah diganti namanya
juga) lalu masukkan Code ini
{
 comboBox1.Items.Clear();
comboBox2.Items.Clear();
textBox1.Text = String.Empty;
}

13. Hasil program yang telah dibuat

Gambar 10 Hasil tampilan program

7.2.3 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. Pada NetBeans, terdapat beberapa
komponen GUI, diantaranya : JFrame, JLabel, JTextField,
JTextArea, JComboBox, JButton, dan masih banyak lagi.
Pada percobaan ini kita akan menggunakan beberapa
komponen dari NetBeans antara lain jFrame, jLabel, jTextField,
jTextArea, jComboBox, dan jButton. Berikut langkah dari
percobaan :
1. Buka program NetBeans
2. Klik File  New Project
3. Kemudian akan muncul window seperti pada dibawah ini,
pilih Java pada categories lalu pilih Java Aplication pada
projects dan kemudian klik next

Gambar 11 New Project

4. Kemudian akan muncul window seperti pada gambar

dibawah ini. Isi project name dengan GUIkelompokXX
kemudian klik finish. (XX merupakan nomor kelompok).

Gambar 12 Memberi nama project

5. Kemudian akan terbuka lembar kerja dari project yang kita

buat, silahkan klik kanan pada package guikelompokxx, lalu
pilih New kemudian JFrame Form. Apabila muncul window
New jFrame Form, isi kolom class name dengan
“FormGUIGUE” kemudian klik finish.
 Gambar 13 Buat JFrame Form

Gambar 14 Beri nama class

6. Kemudian akan muncul tampilan seperti pada gambar berikut

ini. Pada tab navigator, klik kanan pada [jFrame] kemudian
pilih Set Layout -> Absolute Layout.

Gambar 15 Tampilan layout

 Gambar 16 Set layout lalu pilih Absolute Layout

7. Langkah selanjutnya masukan elemen label kedalam jFrame,

kemudian pada tab properties hapus nilai yang ada pada
kolom text. Kemudian klik button […] yang ada disebelah
kanan icon.

Gambar 17 Properties

8. Kemudian akan muncul jendela jLabel-icon seperti pada

gambar dibawah ini, klik tombol import to project, kemudian
pilih file [PDKP] Design UI Java.jpg lalu klik next, finish dan
OK.
 Gambar 18 Import gambar

Gambar 19 Pilih gambar

9. Sesuaikan letak gambar dengan jFrame, kemudian masukan

elemen GUI sesuai pada tempat yang disediakan.

Gambar 20 Tampilan gambar interface

10. Klik kanan setiap elemen pada GUI kemudian pilih change
variable name ubah nama sebagai berikut :
1. Nama : kolomNama
2. Tujuan : kolomTujuan
3. Jumlah : kolomJumlah
4. JButton sebelah kiri : btnReset
5. jButton sebalah kanan : btnHitung
 6. total : kolomTotal
7. report : kolomReport

Gambar 21 Pilih Change variable name

11. Setelah itu hapus setiap nilai yang ada pada kolomNama,
kolomJumlah, kolomTotal dan kolomReport dengan cara
mengklik element tersebut kemudian klik kanan dan pilih
edit text kemudian kosongkan nilainya.

Gambar 22 Hapus nilai pada edit text

12. Konfigurasikan pada setiap elemen jTextField (kolomNama,

kolomJumlah, kolomTotal, kolomReport)
1. Background = [240,240,240]
2. Border = No Border
13. Rubah text pada button dengan cara mengklik element
tersebut kemudian klik kanan dan pilih edit text kemudian
ubah nilainya menjadi Reset untuk btnReset dan Hitung
untuk btnHitung.
14. Klik pada kolom tujuan kemudian pada tab properties klik
button … pada model seperti pada gambar dibawah ini,
kemudian ganti nilainya seperti pada gambar dibawah ini.
Kemudian klik OK.
 Gambar 23 Properties model

Gambar 24 Beri nama pada model

15. Tekan Shift + F6 untuk melihat design yang kita buat. Maka
tampilannya kurang lebih sama dengan gambar dibawah ini.

Gambar 25 Tampilan interface

16. Kemudian double klik btnHitung dan tambahkan kode

berikut ini
String nama = kolomNama.getText();
Integer jumlah =
Integer.parseInt( kolomJumlah.getText() );
int tujuan = kolomTujuan.getSelectedIndex();
int harga = 0;
 int total = 0;
switch(tujuan){
case (0):
harga = 50000;
break;
case (1) :
harga = 75000;
break;
}
total = harga * jumlah;
kolomTotal.setText("Rp. "+total);
kolomReport.setText("Pelanggan "+nama+"
berhasil membeli \ntiket travel tujuan
"+kolomTujuan.getItemAt(tujuan)+ " \nsebanyak
"+jumlah+" tiket");

17. Kemudian klik btnReset dan tambahkan baris kode dibawah

ini
kolomNama.setText("");
kolomJumlah.setText("");
kolomTotal.setText("");
kolomReport.setText("");

18. Jalankan program dengan menekan Shift + F6

Gambar 26 Hasil GUI Program

7.2.4 GUI Programming pada PHP

 Pada bahasa pemrograman PHP untuk membuat aplikasi
berbasis GUI, kita bisa menggunakan aplikasi Notepad++, Sublime
Text dan Atom. 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 Sublime Text
2. Pilih menu File/New.
3. Masukan source code berikut ini.
<html>
<head>
<title>Praktikum DKP 2019</title>
<head>

<body>
<form action="hasil.php" method="post">
<label for="nama">Nama:</label>
<input name="nama" >
</br></br>
<label for="nim">Nim :</label>
<input name="nim">
</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>
 Pilih hobby anda : <br/>

<input type="checkbox" name="check1"

value="Membaca">Membaca<br/>
<input type="checkbox" name="check2"
value="Makan">Makan<br/>
<input type="checkbox" name="check3"
value="Tidur">Tidur<br/>
<input type="checkbox" name="check4"
value="Bermain Game">Bermain Game<br/>
<input type="submit" value="OK"/>
</form>

</body>
</html>

4. Simpan file ke folder xampp/htdocs/PraktikumGUI. Beri

nama index.php.

Gambar 1. 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.
<html>
<head>
<title>Praktikum DKP 2019</title>
<head>
<body>
<table>
 <tr>
<td >Nama Mahasiswa : <?php echo $nama =
$_POST['nama']; ?></td>
</tr>
<tr>
<td>Nim Mahasiswa : <?php echo $nim =
$_POST['nim']; ?></td>
</tr>
<tr>
<td> <?php $jk = $_POST['jk'];
if ($jk == 'pria')
{
$hasil = 'Selamat datang mas '.
$nama;
}
else
{
$hasil = 'Selamat datang mbak '.
$nama;
}
echo $hasil;?></td>
</tr>
<tr>
<td>
Hobby anda adalah : </br>
<?php
if (isset($_POST['check1'])) {
echo $_POST['check1']." <br/>";
}
if (isset($_POST['check2'])) {
echo $_POST['check2']." <br/>";
}
if (isset($_POST['check3'])) {
echo $_POST['check3']." <br/>";
}
if (isset($_POST['check4'])) {
echo $_POST['check4']." <br/>";
}
?></td>
 </tr>
</table>
</body>
</html>

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

hasil.php.

Gambar 2. Menyimpan file hasil.php

8. Buka aplikasi XAMPP. Jalankan modul Apache dengan

menekan tombol Start.

Gambar 3. Aplikasi XAMPP

9. Jalankan aplikasi PHP menggunakan browser. Akses

localhost/praktikum/index.php.

Gambar 4. Mengakses aplikasi PHP

10. Selamat mencoba!

Gambar 5. Tampilan index.php

Gambar 6. Tampilan hasil.php