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

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.

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

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.

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

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

<?php

    @$baglanti = new mysqli('localhost', 'root', '', 'veritabani');
    // 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
          }
    }

?>

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

Tepkiniz Nedir?

like
0
dislike
0
love
0
funny
0
angry
1
sad
1
wow
1