Kolaborasi Flex dan zend 1.9.0
Akhirnya, setelah sekian lama zend 1.8 ke atas dapat dikolaborasikan dengan Flex 3. Untuk yang zend 1.8, yang menjadi masalah bukan di sisi zend-nya, tapi di sisi library amf nya. Bagi yang menggunakan zend 1.8, bisa downgrade ke amf versi 1.7 ( zend tetap pakai 1.8 ), atau upgrade ke zend 1.9.0 sekalian.
Struktur directory framework untuk kebutuhan koneksi ke zend 1.9.0 berbeda dari sebelumnya, dapat dilihat dari gambar berikut :
Di sini kita tidak butuh controller, karena sudah digantikan oleh service.
Isi file configs\application.ini :
[production]
phpSettings.display_startup_errors = 0
phpSettings.display_errors = 0
includePaths.library = APPLICATION_PATH “/../library”
bootstrap.path = APPLICATION_PATH “/Bootstrap.php”
bootstrap.class = “Bootstrap”
resources.db.adapter = “PDO_MYSQL”
resources.db.params.host = “localhost”
resources.db.params.username = “root”
resources.db.params.password = “”
resources.db.params.dbname = “test”
[staging : production]
resources.db.params.dbname = “test”
[testing : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1
resources.db.params.dbname = “test”
[development : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1
resources.db.params.dbname = “test”
Untuk Bootstrap file :
<?php
class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
protected function _initAutoload()
{
$autoloader = new Zend_Application_Module_Autoloader(array(
‘namespace’ => ”,
‘basePath’ => dirname(__FILE__),
));
return $autoloader;
}
}
Untuk contoh isi file models : (asumsi ada table bernama testaa, field-fieldnya id dan nama)
<?php
class Model_Testaa extends Zend_Db_Table
{
protected $_name = “testaa”;
protected $_primary = “id”;
}
Untuk penjabaran field-field table, kita definisikan di class TestaaClass (contoh) di directory services :
<?php
class TestaaClass
{
var $id ;
var $nama;
}
Nah, untuk servicenya :
<?php
require_once(‘TestaaClass.php’);
class TestaaService {
private $testaa;
public function __construct()
{
$this->testaa = new Model_Testaa();
}
public function getData()
{
$result = array();
foreach($this->testaa->fetchAll() as $key=>$val)
{
$testaaobj = new TestaaClass();
$testaaobj->id = $val->id;
$testaaobj->nama = $val->nama;
$result[] = $testaaobj;
}
return $result;
}
public function removeData($idField)
{
$currentTestaa = $this->testaa->find($idField)->current();
$currentTestaa->delete();
}
public function addData($namanya)
{
$data = array(‘nama’ =>$namanya);
$this->testaa->insert($data);
}
public function editData($id, $namanya)
{
$row = $this->testaa->find($id)->current();
$row->nama = $namanya;
$row->save();
}
}
Untuk index.php :
<?php
defined(‘APPLICATION_PATH’) || define(‘APPLICATION_PATH’, realpath(dirname(__FILE__) . ‘/../application’));
defined(‘APPLICATION_ENV’) || define(‘APPLICATION_ENV’, (getenv(‘APPLICATION_ENV’) ? getenv(‘APPLICATION_ENV’) : ‘production’));
set_include_path(implode(PATH_SEPARATOR, array(
realpath(APPLICATION_PATH . ‘/../library’),
get_include_path(),
)));
require_once ‘Zend/Loader/Autoloader.php’;
$autoloader = Zend_Loader_Autoloader::getInstance();
$application = new Zend_Application(
APPLICATION_ENV,
APPLICATION_PATH . ‘/configs/application.ini’
);
$application->bootstrap();
$server = new Zend_Amf_Server();
$server->addDirectory(‘./services/’);
echo($server->handle());
Nah, sekarang, untuk di flex nya, struktur nya sama seperti pada dokumentasi sebelumnya :
Untuk konfigurasi service-config.xml nya :
<?xml version=”1.0″ encoding=”UTF-8″?>
<services-config>
<services>
<service id=”amfphp-flashremoting-service” class=”flex.messaging.services.RemotingService” messageTypes=”flex.messaging.messages.RemotingMessage”>
<destination id=”zendamf”>
<channels>
<channel ref=”myamfphp”/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition id=”myamfphp” class=”mx.messaging.channels.AMFChannel”>
<endpoint uri=”../zf190_amf/public/index.php” class=”flex.messaging.endpoints.AMFEndpoint”/>
</channel-definition>
</channels>
</services-config>
Terakhir, isi source mxml kita :
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical”
creationComplete=”getDataExample()”>
<mx:RemoteObject id=”remoteExample” destination=”zendamf” source=”TestaaService”
showBusyCursor=”true” fault=”faultListener(event)”>
<mx:method name=”getData” result=”getDataListener(event)”/>
</mx:RemoteObject>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
//siapkan array
[Bindable]
private var exampledata :ArrayCollection;
[Bindable]
private var idnya :Number;
private function getDataListener(event:ResultEvent):void
{
exampledata = new ArrayCollection(event.result as Array) ;
}
private function faultListener(event:FaultEvent):void
{
Alert.show(event.fault.message, “Error”);
}
private function getDataExample():void
{
//load data
remoteExample.getData();
}
]]>
</mx:Script>
<mx:DataGrid id=”myGrid” dataProvider=”{exampledata}”>
<mx:columns>
<mx:DataGridColumn headerText=”id” dataField=”id” draggable=”true” />
<mx:DataGridColumn headerText=”nama” dataField=”nama” draggable=”true”/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Hasil akhirnya :
Kalau dicoba seperti ini sudah jalan, berarti kita sudah berhasil 🙂
Kolaborasi Flex dan Zend (Zend_Amf_Server)
Kolaborasi Flex dengan zend bisa dengan berbagai cara, salah satunya kita bisa gunakan zend_amf sebagai jembatannya, zend_db sebagai library koneksi db nya. Berikut cara yg bisa kita lakukan dengan menggunakan zend_amf.
Pertama, kita siapkan dulu zend kita, sehingga tersusun seperti simulasi gambar berikut (tergantung documentroot masing2) :
— di sini, documentroot saya berada di /media/disk-1/web —
direktori config berisi file konfigurasi (terutama dengan database dan management environment. contoh isi file nya seperti berikut :
[production] database.adapter = "PDO_MYSQL" database.params.host = "localhost" database.params.dbname = "dokumentasiflexzend" database.params.username = "root" database.params.password = "" [development : production] database.adapter = "PDO_MYSQL" database.params.dbname = "dokumentasiflexzend" [testing : production] database.adapter = "PDO_MYSQL" database.params.dbname = "dokumentasiflexzend"
direktori library berisi library zend 1.7.4
direktori models berisi model logic program, biasanya default nya mendefinisikan relasi table (walaupun sebenarnya bisa juga digunakan untuk kebutuhan logic yg lain)
contoh isi filenya : (ceritanya, kita punya table exampletable, field2nya id dan name)
fetchAll();
} else {
$fetch = $this->fetchAll("name like '%$keyword%'");
}
return $fetch;
}
}
?>
direktori services , untuk koneksitas terhadap flex, di sini saya buat contoh dua kelas, yakni ExampletableClass.php (pendefinisian field-field table) dan ExampletableService.php untuk penghubung antara models zend dan flex.
contoh source code ExampletableClass.php :
contoh source code ExampletableService.php
Exampletable = new Exampletable();
}
public function getData($keyword=null)
{
$result = array();
$fetch = $this->Exampletable->getAll($keyword);
foreach($fetch as $key=>$val)
{
$ExampletableObj = new ExampletableClass();
$ExampletableObj->id = $val->id;
$ExampletableObj->name = $val->name;
$result[] = $ExampletableObj;
}
return $result;
}
}
?>
File includer.php berisi source load konfigurasi :
database);
Zend_Db_Table_Abstract::setDefaultAdapter($dbAdapter);
$registry = Zend_Registry::getInstance();
$registry->configuration = $configuration;
$registry->dbAdapter = $dbAdapter;
$locale = new Zend_Locale('id');
Zend_Registry::set('Zend_Locale', $locale);
?>
Nah, file index.php berisi source untuk memanggil zend_amf :
addDirectory('./services/');
echo($server -> handle());
OK, Let’s go to Flex :
Pertama : Buat sebuah project flex :
Biasakan membuat project location tidak berada di documentroot kita, supaya aman. dan supaya load data cuma flex saja (tidak campur dengan zend).
Setelah itu , klik Next
maka akan tampil seperti berikut :
PERHATIKAN OUTPUT folder, jangan sampai menimpa aplikasi kita yang lain.
Klik Next dan Finish.
maka kita akan menjumpai direktori debugging seperti ini :
Langkah selanjutnya adalah membuat file konfigurasi berbentuk xml untuk compiler setting sehingga tampil seperti berikut :
contoh isi file service-config.xml sebagai berikut :
*
Nah, sekarang, setting compilernya , dengan cara, klik kanan project kita, klik properties, pilih flex compiler, tambahkan -services “services-config.xml” :
klik OK
Let’s coding in flex :
<!-- remote object untuk meremote service -->
Jika tampil seperti berikut, berarti kita sudah berhasil 🙂 :
Selamat mencoba .
Meload data dari PHP ke Flex
Tentunya capek donk, kalau data kita ga dinamis, alias kita simpan dalam bentuk format XML biasa yang harus hardcode kita edit manual, nah, kali ini saya akan membahas tentang gimana sih caranya load data dari Array PHP ke flex, tetep sih dalam format XML, cuman kali ini isi datanya bisa dinamis. OK, pertamax, kita siapkan dulu datanya, saya beri contoh, data disimpan dalam sebuah table bernama books, field-fieldnya antara lain: isbn, title, dan author, kita isi beberapa record sebagai contoh.
Nah, setelah kita buat project kita, boleh pakai Netbeans, Eclipse, maupun yang lain. Saya beri contoh struktur source-nya seperti ini :
File MXML utama kita beri nama misalnya TestPHP.mxml. Pertama, kita siapkan PHP kita. berikut script untuk Koneksi.class.php :
<?php
class Koneksi {
public function Koneksi() {
mysql_connect("localhost","root","");
mysql_select_db("testFlexPHP");
}
public function listRecord($query) {
$lister = mysql_query($query);
$data = array();
while ($row = mysql_fetch_array($lister)) {
$data[] = $row;
}
return $data;
}
public function execQuery($query) {
return mysql_query($query);
}
}
?>
Berikutnya, kita extends di kelas Books.class.php
<?php
include "../PHPs/Koneksi.class.php";
class Books extends Koneksi {
public function Books() {
parent::Koneksi();
}
public function Edit($isbn, $title, $author) {
parent::execQuery("update books set title='$title', author='$author' where isbn='$isbn'");
}
//tambahkan fungsi2 lain yg dibutuhkan...
public function Add() {
}
}
?>
Kita siapkan pula script PHP untuk update data:
<?php include "../PHPs/Books.class.php"; $book = new Books(); $book->Edit($_POST['isbn'], $_POST['title'], $_POST['author']); ?>
Yes, sekarang, masuk ke PHP format XML kita (sample.xml.php) :
<?php header("Content-type: text/xml");
include "../PHPs/Books.class.php";
$book = new Books();
$data = $book->listRecord("select * from books");
?>
<books>
<?php foreach($data as $key=>$row){ ?>
<item isbn="<?=$row['isbn']?>">
<title><?=$row['title']?></title>
<author><?=$row['author']?></author>
</item>
<?php } ?>
</books>
Untuk meload data, kita siapkan fungsi actionscript yang akan digunakan oleh MXML untuk meload data. (book.as)
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var dataku :ArrayCollection;
private function viewData(event:ResultEvent):void {
dataku = event.result.books.item;
}
Nah, ceritanya kan meload data yang bersifat dinamic dari PHP, di file mxml kita,kita butuh component HttpService untuk memanggil method actionscript yang memanggil data php dalam dalam format XML kita.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
initialize="sampleService.send()">
<mx:Script>
<![CDATA[
//digunakan untuk post form data pada saat update
private function send_data():void {
kirimEdit.send();
//refresh hasil data
sampleService.send();
}
]]>
</mx:Script>
<mx:Script source="ActionScripts/book.as"/>
<mx:HTTPService id="sampleService" url="XMLs/sample.xml.php" result="viewData(event)"/>
<mx:HTTPService id="kirimEdit" url="PHPs/UpdateBook.php" method="POST">
<mx:request xmlns="">
<title>
{title.text}
</title>
<author>
{author.text}
</author>
<isbn>
{isbn.text}
</isbn>
</mx:request>
</mx:HTTPService>
<mx:Panel title="contoh satu record" width="500" height="70" horizontalAlign="center">
<mx:HBox>
<mx:Label text="contoh pemanggilan satu record (Record ke 2) : "/>
<mx:Text text="{dataku.getItemAt(1).title}"/>
</mx:HBox>
</mx:Panel>
<mx:Panel title="contoh beberapa record" width="400" height="500" horizontalAlign="center">
<mx:DataGrid dataProvider="{dataku}" id="gridBuku">
<mx:columns>
<mx:DataGridColumn headerText="isbn" dataField="isbn"/>
<mx:DataGridColumn headerText="Title" dataField="title"/>
<mx:DataGridColumn headerText="Author" dataField="author"/>
</mx:columns>
</mx:DataGrid>
<mx:Form>
<mx:FormItem label="ISBN">
<mx:TextInput text="{gridBuku.selectedItem.isbn}" editable="false" id="isbn"/>
</mx:FormItem>
<mx:FormItem label="Title">
<mx:TextInput text="{gridBuku.selectedItem.title}" id="title"/>
</mx:FormItem>
<mx:FormItem label="Author">
<mx:TextInput text="{gridBuku.selectedItem.author}" id="author"/>
</mx:FormItem>
<mx:Button click="send_data()" label="Update"/>
</mx:Form>
</mx:Panel>
</mx:Application>
Hasil nya seperti ini :
load XML data (Simple)
Saya menulis tentang Flex kali ini bukan untuk memberikan tutorial lho, melainkan hanya untuk bisa saling berbagi (sharing) apa yang baru saya pelajari, karena emang belajarnya baru dari kemarin, he..he.. (jadi kalau mau nanya, mending nanya udah ada yang punya apa belum ya, he…he.., soalnya kalau nanya tentang Flex, takut belum bisa kejawab, 🙂 )
Ok, sekarang fokus ke masalah, kebanyakan Flex meload data dengan format XML, karena kalau format Binary, jika user menginginkan pergantian tampilan, maka perlu recoding di bagian back end, maka saya lebih fokuskan untuk membahas tentang load data via XML – nya ( bilang saja yang baru bisa baru itu, xi..xi..xi… , 🙂 )
Sekarang kita siapkan project kita, misal kita beri nama TestGridXML , karena kita akan fokus pada data, maka kita siapkan dulu datanya. Di sini saya menyimpan data format XML di actionscript file nya, biar lebih rapi, buat aja folder untuk menyimpan file-file actionscript di bawah folder src, seperti pada gambar berikut :
Berikut contoh code program XMLDataTest.as :
// ActionScript file
//digunakan agar variable bisa diakses langsung oleh komponen
[Bindable]
private var dataPenduduk:XML =
<penduduk>
<penduduk no="1">
<nama>Abdul Malik Ikhsan</nama>
<alamat>Jalan Pamekar</alamat>
</penduduk>
<penduduk no="2">
<nama>samsonasik</nama>
<alamat>Jalan Burangrang</alamat>
</penduduk>
</penduduk>
Sekarang, tinggal buat view nya deh :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" verticalAlign="middle">
<mx:Script source="ActionScriptFilez/XmlDataTest.as"/>
<mx:Panel title="Test Grid Application" width="350" horizontalAlign="center">
<mx:DataGrid dataProvider="{dataPenduduk.penduduk}">
<mx:columns>
<mx:DataGridColumn headerText="No." dataField="@no"/>
<mx:DataGridColumn headerText="Nama" dataField="nama"/>
<mx:DataGridColumn headerText="Alamat" dataField="alamat"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>
Inilah hasilnya :
Welcome to Abdul Malik Ikhsan's Blog 
leave a comment