Pemrograman GUI
Saya bisa memahami jika anda merasa bosan ketika mempelajari bab 3 didepan karena pada kedua bab tersebut saya hanya memberikan contoh-contoh aplikasi dalam mode console. Padahal kenyataannya banyak pengguna aplikasi sekarang ini lebih tertarik pada aplikasi dalam mode grafis karena mempunyai tampilan yang bagus dan lebih aplikatif dibandingkan dengan mode console. Pada bab 2 didepan sedikit sudah saya singgung mengenai cara membangun aplikasi java berbasis GUI (Graphical User Interface). Nah, pada bab ini saya akan mencoba membahas lebih detail mengenai pemrograman GUI.
Swing package adalah paket kelas untuk tampilan GUI dalam Java. Berikut ini kita akan mempelajari terlebih dahulu beberapa komponen dasar. Saya yakin setelah anda memahami bab ini maka rasa bosan anda sudah bisa terobati karena bagian ini sangatlah menarik dan membuktikan bahwa pemrograman GUI di java itu ternyata mudah. O iya ada yang lupa, jika kopi anda habis masih boleh kok nambah lagi, dijamin anda akan lebih santai lagi dalam mempelajari buku ini.
A. KOMPONEN-KOMPONEN SWING
Swing package terbagi menjadi beberapa tipe komponen yaitu :
- Top-Level Containers
- General Purpose Containers
- Special Purpose Containers
- Basic Controls
- Uneditable Information Displays
- Editable Displays of Formatted Information
Top-Level Containers
Top-Level Containers adalah komponen-komponen yang berada di puncak (root) dari semua komponen-komponen dalam paket swing. Top-Level Containers itu sendiri berfungsi untuk menampung komponen-komponen swing yang lain. Berikut ini contoh jenis-jenis Top-Level Containers.

Gambar 1. Top Level Containers
General Purpose Containers
General Purpose Containers adalah komponen container tingkat menengah yang bisa juga digunakan untuk menampung komponen-komponen yang lain dan bisa dimanfaatkan untuk menangani situasi kebutuhan tertentu. Berikut ini contoh jenis-jenis General Purpose Containers

Gambar 2. General Purpose Containers
Special Purpose Containers
Special Purpose Containers adalah container yang mempunyai fungsi melakukan tugas khusus dalam interface. Berikut ini contoh jenis-jenis Special Purpose Containers

Gambar 3. Special Purpose Containers
Basic Controls
Basic Controls adalah komponen-komponen yang berfungsi sebagai tempat input data bagi user.

Gambar 4. Basic Controls
Uneditable Information DisplaysUneditable Information Displays adalah komponen-komponen yang berfungsi hanya untuk memberikan informasi kepada user.

Gambar 5. Uneditable Information Displays
Editable Displays of Formatted InformationEditable Displays of Formatted Information adalah komponen yang berfungsi untuk menampilkan informasi dan bisa dipilih dan di-edit oleh user.

Gambar 6. Editable Displays of Formatted Information
Saya tidak membahas secar lengkap fungsi-fungsi Swing Package dalam buku ini. Jika anda ingin mengetahui lebih detail tentang Swing Package ini silakan lihat Java Swing yang disusun oleh Marc Loy, Robert Eckstein, Dave Wood, Brian Cole, and James Elliott (O'Reilly). Disini saya akan menunjukkan komponen-komponen dasar Swing pada gambar dibawah ini.
Gambar 7. Komponen dasar Swing
B. EVENT HANDLING
Perlu anda ketahui bahwa objek-objek bekerja sama dengan cara saling berkomunikasi satu sama lainnya. Salah satu cara yang kita pelajari adalah dengan memanggil method pada objek yang ingin kita pakai. Cara ini tergolong dalam komunikasi syncronous, atau request-response model, atau command mode.
Selain itu ada juga yang disebut dengan asyncronous notification, seperti yang telah kita gunakan pada pelajaran tentang Swing, yaitu pada event handling. Dengan cara ini kita dapat mengimplementasikan hubungan satu-ke-banyak (one-to-many) antar objek sehingga perubahan pada satu objek bisa diketahui dan ditanggapi oleh yang lain tanpa peningkatan coupling yang tidak perlu.

Gambar 8. Create Event
Pada bab 2 didepan sudah saya bahas mengenai bagaimana membuat event handling pada sebuah komponen. Untuk lebih jelasnya silakan anda lihat lagi contoh aplikasi pertama pada bab 2 langkah ke 8. Disitu saya sebutkan bahwa untuk mengendalikan program kita perlu menggunakan event. Gambar berikut ini menunjukkan macam-macam event yang disediakan dalam Javabean.
Perlu anda ketahui bahwa dalam satu set Event terdiri atas:
- Sebuah Event Listener Interface: interface ini merupakan ekstensi dari interface java.util.EventListener, dan mendefinisikan satu atau lebih method yang harus diimplementasikan oleh kelas yang ingin menerima event ini.
- Sebuah Event Object : Sebuah event object dilewatkan dari event source ke listener. Ia memperluas java.util.EventObject atau salah satu subclassnya.
- Method untuk Event Registration : Mereka adalah method add- atau remove-listener, yang diimplementasikan oleh komponen yang menjadi sumber event. Nama dari method-method ini harus memenuhi konvensi nama JavaBean.
Sebagai contoh dalam satu set key event (lihat gambar diatas) disediakan beberapa predefined event sets yang terdiri atas:
- Interface KeyListener, yang terdiri atas method-method keyPressed(), KeyReleased(), dan keyTyped()
- Class event object KeyEvent.
- Komponen yang membangkitkan key event harus mendefinisikan method registrasi addKeyListener(KeyListener kl) dan removeKeyListener(KeyListener kl).
Silakan anda pilih salah satu event yang ada kemudian buka source-nya. Jika anda buka private void initComponents pada source code tersebut maka dapat anda lihat tata cara pendeklarasian event untuk sebuh komponen. Berikut ini contoh deklarasi event keyPressed yang mendeteksi adanya penekanan tombol keyboard pada sebuah textField.
- public class frmEventHandling extends javax.swing.JFrame {
- public frmEventHandling() {
- initComponents();
- }
- // <editor-fold defaultstate="collapsed" desc="Generated Code">
- private void initComponents() {
- jTextField1 = new javax.swing.JTextField();
- jTextField1.setText("jTextField1");
- jTextField1.addKeyListener(new java.awt.event.KeyAdapter() {
- public void keyPressed(java.awt.event.KeyEvent evt) {
- jTextField1KeyPressed(evt);
- }
- });
- }// </editor-fold>
- private void jTextField1KeyPressed(java.awt.event.KeyEvent evt) {
- // TODO add your handling code here:
- }
- // Variables declaration - do not modify
- private javax.swing.JTextField jTextField1;
- // End of variables declaration
- }
C. CONTOH DESAIN INTERFACE
Sekarang saya akan mengajak anda untuk memulai mendesain tampilan (interface) program anda. Untuk itu anda perlu membuat project baru dan menambahkan frame form pada project anda. Jika anda lupa bagaimana membuat project dan menambahkan frame form silakan anda buka lagi bab 2 pada buku ini.
Dalam contoh ini saya akan membuat sebuah system informasi akademik yang mana aplikasi ini mempunyai fasilitas FRS (Formulir Rencana Study), KHS (Kartu Hasil Study), Jadwal kuliah dsb. Aplikasi ini terdapat tiga buah form yaitu :
- Form Menu : dalam form ini terdapat menu dengan rincian sebagai berikut
- Menu Master (Mahasiswa, Dosen, Matakuliah, Jadwal Kuliah)
- Menu Transaksi(Formulir Rencana Study (FRS), Formulir Hasil Study (KHS))
- Menu Laporan(Laporan data mahasiswa, Laporan FRS, Laporan KHS, dsb.)
- Form Master Mahasiswa : dalam form ini terdapat beberapa textField yang berfungsi untuk entry data NIM (Nomor Induk Mahasiswa, Nama, Alamat, Gender, Tgl Lahir, Agama, Jurusan)
- Form FRS : dalam form ini terdapat beberapa textField beserta table yang berfungsi untuk entry data NIM dan mata kuliah yang akan diambil oleh mahasiswa yang bersangkutan.
Form Menu
Langkah 1 :
Buatlah form menu seperti gambar berikut ini :

Gambar 9. Form Main Menu
Keterangan :- Gunakan Obyek pada Swing Menus
- Menu Bar gunakan JMenuBar
- Submenu gunakan JMenuItem
- Garis pemisah gunakan JSeparator
Langkah 2 :
Rubah semua name sesuai dengan masing-masing object, misalnya untuk menu master ubah menjadi JMenuMaster, sedangkan untuk sub menu master mahasiswa ubah menjadi JMenuItemMahasiswa. Untuk merubah name ini silakan anda buka window Properties pilih tabCode cari field Variable Name kemudian silakan diubah value-nya.
Langkah 3 :
Tambahkan event pada menu item master mahasiswa sehingga nanti akan muncul deklarasi event seperti dibawah ini
- private void jMenuItemMahasiswaActionPerformed(java.awt.event.ActionEvent evt) {
- // TODO add your handling code here:
- }
Langkah 1 :
Buatlah InternalFrame. Untuk membuat InternalFrame pada project tersebut, silakan anda click kanan dipackage, pilih New->JInternalFrame Form. Tambahkan komponen JTextField, JTextArea, JComboBox, JRadioButton dan JButton. Untuk lebih jelasnya silakan anda lihat gambar dibawah ini.

Gambar 10. InternalFrame Master Mahasiswa
Langkah 2 :Rubah semua name sesuai dengan masing-masing object, misalnya untuk JTextField NIM ubah menjadi txtNIM, untuk radio button pria ubah menjadi rdoPria, combobox agama ubah menjadi cmbAgama, button simpan ubah menjadi btnSimpan dan seterusnya.
Langkah 3 :
Pada window properties anda check property closabe, iconfiable, resizeable dan ubah property tittle menjadi Master Mahasiswa
Form Transaksi FRS
Langkah 1 :
Buatlah InternalFrame. Tambahkan komponen JTextField, JTable dan JButton. Untuk lebih jelasnya silakan anda lihat gambar dibawah ini

Gambar 11. InternalFrame Transaksi FRS
Langkah 2 :Setelah anda selesai mengerjakan desain aplikasi sekarang silakan anda buka kembali form menu kemudian anda lihat ke bagian source. Modifikasi source code anda seperti terlihat dibawah ini.
- private void jMenuItemMahasiswaActionPerformed(java.awt.event.ActionEvent evt) {
- // TODO add your handling code here:
- frmMasterMahasiswa mhs = new frmMasterMahasiswa();
- this.add(mhs);
- mhs.setVisible(true);
- }
- private void jMenuItemFRSActionPerformed(java.awt.event.ActionEvent evt) {
- // TODO add your handling code here:
- frmFRS frs = new frmFRS();
- this.add(frs);
- frs.setVisible(true);
- }

Gambar 12. Hasil Eksekusi Aplikasi
Sebagai latihan silakan anda desain form master dosen, matakuliah jadwal kuliah dan transaksi KHS.Sampai disini saya harap anda tidak bingung dalam memahami pemrograman GUI beserta deklarasi event handling. Dalam prakteknya anda tidak perlu harus berpikir keras, anda hanya perlu mengarahkan mouse anda dan klak klik tombolnya saja serta tidak lupa “sruput dulu kopinya”
Tutorial Membangun Sistem Database

Operasi database adalah salah satu fasilitas yang mutlak harus ada dalam sebuah framework MVC. Pada tulisan kali saya akan mengulas bagaimana membuat class Model dan fungsi-fungsi untuk operasi database.
Dalam pemrograman PHP terdapat beberapa cara untuk mengoperasikan database khususnya mysql, antara lain menggunakan metode klasik yaitu dengan memanfaatkan fungsi bawaan (mysql_connect, mysql_select_db, mysql_query). Codeigniter merupakan salah satu contoh framework MVC yang memanfaatkan operasi klasik ini(http://www.codeigniter.com).
Selain operasi database klasik diatas, saat ini sudah tersedia modul PHP Data Object (PDO). PDO didesain mampu men-support banyak engine database misalnya MySql, Oracle, PostgresSQL, Ms Sql server dsb. PDO mendukung pemrograman berorientasi object (OOP), sehingga syntax pemrogramannya lebih sistematis dan mudah digunakan. Sayangnya tidak semua web hosting telah mengaktifkan modul PDO, bahkan ada juga web hosting yang tidak menyediakan modul PDO ini. Salah satu framework yang memanfaatkan operasi database PDO adalah Obullo (http://www.obullo.com).
Memang operasi database klasik maupun PDO mempunyai kelebihan dan kelemahan. Oleh karena itu pada framework ini sengaja saya sediakan dua-duanya. Jadi nantinya programmer bisa memilih, bisa menggunakan operasi database klasik atau PDO.
Tole : "Pakdhe..pakdhe, kalau framework sampean ini mendukung dua operasi database apa tidak semakin berat kerja server-nya Pakdhe?"
Pakdhe : "Ya tidaklah Tole, kan nantinya programmer milih salah satu, dan ketika salah satu operasi tadi dipilih operasi yang lain tidak di-load, jadi tidak berat kerja server-nya"
Tole :"O..gitu to Pakdhe,ya sudah Pakdhe, tak simaknya dulu ntar nanti kita buktikan ya Pakdhe...kerja servernya berat apa tidak"
Pada implementasinya, sengaja saya gunakan design pattern factory, adapter dan driver. Hal ini bertujuan agar framework ini fleksibel dan mudah untuk digunakan oleh programmer yang lain. Untuk lebih memudahkan dalam pembuatan program, sengaja operasi database ini saya letakkan pada folder system/database. Adapun susunan direktori operasi database ini, terlihat seperti gambar disamping ini.Driver database yang saya sediakan hanya mysql. Dilain waktu saya akan menambahkan driver untuk database lain misalnya Oracle, MS SQL Server, Postgres SQL dan sebagainya. Tentunya masing-masing driver tersebut mendukung operasi klasik dan PDO.
1. Factory
Jika kita baca di bukunya Gang of Four "Design Patterns: Elements of Reusable Object-Oriented Software", factory ini tergolong dalam kreasional desain. Factory tersebut perlu kita buat ketika kita perlu mendefinisikan sebuah tipe data/class (kita sebut kreator) yang berfungsi untuk membuat objek dari tipe data/class yang berbeda (kita sebut produk). Tujuannya adalah agar pengguna tidak perlu capek-capek mempelajari class produk tadi. Pada framework ini yang disebut factory adalah class db_factory sedangkan yang disebut class produk adalah db_adapter. Dalam literatur lain, saya menemukan ada sistem dependency injection. Sistem dependency injection ini lebih sederhana dibandingkan dengan factory. Oleh karena itu dalam pembuatan program kali ini saya memanfaatkan dependency injection dalam membangun class database factory. Dibawah ini contoh source code class db_factory
- <?php defined('SYS') or exit('Access Denied!');
- /*
- * Becak MVC Framework version 1.0
- *
- * File : db_factory.php
- * Directory : system/database
- * Author : Eko Heri Susanto
- * Description : penyedia koneksi ke bermacam-macam database
- */
- class db_factory {
- public static function callDB($db_name){
- include APP.'config'.DS.'database'.PHP_EXT;
- if(!is_array($config[$db_name]))
- throw new Exception("Please set a valid database driver from config database file");
- $driver_class = strtolower($config[$db_name]['type']);
- include SYS.'database'.DS.'driver'.DS.$driver_class.PHP_EXT;
- include SYS.'database'.DS.'db_adapter'.PHP_EXT;
- $driver = new $driver_class($config[$db_name]);
- $adapter = new db_adapter($driver);
- return $adapter;
- }//end callDB
- }//end class
- ?>
Telah saya sebutkan diatas, operasi database dalam framework ini mendukung banyak driver database. (mysql, oracle ms-sql server dsb). Sebenarnya masing-masing driver tersebut cara penggunaannya tentu berbeda antara satu dengan yang lain. Oleh karena itu kita perlu design pattern adapter agar pengguna tidak perlu memikirkan bagaimana cara mengoperasikan masing-masing driver tersebut.
Gambar disamping menunjukkan desain sistem db_factory dan db_adapter yang sudah saya jelaskan sebelumnya.Fungsi/method callDB pada class db_factory ini nantinya akan dipanggil pada fungsi database yang ada di class loader. Untuk lebih jelasnya silakan anda lihat contoh source code yang saya sertakan. Ingat class loader ini terdapat pada folder core.
Coba anda perhatikan method yang terdapat pada db_adapter, disitu terdapat metode-metode untuk mengoparesikan database seperti pencarian (select), penambahan (insert), perubahan (update) dan penghapusan (delete) data. Saya temukan dibeberapa contoh framework, method-method ini ada yang menyebutnya dengan istilah active record. Dibeberapa buku design pattern active record ini sudah diakui sebagai salah satu pola dalam design pattern. Dibawah ini contoh source code class db_adapter
- <?php defined('SYS') or exit('Access Denied!');
- /*
- * Becak MVC Framework version 1.0
- *
- * File : db_adapter.php
- * Directory : system/database
- * Author : Eko Heri Susanto
- * Description : fungsi common (CRUD) untuk database
- */
- class db_adapter {
- private $driver = null;
- private $sql = '';
- public function __construct($driver){
- $this->driver = $driver;
- $this->driver->connect();
- }
- public function __destruct(){
- $this->driver->disconnect();
- }
- public function select($sql){
- $this->sql = $sql;
- }
- public function fetch_array(){
- return $this->driver->results($this->sql, 'array');
- }
- public function fetch_object(){
- return $this->driver->results($this->sql, 'object');
- }
- public function query($sql){
- return $this->driver->query($sql);
- }
- public function insert($table, $data){
- $sql = "INSERT INTO ".$table;
- $multi_rows = FALSE;
- foreach($data as $key => $val){
- if(!is_array($val) ) {
- $fields[$key] = $key;
- $rows[$key] = $this->escape($val);
- }else {
- $multi_rows = TRUE;
- foreach($val as $skey => $sval){
- $fields[$skey] = $skey;
- $row[$skey] = $this->escape($sval);
- }
- $rows[$key] = "(".implode(', ', $row).")";
- }
- }
- $sql .= " (". implode(', ', $fields).") VALUES ";
- if(!$multi_rows) $sql .= "(". implode(', ', $rows).");";
- else $sql .= implode(', ', $rows).";";
- return $this->driver->query($sql);
- }
- public function update($table, $data, $where=NULL){
- $sql = "UPDATE ".$table." SET ";
- $values = array();
- foreach($data as $key => $val){
- $values[$key] = $key." = ".$this->escape($val);
- }
- $sql .= implode(", ", $values);
- if(is_array($where)){
- $filter = array();
- foreach($where as $key => $val){
- $filter[$key] = "(".$key." = ".$this->escape($val).")";
- }
- $sql .= " WHERE ".implode(" AND ", $filter);
- }
- return $this->driver->query($sql);
- }
- public function delete($table, $where=NULL){
- $sql = "DELETE FROM ".$table;
- if(is_array($where)){
- $filter = array();
- foreach($where as $key => $val){
- $filter[$key] = "(".$key." = ".$this->escape($val).")";
- }
- $sql .= " WHERE ".implode(" AND ", $filter);
- }
- return $this->driver->query($sql);
- }
- private function escape($str)
- {
- if(is_string($str)){
- return "'".str_replace("'", "''",$str)."'";
- }
- if(is_integer($str))
- return (int)$str;
- if(is_double($str))
- return (double)$str;
- if(is_float($str))
- return (float)$str;
- if(is_bool($str))
- return ($str === FALSE) ? 0 : 1;
- if(is_null($str))
- return 'NULL';
- }
- }//end class
- ?>
OK, selanjutnya mari kita lanjutkan untuk membahas class driver. Ingat class driver ini merupakan tata cara pengoperasian database yang sesungguhnya. Gambar dibawah ini menjelaskan struktur desain sistem driver database.

Berikut ini contoh source code class mysql (operasi database klasik)
- <?php defined('SYS') or exit('Access Denied!');
- /*
- * Becak MVC Framework version 1.0
- *
- * File : mysql.php
- * Directory : system/database/driver
- * Author : Eko Heri Susanto
- * Description : driver mysql
- */
- class mysql {
- private $conn;
- private $config;
- public function __construct($config){
- $this->config = $config;
- }
- public function connect() {
- extract($this->config);
- if(isset($this->conn)) return $this->conn;
- $this->conn = @mysql_connect($server,$user,$password, true) or show_error("Unable connect to mysql server.Please make sure the server, username or password specified in your Database.php file is valid.");
- @mysql_select_db($database, $this->conn) or show_error("Unable to select your default database name.Please make sure the database name specified in your Database.php file is valid.");
- }
- public function disconnect(){
- if(isset($this->conn)) {
- @mysql_close($this->conn);
- }
- }
- public function query($sql){
- $result = @mysql_query($sql, $this->conn);
- if (!$result) {
- show_error(mysql_error());
- }
- return $result;
- }
- public function results($query, $type = 'object'){
- $result = $this->query($query);
- $return = array();
- while ($row = @mysql_fetch_object($result)) {
- if($type == 'array')
- $return[] = (array) $row;
- else
- $return[] = $row;
- }
- @mysql_free_result($result);
- return @$return;
- }
- }//end class
- ?>
- <?php defined('SYS') or exit('Access Denied!');
- /*
- * Becak MVC Framework version 1.0
- *
- * File : pdo_mysql.php
- * Directory : system/database/driver
- * Author : Eko Heri Susanto
- * Description : driver PDO mysql
- */
- class mysql_pdo {
- private $conn;
- private $config;
- public function __construct($config){
- $this->config = $config;
- }
- public function connect() {
- extract($this->config);
- if(isset($this->conn)) return $this->conn;
- try{
- $this->conn = new PDO ("mysql:host=$server;dbname=$database",$user,$password);
- }catch(PDOException $e){
- echo __LINE__.$e->getMessage();
- }
- }
- public function disconnect(){
- if(isset($this->conn)) {
- $this->conn = null;
- }
- }
- public function query($sql){
- $result = null;
- try{
- $result = $this->conn->exec($sql) or print_r($this->conn->errorInfo());
- }catch(PDOException $e){
- echo __LINE__.$e->getMessage();
- }
- return $result;
- }
- public function results($query, $type = 'object'){
- $result = $this->conn->query($query) or print_r($this->conn->errorInfo());
- $result->setFetchMode(PDO::FETCH_ASSOC);
- return $result;
- }
- }//end class
- ?>
Pertama-tama anda siapkan dulu database-nya. Caranya buka phpmyadmin, kemudian buat database baru dengan nama blogkomputer. Setelah itu silakan anda buat table content seperti contoh dibawah ini.
- CREATE TABLE `blogkomputer`.`content` (
- `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
- `judul` VARCHAR( 100 ) NOT NULL ,
- `kategori` VARCHAR( 100 ) NOT NULL ,
- `isi` TEXT NOT NULL
- ) ENGINE = MYISAM ;
- INSERT INTO `blogkomputer`.`content` (`id`, `judul`, `kategori`, `isi`) VALUES (NULL, 'Ini adalah judul 1', 'pemrograman', 'isi sembarang data disini'), (NULL, 'ini adalah judul 2', 'becak framework', 'becak framework adalah framework MVC yang mendukung PHP 5');
- $config = array();
- // jika ingin menggunakan PDO ubah mejadi 'mysql_pdo'
- $config['db']['type'] = 'mysql';
- // jika anda menggunakan PDO, ubah menjadi '127.0.0.01'
- $config['db']['server'] = 'localhost';
- //sesuaikan dengan user yang ada di database mysql anda
- $config['db']['user'] = 'root';
- //sesuaikan dengan password mysql anda
- $config['db']['password'] = '';
- //sesuaikan dengan nama database yang anda buat
- $config['db']['database'] = 'blogkomputer';
Selamat mencoba, semoga ada guna dan manfaatnya...
Tiada ulasan:
Catat Ulasan