Arşiv

Archive for the ‘Ajax’ Category

Asp.net Ajax Accordion Nesnesinin Kullanımı

Ağustos 21, 2010 Yorum yapın

Merhaba arkadaşlar,
Bu makalemde Ajax Toolkitle gelen Accordion nesnesinin kullanımını anlatmaya calısacagım. Toolboxtaki bu nesne sayesinde sayfalarımızda güzel menüler oluşturabiliriz..

Sayfamızın Source kısmına geleceğiz. Tüm dizaynı kod bölümünden yapacağız. Öncelikle en üste Script Manager atıyoruz. Tüm Ajax uygulamalarımız için bu böyle biliyorsunuz.

Hemen sonrasında accordionumuzu ekliyoruz. Bunu istersek kodla yapabiliriz. Ya da ToolBox’ımızdan ekleyedebiliriz.

Eklediğimizde ilk görünümü ;

gibi olacaktır. Fakat bunu şu şekilde düzenleyebiliriz.

Değişiklikleri yaptıysak accordionumuzun çerçevesi hazırdır şimdi panellerimizi ekleyerek accordionumuzu tamamlayalım..

Başlık 1

Panel 1

Başlık 2

Panel 2

Başlık 3

Panel 3

Başlık 4

Panel 4

Eğer AccordionPanelerimizi eklediysek işimiz bitmiştir. Gördüğünüz üzere her paneli ayrı renklerdirdim istediğiniz kadar panel ekleyebilirsiniz veya silebilirsiniz. F5 yaparak projemizi çalıştıralım. Göreceğimiz üzre görsellikten yoksun bir Accordionumuz var.Projemize sağ tıklayarak Add > New Item diyerek 1 adet StyleSheet ekliyoruz bu bilindik bir css dosyasıdır. İsmini style.css olarak verebilirsiniz. Accordionumuzun görsel kısmını bu css dosyamızda tanımlayacağız.

.accordionContent{
background-color: #C0C0C0;
border: thin dashed #808080;
font-size: medium;
font-family: calibri;
}

.accordionHeader{
font-family: calibri;
font-size: medium;
background-color: #008080;
border: thin solid #808080;
}

Şimdi ise oluşturduğumuz bu css dosyasını projemızde tanımlatmalıyız.Bunun için sayfamızdaki tagları arasına

Ekleyerek css’imizide tanımlatıyoruz.

Şu anda çalıştırdığınızda küçük ama bizim bir accordion çıkacaktır, bunu büyüretek kendi accordionlarınızı yapabilirsiniz; bu şekilde menüler, manşet sistemleri ve hatta direk siteler yapabilirsiniz, aslında farklı da olabilir o sizin hayal gücünüze kalmış tabii ki…

Bir sonraki makalede görüşmek dileğiyle..

Sorularınızı yorum kısmından sorabilirsiniz..

Kategoriler:Ajax

Ajax’a Giriş

Ağustos 21, 2010 Yorum yapın

Bu yazımla kodlara ilk adımımızı atacağız ve AJAX’in çekirdeği olan XMLHTTPREQUEST nesnesinin kullanımını göreceğiz.

Konuyu daha somut olması açısından bir örnekle anlatacağım. Örneğimizde bir kutu ve buton bulunuyor. Kutuya girilen isim eğer “ajax-tr” ise sonuç “Tamam” değilse “Hata!” olacaktır.

XMLHTTPREQUEST nesnesini çağırma

Önce en basit haliyle XMLHTTPREQUEST nesnesinin çağırılışını görelim.

nesne = new XMLHttpRequest();

Normal şartlarda bu nesneyi çağırmak gördüğünüz gibi oldukça basit ve açık. Tabi internet explorer yine bize gıcıklık yapıyor ve bu kullanımı tanımayabiliyor. Fakat çözümü yok değil tabiki. İnternet explorer için de nesnemizi şöyle çağırabiliyoruz.

nesne = new ActiveXObject(“Microsoft.XMLHTTP”);

Şimdi bu iki çağırma şeklinden faydalanarak tüm tarayıcılarda çalışabilecek bir fonksiyon yazalım. Bu fonksiyon sayfayı ziyaret eden kişinin tarayıcısını kontrol eden ve tarayıcı firefox, opera, safari gibi bir tarayıcı ise birinci yöntemi, internet explorer’da ise ikinci yöntemi kullanan bir fonksiyon olmalı.

function nesneyarat() {

var nesne;

var tarayici = navigator.appName;

if(tarayici == “Microsoft Internet Explorer”){

nesne = new ActiveXObject(“Microsoft.XMLHTTP”);

}else{

nesne = new XMLHttpRequest();

}

return nesne;

}

var http = nesneyarat();

Bu fonksiyon ile XMLHTTPREQUEST nesnemiz çağırılıyor ve http değişkenine atanarak sitede kullanılabilecek duruma geliyor. Bu nesneyi çağırmanın bir çok farklı yolu mevcut. En basitinden buna bir hata yakalama kodları da eklenebilirdi veya eski tip nesne çağırılabilirdi ama bu işi yeni öğrenenler için o kadar zorlamak ve kodu karmaşıklaştırmak istemiyorum. Sonraki örneklerimizde daha gelişmiş fonksiyonlar kullanarak daha tutarlı uygulamalar yapacağız.
İşlem fonksiyonu ve XMLHTTPREQUEST metodları

Sıra geldi işlem yapacak olan fonksiyonumuza. İşlem derken formdan gelen değerleri yani kullanıcının girdiği bilgileri alıp sunucuya gönderip cevap isteyen fonksiyondan bahsediyorum. Örneğimiz için aşağıdaki gibi kısa bir fonksiyon bize yetecektir.

function islemkutu() {

var deger = document.riza.isim.value;

http.open(‘get’, ‘kontrol.php?degisken=’ + deger);

http.onreadystatechange = cevapFonksiyonu;

http.send(null);

}

ASP kullananlar yukarıdaki kod yerine şunu kullanacaklardır.

function islemkutu() {

var deger = document.riza.isim.value;

http.open(‘get’, ‘kontrol.asp?degisken=’ + encodeURI(deger));

http.onreadystatechange = cevapFonksiyonu;

http.send(null);

}

Yukarıdaki fonksiyonda open ile get metodu kullanarak kontrol.php dosyasına bilgiyi gönderiyoruz. Buradaki satırların başında http olmasının sebebi benim nesneyi en başta http değişkenine atamış olmam. onreadystatechange ise XMLHTTPREQUEST nesnesinin bir metodudur ve çağırdığımız nesnenin durumunun değişmesi durumunda (örneğin cevap gelirse değişmiş olur) işlem yapar. Burada cevapFonksiyonu ‘nu çağırmak için kullandık. XMLHTTPREQUEST nesnesinin metodlarını biraz açacak olursak:

abort(): Geçerli isteği iptal eder.
getAllResponseHeaders(): Tüm karşılık başlık etiketilerini ve değerlerini string olarak elde eder.
getResponseHeader(“başlıkEtiketi”): Verilen başlık etiketinin taşıdığı değeri string olarak elde eder.
open(“metod”, “Adres”[, asyncFlag[,”userName”[, "password"]]]): Sorgu gönderilmeden önce, sorgunun gönderileceği adresi, gönderi metodunu ve diğer seçime bağlı netilkleri belirler.
send(içerik): Sorguyu gönderir. Seçime bağlı olarak gönderilebilen verileri ve DOM ile yaratılmış verileri de gönderebilir.
setRequestHeader(“etiket”, “değer”): Gönderilen sorguya bir etiket/değer başlığını iliştirir.

Sunucudan cevabın alınması

Örneğimize kaldığımız yerden devam ediyoruz. cevapFonksiyonu ismini verdiğimiz fonksiyon sunucudan cevap geldiğinde yapmak istediğimiz işlemi belirlediğimiz fonksiyondur. Tabiki fonksiyonun ismi size kalmış. Onu da örneğimiz için şöyle oluşturalım.

function cevapFonksiyonu() {

if(http.readyState == 4){

document.getElementById(‘yer’).innerHTML = http.responseText;

}

}

Burada nesnemizin readyState metodundan faydalanıyoruz. Bu metodun alabileceği değerler ve karşılıkları şu şekildedir.

0 = başlatılamadı
1 = yükleniyor
2 = yüklendi
3 = etkileşimli
4 = tamamlandı

Burada 1 ve 4 sayılarının dikkatinizi çekmesini istiyorum. 1 durumunu ekrana yükleniyor yazmak istediğimizde kullanırız. 4’ü ise işlemimiz tamamlandığında (başarılı bir şekilde gerçekleştiğinde) kullanırız. Elbette ileri düzey uygulamalarda (özellikle hata yakalamalarda) diğer durumlar da önemli olacaktır. Örneğimizde de 4 olup olmadığını yani işlemin başarılı bir şekilde gerçekleştirilip gerçekleştirilmediğini kontrol ediyoruz. Eğer başarılı ise sayfamızda yer id’sine sahip unsurun değeri sunucudan gelen cevap (responseText) olacaktır.

Sonuç

Bu anlattıklarımı toparlayarak tek bir dosya haline getirelim ve ismine index.htm diyelim. İçeriği de şu şekilde toparlayalım.

function nesneyarat() {

var nesne;

var tarayici = navigator.appName;

if(tarayici == “Microsoft Internet Explorer”){

nesne = new ActiveXObject(“Microsoft.XMLHTTP”);

}else{

nesne = new XMLHttpRequest();

}

return nesne;

}

var http = nesneyarat();

function islemkutu() {

var deger = document.riza.isim.value;

http.open(‘get’, ‘kontrol.php?degisken=’ + deger);

http.onreadystatechange = cevapFonksiyonu;

http.send(null);

}

function cevapFonksiyonu() {

if(http.readyState == 4){

document.getElementById(‘yer’).innerHTML = http.responseText;

}

}

Sunucuda iletişime geçmek istediğimiz dosyanın da ismine kontrol.php diyelim ve içine şu kodları yazalım.

ASP kullananlar yukarıdaki kod yerine şunu kullanacaklardır.

İyi Çalışmalar!!!

Kategoriler:Ajax

Ajax Control Toolkit Nedir, Nasıl Yüklenir ?

Ağustos 21, 2010 Yorum yapın

Ajax control toolkit ile gelen bir sürü kontrolün visual studio çalışma ortamına nasıl eklendiğine hep beraber bakalım.

Günümüzde web platformu yeni bir dönemece girmiş, bir çok yeni teknoloji ile web programcıların sıkıntıları bir nebze olsun azalmıştır. Platformlar web ortamını ne kadar masaüstüne yaklaştırırsa o kadar rağbet görürler. Yeni nesil web uygulamaları dediğimiz zaman direk akla gelen isimdir Ajax. Programcıların sorunlarını çözdüğü noktalar, getirdiği yenilikter tartışılamaz. Lafı fazla uzatmadan toolkitten bahsetmek istiyorum. Bir dizi bizim için hazırlanmış ajax kontrolleri bu paketle birlikte visual studio’ya entegre oluyor ve nasıl bir textbox’ımızı butonunumuzu sürükleyio bırakarak kullanabiliyorsak, bu toolkit ile gelen kontrolleri de aynı şekilde kullanabiliyoruz. Peki nasıl kuracağız?

Öncelikle visual studio 2008 ve 2008’in service pack 1 paketi kurulu olması gerekir. Yani bu toolkit .net 3.5 sp1 için diyebiliriz. Adım adım bakacak olursak

1-Ajax Control Toolkiti download ediyoruz.

AJAX CONTROL TOOLKIT
burada 3 seçeneğimiz var, istersek tam kurulum olarak alabiliriz, istersek sadece dll’leri, istersek sadece scriptlerinide alabiliriz. Biz dll’lerini alacağız ve projemiz referans olarak ekleyeceğiz.

2-Zipli dosyadan AjaxControlToolkitBinary adlı klasörü çıkarıyoruz.

3-Visual Studio 2008’imizi açıyoruz.

4-Yeni bir Web Application oluşturuyoruz.

5-Toolbox’ımızda yeni bir sekme oluşturuyoruz ve istediğimiz bir isim veriyoruz.

Bu adım isteğe bağlı, ama yapmanızı tavsiye ederim. Çünkü yaklaşık 40 tane yeni kontrol geliyor ve bunların hepsinin bir yerde durması erişebilirlik açısından daha mantıklı olacaktır.

6-Oluşturduğumuz sekmede sağ tuşa basıyoruz ve choose items diyoruz.

Karşımıza çıkan menüden browse diyerek download ettiğimiz klasörün içinde çıkan AjaxControlToolkit.dll isimli dll dosyasını ekliyoruz.

7-Ajax ile yapılmış 42 tane yeni kontrol göreceksiniz.

Artık kontrollerimizi web sayfamıza sürükleyip bırakarak kullanabiliriz. Toolkit ile ilgili yenilikleri, değişiklikleri, gelişmeleri buradaki adresten takip edebilirsiniz.

Henüz 2008’e geçmediyseniz .net 2.0 içinde bir toolkit mevcut. Ama Ajax 3.0 ile birlikte geldiği için 2.0’a elinizle önce Ajax’ı eklemeniz gerekiyor. Sonra da Ajax Control Toolkit’i.

Kolay Gelsin…

Kategoriler:Ajax

PHP ve AJAX ile Kayıtları Yerinde Güncelleme

Ağustos 21, 2010 Yorum yapın

Dinamik içerikli bir web sitesi veya web tabanlı bir uygulama geliştirdiğimizde veritabanı üzerindeki verilerin güncellenmesi işlemini, genellikle kayıt listesi üzerinde düzelt linki ile verileri bir forma yönlendirerek gerçekleştiririz.Peki başka bir forma yönlendirmeden listedeki kayıtları yerinde güncelleyebilirmiyiz ?.İşte bu sorunun yanıtını bu dersimizde yapacağımız bir uygulama ile göreceğiz.

Uygulamayı test etmek için tıklayınız.

Bu uygulama için PHP, MYSQL ve ajax için JQUERY kütüphanesini kullanacağız.Öncelikle veritabanımızı mysql’de tasarlayalım.Bunun için ben Mysql-Front programını kullandım.

“kitap_vt” isimli bir veritabanı, kitaplar isimli bir tablo ve bu tablo içerisinde Id, kitap_adi, yazar_ismi, yayin_evi isimli alanlarımızı oluşturalım.Ve bir miktar kayıt girelim.

Daha sonra liste.php ve islem.php isimli iki php dosyası ve jquery.js kütüphanesinden oluşan klasör yapımızı oluşturalım.

liste.php dosyamızı açıp kodlarımızı yazalım.

function islem(id,komut) // islem fonksiyomuzda id ve komut isimli iki değişken kullanacağız.id değişkeni ile verileri id değerini taşımak için, komut değişkenini ise güncelleme için kullanıcağız.
{

$.ajax({

type: ‘GET’,//verinin gönderilme yöntemini belirliyoruz.

url :’islem.php?id=’+id+’&komut=’+komut,//islem yapılacak dosyayı belirtiyoruz.fonksiyonumuzdan gelen değişkenleri islem.php sayfasına get methodu ile gönderiyoruz.

data: $(‘form’).serialize(),//gönderilecek veri olarak formdan elamlarının değerleri alıyoruz.

success: function(cevap) // işlem.php sayfasından gelen sonuçları id özniteliği liste olan bir div’de görüntülyouz.
{
$(‘div#liste’).html(cevap);
}
});}

Kitap İsmi Yazar İsmi Yayın Evi İşlemer

islem.php dosyamızın kodları ise şu şekilde

islem(”,”);

<input type="text" value='’ name=”kadi”/> <input type="text" value='’ name=”yazar_ismi”/> <input type="text" value='’ name=”yayin_evi”/>
İptal
| <a href="javascript:islem('’,’duzelt’)”>Güncelle

<a href="javascript:islem('’,”)”>Düzelt

Uygulamanın genel mantığını anlatmak gerekirse listedeki kayıtlardan oluşan veri satırını bir link ile forma çeviriyoruz.Bunu yaparken ajax ile fonksiyonumuzu islem.php sayfasından (kendi içinden) çalıştırıp sonuçları liste.php sayfasındaki div içerisinde gösterek sayfanın tamamının yüklenmesini önlüyoruz.Verileri güncellerken ise fonskiyonda iki değişken kullanarak kaydın id değerine göre ajax ile sql komutunu çalıştırıyoruz.

İyi Çalışmalar.

Kategoriler:Ajax

Jquey ile Objeleri Gösterme/Gizleme

Ağustos 21, 2010 Yorum yapın

Merhaba arkadaşlar bir jquey dersinde yine birlikteyiz.Önceki derslerimizde jquery ile ajax işlemleri üzerinde çalışmış ve bazı uygulamalar yapmıştık. Bu dersimizde ise jquery’nin diğer bir harikası olan efekt işlemlerinden gösterme / gizleme (show, hide, toogle) efektlerinden bahsedeceğiz.

Jquery’de gösterme gizleme efektleri 3 tanedir. Bunlar show (gösterme), hide (gizleme), toggle (göster/gizle) ‘dır. Şimdi bu efektleri bir örnekle açıklayalım.

Örneğin sayfamızda içeriği resim ve yazılardan oluşan bir div objesi bulunsun. Bu objeye butonlar yardımı ile gösterme/gizleme işlevselliği katabiliriz. Bunu için ilk olarak jquery.js dosyamızı sayfamızın head tagları arasına dahil ediyoruz.

Daha sonra isimli fonksiyonlarımızı oluşturyoruz ve jquey kodlarımızı yazıyoruz.

function goster()
{

$(“div#panel”).show(100);

}

function gizle()
{

$(“div#panel”).hide(100);

}

function gostergizle()
{

$(“div#panel”).toggle(100);

}

Burada $(“div#panel” ) kodu efekti uyglayacağımız objeyi (id değeri panel olan div objesi) seçiyoruz.

.show(100) kodu seçili objeyi görünür hale getiriyor parantez içerisindeki değer (100) ile efektin hızını belirliyoruz.

.hide(100) kodu seçili objeyi gizli durumu getirmemizi sağlıyor.

.toggle(100) kodu ise hem gizleme hem gösterme işlemi yapıyor.Yani seçili obje gizli ise gösterme işlemi görünür ise gizleme işlemi yapıyor.

Son olarak uygulamanın basit bölümünü, butonlarımızı ve objemizi hazırlayarak dersimizi bitiriyoruz.



Burası içeriğimizin bulunduğu div objesi

İyi Çalışmalar, iyi bayramlar.

Kategoriler:Ajax

Jquey ve Thickbox Eklentisi ile İçeriği Diyalog Kutusunda Gösterme

Ağustos 21, 2010 Yorum yapın

Merhaba arkadaşlar,

Bu dersimizin konusu, Facebook ve birçok sitede karşımıza çıkan, ekranın kararması ile sayfanın ortasında açılan diyalog kutuları. Resim, metin, video vb. içerikleri bu diyalog kutularında gösterek sayfamızı daha işlevsel bir duruma getirebiliriz. Bu diaolog kutularını oluştururken Jquery kütüphanesinin thickbox isimli eklentisinden yararlanacağız.

Bu diyalog kutularının nasıl çalıştığını Test Sayfası’na tıklayarak görebilirsiniz.

İlk olarak eklentinin sayfaya nasıl dahil edildiğini görelim.Eklentiyi sayfamızda kullamak için gerekli dosyaları (jquery.js, thickbox.js, thickbox.css, loadingAnimation.gif) indirmeniz gerekiyor. Dosyaları indirdikten sonra uygulamayı çalıştıracağımız dosyanın head tagları arasına şu kodları yazıyoruz.

Bununla beraber sayfaların yüklenmesi sırasında bir preloader göstermek için thickbox.js dosyasındaki var tb_pathToImage = “images/loadingAnimation.gif”; satırını değiştirmeniz gerekiyor.

Resim Görüntüleme

Thickbox diyalog kutularında tek bir resim görüntülebileceğimiz gibi çoklu resimlerde görütüleyebiliriz.Tek bir resim görüntülemek için resmi çağırdığımız bağlantı koduna class=”thickbox” eklemeliyiz.

Resim için tıklatınız

Eğer çoklu resim örneğin bir fotoğraf albümü görüntülemek istiyorsak yapmamız gereken sayfaya resimlerin küçük hallerini yerleştirip bu resimlere verilen bağlantıya rel=”Fotoğraf Albümü” kodunu eklemek.

Diyalog Kutusu İçerisine Sayfa Çağırma

Diyalog kutusu içerisinde başka sayfada bulunan bir içeriği gösterebiliriz.Örneğin üyelik sistemi için uyelikkosullari isimli bir sayfamız olsun bu sayfayı kutuda görüntülemek için yazmamız gereken kod şu şekilde:

Üyelik Koşulları

Burada keepThis=true&TB_iframe=true kodu, çağırılan sayfanın (uyekosullari.htm) bir iframe içerisinde gösterilmesini sağlar.

Bunun yanında çağrılan sayfadaki (uyekosullari.htm) bir bağlantının çağırdığı sayfayı’ da aynı şekilde bu kutuda görüntüleyebilirsiniz. Bunun için uye kosullari.htm dosyasında üsteki kodun aynısını (sadece sayfa ismini değiştirerek) yazmamız yeterlidir.

Üyelik Koşulları

Ayrıca burada kullandığımız jquery, thickbox eklentisi ile sayfalarınızda örneğin form elamlarını kutuda göstererek işlevsel bir veri kayıt uygulaması yapabilirsiniz.

Web programlama ile ilgilenen arkadaşlar için yararlı bir ders olduğunu düşünüyorum. Kolay gelsin.

Kategoriler:Ajax

JQUERY ve PHP ile Vista Tarzı bir Hızlı Arama Uygulaması

Ağustos 21, 2010 Yorum yapın

Bu dersimizde Vista veya Avafind programındaki arama yapısına benzer hızlı arama uygulamasının Php, Jquery ve biraz da Javascript kullanarak web ortamındaki örneğini yapacağız.

Bu uygulama için ilk olarak gerekli olan jquery-latest.js kütüphanemizi, index.php, ara.php dosyalarımızı hazırlayalım.

jquery-latest.js isimli kütüphaneyi http://jquery.com/src/jquery-latest.js indirebilirsiniz.

index.php dosyamızın kodları:

function dene() // dene isimli fonksiyonumu oluşturuyoruz.
{

$.ajax({

type: ‘GET’, //verinin gönderilme biçimini ayarlıyoruz.

url: ‘ara.php’, // verinin göndericeği dosyayı belirtiyoruz.

data: $(‘form’).serialize(),// veri olarak form nesnelerindeki değerleri alıyoruz.

// Bu bölümde ise ara.php dosyasında işleme giren verinin sonucu sonuc id değerine sahip bir div de gösterilmesini sağlıyoruz.

success: function (cevap){

$(‘div#sonuc’).html(cevap);
}

//——————————————————————————————————————————

});

setTimeout(“dene()”,100); // Burada setTimeout fonksiyounu kullanarak her 1 saniyeden daha kısa bir sürede dene() fonksiyonun çalışmasını sağlıyoruz.
1
}

MERCANSOFT
SpeedFind

Başlık

ara.php dosyamızın kodları:

<?php

$ara="%".$_GET['ara']."%"; // ara değişkenmize get methodu ile gelen değerleri ve % işaretleri ile aranacak kelimenin cümle içerisinde sorgulanmasını sağlıyoruz.

$baglanti=mysql_connect("localhost","root","");

$sorgu=mysql_db_query(veritabani_ismi,"Select * from tablo1 where alan1 like '$ara'",$baglanti); //Burada like ifadesi ile kayıtlar içerisinde sorgu oluşturyoruz.

if (mysql_num_rows($sorgu)==0)
{
echo "

Kayit bulunamadi !

“; // kayıt olmadığında verilecek mesaj
}

// KAYITLARIN LİSTELENMESİ
while ($deger=mysql_fetch_assoc($sorgu))
{

$sayi=$sayi+1;

if ($sayi==2)
{
$renk=”#F6f6f6″;
$sayi=0;
}else
{
$renk=”#f9f9f9″;
}
$a+=1;
?>
<table width="62.7%" border="0" align="center" bgcolor="”>

Yaptığımız bu uygulamanın genel mantığını açıklayacak olursak, input içerisine yazılan değerleri her bir saniyeden daha kısa bir sürede, jquery ile ara.php dosyasında sorgulatıp, sonuçları index.php dosyasındaki bir div’de göstermekten ibarettir.

Umarım yararlı bir ders olmuştur. Kolay gelsin.

Kategoriler:Ajax

Php – xajax ile form değişkenlerini göndermek

Ağustos 21, 2010 Yorum yapın

Bu dersimizde form elemanlarının değerlerini xajax kütüphanesini kullanarak nasıl gönderip alacağımızı öğreneceksiniz.

İlk dersimizde (10 dakikada Xajax öğrenin) belirttiğim gibi bu örnekleri çalıştırabilmek için xajax kütüphanesini uygulamayla aynı dizine kopyalamanız gerekmektedir eğer bu kütüphaneniz yoksa buradan indirebilirsiniz.

Öncelikle giriş kodlarımızı ekliyor ve fonksiyonumuzun adını xajax’a tanıtıp form_gonder fonksiyounumuzu oluşturuyoruz.

registerFunction(“form_gonder”);
function form_gonder($deger)
{
extract($deger); // form değişkenlerini dışarı aktarır
$icerik = ”

Adı Soyadı : “.$ad_soyad.”

“;
$icerik.= ”

Cinsiyet : “.$cinsiyet.”

“;

$objResponse = new xajaxResponse();

$objResponse->assign(“div_form”,”innerHTML”,$icerik);
$objResponse->assign(“div_form”,”style.color”,”#”.$renk);

return $objResponse;
}
$xajax->processRequest();
?>

Buraya kadar yaptıklarımızı biraz inceleyelim. Daha önce yapmış olduğumuz örnekten farklı olarak bu fonksiyonumuzda iki ifade dikkatimizi çekmeli; bunlardan birincisi extract(); komutu. Bu komut formdan gönderdiğimiz değişkenleri fonksyon içerisinde aynı değişken adıyla kullanmamızı sağlar.

Örnek olarak; “id” yada “name” özelliği ad_soyad olan bir form elemanının değeri fonksiyon içerisine gönderildiği taktirde, extract(); komutuyla $ad_soyad değişkeni bu form elemanının değerini alır. Aşağıdaki kodlarda form elemanlarının isimleri ile yukarıdaki fonksiyonumuzda kullandığımız isimleri karşılaştırabilirsiniz.

Dikkatimizi çeken ikinci ifade ise $objResponse->assign() fonsiyonunun almış olduğu “innerHTML” ve “style.color” özelliği. Bu özelliklerden ilki; gönderilen verinin bir html içeriği olduğunu ikincisi ise bir stil bilgisi olduğunu belirtir.

Şimdi formumuzu ve form elemanlarımızı oluşturalım

Adı Soyadı :

Cinsiyetiniz :
Erkek
Kadın

Kırmızı
Yeşil
Mavi
Sarı

Yukarıdaki formumuzda dikkatinizi çekmek istediğim iki nokta var ilki neden form “name” kullanmayıp “id” özelliğini kullandığım bunun sebebi firefox ve benzeri tarayıcılar “name” özelliğini form tagında tanımıyor. İkincisi ise form tagının içerisinde “method” özelliğini kullanmama gerek kalmaması. Onun sebebi ise gönderme işlemini kullandığımız komutun yapmasıdır.

Son olarak javascript kodlarımızı, formumuzu gönderecek butonu ve çağırılan verilerin gösterileceği “div” taglarını oluşturuyoruz.

printJavascript();?>

Artık php fonksiyonlarımızı sayfa içerisinde çağırırken başına “xajax_” eklememiz gerektiğini anlamışsınızdır.

Son kodumuzda fonksyonumuzu çağırıyor ve içerisine xajax.getFormValues(‘bilgi_frm’) bilgisini gönderiyoruz bu komut xajax sınıfı içerisinde form verilerini göndermede kullanılır ve değişkenler bir dizi içerisinde gönderilir, bu diziyi açmak ve form elemanlarını aynı isimde değişkenlere yerleştirmek için dersimizin başında belirttiğim extract(); komutunu kullanırız.

Ekran çıktısı şekildeki gibidir.

Yukarıda açıkladığımız kodlarımızın tamamı aşağıda verilmiştir.

registerFunction(“form_gonder”);
function form_gonder($deger)
{
extract($deger); // form değişkenlerini dışarı aktarır
$icerik = ”

Adı Soyadı : “.$ad_soyad.”

“;
$icerik.= ”

Cinsiyet : “.$cinsiyet.”

“;

$objResponse = new xajaxResponse();

$objResponse->assign(“div_form”,”innerHTML”,$icerik);
$objResponse->assign(“div_form”,”style.color”,”#”.$renk);

return $objResponse;
}
$xajax->processRequest();
?>

Adı Soyadı :

Cinsiyetiniz :
Erkek
Kadın

Kırmızı
Yeşil
Mavi
Sarı

printJavascript();?>

Kategoriler:Ajax

10 dakikada Xajax öğren

Ağustos 21, 2010 Yorum yapın

PHP’nin xajax kütüphanesi sayesinde çok basit bir şekilde ajax uygulamaları geliştirebilirsiniz. Bu desimizde xajax’ın nasıl kullanıldığını öğreneceğiz.

xajax web projelerenize kolayca entegre edebileceğiniz bir ajax kütüphanesidir. Php kodlarıyla fonksyonlar oluşturarak çok kolay bir şekilde ajax uygulamaları oluşturabilirsiniz. Üstelik iyi derecede JavaScript bilginizin olmasına bile gerek yok.

Dersimize başlamadan önce xajaxproject adresinden 0.5 RC 2 Full dosyasını indirip klasörün içinden çıkan dosyaları uygulamamızı oluşturacağımız dizine atıyoruz.

Şimdi 7 adımda bunu kolayca gerçekleştirelim

1. xajax kütüphanesini ekliyoruz:

require_once(“xajax.inc.php”);

2. Yeni bir xajax nesnesi oluşturuyoruz.

$xajax = new xajax();

3. fonksyonumuzun adını önce xajax tarafından çağırılmak üzere kaydediyoruz.

$xajax->registerFunction(“fonksyonum”);

4. kaydettiğimiz fonksyonumuzu oluşturuyoruz.

function fonksyonum($deger)
{
//belirlediğiniz alanda gösterilecek içeriği $icerik değişkenine aktarıyoruz
$icerik=”\$deger degişkeninin değeri: “.$deger;

//xajaxResponse nesnesi oluşturuluyor.
$objResponse = new xajaxResponse();

// id=”eleman_id” olan elemanın özelliklerini ve göstereceği içeriği tanımlıyorz
$objResponse->assign(“eleman_id”,”innerHTML”,$icerik);

//xajaxResponse nesnesini gönderiyoruz.
return $objResponse;
}

5. Sayfamızın içeriğini girmeden önce scriptlerimizin başına bunu ekliyoruz. Burada dikkat etmemiz gereken şey buraya kadar yaptıklarımızın arasına taglarından çıkarak html içeriği girmemek yani diğer anlamda bu satırları sayfanın en başına eklemek aksi taktirde processRequest çalışmayacaktır. Bu kodalardan önce bir boşluk karakteri dahi olsa bu geçerlidir.

$xajax->processRequest();

6.taglarınızın arasına Javascript kodlarını oluşturacak fonksyonu ekliyoruz

printJavascript(); ?>

7. Uygulamamıza bir buton birde div tagı ekleyerek buton içerisinden fonksyonumuzu çağırarak id=”eleman_id” olan div alanında sonuçlarımızı gösteriyoruz.

Son olarak çalışan uygulamamızı aşağıda görebilirsiniz.

registerFunction(“fonksyonum”);

function fonksyonum($deger)
{
$icerik=”\$deger degişkeninin değeri: “.$deger;
$objResponse = new xajaxResponse();
$objResponse->assign(“eleman_id”,”innerHTML”,$icerik);
return $objResponse;
}

$xajax->processRequest();
?>

printJavascript();
?>

Kategoriler:Ajax

PHP – AJAX ile Kullanıcı Doğrulama

Ağustos 21, 2010 Yorum yapın

Merhaba arkadaşlar,

Bu dersimizde Php & Ajax ile sayfanın tümü yüklenmeden bir Kullanıcı adı doğrulama işlemini nasıl yapılır bunu görüceğiz.

Kullanıcı adı doğrulama işlemi için hazır ajax kütüphanelerinden faydalanacağız.

Sayfanın tümü yüklenmeden sayfalar arasında GET veya POST metodu ile değişken göndermeyi sağlayan bir kütüphane kullanacağız. (ajax.js)

Bu kütüphaneyi indirmek için tıklayınız.

İlk olarak index.php ve kontrol.php adında 2 tane php dosyası ve kütüphane klasörünün içine ajax.js dosyasını atarak klasör yapımızı oluşturuyoruz.

index.php dosyasını açıp şu kodları yazıyoruz.

function kontrol()
{
var sc=’KullaniciAdi=’+document.form1.kadi.value; //formdan gelen kadi verisini KullaniciAdi değişkenine eşitliyoruz.
JXP(1, “sonuc”,”kontrol.php”, sc); //sc değişkenine eşitlenen veriyi POST metodu ile kontrol.php dosyasına gönderiyor ve sonucu sonuc id değişkenine eşitliyor.
// JXG(1, “sonuc”,”kontrol.php”, sc); //GET metodu ile göndermek için.
}

Kullanıcı Adı :

Sifre :

kontrol.php dosyasını açıp şu kodları yazıyoruz.

<?
$KullaniciAdi=$_POST['KullaniciAdi'];

switch ($KullaniciAdi) {
case "ismail":
case "mercan":
case "sanalkurs":
case "mercansoft":
echo ' isim kullanılamaz. -(:‘;
break;
case “”:
echo ‘ isim girmediniz. !‘;
break;
default:
echo ‘ isim uygun :-)‘;
break;
}

?>

# onblur=”javascript:kontrol()” parametresi ile TAB tuşu veya imlecin input’tan ayrılması durumunda fonksiyonumuzun çalışmasını sağlıyoruz.

Evet bu dersimizde AJAX ile sayfalar arası değişken göndermeyi ve bu değişkeni doğrulmayı öğrendik.Umarım yararlı bir ders olmuştur.

İyi Çalışmalar.

http://www.boteciyiz.com/candost/dosya/Ajax_Dogrulama.rar

Kategoriler:Ajax
Takip Et

Her yeni yazı için posta kutunuza gönderim alın.