Tutorial GUI Python : Mengenal Grid, Place, dan PhotoImage di Tkinter #3

GUI Python Tkinter

Tutorial GUI Python : Mengenal Grid, Place, dan PhotoImage di Tkinter #3 - Pada bagian ke 3 dari seri Tutorial Membuat Aplikasi Desktop. Seperti episode sebelumnya kita masih akan belajar basic Tkinter. Hal yang akan kita pelajari kali ini adalah bagaimana pengaturan peletakan elemen dengan Grid dan Place serta kita akan belajar bagaimana memasukkan Foto pada window Tkinter kita.

Kalau pada tutorial sebelumnya tepatnya bagian kedua, Otak Keren telah membahas sistem layout bernama Pack. Kalau sobat belum tahu silahkan cek Tutorial GUI Python part 2. Nah, kali ini sebenarnya fungsinya sama seperti pack. Tetapi Grid dan Place memiliki parameter yang lebih dapat kita sesuaikan dengan keinginan.

Parameter pada Grid dan Place lebih banyak dan tentunya lebih advance ketimbang Pack. Tidak hanya sistem layout Grid dan Place yang akan kita pelajari tetapi kita juga akan belajar bagaimana kita memanggil foto kita dan meletakkannya pada window Tkinter kita. Langsung saja ke pembahasan.

APA ITU SISTEM GRID ?

Sistem layout Grid merupakan cara mengatur posisi elemen pada window menggunakan sistem baris dan kolom, atau jika berbahasa inggris disebut row and column. Sistem Grid ini pernah saya singgung pada pembuatan Login Form menggunakan Tkinter. Silahkan baca untuk menambah pemahaman Grid.

Sistem ini mirip cara penyusunannya seperti susunan cell pada Microsoft Excel. Sobat semua pasti tahu kan dengan peletakan cell pada Microsoft Excel yang juga disusun berdasar baris dan kolom dengan label angka dan huruf.

Penggunaan Grid pada Tkinter agak berbeda dengan Microsof Excel. Grid pada Tkinter hanyalah bernama angka. Sistem Grid ini juga berdasarkan garis cartesius X dan Y. Dimana X merupakan garis horizontal atau yang disebut Column. dan Y adalah garis vertikal dan disebut dengan Row, dengan titik 0 terletak pada kiri atas.

Baca Juga : Classifier pada Machine Learning Python

Untuk menggunakan Grid kita cukup dengan memanggil method grid(). Didalam method grid(), kita terdapat juga beberapa parameter tambahan selain row dan colomn. Contohnya adalah columnspan, rowspan, pady, padx, dan sticky. Langsung saja kita lihat contoh codenya.

from tkinter import *
root = Tk()

label1 = Label(root, text='Label 1')
label1.grid(column=0, row=0)

label2 = Label(root, text='Label 2')
label2.grid(column=0, row=1)

label3 = Label(root, text='Label 3')
label3.grid(column=1, row=1)

root.mainloop()

Pada code diatas kita meletakkan label1 pada kolom 0 dan baris 0. Kemudian label2 kita turunkan menjadi kolom 0 tetapi baris 1, dan kemudian label 3 kita letakkan disebelah label2 yaitu dengan kolom 1 dengan baris tetap 1. Maka hasilnya nanti akan seperti ini.

Tkinter

Untuk parameter selanjutnya adalah columnspan dan rowspan. Parameter grid seperti ini akan menggabungkan 2 atau lebih baris ataupun kolom menjadi satu. Simplenya ini adalah merge cell pada Microsoft Excel. Kita cukup menggunakannya dengan syntax columnspan='3' dan rowspan='4' misalnya. Sesusaikan saja valuenya sesuai keinginan kalian.

Kemudian kita akan mempelajari tentang pady dan padx. Fungsi parameter ini adalah untuk memberikan whitespace dalam ukuran pixel pada sekitar objek. Misalkan kita mengimport foto pada window Tkinter kita (Tutorial memasukkan foto akan dibahas diakhir tutorial), kemudian kita ingin bagian atas dan bawah foto diberi jarak 10px maka kita gunakan pady, jika ingin sisi kanan dan kirinya juga berjarak 10px tambahkan padx.

Baca Juga : Membuat Stopwatch Sederhana Menggunakan Python

Syntaxnya juga sederhana yaitu pady=10 dan padx=10. Jika elemen pady dan padx diberikan maka kita akan melihat hasilnya seperti foto dibawah ini.

Tkinter

Kemudian ada juga parameter bernama sticky. Parameter sticky ini berfungsi untuk menentukan ke posisi mana objek kita akan melekat. Ada 8 opsi untuk menentukan letak melekatnya objek kita.

8 opsi tersebut adalah arah 8 mata angin, yaitu N, NE, E, SE, S, SW, W, NW. Untuk meggunakannya kita cukup memanggilnya dengan syntax sticky=N misalnya. Selanjutnya kita akan memasuki penjelasan mengenai Place.

APA ITU PLACE PADA TKINTER ?

Prinsip Sistem Place ini juga menggunkan garis cartesius x dan y, tapi kali ini benar - benar koordinat x dan y. Bukan lagi seperti cell Ms. Excel, kali ini setiap satu koordinatnya senilai 1px. Titik 0 dihitung dari kiri atas juga.

Contoh kali ini saya membuat beberapa koordinat x dan y, silahkan amati.

from tkinter import *

root = Tk()

label1 = Label(root, text='Ini x = 10, y = 10', bg='green')
label1.place(x=10, y=10)

label2 = Label(root,text='Ini x = 20, y = 35', bg='red', fg='yellow')
label2.place(x=20, y=35)

label3 = Label(root,text='Ini x = 50, y = 60', bg='black', fg='green')
label3.place(x=50, y=60)

label4 = Label(root,text='Ini x = 20, y = 85', bg='red', fg='yellow')
label4.place(x=20, y=85)

label5 = Label(root,text='Ini x = 10, y = 110', bg='green')
label5.place(x=10, y=110)

root.mainloop()

Dari code yang kita tulis diatas maka hasil yang kita dapatkan adalah sebagai berikut

Tkinter

CARA MEMASUKKAN FOTO PADA WINDOW TKINTER

Cara untuk memasukkan foto pada window Tkinter ini sangatlah mudah kita perlu memanggil fungsi PhotoImage dan membuat label untuk gambarnya. Pada fungsi PhotoImage kalian harus pastikan path folder menuju foto kalian benar, kalau salah maka tidak akan bisa. Agar lebih mudah cukup satukan file foto kamu dalam satu folder yang sama dengan script Python kamu.

Berikut contoh codenya.

from tkinter import *

root = Tk()

foto = PhotoImage(file='D:\otak-keren.png')
display = Label(root, image=foto)
display.pack()

root.mainloop()

Dari code diatas kita dapat menampilkan foto kedalam bentuk label menggunakan parameter image. Untuk posisi elemennya kalian bisa praktekkan sistem layout yang saya jelaskan diatas.

KESIMPULAN

Nah pada akhir tutorial kita telah belajar bahwa sebenarnya membuat sistem layout pada Tkinter itu mudah sekali. Oleh karena itu staytune terus di Otak Keren untuk update tutorial membuat GUI Python dengan Tkinter. Jangan lupa juga lihat part 1 dan part 2 nya ya.

Jadi, akhir kata silahkan sobat tulis komentar atau pertanyaan seputar Mengenal Grid, Place, dan PhotoImage di Tkinter di kolom komentar bawah.

Otak Keren