Membuat aplikasi sederhana dengan Qt Designer

Aplikasi-aplikasi diubuntu: • Aplikasi Grafis •
Aplikasi Internet •
Aplikasi Office •
Aplikasi Sound & Video •
Aplikasi Programming
User avatar
freeazy
Posts: 1329
Joined: 04 Jan 2010, 00:13
Location: Makassar
Contact:

Membuat aplikasi sederhana dengan Qt Designer

Postby freeazy » 09 Jan 2011, 18:30

Setelah berkunjung ke beberapa blog2 yang membahas Linux dan open source akhirnya saya menemukan sebuah artikel menarik, yaitu bagaimana membuat sebuah aplikasi sederhana dengan menggunakan Qt Designer. Setalah menginstall program yang diperlukan dan mempelajarinya, ternyata cara membuatnya cukup mudah. Gambar diatas adalah contoh sebuah aplikasi kalkulator yang saya buat. Tanpa basa basi lagi, langsung saja kita mulai...



Langkah1: Install Qt
sudo apt-get install qtcreator
Selain menginstall dari cara diatas, Anda bisa juga menginstallnya dari Ubuntu Software Center.

Jika sudah menginstall Qt Creator, jalankan dari Application > Programming > Qt Creator



Langkah2: Buat Project baru
Saat jendela utama terbuka, klik pada Create Project


Pilih Qt4 Gui Application, Kemudian klik OK.


Selanjutnya isi Name dengan nama project yang akan anda buat, Create in adalah lokasi dimana anda menyimpan project anda. Pada contoh ini saya membuat project dengan nama Test, maka lokasi project saja adalah /home/ivan/Test


Klik Next saja,





Sampailah pada halaman utama editor, dobel-klik pada mainwindow.ui yang berada pada panel kiri (Project) untuk menampilkan menu Designer.



Langkah3: Mendesain Tampilan
Setelah project telah dibuat, sekarang saatnya mendesain tampilan dari kalkulator yang akan kita buat.


Tambahkan komponen2 yang diperlukan, cukup drag 'n drop komponen (yang berada di panel kiri) tersebut masuk ke form:
2 buah Spin Boxes
2 buah Labels,
Sebuah Push Button

Hasilnya:



Ubah nama komponen tersebut sesuai dengan fungsinya, untuk mengubahnya cukup dengan dobel-klik pada komponen yang akan diedit namanya.

Hasilnya:



Kemudian ubah nama Object pada tiap2 komponen (letaknya pada panel kanan), beri nama yang berbeda dan jelas karena akan digunakan dalam kode.




Langkah4: Berikan kode
Inilah langkah paling penting, yaitu menuliskan kode pada komponen agar komponen yang dijalankan bisa berfungsi sesuai dengan keinginan kita.

Kita akan membuat komponen Push Button (saya namai dengan samadengan) melakukan perhitungan dari "box1 + box2". Klik-kanan pada komponen Push Button, kemudian pilih go to slot lalu clicked().



Setelah itu akan masuk ke mainwindow.cpp dibagian MainWindow::on_samadengan_clicked().




Copy dan paste kode berikut ini diantara fungsi tersebut:

qint8 result= ui->box1->value() + ui->box2->value();
QString resultString=QString::number(result);
ui->hasil->setText(resultString);

Hasilnya:



Save (Ctrl + S) kemudian Run (Ctrl + R).




Selesai, selamat berkreasi dengan Qt Creator.

Referensi:

Tutorial
Quick Start
Qt Basics
User avatar
lisnux
Posts: 1763
Joined: 02 Jan 2010, 16:26
Location: Samarinda
Contact:

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby lisnux » 09 Jan 2011, 20:18

wow keren .... :D
mungkin bisa dimasukkan/ditulis juga ke mediawiki ubuntu-indonesia
User avatar
ninja
Posts: 2260
Joined: 27 Jan 2010, 16:23
Location: Tangerang, Banten, indonesia
Contact:

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby ninja » 09 Jan 2011, 20:22

woooggghhh :matabelo
keren bro, btw qt itu pake bahasa apa yah?
User avatar
BudaSuyasa
Posts: 246
Joined: 22 Nov 2010, 22:04
Location: Denpasar, Indonesia
Contact:

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby BudaSuyasa » 09 Jan 2011, 20:36

keren bang...
klo bisa kasih tau dongk alamat tutor lengkapnya...
pengen belajar nih bang....

oh ya, itu bahasanya c ya bang? saya mau belajar c++ bisa ga pake itu?
User avatar
Soekarmana
Posts: 466
Joined: 23 May 2010, 22:34
Location: Denpasar
Contact:

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby Soekarmana » 09 Jan 2011, 23:30

BudaSuyasa wrote:keren bang...
klo bisa kasih tau dongk alamat tutor lengkapnya...
pengen belajar nih bang....

oh ya, itu bahasanya c ya bang? saya mau belajar c++ bisa ga pake itu?


itu c++ da :D
install aja Qt Designer dari repo...
udah ada langsug tutor + contoh2 aplikasinya
User avatar
freeazy
Posts: 1329
Joined: 04 Jan 2010, 00:13
Location: Makassar
Contact:

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby freeazy » 10 Jan 2011, 11:49

lisnux wrote:wow keren .... :D
mungkin bisa dimasukkan/ditulis juga ke mediawiki ubuntu-indonesia

boleh juga tuh, tapi contoh2 aplikasi masih sedikit :)
User avatar
BudaSuyasa
Posts: 246
Joined: 22 Nov 2010, 22:04
Location: Denpasar, Indonesia
Contact:

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby BudaSuyasa » 10 Jan 2011, 14:54

Soekarmana wrote:
BudaSuyasa wrote:keren bang...
klo bisa kasih tau dongk alamat tutor lengkapnya...
pengen belajar nih bang....

oh ya, itu bahasanya c ya bang? saya mau belajar c++ bisa ga pake itu?


itu c++ da :D
install aja Qt Designer dari repo...
udah ada langsug tutor + contoh2 aplikasinya


okeh, saya install aja langsung bang...
thanks buat infonya...
User avatar
aptfast
Posts: 3847
Joined: 03 Jan 2010, 23:38
Location: Jakarta, Indonesia
Contact:

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby aptfast » 10 Jan 2011, 16:30

nice share gan....
mantap abis :D
User avatar
pingsut
Posts: 754
Joined: 16 May 2010, 18:05
Location: Yogyakarta
Contact:

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby pingsut » 10 Jan 2011, 18:57

nice tutorial.... :D
agak mirip glade gan....
User avatar
freeazy
Posts: 1329
Joined: 04 Jan 2010, 00:13
Location: Makassar
Contact:

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby freeazy » 20 Jan 2011, 22:14

Ayoo... semangat !


Qt apps on Ubuntu
User avatar
saa7_go
Posts: 464
Joined: 21 Jan 2011, 23:37
Contact:

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby saa7_go » 07 Feb 2011, 01:51

ada tutorial yang lainnya bung freeazy? saya lagi belajar Qt juga nih, masih pemula.

Gimana kalo bikin projek kecil2an? Sekalian untuk mengasah skill pemrograman kita(warga FUI).
User avatar
freeazy
Posts: 1329
Joined: 04 Jan 2010, 00:13
Location: Makassar
Contact:

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby freeazy » 07 Feb 2011, 18:05

saa7_go wrote:ada tutorial yang lainnya bung freeazy? saya lagi belajar Qt juga nih, masih pemula.

Gimana kalo bikin projek kecil2an? Sekalian untuk mengasah skill pemrograman kita(warga FUI).


ada sih, tapi dari sitenya langsung, disitu juga ada membuat game sederhana.

http://doc.qt.nokia.com/4.7/tutorials.html
User avatar
BudaSuyasa
Posts: 246
Joined: 22 Nov 2010, 22:04
Location: Denpasar, Indonesia
Contact:

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby BudaSuyasa » 07 Feb 2011, 20:54

ayo para master, share ilmunya lagi. Klo bisa tolong ditulis dalam ebook dungk. Biar gampang dipelajari.


thanks
User avatar
saa7_go
Posts: 464
Joined: 21 Jan 2011, 23:37
Contact:

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby saa7_go » 11 Feb 2011, 19:14

Pertanyaan buat bro freeazy, sepertinya tampilan antara gambar pertama dengan gambar hasil akhir kok beda?

Kemudian, jika saya input box1 dan box2 dengan nilai 90 maka hasilnya -76, seharusnya kan 180.
setelah saya lihat kode-nya, 'bug'nya ada di baris ini:

Code: Select all

qint8 result= ui->box1->value() + ui->box2->value();

Di dokumentasi Qt, qint8 itu sama dengan signed char, jangkauannya dari -128 hingga 127.
Jadi, sebaiknya kode di atas diganti dengan

Code: Select all

int result = ui->box1->value() + ui->box2->value();

karena QSpinBox::value() mengembalikan tipe data int.

Jika ada kesalahan mohon dikoreksi, karena saya masih belajar.
User avatar
freeazy
Posts: 1329
Joined: 04 Jan 2010, 00:13
Location: Makassar
Contact:

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby freeazy » 12 Feb 2011, 11:22

saa7_go wrote:Pertanyaan buat bro freeazy, sepertinya tampilan antara gambar pertama dengan gambar hasil akhir kok beda?

Kemudian, jika saya input box1 dan box2 dengan nilai 90 maka hasilnya -76, seharusnya kan 180.
setelah saya lihat kode-nya, 'bug'nya ada di baris ini:

Code: Select all

qint8 result= ui->box1->value() + ui->box2->value();

Di dokumentasi Qt, qint8 itu sama dengan signed char, jangkauannya dari -128 hingga 127.
Jadi, sebaiknya kode di atas diganti dengan

Code: Select all

int result = ui->box1->value() + ui->box2->value();

karena QSpinBox::value() mengembalikan tipe data int.

Jika ada kesalahan mohon dikoreksi, karena saya masih belajar.


ya, gambar pertama dan hasil memang beda.

gambar pertama itu yang sudah sy modifikasi, masukkan ikon, dll. Sedangkan gambar hasil itu gambar yang sesuai dengan yg dari tutorial. :)
User avatar
freeazy
Posts: 1329
Joined: 04 Jan 2010, 00:13
Location: Makassar
Contact:

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby freeazy » 12 Feb 2011, 11:40

thanks, sudah dikoreksi...

yg ada digambar pertama bisa didownload di:

https://dl.dropbox.com/s/i1plo4ax1e5duv ... ar.gz?dl=1
User avatar
ilham2930
Posts: 1123
Joined: 02 Jan 2010, 19:30
Location: /indonesia/tangerang/bonank_city
Contact:

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby ilham2930 » 12 Feb 2011, 12:00

boleh jg tuh
User avatar
piknik
Posts: 45
Joined: 17 Jul 2011, 13:30
Location: cirebon
Contact:

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby piknik » 24 Jul 2011, 01:52

waaa kereeeen!!!
User avatar
offline
Posts: 2672
Joined: 17 Feb 2010, 21:03
Location: Kebumen

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby offline » 24 Jul 2011, 05:16

weh om Freeazy, mainannya ngeri :grin:
jadi pengin belajar Qt neh, makasih tutorialnya yah :)
User avatar
sinta92
Posts: 3
Joined: 25 Aug 2011, 21:08
Location: Indonesia

Re: Membuat aplikasi sederhana dengan Qt Designer

Postby sinta92 » 25 Aug 2011, 21:15

kalo buat kalkulator dengan angka2 yg di klik (tool button), gimana ya cara nampilin angkanya di display nya?
boleh minta tutorial coding go to slot nya ?
trus di main.cpp sm di headernya ditambahin apa?

baru belajar nih... dapet tugas @.@

thx~

Return to “Aplikasi Ubuntu”

Who is online

Users browsing this forum: No registered users and 5 guests