Monday, March 22, 2010

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');  
}

5 comments:

  1. terima kasih infonya,...

    penting bnget ini.....

    ReplyDelete
  2. maaf pak... boleh minta bantuan....?
    klo buat form login gmana...???
    maaf baru belajar....

    ReplyDelete
  3. bikin form login mirip seperti ini mas...

    ReplyDelete
  4. mas, ak lgi buat tugas tentang chat video. seperti flexvideochat.

    cm aku bru bisa buat video conferancenya. jadi login dengan nama user apapun dia bakal bisa chat tatap muka(webcam) jika yang login 4 orang, maka secara bersamaan juga ke 4 orang itu tatap muka.

    jadi pengennya sih, user setelah login akan masuk ke User List dulu. sehingga nanti kita bisa tentuin 1 user saja yang dapat chat dengan kita dengan mengklik nama user pada userlist.

    mungkin mas dapat membantu??? mohon pencerahannya

    ReplyDelete
  5. wow... keren...
    saya belum tau mas tentang bikin video conference.

    ReplyDelete