Pembangunan Aplikasi GUI Menggunakan PHP dan gambArt
Pemrograman Software
Contoh Aplikasi yang Memiliki Event
Setelah mencoba membangun aplikasi Hello World yang sangat sederhana, kali ini kita akan mencoba membangun suatu aplikasi yang memiliki interaksi. Aplikasi yang akan kita bangun adalah aplikasi konversi ukuran dari satuan feet menjadi satuan meter.
Aplikasi ini menerima input melalui text box. Setelah user memasukkan angka yang ingin dikonversi ke dalam text box tersebut, user tinggal menekan tombol Enter atau mengklik tombol Hitung. Setelah itu, aplikasi akan menampilkan hasil konversi.
Berikut ini source code (beserta komentar) dari ConverterForm.php dan app.kfe.
<?php
/*************************
* ConverterForm.php *
*************************/
/**
* File berikut ini akan mengatur form beserta komponen (button, edit box)
* yang ada. Pengaturan yang dilakukan diantaranya adalah: ukuran form,
* posisi, dan title.
*/
// Sebuah form harus mengimport klorofil_gambart_Form terlebih dahulu
import("klorofil_gambart_Form");
// Kita akan mengimport komponen-komponen yang akan digunakan.
// Pada contoh ini, komponen yang akan kita gunakan adalah:
// text edit, button, dan label
import("klorofil_gambart_component_Edit");
import("klorofil_gambart_component_Button");
import("klorofil_gambart_component_Label");
// Deklarasi class ConverterForm. Sebuah form harus diturunkan dari
// klorofil_gambart_Form
class form_ConverterForm extends klorofil_gambart_Form
{
// Deskripsikan seluruh code yang dibutuhkan untuk men-generate form
// pada fungsi init(). Di masa akan datang, fungsi init() akan
// diisi secara otomatis oleh software Form Editor yang akan
// disediakan oleh Klorofil Collaboration Project
function init()
{
/*----------------------------------------------------------------
* Inisialisasi Form
*----------------------------------------------------------------*/
// Fungsi init() harus diawali dengan memanggil parent::init()
// Hal ini dilakukan untuk memanggil fungsi init() pada parent dari
// class form_ConverterForm, yaitu klorofil_gambart_Form
parent::init();
// Tentukan ukuran form beserta posisinya
$this->setWidth(250);
$this->setHeight(100);
$this->setLeft(100);
$this->setTop(100);
// Tentukan judul/title dari form tersebut
$this->setCaption("Konversi Feet ke Meter");
/*----------------------------------------------------------------
* Komponen Label untuk menampilkan tulisan 'Feet = '
*----------------------------------------------------------------*/
// Siapkan komponen Label labelFeet dan tambahkan pada class
// form ini. Argumen $this pada statement ini menyatakan bahwa
// Label tersebut ditambahkan/dimiliki oleh
// $this (class form_ConverterForm)
$this->labelFeet = new klorofil_gambart_component_Label($this);
// Tentukan posisi dari Label tersebut.
// Secara default, Label bersifat auto size (ukurannya sesuai
// dengan panjang label) dan transparan (tidak memiliki warna
// background)
$this->labelFeet->setLeft(10);
$this->labelFeet->setTop(13);
// Tentukan text dari komponen Label tersebut
$this->labelFeet->setCaption("Feet = ");
/*----------------------------------------------------------------
* Komponen Button untuk menampilkan tombol dengan text 'Hitung'
*----------------------------------------------------------------*/
// Siapkan komponen Button buttonHitung dan tambahkan pada class
// form ini (form_ConverterForm).
$this->buttonHitung = new klorofil_gambart_component_Button($this);
// Tentukan ukuran dan posisi dari tombol Hitung
$this->buttonHitung->setLeft(150);
$this->buttonHitung->setTop(7);
$this->buttonHitung->setWidth(80);
$this->buttonHitung->setHeight(24);
// Tentukan text yang akan dituliskan pada tombol tersebut
$this->buttonHitung->setCaption("Hitung");
// Tentukan fungsi yang akan dipanggil ketika tombol Hitung diklik.
// Dalam contoh ini, setiap kali tombol Hitung diklik, gambArt akan
// secara otomatis mengeksekusi/menjalankan fungsi
// onConvertPerformedClick
$this->buttonHitung->onClick->setHandler(
$this, "onConvertPerformedClick");
/*----------------------------------------------------------------
* Komponen text edit untuk menerima input angka yang ingin
* dikonversi
*----------------------------------------------------------------*/
// Siapkan komponen Edit inputFeet dan tambahkan pada class
// form ini (form_ConverterForm).
$this->inputFeet = new klorofil_gambart_component_Edit($this);
// Tentukan ukuran dan posisi dari text edit tersebut
$this->inputFeet->setLeft(45);
$this->inputFeet->setTop(10);
$this->inputFeet->setWidth(100);
$this->inputFeet->setHeight(20);
// Tentukan fungsi yang akan dipanggil ketika pada saat user
// menekan tombol pada saat berada di text edit. Dalam contoh ini,
// setiap kali user menekan tombol apapun pada text edit, gambArt
// akan secara otomatis mengeksekusi/menjalankan fungsi
// onEditKeyPress
$this->inputFeet->onKeyDown->setHandler(
$this, "onEditKeyPress");
/*----------------------------------------------------------------
* Komponen Label untuk menampilkan tulisan hasil konversi
*----------------------------------------------------------------*/
// Siapkan komponen Label labelMeter dan tambahkan pada class
// form ini (form_ConverterForm).
$this->labelMeter = new klorofil_gambart_component_Label($this);
// Tentukan posisi dari Label tersebut.
// Secara default, Label bersifat auto size (ukurannya sesuai
// dengan panjang label) dan transparan (tidak memiliki warna
// background)
$this->labelMeter->setLeft(10);
$this->labelMeter->setTop(35);
}
/*----------------------------------------------------------------
* Fungsi yang akan dipanggil saat tombol Hitung diklik
*----------------------------------------------------------------*/
function onConvertPerformedClick($sender)
{
// Masukkan nilai yang dimasukkan user pada input text ke dalam
// variabel $lengthFeet
$lengthFeet = $this->inputFeet->getText();
// Lakukan konversi
$lengthMeter = $lengthFeet * 0.3;
// Tampilkan hasil konversi
$this->labelMeter->setCaption(
$lengthFeet . " Feet = " . $lengthMeter . " Meter");
}
/*-----------------------------------------------------------------
* Fungsi yang akan dipanggil saat tombol apapun diklik saat
* fokus berada pada text edit inputFeet.
*-----------------------------------------------------------------*/
function onEditKeyPress($sender, $key, $shift)
{
// Kita akan mengecek apakah tombol yang ditekan oleh user merupakan
// tombol Enter. 13 adalah merupakan tombol Enter.
if ($key == 13)
{
// Jalankan fungsi onConvertPerformedClick untuk menjalankan
// perhitungan
$this->onConvertPerformedClick($sender);
}
}
}
?>
<?php
/*********************
* app.kfe *
*********************/
/**
* File ini digunakan untuk menjalankan aplikasi, mengenerate form yang
* telah dibuat, dan melakukan berbagai setting lainnya.
*/
// Pertama-tama, kita harus mengimport klorofil_gambart_Application
// terlebih dahulu
import("klorofil_gambart_Application");
// Import form form_ConverterForm yang akan digunakan oleh aplikasi ini
import("form_ConverterForm");
// Setelah melakukan kedua import di atas, kita akan mendapatkan
// 2 variabel global, yaitu: $application dan $form.
global $application;
global $form;
// Tentukan judul/title aplikasi yang akan ditampilkan pada taskbar.
$application->setTitle("Feet Converter");
// Generate form
$form = $application->createForm("form_ConverterForm");
// Jalankan aplikasi
$application->run();
?>