Flex Connect To MySQL Database

Untuk melakukan Query secara langsung dari Flex (Actions Script 3) ke database MySQL, salah satu pilihan nya dapat menggunakan library as3flexdb

as3flexdb adalah open source library untuk membuat adobe flex application konek ke database MySQL. Dan library as3flexdb memerlukan library amfphp (php server side script) di backend untuk melakukan akses ke database MySQL.

as3flexdb membuat adobe flex application dapat melakukan SQL pada Action Script 3 bukan menuliskan SQL di PHP.

Ilustrasi bisa diliat pada gambar dibawah ini:

image from http://ghalex.com/blog/tag/as3flexdb

Dibawah ini adalah tahapan instalasi nya

Tahap 1
Menyiapan database MySQL dan PHP, pada posting ini PHP yang digunakan adalah PHP Version Version 5.3.0 dan MySQL Version 5.1.35.

Untuk mendapatkan MySQL dan PHP secara paket:

• Pengguna windows anda bisa download XAMPP di http://www.apachefriends.org/en/xampp-windows.html a
• Pengguna linux bisa menggunakan LAMPP download di http://www.sph.umich.edu/csg/abecasis/LAMP/download/

Tahap 2
Download AMPPHP klik download kemudian ekstra di folder www/public html dari webserver, kemudian ubah nama folder nya menjadi seperti gambar dibawah ini:


Tahap 3
Ketikan pada browser http://localhost/amfphp/gateway.php bila instalasi ampphp berhasil maka pada browser akan muncul seperti dibawah ini

Klik untuk lihat lebih jelas

Tahap 4
Download as3flexdb di klik download kemudian ekstrak di lokasi mana saja.


Tahap 5
Buatlah satu buah Projek Flex, Seperti gambar di bawah ini :



Tahap 6
Copy-kan file as3flexdb_1.4.0.swc dari folder AS3FlexDBKit\bin seperti gambar dibawah ini:


lalu paste file as3flexdb_1.4.0.swc ke folder libs dari projek flex, seperti gambar dibawah ini:




Tahap 7
Copy-kan file services-config.xml dari folder AS3FlexDBKit-version\src\FlexDBTests\src seperti gambar dibawah ini:


lalu paste file services-config.xml ke folder src dari projek flex, seperti gambar dibawah ini:



Tahap 8
Lakukan compile fileservices-config.xml dengan cara klik menu Project->Properties->Flex Compiler seperti gambar dibawah ini

Klik untuk lihat lebih jelas

Tahap 9
Copy-kan file database.php dari folder AS3FlexDBKit\src\FlexDB\services seperti gambar dibawah ini:


kemudian di public html/www membuat folder mysql di amfphp/services/ dan paste file database.php ke amfphp/services/mysql seperti gambar dibawah ini:




Tahap 10
Menuliskan script untuk melakukan SQL Query ke database MySQL. Sebagai contoh tabel yang akan dilakukan query adalah tabel users, dengan struktur tabel sebagai berikut:

CREATE TABLE tbl_users (
id INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
fname VARCHAR( 255 ) NOT NULL ,
lname VARCHAR( 255 ) NOT NULL
) ENGINE = innodb;

Dengan Query sebagai berikut:

select * from tbl_users

Dengan Koneksi database

host: localhost
user: root
password: pass

Untuk melakukan query dapat dilakukan menggunakn MXML dan Action Script 3.

1. Menggunakan MXML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:phi="phi.db.*" layout="absolute" >

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:phi="phi.db.*" layout="absolute">
<phi:ConnectionData id="c1" name="mxml_conn1" host="localhost" db="test" username="root" password="pass" />
<phi:Database id="db1" connection="{c1}" />
<phi:Query id="q1" database="{db1}" q="select * from tbl_users" />
<phi:QueryExecute id="q1ex" query="{q1}" />

<mx:DataGrid id="dg1" width="100%" height="100%" dataProvider="{q1.Records}">
<mx:columns>
<mx:DataGridColumn dataField="fname" headerText="First Name"/>
<mx:DataGridColumn dataField="lname" headerText="Last Name"/>
</mx:columns>
</mx:DataGrid>

</mx:Application>

bila di eksekusi akan muncul seperti gambar dibawah ini:

Klik untuk lihat lebih jelas

2. Menggunakan Action Script 3

// ActionScript file
/** Database */
import mx.collections.ArrayCollection;

import phi.db.Database;
import phi.db.Query;
import phi.interfaces.IDatabase;
import phi.interfaces.IQuery;
/** */

private var db:IDatabase;
private var query:IQuery;

[Bindable] public var users:ArrayCollection;

/**
* This will be call when Application creation
* has complete.
*/
private function onCreateComplete():void
{
db = Database.getInstance();
query = new Query();

db.connect("conn1", "root", "pass", "localhost", "test", true);
query.connect("conn1", db);

}

public function onBtnClick():void
{
query.addEventListener(Query.QUERY_END, queryEnd);
query.execute("SELECT * FROM users");
}

private function queryEnd(evt:Object):void
{
users = query.getRecords();
}

kemudian pada pada tampilan aplikasi tambahkan grid seperti di bawah ini:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:phi="phi.db.*" layout="absolute" creationComplete="this.onCreateComplete()">
<mx:Script source="getData.as" />

<mx:VBox width="100%" height="90%">
<mx:DataGrid id="dataGrid" width="100%" height="100%" dataProvider="{users}" selectable="true">
<mx:columns>
<mx:DataGridColumn dataField="fname" headerText="First Name"/>
<mx:DataGridColumn dataField="lname" headerText="Last Name"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="Load from Database" click="this.onBtnClick()" />
</mx:VBox>

</mx:Application>

bila di eksekusi akan muncul seperti gambar dibwah ini:

Klik untuk lihat lebih jelas

nb:

• Bila menggunakan UTF8 MySQL silakan klik link AS3FlexDB and UTF8
• File database.php yang ada di as3flexdb menggunakan api php mysql yang mana pada php version 5.3.x adalah deprecation. Silakan download file database.php yang menggunakan api php mysqli di klik download