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
Posts: 1329
Joined: 04 Jan 2010, 00:13
Location: Makassar
Contact:

Membuat aplikasi sederhana dengan Qt Designer

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Post by ilham2930 » 12 Feb 2011, 12:00

boleh jg tuh


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

Post by piknik » 24 Jul 2011, 01:52

waaa kereeeen!!!


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

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

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


User avatar
sipelaut
Posts: 1965
Joined: 03 Jan 2010, 17:25
Location: madura-sampang
Contact:

Post by sipelaut » 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
Posts: 44
Joined: 20 Aug 2011, 07:55
Location: ada didunia pokokx
Contact:

Post by WhatEver » 25 Aug 2011, 23:36

Waaaah..tampilannya kaya Netbeans ya??

apakah Netbeans versi linux adalah QtCreator ini??

cool man..


User avatar
sinta92
Posts: 3
Joined: 25 Aug 2011, 21:08
Location: Indonesia

Post by sinta92 » 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
Posts: 464
Joined: 21 Jan 2011, 23:37
Contact:

Post by saa7_go » 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
Posts: 3847
Joined: 03 Jan 2010, 23:38
Location: Jakarta, Indonesia
Contact:

Post by aptfast » 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
Posts: 3
Joined: 25 Aug 2011, 21:08
Location: Indonesia

Post by sinta92 » 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
Posts: 168
Joined: 03 Mar 2011, 11:20
Location: surabaya,indonesia

Post by SinauUbuntu » 11 Dec 2011, 12:56

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


User avatar
Ganda
Posts: 7
Joined: 13 May 2010, 02:26
Location: surabaya,indonesia

Post by Ganda » 30 May 2012, 16:05

greattt!!

cara installnya gmn ya kalo saya pake LucydLynx??

thx b4


User avatar
aRimiKa
Posts: 2
Joined: 03 Jun 2012, 16:26
Location: denpasar,Bali
Contact:

Post by aRimiKa » 03 Jun 2012, 16:55

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

:) :)


User avatar
aRimiKa
Posts: 2
Joined: 03 Jun 2012, 16:26
Location: denpasar,Bali
Contact:

Post by aRimiKa » 03 Jun 2012, 16:58

Pencerahan ada di SINI :grin: :grin:


User avatar
AzrulHaifan
Posts: 97
Joined: 24 May 2013, 06:35
Location: Gresik, Indonesia
Contact:

Post by AzrulHaifan » 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
Posts: 1
Joined: 30 May 2014, 09:20
Location: Solo
Contact:

Post by PanduAji » 30 May 2014, 09:23

pengen sekali pintar buat aplikasi tapi kok rumit juga ya

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


User avatar
AzrulHaifan
Posts: 97
Joined: 24 May 2013, 06:35
Location: Gresik, Indonesia
Contact:

Post by AzrulHaifan » 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:


User avatar
AzrulHaifan
Posts: 97
Joined: 24 May 2013, 06:35
Location: Gresik, Indonesia
Contact:

Post by AzrulHaifan » 01 Jun 2014, 01:05

up


Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests