Dari kode berbasis teks di terminal menuju jendela aplikasi yang bisa diklik — membangun GUI (Graphical User Interface) sederhana dengan Tkinter untuk kasus bisnis digital.
RPS MINGGU 15 • 2X50 MENIT
Tujuan Pembelajaran Hari Ini
Setelah pertemuan ini, Anda diharapkan mampu membangun antarmuka grafis sederhana dengan Tkinter. Secara rinci:
CAPAIAN 1 — KONSEP GUI
GUI vs CLI
Menjelaskan konsep GUI (Graphical User Interface) dan mengapa dibutuhkan dalam aplikasi bisnis digital.
CAPAIAN 2 — WIDGET DASAR
Label, Button, Entry, Frame
Membangun window dan menata widget dasar (elemen visual yang bisa dilihat/diklik pengguna).
CAPAIAN 3 — LAYOUT & EVENT
Pack, Grid, Callback
Menerapkan layout manager untuk menyusun widget, dan event handling saat tombol diklik.
CAPAIAN 4 — STUDI KASUS
Aplikasi Bisnis Digital
Mengimplementasikan GUI sederhana untuk kalkulator toko online, data pelanggan UMKM, dan sistem antrian.
Mengapa Aplikasi Butuh GUI?
Bandingkan dua cara pengguna memasukkan data harga barang di kasir toko online.
CLI — COMMAND LINE INTERFACE
Berbasis Teks
Kasir mengetik perintah input() di terminal, harus hafal urutan input, satu salah ketik program berhenti (error).
GUI — GRAPHICAL USER INTERFACE
Berbasis Visual
Kasir mengisi kotak "Harga" dan "Jumlah", lalu klik tombol "Hitung" — seperti aplikasi kasir Tokopedia Seller atau mesin EDC toko modern.
GUI (dibaca "gu-i") membuat program lebih ramah pengguna awam — pemilik warung tidak perlu tahu cara menulis kode untuk memakainya.
Bagian 1 dari 3
Dasar Tkinter: Window & Widget Pertama
Mengenal pustaka Tkinter, membangun window pertama, dan widget dasar yang membentuk sebuah antarmuka.
Apa itu Tkinter?
Tkinter adalah pustaka (library, kumpulan kode siap pakai) bawaan Python untuk membangun GUI desktop — tidak perlu instalasi tambahan.
KENAPA TKINTER?
Built-in: sudah termasuk dalam instalasi Python standar.
Sintaks relatif sederhana, cocok untuk pemula.
Cukup untuk aplikasi desktop skala kecil-menengah.
CARA MENGAKTIFKAN
import tkinter as tk
Baris ini mengimpor modul Tkinter dengan alias tk.
Tidak perlu pip install — berbeda dari NumPy di Pertemuan 9.
Anatomi Program Tkinter Minimal
Setiap aplikasi Tkinter mengikuti pola yang sama: buat jendela, isi widget, lalu jaga jendela tetap terbuka.
KODE MINIMAL (JENDELA KOSONG)
import tkinter as tk
root = tk.Tk() # 1. buat instance jendela
root.title("Toko Digital UMKM") # 2. judul jendela
root.geometry("300x150") # 3. ukuran (lebar x tinggi)
root.mainloop() # 4. jaga jendela tetap terbuka
mainloop() adalah "jantung" program GUI — ia membuat jendela terus mendengarkan aksi pengguna (klik, ketik) sampai ditutup. Tanpa baris ini, jendela langsung tertutup sendiri.
Hitung dari Nol — Walkthrough A: Membangun Window Pertama
Kasus: Anda ingin membuat jendela aplikasi kasir sederhana bernama "Toko Digital UMKM". Ikuti lima langkah berikut satu demi satu.
Langkah
Perhitungan (Kode)
Nilai (Hasil)
L1 — Impor modul
import tkinter as tk
Modul Tkinter siap dipakai dengan alias tk
L2 — Buat instance jendela
root = tk.Tk()
Objek jendela kosong tercipta di memori
L3 — Atur judul
root.title("Toko Digital UMKM")
Judul di bilah atas jendela berubah
L4 — Atur ukuran
root.geometry("300x150")
Jendela berukuran 300×150 piksel
L5 — Jalankan mainloop
root.mainloop()
Jendela tampil & tetap terbuka
Hasil akhir: kelima langkah menghasilkan jendela aplikasi kasir kosong berjudul "Toko Digital UMKM", siap diisi widget.
Menampilkan teks statis (tidak bisa diketik pengguna).
Sering dipakai sebagai keterangan di samping kotak isian.
BUTTON — TOMBOL AKSI
btn = tk.Button(root, text="Hitung")
btn.pack()
Elemen yang bisa diklik pengguna.
Aksi saat diklik diatur lewat parameter command= (dibahas Slide 10).
Widget Dasar: Entry & Frame
ENTRY — KOTAK ISIAN
ent = tk.Entry(root)
ent.pack()
harga = ent.get() # ambil isi teks
Kotak untuk input teks satu baris dari pengguna.
Method .get() mengambil isi ketikan sebagai string.
FRAME — WADAH PENGELOMPOK
grup = tk.Frame(root)
grup.pack()
lbl2 = tk.Label(grup, text="Nama")
Wadah untuk mengelompokkan widget terkait.
Berguna agar tata letak formulir tidak berantakan.
Ingat: hasil .get() selalu bertipe string — harga yang diketik "15000" harus di-int() dulu sebelum dihitung (lihat Pertemuan 2).
Event Handling: command= dan Fungsi Callback
GUI bersifat event-driven (digerakkan oleh aksi pengguna) — kode dijalankan hanya ketika pengguna berinteraksi.
CONTOH: TOMBOL MEMICU FUNGSI
def hitung_total():
harga = int(entry_harga.get())
jumlah = int(entry_jumlah.get())
label_hasil.config(text=f"Total: Rp{harga*jumlah}")
btn = tk.Button(root, text="Hitung", command=hitung_total)
Parameter command=hitung_total menyimpan fungsi callback (fungsi yang "dipanggil balik" otomatis saat tombol diklik) — tanpa tanda kurung () setelah nama fungsi.
Bagian 2 dari 3
Layout Manager: Menyusun Widget di Window
Dua cara utama Tkinter mengatur posisi widget: pack (susun berurutan) dan grid (susun baris & kolom).
Pack Manager
.pack() menyusun widget secara berurutan mengikuti sisi jendela (atas, bawah, kiri, kanan) — paling sederhana untuk tata letak vertikal.
Hasil akhir: mengetik harga 15000 dan jumlah 3, klik "Hitung" → Label menampilkan "Total: Rp45000".
Bagian 3 dari 3
Studi Kasus & Praktik Baik GUI Bisnis Digital
Menerapkan Tkinter pada dua studi kasus silabus: data pelanggan UMKM dan sistem antrian, plus praktik menangani error.
Studi Kasus: Pengelola Data Pelanggan UMKM
Formulir sederhana untuk mencatat nama dan nomor HP pelanggan toko UMKM, lalu menampilkannya dalam daftar.
STRUKTUR WIDGET
daftar = tk.Listbox(root) # menampilkan daftar pelanggan
def simpan_pelanggan():
data = f"{e_nama.get()} - {e_hp.get()}"
daftar.insert(tk.END, data) # tambah ke akhir daftar
Listbox: widget baru untuk menampilkan daftar baris data.
daftar.insert(tk.END, data) menambah data baru di baris paling bawah.
Studi Kasus: Sistem Antrian Sederhana
Label nomor antrian yang bertambah setiap kali tombol "Panggil Berikutnya" diklik — mirip layar antrian di klinik atau bank.
VARIABEL TETAP TERSIMPAN ANTAR-KLIK
nomor = 0 # variabel global di luar fungsi
def panggil_berikutnya():
global nomor
nomor += 1
label_nomor.config(text=f"Nomor: {nomor}")
global nomor membiarkan fungsi mengubah variabel di luar dirinya (lihat konsep scope, Pertemuan 6).
Setiap klik → nomor bertambah 1 → Label diperbarui.
Menangani Error dalam GUI
Pengguna awam bisa mengetik apa saja — program harus tetap "sopan" saat menerima input yang salah.
CONTOH: VALIDASI INPUT HARGA BUKAN ANGKA
from tkinter import messagebox
def hitung_total():
try:
harga = int(e_harga.get())
except ValueError:
messagebox.showerror("Input Salah", "Harga harus berupa angka!")
try/except (Pertemuan 5) mencegah program crash total; messagebox menampilkan jendela peringatan yang ramah, bukan pesan error teknis di terminal.
Latihan Praktik: Kalkulator Diskon Toko Online
Kerjakan langsung di komputer Anda selama sisa waktu pertemuan ini.
INSTRUKSI
Buat window berjudul "Kalkulator Diskon" ukuran 320×200.
Tambahkan Entry untuk harga barang dan Entry untuk persen diskon.
Tambahkan Button "Hitung Harga Akhir" dengan fungsi callback.
Rumus: harga_akhir = harga - (harga * diskon / 100).
Tampilkan hasil di Label, bungkus proses konversi dengan try/except.
Susun widget memakai grid (bukan pack) agar rapi berbaris.
Kumpulkan file .py Anda di akhir sesi via LMS — ini latihan individu, boleh berdiskusi dengan teman sebangku untuk debugging.
Ringkasan Pertemuan 14 & Penutup Semester
DASAR GUI
Tkinter & Widget
Window, Label, Button, Entry, Frame — blok bangunan dasar antarmuka grafis.
LAYOUT & EVENT
Pack, Grid, Callback
Menyusun tata letak dan menghubungkan aksi klik ke fungsi lewat command=.
STUDI KASUS
Aplikasi Bisnis Digital
Kalkulator toko, data pelanggan UMKM, sistem antrian — siap dikembangkan jadi proyek nyata.
PERJALANAN SATU SEMESTER: Dari algoritma & flowchart (P1), variabel & tipe data (P2), kontrol alur (P3), hingga OOP (P12–13), dan hari ini GUI (P14) — Anda kini bisa merangkai program teks menjadi aplikasi bisnis digital utuh yang siap dipakai orang lain.