Pengantar GUI dengan Tkinter di Python

Widget

Widget mirip dengan elemen di HTML. Anda akan menemukan berbagai jenis widget untuk berbagai jenis elemen di Tkinter. Widget adalah elemen GUI standar dan menyediakan kontrol seperti tombol, teks, menu, dan kotak teks kepada pengguna.

Mari pahami semua widget ini di Tkinter, beserta contohnya (Sumber).

• Button: Widget Button memiliki properti untuk menyalakan/mematikan. Saat pengguna mengeklik tombol, sebuah event dipicu di Tkinter.

  Sintaks: button_widget = tk.Button(widget, option=placeholder) di mana widget adalah argumen untuk jendela/frame induk sedangkan option adalah placeholder yang dapat memiliki berbagai nilai seperti warna latar depan & latar belakang, font, command (untuk pemanggilan fungsi), gambar, tinggi, dan lebar tombol.

• Canvas: Canvas digunakan untuk menggambar bentuk di GUI Anda dan mendukung berbagai metode penggambaran.

  Sintaks: canvas_widget = tk.Canvas(widget, option=placeholder) di mana widget adalah parameter untuk jendela/frame induk sedangkan option adalah placeholder yang dapat memiliki berbagai nilai seperti lebar border, warna latar belakang, tinggi dan lebar widget.

• Checkbutton: Checkbutton merekam status on-off atau true-false. Ini memungkinkan Anda memilih lebih dari satu opsi sekaligus dan bahkan membiarkannya tidak dicentang.

  Sintaks: checkbutton_widget = tk.CheckButton(widget, option=placeholder) di mana widget adalah parameter untuk jendela/frame induk sedangkan option adalah placeholder yang dapat memiliki berbagai nilai seperti judul, teks, warna latar & latar depan saat widget berada di bawah kursor, font, gambar, dll.

• Entry: Widget Entry digunakan untuk membuat kolom input atau untuk mendapatkan teks input dari pengguna di dalam GUI.

  Sintaks: entry_widget = tk.Entry(widget, option=placeholder) di mana widget adalah parameter untuk jendela/frame induk sedangkan option adalah placeholder yang dapat memiliki berbagai nilai seperti lebar border, warna latar belakang, lebar & tinggi tombol, dll.

• Frame: Frame digunakan sebagai kontainer di Tkinter untuk mengelompokkan dan mengatur widget dengan baik.

  Sintaks: frame_widget = tk.Frame(widget, option=placeholder) di mana widget adalah parameter untuk jendela/frame induk sedangkan option adalah placeholder yang dapat memiliki berbagai nilai seperti lebar border, tinggi & lebar widget, highlightcolor (warna saat widget harus difokuskan).

• Label: Label digunakan untuk membuat widget satu baris seperti teks, gambar, dll.

  Sintaks: label_widget = tk.Label(widget, option=placeholder) di mana widget adalah parameter untuk jendela/frame induk sedangkan option adalah placeholder yang dapat memiliki berbagai nilai seperti font tombol, warna latar belakang, gambar, lebar, dan tinggi tombol.

Anda dapat menemukan daftar lengkap widget di dokumentasi Python resmi.

Manajemen Geometri

Semua widget di Tkinter memiliki beberapa ukuran geometri. Ukuran geometri ini memungkinkan Anda mengatur widget di seluruh frame induk atau area widget induk.

Salah satu kelas manajemen geometri, yaitu pack(), sudah dibahas di sini.

Untuk tujuan ini, Tkinter menyediakan tiga kelas manajer geometri utama:

• pack(): Mengatur widget secara blok, dan lebar tersedia sepenuhnya ditempati olehnya. Ini adalah metode konvensional untuk menampilkan widget di jendela.
  
  
• grid(): Mengatur widget dalam struktur mirip tabel. Anda akan mempelajarinya lebih detail nanti di tutorial ini.
  
  
• place(): Bertujuan menempatkan widget pada posisi spesifik seperti yang diinstruksikan pengguna di widget induk.

Mengatur Tata Letak dan Widget

Di bagian tutorial ini, Anda akan menggunakan geometry dan widgets, dan mari lihat keajaiban Tkinter.

Untuk menata tata letak di window, Anda akan menggunakan kelas widget Frame. Mari buat program sederhana untuk melihat cara kerja Frame.

• Anda akan mendefinisikan dua frame - atas dan bawah dengan bantuan kelas pack. Kelas Frame akan membantu membuat pembagian di antara jendela. Pada dasarnya, satu jendela akan direplikasi menjadi dua sebagai bagian atas dan bawah dalam bentuk Frame.

• Terakhir, Anda akan membuat empat tombol di jendela, dua untuk setiap frame. Anda dapat memberi nama dan warna tombol sesuai keinginan sebagai parameter.

import tkinter

# Let's create the Tkinter window.
window = tkinter.Tk()
window.title("GUI")

# You will first create a division with the help of Frame class and align them on TOP and BOTTOM with pack() method.
top_frame = tkinter.Frame(window).pack()
bottom_frame = tkinter.Frame(window).pack(side = "bottom")

# Once the frames are created then you are all set to add widgets in both the frames.
btn1 = tkinter.Button(top_frame, text = "Button1", fg = "red").pack() #'fg or foreground' is for coloring the contents (buttons)

btn2 = tkinter.Button(top_frame, text = "Button2", fg = "green").pack()

btn3 = tkinter.Button(bottom_frame, text = "Button3", fg = "purple").pack(side = "left") #'side' is used to left or right align the widgets

btn4 = tkinter.Button(bottom_frame, text = "Button4", fg = "orange").pack(side = "left")

window.mainloop()

Jalankan kode di atas dan lihat keluarannya.

Grid

Mirip dengan Frame, grid adalah cara lain untuk mengatur widget. Grid menggunakan konsep baris-kolom Matrix. Mari buat analogi antara kelas grid dan gagasan baris-kolom dengan bantuan diagram di bawah.

Grid terutama menerima dua parameter row dan column. Seperti ditunjukkan pada gambar di atas, bayangkan 00 berkorespondensi dengan tombol pertama sedangkan 01 dengan tombol kedua. Dan untuk menempatkan dua tombol berdampingan, grid akan menerima parameter baris dan kolom sebagai 00 dan 01, masing-masing.

Mari gunakan checkbutton untuk memahami cara kerja kelas grid. Anda akan mendefinisikan dua checkbutton dan menentukan beberapa teks untuk kedua tombol. Status checkbutton akan ditentukan oleh onvalue dan offvalue sedangkan status saat ini dari checkbutton akan dilacak oleh IntVar(), yang akan disimpan dalam variabel terpisah. Ketika offvalue=1 dan onvalue=0 checkbutton terkait akan dicentang.

Sekarang untuk kelas grid, Anda akan meneruskan parameter row, yang akan memosisikan tombol di baris pertama jika row=0 dan di baris kedua jika row=1.

import tkinter
from tkinter import *
top = tkinter.Tk()
CheckVar1 = IntVar()
CheckVar2 = IntVar()
tkinter.Checkbutton(top, text = "Machine Learning",variable = CheckVar1,onvalue = 1, offvalue=0).grid(row=0,sticky=W)
tkinter.Checkbutton(top, text = "Deep Learning", variable = CheckVar2, onvalue = 0, offvalue =1).grid(row=1,sticky=W)
top.mainloop()

Mari jalankan kode ini dan lihat keluarannya.

Mari ambil contoh lain untuk memahami grid. Dalam contoh ini, Anda juga akan meneruskan column sebagai parameter bersama dengan row.

import tkinter
# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# You will create two text labels namely 'username' and 'password' and and two input labels for them

tkinter.Label(window, text = "Username").grid(row = 0) #'username' is placed on position 00 (row - 0 and column - 0)

# 'Entry' class is used to display the input-field for 'username' text label
tkinter.Entry(window).grid(row = 0, column = 1) # first input-field is placed on position 01 (row - 0 and column - 1)

tkinter.Label(window, text = "Password").grid(row = 1) #'password' is placed on position 10 (row - 1 and column - 0)

tkinter.Entry(window).grid(row = 1, column = 1) #second input-field is placed on position 11 (row - 1 and column - 1)

# 'Checkbutton' class is for creating a checkbutton which will take a 'columnspan' of width two (covers two columns)
tkinter.Checkbutton(window, text = "Keep Me Logged In").grid(columnspan = 2)                 

window.mainloop()

Mari lihat keluaran kode di atas!

Menakjubkan, bukan? Betapa sederhananya, dan tampilannya mirip dengan yang ditulis dengan HTML.

Fungsi Binding atau Command

Fungsi Binding atau Command adalah fungsi yang dipanggil setiap kali sebuah event terjadi atau dipicu.

Mari ambil contoh untuk memahami fungsi binding.

Anda akan mendefinisikan sebuah tombol yang, ketika diklik, memanggil fungsi bernama DataCamp_Tutorial. Selanjutnya, fungsi DataCamp_Tutorial akan membuat label baru dengan teks GUI with Tkinter!.

import tkinter
# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# creating a function called DataCamp_Tutorial()
def DataCamp_Tutorial():
    tkinter.Label(window, text = "GUI with Tkinter!").pack()

tkinter.Button(window, text = "Click Me!", command = DataCamp_Tutorial).pack()
window.mainloop()

Mari jalankan kodenya dan amati keluarannya.

Selain memanggil fungsi binding dengan klik mouse, event juga dapat dipanggil dengan gerakan mouse, mouse-over, klik, scroll, dll.

Sekarang mari lihat fungsi bind, yang menyediakan fungsionalitas yang sama seperti di atas.

Event Klik Mouse melalui Metode Bind

Metode Bind menyediakan pendekatan yang sangat sederhana untuk mengimplementasikan event klik mouse. Mari lihat tiga fungsi pra-definisi yang dapat digunakan langsung dengan metode bind.

Event klik ada tiga jenis leftClick, middleClick, dan rightClick.

• Parameter <Button-1> dari metode bind adalah event klik kiri, yaitu saat Anda mengeklik tombol kiri, metode bind akan memanggil fungsi yang ditentukan sebagai parameter kedua.
  
  
• <Button-2> untuk klik tengah
  
  
• <Button-3> untuk klik kanan

Sekarang, Anda akan mempelajari cara memanggil fungsi tertentu berdasarkan event yang terjadi.

• Jalankan program berikut dan klik tombol kiri, tengah, kanan untuk memanggil fungsi tertentu.
  
  
• Fungsi tersebut akan membuat label baru dengan teks yang ditentukan.

import tkinter
# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

#You will create three different functions for three different events
def left_click(event):
    tkinter.Label(window, text = "Left Click!").pack()

def middle_click(event):
    tkinter.Label(window, text = "Middle Click!").pack()

def right_click(event):
    tkinter.Label(window, text = "Right Click!").pack()

window.bind("<Button-1>", left_click)
window.bind("<Button-2>", middle_click)
window.bind("<Button-3>", right_click)

window.mainloop()

Sumber

Mari jalankan kode di atas.

Kotak Peringatan

Anda dapat membuat kotak peringatan di Tkinter menggunakan metode messagebox. Anda juga dapat membuat pertanyaan menggunakan metode messasgebox.

Di sini Anda akan membuat kotak peringatan sederhana dan juga membuat pertanyaan. Untuk menghasilkan peringatan, Anda akan menggunakan fungsi messagebox showinfo. Untuk membuat pertanyaan, Anda akan menggunakan metode askquestion, dan berdasarkan respons atas pertanyaan tersebut, Anda akan menampilkan sebuah Label pada GUI.

import tkinter
import tkinter.messagebox

# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# Let's create a alert box with 'messagebox' function
tkinter.messagebox.showinfo("Alert Message", "This is just a alert message!")

# Let's also create a question for the user and based upon the response [Yes or No Question] display a message.
response = tkinter.messagebox.askquestion("Tricky Question", "Do you love Deep Learning?")

# A basic 'if/else' block where if user clicks on 'Yes' then it returns 1 else it returns 0. For each response you will display a message with the help of 'Label' method.
if response == 1:
    tkinter.Label(window, text = "Yes, offcourse I love Deep Learning!").pack()
else:
    tkinter.Label(window, text = "No, I don't love Deep Learning!").pack()

window.mainloop()

Mari cepat jalankan kode di atas dan lihat keluarannya.

Merender Gambar

Jika Anda dapat mengikuti sampai di sini, maka menambahkan gambar dan ikon ke GUI seharusnya menjadi hal yang mudah. Yang perlu Anda lakukan adalah menggunakan metode PhotoImage dari Tkinter dan meneruskan file_path sebagai parameternya.

Tanpa basa-basi lagi, mari cepat tulis kode untuk menampilkan gambar di GUI.

import tkinter

# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# In order to display the image in a GUI, you will use the 'PhotoImage' method of Tkinter. It will an image from the directory (specified path) and store the image in a variable.
icon = tkinter.PhotoImage(file = "CNN.png")

# Finally, to display the image you will make use of the 'Label' method and pass the 'image' variriable as a parameter and use the pack() method to display inside the GUI.
label = tkinter.Label(window, image = icon)
label.pack()

window.mainloop()

Kerja bagus jika Anda bisa mengikuti sampai di sini!

Sebagai bonus, Anda akan membuat sebuah Kalkulator menggunakan semua pengetahuan yang telah Anda peroleh sejauh ini. Jadi, mari akhiri tutorial ini dengan catatan yang fantastis.

Membuat Kalkulator dengan Tkinter

Setiap aplikasi GUI mencakup dua langkah.

• Membuat Antarmuka Pengguna
  
  
• Menambahkan fungsionalitas ke GUI

Mari mulai membuat kalkulator. Sebagian besar kode sudah jelas, dan beberapa baris kode diberi komentar dengan penjelasan.

from tkinter import *

# Let's create the Tkinter window
window = Tk()

# Then, you will define the size of the window in width(312) and height(324) using the 'geometry' method
window.geometry("312x324")

# In order to prevent the window from getting resized you will call 'resizable' method on the window
window.resizable(0, 0)

#Finally, define the title of the window
window.title("Calcualtor")


# Let's now define the required functions for the Calculator to function properly.

# 1. First is the button click 'btn_click' function which will continuously update the input field whenever a number is entered or any button is pressed it will act as a button click update.
def btn_click(item):
    global expression
    expression = expression + str(item)
    input_text.set(expression)

# 2. Second is the button clear 'btn_clear' function clears the input field or previous calculations using the button "C"
def btn_clear():
    global expression
    expression = ""
    input_text.set("")

# 3. Third and the final function is button equal ("=") 'btn_equal' function which will calculate the expression present in input field. For example: User clicks button 2, + and 3 then clicks "=" will result in an output 5.
def btn_equal():
    global expression
    result = str(eval(expression)) # 'eval' function is used for evaluating the string expressions directly
    # you can also implement your own function to evalute the expression istead of 'eval' function
    input_text.set(result)
    expression = ""

expression = ""
# In order to get the instance of the input field 'StringVar()' is used
input_text = StringVar()

# Once all the functions are defined then comes the main section where you will start defining the structure of the calculator inside the GUI.

# The first thing is to create a frame for the input field
input_frame = Frame(window, width = 312, height = 50, bd = 0, highlightbackground = "black", highlightcolor = "black", highlightthickness = 1)
input_frame.pack(side = TOP)


# Then you will create an input field inside the 'Frame' that was created in the previous step. Here the digits or the output will be displayed as 'right' aligned
input_field = Entry(input_frame, font = ('arial', 18, 'bold'), textvariable = input_text, width = 50, bg = "#eee", bd = 0, justify = RIGHT)
input_field.grid(row = 0, column = 0)
input_field.pack(ipady = 10) # 'ipady' is an internal padding to increase the height of input field


# Once you have the input field defined then you need a separate frame which will incorporate all the buttons inside it below the 'input field'
btns_frame = Frame(window, width = 312, height = 272.5, bg = "grey")
btns_frame.pack()


# The first row will comprise of the buttons 'Clear (C)' and 'Divide (/)'
clear = Button(btns_frame, text = "C", fg = "black", width = 32, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_clear()).grid(row = 0, column = 0, columnspan = 3, padx = 1, pady = 1)
divide = Button(btns_frame, text = "", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("")).grid(row = 0, column = 3, padx = 1, pady = 1)


# The second row will comprise of the buttons '7', '8', '9' and 'Multiply (*)'
seven = Button(btns_frame, text = "7", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(7)).grid(row = 1, column = 0, padx = 1, pady = 1)
eight = Button(btns_frame, text = "8", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(8)).grid(row = 1, column = 1, padx = 1, pady = 1)
nine = Button(btns_frame, text = "9", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(9)).grid(row = 1, column = 2, padx = 1, pady = 1)
multiply = Button(btns_frame, text = "*", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("*")).grid(row = 1, column = 3, padx = 1, pady = 1)


# The third row will comprise of the buttons '4', '5', '6' and 'Subtract (-)'
four = Button(btns_frame, text = "4", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(4)).grid(row = 2, column = 0, padx = 1, pady = 1)
five = Button(btns_frame, text = "5", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(5)).grid(row = 2, column = 1, padx = 1, pady = 1)
six = Button(btns_frame, text = "6", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(6)).grid(row = 2, column = 2, padx = 1, pady = 1)
minus = Button(btns_frame, text = "-", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("-")).grid(row = 2, column = 3, padx = 1, pady = 1)


# The fourth row will comprise of the buttons '1', '2', '3' and 'Addition (+)'
one = Button(btns_frame, text = "1", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(1)).grid(row = 3, column = 0, padx = 1, pady = 1)
two = Button(btns_frame, text = "2", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(2)).grid(row = 3, column = 1, padx = 1, pady = 1)
three = Button(btns_frame, text = "3", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(3)).grid(row = 3, column = 2, padx = 1, pady = 1)
plus = Button(btns_frame, text = "+", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("+")).grid(row = 3, column = 3, padx = 1, pady = 1)


# Finally, the fifth row will comprise of the buttons '0', 'Decimal (.)', and 'Equal To (=)'
zero = Button(btns_frame, text = "0", fg = "black", width = 21, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(0)).grid(row = 4, column = 0, columnspan = 2, padx = 1, pady = 1)
point = Button(btns_frame, text = ".", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click(".")).grid(row = 4, column = 2, padx = 1, pady = 1)
equals = Button(btns_frame, text = "=", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_equal()).grid(row = 4, column = 3, padx = 1, pady = 1)


window.mainloop()

Kesimpulan

Selamat telah menyelesaikan tutorial ini!

Berdasarkan pembelajaran Anda dari tutorial ini, Anda siap membuat beberapa aplikasi GUI sederhana. Anda harus mempelajari lebih banyak metode untuk styling dan interaksi dengan objek dalam GUI.

Latihan yang bermanfaat adalah mencoba mengembangkan aplikasi serupa dengan membuat kalkulator yang akan membantu meningkatkan kepercayaan diri Anda dan memberi Anda gambaran yang jauh lebih menyeluruh tentang apa saja yang mungkin dilakukan dengan Tkinter.

Masih banyak yang harus dibahas, dan Anda mungkin ingin mengeksplorasi konsep Kelas di Tkinter yang dapat Anda rujuk pada dokumentasi ini.

Jangan ragu untuk mengajukan pertanyaan apa pun terkait tutorial ini di bagian komentar di bawah.