Membuat Aplikasi Konversi Menggunakan Python GUI dengan TKinter

Untuk membuat aplikasi berbasis GUI menggunakan python terdapat beberapa library yang dapat kita pilih, diantaranya adalah TKinter,PyQT,Kivy sebelum kita bahasa satu persatu mari kita bahasa terlebih dahulu mengenai GUI.

Apa itu GUI?

Graphical User Interface atau GUI komputer digunakan untuk sebagai penghubung berbasis antarmuka agar bisa berinteraksi dengan penggunanya. GUI biasanya divisualisasikan dalam bentuk Gambar atau Icon untuk menjalankan perintah tertentu pada komputer.

Selain di komputer, penerapan GUI juga tersebar di komponen lain seperti Mesin ATM, Mesin Kasir, dan yang lainnya. Dalam perangkat mobile atau smartphone, penerapan GUI dilakukan dengan menghadirkan fitur touchscreen atau layar sentuh. Pengguna hanya perlu menyentuh suatu icon pada layar smartphone mereka untuk membuka aplikasinya.

TKinter

TKinter ini merupakan sebuah GUI yang ada pada python dan secara built in sudah terpasang rtinya tidak perlu menginstal library tambahan yang lain sehingga kita tinggal menggunakannya saja.

PyQt5

Paket PyQt dibangun berdasarkan Qt Framework, yang merupakan kerangka kerja lintas platform yang digunakan untuk membuat sejumlah besar aplikasi untuk berbagai platform. Paket PyQt5 mencakup serangkaian binding terperinci untuk Python berdasarkan versi terbaru v5 dari kerangka aplikasi Qt.
Mirip dengan kerangka kerja Qt5, PyQt5 juga sepenuhnya lintas platform. Dengan memanfaatkan kekuatan PyQt5, pengembang dapat membangun aplikasi untuk platform seperti Windows, Mac, Linux, iOS, Android, dan banyak lagi.

Kivy

framework Python untuk membangun aplikasi berbasis GUI dengan ringkas, cepat dan mudah. Berbasis lisensi MIT, framework yang satu ini bisa jalan hampir disemua platform seperti Windows, Linux, iOS, Android dan Raspberry.

Contoh aplikasi GUI

from tkinter import *window=Tk()def kmtomiles():    miles=float(e1_value.get()) * 0.6    t1.insert(END,miles)    b1=Button(window,text="Konversi",command=kmtomiles)b1.grid(row=0,column=0)e1_value=StringVar()e1=Entry(window,textvariable=e1_value)e1.grid(row=0,column=1)t1=Text(window,height=1,width=20)t1.grid(row=0,column=2)window.mainloop()

Install PyGubu Designer

untuk membuat desain gui kita akan menggunakan pyGubu Designer lakukan instalasi dengan cara mengetik perintah berikut :

pip install pygubu-designer

jika sudah terinstal buka aplikasi tersebut pada command prompt (cmd) kemudian ketik perintah berikut :

pygubu-designer

Ketika dijanlankan akan muncul tampilan seperti pada gambar berikut :

Pygubu Layout

Untuk uji coba kita akan coba desain script aplikasi konversi diatas menggunakan pygubu, berikut adalah tampilan yang akan kita buat :

Aplikasi Konversi

Berikut adalah tahapan yang perlu dilakukan untuk membuat desain seperti gambar diatas :

Langkah#1

Klik menu File->New kemudian klik menu tk pilih TopLevel :

Setting Geometry : 320×200 hal ini untuk memudahkan kita dalam membuat rancangan Kemudian klik menu frame untuk menambahkannya pada TopLevel :

Setting

• Width : 320
• Height : 200
• Backgoround Colour : #408080

Langkah#2

Klik menu Control & Display kemudian tambahkan komponen :

• 2 Buah Button
• 1 Buah Entry
• 1 Buah Label

Sehingga tampilannya menjadi seperti berikut :

Layout Aplikasi Konversi

Setting Object Properties pada masing-masing komponen seperti berikut :

Komponen Button2

Pada Tab General :

• id : b1
• text : Convert

Pada Tab Layout :

• Manager : grid
• row : 0
• column : 0
• command : calculate

Komponen Button3

Pada Tab General :

• id : b2
• text : Clear
• command : clear

Pada Tab Layout :

• Manager : grid
• row : 0
• column : 1

Komponen Entry2

Pada Tab General :

• id : e1
• text : Clear

Pada Tab Layout :

• Manager : grid
• row : 0
• column : 2

Komponen Label2

Pada Tab General :

• id : t1
• text : ####
• background : #408080
• foreground : #ffffff

Pada Tab Layout :

• Manager : grid
• row : 0
• column : 3

Frame2

Pada Tab General

• padx : 20
• pady : 20
• resizeable : none

klik setiap komponen kemudian pada object properties cari setting padx kemudian isi menjadi 2 agar ada jarak. jika desain sudah dilakukan topLevel 1 kemudian kosongkan kembali settingan geomatry pada tab general.

Langkah#3

Jalankan layout yang sudah kita buat dengan cara klik menu Preview->Preview in Top Level atau teksan (F5)

Langkah#4

Generate layout menjadi script python dengan cara klik menu code klik Code Script dan berikan nama Classnya dengan nama Converter. selanjutnya tekan tombol Generate.

Generate Script menjadi python

Klik tombol Copy to Clipboard untuk meng copy script setelah itu buka buka Visual Studio Code dan buatlah file baru dengan nama Converter.py dan paste kan coding tadi. Script yang sudah digenerate akan menghasilkan coding seperti berikut :

import pathlibimport pygubuimport tkinter as tkimport tkinter.ttk as ttkPROJECT_PATH = pathlib.Path(__file__).parentPROJECT_UI = PROJECT_PATH / "newproject"class Converter:    def __init__(self, master=None):        # build ui        self.toplevel1 = tk.Tk() if master is None else tk.Toplevel(master)        self.frame2 = tk.Frame(self.toplevel1)        self.b1 = tk.Button(self.frame2)        self.b1.configure(text='Convert')        self.b1.grid(column='0', padx='2', row='0')        self.b1.configure(command=self.calculate)        self.b2 = tk.Button(self.frame2)        self.b2.configure(text='Clear')        self.b2.grid(column='1', padx='2', row='0')        self.b2.configure(command=self.clear)        self.e1 = tk.Entry(self.frame2)        self.e1.grid(column='2', padx='2', row='0')        self.t1 = tk.Label(self.frame2)        self.t1.configure(background='#408080', foreground='#ffffff', text='####')        self.t1.grid(column='3', padx='2', row='0')        self.frame2.configure(background='#408080', height='200', padx='20', pady='20')        self.frame2.configure(width='320')        self.frame2.pack(side='top')        self.toplevel1.configure(height='200', width='200')        self.toplevel1.resizable(False, False)        # Main widget        self.mainwindow = self.toplevel1        def run(self):        self.mainwindow.mainloop()    def calculate(self):        pass    def clear(self):        passif __name__ == '__main__':    app = Converter()    app.run()

Langkah#5

Lengkapi Coding program agar tombol-tombol yang kita buat dapat berfungsi dengan coding berikut :

import pathlibimport pygubuimport tkinter as tkimport tkinter.ttk as ttkPROJECT_PATH = pathlib.Path(__file__).parentPROJECT_UI = PROJECT_PATH / "newproject"class Converter:    def __init__(self, master=None):        # build ui        self.toplevel1 = tk.Tk() if master is None else tk.Toplevel(master)        self.frame2 = tk.Frame(self.toplevel1)        self.b1 = tk.Button(self.frame2)        self.b1.configure(text='Convert')        self.b1.grid(column='0', padx='2', row='0')        self.b1.configure(command=self.calculate)        self.b2 = tk.Button(self.frame2)        self.b2.configure(text='Clear')        self.b2.grid(column='1', padx='2', row='0')        self.b2.configure(command=self.clear)        self.e1 = tk.Entry(self.frame2)        self.e1.grid(column='2', padx='2', row='0')        self.t1 = tk.Label(self.frame2)        self.t1.configure(background='#408080', foreground='#ffffff', text='####')        self.t1.grid(column='3', padx='2', row='0')        self.frame2.configure(background='#408080', height='200', padx='20', pady='20')        self.frame2.configure(width='320')        self.frame2.pack(side='top')        self.toplevel1.configure(height='200', width='200')        self.toplevel1.resizable(False, False)        # Main widget        self.mainwindow = self.toplevel1        def run(self):        self.mainwindow.mainloop()    def calculate(self):        print("coba")        kg=float(self.e1.get())*1000        self.t1['text']="{:.2f}".format(kg)    def clear(self):        print("clear")        self.t1['text']="#####"        self.e1.delete(0,tk.END)        self.e1.insert(tk.END,0)if __name__ == '__main__':    app = Converter()    app.run()