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.

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

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

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

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:

   

menjadi sederhana begini:

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.

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

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.

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.

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.

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.

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

8. 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.

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.

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!

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!

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.