Memahami Konsep Grid Pada Tkinter

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. 

 

Memahami Konsep Grid Pada Tkinter (Bag. 1) 
Oleh: Thami Rusdi Agus 

1 

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. 
Column 

Row 

 

 
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. 

Memahami Konsep Grid Pada Tkinter (Bag. 1) 
Oleh: Thami Rusdi Agus 

2 

 
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 
Padding  adalah  sebuah  properti  untuk  mengatur  jarak  pisah  antara  tepi 
suatu  elemen,  satuannya  adalah  pixel.  Padding  ini  dimiliki  oleh  semua 
kontrol  kecuali  window.  Padding    terbagi  2,  yaitu  padding  X  (padx)  dan 
padding  Y  (pady).  Padding  X  mengatur  tepi  kiri  dan  kanan,  sedangkan 
padding  Y  mengatur  tepi  atas  dan  bawah.  Sebagai  contoh,  saya  memiliki 
sebuah  frame  dengan  sebuah  kontrol  label  di  dalamnya  dengan 
pengaturan  padding  X  adalah  15  pixel  pada  kontrol  label  dan  padding  Y 
adalah 10 pixel pada kontrol label, lihat perbandingan berikut: 

Memahami Konsep Grid Pada Tkinter (Bag. 1) 
Oleh: Thami Rusdi Agus 

3 

 
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 
Bingkai  atau  frame  merupakan  sebuah  container  yang  berfungsi  sebagai 
wadah  meletakkan  kontrol‐kontrol.  Seperti  halnya  window,  frame  tidak 
terlihat  dan  juga  memiliki  grid  system.  Sebagai  contoh  ,  saya  akan 
membuat  2  buah  frame  dengan  name  frameSatu  dengan  ukuran 
300x200  di  sebelah  kiri  pada  posisi  grid  (0,0)  dan  frameDua  dengan 
ukuran 150x100 di sebelah kanan pada posisi grid (0,1): 

Memahami Konsep Grid Pada Tkinter (Bag. 1) 
Oleh: Thami Rusdi Agus 

4 

 
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) 



s menempel posisi selatan (south ‐ bawah) 



w menempel posisi barat (west ‐ kiri) 

Memahami Konsep Grid Pada Tkinter (Bag. 1) 
Oleh: Thami Rusdi Agus 

5 



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 
Kontrol adalah elemen pada window/frame secara umum adalah apapun 
yang  sifatnya  dapat  berinteraksi,  contohnya  adalah  tombol,  input/entry, 
label, tabel, combobox, dsb. Sebagai contoh, saya ingin membuat satu buah 

Memahami Konsep Grid Pada Tkinter (Bag. 1) 
Oleh: Thami Rusdi Agus 

6 

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 
adalah  menggabungkan  beberapa  petak  grid  menjadi  satu  (merge  cell 
pada Excel). Jika rowspan adalah menggabungkan petak pada baris, maka 
colspan adalah menggabungkan petak pada kolom. 

Memahami Konsep Grid Pada Tkinter (Bag. 1) 
Oleh: Thami Rusdi Agus 

7 

 
 
rowspan 

 

colspan 

 
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 *

# Buat objek utama Tkinter
root = Tk()

Memahami Konsep Grid Pada Tkinter (Bag. 1) 
Oleh: Thami Rusdi Agus 

8 

# 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 
Setelah  membuat  frame,  maka  kita  akan  meletakkan  kontrol‐kontrol 
seperti label, entry dan button. 

Memahami Konsep Grid Pada Tkinter (Bag. 1) 
Oleh: Thami Rusdi Agus 

9 

 
Keterangan letak posisi masing‐masing kontrol pada grid frame adalah 
sebagai berikut: 
− Label 'Username' pada grid posisi baris 0 kolom 0 
− Label 'Password' pada grid posisi baris 1 kolom 0 
− Entry 'Username' pada grid posisi baris 0 kolom 1 
− Entry 'Password' pada grid posisi baris 1 kolom 1 
− Button pada grid posisi baris 2 kolom 1, dengan menempelkannya 
(sticky) pada posisi east/timur/kanan. 
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 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)
entryUsername.grid(row=0, column=1)
# Buat objek entry
entryPassword = Entry(frameUtama)

Memahami Konsep Grid Pada Tkinter (Bag. 1) 
Oleh: Thami Rusdi Agus 

10 

# 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.  
 
Tentu  tulisan  ini  tidak  akan  berhenti  sampai  sini,  karena  masih  akan  ada 
kelanjutan materi yang lebih menarik lagi dan advanced. Semoga sukses! 

Memahami Konsep Grid Pada Tkinter (Bag. 1) 
Oleh: Thami Rusdi Agus 

11