🗑️ PHP PDO Ajax ile Çoklu Veri Silme – Adım Adım Rehber
Web tabanlı uygulamalarda, kullanıcıların birden fazla veriyi silebilmesini sağlar.
Özellikle çoklu işlem yapmak, kullanıcı deneyimini iyileştirir.
İlk olarak şunu belirtelim: PHP ile veri silmek oldukça kolaydır.
Ancak bu işlemi AJAX kullanarak, akıcı bir deneyim yapmak daha profesyoneldir.
PHP PDO Ajax ile çoklu veri silme işleminin nasıl yapılacağını anlatacağız.
📌 Neden Ajax ile Veri Silme Kullanmalıyız?
Geleneksel PHP form yapılarında, her işlemden sonra sayfa yenilenir.
Bu durum, kullanıcı deneyimini olumsuz etkileyebilir.
Öte yandan Ajax kullanıldığında, sayfa yenilenmeden veri işlenebilir.
Bu da hem hız hem de modern bir görünüm sağlar.
Ayrıca, çoklu veri silme gibi işlemlerde Ajax sayesinde toplu işlem yapılabilir.
Sonuç olarak, kullanıcı arayüzü sadeleşir ve sunucu yükü azalır.
🛠️ Veritabanı ve Örnek Tablo
Başlamadan önce örnek bir tablo oluşturalım:
CREATE TABLE IF NOT EXISTS `blog` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`photo` varchar(50) NOT NULL DEFAULT '0',
`title` varchar(50) NOT NULL DEFAULT '0',
`content` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
-- multiple_delete.blog: ~4 rows (yaklaşık) tablosu için veriler indiriliyor
/*!40000 ALTER TABLE `blog` DISABLE KEYS */;
INSERT INTO `blog` (`id`, `photo`, `title`, `content`) VALUES
(1, '1.jpeg', 'What is Lorem Ipsum?\r\n', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500'),
(2, '2.jpeg', 'Where does it come from?\r\n', 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.'),
(3, '3.jpeg', 'Why do we use it?\r\n', 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to usin'),
(5, '4.jpeg', 'Why do we use it?\r\n', 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to usin');
/*!40000 ALTER TABLE `blog` ENABLE KEYS */;
Bu tabloda kayıtlı kişileri listeleyecek ve Ajax ile seçilenleri topluca sileceğiz.
PDO ile Güvenli Bağlantı Kurmak
<?php
$host = '127.0.0.1';
$dbname = 'pdocrudphoto';
$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;
}
?>📋 HTML – Tablo ve Checkbox Yapısı
Öncelikle silmek istediğimiz verileri checkbox ile seçeceğimiz bir tablo oluşturalım:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Çoklu Veri Silme</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="deleteall.js"></script>
<?php
include('fonc.php'); // Veritabanımızı sayfamıza dahil ediyoruz
if (isset($_POST['delete'])) { // Silme Onay Kutusunun Işaretli olup olmadığını kontrol etme
$selecteddata = implode(', ', $_POST['delete']); // Checkbox ile birlikte gelen "$selecteddata" değişkenine iletiyoruz
$query = $connect->prepare('select * FROM `blog` WHERE `id` IN (' . $selecteddata . ')'); // Kimlikleri veritabanından alıyoruz
$query->execute(); //Sorguyu yürütme ve veri alma
while ($result = $query->fetch()) { // Gelen veriler bir while döngüsü ile döndürülür
@unlink('img/' . $result["photo"]);// Eski dosyalar (fotoğraflar) silindi. isteğe bağlı olarak, bu kodu kullanamazsınız
}
$query = $connect->prepare('DELETE FROM `blog` WHERE `id` IN (' . $selecteddata . ')'); // Gelen veri kimliklerine göre silme sorgumuz
$query->execute(); // Çalışan Sorgu
if ($query) { // Sorgumuz işe yaradıysa, index.php sayfamıza yönlendiriyoruz
header("location:index.php");
}
}
?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Tablomuza bir Form ekliyoruz, bu bir Form olmalı, aksi takdirde veriler yayınlanmaz, çalışmaz. -->
<form action="" method="post">
<!-- Our table-->
<table class="table table-hover">
<!-- Seçilen Sil Düğmemizi Modal ile Uyarı vermek için yapıyoruz.-->
<a class="btn btn-danger font-18" href="#" data-toggle="modal"
data-target="#deleteall"><i class="fa fa-trash"> Seçilen Verileri Sil</i></a>
<!-- Logout Modal-->
<div class="modal fade" id="deleteall" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Tüm Eylemleri Sil</h5>
<button class="close" type="button" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h1 class="text-center">Önemli Uyarı!</h1>
<h3 class="text-center">Seçilen veriler silinecektir. Onaylıyor musunuz</h3></div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger font-18 "><i class="fa fa-trash"> Seçilenleri sil</i></button>
<button class="btn btn-secondary" type="button"
data-dismiss="modal">Iptal etmek
</button>
</div>
</div>
</div>
</div> <!-- Seçilen modu silmemizin sonu-->
<thead class="thead-dark">
<th>
<!--Masamızın En Üstündeki Tümünü Seç Onay kutumuzu tablomuzun thead kısmına yerleştiriyoruz-->
<div class="checkbox">
<input type="checkbox" id="selectall" value=""> <!--Onay Kutumuza bir id veriyoruz ve hepsini javascript kodlarıyla seçiyoruz. -->
</div>
</th>
<th>ID</th>
<th>foto</th>
<th>Başlık</th>
<th>Açıklama</th>
</thead>
<?php
$query = $connect->prepare("SELECT * FROM blog"); // Veritabanından veri alma
$query->execute(); // Sorgumuzu Çalıştırıyoruz
while ($result=$query->fetch()) // Veritabanındaki veriler While Loop ile döndürülür.
{ // Başlangıçta verilerimiz var
?>
<tbody>
<td>
<!--Silinen Datayı tanımlamak için Checkbox'ı kullanıyoruz-->
<div class="checkbox">
<input class="chck" type="checkbox" name="delete[]"
value="<?php echo $result['id']; ?>"><!--Çoklu silme sorgumuz için tanınacak onay kutusunun "name" kısmı için bir ad belirliyoruz.-->
<label for="<?php echo $result['id']; ?>"></label> <!--id yi veritabanından Checkbox'a gönderiyoruz-->
</div>
</td>
<td><?= $result['id']?></td>
<th><img src="img/<?= $result["photo"] ?>" width="150px"/></th>
<td><?= $result['title']?></td>
<td><?= $result['content']?></td>
</tbody>
<?php
} // Süre Sonu ile verilerimizi çekeriz ve sorgumuz sona erer.
?>
</table>
</form>
</div>
</div>
</div>
<!--"hepsini sil" onay kutusuna tıkladığımızda, tüm onay kutularının işaretli olması için javascript kodumuzu ekliyoruz-->
<script type="text/javascript">
$(document).ready(function () {
$('#selectall').on('click', function () {
if ($('#selectall:checked').length == $('#selectall').length) {
$('input.chck:checkbox').prop('checked', true);
} else {
$('input.chck:checkbox').prop('checked', false);
}
});
});
</script>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>Bu yapı ile kullanıcı dilediği kadar kişiyi seçebilir.
Devamında silme işlemini Ajax ile gerçekleştireceğiz.
🧠 JavaScript (jQuery) – Ajax ile Silme
Şimdi Ajax kodunu ekleyerek verileri sayfa yenilemeden silelim:
<!--"hepsini sil" onay kutusuna tıkladığımızda, tüm onay kutularının işaretli olması için javascript kodumuzu ekliyoruz-->
<script type="text/javascript">
$(document).ready(function () {
$('#selectall').on('click', function () {
if ($('#selectall:checked').length == $('#selectall').length) {
$('input.chck:checkbox').prop('checked', true);
} else {
$('input.chck:checkbox').prop('checked', false);
}
});
});
</script>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>🧾 PHP – Silme İşlemi (deleteall.js)
Şimdi sunucu tarafında silme işlemini PDO ile gerçekleştirelim. Bu kısımda sadece deleteall.js ekliyoruz. Burada kod parçacısı olarak paylaşamıyorum. Çünkü çok uzun bir şey olduğu içi ekleyemiyorum. Ama indirme linkinde bulabilirsiniz.
Bu kod sayesinde birden fazla ID aynı anda silinir.
PDO’nun prepare ve execute fonksiyonları sayesinde SQL enjeksiyonlarına karşı da koruma sağlanmış olur.
Çoklu Veri Silme / index.php (Tüm kaynak kodları)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Çoklu Veri Silme</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="deleteall.js"></script>
<?php
include('fonc.php'); // Veritabanımızı sayfamıza dahil ediyoruz
if (isset($_POST['delete'])) { // Silme Onay Kutusunun Işaretli olup olmadığını kontrol etme
$selecteddata = implode(', ', $_POST['delete']); // Checkbox ile birlikte gelen "$selecteddata" değişkenine iletiyoruz
$query = $connect->prepare('select * FROM `blog` WHERE `id` IN (' . $selecteddata . ')'); // Kimlikleri veritabanından alıyoruz
$query->execute(); //Sorguyu yürütme ve veri alma
while ($result = $query->fetch()) { // Gelen veriler bir while döngüsü ile döndürülür
@unlink('img/' . $result["photo"]);// Eski dosyalar (fotoğraflar) silindi. isteğe bağlı olarak, bu kodu kullanamazsınız
}
$query = $connect->prepare('DELETE FROM `blog` WHERE `id` IN (' . $selecteddata . ')'); // Gelen veri kimliklerine göre silme sorgumuz
$query->execute(); // Çalışan Sorgu
if ($query) { // Sorgumuz işe yaradıysa, index.php sayfamıza yönlendiriyoruz
header("location:index.php");
}
}
?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Tablomuza bir Form ekliyoruz, bu bir Form olmalı, aksi takdirde veriler yayınlanmaz, çalışmaz. -->
<form action="" method="post">
<!-- Our table-->
<table class="table table-hover">
<!-- Seçilen Sil Düğmemizi Modal ile Uyarı vermek için yapıyoruz.-->
<a class="btn btn-danger font-18" href="#" data-toggle="modal"
data-target="#deleteall"><i class="fa fa-trash"> Seçilen Verileri Sil</i></a>
<!-- Logout Modal-->
<div class="modal fade" id="deleteall" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Tüm Eylemleri Sil</h5>
<button class="close" type="button" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h1 class="text-center">Önemli Uyarı!</h1>
<h3 class="text-center">Seçilen veriler silinecektir. Onaylıyor musunuz</h3></div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger font-18 "><i class="fa fa-trash"> Seçilenleri sil</i></button>
<button class="btn btn-secondary" type="button"
data-dismiss="modal">Iptal etmek
</button>
</div>
</div>
</div>
</div> <!-- Seçilen modu silmemizin sonu-->
<thead class="thead-dark">
<th>
<!--Masamızın En Üstündeki Tümünü Seç Onay kutumuzu tablomuzun thead kısmına yerleştiriyoruz-->
<div class="checkbox">
<input type="checkbox" id="selectall" value=""> <!--Onay Kutumuza bir id veriyoruz ve hepsini javascript kodlarıyla seçiyoruz. -->
</div>
</th>
<th>ID</th>
<th>foto</th>
<th>Başlık</th>
<th>Açıklama</th>
</thead>
<?php
$query = $connect->prepare("SELECT * FROM blog"); // Veritabanından veri alma
$query->execute(); // Sorgumuzu Çalıştırıyoruz
while ($result=$query->fetch()) // Veritabanındaki veriler While Loop ile döndürülür.
{ // Başlangıçta verilerimiz var
?>
<tbody>
<td>
<!--Silinen Datayı tanımlamak için Checkbox'ı kullanıyoruz-->
<div class="checkbox">
<input class="chck" type="checkbox" name="delete[]"
value="<?php echo $result['id']; ?>"><!--Çoklu silme sorgumuz için tanınacak onay kutusunun "name" kısmı için bir ad belirliyoruz.-->
<label for="<?php echo $result['id']; ?>"></label> <!--id yi veritabanından Checkbox'a gönderiyoruz-->
</div>
</td>
<td><?= $result['id']?></td>
<th><img src="img/<?= $result["photo"] ?>" width="150px"/></th>
<td><?= $result['title']?></td>
<td><?= $result['content']?></td>
</tbody>
<?php
} // Süre Sonu ile verilerimizi çekeriz ve sorgumuz sona erer.
?>
</table>
</form>
</div>
</div>
</div>
<!--"hepsini sil" onay kutusuna tıkladığımızda, tüm onay kutularının işaretli olması için javascript kodumuzu ekliyoruz-->
<script type="text/javascript">
$(document).ready(function () {
$('#selectall').on('click', function () {
if ($('#selectall:checked').length == $('#selectall').length) {
$('input.chck:checkbox').prop('checked', true);
} else {
$('input.chck:checkbox').prop('checked', false);
}
});
});
</script>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
⚠️ Dikkat Edilmesi Gerekenler
İlk olarak, Ajax ile gönderilen verilerin doğruluğunu kontrol etmek güvenlik açısından çok önemlidir.
Kullanıcının yetkili olup olmadığı da mutlaka sunucu tarafında kontrol edilmelidir.
Bunun yanında, çoklu silme işlemlerinde yanlışlıkla seçim yapılabileceğinden, bir “emin misiniz?” uyarı penceresi eklemek iyi bir fikir olabilir.
✅ Sonuç
PHP PDO Ajax ile çoklu veri silme, kullanıcı deneyimini geliştiren, hızlı ve modern bir çözümdür.
Hem kullanıcı arayüzü sadeleşir hem de sistem daha verimli çalışır.
Bu yöntem sayesinde, veri yönetim ekranları profesyonel bir görünüme kavuşur.
Ayrıca PDO kullanımı ile güvenlik de ihmal edilmemiş olur.
Sonuç olarak, bu yapıyı projelerinize entegre ederek etkili ve güvenli bir çoklu silme sistemi oluşturabilirsiniz.
Önceki makaleyi keşfedin —> PHP PDO Aktif Pasif Yapısı