JQuery Ajax Kullanarak PHP MySQL Satır İçi Düzenleme

makale.baslik
PHP

Bu uygulama ile PHP web sayfalarında satır içi (inline) düzenleme yapıp JQUERY AJAX ile düzenlemelerinizi MySQL veri tabanına aktarabileceksiniz.

Daha önce sonsuz dinamik form uygulaması yapmıştık şimdi de web sayfamızda satır içi düzenleme yapabileceğimiz bir yapıyı sizinle paylaşacağım. Bu yapıyı birçok yerde geliştirerek kullanabilirsiniz.

Öncelikle veri tabanımızı oluşturalım, aşağıdaki gibi makale adında bir tablo oluşturalım.

veri tabanı

 

Daha sonrasında veri tabanına bağlantımızı sağlayacak vt.php sayfamızı oluşturuyoruz.

<?php

@$baglanti = new mysqli('localhost', 'root', '', 'mesutdblog');
// Veritabanı bağlantımızı yapıyoruz.
if (mysqli_connect_error()) {
    echo mysqli_connect_error();
    exit;
    //eğer bağlantıda hata varsa PHP çalışmasını sonlandırıyoruz.
}

$baglanti->set_charset("utf8");
// Türkçe karakter sorunu olmaması için utf8'e çeviriyoruz.

?>

Şimdi index.php sayfamızı oluşturalım. Sayfa ile ilgili ayrıntılı bilgiler açıklama satırlarındadır. Kısaca verilerimizi Ajax yöntemi ile kayıt edeceğimiz sayfaya post ediyoruz.

contenteditable="true" kodu ile içeriklerin fare tıklandığında düzenlenebilir olmasını sağlıyoruz.  Bunu sadece table için düşünmeyin div ler içinde kullanabilirsiniz.

veriKaydet() fonksiyonu ile verilerin AJAX ile post edilip veri tabanına yazılmasını sağlıyoruz.

 duzenle() fonksiyonu ile seçilen hücrenin stilini değiştiriyoruz.

<?php
include("vt.php"); // veritabanı bağlantımızı sayfamıza ekliyoruz. 
?>

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Satır içi veri düzenle</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">

    <!-- Veritabanına eklenmiş verileri sıralamak için üst kısmı hazırlayalım. -->
    <div class="col-md-7">

        <table class="table">

            <tr>
                <th>No</th>
                <th>Başlık</th>
                <th>İçerik</th>

            </tr>

            <!-- Şimdi ise verileri sıralayarak çekmek için PHP kodlamamıza geçiyoruz. -->

            <?php

            $sorgu = $baglanti->query("SELECT * FROM makale"); // Makale tablosundaki tüm verileri çekiyoruz.

            while ($sonuc = $sorgu->fetch_assoc()) {

                $id = $sonuc['id']; // Veritabanından çektiğimiz id satırını $id olarak tanımlıyoruz.
                $baslik = $sonuc['baslik'];
                $icerik = $sonuc['icerik'];

// While döngüsü ile verileri sıralayacağız.
// Burada PHP tagını kapatarak tırnaklarla uğraşmadan tekrarlatabiliriz.
                ?>

                <tr>
                    <td><?php echo $id; // Yukarıda tanıttığımız gibi alanları dolduruyoruz. ?></td>
                    <td contenteditable="true" onBlur="veriKaydet(this,'baslik','<?php echo $id ?>')"
                        onClick="duzenle(this);"><?php echo $baslik ?></td>
                    <td contenteditable="true" onBlur="veriKaydet(this,'icerik','<?php echo $id ?>')"
                        onClick="duzenle(this);"><?php echo $icerik ?></td>
<!--
    Burada contenteditable="true" ekleyip içeriğin düzenlenebilir olmasını sağlıyoruz
    onClick="duzenle(this);" kodu ile arka plan rengini değiştiren fonksiyonu çağırıyoruz
    onBlur="veriKaydet(this,'baslik','<?php echo $id ?>')"  kodu ile
    verileri ajax ile duzenleKaydet.php ye post edip veri tabanına eklenmesini sağlıyoruz
-->

                </tr>

            <?php
            }
            // Tekrarlanacak kısım bittikten sonra PHP tagının içinde
            // while döngüsünü süslü parantezi kapatarak sonlandırıyoruz.
            ?>

        </table>
        <span id="sonuc"></span>
    </div>
</div>

<!-- ##############################################################
  Verilerin düzenlenmesini sağlayan düzenle.php sayfamıza verileri yolluyoruz.
  Bunun için gerekli id ve alan adı ve değerini yolluyoruz.
  -->

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    function duzenle(deger) {
        $(deger).css("background", "#ffff00");
        //seçilen hücrenin rengini değiştiriyoruz
    }

    function veriKaydet(deger, alan, id) {
        $(deger).css("background", "#FFF url(yukleniyor.gif) no-repeat right");
      
        $.ajax({
            url: "duzenleKaydet.php", //verileri göndereceğimiz url
            type: "POST", //post ile gönderilecek
            data: 'alan=' + alan + '&deger=' + deger.innerHTML.split('+').join('{0}')+ '&id=' + id, 
            // verileri alan deger ve id olarak yolluyoruz
            //+ (artı) post edilirken boşluk ile değişiyor 
            //bunu engellemek için + değeri {0} ile değiştirdim 
            //kayıt yaparkende index.php de geri değişimini yapıyoruz 
            success: function (data) {
                if (data == true) {
                    $(deger).css("background", "#fff");
                    // eğer veriler veri tabanına yazılmış ise hücrenin
                    //arka plan rengini beyaza geri döndürüyoruz
                }

                else {
                    $(deger).css("background", "#f00");
                    $("#sonuc").text("Hata veri düzenlenmedi");

                    //Eğer hata varsa hücre rengini kırmızı ve
                    // tablo altında hata mesajı yazdırıyoruz
                }
            }
        });
    }
</script>
</body>
</html>

Şimdide AJAX ile verileri post ettiğimiz duzenleKaydet.php sayfamızı oluşturalım. Veri tabanında verileri düzenlemek için gerekli olan tablodaki alan adı, değeri ve id bilgisini post edilerek elde ediyoruz ve SQL sorgumuzda kullanıyoruz. 

<?php 
include("vt.php"); // veritabanı bağlantımızı sayfamıza ekliyoruz.
if ($_POST) { // Post olup olmadığını kontrol ediyoruz.
   
   $alan = $_POST['alan']; // Post edilen değerleri değişkenlere aktarıyoruz
   $deger = $_POST['deger'];

   //+ (artı) değerini post edemediğimizden {0} ile gönderip burada tekrar + ya çeviriyoruz
   $deger = str_replace('{0}','+',$deger); 
    
   $id = $_POST['id'];

      if ($baglanti->query("UPDATE makale SET $alan = '$deger' WHERE id =$id")) // Veri güncelleme sorgumuzu yazıyoruz.
      {
         echo true; // Eğer güncelleme sorgusu çalıştıysa geriye true döndürüyoruz
      }
      else
      {
         echo false; // id bulunamadıysa veya sorguda hata varsa false döndürüyoruz
      }
}

?>

 

Bir proje içinde nasıl kullanacağınızı anlatan video:

İyi kodlamalar, kafanıza takılan kısımları yorumlarda sorabilirsiniz.

Bu uygulamayı geliştirerek farklı amaçlar için kullanabilirsiniz.  

Uygulama dosyaları ve veri tabanı dosyasını indirmek için: satirici.rar

Çalışmanın demo uygulaması için tıklayın.

 
Paylaş:

Yorumlar

  1. kodları çalıştırır gibi oluyor yalnız input içine tıklıyorum düzeltme yapıyorum yükleniyr resmi çıkıyor ileriye gitmiyor. bunun nedeni ne olabilir

    1. Veri tabanı bağlantısı doğru olmayabilir. Mysql bağlantısını doğru yaptığınıza emin olun.

  2. Merhaba.. Öncelikle teşekür ederim. Kodları uyguladım fakat post etmiyor bütün ayarlamaları yaptım.

    1. Merhaba örnek uygulamayı indirip denediniz mi?

  3. Veritabanı vs doğru olmasına rağmen db ye kaydetmiyor. Sorun nedir acaba.

    1. Merhaba öncelikle örnek uygulamayı indirip deneme yapınız, daha sonra kendi uygulamanıza uyarlayın olmazsa bana tekrar yazın inceleyelim.

  4. Makale için teşekkürler, işimi gördü. sorunsuz çalıştı.

  5. Elinize Sağlık Çok işime yarayan ve faydalı bir makale olmuş. tabi pdo ile kullanabilmek için bazı düzenlemeler gerekti.

  6. Merhaba Bunu select box içinde nasıl kullanabiliriz bilginiz varmı ben aşağıdaki gibi denediğimde başaramadım <select contenteditable="true" onBlur="veriKaydet(this,'baslik','<?php echo $id ?>')" onClick="duzenle(this);" name="baslik" id="baslik" class="form-control"> <option value="">Seçin...</option> <option value="">Seçin...</option> <option value="">Seçin...</option> </select>

    1. Merhaba genelde select box tan seçim yapıldığı için satır içi düzenleme yapılması beklenmez ama şu şekilde bir örnek buldum belki işinizi görür.

  7. Teşekkürler, tamamen sorunsuz çalışıyor ve geliştirmelere açık farklı işlerimde kullanıyorum. Tek sıkıntım 2+1, 4+2 şeklinde girişlerde + (artı) işaretini sql veri tabanına boşluk olarak kaydediyor. Yardımlarınıza ihtiyacım var.

    1. Düzenleme yapılmıştır. Açıklama satırlarına eklendi. + (artı) -> {0} ile kodlandı daha sonrada decode yaparak + eklenmesi sağlandı

  8. Merhaba öncelikle emekleriniz icin tesekkürler güzel örnekler var ben bu örnegi indiriyorum ama dosya hatali diyor acamiyorum tekrar yükleyebilirmisiniz. simdiden tsk.

  9. Mesut bey merhabalar Java Scripte Yeni Başaldım Sizinki Gibi Satır İçi Güncelleme Yapmaya Çalışıyorum Projeniz Düzgün Çalışıyor Fakat Ben İnput İçi Güncelleme Yapmaya Çalışıyorum Kodlar Çalışıyor Fakat İnputtaki Veriyi Almıyor Boş Olarak Kayıt Ediyor. Ve Seleckt İşlemi Nasıl Yapılacak Hiç Bilmiyorum Bu Konularda Yardımcı Olabilirmisiniz ?

    1. Tam anlayamadım daha ayrıntılı yazar mısınız?

  10. merhaba ellerinize sağlık öncelikle. projrniz işime yaradı fakat ben bunu input içinde düzeltebilir miyim ?. &lt;input vaule=&quot;&lt;?php echo $row['baslik']; ?&gt;&quot; /&gt; bu kodu nasıl düzeltebilirim acaba ?.

    1. Aynı şekilde kullanabilirsiniz. 

Kategoriler

En çok okunan yazılar.

 Etiketler