Pemrograman GUI

Graphycal User Interface (GUI) dengan Python

Pemrograman GUI
• Adalah suatu pemrograman berbasis desain user interface yang
dilakukan di atas suatu area desain yang disebut form.
• Pemrograman berbasis grafis menggunakan tool yang disebut GUI
Editor sekaligus memiliki Integrated Development Environment (IDE),
sehingga pemrograman grafis relative mudah dan lebih disukai,
karena sifatnya yg dapat dilihat secara visual dan melibatkan usur
desain pada pemrogramannya.
Dua Pendekatan pemrograman berbasis grafis
1. Event oriented programming
2. Event drven programming
Pendekatan pemrograman berbasis grafis :
1. Event oriented programming, seringkali dibandingkan dengan
conventional programming (request-response programming).
Ciri-ciri conventional programming sbb:
• Berupa kumpulan program yang dijalankan secara sekuensial berdasarkan
algoritma program.
• Apa yang diinginkan untuk dijalankan akan dijalankan sesuai urutan kegiatan
yg sudah jelas kapan dieksekusi.

Sedangkan ciri khas event oriented programming adalah sbb:

• Berupa kumpulan program yang dijalankan secara sekuensial berdasarkan
interaksi dengan pengguna, lewat tampilan antarmuka dengan aplikasi yg
dibuat, seperti kejadian click, double click, drag, drop, dll.
• Apa yang akan terjadi tidak bisa diprediksi kapan akan dieksekusi karena
program berjalan berdasarkan event/kejadian.
Pendekatan pemrograman berbasis grafis-next :
2. Event driven programming, sering dibandingkan dengan normal flow atau
control flow based programming.
Normal flow programming memiliki ciri khas:
• dimulai dari fungsi utama (main)
• Berjalan terus hingga program di terminate

Sedangkan event-driven programming, memiliki ciri khas sbb:

• Tidak bisa memprediksi Waktu dan kejadian suatu kejadian yang dibangkitkan oleh
pengguna, seperti misalnya program tidak akan dapat memprediksi kapan seorang
pengguna akan mengklik sebuah tombol sehingga program berjalan sebagai berikut :
a) Dimulai dari fungsi utama (main)
b) Antarmuka program aplikasi akan menunggu kejadian yang dibangkitkan oleh pengguna,
sehingga jika kejadian tersebut benar-benar muncul maka program akan menjalankan
komputasi yg sesuai.
Arsitektur pemrograman GUI berbasis event-driven :
Dari gambar disamping :
1. Bahwa event dari berbagai
macam input pengguna,
seperti dari keyboard,
penekanan tombol mouse,
tombol button, pengetikan
pada text box, dll
2. Semua event tsb akan
diterima/handle oleh sistem
operasi (windows, linux, dll)
3. Dari sistem operasi akan
diterus kepada
program/aplikasi yg dibuat
4. Program kemudian
memproses semua input
sesuai dengan kode program
yang ditulis pada event ybs.
Tiga hal penting pada Pemrograman GUI:
1. Event – driven programming
2. Properties, method dan event
3. Komponen GUI
Event – driven programming :
Program yg dibuat dikontrol oleh event/kejadian yg terjadi
(dibangkitkan) oleh suatu tindakan tertentu (baik dari dalam
maupun luar program).
• Tidakan dari dalam program misalnya: event form create (saat form
diciptakan)
• Tindakan dari luar program  misalnya: pengunan mengklik tombol close
form.
Properties, method dan event

• Properties merupakan apa yang melekat/ciri khas dari suatu komponen.

Misalnya: komponen button memiliki properties width, height, text, enabled,
dan lainnya.
• Method merupakan program yg dapat berbentuk fungsi atau prosedur.
• Event merupakan kejadian yg dibangkitkan/dijalankan saat terjadinya suatu
peristiwa tertentu baik dari dalam maupun dari luar program.
Jenis-jenis properties:
• Single properties:
• Berisi nilai yang bertipe data primitive (Boolean, integer, string, dll)
• Misal: property nama komponen dan property text yg bettipe string, property enabled yg
betipe Boolean (true dan false)
• Campound properties:
• Berisi nilai-nilai properti yg merupakan gabungan lebih dari satu nilai,
• misalnya: preti location yg terdiri dar kordinat x dan y, properties font yg terdiri dari nama
font, ukuran font, tebal font, dll
• Restricted properties:
• Berisi nilai property yg hanya diperbolehkan sesuai dengan pilihan yg ada.
• Misalnya: properti enabled yg hanya bisa memilih true atau false saja, pemilihan warna
berdasarkan pada plihan warna yg ada saja, pemilhan jenis cursor yg ada saja.
• Collection properties :
• Berisi nilai nilai property yg berupa kumpulan nilai.
• Misalnya: pada textbox multiline, yg bisa diisi property lines yg berupa kumpulan string
banyak baris.
 Komponen standar GUI
1. Button
Merupakan koponen yg digunakan sebagai
tombol untuk ditekan dan melakukan aksi
Komponen visual yg dapat didesain dan diliat
oleh pengguna
Properties penting dari button adalah: text,
font, backcolor, size, dan location (x,y)
Eventnya adalah onClick
2. textbox dan RichTextBox
Komponen tempat input teks dari
pengguna ke dalam sistem. Misalnya
form registrasi, login, dll.
Propertinya : tesxt, font, backcolor, size,
dan loction.
Eventnya : textChanged
Komponen standar GUI - next
3. MaskedTextBox 4. MonthCalender dan DateTimePicker
Merupakan textbox yg dapat diformat Untuk menampilan tanggalan dalam bulan,
menggunakan isian tertentu, seperti format Untuk menerima input dari pengguna berupa
email, format kode pos, nomor tlp, URL, dll tanggal Waktu tertentu
Dengan memlih format yg diinginkan, akan
mempermudah validasi input pengguna saat
isi data.
Komponen standar GUI - next
5. Label dan LinkLabel
• Label Merupakan komponen yg digunakan untuk menampilkan tulisan statis
dalam form yg tidak bisa dipilih oleh mouse.
• Memiliki properties text, font dan location
• Link label merupakan komponen label dimaksudkan agar tulisan pada label
berperilaku seperti link pada HTML.
 Komponen standar GUI - next
6. MenuStrip dan ContextMenuStrip Event : onClick
Merupakan komponen yg digunakan untuk ContextMenuStrip: merupakan komponen yg
membuat menu pulldown (bisa dilihat setiap digunakan untuk membuat menu klik kanan suatu
aplikasi windows base) komponen tertentu. Misalnya pada
Merupakan komponen visual yg dapat langsung textbox
terlihat saat mendesain 7. StatusStrip
Menulis menu dan submenunya Merupakan statusbar yang terletak di bagian
Propertinya : text, shortcutkeys, checkstate, bawah aplikasi
displaystyle, checkonclicked, cheked dan
alignment.
Komponen standar GUI - next
8. Panel, GroupBox, dan TabControl
• Panel digunakan untuk desain menimbulkan kesan menonjol pada
sekelompok komponen lain yg diletakkan di atasnya
• GroupBox adalah komponen yg digunakan untuk menyatukan sekelompok
komponen tertentu dg suatu teks nama kelompok
• TabControl digunakan untuk mengelompokkan sekumpulan komponen yg
berbeda bagian dalam tab yg berbeda.
 Komponen standar GUI - next
9. ComboBox, CheckListBox dan ListBox
• ComboBox merupakan komponen untuk memilih salah satu pilihan dalam bentuk dropdown
yg dapat ditulis oleh pengguna
• ListBox merupakan komponen untuk memilih salah satu, beberapa atau seluruh pilihan dg
memilih tombol control pada keyboard.
• CheckListBox digunakan untuk memilih satu, beberapa, atau semua item dg cara men-Cheked
pilihan yg dimaksud dg mouse
• Semua komponen tersebut merupakan komponen untuk menerima input dari pengguna
Komponen standar GUI - next
10. RadioButton dan Checkbox
• RadioButton digunakan untuk memilih satu pilhan dari beberapa pilihan yg
dibuat
• RadioButton didesain satu persatu dg status cheked atau tidak
• Chekbox digunakan untuk memilih beberapa pilihan yg juga dapat
menggunakan checkbox
• Prorpeti : cheked
• Event : click
Komponen standar GUI - next
11. folderBrowserDialog, FontDialog, OpenFileDialog,
PageSetupDialog, PrintDialog, PrintPreviewDialog dan
SaveFileDialog
• Semua kompone tsb. Digunakan untuk menampilkan dialog sesuai
dengan namanya, yaitu dialog untuk memilih folder, dialog untuk
memilih font, dialog untuk membuka file, dialog untuk memilih
font, dst.
• Dialog tsb, sudah jadi, tetapi tetap harus melakukan kode
program, terutama untuk dialog yg berhubungan dg printer
• Properti : nama file, nama font, opsi file, nama printer, dll sesuai
dg jenis dialognya.
Prinsip Desain GUI
Pengantar
• Tujuan desain pada aplikasi GUI adalah memberikan kenyamanan dan
kemudahan bagi pengguna
• Desain yg baik akan membantu pengguna membiasakan diri dengan
aplikasi, membuat pengguna betah menggunakan aplikasi dalam
jangka waktu yg lama dan membuat aplikasi menjadi indah dan
menarik
• Untuk dapat memenuhi kebutuhan pengguna, maka perlu ada fase
requirement untuk mengetahui kebutuhan dan keinginan pengguna.
Mendesain Aplikasi berbasis GUI
• Yang perlu diperhatikan adalah mensinkronkan antara tujuan aplikasi
dengan kegiatan yang harus dilakukan untuk mencapai tujuan
tersebut
Merancang Aplikasi berbasis GUI :
1. Aplikasi harus mengikuti sudut pandang pengguna, bukan
pembuat aplikasi
Contoh:
• Aplikasi pendukung fotografi, untuk mengurangi kerumitan dalam
memasukkan angka, aplikasi tersebut menggunakan elemen intuitif seperti
slider dan kurva yg bisa digeser untuk mengatur kecerahan font serta
menyediakan preview hasilnya. Karena seorang fotografer tentu tidak sabar
jika harus memasukkan digit angka satu persatu, meskipun dari sisi pembuat
aplikasi lebih mudah memberikan input angka.
Mearancang Aplikasi berbasis GUI -next:
2. Jangan menganggap “mapan” dan sekedar meniru aplikasi yang
sudah ada, tetapi perbaikilah demi kenyamanan pengguna
Mearancang Aplikasi berbasis GUI - next :
3. Selalu lakukan riset mengenai kebutuhan pengguna: siapakah mereka
dan apa yang diinginkannya.
Tahap Riset Kebutuhan (requirements) adalah :
• Data requirements
• Apa saja data yang akan diproses, bentuknya dan bagaimana menyimpannya
• Function requirements
• Aplikasi melakukan apa saja, menghasilkan apa saja (proses, cetak, tampilan, , grafik, save,
dll)
• Business requirements
• Tentang bisnis proses dan regulasi organisasi
• Brand and experience requirements
• Hal2 yg mempengaruhi brand (ciri khas dan merk), seperti: warna, bentuk, dll
• Technical requirements
• Tentang platform, jenis device dan hal-hal teknis lain yang akan digunakan
• Custumer and partner requirements
• Tentang bagaimana Instalasi, configurasi, pemeliharaan, lisensi, agar dapat dijalankan
dengan baik sehingga konsumen puas
Tujuan Mendesain Aplikasi berbasis GUI:
• Mengurangi kerja kognitif:
• Mengenali aplikasi beserta teks dan pengorganisasiannya
• Mengurangi kerja ingatan:
• Mengingat cara aplikasi, menggunakan menu, password, nama
control/komponen dan hubungan antar objek
• Mengurangi kerja visual:
• Mencari tahu arti/kegunaan komponen, mencari sebuah objek,
menerjemahkan isi layar
• Mengurangi kerja fisik:
• Banyaknya penekanan tobol/klik, gerakan mouse, gesture, berganti model
input, berganti halaman form.
Tipe-tipe Postur Aplikasi berbasis GUI:
• Postur yg dimaksud adalah apa yang tampak ketika kita melihat antarmuka
aplikasi secara sekilas dan tidak mendetil.
• Postur dianggap sepeti menentukan bentuk bangunan sesuai dengan
kegunaannya. Misalnya, kita tidak akan membuat bangunan seperti pasar,
jika nanti kegunaannya sebagai pertunjukan
• Begitu juga dengan desain antarmuka aplikasi, pilih postur yang tepat
sebelum mendesain detailnya, sesuaikam dengan kegunaannya.

Tipe-tipe Postur Aplikasi berbasis GUI:

1. Tipe Sovereign Posture
2. Tipe Transient Posture
3. Tipe Daemonic Posture
Tipe Sovereign Posture
• Aplikasi dengan tipe Sovereign Posture adalah aplkasi yang
memonopoli perhatian pengguna dalam jangka waktu yg lama
• Yaitu aplikasi yg mendukung pekerjaan kantor seperti : office suite
(Ms.Office, aplikasi desain grafis (corel draw, Photoshop, dll)
Tip untuk desain Tipe Sovereign Posture
• Optimalkan desain aplikasi untuk dignakan secara full screen.
• Visual style (gaya tata letak) yg dianut harus konservatif (mengikut kaidah
umumnya bentuk desain aplikasi sejenis)
• Harus menggunakan rich input
• Harus memiliki banyak hal yg data di setting dan jenis nilainya pun bervariasi: huruf, angka,
kadar dan sebaginya. Agar tidak membingungkan dan memperceat kerja penggunannya
• Input yg digunakan harus bervariasi, contoh: input utuk angka ukuran halaman (Height dan
Width) harus berbeda bentuknya dengan input untuk angka nilai warna RGB (bisa gunakan
slider)
• Harus mempunyai banyak feedback visual: berikan umpan balik yg jelas jika
sebuah tugas telah berhasil dikerjakan oleh aplikasi
• Maksimalkan porsi jendela aplikasi untuk bagian yg digunakan untuk mengolah
dokumen. Misalnya untuk aplikasi pengolah kata, gunakan porsi terbesar jendela
aplikasi sebagai tempat menulis. Menu dan toolbar tidak boleh memakan banyak
tempat.
• conto: Software Microsoft Outlook
Microsoft Outlook
Tipe Transient Posture
• Adalah Aplikasi yang memiliki satu fungsi saja, dengan control yang
terbatas
• Aplikasi ini dipanggil bila perlu, muncul, bekerja atau dilihat
informasinya, kemudian ditutup kembali
Tip mendesain Tipe Transient Posture
• Tampilan harus cerah dan jelas
• Harus terlihat simple, dibatasi oleh satu jendela saja dan halaman
formnya tunggal
• Harus dapat mengingat preferensi pengguna, misalnya posisi jendela
aplikasi, konfigurasi informasi yang ditampilkan di jendela aplikasi
atau setting parameter untuk tugas yang telah dikerjakan sebelumnya
• Contoh: Widget pada sistem operasi windows, linux, android ataupun
MacOS
Tipe Daemonic Posture
• Aplikasi yang interaksinya minimum sekali dengan pengguna
• Biasanya berjalan dibelakang layar atau tidak terlihat oleh pengguna
jika tidak perlu (running in backround).
• Rancangan layar tidak terlalu penting, tetapi harus dapat
memberikan notifikasi pada pengguna saat terjadi perubahan kondisi
atau menginformasikan hasil tugas yg diberikan
• Notifikasi dapat dimunculkan melalui form kecil atau lebih disarankan
untuk melalui balloon atau kotak yg tidak terlalu besar yg muncul di
taskbar sistem operasi.
• Contoh: device driver, emulator, antivirus, dropbox, dll
Excise pada Aplikasi berbasis GUI
• Excise adalah kerja ekstra yan dibutuhkan oleh pengguna untuk
mecapai tujuan melalui sebuah aplikasi
• Excise harus diminimalkan pada suatu aplikasi
Beberapa Excise pada aplikasi GUI :
1. First-time tour atau bantuan petunjuk penggunaan yag muncul saat aplikasi pertama kali
digunakan. tujuannya baik, tetapi kadang ada first-time tour yang terlalu kompleks atau
berlebihan sehingga pengguna justru teralihkan perhatainnya atau merasa bosan dan capai
Dalam memakai aplikasi
2. Pesan kesalahan, notifikasi dan komfirmasi yang tidak perlu atau menganggu kelancaran aliran
(flow) pemakaian aplikasi. Kotak dialog pertanyaan yang terlalu sering muncul tentu akan
menganggu pekerjaan kita
• Membuat pengguna untuk meminta ijin saat akan melakukan sesuatu atau memanggl sebuah perintah/fungsi
• Memaksa pengguna membuka jendela baru untuk melakukan fungsi yg mempengaruhi jendela kerja yang
sekarang. Padahal sebenarnya tidak perlu berpindah
• Membuat pengguna terpaksa melakuka resize jendela atau scroll secara tidak perlu
• Memaksa pengguna memindahkan jendela yang menutupi lainnya padahal ruang pada layar msih tersedia
• Membuat pengguna memasukan kembali preferensinya setiap kali membuka aplikasinya
• Memaksa pengguna mengisi beberapa textbox atau field yg tidak wajib
• Memaksa pengguna selalu mengkonfirmasi aksinya
• Membiarkan aksi pegguna mengarah ke error yg harus ditanggapi dengan mematikan fungsi yang dapat
menyebabkan kesalahn.
3. Harus berpindah-pindah antar jendela, tampilan atau halaman atau antar panel dalam satu
jendela
4. Harus berpindah-pindah dari satu perintah ke perintah ain, baik itu layar, menu atau toolbox
untuk dapat menyelesaikan sebuah fungsi saja.
Prinsip Desain Visual pada Aplikasi berbasis GUI
• Gunakan properti/sifat visual untuk mengelompokkan elemen dan
menunjuk hirarki yang jelas
• Buatlah struktur dan flow visual pada setiap tingkatan
pengelompokkan dan lakukan perataan (alligment) dan rata terkotak
(grid)
• Gunakan pengambaran yang konsisten dan cocok secara kontekstual
• Integrasikan style dan fungsi secara komprehensif dan tepat guna
• Hindari derau visual dan kesemrawutan
Python dan GUI
• Python mendukung pengembangan Aplikasi yang berbasis GUI
• Terdapat beberapa GUI toolkit atau Pustaka (paket an modul) yang
dapat digunakan untuk membuat aplikasi Visual (Grafik) di dalam
Python
• GUI toolkit yang popular :
• Tkinter (pustaka standar Python)
• Pustaka pihak ketiga:
• wxPython
• PyGObject
• PyQt (Yang digunakan pada materi kulia ini)
• PySide
PyQt:
• PyQt adalah framework untu pembuatan GUI (GUI toolkit) yang
merupakan kumpulan library (berupa modul dan kelas) untuk
memudahkan para pengguna Python dalam mengembangkan
program visual menggunakan library Qt.
Beberapa kelompok kelas (Modul) di dalam PyQt5:
• QtCore : berisi kelas kelas inti dalam PyQt yang mendukung
fungsionalitas program yg tidak berkaitan dengan GUI, seperti: waktu,
file, direktori, beberapa tipe data, stream, URL, dll
• QtGui : berisi kelas kelas yang berhubungan dengan pembuatan form
(windows), penangan event (dalam Qt disebut “signal and slot”),
pengaturan font, gambar 2D, dan teks
• QtWidgets : berisi kumpulan kelas yang berkaitan dengan control-
kontrol penyusun form
• QtMultimedia : digunakan untuk pengembangan program yang
berkaitan dengan audio dan video
• QtSql : digunakan untuk mengembangkan program yang melakukan
mengakses data di dalam sistem database.
Dua metode membuat GUI di dalam Python :
• Menggunakan kode murni: (waktu  lama)
• Pembuatan objek control (widget)
• Pengaturan tata letak (layout)
• Kode kode logis
• Qt Designer : Tool Visual untuk merancang tampilan GUI secara
mudah dan cepat
Contoh : Program GUI Minimal :
import sys HASIL:
from PyQt5.QtWidgets import QApplication,
QWidget, QLabel

if __name__ == '__main__':
a = QApplication(sys.argv)

form = QWidget()
form.resize(200, 100)
form.move(300, 300)
form.setWindowTitle('GUI Minimal')

label = QLabel('Hallo PyQt')

label.move(55, 40)
label.setParent(form)

form.show()

a.exec()
 Penjelasan Program :
Import sys : modul sys perlu diimpor ke setiap program yg dibuat
menggunakan PyQt, karena pada saat membua objek dari keas QApplication, form.setWindowTitle('GUI Minimal'):
kita akan memanggil sys.argv untuk menentukan judul form
from PyQt5.QtWidgets import QApplication, QWidget, QLabel: label = QLabel('Hallo PyQt')
perintah untuk mengimpor kelas QAplication, QWidget, dan QLabel label.move(55, 40)
kelas-kels tersebut didefinisian di dalam modul QtWidgets yang berada label.setParent(form)
dalam paket PyQt5 a. Tiga baris kode di atas berguna untuk membuat label dan
a = QApplication(sys.argv) : menempatkannya ke dalam form pada koordinat (55,40)
untuk membuat Objek (Instance) dari kelas QAplication metode setParet() menentukan bahwa parent dari komponen label adalah
setiap program yang ditulis menggunakan PyQt harus memiliki objek form
tersebut form.show() :
form = QWidget(): untuk menampilkan form beserta control-kontrol yang sudah ada
untuk membuat objek dari kelas QWidget, dalam contoh ini, objek didalamnya
tersebut diperankan sebagai form utama dari program yang dibuat a.exec() :
form.resize(200, 100): merpakan pengulangan utama (main lop) dari aplikasi
metode resize() pada kelas QWidget bergna untuk mengubah ukuran dengan kode ini, form akan ditampilkan secara terus menerus sampai
form (windows) ada respon tertentu dari user (pengguna program).
form.move(300, 300): Perlu diperhatikan bahwa metode exec_() diakhiri denga tanda
metode move() pada kelas QWidget (dan kelas-kelas control lainnya) underscore, karena dalam Python exec merupakan kata kunci dan
berguna untuk menentukan posisi atau koordinat form pada saat memiliki arti lain
ditampilkan
pemanggilan metode resize() dan move() dapat diganti dengan
setGeometry() menjadi berikut :
form.setGeometry(300, 300, 200, 100)
Menggunakan Qt Designer
• Hasil rancangan tampilan yang dibuat menggunakan Qt Designer akan
disimpan ke dalam file dengan ekstensi .ui (singkatan user interface)
yang kodenya berada dalam format XML.
• Untuk mengubah file .ui (kode xml) menjadi file .py (kode Python)
diperlukan program lain yang disebut pyuic5 (merupakan bagian dari
PyQt).
Tampilan Utama dari Qt Designer :
Hasil: