Site icon Pesona Informatika

Membuat Desktop Kalkulator Python PyQt5

Membuat Desktop Kalkulator Menggunakan Python PyQt5 - pesonainformatika.com

Membuat Desktop Kalkulator Menggunakan Python PyQt5 – pesonainformatika.com, halo, kita lanjut lagi belajar bahasa pemrograman python, kali ini kita akan coba belajar sesuatu yang berbeda kita akan coba membuat sebuah aplikasi desktop sederhana menggunakan bahasa pemrograman python.

pada studi kasus kali ini kita akan mengenal dan belajar tentang salah satu library yang digunakan untuk membuat aplikasi desktop yaitu PyQt5, apa itu..?

Mengenal PyQt5

PyQt adalah library yang digunakan untuk mengembangkan aplikasi desktop, library ini dalam library ini terdapat kumpulan library bahasa pemrograman lain (C++) yang bisa digunakan untuk abstraksi independen Antarmuka Grafis (GUI). PyQt ini dikembangkan oleh Riverbank Computing LTD PyQt ini terdapat dua versi yaitu

Instalasi PyQt5

sebelum melakukan instalasi pastikan sudah melakukan instalasi python terlebih dahulu, instalasinya sangat mudah kita bisa menggunakan pip atau anaconda (dalam studi kasus kali ini kita menggunakan pip) kita bisa install menggunakan perintah

pip install PyQt5
membuat virtual environtment
instalasi PyQt menggunakan pip
Membuat Aplikasi Pertama Menggunakan PyQt5

untuk pemanasan kita akan coba membuat aplikasi pertama menggunakan library pyqt5 ini, langkah pertama kita buat file python misalnya hello.py kemudian isi seperti ini

import sys

# import module form pyqt5
from PyQt5.QtWidgets import QApplication, QLabel, QWidget

# create instance
app = QApplication(sys.argv)
window = QWidget()

# create title, and instance app
window.setWindowTitle('Simple App QT')
window.setGeometry(100, 100, 280, 80)
window.move(60, 15)
window.move(60, 16)

# create simple message
hello = QLabel('<h1> Halo saya sedang belajar membuat aplikasi desktop</h1>', parent=window)
web = QLabel('<h2> pesonainformatika.com</h2>', parent=window)
web.move(60,60)
hello.move(60, 30)

# display app
window.show()

# run app
sys.exit(app.exec_())

lalu jalankan seperti menjalankan python script seperti biasa hasilnya seperti ini

hasil program hello world yang dibuat diatas

Penjelasan Singkat Program

langkah pertama kita import modul yang dibutuhkan

import sys

# import module form pyqt5
from PyQt5.QtWidgets import QApplication, QLabel, QWidget

lalu kita membuat instance object dan membuat judul aplikasi kita, setelah itu kita juga menentukan ukuran dari window aplikasi yang akan kita buat.

# create instance
app = QApplication(sys.argv)
window = QWidget()

# create title, and instance app
window.setWindowTitle('Simple App QT')
window.setGeometry(100, 100, 280, 80)
window.move(60, 15)
window.move(60, 16)

baru pada tahap ini kita akan membuat tulisan simple menggunakan label seperti ini

# create simple message
hello = QLabel('<h1> Halo saya sedang belajar membuat aplikasi desktop</h1>', parent=window)
web = QLabel('<h2> pesonainformatika.com</h2>', parent=window)
web.move(60,60)
hello.move(60, 30)

kemudian agar aplikasi bisa ditampilkan dan dijalankan didalam loop kita menambahkan

# display app
window.show()

# run app
sys.exit(app.exec_())

ketika dijalankan hasilnya seperti ini

hasil simple app yang dibuat

Membuat Kalkulator Sederhana

lanjut ke pembahasan utama kita, setelah melakukan pemanasan kita akan coba membuat project sederhana yap membuat kalkulator langkah pertama kita membuat file python script baru misal namanya adalah main.py

langkah selanjutnya kita import modul yang dibutuhkan

import sys
from functools import partial
# import module from pyqt5
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QGridLayout
from PyQt5.QtWidgets import QPushButton
from PyQt5.QtWidgets import QVBoxLayout
from PyQt5.QtWidgets import QMainWindow
from PyQt5.QtWidgets import QWidget
from PyQt5.QtWidgets import QLineEdit
from PyQt5.QtWidgets import QApplication

kemudian kita membuat layout untuk aplikasi kita, kita membuat kelas baru yang kita beri nama CalcUI kemudian kita inisialisasikan seperti ini

class CalcUI(QMainWindow):
    def __init__(self):
        # initialize view
        super().__init__()

kemudian selanjutnya kita konfigurasi window dalam fungsi def __init__(self) aplikasi kita seperti ini

# set main window properties
self.setWindowTitle("Kalkulator")
self.setFixedSize(235, 235)

masih dalam fungsi def __init__(self) kita akan konfigurasi widget dan general layout untuk aplikasi kita

# set central widget and general layout
self.generalLayout = QVBoxLayout()
self._centralWidget = QWidget(self)
self.setCentralWidget(self._centralWidget)
self._centralWidget.setLayout(self.generalLayout)

kemudian selanjutnya kita membuat object untuk tombol dan tampilan layar di def __init__(self)

# create display and button object
self._createDisplay()
self._createButton()

selanjutnya setelah kita membuat object kita bisa membuat fungsi untuk menampilkan layar aplikasi kita

# create function display
def _createDisplay(self):
    # creating display
    self.display = QLineEdit()

    #  set display properties
    self.display.setFixedHeight(35)
    self.display.setAlignment(Qt.AlignRight)
    self.display.setReadOnly(True)

    # add display to general layout
    self.generalLayout.addWidget(self.display)

sekarang kita membuat fungsi untuk menampilkan tombol untuk aplikasi kita

def _createButton(self):
    self.buttons = {}

    # set layout
    buttonsLayout = QGridLayout()

    # button text    | position on grid layout
    buttons = {'7': (0, 0),
               '8': (0, 1),
               '9': (0, 2),
               '/': (0, 3),
               'C': (0, 4),
               '4': (1, 0),
               '5': (1, 1),
               '6': (1, 2),
               '*': (1, 3),
               '(': (1, 4),
               '1': (2, 0),
               '2': (2, 1),
               '3': (2, 2),
               '-': (2, 3),
               ')': (2, 4),
               '0': (3, 0),
               '00': (3, 1),
               '.': (3, 2),
               '+': (3, 3),
               '=': (3, 4),
               }

    # create button and add to grid layout
    for btnText, position in buttons.items():
        self.buttons[btnText] = QPushButton(btnText)
        self.buttons[btnText].setFixedSize(40,40)
        buttonsLayout.addWidget(self.buttons[btnText], position[0],position[1])

    # add button layout to general layout
    self.generalLayout.addLayout(buttonsLayout)

lalu selanjutnya kita setting untuk menampilkan angka dan ketika tombol ditekan akan tampil angka sesuai tombol yang ditekan tadi

def setDisplayText(self, text):
    self.display.setText(text)
    self.display.setFocus()

def displayText(self):
    return self.display.text()

def clearDisplay(self):
    self.setDisplayText('')

jika aplikasi dijalankan akan seperti ini

tampilan interface yang dibuat dan dikonfigurasi di kelas UI

selanjutnya kita membuat controller untuk logika dari program yang akan kita buat disini kita membuat class baru bernama CalcController dalam class ini terdapat berbagai fungsi untuk menghitung hasil, membuat expresi aritmatika, dan koneksi antar class, seperti ini

# create controller
class CalcController:
    def __init__(self, model, views):
        # inisialize controler
        self._views = views
        self._evaluate = model

        # connecting to signal and slots
        self._connectSignals()

    # calculate result
    def _calculateResult(self):
        result = self._evaluate(expression=self._views.displayText())
        self._views.setDisplayText(result)

    def _buildExpression(self, sub_exp):
        if self._views.displayText() == ERROR_MSG:
            self._views.clearDisplay()
        expression = self._views.displayText() + sub_exp
        self._views.setDisplayText(expression)

    def _connectSignals(self):
        # connect to signal
        for btnText, btn in self._views.buttons.items():
            if btnText not in {'=':'C'}:
                btn.clicked.connect(partial(self._buildExpression, btnText))
        self._views.buttons['='].clicked.connect(self._calculateResult)
        self._views.display.returnPressed.connect(self._calculateResult)
        self._views.buttons['C'].clicked.connect(self._views.clearDisplay)

kemudian kita membuat model (diluar kelas) untuk handle ketika ada error seperti ini

# create model
def evaluateExpressionModel(expression):
    # evaluate expression
    try:
        result = str(eval(expression, {}, {}))
    except Exception:
        result = ERROR_MSG

    return result

selanjutnya kita buat aplikasi kita agar bisa di jalankan disini saya menyebutnya client mode

# client mode
def main():
    pycalc = QApplication(sys.argv)
    views = CalcUI()
    views.show()
    #  create instance model of controller
    model = evaluateExpressionModel
    CalcController(model=model, views=views)

    sys.exit(pycalc.exec_())
if __name__ == '__main__':
    main()

kita coba jalankan aplikasi yang baru saja kita buat

hasil aplikasi yang dibuat

Final Code

berikut adalah seluruh source code aplikasi yang kita buat pada studi kasus kali ini

import sys
from functools import partial
# import module from pyqt5
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QGridLayout
from PyQt5.QtWidgets import QPushButton
from PyQt5.QtWidgets import QVBoxLayout
from PyQt5.QtWidgets import QMainWindow
from PyQt5.QtWidgets import QWidget
from PyQt5.QtWidgets import QLineEdit
from PyQt5.QtWidgets import QApplication

class CalcUI(QMainWindow):
    def __init__(self):
        # initialize view
        super().__init__()

        # set main window properties
        self.setWindowTitle("Kalkulator")
        self.setFixedSize(235, 235)

        # set central widget and general layout
        self.generalLayout = QVBoxLayout()
        self._centralWidget = QWidget(self)
        self.setCentralWidget(self._centralWidget)
        self._centralWidget.setLayout(self.generalLayout)

        # create display and button object
        self._createDisplay()
        self._createButton()

    # create function display
    def _createDisplay(self):
        # creating display
        self.display = QLineEdit()

        #  set display properties
        self.display.setFixedHeight(35)
        self.display.setAlignment(Qt.AlignRight)
        self.display.setReadOnly(True)

        # add display to general layout
        self.generalLayout.addWidget(self.display)

    # create function _createButton
    def _createButton(self):
        self.buttons = {}

        # set layout
        buttonsLayout = QGridLayout()

        # button text    | position on grid layout
        buttons = {'7': (0, 0),
                   '8': (0, 1),
                   '9': (0, 2),
                   '/': (0, 3),
                   'C': (0, 4),
                   '4': (1, 0),
                   '5': (1, 1),
                   '6': (1, 2),
                   '*': (1, 3),
                   '(': (1, 4),
                   '1': (2, 0),
                   '2': (2, 1),
                   '3': (2, 2),
                   '-': (2, 3),
                   ')': (2, 4),
                   '0': (3, 0),
                   '00': (3, 1),
                   '.': (3, 2),
                   '+': (3, 3),
                   '=': (3, 4),
                   }

        # create button and add to grid layout
        for btnText, position in buttons.items():
            self.buttons[btnText] = QPushButton(btnText)
            self.buttons[btnText].setFixedSize(40,40)
            buttonsLayout.addWidget(self.buttons[btnText], position[0],position[1])

        # add button layout to general layout
        self.generalLayout.addLayout(buttonsLayout)


    def setDisplayText(self, text):
        self.display.setText(text)
        self.display.setFocus()

    def displayText(self):
        return self.display.text()

    def clearDisplay(self):
        self.setDisplayText('')

# create controller
class CalcController:
    def __init__(self, model, views):
        # inisialize controler
        self._views = views
        self._evaluate = model

        # connecting to signal and slots
        self._connectSignals()

    # calculate result
    def _calculateResult(self):
        result = self._evaluate(expression=self._views.displayText())
        self._views.setDisplayText(result)

    def _buildExpression(self, sub_exp):
        if self._views.displayText() == ERROR_MSG:
            self._views.clearDisplay()
        expression = self._views.displayText() + sub_exp
        self._views.setDisplayText(expression)

    def _connectSignals(self):
        # connect to signal
        for btnText, btn in self._views.buttons.items():
            if btnText not in {'=':'C'}:
                btn.clicked.connect(partial(self._buildExpression, btnText))
        self._views.buttons['='].clicked.connect(self._calculateResult)
        self._views.display.returnPressed.connect(self._calculateResult)
        self._views.buttons['C'].clicked.connect(self._views.clearDisplay)

# Error Message
ERROR_MSG = 'Errors'

# create model
def evaluateExpressionModel(expression):
    # evaluate expression
    try:
        result = str(eval(expression, {}, {}))
    except Exception:
        result = ERROR_MSG

    return result


# client mode
def main():
    pycalc = QApplication(sys.argv)
    views = CalcUI()
    views.show()
    #  create instance model of controller
    model = evaluateExpressionModel
    CalcController(model=model, views=views)

    sys.exit(pycalc.exec_())
if __name__ == '__main__':
    main()

semoga bermanfaat dan mencoba, ikuti studi kasus lainya di pesonainformatika ada beberapa bahasa pemrograman lainya seperti Java, Python C++

Exit mobile version