Tutorial PyQT

Pada tutorial kali ini, anda akan dipandu dalam membuat sebuah aplikasi desktop
sederhana dengan menggunakan pyqt. Pyqt adalah sebuah aplikasi multi-platform untuk
pengembangan aplikasi desktop. PyQt dikembangan oleh Riverbank Computing Limited.
Dengan menggunakan platform Qt, memungkinkan kita mengembangan aplikasi dengan
Graphical User Interface (GUI) sesuai dengan keinginan pengembang.
Sebelum memasang pyqt, pastikan anda sudah memasang aplikasi Python. Untuk
memasang Python anda dapat mengunduh terlebih dahulu file instalasinya pada situs:
https://www.python.org/downloads/. Sesuaiakan python yang anda unduh dengan sistem
operasi yang anda gunakan.
I. Instalasi Python di Windows
Setelah anda mengunduh python, lakukan instalasi dengan mengikuti langkah-langkah
berikut:
1. Pilih Install Now, dan tunggu proses pemasangan berjalan hingga selesai.

2. Setelah proses pemasangan selesai, pilih Close

 Setelah proses instalasi selesai, tambahkan path instalasi python anda pada “system
environment”. Langkah-langkah penambahan path instalasi python adalah sebagai berikut:
1. Klik tombol Windows, lakukan pencarian aplikasi python, setelah aplikasi muncul, klik
kanan dan pilih “open file location” pada aplikasi python.

2. Copy alamat folder tempat instalasi python

3. Klik kembali tombol windows, ketik “environment” di kolom pencarian, lalu pilih
“Edit the system environment variables”. Pilih “environment variables”. Edit pada
“value Path”
 4. Tambahkan path python ke dalam system variables dengan cara mempaste path yang
sebelumnya sudah dicopy, termasuk path scripts python. Jika sudah ditambahkan atau
sudah ada sebelum dilakukan penambahan, biarkan dan klik OK agar semua
penambahan yang dilakukan tersimpan.

II. Instalasi PyQt

Setelah path python, ditambahkan selanjutnya kita akan menginstall package pyqt5
melalui cmd dengan menggunakan pip. Buka cmd anda, dan ketikkan perintah:
pip install pyqt5-tools

Tunggu proses download dan instalasi package selesai. Setelah proses instalasi selesai,
maka package pyqt5 sudah terinstal pada komputer anda.
III. Qt Designer
Pada bagian ini, kita akan mengulas secara singkat tentang Qt Designer sebagai alat
bantu mengembangkan aplikasi desktop. Untuk mengakses Qt Designer dapat dilakukan
melalui cmd dengan cara mengetikkan perintah:
qt5-tools designer
Setelah dijalankan, maka akan muncul tampilan awal Qt Designer.

1 3
2

Keterangan:
1. Bagian pertama merupakan pilihan template, ketika program pertama kali dijalankan,
anda akan diberikan pilihan apakah menggunakan template yang sudah ada. Template
dasar yang sudah disediakan berupa MainWindow, Widget dan beberapa template
lainnya yang bisa dipilih.
2. Bagian kedua terdiri dari berbagai jenis widget yang dapat digunakan untuk membuat
dan mengatur aplikasi. Beberapa dari kelompok widget terdiri dari Layouts, Spacers,
Button, Display, Item Views dan beberapa widget lainnya.
3. Bagian ketiga adalah Object Inspector yang akan terisi dengan Main Window dan
Widget yang sudah ditambahkan. Adapun pilihan Property Editor merupakan
personalisasi dari masing-masing object (Main Window dan Widget) yang ingin di
kustomisasi baik tampilan maupun propertiesnya yang lain. Terdapat pula pengaturan
signal dan slot yang bisa dipilih agar lebih memudahkan nanti pengkodean untuk
menjalankan program sesuai dengan keinginan pengembang.
IV. Desain Antarmuka (Interface) Aplikasi Desktop
Pada kesempatan kali ini, kita akan belajar membuat aplikasi desktop sederhana
menggunakan bahasa pemrogaman python dengan library pyqt5 yang sudah kita install
sebelumnya. Kita dapat membuat aplikasi desktop sederhana dengan menggunakan bantuan
Graphical User Interface (GUI) yang disediakan oleh pyqt5. Tutorial kali ini akan
mengajarkan pembuatan aplikasi kalkulator sederhana.
Langkah 1: Setelah Qt Designer terbuka, pilih MainWindow dan klik create

Langkah 2: Pilih Grid Layout [1] pada Layout bagian WidgetBox dengan cara tarik dan lepas
(drag and drop) ke MainWindow [2].
Kemudian klik kanan pada bagian luar Grid Layout (luar garis merah), arahkan cursor ke
Layout > Lay Out Vertically

drop here!!!
2

Langkah 3: Tambahkan pushbutton(tombol) ke dalam Grid Layout (kotak merah) dengan cara
drag and drop. Untuk penambahan tombol lain pada posisi sebelah kanan/bawah drag dan
drop pushbutton sampe terlihat garis berwarna biru baik sebelah kanan maupun bawah.
Langkah 4: Tambahkan Label dari Display Widget ke dalam MainWindow. Perbesar ukuran
label sampai memenuhi keseluruhan grid dengan cara memposisikan cursor pada titik tengah
dan tarik ke arah kanan.

Langkah 5: Ganti nama masing-masing pushbutton dan label yang ada di MainWindow
dengan cara klik dua kali pada setiap pushbutton atau label.

Langkah 7: Kustomisasi. Perihal kustomisasi bukanlah hal yang wajib dilakukan (opsional),
dalam hal ini akan diberikan contoh untuk mengkustomisasi ukuran dan tampilan dari desain
antar muka yang sudah dibuat. Pada contoh kali ini akan diberikan petunjuk cara
mengkustomisasi ukuran label dan pushbutton.
- Klik label dan masuk pada property editor, cari bagian size policy, atur inputan menjadi
seperti berikut:

- Seleksi semua pushbutton dengan cara menahan control dan memilih satu persatu
pushbutton sampai semuanya terseleksi. Selanjutnya cari size policy, atur inputan
menjadi seperti berikut:
Langkah 8: Stylesheet. Pada tahap ini kita akan mengatur tampilan seperti jenis dan ukuran
font, warna font, warna latar, border dan lain sebagainya. Untuk kostumisasi tampilan dapat
dilakukan dengan mencari stylesheet pada property editor, dan masih dalam keadaan
pushbutton terseleksi semua.

Kita juga dapat mengkustomisasi label dengan cara yang sama seperti kita mengkustomisasi
pushbutton.
Langkah 9: Mengganti nama object pushbutton agar lebih mempermudah proses
pemrograman. Lakukan tahap ini secara berulang, klik satu persatu pushbutton dan ganti nama
objectnya pada object inspector, sesuaikan dengan tombol yang diganti namanya.

Langkah 10: Proses mengubah file UI (User Interface) yang dibuat dengan Qt Designer
menjadi file Python yang dapat dieksekusi.
- Terlebih dahulu simpan file yang sudah dibuat (agar lebih mudah diakses bisa disimpan
pada Desktop). Simpan dengan nama file yang anda inginkan.

- Mengakses lokasi penyimpanan file (Desktop) dilakukan melalui cmd karena kita juga
akan mengubah file interface ke file python yang bisa dieksekusi. Untuk mengubah
lokasi penyimpanan gunakan perintah cd (change directory)
cd Desktop

- Mengubah file antarmuka yang sudah dibuat sebelumnya dengan perintah:

pyuic5 -x namafile.ui -o namafile.py
Keterangan:
• pyuic5: Ini adalah nama utilitas yang terkait dengan PyQt, yaitu PyQt5 UI
Compiler. Utilitas ini digunakan untuk mengkompilasi file UI menjadi kode
Python.
• -x: Argumen ini menunjukkan kepada pyuic5 untuk menghasilkan kode Python
yang berisi kode tambahan yang diperlukan untuk mengeksekusi file UI secara
langsung. Ini memungkinkan Anda untuk menjalankan file .py yang dihasilkan
tanpa harus menulis kode tambahan.
• namafile.ui: Ini adalah nama file UI yang akan dikompilasi. Pastikan file UI ini
ada di direktori yang sama dengan perintah yang sedang dijalankan, atau
berikan jalur lengkap ke file UI jika berada di direktori lain.
• -o namafile.py: Argumen ini menunjukkan kepada pyuic5 untuk menyimpan
file Python yang dihasilkan dengan nama "namafile.py". Anda dapat mengganti
"namafile.py" dengan nama file Python yang Anda inginkan.
pyuic5 -x cal_tutor.ui -o program_cal.py
V. Pengembangan
Pada tahap ini kita akan melakukan pengembangan aplikasi, edit file “program_cal.py”
dengan menggunakan aplikasi python. Caranya dengan mengklik kanan pada file
“program_cal.py” yang ada di desktop hasil dari generate interface sebelumnya dan pilih edit
with IDLE.

- Scroll cursor anda ke bawah dan cari kode dengan perintah

self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
- Selanjutnya kita akan menambahkan kode program agar interface kalkulator yang
sebelumnya sudah kita buat dapat berfungsi sebagai mana mestinya. Tambahkan kode
dibawa ini setelah QtCore.QMetaObject.connectSlotsByName(MainWindow)
self.tombol_0.clicked.connect(self.input_0)
self.tombol_1.clicked.connect(self.input_1)
self.tombol_2.clicked.connect(self.input_2)
self.tombol_3.clicked.connect(self.input_3)
self.tombol_4.clicked.connect(self.input_4)
self.tombol_5.clicked.connect(self.input_5)
self.tombol_6.clicked.connect(self.input_6)
self.tombol_7.clicked.connect(self.input_7)
self.tombol_8.clicked.connect(self.input_8)
self.tombol_9.clicked.connect(self.input_9)
self.tombol_plus.clicked.connect(self.fungsi_plus)
self.tombol_min.clicked.connect(self.fungsi_min)
self.tombol_clear.clicked.connect(self.fungsi_plus_min)
self.tombol_perkalian.clicked.connect(self.fungsi_perkalian)
self.tombol_pembagian.clicked.connect(self.fungsi_pembagian)
self.tombol_akar.clicked.connect(self.fungsi_akar)
self.tombol_percent.clicked.connect(self.fungsi_percent)
self.tombol_koma.clicked.connect(self.input_koma)
self.tombol_pangkat.clicked.connect(self.fungsi_pangkat)
 self.tombol_hasil.clicked.connect(self.fungsi_hasil)

- Tahapan selanjutnya adalah membuat fungsi. Karena pada langkah sebelumnya kita
menggunakan signal dan slot untuk menghubungkan pushbutton ketika di tekan maka
dia akan menerima signal untuk menjalankan fungsi. Fungsi yang dibuat disesuaikan
dengan nama slot fungsi yang sudah didefinisikan sebelumnya. Tambahkan kode
berikut untuk keseluruhan fungsi setelah perintah
self.tombol_hasil.clicked.connect(self.fungsi_hasil)
Tambahkan seperti contoh di bawah ini:

def input_0(self):
text = self.label.text()
self.label.setText(text+"0")

def input_1(self):
text = self.label.text()
self.label.setText(text+"1")

def input_2(self):
text = self.label.text()
self.label.setText(text+"2")

def input_3(self):
text = self.label.text()
self.label.setText(text+"3")

def input_4(self):
text = self.label.text()
self.label.setText(text+"4")

def input_5(self):
text = self.label.text()
self.label.setText(text+"5")

def input_6(self):
text = self.label.text()
self.label.setText(text+"6")

def input_7(self):
text = self.label.text()
self.label.setText(text+"7")

def input_8(self):
text = self.label.text()
self.label.setText(text+"8")

def input_9(self):
text = self.label.text()
self.label.setText(text+"9")

def input_koma(self):
 text = self.label.text()
self.label.setText(text+".")

def fungsi_plus(self):
text = self.label.text()
self.label.setText(text+"+")

def fungsi_min(self):
text = self.label.text()
self.label.setText(text+"-")

def fungsi_clear(self):
text = self.label.text()
self.label.setText("")

def fungsi_perkalian(self):
text = self.label.text()
self.label.setText(text+"*")

def fungsi_pembagian(self):
text = self.label.text()
self.label.setText(text+"/")

def fungsi_akar(self):
text = self.label.text()
number = float(self.label.text())
result = number ** 0.5
self.label.setText(str(result))

def fungsi_percent(self):
text = self.label.text()
number = float(self.label.text())
result = number /100
self.label.setText(str(result))

def fungsi_pangkat(self):
text = self.label.text()
self.label.setText(text+"**")

def fungsi_hasil(self):
text = self.label.text()
try:
result = eval(text)
self.label.setText(str(result))
except:
self.label.setText("Error")

Langkah 11: Simpan dan Jalankan. Setelah anda selesai

membuat semua fungsi yang terhubung dengan tombol yang
anda buat dan sesuaikan sebelumnya. Selanjutnya anda
dapat menjalankan programnya dan mencoba program
kalkulator desktop anda.
Lebih lengkap terkait UI dan Source Code dapat anda
download di:
UI : https://tinyurl.com/ydcxbt2a
Code : https://tinyurl.com/4c8bpxjz