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

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.

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.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript" src="jquery.js"></script><!--JQUEY Kütüphanemizi dahil ediyoruz.-->

<script type="text/javascript">



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);

}

});}





</script>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />

<title>Untitled Document</title>

</head>

<!-- onload="islem('','') sayfa yüklendiğinde fonksiyonumuzu boş değerlerle otamatik olarak çalıştırıyoruz.-->



<body onload="islem('','')"> 



<!-- BAŞLIKARIN GÖSTERİLECEÐݠTABLOYU OLUŞTURYORUZ-->



<table width="654" border="1" cellpadding="0" cellspacing="0" bordercolor="#666666">

<tr><td width="173" bgcolor="#FFCC00"><span class="style4">Kitap İsmi</span></td>

<td width="143" bgcolor="#FFCC00"><span class="style4">Yazar İsmi</span></td>

<td width="171" bgcolor="#FFCC00"><span class="style4">Yayın Evi</span></td>

<td width="157" bgcolor="#FFCC00">İşlemer</td>

</tr>

</table>





<div id="liste"></div> <!-- Sonuçların görüntülenceği div elamanı-->





</body>

</html>



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


<?php 

$baglanti
=mysql_connect("localhost","root","") or die ("Bağlatı Hatası");// Veritabanı bağlantısını satırı.

$sorgu=mysql_db_query(kitap_vt,"Select * from kitaplar",$baglanti);//veritabanını seçiyor ve liste genel sorgumuzu oluştuyoruz.



while($liste=mysql_fetch_array($sorgu)) //Kayıtların listelenmesi

{



$Id=$liste['Id'];



if (
$Id==$_GET['id']) // Kaydın ID değeri ile düzelt linkinden ajax ile gelen id değerini karşılaştırıyoruz.

//Eğer şart sağlanırsa verilen input text ile görüntülecek

{

if (
$_GET['komut']=="duzelt"// güncelle komutunu geldi ise veri güncellenecek.

{

//Burada formdan ajax ile gelen veriler değişkenlere atanıyor.



$kitap_adi=$_GET['kadi'];



$yazar=$_GET['yazar_ismi'];



$yayin_evi=$_GET['yayin_evi'];



mysql_db_query(kitap_vt,"Update kitaplar set kitap_adi='$kitap_adi',yazar_ismi='$yazar',yayin_evi='$yayin_evi

where id='
$Id'",$baglanti); //  Kaydın id değerine göre formda ajax ile gelen veriler veritabanındakiler ile değiştiriliyorr.



?>

<!--Güncelleme işleminden sonra listenin eksi halini alması için fonsiyonumuz boş değerlerle çalıştırlıyor.-->

<script type="text/javascript">

islem('','');

</script>



}

else //Güncelle komut gelmedi ise veriler form halinde görüntülencek

{

?>



<table width="651" border="0" cellpadding="1" cellspacing="1" bordercolor="#999999" style="paddin:0;margin:0;4">

<tr bgcolor="#f3f3f3">

<form style="margi:0;padding:0;">

<td width="170"><input type="text" value=' echo $liste['kitap_adi']?>' name="kadi"/></td>

<td width="144"><input type="text" value=' echo $liste['yazar_ismi']?>' name="yazar_ismi"/></td>

<td width="169"><input type="text" value=' echo $liste['yayin_evi']?>' name="yayin_evi"/></td>

</form>

<td width="155"><div align="center">

<a href="javascript:islem('','')">İptal</a> <!--İşlemi iptal etmel için fonksiyon boş değerler ile çalşıtırlıyor.-->

| <a href="javascript:islem(' echo $liste['Id']?>','duzelt')">Güncelle</a> <!-- Güncelleme için komut değikeni düzelt olarak gönderiliyor.-->

</div></td>

</tr></table>



}

}

else //ID değeri boş gelmiş ise liste normal olarak görüntüleniyor.

{



?>



<table width="650" border="0" cellpadding="1" cellspacing="1" bordercolor="#999999">

<tr bgcolor="#f3f3f3"><td width="171"> echo $liste['kitap_adi']?></td>

<td width="140"> echo $liste['yazar_ismi']?></td>

<td width="170"> echo $liste['yayin_evi']?></td>

<td width="156">

<div align="center">



<a href="javascript:islem(' echo $Id?>','')">Düzelt</a> <!--islem fonksiyonunu veritanından eşitlenen id değikeni ile çağırıyoruz.-->



</div>



</td>

</tr></table>



}

}

?> ?>



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..

  • Etiketler;
İsmail Mercan
1988 Çankırı Ilgaz doğumlu olan yazar, liseyi Ankara Aydınlık Evler Ticaret Meslek Lisesi / Bilgisayar Programcılığı bölümünde bitirdi. Daha sonra Akınsoft Ankara Bölge Müdürlüğünde stajyer olarak görev aldı. <p>2006 yılında halen devam etmekte olduğu Sakarya Üniversitesi Eğitim Fakültesi Bilgisayar ve Öğretim Teknolojileri Bölümüne yerleşerek öğrenimine devam etmektedir. <p>Web Programlama(PHP-MYSQL, ASP, AJAX,CSS, Javascript ) ve Web Tasarım(Photoshop, Fireworks, Dreamweaver,Flash) ile yakından ilgilenen yazar kendi çapında birçok küçük kapsamlı projeye imza atmıştır.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

ne demek istediğini tam anlayamadım biraz daha açıklayıcı olursan..
Firefoxda güncelleme yapılmıyor. Bir eklenti mi kurmak gerekli ? İyi çalışmalar...
aynen hata veriyor firefox ta
Kardeşim eline sağlık güzel paylaşım yapmışsın ama 73.satırda hata veriyor neden acaba ?

Yukarı Git