http://indon

nesianflexcom
mmunity.org

Flexx Training 
Build a Simple Contact Managger using Zen
ndAMF 

Firsst you need a Database pre
eparation 

 Databasse name : contacts 

 Table : u
user 

  USE contacts; 

CREATE TABLE user ( 

  id int(4
4) NOT NULL aauto_incremeent, 

  username varchar(1
12) NOT NULLL, 

  passwo
ord varchar(20) NOT NULL,, 

  PRIMARY KEY  (id) 

) ENGINE=MyISAM;  

 Table : ccontact 

USE contacts; 

CREATE TABLE `contaact` ( 

  `name`` text, 

  `email` text, 

  `phonee` text 

) ENGINE=MyISAM; 

he Zend Framework on you
h installing th
Setup starts with ur PHP installation, Copy ““Zend” folder to your docu
ument root. 

In the “htdocs” ffolder, create
e 3 php files : Index.php, Lo
ogin.php, and
d Contacts.ph
hp. 

Index.php 

<?p
php  

incllude "Zend/A
Amf/Server.ph
hp"; 

incllude "Contactts.php";  

incllude "Login.php"; 

myssql_connect( 'localhost', 'rroot', '' ); //yoou need to upddate the connection informattion for your sppecific databasse setup 

 
 http://indonesianflexcommunity.org 

mysql_select_db( 'contacts' ); 

$server = new Zend_Amf_Server(); 

$server‐>setClass( "Contacts" ); 

$server‐>setClass( "Login" ); 

echo( $server‐>handle() ); 

?>  

Login.php 

 <?php 

class Login 

{ 

  public function Login() { }   

  public function cekLogin($username, $password) 

  { 

        $res = mysql_fetch_array(mysql_query("SELECT * FROM contacts.user WHERE username='$username' AND 
password='$password' ")); 

        if($res) 

    { 

      $login = 1; 

    } 

    else 

    { 

      $login = 0; 

    } 

    return $login; 

  } 

} 

?> 

Contacts.php 

 
 http://indonesianflexcommunity.org 

<?php 

class Contacts 

{  

public function Contacts() { } 

      public function add( $name, $email, $phone ) 

      {        

    $insert = sprintf( "INSERT INTO contact VALUES ( '%s', '%s', '%s')", 

            mysql_real_escape_string( $name ), 

            mysql_real_escape_string( $email ), 

            mysql_real_escape_string( $phone ) ); 

            mysql_query($insert);  

  } 

    public function getContacts() 

    {    

$contacts = array(); 

        $res = mysql_query( 'SELECT * FROM contact' ); 

          while( $contact = mysql_fetch_assoc($res) ) 

    { 

                  $contacts []= $contact; 

    } 

            return $contacts; 

    } 

  } 

?> 

you need to add a new file to the project called services‐config.xml 

services‐config.xml 

<?xml version="1.0" encoding="UTF‐8"?> 

<services‐config> 

    <services> 
 
 http://indonesianflexcommunity.org 

        <service id="zend‐service" class="flex.messaging.services.RemotingService" 
messageTypes="flex.messaging.messages.RemotingMessage"> 

            <destination id="zend"> 

                <channels> 

                    <channel ref="zend‐endpoint"/> 

                </channels> 

                <properties> 

                    <source>*</source> 

                </properties> 

            </destination> 

        </service> 

    </services> 

    <channels> 

        <channel‐definition id="zend‐endpoint" class="mx.messaging.channels.AMFChannel"> 

            <endpoint uri="http://localhost/" class="flex.messaging.endpoints.AMFEndpoint"/> 

        </channel‐definition> 

    </channels> 

</services‐config>  

With that file in the project, you now need to get its absolute location on disk. You can do that by right‐clicking the 
services‐config.xml file name, then clicking Properties. The absolute path is shown as Location, as you can see in Figure 1 

 
 http://indonesianflexcommunity.org 

Paste that absolute file path, then open the project properties. Click the Flex Compiler tab. From there, add services and 
the file path to the additional compiler arguments. You can see that in Figure 2. 

Example : ‐services "C:\Users\ifx\Documents\Flex Builder 3\ContactManager\src\services‐config.xml" 

Now, create a Login panel 

Login.mxml 

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

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="242" height="148" title="Login" label="Login" horizontalCenter="0"
verticalCenter="0"
minHeight="200" minWidth="300" alpha="0.8"
xmlns:flexlib="http://code.google.com/p/flexlib/" >
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
private function closeMe():void
{
PopUpManager.removePopUp(this);
}
private function cekLogin( event:Event ) : void
{
remoteLogin.cekLogin( txtusername.text, txtpassword.text );
}
private function hasilLogin(event:ResultEvent): void
{
if(event.result == 1)
{
Alert.show('berhasil');
closeMe();
}

 
 http://indonesianflexcommunity.org 

else
{
Alert.show('Gagal');
}
}
]]>
</mx:Script>
<mx:RemoteObject id="remoteLogin" destination="zend" source="Login">
<mx:method name="cekLogin" result="hasilLogin( event )"/>
</mx:RemoteObject>

<flexlib:PromptingTextInput x="10" y="10" width="202" prompt="Username"

id="txtusername"/>
<flexlib:PromptingTextInput x="10" y="40" width="202" prompt="Password"
id="txtpassword"/>
<mx:ControlBar horizontalAlign="center" >
<mx:Button label="Login" click="cekLogin(event)"/>
<mx:Spacer width="72" height="2"/>
<mx:Button label="Cancel"/>
</mx:ControlBar>

</mx:TitleWindow> 

Final part is main Application 

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

<mx:Application pageTitle="Contacts" layout="absolute"
creationComplete="onStartup();showLogin();"
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:flexlib="http://code.google.com/p/flexlib/">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.skins.halo.PopUpIcon;
import mx.rpc.events.ResultEvent;
[Bindable]
public var popLogin:Login;
private function showLogin():void
{
popLogin = Login(PopUpManager.createPopUp(this, Login,true));
rtt.play();
PopUpManager.centerPopUp(popLogin);
}

private function onStartup() : void

{
svcContacts.getContacts();
}

private function doAdd( event:Event ) : void

{
svcContacts.add( txtName.text, txtEmail.text, txtPhone.text );
txtName.text = '';
txtEmail.text = '';
txtPhone.text = '';
}

private function doAddResult( event:ResultEvent ) : void

{
svcContacts.getContacts();
}
 
 http://indonesianflexcommunity.org 

private function doContactsResult( event:ResultEvent ) : void

{
dg.dataProvider = event.result;
}
]]>
</mx:Script>
<mx:Rotate target="{popLogin}" id="rtt"/>
<mx:RemoteObject id="svcContacts" destination="zend" source="Contacts">
<mx:method name="getContacts" result="doContactsResult( event )" />
<mx:method name="add" result="doAddResult( event )" />
</mx:RemoteObject>

<mx:Panel width="500" height="400" layout="vertical" title="Contacts"

paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"
horizontalAlign="center" horizontalCenter="0" verticalCenter="0">

<mx:DataGrid id="dg" width="100%" height="100%">

<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name" />
<mx:DataGridColumn headerText="Email" dataField="email" />
<mx:DataGridColumn headerText="Phone" dataField="phone" />
</mx:columns>
</mx:DataGrid>
<flexlib:PromptingTextInput id="txtName" prompt="Name" width="250"/>
<flexlib:PromptingTextInput id="txtEmail" prompt="Email" width="250"/>
<flexlib:PromptingTextInput id="txtPhone" prompt="Phone" width="250"/>
<mx:Button label="Add" click="doAdd( event )" />
</mx:Panel>
</mx:Application> 

Don’t forget to paste “flexlib.swc” to the libs folder on Adobe Flex builder 3. 

 
 http://indon
nesianflexcom
mmunity.org

Fun
n with Image 

<?x
xml version="1.0" en
ncoding="utf-8"?>
<mx :mx="http://www.adob
x:Application xmlns: be.com/2006/mxml" la
ayout="abso
olute" >
<mx:Im
mage id="ga
ambar" x="169" y="99 gambar.png')">
9" source="@Embed('g
<mx:filter
rs>
<mx:
:DropShadowFilter di
istance="10"/>
<mx:
:BevelFilter/>
</mx:filte
ers>
<mx:showEf
ffect>
:Fade alphaFrom="0" alphaTo="1" duratio
<mx: on="1000"/>
>
</mx:showE
Effect>
<mx:hideEf
ffect>
:Fade alphaFrom="1" alphaTo="0" duratio
<mx: on="1000"/>
>
</mx:hideE
Effect>
</mx:Image>
<mx:HSlider x="2
248" y="50" maximum=
="250"
cha
ange="gambar.height=
=event.currentTarget
t.value" liveDraggin
ng="true"/>
>
<mx:HSlider x="1
10" y="44" minimum="
"0" maximum
m="360"
cha
ange="gambar.rotatio get.value" liveDragg
on=event.currentTarg ging="true" width="2
212"/>
<mx:CheckBox x="
"434" y="44" label="
"Visible"
cha
ange="gambar.visible
e=event.currentTarge
et.selected" selecte
ed="true"/>
>
<mx:Label x="248
8" y="18" text="Ukur
ran"/>
<mx:Label x="10"
" y="18" text="Rotas
si"/>
</m
mx:Application>
 

Thaank You !