Sunday, January 3, 2010

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:





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:

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

27 comments:

  1. kalau mau insert,update dan delete gmn? thx

    ReplyDelete
  2. Wew,, Ini nni yang ane cari2,,,, Siip deh pak,,,

    ReplyDelete
  3. @anonim mirip-mirip aja kyk gitu bwt SQL Insert/Update/Delete nya... klw form flex mungkin ditulis di postingan berikutnya

    @ruangbaca sipp

    ReplyDelete
  4. makasih bnget pak.... q btuh ni....

    ReplyDelete
  5. kok q gagal coba ya pak...

    kok load trus .....???
    gmana solusinya..??

    ReplyDelete
  6. klw loading terus penyebabnya biasanya karena
    pathnya yang mengarahkan pada service as3flexdb http di file service-config.xml mungkin broken.

    coba dicek dulu amfgatenya pada browser "http://localhost/amfphp/gateway.php" broken atau tidak.

    ReplyDelete
  7. mau belajar flex mas, nyari tutor tapi flex dan oracle ada gak mas?

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. klw yang databasenya oracle saya belum tau...
    mungkin nanti.

    ReplyDelete
  10. thx tutorialny, g cobain dan bisa..

    btw, g mau nanya kl koneksiny melalui file php, kl yang punya luwh kan lngsng dari flexny. yg kemaren g liat tutorial koneksi dari file php gk bs jln, bingung jg salahny dimana =="

    kl ad tutorialny bole donk di share wkwk.. thx

    ReplyDelete
  11. cara melakukan menggunakan remote objek..
    saya pernah nulis menggunakan remote objek dgn AMFPHP menggunakan Symfony Framework di http://dendieisme.blogspot.com/2009/12/men-kawin-kan-flex-dengan-symfony.html

    atau penjelasanya lainnya bisa di liat di tp://www.sephiroth.it/tutorials/flashPHP/flex_remoteobject/page004.php

    ReplyDelete
  12. oo, yang itu g udah pernah cobain, udah bisa wkwk.. cuma g bingung yg ini connect php, coba liat ini deh

    http://cookbooks.adobe.com/post_Simple_MySQL_to_Flex-5561.html

    g bingung dan gk ngerti bagian ini :

    datalist = event.result.data.row;
    var rowcount:String = event.result.data.numrows;

    if(rowcount == '1'){ datalist.removeItemAt(1);
    ..

    kl ngerti ajarin y wkwk.., soalny dr kmrn cobain gk bisa muncul datany =="

    thx :)

    ReplyDelete
  13. btw, nanya lagi deh, pernah design web pake flex kan, kalo misalny g mau bikin halaman kyk di .net itu kan ad masterpage gt, bisa gk y di flex?? biar g gk design berulang2 gt

    ReplyDelete
  14. maksudnya masterpage itu sama dengan layout kah??
    betul begitu kah ??

    pake canvas dan panel...
    mudah-mudahan link ini ngebantu : http://learn.adobe.com/wiki/display/Flex/Combined+Layout

    ReplyDelete
  15. iy, untuk layoutny biar konsisten gt :)

    soalny g mauny itu gini, kl misalny g ada header, kan di halaman selanjut2ny ad header jg, g gk usah atur ulang, g pake template gt aj wkwk..

    bingung sendiri neh g huhu.. tutorialny jg bnyk banget, bingug dipelajarin satu2, udah biasa pake .net, kykny lbh gampank

    ReplyDelete
  16. mas mau tanya, mungkin gak kalo kita bikin form inputan query dari user, ntar query terus di proses, terus di tampilin di datagrid gitu..??

    baru belajar flex ni... :)

    ReplyDelete
  17. itu mungkin bisa di bikin mas...

    ReplyDelete
  18. mau tanya gimana caranya ngerubah arraycollection ke string. saya ada code

    public function onBtnClick():void
    {
    query.addEventListener(Query.QUERY_END, queryEnd);
    query.execute("SELECT * FROM login");
    hasilteks.text = query.getRecords();
    }

    apakah bisa jalan dan apakah bisa tampil di textArea?? (id dari textarea td = hasilteks)

    lalu bagaimana yang benar??
    terima kasih banyak...

    ReplyDelete
  19. untuk di masukan ke text-area isi dari arrayCollectionnya di keluarkan terlebih dahulu untuk dimasukan ke variable string... kurang lebih potongan script nya seperti ini

    var data:ArrayCollection;
    var str:String;

    str = '';
    data = query.getRecords();

    for each( var i:Object in data)
    {
    for each( var j:Object in i )
    {
    str += String(j);
    }
    }

    hasilteks.text = str;

    ReplyDelete
  20. denger2 adobe flex bisa untuk aplikasi desktop.qra2 bisa g flex ini qta bwt seperti aplikasi penjualan seperti aplikasi kasir yang komplit dengan barcode dan printer2 kecil gitu.

    thx :D

    ReplyDelete
  21. flex bisa jadi aplikasi Desktop, untuk menjalankan flex di desktop pada komputer di perlu instalasi Adobe Air Terlebih dahulu. klw flex koneksi ke perangakat keras saya belum tau mas.

    ReplyDelete
  22. saya coba,tapi ga bisa..loading terus..pdhl udh dicoba gatewaynya,baik2 aja..yg salah apa ya? >_<

    ReplyDelete
  23. Kalau gateway udah di coba dan hasilnya baik-baik aja, maka kemungkinan masalahnya hanya di pathnya yang mengarahkan pada service as3flexdb yang ditulis di service-config.xml

    ReplyDelete
  24. It can examine and remove the entire tainting thing normally. The engineers of that application changed the rootkit perception device Download Spy Hunter

    ReplyDelete