Cara Membuat Aplikasi Kalkulator GUI Menggunakan PySimpleGUI part 1

pada tanggal

 

 
PySimpleGUI adalah salah satu dari sekian banyak Python Package yang digunakan untuk pembuatan software berbasis GUI. Namun yang membuat PySimpleGUI ini lebih istimewa adalah syntax nya yang sangat simpel dan mudah untuk dipelajari, tentu sangat cocok buat teman-teman yang baru belajar pemrograman menggunakan Python.

Pada kesempatan kali ini kita akan sama-sama membuat aplikasi kalkulator, ya memang terdengar sederhana namun cukup bagus sebagai langkah awal mempelajari PySimpleGUI ini. Namun sebelum lanjut saya sarankan teman-teman sudah memahami basic atau fundamental dari bahasa Python. Jika belum, ada baiknya belajar dasar dulu karna kemungkinan akan sulit memahami tutorial ini jika belum paham fundamental Python.

Baiklah bila dirasa sudah siap lanjut ke hal-hal yang perlu dipersiapkan :
1.    Komputer/laptop (pastinya)
2.    Install Python (disini saya menggunakan versi 3.8.2 bebas) link download :python.org
3.    Install package PySimpleGUI dengan menulis di terminal/cmd : pip install PySimpleGUI
4.    Lakukan pengecekan apakah PySimpleGUI sudah terinstal dengan : pip list
 

Tutorial :

Buat file .py baru lalu import modul PySimpleGUI
import PySimpleGUI as sg

Lalu buat variabel layout dan window, layout untuk menghimpun seluruh widget/objek seperti tombol, textbox dll. sedangkan window untuk membuat jendela aplikasi
import PySimpleGUI as sg

layout = [[]]
window = sg.Window("Kalkulator", layout)


Buat looping agar aplikasi trus bejalan sampai adanya input keluar dari user. While True adalah perulangan yang akan di stop ketika event = sg.WIN_CLOSED atau user menekan tombol silang

import PySimpleGUI as sg

layout = [[]]
window = sg.Window("Kalkulator", layout)

while True:
    event, values = window.read()
    if event in (sg.WIN_CLOSED, "Exit"):
        break


Widget yang digunakan :
Jendela / Window          =    PySimpleGUI.Window()
Kotak teks / Multiline    =    PySimpleGUI.Multiline()
Tombol                         =    PySimpleGUI..Button()
info lebih lanjut : Dokumentasi Pysimplegui
karena PySimpleGUI kita impor dengan nama sg maka diubah sesuai itu namanya


Selanjutnya kita masukkan widget Multiline pada baris pertama layout. Format Baris : layout = [[baris pertama], [baris kedua], dan seterusnya...]

import PySimpleGUI as sg

layout = [[sg.Multiline(size=(15, 1), no_scrollbar=True, disabled=True, key="teks", default_text="", font=       ("Arial", 20), horizontal_scroll=True)]]
window = sg.Window("Kalkulator", layout)

while True:
    event, values = window.read()
    if event in (sg.WIN_CLOSED, "Exit"):
        break
Lalu coba jalankan maka akan muncul seperti ini :


Lanjut pada baris ke 2 layout masukkan widget tombol : 1, 2, 3, H(Hapus)
import PySimpleGUI as sg

layout = [[sg.Multiline(size=(15, 1), no_scrollbar=True, disabled=True, key="teks", default_text="", font=       ("Arial", 20), horizontal_scroll=True)], [sg.Button("1", key="1", size=(5, 3)), sg.Button("2", key="2", size=(5, 3)), sg.Button("3", key="3", size=(5, 3)), sg.Button("H", key="_h", size=(5, 3))]]

window = sg.Window("Kalkulator", layout)

while True:
    event, values = window.read()
    if event in (sg.WIN_CLOSED, "Exit"):
        break
Tampilan baris 2:


Baris 3 masukkan widget tombol 4, 5, 6, +
import PySimpleGUI as sg

layout = [[sg.Multiline(size=(15, 1), no_scrollbar=True, disabled=True, key="teks", default_text="", font=       ("Arial", 20), horizontal_scroll=True)], [sg.Button("1", key="1", size=(5, 3)), sg.Button("2", key="2", size=(5, 3)), sg.Button("3", key="3", size=(5, 3)), sg.Button("H", key="_h", size=(5, 3))], [sg.Button("4", key="4", size=(5, 3)), sg.Button("5", key="5", size=(5, 3)), sg.Button("6", key="6", size=(5, 3)), sg.Button("+", key="_t", size=(5, 3))]]

window = sg.Window("Kalkulator", layout)

while True:
    event, values = window.read()
    if event in (sg.WIN_CLOSED, "Exit"):
        break
seperti ini :

Dilanjutkan baris selanjutnya sampai selesai
import PySimpleGUI as sg

layout = [[sg.Multiline(size=(15, 1), no_scrollbar=True, disabled=True, key="teks", default_text="", font=       ("Arial", 20), horizontal_scroll=True)], [sg.Button("1", key="1", size=(5, 3)), sg.Button("2", key="2", size=(5, 3)), sg.Button("3", key="3", size=(5, 3)), sg.Button("H", key="_h", size=(5, 3))], [sg.Button("4", key="4", size=(5, 3)), sg.Button("5", key="5", size=(5, 3)), sg.Button("6", key="6", size=(5, 3)), sg.Button("+", key="_t", size=(5, 3))],  [sg.Button("7", key="7", size=(5, 3)), sg.Button("8", key="8", size=(5, 3)), sg.Button("9", key="9", size=(5, 3)), sg.Button("-", key="_k", size=(5, 3))], [sg.Button("=", key="_sd", size=(5, 3)), sg.Button("0", key="0", size=(5, 3)), sg.Button(":", key="_b", size=(5, 3)), sg.Button("X", key="_x", size=(5, 3))]]

window = sg.Window("Kalkulator", layout)

while True:
    event, values = window.read()
    if event in (sg.WIN_CLOSED, "Exit"):
        break
Tampilan:

Untuk GUI nya sudah berhasil kita buat, namun semua widget  masih belum memberikan respon apapun ketika di interaksikan. Nah untuk mekanik kalkulator kita lanjutkan di part selanjutnya.

Part 1 - Membuat UI
Part 2 - Membuat Mekanik

Versi video :



Komentar

Posting Komentar