Membuat aplikasi sederhana dengan Qt Designer

Aplikasi-aplikasi diubuntu: • Aplikasi Grafis •
Aplikasi Internet •
Aplikasi Office •
Aplikasi Sound & Video •
Aplikasi Programming
Post Reply
User avatar
freeazy
Contact:

Membuat aplikasi sederhana dengan Qt Designer

Post 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
Contact:

Post 09 Jan 2011, 20:18

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


User avatar
ninja
Contact:

Post 09 Jan 2011, 20:22

woooggghhh :matabelo
keren bro, btw qt itu pake bahasa apa yah?


User avatar
BudaSuyasa
Contact:

Post 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
Contact:

Post 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
Contact:

Post 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
Contact:

Post 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
Contact:

Post 10 Jan 2011, 16:30

nice share gan....
mantap abis :D


User avatar
pingsut
Contact:

Post 10 Jan 2011, 18:57

nice tutorial.... :D
agak mirip glade gan....


User avatar
saa7_go
Contact:

Post 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
Contact:

Post 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
Contact:

Post 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
Contact:

Post 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
Contact:

Post 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
Contact:

Post 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
offline

Post 24 Jul 2011, 05:16

weh om Freeazy, mainannya ngeri :grin:
jadi pengin belajar Qt neh, makasih tutorialnya yah :)


User avatar
sinta92

Post 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~


User avatar
sipelaut
Contact:

Post 25 Aug 2011, 21:27

wahh.. coba aja dikantorku pengadaan SIM pakek linux pasti asik..
sayang semuanya windows based.... hikss....
kapan yaa kira2 ditempat saya migrasi SIM nya ke linux based
gagaggggaaakk.....
::ngarep mode ON::


User avatar
WhatEver
Contact:

Post 25 Aug 2011, 23:36

Waaaah..tampilannya kaya Netbeans ya??

apakah Netbeans versi linux adalah QtCreator ini??

cool man..


User avatar
sinta92

Post 26 Aug 2011, 10:51

kalo mau buat dengan operasi pembagian, kan code nya seperti ini


void MainWindow::on_Hitung_clicked()
{
qint8 result= ui->spinBox->value() / ui->spinBox_2->value();
QString resultString=QString::number(result);
ui->Display->setText(resultString);
}

1. nah, waktu saya bagi 0 dengan 0, hasilnya windows has stop working..
2. waktu bagi 1 dengan 2, hasilnya 0.

gimana sih cara mengatasi yang pertama, terus biar float gimana ya

thx


User avatar
saa7_go
Contact:

Post 26 Aug 2011, 12:37

sinta92 wrote:kalo mau buat dengan operasi pembagian, kan code nya seperti ini


void MainWindow::on_Hitung_clicked()
{
qint8 result= ui->spinBox->value() / ui->spinBox_2->value();
QString resultString=QString::number(result);
ui->Display->setText(resultString);
}

1. nah, waktu saya bagi 0 dengan 0, hasilnya windows has stop working..
2. waktu bagi 1 dengan 2, hasilnya 0.

gimana sih cara mengatasi yang pertama, terus biar float gimana ya

thx
untuk yg pertama, kalo pembagian dengan 0 memang pasti error, biar ga error, buat aja kondisi untuk mengecek nilai pembagi. jika nilainya sama dengan 0, buat aja pesan error.

Code: Select all

if(ui->spinBox_2->value() == 0) {
 QMessageBox::critical(...);
 return;
}
untuk yang kedua, bisa menggunakan type casting.
misal aja tipe data dari variabel result diganti menjadi float atau double.

Code: Select all

double result = (double)ui->spinBox->value() / ui->spinBox_2->value();
Last edited by saa7_go on 27 Feb 2016, 16:19, edited 1 time in total.
Reason: tambah url dan koreksi nama fungsi


User avatar
aptfast
Contact:

Post 26 Aug 2011, 13:18

WhatEver wrote:Waaaah..tampilannya kaya Netbeans ya??

apakah Netbeans versi linux adalah QtCreator ini??

cool man..
bukan
netbeans utk linux ada sendiri
bisa di tarik dari repo Ubuntu


User avatar
sinta92

Post 06 Sep 2011, 21:42

hmm...
udah bisa..
thx~

apa ada tutorial tentang progress bar yah..
misalnya kalo kita ketik save, progress bar nya 100 prsen gt...


User avatar
SinauUbuntu

Post 11 Dec 2011, 12:56

Wow, Nice Share. :)
Coba ah...


User avatar
Ganda

Post 30 May 2012, 16:05

greattt!!

cara installnya gmn ya kalo saya pake LucydLynx??

thx b4


User avatar
aRimiKa
Contact:

Post 03 Jun 2012, 16:55

mantap bosss......
jd pengen bbelajar nihh.....
hahaha

:) :)


User avatar
AzrulHaifan
Contact:

Post 30 May 2014, 05:09

Thread lama nih.
AKang-akang yang tau pemrograman qt saya mau nanya.

Cara deploy aplikasi di qt gimana yah ?
saya udah cari banyak referensi dari youtube sampai semua web yang membahas qt tapi masih tidak faham. Niatnya saya mau deploy aplikasi dari qt itu untuk bisa dijalankan langsung di komputer yang fresh install. sudah saya build dengan release mode tapi tetap tidak bisa. menurut sumber katanya ada 2 tipe build di qt. Mungkin akang-akang disini yang sudah handal bisa memberi pencerahan. dimohan bantunaya :)


User avatar
PanduAji
Contact:

Post 30 May 2014, 09:23

pengen sekali pintar buat aplikasi tapi kok rumit juga ya

--------------
download game
cara memakai jilbab


User avatar
AzrulHaifan
Contact:

Post 30 May 2014, 19:45

PanduAji wrote:pengen sekali pintar buat aplikasi tapi kok rumit juga ya

--------------
download game
cara memakai jilbab
Sebenernya mudah kok, kalau ditekuni apapun jadi. :)
Bantu up thread ini yah :dislike:


Post Reply

Who is online

Users browsing this forum: No registered users and 72 guests