RIA Developer Specializing in Adobe Technology

Archive for the ‘Flex’ Category

AMFPHP + Adobe Flex 3 (Simple CRUD)

AMFPHP adalah Free Open Source implementasi PHP terhadap Action Message Format(AMF). AMFPHP sendiri bukan merupakan Framework, sehingga anda bebas menggunakan dengan cara anda. Versi terakhir dari amfphp ini merupakan versi 1.9 yang baru saja di release pada February 02, 2010. Pada tutorial ini saya akan memberikan Contoh membuat aplikasi sederhana menggunakan AMFPHP sebagai Backend dan Adobe Flex 3 sebagai Frontend, dengan database MySQL.
1.    Download amfphp dari
http://waix.dl.sourceforge.net/project/amfphp/amfphp/amfphp%201.9.zip

2.    Extract file “amfphp 1.9.zip” yang sudah anda download ke folder dimana anda menyimpan sebagai document root. Misalkan C:\xampp\htdocs. Lalu ubah folder “amfphp 1.9” yang sudah anda extract tadi menjadi “amfphp”. Sehingga anda akan mempunyai folder seperti ini “C:\xampp\htdocs\amfphp”, yang jika anda buka folder tersebut, akan terlihat seperti gambar dibawah ini

3.    Selanjutnya eksekusi perintah SQL dibawah ini :

CREATE DATABASE `adobeusergroup` ;
USE adobeusergroup;
CREATE TABLE `adobeusergroup`.`user` (
`no` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`nama` VARCHAR( 55 ) NOT NULL ,
`alamat` VARCHAR( 80 ) NOT NULL ,
`email` VARCHAR( 40 ) NOT NULL ,
`telp` VARCHAR( 24 ) NOT NULL ,
UNIQUE ( `email` ) ) ENGINE = MYISAM COMMENT = ‘Data User’;

INSERT INTO `adobeusergroup`.`user` (`no` ,`nama` ,`alamat` ,`email` ,`telp` )
VALUES (NULL , ‘Ahmad Fathi Hadi’, ‘Jl. Matraman Dalam II No:9b’, ‘ahmadfathihadi@gmail.com’, ‘0818084977xx’ );
NB : Anda dapat menggunakan SQL Editor apapun, seperti phpmyadmin, MySqlFront, SQL Yog,dll.

4.    Selanjutnya kita harus menyiapkan VO (Value Object) yang akan dipakai oleh PHP. Prinsipnya adalah setiap Table akan menjadi Class, sedangkan field akan menjadi variable. Pada Table yang sudah kita miliki bernama User, dan memiliki field (no, nama, alamat, email dan telp). Sehingga akan terbentuk sebuah VO seperti berikut :

<?php
class UserVO
{
public $no;
public $nama;
public $alamat;
public $email;
public $telp;

var $_explicitType = “ifx.ifx.master.UserVO”;
}
?>

Simpanlah file VO tersebut dengan nama UserVO.php pada folder sesuai var $_explicitType di dalam folder Service/vo. Pada contoh kali ini berarti anda akan membuat folder C:\xampp\htdocs\amfphp\services\vo\ifx\ifx\master dan menyimpan file UserVO.php di dalamnya. Tujuan dibuatnya banyak folder seperti ifx/ifx adalah agar anda tidak bingung dan betrok jika anda bekerja dengan bayak service, sehingga anda tahu dimana service anda berada.
NB : Agar terstruktur dan tidak membingungkan saat bekerja tim, anda harus menyepakati aturan yang sudah umum, seperti menyimpan semua VO didalam folder service/vo

5.    Selanjutnya buatlah Service yang akan mengolah Table tadi, seperti Select, Insert, dan Delete. Simpan code PHP dibawah ini di folder Service dengan nama User.php

<?php
mysql_connect(‘localhost’, ‘root’, ”);
mysql_select_db(‘adobeusergroup’);
require_once (‘./vo/ifx/ifx/master/UserVO.php’);

class User
{
public function getUser()
{
$query = “SELECT * from user”;
$result = mysql_query($query);

$ret = array();
while ($row = mysql_fetch_object($result))
{
$tmp = new UserVO();
$tmp->no = $row->no;
$tmp->nama = $row->nama;
$tmp->alamat = $row->alamat;
$tmp->email = $row->email;
$tmp->telp = $row->telp;
$ret[] = $tmp;
}
mysql_free_result($result);
return $ret;
}
public function saveUser($newUser)
{
$queryUser = “SELECT no from user where no=’”.$newUser->no.”‘”;
$resultUser = mysql_query($queryUser);
$ketUser = mysql_fetch_array($resultUser);
if($ketUser != NULL)
{
$query = “UPDATE user SET nama = ‘”.$newUser->nama.”‘,” .
“alamat = ‘”.$newUser->alamat.”‘,” .
“email = ‘”.$newUser->email.”‘,” .
“telp = ‘”.$newUser->telp.”‘” .
“WHERE no = ‘”.$newUser->no.”‘;”;
$result = mysql_query($query);
return NULL;
}
else
{
$query = “INSERT INTO user” .
“(no,” .
“nama,” .
“alamat,” .
“email,” .
“telp)” .
“VALUES” .
“(‘”.$newUser->no.”‘,” .
“‘”.$newUser->nama.”‘,” .
“‘”.$newUser->alamat.”‘,” .
“‘”.$newUser->email.”‘,” .
“‘”.$newUser->telp.”‘)”;
$result = mysql_query($query);
return NULL;
}
}

public function deleteUser($selectedUser)
{

$query = “DELETE FROM  user WHERE no =’$selectedUser’”;
$result = mysql_query($query);
return NULL;
}
}
?>

Sebelum maju kelangkah selanjutnya, silahkan anda cek service yang anda buat, apakah sudah berjalan dengan baik. Silahkan buka url pada browser anda
http://localhost/amfphp/browser/ Apakah sudah terdapat Class “User” pada service browser ?, apakah jika anda plih, ada dapat mengakses method yang ada seperti deleteUser, getUser, dan saveUser ?

6.    Sekarang buatlah project baru pada Adobe Flex Builder 3 dengan nama AMFPHP Test

7.    Langkah pertama adalah menyiapkan VO yang akan dipakai di Project Flex, sama seperti VO pada PHP, kita akan membuat sama, silahkan buat folder ifx/ifx/master pada folder scr di Flex Builder, lalu buatlah Class ActionScript baru dengan nama UserVO.as

package ifx.ifx.master
{
[RemoteClass(alias="ifx.ifx.master.UserVO")]

[Bindable]
public class UserVO
{
public var no:Number;
public var nama:String;
public var alamat:String;
public var email:String;
public var telp:String;
}
}
8.    Sekarang pada main Application silahkan ketikkan code berikut :

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”init();”>
<mx:Script>
<![CDATA[
import ifx.ifx.master.UserVO;
import mx.rpc.events.ResultEvent;

[Bindable]
private var no:Number = new Number();
[Bindable]
private var dataUser:Array = new Array();

private function init():void
{
myUser.getUser.addEventListener(“result”,getUserHandler);
myUser.getUser();
}

private function getUserHandler(event:ResultEvent):void
{
dataUser = event.result as Array;
}
private function insert():void
{
var newUser:UserVO = new UserVO();
newUser.nama = namaInput.text;
newUser.alamat = alamatInput.text;
newUser.email = emailInput.text;
newUser.telp = telpInput.text;
myUser.saveUser(newUser);
myUser.getUser();
cancelHandler();
}
private function selectHandler():void
{
noLabel.text = dataGridUser.selectedItem.no;
namaInput.text = dataGridUser.selectedItem.nama;
alamatInput.text = dataGridUser.selectedItem.alamat;
emailInput.text = dataGridUser.selectedItem.email;
telpInput.text = dataGridUser.selectedItem.telp;
}
private function cancelHandler():void
{
noLabel.text = “”;
namaInput.text = “”;
alamatInput.text = “”;
emailInput.text = “”;
telpInput.text = “”;
dataGridUser.selectedItem = null;
}
private function deleteUser():void
{
var selectedUser = noLabel.text;
myUser.deleteUser(selectedUser);
myUser.getUser();
}
]]>
</mx:Script>
<mx:DataGrid x=”10″ y=”243″ width=”627″ dataProvider=”{dataUser}” id=”dataGridUser” click=”selectHandler();”>
<mx:columns>
<mx:DataGridColumn headerText=”No” dataField=”no” width=”40″/>
<mx:DataGridColumn headerText=”Nama” dataField=”nama”/>
<mx:DataGridColumn headerText=”Alamat” dataField=”alamat”/>
<mx:DataGridColumn headerText=”Email” dataField=”email”/>
<mx:DataGridColumn headerText=”telp” dataField=”telp”/>
</mx:columns>
</mx:DataGrid>
<mx:Form x=”10″ y=”10″ width=”410″ height=”225″ horizontalScrollPolicy=”off” verticalScrollPolicy=”off” id=”myForm”>
<mx:Label text=”No : {no}” id=”noLabel”/>
<mx:FormItem label=”Nama :” required=”true”>
<mx:TextInput width=”260″ id=”namaInput”/>
</mx:FormItem>
<mx:FormItem label=”Alamat :” required=”true”>
<mx:TextArea width=”260″ height=”62″ id=”alamatInput”/>
</mx:FormItem>
<mx:FormItem label=”Email :” required=”true”>
<mx:TextInput width=”260″ id=”emailInput”/>
</mx:FormItem>
<mx:FormItem label=”Telp :” required=”true”>
<mx:TextInput width=”260″ id=”telpInput”/>
</mx:FormItem>
<mx:HBox width=”100%” horizontalAlign=”center”>
<mx:Button label=”Save” click=”insert()”/>
<mx:Button label=”Delete” click=”deleteUser()”/>
<mx:Button label=”Cancel” click=”cancelHandler();”/>
</mx:HBox>
</mx:Form>
<mx:RemoteObject id=”myUser” destination=”User” source=”User” endpoint=”http://localhost/amfphp/gateway.php” showBusyCursor=”true”/>
</mx:Application>

Download AMFPHP Test Simple CRUD

Download Artikel ini versi PDF

Gathering Indonesian Flex Community Adobe User Group

Akhirnya setelah sekian lama tidak berkumpul lagi, kini Indonesian Flex Community akan mengadakan acara Gathering.

Klik pada gambar untuk lebih jelasnya.

Kado ulang tahun dari O’Reilly

Sebelumnya selamat Ulang tahun fathi yang ke 19 (^_^). Kemarin adalah hari yang spektakuler, coba anda bayangkan mendapatkan 180 lebih ucapan selamat ulang tahun di wall facebook, sms, dan media lainnya. Sampai-sampai saya bingung untuk membalas semua ucapan ultah di facebook maupun sms, wah banyak banget, cape’.  Makasih ya semua. Setelah melalui hari yang cukup melelahkan, akhirnya saya memutuskan untuk pulang kerumah di daerah matraman salemba. Setibanya disana saya melihat sebuah paket kiriman dari luar, dan ternyata pengirimnya adalah O’Reilly.

Hore, buku yang saya sangat inginkan diberikan cuma-cuma sebagai kado ulang tahun untuk saya dari O’Reilly. Sebagai rasa terima kasih saya kepada O’Rielly, maka saya akan mereview buku mereka sebagai bentuk promosi. (^_^)

Mungkin anda bertanya, kenapa buku ini yang saya inginkan bila dibandingkan buku Flex lainnya ?. Dikarenakan buku ini mempunyai isi yang begitu menarik, maksud saya adalah formatnya, coba lihat sample dibawah ini :

Problem : You need to select regions or items on your chart
Solution : Use the selectionMode attribute of your chart to set the selection type you want; then
use mouse, keyboard, or programmatic means to select items on your chart
Discussion : Just as with the different list components, chart elements are selectable. This might be
used for showing more detail on a data point with data grids or a secondary chart. To
make a chart selectable, you set the selectionMode attribute to single or multiple (the
default value of this attribute is none). A none value does not allow any selection, a
single value allows only one item to be selected at a time, and a multiple value allows
multiple items to be selected. bla bla bla . . . . . .

Bagus kan ?, buku ini memiliki jumlah halaman sebanyak 704 halaman. Bagi anda yang berminat untuk membeli buku atau hanya sekedar ingin melihat sample chapter, silahkan buka http://oreilly.com/catalog/9780596529857

Harga buku ini lumayan mahal, sekitar $45. Tapi apalah arti uang bila dibandingkan peningkatan skill (^_^)

Flash XML Graphics (FXG), Apa itu ?

Flash XML Graphics (FXG) adalah sintax untuk medefinisikan grafik dalam Flex. Mungkin bagi anda yang pernah membaca artikel saya mengenai degrafa yang berjudul “Degrafa untuk Pemula” di http://www.indonesianflexcommunity.org/tutorial-flex/41-design/91-degrafa-untuk-pemula , anda akan mudah dalam memahami FXG.

Sebenarnya FXG dibuat agar para designer bisa bekerja terpisah dengan developer. Maksudnya ?, ya maksud saya adalah dengan menggunakan tools seperti Adobe Photoshop CS4, Illustrator CS4 and Fireworks CS4, kita akan bisa merubahnya kedalah format FXG dan bisa dipakai dalam aplikasi Flex kita. Namun sayangnya format FXG bisa digunakan menggunakan Flex 4 SDK dan termasuk dalam bagian spark .  Maaf ya

Anda bisa menggunakan FXG element langsung didalam sintax MXML ataupun berdiri sendiri sebagai Custom Component.

Contoh :

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″ xmlns:s=”library://ns.adobe.com/flex/spark” xmlns:mx=”library://ns.adobe.com/flex/halo” minWidth=”1024″ minHeight=”768″>

<mx:Panel title=”Ellipse”

height=”247″ width=”279″ layout=”horizontal”

paddingTop=”10″ paddingBottom=”10″ paddingLeft=”10″ paddingRight=”10″ x=”259″ y=”154″>

<s:Graphic x=”0″ y=”0″>

<s:Ellipse height=”100″ width=”250″>

<s:stroke>

<s:SolidColorStroke color=”0×000000″ weight=”2″/>

</s:stroke>

<s:fill>

<s:RadialGradient>

<s:entries>

<s:GradientEntry color=”0×1c64a7″/>

<s:GradientEntry color=”0×114371″/>

</s:entries>

</s:RadialGradient>

</s:fill>

<s:filters>

<mx:DropShadowFilter/>

</s:filters>

</s:Ellipse>

</s:Graphic>

</mx:Panel>

</s:Application>

FXG bisa berada dalam file *.mxml dan *.fxg dengan syarat berada didalam tag <Graphic>

Tidak hanya itu, kita juga bisa menggunakan tag <Library> dan <Definition>, yang berfungsi semacam deklarasi FXG yang nantinya bisa kita pakai dengan memanggil namanya.

Contoh :

<?xml version=”1.0″ encoding=”utf-8″?>

<!– Ahmad Fathi Hadi/FXGLibraryExample.mxml –>

<s:Application

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:mx=”library://ns.adobe.com/flex/halo”

xmlns:s=”library://ns.adobe.com/flex/spark” >

<fx:Library>

<fx:Definition name=”EllipseFathi”>

<s:Graphic x=”0″ y=”0″>

<s:Ellipse height=”100″ width=”250″>

<s:stroke>

<s:SolidColorStroke color=”0×000000″ weight=”2″/>

</s:stroke>

<s:fill>

<s:RadialGradient>

<s:entries>

<s:GradientEntry color=”0×1c64a7″/>

<s:GradientEntry color=”0×114371″/>

</s:entries>

</s:RadialGradient>

</s:fill>

<s:filters>

<mx:DropShadowFilter/>

</s:filters>

</s:Ellipse>

</s:Graphic>

</fx:Definition>

</fx:Library>

<mx:Panel title=”Library Example”

height=”314″ width=”528″ layout=”absolute”

paddingTop=”10″ paddingBottom=”10″ paddingLeft=”10″ paddingRight=”10″ x=”93″ y=”31″>

<fx:EllipseFathi x=”0″ y=”0″/>

<fx:EllipseFathi x=”255″ y=”105″/>

<fx:EllipseFathi x=”0″ y=”105″/>

<fx:EllipseFathi x=”255″ y=”0″/>

</mx:Panel>

</s:Application>

Mungkin dengan anda melihat contoh kode yang saya berikan, anda bisa mengerti maksud saya. (^_^)

Well, mungkin sekian dari saya untuk penjelasan singkat mengenai FXG.

Flash Builder 4

Kamarin malam tepat pukul 23:01, saya dapat email dari labs.adobe.com, setelah saya baca dan ternyata hal sangat saya tunggu telah hadir. Flash Builder 4 beta dan Flash Catalyst ternyata begitu mengagumkan. kali ini saya mau bagi pengalaman menggunakan Adobe Flash Builder 4 beta. Pasti anda bertanya kenapa bukan Flex Builder, melainkan Flash Builder ?, Pada dasarnya Flex adalah sebuah Framework untuk membuat file swf, mungkin dari situ Adobe merubah nama Flex menjadi Flash, walaupun Framework yang digunakan tetep bernama Flex. Ya ngga penting lah untuk dipermasalahkan (^_^).

Dalam menginstal Adobe Flash Builder 4 beta ini tidak dibutuhkan skill khusus, Next next dan Finish.

Untuk mendownloadnya, silahkan berkunjung ke labs.adobe.com

Yang perlu kita lihat dan perhatikan adalah perubahan dan fitur-fitur baru yang terdapat dalam fersi beta ini. ketika kita membuat Project baru, terdapat pilihan Flex SDK Version.

Ternyata komponent sudah berubah penampilannya, seperti pada gambar berikut

Yang menarik disini adalah kita bisa memilih Theme, namun terdapat perbedaan jika kita memilih Versi Flex SDK pada saat awal membuat project, akan terasa perbedaan antara SDK 4 dan SDK 3. Bagi anda  yang terbiasa menggunakan SDK 3, anda akan mengalami hal yang sama seperti saya alami, yaitu terdapat sesuatu yang ganji, aneh, dan kurang menarik

satu fitur lagi yang sangat dirasakan manfaatnya adalah Package Explorer, saya mencoba membrowse file .swc, dan cukup menarik, saya bisa melihat isi dari file berekstensi .swc

Sebenarnya masih banyak fitur-fitur yang sangat bagus, namun akan terlalu panjang jika saya bahas semua disini.

Pada intinya Flash Builder 4 beta sudah sangat bagus, namun masih membutuhkan proses pematangan dari pihak Adobe.

Certificate of Completion Program

Hari ini dapat email dari linda.com, katanya saya dapat sertifikat. hah ?, perasaan nga pernah ikut seminar di luar negeri deh. Setelah dibaca lagi, ternyata sertifikat ini diberikan karena telah menyelesaikan Pelatihan Cource dari Lynda.com. Sertifikat ini diberi nama “Certificate of Completion Program”. Berikut list sertifikat yang saya terima :

• AIR for Flex Developers
• Flex 2 Advanced: Using Data Services
• ActionScript 3.0 in Flex Builder Essential Training

Pasti banyak yang belum mengetahui apa itu Lynda.com, Lynda.com adalah semacam Online training library. banyak sekali Training yang disediakan oleh Lynda.com. biasaya setiap perusahaan besar mempunya sebuah acount di Lynda.com untuk kebutuhan para staf IT yang ingin mempelajari sesuatu. Acount premiumnya pun tidak murah, sekitar $375.

Workshop – Creating RIA with Adobe Flex Builder 3

Indonesian Flex Community bekerja sama dengan STMIK Widuri akan melaksanakan Workshop “Creating RIA with Adobe Flex Builder 3″. Keterangan terdapat pada Banner. oh iya lupa, salah satu trainernya adalah saya

Ok, sampai ketemu pada workshop dan seminar selanjutnya di Binus (^_^) (more…)

Adobe® Flex™ Builder 3 Pro & Adobe® ColdFusion™ 8 for Education

Siapa bilang Adobe Flex Builder dan ColdFusion itu Berbayar ?. ya memang si’ bayar, tapi untuk kalian yag termasuk Student, atau bertujuan untuk belajar. Anda bisa mengajukan permintaan lisensi untuk edukasi di https://freeriatools.adobe.com/. Syaratnya mudah, cukup mengisi form online dan menScan kartu tanda mahasiswa/pelajar.

Bagi pihak Universitas, Lab, maupun tempat kursus, anda bisa meminta lisensi up to 30 User.

(more…)

Flex PHP – Very Basic Upload File

Flex PHP – Upload File. Kalau selama ini anda bingung bagaimana cara mengupload file ke Server, anda bisa mendownloadnya disini. sangat sederhana. kalau mau yang sangat lengkap, silahkan buka http://www.adobe.com/devnet/flex/articles/php_getstarted_10.html

(more…)

Adobe® Certified Expert Program – Adobe Flex 3 with AIR ACE Exam

Banyak orang yang tidak mengetahui Adobe Certified, hampir semua orang yang saya tanyakan tentang rencana mereka untuk mengambil sertifikasi IT, mereka hanya mengetahui dua sertifikasi, Cicso dan Oracle. Ups, ko’ bisa yah ?. Padalah secara tidak disadarai banyak sekali produk Adobe yang kita gunakan, mulai dari Adobe Reader, Photoshop, Ilustrator, Flash,dll. Itu semua merupakan Teknologi dari Adobe. Sudahkan anda melengkapi diri anda dengan Sertifikasi dari Adobe ?. ada banyak jenis sertifikat yang dikeluarkan oleh Adobe, baik itu per produk, level, dan jenis. Seperti Adobe Certified Instructor (ACI), Adobe Certified Associate (ACA), Adobe Certified Professionals (ACPs), dan Adobe Certified Expert (ACE). Kali ini saya akan menjelaskan tentang Adobe Flex 3 with AIR ACE Exam.

Adobe Flex 3 with AIR ACE Exam adalah bagian dari ACE. Terdapat 50 soal (Pilihan Ganda) yang dapat anda kerjakan, namun syarat kelulusan minimal adalah 67%. Mudah Bukan ?. klik disini untuk melihat Apa saja yang diujikan !. Untuk lebih detailnya lagi, silahkan klik disini. Terdapat banyak tempat di jakarta seperti :

• Brainmatics – Menara Bldakara suite 0205, 2nd Fl, JI.
  Gatot Subroto Kav. 71-73,Pancoran.
  Jakarta, 12870
  +62-21-83793383
• Jaringan Nusantara – Wisma Kosgoro 8th Floor
  Jl. MH. Thamrin kav. 53
  Jakarta, 10350
  021-39832414
• NetTrain Informatika – The East Building 16th floor no. 1
  Jl. Lingkar Mega Kuningan Kav E3.2 no. 1
  Jakarta, 12950
  +62-21-57938538
• PT Datacraft Indonesia – Menara Imperium LG Floor #06
  Jin.HR. Rasuna Said Kav. 1
  Jakarta, 12980
  +62-21-285-48092
• PT. Andalan Nusantara Teknologi – Wisma Slipi 11th Floor
  JI Letjen S. Parman
  Kav. 12
  Jakarta, 11480
  +62215307228

Oh iya, harganya $150 US Dolar. mmm, fikir-fikir lagi deh,hehehe. untungnya saya punya kupon gratis sebagai AUGM. Mungkin dalam tahun ini saya dan beberapa teman dari Indonesian Flex Community akan berencana mengambil ACE. Saya sendiri ingin mengambil Adobe Flex 3 with AIR ACE Exam dan Adobe® Captivate® 3 Exam. (more…)