Welcome to Abdul Malik Ikhsan's Blog

Meload data dari PHP ke Flex

Posted in Flex by samsonasik on March 25, 2009

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&#91;&#93; = $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&#91;'isbn'&#93;?>">
                <title><?=$row&#91;'title'&#93;?></title>
                <author><?=$row&#91;'author'&#93;?></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>
    <!&#91;CDATA&#91;
        //digunakan untuk post form data pada saat update
        private function send_data():void {
            kirimEdit.send();
            //refresh hasil data
            sampleService.send();
        }
    &#93;&#93;>
</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 :

2 Responses

Subscribe to comments with RSS.

  1. duutz said, on April 4, 2009 at 2:28 am

    waaaah mantap2… btw requirement nya apa aja nihhh biar kita bisa on the fly memprogram flex…

  2. ari said, on March 5, 2010 at 1:27 pm

    nice artikel , kebetulan lagi belajar flex . Thx for sharing


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: