PHP PDO Satır İçi Düzenleme
Günümüz web projelerinde kullanıcı deneyimini geliştirmek, geliştiriciler için öncelikli hedeflerden biridir. Bu hedefe ulaşmanın etkili yollarından biri de, kullanıcıya veri giriş ve düzenleme işlemlerini kolaylaştırmaktır. PHP PDO satır içi düzenleme (inline edit) yöntemi, bu konuda oldukça pratik ve modern bir çözümdür. Özellikle içerik yönetim sistemlerinde, veri girişini hızlandırmak ve sayfa yenilemeden işlem yapmak için tercih edilir.
Bu yazıda, satır içi düzenlemenin ne olduğunu, nasıl çalıştığını ve PHP PDO, jQuery ve AJAX kullanarak nasıl uygulanacağını adım adım öğreneceksiniz. Ayrıca yeni başlayanların kolayca uygulayabileceği örnek kodlarla konuyu daha da pekiştireceğiz.
Satır İçi Düzenleme Nedir?
Satır içi düzenleme (inline edit), sayfa yenilemeden hücre üzerindeki verileri güncelleyebilmemizi sağlayan modern bir yöntemdir. Bu sayede kullanıcı, doğrudan tablo üzerinde düzenleme yapabilir. Böylece kullanıcı deneyimi artar, zaman kaybı önlenir ve işlemler çok daha pratik hale gelir.
Kısacası, kullanıcı daha hızlı işlem yapar, sistem daha verimli çalışır ve genel olarak kullanıcı deneyimi ciddi şekilde artar.
Kullanılacak Teknolojiler
Bu işlemde PHP, PDO, MySQL, jQuery ve AJAX kullanılacaktır. Özellikle PDO, güvenli veritabanı işlemleri için tercih edilir. Ayrıca jQuery ve AJAX ile sayfanın yenilenmesine gerek kalmadan işlem yapılabilir
- PHP – Sunucu taraflı işlem için
- PDO – Güvenli veritabanı bağlantısı için
- MySQL – Veri saklama için
- jQuery + AJAX – Sayfa yenilemeden veri güncellemek için
Adım Adım PHP PDO Satır İçi Düzenleme
1. Veritabanı Bağlantısı (fonc.php)
<?php
$host = '127.0.0.1';
$dbname = 'pdoinlinedit';
$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 {
$connect = new PDO($dsn, $username, $password, $options);
$connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo 'Connection error: ' . $e->getMessage();
exit;
}
?>2. HTML Tablo Yapısı
<tbody>
<?php
include('fonc.php'); // Veritabanımızı index.php sayfamıza dahil ediyoruz
$query = $connect->prepare('Select * from article'); // Veritabanındaki "article" tablosundan tüm verileri çekiyoruz
$query->execute(); // Sorgumuzu çalıştırıyoruz
while($result=$query->fetch()) // Verilerimizi While Loop ile iade ediyoruz
{ // While döngü
?>
<tr>
<th scope="row"><?= $result['id']?></th>
<td contenteditable="true" onBlur="inlineData(this,'title','<?= $result['id']?>')"
onClick="inlineEdit(this);"><?= $result['title']?></td>
<td contenteditable="true" onBlur="inlineData(this,'content','<?= $result['id']?>')"
onClick="inlineEdit(this);"><?= $result['content']?></td>
</tr>
<?php
} // While bitişi
?>
</tbody>3. jQuery ile AJAX Gönderimi
<script src="js/jquery-3.4.1.min.js"></script>
<script>
function inlineEdit(value) {
$(value).css("background", "#b3d7ff");
//Seçilen hücrenin rengini değiştiriyoruz
}
function inlineData(value, inline, id) {
$(value).css("background", "#FFF url(img/loading.gif) no-repeat right");
$.ajax({
url: "inlineEdit.php", //Verileri şuraya göndereceğiz
type: "POST", //POST ile gönderilecektir
data: 'inline=' + inline + '&value=' + value.innerHTML.split('+').join('{0}')+ '&id=' + id,
// Verileri "inline" "value ve id" olarak gönderiyoruz
success: function (data) {
if (data == true) {
$(value).css("background", "#28a74582");
$("#successfulresult").text("Status = Başarılı, Veri Güncellendi");
//Veriler veritabanına yazılmışsa, hücrenin arka plan rengini tekrar açık maviye değiştiririz (istediğiniz rengi seçebilirsiniz.)
}
else {
$(value).css("background", "#f00");
$("#errorstatus").text("Status = Error , Yanlış bir şey var, Lütfen Kontrol Edin");
//Bir hata varsa, hücre rengini kırmızı ve hata mesajını tablonun altındaki <span> etiketine yazdırırız.
}
}
});
}
</script>PHP PDO ile Güncelleme (inlineEdit.php)
<?php
include("fonc.php"); // Veritabanı bağlantımızı sayfamıza dahil ediyoruz.
if ($_POST) { // Bir gönderi olup olmadığını kontrol ediyoruz.
$inline = $_POST['inline']; // We check if there is a post. aktarıyoruz
$value = $_POST['value'];
//+ (artı) değerini gönderemediğimiz için {0} ile gönderiyoruz ve burada tekrar +'ya dönüştürüyoruz.
$value = str_replace('{0}','+',$value);
$id = $_POST['id'];
if ($connect->query("UPDATE article SET $inline = '$value' WHERE id =$id")) // Verileri güncellemek için sorgumuzu yazıyoruz.
{
echo true; // Güncelleme sorgusu çalışıyorsa doğru döndürürüz
}
else
{
echo false; // Kimlik bulunamazsa veya sorguda bir hata varsa false döndürürüz
}
}
?>Sonuç Olarak
Sonuç olarak, PHP PDO satır içi düzenleme özelliği ile web sitenizin yönetim paneline profesyonel bir dokunuş katabilirsiniz. Özellikle içerik yöneticileri için büyük kolaylık sağlar. Ayrıca bu yöntem, veritabanı işlemlerini daha güvenli ve hızlı bir şekilde yapmanıza yardımcı olur.
Fakat Dilerseniz bu yapıyı geliştirerek farklı alanlarda da kullanabilirsiniz. Örneğin; e-posta, telefon veya adres gibi bilgilerin doğrudan güncellenmesini sağlayabilirsiniz. Üstelik kullanıcı tarafında daha dinamik ve modern bir arayüz oluşturmuş olursunuz.
Önceki makaleme göz atın—> PHP PDO CRUD İşlemleri
Projeyi indirin—> PHP PDO Satır İçi Düzenleme