Men-kawin-kan Flex dengan Symfony

Men-kawin-kan Flex dan Symfony Framework....
Perkembangan Aplikasi Webbase terus mengalami kemajuan, hingga muncul istilah RIA (Rich Internet Application), Salah satu pilihan untuk membuat RIA adalah menggunakan Adobe Flex, output dari Adobe Flex dapat berupa Web Application (runs in Flash Player) atau Desktop Application (runs in Adobe Air).

Symfony Framework adalah Framework PHP yang cukup banyak digunakan, Symfony Framework akan berperan sebagai Backend dari aplikasi (koneksi database dan logic aplikasi) sedangkan Adobe Flex akan beperan sebagai Frontend Aplikasi (UserInterface aplikasi dan Interaksi aplikasi dengan user).

Keterangan:
Versi Symfony yang digunakan adalah 1.2.
Versi Adobe Flex Builder 3 adalah yang digunakan.
Versi Database Mysql 5.1
Versi Adobe Flash Player yang digunakan adalah versi 10

Experimen yang akan dibuat adalah mengambil data dari database mysql kemudian menampilkan datanya digrid flex, dan hasilnya akan seperti gambar dibawah ini:

Pada aplikasi ini terbagai menjadi dua, yaitu pada sisi backend (symfony) dan pada sisi frontend (adobe flex).




Tahap 1 (Symfony).
Download plugin Amf (amf adalah plugin yang akan menjadi bridge antara symfony dan flex) di http://www.symfony-project.org/plugins/sfAmfPlugin/1_4_2

Tahap 2 (Symfony)
Ekstrak plugin amf di folder lib projek symfony sf_root_dir/plugin dan ubah nama plugin menjadi sfAmfPlugin

setelah rename nama plugin lakukan clear-cache symfony.

php symfony cc

Tahap 3 (Symfony)
Membuat sebuah module untuk handle request dari flex, sebagai contoh diberi nama amfgateway


kemudian pada action modul amfgateway tuliskan kode dibawah ini:

class amfgatewayActions extends sfActions
{
/**
* Executes index action
*
* @param sfRequest $request A request object
*/
public function executeIndex(sfWebRequest $request) {
$this->setLayout(false);

$gateway = new sfAmfGateway();
$response = sfContext::GetInstance()->getResponse();
$response->setContent($gateway->service());
return sfView::NONE;
}

}

Tahap 4 (Symfony)
Lakukan seting database di symfony, pada posting ini conection yang digunakan adalah Doctrine

Tuliskan konfigurasi dibawah ini

dev:
doctrine:
class:        sfDoctrineDatabase
param:
#classname:  DebugPDO
dsn:        mysql:dbname=symfBrige;host=127.0.0.1
username:   root
password:   pass
encoding:   utf8
persistent: true
pooling:    true

prod:
doctrine:
class:        sfDoctrineDatabase
param:
#classname:  DebugPDO
dsn:        mysql:dbname=symfBrige;host=127.0.0.1
username:   root
password:   pass
encoding:   utf8
persistent: true
pooling:    true

Nama database, host, username, password dapat disesuaikan dengan yang dibutuhkan.

Tahap 5 (Symfony)
Membuat service untuk di akses oleh flex, di folder sf_root_dir/lib

gambar diatas adalah membuat sebuah service bernama Telepon. sebuah service diwakil oleh sebuah folder, dan didalam folder bisa membuat banyak service sebanyak yang dibutuhkan.

Tahap 6 (Symfony)
Setelah membuat service, selanjutnya adalah membuat isi service, seperti gambar dibawah ini:


Untuk pembrian nama isi service bisa apa saja, dan sebagai contoh adalah TeleponService.class.php. kemudian tulis kode dibawah ini pada file tersebut:

<?php
class TeleponService extends sfAmfService {

public function getTelepon(){
$con = Doctrine_Manager::connection();
$query = "select * from tbl_telepon";
$data = $con->fetchBoth($query);
return $data;
}
}
?>

kode diatas adalah terdiri dari sebuah metod bername getTelepon yang berisikan query untuk mengambil data telepon dari table tbl_telepon kemudian menjadi return yang bertipe Array

dibawah ini adalah setruktur data dan sampel data dari table tbl_telepon

DROP TABLE IF EXISTS `tbl_telepon`;
CREATE TABLE `tbl_telepon` (
`kode` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
`telepon` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
PRIMARY KEY (`kode`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

-- ----------------------------
-- Records of tbl_telepon
-- ----------------------------
INSERT INTO `tbl_telepon` VALUES ('1', 'DENDIE', '081394236990');
INSERT INTO `tbl_telepon` VALUES ('2', 'ULLIE', '081394785454');
INSERT INTO `tbl_telepon` VALUES ('3', 'DAZ', '081234353534');

Tahap 7 (Flex)
Tahap pertama di Flex adalah membuat service yang akan menghubungkan antara flex dengan symfony, Buatlah sebuah file folder src dari projek flex, seperti gambar dibawah ini:


Kemudian tuliskan mxml seperti dibawah ini:

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service id="symfBrige-service"
class="flex.messaging.services.RemotingService"
messageTypes="flex.messaging.messages.RemotingMessage">
<destination id="symfBrige">
<channels>
<channel ref="symfBrige-channel"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition id="symfBrige-channel"
class="mx.messaging.channels.AMFChannel">
<endpoint uri="http://127.0.0.1/symfBrige/web/frontend_dev.php/amfgateway"
class="flex.messaging.endpoints.AMFEndpoint"/>
</channel-definition>
</channels>
</services-config>

dari kode diatas terdapat 2 bagian penting yaitu:
<destination id="symfBrige"> yaitu id service
<endpoint uri="http://127.0.0.1/symfBrige/web/frontend_dev.php/amfgateway"class="flex.messaging.endpoints.AMFEndpoint"/> adalah alamat url dari symfony framework dan gatewaye amf

Tahap 8 (Flex)
Lakukan Compile file service-config.mxml, dengan cara klik menu project->properties->Flex Compiler


Tahap 9 (Flex)
Buatlah sebuah file dengan nama symfBrige.as di folder src sebagai tempat untuk menuliskan script, seperti gambar dibawah ini:


lalu tuliskan code program di file symfBrige.as seperti dibawah ini

// ActionScript file
import flash.events.Event;

import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.remoting.RemoteObject;


[Bindable] public var vDataMaster:ArrayCollection = new ArrayCollection();

public function init():void{
this.getData();
}

public function getData():void{
var vRemote:RemoteObject = new RemoteObject('symfBrige');
vRemote.source = "Telepon.TeleponService";
vRemote.getTelepon();
vRemote.addEventListener(ResultEvent.RESULT,getDataResult);
vRemote.addEventListener(FaultEvent.FAULT,getDataFault);
}

public function getDataResult(event:ResultEvent):void{
var vData:Array = event.result as Array;
this.vDataMaster = new ArrayCollection(vData);
}

public function getDataFault(event:FaultEvent):void{
Alert.show(event.message.toString());
}

Tahap 10 (Flex)
pada file main aplikasi (pada contoh ini bernama symfBrige.mxml)


pada file symfBrige.mxml tuliskan code mxml dibawah ini:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="this.init()">

<mx:Script source="symfBrige.as" />
<mx:DataGrid x="19" y="28" dataProvider="{this.vDataMaster}" width="547">
<mx:columns>
<mx:DataGridColumn headerText="NAMA" dataField="nama"/>
<mx:DataGridColumn headerText="TELEPON" dataField="telepon"/>
</mx:columns>
</mx:DataGrid>

</mx:Application>

Selamat Mencoba