Flex Form

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

Posting ini adalah lanjutan dari posting Flex Connect To MySQL Database yang mana pada postingan tersebut di jelaskan cara instalasi As3flexdb dan conection Flex ke As3flexdb

Pada posting ini akan menjelaskan cara melakukan insert data ke database MySQL menggunakan Form Flex melalui library as3flexdb

Dibawah ini adalah tahapan membuatnya

Tahap ke 1

Buatlah sebuah Tabel pada Database MySQL misalkan nama tabel tersebut adalah  users, tabel tersebut digunakan untuk menyimpan data-data yang dikirim dari form, Struktur tabel tersebut 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;

Tahap 2

Buatlah sebuah Form di Flex  Sebagai form yang berfungsi sebagai interface untuk menambah data, Seperti gambar dibawah ini

Bila dilihat MXML dari form tersebut adalah sebagai berikut.

<mx:Script source="prosesData.as" />
<mx:Canvas width="302" height="128">
<mx:Button click="this.onBtnSave()" x="26" y="90" label="Save"/>
<mx:Label x="26" y="26" text="First Name"/>
<mx:Label x="26" y="52" text="Last Name"/>
<mx:TextInput x="120" y="24" id="fname"/>
<mx:TextInput x="120" y="54" id="lname"/>   

Bagian terpenting dari tag diatas adalah :

• <mx:Script source="prosesData.as" /> karena tag tersebut adalah include script prosesData.as yang isi nya adalah kode program untuk melakukan insert data ke database. Isi Dari file prosesData.as akan dijelasakan pada tahap ke tiga.
• <mx:Button click="this.onBtnSave()" x="26" y="90" label="Save"/>  kerena pada button ini ada event click yang memanggil function this.onBtnSave() untuk melakukan proses menyimpan data. isi dari function this.onBtnSave() akan dijelaskan pada tahap ke tiga.

Tahap 3

Buatlah sebbuah file misalkan bernama proses prosesData.as, file tersebut adalah file yang akan menangani proses input data ke database.

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

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

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


//function untuk membuat koneksi kedatabase 
private function onCreateComplete():void
{
db = Database.getInstance();
query = new Query();

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

}

//function untuk untuk simpan data
public function onBtnSave():void
{
   this.onCreateComplete();  
   var vFname:String = this.fname.text;
   var vLname:String = this.lname.text;
   query.addEventListener(Query.QUERY_END, processQuery);
   query.addEventListener(Query.QUERY_ERROR, processQueryError);
   query.execute("INSERT INTO users VALUES(null,'"+vFname+"','"+vLname+"')");
}

//function yang dipanggil bila proses menyimpan berhasil
private function processQuery(evt:Object):void
{
   Alert.show('Data berhasil disimpan');  
}

//function yang dipanggil bila proses menyimpan gagal  
private function processQueryError(evt:Object):void
{
   Alert.show('Data gagal disimpan, silakan ulangai menyimpan data');  
}