Tutorial Flex

Assalamualaikum , kali ini saya akan mencoba untuk berbagi ilmu IT , yaitu contoh membuat aplikasi menggunakan flex, pertama saya akan mencoba membuat contoh yang gampang saja , yaitu sara membuat fungsi login:

1.Buat databasenya terlebih dahulu tetapi disini sayamenggunakan database mysql..

create database dblogin,

create table user (username varchar(10) not null,password varchar(15) not null);

2.Setelah selesai membuat database kemudian kita membuat script php untuk koneksi ke mysqlnya

connect.php

<?php
mysql_connect(“localhost”,”root”,””);
mysql_select_db(“hehe”);
?>

login.php

<?
include “connect.php”;
$nim = $_POST[‘nim’];
$pass = $_POST[‘password’];

$admin = mysql_query(“select * from login where username=’$nim’ and password=’$pass'”);

$output = “<cekUser>”;
$cek=mysql_num_rows($admin);

if($cek) {
$output .= “ok”;
}
else {
$output .= “no”;
}
$output .= “</cekUser>”;

print ($output);
?>

3.kemudian setelah itu kita buat dulu action scriptnya di flex..,

import mx.collections.*;
import mx.controls.*;
import mx.managers.*;
import mx.rpc.events.*;
private function loginResult(event:ResultEvent):void {
if(event.result.cekUser == “ok”)
StackTest.selectedChild = cnvsAdmin;
if(event.result.cekUser == “no”) {
Alert.show(‘Invalid NIM / Password’);
txtNIM.text = “”;
txtPass.text = “”;
}
}
private function bersih():void {
txtNIM.text = “”;
txtPass.text = “”;
}
private function logOut():void {
currentState=”;
StackTest.selectedIndex=0;
bersih();
}

4.setelah buat action scriptnya baru deh kita buat di coding tampilan dan untuk fungsinya di mxml applicationnya:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”absolute” width=”100%” height=”100%”
verticalAlign=”middle” horizontalAlign=”center” pageTitle=”Test”>

<mx:Script source=”Script.as”/>

<mx:HTTPService id=”cekLogin” result=”loginResult(event)” showBusyCursor=”true”
method=”POST” url=”http://localhost/Test/src/cekLogin.php&#8221; useProxy=”false”>
<mx:request xmlns=””>
<nim> {txtNIM.text} </nim>
<password> {txtPass.text} </password>
</mx:request>
</mx:HTTPService>

<mx:ViewStack id=”StackTest” width=”100%” height=”100%” verticalCenter=”0″ horizontalCenter=”0″
selectedIndex=”0″>
<mx:Canvas id=”cnvsLogin” horizontalCenter=”0″ verticalCenter=”0″>
<mx:Panel width=”295″ height=”212″ layout=”absolute” title=”Login Panel”
cornerRadius=”5″ horizontalCenter=”0″ verticalCenter=”0″
horizontalAlign=”center” verticalAlign=”middle” alpha=”0.9″>
<mx:Text text=”Username :” x=”10″ y=”32″/>
<mx:TextInput id=”txtNIM” x=”95″ y=”30″ width=”141″
maxChars=”30″ toolTip=”Input your Username”/>
<mx:Text text=”Password :” horizontalCenter=”-95″ verticalCenter=”13″/>
<mx:TextInput id=”txtPass” x=”95″ y=”70″
width=”141″ toolTip=”Input your Password” displayAsPassword=”true”/>
<mx:ControlBar horizontalAlign=”center” verticalAlign=”middle”>
<mx:Button label=”Login” width=”85″ click=”cekLogin.send()”/>
<mx:Button label=”Cancel” width=”85″ themeColor=”#FF0000″ click=”bersih()”/>
</mx:ControlBar>
</mx:Panel>
</mx:Canvas>
<mx:Canvas id=”cnvsAdmin” horizontalCenter=”0″ verticalCenter=”0″>
<mx:Panel width=”638″ height=”320″ layout=”absolute” title=”Admin Panel” horizontalCenter=”0″ verticalCenter=”10″>
<mx:Text text=”You’re Administrator” x=”10″ y=”10″/>
<mx:Button label=”LogOut” fontWeight=”normal” themeColor=”#FF0000″ color=”#C50000″
click=”logOut()”  x=”542″ y=”248″/>
</mx:Panel>
</mx:Canvas>
</mx:ViewStack>
</mx:Application>
Begini tampilannya kalau sudah selesai: