1. Konsep Aplikasi

Aplikasi ini terdiri dari 3 bagian:

-Sebuah input form untuk menerima inputan pengisian buku tamu
-Sebuah daftar tamu
-Sebuah panel untuk menampilkan pesan yang disampaikan oleh tamu.

Screenshot Aplikasi Buku Tamu
gambar 1 Aplikasi Buku Tamu Flex

2. Rancangan Database

Database yang digunakan dalam contoh aplikasi ini adalah mySQL. Untuk penggunaan secara local dapat memilih AppServ, XAMPP, atau Wampp. Saya sendiri menggunakan Appserv.
Download Appserv disini
Panduan installasi Appserv disini

Setelah Appserv diinstall aktifkan phpMyAdmin dengan mengetikkan dibrowser http://localhost/phpMyAdmin Selanjutnya buatlah sebuah database baru dengan nama dbtamu. Database ini belum memiliki tabel dan kita akan membuatkan tabel melalui perintah SQL.

Klik pada menu SQL dan ketikkan perintah dibawah ini:
CREATE TABLE guests (
id int(11) NOT NULL auto_increment,
username varchar(30) NOT NULL default ”,
emailaddress varchar(50) NOT NULL default ”,
message text NOT NULL,
PRIMARY KEY (`id`)
) TYPE=MyISAM AUTO_INCREMENT=6 ;

Klik tombol Go.
Bila tidak ada error kita sudah memiliki sebuah tabel di dalam database dbtamu dengan nama guests .

Screenshot database disini

3. User Interface Aplikasi Buku Tamu Flex

Buatlah sebuah aplikasi baru di flex beri nama tamu . gantilah script mxmlnya dengan script dibawah ini. Hasil aplikasi tempatkan di folder bin . sehingga saat aplikasi dijalankan akan memiliki url :

http://localhost/tamu/bin/tamu.html

Script mxml aplikasi buku tamu adalah sebagai berikut:

<?xml version=”1.0? encoding=”utf-8??>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”
xmlns=”*” creationComplete=”send_data()”>
<mx:Script>
<![CDATA[
private function send_data():void {
Request.send();
reset_form();
}
private function reset_form():void{
username.text=””;
emailaddress.text=””;
message.text=””;
}
]]>
</mx:Script>

<mx:Panel x=”111? y=”44? width=”273? height=”312? layout=”absolute” title=”Isi Buku Tamu” id=”guestform”>
<mx:Form x=”0? y=”0? width=”243? height=”247?>
<mx:HBox>
<mx:Label text=”Username”/>
<mx:TextInput id=”username” width=”124?/>
</mx:HBox>
<mx:HBox>
<mx:Label text=”Email Address”/>
</mx:HBox>
<mx:HBox>
<mx:TextInput id=”emailaddress” width=”191?/>
</mx:HBox>
<mx:Label text=”Message”/>
<mx:TextArea width=”192? height=”73? id=”message”/>
<mx:HBox>
<mx:Button label=”Submit” id=”btnsubmit” click=”send_data()”/>
<mx:Button label=”Reset” id=”btnreset” click=”reset_form()”/>
</mx:HBox>
</mx:Form>
</mx:Panel>
<mx:Panel x=”392? y=”44? width=”373? height=”312? layout=”absolute” title=”Daftar Tamu” id=”guestlist”>
<mx:DataGrid x=”0? y=”0? width=”353? height=”272? id=”dgguestlist” dataProvider=”{Request.lastResult.guest}” click=”show_msg()”>
<mx:columns>
<mx:DataGridColumn headerText=”ID” dataField=”id” width=”30?/>
<mx:DataGridColumn headerText=”Name” dataField=”username”/>
<mx:DataGridColumn headerText=”Email” dataField=”emailaddress”/>
<mx:DataGridColumn headerText=”Message” dataField=”message” visible=”false”/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
<mx:Panel x=”111? y=”365? width=”654? height=”200? layout=”absolute” title=”Pesan dan Kesan” id=”messages”>
<mx:TextArea x=”10? y=”10? width=”389? height=”140? borderColor=”#FFFFFF” id=”message_detail” wordWrap=”true”
editable=”false” enabled=”true”/>
</mx:Panel>

<mx:HTTPService id=”Request” url=”http://localhost/tamu/bin/request.php” useProxy=”false” method=”POST” resultFormat=”e4x”>
<mx:request xmlns=””>
<username>{username.text}</username>
<emailaddress>{emailaddress.text}</emailaddress>
<message>{message.text}</message>
</mx:request>
</mx:HTTPService>
<!– Tulisan di bawah ini jangan diubah====
Karya : Freddy Wicaksono
YM : freddywicaksono
E-mail : freddy.wicaksono@cic.ac.id
*/====================================== –>
<mx:Label x=”550? y=”593? text=”Copypahit(Z) 2008 Create By Flexer” color=”#F5F5F2?/>
<mx:Label x=”383? y=”573? text=”Komunitas Flex Indonesia” color=”#FFFFFF”/>
</mx:Application>

Saya menghabiskan 4 jam untuk membuatnya jd creditnya jgn diganti yach🙂.

Sampai langkah ini kita telah memiliki 1 aplikasi mxml dan sebuah database lengkap dengan tabelnya.
Sebagai langkah terakhir yaitu kita akan membuat sebuah file PHP untuk menjadi penghubung antara aplikasi flex dengan database mysql.

Silahkan makan gorengan dan minum kopi dulu…….

4. Script Penghubung antara Flex dan Database

Ok saatnya bikin file php…kita akan beri nama request.php dan disimpan di folder bin.

File ini akan menerima nilai yang dikirim oleh form yg selanjutnya akan menyimpannya di database. Terakhir file ini akan melakukan query sehingga menghasilkan sebuah file xml yang berisi daftar tamu.

Script selengkapnya adalah sebagai berikut:

<?php
header(’Content-Type: text/xml’);
?>

<?php
//connect to the database

$host=’localhost’;
$user=’root’;
$pwd=’123′;
$dbname=’dbtamu’;
$mysql = mysql_connect($host, $user, $pwd);
// Quote variable to make safe
function quote_smart($value)
{
// Stripslashes
if (get_magic_quotes_gpc()) {
$value = stripslashes($value);
}
// Quote if not integer
if (!is_numeric($value)) {
$value = “‘” . mysql_real_escape_string($value) . “‘”;
}
return $value;
}

mysql_select_db($dbname);
if( $_POST[”username”] AND $_POST[”emailaddress”] AND $_POST[”message”])
{
//input data tamu baru
$Query = sprintf(”INSERT INTO guests VALUES (”, %s, %s, %s)”, quote_smart($_POST[’username’]), quote_smart($_POST[’emailaddress’]), quote_smart($_POST[’message’]));

$Result = mysql_query( $Query );
}
//tampilkan daftar tamu dalam bentuk xml
$Query = “SELECT * from guests”;
$Result = mysql_query( $Query );

$Return = “<guests>”;

while ( $User = mysql_fetch_object( $Result ) )
{
$Return .= “<guest><id>”.$User->id.”</id><username>”.$User->username.”</username><emailaddress>”.$User->emailaddress.”</emailaddress><message>”.$User->message.”</message></guest>”;
}
$Return .= “</guests>”;
mysql_free_result( $Result );
print ($Return)
?>

//=================== selesai//

Gantilah nilai pada data2 dibawah ini bila perlu:

$host=’localhost’;
$user=’root’;
$pwd=’123′;
$dbname=’dbtamu’;

===============

5. Ujicoba

Aktifkan browser, ketikan : http://localhost/tamu/bin/tamu.html atau bs lakukan langsung lewat menu run di flex builder. Bila dipublish di server yang sebenarnya selain diedit pada file request.php pada file tamu.mxml juga ada yg diedit yaitu :

<mx:HTTPService id=”Request” url=”http://localhost/tamu/bin/request.php” useProxy=”false” method=”POST” resultFormat=”e4x”>

yang tulisannya tebal diganti ke alamat aplikasi di server….:)

Sumber : http://flex-id.org/