Cara membuat fungsi Drag and Drop pada window GUI python menggunakan PySide

Belajarpython – assalamualaikum wr. wb.

Jumpa lagi nih temen – temen.. pada postingan kal ini saya akan memberikan sebuah fungsi drag and drop yang akan kita buat di dalam sebuah Window GUI python yang akan saya buat menggunakan library PySide. Nah bagi kalian yang belum menginstall Library PySide, kalian bisa membaca postingan yang sudah saya posting sebelumnya… yaitu sebuah postingan yang membahas bagai mana cara menginstall PySide dengan sangat mudah. Nah untuk lebih mudahnya kalian bisa KLIK DISINI untuk membaca tutorialnya. Silahkan ikuti tutorialnya dan install PySide di dalam PC kalian. Agar bisa langsung memperaktekkan code program untuk membuat sebuah fungsi drag and drop pada postingan saya kali ini.

Nah setelah kalian install PySide nya, yuk langsung saja kita bahas code program yang berfungsi untuk membuat fitur drag and drop ketika programnya kita jalankan nantinya. Seperti apa sih program nya ? dan seperti apakah cara membuat nya ? apakah code programnya panjang dan susah untuk di pahami ? tentu saja saya tidak bisa menjawab pertanyaan – pertanyaan tersebut.. karena yang dapat menjawab pertanyaan tersebut hanyalah diri kalian sendiri.. oleh karena itu, yuk langsung saja kita simak program yang akan saya bagikan ini… lihat programnya di bawah ini ya temen – temen…

Apa yang di maksud dengan Drag and Drop ?

Nah sebelum saya melangkah ke proses pembagian source code atau code program nya, saya akan membahas apa sih yang dimaksud dengan Drag and Drop ini… karena saya takut ada pembaca yang masih bingung mengenai drag and drop itu sendiri… sehingga dengan penjelasan ini saya harap kalian bisa lebih paham dan lebih mengerti mengenai  apa yang akan saya bahas pada postingan kali ini.. sehingga manfaatnya akan lebih maksimal tentunya…

Yang pertama saya akan menjelaskan mengenai apa yang dimaksud dengan Drag. Jadi drag adalah proses dimana kita mengklik suatu objek di dalam computer. Berbeda dengan double klik biasa, drag ini merupakan proses klik dua kali kemudian menahannya. Jadi tidak hanya mengklik 2 kali saja. Melainkan di tekan terus atau di tahan pada klik yang kedua. Jadi berbeda ya antara double klik dengan drag.

Dan yang kedua saya akan menjelaskan mengenai apa yang dimaksud dengan drop. Jadi drop adalah proses dimana sebuah objek di seret atau di pindahkan tempatnya.  Jadi setelah proses pemindahan ini sangat berkaitan erat dengan proses drag. Karena untuk melakukan drop ini kita harus men drag nya terlebih dahulu ya temen – temen…

Nah udah taukan masing – masih kata dari drag and drop ini ? jadi karena keduanya saling berkaitan satu sama lain, maka penyebutan keduanya sering disebut sebagai drag and drop. Nah udah paham kan temen – temen ? ya semoga saja kalian bisa memahami penjelasan saya di atas.

Cara membuat fungsi Drag and Drop pada window GUI python menggunakan library PySide.

Nah setelah kita membahas mengenai arti kata dari drag and drop, maka selanjutnya saya akan mencoba untuk masuk ke inti pada postingan saya kali ini. Yaitu menambahkan fitur atau membuat fungsi drag and drop pada sebuah window GUI python dengan menggunakan library PySide. Nah sudah penasaran belum dengan program yang akan saya bagikan ini ? lalu sepanjang apa sih program nya ? dan susah nggak ya untuk di pahami ? nah untuk menjawab pertanyaan – pertanyaan tadi, yuk langsung saja kita simak source code atau code program untuk membuat fungsi drag and drop  nya di bawah ini ya…

import sys
from PySide.QtGui import *
from PySide.QtCore import *

class dragAndDrop(QWidget):
    def __init__(self):
        QWidget.__init__(self)

        self.buatDuaKolom()
        self.daftarElemen()
        
        self.setWindowTitle('Contoh Drag and Drop')
        self.setLayout(self.myLayout)
        self.show()
        
    def daftarElemen (self) :
        data1 = QListWidgetItem(QIcon('awan.png'),"Awan")
        data2 = QListWidgetItem(QIcon('awanGelap.png'),"Awan Gelap")
        data3 = QListWidgetItem(QIcon('sun.png'),"Matahari")
        data4 = QListWidgetItem(QIcon('moham.jpg'),"ikon")
        data5 = QListWidgetItem(QIcon('exit.jpg'),"Exit")
        
        self.myListWidget1.insertItem(1,data1)
        self.myListWidget1.insertItem(2,data2)
        self.myListWidget1.insertItem(3,data3)
        self.myListWidget1.insertItem(4,data4)
        self.myListWidget1.insertItem(5,data5)
        
    def buatDuaKolom (self) :
        self.myListWidget1 = QListWidget()
        self.myListWidget2 = QListWidget()
        
        self.myListWidget2.setViewMode(QListWidget.IconMode)
        self.myListWidget1.setAcceptDrops(True)
        self.myListWidget1.setDragEnabled(True)
        self.myListWidget2.setAcceptDrops(True)
        self.myListWidget2.setDragEnabled(True)
        
        self.setGeometry(300,350,500,150)
        self.myLayout= QHBoxLayout()
        
        self.myLayout.addWidget(self.myListWidget1)
        self.myLayout.addWidget(self.myListWidget2)
        
if __name__== '__main__':
    myApp = QApplication(sys.argv)
    myWidget = dragAndDrop()
    myApp.exec_()



nah itu dia temen code program nya.. gimana cukup panjang tidak ? hehe ya cukup panjang ya temen – temen..  tapi saya harap programnya dapat dengan mudah kalian pahami ya.. lalu seperti apakah screenshoot ketika program diatas kita jalankan nantinya ? nah tenang saja.. saya sudah menyiapkan screenshootnya kok.. yuk langsung saja kita simak screenshoot GUI hasil dari program diatas… screenshoot ada di bawah sini temen – temen.. hehe


Nah itu dia temen – temen contoh screenshoot hasil dari program di atas ketika saya jalankan… nah bisa dilihat pada screenshoot diatas.. ada yang ada gambarnya dan ada yang hanya tulisan… jadi gini nih… yang ada gambar nya itu, merupakan gambar yang memang bener – bener ada di computer kita.. dan yang hanya tulisan itu, artinya gambar yang kita tambarkan tersebut tidak ada di computer kita.. jadi hanya akan tampil tulisan saja…

dan perlu kalian ketahui lagi, kotak yang ada di sebelah kiri tersebut merupakan kotak di mana data atau elemen yang kita tambahkan pada program tadi akan di tampilkan semuanya… dan pad kota kanan tersebut sebenarnya kosong saat pertama kali kita jalankan.. namun saya telah men drag and drop gambar dan teks yang ada di kotak sebelah kiri menuju kotak yang ada di sebelah kanan.. jadi tulisan dan kotak nya akan pindah deh.. eh gak pindah sih.. Karena elemen pada kotak yang sebelah kiri tidak akan berkurang.. jadi lebih cocok jika kita katakana hanya untuk menambahkan saja ya…

Penjelasan program untuk membuat fungsi Drag and Drop pada window GUI python menggunakan library PySide.

Nah setelah saya membuat dan membagikan program untuk membuat fungsi Drag and Drop pada window GUI python menggunakan library PySide ini, saya akan mencoba untuk mencoba untuk menjelaskan program yang telah saya bagikan tersebut… dengan harapan dapat membuat kalian bisa lebih paham dengan program yang saya bagikan tadi… nah seperti apakah penjelasan saya tentang program diatas ? yuk langsung saja kita simak penjelasan saya tentang program fungsi drag and drop di bawah ini..


import sys  //code ini digunakan untuk  mengimpor sys
from PySide.QtGui import *    //code ini digunakan untuk  mengimpor semua elemen QtGui dari PySide.
from PySide.QtCore import *   //code ini digunakan untuk  mengimpor semua elemen QtCore dari PySide.

class dragAndDrop(QWidget):  //code ini merupakan pembuatan class dengan nama “dragAndDrop” yang akan menampung semua elemen GUI yang akan kita tampilkan nantinya.
    def __init__(self):  //ini merupakan sebuah metode yang akan di jalankan secara otomatis ketika kita memanggil class dragAndDrop.
        QWidget.__init__(self)  //ini merupkan pemanggilan semua elemen di dalam “QWidget”.
        self.buatDuaKolom()  //ini merupakan pemanggilan metode “buatDuaKolom” yang ada di class ini. Jadi menggunakan fungsi self.
        self.daftarElemen()  //ini merupakan pemanggilan metode “daftarElemen” yang ada di class ini. Jadi menggunakan fungsi self.

        self.setWindowTitle('Contoh Drag and Drop') //code ini digunakan untuk mengubah judul window kita menjadi “contoh Drag and Drop”. Tentu kalian dapat mengubahnya sesuka kalian.
        self.setLayout(self.myLayout) //cod ini ciguununakan untuk mengatur layout window kita menjadi QHBox layout. Penndefinisian “mylayout” ada di dalam metode “buatDuaKolom”
        self.show()  //ini digunakan untuk menampilkan window yang sudah kita buat tadi.

    def daftarElemen (self) :  //ini merupakan pembuatan metode dengan nama “daftarElemen” yang akan menampung semua elemen yang akan kita tambahkan pada kolom kiri tadi.
        data1 = QListWidgetItem(QIcon('awan.png'),"Awan")  //code ini digunakan untuk menambahkan sebuah data atau elemen. Dengan rincian, yang berwrna merah adalah nama file JPG nya dan yang kuning adalah nama yang akan ditampilkan di bawah gambar nantinya. Silahkan ubah nama dan file jpgnya sesuai file yang ada di computer kalian. Usahakan letakkan gambarnya satu folder dengan lokasi pnyimpanan file dari code ini ya… atau taruk di D: dan jangan letakkan didalam folder.
        data2 = QListWidgetItem(QIcon('awanGelap.png'),"Awan Gelap")
        data3 = QListWidgetItem(QIcon('sun.png'),"Matahari")
        data4 = QListWidgetItem(QIcon('moham.jpg'),"ikon")
        data5 = QListWidgetItem(QIcon('exit.jpg'),"Exit")

        self.myListWidget1.insertItem(1,data1) //code ini digunakan untuk memasukkan foto dan namanya tadi yang sudah di simpan dalam variabel data1, data2 dan seterusnya kedalam kotak yang ada di sebelah kiri. Dengan rincian, angka 1 yang menunjukkan urutan dan “data 1” menunjukkan data atau elemen apa yang akan kalian masukkan.
        self.myListWidget1.insertItem(2,data2)
        self.myListWidget1.insertItem(3,data3)
        self.myListWidget1.insertItem(4,data4)
        self.myListWidget1.insertItem(5,data5)

    def buatDuaKolom (self) :
        self.myListWidget1 = QListWidget()  //ini merupakan code untuk membuat kolom kiri yang disimpan dalam variabel “myListWidget1”.
        self.myListWidget2 = QListWidget()  //ini merupakan code untuk membuat kolom sebelah kanan yang disimpan dalam variabel “myListWidget2”.

        self.myListWidget2.setViewMode(QListWidget.IconMode)  //ini digunakan untuk mengatur tampilan kolom sebelah kanan yang disimpan dalam variabel “myListWidget2” menjadi sebuah ikon.
        self.myListWidget1.setAcceptDrops(True) //code ini digunaan untuk menerima fungsi drop pada kolom kiri atau myListWidget 1.
        self.myListWidget1.setDragEnabled(True) //code ini digunaan untuk menerima fungsi drag pada kolom kiri atau myListWidget 1.
        self.myListWidget2.setAcceptDrops(True) //code ini digunaan untuk menerima fungsi drop pada kolom kanan atau myListWidget 2.
        self.myListWidget2.setDragEnabled(True) //code ini digunaan untuk menerima fungsi drag pada kolom kanan atau myListWidget 2.

        self.setGeometry(300,350,500,150) //code ini digunakan untuk mengatur ukuran window yang akan kita tampilkan nantinya.
        self.myLayout= QHBoxLayout() //ini merupakan pendefinisian variabel “myLayout” yang kita isi dengan sebuah layout bernama “QHBoxLayout”.

        self.myLayout.addWidget(self.myListWidget1) //ini digunakan untuk memasang kolom sebelah kiri atau “myListWidget1” ke dalam window.
        self.myLayout.addWidget(self.myListWidget2) //ini digunakan untuk memasang kolom sebelah kanan atau “myListWidget2” ke dalam window.

if __name__== '__main__':  //code ini digunakan untuk memastikan apakah file ini dieksekusi atau tidak.
    myApp = QApplication(sys.argv) //code ini merupakan code program yang wajib ada dalam proses pembuatan GUI window menggunakan library PySide.
    myWidget = dragAndDrop()  //code ini digunakan untuk memanggil class “dragAndDrop” yang telah kita isi sebagai elemen atau code program yang akan kita isi dalam window nanti.

    myApp.exec_()//code ini merupakan code program yang wajib ada dalam proses pembuatan GUI window menggunakan library PySide.


Nah itu dia penjelasan saya temen – temen.. semoga penjelasan diatas dapat membuat kalian lebih paham ya temen – temen.. jika ada yang ingin di tanyakan,  kalian bisa langsung menanyakannya di bawah postingan ini ya temen – temen.. yaitu pada kolom komentar yang telah saya sediakan.. dan juga bisa menghubungi saya melalui laman kontak form yang telah saya sediakan di blog saya ini.. kalian bisa mencarinya di footer blog ini yang tentu bera di paling bawah halaman…

Sekian dulu ya temen – temen pada postingan saya yang satu ini.. jangan lupa di bagikan ya temen – temen.. kalian bisa mempostingnya di akun media social kalian ya.. hal tersebut akan saya anggap sebagai support atau dukungan kalian terhadap saya untuk tetap berkarya dan tetap menulis postingan saya yang selanjutnya… oke .. terimaksih sudah berkunjung di  blog saya… dan terimakasih sudah membaca postingan saya yang satu ini.. dan jangan lupa membaca postingan saya yang lainnya ya… dan ucapan terimakasih yang paling besar saya sampaikan bagi kalian yang sudah share postingan saya.. dan terimakasih supportnya.. sekian ya..

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