IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası
  digitalpanel

Etiketlenen Kullanıcılar

Yeni Konu aç Cevapla
 
LinkBack Seçenekler Stil
Alt 16 Ekim 2008, 11:26   #1
Çevrimdışı
Kullanıcıların profil bilgileri misafirlere kapatılmıştır.
IF Ticaret Sayısı: (0)
IF Ticaret Yüzdesi:(%)
PHP ve AJAX - Gmail'in Belkemiği: AJAX




PHP Kod:   Kodu kopyalamak için üzerine çift tıklayın!
<?=$_GET['a']+$_GET['b']?>

Toplama işlemi yapan bu PHP dosyasına GET metodu ile a ve b adında ki değişkenlerin değerlerini toplamaktan ibaret olan bu dosyaya JavaScript ile ulaşalım.Bunun için aşağıda ki kod işimizi şimdilik görecektir.
PHP Kod:   Kodu kopyalamak için üzerine çift tıklayın!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
style="color: #007700">>
<
html xmlns="
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
style="color: #007700">>
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<
meta http-equiv="Content-Type" content="text/html; charset=windows-1254" /> 
<
title>Ajax ile Toplama Yapmak</title>
</
head>

<
body>
<
script type="text/javascript">
function 
createRequestObject()
{
var 
ro;
var 
browser navigator.appName;
if(
browser == "Microsoft Internet Explorer")
{
ro = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
ro = new XMLHttpRequest();
}
return 
ro;
}
var 
http createRequestObject();

function 
toplama()
{
var 
document.getElementById('a').value;
var 
document.getElementById('b').value;

var 
dosya 'http://localhost/topla.php?a=' '&b=' b;
http.open("GET",dosya,true);
http.onreadystatechange cagir;
http.send(null);
}
function 
cagir()
{
var 
data;
if(
http.readyState == 4)
{
if(
http.responseText)
{
data = eval('(' http.responseText ');');
document.getElementById('toplam').innerHTML=data
}
}
}
</script>
<form id="form1" name="form1" method="POST" action="">
<input name="a" type="text" id="a" /> + <input name="b" type="text" id="b" /> = <span id="toplam"></span>
<input name="button" name="Button" value="Button" onclick="toplama()"  />
</form>
</body>
</html> 

Yukarıda ki komut yapısını incelediğimizde, ilk olarak createRequestObject fonksiyonunda IE ve FireFox türevi Mozilla tarayıcılarına göre bir obje oluşturup fonksiyone set ediyoruz. Daha sonra bu fonksiyonun çıktısını HTTP değişkenine aktarıyoruz. Bu fonksiyonumuz sabit kalacaktır. Her yerde bu fonksiyonu kullanabiliriz.
PHP Kod:   Kodu kopyalamak için üzerine çift tıklayın!
<span id="toplam"></span

Üstteki id'si toplam olan boş katman, hesap işlemini yapıp sayafaya yazdıracak alandır. Bu bağlamda PHP dosyasından alınan çıktıyı cagir() fonksiyonunda eval olarak http.responseText objesini kullanarak alıp, innerHTML komutuyla çıktıyı span alanında "id'deki ismiyle çağırarak" yazdırıyoruz.

 
Alıntı ile Cevapla

IRCForumlari.NET Reklamlar
sohbet odaları eglen sohbet sohbet
Alt 16 Ekim 2008, 12:33   #2
Çevrimdışı
Kullanıcıların profil bilgileri misafirlere kapatılmıştır.
IF Ticaret Sayısı: (0)
IF Ticaret Yüzdesi:(%)
PHP ve AJAX - Gmail'in Belkemiği: AJAX




PHP Kod:   Kodu kopyalamak için üzerine çift tıklayın!
CREATE TABLE `telefon_defteri` (
`
idint(10unsigned NOT NULL auto_increment,
`
adivarchar(30collate utf8_turkish_ci NOT NULL,
`
soyadivarchar(30collate utf8_turkish_ci NOT NULL,
`
telvarchar(20collate utf8_turkish_ci NOT NULL,
`
tarihdatetime NOT NULL,
PRIMARY KEY (`id`)
ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_turkish_ci 

NOT : Veritabanı dosyasında Transaction database kavramını kullanabilmemiz için InnoDB tablo yapısı kullandığımıza dikkat edin.

Veritabanı yapısını oluşturduktan sonra sırayla veri ekleme ve veri listeleme yapan PHP kodlarını oluşturduktan sonra asıl kıstas olan JavaScript ile veriyi gönderip çıktıları listeleme olayını açıklayacağım.
ekle.php
PHP Kod:   Kodu kopyalamak için üzerine çift tıklayın!
<?php
try
{
$db = new mysqli('localhost','root','','deneme2');
if ( 
mysqli_connect_error())
throw new 
Exception("MySQL'e bağlanamadım.");
}
catch (
Exception $e) {
die(
"{$e->getMessage()}");
}

try
{
$sql "INSERT INTO telefon_defteri (adi,soyadi,tel,tarih)
VALUES (?, ?, ?, NOW())"
;
$db->query("SET NAMES 'LATIN5'");
$smtp $db->prepare($sql);
$smtp->bind_param("sss",$adi,$soyadi,$tel);
$adi$_GET['adi'];
$soyadi$_GET['soyadi'];
$tel$_GET['tel'];
$db->autocommit(false);
if ( ! 
$smtp->execute() )
throw new 
Exception("Veri girişi yapamadım ... !");
print 
"true";
$db->commit();
$smtp->close();
}
catch (
Exception $e)
{
die(
"{$e->getMessage()}");
}
?>

Yukarıdaki komut yapısı bilindik MySQLi kütüphanesini kullanarak veri giriş örneğinden ibaret. Komut yapısına dikkat ettiyseniz MySQLi bölümünde değinmediğimiz bir özellikle veri girişi yaptım. "Nedir o Özellik?" diye sorarsanız Transaction Database ile veri girişi yapıyoruz. Bu işlemi klasik mysql kütüphanesiyle yapmak isteseydik önce mysql_query("start transaction") komutuyla MySQL'e sorgu gönderip, işlemlerimizi gerçekleştirdikten sonra mysql_query("commit") komutuyla veri girişi veya güncelleme işlemlerini DB ye girecektik ama MySQLi kütüphanesinde bu işlemi $db->autocommit(false); ve $db->commit(); komutları gerçekleştirmekte.
Veri giriş olayını gerçekleştiren script'i hazırladıktan sonra sıra geldi saf dataların çıktısını JavaScript'in anlayacağı şekilde Array olarak yayınlamaya. İşte bu ortamda JSON denilen yöntemi kullanacağım.
Veritabanından dataları almanın birkaç yöntemi bulunmakta.Aslında en etkin çözüm XML,XSLT çözümü ama onda browser farklılıkları olduğu için genelde JSON yöntemi kullanılmakta. Bu hususta gmail'in de aynı çözümü kullandığını belirterek, bu yöntem ile saf dataları nasıl Array yapacağımızı gösterelim.
PHP Kod:   Kodu kopyalamak için üzerine çift tıklayın!
{"s":
[
{
"data":
{
"id":"0",
"adi":"Ferhat",
"soyadi":"Bozkurt",
"tel":"0535 3397798",
"tarih":"2008-10-16 12:00:22"
}
}
]


Yukarıdaki örneği incelediğimizde JavaScript'de Array düzeneği oluşturduğunu göreceksiniz. Basit bir örnekle yukarıda ki kod yapısının nasıl çalıştığına dair fikrimiz oluşsun ki ileriki safhalarda datanın nasıl çıktı verileceği ve nasıl kullanılacağını anlayalım.
PHP Kod:   Kodu kopyalamak için üzerine çift tıklayın!
function oku()
{
var 
= {"s":
[
{
"data":
{
"id":"0",
"adi":"Ferhat",
"soyadi":"Bozkurt",
"tel":"0535 3397798",
"tarih":"2008-10-16 12:00:22"
}
}
]
};
alert(a); // [object Object]
alert(a.s.lenght); // 1
alert(a.s[0].data.adi); // Ferhat


Yukarıdaki JavaScript fonksiyonunu çalıştırdığımızda ilk olarak oluşturduğumuz değişkeni alert ettirdiğimizde JavaScript bize değişkenin biri Obje olduğunu belirtiyor.Kısaca JavaScript ile JSON yöntemiyle dataları nasıl hazırlayıp nasıl okuyacağımızı belirttikten sonra PHP ile dataları çıktı sağlayan oku.php dosyasını oluşturalım.
PHP Kod:   Kodu kopyalamak için üzerine çift tıklayın!
<?php
header
("content-type:text/html;charset=iso-8859-9");
try
{
$db = new mysqli('localhost','root','','deneme2');
if ( 
mysqli_connect_error())
throw new 
Exception("MySQL'e bağlanamadım");
}
catch (
Exception $e) {
die(
"{$e->getMessage()}");
}

try
{
$sql "SELECT * FROM telefon_defteri";
$db->query("SET NAMES 'LATIN5'");
if(! 
$sorgu $db->query($sql) )
throw new 
Exception("Sorgumuz Çalışmadı");
$i =0;
echo 
'{"s":[';
while ( 
$oku $sorgu->fetch_array() )
{
$veri .= sprintf("{\"data\":{\"id\":\"%s\",\"adi\":\"%s\",\"soyadi\":\"%s\",\"tel\":\"%s\",\"tarih\":\"%s\"}},",
$i,
str_replace('"','\"',$oku[1]),
str_replace('"','\"',$oku[2]),
$oku[3],
$oku[4]);
$i++;
}
echo 
substr($veri,0,strlen($veri)-1);
echo 
"]}";
$sorgu->close();
}
catch (
Exception $e)
{
die(
"$e->getMessage()}");
}
?>

Yukarıdaki komut yapısını açıklamayacağım. Zira yukarıda datalarını nasıl bir sistematikle oluşturacağımızı zaten belirtmiştik. Burada tek Dikkat etmemiz gereken husus: tırnak karışıklılığı olmaması için str_replace kullandık. Zira çekilen data içerisinde tırnak olursa Array objesinin düzeneği bozulacak, dolayısıyla veri listeleme hata verecektir. Şiddetle Dikkat etmenizi öneririm.

 
Alıntı ile Cevapla

Alt 16 Ekim 2008, 13:27   #3
Çevrimdışı
Kullanıcıların profil bilgileri misafirlere kapatılmıştır.
IF Ticaret Sayısı: (0)
IF Ticaret Yüzdesi:(%)
Cevap: PHP ve AJAX - Ajax ile veri ekleme-listeleme




PHP Kod:   Kodu kopyalamak için üzerine çift tıklayın!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
style="color: #007700">>
<
html xmlns="
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
style="color: #007700">>
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<
title>Ajax ile veri ekleme-listeleme</title>
</
head>

<
body>
<
script type="text/javascript">
var 
d;
var 
url;
function 
startUp()
{
d= new Array( document.getElementById('adi'), document.getElementById
('soyadi'), document.getElementById('tel'));
}
function 
createRequestObject()
{
var 
ro;
var 
browser navigator.appName;
if(
browser == "Microsoft Internet Explorer")
ro = new ActiveXObject("Microsoft.XMLHTTP");
else
ro = new XMLHttpRequest();
return 
ro;
}
var 
http createRequestObject();
function 
ajax(url,funcAdi)
{
http.open("GET",url,true);
http.onreadystatechange funcAdi;
http.send(null);
}
function 
gonder()
{
startUp();
for(var 
i=0;i<d.lengthi++)
{
if ( 
d[i].value == '')
{
alert.('Lütfen alanı doldurunuz');
d[i].focus();
return 
false;
}
}
url 'ekle.php?adi='+d[0].value
'&soyadi='+d[1].value
'&tel='+d[2].value;
ajax(url,ekle);
}
function 
ekle()
{
startUp();
if(
http.readState == 4)
{
if(
http.responseText)
{
if ( 
http.responseText == 'true')
{
alert('Ekleme işlemi başarıyla gerçekleştirildi');
oku();
for(var 
i=0,i<d.lengthi++)
d[i].value ='';
}
else
{
alert(http.responseText);
}
}
}
}
function 
kaybol()
{
document.getElementById('satirlar').innerHTML '';
}
function 
oku()
{
url 'oku.php?rand='Math.random();
var 
html '';
var 
i;
http.open("GET",url,true);
http.onreadystatechange = function dataGetir()
{
if(
http.readyState == 4)
{
veri null;
if(
http.responseText)
{
veri = eval("("+http.responseText+");");
html '<table width="400" border="1" align="center" cellpadding="0" cellspacing="0">'
'<tr>'
'<td>No</td>'
'<td>Adı</td>'
'<td>Soyadı</td>'
'<td>Telefon</td>'
'<td>Tarih</td>'
'</tr>';
for(
i=0i<veri.s.lengthi++)
{
html html "<tr>"
"<td>" + (i+1) + "</td>"
"<td>" veri.s[i].data.adi "</td>"
"<td>" veri.s[i].data.soyadi "</td>"
"<td>" veri.s[i].data.tel "</td>"
"<td>" veri.s[i].data.tarih "</td>"
"</tr>";
}
html html "</tr>"
"<td colspan='5' align='center'>"
"<input type='button' value='kaybol' onclick='kaybol()'>"
"</td>"
"</tr>"
"</table>";
document.getElementById('satirlar').innerHTML html;
}
else
{
alert("hata");
}
}
}
http.send(null);
}
</script>
<form id="form1" name="form1">
<table width="400" border="0" align="center" cellpanding="0" cellspacing="0">
<tr>
<td>Adı</td>
<td><input name="adi" type="text" id="adi" /></td>
</tr>
<tr>
<td>Soyadı</td>
<td><input name="soyadi" type="text" id="soyadi" /></td>
</tr>
<tr>
<td>Tel</td>
<td><input name="tel" type="text" id="tel" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="button" name="Submit" value="Gönder" onclick="gönder()" />
<input type="button" value="Verileri göster" onclick="oku()" />
</td>
</tr>
</table>
</form>

<span id="satirlar"></span>
</body>
</html> 

Yukarıda ki komut yapısı biraz karmaşık görünüyor olsa da, aslında kod yapısını fonksiyon fonksiyon değerlendirirsek o kadar da karışık yapısı olmasa gerek.Şimdi bu örnekteki fonksiyonları teker teker açıklayım.
PHP Kod:   Kodu kopyalamak için üzerine çift tıklayın!
var d;
function 
startUp()
{
d= new Array(
document.getElementById('adi'),
document.getElementById('soyadi'),
document.getElementById('tel'),
);


Burada form alanında yer alan text alanları tanımlayıp, bu alanları kullanmak istediğimizde bu fonksiyonu çağırıyoruz. Bunu yapmamızda ki amaç; aynı tanımlamaları birden çok yapmamak.
PHP Kod:   Kodu kopyalamak için üzerine çift tıklayın!
var ro;
var 
browser navigator.appName;
if(
browser == "Microsoft Internet Explorer")
ro = new ActiveXObject("Microsoft.XMLHTTP");
else
ro = new XMLHttpRequest();
return 
ro;
}
var 
http createRequestObject(); 

Burada sunucu teknolojisine erişim sağlayabilmek için IE ve Mozilla türevi tarayıcılar için http adında bir obje oluşturdum. Bu objeyi tüm kod alanında kullanacağız.
PHP Kod:   Kodu kopyalamak için üzerine çift tıklayın!
function ajax(url,funcAdi)
{
http.open("GET",url,true);
http.onreadystatechange funcAdi;
http.send(null);


Bu komutta ise ilk örneğimizde olduğu gibi verileri göndereceğimiz JavaScript fonksiyonu yer almakta.
PHP Kod:   Kodu kopyalamak için üzerine çift tıklayın!
function gonder()
{
startUp();
for(var 
i=0;i<d.lengthi++)
{
if ( 
d[i].value == '')
{
alert.('Lütfen alanı doldurunuz');
d[i].focus();
return 
false;
}
}
url 'ekle.php?adi='+d[0].value
'&soyadi='+d[1].value
'&tel='+d[2].value;
ajax(url,ekle);


Bu fonksiyonda ise formdan gelen dataların eksik olup olmadıgını kontrol ediyoruz. Şayet veriler eksiksiz bir şekilde doldurulmuşsa veri ekleme URL'sini oluşturup AJAX fonksiyonuna , çalıştıracağı fonksiyon adı ile birlikte gönderiyoruz.
PHP Kod:   Kodu kopyalamak için üzerine çift tıklayın!
function ekle()
{
startUp();
if(
http.readState == 4)
{
if(
http.responseText)
{
if ( 
http.responseText == 'true')
{
alert('Ekleme işlemi başarıyla gerçekleştirildi');
oku();
for(var 
i=0,i<d.lengthi++)
d[i].value ='';
}
else
{
alert(http.responseText);
}
}
}


Yukarıdaki fonksiyonda ise verileri ekle.php dosyasına gönderip bu dosyanın cıktısına bakarak veri girişi yapılıp yapılmadığına dair bir uyarı verdiriyoruz. Ekle.php dosyasına şayet veriler başarılı bir şekilde eklendiyse true çıktısı verdiğinden burada çıktının true olup olmadıgına bakarak veri girişi yapılıp yapılmadıgını kontrol ediyoruz. Böylece veri girişi yapıldıgında oku fonksiyonu çağırılarak veritabanında yer alan datalar Array şekline alınıp JaScript ile HTML tablosu üretiliyor.

 
Alıntı ile Cevapla

Alt 16 Ekim 2008, 13:36   #4
Çevrimdışı
Kullanıcıların profil bilgileri misafirlere kapatılmıştır.
IF Ticaret Sayısı: (0)
IF Ticaret Yüzdesi:(%)
PHP ve AJAX - Ajax ile veri ekleme-listeleme




PHP Kod:   Kodu kopyalamak için üzerine çift tıklayın!
function oku()
{
url 'oku.php?rand='Math.random();
var 
html '';
var 
i;
http.open("GET",url,true);
http.onreadystatechange = function dataGetir()
{
if(
http.readyState == 4)
{
veri null;
if(
http.responseText)
{
veri = eval("("+http.responseText+");");
html '<table width="400" border="1" align="center" cellpadding="0" cellspacing="0">'
'<tr>'
'<td>No</td>'
'<td>Adı</td>'
'<td>Soyadı</td>'
'<td>Telefon</td>'
'<td>Tarih</td>'
'</tr>';
for(
i=0i<veri.s.lengthi++)
{
html html "<tr>"
"<td>" + (i+1) + "</td>"
"<td>" veri.s[i].data.adi "</td>"
"<td>" veri.s[i].data.soyadi "</td>"
"<td>" veri.s[i].data.tel "</td>"
"<td>" veri.s[i].data.tarih "</td>"
"</tr>";
}
html html "</tr>"
"<td colspan='5' align='center'>"
"<input type='button' value='kaybol' onclick='kaybol()'>"
"</td>"
"</tr>"
"</table>";
document.getElementById('satirlar').innerHTML html;
}
else
{
alert("hata");
}
}
}
http.send(null);


Bu komut satırında ise veritabanına bağlanıp dataları Array olarak çıktı sağlayan oku.php dosyasına bağlanıp dataları okuyarak datanın Array objesi olarak alabilmesi için eval yöntemini kullanıyoruz. Şayet bu yöntemi kullanmazsak gelen data text olarak nitelendirilecek, dolayısıyla datayı ayıklayamayacağız. Veritabanından datayı aldıktan sonra, HTML tablosunun baş kısmını oluşturup, data Array sayısı kadar dönen bir for döngüsüyle tablonun tr alanlarını oluşturup sonuna da tablonun alt kısmında tabloyu yok edecek bir buton ekleyip innetHTML kullanarak sayfanın sonra tanımladığımız <span id="satirlar"></span> katmanına oluşturduğumuz çıktıyı yazdırıyoruz. Son olarak oluşturduğumuz tabloyu yokeden kaybol fonksiyonunda belirttiğimiz katmanın değerini =" bir nevi null yaparak siliyoruz.
PHP Kod:   Kodu kopyalamak için üzerine çift tıklayın!
function kaybol()
{
document.getElementById('satirlar').innerHTML '';


Görüldüğü gibi biraz çaba sarf ederek web sayfamızı daha da dinamik bir yapıya büründürüp çık hızlı bir şeklide çalışmasını sağlayabiliriz. Ajax'ın sadece hızlı olmasını düşünmemeliyiz. Büyük hit alan web sayfalarının oluşturacağı bant genişliğini bu yontemi kullanarak çok daha makul seviyelere indirebiliriz.

 
Alıntı ile Cevapla

Cevapla

Etiketler
ajax, belkemiği, gmailin, php


Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 
Seçenekler
Stil

Yetkileriniz
Konu Acma Yetkiniz Yok
Cevap Yazma Yetkiniz Yok
Eklenti Yükleme Yetkiniz Yok
Mesajınızı Değiştirme Yetkiniz Yok

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı
Trackbacks are Kapalı
Pingbacks are Açık
Refbacks are Açık


Benzer Konular
Konu Konuyu Başlatan Forum Cevaplar Son Mesaj
AJAX Yunus Java 0 03 Temmuz 2024 21:47
Ajaxshop.com.tr Ajax Alarm Seti Ve Ajax Güvenlik Sistemleri ZeuS Web Site Tanıtımı 0 13 Ekim 2023 15:48
[AJAX] VietVBB - Gelişmiş Forum İstatistikleri - [AJAX]VietVBB - Advanced Forum Statistics hAte vB 3.8.x Eklentileri 4 27 Aralık 2021 14:43
PSG - Ajax: 3-1 Seth Haber Arşivi 0 26 Kasım 2014 00:34
ASP.NET Ajax Örnekleri Sunay ASP/ASP.NET 2 22 Kasım 2010 18:16