Arsip Tag: aplikasi

Daftar Aplikasi Linux Sehari-Hari


Bismillahirrahmanirrahim.

distributor-logo-ubuntu

Daftar aplikasi di Linux yang menjadi padanan untuk aplikasi Windows itu sangat penting. Ini dikarenakan banyaknya orang awam yang berminat menggunakan Linux. Jika Anda belum banyak mengetahui tentang Linux, maka tulisan ini untuk Anda. Saya bagi tulisan ini menjadi 2 bagian, yakni daftar aplikasi bawaan Ubuntu maupun tambahan. Aplikasi yang ditera di dalam tulisan ini adalah aplikasi asli di Linux, bukan aplikasi EXE yang dijalankan melalui Wine. Daftar ini walaupun asalnya ditulis berdasarkan Ubuntu, tetapi semua aplikasinya tersedia di seluruh distro Linux selain Ubuntu juga. Daftar ini sengaja dilengkapi dengan banyak skrinsot agar menarik dibaca. Semoga tulisan ini bermanfaat.

Daftar Isi

  • A. Aplikasi-Aplikasi Bawaan Ubuntu
  • B. Aplikasi-Aplikasi Tambahan Utama
  • Penutup
  • Referensi

Baca lebih lanjut

Iklan

Aplikasi Editor untuk LaTeX di Linux


Bismillahirrahmanirrahim.

texmaker1Ketertarikan saya kepada LaTeX bermula sejak pertama mengenal Linux yakni sejak melihat dokumen-dokumen PDF yang dihasilkan dengan LaTeX. Kesan kala itu hanya rapi, rapi, dan rapi. Ketertarikan kedua saya dimulai ketika melihat Texmaker pada komputer Windows. Texmaker sungguh editor yang sangat keren. Kemudian saya melihat salah satu laman Stackexchange yang mendiskusikan LaTeX Editor, dan gara-gara itu untuk pertama kalinya saya berani menggunakan LaTeX. Saat itu saya mencoba Gummi di Ubuntu. Beberapa bulan berselang, saya beralih ke Texmaker, impresi pertama saya. Lalu saat ini rencana B saya ketika pertama kali membaca laman Stackexchange tersebut akhirnya saya laksanakan. Apa itu rencana B? Itu adalah menerjemahkan laman tersebut ke dalam Bahasa Indonesia sebagaimana yang pernah saya lakukan dengan tutorial Terminal dari komunitas Mint. Inilah terjemahan dari big list http://tex.stackexchange.com/questions/339/latex-editors-ides. Seluruh skrinsot di sini diambil dari laman tersebut kecuali beberapa yang saya sebutkan lain. Semoga tulisan ini bermanfaat. Baca lebih lanjut

Mengatasi Aplikasi GTK yang Terlihat Jelek di KDE


Bismillahirrahmanirrahim.

Logo KDEAplikasi GTK (semacam Geany, Libreoffice, Firefox, Filezilla, Synaptic, dll.) akan terlihat jelek di KDE jika tidak dikonfigurasi. Bagaimana jelek yang dimaksud? Bagaimana cara mengatasinya? Apa kesulitannya? Saya melakukan oprek semalam dan inilah catatannya. Hasil oprek ini mengubah tampilan pada semua aplikasi GTK saya termasuk GIMP, NTM, GNOME File Chooser, dan Alarm Clock. Semua tampilan menjadi nyaman dilihat seperti aplikasi KDE umumnya. Semoga tulisan ini bermanfaat. Baca lebih lanjut

Cara Menggunakan apt-web


Bismillahirrahmanirrahim.

Alat dan Bahan

  1. Flash disk
  2. Satu folder kosong
  3. Warnet
  4. DownThemAll! (unduh di sini)

Cara Mengunduh

  1. Buka Mozilla Firefox.
  2. Instal DownThemAll! dengan cara dobel klik pada berkas .xpi yang Anda unduh di atas. Ini adalah installer bagi DownThemAll!. Jika ini tidak berhasil, klik kanan berkas downthemall-2.0.16-fx+sm.xpi pilih Open With … > Firefox. Kemudian Mozilla Firefox terbuka dan klik OK untuk menginstalnya. Jika diminta restart Firefox, maka OK juga. Kini Mozilla Firefox seharusnya sudah memiliki DownThemAll!.
  3. Buka http://apt-web.ntb.linux.or.id.
  4. Pilih versi Ubuntu. Saya contohkan Ubuntu 12.04 Precise Pangolin 32 bit. Ini harus benar.
  5. Pilih server Kambing. Kalau ada pilihan lain, silakan.
  6. Masukkan nama paket. Saya contohkan wine karena saya butuh Wine di Ubuntu. Ini juga harus benar.
  7. Submit.
  8. Muncul link unduh yang berakhiran .deb. Unduh itu semua dengan DownThemAll!. Caranya, sorot semua link yang berakhiran .deb sampai bawah lalu klik kanan > DownThemAll! > Download All Link. Arahkan ke folder kosong tadi dalam flash disk Anda.
  9. Biarkan DownThemAll! mengunduh semuanya sampai beres (biasanya tidak sampai 30 menit) lalu pulanglah. Pesan saya: hematlah biaya internet.

Cara Menginstal

  1. Kopi folder dari flash disk ke dalam /home/user Anda.
  2. Buka Terminal dan lakukan perintah sudo dpkg -i *.deb
  3. Tunggu sampai prosesnya selesai.
  4. Buka menu Anda dan program Wine sudah bisa digunakan.

Insya Allah tulisan ini akan saya perbarui nanti.

Pemrograman Qt 9 – QProcess dan Menjalankan Perintah Linux


Bismillahirrahmanirrahim.

qt-creator-logoKita bisa mengomando Linux melalui GUI. Bagaimana caranya? Ada banyak cara. Lihat dulu contoh semisal Ubuntu Tweak. Aplikasi tersebut menggantikan ratusan perintah Terminal dengan beberapa tombol saja. Jika Anda menekan satu tombol di Ubuntu Tweak, maka itu berarti menjalankan perintah tertentu. Konsep ini (GUI front-end) sangat berguna jika kita ingin membuat aplikasi yang melakukan otomatisasi perintah Terminal yang biasa kita kerjakan. Misalnya kita ingin mengganti alamat sumber repositori Ubuntu. Apa yang kita lakukan? Ubah sources.list secara manual, ketik sendiri alamat-alamat yang banyak itu dari hafalan Anda, lakukan update. Hal yang seperti ini bisa dibuatkan GUI supaya otomatis dengan menyimpan alamat-alamat sumber repositori lalu menambahkan tombol untuk masing-masing repositori. Jadi, cukup satu klik untuk mengganti repositori kita ke server Kambing atau UGM atau yang lain. Ini contoh saja. Sekarang kita akan membuat yang lebih sederhana dari itu. Kita akan memakai QProcess (sebagai ganti method system() kemarin) untuk menjalankan perintah Linux lebih canggih lagi di dalam Qt. Mengapa kita beralih ke QProcess? Nanti kita akan tahu, insya Allah.

Spesifikasi Sistem

  1. Ubuntu 12.04
  2. Qt Creator 2.4.1
  3. Qt 4.8.0 (32 bit)

Daftar Kelas

  1. QProcess
  2. QStringList
  3. QByteArray

Daftar Method

  • start() milik QProcess.
  • waitForFinished() milik QProcess.
  • readAll() milik QProcess.
  • printf() method standar iostream dari C++.

Arah Tulisan Ini

Saya hanya ingin menunjukkan bagaimana aplikasi Qt bisa dibuat seperti contoh di atas, seperti Ubuntu Tweak yang satu tombolnya menggerakkan beberapa perintah Terminal. Dan saya bilang kali ini lebih canggih karena kita bisa menangkap keluaran dari perintah yang dijalankan. Ini penting untuk mewujudkan aplikasi-aplikasi yang dapat mengeksekusi perintah Terminal, menangkap keluarannya, memroses keluaran tersebut, lalu membuat keluaran baru. Contoh nyatanya adalah aplikasi pengganti sources.list otomatis pada paragraf pertama di atas.

Kode

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QtGui>

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog();
    QVBoxLayout *layout;
    QPushButton *tombola;
    QPushButton *tombolb;
    QPushButton *tombolc;

public slots:
    void perintah_cat();
    void perintah_mkdir();
    void perintah_ls();

private:

};

#endif // MAINWINDOW_H

mainwindow.cpp

#include <iostream>
#include <QtGui>
#include <mainwindow.h>

Dialog::Dialog()   //kagak usah dikasih void
{
    layout  = new QVBoxLayout;
    tombola = new QPushButton("cat");
    tombolb = new QPushButton("mkdir");
    tombolc = new QPushButton("ls");

    tombola->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tombolb->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tombolc->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

    tombola->setMinimumSize(88,55);
    tombolb->setMinimumSize(88,55);
    tombolc->setMinimumSize(88,55);

    layout->addWidget(tombola);
    layout->addWidget(tombolb);
    layout->addWidget(tombolc);

    setLayout(layout);

    connect(tombola, SIGNAL(clicked()), this, SLOT(perintah_cat()));
    connect(tombolb, SIGNAL(clicked()), this, SLOT(perintah_mkdir()));
    connect(tombolc, SIGNAL(clicked()), this, SLOT(perintah_ls()));
}

void Dialog::perintah_cat()
{
    QProcess *cat = new QProcess;
    cat->start("/bin/bash -c \"rm isifolder.txt\"");
}

void Dialog::perintah_mkdir()
{
    QProcess sh;
    sh.start("sh", QStringList() << "-c" << "ifconfig | grep inet");

    sh.waitForFinished(-1);
    QByteArray output = sh.readAll();
    printf(output);
}

void Dialog::perintah_ls()
{
    QStringList options;
    options << "-c" << "ls -l | grep a | sort > isifolder.txt";

    QProcess process;
    process.start("/bin/sh", options);
    process.waitForFinished(-1);
}

Qt Creator dan Kode

ngite-kesembilan8

Panel sebelah kiri berisi mainwindow.cpp dan sebelah kanan mainwindow.h.

Hasil Kode

Tampilan program kali ini sama dengan sebelumnya. Bedanya, isi perintah untuk masing-masing tombol saya ubah. Saya akan jelaskan satu per satu hasil perintah mulai dari tombol ketiga.

Tombol ls

Isi tombol ls adalah perintah untuk mendaftar isi folder tempat si program berada, menyaring supaya hanya informasi yang memiliki huruf a saja yang ditampilkan, lalu menuliskannya ke sebuah berkas teks bernama isifolder.txt.

ngite-kesembilan1 ngite-kesembilan2

Jika tombol ls ditekan, maka perintah ls -l | grep -a > isifolder.txt dijalankan. Maka jadilah satu berkas teks bernama isifolder.txt.

ngite-kesembilan3

Demikian isi dari berkas isifolder.txt.

ngite-kesembilan9

Demikian keluaran (standard output) dari perintah yang sama tetapi dijalankan dari Terminal. Sama persis dengan isi teks. Ini berarti program valid.

Tombol mkdir

Isi tombol mkdir adalah perintah untuk mengeluarkan informasi jaringan pada baris yang memiliki teks inet saja (membuang semua baris yang lain) dan informasi itu dicetak di dalam Terminal saja. Perintahnya adalah ifconfig | grep inet.

ngite-kesembilan6

Keluaran (standard output) hanya muncul setelah program ditutup.

ngite-kesembilan7

Sama keluarannya (standard output di Terminal asli dengan Terminal di Qt Creator). Valid.

Tombol cat

Isi tombol cat adalah perintah untuk menghapus berkas isifolder.txt yang sudah ada. Karena inilah saya jelaskan dari bawah ke atas.

Pembahasan

mainwindow.h

Sama seperti tulisan sebelumnya. Jika Anda belum mengerti model deklarasi dalam header ini, silakan merujuk ke sini.

mainwindow.cpp

Pada berkas .cpp proyek ini, ada 3 fungsi buatan yang perlu diperhatikan karena inilah inti program. Kita punya 3 model eksekusi perintah Terminal di Qt, setidaknya dalam program ini. Jika Anda belum mengerti bagaimana membangun elemen-elemen GUI dengan Qt, silakan merujuk ke sini.

  • Model Eksekusi Perintah Pertama
QProcess *cat = new QProcess;
cat->start("/bin/bash -c \"rm isifolder.txt\"");

Kita membuat sebuah objek bernama cat (dari nama cat (concatenate) bukan kucing) dari kelas QProcess. Lalu, dengan objek ini, kita panggil fungsi start(). Di dalam start() ini kita masukkan string yang merupakan perintah Terminal. Perhatikanlah, kita tidak langsung menulis perintah rm isifolder.txt seperti biasa dilakukan di Terminal. Kita mesti mengawali string perintah dengan /bin/bash. Lalu gunakanlah argumen -c (artinya membaca perintah bash dari string) milik /bin/bash tersebut. Lalu barulah kita tuliskan perintah yang ingin dilakukan. Perhatikan, ada sedikit perbedaan. Di sini, ada escape character \” yakni membuat yang diapit keduanya sebagai string. Ya, argumen -c itu tadi sebabnya. Kita memasukkan string ke dalam bash tetapi ia sanggup menerimanya sebagai perintah karena argumen -c. Yang paling penting, inilah model paling ringkas menggunakan QProcess untuk mengeksekusi perintah Terminal.

  • Model Eksekusi Perintah Kedua
QProcess sh;
sh.start("sh", QStringList() << "-c" << "ifconfig | grep inet");

sh.waitForFinished(-1);
QByteArray output = sh.readAll();
printf(output);

Inti dari model kedua ini adalah pemanfaatan method start() milik QProcess yang memiliki bentuk umum: start(command, argument);. Perintah kita taruh di command, argumen kita taruh di argument. Sekadar catatan, rm -rf ubuntu.png berarti rm itu perintah sedangkan -rf ubuntu.png itu argumen. Di sini, perintah yang digunakan adalah sh (pasti ada di /bin/ Anda) sedangkan argumen yang digunakan adalah -c dan ifconfig | grep inet. Istimewanya, di sini penggunaannya tidak sesederhana itu. Kita menggunakan kelas tambahan bernama QStringList di dalam argumen start(). QStringList ini adalah kelas yang bisa menampung beberapa string sekaligus. Oleh karena itu, ia dipakai untuk menampung string yang berisi argumen-argumen perintah. Ia sangat praktis, maka ia sering digunakan. Di sini, QStringList dipakai dengan deklarasi langsung QStringList() << “-c” << “ifconfig | grep inet”. Terlihat aneh, terlihat tidak biasa. Namun ini gunanya supaya kita tidak usah membuat satu objek baru.

Teristimewa untuk QByteArray output = sh.readAll(), ini maksudnya memanggil method readAll() milik objek QProcess, yang menghasilkan keluaran dari perintah yang dijalankan oleh QProcess, lalu keluaran itu disimpan pada objek output yang dibuat dari kelas QByteArray. Pendek kata, baris deklarasi ini mengambil standard output dari perintah di dalam objek QProcess. Oleh karena itu, ia akan mengeluarkan output dari perintah ifconfig | grep inet ke Terminal di dalam Qt Creator. Apakah ini tidak penting? Tidak, justru ini (standard output dan standard error) penting sekali untuk membangun aplikasi sebagaimana ditulis di paragraf pertama tulisan ini.

  • Model Eksekusi Perintah Ketiga
QStringList options;
options << "-c" << "ls -l | grep a | sort > isifolder.txt";

QProcess process;
process.start("/bin/sh", options);
process.waitForFinished(-1);

Model ketiga ini adalah yang paling mudah dipahami. Pertama-tama kita membuat objek QStringList dahulu yang menampung seluruh argumen yang dibutuhkan. Objek ini bernama options. Lalu kita buat objek QProcess yang menampung perintah /bin/sh (bisa diganti /bin/bash atau /bin/zsh jika Anda punya zsh). Objek ini bernama process. Lalu, kita panggil start(“/bin/sh”, options); untuk process. Maka jadilah program seperti yang saya tampilkan di bagian Hasil Kode di atas.

Inti dari ketiga jenis eksekusi perintah Terminal dari dalam Qt di atas adalah pemakaian kelas QProcess. Ada beberapa hal penting yang patut diperhatikan:

  1. Kita bisa menggunakan pipeline (|) dan redirection (>, <, >>, <<) setelah mereka dimasukkan sebagai string sekaligus argumen pada QProcess. Pipeline dan redirection adalah the ultimate power di sistem operasi Linux.
  2. Tidak seperti biasanya, di sini, yang disebut command itu malah /bin/bash (shell) kita bukan langsung pada command yang biasa kita ketik di Terminal. Justru command yang biasa kita pakai itu menjadi argument di sini.
  3. Adanya method waitForFinished(-1) di sini. Arti nilai -1 ini adalah menunggu sampai objek QProcess selesai mengerjakan tugasnya. Tanpa method ini, program tidak berjalan semestinya.
  4. Seluruh kode yang ada di sini adalah dasar kita untuk membuat aplikasi yang selain mampu mengeksekusi perintah Terminal, juga mampu membaca keluaran dari perintah yang dieksekusi bahkan mampu memrosesnya.

Unduh Kode Sumber

Program kali ini bernama Embrio-Metamorfosa juga. Saya menggunakan Git jadi tidak khawatir kode rusak. Silakan unduh dan buka di Qt Creator Anda.

Tautan: http://otodidak.freeserver.me/tarball/Embrio-Metamorfosa_Edisi_2.tar.gz
Ukuran: 3 KB

Kesimpulan

  • Eksekusi perintah Linux dengan Qt bisa dilakukan dengan QProcess selain dengan method system().
  • QProcess bisa dimanfaatkan untuk membaca standard output dan standard error dari segala perintah Linux.
  • Ada beberapa model eksekusi perintah Linux di dalam Qt tetapi seluruhnya tidak keluar dari bentuk umum qprocess.start(command, argument).
  • Kita beralih ke QProcess karena ia praktis dan memiliki semua perlengkapan untuk memanggil perintah Linux serta membaca dan mengolah standard output-nya.
  • Inti dari semua ini adalah pembuatan sebuah proses baru lalu proses itu memanggil perintah Linux.

Rujukan

Pemrograman Qt 3 – Mendayagunakan QFrame dan QVBoxLayout untuk Membentuk Kolom Lebih Banyak dalam QDialog


Bismillahirrahmanirrahim.

Kalau kemarin kita ngite dengan QGroupBox dan QHBoxLayout, sekarang kita akan mencoba QFrame sebagai ganti QGroupBox baik sebagai kontainer maupun pembuat spasi. Ide dasar program ketiga ini adalah spasi kosong untuk setiap grup widget yang kita buat di dalam QDialog. Oh iya, sampai hari ini kita hanya akan berkutat dengan QDialog tanpa menyentuh QMainWindow. Tentulah, semua hard coding ini tujuannya membuat aplikasi GUI di Linux. Semoga bermanfaat untuk kaum muslimin semuanya.

Wujud Program yang Diinginkan

ngite-kedua9

Daftar Kelas Qt yang Dipakai

  1. QDialog = dipakai untuk membuat jendela tertinggi
  2. QVBoxLayout = dipakai untuk membuat kontainer yang menampung setiap blok/grup dari tombol
  3. QGridLayout = dipakai untuk membuat kontainer paling besar yang menampung semua objek QVBoxLayout nantinya
  4. QPushButton = dipakai untuk membuat tombol
  5. QIcon = dipakai untuk memasukkan gambar sebagi ikon tombol, QIcon dipakai sebagai passing parameter
  6. QSize = dipakai untuk membuat objek yang menyimpan ukuran, yang di program ini objek berisi ukuran tersebut diterapkan pada logo dalam tombol
  7. QFrame = dipakai untuk menggantikan QGroupBox dalam hal menampung tombol-tombol jadi satu blok/grup.

Daftar Method Qt yang Dipakai

  1. addWidget -> dipakai oleh QVBoxLayout, QGridLayout
  2. setMinimumSize -> dipakai oleh QPushButton
  3. setIconSize -> dipakai oleh QPushButton
  4. setIcon -> dipakai oleh QPushButton
  5. setLayout -> dipakai oleh QFrame dan QDialog
  6. setFixedWidth -> dipakai oleh QFrame
  7. setFrameShadow -> dipakai oleh QFrame untuk membentuk bayangan; opsi-opsinya adalah QFrame::Raised, QFrame::Sunken, dan QFrame::Plain
  8. setFrameShape -> dipakai oleh QFrame untuk membentuk wujud panel apakah itu timbul atau tenggelam; opsi-opsinya adalah QFrame::StyledPanel [dipakai oleh default-nya Qt Creator GUI Builder], QFrame::Box
  9. setColumnMinimumWidth -> dipakai oleh QGridLayout untuk menentukan ukuran setiap blok/grup dan menentukan jumlah blok/grup yang bisa dipakai
  10. setRowMinimumHeight -> dipakai oleh QGridLayout, idem
  11. setLayout -> dipakai oleh QDialog selaku kelas tertinggi untuk memasang QGridLayout ke dalam dirinya.

Peta GUI

Saya jelaskan dulu peta QFrame dalam program ini yang saya susun.

ngite-kedua9B

A = QFrame (frameKiri) dengan QVBoxLayout (layoutKontainerKiri)
B = QFrame (frameTengah)
C = QFrame (frameKanan)
D = QFrame (frameSangga)
E = QFrame (frameBawah)
F = QFrame (framePojok)

Kode Program

Sama dengan kegiatan ngite kita kemarin, hanya berkas mainwindow.cpp yang penting.

mainwindow.cpp


#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QtGui>

Dialog::Dialog()
{
    QVBoxLayout *layoutKontainerKanan  = new QVBoxLayout;
    QVBoxLayout *layoutKontainerKiri   = new QVBoxLayout;
    QVBoxLayout *layoutKontainerTengah = new QVBoxLayout;
    QVBoxLayout *layoutKontainerBawah  = new QVBoxLayout;
    QVBoxLayout *layoutKontainerPojok  = new QVBoxLayout;
    QGridLayout *layoutUtama           = new QGridLayout;

    QPushButton *tombolSatu          = new QPushButton("SATU");
    QPushButton *tombolDua           = new QPushButton("DUA");
    QPushButton *tombolTiga          = new QPushButton("TIGA");
    QPushButton *tombolEmpat         = new QPushButton("");

        layoutKontainerKanan->addWidget(tombolSatu);
        layoutKontainerKanan->addWidget(tombolDua);
        layoutKontainerKanan->addWidget(tombolTiga);
        layoutKontainerKanan->addWidget(tombolEmpat);

        QSize size(88,88);                                  //menentukan ukuran, bisa dipakai di mana-mana nanti

        tombolEmpat->setMinimumSize(100,100);               //objek size lalu dimasukkan ke dalam method setIconSize dalam tombolEmpat
        tombolEmpat->setIconSize(size);                     //nggak sangka, dasar OOP; sampai ukuran ikon pun disimpan sebagai objek
        tombolEmpat->setIcon(QIcon(":/gambar/ubuntu.png")); //logo ubuntu.png ini jadi seukuran 88x88 betulan dalam tombol [sebelumnya gagal]

    QPushButton *tombolLima          = new QPushButton("LIMA");
    QPushButton *tombolEnam          = new QPushButton("ENAM");
    QPushButton *tombolTujuh         = new QPushButton("TUJUH");
    QPushButton *tombolDelapan       = new QPushButton("DELAPAN");

        layoutKontainerKiri->addWidget(tombolLima);
        layoutKontainerKiri->addWidget(tombolEnam);
        layoutKontainerKiri->addWidget(tombolTujuh);
        layoutKontainerKiri->addWidget(tombolDelapan);

    //TOMBOL-TOMBOL DI BARISAN BAWAH
    QPushButton *tombolSembilan      = new QPushButton("SEMBILAN");

        layoutKontainerBawah->addWidget(tombolSembilan);

    QPushButton *tombolSepuluh       = new QPushButton("SEPULUH");

        layoutKontainerPojok->addWidget(tombolSepuluh);

    //FRAME-FRAME PEMUAT TOMBOL
    QFrame *frameKanan = new QFrame;
    frameKanan->setLayout(layoutKontainerKanan);

    QFrame *frameKiri  = new QFrame;
    frameKiri->setLayout(layoutKontainerKiri);

    QFrame *frameTengah = new QFrame;
    frameTengah->setFixedWidth(66);                     //berhasil mengatur ukuran lebar frame secara galak
//    frameTengah->setFrameShadow(QFrame::Raised);      //setFrameShadow dan setFrameStyle
//    frameTengah->setFrameShape(QFrame::StyledPanel);  //kalau dimatikan, maka semua shadow hilang dan hanya tampak spasi kosong
    frameTengah->setLayout(layoutKontainerTengah);      //jangan lupa masukkan layout ke dalam frame

    QFrame *frameBawah = new QFrame;
    frameBawah->setLayout(layoutKontainerBawah);

    QFrame *frameSangga = new QFrame;
    frameSangga->setFixedHeight(88);

    QFrame *framePojok  = new QFrame;
    framePojok->setFixedHeight(50);
    framePojok->setLayout(layoutKontainerPojok);

    layoutUtama->addWidget(frameKanan, 1, 3);
    layoutUtama->addWidget(frameTengah, 1, 2);
    layoutUtama->addWidget(frameKiri, 1, 1);
    layoutUtama->addWidget(frameBawah, 3, 1);
    layoutUtama->addWidget(frameSangga, 2, 1);
    layoutUtama->addWidget(framePojok, 3, 3);
    layoutUtama->setColumnMinimumWidth(3, 100);     //menentukan jumlah kolom dan lebar masing-masingnya
    layoutUtama->setRowMinimumHeight(3, 10);       //menentukan jumlah baris dan tinggi masing-masingnya
    setLayout(layoutUtama);
}

Analisis Kode Program

Sebenarnya sama saja dengan program sebelumnya. Maka akan saya jelaskan beberapa saja yang terpenting.

SATU

QFrame *frameKanan = new QFrame;
 frameKanan->setLayout(layoutKontainerKanan);

Masih seperti kemarin, itulah bentuk umum pembuatan objek dari kelas. Di sini yang disebut kelas ialah QFrame sedangkan objeknya frameKanan. Sesudah dibuat, objek dipasangi layout dengan memakai method setLayout.

DUA

frameTengah->setFixedWidth(66);

Inilah ide dasar program ketiga ini. Method setFixedWidth, sesuai namanya, berguna untuk menentukan ukuran lebar dari frameTengah. Frame yang ini posisinya ada pada baris pertama kolom kedua. Kalau bingung, lihat lagi Peta GUI di atas.

TIGA

layoutUtama->addWidget(frameKanan, 1, 3);
layoutUtama->addWidget(frameTengah, 1, 2);
layoutUtama->addWidget(frameKiri, 1, 1);
layoutUtama->addWidget(frameBawah, 3, 1);
layoutUtama->addWidget(frameSangga, 2, 1);
layoutUtama->addWidget(framePojok, 3, 3);

Perhatikan, layoutUtama sudah dibentuk dari QGridLayout, bukan layout model lainnya. Kalau dibentuk dari kelas ini, maka dia memiliki bentuk umum passing parameter ala QGridLayout juga. Dan ini spesial karena Grid Layout milik Qt itu fleksibel bisa ke samping dan ke bawah sekaligus. Misalnya saja, kode layoutUtama->addWidget(frameKanan, 1, 3); berarti maksudnya masukkan ke dalam Grid Layout bernama layoutUtama sebuah objek bernama frameKanan, pada baris 1 kolom 3. Mudah sekali, bukan? Begini bentuk umumnya:

void QGridLayout::addWidget ( QWidget * widget, int fromRow, int fromColumn, int rowSpan, int columnSpan, Qt::Alignment alignment = 0 )

Bentuk umum ini saya dapat dari dokumentasi internal Qt Creator (tekan F1). Bentuk umum yang njelimet ini, ternyata bisa diterjemahkan jadi kode saya tadi. Bagaimana memahaminya? Begini caranya:

  1. void ini berarti bentuk kode QGridLayout::addWidget dst. adalah fungsi, bukan kelas bukan yang lain. Jadi, tidak perlu dilihat nama QGridLayout-nya kalau mau menggunakan ini. Cukup lihat addWidget dst. saja. Ini artinya fungsi addWidget() di dalam kelas QGridLayout itu cara pakainya demikian. Dan memang berbeda addWidget untuk QGridLayout dengan yang untuk layout lainnya.
  2. QWidget * widget diganti dengan frameKanan
  3. int fromRow diganti dengan 1
  4. int fromColumn diganti dengan 3
  5. sisanya tidak diisi tidak apa-apa.

EMPAT

layoutUtama->setColumnMinimumWidth(3, 100);
layoutUtama->setRowMinimumHeight(3, 10);

Penjelasannya persis seperti nama method-nya. Bentuk umumnya adalah

void QGridLayout::setColumnMinimumWidth ( int column, int minSize )

yang artinya fungsi setColumnMinimumWidth ini gunanya untuk mengatur ukuran lebar minimum untuk kolom yang ditentukan. Maka, kode saya tadi maksudnya aturlah pada kolom ketiga, ukuran lebar 100 piksel.

LIMA

QSize size(88,88);
tombolEmpat->setMinimumSize(100,100);
tombolEmpat->setIconSize(size);
tombolEmpat->setIcon(QIcon(":/gambar/ubuntu.png"));

Nah, untuk kode ini, sengaja saya akhirkan penjelasannya. Pertama, dibuat sebuah objek yang menampung suatu dimensi piksel x piksel. Objek itu bernama size yang diturunkan dari kelas QSize. Ini unik, khas OOP. Segalanyaaa… objek. Bahkan sampai yang namanya dimensi pun dibuat sebagai objek. Sesudah itu, tombolEmpat diatur ukuran minimumnya lalu nah. Inilah gunanya. Dengan method milik PushButton yang bernama setIconSize, objek size tadi dimasukkan ke sini. Jadi kita tidak menuliskan setIconSize(88,88) melainkan setIconSize(size). Gunanya untuk baris berikutnya. Method setIcon gunanya untuk mengatur ikon dari tombol. Bisa ditebak, saya memang ingin membuat aplikasi yang berbasis gambar lagi. Begitu gambar dimasukkan, karena tadi sudah diatur dengan setIconSize, maka otomatis nanti kalau dijalankan programnya, ikon yang ditentukan di sini pasti berukuran 88 x 88. Mudah dipahami, bukan? Yang unik dari method terakhir ini adalah setIcon(QIcon(“”));. Perhatikan, ada method di dalam method. Dan di sini dipakailah kelas QIcon. Saya sendiri tidak seberapa paham mengapa harus begini (tetapi saya mengerti juga buat apa?) yang penting bisa masuk gambarnya. Perhatikan lagi, :/gambar/ubuntu.png itu adalah aturan Qt Creator dalam mengimpor gambar. Lihat tulisan pertama saya soal Qt bila belum mengerti soal impor gambar.

ENAM

frameTengah->setFrameShadow(QFrame::Raised);
frameTengah->setFrameShape(QFrame::StyledPanel);

ngite-kedua12

Khusus untuk baris ke-58 kode, saya jadikan komentar. Seandainya diaktifkan, maka nanti frameTengah akan kelihatan border-nya. Bentuk border yang seperti ini keren, tetapi saya tidak inginkan dalam program kali ini. Mungkin nanti pas perlu baru dipakai. Yang penting, perhatikan passing parameter-nya. QFrame::Raised untuk setFrameShadow dan QFrame::StyledPanel untuk setFrameShape. Begitu cara menulis passing parameter-nya. Anda bisa mencarinya dalam dokumentasi internal Qt Creator untuk jenis shadow dan jenis framestyle lainnya.

Hasil Akhir

Ini hasil yang saya inginkan, yakni ada spasi kosong antargrup. Sebagai bonus, kita berhasil membuat tombol dengan gambar sekaligus mengatur sekehendak kita ukurannya.

ngite-kedua9

Bandingkan dengan program kemarin yang masih kelihatan spasi antargrupnya:

ngite-kedua11

Rangkuman

  1. Grid Layout adalah yang paling bebas yang bisa dipakai untuk meletakkan objek-objek GUI ke samping dan ke bawah.
  2. Untuk mengatur ukuran gambar dalam tombol, kita bisa gunakan QSize untuk menampung ukuran dan memasukkannya ke dalam passing parameter dalam method setIconSize.

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.