Satır İçi Düzenleme | Satır İçi Düzenleme işlemi
PHP,  WEB TEKNOLOJİLERİ

JQUERY Ajax ile Satır İçi Düzenleme | PHP PDO5 min read

Merhabalar
“Satır İçi Düzenleme” adlı yeni yazımla kayıtları yerinde güncellemenizi sağlayacaksınız, bu uygulama ajax teknolojisi kullanılmıştır.

Ayırca size faydalı olabilceğini düşündüğüm JQUERY Ajax ile aktif pasif yapımı PHP PDO adlı yazıma tıklayıp göz atabilirsiniz.

MYSQL Veritabanımız

Satır İçi Düzenleme | Vertabanı Tablo
MySQL Vertabanı Tablo

Tablomuzdaki Veriler

Tablomuzdaki Veriler
Tablomuzdaki Veriler

Veritabanı bağlantımız (vt.php)

<?php
$host = '127.0.0.1';
$dbname = 'satirici';
$username = 'root';
$password = '';
$charset = 'utf8';
//$collate = 'utf8_unicode_ci';
$dsn = "mysql:host=$host;dbname=$dbname;charset=$charset";
$options = [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_PERSISTENT => false,
    PDO::ATTR_EMULATE_PREPARES => false,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    //   PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES $charset COLLATE $collate"
];
try {
    $baglanti = new PDO($dsn, $username, $password, $options);
    $baglanti->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo 'Bağlantı hatası: ' . $e->getMessage();
    exit;
}
?>

index.php (Anasayfadaki tablomuz)

Satır İçi Düzenleme | Satır içi Tablo ve Veriler
Satır içi Tablo data
Satır İçi Düzenleme | Satır İçi Düzenleme işlemi
Pdo Satır İçi Düzenleme

Sayfa ile ilgili ayrıntılı bilgiler kaynak kodumuzun içinde açıklama satırı olarak açıklanmıştır.

<!DOCTYPE html>
<html>
<head>
	  <meta charset="utf-8">
	<title>PDO Satır içi</title>	
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
                               <!-- Veritabanından gelen Verilerimizi sıralamak için 
                                       Tablomuzu hazırlıyoruz            -->
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<table class="table table-sm table-hover">
					<thead class="thead-dark">
						<th>ID</th>
						<th>Başlık</th>
						<th>Alt Başlık</th>
						<th>İçerik</th>						
					</thead>
					<!-- Bu aşağıdaki alan veritabanından gelen data'ları dizmek için gerekli                 php pdo ayarlamaları yapıyoruz -->
           
					<?php
					include('vt.php'); // veritabanımzı sayfamıza bağladık

					$sorgu = $baglanti->prepare('Select * from blog'); //veritabanından veri çekiyoruz
					$sorgu->execute();  // sorgmuzu çalıştırıyoruz

					while ($sonuc=$sorgu->fetch()) //sorgumuzu while ile döndürüyoruz
					
					{	//while başlangıcı

					?>	

					<tbody>

						<td><?= $sonuc["id"] ?></td>

						    <td  contenteditable="true"
                                 onBlur="dataKaydet(this,'baslik','<?= $sonuc["id"] ?>')"
                                 onClick="duzenle(this);"><?=$sonuc ['baslik'] ?></td>

							<td contenteditable="true"
                                onBlur="dataKaydet(this,'altBaslik','<?= $sonuc["id"] ?>')"
                                onClick="duzenle(this);"><?=$sonuc['altbaslik']?></td>
							<td contenteditable="true"
                                onBlur="dataKaydet(this,'icerik','<?= $sonuc["id"] ?>')"
                                onClick="duzenle(this);"><?=$sonuc['icerik']?></td>

                                <!--        ------NOT --------------
                                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','<?= $sonuc["id"] ?>')"  kodu ile
                                 verileri ajax ile duzenleKaydet.php ye post edip veri tabanına eklenmesini sağlıyoruz                                                           -->

					</tbody>

					<?php

							}  // while sonu
							 // 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>
	</div>
<script src="js/jquery-3.4.1.min.js"></script>     <!-- uygulamanızda jquery bağlı olması gerekiyor -->


<!-- Gerekli Tüm ayarlamaları yaptıktan sonra tablodan gelen verileri " SatirEdit.php " sayfamıza gönderiyoruz  Bunun için gerekli id ve alan adı ve değerini yolluyoruz.   -->

<script>
    function duzenle(deger) {
        $(deger).css("background", "#aee6a4");
        //seçilen hücrenin rengini değiştiriyoruz
    }

    function dataKaydet(deger, alan, id) {
        $(deger).css("background", "#FFF url(img/loading.gif) no-repeat right");
        //

        $.ajax({
            url: "satirEdit.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>

<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>

SatirEdit.php

<?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 blog 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
		}
}
?>

Uygulamaya ve veri tabanına şuradan bulabilirsiniz ==> pdosatirici.zip

Görüşleriniz bizim için değerli , emoji bırakarak yada yorum yazarak görüşlerinizi bize belirtebilirsiniz. 

Bu Projeme katkı ve desteğinden dolayı mesutd.com ‘a teşekkürler
Herkese İyi Kodlamalar 🙂