Memahami Konsep Grid
Pada Tkinter (Bagian #1)
1. Target
Untuk memahami konsep grid pada Tkinter, maka kita perlu memiliki target desain aplikasi terlebih dahulu, sehingga proses pemahaman dan proses belajarnya lebih gampang.
Adapun target desain aplikasi yang akan kita buat adalah mockup seperti gambar berikut:
Dari mockup di atas, maka kita akan belajar memahami dalam menggunakan grid pada Tkinter, di posisi grid mana masing‐masing kontrol harus diletakan.
2. Pengertian
Dalam desain aplikasi, terdapat beberapa macam elemen dalam sebuah jendela (window) aplikasi, untuk itu akan saya jelaskan satu per satu.
1. Window
Window merupakan jendela utama dalam sebuah aplikasi, di mana di dalam window memuat berbagai macam interaksi terhadap kontrol‐ kontrol. Pada umumnya window memiliki judul jendela (window title) dan memiliki tombol tutup (close), ciutkan (minimize), dan lebarkan (maximize) yang diwakili oleh sebuah ikon pada masing‐masing tombol.
Kode:
# gunakan library Tkinter from tkinter import *
# Buat objek utama Tkinter dengan nama 'root' root = Tk()
# Atur judul jendela
root.wm_title("Window Name")
2. Grid
Grid merupakan sebuah konsep dalam melakukan peletakan elemen‐ elemen di dalam sebuah window. Grid tidak terlihat secara langsung, oleh karena itu untuk menggunakan grid cukup dengan membayangkannya saja. Ukuran grid tidak pasti, karena akan menyesuaikan elemen yang ada pada posisi grid tersebut.
Grid berupa petak kotak‐kotak dengan jumlah kolom (column) atau baris (row) tidak terbatas. Grid tidak hanya terbatas dimiliki oleh sebuah window, tetapi juga dimiliki oleh elemen bingkai (frame). Sebagai contoh, kita ingin meletakan sebuah frame pada posisi pada petak baris 0 dan kolom 0. Kemudian frame tersebut juga akan memiliki grid sendiri yang tidak berhubungan dengan grid pada window.
Column
R
o
w
Dapat dilihat dengan jelas bahwa ukuran grid pada posisi (0, 0) melebar menyesuaikan ukuran elemen yang berada pada posisi tersebut. Khusus elemen frame juga memiliki grid seperti halnya pada window.
Kode:
from tkinter import *
# Buat objek utama Tkinter root = Tk()
# Atur judul jendela
root.wm_title("Window Name")
# Buat objek frame dengan ukuran tertentu frameSaya = Frame(root, width=300, height=200) frameSaya.grid(row=0, column=0)
# Jalankan! root.mainloop()
3. Padding
Kode:
from tkinter import *
# Buat objek utama Tkinter root = Tk()
# Atur judul jendela
root.wm_title("Window Name")
# Buat objek frame dengan ukuran tertentu frameSaya = Frame(root, width=300, height=200) frameSaya.grid(row=0, column=0)
# Buat sebuah label pada grid frameSaya di posisi (0,0) # dan atur padding pada label tersebut
Label(frameSaya, text="Hello world!").grid(row=0, column=0, padx=15, pady=10)
# Jalankan! root.mainloop()
4. Frame
Kode:
from tkinter import *
# Buat objek utama Tkinter root = Tk()
# Atur judul jendela
root.wm_title("Window Name")
# Buat objek frame dengan ukuran tertentu frameSatu = Frame(root, width=300, height=200) frameSatu.grid(row=0, column=0)
# Buat objek frame dengan ukuran tertentu frameDua = Frame(root, width=150, height=100) frameDua.grid(row=0, column=1)
# Jalankan! root.mainloop()
5. Sticky
Dari gambar pada bagian Frame (lihat gambar di atas), posisi frameDua nampak aneh dan tidak sejajar secara umum dengan frameSatu. Agar frameDua sejajar, maka kita perlu mengatur properti sticky. Sticky atau dalam bahasa Indonesia berarti menempel, yaitu mengatur sebuah elemen agar dapat meletakan dirinya pada posisi yang tepat. Properti sticky berkaitan dengan letak posisi pada grid. Adapun nilai pada properti adalah:
default (sticky tidak diatur) maka pada posisi tengah (center) n menempel posisi utara (north ‐ atas)
e menempel posisi timur (east ‐ kanan) ne menempel posisi utara‐timur (kanan‐atas) nw menempel posisi utara‐barat (kiri‐atas) se menempel posisi selatan‐timur (kanan‐bawah) sw menempel posisi selatan‐barat (kiri‐bawah)
Kode:
from tkinter import *
# Buat objek utama Tkinter root = Tk()
# Atur judul jendela
root.wm_title("Window Name")
# Buat objek frame dengan ukuran tertentu frameSatu = Frame(root, width=300, height=200) frameSatu.grid(row=0, column=0)
frameSatu.config(background = "red")
# Buat objek frame dengan ukuran tertentu frameDua = Frame(root, width=150, height=100) frameDua.grid(row=0, column=1, sticky="n") frameDua.config(background = "blue")
# Jalankan! root.mainloop()
6. Kontrol
frame yang mana di dalamnya terdapat 3 buah kontrol yaitu label, entry dan button.
Kode:
from tkinter import *
# Buat objek utama Tkinter root = Tk()
# Atur judul jendela
root.wm_title("Window Name")
# Buat objek frame dengan ukuran tertentu frameSaya = Frame(root, width=300, height=200) frameSaya.grid(row=0, column=0, padx=10, pady=10)
# Buat objek label
labelSaya = Label(frameSaya, text="Nama anda") # Atur label pada grid (0,0) serta atur padding labelSaya.grid(row=0, column=0, padx=10, pady=5)
# Buat objek entry dengan panjang adalah 30 entrySaya = Entry(frameSaya, width=30) # Atur entry pada grid (0,1)
entrySaya.grid(row=0, column=1)
# Buat objek button
buttonSaya = Button(frameSaya, text="Button") # Atur button pada grid (0,2)
buttonSaya.grid(row=0, column=2)
# Jalankan! root.mainloop()
7. Rowspan dan Colspan
rowspan dan colspan adalah properti pada grid. Guna properti ini
3. Desain
Setelah mempelajari konsep dan beberapa pengertian di atas, saatnya membuat target jendela aplikasi yang akan kita rancang, yaitu Login Window seperti gambar di bawah:
a. Membuat jendela utama
Membuat jendela sangat mudah sekali, silakan lihat gambar dan kode di bawah:
Kode:
from tkinter import *
# Atur judul jendela
root.wm_title("Silakan Login")
# Jalankan! root.mainloop()
b. Membuat frame
Membuat frame berguna untuk mengatur ukuran jendela ke ukuran yang kita inginkan. Kita akan mengatur width=300 dan height=200, dengan
padx=20 dan pady=20. Padding perlu kita atur agar elemen di dalam
frame tidak terlalu berdekatan dengan tepi window.
Kode:
from tkinter import *
# Buat objek utama Tkinter root = Tk()
# Atur judul jendela
root.wm_title("Silakan Login")
# Buat frame dan atur ukuran ke 300x200
frameUtama = Frame(root, width=300, height=200)
# Letakkan frame pada grid (0,0) dan padding X/Y ke 20 frameUtama.grid(row=0, column=0, padx=20, pady=20)
# Jalankan! root.mainloop()
c. Membuat kontrol‐kontrol
from tkinter import *
# Buat objek utama Tkinter root = Tk()
# Atur judul jendela
root.wm_title("Silakan Login")
# Buat frame dan atur ukuran ke 300x200
frameUtama = Frame(root, width=300, height=200)
# Letakkan frame pada grid (0,0) dan padding X/Y ke 30 frameUtama.grid(row=0, column=0, padx=20, pady=20)
# Buat objek label
labelUsername = Label(frameUtama, text="Username") # Atur label pada grid (0,0)
labelUsername.grid(row=0, column=0)
# Buat objek label
labelPassword = Label(frameUtama, text="Password") # Atur label pada grid (0,0) serta atur padding labelPassword.grid(row=1, column=0)
# Buat objek entry
entryUsername = Entry(frameUtama) # Atur entry pada grid (0,1)
# Atur entry pada grid (1,1)
entryPassword.grid(row=1, column=1)
# Buat objek button
buttonLogin = Button(frameUtama, text="Button")
# Atur button pada grid (2,1) dan atur sticky agar menempel ke kanan buttonLogin.grid(row=2, column=1, sticky="e")
# Jalankan! root.mainloop()
4. Screenshot Hasil Kerja
Berikut ini adalah hasil kerja yang benar‐benar diproses oleh kode Python pada komputer (non‐mockup):
5. Penutup
Pemahaman konsep grid pada desain user interface (UI) pada Tkinter tidak akan mudah tanpa pemahaman secara mendasar. Untuk itulah tulisan ini dibuat agar dapat mempraktikkan dengan mudah disertai ilustrasi mockup pada setiap langkah desain UI.
