Tutorial membuat GUI python dari PySide

Belajarpython – assalamualaikum wr. wb.

Jumpa lagi nih teman – teman.. pada kesempatan kali ini saya akan mencoba untuk memeberikan tutorial untuk membuat GUI dengan PySide nih...nah sudah taukah kalian apa itu PySide ? nah bagi kalian yang belum tau apa itu PySide, saya akan mencoba untuk menjelaskan apa itu PySide.. nah PySide merupakan sebuah Library python yang digunakan untuk membangun sebuah GUI dalam bahasa pemrograman python. Namun, library PySid ini tidak Build in dalam bahasa python. Sehingga kalian harus menginstallnya secara terpisah.. nah bagi kalian yang belum menginstall python kalian bisa baca Tutorial untuk menginsatall PySide ini DISINI. Nah silahkan diistall terlebih dahulu ya sebelum kalian belajar untuk membuat GUI dari python ini..

Nah setelah kalian menginstall PySide ini, kalian bisa langsung belajar untuk membuat GUI dari Bahasa pemrograman python menggunakan PySide ini.. yuk langsung saja kita mulai prosesnya...

Cara membuat Window dari PySide GUI python.

Dalam proses pembelajaran, tentu kita harus memulainya dari bawah. Dan bahkan dari dasar dan 0 sekalipun. Hali ini bertujuan untuk membuat pemahaman kita lebih kuat dan dasar kita untuk melangkah lebih jauh menjadi lebih mapan dan tidak goyah ditengah jalan. Nah proses inilah yang akan saya terap kan dalam proses belajar membuat GUI dari PySide ini..

Pertama kali nya, saya akan mengajak Anda untuk menampilkan sebuah window. Dan tidak akan ada yang akan saya tampilkan selain window. Nah bagaimana cara untuk menampilkan window ? nah langsung saja ya saya kasi source code nya.. dan akan saya lanjutkan dengan penjelasnnya...


import sys
from PySide import QtGui

app = QtGui.QApplication(sys.argv)

jendela = QtGui.QWidget()
jendela.resize(250, 150)
jendela.show()

sys.exit(app.exec_())


Nah itu dia teman – teman.. source code dari program untuk menampilkan sebuah window. Dan seperti yang sudah saya jelaskan di atas, program tersebut hanya untuk menampilkan sebuah window polos dan tanpa Teks maupun Button. Nah untuk membuktikannya,  kalian bisa menyalin dan mempaste nya di IDLE atau teks editor lainnya. Lalu simpan dalam bentuk ekstensi ‘py’. Lalu coba kalian klik 2 kali pada file nya atau jalan kan programnya. Maka dengan segera, akan tampil sebuah window kosong... seperti di bawah ini..



Nah selanjutnya saya akan mencoba untuk  menjelaskan program diatas.. langsung saja  kita simak sama – sama penjelasan saya di bawah ini..

import sys //ini digunakan untuk meng impor sys
from PySide import QtGui //ini digunakan untuk mengimpor QtGui dari PySide.

app = QtGui.QApplication(sys.argv) //mendeklarasikan variabel ‘app’ untuk menampung QtGui.QApplication(sys.argv)

jendela = QtGui.QWidget() //digunakan untuk mendeklarasikan variabel ‘jendela’ yang menampung widget dari Qt.Gui
jendela.resize(250, 150) //ini digunakan untuk mengatur ukuran window atau jendela yang akan kita tampilkan nantinya. Kalian bisa mengubah angka – angka tersebut sesuka kalian.
jendela.show() //ini digunakan untuk menampilkan jendela yang sudah kita buat tadi.

sys.exit(app.exec_()) //ini merupakan code wajib dan harus ada.

Nah itu dia teman – teman program pertama kita... selamat mencoba dan memahami.. serta selamat berkaya teman – teman ... hehe

Mengubah title atau judul pada window / jendela saat kita tampilkan nantinya.

Kalau kita perhatikan lebih detail, kalian bisa melihat tulisan ‘python’ di paling atas window atau jendela yang sudah kita buat tadi. Nah sebenarnya kita bisa mengubah nama atau tulisan tersebut. Yang tentu akan menjadi title atau judul window/jendela kita nantinya... nah lalu bagaimana sih cara merubahnya ? nah untu menjawab pertanyaan itu, yuk kita simak sama – sama kelanjutan dari tutorial pembuatan GUI PySide ini...

Sebenarnya dan sejujurnya... (hehe) untuk mengubah judul tampilan window / jendela yang sudah kita buat tadi caranya cukup mudah... kita hanya perulu menambahkan satu baris code program saja... nah code program yang akan kita tambahkan ini adalah “jendela.setWindowTitle('nama judul')”.
Nah code itulah yang akan kita tambahkan nantinya... nah teks “nama judul” yang ada pada code tersebut bisa kita ganti sesuai ke inginan kalian tentunya.. nah lalu dimanakah kita akan menaruh atau meletak kan code tersebut ? atau di baris berapakah kita harus meletakkannya? Nah untuk mendapatkan jawabannya, kalian bisa langsung melihat code program di bawah ini ya...


import sys
from PySide import QtGui

app = QtGui.QApplication(sys.argv)

jendela = QtGui.QWidget()
jendela.setWindowTitle('ini jendelaku')
jendela.resize(250, 150)
jendela.show()

sys.exit(app.exec_())



nah setelah melihat code diatas, apakah kalian sudah tau di mana kalian harus meletakkan code program untuk mengubah title atau judu nya ? jika belum tau, silahkan lihat perbedaannya dengan code yang sebelumnya ya... atau code di atasnya... nah berikut saya sertakan secreenshoot dari program diatas ketika saya jalan kan.. oke lihat di bawah ini ya teman – teman..



Itu dia hasil screenshoot dari program diatas... bisa kita lihat ya.. tepat di pojok kanan atas, title atau judul window nya sudah berubah dengan naman “ini jendelaku”... yang artinya program kita berhasil.. hehe... nah setelah kalian melihat screenshoot nya diatas, seperti biasa... saya akan mencoba untuk menjelaskannya.. dengan harapan dapat membuat kalian akan menjadi lebih paham... yuk langsung saja kita simak penjelasan saya...

karena sebagian besar program sudah saya jelaskan pada kegiatan atau program sebelumnya, maka pada penjelasan ini saya hanya akan menjelaskan tambahan program nya saja.. hal ini untuk menghemat penulisan dan lebih mengacu kepada efisiensinya.. nah penjelasan tambahan programnya seperti berikut ini...

jendela.setWindowTitle('ini jendelaku') //seperti yang sudah saya katakan sebelum – sebelumya, code program ini digunakan untuk mengubah nama atau judul  di atas window kita nantinya. Saya memberi nama jendela nya dengan nama ‘ini jendelaku’. Dan sudah saya kasih tanda merah.. Tentu kalian bisa mengubahnya sesuka kalian.
Nah itu dia penjelasannya... semoga kalian bisa memahami code program nya ya...

Mengubah ikon pada jendela yang di buat menggunakan PySide python.

Nah setelah kita membuat atau menampilkan jendela dari PySide dan mengubah judul atau titile nya,, sekarang kita akan mencoba untuk mengubah ikon pada window tersebut. Nah ikon ini nantinya akan tampil di atas jendela yang akan bersebelahan dengan judul dari window. Lebih tepatnya akan berada di sebelah kiri dari judul jendela atau window kita nantinya.. nah setelah kita tau apa yang akan kita buat, yuk langsung saja kita lihat source code nya.. oke berikut saya sertakan source code nya dibawah ini..


import sys
from PySide import QtGui

app = QtGui.QApplication(sys.argv)

jendela = QtGui.QWidget()
jendela.resize(250, 150)
jendela.setWindowTitle('ini icon ku')
jendela.show()
jendela.setWindowIcon(QtGui.QIcon('D:\moham.jpg'))

sys.exit(app.exec_())

nah itu dia program nya.. sebenarnya programnya sama saja seperti pada saat kita membuat window atau jendela diatas.. namun, saya hanya menambahkan satu baris code ditengah tengah nya saja. Apa kah itu ? liat yang teliti ya.. hehe.. iya.. code nya adalah “jendela.setWindowIcon(QtGui.QIcon('D:\moham.jpg'))” . ya saya hanya menambahkan code itu saja di program yang kedua ini.. nah langsung saya jelaskan saja ya program yang kedua ini.
jadi gini.. sebenarnya penjelasannya sama saja seperti pada program yang pertama tadi. Sehingga saya hanya akan menjelaskan tambahannya saja ya... supaya lebih efisien dan lebih menghemat ruang tentunya.. oke.. langsung saja ya..

window.setWindowIcon(QtGui.QIcon('D:\moham.jpg')) //seperti yang sudah saya katakan diatas, code ini saya gunakan untuk menampilkan atau mengubah ikon jendela yang sudah kita buat tadi. Nah untuk mengubahnya, kalian harus mengubah teks berwarna merah tersebut menjadi lokasi direktori file jpg kalian. Nah, kebetulan, saya menggunakan foto yang saya simpan di Drive D saya. Agar tidak rumit tentunya. Silahkan ubah sesuai tempat dimana foto yang akan kalian jadikan sebagai icon jendela kalian ya.. oya perlu Anda perhatikan, jika PySide ini hanya akan menerima file JPG. Karena saya sudah menggunakan file dengan ekstensi ICO dan PNG namun keduanya tidak ditampilkan setelah saya jalan kan programnya.


Nah itu dia penjelasan mengenai tambahan code tadi. Semoga bisa kalian pahami dengan mudah ya teman – teman... kemudian, kalian bisa lihat hasil program yang sudah saya ganti iconnya di bawah ini ya...



Nah itu dia hasil dari program dan ikon saya ketika saya jalankan.. lalu bagaimana dengan program kalian ? semoga sukses ya.. hehe

Membangun GUI dengan PySide memang cukup susah.. apalagi kita membangunnya langsung menggunakan program... namun dengan kerja keras kalian bisa melakukannya... amin... semoga postingan ini dapat bermanfaat bagi kalian yang sedang belajar ya... dan semoga penjelasan saya di atas dapat mudah dicerna oleh siapa saja yang membacanya...

namun, apabila Anda memiliki pertanyaan, atau ada penjelasan yang kurang jelas kalian bisa berkomentar di bawah postingan ini ya... kurang lebihnya saya mohon maaf dan mohon dimaklumi ya.. karena saya juga masih belajar.. dan terimakasih sudah membaca postingan saya... jangan lupa di share ke teman sosial media kalian ya.... siapa tau ada yang membutuhkannya... sekali terimakasih sudah berkunjung...

Wassalamualaikum wr. wb.
Previous
Next Post »
Thanks for your comment