Merhabalar,Bu yazımızda Adobe Flex, PHP ve MySQL ile bir üyelik sisteminin kullanıcı adı ve şifre kontrol kısmını programlayacağız. Bu işlem için belirttiğim gibi PHP ve MySQL’den yararlanacağız. Kullanıcı adı ve şifre kontrol sisteminin gerçekleştirebilmeniz için PHP ve MySQL yeterli düzeyde bilmeniz gerekmektedir. Bu yazımızda asıl anlatmak istediğimiz Adobe Flex2 ile veritabanı bağlantısının nasıl yapıldığı olacak. Ancak PHP ve MySQL hakkında yeterli bilgisi olmayanlar için en azından MySql ile basit bir veritabani oluşturma ve veri girme işlemini anlatmak ta faydalı olacaktır diye düşünüyorum.

İlk olarak Flex ile veritabani bağlantısı yapma üzerine biraz konuşalım. Bildiğiniz gibi Flash veya Flex direk olarak veritabanina bağlanma özelliğine sahip değiller. Flex içerisine veri tabanından verileri almak Flash’a kıyasen daha basit yöntemlerle yapılabiliyor. Bizler amatör Adobe Flex kullanıcıları olarak projelerimizi Flex’te oluştururken Basic olarak açıyoruz. Adobe Flex 2 ile geliştirebileceğimiz üç tür proje var. Bunlardan ilki Basic’tir. Basic (temel) projeler statik uygulamalar olabileceği gibi PHP, JSP veya ASP.NET ile birlikte geliştirilen dinamik uygulamalarda olabilirler. İkinci tip Flex projeleri ColdFusion ile birlikte oluşturulan projeler , ve üçüncü tip Flex projeleri ise Flex Data Services projeleridir. Yukarıda da belirttiğim gibi biz amatör Flex kullanıcıları olarak projelerimizi şimdilik Basic statüsünde geliştirmeye devam edeceğiz.

Bildiğiniz gibi Flex içerisinde bir akış çizgimiz olamadığı için animasyon hazırlama gibi bir imkanımız olmuyor. Ancak yukarıda bahsettiğim giriş sayfasından kullanıcı sayfasına geçiş için bize iki adet sahne gerekiyor. Flash kullancılarının aklına ilk gelen çözüm elbette ki ‘frame’ oluyor. Animasyonun ilk karesi giriş ekranı ve ikinci karesi ise kullanıcı ekranı olarak hazırlandıktan sonra giriş bilgilerinden doğru sonuç döndüğü taktirde ikinci frame’e geçiş yapılacaktır. Flash içerisinde bunu yapmanın bir çok yöntemi vardır. İkinci olarak aklımıza gelen yöntem frame’ler ile değil de Scene (sahne) ler arasında geçiş ile yapılabilir. İşte Flash’taki Scene (sahne) kavramına karşılık Flex’te State’ler var. Bizde bu uygulamamızda iki adet State kulanarak işlemimizi gerçekleyeceğiz.

Evet Adobe Flex 2’yi açarak yeni bir proje oluşturalım. Bu uygulamada bir üyelik sisteminin sadece login (giriş) kısmını yapacağımızdan bahsetmiştim. Basit olarak şöyle düşünebilirsiniz; uygulamamız açıldığında gördüğümüz ekranda kullanıcıdan, kullanıcı adı ve şifre bilgilerini alacak olan iki adet textInput bileşeni, ve bu bilgilerin kontrol edilmesi için veritabanımıza gönderme işlemini yapacak olan buton olacak. Bunun için gerekli olan bileşenleri Components Panelinden sahneye sürükleyelim. Aşağıdaki kodlar Panel bileşeni içerisine eklenmiş textInput ve buton bileşenlerini projenizde oluşturacaktır.

<mx:Panel id="panel1" title="Üye Girişi" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"
resizeEffect="Resize" layout="absolute" horizontalCenter="0" verticalCenter="-2.5" width="300" height="150">
<mx:HBox width="100%" x="10" y="10" id="hbox2">
<mx:Label x="10" y="10" text="Kullanıcı Adı :" id="label1" width="90"/>
<mx:TextInput id="username"/>
</mx:HBox>

<mx:HBox width="100%" x="10" y="40" id="hbox1">
<mx:Label x="10" y="66" text="Şifre :" id="label2" width="90"/>
<mx:TextInput id="password" displayAsPassword="true"/>
</mx:HBox>

<mx:ControlBar>
<mx:Label text="Kullanıcı Adı: demo, Şifre: demo" id="label3"/>
<mx:Spacer width="100%"/>
<mx:Button x="10" y="122" label="Giriş" id="Submit" click="login_user.send();"/>
</mx:ControlBar>
</mx:Panel>

Form elemanlarımızı uyguamamıza ekledikten sonra yapmamız geren işlem, giriş yapıldıktan sonra gidilecek olan State’ i oluşturmak. Yeni bir State oluşturmak için, Flex içerisinde Design sekmesine geçelim ve sağ üstte bulunan States Panelinden Base state üzerine sağ tıklayarak New State komutunu verelim. Yeni oluşturacağımız State’e ‘kullanici’ ismini verelim ve OK butonuna basalım. Evet yeni State’imizi oluşturduk. Otomatik olarak ana sahnemizde bulunan form paneli ikinci oluşturduğumuz sahneye de eklendi. Biz ikinci sahnemizde giriş formunun olmasını istemiyoruz.

O yüzden form panelini içindeki form elemanlarını siliyoruz. İkinci sahnemizde sadece Panel bileşenimiz kalıyor. Panel bileşenimizin başlık kısmını değiştiriyoruz ve bu panel içine kullanıcının giriş yaptığında görmesini istediğiniz bir mesaj içeren bir label bileşeni ekleyebilirsiniz.

Uygulamamızın Panel, Form ve State işlemlerini tamamladık artık. Şimdi Flex içerisinde HTTPService kullanarak kullanıcının girdiği bilgileri POST metodu ile PHP scriptimize göndereceğiz. HTTPService ‘result’ parametresi, birazdan yazacağımız ActionScript fonksiyonumuzu almak üzere ayarlandı. ‘showBusyCursor’ seçeneğini true olarak girdik, bu kullanıcı bilgilerini girdiğinde veritabanından yanıt gelene kadar faremizin minik bir bekleme cursor’ına dönüşmesini sağlayacak. Son olarak ‘url’ kısmına PHP dosyamızın serverdaki yolunu yazıyoruz. Aşağıdaki kodları çalışmamıza ekleyelim.

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

Şimdi ise ActionScript ile veritabanımızdan dönecek sonuca göre uygulama içerisinde yapılacak olan yönlendirme işlemini gerçekleştireceğiz. Yani yukarıda HTTPService içerisinde ‘result’ parametresine atadığımız fonksiyonumuzu yazacağız.

[/code]<mx:Script> <![CDATA[ import mx.rpc.events.ResultEvent;

private function checkLogin(evt:ResultEvent):void { if(evt.result.loginsuccess == "yes") { currentState = "kullanici"; } if(evt.result.loginsuccess == "no") { mx.controls.Alert.show(’Kullanıcı Adı – Şifre Geçersiz! Lütfen Tekrar Deneyiniz’); } } ]]> </mx:Script>[/code]

Flex kullanıcı bilgilerini PHP scriptimize gönderdiğinde PHP scriptimiz veritabanımız ile bağlantı kuracak ve verilerin doğruluğunu kontrol edecek. Bu işlem sonucunda üreteceği değeri XML formatında üretecek. Ürettiği XML <loginsuccess>yes</loginsuccess> veya <loginsuccess>no</loginsuccess> şeklinde olacak. Bu sonuca göre bizde Flex içerisinde şartlandırmalarımız yapacağız. Yani fonksiyonumuz parametre olarak aldığı değeri kontrol edecek. Eğer ‘loginsuccess’, ‘yes’ değerine sahip ise uygulama ‘kullanici’ isimli state’e gidecek, ‘no’ değerine sahip ise kullanıcıya bir hata mesajı görüntüleyecek.

Evet uygulamamızın Flex ile programlanacak kısmını bitirdik. Flex içerisideki tüm kodlarımız son hali ile aşağıdaki gibi olacaktır.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundGradientColors="[#FFFFFF, #CCCCCC]">
<mx:states>
<mx:State name="kullanici">
<mx:AddChild position="lastChild">
<mx:Panel width="474" height="261" layout="absolute" title="Kullanıcı Sayfası">
<mx:Label text="Giriş Başarılı" horizontalCenter="0" verticalCenter="-12.5"/>
</mx:Panel>
</mx:AddChild>
<mx:RemoveChild target="{panel1}"/>
</mx:State>
</mx:states>
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;

private function checkLogin(evt:ResultEvent):void
{
if(evt.result.loginsuccess == "yes")
{
currentState = "kullanici";
}
if(evt.result.loginsuccess == "no")
{
mx.controls.Alert.show('Kullanıcı Adı - Şifre Geçersiz! Lütfen Tekrar Deneyiniz');
}
}
]]>
</mx:Script>

<!-- HTTPService url parametresine login.php dosyanızın server'ınız üzerindeki yolunu yazmalısınız -->
<mx:HTTPService id="login_user" result="checkLogin(event)" showBusyCursor="true" method="POST" url="http://www.sizinsiteniz.com/FlexLogin/login.php" useProxy="false">
<mx:request xmlns="">
<username>
{username.text}
</username>
<password>
{password.text}
</password>
</mx:request>
</mx:HTTPService>
<mx:Panel id="panel1" title="Üye Girişi" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"
resizeEffect="Resize" layout="absolute" horizontalCenter="0" verticalCenter="-2.5" width="300" height="150">
<mx:HBox width="100%" x="10" y="10" id="hbox2">
<mx:Label x="10" y="10" text="Kullanıcı Adı :" id="label1" width="90"/>
<mx:TextInput id="username"/>
</mx:HBox>
<mx:HBox width="100%" x="10" y="40" id="hbox1">
<mx:Label x="10" y="66" text="Şifre :" id="label2" width="90"/>
<mx:TextInput id="password" displayAsPassword="true"/>
</mx:HBox>
<mx:ControlBar>
<mx:Label text="Kullanıcı Adı: demo, Şifre: demo" id="label3"/>
<mx:Spacer width="100%"/>
<mx:Button x="10" y="122" label="Giriş" id="Submit" click="login_user.send();"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>

Artık yapmamız gereken veritabanımızı ve php scriptimizi oluşturmak. Öncelikle veritabanımızı oluşturalım. MySQL ile veritabanı oluşturmanın çok farklı yolları mevcut. Bu işlemi yapan bir çok yazılım mevcut, ancak biz bilgisayarımıza herhangi bir yazılım kurmadan bu işlemi server üzerinde phpMyAdmin ile gerçekleştireceğiz. Bunun için serverımızın cpanel’ine girelim (http://www.sizinsiteniz.com/cpanel) . Cpanel için kullanıcı adı ve şifremizi girdikten sonra açılan pencerede MySQL® Databases seçeneğini seçelim (Bkz. Resim-1).

Bu seçeneği seçtiğimizde açılan MySQL Account Maintenance sayfasında Current Databases kısmında bulunan New Database text kutusuna veritabanımıza vereceğimiz ismi girelim ve Create Database butonuna tıklayalım. (Bkz. Resim-2)

NOT: Bu ismi php scriptimizin içinde kullanacağız.

Bu işlemlerden sonra belirttiğimiz isimde veritabanımız serverımız üzerinde oluşturuldu. Şimdi ise veritabanımızı kullanmamızı sağlayacak olan veritabanı kullanıcı adı ve şifresi oluşturalım. Bunun için yine az önce veritabanımızı oluşturduğumuz sayfaya dönelim. Bu sayfada Current Users kısmında bulunan Username ve Password text kutularına veritabanımız için kullanacağımız kullanıcı adı ve şifremizi yazalım ve Create User butonuna tıklayalım(Bkz. Resim-3).

NOT: Burada oluşturduğumuz kullancı adı ve şifreyi yine php scriptimiz içerisinde kullacağız.

Veritabanımızı ve veritabanımızı kullanmamızı sağlayacak olan kullanıcı hesabını oluşturduk. Son olarak oluşturduğumuz veritabanını ve kullanıcını hesabını birbiriyle ilişkilendirme işlemini yapalım ve veritabanımızı oluşturmaya başlayalım. Veritabanımızı ve oluşturduğumuz kullanıcı birbiriyle ilişkilendirmek için yine yukarıdaki işlemleri yaptığımız sayfada bulunan Add Users To Your Databases kısmında bulunan iki adet açılır kutu var. Bunlardan ilki User ikincisi ise Databases. Bu açılır kutularda oluşturulan veritabanları ve kullanıcı hesapları sırlanmış haldedir. User kutusundan az önce oluşturduğumuz kullanıcıyı seçelim ve Databases kutusundanda kullanıcıdan önce oluşturmuş olduğumuz veritabanını seçelim. Son olarak aşağıdaki işaretlenecek olan seçeneklerden ALL kutusunu işaretleyelim ve Add User To Database butonuna tıklayarak kullanıcı hesabımızı ve veritabanımızı ilişkilendirelim. (Bkz. Resim-4)

DİKKAT!: Bazı serverlarda oluşturulan veri tabanı ve kullanıcı isimlerinde sizin verdiğiniz isimlerin önüne server kullanıcı adınız ekleniyor. Mesela server kullanıcı adımız tekno olsun, ve oluşturduğumuz veritabanı ismi ise fxdb olsun. Veritabanını oluşturduğunuzda veri tabanı ismi otomatik olarak tekno_fxdb şeklinde oluşuyor. Buna dikkat etmeliyiz çünkü eğer bu şekilde oluşmuş ise php scriptimizde de bu ismi yazmalıyız.

Artık veritabanımızı ve kullanıcı hesabımızı oluşturduk. Sırada phpMyAdmin’i kullanarak veritabanımızda tablolarımızı ve alanlarımızı oluşturup verilerimizi girme işlemi var. Yukarıdaki işlemler sırasında kullandığımız MySQL Account Maintenance sayfasının en altın bulunan phpMyAdmin yazısı üzerine tıklıyoruz (Bkz. Resim-5). Açılan pencere serverımız üzerindeki veritabanlarını yöneteceğimiz bir online yazılım olan phpMyAdmin’e ait.

PHPMyAdmin penceresinde sol kısımdaki açılır kutudan oluşturduğumuz veritabanı ismini bulalım ve seçelim. Bu işlemden sonra veritabanımızın sayfası açılacak. Açılan bu sayfa üzerinden veritabanımız için bir çok işlemi gerçekleştirebilir. İlk hali ile veritabanımız boş durumda. İlk olarak veritabanımızda bir tablo oluşturacağız. Veritabanımızda bir adet tablo oluşturacağız. Bunun için tablo oluşturma alanında boş olan İsim kutusuna ‘users’ ismini, Alan Sayısı kutusuna ise 3 değerini girelim ve Git butonuna tıklayalım. (Bkz. Resim-6)

Açılan pencerede veritabanımız içerisinde oluşturulan users isimli tablonun şuanda boş olan üç alanını görüyoruz.

Bu alanları Resim-7’deki gibi dolduralım ve Kaydet butonuna basalım. Artık veritabanımızda tablomuzu ve alanlarımızı oluşturma işlemimiz tamamlandı. Buradaki üç alan sizinde tahmin ettiğiniz gibi id eklenen kullanıcıların sıra numaraları (sıra ile otomatik değer alacak), username kullanıcı adı ve password ise şifre bilgilerini tutmak için kullanılacak.

Son olarak tablomuzda bir adet kullanıcı bilgisini girelim ve işlemi tamamlayalım. Bunun için üst menudeki Ekle butonuna basalım.

Açılan pencerede ki boş alanlara bilgileri Resim-8’deki gibi girelim ve Git butonuna tıklayalım. Veritabanımıza verilerimizi kaydettik. Yine üst menüden Gözat butonuna tıkladığımızda girilen bilgileri görebiliriz.

Projemizi tamamlamak için yapacağımız son işlem ise php scriptimizi oluşturmak. Php scriptimiz için projemiz içerisine login.php isminde bir php dosyası oluşturalım ve içerisine aşağıdaki kodları ekleyelim.

<?php
define( "DATABASE_SERVER", "localhost" );
define( "DATABASE_USERNAME", "veritabani_kullanici adi" );
define( "DATABASE_PASSWORD", "veritabani_sifresi" );
define( "DATABASE_NAME", "veritabani_ismi" );
//servera baglaniyoruz
$mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD) or die(mysql_error());
//veri tabanini seciyoruz
mysql_select_db( DATABASE_NAME );
//veritabanındaki alanları Flexteki degiskenlere atiyoruz
$username = mysql_real_escape_string($_POST["username"]);
$password = mysql_real_escape_string($_POST["password"]);
//KullaniciAdi/Sifre gecerlimi diye veritabanina soruyoruz
$query = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
$result = mysql_fetch_array(mysql_query($query));
//Geri donecek XML sonucunu belirliyoruz
$output = "<loginsuccess>";
//Eger dogru sonuc donmus ise geri donecek deger <loginsuccess>yes</loginsuccess> degilse bu deger <loginsuccess>no</loginsuccess> olarak ataniyor
if(!$result)
{
$output .= "no";
}else{
$output .= "yes";
}
$output .= "</loginsuccess>";
//Tum XML'i aktariyoruz
print ($output);
?>

PHP kodlarımızı içerisinde veritabanı kullanıcı adı, veritabanı şifresi ve veritabanı ismini ilgili yerlere giriyoruz ve kaydediyoruz. Evet böylece projemizi tamamlamış olduk. Yukarıdaki işlemleri eksiksiz tamamlamış iseniz artık uygulamanızı serverda test ettiğinizde, uygulamanız veritabanından kullanıcı adı ve şifre sorgusunu yapacak ve dönen sonuca göre ya kullanıcı sayfasını açacak yada girilen hatalı bilgiler için size bir hata mesajı verecektir.

Görüşmek üzere. Kolay Gelsin..