Inlogsysteem met AIR

Je kunt een verbinding maken met een database in Adobe Flex. Hiervoor is het niet nodig om veel van ActionScript te weten zoals in Flash. Als eerst maken we de lay-out en de dynamische mxml onderdelen. Daarna komt de ActionScript die gaat functioneren met de PHP pagina op de server. De PHP pagina gaat vervolgens de data van de AIR applicatie vergelijken met die van de database en stuurt deze terug in xml.

Maak een nieuw AIR project aan en noem het iets van "LoginSysteem" of zo. Op de lege pagina sleep je een panel naar de stage en voeg je de labels "Usernaam" en "Password" toe. Hieronder zet je twee inputvelden. Geef de een de naam "username" en de andere "password", let er op de het inputveld password ook een wachtwoord is, dus met sterretjes. Voeg vervolgens een submit button toe met de ID "Submit" en het label "Logon". Als het goed is ziet je mxml code er zo uit:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Panel x="147" y="107" width="213" height="169" layout="absolute" id="panel1" title="Inlogsysteem in AIR">
		<mx:TextInput x="10" y="26" id="username"/>
		<mx:TextInput x="10" y="69" id="password" displayAsPassword="true"/>
		<mx:Text x="10" y="10" text="Username" id="text2"/>
		<mx:Text x="10" y="49" text="Password" id="text1"/>
		<mx:Button x="110" y="99" label="Logon" id="Submit" click="login_user.send()"/>
	</mx:Panel>
</mx:WindowedApplication>

Nu moet de data verbinding gaan maken met de buitenwereld en dat doen we met de "HTTPService" functie. Voeg de onderstaande code toe bovenin je script.

<mx:HTTPService id="login_user" result="checkLogin(event)" showBusyCursor="true" method="POST" url="http://www.mijndomein.com/login.php"	useProxy="false">
		<mx:request xmlns="">
			<username>{username.text}</username>
			<password>{password.text}</password>
		</mx:request>
</mx:HTTPService>

De {username.text} en de {password.text} zijn afkomstig van de inputvelden. Let er wel op dat je mijndomein.com vervangt door je eigen domeinnaam. Voor de rest spreekt deze code voor zich.

Voeg deze code in het midden van je mxml document toe:

<mx:Script>
<![CDATA[
import flash.events.Event;
import mx.rpc.events.ResultEvent;
import mx.controls.*

private function checkLogin(evt:ResultEvent):void
{
	if(evt.result.loginsuccess == "yes")
	{
	currentState = "Member Area";
	}
	if(evt.result.loginsuccess == "no")
	{
		mx.controls.Alert.show("Invalid username/password");
	}		
}
]]>
</mx:Script>

Eerst worden de verschillende classen ingevoegd en daarna word de functie "checkLogin" aangemaakt. De code bij het If-else-statement controleert wat de php pagina heeft teruggegeven. Geeft de php pagina 'yes' dan moet hij zich verplaatsen naar de volgende state namelijk "Member Area". Als er uit de php pagina 'no' komt word er een Alertbox getoond met het bericht dat de gegevens niet goed zijn.

De PHP pagina ziet gewoon als volgt uit:
<?php require_once('../Connections/connection.php');
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}

// *** Validate request to login to this site.
if (!isset($_SESSION)) {
session_start();
header("Cache-control: private");
}

$loginUsername = $_POST['username'];
$password = md5($_POST['password']);
mysql_select_db($database_connection, $connection);

$LoginRS__query=sprintf("SELECT name, password FROM tb_login WHERE name=%s AND password=%s",
GetSQLValueString($loginUsername, "text"), GetSQLValueString($password, "text"));

$LoginRS = mysql_query($LoginRS__query, $connection) or die(mysql_error());
$loginFoundUser = mysql_num_rows($LoginRS);
if ($loginFoundUser){
// *** Create the XML.
$output = "<loginsuccess>yes</loginsuccess>";
}else{
$output = "<loginsuccess>no</loginsuccess>";
}

print ($output);
?>
Natuurlijk moet je sommige dingen in dit script even aanpassen voor eigen gebruik, maar de meeste code moet toch wel te begrijpen zijn. In de laatste regels word de XML gemaakt die terug word gestuurd naar de AIR applicatie.

Maak een nieuwe state en noem die "Member Area". Haal alles weg uit deze state en zet er een vrolijk tekstje in, onthoud wel dat dit de pagina is waar je naar toe word gestuurd als de gegevens goed zijn.

Voor een mooie overgang in het panel voeg je deze code toe aan je panel element:

<mx:Panel resizeEffect="Resize" >

Als het goed is ziet je hele mxml document er zo uit:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:states>
		<mx:State name="Member Area" >
			<mx:SetProperty target="{panel1}" name="x" value="10"/>
			<mx:SetProperty target="{panel1}" name="y" value="10"/>
			<mx:SetProperty target="{panel1}" name="width" value="511"/>
			<mx:SetProperty target="{panel1}" name="height" value="336"/>
			<mx:RemoveChild target="{Submit}"/>
			<mx:RemoveChild target="{password}"/>
			<mx:RemoveChild target="{username}"/>
			<mx:RemoveChild target="{text1}"/>
			<mx:RemoveChild target="{text2}"/>
		</mx:State>
	</mx:states>
	<mx:HTTPService	id="login_user"	result="checkLogin(event)" showBusyCursor="true" method="POST" url="http://www.mijndomein.com/login.php"	useProxy="false">
		<mx:request xmlns="">
			<username>{username.text}</username>
			<password>{password.text}</password>
		</mx:request>
</mx:HTTPService>
<mx:Script>
<![CDATA[
import flash.events.Event;
import mx.rpc.events.ResultEvent;
import mx.controls.*

private function checkLogin(evt:ResultEvent):void
{
	if(evt.result.loginsuccess == "yes")
	{
	currentState = "Member Area";
	}
	if(evt.result.loginsuccess == "no")
	{
		mx.controls.Alert.show("Invalid username/password");
	}		
}
]]>
</mx:Script>
	<mx:Panel x="147" y="107" width="213" height="169" layout="absolute" id="panel1" resizeEffect="Resize" title="Loginsysteem">
		<mx:TextInput x="10" y="26" id="username"/>
		<mx:TextInput x="10" y="69" id="password" displayAsPassword="true"/>
		<mx:Text x="10" y="10" text="Username" id="text2"/>
		<mx:Text x="10" y="49" text="Password" id="text1"/>
		<mx:Button x="110" y="99" label="Logon" id="Submit" click="login_user.send()"/>
	</mx:Panel>
</mx:WindowedApplication>

Merk op dat er bij de Submitbutton een functie is gekomen die verwijst naar de "checkLogin" functie.

Je kunt het script nog verder aanpassen en ik hoop dat jullie het een beetje snappen.