Qt Creator – Pemrograman Aplikasi GUI di Linux


Bismillahirrahmanirrahim.

Tulisan ini tidak lain ingin memaparkan bagaimana membuat aplikasi GUI dasar dengan mudah menggunakan Qt Creator. Aplikasinya sederhana, hanya menunjukkan fungsi dasar tombol dan label (untuk gambar). Jika tombol pertama diklik, maka gambar A muncul. Jika tombol kedua diklik, maka gambar B muncul. Hanya itu saja sudah cukup untuk memahami cara pakai 2 dasar terpenting memrogram dengan Qt Creator yakni signal dan slot. Tutorial ini dibuat di Linux dan aplikasinya untuk Linux.

SATU :: Menyiapkan Proyek

1. Buka Qt Creator dan buat proyek baru. Pilih Qt Widget Project > Qt GUI Application. Selalu pilih ini untuk proyek yang akan datang.qtproject

2. Beri nama Double karena kita hanya akan membuat program dengan 2 tombol. Selanjutnya Next.

qtproject2

3. Next terus sampai pada bagian Class Information, berikan nama Double pada Main Class maka semuanya akan mengikuti secara otomatis.

qtproject3

4. Finish, maka tampilan Qt Creator Anda akan seperti ini.

qtproject4

5. Perhatikan, dalam proyek ini Anda 5 berkas penting secara otomatis:

                        • Double.pro (berkas proyek Qt Creator yang bisa dipakai di OS mana pun)
                        • double.cpp (berkas kode inti tempat signal dan slot dituliskan)
                        • double.h (berkas header)
                        • double.ui (berkas GUI)
                        • main.cpp (berkas berisi fungsi yang selalu ada dalam semua program C/C++ yakni main())

Selalu seperti ini jika Anda membuat proyek GUI baru.

DUA :: Sedikit Pengaturan Qt Creator

Klik pada ikon Filter Tree > Simplify Tree. Maka kerumitan folder yang tadinya begini:

 qtproject5  qtproject7

menjadi sederhana begini:

qtproject6

TIGA :: Membuat Aplikasi

1. Buka double.ui ini adalah berkas XML yang mengatur GUI. Kalau diklik, maka GUI Builder milik Qt Creator akan langsung muncul. Di sini letak enaknya memrogram dengan Qt Creator. Bisa drag and drop dan jadi GUI langsung seperti di Microsoft Visual Basic. Cari elemen GUI bernama Push Button. Tempelkan dua biji. Di bawahnya, tempelkan Label. Jadinya seperti ini.

qtproject8

2. Buang teks asli dari Label sehingga kosong. Lalu ganti teks Push Button dengan SATU dan DUA. Lihat ini. Pastikan Label masih terpilih.

qtproject9

3. Berikan nama objek untuk Label ini pada Property Panel di samping kanan. Di situ, di bagian atas sendiri ada QObject, di bawahnya pas ada objectName. Pas di situ, ganti tulisan label dengan Gambar. Ingat-ingat nama objek ini.

qtproject10

4. Sekarang ganti juga nama objek dari tombol SATU dan DUA menjadi SATU dan DUA.

5. Sekarang klik kanan tombol SATU > Go To Slot. Di sinilah Anda akan berjumpa 2 inti Qt Creator, signal dan slot. Lihat jendela yang muncul. Yang ada di situ semuanya adalah signal. Apa itu signal? Anggap saja sekarang, signal = nama fungsi ketika terjadi sesuatu pada tombol SATU. Kebetulan yang harus kita pilih adalah signal bernama clicked(). Anda tidak usah perhatikan kolom sebelah kanan. Tekan OK saja.

qtproject11

5. Hasil dari signal terpilih adalah slot, yakni satu fungsi baru yang kosong pada berkas double.cpp. Perhatikan, Anda sedang menyunting double.cpp. Dan perhatikan pula, nama objek SATU menjadi nama fungsinya. Apa sih, yang sedang kita kerjakan ini? Intinya, kita membuat jalan (signal) bagi tombol SATU, agar jika diklik (clicked), dia mengganti isi (slot) dari objek Gambar. Anda hanya akan fokus pada fungsi kosong ini.

qtproject12

6. Karena akan butuh dua buah berkas gambar (JPG/PNG), maka kita impor gambar dulu sebelum menuliskan kodenya ke dalam slot void Double::on_SATU_Clicked() yang baru jadi. Ini caranya mengimpor gambar. Klik kanan proyek kita > Add New > Qt > Qt Resource File. Ini akan membuat sebuah berkas baru berformat .qrc dalam proyek kita. Beri nama citra (karena tadi sudah ada nama Gambar), dan alamat foldernya sudah biarkan saja default pada proyek kita.

qtproject13

qtproject14

7. Tampilan Qt Creator Anda akan seperti demikian. Ini sebenarnya Qt Creator sedang menyunting isi dari citra.qrc yang baru saja dibuat.

qtproject158. Klik Add > Add Prefix. Pasti hasilnya /new/prefix1. Sekarang Klik Add > Add Files. Pilih gambar apa saja dari sistem Anda. Kalau ada peringatan, oke-oke saja. Yang penting nanti harus ada 2 gambar seperti ini. Ingat nama berkas gambarnya.

qtproject16

9. Kembali ke double.cpp. Isikan kode C++ berikut pada slot yang sudah dibuat.

QImage bingkai;
bingkai.load(":/new/prefix/desktopfungsional-3a.jpg");
ui->Gambar->setPixmap(QPixmap::fromImage(bingkai));

PENTING! Ubah nama berkas gambar Anda sesuai berkasnya. Misalnya satu.png, maka ganti desktopfungsional-3a.jpg dengan satu.png. Saya hanya memberi contoh global.

10. Lakukan hal yang sama dari poin 5 agar tombol DUA juga memiliki fungsi untuk memanggil gambar pada Label. Pokoknya bedakan gambar untuk SATU dengan yang untuk DUA.

11. Jika sudah, maka keseluruhan kode double.cpp Anda akan menjadi seperti ini.

qtproject17

12. Sudah cukup. Sekarang klik tombol segitiga hijau (Run | Ctrl+R). Program Anda akan berjalan. Dia pasti bisa ganti gambar setiap klik tombol. Sampai sini, program Anda sudah berhasil. Selamat, aplikasi pertama Anda baru saja tercipta!

qtproject18

qtproject19

EMPAT :: Publikasi

Anda ingin agar aplikasi buatan Anda ini digunakan orang lain? Mudah. Lakukan saja Build maka sebuah eksekutabel (mirip EXE) akan tercipta dan ini bisa Anda jalankan di Linux lainnya. Klik saja tombol palu (Ctrl+B). Maka pada folder QtProject kita, akan muncul folder baru bernama Double-build-desktop-Qt_4_8_1_in_PATH__System__Release. Dalam Ubuntu saya, folder ini berada di /home/master/Publik/QtProject. Ya, berdampingan dengan folder Double dan bukan di dalam Double. Buka folder ini dan Anda pasti temukan satu berkas bernama Double. Coba jalankan. Pasti aplikasi Anda muncul. Pindahkan saja berkas Double ini ke Ubuntu teman Anda dan jalankan. Berkas lainnya abaikan saja. Selamat, Anda telah berhasil membuat aplikasi selayaknya aplikasi buatan para programer!

qtproject20

qtproject21

PERINGATAN

Saya menduga build yang dilakukan Qt Creator pada kondisi default-nya adalah dynamic linking yang artinya aplikasi buatan Anda ini tidak mandiri di komputer orang lain. Dia tidak bisa sendirian sebagaimana EXE di Windows sehingga butuh suatu pustaka tambahan yang mesti diinstal duluan di komputer lain sebelum dia dijalankan. Pustaka itu adalah Qt. Ini sebabnya aplikasi buatan kita ini bisa berjalan mulus di sesama Ubuntu (karena Ubuntu prainstal sudah ada Qt-nya). Lakukan perintah ldd Double untuk mengetahui apa saja pustaka yang diperlukan oleh aplikasi Anda ini. Puaskan rasa ingin tahu Anda.

Penutup

Saya butuh fokus. Ketika menulis ini, sungguh rasanya saya bebas dari distraksi yang lama mengekang saya untuk menulis soal Qt. Alhamdulillah. Saya harap ini cocok untuk membuka pintu Anda memrogram Qt atau membuat aplikasi GUI di Linux. Semoga ini bermanfaat.

31 thoughts on “Qt Creator – Pemrograman Aplikasi GUI di Linux

  1. arhsa

    السلام عليكم ورحمة الله وبركاته
    Mantap.

    Sebelum melirik Netbeans, sebetulnya saya sudah menginstal QTCreator ini setahun yang lalu di Babily Badr. Saya terkesan dengan QT, terutama KDE dan aplikasi lain yang dibuat dengan QT. Tapi, karena tidak faham dari mana memulai dan tidak faham pemrograman, maka saya cuma belajar membuat GUI saja (nempel-nempel button dll.) tanpa fungsi. Mengikuti video tutorial dari Youtube.

    Akhirnya, mencoba Netbeans dan ternyata lebih mudah. Jika tutorial ini dilanjut sampai menghasilkan otodidak tentu akan lebih bermanfaat. Semoga.

    Balas
    1. Ade Malsasa Akbar Penulis Tulisan

      Wa’alaikumussalam warahmatullahi wabarakatuh.

      Iya, Akhii. Memang Netbeans sangat enak dipakai membuat aplikasi. Dan JAR sangat portabel. Kekurangannya di sisi ana adalah berat. Nah, kekurangan si Qt ini adalah ana belum bisa membuatnya statically linked.

      Iya, Akhii. Ini memang langkah menuju Otodidak dalam Qt. Terima kasih banyak. Akan tetapi, ana belum tentu sanggup menyelesaikan semuanya.

      Jazakumullahu khairan.

      Balas
    1. Ade Malsasa Akbar Penulis Tulisan

      Tidak mengapa, Kang. Ada kemungkinan akang tidak cocok dengan Qt Framework beserta IDE-nya. Mungkin akang lebih pas dengan Python+Glade atau yang lain.

      Memang harus sabar untuk belajar.

      Balas
    1. Ade Malsasa Akbar Penulis Tulisan

      Iya, Kang. Bukan hanya asyik, akan tetapi ternyata sangat bermanfaat. Sekadar informasi, di luar negeri ketika saya bertanya mengenai Java SWING, ada orang mengatakan bahwa yang dihasilkan oleh Matisse hanya sampah. Ternyata tidak demikian realitas yang saya temukan. Alhamdulillah.

      Balas
    1. Ade Malsasa Akbar Penulis Tulisan

      Kalau kopi past begitu saja, saya tidak mengizinkannya. Kalau ditulis ulang dalam bahasa akang sendiri, dan skinsot semuanya milik akang sendiri, maka saya izinkan. Saya membuat ini dengan tujuan Anda sekalian menjadi kreatif, bukan hanya ambil dai posting saya.

      Terima kasih banyak.

      Balas
    1. Ade Malsasa Akbar Penulis Tulisan

      Bisa akang sebutkan bagian mananya yang error? Saya menulis ini berdasarkan program yang saya buat dan saya jalankan dari Qt Creator. Ini tutorial on the fly, Kang. Harusnya bisa.

      Balas
    1. Ade Malsasa Akbar Penulis Tulisan

      Tulisan ini dibuat khusus untuk newbie karena saya sendiri baru bisa menggunakan Qt Creator dan saya mencoba susunkan yang paling mudah.

      Kalau masih susah, tugas saya adalah membuatnya lebih mudah lagi.

      Balas
  2. Ping balik: Pemrograman Qt 16 – QGraphicsScene dan QGraphicsView untuk Menayangkan Gambar | Ade Malsasa Akbar

  3. Ping balik: Pemrograman Qt 17 – Pan, Scroll, Zoom, Flip, dan Rotate untuk QGraphicsView | Ade Malsasa Akbar

  4. Ping balik: KNotes Ingat Aku Per 17 Maret 2015 | RESTAVA

Dilarang menggunakan emotikon

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s