Membangun Aplikasi GUI Fungsional dengan Tkinter
Bagian 1: Persiapan
Pada bagian ini, kita akan menyiapkan semua yang dibutuhkan dan mempelajari pilar-pilar utama yang membentuk setiap aplikasi Tkinter, mulai dari instalasi hingga pembuatan aplikasi pertama yang fungsional.
Persiapan Lingkungan Kerja
Sebelum menulis kode kita harus memastikan lingkungan pengembangan kita sudah siap.
Untuk Windows:
- Kunjungi https://www.python.org/downloads/
- Download Python versi terbaru (minimal 3.7)
- Jalankan installer dan pastikan centang "Add Python to PATH"
- Klik "Install Now"
Untuk macOS:
- Kunjungi https://www.python.org/downloads/
- Download Python versi terbaru
- Jalankan installer .pkg dan ikuti instruksi
Untuk Linux (Ubuntu/Debian):
Verifikasi Instalasi Python
Buka terminal (atau PowerShell/Command Prompt di Windows) dan ketik perintah berikut untuk memastikan Python terinstal dan dapat diakses.
Anda akan melihat versi Python yang terinstal, misalnya Python 3.9.7.
Verifikasi Tkinter
Tkinter merupakan bagian dari standard library Python. Untuk memastikannya aktif, jalankan interpreter Python dengan mengetik python atau python3 di terminal, lalu masukkan kode berikut:
Perintah ini akan membuka sebuah jendela kecil berisi demo widget. Jika jendela ini muncul, Tkinter Anda siap digunakan. Jika terjadi eror, kemungkinan instalasi Python Anda tidak lengkap dan perlu diinstal ulang, pastikan opsi "tcl/tk and IDLE" tercentang saat instalasi.
1.2 Jendela Utama (Root Window)
Jendela utama atau root window adalah komponen fundamental dari setiap aplikasi GUI Tkinter. Jendela ini berfungsi sebagai container utama yang menampung semua widget lainnya. Tanpa jendela utama, aplikasi GUI tidak dapat berjalan.
Setiap aplikasi Tkinter dimulai dengan membuat instance dari kelas Tk(), yang secara otomatis membuat jendela utama. Jendela ini memiliki siklus hidup yang dikelola oleh event loop, yaitu sistem yang terus berjalan untuk menangani interaksi pengguna seperti klik mouse, penekanan keyboard, atau penutupan jendela.
Mari kita bangun jendela ini tahap demi tahap.
Praktikum 1.1: Membuat Jendela Minimal
Buka IDE dan Buat file baru bernama biodata_app.py dan ketik kode berikut:
# Mengimpor library tkinter
import tkinter as tk
# Membuat jendela utama
window = tk.Tk()
# Menjalankan event loop
window.mainloop()
Tugas: Jalankan file ini dan amati hasilnya. Anda akan melihat jendela kosong berukuran kecil.
Praktikum 1.2: Mengkonfigurasi Jendela
Tambahkan kode berikut setelah window = tk.Tk():
# Memberikan judul pada jendela
window.title("Form Biodata Mahasiswa")
# Mengatur ukuran jendela (lebar x tinggi)
window.geometry("500x600")
Tugas: Jalankan kembali dan lihat perbedaannya.
Praktikum 1.3: Mengontrol Resize
Tambahkan kode berikut sebelum window.mainloop():
Tugas: Coba jalankan dan perhatikan bahwa sekarang jendela tidak dapat diubah ukurannya.
Praktikum 1.4: Memberi Warna Latar Jendela
Kamu bisa membuat jendela utama tampil lebih menarik dengan menambahkan warna latar belakang sesuai kreativitasmu.
Tambahkan kode ini:
Ganti "skyblue" dengan warna favoritmu, misalnya:
"lightgreen""pink""beige""lightyellow""lavender"
Tugas: Setiap mahasiswa wajib mengatur warna latar belakang jendela sesuai gaya masing-masing.
💡 Tips: Kamu bisa melihat daftar warna yang didukung Tkinter di: https://www.tcl.tk/man/tcl8.4/TkCmd/colors.htm
Bagian 2: Widget Dasar Tkinter
Pada bagian ini, kita akan mempelajari widget-widget fundamental Tkinter sambil membangun aplikasi form biodata yang interaktif. Kita akan menggunakan pendekatan praktis dengan menambahkan widget satu per satu ke dalam aplikasi nyata.
2.1 Label
Label adalah widget untuk menampilkan teks atau gambar yang bersifat statis (tidak dapat diedit oleh pengguna). Label sering digunakan untuk memberikan keterangan, judul, atau petunjuk dalam antarmuka aplikasi.
Label memiliki berbagai properti yang dapat dikustomisasi, seperti font, warna, ukuran, dan perataan teks. Widget ini sangat berguna untuk memberikan konteks visual kepada pengguna tentang fungsi atau isi dari widget lain di sekitarnya.
Praktikum 2.1: Menambahkan Label Judul
Tambahkan kode berikut setelah window.resizable(False, False):
# Membuat label judul
label_judul = tk.Label(
master=window,
text="FORM BIODATA MAHASISWA",
font=("Arial", 16, "bold")
)
# Menampilkan label dengan pack
label_judul.pack(pady=20)
Tugas: Jalankan aplikasi dan lihat label judul yang muncul di bagian atas jendela.
2.2 Entry
Entry adalah widget untuk menerima input teks satu baris dari pengguna. Widget ini sangat umum digunakan dalam form untuk mengumpulkan data seperti nama, email, atau nomor identitas. Entry dapat dikonfigurasi untuk membatasi jenis karakter yang dapat dimasukkan, seperti hanya angka atau dengan panjang maksimal tertentu.
Entry memiliki metode .get() untuk mengambil teks yang diinput pengguna dan .set() untuk mengatur teks secara programatis. Widget ini juga dapat dihubungkan dengan variabel kontrol untuk memudahkan manajemen data.
Praktikum 2.2: Menambahkan Input Nama
Tambahkan kode berikut setelah label_judul.pack(pady=20):
# Label untuk input nama
label_nama = tk.Label(master=window, text="Nama Lengkap:", font=("Arial", 12))
label_nama.pack(pady=5)
# Entry untuk input nama
entry_nama = tk.Entry(master=window, width=50)
entry_nama.pack(pady=5)
Tugas: Jalankan dan coba ketik nama di kotak input yang muncul.
Praktikum 2.3: Menambahkan Input NIM dan Jurusan
Lanjutkan dengan menambahkan field NIM dan Jurusan:
# Input NIM
label_nim = tk.Label(master=window, text="NIM:", font=("Arial", 12))
label_nim.pack(pady=5)
entry_nim = tk.Entry(master=window, width=50)
entry_nim.pack(pady=5)
# Input Jurusan
label_jurusan = tk.Label(master=window, text="Jurusan:", font=("Arial", 12))
label_jurusan.pack(pady=5)
entry_jurusan = tk.Entry(master=window, width=50)
entry_jurusan.pack(pady=5)
Tugas: Test semua input field dan perhatikan layoutnya.
2.3 Geometry Manager: Grid
Grid adalah salah satu sistem layout manager di Tkinter yang mengatur widget dalam bentuk tabel dengan baris dan kolom. Grid memberikan kontrol yang lebih presisi dibandingkan pack untuk menempatkan widget pada posisi tertentu.
Dengan grid, setiap widget ditempatkan pada koordinat baris dan kolom tertentu. Grid juga mendukung spanning (widget dapat mengambil lebih dari satu baris atau kolom) dan sticky (widget dapat menempel pada sisi tertentu dari sel grid).
Praktikum 2.4: Menggunakan Frame
Hapus semua kode widget yang sudah dibuat (dari label_judul sampai entry_jurusan) dan ganti dengan:
# Membuat frame utama
main_frame = tk.Frame(master=window, padx=20, pady=20)
main_frame.pack(fill=tk.BOTH, expand=True)
main_frame.columnconfigure(1, weight=1)
Tugas: Jalankan untuk memastikan tidak ada error.
Praktikum 2.5: Menambahkan Judul dengan Grid
Tambahkan setelah main_frame.pack(...):
# Judul menggunakan grid
label_judul = tk.Label(master=main_frame, text="FORM BIODATA MAHASISWA", font=("Arial", 16, "bold"))
label_judul.grid(row=0, column=0, columnspan=2, pady=20)
Tugas: Jalankan dan pastikan judul muncul.
Praktikum 2.6: Input Nama dengan Grid
Tambahkan setelah label judul:
# Input nama dengan grid
label_nama = tk.Label(master=main_frame, text="Nama Lengkap:", font=("Arial", 12))
label_nama.grid(row=1, column=0, sticky="W", pady=5)
entry_nama = tk.Entry(master=main_frame, width=30, font=("Arial", 12))
entry_nama.grid(row=1, column=1, pady=5)
Tugas: Jalankan dan perhatikan label dan entry sekarang bersebelahan.
Praktikum 2.7: Melengkapi Input Fields
Tambahkan field NIM dan Jurusan:
# Input NIM
label_nim = tk.Label(master=main_frame, text="NIM:", font=("Arial", 12))
label_nim.grid(row=2, column=0, sticky="W", pady=5)
entry_nim = tk.Entry(master=main_frame, width=30, font=("Arial", 12))
entry_nim.grid(row=2, column=1, pady=5)
# Input Jurusan
label_jurusan = tk.Label(master=main_frame, text="Jurusan:", font=("Arial", 12))
label_jurusan.grid(row=3, column=0, sticky="W", pady=5)
entry_jurusan = tk.Entry(master=main_frame, width=30, font=("Arial", 12))
entry_jurusan.grid(row=3, column=1, pady=5)
Tugas: Test form dan lihat layout yang lebih rapi.
2.4 Radiobutton
Radiobutton adalah widget yang memungkinkan pengguna memilih satu opsi dari beberapa pilihan yang tersedia. Radiobutton bekerja dalam grup - ketika satu radiobutton dipilih, radiobutton lain dalam grup yang sama akan otomatis tidak terpilih.
Untuk mengelompokkan radiobutton, semua radiobutton dalam satu grup harus terhubung ke variabel kontrol yang sama (biasanya StringVar atau IntVar). Setiap radiobutton memiliki nilai (value) yang akan disimpan dalam variabel kontrol ketika radiobutton tersebut dipilih.
Praktikum 2.8: Membuat Variabel Kontrol
Tambahkan setelah main_frame.pack(...) dan sebelum label_judul:
Praktikum 2.9: Menambahkan Radiobutton
Tambahkan setelah entry_jurusan:
# Label jenis kelamin
label_jk = tk.Label(master=main_frame, text="Jenis Kelamin:", font=("Arial", 12))
label_jk.grid(row=4, column=0, sticky="W", pady=5)
# Frame untuk radiobutton
frame_jk = tk.Frame(master=main_frame)
frame_jk.grid(row=4, column=1, sticky="W")
# Radiobutton pria dan wanita
radio_pria = tk.Radiobutton(master=frame_jk, text="Pria", variable=var_jk, value="Pria")
radio_pria.pack(side=tk.LEFT)
radio_wanita = tk.Radiobutton(master=frame_jk, text="Wanita", variable=var_jk, value="Wanita")
radio_wanita.pack(side=tk.LEFT)
Tugas: Test radiobutton dan pastikan hanya satu yang bisa dipilih.
2.5 Checkbutton
Checkbutton adalah widget yang memungkinkan pengguna untuk memilih atau tidak memilih suatu opsi. Berbeda dengan radiobutton yang hanya memperbolehkan satu pilihan, checkbutton dapat digunakan secara independen dan multiple selection dimungkinkan.
Checkbutton biasanya terhubung dengan IntVar (0 untuk tidak dipilih, 1 untuk dipilih) atau BooleanVar. Widget ini sangat berguna untuk konfirmasi, persetujuan, atau pilihan opsional dalam form.
Praktikum 2.10: Menambahkan Checkbutton
Tambahkan variabel kontrol setelah var_jk:
Kemudian tambahkan checkbutton setelah radiobutton:
# Checkbox persetujuan
check_setuju = tk.Checkbutton(
master=main_frame,
text="Saya menyetujui pengumpulan data ini.",
variable=var_setuju,
font=("Arial", 10)
)
check_setuju.grid(row=5, column=0, columnspan=2, pady=10, sticky="W")
Tugas: Test checkbox dan perhatikan bisa dicentang/tidak dicentang.
2.6 Button dan Event Handling
Button adalah widget yang memungkinkan pengguna untuk memicu aksi atau perintah tertentu. Button dapat dikustomisasi dengan teks, gambar, warna, dan ukuran. Yang paling penting, button dapat dihubungkan dengan fungsi menggunakan parameter command.
Event handling adalah mekanisme untuk merespons aksi pengguna seperti klik button, penekanan keyboard, atau pergerakan mouse. Dalam Tkinter, event handling biasanya dilakukan dengan mendefinisikan fungsi callback yang akan dieksekusi ketika event tertentu terjadi.
Praktikum 2.11: Membuat Fungsi Submit
Tambahkan di bagian atas file, setelah import tkinter as tk:
from tkinter import messagebox
def submit_data():
# Cek checkbox
if var_setuju.get() == 0:
messagebox.showwarning("Peringatan", "Anda harus menyetujui pengumpulan data!")
return
# Ambil data dari form
nama = entry_nama.get()
nim = entry_nim.get()
jurusan = entry_jurusan.get()
jenis_kelamin = var_jk.get()
# Cek field kosong
if not nama or not nim or not jurusan:
messagebox.showwarning("Input Kosong", "Semua field harus diisi!")
return
# Tampilkan hasil
hasil = f"Nama: {nama}\nNIM: {nim}\nJurusan: {jurusan}\nJenis Kelamin: {jenis_kelamin}"
messagebox.showinfo("Data Tersimpan", hasil)
Tugas: Pastikan fungsi ini ditulis di bagian atas, bukan di dalam kode GUI.
Praktikum 2.12: Menambahkan Button
Tambahkan setelah checkbox:
# Tombol submit
btn_submit = tk.Button(
master=main_frame,
text="Submit Biodata",
font=("Arial", 12, "bold"),
command=submit_data
)
btn_submit.grid(row=6, column=0, columnspan=2, pady=20, sticky="EW")
Tugas: Test aplikasi lengkap! Coba isi form dan klik submit.
Bagian 3: Layout Management dan Widget Tambahan
Pada bagian ini, kita akan fokus meningkatkan kualitas antarmuka dari aplikasi biodata kita. Kita akan belajar cara mengelompokkan widget dengan Frame, menambahkan input multi-baris dengan Text dan Scrollbar, dan membuat layout yang responsif.
3.1 Frame
Frame adalah widget container yang digunakan untuk mengelompokkan widget lain secara logis dan visual. Frame berfungsi seperti kotak invisible yang dapat menampung multiple widget dan memberikan struktur hierarki pada aplikasi GUI.
Frame sangat berguna untuk mengorganisir layout yang kompleks, memberikan padding atau border pada grup widget, dan memudahkan manajemen layout dengan geometry manager. Frame juga dapat memiliki background color, border, dan relief untuk memberikan efek visual.
Praktikum 3.1: Membuat Frame Input dengan Border
Ganti kode dari label_nama sampai check_setuju dengan:
# Frame khusus untuk input dengan border
frame_input = tk.Frame(master=main_frame, relief=tk.GROOVE, borderwidth=2, padx=10, pady=10)
frame_input.grid(row=1, column=0, columnspan=2, sticky="EW")
Tugas: Jalankan dan lihat frame dengan border muncul (masih kosong).
Praktikum 3.2: Memindahkan Input ke Frame Baru
Tambahkan input fields di antara frame_input dan frame_input.grid :
# Input nama di dalam frame_input
label_nama = tk.Label(master=frame_input, text="Nama Lengkap:", font=("Arial", 12))
label_nama.grid(row=0, column=0, sticky="W", pady=2)
entry_nama = tk.Entry(master=frame_input, width=30, font=("Arial", 12))
entry_nama.grid(row=0, column=1, pady=2)
# Input NIM di dalam frame_input
label_nim = tk.Label(master=frame_input, text="NIM:", font=("Arial", 12))
label_nim.grid(row=1, column=0, sticky="W", pady=2)
entry_nim = tk.Entry(master=frame_input, width=30, font=("Arial", 12))
entry_nim.grid(row=1, column=1, pady=2)
# Input Jurusan di dalam frame_input
label_jurusan = tk.Label(master=frame_input, text="Jurusan:", font=("Arial", 12))
label_jurusan.grid(row=2, column=0, sticky="W", pady=2)
entry_jurusan = tk.Entry(master=frame_input, width=30, font=("Arial", 12))
entry_jurusan.grid(row=2, column=1, pady=2)
Tugas: Test dan lihat input fields sekarang dalam kotak dengan border.
Praktikum 3.3: Menambahkan Radiobutton dan Checkbox
Lanjutkan di dalam frame_input setelah entry_jurusan.grid:
# Jenis kelamin di dalam frame_input
label_jk = tk.Label(master=frame_input, text="Jenis Kelamin:", font=("Arial", 12))
label_jk.grid(row=3, column=0, sticky="W", pady=2)
frame_jk = tk.Frame(master=frame_input)
frame_jk.grid(row=3, column=1, sticky="W")
radio_pria = tk.Radiobutton(master=frame_jk, text="Pria", variable=var_jk, value="Pria")
radio_pria.pack(side=tk.LEFT)
radio_wanita = tk.Radiobutton(master=frame_jk, text="Wanita", variable=var_jk, value="Wanita")
radio_wanita.pack(side=tk.LEFT)
# Checkbox di dalam frame_input
check_setuju = tk.Checkbutton(
master=frame_input,
text="Saya menyetujui pengumpulan data ini.",
variable=var_setuju,
font=("Arial", 10)
)
check_setuju.grid(row=4, column=0, columnspan=2, pady=10, sticky="W")
Praktikum 3.4: Menyesuaikan Posisi Button
Ubah posisi button submit menjadi:
# Button submit (posisi disesuaikan)
btn_submit.grid(row=2, column=0, columnspan=2, pady=20, sticky="EW")
Tugas: Test aplikasi dan pastikan semua berfungsi dengan layout yang lebih rapi.
3.2 Text Widget
Text widget adalah komponen untuk input dan tampilan teks multi-baris. Berbeda dengan Entry yang hanya mendukung satu baris, Text widget dapat menampung paragraf teks, mendukung formatting sederhana, dan memiliki kemampuan editing yang lebih lengkap.
Text widget memiliki sistem indeks yang unik menggunakan format "baris.kolom" (misal "1.0" berarti baris 1 kolom 0). Widget ini juga mendukung tags untuk formatting dan dapat diintegrasikan dengan scrollbar untuk konten yang panjang.
3.3 Scrollbar
Scrollbar adalah widget yang memungkinkan pengguna untuk menggulir konten yang tidak muat dalam area tampilan. Scrollbar biasanya dipasangkan dengan widget lain seperti Text, Listbox, atau Canvas.
Scrollbar bekerja dengan sistem command binding - scrollbar mengirim perintah ke widget target, dan widget target mengirim informasi posisi kembali ke scrollbar. Ini menciptakan sinkronisasi dua arah yang smooth.
Praktikum 3.5: Menambahkan Input Alamat
Sisipkan setelah entry_jurusan di frame_input:
# Input alamat dengan Text widget
label_alamat = tk.Label(master=frame_input, text="Alamat:", font=("Arial", 12))
label_alamat.grid(row=3, column=0, sticky="NW", pady=2)
# Frame untuk Text dan Scrollbar
frame_alamat = tk.Frame(master=frame_input, relief=tk.SUNKEN, borderwidth=1)
frame_alamat.grid(row=3, column=1, pady=2)
Praktikum 3.6: Menambahkan Scrollbar
Lanjut sisipkan di dalam frame_alamat:
# Scrollbar untuk alamat
scrollbar_alamat = tk.Scrollbar(master=frame_alamat)
scrollbar_alamat.pack(side=tk.RIGHT, fill=tk.Y)
# Text widget untuk alamat
text_alamat = tk.Text(master=frame_alamat, height=5, width=28, font=("Arial", 12))
text_alamat.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
# Hubungkan scrollbar dengan text
scrollbar_alamat.config(command=text_alamat.yview)
text_alamat.config(yscrollcommand=scrollbar_alamat.set)
Praktikum 3.7: Menyesuaikan Posisi Widget Lainnya
Ubah posisi jenis kelamin dan checkbox:
# Ubah row jenis kelamin menjadi 4
label_jk.grid(row=4, column=0, sticky="W", pady=2)
frame_jk.grid(row=4, column=1, sticky="W")
# Ubah row checkbox menjadi 5
check_setuju.grid(row=5, column=0, columnspan=2, pady=10, sticky="W")
Tugas: Test Text widget dan scrollbar. Coba ketik alamat panjang dan scroll.
Praktikum 3.8: Update Fungsi Submit
Perbarui fungsi submit_data untuk mengambil data alamat:
def submit_data():
if var_setuju.get() == 0:
messagebox.showwarning("Peringatan", "Anda harus menyetujui pengumpulan data!")
return
nama = entry_nama.get()
nim = entry_nim.get()
jurusan = entry_jurusan.get()
alamat = text_alamat.get("1.0", tk.END).strip() # Baris baru ini
jenis_kelamin = var_jk.get()
if not nama or not nim or not jurusan or not alamat: # Tambahkan alamat
messagebox.showwarning("Input Kosong", "Semua field harus diisi!")
return
hasil = f"Nama: {nama}\nNIM: {nim}\nJurusan: {jurusan}\nAlamat: {alamat}\nJenis Kelamin: {jenis_kelamin}"
messagebox.showinfo("Data Tersimpan", hasil)
Tugas: Test aplikasi lengkap dengan field alamat.
3.4 Responsive Layout
Layout responsif adalah kemampuan antarmuka untuk beradaptasi dengan perubahan ukuran jendela. Dalam Tkinter, ini dicapai dengan menggunakan sistem weight pada grid geometry manager dan sticky options.
Weight menentukan seberapa banyak ruang ekstra yang akan diberikan ke baris atau kolom tertentu ketika jendela diperbesar. Sticky menentukan bagaimana widget akan "menempel" pada sisi-sisi sel grid ketika sel tersebut lebih besar dari widget.
Praktikum 3.9: Penerapan Responsive Layout
Perhatikan setelah baris main_frame.pack(...) kita telah menambahkan ini:
main_frame.grid_columnconfigure(1, weight=1) digunakan untuk memungkinkan kolom ke-1 pada main_frame agar dapat melebar secara proporsional, sehingga elemen di dalamnya dapat menyesuaikan lebar jendela saat ukuran window berubah.
Praktikum 3.10: Mengaktifkan Resize Jendela
Ubah baris resizable menjadi:
Tugas: Test dengan mengubah ukuran jendela dan lihat form menyesuaikan.
Bagian 4: State Management dan Interaktivitas
Pada bagian ini, kita akan membuat aplikasi kita lebih "pintar" dengan menambahkan validasi real-time, shortcut keyboard, dan menu bar standar aplikasi.
4.1 Variable Tracing dan Real-time Validation
Variable tracing adalah mekanisme dalam Tkinter yang memungkinkan kita untuk "mengamati" perubahan pada variabel kontrol (seperti StringVar, IntVar) dan menjalankan fungsi callback setiap kali variabel tersebut berubah.
Dengan menggunakan metode .trace_add(), kita dapat membuat aplikasi yang responsif dan memberikan feedback langsung kepada pengguna. Ini sangat berguna untuk validasi form real-time, update tampilan dinamis, atau sinkronisasi data antar widget.
Praktikum 4.1: Membuat StringVar untuk Entry
Tambahkan setelah variabel var_setuju:
# Variabel untuk real-time validation
var_nama = tk.StringVar()
var_nim = tk.StringVar()
var_jurusan = tk.StringVar()
Praktikum 4.2: Membuat Fungsi Validasi
Tambahkan fungsi validasi setelah fungsi submit_data:
def validate_form(*args):
nama_valid = var_nama.get().strip() != ""
nim_valid = var_nim.get().strip() != ""
jurusan_valid = var_jurusan.get().strip() != ""
setuju_valid = var_setuju.get() == 1
if nama_valid and nim_valid and jurusan_valid and setuju_valid:
btn_submit.config(state=tk.NORMAL)
else:
btn_submit.config(state=tk.DISABLED)
Praktikum 4.3: Menghubungkan StringVar dengan Entry
Ubah ketiga entry menjadi:
# Entry dengan textvariable
entry_nama = tk.Entry(master=frame_input, width=30, font=("Arial", 12), textvariable=var_nama)
entry_nim = tk.Entry(master=frame_input, width=30, font=("Arial", 12), textvariable=var_nim)
entry_jurusan = tk.Entry(master=frame_input, width=30, font=("Arial", 12), textvariable=var_jurusan)
Praktikum 4.4: Mengaktifkan Trace
Tambahkan setelah var_jurusan:
# Aktifkan trace untuk validasi real-time
var_nama.trace_add("write", validate_form)
var_nim.trace_add("write", validate_form)
var_jurusan.trace_add("write", validate_form)
Praktikum 4.5: Update Checkbox dan Button
Ubah checkbox untuk memanggil validasi:
check_setuju = tk.Checkbutton(
master=frame_input,
text="Saya menyetujui pengumpulan data ini.",
variable=var_setuju,
font=("Arial", 10),
command=validate_form # Tambahkan ini
)
Ubah button agar awalnya disabled:
btn_submit = tk.Button(
master=main_frame,
text="Submit Biodata",
font=("Arial", 12, "bold"),
command=submit_data,
state=tk.DISABLED # Tambahkan ini
)
Tugas: Test validasi real-time. Button hanya aktif jika field nama, nim, jurusan, telah diisi dan checkbox dicentang.
4.2 Event Binding
Event binding adalah mekanisme yang memungkinkan kita menghubungkan event spesifik (seperti klik mouse, penekanan keyboard, atau pergerakan kursor) dengan fungsi callback. Berbeda dengan command yang hanya tersedia untuk beberapa widget dan hanya merespons satu jenis aksi (biasanya klik), event binding lebih fleksibel dan dapat diterapkan pada widget apa pun untuk merespons berbagai macam event.
Mekanisme ini menggunakan metode .bind() dengan sintaks widget.bind(event_string, fungsi_callback). Event string adalah teks khusus yang mendefinisikan event (misalnya <Return> untuk tombol Enter), dan fungsi callback harus bisa menerima satu argumen, yaitu objek event itu sendiri.
Praktikum 4.6: Menambahkan Efek Hover pada Tombol
Kita akan memberikan umpan balik visual kepada pengguna dengan mengubah warna tombol submit saat kursor mouse berada di atasnya.
Tambahkan dua fungsi baru ini setelah fungsi validate_form:
# Fungsi untuk efek hover saat mouse masuk
def on_enter(event):
if btn_submit['state'] == tk.NORMAL:
btn_submit.config(bg="lightblue")
# Fungsi untuk efek hover saat mouse keluar
def on_leave(event):
btn_submit.config(bg="SystemButtonFace") # Warna default tombol
Sekarang, tambahkan kode binding berikut setelah btn_submit.grid(...):
# Menghubungkan event Enter (mouse masuk) dan Leave (mouse keluar) ke button
btn_submit.bind("<Enter>", on_enter)
btn_submit.bind("<Leave>", on_leave)
Tugas: Jalankan aplikasi. Isi form hingga tombol submit aktif, lalu gerakkan kursor mouse Anda ke atas dan ke luar dari tombol tersebut. Amati perubahan warnanya.
Praktikum 4.7: Menambahkan Shortcut Keyboard
Untuk meningkatkan efisiensi, kita akan memungkinkan pengguna untuk men-submit form dengan menekan tombol Enter di salah satu field input.
Tambahkan fungsi shortcut ini setelah fungsi on_leave:
# Fungsi untuk shortcut tombol Enter
def submit_shortcut(event=None):
# Memanggil fungsi submit_data jika tombol aktif
if btn_submit['state'] == tk.NORMAL:
submit_data()
Selanjutnya, tambahkan kode binding berikut di akhir bagian layout, sebelum window.mainloop():
# Menghubungkan event <Return> (tombol Enter) ke fungsi shortcut
entry_nama.bind("<Return>", submit_shortcut)
entry_nim.bind("<Return>", submit_shortcut)
entry_jurusan.bind("<Return>", submit_shortcut)
text_alamat.bind("<Return>", submit_shortcut)
Tugas: Jalankan aplikasi. Isi form hingga tombol submit aktif. Posisikan kursor di salah satu kotak entry, lalu tekan tombol Enter. Amati bahwa form berhasil di-submit.
4.3 Menu Bar
Menu bar adalah komponen standar pada sebagian besar aplikasi desktop, terletak di bagian paling atas jendela dan berisi menu-menu seperti File, Edit, dan Help. Dalam Tkinter, ini dibuat menggunakan widget Menu.
Praktikum 4.8: Membuat Menu Bar Utama
Pertama, kita akan membuat menu bar kosong dan menampilkannya di jendela utama.
Tambahkan kode berikut sebelum window.mainloop():
Tugas: Jalankan aplikasi. Anda akan melihat sebuah bar kosong muncul di bagian atas jendela aplikasi Anda (pada macOS, menu bar akan muncul di bagian atas layar).
Praktikum 4.9: Menambahkan Menu "File"
Sebuah menu bar tidak berguna tanpa menu di dalamnya. Mari kita tambahkan menu "File".
Tambahkan kode berikut setelah window.config(menu=menu_bar):
# Membuat menu "File"
file_menu = tk.Menu(master=menu_bar, tearoff=0)
# Menambahkan menu "File" ke menu bar utama
menu_bar.add_cascade(label="File", menu=file_menu)
Tugas: Jalankan kembali aplikasi. Sekarang Anda akan melihat menu "File" di menu bar, meskipun masih kosong jika diklik. Opsi tearoff=0 berfungsi untuk menghilangkan garis putus-putus di awal menu.
Praktikum 4.10: Menambahkan Item dan Aksi pada Menu
Sekarang kita akan mengisi menu "File" dengan item-item yang fungsional.
Pertama, buatlah fungsi-fungsi callback untuk setiap item menu. Letakkan ini di bagian atas file, bersama fungsi-fungsi lainnya atau setelah def submit_shortcut:
# Fungsi untuk menu "Simpan Hasil"
def simpan_hasil():
# Mengambil teks dari label_hasil (jika ada)
hasil_tersimpan = label_hasil.cget("text")
# Cek apakah ada hasil untuk disimpan
if not hasil_tersimpan or "BIODATA TERSIMPAN" not in hasil_tersimpan:
messagebox.showwarning("Peringatan", "Tidak ada data untuk disimpan. Mohon submit terlebih dahulu.")
return
# Menyimpan ke file teks (simulasi)
with open("biodata_tersimpan.txt", "w") as file:
file.write(hasil_tersimpan)
messagebox.showinfo("Info", "Data berhasil disimpan ke file 'biodata_tersimpan.txt'.")
# Fungsi untuk menu "Keluar"
def keluar_aplikasi():
if messagebox.askokcancel("Keluar", "Apakah Anda yakin ingin keluar dari aplikasi?"):
window.destroy()
Tambahkan item-item ke file_menu yang sudah kita buat:
# Menambahkan item-item ke dalam menu "File"
file_menu.add_command(label="Simpan Hasil", command=simpan_hasil)
file_menu.add_separator() # Menambahkan garis pemisah
file_menu.add_command(label="Keluar", command=keluar_aplikasi)
label_hasil setelah btn_submit.bind :
label_hasil = tk.Label(master=main_frame, text="", font=("Arial", 12, "italic"), justify=tk.LEFT)
label_hasil.grid(row=7, column=0, columnspan=2, sticky="W", padx=10)
Di dalam fungsi def submit_data, tambahkan baris label_hasil.config setelah baris hasil:
Tugas: Jalankan aplikasi, submit data, lalu coba gunakan menu File > Simpan Hasil untuk melihat file hasil dalam format txt. Setelah itu, coba File > Keluar. Pastikan semua berfungsi sesuai harapan.
4.4 Umpan Balik dengan MessageBox
Pada aplikasi ini, kita telah menggunakan messagebox sebagai metode utama untuk memberikan umpan balik kepada pengguna. Komponen ini sudah diterapkan dalam berbagai skenario, seperti peringatan jika ada input yang belum diisi, notifikasi saat data berhasil disimpan, hingga konfirmasi saat keluar dari aplikasi.
Penggunaan messagebox sangat efektif karena mampu menarik perhatian pengguna secara langsung melalui jendela pop-up, sehingga informasi penting tidak mudah terlewat. Dibandingkan hanya menampilkan teks di dalam window utama, pop-up seperti ini memberikan pengalaman interaksi yang lebih jelas dan responsif. Berikut ini adalah contoh tampilan messagebox yang digunakan:
Bagian 5: Final Aplikasi
Berikut adalah Tampilan dari aplikasi Form Biodata yang telah kita bangun dan sempurnakan secara bertahap.
