Dasar GUI Programming

---

🎯 1. Pengantar GUI Programming

6

📖 Deskripsi

GUI (Graphical User Interface) adalah antarmuka visual yang memungkinkan pengguna berinteraksi dengan aplikasi menggunakan elemen grafis seperti tombol, teks, dan menu.

🧠 Narasi

Tanpa GUI, pengguna harus menggunakan terminal (CLI) yang cenderung sulit untuk pemula. GUI membuat aplikasi lebih intuitif, interaktif, dan mudah digunakan oleh semua kalangan.

---

🧩 2. Konsep Dasar GUI

📌 Elemen Utama GUI

• Window/Form → wadah utama aplikasi
• Control/Widget → elemen interaksi
• Event → aksi pengguna
• Event Handler → respon terhadap aksi

---

🔄 Diagram Konsep GUI

7

🧠 Narasi

Alur GUI:

1. User melakukan aksi (klik, input)
2. Sistem menangkap event
3. Program memproses
4. Output ditampilkan kembali ke user

---

🧱 3. Komponen GUI (Widget)

7

📊 Tabel Komponen

Komponen	Fungsi
Label	Menampilkan teks
TextBox	Input teks
Button	Aksi klik
CheckBox	Pilihan lebih dari satu
RadioButton	Pilihan tunggal
ComboBox	Dropdown
ListBox	List data

🧠 Narasi

Widget adalah “alat komunikasi” antara user dan sistem. Semakin baik pemilihan widget, semakin mudah aplikasi digunakan.

---

🎨 4. Layout Management (Pengaturan Tampilan)

6

📖 Jenis Layout

• Absolute Layout → posisi manual (x, y)
• Flow Layout → mengikuti alur
• Grid Layout → berbasis tabel
• Anchor/Dock → mengikuti ukuran window

---

🧠 Narasi

Layout menentukan apakah aplikasi:

• Rapi atau berantakan
• Responsif atau tidak
• Mudah digunakan atau membingungkan

---

⚙️ 5. Event Handling (Penanganan Event)

6

📖 Deskripsi

Event adalah aksi user, dan event handler adalah kode yang dijalankan saat event terjadi.

---

📌 Contoh Event

• Klik tombol
• Input keyboard
• Mouse hover
• Window resize

---

🧠 Narasi

GUI bersifat event-driven, artinya program “menunggu” aksi user, bukan berjalan secara linear seperti program console.

---

🧪 6. Tutorial Praktikum: GUI Sederhana (Python Tkinter)

🎯 Studi Kasus

Membuat aplikasi input nama dan menampilkan hasil.

---

💻 Kode Program

import tkinter as tk

def tampilkan():
    nama = entry.get()
    label_hasil.config(text="Halo, " + nama)

app = tk.Tk()
app.title("Aplikasi GUI Sederhana")

label = tk.Label(app, text="Masukkan Nama:")
label.pack()

entry = tk.Entry(app)
entry.pack()

button = tk.Button(app, text="Tampilkan", command=tampilkan)
button.pack()

label_hasil = tk.Label(app, text="")
label_hasil.pack()

app.mainloop()

---

🧠 Penjelasan Kode

• Entry() → input user
• Button() → trigger event
• command=tampilkan → event handler
• get() → ambil input
• config() → ubah tampilan

---

🏗️ 7. Studi Kasus Desain Form

6

📌 Contoh Form

• Form Login
• Form Registrasi
• Form Input Data

---

🧠 Narasi

Form adalah implementasi nyata GUI:

• Mengumpulkan data
• Memproses input
• Menampilkan hasil

---

⚠️ 8. Kesalahan Umum dalam GUI Programming

❌ Daftar Kesalahan

Kesalahan	Dampak
Layout berantakan	UX buruk
Tidak validasi input	Error
Event tidak ditangani	Program tidak responsif
Terlalu banyak widget	Membingungkan

🧠 Narasi

GUI bukan hanya soal tampilan, tapi juga pengalaman pengguna (user experience).

---

🎯 9. Best Practice GUI Programming

✅ Tips

• Gunakan layout yang konsisten
• Beri label yang jelas
• Validasi input user
• Gunakan warna yang nyaman
• Jangan terlalu banyak elemen

---

🎓 10. Rangkuman

📌 Inti Materi

• GUI = antarmuka visual aplikasi
• Terdiri dari widget, layout, dan event
• Bersifat event-driven
• Fokus pada interaksi user

---

📝 11. Latihan & Tugas

✏️ Latihan

1. Apa itu GUI?
2. Sebutkan 5 komponen GUI!
3. Apa fungsi event handler?

---

💻 Tugas Praktikum

Buat aplikasi:

• Input: Nama & Umur
• Tombol: “Proses”
• Output: “Halo [Nama], umur kamu [Umur] tahun”