Ajax ve PHP İle Komple Proje Yönetimi

Bildiğiniz üzere PHP, Web (ağ) uygulamaları geliştirmede kullanılan bir programlama dilidir. Ajax ise JavaScript, DOM ve XMLHttpRequest teknolojisinin kombinasyonu sayesinde sunucu ile kullanıcı arasında dinamik etkileşimler kurulmasını sağlayan bir Ağ tekniği olmakla beraber; yeni bir programlama dili değildir.

Bu makalede size PHP, Ajax ve veritabanı olarak MySQL altyapısını kullanarak dinamik bir Ağ uygulamasını nasıl geliştireceğinizi, hepsinin ötesinde; bunu komple bir proje olarak ele alıp, ufak ölçekli bir projenin başından sonuna kadar nasıl hayata geçirileceğini adım adım anlatacağım.


I. Başlarken
Proje geliştirmek, ama nasıl?
Hazır sınıflar ve kullanımı
II. Kod adı: nMembership
Macromedia® Dreamweaver 8®, Yeni site oluşturmak
Dosya ve klasör yerleşimi
MySQL™ 5.0 ile veritabanı oluşturmak ve ezSQL
III. Klasörler yavaş yavaş dolarken...
Peki ne yapacağız bilen var mı?
Herşeyden önce altyapı
Prototype'im benim
Kendi sınıfını kendin yaz
Ortaya yeşillik: Ajax
IV. Daha dinamik, daha estetik
Efektler, efektler...
Küçük detaylar
V. Kaynaklar, tavsiyeler
İndirme kaynakları
Bunları okuyun

Proje geliştirmek, ama nasıl?
Yapılan araştırmalara göre günümüzde Ağ uygulamalarının %40 gibi bir oranı PHP dilini kullanıyor. Web 2.0 ile birlikte patlama yaşayan uygulamalar içindeki oranı ise hemen hemen %80 civarında. Her ne kadar Ajax işin içine katıldığında Ruby ile kıyasıya bir rekabet içerisinde olsa da, uygulama geliştiriciler için PHP halen popüler bir ortam.

Bir uygulamayı dağınık kod ve dosya yapıları ile geliştirmek; test aşamasında meydana gelebilecek aksaklıkları gidermek ve proje sonunda doğabilecek artı istekleri gerçekleştirmek açısından geliştirici için oldukça büyük sıkıntılar doğurur. Bunun yerine bir disiplin içerisindeki kişisel standartlarla, kendi çizdiğimiz prosedürlerle hareket etmek, her zaman için daha iyi verim almamızı ve problem tespiti/giderme işlemlerinde sürate olanak sağlar.

elbette zorlu bir parkurun eşiğinde olabilirsiniz. Fakat bu makalenin esas amacının, size bu yeteneği ve mantık yapısını kazandırmak olduğunu bilmenizi istiyorum. Dilerseniz kaynaklar bölümünde bunu sizin için daha önceden yapmış arkadaşların Framework (Uygulama geliştirme ortamı, O.K.)'lerini bulabilirsiniz. Ama burda kendi ortamımızı yaratıp, bir standardizasyon sağlamaya çalışacağız.

Hazır sınıflar ve kullanımı
Her ne kadar kendi ortamımızı yaratacağız derken, "yazılmışı var ama biz niye yazmıyoruz" edalarıyla hava atmaya çalışsam da, Kuzey Buz Denizi'ni yeniden keşfetmeye gerek yok sanırım. Tabiki iyi yazılmış sınıfları yerinde ve uygun ölçüleriyle kullanmak her zaman için iyi olacaktır.

PHP sınıflarını aramak için benim takip ettiğim yegane site şu an için PHPClasses.org. Üye olduğunuz taktirde her gün siteye yeni eklenen sınıflar hakkındaki kısa bilgilieri e-posta adresinize göndermekten üşenmiyorlar. Prototype ise JavaScript kütüphaneleri içerisinde en gelişmiş ve en popüler olanı. Kullanımını anlatan kaynak sıkıntısına ise Sergio Pereira, Developer Notes for prototype.js başlıklı makalesinde oldukça güzel bir çözüm getirmiş.

Hazır PHP sınıflarının kullanımı, sınıfın özelliklerine ve kullanım alanına göre değişmektedir. Sınıf yazımında ortak bir yazım standardı uygulanamayacağı için geliştiriciler sınıf dosyalarıyla beraber sınıfın nasıl kullanılacağını anlatan bir/birkaç örnek uygulamayı da sunmaktalar.

Üstünkörü tarif etmektense ufak (?) bir sınıf yazıp bunu nasıl kullandığımızı, örneklerle açıklamak istiyorum. Aşağıda görebileceğiniz ornek_sinif adındaki sınıfımız içinde dört adet fonksiyon bulunuyor. Bunlar; sınıfın içindeki genel değişkenleri, sabitleri vs. belirleyen ornek_sinif(), toplama işlemini gerçekleştiren topla(), çarpma işlemini gerçekleştiren carp() ve tüm fonksiyonları bir arada kullanabilmemizi sağlayan islem() adlı fonksiyonlarımız. Tüm fonksiyonlarımız argümanlarını array (dizi değişkeni) olarak alıyor. Bu nedenle toplama, çarpma ve toplu hesap işleminde herhangi bir rakam kısıtlaması yok. Önce fonksiyona göz atın ve ardından bu sınıfımızı nasıl kullanacağımıza bakalım.

PLAIN TEXTPHP:
class ornek_sinif {
var $hesaplayan;

function ornek_sinif()
{
$this->hesaplayan = "Onur Köse";
}

function carp($rakamlar)
{
$carpma_sonuc = 0;
$sayac = 0;

if ( !is_array($rakamlar) )
return 0;

foreach ( $rakamlar as $rakam )
{
$carp_cache = 0;

if ( $sayac == 0 )
{
$carpma_sonuc = $rakam;
$sayac = 1;
}
elseif ( $sayac == 1 )
{
$carp_cache = $carpma_sonuc * $rakam;
$carpma_sonuc = 0;
}

$carpma_sonuc += $carp_cache;
}

return $carpma_sonuc;
}

function topla($rakamlar)
{
$toplama_sonuc = 0;

if ( !is_array($rakamlar) )
return $toplama_sonuc;

foreach ( $rakamlar as $rakam )
$toplama_sonuc += $rakam;

return $toplama_sonuc;
}

function islem($degerler)
{
$islem_sonuc = 0;

if ( !is_array($degerler) )
return $islem_sonuc;

for ( $i = 0; $i <count($degerler[islemler]); $i++ )
switch ( $degerler[islemler][$i] )
{
case "topla":
$islem_sonuc += $this->topla($degerler[rakamlar][$i]);
break;
case "carp":
$islem_sonuc += $this->carp($degerler[rakamlar][$i]);
break;
}

$islem_sonuc = "Hesaplayan: ".$this->hesaplayan."\nSonuç: ".$islem_sonuc;

return $islem_sonuc;
}
}

Bir sınıfı kullanmak için öncelikle sınıfı bir nesne olarak ele almalıyız.

$hesapla = new ornek_sinif();

Artık $hesapla adlı değişkenimizi ornek_sinif() nesnesine eşitledikten sonra sınıfımıza ait fonksiyonları $hesapla değişkeni üzerinden kullanabiliriz. Örnek olarak bir toplama işlemini;

echo $hesapla->topla( array(5, 5, 3, 4, 6) );

şeklinde hesaplattıktan sonra ekranda elde edeceğimiz çıktı (5+5+3+4+6) 23 olacaktır. Bir çarpma işlemi yaptırmak istersek;

echo $hesapla->carp( array(5, 5, 2, 2) );

ile ekrana (5x5x2x2) 100 yazdıracağız. Hepsinin sonunda tek bir satırda tüm işlemleri istediğimiz kadar kullanmamızı sağlayan islem() fonksiyonunu ise şu şekilde kullanabiliriz -çok dizi değişkeni kullanıldığından açarak yazıyorum-;

PLAIN TEXTPHP:
echo $hesapla->islem(
array(
"islemler"=>array(
"topla", "carp"
),
"rakamlar"=>array(
array(5, 5, 3, 4, 6),
array(5, 5, 2, 2)
)
)
);

Gördüğünüz üzere hazır sınıflar, nasıl kullanılacakları anlatıldığı taktirde oldukça basit ve kullanışlıdır
Macromedia® Dreamweaver 8®, Yeni site oluşturmak
Çoğu DW (Dreamweaver) kullanıcısının bilmediği ya da bildiği halde nimetlerinden nasıl yararlanacağı hakkında fikri olmadığı için kullanmadıkları bir konuya değinmek istiyorum. DW'da Site oluşturmak ve kullanmak hakkında anlatacaklarım, projelerinizi kontrol altında tutabilmek açısından oldukça faydalı olacaktır.

1. DW'da yeni bir Site oluşturmak için önce üst menüdeki "Site"ye, ardından açılan menüdeki "New site" sekmesine tıklayın.


2. Açılan pencerenin üstünde "Basic" ve "Advanced" başlıklı iki adet sekme bulunmaktadır. Bunlardan "Basic" yazanına tıklayarak devam edelim. "What would you like to name your site?" başlıklı alana projemize verdiğimiz ismi yazalım. Ben bu projemizi "nMembership" olarak adlandırdım. Ardından "What is the HTTP address (URL) of your site?" başlıklı alana da bilgisayarınızdaki ya da ücreti mukabili kullandığımız -bir hosting firmasından satın aldığımız- sunucumuzun yayın yaptığı adresi yazalım. Ben bu alana projeyi kendi bilgisayarımda yürüttüğüm için "http://localhost/n_membership/" adresini girdim. Bilgileri girdikten sonra aşağıdaki "Next" butonuna tıklayın.



3. Geldiğimiz aşamada iki seçenek bulunuyor. Olayın özünü anlattığım için ben bu aşamayı "No, I don't want to use a server technology." seçeneğini işaretleyerek geçtim.

4. Bu aşamada -Testing Files- proje dosyalarımızı bulunduracağımız klasörün fiziksel adresini girmemiz gerekiyor. Eğer proje dosyaları kendi bilgisayarınızda yer alacaksa "Edit local copies on my machine, then upload to server when ready (recommended)" seçeneğini işaretledikten sonra altındaki alanın yanındaki klasör simgesine tıklayarak gerekli klasörü belirtin ve "Next" butonuna tıklayın.

5. Son adım olan "Sharing Files" aşamasında uygulamamızı bitirdiğimizde hangi ortamda yayınlayacağımızı belirtmemiz gerekiyor. Eğer projenizi bir sunucuda yayınlamak istiyorsanız buradaki "How do you connect to your remote server?" alanından "FTP"yi seçerek gerekli ftp hesap bilgilerinizi girmelisiniz. Ben herhangi bir sunucuda yayınlamayacağım için burayı "Local/Network" olarak bırakıp altındaki alana tekrar proje klasörünün fiziksel adresini girdim ve "Next" butonuna tıkladım. Karşımıza çıkan yeni adımda "No, do not enable check in and check out." seçeneğini işaretleyip tekrar "Next" butonuna tıklayalım.



6. Tüm işlemleri bitirdikten sonra karşımıza girdiğimiz bilgileri kontrol etmemiz için bir ekran çıktı. Bu bilgileri kontrol ettikten sonra "Done" butonuna tıklayarak işlemi bitirelim. Daha doğrusu, projeyi başlatalım

Artık DW bizim "nMembership" kod adlı projemizi hiç unutmayacak ve üst menüden "Window>Files" sekmesine tıkladığınızda karşınıza gelecek paneldeki ilk seçme kutusundaki sürücü listesinin altına eklenmiş şekilde projemizi görebileceğiz. Tıkladığımız anda karşımıza proje klasöründeki dosyalarımız ve klasörlerimiz gelecektir. Buranın fonksiyonlarını anlayabilmeniz için dilediğiniz dosya ya da klasöre sağ tıklayıp yapabileceğiniz işlemleri görebilirsiniz. Bu yaptığımız işin sonuçlarını projemizdeki dosya işlemlerinde ve proje sonunda hep beraber göreceğiz.

Bir projeyi büyük boyutlara ulaştığı anda dizginleyebilmenin en etkili yolu, projeye başlamadan önce gerekli hiyerarşinin oturtulacağı zeminin iyi belirlenmesidir. Tüm dosya klasörleri tek bir dizinde saklamak işleri ne kadar zorlaştıracaksa, detay olan her iş için ayrı klasör tutmakta en az o kadar zorlaştırır. Bu nedenle proje ihtiyaçları doğrultusunda sade, klasör isimleriyle neyin nerde olduğu kolay anlaşılabilir, dosya isimleriyle de ne işe yaradıkları bir bakışta farkedilebilir olmalıdır. Tabiki bunun tahlilini projenin en başında yapmak mümkün değildir. Çünkü çalıştıkça işler ve ihtiyaçlar artacak ve yeni dosya ve klasörlere ihtiyaç duyacağız. Ben başlangıçta nMembership için şöyle bir hiyerarşi kurdum;



Bunların dışında kalan detayları aklımda şu şekilde planladım;

Sayfalara include() ya da require() ile çağıracağım tüm dosyalarımı "includes" klasöründe saklayacağım,
XmlHttpRequest ile yapacağım işlemlerde "ajax" adlı klasör içerisine, işlemi içeren fonksiyon adıyla bir klasör daha oluşturup; sorguyu, oluşturduğum bu klasördeki "index.php" dosyasına yönlendireceğim. Yani dosyalara değil doğrudan klasöre sorgu çekeceğim.
(Örn: ajax/hesapla/?islem=topla&rakamlar=(5,2,7,1))
MySQL bağlantısı ve işlemlerinde Justin Vincent tarafından yazılan bir sınıf olan ezSQL'i kullanacağım. Bu sınıfa ait birkaç dosyanın birlikte kullanılması gerektiği için includes klasöründe "ez_sql" adında yeni bir klasör oluşturup bu dosyaları buraya yerleştireceğim.
Şu an için aklıma gelen dosya ve klasörler bu kadar. Fakat ileride ihtiyacımız doğrultusunda yeni birkaç klasör daha oluşturacağız. Sonuç olarak elde ettiğim sistem şu halde;



MySQL 5.0 ile veritabanı oluşturmak ve ezSQL
Dosya ve klasör altyapımızı oluşturduktan sonra altyapı açısından yapmamız gereken son şey veritabanımızı oluşturmak ve gerekli bağlantıları sağlamak. Yeni bir veritabanını birçok değişik programla yaratabileceğiniz gibi, sanırım bu konuda alışkanlıklar ön plana çıkıyor. Çünkü ben, bu işi yapan daha hızlı programlar da görmüş olmama rağmen, phpMyAdmin'den vazgeçemiyorum bir türlü. Bu nedenle yeni veritabanı oluşturma işlemini pMA (phpMyAdmin) üzerinden tarif edeceğim.

1. pMA anasayfasındaki "Yeni veritabanı oluştur" başlıklı alana projemize uygun bir veritabanı adı yazalım. Ben nMembership için "s_n_membership" adında bir isim uygun gördüm. Başındaki "s" (Şubatın s'si) veritabanının hangi ayda hazırlandığını belirtiyor. pMA sol taraftaki seçme kutusunda veritabanlarını listelerken başharflere göre gruplandırma yaptığı için, hangi ay hangi projeyi yürüttüğümü daha iyi takip ediyorum. Veritabanları biriktikçe bir sonraki sene yine "s" ile başlayan bir veritabanı yarattığımda önceki yıllardaki projelere göz atıp maziyi hatırlıyorum Veritabanı adı yanındaki "Karşılaştırma" yazılı seçme kutusundan "latin5_turkish_ci"yi seçip, "Oluştur" butonuna tıkladım.



2. Artık s_n_membership adlı veritabanımız oluşturulduğuna göre, dosyalarımızla gerekli bağlantıları oluşturmanın zamanı geldi. Daha önce de dediğim gibi bu iş için ezSQL sınıfını kullanacağız. Klasör yapımızı oluştururken bu sınıfa ait dosyaları includes/ez_sql/ konumuna zaten kopyalamıştık. Şimdi yapmamız gereken bir dosyada sınıfı kullanarak bağlantıyı sağlamak. Bu iş için includes/ klasörü içinde "general.inc.php" adında yeni bir dosya oluşturacağım. Fakat bu işlemi DW'daki "Files" panelinden yapacağım. Nasıl yaptığımı aşağıdaki resimde detaylı bir şekilde görebilirsiniz;



3. Oluşturduğum general.inc.php adlı dosyayı açarak içeriğine şu satırları giriyorum;

PLAIN TEXTPHP:
session_start();
ob_start();

$mysql_uname = "root";
$mysql_pass = "";
$mysql_db_name = "s_n_membership";

require_once("ez_sql/ez_sql_core.php");
require_once("ez_sql/ez_sql_mysql.php");

$mysql_acts = new ezSQL_mysql($mysql_uname, $mysql_pass, $mysql_db_name);

4. Burada gördüğünüz üzere önce veritabanı bağlantımız için gerekli olan bilgileri belirleyip ezSQL_mysql nesnesini yaratırken argüman olarak sınıfımıza teslim ediyoruz ve bu bilgilerle sağlanacak bağlantıyı bir nesne şeklinde $mysql_acts değişkenine eşitliyoruz. Artık veritabanımız ve bağlantısı hazır.

Not: Normal şartlarda buradaki "sistem ayarı" olarak kabul edilebilecek olan veritabanı adı, mysql kullanıcı adı ve şifresi gibi değişkenleri ayrı bir dosyada tutabiliriz fakat şu anda ihtiyaç duymadığım için doğrudan general.inc.php içerisine yazıyorum.

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

ajax ve php � le komple proje yönetimi