PRAKTIKUM PEMROGRAMAN DESKTOP

LAB COMMON COMPUTING TEKNIK INFORMATIKA

FAKULTAS TEKNIK UNIVERSITAS TRUNOJOYO

Widget Dasar

Materi
● Radio Button
● Check Box
● Spin Box
● Scroll Bar & Slider
● List Widget

Radio Button

Radio Button adalah widget yang dapat menerima pilihan true atau false. Dalam
sekumpulan Radio Button hanya ada satu yang kondisinya terpilih/true.
Contoh program yang akan dibuat adalah kalkulator sederhana untuk menambah,
mengurangi, mengali, dan membagi dua angka input dari pengguna. Hasil perhitungan akan
ditampilkan pada textlabel. Tampilan program dapat dilihat pada gambar 1.

Gambar 1. Tampilan Program kalkulator menggunakan Radio Button

Langkah-langkah yang perlu dilakukan adalah:

1. Buat antar muka seperti pada gambar 1 menggunakan Qt Designer.
a. Line Edit yang atas diberi nama: lineEdit
b. Line Edit yang bawah diberi nama: lineEdit_2
c. Radio Button pertama diberi nama: radioButton
d. Radio Button kedua diberi nama: radioButton_2
e. Radio Button ketiga diberi nama: radioButton_3
f. Radio Button keempat diberi nama: radioButton_4

1
PRAKTIKUM PEMROGRAMAN DESKTOP
LAB COMMON COMPUTING TEKNIK INFORMATIKA
FAKULTAS TEKNIK UNIVERSITAS TRUNOJOYO

g. Label yang digunakan untuk menampilkan hasil perhitungan diberi nama:

label

Simpan hasilnya dengan nama Prak2aKalkulator.ui dan lakukan proses konversi

menggunakan pyuic5 menjadi Prak2aKalkulator.py.

2. Lanjutkan dengan membuat aplikasi utama seperti yang dapat dilihat pada program
1. Beri program utama nama: Prak2aKalkulatorMain.py

import sys
from Prak2aKalkulator import *

class MyForm(QtWidgets.QDialog):
def __init__(self, parent=None):
QtWidgets.QWidget.__init__(self, parent)
self.ui = Ui_Dialog()
self.ui.setupUi(self)
self.ui.pushButton.clicked.connect(self.calculate)
def calculate(self):
result = 0
if len(self.ui.lineEdit.text())!=0:
a=int(self.ui.lineEdit.text())
else:
a=0
if len(self.ui.lineEdit_2.text())!=0:
b=int(self.ui.lineEdit_2.text())
else:
b=0
if self.ui.radioButton.isChecked()==True:
result=a+b
if self.ui.radioButton_2.isChecked()==True:
result=a-b
if self.ui.radioButton_3.isChecked()==True:
result=a*b
if self.ui.radioButton_4.isChecked()==True:
result=a/b
self.ui.label.setText("Hasil: " + str(result))

if __name__ == "__main__":
app = QtWidgets.QApplication(sys.argv)
myapp = MyForm()
myapp.show()
sys.exit(app.exec_())
Program 1. Kalkulator sederhana menggunakan radio button

2
PRAKTIKUM PEMROGRAMAN DESKTOP
LAB COMMON COMPUTING TEKNIK INFORMATIKA
FAKULTAS TEKNIK UNIVERSITAS TRUNOJOYO

Program 1 membuat custom slot untuk menghitung operasi matematika sesuai dengan
pilihan radio button pengguna.

Check Box

Check Box adalah widget yang memiliki fungsi mirip dengan Radio Button, yaitu
untuk melakukan pemilihan dari sekian opsi yang ada. Bedanya, jika Radio Button hanya
dapat terpilih satu dari sekian radio button, Check Box memungkinkan pengguna untuk
memilih lebih dari satu widget Check Box.
Contoh program yang akan dibuat adalah penghitung harga makanan sederhana.
Hasil perhitungan akan ditampilkan pada line Edit yang diset disable. Tampilan program
dapat dilihat pada gambar 2.

Gambar 2. Tampilan Program penghitung harga makanan dengan Check Box

Langkah-langkah yang perlu dilakukan adalah:

1. Buat antar muka seperti pada gambar 2 menggunakan Qt Designer:
a. Label nama rumah makan diedit Font-nya: bold, underline, size diperbesar,
jenis font diganti
b. Check Box pertama diberi nama: checkBox
c. Check Box kedua diberi nama: checkBox _2
d. Check Box ketiga diberi nama: checkBox_3
e. Check Box keempat diberi nama: checkBox _4
f. Line Edit yang digunakan untuk menampilkan hasil perhitungan diberi nama:
lineEdit, property enable-nya diganti jadi disable (di-uncheck) supaya
pengguna tidak dapat mengubah-ubah nilai yang ditampilkan.

3
PRAKTIKUM PEMROGRAMAN DESKTOP
LAB COMMON COMPUTING TEKNIK INFORMATIKA
FAKULTAS TEKNIK UNIVERSITAS TRUNOJOYO

Simpan hasilnya dengan nama Prak2bCheckBox.ui dan lakukan proses konversi

menggunakan pyuic5 menjadi Prak2bCheckBox.py.

2. Lanjutkan dengan membuat aplikasi utama seperti yang dapat dilihat pada program
2. Beri program utama nama: Prak2bCheckBoxMain.py

import sys
from Prak2bCheckBox import *

class MyForm(QtWidgets.QDialog):
def __init__(self, parent=None):
QtWidgets.QWidget.__init__(self, parent)
self.ui = Ui_Dialog()
self.ui.setupUi(self)
self.ui.pushButton.clicked.connect(self.calculate)
def calculate(self):
res=0
if self.ui.checkBox.isChecked()==True:
res=res+10000
if self.ui.checkBox_2.isChecked()==True:
res=res+12000
if self.ui.checkBox_3.isChecked()==True:
res=res+12000
if self.ui.checkBox_4.isChecked()==True:
res=res+13000
self.ui.lineEdit.setText(str(res))

if __name__ == "__main__":
app = QtWidgets.QApplication(sys.argv)
myapp = MyForm()
myapp.show()
sys.exit(app.exec_())
Program 2. Penghitung total harga makanan sederhana menggunakan check box

Program 2 membuat custom slot untuk menghitung total harga makanan sesuai
dengan pilihan check box pengguna. Jika tidak ingin menggunakan tombol untuk
menghitung total harga, bisa juga dibuat 4 koneksi dari sinyal clicked dari tiap check box
untuk memanggil custom slot calculate. Dalam kondisi ini, tombol sudah tidak diperlukan
lagi.

Spin Box
Spin box sering kali digunakan sebagai widget yang berfungsi menerima input angka.
Pengguna bisa mengubah-ubah angka yang tertera dengan mengetik atau mengklik tombol
panah atas dan panah bawah disamping kanan tulisan.

4
PRAKTIKUM PEMROGRAMAN DESKTOP
LAB COMMON COMPUTING TEKNIK INFORMATIKA
FAKULTAS TEKNIK UNIVERSITAS TRUNOJOYO

Contoh program yang akan dibuat adalah penjumlah 2 angka yang diinputkan
menggunakan spin box (untuk input bilangan bulat) dan double spin box (untuk input
bilangan pecahan). Tampilan program dapat dilihat pada gambar 3.

Gambar 3. Tampilan program penjumlahan menggunakan spinbox dan double spinbox.

Langkah-langkah yang perlu dilakukan adalah:

1. Buat antar muka seperti pada gambar 3 menggunakan Qt Designer:

a. Label tempat menampilkan hasil penjumlahan bernama label_3
b. Kedua Line Edit di uncheck property enabled-nya
Simpan hasilnya dengan nama Prak2cSpinBox.ui dan lakukan proses konversi
menggunakan pyuic5 menjadi Prak2cSpinBox.py.

2. Lanjutkan dengan membuat aplikasi utama seperti yang dapat dilihat pada program
3. Beri program utama nama: Prak2cSpinBoxMain.py

import sys
from Prak2cSpinBox import *

class MyForm(QtWidgets.QDialog):
def __init__(self, parent=None):
QtWidgets.QWidget.__init__(self, parent)
self.ui = Ui_Dialog()
self.ui.setupUi(self)
self.ui.spinBox.editingFinished.connect(self.tampil1)
self.ui.doubleSpinBox.editingFinished.connect(self.tampil2)
self.ui.pushButton.clicked.connect(self.calculate)
def tampil1(self):
self.ui.lineEdit.setText(str(self.ui.spinBox.value()))
def tampil2(self):
self.ui.lineEdit_2.setText(str(self.ui.doubleSpinBox.value()))
def calculate(self):
jumlah= self.ui.spinBox.value() + self.ui.doubleSpinBox.value()
self.ui.label_3.setText('Sum is: ' + str( jumlah))

if __name__ == "__main__":
app = QtWidgets.QApplication(sys.argv)
myapp = MyForm()

5
PRAKTIKUM PEMROGRAMAN DESKTOP
LAB COMMON COMPUTING TEKNIK INFORMATIKA
FAKULTAS TEKNIK UNIVERSITAS TRUNOJOYO

myapp.show()
sys.exit(app.exec_())
Program 3. Penjumlah 2 angka sederhana menggunakan spin box dan double spin box

Program 3 membuat 3 custom slot:

1. tampil1: menangkap sinyal editingFinished dari spinBox dan melakukan update nilai
lineEdit berdasar nilai dari spinBox
2. tampil2: menangkap sinyal editingFinished dari doubleSpinBox dan melakukan
update nilai lineEdit_2 berdasar nilai dari doubleSpinBox
3. calculate: menangkap sinyal clicked dari pushButton, melakukan penjumlahan 2 nilai
milik spinBox dan doubleSpinBox, dan menampilkan hasilnya pada label_3.

Scroll Bar dan Slider

Scroll Bars adalah widget yang digunakan untuk memberikan informasi visual posisi
aktif sekarang ada di mana dari keseluruhan lokasi yang ada; dan dengan menggeser handle,
posisi aktif sekarang bisa digerakkan. Slider adalah widget yang bisa digeser handle-nya
untuk memilih nilai integer dari 2 nilai batasannya.
Contoh program yang akan dibuat akan menunjukkan penggunaan scroll bar dan
slider. Tampilan program dapat dilihat pada gambar 4.

Gambar 4. Tampilan program contoh penggunaan scroll bar dan slider.

Langkah-langkah yang perlu dilakukan adalah:

6
PRAKTIKUM PEMROGRAMAN DESKTOP
LAB COMMON COMPUTING TEKNIK INFORMATIKA
FAKULTAS TEKNIK UNIVERSITAS TRUNOJOYO

1. Buat antar muka seperti pada gambar 4 menggunakan Qt Designer:

a. Label tempat menampilkan hasil penjumlahan bernama label

Simpan hasilnya dengan nama Prak2dSlider.ui dan lakukan proses konversi

menggunakan pyuic5 menjadi Prak2dSlider.py.

2. Lanjutkan dengan membuat aplikasi utama seperti yang dapat dilihat pada program
4. Beri program utama nama: Prak2dSlider.py.

import sys
from Prak2dSlider import *

class MyForm(QtWidgets.QDialog):
def __init__(self, parent=None):
QtWidgets.QWidget.__init__(self, parent)
self.ui = Ui_Dialog()
self.ui.setupUi(self)
self.ui.horizontalScrollBar.valueChanged.connect(self.scrollhorz)
self.ui.verticalScrollBar.valueChanged.connect(self.scrollvert)
self.ui.horizontalSlider.valueChanged.connect(self.sliderhorz)
self.ui.verticalSlider.valueChanged.connect(self.slidervert)
def scrollhorz(self,value):
self.ui.label.setText(str(value))
self.ui.horizontalSlider.setValue(value)
def scrollvert(self,value):
self.ui.label.setText(str(value))
self.ui.verticalSlider.setValue(value)
def sliderhorz(self,value):
self.ui.label.setText(str(value))
self.ui.horizontalScrollBar.setValue(value)
def slidervert(self,value):
self.ui.label.setText(str(value))
self.ui.verticalScrollBar.setValue(value)

if __name__ == "__main__":
app = QtWidgets.QApplication(sys.argv)
myapp = MyForm()
myapp.show()
sys.exit(app.exec_())
Program 4. Penggunaan slider dan scroll bar

Program 4 membuat 4 custom slot:

1. scrollhorz: menangkap sinyal valueChanged dari horizontal ScrollBar dan melakukan
update nilai label dan horizontal Slider berdasar nilai horizontal ScrollBar.
2. scrollvert: menangkap sinyal valueChanged dari vertical ScrollBar dan melakukan
update nilai label dan vertical Slider berdasar nilai vertical ScrollBar.
3. sliderhorz: menangkap sinyal valueChanged dari horizontal Slider dan melakukan
update nilai label dan horizontal ScrollBar berdasar nilai horizontal Slider.

7
PRAKTIKUM PEMROGRAMAN DESKTOP
LAB COMMON COMPUTING TEKNIK INFORMATIKA
FAKULTAS TEKNIK UNIVERSITAS TRUNOJOYO

4. slidervert: menangkap sinyal valueChanged dari vertical Slider dan melakukan

update nilai label dan vertical ScrollBar berdasar nilai vertical Slider.

List Widget
List widget adalah widget yang digunakan untuk menampung dan menampilkan
informasi berbentuk list string. Di Qt Designer, List widget terdapat pada kelompok Item
Widget di Widget Box (sebelah kiri layar).
Contoh program yang akan dibuat akan menunjukkan list widget untuk menyimpan
text input yang diberikan pengguna lewat line edit. Tampilan program dapat dilihat pada
gambar 5.

Gambar 5. Tampilan program contoh penggunaan list widget.

Langkah-langkah yang perlu dilakukan adalah:

1. Buat antar muka seperti pada gambar 4 menggunakan Qt Designer. Nama-nama

widget mengikuti nama default.
Simpan hasilnya dengan nama Prak2eListWidget.ui dan lakukan proses konversi
menggunakan pyuic5 menjadi Prak2eListWidget.py.

2. Lanjutkan dengan membuat aplikasi utama seperti yang dapat dilihat pada program
5. Beri program utama nama: Prak2eListWidget.py.

import sys
from Prak2eListWidget import *

class MyForm(QtWidgets.QDialog):
def __init__(self, parent=None):
QtWidgets.QWidget.__init__(self, parent)
self.ui = Ui_Dialog()
self.ui.setupUi(self)
self.ui.pushButton.clicked.connect(self.tambahkanlist)
def tambahkanlist(self):
self.ui.listWidget.addItem(self.ui.lineEdit.text())
self.ui.lineEdit.setText('')
self.ui.lineEdit.setFocus()

8
PRAKTIKUM PEMROGRAMAN DESKTOP
LAB COMMON COMPUTING TEKNIK INFORMATIKA
FAKULTAS TEKNIK UNIVERSITAS TRUNOJOYO

if __name__ == "__main__":
app = QtWidgets.QApplication(sys.argv)
myapp = MyForm()
myapp.show()
sys.exit(app.exec_())
Program 5. Penggunaan list widget

Program 5 membuat 1 custom slot: tambahkanlist yang memproses sinyal push

button clicked. Pada method tersebut, isi line edit akan ditambahkan pada list widget,
menghapus isi line edit, dan memfokuskan/menaruh kursor aktif pada line edit.
List widget juga mendukung operasi-operasi lain terhadap list yang dipunyainya.
Contoh program berikutnya akan menggunakan input dialog box sebagai sarana input
perubahan nilai. Tampilan program dapat dilihat pada gambar 6.

Gambar 6. Tampilan program contoh operasi-operasi pada list widget.

Langkah-langkah yang perlu dilakukan adalah:

1. Buat antar muka seperti pada gambar 4 menggunakan Qt Designer.

a. Tombol Edit bernama pushButton_2
b. Tombol Delete bernama pushButton_3
c. Tombol Delete All bernama pushButton_4
d.
Simpan hasilnya dengan nama Prak2fOperasiListWidget.ui dan lakukan proses
konversi menggunakan pyuic5 menjadi Prak2fOperasiListWidget.py.

2. Lanjutkan dengan membuat aplikasi utama seperti yang dapat dilihat pada program
6. Beri program utama nama: Prak2fOperasiListWidget.py.

import sys
from Prak2fOperasiListWidget import *

class MyForm(QtWidgets.QDialog):
def __init__(self, parent=None):
QtWidgets.QWidget.__init__(self, parent)
self.ui = Ui_Dialog()
self.ui.setupUi(self)
self.ui.pushButton.clicked.connect(self.tambahkanlist)
self.ui.pushButton_2.clicked.connect(self.editlist)
self.ui.pushButton_3.clicked.connect(self.deletelist)

9
PRAKTIKUM PEMROGRAMAN DESKTOP
LAB COMMON COMPUTING TEKNIK INFORMATIKA
FAKULTAS TEKNIK UNIVERSITAS TRUNOJOYO

self.ui.pushButton_4.clicked.connect(self.deletealllist)
def tambahkanlist(self):
self.ui.listWidget.addItem(self.ui.lineEdit.text())
self.ui.lineEdit.setText('')
self.ui.lineEdit.setFocus()
def editlist(self):
row=self.ui.listWidget.currentRow()
newtext, ok=QtWidgets.QInputDialog.getText(self, "Enter new text", "Enter
new text")
if ok and newtext != '':
self.ui.listWidget.takeItem(row)
self.ui.listWidget.insertItem(row,QtWidgets.QListWidgetItem(newtext))
def deletelist(self):
self.ui.listWidget.takeItem(self.ui.listWidget.currentRow())
def deletealllist(self):
self.ui.listWidget.clear()

if __name__ == "__main__":
app = QtWidgets.QApplication(sys.argv)
myapp = MyForm()
myapp.show()
sys.exit(app.exec_())
Program 6. Penggunaan list widget

Program 6 memiliki 3 tombol & slot tambahan. Untuk slot delete dan delete all,
program hanya perlu memanggil method bawaan list widget. Khusus untuk edit, diperlukan
proses pemanggilan Input Dialog yang menerima input text. Selain text, input dialog juga
memiliki varian untuk menerima input integer dan double. Nilai kembaliannya ada 2: nilai
yang dimasukkan dan pengklikan tombol ok. Hanya jika pengguna mengklik tombol ok dan
memberikan text, barulah proses edit dilakukan dengan terlebih dahulu menghapus item
terseleksi dan menambahkan item baru pada instansiasi obyek QListWidgetItem.

Tugas
1. Modifikasi program 2: hapus tombol. Proses penghitungan total harga terjadi tiap
kali sebuah check box di click. Hint: gunakan method clicked milik check box.
2. Buat aplikasi untuk menyimpan data diri:
a. Nama: Line Edit
b. Jenis Kelamin: Radio Button
c. Apakah memiliki: SIM, Paspor, STNK, ATM, dll. Masing-masing pilihan
menggunakan Check Box
d. Tinggi badan: Spin Box/ Double Spin Box
e. Tahun lahir: Slider. Batasi sekitar 5 tahun dari tahun kelahiran pribadi untuk
nilai maksimum dan minimum slider.
f. Tambahkan tombol yang jika diklik akan menyimpan data-data diatas ke
dalam sebuah List Widget
g. Tambahkan juga tombol untuk delete dan delete all

10
PRAKTIKUM PEMROGRAMAN DESKTOP
LAB COMMON COMPUTING TEKNIK INFORMATIKA
FAKULTAS TEKNIK UNIVERSITAS TRUNOJOYO

h. Nilai plus jika program menyimpan semua data di atas dalam satu item &
dapat melakukan edit data yang sudah ada tanpa harus mengetik ulang data
satu-per-satu.

11